Developing for IE8 (Accelerators and Web Slices)

Lately I wrote an article for MSDN to introduce Accelerators and Web Slices in IE8 and show how to build them.

Here is an overview:

Web Slices bring the user’s favorite data (sports scores, weather reports, stock quotes, etc.) directly into the Favorites Bar. So Web Slices are like snippets of a page that a user can subscribe to. Changes and updates are retrieved and users are notified visually of the updated information status. Like any page, a “slice” can display text, links, pictures and even RIA elements (Silverlight!)… think about RSS on steroids.

[…]

Creating a Web Slice
Web Slices can be hosted in any web page. In fact you just have to define which part of you page can be “sliced” for the user. That means that you can turn any part of an existing web page into a Web Slice!

Web Slices use a combination of the hAtom microformat and the Web Slice format to describe a subscribable portion of a webpage.

hAtom is a microformat for content that can be syndicated, primarily but not exclusively weblog postings. hAtom is based on a subset of the Atom (http://www.atomenabled.org/) syndication format. hAtom will be one of several microformats open standards. More information

So to enable a Web Slice on your website, you just annotate your page with specific class names for the title, description, and content.

Here is the basic skeleton of a Web Slice:

<div class="hslice" id="sliceId"> 

  <p class="entry-title">My Slice Title</p> 

  <div class="entry-content">

    … 

  </div> 

</div>

hslice defines the Web Slice section and must have an Id.
entry-title is the title which appears in the favorites bar.
entry-content is the body of your Web Slice (you can use any HTML content here).

[…]

Accelerators in IE8 are contextual services to quickly access information from another website in your current browser page. The goal here is to be more efficient than the old "copy-navigate-paste" model. As soon as users select some text in a page, a blue icon appears to list available accelerators. Clicking on an accelerator opens a new tab with desired results. Optionally accelerators can have a preview window.

For example, suppose you’re on a page with a street address. You can highlight the address and choose an Accelerator such as Map with Live Maps. The accelerator will then display the map in a pop-up or open another tab, depending on how the Accelerator has been written for that site.

[…]

Creating an Accelerator
Building an Accelerator is really just about creating an XML file which describes your service. Results can be fetched from any service that can be queried over HTTP (GET or POST requests). This includes popular search engines like Live Search or Google but also sites such as Wikipedia, Facebook, eBay, Yahoo, Twitter or Digg.

[…]

Here is a sample code using the Live Search query URL passing the user’s selected text as “q” parameter in querystring to get related images:

<?xml version="1.0" encoding="utf-8"?>

<os:openServiceDescription xmlns:os="http://www.microsoft.com/
   schemas/openservicedescription/1.0">

  <os:homepageUrl>http://search.live.com/</os:homepageUrl>

  <os:display>

     <os:name>Search Images with Live Search</os:name>:

     <os:description>Find related images with Live Search</os:description>

     <os:icon>http://search.live.com/s/wlflag.ico</os:icon>

  <os:display>

  <os:activity category="Search">

     <os:activityAction context="selection">

       <os:execute action="http://search.live.com/images/results.aspx" method="get">

         <os:parameter name="q" value="{selection}" type="text"/>

       <os:execute>

     </os:activityAction>

  </os:activity>

</os:openServiceDescription> 

The heart of your Accelerator is defined by these XML elements. The XML document is based on the OpenService specification:

os:activityAction specifies the interaction with the service provider based on the target of the Accelerator. The optional context attribute specifies the target: document, selection (default), or link.

os:execute specifies the action (page to call) when the user invokes the Accelerator and the method (GET or POST).

os:parameter specifies the parameters for the page. Note the use of a special variable {selection} which represents the user’s highlighted text. Alternatively, the variable {link} can be used to get the href of a selected link.

[…]

Read the full article here:
http://www.microsoft.com/youshapeit/msdn/content/knowledge/2008-10/ie8_improve_the_browsing_experience.aspx

Also check my Accelerators available on the IE gallery: