Create Web Slices

Last Revised On: 24/04/2009

This section covers three different ways to create a web slice. First is by specifying static HTML content, second by pointing to HTML in another file and third, by specifying an RSS feed.

What is a web slice?

A web slice is content on a web page which a user can suscribe to. The content is then available from a button in the Internet Explorer 8 (IE8) Favorite's toolbar. When the content is updated, the button glows orange to alert the user that there is new content. When the user clicks the button, they see a drop down window with the updated content of the web slice.

What HTML is required to make a web slice?

There are three important things that let IE8 know that content should be recognized as a web slice. You mark your content with specific CSS class names. First, you must have a div marked with a class equal to 'hslice'. Second, the div must have a unique id. Third, you must have a child element marked with a class equal to 'entry-title'. These are the three components required to mark content as a web slice. Specify the content for your slice by marking the web slice content with a class named 'entry-content'. HTML markup could be similar to the following:

The HTML tags you use to strutcture your web slice are immaterial, the important thing is to speciy the right CSS class names. We can create a PHP function to output this HTML structure. The function will accept a unique name for the web slice, a title and a string representing the content.

<?php
function createWebSlice($sliceName, $sliceTitle, $content)
{
echo "<div class='hslice' id='";
echo $sliceName;
echo "'>";
echo "<h3 class='entry-title'>";
echo $sliceTitle;
echo "</h3>";
echo "<span class='entry-content'>";
echo $content;
echo "</span></div>";
}

createWebSlice("helloWorld", "Demo Web Slice", "Hello PHP Developers");
?>

The following web slice is a result of this code:

Demo Web Slice

Hello PHP Developers

Specify Alternate Content for a Web Slice

Say you want to create a web slice on a page that has a lot of content. IE8 periodically scans the page to see if there are updates to the content specified in the web slice. This could cause network performance issues. In this case, you can create a separate HTML page containing only the content for your web slice and point the web slice to draw content from the small file.

In this case, the HTML is almost the same, but instead of specifying an element with a class equal to 'entry-content', you create an anchor tag pointed to the content source. Note that you must specify an attribute rel='feedurl'. For example:

webSliceContent.html contains the required HTML for a simple web slice. For example:

<div class="hslice" id="wsContent">
<span class="entry-title">Hello from webslicecontent.html</span>
<span class="entry-content">This is some sample content</span>
</div>

Note that the the html, head, title and body tags are not included. You can add them if you like but are not required. Also note that it is a good idea to supress the display of the link, otherwise, although it is not visible to viewers, it does create an extra tab stop which is read by screen readers.

We can create another very simple PHP function to generate the HTML for us. The function will accept a unique name for the web slice, a title and a string URL which points to the file containing our content:

<?php

function createWebSliceFromAltSource($sliceName, $sliceTitle, $altPageUrl)
{
echo "<div class='hslice' id='";
echo $sliceName;
echo "'>";
echo "<h3 class='entry-title'>";
echo $sliceTitle;
echo "</h3>";
echo "<a rel='feedurl' href='";
echo $altPageUrl;
echo "' style='display:none'></a>";
echo "</div>";
}

createWebSliceFromAltSource("alternateSource", "Demo Web Slice from an alternate source", "http://webslicecontent.html#wsContent");
?>

The following web slice was created using the above code:

Demo Web Slice from an alternate source

Specify an RSS feed as the web slice content source

IE8 Web Slices have a built in RSS reader which will display the first item of an RSS feed. Like the previous example, you simply create an anchor tag with a rel='feedurl' attribute and point the link to the URL of the feed. The HTML is as follows:

Again, we can modify our above PHP function to accept another parameter which specifies the Feed URL. Note that this example also includes a parameter for content, which is displayed on the page advertising the web slice. The content from the Feed URL, however, will be the actual content to which a user suscribes.

<?php
function createWebSliceFromRss($sliceName, $sliceTitle, $content, $rssUrl)
{
echo "<div class='hslice' id='";
echo $sliceName;
echo "'>";
echo "<h3 class='entry-title'>";
echo $sliceTitle;
echo "</h3>";
echo "<div class='entry-content'>";
echo $content;
echo "</div>";
echo "<a rel='feedurl' href='";
echo $rssUrl;
echo "' style='display:none'></a>";
echo "</div>";
}

createWebSliceFromRss("helloWorldRss", "Demo Web Slice from RSS", "Interoperability @ Microsoft","http://blogs.msdn.com/interoperability/rss.xml");

?>

The following web slice was created using the above code:

Demo Web Slice from RSS

Interoperability @ Microsoft

Download Solution Package From CodePlex Now

Mini Projects for PHP