SMIL Synchronized Multimedia Integration Language Pronnciese SMIL Que

  • Slides: 27
Download presentation
SMIL Synchronized Multimedia Integration Language Pronúnciese SMIL

SMIL Synchronized Multimedia Integration Language Pronúnciese SMIL

¿Que se puede hacer con SMIL? • Poner elementos multimedia donde uno quiera en

¿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

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 <smil> <head> <meta name="copyright" content=”nombre" /> <layout> <!-- entradas de layout-->

Primer programa SMIL <smil> <head> <meta name="copyright" content=”nombre" /> <layout> <!-- entradas de layout--> </layout> </head> <body> <!-- entradas de sincronización y contenido multimedia --> </body> </smil> Aquí vemos la semejanza con HTML

Detalle del código El código debe empezar con <smil> y terminar con</smil>. <smil> [.

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

Se puede terminar con “/” Algunas entradas como meta pueden terminar con “/” [.

Se puede terminar con “/” Algunas entradas como meta pueden terminar con “/” [. . . ] <head> <meta name="copyright" content=”nombre" /> </head> [. . . ] Aquí se verán algunas entradas como: ·A veces escritas <entrada>. . . </entrada> ·A veces escritas <entrada />

Sección <layout> Todo lo concerniente a la forma, incluida la ventana, es guardado entre

Sección <layout> Todo lo concerniente a la forma, incluida la ventana, es guardado entre las entradas <layout> y </layout> dentro del head, como se muestra a continuación <smil> <head> <layout> <!-- layout tags --> </layout> </head> <body> [. . . ] </body> </smil>

La ventana Se puede setear el alto y el ancho de la ventana, donde

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 300 x 200 pixeles de dimensión. <smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> </layout> </head> <body> </smil>

La región Para mostrar las regiones, mejor un ejemplo: Vamos a insertar el icono

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 <region>, para posicionar nuestro icono: <head> <layout> <root-layout width="300" height="200" background-color="white" /> <region id=”rodrigo" left="75" top="50" width="32" height="32" /> </layout> <head>

La entrada <img> Se usa la entrada <img>, para insertar una figura. Esta apunta

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

Posicionamiento Relativo También se pueden especificar posiciones relativas!!! ejemplo <smil> <head> <layout> <root-layout width="300"

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

Cuando dos regiones se juntan • Hemos visto como poner elementos en la ventana,

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) ejemplo <smil> <head> <layout> <root-layout width="300" height="200" backgroundcolor=”black" /> <region id="region_1" left="50"

Z-INDEX (ejemplo) ejemplo <smil> <head> <layout> <root-layout width="300" height="200" backgroundcolor=”black" /> <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"/> </layout> </head> <body> <par> <img src="texto 1. gif" region="region_1" /> <img src="texto 2. gif" region="region_2" /> </par> </body> </smil>

Imágenes pero también. . .

Imágenes pero también. . .

Como adaptar los contenidos al área Ejemplo fill Ejemplo meet Ejemplo slice Ejemplo scroll

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

Sincronización • SMIL puede sincronizar eventos, se puede: • Agregar parámetros de tiempo, •

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

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 “ 6 s”

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

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

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

El parámetro “begin” Se añade begin="2 s" en la sección <img> ejemplo <smil> <head>

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

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

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

La entrada <seq> define una secuencia. Sus hijos se ejecutan uno tras otro ejemplo

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

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

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

La entrada <par> hace que sus hijos se ejecuten en paralelo ejemplo <body> <par>

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

¡¡El desafío esta abierto!!

¡¡El desafío esta abierto!!

Referencias • www. real. com

Referencias • www. real. com

Preguntas y respuestas

Preguntas y respuestas