Html5 now light

1. HTML5 en production Maintenant solutions pratiques de IE6 à nos jours Jean-pierre VINCENT

2. Qui ça ? Jean-pierre VINCENT braincracking.org @theystolemynick Je sers le Web et c'est ma joie : houra.fr, Yahoo!, Kelkoo Time of my Life.com

3. HTML5 en production Maintenant solutions pratiques de IE6 à nos jours Jean-pierre VINCENT

4. Le poids des mots HTML5 : 2022 (Ian Hickson, éditeur HMTL5)

5. Le poids des mots HTML5 : 2022 (Ian Hickson, éditeur HMTL5) “I don't think it's ready for production yet“ (Philippe Le Hégaret, chef HTML5)

6. 2022 ? pas peur ●

7. 2022 ? pas peur ● CSS 2.1 : candidate recommandation ●

8. 2022 ? pas peur ● CSS 2.1 : candidate recommandation ●Selector API 2 : Draft, mais utilisé par 90% des développeurs grâce à jQuery ●

9. 2022 ? pas peur ● CSS 2.1 : candidate recommandation ●Selector API 2 : Draft, mais utilisé par 90% des développeurs grâce à jQuery ●HTML4 : 1999, CSS: 1996 implémentations variées ...

10. Production !== Recommandation W3C

11. Production === Accès facile + stabilité + besoin

12. Web Storage

13. Stockage 7 implémentations !

14. Stockage Depuis ● IE 6-7 !

15. Web Storage ● UserData

16. Web Storage ● UserData ● GlobalStorage

17. Web Storage ● UserData ● GlobalStorage ● Flash shared object

18. Web Storage ● UserData ● GlobalStorage ● Flash shared object ● Hack window.name

19. Web Storage ● UserData ● GlobalStorage ● Flash shared object ● Hack window.name Et enfin Web Storage

20. Web Storage ● UserData ● GlobalStorage ● Flash shared object ● Hack window.name Et enfin Web Storage (3 implémentations)

21. Web Storage Développeur Librairie

22. Librairies IE UserData : • jQuery jStorage (jstorage.info) • YUI3 Storage lite (bit.ly/lib_store1)

23. Librairies IE UserData : • jQuery jStorage (jstorage.info) • YUI3 Storage lite (bit.ly/lib_store1) Flash shared object : ✓ YUI2 Storage (yhoo.it/lib_store2)

24. Librairies IE UserData : • jQuery jStorage (jstorage.info) • YUI3 Storage lite (bit.ly/lib_store1) Flash shared object : ✓ YUI2 Storage (yhoo.it/lib_store2) window.name : • sessionstorage (bit.ly/lib_store3)

25. Web Storage Conclusion ✓ OK pour la prod (je l'ai fait) IE fiable < 64k ou 100k

26. HTML5 Conclusion ✓ OK pour la prod (je l'ai fait) IE fiable < 64k ou 100k

27. quel HTML5 ? Officiel : Associé : • Balises ● Geolocation • Microdata ● SVG • Forms ● Upload • Multimédia • Canvas • Web Storage • Drag & Drop Buzz : • WebSockets ● CSS3 ...

28. HTML5 Découper, enrober, servir chaud

29. découpons HTML5 ● Sémantique ● APIs

30. Balises

31. Balises <!doctype html> bit.ly/HTML5_fr bit.ly/XHTML5_fr

32. Balises ✓ Migration HTML5 OK Merci :)

33. Balises (avant) <div> <div>...</div> </div> <div> <div>...<span> ... <p> <div>...</div> </div> <div>...</div>

34. Balises (avant) <div> <div>...</div> </div> <div> <div>...<span> ... <p> <div>...</div> </div> <div>...</div>

35. Balises (après)

36. Balises

37. Balises <meter value=25 max=100>

38. Balises <meter value=25 max=100> <progress value=25 max=100>

39. Balises <meter value=25 max=100> <progress value=25 max=100> <figure> <figcaption>

40. Balises <meter value=25 max=100> <progress value=25 max=100> <figure> <figcaption>

41. Balises - Bilan ● Standard ● Facile à comprendre === ● Bénéfices référencement (bientôt) ● Maintenable ● Accessible

42. Balises ✓ Production Dépendance JS pour IE6-8 bit.ly/HTML5_shiv

43. Microdata

44. Microdata Balisage sémantique avec vocabulaire personnalisé Concurrent de : ● Microformats ● RDFa

45. Microdata Intérêt immédiat : Google bit.ly/data-google

46. Microdata ● Sémantique standardisée === ● Référencement ● Accessibilité ● Exploitation par le navigateur

47. Microdata ✓ Utilisable en production

48. Formulaires

49. Formulaires - types <input type=email /> ● Clavier approprié ● Pré-remplissage ● Interface

50. Formulaires - types <input type=url /> ● Clavier approprié ● Pré-remplissage

51. Formulaires - types <input type=date /> ● Interface appropriée

52. Formulaires - types <input type=color /> ● Interface appropriée

53. Formulaires - types Non reconnu ?

54. Formulaires - types Non reconnu ? = type=text

55. Formulaires - types Non reconnu ? = type=text = ✓ fonctionnalité OK

56. Formulaires - types ✓ Production Accepter styles et Widgets natifs

57. </semantique> <script src=HTML5/API >

58. découpons HTML5 Officiel : Associé : ✓ Balises ● Geolocation ✓ Microdata ● SVG ✓ Forms ● Upload • Multimédia • Canvas ✓ Web Storage Buzz : • Drag & Drop ● CSS3 ... • WebSockets

59. Spécifications !== innovation

60. Standardiser Standardiser l'existant

61. Comment on faisait ?

62. Comment on faisait ? ● Geolocation ? Adresse IP

63. Comment on faisait ? ● Geolocation ? Adresse IP ● Drop de fichiers ? Applet java

64. Comment on faisait ? ● Geolocation ? Adresse IP ● Drop de fichiers ? Applet java ● Forms 2 ? Javascript

65. Comment on faisait ? ● Geolocation ? Adresse IP ● Drop de fichiers ? Applet java ● Forms 2 ? Javascript ● <video> ? Flash

66. Comment on faisait ? ● Geolocation ? Adresse IP ● Drop de fichiers ? Applet java ● Forms 2 ? Javascript ● <video> ? Flash ● Drag & Drop ? IE

67. Comment on faisait ? ● Geolocation ? Adresse IP ● Drop de fichiers ? Applet java ● Forms 2 ? Javascript ● <video> ? Flash ● Drag & Drop ? IE ● Online ? IE

68. Comment on faisait ? ● Geolocation ? Adresse IP ● Drop de fichiers ? Applet java ● Forms 2 ? Javascript ● <video> ? Flash ● Drag & Drop ? IE ● Online ? IE ● 2D ? VML, flash

69. Développeur Librairie

70. Formulaires

71. Forms - comportement bit.ly/form2_demo

72. Forms - comportement Emulation : ● H5F bit.ly/lib_H5F ● Webforms2 bit.ly/lib_WF2 bit.ly/form2_demo

73. Forms - comportement Déclaratif et standardisé

74. Forms - comportement Déclaratif et standardisé <input type=number />

75. Forms - comportement Déclaratif et standardisé <input type=number placeholder="Combien ?" />

76. Forms - comportement Déclaratif et standardisé <input type=number placeholder="Combien ?" required />

77. Forms - comportement Déclaratif et standardisé <input type=number placeholder="Combien ?" required autofocus />

78. Forms - comportement Déclaratif et standardisé <input type=number placeholder="Combien ?" required autofocus max=10 />

79. Forms - comportement Gain ? Standard === Accessibilité Facilité de codage

80. Forms - bilan ✓ OK pour création

81. Forms - bilan ✓ OK pour création ✓ OK pour enrichissement

82. Forms - bilan ✓ OK pour création ✓ OK pour enrichissement Modification : au cas par cas

83. Geolocation Vous êtes ici

84. Geolocation bit.ly/geoloc_demo

85. Geolocation Natif Détection IP 4km bit.ly/geoloc_demo

86. Geolocation Alternative : ● Achat de bases d'IP Librairie : ● YQL-Geo-Library • bit.ly/lib_geo

87. Geolocation ✓ Utilisable en production

88. découpons HTML5 Officiel : Associé : ✓ Balises ✓ Geolocation ✓ Microdata ● SVG ✓ Forms ● Upload • Multimédia • Canvas ✓ Web Storage • Drag & Drop • WebSockets

89. Plus de démos ?

90. Je vais conclure

91. Utilisez les standards ● Gains immédiats ● Accessibilité ● Référencement ● Utilisabilité ● Maintenance

92. Utilisez les librairies ● Accès facile ● Maintenance ● Suivi des Specs ● Contribuez

93. Maintenant ● Testez 2022 ● Jouez ● Déployez ● Partagez

94. Questions ? braincracking.org Remerciez timeOfMyLife.com

Html5 now light

You are reading a preview.

Html5 now light

More Related Content

Viewers also liked

More from Jean-Pierre Vincent

Featured

Related Books

Related Audiobooks

Html5 now light

Html5 now light

You are reading a preview.

Html5 now light

More Related Content

Viewers also liked

More from Jean-Pierre Vincent

Featured

Related Books

Related Audiobooks

Html5 now light

Just for you: FREE 60-day trial to the world’s largest digital library.