HTML 5 e browser legacy
22
-
Upload
sinergia-totale -
Category
Technology
-
view
327 -
download
0
Transcript of HTML 5 e browser legacy
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.1http://www.w3.org/TR/html5-diff/#absent-attributes
• Attributi globalicontenteditable, 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?
theie6countdown.com
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
Modernizr
• DEMO
Esempi di fallback grafici
• Angoli arrotondati
• Ombre
• Gradienti
• RGBA - Opacità
• Trasparenza PNG
• Background multipli
• Fonthttp://www.fontsquirrel.com/fontface
• DEMO
Multimedia e fallback
• Tag <video> e <audio>
• I formati video e audio supportati
dipendono dai browserhttp://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
<video>
<audio>
Fallback <audio>
• Jplayer http://www.jplayer.org/ (fa anche video)Supporta fallback flashHTML5: mp3, m4a (AAC), m4v (H.264), ogv*, oga*, wav*, webm*Flash: mp3, m4a (AAC), m4v (H.264)SkinnabilePlaylist 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
• SVGFallback con SVG Web http://code.google.com/p/svgweb/
• MathMLFallback 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 storagemaggiore 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
MicroformatsRecipe<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
