Friday, April 27, 2007

Bookmarklets and Firefox Toolbars

Bookmarks and Newsfeeds App Bookmarklets

We recently had usability tests conducted on our portal by an outside usability expert. In common with many portals we offer personalised bookmarks, newsfeeds and contacts functionality. I wrote the bookmarks and newsfeeds portlet applications from scratch so I am intimately familiar with them and pretty much free to tinker with them as I see fit. I have previously open sourced the bookmarks portlet (although I need to update it soon to reflect recent improvements with regard to usability and UTF-8 compatibility).

One of the outcomes of the usability tests was that users wanted a way to interact with the bookmarks and newsfeeds applications without having to be directly accessing them via the portal. This makes sense, they want to be able to hit "add bookmark" and not have to type in the URL and title.

I had seen bookmarklets that offered similar bookmarking facilities for del.ico.us and thought I could try to produce something similar.

Our portlets are all written using Struts Bridge which means they are quite happy to run as standalone applications in addition to being portlet applications. I extracted the part of the application that was responsible for adding bookmarks/newsfeeds and deployed this as a new standalone application. I thought it necessary to do this because I want slightly different behaviour when used in the bookmarklet context. On the successful submission of a new bookmark or newsfeed I want the application to redirect the user back to where they were so that they can continue browsing.

I started by developing a simple bookmarklet for the portlets bookmarks application (this was really easy!). For the newsfeed bookmarklet I needed slightly more advanced behaviour. So I derived a solution from Martin Dittus' excellent feed links bookmarklet.

I was very pleased with the new bookmarklets. In the newsfeeds case I could even claim to be performing autodiscovery! There is also the possibility of tweaking our Content Directory to supply contact details in the hCard microformat so that I could derive "add contacts" functionality from something like Left Logic's sexy microformats bookmarklet.

The bookmarklets have the added benefit of being cross browser solutions.

Bookmarks and Newsfeeds Firefox Toolbar

Although I was pleased with the bookmarklets, I felt that installing multiple bookmarklets can be a little cumbersome for the user and I found it slightly annoying that the bookmarklets did not have proper icons.

So much as del.icio.us started out with bookmarklets and evolved into a Firefox toolbar I thought I would try to follow suite. This lead me down the path of learning how to create Firefox Toolbars.

I have so far found Firefox Toolbar development to be rather a joy with much of the technology involved already very familiar to me (XML, JavaScript, E4X, CSS, Zip files). Granted I have not really toyed with XUL and XPCOM before but I have found it a very enjoyable and rewarding experience (instant gratification is great isn't it?). An additional benefit is I can reuse any XPCOM learnt when I start writing Server Side JavaScript (SSJS) for the Plain Old Webserver (POW).

My first modest toolbar effort contained a couple of static links and slightly modified versions of the "add bookmark" and "add newsfeed" bookmarklets.

As I was having fun with the technology now, I could not resist extending my initial toolbar to incorporate a newsfeed ticker, this was fairly easy to do and an opportunity to make use of E4X in a real life context.

CASBar - A CAS Toolbar for Firefox 2

The glue behind our portal and associated web applications is JA-SIG Central Authentication Service (CAS) for single sign on. In order for bookmarks or newsfeeds to be interacted with from the toolbar the user first needs to login to CAS first.

This led me to create a toolbar specifically for use with CAS. Scott Battaglia (Project Lead and Lead Architect on CAS) was sufficiently impressed ("That looks awesome!") with this modest toolbar that it has now become an official sub-project called CASBar. So now I am a CAS sub-project lead, I am quite chuffed, as I really didn't see that one coming!!!


3 comments:

ismjml said...

firefox is by far the best browserr
Note: Comment imported. Original by Sam Tilston website: http://www.ideataxi.com at 2007-04-30 23:53

ismjml said...

so when are you going to make the official CASBar announcement? ;-)
Note: Comment imported. Original by Scott website: http://www.ja-sig.org/products/cas/ at 2007-05-03 15:26

ismjml said...

Thanks for the reminder Scott, I have now sent a message to the CAS-DEV list. I can sometimes be a little shy of the limelight and prefer to skulk in the shadows and have my contributions discovered by accident… (stereotypical developer, eh?).
Note: Comment imported. Original by markmc website: http://content.mark-mclaren.info/ at 2007-05-03 17:17