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. Deef 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. Henrik 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. Soum 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. You’ve been kicked (a good thing) – Trackback from DotNetKicks.com

  5. Andrew 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. Dave 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. Mephiles 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. Xander 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? :-P Besides that, congrats on the beta and new features (especially ACID2!), obviously still improvements to be made but looking pretty solid so far.

  9. Nathan 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. karima says:

    Why do you use  new microformats ?

    You can use directly rdfa ?

  11. Russell says:

    can we microslice an RSS feed/reader?

  12. Joe 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. Opus 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. Rodrigo 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. Nick says:

    Please use existing microformats.

  16. Deef 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. kL 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. aoao 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. Daniel Glazman 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. Webdesign 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. Jan 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. Jan 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. activities 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. Eleasar 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. Mix08 3日目 (最終日) Developing Cutting Edge Web Applications with IE8

  27. Damian 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. Mix08 3日目 (最終日) Developing Cutting Edge Web Applications with IE8

  29. TerryLee says:

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

  30. Jordan 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. Deef 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. Aaron 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. Karim 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. EricLaw [MSFT] 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. grebulon 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. IEBlog says:

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

  37. TD says:

    Are Activities supports for intranet

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

  39. Brock 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. Microsoft talks up the new IE 8 Favorites Bar which, as it turns out, isn&#39;t so new: The Favorites

  41. Bink.nu says:

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

  42. Jan 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. I’m always looking up CVEs so I want to get to the data as quickly as possible, especially if I’m digging

  44. Bit-cycling says:

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

  45. IEBlog says:

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

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

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

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

  49. 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. topzengyi says:

    概述

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

    1.BuildingGreatAJAXApplicationsfromScratchU…

  51. IEBlog says:

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

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

  53. beqiraj.net says:

    Internet Explorer 8 Beta 2 Coming in August

  54. 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. IEBlog says:

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

  56. IEBlog says:

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

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

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

  59. Ivara blogs says:

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

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

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

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

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

  64. IEBlog says:

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

  65. IEBlog says:

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

  66. Tim Sneath says:

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

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

  68. IEBlog says:

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

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

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

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