The idea of Microformats is a cool concept for the web, involving adding simple markup to html to highlight metadata about the displayed content. But like any standard, without a killer application microformats are under-utilized. The problem is a classic bootstrapping dilemma. Why should I add markup if there is no application that uses the markup? Why should I code an application that parses markup if there is no content that includes it? The solution lies on small leaps of faith by both sides.

Fortunately, Microformats make marking up data really easy, so making a committment to Microformats on the content side is as simple as appending a string. And parsing Microformats isn’t harder than parsing anything else in XML/HTML (or RSS). The key is just small easy steps to make these formats matter.

Probably the biggest success of Microformats has come from their biggest champion: Technorati. Technorati has seen a huge upsurge in traffic and in-bound link from supporting the ‘rel-tag’ format – but they additionally have done quite a lot to support the ‘vote-links’, ‘rel-nofollow’, ‘rel-tag’, ‘hCard’, and ‘hReview’ formats.

Recently, another startup from TechCrunch author Michael Arrington launched called ‘Edgeio’ that uses a simple microformat like model – whatever is tagged ‘listing’ is aggregated and integrated into a classified market display.

The concept is quite similar to Technorati, except with a vertical concentration on creating a marketplace around a tag. I see now why Arrington was so bullish on the idea of a ‘million dollar tag page’.

At MashupCamp, an idea that came up in discussions with the guys from Webservice Finder and Programmable Web was the idea that webservices ought to be discoverable through simple metadata as well. So far we’ve been thinking that it would be nice if you could declare webservice access through your rss feed. We made up some fields: (Title, Keywords, Free/Pay/Non-Commercial, Description, URL) – but if we wanted it to work, it’s clear that there would be a lot of bootstrapping before we had both tools to parse RSS feeds for webservice declarations and people marking up their webservices for discovery in their feeds.

I think it’s best if this occurs naturally and isn’t forced, which is why I actually like Edgeio’s approach of ‘just tag it listing’. This puts the onus of intelligence on Edgeio, but it’s a solvable problem, and Edgeio can get started by just aggregating anything that’s naturally tagged ‘listing’. Even if they’re wrong sometimes, it’s the web, some sloppyness is forgivable.

This weekend I rolled up a new open-source Microformats supporting project called Referendum. It’s a way to create community ballots for people to create issues and vote on them. I incorporated the micro-format ‘vote-links’ as a lightweight spam prevention method. If you want to start a new issue, you have to create a link to the issue with an attribute ‘rev=’vote-for’’ on the anchor tag along with the href.

I created Referendum because sometimes you want a channel for people to give simple feedback on issues, and I wanted a way to do voting that incorporated Ajax, because things like voting are a lot easier on the user when you use Ajax to submit the data.

You can check out Referendum here, or see the wiki on SWiK.net for more details about the project and the source code as well.

Referendum is an issue voting system.

• Referendum source code

Essentially Referendum is a simple CRUD application, users insert votes, issues and ballots, and then read them out in tables.

Ajax Voting

1. User clicks on a vote
   1. Ajax fires off a request
   2. Vote class is set to pending
2. Server receives request
   1. Server deletes all votes for the issue from the user’s IP
   2. A new vote is inserted
   3. The current tally of votes for the issue is selected from the database and returned.
3. Client receives response – including the tally and the id of the issue.
   1. Vote tally is updated
   2. User’s vote is set to selected

Database Schema

-- Database: `referendum`
-- 

-- --------------------------------------------------------

-- 
-- Table structure for table `ballots`
-- 

CREATE TABLE `ballots` (
  `id` int(11) NOT NULL auto_increment,
  `name` varchar(255) collate utf8_unicode_ci NOT NULL default '',
  `description` text collate utf8_unicode_ci NOT NULL,
  `created` datetime NOT NULL default '0000-00-00 00:00:00',
  `updated` timestamp NOT NULL default CURRENT_TIMESTAMP,
  `password` varchar(32) collate utf8_unicode_ci NOT NULL default '',
  `css` text collate utf8_unicode_ci NOT NULL,
  PRIMARY KEY  (`id`),
  UNIQUE KEY `name` (`name`),
  KEY `created` (`created`,`updated`),
  FULLTEXT KEY `description` (`description`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=7 ;

-- --------------------------------------------------------

-- 
-- Table structure for table `issues`
-- 

CREATE TABLE `issues` (
  `id` int(11) NOT NULL auto_increment,
  `ballot_id` int(11) NOT NULL default '0',
  `title` varchar(255) collate utf8_unicode_ci NOT NULL default '',
  `description` text collate utf8_unicode_ci NOT NULL,
  `created` datetime NOT NULL default '0000-00-00 00:00:00',
  `name` varchar(255) collate utf8_unicode_ci NOT NULL default '',
  `ip` int(4) NOT NULL default '0',
  `link` text collate utf8_unicode_ci NOT NULL,
  `approved` tinyint(1) NOT NULL default '0',
  `homepage` text collate utf8_unicode_ci NOT NULL,
  PRIMARY KEY  (`id`),
  KEY `ballot_id` (`ballot_id`),
  KEY `approved` (`approved`),
  FULLTEXT KEY `description` (`description`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=5 ;

-- --------------------------------------------------------

-- 
-- Table structure for table `votes`
-- 

CREATE TABLE `votes` (
  `id` int(11) NOT NULL auto_increment,
  `issue_id` int(11) NOT NULL default '0',
  `ip` int(4) NOT NULL default '0',
  `vote` tinyint(1) NOT NULL default '0',
  `time` timestamp NOT NULL default CURRENT_TIMESTAMP,
  PRIMARY KEY  (`id`),
  KEY `ballot_id` (`issue_id`,`ip`,`vote`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=70 ;

Images

• famfamfam