HTML5 - the future for the Web - and

IE9Wilson Pais

wpais@microsoft.com Gabriel Klestorny

t-gakles@microsoft.com

The HTML5 Web:Graphically- and Media-Rich

Evolution of the Web

The AJAX Web: JavaScript + DOM + Asynchronous Requests

Web “2.0”

The Content Web: HTML & CSS

Web “1.0”

A Browser Decomposed

Display Tree

“DOM”

HTML Objects

CSS PropertiesScript Edits

Events Animates

AnimationTimer

Layout Display

Input streams

HTMLCSSScriptXHTML

Parsed

HTML introductionBasis for any webpageWeb evolution HTML evolution

4

HTML5: What’s in it for me

5

Beautiful

Dynamic “Next” Web Semantic

Rich

HTML5: New media elements and APIs

<video> tagExample:

<video src=“video.mp4” controls /><audio> tag

Example: <audio src=“sample.wav” />

6

Rich Media Integration—Without Plugins

HTML5 <video> elementIndustry-standard MPEG-4/H.264 videoVideo can be composited with anything else on the page

HTML content, images, SVG graphicsGPU-based implementation capable of maintaining 60fps full-screen at full HD resolution

Supports both DXVA and full hardware video decoders

HTML5 <audio> elementIndustry-standard MP3 and AAC audio

<video width="800" height="450" src="myvideo.mp4" autoplay>

No video for you</video>

HTML5: New media elements and APIs

<canvas> tagExample:

<canvas id=“my_canvas” width=100 height=100 /><script>

var my_canvas = document.getElementById(“my_canvas”);if (my_canvas.getContext) context = my_canvas.getContext("2d");// draw

</script>

8

HTML5: Semantic markupNew elements:

<section>, <header>, <article>, <nav>, …

9

HTML5: Semantic markupDeprecated elements:

<font>, <center>, <frame>

10

HTML5: SVG (Vector Graphics) <svg> element

Example:<svg>

<rect x=0 y=0 width=100 height=100 fill="red" /><rect x=100 y=0 width=100 height=100 fill="green" /><rect x=0 y=100 width=100 height=100 fill="blue" /><rect x=100 y=100 width=100 height=100 fill="yellow" />

</svg>

11

HTML5: Forms improvementsInput element types:

Tel, search, url, email, date, number, range, color

New form functions:Autofocus, multiple files upload

12

HTML5: Related technologies overview

CSS3SVGWebFonts

13

IE9 support for HTML5

14

IE9

HTML5Pe

rform

ance

Sam

e M

arku

p

GPU

Ac

cele

ratio

n

Platf

orm

Pre

view

Top Objectives of Internet Explorer 9

Interoperable HTML5 MarkupInterpret the same HTML and CSS markup the same wayRun the same JavaScript the same way

GPU-powered HTML5 Graphics and MediaHTML5 demands a high-performance graphics subsystem

Across-the-board High Performance HTML5JavaScript executionPage layoutPage display

Internet Explorer 9 Platform Preview

Flying Images – One Animation

17

IE8

IE9

Call To ActionFollow the standard on W3C. Microsoft is participating as a co-chair of HTML Working GroupTry Internet Explorer 9 Platform PreviewCheck demos on http://ietestdrive.comWait and try IE 9 Beta – More news this week !More info: http://blogs.msdn.com/ie

¡THANKS! ¡GRACIAS!

Wilson Paiswpais@microsoft.com

Gabriel Klestornyt-gakles@microsoft.com

© 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.

ADDITIONAL SLIDES JUST FOR REFERENCE

Markup and Programming Model in Internet Explorer Platform PreviewCategory Feature Today ComingMarkup Inline SVG in HTML

XHTML/XML

CSS Infrastructure CSS3 Selectors

CSS3 Namespaces

DOM Core

Events

Style

Range

HTML5 Selection

SVG in Internet Explorer Platform Preview

SVG Feature Today ComingDocument Structure

Basic Shapes

Paths

Text

Transforms

Painting, Filling, Color

Scripting

Styling

Gradients and Patterns

Clipping and Masking

Markers and Symbols

GPU-Powered HTML5High Performance

JavaScript executionDOM interaction and layoutGPU-powered rendering

Cross-browser Interoperability

HTML5 markupCSS3 markupDOM programmability

Graphics Capabilities

Alpha color & opacityRound corners & multiple backgroundsHTML5-integrated SVG graphics

Media Capabilities

<video> element with MPEG-4/H.264<audio> element with MP3/AAC<img> with JPEG-XR, color profiles