Simon Willison's Weblog: microformats

[whatwg] Annotating structured data that HTML has no semantics for

2009-05-11T14:41:17+00:00

[whatwg] Annotating structured data that HTML has no semantics for

Hixie’s proposal for microdata, a simplified RDFa to be included in the HTML5 spec which allows self-contained communities to invent their own microformat-style spec and use it to add structured semantics to their markup. Whether or not you like the proposal itself the explanation is a fascinating read.

Tags: html5, ian-hickson, markup, microdata, microformats, rdf, rdfa, semantics, whatwg

Revving up

2009-04-12T12:29:25+00:00

Revving up

Jeremy Keith advocates adding the revcanonical attribute to regular A elements as well as / instead of hiding it in the head of the document, following the microformats design principle that invisible metadata is less valuable than augmenting visible links. I’ve updated my shorten bookmarklet to handle this case.

Tags: jeremy-keith, metadata, microformats, revcanonical

Quoting Chris Messina

2009-02-09T20:46:53+00:00

When APIs go dark, how do you do a data backup? (Answer: you often can't.) With public, microformatted content, there will likely be a public archive that can be used to reconstitute at least portions of the service. With dynamic APIs and proprietary data formats, all bets are off.

— Chris Messina

Tags: apis, archiving, chris-messina, data-portability, microformats

Quoting Gordon Luk

2009-02-05T22:46:36+00:00

Much like an oral agreement, publishing microformats is an informal agreement between you and (hopefully) a developer community that sets up a relationship with plenty of vagueness, inertial resistance to change, and potential landmines to step on. Would you create a real developer API without a TOS, agreement, or at the very least, guidelines? [...] are you prepared to announce all frontend markup changes? Does publishing a microformat without a special agreement mean that you are implicitly allowing comprehensive scraping of your web data?

— Gordon Luk

Tags: apis, gordonluk, microformats

Portable Social Networks, The Building Blocks Of A Social Web

2008-07-03T09:08:04+00:00

Portable Social Networks, The Building Blocks Of A Social Web

Ben Ward’s tour de force of practical tools and techniques for building out the distributed social web, using XFN and hCard to represent the data. If you only read one article on portable social networks, make it this one.

Tags: ben-ward, hcard, microformats, portablesocialnetworks, xfn

Microformats and accessibility: the soap opera that never ends

2008-06-29T08:44:46+00:00

Microformats and accessibility: the soap opera that never ends

“Be sure to tune in next week, when we’ll drown a leading accessibility expert to see if she’s a witch.”

Tags: accessibility, funny, mark-pilgrim, microformats, witch

Removing Microformats from bbc.co.uk/programmes

2008-06-23T21:04:27+00:00

Removing Microformats from bbc.co.uk/programmes

“Until these issues are resolved the BBC semantic markup standards have been updated to prevent the use of non-human-readable text in abbreviations.”

Tags: abbr, accessibility, bbc, microformats

Internet Explorer 8 Readiness Toolkit

2008-03-05T18:28:20+00:00

Internet Explorer 8 Readiness Toolkit

The new built-in development tools look similar enough to Firebug to make me very happy. Also of interest: Selectors API (for fast getElementsBySelector), CSS 2.1 support, support for XHTML style namespaces in HTML, an interesting Web Slices feature based on the hAtom microformat and 6 connections per host (up from 2) which should make Comet easier.

Tags: comet, css, hatom, ie8, javascript, microformats, namespaces, selectors, standards

Django People: OpenID and microformats

2008-01-24T02:02:19+00:00

In hindsight, it was a mistake to launch Django People without support for OpenID. It was on the original feature list, but in the end I decided to cut any feature that wasn't completely essential in order to get the site launched before it drowned in an ocean of "wouldn't-it-be-cool-ifs".

I thought that, once launched, the site would see a small amount of activity from a few interested parties and I'd have plenty of time to catch up on the feature backlog. What I didn't expect was that over 750 people would create profiles within the first 24 hours!

So, I spent a few hours this evening integrating my current development version of django-openid, which thankfully had about 80% of the code needed to integrate with Django's built-in authentication mechanism already written. Sadly the other 20% is either incomplete or a bit of a mess, but I've checked it in to a branch on Google Code for anyone who's interested.

Anyway, there are a few new features on the site of interest to OpenID users:

When signing up for a new account, you now have the option to start by signing in with an OpenID. If you do this, you'll be able to complete the signup form without having to pick a password. If your OpenID provider supports simple registration the name, e-mail address and username fields will be filled in for you.
If you already have an existing account, you can associate one or more OpenIDs with that account. You'll then be able to use any of them to sign in to the account. Why multiple OpenIDs instead of just one? Two reasons: firstly, it opens the potential for doing interesting things with multiple OpenIDs from different providers in the future; secondly, it gives you a fallback for if one of your OpenID providers becomes unavailable.
You can freely add and remove OpenIDs from your associations, with one exception: the site won't let you delete your last OpenID if your account doesn't also have a password associated with it, to prevent you from locking yourself out.
While I decided that I didn't want Django People to become yet another OpenID provider, I do want to give people the ability to use their profile page on the site as an OpenID - so that they can prove that they own it (see my recent post on identity projection). To that end, the new account settings page lets advanced OpenID users set up an openid.server and openid.delegate for their profile page, as described in my blog entry from just over a year ago.

One caveat: the site only supports OpenID 1.1, at least for the moment. I had originally planned to go for OpenID 2.0, but demand was such that I decided to get what I had up and running rather than digging in to the OpenID 2.0 libraries.

Microformats

While I was messing around with OpenID, Natalie was updating the site's templates to clean up the crufty code I'd introduced and add some microformatted goodness. The site now uses hCard where you would expect it (country listing pages, skill listing pages and the new search interface) and the profile pages have been updated with a healthy dose of XFN (just rel="me", since there isn't a relevant microformat for "people who live nearby") and Rel-Tag. On Jeremy Keith's suggestion, the profile pages also use hResume - all the more reason to add the Django projects you've worked on to your profile's portfolio.

As usual, post feedback and bug reports as comments on this entry.

Tags: django, django-people, hcard, hresume, identityprojection, microformats, openid, python, reltag, xfn

Quoting Matt Webb

2008-01-01T12:13:00+00:00

The technological future of the Web is in micro and macro structure. The approach to the micro is akin to proteins and surface binding--or, to put it another way, phenotropics and pattern matching. Massively parallel agents need to be evolved to discover how to bind onto something that looks like a blog post; a crumb-trail; a right-hand nav; a top 10 list; a review; an event description; search boxes.

— Matt Webb

Tags: matt-webb, microformats, patternmatching, phenotropics, web, ai-agents

Unobtrusively Mapping Microformats with jQuery

2007-12-12T04:05:45+00:00

Microformats are everywhere. You can’t shake an electronic stick these days without accidentally poking a microformat-enabled site, and many developers use microformats as a matter of course. And why not? After all, why invent your own class names when you can re-use pre-defined ones that give your site extra functionality for free?

Nevertheless, while it’s good to know that users of tools such as Tails and Operator will derive added value from your shiny semantics, it’s nice to be able to reuse that effort in your own code.

We’re going to build a map of some of my favourite restaurants in Brighton. Fitting with the principles of unobtrusive JavaScript, we’ll start with a semantically marked up list of restaurants, then use JavaScript to add the map, look up the restaurant locations and plot them as markers.

We’ll be using a couple of powerful tools. The first is jQuery, a JavaScript library that is ideally suited for unobtrusive scripting. jQuery allows us to manipulate elements on the page based on their CSS selector, which makes it easy to extract information from microformats.

The second is Mapstraction, introduced here by Andrew Turner a few days ago. We’ll be using Google Maps in the background, but Mapstraction makes it easy to change to a different provider if we want to later.

Getting Started

We’ll start off with a simple collection of microformatted restaurant details, representing my seven favourite restaurants in Brighton. The full, unstyled list can be seen in restaurants-plain.html. Each restaurant listing looks like this:

<li class="vcard">
	<h3><a class="fn org url" href="http://www.riddleandfinns.co.uk/">Riddle & Finns</a></h3>
	<div class="adr">
		<p class="street-address">12b Meeting House Lane</p>
		<p><span class="locality">Brighton</span>, <abbr class="country-name" title="United Kingdom">UK</abbr></p>
		<p class="postal-code">BN1 1HB</p>
	</div>
	<p>Telephone: <span class="tel">+44 (0)1273 323 008</span></p>
	<p>E-mail: <a href="mailto:info@riddleandfinns.co.uk" class="email">info@riddleandfinns.co.uk</a></p>
</li>

Since we’re dealing with a list of restaurants, each hCard is marked up inside a list item. Each restaurant is an organisation; we signify this by placing the classes fn and org on the element surrounding the restaurant’s name (according to the hCard spec, setting both fn and org to the same value signifies that the hCard represents an organisation rather than a person).

The address information itself is contained within a div of class adr. Note that the HTML <address> element is not suitable here for two reasons: firstly, it is intended to mark up contact details for the current document rather than generic addresses; secondly, address is an inline element and as such cannot contain the paragraphs elements used here for the address information.

A nice thing about microformats is that they provide us with automatic hooks for our styling. For the moment we’ll just tidy up the whitespace a bit; for more advanced style tips consult John Allsop’s guide from 24 ways 2006.

.vcard p {
	margin: 0;
}
.adr {
	margin-bottom: 0.5em;
}

To plot the restaurants on a map we’ll need latitude and longitude for each one. We can find this out from their address using geocoding. Most mapping APIs include support for geocoding, which means we can pass the API an address and get back a latitude/longitude point. Mapstraction provides an abstraction layer around these APIs which can be included using the following script tag:

<script type="text/javascript" src="http://mapstraction.com/src/mapstraction-geocode.js"></script>

While we’re at it, let’s pull in the other external scripts we’ll be using:

<script type="text/javascript" src="jquery-1.2.1.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=YOUR_KEY" type="text/javascript"></script>
<script type="text/javascript" src="http://mapstraction.com/src/mapstraction.js"></script>
<script type="text/javascript" src="http://mapstraction.com/src/mapstraction-geocode.js"></script>

That’s everything set up: let’s write some JavaScript!

In jQuery, almost every operation starts with a call to the jQuery function. The function simulates method overloading to behave in different ways depending on the arguments passed to it. When writing unobtrusive JavaScript it’s important to set up code to execute when the page has loaded to the point that the DOM is available to be manipulated. To do this with jQuery, pass a callback function to the jQuery function itself:

jQuery(function() {
	// This code will be executed when the DOM is ready
});

Initialising the map

The first thing we need to do is initialise our map. Mapstraction needs a div with an explicit width, height and ID to show it where to put the map. Our document doesn’t currently include this markup, but we can insert it with a single line of jQuery code:

jQuery(function() {
	// First create a div to host the map
	var themap = jQuery('<div id="themap"></div>').css({
		'width': '90%',
		'height': '400px'
	}).insertBefore('ul.restaurants');
});

While this is technically just a single line of JavaScript (with line-breaks added for readability) it’s actually doing quite a lot of work. Let’s break it down in to steps:

var themap = jQuery('<div id="themap"></div>')

Here’s jQuery’s method overloading in action: if you pass it a string that starts with a < it assumes that you wish to create a new HTML element. This provides us with a handy shortcut for the more verbose DOM equivalent:

var themap = document.createElement('div');
themap.id = 'themap';

Next we want to apply some CSS rules to the element. jQuery supports chaining, which means we can continue to call methods on the object returned by jQuery or any of its methods:

var themap = jQuery('<div id="themap"></div>').css({
	'width': '90%',
	'height': '400px'
})

Finally, we need to insert our new HTML element in to the page. jQuery provides a number of methods for element insertion, but in this case we want to position it directly before the <ul> we are using to contain our restaurants. jQuery’s insertBefore() method takes a CSS selector indicating an element already on the page and places the current jQuery selection directly before that element in the DOM.

var themap = jQuery('<div id="themap"></div>').css({
	'width': '90%',
	'height': '400px'
}).insertBefore('ul.restaurants');

Finally, we need to initialise the map itself using Mapstraction. The Mapstraction constructor takes two arguments: the first is the ID of the element used to position the map; the second is the mapping provider to use (in this case google ):

// Initialise the map
var mapstraction = new Mapstraction('themap','google');

We want the map to appear centred on Brighton, so we’ll need to know the correct co-ordinates. We can use www.getlatlon.com to find both the co-ordinates and the initial map zoom level.

// Show map centred on Brighton
mapstraction.setCenterAndZoom(
	new LatLonPoint(50.82423734980143, -0.14007568359375),
	15 // Zoom level appropriate for Brighton city centre
);

We also want controls on the map to allow the user to zoom in and out and toggle between map and satellite view.

mapstraction.addControls({
	zoom: 'large',
	map_type: true
});

Adding the markers

It’s finally time to parse some microformats. Since we’re using hCard, the information we want is wrapped in elements with the class vcard. We can use jQuery’s CSS selector support to find them:

var vcards = jQuery('.vcard');

Now that we’ve found them, we need to create a marker for each one in turn. Rather than using a regular JavaScript for loop, we can instead use jQuery’s each() method to execute a function against each of the hCards.

jQuery('.vcard').each(function() {
	// Do something with the hCard
});

Within the callback function, this is set to the current DOM element (in our case, the list item). If we want to call the magic jQuery methods on it we’ll need to wrap it in another call to jQuery:

jQuery('.vcard').each(function() {
	var hcard = jQuery(this);
});

The Google maps geocoder seems to work best if you pass it the street address and a postcode. We can extract these using CSS selectors: this time, we’ll use jQuery’s find() method which searches within the current jQuery selection:

var streetaddress = hcard.find('.street-address').text();
var postcode = hcard.find('.postal-code').text();

The text() method extracts the text contents of the selected node, minus any HTML markup.

We’ve got the address; now we need to geocode it. Mapstraction’s geocoding API requires us to first construct a MapstractionGeocoder, then use the geocode() method to pass it an address. Here’s the code outline:

var geocoder = new MapstractionGeocoder(onComplete, 'google');
geocoder.geocode({'address': 'the address goes here');

The onComplete function is executed when the geocoding operation has been completed, and will be passed an object with the resulting point on the map. We just want to create a marker for the point:

var geocoder = new MapstractionGeocoder(function(result) {
	var marker = new Marker(result.point);
	mapstraction.addMarker(marker);
}, 'google');

For our purposes, joining the street address and postcode with a comma to create the address should suffice:

geocoder.geocode({'address': streetaddress + ', ' + postcode});

There’s one last step: when the marker is clicked, we want to display details of the restaurant. We can do this with an info bubble, which can be configured by passing in a string of HTML. We’ll construct that HTML using jQuery’s html() method on our hcard object, which extracts the HTML contained within that DOM node as a string.

var marker = new Marker(result.point);
marker.setInfoBubble(
	'<div class="bubble">' + hcard.html() + '</div>'
);
mapstraction.addMarker(marker);

We’ve wrapped the bubble in a div with class bubble to make it easier to style. Google Maps can behave strangely if you don’t provide an explicit width for your info bubbles, so we’ll add that to our CSS now:

.bubble {
	width: 300px;
}

That’s everything we need: let’s combine our code together:

jQuery(function() {
	// First create a div to host the map
	var themap = jQuery('<div id="themap"></div>').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(
				'<div class="bubble">' + hcard.html() + '</div>'
			);
			mapstraction.addMarker(marker);
		}, 'google');	 
		geocoder.geocode({'address': streetaddress + ', ' + postcode});
	});
});

Here’s the finished code.

There’s one last shortcut we can add: jQuery provides the $ symbol as an alias for jQuery. We could just go through our code and replace every call to jQuery() with a call to $(), but this would cause incompatibilities if we ever attempted to use our script on a page that also includes the Prototype library. A more robust approach is to start our code with the following:

jQuery(function($) {
	// Within this function, $ now refers to jQuery
	// ...
});

jQuery cleverly passes itself as the first argument to any function registered to the DOM ready event, which means we can assign a local $ variable shortcut without affecting the $ symbol in the global scope. This makes it easy to use jQuery with other libraries.

Limitations of Geocoding

You may have noticed a discrepancy creep in to the last example: whereas my original list included seven restaurants, the geocoding example only shows five. This is because the Google Maps geocoder incorporates a rate limit: more than five lookups in a second and it starts returning error messages instead of regular results.

In addition to this problem, geocoding itself is an inexact science: while UK postcodes generally get you down to the correct street, figuring out the exact point on the street from the provided address usually isn’t too accurate (although Google do a pretty good job).

Finally, there’s the performance overhead. We’re making five geocoding requests to Google for every page served, even though the restaurants themselves aren’t likely to change location any time soon. Surely there’s a better way of doing this?

Microformats to the rescue (again)! The geo microformat suggests simple classes for including latitude and longitude information in a page. We can add specific points for each restaurant using the following markup:

<li class="vcard">
	<h3 class="fn org">E-Kagen</h3>
	<div class="adr">
		<p class="street-address">22-23 Sydney Street</p>
		<p><span class="locality">Brighton</span>, <abbr class="country-name" title="United Kingdom">UK</abbr></p>
		<p class="postal-code">BN1 4EN</p>
	</div>
	<p>Telephone: <span class="tel">+44 (0)1273 687 068</span></p>
	<p class="geo">Lat/Lon: 
		<span class="latitude">50.827917</span>, 
		<span class="longitude">-0.137764</span>
	</p>
</li>

As before, I used www.getlatlon.com to find the exact locations – I find satellite view is particularly useful for locating individual buildings.

Latitudes and longitudes are great for machines but not so useful for human beings. We could hide them entirely with display: none, but I prefer to merely de-emphasise them (someone might want them for their GPS unit):

.vcard .geo {
	margin-top: 0.5em;
	font-size: 0.85em;
	color: #ccc;
}

It’s probably a good idea to hide them completely when they’re displayed inside an info bubble:

.bubble .geo {
	display: none;
}

We can extract the co-ordinates in the same way we extracted the address. Since we’re no longer geocoding anything our code becomes a lot simpler:

$('.vcard').each(function() {
	var hcard = $(this);
	var latitude = hcard.find('.geo .latitude').text();
	var longitude = hcard.find('.geo .longitude').text();
	var marker = new Marker(new LatLonPoint(latitude, longitude));
	marker.setInfoBubble(
		'<div class="bubble">' + hcard.html() + '</div>'
	);
	mapstraction.addMarker(marker);
});

And here’s the finished geo example.

Unobtrusively Mapping Microformats with jQuery

2007-12-12T00:28:40+00:00

Unobtrusively Mapping Microformats with jQuery

My contribution to 24 ways: using Mapstraction to geocode hCards (extracted with jQuery) and plot them on a Google Map.

Tags: 24-ways, geocoding, google-maps, hcard, javascript, jquery, mapstraction, microformats

DiSo: Distributed Social Networking applications

2007-12-06T17:48:05+00:00

DiSo: Distributed Social Networking applications

New project to prototype a decentralised social network on top of WordPress, using OpenID, microformats and social whitelisting.

Via OAuth 1.0, OpenID 2.0 and up next: DiSo

Tags: diso, microformats, openid, prototyping, social-whitelisting

Portable Social Networks: Take Your Friends with You

2007-11-23T23:56:12+00:00

Portable Social Networks: Take Your Friends with You

Brian Suda explains how OpenID, XFN and hCard can be used together to bootstrap portable social networks.

Tags: brian-suda, hcard, microformats, openid, portablesocialnetworks, xfn

identity-matcher

2007-10-04T14:53:12+00:00

identity-matcher

Dopplr’s social network importing code (for Gmail, Twitter, Facebook and sites supporting Microformats), implemented as a Rails ActiveRecord plugin.

Tags: dopplr, facebook, fowa, fowa2007, gmail, identitymatcher, matt-biddulph, microformats, openid, plugins, portablesocialnetwork, rails, ruby, social-graph, twitter

lxml.cssselect

2007-09-24T23:57:17+00:00

lxml.cssselect

lxml includes an implementation of CSS 3 selectors, which compiles them to XPath expressions. Should be a useful tool for parsing Microformats from Python.

Via Ian Bicking

Tags: css, css3, libxml2, lxml, microformats, python, selectors, xpath

Satisfaction signup page

2007-09-18T11:25:45+00:00

Satisfaction signup page

Check out the box on the right: it lets you use hCard to instantly import your public profile data (including a user icon) from Flickr, Twitter, Upcoming and more.

Tags: hcard, microformats, portablesocialnetworks, satisfaction, signup

Microformats in Google Maps

2007-07-31T23:36:17+00:00

Microformats in Google Maps

No doubt thanks to the influence of Kevin Marks.

Via Jeremy Keith

Tags: google, google-maps, jeremy-keith, kevin-marks, microformats

Quoting IE Team Job Ad

2007-07-18T07:43:48+00:00

Does the idea of redefining the role of the Internet browser appeal to you? Do the terms HTTP, RSS, Microformats, and OpenID, excite you? If so, then this just might be the opportunity for you.

— IE Team Job Ad

Tags: http, internet-explorer, microformats, microsoft, openid, rss

Importing your social network from other sites

2007-06-26T01:46:09+00:00

Importing your social network from other sites

Dopplr now does this from GMail, Twitter, vCard or hCard and XFN. I’m convinced that contact import is a killer app for OpenID.

Tags: contactimport, dopplr, gmail, hcard, microformats, openid, twitter, vcard, xfn

hAccessibility

2007-04-27T13:07:59+00:00

hAccessibility

The use of the abbr element in hCalendar causes screen readers to read out an incomprehensible number instead of a date.

Tags: accessibility, hcalendar, microformats

Triplr

2007-03-30T15:30:15+00:00

Triplr

Ultra simple GET-based web service for converting RSS / Atom / RDF / Microformats+GRDDL to HTML / ntriples / RDF / RSS / JSON / Turtle. Small pieces, loosely joined.

Tags: atom, grddl, html, json, microformats, ntriples, rdf, rss, semanticweb, triplr, turtle

soupselect

2007-02-28T13:47:14+00:00

soupselect

My simple extension to BeautifulSoup that allows you to grab elements using CSS selectors; should be useful for parsing microformats.

Tags: beautifulsoup, css, microformats, python, soupselect

Microformats Bookmarklet

2007-02-27T23:43:26+00:00

Microformats Bookmarklet

Microformats bookmarklet, targetted at Safari. Uses jQuery CSS selectors for parsing, and generates .vcf vCard files using data: uris.

Tags: bookmarklets, datauris, jquery, microformats, safari, vcard

OpenID and microformats support on XTech site

2007-02-27T12:46:25+00:00

OpenID and microformats support on XTech site

“A single-sign on solution like OpenID solves an important problem for us, as most people tend to interact with our conference web sites in only one or two time periods each year.”

Tags: microformats, openid, xtech