Distributed votings using microformats

(I also wanted to do it in Ruby on Rails because I figured that this could fit very well as an exercise for learning Rails. I've been really, really short on free time which tells me a lot about Rails and it's power to quickly come up with something working. Rails is definitely exiting ... but I disgress ;)

Ok, here we go.

Well, there's one mega-event this year in Germany: the FIFA World Cup 2006™ (*sigh* yes, it's really a trademark of the FIFA). Of course I've chosen this one for a first test voting.

So, what's your tip? Who's gonna make it and win the World Cup?

You know it? Great! Then join in and place your tip (we'll call it a "vote").

How will this work?

It will work a little bit different from traditional votings and polls that ask us to just click a button and in the end nobody knows where the votes came from. The main difference (and the main purpose of this whole approach) is:

You'll retain the full control over your vote. It's yours and it will remain yours. :)

You won't go to a website owned by somebody else and click on a button. You'll use your own homepage or blog to tell the world about your vote. You can change it if you like, remove it or leave it where it is. To get your vote in, you'll tell the voting application to digg your homepage for your vote, add it to the results and display it.

Telling the application about the vote on your homepage can be done in two ways:

Either you own a blog that supports trackback, then it's fully sufficient to publish a VoteLink (that is, a simple but specially crafted HTML link) anywhere in a blog article.
Or you include a so-called webbug (which is nothing else than a transparent one-pixel image pulled from the voting application) into your website and open it up in a web browser that sends a valid referer string with the request (this will work in all browsers with the default settings).

That's it. :)

Either way the voting application will get to know about the URL of your website. It will read it, find your VoteLink and recognize your vote. Then it will include it into the results which are displayed on my website and which you in turn can publish as a diagramm on your own site.

Sounds interesting? So let's check it out.

Place your vote ...

A VoteLinks has the following format:

<a href="http://..." rev="vote-for">some text</a>

The presence and value of the rev attribute "vote-for" make this HTML tag a microformat (yes, it's as simple as that). The value of the href attribute, i.e. the URL the link links to defines what you are voting for, the object of your vote.

You can freely chose what you'd like to use as a body for this link (the "some text" in the format above). It could be a text, an image or - also - just nothing.

The voting application provides URLs that can be chosen for VoteLinks, i.e. that each identify one of the options that are available for a certain voting. In this case, of course these are the countries that participate in the worldcup:

So you could use:

http://folksr.artweb-design.de/vote/wm2006/winner/brazil

... which will tell the application that your favorite is Brazil.

Ok, let's try that out right now.

I'll include the following snippet into this blog post which you could prove by looking at the source.

<a href="http://folksr.artweb-design.de/vote/wm2006/winner/brazil"
rev="vote-for">here's my tip: Brazil will make it. Who
else should? ;)</a>

The link is right here: my tip: Brazil will make it. Who else should? ;)

Now, because this is a blog and my blog supports trackback, it will send a trackback to my voting application and the vote gets included into the results. [1]

[1] Update: *errrmm* ... ok, well. My brand-new Typo installation apparently refuses to send any trackbacks. So I had to include the webbug here, which worked. For more about the webbug see below.

... and check the results

Here's a not-yet-super-nice diagramm published by the application that displays the current results:

Now, this actually worked. There's only one vote in the database right now and it originated from this page that you're reading right now. :)

You can't see it from the graph, but when you actually click it (or on the VoteLink above) you'll see the vote that's included in this blog article in the list of votes published by the application.

In case you don't own a blog there's a second way to tell the application about your vote by using the webbug.

That's equally simple. All you have to do is include the following image tag anywhere in your websites source code:

<img src="http://folksr.artweb-design.de/vote/pixel.gif" />

That's a transparent 1x1 pixel. When you open up your site in your browser, the pixel will get pulled from the application. The application will look for the http referer URL (which your browser should - and most likely will - send).

You're done. The webbug fullfills the same purpose a blog would do by sending a trackback: the application gets to know about the URL, look it up, find your VoteLink and add it to the results.

Different from trackbacks which are processed every time they arrive at the application a webbug will activate the process of digging your website only once. I decided to imlement things this way because otherwise every hit would result in a lot of work without any benefit.

In case you've changed your vote and like to update it you can add a arbitrary token to the webbug URL like this:

<img src="http://folksr.artweb-design.de/vote/pixel.gif?12345" />

Instead of "12345" you could use any other token. The webbug will active the digging process once per unique token - at least that's how this is implemented so far.

What does not work?

A lot :)

There are only two vote options (i.e. countries you could vote for) right now. They were enough for a rough test. I'll add the remaining soon though. [2]
A list of available options is also missing. [2]
I'll yet have to integrate this stuff with some kind of CMS. Thus, all off the green links in the header and the faq like section on the bottom-right won't do anything. [3]
The design is really sketchy of course.

[2] Update: I've now added the missing countries to the database. You're now free to really add a vote of your choice.

Like mentioned above, the URL schema for VoteLinks is: http://folksr.artweb-design.de/vote/wm2006/winner/[country]

Replace [country] by one of the following: angola, argentina, australia, brazil, costarica, cote-d-ivoire, croatia, czech-republic, ecuador, england, france, germany, ghana, iran, italy, japan, korea_republic, mexico, netherlands, paraguay, poland, portugal, saudi_arabia, serbia-montenegro, spain, sweden, switzerland, togo, trinidad-tobago, tunesia, ukraine, usa

[3] Update: Done. Integrated with Typo (in a rather rude way, but this will do the job for a while I think).

What's next?

I have a couple of ideas how to expand this in a useful way. I'm going to describe them in a follow up posting and implement them subsequently at least for my own exercise.

In short: Of course the application needs to be translated the translation needs to be expanded and better explanations/instructions are missing. A Javascript Widget to quickly click the disired VoteFor Link together (probably allowing to add an image to the link). RSS feeds would be nice.

Later on an interface to allow people to add and administrate their own votings. Basic community features probably. The ability to publish the definition of the voting itself in the same distributed way? (Would XOXO be applicable here? Something else?) Different types of votings or options to make the voting behave in different ways. More ways to publish results. Etc.

[4] Update: Globalize @ work now.

Feedback?

If you like this, please digg it!