Users want to be informed of updates to their favorite web sites even when they aren't running them in a browser window. They remain connected to their content while browsing other sites with mashups, receive updates from rich Internet applications (RIAs) on their desktop, and even remain in touch when on the road with mobile applications from their favorite content providers.
Web Slices provide a simple way for users to stay connected with content delivered from your web site. They provide an even richer take on traditional RSS feeds, letting you provide portable morsels of site content to users, and requiring no invasive change to site architecture. Beyond this, Web Slices offer an easy install experience, an easy-to-understand user experience, cheap development using standards-based technologies, stable and reliable behavior in the browser, and free advertisement through the Internet Explorer Add-Ons Gallery (www.ieaddons.com).
This chapter demonstrates how to construct Web Slices and how they can easily integrate into new and existing web applications. I'll begin by presenting some basic information about how Web Slices work and how users interact with and use them. I'll follow with tutorials on the structure and makeup of the Web Slice microformat and the process of including them on your web site. The chapter concludes with a deep dive into more advanced topics, such as authentication and alternative sources.
Web Slices are rich, interactive, dynamic morsels of content that provide constant updates of site content without requiring that the user directly visit that site. Much like feeds, Web Slices are a form of content syndication that gives applications (in this case, the web browser) the ability to be informed of changes and update a cache of selected content.
Web Slices are subsections (slices) of web pages; they use and display markup much like their parent document. Figure 8-1 shows an example of a Web Slice from OneRiot called TopVideos. The slice displays the most relevant information in the Top Videos portion of their site in a consumable and easy-to-update manner.
Web Slices are advertised by a special green icon on web pages and in the browser frame. This icon can also be used by web developers on pages that use this technology, much like the ubiquitous orange RSS 2.0 icon. Figure 8-2 shows this icon.
Figure 8-3 highlights this icon in action. On this web page, a user is presented with a Web Slice that is available for installation. The installation can be initiated either on the page through a mouse click on the icon or through the icon in the IE browser frame (in the same place as the RSS icon).
Installation is one of four main events in the Web Slice usage flow. Web Slices are updated by IE and the Windows RSS Platform on a consistent cadence. IE manages display of Web Slices through a small flyout window launched from the Favorites bar. Users can navigate to the page hosting the Web Slice (or to an alternative location specified by the developer) by clicking on the Open link in the flyout window. The following sections of this chapter detail each of the four events in Web Slice usage (Figure 8-4).
Web Slices are markup-based extensions loosely defined by features present in the hAtom microformat specification. This means that Web Slices are defined through real HTML by using tags for structure and attributes to signify structure and metadata types. The attributes in Table 8-1 show the structural building blocks used by Web Slices.
Table 8.1. Web Slice Definition Attributes
Attribute Value | Associated Tag | Description | Required/Optional |
|---|---|---|---|
| Any | Indicates the parent tag containing a Web Slice | Required |
| Any | Indicates the tag containing the title | Required |
| Any | Indicates the tag containing the content | Optional |
| Any | Optional | |
|
| Indicates the tag containing the expiry time | Optional |
Listing 8-1 shows skeleton markup of a Web Slice and the hAtom microformat. The Web Slice definition begins at the <div> containing the hslice class selector and has the id my-webslice. The following <div>—the one implementing the class selector entry-title—holds the title of the Web Slice. The element using entry-content holds the Web Slice's content.
Example 8.1. Sample Structure of a Web Slice
<html>
...
<body>
...
<div class="hslice" id="my-webslice">
<div class="entry-title" style="display:none">My WebSlice</div>
<div class="entry-content">
This is my webslice and some wonderful content.
</div>
</div>
...
</body>
</html>It's worth noting that tags using the hslice class can also specify other classes alongside it. This example also hides the <div> tag carrying the entry-title class; this is useful when a developer wants to specify a Web Slice's title without changing the look or feel of a page's layout.
The remaining sections will use a recurring example to demonstrate key concepts in Web Slice development. These examples can be found on the companion web site for those readers who wish to follow along with the examples firsthand (www.proiedev.com).
Building Web Slices using the hAtom microformat allows developers to easily create frame extensions without modifying the integrity of a page's preexisting markup. The page in Figure 8-5 shows an example news web site that displays up-to-the-minute content. Users can get the latest updates from this content through an RSS feed; however, the RSS feed doesn't offer rich, customized user experiences as the main web site does.
Web Slices complement RSS by syndicating content using a document's original HTML and CSS rather than the more rigid XML format of traditional feeds. The web site in this example can surface the latest news information to users by wrapping the news portion of the page in Web Slice–compatible markup. Users are notified of this syndicated content when they visit the page and can choose to instruct the browser to look for updates through subscriptions.
Web Slices use standard HTML constructs for storing metadata. This is in line with the construct of most microformats—a set of specifications that identifies commonly used constructs (such as addresses or business card information) and attempts to standardize their markup across the Web. Web Slices use constructs in the hAtom microformat to convey data; developers use the text content and the class, id, and title attributes of preexisting elements to define how a Web Slice appears.
Listing 8-2 demonstrates the code behind the web site in Figure 8-5. This sample news site has a section used to convey the latest news content for users. While this would typically be offered as an RSS feed alongside the page, such a feature is a good candidate for a Web Slice—a small, clearly definable piece of a target web page that contains regularly updated content. The candidate content in this listing lies with in the <div> element with the id of news-updates.
Example 8.2. Code for a Web Site with Updatable Content
<html>
<head>
<title>Super News Network</title>
</head>
<body>
<h1>Welcome to Super News Network!</h1>
Super News Network provides news that matters most to you when
and where you need it. You just can't get news like this anywhere
else. Other networks simply do not compare.
<div id="news-updates">
<h2>Up-to-the-Minute Content from Super News Network:</h2>
<ul>
<li>Content placeholder 1</li>
<li>Content placeholder 2</li>
<li>Content placeholder 3</li>
</ul></div> </body> </html>
Listing 8-3 demonstrates this same page enhanced to offer content as a Web Slice. The new Web Slice will allow users to subscribe to the News Updates section. A <div> is added to the page as a parent of the <div> with an id of news-updates. The new <div> is given the id my-webslice and has a class of hslice applied. This element defines the Web Slice itself. A child <div> using the entry-title class is added to this parent; this <div> is not visible, and its innerText property is set to Super News Network. This element defines the Web Slice's title. The news-updates <div> is given the class entry-content. This element now identifies itself as the content of the Web Slice.
Example 8.3. Web Slice Encapsulating a Web Page's Updatable Conent
<html>
<head>
<title>Super News Network</title>
</head>
<body>
<h1>Welcome to Super News Network!</h1>
Super News Network provides news that matters most to you when
and where you need it. You just can't get news like this anywhere
else. Other networks simply do not compare.
<div class="hslice" id="my-webslice">
<div class="entry-title" style="display:none;">Super News Network</div>
<div class="entry-content" id="news-updates">
<h2>Up-to-the-Minute Content from Super News Network:</h2>
<ul>
<li>Content placeholder 1</li>
<li>Content placeholder 2</li>
<li>Content placeholder 3</li>
</ul>
</div>
</div>
</body>
</html>Web Slices were designed for installation by a web page, much like Accelerators. Content defined with the Web Slice hAtom microformat is advertised to the user both in IE's content pane and the IE frame itself. Figure 8-6 shows the high-level view of these surfaces, and Figure 8-7 shows them in detail.
Web Slices that IE discovers on a web page are shown in two ways: as the RSS feed icon in the browser frame, and as a green icon and border shown surrounding a Web Slice during a mouse hover event. The example Web Slice surfaces both of these indicators.
Installation of a Web Slice is initiated by a user clicking on either the icon in the IE frame or the one shown above a Web Slice. A dialog is shown highlighting the name of the Web Slice and the URL it originates from. Figure 8-8 shows the installation dialog from the preceding example.
The process is completed when a user clicks the Add to Favorites bar button. This command does exactly what it says: the installer stores the Web Slice metadata to the system and adds a reference to the Web Slice in the Favorites bar.
Figure 8-9 shows the newly installed Web Slice in the Favorites bar. The Web Slice is in bold, and a flyout arrow is displayed when IE downloads the first batch of syndicated content from the Web Slice's content server. This content is shown to a user in a flyout window below the icon whenever the icon is clicked (see Figure 8-10).
Management of Web Slices takes place in the context menu and properties dialog of each Web Slice. Web Slices are not managed through the Manage Add-Ons dialog like most other IE extensions. The context menu dialog, shown in Figure 8-11, provides commands for opening the Web Slice's navigation page, refreshing it, deleting it, customizing the width of all titles in the Favorites bar, and accessing the Web Slice property dialog.
The Web Slice properties dialog provides settings for two things: credential settings (username and password) and the update schedule. Credential settings allow Web Slices using Basic authentication over HTTPS or Digest authentication over HTTP or HTTPS to automatically sign in with a preset username and password. Update schedule settings allow users to customize when the Windows feed service refreshes the content of a Web Slice. This dialog is shown in Figure 8-12.
Realistically, these settings are buried and difficult for users to discover. Developers should work under the premise that users will never see this dialog, and as a result never customize this information.
Developers can easily control a Web Slice's update frequency and, if necessary, end-of-life date through the same hAtom microformat style found in the previous examples. The following sections demonstrate how to apply these settings to Web Slice markup.
The ttl property informs the browser how long it should wait before refreshing the content of a Web Slice. Like RSS feeds, the download and update frequency for a given Web Slice is controlled by the Windows RSS Platform (more specifically, the Feed Download Engine). The Feed Download Engine keeps track of when a TTL interval is reached. When it is, the engine connects to the host web site, downloads the appropriate data, merges the new data into the user's view, purges old content in the cache, and finally begins a schedule for the next TTL event.
Web Slices are updated every 24 hours by default. Developers can increase or decrease this number through the ttl property; the minimum value is 15 minutes. This property is defined through the use of the class selector ttl on an element whose inner text is the ttl value. Listing 8-4 demonstrates the use of a TTL definition, setting the update time of the example Web Slice to 30-minute intervals.
Example 8.4. Sample Web Slice Specifying a TTL Value
<?
// Create a new DateTime object and grab current values
$dateTme = new DateTime();
$currentTime = $date->format('H:i:s A'),
$currentDate = $date->format('D, M jS, Y'),
?>
<html>
<head>
<title>Super News Network</title>
</head>
<body>
<h1>Welcome to Super News Network!</h1>
Super News Network provides news that matters most to you when
and where you need it. You just can't get news like this anywhere
else. Other networks simply do not compare.
<div class="hslice" id="my-webslice">
<div class="entry-title" style="display:none;">Super News Network</div>
<div class="entry-content" id="news-updates">
<h2>Up-to-the-Minute Content from Super News Network:</h2>
<ul>
<li>Content placeholder 1</li>
<li>Content placeholder 2</li>
<li>Content placeholder 3</li>
</ul>
<div id="webslice-time">
This content was last refreshed at
<? echo($currentTime); ?> on <? echo($currentDate); ?>.
</div>
</div>
<div style="display:none;" class="ttl">30</div>
</div>
</body>
</html>This example begins with a bit of server-side code (PHP), used to grab the current time and date, which is displayed within the Web Slice. The ttl class selector is applied to the last <div> element of the example. The value of ttl is set to 30, placed into the text content of this element. Although a block element is used, this value is not shown on the page because the display style is set to none. When installed, the update interval of this Web Slice is consumed by the Feed Download Engine.
Users can edit this value by right-clicking a Web Slice in the Favorites bar and opening the Web Slice Properties dialog (shown in Figure 8-13). The Update Schedule group box allows for selection of a built-in schedule or a custom update frequency. This dialog is useful in dialing back or increasing the frequency of updates for Web Slices.
Web Slices may provide a date and time of expiry, or when the service behind the Web Slice plans to stop feeding new information to it. This is very useful if a Web Slice becomes worthless after a certain date or time—for instance, after an online auction comes to its scheduled end.
IE presents this information to the user first through the Web Slice Properties dialog and, as expiry draws near, through the use of italicized text and other visual cues in the Web Slice itself, as shown in Figure 8-14.
Developers can use Web Slice expiry as a way to generate confidence with users; it sets an expectation of a service's lifetime.
Listing 8-5 shows how the endtime class selector can be used. In this example, an <abbr> tag has been used to hold an expiration date of December 23, 2010. The date is stored in the title attribute, and the listing includes a reference to the endtime selector.
Example 8.5. Web Slice That Indicates an Expiry Time
<?
// Create a new DateTime object and grab current values
$dateTme = new DateTime();
$currentTime = $date->format('H:i:s A'),
$currentDate = $date->format('D, M jS, Y'),
?><html>
<head>
<title>Super News Network</title>
</head>
<body>
<h1>Welcome to Super News Network!</h1>
Super News Network provides news that matters most to you when
and where you need it. You just can't get news like this anywhere
else. Other networks simply do not compare.
<div class="hslice" id="my-webslice">
<div class="entry-title" style="display:none;">Super News Network</div>
<div class="entry-content" id="news-updates">
<h2>Up-to-the-Minute Content from Super News Network:</h2>
<ul>
<li>Content placeholder 1</li>
<li>Content placeholder 2</li>
<li>Content placeholder 3</li>
</ul>
<div id="webslice-time">
This content was last refreshed at
<? echo($currentTime); ?> on <? echo($currentDate); ?>.
</div>
</div>
<div style="display:none;" class="ttl">30</div>
<abbr class="endtime" title="2010-12-23T12:30:00-08:00"
style="display:none;"></abbr>
</div>
</body>
</html>Table 8-2 shows the format of the date/time string. This string follows the ISO 8601/RFC 3339 date format. Replacing # with a value described in the table, strings should be formatted in one of the following ways:
####-##-##T##:##:##-##:##
####-##-##T##:##:##+##:##
####-##-##T##:##:##Z
Table 8.2. ISO 8601/RFC3339 Date Format
Description | Example | |
|---|---|---|
Year | Four-digit year |
|
Month | Two-digit month, |
|
Day | Two-digit day, |
|
Date/time separator |
|
|
Hour | Two-digit hour, |
|
Minute | Two-digit minute, |
|
Second | Two-digit second, |
|
Zone |
|
|
Alternatively, the positive or negative five-digit hour and minute of the time zone offset ( |
|
Unlike the other Web Slice selectors, endtime must be specified using an <abbr> tag, with the expiration date and time being set through the title attribute. Although only one element type can be used, the expiration does not need to be displayed on the page; this example hides the tag by setting its display style to none (see Figure 8-15).
A yellow warning icon (!), shown in Figure 8-16, is added to the bottom portion of a Web Slice when expiration nears. The tooltip for this icon contains the time to expiration. This, along with the italic indicator and mouse tooltip in the Favorites bar, informs users that a Web Slice will stop updating shortly.
IE stops querying a Web Slice's content source once the expiry date is reached. Users are notified as before with a bold, italic title in their Favorites bar. The Web Slice itself is branded with a red X icon, as shown in Figure 8-17; the date and time of expiration are displayed in the icon's tooltip.
Web Slices can use CSS to style content just like normal web pages, but there are some restrictions placed on how these styles are used. The browser attempts to download as little information from a page as possible when loading or refreshing a Web Slice; this reduces the strain a Web Slice can have on a connection. Consequently, CSS in Web Slices must be used in certain ways if it is to be downloaded and used by IE. The following sections highlight these restrictions and usage scenarios for CSS in Web Slices.
CSS rules contained within the same document as a Web Slice will be applied to the Web Slice contents in two situations: when the styles are placed inline with the Web Slice's elements, or when a stylesheet is placed within the <head> tag of its parent document. There is no guarantee that styles defined outside these rules will be applied to a Web Slice when it is loaded outside of a browser tab and within the Web Slice's drop-down window on the Favorites bar.
Listing 8-6 demonstrates the first acceptable type of CSS use within a Web Slice: inline styles. Elements underneath the main <div> of the Web Slice are individually styled using this method.
Example 8.6. Web Slice Using Inline Styles
<?
// Create a new DateTime object and grab current values
$dateTime = new DateTime();
$currentTime = $dateTime->format('H:i:s A'),
$currentDate = $dateTime->format('D, M jS, Y'),
?>
<html>
<head>
<title>Super News Network</title>
</head>
<body style="font: normal 1.0em Arial, Helvetica, sans-serif;">
<h1 id="page-title" style="font: bold 1.75em Georgia, Times, serif;">Welcome to Super News Network!
</h1>
<span id="page-teaser" style="font-style: italic;">
Super News Network provides news that matters most to you when
and where you need it. You just can't get news like this anywhere
else. Other networks simply do not compare.
</span>
<div class="hslice" id="webslice">
<div class="entry-title" style="display:none;">Super News Network</div>
<div class="entry-content" id="news-updates"
style="font: normal 0.8em Arial, Helvetica, sans-serif;">
<h2 id="webslice-title" style="font: bold 1.25em Georgia, Times, serif;">
Up-to-the-Minute Content from Super News Network:
</h2>
<ul id="webslice-list">
<li>Content placeholder 1</li>
<li>Content placeholder 2</li>
<li>Content placeholder 3</li>
</ul>
<div id="webslice-time"
style="color: #555; font: italic 0.75em Georgia, Times, serif;">
This content was last refreshed at
<? echo($currentTime); ?> on <? echo($currentDate); ?>.
</div>
</div>
<div style="display:none;" class="ttl">30</div>
<abbr class="endtime" title="2010-12-23T12:30:00-08:00"
style="display:none;"></abbr>
</div>
</body>
</html>Styles can also be set within a page using inline stylesheets. Instead of placing inline styles within the style tag of elements, IE will use full stylesheets placed within a page's <style> tags. Listing 8-7 shows an inline stylesheet created using the inline styles shown in the previous example.Example 8.7. Web Slice Using In-Document Stylesheets
<?
// Create a new DateTime object and grab current values
$dateTime = new DateTime();
$currentTime = $dateTime->format('H:i:s A'),
$currentDate = $dateTime->format('D, M jS, Y'),
?>
<html>
<head>
<title>Super News Network</title>
<style type="text/css">
body {
font: normal 1.0em Arial, Helvetica, sans-serif;
}
#page-title {
font: bold 1.75em Georgia, Times, serif;
}
#page-teaser {font-style: italic;
}
#webslice-title {
font: bold 1.25em Georgia, Times, serif;
}
#webslice-content {
font: normal 0.8em Arial, Helvetica, sans-serif;
}
#webslice-list { }
#webslice-time {
color: #555; font: italic 0.75em Georgia, Times, serif;
}
</style>
</head>
<body>
<h1 id="page-title">
Welcome to Super News Network!
</h1>
<span id="page-teaser" style="">
Super News Network provides news that matters most to you when
and where you need it. You just can't get news like this anywhere
else. Other networks simply do not compare.
</span>
<div class="hslice" id="webslice">
<div class="entry-title" style="display:none;">Super News Network</div>
<div class="entry-content" id="webslice-content">
<h2 id="webslice-title">
Up-to-the-Minute Content from Super News Network:
</h2>
<ul id="webslice-list">
<li>Content placeholder 1</li>
<li>Content placeholder 2</li>
<li>Content placeholder 3</li>
</ul>
<div id="webslice-time">
This content was last refreshed at
<? echo($currentTime); ?> on <? echo($currentDate); ?>.
</div>
</div>
<div style="display:none;" class="ttl">30</div>
<abbr class="endtime" title="2010-12-23T12:30:00-08:00"
style="display:none;"></abbr>
</div>
</body>
</html>In addition to styles specified within the document itself, stylesheets specified through the <link> tag and the @import directive are also included within Web Slices. External stylesheets must be declared within the <head> of the document to guarantee inclusion, and just as with inline styles, there is no guarantee that styles will be inherited from elements outside of the Web Slice's hAtom declaration.
Listing 8-8 shows the inline CSS from the prior example consolidated into an external CSS stylesheet. This stylesheet is loaded through a <link> tag in the <head> of Listing 8-9; the inline styles from the prior example are removed as a result.
Example 8.8. External Stylesheet to Be Used by a Web Slice
body {
font: normal 1.0em Arial, Helvetica, sans-serif;
}
#page-title {
font: bold 1.75em Georgia, Times, serif;
}
#page-teaser {
font-style: italic;
}
#webslice-title {
font: bold 1.25em Georgia, Times, serif;
}
#webslice-content {
font: normal 0.8em Arial, Helvetica, sans-serif;
}
#webslice-list { }
#webslice-time {
color: #555; font: italic 0.75em Georgia, Times, serif;
}Example 8.9. Web Slice Using External Stylesheet via the <link> Tag
<?
// Create a new DateTime object and grab current values
$dateTime = new DateTime();
$currentTime = $dateTime->format('H:i:s A'),
$currentDate = $dateTime->format('D, M jS, Y'),
?>
<html>
<head>
<title>Super News Network</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1 id="page-title">
Welcome to Super News Network!
</h1>
<span id="page-teaser" style="">
Super News Network provides news that matters most to you when
and where you need it. You just can't get news like this anywhere
else. Other networks simply do not compare.
</span>
<div class="hslice" id="webslice">
<div class="entry-title" style="display:none;">Super News Network</div>
<div class="entry-content" id="webslice-content">
<h2 id="webslice-title">
Up-to-the-Minute Content from Super News Network:
</h2><ul id="webslice-list">
<li>Content placeholder 1</li>
<li>Content placeholder 2</li>
<li>Content placeholder 3</li>
</ul>
<div id="webslice-time">
This content was last refreshed at
<? echo($currentTime); ?> on <? echo($currentDate); ?>.
</div>
</div>
<div style="display:none;" class="ttl">30</div>
<abbr class="endtime" title="2010-12-23T12:30:00-08:00"
style="display:none;"></abbr>
</div>
</body>
</html>The end result is a Web Slice that is visually and functionally equivalent to the prior example. Again, developers should ensure that all linked and imported stylesheets are imported within the <head> tag of a Web Slice or within its hAtom construct.
The three postinstallation actions of a Web Slice can use sources other than the original page or server. Alternative sources give Web Slice authors more flexibility in creating user experiences and optimizing Web Slice performance and reliability. The following sections highlight ways that developers can provide alternative sources for Web Slice update, display, and navigation scenarios.
Developers can specify an alternative update source that IE and the Windows RSS Platform can use to determine if the contents of a Web Slice have changed. To review, the Feed Download Engine within the Windows RSS Platform is responsible for updating the content of a Web Slice subscription. Each time a TTL interval completes (whether the default 24-hour interval or one specified through the ttl construct), the engine compares the latest content to that contained in the cache. Consequently, the original page that hosts the Web Slice is downloaded again at every interval—shorter intervals could correlate to higher bandwidth consumption.
Web Slices can specify an alternative update source to save bandwidth and provide only the information that IE and the RSS Platform need to compare old data against. Listing 8-10 shows this same Web Slice with an alternate update source specified using the feedurl class. This Web Slice's update cycle becomes tied to the update cycle of the feed.xml RSS feed.
Example 8.10. Web Slice Using an Alternative Update Source
<html>
<head>
<title>Super News Network</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
...<div class="hslice" id="webslice">
<div class="entry-title" style="display:none;">Super News Network</div>
<a rel="feedurl" href="feed.xml" style="display:none;"></a>
<div class="entry-content" id="webslice-content">
...By default, Web Slices are cached and stored by the Windows RSS Platform. The RSS Platform strips out all "active" content from cached files before storage. This policy prevents the execution of dynamic content within Web Slices shown in the drop-down window.
Alternative display sources can be used to circumvent this problem. By specifying the rel=entry-content attribute on an anchor (<a>) tag, you can use the target of that tag as an alternative display source that will be shown when the user clicks the Web Slice in the Favorites bar. These documents are loaded by IE rather than the RSS Platform, allowing them some attractive privileges:
Full control over styles: IE will use styles from any part of the alternative source; basic Web Slices guarantee only those defined in the
<head>and child Web Slice tags.Link navigations: Links can be used for in-place navigations.
Form support: Users can interact with and submit form content.
Limited script support: JavaScript, in limited form, can be used on the page.
Listing 8-11 shows a Web Slice that defines an alternative display source. When this Web Slice is viewed, the display source alt.html is loaded instead of the content the Web Slice structure encloses. The alternative display page is surfaced through an <a> tag with the rel attribute entry-content.
Example 8.11. Web Slice Defining an Alternative Display Source
<html>
...
<body>
...
<div class="hslice" id="webslice">
<div class="entry-title" style="display:none;">Super News Network</div>
<a rel="bookmark" href="nav.html" style="display:none;"></a>
<a rel="entry-content" href="alt.html" style="display:none;"></a>
<div id="webslice-content">
<h2 id="webslice-title">
Up-to-the-Minute Content from Super News Network:
</h2>
<ul id="webslice-list">
<li>Content placeholder 1</li>
<li>Content placeholder 2</li>
<li>Content placeholder 3</li>
</ul>
...
</div>
</div>
</body>
</html>The Windows Feeds Platform strips all active content out of updates since the normal content type it manages (RSS) does not permit script. IE clearly permits script and dynamic content; thus alternative display source pages may use these technologies. Even alternative display sources have some security restrictions and do not offer the full, rich experience of a normal web page. Pages loaded through alternative display sources cannot do the following:
Launch alert dialog boxes, pop-ups, or windows (except during full navigations)
Install ActiveX controls
Access the
window.externalobjectOpen a new tab (a new window can be opened)
Use HTTP Basic or Digest authentication (only cookie- or session-based methods can be used)
These restrictions are in place to help prevent malicious use of Web Slices.
By default, users who click the Open icon in the Web Slice drop-down are navigated to the page where the Web Slice resides. This is also the case for navigations that occur when a user clicks a Web Slice that has never been or cannot be updated. However, developers may specify a different landing page in these scenarios by providing the URL of an alternative navigation target in their markup.
The alternative navigation target is specified through an <a> tag located within the hslice <div> with a rel attribute set to bookmark. The href link in this tag will be the link IE navigates to when a navigation event is triggered on the Web Slice. Listing 8-12 shows the addition of this tag.
Example 8.12. Web Slice Pointing to an Alternative Navigation Target
<html>
...
<body>
...
<div class="hslice" id="webslice">
<div class="entry-title" style="display:none;">Super News Network</div>
<a rel="bookmark" href="nav.html" style="display:none;"></a>In this example, users who click the Open button or who click a nonupdated Web Slice will be navigated to nav.html. The user experience is shown in Figure 8-18.
Some user scenarios such as e-mail necessitate user authentication to access data. Web Slices offer limited support for authenticated sessions that support these scenarios. Unfortunately, this feature area is incomplete in terms of user experience and functionality.
There are three modes of authentication available: HTTP Basic authentication, HTTP Digest authentication, and cookie-based authentication. The authentication types available are determined by the display method of the Web Slice. Table 8-3 highlights availability compared to Web Slices using both standard and alternative display source content types over HTTP and HTTPS.
Table 8.3. Authentication Types Available for Certain Web Slice and HTTP Protocol Types
Standard Web Slice | Alternative Source Web Slice | |||
|---|---|---|---|---|
HTTP | HTTPS | HTTP | HTTPS | |
HTTP Basic | No | Yes | No | No |
HTTP Digest | Yes | Yes | No | No |
Cookie | No | No | Yes | Yes |
Web Slices hosted on servers using either Basic or Digest HTTP authentication methods can use those methods as well. The Basic method is restricted to Web Slices using HTTPS and no alternative display source, while Digest can be used over HTTP or HTTPS when no alternative display source is specified. This authentication method is typically controlled through a server configuration file. Listing 8-13 shows an Apache .htaccess configuration file that creates a realm for Basic authentication using a predefined password file.
Example 8.13. Apache .htaccess Directive for Basic Authentication
AuthType Basic AuthName "WebSlice" AuthUserFile /path/to/password/file/passwd require valid-user
The user interface and interaction with Web Slices using these authentication methods are both clunky and incomplete. Users who have not logged in are presented with an error. To log in, a user must click the Open button. This navigates to a full IE instance, and that IE instance (which allows these authentication types) will prompt the user for credentials (Figure 8-19).
Credentials used by both Basic and Digest authentication can be managed through the Web Slice Properties dialog. Users can persist these settings so the Web Slice will automatically authenticate using the method made available by the web server. Again, these settings apply only to Basic and Digest authentication; cookie-based authentication cannot be persisted through this dialog (Figure 8-20).
Developers using cookies for authentication can use that authentication scheme with their Web Slices as well. Session cookies stored in the main IE window are not available to Web Slices, because Web Slices are downloaded by the browser's frame, which does not share cookies with the tab process. Cookie-based authentication cannot be managed through the Web Slice Properties dialog.
The following sections describe a few more advanced customization methods that developers can use to create more dynamic experiences.
New Web Slices are presented to users in two main locations: within a page through a border and icon surrounding a Web Slice on mouse hover events, and through the RSS Feed Discovery button. The Feed Discovery button is an IE command button and is located in the browser frame.
The Feed Discovery button displays the green Web Slice icon when one or more Web Slices are present on a page. The right side of this button opens a flyout list of all Web Slices and feeds present on the page; however, the top-level button installs only one Web Slice at a time. By default, IE will install the first Web Slice encountered on the page during parsing when this button is clicked. Developers, however, can override this decision.
The default Web Slice to be installed from the top-level Feed Discovery button can be specified through a <link> tag in the <head> of a target document. This tag has three required attributes:
rel: String value set todefault-slice(required).type: MIME type set toapplication/x-hatom(required).href: id selector of the Web Slice to be set as default. This element must be a Web Slice's root element containing the class selector hslice (required).
Listing 8-14 provides a brief usage example for this tag. The document in question contains multiple Web Slices, one of which has the id myWebSlice. The myWebSlice Web Slice is to be named the default. A <link> tag is created in the <head> of the target document; its rel attribute is given the value default-slice, and it uses the type application/x-hatom. The href attribute is set to the anchor-formatted id #myWebSlice, telling IE to use the element called myWebSlice as the default Web Slice for the document.
Web Slice installation may be triggered from JavaScript as an alternative to the user activating the Web Slice installation button. IE exposes the AddToFavoritesBar function on window.external to handle the installation of favorites and Web Slices. When called, IE displays the same installation dialog that is shown when a user clicks the Web Slice icon that appears in a page and the browser frame.
The window.external.AddToFavoritesBar method takes three parameters: the URL of a Web Slice, the title to be shown in the installation dialog, and the type (which in this case is always slice).
URL: The URL to the web page containing the Web Slice's hSlice microformat definitionTitle: The title to display to the userType: A string,slice, that indicates the content type to IE
The markup and script in Listing 8-15 demonstrates a button that uses this functionality. The object's onclick event makes a call to window.external.AddToFavoritesBar, directing IE to install the My Web Slice extension from the provided URL.
Example 8.15. <button> Manually Installing a Web Slice Through Script
<button onclick="window.external.AddToFavoritesBar(
'http://examples.proiedev.com/08/manual#myWebSlice',
'My Web Slice',
'slice')">
Add WebSlice to Internet Explorer
</button>Web Slices specified in script are not automatically advertised to users by the IE frame's Feed Discovery icon. For security purposes, script is only permitted to call AddToFavoritesBar in response to a user-initiated action (e.g., a button or link click).
The on-hover advertisement of Web Slices in a document may cause issues with the functionality or appearance of a web application. Web sites can disable in-document advertisement of Web Slices by adding a <meta> tag to the <head> of a page.
name: String value set toslice(required)scheme: String value set toIE(required)content: String value set tooff(required)
Disabling of in-document advertisement must be performed on a per-page basis. Developers are advised to use server-side templates to insert this <meta> tag automatically if it is required on every page.
Listing 8-16 shows a simple example of a page opting out of the on-hover advertisement feature. As in the description, a <meta> tag whose name is slice and scheme is IE is set in the <head> tag. It contains a content attribute whose value is the string off.
Web Slices offer an easy way for developers to syndicate site content in both new and existing applications, all without requiring major changes to application and page design. I began this chapter by introducing the concept of Web Slices, the hAtom microformat structure, and the basic installation process for users. I continued by discussing styles, alternative sources, and authentication scenarios; and I ended with a quick run-through of some more advanced topics regarding installation and defaults. I hope you see the value of Web Slices as a way to drive users to your applications and integrate your application into IE itself.