html5, le nouveau buzzword
DESCRIPTION
Une présentation sur HTML5 que j'ai présenté au Collège ISITRANSCRIPT
![Page 1: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/1.jpg)
Collège ISI - 2011-07-27
Frédéric Harper
HTML5, le nouveau buzzword
![Page 2: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/2.jpg)
Le type en avant
Frédéric Harper
Évangéliste aux développeurs @ Microsoft
Blogues, réseaux sociaux, contact…
http://fredericharper.com
![Page 3: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/3.jpg)
Les règles
#1 – Présentation de style camp
#2 – La loi des deux pieds
![Page 4: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/4.jpg)
La présentation
1. Qu’est-ce qu’HTML5?
2. À titre d’étudiant, dois-je m’en soucier?
![Page 5: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/5.jpg)
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
![Page 6: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/6.jpg)
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)
![Page 8: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/8.jpg)
header, footer, nav,
aside, figure,
section, article
![Page 9: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/9.jpg)
<div id=“header”>
<div id=“footer”>
<div id=“sidebar”>
<div id=“nav”>
<div id=“article”>
<div id=“article”>
<div id=“media”>
<div id=“section”>
Site Web traditionnel
![Page 10: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/10.jpg)
<header>
<footer>
<aside>
<nav>
<article>
<article>
<figure>
<section>
Site Web HTML5 (sémantique++)
![Page 11: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/11.jpg)
svg
![Page 12: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/12.jpg)
Démo
![Page 13: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/13.jpg)
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>
![Page 14: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/14.jpg)
canvas
![Page 15: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/15.jpg)
Démo
![Page 16: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/16.jpg)
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>
![Page 17: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/17.jpg)
video, audio
![Page 18: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/18.jpg)
Démo
![Page 19: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/19.jpg)
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>
![Page 20: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/20.jpg)
Code
<audio src="audio.mp3" id=“tagAudio"
autoplay controls>
<!– Audio Flash/Silverlight ici -->
</audio>
![Page 21: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/21.jpg)
Géolocalisation
![Page 22: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/22.jpg)
Démo
![Page 23: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/23.jpg)
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;
}
![Page 24: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/24.jpg)
Web Open Font
Format aka WOFF
![Page 26: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/26.jpg)
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>
![Page 27: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/27.jpg)
CSS3 Media
Queries
![Page 28: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/28.jpg)
Démo
![Page 29: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/29.jpg)
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" />
![Page 30: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/30.jpg)
Libérez la vrai
puissante du Web
![Page 32: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/32.jpg)
Une solution, les polyfills
Un correctif qui imite une API future,
offrant des fonctionnalités de secours
pour les navigateurs plus anciens.
![Page 33: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/33.jpg)
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
![Page 34: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/34.jpg)
Prochaines étapes
Essayez le
Lisez sur le sujet
Faire un projet extraordinaire
Ayez du plaisir!
![Page 35: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/35.jpg)
Ressources
http://www.w3.org/TR/html5/
http://caniuse.com
http://makeawesomeweb.com
http://html5gallery.com
http://html5labs.interoperabilitybridges.com/
http://www.beautyoftheweb.com
![Page 36: HTML5, le nouveau buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022050815/545c9e16af7959b4098b4872/html5/thumbnails/36.jpg)
Questions? Commentaires?
Frédéric Harper Évangéliste aux développeurs @ Microsoft
Blogues, réseaux sociaux, contact…
http://fredericharper.com
http://linkedin.com/in/fredericharper
http://twitter.com/fharper
http://facebook.com/fharper