We just had our monthly Ruby Brigade meeting last night, and I shared for about how to create an easily customisable widget with Ruby On Rails (RoR).

A simple framework that I used when creating BookJetty widget. Web widget has been like bread and butter for web 2.0 sites, it’s an amazing tool that will help to spread the word for your site, and with a good implementation will nurture happy and active users.

Creating a simple widget is easy, but how can you create one that can easily extended and customised to cater for more customisation and different types widgets in the future.

The easy way to create customisation parameters is by using URL paramters, but that can be confusing for your users, and make it hard for your users to customise it on the fly without having to use your widget customisation form.

Compare this widget URL:

<script language="javascript" type="text/javascript" src="http://www.domain.com/widget.php?username=nicky&show=random
&header=1&num=5&covers=small&text=all&tag=alltags&css=1&style=1&charset=&version=1">
</script>

And Google Adsense widget URL:

<script type="text/javascript"><!--
google_ad_client = "pub-32432432432432";
google_ad_width = 468;
google_ad_height = 60;
google_ad_type = "text";
google_color_border = "ffffff";
google_color_bg = "ffffff";
google_color_link = "1465b7";
google_color_url = "1465b7";
google_color_text = "000000";
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

Google Adsense widget approach is just like the Amazon widget approach, it is using Javascript variables, and they are so much easier to customise, as compared to URL parameters.

Web Widget With Rails

These slides will help you to look at how I approached the widget creation following the best practices of the big guys, Google and Amazon widgets, and hope they will shed some lights. And happy widgeting.

I bumped into this site this morning, faceyourpockets.com, basically it asks you to empty your pockets; arrange your stuff on a scanner, and lastly place your face and scan it.

I thought it’s silly, but when I look at the scans from the others, I was really impressed by the creativity shown, now I think it’s fun and artistic too.

So the child in be rebelled, and this is what I got before I even realized it. I know it’s silly, but it’s fun. Check out the others too.

List of objects scanned:

• IKEA paper ruler, used it when I moved house, but forgot to clear it.
• Some coins.
• iPod Shuffle
• My namecard
• A $2 note from my wallet, with the coins, probably for lunch later.
• Keys
• BookJetty namecard
• EZLink smartcard
• Restaurant receipt, last weekend bill, dinner treat for my aunt, auncle and cousin.
• Handphone
• Pen
• Part of my face

So what’s in your pockets? :D

Things that are living in the pockets of your bag, jeans or jacket: travel and pay checks, old cigarette pack that just looks interesting, sugar lumps and all the stuff that has found home in your pockets. They are all the treasures our project is looking for! Our goal is not only bring all this objects into light but show the owner of them.

— Faceyourpockets.com

BookJetty now supports four different views, i.e. library view, default view, cover view, and simple view.

I have also re-designed the display of the book attributes, less important attributes like ISBN is now moved to the tooltip area, while pricing information has also been removed from the listing area, since they are not referred often.

The labels have also been removed, since we all know what they are by just looking at the values, and the screen now looks much cleaner and less cluttered. Yay!

A quick look at the old design:

And here is the new design:

Library View

Bookmarks will also be shown for Amazon search result, so that you will know immediately if that book is a popular book in BookJetty. They are shown as a total sum, instead of split into read, reading, read in previous design. It’s easier to look at one value as compared to three different values.

The bookmark status, i.e. Read, Reading and Wanted are now tagged with colours, blue, magenta and green respectively, with the colours, they are easier to be identified with.

Default View

Default view does not query the library information, because some of BookJetty users are not library users, and we to refer to the library call numbers when we need to borrow books from the library. Other than that, it’s nice to be able to turn it off.

Cover View

Sometimes it’s just nicer to look at the book covers, you know what I mean, just like this cover. :) The rest of the attributes are moved to the tooltip area.

Simple View

For those who are busy, a quick reference to your book list without bothering the rest of of the details, book attributes are moved to the tooltip area as well. If you are viewing your book list, it will list 15 books per page instead of 10.

Change of the view type will be stored in the cookie, so the subsquent search results will follow your last selected listing type.

Coming next to BookJetty will be the long missing feature, the book reviews and ratings feature. And I can’t wait for that, probably will stick to the 5-star ratings, after considering the good points and bad points of 4-star and digg-style ratings.

Remember how do you usually find a book from the library book shelves? You write its call number on a small piece of paper, you slip it down in your pocket, sometimes in your wallet. When you are in the library, you search your left pocket, right pocket, take out your wallet, go through each of your wallet compartments, and !*#@$#$%, you left it on the table.

From today onwards, life is going to be different, you find a book in BookJetty, you noticed nine available locations, mouse over its library call number, click on SMS link, and you get an SMS like the one below. Go to the library, whip out your phone, and find that book.

No paper, no pencil, no frantic search, and environmentally friendly. :P

The SMS is made possible through integration with Twitter.com using Twitter API. You need to sign up for a free Twitter account, set your Twitter username in BookJetty, add BookJetty as your Twitter friend, and enable your Twitter SMS notification for direct messages.