Activities and WebSlices in Internet Explorer 8
If you’re like me, you’ve found that it’s pretty hard to keep track of all the new services and sites out there, let alone the ones we use every day. I bookmark my favorite sites and services, but still spend a lot of time trying to find them. A couple of months ago, a friend showed me a service that finds related videos. I ran across a blog that showed a funny video on chinchillas and wanted to see similar videos. I spent 5 minutes looking for the service in my Favorites. When I finally found it, I had to copy and paste the text “chinchilla” (spelling is not my forte) to the site. ARG.
I’m happy to share that we have two new features in IE8 that makes this easier: Activities and WebSlices.
Activities
With Activities, you can access your services from any webpage. Activities simplify the common task of copying, navigating, and pasting into a single action. Just make a selection and click on the Activity button or context menu to view your services.
An example of a popular Activity is a mapping service. With this Activity, I can highlight an address, select my map service of choice, and see a preview of the location immediately. Clicking on the map opens a new tab to the full mapping website where I can get driving directions, aerial view and more features.
Here are some other Activities that you may find helpful:
Under the hood, an Activity uses a simple XML format called OpenService. Just implement an XML file that describes how your service works with URL templates. The main functions of an Activity are:
- Preview: viewing a mini representation of the service results on hover of the Activity
- Execute: opening the service in a new tab when the user clicks on the Activity
Here’s one for Windows Live Maps:
<?xml version="1.0" encoding="utf-8" ?>
<openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
<homepageUrl>http://maps.live.com</homepageUrl>
<display>
<name>Map with Live Maps</name>
<icon>http://maps.live.com/favicon.ico</icon>
</display>
<activity category="Map">
<activityAction context="selection">
<execute action="http://maps.live.com/default.aspx?where1={selection}"/>
<preview action="http://maps.live.com/geotager.aspx">
<parameter name="b" value="{selection}" />
<parameter name="clean" value="true" />
<parameter name="w" value="320" />
<parameter name="h" value="240" />
<parameter name="format" value="full" />
</preview>
</activityAction>
</activity>
</openServiceDescription>
</openServiceDescription>
You can provide a button directly from your site for users to add your Activity:
<button onclick="window.external.addService('http://foo.com/map.xml')">Add Map Activity</button>
Check out the Activities that are available on the Service Guide and create your own using our whitepaper on Activities.
WebSlices
WebSlices bring your favorite pieces of the web with you. WebSlices are portions of a webpage that you can subscribe to and view updates directly from the Favorites bar.
WebSlices let you subscribe to a portion of webpage to get updates and view these changes without having to go back to the site. Let’s say that you’re an eBay addict like me, and you’ve got your heart set on a 80’s Swatch watch. With WebSlices, I can subscribe to the auction item and know when there is a price change directly on the browser chrome.
When a website supports WebSlice, the purple WebSlice icon appears in the Commandbar:
WebSlices also appear when you are hovering over a WebSlice region within a webpage:
Clicking on the WebSlice button adds the WebSlice to the Favorites bar. In the background, IE checks for updates on a schedule. When IE finds an update, the item on the Favorites bar bolds. You can click on the item to view the details.
Try it out with on the IE8 eBay site! Go to http://ie8.ebay.com and type in a product like “swatch watch” in the search box at the bottom right of the webpage.
You can try out WebSlices on these sites, too:
There is a known issue with WebSlices that use cookies for authentication on Vista with Protected Mode on. If you are having issues with the Facebook WebSlice on Vista, delete the Facebook WebSlice from the Favorites bar, run IE8 in elevated mode (right-click on IE8 and select the “Run as administrator” option”) and re-subscribe to the WebSlice.
To enable a WebSlice on your site, just add HTML annotations to your webpage. A WebSlice uses a combination of the hAtom Microformat and the WebSlice format.
<div class="hslice" id="item123">
<p class="entry-title">FLASHLIGHT! Unique Swatch …</p>
<div class="entry-content">starting bid $44.99
…
</div>
</div>
By adding these three annotations, IE recognizes that it is a WebSlice and treats it like a feed; handling the discovery, subscription, and processing of the WebSlice. You can also add additional properties to a WebSlice, such as expiration, time-to-live value, and an alternative source. Read the specification for these properties and use our whitepaper on WebSlices to get started on your own WebSlice.
Activities and WebSlices help you get to the sites and services that you care about. They’re also designed to work with your service as it exists today without having to deploy any client side code.
I can’t wait to see what you can do with these new features!
Jane Kim
Program Manager
P.S. All trademarks are property of their respective owners.
Edit: Update post time; updated <div class="hslice" id="item123">; added P.S.
