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,695 views

Published on

Published in: Technology, Business
  • 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

×