E N D
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. 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? 6
7. The Browser is the Theater, not the Play 7
8. Native Web, through Windows Putting the focus on your sites 8
9. Pinned Sites Presenter
Presenter Title Demo
10. Behind The Scenes: Pinned Sites 10
11. A Look At How Pinned Sites Are Being Used Today Real World Pinned Sited
12. Let’s Build It!
13. Getting Started 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()
}
}
16. Customizing The Icon 16 Uses existing, same markup to specify the icon to use Uses the existing, standards based site favicon
<link rel="shortcut icon" href="/favicon.ico" />
Best Practice:
Icon file should contain
Recommended: 16x16, 32x32, 48x48
Optimal: 16x16, 24x24, 32x32, 64x64
17. Pinned Site Basics Presenter
Presenter Title Demo
18. Adding Icon Overlays 18 Provide users with notifications or progress updates window.external.msSiteModeSetIconOverlay(
'http://host/star.ico', 'Complete');
window.external.msSiteModeClearIconOverlay();
19. Icon Overlays Presenter
Presenter Title Demo
20. 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"/>
21. 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();
22. Adding Jump Lists Presenter
Presenter Title Demo
23. Displaying Thumbnail Toolbar Buttons 23 var but1 = window.external.msSiteModeAddThumbBarButton(
'http://host/speaker.ico', 'Mute');
document.addEventListener(
'msthumbnailclick', handler, false);
window.external.msSiteModeShowThumbBar();
24. Updating Thumbnail Toolbar Buttons 24 Changing the Button Properties
window.external.msSiteModeUpdateThumbBarButton( buttonID, Enabled, Visible)
Changing the Button Style
var style1 = window.external.msSiteModeAddButtonStyle(
buttonID, IconUrl, ToolTip)
window.external.msSiteModeShowButtonStyle(buttonID, styleID);
25. Adding Thumbnail Toolbar Buttons Presenter
Presenter Title Demo
26. Internet Explorer 9 Makes Your Web Look and Perform as if it Were Native to Windows 26
27. Unlock a More Beautiful Web 27
28. Questions
29. Resources 29