Pinned sites in ie9 [beta]


Published on

Published in: Technology
  • 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

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