HTML + TIME

HTML + TIME

introduzione

HTML+TIME

• Si tratta della realizzazione ms del profilo HTML+SMIL

• http://www.w3.org/TR/2000/WD-smil-boston-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 W3C

dall’agosto 2001 http://www.w3.org/TR/smil20/

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 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 <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="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"..

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

Qualche esempio

• <html xmlns:t ="urn:schemas-microsoft-com:time">• <head> <title> esempiozero</title>• <style>time\:* { behavior:url(#default#time2); }• .time { behavior: url(#default#time2) }• </style>• <?IMPORT namespace="t"

implementation="#default#time2">• </head>• <body>…..• </body>• </html>

La sezione body

• <p class= "time" begin="20" dur="5">Ecco un paragrafo che scompare </p>

• <p class= "time" id=esempio0 begin="0; esempio0.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=example2 style="font-size:40pt; color:black;"

begin="0; example2.end+2" dur="5">

ITALIA

</p> • <img class= "time" begin="example2.begin+1.5"

end="example2.end"

src="italia.gif" style="height=200; width=200"/>

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

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/mu2001/pdf/u4082.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 repeatCount="indefinite">• <p class= "time" begin="1"; id=example2 style="font-

size:40pt; color:black;" dur="3"> ITALIA </p> • </t:par>

<t:seq>• I figli seguono una regola sequenziale.

• <t:seq repeatCount="indefinite"> <img class ="time" src= "Italia.gif" begin="1" dur="3" id="italia" style="position:absolute; top:50px; left:50px; width:200; height:200;" >• </img>

• <img class ="time" src= "colosseo.gif" begin="1" dur="3" id="colosseo"

style="position:absolute; top:50px; left:50px; width:200; height:200"/ >• </t:seq>

con seq e par• <t:seq repeatCount="indefinite">• <t: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</p>• </t:par>• <t:par>• <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</p>• </t:par>• </t:seq>

Un esempio con TimeAction• <H1 CLASS="time" BEGIN="0" DUR="11" TIMEACTION="style" • STYLE="Color:Red;">timeAction: (style) rosso per 11 secondi</H1>• <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>

• <br>

<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" • 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" />• </t:excl>

HTML + TIME

Documents

Transcript of HTML + TIME