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.