Your SlideShare is downloading. ×
0
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Pinned sites in ie9 [beta]
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Pinned sites in ie9 [beta]

508

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
508
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Pinned Sites + Internet Explorer 9
    Presenter Name
    Presenter Title
  • 2. Agenda
    The Web and Windows
    Theater vs. Play
    Who’s Using It Today
    Bringing it all Together
    2
  • 3. The Web and Windows
  • 4. 57% of time on a PC is spent in the web browser
    Web Browsing is Core to the Windows Experience
    4
  • 5. Expectations are Rising for the Web
    The capabilities of the web are increasing every day, but the way we experience the web isn’t keeping up.
    5
  • 6. And What About all Those Apps?
    Immersive
    Fast
    Focused
    Clean
    Consistent
    How does the web become more app like?
    6
  • 7. The Browser is the Theater, not the Play
    7
  • 8. Native Web, through Windows
    Putting the focus on your sites
    Your sites shine
    Seamless with Windows 7
    Smarter address bar
    Streamlined & quieted
    8
  • 9. Pinned Sites
    Presenter
    Presenter Title
    Demo
  • 10. 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 applications
    10
  • 11. A Look At How Pinned Sites Are Being Used Today
    Real World Pinned Sited
  • 12. Let’s Build It!
  • 13. Enhance your Pinned Site
    Getting Started
    Pinned Site mode requires no changes to your site
    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
    Showthumbbar buttons
    Notify users that interaction is needed
    Modify the navigation button colors
    13
  • 14. 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" />
  • 15. 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()
    }
    }
  • 16. 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
    • 17. Recommended: 16x16, 32x32, 48x48
    • 18. Optimal: 16x16, 24x24, 32x32, 64x64
  • Pinned Site Basics
    Presenter
    Presenter Title
    Demo
  • 19. Adding Icon Overlays
    18
    Provide users with notifications or progress updates
    window.external.msSiteModeSetIconOverlay(
    'http://host/star.ico', 'Complete');
    window.external.msSiteModeClearIconOverlay();
  • 20. Icon Overlays
    Presenter
    Presenter Title
    Demo
  • 21. 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"/>
  • 22. 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();
  • 23. Adding Jump Lists
    Presenter
    Presenter Title
    Demo
  • 24. Displaying Thumbnail Toolbar Buttons
    23
    var but1 = window.external.msSiteModeAddThumbBarButton(
    'http://host/speaker.ico', 'Mute');
    document.addEventListener(
    'msthumbnailclick', handler, false);
    window.external.msSiteModeShowThumbBar();
  • 25. Updating Thumbnail Toolbar Buttons
    24
    Changing the Button Properties
    • window.external.msSiteModeUpdateThumbBarButton(buttonID, Enabled, Visible)
    Changing the Button Style
    var style1 = window.external.msSiteModeAddButtonStyle(
    buttonID, IconUrl, ToolTip)
    window.external.msSiteModeShowButtonStyle(buttonID, styleID);
  • 26. Adding Thumbnail Toolbar Buttons
    Presenter
    Presenter Title
    Demo
  • 27. Internet Explorer 9 Makes Your Web Look and Perform as if it Were Native to Windows
    Clean
    Putting the focus on your sites
    Trusted
    Secure, reliable, and private
    Interoperable
    HTML5 & same
    markup
    Fast
    All around fast using the power of your whole PC
    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
    26
  • 28. Unlock a More Beautiful Web
    Get Started…
    http://msdn.com/ie
    27
  • 29. Questions
  • 30. Internet Explorer Developer Center on MSDN
    http://msdn.com/ie
    Windows User Experience Interaction Guidelines
    http://msdn.microsoft.com/en-us/library/aa511446.aspx
    Channel 9 Taskbar related videos
    http://channel9.msdn.com/tags/Taskbar/
    http://channel9.msdn.com/Search/?Term=taskbar
    Resources
    29
    Icon Guidelines
    http://msdn.microsoft.com/en-us/library/aa511280.aspx

×