Emplacement éventuel pour votre logo<br />
 Introduction à <br />David Rousset - @davrousGiovanni Clément<br />http://blogs.msdn.com/davrousWygwam France<br />Micros...
Agenda<br />C’est quoi HTML5 et pourquoi c’est important ?<br />Introduction aux bases de HTML5<br />Bonnes pratiques <br ...
HTML5 ?<br />
Distribution normale<br />http://on.wsj.com/f8PBa9<br />Retour sur les bancs de l’école<br />
http://on.wsj.com/f8PBa9<br />C’est quoi le rapport avec la choucroute ?<br />Les phases d’adoption d’une technologie<br />
Résumé des épisodes précédents<br />
Adobe dans la tourmente<br />Les attaques d’Apple face à Flash<br />
La position d’Apple<br />Une réponse possible…<br />
Apple aime HTML5.<br />
Google aime HTML5.<br />
Microsoft aime HTML5.<br />
Philippe  Le HégaretW3C Leader<br />
Une nouvelle saison commence !<br />
HTML5 Working Groups<br />HTML<br />WebApps<br />CSS<br />SVG<br />webPerformance<br />EcmaScript<br />Geo-Location<br />h...
HTML5 devrait être prêt pour le “Last Call” en Mai 2011<br />CSS GENERATED CONTENT FOR PAGED MEDIA<br />PROGRAMMABLE HTTP ...
Mais qui est prêt pour HTML5 ?<br />Pas encore tout le monde…<br />
Part de marché des navigateurs « HTML5 »<br />IE9 + FF 4.0 + FF 3.6 + Chrome 8/9/10/11/12 + Opera 10/11 + Safari 5<br />Se...
Chiffres mondiaux au mois de février 2011<br />
54%*<br />Des navigateurs supportent <canvas><br />* Source: caniuse.com, Mai 2011<br />
11%*<br />Utilisent encore IE 6†<br />* La Chine représente à elle seule 5.8%. USA à 0.6% <br />† IE 6.0 existe depuis Aoû...
http://www.theie6countdown.com<br />
95,91%*<br />Naviguent depuis une machine desktop<br />* Dont 89% tournent sous Windows<br />
3,9%*<br />depuis un navigateur mobile<br />* Ce chiffre a doublé en 12 mois !<br />
Et du côté des plug-ins?<br />Pas si mort que ça hein…<br />
Introduction aux bases d’HTML5<br />Revue à travers quelquesexemples<br />
HTML5<br />HTML5 : Le markup de la future génération d’applications Web<br />CSS3 (CascadingStyle Sheets) : permet d’appli...
Découvrons HTML5<br />A travers une belle série de démos !<br />demo <br />
Les orientations prises pour IE9<br />.<br />Performance. HTML5 prêt pour la production. Suite de tests.<br />Standards<br...
Mais alors, peut-on commencer à utiliser HTML5 ?<br />Oui ! Mais en faisant attention, c’est tout.<br />
Progressive <br />Enhancement<br />Graceful <br />Degradation<br />
Un exemple de bonnes pratiques<br />Utilisation de Modernizr dans ASP.NET MVC 3<br />Fallbacks, CSS3Pie<br />demo <br />
HTML5 Labs<br />
HTML5Labs.com <br />Permet de tester des spécifications encore trop expérimentales sans toucher le navigateur<br />Actuell...
Méthodes existantes<br />Pour palier aux limitations d’HTTP<br />Serveur<br />Polling<br />Client<br />Polling interval<br...
La spécification WebSockets – 2 groupes<br />W3C WebSockets API<br />Web Applications Working Group<br />WebSockets Protoc...
Web Sockets<br />W3C API<br />First Draft<br />W3C API<br />Second Draft<br />W3C API<br />Third Draft<br />APR 2011 <br /...
Démos WebSockets<br />HTML5Labs.com<br />demo <br />
Les challenges HTML5<br />
Le rêve des développeurs<br />Ecrire l’application 1 fois et le plus vite possible<br />Eviter de tester 12 523 fois l’app...
Arrêtez de rêver<br />Le père noël HTML5 ne règle pas encore tout… mais ce n’est pas une ordure pour autant ;-)<br />
1er Challenge : les différences de rendu<br />Il est logique d’avoir des différences entre navigateurs<br />Microsoft trav...
Démos différences rendu<br />Exemple sur Canvas & SVG<br />demo <br />
Challenge 1<br />Pas de magie : il faut tester sur les différents navigateurs et savoir s’adapter<br />
2ème Challenge : les différences de performance<br />Différence sur le matériel<br />ARM/Atom vs Intel Core i3/5/7 & AMD<b...
Accélération matérielle dans les navigateurs<br />Niveau de support<br />IE9 vs Firefox 4 vs Safari 5 vs Chrome 10 vs Oper...
Challenge 2<br />Soit on vise une plateforme préciseSoit on s’adapte dynamiquement en testant les perfsSoit on nivèle vers...
3ème Challenge : les différences de tailles et de formes<br />Une application PC n’est pas faite pour une tablette<br />Pl...
Challenge 3<br />CSS3 Media Queries, CSS3 Multi-columns, CSS3 Flexbox, CSS3 Grid<br />
4ème Challenge : l’outillage et la productivité<br />Nous en sommes qu’au début<br />Aujourd’hui, l’outillage est limité o...
Conclusion<br />
HTML5 est bien l’avenir du Web<br />On peut commencer à utiliser HTML5 en production<br />Mais ne laissez pas les anciens ...
Questions<br />
Prochain SlideShare
Chargement dans…5
×

Wygday 2011 - Introduction à HTML5

3 605 vues

Publié le

Wygdays= 2011 - Introduction à HTML5

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Wygday 2011 - Introduction à HTML5

  1. 1. Emplacement éventuel pour votre logo<br />
  2. 2. Introduction à <br />David Rousset - @davrousGiovanni Clément<br />http://blogs.msdn.com/davrousWygwam France<br />Microsoft France - DPE<br />
  3. 3. Agenda<br />C’est quoi HTML5 et pourquoi c’est important ?<br />Introduction aux bases de HTML5<br />Bonnes pratiques <br />HTML5Labs<br />Les challenges de l’écriture d’applications HTML5 <br />
  4. 4. HTML5 ?<br />
  5. 5. Distribution normale<br />http://on.wsj.com/f8PBa9<br />Retour sur les bancs de l’école<br />
  6. 6. http://on.wsj.com/f8PBa9<br />C’est quoi le rapport avec la choucroute ?<br />Les phases d’adoption d’une technologie<br />
  7. 7. Résumé des épisodes précédents<br />
  8. 8. Adobe dans la tourmente<br />Les attaques d’Apple face à Flash<br />
  9. 9. La position d’Apple<br />Une réponse possible…<br />
  10. 10. Apple aime HTML5.<br />
  11. 11. Google aime HTML5.<br />
  12. 12. Microsoft aime HTML5.<br />
  13. 13. Philippe Le HégaretW3C Leader<br />
  14. 14. Une nouvelle saison commence !<br />
  15. 15.
  16. 16. HTML5 Working Groups<br />HTML<br />WebApps<br />CSS<br />SVG<br />webPerformance<br />EcmaScript<br />Geo-Location<br />hybi<br />Plus de 100 specifications !<br />
  17. 17. HTML5 devrait être prêt pour le “Last Call” en Mai 2011<br />CSS GENERATED CONTENT FOR PAGED MEDIA<br />PROGRAMMABLE HTTP CACHING & SERVING<br />CSS CASCADING & INHERITANCE<br />CSS BACKGROUNDS & BORDERS<br />DOM L2 TRAVERSAL AND RANGE<br />UNIFORM MESSAGING POLICY<br />CSS MULTI-COLUMN LAYOUT<br />DOM L3 VIEWS & FOMUTING<br />DOM L3 ABSTRACT SCHEMAS<br />CSS 2D TRANSFORMATIONS<br />CSS 3D TRANSFORMATOINS<br />CSS BASIC USER INTERFACE<br />CSS FLEXIBLE BOX LAYOUT<br />PAINTING, FILLING, COLOR<br />HTML5 DIFF FROM HTML4<br />DOCUMENT STRUCTURE<br />CSS GRID POSITIONING<br />CSS TEMPLATE LAYOUT<br />CSS BASIC BOX MODEL<br />DOM L3 LOAD & SAVE<br />CANVAS 2D CONTENT<br />XMLHTTPREQUEST L2<br />SERVER-SENT EVENTS<br />WEB SQL DATABASDE<br />CSS WRITING MODES<br />ELEMENT TRAVERSAL<br />CSS VALUES & UNITS<br />DOM L3 VALIDATION<br />CSS SNAPSHOT 2007<br />CSS MEDIA QUERIES<br />TEXT ALTERNATIVES<br />POLYGLOT MARKUP<br />CSS IMAGE VALUES<br />CSS PRINT PROFILE<br />XMLHTTPREQUEST<br />PROGRESS EVENTS<br />CSS PAGED MEDIA<br />CSS TRANSITIONS<br />CSS ANIMATIONS<br />CSS NAMESPACES<br />WEB SOCKETS API<br />SELECTORS API L2<br />ECMASCRIPT 262<br />WEB DOM CORE<br />DOM L3 EVENTS<br />HTML5 MARKUP<br />DOM L2 EVENTS<br />SELECTORS API<br />DOM L3 XPATH<br />WEB STORAGE<br />WEB WORKERS<br />DOM L2 VIEWS<br />DOM L2 HTML<br />DOM L2 STYLE<br />CSS LINE GRID<br />TRANSFORMS<br />BASIC SHAPES<br />CSS SCOPING<br />DOM L3 CORE<br />HTML + RDFA<br />DOM L2 CORE<br />CSS SPEECH<br />MICRODATA<br />GRADIENTS<br />CSS COLOR<br />CSS FONTS<br />SCRIPTING<br />INDEX DB<br />CSS RUBY<br />CSS TEXT<br />STYLING<br />WEB IDL<br />FILE API<br />DOM L1<br />FILTERS<br />HTML5<br />FONTS<br />PATHS<br />CORS<br />SMIL<br />TEXT<br />HTML<br />CSS<br />ECMA Script<br />SVG<br />Web Apps<br />First published working draft<br />Candidaterecommendation<br />Working draft<br />Last call<br />Recommendation<br />
  18. 18. Mais qui est prêt pour HTML5 ?<br />Pas encore tout le monde…<br />
  19. 19. Part de marché des navigateurs « HTML5 »<br />IE9 + FF 4.0 + FF 3.6 + Chrome 8/9/10/11/12 + Opera 10/11 + Safari 5<br />Selon Netmarketshare.com le 10/05/2011<br />
  20. 20. Chiffres mondiaux au mois de février 2011<br />
  21. 21. 54%*<br />Des navigateurs supportent <canvas><br />* Source: caniuse.com, Mai 2011<br />
  22. 22. 11%*<br />Utilisent encore IE 6†<br />* La Chine représente à elle seule 5.8%. USA à 0.6% <br />† IE 6.0 existe depuis Août 2001 <br />
  23. 23. http://www.theie6countdown.com<br />
  24. 24. 95,91%*<br />Naviguent depuis une machine desktop<br />* Dont 89% tournent sous Windows<br />
  25. 25. 3,9%*<br />depuis un navigateur mobile<br />* Ce chiffre a doublé en 12 mois !<br />
  26. 26. Et du côté des plug-ins?<br />Pas si mort que ça hein…<br />
  27. 27. Introduction aux bases d’HTML5<br />Revue à travers quelquesexemples<br />
  28. 28. HTML5<br />HTML5 : Le markup de la future génération d’applications Web<br />CSS3 (CascadingStyle Sheets) : permet d’appliquer des styles au document<br />SVG 1.1 (ScalableVectorGraphics) : moteur de dessin vectoriel<br />+ plein d’autres technologies plus ou moins en rapport<br />Un terme générique devenu cool… mais fourre-tout !<br />
  29. 29. Découvrons HTML5<br />A travers une belle série de démos !<br />demo <br />
  30. 30. Les orientations prises pour IE9<br />.<br />Performance. HTML5 prêt pour la production. Suite de tests.<br />Standards<br />Communauté<br />
  31. 31. Mais alors, peut-on commencer à utiliser HTML5 ?<br />Oui ! Mais en faisant attention, c’est tout.<br />
  32. 32. Progressive <br />Enhancement<br />Graceful <br />Degradation<br />
  33. 33. Un exemple de bonnes pratiques<br />Utilisation de Modernizr dans ASP.NET MVC 3<br />Fallbacks, CSS3Pie<br />demo <br />
  34. 34. HTML5 Labs<br />
  35. 35. HTML5Labs.com <br />Permet de tester des spécifications encore trop expérimentales sans toucher le navigateur<br />Actuellement 4 spécifications en test :<br />WebSockets<br />File API<br />IndexDB<br />Media Capture API<br />L’approche de Microsoft pour les expérimentations<br />
  36. 36. Méthodes existantes<br />Pour palier aux limitations d’HTTP<br />Serveur<br />Polling<br />Client<br />Polling interval<br />Serveur<br />Long<br />Polling<br />Client<br />
  37. 37. La spécification WebSockets – 2 groupes<br />W3C WebSockets API<br />Web Applications Working Group<br />WebSockets Protocol<br />HyBi Working Group<br />
  38. 38. Web Sockets<br />W3C API<br />First Draft<br />W3C API<br />Second Draft<br />W3C API<br />Third Draft<br />APR 2011 <br />JAN 2009 <br />[Revs 02– 76]<br />~80 drafts so far and still changing<br />IETF v00<br />IETF v01<br />IETF v02<br />IETF v03<br />IETF v04<br />IETF v05<br />IETF v06<br />First Working Draft<br />IETF HyBi WG Adopts<br />9/1/10<br />10/17/10<br />1/9/09 <br />10/29/09<br />4/23/09<br />5/23/10<br />9/24/10<br />1/11/11<br />2/8/11<br />2/9/11<br />2/25/11<br />3/11/11<br />12/22/09<br />Implemented <br />in browsers v.75<br />Jan 2010<br />Breaking change<br />WebSockets v.76<br />June 2010<br />Potential Security Issue Identified WebSockets disabled<br />Dec 2010<br />Prototype<br />w/ v04<br />Prototype<br />w/ v05<br />Prototype<br />w/ v06<br />
  39. 39. Démos WebSockets<br />HTML5Labs.com<br />demo <br />
  40. 40. Les challenges HTML5<br />
  41. 41. Le rêve des développeurs<br />Ecrire l’application 1 fois et le plus vite possible<br />Eviter de tester 12 523 fois l’application sur autant de plateformes différentes<br />Exécution cross-plateformes pour augmenter la rentabilité<br />HTML5, le messie?<br />
  42. 42. Arrêtez de rêver<br />Le père noël HTML5 ne règle pas encore tout… mais ce n’est pas une ordure pour autant ;-)<br />
  43. 43. 1er Challenge : les différences de rendu<br />Il est logique d’avoir des différences entre navigateurs<br />Microsoft travaille sur la suite de tests officielle<br />6401 soumis: http://samples.msdn.microsoft.com/ietestcenter/<br />Certains pensent qu’il en faudra plus de 100 000<br />Vous pouvez participer ! <br />Nous ne sommes pas encore en 2014<br />
  44. 44. Démos différences rendu<br />Exemple sur Canvas & SVG<br />demo <br />
  45. 45. Challenge 1<br />Pas de magie : il faut tester sur les différents navigateurs et savoir s’adapter<br />
  46. 46. 2ème Challenge : les différences de performance<br />Différence sur le matériel<br />ARM/Atom vs Intel Core i3/5/7 & AMD<br />GPU Intégré vs ATI/nVidia<br />Différence sur la qualité d’implémentation de l’accélération matérielle<br />Différence sur les performances du moteur JavaScript<br />Un iPad c’est fin mais pas forcément très puissant<br />
  47. 47. Accélération matérielle dans les navigateurs<br />Niveau de support<br />IE9 vs Firefox 4 vs Safari 5 vs Chrome 10 vs Opera 11.50 labs<br />
  48. 48. Challenge 2<br />Soit on vise une plateforme préciseSoit on s’adapte dynamiquement en testant les perfsSoit on nivèle vers le bas<br />
  49. 49. 3ème Challenge : les différences de tailles et de formes<br />Une application PC n’est pas faite pour une tablette<br />Plusieurs types d’applications envisageable : PC, Tablette, téléphone voir TV.<br />Résolutions différentes<br />Ergonomies différentes<br />
  50. 50. Challenge 3<br />CSS3 Media Queries, CSS3 Multi-columns, CSS3 Flexbox, CSS3 Grid<br />
  51. 51. 4ème Challenge : l’outillage et la productivité<br />Nous en sommes qu’au début<br />Aujourd’hui, l’outillage est limité ou très diffus<br />Visual Studio 2010 SP1 et Expression Web 4 SP1<br />Adobe CS5 (basé sur WebKit)<br />Récemment : BlueGriffon (basé sur Gecko) <br />Beaucoup de frameworks JavaScript différents plus ou moins matures et spécialisés <br />Coûts de production potentiellement plus élevés que les plug-ins pour l’instant<br />
  52. 52. Conclusion<br />
  53. 53. HTML5 est bien l’avenir du Web<br />On peut commencer à utiliser HTML5 en production<br />Mais ne laissez pas les anciens navigateurs sur le carreau<br />Microsoft continu d’investir sur HTML5 et IE<br />Rythme de mises à jour des PP soutenu et non délirant <br />Expérimentation avec HTML5Labs<br />Certaines spécifications instables sont très prometteuses<br />Attention à bien préfixer et soyez conscient du risque<br />HTML5 ne résout pas tous les problèmes<br />Mais de nouveaux scénarios pointent le bout de leur nez<br />
  54. 54. Questions<br />

×