HTML5
69
HTML5
description
Cours sur HTML5
Transcript of HTML5
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écification claire, dirigiste
• Repenser le contenu
Une nouvelle orientation
TextFlow
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">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Encodage
<meta charset="UTF-8">
1.Header HTTP
2.BOM du fichier3.<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>• Section permettant de naviguer
(dans le site, dans la page, etc.)
<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éfinies
• <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éfinis
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 (!)
<!--[if IE lt 9]> <script> document.createElement("header"); document.createElement("section"); </script><![endif]-->
(dans le <head>)
A vocabulary and associated APIs
for HTML and XHTML
API ?
Application Programming InterfaceEnsemble de fonctions mises à disposition
Web Forms 2.0Vérifier les contraintes des champs
<form> <input type="number" value="coucou" /> <input type="email" value="[email protected]" /></form>
var form = document.getElementsByTagName("form")[0], input = document.getElementsByTagName("input");
input[0].checkValidity(); // false ("coucou" n'est pas un nombre)input[1].checkValidity(); // trueform.checkValidity(); // false
Web Forms 2.0Vérifier les contraintes des champs
<form> <input type="number" value="1" /> <input type="email" value="[email protected]" /></form>
var form = document.getElementsByTagName("form")[0], input = document.getElementsByTagName("input");
input[0].checkValidity(); // trueinput[1].checkValidity(); // trueform.checkValidity(); // true
Selector API
$("#news article:nth-child(2n+1)")
$$("#news article:nth-child(2n+1)")
document.querySelectorAll("#news article:nth-child(2n+1)")
=
=
• querySelector() => Element || null
• querySelectorAll() => NodeList
Selector APIRécupérer des éléments
Selector APIfeature detection
!!document.querySelector
var $ = document.querySelectorAll || (function(selector) { // Code bien lourd (ou sizzle)});
CanvasDessiner du bitmap
Excellent tutorial
Canvasfeature detection
!!document.createElement("canvas").getContext
WebGLDessiner du bitmap dans un contexte 3D
WebGLfeature 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 APIManipuler des éléments multimédia
• play()• pause()• canPlayType()
• controls• paused• volume• 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)
• Pour Theora : Extension Firefogg, ffmpeg2theora (pour les courageux)
• Pour H.264 : HandBrake, autres…
• Pour WebM : ffmpeg
Quels outils d’encodage ?
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 APIfeature detection
!!document.createElement("video").canPlayType
Media APIfeature 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 APIfeature detection
var video = document.createElement("video"), support = !!video.canPlayType, formats = (support) ? { 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 APIfeature detection
!!document.createElement("audio").canPlayType
Media APIfeature detection
var audio = document.createElement("audio"), support = !!audio.canPlayType, formats = (support) ? { mp3: audio.canPlayType("audio/mpeg"), ogg: audio.canPlayType("audio/ogg"), aac: audio.canPlayType("audio/mp4") } : null;
Media APIfeature detection
var audio = document.createElement("audio"), support = !!audio.canPlayType, formats = (support) ? { mp3: audio.canPlayType("audio/mpeg;"), ogg: audio.canPlayType('audio/ogg; codecs="vorbis"'), aac: audio.canPlayType('audio/mp4; codecs="mp4a.40.2"') } : null;
Offline API
• Cache Manifest
• Base de donnée SQL (!)
Mettre en cache
Offline APIVérifier la connectivité
navigator.onLine
window.addEventListener("online",function() { console.log("ONLINE"); },false
);
window.addEventListener("offline",function() { console.log("OFFLINE"); },false
);
Offline APIfeature detection
!!window.applicationCache
Web Storage
• Association clé ↔ valeur
• Deux storages :
• session (supprimé à la fermeture de l’onglet)
• local (conservé, comme les cookies)
Cookies sous stéroïdes
Web StorageCookies 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 Storagefeature detection
try { return ('sessionStorage' in window) && window.localStorage !== null;} catch(e) { return false;}
• openDatabase()• transaction()• executeSQL()
Web SQL DatabaseWeb Storage sous stéroïdes
SQL !
WebSocket APIOuvrir une connexion TCP
TCP !
Temps réel !!!
Drag’n’drop
• Navigateur → OS
• OS → Navigateur
• Éléments de la page
• UndoManager
Déplacer des éléments, déposer des fichiers
File API
• Accéder aux fichiers, les lire
• Uploader plusieurs fichiers
Excellent tutorial
Web Workers
Externaliser les traitements lourds
Web Workersfeature detection
!!window.Worker
Geolocation APIGéolocaliser l’utilisateur
• getCurrentPosition()• watchPosition()• clearWatch()
Geolocation APIfeature detection
!!navigator.geolocation
Et d’autres !
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 featureshttp://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 Supporthttp://findmebyip.com/litmus
