You are on page 1of 19


Leeds University 25th June 2008

The MyBristol portlets and browser toolbar story
The saga of how an application became a portlet, a portlet became several portlets, and how this resulted in the MyBristol browser toolbars being developed.

Mark McLaren

MyBristol portlets story
This presentation will briefly cover one aspect of the MyBristol story: • • • • Bookmarks application Derived portlets Usability evaluation Toolbar

Bookmarks application
• Easy way to layer personalisation onto legacy applications • Features:
• • • • Struts application XBEL based Spring Framework DAO Castor for XML mapping

• Unobtrusive DHTML
• Accessibility • Implemented with JavaScript, CSS

Bookmarks application

Bookmarks portlet
• Converted to a portlet • Struts Bridge • “transparent portlet development” • works as a portlet and as a standalone application • enables code reuse • open sourced

Derived portlets
• Newsfeeds • Added ROME libraries for feed parsing • Added AJAX • Contacts • Added Search • Added AJAX • Tweaked bookmarks format

Derived portlets - Newsfeeds

Usability evaluation
• Bookmarks and external contacts are slow to enter • Managing bookmarks and contacts is confusing • Most people already organize their lives in other ways (e.g. bookmarking via a browser).

Usability evaluation results
• Although it was clear that users like the concept of centralizing their bookmarks and contacts, the current implementation probably provides too much friction to allow them to do this effectively • For the MyBristol portal to be a success it must offer an extremely simple and usable alternative for users

Bookmarklets (favelets)
• Small snippets of JavaScript, drag and dropped into the browser’s personal bookmarks (favourites) • Bookmarks • Newsfeeds – auto discovery • Contacts – hCard microformats

MyBristol browser toolbars
• First came the Firefox toolbar • Knowledge required • XML (XUL) • JavaScript bookmarklets (favelets) • CSS • Converted to IE Toolbar (using Softomate’s Toolbar Studio)

Firefox toolbar

IE toolbar

• Home grown bookmarks app evolved into a portlet (via Struts bridge) • 1 portlet became 3 portlets – with added AJAX and ROME libraries • Bookmarklets were written to improve user experience • Bookmarklets code was ported to become browser toolbars – further improve user experience

Thanks for listening…