Microformats Wiki - User contributions [en]

h-review

2015-08-21T03:49:31Z

Cleverdevil:

<entry-title>h-review</entry-title>
<span class="h-card vcard"><span class="p-name fn">[[User:Tantek|Tantek Çelik]]</span> (<span class="p-role role">Editor</span>)</span>
----
<dfn style="font-style:normal;font-weight:bold">h-review</dfn> is a simple, open format for publishing reviews on the web. h-review is one of several open [[microformats|microformat]] draft standards suitable for embedding data in HTML/HTML5 on the web.

h-review is the [[microformats2]] update to [[hReview]].

{{cc0-owfa-license}}

== Example ==
Here is a simple review example:

<source lang=html4strict>
<div class="h-review">
<h1 class="p-name">Microformats: is structured data worth it?</h1>

<blockquote>
<a class="p-item h-item" href="http://microformats.org">Microformats</a> are the simplest way to publish structured data on the web.
</blockquote>

<p>
<data class="p-rating" value="5">★★★★★</data>
Published <time class="dt-reviewed" datetime="2013-06-12 12:00:00">12<sup>th</sup> June 2013</time>
by <a class="p-reviewer h-card" href="http://example.com">Joe Bloggs</a>.
</p>

<div class="e-description">
<p>Yes, microformats are undoubtedly great. They are the simplest way to markup structured data in HTML and reap the benefits thereof, including using your web page as your API by automatic conversion to JSON. The alternatives of microdata/schema and RDFa are much more work, require more markup, and are more complicated (harder to get right, more likely to break).</p>
</div>
</div>
</source>

Parsed JSON:
<source lang=javascript>
{
"items": [
{
"type": [
"h-review"
],
"properties": {
"name": [
"Microformats: is structured data worth it?"
],
"item": [
{
"value": "Microformats",
"type": [
"h-item"
],
"properties": {
"name": [
"Microformats"
],
"url": [
"http://microformats.org"
]
}
}
],
"rating": [
"5"
],
"reviewed": [
"2013-06-12 12:00:00"
],
"reviewer": [
{
"value": "Joe Bloggs",
"type": [
"h-card"
],
"properties": {
"name": [
"Joe Bloggs"
],
"url": [
"http://example.com"
]
}
}
],
"description": [
{
"value": "Yes, microformats are undoubtedly great. They are the simplest way to markup structured data in HTML and reap the benefits thereof, including using your web page as your API by automatic conversion to JSON. The alternatives of microdata/schema and RDFa are much more work, require more markup, and are more complicated (harder to get right, more likely to break).",
"html": "<p>Yes, microformats are undoubtedly great. They are the simplest way to markup structured data in HTML and reap the benefits thereof, including using your web page as your API by automatic conversion to JSON. The alternatives of microdata/schema and RDFa are much more work, require more markup, and are more complicated (harder to get right, more likely to break).</p>"
}
]
}
}
]
}
</source>

=== Get started ===
The class '''<code>h-review</code>''' is a ''root class name'' that indicates the presence of an h-review.

'''p-name''', '''p-item''', '''p-rating''', '''dt-reviewed''', '''p-reviewer''', '''e-description''' and the other property class names listed below defined elements as ''properties'' of the h-review.

The class '''<code>h-item</code>''' is a ''root class name'' that indicates an embedded '''[[h-item]]''' for the p-item property.

The class '''<code>h-card</code>''' is a ''root class name'' that indicates an embedded '''[[h-card]]''' for the p-reviewer property.

See [[microformats2-parsing]] to learn more about property class names.

== Properties ==
h-review properties, inside an element with class '''h-review''':

* '''<code>p-name</code>''' - name of the review
* '''<code>p-item</code>''' - thing been reviewed, including embedded microformat for e.g. business or person ([[h-card]]), event ([[h-event]]), place ([[h-adr]] or [[h-geo]]), product ([[h-product]]), website, url, or other item ([[h-item]]).
* '''<code>p-reviewer</code>''' - person who authored the review, optionally with an embedded [[h-card]]
* '''<code>dt-reviewed</code>''' - date time of when the review was written
* '''<code>p-rating</code>''' - value from 1-5 indicating a rating for the item (5 best).
* '''<code>p-best</code>''' - define best rating value. can be numerically lower than worst.
* '''<code>p-worst</code>''' - define worst rating value. can be numerically higher than best.
* '''<code>e-description</code>''' - the full text written evaluation and opinion of the reviewer
* '''<code>p-category</code>''' - freeform categories or tags applied to the item by the reviewer
* '''<code>u-url</code>''' - review permalink URL

All properties are optional.

== Status ==
'''h-review''' is a microformats.org draft specification. Public discussion on h-review takes place on [[h-review-feedback]] and the #microformats [[irc]] channel on irc.freenode.net.

h-review is ready to use and implemented in the wild.

== Property Details ==
(stub, add any property explanations here)

== Examples in the Wild ==
* … add any h-review examples you find in the wild
* https://cleverdevil.io/2015/blood-rites-book-six-of-the-dresden-files

== Implementations ==
* [https://github.com/cleverdevil/Known-Reviews Reviews plugin for Known CMS] by [https://cleverdevil.io Jonathan LaCour].

== Validating ==
{{h-spec-section-validating}}

== Backward Compatiblity ==
=== Publisher Compatibility ===
For backward compatibility, you may wish to use classic [[hReview]] classnames in addition to the more future-proof h-review properties, for example:

<source lang=html4strict>
<div class="h-review hreview">
<h1 class="p-name fn">My great review</h1>
</div>
</source>

=== Parser Compatibility ===
Microformats parsers should detect classic properties and parse them as microformats 2 properties. If an "h-review" is found, don't look for an "hReview" on the same element.

Compatibility root class name: hreview

Properties: (parsed as p- plain text unless otherwise specified)

* <code>summary</code> parse as '''<code>p-name</code>'''
* <code>fn</code> - parse as '''p-name''' of the item being reviewed (p-item h-item p-name)
* <code>photo</code> - parse as '''u-photo''' of the item being reviewed (p-item h-item u-photo)
* <code>url</code> - parse as '''u-url''' of the item being reviewed (p-item h-item u-url)
* <code>item</code> (without vcard, vevent, hproduct) - parse as '''p-item h-item''' including backcompat nested properties:
** <code>fn</code> - parse as '''p-name''' of the item being reviewed (p-item h-item p-name)
** <code>photo</code> - parse as '''u-photo''' of the item being reviewed (p-item h-item u-photo)
** <code>url</code> - parse as '''u-url''' of the item being reviewed (p-item h-item u-url)
* <code>item vcard</code> - parse as '''p-item h-card''' including backcompat [[hCard]] parsing
* <code>item vevent</code> - parse as '''p-item h-event''' including backcompat [[hCalendar]] vevent property parsing
* <code>item hproduct</code> - parse as '''p-item h-product''' including backcompat [[hProduct]] parsing
* <code>reviewer</code> - including compat root vcard in the absence of h-card
* <code>dtreviewed</code> - parse as '''dt-'''
* <code>rating</code>
* <code>best</code>
* <code>worst</code>
* <code>description</code> - parse as '''e-'''
* <code>rel=tag</code> - parse as '''p-category'''
* <code>rel="self bookmark"</code> - parse as '''u-url'''. note that <code>rel</code> attribute value is treated as a space separated set, thus any presence of "self" and "bookmark" within such a set in a rel value is accepted.

Note: The [[hReview]] format has three properties which make use of <code>rel</code> attribute, these are <code>tag</code>, permalink (via the <code>self</code> and <code>bookmark</code> values) and <code>license</code>. Microformats 2 parsers {{should}} map these URLs into the page scoped rel collection.

== Background ==
h-review is based on the existing [[hReview]] specification.

== See Also ==
* [[microformats2]]
* [[h-card]]
* [[h-event]]
* [[h-adr]]
* [[h-geo]]
* [[h-product]] can all be embedded in h-review as the p-item
* [[h-item]] is a minimal microformat in case none of the others suitably represent the item being reviewed

[[Category:Draft Specifications]]

h-recipe

2015-08-19T16:27:25Z

Cleverdevil: /* Examples in the Wild */

<entry-title>h-recipe</entry-title>
<span class="h-card vcard"><span class="p-name fn">[[User:Tantek|Tantek Çelik]]</span> (<span class="p-role role">Editor</span>)</span>
----
<dfn style="font-style:normal;font-weight:bold">h-recipe</dfn> is a simple, open format for publishing recipes on the web. h-recipe is one of several open [[microformats|microformat]] draft standards suitable for embedding data in HTML/HTML5.

h-recipe is the [[microformats2]] update to [[hRecipe]].

{{cc0-owfa-license}}

== Example ==
Here is a simple minimal recipe example:

<source lang=html4strict>
<article class="h-recipe">
<h1 class="p-name">Bagels</h1>

<ul>
<li class="p-ingredient">Flour</li>
<li class="p-ingredient">Sugar</li>
<li class="p-ingredient">Yeast</li>
</ul>

<p>Takes <time class="dt-duration" datetime="1H">1 hour</time>,
serves <data class="p-yield" value="4">four people</data>.</p>

<div class="e-instructions">
<ol>
<li>Start by mixing all the ingredients together.</li>
</ol>
</div>
</article>
</source>

Parsed JSON:
<source lang=javascript>
{
"items": [
{
"type": [
"h-recipe"
],
"properties": {
"name": [
"Bagels"
],
"ingredient": [
"Flour",
"Sugar",
"Yeast"
],
"yield": [
"4"
],
"instructions": [
{
"value": "Start by mixing all the ingredients together.",
"html": "<ol> <li>Start by mixing all the ingredients together.</li> </ol>"
}
]
}
}
]
}
</source>

=== Get started ===
The class '''<code>h-recipe</code>''' is a ''root class name'' that indicates the presence of an h-recipe.

'''p-name''', '''e-instructions''', '''p-ingredient''' and the other property classnames listed below define elements as ''properties'' of the h-recipe.

See [[microformats-2-parsing]] to learn more about property classnames.

== Properties ==
h-recipe properties, inside an element with class '''h-recipe''':
* '''<code>p-name</code>''' - the name of the recipe
* '''<code>p-ingredient</code>''' - describes one or more ingredients used in the recipe.
* '''<code>p-yield</code>''' - Specifies the quantity produced by the recipe, like how many persons it satisfyies
* '''<code>e-instructions</code>''' - the method of the recipe.
* '''<code>dt-duration</code>''' - the time it takes to prepare the meal described by the recipe.
* '''<code>u-photo</code>''' - an accompanying image

Experimental properties with wide adoption
* '''<code>p-summary</code>''' - provides a short summary or introduction
* '''<code>p-author</code>''' - person who wrote the recipe, optionally embedded with <code>h-card</code> {{main|h-card}}
* '''<code>dt-published</code>''' - the date the recipe was published
* '''<code>p-nutrition</code>''' - nutritional information like calories, fat, dietary fiber etc.
* ...

== Status ==

'''h-recipe''' is a microformats.org draft specification. Public discussion on h-recipe takes place on [[h-recipe-feedback]] and the #microformats [[irc]] channel on irc.freenode.net.

h-recipe is ready to use and implemented in the wild, but for backwards compatibility you should also mark h-recipes up with classic [[hRecipe]] classnames.

== Property Details ==

(stub, add any property explanations here)

'''dt-duration''' should be marked up using the [http://developers.whatwg.org/common-microsyntaxes.html#durations duration] microsyntax defined in HTML5. TODO: add more examples

[[hRecipe]] has a number of experimental properties which have real world adoption due to [[Google]] recipe search support of hRecipe. These are: summary, author, published and nutrition.

== Examples in the Wild ==
* [http://www.eliduke.com Eli Duke] has posted some h-[http://www.eliduke.com/recipes recipes] on his site:
** http://www.eliduke.com/recipes/kale-salad
** http://www.eliduke.com/recipes/hummus
** http://www.eliduke.com/recipes/wacky-cake
** http://www.eliduke.com/recipes/vegan-mac-and-cheese

* [https://cleverdevil.io Jonathan LaCour] has created several h-[http://cleverdevil.io/content/recipes recipes] using his Known plugin on his site:
** https://cleverdevil.io/2015/kentucky-maid-cocktail

== Validating ==
{{h-spec-section-validating}}

== Implementations ==
This section is '''informative'''.

Tools for generating and consuming h-recipe. When it gets too big we can move it to a separate page like [[h-recipe-implementations]].

Consuming h-recipe (sites and tools that consume and do something with h-recipe)
* ... (stub)

Generating h-recipe (sites and tools that help produce and publish h-recipe)
* [https://github.com/cleverdevil/Known-Recipes Recipe post generator for Known CMS] by [https://cleverdevil.io Jonathan LaCour].

== Backward Compatibility ==
=== Publisher Compatibility ===
(stub)
=== Parser Compatibility ===
Microformats parsers {{should}} detect classic properties only if a classic root class name is found and parse them as microformats2 properties.

If an "h-recipe" is found, don't look for an "hrecipe" on the same element.

compat root class name: <code id="hrecipe">hrecipe</code><br/>
properties: (parsed as '''p-''' plain text unless otherwise specified)
* <code>fn</code> - parse as '''<code>p-name</code>'''
* <code>ingredient</code>
* <code>yield</code>
* <code>instructions</code> - parse as '''e-'''
* <code>duration</code> - parse as '''dt-'''
* <code>photo</code> - parse as '''u-'''
* <code>summary</code>
* <code>author</code> - including compat root <code>vcard</code> in the absence of <code>h-card</code>
* <code>nutrition</code>

== Background ==

h-recipe is based on the existing [[hRecipe]] specification.

== See Also ==

* [[h-recipe-feedback]]
* [[microformats-2]]
* [[h-card]] can be embedded in h-recipe
* [[hRecipe]] is the classic microformat replaced by h-recipe

[[Category:Draft Specifications]]

h-recipe

2015-08-19T16:25:04Z

Cleverdevil: /* Implementations */

<entry-title>h-recipe</entry-title>
<span class="h-card vcard"><span class="p-name fn">[[User:Tantek|Tantek Çelik]]</span> (<span class="p-role role">Editor</span>)</span>
----
<dfn style="font-style:normal;font-weight:bold">h-recipe</dfn> is a simple, open format for publishing recipes on the web. h-recipe is one of several open [[microformats|microformat]] draft standards suitable for embedding data in HTML/HTML5.

h-recipe is the [[microformats2]] update to [[hRecipe]].

{{cc0-owfa-license}}

== Example ==
Here is a simple minimal recipe example:

<source lang=html4strict>
<article class="h-recipe">
<h1 class="p-name">Bagels</h1>

<ul>
<li class="p-ingredient">Flour</li>
<li class="p-ingredient">Sugar</li>
<li class="p-ingredient">Yeast</li>
</ul>

<p>Takes <time class="dt-duration" datetime="1H">1 hour</time>,
serves <data class="p-yield" value="4">four people</data>.</p>

<div class="e-instructions">
<ol>
<li>Start by mixing all the ingredients together.</li>
</ol>
</div>
</article>
</source>

Parsed JSON:
<source lang=javascript>
{
"items": [
{
"type": [
"h-recipe"
],
"properties": {
"name": [
"Bagels"
],
"ingredient": [
"Flour",
"Sugar",
"Yeast"
],
"yield": [
"4"
],
"instructions": [
{
"value": "Start by mixing all the ingredients together.",
"html": "<ol> <li>Start by mixing all the ingredients together.</li> </ol>"
}
]
}
}
]
}
</source>

=== Get started ===
The class '''<code>h-recipe</code>''' is a ''root class name'' that indicates the presence of an h-recipe.

'''p-name''', '''e-instructions''', '''p-ingredient''' and the other property classnames listed below define elements as ''properties'' of the h-recipe.

See [[microformats-2-parsing]] to learn more about property classnames.

== Properties ==
h-recipe properties, inside an element with class '''h-recipe''':
* '''<code>p-name</code>''' - the name of the recipe
* '''<code>p-ingredient</code>''' - describes one or more ingredients used in the recipe.
* '''<code>p-yield</code>''' - Specifies the quantity produced by the recipe, like how many persons it satisfyies
* '''<code>e-instructions</code>''' - the method of the recipe.
* '''<code>dt-duration</code>''' - the time it takes to prepare the meal described by the recipe.
* '''<code>u-photo</code>''' - an accompanying image

Experimental properties with wide adoption
* '''<code>p-summary</code>''' - provides a short summary or introduction
* '''<code>p-author</code>''' - person who wrote the recipe, optionally embedded with <code>h-card</code> {{main|h-card}}
* '''<code>dt-published</code>''' - the date the recipe was published
* '''<code>p-nutrition</code>''' - nutritional information like calories, fat, dietary fiber etc.
* ...

== Status ==

'''h-recipe''' is a microformats.org draft specification. Public discussion on h-recipe takes place on [[h-recipe-feedback]] and the #microformats [[irc]] channel on irc.freenode.net.

h-recipe is ready to use and implemented in the wild, but for backwards compatibility you should also mark h-recipes up with classic [[hRecipe]] classnames.

== Property Details ==

(stub, add any property explanations here)

'''dt-duration''' should be marked up using the [http://developers.whatwg.org/common-microsyntaxes.html#durations duration] microsyntax defined in HTML5. TODO: add more examples

[[hRecipe]] has a number of experimental properties which have real world adoption due to [[Google]] recipe search support of hRecipe. These are: summary, author, published and nutrition.

== Examples in the Wild ==
* [http://www.eliduke.com Eli Duke] has posted some h-[http://www.eliduke.com/recipes recipes] on his site:
** http://www.eliduke.com/recipes/kale-salad
** http://www.eliduke.com/recipes/hummus
** http://www.eliduke.com/recipes/wacky-cake
** http://www.eliduke.com/recipes/vegan-mac-and-cheese

* … add any h-recipe examples you find in the wild

== Validating ==
{{h-spec-section-validating}}

== Implementations ==
This section is '''informative'''.

Tools for generating and consuming h-recipe. When it gets too big we can move it to a separate page like [[h-recipe-implementations]].

Consuming h-recipe (sites and tools that consume and do something with h-recipe)
* ... (stub)

Generating h-recipe (sites and tools that help produce and publish h-recipe)
* [https://github.com/cleverdevil/Known-Recipes Recipe post generator for Known CMS] by [https://cleverdevil.io Jonathan LaCour].

== Backward Compatibility ==
=== Publisher Compatibility ===
(stub)
=== Parser Compatibility ===
Microformats parsers {{should}} detect classic properties only if a classic root class name is found and parse them as microformats2 properties.

If an "h-recipe" is found, don't look for an "hrecipe" on the same element.

compat root class name: <code id="hrecipe">hrecipe</code><br/>
properties: (parsed as '''p-''' plain text unless otherwise specified)
* <code>fn</code> - parse as '''<code>p-name</code>'''
* <code>ingredient</code>
* <code>yield</code>
* <code>instructions</code> - parse as '''e-'''
* <code>duration</code> - parse as '''dt-'''
* <code>photo</code> - parse as '''u-'''
* <code>summary</code>
* <code>author</code> - including compat root <code>vcard</code> in the absence of <code>h-card</code>
* <code>nutrition</code>

== Background ==

h-recipe is based on the existing [[hRecipe]] specification.

== See Also ==

* [[h-recipe-feedback]]
* [[microformats-2]]
* [[h-card]] can be embedded in h-recipe
* [[hRecipe]] is the classic microformat replaced by h-recipe

[[Category:Draft Specifications]]