SMIL

1

• SMIL
• Synchronized Multimedia Integration Language
• Ciro Autiero

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

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/do
  wnload/
• 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.htm
  l
• 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 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
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
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
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
Struttura di un documento SMIL

• ltsmilgt
• ltheadgt
• lt!-- informazioni sul contenuto --gt
• ltlayoutgt
• lt!-- definizione delle regioni --gt
• lt/layoutgt
• lt/headgt
• ltbodygt
• lt!-- sincronizzazione degli
• elementi della presentazione--gt
• lt/bodygt
• lt/smilgt

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
Versione e regole del Documento

• Come ogni documento XML anche i documenti SMIL
  iniziano con una dichiarazione che ne definisce
  la versione
• lt?xml version"1.0"?gt
• 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
• lt!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.1//EN"
  "http//www.w3.org/2005/SMIL21/SMIL21.dtd"gt

21
Un primo esempio di documento SMIL

• lt?xml version"1.0"?gt
• lt!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.1//EN
  "http//www.w3.org/2005/SMIL21/SMIL21.dtd"gt
• ltsmil xmlns"http//www.w3.org/2005/SMIL21/Languag
  e"gt
• ltheadgt
• ltmeta name"title contentSMIL
  Introduction"/gt
• ltmeta name"author" contentAutiero Ciro"/gt
• ltlayoutgt
• lt/layoutgt
• lt/headgt
• ltbodygt
• ltvideo srcpartita.mpg"/gt
• lt/bodygt
• lt/smilgt

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

• ltheadgt
• ltmeta name"title" content"" /gt
• ltmeta name"author" content"" /gt
• ltmeta name"abstract" content"..." /gt
• ltlayoutgt
• ltroot-layout width"500" height"400
• backgroundColor"white" /gt
• ltregion id"region" /gt
• .
• lt/layoutgt
• lttransition id"upSlide" type"slideWipe"
• subtype"fromBottom" /gt
• lt/headgt

24
Layout

• Il tag layout definisce la disposizione spaziale
  della presentazione è possibile definirvi
• finestre,
• regioni,
• punti di ancoraggio.
• La finestra principale è definita come
  ltroot-layoutgt.
• Le altre finestre sono definite come lttopLayoutgt.

25
Posizionamento delle regioni
Origine

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

26
Un esempio di definizione di regione

• ltsmil xmlns"http//www.w3.org/2005/SMIL21/Languag
  e"gt
• ltheadgt
• ltlayoutgt
• ltroot-layout width 500 height400
  background-colorwhite/gt
• ltregion id icona left25 top50
  width450 height 313 /gt
• lt/layoutgt
• lt/headgt
• ltbodygt
• ltseq dur"10s"gt
• ltimg srcchat.jpg altImmagine
  regionicona /gt
• lt/seqgt
• lt/bodygt
• lt/smilgt

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
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
La sezione Body codice

• ltbodygt
• ltseqgt
• ltpar dur"0012.0" gt
• ltimg src"pour.gif" transIn"rightSlide
  region"rp" fill"hold" /gt
• ltaudio src"audio/guitar.rm" dur"10s"/gt
• lt/pargt
• ltpargt
• ltimg src"heating.gif" transIn"rightSlide"
  region"vid" /gt
• ltaudio src"audio/piano.rm" begin"2s"/gt
• lt/pargt
• lt/seqgt
• lt/bodygt

30
Riproduzione parallela

• Il tag ltpargt permette la riproduzione parallela
  di più oggetti.
• Tramite degli attributi è possibile cambiare
  linizio e la fine della riproduzione dei media.
• ltpargt lt!-- questi 2 file vengono eseguiti in
  parallelo --gt
• ltaudio srccolonna_sonora /gt
• ltaudio srccommento_parlato /gt
• lt/pargt
• ltpargt lt!-- questi due file si si sovrappongono
  per 5 secondi --gt
• ltaudio srccolonna_sonora dur15s /gt
• ltaudio srccommento_parlato begin10s/gt
• lt/pargt

31
Riproduzione in sequenza

• Il tag ltseqgt permette la riproduzione sequenziale
  di più oggetti.
• La sincronizzazione si realizza annidando i tag
  ltseqgt e ltpargt.
• ltseqgt lt!-- questi 2 file vengono eseguiti in
  sequenza --gt
• ltaudio srcprimo_comento /gt
• ltaudio srcsecondo_commento /gt
• lt/seqgt

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
  
• ltbodygt
• ltseqgt
• ltimg srcchat.jpg"
• begin"4s"
• end"10s"
• dur"15s" region"icona" /gt
• lt/seqgt
• lt/bodygt

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
• ltpar endbottone.click commento_parlato.endgt
• ltaudio srccolonna_sonora.wav idmusica/gt
• ltaudio srccommento_parlato.wav
  idcommento/gt
• ltimg srcstop.jpg idbottone/gt
• lt/pargt

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
  lttransitiongt nella sezione head e utilizzate
  nella definizione dei media. In questo modo
  possono essere riutilizzate.
• ltheadgt
• lttransition idtrans_1" dur"1s" type"fade"
  /gt
• lt/headgt
• ...
• ltbodygt
• ltpar dur"5s" gt
• ltimg idimg_1" transIntrans_1" /gt
• ltimg idimg_2" transOuttrans_1" /gt
• lt/pargt
• lt/bodygt

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 durNs.
• 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.
• ltpar idtext_and_video gt
• ltvideo srcfile_video regionvideo /gt
• lttext srcfile_testo regiontesto /gt
• lt/pargt
• lta hrefpresentazione.smiltext_and_video
  showpausegt
• ltvideo srcaltro_file_video"
  regionaltra_regione/gt
• lt/agt

39
Definizione degli hyperlink

• ltagt contiene la sorgente del link e definisce la
  destinazione nellattributo href
• ltareagt 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

• lthtml xmlnst "urnschemas-microsoft-comtime" gt
• lt?import namespace"t" implementation"defaultt
  ime2"gt
• ltheadgt
• lttitlegtlt/titlegt
• ltstylegt
• .time behavior url(defaulttime2)
• p font-familyarial colorblack
  font-size10pt
• div font-familyarial black
  font-size18pt colorblack
• lt/stylegt
• lt/headgt
• ltbodygt
• lt/bodygt
• lt/htmlgt

42
SMIL per lE-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/learnin
  g-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