HTML5 - Speaker Deck

Slide 1

Slide 1 text

LOGO du client #nov-2013 Auteurs : Olivier Boitel et Pierre Besson HTML 5

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Avant

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Comment Comment ?

Slide 10

Slide 10 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Les technologies

Slide 11

Slide 11 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Les navigateurs

Slide 12

Slide 12 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Comparaison des fonctionnalités

Slide 13

Slide 13 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Comparaison des fonctionnalités

Slide 14

Slide 14 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Implémentation des fonctionnalités

Slide 15

Slide 15 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Course à la performance

Slide 16

Slide 16 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Indicateurs de performance

Slide 17

Slide 17 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Part de marché

Slide 18

Slide 18 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Outils de développement Ressouces Traffic Réseau Debugger

Slide 19

Slide 19 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Evangéliste et Guru

Slide 20

Slide 20 text

HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Focus sur les fonctionnalités

Slide 21

Slide 21 text

HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Fonctionnalités

Slide 22

Slide 22 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Éléments #Semantic

Slide 25

Slide 25 text

HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Avant

#Semantic

Slide 26

Slide 26 text

HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Avec HTML 5 http://jsfiddle.net/vwL3W/ #Semantic

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013

Slide 29

Slide 29 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Gestion du Offline #Mobilité

Slide 30

Slide 30 text

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é

Slide 31

Slide 31 text

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é

Slide 32

Slide 32 text

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é

Slide 33

Slide 33 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013

Slide 34

Slide 34 text

HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 CSS 3 Media Queries http://www.alsacreations.fr/ #Responsive

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013

Slide 37

Slide 37 text

HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 SVG – dessin vectoriel http://jsfiddle.net/eVRq7/ Déclaratif DOM Vecteur #DataViz

Slide 38

Slide 38 text

HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Canvas – dessin Bitmap Programmation JavaScript Dessin au pixel #DataViz

Slide 39

Slide 39 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013

Slide 40

Slide 40 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 #RealTime Data visualisation temps réel

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Socket.io http://socket.io/ #RealTime

Slide 43

Slide 43 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013

Slide 44

Slide 44 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Geolocation API http://jsfiddle.net/pierr/rNJ4B/ #GeoLoc

Slide 45

Slide 45 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Device Orientation http://jsfiddle.net/pierr/P6jfx/embedded/result/

Slide 46

Slide 46 text

HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Bilan Fonctionnalités #Responsive #Mobilité #DataViz #GeoLoc #RealTime #Semantic

Slide 47

Slide 47 text

HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Points d’attention http://caniuse.com

Slide 48

Slide 48 text

HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Points d’attention

Slide 49

Slide 49 text

HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 Points d’attention

Slide 50

Slide 50 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 #Technos #Navigateurs

Slide 51

Slide 51 text

Spark-Archives - Cartographie HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013 En savoir plus http://html5weekly.com/