web标准化交流会（w3ctech.com）上微软总部负责IE系列产品的同事Giorgio Sadro 分享《HTML5 and Internet Explorer 9.

1. Giorgio Sardo IE Technical Evangelist, Microsoft Corp gisardo@microsoft.com Internet Explorer 9 Overview

2. IE9 At-A-Glance Developers Platform HTML5 and Microsoft Performance Q&A Agenda

3. Internet Explorer 8 Demo

4. Demos/Script: IE8 & HTML5 and IE8 & Web Standards Network connectivity (HTML 5) DOM Storage (HTML 5) Ajax Navigation (HTML 5) Native JSON (ECMA Script 5) CSS Selectors (Web Applications) Cross Domain Request (Web Applications) Cross Document Messaging (Web Applications) DOM Prototypes (DOM) IE8 and HTML 5

5. Expression Web SuperPreview

6. Internet Explorer 9 Welcome to the future

8. A highly interoperable platform for developers to build compelling, graphically rich site and applications, powered by WindowsIE9 At-A-Glance

9. HTML5 and Internet Explorer 9

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

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

12. HTML 5 XHTML CSS 3 SVG DOM Level2 and Level3 Microsoft commitments with IE9 PPB1

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

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

15. Interoperable Markup Demo

16. W3C Test Suites Source: http://samples.msdn.microsoft.com/ietestcenter/

17. Real World Scenarios

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

19. Video Tag Demo

20. 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" /> <rectfill="blue" x="50" y="50" width="100" height="75" /> </svg>

21. SVG Demo

22. SVG in IE9 Platform Preview

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

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

25. CSS 3 Selectors

26. CSS 3 Demo

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

28. DOM Events Demo

29. IE9 and Performance HW-Accelerated HTML5

30. Page load in slow motion Demo

31. Scenario – Wall Street Journal Starting with Bing

32. Scenario – Wall Street Journal Blank Background

33. Scenario – Wall Street Journal Initial HTML

34. Scenario – Wall Street Journal Heading Appears

35. Scenario – Wall Street Journal Initial Content

36. Scenario – Wall Street Journal Right Column Lays Out

37. Scenario – Wall Street Journal Media Appears

38. Scenario – Wall Street Journal Customized Content

39. Scenario – Wall Street Journal Advertisements

40. Five Popular News Sites JQuery Prototype MooTools Scriptaculous Other (JS Lib) YUI

41. Five Popular News Sites – The best JQuery Prototype MooTools Scriptaculous Other (JS Lib) YUI

42. Five Popular News Sites – The worst JQuery Prototype MooTools Scriptaculous Other (JS Lib) YUI

43. News site 1 News site 2 Time spent in IE subsystems differs greatly by site function and coding pattern Performance is multi-dimensional

44. WSJ – Before and After IE8 IE8 IE9 IE9 43

45. Performance Demo

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

47. JavaScript PerformanceWebKit.org’sSunSpider 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

48. GPU on Every Machine

49. GPU-Powered HTML5

50. Flying Images Demo

51. Flying Images – One Animation IE8 IE8 IE9 IE9 50

52. blogs.msdn.com/IE www.ietestdrive.com blogs.msdn.com/Giorgio Resources

53. Q&A