Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5 en production Maintenant solutions pratiques de IE6 à nos jours Jean-pierre VINCENT
Qui ça ? Jean-pierre VINCENT braincracking.org @theystolemynick Je sers le Web et c'est ma joie : ho...
HTML5 en production Maintenant solutions pratiques de IE6 à nos jours Jean-pierre VINCENT
Le poids des mots HTML5 : 2022 (Ian Hickson, éditeur HMTL5)
Le poids des mots HTML5 : 2022 (Ian Hickson, éditeur HMTL5) “I don't think it's ready for production yet“ (Philippe Le ...
2022 ? pas peur ●
2022 ? pas peur ● CSS 2.1 : candidate recommandation ●
2022 ? pas peur ● CSS 2.1 : candidate recommandation ●Selector API 2 : Draft, mais utilisé par 90% des développeurs grâ...
2022 ? pas peur ● CSS 2.1 : candidate recommandation ●Selector API 2 : Draft, mais utilisé par 90% des développeurs grâ...
Production !== Recommandation W3C
Production === Accès facile + stabilité + besoin
Web Storage
Stockage 7 implémentations !
Stockage Depuis ● IE 6-7 !
Web Storage ● UserData
Web Storage ● UserData ● GlobalStorage
Web Storage ● UserData ● GlobalStorage ● Flash shared object
Web Storage ● UserData ● GlobalStorage ● Flash shared object ● Hack window.name
Web Storage ● UserData ● GlobalStorage ● Flash shared object ● Hack window.name Et enfin Web Storage
Web Storage ● UserData ● GlobalStorage ● Flash shared object ● Hack window.name Et enfin Web Storage (3 implémentat...
Web Storage Développeur Librairie
Librairies IE UserData : • jQuery jStorage (jstorage.info) • YUI3 Storage lite (bit.ly/lib_store1)
Librairies IE UserData : • jQuery jStorage (jstorage.info) • YUI3 Storage lite (bit.ly/lib_store1) Flash shared...
Librairies IE UserData : • jQuery jStorage (jstorage.info) • YUI3 Storage lite (bit.ly/lib_store1) Flash shared...
Web Storage Conclusion ✓ OK pour la prod (je l'ai fait) IE fiable < 64k ou 100k
HTML5 Conclusion ✓ OK pour la prod (je l'ai fait) IE fiable < 64k ou 100k
quel HTML5 ? Officiel : Associé : • Balises ● Geolocation • Microdata ● SVG • Forms ● Upload ...
HTML5 Découper, enrober, servir chaud
découpons HTML5 ● Sémantique ● APIs
Balises
Balises <!doctype html> bit.ly/HTML5_fr bit.ly/XHTML5_fr
Balises ✓ Migration HTML5 OK Merci :)
Balises (avant) <div> <div>...</div> </div> <div> <div>...<span> ... <p> <div>...</div> </div> <div>...</div>
Balises (avant) <div> <div>...</div> </div> <div> <div>...<span> ... <p> <div>...</div> </div> <div>...</div>
Balises (après)
Balises
Balises <meter value=25 max=100>
Balises <meter value=25 max=100> <progress value=25 max=100>
Balises <meter value=25 max=100> <progress value=25 max=100> <figure> <figcaption>
Balises <meter value=25 max=100> <progress value=25 max=100> <figure> <figcaption>
Balises - Bilan ● Standard ● Facile à comprendre === ● Bénéfices référencement (bientôt) ● Maintenab...
Balises ✓ Production Dépendance JS pour IE6-8 bit.ly/HTML5_shiv
Microdata
Microdata Balisage sémantique avec vocabulaire personnalisé Concurrent de : ● Microformats ● RDFa
Microdata Intérêt immédiat : Google bit.ly/data-google
Microdata ● Sémantique standardisée === ● Référencement ● Accessibilité ● Exploitation par le navigateur
Microdata ✓ Utilisable en production
Formulaires
Formulaires - types <input type=email /> ● Clavier approprié ● Pré-remplissage ● Interface
Formulaires - types <input type=url /> ● Clavier approprié ● Pré-remplissage
Formulaires - types <input type=date /> ● Interface appropriée
Formulaires - types <input type=color /> ● Interface appropriée
Formulaires - types Non reconnu ?
Formulaires - types Non reconnu ? = type=text
Formulaires - types Non reconnu ? = type=text = ✓ fonctionnalité OK
Formulaires - types ✓ Production Accepter styles et Widgets natifs
</semantique> <script src=HTML5/API >
découpons HTML5 Officiel : Associé : ✓ Balises ● Geolocation ✓ Microdata ● SVG ✓ Forms ● Up...
Spécifications !== innovation
Standardiser Standardiser l'existant
Comment on faisait ?
Comment on faisait ? ● Geolocation ? Adresse IP
Comment on faisait ? ● Geolocation ? Adresse IP ● Drop de fichiers ? Applet java
Comment on faisait ? ● Geolocation ? Adresse IP ● Drop de fichiers ? Applet java ● Forms 2 ? Javascript
Comment on faisait ? ● Geolocation ? Adresse IP ● Drop de fichiers ? Applet java ● Forms 2 ? Javascrip...
Comment on faisait ? ● Geolocation ? Adresse IP ● Drop de fichiers ? Applet java ● Forms 2 ? Javascrip...
Comment on faisait ? ● Geolocation ? Adresse IP ● Drop de fichiers ? Applet java ● Forms 2 ? Javascrip...
Comment on faisait ? ● Geolocation ? Adresse IP ● Drop de fichiers ? Applet java ● Forms 2 ? Javascrip...
Développeur Librairie
Formulaires
Forms - comportement bit.ly/form2_demo
Forms - comportement Emulation : ● H5F bit.ly/lib_H5F ● Webforms2 bit.ly/lib_WF2 bit....
Forms - comportement Déclaratif et standardisé
Forms - comportement Déclaratif et standardisé <input type=number />
Forms - comportement Déclaratif et standardisé <input type=number placeholder="Combien ?" />
Forms - comportement Déclaratif et standardisé <input type=number placeholder="Combien ?" required />
Forms - comportement Déclaratif et standardisé <input type=number placeholder="Combien ?" required autofocus ...
Forms - comportement Déclaratif et standardisé <input type=number placeholder="Combien ?" required autofocu...
Forms - comportement Gain ? Standard === Accessibilité Facilité de codage
Forms - bilan ✓ OK pour création
Forms - bilan ✓ OK pour création ✓ OK pour enrichissement
Forms - bilan ✓ OK pour création ✓ OK pour enrichissement Modification : au cas par cas
Geolocation Vous êtes ici
Geolocation bit.ly/geoloc_demo
Geolocation Natif Détection IP 4km bit.ly/geoloc_demo
Geolocation Alternative : ● Achat de bases d'IP Librairie : ● YQL-Geo-Library • bit.ly/lib_geo
Geolocation ✓ Utilisable en production
découpons HTML5 Officiel : Associé : ✓ Balises ✓ Geolocation ✓ Microdata ● SVG ✓ Forms ● Upl...
Plus de démos ?
Je vais conclure
Utilisez les standards ● Gains immédiats ● Accessibilité ● Référencement ● Utilisabilité ● Maintenance
Utilisez les librairies ● Accès facile ● Maintenance ● Suivi des Specs ...
Maintenant ● Testez 2022 ● Jouez ● Déployez ● Partagez
Questions ? braincracking.org Remerciez timeOfMyLife.com
Upcoming SlideShare
Loading in …5
×

Html5 now light

2,715 views

Published on

Published in: Technology, Business
no profile picture user

  • Be the first to comment

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

×