Internet Explorer 9 provides major improvements in performance, standards support, and developer tools. It features a new JavaScript engine called Chakra that compiles JavaScript in the background for faster execution. IE9 supports HTML5 features like <canvas>, <video>, and <audio> with hardware acceleration for smooth playback. It also has full support for Scalable Vector Graphics (SVG) and WOFF web fonts. CSS3 features like rounded corners, shadows, gradients, and new color functions are implemented. The developer tools have been enhanced with tools for network inspection, debugging JavaScript, and viewing SVG. IE9 aims to be faster, cleaner, standards-compliant through same markup across browsers, and utilize the full power of users' hardware.

1. Internet Explorer 9: Developer Overview Beta Presenter Name Presenter Title

2. Agenda 2 History and Evolution Fast Clean Interoperable

3. History and Evolution

4. 4

5. 5

6. 6

7. 7

8. 8

9. All-Around Fast

10. 10 Multi-System Performance

11. WebKitSunSpider JavaScript Benchmark Results 11

12. The JavaScript Engine 12 Foreground Source Code Parser AST Interpreter ByteCode

13. Foreground Source Code Parser AST Interpreter ByteCode New JavaScript Engine – “Chakra” 13 Background Compiler Native Code Background Compiled JavaScript In The Background Using Multiple Cores

14. Flying Images Demo

15. Flying Images – One Animation 15 IE8 IE9

16. Using The Full Power of Your PC 16

17. Everyone Has a GPU 17

18. 1 2 3 4 5 6 7 8 Windows Experience Index Results - GPU 18 15% 32% 27% 10% 4% 12% Windows Experience Index Graphics Scores of Vista and Win7 Users

19. window.msPerformance 19 A new set of Performance Metrics integrated at the DOMBrowser interoperable way to measure performance <script type="text/javascript"> var w = window; varnavStart= w.msPerformance.timing.navigationStart+ "ms"; varnavStartTime = Date(w.msPerformance.timing.navigationStart); </script>

20. With a focus on your sites Clean

21. 21

22. 22

23. 23

24. Pinning Demo

25. Getting Started with Pinned Sites Pinned Site mode requires no changes to your site Enhance your Pinned Site 25 Providecustom information Addthe site as a Pinned Site programmatically Customizethe icon DefineJump List tasks Add additional Jump List items in a custom list Showthumbbarbuttons

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

27. 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() } }

28. Adding Icon Overlays 28 window.external.msSiteModeSetIconOverlay( 'http://host/overlay1.ico','Overlay 1'); window.external.msSiteModeClearIconOverlay(); Provide users with notifications or progress updates

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

30. With the same markup Interoperable

31. Web API Usage 7000 top sites 7000 Number of sites 0 API (by rank) 1 50 700 31

32. Working With Standards Bodies 32 Member of many W3C Working Groups Leading the W3C HTML5 Testing Task Force The HTML Working Group 40 W3C Member Organizations 411 group participants 280 invited experts 9 mailing lists ~4000 emails on public-html

33. Defining Same Markup 33

34. Internet Explorer Testing Center 34 http://samples.msdn.microsoft.com/ietestcenter/

35. HTML5: A Quick Overview 35 Commonly used to refer to modern open web standardslike 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.

36. GPU-Powered HTML5 Means… 36 Canvas CSS3 Media Queries SVG 1.1 2nd Edition, Full Web Fonts CSS3 Backgrounds & Borders Module Hardware Accelerated <video> CSS3 Color Models RGBA, HSLA, Opacity Hardware Accelerated <audio>

37. How To Use The Following Deep Dive Slides The following slides allow you to dive into different developer features. Depending on the amount of time and audience, you may want to show fewer slides and do more demo. 37

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

39. 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) 39 <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>

40. 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 40 <video src="video.mp4" id="videoTag" width="640px" height="360px"> <!-- Only shown when browser doesn’t support video --> <!-- You Could Embed Flash or Silverlight Video Here --> </video>

41. 41 <audio src="audio.mp3" id="audioTag" autoplay controls> <!-- Only shown when browser doesn’t support audio --> <!-- You could embed Flash or Silverlight audio here --> </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

42. 42 <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> WOFF Fonts & @font-face No longer limited to the “web safe” font list! Web Open Font Format allows you to package and deliver fonts as needed, per site Designed for web use with the @font-face declaration A simple repackaging of OpenType or TrueType font data From the W3C Fonts Working Group

43. CSS3 Media Queries Selectively style page based on properties of the media 43 <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" />

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

45. 45 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; }

46. DOM and JavaScript Features Full DOM Level 2 and Level 3 Event Support addEventListener DOMContentLoaded New ECMAScript 5 Features DOM Traversal and Range DOM Style DOM Core HTML5 and XHTML Parsing Enhancements getComputedStyle(element, pseudoElement) getSelection() getElementsByClassName(class) 46

47. F12 Developer Tools A built in, visual interface to the Document Object Model Fast experimentation New for Internet Explorer 9 Network inspection UA String Picker Console Tab SVG Support 47

48. Internet Explorer 9 48 All-around Fast Clean, with a focus on your websites Interoperable with same markup Uses the full power of your PC to provide GPU powered HTML5 and platform enhancements including Chakra, the new JavaScript engine. A clean, streamlined, speedier interface that puts the focus on your sites, rather than the browser. Improved standards support to enable “same markup” across browsers.

49. Internet Explorer 9 Beta: Now Available Migrate your applications off Internet Explorer 6 Develop for standards first! Download and install the Internet Explorer 9 Beta and test your site! Learn more at… http://msdn.com/ie 49

50. Questions