Archive for March, 2008

Tutorial: Utilizar videos de YouTube como Screensaver

Thursday, March 27th, 2008


 

Bueno, esa es la idea, utilizar videos de YouTube como protector de pantalla. En verdad el tutorial no está limitado a videos de esa plataforma, sino que se pueden utilizar los de cualquier sistema de video sharing (Google Video, Dailymotion, etc)

Utilizaremos tres aplicaciones, todas gratuitas y de las cuales 2 son herramientas online:

1 - Buscamos en YouTube el video que queremos, copiamos su URL para luego pegarla en Keepvid y descargar el video (recordar añadir la extensión .FLV al guardar el video):

Descargar video

2 - Una vez descargado el video, vamos a Media Convert, subimos el .FLV y como formato de salida especificamos SWF. Le damos OK y esperamos a que el sistema suba y convierta nuestro archivo.

Convertir archivo

3 -  Instalamos InstantStorm y lo abrimos. Esta herramienta sirve para convertir cualquier SWF en un protector de pantalla, por lo cual no solo para videos de YouTube se puede utilizar. En la primera pantalla que aparece hacemos click para crear un proyecto paso a paso:

InstantStorm

4 - Se abrirá el Wizard, allí iremos completando el título del screensaver, para luego elegir el SWF convertido. Además si lo deseamos podremos elegir una imagen para mostrar en el instalador del screensaver.

Wizard

5 - Cuando terminemos y le demos a Finish lo siguiente será exportar el instalador, para eso hacemos click en Create. Le damos un nombre y guardamos en alguna carpeta el .EXE. Automáticamente InstanStorm comenzará a compilar, pasados unos segundos ya tendremos nuestro archivo. Lo único que hará falta será ejecutarlo e instalarlo. Luego vamos al Escritorio, Propiedades, solapa Protector de Pantalla, seleccionamos nuestro screensaver y le damos en Aceptar. Podemos verificar todo en la vista previa.

Primeros pasos para aprender a hacer una página web

Wednesday, March 26th, 2008

Antes de nada, decir que el desarrollo web es un proceso creativo y personal en el que cada uno decide cómo hacer las cosas, por lo que estos pasos que te propongo aquí son sólo eso, propuestas, ideas, sugerencias o como quieras llamarlo. Cada uno después puede optar por hacer las cosas como prefiera.

No obstante, puede ser interesante que visites las secciones accesibilidad, usabilidad y posicionamiento en buscadores antes de comenzar a elaborar tu trabajo, ya que cuando las leas comprenderás que hay que tener muchas cosas en cuenta a la hora de elaborar una web y sus contenidos si queremos tener cierto éxito.

Una vez aclarado esto, hay que decir que para el diseño de páginas web debemos tener en cuenta varias etapas:

1. Planteamiento de objetivos para tu página web

Esta etapa es muy importante y con frecuencia se pasa por alto. Se trabaja en el papel para plantearnos el proyecto y qué queremos conseguir al realizar nuestra web. La planificación de tu web debe incluir:

  • Breve descripción de los contenidos de la página, su título principal, etc.
  • Finalidad que persigo al hacerla (informar, hacer negocio, entretener, etc.)
  • Páginas parecidas a la mía, qué puedo ofrecer yo que no tengan ellas para atraer a mi público objetivo, etc.
  • Hardware, software, documentación que necesito para realizarla y de qué dispongo realmente.
  • Describir cuál es mi publico objetivo, nivel informático, idiomas, intereses, problemas físicos, etc. para adaptar la página a sus características.
  • Dónde se va a visualizar la web; navegadores más utilizados, plugins, elementos específicos, etc.

2. Estructurar el contenido de la página

Es conveniente que dibujemos un organigrama con todas las partes del sitio web, distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes, mediante el cual ir creando la estructura de la página web. Antes de empezar a desarrollar tu página web en el ordenador, debes tener muy claro cuáles serán sus contenidos, su estructura, el nombre de la página, etc. cosas que no se deben hacer sobre la marcha para evitar rectificaciones innecesarias, trabajo inútil y pérdidas de tiempo. Hay varias maneras de estructurar el contenido de una web:

En árbol: Esta estructura está compuesta por una página principal que enlaza con otras páginas, las cuales, a su vez, enlazan con otras páginas de nivel inferior. De esta manera se agrupan las páginas web en niveles, de tal modo que para llegar del primero al último se debe pasar por todos los intermedios. Esta estructura es poco navegable si tenemos una web con muchas páginas, porque para ver las páginas de otra rama tenemos que retroceder hasta la página principal, haciendo la navegación muy pesada.

En lista: Esta estructura es la opuesta a la anterior. En ella no existe página principal ya que todas están en el mismo nivel. Para llegar a la última página hay que recorrer todas las anteriores. Es una estructuración muy adecuada para la presentación de manuales o aplicaciones donde el usuario deba recorrer forzosamente una serie de páginas web para conseguir su objetivo.

Mixta: Esta estructura es una combinación de las dos anteriores. Las páginas están jerarquizadas en niveles, los cuales a su vez están conectados entre sí en forma de lista. Esta estructura es mucho más navegable y práctica, puesto que permite poder desplazarse de rama en rama sin necesidad de volver a la página principal para hacerlo.

En red: Esta estructura supone que todas las páginas de la web están conectadas entre sí, por lo que es una estructura más compleja y menos ordenada. Su ventaja es que desde cada página podemos ir a cualquier otra del sitio. No obstante, requiere mucha planificación para evitar ofrecer al visitante un caos de enlaces innecesarios.

Una vez tengas claro lo que quieres hacer y su estructura básica puedes empezar a recopilar información para confeccionar cada sección de tu página web. Conforme vayas investigando sobre el tema de la web, casi con seguridad irás realizando modificaciones tanto en su estructura como en sus contenidos para adaptarla mejor a lo que has aprendido, por lo que es conveniente que trabajes sobre borradores, no con versiones definitivas, te ahorrarás mucho trabajo. Por ejemplo, puedes haber decidido hacer una web sobre Ferrari, y en cuanto a su diseño querer colocar un menú a la izquierda con las secciones principales, un cuerpo central con el contenido de la sección y una última columna a la derecha donde insertar tu publicidad. No obstante, puede ocurrir fácilmente que al buscar información sobre su escudería encuentres tanta y tan diversa que llegues a la conclusión de que es más cómodo para los visitantes colocar un menú de navegación específico de la sección en la izquierda y el principal en la derecha para que puedan navegar por la sección con rapidez. Por lo que si ya hiciste la página definitiva de la sección llamada escudería, tendrás que retocarla para adaptarla a tus nuevas necesidades, lo que supone un gasto de tiempo y esfuerzo innecesario.

3. Diseñar la página web

Una vez tengas hecha la estructura, recopilada bastante información y completado el contenido de varias secciones, tienes suficiente material como para saber con más precisión lo que quieres, por lo que puedes empezar a diseñar gráficamente cada una de las páginas de tu web, indicando los elementos interactivos y gráficos que van a intervenir en cada una. Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje HTML. El HTML es un lenguaje de marcación diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estándar de las páginas web. A la hora de empezar con el diseño, ten en cuenta que:

  • La estructura de la página debe ser lo más lógica posible facilitando la navegación a tus visitantes (es importante en este punto la usabilidad). Ninguna página puede quedar huérfana, es decir, todas las páginas deben de tener enlaces a otras páginas. Si esto ocurre, es probable que el usuario cierre nuestra página y entre en otra en la que le sea más fácil navegar por los contenidos.
  • Aunque no es un requisito necesario, sí que es muy aconsejable que aprendas HTML, ya que así podrás hacer todo lo que quieras sin depender de editores gráficos como Dreamweaver (ver manual Dreamweaver), tendrás más flexibilidad y opciones a la hora de realizar tus diseños, podrás corregir tu código y saber qué es lo que falla cuando te de errores, entenderás cómo funcionan las páginas de otros webmasters, etc. En esta misma página, hay un manual HTML muy completo que puedes mirar.
  • Aprender a usar otras técnicas, como las hojas de estilo (CSS) te será muy útil para crear una página atractiva y bien diseñada. Con las hojas de estilo puedes crear un archivo que te sirva para dar una mejor apariencia a todas tus páginas a la vez, y siempre que quieras cambiar el aspecto de tu web, sólo tendrás que modificar ese archivo en lugar de ir una por una revisando cada página de la misma. Si quieres aprender a usar este lenguaje, en esta misma web hay un manual completo de hojas de estilo o CSS.

—-

Autor: Verónica M.
URL: Primeros pasos para aprender a hacer una página web
Web: Como hacer una web

—-

Como organizar una página web. Diseño de la estructural

Wednesday, March 26th, 2008

Llegados a este punto necesita definir la organización de la información de tu sitio web. Es decir, ha llegado el momento de crear la estructura de tu web, su esqueleto, la base que soportará todo lo demás. La forma en que estructures el contenido de tu web será determinante para que los usuarios encuentren o no lo que buscan (algo muy relacionado con la usabilidad). Por tanto, ésta debe facilitar y agilizar al máximo la búsqueda de información de tus visitantes. Al mismo tiempo, también es importante diseñar la estructura de forma que actualizaciones futuras de la web no obliguen a cambiar muchas partes de la página.

Para crear la estructura, puede ser útil hacer un inventario de todo el material que vas a exponer en la página e ir organizándolo en un primero momento por temas para después construir gráficamente la estructura de la web.

Organizar web

Aunque poca gente lo hace, es muy útil construir varios prototipos (o bocetos) de tu web y probar la reacción de los usuarios ante ellos. Esto de comprobar la reacción parece más complicado de lo que crees, pero un método casero y sencillo que puede aportar información para saber si la estructura del sitio es fácil de comprender y manejar, es hacer varias plantillas con diferentes estructuras y pedir a amigos y familiares que naveguen por ellas y nos den su impresión. Cuál les resulta más fácil de entender, más atractiva, en cuál se encuentra mejor una determinada información, en cuál están más claros los contenidos a los que dirigen los enlaces, etc.

Página de inicio

La página de inicio es la principal puerta de entrada de visitas a tu página, por lo que debe poder atrapar al mayor número de visitantes que entren. Para ello, debes adaptar su estructura a tu público objetivo, haciendo bien visibles los contenidos que más pueden interesarles. También es importante dejar claro desde el principio el tema de la web, y para eso la página de inicio es una buena herramienta. Especifica claramente qué se va a encontrar el usuario al explorar tu página, a la gente no le gusta perder el tiempo y a ti no te interesan visitas de este tipo porque no aportan ningún beneficio a tu web.

Por otro lado, algo tan sencillo como incluir un enlace bien visible a la página principal en todas tus páginas facilita muchísimo la navegación. En este sentido, algo que se usa mucho y también ayuda a los usuarios a navegar por tu web es poner un enlace en el banner o logo de la cabecera que apunte a la página principal del sitio.

Diseño del menú de navegación

Una de las cosas más importantes a la hora de estructurar la página es el diseño del menú de navegación.

Echa un vistazo a la estructura inicial que creaste, ¿cuáles son las secciones más grandes?, ¿cuáles agrupan más contenido?, esas pueden ser las secciones que incluyas en el menú principal y que sería conveniente que aparecieran en cada página de tu web para facilitar la navegación. Ahora bien, una vez dentro de cada sección concreta, el menú puede modificarse para mostrar las opciones específicas que ofrece esa sección (además de enlaces a las secciones principales).

No hay que olvidar que otro tipo de páginas como información acerca de la web, aviso legal, política de privacidad, formulario de contacto, etc, deben estar convenientemente visibles, por lo que muchas páginas optan por incluir un menú horizontal a pie de página para enlazar con estas secciones.

Tipos de estructuras de sitios web

Ya se han comentado en este tutorial los principales tipos de estructuras que se usan en la web, si te interesa puedes echarle un vistazo al artículo:

—-
Autor: Verónica M.
URL: Como organizar una página web
Web: Hacer una web

—-

script para solucionar los problemas ocacionados en Internet Explorer con objetos enbebidos en HTML, como Flash o Applets.

Tuesday, March 4th, 2008

Bajo licencia libre, hoy me entero que ha salido un nuevo script para solucionar los problemas ocacionados en Internet Explorer con objetos enbebidos en HTML, como Flash o Applets.

Dicho script se llama  JS Embedded Content y según su creador, David Muñoz (alias Raspu), lo resume como:

“Una pequeña aplicación Javascript que permite la
activación automática de los elementos OBJECT, EMBED y APPLET incrustados
en un documento HTML (películas Flash, applets de Java, archivos de video,
etc.); de esta manera se evita que estos elementos deban ser activados
manualmente por el usuario, porcedimiento necesario para que pueda interactuar
con ellos en Internet Explorer 7, algunas actualizaciones de Internet Explorer 6
y en algunas versiones de Ópera 9″

Lo recomiendo 100%, el script lo pueden descargar aquí ^^

Actualización 23/09/06: Ayer ha salido la versión 1.1 beta 2 para descargar . Además, en Cristalab , tras una crítica hacia el script David explica los pros de JS Embedded Content comparado a swfObject :

[…] Efectivamente, una de las diferencias fundamentales entre JS Embedded Content y SWFObject (por especificar alguno) es la lógica que sigue. SWFObject lo que hace es insertar el contenido, y lo que hace mi script es reinsertar el contenido, y tiene su razón de ser.

Para insertar el contenido, SWFObject debe hacer uso de document.write(), a lo cual yo le veo ciertas desventajas:

1) Se hace obligatorio mezclar código Javascript entremedio del código HTML. Entonces para aplicar el script debes hacerlo en cada uno de las películas flash que tengas en tu sitio, y modificar cada uno de los sitios que ya hayas realizado (claro, si es que quieres parcharlos con el script). Al reinsertar el contenido, mi script es capaz de almacenar todo el código necesario en un archivo externo, facilitando su implementación y su mantención.

2) Pensando más a futuro, document.write() no funciona en documentos que sean servidos como application/xhtml+xml (que es como debiera usarse un documento XHTML), sólo sirve en documentos servidos como text/html (el propio autor de SWFObject lo señala en la documentación de su script).

3) SWFObject (y el resto) requieren que el usuario tenga activado Javascript para poder insertar el contenido, si no es así mostrará el contenido alternativo. Cada webmaster puede suplir esa falencia insertando el Flash d emanera normal con la etiqueta NOSCRIPT, pero esto significa ya duplicar código: el código Javascript + la etiqueta NOSCRIPT. En el caso de JS Embedded Script el webmaster sólo inserta el código del Flash 1 sola vez, y el usuario seguirá teniendo accso a él con o sin Javascript.

4) SWFObject sólo está pensado para películas Flash (y si no me equivoco su autor tiene otro script aparte para películas Quicktime). El script que he desarrollado es más universal, ya que trabaja simultáneamente sobre elementos OBJECT, EMBED y APPLET[…]

Creo que con la argumentación que expone a más de uno le habrá cerrado la boca

Muy buen recurso para webs

Tuesday, March 4th, 2008

StyleIgnite es un interesante repositorio de scripts, menus de navegación, layouts, gráficos, etc, organizados en diferentes categorías

CSS Galleries/Inspiration

CSS Zen Garden

 

CSS Vault

 

CSS Beauty

 

CSS Heaven

 

CSS Remix

 

CSS Elite

 

StyleGala

 

WebCreme

 

DesignSnack

 

CSSMania

 

CSSReboot

 

CSSImport

 

Unmatched Style

 

CSS Drive

 

The Daily Slurp

 

Light On Dark

 

Design Meltdown

 

One Pixel Army

 

Most Inspired

 

CSS Flavor

 

CSS Showcase

 

Liguid Designs & elastic

 

Submit CSS

 

CSS Impress

 

StyleCrunch

 

StyleBoost

 

CSS11

 

Screenalicio.us

 

Design Shack

CSS Optimizers and Cleaners

CleanCSS

 

CSS Formatter and Optimiser

 

CSS Drive CSS Compressor

 

CSS Optimizer

Browser Checkers

Browsershots

 

Browsercam

 

Litmus

CSS Frameworks

BluePrintCSS

 

Content with Style CSS Framework

 

WYMstyle

 

YAML

 

Yahoo! UI Library Grids CSS

 

Elements

Great Web Design Blogs

Smashing Magazine

 

TutorialBlog