Creating Basic WebSlices for IE8

March 13th, 2008

WebSlices are a completely new feature for IE that allow users to subscribe to certain content contained within a web page. The WebSlices behave like RSS feeds, allowing the user to subscribe to the content for updates.

Enabling WebSlices on a web page is quite simple, requiring only some simple additional coding. A basic example would look like this:

<div class="hslice" id="1">
   <p class="entry-title">Title for WebSlice</p>
   <div class="entry-content">Information to be displayed in WebSlice
   </div>
</div>

<div class="hslice" id="2">
   <p class="entry-title">Title for WebSlice2</p>
   <div class="entry-content">Information to be displayed in WebSlice2
   </div>
</div>

There are a few key elements to take note of, without these elements, your WebSlice will not function properly:

  1. The WebSlice must use the class name hslice in the container.
  2. Each WebSlice must contain an ID in the container. This is how the WebSlice will be differentiated from others on the page.
  3. The WebSlice must have at least one entry-title element defined. This will be displayed both in the page and in the feed button that appear in the Favorites Bar when a user subscribes to the WebSlice.
  4. While not required, each WebSlice should contain at least one entry-content element. This is the information that will appear when the user selects the WebSlice from their Favorites Bar.

Once you have your basic WebSlice in place, you can now work on how it looks. By adding a style to the tags you can format the WebSlice information so that it better matches the layout of the rest of the page. Styles applied to the entry-content element will also be used in displaying the WebSlice when a user accesses them from the Favorites Bar. You can also use existing styles and html coding by placing them within the entry-content container.

Here’s a WebSlice I whipped up for my workplace to show how many licenses for their ERP system were in use:

webslice_demo1.png

I created an ASP page and used CSS styling to create the chart. The data is taken from the ERP system’s login table. I placed the chart code inside the entry-content container and had an instant WebSlice.

You can read more about creating WebSlices in the WebSlices Whitepaper at Microsoft.

Posted by shamanstears Filed in IE8
5 Comments »