1. Slim Soussi Vladimir Kostarev David Catuhe David Rousset
Intel Intel Microsoft Microsoft
2. David Catuhe / Microsoft David Rousset / Microsoft
http://blogs.msdn.com/eternalcoding http://blogs.msdn.com/davrous
davca@microsoft.com davrous@microsoft.com
3. Agenda
• C’est quoi HTML5 et pourquoi c’est
important ?
• La partie d’HTML5 la plus répandue et
supportée
• Comment supporter les anciens
navigateurs ?
• Les spécifications les plus récentes
4.
5. HTML5: un terme générique cool…mais fourre-tout !
• HTML5 : Le markup de la future génération
d’applications Web
• CSS3 (Cascading Style Sheet) : permet d’appliquer
des styles au document
• SVG 1.1 (Scalable Vector Graphics) : moteur de
dessin vectoriel
• + plein d’autres technologies plus ou moins en
rapport comme WebGL, géolocalisation, etc.
12. L’approche de Microsoft autour d’HTML5
HTML5 Travail en // Investissement Travail sur
avec les sur les standards
prêt pour la l’intéropérabilité émergeants
production développeurs
13. Des applications HTML5 performantes
• L’ensemble des éléments d’HTML5 sont
« matériellement accélérés » par le GPU
• Nouveau moteur JavaScript Chakra
utilisant les processeurs multi-cœurs
21. David Catuhe : davca@microsoft.com - http://blogs.msdn.com/eternalcoding
David Rousset : davrous@microsoft.com – http://blogs.msdn.com/davrous
Notas del editor
1 – HTML5 Semantic tags basé sur le cahier de vacances: http://blogs.msdn.com/b/davrous/archive/2011/08/25/tutorial-html5-d-233-couverte-des-tags-s-233-mantiques-d-un-soup-231-on-de-css3-et-de-modernizr.aspx2 – SVG :SVG ThemeParksSVG Bing MapsHigh ChartsjsFiddle et Highcharts3 – Canvas :Canvas PadMosaique TelethonLibrairiegraphique The Jit4 – Accélération matérielle :Balise vidéo et carrousel imagesJeu vidéo Platformer5 – CSS3 : Borders & Shadow en reprenant l’exemple simple des cahiers de vacances + modif à coup de F12CSS3 Media Queries simplehttp://mediaqueri.es et http://foodsense.is/
Design by Mark McCorkell
Gracefulldegradation avec exemple cahier de vacances sur CSS3 borders & radiusProgressive enhancement avec Modernizr pour tags sémantique HTML5 et pour charger SVG ou PNG (cahier de vacances)
CSS3 Multi-colonnes CSS3 Grid simpleDémo CSS3 Transitions + Progressive enhancement avec librairie CSS3 Transitions (ton article)CSS3 Animation avec SVG + gracefulldegradation en IE9 (image statique) CSS3 Animation + Progressive enhancement avec CSS3 Animations (mon article)DemoWebWorkers avec RayTracer en mode IE9 puis IE10Demo AppCache + IndexDB