Webslices and Activities in IE8 and FireFox
Introduction
The Beta 1 of the Internet Explorer 8 introduced two new features: Webslices and Activities. In Beta 2 Microsoft renamed the Activities feature to "Accelerators". In this tutorial I'd like to show you how they are implemented and used.Webslices
Defining a Webslice makes it possible for the user to subscribe to a section of your page. E.g. ebay [1] makes it possible to subscribe to current auctions by using webslices.Example
It's really easy to define them. Just take a look at the following code example:
<div class="hslice" id="slice01">
<h2 class="entry-title">Something</h2>
<p class="entry-content">This is the Content</p>
</div>
As you see, to define a webslice you need at least three elements. A container with the class "hslice" and an id (which is required to select the element using the DOM [2]). Inside this container you have to define an element with the class "entry-title" for the title of the Webslice and another element with the class "entry-content" for the content to be shown inside the Webslice.
Result
If you've correctly implemented a webslice a special icon will appear when hovering the element. In IE8 it might look like this:
You can now subscribe to the Webslice by clicking the icon. A label will appear in the toolbar on top. If you click it you will see the defined Webslice of your website:
Accelerators
IE8 Accelerators are implemented as context-sensitive menus. E.g. you can use Accelerators to digg this article OR you select a part of this text and use an Accelerator to Copy/Paste the text as a citation to your own blog. Microsoft provides some Accelerators on their Website ([3]), but it's possible for everyone to create and provide own Accelerators.Note: This feature was called "Activities" in IE 8 Beta 1
Example
To create an Accelerator you have to write an XML-based file in the OpenService format, which is designed and specified by Microsoft. The following snippet shows a valid OpenService document:
<?xml version="1.0" encoding="UTF-8"?>
<openServiceDescription
xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
<homepageUrl>http://geekmonkey.org</homepageUrl>
<display>
<name>Search on geekmonkey.org</name>
<icon>http://geekmonkey.org/favicon.ico</icon>
<description></description>
</display>
<activity category="share">
<activityAction context="selection" >
<preview action="http://geekmonkey.org/preview.php">
<parameter name="search" value="{selection}" />
</preview>
<execute method="post" action="http://geekmonkey.org/search/">
<parameter name="search" value="{selection}" />
</execute>
</activityAction>
</activity>
</openServiceDescription>
The document structure is splitted into three important elements. First one is "homepageUrl" which is used as identity together with the category of the activity. Second one is the "display"-element which tells the browser how to label the Accelerators. "display" comes with one required (name) and two optional child-elements (icon, description). Last and most important element is "activity". This element requires the attibute "category" whose value must be one of the following:
- add: For services like digg or del.ico.us
- blog: For blog applications (e.g. Blogger)
- define: To search for definitions (e.g. on Wikipedia)
- map: For map services (e.g. Google Maps)
- translate: For translation services (e.g. Babelfish)
- share: Everything else.
"activityAction" has an optional attribute "context" whose value is "selection" (default), "document" or "link" - defining in which context an activity should appear. Using different values for the context allows you to define different activity actions.
Every activityAction requires a child element named "execute". This element requires an attribute named "action" containing the unformatted URI to be called. The optional attribute method species whether GET or POST should be used to send data (default: GET). Inside of the "execute" element you can specify as many parameters as you wish. They contain an attribute "name", for the name of the variable to be sent and an attribute "value" for the value of the variable.
Optionally you can also add an element "preview" on the same level as "execute" to show a 320x240px sized preview. The attributes and child elements are similar to "execute". Notice that there will be no scrollbars in the preview, so everything bigger than 320x240px will be clipped. If you want to use links inside the preview, you'll have to set target="_blank" or JavaScript's "window.open(url);" otherwise the link will be opened inside the preview.
Result
As you can see, the example was also the whole implementation of a "Search Activity" for this website. Click the the button to check it out:Select a text and open up the context-menu (right-click). If you hover the Accelerators a preview of the search results is presented (at least in IE8):
In Firefox all this looks almost the same:
External links
- Microsoft.com - Accelerators developer guide:
- Firefox3 Webslice Extension
- Firefox3 Accelerators Extension
Comments (1) |
Comments
-
Traveling Tech Guy
I tried turning one of my blog's page elements (it's hosted on Blogger) into a web slice. While the wrapping works well, the element's content does not appear in the web slice. I beleiev this is due to the fact that the element is filled with data by a jscript at runtime.
I've viewed the source of your page, and it looks like the contet of your slice is already there (mine isn't). Is there, to the best of your knowledge, a way around this?
Thanks!
Guy