Successfully reported this slideshow.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Html5 now light

  1. 1. HTML5 en production Maintenant solutions pratiques de IE6 à nos jours Jean-pierre VINCENT
  2. 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. 3. HTML5 en production Maintenant solutions pratiques de IE6 à nos jours Jean-pierre VINCENT
  4. 4. Le poids des mots HTML5 : 2022 (Ian Hickson, éditeur HMTL5)
  5. 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. 6. 2022 ? pas peur ●
  7. 7. 2022 ? pas peur ● CSS 2.1 : candidate recommandation ●
  8. 8. 2022 ? pas peur ● CSS 2.1 : candidate recommandation ●Selector API 2 : Draft, mais utilisé par 90% des développeurs grâce à jQuery ●
  9. 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. 10. Production !== Recommandation W3C
  11. 11. Production === Accès facile + stabilité + besoin
  12. 12. Web Storage
  13. 13. Stockage 7 implémentations !
  14. 14. Stockage Depuis ● IE 6-7 !
  15. 15. Web Storage ● UserData
  16. 16. Web Storage ● UserData ● GlobalStorage
  17. 17. Web Storage ● UserData ● GlobalStorage ● Flash shared object
  18. 18. Web Storage ● UserData ● GlobalStorage ● Flash shared object ● Hack window.name
  19. 19. Web Storage ● UserData ● GlobalStorage ● Flash shared object ● Hack window.name Et enfin Web Storage
  20. 20. Web Storage ● UserData ● GlobalStorage ● Flash shared object ● Hack window.name Et enfin Web Storage (3 implémentations)
  21. 21. Web Storage Développeur Librairie
  22. 22. Librairies IE UserData : • jQuery jStorage (jstorage.info) • YUI3 Storage lite (bit.ly/lib_store1)
  23. 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. 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. 25. Web Storage Conclusion ✓ OK pour la prod (je l'ai fait) IE fiable < 64k ou 100k
  26. 26. HTML5 Conclusion ✓ OK pour la prod (je l'ai fait) IE fiable < 64k ou 100k
  27. 27. quel HTML5 ? Officiel : Associé : • Balises ● Geolocation • Microdata ● SVG • Forms ● Upload • Multimédia • Canvas • Web Storage • Drag & Drop Buzz : • WebSockets ● CSS3 ...
  28. 28. HTML5 Découper, enrober, servir chaud
  29. 29. découpons HTML5 ● Sémantique ● APIs
  30. 30. Balises
  31. 31. Balises <!doctype html> bit.ly/HTML5_fr bit.ly/XHTML5_fr
  32. 32. Balises ✓ Migration HTML5 OK Merci :)
  33. 33. Balises (avant) <div> <div>...</div> </div> <div> <div>...<span> ... <p> <div>...</div> </div> <div>...</div>
  34. 34. Balises (avant) <div> <div>...</div> </div> <div> <div>...<span> ... <p> <div>...</div> </div> <div>...</div>
  35. 35. Balises (après)
  36. 36. Balises
  37. 37. Balises <meter value=25 max=100>
  38. 38. Balises <meter value=25 max=100> <progress value=25 max=100>
  39. 39. Balises <meter value=25 max=100> <progress value=25 max=100> <figure> <figcaption>
  40. 40. Balises <meter value=25 max=100> <progress value=25 max=100> <figure> <figcaption>
  41. 41. Balises - Bilan ● Standard ● Facile à comprendre === ● Bénéfices référencement (bientôt) ● Maintenable ● Accessible
  42. 42. Balises ✓ Production Dépendance JS pour IE6-8 bit.ly/HTML5_shiv
  43. 43. Microdata
  44. 44. Microdata Balisage sémantique avec vocabulaire personnalisé Concurrent de : ● Microformats ● RDFa
  45. 45. Microdata Intérêt immédiat : Google bit.ly/data-google
  46. 46. Microdata ● Sémantique standardisée === ● Référencement ● Accessibilité ● Exploitation par le navigateur
  47. 47. Microdata ✓ Utilisable en production
  48. 48. Formulaires
  49. 49. Formulaires - types <input type=email /> ● Clavier approprié ● Pré-remplissage ● Interface
  50. 50. Formulaires - types <input type=url /> ● Clavier approprié ● Pré-remplissage
  51. 51. Formulaires - types <input type=date /> ● Interface appropriée
  52. 52. Formulaires - types <input type=color /> ● Interface appropriée
  53. 53. Formulaires - types Non reconnu ?
  54. 54. Formulaires - types Non reconnu ? = type=text
  55. 55. Formulaires - types Non reconnu ? = type=text = ✓ fonctionnalité OK
  56. 56. Formulaires - types ✓ Production Accepter styles et Widgets natifs
  57. 57. </semantique> <script src=HTML5/API >
  58. 58. découpons HTML5 Officiel : Associé : ✓ Balises ● Geolocation ✓ Microdata ● SVG ✓ Forms ● Upload • Multimédia • Canvas ✓ Web Storage Buzz : • Drag & Drop ● CSS3 ... • WebSockets
  59. 59. Spécifications !== innovation
  60. 60. Standardiser Standardiser l'existant
  61. 61. Comment on faisait ?
  62. 62. Comment on faisait ? ● Geolocation ? Adresse IP
  63. 63. Comment on faisait ? ● Geolocation ? Adresse IP ● Drop de fichiers ? Applet java
  64. 64. Comment on faisait ? ● Geolocation ? Adresse IP ● Drop de fichiers ? Applet java ● Forms 2 ? Javascript
  65. 65. Comment on faisait ? ● Geolocation ? Adresse IP ● Drop de fichiers ? Applet java ● Forms 2 ? Javascript ● <video> ? Flash
  66. 66. Comment on faisait ? ● Geolocation ? Adresse IP ● Drop de fichiers ? Applet java ● Forms 2 ? Javascript ● <video> ? Flash ● Drag & Drop ? IE
  67. 67. Comment on faisait ? ● Geolocation ? Adresse IP ● Drop de fichiers ? Applet java ● Forms 2 ? Javascript ● <video> ? Flash ● Drag & Drop ? IE ● Online ? IE
  68. 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. 69. Développeur Librairie
  70. 70. Formulaires
  71. 71. Forms - comportement bit.ly/form2_demo
  72. 72. Forms - comportement Emulation : ● H5F bit.ly/lib_H5F ● Webforms2 bit.ly/lib_WF2 bit.ly/form2_demo
  73. 73. Forms - comportement Déclaratif et standardisé
  74. 74. Forms - comportement Déclaratif et standardisé <input type=number />
  75. 75. Forms - comportement Déclaratif et standardisé <input type=number placeholder="Combien ?" />
  76. 76. Forms - comportement Déclaratif et standardisé <input type=number placeholder="Combien ?" required />
  77. 77. Forms - comportement Déclaratif et standardisé <input type=number placeholder="Combien ?" required autofocus />
  78. 78. Forms - comportement Déclaratif et standardisé <input type=number placeholder="Combien ?" required autofocus max=10 />
  79. 79. Forms - comportement Gain ? Standard === Accessibilité Facilité de codage
  80. 80. Forms - bilan ✓ OK pour création
  81. 81. Forms - bilan ✓ OK pour création ✓ OK pour enrichissement
  82. 82. Forms - bilan ✓ OK pour création ✓ OK pour enrichissement Modification : au cas par cas
  83. 83. Geolocation Vous êtes ici
  84. 84. Geolocation bit.ly/geoloc_demo
  85. 85. Geolocation Natif Détection IP 4km bit.ly/geoloc_demo
  86. 86. Geolocation Alternative : ● Achat de bases d'IP Librairie : ● YQL-Geo-Library • bit.ly/lib_geo
  87. 87. Geolocation ✓ Utilisable en production
  88. 88. découpons HTML5 Officiel : Associé : ✓ Balises ✓ Geolocation ✓ Microdata ● SVG ✓ Forms ● Upload • Multimédia • Canvas ✓ Web Storage • Drag & Drop • WebSockets
  89. 89. Plus de démos ?
  90. 90. Je vais conclure
  91. 91. Utilisez les standards ● Gains immédiats ● Accessibilité ● Référencement ● Utilisabilité ● Maintenance
  92. 92. Utilisez les librairies ● Accès facile ● Maintenance ● Suivi des Specs ● Contribuez
  93. 93. Maintenant ● Testez 2022 ● Jouez ● Déployez ● Partagez
  94. 94. Questions ? braincracking.org Remerciez timeOfMyLife.com

×