In this section, I will show more examples of a number of microformats. (You can find a list of microformats at http://microformats.org/wiki/Main_Page
.) I have gathered the examples in this section into one page:
http://examples.mashupguide.net/ch18/sample_microformats.html
Try Operator on this URL to have it parse the various microformats. Some of the following data formats are not supported natively by Operator, but you might be able to find extra user scripts that add such support. (See “Installing User Scripts to Operator” for a how-to.)
rel-license
(http://microformats.org/wiki/rel-license
) is for specifying a license to be associated with the embedding page. For instance, when you go to the Creative Commons site (http://creativecommons.org/license
) to select a license, you will be given some HTML that uses the rel-license
microformat to indicate a license. For instance, if you select the defaults, you will get something like this:[312]
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/"> <img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/88x31.png" /> </a> <br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/"> Creative Commons Attribution 3.0 License</a>.
As noted, rel-license
uses rel-design-pattern
(that is, it uses the rel
attribute in an <a>
element).
The rel-tag
microformat (http://microformats.org/wiki/rel-tag
) is used to relate a tag (as in a folksonomic tag; see Chapter 4) to a URL. You use it by implementing rel-design-pattern
, specifically, by adding tag
to the list of values in the rel
attribute. The last path segment of the URL in the href
attribute is then considered the value of the tag, and the URL value of href
points to a collection of items having the same tag.
Consider the following example generated by WordPress for the Google Maps category for http://blog.mashupguide.net
:
<a rel="tag" title="View all posts in Google Maps" href="http://blog.mashupguide.net/category/google-maps/">Google Maps</a>
In this case, google-maps
is the tag (the last path segment of the URL in the href
attribute), and http://blog.mashupguide.net/category/google-maps/
points to the blog entries that have been tagged with the tag google-maps
.
xfn
(http://www.gmpg.org/xfn/
), which stands for XHTML Friends Network and also uses rel-
de
sign-pattern
, is used to denote personal relationships between the author of a web page and the people associated with the linked page. The easiest way is to get started is to fill out the XFN Creator (http://gmpg.org/xfn/creator
).
I’ll now present two examples. The first is for my wife’s weblog:
<a href="http://laurashefler.net/blog" rel="friend met colleague coresident spouse muse sweetheart">Laura Shefler</a>
The second is for Tim Berners-Lee’s web page. In this case, he is a contact since I don’t know him personally:
<a href="http://www.w3.org/People/Berners-Lee/" rel="contact">Tim ?Berners-?Lee</a>
xFolk
(http://microformats.org/wiki/xfolk
) is used to publish a bookmark (like the bookmarks you see in social bookmarking sites, covered in Chapter 14). That is, you can use xFolk
to tie a URL to a description and tags. (I imagine that the name xFolk
is meant to suggest folksonomies since you can use it to tag URLs.)
xFolk
uses class-design-pattern
(with class="xfolkentry"
). In the following example, the URL of the bookmark is http://www.w3.org/People/Berners-Lee
, the description is The
inventor of the WWW
, and the tag associated with the bookmark is WWW
:
<div class="xfolkentry"> <a class="taggedlink" href="http://www.w3.org/People/Berners-Lee/">Tim ?Berners-?Lee </a>: <span class="description">The inventor of the WWW</span> <a rel="tag" href="http://technorati.com/tag/WWW"></a> </div>
Note the use of the xfolkentry
, taggedlink
, and description
class names.
With Operator, you can try the “Bookmark with del.icio.us” action, which sends the bookmark to del.icio.us through the following URL:
https://secure.del.icio.us/login?url=http%3A%2F%2Fwww.w3.org%2FPeople%2FBerners-Lee%Â 2F&title=Tim%20Berners-Lee¬es=The%20inventer%20of%20the%20WWW&v=4
geo
(http://microformats.org/wiki/geo
) is used to denote the latitude and longitude of the resource tied to the embedding web page. Using http://microformats.org/wiki/geo-cheatsheet
, you can figure out how to use class-design-pattern
and use the geo
, latitude
, and longitude
class names to write an example such as the following:
<div class="geo">Tim ?Berners-?Lee's location is: <span class="latitude">42.3633690</span>, <span class="longitude">-71.091796</span>. </div>
Given all the attention we paid to mapping geotagged photos in Flickr, I should mention that Flickr uses the geo
microformat to denote the location of geotagged photos. For instance, if you load this:
http://flickr.com/photos/raymondyee/18389540/
into Firefox, you can use Operator to extract the geo
instance:
<span class="geo" style="display: none"> <span class="latitude">37.4149</span>, <span class="longitude">-122.078</span> </span>
Then you can invoke one of the default actions (for example, Find with Google Maps) to plot the location of the photo at this location:
http://maps.google.com/maps?ll=37.8721,-122.257704&q=37.8721,-122.257704
hCard
(http://microformats.org/wiki/hcard
) is used to represent such entities as people, organizations, companies, and places. An easy way to get started with hCard
is to use the hCard Creator at http://microformats.org/code/hcard/creator
.
Let’s create an hCard
for Tim Berners-Lee, the inventor of the Web, drawing on his web page at http://www.w3.org/People/Berners-Lee/
to come up with the following:
<div id="hcard-Tim-Berners-Lee" class="vcard"> <a class="url fn" href="http://www.w3.org/People/Berners-Lee/">Tim ?Berners-?Lee</a> <div class="org">World Wide Web Consortium</div> <a class="email" href="mailto:timbl@w3.org">timbl@w3.org</a> <div class="adr"> <div class="street-address">77 Massachusetts Ave. (MIT Room 32-G524)</div> <span class="locality">Cambridge</span> , <span class="region">MA</span> , <span class="postal-code">02139</span> <span class="country-name">USA</span> </div> <div class="tel">+1 (617) 253 5702</div> <p style="font-size:smaller;">This <a href="http://microformats.org/wiki/hcard"> hCard</a> created with the <a href="http://microformats.org/code/hcard/creator"> hCard creator</a>. </p> </div>
You’ll notice that inside the hCard
microformat is the adr
microformat (http://?
microformats.org/wiki/adr
). adr
is a mapping of vCard:
This specification introduces the adr microformat, which is a 1:1 representation of the aforementioned adr property from the vCard standard, by simply reusing the adr property and sub-properties as-is from the hCard microformat.
There is support in adr
for the following properties, which show up in adr
as (X)HTML attributes according to class-design-pattern
:
post-office-box
extended-address
street-address
locality
region
postal-code
country-name
hCalendar
(http://microformats.org/wiki/hcalendar
) is a microformat-based iCalendar used to represent calendar information. To quickly create an instance, use the hCalendar Creator (h
ttp://microformats.org/code/hcalendar/creator
), or consult the hCalendar
cheat sheet (http://microformats.org/wiki/hcalendar-cheatsheet
). Let’s create an hCalendar
for the WWW 2008 conference (http://www2008.org/
):
<div class="vevent" id="hcalendar-WWW-2008-17th-International-World-Wide-Web-Conference"> <a class="url" href="http://www2008.org/"> <abbr class="dtstart" title="20080421">April 21th</abbr> — <abbr class="dtend" title="20080426">25th, 2008</abbr> <span class="summary"> WWW 2008 (17th International World Wide Web Conference) </span>— at <span class="location">Beijing International Convention Center, </span> </a> <div class="description">"The World Wide Web Conference is a global event bringing together key researchers, innovators, ?decision-?makers, technologists, businesses, and standards bodies working to shape the Web. Since its inception in 1994, the WWW conference has become the annual venue for international discussions and debate on the future evolution of the Web."</div> <p style="font-size: smaller;">This <a href="http://microformats.org/wiki/hcalendar">hCalendar event</a> brought to you by the <a href="http://microformats.org/code/hcalendar/creator">hCalendar Creator</a>. </p> </div>
Here are some other noteworthy microformats:
xoxo
(http://microformats.org/wiki/xoxo
) represents hierarchical outlines (that is, nested lists).
vote-links
(http://microformats.org/wiki/vote-links
) indicates whether a link represents a vote-for
, vote-abstain
, or vote-against
the link.
hReview
(http://microformats.org/wiki/hreview
) represents reviews of URLs.
hResume
(http://microformats.org/wiki/hresume
) represents resumes.