SMIL Synchronized Multimedia Integration Language Pronúnciese SMIL.

Presentación del tema: "SMIL Synchronized Multimedia Integration Language Pronúnciese SMIL."— Transcripción de la presentación:

1 SMIL Synchronized Multimedia Integration Language Pronúnciese SMIL

2 ¿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.)

3 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.

4 Primer programa SMIL Aquí vemos la semejanza con HTML

5 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. [...] [...]

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

7 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 [...]

8 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" />

9 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" />

10 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

11 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

12 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.

13 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

14 Imágenes pero también...

15 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

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

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

18 “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

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

20 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"/>

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

22 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

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

24 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

25 ¡¡El desafío esta abierto!!

26 Referencias www.real.com

27 Preguntas y respuestas