Subscribing to Content with Web Slices
.gif)
Today, many Web sites provide content updates through Really Simple Syndication (RSS) news feeds. This requires a Web site to duplicate some content as a special XML file, called a feed, that a news reader application can download and check for updates. In contrast, a Web Slice enables users to subscribe to content directly within a Web page; a separate feed file is not required. Users monitor content changes and view the updated portion of the Web page directly from the Favorites bar (the improved Links toolbar) of Internet Explorer.
This article is organized into the following sections:
Key Points
- A Web Slice uses simple HTML markup to represent a clipping of a Web page. When a user subscribes to a Web Slice, a portion of the Web page is added to the Favorites bar.
- The Web Slice or the user can specify how frequently Internet Explorer will check for updates from the Web server. The smallest update interval is 15 minutes.
- To detect a Web Slice on a Web page, Internet Explorer scans for elements that are of class
hslice, have an id property, and contain at least one child element with an entry-title class name. - All elements marked as
entry-content are combined and shown in the Web Slice preview window when the Web Slice button is clicked. To access the full Web page, click the Open button .gif)
in the preview window. - The Web page's author can control how Web Slices are discovered and the order of their appearance on the Feed Discovery button.
.gif)
What is a Web Slice?
The Web Slice is based on the hAtom Microformat .gif)
, with a few additional properties. The Web Slice itself uses simple, semantic HTML markup to represent a portion of Web page that can be subscribed to. Annotations can be applied directly to content within the HTML page; additional files can be used for optimization, but are optional.
A Web Slice has four major features:
Discovery
Note For Internet Explorer to detect a Web Slice, the Web page must be served from a Web server.
Typically, users discover a Web Slice by moving the mouse pointer over it; this is called in-document discovery.
.gif)
Figure 1: A shortcut button appears when the mouse pointer is moved over a Web Slice.
Each Web Slice that Internet Explorer detects is added as an entry to the Feed Discovery button , located on the Command bar. Although a Web page can include up to 100 Web Slices, only 20 entries can appear at one time on the Feed Discovery button. You can customize which Web Slice appears at the top of the list by Setting the Default Web Slice.
.gif)
Figure 2: The Feed Discovery button also detects Web Slices.
In-document discovery only applies to Web Slices in the topmost document. Discovery and subscription of Web Slices is disabled for documents within a frameset; however, publishers may provide their own interface for subscribing. For more information, see Customizing the User Experience.
If a user subscribes to a Web Slice, Internet Explorer adds it to the Favorites bar.
Update
To be notified of updates, a user must first add a Web Slice to the Favorites bar. Upon subscription, the Feed Download Engine will periodically update the Web Slice using information from from the Web site. If Internet Explorer detects a change, it will notify the user by making the text of the Web Slice button bold.
By default, Internet Explorer uses the suggested update interval specified by the Web Slice publisher in the ttl property element, if such element exists; otherwise, updates follow the default feed interval, normally every 24 hours. Users can either adjust the update frequency inside the Web Slice Properties dialog box, or update the cached Web Slice at any time by clicking the Refresh button .gif)
in the preview window.
Preview
To view a Web Slice, click its button on the Favorites bar. The preview window, also called the flyout, displays the locally cached content of the Web Slice, or an Alternative Display Source, if one has been defined by the publisher.
Note When testing Web Slices on an intranet, you might need to disable Compatibility View to ensure that the Web Slice is rendered as it will appear on the Web. To do this, open the Page menu, click Compatibility View Settings, and clear the Display Intranet Sites in Compatibility View option button.
Navigation
To quickly access the full Web page, click the Open button in the preview window. By default, Internet Explorer returns to where a particular Web Slice was discovered; the publisher can modify this behavior through the bookmark property.
The remainder of this article provides more details about these four features.
Discovering Web Slices
To detect a Web Slice on a Web page, Internet Explorer scans for elements that have certain class names and attributes.
The following properties are required:
hslice property
The hslice element describes a section of a Web page to which the browser can subscribe. The hslice element contains all of the required and optional properties of a Web Slice.
<div class="hslice" id="score">
In contrast to traditional style classes, Web Slice class names do not require a CSS rule in the style sheet. Using a space-delimited list, you can combine Web Slice class names with those of other classes.
<div class="hslice forecast" id="weather">
id property
In a manner similar to how a named anchor is used, the id attribute is used to identify the Web Slice in a URL. The id attribute must be present on the same element that uses the hslice class.
The id must be unique: if two or more Web Slices on a Web page have the same id value, Internet Explorer will only recognize the first one. If the id value changes, Internet Explorer will no longer be able to identify the Web Slice.
entry-title property
At least one child of hslice must use the entry-title class name. The value of this property maps to the Web Slice button text and the advertised name on the Feed Discovery button.
<div class="hslice" id="main"> <h2 class="entry-title">Seattle Weather</h2> ...</div>
It is possible to combine multiple text spans to create a dynamic title that is updated with the Web Slice. The entry-title class can be applied to more than one element; Internet Explorer will concatenate the values in the order in which they appear in HTML.
In the following example, Internet Explorer displays "Seattle Weather 62°" when the Web Slice is updated.
<div class="hslice" id="main"> <h2 class="entry-title">Seattle Weather</h2> <p>It is currently <span class="entry-title">62°</span>.</p></div>
Web Slice titles are limited to 128 characters.
Controlling Updates and Notification
To check for updates, Internet Explorer compares the Web Slice against the cached version. The Windows RSS Platform updates feeds and Web Slices on a regular basis: by default, every 24 hours. However, if the Web Slice includes a ttl property, the Feed Download Engine will use the specified value to adjust its update schedule. The frequency can also be adjusted in the Web Slice Properties dialog box.
The following Web Slice elements are used to control the duration and frequency of update checks:
ttl property
The time to live (TTL) value is the number of minutes during which a Web Slice is considered to be up to date. Unless the user has changed the update interval, the Feed Download Engine will consider this value to be the suggested update frequency. For more information, see Understanding the Feed Download Engine and FSS_SUGGESTED.
<p>Updates occur every <span class="ttl">60</span> minutes.</p>
Alternatively, an abbr object with a title attribute can be used to define the TTL. Using this method, the inner text of the object can be applied towards creating a user-friendly representation of time, as shown in the following example:
<p>Updates occur every <abbr class="ttl" title="60">hour</abbr>.</p>
The minimum interval used by Internet Explorer to check for updates is 15 minutes.
endtime property
Expiration time for a Web Slice. The date and time is specified in the title attribute, leaving the inner text of the element for a user-friendly representation of time, if needed.
<abbr class="endtime" title="2008-07-25T17:30:00-07:00">(friendly date format)</abbr>
Time values can be expressed using the ISO 8601 international standard for Date and Time on the Internet: Timestamps (RFC3339) . The date-and-time string follows the common format: YYYY-MM-DDThh:mm:ss[Z|(+|-)hh:mm].
- YYYY - 4-digit year
- MM - month, 01 through 12
- DD - day, 01 through 31
- "T" - date and time separator
- hh - hour, 00 through 23
- mm - minute, 00 through 59
- ss - second, 00 through 59 (optional)
- One of the following:
-
- "Z" - UTC/GMT ("zero")
- ("+"|"-")hh:mm - hour and minute of time zone offset
Note that the time zone offset is the actual time difference from UTC and does not automatically account for daylight saving time. For example, the time zone offset for Seattle is "-08:00" in the winter (Pacific Standard Time) and "-07:00" in the summer (Pacific Daylight Time). For best results, convert local time values to UTC.
You can also use the RFC822 date format (with 4-digit years) to include information about daylight saving time. The following encodes the same time as the preceding ISO 8601 example.
<abbr class="endtime" title="25 Jul 2008 17:30:00 PST">(friendly date format)</abbr>
Alternative Update Source
When a user subscribes to a basic Web Slice, Internet Explorer returns to the Web page to check for updates.
.gif)
Figure 3: Basic Web Slice handles both discovery and update.
Returning to the original Web page to update a single Web Slice might be inefficient, especially if the Web page is large. For better control of network use, a Web Slice can declare an alternative source for updates.
a rel=feedurl
Any Web Slice link that specifies a rel attribute of feedurl is treated as an alternative update source. When an alternative source is present, Internet Explorer will subscribe to the alternative source and no longer use the original Web page content to update the Web Slice.
.gif)
Figure 4: Specifying an alternative source for Web Slice updates.
In the figure above, the two Web pages represent the same Web Slice. The user discovers and subscribes to the Web Slice on the original Web page, Basic.html. However, the source of the Web Slice indicates that an alternative update source should be used, as shown in the following example:
<div class="hslice" id="auction"> <span class="entry-title">Auction Item</span> <a rel="feedurl" href="update.html#auction-update" style="display:none;"></a></div>
Although an empty link is not visible to users, it creates an extra tab stop and will be read by screen readers. To provide a good user experience, it is best to suppress the display of alternative links, so that users do not accidentally navigate to these Web pages.
Update.html is a simplified Web page that represents just the basic Web Slice. Internet Explorer uses this Web page to get updates and notify users.
<div class="hslice" id="auction-update"> <h2 class="entry-title">Auction Item</h2> <p class="entry-content">Current bid is $66</p></div>
The alternative update source might also point to a short RSS or an Atom feed that has only one item. Note that an optional expiration time can be specified using the mon namespace and mon:endtime element, as shown in the following example:
<?xml version="1.0"?><rss version="2.0" xmlns:mon="http://www.microsoft.com/schemas/rss/monitoring/2007"> <channel> <title>Auction Item</title> <link>http://www.example.com</link> <ttl>15</ttl> <mon:endtime>2008-12-06T01:00:00Z</mon:endtime> <item> <title>Nintendo DS System = $66.00</title> <link>http://www.example.com/auction.aspx#slice</link> <description> ... </description> </item> </channel></rss>
Previewing in the Favorites Bar
The following property is optional but highly recommended.
entry-content property
This property defines that part of a Web Slice which Internet Explorer brings to the Favorites bar. When the Web Slice button is clicked, the entire entry-content element is displayed in the Web Slice preview window. The default width and height of the preview window are determined by the size of the container designated as entry-content. Like the entry-title property, a Web Slice can include more than one entry-content, and all elements are combined to create a single preview.
For security reasons, the Web Slice preview does not allow script or Microsoft ActiveX controls; consequently, HTML forms and buttons are not supported. Instead, to perform related actions, you can provide links that include URL parameters. (Navigation occurs within the currently selected tab.) If additional functionality is required, use an Alternative Display Source.
Applying Styles
The following style sources are used to create the Web Slice preview:
- The inline styles of the
entry-content property and its children - Style rules defined in the head of the original Web page
- Imported and linked style sheets
Styles from parent elements are not inherited by the Web Slice preview. In the following example, the Web Slice preview does not display blue text, because the style is applied to the hslice instead of the entry-content element.
<div class="hslice" id="main" style="color:blue"> <h2 class="entry-title">Seattle Weather</h2> <p class="entry-content">It is raining.</p></div>
To affect the HTML preview, apply the style to the entry-content element itself:
<div class="hslice" id="main"> <h2 class="entry-title">Seattle Weather</h2> <p class="entry-content" style="color:blue">It is raining.</p></div>
Internet Explorer wraps the entry-content in a body element when rendering the preview. This guarantees that style rules applied to the body element of a Web page are also applied to the body of the Web Slice preview. To apply a body style that is not inherited by the preview, use a class name or id to differentiate the body of the original Web page; then, write specific style rules for that element. In the following example, the green background applies to the original Web page but not to the preview.
<style type="text/css"> .MyBody { background-color: green; }</style><body class="MyBody"> <div class="hslice" id="main"> <h2 class="entry-title">Seattle Weather</h2> <p class="entry-content">It is raining.</p> </div><body> The preceding style guidance only applies to Web Slices extracted from the main Web page. An Alternative Display Source has full control over the style of the Web Slice preview.
Alternative Display Source
Clicking a Web Slice button on the Favorites bar will generate a preview of the cached value of the entry-content element. Because the Windows RSS Platform is used for storage, active content such as script or ActiveX controls is removed. To host interactive Web content in a Web Slice preview, an alternative display source must be used.
.gif)
Figure 5: Specifying an alternative display source.
a rel=entry-content
The alternative display is specified by changing the entry-content element to a link that has the following attributes:
- href: Location of the alternative display Web page.
- rel: The value must be
entry-content.
<div class="hslice" id="auction"> <span class="entry-title">Auction Item</span> <a rel="entry-content" href="display.html" style="display:none;"></a></div>
When a user opens the Web Slice preview window, it will navigate to Display.html; the cached copy of entry-content is not used. The alternative display source preview should be small enough to fit into a 320-by-240 (WH) space, on a 96-dots per inch (dpi) screen. The preview window does not automatically resize to the dimensions of the Web Slice, if a different size is used.
The following are not supported in an Alternative Display Source preview:
When using an alternative display source, all hyperlinks in a Web Slice preview will navigate within the preview window. For links to open in the current tab, specify that they be opened in a new window, as shown in the following example:
<a href="gotosite.html" target="_blank">view full site</a>
For the server, consider using the no-cache HTTP header response for the Web page that acts as the Alternative Display Source. This will ensure that users previewing a Web Slice will see the most recent content.
Using Both Alternative Update and Display Source
It is also possible to combine alternative update with an alternative display.
.gif)
Figure 6: Using both alternative update and display source.
For this scenario to work, the code for Basic.html only needs to include the alternative update source, as shown in the following example:
<div class="hslice" id="auction"> <span class="entry-title">Auction Item - Alternative Update</span> <a rel="feedurl" href="update.html#auction-update" style="display:none;"></a></div>
Update.html will then provide information about the alternative display source:
<div class="hslice" id="auction-update"> <h2 class="entry-title">Auction Item - Alternative Display</h2> <div class="entry-content">Current bid is $66</div> <a rel="entry-content" href="display.html" style="display:none;"></a></div>
Navigating to a Different Web Page
When you click the Open button on the Web Slice flyout, Internet Explorer normally navigates to the Web page where the Web Slice was first found or, alternatively, to the the Alternative Update Source if one was specified. The publisher can also modify this behavior by specifying another location altogether, using the bookmark property.
bookmark property
The bookmark property causes the Open button to navigate to the specified location when clicked. The following example opens Location.html.
<div class="hslice" id="auction"> <h2 class="entry-title">Auction Item</h2> <a rel="bookmark" href="Location.html" style="display:none;"></a></div>
Customizing the User Experience
The following advanced techniques help you customize how users interact with the Web Slices on your Web site.
Using the Web Slice Icon
.gif)
The Web Slice icon is intended to provide a common visual cue that a Web site includes Web Slice functionality, which makes content from the Web site available for subscription. It must be used in accordance with the Web Slice Icon Guidelines. Developers can download .png and .gif renderings of the Web Slice icon in various sizes.
Setting the Default Web Slice
The Feed Discovery button lists each Web Slice in the order it was parsed from the document by Internet Explorer. A publisher can choose which Web Slice is presented first, thus promoting one particular Web Slice to represent the whole Web page. For example, a bookseller might mark up a list of top sellers, as well as book reviews on the same Web page. It might make sense for the bookseller to promote the top-seller Web Slice as the default, because that facilitates the financial goals of the Web site whereas book reviews merely increase readership.
To specify the default Web Slice, add a link element in the head of the document:
<link rel="default-slice" type="application/x-hatom" href="#auction" />
The link element requires the following attributes:
- rel: The value must be
default-slice. - type: The value must be
application/x-hatom. - href: The #id of the Web Slice within the current document.
If the default Web Slice is not found within the current document, the link is ignored.
Disabling In-Document Discovery
To disable in-document Web Slice discovery for all Web pages, in the Internet Options dialog box, click the Content tab, then click the Settings button for feeds, and then clear the Turn on in page Web Slice discovery check box. Web developer can disable in-document discovery for the current Web page by adding the following meta element to the head of the document (all values are case-insensitive):
<meta name="slice" scheme="IE" content="off"/>
If in-document discovery is disabled, the Feed Discovery button will still indicate that the Web page includes a Web Slice, but the Web page must provide its own UI for discovering and installing it. To prompt users for installation, call window.external.AddToFavoritesBar().
Creating Dynamic Web Slices
Although Web Slices work well with static content that can be downloaded to be viewed at a later time, creating a Web Slice for content that changes in response to form data, Asynchronous JavaScript and XML (AJAX), or user interaction is more difficult. For example, a Web Slice might offer movie listings for all theaters within a few miles of the user's location. Or, a Web Slice might offer a list of newly released books that match a user's search criteria. To update Web Slices like these, Internet Explorer would have to recreate the conditions that generated them.
If you dynamically create or update a Web Slice after the document has loaded, you must provide an Alternative Update Source and/or Alternative Display Source to handle the preview. Pass URL parameters to the external resource so that it can generate a response based on the user's input. Finally, after updating or inserting a Web Slice, call window.external.ContentDiscoveryReset() to refresh the list of Web Slices and feeds on the Feed Discovery button.
Authenticating the User
If your Web site requires user authentication, consider providing a way for the user to save login credentials in a cookie that can be used to identify the user after the browser is closed. Although user name and password settings are available in the Web Slice Properties dialog box, they are only used for HTTPS+Basic and HTTP/HTTPS+Digest authentication. Cookie-based authentication is more broadly supported, and will work regardless of the security settings of the Web Slice.
Note HTTP-based authentication is not supported for Web Slices that use an alternative update and/or display source. For these scenarios, use cookie-based authentication.
Because some users will choose not to persist their personal information, your Web Slice should explain how to log into your site if authentication was unsuccessful. If you use an Alternative Update Source, then return a single item feed that contains this information in the item's description.
Related Topics
Subscribe