Login | Register   
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Discover Microformats for Embedding Semantics : Page 3

Developing for the semantic web will require working with the complexities of several semantic technologies. However, there's a simpler approach that can give you a jump start in bringing semantics to your web applications.


advertisement
Putting Microformats to Work
The hCard type is used for contact information and is based on the vCard standard. By providing structure to news stories and blog posts, which often discuss people, it is possible for web crawlers to retrieve this information and automatically convert it to a vCard, which can be used in a vCard-aware application such as Apple's Address Book. This conversion makes it easy for people to populate their address books and build contact lists. By applying cascading styles sheets (CSS) to hCards you can make them appear however you wish and publish them directly on web pages and blogs. Here's a sample:

BEGIN:VCARD VERSION:3.0 N:Sherman;Lee FN:Lee Sherman URL:http://www.devx.com/ ORG:Jupitermedia END:VCARD

Using the hCard microformat markup, the entry becomes:

<div class="vcard"> <a class="url fn" href="http://www.devx.com/">Lee Sherman</a> <div class="org">Jupitermedia</div> </div>

Here is a more detailed example:


Jupitermedia 150 Executive Park Blvd., Suite 4100 San Francisco, CA 94134 USA Phone: +1-415-555-1234 Email: info@jupitermedia.com Fax: +1-415-555-6789

Where the markup is:

<div class="vcard"> <div class="fn org">Jupitermedia</div> <div class="adr"> <div class="street-address"> 150 Executive Park Blvd Suite 4100</div> <div> <span class="locality">San Francisco</span>, <abbr class="region" title="California">CA</abbr> <span class="postal-code">94134</span> </div> <div class="country-name">USA</div> </div> <div>Phone: <span class="tel">+1-415-555-1234</span> </div> <div>Email: <span class="email">info@jupitermedia.com</span></div> <div> <span class="tel"><span class="type">Fax</span>: <span class="value">+1-415-555-6789</span> </span> </div> </div>

The hCalendar type is used for events and is based on the iCalendar standard. This type is perhaps even more useful than hCard in that it provides a way for desktop-bound calendars such as Outlook on Windows or Apple's iCal to take advantage of the various online calendars and events listings published by numerous event producers, independent publications, and corporate entities. Web crawlers can automatically convert hCalendar listings to iCalendar listings, where they can then be inserted programmatically into desktop applications.

In addition, by marking up event notices on web pages and blogs, content authors can provide users with an easy way to extract this information, eliminating the need to retype it or copy and paste it into a calendar application. As with hCard, CSS can be used to specify the appearance of an online calendar. For example, an equivalent event:

BEGIN:VCALENDAR PRODID:-//XYZproduct//EN VERSION:2.0 BEGIN:VEVENT URL:http://www.web2con.com/ DTSTART:20071005 DTEND:20071020 SUMMARY:Web 2.0 Conference LOCATION:Argent Hotel\, San Francisco\, CA END:VEVENT END:VCALENDAR

would look like this in the hCalendar microformat:

<div class="vevent"> <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a> <span class="summary">Web 2.0 Conference</span>: <abbr class="dtstart" title="2007-10-05">October 5</abbr>- <abbr class="dtend" title="2007-10-20">19</abbr>,at the <span class="location">Argent Hotel, San Francisco, CA</span> </div>

Those are two of the most common types of microformats—contacts and events—but with the arrival of Web 2.0, these days most web pages include rich media types such as the videos found on YouTube or specific types of content such as the movie reviews found on Rotten Tomatoes. Wouldn't it be nice if you could encapsulate this information to be extracted for use in other applications? This kind of encapsulation and extraction is possible with microformats in certain applications; however, it's important to note that not every media type or content type has a corresponding microformat available currently.

Everyone's a Critic
A proposed microformat called hReview is designed to provide a way for users to share, distribute, syndicate, and aggregate reviews. The hReview type is designed around a minimal schema that the authors hope will be simple yet flexible enough to accommodate various kinds of reviews for books, movies, restaurants, and so forth on the web today. This application is challenging because review formats vary greatly. Yet, most reviews share some common fields, making it possible to come up with a schema based on this subset.

Here's an example of how hReview might be used, as taken from the wiki at Microformats.org. The HTML code for a product review looks like this:

<div> <a href="http://www.amazon.com/exec/obidos/ASIN/B000089CJI/"> <img src="http://images.amazon.com/images/P/B000089CJI.01._SCTHUMBZZZ_.jpg" alt="Album cover photo: The Postal Service: Give Up." /> The Postal Service: Give Up</a> <blockquote><p> "The people thought they were just being rewarded for treating others as they like to be treated, for obeying stop signs and curing diseases, for mailing letters with the address of the sender.... Don't wake me, I plan on sleeping in..."</p> <p> "Nothing Better" is a great track on this album, too... </p> </blockquote> (*****) </div>

Adding hReview to this review requires a few more elements for the rating and reviewer:

<div class="hreview"><span class="item"> <a class="url fn" href="http://www.amazon.com/exec/obidos/ASIN/B000089CJI/"> <img src="http://images.amazon.com/images/P/B000089CJI.01._SCTHUMBZZZ_.jpg" alt="Album cover photo: The Postal Service: Give Up. " class="photo" /> The Postal Service: Give Up</a></span> <div class="description"><p> "The people thought they were just being rewarded for treating others as they like to be treated, for obeying stop signs and curing diseases, for mailing letters with the address of the sender.... Don't wake me, I plan on sleeping in..."</p> <p> "Nothing Better" is a great track on this album, too...</p></div> (<abbr class="rating" title="5">*****</abbr>) <p class="reviewer vcard">Review by <a class="url fn" href= "http://ifindkarma.com/blog/">Adam Rifkin</a>, <abbr class="dtreviewed" title="200502">February 2005</abbr></p></div>

And this hReview might be presented like this:

[Album cover photo: ] [The Postal Service:] [ Give Up ] The Postal Service: Give Up "The people thought they were just being rewarded for treating others as they like to be treated, for obeying stop signs and curing diseases, for mailing letters with the address of the sender... Don't wake me, I plan on sleeping in..." "Nothing Better" is a great track on this album, too... (*****) Review by Adam Rifkin, February 2005.

Besides the microformat types discussed here, there are several others that have been designed to enable semantic markup for specific types of information:
  • hAtom (hAtom spec.) – for marking up Atom feeds from within standard HTML
  • hResume (hResume spec.) – for résumés or CVs
  • rel-directory (rel-directory spec.) – for creating and including distributed directories
  • rel-nofollow – an attempt to discourage third-party content spam (for example, spam in blogs)
  • rel-tag (rel-tag spec.) – for decentralized tagging (Folksonomy)
  • xFolk (xFolk spec.) – for tagged links
  • XFN – for social relationships
  • XOXO – for lists and outlines
As mentioned previously, the microformats specifications are a community effort, and they are open and widely available. Support for microformats is growing. They are expected to be supported natively by forthcoming browsers such as Firefox Version 3 and Microsoft Internet Explorer 8. Developers who want to get an early start on using microformats can make use of the Firefox extension Operator, which is able to detect common microformats such as hCard, hCalendar, geo, hReview, and rel-tag.

Though they are relatively new, microformats are gaining support from Google and Yahoo! and are already in use by such web services as Yahoo! Local, Flickr, and Upcoming.org. They represent the next stage in the evolution of the web by moving beyond web sites as static "brochureware" and providing a simple approach to building semantics into current web site design and development. As the industry shifts from the original web and more recent dynamic Web 2.0 technologies to the coming Web 3.0 by way of semantic technologies, we should see the Internet provide the ability to work with web content and behave as if it is all implemented in one enormous application that anticipates the needs of its users and acts accordingly. Microformats can help you get there from here by providing a simple way to embed semantics in web pages.



Lee Sherman is a freelance technology journalist based in San Francisco.
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap