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

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,549
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
57
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×