Pinned Sites, Jump Lists, Notifications IE 9 Light-up Bruce Kyle ISV Advisor | Developer Platform Evangelist | West US Microsoft Corporation
May 13, 2015
Pinned Sites, Jump Lists, NotificationsIE 9 Light-upBruce KyleISV Advisor | Developer Platform Evangelist | West USMicrosoft Corporation
Pinned Sites
Seamless Integration with Windows 7
demo
Pinned Sites Features You Can Use
Agenda
Seamless with Windows 7BrandingAdding a Website to the Start Menu (All Programs Menu) Jump List TasksOverlay Icons Displaying Thumbnail Toolbar ButtonsDetecting Features Add Site to All Programs Menu
Resources
Branding
Branding Your site
Branding
Customizing a website launched from a pinned site<meta name="application-name" content="Sample Site Mode Application"/><meta name="msapplication-tooltip" content="Start the page in Site Mode"/><meta name="msapplication-starturl" content="http://example.com/start.html"/><meta name="msapplication-window" content="width=800;height=600"/><meta name="msapplication-navbutton-color" content="red"/>
Customizing a website launched from a pinned Site<meta name="name" content="content"/>Name Content
application-name The name of the shortcut. If missing, the document title is used instead.
msapplication-tooltipOptional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop.
msapplication-starturl The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed.
msapplication-navbutton-color
The color of the Back and Forward buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see Color Table. If this meta element is absent, the color is based on the shortcut icon.
msapplication-window
•The initial size of the pinned site browser window. Content sub-elements provide size as number N, separated by a semicolon. width=N (minimum 800) •height=N (minimum 600) Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance.
Customizing a website launched from a pinned site<LINK rel="shortcut icon" type=image/x-icon href="http://host/favicon.ico"><LINK rel=icon type=image/ico href="./favicon.ico">
Icon Sizes
Recommended: 16x16, 32x32, 48x48 Optimal: 16x16, 24x24, 32x32, 64x64
Jump List Tasks
Defining Jump List Tasks
Jump List Tasks
<META name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico"/><META name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico"/>
Dynamic Jump Lists (1)
// 1. Create the categorywindow.external.msSiteModeCreateJumplist(
'List1');
// 2. Create the itemswindow.external.msSiteModeAddJumpListItem(
'Item 1', 'http://host/Item1.html', 'http://host/images/item1.ico'); window.external.msSiteModeAddJumpListItem(
'Item 2', 'http://host/Item2.html', 'http://host/images/item2.ico');
Dynamic Jump Lists (2)
// 3. Display the listwindow.external.msSiteModeShowJumplist();
// 4. Clear the listwindow.external.msSiteModeClearJumplist();
Overlay Icons
Overlay Icon
Communicate notifications and status to usersUse overlay icons to supply important, long-standing status or notifications such as network status, online status, or new mail. Draw attention to a website when the view to the pinned site’s window is blockedDisplays overlay in right corner
Overlay an icon
// Add Overlay iconwindow.external.msSiteModeSetIconOverlay(
'http://host/images/overlay1.ico','Overlay 1');
// Remove Overlay iconwindow.external.msSiteModeClearIconOverlay();
Thumbnail Preview
Thumbnail Preview
Thumbnail Button
btn1 = window.external.msSiteModeAddThumbBarButton(
'http://host/images/button1.ico', 'button 1');
// Capture the eventdocument.addEventListener('msthumbnailclick', handler1, false);
function handler1 (btn) { alert ("addeventlist:thumbnail btn id" + btn.buttonID); }
// Instantiate the button only oncewindow.external.msSiteModeShowThumbBar();
// Set visibilitywindow.external.msSiteModeUpdateThumbBarButton(btn1, false, true);
Feature Detection
Feature detection
if (window.external.msIsSiteMode) { // Check if the website was launched // from a pinned site.
if (window.external.msIsSiteMode()) { // TRUE
} else { // FALSE
} }
All to All ProgramsMenu
Add to Start Menu
<a onclick="window.external.msAddSiteMode();" href="#">Add Website</a><br />
Resources
Resources
Pinned Sites: Windows 7 Desktop Integration with Internet Explorer 9
MSDEV Video: How Do I: Create an Internet Explorer 9 Pinned Site in Windows 7
Internet Explorer Developer Center: Pinned Sites
Pinned Sites Developer Documentation
© 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to
be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.