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:
- Find products from eBay – View active auctions for the selected product.
- Lookup website reviews with StumbleUpon – See how other people rate the current website that you’re on.
- Share with Facebook – Add interesting sites to your Facebook profile for your friends to see.
- Discovery with Me.dium - Find related sites from your friends and community on Me.dium.
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.
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 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.comAnonymous
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,
- Don't call it a microformat, its not.
- 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.
- 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 removedAnonymous
March 06, 2008
The comment has been removedAnonymous
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 removedAnonymous
March 07, 2008
The comment has been removedAnonymous
March 07, 2008
whitepaper on WebSlices @ page 8 Feed URL <a rel="feedurl"ref="auction.microsoft.com/item.xml">Subscribe to WebSlice</a> ref or href??? -_-bAnonymous
March 07, 2008
I started implementing WebSlices for Firefox... http://tinyurl.com/238dhcAnonymous
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 removedAnonymous
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 IE8Anonymous
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=421504Anonymous
March 10, 2008
Mix08 3日目 (最終日) Developing Cutting Edge Web Applications with IE8Anonymous
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’mAnonymous
March 12, 2008
Are Activities supports for intranetAnonymous
March 12, 2008
Hi, my name is Helen, I am a Program Manager on the User Experience team of Internet Explorer, and IAnonymous
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't so new: The FavoritesAnonymous
March 13, 2008
Hi, my name is Helen, I am a Program Manager on the User Experience team of Internet Explorer, and IAnonymous
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]=enAnonymous
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 diggingAnonymous
March 18, 2008
One of the interesting things about the new IE8 WebSlices (read Jane Kim's overview of both ActivitiesAnonymous
March 20, 2008
One of our goals with Internet Explorer 8 was to improve the experience of managing add-ons by bringingAnonymous
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 andAnonymous
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. 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 newAnonymous
June 04, 2008
The IE blog whittles down the IE 8 Beta 2 date a bit further: In addition to the features for developersAnonymous
June 06, 2008
Internet Explorer 8 Beta 2 Coming in AugustAnonymous
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 tasksAnonymous
August 27, 2008
We’re excited to release IE8 Beta 2 today for public download. You can find it at http://www.microsoft.com/ie8Anonymous
August 28, 2008
As Paul mentioned in Part 1 of this post, we’ve really focused on making your everyday browsing experienceAnonymous
August 28, 2008
The next beta for Internet Explorer has been released for broad distribution to the public, accordingAnonymous
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āmAnonymous
November 13, 2008
I have been running IE8 as my default browser since Beta 2 was released a few months ago and I have beenAnonymous
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 andAnonymous
January 16, 2009
Новые специальные возможности в Internet Explorer 8 Привет, меня зовут ДжейПи Гонсалес-Кастеллан (JPAnonymous
March 03, 2009
Web Slices are a cool new feature in Internet Explorer 8! With Web Slices, users can add little snippetsAnonymous
March 11, 2009
Hello, my name is Amy Placzkiewicz and I’m a Lead Software Design Engineer in Test on Internet Explorer’sAnonymous
March 19, 2009
Dean Hachamovitch is the General Manager for the Internet Explorer team. Amazingly, he managed to blogAnonymous
March 27, 2009
Как за пять минут создать динамический веб-фрагмент Веб-фрагмент – это новая функция Internet ExplorerAnonymous
March 27, 2009
Accelerators are a robust and customizable way of bringing you closer to the services you use most. We’veAnonymous
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 timeAnonymous
April 26, 2009
Интересные ускорители для IE8 Ускорители – это очень удобный (и настраиваемый) способ взаимодействияAnonymous
April 28, 2009
Аутентификация через веб-фрагменты и RSS Привет, меня зовут Эми Плацкевич (Amy Placzkiewicz) и я являюсь