Tutorial SMIL Basico

Multimedia. Ingeniería en Informática. 3º curso. Desarrollo Multimedia- Módulo de Introducción a la Tecnología SMIL

Universidad Carlos III de Madrid - Curso 2003/2004

Desarrollo Multimedia con SMIL 1 de 23

SMIL: DESARROLLO MULTIMEDIA PARA WEB

Tabla de Contenidos SMIL: DESARROLLO MULTIMEDIA PARA WEB .................................................. 1

Tabla de Contenidos ................................................................................. 1 Objetivos................................................................................................ 1 1. Introducción a SMIL.............................................................................. 2 2. Conceptos básicos sobre SMIL ................................................................ 2

Sintaxis básica de SMIL.......................................................................... 3 Conceptos básicos de un documento SMIL................................................. 3 Ancho de Banda y Tasa de Transferencia ................................................... 4 Pseudostreaming y streaming real ........................................................... 5 Reproductores y editores de SMIL ............................................................ 6 SMIL 1.0 ............................................................................................. 7 SMIL 2.0 ............................................................................................. 7

3. El primer documento SMIL ..................................................................... 8 4. La base de SMIL: el Módulo de Estructura............................................... 10

Elementos ......................................................................................... 10 5. Posicionamiento espacial: los Módulos de Layout ..................................... 11

Elementos ......................................................................................... 11 Ejercicios........................................................................................... 13

6. Posicionamiento temporal: Módulos de Cronometraje y Sincronización......... 15 Elementos ......................................................................................... 15 Atributos ........................................................................................... 16 Ejercicios........................................................................................... 20

7. Soportando varios medios: los Módulos de Media Objects.......................... 21 Elementos ......................................................................................... 22 Atributos ........................................................................................... 22 Ejercicios........................................................................................... 23

Objetivos El objetivo general de este documento es introducir la tecnología SMIL como una tecnología para el desarrollo de contenidos multimedia para la Web. Los objetivos concretos son los siguientes:

• Intoducir el lenguaje SMIL como lenguaje de marcado para crear presentaciones multimedia, incluyendo la problemática de la transmisión de los contenidos y la separación del lenguaje en áreas funcionales.

• Adquirir familiaridad con dicho lenguaje de desarrollo, conocer su sintaxis y llegando a saber realizar ejemplos simples de animación.

• Conocer los elementos fundamentales del lenguaje SMIL. En concreto, se tratarán los elementos del lenguaje que permiten:

o Definir el diseño espacial de los contenidos. o Organizar temporalmente la aparición de los elementos en la

presentación. o Sincronizar los contenidos.




1. Introducción a SMIL Se utiliza el término multimedia para hacer referencia a la integración de tipos de datos (media) de diferente carácter, incluyendo tipos no continuos (como las imágenes o el texto) o continuos (como el audio o el vídeo). Se considera la multimedia no es sólo la simple agregación de esos diferentes tipos de datos, sino que incluye la sincronización en el tiempo entre esos tipos de datos (por ejemplo, la sincronización de un vídeo con subtítulos que aparecen en los momentos precisos), y en ocasiones, también la interactividad con los usuarios del sistema o aplicación multimedia. Por otro lado, la World-Wide-Web (la Web como se la conoce habitualmente) desde sus orígenes ha permitido la difusión de contenidos de diferentes tipos, a través de la red Internet. Por ello, en la actualidad, y hasta que se consoliden otros medios como la televisión interactiva, podemos decir que la Web es el medio de comunicación más utilizado para la difusión de contenidos multimedia. SMIL es el acrónimo de Synchronized Multimedia Integration Language (Lenguaje de Integración y Sincronización de Multimedia ). Sus principales características son las siguientes:

• Es un lenguaje de marcas, basado en XML, por lo que una presentación SMIL será un archivo de texto con un aspecto similar al HTML, aunque con la sintaxis un poco más estricta.

• Permite integrar diferentes medios de forma sencilla. Entre estos medios se incluyen textos, imágenes, vídeos, animaciones o sonidos.

• Permite sincronizar la presentación de los diferentes contenidos, ofreciendo mecanismos flexibles para especificar tanto la ubicación espacial (lugar) como la temporal (tiempo) que tendrá un determinado contenido dentro de la presentación.

• Al igual que HTML, SMIL es un estándar del W3C (Consorcio World Wide Web, http://www.w3c.org), lo que significa que la industria tiene una referencia reconocida y aceptada mundialmente.

De esta forma, para crear un archivo SMIL no se necesita nada más que un editor de textos y conocer las etiquetas que permiten expresar el posicionamiento de los diferentes contenidos. Es importante resaltar que los contenidos como tal están separados del documento SMIL (al igual que ocurre con las imágenes en los archivos HTML). SMIL puede decirse que es el pegamento que une y orquesta los medios en una presentación multimedia, tanto en la dimensión espacial como en la temporal. Para reproducir un archivo SMIL se requiere un reproductor (player) adecuado. Existen varios, y debido a la temprana edad del lenguaje (la especificación de SMIL 1.0 data de 1998, y la de SMIL 2.0 es de agosto de 2001), es recomendable ver los resultados de una presentación en varios reproductores, en particular si se utilizan características avanzadas del lenguaje.

2. Conceptos básicos sobre SMIL Antes de comenzar a trabajar con el lenguaje SMIL como tal, vamos a introducir algunos conceptos generales de las animaciones en SMIL, que irán apareciendo a continuación.




Sintaxis básica de SMIL Escribir SMIL es muy parecido a escribir HTML, el usuario que se sienta cómodo utilizando HTML no tendrá problemas para escribir un documento SMIL. De hecho, SMIL utiliza etiquetas para marcar texto, dentro de las cuales pueden especificarse atributos. Simplemente se necesita un editor de texto, y considerar las siguientes reglas al codificar:

• Todo el código SMIL debe ser escrito en minúsculas, incluyendo atributos y etiquetas.

• Todas las etiquetas de SMIL deben ser cerradas, sin excepción. Las etiquetas que tengan contenido dentro serán cerradas como en HTML (por ejemplo, <smil>...</smil>. Las etiquetas que no tengan su correspondiente etiqueta de cierrre deben ser cerradas con una barra al final de la misma, por ejemplo <region .... />.

• Todos los valores de atributos deben ser especificados entre comillas dobles, sin excepción. Por ejemplo, <etiqueta atributo=”valor” />.

• El nombre y el valor de un atributo no deben estar separados del signo de igualdad (=) mediante espacios.

• Los documentos SMIL se salvan en ficheros con extensión .smil o .smi. No se admiten espacios en el nombre de un fichero SMIL.

• Cuando se especifica el nombre de un archivo dentro de un documento SMIL, no pueden indicarse espacios.

• Pueden utilizarse comentarios al estilo de HTML () , y se recomienda indentar el código.

Conceptos básicos de un documento SMIL Todo documento SMIL se estructura en torno a dos componentes:

• La sección de layout, en la que se especifica el posicionamiento y la forma de mostrar los elementos, y

• La sección de body (cuerpo del documento), en la que se especifican las rutas de los elementos de nuestra presentación, así como la ubicación temporal de éstos.

Por ello, la estructura básica del documento SMIL es la siguiente: <smil> <head> <layout>  </layout> </head> <body>  </body> </smil> La sección <head> es la cabecera del documento SMIL. Es una sección opcional, pero se recomienda incluirla ya que es necesaria para controlar el posicionamiento de los medios en la pantalla. También puede incluir etiquetas <meta> para, de forma similar a HTML, definir datos como el título de la presentación, autor, información del copyright, y un resumen o descripción de la presentación.




La sección <body> carga los medios que integran la presentación, indicando para cada uno la ruta donde se halla (que puede ser la especificación de un fichero en la máquina local o un recurso remoto en otra máquina, lo cual se indicaría mediante su URL). Cada medio incluido suele tener asignado un nombre, que servirá para referenciarlo a lo largo de todo el documento SMIL. Los elementos media incluyen audio, vídeo, ficheros de texto, imágenes, animaciones y otros medios que el reproductor pueda soportar. En el cuerpo del documento también se especifica la ubicación temporal y la secuenciación de los elementos. Los elementos más importantes de esta sección permiten colocar un conjunto de contenidos para que se muestren en paralelo (tag <par>) o secuencialmente uno detrás de otro (tag <seq>). Estas etiquetas se verán con mayor detalle posteriormente.

Ancho de Banda y Tasa de Transferencia Ya hemos visto que una presentación SMIL es un documento de texto que hace las veces de “pegamento”, permitiendo orquestar los diferentes contenidos. Si el documento SMIL y todos los contenidos multimedia residen en la misma máquina en la que se visualiza, entonces el visor (o player) de SMIL sólo tiene que ir recuperando los ficheros del disco y reproducirlos. Sin embargo, cuando los medios están en otra máquina (o incluso en diferentes máquinas) deben viajar por una red de comunicaciones para llegar al destino. Se dice que dichas máquinas son servidores ya que nos dan la información multimedia, mientras que el visor de SMIL reside en la máquina cliente. Debido a que SMIL se diseñó considerando que las presentaciones multimedia se transmiten normalmente por una red de comunicaciones, es necesario comprender estos conceptos y cómo influyen en una presentación SMIL. Para ello suele recurrirse a la siguiente metáfora: Supongamos que deseamos llenar un recipiente con agua. Para ello disponemos de una jarra con el agua y un tubo de plástico que finaliza en el recipiente. El recipiente representa el visualizador de la presentación, la jarra es el servidor que nos provee de datos, y el tubo representa la red de comunicaciones. El tamaño del recipiente es el tamaño total de la presentación (la suma de los tamaños de todos los elementos de la misma). El ancho de banda disponible viene determinado por el grosor del tubo: un tubo más grueso permite pasar más agua que un tubo fino. La tasa de transferencia es la velocidad con la que se llena el recipiente. Es decir, la tasa se calcula dividiendo el total de la presentación (tamaño del recipiente) entre el tiempo de llenado (duración de la presentación). Evidentemente, un tubo muy fino impedirá llenar el recipiente en un tiempo pequeño, mientras que un tubo más grueso acortará el tiempo de llenado. En términos técnicos, el ancho de banda es la capacidad disponible en la red para transmitir información, medida en Kilobits por segundo (Kbps). A efectos prácticos debe tomarse el ancho de banda menor de entre todos los segmentos del camino seguido por la presentación desde el origen (servidor) hasta el ordenador que la está reproduciendo. Por ejemplo, si vemos la presentación desde casa, probablemente el segmento más lento sea el que va por la línea telefónica desde el proveedor de internet hasta la vivienda. La tasa de transferencia (también medida en Kbps) de un contenido es la media de cantidad de datos por segundo necesaria para que éste sea presentado. Por




ejemplo, un vídeo de 20 segundos, que ocupa un tamaño de 200KBytes (x8 = 1600 Kbits), requerirá una tasa de 200/20 = 10 KBps (o bien 1600/20 = 80 Kbps). La tasa de transferencia para una presentación es realmente un dato variable, puesto que los medios van cargándose según se necesitan para mostrarlos, y puede haber secciones de la presentación en las que se muestren varios elementos a la vez (en ese instante la tasa de transferencia sería la suma de las tasas de cada elemento), y sin embargo en otras secciones sólo se muestra un contenido (por ejemplo, si es una imagen, una vez se descarga la tasa de transferencia sería cero durante un determinado tiempo). Por ello, SMIL ofrece mecanismos para evitar los problemas derivados del uso de la red y de la posible variedad de anchos de banda de la audiencia de un producto multimedia. Estos mecanismos permiten, entre otras cosas:

• Comenzar la carga de los medios antes de ser mostrados, aprovechando períodos donde no se utiliza todo el ancho de banda.

• Disponer de versiones alternativas de algunos contenidos para ajustarse al ancho de banda o preferencias del usuario (ej. resolución, SO, CPU,...).

En general, conviene ser cuidadosos en el diseño de una presentación SMIL, ya que podría ocurrir que parte de la audiencia de una presentación no tuviera acceso a ella por ser demasiado extensa para ser transmitida por la red. SMIL ofrece mecanismos para tener en cuenta este hecho, de forma que la tasa de transferencia de la presentación esté acorde con el ancho de banda disponible en el receptor.

Pseudostreaming y streaming real El término streaming hace referencia al hecho de que un visor no debe esperar a que toda la presentación se haya descargado en el cliente para poder comenzar a mostrarla. Este concepto general suele matizarse, dividiéndolo en dos conceptos diferentes:

• Pseudostreaming (o download progresivo): En esta variante los medios son primero transmitidos al cliente, el cual los va almacenando, y comienza a reproducirlos cuando los tiene almacenados en suficiente cantidad. No se realiza transmisión en tiempo real, por lo que los medios requieren un determinado tiempo para ser transmitidos independientemente de su duración. Las principales ventajas son:

o Puede usarse un servidor web convencional para servir contenidos. o Los datos no se pueden perder, pero puede ser necesario retransmitir

en caso de fallo en la red. o Pueden presentarse contenidos de alta calidad. o Normalmente atraviesa los cortafuegos, ya que se utiliza HTTP como

protocolo de transmisión.

Sin embargo, existen también varios inconvenientes: o Los datos se transmiten sin considerar el ancho de banda del cliente. o Los contenidos ocupan espacio en el disco del cliente, el cual puede

disponer de ellos a partir de ese momento. o La reproducción comienza cuando se ha descargado suficiente

cantidad del contenido como para poder reproducirlo sin interrupción.

• Streaming real: Los medios son transmitidos en tiempo real, es decir, una presentación de dos minutos de duración tardará dos minutos en ser transmitida. Sus ventajas son:




o Los contenidos no se guardan en el ordenador cliente, sino que se van reproduciendo según llegan, ahorrando recursos del cliente.

o El servicio puede ajustarse al ancho de banda disponible en el cliente, por lo que éste conseguirá la mejor calidad posible dadas sus limitaciones (p.ej, el servidor le enviará un vídeo de menor calidad).

o La reproducción se realiza en tiempo real, aunque se descarten datos o se pierdan.

En cambio, también tiene inconvenientes: o Se necesita un servidor streaming, ya que éste debe estar preparado

para servir los datos según los va necesitando el cliente. o Si el ancho de banda supera la tasa de transferencia, se descartarán

datos, afectando a la calidad o incluso a la visibilidad de la presentación.

o Es posible que no atraviese los cortafuegos, debido al uso de otros protocolos de transmisión.

No es adecuado decir que una solución es mejor que la otra. Ambas tienen ventajas e inconvenientes, por lo que la elección de una u otra va a depender de qué se esté publicando, quién sea la audiencia, y cómo accede ésta a la presentación. De cara al lenguaje SMIL, existe una etiqueta que permite al autor de una presentación considerar posibles anchos de banda a la hora de entregar los contenidos. Se trata de la etiqueta <switch> (no descrita en este documento), que en esencia informa al servidor streaming de los contenidos alternativos que puede entregar a un cliente en función de algunos parámetros de la comunicación concreta, como por ejemplo al ancho de banda disponible en la conexión o la resolución de pantalla que tiene el cliente.

Reproductores y editores de SMIL Aunque el lenguaje SMIL esta siendo definido y revisado por el W3C (Consorcio World Wide Web, http://www.w3c.org), el software encargado de reproducir un presentación SMIL es desarrollado por otras organizaciones, por lo que en la mayoría de los casos se trata de implementaciones propietarias. Ocurre algo similar con respecto a los editores de SMIL, que permiten componer una presentación de forma visual utilizando el ratón en lugar de escribir las etiquetas manualmente. Existen multitud de reproductores (players) y editores, tanto para SMIL 1.0 como para el 2.0, para plataformas Windows, Linux y Mac, o incluso para dispositivos de tamaño reducido. Aqui se citan sólo los más importantes, para una lista exhaustiva es preferible acudir al W3C, en su sección sobre SMIL. Reproductores:

• AMBULANT Open Source SMIL Player: este proyecto es uno de los pocos que es de fuente abierto. Lo desarrolla el CWI, y soporta SMIL 2.0. http://www.cwi.nl/projects/Ambulant/DownloadS.html

• RealOne: de la empresa RealNetworks, con soporte completo para SMIL 2.0. La parte que implementa SMIL se ha hecho pública recientemente. http://www.realnetworks.com/solutions/ecosystem/realone.html?src=rnhmfs

• GRiNS: por Oratrix, soporta SMIL 2.0. http://www.oratrix.com/GRiNS/SMIL-2.0/




• SMIL Player: por InterObject. http://www.inobject.com/mmplay.htm

• Internet Explorer 6.0: por Microsoft, soporta una variante del lenguaje. http://www.microsoft.com/windows/ie/preview/default.asp

Editores:

• Ezer: por SMIL Media. http://www.smilmedia.com/ • Fluition: de Confluent Technologies. http://www.confluenttechnologies.com/ • Grins: de Oratrix. http://www.oratrix.com/GRiNS/index.html • GoLive6: de Adobe. http://www.adobe.com/products/golive/overview.html • HomeSite: de Allaire. http://www.allaire.com/products/homesite/index.cfm • LimSee2: es un proyecto de fuente abierto, que soporta SMIL 1.0 y 2.0.

http://wam.inrialpes.fr/software/limsee2/

SMIL 1.0 La especificación de SMIL 1.0 fue publicada por el W3C en 1998. Su objetivo principal era la sencillez: con un reducido conjunto de etiquetas, se pueden crear presentaciones muy completas. El lenguaje pretendía tres cosas: describir el comportamiento temporal de la presentación, describir su estructura en la pantalla, y asociar hiperenlaces con elementos de media. La principal aportación de SMIL 1.0 fue revolucionar la concepción que se tenía hasta entonces sobre la multimedia, generalmente distribuida y presentada a través de CD-ROM, permitiendo su uso mediante el web. Asimismo, el aprendizaje del lenguaje es tremendamente sencillo.

SMIL 2.0 La primera especificación surgió en el verano de 1999, pero no se transformó en recomendación del W3C hasta el verano de 2001. SMIL 2.0 es más complejo, pero mucho más expresivo. Para una mayor claridad, el lenguaje agrupa sus etiquetas en 10 áreas funcionales, cada una de las cuales contiene uno o más módulos que están interrelacionados. Un módulo agrupa elementos funcionalmente relacionados, es decir, define un conjunto de etiquetas y atributos que tienen una determinada utilidad. Las áreas funcionales son:

• Módulos de Animación: incluyen elementos para situar objetos en la línea de tiempos y dotarles de múltiples efectos de animación.

• Módulos de Control de Contenido: ofrecen elementos que dan un mayor control sobre el flujo y formato de la presentación, de cara a su transmisión por la red.

• Módulos de Posicionamiento: Permiten especificar el posicionamiento espacial de los contenidos, incluyendo los de audio.

• Módulos de Enlazado: ofrecen la posibilidad de establecer enlaces entre contenidos.

• Módulos de Objetos Media: permiten incluir contenidos en una presentación de diferentes maneras.

• Módulo de Metainformación: dota de capacidad autodescriptiva a la presentación, de forma que ésta pueda contener información sobre sí misma.




• Módulo de Estructura: ofrecen las etiquetas necesarias para crear una presentación SMIL.

• Módulo de Temporización y Sincronización: Ofrece mecanismos de control de la línea de tiempo, así como métodos de posicionamiento temporal y sincronización de contenidos.

• Modulo de Manipulación de Tiempos: Permite modificar la velocidad de presentación de los elementos, por ejemplo la aplicación de animaciones.

• Módulo de Efectos de Transiciones: Ofrece un conjunto de posibilidades para realizar transiciones entre dos medios, para pasasr de uno a otro progresivamente.

Para hacer más general el lenguaje SMIL, se decidió establecer el concepto de perfil de SMIL. Un perfil no es más que un conjunto determinado de módulos, definido con la idea de agrupar características de uso común y ofrecer a los diseñadores de presentaciones y a los implementadores conjuntos de funcionalidades sobre las que poder trabajar conjuntamente, posibilitándose la interoperabilidad entre reproductores de diferentes fabricantes. Así, una presentación que se ajuste a un perfil concreto (es decir, que sólo contenga etiquetas y atributos pertenecientes a los módulos de ese perfil), podrá ser reproducida en diferentes players sin problemas, siempre y cuando los reproductores se acojan también a dicho perfil. Si el perfil incluye el módulo de estructura, entonces se dispone de la etiqueta <smil>, por lo que se dice que el perfil es conforme al lenguaje anfitrión (host-language conformant) ya que un documento SMIL está comprendido entre <smil> y </smil>. Sin embargo, si ese módulo no está presente en el perfil, se dice que es conforme al conjunto de integración ( integration-set conformant), ya que el perfil está diseñado para integrarse en otro lenguaje, como por ejemplo HTML. A día de hoy existen tres perfiles:

• SMIL 2.0 Language Profile: este perfil contiene prácticamente todos los módulos del lenguaje, y es un perfil host-language.

• SMIL 2.0 Basic Language Profile: incluye sólo los módulos básicos, para disponer de un perfil pequeño utilizable por parte de dispositivos con escasa capacidad computacional, como por ejemplo las PDAs, teléfonos móviles, o dispositivos de entretenimiento. Este perfil también es host-language.

• XHTML+SMIL 2.0 Language Profile: este perfil está basado en una propuesta de Microsoft para poder incluir etiquetas SMIL en el lenguaje HTML. En otras palabras, es un perfil que no posee el módulo de estructura, por lo que debe ir integrado dentro de otro lenguaje, en este caso, HTML.

3. El primer documento SMIL Esta sección presenta un ejemplo muy sencillo de documento SMIL 1.0, explicando con detalle todos sus elementos. <smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> <region id="vim_icon" left="75" top="50" width="32" height="32" /> </layout> </head> <body>




<img src="vim32x32.gif" alt="The vim icon" region="vim_icon" /> </body> </smil> Como puede observarse, el documento está comprendido entre las etiquetas <smil> y </smil>. Como se verá posteriormente, se trata de un documento SMIL 1.0, ya que no aparece el atributo xmlns en la etiqueta <smil>. El documento define una cabecera (<head>) en la que aparece sólo la especificación del posicionamiento espacial (etiqueta <layout>). Dentro de ésta tenemos dos etiquetas:

• <root-layout> sirve para definir el tamaño de la ventana donde se visualizará la presentación, es decir, el tamaño del contenedor de más alto nivel. Como atributos se especifican la anchura (width), altura (height) y el color de fondo (background-color). Todos los tamaños relativos que se especifiquen posteriormente se basarán en estas medidas para ser calculados. Sólo se permite una etiqueta <root-layout> por cada presentación.

• <region> esta etiqueta define una región. Una región es un lugar donde podrán posicionarse elementos. No contienen elementos como tal, sino que sirven a modo de "marco" a efectos de ubicación. Así, primeramente se especifica un nombre ( id) que será referenciado más adelante por los objetos de medios, y cuyo valor es "vim_icon". Después se indican las distancias de la region con respectoa al borde superior de la ventana (top) y al lateral izquierdo de la misma (left). Por último, se especifica la anchura (width) y altura (height) de la región como tal. Es importante mencionar que una región no se visualiza en ningún caso en el player, tan sólo define un espacio donde posicionar elementos.

Posteriormente se define el cuerpo del documento (<body>), dentro del cual van los objetos de medios. En nuestro caso, sólo hay una imagen (<img>), en la cual se especifica la ruta al fichero (src), un texto alternativo (alt, usado para el caso en que el player no sepa cómo mostrar la imagen), y el nombre de la región donde la imagen se va a situar (region). De esta forma se especifica en qué region se ubica un medio. El resultado de esta presentación en el reproductor RealOne sería el siguiente:




Podemos ver cómo las dimensiones de la ventana son 300x200 píxeles, el fondo es blanco y la imagen está a 75 puntos del lateral izquierdo y a 50 del borde de arriba, es decir, está en la esquina superior izquierda de la región donde se ha ubicado. Por omisión, RealOne asigna 5 segundos de duración a la animación. Es importante destacar que este dato no viene especificado en el documento SMIL, por lo que se trata de una decisión particular del player, que podría ser diferente en otros reproductores. Por último, decir que a partir de ahora todos los eje rcicios se realizarán en SMIL 2.0. Para declarar un documento SMIL 2.0 es necesario utilizar la siguiente etiqueta <smil>:

<smil xmlns="http://www.w3.org/2001/SMIL20/Language"> El atributo xmlns declara un espacio de nombres, en concreto el de la versión 2.0 del lenguaje, por lo que las etiquetas SMIL incluidas dentro del documento así creado serán las definidas en la versión 2.0. En caso de no indicarse este atributo, los players asumirán la versión 1.0.

4. La base de SMIL: el Módulo de Estructura Este módulo proporciona los elementos básicos para la estructuración del contenido de SMIL en un documento XML.

Elementos

• smil: actúa como el elemento raíz de todos los documentos de SMIL. Puede

tener los siguientes atributos: ü id à identifica un elemento dentro de un documento. Su valor es un

identificador de XML. ü class à asigna un nombre de clase o un conjunto de nombres de

clases (todos separados por espacios en blanco) a un elemento. ü xml:lang à especifica el lenguaje de un elemento y se especifica en

XML 1.0. ü title à ofrece información que asesora sobre el elemento al que se ha

fijado. ü xmlns à declara un espacio de nombres XML. Se utiliza para

diferenciar los documentos de SMIL 1.0 de los de SMIL 2.0 El elemento smil puede contener los elementos head y body.

• head: contiene información como la metainformación, la información de distribución y el control de contenidos. Tiene los siguientes atributos: ü id ü class

ü xml:lang ü title

Contiene elementos de otros módulos.

• body: contiene información que está relacionada con el funcionamiento temporal y los enlaces del documento. Puede tener los siguientes atributos: ü id ü class

ü xml:lang ü title

Contiene elementos de otros módulos.

Introducción al web y al comercio electrónico Desarrollo Multimedia- Módulo de Introducción a la Tecnología SMIL


Desarrollo Multimedia 11 de 23

Los atributos id, class, title e incluso xml:lang deberían incluirse en todos los elementos de todos los módulos usados en el perfil.

5. Posicionamiento espacial: los Módulos de Layout Permite la distribución o el diseño de los contenidos en el espacio. Están compuestos por un módulo básico llamado BasicLayout y otros tres módulos que se definen sobre él y que son el módulo AudioLayout, MultiWindowLayout y HierarchicalLayout. Estos módulos controlan tanto el número y tamaño de las ventanas en las que se mostrará la presentación como la disposición de los contenidos dentro de las ventanas, incluyendo gestión de profundidad.

Elementos La ventana donde se va a realizar la presentación debe especificarse mediante el elemento <root-layout>. Si deseamos varias ventanas simultáneamente, utilizaremos <topLayout>. Ambos elementos pueden coexistir en una presentación SMIL.

• layout: Determina cómo se posicionan los elementos en el elemento body del documento. Debe aparecer en el head del documento, si no es así, los elementos se colocarán dependiendo de la aplicación. Dentro del elemento <layout> se definen las regiones o áreas de visualización de la presentación.

• root-layout: determina el valor de las propiedades de distribución del elemento

raíz, determinando el tamaño de la ventana en la que se dibuja la presentación de smil. Sólo puede haber un elemento root-layout en un elemento layout. Los atributos del elemento son: ü backgroundColor ü background-color ü height à Fija la altura del elemento raíz ü width à Fija la anchura del elemento raíz.

Si no se especifican ni height ni width el valor del atributo dependerá de la aplicación. Este elemento está vacío.

• topLayout: determina el tamaño de una ventana en la que se visualiza una

presentación SMIL, permite colocar en ella varios hijos region. Pueden definirse varios topLayout en un documento SMIL, que darán lugar a la apertura de varias ventanas de alto nivel. Estos elementos pueden aparecer dentro de un elemento layout. Los atributos que puede tener son: ü backgroundColor ü close à especifica cuando debería cerrarse la ventana de nivel superior.

Valores que puede tomar: § onRequest: la ventana sólo se cerraría si el usuario la cierra

mediante la interfaz de usuario. § whenNotActive: la ventana se cierra automáticamente cuando

no se muestra ningún objeto multimedia en ninguna region. El valor por defecto es onRequest.

ü height à Fija la altura de la ventana de nivel superior. Sólo soporta valores length.

ü open à especifica cuando debería abrirse la ventana de nivel superior. Valores que puede tomar:

§ onStart: la ventana debería abrirse cuando comienza la presentación. No debería reabrirse cuando se cierra.




§ whenActive: si no está ya abierta, debería abrirse cuando se muestre algún objeto multimedia en alguna de las regiones.

El valor por defecto es onStart. ü width à Fija la anchura de la ventana de nivel superior. Sólo soporta

valores length.

• region: controla la posición, el tamaño y la escalabilidad de los elementos del objeto multimedia. Las regiones no tienen representación visual en pantalla (salvo que se les asigne un color de fondo), ya que su cometido es delimitar parcelas de la ventana de visualización donde posteriormente se situarán los contenidos que tengan algún tipo de representación visual. Los atributos que puede tener son: ü backgroundColor à especifica el color de fondo usado para rellenar el

área de una región. Puede tomar el valor inherit para especificar que el color de fondo será el mismo que el del elemento padre.

ü background-color à atributo despreciado (mantenido por compatibilidad con SMIL 1.0). Es equivalente al anterior atributo. Si no se especifican ninguno de los dos, el fondo es transparent

ü bottom à especifica la distribución con respecto a la parte inferior del elemento padre. Soporta valores porcentuales no negativos y variación de los valores length. El valor por defecto de este atributo es auto.

ü fit à especifica el comportamiento si la anchura y la altura intrínsecas de un objeto multimedia visual difiere de los valores especificados en los atributos width y height del elemento region. Puede tener los siguientes valores:

§ fill: gradúa la anchura y la altura del objeto para que toque los bordes de la caja.

§ hidden: realiza la distribución adecuada cuando la altura o la anchura es mayor o menor que la especificada en el elemento region.

§ meet: gradúa el objeto multimedia manteniendo su proporción hasta que la altura o la anchura son iguales a la especificada por width y height. No realiza ningún recorte. El resto lo rellena con el color de fondo.

§ scroll: especifica que debe invocarse un mecanismo de desplazamiento cuando los contenidos representados del elemento exceden sus límites.

§ slice: gradúa el objeto multimedia manteniendo su proporción hasta que la altura o la anchura son iguales a la especificada por width y height. Se pueden fijar algunos contenidos. La parte sobrante, que se rellena con el color de fondo, se encontraría a la derecha y abajo.

El valor por defecto de fit es hidden. ü height à especifica la altura. El valor por defecto es auto. La altura

intrínseca es la misma que la de la geometría del padre. ü id à asigna un nombre único a este elemento region para referirse a él

en el atributo region. ü left à especifica la distribución con respecto a la parte izquierda del

elemento padre. El valor por defecto es auto. ü showBackground à Controla si el color de fondo se muestra cuando no

haya ningún objeto multimedia dibujado en la región. Puede tener los siguientes valores:

§ always: se mostrará el color de fondo aun cuando no haya ningún objeto multimedia mostrado.




§ whenActive: no se muestra el color de fondo si no hay ningún objeto multimedia mostrado.

El valor por defecto es always. ü top à Especifica la distribución con respecto a la parte superior del

elemento padre. El valor por defecto es auto. ü width à especifica la anchura. La anchura intrínseca de una región es la

misma que la de la geometría del padre. El valor por defecto es auto. ü z-index à especifica la profundidad del objeto multimedia. A mayor sea

ese número, más próximo (menos profundo) estará al visualizador, por lo que el objeto se presentará encima de los otros.

Desde SMIL 2.0, se admiten regiones jerárquicas, es decir, definir una region dentro de otra. Esto se hace anidando etiquetas region, de manera que las regiones "hijas" (definidas dentro de una determinada región "padre") definen sus parámetros con respecto al elemento padre. Los atributos del elemento <region> anidado siguen siendo los mismos, la única diferencia es que se interpretan tomando como referencia las propiedades de la región en la que se inscriben:

• Los atributos de posicionamiento (top, bottom, left y right) toman como base las fronteras de la región padre.

• Los atributos de tamaño, cuando se especifican de forma relativa, están referidos al ancho y alto de la región padre.

• Los z-index definidos en las regiones hijas se interpretan con respecto al z-index de la región padre. Así, si una región A (padre) estuviera oculta bajo otra región B, ninguna de las regiones hijas de A podrían verse, aunque su z-index fuera mayor en términos absolutos que el de B. Las regiones hijo se colocan sobre las regiones padre.

Asimismo es importante destacar que los propios objetos multimedia también pueden especificar sus dimensiones y posicionamiento, con respecto siempre a la región en la que se inscriben. Así puede indicarse una anchura, altura, distancia a los bordes de la región, profundidad (z-index) y forma de encajar el contenido (fit), esta última, si está presente, tiene prioridad con respecto a la especificada en la región, y si no lo está, se tomará el especificado en la región. De nuevo, el z-index especificado en un objeto multimedia se interpreta como relativo al especificado en la región, de forma que si la región está oculta bajo otra región, ningún contenido se vería, aunque tuviera un z-index mayor que el especificado en contenidos situados en la otra región.

Ejercicios 1. Escribir un docume nto SMIL denominado region1.smil, que se presente en una

ventana de 320x200 píxeles, y defina una región de 100x100 de nombre “marco”, en la cual se coloque la imagen tutoriallogo.gif Ayuda: indicar el atributo dur=”15s” dentro de la etiqueta <img> para dar una duración de 15 segundos a la presentación de la imagen.

2. Escribir un documento SMIL denominado region2.smil, que se visualice en una

ventana de 600x400, en la que se definan dos regiones de 150x150, la primera de ellas tendrá el nombre de “primera”, estará situada a 50 puntos del borde izquierdo, y al 15% del alto total de la ventana, y contendrá la imagen tutoriallogo.gif. La otra se llamará “segunda” y contendrá la misma imagen, pero estará situada a 10 puntos del borde inferior de la ventana, y a una distancia del borde derecho correspondiente al 10% del ancho total de la ventana. El color de fondo de la primera región será el verde (green), mientras que el de la segunda será rojo (red).




Ayuda: encerrar las etiquetas <img> dentro de un bloque <par> para que ambas imágenes se muestren simultáneamente:

<par> <img .../> <img .../> </par>

3. Partiendo del ejercicio anterior, aumentar el tamaño de las regiones definidas para

que ambas ocupen el 75% del ancho y del alto de la ventana principal. Probar la animación y observar qué región se superpone sobre la otra. Añadir a cada una el atributo z-index, de forma que la región “segunda” aparezca debajo de “primera”. Guardar el resultado en region3.smil.

4. Crear un documento llamado region4.smil, que contenga una única región que

ocupe el 85% del ancho y del alto de una ventana de 540x400 píxeles. En dicha región (cuyo color de fondo será el magenta), se situarán dos imágenes, ambas serán el fichero tutoriallogo.gif. La primera ocupará, partiendo de la esquina inferior izquierda, el 65% del ancho y del alto de la región. La segunda, partiendo de la esquina superior derecha, tendrá el mismo tamaño, y se aparecerá por debajo de la primera.

5. Modificar el fichero anterior (y guardarlo en region5.smil) para que la primera

imagen se extienda por toda la region, y la segunda se superponga a la primera y ocupe su tamaño original.

6. Crear un fichero llamado region6.smil en el que, a partir de una ventana de

640x400 puntos, se definan 6 regiones de la siguiente forma: cada una tendrá de ancho el 25% del ancho de la ventana, y de alto el 33% del alto de la ventana. Se situarán de forma que no se solapen, en dos filas de 3 regiones cada una, dejando un pequeño margen con el borde de la ventana y entre las regiones. Colocar la imagen tutoriallogo.gif en cada una de las regiones, estableciendo un valor diferente para el atributo fit.

7. Crear el documento region7.smil, en el que se define una ventana de 640x400, y

una región (llamada “padre”) que ocupe el 60% de cada una de las dimensiones de la ventana, situada en el centro de la misma. Dentro de esa región, se definirá otra, de nombre “hija”, que ocupe el 33% de las dimensiones de la región padre. Definir un z-index de 1 en “hija” y 0 en “padre”, de forma que la región “hija” esté por encima de “padre”. Realizar los siguientes pasos, reproduciendo la animación tras finalizar cada uno:

1. Situar la imagen tutoriallogo.gif en “padre”, ocupando toda la región, con un z-index de 4.

2. Situar la imagen vim32x32.gif en la esquina superior izquierda de la región padre, con z-index de 5, con su tamaño natural.

3. Situar el video sclero.mpeg en la región “hija”, ocupando toda su área, con z-index de 2 (ayuda: usar la etiqueta <video> de la misma forma que <img>).

4. Situar la imagen vim32x32.gif en la región “hija”, en la esquina superior derecha, con z-index de 3.

5. Mover la imagen del apartado 2 al centro de la región “padre”. 8. Crear la presentación region8.smil que al visualizarla abra dos ventanas diferentes,

una de 320x200 y otra de 640x480. En la primera de ellas se definirá una región de 50x50 situada en el centro de la ventana, en la que se mostrará la imagen tutoriallogo.gif, permitiendo hacer scroll para visualizarla. En la ventana




grande, se definirán dos regiones que se superpongan parcialmente. En una de ellas se reproducirá el vídeo sclero.mpeg permitiendo hacer scroll, superpuesto a la imagen smallsystem.gif, que se verá en la otra región.

6. Posicionamiento temporal: Módulos de Cronometraje y Sincronización Estos módulos nos permitirán solucionar los problemas fundamentales de sincronización de medios y definen una manera muy eficaz de coreografiar contenidos multimedia. Existen tres contenedores de tiempo, que son etiquetas para expresar cómo se han de reproducir los contenidos que encierran. Son éstas los elementos principales de este módulo, destacando también la riqueza expresiva de algunos atributos a la hora de expresar restricciones temporales que han de cumplirse en la línea de tiempos. Los contenedores de tiempo pueden anidarse, expresando relaciones complejas entre sus elementos. Un concepto clave en lo referente al cronometraje es la duración de un determinado elemento:

• Duración simple: se define como la longitud básica de presentación de un determinado contenido. Por ejemplo, si un vídeo dura 2 minutos, esa es su duración simple.

• Duración activa: es la suma de la duración simple más la duración de los posibles eventos de repetición que pudieran darse sobre un determinado elemento. Así, el video anterior, si se repitiera 2 veces, su duración activa sería de 4 minutos.

• Duración intrínseca: es la duración propia de un contenido, sólo si su medio posee duración de forma inherente. Hay medios cuyos objetos no poseen duración, como las imágenes, mientras que otros medios (como audio) sí poseen duración implícita. Los contenedores de tiempo tienen duración implícita, pero derivada a partir de los elementos que contengan.

• Duración explícita: es la duración que se especifica explícitamente mediante una etiqueta. Es independiente de la duración implícita (caso de existir), y al contrario que ésta, todos los medios pueden tener esta duración.

En la dirección http://www.w3.org/TR/smil20/smil-timing.html puede encontrarse una descripción detallada de estos módulos. En concreto se recomienda la sección 10.3.2 del documento.

Elementos

• par: Define una agrupación de tiempo simple en la que se pueden reproducir simultáneamente muchos elementos, es decir, de forma paralela. Soporta todos los elementos de cronometraje descritos posteriormente. La duración implícita de <par> está controlada por el atributo “endsync”, normalmente el valor que tiene es endsync=”last”. Por lo tanto la duración implícita de <par> finalizará con el final activo de los elementos hijo.

• seq: Define una secuencia de elementos en la que los elementos se reproducen uno después de otro, es decir, en secuencia. El inicio implícito de sus elementos hijo es el final activo del elemento previo si es que existe, o en caso contrario (es decir, para el primer elemento) es el inicio del <seq>. El elemento <seq> soporta todos los elementos de cronometraje excepto endsync. Los elementos encerrados en <seq> sólo pueden indicar su inicio usando un valor de offset no negativo. La duración implícita de <seq> finaliza con el final activo del último




de sus hijos. Si alguno de sus hijos tiene una duración activa indefinida, entonces la duración implícita de <seq> también es indefinida.

• excl: Define un contenedor de tiempo con semánticas basadas en <par>, pero con la restricción adicional de que sólo un elemento hijo puede mostrarse en un momento dado. En otras palabras, no impone un orden concreto de reproducción, pero los elementos que contiene serán mutuamente excluyentes. Si cualquier elemento empieza a reproducirse mientras otro está ya mostrándose, el elemento que estaba reproduciendo se pausa o se para. Los elementos en un <excl> pueden agruparse en categorías, y el comportamiento de pausa o interrupción de cada categoría puede controlarse usando el nuevo elemento de agrupación priorityClass. El elemento <excl> soporta todo el cronometraje del elemento. El inicio implícito de los elementos hijo es el propio begin de excl. La duración implícita de un contenedor <excl> se define igual que para un contenedor <par>, usando las semánticas de endsync=”last”. Sin embargo, puesto que el cronometraje por defecto para hijos de <excl> es interactivo, la duración implícita para contenedores de tiempo <excl> con sólo cronometraje por defecto en los hijos, será 0.

• priorityClass: Define un grupo de hijos cronológicos de excl, y el comportamiento de pausa/interrupción de los hijos. Si aparece un priorityClass como hijo de un excl, entonces el excl sólo puede tener hijos priorityClass. Si no se especifica ningún hijo priorityClass dentro de un excl, entonces se considera a todos los hijos como iguales (peers = stop). El elemento priorityClass sólo puede declararse dentro de un elemento excl. Sólo pueden tener elementos multimedia como hijos, y estos tendrán como padre a excl dado que priorityClass no afecta al cronometraje. Cada priorityClass es asignado a un nivel de prioridad, cuanto antes se haya declarado dentro del excl mayor prioridad tendrá. Cuando se pausan o se aplazan los elementos, se añaden a una cola de elementos pendientes.

Atributos

Los atributos definidos para los contenedores de tiempo (<par>, <seq> y <excl>) son los siguientes:

ü begin à Define cuándo se activa el elemento. Los valores que puede tener son: § smil-1.0-syncbase-value: Despreciado. Describe una base de

sincronización y un offset de esa base de sincronización. § begin-value-list: lista de valores begin separados por puntos y comas,

para indicar posibles valores de comienzo. Los posibles valores de esta lista son:

• offset-value: Describe el atributo begin como un offset de una base de sincronización implícita. Por ejemplo, begin="+5s" produce que el elemento comience 5 segundos después que su elemento padre. El offset se expresa mediante lo que se conoce como clock value, que puede ser:

• Valores full clock: 02:30:03 = 2 h, 30 min y 3 seg. 50:00:10.25 = 50 h, 10 seg y 250 miliseg.

• Valores partial clock: 02:33 = 2 min. y 33 seg. 00:10.5 = 10.5 seg. = 10 seg. y 500 miliseg.




• Valores timecount: 3.2h = 3.2 h = 3h y 12 min. 45min = 45 minutos 30s = 30 segundos 5ms = 5 milisegundos 12.467 = 12 seg. y 467 milisegundos

• syncbase-value: Describe una base de sincronización y un offset de esa base. La notación consiste en identificar el elemento base y uno de sus tiempos (begin o end), por ejemplo:

• begin="foto1.begin+3s" indica que se comenzará 3 segundos después que el principio del elemento foto1

• begin="video1.end-5min" indice que se comenzará cinco minutos antes del final del elemento video1.

• event-value: Describe un evento y un offset opcional que determinan el elemento begin. El evento concreto depende de la implementación. Un ejemplo de evento es cuando el elemento es cargado (load), cuando recibe el foco (focus), o cuando se hace click con el ratón (activateEvent para el caso de RealOne).

• repeat-value: Describe un evento de repetición cualificado. Por ejemplo: begin="video1.repeat(2)" hace que el elemento comience justo al empezar la segunda repetición del video1.

• acceskey-value: Describe una tecla de acceso que determina el atributo begin. Para ello se utiliza la palabra accesskey, indicando el carácter que se desea asociar. Por ejemplo, begin="accesskey(k)+1s" hace que ele elemento comience un segundo después de pulsar la tecla 'k'.

• media-marker-value: Describe el elemento begin como un valor marcador de contenido multimedia. Necesita que el contenido soporte marcas para poder referenciarlas.

• wallclock-sync-value: Describe el elemento begin como un tiempo clock del mundo real. Se indica mediante la palabra wallclock y entre paréntesis el valor del tiempo, que no tiene por qué ser completo. Algunos ejemplos son:

• Fecha completa con horas y minutos: AAAA-MM-DDThh:mmTZD ej. wallclock(1997-07-16T19:20+01:00)

• Fecha completa con horas, minutos y segundos: AAAA-MM-DDThh:mm:ssTZD ej. wallclock(1997-07-16T19:20:30+01:00)

• Fecha completa con horas, minutos, segundos y fracción: AAAA-MM-DDThh:mm:ss.sTZD ej. wallclock(1997-07-16T19:20:30.45+01:00)

• Hora: hh:mm

ej. wallclock(20:00) • “indefinite”: El comienzo del elemento estará determinado por

la llamada al método beginElement() o por un hipervínculo dirigido al elemento.

Los hijos de un seq sólo pueden especificar para begin un offset no negativo. Si no se especifica un begin, el cronometraje por defecto depende del contenedor de tiempo. Cuando se especifica un tiempo begin negativo, el elemento empieza inmediatamente, pero actúa como si hubiera empezado en el tiempo especificado.

ü dur à especifica la longitud de duración simple. Los valores que puede tomar son los siguientes:




§ clock-value: Especifica la longitud de la duración simple, medida en el tiempo activo del elemento. Debe ser mayor que 0.

§ “media”: Especifica la duración simple como una duración intrínseca. Sólo válido para elementos que definen el contenido multimedia.

ü end à Permite al autor restringir la duración activa al especificar un valor final. Los valores que puede tomar idénticos a los del atributo begin. Si se especifica end pero no se especifican ni dur, ni repeatCount, ni repeatDur, se define la duración simple como indefinida. Si se resuelve el valor end cuando el elemento está activo, a un tiempo que ya ha pasado, el elemento debe finalizar inmediatamente.

ü min à Especifica el valor mínimo de la duración activa, de forma que si ésta depende de un evento de usuario (por ejemplo, la pulsación de una tecla) no finalizará hasta que no haya transcurrido el tiempo indicado. Soporta los siguientes valores: § clock-value: especifica la longitud del valor mínimo de la duración activa,

medido en el tiempo activo del elemento. El valor debe ser mayor o igual que 0.

§ “media”: especifica el valor mínimo de la duración activa como la duración intrínseca del contenido multimedia. Sólo válido para elementos que definen el contenido multimedia.

El valor por defecto es 0. ü max: Especifica el valor máximo de la duración activa. Soporta los siguientes

valores: § Clock-value: Especifica lo longitud del valor máximo de la duración

activa, medido en el tiempo activo del elemento. El valor debe ser mayor que 0.

§ “media”: Especifica el valor máximo de la duración activa como la duración intrínseca del contenido multimedia.

§ “indefinite”: El valor máximo no está definido y por eso no está restringido.

El valor por defecto es indefinite. Si se especifican ambos atributos (min y max) entonces max debe ser mayor o igual que min. Si no se ignoran ambos. ü endsync: Controla la duración implícita de los contenedores de tiempo en

función de los hijos. Este atributo sólo es válido para elementos par o excl, o elementos multimedia con hijos cronometrados (como por ejemplo animate o area). Los valores que puede tomar son: § first: la duración implícita del elemento multimedia o el par o excl

finaliza con el primer final activo de todos los elementos hijo. § last: La duración implícita del elemento multimedia o el par o excl

finaliza con el último final activo de los elementos hijo. Si ninguno de los hijos tiene especificado el atributo begin, entonces el elemento finaliza inmediatamente. Si por el contrario tienen múltiples tiempos begin o conductas de reinicio, los elementos hijo deben completar todas las duraciones activas para resolver los tiempos begin. Este es el valor por defecto para par y excl.

§ all: Finaliza cuando han acabado su duración activa todos los elementos hijo.

§ media: La duración implícita del elemento contenedor de tiempo finaliza cuando lo hace la duración media intrínseca de los elementos.

§ Id-value: Finaliza cuando el elemento referenciado termina su primera duración activa.

§ smil1.0-Id-value: Especifica un valor identificador de smil 1.0. Se desprecia.




Si se especifica endsync y dur, se ignora endsync. Si se especifica endsync y end pero no se especifica ni dur, ni repeatCount, ni repeatDur, se ignora endsync. Si se especifica endsync junto con una conducta de reinicio, endsync sólo tendrá en cuenta la primera instancia de duración activa completada. Si se especifica endsync y hay elementos pausados, deben tenerse en cuenta estos elementos pausados dependiendo del valor de endsync.

ü repeatCount à Especifica el número de iteraciones de la duración simple. Puede tener los siguientes valores: § numeric value: Un valor numérico que especifica el número de

iteraciones. § “indefinite”: Define que el elemento se repite indefinidamente.

ü repeatDur à Especifica la duración total durante la cual se repetirá. Puede tener los siguientes valores: § clock-value: Especifica la duración en el tiempo activo del elemento para

repetir la duración simple. § “indefinite”: Se repite el elemento indefinidamente.

ü fill à Permite a un autor definir que el elemento debe extenderse más allá de la duración activa al congelar el estado final del elemento. Puede tener los siguientes valores: § remove: El elemento no se extiende pasado el final de la última

instancia de la duración simple. § freeze: Determina que el elemento va a quedar congelado en su último

frame. El tiempo viene determinado por el contenedor de tiempo padre del elemento.

§ hold: Tiene el mismo efecto que fijarlo a freeze salvo que el elemento se congela para extenderse hasta el final de la duración simple del contenedor de tiempo padre del elemento.

§ transition: Tiene el mismo efecto que fijarlo a freeze salvo que el elemento se elimina cuando concluye la transición. Este valor sólo se permite a elementos que están directamente asociados con contenidos multimedia.

§ auto: La conducta depende de los atributos que especifican la duración simple o activa. Si no se especifican ni dur, ni end, ni repeatCount, ni repeatDur, el elemento tiene una conducta igual a freeze. De lo contrario, tendrá una conducta igual a remove.

§ default: La conducta de relleno viene especificada por el atributo fillDefault.

Cuando el contenido multimedia es de audio, durante el tiempo de congelación, el sonido está en silencio.

ü fillDefault à Define el valor por defecto del funcionamiento de fill en un elemento y en sus descendientes. Los valores remove, freeze, hold, transition y auto, especifican que la conducta de fill del elemento es el valor respectivo. El valor inherit especifica que el valor de este atributo es heredado del valor fillDefault del elemento padre. Si no hay ningún elemento padre, el valor es auto. Este es el valor por defecto de fillDefault.

Los atributos que definidos para el elemento <priorityClass> son los siguientes: ü peers à Controla como se interrumpirán los hijos del priorityClass los unos a los

otros. Los valores válidos son: § stop: Si un elemento hijo empieza mientras está activo otro elemento,

el elemento activo se para. § pause: Si un elemento hijo empieza aunque esté activo otro elemento

hijo, el elemento activo es pausado y se reanudará cuando el nuevo




elemento (que ha interrumpido) complete su duración activa. El elemento pausado es añadido a la cola de pausa.

§ defer: Si un elemento hijo intenta empezar aunque otro elemento hijo esté activo, el nuevo elemento (que interrumpe) es aplazado hasta que el elemento activo complete su duración activa.

§ never: Si un elemento hijo intenta empezar aunque otro elemento hijo esté activo, se impide que empiece el nuevo elemento (que interrumpe).

El valor por defecto es stop. ü higher à Controla cómo los elementos con prioridad superior (priorityClass

definidos antes que este) interrumpirán los elementos hijo de este priorityClass. Los valores para este atributo son: § stop: Si empieza un elemento de prioridad superior mientras un

elemento hijo de este priorityClass está activo, el elemento hijo se para. § pause: Si un elemento de prioridad superior empieza mientras un

elemento hijo de esta priorityClass está activo, el elemento hijo activo se pausa y se reanudará cuando el nuevo elemento complete su duración activa. El elemento pausado se añade a la cola de pausa.

El valor por defecto es pause. ü lower à Controla cómo los elementos definidos con prioridad inferior

(priorityClass definidos después que este) interrumpirán los elementos hijo de esta priorityClass. Los valores válidos son: § defer: Si un elemento de prioridad inferior intenta empezar mientras un

elemento hijo de esta priorityClass está activo, el nuevo elemento es aplazado hasta que el elemento activo complete su duración activa.

§ never: Si un elemento de prioridad inferior intenta empezar mientras un elemento hijo de esta priorityClass está activo, se impide al nuevo elemento desde el principio. Se ignora el comienzo del nuevo elemento, y no se añade a la cola.

El valor por defecto es defer. ü pauseDisplay à Controla cómo actúan los elementos hijo del elemento

priorityClass cuando son pausados. Este atributo sólo se aplica si peers o higher es igual a pause. Los valores válidos son: § disable: Continúa reproduciendo el contenido multimedia del elemento

pausado, aunque está deshabilitado. § hide: Borra el efecto del elemento pausado. § show: Continúa mostrando el efecto del elemento (incluyendo cualquier

representación) cuando el elemento se pausa por las semánticas de excl y priorityClass. Este valor no tiene ningún efecto en un medio auditivo.

El valor por defecto es show.

Ejercicios 1. Realizar una presentación SMIL en un fichero llamado tiempo1.smil que presente

dos imágenes y un vídeo en paralelo, de manera que la primera imagen aparezca en el instante t=2s y dure 10 segundos, la segunda imagen aparezca en el instante t=5s y dure 5 segundos, y el vídeo comenzará en el instante t=7s y se reproducirá completo.

2. Escribir en el fichero tiempo2.smil una presentación en la que se muestre una

secuencia de: una imagen (5 segundos), un sonido (3 segundos) y un vídeo (10 segundos), cada uno de estos elementos comenzará cuando termine el anterior. Ayuda: para sonido, usar la etiqueta <audio> de la misma forma que <img>




3. Modificar el ejercicio anterior (y guardarlo en tiempo3.smil) para que el sonido comience 2,5 segundos después de que termine la imagen, y el vídeo un segundo después de que empiece el sonido.

4. Realizar la presentación tiempo4.smil, en la que se deberán mostrar

permanentemente sólo uno de los siguientes elementos: - Una imagen, al pulsar la tecla '1', de 5 segundos de duración. - Un video, al pulsar la tecla '2', que se repita tres veces - Otra imagen, al pulsar la tecla '3', de duración indefinida. - Un sonido, al pulsar la tecla '4', con su duración natural. 5. Modificar el ejercicio anterior para que el video no desaparezca tras repetirse tres

veces. Además, la segunda imagen se reproducirá, bien al pulsar ‘3’, bien cuando el vídeo pase por su segunda repetición. Guardar el resultado en tiempo5.smil

6. Modificar de nuevo el ejercicio 4 para establecer dos clases de prioridad. En

concreto, la clase de mayor prioridad contendrá la primera imagen y el vídeo, de manera que el video se pause si aparece la imagen. La segunda clase de prioridad incluirá la otra imagen y el sonido, de forma que cualquier elemento de esta clase se parará si se activa otro de esta clase. Asimismo, cuando un elemento de la clase prioritaria se active, los elementos activos de la otra clase esperarán a que terminen los de la clase prioritaria. Guardar el resultado en tiempo6.smil.

7. Hacer una presentación que muestre una secuencia de un sonido y una imagen

reproduciéndose simultáneamente, y un video con otra imagen reproduciéndose también a la vez. La segunda secuencia es indefinida, y el video se debe reproducir cuantas veces sea necesario. Salvarlo en tiempo7.smil.

8. Con lo aprendido hasta ahora, el alumno deberá realizar una pequeña composición

multimedia usando SMIL, que muestre su currículum vitae, estructurado en secciones, para lo cual podrá utilizar imágenes, texto y sonidos, mostrados en secuencia, en paralelo o de forma excluyente. Ayuda: para introducir texto, emplear la etiqueta <text>

7. Soportando varios medios: los Módulos de Media Objects Esta sección define los módulos de los objetos multimedia de SMIL, que están compuestos de un módulo principal denominado BasicMedia y cinco módulos con funcionalidades adicionales. Estos módulos contienen elementos y atributos usados para describir objetos multimedia. SMIL distingue claramente dos tipos de medios, de acuerdo a su naturaleza:

• Medios continuos: audio, vídeo u otros medios para los que existe una duración medible y bien comprendida. Es el opuesto a los medios discretos.

• Medios discretos: Imágenes, texto u otros medios que no tienen una duración obvia, ya que no hay información en el archivo que describa la duración. Es el opuesto a medios continuos.

SMIL defina la duración intrínseca como la duración de un determinado elemento sin considerar ningún tipo de marcado temporal. Los medios continuos tienen una duración intrínseca definida por el propio medio, mientras que los medios discretos no tienen duración intrínseca, por lo que SMIL les asigna duración 0.




Como se ha visto en la primera parte de este documento, una presentación SMIL incluye a los medios por referencia, es decir, indicando la ubicación de éstos mediante su URL, ya sea ésta local (para ficheros en la máquina donde se visualiza), o remota (para uso de protocolos de transmisión, ya sean pseudostreaming o streaming puro).

Elementos

• ref: referencia de un contenido multimedia genérico. • animation: vectores gráficos animados o cualquier otro formato animado. • audio: fragmento de audio. • img: imagen fija como PNG o JPEG • text : referencia de texto • textstream: flujo de texto. • video: videoclip. • brush: elemento del objeto multimedia que permite al autor pintar un solo color

y otro patón de colores en lugar del objeto multimedia. El atributo src no es obligatorio y soporta el atributo: ü color à define el color.

Es importante destacar que todas estas etiquetas no representan diferentes tipos de medios: realmente el reproductor no se basa en ellas para determinar el tipo concreto de medio que le toca reproducir. Se basará en dos elementos:

• El valor del atributo type. • La información proporcionada por el sistema operativo o el servidor.

De todas formas, el autor de una presentación deberá utilizar la etiqueta adecuada en cada caso, con el objetivo de aumentar la legibilidad. En caso de dudar qué etiqueta usar, se recurrirá a la genérica <ref>.

Atributos Todos ellos pueden tener estos atributos, cuya definición corre a cargo de varios módulos de media objects: ü src à Su valor especifica el URI del elemento multimedia, que se usa para

localizar y cargar el archivo multimedia asociado. ü type à tipo de contenido de un objeto multimedia referenciado en el atributo

src. Técnicamente se conoce como tipo MIME. Cuando un determinado medio se encuentra disponible en varios formatos, y el protocolo de transmisión permite negociar los contenidos, se usará el valor de este atributo para establecer las peferencias de negociación.

ü clipBegin (clip-begin) à Especifica el comienzo de un sub-fragmento de un objeto multimedia continuo como desviación del comienzo del objeto multimedia. Permite los siguientes formatos: § SMPTE Timestamp: códigos temporales de SMTPE. Un valor de tiempo

expresado de esta forma se construye indicando smtpe=valor, donde el valor tiene el aspecto siguiente: horas:minutos:segundos:marcos.submarcos (estos últimos medidos en centésimas de marco). Por ejemplo, clipBegin="smpte=10:12:33:20". Según el número de marcos por segundo que se consiederen, se tiene smtpe, smpte-30-drop (para 29,97 frames/s, como el estándar NTSC), y smtpe-25 (para valores de 0 a 24, como el estándar de TV PAL).

§ Normal Play Time: expresa el tiempo en valores de reloj de SMIL, como los vistos en la sección de Tiempo y Sincronización. Se especifican indicando ntp=valor, donde valor es un clock value. Por ejemplo, clipBegin="npt=12:05:35.3".




Este atributo se aplica antes que cualquiera de los atributos de cronometraje. ü clipEnd (clip-end) à especifica el final de un sub-fragmento de un objeto

multimedia continuo como desviación desde el comienzo del objeto multimedia. Este atributo se aplica antes que cualquiera de los atributos de cronometraje.

ü alt à String que especifica el texto alternativo en caso de que el agente usuario no sea capaz de mostrar el objeto multimedia.

ü longdesc à Especifica una URI donde se puede encontrar una descripción extensa del objeto multimedia.

ü readIndex à Este atributo especifica la posic ión del elemento actual en el orden en el que los textos longdesc, title y alt van a ser leídos por los dispositivos de ayuda. Comenzaría del menor al mayor sin tener en cuenta el valor 0 que sería el mismo. En caso de tener el mismo readIndex, se leería primero el que aparece antes en el documento.

ü abstract à Información resumida del contenido del elemento. No sustituye al objeto multimedia, y contiene información que debería aparecer también en el atributo alt.

ü author à El nombre del autor del contenido. ü copyright à La información del copyright del contenido. ü title à El atributo title tal y como se define en el módulo Structure.

Ejercicios 1. Realizar una presentación SMIL que contenga dos regiones. En cada una se

mostrará el mismo vídeo (sclero.mpeg), pero en una región se reproducirá completo, mientras que en la otra sólo se reproducirá un fragmento del mismo. Se desea que dicho fragmento comience en el séptimo segundo de reproducción, y termine en el décimo. Además, durante la aparición del fragmento, ambos clips discurrirán exactamente por el mismo instante de su reproducción. Guardar el resultado en media1.smil

2. Añadir el nombre del autor y una descripción alternativa a los contenidos de la

presentación anterior.

Documents

Tutorial SMIL Basico