Ing. Alberto Massari alby@infomus.dist.unige.it XML Ing. Alberto Massari alby@infomus.dist.unige.it
Programma del seminario Origine di XML: SGML & HTML XML Namespaces XSLT XML & Multimedia: VRML, SVG, SMIL
Le origini di XML - SGML Tutto comincia nel 1986 con lo sviluppo di SGML, uno standard ISO (ISO 8879:1986) per la definizione formale di documenti SGML significa Standard Generalized Markup Language; le sue caratteristiche sono i “markup” ed il fatto che è “generalizzato”
Cosa sono i “markup”? I markup sono annotazioni associate al testo del documento Consentono di specificare lo scopo del testo, in modo da abilitare l’analisi del testo da parte di processi automatici I markup sono riconoscibili perché racchiusi tra parentesi acute (“<tag>”)
SGML è generalizzato SGML è un metalinguaggio Ogni documento SGML deve essere corredato da una DTD (“Document Type Definition”) che specifica quali tag sono definiti ed in che ordine possono comparire all’interno del documento
Esempio di DTD SGML <!ELEMENT pub - - (journal | supplement)+ > <!ATTLIST pub version CDATA #REQUIRED > <!ELEMENT journal - O (journal.title, sub.journal.title?,(byline | (editor+, (address? & trailer?)))*, cover?, rhr?, rhv?,(abstracts | announcements | article | case-report| contents | correction | editorials | cme | filler | index | letters | research-report | reviews | pdf-only)+)> <!ATTLIST journal ID ID #IMPLIED ISSN CDATA #REQUIRED DOCTOPIC CDATA #IMPLIED DOCSUBJ CDATA #IMPLIED >
Esempio di SGML <!DOCTYPE pub SYSTEM “pub.dtd”> <pub version=“1.0”> <journal ISSN=“0.134.xxx”> <journal.title>Journal of Medicine </journal.title> <reviews>…</reviews> </journal> <journal…
HTML HTML (HyperText Markup Language) è una applicazione SGML Le prime DTD cominciano ad essere scritte nei primi anni ’90; la RFC 1886 del Novembre 1995 codifica HTML 2.0 (non è mai esistita HTML 1.0) Sostanzialmente consente di inserire in un testo dei markup che specificano come quel testo deve essere visualizzato (bold, corsivo, font, colore….)
Esempio di HTML <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN“> <HTML><BODY> <H1>First Header</H1> <P>This is a paragraph. Technically, end tags are not required for paragraphs, although they are allowed. You can include character highlighting in a paragraph. <EM>This sentence of the paragraph is emphasized.</EM> Note that the </P> end tag has been omitted. </BODY></html>
Pregi di HTML Consente di pubblicare documenti sul Web in un formato “open” che non necessita di applicazioni specifiche (Word, PDF,…) E’ un formato di testo, e può essere indicizzato dai motori di ricerca Consente di collegare con hyperlinks testi collegati Consente di avere testo e grafica
Difetti di HTML Estendibile solo attraverso l’introduzione di nuovi tag (comprensibili solo da alcuni browser): es. frame, object La sintassi non è “pulita”: i tag sono case-insensitive, le virgolette attorno agli attributi sono opzionali, alcuni tag possono non avere il tag di chiusura E’ decisamente un linguaggio di visualizzazione
Usare HTML per visualizzare dati Supponiamo di voler pubblicare una lista di alberghi su un sito web: ad esempio, questa è una pagina di Expedia.it
Usare HTML per visualizzare dati (2) La pagina è fruibile solo da un utente umano; ad esempio, la categoria dell’albergo è indicata dalla ripetizione del tag <img> Il costo totale è indicato nella quarta colonna della tabella; non solo, il numero di colonne è variabile in funzione del numero di giorni di permanenza In conclusione, un “agente software” non potrebbe usare queste informazioni in maniera affidabile serve un HTML per i dati
XML Nel 1996 si comincia a parlare di XML (eXtensible Markup Language), e viene ratificato dal W3C nel febbraio 1998 (http://www.w3.org/TR/REC-xml/) Sostanzialmente è SGML reso usabile: viene tolta molta della flessibilità di questo linguaggio, rendendo più semplice creare parser ed applicazioni. E’ disegnato in modo da rendere facile “annotare” dati; la semantica delle annotazioni (cioè la DTD) è lasciata ad altre specifiche
Le regole di XML XML è case-sensitive Gli attributi vanno delimitati da ‘ o “ I tag vanno sempre chiusi (<tag>..</tag> oppure <tag/> se non hanno contenuto) I tag devono essere innestati correttamente (<tag><tag1></tag></tag1> non è un valido XML) La DTD non è più obbligatoria, ma opzionale I tipi di dati vengono ridotti drasticamente (praticamente resta il tipo stringa, gli ID, i riferimenti ad ID)
Esempio di XML <?xml version=“1.0” encoding=“utf-8”?> <!-- Questo è un commento --> <books> <book> <title xml:lang=“en”>The humane interface</title> <subtitle>New directions…</subtitle> <author>Jef Raskin</author> <publisher>Addison-Wesley</publisher> <abstract> <![CDATA[This unique guide…]]> </abstract> </books>
I componenti di XML I tag racchiusi tra <? e ?> sono processing instructions; contengono direttive indirizzate all’applicazione che legge il file XML. La direttiva “xml” è l’unica codificata nelle specifiche e serve per indicare la versione di XML usata dal documento, e la codifica dei caratteri (utf-8 è una versione compatta di Unicode; altre codifiche usate sono “latin-1”, “shift-jis”, etc…) Le direttive che la applicazione non conosce vanno ignorate
Codifica dei caratteri Gli uomini vedono dei simboli grafici e leggono delle parole Il computer vede dei numeri La relazione tra un numero ed un simbolo grafico e’ stabilita da una codifica La piu’ nota e’ la codifica ASCII (1963), che usa numeri a 7 bit (da 0 a 127) per rappresentare l’alfabeto occidentale, i numeri arabi e la punteggiatura piu’ comune
La tabella dei codici ASCII
E gli altri? La codifica ASCII va bene per la lingua inglese, ma ignora le lettere accentate italiane, i caratteri tedeschi come ß e ë, quelli nordici come Ø, il greco, il russo, l’ebraico, il giapponese, l’arabo…. La prima soluzione fu di inventare delle “code-page” in cui una sequenza di numeri rappresentasse un carattere Come conseguenza, il carattere π e’ rappresentato dal numero 0xF0 nella code page greca usata sui computer Sun, ma dalla sequenza 0x83 0xCE nella code page usata sui computer Windows Quindi, data una sequenza di numeri, non e’ possibile sapere con certezza quali caratteri sono codificati, se non viene fornita la tabella di conversione
Unicode Il consorzio Unicode e’ stato formato nel 1991 per codificare una volta per tutte ogni possibile carattere e simbolo di punteggiatura, assegnandogli un numero univoco (chiamato codepoint) La attuale versione, 5.1, definisce 100.713 codepoints Per codificarli servono 21 bits (da 0x0 a 0x10FFFF); si parla quindi di UTF-32 se ogni codepoint viene rappresentato da 32 bit, UTF-16 se si usano 16 bit (usando sequenze di 2 numeri per i pochi caratteri che hanno i primi 5 bit diversi da 0), UTF-8 se si usano 8 bit per carattere (usando sequenze da 2 a 6 numeri per i caratteri che non appartengono all’alfabeto occidentale)
I componenti di XML (2) I commenti sono racchiusi tra <!-- e --> Al suo interno si può trovare qualsiasi testo, anche su più righe, purchè non contenga “-->” Il suo contenuto viene ignorato dalla applicazione che legge il file XML Quindi contiene testo indirizzato ad una persona
I componenti di XML (3) Un file XML può contenere solo un tag al livello principale (denominato “root”) La struttura del file è quindi: Processing instruction “xml” Commenti ed altre processing instructions Root del documento Altri commenti e processing instructions Il tutto può essere inframezzato con spazi, tab e/o newlines (“whitespace”)
I componenti di XML (4) Il tag “<books>” è detto “elemento” Gli elementi devono cominciare con un “<” seguito subito da una lettera o dal carattere “_”; può quindi proseguire con lettere, numeri, ed alcuni simboli di punteggiatura come “–” o “.” Dopo il nome può seguire uno spazio ed una lista di “attributi”, definiti da un nome, il simbolo “=” ed un valore racchiuso tra apici singoli o doppi Se il valore dell’attributo contiene lo stesso tipo di apici usati per racchiuderlo, questi vanno codificati usando " e '
I componenti di XML (5) Al di fuori dello spazio delimitato da < e > si trova il “testo”; come per i valori degli attributi, se il testo deve contenere i simboli “<” e “>”, questi vanno codificati come < e > Se occorre inserire il carattere “&”, si deve usare &
I componenti di XML (6) Se c’è la necessità di scrivere un lungo testo pieno di caratteri speciali, si può racchiuderlo all’interno di una sezione CDATA, delimitata tra <![CDATA[ e ]]> Come per i commenti, al suo interno si può scrivere di tutto, tranne la stringa ]]>
I componenti di XML (7) I vari ', ", <, >, & sono entity predefinite Un documento XML può contenere anche entità numeriche tipo (per indicare il carattere Unicode 0x20, lo spazio) o se si usa la notazione decimale Altre entità possono essere definite all’interno della DTD, e possono rappresentare sia singoli caratteri (© per il simbolo “©”), frammenti di XML (&signature; per “<b>Alberto</b> Massari”) o interi documenti XML da includere
Riassunto XML può quindi essere usato per annotare dati scritti in qualunque lingua ed essere “consumato” sia da utenti umani che da software La “X” sottolinea la estensibilità del linguaggio; aggiungere nuovi dati racchiusi in un nuovo tag fa sì che le “vecchie” applicazioni ignorino quella informazione, mentre le “nuove” ne beneficiano
Namespaces Quasi subito ci si rese conto che non si potevano “mischiare” files XML codificati da DTD differenti Cioè, una DTD definisce un “dominio” all’interno del quale è corretto che dentro ad un “book” ci sia un “title”, uno o più “author” e così via Ad esempio, in un altro dominio, “title” potrebbe venir usato per indicare quale titolo dare ad una persona (“Mr”, “Dott”, “Avv”…)
Namespaces (2) Un anno dopo, nel gennaio 1999, il W3C pubblica le specifiche dei Namespaces (http://www.w3.org/TR/REC-xml-names/) Stabilisce che ogni elemento è incluso dentro un namespace, definito da una URI (Uniform Resource Identifier, vedi RFC 2396) Visto che le URL (Uniform Resource Locator) sono URI valide (sostanzialmente sono URI che contengono in sé l’informazione sulla locazione dove la risorsa si trova), spesso si usano URL per definire i namespaces
Namespaces (3) I namespace vengono dichiarati usando degli attributi speciali, che cominciano con xmlns xmlns:p=“http://www.my.com/schema” definisce che il namespace associato con il prefisso “p” è definito dalla URI “http://www.my.com/schema” Se la definizione manca del prefisso (se cioè si usa xmlns=“http://www.my.com/schema”) si definisce il namespace di default N.B.: la URI è il “nome” del namespace; non è detto che quell’indirizzo esista o che ci si trovi la DTD che lo definisce, anche se questo di solito è quello che succede
Namespaces (4) Il carattere “:” viene dichiarato illegale all’interno dei tag (sia per gli elementi che per gli attributi) ed usato per separare il tag in due parti: un namespace prefix ed un local name Scrivendo <p:book> si intende dire che questo “book” vive all’interno del namespace associato con il prefisso “p” E’ quindi possibile mischiare all’interno dello stesso file XML dati anche diversi tra di loro senza rischi di ambiguità
Esempio di XML con Namespace <b:books xmlns:b=“urn:library:ver:1.0” xmlns:n=“urn:names:gov”> <b:book> <b:title xml:lang=“en”>The humane interface</b:title> <b:author n:full=“Jef Raskin”> <n:first>Jef</n:first> <n:last>Raskin</n:last> </b:author> </b:book> ... </b:books>
XSLT: il cerchio si chiude Abbiamo visto come HTML serva per annotare un testo con informazioni “tipografiche” Abbiamo visto come XML serva per annotare dei dati con informazioni “semantiche” Adesso vorremmo prendere dei dati (codificati in XML) e mostrarli su video (usando HTML) Per fare ciò si usa XSLT (eXtensible Stylesheet Language Transformations)
XSLT Il W3C pubblica le specifiche per XSLT nel novembre 1999 (http://www.w3.org/TR/xslt) XSLT è solo una parte di un progetto più ampio (XSL) rivolto alla comunità editoriale Un’altra parte importante è XSL-FO (Formatting Objects), che viene usata per specificare il layout di stampa di libri (ad es. un documento XSL-FO può essere convertito in un file PDF, o, se preferite, un file PDF può essere salvato in XSL-FO senza perdita di informazione)
T come Trasformazione Uno stylesheet XSLT legge un file XML e a seconda di quale elementi o attributi incontra, decide quale trasformazione effettuare Il risultato viene scritto nel documento finale, quindi si procede ad un altro elemento o attributo
Riassunto Alla fine del 1999 lo scenario è quasi completo: esiste uno standard per archiviare/scambiare dati, ed un modo per ottenerne una o più rappresentazioni (completa, compatta, senza immagini per PDAs…) Le ditte possono cominciare a scambiarsi le informazioni come files XML (una volta che si mettono d’accordo su quel DTD usare), ed allo stesso tempo usare quegli stessi files per produrre il proprio sito web. E’ davvero una rivoluzione.
“Dai un martello ad una persona, ed ogni problema gli sembrerà un chiodo”
I “dialetti” di XML XML Schema: DTD++ in formato XML XHTML: la versione XML-friendly di HTML 4.01 XLink/XPointer: collegamenti tra files XML RDF/RSS/OWL: semantica dei contenuti SOAP/ebXML/xBRL/WS-*: web services XPath/XQuery: come cercare dentro dati XML VoiceXML/SALT: text-to-speech WML: l’HTML per i telefonini WAP
I “dialetti” di XML (2) MathML: rappresentare matematica ThML: testi teologici RELML: descrizione di case in vendita OFX: informazioni finanziarie XMPP: instant messaging NeuroML/AnaML/GAME: informazioni mediche XCI: trascrizioni dei processi nei tribunali MML/MusicML: musica
XML ed il multimedia Il mondo del multimedia non sta a guardare: fioriscono le iniziative che mirano ad usare XML per rappresentare i contenuti Ad esempio: SVG per la grafica 2D vettoriale VRML/X3D per la grafica 3D SMIL per implementare slideshow (MMS) XMT per descrivere gli oggetti in una scena (MPEG-7)
Scalable Vector Graphics <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text x="10" y="100" style="fill:red;font-family:times;font-size:18">Primo esempio di SVG</text> </svg>
Pregi di SVG E’ un formato vettoriale: a differenza di JPEG o GIF, il disegno non soffre quando viene scalato E’ un formato testo: può essere incluso in una pagina HTML senza bisogno di files accessori E’ un formato testo: può essere generato al volo tramite da un foglio XSLT a partire da un file XML contenente i dati
Le forme base Linea: <line x1=’10’ y1=’10’ x2=‘100’ y2=‘100’ style=‘…’/> Polilinea: <polyline points=’10,10 50,50 90,100’ style=‘…’/> Cerchio: <circle cx=’10’ cy=’10’ r=‘5’ style=’…’/> Poligono: <polygon points=’10,10 50,50 90,100’ style=‘…’/> Rettangolo: <rect x=’10’ y=’10’ rx=‘3’ ry=‘3’ width=‘100’ height=‘50’ style=‘…’/> Ellisse: <ellipse cx=‘100’ cy=‘100’ rx=’70’ ry=’50’ style=‘…’/>
I percorsi Per rappresentare forme irregolari, si usa il comando path <path d=‘M 10 10 L 100 100 L 200 100 Z’ style=‘…’/> La sintassi dell’attributo d è formata da: M x,y vai al punto x,y L x,y linea dal punto corrente a x,y Z chiudi la forma H x linea orizzontale fino a x V y linea verticale fino a y C x,y x,y x,y curva di Bezier S x,y x,y curva di Bezier smussata Q x,y x,y curva di Bezier quadratica T x,y curva di Bezier quadratica smussata A rx,ry… arco Se il comando è minuscolo, i valori di x e y sono relativi
Scrivere testo Per inserire frammenti di testo si usa text <text x=’10’ y=’20’>testo</text> La scritta può contenere elementi tspan per spezzarla su più righe <text x=’20’ y=’10’> Testo 1<tspan x=’20’ dy=’20’>Testo 2</tspan> </text> Si possono specificare il font, l’allineamento, apice/pedice, la distanza tra le lettere e tra le parole Si può anche forzare il testo a seguire un path irregolare
Gli stili Abbiamo visto come tutti gli elementi prevedano un attributo style Il suo valore è una stringa del tipo stile:valore;stile:valore Gli stili possibili sono: fill il colore di riempimento opacity il grado di trasparenza (0-1) fill-rule come riempire aree interne stroke il colore della linea di bordo stroke-width lo spessore del bordo stroke-dasharray lo stile del bordo stroke-linecap come terminare le linee stroke-linejoin come disegnare le giunzioni display se l’oggetto sarà visualizzato
I gruppi Più elementi grafici possono essere riuniti in un gruppo, e manipolati come un elemento unico, usando l’elemento g <g style=‘fill:green’> <circle cx=‘100’ cy=‘100’ r=’50’/> <rect x=‘200’ y=’50’ width=‘100’/> </g> Un gruppo può contenere sottogruppi Oltre a controllare lo stile, un gruppo può effettuare trasformazioni vettoriali
Le trasformazioni vettoriali Le trasformazioni sono specificate usando l’attributo transform che le elenca nell’ordine in cui vanno eseguite Sono possibili: translate(tx,ty) traslazione rigida scale(sx,sy) zoom rotate(ra,cx,cy) rotazione di ra gradi skewX(sa) rotazione del solo asse X skewY(sa) rotazione del solo asse Y matrix(a,b,c,d,e,f) trasforma l’oggetto usando la matrice
I link Come in HTML, i link esterni sono creati usando un elemento a attorno all’oggetto da cliccare <a xlink:href=‘http://…’> <rect x=’10’ y=’10’ width=’60’ height=’30’/> <text x=’10’ y=’15’>Cliccami</text> </a> Esistono anche i link interni; per realizzarli, l’oggetto da collegare deve avere un attributo id=‘nome’ che verrà collegato con un attributo xlink:href=‘#nome’ <path id=‘curva’ d=‘M …’/> <text><textPath xlink:href=‘#curva’>Un testo su una curva</textPath></text>
Gradienti e pattern (1) Abbiamo visto che per riempire le forme si usa l’attributo style, specificando fill:color o stroke:color Si possono anche definire degli stili di riempimento personalizzati, all’interno di un elemento defs e usarli usando un link interno <defs> <linearGradient id=‘g1’> <stop offset=‘5%’ stop-color=‘#F60’/> <stop offset=’95%’ stop-color=‘#FF6’/> </linearGradient> </defs> <rect … style=‘fill:url(#g1)’/>
Gradienti e pattern (2) I gradienti lineari lavorano lungo un vettore 2D (di default orizzontale) I gradienti circolari usano un cerchio ed un punto focale Al loro interno si definiscono due o più “stop points” che definiscono i colori in certi punti; il resto della figura sarà riempito usando interpolazione I pattern definiscono degli “stampini” che verranno ripetuti allineati
Simboli All’interno di un elemento defs si possono anche definire dei simboli, usando l’elemento symbol <defs> <symbol id=‘s1’> <rect …/> <text …>testo</text> </symbol> </defs> In seguito si può usare l’elemento use per disegnarlo in una posizione specifica <use x=‘100’ y=‘100’ xlink:href=‘#s1’ style=‘…’/>
Eventi e scripting Si può associare del codice a particolari eventi del mouse o della tastiera che coinvolgano certi oggetti grafici Il codice può accedere alla struttura del file XML e manipolarlo; ad esempio, creando nuovi oggetti, cambiando le proprietà grafiche (es. colore) di quelli esistenti, o la posizione
Animazione (1) Visto che ottenere animazioni usando lo scripting è complesso, SVG 1.1 include la parte di SMIL che definisce le animazioni animate è un elemento che, inserito all’interno della definizione di un oggetto, cambia il valore di un attributo in maniera lineare <rect id="RectElement" x="300" y="100" width="300" height="100" fill="rgb(255,255,0)"> <animate attributeName="x" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="300" to="0" />
Animazione (2) Altri tipi di animazione sono animateMotion, animateColor e animateTransform; il primo muove l’oggetto lungo il percorso indicato, il secondo cambia il colore ed il terzo cambia i parametri di una trasformazione/rotazione/scalamento
EyesWeb XMI Il formato per salvare le patch in EyesWeb XMI è XML E’ un formato “aperto”, e permetterà a terze parti di creare editor o player su piattaforme attualmente non supportate Consente anche di esaminare e manipolare una patch in modi interessanti…
Synchronized Multimedia Integration Language SMIL (si pronuncia come “smile”) è stato sviluppato per rappresentare presentazioni multimediali interattive SMIL 1.0 è stato ratificato nel Giugno 1998 SMIL 2.0 è stato ratificato nell’Agosto 2001 Le cose che sa fare sono: posizionare oggetti mono-mediali sullo schermo sincronizzarli scegliere diversi componenti a seconda di lingua, velocità di connessione, dimensioni schermo…
Moduli e profili E’ suddiviso in moduli separati, in modo che parti di SMIL possano essere integrati in altri linguaggi (es. XHTML+SMIL, SVG) Definisce dei “profili” che comprendono un numero di moduli obbligatori; ad esempio, definisce un “Basic Profile” adatto a telefonini, e un “Language Profile” adatto a player per PC
SMIL 2.0 SMIL 1.0 era una specifica di 30 pagine; SMIL 2.0 è 540 pagine Ci sono parecchi player disponibili, e qualche editor; vista la mole delle specifiche, i moduli supportati variano da un software all’altro, per cui se si vogliono creare presentazioni “avanzate” è meglio sapere come saranno visualizzate…
Gli ingredienti Raccogliere i media files/URL (video, audio, immagini) Decidere dove verranno visualizzati sul video Identificare gli elementi opzionali o sostituibili Stabilire il percorso ed i suoi tempi Gestire l’interazione con l’utente
Un esempio: la TV Quando si guarda la TV, si ha l’impressione di vedere un unico stream multimediale, ma in realtà possiamo identificare: Il filmato dell’evento (es. un incontro di boxe, il videoclip di una canzone) Il logo della rete televisiva La voce fuori campo del presentatore I sottotitoli per i non udenti Varie scritte con informazioni (es. statistiche sull’evento sportivo, curiosità sul cantante) Piuttosto che preparare un filmato preconfezionato, sarebbe utile mantenere separati i suoi componenti in modo da lasciare all’utente la libertà di attivarli o meno
Il formato di un file .smil <smil xmlns=“http://www.w3.org/2001/SMIL20/Language”> <head> <meta name=“title” content=“Titolo”/> <layout>...</layout> </head> <body> ... </body> </smil>
Definiamo il layout per un filmato di un incontro di boxe <head> <layout> <root-layout id="video" width="159" height="120" background-color="gray"/> <region id="video" left="0" top="0" width="159" height="120" z-index="0"/> <region id="comment" left="10" top="9" width="34" height="29" z-index="1"/> <region id="stats" left="105" top="14" width="43" height="75" z-index="1"/> <region id="title" left="12" top="99" width="113" height="15" z-index="1"/> <region id="caption" left="29" top="90" width="102" height="20" z-index="1"/> </layout> </head>
Scalamenti Nel caso una immagine o un video non abbiano le stesse dimensioni della regione a cui è stata assegnata, il valore dell’attributo fit controlla come viene scalata fill fa’ coincidere sia la x che la y (bleah!) meet espande finché una coordinata coincide slice espande finché la regione è tutta piena hidden non fare nulla scroll mostra un meccanismo per consentire lo scroll
La sincronizzazione temporale Sequenza (seq) Parallelo (par) Esclusione (excl)
Scriviamo i titoli I titoli di apertura sono rappresentati da due immagini statiche, che vogliamo mostrare in sequenza per 3 secondi <body> <seq> <img src="Intro-Names.gif" region="video“ dur="3s"/> <img src="Intro-Date.gif" region="video" dur="3s"/> </seq> </body> 0s 3s 6s t
I tipi di media Gli elementi che possono venire inseriti all’interno di un elemento di sincronizzazione dipendono dal player; quelli previsti sono img video text audio animation ref
Impostare la durata.. I valori temporali sono sempre riferiti ad un istante di tempo predefinito (l’inizio di par o excl, la fine del blocco precedente in un seq) Si può usare l’attributo dur, che specifica la durata Oppure i due attributi begin e end Se nessun attributo è usato, si usa la durata del clip Il valore di un attributo può essere relativo ad un altro frammento (es. begin=“v1.end+2s”)
..e la ripetizione Usando repeatCount e repeatDur si può far ripetere un frammento N volte (se c’è anche una durata esplicita verrà comunque troncato allo scadere del tempo) o, se hanno il valore “indefinite”, finché non termina il blocco di sincronizzazione in cui si trova il clip
Durata dei blocchi paralleli Un blocco parallelo normalmente termina quando l’ultimo componente ha finito Specificando <par endsync=“first”> termina appena ne termina uno Specificando <par endsync=“id(v1)”> termina quando termina il clip indicato
I blocchi esclusivi I blocchi di tipo excl permettono la visualizzazione di uno solo dei suoi componenti; tipicamente i tag begin di questi conterranno riferimenti ad eventi <par id="SimplePresentation"> <img src="..." id="ClickMe"/> <img src="..." id="NoClickMe"/> <excl> <audio src="..." begin="ClickMe.activateEvent"/> <audio src="..." begin="NoClickMe.activateEvent"/> </excl> </par>
Mostriamo il video ed i sottotitoli <par> <video src="LamottaRobinson51.avi" region="video"/> <seq begin="6s"> <img src="title-jake.gif" region="title" dur="4s"/> <img src="title-sugar.gif" region="title" begin="5s" dur="4s"/> </seq> </par> 6 10 15 19 t
Gestiamo più lingue.. <par> <switch> <audio src="jake-ru.wav" system-language="ru"/> <audio src="jake-fr.wav" system-language="fr"/> <audio src="jake-en.wav"/> </switch> <img src="title-jake.gif" region="title" dur="4s"/> </par>
..e connessioni lente <switch> <video src="LaMottaRobinson51-High.avi" region="video" system-bitrate="56000"/> <video src="LaMottaRobinson51-Low.avi" region="video"/> </switch> Altri attributi sono system-captions, system-overdub-or-caption, system-required, system-screen-size, system-screen-depth Un clip può specificare più attributi
Links (1) Come già visto per HTML e SVG, si possono creare links usando l’elemento a <a show="new" href="archives-dcab.smi"> <video src="zoomin.mpg" region="V-Main"/> </a> L’attributo show può avere il valore new apri in una nuova finestra pause metti in pausa questo clip replace sostituisci questa presentazione con la nuova Se href punta ad un frammento (es. “part1.smil#VI) quella presentazione comincia in quel punto, come se si fosse usato fast forward
Links (2) L’elemento a può avere anche gli attributi external (apri con un programma esterno) e target (mostra la presentazione in una regione di questa presentazione, cioè picture-in-picture)
Links (3) Si possono anche definire link associati a parti (spaziali o temporali) di un video, usando area <video src="advertisements.mpg" dur="01:30"> <area href="http://advertiser1.com/" begin="00:00" end="00:30"/> <area href="http://advertiser2.com/" begin="00:30" end="01:00"/> <area href="http://www.tv8.com/" coords=“90% 80% 100% 90%"/> </video>
Aggiungiamo transizioni Le transizioni vanno definite nell’header, assegnandogli un id Esiste un tipo ed un sottotipo di transizione La transizione può essere “in avanti” o “all’indietro” Si può controllare il colore in cui la transizione sfuma
Usiamo le transizioni La transizione si applica usando gli attributi transIn e transOut di un clip, specificando l’id della transizione da usare <head> <transition id=“fade_1” dur=“1s” type=“fade”/> </head> <body> <text region=“credits” transIn=“fade_1” transOut=“fade_1”/> </body>
Qualche esempio di transizione barWipe boxWipe fourBoxWipe barnDoorWipe diagonalWipe bowTieWipe miscDiagonalWipe veeWipe barnVeeWipe zigZagWipe barnZigZagWipe irisWipe triangleWipe arrowHeadWipe pentagonWipe hexagonWipe ellipseWipe eyeWipe roundRectWipe starWipe miscShapeWipe clockWipe
Animazioni Le animazioni sono realizzate tramite gli elementi animate, animateColor e animateMotion Il loro comportamento lo abbiamo già incontrato in SVG
MMS SMIL Un telefonino abilitato alla visione degli MMS dovrebbe essere in grado di comprendere un documento SMIL che abbia istruzioni appartenenti ai seguenti moduli: BasicContentControl, SkipContentControl, PrefetchControl BasicLayout (niente regioni innestate, o multiple finestre) BasicLinking, LinkingAttributes BasicMedia, MediaClipping, MediaAccessibility, MediaDescription Metainformation Structure BasicInlineTiming, MinMaxTiming, BasicTimeContainers, RepeatTiming, EventTiming (niente excl, o più istanti di inizio/fine, o riferimenti a ore assolute) BasicTransitions
Riferimenti SGML: http://telemat.det.unifi.it/book/Internet/Sgml HTML 2.0: http://www.ietf.org/rfc/rfc1866.txt XML: http://ieee.ing.uniroma1.it/ring/ArticoloXML.html XSLT: http://www.html.it/xslt/ SVG: http://www.html.it/svg/ SMIL: http://www.html.it/smil/ RealNetworks Production Guide: http://service.real.com/help/library/guides/realone/ProductionGuide/HTML/realpgd.htm