1. HTML 5 e browser legacy
Marco Assandri
info@sinergiatotale.it
2. 2022 2014 Q2
• Perché parlare di HTML5 se sarà
definitivo solo nel 2014?
• Devo cambiare il modo di scrivere
HTML?
• Come è la compatibilità con i vecchi
browser (IE6 per esempio)?
• Che sistemi di fallback posso usare
oggi?
3. Cosa riunisce HTML5?
Semantica
Offline e gestione dei dati
Accesso al dispositivo
Connettività
Multimedia
3D, grafica e effetti
Prestazioni e integrazione
CSS3 e stili
4. Semantica
• Nuovi tag
<header>, <article>, <nav>, <footer>, <aside>, <section>,
<figure>, …
• Tag eliminati
<frame>, <frameset>, <big>, <center>, <font>, <strike>
• Molte differenze sintattiche rispetto a
XHTML 1.1
http://www.w3.org/TR/html5-diff/#absent-attributes
• Attributi globali
contenteditable, data, …
• DEMO
5. Semantica e browser legacy
• I nuovi tag non vengono riconosciuti da
IE6-8.
http://www.html.it/guide/esempi/html5/tabella_supporto/tabella.html
http://fmbip.com/#target-selector
• http://www.texaswebdevelopers.com/html5/#agents=All&eras=All&ca
ts=All&alts=j&statuses=rec,pr,cr,wd,ietf
• Vale ancora la pena di considerare i
browser legacy?
7. IE6-8
• Tenendo in considerazione anche IE7 e
8 oltre arriviamo al 50%.
• Dipende molto dalla nazione.
• O possiamo decidere il browser
oppure sono necessari sistemi di
fallback!!!
• DEMO
8. Modernizr
• Permette il riconoscimento delle
funzionalità del browser
• Aggiunge classi al tag <html>
• Aggiunge supporto per elementi
HTML5
• Non aggiunge le funzionalità mancanti,
ma ne indica solo il supporto.
• Incluso nei ASP.NET MVC 3 Tools
11. Multimedia e fallback
• Tag <video> e <audio>
• I formati video e audio supportati
dipendono dai browser
http://camendesign.com/code/video_for_everybody/test.html
• I player sono diversi
• Possibilità di fallback con Silverlight o
Flash
• DEMO
12. Fallback <video>
• Video for everybody
• Video.js
• Mediaelement.js (fa anche audio e
supporta fallback su Silverlight)
• DEMO
16. Canvas
• Serve per creare grafica di tipo bitmap
• Bisogna usare javascript per disegnare
• Elemento <canvas> e <canvas-text>
• Fallback con:
FlashCanvas (http://flashcanvas.net/)
explorercanvas (http://code.google.com/p/explorercanvas/)
canvas-text (http://code.google.com/p/canvas-text/)
• DEMO
17. Grafica vettoriale
• SVG
Fallback con SVG Web http://code.google.com/p/svgweb/
• MathML
Fallback con Mathjax http://www.mathjax.org/
• DEMO SVG Web
18. Geolocalizzazione
• Permette di localizzare la posizione
dell’utente.
• Richiede il permesso dell’utente
• Fallback con Google API loader,
http://freegeoip.net o altri servizi di
localizzazione in base all’ip.
• Webshims Lib
• DEMO
19. Local storage e session storage
• Session storage permette di salvare dati
differenziati tra sessioni(tab diversi)
• Local storage maggiore spazio rispetto ai
cookie (almeno 5 mega) e persistenza. Non
passa al server.
• Fallback sui cookies o su local storage di
plugin (Silverlight, flash, …)
• Non sono condivisi tra diversi browser, ma
scatenano eventi intercettabili da altri tab.
• Per oggetti è necessario JSON.parse e JSON.
stringify
• DEMO
20. Microformats
Recipe
<span class="hrecipe">
<span class="fn">Tisana alla liquirizia</span>
<span class="ingredient">2 cucchiai di Zucchero</span>
<span class="ingredient">20g Radice di liquirizia</span>
<span class="yield">2</span>
<span class="instructions">
Scaldare un pentolino con 200cl d’acqua fino a 95°C;
versare la radice di liquirizia;
lasciar macerare per 7 minuti;
zuccherare e servire.
</span>
<span class="duration">
<span class="value-title" title="PT90M"></span> 90 min
</span>
</span>
rel=nofollow
Hcard
Hreview
Nascono per risolvere l’incapacità di descrivere il significato delle informazioni di una
pagina web in un formato interpretabile da altri software. Lista su http://microformats.org/
21. HTML 5 Cross Browser Polyfills
• Web Workers, Offline web applications
e altre feature non definitive hanno
fallback.
• Lista abbastanza completa
https://github.com/Modernizr/Modernizr/
wiki/HTML5-Cross-browser-Polyfills