Lucidi a cura di Marco Roccetti Paola Salomoni Stefano Ferretti SMIL. Stefano Cacciaguerra Sistemi Multimediali AA

Transcript

1 Lucidi a cura di Marco Roccetti Paola Salomoni Stefano Ferretti SMIL Stefano Cacciaguerra

2 2 HTML: tempo e spazio HTML non gestisce l occupazione della pagina dal punto di vista di: tempo: non esiste un sistema di coordinate temporali (si può provare a ovviare con script Javascript). spazio: non esiste un sistema di coordinate spaziale che consenta di collocare gli oggetti nella pagina (si può fare qualche triste tentativo con le tabelle)

3 3 Intervalli di tempo I media continui (audio e video) sono caratterizzati dall utilizzare un intervallo di tempo [t i, t f ]. Anche testo e immagini possono essere caratterizzati da un intervallo [t i, t f ], se la loro permanenza nella finestra è prevista in un certo periodo. VIDEO AUDIO FOTO

4 4 Sincronizzazione In presenza di più file multimediali diventa quindi importante la fase di sincronizzazione: ordina temporalmente i file e definisce la regia della pagina AUDIO FOTO VIDEO

5 5 SMIL SMIL (Synchronized Multimedia Integration Language) è linguaggio di integrazione e sincronizzazione per i file multimediali che consente di gestire tempo e spazio E stato sviluppato dal W3C e rilasciato: Nel 1998, la versione 1.0 (REC-smil ). Nel 2001 la versione 2.0 (REC-smil ).

6 6 SMIL: sintassi SMIL è: XML-based (i tag devono essere chiusi) e quindi. case-sensitive (i tag vanno scritti in minuscolo). Un documento SMIL: è contenuto tra i tag <smil> e </smil> è composto da: intestazione <head> che contiene le definizioni e le metainformazioni corpo <body> che contiene i tag di sincronizzazione dei media

7 7 Applicazioni Possibili applicazioni: Slideshow Education Advertisement Internet TV Corporate communication Product information User s Guide Net meeting

8 8 SMIL: esempio <smil> <head>  <layout>  <layout> </head> <body>  </body> </smil>

9 9 SMIL Sostanzialmente: L header definisce: Aree spaziali in cui è divisa la presentazioni (regioni). Tag Meta. Il body definisce: I media contenuti nella presentazione. La sincronizzazione tra questi media.

10 10 Meta tag Sono simili ai meta tag di HTML ma devono rispettare la sintassi di terminazione di XML, che in questo caso è resa dalla / (forward slash) finale. <meta name="title" content= lezione SMIL" /> <meta name="author" content= Paola" /> <meta name="copyright" content= SM2002" />

11 11 Layout Nell'header viene definito il layout per la disposizione degli elementi, usando il tag <layout></layout> Il layout è lo spazio grafico nel quale verranno sincronizzati i dati multimediali All interno del layout vanno definiti: un root-layout che definisce lo sfondo, le region in cui saranno contenuti gli elementi multimediali.

12 12 Root-layout Gli attributi di principali di <rootlayout> sono height (altezza) e width (larghezza): <layout> <root-layout width=400 height=200 background-color="white" /> </layout>

13 13 Coordinate All interno del layout vanno inseriti gli elementi multimediali specificando la posizione attraverso coordinate cartesiane le coordinate devono essere calcolate a partire dall angolo in alto a sinistra 0 0 X Y

14 14 Region <region> è il tag che posiziona e definisce gli elementi multimediali. Attributi fondamentali di <region> sono: id: specifica un identificatore univoco per la region. left: coordinata X top: coordinata Y width: larghezza (dello spazio occupato) height: altezza (dello spazio occupato)

15 15 Region <region id= icona-smile" left= 50" top= 40" width="32" height="32" /> oppure <region id= icona-smile" left= 30%" top= 25%" width="32" height="32" />

16 16 Region Notare che la regione definita con <region> indica solo uno spazio, identificato da id ma non il reale contenuto dello spazio. Gli spazi possono anche essere sovrapposti. Per farlo occorre associare un file (nel nostro caso una immagine) attraverso un apposito tag (<img>) nel body.

17 17 Associazione regione file <smil> <head> <layout> <root-layout width="300" height="200"/> <region id="icona_smile" left="50" top="40" width="32" height="32" /> </layout> </head> <body> <img src= smile32.gif" region="icona_smile" /> </body> </smil>

18 18 Z-index Se le regioni si sovrappongono deve essere possibile definire un ordine in modo da capire quale sovrascrive le altre. Questo ordine è definito dall attributo z- index. La regione con z-index maggiore sovrascrive le altre

19 19 Z-indez <smil> <head> <layout> <root-layout width="300" height="200" /> <region id="region_1" left="50" top="50 width="150" height="125" z-index="2"/> <region id="region_2" left="25" top="25" width="100" height="100" z-index="1"/> /layout> </head> <body> <text src="text1.txt" region="region_1" /> <text src="text2.txt" region="region_2" /> </body> </smil>

20 20 Tag multimediali Alla <region> possono essere associati diversi tipi di file multimediali: immagini (<img>) testo (<text>) audio (<audio>) video (<video>) In numero e il tipo di file supportati dipendono dal player.

21 21 Tag multimediali

22 22 Attributi I media tag possono avere i seguenti attributi: alt: specifica il testo alternativo da visualizzare mentre viene caricato il media file. title: specifica un titolo al media. abstract: inserisce informazioni di carattere generale riguardo all'elemento. author: definisce il nome dell'autore.

23 23 Fit Quando il media file non riempie esattamente l area definita da <region> si può usare l attributo fit per aggiustare le dimensioni. <region id="region_1" left="8" top="10" width="116" height="81 backgroundcolor="white" fit="fill" />

24 24 Fit Il tag fit può assumere diversi valori: fill: riempie l area distorcendo meet: riempie parte dell area senza distorsioni slice: riempie tutta l area senza distorsioni scroll: (se necessario) mette le barre di scorrimento

25 25 Fit

26 26 Spazio e tempo A questo punto abbiamo introdotto tutti i principali tag per la gestione dello spazio. Sui singoli tag dei media file è possibile aggiungere una temporizzazione mediante gli attributi: dur: che indica la durata del media begin: che indica il momento di inizio end che indica il momento di fine

27 27 Tag dur e begin <img src= smile32.gif" region= icona-smile" dur= 5s" begin= 3s" /> 0 sec.

28 28 Sincronizzazione di base I tag di base per la sincronizzazione sono: <par> per parallelizzare due media Smile! 0 sec. <seq> per sequenzializzare due media Smile! sec.

29 29 Esempio di par <body>  <par> <img src="smile32.gif" region="icona-smile" dur= 4s" /> <text src="smile.txt" region="text-smile dur= 4s" /> </par> </body>

30 30 Esempio di seq <body>  <seq> <img src="smile32.gif" region="icona-smile" dur= 4s" /> <text src="smile.txt" region="text-smile dur= 3s" begin="1s" /> </seq> </body>

31 31 Sincronizzazione avanzata Per il momento i costrutti di sincronizzazione sono molto semplici e non consentono di descrivere situazioni del tipo inizia il media 2 dopo 4 secondi che il media 1 è iniziato. Per costruire questo tipo di sincronizzazioni si usa il costrutto begin (attributo del media tag)

32 32 Esempio di begin  <mediatag begin="id(specifiedid)(begin)" /> <mediatag begin="id(m1)(begin)" />  <mediatag begin="id(specifiedid)(3s)" /> <mediatag begin="id(m1)(3s)" />  <mediatag begin="id(m1)(end)" />

33 33 Switch SMIL consente di definire contesti multimediali diversi in funzione di diverse situazioni. Esempi significativi: la dimensione dello schermo (l uso assoluto di coordinate può avere forti limiti) la lingua in cui viene distribuito l audio (stesso, video, commenti in lingua)

34 34 Switch La definizione del contesto si fa attraverso il tag <switch> Ogni test è effettuato solo se il test precedente è fallito (se un test ha successo i successivi non vengono eseguiti) <switch>    </switch>

35 35 Esempio di switch <body> <par> <video src= movie.avi region= movie > <switch> <text src= eng.txt" region= testo dur= 4s" system-language= en /> <text src= ita.txt" region= testo dur= 4s" system-language= it /> </switch> </par> </body>

36 36 Switch Altre caratteristiche del tag switch: i tag switch possono essere annidati uno nell altro per rendere le condizioni multiple (in AND logico) possono essere testate differenti caratteristiche del mediatag (vedi lucido successivo

37 37 Switch Possono essere testati con switch: la lingua (anche per insiemi) <MEDIATAG system-language="fr,en,it"> il biterate (un intero) <MEDIATAG system-bitrate="14000"> la dimensione dello schermo (dpi>dpi) <MEDIATAG system-screen-size="800x600"> il numero di colori (bits/pixel) <MEDIATAG system-screen-depth="4"> il tipo (mime) del file < MEDIATAG type="audio/x-auz">

38 38 SMIL versioni La versione 1.0 di SMIL risale al 1998 e ha avuto notevole successo, anche se a volte trasparentemente all utente. Era supportata da Real Player e dal plug in di Quicktime. Dalla diffusione commerciale sono venuti molti suggerimenti di miglioramento interessanti che il W3 ha concretizzato nella nuova versione (2001).

39 39 SMIL 1.0 SMIL player: Apple QuickTime 4.1 RealNetworks Realplayer 7 Oratrix Grins (SMIL1.0) applet java e plugin ad hoc di vari produttori anche Microsoft Internet Explorer 5.5 supporta parte di SMIL SMIL editor (per costruire il file SMIL con interfaccia GUI a 4 dimensioni)

40 40 Versione 2.0 Dai suggerimenti scaturiti è nata una prima proposta di modifica (SMIL Boston) che è stata stabilizzata nella versione 2.0 del linguaggio (2001). Alcuni obiettivi: Estendere le funzionalità di SMIL 1.0 (supporto alle animazioni, transizioni, layout più complessi) Mantenere un formato XML based. Modularizzare il linguaggio.

41 41 Moduli Ogni modulo SMIL raccoglie un insieme di funzionalità del linguaggio specifiche. In particolare (essendo SMIL definito con XML) ogni modulo definisce un sottoinsieme degli elementi di SMIL. Ogni player può supportare solo un sottoinsieme dei moduli complessivi in modo da alleggerire le specifiche o adattarsi a specifiche funzionalità.

42 42 Moduli I 45 moduli sono divisi 10 aree funzionali: Timing Time Manipulations Animation Content Control Layout Linking Media Objects Metainformation Structure Transitions

43 43 Timing Nell area funzionale Timing ci sono 19 moduli che consentono la gestione basilare della sincronizzazione (par e seq, begin e end, dur, ecc). Rispetto a SMIL 1.0 è stato definito tra gli altri il tag excl (exclusive) che consente di definire in modo interattivo possibili alternative tra diversi oggetti multimediali in base a un attributo discrimina quale verrà attivata.

44 44 Excl excl può servire ad esempio per realizzare: playlist interattive : diversi media sono disponibili a scelta dell utente, che ne sceglie uno solo alla volta. descrizioni audio : Descrizioni registrate delle scene di un film possono essere forzate dal pause del filmato. Sottotitoli interattivi; più lingue sono messe a disposizione e vengono cambiate interattivamente.

45 45 Time manipulation L area Time manipulation consiste di un solo modulo che consente manipolazioni avanzate sulla presentazione temporale dei media: accellerate e decelerate: aumenta e diminuisce la velocità della presentazione. autoreverse (presenta prima in avanti e poi all indietro). speed: controlla la velocità di un particolare elemento.

46 46 Animations L area funzionale Animations è composta da due moduli che si occupano della gestione delle animazioni: BasicAnimation e SplineAnimation. Ogni animazione è una funzione che modifica nel tempo un certo elemento o un certo attributo facendo mutare lo stato o il valore.

47 47 Content Control L area funzionale Content Control è composto da 4 moduli dedicati al controllo della validità degli elementi multimediali inseriti. I tag di questi moduli consentono di scrivere presentazioni che non si bloccano in presenza di media non visualizzabili. Fa parte di questa area funzionale anche il tag switch (che a differenza di SMIL 1.0 consente di scegliere anche in base ad attributi definiti dall utente),

48 48 Layout Fanno parte dell area funzionale layout 4 moduli che consentono la gestione dei layout. Le principali differenze con SMIL 1.0 sono: la possibilità di utilizzare le regioni in modo gerarchico, definendo regioni dentro regioni La possibilità di scegliere la posizione dei media object all interno delle regioni.

49 49 Linking L area funzionale Linking contiene i moduli che consentono di specificare link ipertestuali: Il supporto ai link è dato in modo compatibile con HTML Combinando link e excl si possono costruire presentazioni condizionali, il cui contenuto varia a seconda dei click dell utente.

50 50 Media Object L area funzionale Media Object è costituita da sei moduli che specificano elementi ed attributi che introducono le clip multimediali. Rispetto a SMIL 1.0: Nuovi attributi Elemento brush che può essere usato per colorare (anche con un disegno) l are di una region.

51 51 Meta Information L area funzionale Metainformation è composta da un solo modulo che descrive le modalità di definizione dei meta tag. Rispetto a SMIL 1.0, introduce la possibilità di usare dichiarazioni RDF (Resource Description Framework) un linguaggio XML-based per descrivere le risorse Internet.

52 52 Structure L area funzionale structure è composta da tre moduli uno per ciascuno dei tre tag strutturali di SMIL: <smil> <head> <body> E assolutamente identico a quanto supportato da SMIL 1.0

53 53 Transition L area funzionale Transition consente di definire transizioni tra oggetti multimediali differenti: Transizioni video, che consentano a una immagine di trasformarsi in un altra e a un video di mutare in un altro Transizioni audio: che consentono di sfumare una clip audio in un altra.

54 54 Profili SMIL 2.0 definisce due profili: SMIL 2.0 Basic Profile: contiene le funzionalità minime che devono essere fornite ad un player stand alone. Sono quelle specificate da 10 moduli essenziali. SMIL 2.0 Full Profile: contiene tutte le funzionalità di SMIL 2.0 ovvero tutti i tag specificati nei 45 moduli

55 55 Riferimenti W3C - Synchronized Multimedia Integration Language (SMIL) 2.0 Specification