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

1. HTML5, le nouveau buzzword
Collège ISI - 2011-07-27
Frédéric Harper

2. Le type en avant
Frédéric Harper
Évangéliste aux développeurs @ Microsoft
fredh@microsoft.com
Blogues, réseaux sociaux, contact…
http://fredericharper.com

3. Les règles
#1 – Présentation de style camp
#2 – La loi des deux pieds

4. La présentation
1. Qu’est-ce qu’HTML5?
2. À titre d’étudiant, dois-je m’en soucier?

5. HTML5 et vous
A. Vous l’utilisez
B. Vous connaissez et vous allez l’utiliser
C. … et vous n’allez pas l’utiliser
D. Vous ne savez pas de quoi je parle

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. Démo

8. header, footer, nav,
aside, figure,
section, article

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. Site Web HTML5 (sémantique++)
<header>
<nav>
<section>
<article>
<aside>
<article>
<figure>
<footer>

11. svg

12. Démo

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. canvas

15. Démo

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. video, audio

18. Démo

19. Code
<video src="video.mp4" id=“tagVideo">
<source src="video.webm" />
<a href="http://videolink.com/">
Désolé, votre navigateur ne supporte
pas HTML5
</a>
<!– Vidéo Flash/Silverlight ici -->
</video>

20. Code
<audio src="audio.mp3" id=“tagAudio"
autoplay controls>
<!– Audio Flash/Silverlight ici -->
</audio>

21. Géolocalisation

22. Démo

23. Code
function 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. Web Open Font
Format aka WOFF

25. Démo

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. CSS3 Media
Queries

28. Démo

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. Libérez la vrai
puissante du Web

31. Alors, est-ce qu’HTML5 est prêt?
OUI et NON

32. Une solution, les polyfills
 Un correctif qui imite une API future,
offrant des fonctionnalités de secours
pour les navigateurs plus anciens.

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. Prochaines étapes
Essayez le
Lisez sur le sujet
Faire un projet extraordinaire
Ayez du plaisir!

35. Ressources
http://www.w3.org/TR/html5/
http://caniuse.com
http://makeawesomeweb.com
http://html5gallery.com
http://html5labs.interoperabilitybridges.com/
http://www.beautyoftheweb.com

36. Questions? Commentaires?
Frédéric Harper
Évangéliste aux développeurs @ Microsoft
fredh@microsoft.com
Blogues, réseaux sociaux, contact…
http://fredericharper.com
http://linkedin.com/in/fredericharper
http://twitter.com/fharper
http://facebook.com/fharper