Emplacement éventuel pour votre logo

Introduction à

David Rousset - @davrous Giovanni Clémenthttp://blogs.msdn.com/davrous Wygwam FranceMicrosoft France - DPE

AgendaC’est quoi HTML5 et pourquoi c’est important ?

Introduction aux bases de HTML5

Bonnes pratiques

HTML5Labs

Les challenges de l’écriture d’applications HTML5

HTML5 ?

http://on.wsj.com/f8PBa9

Distribution normaleRetour sur les bancs de l’école

http://on.wsj.com/f8PBa9

C’est quoi le rapport avec la choucroute ?Les phases d’adoption d’une technologie

Résumé des épisodes précédents

Adobe dans la tourmenteLes attaques d’Apple face à Flash

La position d’AppleUne réponse possible…

Apple aime HTML5.

Google aime HTML5.

Microsoft aime HTML5.

Philippe Le HégaretW3C Leader

Une nouvelle saison commence !

HTML5 Working GroupsHTML

WebApps

SVG

EcmaScript

Geo-Location hybi

CSS

webPerformance

Plus de 100 specifications !

CSS W

RIT

ING

M

OD

ES

CSS L

INE

GR

ID

CSS S

CO

PIN

G

FIL

E A

PI

SELE

CTO

RS A

PI

L2

UN

IFO

RM

MESS

AG

ING

PO

LIC

YW

EB

DO

M C

OR

E

CSS R

UBY

CSS B

AC

KG

RO

UN

DS &

B

OR

DER

S

SER

VER

-SEN

T

EV

EN

TS

WEB

STO

RA

GE

WEB

W

OR

KER

S

CSS G

EN

ER

ATED

CO

NTEN

T F

OR

PA

GED

M

ED

IA

CSS F

ON

TS

CSS B

ASIC

BO

X

MO

DEL

CSS T

EM

PLATE

LAYO

UT

CSS S

PEEC

H

CSS B

ASIC

USER

IN

TER

FAC

E

CSS G

RID

PO

SIT

ION

ING

CSS F

LEX

IBLE

BO

X

LAYO

UT

CSS IM

AG

E

VA

LUES

CSS 2

D

TR

AN

SFO

RM

ATIO

NS

CSS 3

D

TR

AN

SFO

RM

ATO

INS

CSS

TR

AN

SIT

ION

SC

SS A

NIM

ATIO

NS

CO

RS

IND

EX

DB

PR

OG

RA

MM

AB

LE H

TTP C

AC

HIN

G &

SER

VIN

GPR

OG

RESS

EV

EN

TS

WEB

SQ

L D

ATA

BA

SD

EW

EB

ID

LW

EB

SO

CK

ETS

API

XM

LHTTPR

EQ

UEST

L2

CSS M

ULT

I-C

OLU

MN

LAYO

UT

CSS M

ED

IA

QU

ER

IES

SELE

CTO

RS

API

XM

LHTTPR

EQ

UES

T

CSS C

OLO

R

ELE

MEN

T

TR

AV

ER

SA

L

DO

M L

1D

OM

L2

C

OR

ED

OM

L2

V

IEW

SD

OM

L2

EV

EN

TS

DO

M L

2

STYLE

DO

M L

2 T

RAV

ER

SA

L A

ND

R

AN

GE

DO

M L

2 H

TM

LD

OM

L3

C

OR

ED

OM

L3

EV

EN

TS

DO

M L

3 L

OA

D &

S

AV

ED

OM

L3

VA

LID

ATIO

ND

OM

L3

X

PATH

DO

M L

3 V

IEW

S &

FO

MU

TIN

G

CSS Web AppsFirst published working draft Working draft

Candidaterecommendation

Last call Recommendation

HTML5 devrait être prêt pour le “Last Call” en Mai 2011

Mais qui est prêt pour HTML5 ?Pas encore tout le monde…

Part de marché des navigateurs « HTML5 »

IE9 + FF 4.0 + FF 3.6 + Chrome 8/9/10/11/12 + Opera 10/11 + Safari 5

Selon Netmarketshare.com le 10/05/2011

40%

60% "compatible" HTML5 HTML4

Chrome Firefox Opera Safari Explorer

11%

23%

2%6%

56%

Chiffres mondiaux au mois de février 2011

54%*Des navigateurs supportent <canvas>

* Source: caniuse.com, Mai 2011

11%*Utilisent encore IE 6†

* La Chine représente à elle seule 5.8%. USA à 0.6%

† IE 6.0 existe depuis Août 2001

http://www.theie6countdown.com

95,91%*Naviguent depuis une machine

desktop

* Dont 89% tournent sous Windows

3,9%*depuis un navigateur mobile

* Ce chiffre a doublé en 12 mois !

Et du côté des plug-ins?Pas si mort que ça hein…

Introduction aux bases d’HTML5Revue à travers quelques exemples

HTML5

HTML5 : Le markup de la future génération d’applications Web

CSS3 (Cascading Style Sheets) : permet d’appliquer des styles au document

SVG 1.1 (Scalable Vector Graphics) : moteur de dessin vectoriel

+ plein d’autres technologies plus ou moins en rapport

Un terme générique devenu cool… mais fourre-tout !

Découvrons HTML5

A travers une belle série de démos !

demo

HTML5Inline SVG, Parsing Rules, XHTML, Selection APIs, Canvas, Audio & Video, Semantic tags, Geolocation

SVG 1.1 En tant que document, image ou objet, ou en ligne dans le HTML5

CSS 3Selectors, Namespaces, Colors, Values,Backgrounds and Borders, Fonts, Media Queries, 2D Transforms

DOM Core, Events, Style, et Range, WebIDL

ECMAScript 262 Moteur JavaScript plus rapide

Graphiques et Polices

JPEG-XR, TIFF, ICC Colors, WOFF Fonts

Performance Web Navigation Timing

Vie privée Tracking Protection

Les orientations prises pour IE9Performance. HTML5 prêt pour la production. Suite de tests. Standards Communauté

.

Versions préliminaires

Mises à jour environ toutes les 8 semaines

Forums et Communauté

Nouveau programme (PP) plus ouvert et HTML5 Labs

Standards Participation active au W3C

Test Suite ouverte de tests officiels du W3C

Mais alors, peut-on commencer à utiliser HTML5

?Oui ! Mais en faisant attention, c’est tout.

Progressive Enhancement

Graceful Degradation

Un exemple de bonnes pratiques

Utilisation de Modernizr dans ASP.NET MVC 3Fallbacks, CSS3Pie

demo

HTML5 Labs

HTML5Labs.com

Permet de tester des spécifications encore trop expérimentales sans toucher le navigateur

Actuellement 4 spécifications en test :WebSocketsFile APIIndexDBMedia Capture API

L’approche de Microsoft pour les expérimentations

Méthodes existantesPour palier aux limitations d’HTTP

Polling

Serveur

Client

LongPolling

Serveur

Client

Polling interval

La spécification WebSockets – 2 groupes

W3C WebSockets APIWeb Applications Working

GroupWebSockets ProtocolHyBi Working Group

Prototypew/ v04

Prototypew/ v06

Prototypew/ v05

Implemented in browsers v.75Jan 2010

First Working Draft

[Revs 02 – 76]

IETF HyBi WG Adopts

IETF v00

IETF v01

IETF v02

IETF v03

IETF v04

IETF v05

~80 drafts so far and still changing

W3C APIFirst Draft

W3C APISecond Draft

W3C APIThird Draft

Web Sockets

1/9/09 10/29/094/23/09 5/23/10 9/1/10 9/24/10 10/17/10 1/11/11 2/8/11 2/9/11 2/25/11 3/11/1112/22/09

Breaking changeWebSockets v.76June 2010

Potential Security Issue Identified WebSockets disabledDec 2010

IETF v06

JAN 2009

APR 2011

Démos WebSockets

HTML5Labs.com

demo

Les challenges HTML5

Le rêve des développeurs

Ecrire l’application 1 fois et le plus vite possible

Eviter de tester 12 523 fois l’application sur autant de plateformes différentes

Exécution cross-plateformes pour augmenter la rentabilité

HTML5, le messie?

Arrêtez de rêverLe père noël HTML5 ne règle pas encore tout… mais ce n’est pas une ordure pour

autant ;-)

1er Challenge : les différences de rendu

Il est logique d’avoir des différences entre navigateurs

Microsoft travaille sur la suite de tests officielle6401 soumis: http://samples.msdn.microsoft.com/ietestcenter/

Certains pensent qu’il en faudra plus de 100 000Vous pouvez participer !

Nous ne sommes pas encore en 2014

Démos différences rendu

Exemple sur Canvas & SVG

demo

Challenge 1Pas de magie : il faut tester sur les différents navigateurs et savoir s’adapter

2ème Challenge : les différences de performance

Différence sur le matérielARM/Atom vs Intel Core i3/5/7 & AMDGPU Intégré vs ATI/nVidia

Différence sur la qualité d’implémentation de l’accélération matérielle

Différence sur les performances du moteur JavaScript

Un iPad c’est fin mais pas forcément très puissant

Accélération matérielle dans les navigateursNiveau de support

<video>

Oui

Non Non ? Non

<canvas> Oui Non Oui Oui

<svg> Non Non Oui Non

IE9 vs Firefox 4 vs Safari 5 vs Chrome 10 vs Opera 11.50 labs

Challenge 2Soit on vise une plateforme précise

Soit on s’adapte dynamiquement en testant les perfsSoit on nivèle vers le bas

3ème Challenge : les différences de tailles et de formes

Plusieurs types d’applications envisageable : PC, Tablette, téléphone voir TV.

Résolutions différentes

Ergonomies différentes

Une application PC n’est pas faite pour une tablette

Challenge 3CSS3 Media Queries, CSS3 Multi-columns,

CSS3 Flexbox, CSS3 Grid

4ème Challenge : l’outillage et la productivité

Aujourd’hui, l’outillage est limité ou très diffusVisual Studio 2010 SP1 et Expression Web 4 SP1Adobe CS5 (basé sur WebKit)Récemment : BlueGriffon (basé sur Gecko)

Beaucoup de frameworks JavaScript différents plus ou moins matures et spécialisés

Coûts de production potentiellement plus élevés que les plug-ins pour l’instant

Nous en sommes qu’au début

Conclusion

HTML5 est bien l’avenir du WebOn peut commencer à utiliser HTML5 en production

Mais ne laissez pas les anciens navigateurs sur le carreau

Microsoft continu d’investir sur HTML5 et IERythme de mises à jour des PP soutenu et non délirant Expérimentation avec HTML5Labs

Certaines spécifications instables sont très prometteuses

Attention à bien préfixer et soyez conscient du risque

HTML5 ne résout pas tous les problèmesMais de nouveaux scénarios pointent le bout de leur nez

Questions