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 514 vues

Publié le

Wygdays= 2011 - Introduction à HTML5

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
3 514
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 642
Actions
Partages
0
Téléchargements
17
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 1 – balisevidéo. Demo simple from scratch avec video : http://msnvidweb.vo.msecnd.net/o3/IE9%20Demo/ToyStory_HTML5.mp42 – Scénario vrai vie : www.dailymotion.com/stream et www.lancome.fr 3 – Démo simple : https://david.blob.core.windows.net/html5graphics/003_SVGBasics_OnClick.htm &amp; http://david.blob.core.windows.net/html5graphics/004_SVGBasics_svgstyling.htm4 - SVG : ThemePark: http://david.blob.core.windows.net/html5graphics/002_SVGBasics_RichScene.htm5 – Scénariovrai vie : Bing Maps : http://www.bing.com/maps/#Y3A9NDguODQ2MjgzNjA3MTc5MzV+Mi4yNzk3OTgwMTU2MTg4MDgmbHZsPTEzJnN0eT1yJnJ0cD1wb3MuNDguODM0MzEyXzIuMjY1MTAxXzM5JTIwUXVhaSUyMGR1JTIwUHIlQzMlQTlzaWRlbnQlMjBSb29zZXZlbHQlMkMlMjA5MjEzMCUyMElzc3ktbGVzLU1vdWxpbmVhdXhfX19hX35wb3MuNDguODU4MjUwMzc5NTYyMzhfMi4yOTQ0OTUwMzEyMzc2MDIyX1RvdXIlMjBFaWZmZWwlMkMlMjBWaWxsZSUyMGRlJTIwUGFyaXMlMkMlMjBGcmFuY2VfX19lXyZtb2RlPUQmcnRvcD0wfjB+MH4=+ Diagrammehiérarchique Dynamics : http://ie.microsoft.com/testdrive/Graphics/MBSCustomerModel/Default.html+ Courbes : www.hightcharts.com + Raphael.Js : http://raphaeljs.com/6 – Intro Canvas : http://ie.microsoft.com/testdrive/Graphics/CanvasPad/Default.html7 – Scénariovrai vie : http://www.microsoft.com/office/onenote/ et angry birds8 – Combinaison de &lt;audio&gt;, &lt;canvas&gt; et &lt;svg&gt; et tags HTML5 sémantiques : http://www.sabrainpowerhtml5.com/8 – CSS3 Borders &amp; Background avec WebMatrix9 – CSS3 Media Queries simple : http://david.blob.core.windows.net/html5graphics/SimpleMediaQueries.htm10 – Vraie vie : http://mediaqueri.es/ 11 – Dans le futur : CSS3 MediaQueries + CSS3 Grid + CSS3 Multi Columns + Flexboxdans IE10 : http://ie.microsoft.com/testdrive/HTML5/Griddle/Default.html#popular
  • Design by Mark McCorkell
  • Scalability issuesProgramming modelCOMET technique (http://en.wikipedia.org/wiki/Comet_(programming)) Long PollingHidden iFrame
  • Specs are separately managed, they can get out of syncMicrosoft is participating actively in both WGs providing input into the process - Gabriel Montenegro is now co-char if HyBiProtocol can be outside the browserMicrosoft continues to offer feedback on areas that require additional detail to ensure interoperability by different implementations.Microsoft has recently offered an API proposal for Binary message support in WebSockets based on our API prototypes.
  • Testunitaire : http://w3c-test.org/html/tests/approved/canvas/2d.drawImage.image.incomplete.omitted.html
  • 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 />

    ×