Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
Similaire à Présentation complète de l'HTML5
Similaire à Présentation complète de l'HTML5 (20)
Présentation complète de l'HTML5
- 1. Présentation complète de l'HTML5
- 2. Objectif : Que chacun reparte avec une vision globale claire de l'HTML5
- 3. "Qu'est-ce que je dois faire pour faire un site HTML5 ?"
- 6. contenteditable attribute, Drag and Drop, meta name=" viewport" content="width=device-width, user- scalable=no", Cross-document messaging, Notification API, Web Storage - name/value pairs, XmlHttpRequest 2, querySelector/querySelectorAll, Microdata, Descriptive tags / rel, JSON parsing, WAI-ARIA Accessibility features, Hashchange event, Data URLs, Canvas, SVG, Cross-Origin Resource SharinggetElementsByClassName, Offline web applications, HTML5 history - onReplaceState - onPushState, audio, Microformats, video, Text Api Canvas, web workers, geolocation, SVG effects for HTML, New semantic elements, File API, Web SQL Database, , MathML, classList (DOMTokenList), SVG SMIL animation, Forms 2.0, Server-sent DOM events, Web Sockets, Form validation, WebGL, IndexedDB
- 7. Qui crée l'HTML5 ?
- 9. HTML HTML + JS
- 10. Les nouveautés pour le code HTML HTML JS
- 12. HTML 4.01 / XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="design.css" /> <script type=”text/javascript” src=script.js"></script> </head> <body> </body> </html>
- 14. HTML 4.01 / XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="design.css" /> <script type=”text/javascript” src=script.js"></script> </head> <body> </body> </html>
- 15. HTML5 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" /> <link href="design.css" rel="stylesheet" /> <script src="script.js"></script> </head>
- 18. <header>, <footer>, <aside>, <nav>, <article>, <section>...
- 19. HTML 4.01 / XHTML 1.0 <div id="header"> <h1>Mon super site</h1> </div> <div id="article"> <h2>Mon super article<h2> <div id="intro"> <p>Un premier paragraphe</p> </div> <div id="content"> <p>Un premier paragraphe</p> <p>Un deuxième paragraphe</p> </div> <div id="conclusion"> <p>Un premier paragraphe</p> </div> <div id="author">Ecrit par moi-même</div> </div>
- 20. HTML 4.01 / XHTML 1.0 <div id="header"> <h1>Mon super site</h1> </div> <div id="article"> <h2>Mon super article<h2> <div id="intro"> <p>Un premier paragraphe</p> </div> <div id="content"> <p>Un premier paragraphe</p> <p>Un deuxième paragraphe</p> </div> <div id="conclusion"> <p>Un premier paragraphe</p> </div> <div id="author">Ecrit par moi-même</div> </div>
- 21. HTML 4.01 / XHTML 1.0 <div id="header"> <h1>Mon super site</h1> </div> <div id="article"> <h2>Mon super article<h2> <div id="intro"> <p>Un premier paragraphe</p> </div> <div id="content"> <p>Un premier paragraphe</p> <p>Un deuxième paragraphe</p> </div> <div id="conclusion"> <p>Un premier paragraphe</p> </div> <div id="author">Ecrit par moi-même</div> </div>
- 22. HTML5 <header> <h1>Mon super site</h1> <header> <article> <h1>Mon super article<h1> <section> <p>Un premier paragraphe</p> </section> <section> <p>Un premier paragraphe</p> <p>Un deuxième paragraphe</p> </section> <section> <p>Un premier paragraphe</p> </section> <footer>Ecrit par moi-même</footer> </article>
- 23. Les balises <b>, <i> et quelques autres vieilleries...
- 24. ...ont été recyclées !
- 25. <em> = Texte prononcé avec emphase <i> = Texte prononcé par quelqu'un d'autre
- 26. <strong> = Texte important <b> = Texte visuellement différent
- 27. WAI-ARIA
- 29. <header role="banner"> <form role="search"> <nav role="navigation"> <section role="main">
- 30. Les balises fun
- 32. <video>
- 34. <audio>
- 36. <audio> <source src="song.ogg" type="video/ogg" /> <source src="song.mp3" type="video/mp3" /> </audio> <video> <source src="video.mp4" type="video/mp4" /> <source src="video.ogv" type="video/ogg" /> </video>
- 37. <canvas>
- 38. Pas tout de suite :)
- 41. <input type="text"> search tel mail url date number range color ...etc
- 47. Ca, c'est mal
- 50. $.getJSON("http://api.truc.com/getUser", function(user){ alert(user.name); }); $("#content").load("http://www.truc.com/members.html");
- 51. GWT
- 53. Le Drag and Drop
- 55. XmlHttpRequest Level 2 (XHR2 pour les intimes)
- 56. XmlHttpRequest Level 2 (XHR2 pour les intimes) Cross domain <?php header("Access-Control-Allow-Origin: *");
- 57. XmlHttpRequest Level 2 (XHR2 pour les intimes) Cross domain <?php header("Access-Control-Allow-Origin: *"); Progression oXHR.onprogress = function(e) { // (e.loaded / e.total) * 100); }; <progress max="100">
- 59. Le localStorage
- 60. localStorage["key"] = "value"; localStorage.setitem("key", "value"); var key = localStorage["key"]; var key = localStorage.getitem["key"];
- 62. Base de données locale : IndexedDB
- 66. <!DOCTYPE html> <html manifest="site.appcache"> CACHE MANIFEST # Version 0.1 index.html logo.png
- 67. <!DOCTYPE html> <html manifest="site.appcache"> CACHE MANIFEST # Version 0.1 index.html logo.png AddType text/cache-manifest .appcache
- 69. <link rel="apple-touch-icon" href="apple-touch-icon.png"/>
- 70. Pas de marketplace Pas intuitif
- 72. History API
- 74. history.back(); history.forward(); history.pushState(); history.replaceState(); Plus besoin d'utiliser le # pour naviguer dans les applications AJAX
- 75. Les Websockets
- 76. Permet le full duplex entre le navigateur et le serveur
- 77. Push de données vers le navigateur
- 78. Permet de communiquer sans le protocole HTTP
- 79. 3 fois plus rapide (150ms > 50ms) Cross Domain Traverse les firewalls et proxys
- 82. navigator.geolocation.getCurrentPosition(function(pos){ alert(position.coords.latitude + " " + pos.coords.longitude); });
- 83. navigator.geolocation.getCurrentPosition(function(pos){ alert(position.coords.latitude + " " + pos.coords.longitude); });
- 84. navigator.geolocation.getCurrentPosition(function(pos){ alert(position.coords.latitude + " " + pos.coords.longitude); });
- 85. En quelques lignes on obtient très facilement :
- 86. Drag and Drop, meta name="viewport" content=" width=device-width, user-scalable=no", Cross-document messaging, Notification API, Web Storage - name/value pairs, XmlHttpRequest 2, contenteditable attribute, querySelector/querySelectorAll, Microdata, Descri ptive tags / rel, JSON parsing, WAI-ARIA Accessibility features, Hashchange event, Data URLs, Canvas, SVG, Cross-Origin Resource Sharing, getElementsByClassName, Offline web applications, HTML5 history - onReplaceState - onPushState, audio, Microformats, video, Text Api Canvas, web workers, geolocation, SVG effects for HTML, New semantic elements, File API, Web SQL Database, MathML, classList (DOMTokenList), SVG SMIL animation, Forms 2.0, Server-sent DOM events, Web Sockets, Form validation, WebGL, IndexedDB
- 87. "Ca sort quand ?"
- 88. Spécification finalisée en 2014
- 89. Candidate recommendation : 2022
- 93. IE9 le sauveur ?
- 94. On peut commencer dès maintenant !
- 95. Outils : Modernizr HTML5shiv HTML5 Boilerplate ...et Initializr!
- 97. Le canvas sur le gâteau http://videos.mozilla.org/serv/mozhacks/flight-of-the-navigator/