Ie9 dev overview (300) beta
•Download as PPTX, PDF•
0 likes•812 views
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.
Report
Share
More Related Content
Similar to Ie9 dev overview (300) beta
Similar to Ie9 dev overview (300) beta (20)
Recently uploaded
Recently uploaded (20)
Ie9 dev overview (300) beta
- 1. Internet Explorer 9: Developer Overview BetaPresenter NamePresenter Title
- 4. 4
- 5. 5
- 6. 6
- 7. 7
- 8. 8
- 11. WebKitSunSpider JavaScript Benchmark Results11
- 12. The JavaScript Engine12ForegroundSource CodeParserASTInterpreterByteCode
- 13. ForegroundSource CodeParserASTInterpreterByteCodeNew JavaScript Engine – “Chakra”13Background CompilerNative CodeBackgroundCompiled JavaScriptIn The BackgroundUsing Multiple Cores
- 15. Flying Images – One Animation15IE8IE9
- 16. Using The Full Power of Your PC16
- 17. Everyone Has a GPU17
- 18. 12345678Windows Experience Index Results - GPU1815%32%27%10%4%12%Windows Experience IndexGraphics Scores of Vista and Win7 Users
- 19. window.msPerformance19A 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 sitesClean
- 21. 21
- 22. 22
- 23. 23
- 24. Pinning Demo
- 25. Getting Started with Pinned SitesPinned Site mode requires no changes to your siteEnhance your Pinned Site25Providecustom informationAddthe site as a Pinned Site programmaticallyCustomizethe iconDefineJump List tasksAdd additional Jump List items in a custom listShowthumbbarbuttons
- 26. Customize Your Pinned Site26<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 Site27if (window.external.msIsSiteMode) { if (window.external.msIsSiteMode()) { // we are already in site mode } else { // add site to the Programs menuwindow.external.msAddSiteMode() }}
- 28. Adding Icon Overlays28window.external.msSiteModeSetIconOverlay('http://host/overlay1.ico','Overlay 1');window.external.msSiteModeClearIconOverlay();Provide users with notifications or progress updates
- 29. Adding Jump Lists29<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 markupInteroperable
- 31. Web API Usage 7000 top sites7000Number of sites0API (by rank)15070031
- 32. Working With Standards Bodies32Member of many W3C Working GroupsLeading the W3C HTML5 Testing Task ForceThe HTML Working Group40 W3C Member Organizations411 group participants280 invited experts9 mailing lists~4000 emails on public-html
- 34. Internet Explorer Testing Center34http://samples.msdn.microsoft.com/ietestcenter/
- 35. HTML5: A Quick Overview35Commonly 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…36CanvasCSS3 Media QueriesSVG 1.1 2nd Edition, Full Web FontsCSS3 Backgrounds & Borders ModuleHardware Accelerated <video>CSS3 Color ModelsRGBA, HSLA, OpacityHardware Accelerated <audio>
- 37. How To Use The Following Deep Dive SlidesThe 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>CanvasA block element that allows developers to draw 2d graphics using JavaScriptMethods for drawing include: paths, boxes, circles, text and rasterized images38
- 39. Create and draw 2D vector graphics using XMLVector images are composed of shapes instead of pixelsBased on the SVG 1.1 2nd Edition Full specificationSupport for:Full DOM access to SVG elementsDocument structure, scripting, styling, paths, shapes, colors, transforms, gradients, patterns, masking, clipping, markers, linking and viewsScalable 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> elementIndustry-standard MPEG-4/H.264 videoVideo can be composited with anything else on the pageHTML content, images, SVG graphicsHardware accelerated, GPU-based decodingAttributessrc – specifies the location to pull the source fileautoplay – if present starts playing as soon as it’s readycontrols – if present displays controlspreload – if present loads source at page loadloop – if present loops back to the beginning of the videoheight & width – specifies the height & width of the player40<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> elementIndustry-standard MP3 and AAC audioFully scriptable via the DOMAttributessrc – specifies the location to pull the source fileautoplay – if present starts playing as soon as it’s readycontrols – if present displays controlspreload – 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-faceNo longer limited to the “web safe” font list!Web Open Font Format allows you to package and deliver fonts as needed, per siteDesigned for web use with the @font-face declarationA simple repackaging of OpenType or TrueType font dataFrom the W3C Fonts Working Group
- 43. CSS3 Media QueriesSelectively style page based on properties of the media43<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. 44div.top { background-color: rgba(0, 0, 0, 0.5);color: azure;}div.bottom { background-color: hlsa(0, 0%, 0%, 0.5); color: cornsilk;}CSS3 ColorsCSS3 ColorAlpha color with rgba() and hsla() color functionsTransparency control with the opacity propertyCSS3 Color KeywordsFull support for CSS3 color keywordsCan be used with any property that takes the color property
- 45. 45CSS3 Backgrounds & BordersCSS3 Backgrounds and BordersRound corners with the border-radius propertyMultiple background images per elementbox-shadow property on block elementsdiv { border-radius: 152px 304px 228px 152px;border-style: double; border-width: 42px; padding: 12px;}
- 46. DOM and JavaScript FeaturesFull DOM Level 2 and Level 3 Event SupportaddEventListenerDOMContentLoadedNew ECMAScript 5 FeaturesDOM Traversal and RangeDOM StyleDOM CoreHTML5 and XHTML Parsing EnhancementsgetComputedStyle(element, pseudoElement)getSelection()getElementsByClassName(class)46
- 47. F12 Developer ToolsA built in, visual interface to the Document Object ModelFast experimentationNew for Internet Explorer 9Network inspectionUA String PickerConsole TabSVG Support47
- 48. Internet Explorer 948All-around FastClean,with a focus on your websitesInteroperable with same markupUses the full power of yourPC to provide GPUpowered HTML5 andplatform enhancementsincluding Chakra, thenew JavaScriptengine.A clean, streamlined,speedier interface thatputs the focus on yoursites, rather than thebrowser. Improved standardssupport to enable“same markup”across browsers.
- 49. Internet Explorer 9 Beta: Now AvailableMigrate your applications off Internet Explorer 6Develop for standards first!Download and install the Internet Explorer 9 Betaand test your site!Learn more at…http://msdn.com/ie49
- 50. Questions