SearchMonkey

SearchMonkey allows developers to create enhanced search result presentations for a web site. These appear when a user installs the easy to create application and then does a search query that provides the module as part of the normal search result.

Yahoo provides microformatted data to the SearchMonkey application at run time. This allows the developer to add great content while still building a very quick application. I’ll write more on this later as I think it is a great usage of Microformats at the user level instead of the developer level.

Beyond SearchMonkey, it’s great to know that search engines really are paying attention to this data. You’ll learn a lot about your site and its microformats as you build your first SearchMonkey application. Give it a try, it shouldn’t take you more than an hour to put together your first application.

La Cantine and the Paris Developer Scene

The event was held at a great space: La Cantine. This is a cross between a cafe and cooperative space for startups to use as an office, meeting space, and development center. It was a pleasure to meet the large crowd that turned out for the night.

Related articles by Zemanta

• Unlimited Queries with Yahoo! Search BOSS
• Be your own search BOSS
• BOSS — The Next Step in our Open Search Ecosystem
• Congrats to Yahoo! on the BOSS Launch
• Yahoo! Developer Network Hiring a Technical Evangelist
• The Monkey is Out of the Bag: Yahoo! Opens Search Developer Platform
• Yahoo! FireEagle: Personal Location Service Platform for Developers

There’s a little attribute in HTML links that is starting to get a bit of attention lately. The “rel” attribute is a sparsely defined attribute that applies some meta information about a link’s relationship to other documents. Unfortunately, this information is usually hidden from your users. Let’s take a light-hearted stab at turning it into a visual element.

Rel attribute usage

While the W3C originally considered the rel attribute to describe the relationship of pages to each other, i.e. next, previous, directory, and start. The attribute has been adopted by the Microformat community for its inherit usefulness. The rel attribute is now used for tags, to define your relationship to someone, and even to tell search engines not to bother following a link.

The opportunities to use the rel attribute are seemingly endless. There are more proposals to define people you don’t like and links for voting.

But all of this flexibility comes at a small price. To remain valid, you need to tell the browser what these new rel values may actually mean. This is handled by linking to appropriate profiles. Just simply insert the profiles into your head tag. Multiple profiles may throw a validation error, but it’s ok. You don’t need to do this for the standard rel values.

We will be using the CSS3 attribute selector functionality to look at the value of the rel attribute and apply some style accordingly. First we’ll add some padding and a background image to any link that has a rel attribute. We’ll then use background positioning to display an icon that is appropriate for the link. It’s a fairly simple hack.

For more information on using attribute selectors, check out my previous posts:

• Progressive enhancement of links using the CSS attribute selector
• Attribute selectors to provide language information

Sample HTML Code

Sample CSS


a[rel] {padding-left:20px; background:url(rel-sprite.png) no-repeat 0 0; }
a[rel~="help"] {background-position: 0 -350px ;}
a[rel~="license"] {background-position: 0 -1347px ;}
a[rel~="no-follow"] {background-position: 0 -1200px ;}
a[rel~="tag"] {background-position: 0 -47px ;}


It’s all fun and games

I’ll be the first to admit this exercise has significant issues. I’m assuming the following elements are true:

1. All possible rel attribute values are accounted for in my CSS, if not there will be a blank space generated by the first rule
2. You can only have one relationship defined by XFN. Unfortunately, most people are defined by multiple values, i.e. rel=”met friend colleague”. This CSS does not account for multiple values.

So, the display of your rel attributes may be a bit off in the edge cases. Keep the spirit light and nobody will say anything… I hope. Have fun with your rel attributes. They’re just sitting there waiting to be used.

View the finished rel attribute style example.

Related Information

• Microformats Wiki: Profile URI’s
• Microformat: Rel Design Pattern
• Microformat: Tags
• Microformat: No Follow
• Microformat: Bookmark
• Microformat: XFN – Friends Network
• Microformat: XEN – Enemies Network
• W3C: Link Types
• Icon Buffet – The source of most icons used in this example

I was having trouble testing some hreview elements today and assumed I had the latest version of Tails. Fortunately, a link on Microformatique suggested visiting the Tails home page to really get the most recent version.

If you have this extension in Firefox, do not count on the usual ff extension update thingamabob to work. Go to the Tails site today and get the latest version (.3.7). It is much, much better than the one I used to have (.3.1).

Future Semantics

So far we’ve seen that there are three sources of semantics in HTML

• The built in semantics of HTML itself – its elements and attributes
• The ad hoc semantics of developers inventing their own vocabularies, which is typically “injected” into HTML largely using the class and id attributes of HTML
• Semi structured approaches to developing richer semantics, in particular the microformats project.

It would make sense that future semantic developments of HTML would come from these or similar sources or approaches. In this article I want to focus on each in turn, and consider the benefits and shortcomings of each approach to developing richer semantics for HTML.

I’ll begin with the second approach, “bottom up” semantics, which I considered in the first article, and have paid no small amount of attention to with previous research. In short, despite the success of bottom up ontologies, what Thomas Vander Wal terms “folksonomies”, where common vocabularies for describing things emerge through ad hoc usage (well known examples are Flickr’s tags, and Del.icio.us), vocabularies for describing common data on the web simply haven’t emerged. This is not just an assertion, as my previous research indicates. It should in fact not come as a surprise, because class values, for example, are “hidden”, while tags at del.icio.us or flickr, by comparison are visible giving rise to a positive feedback loop – when I as a user see a tag for a particular kind of thing, I am more likely to use it myself for similar kinds of things. Over time, particular terms appear to “win”, and become the conventionally accepted tag for that kind of thing. With class and id values on the other hand, we simply don’t get the network effect to anoint particular words as the names of things.

Semantics in HTML Part III – Towards a semantic web

All of these questions and issues kept me from trying out microformats until Tantek Çelik  gave a lecture at Yahoo! this year.  While the usefulness of the concept was still vague, the ease of implementation inspired us to give it a try.

Microformats let you define information in your page with a set of recognized classes. A parser (program or web site that transforms your information into useful tools) looks for containers with those classes and collects the information within them.  The user is then able to add people, events, recipes, web sites, etc to their organizers, databases, etc. Think of it as a way to multi-task your web pages.

Yahoo! Tech launched with basic support of the hReview microformat. We’ve continued to investigate how we can further support microformats and similar technology.

Introducing the Yahoo! Tech Bloggers with hCard microformat

The hCard microformat is based on a pre-existing standard (vCard).  There are many programs, web sites, and aggregators that are already prepared to use your information. You can add this to your site quite easily.

Let’s look at some code on a blog post by Robin Raskin (http://tech.yahoo.com/blogs/raskin/621) This block begins with a list of content for the microformat parser, since it is not a part of the visual design, we are hiding it with CSS. The next section includes a set of links, her bio link has class=”url”.

Microformat classes and their functions

• div.vcard: This triggers the parser, letting it know the following information conforms to the hCard microformat
• li.fn: This is the formatted name of the person: Robin Raskin.
• li.title: Robin Raskin’s title – Yahoo! Tech Advisor
• li.org: The company Robin works for – Yahoo! Tech
• img.photo: This is a photograph of Robin
• a.url: This is a web site for Robin.
• a.url.email: If the Email Robin link were in the classic mailto:foo@foo.com format, we’d use these classes. Instead, the target is a contact form. To avoid confusion, we’ve left this link alone.

Testing your microformatting

Tails is a great Firefox extension for testing your code. It will display an icon in the browser if a page has microformatting. You can then click on it to open a window with all of the available information. This is a great debugging tool. Be sure to get the latest version for the best microformats support and extensibility.

An intertwining pattern library

Microformats are a rapidly growing technology. As patterns develop, they can be integrated into various other microformats and patterns. This requires going beneath the surface of the microformat twiki to harness its power.  While your results may not bring immediate benefits, the level of work can be minimal. This also requires having some faith in your code, as you may not be able to test the results.

The rel-tag microformat

Technorati has made the rel-tag an important addition to web sites. Simply add rel=”tag” to a link that refers to a page that is an index for information about the link text.  For instance, Robin Raskin’s page features a set of category related links. The rel-tag microformat lets Technorati and other parsers know where to will find the category index pages. 

The rel-directory pattern extends this concept. If Robin’s post was about digital cameras and she included a link to the digital camera index, we could add “directory” to the rel tag.  The final code would be:


Digital Cameras

The rel-home draft

Ther rel-home draft allows web developers to specifically define the link that takes the user to the home page of the site. Currently this can be done without microformatting; but lacks significant browser support. To use straight HTML, place this in the head of your page: <link rel=”home” href=”/index.html” />. Theoretically, the browser would detect this and give the user a hotkey to go back to the home page.

The rel-home microformat draft allows the developer to easily label the home page link. For instance, on Yahoo! Tech, the user can either click the large Tech logo or the products tab. Neither of these are the most intuitive, the rel-home could provide further assistance. Browsers don’t support this yet, but its simplicity makes it a natural to begin now.
The code is quite simple, add rel=”home” to your link:


Products

Should you begin using Microformats?

As you can see, the code is fairly simple. If your site is already presenting contact information, reviews, calendar events, or category indices, it’s time to look at adding a few Microformat details. The rel-tag, rel-home patterns are the easiest to apply. The hCard and hCalendar formats will give you the most usable information. Keep an eye on microformats.org for the latest developments and join their discussion list to play an active part in the evolution of patterns. Microformats may not bring peace to the Middle East, but they will give your web site’s content more power and functionality.

Resources

• hCard creator – This tool creates hCard code for you.
• hCard specification  - Microformat Twiki
• The rel-tag specification – Microformat Twiki
• The rel-directory draft – Microformat Twiki
• The rel-home draft – Microformat Twiki
• Tails Firefox extension – Instant access to microformat details

Due to the modular construction of this page,  I am not able to get the product name into the hReview. Dan Cederholm’s post about using the object include microformat pattern may actually solve this issue.

The include pattern lets you define the product or person’s identity earlier in the page and then reference it in individual reviews or blog posts with an object tag. Unfortunately, Safari and Internet Explorer do not behave properly when the object element appears multiple times. An updated version of the pattern uses the link tag instead.

Link-based Object Pattern

Before you get to your reviews, define the product or person with the microformat classes item and fn. Item defines the nature of the content and fn tells us the content is the formatted name of the item. You’ll also need to add a unique id.

Product Name

In your hReview, you need to reference this product by its id.

Unfortunately, a screen reader will announce this as a link. We have a special class, microformatdetail, to hide microformat details that are not part of the visual design. This is a convenient way to add some background information to your hReview, hCard, and hCalendar elements.

.microformatdetail {display:none; /*content for microformat parsing only */}

The final Yahoo! Tech hReview microformat

Let’s look at the code for a digital camera product page. We’ll first define the product name in the top module and then present the reviews later on the page.

Add the product name at the top of the page

Olympus CAMEDIA C-5500 Sport Zoom Digital Camera

Create an individual review

Note: the new link is at the end of the metadetails paragraph

How is the hReview actually used?

We are still working on this final element of hReviews on our product pages. Once it is live, we should begin seeing the benefits. Technorati is the first search engine to begin scraping microformatted information. When hReviews become more prevalent, more search engines and sites will consolidate products with their reviews from around the web. This will give users much more flexibility with shopping decisions.

Resources

• Microformat search for LCD HDTV products and reviews
• hCard creator – This tool creates hCard code for you.
• hCard specification  - Microformat Twiki
• The rel-tag specification – Microformat Twiki
• The rel-directory draft – Microformat Twiki
• The rel-home draft – Microformat Twiki
• Tails Firefox extension – Instant access to microformat details