LOGO du client

HTML 5
#nov-2013
Auteurs : Olivier Boitel et Pierre Besson
Historique
• HTML
1991 • Le web devient public
• HTML 2 et Netscape 1.0
1994 • Naissance du W3C

1996

2000

• CSS/Javascr...
Avant

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

Usag...
Chronologie

2014
W3C
recommandation

2009

XHTML
2.0

Abandon
XHTML 2.0

2004
Début des
spécifications

HTML
5

HTML 5 - ...
Un modèle en évolution

Page

Client UI

Client

HTML/CSS

HTML/CSS/JS

Server

Browser

Spark-Archives - Cartographie
HTM...
Un modèle en évolution

Page

Client UI

Client

HTML/CSS

HTML/CSS/JS
Ajax

Data services
REST JSON

Ajax

API REST

Appl...
Web app

Web UI

Web

HTML/CSS

Client UI
HTML/CSS

Application layer
Javascript

Data services
REST JSON

Ajax

Data acce...
Comment

Comment ?

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

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

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

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

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

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

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

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

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

Ressouces

Traffic Réseau

Debugger

Spark-Archives - Cartographie
HTML 5 - Olivier Boitel et Pie...
Evangéliste et Guru

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

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

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

Sémantique

 Pourquoi ?
• Améliorer l’interprétation du contenu par des tiers
• Moteur de recherche
• Browser
...
#Semantic

Éléments

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

Avant
<div id="header">

<div id="nav">
<div id="section">

<div id="sidebar">

<div id="article">

<div id="fo...
#Semantic

Avec HTML 5
<header>

<nav>
<section>

<aside>

<article>

<footer>
http://jsfiddle.net/vwL3W/
HTML 5 - Olivier...
#Semantic

Data type HTML5

http://jsfiddle.net/pierr/SRQ4d/5/embedded/result/

Spark-Archives - Cartographie
HTML 5 - Oli...
Spark-Archives - Cartographie
HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
#Mobilité

Gestion du Offline

Spark-Archives - Cartographie
HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
#Mobilité
Stockage de ressources

AppCache
Mécanisme de mise à jour

Possibilité de navigation offline

Utile même en onli...
#Mobilité

AppCache
Checking

MANIFEST
HTML

No Update

Update
JS
Download

CSS
IMAGES

End

FILES

Browser

Serveur

Spar...
#Mobilité

DOM Storage

Nom de domaine
Clef

Valeur

lang

fr
http://jsfiddle.net/pierr/RTD7E/
Spark-Archives - Cartograph...
Spark-Archives - Cartographie
HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
#Responsive

CSS 3 Media Queries

http://www.alsacreations.fr/
HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2013
#DataViz

CSS3 transformations
rotate

translate

scale

matrix

http://jsfiddle.net/pierr/fw5jQ/1/embedded/result/

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

SVG – dessin vectoriel
Déclaratif
DOM
Vecteur

http://jsfiddle.net/eVRq7/

HTML 5 - Olivier Boitel et Pierre Bes...
#DataViz

Canvas – dessin Bitmap

Programmation JavaScript

Dessin au pixel

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

Data visualisation temps réel

Spark-Archives - Cartographie
HTML 5 - Olivier Boitel et Pierre Besson - 28/11/2...
#RealTime

WebSocket

Client

Client

HTML/CSS/JS

HTML/CSS/JS

Serveur

Action

Réaction

Application
layer

Application
...
#RealTime

Socket.io

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

Geolocation API

http://jsfiddle.net/pierr/rNJ4B/
Spark-Archives - Cartographie
HTML 5 - Olivier Boitel et Pierre...
Device Orientation

http://jsfiddle.net/pierr/P6jfx/embedded/result/
Spark-Archives - Cartographie
HTML 5 - Olivier Boitel...
Bilan Fonctionnalités

#GeoLoc
#DataViz

#Semantic

#RealTime

#Responsive
#Mobilité

HTML 5 - Olivier Boitel et Pierre Be...
Points d’attention

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

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

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

#Navigateurs

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

http://html5weekly.com/
Spark-Archives - Cartographie
HTML 5 - Olivier Boitel et Pierre Besson - 28/11/201...
Prochain SlideShare
Chargement dans…5
×

HTML5

1 072 vues

Publié le

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

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 072
Sur SlideShare
0
Issues des intégrations
0
Intégrations
15
Actions
Partages
0
Téléchargements
8
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×