WIP: Resource Preview

Dave Johnson — Fri, 3 Jun 2011 09:00:35 +0000

This is the fourth in my series of Web Integration Patterns. Check out the intro at this URL http://rollerweblogger.org/roller/entry/web_integration_patterns

Synopsis

Enhance links shown in HTML pages so that users can hover, mouse-over, or use some other gesture, to view a preview of the resource at the other end of the link.

Motivations

Make it convenient for a user to get information about a link but without having to navigate to the link and without having to leave the current web page in the browser.
Make applications appear to be part of one integrated whole by enabling them to delegate to each other's user interfaces for preview display.

Complements

Links
Delegated Resource Creation & Selection
Common Navigation

This pattern allows users to view a preview of links that are displayed in a web page. This preview might be a simple tool-tip with plain-text, a more rich JavaScript-driven display with hyper-text and graphics, or it might be a thumbnail view of the page at the other end of the link.

Resource Preview works well for web applications that use the Links pattern for integration and use links to establish relationships between resources. If a user is looking at a Bug Report, for example, they might see a list of links to associated resources like attachments to the bug, test cases impacted by the bug, etc. The user can hover over links and see a preview with key information for each link, without leaving the current web page that they are on. Below are three different approaches to applying the Resource Preview pattern in web applications.

Approach #1: Preview Site offers previews to other applications

With this approach, there is a special preview site that crawls a set of web sites and creates Resource Previews of the web pages of those sites. Then, web sites that wish to display previews on links use some special JavaScript magic to display those previews. An example of this preview site approach is Snap.com’s Snap-Shots service. Anybody with a web site can sign up for the service, get some special HTML code that can be added to their site to display a graphical and thumbnail-style preview whenever a user hovers over a link.

Here’s an example of a Snap.com preview on the company’s blog:

The advantages of the preview site approach are participating sites don’t have to do anything except for adding a small bit of JavaScript code to enable previews. The disadvantage is that the automatically generated previews often can’t offer more than a page title, thumbnail image and perhaps a short excerpt from the page being previewed. Also, it’s interesting to note that there was a backlash against Snap-Shots and some people thought they were distracting and gimmicky. Regardless of that criticism, this approach to Resource Previews is not very interesting from a Web Integration Patterns point of view because the focus is making one site more useful and interactive, and not integrating with others.

Approach #2: Application creates and displays previews as needed

With this approach, an application that needs to provide preview creates the previews that it needs and take case of displaying them. The best known examples of this approach are probably the preview features built into Microsoft’s Bing and Google’s search engine. This approach is also not very interesting as a WIP because its all about making one site more useful, not integrating with others.

Here’s an example of a Resource Preview in Microsoft Bing:

Approach #3: Applications offer previews of their own resources

This approach is to enable web applications provide previews of their own resources and make them available via a simple protocol. The best example of this approach is OSLC UI Preview, which is part of the OSLC specifications. The OSLC specs are designed to enable integration between ALM tools, but can be applied to integrating web applications of almost any stripe. Applications that implement OSLC UI Preview provide a UI Preview for each resource, one that provides a summary of the resource and links to large and small previews of the resource.

Here’s an example of an OSLC UI Preview from FusionForge, an open source ALM suite:

Here’s an example of a Resource Preview from IBM Rational Team Concert, which also implements the OSLC UI Preview spec:

There are several advantages to this approach. Preview-providing applications have complete control over the content and appearance of previews for their resources. Preview-consuming applications don’t have to create and format them, they just display what comes back from the provider. No special preview site is needed to enable previews. Another advantage to this approach to Resource Previews is the OSLC UI Preview specification, which defines an open and standard way to provide and consume previews.

Wrapping up

I've explained what I call the Resource Pattern and three different ways that I've seen it used. Resource Preview is a good way to add value to the Links pattern and to make links even more useful. The best way to implement this pattern is to ask all web applications that want to integrate to offer Resource Previews via a standard protocol such as OSLC UI Preview, and to display them whenever a user hovers over a link.

Blogging Roller

WIP: Resource Preview

Approach #1: Preview Site offers previews to other applications

Approach #2: Application creates and displays previews as needed

Approach #3: Applications offer previews of their own resources

Wrapping up