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 Internet Explorer 9


Published on

My presentation slides during HTML5 Webcamp last Saturday at Microsoft Philippines

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

Pinned Sites in Internet Explorer 9

  1. 1. Pinned Sites + Internet Explorer 9 Integrating Your Site With Windows 7 <ul><li>Abram John Limpin </li></ul><ul><li> </li></ul>
  2. 2. Agenda PAGE The Pinned Site Opportunity Who’s Using It Today Building A Pinned Experience
  3. 3. Web Sites As Applications How does the web become more app like? Immersive Fast Focused Clean Consistent PAGE
  4. 4. A Real World Pinned Site <ul><li>Demo </li></ul>
  5. 5. Site Mode Features Jump Lists Customized Jump Lists Thumb Bar Buttons Notifications Browser UI Customizations PAGE
  6. 6. Behind The Scenes: Site Mode <ul><li>Creates an isolated instance of Internet Explorer </li></ul><ul><li>Generates a unique AppID for a specific URL </li></ul><ul><li>BHOs and other toolbars are not enabled </li></ul><ul><li>Shares the same screen real estate as other Windows applications </li></ul>PAGE
  7. 7. Enhancing Your Site: The Basics <ul><li>Demo </li></ul>
  8. 8. The Basics Use meta elements to provide custom details <ul><ul><li><link rel=&quot;shortcut icon&quot; href=&quot;/favicon.ico&quot; /> </li></ul></ul><ul><li><meta name=&quot;application-name&quot; content=&quot;Pinned Name&quot; /> </li></ul><ul><li><meta name=&quot;msapplication-tooltip&quot; content=&quot;Start Site&quot; /> </li></ul><ul><li><meta name=&quot;msapplication-starturl&quot; content=&quot;http://host/page.htm&quot; /> </li></ul><ul><li><meta name=&quot;msapplication-window&quot; content=&quot;width=1024;height=768&quot; /> </li></ul><ul><li><meta name=&quot;msapplication-navbutton-color&quot; content=&quot;#FF3300&quot; /> </li></ul>PAGE
  9. 9. Enhancing Your Site: Adding Jump Lists <ul><li>Demo </li></ul>
  10. 10. Adding Jump Lists <ul><ul><li><meta name=&quot;msapplication-task&quot; </li></ul></ul><ul><ul><li>content=&quot;name=New Message;action-uri=http://host/NewMail.htm; </li></ul></ul><ul><ul><li>icon-uri=http://host/mail.ico&quot;/> </li></ul></ul>PAGE
  11. 11. Enhancing Your Site: Providing Notifications <ul><li>Demo </li></ul>
  12. 12. Providing Notifications <ul><li>window.external.msSiteModeSetIconOverlay('http://host/star.ico', </li></ul><ul><li>'Complete'); </li></ul><ul><li>window.external.msSiteModeClearIconOverlay(); </li></ul>PAGE
  13. 13. Enhancing Your Site: Creating Custom Jump Lists <ul><li>Demo </li></ul>
  14. 14. Creating Custom Jump Lists <ul><li>window.external.msSiteModeCreateJumplist('Notifications'); </li></ul><ul><li>window.external.msSiteModeAddJumpListItem('Scrum (37 minutes overdue)', </li></ul><ul><li>'http://host/reminders.html', 'http://host/images/bell.ico'); </li></ul><ul><li>window.external.msSiteModeShowJumpList(); </li></ul>PAGE
  15. 15. Enhancing Your Site: Adding Thumbnail Buttons <ul><li>Demo </li></ul>
  16. 16. Adding Thumbnail Buttons <ul><li>var but1 = window.external.msSiteModeAddThumbBarButton( </li></ul><ul><li>'http://host/speaker.ico', 'Mute'); </li></ul><ul><li>document.addEventListener('msthumbnailclick', handler, false); </li></ul><ul><li>window.external.msSiteModeShowThumbBar(); </li></ul>PAGE
  17. 17. Summary PAGE
  18. 18. Resources <ul><li>Internet Explorer Developer Center </li></ul><ul><ul><li> </li></ul></ul><ul><li>Pinned Site Guide </li></ul><ul><ul><li> </li></ul></ul><ul><li>Windows User Experience Interaction Guidelines </li></ul><ul><ul><li> </li></ul></ul><ul><li>Channel 9 Taskbar Related Videos </li></ul><ul><ul><li> </li></ul></ul><ul><li>Icon Guidelines </li></ul><ul><ul><li> </li></ul></ul><ul><li>Icon Editor </li></ul><ul><ul><li> </li></ul></ul>PAGE
  19. 19. Thank you! <ul><li>Questions </li></ul>