Pinned sites in ie9 [beta]
Download as PPTX, PDF0 likes340 views
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.
Pinned sites in ie9 [beta]
- 1. Pinned Sites + Internet Explorer 9Presenter NamePresenter Title
- 2. AgendaThe Web and WindowsTheater vs. PlayWho’s Using It TodayBringing it all Together2
- 3. The Web and Windows
- 4. 57% of time on a PC is spent in the web browserWeb Browsing is Core to the Windows Experience4
- 5. Expectations are Rising for the WebThe 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?ImmersiveFastFocusedCleanConsistent How does the web become more app like? 6
- 7. The Browser is the Theater, not the Play7
- 8. Native Web, through WindowsPutting the focus on your sitesYour sites shineSeamless with Windows 7 Smarter address bar Streamlined & quieted8
- 10. Behind The Scenes: Pinned SitesCreates an isolated instance of Internet ExplorerGenerates an AppID for a specific URLBHOs and other toolbars are not enabledShare the same real estate as Windows applications10
- 11. A Look At How Pinned Sites Are Being Used TodayReal World Pinned Sited
- 12. Let’s Build It!
- 13. Enhance your Pinned SiteGetting StartedPinned Site mode requires no changes to your siteProvide custom informationAdd the site as a Pinned Site programmaticallyCustomize the iconDefine Jump List tasksAdd additional Jump List items in a custom listShowthumbbar buttonsNotify users that interaction is neededModify the navigation button colors13
- 14. Customize Your Pinned Site14Use 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 Site15if (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() }}
- 16. Customizing The Icon16Uses existing, same markup to specify the icon to useUses the existing, standards based site favicon<link rel="shortcut icon" href="/favicon.ico" />Best Practice: Icon file should contain
- 17. Recommended: 16x16, 32x32, 48x48
- 18. Optimal: 16x16, 24x24, 32x32, 64x64Pinned Site BasicsPresenterPresenter TitleDemo
- 19. Adding Icon Overlays18Provide users with notifications or progress updateswindow.external.msSiteModeSetIconOverlay('http://host/star.ico', 'Complete');window.external.msSiteModeClearIconOverlay();
- 21. Adding Jump List Tasks20Windows 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 Lists21Adding a custom Jump List categorywindow.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 ListsPresenterPresenter TitleDemo
- 24. Displaying Thumbnail Toolbar Buttons23var but1 = window.external.msSiteModeAddThumbBarButton('http://host/speaker.ico', 'Mute');document.addEventListener('msthumbnailclick', handler, false);window.external.msSiteModeShowThumbBar();
- 25. Updating Thumbnail Toolbar Buttons24Changing the Button Propertieswindow.external.msSiteModeUpdateThumbBarButton(buttonID, Enabled, Visible)Changing the Button Stylevar style1 = window.external.msSiteModeAddButtonStyle(buttonID, IconUrl, ToolTip)window.external.msSiteModeShowButtonStyle(buttonID, styleID);
- 26. Adding Thumbnail Toolbar ButtonsPresenterPresenter TitleDemo
- 27. Internet Explorer 9 Makes Your Web Look and Perform as if it Were Native to Windows CleanPutting the focus on your sitesTrustedSecure, reliable, and privateInteroperableHTML5 & same markupFastAll around fast using the power of your whole PCFull hardware acceleration of all graphics and textNew JavaScript engine Clean web-centric UI Seamless with Windows 7New tab page experienceOne BoxQuieter notificationsDownload manager with SmartScreen protectionHang resistanceAdd-on performance protectionHTML 5 and modern web standards supportLeading with the W3CComprehensive standards tests26
- 28. Unlock a More Beautiful WebGet Started…http://msdn.com/ie27
- 29. Questions
- 30. Internet Explorer Developer Center on MSDNhttp://msdn.com/ie Windows User Experience Interaction Guidelineshttp://msdn.microsoft.com/en-us/library/aa511446.aspxChannel 9 Taskbar related videoshttp://channel9.msdn.com/tags/Taskbar/http://channel9.msdn.com/Search/?Term=taskbarResources29Icon Guidelineshttp://msdn.microsoft.com/en-us/library/aa511280.aspx