Advertisement

More Related Content

Advertisement
Advertisement

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
Advertisement