HTML5

Notes:	Hide Notes

Slide 1: HTML5 Slide 2: Pourquoi HTML5 ? • Depuis 1999, les usages ont changés • Applications web • Sémantiser Slide 3: Pour quoi HTML5 ? • Structurer un document • Créer des applications web • Préparer l’avenir Slide 4: Une nouvelle orientation • Standardiser l’existant • Spéciﬁcation claire, dirigiste • Repenser le contenu Slide 5: Une nouvelle orientation Text Flow Bodytext Slide 6: 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"> Slide 7: 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> Slide 8: <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 Slide 9: <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> Slide 10: <nav> permettant de naviguer • Sectionsite, dans la page, etc.) (dans le <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> Slide 11: <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… Slide 12: <aside> • Ce n’est pas une sidebar ! • Section de contenu tangentiellement relié au contenu l’entourant (?) • Équivalent d’un encart en typographie Slide 13: <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> Slide 14: <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> Slide 15: <canvas> • Dessiner du bitmap avec Javascript • APIs 2D et 3D Raycasting (dev.opera) Visualisation with processing.js Slide 16: <audio>/<video> • Insérer des éléments multimédia facilement • Éviter d’avoir à utiliser un plugin • Accessibilité, performance Slide 17: Et d’autres… <bdi>, <command>, <datalist>, <details>, <dialog>, <embed>, <figcaption>, <figure>, <keygen>, <mark>, <meter>, <output>, <progress>, <ruby>, <rp>, <rt>, <source>, <track>, <wbr> Slide 18: Nouveaux attributs • • • data-* : Attributs personnalisés draggable : Indique que le contenu est déplaçable role, aria-* : Accessibilité • Et d’autres… Slide 19: Balises dépréciées • Présentation : <basefont>, <big>, <center>, <font>, <strike>, <tt>, <u> <frameset>, <noframes> • Mauvaise utilisabilité/accessibilité : <frame>, • Prêtant à confusion, inutile : <acronym>, <applet>, <isindex>, <dir> • <noscript> (uniquement en XHTML5) Slide 20: Attributs dépréciés http://dev.w3.org/html5/html4-differences/#absent-attributes (Essentiellement des attributs à but présentationnels) Slide 21: 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 Slide 22: Attributs redéﬁnis http://dev.w3.org/html5/html4-differences/#changed-attributes Slide 23: Web Forms 2.0 Nouveaux type d’<input> : • datetime, datetime-local, date, time, month, week • number, range • email • url • search • tel • color Slide 24: Web Forms 2.0 Nouveaux attributs pour les éléments de formulaires : • autofocus • placeholder • required • autocomplete, min, max, pattern, step Slide 25: Quand l’utiliser ? • Tout de suite • Pour des projets non-critiques • Si vous pouvez mettre l’accessibilité de côté Slide 26: … et IE ? Impossible de styler une balise inconnue (!) <!--[if IE lt 9]> <script> document.createElement("header"); document.createElement("section"); </script> <![endif]--> (dans le <head>) Slide 27: A vocabulary and associated APIs for HTML and XHTML Slide 28: API ? Application Programming Interface Ensemble de fonctions mises à disposition Slide 29: Vériﬁer les contraintes des champs <form> <input type="number" value="coucou" /> <input type="email" value="me@neovov.com" /> </form> Web Forms 2.0 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 Slide 30: Vériﬁer les contraintes des champs <form> <input type="number" value="1" /> <input type="email" value="me@neovov.com" /> </form> Web Forms 2.0 var form = document.getElementsByTagName("form")[0], input = document.getElementsByTagName("input"); input[0].checkValidity(); // true input[1].checkValidity(); // true form.checkValidity(); // true Slide 31: Selector API $("#news article:nth-child(2n+1)") = $$("#news article:nth-child(2n+1)") = document.querySelectorAll("#news article:nth-child(2n+1)") Slide 32: Selector API Récupérer des éléments • • querySelector() => Element \|\| null querySelectorAll() => NodeList Slide 33: Selector API feature detection !!document.querySelector var $ = document.querySelectorAll \|\| (function(selector) { // Code bien lourd (ou sizzle) }); Slide 34: Canvas Dessiner du bitmap Excellent tutorial Slide 35: Canvas feature detection !!document.createElement("canvas").getContext Slide 36: WebGL Dessiner du bitmap dans un contexte 3D Slide 37: 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; }(); Slide 38: Manipuler des éléments multimédia Media API • • • • • play() • pause() • canPlayType() controls paused volume currentTime • error • networkState Slide 39: Jouons avec <video> <object width="720" height="404" type="application/xshockwave-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> Slide 40: Quel format ? • Firefox et Opéra : Theora (OGG) • Safari : H.264 • Le petit qui s’incruste :VP8 (WebM) (Chrome, Firefox, Opera, IE) Slide 41: Quels outils d’encodage ? • Pour Theora : Extension Firefogg, ffmpeg2theora (pour les courageux) • Pour H.264 : HandBrake, autres… • Pour WebM : ffmpeg Slide 42: 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/xshockwave-flash" data="player.swf?file=video.mp4"> <param name="movie" value="player.swf?file=video.mp4" /> </object> </video> Slide 43: 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> Slide 44: Media API feature detection !!document.createElement("video").canPlayType Slide 45: 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; Slide 46: Media API feature 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; Slide 47: Media API feature detection !!document.createElement("audio").canPlayType Slide 48: Media API feature 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; Slide 49: Media API feature 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; Slide 50: (Media Capture API) Slide 51: Ofﬂine API Mettre en cache • Cache Manifest • Base de donnée SQL (!) Slide 52: 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 Slide 53: Ofﬂine API feature detection !!window.applicationCache Slide 54: Web Storage Cookies sous stéroïdes • Association clé valeur • Deux storages : • session (supprimé à la fermeture de l’onglet) • local (conservé, comme les cookies) Slide 55: 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 Slide 56: Web Storage feature detection try { return ('sessionStorage' in window) && window.localStorage !== null; } catch(e) { return false; } Slide 57: Web SQL Database Web Storage sous stéroïdes SQL ! • openDatabase() • transaction() • executeSQL() Slide 58: WebSocket API Ouvrir une connexion TCP TCP ! Temps réel !!! Slide 59: Déplacer des éléments, déposer des ﬁchiers Drag’n’drop • Navigateur → OS • OS → Navigateur • Éléments de la page • UndoManager Slide 60: File API • Accéder aux ﬁchiers, les lire • Uploader plusieurs ﬁchiers Excellent tutorial Slide 61: Web Workers Externaliser les traitements lourds Slide 62: Web Workers feature detection !!window.Worker Slide 63: Geolocation API Géolocaliser l’utilisateur • getCurrentPosition() • watchPosition() • clearWatch() Slide 64: Geolocation API feature detection !!navigator.geolocation Slide 65: Et d’autres ! Slide 66: 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 Slide 67: 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-andpointers.html • HTML5 Doctor http://html5doctor.com • HTML5 Gallery http://html5gallery.com (mais attention …) Slide 68: Autres ressources • html5shiv http://code.google.com/p/html5shiv/ • When can I use… http://caniuse.com • HTML5 & CSS3 Support http://ﬁndmebyip.com/litmus Slide 69: Contact Nicolas Le Gall me@neovov.com