HTML5 W3C Conference Euratechnologie

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 :

info@wygwam.com

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