Html5 now light
1 j'aime1,287 vues
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 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
- 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
- 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
- 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
- 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
- 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