11

SMILSMILSynchronized Multimedia Synchronized Multimedia

Integration LanguageIntegration Language

Ciro AutieroCiro Autiero

22

Cosa è SMILCosa è SMIL

SMIL SMIL (si pronuncia “smile”) è l’abbreviazione di(si pronuncia “smile”) è l’abbreviazione di Synchronized Multimedia Integration LanguageSynchronized Multimedia Integration Language è un è un linguaggio per l’integrazione e la sincronizzazione di linguaggio per l’integrazione e la sincronizzazione di diversi files multimediali.diversi files multimediali.

Permette di creare documenti multimediali in cui:Permette di creare documenti multimediali in cui:

– – diversi oggetti distribuiti nel web sono sincronizzati diversi oggetti distribuiti nel web sono sincronizzati tra loro,tra loro,

– – l’utente può interagire con essi in modo coerente,l’utente può interagire con essi in modo coerente,

– – il layout è definito in modo preciso,il layout è definito in modo preciso,

– – l’integrazione è realizzata attraverso un formato l’integrazione è realizzata attraverso un formato testuale di markup, in particolare un linguaggio XML.testuale di markup, in particolare un linguaggio XML.

33

Cosa non è SMIL?Cosa non è SMIL?

Non è un nuovo protocollo per la trasmissione di Non è un nuovo protocollo per la trasmissione di media.media.

Non è uno strumento di authoring di media.Non è uno strumento di authoring di media.

Non è un’alternativa a Flash anche se permette la Non è un’alternativa a Flash anche se permette la formulazione di animazioni.formulazione di animazioni.

44

SMIL vs HTMLSMIL vs HTML

HTML permette l’integrazione di diversi oggetti in HTML permette l’integrazione di diversi oggetti in una pagina web.una pagina web.

Come HTML, SMIL non permette la creazione di Come HTML, SMIL non permette la creazione di nessun tipo di media (ma diversamente da HTML, nessun tipo di media (ma diversamente da HTML, anche i file di testo vengono creati esternamente).anche i file di testo vengono creati esternamente).

Diversamente ad HTML, gestisce in modo completo Diversamente ad HTML, gestisce in modo completo l’utilizzo di media continui:l’utilizzo di media continui:

– – Sincronizzazione,Sincronizzazione,

– – Interazione…Interazione…

55

SMIL - CronologiaSMIL - Cronologia

15 Giugno 199815 Giugno 1998

Vengono pubblicate le specifiche di Vengono pubblicate le specifiche di SMIL 1.0SMIL 1.0 come come W3C recommendationW3C recommendation

7 Agosto 20017 Agosto 2001

Le specifiche di Le specifiche di SMIL 2.0SMIL 2.0 diventano una W3C diventano una W3C recommendation.recommendation.

13 Dicembre 200513 Dicembre 2005

Le specifiche di Le specifiche di SMIL 2.1SMIL 2.1 diventano una W3C diventano una W3C recommendationrecommendation

66

SMIL 1.0SMIL 1.0

disporre oggetti multimediali in punti precisi dello disporre oggetti multimediali in punti precisi dello schermo,schermo,

descrivere il comportamento temporale dei diversi descrivere il comportamento temporale dei diversi elementi di una presentazione multimediale,elementi di una presentazione multimediale,

interagire con link ad altre presentazioni o parti di interagire con link ad altre presentazioni o parti di esse.esse.

77

SMIL 2.0SMIL 2.0Modularizzazione del linguaggio,Modularizzazione del linguaggio,

Profiling (Language Profile e Basic Profile),Profiling (Language Profile e Basic Profile),

inserire animazioni nella timeline della inserire animazioni nella timeline della presentazione,presentazione,

inserire transizioni tra un oggetto e l’altro,inserire transizioni tra un oggetto e l’altro,

modificare la riproduzione “on-the-fly” sulla base di modificare la riproduzione “on-the-fly” sulla base di alcuni eventi scatenati dall’utentealcuni eventi scatenati dall’utente

88

SMIL 2.1SMIL 2.1Introduzione di feature per terminali mobili, in Introduzione di feature per terminali mobili, in particolare vengono aggiunti i profile: Mobile Profile particolare vengono aggiunti i profile: Mobile Profile e Extended Mobile Profile,e Extended Mobile Profile,

rivisti ed aggiunti moduli sulla gestione temporale rivisti ed aggiunti moduli sulla gestione temporale dei file multimediali, sulla disposizione degli oggetti dei file multimediali, sulla disposizione degli oggetti (layout) nella presentazione e sulle transizioni.(layout) nella presentazione e sulle transizioni.

99

SMIL è un linguaggio SMIL è un linguaggio modularemodulare

SMIL 2.1 è diviso in 10 aree funzionali. Ogni area SMIL 2.1 è diviso in 10 aree funzionali. Ogni area funzionale è poi suddivisa in moduli:funzionale è poi suddivisa in moduli:

1.1. TimingTiming

2.2. Time ManipulationsTime Manipulations

3.3. AnimationAnimation

4.4. Content ControlContent Control

5.5. LayoutLayout

6.6. LinkingLinking

7.7. Media ObjectsMedia Objects

8.8. MetainformationMetainformation

9.9. StructureStructure

10.10.TransitionsTransitions

1010

Player e BrowserPlayer e Browser

PlayerPlayer

Strumento per la riproduzione di media continui.Strumento per la riproduzione di media continui.

BrowserBrowser

Ha come scopo principale la navigazione tra le Ha come scopo principale la navigazione tra le pagine.pagine.

Solitamente i player si integrano come “plugins” del Solitamente i player si integrano come “plugins” del browser Webbrowser Web

1111

Player per documenti SMILPlayer per documenti SMILApple QuickTimeApple QuickTime: : http://www.apple.com/quicktime/download/http://www.apple.com/quicktime/download/

Compaq HPASCompaq HPAS: http://research.compaq.com/SRC/HPAS: http://research.compaq.com/SRC/HPAS

Oratrix GrinsOratrix Grins: http://www.oratrix.com: http://www.oratrix.com

AMBULANT (1.6)AMBULANT (1.6) Open Source SMIL Player: Open Source SMIL Player: http://www.cwi.nl/projects/Ambulant/distPlayer.htmlhttp://www.cwi.nl/projects/Ambulant/distPlayer.html

RealSystem G2RealSystem G2: http://www.real.com: http://www.real.com

............

1212

Come funzionaCome funziona

1) Il browser incontra un file "SMIL"1) Il browser incontra un file "SMIL"

2) Lo riceve…2) Lo riceve…

3) ...il browser richiama l'applicazione esterna che 3) ...il browser richiama l'applicazione esterna che si preoccuperà di...si preoccuperà di...

4) e 5) ...richiedere i vari file necessari per la 4) e 5) ...richiedere i vari file necessari per la presentazione e visualizzarla.presentazione e visualizzarla.

1313

SMIL ProfilesSMIL Profiles

Un Profile è un insieme di moduli di SMIL che Un Profile è un insieme di moduli di SMIL che consente di ottimizzare la presentazione in funzione consente di ottimizzare la presentazione in funzione delle caratteristiche del Client. delle caratteristiche del Client.

I Profiles sono pertanto tentativo di far interagire I Profiles sono pertanto tentativo di far interagire diversi player e browser:diversi player e browser:– – una presentazione deve poter essere eseguita da una presentazione deve poter essere eseguita da più player (attualmente questo non è in generale più player (attualmente questo non è in generale vero)vero)– – su dispositivi diversi → PDAs, lettori MP3, …su dispositivi diversi → PDAs, lettori MP3, …

Le specifiche SMIL 2.1 definiscono quattro Profile:Le specifiche SMIL 2.1 definiscono quattro Profile:– – Language Profile.Language Profile.– – Mobile ProfileMobile Profile..– – Extented Mobile Profile.Extented Mobile Profile.– – Basic Profile and Scalability Framework.Basic Profile and Scalability Framework.

1414

Ruolo di SMIL negli MMSRuolo di SMIL negli MMS I messaggi MMS si basano sul linguaggio di I messaggi MMS si basano sul linguaggio di programmazione SMIL che viene utilizzato per programmazione SMIL che viene utilizzato per produrre presentazioni che includono contenuti produrre presentazioni che includono contenuti multimedialimultimediali

Con l’obiettivo di mantenere al più alto livello Con l’obiettivo di mantenere al più alto livello possibile l’interoperabilità del servizio alcuni possibile l’interoperabilità del servizio alcuni protagonisti del mondo delle telecomunicazioni (CMG protagonisti del mondo delle telecomunicazioni (CMG Wireless Data Solutions, Comverse, Logica, Motorola, Wireless Data Solutions, Comverse, Logica, Motorola, Nokia, Siemens e Sony Ericsson) hanno creato l’Nokia, Siemens e Sony Ericsson) hanno creato l’MMS MMS CONFORMANCE DOCUMENTCONFORMANCE DOCUMENT, consolidato sotto l’OMA , consolidato sotto l’OMA (Open Mobile Alliance).(Open Mobile Alliance).

1515

MMS Conformance DocumentMMS Conformance DocumentObiettivoObiettivo

Unificare il più possibile il linguaggio SMIL e Unificare il più possibile il linguaggio SMIL e specificarne le caratteristiche da utilizzare anche specificarne le caratteristiche da utilizzare anche fra utenti e terminali differenti:fra utenti e terminali differenti:

– – Contenuto del messaggio multimediale.Contenuto del messaggio multimediale.

– – Elementi ed attributi del linguaggio di Elementi ed attributi del linguaggio di presentazione.presentazione.

– – Formato dei contenuti multimediali.Formato dei contenuti multimediali.

– – Abbassamento del livello di capacità.Abbassamento del livello di capacità.

1616

Evoluzione dei formati SMIL Evoluzione dei formati SMIL per Terminali Mobiliper Terminali Mobili

SMIL BasicSMIL Basic Essenzialmente basato sul Basic Profile Essenzialmente basato sul Basic Profile usato su PDA ma non per cellulari.usato su PDA ma non per cellulari.

MMS SMILMMS SMIL Il profilo è un insieme di moduli grazie ai Il profilo è un insieme di moduli grazie ai quali può essere costruita la quali può essere costruita la presentazione; per gli MMS, e di presentazione; per gli MMS, e di conseguenza per i cellulari. Definito nel conseguenza per i cellulari. Definito nel Conformance.doc.Conformance.doc.

PSS SMILPSS SMIL La versione di PSS SMIL (Packet La versione di PSS SMIL (Packet Switched Streaming Service) contiene i Switched Streaming Service) contiene i moduli di SMIL Basic Profile con alcuni moduli di SMIL Basic Profile con alcuni inserimenti.inserimenti.

3GPP standard. Sostituirà MMS SMIL.3GPP standard. Sostituirà MMS SMIL.

1717

Come creare un documento Come creare un documento SMILSMIL

Una presentazione SMIL è un semplice file di testo Una presentazione SMIL è un semplice file di testo tipicamente estensione .smi e può essere editato con tipicamente estensione .smi e può essere editato con un semplice editor di testo, ad esempio WordPad.un semplice editor di testo, ad esempio WordPad.

Per creare una presentazione SMIL l'unica cosa che Per creare una presentazione SMIL l'unica cosa che serve (oltre ai documenti multimediali che si voglio serve (oltre ai documenti multimediali che si voglio presentare) è un editor di testo.presentare) è un editor di testo.

Gli strumenti di authoring specifici offrono delle Gli strumenti di authoring specifici offrono delle interfacce grafiche che esplicitano meglio interfacce grafiche che esplicitano meglio l’andamento del tempo.l’andamento del tempo.

Alcuni esempi:Alcuni esempi:

– – GRiNSGRiNS

– – RealSlideshowRealSlideshow

– – LimSee2 (open source)LimSee2 (open source)

1818

Struttura di un documento Struttura di un documento SMILSMIL

<smil><smil><head><head>

<!-- informazioni sul contenuto --><!-- informazioni sul contenuto --><layout><layout>

<!-- definizione delle regioni --><!-- definizione delle regioni --></layout></layout>

</head></head><body><body>

<!-- sincronizzazione degli<!-- sincronizzazione deglielementi della presentazione-->elementi della presentazione-->

</body></body></smil></smil>

1919

SMIL come linguaggio XMLSMIL come linguaggio XML

SMIL è un linguaggio di markup con una struttura SMIL è un linguaggio di markup con una struttura molto simile ad un documento HTML. SMIL estende molto simile ad un documento HTML. SMIL estende XML e ne rispetta la sintassi (HTML non rispetta la XML e ne rispetta la sintassi (HTML non rispetta la sintassi XML).sintassi XML).Pertanto in un documento SMIL:Pertanto in un documento SMIL:– – i tag sono case sensitive,i tag sono case sensitive,– – deve sempre esserci un tag di chiusura,deve sempre esserci un tag di chiusura,– – i tag devono essere aperti e chiusi nell’ordine i tag devono essere aperti e chiusi nell’ordine corretto,corretto,– – gli attributi vanno riportati tra “virgolette”.gli attributi vanno riportati tra “virgolette”.

I browser HTML cercano di visualizzare al meglio I browser HTML cercano di visualizzare al meglio codice non corretto.codice non corretto.

I player SMIL non eseguono codice non corretto.I player SMIL non eseguono codice non corretto.

2020

Versione e regole del Versione e regole del DocumentoDocumento

Come ogni documento XML anche i documenti SMIL Come ogni documento XML anche i documenti SMIL iniziano con una dichiarazione che ne definisce la iniziano con una dichiarazione che ne definisce la versione:versione:

<?xml version="1.0"?><?xml version="1.0"?>

Un secondo elemento opzionale e che è spesso Un secondo elemento opzionale e che è spesso presente nei documenti XML e pertanto anche nei presente nei documenti XML e pertanto anche nei documenti SMIL è un riferimento alle regole secondo documenti SMIL è un riferimento alle regole secondo cui il documento deve essere interpretato:cui il documento deve essere interpretato:

<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.1//EN" <!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.1//EN" "http://www.w3.org/2005/SMIL21/SMIL21.dtd">"http://www.w3.org/2005/SMIL21/SMIL21.dtd">

2121

Un primo esempio di Un primo esempio di documento SMILdocumento SMIL

<?xml version="1.0"?><?xml version="1.0"?><!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.1//EN“ <!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.1//EN“

"http://www.w3.org/2005/SMIL21/SMIL21.dtd">"http://www.w3.org/2005/SMIL21/SMIL21.dtd"> <smil <smil

xmlns="http://www.w3.org/2005/SMIL21/Language">xmlns="http://www.w3.org/2005/SMIL21/Language"><head><head>

<meta name="title“ content=“SMIL <meta name="title“ content=“SMIL Introduction"/>Introduction"/>

<meta name="author" content=“Autiero Ciro"/><meta name="author" content=“Autiero Ciro"/><layout><layout></layout></layout>

</head></head><body><body>

<video src=“partita.mpg"/><video src=“partita.mpg"/></body></body>

</smil></smil>

2222

La sezione HeadLa sezione HeadContiene informazioni relative al contenuto della Contiene informazioni relative al contenuto della presentazione (tag meta)presentazione (tag meta)

la disposizione spaziale (layout) dei media:la disposizione spaziale (layout) dei media:

– – la definizione delle finestre,la definizione delle finestre,

– – la definizione delle regioni della presentazione in la definizione delle regioni della presentazione in cui sono visualizzati i mediacui sono visualizzati i media

la definizione delle transizioni utilizzate nella la definizione delle transizioni utilizzate nella presentazione.presentazione.

2323

La sezione Head: codiceLa sezione Head: codice

<head><head><meta name="title" content="…" /><meta name="title" content="…" /><meta name="author" content="…" /><meta name="author" content="…" /><meta name="abstract" content="..." /><meta name="abstract" content="..." />

<layout><layout><root-layout width="500" height="400“<root-layout width="500" height="400“

backgroundColor="white" />backgroundColor="white" /><region id="region" …/><region id="region" …/>……..

</layout></layout><transition id="upSlide" type="slideWipe"<transition id="upSlide" type="slideWipe"

subtype="fromBottom" />subtype="fromBottom" /></head></head>

2424

LayoutLayout

Il tag layout definisce la disposizione spaziale della Il tag layout definisce la disposizione spaziale della presentazione: è possibile definirvi:presentazione: è possibile definirvi:

– – finestre,finestre,

– – regioni,regioni,

– – punti di ancoraggio.punti di ancoraggio.

La finestra principale è definita come La finestra principale è definita come <root-layout><root-layout>..

Le altre finestre sono definite come Le altre finestre sono definite come <topLayout><topLayout>..

2525

Posizionamento delle regioniPosizionamento delle regioni

Le regioni sono porzioni dello schermo entro cui Le regioni sono porzioni dello schermo entro cui inserire i media della presentazione. Vanno definite inserire i media della presentazione. Vanno definite all’interno di una finestra o di un’altra regione.all’interno di una finestra o di un’altra regione.

→ → posizionamentoposizionamento→ → volumevolume

Si considera come origine l’angolo superiore sinistro Si considera come origine l’angolo superiore sinistro della finestra principale, e si calcola la distanza in della finestra principale, e si calcola la distanza in numero di pixel.numero di pixel.

Left

Top

Heigth

Width

Origine

2626

Un esempio di definizione Un esempio di definizione di regionedi regione

<smil <smil xmlns="http://www.w3.org/2005/SMIL21/Language">xmlns="http://www.w3.org/2005/SMIL21/Language">

<head><head><layout><layout> <root-layout<root-layout width= “500” height=“400” background- width= “500” height=“400” background-color=“white”/>color=“white”/> <region id=<region id= “icona” left=“25” top=“50” width=“450” “icona” left=“25” top=“50” width=“450” height= “313” height= “313” />/></layout></layout>

</head></head> <body><body>

<seq dur="10s"><seq dur="10s"> <img src=“chat.jpg” alt=“Immagine” <img src=“chat.jpg” alt=“Immagine” region=“icona”region=“icona” />/></seq></seq>

</body></body></smil></smil>

2727

Attributi per il layoutAttributi per il layout

region Idregion IdTag per denire un’area di applicazione in cui Tag per denire un’area di applicazione in cui inserire contenuti multimediali con il relativo inserire contenuti multimediali con il relativo nome assegnatonome assegnatobackgroundColorbackgroundColorcolore di sfondo di questa zona espressa in valori colore di sfondo di questa zona espressa in valori esadecimaleesadecimalebottom, left, right, topbottom, left, right, topdistanze espresse in pixel dall’originedistanze espresse in pixel dall’origineheight, widthheight, widthAltezza e larghezza espressa in pixelAltezza e larghezza espressa in pixelfitfit"disegna" il file multimediale in corrispondenza "disegna" il file multimediale in corrispondenza all' altezza e alla lunghezza definita negli attributi all' altezza e alla lunghezza definita negli attributi precedenti precedenti

2828

La sezione BodyLa sezione Body

Contiene la descrizione dei contenuti della Contiene la descrizione dei contenuti della presentazione (path, regione occupata…),presentazione (path, regione occupata…),

le descrizione del comportamento temporale della le descrizione del comportamento temporale della presentazione multimediale,presentazione multimediale,

le modalità di interazione con l’utente,le modalità di interazione con l’utente,

le animazioni definite nella presentazione.le animazioni definite nella presentazione.

2929

La sezione Body: codiceLa sezione Body: codice<body><body>

<seq><seq><par<par dur="00:12.0" > dur="00:12.0" >

<img src="pour.gif" transIn="rightSlide“ <img src="pour.gif" transIn="rightSlide“ region="rp" region="rp" fill="hold" />fill="hold" />

<audio src="audio/guitar.rm" dur="10s"/><audio src="audio/guitar.rm" dur="10s"/></par></par><par><par>

<img src="heating.gif" transIn="rightSlide" <img src="heating.gif" transIn="rightSlide"

region="vid" />region="vid" /><audio src="audio/piano.rm" begin="2s"/><audio src="audio/piano.rm" begin="2s"/>

</par></par></seq></seq>

</body></body>

3030

Riproduzione parallelaRiproduzione parallelaIl tagIl tag <par><par> permette la riproduzione parallela di piùpermette la riproduzione parallela di più oggetti.oggetti.

Tramite degli attributi è possibile cambiare l’inizio e la Tramite degli attributi è possibile cambiare l’inizio e la fine della riproduzione dei media.fine della riproduzione dei media.

<par><par> <!-- questi 2 file vengono eseguiti in parallelo --> <!-- questi 2 file vengono eseguiti in parallelo -->

<audio src=“colonna_sonora” /><audio src=“colonna_sonora” />

<audio src=“commento_parlato” /><audio src=“commento_parlato” />

</par></par>

<par><par> <!-- questi due file si si sovrappongono per 5 <!-- questi due file si si sovrappongono per 5 secondi -->secondi -->

<audio src=“colonna_sonora” dur=“15s” /><audio src=“colonna_sonora” dur=“15s” />

<audio src=“commento_parlato” begin=“10s”/><audio src=“commento_parlato” begin=“10s”/>

</par></par>

3131

Riproduzione in sequenzaRiproduzione in sequenza

Il tag Il tag <seq><seq> permette la riproduzione sequenziale di permette la riproduzione sequenziale di più oggetti.più oggetti.La sincronizzazione si realizza annidando i tag La sincronizzazione si realizza annidando i tag <seq><seq> e e <par><par>..

<seq><seq> <!-- questi 2 file vengono eseguiti in <!-- questi 2 file vengono eseguiti in sequenza -->sequenza -->

<audio src=“primo_comento” /><audio src=“primo_comento” /><audio src=“secondo_commento” /><audio src=“secondo_commento” />

</seq></seq>

3232

Attributi di par e seqAttributi di par e seqbeginbeginspecifica l'esatto inizio temporale di un elementospecifica l'esatto inizio temporale di un elementodurdurdetermina la durata temporale dell’elementodetermina la durata temporale dell’elementorepeatrepeatindica il numero di volte per cui l’elemento deve essere indica il numero di volte per cui l’elemento deve essere riprodottoriprodottoendendspecifica l'esatta fine temporale di un elementospecifica l'esatta fine temporale di un elemento

<body><body> <seq><seq> <img src=“chat.jpg"<img src=“chat.jpg"

begin="4s"begin="4s"end="10s"end="10s"dur="15s"dur="15s" region="icona" /> region="icona" />

</seq></seq></body></body>

3333

EventiEventi

È possibile sincronizzare due o più oggetti sulla base È possibile sincronizzare due o più oggetti sulla base del verificarsi di un evento: per fare un riferimento ad del verificarsi di un evento: per fare un riferimento ad un evento particolare lo costruisco indicando:un evento particolare lo costruisco indicando:– – l’id dell’oggetto che lo ha subito + “.” + l’evento l’id dell’oggetto che lo ha subito + “.” + l’evento stesso.stesso.

Si possono combinare gli eventi:Si possono combinare gli eventi:

<par <par end=“bottone.click; commento_parlato.end”>end=“bottone.click; commento_parlato.end”><audio src=“colonna_sonora.wav” <audio src=“colonna_sonora.wav”

id=“musica”/>id=“musica”/><audio src=“commento_parlato.wav” <audio src=“commento_parlato.wav”

id=“commento”/>id=“commento”/><img src=“stop.jpg” id=“bottone”/><img src=“stop.jpg” id=“bottone”/>

</par></par>

3434

Le transizioniLe transizioni

Le transizioni sono filtri o effetti che rendono meno Le transizioni sono filtri o effetti che rendono meno netto il passaggio da un media ad un altro.netto il passaggio da un media ad un altro.

Un media può avere una transizione di entrata e una Un media può avere una transizione di entrata e una transizione di uscita.transizione di uscita.

Le transizioni non modificano la durata degli oggetti.Le transizioni non modificano la durata degli oggetti.

Per creare un effetto devo conoscere tre dati:Per creare un effetto devo conoscere tre dati:– – il media iniziale (sorgente o background),il media iniziale (sorgente o background),– – il media finale (destinazione),il media finale (destinazione),– – la progressione della transizione (tipo, durata…).la progressione della transizione (tipo, durata…).

3535

Definizione delle transizioni Definizione delle transizioni Sono definite in due modi: con il tag Sono definite in due modi: con il tag <transition><transition> nella nella sezione head e utilizzate nella definizione dei media. In sezione head e utilizzate nella definizione dei media. In questo modo possono essere riutilizzate.questo modo possono essere riutilizzate.

<head><head><transition<transition id=“trans_1" dur="1s" id=“trans_1" dur="1s"

type="fade" type="fade" />/></head></head>......<body><body>

<par<par dur="5s" > dur="5s" ><img id=“img_1" <img id=“img_1" transIn=“trans_1"transIn=“trans_1"

…/>…/><img id=“img_2" <img id=“img_2" transOut=“trans_1"transOut=“trans_1"

…/>…/></par></par></body></body>

3636

Tipo di transizioneTipo di transizione

L’effetto risultante dalla transizione è ottenuto L’effetto risultante dalla transizione è ottenuto combinando i valori di due attributi:combinando i valori di due attributi:

– – typetype indica un insieme di transizioni, indica un insieme di transizioni,

– – subtypesubtype indica un effetto particolare e può essere indica un effetto particolare e può essere omesso.omesso.

La durata di una transizione è definita dall’attributo La durata di una transizione è definita dall’attributo durdur=“Ns”.=“Ns”.

http://www.w3.org/TR/smil20/smil-transitions.htmlhttp://www.w3.org/TR/smil20/smil-transitions.html

3737

Le animazioniLe animazioni

In SMIL è possibile creare delle animazioni che:In SMIL è possibile creare delle animazioni che:

– – muovono un oggetto,muovono un oggetto,

– – ne modificano le dimensioni,ne modificano le dimensioni,

– – cambiano un colore ocambiano un colore o

– – cambiano il valore di un parametro in modo cambiano il valore di un parametro in modo dinamico,dinamico,

attraverso i tag:attraverso i tag:

– – animateanimate,,

– – animateMotionanimateMotion,,

– – animateColoranimateColor,,

– – setset..

3838

HyperlinkHyperlinkSMIL supporta link unidirezionali molto simili a quelli offerti dal SMIL supporta link unidirezionali molto simili a quelli offerti dal linguaggio HTML.linguaggio HTML.

Di un link si definisce:Di un link si definisce:– – la sorgente,la sorgente,– – la destinazione,la destinazione,– – il comportamento della sorgente e della destinazione del link.il comportamento della sorgente e della destinazione del link.

<par id=“text_and_video” ><par id=“text_and_video” ><video<video src=“file_video” region=“video” src=“file_video” region=“video” />/><text<text src=“file_testo” region=“testo” src=“file_testo” region=“testo” />/>

</par></par><a href=“presentazione.smil#text_and_video” <a href=“presentazione.smil#text_and_video”

show=“pause”>show=“pause”><video src=”altro_file_video" <video src=”altro_file_video"

region=“altra_regione”/>region=“altra_regione”/></a></a>

3939

Definizione degli hyperlinkDefinizione degli hyperlink

<a><a> contiene la sorgente del link e definisce la contiene la sorgente del link e definisce la destinazione nell’attributo hrefdestinazione nell’attributo href

<area><area> descrive la sorgente di un link come una descrive la sorgente di un link come una porzione di un media di forma shape e delimitata porzione di un media di forma shape e delimitata dalle coordinate coord.dalle coordinate coord.

show, sourcePlaystate e sourceLevel definiscono lo show, sourcePlaystate e sourceLevel definiscono lo stato della sorgente.stato della sorgente.

destinationPlaystate e destinationLevel definiscono destinationPlaystate e destinationLevel definiscono lo stato della destinazione.lo stato della destinazione.

4040

Come inserire un Come inserire un puntatore ad un file SMILpuntatore ad un file SMIL

Una presentazione in cui il codice SMIL è integrato in Una presentazione in cui il codice SMIL è integrato in un file HTML, si collega creando un normale link ad un file HTML, si collega creando un normale link ad una pagina HTML.una pagina HTML.

Un file SMIL può essere messo a disposizione su un Un file SMIL può essere messo a disposizione su un web server. Il Client accede al file tramite il browser:web server. Il Client accede al file tramite il browser:

http://webserver.com/path/file.smihttp://webserver.com/path/file.smi

La presenza del Player sul Client consente la visione La presenza del Player sul Client consente la visione della presentazione SMIL.della presentazione SMIL.

4141

Uno schema per Uno schema per introdurre SMIL in HTMLintrodurre SMIL in HTML

<html<html xmlns:t ="urn:schemas-microsoft-com:time" >xmlns:t ="urn:schemas-microsoft-com:time" ><?import namespace="t" <?import namespace="t" implementation="#default#time2">implementation="#default#time2"><head><head>

<title>…</title><title>…</title><style><style> .time {behavior: url(#default#time2);}.time {behavior: url(#default#time2);} p { font-family:arial; color:black; font-p { font-family:arial; color:black; font-

size:10pt }size:10pt } div { font-family:arial black; font-size:18pt; div { font-family:arial black; font-size:18pt;

color:black }color:black }</style></style>

</head></head><body><body>……</body></body>

</html></html>

4242

SMIL per l’E-learningSMIL per l’E-learning

Regione video

Anteprima slide

Regione slide

Regione documenti

4343

Perché usare SMIL?Perché usare SMIL?

Perché è supportato da organi di standardizzazione e Perché è supportato da organi di standardizzazione e dal mondo “industriale” (Wide Web Consortium dal mondo “industriale” (Wide Web Consortium (W3C), RealNetworks, IBM, Intel, Macromedia, (W3C), RealNetworks, IBM, Intel, Macromedia, Microsoft, Netscape/AOL, Nokia, Ericsson, Canon, Microsoft, Netscape/AOL, Nokia, Ericsson, Canon, Panasonic, Philips, ...)Panasonic, Philips, ...)

Perché è un formato aperto e gratuito.Perché è un formato aperto e gratuito.

Perché è possibile scrivere presentazioni Perché è possibile scrivere presentazioni multimediali in SMIL utilizzando un semplice editor multimediali in SMIL utilizzando un semplice editor di testo.di testo.

Perché è semplice.Perché è semplice.

Perché la sua impostazione modulare consente di Perché la sua impostazione modulare consente di utilizzarlo senza conoscerne tutti i dettagliutilizzarlo senza conoscerne tutti i dettagli

........

4444

RiferimentiRiferimentiSpecifiche SMIL:Specifiche SMIL:

– – http://www.w3.org/AudioVideo/http://www.w3.org/AudioVideo/

SMIL Tutorial:SMIL Tutorial:

– – http://www.smilguide.com/guide/tutorial/learning-to-smilhttp://www.smilguide.com/guide/tutorial/learning-to-smil

– – http://www.html.it/http://www.html.it/smilsmil//

– – http://www.w3schools.com/http://www.w3schools.com/smilsmil//default.aspdefault.asp

Altre fonti:Altre fonti:

– – http://www.xsmiles.org/http://www.xsmiles.org/

– – http://smw.internet.com/smil/smilhome.htmlhttp://smw.internet.com/smil/smilhome.html

– – http://www.oratrix.comhttp://www.oratrix.com