HTML5, le nouveau buzzword

HTML5, le nouveau buzzword

Collège ISI - 2011-07-27
Frédéric Harper

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

Les règles

#1 – Présentation de style camp

#2 – La loi des deux pieds

La présentation

1. Qu’est-ce qu’HTML5?

2. À titre d’étudiant, dois-je m’en soucier?

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

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)

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

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”>

Site Web HTML5 (sémantique++)
<header>
<nav>
<section>
<article>
<aside>
<article>

<figure>

<footer>

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>

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>

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>

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

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;
}

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>

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" />

Libérez la vrai
puissante 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 navigateurs plus anciens.

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

Prochaines étapes

Essayez le

Lisez sur le sujet

Faire un projet extraordinaire

Ayez du plaisir!

Ressources
http://www.w3.org/TR/html5/

http://caniuse.com

http://makeawesomeweb.com

http://html5gallery.com

http://html5labs.interoperabilitybridges.com/

http://www.beautyoftheweb.com

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

HTML5, le nouveau buzzword

Contenu connexe

Tendances

En vedette

Similaire à HTML5, le nouveau buzzword

Plus de Frédéric Harper

HTML5, le nouveau buzzword