What are WebSlices?

In a nutshell, webslices are an IE8 specific feature that allows the web designer to tag part of a webpage as a ‘webslice’. By tagging sections of a web page, users of IE8 can then subscribe to it, much in the same way that they can subscribe to an RSS feed.

… I should also mention that when the webslice is updated, the user/subscriber of the webslice will be notified. This is Microsoft’s explanation of it:

WebSlices is a new feature for websites that enables users to subscribe to content directly within a webpage. WebSlices behave just like feeds in that users can subscribe to them and receive update notifications when the content changes. Websites are polled at user-defined intervals, similar to the way RSS feeds are polled. Website operators may also define a minimum wait time between polls to minimize requests.

Developers can mark parts of webpages as “WebSlices” and enable users to monitor information they rely on as they move about the web. With a click in the Favorites bar, users see rich “WebSlice” visuals and developers establish a valuable, persistent end-user connection.

OK, sounds like RSS feeds to me … but I figure I’d give it go. So on the IE8 beta webslices page, they give you a few links to websites that support webslices. Of course, the MSN page doesn’t seem to work – all I can find is the RSS feed.

Thankfully the stumbleupon.com webslice link seems to work and so I subscribe to the webslice …

Webslice subscribe window:

Whenever you come across a web page with a webslice in it, you get this nifty little icon appearing in the IE8 toolbar.

The webslice ‘alert’ icon:

Now that we’ve subscribed to the stumbleupon.com webslice, a corresponding button appears in our Favorites bar that when clicked, displays this snapshot of the content that is there now.

Webslice current view:

As the image above shows, it does offer something a little extra over an RSS feed … one less click, I suppose.

Creating your own webslices in your web pages

It seems pretty simple; you just have to wrap whatever content that you want to become a webslice in a div tag, and then just tag the div with the class of ‘hslice’.

There are a few sub elements that you can use to further define the webslice: ‘entry-title’ and ‘entry-content’ … among others.

Here is a simple example:

      
Item - $66.00
 
      
high bidder: buyer1 … 
 

Webslices can be decorated with a few other bits of information:

• Expiration date – when the webslice expires.
• Time to Live – how often it refreshes.

Here is the same webslice example with the ‘time-to-live’ attribute set:

  
Item - $66.00
   
high bidder: buyer1 … 
     
This clip updates every 15 minutes 
 
   
 

In the above code snippet, it is the ‘class=”ttl”‘ that sets the interval for the webslice.

Conclusion:

At first glance, I wasn’t too impressed. But now that I’ve used them a little, I can see webslices as being a nice little feature.

Links of Interest:

1. webslices guide in PDF format … from Microsoft.

2. Using webslices video

3. You can learn more about webslices at the IE8 beta webslices page.

–

Thanks for reading,

Stefan Mischook

www.killersites.com
www.killerphp.com