“HTML5”: more than just HTML5Giorgio SardoSr. Technical EvangelistMicrosoft Corp

HTML5 is the future of the WebHTML5 is not (only) a marketing messageHTML5 is not complete, yetHTML5 is large: testing is not BooleanHTML5 needs to be done the right way

What is “HTML5”?

W3CHTM

L

HTML5

Canvas 2D ContextM

icrodataHTM

L+RDFaHTM

L5 Markup

HTML5 Diff from

HTML4

Polyglot Markup

Text alternatives

CSS

CSS Snapshot 2007CSS Nam

espacesCSS Paged M

ediaCSS Print Profile

CSS Values and UnitsCSS Cascading and

InheritanceCSS Text

CSS Writing Modes

CSS Line GridCSS Ruby

CSS Generated Content for Paged M

edia

CSS Backgrounds and Borders

CSS FontsCSS Basic Box M

odelCSS M

ulti-column Layout

CSS Template Layout

CSS Media Queries

CSS SpeechCSS Color

CSS Basic User Interface CSS Scoping

CSS Grid PositioningCSS Flexible Box Layout

CSS Image Values

CSS 2D Transformations

CSS 3D Transformations

CSS TransitionsCSS Anim

ations

Web Apps

CORSElem

ent TraversalFile API

Index DBProgram

mable HTTP Caching and

ServingProgress Events

Selectors APISelectors API L2

Server-Sent EventsUniform

Messaging

PolicyW

eb DOM Core

Web SQL Database

Web IDL

Web Sockets APIW

eb StorageW

eb Workers

XmlHttpRequest

XmlHttpRequest L2

DOM L1

DOM L2 Core

DOM L2 Views

DOM L2 Events

DOM L2 Style

DOM L2 Traversal and

RangeDOM

L2 HTML

DOM L3 Core

DOM L3 Events

DOM L3 Load and Save

DOM L3 Validation

DOM L3 XPath

DOM L3 Views and

Formatting

DOM L3 Abstract

Schemas

SVGD

ocument Structure

Basic ShapesPathsText

Transforms

Painting, Filling, ColorScriptingStyling

Gradients and Patterns

SMIL

FontsFilters

GeolocationGeolocation API

ECMA

ECMA Script 262

ECMAScript 262

The map of “HTML5”

W3C HTML WGChair

Sam Ruby (IBM)Paul Cotton (Microsoft)Maciej Stachowiak (Apple)

40 Member Organizations, 411 Participants, 280 Invited Experts16 people from Microsoft teams

8 PublicationsHTML5HTML Canvas 2D ContextHTML: The MarkupHTML5 diffs from HTML4Polyglot Markup

Meetings over IRC, Phone, Face-to-faceRecommendations produced under Royalty-Free basis

Link: www.w3.org/html/wg

Editor documentPublished document

~1100 print pagesMailing list: ~4000 emails/monthIssue Tracker: ~33 openBug Tracker: ~50 open

W3C HTML5 Specification

Link: www.w3.org/TR/html5

W3C HTML5 WG

DEMO

Specification Status

First Public Working Draft Working Draft

Last call

Candidate Recommenda

tion

Call to implement

Proposed Recommenda

tionRecommenda

tion

HTML5

W3CHTML

HTML5

Canvas 2D ContextM

icrodataHTM

L+RDFaHTM

L5 Markup

HTML5 Diff from

HTML4

Polyglot Markup

Text alternatives

CSS

CSS Snapshot 2007CSS Nam

espacesCSS Paged M

ediaCSS Print Profile

CSS Values and UnitsCSS Cascading and

InheritanceCSS Text

CSS Writing M

odesCSS Line Grid

CSS RubyCSS Generated Content for Paged

Media

CSS Backgrounds and Borders

CSS FontsCSS Basic Box M

odelCSS M

ulti-column Layout

CSS Template Layout

CSS Media Queries

CSS SpeechCSS Color

CSS Basic User Interface CSS Scoping

CSS Grid PositioningCSS Flexible Box Layout

CSS Image Values

CSS 2D Transformations

CSS 3D Transformations

CSS TransitionsCSS Anim

ations

Web Apps

CORSElem

ent TraversalFile API

Index DBProgram

mable HTTP Caching and

Serving

Progress EventsSelectors API

Selectors API L2Server-Sent EventsUniform

Messaging

PolicyW

eb DOM CoreW

eb SQL DatabaseW

eb IDLW

eb Sockets APIW

eb StorageW

eb Workers

XmlHttpRequest

XmlHttpRequest L2

DOM L1

DOM L2 Core

DOM L2 Views

DOM L2 Events

DOM L2 Style

DOM L2 Traversal and

RangeDOM

L2 HTML

DOM L3 Core

DOM L3 Events

DOM L3 Load and Save

DOM L3 Validation

DOM L3 XPath

DOM L3 Views and

Formatting

DOM L3 Abstract

Schemas

SVG

Docum

ent StructureBasic Shapes

PathsText

Transforms

Painting, Filling, ColorScriptingStyling

Gradients and Patterns

SMIL

FontsFilters

GeolocationGeolocation API

ECMA

ECMA Script

262

ECMAScript 262

The map of “HTML5”

First Public Working Draft

Working Draft Last Call

Candidate Recommenda

tionRecommenda

tion

Testing is not BooleanHistorically poor testing methodology

E.g. Acid1, Acid2, Acid3

HTML5Test.commodernizr.com

DEMO

Modern Testing ApproachComprehensive Tests Suite

Leaded by W3C and ECMA GroupsOpen for external contributionThousands of testsGoal: interoperable implementations

Microsoft already submitted 500+ tests for HTML5, Web Apps, CSS3 and other specs

W3C CSS Test SuiteLeaded by W3C CSS WG

Release Candidate (~19000 tests)Microsoft submitted ~14000 test cases

On 10/22/10:IE9 Beta: 97.7%Safari 5.0.2: 85.4%Chrome, Firefox, Opera: N/A

HTML Test ResultsCSS Test SuiteIE Test Center

DEMO

HTML5<Canvas><Audio><Video>Markup Elements

Article, Section, NavAside, Hgroup, Header, FooterFigure, FigcaptionAddress

SVGBasic ShapesPathsTextTransformsPainting, Filling, ColorScriptingStyling Gradients, Patterns

CSSComplete CSS 2.1 supportSelectorsBorder RadiusBackgroundsColor & OpacityWOFF FontsBox Shadow2D Transforms

DOM/ECMA Script 262addEventListenerGetElementByClassNameNew Array Methods

indexOf, lastIndexOf, forEach, everyEnhanced Object Model

defineProperty,create, getPrototypeOfComputational Methods

string.Trim, toISOString, data.parse, date.now, bind

The Beauty of the Web

HTML5 DEMOThe Beauty Of The Web

W3C

HTML

HTML5

Canvas 2D ContextM

icrodataHTM

L+RDFaHTM

L5 Markup

HTML5 Diff from

HTML4

Polyglot Markup

Text alternatives

CSS

CSS Snapshot 2007CSS Nam

espacesCSS Paged M

ediaCSS Print Profile

CSS Values and UnitsCSS Cascading and Inheritance

CSS TextCSS W

riting Modes

CSS Line GridCSS Ruby

CSS Generated Content for Paged Media

CSS Backgrounds and BordersCSS Fonts

CSS Basic Box Model

CSS Multi-colum

n LayoutCSS Tem

plate LayoutCSS M

edia QueriesCSS SpeechCSS Color

CSS Basic User Interface CSS Scoping

CSS Grid PositioningCSS Flexible Box Layout

CSS Image Values

CSS 2D Transformations

CSS 3D Transformations

CSS TransitionsCSS Anim

ations

Web Apps

CORSElem

ent TraversalFile API

Index DBProgram

mable HTTP Caching and Serving

Progress EventsSelectors API

Selectors API L2Server-Sent Events

Uniform M

essaging PolicyW

eb DOM Core

Web SQL Database

Web IDL

Web Sockets APIW

eb StorageW

eb Workers

XmlHttpRequest

XmlHttpRequest L2

DOM L1

DOM L2 Core

DOM L2 Views

DOM L2 Events

DOM L2 Style

DOM L2 Traversal and Range

DOM L2 HTM

LDOM

L3 CoreDOM

L3 EventsDOM

L3 Load and SaveDOM

L3 ValidationDOM

L3 XPathDOM

L3 Views and Formatting

DOM L3 Abstract Schem

as

SVGD

ocument Structure

Basic ShapesPathsText

Transforms

Painting, Filling, ColorScriptingStyling

Gradients and Patterns

SMIL

FontsFilters

GeolocationGeolocation API

ECMA

ECMA Script

262

ECMAScript 262

What’s next?

SummaryHTML5 is the future of the Web

It’s important to make it right

Try IE9 BETA and let us know your feedback!

ResourcesW3C

HTML5 Working GroupHTML5 Test Suite Conformance ResultsPaul Cotton Interview

MicrosoftIE BlogIE Test DriveIE Test CenterHTML5 Gallery

This Presentation: blogs.msdn.com/Giorgio

THANK YOUQuestions? gisardo@microsoft.com