SMIL Synchronized Multimedia Integration Language Pronúnciese SMIL

¿Que se puede hacer con SMIL? Poner elementos multimedia donde uno quiera en la pantalla, Sincronizar dichos elementos, Desplegar los elementos según los usuarios finales (bit rate, idioma, etc.)

Cómo escribir en SMIL Se necesita un editor de textos, Si se conoce la sintaxis de HTML, se conoce la sintaxis de SMIL, pero... SMIL es sensible a las mayúsculas. Las entradas deben ser terminadas.

Primer programa SMIL Aquí vemos la semejanza con HTML

Detalle del código El código debe empezar con y terminar con. [...] Programas SMIL tienen dos partes: head y body. Los cuales deben tener a como padre. [...] [...]

Se puede terminar con “/” Algunas entradas como meta pueden terminar con “/” [...] [...] Aquí se verán algunas entradas como:  A veces escritas...  A veces escritas

Sección Todo lo concerniente a la forma, incluida la ventana, es guardado entre las entradas y dentro del head, como se muestra a continuación [...]

La ventana Se puede setear el alto y el ancho de la ventana, donde las presentaciones serán vistas. El siguiente ejemplo, crea una ventana con 300x200 pixeles de dimensión. <root-layout width="300" height="200" background-color="white" />

La región Para mostrar las regiones, mejor un ejemplo: Vamos a insertar el icono “rodrigo.gif” a 75 pixeles del borde izquierdo y a 50 pixeles del borde superior. Usaremos la entrada, para posicionar nuestro icono: <root-layout width="300" height="200" background-color="white" /> <region id=”rodrigo" left="75" top="50" width="32" height="32" />

La entrada Se usa la entrada, para insertar una figura. Esta apunta a la entrada <root-layout width="300" height="200" background-color="white" /> <region id=”rodrigo” left="75" top="50" width="32" height="32" /> <img src=”rodrigo.gif" alt=”YO" region=”rodrigo" /> ejemplo

Posicionamiento Relativo También se pueden especificar posiciones relativas!!! <root-layout width="300" height="200" background-color="white" /> <region id=”rodrigo" left="50%" top="40%" width="32" height="32" /> <img src=”rodrigo.gif" alt="YO" region=”rodrigo" /> ejemplo

Cuando dos regiones se juntan Hemos visto como poner elementos en la ventana, ¿Que pasa cuando estas se traslapan? Z -INDEX!!! La con mayor z-index, se muestra adelante. Si tienen igual z-index, se muestran en orden una sobre otra.

Z-INDEX (ejemplo) <region id="region_1" left="50" top="50" width="150" height="150" z-index="2"/> <region id="region_2" left="25" top="25" width="150" height="150" z-index="1"/> ejemplo

Imágenes pero también...

Como adaptar los contenidos al área Seria fantástico si el área fuese siempre del mismo porte que los contenidos, ¿Cómo adaptarlos? EL ATRIBUTO fit!!! Simplemente en, añadir fit=“(fill)|(meet)|(slice)|(scroll)” Ejemplo fill Ejemplo meet Ejemplo slice Ejemplo scroll

Sincronización SMIL puede sincronizar eventos, se puede: Agregar parámetros de tiempo, Ver muchos contenidos uno tras otro, ver muchos contenidos en paralelo.

La cuarta dimensión “TIEMPO” Queremos hacer aparecer “rodrigo.gif” durante 6 segundos

“rodrigo.gif” durante 6[s] Agregando el parámetro dur, e igualandolo a “6s” <root-layout width="300" height="200" background-color="white" /> <region id=”rodrigo" left="75" top="50" width="32" height="32" /> <img src=”rodrigo.gif" alt=”YO" region=”rodrigo" dur="6s" /> ejemplo

Demorar un contenido Queremos esperar 2 segundos, entonces mostrar “rodrigo.gif” y terminar

El parámetro “begin” ejemplo Se añade begin="2s" en la sección <root-layout width="300" height="200" background-color="white" /> <region id=”rodrigo" left="75" top="50" width="32" height="32" /> <img src=”rodrigo.gif" alt=”YO" region=”rodrigo" dur="6s" begin="2s"/>

Secuencias Hacer que “rodrigo.gif”, aparezca por 6 segundos, esperar 1 segundo que “rodrigo2.gif”, aparezca por 5 segundos

La entrada La entrada define una secuencia. Sus hijos se ejecutan uno tras otro <img src=”rodrigo.gif" alt=”YO" region=”rodrigo" dur="6s" /> <img src=”rodrigo2.gif" alt=”YO 2" region=”rodrigo2" dur="4s" begin="1s"/> ejemplo

Contenidos en paralelo También se pueden mostrar contenidos en paralelo, como se muestra a continuación.

La entrada La entrada hace que sus hijos se ejecuten en paralelo <img src=”rodrigo.gif" alt=”YO" region=”rodrigo" dur="6s" /> <img src=”rodrigo2.gif" alt=”YO 2" region=”rodrigo2" dur=”5s" /> ejemplo

¡¡El desafío esta abierto!!

Referencias

Preguntas y respuestas