SMIL: HTML + TIME

En este artículo vamos a comentar brevemente la posibilidad de extender el HTML con líneas temporales, de forma que podamos definir acciones y movimientos dentro de una escala temporal. Esta técnica de programación permite una experiencia mucho más rica de nuestras aplicaciones o páginas web.

SMIL (Synchronized Multimedia Integration Language) es un lenguaje similar al HTML para implementar presentaciones audiovisuales. Empezó en 1997, estando actualmente en la versión 2.1 de su desarrollo. Es una recomendación del comité W3C aunque, inexplicablemente, no ha sido acogida por Firefox y si por Internet Explorer desde la versión 5.5.

¿Qué se puede hacer con SMIL?
Según W3C, las posibilidades de SMIL abarcan los siguientes items:

• Creación de presentaciones para internet e intranets.
• Creación de presentaciones tipo "slideshow"
• Se ha descrito SMIL como la respuesta a PowerPoint en internet
• Las presentaciones SMIL pueden mostrar múltiples tipos de ficheros (texto, video, audio,...)
• Las presentaciones pueden mostrar múltiples ficheros al mismo tiempo.
• Las presentaciones pueden mostrar ficheros de múltiples servidores web.
• Las presentaciones pueden contener enlaces a otras presentaciones
• Las presentaciones pueden tener botones de control (iniciar, parar, siguiente,...)
• Se pueden definir secuencias y duración de acciones en el tiempo
• Se puede definir la posición y visibilidad de los elementos

Realmente se pueden definir múltiples acciones de una manera fácil y sencilla mediante SMIL. El siguiente es un código de ejemplo de una acción sencilla realizada en SMIL:

Como se puede observar, el código está realizado en XML y es fácilmente entendible:

• Todo el código se mete dentro de la etiqueta "smil"
• Se le añade un "body" a la acción (como si fuera HTML)
• La etiqueta define una secuencia que se repetirá indefinidamente "seq" (repeatCount="indefinite")
• La secuencia se compone de dos imágenes que irán apareciendo, primero image1.jpg durante 3 segundos y después image2.jpg durante otros 3 segundos.

¿Cómo reproducir código SMIL?
El código SMIL se reproduce o ejecuta en visualizadores SMIL preparados para ello. Existen múltiples de ellos en internet, siendo los más destacados:

• Ambulant Player: reproductor open-source que soporta la versión 2.1
• RealOne: de RealNetworks
• Grins: de Oratrix
• Internet Explorer

Sin embargo, una de las posibilidades que más potencia nos da SMIL es la capacidad de integrarse con el HTML permitiendo definir líneas de tiempo para los elementos de las páginas.

HTML + TIME
Esta opción sólo está disponible para Internet Explorer puesto que es el único que sigue la recomendación del W3C. Al integrar el código SMIL junto con el HTML, podemos ampliar las propiedades de los elementos HTML con el tiempo. Al incluirles el factor del tiempo podemos realizar cambios en su visibilidad, movimiento, apariencia, comportamiento dependiendo del momento en el que nos encontremos.

Para habilitar esta función deberemos declarar lo siguiente:








Una vez importado el espacio de nombres, podremos incluirle la opción del tiempo a cualquier elemento que queramos en nuestra página. El siguiente código realiza una acción básica integrándose con HTML:








En este caso, definimos una secuencia temporal que se repetirá indefinidamente apareciendo una imagen y después otra. Es el mismo ejemplo que pusimos antes pero con HTML.

También podemos actuar sobre el inicio y el fin de las secuencias mediante la acción del usuario. En el siguiente ejemplo, la acción empezará 2 segundos después de que el usuario pulse sobre el botón "boton1" y terminará cuando el usuario pulse sobre el botón "boton2":

















En este código también se introduce la posibilidad de realizar acciones en paralelo. Ejecutamos la reproducción de un sonido en paralelo con la secuencia de dos imágenes.

Transiciones:
SMIL2.0 introduce la posibilidad de realizar transiciones entre elementos o en un elemento. De esta manera se introduce una mayor riqueza visual. Para incluir transiciones sólo tendremos que definirlas de esta manera:













Las transiciones posibles son:

• Fade
• barnDoorWipe
• barWipe
• clockWipe
• ellipseWipe
• fanWipe
• irisWipe
• pushWipe
• slideWipe
• snakeWipe
• starWipe

Elementos Audiovisuales:
Los tags que definen elementos audiovisuales que se pueden manejar mediante SMIL en HTML son:

• "animation"
• "audio"
• "brush"
• "img"
• "param"
• "ref"
• "text"
• "textstream"
• "video"

Conclusión:
SMIL nos ofrece una posibilidad muy buena de incluir animaciones y efectos en nuestras páginas web interactuando con los componentes HTML de una manera estándar.No necesitamos instalarnos ningún plugin ni herramienta de terceros y permite una interacción mayor con el usuario.