In usability we trust

UX and all things web

WebSlices, evolution of RSS?

In the upcoming new version of Internet Explorer 8, which is in public Beta 1 right now, there’s support for a new technique called WebSlices. Is this yet another proprietary feature of Microsoft or is it a really useful evolution of RSS that will be adopted as a web standard? Since it follows the patterns of the Microformat hAtom, which is an unobtrusive way of marking up content with standard HTML, I think that it might actually be a pretty good innovation.

Internet Explorer 8 Beta

The basic concept is to allow users to subscribe to a part of a page. Similar to how you subscribe to RSS feeds. This is done by making parts of a web page into WebSlices. For example if you interested in an object on eBay, you can subscribe to the information about that particular object if it’s marked up as a WebSlice.

Because it has the form of a Microformat it’s a very safe technique to use. If your browser is WebSlice enabled you will benefit from it, if it’s not you won’t notice anything unusual.

The WebChunks add-on

There’s already an add-on for Firefox called WebChunks that handles WebSlices in a similar way that IE8 does. I wouldn’t be surprised if the next version of Firefox also will handle this (and other Microformats) natively.

Actually Firefox has something similar which they call Microsummaries. It works just about the same way but is trickier to implement, plus the feature is hidden deep inside the browser where no one, except geeks, will find it.

In this example I add a Suunto watch from an eBay auction to my WebChunk toolbar. You can try it yourself at eBays WebSlice enhanced search page.

When you put the mouse cursor over a WebSlice, a blue icon appears next to the content (in IE8 it’s purple).

You store the Webslice by clicking on the icon.

With WebChunks you get an extra toolbar in Firefox where your saved “chunks” appears, kind of the same way as Active bookmarks does. If the content has changed since you last looked at it, the text will be bold. You access the Webslice by clicking on it and are presented with just that part of the original web page, readily accessible regardless of what page your currently at.

Other pages you can try this on is an article on Wikipedia about the Acid3 test and Internet Buzz on StumbleUpon. Of course you first have to install either Internet Explorer 8 Beta 1 for Developers or the WebChunk Firefox Add-on.

How to code it

Like all other Microformats, WebSlices relies on standard HTML elements and attributes to mark up the content.

WebSlice

First of all the WebSlices must be contained inside a containing element with the attribute class="hslice". This element must also have an unique id attribute.

Entry Title

It also have to have an Entry Title. This could for example be the name of an eBay object and could be contained in a <h3> with the attribute class="entry-title". This is the same as the hAtom standard property.

Entry Content

There’s a third optional attribute that’s also important, and that’s Entry Content. It contains the content of the WebSlice and is marked up with the attribute class="entry-content". Preferable inside a <div>.

This results in the very simple code below. It has all the ingredients of a nice WebSlice.

<div class="hslice" id="item-1">
<h3 class="entry-title">Suunto X-lander watch</h3>
<div class="entry-content">
<img src="x-lander.jpg" alt="" />
<p>Nice wristop computer watch. Price: $229.99</p>
</div>
</div>

Other optional attributes are:

Expiration

This optional attribute indicates the end time of an object. Like for example when an auction is finished. It’s expressed with the attribute class="endtime".

<p>End time: <abbr class="endtime" title="2008-08-28T12:00:00-05:00"> 6 hours</abbr></p>

Bandwidth

This optional attribute indicates how often the item is updated. It’s value must be an integer and expresses the number of minutes before update. It’s expressed with the attribute class="ttl". (ttl=Time To Live)

<p>This item updates every <span class="ttl">15</span> minutes.</p>

Feed URL

This optional attribute indicates if there’s a different source to get updates from. It’s contained in an anchor element <a> with the attribute rel="feedurl".

<a rel="feedurl" href="http://www.ebay.com/feed.xml">Subscribe to Feed</a>

If you’re familiar with the concept of Microformats, this is very straight forward and easy to code.

Conclusions

Will WebSlices catch on? Who knows? I think that because it builds on existing standards it might stand a chance. The beauty and simplicity of Microformats will make it easy for web developers to implement. But of course, in the end it’s up to the web surfers if they find this technique useful or not, that will ultimately determine it’s future.

Will it evolutionize RSS? Personally I think that if WebSlices catch on, RSS will probably coexist with it
since it’s more lightweight presentation is more suitable for some types of content.

Anyway I think it’s nice to see that Microsoft is doing an effort in the same direction as the Microformat initiative, elevating existing standards instead of trying to do something completely propitiatory. I think that they are starting to play well with the rest of the web development community and that’s really nice to see.

Further resources

Finally I’d like to thank Fredde, for showing me this technology and pointing me in the right direction.

1 Comment

  1. There is not well known Firefox extension “PageSlices addon for Firefox” that manage web slices very good.
    You can store and organize a lot of web slices with it. The web site of project http://pageslices.net

Leave a Reply

Your email address will not be published.

*