June 5th, 2009 | Permalink | 3 Comments
The experimentation continues on our Best Buy Local Stores platform. For the past year or so, I’ve been interested in going beyond the standard web experience and into the world of semantic web. I am out to create and find examples of how we annotate good store data beyond the confines of the typical web site, and what commerce sites will look like in a new semantic web. After some research, the GoodRelations Ontology seemed like an appropriate solution to provide better data around our stores and offerings.
The current solution involves publishing offering, payment methods, delivery methods, store details and store hour data in RDF/XML using GoodRelations for all 1000+ Best Buy stores in the US. Examples may be found on all Best Buy Local store pages. A couple of highlights:
A special thanks to Martin Hepp for his great work and assistance in this venture.
May 19th, 2009 | Permalink | No Comments
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
May 18th, 2009 | Permalink | No Comments
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
May 14th, 2009 | Permalink | 1 Comment
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)
May 12th, 2009 | Permalink | 1 Comment
Today Google announced support for microformats and RDFa markup in a feature they’re calling “rich snippets”. As a participant in the microformats community (particularily hProduct), I have to say, as the English put it, I’m “chuffed”. There are good people putting in a lot of time in and effort to streamline, standardize and improve these markup techniques.
There’s the front-end web developer side of me that is feeling a bit more validated today. In my ten year development tenure, I have had my concerns on front end standards swept aside by the needs of the businesses I’ve worked for, and the hyper-focus by IT and business groups on back-end systems. Maybe I’m overdoing it a bit, but with the ever-growing support for clean code, and data rich markup on the front end, we seem to be at a very deserved turning point.
Note: I would also be remiss if I failed to mention Yahoo! SearchMonkey’s pre-existing support for microformats, as well as countless other apps and plugins…
I’m a big fan of the internationally-renowned Gordon Ramsay. I’m not a huge foodie per se, but any time I see his various reality shows (the UK “Kitchen Nightmares” are my favorite), I gain a little more respect for the man. I appreciate his honesty and communication style, and the way he uses explicatives is second to none. One reoccurring theme i see in his shows is his insistence on simplicity. Most of the restaurants he tries to save suffer from a major case of trying to impress their guests with over complicated dishes — ones that pair odd combinations together in hopes of being unique, others that are just too complex to satisfy most people’s palettes. By the end of most of his shows, the restaurant has revived itself by creating simple dishes that are easy to make and delight the customer.
As a web guy developing ecommerce solutions for a major retailer, I see a correlation between our company and the restaurants Gordon Ramsay is trying to save. Over time, we have taken once simple web solutions and products and heaped layer after layer of complexity on them in an effort to sell more things. This is like a chef adding ten different spice combinations and an unusual sauce to a dish that could be served with just salt and pepper — it doesn’t work, and usually has the opposite intended effect. Instead of delighting our customers with the basics, like accessible product details and an easy way to perform various tasks on the site, we complicate the recipe by adding code hacks and fancy interactive “features” that usually end up confusing the customer and driving them elsewhere in search of a no-nonsense way to fulfill their needs.
There is an inherent elegance in simple solutions. They are typically easier to create, and satisfy the needs of the customer, without a lot of hassle. They offer a good base to introduce more complex interactions over time, if warranted. We need to get back to good clean code and UI, and not disguise our intent to sell products with unnecessary complexity.
