1 / 24

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.

alfonso-blackwell
Download Presentation

HTML + TIME

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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.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 inIE6.0 • Il layout del documento viene dichiarato secondo le regole diHTMLeCSS • Vengono integrate funzionalità temporali • Tutti elementi HTML sono trattati come media e dunque<img>, <p>, <div>sonosoggetti 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 • <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>

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

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

  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. • <t:par> in parallelo • <t:seq> in sequenza • <t:excl> mutualmente esclusivi • Il prefissotè legato allo spazio dichiaratodei nomi.

  16. Timecontainer • Gli oggetti partono in successione

  17. Timecontainer • Gli oggetti partono in parallelo

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

  19. <t:par> • è implicito in<body>dunque nei nostri esempi precedenti. Notare come il tempo dell’elemento figlio è legato a quello del padre. • Cambiarebeginin0 • <t:par repeatCount="indefinite"> • <p class= "time" begin="1"; id=example2 style="font-size:40pt; color:black;" dur="3"> ITALIA </p> • </t:par>

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

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

  22. 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 &egrave; 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>

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

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

More Related