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.

Activities List

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>

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.

WebSlice from 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:

WebSlice Icon in command bar

WebSlices also appear when you are hovering over a WebSlice region within a webpage:

WebSlice 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:

  • StumbleUpon – Get the buzz on latest sites.
  • Facebook – Keep track of your friends’ status.

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.

Edit 4/21/09: removing extraneous closing openServiceDescription tag from Live Maps example.

Comments (71)

  1. Anonymous says:

    Absolutely love the activities and slices.

    I’ve got an idea for a possibly better support of the activities. What if you could wrap text with a tag (or attribute in the tag) to specify what category the content is best matched with. Especially for addresses and company names!

    fex. an address could be wrapped with <div ie-activity="map,find">Microsoft, Redmond, US</div>

    (ps: when selecting text in a textbox or textarea, the activity context menu also appears, don’t know it that really useful)

  2. Anonymous says:

    @Deef: Or why not use the existing microformats that are developed by the community, for your example check out http://microformats.org/wiki/adr.

    And if you want to try that out download Operator (http://www.kaply.com/weblog/2008/02/29/operator-09g-release-candidate-available/) for Firefox 3 and you’ll find that this is already availible… 🙂

  3. Anonymous says:

    It is mentioned in the documents that the Activity pop-up menu is context sensitive. Could you please clarify what that means? I had the impression that it means that the options in the menu would vary depending on the selection. In other words, it would use some form of Entity Extraction ( http://labs.live.com/Entity+Extraction.aspx ) [or that it is just Smart Tags repackaged]. Or probably it would show up if the text is semantically marked up with microformats. But from use it does not seem to be context-sensitive at all – I always get the same menu options. So where does this context-sensitivity figure in? Does it behave differently when the text is semantically marked up (using microformats or the technique Deef suggested above; but prefer microformats to anything proprietary). If not, you should consider that.

  4. Anonymous says:

    You’ve been kicked (a good thing) – Trackback from DotNetKicks.com

  5. Anonymous says:

    I’m using it to track comments on my blog. I have set up the latest comment as a slice.

    I am still experimenting with the best way to do it, but it seems handy.

    The context sensitive nature of styles helps, it lets you make most of the slide not display on the page, just in the slice viewer. I am thinking of using this make the viewer scroll so I can put all of the comments in it.

  6. Anonymous says:

    While i think its fine to define your own microformat like css,

    1) Don’t call it a microformat, its not.

    2) encourage users to actually mark this data as correct hatom, by also including an hentry for each item, and where applicable grouping items as hfreeds.

    3) Try to standardize your format at microformats.org.

  7. Anonymous says:

    What HTML5 tags and attributes do you support? I’d like to put them in Wikipedia. I’d like to use them on my website ^_^

  8. Anonymous says:

    The first thing that sprang to mind when I saw the WebSlices icon was (a slightly rotated version of) the Ubisoft logo, in particular the animated version at the start of their games (e.g. Prince of Persia and Rainbow Six). See http://www.ubi.com/AU/Default.aspx – or is it just me? 😛 Besides that, congrats on the beta and new features (especially ACID2!), obviously still improvements to be made but looking pretty solid so far.

  9. Anonymous says:

    "Or why not use the existing microformats that are developed by the community"

    Agreed, why do MS keep re-inventing the wheel rather than getting involved with communities and advancing technology that already exists and is widely used?

    This just looks like more proprietary junk to add to the mix IMO.

  10. Anonymous says:

    Why do you use  new microformats ?

    You can use directly rdfa ?

  11. Anonymous says:

    can we microslice an RSS feed/reader?

  12. Anonymous says:

    Two pieces of feedback for slices:

    a) Allow me to configure if they show up in the favourites bar (I never use it…wastes space)

    b) When in the feeds area, have it view in s similar fashion as as the drop down in the favourites.

  13. Anonymous says:

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

    "1" is an ilegal ID name. The examples you post on sites like this could all too easily cause others to copy bad code like this or cite it as an example of what is acceptable and break the web even more.

    Please try and make your code examples standards compliant.

  14. Anonymous says:

    What about Google? Since it’s the most used e-mail  and Blog, why I can’t seen an "Share in Blogger" or "Gmail" in Activities button?

    WebSlices in favorite bar already exist in latest version of Google Toolbar…

    What about memory usage in IE8? It’s a big problem too…

  15. Anonymous says:

    Please use existing microformats.

  16. Anonymous says:

    @Henrik and the rest: didn’t know about the microformats, but that’s the idea behind what I was suggesting…

    @Rodrigo: i’m sure activities for several google tools will become available in the near future

    A tag in the HEAD should also be a possibility to block/disable activities all together on a page. I’m sure there will be people who don’t want it to be used on their site.

  17. Anonymous says:

    Can you please also define (and ideally support) [link rel=openservice-activity] or similar for inclusion in [head]?

    Just like with feeds, I’d like this services to be automatically discoverable by UAs without JavaScript guesswork involved.

  18. Anonymous says:

    whitepaper on WebSlices @ page 8  Feed URL

    &lt;a rel=&quot;feedurl&quot;ref=&quot;auction.microsoft.com/item.xml&quot;&gt;Subscribe

    to WebSlice&lt;/a&gt;

    ref or href??? -_-b

  19. Anonymous says:

    I started implementing WebSlices for Firefox…

    http://tinyurl.com/238dhc

  20. PatriotB says:

    I think a lot of people here are confused about Activities.  They are things that the page knows nothing about — the user selects some text and then chooses to perform an activity on that text.  A page being able to "disable" activities would be confusing — the user would select some text and wonder why are my activities not showing up?

    The page doesn’t mark anything up or do anything in order for activities to work.  Maybe in the future, certain types of activities could be "suggested" through marking up sections of pages with microformats.  That’s not what activities are currently about, however.

  21. Anonymous says:

    I’m using it to track comments on my blog. I have set up the latest comment as a slice.

    I am still experimenting with the best way to do it, but it seems handy.

    The context sensitive nature of styles helps, it lets you make most of the slide not display on the page, just in the slice viewer. I am thinking of using this make the viewer scroll so I can put all of the comments in it.

  22. Anonymous says:

    Webslices are great, activities are great, BUT

    Why do we have to go through so many menu’s to select and use the activity?

    First select the text, then select the arrow, then select the provider and then navigate to for example to map pop out menu. It’s a disaster and reminds me of the windows XP start menu.

    The arrow step is not needed if you ask me. The user explicitly selected the text: that means they want to do an activity. Why not take a look at Microsoft Word and see how the format toolbar pops into and fades out of place when you make a text selection and move your mouse around. This could be done as well for the activities provider list (remove the arrow step completely).

    Second, the ‘more activities’ item is really a bad choice, because it pops out yet another menu. Please don’t revert to submenus as it makes user interaction really bad. If I look through this list many of the items are duplicates of the main list (not needed), others offer non default search options (include in the main list the option to copy the selection to the search bar; or include the 3 most frequently used search providers in the main list) and manage activities (these should be in the toolbar).

  23. Anonymous says:

    I forgot to add about webslices:

    All links on the webslice should open in a new tab. Including the Open link of the window itself (don’t steal my current page).

  24. Anonymous says:

    Looks like "Activities" are another attempt at introducing smart tags into the browser, after the first attempt at promoting microsoft servies in the browser through smart tages had met with violent protest, doesn’t it?

  25. Anonymous says:

    What about encoding? If the encoding is correctly set in the headline and you create a webslice of a part the umlauts are not anymore correctly displayed.

    Is there any way to look at the generated source code to debug what IE is using for a preview?

  26. Anonymous says:

    Mix08 3日目 (最終日) Developing Cutting Edge Web Applications with IE8

  27. Anonymous says:

    Given the theme out of this blog recently has been inter-compatibility and openness I’d thought I’ll raise this for your attention. Firefox already has extensions working for both of these features, if you’d like to give any input, particularly on native support then you can do so here:

    Activities: https://bugzilla.mozilla.org/show_bug.cgi?id=421218

    WebSlices: https://bugzilla.mozilla.org/show_bug.cgi?id=421504

  28. Anonymous says:

    Mix08 3日目 (最終日) Developing Cutting Edge Web Applications with IE8

  29. Anonymous says:

    概述由于最近忙着写Silverlight2系列文章了,所以本期推荐比较少,只有6篇文章:)1.BuildingGreatAJAXApplicationsfromScratchUs…

  30. Anonymous says:

    @Jan: Just because a user selected some text doesn’t mean they want to perform an activity. I copy/paste a lot from IE to OneNote and others, and having the popup come up automatically when I select text would just be annoying.

    On a similar note, even though I know I won’t be answered here, how about allowing Activites to be used elsewhere? A plug-in for OneNote would be great 🙂

  31. Anonymous says:

    Attention developers:

    Small (or rather big depending on how you look at it) problem with the activity ‘map with live maps’. When the address is spread over multiple lines, the lines are put together without any space between them.

    Please fix this, either in IE8 or in Maps.

    I don’t know if there’s a "CRLF" between them.

  32. Anonymous says:

    I’d like to see an activity that uses Add to Any to share with any social website… http://www.addtoany.com

    Also, maybe an "Add" section would be good to have in the categories since it lets users add instead of "share" to certain sites.

  33. Anonymous says:

    What kind of text does the activity send to the service? Just the plain text or html? I think getting the html (or both) could be very useful.

  34. Anonymous says:

    @Karim: The designer of the activity gets to decide.

    See the OpenService Specification link in the post.  You can set the Type to "HTML" like so:

    <parameter name="body" value="{selection}" type="html" />

  35. Anonymous says:

    Seems like webslices don’t work inside a frame. If you’re using a frameset and the hslice is inside a frame, you won’t see the icon and the button will not appear. This will only show up at the toplevel frame. At least in IE8 beta 1…

  36. Anonymous says:

    Hi, my name is Helen, I am a Program Manager on the User Experience team of Internet Explorer, and I’m

  37. Anonymous says:

    Are Activities supports for intranet

  38. Anonymous says:

    Hi, my name is Helen, I am a Program Manager on the User Experience team of Internet Explorer, and I

  39. Anonymous says:

    Suggestion on Activities:

    When using activities, sometimes there are several actions I might like to perform from one website. For example when choosing an address: For Live Maps I might like to either map the address or get directions to the address. Currently that would display as two separate top level items in the activities menu, but both are for maps.live.com. It would be nice if I could define a top level item in the activities menu which represents a site (maps.live.com) and then submenus which represent the various services that site might provide. There might be 5 different activities I’d like related to maps.live.com and this could easily lead to bloat in the activities menu. For sites that only provide one action, keep it as a top level menu, but for sites that might provide several actions allow them to build out submenus.

  40. Anonymous says:

    Microsoft talks up the new IE 8 Favorites Bar which, as it turns out, isn&#39;t so new: The Favorites

  41. Anonymous says:

    Hi, my name is Helen, I am a Program Manager on the User Experience team of Internet Explorer, and I

  42. Anonymous says:

    I develop a my first Activity for the Internet Explorer 8. You can copy text to your Serendipity Blog.

    Try it:

    http://www.xp-dev.de/index.php?archives/33-English.html&serendipity[lang_selected]=en

  43. Anonymous says:

    I’m always looking up CVEs so I want to get to the data as quickly as possible, especially if I’m digging

  44. Anonymous says:

    One of the interesting things about the new IE8 WebSlices (read Jane Kim’s overview of both Activities

  45. Anonymous says:

    One of our goals with Internet Explorer 8 was to improve the experience of managing add-ons by bringing

  46. Anonymous says:

    Our friends over in the Internet Explorer building recently released a developer preview version of IE8.

  47. Anonymous says:

    While at Cuesta College in San Luis Obispo I was doing a demonstration of Internet Explorer 8 Beta and

  48. Anonymous says:

    So after using IE8 for a while now, there are a few things that are useful for people to keep in mind.&#160;

  49. Anonymous says:

    So, I have been playing with the IE8 beta, and specifically the new "Activities" feature – essentially, web-servicy features that you can call from any page and pass a selection to. And to try that out, I figured I’d put…

  50. Anonymous says:

    概述

    由于最近忙着写Silverlight2系列文章了,所以本期推荐比较少,只有6篇文章:)

    1.BuildingGreatAJAXApplicationsfromScratchU…

  51. Anonymous says:

    In addition to the features for developers we showed in IE8 Beta 1 , we’ve been working on great new

  52. Anonymous says:

    The IE blog whittles down the IE 8 Beta 2 date a bit further: In addition to the features for developers

  53. Anonymous says:

    Internet Explorer 8 Beta 2 Coming in August

  54. Anonymous says:

    The talk of the “town” tonight is Mozilla’s neat new Firefox add-on called Ubiquity . This add-on is designed to “connecting the Web with language in an attempt to find new user interfaces that could make it possible for everyone to do common Web tasks

  55. Anonymous says:

    We’re excited to release IE8 Beta 2 today for public download. You can find it at http://www.microsoft.com/ie8

  56. Anonymous says:

    As Paul mentioned in Part 1 of this post, we’ve really focused on making your everyday browsing experience

  57. Anonymous says:

    The next beta for Internet Explorer has been released for broad distribution to the public, according

  58. Anonymous says:

    Как уже отмечалось в статье , мы сосредоточили свое внимание на том, чтобы сделать ежедневный интернет-серфинг

  59. Anonymous says:

    Beidzot esmu saņēmies un gatavs ielikt papildus informāciju no savas prezentācijas par jaunajām IE8 iespējām

  60. Anonymous says:

    I have been running IE8 as my default browser since Beta 2 was released a few months ago and I have been

  61. Anonymous says:

    Una de las caracterisiticas mas interesantes que nos trae Internet Explorer 8 es la posibilidad de “suscribirnos”

  62. Anonymous says:

    One of the coolest new features of IE8 are Web Slices – portions of a web page you can subscribe to and

  63. Anonymous says:

    Новые специальные возможности в Internet Explorer 8 Привет, меня зовут ДжейПи Гонсалес-Кастеллан (JP

  64. Anonymous says:

    Web Slices are a cool new feature in Internet Explorer 8! With Web Slices, users can add little snippets

  65. Anonymous says:

    Hello, my name is Amy Placzkiewicz and I’m a Lead Software Design Engineer in Test on Internet Explorer’s

  66. Anonymous says:

    Dean Hachamovitch is the General Manager for the Internet Explorer team. Amazingly, he managed to blog

  67. Anonymous says:

    Как за пять минут создать динамический веб-фрагмент Веб-фрагмент – это новая функция Internet Explorer

  68. Anonymous says:

    Accelerators are a robust and customizable way of bringing you closer to the services you use most. We’ve

  69. Anonymous says:

    I love my footy . Anyone that knows me, knows this to be true. One of the sites I go to all the time

  70. Anonymous says:

    Интересные ускорители для IE8 Ускорители – это очень удобный (и настраиваемый) способ взаимодействия

  71. Anonymous says:

    Аутентификация через веб-фрагменты и RSS Привет, меня зовут Эми Плацкевич (Amy Placzkiewicz) и я являюсь