Téléchargé 501 fois
![localStorage["key"] = "value";
localStorage.setitem("key", "value");
var key = localStorage["key"];
var key = localStorage.getitem["key"];](https://image.slidesharecdn.com/presentationcompletedelhtml52-110307174144-phpapp01/75/Presentation-complete-de-l-HTML5-60-2048.jpg)
Présentation complète de l'HTML5
- 1. Présentation complète del'HTML5
- 2. Objectif : Quechacun reparte avec une vision globale claire de l'HTML5
- 3. "Qu'est-ce que jedois faire pour faire un site HTML5 ?"
- 4.
- 5.
- 6. contenteditable attribute, Dragand 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.
- 9. HTML HTML + JS
- 10. Les nouveautés pourle code HTML HTML JS
- 11.
- 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>
- 16.
- 17.
- 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>Monsuper 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.
- 25. <em> = Texteprononcé avec emphase <i> = Texte prononcé par quelqu'un d'autre
- 26. <strong> = Texteimportant <b> = Texte visuellement différent
- 27.
- 29. <header role="banner"> <form role="search"> <navrole="navigation"> <section role="main">
- 30.
- 31.
- 32.
- 33.
- 34.
- 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.
- 38. Pas tout desuite :)
- 39.
- 41. <input type="text"> search tel mail url date number range color ...etc
- 44.
- 45.
- 46.
- 47.
- 48.
- 50. $.getJSON("http://api.truc.com/getUser", function(user){ alert(user.name); }); $("#content").load("http://www.truc.com/members.html");
- 51.
- 52.
- 53. Le Drag andDrop
- 54.
- 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">
- 58.
- 59.
- 60. localStorage["key"] = "value"; localStorage.setitem("key","value"); var key = localStorage["key"]; var key = localStorage.getitem["key"];
- 62. Base de donnéeslocale : IndexedDB
- 63.
- 64.
- 65.
- 66. <!DOCTYPE html> <html manifest="site.appcache"> CACHEMANIFEST # Version 0.1 index.html logo.png
- 67. <!DOCTYPE html> <html manifest="site.appcache"> CACHEMANIFEST # 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 Pasintuitif
- 72.
- 73.
- 74. history.back(); history.forward(); history.pushState(); history.replaceState(); Plus besoin d'utiliser le # pour naviguer dans les applications AJAX
- 75.
- 76. Permet le fullduplex entre le navigateur et le serveur
- 77. Push de donnéesvers le navigateur
- 78. Permet de communiquersans le protocole HTTP
- 79. 3 fois plusrapide (150ms > 50ms) Cross Domain Traverse les firewalls et proxys
- 81.
- 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 ligneson 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.
- 88.
- 89.
- 91.
- 92.
- 93.
- 94. On peut commencerdès maintenant !
- 95. Outils : Modernizr HTML5shiv HTML5 Boilerplate ...et Initializr!
- 97. Le canvas surle gâteau http://videos.mozilla.org/serv/mozhacks/flight-of-the-navigator/