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"> 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°</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.
<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
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.
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:
- A title
- A picture of the band
- The location of the show
- The date and time of the show
- A link to buy tickets
Using the elements discussed above, it is straightforward to put together the code for this Web Slice:
<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>
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
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 http://www.msdn.com/ie.
