HTML5 vu par Ekino

PAS
ENCORE
Le est encore
en cours de
spécification, il est
toujours pressenti pour
être en

OUI ET NON
A partir de , a
commencé à implémenter
certaines nouveautés du
, notamment la
.
Pour le reste, des
existent.

EFFECTIVEMENT
Le est
souvent un
« » pour
définir plusieurs
qui
l’entourent.

OUI
Il est
d’implémenter des
nouveautés dans
des documents respectant
les standards.
Les en sont un
bon exemple.

NON
Le apporte
aussi une
permettant
une et
un

PARFOIS
Le recense
Certaines sont
à appréhender que
.
La est simple
alors que certaines
comme sont
à comprendre.

OFFLINE & STOCKAGE

Des applications qui démarrent plus vite et qui
fonctionnent même sans connexion Internet

APPCACHE
APPCACHE
INDEXEDDB
INDEXEDDB
LOCAL STORAGE
LOCAL STORAGE
}
FILE API

APP CACHE

 Stockage en fonction d’une liste de fichiers
dans un fichier de configuration : Manifest

 Permet de stocker une partie du site sur le
poste client
 Les éléments statiques (JS/CSS/Images)
 Les éléments nécessaires à l’application en offline

 Une « notification » informe l’utilisateur
qu’une nouvelle version de la WebApp est
disponible

LOCALSTORAGE

 Permet de stocker des données localement
 Accessible par domaine
 Un remplacement des cookies
 Une espace de stockage d’environ 5MB

 Le client seul peut accéder aux données
 Plus sûr que les cookies

 Stockage de « string » ou d’objets
« simples »

INDEXED DB

 Création d’une base de donnée locale
 Zone de stockage dédiée
 Format JSON
 Sans syntaxe SQL

 Un fonctionnement asynchrone afin de
préserver la fluidité de l’interface.

 Stockage d’objets complexes

LIMITES & USAGES

APP CACHE LOCALSTORAGE INDEXED DB

STOCKAGE DE
MISE EN CACHE STOCKAGE
DONNÉES ENTRE
D’ÉLÉMENTS STRUCTURÉ
SESSIONS

OPTIMISATION DU STOCKAGE DE
REMPLACEMENT
CHARGEMENT DES DONNÉES
DES COOKIES
PAGES COMPLEXES

CONFIGURATION
STOCKAGE TEMPS D’ACCÈS +
DES PAGES À
D’OBJETS SIMPLES LONGS (> 300ms)
CACHER

SUPPRESSION
CACHE PAR MODIF INCOMPATIBLE iOS
MANIFEST

FILE API

 Lire les fichiers locaux
 Upload de fichiers depuis le contrôle « Parcourir… »
natif
 Accessible aussi par Drag’n’Drop depuis le bureau
 Lecture des informations de fichiers locaux
 Accès aux informations binaires (Ex: Exif des images)

 Écrire des fichiers localement
 Traitement d’images et de fichiers

CONNECTIVITÉ

Des sites Web qui « écoutent » le serveur, des
applications multi-utilisateurs, du push

WEB SOCKETS

SERVER-SENT EVENTS

SERVER-SENT EVENTS

 API Javascript
 Basé sur le protocole HTTP
 Communication uni-directionnelle entre le
serveur et le client
 Reconnexion automatique
 Événements personalisés

WEB SOCKETS

 Protocole + API Javascript
 Communication bi-directionnelle entre le
client et le serveur

SERVER-SENT
WEBSOCKETS
EVENTS

MISE À JOUR DE STATUTS JEUX MULTI-JOUEURS

NOTIFICATIONS CHATS EN TEMPS RÉEL

MISE À JOUR DE STOCK
MESSAGERIE
PRODUITS

TÉLÉCOMMANDE ENTRE
DEVICES

PERFORMANCE
Des sites Web plus rapides et plus
dynamiques grâce à des nouvelles techniques
et technologies

Vos utilisateurs ne devraient jamais attendre.

WEB WORKERS

XMLHTTPREQUEST 2

WEB WORKERS

 Script exécuté en tâche de fond
 Aucune interférence avec l’interface
 Permet à la page de ne pas se bloquer
pendant l’exécution de lourdes tâches de
fond
 Communication avec le Worker via des
évènements
 Possibilité pour plusieurs scripts de partager
un worker : SharedWorkers

Le script ne peut pas interagir avec le DOM

XMLHTTPREQUEST 2

 Permet les requêtes cross-domain
 Prévoit des évènements de progression de
transferts
 Supporte l’upload et le download de
données binaires
 Permet de travailler de concert avec
d’autres nouveautés telles que File API /
Web Audio API

SÉMANTIQUE

Plus de balises pour plus de sens

Plus de sens pour les utilisateurs mais aussi
pour Google

« Notre travail, notre vie entière sont une question de sémantique, parce que les
mots sont les outils avec lesquels nous travaillons, le matériel à partir duquel les
lois sont faites, à partir de laquelle la Constitution a été écrite. Tout dépend de
notre compréhension de ces mots. »
(Felix Frankfurter / Avocat)

SÉMANTIQUE

 Des nouvelles balises HTML5 :
 Header – Footer – Aside – Section – Nav
 Article – Time – Figure
 Microdatas
 Microformats
 RDFa
 WebForms : Des nouveaux éléments de
formulaires

UN PEU DE CODE

Nouvelles balises :
Avant : Après :
<body> <body>
<div id="container"> <div id="container">
<div id="head"> <header>
<div id="menu"> <nav data-role="menu">
<ul> <ul>
<li>Menu 1</li> <li>Menu 1</li>
<li>Menu 2</li> <li>Menu 2</li>
</ul> </ul>
</div> </nav>
</div> </header>
<div id="body"> <div id="body">
<div id="navigation"> <aside>
<ul> <ul>
<li>Navi 1</li> <li>Navi 1</li>
<li>Navi 2</li> <li>Navi 2</li>
</ul> </ul>
</div> </aside>
<div id="body_container"> <section id="body_container">
<div class="block"> <article>
<div class="image"> <figure>
<img src="__mon__url__" /> <img src="__mon__url__" />
</div> </figure>
<div class="text"> <p>
Texte Texte
</div> </p>
</div> </article>
</div> </section>
</div> </div>
<div id="foot"> <footer>
Mon pied de page Mon pied de page
</div> </footer>
</div> </div>
</body> </body>

UN PEU DE CODE

Microdatas :
<div itemscope itemtype="http://schema.org/Person">
<a itemprop="url" href="www.ekino.com">
<div itemprop="name"><strong>Florian Harmel</strong></div>
</a>
<div itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">Ekino</span>
</div>
<div itemprop="jobtitle">Consultant UI</div>
<div itemprop="description">Rendre votre expérience Web plus attractive</div>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<div itemprop="streetAddress">157 rue Anatole France</div>
<div>
<span itemprop="addressLocality">Levallois-Perret</span>
</div>
<div itemprop="postalCode">92300</div>
<div itemprop="addressCountry">France</div>
</div>
<div itemprop="email">harmel@ekino.com</div>
<div itemprop="telephone">0149687368</div>
<div>
<meta itemprop="birthDate" content="2012-06-19">DOB: 06/19/2012
</div>
</div>

UN PEU DE CODE

Microformats :
Sans microformats : Avec microformat hCard :
<address> <address class="vcard">
<p> <p>
Jean Bout<br/> <span class="fn">Jean Bout</span><br/>
<span class="org">Société Exemple</span><br/>
Société Exemple<br/>
<span class="tel">604-555-1234</span><br/>
604-555-1234<br/> <a class="url"
<a href="http://exemple.com/">http://exemple.com/</a>
href="http://exemple.com/">http://exemple.com/</a </p>
> </address>
</p>
</address>

WEBFORMS

 Des nouveaux contrôles
 Des attributs prenant en charge les
nouveaux périphériques
 Une prise en charge de la validation côté
client
 Des nouveautés adaptées aux besoins des
développeurs

NOUVEAUX CONTRÔLES

INPUT

TEL EMAIL RANGE

URL SEARCH DATE/TIME

NUMBER COLOR MONTH/WEEK

AUTRES

PROGRESS OUTPUT KEYGEN

NOUVEAUX ATTRIBUTS

FORM INPUT

AUTOCOMPLETE AUTOCOMPLETE PLACEHOLDER MIN

NOVALIDATE AUTOFOCUS REQUIRED MAX

PATTERN STEP

STYLES CSS3

Sans sacrifier la structure et la performances
de vos pages, la CSS3 vous offre enfin une
vaste gamme de styles et d’effets.

Rem (root em) Media Queries Border-radius Border images Transforms

Font-face Table display Word-wrap Animation Inline-block

Calc() as CSS min/max-
Counters Box-shadows 3D Transforms
unit value width/height

Multiple
2.1 selectors Colors Gradients Hyphenation
Backgrounds

Generated object-fit/object-
Opacity Regions position:fixed
Content position

Background- Multiple Column
Text-Overflow Grid Layout Masks
image options Layout

Text-shadows Text-stroke

FONT-FACE

 Toutes les polices sur votre site
 Compatibilité multi-périphériques
 Fonctionnement natif

GRID LAYOUT

 Nouvelle solution de positionnement des
éléments
 Grille virtuelle avec colonnes et lignes
 Adapté à la problématique de Responsive
Webdesign
 Positionnement intuitif
 Permet un allégement substantiel du DOM

UN PEU DE CODE

Implémentation d’une grille complexe :
body {
display: -ms-grid;
grid-columns: 1fr 1fr 1fr;
grid-rows: 1fr 1fr 1fr 1fr 1fr
1fr;
}
.bloc1 { Bloc 1 Bloc 4
grid-column: 1;
grid-row: 1;
grid-row-span: 3;
}
.bloc2 {
grid-column: 1;
grid-row: 4;
grid-row-span: 3;
Bloc 3 Bloc 5
}
.bloc3 {
grid-column: 2;
grid-row: 1;
grid-row-span: 6;
} Bloc 2
.bloc4 {
grid-column: 3; Bloc 6
grid-row: 1;
grid-row-span: 2;
}
…

NOUVEAUX SÉLECTEURS CSS

 Des éléments atteints plus vite, sans
multiplier les classes CSS
 Un code HTML allégé et plus
compréhensible
 Des feuilles de style optimisées
 Une logique de rendu déplacée du back et
du JS vers la CSS

CÔTÉ CODE

Des CSS moins complexes avec une nouvelle logique
li { li {
background:#0990b2; background:#0990b2;
margin-bottom:5px; margin-bottom:5px;
padding:2px 0 2px 5px; padding:2px 0 2px 5px;
border-bottom:2px solid #ffec19; border-bottom:2px solid #ffec19;
list-style:none; list-style:none;
} }
li.first { li:first-child {
text-transform:uppercase; text-transform:uppercase;
} }
li.odd { li:nth-child(odd){
background:#12a6cc; background:#12a6cc;
} }
li.last { li:last-of-type {
border:none; border:none;
} }
li.oneBeforeLast { li:nth-last-of-type(2) {
margin-left:15px; margin-left:15px;
} }
li li {
background:#b31048; li li {
} background:#b31048;
li li.odd { }
background:#ff0057; li li:nth-child(odd) {
} background:#ff0057;
li.open { }
padding-right:5px; li.open {
} padding-right:5px;
li.afterOpen { }
margin-top: 15px; li.open + li {
} margin-top: 15px;
li.open .firstLetter { }
color:#000; li.open::first-letter {
width:50px; color:#000;
text-decoration:underline; display:block;
} width:50px;
text-decoration:underline;
}

CÔTÉ CODE

Du côté du HTML, une différence flagrante
<ul> <ul>
<li class="first odd">Nav 1</li> <li>Nav 1</li>
<li>Nav 1</li> <li>Nav 1</li>
<li class="open odd"> <li class="open">
<span Nav 1
class="firstLetter">N</span>av 1 <ul>
<ul> <li>Nav2</li>
<li class="oneBeforeLast odd <li>Nav2</li>
first">Nav2</li> </ul>
<li class="last">Nav2</li> </li>
</ul> <li>Nav 1</li>
</li> <li>Nav 1</li>
<li class="afterOpen">Nav 1</li> <li>Nav 1</li>
<li class="odd">Nav 1</li> <li>Nav 1</li>
<li class="oneBeforeLast">Nav </ul>
1</li>
<li class="odd last">Nav 1</li>
</ul>

TRANSITIONS / ANIMATIONS

 Possibilité de mettre des transitions entre
chaque propriété CSS
 Le rendu n’est plus à la charge du
JavaScript
 Des animations plus fluides
 Des interfaces plus riches

TRANSFORMATIONS

 Transformations 2D et 3D
 Interpolations
 Les transformations peuvent être faites avec
des transitions/animations
 Permet d’éviter d’utiliser des images pour
créer des formes géométriques

MÉDIAS

Des médias qui vivent en harmonie avec vos
pages Web, le tout sans plugins

VIDÉO

AUDIO

BALISE VIDÉO

 Une nouvelle balise HTML5
 Une API permettant de contrôler la vidéo en
Javascript
 Possibilité de récupérer le Flux vidéo dans
un canvas

BALISE AUDIO

 Une nouvelle balise HTML5
 Une API permettant de contrôler le flux
audio en Javascript
 Possibilité de récupérer le Flux audio et de
l ’analyser en Javascript
 Fonctionnement identique à la balise Vidéo

LIMITES / RESTRICTIONS

 Pas de DRM
 Difficile d’implémenter du streaming
 Multiplicité des formats / navigateur
 OGG
 MP4
 WEBM

PORTABILITÉ

Un site, une application, pour tous, partout…

MEDIA-QUERIES

ORIENTATION /
LOCALISATION

ACCÈS AUX DONNÉES DES
PÉRIPHÉRIQUES

MEDIA-QUERIES

 Application de feuilles de styles en fonction
des périphériques
 Adapter dynamiquement le design avec
CSS aux différents supports
 1 site avec 1 contenu pour tous les écrans
 L’utilisation des CSS média-queries permet
le

ORIENTATION ET LOCALISATION

 Accès aux informations de géolocalisation
 Par IP pour les browsers d’ordinateurs de bureau
 Par IP + triangulation + GPS pour les mobiles et
tablettes

 Accès aux données d’accélération et
d’orientation pour les périphériques le
supportant
 Boussole
 Accéléromètre
 Gyroscope

DEVICE API

 L’API prévoit un accès (avec l’accord de
l’utilisateur) aux éléments suivants :
 Tâches
 Contacts
 Rendez-vous
 Appareil Photo
 Microphone
 Service de messagerie
 Journal d’appel
 Informations système

 Aucun support pour le moment

EFFETS & 3D

Vous êtes désormais sûrs de surprendre vos
utilisateurs avec des visuels et animations
rendus nativement par le navigateur

CANVAS

SVG

WEB GL

CANVAS

 Surface de pixels contrôlée par JS
 Permet de dessiner dans une image
 Des APIs JS de dessin à disposition
 Courbes de Bézier
 Lignes
 Etc…

 Boîte noire, pas d’accessibilité

SVG

 Dessiner en 2D vectorielle via XML
 Accès aux éléments SVG depuis le DOM
 Les éléments SVG peuvent être stylés par
CSS
 SVG peut être chargé depuis un fichier
externe ou en ligne dans un document
HTML
 L’arbre des données est conservé en
mémoire

CANVAS VS. SVG
JEUX COMPLEXES

TRAITEMENTS D’IMAGE

SCÈNES COMPLEXES
CANVAS
JEUX VIDÉO 2D

GRAPHIQUES

CARTOGRAPHIE SVG

DOC IMPRIMABLE

IMAGES STATIQUES

WEB GL

 Utiliser le standard Open GL depuis
Javascript
 Permet de faire de la 3D
 Le rendu est obtenu grâce à l’accéleration
matérielle de la carte graphique
 Beaucoup de cartes graphiques sont
« blacklistées » à cause de défaillances de
pilotes
 Peu de projets actuellement

FLASH N’EST PAS MORT
JEUX 3D

VIDÉOS AVEC DRM OU PUB

3D FLASH

APPLICATIONS LOURDES

VIDÉO & SON
HTML5

SITES MOBILES

SITES WEB APPLICATIFS
HTML

SITES ECOMMERCE & B2B

HTML5

 Un « buzzword » qui prend tout son sens tant
les nouveautés sont nombreuses
 Une norme basée sur l’usage
 Aucune limite du HTML5 ne semble
insurmontable
 De nouvelles possibilités pour des interfaces
innovantes
 Une voie grande ouverte vers l’applicatif
 Le HTML5 est en perpétuelle évolution

« Le HTML5 n’est pas encore prêt, ne le sera jamais (et c’est une bonne
chose) »
(Christian Heilmann / Yahoo)

LES CHALLENGES

 Des développeurs sensibilisés et qui ont
l’expérience du support
 Motion design
 3D

 Des IDE utilisables et plus performants
 Système de timeline
 Génération propre de CSS multi-navigateurs (préfixes)

 Frameworks HTML5 à tester et éprouver
 Joshfire
 …

SOURCES
 http://caniuse.com/
 http://www.w3schools.com/html5/
 http://www.html5rocks.com/en/features/presentation
 http://slides.html5rocks.com/
 http://www.w3.org/html/logo/
 http://www.alsacreations.com/article/lire/750-HTML5-
nouveautes.html
 http://www.w3.org/TR/html5/
 http://goetter.fr/
 http://www.abookapart.com/products/html5-for-web-designers
 http://www.abookapart.com/products/responsive-web-design
 http://fr.wikipedia.org/wiki/Websocket
 http://microformats.org/
 http://www.sitepoint.com/javascript-shared-web-workers-
html5/

Et plein d’autres joyeusetés glanées ici et là …

DEMOS

 Les démos sont accessibles ici : LIEN

LE SUPPORT DU HTML5 DANS LE MONDE

Très bon
Très bon support
support 50.81
62.02

Bon support
26.48
Bon support
26.48 Mauvais
Mauvais Support
Support 22.71
11.5
FRANCE MONDE

« Votre responsabilité est de ne plus développer pour IE6 »
(Daniel Glazman / W3C)

HTML5 vu par Ekino

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (6)

Similaire à HTML5 vu par Ekino

Similaire à HTML5 vu par Ekino (20)

Plus de ekino

Plus de ekino (15)

HTML5 vu par Ekino