html5 w3c conference euratechnologie
DESCRIPTION
HTML5 Conference with W3C, Wygwam, Inria, EuratechnologieTRANSCRIPT
Les évolutions des standards du W3C : quelles innovations ?
Aurélien VerlaDirecteur TechniqueWygwam
Giovanni ClémentExpert .NET
Wygwam
Emplacement éventuel pour votre logo
Des services de qualitéConseil / Expertise
• Etudes préalables
• Accompagnement méthodologique
• Assistance technique
• Expertise
• Support Ponctuel
Projets
• Prototypage
• Régie
• Projet
• Intégration
Formation
• Session inter et intra entreprises
• Coaching on the job
• Transfert de compétences
De l’expertise technologique
Contactez-nous
Pour plus d’informations :
www.wygwam.com
formation.wygwam.com
• Le W3C prend la décision de ne plus faire évoluer HTML 4.01 et de se concentrer sur l’utilisation de XML
1998
• Apparition de la spécification XHTML 1.0
2000 • Apparition du draft XHTML 2.0
2002
W3C vs WHATWG !
2004
1. Création du WHATWG Web Hypertext Application Technology Working Group
2. Principaux acteurs Apple Mozilla Foundation Opera Software Google
3. http://www.whatwg.org/
W3C vs WHATWG !
• Création du WHATWG
2004
W3C vs WHATWG !
W3C Working Draft 25 May 2011
1. http://www.w3.org/TR/html5/
2. Actuellement au statut Last Call
447 membres
1. 220 personnes de 64 sociétés différentes
2. 227 experts invités
3. http://www.w3.org/2000/09/dbwg/details?group=40318&public=1
HTML5 – W3C
ENISA1. European Network and Information Security Agency
31 Juillet 20111. Rapport faisant état de 51 failles potentielles de sécurité
http://www.enisa.europa.eu/act/application-security/web-security/a-security-analysis-of-next-generation-web-standards
HTML5, Oui, mais concrètement ?
Le rêve des développeurs
HTML5, le Messie ?
Le rêve des développeurs
Ecrire l’application, une seule fois, avec le même outillage cross browser
Eviter de tester le rendu sur chaque plateforme
Exécution cross plateforme pour augmenter la rentabilité
HTML5, c’est : Un Terme utilisé comme fourre-tout
Une multitude de spécifications, standardisant les contenus et interactions Web, d’aujourd’hui et demain.
W3C
HTML
HTM
L5Canvas 2D
ContextM
icrodataH
TML+RD
FaH
TML5 M
arkup
HTM
L5 Diff from
H
TML4
Polyglot Markup
Text alternatives
CSS
CSS Snapshot 2007CSS N
amespaces
CSS Paged Media
CSS Print ProfileCSS Values and U
nitsCSS Cascading and
InheritanceCSS Text
CSS Writing M
odesCSS Line G
ridCSS Ruby
CSS Generated Content for Paged
Media
CSS Backgrounds and Borders
CSS FontsCSS Basic Box M
odelCSS M
ulti-column
LayoutCSS Tem
plate LayoutCSS M
edia Queries
CSS SpeechCSS Color
CSS Basic User
Interface CSS Scoping
CSS Grid Positioning
CSS Flexible Box Layout
CSS Image Values
CSS 2D
Transformations
CSS 3D
Transformations
CSS TransitionsCSS Anim
ations
Web Apps
CORS
Element TraversalFile API
Index DB
Programm
able HTTP Caching and
ServingProgress Events
Selectors APISelectors API L2
Server-Sent EventsU
niform M
essaging Policy
Web D
OM
CoreW
eb SQL D
atabaseW
eb IDL
Web Sockets APIW
eb StorageW
eb Workers
XmlH
ttpRequest
XmlH
ttpRequest L2
DO
M L1
DO
M L2 Core
DO
M L2 View
sD
OM
L2 EventsD
OM
L2 StyleD
OM
L2 Traversal and Range
DO
M L2 H
TML
DO
M L3 Core
DO
M L3 Events
DO
M L3 Load and
SaveD
OM
L3 ValidationD
OM
L3 XPathD
OM
L3 Views and
Formatti
ngD
OM
L3 Abstract Schem
as
SVG
Docum
ent StructureBasic Shapes
PathsText
Transforms
Painting, Filling, ColorScriptingStyling
Gradients and
Patterns
SMIL
FontsFilters
Geolocation
Geolocation API
ECMA
ECMA Script 262
ECMAScript 262
Le rêve des développeurs
• Nous ne sommes pas en 2014 !
Un problème vieux comme le monde !
Un problème vieux comme le monde !
Oui HTML5, est de plus en plus supporté.
Tous les browsers « Next Gen » le supporte à leur façon !
Oui, à terme, nous aurons une couverture de support très complète … à terme.
Mais ce n’est pas la même implémentation HTML5 !
Un problème vieux comme le monde !
Différences de comportements des markups uniques
Différents statuts des spécifications
Standards évoluant !
Un problème vieux comme le monde !
Différences d’implémentations par les browsers
Implique des performances différentes
Attention aux devices mobiles !
1. HTML5 : pour Hypertext Markup Language, Le markup de la prochaine génération d’applications web
2. CSS3 : pour Cascading Style Sheets, Permet d’appliquer des styles aux documents
3. SVG 1.1 : pour Scalable Vector Graphics, Un moteur de dessin vectoriel)
En détails, ça apporte quoi ?
Un nouveau DOCTYPE
Avant
Après
Standardisation de la structure d’une page Web
Instaure un squelette standard d’une page web. Structure sémantique uniformisée. Pas encore supportés par les technologies
d’assistance
Standardisation de la structure d’une page Web
<header><nav><article><section><aside><footer>
HTML4 : HTML5 :
Avant en HTML4 Après en HTML5
<canvas />
- Permet de « dessiner »- « Fire & Forget »- Impression dans une bitmap - Contrôlé à l’aide de l’API JavaScript lié au contexte- Léger pour le DOM ( 1 – 1)- Profite de l’accélération matérielle … ou pas …
DEMO
Ajout de balises de rendus dynamiques
- Oui IE, est encore le mauvais élève, mais il reste de loin le plus performant pour le rendu.
Standardisation des lecteurs médias
<audio />• Supporté par la plupart des
browsers next-gen
• Support des codecs de bases différents selon les browsers
<audio /> Codecs Support
Browser Ogg MP3 AAC Wav
Internet Explorer x x
Firefox x x
Chrome x x x x
Safari x x x
Opera x x
Standardisation des lecteurs médias
<video /> Pas de plugin requis Pas de DRM Supporté par la plupart des browsers next-gen Pas de norme de codecs imposée Implique une certaine vigilance sur la publication
de video
Standardisation des lecteurs médias
Source : AlsaCreations.
WebGL1. Standardisation de la 3D pour le Web sur base d’OpenGL2. N’est pas une recommandation du W3C
Principaux acteurs1. Google2. Mozilla Fundation3. Apple4. Nokia
DEMO
Ajout de balises de rendus dynamiques
<svg> Format de représentation
vectorielDescendant du VML, bien connu
des IE x.Très utile pour cibler, styler,
animer à l’aide de CSS3, des composants graphiques
Facilité de génération à l’aide d’outils d’intégration
Attention aux nombres d’éléments / page : DOM
DEMO
Ajout de balises de rendus dynamiques
Standardisation des formulairesNouveaux types de champs :
Tel Search url Email Datetime, date, month, week, time Number Range Color
Standardisation des formulairesNouveaux attributs de champs :
Autofocus Placeholder
Validation du formulaire : Required Range Etc.
DEMO
Ajout de nouvelles APIs indispensables
File API Workers et Messaging Web Storage Offline Web Application Geolocation WebSocket Web SQL Database Drag’n'drop Et bien d’autres ….
Nouvelles APIs : Les plus utilisées
Géolocation API Javascript utilisable facilement - 2 méthodes Les informations peuvent être directement
consommées par d’autres API Maps : Bings, Google
Plusieurs niveaux de précisions : minimum 10m Possibilité de Geotrackage Supporté par la plupart des navigateurs next-
gen, mobiles y compris.
DEMO
Nouvelles APIs : Les plus utilisées
Nouvelles APIs : Les plus utilisées
Local storage ou WebStorage
Permet de stocker de facon élégante, de la donnée coté client side.
Données persistantes, même après fermeture du navigateur Structuration par dictionnaire, la valeur est un objet
générique
Nouvelles APIs : Les plus utilisées
Local storage ou WebStorage
Nouvelles APIs : Les plus utilisées
Application déconnectée (manifest)
Utilisé principalement pour les mobiles Permet le fonctionnement permanent d’une application
web ( même sans connexion internet) Gestion de versionning applicatif
Nouvelles APIs : Les plus utilisées
Application déconnectée (manifest)
Nouvelles APIs : Les plus utilisées
WebSocket Permet la
communication en duplex entre le serveur web et le client web.
Le serveur peut maintenant envoyer de l’information vers le client, sans demande.
Nouvelles APIs : Les plus utilisées
Nouvelle norme CSS : CSS3
Fidèle descendant de CSS2.
- Apporte de nombreuses améliorations, et « simplifications » pour vos intégrations
- Radius, gradient, transformation… gérés nativement
CSS3 Media queries Permet de s’adapter aux différentes
résolutions/périphériques par style : Résolution limitée pour les Smartphones Résolution normale pour les netbooks Large et haute résolution sur PC/Mac
Permet aussi de s’adapter à l’orientation, au ratio, etc.
Très utilisé pour les développements mobiles
Supporté par les nouveaux browsers (mobiles) next-gen.
DEMO
CSS3 Animations
Permet d’animer les éléments du DOM via CSS
Différents types : Rotation, Translation …
Evite l’utilisation d’une librairie externe JavaScript
Attention aux différences d’implémentations !
DEMO
Problématique des tests
Ne pas tester uniquement la détection de Feature mais aussi son implémentation !!
DEMO
Exemple ici pour le border-radius CSS3
On n’oublie pas les Anciens !
HTML5 dès aujourd’hui ?
J’aimerais garder un minimum ma nouvelle expérience utilisateur avec les anciens navigateurs
Progressive enhancement Graceful degradation
Feature detection => ModernizR Des Polyfills / fallbacks sont disponibles, principalement
en Javascript, utilisant des plugins externes ATTENTION : ces « hacks » ne sont pas supportés !
J’aimerais garder un minimum ma nouvelle expérience utilisateur avec les anciens navigateurs
Coût de développement assez conséquent Il faut tester chaque spécifications HTML5 utilisée, mais
aussi chaque Polyfills/ Fallbacks, sur chaque ancien navigateur !
Non conseillé en production, généralement pas de support, ni d’updates … et souvent instable !
Aucun soucis dans le cadre d’un site ciblé
1. A destination des navigateurs Next Gen
2. Sans adaptation pour les « ancêtres »
3. Sans utiliser l’ensemble des fonctionnalités rêvées
Questions / Réponses