HTML TIME introduzione HTMLTIME Si tratta della realizzazione
- Slides: 24
HTML + TIME introduzione
HTML+TIME • Si tratta della realizzazione ms del profilo HTML+SMIL • http: //www. w 3. org/TR/2000/WD-smilboston-20000622/html-smil-profile. html • definito per SMIL 2. 0
Scopo • Aggiungere dinamicità alle pagine web permettendo la sincronizzazione tra gli elementi multimediali • Usare un linguaggio dichiarativo
SMIL • SMIL = Synchronized Multimedia Integrated Language • Si fonda su XML • È usato per la sincronizzazione multimediale • SMIL 2. 0 è una raccomandazione del W 3 C dall’agosto 2001 http: //www. w 3. org/TR/smil 20/
SMIL: 10 moduli
Language Profile • Si dice Language Profile o semplicemente Profile un insieme di moduli. I moduli sono atomici.
SMIL • In MS Time ci si limita a: – Animazione ( from , to, …) – Content control (custom, switch, . . ) – Oggetti multimediali (animation, audio, … – Temporizzazione e sincronizzazione (begin, end, …) – Manipolazione temporale (accelera, rewind, …) – Transizioni (wipe, irish, . . )
In pratica in IE 6. 0 • Il layout del documento viene dichiarato secondo le regole di HTML e CSS • Vengono integrate funzionalità temporali • Tutti elementi HTML sono trattati come media e dunque <img>, <p>, <div> sono soggetti alle regole temporali
nuovi attributi • begin="18" – inizia 18 secondi dopo il padre. • begin="5; 10; 15; 20" – inizia 5, 10, 15, 20 secondi dopo. . • begin="the. Button. click" – inizia quando si clicca sul bottone con ID "the. Button". • begin="the. Div. begin“ – inizia quando inizia l’elemento con. ID "the. Div" • begin="the. Span. end" – inizia quando finisce l’elemento con ID "the. Span". • begin="0; the. Button. click“ – inizia a 0 e quando si clicca sul bottone con ID "the. Button". .
nuovi attributi • • • dur="5" dur=“indefinite" repeat. Count repeat. Dur end esprime un tempo assoluto (in contrasto con dur) – inizia quando finisce l’elemento con ID "the. Span". • begin="0; the. Button. click" – inizia a 0 e quando si clicca sul bottone con ID "the. Button". .
Qualche esempio • • • <html xmlns: t ="urn: schemas-microsoft-com: time"> <head> <title> esempiozero</title> <style>time: * { behavior: url(#default#time 2); }. time { behavior: url(#default#time 2) } </style> <? IMPORT namespace="t" implementation="#default#time 2"> </head> <body>…. . </body> </html>
La sezione body • <p class= "time" begin="20" dur="5">Ecco un paragrafo che scompare </p> • <p class= "time" id=esempio 0 begin="0; esempio 0. end+2" dur="1">HTML+TIME ci consente di controllare la temporizzazione degli elementi HTML. </p> • <p> Ecco il classico paragrafo senza tempo</p>
Con immagini • <p class= "time" id=example 2 style="fontsize: 40 pt; color: black; " begin="0; example 2. end+2" dur="5"> ITALIA </p> • <img class= "time" begin="example 2. begin+1. 5" end="example 2. end" src="italia. gif" style="height=200; width=200"/>
Interazione • Sostituire la seconda parte dell’esempio precedente con • <img class= "time" begin="example 2. click" end="example 2. end" src="italia. gif" style="height=200; width=200"/> • per ottenere un meccanismo più complesso
Timecontainer • Specifica le relazioni temporali tra gli elementi figli. • <t: par> in parallelo • <t: seq> in sequenza • <t: excl> mutualmente esclusivi • Il prefisso t è legato allo spazio dichiarato dei nomi.
Timecontainer • Gli oggetti partono in successione •
Timecontainer • Gli oggetti partono in parallelo •
Timecontainer • http: //www. Computer. Org/multimedia/mu 2 001/pdf/u 4082. pdf? SMIDENTITY=no •
<t: par> • è implicito in <body> dunque nei nostri esempi precedenti. Notare come il tempo dell’elemento figlio è legato a quello del padre. • Cambiare begin in 0 • <t: par repeat. Count="indefinite"> • <p class= "time" begin="1"; id=example 2 style="fontsize: 40 pt; color: black; " dur="3"> ITALIA </p> • </t: par>
<t: seq> • I figli seguono una regola sequenziale. • <t: seq repeat. Count="indefinite"> <img class ="time" src= "Italia. gif" begin="1" dur="3" id="italia" style="position: absolute; top: 50 px; left: 50 px; width: 200; height: 200; " > • </img> • <img class ="time" src= "colosseo. gif" begin="1" dur="3" id="colosseo" style="position: absolute; top: 50 px; left: 50 px; width: 200; height: 200"/ > • </t: seq>
con seq e par • • • • <t: seq repeat. Count="indefinite"> <t: par> <img class ="time" src= "Italia. gif" begin="1" dur="3" style="position: absolute; top: 50 px; left: 50 px; width: 200; height: 200; " time. Action="display"/> <p class= "time" style="font-size: 40 pt; color: black; " begin="1" dur="3"time. Action="display">ITALIA</p> </t: par> <img class ="time" time. Action="display" src= "colosseo. gif" dur="3" style="position: absolute; top: 50 px; left: 50 px; width: 200; height: 200"/> <p class= "time" time. Action="display" style="font-size: 40 pt; color: black; " dur="3">COLOSSEO</p> </t: par> </t: seq>
Un esempio con Time. Action • • • <H 1 CLASS="time" BEGIN="0" DUR="11" TIMEACTION="style" STYLE="Color: Red; ">time. Action: (style) rosso per 11 secondi</H 1> <P>questo paragrafo non è legato alla timeline. . . </P> <P CLASS="time" BEGIN="2" DUR="5" TIMEACTION="display">(display)dopo due secondi ecco questa linea. </P> <P CLASS="time" BEGIN="4" DUR="5" TIMEACTION="visibilty"> (visibility)Eccomi dopo 4 secondi ma il mio spazio mi è sempre riservato. </P> <P CLASS="time" BEGIN="6" DUR="5" TIMEACTION="display"> (display)dopo 6 secondi. </P> <P>Sono l'ultima linea. Sempre presente</P>
I pulsanti • • • Possiamo definire nel body dei pulsanti assegnando loro un nome e un caption. Esempio <button id=italia>Italia</button> <button id=colosseo>colosseo</button>
<t: excl> • Con questo tag siamo sicuri che l’immagine precedente viene cancellata • <t: excl dur="indefinite"> • <img class="time" begin="0; italia. click" dur="indefinite" • time. Action="display" src="Italia. gif" style="height=200; width=300" /> • <img class="time" begin="colosseo. click" dur="indefinite" time. Action="display" src="colosseo. gif" • style="height=150; width=300" /> • </t: excl>