HTML5

1,203 views

Published on

Introduction aux concepts HTML5. Présentation et exemples de quelques fonctionnalités.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,203
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5

  1. 1. LOGO du client HTML 5 #nov-2013 Auteurs : Olivier Boitel et Pierre Besson
  2. 2. Historique • HTML 1991 • Le web devient public • HTML 2 et Netscape 1.0 1994 • Naissance du W3C 1996 2000 • CSS/Javascript • XHTML • Web 2.0 2005 • Ajax, naissance des réseaux sociaux 2009 • HTML5 HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  3. 3. Avant HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  4. 4. Réconciliation et expression du besoin 2004: W3C workshop on web application and compound documents Clear Migration Usage Non bloquant Conciliation Processus ouvert Simplicité Continuité technologique Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  5. 5. Chronologie 2014 W3C recommandation 2009 XHTML 2.0 Abandon XHTML 2.0 2004 Début des spécifications HTML 5 HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  6. 6. Un modèle en évolution Page Client UI Client HTML/CSS HTML/CSS/JS Server Browser Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  7. 7. Un modèle en évolution Page Client UI Client HTML/CSS HTML/CSS/JS Ajax Data services REST JSON Ajax API REST Application layer Javascript Ajax Server Browser API REST Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  8. 8. Web app Web UI Web HTML/CSS Client UI HTML/CSS Application layer Javascript Data services REST JSON Ajax Data access layer Javascript Local storage HTML5 Server Client HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  9. 9. Comment Comment ? Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  10. 10. Les technologies Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  11. 11. Les navigateurs Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  12. 12. Comparaison des fonctionnalités Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  13. 13. Comparaison des fonctionnalités Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  14. 14. Implémentation des fonctionnalités Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  15. 15. Course à la performance Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  16. 16. Indicateurs de performance Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  17. 17. Part de marché Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  18. 18. Outils de développement Ressouces Traffic Réseau Debugger Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  19. 19. Evangéliste et Guru Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  20. 20. Focus sur les fonctionnalités HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  21. 21. Fonctionnalités HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  22. 22. Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  23. 23. #Semantic Sémantique  Pourquoi ? • Améliorer l’interprétation du contenu par des tiers • Moteur de recherche • Browser • Identifier la nature d’un contenu • Simplifier le contenu des pages  Comment ? • • • • Une page décrit son propre contenu (découpage sémantique) Le contenu est accessible et utilisable Nouvelles fonctionnalités de formulaires Diminution des éléments de style pour décrire le contenu (Ids, class) HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  24. 24. #Semantic Éléments HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  25. 25. #Semantic Avant <div id="header"> <div id="nav"> <div id="section"> <div id="sidebar"> <div id="article"> <div id="footer"> HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  26. 26. #Semantic Avec HTML 5 <header> <nav> <section> <aside> <article> <footer> http://jsfiddle.net/vwL3W/ HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  27. 27. #Semantic Data type HTML5 http://jsfiddle.net/pierr/SRQ4d/5/embedded/result/ Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  28. 28. Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  29. 29. #Mobilité Gestion du Offline Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  30. 30. #Mobilité Stockage de ressources AppCache Mécanisme de mise à jour Possibilité de navigation offline Utile même en online http://appcachefacts.info/ Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  31. 31. #Mobilité AppCache Checking MANIFEST HTML No Update Update JS Download CSS IMAGES End FILES Browser Serveur Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  32. 32. #Mobilité DOM Storage Nom de domaine Clef Valeur lang fr http://jsfiddle.net/pierr/RTD7E/ Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  33. 33. Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  34. 34. #Responsive CSS 3 Media Queries http://www.alsacreations.fr/ HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  35. 35. #DataViz CSS3 transformations rotate translate scale matrix http://jsfiddle.net/pierr/fw5jQ/1/embedded/result/ Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  36. 36. Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  37. 37. #DataViz SVG – dessin vectoriel Déclaratif DOM Vecteur http://jsfiddle.net/eVRq7/ HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  38. 38. #DataViz Canvas – dessin Bitmap Programmation JavaScript Dessin au pixel HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  39. 39. Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  40. 40. #RealTime Data visualisation temps réel Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  41. 41. #RealTime WebSocket Client Client HTML/CSS/JS HTML/CSS/JS Serveur Action Réaction Application layer Application layer Javascript Javascript Notification Notification Browser Web Socket Any other Browser Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  42. 42. #RealTime Socket.io http://socket.io/ Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  43. 43. Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  44. 44. #GeoLoc Geolocation API http://jsfiddle.net/pierr/rNJ4B/ Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  45. 45. Device Orientation http://jsfiddle.net/pierr/P6jfx/embedded/result/ Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  46. 46. Bilan Fonctionnalités #GeoLoc #DataViz #Semantic #RealTime #Responsive #Mobilité HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  47. 47. Points d’attention http://caniuse.com HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  48. 48. Points d’attention HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  49. 49. Points d’attention HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  50. 50. #Technos #Navigateurs Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
  51. 51. En savoir plus http://html5weekly.com/ Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013

×