Create Your Own Web Slices

Web Slices are a new Internet Explorer 8 Beta 2 feature that allow you to subscribe to parts of a Web page and view updates directly from the Internet Explorer Favorites bar.

Web Slices let users bring their favorite parts of the Web with them wherever they browse. This article will explain how Web Slices work, why they are cool, and how you can start creating Web Slices of your own.

Web Slices are a new concept that allows the user to subscribe to a portion of a page and monitor the updates on the status bar throughout their browsing experience. Any portion of a page that updates regularly is a reasonable candidate to become a Web Slice. News, stock quotes, sports scores, exchange rates or even e-mail can be presented prominently in Internet Explorer as part of the Favorites bar. Updates to Web Slices are indicated visually in the item through bolded text.

The Internet Explorer 8 Beta 2 Web Slice Style Guide provides best practices for the design of Web Slices.

There are four main behaviors for a Web Slice:

• Discovery: Users discover the Web Slice within a Web page and subscribe to it, adding the Web Slice to the Favorites bar.
• Update: Internet Explorer uses the Feed Download Engine to periodically check for changes to the Web Slice.
• Notify: When the Web Slice changes, it is bolded on the Favorites bar.
• Display: The user can view the update to the Web Slice by clicking on the Web Slice on the Favorites bar.

There are two ways for users to discover a Web Slice: in document by hovering over a Web Slice region on a page (Figure 1), and through the feed discovery button on the command bar (Figure 2).



Once a Web Slice has been subscribed to it can be accessed through the Favorites bar. Figure 3 shows an eBay Web Slice that allows users to track an auction. Rather than clicking refresh on an auction page every few minutes, a user can subscribe to an auction and be visually alerted of changes to the auction automatically.


The Anatomy of a Web Slice

Web Slices are enabled through simple annotation to an HTML file. Several elements are required to represent a Web Slice in code:

• hslice class
• id attribute
• entry-title class

hslice class

To detect a Web slice on the page, Internet Explorer looks for elements that have a class of hslice. The hslice element describes a section of the Web page that the browser can subscribe to. All required and optional properties of a Web Slice must be contained within the hslice element.

<div class="hslice" id="score">

Web Slice class names do not require a CSS rule in the style sheet as do traditional style classes. You can combine Web Slice class names with other classes using a space-delimited list:

<div class="hslice forecast" id="weather"></div>

id attribute

The id value is used to identify the Web Slice in a URL, similar to the way a named anchor (bookmark) is used. The id attribute must be present on the same element that uses the hslice class.

The id should be unique. If two Web Slices on the page share the same id value, Internet Explorer will ignore one of them.

Note: If the id value changes, Internet Explorer will no longer be able to identify the Web Slice.

entry-title class

At least one child of the hslice must specify an 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 title that updates whenever the Web Slice does. The entry-title class name can be applied to more than one element. Internet Explorer concatenates the values in the order in which they appear in the HTML.

<div class="hslice" id="main">
    <h2 class="entry-title">Seattle Weather</h2>
    <p>It is <span class="entry-title">62&deg;</span>.</p>
</div>  

In this example, Internet Explorer displays ?Seattle Weather 62?? when the Web Slice is updated.

Optional Elements

These elements for a Web Slice in code are optional.

• entry-content class
• rel=feedurl
• ttl
• endtime

entry-content class**

The entry-content element is the part of the Web Slice that Internet Explorer brings to the Favorite bar. The entire element is displayed in the Web Slice preview window when the user clicks the Web Slice button.

The default width and height of the preview window is determined by the size of the container designated as entry-content.

Like the entry-title class, the Web Slice can contain more than one entry-content element. All elements are combined to create a single preview.

Note:?For security reasons, the Web Slice preview does not allow script or Microsoft ActiveX controls. Consequently, HTML forms and buttons are not supported. Instead, you can use links that contain URL parameters to perform related actions. Navigations occur within the currently selected tab. To get around this limitation, consider using an alternative display source, described below.

The inline styles used in the HTML of the entry-content element and the style rules of the original Web page are used to style the HTML in the preview window. Inline styles from parent elements are not inherited by the preview. For more information, see the Applying Styles to Web Slices section below.

rel=feedurl

Any link within the Web Slice that specifies a feedurl?rel attribute will be treated as an alternate source for updates. The alternate source can be another Web page with Web Slice annotations or a single feed item. When present, Internet Explorer subscribes to the alternate update source and no longer uses the original page content to update the Web Slice.

<div class="hslice" id="auction">
    <a rel="feedurl" href="http://www.example.com/slice.aspx?auctionId=...";></a>
    <span class="entry-title">Auction Item</span>
</div> 

ttl

The ttl property allows you to specify how frequently Internet Explorer checks your site for updates to the Web Slice.

endtime

The endtime property can be used to indicate when an item is no longer active.

For example, a Web Slice may be tracking a flight which arrives at 7pm.

<div class="hslice" id="1">
    <p class="entry-title">Flight 056</p>
    <div class="entry-content">
        <p>Departure time: 1:00 PM EST</p>
        <p>Status: On time</p>
        <p>Flight length: <abbr class="endtime" title="2008-09-01T13:00:00-19:00:00">6 hours</abbr></p>
    </div>
    <p>This item updates every <span class="ttl">5</span> minutes.</p>
</div>

Alternative Update Source

The alternate update source is useful to manage the background updates from the client on a separate server. This is done by providing an alternative Web page or feed, using the feedurl property (discussed above). Figure 4 demonstrates how this process works. In the diagram, you can see that there are two Web pages that represent the same Web Slice. Basic.html is the original Web page that the user discovers and subscribes to the Web Slice. Update.html is linked to from Basic.html, and serves as the alternate update Web page. You can see this in code below.


Basic.html

...
<div class="hslice" id="auction">
    <a rel="feedurl" href="http://www.example.com/update.html#auction-update"/>
    <span class="entry-title">Auction Item</span>
</div> 

Update.html

...
<div class="hslice" id="auction-update">
    <h2 class="entry-title">Auction Item</h2>
    <p class="entry-content">Current bid is $32</p>
</div> 

Alternative Display Source

When the user clicks the Web Slice on the Favorites bar, a flyout appears with the stored value of the entry-content property. An alternate display source can be used to host interactive Web content such as script or ActiveX controls (Figure 5).


Basic.html

...
<div class="hslice" id="auction">
    <span class="entry-title">Auction Item</span>
    <a rel="entry-content" href="http://www.example.com/display.html";/>
</div>

Display.html

<html>
    <body>
        <div>Current bid is $32</div>
    </body>
</html>

Create Your First Web Slice

To demonstrate the concepts discussed above, I?ll show you how to create a simple Web Slice. Base 9 is a (fictitious) local jazz band. They use their web site to promote upcoming shows and want to create a Web Slice to notify users when a new show is scheduled.

For examples of Web Slices created by other developers, check out the Web Slice Gallery on the Internet Explorer Developer Center.

The first step is to decide exactly what content will be displayed in the Web Slice and how it will be laid out on the page. The Internet Explorer 8 Beta 2 Web Slice Style Guide provides best practices for the design of Web Slices. Refer to the style guide to ensure that the content and layout of your Web Slices are optimal.

The Web Slice will contain five items:

Using the elements discussed above, it is straightforward to put together the code for this Web Slice:

<div class="hslice" id="upcoming_show" style="width: 320px; height: 240px">
    <div class="entry-content" style="width: 320px; height: 240px">
        <h2 class="entry-title" style="text-align: center">Base 9 show on 7/9</h2>
        <img src="band.jpg" style="width: 100px; height: 100px; float:left; margin-right: 20px">
        <ul>
            <li>Where: Hotel Sierra</li>
            <li>When: Friday 7/9/08 @ 5pm</li>
            <li><a href="http://buytickets.com">Buy tickets for the show</a></li>
        </ul>
    </div>
</div>

While the example here uses inline styles, it is also possible to use styles defined within the <style> block, or through an external style sheet. To attach the class myclass to the hslice element, separate the two class names with a space:

<div class="hslice myclass" id="upcoming_show">
    ...
</div>

It is important to note that the page containing your Web Slice must be hosted on a Web server (not accessed locally) for Internet Explorer to detect the content and allow the user to subscribe to the Web Slice.

Once a user adds the slice, it appears on the Favorites bar as shown in Figure 6.


This HTML code can then be updated (manually or through a script) to reflect upcoming concert dates for the Base 9 band. It is a quick and easy way for Base 9 fans to keep tabs on when their favorite band will be performing!

Conclusion

Creating a Web Slice is very easy and is a great way to promote your site?s content to users directly from the Internet Explorer Favorites bar. For more information on creating Web Slices, please visit the Internet Explorer Developer Center at http://www.msdn.com/ie. There you?ll find the Internet Explorer 8 Beta 2 Web Slice Style Guide, which provides best practices for the visual design of Web Slice content. To explore Web Slices other developers have created, check out the new Web Slice Gallery.