HTML5 maintenant partie 1 : la sémantique

  • 3,215 views
Uploaded 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

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,215
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
68
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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