Create a dynamic Web Slice in 5 minutes

IEBlog

Windows Internet Explorer Engineering Team Blog
Languages
Feeds & more
Search
Archives
Archives
Links
IE Sites
Other Sites
MSDN Blogs > IEBlog > Create a dynamic Web Slice in 5 minutes

Create a dynamic Web Slice in 5 minutes

3 Mar 2009 6:25 PM
  • Comments 50

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!

What is a dynamic Web Slice?

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.

picture a a live.com seattle weather webslice.

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!

Creating a “live display” Web Slice

Let’s start with this basic template WebSlice.htm –

<html>
<head>
<title>Web Slice Example</title>
</head>
<body>
   <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>
   </div>
</body>
</html>

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?

Serving “live” content

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).

  1. If there is any change in WebSlice.htm, a fresh copy of WebSlice.htm is fetched. When the user clicks on the Web Slice, the current copy of LivePreviewPage.htm is served and cached.
  2. If there is no change to the title and entry-content property of WebSlice.htm, when the user clicks on the Web Slice, the previously cached copy of LivePreviewPage.htm is served. In this case, there could be inconsistency between the preview window display and the actual web page.

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” -

  • Update WebSlice.htm for changes to reflect in accordance with the set sync schedule.
  • If you want to make sure that the user always sees a “live” copy of LivePreviewPage.htm every time she clicks on the Web Slice add the no-cache Cache Control header to LivePreviewPage.htm. This will ensure that the display in the preview window is always consistent with the actual LivePreviewPage.htm.
  • You can also change the title on WebSlice.htm to update with the sync schedule. This is especially useful if you want to display the updated temperature in the title bar for a weather Web Slice.
  • Another optional property you can use is endtime. This specifies the expiration time of a Web Slice. For example, it can be used to indicate an expired item for an auction Web Slice. 
<span class="endtime" title="25 Jul 2008 17:30:00 PST" style="display:none;">Expiration Time</span>

Design a usable dynamic Web Slice

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 –

  1. The default size for dynamic Web Slices is 320x240. We strongly recommend that you design your Web Slices to conform to this size. Users do have the option of manually resizing a Web Slice for their convenience, but we wouldn’t like to compel them to do so in order to see all your content.
  2. Another consideration to bear in mind is performance. We encourage you to leverage the functionality available with dynamic Web Slices, but to make sure that it renders in less than 500ms to keep the preview window usable.
  3. While users are able to navigate within the preview window itself, it is not encouraged to host navigations to complex pages. The preview window has stricter security restrictions and blocks dialogs, the Information bar, popups etc.  Moreover, Web Slices are a great way to attract users to your actual web site and you can explicitly set links in preview windows to open in a new tab in the browser by using the target="_blank" attribute. Note that cross zone navigations from the preview window are blocked. 
<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. 

Comments
  • Loading...