Le document discute des enjeux et des défis liés à l'adoption de HTML5, en exposant ses avantages, son état actuel de développement et les différentes technologies associées. Il souligne l'importance de HTML5 pour le développement d'applications web cross-plateformes tout en mettant en évidence les problèmes de compatibilité avec les différents navigateurs. Le texte conclut que HTML5 est prometteur pour l'avenir du web, mais nécessite encore des précautions et des tests rigoureux.

1. Emplacement éventuel pour votre logo

2. Introduction à David Rousset - @davrousGiovanni Clémenthttp://blogs.msdn.com/davrousWygwam FranceMicrosoft France - DPE

3. AgendaC’est quoi HTML5 et pourquoi c’est important ?Introduction aux bases de HTML5Bonnes pratiques HTML5LabsLes challenges de l’écriture d’applications HTML5

4. HTML5 ?

5. Distribution normalehttp://on.wsj.com/f8PBa9Retour sur les bancs de l’école

6. http://on.wsj.com/f8PBa9C’est quoi le rapport avec la choucroute ?Les phases d’adoption d’une technologie

7. Résumé des épisodes précédents

8. Adobe dans la tourmenteLes attaques d’Apple face à Flash

9. La position d’AppleUne réponse possible…

10. Apple aime HTML5.

11. Google aime HTML5.

12. Microsoft aime HTML5.

13. Philippe Le HégaretW3C Leader

14. Une nouvelle saison commence !

16. HTML5 Working GroupsHTMLWebAppsCSSSVGwebPerformanceEcmaScriptGeo-LocationhybiPlus de 100 specifications !

17. HTML5 devrait être prêt pour le “Last Call” en Mai 2011CSS GENERATED CONTENT FOR PAGED MEDIAPROGRAMMABLE HTTP CACHING & SERVINGCSS CASCADING & INHERITANCECSS BACKGROUNDS & BORDERSDOM L2 TRAVERSAL AND RANGEUNIFORM MESSAGING POLICYCSS MULTI-COLUMN LAYOUTDOM L3 VIEWS & FOMUTINGDOM L3 ABSTRACT SCHEMASCSS 2D TRANSFORMATIONSCSS 3D TRANSFORMATOINSCSS BASIC USER INTERFACECSS FLEXIBLE BOX LAYOUTPAINTING, FILLING, COLORHTML5 DIFF FROM HTML4DOCUMENT STRUCTURECSS GRID POSITIONINGCSS TEMPLATE LAYOUTCSS BASIC BOX MODELDOM L3 LOAD & SAVECANVAS 2D CONTENTXMLHTTPREQUEST L2SERVER-SENT EVENTSWEB SQL DATABASDECSS WRITING MODESELEMENT TRAVERSALCSS VALUES & UNITSDOM L3 VALIDATIONCSS SNAPSHOT 2007CSS MEDIA QUERIESTEXT ALTERNATIVESPOLYGLOT MARKUPCSS IMAGE VALUESCSS PRINT PROFILEXMLHTTPREQUESTPROGRESS EVENTSCSS PAGED MEDIACSS TRANSITIONSCSS ANIMATIONSCSS NAMESPACESWEB SOCKETS APISELECTORS API L2ECMASCRIPT 262WEB DOM COREDOM L3 EVENTSHTML5 MARKUPDOM L2 EVENTSSELECTORS APIDOM L3 XPATHWEB STORAGEWEB WORKERSDOM L2 VIEWSDOM L2 HTMLDOM L2 STYLECSS LINE GRIDTRANSFORMSBASIC SHAPESCSS SCOPINGDOM L3 COREHTML + RDFADOM L2 CORECSS SPEECHMICRODATAGRADIENTSCSS COLORCSS FONTSSCRIPTINGINDEX DBCSS RUBYCSS TEXTSTYLINGWEB IDLFILE APIDOM L1FILTERSHTML5FONTSPATHSCORSSMILTEXTHTMLCSSECMA ScriptSVGWeb AppsFirst published working draftCandidaterecommendationWorking draftLast callRecommendation

18. Mais qui est prêt pour HTML5 ?Pas encore tout le monde…

19. Part de marché des navigateurs « HTML5 »IE9 + FF 4.0 + FF 3.6 + Chrome 8/9/10/11/12 + Opera 10/11 + Safari 5Selon Netmarketshare.com le 10/05/2011

20. Chiffres mondiaux au mois de février 2011

21. 54%*Des navigateurs supportent <canvas>* Source: caniuse.com, Mai 2011

22. 11%*Utilisent encore IE 6†* La Chine représente à elle seule 5.8%. USA à 0.6% † IE 6.0 existe depuis Août 2001

23. http://www.theie6countdown.com

24. 95,91%*Naviguent depuis une machine desktop* Dont 89% tournent sous Windows

25. 3,9%*depuis un navigateur mobile* Ce chiffre a doublé en 12 mois !

26. Et du côté des plug-ins?Pas si mort que ça hein…

27. Introduction aux bases d’HTML5Revue à travers quelquesexemples

28. HTML5HTML5 : Le markup de la future génération d’applications WebCSS3 (CascadingStyle Sheets) : permet d’appliquer des styles au documentSVG 1.1 (ScalableVectorGraphics) : moteur de dessin vectoriel+ plein d’autres technologies plus ou moins en rapportUn terme générique devenu cool… mais fourre-tout !

29. Découvrons HTML5A travers une belle série de démos !demo

30. Les orientations prises pour IE9.Performance. HTML5 prêt pour la production. Suite de tests.StandardsCommunauté

31. Mais alors, peut-on commencer à utiliser HTML5 ?Oui ! Mais en faisant attention, c’est tout.

32. Progressive EnhancementGraceful Degradation

33. Un exemple de bonnes pratiquesUtilisation de Modernizr dans ASP.NET MVC 3Fallbacks, CSS3Piedemo

34. HTML5 Labs

35. HTML5Labs.com Permet de tester des spécifications encore trop expérimentales sans toucher le navigateurActuellement 4 spécifications en test :WebSocketsFile APIIndexDBMedia Capture APIL’approche de Microsoft pour les expérimentations

36. Méthodes existantesPour palier aux limitations d’HTTPServeurPollingClientPolling intervalServeurLongPollingClient

37. La spécification WebSockets – 2 groupesW3C WebSockets APIWeb Applications Working GroupWebSockets ProtocolHyBi Working Group

38. Web SocketsW3C APIFirst DraftW3C APISecond DraftW3C APIThird DraftAPR 2011 JAN 2009 [Revs 02– 76]~80 drafts so far and still changingIETF v00IETF v01IETF v02IETF v03IETF v04IETF v05IETF v06First Working DraftIETF HyBi WG Adopts9/1/1010/17/101/9/09 10/29/094/23/095/23/109/24/101/11/112/8/112/9/112/25/113/11/1112/22/09Implemented in browsers v.75Jan 2010Breaking changeWebSockets v.76June 2010Potential Security Issue Identified WebSockets disabledDec 2010Prototypew/ v04Prototypew/ v05Prototypew/ v06

39. Démos WebSocketsHTML5Labs.comdemo

40. Les challenges HTML5

41. Le rêve des développeursEcrire l’application 1 fois et le plus vite possibleEviter de tester 12 523 fois l’application sur autant de plateformes différentesExécution cross-plateformes pour augmenter la rentabilitéHTML5, le messie?

42. Arrêtez de rêverLe père noël HTML5 ne règle pas encore tout… mais ce n’est pas une ordure pour autant ;-)

43. 1er Challenge : les différences de renduIl est logique d’avoir des différences entre navigateursMicrosoft travaille sur la suite de tests officielle6401 soumis: http://samples.msdn.microsoft.com/ietestcenter/Certains pensent qu’il en faudra plus de 100 000Vous pouvez participer ! Nous ne sommes pas encore en 2014

44. Démos différences renduExemple sur Canvas & SVGdemo

45. Challenge 1Pas de magie : il faut tester sur les différents navigateurs et savoir s’adapter

46. 2ème Challenge : les différences de performanceDifférence sur le matérielARM/Atom vs Intel Core i3/5/7 & AMDGPU Intégré vs ATI/nVidiaDifférence sur la qualité d’implémentation de l’accélération matérielleDifférence sur les performances du moteur JavaScriptUn iPad c’est fin mais pas forcément très puissant

47. Accélération matérielle dans les navigateursNiveau de supportIE9 vs Firefox 4 vs Safari 5 vs Chrome 10 vs Opera 11.50 labs

48. Challenge 2Soit on vise une plateforme préciseSoit on s’adapte dynamiquement en testant les perfsSoit on nivèle vers le bas

49. 3ème Challenge : les différences de tailles et de formesUne application PC n’est pas faite pour une tablettePlusieurs types d’applications envisageable : PC, Tablette, téléphone voir TV.Résolutions différentesErgonomies différentes

50. Challenge 3CSS3 Media Queries, CSS3 Multi-columns, CSS3 Flexbox, CSS3 Grid

51. 4ème Challenge : l’outillage et la productivitéNous en sommes qu’au débutAujourd’hui, l’outillage est limité ou très diffusVisual Studio 2010 SP1 et Expression Web 4 SP1Adobe CS5 (basé sur WebKit)Récemment : BlueGriffon (basé sur Gecko) Beaucoup de frameworks JavaScript différents plus ou moins matures et spécialisés Coûts de production potentiellement plus élevés que les plug-ins pour l’instant

52. Conclusion

53. HTML5 est bien l’avenir du WebOn peut commencer à utiliser HTML5 en productionMais ne laissez pas les anciens navigateurs sur le carreauMicrosoft continu d’investir sur HTML5 et IERythme de mises à jour des PP soutenu et non délirant Expérimentation avec HTML5LabsCertaines spécifications instables sont très prometteusesAttention à bien préfixer et soyez conscient du risqueHTML5 ne résout pas tous les problèmesMais de nouveaux scénarios pointent le bout de leur nez

54. Questions