Home » Featured

IE8 Webslices

20. June 2010 by thebeebs 0 Comments

Web Slices are small pieces of syndicated content that enable users to subscribe to pieces of Web sites and notify users when these pieces have been updated. This frees the user from having to periodically check the Web site for updates.

 

Under the hood IE8 uses the Windows RSS Platform and it’s underlying Feed Download Engine to poll the server providing the webslice and compares the last page cached with the data served by the web server. If there is a difference IE8 turns the text bold on the webslice button to signify to the user that something has updated. If users don’t like being popular and want to annoy their co workers they can even hook up a sound to inform them that there has been an update.

 

Before Update
Before Update

After Update
After Update

 

Creating a standard webslice is simple we use the following HTMl Markup:

 

<div class="hslice" id="mywebslice">
  <h2 class="entry-title">Web Slice Title</h2>
  <p class="entry-content">Sample Content</p>
</div>

 

The following 4 elements are fundamental to the definition:

  • the class tag hslice that alerts IE8 that web slice content is coming.
  • the ID attribute is critical, since multiple slices can be on a page. 
  • the class tag entry-title indicates what the text in the web slice button.
  • the class tag entry-content is more than just telling IE8 the content to show in the preview window, it’s also the data that get’s cached in the Feeds System.

 

The problem with using the mark-up above is that we can't support JavaScript, Flash or Silverlight, which in most scenarios makes webslices useless. Luckily however we are able to use some slightly modified mark up which tells IE8 to use an Alternative display.

We can tell IE8 to use an alternative display by adding the <a rel="entry-content"/> mark up. The href attribute tells IE8 where to find the content it should display.

 

<div class="hslice" id="mywebslice">
   <span class="entry-title">Web Slice Title</span>
   <a rel="entry-content" href="display.aspx" style="display:none;"></a>
</div>
 

Sadly however IE8 won't look to the Alternative Display content and check it is updated, so as far as IE8 is concerned the data is never updated because the Markup never changes. This means the user doesn't get their browser button going bold to signify that new information is available.

 

We managed to solve this by creating a control and a page base class.

 

The control not only generates the mark up for the webslice, it also checks the content of the page page and creates a small hash string that represents the page and appends this to the href attribute of the entry-content element.

 

If their has been a change then the hash string changes which means the actual mark-up is modified and IE8 recognises this as an update. You can see below an example of what the Hash string looks like in action.

 

<div class="hslice" id="mywebslice">
   <span class="entry-title">Web Slice Title</span>
   <a rel="entry-content" href="display.aspx?AltSlice=true&Hash=S7MfNEymx0w1" style="display:none;"></a>
</div>

 

To use the control make sure the page you create is inherited from the the class WebSliceBase, then just add the control to your page

 

<cc1:SlicePlaceHolder ID="NewsDiv" runat="server"  WebSliceTitle="Web Slice Blog" WebSliceRefreshIntervalInMins="15">
Put you dynamic content in here
</cc1:SlicePlaceHolder>
 
 

You can download the project here: http://www.thewayithink.co.uk/WebSliceLib.zip

Add comment


(Will show your Gravatar icon)  

  Country flag

biuquote
  • Comment
  • Preview
Loading