Tags: hcard

10

sparkline

Small world, loosely joined

I’m in Seattle. Dopplr tells me that Bobbie is showing up in Seattle on the last day of my visit. I send Bobbie a direct message on Twitter. He tells me the name of the hotel he’ll be staying at.

I use Google Maps to find the exact address. All addresses on Google Maps are marked up with . I press the in my bookmarks bar to download the converted vcard into my address book. Thanks to , my updated address book is soon in the cloud online. My gets the updated information within moments.

I go to the address. I meet Bobbie. We have coffee. We have a chat.

The World Wide Web is a beautiful piece of social software.

hCard Wizard

The microformats meetup in San Francisco after An Event Apart had quite a turnout. The gathering was spoiled only by Jenn getting her purse stolen. Two evenings earlier, Noel had been robbed at gunpoint. San Francisco wasn’t exactly showing its best side.

Still, the microformats meetup was a pleasant get-together. Matthew Levine pulled out his laptop and gave me a demo of the Lazy Web in action…

On the first day of An Event Apart, I twittered a reminder that my liveblogging posts were filled with hCards. Christian asked how I added the hCards and I replied that, while I just add them by hand, some kind of “wizard” for adding simple hCards to any textarea would be very welcome.

Less than 48 hours later, Matthew had whipped up exactly what I asked for. It’s a bookmarklet. Drag it to your bookmarks bar and click on it whenever you want to add a simple hCard. It uses JavaScript to create a faux window with a form where you are prompted to enter given name and family name. You can also add a middle name and a URL.

This is just a small subset of all the properties available in hCard so it isn’t suitable for detailed hCards. If you’re creating the markup for a contact page, for example, you’d be better off with the hCard-o-matic. But this little bookmarklet easily hits 80% of the use cases for adding hCards within body text (like in a blog post, for example).

This is a first release and there will inevitably be improvements. The ability to add XFN values would be a real boon. Still… that’s really impressive work for something that was knocked together so quickly.

If you want to use the bookmarklet (regardless of what blogging engine or CMS you use), drag this to your bookmarks bar:

hCard Wizard

Closed open data

I arrived in San Francisco yesterday after a smooth flight (I bumped into Malarkey on the plane—how did I not spot him at the airport?). Now I’m on the ground, staying with Tantek for a couple of days—I’ll be moving into a hotel room once the conference starts.

I have a few days on either side of the conference to explore San Francisco. I’ll probably end up walking around a lot. It might be fun to make use of one of the newer features of Google Maps: put yourself on the map. If this feature had existed when I was in Chicago for An Event Apart, I would have plotted my explorations of that city.

If I do map my movements while I’m in San Francisco, you’ll be able to find them on my profile page. That page also has an hCard… sorta.

Alas, the hCard is contained within an embedded iframe. This means that most microformat parsers—bookmarklets, plugins, converters—won’t find the hCard because they parse at the URL level, reasonably enough. There doesn’t seem to be any good reason for using an iframe. This is exactly the kind of embedding that’s normally done on the server before a page is served up to the browser.

The guys over at Google are smart so I’m sure they’ll get this sorted out but I can’t help but feel that it’s a perfect example of why it’s important to use markup before adding microformats. If you aren’t using the right elements to structure your content to begin with, it’s probably going to be more of a struggle to implement that extra sprinkling of microformats.

Semantic brevity

When I write here at adactio.com, I often sprinkle in some microformats. As I wrote in Natural Language hCard, I’ve developed a sense of smell for microformats:

Once I started looking for it, I started seeing identity and event information in lots of places… even when it doesn’t explicitly look like cards or calendars.

If I’m linking to somebody using their full formated name, then it’s a no-brainer that I’ll turn that into an hCard:

<span class="vcard">
<a class="fn url" href="http://example.com/">
Joe Bloggs
</a>
</span>

But what if I don’t want want to use the full name? It would sound somewhat stilted if I wrote:

I was chatting with Richard Rutter the other day…

When you work alongside someone every day, it sounds downright weird to always refer to them by their full name. It’s much more natural for me to write:

I was chatting with Richard the other day…

I would still make his name a hyperlink but what can I do about making this text into an hCard? Should I change my writing style and refer to everyone by their full formated name even if the context and writing style would favour just using their first name?

Enter the abbr element:

ABBR: Indicates an abbreviated form

I can write “Richard” in my body text and use the semantics of (X)HTML to indicate that this is the abbreviated form of “Richard Rutter”:

<abbr title="Richard Rutter">
Richard
</abbr>

From there, it’s a simple step to providing an hCard containing the formated name without compromising the flow of my text:

<span class="vcard">
<a class="url" href="http://clagnut.com/">
<abbr class="fn" title="Richard Rutter">
Richard
</abbr>
</a>
</span>

Now a parser will have to do some extra legwork to find the formated name within the title attribute of the abbr element rather than in the text between the opening and closing tags of whatever element has a class of “fn”. But that’s okay. That’s all part of the microformats philosophy:

Designed for humans first and machines second

Specifically, humans who publish first, machines that parse second.

If I were to link off to Richard’s site from here, I’d also combine my microformats: hCard + XFN:

<span class="vcard">
<a class="url" rel="friend met co-worker" href="http://clagnut.com/">
<abbr class="fn" title="Richard Rutter">
Richard
</abbr>
</a>
</span>

Now I’ve got a bounty of semantic richness:

All of that in one word of one clause of one sentence:

I was chatting with Richard the other day…

MicroformatID

Tom Morris was in town today today so I invited him to take shelter from the miserable weather ‘round at Clearleft Towers. Which reminds of something Tom showed me at BarCamp Brighton that I’ve been meaning to share for a while now.

Tom has an hCard on his blog. By default the information provided is fairly basic: an email address, a URL and a vague physical address. Right by the hCard, there’s a simple form that allows you to log on using OpenID. If you log on and you’re on a white list of Tom’s friends, the hCard is updated to reveal more information: telephone numbers and a complete physical address.

That’s pretty clever. And when you consider that OpenID is a URL-based authentication system and XFN is also based around URLs, it would be pretty easy to have the white list correspond to an XFN list on the same page as the hCard.

hCard | OpenID | XFN… it’s like Unix pipes for the Web: small pieces, loosely joined.

Mashed

It sounds like Mashup Camp was a hive of very productive activity. Kevin Lawver gave a presentation on portable social networks but instead of just talking about it, he wrote some Ruby code. Kevin is using OpenID for log in, followed by hCard parsing and XFN spidering (see also: Gavin Bell’s work). Superb stuff!

Meanwhile, Plaxo is now supporting OpenID and microformats thanks to the efforts of Kaliya and Chris.

And just in case you think that this is still a niche geek thing, here are the job details for Program Manager of Internet Explorer over at Microsoft:

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.

Bedrolling

One of the great things about having an international event like @media taking place in London is that I get to see so many of my North American friends without having to cross the Atlantic. I made the most of the opportunity to hang out with Dan, Tantek and Shawn while they were in town. I even went so far as to abduct Jason and Joe and bring them down to Brighton.

Before bundling them on a coastbound train, Jessica and I showed them the treasures of the British Library, a collection to warm the heart of any typography geek. We browsed through documents ancient and new, peering at the letters written down for posterity (Scott’s journal always give me the heebie-jeebies, opened as it is on the last page which reads “For God’s sake look after our people.”)

Once we reached my adopted hometown, they engaged in all the usual tourist activities, mostly involving tea and beachfront promenading. Despite my best efforts, I couldn’t convince Jason to try jellied eels.

I have a tradition here at adactio.com. Whenever I have a guest over, I add them to my bedroll; kind of like a blogroll but with a higher barrier to entry. Needless to say, this bedroll is marked up with XFN to describe my relationships to each guest, and hCard to supply contact information.

Usually when I mark up somebody’s name, I can use fn optimisation, like this:

<li class="vcard">
<a rel="friend met colleague"
href="http://joeclark.org/" class="fn url">
Joe Clark
</a>
</li>

Technically speaking, the n property is required in a vcard (and hCard is a 1:1 representation of vcard) but when fn is applied to a string like this, parsers can assume that the string before the space is the given name (Joe) and that the string after the space is the family name (Clark). This pattern fits the 80/20 rule pretty well: it works for about 80% of use-cases. There is an implied n value.

This will work as long as there is a string with a single space in the middle of it. Jason’s name throws up an interesting case. There are two spaces in “Jason Santa Maria.” How should parsers interpret this? Is it safe to assume that “Santa” is a middle name? Clearly not in this case.

So I have to explicitly mark up Jason’s given and family name like this:

<li class="vcard">
<a rel="friend met colleague"
href="http://jasonsantamaria.com/" class="n url">
<span class="given-name">Jason</span>
<span class="family-name">Santa Maria</span>
</a>
</li>

Mind you, “Jason Santa Maria” is his formatted name so I can still add the fn value:

<li class="vcard">
<a rel="friend met colleague"
href="http://jasonsantamaria.com/" class="fn n url">
<span class="given-name">Jason</span>
<span class="family-name">Santa Maria</span>
</a>
</li>

Jason has one of those double-worded family names, like Thomas Vander Wal. But it’s completely different to other three-word names such as “Mark Norman Francis”:

<li class="vcard">
<a rel="friend met colleague"
href="http://cackhanded.net/" class="fn n url">
<span class="given-name">Mark</span>
<span class="additional-name">Norman</span>
<span class="family-name">Francis</span>
</a>
</lI>

See, Norm!’s middle name is defined as additional-name.

hCard still has enough semantic richness for me to add Jason’s middle name—which I happen to know is “Andrew”—should I wish to:

<li class="vcard">
<a rel="friend met colleague"
href="http://jasonsantamaria.com/" class="fn n url">
<span class="given-name">Jason</span>
<span class="additional-name">Andrew</span>
<span class="family-name">Santa Maria</span>
</a>
</li>

So hCard scales up pretty well to some edge-case scenarios. That said, there is no confirmation-name property so I can’t easily add that particular bit of extra information. Jason’s confirmation name is… Andrew.

That’s right: his full name is Jason Andrew Andrew Santa Maria.

See, it’s traditional at confirmation time to choose a new middle name. But Jason obviously felt that he had enough words in his name. So his logic runs like this… “If, for my confirmation name, I choose the name Andrew—which is already my middle name—then it won’t actually count as a new name.” Alas, the system doesn’t quite work that way. And so Jason ended up with the same name (Andrew) repeated twice in the middle of his name.

I suppose I could double up both Andrews into a singe additional-name field like this:

<li class="vcard">
<a rel="friend met colleague"
href="http://jasonsantamaria.com/" class="fn n url">
<span class="given-name">Jason</span>
<span class="additional-name">Andrew Andrew</span>
<span class="family-name">Santa Maria</span>
</a>
</li>

But that’s probably overkill and anyway, Jason probably doesn’t want to broadcast his full, somewhat repetitive name. So it’s probably best if I don’t even mention the whole “Andrew Andrew” thing. Forget I ever said it.

In any case, it’s my pleasure to add Stan to the bedroll. Joe was already on there: he has the distinction of being the only one to have stayed over at my previous flat as well as my current abode.

I wonder if I should make the bedroll more like a tag cloud: the more often you stay, the larger your name appears. Brian, Joe and Norm!—all of whom have stayed more than once—would then all appear in a larger font size while Elsa—who just napped on the sofa—would be rendered smaller.

Nah… silly idea. But I will keep the bedroll going when I move into my next flat which hopefully won’t be too traumatic a move. I’ll be looking at some more potential properties tomorrow. Wherever I lay my sofa-bed—and unfold it when my fellow geeks come to visit—hat’s my home.

A tipping point for microformats

My spidey senses are tingling. Something has been happening in the last week or so. Microformats are getting noticed.

Until now, microformats were trapped in a chicken and egg situation. Few people wanted to publish microformatted content unless there were tools that would then make use of those formats. Meanwhile, the tool makers didn’t want to make applications to harness microformats until a critical mass of people were already publishing with those formats.

Technorati have broken that circular argument with the introduction of microformats search. It’s still in beta but already it’s started a new wave of interest in microformats. This is the killer app we’ve been waiting for.

I’ve been contacted by quite a few different people lately with questions about implementing hCard or hCalendar on their sites. The reason is pretty straightforward.

What’s the first thing you do when you’re presented with any new kind of search engine? That’s right… you ego surf. If your name isn’t returning any results from the Technorati kitchen then you’re going to want to do something about it.

So it may be ego, not altruism, that is driving the current push of increased microformat usage. Whatever the reason, I’m just glad to see more and more data being published in a format that I can take with me as part of my local infocloud.

It’s also a real time saver for the people providing the data. Publishing the same data in more than one format is a pain.

Michael Heilemann created an iCal schedule for Reboot 8. Jon Hicks has done the same for @media. All that effort wouldn’t have been necessary at all if the original schedules on the conference websites were marked up with a few extra class names.

Mind you, the @media site does have all the speakers marked up in hCard. You can use the wonderful Tails extension for Firefox to isolate the contact information or just point that page to Brian Suda’s vCard extractor on Technorati and you can instantly add all of those people to your address book.

I’ve been doing my bit for the microformats revolution over on The Session. There are hReviews in the Amazon-powered shop and there’s a brand new section that I launched a few days ago. The events page lists user-contributed details of upcoming concerts, festivals and workshops, all marked up in hCalendar. Right now it’s a handy way for someone to discover places to go for some fun in Ireland this Summer. In the future, I hope to build on the microformatted content to provide personalised information tailored to people’s location and schedule.

Like I said in my talk at Reboot:

Microformats are the nanotechnology for building a semantic web.

(By the way, there are a few microformats hidden in that article: I took a perverse pleasure in marking up the Renaissance with class="vevent").

Remember, the microformats community isn’t even a year old yet. This is just the beginning. I’m quite certain that we’ll see many more cool tools that harness microformats in the coming months.

Of course, we’ll probably also see the introduction of microformatted spam (hSpam? Ham?). That will be surest indication that a technology has really hit the big time: just look at what happened to email, blogs, comments and trackbacks.

Natural language hCard

Drew has written up the process of adding hCard to Vitamin. To view the results in action, try visiting Vitamin using Firefox with the Tails extension installed.

Drew explains what prompted the conversion:

Something struck me about the site as soon as I saw all the list of advisors. It’s the perfect candidate for exuberant use of the hCard microformat, so I dropped Ryan Carson a line and made the suggestion.

I recently had a similar satori. On every page of this site, there’s a little explanatory blurb in the sidebar:

Adactio is the online home of Jeremy Keith, a web developer living and working in Brighton, England.

This used to be contained in a simple paragraph element:

<p>Adactio is the online home of Jeremy Keith, a web developer living and working in Brighton, England.</p>

I noticed that this little paragraph contained:

  • my full name,
  • my profession,
  • my town and
  • my country.

<p>Adactio is the online home of Jeremy Keith, a web developer living and working in Brighton, England.</p>

This information is easily encoded in hCard:

<p class="vcard">Adactio is the online home of <span class="fn">Jeremy Keith</span>, a <span class="title">web developer</span> living and working in <span class="adr"><span class="locality">Brighton</span>, <span class="country-name">England</span></span>.</p>

Bam! Instant semantic richness.

I could have stopped there but I decided to go a little further and add a URL and email address:

<p class="vcard"><a class="url" href="http://adactio.com/">Adactio</a> is the online home of <a class="email fn" href="mailto:jeremy@adactio.com">Jeremy Keith</a>, a <span class="title">web developer</span> living and working in <span class="adr"><span class="locality">Brighton</span>, <span class="country-name">England</span></span>.</p>

This got me thinking about other places where microformats can be insterspersed in the flow of natural English sentences. I updated the author page over on the DOM Scripting site (there’s already an hCalendar of events). Speaker bios on conference websites would be another prime candidate.

I borrowed an idea from Andy Hume and started marking up comments as hCards on DOM Scripting and Principia Gastronomica. Once I started looking for it, I started seeing identity and event information in lots of places… even when it doesn’t explicitly look like cards or calendars.

The next time I’m writing or marking up some copy, I intend to sniff it for names, contact details, dates, etc. I hope to develop a nose for microformats.

Bedroll

The blogroll is a common component to many blogs. It’s a sociable idea: a sort of recommended reading list of blogs by other people.

To North Americans, the word blogroll is a nice play on words on logroll. To European English speakers, however, it sounds regrettably similar to bog roll (bog as in toilet, roll as in paper).

I’ve never had a blogroll here at Adactio, but I have decided to a list of links to other blogs. Here’s the catch though: I’m only linking to people who have stayed in my house. I’m calling it my bedroll.

It is, of course, XFN friendly, even though it’s a foregone conclusion that everyone will have rel="met".

I’ve also marked everyone up with hCards. If you have a blog/bog/bed roll, I encourage you to the same. Here’s an example:

<li class="vcard"> <a class="fn url" href="http://designrabbit.com/" rel="friend met">Cindy Li</a> </li>

Wanna get on the ‘roll? Well, ya gotta come visit me. Wanna come visit me? Well, you might have to hold off for a little while… Jessica and I will be moving in to a new place at the start of next month. First thing we’ll do is get a nice comfy sofa. After that, normal service will return at Geek Central Station… we’ll be sure to register our new abode at Can I Crash?