HTML5 en production
   Maintenant

   solutions pratiques
    de IE6 à nos jours



                    Jean-pierre VINCENT
Qui ça ?
        Jean-pierre VINCENT

braincracking.org (veille techno)
@theystolemynick

Je sers le Web et c'est ma joie ...
HTML5 en production
   Maintenant

   solutions pratiques
    de IE6 à nos jours



                    Jean-pierre VINCENT
contraintes et préjugés
contraintes et préjugés

50% de visiteurs avec IE 6-8
contraintes et préjugés

50% de visiteurs avec IE 6-8


HTML5 annoncé pour 2022
(Ian Hickson, éditeur HMTL5)
contraintes et préjugés

50% de visiteurs avec IE 6-8


HTML5 annoncé pour 2022
(Ian Hickson, éditeur HMTL5)

“I don't thi...
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âce ...
2022 ? pas peur
●   CSS 2.1 : candidate recommandation

●Selector API 2 : Draft, mais utilisé
par 90% des développeurs grâ...
2022 ? pas peur

Utilisation en production

          !==

 Recommandation W3
2022 ? pas peur

Utilisation en production

          ===

     Facilité d'accès
2022 ? pas peur

Utilisation en production

          ===

     Facilité d'accès
       + stabilité
quel HTML5 ?
Officiel :
•
quel HTML5 ?
Officiel :
• Balises
•
quel HTML5 ?
Officiel :
• Balises
• Microdata
•
quel HTML5 ?
Officiel :
• Balises
• Microdata
• Forms
•
quel HTML5 ?
Officiel :
• Balises
• Microdata
• Forms
• Multimédia
•
quel HTML5 ?
Officiel :
• Balises
• Microdata
• Forms
• Multimédia
• Canvas
•
quel HTML5 ?
Officiel :
• Balises
• Microdata
• Forms
• Multimédia
• Canvas
• Web Storage
•
quel HTML5 ?
Officiel :
• Balises
• Microdata
• Forms
• Multimédia
• Canvas
• Web Storage
• Drag & Drop
•
quel HTML5 ?
Officiel :      Associé :
• Balises       ●


• Microdata
• Forms
• Multimédia
• Canvas
• Web Storage
• Drag ...
quel HTML5 ?
Officiel :       Associé :
• Balises       ● Geolocation


• Microdata     ●


• Forms
• Multimédia
• Canvas
...
quel HTML5 ?
Officiel :       Associé :
• Balises       ● Geolocation


• Microdata     ● SVG


• Forms         ●


• Mult...
quel HTML5 ?
Officiel :       Associé :
• Balises       ● Geolocation


• Microdata     ● SVG


• Forms         ● Upload

...
quel HTML5 ?
Officiel :       Associé :
• Balises       ● Geolocation


• Microdata     ● SVG


• Forms         ● Upload

...
quel HTML5 ?
Officiel :       Associé :
• Balises       ● Geolocation


• Microdata     ● SVG


• Forms         ● Upload

...
Balises
Balises
●   Changer le doctype

            <!doctype html>

●   Testé en remplacement de
      ✓ XHTML strict
      ✓ HTM...
Balises

✓ Site migré en HTML5
        Merci :)
Balises
Balises
<div>
  <div>...</div>
</div>
<div>
  <div>...<span> ...
  <p>
  <div>...</div>
</div>
<div>...</div>
Balises
<header>
  <nav>...</nav>
</header>
<article>
  <header>...<time> ...
  <p>
  <footer>...</footer>
</article>
<foo...
Balises
● Standard
● Facile à comprendre




=

● Bénéfices référencement (bientôt)
● Maintenable

● Accessibilité
Balises
<meter value=25 max=100>

<progress value=25 max=100>


<figure>
<figcaption>

<datalist>
Balises
Balises inconnues :

●   display:inline par défaut

article, nav ...{
  display: block
}
Balises
Balises inconnues :

●non stylable sur IE6-8
hack JS :

document.
  createElement('article');
</head>
       bit.l...
Balises


               ✓ Production


 Si :
● Visiteurs IE sans javascript sacrifiables
Formulaires
Formulaires - types
● Datetime, month, time, week ...
● Number

● Search

● Range

● Color

● Tel
Formulaires - types
●   Code compréhensible

●   Utilisabilité, accessibilité

●   Navigateurs aident l'utilisateur
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
           =
      type=text
           =
    ✓ fonctionnalité
Formulaires - types
Faut il styler les formulaires ?
Formulaires - types
Faut il styler les formulaires ?
          Vieux débat
Formulaires - types
Faut il styler les formulaires ?


         Peut être :)
Formulaires - types


              ✓ Production


 Si :
● Widgets natifs acceptés
Forms - bilan
Nouveaux types :
Forms - bilan
Nouveaux types :
✓ OK pour la production
Forms - bilan
Nouveaux types :
✓ OK pour la production

Validation :
Forms - bilan
Nouveaux types :
✓ OK pour la production

Validation :
✓ OK pour création
Forms - bilan
Nouveaux types :
✓ OK pour la production

Validation :
✓ OK pour création
✓ OK pour enrichissement
Forms - bilan
Nouveaux types :
✓ OK pour la production

Validation :
✓ OK pour création
✓ OK pour enrichissement
  Modific...
Microdata
Microdata
 Balisage sémantique avec
vocabulaire personnalisé


 Concurrent de :
● Microformats

● RDFa
Microdata
Intérêt immédiat : Google




data-vocabulary.org/Review-aggregate/
Microdata
Google a défini plusieurs vocabulaires :

● Avis et notes
● Fil d'Ariane (breadcrumb)

● Evènements

● Personnes...
Microdata
<div>
   <h1>Dragon Age</h1>
   Avis rédigé par GameSpot le 3 Novembre.
  Note: 5 sur 5
</div>
Microdata
<div>
   <h1>Dragon Age</h1>
   Avis rédigé par GameSpot le 3 Novembre.
  Note: 5 sur 5
</div>
Microdata
<div itemscope>
   <h1>Dragon Age</h1>
   Avis rédigé par GameSpot le 3 Novembre.
  Note: 5 sur 5
</div>
Microdata
<div itemscope
itemtype="http://data-vocabulary.org/Review">
   <h1>Dragon Age</h1>
   Avis rédigé par GameSpot ...
Microdata
<div itemscope
itemtype="http://data-vocabulary.org/Review">
   <h1 itemprop="itemreviewed">
      Dragon Age</h...
Microdata
<div itemscope
itemtype="http://data-vocabulary.org/Review">
   <h1 itemprop="itemreviewed">
      Dragon Age</h...
Microdata
<div itemscope
itemtype="http://data-vocabulary.org/Review">
   <h1 itemprop="itemreviewed">
      Dragon Age</h...
Microdata
<div itemscope
itemtype="http://data-vocabulary.org/Review">
   <h1 itemprop="itemreviewed">
      Dragon Age</h...
Microdata
<div itemscope
itemtype="http://data-vocabulary.org/Review">
   <h1 itemprop="itemreviewed">
      Dragon Age</h...
Microdata
<div itemscope
itemtype="http://data-vocabulary.org/Review">
   <h1 itemprop="itemreviewed">
      Dragon Age</h...
Microdata
<div itemscope
itemtype="http://data-vocabulary.org/Review">
   <h1 itemprop="itemreviewed">
      Dragon Age</h...
Microdata


✓ Utilisable en production
</semantique>

<script src=HTML5/API >
Prochain SlideShare
Chargement dans…5
×

HTML5 maintenant partie 1 : la sémantique

3 888 vues

Publié le

1ère partie de la présentation HTML5 maintenant : les nouvelles balises, microdata, les nouveaux formulaires, bref tout ce qui fait l'évolution de la sémantique de HTML4

Publié dans : Technologie, Design
0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 888
Sur SlideShare
0
Issues des intégrations
0
Intégrations
201
Actions
Partages
0
Téléchargements
74
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

HTML5 maintenant partie 1 : la sémantique

  1. 1. HTML5 en production Maintenant solutions pratiques de IE6 à nos jours Jean-pierre VINCENT
  2. 2. Qui ça ? Jean-pierre VINCENT braincracking.org (veille techno) @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. contraintes et préjugés
  5. 5. contraintes et préjugés 50% de visiteurs avec IE 6-8
  6. 6. contraintes et préjugés 50% de visiteurs avec IE 6-8 HTML5 annoncé pour 2022 (Ian Hickson, éditeur HMTL5)
  7. 7. contraintes et préjugés 50% de visiteurs avec IE 6-8 HTML5 annoncé pour 2022 (Ian Hickson, éditeur HMTL5) “I don't think it's ready for production yet“ (Philippe Le Hégaret, chef HTML5)
  8. 8. 2022 ? pas peur
  9. 9. 2022 ? pas peur •CSS 2.1 : candidate recommandation
  10. 10. 2022 ? pas peur •CSS 2.1 : candidate recommandation •Selector API 2 : Draft, mais utilisé par 90% des développeurs grâce à jQuery
  11. 11. 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 ...
  12. 12. 2022 ? pas peur Utilisation en production !== Recommandation W3
  13. 13. 2022 ? pas peur Utilisation en production === Facilité d'accès
  14. 14. 2022 ? pas peur Utilisation en production === Facilité d'accès + stabilité
  15. 15. quel HTML5 ? Officiel : •
  16. 16. quel HTML5 ? Officiel : • Balises •
  17. 17. quel HTML5 ? Officiel : • Balises • Microdata •
  18. 18. quel HTML5 ? Officiel : • Balises • Microdata • Forms •
  19. 19. quel HTML5 ? Officiel : • Balises • Microdata • Forms • Multimédia •
  20. 20. quel HTML5 ? Officiel : • Balises • Microdata • Forms • Multimédia • Canvas •
  21. 21. quel HTML5 ? Officiel : • Balises • Microdata • Forms • Multimédia • Canvas • Web Storage •
  22. 22. quel HTML5 ? Officiel : • Balises • Microdata • Forms • Multimédia • Canvas • Web Storage • Drag & Drop •
  23. 23. quel HTML5 ? Officiel : Associé : • Balises ● • Microdata • Forms • Multimédia • Canvas • Web Storage • Drag & Drop • WebSockets
  24. 24. quel HTML5 ? Officiel : Associé : • Balises ● Geolocation • Microdata ● • Forms • Multimédia • Canvas • Web Storage • Drag & Drop • WebSockets
  25. 25. quel HTML5 ? Officiel : Associé : • Balises ● Geolocation • Microdata ● SVG • Forms ● • Multimédia • Canvas • Web Storage • Drag & Drop • WebSockets
  26. 26. quel HTML5 ? Officiel : Associé : • Balises ● Geolocation • Microdata ● SVG • Forms ● Upload • Multimédia • Canvas • Web Storage • Drag & Drop • WebSockets
  27. 27. quel HTML5 ? Officiel : Associé : • Balises ● Geolocation • Microdata ● SVG • Forms ● Upload • Multimédia • Canvas • Web Storage Buzz : • Drag & Drop ● CSS3 ... • WebSockets
  28. 28. quel HTML5 ? Officiel : Associé : • Balises ● Geolocation • Microdata ● SVG • Forms ● Upload • Multimédia • Canvas • Web Storage Buzz : • Drag & Drop ● CSS3 ... • WebSockets
  29. 29. Balises
  30. 30. Balises ● Changer le doctype <!doctype html> ● Testé en remplacement de ✓ XHTML strict ✓ HTML4.01 transitional bit.ly/HTML5_fr bit.ly/XHTML5_fr
  31. 31. Balises ✓ Site migré en HTML5 Merci :)
  32. 32. Balises
  33. 33. Balises <div> <div>...</div> </div> <div> <div>...<span> ... <p> <div>...</div> </div> <div>...</div>
  34. 34. Balises <header> <nav>...</nav> </header> <article> <header>...<time> ... <p> <footer>...</footer> </article> <footer>...</footer>
  35. 35. Balises ● Standard ● Facile à comprendre = ● Bénéfices référencement (bientôt) ● Maintenable ● Accessibilité
  36. 36. Balises <meter value=25 max=100> <progress value=25 max=100> <figure> <figcaption> <datalist>
  37. 37. Balises Balises inconnues : ● display:inline par défaut article, nav ...{ display: block }
  38. 38. Balises Balises inconnues : ●non stylable sur IE6-8 hack JS : document. createElement('article'); </head> bit.ly/HTML5_shiv
  39. 39. Balises ✓ Production Si : ● Visiteurs IE sans javascript sacrifiables
  40. 40. Formulaires
  41. 41. Formulaires - types ● Datetime, month, time, week ... ● Number ● Search ● Range ● Color ● Tel
  42. 42. Formulaires - types ● Code compréhensible ● Utilisabilité, accessibilité ● Navigateurs aident l'utilisateur
  43. 43. Formulaires - types <input type=email /> ● Clavier approprié ● Pré-remplissage ● Interface
  44. 44. Formulaires - types <input type=url /> ● Clavier approprié ● Pré-remplissage
  45. 45. Formulaires - types <input type=date /> ● Interface appropriée
  46. 46. Formulaires - types <input type=color /> ● Interface appropriée
  47. 47. Formulaires - types Non reconnu = type=text = ✓ fonctionnalité
  48. 48. Formulaires - types Faut il styler les formulaires ?
  49. 49. Formulaires - types Faut il styler les formulaires ? Vieux débat
  50. 50. Formulaires - types Faut il styler les formulaires ? Peut être :)
  51. 51. Formulaires - types ✓ Production Si : ● Widgets natifs acceptés
  52. 52. Forms - bilan Nouveaux types :
  53. 53. Forms - bilan Nouveaux types : ✓ OK pour la production
  54. 54. Forms - bilan Nouveaux types : ✓ OK pour la production Validation :
  55. 55. Forms - bilan Nouveaux types : ✓ OK pour la production Validation : ✓ OK pour création
  56. 56. Forms - bilan Nouveaux types : ✓ OK pour la production Validation : ✓ OK pour création ✓ OK pour enrichissement
  57. 57. Forms - bilan Nouveaux types : ✓ OK pour la production Validation : ✓ OK pour création ✓ OK pour enrichissement Modification : au cas par cas
  58. 58. Microdata
  59. 59. Microdata Balisage sémantique avec vocabulaire personnalisé Concurrent de : ● Microformats ● RDFa
  60. 60. Microdata Intérêt immédiat : Google data-vocabulary.org/Review-aggregate/
  61. 61. Microdata Google a défini plusieurs vocabulaires : ● Avis et notes ● Fil d'Ariane (breadcrumb) ● Evènements ● Personnes / Entreprises ● Produits ● Recettes de cuisine (!)
  62. 62. Microdata <div> <h1>Dragon Age</h1> Avis rédigé par GameSpot le 3 Novembre. Note: 5 sur 5 </div>
  63. 63. Microdata <div> <h1>Dragon Age</h1> Avis rédigé par GameSpot le 3 Novembre. Note: 5 sur 5 </div>
  64. 64. Microdata <div itemscope> <h1>Dragon Age</h1> Avis rédigé par GameSpot le 3 Novembre. Note: 5 sur 5 </div>
  65. 65. Microdata <div itemscope itemtype="http://data-vocabulary.org/Review"> <h1>Dragon Age</h1> Avis rédigé par GameSpot le 3 Novembre. Note: 5 sur 5 </div>
  66. 66. Microdata <div itemscope itemtype="http://data-vocabulary.org/Review"> <h1 itemprop="itemreviewed"> Dragon Age</h1> Avis rédigé par GameSpot le 3 Novembre. Note: 5 sur 5 </div>
  67. 67. Microdata <div itemscope itemtype="http://data-vocabulary.org/Review"> <h1 itemprop="itemreviewed"> Dragon Age</h1> Avis rédigé par <span itemprop="reviewer">GameSpot</span> le 3 Novembre. Note: 5 sur 5 </div>
  68. 68. Microdata <div itemscope itemtype="http://data-vocabulary.org/Review"> <h1 itemprop="itemreviewed"> Dragon Age</h1> Avis rédigé par <span itemprop="reviewer">GameSpot</span> le <time>3 Novembre</time>. Note: 5 sur 5 </div>
  69. 69. Microdata <div itemscope itemtype="http://data-vocabulary.org/Review"> <h1 itemprop="itemreviewed"> Dragon Age</h1> Avis rédigé par <span itemprop="reviewer">GameSpot</span> le <time datetime="2009-11-03"> 3 Novembre</time>. Note: 5 sur 5 </div>
  70. 70. Microdata <div itemscope itemtype="http://data-vocabulary.org/Review"> <h1 itemprop="itemreviewed"> Dragon Age</h1> Avis rédigé par <span itemprop="reviewer">GameSpot</span> le <time datetime="2009-11-03" itemprop="dtreviewed"> 3 Novembre</time>. Note: 5 sur 5 </div>
  71. 71. Microdata <div itemscope itemtype="http://data-vocabulary.org/Review"> <h1 itemprop="itemreviewed"> Dragon Age</h1> Avis rédigé par <span itemprop="reviewer">GameSpot</span> le <time datetime="2009-11-03" itemprop="dtreviewed"> 3 Novembre</time>. Note:<span itemprop="rating">5</span> sur 5 </div>
  72. 72. Microdata <div itemscope itemtype="http://data-vocabulary.org/Review"> <h1 itemprop="itemreviewed"> Dragon Age</h1> Avis rédigé par <span itemprop="reviewer">GameSpot</span> le <time datetime="2009-11-03" itemprop="dtreviewed"> 3 Novembre</time>. Note:<span itemprop="rating">5</span> sur 5 </div> bit.ly/data-google
  73. 73. Microdata ✓ Utilisable en production
  74. 74. </semantique> <script src=HTML5/API >

×