Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5

3,013 views

Published on

Cours sur HTML5

Published in: Education
  • Be the first to comment

HTML5

  1. 1. HTML5
  2. 2. Pourquoi HTML5 ?• Depuis 1999, les usages ont changés• Applications web• Sémantiser
  3. 3. Pour quoi HTML5 ?• Structurer un document• Créer des applications web• Préparer l’avenir
  4. 4. Une nouvelle orientation• Standardiser l’existant• Spécification claire, dirigiste• Repenser le contenu
  5. 5. Une nouvelle orientation Text FlowBodytext
  6. 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">
  7. 7. Encodage<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="UTF-8"> 1.Header HTTP 2.BOM du fichier 3.<meta>
  8. 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
  9. 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>
  10. 10. <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>
  11. 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…
  12. 12. <aside>• Ce n’est pas une sidebar !• Section de contenu tangentiellement relié au contenu l’entourant (?)• Équivalent d’un encart en typographie
  13. 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>
  14. 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>
  15. 15. <canvas>• Dessiner du bitmap avec Javascript• APIs 2D et 3D Raycasting (dev.opera) Visualisation with processing.js
  16. 16. <audio>/<video>• Insérer des éléments multimédia facilement• Éviter d’avoir à utiliser un plugin• Accessibilité, performance
  17. 17. Et d’autres… <bdi>, <command>, <datalist>, <details>, <dialog>, <embed>,<figcaption>, <figure>, <keygen>, <mark>, <meter>, <output>, <progress>, <ruby>, <rp>, <rt>, <source>, <track>, <wbr>
  18. 18. Nouveaux attributs• data-* : Attributs personnalisés• draggable : Indique que le contenu est déplaçable• role, aria-* : Accessibilité• Et d’autres…
  19. 19. 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)
  20. 20. Attributs dépréciéshttp://dev.w3.org/html5/html4-differences/#absent-attributes (Essentiellement des attributs à but présentationnels)
  21. 21. 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
  22. 22. Attributs redéfinishttp://dev.w3.org/html5/html4-differences/#changed-attributes
  23. 23. Web Forms 2.0Nouveaux type d’<input> : • datetime, datetime-local, date, time, month, week • number, range • email • url • search • tel • color
  24. 24. Web Forms 2.0Nouveaux attributs pour les éléments de formulaires : • autofocus • placeholder • required • autocomplete, min, max, pattern, step
  25. 25. Quand l’utiliser ?• Tout de suite• Pour des projets non-critiques• Si vous pouvez mettre l’accessibilité de côté
  26. 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>)
  27. 27. A vocabulary and associated APIsfor HTML and XHTML
  28. 28. API ? Application Programming InterfaceEnsemble de fonctions mises à disposition
  29. 29. Web Forms 2.0 Vérifier 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" nest pas un nombre)input[1].checkValidity(); // trueform.checkValidity(); // false
  30. 30. Web Forms 2.0 Vérifier 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");input[0].checkValidity(); // trueinput[1].checkValidity(); // trueform.checkValidity(); // true
  31. 31. Selector API$("#news article:nth-child(2n+1)") =$$("#news article:nth-child(2n+1)") = document.querySelectorAll("#news article:nth-child(2n+1)")
  32. 32. Selector API Récupérer des éléments• querySelector() => Element || null• querySelectorAll() => NodeList
  33. 33. Selector API feature detection !!document.querySelectorvar $ = document.querySelectorAll || (function(selector) { // Code bien lourd (ou sizzle)});
  34. 34. CanvasDessiner du bitmap Excellent tutorial
  35. 35. Canvas feature detection!!document.createElement("canvas").getContext
  36. 36. WebGLDessiner du bitmap dans un contexte 3D
  37. 37. WebGL feature detectionvar 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;}();
  38. 38. Media API Manipuler des éléments multimédia • controls• play() • paused• pause() • volume• canPlayType() • currentTime • error • networkState
  39. 39. 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>
  40. 40. Quel format ?• Firefox et Opéra : Theora (OGG)• Safari : H.264• Le petit qui s’incruste :VP8 (WebM) (Chrome, Firefox, Opera, IE)
  41. 41. Quels outils d’encodage ?• Pour Theora : Extension Firefogg, ffmpeg2theora (pour les courageux)• Pour H.264 : HandBrake, autres…• Pour WebM : ffmpeg
  42. 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/x-shockwave-flash" data="player.swf?file=video.mp4"> <param name="movie" value="player.swf?file=video.mp4" /> </object></video>
  43. 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>
  44. 44. Media API feature detection!!document.createElement("video").canPlayType
  45. 45. Media API feature detectionvar 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;
  46. 46. Media API feature detectionvar 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;
  47. 47. Media API feature detection!!document.createElement("audio").canPlayType
  48. 48. Media API feature detectionvar 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;
  49. 49. Media API feature detectionvar 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;
  50. 50. (Media Capture API)
  51. 51. Offline API Mettre en cache• Cache Manifest• Base de donnée SQL (!)
  52. 52. Offline API Vérifier la connectiviténavigator.onLinewindow.addEventListener( "online", function() { console.log("ONLINE"); }, false);window.addEventListener( "offline", function() { console.log("OFFLINE"); }, false);
  53. 53. Offline API feature detection!!window.applicationCache
  54. 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)
  55. 55. Web Storage Cookies sous stéroïdeswindow.sessionStorage.setItem("test", "youpi");// Actualisezwindow.sessionStorage.getItem("test"); // youpi// Fermez et ré-ouvrez l’ongletwindow.sessionStorage.getItem("test"); // null
  56. 56. Web Storage feature detectiontry { return (sessionStorage in window) &&window.localStorage !== null;} catch(e) { return false;}
  57. 57. Web SQL Database Web Storage sous stéroïdes SQL ! • openDatabase() • transaction() • executeSQL()
  58. 58. WebSocket APIOuvrir une connexion TCP TCP ! Temps réel !!!
  59. 59. Drag’n’dropDéplacer des éléments, déposer des fichiers• Navigateur → OS• OS → Navigateur• Éléments de la page• UndoManager
  60. 60. File API• Accéder aux fichiers, les lire• Uploader plusieurs fichiers Excellent tutorial
  61. 61. Web WorkersExternaliser les traitements lourds
  62. 62. Web Workers feature detection !!window.Worker
  63. 63. Geolocation API Géolocaliser l’utilisateur • getCurrentPosition() • watchPosition() • clearWatch()
  64. 64. Geolocation API feature detection!!navigator.geolocation
  65. 65. Et d’autres !
  66. 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
  67. 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-and- pointers.html• HTML5 Doctor http://html5doctor.com• HTML5 Gallery http://html5gallery.com (mais attention …)
  68. 68. Autres ressources• html5shiv http://code.google.com/p/html5shiv/• When can I use… http://caniuse.com• HTML5 & CSS3 Support http://findmebyip.com/litmus
  69. 69. Contact Nicolas Le Gallme@neovov.com

×