IE9 for developers

Editor's Notes

• #2: More info: http://msdn.microsoft.com/en-us/ie/dd797411.aspxLink: http://www.beautyoftheweb.com/
• #7: 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.
• #10: 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.
• #13: 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.
• #14: 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.
• #15: 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.
• #16: ---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"/>...
• #17: 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)
• #18: ------------- 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>
• #22: 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