Freigeben über

Activities and WebSlices in Internet Explorer 8

  • Artikel

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="https://www.microsoft.com/schemas/openservicedescription/1.0">

<homepageUrl>https://maps.live.com</homepageUrl>

<display>

<name>Map with Live Maps</name>

<icon>https://maps.live.com/favicon.ico</icon>

</display>

<activity category="Map">

<activityAction context="selection">

<execute action="https://maps.live.com/default.aspx?where1={selection}"/>

<preview action="https://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('https://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 https://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

  • Anonymous
    March 06, 2008
    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)

  • Anonymous
    March 06, 2008
    @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... :)

  • Anonymous
    March 06, 2008
    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.

  • Anonymous
    March 06, 2008
    You've been kicked (a good thing) - Trackback from DotNetKicks.com

  • Anonymous
    March 06, 2008
    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.

  • Anonymous
    March 06, 2008
    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.

  • Anonymous
    March 06, 2008
    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 ^_^

  • Anonymous
    March 06, 2008
    The comment has been removed

  • Anonymous
    March 06, 2008
    The comment has been removed

  • Anonymous
    March 06, 2008
    Why do you use  new microformats ? You can use directly rdfa ?

  • Anonymous
    March 06, 2008
    can we microslice an RSS feed/reader?

  • Anonymous
    March 06, 2008
    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.

  • Anonymous
    March 06, 2008
    <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.

  • Anonymous
    March 07, 2008
    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...

  • Anonymous
    March 07, 2008
    Please use existing microformats.

  • Anonymous
    March 07, 2008
    The comment has been removed

  • Anonymous
    March 07, 2008
    The comment has been removed

  • Anonymous
    March 07, 2008
    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

  • Anonymous
    March 07, 2008
    I started implementing WebSlices for Firefox... http://tinyurl.com/238dhc

  • Anonymous
    March 07, 2008
    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.

  • Anonymous
    March 07, 2008
    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.

  • Anonymous
    March 08, 2008
    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).

  • Anonymous
    March 08, 2008
    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).

  • Anonymous
    March 09, 2008
    The comment has been removed

  • Anonymous
    March 10, 2008
    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?

  • Anonymous
    March 10, 2008
    Mix08 3日目 (最終日) Developing Cutting Edge Web Applications with IE8

  • Anonymous
    March 10, 2008
    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

  • Anonymous
    March 10, 2008
    Mix08 3日目 (最終日) Developing Cutting Edge Web Applications with IE8

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

  • Anonymous
    March 11, 2008
    @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 :-)

  • Anonymous
    March 11, 2008
    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.

  • Anonymous
    March 11, 2008
    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.

  • Anonymous
    March 11, 2008
    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.

  • Anonymous
    March 12, 2008
    @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" />

  • Anonymous
    March 12, 2008
    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...

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

  • Anonymous
    March 12, 2008
    Are Activities supports for intranet

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

  • Anonymous
    March 12, 2008
    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.

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

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

  • Anonymous
    March 16, 2008
    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

  • Anonymous
    March 18, 2008
    I'm always looking up CVEs so I want to get to the data as quickly as possible, especially if I'm digging

  • Anonymous
    March 18, 2008
    One of the interesting things about the new IE8 WebSlices (read Jane Kim's overview of both Activities

  • Anonymous
    March 20, 2008
    One of our goals with Internet Explorer 8 was to improve the experience of managing add-ons by bringing

  • Anonymous
    March 28, 2008
    Our friends over in the Internet Explorer building recently released a developer preview version of IE8.

  • Anonymous
    March 31, 2008
    While at Cuesta College in San Luis Obispo I was doing a demonstration of Internet Explorer 8 Beta and

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

  • Anonymous
    April 04, 2008
    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...

  • Anonymous
    April 07, 2008
    概述 由于最近忙着写Silverlight2系列文章了，所以本期推荐比较少，只有6篇文章:) 1.BuildingGreatAJAXApplicationsfromScratchU...

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

  • Anonymous
    June 04, 2008
    The IE blog whittles down the IE 8 Beta 2 date a bit further: In addition to the features for developers

  • Anonymous
    June 06, 2008
    Internet Explorer 8 Beta 2 Coming in August

  • Anonymous
    August 26, 2008
    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

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

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

  • Anonymous
    August 28, 2008
    The next beta for Internet Explorer has been released for broad distribution to the public, according

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

  • Anonymous
    October 30, 2008
    Beidzot esmu saņēmies un gatavs ielikt papildus informāciju no savas prezentācijas par jaunajām IE8 iespējām

  • Anonymous
    November 13, 2008
    I have been running IE8 as my default browser since Beta 2 was released a few months ago and I have been

  • Anonymous
    November 28, 2008
    Una de las caracterisiticas mas interesantes que nos trae Internet Explorer 8 es la posibilidad de “suscribirnos”

  • Anonymous
    January 13, 2009
    One of the coolest new features of IE8 are Web Slices – portions of a web page you can subscribe to and

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

  • Anonymous
    March 03, 2009
    Web Slices are a cool new feature in Internet Explorer 8! With Web Slices, users can add little snippets

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

  • Anonymous
    March 19, 2009
    Dean Hachamovitch is the General Manager for the Internet Explorer team. Amazingly, he managed to blog

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

  • Anonymous
    March 27, 2009
    Accelerators are a robust and customizable way of bringing you closer to the services you use most. We’ve

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

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

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