HTML5, le nouveau buzzword

746 vues

Publié le

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

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

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive

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

×