Introduction à HTML5 et ses amis

David Rousset – http://blogs.msdn.com/davrous Relation technique avec les développeursMicrosoft France

AgendaIntroduction

HTML5 : morceaux choisis<video>, <audio>, <canvas>

SVGCSS3 : morceaux choisis

Border-radius, box-shadow, media queries, 2D TransformRevue de sites l’utilisant en production

Outillage

Synthèse

L’histoire d’HTML5

Et état actuel des spécifications

C’est l’histoire d’un W3C qui se plante…En imaginant XHTML2 en 2002

Révolutionnaire! Mais non compatible avec l’existant…

Des personnes énervées chez Opera créent le WHATWG

Ian Hickson aujourd’hui chez GoogleCréé le Web Applications 1.0

En 2006, le W3C abandonne le XHTML2, récupère une partie du boulot du WHATWG et donne naissance au HTML5

XHTML2: 8 draft produits jusqu’en 2006… et mort en 2009

W3C vs WHATWG: le choc des culturesW3C HTML WG

3 co-chairmans de chez Microsoft, IBM & AppleComprend en octobre 2010 : 442 participants (184 venant de 51 organisations + 258 experts invités).On y retrouve Microsoft, Mozilla, Google, Apple et Opera

Etablit des specs, les valident puis les recommandent

WHATWGPrincipalement dirigé par 1 homme : Ian Hickson

On y retrouve Mozilla, Google, Apple et Opera

Reçoit une idée, l’implémente dans un navigateur et si ça marche en fait une spécification

Les différentes phases des spécifications au W3C

First Public Working Draft

Working Draft

Last call

Candidate Recommendati

on

Call to implement

Proposed Recommendatio

n

Recommendation

HTML5 2022 ?

W3C

HTML

HTM

L5

Can

vas 2

D C

on

text

Micro

data

HTM

L+R

DFa

HTM

L5 M

arku

p

HTM

L5 D

iff fro

m H

TM

L4

Poly

glo

t Marku

p

Text a

ltern

ativ

es

CSS

CS

S S

nap

shot 2

00

7

CS

S N

am

esp

ace

s

CS

S Pa

ged

Med

ia

CS

S Prin

t Profile

CS

S V

alu

es a

nd

Un

its

CS

S C

asca

din

g a

nd

Inh

erita

nce

CS

S Te

xt

CS

S W

riting

Mod

es

CS

S Lin

e G

rid

CS

S R

ub

y

CSS G

enera

ted C

onte

nt fo

r Paged M

edia

CS

S B

ackg

rou

nd

s an

d B

ord

ers

CS

S Fo

nts

CS

S B

asic B

ox M

od

el

CS

S M

ulti-co

lum

n La

you

t

CS

S Te

mp

late

Layou

t

CS

S M

ed

ia Q

uerie

s

CS

S S

peech

CS

S C

olo

r

CS

S B

asic U

ser In

terfa

ce

CS

S S

cop

ing

CS

S G

rid Po

sition

ing

CS

S Fle

xib

le B

ox La

you

t

CS

S Im

ag

e V

alu

es

CS

S 2

D Tra

nsfo

rmatio

ns

CS

S 3

D Tra

nsfo

rmatio

ns

CS

S Tra

nsitio

ns

CS

S A

nim

atio

ns

Web Apps

CO

RS

Ele

men

t Traversa

l

File A

PI

Ind

ex D

B

Progra

mm

able

HTTP C

ach

ing a

nd S

erv

ing

Prog

ress E

ven

ts

Sele

ctors A

PI

Sele

ctors A

PI L2

Serv

er-S

en

t Even

ts

Un

iform

Messa

gin

g Po

licy

Web

DO

M C

ore

Web

SQ

L Data

base

Web

IDL

Web

Socke

ts API

Web

Sto

rag

e

Web

Worke

rs

Xm

lHttp

Req

uest

Xm

lHttp

Req

uest L2

DO

M L1

DO

M L2

Core

DO

M L2

Vie

ws

DO

M L2

Even

ts

DO

M L2

Sty

le

DO

M L2

Traversa

l an

d R

an

ge

DO

M L2

HTM

L

DO

M L3

Core

DO

M L3

Even

ts

DO

M L3

Load

an

d S

ave

DO

M L3

Valid

atio

n

DO

M L3

XPa

th

DO

M L3

Vie

ws a

nd

Form

attin

g

DO

M L3

Ab

stract S

chem

as

SVG

Docu

men

t Stru

cture

Basic S

hap

es

Path

s

Text

Tran

sform

s

Pain

ting

, Filling

, Colo

r

Scrip

ting

Sty

ling

Gra

die

nts a

nd

Patte

rns

SM

IL

Fon

ts

Filters

Geolo

catio

nG

eolo

catio

n A

PI

ECMA

ECMA Script

262

EC

MA

Scrip

t 26

2

Cartographie du “HTML5”

First Public Working Draft Working Draft Last Call

Candidate Recommenda

tion

Recommendation

HTML5 ?

Que se cache-t-il derrière cet acronyme ?

HTML5 en résumé très simplifié

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

<video> : la balise pour afficher une vidéo sans plug-in <canvas> : pour dessiner directement dans une BitmapEt bien d’autres !

CSS3 : permet d’appliquer des styles au documentNouveautés : animations, opacité, coins arrondis, etc.Nouveautés PP6 : CSS3 2D Transform

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

Les développeurs web ?

Regardons où ils en sont

Source : Etude Forester Consulting "The Evolution Of Web Development - An Inflection Point In Web Design And Evolving Standards Sets The Stage For HTML 5 Adoption“ Septembre 2010 Base : 210 développeurs Web (USA & Royaume Uni)

Source : Etude Forester Consulting "The Evolution Of Web Development - An Inflection Point In Web Design And Evolving Standards Sets The Stage For HTML 5 Adoption“ Septembre 2010 Base : 210 développeurs Web (USA & Royaume Uni)

Les suites de tests

Faisons un point rapide

Les tests menés par le W3C

Microsoft responsable de la Task Force sur la création de jeux de tests unitaires

7200 fournis pour IE8 (HTML4/CSS 2.1)On pense qu’il faudra jusqu’à 60000 tests unitaires pour valider les spécifications HTML5/CSS3

Rappel : ACID3 = 100 tests répartis sur 6 groupes

Jeux de tests HTML5 soumis au W3C

Standards du Web

Nombre de tests soumis

Internet Explorer 9Platform Preview

Mozilla Firefox 3.6.11

Opera 10.63

Apple Safari 5.0.2

Google Chrome 7.0.517.41

Internet Explorer 8

HTML5 122 98% 50% 57% 55% 70% 0%

SVG 1.1 2nd edition

70 100% 77% 87% 86% 89% 0%

CSS3 135 98% 59% 75% 69% 70% 10%

DOM 187 99% 76% 64% 68% 71% 4%

JavaScript 2339 100% 68% 68% 91% 96% 8%

Mise à jour : 29 octobre 2010

Dis Papa, c’est quoi un test unitaire ?

Euh… passes moi la bouteille de lait !

PAGE 20

Mais sans eux, difficile d’avoir le même Markup…

HTML5

Morceaux choisis : video, audio, canvas, web forms 2.0

La balise <video>Permet de lire une vidéo sans l’utilisation d’un plug-in3 CODEC :

H264 utilisé par IE9, Chrome et SafariTheora utilisé par Firefox, Chrome et OperaWebM (VP8) utilisé par Chrome et sûrement à terme par tous

Le player est fourni par défaut par le navigateur mais peut-être refait

Décodé par le GPU dans IE9

<video src="video.mp4" id="videoTag" width="640px" height="360px"> <!-- Only shown when browser doesn’t support video --> <!-- You Could Embed Flash or Silverlight Video Here --></video>

Using Script To Determine If A Video Code Is Supportedtry { var v = document.createElement("video"); if (v && v.canPlayType && v.canPlayType("video/mp4").match(/^(probably|maybe)$/i)) { // Browser can likely play MPEG-4 video } else { // Browser cannot play MPEG-4 video }}catch (e) { // Exception when testing for MPEG-4 Playback}

Providing Multiple Video Sources To Support Multiple Browsers <video id="myVideo"> <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'> <!-- Insert Silverlight or Flash Video Fallback Here --> </video>

Pour supporter tous les navigateurs

Regardons ce que cela donne

<video>

Les lacunes de <video>

Pas de support de DRM

Pas de streaming adaptatif

Pas de codec spécifié par le W3CPeut donc nécessiter un triple encodage

<canvas id="myCanvas" width="200" height="200"> Your browser doesn’t support Canvas, sorry.</canvas>

<script type="text/javascript"> var example = document.getElementById("myCanvas"); var context = example.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); </script>

Canvas

26

Permet de dessiner dans une Bitmap APIs en JavaScript et primitives simplesMode immédiat « Fire and Forget »L’intérieur est non visible dans le DOM

Regardons ce que cela donne

<canvas>

PAGE 28

Scalable Vector Graphics (SVG)

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /></svg>

Permet de créer et dessiner des éléments graphiques vectoriels en 2D avec du XML « retained mode » : l’arbre est gardé en mémoire et peut être manipulé après coupAccès complet via le DOM aux éléments SVGPeuvent être stylés via CSS

Et puis d’ailleurs <canvas> ou <svg> ?

<svg>

Regardons des trucs qui ne marchent pas dans IE9… et chez les autres aussi en fait

WebForms 2.0

CSS3

Morceaux choisis : Media Queries, Background & borders

PAGE 32

CSS3 Media Queries

<link href=“mobile.css" rel="stylesheet" media="screen and (max-width:480px)" type=“ text/css" /> <link href=“netbook.css" rel="stylesheet" media="screen and (min-width:481px) and (max- width: 1024px)" type="text/css" /> <link href=“laptop.css" rel="stylesheet" media="screen and (min-width:1025px)" type="text/css" />

Permet de s’adapter aux différentes résolutions/devices par style

Résolution limitée pour les SmartphoneRésolution normale pour les netbooksLarge et haute résolution sur PC/Mac

PAGE 33

CSS3 Backgrounds & Borders

div { border-radius: 152px 304px 228px 152px; border-style: double; border-width: 42px; padding: 12px;}

Coins arrondis avec la propriété border-radiusPlusieurs fonds possibles en arrière-plan par élémentOmbre portée avec la propriété box-shadow

Des coins arrondis ? Incroyable !

CSS3

Dans la vraie vie ?

Regardons quelques sites actuellement en production

Démo vraie vie

OutillageMajoritairement du NotepadLes outils modernes ne proposent que de l’aide via auto-completion

Helper HTML5 pour Visual Studio 2008 & 2010Adobe CS5 : va un peu plus loin avec de la preview multiscreen

Certains commencent à le proposer dans les templates

WebMatrixLes frameworks sont une bonne approche : ASP.NET MVC

Autres approches intéressantesAdobe Illustrator avec plug-in MS pour générer du <canvas>

Exemple de résultat : http://www.awkbird.com/labs/backyard/

Silverlight ?

Et pendant ce temps là, dans un univers propriétaire…

Démo de HTML 7 ?

Silverlight

SynthèseVous pouvez commencer à utiliser HTML5

Attention à n’utiliser que des éléments « stables » ou avancésAttention au HTML5 expérimental (-webkit, -moz, -ms, -o) voir propriétaire (ex: site Apple)

Pour améliorer l’expérience utilisateur pour les browsers modernes mais... en ne cassant pas le site pour les versions antérieures.

Silverlight n’est pas mort ! Meilleure productivité, langage de haut niveau, outillage évolué, rendu cross-navigateurs garanti Plus de features natives

DRM, Webcam, Pixel Shaders (HTML6? 7?), contrôles, Out of browser, WCF RIA Services, etc. + tout ce qu’HTML5 proposera dans 10 ans.

Les 2 ont vocations à coexister et à répondre à des besoins différents

ResourcesMon blog autour d’ASP.NET, Silverlight, Cloud:

http://blogs.msdn.com/davrous/ Un blog en Français sur Internet Explorer et jeu de tests IE:

http://blogs.msdn.com/iefrance/http://ie.microsoft.com/testdrive

Mais qui construit l'HTML5 ?http://blogs.technet.com/b/stanislas/archive/2010/11/04/mais-qui-construit-l-html5.aspx

W3C & WHATWG:http://www.w3.org/ http://www.whatwg.org/

© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to

be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.