Le HTML5 & les API

1 249 vues

Publié le

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

Aucun téléchargement
Vues
Nombre de vues
1 249
Sur SlideShare
0
Issues des intégrations
0
Intégrations
90
Actions
Partages
0
Téléchargements
20
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Le HTML5 & les API

  1. 1. & les API willy leloutre - @wleloutre samedi 28 septembre 13
  2. 2. Préambule • Le HTML5, c’est quoi ? • Le saviez-vous ? • Les nouveaux balisages • Le HTML5 & les API samedi 28 septembre 13
  3. 3. • HTML depuis 1989, par Tim Berners-Lee 1989 - 20xx • HTML 2.0 en 1995 • HTML 3.2 et 4.0 en 1997 • D'après public-html@w3.org HTML5 en tant que Recommandation fin 2014... 8 ans après XHTML • XHTML de 2000 à 2006 samedi 28 septembre 13
  4. 4. Le HTML5 c’est quoi ? samedi 28 septembre 13
  5. 5. Le HTML5 c’est historiquement un dérivé de SGML ! samedi 28 septembre 13
  6. 6. Le HTML5 c’est plus permissif, ... Plus de balise auto-fermante, certaines balises fermantes sont optionnelles (html, head, body, li, …), plus de typage des scripts & css, intégration du caractères spéciaux en utf-8 dans les attributs « id » samedi 28 septembre 13
  7. 7. Le HTML5 c’est aussi une version sérialisée XML Le XHTML5, très contraignant, toute erreur est bloquante, et, comment dire, ... le content-type n'est pas compatible sous IE ! #pasdetrollmerci samedi 28 septembre 13
  8. 8. Le HTML5 c’est ... Tout ce que l'on veut bien regrouper sous ce terme, par facilité, raccourci ou marketing : CSS3, JavaScript, SVG, XMLHttpRequest, JSON etc. samedi 28 septembre 13
  9. 9. Le HTML5, c’est surtout tendance ! samedi 28 septembre 13
  10. 10. HTML5 POWER ! samedi 28 septembre 13
  11. 11. http://www.w3.org/html/logo/ samedi 28 septembre 13
  12. 12. Des icones pour chaques fonctionnalités. samedi 28 septembre 13
  13. 13. Le saviez-vous ? samedi 28 septembre 13
  14. 14. La sémantique par les <div> La <div> n'a pas de valeure sémantique, mais peut servir à structurer du contenu dans un <article> samedi 28 septembre 13
  15. 15. La sidebar avec <aside> Un <aside> n'est pas forcément une sidebar ! C'est un contenu annexe, non requis pour comprendre le contenu principal. samedi 28 septembre 13
  16. 16. <a href=...> <h2>...</h2> <p>...</p> </a> Les liens <a> peuvent maintenant contenir des blocs. samedi 28 septembre 13
  17. 17. <b> / <i> vs <strong> / <em> <b> et <i> n'ont pas de valeur sémantique contrairement à <strong> et <em> samedi 28 septembre 13
  18. 18. <hr class="clearfix"> <hr> Est un séparateur de sujet au sein d'un contenu, ça ne sert pas uniquement à réaliser vos clearfix ! samedi 28 septembre 13
  19. 19. Le double slash // Le double slash pour l'appel à une ressource externe (type CDN) est autorisé. Il permet d'utiliser le protocole en cours de la page (http ou https) et éviter les erreurs "warning". samedi 28 septembre 13
  20. 20. Le petit nouveau : <main> L'élément <main> n'a pas de valeur sémantique comme une <section> ou <article> cf: http://html5doctor.com/the-main-element/ Exemple : un <h1> dans une <section> sera un <h2> sémantiquement, et un autre <h1> dans un <article> sera considéré comme un <h3> ! samedi 28 septembre 13
  21. 21. La compatibilité du HTML5 samedi 28 septembre 13
  22. 22. http://mobilehtml5.org/ samedi 28 septembre 13
  23. 23. http://caniuse.com/#search=off samedi 28 septembre 13
  24. 24. Le nouveau balisage <section>, <article>, <header>, <footer>, <nav>, <aside>, <main>, ... samedi 28 septembre 13
  25. 25. http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf samedi 28 septembre 13
  26. 26. Pensez au patch pour IE 8 : HTML5shiv ou HTML5shim samedi 28 septembre 13
  27. 27. Les nouveaux attributs contenteditable, draggable, dropzone, hidden, data-*, role, spellcheck, translate, seamless, async, ... samedi 28 septembre 13
  28. 28. Les webform • Nouveaux types pour <input> <input type="range" min="0" max="100" step="5"> • Nouveaux attributs <input type="number" min="10" max="30" step="5"> • Nouveaux éléments <input type="text" name="login" pattern="[0-9a-z]+"> samedi 28 septembre 13
  29. 29. Microdata samedi 28 septembre 13
  30. 30. Les API samedi 28 septembre 13
  31. 31. http://platform.html5.org/ • Canvas • Audio /Vidéo • Web storage • Offline • File API • Géolocalisation • Web GL • Media Capture • Device Orientation • ... samedi 28 septembre 13
  32. 32. La boite à outil samedi 28 septembre 13
  33. 33. samedi 28 septembre 13
  34. 34. Liens utiles • http://www.html5rocks.com • http://html5doctor.com/ samedi 28 septembre 13
  35. 35. Conclusion samedi 28 septembre 13
  36. 36. Le changement c’est pas maintenant, il a déjà eu lieu ! samedi 28 septembre 13
  37. 37. MERCI ! Willy Leloutre - @wleloutre Directeur Technique - La Mygale à Chaussette Digital agency samedi 28 septembre 13

×