1 SMIL Synchronized Multimedia Integration Language Ciro Autiero.

Presentazione sul tema: "1 SMIL Synchronized Multimedia Integration Language Ciro Autiero."— Transcript della presentazione:

1 1 SMIL Synchronized Multimedia Integration Language Ciro Autiero

2 2 Cosa è SMIL SMIL (si pronuncia smile) è labbreviazione di Synchronized Multimedia Integration Language è un linguaggio per lintegrazione e la sincronizzazione di diversi files multimediali. Permette di creare documenti multimediali in cui: – diversi oggetti distribuiti nel web sono sincronizzati tra loro, – lutente può interagire con essi in modo coerente, – il layout è definito in modo preciso, – lintegrazione è realizzata attraverso un formato testuale di markup, in particolare un linguaggio XML.

3 3 Cosa non è SMIL? Non è un nuovo protocollo per la trasmissione di media. Non è uno strumento di authoring di media. Non è unalternativa a Flash anche se permette la formulazione di animazioni.

4 4 SMIL vs HTML HTML permette lintegrazione 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 lutilizzo di media continui: – Sincronizzazione, – Interazione…

5 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 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 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 laltro, modificare la riproduzione on-the-fly sulla base di alcuni eventi scatenati dallutente

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

10 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 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.ht ml RealSystem G2: http://www.real.com......

12 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 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 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 lobiettivo di mantenere al più alto livello possibile linteroperabilità del servizio alcuni protagonisti del mondo delle telecomunicazioni (CMG Wireless Data Solutions, Comverse, Logica, Motorola, Nokia, Siemens e Sony Ericsson) hanno creato lMMS CONFORMANCE DOCUMENT, consolidato sotto lOMA (Open Mobile Alliance).

15 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. – Contenuto del messaggio multimediale. – Elementi ed attributi del linguaggio di presentazione. – Elementi ed attributi del linguaggio di presentazione. – Formato dei contenuti multimediali. – Formato dei contenuti multimediali. – Abbassamento del livello di capacità. – Abbassamento del livello di capacità.

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

17 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 landamento del tempo. Alcuni esempi: – GRiNS – RealSlideshow – LimSee2 (open source)

18 18 Struttura di un documento SMIL <smil><head> <layout> </layout></head><body> <!-- sincronizzazione degli elementi della presentazione--> </body></smil>

19 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 nellordine 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 20 Versione e regole del Documento Come ogni documento XML anche i documenti SMIL iniziano con una dichiarazione che ne definisce la versione: 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:

21 21 Un primo esempio di documento SMIL <head> <layout></layout></head><body> </body></smil>

22 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 23 La sezione Head: codice <head> <root-layout width="500" height="400 backgroundColor="white" /> ….</layout> <transition id="upSlide" type="slideWipe" subtype="fromBottom" /> </head>

24 24 Layout Il tag layout definisce la disposizione spaziale della presentazione: è possibile definirvi: – finestre, – regioni, – punti di ancoraggio. La finestra principale è definita come. Le altre finestre sono definite come.

25 25 Posizionamento delle regioni Le regioni sono porzioni dello schermo entro cui inserire i media della presentazione. Vanno definite allinterno di una finestra o di unaltra regione. posizionamento posizionamento volume volume Si considera come origine langolo superiore sinistro della finestra principale, e si calcola la distanza in numero di pixel. Left Top Heigth Width Origine

26 26 Un esempio di definizione di regione <layout> </layout> </seq> </smil>

27 27 Attributi per il layout region Id Tag per denire unarea 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 dallorigine 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 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 lutente, le animazioni definite nella presentazione.

29 29 La sezione Body: codice <body><seq> </par><par> </par></seq></body>

30 30 Riproduzione parallela Il tag permette la riproduzione parallela di più oggetti. Tramite degli attributi è possibile cambiare linizio e la fine della riproduzione dei media. </par> </par>

31 31 Riproduzione in sequenza Il tag permette la riproduzione sequenziale di più oggetti. La sincronizzazione si realizza annidando i tag e. </seq>

32 32 Attributi di par e seq begin specifica l'esatto inizio temporale di un elemento dur determina la durata temporale dellelemento repeat indica il numero di volte per cui lelemento deve essere riprodotto end specifica l'esatta fine temporale di un elemento <body> <img src=chat.jpg" <img src=chat.jpg"begin="4s"end="10s" dur="15s" region="icona" /> </body>

33 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: – lid delloggetto che lo ha subito +. + levento stesso. Si possono combinare gli eventi: </par>

34 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 35 Definizione delle transizioni Sono definite in due modi: con il tag nella sezione head e utilizzate nella definizione dei media. In questo modo possono essere riutilizzate. <head> </head>...<body> </par></body>

36 36 Tipo di transizione Leffetto 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 dallattributo dur=Ns. http://www.w3.org/TR/smil20/smil- transitions.html

37 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 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> </a>

39 39 Definizione degli hyperlink contiene la sorgente del link e definisce la destinazione nellattributo href contiene la sorgente del link e definisce la destinazione nellattributo href descrive la sorgente di un link come una porzione di un media di forma shape e delimitata dalle coordinate coord. 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 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 41 Uno schema per introdurre SMIL in HTML <head><title>…</title><style>.time {behavior: url(#default#time2);}.time {behavior: url(#default#time2);} p { font-family:arial; color:black; font- size:10pt } p { font-family:arial; color:black; font- size:10pt } div { font-family:arial black; font-size:18pt; color:black } div { font-family:arial black; font-size:18pt; color:black }</style></head><body>…</body></html>

42 42 SMIL per lE-learning Regione video Anteprima slide Regione slide Regione documenti

43 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 44 Riferimenti Specifiche SMIL: – http://www.w3.org/AudioVideo/ http://www.w3.org/AudioVideo/ SMIL Tutorial: – http://www.smilguide.com/guide/tutorial/learning- to-smil http://www.smilguide.com/guide/tutorial/learning- to-smil http://www.smilguide.com/guide/tutorial/learning- to-smil – http://www.html.it/smil/ http://www.html.it/smil/ – http://www.w3schools.com/smil/default.asp http://www.w3schools.com/smil/default.asp Altre fonti: – http://www.xsmiles.org/ http://www.xsmiles.org/ – http://smw.internet.com/smil/smilhome.html http://smw.internet.com/smil/smilhome.html – http://www.oratrix.com http://www.oratrix.com