Many of us cut out articles from the newspapers if we find them interesting. Think of Web Slices to be cuttings from Web sites. But with a difference. If these cuttings (web content) are updated on the respective web sites, you will be notified, as well as your cuttings will be updated. Technically, you “subscribe to a Web Slice”, instead of saying cutting it off which may offend the webmasters

The latest post on my Blog is Web Slice enabled (or say, it is a Web Slice). In fact, it is Web Slice enabled since some time. Perhaps, some of you (who are using IE 8 ) would have noticed it.

Other web sites which are Web Slice enabled are digg.com, ebay.com, facebook.com, msn.com etc.

How to subscribe to a Web Slice

To slice out the latest post or to subscribe to the latest post on my blog:

• Download and install IE 8 from http://www.microsoft.com/windows/internet-explorer/beta/default.aspx
• Once installed, browse to my blog at http://www.shekhargovindarajan.com.
• Wait for the site to load up completely.
• Once loaded you will notice, the “Subscribe to Web Slices” icon (the second icon, after the home icon on the top right) turns green as shown in the screenshot below:

A green icon indicates Web Slice(s) on the page

• Clicking on the green icon, will show you a dialog box which prompts you to add the Web Slice. Clicking the Add button, on the dialog, will place a bookmark on the Favorites bar.
• Alternatively, if you move your mouse over the latest post, you will see a green border around the latest post, and a green icon on the left, as shown below:

Move the mouse over the latest post to subscribe to the Web Slice

• By clicking on the green icon you can subscribe to the Web Slice.
• Clicking on this bookmark will show you the preview of the Web Slice (the content of my latest blog post), as shown in the screenshot below:

Web Slice Preview

• Clicking on the arrow (->) icon on the preview window will take you to the full blog post.

How does it work ?

If I write a new blog post which, upon publish, becomes my latest post, the Web Slice bookmark on your IE will turn bold. By default, the Web Slice is checked for any updates once in a day. Upon an update, the Web Slice bookmark can turn bold or even play a sound.

Right click on the Web Slice bookmark. Click on “Bold on Update”. This will make the bookmark bold, upon an update.

To play and sound, right click on the bookmark and select Properties. Click on the Settings button under “Update Schedule”. Check the box labeled “Play a sound when a monitored feed or Web Slice is updated.

Notice the numerous other options in the Properties window. Note that you can setup when to check the Web Slice for updates – which is by default set to 1 day.

How to enable Web Slice on your site

Refer to the URL http://msdn.microsoft.com/en-us/library/cc848871(VS.85).aspx. Read the section titled “Creating Web Slices”.

The rules are:

1. The Web Slice Block: You should have a HTML tag (like a <DIV>) enclosing the content that you want to Web Slice enable. This <DIV> tag must have the CSS class name set to “hslice” and must have an id. If you view source (the HTML source) of this blog, you will notice: <div id=“latest_post” class=“hslice”> Note that this <div> has the class set to hslice and id set to latest_post. The id must be unique. That is, no other element or tag on the page must have the same id. If you search for latest_post in the source, you will not find any other element with the same id.
2. The Web Slice Title: The title of the Web Slice or the content should be enclosed within a tag with the classname as entry-title. On my blog, I have given this class name to the anchor (<a>) tag which encloses the title of the latest blog post.
   
3. The Web Slice Body/Content: The content should be enclosed within a tag whose classname is entry-content. Earlier the content of the latest post was enclosed within a paragraph tag (<p>). But giving the <p> tag, the class name as entry-title did not show the preview of the Web Slice (as shown in one of the screenshots above). Changing the <p> tag to a <span> tag showed the preview. Note that on my blog, the content of the latest post is either the full content (in some cases) or a part of the full content. In the latter case, clicking on continue reading shows you the full content. In the latter case, the Web Slice will be marked as updated only when I update the part of the content which shows in the latest post.
   

To summarize, following is the markup structure of my latest blog post which is Web Slice enabled:

<div id=”latest_post” class=”hslice”>
—
—
<a class=”entry-title”  href=”…”> the post title </a>
—
—
<span class=”entry-content”>
the post content
</span>
—
—
</div>

Issues with Web Slices

Though Web Slices seem to be easy to implement, I thought of the following issues with them:

1. For an existing site it may not be always straight forward to implement Web Slices if there are issues like <p> not working (as explained in point 3 in the above section). I would like to have no structure change to use Web Slices.
2. If you go through the link http://msdn.microsoft.com/en-us/library/cc848871(VS.85).aspx, you will notice a line which says “The Web Slice preview window will not always display content the exact same way it appears on a Web page; some of the formatting is stripped away”. I could not find the documentation on what formatting is stripped away. I can see that, the Web Slice preview magically removes the continue reading, comments and category links (which are at the bottom of the latest post). And it magically redirects to the full post, when clicking on the -> (arrow) on the preview button. How come, it is detecting the first link as a useful link and discarding other links. I like magic but would like to read the documented logic behind it.
3. Web Slice only works with IE 8, officially (read “Web Slices with Firefox” below). Perhaps, RSS still remains the cross browser standard which works well to notify about updates.

Web Slices with Firefox

With Firefox 3 and a plugin called Webchunks, you can use Web Slices in Firefox! It is very similar to using it in IE. First install the plugin from the following link http://disruptive-innovations.com/zoo/webchunks/webchunks-0.30.xpi. This is the direct link to the plugin. So launch it in Firefox 3.Once installed, it will ask for a Firefox restart. After restart, if you navigate back to my blog (or any other Web Slice enabled) site, you can subscribe to the Web Slices in a very similar way as shown in the screenshots below:

Clicking on the blue icon (on the left) will allow you to subscribe to a Web Slice (if any) on the page

You can also subscribe to a Web Slice by moving the mouse over the content, as in IE 8

The Web Slice preview in Firefox 3

To sum up, I do like the visual slicing out (e.g. by moving the mouse over on the latest post) of content from the web pages. It is like I’m indeed cutting and taking off something from the website

Update:

“And it magically redirects to the full post, when clicking on the -> (arrow) on the preview button. How come, it is detecting the first link as a useful link and discarding other links. I like magic but would like to read the documented logic behind it.”

Found the logic behind this one. It follows the link (<a>) which has rel=”bookmark”. My latest blog post has two links (the title link and the continue reading link) whose rel=”bookmark”. Both of them point to the full post. So Web Slices is picking up one of them, either the first one or the last one.