HTML 5 e browser legacy

HTML 5 e browser legacy

Marco Assandri
info@sinergiatotale.it

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?

Cosa riunisce HTML5?
Semantica
Offline e gestione dei dati
Accesso al dispositivo
Connettività
Multimedia
3D, grafica e effetti
Prestazioni e integrazione
CSS3 e stili

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

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?

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

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

Esempi di fallback grafici
• Angoli arrotondati
• Ombre
• Gradienti
• RGBA - Opacità
• Trasparenza PNG
• Background multipli
• Font
http://www.fontsquirrel.com/fontface

• DEMO

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

Fallback <video>
• Video for everybody
• Video.js
• Mediaelement.js (fa anche audio e
supporta fallback su Silverlight)
• DEMO

Fallback <audio>
• Jplayer http://www.jplayer.org/ (fa anche
video)
Supporta fallback flash
HTML5: mp3, m4a (AAC), m4v (H.264),
ogv*, oga*, wav*, webm*
Flash: mp3, m4a (AAC), m4v (H.264)
Skinnabile
Playlist supportate
• Audio.js – solo mp3
• Mediaelement.js
• DEMO

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

Grafica vettoriale
• SVG
Fallback con SVG Web http://code.google.com/p/svgweb/

• MathML
Fallback con Mathjax http://www.mathjax.org/

• DEMO SVG Web

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

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

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/

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

HTML 5 e browser legacy

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à HTML 5 e browser legacy

Similaire à HTML 5 e browser legacy (20)

HTML 5 e browser legacy