HTML + TIME introduzione. HTML+TIME Si tratta della realizzazione ms del profilo HTML+SMIL boston-20000622/html-smil-profile.htmlhttp://www.w3.org/TR/2000/WD-smil-

Presentazione sul tema: "HTML + TIME introduzione. HTML+TIME Si tratta della realizzazione ms del profilo HTML+SMIL boston-20000622/html-smil-profile.htmlhttp://www.w3.org/TR/2000/WD-smil-"— Transcript della presentazione:

1 HTML + TIME introduzione

2 HTML+TIME Si tratta della realizzazione ms del profilo HTML+SMIL http://www.w3.org/TR/2000/WD-smil- boston-20000622/html-smil-profile.htmlhttp://www.w3.org/TR/2000/WD-smil- boston-20000622/html-smil-profile.html definito per SMIL 2.0

3 Scopo Aggiungere dinamicità alle pagine web permettendo la sincronizzazione tra gli elementi multimediali Usare un linguaggio dichiarativo

4 SMIL SMIL = Synchronized Multimedia Integrated Language Si fonda su XML È usato per la sincronizzazione multimediale SMIL 2.0 è una raccomandazione del W3C dall’agosto 2001 http://www.w3.org/TR/smil20/

5 SMIL: 10 moduli

6 Language Profile Si dice Language Profile o semplicemente Profile un insieme di moduli. I moduli sono atomici.

7 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,..)

8 In pratica in IE6.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,, sono soggetti alle regole temporali

9 nuovi attributi begin="18" – inizia 18 secondi dopo il padre. begin="5;10;15;20" – inizia 5, 10, 15, 20 secondi dopo.. begin="theButton.click" –inizia quando si clicca sul bottone con ID "theButton". begin="theDiv.begin“ – inizia quando inizia l’elemento conID "theDiv" begin="theSpan.end" –inizia quando finisce l’elemento con ID "theSpan". begin="0;theButton.click“ – inizia a 0 e quando si clicca sul bottone con ID "theButton"..

10 nuovi attributi dur="5" dur=“indefinite" repeatCount repeatDur end esprime un tempo assoluto (in contrasto con dur) –inizia quando finisce l’elemento con ID "theSpan". begin="0; theButton.click" – inizia a 0 e quando si clicca sul bottone con ID "theButton"..

11 Qualche esempio esempiozero time\:* { behavior:url(#default#time2); }.time { behavior: url(#default#time2) } …..

12 La sezione body Ecco un paragrafo che scompare HTML+TIME ci consente di controllare la temporizzazione degli elementi HTML. Ecco il classico paragrafo senza tempo

13 Con immagini <p class= "time" id=example2 style="font- size:40pt; color:black;" begin="0; example2.end+2" dur="5"> ITALIA <img class= "time" begin="example2.begin+1.5" end="example2.end" src="italia.gif" style="height=200; width=200"/>

14 Interazione Sostituire la seconda parte dell’esempio precedente con <img class= "time" begin="example2.click" end="example2.end" src="italia.gif" style="height=200; width=200"/> per ottenere un meccanismo più complesso

15 Timecontainer Specifica le relazioni temporali tra gli elementi figli. in parallelo in sequenza mutualmente esclusivi Il prefisso t è legato allo spazio dichiarato dei nomi.

16 Timecontainer Gli oggetti partono in successione

17 Timecontainer Gli oggetti partono in parallelo

18 Timecontainer http://www.Computer.Org/multimedia/mu2 001/pdf/u4082.pdf?SMIDENTITY=no

19 è implicito in dunque nei nostri esempi precedenti. Notare come il tempo dell’elemento figlio è legato a quello del padre. Cambiare begin in 0 ITALIA

20 I figli seguono una regola sequenziale. <img class ="time" src= "Italia.gif" begin="1" dur="3" id="italia" style="position:absolute; top:50px; left:50px; width:200; height:200;" > <img class ="time" src= "colosseo.gif" begin="1" dur="3" id="colosseo" style="position:absolute; top:50px; left:50px; width:200; height:200"/ >

21 con seq e par <img class ="time" src= "Italia.gif" begin="1" dur="3" style="position:absolute; top:50px; left:50px; width:200; height:200;" timeAction="display"/> <p class= "time" style="font-size:40pt; color:black;" begin="1" dur="3"timeAction="display">ITALIA <img class ="time" timeAction="display" src= "colosseo.gif" dur="3" style="position:absolute; top:50px; left:50px; width:200; height:200"/> <p class= "time" timeAction="display" style="font-size:40pt; color:black;" dur="3">COLOSSEO

22 Un esempio con TimeAction <H1 CLASS="time" BEGIN="0" DUR="11" TIMEACTION="style" STYLE="Color:Red;">timeAction: (style) rosso per 11 secondi questo paragrafo non è legato alla timeline... <P CLASS="time" BEGIN="2" DUR="5" TIMEACTION="display">(display)dopo due secondi ecco questa linea. (visibility)Eccomi dopo 4 secondi ma il mio spazio mi è sempre riservato. (display)dopo 6 secondi. Sono l'ultima linea. Sempre presente

23 I pulsanti Possiamo definire nel body dei pulsanti assegnando loro un nome e un caption. Esempio Italia colosseo

24 Con questo tag siamo sicuri che l’immagine precedente viene cancellata <img class="time" begin="0;italia.click" dur="indefinite" timeAction="display" src="Italia.gif" style="height=200; width=300" /> <img class="time" begin="colosseo.click" dur="indefinite" timeAction="display" src="colosseo.gif" style="height=150; width=300" />