Pinned Sites + Internet Explorer 9

Presenter NamePresenter Title

Agenda

The Web and Windows Theater vs. Play

Who’s Using It Today

Bringing it all Together

2

The Web and Windows

57% of time on a PC is spent in the web browser

Web Browsing is Core to the Windows

Experience

4

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

And What About all Those Apps?

Immersive

Fast

Focused

Clean

Consistent

How does the web become more app like?

6

The Browser is the Theater, not the Play

7

Native Web, through WindowsPutting the focus on your sites

Your sites shine

Seamless with Windows 7

Smarter address bar

Streamlined & quieted

8

Pinned SitesPresenterPresenter Title

Demo

Behind The Scenes: Pinned Sites

Creates an isolated instance of Internet Explorer

Generates an AppID for a specific URL

BHOs and other toolbars are not enabled

Share the same real estate as Windows applications10

A Look At How Pinned Sites Are Being Used Today

Real World Pinned Sited

Let’s Build It!

13

Enhance your Pinned Site

Getting Started

Provide custom information

Add the site as a Pinned Site programmatically

Customize the icon

Define Jump List tasks

Add additional Jump List items in a custom list

Show thumbbar buttons

Notify users that interaction is needed

Modify the navigation button colors

Pinned Site mode requires no changes to your site

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

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

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

Pinned Site BasicsPresenterPresenter Title

Demo

Adding Icon Overlays

18

Provide users with notifications or progress updates

window.external.msSiteModeSetIconOverlay( 'http://host/star.ico', 'Complete');

window.external.msSiteModeClearIconOverlay();

Icon OverlaysPresenterPresenter Title

Demo

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

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

Adding Jump ListsPresenterPresenter Title

Demo

Displaying Thumbnail Toolbar Buttons

23

var but1 = window.external.msSiteModeAddThumbBarButton( 'http://host/speaker.ico', 'Mute');

document.addEventListener( 'msthumbnailclick', handler, false);

window.external.msSiteModeShowThumbBar();

Updating Thumbnail Toolbar Buttons

24

Changing the Button Properties window.external.msSiteModeUpdateThumbBarButton(

buttonID, Enabled, Visible)

Changing the Button Stylevar style1 = window.external.msSiteModeAddButtonStyle( buttonID, IconUrl, ToolTip)window.external.msSiteModeShowButtonStyle(buttonID, styleID);

Adding Thumbnail Toolbar ButtonsPresenterPresenter Title

Demo

Internet Explorer 9 Makes Your Web Look and Perform as if it Were Native to Windows

CleanPutting the focus on your sites

TrustedSecure, reliable, and private

InteroperableHTML5 & same markup

Full hardware acceleration of all graphics and text

New JavaScript engine

Clean web-centric UI

Seamless with Windows 7

New tab page experience

One Box

Quieter notifications

Download manager with SmartScreen protection

Hang resistance

Add-on performance protection

HTML 5 and modern web standards support

Leading with the W3C

Comprehensive standards tests

FastAll around fast using the power of your whole PC

26

Unlock a More Beautiful Web

Get Started…http://msdn.com/ie

27

Questions

Resources

29

Internet Explorer Developer Center on MSDNhttp://msdn.com/ie

Windows User Experience Interaction Guidelineshttp://msdn.microsoft.com/en-us/library/aa511446.aspx

Channel 9 Taskbar related videoshttp://channel9.msdn.com/tags/Taskbar/ http://channel9.msdn.com/Search/?Term=taskbar

Icon Guidelineshttp://msdn.microsoft.com/en-us/library/aa511280.aspx

© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Internet Explorer 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.