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

ITALIA

14 Interazione Sostituire la seconda parte dell’esempio precedente con 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.

21 con seq e par

ITALIA

COLOSSEO

22 Un esempio con TimeAction

timeAction: (style) rosso per 11 secondi questo paragrafo non è legato alla timeline...

(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