Ie9 dev overview (300) beta

Internet Explorer 9: Developer Overview BetaPresenter NamePresenter Title

Agenda

History and Evolution

Fast

Clean

Interoperable

History and Evolution

All-Around Fast

Multi-System Performance

WebKit SunSpider JavaScript Benchmark Results

The JavaScript Engine

Source Code

Parser AST InterpreterByteCod

e

Foreground

Source Code Parser AST InterpreterByteCode

Foreground

New JavaScript Engine – “Chakra”

BackgroundBackground Compiler

Native Code

Compiled JavaScript In The Background Using Multiple Cores

Flying Images

Demo

Flying Images – One Animation

IE8

IE9

Using The Full Power of Your PC

Everyone Has a GPU

1 2 3 4 5 6 7 8

Windows Experience Index Results - GPU

Windows Experience IndexGraphics Scores of Vista and Win7 Users

4% 15% 32% 27% 12% 10%

window.msPerformance

<script type="text/javascript"> var w = window; var navStart = w.msPerformance.timing.navigationStart + "ms"; var navStartTime = Date(w.msPerformance.timing.navigationStart);</script>

A new set of Performance Metrics integrated at the DOMBrowser interoperable way to measure performance

With a focus on your sites

Clean

Pinning Demo

Enhance your Pinned Site

Pinned Site mode requires

no changes to your site

Getting Started with Pinned Sites

Provide custom information

Add the site as a Pinned Site

programmatically

Customize the icon

Define Jump List tasks

Add additional Jump List items in a

custom list

Show thumbbar buttons

Customize Your Pinned Site

26

<meta name="application-name" content="Site Name" />

<meta name="msapplication-tooltip" content="Start the Pinned Site" />

<meta name="msapplication-starturl" content="http://example.com/start.htm" />

Use meta elements to provide specific information

Programmatically Pinning Your Site

27

if (window.external.msIsSiteMode) { if (window.external.msIsSiteMode()) { // we are already in site mode } else { // add site to the Programs menu window.external.msAddSiteMode() }}

Adding Icon Overlays

28

window.external.msSiteModeSetIconOverlay( 'http://host/overlay1.ico','Overlay 1');

window.external.msSiteModeClearIconOverlay();

Provide users with notifications or progress updates

Adding Jump Lists

29

<meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.htm; icon-uri=http://host/icon1.ico"/>

<meta name="msapplication-task" content="name=Task 2;action-uri=http://host2/Page2.htm; icon-uri=http://host2/icon2.ico"/>

Windows 7 integration

With the same markup

Interoperable

Web API Usage

7000 top sites

API (by rank)1 50 700

Num

ber o

f site

s

7000

0

API Rank Percent of Sites

indexOf 1 94%

getElementById 13 80%

addEventListener 27 65%

getComputedStyle 62 26%

The HTML Working Group

Working With Standards Bodies

Member of many W3C

Working Groups

Leading the W3C HTML5 Testing Task

Force

40 W3C Member Organizations

411 group participants

280 invited experts

9 mailing lists

~4000 emails on public-html

Defining Same Markup

Internet Explorer Testing Center

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



HTML5: A Quick OverviewCommonly used to refer to modern open web standards like HTML5, CSS3, and more.

Adds new rich media and graphics support (canvas, video, audio, inline SVG…)

Standardizes behavior for browser vendors, enabling same markup.

The W3C HTML5 specification is still a draft, it’s over 1100 pages and keeps evolving.

http://www.w3.org/TR/html5/

GPU-Powered HTML5 Means…

Canvas

SVG 1.1 2nd Edition, Full

CSS3 Backgrounds & Borders Module

CSS3 Color ModelsRGBA, HSLA, Opacity

CSS3 Media Queries

Web Fonts

Hardware Accelerated <video>

Hardware Accelerated <audio>

<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

A block element that allows developers to draw 2d graphics using JavaScript

Methods for drawing include: paths, boxes, circles, text and rasterized images

Create and draw 2D vector graphics using XML Vector images are composed of shapes instead of pixels Based on the SVG 1.1 2nd Edition Full specification

Support for: Full DOM access to SVG elements Document structure, scripting, styling, paths, shapes, colors,

transforms, gradients, patterns, masking, clipping, markers, linking and views

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>

HTML5 <video>

Support for the 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

Hardware accelerated, GPU-based decoding

Attributes src – specifies the location to pull the source file

autoplay – if present starts playing as soon as it’s ready

controls – if present displays controls

preload – if present loads source at page load

loop – if present loops back to the beginning of the video

height & width – specifies the height & width of the player

<video src="video.mp4" id="videoTag" width="640px" height="360px">  </video>

<audio src="audio.mp3" id="audioTag" autoplay controls>  </video>

HTML5 <audio>

Support for the HTML5 <audio> element Industry-standard MP3 and AAC audio Fully scriptable via the DOM

Attributes src – specifies the location to pull the source file autoplay – if present starts playing as soon as it’s ready controls – if present displays controls preload – if present loads source at page load

CSS3 Media Queries

Selectively style page based on properties of the media

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

div.top { background-color: rgba(0, 0, 0, 0.5); color: azure;}div.bottom { background-color: hlsa(0, 0%, 0%, 0.5); color: cornsilk;}

CSS3 Colors

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

CSS3 Color Keywords Full support for CSS3 color keywords Can be used with any property that takes the color property

CSS3 Backgrounds & Borders

CSS3 Backgrounds and Borders Round corners with the border-radius property Multiple background images per element box-shadow property on block elements

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

DOM and JavaScript Features

addEventListener DOMContentLoaded

Full DOM Level 2 and Level 3 Event Support

New ECMAScript 5 Features

DOM Style

DOM Core

DOM Traversal and Range

HTML5 and XHTML Parsing Enhancements

getComputedStyle(element, pseudoElement)

getSelection()

getElementsByClassName(class)

F12 Developer Tools

A built in, visual interface to the Document Object Model

Fast experimentation

New for Internet Explorer 9

Network inspectionUA String PickerConsole TabSVG Support

Internet Explorer 9

All-around Fast Clean,with a focus on your websites

Interoperable with same

markup

Uses the full power of yourPC to provide GPU

powered HTML5 andplatform enhancements

including Chakra, thenew JavaScript

engine.

A clean, streamlined,speedier interface thatputs the focus on yoursites, rather than the

browser.

Improved standardssupport to enable“same markup”across browsers.

Internet Explorer 9 Beta: Now Available

Migrate your applications off

Internet Explorer 6

Develop for standards first!

Download and install the Internet

Explorer 9 Betaand test your

site!

http://msdn.com/ieLearn more at…

http://ietestdrive.com/

Questions

© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Internet Explorer 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.

Ie9 dev overview (300) beta

Technology

Transcript of Ie9 dev overview (300) beta