FACE: animaciones Javascript + CSS

Visita este artí­culo en http://www.estadobeta.com/2005/12/21/face-animaciones-javascript-css/

Por Ismael en (X)HTML, CSS, artículos, javascript

FACE es una técnica que usa CSS, un archivo Javascript y una pequeña convención de XHTML para agregar animaciones a una página web de forma sencilla y estandarizada

FACE (Faruk’s Animated CSS enhancements o "Mejoras CSS Animadas de Faruk") es una técnica que usa CSS, un archivo Javascript y una pequeña convención de XHTML para agregar animaciones a una página web de forma sencilla y estandarizada. Desarrollada por Faruk Ates (de ahí el nombre), FACE se suma a los intentos de Sifr por enriquecer visualmente los documentos XHTML sin contravenir los estándares de accesibilidad y SEO.

En sintonía con la tendencia de "comoditizar" sets de metodologías conocidas poniendole nombres llamativos (Ajax , Sifr, DHTML), Face consiste en generar animaciones por medio de DHTML*1. Si bien esto no es nuevo, FACE introduce una convención para especificar los parámetros de cada animación aprovechando el atributo class de los elementos XHTML (el mismo usado comúnmente para CSS)*2. Estos parámetros declaran la velocidad, numero de cuadros, clase CSS y otros elementos a utilizar en la animación. Es una forma inteligente de modularizar pequeñas animaciones - fades, títulos "voladores"- en una forma manejable y fácil de portar entre páginas. Al definir una convención para los parámetros fomenta la creación de patrones de animación fáciles de aplicar a distintos elementos (ver gráfico ).

El sitio incluye una lista de ejemplos de algunos usos de la técnica, que en su mayoría son breves animaciones de texto y bloques (X)HTML muy al estilo Flash.

Si bien Sifr es una buena idea (mejora considerablemente la legibilidad y estética de los títulos (X)HTML), cabe esperar aplicaciones realmente útiles de FACE. Los ejemplos mostrados me recuerdan precísamente las irritantes animaciones flash que abundaron hasta hace poco en la web que sólo conseguían distraer (mi posición sobre el uso apropiado de Flash está bastante clara ). 

Como nota aparte, se estan viendo usos creativos de los estandares, en especial el aprovechamiento de los atributos class e id para definir pequeños formatos útiles (¿Microformatos ?). De esto asumo que los objetivos y ventajas del desarrollo con estandares son cada vez mejor entendidas y estan abriendo interesantes posibilidades en el ámbito creativo.

Fuente: FACE por Faruk Ates (via Joshuaink ). 

*1 DHTML consiste en usar Javascript para modificar propiedades CSS en tiempo de ejecución. Estas propiedades incluyen color y posición a través de propiedades como style.backgroundColor o style.left, por ejemplo.

*2La especificación de HTML de la W3C aclara que los atributos class e id tienen la función alternativa de "enganchar" procesos externos al documento. Esto incluye las interfaz DOM implementada en javascript o cualquier otra tecnología utilizada para manipular el documento.

8 comentarios para “FACE: animaciones Javascript + CSS”

  1. GravatarRoberto R. Dice:

    La verdad es que la primera vez que lo vi, me dejo bien impresionado el resultado. Por algo Dave Shea le dedica un post. Eso es decir bastante.
    Excelente logro.

  2. GravatarIsmael Dice:

    No había visto el post en Mezzoblue.
    FACE se ve muy útil para, por ejemplo, hacer cambios graduales en el tamaño de fuente o el ancho de página en caso de que el usuario así lo quiera. Para efectos más “pirotécnicos” (como la mayoría de los mostrados en el sitio) da la impresión de ser una extensión de lo peor de Flash. Otra duda que tengo es si no será esto un parche antes de la prometida funcionalidad de SVG (cuando todos los browsers lo soporten).

  3. GravatarHOLA Dice:

    T Q M

  4. GravatarLEIDY Dice:

    OK K BIEN

  5. Gravatarjonathan Dice:

    hola como estas

  6. Gravatartulinmola Dice:

    Aquí otro interesante artículo al respecto:

    http://tulinmola.blogspot.com/2007/08/animaciones-con-javascriptcss.html

  7. Gravatartulinmola Dice:

    Ops, me equivoqué con la dirección, lo siento. La correcta es esta: http://tulinmola.blogspot.com/2008/01/animaciones-javascript-css.html

  8. Gravataruimnzorptw Dice:

    I am having a hell of a time reading wwe.estadobeta.cm in Opeea 8.4, I just thought I mikght tell you about it?

    vifeo sites