Présentation complète de l'HTML5

335,758 views

Published on

Voici une présentation sur l’HTML5 que j’ai réalisé pour l’entreprise Sfeir dans laquelle je travaille. Bien que vous n’ayez pas accès à tout le contenu retranscrit à l’oral, elle peut déjà vous apporter une synthèse assez complète de ce que cette technologie apporte.

Published in: Technology, News & Politics
1 Comment
11 Likes
Statistics
Notes
  • Aperçu des fonctionnalités...
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
335,758
On SlideShare
0
From Embeds
0
Number of Embeds
316,907
Actions
Shares
0
Downloads
497
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide

Présentation complète de l'HTML5

  1. 1. Présentation complète de lHTML5
  2. 2. Objectif : Que chacun reparte avec une vision globale claire de lHTML5
  3. 3. "Quest-ce que je dois faire pour faire un site HTML5 ?"
  4. 4. ...lHTML5 cest quoi ?
  5. 5. Cest très simple...
  6. 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. 7. Qui crée lHTML5 ?
  8. 8. HTMLHTML + JS
  9. 9. Les nouveautés pour le code HTML HTML JS
  10. 10. L’allégement du code
  11. 11. 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>
  12. 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>
  13. 13. HTML5<!DOCTYPE html><html lang="fr"><head> <meta charset="utf-8" /> <link href="design.css" rel="stylesheet" /> <script src="script.js"></script></head>
  14. 14. Les nouvelles balises
  15. 15. Balises sémantiques
  16. 16. <header>, <footer>, <aside>,<nav>, <article>, <section>...
  17. 17. 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>
  18. 18. 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>
  19. 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. 20. 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>
  21. 21. Les balises <b>, <i>et quelques autres vieilleries...
  22. 22. ...ont été recyclées !
  23. 23. <em> = Texte prononcé avec emphase<i> = Texte prononcé par quelquun dautre
  24. 24. <strong> = Texte important<b> = Texte visuellement différent
  25. 25. WAI-ARIA
  26. 26. <header role="banner"><form role="search"><nav role="navigation"><section role="main">
  27. 27. Les balises fun
  28. 28. <audio> & <video>
  29. 29. <video>
  30. 30. http://www.craftymind.com/factory/html5video/CanvasVideo.htmlBon, ok cest du canvas...
  31. 31. <audio>
  32. 32. <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>
  33. 33. <canvas>
  34. 34. Pas tout de suite :)
  35. 35. Les formulaires 2.0
  36. 36. <input type="text"> search tel mail url date number range color ...etc
  37. 37. ContentEditablehttp://html5demos.com/contenteditablehttp://aloha-editor.org/
  38. 38. Les nouveautés JavascriptHTML JS
  39. 39. "Javascript cest mal"
  40. 40. Ca, cest mal
  41. 41. "Javascript cest compliqué"
  42. 42. $.getJSON("http://api.truc.com/getUser", function(user){ alert(user.name);});$("#content").load("http://www.truc.com/members.html");
  43. 43. GWT
  44. 44. http://www.youtube.com/watch?v=fyfu4OwjUEI
  45. 45. Le Drag and Drop
  46. 46. La File APIhttp://demos.hacks.mozilla.org/openweb/FileAPI/
  47. 47. XmlHttpRequest Level 2 (XHR2 pour les intimes)
  48. 48. XmlHttpRequest Level 2 (XHR2 pour les intimes)Cross domain<?phpheader("Access-Control-Allow-Origin: *");
  49. 49. XmlHttpRequest Level 2 (XHR2 pour les intimes)Cross domain<?phpheader("Access-Control-Allow-Origin: *");ProgressionoXHR.onprogress = function(e) { // (e.loaded / e.total) * 100); };<progress max="100">
  50. 50. Les applications Offline
  51. 51. Le localStorage
  52. 52. localStorage["key"] = "value";localStorage.setitem("key", "value");var key = localStorage["key"];var key = localStorage.getitem["key"];
  53. 53. Base de données locale : IndexedDB
  54. 54. Le fichier manifest
  55. 55. <!DOCTYPE html><html>
  56. 56. <!DOCTYPE html><html manifest="site.appcache">
  57. 57. <!DOCTYPE html><html manifest="site.appcache">CACHE MANIFEST# Version 0.1index.htmllogo.png
  58. 58. <!DOCTYPE html><html manifest="site.appcache">CACHE MANIFEST# Version 0.1index.htmllogo.pngAddType text/cache-manifest .appcache
  59. 59. <link rel="apple-touch-icon" href="apple-touch-icon.png"/>
  60. 60. Pas de marketplacePas intuitif
  61. 61. History API
  62. 62. history.back();history.forward();history.pushState();history.replaceState();
  63. 63. history.back(); history.forward(); history.pushState(); history.replaceState();Plus besoin dutiliser le # pour naviguerdans les applications AJAX
  64. 64. Les Websockets
  65. 65. Permet le full duplex entre le navigateur et le serveur
  66. 66. Push de données vers le navigateur
  67. 67. Permet de communiquer sans le protocole HTTP
  68. 68. 3 fois plus rapide (150ms > 50ms)Cross DomainTraverse les firewalls et proxys
  69. 69. La géolocalisation
  70. 70. navigator.geolocation.getCurrentPosition(function(pos){ alert(position.coords.latitude + " " + pos.coords.longitude);});
  71. 71. navigator.geolocation.getCurrentPosition(function(pos){ alert(position.coords.latitude + " " + pos.coords.longitude);});
  72. 72. navigator.geolocation.getCurrentPosition(function(pos){ alert(position.coords.latitude + " " + pos.coords.longitude);});
  73. 73. En quelques lignes on obtient très facilement :
  74. 74. 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, contenteditableattribute, 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
  75. 75. "Ca sort quand ?"
  76. 76. Spécification finalisée en 2014
  77. 77. Candidate recommendation : 2022
  78. 78. Support des navigateurs
  79. 79. CanIUse.comFindMeByIp.com
  80. 80. IE9 le sauveur ?
  81. 81. On peut commencer dès maintenant !
  82. 82. Outils : Modernizr HTML5shiv HTML5 Boilerplate ...et Initializr!
  83. 83. Le canvas sur le gâteauhttp://videos.mozilla.org/serv/mozhacks/flight-of-the-navigator/

×