1 / 44

SMIL Synchronized Multimedia Integration Language Ciro Autiero

SMIL Synchronized Multimedia Integration Language Ciro Autiero. 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.

dot
Download Presentation

SMIL Synchronized Multimedia Integration Language Ciro Autiero

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. SMIL Synchronized Multimedia Integration Language Ciro Autiero

  2. 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.

  3. 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.

  4. 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…

  5. 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

  6. 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.

  7. 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

  8. 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.

  9. SMIL è un linguaggio modulare • SMIL 2.1 è diviso in 10 aree funzionali. Ogni area funzionale è poi suddivisa in moduli: • Timing • Time Manipulations • Animation • Content Control • Layout • Linking • Media Objects • Metainformation • Structure • Transitions

  10. 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

  11. 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.html • RealSystem G2: http://www.real.com • ......

  12. 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.

  13. 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.

  14. 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).

  15. 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à.

  16. Evoluzione dei formati SMIL per Terminali Mobili

  17. 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)

  18. Struttura di un documento SMIL <smil> <head> <!-- informazioni sul contenuto --> <layout> <!-- definizione delle regioni --> </layout> </head> <body> <!-- sincronizzazione degli elementi della presentazione--> </body> </smil>

  19. 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.

  20. 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">

  21. 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/Language"> <head> <meta name="title“ content=“SMIL Introduction"/> <meta name="author" content=“Autiero Ciro"/> <layout> </layout> </head> <body> <video src=“partita.mpg"/> </body> </smil>

  22. 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.

  23. 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>

  24. 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>.

  25. Top Left Heigth Width Posizionamento delle regioni Origine • 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.

  26. Un esempio di definizione di regione <smil xmlns="http://www.w3.org/2005/SMIL21/Language"> <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> </smil>

  27. 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

  28. 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.

  29. 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>

  30. 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>

  31. 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>

  32. 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>

  33. 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>

  34. 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…).

  35. 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>

  36. 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/smil-transitions.html

  37. 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.

  38. 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”/> </a>

  39. 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.

  40. 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.

  41. Uno schema per introdurre SMIL in HTML <htmlxmlns: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; font-size:10pt } div { font-family:arial black; font-size:18pt; color:black } </style> </head> <body> … </body> </html>

  42. Regione slide Anteprima slide Regione documenti Regione video SMIL per l’E-learning

  43. 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 • ....

  44. Riferimenti • Specifiche SMIL: – http://www.w3.org/AudioVideo/ • SMIL Tutorial: – http://www.smilguide.com/guide/tutorial/learning-to-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

More Related