HTMI5 on Windows and IE

WHO ?

@mustafa_elnagar

[email protected] .Microsoft HTML5 Champion

How The HTML worksDom.Root.Elements.

Graphics

Before

AfterThe SVG become a part of the DOM.

You use Silverlight , Flash ,VML.

Bit Mapped images.

Scalable images.

Is WPF dead or going to be Died ?

HTML 5 on win 8 Fast launching of apps from a tile-based Start screen, which replaces the Windows Start menu with a customizable, scalable full-screen view of apps.Live tiles with notifications, showing always up-to-date information from your apps.Convenient ability to snap and resize an app to the side of the screen, so you can really multitask using the capabilities of Windows.Web-connected and Web-powered apps built using HTML5 and JavaScript that have access to the full power of the PC.Fully touch-optimized browsing, with all the power of hardware-accelerated Internet Explorer 10.

Bing for Mobile Goes HTML5

Internet Explorer 9Welcome to the future

Engineering for IE9 is about delivering:

• A fast, clean experience that allows IE users to

just browse

• A highly interoperable platform for developers

to build compelling, graphically rich site and

applications, powered by Windows

IE9 At-A-Glance

High performance browser

Best interoperable HTML5

Hardware accelerated graphics

Localization

HTML5 and Internet Explorer 9

Participation to W3C Working Groups

• HTML 5 WG• DOM WG• CSS WG• SVG WG• SVG Testing Task Force• HTML Testing Task Force• Accessibility Task Force• …

Microsoft and Web Standards

Paul Cotton (Microsoft), co-chair

40 W3C Member organizations

411 group participants

280 invited Experts

9 mailing lists (~4000 emails on public-html)

As of March 15th:

• 153 unresolved bugs, 34 unresolved issues (e.g. decentralized

extensibility, document license…)

HTML Working Group

HTML 5

XHTML

CSS 3

SVG

DOM Level2 and Level3

Microsoft commitments with IE9 PPB1

HTML5 • Defines the behavior at seams of other specs• Parsing unknown elements• Integrated SVG

XHTML/XML• Namespaces for using custom elements• Strict, fail-fast parsing helps developers find errors quickly

SVG• Standalone XML-based document (.svg file)• Inline in an XHTML document• Inline in an HTML5 document

Markup Languages in IE9

Interpret the same HTML and CSS markup the same way

Always some differences on the edges

• Standards evolve• Browsers implement in different order

Contributing DOM, CSS3 Standards Compliance Tests to W3C

Interoperable HTML5 Markup

Interoperable MarkupDemo

W3C Web StandardsNumber of Submitted Tests

Internet Explorer 9Platform Preview

Mozilla Firefox 3.6 Opera 10.50 Apple Safari 4.0 Google Chrome 4.0

SVG 1.1 2nd edition 31 100% 90% 97% 94% 94%

CSS3 Borders & Backgrounds

33 100% 27% 88% 27% 91%

CSS3 Selectors 16 94% 81% 63% 50% 50%

DOM Level 2 Core 9 100% 89% 100% 100% 100%

DOM Level 3 Events 10 100% 40% 40% 50% 50%

DOM Level 2 Style 5 80% 100% 80% 20% 0%

W3C Test Suites

Source: http://samples.msdn.microsoft.com/ietestcenter/

HTML5 <video> element

• Industry-standard MPEG-4/H.264 video• Video can be composited with anything else on the page

• HTML content, images, SVG graphics

• GPU-based implementation capable of maintaining 60fps full-

screen at full HD resolution• Supports both DXVA and full hardware video decoders

HTML5 <audio> element

• Industry-standard MP3 and AAC audio

HTML 5 Video

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

No video for you</video>

Vedio TagDemo

Markup-/DOM-based graphics: SVG 1.1

• “View source” simplicity—aids learning• Easy server-side generation—it’s just XML• Easy client-side debugging—it’s in the DOM• Supported by popular graphics programs• Easy integration with HTML5

SVG (Scalable Vector Graphics)

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

SVGDemo

SVG in IE9 Platform PreviewSVG Feature Today IE9

Document Structure

Basic Shapes

Paths

Text

Transforms

Painting, Filling, Color

Scripting

Styling

Gradients and Patterns

Clipping and Masking

Markers and Symbols

Filter Effects

Declarative Animation

SVG Fonts

CSS3 Color

• Alpha color with rgba() and hsla() color functions• Transparency control with the opacity property

CSS3 Backgrounds and Borders

• Round corners with the border-radius property• Multiple background images per element• box-shadow property on block elements

Graphically-rich Styling with CSS3

CSS3 Selectors

• Help you do more on your site with less script• Make it easier to use new graphics capabilities

CSS3 Namespaces

• Style elements with namespaces in XHTML documents

CSS Infrastructure

CSS 3 Selectors

CSS3Demo

Central part of web platform used to

manipulate the DOM

• DOM Core

• DOM Events

• DOM Style

• DOM HTML

• DOM Range

• HTML5 Selection

IE9 Programming Model

EventsDemo

IE9 and PerformanceHW-Accelerated HTML5

Microsoft Confidential

Page load in slow motion

Demo

LayoutRenderingParsingDOMNetworkingFormatsJscript

LayoutRenderingParsingDOMNetworkingFormatsJscript

Time spent in IE subsystems differs greatly by site function and coding pattern

News site 1

News site 2

Performance is multi-dimensional

WSJ – Before and After

39

IE8

IE9

IE8

IE9

Web API Usage 7000 top sites

API (by rank)1 50 700

Nu

mb

er

of

sit

es

7000

0

API Rank Percent of Sites

indexOf 1 94%

getElementById 13 80%

addEventListener 27 65%

getComputedStyle 62 26%

JavaScript PerformanceWebKit.org’s SunSpider v0.9 Benchmark

Dell OptiPlex, Microsoft Windows 7 Enterprise 6.1.7600, 64-bit, 3.0GHz Intel Core 2 Duo, 4GB RAM, Intel Integrated Video

IE8

Opera

10.

10

IE9

PDC 2

009

Demo

Firef

ox 3

.6

Firef

ox 3

.7 A

lpha

2 P

rere

leas

e

IE9

Plat

form

Pre

view (1

.9.7

745.

6019

)

Safa

ri 4.

0.5

(531

.22.

7)

Chrom

e 4.

0.24

9.89

Chrom

e 5.

0.34

2.2

(dev

)

Opera

10.

5 0

1000

2000

3000

4000 3826

2492

834 700 610 599 408 374 293 285

Milliseco

nds

GPU on Every Machine

High Performance JavaScript execution

DOM interaction and layout

GPU-powered rendering

Cross-browser Interoperability

HTML5 markup

CSS3 markup

DOM programmability

Graphics Capabilities

Alpha color & opacity

Round corners & multiple backgrounds

HTML5-integrated SVG graphics

Media Capabilities <video> element with MPEG-4/H.264

<audio> element with MP3/AAC

GPU-Powered HTML5

Flying ImagesDemo

Flying Images – One Animation

45

IE8

IE9

IE8

IE9

blogs.msdn.com/IE

www.ietestdrive.com

blogs.msdn.com/Giorgio

Resources

Q&A

Resources

-http://ie.microsoft.com/testdrive/-http://www.w3.org/TR/html5/introduction.html