SMIL Synchronized Multimedia Integration Language Pronnciese SMIL Que
- Slides: 27
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 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 “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> 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" 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, • ¿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" 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. . .
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, • 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 “ 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
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 • que “rodrigo 2. gif”, aparezca por 5 segundos
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 continuación.
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!!
Referencias • www. real. com
Preguntas y respuestas
- Synchronized security heartbeat sophos
- Simv
- Mulighedsmatrix
- Smil
- Language
- Pcm512
- Smil 2
- Det skjeve smil i rosa
- Multimedia becomes interactive multimedia when
- Multimedia definition
- Csc253 interactive multimedia
- Esa multimedia.esa.int./multimedia/virtual-tour-iss
- Forward integration and backward integration
- Backwards intergration
- Example of simultaneous integration
- Language integration
- Language integration
- Language integration
- Data services framework
- Mercado multimedia publicitaria
- La gente que me gusta mario benedetti
- Plus aussi moins
- Quién dice lo que no debe
- Qqqqu
- Mas vale paso que dure que trote que canse
- Me gusta la gente transparente
- Language acquisition vs language learning
- Difference between second language and foreign language