Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (16)
Semelhante a Html5 now light
Semelhante a Html5 now light (20)
Mais de Jean-Pierre Vincent
Mais de Jean-Pierre Vincent (13)
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