hCard microformat validator

I was creating a contact page for a website and I wanted to use hCard microformat to encode the address, telephone, fax and the geo location. After I created it, I looked for a way to quickly validate it and I found

hCard microformat Validator 1.0

What a great service! I must tell you, this service is super easy to use. Just type in a URL of the page that contains hCard data and get the results instantly. I read the spec but... I still made few mistakes that were promptly brought to my attention.

I made a typo and instead of adr I used addr, which rendered couple of nested elements invalid. Ok, that was a quick fix.

The telephone number is shop's (this website is for a retail store) and I marked the telephone number as shop, which is invalid. The valid values are: home, work, pref, fax, cell, voice, video, pager, car, msg, modem, bbs, isdn, pcs. Another easy fix! The same went for the fax number.

Lastly, the email address that I entered was of a domain that did not register itself yet. The message I got was:

Lookup of e-mail's domain “notyetregistered.com.au” failedVerify that e-mail address is correct.

Wow, I did not expect such a thorough check!

Another good point for this validator is that it not only tells you what is wrong, but it also links to a FAQ page where the problem is explained.

Well done and thank you! Now this contact page validates 100%!

Blog Update

I have added subscribe now section on the left, so now you can easily bookmark or add my blog posts Google, My Yahoo!, Newsgator, Feedlounge, Netvibes and Bloglines.

Another useful feature that I added is the browse by category, which shows the labels I used in my posts and their frequency.

My plan is keep improving the usability of this blog. In the next stage (if I find some free time) I'd like to add those little icons for digg, reddit and del.icio.us.

Lastly, if you did not know it already, my blog features microformats. So I guess my blog can be used as an example of how microformats will simplify the web.

Microformats - hCard

What is new on my blog today? I added my contact information into the template. Since I learnt more about microformats at the Web Directions conference, I used hCard microformat. No, you cannot see it as the style on that DIV is set to display: none and that means it's there but not visible.

If you have Tails or Tails Export extensions for Firefox or Flock browsers, you should be able to see these normally grey icons get some colors .

When you click on Tails you get

When you click on Tails Export you get

All I added was this:

<div class="vcard" style="display: none;">
 <a class="url fn" href="http://hanuska.blogspot.com/">Dushan Hanuska</a>
 <div class="adr">
  <span class="locality">Sydney</span>
  <span class="region">NSW</span>
  <span class="postal-code">2000</span>
  <span class="country-name">Australia</span>
 </div>
 <span class="geo">
  <span class="latitude">-33.879176</span>,
  <span class="longitude">151.212044</span>
 </span>
</div>

If you want to add your hCard onto your page, you can create one using hCard Creator. It's quite simple and gives only the basic options, but it's a good place to start.

Microformats

In these days we turn for the answers to our questions to the Internet. Sometimes we even refer to it as the wisdom of the crowd.

Take IMDB for example. It is a centralized solution. When it comes to the reviews they are written by the people. But who owns these reviews? Are they real? Can we trust them? Google is the answer to all our prayers. Or as a big sign in front of one church said “Google does not have the answers to all questions.”

We saw the raise of open source. Then we also had a raise of open standards for document formats. They are getting more popular and also more important. The next step will be the open data. Standardizing the data format will also allow for more mashups. Very popular type of mashup these days is the combination of maps and some other proprietary data. If two people publish the data in two different formats, none of them can make use of the other.

Web has evolved. The move is from HTML to XHTML. The benefits are such as that microformats are simple data formats, HTML based, based on existing standards and existing development practices. To mention a few, there is hCard (based on vCard), hCalendar (based on iCal), hReview, hListing- for classfields, hResume and many more.

I also discovered that there are some Firefox extensions that discover microformats on the page and allow the user to see them. One that is worth mentioning is Tails.

Where to do from here? We all publish data on the web. More microformatted data we publish more options of their usage will be present.

More information about microformats can be found at microformats.org, microformatique.com. Read about how to highlight microformats with CSS. New book on microformats by John Allsopp will be coming out in early 2007.