Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Pinned sites in ie9 [beta]


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Pinned sites in ie9 [beta]

  1. 1. Pinned Sites + Internet Explorer 9<br />Presenter Name<br />Presenter Title<br />
  2. 2. Agenda<br />The Web and Windows<br />Theater vs. Play<br />Who’s Using It Today<br />Bringing it all Together<br />2<br />
  3. 3. The Web and Windows<br />
  4. 4. 57% of time on a PC is spent in the web browser<br />Web Browsing is Core to the Windows Experience<br />4<br />
  5. 5. Expectations are Rising for the Web<br />The capabilities of the web are increasing every day, but the way we experience the web isn’t keeping up.<br />5<br />
  6. 6. And What About all Those Apps?<br />Immersive<br />Fast<br />Focused<br />Clean<br />Consistent <br />How does the web become more app like? <br />6<br />
  7. 7. The Browser is the Theater, not the Play<br />7<br />
  8. 8. Native Web, through Windows<br />Putting the focus on your sites<br />Your sites shine<br />Seamless with Windows 7 <br />Smarter address bar <br />Streamlined & quieted<br />8<br />
  9. 9. Pinned Sites<br />Presenter<br />Presenter Title<br />Demo<br />
  10. 10. Behind The Scenes: Pinned Sites<br />Creates an isolated instance of Internet Explorer<br />Generates an AppID for a specific URL<br />BHOs and other toolbars are not enabled<br />Share the same real estate as Windows applications<br />10<br />
  11. 11. A Look At How Pinned Sites Are Being Used Today<br />Real World Pinned Sited<br />
  12. 12. Let’s Build It!<br />
  13. 13. Enhance your Pinned Site<br />Getting Started<br />Pinned Site mode requires no changes to your site<br />Provide custom information<br />Add the site as a Pinned Site programmatically<br />Customize the icon<br />Define Jump List tasks<br />Add additional Jump List items in a custom list<br />Showthumbbar buttons<br />Notify users that interaction is needed<br />Modify the navigation button colors<br />13<br />
  14. 14. Customize Your Pinned Site<br />14<br />Use meta elements to provide specific information<br /><meta name="application-name" content="Pinned Name" /><br /><meta name="msapplication-tooltip" content="Start Site" /><br /><meta name="msapplication-starturl"<br />content="http://host/page.htm" /><br /><meta name="msapplication-window" <br /> content="width=1024;height=768" /><br /><meta name="msapplication-navbutton-color" content="#FF3300" /><br />
  15. 15. Programmatically Pinning Your Site<br />15<br />if (window.external.msIsSiteMode) {<br /> if (window.external.msIsSiteMode()) {<br /> // we are already in site mode<br /> }<br /> else {<br /> // Show HTML elements that will promote the<br /> // addition of a pin site to the Programs menu <br />window.external.msAddSiteMode()<br /> }<br />}<br />
  16. 16. Customizing The Icon<br />16<br />Uses existing, same markup to specify the icon to use<br />Uses the existing, standards based site favicon<br /><ul><li><link rel="shortcut icon" href="/favicon.ico" /></li></ul>Best Practice: <br /><ul><li>Icon file should contain
  17. 17. Recommended: 16x16, 32x32, 48x48
  18. 18. Optimal: 16x16, 24x24, 32x32, 64x64</li></li></ul><li>Pinned Site Basics<br />Presenter<br />Presenter Title<br />Demo<br />
  19. 19. Adding Icon Overlays<br />18<br />Provide users with notifications or progress updates<br />window.external.msSiteModeSetIconOverlay(<br />'http://host/star.ico', 'Complete');<br />window.external.msSiteModeClearIconOverlay();<br />
  20. 20. Icon Overlays<br />Presenter<br />Presenter Title<br />Demo<br />
  21. 21. Adding Jump List Tasks<br />20<br />Windows 7 integration<br /><meta name="msapplication-task" content="name=New Message;<br />action-uri=http://host/NewMail.htm;<br />icon-uri=http://host/mail.ico"/><br /><meta name="msapplication-task" <br />content="name=New Appointment;<br />action-uri=http://host2/NewAppt.htm;<br />icon-uri=http://host2/Appt.ico"/><br />
  22. 22. Customizing Jump Lists<br />21<br />Adding a custom Jump List category<br />window.external.msSiteModeCreateJumplist('Notifications'); <br />window.external.<br />msSiteModeAddJumpListItem(<br /> 'Scrum (37 minutes overdue)', <br /> 'http://host/reminders.html', <br />'http://host/images/bell.ico'); <br />window.external.<br />msSiteModeShowJumpList();<br />
  23. 23. Adding Jump Lists<br />Presenter<br />Presenter Title<br />Demo<br />
  24. 24. Displaying Thumbnail Toolbar Buttons<br />23<br />var but1 = window.external.msSiteModeAddThumbBarButton(<br />'http://host/speaker.ico', 'Mute');<br />document.addEventListener(<br />'msthumbnailclick', handler, false);<br />window.external.msSiteModeShowThumbBar();<br />
  25. 25. Updating Thumbnail Toolbar Buttons<br />24<br />Changing the Button Properties<br /><ul><li>window.external.msSiteModeUpdateThumbBarButton(buttonID, Enabled, Visible)</li></ul>Changing the Button Style<br />var style1 = window.external.msSiteModeAddButtonStyle(<br />buttonID, IconUrl, ToolTip)<br />window.external.msSiteModeShowButtonStyle(buttonID, styleID);<br />
  26. 26. Adding Thumbnail Toolbar Buttons<br />Presenter<br />Presenter Title<br />Demo<br />
  27. 27. Internet Explorer 9 Makes Your Web Look and Perform as if it Were Native to Windows <br />Clean<br />Putting the focus on your sites<br />Trusted<br />Secure, reliable, and private<br />Interoperable<br />HTML5 & same <br />markup<br />Fast<br />All around fast using the power of your whole PC<br />Full hardware acceleration of all graphics and text<br />New JavaScript engine <br />Clean web-centric UI <br />Seamless with Windows 7<br />New tab page experience<br />One Box<br />Quieter notifications<br />Download manager with SmartScreen protection<br />Hang resistance<br />Add-on performance protection<br />HTML 5 and modern web standards support<br />Leading with the W3C<br />Comprehensive standards tests<br />26<br />
  28. 28. Unlock a More Beautiful Web<br />Get Started…<br /><br />27<br />
  29. 29. Questions<br />
  30. 30. Internet Explorer Developer Center on MSDN<br /> <br />Windows User Experience Interaction Guidelines<br /><br />Channel 9 Taskbar related videos<br /><br /><br />Resources<br />29<br />Icon Guidelines<br /><br />