View
2.223
Download
0
Category
Preview:
DESCRIPTION
Une présentation rapide par Florian Harmel du HTML5 et des technologies associées. Les principales innovations du point de vue d'un intégrateur.
Citation preview
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
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à …
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
Recommended