As part of a recent local store web site project, we’ve been experimenting with how to represent physical store locations using microformats and RDFa in a hybrid approach, giving the parser/page scraper/app the ability to choose it’s own format to parse while keeping it visually simple for the end user. This example (live on 1000+ store pages) uses hCard and geo microformats along with FOAF and GEO RDFa specfications. There are some interesting observations I have noted from iterating on this a couple of times:
- Does a hybrid approach make sense? Could this be applied to other microformat/RDFa instances?
- I think it would be beneficial to come up with an approach for representing store hours in the data. To my knowledge there is no microformat to handle this. I did stumble on the GoodRelations ontology, and could apply this as an RDFa. Looks like GoodRelations also appears in Yahoo! SearchMonkey’s documentation.
The example. First things first, add RDFa DOCTYPE declaration and appropriate namespaces for validity (dublin core dc: appears further in the (X)HTML in the posts, does not appear in this example).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
The core of the markup:
<div id="storeinfo">
<div class="vcard" typeof="foaf:Organization">
<div class="fn n" property="foaf:name"><h1 class="org" property="geo:lat_long" content="44.863312,-93.292557">Best Buy - Richfield</h1></div>
<span rel="foaf:depiction"><img src="http://stores.bestbuy.com/wp-content/store-images/bestbuy-store-281.jpg" border="0" alt="Best Buy - Richfield" class="photo" /></span>
<div class="info">
<div class="adr">
<div class="street-address">1000 West 78th St</div>
<span class="locality">Richfield</span>, <span class="region">MN</span> <span class="postal-code">55423</span>
</div>
<div class="tel"><span>Phone</span>: 612-861-3917</div>
<div class="geo">GEO: <span class="latitude">44.863312</span>, <span class="longitude">-93.292557</span></div>
<div class="addl"><a href="javascript:mapanddirection('281','cat12091')">Maps & Directions</a> | <a href="javascript:openWeeklyAd('http://bestbuy.shoplocal.com/bestbuy/new_user_entry.aspx?adref=','55423')">Weekly Ad</a></div>
<h3>Store Hours</h3>
<div class="hours">
<strong>Mon:</strong> 10-9;
<strong>Tue:</strong> 10-9;
<strong>Wed:</strong> 10-9;
<strong>Thurs:</strong> 10-9;
<strong>Fri:</strong> 10-9;
<strong>Sat:</strong> 10-9;
<strong>Sun:</strong> 11-7
</div>
</div>
</div>
</div>
Download the src
Taken from Lilian Vernon (lillianvernon.com). Judging from the state of my trousers today, I could use one too…
<div class="hlisting">
<div class="item hproduct">
<ol class="breadcrumbs">
<li><a href="http://www.lillianvernon.com/home.jsp">Home</a></li>
<li class="category"><a href="http://www.lillianvernon.com/catalog/category.jsp?parentCatId=3">Store & Organize</a></li>
<li class="category"><a href="http://www.lillianvernon.com/catalog/thumbnail.jsp?parentCatId=3&catId=149">Closet & Drawers</a></li>
</ol>
<div class="picside">
<img src="http://lillianvernon.richfx.com.edgesuite.net/image/media/046534_M.jpg" alt="photo of deluxe hanging pants rack" class="photo" /><br/>
<img src="http://www.lillianvernon.com/assets/images/new_prod_detail/zoom.jpg" alt="zoom in" />
</div>
<div class="infoside">
<h1 class="fn">Deluxe Hanging Pants Rack</h1>
<div class="identifier>
<span class="type">SKU</span>:
<span class="value">046534</span>
</div>
<div class="details">
<p class="description">Holds 8 pairs of slacks neatly with shelf for sweaters, shirts and more! 16" wide with non-slip plastic sleeves that prevent sliding. Silver finish. Easy assembly. </p>
<div class="savings">SAVE<br/>$7</div>
<div class="historical">Was $14.98</div>
<div class="now">Now <span class="price">$7.49</span></div>
<div class="savings">Save $7.49</div>
<div class="purchase">
<div class="quantity">Quantity 1</div>
<div class="buy"><img src="/assets/images/new_prod_detail/add_to_cart0108.gif" alt="add to cart" /></div>
</div>
</div>
</div>
</div>
</div>
hproduct example src
Today’s example of the day is visually presented like this:
<div class="hlisting">
<div class="item hproduct">
<ol>
<li class="lister vcard"><a class="url fn" href="http://storename.com">Magers and Quinn</a></li>
<li class="category"><a href="http://storename.com/categories/books">Books</a></li>
<li class="category"><a href="http://storename.com/categories/cooking">Cooking</a></li>
<li class="category"><a href="http://storename.com/categories/quick-easy-cooking">Quick and Easy Cooking</a></li>
<li>Gordon Ramsay's Fast Food</li>
</ol>
<div class="leftcol">
<img src="http://images.storename.com/products/ramsay-fast-food.jpg" class="photo" alt="gordan ramsay fast food book" />
<p><span class="condition">New:</span> <span class="price">$27.99</span></p>
<p>Pub price: $35.00</p>
<p>Hardcover</p>
<p class="availability">Out of stock</p>
</div>
<div class="rightcol">
<h1 class="fn">Gordon Ramsay's Fast Food Recipes from the F Word</h1>
<p>By Ramsay, Gordon</p>
<dl class="identifier">
<dt>ISBN:</dt>
<dd>1554700647</dd>
</dl>
<dl>
<dt>Contributors:</dt>
<dd>Sargeant, Mark (Contributor); Quah, Emily (Contributor); Mead, Jill (Photographer)</dd>
<dt>Publisher:</dt>
<dd>Amer Youth Hostels</dd>
<dt>Published:</dt>
<dd>2008</dd>
<dt>Pages:</dt>
<dd>255</dd>
<dt>Weight:</dt>
<dd>2.70lbs.</dd>
<dt>Height:</dt>
<dd>10.25"</dd>
<dt>Width:</dt>
<dd>8.00"</dd>
<dt>Depth:</dt>
<dd>1.50"</dd>
<dt>Language:</dt>
<dd>English </dd>
</dl>
<h4>Publishers Comments</h4>
<p class="description">A celebrity host of Hell's Kitchen features more than one hundred accessible recipes that are organized in accordance with everyday needs and special occasions, in a volume that places an emphasis on fast preparation and features complementary tips on stocking a pantry.</p>
</div>
</div>
</div>
Download example markup (HTML)
