Internet Explorer 9 Overview (Update) - PowerPoint Presentation

Slide1
Slide2

Internet Explorer 9 Overview (Update)

Leon Braginski

Senior Program Manager

Microsoft CorporationSlide3

Objective

Understand what’s new in the third Internet Explorer 9 Platform PreviewSlide4

Agenda

Exploring new features in the latest Platform Preview

Performance

Same Markup

Same Script

Call to Action

ResourcesSlide5

Focus Areas of Internet Explorer 9

Internet Explorer 9

HTML5

Performance

Same

Markup

GPU

Acceleration

Internet Explorer 9

Platform PreviewSlide6

WebKit.org’s SunSpider v0.9.1

JavaScript Performance Benchmark, generated

June 21,

2010

Dell Optiplex with a 3.0 GHz Core 2 Duo Intel processor,

4 GB RAM, and Intel integrated vide; running Windows 7

MillisecondsSlide7

Performance – Web Timing

Browser-interoperable way to measure performance

Performance metrics are part of the Document Object Model (DOM) APIs

Performance information is available from navigation to when the page is loadedSlide8

Interface

Purpose

window.msPerformance.navigation

Navigation

information

:

number of redirects

request counts

unique domains

window.msPerformance.timing

Absolute

t

ime when events occurred:

connectStart

connectEnd

window.msPerformance.timingMeasures

Time it took

to complete the taskPerformancewindow.msPerformance

InterfacesSlide9

Timeline

URL is entered

window.load

*Not all of the timing events are shown

window.msPerformance.timing.navigationStart

window.msPerformance.timingMeasures.navigation

window.msPerformance.timing.loadEnd

unloadStart

unloadEnd

Other timings

Performance

Timing and

timingMeasuresSlide10

msPerformance

Sample Code

var

myBody

;

this

.

onload

=

function

()

{

myBody

= document.getElementById

("myBody

"

);

if

(

window

.

msPerformance

)

{

myBody

.

innerHTML

=

'

navigationStart

: '

+

window

.

msPerformance

.

timing

.

navigationStart

+'ms (' + Date (window.msPerformance.timing.navigationStart)+ ') <br>'; } return;};

Demo file: msPerformance.htmSlide11

msPerformance

demo Slide12

No longer limited to the “web safe” fonts

Package

and deliver fonts as needed

Part of the W3C Fonts Working Group

<style type="text/

css

">

@font-face {

font-family:MyFontName

; src: url('FontFile.woff'); } </style><div style="font: 24pt MyFontName, sans-serif;"> This will render using MyFontName in FontFile.woff

</div>

Same Markup – Fonts

Web Open Font Format (WOFF)Slide13

Same Markup –

Canvas

Canvas is a dynamic surface for drawing

Graphical

elements (paths, boxes, arcs, more)

Animations

Images

How it works

Canvas

SVG

Drawing ModeImmediate RetainedDOM Support

<CANVAS> part of DOM

Each SVG element is part of DOM

AnimationUsing direct scripting in canvasManipulating objects

in DOMIE9 GPU Acceleration

Yes

YesSlide14

Canvas – Adding Images

this

.

onload

=

function

() {

var

myCanvas

=

d

ocument

.

getElementById

(

'myCanvas');

if

(

myCanvas

.

getContext

){

var

ctx

=

myCanvas

.

getContext

(

"2d"

);

var

img

=

new

Image

();

img.src = "IELogo.png"; img.onload = function(){ ctx.drawImage(img,0,0); }

}}

Demo file: CanvasImage.htmSlide15

Canvas – Sample Code

myCanvas

=

document.getElementById

(“

myCanvas

”);

if

(

myCanvas.getContext

)

{

ctx

=

myCanvas

.

getContext

("2d");

ctx.beginPath();

ctx

.

arc

(

75

,

75

,

50

,

0

,

Math

.

PI

*

2

,

true

);

// Outer circle

ctx

.

moveTo

(

110

,

75);ctx.arc(75,75,35,0,Math.PI,false); // Mouthctx.moveTo(65,65);ctx

.arc(

60

,

65

,

5

,

0

,

Math

.

PI

*

2

,

true

); // Left eyectx.moveTo(95,65);ctx.arc(90,65,5,0,Math.PI*2,true); // Right eyectx.stroke();}…<canvas id="myCanvas" width="500" height="500"> Canvas is not supported.</canvas>

Demo file: Canvas.htmSlide16

Two animation types

Frame-based

Time-based

Frame-based: objects are moved the same number

of pixels every update

Time-based: objects are moved the same number

of pixels per unit of

timeCanvas AnimationSlide17

Same distance for each update

Machine dependent

Faster

machine = faster animation

Slower machine = slower

animation

Simple to implement

Frame-Based AnimationSlide18

Same distance over time unit

Not machine dependent

Fast

machine = smoother animation

Slower machine = jerkier

animation

Used in games – ensures animation is completed in a set length of time

Time-Based AnimationSlide19

Canvas Frame-Based Animation

Demo file: CanvasAnimation.htm

var

distance

=

5

,

lastFrameTime

=

0

;

setInterval

(

drawTimeBased

,

16);

function drawFrameBased() {

y1

+=

distance

;

ctx

.

clearRect

(

0

,

0

,

ctx

.

canvas

.

width

,

ctx

.

canvas

.

height

);

ctx

.

drawImage(img, x1, y1, imgWidth, imgHeight);}Slide20

Canvas Time-Based Animation

Demo file: CanvasAnimation.htm

var

speed

=

250

,

lastFrameTime

=

0

;

setInterval

(

drawTimeBased

,

16);

function

drawTimeBased

()

{

// time since last frame

var

now

=

new

Date

().

getTime

();

dt

= (

now

-

lastFrameTime

) /

1000

;

lastFrameTime

=

now

;y2 += speed * dt;ctx.clearRect(x2, 0, ctx.canvas.width, ctx.canvas.height);

ctx.

drawImage

(

img

,

x2

,

y2

,

imgWidth

,

imgHeight

);

}Slide21

Canvas

demo Slide22

Same Markup –

Video

<video

src

="video.mp4

autoplay

controls>

<!-- Only shown when browser doesn’t support

video -->

<!-- You could embed Flash or Silverlight video here --></video>HTML5 <video> elementMPEG-4/H.264 videoVideo composited with any other elements (SVG, HTML)GPU-based implementation capable of 60fpsSupport for hardware video decodersSlide23

Video – Controlling Playback

Tag attributes

Autoplay

:

starts play as soon as ready

Controls:

controls are displayed

currentTime: current time in secondsTag method

play(): plays video at specific currentTimeSlide24

Video Sample

Demo file: video.htm

<

script

language

=

j

avascrip

t

>

function

skipTo

()

{

var

myVideo

= document

.

getElementById

(

"

myVideo

"

);

if

(

myVideo

.

currentTime

) {

myVideo

.

currentTime

=

document

.

getElementById

(

"

time"

).

value

; myVideo.play(); }}</script><video id="myVideo" src="video.mp4" autoplay controls> Video is not supported.</

video>Enter seconds to skip to:

<

input

type

=t

ex

t

id

="

time

"

>

<

input

type

=b

utton value="Skip" onclick=skipTo()>Slide25

Same Markup –

Audio

HTML5 <audio> element

MP3 and Advanced Audio Coding (AAC) audio

Fully scriptable by using DOM

Similar properties as in the VIDEO tag to control playback

<audio

src

="audio.mp3" id="

audioTag

" autoplay controls> <!-- Only shown when browser doesn’t support audio --> <!-- You could embed Flash or Silverlight audio here --></audio>Slide26

MPEG-4/H.264 video

Content-Type: video/mp4

MPEG-3 audio

Content-Type: audio/mpeg

AAC audio

Content-Type: audio/

aac

Video and Audio MIME TypesSlide27

Video and Audio

demo Slide28

ECMA-262 5th

Edition (ES5) approved in December 2009

ES5 features in Internet Explorer 9

New array methods

Enhanced object

m

odel

Computational methods and functionsSame Markup – Same Script

ECMAScript 5 FeaturesSlide29

ECMAScript

5

th

Edition

New array methods

indexOf

,

lastIndexOf, forEach every, somemap, filter, reduce,

reduceRightExplore ES5 array methods on ietestdrive.comSlide30

<body><script language="

javascript

" type="text/

javascript

">

var

myArray = ["Alice", "Bob", "John"]; var myFunc = function(value, index, myArray){ document.write("Hello " + value + "<

br/>"); } var result=myArray.forEach(myFunc);</script> </body>ES5 Array Methods Sample

Demo file: es5.htmSlide31

ECMAScript

5

th

Edition

Enhanced Object Model

Accessor

properties (“getter/setter” properties)

Accessible by using function properties of the Object constructor:Object.defineProperty

, Object.definePropertiesPlus many morePlatform Preview 3 does not yet support above methods with DOM objectsSlide32

ECMAScript

5

th

Edition

Computational

Methods

and

Functions

String.prototype.trimDate.prototype.toISOStringDate.parse, Date.nowArray.isArrayFunction.prototype.bindSlide33

Call to Action

Use Same Markup – code for features, not for a

specific browser

Check out your sites and new platform capabilities in the Platform Preview

Provide your feedback on Connect

Go to

https://connect.microsoft.com

Sign up to provide feedback https://connect.microsoft.com/IE

Submit feedback https://connect.microsoft.com/IE/FeedbackFill out the evaluation form for this presentationSlide34

Resources

Windows Summit 2010 Internet Explorer

9 Overview

http

://

windowssummit.tri-digital.com/video-gallery/software/sow-t102.aspx

ECMAScript Language Specification, 5th Edition

http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdfWeb Timing Specificationhttp://dev.w3.org/2006/webapi/WebTiming/Fonts on the Web

http://www.w3.org/Fonts/ Slide35

Resources (cont.)

Latest Internet Explorer 9 Platform Preview build

http

://www.IETestDrive.com

Internet Explorer 9 MIX presentations

http://live.visitmix.com/Sessions#/tags/InternetExplorer

MIX keynote that features Internet Explorer 9http://live.visitmix.com/MIX10/Sessions/KEY02 Internet Explorer 9 Team’s bloghttp://blogs.msdn.com/ie/Slide36

©

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.