IE8: Building a Web Slice Does Not Guarantee Lighting Up the Button

Article
02/20/2010

What are IE8 Web Slices?

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. (Video of web slice here)

Based on my latest IE opportunities, there is a disconnect on the importance and/or implementation guidance of web slice notification, i.e. lighting up the web slice’s button to let the user know there is new content. It’s an important capability that is fundamental to a quality web slice that enables customer loyalty to the slice.

Update and Notification

Here’s what I’m communicating to my customers: building a web slice does not guarantee lighting up the button for your consumers, and this is one of the critical elements (in my opinion) for making a quality web slice experience. As well as visually appealing, nice navigation, frequent updates, and good information, the notification capability differentiates IE8 web slices and makes for a viable customer channel - so the customer can rely on a visual alert that new content is waiting. If the button doesn’t light up occasionally (close to daily), then the user will get bored with it and put in something more valuable – and get rid or yours or move it to a lesser area.

There are other fundamentals – so check out Matt Hester’s spin on this conversation here, where he talks about Discovery, Update, Preview, and Navigation. Matt also has a new book out on Windows Server 2008 R2 Administration.

IE8 Leverages Windows For Web Slices ?

One of the keys in understanding web slice update and notification is first knowing that there is the service called the Windows RSS Platform and it’s underlying Feed Download Engine. Yes, the web slice source (on the original web server where they subscribed from) is checked for new content even when IE8 is not running, and there’s even better news – a web slice developer doesn’t have to know any further details other than how to talk via HTML to tell IE8 how and when to check. Then, IE8 does all the communication with the Windows RSS API for us. The point of this paragraph is that IE8 treats the data of the web slice as an RSS Feed, and is notified when there is a difference between the last page cached and the data from the newest content check on that remote web server. Then it lights up the button.

What does MSDN say? In a section titled Controlling Updates and Notification, MSDN says: To check for updates, Internet Explorer compares the Web Slice against the cached version. The Windows RSS Platform updates feeds and Web Slices on a regular basis: by default, every 24 hours. However, if the Web Slice includes a ttl property , the Feed Download Engine will use the specified value to adjust its update schedule. The frequency can also be adjusted in the Web Slice Properties dialog box. This is a fundamental behavior that happens across web slices, no matter what development pattern you follow below.

Web Slice Development Patterns

The next trick then in understanding web slices is how to manipulate the HTML:

to expose the web slice (talked before about discovery here ) ,
to setup a dynamic web slice (an optional capability, referred to as Alternative Display and discussed here)
to express a separate update page for content checks (an optional capability, referred to as Alternative Update and described here).

And here’s the point of this post: there are 3 patterns for web sliceimplementation, and all can support notification. However, the problem is that sometimes folks don’t catch on to what is being cached from the web slice HTML, and then can’t understand why notification is not happening. Let’s look at the patterns:

The 1 Page Pattern

This is the static web slice, and where I use the term - “the 1 page pattern”. Static web slices are the basic example shown shown when you first look at web slices. Sure it works, but doesn’t allow for the cool interactive slices – due to IE8 stripping out interactive elements upon caching. Here’s an example:

    1: <div class="hslice" id="JonSlice01">
    2:     <h2 class="entry-title">Jon's Web Slice</h2>
    3:     <p class="entry-content">Web slices are really cool</p>
    4: </div>

The following 4 elements are fundamental to the definition (the first 3 are required for all patterns):

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. This attribute is used like a named anchor, as you’ll see in the other patterns.
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.

Interesting side note: entry-title and entry-content can be used multiple times in the definition. When they are, they are combined or concatenated.

So what makes the button of a static web slice light up? Either changing the button text or the content.

The 2 Page Pattern

What I call the “2 page pattern”, the IE8 doc’s refer to as Alternative Display. Some people also call this “a Dynamic Web Slice” because IE doesn’t strip out the active elements. Here’s the example from MSDN:

    1: <div class="hslice" id="auction">
    2:     <span class="entry-title">Auction Item</span>
    3:     <a rel="entry-content" href="display.html" style="display:none;"></a>
    4: </div>

The important difference here is line 3, where the entry-content is referring to the page that hosts the display of the web slice. This is Alternative Display, and is the basis for serving up web slices that feature JavaScript, Flash, and Silverlight.

But the problem with this sample is: what is IE8 caching so that it will light up the web slice button? In this case, the button text would have to change (the content in <entry-title> ). Otherwise, no notifications. This is what I’m seeing most people do, and it has an undesirable effect. This is the reason for this post actually.

There’s an addition here that does make the notification work. It’s the addition of another <entry-content> ( remember earlier I said a slice definition could have multiple of these which are combined). Therefore, you could build a web slice that looks like this:

    1: <div class="hslice" id="auction">
    2:     <span class="entry-title">Auction Item</span>
    3:     <div class="entry-content" style="display:none;">Cached Text</div>
    4:     <a rel="entry-content" href="display.html" style="display:none;"></a>
    5: </div>

So, the difference between the two examples is addition of line 3. Also note that we’ve added a style that makes the presentation invisible, but not to the Feeds System. By adding this line and changing the content of the DIV, IE8 will light up the button for that subscriber at the next feed cycle download.

One more point to “The Page Two Pattern” – it has several downsides:

server utilization and network bandwidth consumption – when done on a busy page, whether due to high traffic or resource intensive pages. When the IE clients’ Feed System checks for new content, the web server has to load and execute the entire page, when it only really needs to look for the content of the web slice. In these cases, I point people to the 3 Page Pattern (Alternative Display + Alternative Update).

when a site uses a web slice across multiple pages, there will be multiple places to change to initiate a notification to the subscribers (since the entry-content tag has to be changed on every discovery page. Some of my music customers are using this style - specifically they are not doing in-document discovery and only leveraging the Feeds Button option on every page in their site. I like the effect, as long as consumers become more aware of that green web slice icon lit up in the IE8 Command Bar. See Rodney Atkins, Bombshel, Lee Brice, or Lady Antebellum.

this is a minor issue but for folks who have not read this post - it’s not clear to the web developer how to code the discovery page to trigger updates. It wasn’t clear to me until I asked Giorgio for assistance, and the solution is subtle.

The 3 Page Pattern

The “3 page pattern” is when a web developer leverages Alternative Update and Alternative Display. This scheme takes slightly more implementation, but provides the benefits of flexibility, re-use across the site, better for the web server, easier for the developer to make the button light up, etc. The implementation is well documented and plenty of live examples are in the gallery. When working with companies on web slices, I go right to this pattern, and point folks to Giorgio’s explanations: H1N1 Flu (Swine Flu) Web Slice step-by-step and IE8 Web Slice and Silverlight (e.g. Imagine Cup). The latter example includes source code, and shows the 3 page pattern.

Why do I call it the “3 Page Pattern”? The 3 pages are: discovery, update page (Giorgio refers to this as the sync page, but it’s the basis of Alternative Update), and the display page (Alternative Display usage). The pages are linked in their HTML. The discover page points to the Update page, and the Update page points to the Display page. The extra effort that I refer to is creating this extra page (the Update page). The benefits of the update page – one place to update for content changes, the page has low requirements for the server to process, and web developers immediately catch on to what needs to happen for notifications to work.

This pattern has some oddity to it – at least to me. For example, there is a web slice definition in the discovery page and also in the update page – if you’re doing in-document discovery. The discovery page uses a new keyword we haven’t discussed, feedurl, which is what tells IE of the Alternative Update source. Also note that the web slice ID is included in the HREF, and that the invisible attribute is applied. Ultimately, no typical users will be looking for this URL – but I do for learning how to build them.

Here’s an example of a discovery page from the MSDN article:

    1: <div class="hslice" id="auction">
    2:     <span class="entry-title">Auction Item</span>
    3:     <a rel="feedurl" href="update.html#auction-update" style="display:none;"></a>
    4: </div>

Just to point out – when I tell folks to look at how these are implemented in live sites, it takes a little effort to look at the pages and click “View Source”. There’s an easier way if you have the slice installed. Look at the properties of the web slice by right-clicking on the button and selecting Properties. The address box contains the URL of the update page (when using Alternative Update).

One of the best examples recently is from Winchester (look at the Follow Us page to install the slice). When I look at the web slices properties, I see the following value: https://www.winchester.com/webslice/Update.aspx#spotlight. We can deduce several things from this URL,but I want to point out the use of the web slice ID, “spotlight”.

Here’s their update page:

    1: <div class="hslice" id="spotlight">
    2:         <div class="entry-title">Winchester Updates</div>
    3:                 
    4:         <div class="entry-content">
    5:             <span id="placeholder">2/16/2010 10:00:00 AM</span>
    6:         </div>
    7:        <a rel="entry-content" href="WebSlice.aspx" style="display: none;" />
    8:               
    9:         <a href="https://www.winchester.com" rel="Bookmark" style="display: none" target="_blank" />
   10:         <span class="ttl" style="display: none">15</span>
   11:         
   12:     </div>

Key Point - their CMS just updates the date/time to initiate the notification for their subscribers. This could be any text, and date/time is not required.

Another example that I show folks for “the 3 Page Pattern” is Dolly Parton’s site, which has a Silverlight web slice. Their update page is to the point! If you look at this tiny page, it doesn’t even follow HTML standards. But it’s easy for the server to serve it up. Their content value to initiate the update is some type of number that I couldn’t even guess at. Again, the RSS Feeds System just needs to detect a different set of text.

    1: <div class='hslice' id='stream_update'><span class='entry-title' style='display: none;'>Dolly Parton's Media Stream Updated on 02/19/2010</span>
    2:     <span class='entry-content' style='display:none;'>1266598913</span>
    3:     <a rel='entry-content' href='https://dollypartonmusic.net/websliceContent/silverslice.html' style="display:none;"></a>
    4:     <a href="https://dollypartonmusic.net" rel="bookmark" style="display: none" />
    5: </div>

So, the display page in “the 3 Page Pattern” is whatever you want it to be. For some of my sites, it’s a Silverlight or Flash object tag, or a JavaScript based page. The point is: it’s just a HTML page with small screen real estate.

For ASP.NET Developers

And for you ASP.NET shops looking at IE8, check out the Microsoft Web Application Toolkits, specifically the Web App Toolkit for IE8 and the IE8 kit CH9 video. It includes several controls for implementing the IE8 add-on’s, including web slices.

Conclusions

Don’t forget to make the best web slice experience for your consumers – by using notification!

Special thanks to Giorgio Sardo, who has been educating me and my customers over these months. I wouldn’t have the above background without his assistance.