Microformats mode on :-)
See:
http://www.adaruby.com/2007/09/20/top-10-microformats-resources-for-web-20-developers/
------------------------------------------------------------------------
Top 10 microformats Resources for Web 2.0 Developers
<http://www.adaruby.com/2007/09/20/top-10-microformats-resources-for-web-20-developers/>
20 09 2007
Shave your Semantic (or semantic?) Web
<http://www.flickr.com/photos/torchlightlms/1206281509/>
microformats <http://microformats.org/> has been only two years old
<http://microformats.org/blog/2007/06/21/microformatsorg-turns-2/>, yet
it has brought significant changes in a relatively short time.
What is it, actually? According to microformats.org
<http://microformats.org/about/>, “[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 <http://www.linkedin.com/in/ariekeren>
Flickr picture source <http://www.flickr.com/photos/ceefour/1408453688/>
The above picture is me browsing to the LinkedIn profile
<http://www.linkedin.com/in/ariekeren> of one of Indonesia’s renowned
Ruby on Rails experts, Arie Kusuma Atmaja
<http://ariekusumaatmaja.wordpress.com/2007/04/05/caps-lock-dan-enter-berubah-jadi-control/>.
The overlay window that contains these semantic information is *not *a
LinkedIn <http://www.linkedin.com/> feature. Rather, it is the easily
usable, cross-browser Microformats Bookmarklet by LeftLogic
<http://leftlogic.com/lounge/articles/microformats_bookmarklet>. 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
<http://microformats.org/wiki/hresume> page like in LinkedIn, it shows
you where he works, when, education information, and related stuff. For
fun comparison purposes only, my LinkedIn profile
<http://www.linkedin.com/in/ceefour> 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
<http://en.wikipedia.org/wiki/Semantic_Web>. 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:
<div id="masthead" class="vcard contact">
<div id="nameplate">
<h1 id="name"><span class="fn n"> <span class="given-name">Arie</span>
<span class="family-name">Kusuma Atmaja</span> </span></h1>
<p class="headline title"><strong>Senior Ruby Developer at
IMT</strong></p>
<div class="adr">
<p class="locality">
Indonesia
</p>
</div>
</div>
</div>
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 <http://microformats.org/wiki/hcard> for people and
organizations
* hCalendar <http://microformats.org/wiki/hcalendar> for calendars
and Events
* hCalendar <http://microformats.org/wiki/hcalendar> for calendars
and Events
* VoteLinks <http://microformats.org/wiki/vote-links> and hReview
<http://microformats.org/wiki/hreview> for opinions, ratings, and
reviews
* XFN <http://gmpg.org/xfn> for social networks
* rel-license <http://microformats.org/wiki/rel-license> for licenses
* rel-tag <http://microformats.org/wiki/rel-tag> for tags, keywords,
and categories
* XOXO <http://microformats.org/wiki/xoxo> for lists and outlines
* …and more… <http://microformats.org/wiki/>
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
<http://wordpress.org/extend/plugins/linkedin-hresume/> is one example,
along with Google Maps <http://torrez.us/archives/2007/08/02/540/>,
Yahoo
<http://www.ylocalblog.com/blog/2006/06/21/we-now-support-microformats/>,
Flickr <http://www.flickr.com/groups/microformats/>, and all these cool
guys <http://microformats.org/wiki/hcard-examples-in-wild> 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
<http://leftlogic.com/lounge/articles/microformats_bookmarklet>*
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
<https://addons.mozilla.org/firefox/addon/4106>*
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
<http://blog.codeeg.com/tails-firefox-extension-03/> is
another microformats Firefox extension
4. Almost Universal Microformats Parser
<http://tools.blogmatrix.com/extract/> 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
<http://www.smashingmagazine.com/2007/05/04/microformats-what-they-are-and-how-to-use-them/>
2. Microformats Tutorial <http://www.xfront.com/microformats/>
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
<http://www.thinkvitamin.com/features/design/how-to-use-microformats>
by Vitamin Features
4. Introduction to Microformats
<http://whymicroformats.com/introduction-to-microformats/>
by WhyMicroformats.com
5. The Big Picture on Microformats
<http://www.digital-web.com/articles/the_big_picture_on_microformats/>
by Digital Web Magazine
6. Another by Digital Web Magazine: Microformats Primer
<http://www.digital-web.com/articles/microformats_primer/>
7. Back to the future: Mozilla Firefox 3.0 Does Microformats
<http://www.readwriteweb.com/archives/mozilla_does_microformats_firefox3.php>
Read/WriteWeb’s <http://www.readwriteweb.com/> articles also
touched microformats-related stuff quite often.
3. *Microformat Parsers*
1. Mofo Ruby Gem and Rails Plugin <http://mofo.rubyforge.org/>
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
<http://errtheblog.com/post/37> for more information.
There are also microformat parsers for other languages:
2. Sumo
<http://www.danwebb.net/2007/2/9/sumo-a-generic-microformats-parser-for-javascript>
is a microformats parser for JavaScript
3. hKit <http://allinthehead.com/hkit> is a microformats parser
for PHP
4. Microformats Parser
<http://malatestapunk-stuff.blogspot.com/2007/01/php-microformats-parser.html>
is another parser for PHP
5. Microformats Parser for Python
<http://phildawes.net/microformats/>
6. Hpricot Ruby Gem <http://code.whytheluckystiff.net/hpricot/>
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
<http://redhanded.hobix.com/inspect/hpricot01.html>.
7. scrAPI <http://rubyforge.org/projects/scrapi> is another
Ruby library for parsing HTML that can be useful for
processing microformats.
4. *References*
1. *Microformats.org <http://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
<http://www.amazon.com/gp/product/1590598148?ie=UTF8&tag=gauldong-20&link_code=as3&camp=211189&creative=373489&creativeASIN=1590598148>
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
<http://suda.co.uk/projects/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
<http://www.ilovejackdaniels.com/cheat-sheets/microformats-cheat-sheet/>
is another good reference
5. And more cheatsheets on microformats.org wiki
<http://microformats.org/wiki/cheatsheets>
Feel free to add more resources as you see fit, in the comments!
--
Hendy Irawan
www.hendyirawan.com
