smil synchronized multimedia integration language pronúnciese smil
TRANSCRIPT
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
<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>
[...]</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 “/”
[...]
<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 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 las presentaciones serán vistas. El siguiente ejemplo, crea una ventana con 300x200 pixeles de dimensión.
<smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> </layout> </head> <body> </body></smil>
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 a la entrada <region>
<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>
ejemplo
Posicionamiento Relativo
También se pueden especificar posiciones relativas!!!
<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>
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)
<smil> <head> <layout> <root-layout width="300" height="200" background-color=”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="texto1.gif" region="region_1" /> <img src="texto2.gif" region="region_2" /> </par> </body></smil>
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 <region>, añadir
fit=“(fill)|(meet)|(slice)|(scroll)”
Ejemplo fillEjemplo 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”
<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="6s" /> </body></smil>
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 <img>
<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="6s" begin="2s"/> </body></smil>
Secuencias
• Hacer que “rodrigo.gif”, aparezca por 6 segundos,
• esperar 1 segundo• que “rodrigo2.gif”, aparezca por
5 segundos
La entrada <seq>
La entrada <seq> define una secuencia. Sus hijos se ejecutan uno tras otro
<body> <seq> <img src=”rodrigo.gif" alt=”YO" region=”rodrigo" dur="6s" /> <img src=”rodrigo2.gif" alt=”YO 2" region=”rodrigo2" dur="4s" begin="1s"/> </seq> </body>
ejemplo
Contenidos en paralelo
También se pueden mostrar contenidos en paralelo, como se muestra a continuación.
La entrada <par>
La entrada <par> hace que sus hijos se ejecuten en paralelo
<body> <par> <img src=”rodrigo.gif" alt=”YO" region=”rodrigo" dur="6s" /> <img src=”rodrigo2.gif" alt=”YO 2" region=”rodrigo2" dur=”5s" /> </par> </body>ejemplo
¡¡El desafío esta abierto!!
Referencias
• www.real.com
Preguntas y respuestas