{"id":67,"date":"2006-03-27T17:02:58","date_gmt":"2006-03-28T00:02:58","guid":{"rendered":"http:\/\/www.redmonk.com\/cote\/wp\/?p=67"},"modified":"2006-03-27T17:02:58","modified_gmt":"2006-03-28T00:02:58","slug":"testing-out-microformats-hcard","status":"publish","type":"post","link":"https:\/\/redmonk.com\/cote\/2006\/03\/27\/testing-out-microformats-hcard\/","title":{"rendered":"Testing Out Microformats: hCard"},"content":{"rendered":"

Since I’ve been talking a big KISS-game recently, I thought I’d get my hands dirty with a couple microformats<\/a>. Today I went for hCard, which is a XHTML version of vCard, which itself is just a way to markup your contact info<\/a>. There are marking up your links and cite<\/code>s to other people<\/a>. But, for now, I’m just interested in one person (me) declaring their contact info.<\/p>\n

The Page<\/h2>\n

If you look at the sidebar of the main page for the blog<\/a>, you’ll see:<\/p>\n

\n\"Rendered<\/a>\n<\/p>\n

Which is pretty much what it was before I started playing with it, sans the IM links and time zone. The point is: the visual rendering of the page and even the CSS didn’t need to change to use hCard. The microformat is unobtrusive, which is fancy-talk for “cheap to implement.”<\/p>\n

The Code<\/h2>\n

Here’s what the “code” (to use the term loosely) looks like:<\/p>\n

\n<address class="vcard">\n\t<div id="about">\n\t\t<h2>About<\/h2>\n\n\t\t<p class="pic" id="portrait">\n\t\t\t<a href="http:\/\/www.flickr.com\/photos\/cote\/"\n\t\t\t   title="More photos">\n\t\t\t   <img src="http:\/\/static.flickr.com\/31\/101406173_5dad3bf43a_m.jpg"\n\t\t\t        width="160" height="240" alt="Coté" class="photo" \/><\/a>\n\t  <\/p>\n\n\t\t<p>I'm <a class="url fn" href="http:\/\/www.peopleoverprocess.com">Coté<\/a>,\n\t\t\ta software <span class="title">Industry Analyst<\/span>\n\t\t\twith <a href="http:\/\/www.redmonk.com"><span class="org">RedMonk<\/span><\/a>.\n\t\t\tI cover a wide range of topics in the software and technology world.\n\t\t\tThese opinions are my own, but whose else would they be?<\/p>\n\t<\/div>\n\n\t<div id="contact">\n\t\t<h2>Contact<\/h2>\n\t\t<span class="email">\n\t\t\t<span class="type">Email<\/span>:\n\t\t\t<a class="email" href="mailto:cote@redmonk.com">cote@redmonk.com<\/a>\n\t\t<\/span>\n\t\t<br\/>\n\t\tY!: <a class="url" href="ymsgr:sendIM?bushwald">bushwald<\/a>\n\t\t<br \/>\n\t\tAIM: <a class="url" href="aim:goim?screenname=bushwald">bushwald<\/a>\n\t\t<br\/>\n\t\t<!-- didn't bother putting these in microformat -->\n\t\tGTalk: bushwald@gmail.com<br \/>\n\t\tMSN: msn@coteindustries.com<br \/>\n\t\tSkype: <a class="url" href="callto:\/\/bushwald">bushwald<\/a>\n\t\t<br\/>\n\t\t<span class="tel">\n\t\t\t<span class="type">Work<\/span>:\n\t\t\t<span class="value">+1-512-206-2927<\/span>\n\t\t<\/span>\n\t\t<br \/>\n\t\t<span class="tel">\n\t\t\t<span class="type">Cell<\/span>:\n\t\t\t<span class="value">+1-512-663-7507<\/span>\n\t\t<\/span>\n\t\t<br \/>\n\t\tTime Zone: <abbr class="tz" title="-06:00">CST<\/abbr><\/span>\n\t<\/div>\n<\/address>\n<\/pre>\n
That may seem like a lot of code, but the difference between what I had before adding in an hCard and after is slim.<\/p>\n
The key point here is that the microformat of an hCard more layers on top<\/i> of existing formats than rests on it’s own. A companion point is that the hCard microformat piggybacks on existing XHTML tags instead of making it’s own tags up.<\/p>\n
The long existent address<\/code> tag is used for the entire hCard, and it spans more than one “block” of data. You don’t have to use address<\/code>, of course, the important things are the class<\/code> attributes and the relationships implicit in the XHTML nesting.<\/p>\n
Convention and Hierarchy<\/h3>\n
So, what we have here is formatting by convention (to steal a page from Rails) and hierarchy.<\/p>\n
Format and convention are two words that don’t often go together, because convention implies messiness and parsing problems. But, convention, not validity<\/a>, is what makes, and made, the web successful.<\/p>\n
Hierarchy is a danger word for many coders as it’s a synonym for “bad performance” and “walking DOMs.” Both of those applied to the hilt until recently. But those problems have been steadily fixed in XML\/XHTML land with a better understanding of XSLT, CSS paths, and the fact walking a DOM in a dynamic languages (e.g., JavaScript) can be much easier than in most static (e.g., Java) languages.<\/p>\n
Rendering<\/h2>\n
Here’s what the data looks like in a third-party tool<\/a>:<\/p>\n
\n\"My<\/a>\n<\/p>\n
Not too hot because of two things: I have a funny character in my name (é) that no one nor no thing ever gets right. Bill<\/a> probably has the same problem. Also, it seems to have conflated together two of my URLs. I’m not sure if that’s because I typed in something wrong, or a bug in the tester.<\/p>\n
Why This Matters: Less Code & Config<\/h2>\n
Typical snafu’s aside, what’s amazing about this example is that with just 10-20 minutes of reading and typing, a static web page was used to provide structured data to a 3rd party tool. The time it took doesn’t matter so much, what does matter is that one view can be used by two different consumers. The URL PeopleOverProcess.com<\/a> can be used by:<\/p>\n
    \n
  1. People who want to read the webpage.<\/li>\n
  2. Software that wants to get my contact info.<\/li>\n<\/ol>\n
    Normally, you would need two different URLs\/files for that: one for each consumer. That is, microformats make screen-scrapping really easy. No more need to use regexes and script-hacks.<\/p>\n
    This simplistic example doesn’t mean much. But let’s expand it to something with even more data: free\/busy calendars.<\/p>\n
    A constant problem for us at RedMonk is scheduling meetings. We each have different OS’s, but more importantly, 99% of our scheduling is with people outside of our organization. so you can imagine that the Exchange\/Outlook approach doesn’t work too well.<\/p>\n
    Now, you can imagine that we could put a calendar on a web page that showed when we were free and busy: it might even say what we were doing at the time, contain links to relevant things (like follow-up blog posts)…you know, the Web 2.0 calendaring wet dream ;> Upcoming<\/a>, eventful<\/a>, and others are good initial cuts at a UI for a calendar (the next steps are integrating with more applications and services, like Exchange and iCal, or dodgeball<\/a>.).<\/p>\n
    What gets tricky is if some application — say Outlook — wants to use that calendar web page to help someone schedule time with RedMonk. Good luck with that. At best you’d have to screen-scrape and someone hook up with Outlook.<\/p>\n
    Now, if that calendar web page was microformated — with hCalendar<\/a>? — things would go much better for the program involved: parsing the well-formed XHTML of a microformat is do-able in a short amount of time (read: “cheap”).<\/p>\n
    You might be thinking, “but you could just have the programatic view of the calendar at another URL.” And, sure, you could, but why have more code?<\/p>\n
    Which highlights a key benefit of microformats in web pages is that you don’t need a protocol of discovery for the programatic content. For example, if I give you the URL http:\/\/www.peopleoverprocess.com, I might have to markup in that page that my programatic calander view is at http:\/\/www.peopleoverprocess.com\/cal.xml. (Indeed, this is what’s done for RSS feeds with a link<\/code> tag in the page’s head<\/code>.) That’s where the whole “one view instead of two” idea comes in again. Once you’ve got the URL, you’ve “discovered” everything there is to know.<\/p>\n
    Using It<\/h2>\n
    There are always going to be times when another view is better. On the other hand, when it comes to many types of data — contact, calendars, social net relationships, and other declarative statements in both consumer and enterprise software — coding a support another view for programatic access may be just time prohibitive enough to prevent you from providing programatic access. In those times, microformats are a good option. Meta-data is exciting stuff, and microformats are light-weight enough to actually be a viable approach to meta-data…as opposed to say, RDF, at least by programmer-lore.<\/p>\n
    The over-all simplicity of microformats makes them a good base-line for providing data access as well. Instead of starting out with a new view from the get go, It might be a good idea to start by using a microformat, and only expand out to a brand new view if needed.<\/p>\n
    Disclaimer:<\/b> Microsoft is a client.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Since I’ve been talking a big KISS-game recently, I thought I’d get my hands dirty with a couple microformats. Today I went for hCard, which is a XHTML version of vCard, which itself is just a way to markup your contact info. There are marking up your links and cites to other people. But, for […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-67","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/redmonk.com\/cote\/wp-json\/wp\/v2\/posts\/67","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/redmonk.com\/cote\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/redmonk.com\/cote\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/redmonk.com\/cote\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/redmonk.com\/cote\/wp-json\/wp\/v2\/comments?post=67"}],"version-history":[{"count":0,"href":"https:\/\/redmonk.com\/cote\/wp-json\/wp\/v2\/posts\/67\/revisions"}],"wp:attachment":[{"href":"https:\/\/redmonk.com\/cote\/wp-json\/wp\/v2\/media?parent=67"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/redmonk.com\/cote\/wp-json\/wp\/v2\/categories?post=67"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/redmonk.com\/cote\/wp-json\/wp\/v2\/tags?post=67"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}