Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML 5 e browser legacy

478 views

Published on

Published in: Technology
  • Be the first to comment

HTML 5 e browser legacy

  1. 1. HTML 5 e browser legacyMarco Assandriinfo@sinergiatotale.it
  2. 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. 3. Cosa riunisce HTML5?SemanticaOffline e gestione dei datiAccesso al dispositivoConnettivitàMultimedia3D, grafica e effettiPrestazioni e integrazioneCSS3 e stili
  4. 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. 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?
  6. 6. theie6countdown.com
  7. 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. 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
  9. 9. Modernizr• DEMO
  10. 10. Esempi di fallback grafici• Angoli arrotondati• Ombre• Gradienti• RGBA - Opacità• Trasparenza PNG• Background multipli• Font http://www.fontsquirrel.com/fontface• DEMO
  11. 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. 12. Fallback <video>• Video for everybody• Video.js• Mediaelement.js (fa anche audio e supporta fallback su Silverlight)• DEMO
  13. 13. <video>
  14. 14. <audio>
  15. 15. 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
  16. 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. 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. 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. 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. 20. 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=nofollowHcardHreviewNascono per risolvere l’incapacità di descrivere il significato delle informazioni di unapagina web in un formato interpretabile da altri software. Lista su http://microformats.org/
  21. 21. HTML 5 Cross Browser Polyfills• Web Workers, Offline web applications e altre feature non definitive hanno fallback.• Lista abbastanza completahttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

×