HTML5

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/Javascript

• XHTML

• Web 2.0
2005 • Ajax, naissance des réseaux sociaux

2009

• HTML5

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

Avant


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

Chronologie

2014
W3C
recommandation

2009

XHTML
2.0

Abandon
XHTML 2.0

2004
Début des
spécifications

HTML
5


Un modèle en évolution

Page

Client UI

Client

HTML/CSS

HTML/CSS/JS

Server

Browser


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


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


Comment

Comment ?


Les technologies


Les navigateurs


Comparaison des fonctionnalités


Implémentation des fonctionnalités


Course à la performance


Indicateurs de performance


Part de marché


Outils de développement

Ressouces

Traffic Réseau

Debugger


Evangéliste et Guru


Focus sur les
fonctionnalités


Fonctionnalités


#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)


#Semantic

Éléments


#Semantic

Avant
<div id="header">

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

<div id="sidebar">

<div id="article">

<div id="footer">


#Semantic

Avec HTML 5
<header>

<nav>
<section>

<aside>

<article>

<footer>
http://jsfiddle.net/vwL3W/

#Semantic

Data type HTML5

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


#Mobilité

Gestion du Offline


#Mobilité
Stockage de ressources

AppCache
Mécanisme de mise à jour

Possibilité de navigation offline

Utile même en online
http://appcachefacts.info/

#Mobilité

AppCache
Checking

MANIFEST
HTML

No Update

Update
JS
Download

CSS
IMAGES

End

FILES

Browser

Serveur


#Mobilité

DOM Storage

Nom de domaine
Clef

Valeur

lang

fr
http://jsfiddle.net/pierr/RTD7E/

#Responsive

CSS 3 Media Queries

http://www.alsacreations.fr/

#DataViz

CSS3 transformations
rotate

translate

scale

matrix

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


#DataViz

SVG – dessin vectoriel
Déclaratif
DOM
Vecteur

http://jsfiddle.net/eVRq7/


#DataViz

Canvas – dessin Bitmap

Programmation JavaScript

Dessin au pixel


#RealTime

Data visualisation temps réel


#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


#RealTime

Socket.io

http://socket.io/

#GeoLoc

Geolocation API

http://jsfiddle.net/pierr/rNJ4B/

Device Orientation

http://jsfiddle.net/pierr/P6jfx/embedded/result/

Bilan Fonctionnalités

#GeoLoc
#DataViz

#Semantic

#RealTime

#Responsive
#Mobilité


Points d’attention

http://caniuse.com

Points d’attention


#Technos

#Navigateurs


En savoir plus

http://html5weekly.com/

HTML5

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie HTML5

Ähnlich wie HTML5 (20)

Mehr von Klee Group

Mehr von Klee Group (11)

HTML5