HTML5

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

Transcript

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