Giorgio Sardo<br />IE Technical Evangelist, Microsoft Corp<br />gisardo@microsoft.com<br />Internet Explorer 9 Overview<br />
IE9 At-A-Glance<br />Developers Platform<br />	HTML5 and Microsoft<br />	Performance<br />Q&A<br />Agenda<br />
Internet Explorer 8<br />Demo<br />
Demos/Script:<br />IE8 & HTML5 and IE8 & Web Standards<br />Network connectivity (HTML 5)<br />DOM Storage (HTML 5)<br />A...
Expression Web SuperPreview<br />
Internet Explorer 9<br />Welcome to the future<br />
Engineering for IE9 is about delivering:<br /><ul><li>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 Win...
HTML5 and Internet Explorer 9<br />
Participation to W3C Working Groups<br />HTML 5 WG<br />DOM WG<br />CSS WG<br />SVG WG<br />SVG Testing Task Force<br />HT...
Paul Cotton (Microsoft), co-chair<br />40 W3C Member organizations<br />411 group participants<br />280 invited Experts<br...
HTML 5<br />XHTML<br />CSS 3<br />SVG<br />DOM Level2 and Level3<br />Microsoft commitments with IE9 PPB1<br />
HTML5 <br />Defines the behavior at seams of other specs<br />Parsing unknown elements<br />Integrated SVG<br />XHTML/XML<...
Interpret the same HTML and CSS markup the same way<br />Always some differences on the edges <br />Standards evolve<br />...
Interoperable Markup<br />Demo<br />
W3C Test Suites<br />Source: http://samples.msdn.microsoft.com/ietestcenter/<br />
Real World Scenarios<br />
HTML5 <video> element<br />Industry-standard MPEG-4/H.264 video<br />Video can be composited with anything else on the pag...
Video Tag<br />Demo<br />
Markup-/DOM-based graphics: SVG 1.1<br />“View source” simplicity—aids learning<br />Easy server-side generation—it’s just...
SVG<br />Demo<br />
SVG in IE9 Platform Preview<br />
CSS3 Color<br />Alpha color with rgba() and hsla() color functions<br />Transparency control with the opacity property<br ...
CSS3 Selectors<br />Help you do more on your site with less script<br />Make it easier to use new graphics capabilities<br...
CSS 3 Selectors<br />
CSS 3<br />Demo<br />
Central part of web platform used to manipulate the DOM<br />DOM Core<br />DOM Events<br />DOM Style<br />DOM HTML<br />DO...
DOM Events<br />Demo<br />
IE9 and Performance<br />HW-Accelerated HTML5<br />
Page load in slow motion<br />Demo<br />
Scenario – Wall Street Journal<br />Starting with Bing<br />
Scenario – Wall Street Journal<br />Blank Background<br />
Scenario – Wall Street Journal<br />Initial HTML<br />
Scenario – Wall Street Journal<br />Heading Appears<br />
Scenario – Wall Street Journal<br />Initial Content<br />
Scenario – Wall Street Journal<br />Right Column Lays Out<br />
Scenario – Wall Street Journal<br />Media Appears<br />
Scenario – Wall Street Journal<br />Customized Content<br />
Scenario – Wall Street Journal<br />Advertisements<br />
Five Popular News Sites<br />JQuery<br />Prototype<br />MooTools<br />Scriptaculous<br />Other (JS Lib)<br />YUI<br />
Five Popular News Sites – The best<br />JQuery<br />Prototype<br />MooTools<br />Scriptaculous<br />Other (JS Lib)<br />YU...
Five Popular News Sites – The worst<br />JQuery<br />Prototype<br />MooTools<br />Scriptaculous<br />Other (JS Lib)<br />Y...
News site 1<br />News site 2<br />Time spent in IE subsystems differs greatly by site function and coding pattern<br />Per...
WSJ – Before and After<br />IE8<br />IE8<br />IE9<br />IE9<br />43<br />
Performance<br />Demo<br />
Web API Usage 7000  top sites<br />7000<br />Number of sites<br />0<br />API (by rank)<br />1<br />50<br />700<br />
JavaScript PerformanceWebKit.org’sSunSpider v0.9 Benchmark<br />Dell OptiPlex, Microsoft Windows 7 Enterprise 6.1.7600, 64...
GPU on Every Machine<br />
Upcoming SlideShare
Loading in …5
×

Ie9 overview

2,979 views

Published on

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

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,979
On SlideShare
0
From Embeds
0
Number of Embeds
34
Actions
Shares
0
Downloads
80
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Ie9 overview

  1. Giorgio Sardo<br />IE Technical Evangelist, Microsoft Corp<br />gisardo@microsoft.com<br />Internet Explorer 9 Overview<br />
  2. IE9 At-A-Glance<br />Developers Platform<br /> HTML5 and Microsoft<br /> Performance<br />Q&A<br />Agenda<br />
  3. Internet Explorer 8<br />Demo<br />
  4. Demos/Script:<br />IE8 & HTML5 and IE8 & Web Standards<br />Network connectivity (HTML 5)<br />DOM Storage (HTML 5)<br />Ajax Navigation (HTML 5)<br />Native JSON (ECMA Script 5)<br />CSS Selectors (Web Applications)<br />Cross Domain Request (Web Applications)<br />Cross Document Messaging (Web Applications)<br />DOM Prototypes (DOM)<br />IE8 and HTML 5<br />
  5. Expression Web SuperPreview<br />
  6. Internet Explorer 9<br />Welcome to the future<br />
  7. Engineering for IE9 is about delivering:<br /><ul><li>A fast, clean experience that allows IE users to just browse
  8. A highly interoperable platform for developers to build compelling, graphically rich site and applications, powered by Windows</li></ul>IE9 At-A-Glance<br />
  9. HTML5 and Internet Explorer 9<br />
  10. Participation to W3C Working Groups<br />HTML 5 WG<br />DOM WG<br />CSS WG<br />SVG WG<br />SVG Testing Task Force<br />HTML Testing Task Force<br />Accessibility Task Force<br />…<br />Microsoft and Web Standards<br />
  11. Paul Cotton (Microsoft), co-chair<br />40 W3C Member organizations<br />411 group participants<br />280 invited Experts<br />9 mailing lists (~4000 emails on public-html)<br />As of March 15th:<br />153 unresolved bugs, 34 unresolved issues (e.g. decentralized extensibility, document license…)<br />HTML Working Group<br />
  12. HTML 5<br />XHTML<br />CSS 3<br />SVG<br />DOM Level2 and Level3<br />Microsoft commitments with IE9 PPB1<br />
  13. HTML5 <br />Defines the behavior at seams of other specs<br />Parsing unknown elements<br />Integrated SVG<br />XHTML/XML<br />Namespaces for using custom elements<br />Strict, fail-fast parsing helps developers find errors quickly<br />SVG<br />Standalone XML-based document (.svg file)<br />Inline in an XHTML document<br />Inline in an HTML5 document<br />Markup Languages in IE9<br />
  14. Interpret the same HTML and CSS markup the same way<br />Always some differences on the edges <br />Standards evolve<br />Browsers implement in different order<br />Contributing DOM, CSS3 Standards Compliance Tests to W3C<br />Interoperable HTML5 Markup<br />
  15. Interoperable Markup<br />Demo<br />
  16. W3C Test Suites<br />Source: http://samples.msdn.microsoft.com/ietestcenter/<br />
  17. Real World Scenarios<br />
  18. HTML5 <video> element<br />Industry-standard MPEG-4/H.264 video<br />Video can be composited with anything else on the page<br />HTML content, images, SVG graphics<br />GPU-based implementation capable of maintaining 60fps full-screen at full HD resolution<br />Supports both DXVA and full hardware video decoders<br />HTML5 <audio> element<br />Industry-standard MP3 and AAC audio<br />HTML 5 Video<br /><video width="800" height="450" src="myvideo.mp4" autoplay><br />No video for you</video><br />
  19. Video Tag<br />Demo<br />
  20. Markup-/DOM-based graphics: SVG 1.1<br />“View source” simplicity—aids learning<br />Easy server-side generation—it’s just XML<br />Easy client-side debugging—it’s in the DOM<br />Supported by popular graphics programs<br />Easy integration with HTML5<br />SVG (Scalable Vector Graphics)<br /><svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"><br /><rect fill="red" x="20" y="20" width="100" height="75" /><br /><rectfill="blue" x="50" y="50" width="100" height="75" /><br /></svg><br />
  21. SVG<br />Demo<br />
  22. SVG in IE9 Platform Preview<br />
  23. CSS3 Color<br />Alpha color with rgba() and hsla() color functions<br />Transparency control with the opacity property<br />CSS3 Backgrounds and Borders<br />Round corners with the border-radius property<br />Multiple background images per element<br />box-shadow property on block elements<br />Graphically-rich Styling with CSS3<br />
  24. CSS3 Selectors<br />Help you do more on your site with less script<br />Make it easier to use new graphics capabilities<br />CSS3 Namespaces<br />Style elements with namespaces in XHTML documents<br />CSS Infrastructure<br />
  25. CSS 3 Selectors<br />
  26. CSS 3<br />Demo<br />
  27. Central part of web platform used to manipulate the DOM<br />DOM Core<br />DOM Events<br />DOM Style<br />DOM HTML<br />DOM Range<br />HTML5 Selection <br />IE9 Programming Model<br />
  28. DOM Events<br />Demo<br />
  29. IE9 and Performance<br />HW-Accelerated HTML5<br />
  30. Page load in slow motion<br />Demo<br />
  31. Scenario – Wall Street Journal<br />Starting with Bing<br />
  32. Scenario – Wall Street Journal<br />Blank Background<br />
  33. Scenario – Wall Street Journal<br />Initial HTML<br />
  34. Scenario – Wall Street Journal<br />Heading Appears<br />
  35. Scenario – Wall Street Journal<br />Initial Content<br />
  36. Scenario – Wall Street Journal<br />Right Column Lays Out<br />
  37. Scenario – Wall Street Journal<br />Media Appears<br />
  38. Scenario – Wall Street Journal<br />Customized Content<br />
  39. Scenario – Wall Street Journal<br />Advertisements<br />
  40. Five Popular News Sites<br />JQuery<br />Prototype<br />MooTools<br />Scriptaculous<br />Other (JS Lib)<br />YUI<br />
  41. Five Popular News Sites – The best<br />JQuery<br />Prototype<br />MooTools<br />Scriptaculous<br />Other (JS Lib)<br />YUI<br />
  42. Five Popular News Sites – The worst<br />JQuery<br />Prototype<br />MooTools<br />Scriptaculous<br />Other (JS Lib)<br />YUI<br />
  43. News site 1<br />News site 2<br />Time spent in IE subsystems differs greatly by site function and coding pattern<br />Performance is multi-dimensional<br />
  44. WSJ – Before and After<br />IE8<br />IE8<br />IE9<br />IE9<br />43<br />
  45. Performance<br />Demo<br />
  46. Web API Usage 7000 top sites<br />7000<br />Number of sites<br />0<br />API (by rank)<br />1<br />50<br />700<br />
  47. JavaScript PerformanceWebKit.org’sSunSpider v0.9 Benchmark<br />Dell OptiPlex, Microsoft Windows 7 Enterprise 6.1.7600, 64-bit, 3.0GHz Intel Core 2 Duo, 4GB RAM, Intel Integrated Video<br />
  48. GPU on Every Machine<br />
  49. GPU-Powered HTML5<br />
  50. Flying Images<br />Demo<br />
  51. Flying Images – One Animation<br />IE8<br />IE8<br />IE9<br />IE9<br />50<br />
  52. blogs.msdn.com/IE<br />www.ietestdrive.com<br />blogs.msdn.com/Giorgio<br />Resources<br />
  53. Q&A<br />

×