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
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.
Desarrollo Multimedia con SMIL 1 de 23

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 posicionamie nto
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 Normalme nte 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=rnhmf
s
• 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
comp ortamiento 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 ü xml:lang
ü class ü 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 ü xml:lang
ü class ü title
Contiene elementos de otros módulos.

Introducción al web y al comercio electrónico
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.
Desarrollo Multimedia 11 de 23
§ 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 a l 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 destac ar 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 cronome traje.
ü 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.

Tutorial SMIL Basico

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Tutorial SMIL Basico

Încărcat de

Drepturi de autor:

Formate disponibile

Multimedia. Ingeniería en Informática. 3º curso.

Desarrollo Multimedia- Módulo de Introducción a la Tecnología SMIL

SMIL: DESARROLLO MULTIMEDIA PARA WEB

SMIL: DESARROLLO MULTIMEDIA PARA WEB .................................................. 1

Los objetivos concretos son los siguientes:

Desarrollo Multimedia con SMIL 1 de 23

Se utiliza el término multimedia para hacer referencia a la integración de tipos de

SMIL es el acrónimo de Synchronized Multimedia Integration Language

Para reproducir un archivo SMIL se requiere un reproductor (player) adecuado.

2. Conceptos básicos sobre SMIL

Desarrollo Multimedia con SMIL 2 de 23

Sintaxis básica de SMIL

Conceptos básicos de un documento SMIL

Todo documento SMIL se estructura en torno a dos componentes:

Por ello, la estructura básica del documento SMIL es la siguiente:

La sección <head> es la cabecera del documento SMIL. Es una sección opcional,

Desarrollo Multimedia con SMIL 3 de 23

En el cuerpo del documento también se especifica la ubicación temporal y la

Ancho de Banda y Tasa de Transferencia

Debido a que SMIL se diseñó considerando que las presentaciones multimedia se

En términos técnicos, el ancho de banda es la capacidad disponible en la red para

La tasa de transferencia (también medida en Kbps) de un contenido es la media de

Desarrollo Multimedia con SMIL 4 de 23

ejemplo, un vídeo de 20 segundos, que ocupa un tamaño de 200KBytes (x8 = 1600

En general, conviene ser cuidadosos en el diseño de una presentación SMIL, ya que

Pseudostreaming y streaming real

El término streaming hace referencia al hecho de que un visor no debe esperar a

• Pseudostreaming (o download progresivo): En esta variante los medios

Sin embargo, existen también varios inconvenientes:

Desarrollo Multimedia con SMIL 5 de 23

o Los contenidos no se guardan en el ordenador cliente, sino que se

Reproductores y editores de SMIL

• RealOne: de la empresa RealNetworks, con soporte completo para SMIL 2.0.

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

Desarrollo Multimedia con SMIL 6 de 23

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

La especificación de SMIL 1.0 fue publicada por el W3C en 1998. Su objetivo

La principal aportación de SMIL 1.0 fue revolucionar la concepción que se tenía

La primera especificación surgió en el verano de 1999, pero no se transformó en

Las áreas funcionales son:

Desarrollo Multimedia con SMIL 7 de 23

• Módulo de Estructura: ofrecen las etiquetas necesarias para crear una

A día de hoy existen tres perfiles:

3. El primer documento SMIL

Desarrollo Multimedia con SMIL 8 de 23

<img src="vim32x32.gif" alt="The vim icon" region="vim_icon" />

Como puede observarse, el documento está comprendido entre las etiquetas

Desarrollo Multimedia con SMIL 9 de 23

Por omisión, RealOne asigna 5 segundos de duración a la animación. Es importante

El atributo xmlns declara un espacio de nombres, en concreto el de la versión 2.0

4. La base de SMIL: el Módulo de Estructura

• head: contiene información como la metainformación, la información de

• body: contiene información que está relacionada con el funcionamiento

Desarrollo Multimedia con SMIL 10 de 23

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

La ventana donde se va a realizar la presentación debe especificarse mediante el

• layout: Determina cómo se posicionan los elementos en el elemento body del

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

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

§ whenActive: si no está ya abierta, debería abrirse cuando se

• region: controla la posición, el tamaño y la escalabilidad de los elementos del

§ whenActive: no se muestra el color de fondo si no hay ningún

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