Your SlideShare is downloading. ×
0
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5

2,769

Published on

Cours sur HTML5

Cours sur HTML5

Published in: Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,769
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
125
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5
  • 2. Pourquoi HTML5 ?• Depuis 1999, les usages ont changés• Applications web• Sémantiser
  • 3. Pour quoi HTML5 ?• Structurer un document• Créer des applications web• Préparer l’avenir
  • 4. Une nouvelle orientation• Standardiser l’existant• Spécification claire, dirigiste• Repenser le contenu
  • 5. Une nouvelle orientation Text FlowBodytext
  • 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. 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. <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. <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. <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. <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. <aside>• Ce n’est pas une sidebar !• Section de contenu tangentiellement relié au contenu l’entourant (?)• Équivalent d’un encart en typographie
  • 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. <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. <canvas>• Dessiner du bitmap avec Javascript• APIs 2D et 3D Raycasting (dev.opera) Visualisation with processing.js
  • 16. <audio>/<video>• Insérer des éléments multimédia facilement• Éviter d’avoir à utiliser un plugin• Accessibilité, performance
  • 17. Et d’autres… <bdi>, <command>, <datalist>, <details>, <dialog>, <embed>,<figcaption>, <figure>, <keygen>, <mark>, <meter>, <output>, <progress>, <ruby>, <rp>, <rt>, <source>, <track>, <wbr>
  • 18. Nouveaux attributs• data-* : Attributs personnalisés• draggable : Indique que le contenu est déplaçable• role, aria-* : Accessibilité• Et d’autres…
  • 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. Attributs dépréciéshttp://dev.w3.org/html5/html4-differences/#absent-attributes (Essentiellement des attributs à but présentationnels)
  • 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. Attributs redéfinishttp://dev.w3.org/html5/html4-differences/#changed-attributes
  • 23. Web Forms 2.0Nouveaux type d’<input> : • datetime, datetime-local, date, time, month, week • number, range • email • url • search • tel • color
  • 24. Web Forms 2.0Nouveaux attributs pour les éléments de formulaires : • autofocus • placeholder • required • autocomplete, min, max, pattern, step
  • 25. Quand l’utiliser ?• Tout de suite• Pour des projets non-critiques• Si vous pouvez mettre l’accessibilité de côté
  • 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. A vocabulary and associated APIsfor HTML and XHTML
  • 28. API ? Application Programming InterfaceEnsemble de fonctions mises à disposition
  • 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. 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. Selector API$("#news article:nth-child(2n+1)") =$$("#news article:nth-child(2n+1)") = document.querySelectorAll("#news article:nth-child(2n+1)")
  • 32. Selector API Récupérer des éléments• querySelector() => Element || null• querySelectorAll() => NodeList
  • 33. Selector API feature detection !!document.querySelectorvar $ = document.querySelectorAll || (function(selector) { // Code bien lourd (ou sizzle)});
  • 34. CanvasDessiner du bitmap Excellent tutorial
  • 35. Canvas feature detection!!document.createElement("canvas").getContext
  • 36. WebGLDessiner du bitmap dans un contexte 3D
  • 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. Media API Manipuler des éléments multimédia • controls• play() • paused• pause() • volume• canPlayType() • currentTime • error • networkState
  • 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. Quel format ?• Firefox et Opéra : Theora (OGG)• Safari : H.264• Le petit qui s’incruste :VP8 (WebM) (Chrome, Firefox, Opera, IE)
  • 41. Quels outils d’encodage ?• Pour Theora : Extension Firefogg, ffmpeg2theora (pour les courageux)• Pour H.264 : HandBrake, autres…• Pour WebM : ffmpeg
  • 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. 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. Media API feature detection!!document.createElement("video").canPlayType
  • 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. 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. Media API feature detection!!document.createElement("audio").canPlayType
  • 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. 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. (Media Capture API)
  • 51. Offline API Mettre en cache• Cache Manifest• Base de donnée SQL (!)
  • 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. Offline API feature detection!!window.applicationCache
  • 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. 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. Web Storage feature detectiontry { return (sessionStorage in window) &&window.localStorage !== null;} catch(e) { return false;}
  • 57. Web SQL Database Web Storage sous stéroïdes SQL ! • openDatabase() • transaction() • executeSQL()
  • 58. WebSocket APIOuvrir une connexion TCP TCP ! Temps réel !!!
  • 59. Drag’n’dropDéplacer des éléments, déposer des fichiers• Navigateur → OS• OS → Navigateur• Éléments de la page• UndoManager
  • 60. File API• Accéder aux fichiers, les lire• Uploader plusieurs fichiers Excellent tutorial
  • 61. Web WorkersExternaliser les traitements lourds
  • 62. Web Workers feature detection !!window.Worker
  • 63. Geolocation API Géolocaliser l’utilisateur • getCurrentPosition() • watchPosition() • clearWatch()
  • 64. Geolocation API feature detection!!navigator.geolocation
  • 65. Et d’autres !
  • 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. 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. Autres ressources• html5shiv http://code.google.com/p/html5shiv/• When can I use… http://caniuse.com• HTML5 & CSS3 Support http://findmebyip.com/litmus
  • 69. Contact Nicolas Le Gallme@neovov.com

×