HTML5 maintenant partie 1 : la sémantique

3,680 views
3,641 views

Published on

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

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,680
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
72
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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 >

×