Your SlideShare is downloading. ×
0
HTML5, le nouveau buzzword    Collège ISI - 2011-07-27         Frédéric Harper
Le type en avantFrédéric HarperÉvangéliste aux développeurs @ Microsoftfredh@microsoft.comBlogues, réseaux sociaux, contac...
Les règles#1 – Présentation de style camp#2 – La loi des deux pieds
La présentation1. Qu’est-ce qu’HTML5?2. À titre d’étudiant, dois-je m’en soucier?
HTML5 et vousA. Vous l’utilisezB. Vous connaissez et vous allez l’utiliserC. … et vous n’allez pas l’utiliserD. Vous ne sa...
HTML5• Standard Web• La version suivante d’HTML4 (Je sais, je suis si brillant)• Brouillon• 9 nouvelles structures de tags...
Démo
header, footer, nav,   aside, figure,  section, article
Site Web traditionnel     <div id=“header”>  <div id=“nav”><div id=“section”> <div id=“article”>         <div             ...
Site Web HTML5 (sémantique++)            <header>         <nav>       <section>        <article>                          ...
svg
Démo
Code<svg width="400" height="200">   <rect fill="red" x="20" y="20" width="100"height="75" />   <rect fill="blue" x="50" y...
canvas
Démo
Code<canvas id=“monCanvas" width="200" height="200">   Désolé, votre navigateur ne supporte pas HTML5</canvas><script type...
video, audio
Démo
Code<video src="video.mp4" id=“tagVideo">   <source src="video.webm" />   <a href="http://videolink.com/">      Désolé, vo...
Code<audio src="audio.mp3" id=“tagAudio"autoplay controls>   <!– Audio Flash/Silverlight ici --></audio>
Géolocalisation
Démo
Codefunction getLocation() {   if (navigator.geolocation != undefined) {    navigator.geolocation.getCurrentPosition(callB...
Web Open FontFormat aka WOFF
Démo
Code<style type="text/css">   @font-face {      font-family: MonFont;      src: url(Font.woff);   }</style><div style="fon...
CSS3 Media  Queries
Démo
Code<link href="mobile.css" rel="stylesheet"media="screen and (max-width:480px)“type="text/css" /><link href="netbook.css"...
Libérez la vraipuissante du Web
Alors, est-ce qu’HTML5 est prêt?       OUI et NON
Une solution, les polyfills Un correctif qui imite une API future,  offrant des fonctionnalités de secours  pour les navi...
Je suis un étudiant Vous utilisez probablement déjà HTML Pensez site Web ET mobile Surveillez les nouvelles technologie...
Prochaines étapes         Essayez le      Lisez sur le sujetFaire un projet extraordinaire       Ayez du plaisir!
Ressourceshttp://www.w3.org/TR/html5/http://caniuse.comhttp://makeawesomeweb.comhttp://html5gallery.comhttp://html5labs.in...
Questions? Commentaires?Frédéric HarperÉvangéliste aux développeurs @ Microsoftfredh@microsoft.comBlogues, réseaux sociaux...
Upcoming SlideShare
Loading in...5
×

HTML5, le nouveau buzzword

594

Published on

Une présentation sur HTML5 que j'ai présenté au Collège ISI

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

  • Be the first to like this

No Downloads
Views
Total Views
594
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5, le nouveau buzzword"

  1. 1. HTML5, le nouveau buzzword Collège ISI - 2011-07-27 Frédéric Harper
  2. 2. Le type en avantFrédéric HarperÉvangéliste aux développeurs @ Microsoftfredh@microsoft.comBlogues, réseaux sociaux, contact…http://fredericharper.com
  3. 3. Les règles#1 – Présentation de style camp#2 – La loi des deux pieds
  4. 4. La présentation1. Qu’est-ce qu’HTML5?2. À titre d’étudiant, dois-je m’en soucier?
  5. 5. HTML5 et vousA. Vous l’utilisezB. Vous connaissez et vous allez l’utiliserC. … et vous n’allez pas l’utiliserD. Vous ne savez pas de quoi je parle
  6. 6. HTML5• Standard Web• La version suivante d’HTML4 (Je sais, je suis si brillant)• Brouillon• 9 nouvelles structures de tags• 16 nouveaux éléments HTML• 13 nouveau type d’entrées (input types)
  7. 7. Démo
  8. 8. header, footer, nav, aside, figure, section, article
  9. 9. Site Web traditionnel <div id=“header”> <div id=“nav”><div id=“section”> <div id=“article”> <div id=“sid <div id=“article”> ebar”> <div id=“media”> <div id=“footer”>
  10. 10. Site Web HTML5 (sémantique++) <header> <nav> <section> <article> <aside> <article> <figure> <footer>
  11. 11. svg
  12. 12. Démo
  13. 13. Code<svg width="400" height="200"> <rect fill="red" x="20" y="20" width="100"height="75" /> <rect fill="blue" x="50" y="50" width="100"height="75" /></svg>
  14. 14. canvas
  15. 15. Démo
  16. 16. Code<canvas id=“monCanvas" width="200" height="200"> Désolé, votre navigateur ne supporte pas HTML5</canvas><script type="text/javascript"> var exemple = document.getElementById(“monCanvas"); var contexte = exemple.getContext("2d"); contexte.fillStyle = "rgb(255,0,0)"; contexte.fillRect(30, 30, 50, 50);</script>
  17. 17. video, audio
  18. 18. Démo
  19. 19. Code<video src="video.mp4" id=“tagVideo"> <source src="video.webm" /> <a href="http://videolink.com/"> Désolé, votre navigateur ne supportepas HTML5 </a> <!– Vidéo Flash/Silverlight ici --></video>
  20. 20. Code<audio src="audio.mp3" id=“tagAudio"autoplay controls> <!– Audio Flash/Silverlight ici --></audio>
  21. 21. Géolocalisation
  22. 22. Démo
  23. 23. Codefunction getLocation() { if (navigator.geolocation != undefined) { navigator.geolocation.getCurrentPosition(callBack); }}function callBack(position) { var accuracy = position.coords.accuracy; var latitude = position.coords.latitude; var longitude = position.coords.longitude;}
  24. 24. Web Open FontFormat aka WOFF
  25. 25. Démo
  26. 26. Code<style type="text/css"> @font-face { font-family: MonFont; src: url(Font.woff); }</style><div style="font: 24pt MonFont, sans-serif;"> J’ajoute mon texte ici comme d’habitude</div>
  27. 27. CSS3 Media Queries
  28. 28. Démo
  29. 29. Code<link href="mobile.css" rel="stylesheet"media="screen and (max-width:480px)“type="text/css" /><link href="netbook.css" rel="stylesheet“media="screen and (min-width:481px) and (max-width: 1024px)“ type="text/css" /><link href="laptop.css" rel="stylesheet"media="screen and (min-width:1025px)“type="text/css" />
  30. 30. Libérez la vraipuissante du Web
  31. 31. Alors, est-ce qu’HTML5 est prêt? OUI et NON
  32. 32. Une solution, les polyfills Un correctif qui imite une API future, offrant des fonctionnalités de secours pour les navigateurs plus anciens.
  33. 33. Je suis un étudiant Vous utilisez probablement déjà HTML Pensez site Web ET mobile Surveillez les nouvelles technologies Une façon de sortir du lot
  34. 34. Prochaines étapes Essayez le Lisez sur le sujetFaire un projet extraordinaire Ayez du plaisir!
  35. 35. Ressourceshttp://www.w3.org/TR/html5/http://caniuse.comhttp://makeawesomeweb.comhttp://html5gallery.comhttp://html5labs.interoperabilitybridges.com/http://www.beautyoftheweb.com
  36. 36. Questions? Commentaires?Frédéric HarperÉvangéliste aux développeurs @ Microsoftfredh@microsoft.comBlogues, réseaux sociaux, contact…http://fredericharper.comhttp://linkedin.com/in/fredericharperhttp://twitter.com/fharperhttp://facebook.com/fharper
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×