Your SlideShare is downloading. ×
Le HTML5 & les API
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Le HTML5 & les API

691
views

Published on

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
691
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
14
Comments
0
Likes
2
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. & les API willy leloutre - @wleloutre samedi 28 septembre 13
  • 2. Préambule • Le HTML5, c’est quoi ? • Le saviez-vous ? • Les nouveaux balisages • Le HTML5 & les API samedi 28 septembre 13
  • 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. Le HTML5 c’est quoi ? samedi 28 septembre 13
  • 5. Le HTML5 c’est historiquement un dérivé de SGML ! samedi 28 septembre 13
  • 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. 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. 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. Le HTML5, c’est surtout tendance ! samedi 28 septembre 13
  • 10. HTML5 POWER ! samedi 28 septembre 13
  • 11. http://www.w3.org/html/logo/ samedi 28 septembre 13
  • 12. Des icones pour chaques fonctionnalités. samedi 28 septembre 13
  • 13. Le saviez-vous ? samedi 28 septembre 13
  • 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. 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. <a href=...> <h2>...</h2> <p>...</p> </a> Les liens <a> peuvent maintenant contenir des blocs. samedi 28 septembre 13
  • 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. <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. 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. 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. La compatibilité du HTML5 samedi 28 septembre 13
  • 22. http://mobilehtml5.org/ samedi 28 septembre 13
  • 23. http://caniuse.com/#search=off samedi 28 septembre 13
  • 24. Le nouveau balisage <section>, <article>, <header>, <footer>, <nav>, <aside>, <main>, ... samedi 28 septembre 13
  • 25. http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf samedi 28 septembre 13
  • 26. Pensez au patch pour IE 8 : HTML5shiv ou HTML5shim samedi 28 septembre 13
  • 27. Les nouveaux attributs contenteditable, draggable, dropzone, hidden, data-*, role, spellcheck, translate, seamless, async, ... samedi 28 septembre 13
  • 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. Microdata samedi 28 septembre 13
  • 30. Les API samedi 28 septembre 13
  • 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. La boite à outil samedi 28 septembre 13
  • 33. samedi 28 septembre 13
  • 34. Liens utiles • http://www.html5rocks.com • http://html5doctor.com/ samedi 28 septembre 13
  • 35. Conclusion samedi 28 septembre 13
  • 36. Le changement c’est pas maintenant, il a déjà eu lieu ! samedi 28 septembre 13
  • 37. MERCI ! Willy Leloutre - @wleloutre Directeur Technique - La Mygale à Chaussette Digital agency samedi 28 septembre 13