Your SlideShare is downloading. ×
Pinned Sites    + Internet Explorer 9 Integrating Your Site With Windows 7 <ul><li>Abram John Limpin </li></ul><ul><li>htt...
Agenda PAGE  The Pinned Site Opportunity Who’s Using It Today Building A Pinned Experience
Web Sites As Applications How does the web become more app like? Immersive Fast Focused Clean Consistent PAGE
A Real World Pinned Site <ul><li>Demo </li></ul>
Site Mode Features Jump Lists Customized Jump Lists Thumb Bar Buttons Notifications Browser UI Customizations PAGE
Behind The Scenes: Site Mode <ul><li>Creates an isolated instance of Internet Explorer </li></ul><ul><li>Generates a uniqu...
Enhancing Your Site: The Basics <ul><li>Demo </li></ul>
The Basics Use meta elements to provide custom details <ul><ul><li><link rel=&quot;shortcut icon&quot; href=&quot;/favicon...
Enhancing Your Site: Adding Jump Lists <ul><li>Demo </li></ul>
Adding Jump Lists <ul><ul><li><meta name=&quot;msapplication-task&quot;  </li></ul></ul><ul><ul><li>content=&quot;name=New...
Enhancing Your Site: Providing Notifications <ul><li>Demo </li></ul>
Providing Notifications <ul><li>window.external.msSiteModeSetIconOverlay('http://host/star.ico',  </li></ul><ul><li>'Compl...
Enhancing Your Site: Creating Custom Jump Lists <ul><li>Demo </li></ul>
Creating Custom Jump Lists <ul><li>window.external.msSiteModeCreateJumplist('Notifications');  </li></ul><ul><li>window.ex...
Enhancing Your Site: Adding Thumbnail Buttons <ul><li>Demo </li></ul>
Adding Thumbnail Buttons <ul><li>var but1 = window.external.msSiteModeAddThumbBarButton( </li></ul><ul><li>'http://host/sp...
Summary PAGE
Resources <ul><li>Internet Explorer Developer Center </li></ul><ul><ul><li>http://msdn.com/ie </li></ul></ul><ul><li>Pinne...
Thank you! <ul><li>Questions </li></ul>
 
Upcoming SlideShare
Loading in...5
×

Pinned Sites in Internet Explorer 9

1,392

Published on

My presentation slides during HTML5 Webcamp last Saturday at Microsoft Philippines

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,392
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Windows 7 | Presenter Mode Wednesday, March 2, 2011 Microsoft Confidential
  • Sites can easily be pinned by users without any changes to your existing code – they can just drag the favicon in the address bar down to the task bar, and the site is pinned. Internet Explorer 9 will use the existing favicon as the icon for the app, and they’ll get the basic Pinned Site experience. Providing a basic experience is a good start, but customers will want to pin sites that integrate the best, so that they can interact with your site with the ease and familiarity of other Windows Applications. For example, providing Jump Lists is a quick way to get to frequently visited pages without first opening your browser. Adding icon overlays to provide notifications about how the status of an application has changed, or adding thumbnail preview controls available on the Windows 7 taskbar to provide quick control to your site. We’ll take a quick look at how you can enhance your Pinned Site experience with some simple code. Windows 7 | Presenter Mode Wednesday, March 2, 2011 Microsoft Confidential
  • Let’s take a look at what Internet Explorer does when a user pin’s a site. The first thing you’ll notice is that the website opens in it’s own window that’s isolated from any other instances of Internet Explorer that are running. Because the browser is running in Pinned Site mode, a new AppID is generated for that specific application – providing additional separation from other Internet Explorer windows. Any BHO’s or other toolbars are not enabled, helping to provide a more clean, streamlined experience. But most visible, the Pinned Site shares the same realestate as other Windows Applications, appearing on the task bar, and providing the same functionality as other Windows applications, like Jump Lists, custom icons, notifications and more. Pinned Sites easily co-mingle with other native Windows 7 applications. Windows 7 | Presenter Mode Wednesday, March 2, 2011 Microsoft Confidential
  • Transcript of "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>http://abramlimpin.com </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>http://msdn.com/ie </li></ul></ul><ul><li>Pinned Site Guide </li></ul><ul><ul><li>http://msdn.microsoft.com/library/gg131029(VS.85).aspx </li></ul></ul><ul><li>Windows User Experience Interaction Guidelines </li></ul><ul><ul><li>http://msdn.microsoft.com/en-us/library/aa511446.aspx </li></ul></ul><ul><li>Channel 9 Taskbar Related Videos </li></ul><ul><ul><li>http://channel9.msdn.com/tags/Taskbar/ </li></ul></ul><ul><li>Icon Guidelines </li></ul><ul><ul><li>http://msdn.microsoft.com/en-us/library/aa511280.aspx </li></ul></ul><ul><li>Icon Editor </li></ul><ul><ul><li>http://www.xiconeditor.com/ </li></ul></ul>PAGE
    19. 19. Thank you! <ul><li>Questions </li></ul>

    ×