XML Ing. Alberto Massari [email protected].

XMLIng. Alberto Massari

[email protected]

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

http://www.w3.org/TR/REC-xml




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”?>



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


• 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”)


• 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 '


• 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 &


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

http://www.w3.org/TR/REC-xml-names/







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)

http://www.w3.org/TR/xslt

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

t3s 6s

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>

t0 6 10 15 19

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

http://telemat.det.unifi.it/book/Internet/Sgml

http://www.ietf.org/rfc/rfc1866.txt

http://ieee.ing.uniroma1.it/ring/ArticoloXML.html








http://www.html.it/xslt/

http://www.html.it/svg/

http://www.html.it/smil/



XML Ing. Alberto Massari [email protected].

Documents

Transcript of XML Ing. Alberto Massari [email protected].