microformats has been only two years old, yet it has brought significant changes in a relatively short time.
What is it, actually? According to microformats.org, “[microformats is] designed for humans first and machines second, [they] are a set of simple, open data formats built upon existing and widely adopted standards.”
Enough with the fluff, let’s see how it actually works, microformats in action:
Arie Kusuma Atmaja nampang gitu lhoh
Flickr picture source
The above picture is me browsing to the LinkedIn profile of one of Indonesia’s renowned Ruby on Rails experts, Arie Kusuma Atmaja. The overlay window that contains these semantic information is not a LinkedIn feature. Rather, it is the easily usable, cross-browser Microformats Bookmarklet by LeftLogic. Go on… try it if you haven’t!
As you can see, the mere act of clicking the bookmarklet shows you some important facts about Arie (or any microformats-enabled you’re currently at). In case of a microformats-enabled resume page like in LinkedIn, it shows you where he works, when, education information, and related stuff. For fun comparison purposes only, my LinkedIn profile has more detailed information than his, hehe ;-)
The best part is not only that the information is human-readable, but it can also be extracted and processed automatically by machines or software. The primary distinguishing trait of a microformats-enabled HTML page is that it has semantic meaning. A microformats processor can know the difference between a name, an e-mail address, a street address, a job, a university, and so on; while in plain HTML, all you can infer are things dealing with paragraphs, tables, lists, and so on.
Making microformats-enabled pages aren’t hard at all, actually it is very easy! It’s even much easier than CSS.
To see how simple it is, let’s see a snippet of a real-world microformats, still courtesy of Arie:
Most of the above snippet is just HTML. The microformats part is simply the class=”something“ convention. Simple, and it gets the job done. :-)
Some more commonly used microformats specifications include:
* hCard for people and organizations
* hCalendar for calendars and Events
* hCalendar for calendars and Events
* VoteLinks and hReview for opinions, ratings, and reviews
* XFN for social networks
* rel-license for licenses
* rel-tag for tags, keywords, and categories
* XOXO for lists and outlines
* …and more…
Despite all these specifications, “who uses it?” is a good question. It turns out, there has been many, and more and more sites are adopting it. LinkedIn with hResume is one example, along with Google Maps, Yahoo, Flickr, and all these cool guys have been using them. Why shouldn’t you?
Interested? Here are some stuff to get you started:
1. Online Tools
1. Microformats Bookmarklet by LeftLogic
A handy microformats explorer bookmarklet. Useful also if you’re on the go and you want to check out some microformats. No need to install anything fancy on the computer.
2. Operator Firefox Extension
Microformats explorer extension for Firefox. Whether you’re a web developer or simply want to check out this latest technology, this is a very useful tool.
3. Tails Firefox extension is another microformats Firefox extension
4. Almost Universal Microformats Parser is a useful web-based tool to parse microformats.
2. Tutorials and Resources
1. Microformats, what they are and how to use them, by Smashing Magazine
2. Microformats Tutorial by XFront
This is a very extensive tutorial. The complete tutorial package including the example files is a 13 MB download! :-)
3. How to Use Microformats by Vitamin Features
4. Introduction to Microformats by WhyMicroformats.com
5. The Big Picture on Microformats by Digital Web Magazine
6. Another by Digital Web Magazine: Microformats Primer
7. Back to the future: Mozilla Firefox 3.0 Does Microformats
Read/WriteWeb’s articles also touched microformats-related stuff quite often.
3. Microformat Parsers
1. Mofo Ruby Gem and Rails Plugin
Of course, this is Ruby on Rails blog! Mofo is a microformats parser for Ruby and it also doubles as a Rails plugin. Check out Chris Wanstrath’s post for more information.
There are also microformat parsers for other languages:
2. Sumo is a microformats parser for JavaScript
3. hKit is a microformats parser for PHP
4. Microformats Parser is another parser for PHP
5. Microformats Parser for Python
6. Hpricot Ruby Gem
Found a bizarre microformat or inventing your own? No problem, Hpricot comes to the rescue. Parse any HTML-ish document as you see fit… More info available from this RedHanded post.
7. scrAPI is another Ruby library for parsing HTML that can be useful for processing microformats.
4. References
1. Microformats.org
“Official” web site of Microformats. You can read everything about microformats, current specifications and newly proposed specs.
2. “Microformats: Empowering Your Markup for Web 2.0″ Book by John Allsopp
This is the first book dedicated to, and is a comprehensive guide to, microformats. It explores why, in Bill Gates’s words, “We need microformats”; how microformats work; and the kinds of problems microformats help solve. the book covers every current microformat, with complete details of the syntax, semantics, and uses of each, along with real-world examples and a comprehensive survey of the tools available for working with them. the book also features case studies detailing how major web content publishers such as yahoo put microformats to work in their web applications.
3. Brian Suda’s microformats cheatsheet
For people who likes it quick and done, this is perfect. It lists microformats properties by format and also lists each format and the hierarchy. This includes elemental microformats, compound microformats and some of the standard design patterns used.
4. Dave Child’s microformats cheatsheet is another good reference
5. And more cheatsheets on microformats.org wiki
6. Gleaning Resource Descriptions from Dialects of Languages (GRDDL) is a recently approved W3C Recommendation that can be used, among others, for extracting semantic information (including microformats) from HTML pages.
Feel free to add more resources as you see fit, in the comments! :-)
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment