Pinned sites in ie9 [beta]
-
Upload
kirk-yamamoto -
Category
Technology
-
view
531 -
download
6
Transcript of Pinned sites in ie9 [beta]
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.