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.

Nouveaux apis

1,599 views

Published on

  • Be the first to like this

Nouveaux apis

  1. 1. Nouveaux APIs (HTML5, CSS3, JS) 23 février 2012 - Rémy Savard
  2. 2. Nouveaux APIs• HTML5• APIs• Stratégie
  3. 3. HTML5"This logo represents HTML5, the cornerstone for modern Web applications." W3C - http://www.w3.org/html/logo/faq.html#logo-represent
  4. 4. HTML5"HTML5 is the next major revision of the HTML standard, currently under development." Wikipedia - http://en.wikipedia.org/wiki/HTML5
  5. 5. HTML5HTML
  6. 6. HTML5HTML + CSS
  7. 7. HTML5HTML + CSS + JavaScript =
  8. 8. HTML5HTML + CSS + JavaScript =
  9. 9. APIs
  10. 10. Microdata APIs
  11. 11. Web StorageMicrodata APIs
  12. 12. Offline Web applications Web StorageMicrodata APIs
  13. 13. Offline Web applications Web Storage Web WorkersMicrodata APIs
  14. 14. Offline Web applications Web Storage Web WorkersMicrodata APIs Geolocation
  15. 15. Offline Web applications Web Storage Web WorkersMicrodata APIs Geolocation Drag & Drop
  16. 16. Offline Web applications Web Storage Web WorkersMicrodata APIs Geolocation Drag & Drop Video/Audio
  17. 17. Offline Web applications Web Storage Web WorkersMicrodata APIs Geolocation Drag & Drop Video/Audio Canvas
  18. 18. Offline Web applications Web Storage Web WorkersMicrodata APIs Geolocation Drag & Drop SVG Video/Audio Canvas
  19. 19. Offline Web applications Web Storage Web WorkersMicrodata APIs Geolocation CSS3 Drag & Drop SVG Video/Audio Canvas
  20. 20. Microdata"[...] people understand when they read the web pages. But search engines have a limited understanding of what is being discussed [...]" http://www.schema.org/docs/gs.html
  21. 21. Microdata
  22. 22. Microdata
  23. 23. Microdata
  24. 24. MicrodataPersonnesÉvénementsApplications http://www.schema.org/docs/gs.html
  25. 25. MicrodataAuteurs, critiques, musique, recettes, applications, produits, événements personnes, etc.
  26. 26. Stockage• Web Storage• Offline Web applications
  27. 27. Web Storage "[...] used for storing data in a web browser. Webstorage supports persistent data storage, similar to cookies, as well as window-local storage." http://en.wikipedia.org/wiki/Web_Storage
  28. 28. Web Storage• Stockage clé-valeur dans le navigateur• 0 info stocké dans la requête HTTP• 5 Mo de stockage (IE=10 Mo)• Seulement les strings peuvent être stocké (Conversion en JSON pour stockage des objets JavaScript)
  29. 29. Web Storage• Local Storage • Données disponibles sur le domaine • Persistées après fermer le navigateur• Session Storage • Durée de vie de la fenêtre/onlget
  30. 30. Web Storage
  31. 31. Web Storage
  32. 32. Offline Web Applications"[...] store resources to be used by the browser whenit’s offline, granting your users partial access to your web site or application." http://html5doctor.com/go-offline-with-application-cache/
  33. 33. Offline Web Applications• Méthodes pour fonctionner sans connexion réseau• Contrôlé par le fichier appelé manifeste
  34. 34. Offline Web Applications• CACHE • Liste en cache (URLs externe compris)• FALLBACK • Tentative daccès fichier pas en cache• NETWORK • Disponibles uniquement en ligne
  35. 35. Offline WebApplications
  36. 36. Offline WebApplications
  37. 37. Web Workers"[...] API for running scripts, [...] in the background independently of any user interface scripts. [...]" http://en.wikipedia.org/wiki/Web_Workers
  38. 38. Web Workers• Scripts de longue durée pas interrompus par les scripts qui réagissent aux autres interactions des utilisateurs• Coût élevé des performances de démarrage et de la mémoire par instance
  39. 39. Web Workers
  40. 40. Web Workers
  41. 41. Geolocation"[...] interface to retrieve the geographical location information for a client-side device.[...]" http://en.wikipedia.org/wiki/Web_Workers
  42. 42. Geolocation• Emplacement du périphérique grâce à la consultation de serveurs dinformations de localisation• Adresse IP, Wi-Fi, Adresse MAC, Bluetooth, etc.
  43. 43. Geolocation
  44. 44. Geolocation
  45. 45. Drag & Drop"[...] event-based mechanism, JavaScript API, and additional markup for declaring [...] element be draggable on a page." http://www.html5rocks.com/en/tutorials/dnd/basics/
  46. 46. Drag & Drop• Mécanisme basé sur des événements• API JavaScript• Balisage supplémentaire pour déclarer quun élément est déplaçable
  47. 47. Drag & Drop
  48. 48. Drag & Drop
  49. 49. Video / Audio"[...] Often presented as an alternative to flash in themedia, the video tag actually goes beyond that. [...]" http://www.html5rocks.com/en/tutorials/video/basics/
  50. 50. Video / Audio• Plug-in: • Aide à combler les trous sur le web • Ne sont pas ouverts • Pas créés par la communauté • Sous le contrôle des entreprises• <video> et <audio> sont natifs de votre navigateur
  51. 51. Video / Audio
  52. 52. Video / Audio
  53. 53. Canvas"[...] dynamic, scriptable rendering of 2D shapes and bitmap images. [...] Canvas consists of a drawable region [...]" http://en.wikipedia.org/wiki/Canvas_element
  54. 54. Canvas• Région défini en HTML• Rendus dynamiques dimages bitmap via des scripts
  55. 55. Canvas
  56. 56. Canvas
  57. 57. Scalable Vector Graphics"[...] two-dimensional vector graphics, [...] they can be searched, indexed, scripted and, if required, compressed. [...]" http://en.wikipedia.org/wiki/Scalable_Vector_Graphics
  58. 58. Scalable Vector Graphics• Décrit des graphiques vectoriels• Basé sur XML• Peuvent être dynamiques et interactifs• Des modifications peuvent être décrites dans le temps avec JavaScript
  59. 59. Scalable Vector Graphics
  60. 60. Scalable Vector Graphics
  61. 61. CSS3
  62. 62. CSS3Media Queries
  63. 63. CSS3Typograhpie
  64. 64. CSS3Texte
  65. 65. CSS3Couleurs
  66. 66. CSS3Fonds et bordures
  67. 67. CSS3 Transitions, transformations 2D,animations, système de colonnes, dégradés, sélecteurs, etc.
  68. 68. APIsIndexed Database, Forms, Device orientation, WebSockets, Gestion de lhistorique, nouveaux sélecteurs JavaScript, XMLHttpRequest2, etc.
  69. 69. Stratégie
  70. 70. SupportStratégie
  71. 71. SupportStratégie Détection
  72. 72. Polyfills Support Stratégie Détection
  73. 73. Support
  74. 74. Support
  75. 75. Support
  76. 76. Support "10 years ago a browser was born. Its name wasInternet Explorer 6. Now that we’re in 2012, in an era of modern web standards, it’s time to say goodbye." Microsoft - http://www.theie6countdown.com/
  77. 77. Support
  78. 78. Support
  79. 79. Support
  80. 80. Support
  81. 81. SupportWe, as developers, should be able to develop with the HTML5 apis [...]. Developing in this future- proof way means as users upgrade, your codedoesnt have to change but users will move to the better, native experience cleanly." Paul Irish - Google
  82. 82. Support<!DOCTYPE HTML>
  83. 83. Supporthtml, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section { display: block;}
  84. 84. Supportcaniuse.com
  85. 85. Détection
  86. 86. DétectionCréer chaque élément en JavaScript pour Internet Explorer 6, 7 et 8
  87. 87. Détection
  88. 88. Polyfills"So here were collecting all the shims, fallbacks, and polyfills in order to implant html5 functionality in browsers that dont natively support them." The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks
  89. 89. Polyfills The All-In-OneEntirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks
  90. 90. Conclusion
  91. 91. caniuseConclusion
  92. 92. caniuseConclusion Modernizr
  93. 93. Polyfills caniuse Conclusion Modernizr
  94. 94. Merci• caniuse.com• html5boilerplate.com• html5rocks• <html>5 doctor• Dive into HTML5• wikipedia (HTML5)
  95. 95. Nouveaux APIs (HTML5, CSS3, JS) 23 février 2012 - Rémy Savard

×