HTML5

Pourquoi HTML5 ?

• Depuis 1999, les usages ont changés
• Applications web
• Sémantiser

Pour quoi HTML5 ?

• Structurer un document
• Créer des applications web
• Préparer l’avenir

Une nouvelle orientation

• Standardiser l’existant
• Spéciﬁcation claire, dirigiste
• Repenser le contenu

Une nouvelle orientation

Text
Flow
Bodytext

Doctype

• HTML5 : <!DOCTYPE html>
• XHTML5 : pas de doctype, prologue XML
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">

Encodage
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta charset="UTF-8">

1.Header HTTP
2.BOM du ﬁchier
3.<meta>

<section>

• Groupage thématique du contenu
<section id="articles">…</section>

<section id="twitter">…</section>

≠
<div id="sidebar">…</div>

• Les sections ont des headings indépendants

<header>/<footer>
• <header> : Introduction, aide à la navigation

• <footer> : Informations sur la section (meta)
<body><header id="header">…</header>

<section id="news"><header>…</header>

<footer id="footer">…</footer></body>

<footer>…</footer></section>

<nav>
• Sectionsite, dans la page, etc.)
(dans le
permettant de naviguer

<nav>
<h1>Navigation</h1>
<ul>
<li><a href="">Accueil</a></li>
<li><a href="actualites">Actualités</a></li>
…
</ul>
</nav>

<nav id="prelude">
<p>Aller au :</p>
<ul>
<li><a href="#contenu">contenu</a></li>
<li><a href="#recherche">moteur de recherche</a></li>
…
</ul>
</nav>

<article>
• Section représentant un contenu indépendant
du reste du document

<section id="articles">
<article><h1>Article 1…
<article><h1>Article 2…

<section id="twitter">
<article>Lorem ipsum…
<article>Dolor sit amet…

<aside>

• Ce n’est pas une sidebar !
• Section de contenu tangentiellement relié
au contenu l’entourant (?)
• Équivalent d’un encart en typographie

<hgroup>

• Utilisé pour regrouper des headings
<hgroup>
<h1>Dr. Strangelove</h1>
<h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
</hgroup>

<time>

• Écrire des dates et heures
<p>Rendez-vous le <time datetime="2010-10-05">5 octobre</time>.</p>

<p>On se fait un ciné <time>demain</time> ?</p>

<p>Dernière connexion le <time datetime="2010-02-05T10:42:00">5 février à 10:42</time></p>

<canvas>
• Dessiner du bitmap avec Javascript
• APIs 2D et 3D

Raycasting (dev.opera) Visualisation with processing.js

<audio>/<video>

• Insérer des éléments multimédia facilement
• Éviter d’avoir à utiliser un plugin
• Accessibilité, performance

Et d’autres…

<bdi>, <command>, <datalist>,
<details>, <dialog>, <embed>,
<figcaption>, <figure>, <keygen>,
<mark>, <meter>, <output>,
<progress>, <ruby>, <rp>, <rt>,
<source>, <track>, <wbr>

Nouveaux attributs

• data-* : Attributs personnalisés

• draggable : Indique que le contenu est déplaçable

• role, aria-* : Accessibilité

• Et d’autres…

Balises dépréciées
• Présentation : <basefont>, <big>, <center>,
<font>, <strike>, <tt>, <u>

• Mauvaise utilisabilité/accessibilité : <frame>,
<frameset>, <noframes>

• Prêtant à confusion, inutile : <acronym>,
<applet>, <isindex>, <dir>

• <noscript> (uniquement en XHTML5)

Attributs dépréciés

http://dev.w3.org/html5/html4-differences/#absent-attributes
(Essentiellement des attributs à but présentationnels)

Balises redéﬁnies
• <i> : Termes techniques, expressions
idiomatiques, les pensées… Habituellement
mis en italique en typographie.
• <b> : Mots clés, nom de produit…
Habituellement mis en gras en typographie.
• <strong> : Ajoute de l’importance

• <small> : Petites lignes

Attributs redéﬁnis

http://dev.w3.org/html5/html4-differences/#changed-attributes

Web Forms 2.0
Nouveaux type d’<input> :
• datetime, datetime-local, date, time, month, week
• number, range
• email
• url
• search
• tel
• color

Web Forms 2.0

Nouveaux attributs pour les éléments de formulaires :
• autofocus
• placeholder
• required
• autocomplete, min, max, pattern, step

Quand l’utiliser ?

• Tout de suite
• Pour des projets non-critiques
• Si vous pouvez mettre l’accessibilité de côté

… et IE ?
Impossible de styler une balise inconnue (!)



(dans le <head>)

A vocabulary and
associated APIs
for HTML and XHTML

API ?

Application Programming Interface
Ensemble de fonctions mises à disposition

Web Forms 2.0
Vériﬁer les contraintes des champs

<form>
<input type="number" value="coucou" />
<input type="email" value="me@neovov.com" />
</form>

var
form = document.getElementsByTagName("form")[0],
input = document.getElementsByTagName("input");

input[0].checkValidity(); // false ("coucou" n'est pas un nombre)
input[1].checkValidity(); // true
form.checkValidity(); // false

Web Forms 2.0
Vériﬁer les contraintes des champs

<form>
<input type="number" value="1" />
<input type="email" value="me@neovov.com" />
</form>

var
form = document.getElementsByTagName("form")[0],
input = document.getElementsByTagName("input");

form.checkValidity(); // true

Selector API

$("#news article:nth-child(2n+1)")
=
$$("#news article:nth-child(2n+1)")
=
document.querySelectorAll("#news
article:nth-child(2n+1)")

Selector API
Récupérer des éléments

• querySelector() => Element || null

• querySelectorAll() => NodeList

Selector API
feature detection

!!document.querySelector

var $ = document.querySelectorAll || (function(selector) {
// Code bien lourd (ou sizzle)
});

Canvas
Dessiner du bitmap

Excellent tutorial

Canvas
feature detection

!!document.createElement("canvas").getContext

WebGL
Dessiner du bitmap dans un contexte 3D

WebGL
feature detection

var webgl = function() {
var canvas = document.createElement("canvas");

try {
if (canvas.getContext("webgl")) return true;
} catch(e) {}

try {
if (canvas.getContext("experimental-webgl"))
return true;
} catch(e) {}

return false;
}();

Media API
Manipuler des éléments multimédia

• controls
• play()
• paused
• pause()
• volume
• canPlayType()
• currentTime

• error
• networkState

Jouons avec <video>

<object width="720" height="404" type="application/x-
shockwave-flash" data="player.swf?file=video.flv">
<param name="movie" value="player.swf?file=video.flv" />
</object>

<video width="720" height="404" src="video" controls></video>

Quel format ?

• Firefox et Opéra : Theora (OGG)
• Safari : H.264
• Le petit qui s’incruste :VP8 (WebM)
(Chrome, Firefox, Opera, IE)

Quels outils d’encodage ?

• Pour Theora : Extension Firefogg,
ffmpeg2theora (pour les courageux)
• Pour H.264 : HandBrake, autres…
• Pour WebM : ffmpeg

Jouons encore
<video width="720" height="404" controls>
<source type="video/mp4" src="video.mp4" />
<source type="video/ogg" src="video.ogg" />
</video>

<video width="720" height="404" controls>
<source type="video/mp4" src="video.mp4" />
<source type="video/ogg" src="video.ogg" />

<object width="720" height="404" type="application/x-
shockwave-flash" data="player.swf?file=video.mp4">
<param name="movie" value="player.swf?file=video.mp4" />
</object>
</video>

Jouons avec l’API
<video id="video" width="720" height="404" controls>
<source type="video/ogg" src="videos/demoreel-2009.ogg">
<source type="video/mp4" src="videos/demoreel-2009.mp4">
</video>

<div>
<button id="play">Lire</button>
<button id="stop">Stop</button>
</div>

<script>
var
video = document.getElementById("video"),
play = document.getElementById("play"),
stop = document.getElementById("stop");

video.controls = false; // Désactive les controles par défaut
play.addEventListener("click", function() { video.play() }, false);
stop.addEventListener("click", function() { video.pause() }, false);
</script>

Media API
feature detection

!!document.createElement("video").canPlayType

Media API
feature detection

var
video = document.createElement("video"),
support = !!video.canPlayType,
formats = (support) ? {
mp4: video.canPlayType("video/mp4"),
ogg: video.canPlayType("video/ogg"),
webm: video.canPlayType("video/webm")
} : null;

Media API
feature detection

var
video = document.createElement("video"),
support = !!video.canPlayType,
mp4: video.canPlayType('video/mp4; codecs="avc1.42E01E,
mp4a.40.2"'),
ogg: video.canPlayType('video/ogg; codecs="theora"'),
webm: video.canPlayType('video/webm; codecs="vp8, vorbis"')
} : null;

Media API
feature detection

!!document.createElement("audio").canPlayType

Media API
feature detection

var
audio = document.createElement("audio"),
support = !!audio.canPlayType,
mp3: audio.canPlayType("audio/mpeg"),
ogg: audio.canPlayType("audio/ogg"),
aac: audio.canPlayType("audio/mp4")
} : null;

Media API
feature detection

var
audio = document.createElement("audio"),
support = !!audio.canPlayType,
mp3: audio.canPlayType("audio/mpeg;"),
ogg: audio.canPlayType('audio/ogg; codecs="vorbis"'),
aac: audio.canPlayType('audio/mp4; codecs="mp4a.40.2"')
} : null;

Ofﬂine API
Mettre en cache

• Cache Manifest
• Base de donnée SQL (!)

Ofﬂine API
Vériﬁer la connectivité

navigator.onLine

window.addEventListener(
"online",
function() { console.log("ONLINE"); },
false
);

window.addEventListener(
"offline",
function() { console.log("OFFLINE"); },
false
);

Ofﬂine API
feature detection

!!window.applicationCache

Web Storage
Cookies sous stéroïdes

• Association clé valeur
• Deux storages :
• session (supprimé à la fermeture de l’onglet)
• local (conservé, comme les cookies)

Web Storage
Cookies sous stéroïdes

window.sessionStorage.setItem("test", "youpi");

// Actualisez

window.sessionStorage.getItem("test"); // youpi

// Fermez et ré-ouvrez l’onglet

window.sessionStorage.getItem("test"); // null

Web Storage
feature detection

try {
return ('sessionStorage' in window) &&
window.localStorage !== null;
} catch(e) {
return false;
}

Web SQL Database
Web Storage sous stéroïdes

SQL !

• openDatabase()
• transaction()
• executeSQL()

WebSocket API
Ouvrir une connexion TCP

TCP !

Temps réel !!!

Drag’n’drop
Déplacer des éléments, déposer des ﬁchiers

• Navigateur → OS
• OS → Navigateur
• Éléments de la page
• UndoManager

File API

• Accéder aux ﬁchiers, les lire
• Uploader plusieurs ﬁchiers

Excellent tutorial

Web Workers

Externaliser les traitements lourds

Web Workers
feature detection

!!window.Worker

Geolocation API
Géolocaliser l’utilisateur

• getCurrentPosition()
• watchPosition()
• clearWatch()

Geolocation API
feature detection

!!navigator.geolocation

Ressources (W3C)

• HTML5: The Markup Language http://dev.w3.org/html5/markup/

• HTML5 Author Edition http://dev.w3.org/html5/spec-author-view/

• Diff. http://dev.w3.org/html5/html4-differences/

• Spec. http://dev.w3.org/html5/spec/Overview.html

Autres ressources
• Dive into HTML5 http://diveintohtml5.org
• Detecting HTML5 features
http://diveintohtml5.org/detect.html
• Peeks, Poke and Pointers (cheats sheet)
http://diveintohtml5.org/peeks-pokes-and-
pointers.html
• HTML5 Doctor http://html5doctor.com
• HTML5 Gallery http://html5gallery.com
(mais attention …)

Autres ressources

• html5shiv http://code.google.com/p/html5shiv/

• When can I use… http://caniuse.com
• HTML5 & CSS3 Support
http://ﬁndmebyip.com/litmus

Contact

Nicolas Le Gall
me@neovov.com

HTML5

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à HTML5

Similaire à HTML5 (20)

Dernier

Dernier (20)

HTML5