Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to IE9 for developers
Similar to IE9 for developers (20)
Recently uploaded
Recently uploaded (20)
IE9 for developers
- 1. IE9 for Developers Shaymaa Al-Terkait Microsoft Kuwait shaymaa@microsoft.com http://ahamshay.com | @ahamshay
- 2. Web Experience Do you want your web experience to feel more like an app?fast, clean, and trusted. Social engagement is also a priority because it means customer’s may visit more often, go deeper, and stay longer.
- 3. Agenda Designing for the Customer Customer Engagement Customer Value Engineering Values Introduction to Pinned Sites Benefits of Pinned Sites The Pinned Site API How to Create a Basic Pinned Site How to Create Dynamic Jump Lists Case Study: Huffington Post - Reinventing the “Big News” Experience with IE9 Pinned Sites
- 4. Designing for the Customer look for simple and high impact features that enhance the site experience and make an immediate difference based on three criteria: Customer Engagement Customer Value Engineering Values
- 5. Customer Engagement Does it reach the customer in a timely and relevant fashion? Is it part of the customer’s everyday workflow? Does it help the customer get to our content faster? Does it take our customer deeper into our web experience?
- 6. Customer Value Would it inspire the customer to stay and interact longer? Will it increase the opportunity for our customer to engage with ads and premium experiences? Is it “cutting edge” and “must have” for the customer? Does it enhance the everyday experience? Does it build loyalty and brand value?
- 7. Engineering Values Is it simple and sustainable from a Development perspective? Does it build on a credible, long-term platform with a mature customer base? Does it sync with our mission and values? Bottom line, it is profitable for use to do this project (“return on code”)?
- 8. 8
- 9. Introduction to Pinned Sites The following graphic shows the taskbar elements in Windows 7:
- 10. Benefits of Pinned Sites Websites that implement the Pinned Site API can feel more like a native Windows application. Site developers can build a more compelling website that have higher engagement by: Declaring a static list of tasks for fast navigation to common destinations within a site. Creating a dynamic list of destinations that are personalized and relevant to the user. Drawing the user back to the website by flashing the taskbar button or displaying a icon overlay. Adding remote controls and commands to the taskbar's preview window. Making the browser look and feel like your site by changing the color of the Back and Forward buttons. Promoting a high-resolution site icon that extends your site's brand outside the browser. Note Pinned site functionality is available in all document modes of Internet Explorer 9. You can add Pinned Site features without converting your site to support the latest version of HTML or CSS.
- 11. The Pinned Site API You implement Pinned Site functionality by using the following two programming models: Static site properties. The first group defines properties that apply to anyone who uses the Pinned Site. This basic functionality is defined by meta elements. Application name Desktop tooltips Site start URL Window size Back and Forward button colors Static Jump List tasks User-specific and dynamic customization. The second group includes features that are implemented with JavaScript, using the Pinned Site APIs. Dynamic Jump List tasks Thumbnail toolbar commands Notifications The scenarios in the topics that follow explain how to add Pinned Site features to your webpage. For an full index of development tasks, see How to Use this Documentation.
- 12. How to Create a Basic Pinned Site To do the following: Set the starting page of the Pinned Site Specify tooltip text that appears when you hover the mouse pointer over the Pinned Site button on the taskbar and desktop Constrain the initial size of the browser window Customize the color of the Back and Forward buttons in the Pinned Site browser window Add static tasks to the Jump List <meta name="application-name" content="Beauty Of The Web" /> <meta name="msapplication-tooltip" content="Start the Beauty Of The Web" /><meta name="msapplication-starturl" content="http://beautyoftheweb.com/" /> <meta name="msapplication-window" content="width=1024;height=768" /><meta name="msapplication-navbutton-color" content="#5f6dbd" />
- 13. How to Create a Basic Pinned Site One more line: That’s it! <meta name="msapplication-navbutton-color" content="#5f6dbd" />
- 14. How to Create Dynamic Jump Lists Jump Lists can contain both static and dynamic items. For example, to add a single task called "Check Order Status" specify a meta element in the head of your webpage, as follows: <meta name="msapplication-task" content="name=Check Order Status; action-uri=./orderStatus.aspx?src=IE9; icon-uri=./favicon.ico" />
- 15. Examples The Bing.com Jump List includes Weather, Finance, and News among others. The Facebook.com Jump List includes News, Messages, Events, and Friends.
- 16. Site Icons in Internet Explorer 9 The easiest way to create a site icon is by using X-Icon Editor. X-Icon Editor is a free application (based on HTML5 Canvas) that allows you to create high resolution icons directly from within the browser. X-Icon Editor creates high-resolution icons in sizes that are suitable for Pinned Sites, as well as the address bar and New Tab page in Internet Explorer 9. X-Icon Editor creates high-resolution icons in multiple sizes. http://go.microsoft.com/fwlink/?LinkId=206680 <link rel="shortcut icon“ href="/favicon.ico" />
- 17. <style type="text/css"> #divPinSite { position: fixed; padding: 5px; color: white; width: 380px; height: 20px; top: 0px; left: 70px; background-color: #c00; border-radius: 0px 0px 10px 10px; font-size: .87em; font-family:Arial, Helvetica, sans-serif; display:none; } #divPinSiteimg { height: 16px; width: 16px; vertical-align: top; float: left; margin-right: 5px; } #divPinSite a { float: left; padding-top: 1em; text-decoration: none; color: black; font-size: smaller; } </style> Prompting Users to Pin Your Site <div id="divPinSite"> <imgsrc="Images/whitearrow.ico" alt=""/> Drag the site icon to the taskbar to pin site <a href="javascript:void(0)" onclick="addSite();"> Or, click here to add to Start menu</a> </div>
- 18. Of course, there is no reason to display the prompt unless the user is browsing with Internet Explorer 9, so the CSS includes "display:none" to initially hide the div element from view. The following script runs as the page loads to determine whether to show the prompt: window.onload = function() { try { if (window.external.msIsSiteMode()) { // Continue intialization } else { document.getElementById('divPinSite').style.display = "block"; } } catch (e) { // Fail silently. Pinned Site API not supported. } }
- 20. So, what should you do next? Step 1: Your Website’s Look and Feel Step 2: Let Your Users Know Step 3: Your Website on Every Taskbar Step 4: Bring Them Back Again and Again! Step 5: Go Deeper with Jump Lists
- 22. Increased user engagement through notification, pulling users back into their “Big News”
Editor's Notes
- More info: http://msdn.microsoft.com/en-us/ie/dd797411.aspxLink: http://www.beautyoftheweb.com/
- And that brings us to today. We heard from you wanted more transparency around the builds as we’re delivering them and that’s been why we’ve been shipping the Platform Previews, providing an early, and frequently updated look at what we’re working on. We’re now on our sixth Platform Preview release, and we’ve achieved our commitment up providing updates about every 8 weeks. The Platform Previews install side by side with your current Internet Explorer installation, and aren’t meant for day to day browsing, but as a place to play and experiment. That’s why you don’t see an address bar, or back or forward button.
- Taskbar buttonWhen you click a Pinned Site button on the taskbar, the website launches in a new browser window that has been customized specifically for the site. The site icon is visible on the taskbar button.Overlay iconsA 16x16 pixel notification icon that appears on top of the normal site icon. This notification indicates that something has changed in the website, such as new mail arriving, receiving a chat request, or being outbid in an auction. The notification is visible only when the site is running.Jump ListThe Jump List can contain static and dynamic tasks that act as shortcuts into the Pinned Site. A user can further customize their experience by pinning these items to the Jump List.Jump List categoryA Pinned Site can create and fill a single custom Jump List category by using script in the webpage. This list is dynamic.Jump List tasksIn addition to the Jump List category, a Pinned Site can predefine a list of tasks in metadata. This list is static.Thumbnail toolbarA Pinned Site can create up to seven buttons that appear on the taskbar thumbnail window. These buttons can be visible or hidden, active or inactive, or toggle between different button states.At the very least, Pinned Sites should define a list of tasks for the most frequently used features of the website. Beyond that, site developers can create a custom Jump List category for additional tasks and user-specific destinations. More advanced sites can provide icon overlays to notify you about the status of a website, such as the number of new messages in your Inbox. Finally, some sites might also benefit from remote controls on the thumbnail toolbar.
- Metadata for InstallationThe following meta elements control how the Pinned Site shortcut is created on the Start menu and on the Windows 7 taskbar. All these elements are optional, but highly recommended.The installation metadata elements are used only when the user pins the site. After that, changes to these values do not have any effect on the Pinned Site. Because of this, the following meta elements are sometimes called "install-time" values:application-namemsapplication-tooltipmsapplication-starturlmsapplication-windowNote Windows Internet Explorer 9 reads the rest of the metadata from the start URL of the Pinned Site when the site is launched.Using the Pinned Site features of Windows Internet Explorer 9, you can improve how users interact with the sites that you develop. However, make sure that you consider how your users will discover those features. You also learn some best practices to help promote the functionality to users of your website.The "application-name" metadata defines the name of the Pinned Site application instance. This is the name that appears in a tooltip when hovering over the Pinned Site button on the Windows 7 taskbar. The application name is also appended to the window title of the Pinned Site application instance. If this element is missing, the document title is used instead.The "msapplication-tooltip" metadata provides additional tooltip text that appears when you hover over the Pinned Site shortcut in the Windows Start menu or on the desktop.The "msapplication-starturl" metadata contains the root URL of the application. The start URL can be fully qualified, or relative to the current document. Only HTTP and HTTPS protocols are allowed. If this element is missing, the address of the current page is used instead. The "msapplication-starturl" metadata creates a common entry point to your website. When present, the Pinned Site launches the start URL instead of the page that was originally dragged to the taskbar. More importantly, run-time metadata declared in the start page redefines the navigation button color and static Jump List tasks each time the site is launched. (For more information, see the Run-time Metadata section.)As an example of how "msapplication-starturl" might be used, consider a site that offers multiple types of calculator emulators: one with a standard layout, one a scientific layout, and one that has statistics functions. Without a start URL, the user might pin only the scientific calculator to the taskbar and never have an easy way to access the other calculators in the collection. By adding a start URL, the site developer can declare a common entry point for the site.By adding install-time metadata to the emulator pages, the site developer controls how users access the site. Then, by adding Jump List metadata in the start page, the site developer can more easily control how users select the style of calculator they want to use. For more information, see Adding Tasks to a Jump List.The "msapplication-window" metadata sets the initial size of the Pinned Site window when it is launched for the first time. However, if the user adjusts the size of the window, the Pinned Site retains the new dimensions when it is launched again.
- Run-time MetadataUnlike the install-time values, the following metadata are read each time the user launches the Pinned Site. Because of that, site developers can use these values to modify the user experience over time. The best way to control changes to these values is to define them in the start URL of the Pinned Site.msapplication-navbutton-colormsapplication-taskmsapplication-task-separatorNote These elements are also optional.The "msapplication-navbutton-color" metadata define the custom color of the Back and Forward buttons in the Pinned Site browser window. Any named color, or hex color value is valid. For a complete list of color names, see Color Table.If this meta element is absent, the default color is based on the color palette of the site icon (or, favicon). To learn how to select a custom icon for your site, see Customizing the Site Icon.Like the other site metadata, you define static tasks with meta elements. The next task, Adding Tasks to a Jump List, explains how to do this.Place this element between tasks to place a visible line in the Jump List menu. The separators must be made unique by declaring content="[unique value]" if you have more than one.
- What is a Task?While a destination is a thing, a task is an action, and in this case it is a site-specific action. Put another way, a destination is a noun and a task is a verb. In the context of a Pinned Site, a task can be any common navigation or site functionality.Some tasks are static, meaning that they are set when the site is pinned. Others, like notifications and user-specific tasks, are dynamic and change over time.Static tasks are defined using meta tags. These properties apply to any one using the site when it is pinned and appear in the category named Tasks. This category can contain up to five items. The items in this list tend to remain the same regardless of the state or status of the application. This topic explains how to add static tasks.Dynamic tasks are defined using JavaScript APIs. These tasks typically surface information that is specific to an individual user and appear in a Jump List category that you create. This custom category can contain up to 20 items, although only the last 10 items appear in the Jump List by default. For more information, see How to Create Dynamic Jump Lists.A Pinned Site can only have one static list and one dynamic list at a time. For example, the following Jump List from Amazon.com contains both kinds of tasks.In general, relative paths are easier to maintain than fully qualified URIs. You can add any URL parameters that you require, even those that help you track IE9 usage (see the URL parameter named src in the preceding example). The action-uri part does not allow you to use a semicolon.The tasks in the Jump List appear in the same order as they are defined in the HTML source.
- ---Channel9:<meta name="msapplication-task" content="name=Msdn Flash Podcasts; action-uri=./?topic=msdnFlash; icon-uri=Images/channel9_logo.ico" /><meta name="msapplication-task" content="name=IE Podcasts; action-uri=./?topic=connectedShow; icon-uri=Images/channel9_logo.ico" /><meta name="msapplication-task" content="name=Other Podcasts; action-uri=./?topic=other; icon-uri=Images/channel9_logo.ico" /><meta name="msapplication-task" content="name=All Podcasts; action-uri=./; icon-uri=Images/channel9_logo.ico" />---Bing:<meta content="Bing" name="application-name" /><meta content="Bing" name="msapplication-tooltip" /><meta content="width=1024;height=768" name="msapplication-window" /><meta content="/" name="msapplication-starturl" /><meta content="name=Weather; action-uri=/weather/?FORM=IE0006; icon-uri=/fd/s/a/sm_weather.ico" name="msapplication-task" />...---Facebook:<meta name="application-name" content="Facebook"/><meta name="msapplication-tooltip" content="Start the Facebook App"/><meta name="msapplication-starturl" content="/"/><meta name="msapplication-window" content="width=800;height=600"/><meta name="msapplication-task" content="name=News; action-uri=/home.php?sk=nf; icon-uri=/images/icons/app/news.ico"/>...
- A site icon typically appears in the browser's address bar and on the History and Favorites list. Site icons replace the standard Windows Internet Explorer shortcut icon for Internet shortcuts. In Internet Explorer 9, the site icon is also used as the primary way to identify and differentiate a site on the Windows 7 taskbar and on the New Tab page.A single .ICO file can contain multiple images of different resolutions. In earlier versions of Internet Explorer, the recommended size of a site icon was 16x16 or 32x32 pixels. However, due to the increased resolution of display devices and larger icons on the desktop, a site icon can appear up to 64x64 pixels or more.Internet Explorer 9 uses site icons in the following places:Address bar (16x16)New Tab page (32x32)Taskbar button (32x32)Pinned site browser UI (24x24)As you create your Pinned Site, you might need additional icons to use in the following ways:Jump List tasks (16x16)thumbnail toolbar buttons (16x16)Overlay icons (16x16)
- ------------- HTML ------------<div id="divPinSite"> <imgsrc="Images/whitearrow.ico" alt=""/> Drag the site icon to the taskbar to pin site <a href="javascript:void(0)" onclick="addSite();"> Or, click here to add to Start menu</a></div>------------- CSS ------------<style type="text/css">#divPinSite{ position: fixed; padding: 5px; color: white; width: 380px; height: 20px; top: 0px; left: 70px; background-color: #c00; border-radius: 0px 0px 10px 10px; font-size: .87em;font-family:Arial, Helvetica, sans-serif;display:none;}#divPinSiteimg{ height: 16px; width: 16px; vertical-align: top; float: left; margin-right: 5px;}#divPinSite a{ float: left; padding-top: 1em; text-decoration: none; color: black; font-size: smaller;}</style>
- Case Study: Huffington Post - Reinventing the “Big News” Experience with IE9 Pinned Sites http://msdn.microsoft.com/en-us/ie/gg558109.aspxStep 1: HuffPost Look and Feel – HuffPost defined the navigation button colors, home page, window size, and tool tips using pinned site metadata. The browser does the rest of the work. A user accessing their favorite news section in HuffPost gets its own unique character.Step 2: Let Your Users Know – HuffPost wants every IE9 user to pin their site. So they check when users have not pinned and prompt them to drag the tab to pin. They did this with just 15 lines of code. Users can now drag the tab to the Taskbar and start the Pinned Site experience.Step 3: HuffPost on Every Taskbar – HuffPost wanted a brand experience that looked “clean and shiny” like an everyday part of their user’s experience. They designed 5 Favicons in X-Icon Editor with the branded colors of each news section (Breaking News, Politics, Business, Media, and Entertainment). Now a user can pin their favorite from the HuffPost directly to their Taskbar and jump directly into the experience with one click.Step 4: Bring Them Back Again and Again! –News changes by the minute. When “Big News” hits, users want to know and HuffPost wants to bring users back to their site. Notification features including Custom Icon Overlay and Toolbar Flash grab the user’s attention directly on the Taskbar.Step 5: Go Deeper with Jump Lists – HuffPost wants users to easily discover and dive into new site content. They do this using Dynamic Jump Lists which contain “hot” keywords like celebrity names, political opinion, or entertainment buzz. Each is personalized by news section and changes every 15 minutes. Users can quickly access the Jump List by right-clicking the Pinned Site.Case Study: Huffington Post - Reinventing the “Big News” Experience with IE9 Pinned Sites http://msdn.microsoft.com/en-us/ie/gg558109.aspxCreating a First-run ExperienceThis topic describes how you can detect when a Pinned Site is launched by the user for the first time. Providing a first-run experience allows you to call attention to features of your Pinned Site. http://msdn.microsoft.com/en-us/library/gg618530(v=VS.85).aspx