Ajaxian » Microformat

Prefilling forms with Microformats and YQL

Chris Heilmann — Tue, 17 Feb 2009 06:24:40 +0000

Ever since YQL started supporting microformats scanning (the outcome of having a coffee with the team last time I visited the main office) I tried to find good examples of how you can use this. Microformats rock, we all know that but so far I am still waiting for the killer application or implementation for it. The wiki examples of microformats are getting stale indeed and in general I start to wonder what it needs to make the main market understand the benefits and implement them.

One nice example of the power of Microformats and YQL is George Ornbo’s jQuery script that allows you to pre-fill forms with data retrieved from hcards:

I’ve written similar tests before but soon gave up on trying to parse microformats by hand. With YQL doing that job for us the practical application of microformatted data became a lot easier, so let’s go wild.

Getting Semantic With Microformats Series by Emily Lewis

Brad Neuberg — Wed, 26 Nov 2008 12:00:07 +0000

One of the best aspects of living in the Bay Area is bumping into all sorts of interesting computer folks. Today I’m working from a coffee shop and bumped into Tantek Çelik, CSS and Microformats man. He pointed me to a fabulous blog series introducing Microformats and all the major formats for a more lay-person audience, created by Emily Lewis:

Lots of great information and tutorials in that blog series.

Tantek also pointed me to an interesting wiki page laying out how browsers and web pages can integrate Microformats more deeply into their user-interfaces:

Recently there have been many really good user interface ideas and suggestions for working with microformats. This page serves to collect and document them so that we may be inspired by and iterate on each others’ works.

The Operator plugin for Firefox, which natively supports deep UI integration for Microformats and discussed on the wiki page as well:

Sitepoint releases HTML reference as a beta

Chris Heilmann — Tue, 11 Mar 2008 21:33:14 +0000

While this is not strictly Ajax or JavaScript related, it is noteworthy to point out that Sitepoint just released a HTML reference that is quite handy to have around if you wonder if what you are building is really HTML or just tagsoup.

Good HTML references are really hard to come by, either they are just listings, like W3schools.com or terribly outdated. Sitepoint have done quite a good job in listing all the HTML elements and categorizing them into different use cases. There is also a list of deprecated elements and attributes to avoid (which could be considered dangerous to still bring up as some of them are too handy to simply add to solve an issue) and a Microformats primer.

We know for a fact that other portals/article sites are working on similar projects and consider it a really good way of flushing old and outdated tutorials on things as simple but important as markup out of the search engine result pages.

The reference also gives a legend of browser support, something that so so far was only available on the German SelfHTML reference.

Unobtrusively Mapping Microformats with jQuery

Dion Almaer — Thu, 13 Dec 2007 12:01:07 +0000

Simon Willison just doesn't stop. This time he has added a way that details the technique of unobtrusively mapping microformats with jQuery.

Simon puts together jQuery, microformats, and the Google Maps API to grok hCard and show maps of any hCard data that is found, ending up with:

PLAIN TEXT

JAVASCRIPT:

jQuery(function() {
// First create a div to host the map
var themap = jQuery('
').css({
'width': '90%',
'height': '400px'
}).insertBefore('ul.restaurants');
// Now initialise the map
var mapstraction = new Mapstraction('themap','google');
mapstraction.addControls({
zoom: 'large',
map_type: true
});
// Show map centred on Brighton
mapstraction.setCenterAndZoom(
new LatLonPoint(50.82423734980143, -0.14007568359375),
15 // Zoom level appropriate for Brighton city centre
);
// Geocode each hcard and add a marker
jQuery('.vcard').each(function() {
var hcard = jQuery(this);
var streetaddress = hcard.find('.street-address').text();
var postcode = hcard.find('.postal-code').text();
var geocoder = new MapstractionGeocoder(function(result) {
var marker = new Marker(result.point);
marker.setInfoBubble(
'
' + hcard.html() + '
'
);
mapstraction.addMarker(marker);
}, 'google');
geocoder.geocode({'address': streetaddress + ', ' + postcode});
});
});

You see the finished code at work.

Microformats

Jim Halberg — Tue, 24 Oct 2006 15:35:12 +0000

Kevin Lawver (or is it here?) discussed Microformats this morning at The Ajax Experience.

Microformats define ways to make your markup more descriptive, allowing a reader (be it machine or human) to very easily grok the just what you're getting at. Basically, you know what you're doing: why don't you just tell us instead of making us guess?

A simple example: Your link to ajaxian from your blog (you do have one, right?) could indicate that the page you're linking to should have the tag "ajax". By adding that tag it's obvious what you're linking to and why you're linking to it.

On my blog I may link to ajaxian a bit differently, but due to the tagging someone would be able to quickly determine that my motivation is a bit different.

The most obvious implication is making SEO-type tasks a bit simpler. A spider crawling your site can be told quite specifically what topics you are truly covering. At the moment you may not see a profound effect from properly applying these tags, but as microformat becomes more and more prolific (and consistent), they will likely be leveraged more and more for this purpose.

Try it out yourself: Make it easier for people to add you to their address books with an hCard on your blog (you can cheat a little and use this).

David Hasselhoff

Baywatch

123 Fake St
Hollywood, CA, 90027 USA

This hCard created with the hCard creator.

As with any writeup, there was much in the presentation that isn't represented here - checkout the slides for some more great info.