PARLONS-EN

‘‘ EST-IL PRÊT ?

PAS ENCORE

Le HTML5 est encore en cours de spécification, il est toujours pressenti pour être validé en 2014

‘‘ INCOMPATIBLE AVEC IE ? 

OUI ET NONA partir de IE9, Microsoft a commencé à implémenter certaines nouveautés du HTML5, notamment la sémantique.Pour le reste, des alternatives existent.

‘‘ PAS QUE DU HTML

EFFECTIVEMENTLe HTML5 est souvent un « raccourci » pour définir plusieurs nouveautés qui l’entourent.

‘‘ HTML5 EST RÉTROCOMPATIBLE AVEC HTML ET XHTML ?

OUIIl est tout-à-fait possible d’implémenter des nouveautés HTML5 dans des documents respectant les anciens standards.Les médias en sont un bon exemple.

‘‘ HTML5 EST FAIT POUR LES APPLICATIONS COMME GMAIL?

NONLe HTML5 apporte aussi une nouvelle sémantique permettant une structure allégée et un meilleur référencement.

‘‘ HTML5 EST COMPLEXE !

PARFOISLe HTML5 recense plusieurs nouveautés. Certaines sont plus faciles à appréhender que d’autres.La sémantique est simple alors que certaines APIs comme indexedDB sont difficiles à comprendre.

OFFLINE & STOCKAGE

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

APPCACHE

INDEXEDDB

LOCAL STORAGE

FILE API

APPCACHE

INDEXEDDB

LOCAL STORAGE}

STOCKAGE : 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

STOCKAGE : 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 »

STOCKAGE : 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

STOCKAGE DE DONNÉES ENTRE

SESSIONS

MISE EN CACHE D’ÉLÉMENTS

REMPLACEMENT DES COOKIES

OPTIMISATION DU CHARGEMENT DES

PAGES

STOCKAGE D’OBJETS SIMPLES

CONFIGURATION DES PAGES À

CACHER

APP CACHE LOCALSTORAGE

STOCKAGE STRUCTURÉ

STOCKAGE DE DONNÉES

COMPLEXES

TEMPS D’ACCÈS + LONGS (> 300ms)

INDEXED DB

INCOMPATIBLE iOS

STOCKAGE : LIMITES & USAGES

SUPPRESSION CACHE PAR MODIF

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

JEUX MULTI-JOUEURSMISE À JOUR DE STATUTS

CHATS EN TEMPS RÉELNOTIFICATIONS

MESSAGERIE

TÉLÉCOMMANDE ENTRE DEVICES

MISE À JOUR DE STOCK PRODUITS

SERVER-SENT EVENTS

WEBSOCKETS

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

SÉMANTIQUE : UN PEU DE CODE

Avant :

<body>

<div id="container">

<div id="head">

<div id="menu">

<ul>

<li>Menu 1</li>

<li>Menu 2</li>

</ul>

</div>

</div>

<div id="body">

<div id="navigation">

<ul>

<li>Navi 1</li>

<li>Navi 2</li>

</ul>

</div>

<div id="body_container">

<div class="block">

<div class="image">

<img src="__mon__url__" />

</div>

<div class="text">

Texte

</div>

</div>

</div>

</div>

<div id="foot">

Mon pied de page

</div>

</div>

</body>

Après :

<body> <div id="container"> <header> <nav data-role="menu"> <ul> <li>Menu 1</li> <li>Menu 2</li> </ul> </nav> </header> <div id="body"> <aside> <ul> <li>Navi 1</li> <li>Navi 2</li> </ul> </aside> <section id="body_container"> <article> <figure> <img src="__mon__url__" /> </figure> <p> Texte </p> </article> </section> </div> <footer> Mon pied de page </footer> </div></body>

Nouvelles balises :

SÉMANTIQUE : 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>

SÉMANTIQUE : UN PEU DE CODE

Sans microformats :

<address>

<p>

Jean Bout<br/>

Société Exemple<br/>

604-555-1234<br/>

<a

href="http://exemple.com/">http://exemple.com/</a

>

</p>

</address>

Avec microformat hCard :

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

Microformats :

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

WEBFORMS : NOUVEAUX CONTRÔLES

TEL

URL

PROGRESS KEYGENOUTPUT

INPUT

AUTRES

EMAIL

SEARCH DATE/TIME

MONTH/WEEK

RANGE

COLORNUMBER

WEBFORMS : NOUVEAUX ATTRIBUTS

AUTOCOMPLETE

NOVALIDATE AUTOFOCUS

PATTERN

AUTOCOMPLETE PLACEHOLDER

STEP

MAXREQUIRED

MIN

FORM INPUT

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.

Font-face

Calc() as CSS unit value

2.1 selectors

Counters

Generated Content

Gradients

Grid Layout

Hyphenation

Inline-block

min/max-width/height

position:fixedRegions

Table display

3D Transforms

Animation

Background-image options

Border imagesBorder-radius

Box-shadows

Colors

Media Queries

Multiple Backgrounds

Multiple Column Layout

object-fit/object-position

Opacity

Text-Overflow

Text-shadows

Transforms

Word-wrap

Rem (root em)

Masks

Text-stroke

Calc() as CSS unit value

Counters

Generated Content

Gradients

Inline-block

min/max-width/height

position:fixedRegions

Table display

Hyphenation

Background-image options

Border imagesBorder-radius

Box-shadows

ColorsMultiple

Backgrounds

Multiple Column Layout

object-fit/object-position

Opacity

Text-Overflow

Text-shadows

Word-wrap

Rem (root em)

Masks

Text-stroke

Font-face Animation

Transforms

Grid Layout

Media Queries

3D Transforms

2.1 selectors

FONT-FACE

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

FONT-FACE : PAR L’EXEMPLE

Avant :

FONT-FACE : PAR L’EXEMPLE

Après :

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

GRID LAYOUT : 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 { grid-column: 1; grid-row: 1; grid-row-span: 3;}.bloc2 { grid-column: 1; grid-row: 4; grid-row-span: 3;}.bloc3 { grid-column: 2; grid-row: 1; grid-row-span: 6;}.bloc4 { grid-column: 3; grid-row: 1; grid-row-span: 2;}…

Bloc 1

Bloc 2

Bloc 3

Bloc 4

Bloc 5

Bloc 6

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

NOUVEAUX SÉLECTEURS : CÔTÉ CODE

Des CSS moins complexes avec une nouvelle logique

li { background:#0990b2; margin-bottom:5px; padding:2px 0 2px 5px; border-bottom:2px solid #ffec19; list-style:none;}li.first { text-transform:uppercase;}li.odd { background:#12a6cc;}li.last { border:none;}li.oneBeforeLast { margin-left:15px;} li li { background:#b31048;}li li.odd { background:#ff0057;}li.open { padding-right:5px;}li.afterOpen { margin-top: 15px;}li.open .firstLetter { color:#000; width:50px; text-decoration:underline;}

li { background:#0990b2; margin-bottom:5px; padding:2px 0 2px 5px; border-bottom:2px solid #ffec19; list-style:none;}li:first-child { text-transform:uppercase;}li:nth-child(odd){ background:#12a6cc;}li:last-of-type { border:none;}li:nth-last-of-type(2) { margin-left:15px;}

li li { background:#b31048;}li li:nth-child(odd) { background:#ff0057;}li.open { padding-right:5px;}li.open + li { margin-top: 15px;}li.open::first-letter { color:#000; display:block; width:50px; text-decoration:underline;}

NOUVEAUX SÉLECTEURS : CÔTÉ CODE

Du côté du HTML, une différence flagrante

<ul> <li class="first odd">Nav 1</li> <li>Nav 1</li> <li class="open odd"> <span class="firstLetter">N</span>av 1 <ul> <li class="oneBeforeLast odd first">Nav2</li> <li class="last">Nav2</li> </ul> </li> <li class="afterOpen">Nav 1</li> <li class="odd">Nav 1</li> <li class="oneBeforeLast">Nav 1</li> <li class="odd last">Nav 1</li></ul>

<ul> <li>Nav 1</li> <li>Nav 1</li> <li class="open"> Nav 1 <ul> <li>Nav2</li> <li>Nav2</li> </ul> </li> <li>Nav 1</li> <li>Nav 1</li> <li>Nav 1</li> <li>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

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

MÉDIAS

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

MÉDIAS : 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 Responsive Webdesign

LE RESPONSIVE WEBDESIGN EN IMAGE

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

SVG

CANVAS

GRAPHIQUES

IMAGES STATIQUES

DOC IMPRIMABLE

JEUX VIDÉO 2D

SCÈNES COMPLEXES

JEUX COMPLEXES

TRAITEMENTS D’IMAGE

CARTOGRAPHIE

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

HTML5

FLASH

HTML

VIDÉO & SON

SITES ECOMMERCE & B2B

SITES WEB APPLICATIFS

APPLICATIONS LOURDES

3D

JEUX 3D

VIDÉOS AVEC DRM OU PUB

SITES MOBILES

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

HTML5

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

(Christian Heilmann / Yahoo)

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

…

HTML5 : LES CHALLENGES

‘‘ HTML5 = FUTUR ?

‘‘ OUI ’’

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-worke

rs-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

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

France Monde

Mauvais Support

11.5

Mauvais Support22.71

Bon support26.48

Bon support26.48

Très bon support62.02

Très bon support50.81