Animated Lyrics: primeros trabajos con HTML5

Ya empezamos a descubrir las primeras obras trabajando con todo el potencial de HTML5 que viene cargado de mejoras como: Bases de datos locales, Aplicaciones web Offline, Fin de las etiquetas de presentación, Etiquetas para contenido específico, Web Workers, y muchas otras.

Entre todas, las que nos interesan para este artículo, es la mejora de la etiqueta “Canvas“: que es algo así como un nuevo componente que permitirá dibujar, por medio de las funciones de un API, en la página todo tipo de formas, que podrán estar animadas y responder a interacción del usuario. Es algo así como las posibilidades que nos ofrece Flash, pero dentro de la especificación del HTML y sin la necesidad de tener instalado ningún plugin.

Gracias a esto podremos construir animaciones como las que podéis ver en en SVG en la web svg-wow.org

Por ejemplo, podemos probar el nuevo HTML5 (teniendo en cuenta que tengas un navegador actualizado apropiadamente) con estas animaciones de Vincent Hardy llamadas Animated Lyrics. En ellas, Hardy junta audio y animaciones de texto y gráficos sin necesidad de ningún plugin externo, como podéis ver. Todo ello escrito en HTML5, con la simple ayuda de las etiquetas ‘audio’ y ‘foreignObject’. Las animaciones están hechas con Scripts.