I decided to venture into microformats by getting my Vancouver restaurant reviews into "the system". I went to the hreview microformat site to look at what I needed to do.
My default format is roughly:
<p><a href="http://www.akbarsown.com/">Akbar's Own</a> - 4/4 - Our vote for best Indian dining in vancouver. $$$. West-side/Broadway.</p>
I chose this format as the shortest format to contain the most information possible. My primary use case is somebody visiting vancouver doesn't want a detailed review, just a quick "where to go near here for good Indian" or "where's the best Indian food"...
hreview
I need to add the microformat that my paragraphs are all hreviews. I think that should be simply:
<p class="hreview"/>.
rating
I see that I need to convert the ratings into a rating microformat. I need to add a class="rating", ie. <span><span class="rating">5</span> out of 5 stars</span>. The default scale is out of 5, and my ratings are out of 4. I could choose to express these on a scale of 4, like <span class="value">4</span>/<span class="best">4</span>, but I decided to integrate with the rest of the hreviews, I needed to change my rating scale. A very interesting first constraint on my authoring style...
The format now looks like:
<p class="hreview"><a href="http://www.akbarsown.com/">Akbar's Own</a> - <span class="rating">5</span>/5 - Our vote for best Indian dining in vancouver. $$$. West-side/Broadway.</p>
name
Next I need to format the name. It looks like I need to add a class attribute with tags fn and org, like <span class="fn org">Akbar's Own</span>. But I put address anchors around the names. The hreview site mentions that anchors can have class as well, such as <a class="url" href="http://www.akbarsown.com">http://www.akbarsown.com</a>.
Can I just combine these together, such as <a class="fn org url" href="http://www.akbarsown.com/">Akbar's Own</a>? But should there also be a class="url"? I see one example where the content isn't a url but the class="url" is added, <a class="url fn" href="http://ifindkarma.com/blog/">Adam Rifkin</a>.
This is my first question: Why, and when do I need to put a class="url" inside an anchor?
This seems counter-intuitive to put a "url" class inside an a href. The fact that it's a href means it is a link. These eerily reminds me of xlink days, where we created a mix in attribute to say things were links, ala <a xlink:type="simple" href=""/>. But it turns out that to create anchors in xml, people mix in xhtml:a elements rather than add simple xlinks into their elements. The same lesson applies in my mind, an A element with an href is a URL, so we don't need to say it is.
I now spend the 15 minutes it takes to mark up all the names of restaurants to have the class="fn org"..
reviewer
Now I need to make sure that I'm listed as a reviewer. I could add myself as a reviewer to each entry, but I'd rather do this once. I think that means I just add a class="reviewer" with my name.. I'll also throw in the version, by adding:
Reviews (<a href="http://microformats.org/wiki/hreview"> hReview v<span class="version">0.3</span></a>) by <span class="reviewer vcard"><span class="fn">David Orchard</span></span>.
Cost
We can show the prices, currently listed as a varying amount of $ signs. I put this in by abbreviations, as in <abbr class="value" title="2">$$</abbr>. So I'll just do a global replace...
Location
Now we want to have the locations marked up, with an eye to integrating into Yahoo or Google maps.. A potential problem may be that I used generic locations, like yaletown, downtown, cambie, broadway, etc. I'll just put these in as localities, ie <span class="adr"> <span class="locality">downtown</span></span>. I'm pretty sure that this be enought to integrate with mapping software. I'll need the exact address in the HTML, but I don't want that on the HTML page. I believe in keeping the reviews as short as possible, and people that are interested in a restaurant will follow links. Putting address, phone #s, hours etc. just takes away from the core of the review.
item
Apparently I have to mark these as being items, and ideally item type = business. But can I just add this into my paragraphs, like <p class="hreview description item"/> ? I don't really know...Do I have to actually do <div class="hreview"><p class="item">...
testing
OK, enough of the formattting, let's try this out.. I could try the firefox extension, but I'll try kritx.. Oh darn, I get an "error on page" when I try to add my page at http://www.kritx.com/publisher/list.
But it worked! The reviews are there! Woohoo!
Hmm,. I probably should have started from a smaller page... I'll do that for future entries.
Ah, but now we see the bugs. Firstly, the names don't show up properly in the list. I don't show up as an author.
The searches for item name don't return any results.
It looks like I have tried to combine too many things together, the hreview wants item separate from the rating, description, review date, reviewer. That seems a bit more difficult than necessary.
I'll have to do my reviews of the form:
<div class="hreview"><p><a class="fn org url item" href="http://www.akbarsown.com/">Akbar's Own</a> - <span class="rating">5</span>/5 - <span class="description">Our vote for best Indian dining in vancouver. <abbr class="value" title="3">$$$</abbr>. <span class="adr"><span class="locality">West-side broadway</span></span></span>.</p></div>
I generated a page for a single restaurant and added that to kritx.
This form worked, the URL showed up in the review site, a search for Akbar found the entry. It didn't find my name as an author though. And I'd like to have the URI for the review to be the actual paragraph, not the page. .
I updated my reviewer info to be <span class="reviewer fn">David Orchard</span>. but I couldn't get kritx to reload this page...
Let's try updating the review itself to see how long this takes...
<div class="hreview"><p><a class="fn org url item" href="http://www.akbarsown.com/">Akbar's Own</a> - <span class="rating">5</span>/5 - <span class="description">Our vote for best Indian dining in vancouver. <abbr class="value" title="3">$$$</abbr>. <span class="adr"><span class="locality">West-side broadway</span></span></span>. <span style="display:none" class="reviewer fn">David Orchard</span><span class="type" style="display:none">business</span></p></div>
Aha, this worked! It found these as businesses and the search for orchard worked.
I wonder if I add a <a name="akbar"/> will mean the review will be the right div? Apparently not..
Summary of issues
The main problems I found:
- validating that the HTML + mformat can be extracted properly
- forcing reload into the kritx site
- finding out why certain things didn't work - why wasn't the author found in the previous paragraph? Bug in spec or software?
- the spec design itself
- can the hreview and item be collapsed into one span/div?
- would it be possible to specify the Xpaths that will work/not work for finding the contents?
- why do I have to mark A elements with class="url"?
- Can I/how do I indicate a URI with a fragment ID that should be used for a particular hreview when indexed? I don't want a separate web page for each review.
- many more test cases/tutorial examples.
- large scoped issues listed at Microformats thoughts.
Positives
It was pretty straightforward to convert my data into microformats and integrate with the various sites/software. Considering how early in the game this is, the software and sites are pretty powerful and usable. Now my reviews available for use by whatever software might use it.
Leave a comment