Web Slices are a cool new feature in Internet Explorer 8! With Web Slices, users can add little snippets of the web to the favorites bar and monitor their updates. Web Slices were introduced in a previous post here. In this post, I want to walk you through creating a dynamic Web Slice in as little as 5 minutes!
Dynamic Web Slices use an Alternative Display Source (not to be confused with Alternative Update Source). As the name suggests, the content displayed in the preview actually comes from a “live” web page which the Web Slice points to. They are an addition based on feedback from the Beta 1 release of Internet Explorer and facilitate styling and cookie handling for authentication. A key advantage is that the web page is rendered in the preview window without losing any styling elements or active content. Hosting active content was not possible with static slices (Web Slices not using alternative display source). Static slices generate a preview of the sanitized entry-content element cached by the Windows RSS Platform which is stripped of script and other active content. Here is an example of a dynamic Web Slice from Live Search which has the display source pointing to a page on www.live.com rather than displaying cached content from the RSS store.
Web Slices using Alternative Display Source also make it easy for web developers to enable authentication within the preview window itself as well as have their customers protected against common internet security vulnerabilities such as Phishing and identity theft. Later this week we will be posting more details about Web Slice authentication.
Moreover, a dynamic Web Slice is easy (and fun!) to create! So, set the clock for 5 minutes and let’s go right into making one!
Let’s start with this basic template WebSlice.htm –
<title>Web Slice Example</title>
<div class="hslice" id="SliceID">
<span class="entry-title">Slice Title</span>
<a rel="entry-content" href="LivePreviewPage.htm" style="display:none;">Alternative Display Source – LivePreviewPage.htm</a>
<p>Updates occur every <span class="ttl">15</span> minutes.</p>
<a rel="bookmark" href="LivePreviewPage.htm" style="display:none;">Bookmark – LivePreviewPage.htm</a>
The class hslice helps Internet Explorer identify this snippet as a Web Slice. Fill in the template with the Web Slice id and title. Both are required properties. The title is displayed on the Favorites bar when the user adds the Web Slice.
The link tag’s entry-content attribute specifies the alternative display web page which is the source of the content displayed in the preview window of the Web Slice. This is where the RSS platform will look to see if anything has changed. The URL of the alternative display page is displayed in the navigation band at the bottom of the preview window.
The ttl property is optional and sets the default sync schedule for the Web Slice. This time can be modified to a higher value by the user. The user can hit the refresh button on the navigation band to refresh the alternative display web page within the preview window.
The optional bookmark property can be used to navigate to the alternative display web page (or any other page) when the user clicks on the Go arrow on the navigation band. The page is then opened in the current tab in the browser.
That’s it! You’re done! Wasn’t that super easy?
A few key things to note here -
As per the sync schedule, the Windows RSS Platform will ping WebSlice.htm, not LivePreviewPage.htm (the display source).
In both cases, if the user manually hits refresh, the current copy of LivePreviewPage.htm is displayed and cached. Thus, here are a few tips in order to ensure that the content in the preview window is “live” -
<span class="endtime" title="25 Jul 2008 17:30:00 PST" style="display:none;">Expiration Time</span>
Dynamic Web Slices retain all the styles from the preview web page, including those inherited from external stylesheets and look just like the actual web pages. However, there are a few things to bear in mind –
<a href="http://www.example.com" target="_blank">This link will open in the new tab in the browser</a>
The Web Slice Style Guide has a section on Web Slices using Alternative Display Source containing great tips to make your Web Slices look pretty!
You can see how simple and useful they can be! I hope that you will have fun creating really neat Web Slices for your web pages. The IE 8 Gallery has a ton of great Web Slices along with other IE add-ons.
Ritika Virmani Program Manager Internet Explorer - Web Slices and Navigation
Update 3/9/09: Updated the code samples for better accessibility. Thanks Benjamin Hawkes-Lewis for the feedback.