Téléchargé 58 fois
Téléchargé parJean-Pierre Vincent
Html5 now light
Le document présente les solutions pratiques d'HTML5 et son utilisation en production, soulignant l'évolution des normes depuis IE6 jusqu'à aujourd'hui. Il traite des diverses caractéristiques d'HTML5, telles que le stockage web, les formulaires avancés et la sémantique, tout en recommandant l'utilisation de standards pour une meilleure accessibilité et maintenabilité. L'auteur conclut en encourageant les développeurs à tester et à adopter HTML5 en 2022.
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 desmots HTML5 : 2022 (Ian Hickson, éditeur HMTL5)
- 5. Le poids desmots HTML5 : 2022 (Ian Hickson, éditeur HMTL5) “I don't think it's ready for production yet“ (Philippe Le Hégaret, chef HTML5)
- 6. 2022 ? paspeur ●
- 7. 2022 ? paspeur ● CSS 2.1 : candidate recommandation ●
- 8. 2022 ? paspeur ● CSS 2.1 : candidate recommandation ●Selector API 2 : Draft, mais utilisé par 90% des développeurs grâce à jQuery ●
- 9. 2022 ? paspeur ● 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.
- 13.
- 14. Stockage Depuis ● IE6-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.
- 29. découpons HTML5 ● Sémantique ● APIs
- 30.
- 31. Balises <!doctype html> bit.ly/HTML5_fr bit.ly/XHTML5_fr
- 32. Balises ✓ Migration HTML5OK 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.
- 36.
- 37.
- 38. Balises <meter value=25 max=100> <progressvalue=25 max=100>
- 39. Balises <meter value=25 max=100> <progressvalue=25 max=100> <figure> <figcaption>
- 40. Balises <meter value=25 max=100> <progressvalue=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.
- 44. Microdata Balisage sémantiqueavec 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 enproduction
- 48.
- 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.
- 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.
- 61.
- 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.
- 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.
- 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 enproduction
- 88. découpons HTML5 Officiel : Associé : ✓ Balises ✓ Geolocation ✓ Microdata ● SVG ✓ Forms ● Upload • Multimédia • Canvas ✓ Web Storage • Drag & Drop • WebSockets
- 89.
- 90.
- 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