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 maintenant partie 1 : la sémantique

4,188 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
  • Be the first to comment

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 >

×