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.
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.
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.
The next trick then in understanding web slices is how to manipulate the HTML:
And here’s the point of this post: there are 3 patterns for web slice implementation, 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:
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>
The following 4 elements are fundamental to the definition (the first 3 are required for all patterns):
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.
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>
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:
3: <div class="entry-content" style="display:none;">Cached Text</div>
4: <a rel="entry-content" href="display.html" style="display:none;"></a>
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:
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:
3: <a rel="feedurl" href="update.html#auction-update" style="display:none;"></a>
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: http://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>
4: <div class="entry-content">
5: <span id="placeholder">2/16/2010 10:00:00 AM</span>
7: <a rel="entry-content" href="WebSlice.aspx" style="display: none;" />
9: <a href="http://www.winchester.com" rel="Bookmark" style="display: none" target="_blank" />
10: <span class="ttl" style="display: none">15</span>
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='http://dollypartonmusic.net/websliceContent/silverslice.html' style="display:none;"></a>
4: <a href="http://dollypartonmusic.net" rel="bookmark" style="display: none" />
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.
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.