Wygdays= 2011 - Introduction à HTML5

1. Emplacement éventuel pour votre logo

2. Introduction à David Rousset - @davrousGiovanni Clément http://blogs.msdn.com/davrousWygwam France Microsoft France - DPE

3. Agenda C’est quoi HTML5 et pourquoi c’est important ? Introduction aux bases de HTML5 Bonnes pratiques HTML5Labs Les challenges de l’écriture d’applications HTML5

4. HTML5 ?

5. Distribution normale http://on.wsj.com/f8PBa9 Retour sur les bancs de l’école

6. http://on.wsj.com/f8PBa9 C’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 tourmente Les attaques d’Apple face à Flash

9. La position d’Apple Une 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 Groups HTML WebApps CSS SVG webPerformance EcmaScript Geo-Location hybi Plus de 100 specifications !

17. HTML5 devrait être prêt pour le “Last Call” en Mai 2011 CSS GENERATED CONTENT FOR PAGED MEDIA PROGRAMMABLE HTTP CACHING & SERVING CSS CASCADING & INHERITANCE CSS BACKGROUNDS & BORDERS DOM L2 TRAVERSAL AND RANGE UNIFORM MESSAGING POLICY CSS MULTI-COLUMN LAYOUT DOM L3 VIEWS & FOMUTING DOM L3 ABSTRACT SCHEMAS CSS 2D TRANSFORMATIONS CSS 3D TRANSFORMATOINS CSS BASIC USER INTERFACE CSS FLEXIBLE BOX LAYOUT PAINTING, FILLING, COLOR HTML5 DIFF FROM HTML4 DOCUMENT STRUCTURE CSS GRID POSITIONING CSS TEMPLATE LAYOUT CSS BASIC BOX MODEL DOM L3 LOAD & SAVE CANVAS 2D CONTENT XMLHTTPREQUEST L2 SERVER-SENT EVENTS WEB SQL DATABASDE CSS WRITING MODES ELEMENT TRAVERSAL CSS VALUES & UNITS DOM L3 VALIDATION CSS SNAPSHOT 2007 CSS MEDIA QUERIES TEXT ALTERNATIVES POLYGLOT MARKUP CSS IMAGE VALUES CSS PRINT PROFILE XMLHTTPREQUEST PROGRESS EVENTS CSS PAGED MEDIA CSS TRANSITIONS CSS ANIMATIONS CSS NAMESPACES WEB SOCKETS API SELECTORS API L2 ECMASCRIPT 262 WEB DOM CORE DOM L3 EVENTS HTML5 MARKUP DOM L2 EVENTS SELECTORS API DOM L3 XPATH WEB STORAGE WEB WORKERS DOM L2 VIEWS DOM L2 HTML DOM L2 STYLE CSS LINE GRID TRANSFORMS BASIC SHAPES CSS SCOPING DOM L3 CORE HTML + RDFA DOM L2 CORE CSS SPEECH MICRODATA GRADIENTS CSS COLOR CSS FONTS SCRIPTING INDEX DB CSS RUBY CSS TEXT STYLING WEB IDL FILE API DOM L1 FILTERS HTML5 FONTS PATHS CORS SMIL TEXT HTML CSS ECMA Script SVG Web Apps First published working draft Candidaterecommendation Working draft Last call Recommendation

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 5 Selon 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’HTML5 Revue à travers quelquesexemples

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

29. Découvrons HTML5 A 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. Standards Communauté

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

32. Progressive Enhancement Graceful Degradation

33. Un exemple de bonnes pratiques Utilisation de Modernizr dans ASP.NET MVC 3 Fallbacks, CSS3Pie demo

34. HTML5 Labs

35. HTML5Labs.com Permet de tester des spécifications encore trop expérimentales sans toucher le navigateur Actuellement 4 spécifications en test : WebSockets File API IndexDB Media Capture API L’approche de Microsoft pour les expérimentations

36. Méthodes existantes Pour palier aux limitations d’HTTP Serveur Polling Client Polling interval Serveur Long Polling Client

37. La spécification WebSockets – 2 groupes W3C WebSockets API Web Applications Working Group WebSockets Protocol HyBi Working Group

38. Web Sockets W3C API First Draft W3C API Second Draft W3C API Third Draft APR 2011 JAN 2009 [Revs 02– 76] ~80 drafts so far and still changing IETF v00 IETF v01 IETF v02 IETF v03 IETF v04 IETF v05 IETF v06 First Working Draft IETF HyBi WG Adopts 9/1/10 10/17/10 1/9/09 10/29/09 4/23/09 5/23/10 9/24/10 1/11/11 2/8/11 2/9/11 2/25/11 3/11/11 12/22/09 Implemented in browsers v.75 Jan 2010 Breaking change WebSockets v.76 June 2010 Potential Security Issue Identified WebSockets disabled Dec 2010 Prototype w/ v04 Prototype w/ v05 Prototype w/ v06

39. Démos WebSockets HTML5Labs.com demo

40. Les challenges HTML5

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

42. Arrêtez de rêver Le 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 rendu Il est logique d’avoir des différences entre navigateurs Microsoft travaille sur la suite de tests officielle 6401 soumis: http://samples.msdn.microsoft.com/ietestcenter/ Certains pensent qu’il en faudra plus de 100 000 Vous pouvez participer ! Nous ne sommes pas encore en 2014

44. Démos différences rendu Exemple sur Canvas & SVG demo

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

46. 2ème Challenge : les différences de performance Différence sur le matériel ARM/Atom vs Intel Core i3/5/7 & AMD GPU Intégré vs ATI/nVidia Différence sur la qualité d’implémentation de l’accélération matérielle Différence sur les performances du moteur JavaScript Un iPad c’est fin mais pas forcément très puissant

47. Accélération matérielle dans les navigateurs Niveau de support IE9 vs Firefox 4 vs Safari 5 vs Chrome 10 vs Opera 11.50 labs

48. Challenge 2 Soit 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 formes Une application PC n’est pas faite pour une tablette Plusieurs types d’applications envisageable : PC, Tablette, téléphone voir TV. Résolutions différentes Ergonomies différentes

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

51. 4ème Challenge : l’outillage et la productivité Nous en sommes qu’au début Aujourd’hui, l’outillage est limité ou très diffus Visual Studio 2010 SP1 et Expression Web 4 SP1 Adobe 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 Web On peut commencer à utiliser HTML5 en production Mais ne laissez pas les anciens navigateurs sur le carreau Microsoft continu d’investir sur HTML5 et IE Rythme de mises à jour des PP soutenu et non délirant Expérimentation avec HTML5Labs Certaines spécifications instables sont très prometteuses Attention à bien préfixer et soyez conscient du risque HTML5 ne résout pas tous les problèmes Mais de nouveaux scénarios pointent le bout de leur nez

54. Questions