SMIL
Synchronized Multimedia
Integration Language
Ciro Autiero
1
Cosa è SMIL
SMIL (si pronuncia “smile”) è l’abbreviazione di
Synchronized Multimedia Integration Language è un
linguaggio per l’integrazione e la sincronizzazione di
diversi files multimediali.
Permette di creare documenti multimediali in cui:
– diversi oggetti distribuiti nel web sono sincronizzati
tra loro,
– l’utente può interagire con essi in modo coerente,
– il layout è definito in modo preciso,
– l’integrazione è realizzata attraverso un formato
testuale di markup, in particolare un linguaggio XML.
2
Cosa non è SMIL?
Non è un nuovo protocollo per la trasmissione di
media.
Non è uno strumento di authoring di media.
Non è un’alternativa a Flash anche se permette la
formulazione di animazioni.
3
SMIL vs HTML
HTML permette l’integrazione di diversi oggetti in
una pagina web.
Come HTML, SMIL non permette la creazione di
nessun tipo di media (ma diversamente da HTML,
anche i file di testo vengono creati esternamente).
Diversamente ad HTML, gestisce in modo completo
l’utilizzo di media continui:
– Sincronizzazione,
– Interazione…
4
SMIL - Cronologia
15 Giugno 1998
Vengono pubblicate le specifiche di SMIL 1.0 come
W3C recommendation
7 Agosto 2001
Le specifiche di SMIL 2.0 diventano una W3C
recommendation.
13 Dicembre 2005
Le specifiche di SMIL 2.1 diventano una W3C
recommendation
5
SMIL 1.0
disporre oggetti multimediali in punti precisi dello
schermo,
descrivere il comportamento temporale dei diversi
elementi di una presentazione multimediale,
interagire con link ad altre presentazioni o parti di
esse.
6
SMIL 2.0
Modularizzazione del linguaggio,
Profiling (Language Profile e Basic Profile),
inserire animazioni nella timeline della
presentazione,
inserire transizioni tra un oggetto e l’altro,
modificare la riproduzione “on-the-fly” sulla base di
alcuni eventi scatenati dall’utente
7
SMIL 2.1
Introduzione di feature per terminali mobili, in
particolare vengono aggiunti i profile: Mobile Profile
e Extended Mobile Profile,
rivisti ed aggiunti moduli sulla gestione temporale
dei file multimediali, sulla disposizione degli oggetti
(layout) nella presentazione e sulle transizioni.
8
SMIL è un linguaggio
modulare
SMIL 2.1 è diviso in 10 aree funzionali. Ogni area
funzionale è poi suddivisa in moduli:
1. Timing
2. Time Manipulations
3. Animation
4. Content Control
5. Layout
6. Linking
7. Media Objects
8. Metainformation
9. Structure
10.Transitions
9
Player e Browser
Player
Strumento per la riproduzione di media continui.
Browser
Ha come scopo principale la navigazione tra le
pagine.
Solitamente i player si integrano come “plugins” del
browser Web
10
Player per documenti SMIL
Apple QuickTime:
http://www.apple.com/quicktime/download/
Compaq HPAS:
http://research.compaq.com/SRC/HPAS
Oratrix Grins: http://www.oratrix.com
AMBULANT (1.6) Open Source SMIL Player:
http://www.cwi.nl/projects/Ambulant/distPlayer.ht
ml
RealSystem G2: http://www.real.com
......
11
Come funziona
1) Il browser incontra un file "SMIL"
2) Lo riceve…
3) ...il browser richiama l'applicazione esterna che
si preoccuperà di...
4) e 5) ...richiedere i vari file necessari per la
presentazione e visualizzarla.
12
SMIL Profiles
Un Profile è un insieme di moduli di SMIL che
consente di ottimizzare la presentazione in funzione
delle caratteristiche del Client.
I Profiles sono pertanto tentativo di far interagire
diversi player e browser:
– una presentazione deve poter essere eseguita da
più player (attualmente questo non è in generale
vero)
– su dispositivi diversi → PDAs, lettori MP3, …
Le specifiche SMIL 2.1 definiscono quattro Profile:
– Language Profile.
– Mobile Profile.
– Extented Mobile Profile.
– Basic Profile and Scalability Framework.
13
Ruolo di SMIL negli MMS
I messaggi MMS si basano sul linguaggio di
programmazione SMIL che viene utilizzato per
produrre presentazioni che includono contenuti
multimediali
Con l’obiettivo di mantenere al più alto livello
possibile l’interoperabilità del servizio alcuni
protagonisti del mondo delle telecomunicazioni (CMG
Wireless Data Solutions, Comverse, Logica, Motorola,
Nokia, Siemens e Sony Ericsson) hanno creato l’MMS
CONFORMANCE DOCUMENT, consolidato sotto l’OMA
(Open Mobile Alliance).
14
MMS Conformance Document
Obiettivo
Unificare il più possibile il linguaggio SMIL e
specificarne le caratteristiche da utilizzare anche
fra utenti e terminali differenti:
– Contenuto del messaggio multimediale.
– Elementi ed attributi del linguaggio di
presentazione.
– Formato dei contenuti multimediali.
– Abbassamento del livello di capacità.
15
Evoluzione dei formati SMIL
per Terminali Mobili
SMIL Basic
Essenzialmente basato sul Basic Profile
usato su PDA ma non per cellulari.
MMS SMIL
Il profilo è un insieme di moduli grazie ai
quali può essere costruita la
presentazione; per gli MMS, e di
conseguenza per i cellulari. Definito nel
Conformance.doc.
PSS SMIL
La versione di PSS SMIL (Packet
Switched Streaming Service) contiene i
moduli di SMIL Basic Profile con alcuni
inserimenti.
3GPP standard. Sostituirà MMS SMIL.
16
Come creare un documento
SMIL
Una presentazione SMIL è un semplice file di testo
tipicamente estensione .smi e può essere editato con
un semplice editor di testo, ad esempio WordPad.
Per creare una presentazione SMIL l'unica cosa che
serve (oltre ai documenti multimediali che si voglio
presentare) è un editor di testo.
Gli strumenti di authoring specifici offrono delle
interfacce grafiche che esplicitano meglio
l’andamento del tempo.
Alcuni esempi:
– GRiNS
– RealSlideshow
– LimSee2 (open source)
17
Struttura di un documento
SMIL
<smil>
<head>
<!-- informazioni sul contenuto -->
<layout>
<!-- definizione delle regioni -->
</layout>
</head>
<body>
<!-- sincronizzazione degli
elementi della presentazione-->
</body>
</smil>
18
SMIL come linguaggio XML
SMIL è un linguaggio di markup con una struttura
molto simile ad un documento HTML. SMIL estende
XML e ne rispetta la sintassi (HTML non rispetta la
sintassi XML).
Pertanto in un documento SMIL:
– i tag sono case sensitive,
– deve sempre esserci un tag di chiusura,
– i tag devono essere aperti e chiusi nell’ordine
corretto,
– gli attributi vanno riportati tra “virgolette”.
I browser HTML cercano di visualizzare al meglio
codice non corretto.
I player SMIL non eseguono codice non corretto.
19
Versione e regole del
Documento
Come ogni documento XML anche i documenti SMIL
iniziano con una dichiarazione che ne definisce la
versione:
<?xml version="1.0"?>
Un secondo elemento opzionale e che è spesso
presente nei documenti XML e pertanto anche nei
documenti SMIL è un riferimento alle regole secondo
cui il documento deve essere interpretato:
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.1//EN"
"http://www.w3.org/2005/SMIL21/SMIL21.dtd">
20
Un primo esempio di
documento SMIL
<?xml version="1.0"?>
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.1//EN“
"http://www.w3.org/2005/SMIL21/SMIL21.dtd">
<smil
xmlns="http://www.w3.org/2005/SMIL21/Languag
e">
<head>
<meta name="title“ content=“SMIL
Introduction"/>
<meta name="author" content=“Autiero Ciro"/>
<layout>
</layout>
</head>
<body>
<video src=“partita.mpg"/>
</body>
21
</smil>
La sezione Head
Contiene informazioni relative al contenuto della
presentazione (tag meta)
la disposizione spaziale (layout) dei media:
– la definizione delle finestre,
– la definizione delle regioni della presentazione in
cui sono visualizzati i media
la definizione delle transizioni utilizzate nella
presentazione.
22
La sezione Head: codice
<head>
<meta name="title" content="…" />
<meta name="author" content="…" />
<meta name="abstract" content="..." />
<layout>
<root-layout width="500" height="400“
backgroundColor="white" />
<region id="region" …/>
….
</layout>
<transition id="upSlide" type="slideWipe"
subtype="fromBottom" />
</head>
23
Layout
Il tag layout definisce la disposizione spaziale della
presentazione: è possibile definirvi:
– finestre,
– regioni,
– punti di ancoraggio.
La finestra principale è definita come <root-layout>.
Le altre finestre sono definite come <topLayout>.
24
Posizionamento delle regioni
Origine
Top
Left
Heigth
Width
Le regioni sono porzioni dello schermo entro cui
inserire i media della presentazione. Vanno definite
all’interno di una finestra o di un’altra regione.
→ posizionamento
→ volume
Si considera come origine l’angolo superiore sinistro
della finestra principale, e si calcola la distanza in
numero di pixel.
25
Un esempio di definizione
di regione
<smil
xmlns="http://www.w3.org/2005/SMIL21/Langua
ge">
<head>
<layout>
<root-layout width= “500” height=“400”
background-color=“white”/>
<region id= “icona” left=“25” top=“50”
width=“450” height= “313” />
</layout>
</head>
<body>
<seq dur="10s">
<img src=“chat.jpg” alt=“Immagine”
region=“icona” />
</seq>
</body>
26
</smil>
Attributi per il layout
region Id
Tag per denire un’area di applicazione in cui
inserire contenuti multimediali con il relativo
nome assegnato
backgroundColor
colore di sfondo di questa zona espressa in valori
esadecimale
bottom, left, right, top
distanze espresse in pixel dall’origine
height, width
Altezza e larghezza espressa in pixel
fit
"disegna" il file multimediale in corrispondenza
all' altezza e alla lunghezza definita negli attributi
precedenti
27
La sezione Body
Contiene la descrizione dei contenuti della
presentazione (path, regione occupata…),
le descrizione del comportamento temporale della
presentazione multimediale,
le modalità di interazione con l’utente,
le animazioni definite nella presentazione.
28
La sezione Body: codice
<body>
<seq>
<par dur="00:12.0" >
<img src="pour.gif"
transIn="rightSlide“ region="rp"
fill="hold" />
<audio src="audio/guitar.rm"
dur="10s"/>
</par>
<par>
<img src="heating.gif"
transIn="rightSlide"
region="vid" />
<audio src="audio/piano.rm"
begin="2s"/>
</par>
</seq>
</body>
29
Riproduzione parallela
Il tag <par> permette la riproduzione parallela di
più oggetti.
Tramite degli attributi è possibile cambiare l’inizio
e la fine della riproduzione dei media.
<par> <!-- questi 2 file vengono eseguiti in
parallelo -->
<audio src=“colonna_sonora” />
<audio src=“commento_parlato” />
</par>
<par> <!-- questi due file si si sovrappongono per
5 secondi -->
<audio src=“colonna_sonora” dur=“15s” />
<audio src=“commento_parlato”
begin=“10s”/>
</par>
30
Riproduzione in sequenza
Il tag <seq> permette la riproduzione sequenziale di
più oggetti.
La sincronizzazione si realizza annidando i tag <seq>
e <par>.
<seq> <!-- questi 2 file vengono eseguiti in
sequenza -->
<audio src=“primo_comento” />
<audio src=“secondo_commento” />
</seq>
31
Attributi di par e seq
begin
specifica l'esatto inizio temporale di un elemento
dur
determina la durata temporale dell’elemento
repeat
indica il numero di volte per cui l’elemento deve
essere riprodotto
end
specifica l'esatta fine temporale di un elemento
<body>
<seq>
<img src=“chat.jpg"
begin="4s"
end="10s"
dur="15s" region="icona" />
</seq>
</body>
32
Eventi
È possibile sincronizzare due o più oggetti sulla base
del verificarsi di un evento: per fare un riferimento
ad un evento particolare lo costruisco indicando:
– l’id dell’oggetto che lo ha subito + “.” + l’evento
stesso.
Si possono combinare gli eventi:
<par end=“bottone.click; commento_parlato.end”>
<audio src=“colonna_sonora.wav”
id=“musica”/>
<audio src=“commento_parlato.wav”
id=“commento”/>
<img src=“stop.jpg” id=“bottone”/>
</par>
33
Le transizioni
Le transizioni sono filtri o effetti che rendono meno
netto il passaggio da un media ad un altro.
Un media può avere una transizione di entrata e una
transizione di uscita.
Le transizioni non modificano la durata degli oggetti.
Per creare un effetto devo conoscere tre dati:
– il media iniziale (sorgente o background),
– il media finale (destinazione),
– la progressione della transizione (tipo, durata…).
34
Definizione delle transizioni
Sono definite in due modi: con il tag <transition>
nella sezione head e utilizzate nella definizione dei
media. In questo modo possono essere riutilizzate.
<head>
<transition id=“trans_1" dur="1s"
type="fade" />
</head>
...
<body>
<par dur="5s" >
<img id=“img_1" transIn=“trans_1"
…/>
<img id=“img_2"
transOut=“trans_1" …/>
</par>
</body>
35
Tipo di transizione
L’effetto risultante dalla transizione è ottenuto
combinando i valori di due attributi:
– type indica un insieme di transizioni,
– subtype indica un effetto particolare e può essere
omesso.
La durata di una transizione è definita dall’attributo
dur=“Ns”.
http://www.w3.org/TR/smil20/smiltransitions.html
36
Le animazioni
In SMIL è possibile creare delle animazioni che:
– muovono un oggetto,
– ne modificano le dimensioni,
– cambiano un colore o
– cambiano il valore di un parametro in modo
dinamico,
attraverso i tag:
– animate,
– animateMotion,
– animateColor,
– set.
37
Hyperlink
SMIL supporta link unidirezionali molto simili a quelli
offerti dal linguaggio HTML.
Di un link si definisce:
– la sorgente,
– la destinazione,
– il comportamento della sorgente e della
destinazione del link.
<par id=“text_and_video” >
<video src=“file_video” region=“video” />
<text src=“file_testo” region=“testo” />
</par>
<a href=“presentazione.smil#text_and_video”
show=“pause”>
<video src=”altro_file_video"
region=“altra_regione”/>
38
</a>
Definizione degli hyperlink
<a> contiene la sorgente del link e definisce la
destinazione nell’attributo href
<area> descrive la sorgente di un link come una
porzione di un media di forma shape e delimitata
dalle coordinate coord.
show, sourcePlaystate e sourceLevel definiscono lo
stato della sorgente.
destinationPlaystate e destinationLevel definiscono
lo stato della destinazione.
39
Come inserire un
puntatore ad un file SMIL
Una presentazione in cui il codice SMIL è integrato in
un file HTML, si collega creando un normale link ad
una pagina HTML.
Un file SMIL può essere messo a disposizione su un
web server. Il Client accede al file tramite il browser:
http://webserver.com/path/file.smi
La presenza del Player sul Client consente la visione
della presentazione SMIL.
40
Uno schema per
introdurre SMIL in HTML
<html xmlns:t ="urn:schemas-microsoft-com:time" >
<?import namespace="t"
implementation="#default#time2">
<head>
<title>…</title>
<style>
.time {behavior: url(#default#time2);}
p { font-family:arial; color:black; fontsize:10pt }
div { font-family:arial black; font-size:18pt;
color:black }
</style>
</head>
<body>
…
</body>
</html>
41
SMIL per l’E-learning
Regione slide
Anteprima slide
Regione documenti
Regione video
42
Perché usare SMIL?
Perché è supportato da organi di standardizzazione e
dal mondo “industriale” (Wide Web Consortium
(W3C), RealNetworks, IBM, Intel, Macromedia,
Microsoft, Netscape/AOL, Nokia, Ericsson, Canon,
Panasonic, Philips, ...)
Perché è un formato aperto e gratuito.
Perché è possibile scrivere presentazioni
multimediali in SMIL utilizzando un semplice editor di
testo.
Perché è semplice.
Perché la sua impostazione modulare consente di
utilizzarlo senza conoscerne tutti i dettagli
....
43
Riferimenti
Specifiche SMIL:
– http://www.w3.org/AudioVideo/
SMIL Tutorial:
–
http://www.smilguide.com/guide/tutorial/learningto-smil
– http://www.html.it/smil/
– http://www.w3schools.com/smil/default.asp
Altre fonti:
– http://www.xsmiles.org/
– http://smw.internet.com/smil/smilhome.html
– http://www.oratrix.com
44