hreview-examples

From Microformats Wiki
Jump to navigation Jump to search

hReview examples

Example hReviews.

Authors

Here are a few examples of reviews from current web sites, and how they could be easily enhanced to support the hReview structured review microformat.

Restaurant review

Here is an example of a simple online restaurant review: 

<div>
 <span>5 stars out of 5 stars</span>
 <h4>Crepes on Cole is awesome</h4>
 <span>Reviewer: <span>Tantek</span> - April 18, 2005</span>
 <blockquote><p>
  Crepes on Cole is one of the best little creperies in San Francisco. 
  Excellent food and service. Plenty of tables in a variety of sizes 
  for parties large and small.  Window seating makes for excellent 
  people watching to/from the N-Judah which stops right outside.  
  I've had many fun social gatherings here, as well as gotten 
  plenty of work done thanks to neighborhood WiFi.
 </p></blockquote>
 <p>Visit date: <span>April 2005</span></p>
 <p>Food eaten: <span>Florentine crepe</span></p>
</div>

Adding hReview to this review is quite simple: 

<div class="hreview">
 <span><span class="rating">5</span> out of 5 stars</span>
 <h4 class="summary"><span class="item fn">Crepes on Cole</span> is awesome</h4>
 <span>Reviewer: <span class="reviewer fn">Tantek</span> - 
 <abbr class="dtreviewed" title="20050418T2300-0700">April 18, 2005</abbr></span>
 <blockquote class="description"><p>
  Crepes on Cole is one of the best little creperies in San Francisco.
  Excellent food and service. Plenty of tables in a variety of sizes 
  for parties large and small.  Window seating makes for excellent 
  people watching to/from the N-Judah which stops right outside.  
  I've had many fun social gatherings here, as well as gotten 
  plenty of work done thanks to neighborhood WiFi.
 </p></blockquote>
 <p>Visit date: <span>April 2005</span></p>
 <p>Food eaten: <span>Florentine crepe</span></p>
</div>

Note that some of the properties of this sample review are not captured by hReview (visit date, food eaten). This is deliberate per the scope of keeping hReview minimal and simple.

This sample hReview could be rendered like this:

5 stars out of 5 stars
Crepes on Cole is awesome
Reviewer: Tantek - April 18, 2005

Crepes on Cole is one of the best little creperies in San Francisco. Excellent food and service. Plenty of tables in a variety of sizes for parties large and small. Window seating makes for excellent people watching to/from the N-Judah which stops right outside. I've had many fun social gatherings here, as well as gotten plenty of work done thanks to neighborhood wifi.

Visit date: April 2005
Food eaten: Florentine crepe

Multidimensional Restaurant Review

Some restaurant reviews indicate ratings for different aspects of the restaurant. Such details are represented in hReview using tagged ratings. In addition, note the inline tags inside the description of this review.

Here is one such review in text format: 

Cafe Borrone

1010 El Camino Real, Menlo Park, CA 94025, +1-650-327-0830 begin_of_the_skype_highlighting              +1-650-327-0830      end_of_the_skype_highlighting;
cafeborrone.com

Food: 18/30; Ambience: 19/30; Service: 15/30; Price: $$...

This cafe is a welcoming oasis on the Peninsula.  It even has a fountain
outside which cloaks the nearby sounds of El Camino traffic.  Next door to a  
superb indy bookstore, Cafe Borrone is an ideal spot to grab a coffee or a 
snack to accompany a newly purchased book or imported periodical.  Soups and 
sandwich specials rotate daily.  The corn chowder with croutons and big 
chunks of cheese goes especially well with a freshly toasted mini-baguette.  
Evenings are often crowded and may require sharing a table with a perfect 
stranger.  Espresso afficionados will appreciate the Illy coffee.  Noise 
levels can vary from peaceful in the late mornings to nearly overwhelming on 
jazz band nights.

As an hReview: 

<div class="hreview">
 <div class="item vcard">
  <div class="fn org summary">Cafe Borrone</div>
  <span class="adr">
   <span class="street-address">1010 El Camino Real</span>,
   <span class="locality">San Francisco</span>,
   <span class="region">CA</span>
   <span class="postal-code">94025</span>,
  </span>
  <span class="tel"><span class="voice work">+1-650-327-0830</span></span>;
  <a class="url" href="http://cafeborrone.com">cafeborrone.com</a>
 </div>
 <ul class="categories">
  <li><a href="http://en.wikipedia.org/wiki/Food" rel="tag">
   Food: <span class="rating">18</span>/<span class="best">30</span></a>;</li>
  <li><a href="http://flickr.com/photos/tags/Ambience" rel="tag">
   Ambience: <span class="rating">19</span>/<span class="best">30</span></a>;</li>
  <li><a href="http://en.wikipedia.org/wiki/Service" rel="tag">
   Service: <span class="rating">15</span>/<span class="best">30</span></a>;</li>
  <li><a href="http://en.wikipedia.org/wiki/Price" rel="tag">
   Price: <abbr class="rating" title="2">$$</abbr>...</a></li>
 </ul>
 <blockquote class="description"><p>
  This <abbr class="type" title="business">
  <a href="http://en.wikipedia.org/wiki/cafe" rel="tag">cafe</a></abbr> 
  is a welcoming oasis on the Peninsula.  
  It even has a fountain outside which nearly eliminates 
  the sounds of El Camino traffic.  Next door to a superb indy bookstore, 
  Cafe Borrone is an ideal spot to grab a 
  <a href="http://en.wikipedia.org/wiki/coffee" rel="tag">coffee</a> 
  or a meal to accompany a newly purchased book or imported periodical.  
  <a href="http://technorati.com/tag/soup" rel="tag">Soups</a> and 
  <a href="http://technorati.com/tag/sandwich" rel="tag">sandwich</a> 
  specials rotate daily.  The corn chowder with croutons and big chunks of cheese 
  goes especially well with a freshly toasted mini-baguette.  Evenings are 
  often crowded and may require sharing a table with a perfect stranger. 
  <a href="http://flickr.com/photos/tags/espresso" rel="tag">Espresso</a> 
  afficionados will appreciate the 
  <a href="http://en.wikipedia.org/wiki/Illy" rel="tag">Illy</a> coffee.  
  Noise levels can vary from peaceful in the late mornings to nearly overwhelming on 
  <a href="http://en.wikipedia.org/wiki/jazz" rel="tag">jazz</a> band nights.
 </p></blockquote>
 Review (<a href="http://microformats.org/wiki/hreview"> 
  hReview v<span class="version">0.2</span></a>)
 by <span class="reviewer">anonymous</span>, 
 <abbr class="dtreviewed" title="20050428T2130-0700">April 28th, 2005</abbr>.
</div>

With an accompanying CSS style sheet like: 

a.url { display:block }
ul.categories { margin:1em 0; padding:0 }
.categories li { display:inline }

This hReview could be presented similar to the original text:

Cafe Borrone
1010 El Camino Real, Menlo Park, CA 94025, +1-650-327-0830;
cafeborrone.com

Food: 18/30; Ambience: 19/30; Service: 15/30; Price: $$...

This cafe is a welcoming oasis on the Peninsula. It even has a fountain outside which cloaks the nearby sounds of El Camino traffic. Next door to a superb indy bookstore, Cafe Borrone is an ideal spot to grab a coffee or a snack to accompany a newly purchased book or imported periodical. Soups and sandwich specials rotate daily. The corn chowder with croutons and big chunks of cheese goes especially well with a freshly toasted mini-baguette. Evenings are often crowded and may require sharing a table with a perfect stranger. Espresso afficionados will appreciate the Illy coffee. Noise levels can vary from peaceful in the late mornings to nearly overwhelming on jazz band nights.

Review (hReview v0.2) by anonymous, April 28th, 2005.

Product review

Here is an example of a product review: 

<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 is also quite simple, but in this case requires a few more elements for the rating and reviewer which are required by hReview: 

<div class="hreview">
 <a class="item url" 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" />
 <span class="fn">The Postal Service: Give Up</span></a>
 <blockquote 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></blockquote>
 (<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.

Movie Review

Finally, here is an example of a movie review. 

<div>
 <span>anonymous, April 18th, 2005</span>
 <div>
  <a lang="zh" href="http://www.imdb.com/title/tt0299977/">
  Ying Xiong (<span lang="en">HERO</span>)
  </a>
 </div>
 <div>Rating: 4 out of 5</div>
 <blockquote><p>
  This movie has great visuals and music.
 </p></blockquote>
</div>

With hReview: 

<div class="hreview">
 <span class="reviewer">
  <span class="fn">anonymous</span>, 
  <abbr class="dtreviewed" title="20050418">April 18th, 2005</abbr>
 </span>
 <div class="item">
  <a lang="zh" class="url fn" href="http://www.imdb.com/title/tt0299977/">
  Ying Xiong (<span lang="en">HERO</span>)
  </a>
 </div>
 <div>Rating: <span class="rating">4</span> out of 5</div>
 <blockquote class="description"><p>
  This movie has great music and visuals.
 </p></blockquote>
</div>

Which could be presented like this:

anonymous, April 18th, 2005
Ying Xiong (HERO)
Rating: 4 out of 5

This movie has great music and visuals.

Examples in the wild

This section is informative.

The following sites have published hReviews, and thus are a great place to start for anyone looking for examples "in the wild" to try parsing, indexing, organizing etc. If you publish hReviews on your own page, feel free to add it to the top of this list. Once the list grows too big, we'll make a separate wiki page.

See also

Retrieved from "http://microformats.org/wiki/index.php?title=hreview-examples&oldid=64104"