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