This document discusses new features in Internet Explorer 9 that allow websites to be pinned to the Windows taskbar like native applications. It provides an overview of pinned sites and how they are isolated from other browser extensions. The document demonstrates how developers can customize pinned sites by adding icons, jump lists, thumbnail toolbar buttons, and other features to enhance the user experience. It encourages developers to take advantage of these capabilities to make their websites feel more like native applications to users.

1. Pinned Sites + Internet Explorer 9 Presenter Name Presenter Title

2. Agenda The Web and Windows Theater vs. Play Who’s Using It Today Bringing it all Together 2

3. The Web and Windows

4. 57% of time on a PC is spent in the web browser Web Browsing is Core to the Windows Experience 4

5. Expectations are Rising for the Web The capabilities of the web are increasing every day, but the way we experience the web isn’t keeping up. 5

6. And What About all Those Apps? Immersive Fast Focused Clean Consistent How does the web become more app like? 6

7. The Browser is the Theater, not the Play 7

8. Native Web, through Windows Putting the focus on your sites Your sites shine Seamless with Windows 7 Smarter address bar Streamlined & quieted 8

9. Pinned Sites Presenter Presenter Title Demo

10. Behind The Scenes: Pinned Sites Creates an isolated instance of Internet Explorer Generates an AppID for a specific URL BHOs and other toolbars are not enabled Share the same real estate as Windows applications 10

11. A Look At How Pinned Sites Are Being Used Today Real World Pinned Sited

12. Let’s Build It!

13. Enhance your Pinned Site Getting Started Pinned Site mode requires no changes to your site Provide custom information Add the site as a Pinned Site programmatically Customize the icon Define Jump List tasks Add additional Jump List items in a custom list Showthumbbar buttons Notify users that interaction is needed Modify the navigation button colors 13

14. Customize Your Pinned Site 14 Use meta elements to provide specific information <meta name="application-name" content="Pinned Name" /> <meta name="msapplication-tooltip" content="Start Site" /> <meta name="msapplication-starturl" content="http://host/page.htm" /> <meta name="msapplication-window" content="width=1024;height=768" /> <meta name="msapplication-navbutton-color" content="#FF3300" />

15. Programmatically Pinning Your Site 15 if (window.external.msIsSiteMode) { if (window.external.msIsSiteMode()) { // we are already in site mode } else { // Show HTML elements that will promote the // addition of a pin site to the Programs menu window.external.msAddSiteMode() } }

17. Recommended: 16x16, 32x32, 48x48

19. Adding Icon Overlays 18 Provide users with notifications or progress updates window.external.msSiteModeSetIconOverlay( 'http://host/star.ico', 'Complete'); window.external.msSiteModeClearIconOverlay();

20. Icon Overlays Presenter Presenter Title Demo

21. Adding Jump List Tasks 20 Windows 7 integration <meta name="msapplication-task" content="name=New Message; action-uri=http://host/NewMail.htm; icon-uri=http://host/mail.ico"/> <meta name="msapplication-task" content="name=New Appointment; action-uri=http://host2/NewAppt.htm; icon-uri=http://host2/Appt.ico"/>

22. Customizing Jump Lists 21 Adding a custom Jump List category window.external.msSiteModeCreateJumplist('Notifications'); window.external. msSiteModeAddJumpListItem( 'Scrum (37 minutes overdue)', 'http://host/reminders.html', 'http://host/images/bell.ico'); window.external. msSiteModeShowJumpList();

23. Adding Jump Lists Presenter Presenter Title Demo

24. Displaying Thumbnail Toolbar Buttons 23 var but1 = window.external.msSiteModeAddThumbBarButton( 'http://host/speaker.ico', 'Mute'); document.addEventListener( 'msthumbnailclick', handler, false); window.external.msSiteModeShowThumbBar();

26. Adding Thumbnail Toolbar Buttons Presenter Presenter Title Demo

27. Internet Explorer 9 Makes Your Web Look and Perform as if it Were Native to Windows Clean Putting the focus on your sites Trusted Secure, reliable, and private Interoperable HTML5 & same markup Fast All around fast using the power of your whole PC Full hardware acceleration of all graphics and text New JavaScript engine Clean web-centric UI Seamless with Windows 7 New tab page experience One Box Quieter notifications Download manager with SmartScreen protection Hang resistance Add-on performance protection HTML 5 and modern web standards support Leading with the W3C Comprehensive standards tests 26

28. Unlock a More Beautiful Web Get Started… http://msdn.com/ie 27

29. Questions

30. Internet Explorer Developer Center on MSDN http://msdn.com/ie Windows User Experience Interaction Guidelines http://msdn.microsoft.com/en-us/library/aa511446.aspx Channel 9 Taskbar related videos http://channel9.msdn.com/tags/Taskbar/ http://channel9.msdn.com/Search/?Term=taskbar Resources 29 Icon Guidelines http://msdn.microsoft.com/en-us/library/aa511280.aspx