+ All Categories
Home > Technology > Pinned Sites IE 9 Lightup

Pinned Sites IE 9 Lightup

Date post: 13-May-2015
Category:
Upload: wes-yanaga
View: 1,653 times
Download: 2 times
Share this document with a friend
Description:
With just a few lines of code, you can light up your Web application as a Windows 7 application. Pinned sites lets you brand your application. And the code doesn't change other browsers and older versions.
Popular Tags:
30
Pinned Sites, Jump Lists, Notifications IE 9 Light-up Bruce Kyle ISV Advisor | Developer Platform Evangelist | West US Microsoft Corporation
Transcript
Page 1: Pinned Sites IE 9 Lightup

Pinned Sites, Jump Lists, NotificationsIE 9 Light-upBruce KyleISV Advisor | Developer Platform Evangelist | West USMicrosoft Corporation

Page 2: Pinned Sites IE 9 Lightup

Pinned Sites

Seamless Integration with Windows 7

demo

Page 3: Pinned Sites IE 9 Lightup

Pinned Sites Features You Can Use

Page 4: Pinned Sites IE 9 Lightup

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

Page 5: Pinned Sites IE 9 Lightup

Branding

Page 6: Pinned Sites IE 9 Lightup

Branding Your site

Page 7: Pinned Sites IE 9 Lightup

Branding

Page 8: Pinned Sites IE 9 Lightup

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"/>

Page 9: Pinned Sites IE 9 Lightup

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.

Page 10: Pinned Sites IE 9 Lightup

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">

Page 11: Pinned Sites IE 9 Lightup

Icon Sizes

Recommended: 16x16, 32x32, 48x48 Optimal: 16x16, 24x24, 32x32, 64x64

Page 12: Pinned Sites IE 9 Lightup

Jump List Tasks

Page 13: Pinned Sites IE 9 Lightup

Defining Jump List Tasks

Page 14: Pinned Sites IE 9 Lightup

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"/>

Page 15: Pinned Sites IE 9 Lightup

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');

Page 16: Pinned Sites IE 9 Lightup

Dynamic Jump Lists (2)

// 3. Display the listwindow.external.msSiteModeShowJumplist();

// 4. Clear the listwindow.external.msSiteModeClearJumplist();

Page 17: Pinned Sites IE 9 Lightup

Overlay Icons

Page 18: Pinned Sites IE 9 Lightup

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

Page 19: Pinned Sites IE 9 Lightup

Overlay an icon

// Add Overlay iconwindow.external.msSiteModeSetIconOverlay(

'http://host/images/overlay1.ico','Overlay 1');

// Remove Overlay iconwindow.external.msSiteModeClearIconOverlay();

Page 20: Pinned Sites IE 9 Lightup

Thumbnail Preview

Page 21: Pinned Sites IE 9 Lightup

Thumbnail Preview

Page 22: Pinned Sites IE 9 Lightup

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); }

Page 23: Pinned Sites IE 9 Lightup

// Instantiate the button only oncewindow.external.msSiteModeShowThumbBar();

// Set visibilitywindow.external.msSiteModeUpdateThumbBarButton(btn1, false, true);

Page 24: Pinned Sites IE 9 Lightup

Feature Detection

Page 25: Pinned Sites IE 9 Lightup

Feature detection

if (window.external.msIsSiteMode) { // Check if the website was launched // from a pinned site.

if (window.external.msIsSiteMode()) { // TRUE

} else { // FALSE

} }

Page 26: Pinned Sites IE 9 Lightup

All to All ProgramsMenu

Page 27: Pinned Sites IE 9 Lightup

Add to Start Menu

<a onclick="window.external.msAddSiteMode();" href="#">Add Website</a><br />

Page 28: Pinned Sites IE 9 Lightup

Resources

Page 30: Pinned Sites IE 9 Lightup

© 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.


Recommended