Ie9 dev overview (300) beta


Published on

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Ie9 dev overview (300) beta

  1. 1. Internet Explorer 9: Developer Overview <br />Beta<br />Presenter Name<br />Presenter Title<br />
  2. 2. Agenda<br />2<br />History and Evolution<br />Fast<br />Clean<br />Interoperable<br />
  3. 3. History and Evolution<br />
  4. 4. 4<br />
  5. 5. 5<br />
  6. 6. 6<br />
  7. 7. 7<br />
  8. 8. 8<br />
  9. 9. All-Around Fast<br />
  10. 10. 10<br />Multi-System Performance<br />
  11. 11. WebKitSunSpider JavaScript Benchmark Results<br />11<br />
  12. 12. The JavaScript Engine<br />12<br />Foreground<br />Source Code<br />Parser<br />AST<br />Interpreter<br />ByteCode<br />
  13. 13. Foreground<br />Source Code<br />Parser<br />AST<br />Interpreter<br />ByteCode<br />New JavaScript Engine – “Chakra”<br />13<br />Background Compiler<br />Native Code<br />Background<br />Compiled JavaScript<br />In The Background<br />Using Multiple Cores<br />
  14. 14. Flying Images<br />Demo<br />
  15. 15. Flying Images – One Animation<br />15<br />IE8<br />IE9<br />
  16. 16. Using The Full Power of Your PC<br />16<br />
  17. 17. Everyone Has a GPU<br />17<br />
  18. 18. 1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />Windows Experience Index Results - GPU<br />18<br />15%<br />32%<br />27%<br />10%<br />4%<br />12%<br />Windows Experience Index<br />Graphics Scores of Vista and Win7 Users<br />
  19. 19. window.msPerformance<br />19<br />A new set of Performance Metrics integrated at the DOMBrowser interoperable way to measure performance<br /><script type="text/javascript"><br />var w = window;<br />varnavStart= w.msPerformance.timing.navigationStart+ "ms";<br />varnavStartTime = Date(w.msPerformance.timing.navigationStart);<br /></script><br />
  20. 20. With a focus on your sites<br />Clean<br />
  21. 21. 21<br />
  22. 22. 22<br />
  23. 23. 23<br />
  24. 24. Pinning Demo<br />
  25. 25. Getting Started with Pinned Sites<br />Pinned Site mode requires no changes to your site<br />Enhance your Pinned Site<br />25<br />Providecustom information<br />Addthe site as a Pinned Site programmatically<br />Customizethe icon<br />DefineJump List tasks<br />Add additional Jump List items in a custom list<br />Showthumbbarbuttons<br />
  26. 26. Customize Your Pinned Site<br />26<br /><meta name="application-name" content="Site Name" /><br /><meta name="msapplication-tooltip" <br /> content="Start the Pinned Site" /><br /><meta name="msapplication-starturl" <br /> content="" /><br />Use meta elements to provide specific information<br />
  27. 27. Programmatically Pinning Your Site<br />27<br />if (window.external.msIsSiteMode) {<br /> if (window.external.msIsSiteMode()) {<br /> // we are already in site mode<br /> }<br /> else {<br /> // add site to the Programs menu<br />window.external.msAddSiteMode()<br /> }<br />}<br />
  28. 28. Adding Icon Overlays<br />28<br />window.external.msSiteModeSetIconOverlay(<br />'http://host/overlay1.ico','Overlay 1');<br />window.external.msSiteModeClearIconOverlay();<br />Provide users with notifications or progress updates<br />
  29. 29. Adding Jump Lists<br />29<br /><meta name="msapplication-task"<br /> content="name=Task 1;action-uri=http://host/Page1.htm;<br /> icon-uri=http://host/icon1.ico"/><br /><meta name="msapplication-task"<br />content="name=Task 2;action-uri=http://host2/Page2.htm;<br /> icon-uri=http://host2/icon2.ico"/><br />Windows 7 integration<br />
  30. 30. With the same markup<br />Interoperable<br />
  31. 31. Web API Usage <br />7000 top sites<br />7000<br />Number of sites<br />0<br />API (by rank)<br />1<br />50<br />700<br />31<br />
  32. 32. Working With Standards Bodies<br />32<br />Member of many W3C Working Groups<br />Leading the W3C HTML5 Testing Task Force<br />The HTML Working Group<br />40 W3C Member Organizations<br />411 group participants<br />280 invited experts<br />9 mailing lists<br />~4000 emails on public-html<br />
  33. 33. Defining Same Markup<br />33<br />
  34. 34. Internet Explorer Testing Center<br />34<br /><br />
  35. 35. HTML5: A Quick Overview<br />35<br />Commonly used to refer to modern open web standardslike HTML5, CSS3, and more.<br />Adds new rich media and graphics support (canvas, video, audio, inline SVG…)<br />Standardizes behavior for browser vendors, enabling same markup.<br />The W3C HTML5 specification is still a draft, it’s over 1100 pages and keeps evolving. <br />
  36. 36. GPU-Powered HTML5 Means…<br />36<br />Canvas<br />CSS3 Media Queries<br />SVG 1.1 2nd Edition, Full <br />Web Fonts<br />CSS3 Backgrounds & Borders Module<br />Hardware Accelerated <video><br />CSS3 Color Models<br />RGBA, HSLA, Opacity<br />Hardware Accelerated <audio><br />
  37. 37. How To Use The Following Deep Dive Slides<br />The following slides allow you to dive into different developer features. <br />Depending on the amount of time and audience, you may want to show fewer slides and do more demo.<br />37<br />
  38. 38. <canvas id="myCanvas" width="200" height="200"><br /> Your browser doesn’t support Canvas, sorry.<br /></canvas><br /><script type="text/javascript"><br />var example = document.getElementById("myCanvas"); <br />var context = example.getContext("2d"); <br />context.fillStyle = "rgb(255,0,0)"; <br />context.fillRect(30, 30, 50, 50); <br /></script><br />Canvas<br />A block element that allows developers to draw 2d graphics using JavaScript<br />Methods for drawing include: paths, boxes, circles, text and rasterized images<br />38<br />
  39. 39. Create and draw 2D vector graphics using XML<br />Vector images are composed of shapes instead of pixels<br />Based on the SVG 1.1 2nd Edition Full specification<br />Support for:<br />Full DOM access to SVG elements<br />Document structure, scripting, styling, paths, shapes, colors, transforms, gradients, patterns, masking, clipping, markers, linking and views<br />Scalable Vector Graphics (SVG)<br />39<br /><svg width="400" height="200" xmlns=""><br /> <rect fill="red" x="20" y="20" width="100" height="75" /><br /> <rect fill="blue" x="50" y="50" width="100" height="75" /><br /></svg> <br />
  40. 40. HTML5 <video><br />Support for the 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 />Hardware accelerated, GPU-based decoding<br />Attributes<br />src – specifies the location to pull the source file<br />autoplay – if present starts playing as soon as it’s ready<br />controls – if present displays controls<br />preload – if present loads source at page load<br />loop – if present loops back to the beginning of the video<br />height & width – specifies the height & width of the player<br />40<br /><video src="video.mp4" id="videoTag" width="640px" height="360px"><br /> <!-- Only shown when browser doesn’t support video --><br /> <!-- You Could Embed Flash or Silverlight Video Here --><br /></video><br />
  41. 41. 41<br /><audio src="audio.mp3" id="audioTag" autoplay controls><br /> <!-- Only shown when browser doesn’t support audio --><br /> <!-- You could embed Flash or Silverlight audio here --><br /></video><br />HTML5 <audio><br />Support for the HTML5 <audio> element<br />Industry-standard MP3 and AAC audio<br />Fully scriptable via the DOM<br />Attributes<br />src – specifies the location to pull the source file<br />autoplay – if present starts playing as soon as it’s ready<br />controls – if present displays controls<br />preload – if present loads source at page load<br />
  42. 42. 42<br /><style type="text/css"><br /> @font-face {<br /> font-family:MyFontName;<br />src: url('FontFile.woff');<br /> } <br /></style><br /><div style="font: 24pt MyFontName, sans-serif;"><br /> This will render using MyFontName in FontFile.woff<br /></div><br />WOFF Fonts & @font-face<br />No longer limited to the “web safe” font list!<br />Web Open Font Format allows you to package and deliver fonts as needed, per site<br />Designed for web use with the @font-face declaration<br />A simple repackaging of OpenType or TrueType font data<br />From the W3C Fonts Working Group<br />
  43. 43. CSS3 Media Queries<br />Selectively style page based on properties of the media<br />43<br /><link href=“mobile.css" rel="stylesheet" media="screen and (max-width:480px)" type=“ text/css" /> <br /><link href=“netbook.css" rel="stylesheet" media="screen and (min-width:481px) and (max- width: 1024px)" type="text/css" /> <br /><link href=“laptop.css" rel="stylesheet" media="screen and (min-width:1025px)" type="text/css" /> <br />
  44. 44. 44<br /> {<br /> background-color: rgba(0, 0, 0, 0.5);<br />color: azure;<br />}<br />div.bottom {<br /> background-color: hlsa(0, 0%, 0%, 0.5);<br /> color: cornsilk;<br />}<br />CSS3 Colors<br />CSS3 Color<br />Alpha color with rgba() and hsla() color functions<br />Transparency control with the opacity property<br />CSS3 Color Keywords<br />Full support for CSS3 color keywords<br />Can be used with any property that takes the color property<br />
  45. 45. 45<br />CSS3 Backgrounds & Borders<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 />div {<br /> border-radius: 152px 304px 228px 152px;<br />border-style: double;<br /> border-width: 42px;<br /> padding: 12px;<br />}<br />
  46. 46. DOM and JavaScript Features<br />Full DOM Level 2 and Level 3 Event Support<br />addEventListener<br />DOMContentLoaded<br />New ECMAScript 5 Features<br />DOM Traversal and Range<br />DOM Style<br />DOM Core<br />HTML5 and XHTML Parsing Enhancements<br />getComputedStyle(element, pseudoElement)<br />getSelection()<br />getElementsByClassName(class)<br />46<br />
  47. 47. F12 Developer Tools<br />A built in, visual interface to the Document Object Model<br />Fast experimentation<br />New for Internet Explorer 9<br />Network inspection<br />UA String Picker<br />Console Tab<br />SVG Support<br />47<br />
  48. 48. Internet Explorer 9<br />48<br />All-around Fast<br />Clean,<br />with a focus on your websites<br />Interoperable with same markup<br />Uses the full power of your<br />PC to provide GPU<br />powered HTML5 and<br />platform enhancements<br />including Chakra, the<br />new JavaScript<br />engine.<br />A clean, streamlined,<br />speedier interface that<br />puts the focus on your<br />sites, rather than the<br />browser. <br />Improved standards<br />support to enable<br />“same markup”<br />across browsers.<br />
  49. 49. Internet Explorer 9 Beta: Now Available<br />Migrate your applications off Internet Explorer 6<br />Develop for standards first!<br />Download and install the Internet Explorer 9 Beta<br />and test your site!<br />Learn more at…<br /><br />49<br />
  50. 50. Questions<br />