¿Qué puede tener mi web? (Parte V: Añadiendo animaciones)

Hasta este capítulo, hemos hablado de posibles mejoras a aplicar a un sitio web, ya sea de nueva creación, o existente, pero por lo general nos hemos referido a secciones o funcionalidades concretas, pero no nos hemos centrado en la interfaz gráfica.

El diseño de una web es un punto que tiene que estar muy cuidado, ya que de él dependerá la primera impresión de un usuario, y siempre tenemos que procurar que ésta sea la mejor posible.

Dentro de esos detalles que pueden marcar la diferencia entre distintos diseños, entran en juego las animaciones. Añadir animaciones a un sitio web, si bien no es necesario, en muchas ocasiones puede servirnos para añadir un toque de originalidad, resaltar algún elemento, o incluso mejorar la navegabilidad o interactuación con el usuario.

A continuación mostramos algunos ejemplos, de plugins que nos permiten dotar de animaciones más o menos complejas a los sitios web.

Flash

Si hablamos de webs, y animaciones, a todos se nos debe venir a la cabeza la palabra “Flash”. Flash ha sido el estándar para realizar animaciones, intros, menús animados e incluso webs completas, durante muchos años, y de hecho lo sigue siendo en multitud de ocasiones.

Sin embargo, Flash tiene dos problemas que le están haciendo perder adeptos: no es un estándar, y por tanto se tiene que instalar como un plugin aparte en los navegadores (Explorer, Firefox, Chrome, Safari,...), lo que hace que no esté disponible para el 100% de usuarios, y en segundo lugar, los buscadores no indexan correctamente los contenidos desarrollados en Flash.

Por suerte, tal como explicamos en el capítulo anterior, “Optimizando para posicionar en buscadores“, existen métodos para crear contenidos alternativos al flash, a los que podrán acceder tanto los buscadores como los usuarios que no dispongan del plugin correspondiente, y eso hace que hoy día, Flash siga teniendo su mercado, especialmente para pequeñas animaciones, puesto que si que ha caído bastante en la caso de desarrollos completos en Flash o intros, que cada día se desarrollan en menor escala.

Plataformas Javascript: JQuery, Mootools, Prototype,...

Javascript en un lenguaje de programación que se ejecuta directamente en el navegador y qué, salvo en contadas ocasiones, viene instalado en el navegador. Eso hace que esté mucho más extendido que Flash, aunque tampoco asegura una implantación del 100%, ya que en muchas ocasiones el propio navegador permite desactivarlo.

Usado de forma adecuada, y bajo algunas restricciones, las animaciones desarrolladas con Javascript no tendrán problemas con los buscadores. Aún así, siempre que sea necesario también se puede recurrir a los contenidos alternativos mencionados anteriormente, para casos más complejos.

En los últimos años, han ido apareciendo una serie de plataformas o frameworks Javascript (Jquery, Mootools, Prototype,... y muchas otras), que han simplificado el proceso de programación en Javascript, automatizando o facilitando además la creación de ciertos controles gráficos comúnmente utilizados en el diseño web:

• Lightbox/Multibox: Permite abrir en una nueva ventana, similar a un popup, un contenido, de forma que la sección puede contener únicamente un enlace o una miniatura, y al hacer click, se abre, sin salir de esa sección el contenido ampliado, pudiendo cerrarlo en cualquier momento, y seguir con la lectura o navegación hacia otra sección.
• Scrolls y Tickers: Añaden una zona con un ancho y alto delimitado en la que se muestran los contenidos. Si esos contenidos tienen un tamaño mayor que el especificado por el control, en el caso de los scrolls aparece una barra de desplazamiento, como la del navegador, pero con la apariencia personalizable, y en el caso del ticker, los contenidos van pasando automáticamente, de forma similar a los créditos de una película.
• Acordeón: Listado de elementos que inicialmente aparecen plegados, y se van desplegando según se hace click sobre ellos. Utilizados cuando se quiere ahorrar espacio, y se quiere permitir al usuario elegir la información que quiere recibir.
• Y un largo etcétera: galerías, calendarios, gráficas,...

Estos frameworks en muchas ocasiones hacen uso de AJAX, otra tecnología que posibilita recargar ciertos elementos de una sección sin que se recargue la web entera, con el pequeño ahorra de tiempo correspondiente.

Flash vs Javascript

Además de estar más extendido y ser un lenguaje libre (Flash pertenece a la empresa Adobe), la principal ventaja de los scripts (mini-programas) desarrollados Javascript es que, por lo general, ocupan unos pocos kb, con lo que su descarga es muy rápida, sin embargo, su potencial es mucho menor que Flash: aunque van apareciendo nuevas plataformas Javascript cada vez más potentes, el entorno de desarrollo de Flash permite hacer animaciones con más carga gráfica, y de forma más sencilla que en Javascript.

Debido a eso, se suele utilizar javascript para animaciones o transiciones menos complejas, que suelen tener que ver con elementos o controles de la propia web (como se ha visto en el punto anterior), y se deja Flash para animaciones o “películas” más complejas, y que requieran un acabado más “bonito”.

HTML5: La alternativa de futuro

Si hasta ahora las alternativas prácticamente únicas eran los mencionados Flash y Javascript, en un breve periodo de tiempo se añadirá, y con mucha fuerza, HTML5.

HTML5 es la nueva versión del lenguaje de programación utilizado para especificar la estructura y contenidos de las páginas web. En este caso, se ha querido estándarizar mucho más todo lo relacionado con las animaciones, y mediante nuevas opciones y controles, como “Canvas”, se pretende hacer que las animaciones se puedan ver en cualquier navegador, desplazando así totalmente la necesidad de utilizar Flash. No será así con Javascript, ya que HTML5 seguirá necesitando de éste para realizar esas animaciones.

Aunque HTML5 ya empieza a estar disponible en algunos navegadores, tardará en imponerse, puesto que aún los usuarios de navegadores más antiguos no podrán disfrutar de él hasta que actualicen su navegador, y eso, en muchas ocasiones, suele ocurrir con algún año de diferencia.

En cualquier caso, aún está por ver como afectarán estas novedades a Flash, ya que su posición actual sigue siendo dominante, y no parece que HTML5 con Canvas, y nuevas plataformas Javascript que surjan, pueden llegar a hacerle sombra en algunos aspectos.

Finalizamos aquí este repaso a las posibilidades para añadir animaciones a los sitios web, dejando para otra ocasión un repaso mas general sobre temas a tener en cuenta a la hora de diseñar una web.

Volveremos con la siguiente, y última entrega de la serie “¿Qué puede tener mi web?”, en este caso sobre los gestores de contenidos. Lectura muy recomendada.