Upload
affrica
View
189
Download
4
Tags:
Embed Size (px)
DESCRIPTION
“HTML5”: more than just HTML5. Giorgio Sardo Sr. Technical Evangelist Microsoft Corp. What is “HTML5”?. HTML5 is the future of the Web HTML5 is not (only) a marketing message HTML5 is not complete, yet HTML5 is large: testing is not Boolean HTML5 needs to be done the right way. - PowerPoint PPT Presentation
Citation preview
“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? [email protected]