• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

HTML5 Oggi: come e dove? (di Milo Maneo)

on

  • 3,062 views

la presentazione di Milo Maneo su HTML5 a From The Front 2010

la presentazione di Milo Maneo su HTML5 a From The Front 2010

@supermilus
http://www.milus.it
http://fromthefront.it

Statistics

Views

Total Views
3,062
Views on SlideShare
2,978
Embed Views
84

Actions

Likes
5
Downloads
0
Comments
0

6 Embeds 84

http://fromthefront.it 54
http://paolovalzania.wordpress.com 12
http://paolovalzania.blogspot.it 8
http://paolovalzania.blogspot.com 5
https://twitter.com 4
http://paolovalzania.virb.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • W3C: XHTML 2 e HTML 5 (con lo spazio) &#x2013; incompatibili tra loro! <br /> WHATWG: HTML5 (senza spazio) come base per le future specifiche del W3C <br /> Non ha senso definire delle specifiche se sai gi&#xE0; che il produttore non le recepir&#xE0;: movimento diverso rispetto ad una volta... <br />
  • C&#x2019;&#xE8; la compatibilit&#xE0; con le versioni precedenti! <br /> Non come XHTML2 che prevedeva la riscrittura di tutto il codice <br />
  • <br />
  • Tutte le future versioni di HTML supporteranno HTML5 -> tolgo il numero <br /> Il doctype non serve al browser (tranne per il doctype switching), server solo ai validatori <br />
  • Tutte le future versioni di HTML supporteranno HTML5 -> tolgo il numero <br /> Il doctype non serve al browser (tranne per il doctype switching), server solo ai validatori <br />
  • Tutte le future versioni di HTML supporteranno HTML5 -> tolgo il numero <br /> Il doctype non serve al browser (tranne per il doctype switching), server solo ai validatori <br />
  • Tutte le future versioni di HTML supporteranno HTML5 -> tolgo il numero <br /> Il doctype non serve al browser (tranne per il doctype switching), server solo ai validatori <br />
  • Tutte le future versioni di HTML supporteranno HTML5 -> tolgo il numero <br /> Il doctype non serve al browser (tranne per il doctype switching), server solo ai validatori <br />
  • Tutte le future versioni di HTML supporteranno HTML5 -> tolgo il numero <br /> Il doctype non serve al browser (tranne per il doctype switching), server solo ai validatori <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • il contenuto di aside pu&#xF2; essere eliminato senza che il significato del documento cambi <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

HTML5 Oggi: come e dove?  (di Milo Maneo) HTML5 Oggi: come e dove? (di Milo Maneo) Presentation Transcript

  • HTML5 OGGI Come e dove?
  • TIMELINE 1991 HTML 1994 HTML 2 1996 CSS 1 & Javascript 1997 HTML 4 1998 CSS 2 2000 XHTML 1 2002 Tableless web design 2005 AJAX 2009-? HTML5
  • W(HATWG)TF??
  • W(HATWG)TF?? Ian Hickson (OPERA)
  • W(HATWG)TF?? Ian Hickson (OPERA) estendiamo HTML per fare applicazioni web?
  • W(HATWG)TF?? Ian Hickson (OPERA) estendiamo HTML per fare applicazioni web? W3C
  • W(HATWG)TF?? Ian Hickson (OPERA) estendiamo HTML per fare applicazioni web? W3C No.
  • W(HATWG)TF?? Ian Hickson (OPERA) estendiamo HTML per fare applicazioni web? W3C No. Opera, Apple e Mozilla
  • W(HATWG)TF?? Ian Hickson (OPERA) estendiamo HTML per fare applicazioni web? W3C No. Opera, Apple e Mozilla WHATWG!*
  • W(HATWG)TF?? Ian Hickson (OPERA) * estendiamo HTML per fare applicazioni web? W3C No. Opera, Apple e Mozilla WHATWG!* WHATWG: Web Hypertext Application Technology Working Group
  • UN VINCITORE: HTML5. MA QUANDO? 2009: W3C annuncia l’abbandono di XHTML2 2012: passaggio da “specification” a “candidate recommendation”
  • UN VINCITORE: HTML5. MA QUANDO? 2009: W3C annuncia l’abbandono di XHTML2 2012: passaggio da “specification” a “candidate recommendation” I browser supportano le features di HTML5? OK, si inizia...
  • R(EVOLUTIONARY) Nuovi tag Supporto nativo ad audio e video Miglior supporto per l’inserimento di dati Supporto per l’esecuzione di applicazioni offline Supporto per database locali Supporto per MathML e SVG Funzionalità “web 2.0” native: WYSIWYG editing Canvas (disegno 2D) Drag & Drop History API (bottone indietro)
  • DOCTYPE
  • DOCTYPE HTML 4.01
  • DOCTYPE HTML 4.01 <!DOCTYPE HTML PUBLIC » "-//W3C//DTD HTML 4.01//EN" » "http://www.w3.org/TR/html4/strict.dtd">
  • DOCTYPE HTML 4.01 <!DOCTYPE HTML PUBLIC » "-//W3C//DTD HTML 4.01//EN" » "http://www.w3.org/TR/html4/strict.dtd"> XHTML 1.0
  • DOCTYPE HTML 4.01 <!DOCTYPE HTML PUBLIC » "-//W3C//DTD HTML 4.01//EN" » "http://www.w3.org/TR/html4/strict.dtd"> XHTML 1.0 <!DOCTYPE html PUBLIC » "-//W3C//DTD XHTML 1.0 Strict //EN" » "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • DOCTYPE HTML 4.01 <!DOCTYPE HTML PUBLIC » "-//W3C//DTD HTML 4.01//EN" » "http://www.w3.org/TR/html4/strict.dtd"> XHTML 1.0 <!DOCTYPE html PUBLIC » "-//W3C//DTD XHTML 1.0 Strict //EN" » "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML5
  • DOCTYPE HTML 4.01 <!DOCTYPE HTML PUBLIC » "-//W3C//DTD HTML 4.01//EN" » "http://www.w3.org/TR/html4/strict.dtd"> XHTML 1.0 <!DOCTYPE html PUBLIC » "-//W3C//DTD XHTML 1.0 Strict //EN" » "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML5 <!DOCTYPE html>
  • TUTTO PIU’ SEMPLICE...
  • TUTTO PIU’ SEMPLICE... CONTENT TYPE
  • TUTTO PIU’ SEMPLICE... CONTENT TYPE HTML 4.01
  • TUTTO PIU’ SEMPLICE... CONTENT TYPE HTML 4.01 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  • TUTTO PIU’ SEMPLICE... CONTENT TYPE HTML 4.01 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> HTML5
  • TUTTO PIU’ SEMPLICE... CONTENT TYPE HTML 4.01 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> HTML5 <meta charset="UTF-8">
  • TUTTO PIU’ SEMPLICE... CONTENT TYPE HTML 4.01 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> HTML5 <meta charset="UTF-8"> SCRIPT & STYLES
  • TUTTO PIU’ SEMPLICE... CONTENT TYPE HTML 4.01 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> HTML5 <meta charset="UTF-8"> SCRIPT & STYLES HTML 4.01
  • TUTTO PIU’ SEMPLICE... CONTENT TYPE HTML 4.01 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> HTML5 <meta charset="UTF-8"> SCRIPT & STYLES HTML 4.01 <script type="text/javascript" src="file.js"></script> <link rel="stylesheet" type="text/css" href="file.css">
  • TUTTO PIU’ SEMPLICE... CONTENT TYPE HTML 4.01 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> HTML5 <meta charset="UTF-8"> SCRIPT & STYLES HTML 4.01 <script type="text/javascript" src="file.js"></script> <link rel="stylesheet" type="text/css" href="file.css"> HTML5
  • TUTTO PIU’ SEMPLICE... CONTENT TYPE HTML 4.01 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> HTML5 <meta charset="UTF-8"> SCRIPT & STYLES HTML 4.01 <script type="text/javascript" src="file.js"></script> <link rel="stylesheet" type="text/css" href="file.css"> HTML5 <script src="file.js"></script> <link rel="stylesheet" href="file.css">
  • ... E VALE TUTTO I tag possono essere scritti in OgNi MOdo maiuscoli, minuscoli, con le virgolette, senza virgolette, chiusi o aperti
  • ... E VALE TUTTO I tag possono essere scritti in OgNi MOdo maiuscoli, minuscoli, con le virgolette, senza virgolette, chiusi o aperti <img SRC="percorso/immagine.gif" » alt="alt dell’immagine" BOrdER=0> <p class=me>Sono un paragrafo
  • ... E VALE TUTTO I tag possono essere scritti in OgNi MOdo maiuscoli, minuscoli, con le virgolette, senza virgolette, chiusi o aperti <img SRC="percorso/immagine.gif" » alt="alt dell’immagine" BOrdER=0> <p class=me>Sono un paragrafo
  • ... E VALE TUTTO I tag possono essere scritti in OgNi MOdo maiuscoli, minuscoli, con le virgolette, senza virgolette, chiusi o aperti <img SRC="percorso/immagine.gif" » alt="alt dell’immagine" BOrdER=0> <p class=me>Sono un paragrafo <img src="percorso/immagine.gif" » alt="alt dell’immagine" border= "0" /> <p class="me">Sono un paragrafo</p>
  • ...O QUASI
  • ...O QUASI TAG indicati come obsoleti:
  • ...O QUASI TAG indicati come obsoleti: frame, frameset, noframes, acronym, font, big, center, strike, bgcolor, cellspacing, cellpadding, valign
  • ...O QUASI TAG indicati come obsoleti: frame, frameset, noframes, acronym, font, big, center, strike, bgcolor, cellspacing, cellpadding, valign TAG riammessi:
  • ...O QUASI TAG indicati come obsoleti: frame, frameset, noframes, acronym, font, big, center, strike, bgcolor, cellspacing, cellpadding, valign TAG riammessi: small, b (nel significato proprio di bold), i (come voce o mood alternativo), cite (come titolo di un’opera)
  • ...O QUASI TAG indicati come obsoleti: frame, frameset, noframes, acronym, font, big, center, strike, bgcolor, cellspacing, cellpadding, valign TAG riammessi: small, b (nel significato proprio di bold), i (come voce o mood alternativo), cite (come titolo di un’opera) Super a:
  • ...O QUASI TAG indicati come obsoleti: frame, frameset, noframes, acronym, font, big, center, strike, bgcolor, cellspacing, cellpadding, valign TAG riammessi: small, b (nel significato proprio di bold), i (come voce o mood alternativo), cite (come titolo di un’opera) Super a: <a href="url.html"> <h2>Titolo</h2> <p class="me">Sono un paragrafo</p> </a>
  • NUOVI TAG abbr hgroup article mark aside meter audio nav canvas output details progress figcaption section figure summary footer time header video
  • ELEMENTI DI STRUTTURA
  • ELEMENTI DI STRUTTURA article aside figure footer header hgroup nav section
  • SECTION E’ utilizzato quando si vogliono raggruppare insieme elementi collegati tra di loro da un punto di vista contenutistico: <section> <h1>I promessi sposi</h1> <p>Il libro narra di una coppia di fidanzati un po’ sfigati.</p> <p>Di Alessandro Manzoni</p> </section> Corrisponde ad un div, ma con il significato semantico detto prima.
  • HEADER E’ utilizzato come contenitore di un gruppo di elementi introduttivi o di navigazione: <section> <header> <h1>I promessi sposi</h1> </header> <p>Il libro narra di una coppia di fidanzati un po’ sfigati.</p> <p>Di Alessandro Manzoni</p> </section> In una pagina possono esserci più header!
  • FOOTER E’ utilizzato come contenitore di informazioni relative all’elemento contenitore: <section> <header> <h1>I promessi sposi</h1> </header> <p>Il libro narra di una coppia di fidanzati un po’ sfigati.</p> <footer> <p>Di Alessandro Manzoni</p> </footer> </section> In una pagina possono esserci più footer!
  • ASIDE E’ utilizzato come contenitore di informazioni solo marginalmente correlati al contenuto principale: <section> <header> <h1>I promessi sposi</h1> </header> <p>Il libro narra di una coppia di fidanzati un po’ sfigati.</p> <footer> <p>Di Alessandro Manzoni</p> </footer> </section> <aside> Altre opere dello stesso autore: <ol> <li>Il Conte di Carmagnola</li> </ol> </aside>
  • NAV Contiene informazioni di navigazione come, ad esempio una lista di link: <nav> <ul> <li class="active"><a href="#">home</a></li> <li><a href="#">chi sono</a></li> <li><a href="#">blog</a></li> <li><a href="#">contatti</a></li> </ul> </nav> Quasi sempre una pagina avrà almeno un elemento HEADER con all’interno un elemento NAV.
  • ARTICLE E’ utilizzato per raggruppare informazioni “auto-referenziali” pubblicabili ad esempio in un RSS: <article class="hentry"> <header> <h2 class="entry-title"> <a href="#" rel="bookmark" title="Permalink al titolo del post">Titolo dell'articolo</a> </h2> </header> <footer class="post-info"> scritto da milus </footer> <div class="entry-content"> <p>Lorem ipsum dolor sit amet, ...</p> </div> </article> Quindi: post, news, commenti, recensioni, widget (stock, meteo, ecc.)
  • TIME Contiene informazioni sulla data e sull’ora di pubblicazione di un articolo: <time datetime="2010-10-22T13:59:47+01:00" pubdate> ore 14:59 del 22 Ottobre 2010 </time> 3 elementi: - una data in formato “umano” - una data in formato “macchina” - un parametro opzionale <div class="entry"> <p class="post-date">22 Ottobre 2010</p> <h2>Titolo del post</h2> </div>
  • <!DOCTYPE html> <html> ES. BLOG <head> <title>Standard Blog</title> </head> <body> ... <header> <article> <h1><a href="#">Standard Blog</a></h1> <header> </header> <h1><a href="#">Title</a></h1> <nav> </header> <ul> <section> <li><a href="#">Home</a></li> <p>Lorem ipsum...</p> <li><a href="#">Archives</a></li> </section> <li><a href="#">About</a></li> </article> <li><a href="#">Contact</a></li> <article> </ul> <header> </nav> <h1><a href="#">Title</a></h1> <section> </header> <article> <section> <header> <p>Lorem ipsum...</p> <h1><a href="#">Title</a></h1> </section> </header> </article> <section> </section> <p>Lorem ipsum...</p> <footer> </section> <p>Copyright © 2008 All Rights</p> </article> </footer> ... </body> </html>
  • OGGI Posso già utilizzare questi tag?
  • OGGI Posso già utilizzare questi tag? Sì.
  • OGGI Posso già utilizzare questi tag? Sì. Però:
  • OGGI Posso già utilizzare questi tag? Sì. Però: article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; }
  • OGGI Posso già utilizzare questi tag? Sì. Però: article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } e per IE:
  • OGGI Posso già utilizzare questi tag? Sì. Però: article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } e per IE: <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/ html5.js"></script> <![endif]-->
  • FORM: PLACEHOLDER <form> <input name="q" placeholder="Cerca tra le notizie"> <input type="submit" value="Cerca"> </form> Firefox 3.7, Safari 4, Chrome 4, IOS 4 Gli altri browser lo ignorano
  • FORM: PLACEHOLDER <form> <input name="q" placeholder="Cerca tra le notizie"> <input type="submit" value="Cerca"> </form> Firefox 3.7, Safari 4, Chrome 4, IOS 4 Gli altri browser lo ignorano
  • FORM: AUTOFOCUS <form> <input name="q" autofocus> <input type="submit" value="Cerca"> </form> Safari 4, Chrome 3, Opera 10 Gli altri browser lo ignorano
  • FORM: AUTOFOCUS <form> <input name="q" autofocus> <input type="submit" value="Cerca"> </form> Safari 4, Chrome 3, Opera 10 Gli altri browser lo ignorano FALLBACK:
  • FORM: AUTOFOCUS <form> <input name="q" autofocus> <input type="submit" value="Cerca"> </form> Safari 4, Chrome 3, Opera 10 Gli altri browser lo ignorano <script> if (!("autofocus" in document.createElement("input"))) { FALLBACK: } document.getElementById("q").focus(); </script>
  • FORM: AUTOFOCUS <form> <input name="q" autofocus> <input type="submit" value="Cerca"> </form> Safari 4, Chrome 3, Opera 10 Gli altri browser lo ignorano <script> if (!("autofocus" in document.createElement("input"))) { FALLBACK: } document.getElementById("q").focus(); </script>
  • FORM: EMAIL <form> <input type="email"> <input type="submit" value="OK"> </form> Tutti i browser. Al massimo lo visualizzano come type=”text”.
  • FORM: EMAIL <form> <input type="email"> <input type="submit" value="OK"> </form> Tutti i browser. Al massimo lo visualizzano come type=”text”. Su iPhone: la tastiera si configura in modalità email!
  • FORM: EMAIL <form> <input type="email"> <input type="submit" value="OK"> </form> Tutti i browser. Al massimo lo visualizzano come type=”text”. Su iPhone: la tastiera si configura in modalità email!
  • FORM: URL <form> <input type="url"> <input type="submit" value="OK"> </form> Tutti i browser. Al massimo lo visualizzano come type=”text”.
  • FORM: URL <form> <input type="url"> <input type="submit" value="OK"> </form> Tutti i browser. Al massimo lo visualizzano come type=”text”. Su iPhone: la tastiera si configura in modalità url!
  • FORM: URL <form> <input type="url"> <input type="submit" value="OK"> </form> Tutti i browser. Al massimo lo visualizzano come type=”text”. Su iPhone: la tastiera si configura in modalità url!
  • FORM: NUMBER <input type="number" min="0" max="10" step="2" value="6"> Metodi javascript: input.stepUp(n) incrementa il valore di n input.stepDown(n) decrementa il valore di n input.valueAsNumber restituisce il valore attuale Tutti i browser. Al massimo i parametri vengono ignorati. Full su Opera 10, Chrome, Safari.
  • FORM: NUMBER <input type="number" min="0" max="10" step="2" value="6"> Metodi javascript: input.stepUp(n) incrementa il valore di n input.stepDown(n) decrementa il valore di n input.valueAsNumber restituisce il valore attuale Tutti i browser. Al massimo i parametri vengono ignorati. Full su Opera 10, Chrome, Safari.
  • FORM: RANGE <input type="range" min="0" max="10" step="2" value="6"> Unica differenza rispetto a number è la visualizzazione come slider. Tutti i browser. I parametri vengono ignorati. Full su Opera 10.
  • FORM: RANGE <input type="range" min="0" max="10" step="2" value="6"> Unica differenza rispetto a number è la visualizzazione come slider. Tutti i browser. I parametri vengono ignorati. Full su Opera 10.
  • FORM: VALIDAZIONE HTML5 inizia ad introdurre il supporto per la validazione client-side. Es. su Opera: type="email" Firefox4, Safari 5, Chrome 6, Opera 9 *
  • FORM: VALIDAZIONE HTML5 inizia ad introdurre il supporto per la validazione client-side. Es. su Opera: type="email" Firefox4, Safari 5, Chrome 6, Opera 9 * *Safari e Chrome non visualizzano messaggi di errore: semplicemente non fanno il submit del form.
  • FORM: VALIDAZIONE HTML5 inizia ad introdurre il supporto per la validazione client-side. Es. su Opera: type="email" Firefox4, Safari 5, Chrome 6, Opera 9 * *Safari e Chrome non visualizzano messaggi di errore: semplicemente non fanno il submit del form. Per evitare la validazione:
  • FORM: VALIDAZIONE HTML5 inizia ad introdurre il supporto per la validazione client-side. Es. su Opera: type="email" Firefox4, Safari 5, Chrome 6, Opera 9 * *Safari e Chrome non visualizzano messaggi di errore: semplicemente non fanno il submit del form. Per evitare la validazione: <form novalidate>...</form>
  • FORM: VALIDAZIONE HTML5 inizia ad introdurre il supporto per la validazione client-side. Es. su Opera: type="email" Firefox4, Safari 5, Chrome 6, Opera 9 * *Safari e Chrome non visualizzano messaggi di errore: semplicemente non fanno il submit del form. Per evitare la validazione: <form novalidate>...</form>
  • WEB (LOCAL) STORAGE Necessità: salvare in locale uno stato dell’applicazione
  • WEB (LOCAL) STORAGE Necessità: salvare in locale uno stato dell’applicazione Perchè non i cookie? Limite di 4kb e vengono inviati ad ogni richiesta HTTP.
  • WEB (LOCAL) STORAGE Necessità: salvare in locale uno stato dell’applicazione Perchè non i cookie? Limite di 4kb e vengono inviati ad ogni richiesta HTTP. localStorage
  • WEB (LOCAL) STORAGE Necessità: salvare in locale uno stato dell’applicazione Perchè non i cookie? Limite di 4kb e vengono inviati ad ogni richiesta HTTP. localStorage IE8, Firefox 3.5, Safari 4, Chrome 4, Opera 10.5, iPhone 2, Android 2
  • WEB (LOCAL) STORAGE localStorage.setItem("bar", foo); localStorage["bar"] = foo; var foo=localStorage.getItem("bar"); var foo=localStorage["bar"];
  • WEB (LOCAL) STORAGE localStorage.setItem("bar", foo); localStorage["bar"] = foo; var foo=localStorage.getItem("bar"); var foo=localStorage["bar"]; textarea.addEventListener('keyup', function () { window.localStorage['value'] = area.value; }, false); textarea.value = window.localStorage['value'];
  • WEB (LOCAL) STORAGE localStorage.setItem("bar", foo); localStorage["bar"] = foo; var foo=localStorage.getItem("bar"); var foo=localStorage["bar"]; Esempio: textarea.addEventListener('keyup', function () { window.localStorage['value'] = area.value; }, false); textarea.value = window.localStorage['value'];
  • WEB (LOCAL) STORAGE localStorage.setItem("bar", foo); localStorage["bar"] = foo; var foo=localStorage.getItem("bar"); var foo=localStorage["bar"]; Esempio: textarea.addEventListener('keyup', function () { window.localStorage['value'] = area.value; }, false); textarea.value = window.localStorage['value']; Limiti: 5 MB di peso e solo coppie chiave / valore
  • WEB (LOCAL) STORAGE localStorage.setItem("bar", foo); localStorage["bar"] = foo; oppure: var foo=localStorage.getItem("bar"); var foo=localStorage["bar"]; Esempio: textarea.addEventListener('keyup', function () { window.localStorage['value'] = area.value; }, false); textarea.value = window.localStorage['value']; Limiti: 5 MB di peso e solo coppie chiave / valore
  • LOCAL DATABASE HTML5 introduce anche il supporto per db locali. WebSQL IndexDB Opera Firefox Safari IE Chrome Confronto fra le due tecnologie: http://hacks.mozilla.org/2010/06/comparing- indexeddb-and-webdatabase/
  • VIDEO E’ utilizzato come tag per la riproduzione nativa di file video. Il supporto per ora è solo su Firefox, Chrome e Safari (desktop). FORMATO IE Firefox Opera Chrome Safari Ogg Theora No 3.5 10.5 3.0 No H.264 9.0 No No* 3.0 3.1 VP8 (WebM) No 4.0 10.6 6.0 No
  • VIDEO E’ utilizzato come tag per la riproduzione nativa di file video. Codice base con fallback flash: <video id="movie" width="320" height="240" preload controls> <source src="pr6.mp4" /> <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'/> <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'/> <object width="320" height="240" type="application/x-shockwave- flash" data="flowplayer-3.2.1.swf"> <param name="movie" value="flowplayer-3.2.1.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value='config={"clip": {"url": "http:// wearehugh.com/dih5/good/bbb_480p.mp4", "autoPlay":false, "autoBuffering":true}}' /> </object> </video>
  • AUDIO E’ utilizzato come tag per la riproduzione nativa di file audio. Il supporto per ora è solo su Firefox, Chrome e Safari (desktop). FORMATO IE Firefox Opera Chrome Safari Ogg Vorbis No 3.5 10.5 4.0 No MP3 No No No 4.0 4.0 Wav No 3.5 10.5 No 4.0 Aac No No No 4.0 4.0 M4p No No No 4.0 4.0
  • AUDIO Codice base con fallback: <audio controls> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> <object type="application/x-shockwave-flash" » data="player.swf?soundFile=song.mp3"> <a href="song.mp3">Download the song</a> </object> </audio>
  • CANVAS HTML5 introduce anche il nuovo elemento canvas con lo scopo di permettere la creazione di immagini dinamiche. <canvas id="my-canvas" width="560" height="420"> <p>No canvas? Ecco un’immagine:</p> <img src="immagine.jpg" alt="immagine"> </canvas>
  • CANVAS Firefox 3.5, Safari 4, Chrome 4, Opera 10 Per IE 6,7,8: http://code.google.com/p/explorercanvas/ Utilizzo: <head> <!--[if IE]><script src="excanvas.js"></script><![endif]--> </head> Poi, sull’onload: var el = document.createElement('canvas'); G_vmlCanvasManager.initElement(el); var ctx = el.getContext('2d'); per avere il supporto al context 2D.
  • CANVAS <!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript"> window.addEventListener('load', function () { var elem = document.getElementById('myCanvas'); if (!elem || !elem.getContext) { return; } var context = elem.getContext('2d'); // 2d context. if (!context) { return;} context.fillStyle = '#00f'; context.fillRect(0, 0, 150, 100); }, false); </script> </head> <body> <canvas id="myCanvas" width="200" height="150">Non hai il supporto per i canvas.</canvas></p> </body> </html>
  • RISORSE Modernizr (http://www.modernizr.com) if (!Modernizr.audio) { //JavaScript fallback. } E’ una libreria Javascript che verifica il supporto per le features di HTML5. NON le aggiunge!
  • RISORSE Modernizr HTML5 Cross browser Polyfills https://github.com/Modernizr/Modernizr/ wiki/HTML5-Cross-browser-Polyfills YEPNOPE https://github.com/SlexAxton/yepnope.js
  • RISORSE Dive into HTML5 (http://diveintohtml5.org/) Fondamentale.
  • RISORSE HTML5 ROCKS (http://www.html5rocks.com/) Slide, esempi e tutorial da Google.
  • RISORSE THE HTML5 TEST (http://html5test.com) Test del supporto ad HTML5. Basta collegarsi col browser da testare.
  • RISORSE WHEN CAN I USE... (http://caniuse.com/) Tabelle di compatibilità con link ad eventuali demo ed eventuali hack.
  • GRAZIE!