https://microformats.org/wiki/api.php?action=feedcontributions&user=AaronGustafson&feedformat=atomMicroformats Wiki - User contributions [en]2024-03-28T22:14:16ZUser contributionsMediaWiki 1.38.4https://microformats.org/wiki/index.php?title=figure-examples&diff=21908figure-examples2007-09-26T22:07:29Z<p>AaronGustafson: added link to ALA article</p>
<hr />
<div><h1>Figure examples</h1><br />
<br />
'''This page documents examples of mark up for figures like images, captions and data tables in webpages and the class-names that they've used ''' - [[User:Chris_Messina|Chris Messina]]<br />
<br />
== The Problem ==<br />
There are no HTML tags for identifying or marking up supporting content like illustrative images (as in encyclopaedic references), photographs and their captions, credits or licenses (as in news articles) or data tables. Typically this content can be found in close proximity to the relevant information, but oftentimes mixed with other elements.<br />
<br />
The goal of this effort is to document and reflect the real-world needs of such design patterns while paying close attention to the types of data that people are using in this supportive role and also paying close attention to the existing class names and presentational styles that go along with such formats.<br />
<br />
== Participants ==<br />
* [[User:Chris_Messina | Chris Messina]]<br />
* [[User:EdwardOConnor | Edward O'Connor]]<br />
* [[User:AaronGustafson | Aaron Gustafson]]<br />
* ...<br />
<br />
== Real-World Examples ==<br />
<br />
These are examples and implementations in the wild of various efforts at marking up figures in web pages, blog posts and articles.<br />
<br />
=== CNET ===<br />
<br />
CNET uses <code>cnet-image-div</code>, '''<code>float-left</code>''', <code>cnet-image</code>, '''<code>image-credit</code>''' and '''<code>image-caption</code>''' to mark up supporting photographs and artwork.<br />
<br />
See this example: [http://blogs.cnet.com/8301-13504_1-9758731-15.html?tag=cnetfd.blogs.item Why I recommend the iPhone -- and don't.]<br />
<br />
=== HTML5 ===<br />
<br />
HTML5 introduces a new tag called [http://www.whatwg.org/specs/web-apps/current-work/multipage/section-embedded.html#figure "figure"], which represents a block-level image, along with a caption:<br />
<br />
<pre><br />
&lt;figure id="fig2"&gt;<br />
&lt;legend&gt;Figure 2. Install Mozilla XForms dialog&lt;/legend&gt;<br />
&lt;img alt="A Web site is requesting permission to install the following item: <br />
Mozilla XForms 0.7 Unsigned" <br />
src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" /&gt;<br />
&lt;/figure&gt;<br />
</pre><br />
<br />
This is slightly different from the broader goal of this effort, but nevertheless points to current work on this topic.<br />
<br />
== Existing Practices ==<br />
<br />
In many cases, classes that are used exclusively for alignment and positioning are documented herein order to have an accurate sense for how people mark up this kind of content in practice.<br />
<br />
=== [http://factoryjoe.com/blog FactoryCity Blog] ===<br />
<br />
* uses a series of <code>figure</code> classes to markup figures. <br />
* the approach used is to mark up block level figures with both <code>figure</code> and either <code>figure-a</code> or <code>figure-c</code> classes.<br />
* <code>figure-b</code> and <code>figure-d</code> are used for inline figures aligned right and left, respectively<br />
* the a, b, c, d pattern is modeled after the top, right, bottom, left order of CSS attribute values<br />
* Paul Wilkins [http://microformats.org/discuss/mail/microformats-discuss/2007-August/010421.html suggested more semantic names for these classes on µf-discuss]<br />
<br />
=== [http://getk2.com K2 WordPress Theme] ===<br />
<br />
* The K2 [http://kaytwo.googlecode.com/svn/trunk/style.css stylesheet] includes the following figure-related CSS:<br />
<br />
<pre><br />
.center {<br />
text-align: center;<br />
}<br />
<br />
.alignright {<br />
float: right;<br />
}<br />
<br />
.alignleft {<br />
float: left<br />
}<br />
<br />
img.center, img[align="center"] {<br />
display: block;<br />
margin-left: auto;<br />
margin-right: auto;<br />
}<br />
<br />
img.alignright, img[align="right"] {<br />
padding: 4px;<br />
margin: 0 0 2px 7px;<br />
display: inline;<br />
}<br />
<br />
img.alignleft, img[align="left"] {<br />
padding: 4px;<br />
margin: 0 7px 2px 0;<br />
display: inline;<br />
}<br />
<br />
img.noborder {<br />
border: none !important;<br />
}<br />
</pre><br />
<br />
=== [http://code.google.com/p/habari/ Habari K2 Theme] ===<br />
<br />
Similar to K2, the [http://habari.googlecode.com/svn/trunk/htdocs/user/themes/k2/style.css Habari K2] instance supports the following classes:<br />
<br />
<pre><br />
.center {<br />
text-align: center;<br />
}<br />
<br />
.alignright {<br />
float: right;<br />
}<br />
<br />
.alignleft {<br />
float: left<br />
}<br />
<br />
img.center, img[align="center"] {<br />
display: block;<br />
margin-left: auto;<br />
margin-right: auto;<br />
}<br />
<br />
img.alignright, img[align="right"] {<br />
padding: 4px;<br />
margin: 0 0 2px 7px;<br />
display: inline;<br />
}<br />
<br />
img.alignleft, img[align="left"] {<br />
padding: 4px;<br />
margin: 0 7px 2px 0;<br />
display: inline;<br />
}<br />
<br />
img.noborder {<br />
border: none !important;<br />
}<br />
</pre><br />
<br />
=== [http://webrevolutionary.com/coldblue ColdBlue WordPress Theme] ===<br />
<br />
* includes the classes <code>float-left</code> or <code>float-right</code> for aligning figures<br />
<br />
=== [http://edward.oconnor.cx/ Edward O'Connor's blog] ===<br />
<br />
* POSH figure markup, based on several inputs:<br />
** HTML5's figure element<br />
** RFC 2629's figure element<br />
** [http://microformats.org/discuss/mail/microformats-discuss/2007-August/010421.html Paul Wilkins' class names]<br />
* Documented in [http://edward.oconnor.cx/2007/04/marking-up-figures Marking up figures], [http://edward.oconnor.cx/2007/08/figure-markup-redux Figure markup redux], and described in [http://edward.oconnor.cx/profiles/figures XMDP]<br />
<br />
=== Revenue Watch Institute (website forthcoming) ===<br />
<br />
During the development of the new website for Revenue Watch, this was what we cam up with to handle figures:<br />
<br />
<pre><br />
<div class="figure"><br />
<img src="/path/to/img.jpg" alt="" /><br />
<p class="credit"><abbr class="type" title="Phtotograph">Photo</abbr> by <cite>Bob Johnson</cite></p><br />
<p class="caption"><em class="title">Figure 1</em> Cras rutrum, enim at placerat varius, nisi massa consectetuer.</p><br />
</div><br />
</pre><br />
<br />
* Figures can be categorized as types using the "type" <code>class</code> (here type is embedded in the credit line, using [[abbr-design-pattern|the <code>ABBR</code> design pattern]]) - current recommendations: "photograph" or "illustration" (these could possibly be extended to include other options such as "chart," "line-art", etc.) (optional)<br />
* The "title" <code>class</code> can be added to any element within the figure (optional)<br />
* Credit for the figure is denoted with the "credit" <code>class</code> (optional)<br />
* A caption is also available (optional)<br />
<br />
Default styles:<br />
<br />
<pre><br />
.figure {<br />
margin: 0 0 1.5em;<br />
}<br />
.figure p {<br />
margin: 0;<br />
width: auto;<br />
}<br />
.figure .credit {<br />
font-size: .8em;<br />
text-align: right;<br />
}<br />
.figure .credit cite {<br />
font-style: inherit;<br />
}<br />
.figure .caption {<br />
font-style: italic;<br />
font-size: 1.1em;<br />
}<br />
.figure .title {<br />
font-style: normal;<br />
font-weight: bold;<br />
}<br />
.figure .title:after {<br />
content: ":";<br />
}<br />
</pre><br />
<br />
No presentational information is added to the figures. The presentation is determined via script as a progressive enhancement ([http://www.alistapart.com/articles/figurehandler ALA article]).<br />
<br />
Tables receive no figure-related styles, but graphs, charts, and maps do.<br />
<br />
====Comments====<br />
Why is "credit" not an hCard? Also, for pictures of places any geo/ hcard microformat included in the caption should be understood to be associated with the figure. There is debate elsewhere, about whether coordinates should be for the camera position, or the object photographed; with consensus coming down on the side of the former [http://commons.wikimedia.org/wiki/Commons_talk:Geocoding#Geotagging_the_camera_or_the_Objekt], [http://commons.wikimedia.org/wiki/Commons_talk:Geocoding#Camera_vs_object_location]. That said, the whole "figure" div could be an hcard, with the picture being part of that; and a separate hCard for the photographer included. Complex... [[User:AndyMabbett|Andy Mabbett]] 16:52, 21 Aug 2007 (PDT)<br />
<br />
I like the idea of the hCard <em>if</em> there is more information available other than just the name. If you are just putting the person's name, I still don't see the point of making that an hCard. Add some additional data (a link, email address, etc.) and I think you have an argument. Otherwise I think it's a waste of markup and simply clutters the results of whatever hCards might exist elsewhere on the page. As for geo-data, I think that sort of information may be useful, but I think I'd prefer to see that embedded within a <code>longdesc</code> page with more info on the image. Inside an article it seems superfluous to me. A <code>longdesc</code> page for an image could include much more data about where it was taken, by whom (possibly even a full hCard of the creator), etc. <br />
[[User:AaronGustafson|Aaron Gustafson]] 18:24, 22 Aug 2007 (EDT)<br />
<br />
== Further discussion ==<br />
<br />
A few blog posts capture the essence of this discussion well:<br />
<br />
* [http://factoryjoe.com/blog/2007/02/26/a-design-pattern-for-image-and-figure-alignment/ A design pattern for image and figure alignment]<br />
* [http://edward.oconnor.cx/2007/04/marking-up-figures Marking up figures]<br />
* [http://www.css3.info/styling-figures-with-css3/ Styling figures with CSS3]<br />
* [http://www.simplebits.com/notebook/2005/07/10/figures.html When Floated Figures Attack!]<br />
* [http://www.pearsonified.com/2007/06/how-to-format-images-for-feed-readers.php How to Format Images for Feed Readers]</div>AaronGustafsonhttps://microformats.org/wiki/index.php?title=figure-examples&diff=21491figure-examples2007-08-28T15:57:12Z<p>AaronGustafson: moved type to its own data point (using ABBR pattern)</p>
<hr />
<div><h1>Figure examples</h1><br />
<br />
'''This page documents examples of mark up for figures like images, captions and data tables in webpages and the class-names that they've used ''' - [[User:Chris_Messina|Chris Messina]]<br />
<br />
== The Problem ==<br />
There is no HTML tags for identifying or marking up supporting content like illustrative images (as in encyclopaedic references), photographs and their captions, credits or licenses (as in news articles) or data tables. Typically this content can be found in close proximity to the relevant information, but oftentimes mixed with other elements.<br />
<br />
The goal of this effort is to document and reflect the real-world needs of such design patterns while paying close attention to the types of data that people are using in this supportive role and also paying close attention to the existing class names and presentational styles that go along with such formats.<br />
<br />
== Participants ==<br />
* [[User:Chris_Messina | Chris Messina]]<br />
* [[User:EdwardOConnor | Edward O'Connor]]<br />
* [[User:AaronGustafson | Aaron Gustafson]]<br />
* ...<br />
<br />
== Real-World Examples ==<br />
<br />
These are examples and implementations in the wild of various efforts at marking up figures in web pages, blog posts and articles.<br />
<br />
=== CNET ===<br />
<br />
CNET uses <code>cnet-image-div</code>, '''<code>float-left</code>''', <code>cnet-image</code>, '''<code>image-credit</code>''' and '''<code>image-caption</code>''' to mark up supporting photographs and artwork.<br />
<br />
See this example: [http://blogs.cnet.com/8301-13504_1-9758731-15.html?tag=cnetfd.blogs.item Why I recommend the iPhone -- and don't.]<br />
<br />
=== HTML5 ===<br />
<br />
HTML5 introduces a new tag called [http://www.whatwg.org/specs/web-apps/current-work/multipage/section-embedded.html#figure "figure"], which represents a block-level image, along with a caption:<br />
<br />
<pre><br />
&lt;figure id="fig2"&gt;<br />
&lt;legend&gt;Figure 2. Install Mozilla XForms dialog&lt;/legend&gt;<br />
&lt;img alt="A Web site is requesting permission to install the following item: <br />
Mozilla XForms 0.7 Unsigned" <br />
src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" /&gt;<br />
&lt;/figure&gt;<br />
</pre><br />
<br />
This is slightly different from the broader goal of this effort, but nevertheless points to current work on this topic.<br />
<br />
== Existing Practices ==<br />
<br />
In many cases, classes that are used exclusively for alignment and positioning are documented herein order to have an accurate sense for how people mark up this kind of content in practice.<br />
<br />
=== [http://factoryjoe.com/blog FactoryCity Blog] ===<br />
<br />
* uses a series of <code>figure</code> classes to markup figures. <br />
* the approach used is to mark up block level figures with both <code>figure</code> and either <code>figure-a</code> or <code>figure-c</code> classes.<br />
* <code>figure-b</code> and <code>figure-d</code> are used for inline figures aligned right and left, respectively<br />
* the a, b, c, d pattern is modeled after the top, right, bottom, left order of CSS attribute values<br />
<br />
=== [http://getk2.com K2 WordPress Theme] ===<br />
<br />
* The K2 [http://kaytwo.googlecode.com/svn/trunk/style.css stylesheet] includes the following figure-related CSS:<br />
<br />
<pre><br />
.center {<br />
text-align: center;<br />
}<br />
<br />
.alignright {<br />
float: right;<br />
}<br />
<br />
.alignleft {<br />
float: left<br />
}<br />
<br />
img.center, img[align="center"] {<br />
display: block;<br />
margin-left: auto;<br />
margin-right: auto;<br />
}<br />
<br />
img.alignright, img[align="right"] {<br />
padding: 4px;<br />
margin: 0 0 2px 7px;<br />
display: inline;<br />
}<br />
<br />
img.alignleft, img[align="left"] {<br />
padding: 4px;<br />
margin: 0 7px 2px 0;<br />
display: inline;<br />
}<br />
<br />
img.noborder {<br />
border: none !important;<br />
}<br />
</pre><br />
<br />
=== [http://code.google.com/p/habari/ Habari K2 Theme] ===<br />
<br />
Similar to K2, the [http://habari.googlecode.com/svn/trunk/htdocs/user/themes/k2/style.css Habari K2] instance supports the following classes:<br />
<br />
<pre><br />
.center {<br />
text-align: center;<br />
}<br />
<br />
.alignright {<br />
float: right;<br />
}<br />
<br />
.alignleft {<br />
float: left<br />
}<br />
<br />
img.center, img[align="center"] {<br />
display: block;<br />
margin-left: auto;<br />
margin-right: auto;<br />
}<br />
<br />
img.alignright, img[align="right"] {<br />
padding: 4px;<br />
margin: 0 0 2px 7px;<br />
display: inline;<br />
}<br />
<br />
img.alignleft, img[align="left"] {<br />
padding: 4px;<br />
margin: 0 7px 2px 0;<br />
display: inline;<br />
}<br />
<br />
img.noborder {<br />
border: none !important;<br />
}<br />
</pre><br />
<br />
=== [http://webrevolutionary.com/coldblue ColdBlue WordPress Theme] ===<br />
<br />
* includes the classes <code>float-left</code> or <code>float-right</code> for aligning figures<br />
<br />
=== Revenue Watch Institute (website forthcoming) ===<br />
<br />
During the development of the new website for Revenue Watch, this was what we cam up with to handle figures:<br />
<br />
<pre><br />
<div class="figure"><br />
<img src="/path/to/img.jpg" alt="" /><br />
<p class="credit"><abbr class="type" title="Phtotograph">Photo</abbr> by <cite>Bob Johnson</cite></p><br />
<p class="caption"><em class="title">Figure 1</em> Cras rutrum, enim at placerat varius, nisi massa consectetuer.</p><br />
</div><br />
</pre><br />
<br />
* Figures can be categorized as types using the "type" <code>class</code> (here type is embedded in the credit line, using [[abbr-design-pattern|the <code>ABBR</code> design pattern]]) - current recommendations: "photograph" or "illustration" (these could possibly be extended to include other options such as "chart," "line-art", etc.) (optional)<br />
* The "title" <code>class</code> can be added to any element within the figure (optional)<br />
* Credit for the figure is denoted with the "credit" <code>class</code> (optional)<br />
* A caption is also available (optional)<br />
<br />
Default styles:<br />
<br />
<pre><br />
.figure {<br />
margin: 0 0 1.5em;<br />
}<br />
.figure p {<br />
margin: 0;<br />
width: auto;<br />
}<br />
.figure .credit {<br />
font-size: .8em;<br />
text-align: right;<br />
}<br />
.figure .credit cite {<br />
font-style: inherit;<br />
}<br />
.figure .caption {<br />
font-style: italic;<br />
font-size: 1.1em;<br />
}<br />
.figure .title {<br />
font-style: normal;<br />
font-weight: bold;<br />
}<br />
.figure .title:after {<br />
content: ":";<br />
}<br />
</pre><br />
<br />
No presentational information is added to the figures. The presentation is determined via script as a progressive enhancement (ALA article forthcoming).<br />
<br />
Tables receive no figure-related styles, but graphs, charts, and maps do.<br />
<br />
====Comments====<br />
Why is "credit" not an hCard? Also, for pictures of places any geo/ hcard microformat included in the caption should be understood to be associated with the figure. There is debate elsewhere, about whether coordinates should be for the camera position, or the object photographed; with consensus coming down on the side of the former [http://commons.wikimedia.org/wiki/Commons_talk:Geocoding#Geotagging_the_camera_or_the_Objekt], [http://commons.wikimedia.org/wiki/Commons_talk:Geocoding#Camera_vs_object_location]. That said, the whole "figure" div could be an hcard, with the picture being part of that; and a separate hCard for the photographer included. Complex... [[User:AndyMabbett|Andy Mabbett]] 16:52, 21 Aug 2007 (PDT)<br />
<br />
I like the idea of the hCard <em>if</em> there is more information available other than just the name. If you are just putting the person's name, I still don't see the point of making that an hCard. Add some additional data (a link, email address, etc.) and I think you have an argument. Otherwise I think it's a waste of markup and simply clutters the results of whatever hCards might exist elsewhere on the page. As for geo-data, I think that sort of information may be useful, but I think I'd prefer to see that embedded within a <code>longdesc</code> page with more info on the image. Inside an article it seems superfluous to me. A <code>longdesc</code> page for an image could include much more data about where it was taken, by whom (possibly even a full hCard of the creator), etc. <br />
[[User:AaronGustafson|Aaron Gustafson]] 18:24, 22 Aug 2007 (EDT)<br />
<br />
== Further discussion ==<br />
<br />
A few blog posts capture the essence of this discussion well:<br />
<br />
* [http://factoryjoe.com/blog/2007/02/26/a-design-pattern-for-image-and-figure-alignment/ A design pattern for image and figure alignment]<br />
* [http://edward.oconnor.cx/2007/04/marking-up-figures Marking up figures]<br />
* [http://www.css3.info/styling-figures-with-css3/ Styling figures with CSS3]<br />
* [http://www.simplebits.com/notebook/2005/07/10/figures.html When Floated Figures Attack!]<br />
* [http://www.pearsonified.com/2007/06/how-to-format-images-for-feed-readers.php How to Format Images for Feed Readers]</div>AaronGustafsonhttps://microformats.org/wiki/index.php?title=exploratory-discussions&diff=21354exploratory-discussions2007-08-28T15:50:14Z<p>AaronGustafson: moved figures</p>
<hr />
<div>=Exploratory Discussions=<br />
<br />
Per the microformats [[process]]: research and analysis of real-world [[examples]], existing formats, and brainstorming to motivate the microformat. Please check [[rejected-formats]] before making additions.<br />
<!--<br />
<br />
Sort each section alphabetically <br />
<br />
--><br />
<br />
==Active==<br />
<br />
The following exploratory discussions are being actively pursued (generally, edited in the last month, or with an active community member (named in parentheses) having expressed an interest in pursuing them)<br />
<br />
* [[audio-info]] ([[audio-info-examples|examples]], [[audio-info-formats|formats]], [[audio-info-brainstorming|brainstorming]], [[audio-info-proposal|proposal]], [[audio-info-issues|issues]]) - Marking up information and metadata related to audio (speech, music, and sound in general). ([[User:ManuSporny | Manu Sporny]])<br />
** music [[music-examples|music examples]]<br />
* audio-album (see [[audio-info]] pages for examples, formats, brainstorming. [[audio-album-proposal]], [[audio-album-issues]]) - Marking up information and metadata related to audio albums/collections. ([[User:ManuSporny | Manu Sporny]])<br />
* figures [[figure-examples|figure examples]], [[figure-formats]], [[figure-brainstorming|figure brainstorming]]<br />
* geo extensions ([[User:AndyMabbett|Andy Mabbett]])<br />
** [[geo-elevation-examples]], [[geo-elevation-formats]] - extend geo for representing altitude <br />
** [[geo-waypoint-examples]], [[geo-waypoint-formats]] - extend geo for representing routes and boundaries, using waypoints <br />
** [[geo-extension-examples]], [[geo-extension-formats]], [[geo-extension-brainstorming]], [[geo-extension-strawman]] - extend geo for moons, other planets, etc.<br />
* receipt ([[receipt-examples|examples]], [[receipt-formats|formats]], [[receipt-brainstorming|brainstorming]], [[receipt-proposal|proposal]]) - Marking up information and metadata related to purchase receipts. (Leif Arne Storset)<br />
* [[species]] - for the marking up of the scientific names of living things: [[species-examples]], [[species-formats]], [[species-brainstorming]] ([[User:AndyMabbett|Andy Mabbett]])<br />
<br />
==Current==<br />
<br />
The following exploratory discussions are less actively pursued, but may still be developed.<br />
<br />
* citation [[citation|citation effort]], [[citation-examples|citation examples]], [[citation-formats|citation formats]], [[citation-brainstorming|citation brainstorming]], and [[citation-faq|citation FAQ]] ([[User:AndyMabbett|Andy Mabbett]])<br />
* [[currency]]; [[currency-examples]]; [[currency-formats]]; [[currency-brainstorming]]; [[currency-proposal]]; [[currency-issues]] ([[User:AndyMabbett|Andy Mabbett]])<br />
* genealogy [[genealogy-examples]], [[genealogy-formats|genealogy formats]] ([[User:Bob_Jonkman|Bob Jonkman]])<br />
* listing / hListing [[hlisting-proposal|hListing proposal]], and [[hlisting-feedback|hListing feedback]] <br />
** based on listing [[listing-examples|examples]], [[listing-formats|formats]], and [[listing-brainstorming|brainstorming]]<br />
* measures and measurement units [[measure]], [[measure-examples]], [[measure-formats]] [[User:AndyMabbett|Andy Mabbett]]<br />
* recipe [[recipe-examples|recipe examples]], [[recipe-formats]], [[recipe-brainstorming]]<br />
<br />
==Moribund==<br />
<br />
The following exploratory discussions are believed moribund, or superseded; or are simply not being maintained due to the absence of the interested party or shortage of volunteer effort. Work may well resume in the future. Please feel free to move them to one of the above sections if you are interested in developing them, and append your name in parentheses, or move them to "Abandoned" or "Archived", if that is more appropriate. '''At the time of writing, 26 August 2007, it is expected that many of these will be moved, shortly, to one of the above sections.'''<br />
<br />
* alternates [[alternates-brainstorming|alternates brainstorming]], [[alternates-examples|alternates examples]]<br />
*[[attention]]<br />
* blog description [[blog-description-examples|blog description examples]]<br />
* blog info [[blog-info-examples|blog info examples]]<br />
* book [[book-examples|book examples]], [[book-formats|book formats]], and [[book-brainstorming|book brainstorming]]<br />
* chat [[chat-examples|chat examples]], [[chat-formats|chat formats]], and [[chat-brainstorming|chat brainstorming]]<br />
* code [[code-examples|code examples]], [[code-formats]], [[code-brainstorming|code brainstorming]]<br />
* comment [[comment-problem|comment problem]], [[comment-examples|comment examples]], and [[comments-formats|comment formats]] (Some stuff needs to be extracted from [[comments-formats]])<br />
* [[collection-description|collection description]] - for describing collections in libraries <br />
* [[course-catalog]]; [[course-catalog-examples]] <br />
* [[depend-examples]]: examples of dependency graphs, especially as they relate to software <br />
* [[digital-signatures]]: incorporation of digital signatures in Microformatted data; ([[digitalsignature-examples|digital-signature examples]], [[digitalsignature-formats]], [[digitalsignature-brainstorming|digital-signatures brainstorming]]) <br />
* directions [[directions-examples|directions examples]] <br />
* directory inclusion [[directory-inclusion-examples|directory inclusion examples]], [[directory-inclusion-formats|directory inclusion formats]]. (yielded the [[rel-directory]] microformat)<br />
* distributed conversation [[distributed-conversation|distributed conversation overview]], [[distributed-conversation-examples|distributed conversation examples]], [[distributed-conversation-formats|distributed conversation formats]], [[distributed-conversation-brainstorming|distributed conversation brainstorming]]<br />
* [[downloads]] [[downloads-examples|downloads examples]], [[downloads-formats|downloads formats]], [[downloads-brainstorming|downloads brainstorming]] <br />
* error messages [[error-message-examples|error message examples]], [[error-message-formats]], [[error-message-brainstorming|error message brainstorming]]<br />
* file-format ([[file-format-examples|examples]], formats, brainstorming) - for the mark-up of file format information (size, type, codecs, bitrate, etc.) - should this be merged with [[downloads]] ?<br />
* forms [[forms-examples|forms examples]]<br />
* group [[group-examples|group examples]], [[group-formats]], [[group-brainstorming|group brainstorming]] <br />
* grouping ([[grouping-examples|examples]], [[grouping-formats|formats]], [[grouping-brainstorming|brainstorming]], [[grouping-proposal|proposal]]) - Metadata markup of items that should be grouped together. <br />
* hash [[hash-examples|hash examples]] (see also [[downloads]])<br />
* items [[items-examples|items examples]], [[items-formats]], [[items-brainstorming|items brainstorming]]<br />
* job listing [[job-listing-examples|job listing examples]], [[job-listing-formats]], [[job-listing-brainstorming|job listing brainstorming]]<br />
* last modified [[last-modified-examples|last modified examples]], [[last-modified-formats|last modified formats]], and [[last-modified-brainstorming|last modified brainstorming]]<br />
* [[media-info]] ([[media-info-examples|media-info examples]], [[media-info-formats|media-info formats]], [[media-info-brainstorming|media-info brainstorming]]) {<br />
* meeting minutes [[meeting-minutes-examples|meeting minutes examples]], [[meeting-minutes-formats|meeting minutes formats]], and [[meeting-minutes-brainstorming|meeting minutes brainstorming]]<br />
* metalink [[metalink-examples|metalink examples]] <br />
* [[mfo-examples|MFO examples]]<br />
* news [[news-examples|news examples]] <br />
* [[off|OFF]]<br />
* [[operating-hours]]: [[operating-hours-examples]] ..of stores, restaurants, etc. {<br />
* [[page-summary]] [[page-summary-examples]], [[page-summary-formats]]<br />
* [[payment]]<br />
* photo note [[photo-note-examples|photo note examples]]<br />
* [[product]] - [[product-examples]], [[product-formats]], [[product-brainstorming]]. The following needs to be cleaned up as part of product: rel-product [[rel-product-brainstorming|rel-product brainstorming]]<br />
* [[question-answer]], [[question-answer-examples]], [[question-answer-formats]], [[question-answer-brainstorming]] <br />
* [[realestate-propertydetail]], [[realestate-propertydetail-examples]], [[realestate-propertydetail-formats]], [[realestate-propertydetail brainstorming]]<br />
* requirements testing [[requirements-testing|requirements testing overview]], and [[requirements-testing-examples|requirements testing examples]]<br />
* [[rest-examples|REST examples]] (see also [[rest]])<br />
* search results [[search-results-example|search results example]]<br />
* show [[show-examples]], [[show-formats]], [[show-brainstorming|show brainstorming]] (see also [[media-info]])<br />
* showroll [[showroll-examples]], [[showroll-formats]], [[showroll-brainstorming]]<br />
* table [[table-examples|examples]]<br />
* tagspeak [[tagspeak-examples|tagspeak examples]]<br />
* tagcloud [[tagcloud-examples|tagcloud examples]], [[tagcloud-formats]], and [[tagcloud-brainstorming|tagcloud brainstorming]].<br />
* [[to-do-examples]], [[to-do-formats]], [[to-do-brainstorming]], to perhaps yield [[htodo|hToDo]]<br />
* transit table [[transit-table-examples|transit table examples]]<br />
* [[uid]]<br />
* [[widget]], [[widget-examples|widget examples]], [[widget-formats]], [[widget-brainstorming|widget brainstorming]]<br />
* [[wiki-formats|wiki formats]]<br />
* work of art [[work-of-art|work of art overview]], [[workofart-examples|work of art examples]], [[workofart-formats|work of art formats]], and [[workofart-brainstorming|work of art brainstorming]] <br />
* [[xmdp-brainstorming|XMDP brainstorming]] (see also [[xmdp-faq]])<br />
<br />
==Abandoned==<br />
The following exploratory discussions are confirmed as abandoned:<br />
*...<br />
<br />
==Archive==<br />
<br />
The following exploratory discussions resulted in a microformat, or have been superseded by later developments, but are kept here for historical interest:<br />
<br />
* blog post [[blog-post-examples|examples]], [[blog-post-formats|blog post formats]], and [[blog-post-brainstorming|blog post brainstorming]] (yielded the [[hatom|hAtom]] draft)<br />
* location [[location-examples]], [[location-formats|location formats]]. (see also [[adr]], [[geo]], [[hcard|hCard]])<br />
* resume [[resume-examples]], [[resume-formats|resume formats]], [[resume-brainstorming|resume brainstorming]] yielded the [[hresume|hResume]] draft.<br />
* review [[review-examples|review examples]], and [[review-formats|review formats]] yielded the [[hreview|hReview]] draft</div>AaronGustafsonhttps://microformats.org/wiki/index.php?title=exploratory-discussions&diff=20543exploratory-discussions2007-08-28T15:49:28Z<p>AaronGustafson: /* Moribund */</p>
<hr />
<div>=Exploratory Discussions=<br />
<br />
Per the microformats [[process]]: research and analysis of real-world [[examples]], existing formats, and brainstorming to motivate the microformat. Please check [[rejected-formats]] before making additions.<br />
<!--<br />
<br />
Sort each section alphabetically <br />
<br />
--><br />
<br />
==Active==<br />
<br />
The following exploratory discussions are being actively pursued (generally, edited in the last month, or with an active community member (named in parentheses) having expressed an interest in pursuing them)<br />
<br />
* [[audio-info]] ([[audio-info-examples|examples]], [[audio-info-formats|formats]], [[audio-info-brainstorming|brainstorming]], [[audio-info-proposal|proposal]], [[audio-info-issues|issues]]) - Marking up information and metadata related to audio (speech, music, and sound in general). ([[User:ManuSporny | Manu Sporny]])<br />
** music [[music-examples|music examples]]<br />
* audio-album (see [[audio-info]] pages for examples, formats, brainstorming. [[audio-album-proposal]], [[audio-album-issues]]) - Marking up information and metadata related to audio albums/collections. ([[User:ManuSporny | Manu Sporny]])<br />
* geo extensions ([[User:AndyMabbett|Andy Mabbett]])<br />
** [[geo-elevation-examples]], [[geo-elevation-formats]] - extend geo for representing altitude <br />
** [[geo-waypoint-examples]], [[geo-waypoint-formats]] - extend geo for representing routes and boundaries, using waypoints <br />
** [[geo-extension-examples]], [[geo-extension-formats]], [[geo-extension-brainstorming]], [[geo-extension-strawman]] - extend geo for moons, other planets, etc.<br />
* receipt ([[receipt-examples|examples]], [[receipt-formats|formats]], [[receipt-brainstorming|brainstorming]], [[receipt-proposal|proposal]]) - Marking up information and metadata related to purchase receipts. (Leif Arne Storset)<br />
* [[species]] - for the marking up of the scientific names of living things: [[species-examples]], [[species-formats]], [[species-brainstorming]] ([[User:AndyMabbett|Andy Mabbett]])<br />
<br />
==Current==<br />
<br />
The following exploratory discussions are less actively pursued, but may still be developed.<br />
<br />
* citation [[citation|citation effort]], [[citation-examples|citation examples]], [[citation-formats|citation formats]], [[citation-brainstorming|citation brainstorming]], and [[citation-faq|citation FAQ]] ([[User:AndyMabbett|Andy Mabbett]])<br />
* [[currency]]; [[currency-examples]]; [[currency-formats]]; [[currency-brainstorming]]; [[currency-proposal]]; [[currency-issues]] ([[User:AndyMabbett|Andy Mabbett]])<br />
* genealogy [[genealogy-examples]], [[genealogy-formats|genealogy formats]] ([[User:Bob_Jonkman|Bob Jonkman]])<br />
* listing / hListing [[hlisting-proposal|hListing proposal]], and [[hlisting-feedback|hListing feedback]] <br />
** based on listing [[listing-examples|examples]], [[listing-formats|formats]], and [[listing-brainstorming|brainstorming]]<br />
* measures and measurement units [[measure]], [[measure-examples]], [[measure-formats]] [[User:AndyMabbett|Andy Mabbett]]<br />
* recipe [[recipe-examples|recipe examples]], [[recipe-formats]], [[recipe-brainstorming]]<br />
<br />
==Moribund==<br />
<br />
The following exploratory discussions are believed moribund, or superseded; or are simply not being maintained due to the absence of the interested party or shortage of volunteer effort. Work may well resume in the future. Please feel free to move them to one of the above sections if you are interested in developing them, and append your name in parentheses, or move them to "Abandoned" or "Archived", if that is more appropriate. '''At the time of writing, 26 August 2007, it is expected that many of these will be moved, shortly, to one of the above sections.'''<br />
<br />
* alternates [[alternates-brainstorming|alternates brainstorming]], [[alternates-examples|alternates examples]]<br />
*[[attention]]<br />
* blog description [[blog-description-examples|blog description examples]]<br />
* blog info [[blog-info-examples|blog info examples]]<br />
* book [[book-examples|book examples]], [[book-formats|book formats]], and [[book-brainstorming|book brainstorming]]<br />
* chat [[chat-examples|chat examples]], [[chat-formats|chat formats]], and [[chat-brainstorming|chat brainstorming]]<br />
* code [[code-examples|code examples]], [[code-formats]], [[code-brainstorming|code brainstorming]]<br />
* comment [[comment-problem|comment problem]], [[comment-examples|comment examples]], and [[comments-formats|comment formats]] (Some stuff needs to be extracted from [[comments-formats]])<br />
* [[collection-description|collection description]] - for describing collections in libraries <br />
* [[course-catalog]]; [[course-catalog-examples]] <br />
* [[depend-examples]]: examples of dependency graphs, especially as they relate to software <br />
* [[digital-signatures]]: incorporation of digital signatures in Microformatted data; ([[digitalsignature-examples|digital-signature examples]], [[digitalsignature-formats]], [[digitalsignature-brainstorming|digital-signatures brainstorming]]) <br />
* directions [[directions-examples|directions examples]] <br />
* directory inclusion [[directory-inclusion-examples|directory inclusion examples]], [[directory-inclusion-formats|directory inclusion formats]]. (yielded the [[rel-directory]] microformat)<br />
* distributed conversation [[distributed-conversation|distributed conversation overview]], [[distributed-conversation-examples|distributed conversation examples]], [[distributed-conversation-formats|distributed conversation formats]], [[distributed-conversation-brainstorming|distributed conversation brainstorming]]<br />
* [[downloads]] [[downloads-examples|downloads examples]], [[downloads-formats|downloads formats]], [[downloads-brainstorming|downloads brainstorming]] <br />
* error messages [[error-message-examples|error message examples]], [[error-message-formats]], [[error-message-brainstorming|error message brainstorming]]<br />
* file-format ([[file-format-examples|examples]], formats, brainstorming) - for the mark-up of file format information (size, type, codecs, bitrate, etc.) - should this be merged with [[downloads]] ?<br />
* forms [[forms-examples|forms examples]]<br />
* group [[group-examples|group examples]], [[group-formats]], [[group-brainstorming|group brainstorming]] <br />
* grouping ([[grouping-examples|examples]], [[grouping-formats|formats]], [[grouping-brainstorming|brainstorming]], [[grouping-proposal|proposal]]) - Metadata markup of items that should be grouped together. <br />
* hash [[hash-examples|hash examples]] (see also [[downloads]])<br />
* items [[items-examples|items examples]], [[items-formats]], [[items-brainstorming|items brainstorming]]<br />
* job listing [[job-listing-examples|job listing examples]], [[job-listing-formats]], [[job-listing-brainstorming|job listing brainstorming]]<br />
* last modified [[last-modified-examples|last modified examples]], [[last-modified-formats|last modified formats]], and [[last-modified-brainstorming|last modified brainstorming]]<br />
* [[media-info]] ([[media-info-examples|media-info examples]], [[media-info-formats|media-info formats]], [[media-info-brainstorming|media-info brainstorming]]) {<br />
* meeting minutes [[meeting-minutes-examples|meeting minutes examples]], [[meeting-minutes-formats|meeting minutes formats]], and [[meeting-minutes-brainstorming|meeting minutes brainstorming]]<br />
* metalink [[metalink-examples|metalink examples]] <br />
* [[mfo-examples|MFO examples]]<br />
* news [[news-examples|news examples]] <br />
* [[off|OFF]]<br />
* [[operating-hours]]: [[operating-hours-examples]] ..of stores, restaurants, etc. {<br />
* [[page-summary]] [[page-summary-examples]], [[page-summary-formats]]<br />
* [[payment]]<br />
* photo note [[photo-note-examples|photo note examples]]<br />
* [[product]] - [[product-examples]], [[product-formats]], [[product-brainstorming]]. The following needs to be cleaned up as part of product: rel-product [[rel-product-brainstorming|rel-product brainstorming]]<br />
* [[question-answer]], [[question-answer-examples]], [[question-answer-formats]], [[question-answer-brainstorming]] <br />
* [[realestate-propertydetail]], [[realestate-propertydetail-examples]], [[realestate-propertydetail-formats]], [[realestate-propertydetail brainstorming]]<br />
* requirements testing [[requirements-testing|requirements testing overview]], and [[requirements-testing-examples|requirements testing examples]]<br />
* [[rest-examples|REST examples]] (see also [[rest]])<br />
* search results [[search-results-example|search results example]]<br />
* show [[show-examples]], [[show-formats]], [[show-brainstorming|show brainstorming]] (see also [[media-info]])<br />
* showroll [[showroll-examples]], [[showroll-formats]], [[showroll-brainstorming]]<br />
* table [[table-examples|examples]]<br />
* tagspeak [[tagspeak-examples|tagspeak examples]]<br />
* tagcloud [[tagcloud-examples|tagcloud examples]], [[tagcloud-formats]], and [[tagcloud-brainstorming|tagcloud brainstorming]].<br />
* [[to-do-examples]], [[to-do-formats]], [[to-do-brainstorming]], to perhaps yield [[htodo|hToDo]]<br />
* transit table [[transit-table-examples|transit table examples]]<br />
* [[uid]]<br />
* [[widget]], [[widget-examples|widget examples]], [[widget-formats]], [[widget-brainstorming|widget brainstorming]]<br />
* [[wiki-formats|wiki formats]]<br />
* work of art [[work-of-art|work of art overview]], [[workofart-examples|work of art examples]], [[workofart-formats|work of art formats]], and [[workofart-brainstorming|work of art brainstorming]] <br />
* [[xmdp-brainstorming|XMDP brainstorming]] (see also [[xmdp-faq]])<br />
<br />
==Abandoned==<br />
The following exploratory discussions are confirmed as abandoned:<br />
*...<br />
<br />
==Archive==<br />
<br />
The following exploratory discussions resulted in a microformat, or have been superseded by later developments, but are kept here for historical interest:<br />
<br />
* blog post [[blog-post-examples|examples]], [[blog-post-formats|blog post formats]], and [[blog-post-brainstorming|blog post brainstorming]] (yielded the [[hatom|hAtom]] draft)<br />
* location [[location-examples]], [[location-formats|location formats]]. (see also [[adr]], [[geo]], [[hcard|hCard]])<br />
* resume [[resume-examples]], [[resume-formats|resume formats]], [[resume-brainstorming|resume brainstorming]] yielded the [[hresume|hResume]] draft.<br />
* review [[review-examples|review examples]], and [[review-formats|review formats]] yielded the [[hreview|hReview]] draft</div>AaronGustafsonhttps://microformats.org/wiki/index.php?title=figure-examples&diff=20544figure-examples2007-08-22T22:25:45Z<p>AaronGustafson: /* Revenue Watch Institute (website forthcoming) */</p>
<hr />
<div><h1>Figure examples</h1><br />
<br />
'''This page documents examples of mark up for figures like images, captions and data tables in webpages and the class-names that they've used ''' - [[User:Chris_Messina|Chris Messina]]<br />
<br />
== The Problem ==<br />
There is no HTML tags for identifying or marking up supporting content like illustrative images (as in encyclopaedic references), photographs and their captions, credits or licenses (as in news articles) or data tables. Typically this content can be found in close proximity to the relevant information, but oftentimes mixed with other elements.<br />
<br />
The goal of this effort is to document and reflect the real-world needs of such design patterns while paying close attention to the types of data that people are using in this supportive role and also paying close attention to the existing class names and presentational styles that go along with such formats.<br />
<br />
== Participants ==<br />
* [[User:Chris_Messina | Chris Messina]]<br />
* [[User:EdwardOConnor | Edward O'Connor]]<br />
* [[User:AaronGustafson | Aaron Gustafson]]<br />
* ...<br />
<br />
== Real-World Examples ==<br />
<br />
These are examples and implementations in the wild of various efforts at marking up figures in web pages, blog posts and articles.<br />
<br />
=== CNET ===<br />
<br />
CNET uses <code>cnet-image-div</code>, '''<code>float-left</code>''', <code>cnet-image</code>, '''<code>image-credit</code>''' and '''<code>image-caption</code>''' to mark up supporting photographs and artwork.<br />
<br />
See this example: [http://blogs.cnet.com/8301-13504_1-9758731-15.html?tag=cnetfd.blogs.item Why I recommend the iPhone -- and don't.]<br />
<br />
=== HTML5 ===<br />
<br />
HTML5 introduces a new tag called [http://www.whatwg.org/specs/web-apps/current-work/multipage/section-embedded.html#figure "figure"], which represents a block-level image, along with a caption:<br />
<br />
<pre><br />
&lt;figure id="fig2"&gt;<br />
&lt;legend&gt;Figure 2. Install Mozilla XForms dialog&lt;/legend&gt;<br />
&lt;img alt="A Web site is requesting permission to install the following item: <br />
Mozilla XForms 0.7 Unsigned" <br />
src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" /&gt;<br />
&lt;/figure&gt;<br />
</pre><br />
<br />
This is slightly different from the broader goal of this effort, but nevertheless points to current work on this topic.<br />
<br />
== Existing Practices ==<br />
<br />
In many cases, classes that are used exclusively for alignment and positioning are documented herein order to have an accurate sense for how people mark up this kind of content in practice.<br />
<br />
=== [http://factoryjoe.com/blog FactoryCity Blog] ===<br />
<br />
* uses a series of <code>figure</code> classes to markup figures. <br />
* the approach used is to mark up block level figures with both <code>figure</code> and either <code>figure-a</code> or <code>figure-c</code> classes.<br />
* <code>figure-b</code> and <code>figure-d</code> are used for inline figures aligned right and left, respectively<br />
* the a, b, c, d pattern is modeled after the top, right, bottom, left order of CSS attribute values<br />
<br />
=== [http://getk2.com K2 WordPress Theme] ===<br />
<br />
* The K2 [http://kaytwo.googlecode.com/svn/trunk/style.css stylesheet] includes the following figure-related CSS:<br />
<br />
<pre><br />
.center {<br />
text-align: center;<br />
}<br />
<br />
.alignright {<br />
float: right;<br />
}<br />
<br />
.alignleft {<br />
float: left<br />
}<br />
<br />
img.center, img[align="center"] {<br />
display: block;<br />
margin-left: auto;<br />
margin-right: auto;<br />
}<br />
<br />
img.alignright, img[align="right"] {<br />
padding: 4px;<br />
margin: 0 0 2px 7px;<br />
display: inline;<br />
}<br />
<br />
img.alignleft, img[align="left"] {<br />
padding: 4px;<br />
margin: 0 7px 2px 0;<br />
display: inline;<br />
}<br />
<br />
img.noborder {<br />
border: none !important;<br />
}<br />
</pre><br />
<br />
=== [http://code.google.com/p/habari/ Habari K2 Theme] ===<br />
<br />
Similar to K2, the [http://habari.googlecode.com/svn/trunk/htdocs/user/themes/k2/style.css Habari K2] instance supports the following classes:<br />
<br />
<pre><br />
.center {<br />
text-align: center;<br />
}<br />
<br />
.alignright {<br />
float: right;<br />
}<br />
<br />
.alignleft {<br />
float: left<br />
}<br />
<br />
img.center, img[align="center"] {<br />
display: block;<br />
margin-left: auto;<br />
margin-right: auto;<br />
}<br />
<br />
img.alignright, img[align="right"] {<br />
padding: 4px;<br />
margin: 0 0 2px 7px;<br />
display: inline;<br />
}<br />
<br />
img.alignleft, img[align="left"] {<br />
padding: 4px;<br />
margin: 0 7px 2px 0;<br />
display: inline;<br />
}<br />
<br />
img.noborder {<br />
border: none !important;<br />
}<br />
</pre><br />
<br />
=== [http://webrevolutionary.com/coldblue ColdBlue WordPress Theme] ===<br />
<br />
* includes the classes <code>float-left</code> or <code>float-right</code> for aligning figures<br />
<br />
=== Revenue Watch Institute (website forthcoming) ===<br />
<br />
During the development of the new website for Revenue Watch, this was what we cam up with to handle figures:<br />
<br />
<pre><br />
<div class="figure photograph"><br />
<img src="/path/to/img.jpg" alt="" /><br />
<p class="credit">Photo by <cite>Bob Johnson</cite></p><br />
<p class="caption"><em class="title">Figure 1</em> Cras rutrum, enim at placerat varius, nisi massa consectetuer.</p><br />
</div><br />
</pre><br />
<br />
* Figures can be further <code>class</code>ified as "photograph" or "illustration" (these could possibly be extended to include other options such as "chart," "line-art", etc.) (optional)<br />
* The "title" <code>class</code> can be added to any element within the figure (optional)<br />
* Credit for the figure is denoted with the "credit" <code>class</code> (optional)<br />
* A caption is also available (optional)<br />
<br />
Default styles:<br />
<br />
<pre><br />
.figure {<br />
margin: 0 0 1.5em;<br />
}<br />
.figure p {<br />
margin: 0;<br />
width: auto;<br />
}<br />
.figure .credit {<br />
font-size: .8em;<br />
text-align: right;<br />
}<br />
.figure .credit cite {<br />
font-style: inherit;<br />
}<br />
.figure .caption {<br />
font-style: italic;<br />
font-size: 1.1em;<br />
}<br />
.figure .title {<br />
font-style: normal;<br />
font-weight: bold;<br />
}<br />
.figure .title:after {<br />
content: ":";<br />
}<br />
</pre><br />
<br />
No presentational information is added to the figures. The presentation is determined via script as a progressive enhancement (ALA article forthcoming).<br />
<br />
Tables receive no figure-related styles, but graphs, charts, and maps do.<br />
<br />
====Comments====<br />
Why is "credit" not an hCard? Also, for pictures of places any geo/ hcard microformat included in the caption should be understood to be associated with the figure. There is debate elsewhere, about whether coordinates should be for the camera position, or the object photographed; with consensus coming down on the side of the former [http://commons.wikimedia.org/wiki/Commons_talk:Geocoding#Geotagging_the_camera_or_the_Objekt], [http://commons.wikimedia.org/wiki/Commons_talk:Geocoding#Camera_vs_object_location]. That said, the whole "figure" div could be an hcard, with the picture being part of that; and a separate hCard for the photographer included. Complex... [[User:AndyMabbett|Andy Mabbett]] 16:52, 21 Aug 2007 (PDT)<br />
<br />
I like the idea of the hCard <em>if</em> there is more information available other than just the name. If you are just putting the person's name, I still don't see the point of making that an hCard. Add some additional data (a link, email address, etc.) and I think you have an argument. Otherwise I think it's a waste of markup and simply clutters the results of whatever hCards might exist elsewhere on the page. As for geo-data, I think that sort of information may be useful, but I think I'd prefer to see that embedded within a <code>longdesc</code> page with more info on the image. Inside an article it seems superfluous to me. A <code>longdesc</code> page for an image could include much more data about where it was taken, by whom (possibly even a full hCard of the creator), etc. <br />
[[User:AaronGustafson|Aaron Gustafson]] 18:24, 22 Aug 2007 (EDT)<br />
<br />
== Further discussion ==<br />
<br />
A few blog posts capture the essence of this discussion well:<br />
<br />
* [http://factoryjoe.com/blog/2007/02/26/a-design-pattern-for-image-and-figure-alignment/ A design pattern for image and figure alignment]<br />
* [http://edward.oconnor.cx/2007/04/marking-up-figures Marking up figures]<br />
* [http://www.css3.info/styling-figures-with-css3/ Styling figures with CSS3]<br />
* [http://www.simplebits.com/notebook/2005/07/10/figures.html When Floated Figures Attack!]<br />
* [http://www.pearsonified.com/2007/06/how-to-format-images-for-feed-readers.php How to Format Images for Feed Readers]</div>AaronGustafsonhttps://microformats.org/wiki/index.php?title=product-brainstorming&diff=19995product-brainstorming2007-08-21T21:57:40Z<p>AaronGustafson: /* Natural language property-value association */</p>
<hr />
<div>= Brainstorming for hProduct Microformat =<br />
<br />
This is a brainstorm for the hProduct microformat. See also [[hproduct-examples|examples of hProduct]].<br />
<br />
== Contributors ==<br />
<br />
* Aaron Gustafson, [http://easy-designs.net/ Easy! Designs]<br />
* Craig Cook, [http://focalcurve.com/ Focal Curve]<br />
<br />
== The Problem ==<br />
<br />
There are numerous ways to publish product information on the web, but nothing is stanardized. It would be useful to have standardized product information on the web for creating mash-up applications which could<br />
<br />
* allow aggregated product details to be linked to from hListings or hReviews<br />
* match hListings to hReviews<br />
* aggregate product-specific information from across the web<br />
* aggregate and compare like products based on features<br />
<br />
== Elements that come up often in practice ==<br />
<br />
Examples of elements that might be included because they seem to come up often in user- and CMS-generated product publishing, include the following:<br />
<br />
=== Base Elements ===<br />
<br />
* name (or fn)<br />
* image (could be sub-categorized)<br />
** thumb (for thumbnail)<br />
** full (for full size image)<br />
** photo (for a photograph)<br />
** illo (for an illustration).<br />
* description (could be sub-categorized)<br />
** summary<br />
** extended<br />
* brand<br />
* uri (or url) - URI for the product at its brand website; not to be confused with the hListing 'permalink'.<br />
* msrp<br />
<br />
=== Extensibility ===<br />
Being that so many products in the world have specific charachteristics or properties, we thought it might be wise to create a means of standardizing the listing of that information, setting the stage for possible subformats of hProduct. This could be done by setting up property value pairs or groups using a <code>CLASS</code> of "p-v". It would be possible to offer a few means of doing this.<br />
<br />
==== Natural language property-value association ====<br />
<br />
<pre><nowiki><p class="p-v">The <span class="property">dimensions</span> of this book are <br />
<span class="value">6x10</span></p></nowiki></pre></div>AaronGustafsonhttps://microformats.org/wiki/index.php?title=User:AaronGustafson&diff=33457User:AaronGustafson2007-08-21T21:55:00Z<p>AaronGustafson: Added a bio</p>
<hr />
<div>After getting hooked on the web in 1996 and spending several years pushing pixels and bits for the likes of IBM and Konica Minolta, Aaron Gustafson founded [http://easy-designs.net Easy! Designs, LLC], a boutique web consultancy. Aaron is a member of [http://webstandards.org/ The Web Standards Project] (WaSP), serves as Technical Editor for <cite>[http://alistapart.com A List Apart]</cite>, is a contributing writer for <cite>[http://digital-web.com/ Digital Web Magazine]</cite> and [http://mdsn.com/ MSDN], and has amassed a library of writing and editing credits in the print world. Aaron is a regular on the web conference circuit and is frequently called upon to provide web standards and JavaScript training in both the public and private sector. He blogs at [http://easy-reader.net easy-reader.net].</div>AaronGustafsonhttps://microformats.org/wiki/index.php?title=figure-examples&diff=19988figure-examples2007-08-21T21:49:47Z<p>AaronGustafson: Added Revenue Watch implementation</p>
<hr />
<div><h1>Figure examples</h1><br />
<br />
'''This page documents examples of mark up for figures like images, captions and data tables in webpages and the class-names that they've used ''' - [[User:Chris_Messina|Chris Messina]]<br />
<br />
== The Problem ==<br />
There is no HTML tags for identifying or marking up supporting content like illustrative images (as in encyclopaedic references), photographs and their captions, credits or licenses (as in news articles) or data tables. Typically this content can be found in close proximity to the relevant information, but oftentimes mixed with other elements.<br />
<br />
The goal of this effort is to document and reflect the real-world needs of such design patterns while paying close attention to the types of data that people are using in this supportive role and also paying close attention to the existing class names and presentational styles that go along with such formats.<br />
<br />
== Participants ==<br />
* [[User:Chris_Messina | Chris Messina]]<br />
* [[User:EdwardOConnor | Edward O'Connor]]<br />
* [[User:AaronGustafson | Aaron Gustafson]]<br />
* ...<br />
<br />
== Real-World Examples ==<br />
<br />
These are examples and implementations in the wild of various efforts at marking up figures in web pages, blog posts and articles.<br />
<br />
=== CNET ===<br />
<br />
CNET uses <code>cnet-image-div</code>, '''<code>float-left</code>''', <code>cnet-image</code>, '''<code>image-credit</code>''' and '''<code>image-caption</code>''' to mark up supporting photographs and artwork.<br />
<br />
See this example: [http://blogs.cnet.com/8301-13504_1-9758731-15.html?tag=cnetfd.blogs.item Why I recommend the iPhone -- and don't.]<br />
<br />
=== HTML5 ===<br />
<br />
HTML5 introduces a new tag called [http://www.whatwg.org/specs/web-apps/current-work/multipage/section-embedded.html#figure "figure"], which represents a block-level image, along with a caption:<br />
<br />
<pre><br />
&lt;figure id="fig2"&gt;<br />
&lt;legend&gt;Figure 2. Install Mozilla XForms dialog&lt;/legend&gt;<br />
&lt;img alt="A Web site is requesting permission to install the following item: <br />
Mozilla XForms 0.7 Unsigned" <br />
src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" /&gt;<br />
&lt;/figure&gt;<br />
</pre><br />
<br />
This is slightly different from the broader goal of this effort, but nevertheless points to current work on this topic.<br />
<br />
== Existing Practices ==<br />
<br />
In many cases, classes that are used exclusively for alignment and positioning are documented herein order to have an accurate sense for how people mark up this kind of content in practice.<br />
<br />
=== [http://factoryjoe.com/blog FactoryCity Blog] ===<br />
<br />
* uses a series of <code>figure</code> classes to markup figures. <br />
* the approach used is to mark up block level figures with both <code>figure</code> and either <code>figure-a</code> or <code>figure-c</code> classes.<br />
* <code>figure-b</code> and <code>figure-d</code> are used for inline figures aligned right and left, respectively<br />
* the a, b, c, d pattern is modeled after the top, right, bottom, left order of CSS attribute values<br />
<br />
=== [http://getk2.com K2 WordPress Theme] ===<br />
<br />
* The K2 [http://kaytwo.googlecode.com/svn/trunk/style.css stylesheet] includes the following figure-related CSS:<br />
<br />
<pre><br />
.center {<br />
text-align: center;<br />
}<br />
<br />
.alignright {<br />
float: right;<br />
}<br />
<br />
.alignleft {<br />
float: left<br />
}<br />
<br />
img.center, img[align="center"] {<br />
display: block;<br />
margin-left: auto;<br />
margin-right: auto;<br />
}<br />
<br />
img.alignright, img[align="right"] {<br />
padding: 4px;<br />
margin: 0 0 2px 7px;<br />
display: inline;<br />
}<br />
<br />
img.alignleft, img[align="left"] {<br />
padding: 4px;<br />
margin: 0 7px 2px 0;<br />
display: inline;<br />
}<br />
<br />
img.noborder {<br />
border: none !important;<br />
}<br />
</pre><br />
<br />
=== [http://code.google.com/p/habari/ Habari K2 Theme] ===<br />
<br />
Similar to K2, the [http://habari.googlecode.com/svn/trunk/htdocs/user/themes/k2/style.css Habari K2] instance supports the following classes:<br />
<br />
<pre><br />
.center {<br />
text-align: center;<br />
}<br />
<br />
.alignright {<br />
float: right;<br />
}<br />
<br />
.alignleft {<br />
float: left<br />
}<br />
<br />
img.center, img[align="center"] {<br />
display: block;<br />
margin-left: auto;<br />
margin-right: auto;<br />
}<br />
<br />
img.alignright, img[align="right"] {<br />
padding: 4px;<br />
margin: 0 0 2px 7px;<br />
display: inline;<br />
}<br />
<br />
img.alignleft, img[align="left"] {<br />
padding: 4px;<br />
margin: 0 7px 2px 0;<br />
display: inline;<br />
}<br />
<br />
img.noborder {<br />
border: none !important;<br />
}<br />
</pre><br />
<br />
=== [http://webrevolutionary.com/coldblue ColdBlue WordPress Theme] ===<br />
<br />
* includes the classes <code>float-left</code> or <code>float-right</code> for aligning figures<br />
<br />
=== Revenue Watch Institute (website forthcoming) ===<br />
<br />
During the development of the new website for Revenue Watch, this was what we cam up with to handle figures:<br />
<br />
<pre><br />
<div class="figure photograph"><br />
<img src="/path/to/img.jpg" alt="" /><br />
<p class="credit">Photo by <cite>Bob Johnson</cite></p><br />
<p class="caption"><em class="title">Figure 1</em> Cras rutrum, enim at placerat varius, nisi massa consectetuer.</p><br />
</div><br />
</pre><br />
<br />
* Figures can be further <code>class</code>ified as "photograph" or "illustration" (these could possibly be extended to include other options such as "chart," "line-art", etc.) (optional)<br />
* The "title" <code>class</code> can be added to any element within the figure (optional)<br />
* Credit for the figure is denoted with the "credit" <code>class</code> (optional)<br />
* A caption is also available (optional)<br />
<br />
Default styles:<br />
<br />
<pre><br />
.figure {<br />
margin: 0 0 1.5em;<br />
}<br />
.figure p {<br />
margin: 0;<br />
width: auto;<br />
}<br />
.figure .credit {<br />
font-size: .8em;<br />
text-align: right;<br />
}<br />
.figure .credit cite {<br />
font-style: inherit;<br />
}<br />
.figure .caption {<br />
font-style: italic;<br />
font-size: 1.1em;<br />
}<br />
.figure .title {<br />
font-style: normal;<br />
font-weight: bold;<br />
}<br />
.figure .title:after {<br />
content: ":";<br />
}<br />
</pre><br />
<br />
No presentational information is added to the figures. The presentation is determined via script as a progressive enhancement (ALA article forthcoming).<br />
<br />
Tables receive no figure-related styles, but graphs, charts, and maps do.<br />
<br />
== Further discussion ==<br />
<br />
A few blog posts capture the essence of this discussion well:<br />
<br />
* [http://factoryjoe.com/blog/2007/02/26/a-design-pattern-for-image-and-figure-alignment/ A design pattern for image and figure alignment]<br />
* [http://edward.oconnor.cx/2007/04/marking-up-figures Marking up figures]<br />
* [http://www.css3.info/styling-figures-with-css3/ Styling figures with CSS3]<br />
* [http://www.simplebits.com/notebook/2005/07/10/figures.html When Floated Figures Attack!]<br />
* [http://www.pearsonified.com/2007/06/how-to-format-images-for-feed-readers.php How to Format Images for Feed Readers]</div>AaronGustafsonhttps://microformats.org/wiki/index.php?title=product-brainstorming&diff=10769product-brainstorming2006-11-27T17:04:33Z<p>AaronGustafson: /* Brainstorming for hProduct Microformat */</p>
<hr />
<div>= Brainstorming for hProduct Microformat =<br />
<br />
This is a brainstorm for the hProduct microformat. Examples of hProduct can be found [[hproduct-examples|here]].<br />
<br />
== Contributors ==<br />
<br />
* Aaron Gustafson, [http://easy-designs.net/ Easy! Designs]<br />
* Craig Cook, [http://focalcurve.com/ Focal Curve]<br />
<br />
== The Problem ==<br />
<br />
There are numerous ways to publish product information on the web, but nothing is stanardized. It would be useful to have standardized product information on the web for creating mash-up applications which could<br />
<br />
* allow aggregated product details to be linked to from hListings or hReviews<br />
* match hListings to hReviews<br />
* aggregate product-specific information from across the web<br />
* aggregate and compare like products based on features<br />
<br />
== Elements that come up often in practice ==<br />
<br />
Examples of elements that might be included because they seem to come up often in user- and CMS-generated product publishing, include the following:<br />
<br />
=== Base Elements ===<br />
<br />
* name (or fn)<br />
* image (could be sub-categorized)<br />
** thumb (for thumbnail)<br />
** full (for full size image)<br />
** photo (for a photograph)<br />
** illo (for an illustration).<br />
* description (could be sub-categorized)<br />
** summary<br />
** extended<br />
* brand<br />
* uri (or url) - URI for the product at its brand website; not to be confused with the hListing 'permalink'.<br />
* msrp<br />
<br />
=== Extensibility ===<br />
Being that so many products in the world have specific charachteristics or properties, we thought it might be wise to create a means of standardizing the listing of that information, setting the stage for possible subformats of hProduct. This could be done by setting up property value paris or groups using a <code>CLASS</code> of "p-v". It would be possible to offer a few means of doing this.<br />
<br />
==== Natural language property-value association ====<br />
<br />
<pre><nowiki><p class="p-v">The <span class="property">dimensions</span> of this book are <br />
<span class="value">6&#189;&#34;(<abbr title="width">W</abbr>) &#215; <br />
12&#34;(<abbr title="height">H</abbr>) &#215;<br />
1&#190;&#34;(<abbr title="depth">D</abbr>)</span></p></nowiki></pre><br />
<br />
==== List property-value association (pairs) ====<br />
<br />
<pre><nowiki><ul><br />
<li class="p-v"><br />
<span class="property">Mileage</span>: <br />
<em class="value">34,787</em><br />
</li><br />
<li class="p-v"><br />
<span class="property">Year</span>: <br />
<em class="value">2006</em><br />
</li><br />
<li class="p-v"><br />
<span class="property">Exterior Color</span>: <br />
<em class="value">Burgundy</em><br />
</li><br />
<li class="p-v"><br />
<span class="property">Body Style</span>: <br />
<em class="value">Hatchback</em><br />
</li><br />
</ul></nowiki></pre><br />
<br />
==== List property-value association (groups) ====<br />
<br />
Note: as a <code>DL</code> contains semantic property-value pairs/groups, setting a <code>CLASS</code> of "p-v" should be enough (reducing extra markup).<br />
<br />
<pre><nowiki><dl class="p-v"><br />
<dt>Mileage</dt><br />
<dd>34,787</dd><br />
<dt>Color</dt><br />
<dd>Burgundy (Exterior)</dd><br />
<dd>Tan (Interior)</dd><br />
</dl></nowiki></pre><br />
<br />
==== Non-visible property names ====<br />
<br />
We have considered the possibility of allowing property names to be invisible to users by allowing the addition of the property name as a class immediately following the "propery" <code>CLASS</code> keyword:<br />
<br />
<pre><nowiki><ul class="p-v"><br />
<li class="property mileage">34,787</li><br />
<li class="property year">2006</li><br />
<li class="property color-exterior">Burgundy</li><br />
<li class="property body-style>Hatchback</li><br />
</ul></nowiki></pre><br />
<br />
Parsing would be a bit trickier, but from the perspective of someone marking up the document, it is pretty simple and straightforward.<br />
<br />
=== Suggested Additions ===<br />
<br />
* image sub-categorization (could make use of [[media-info|Media microformat]]?):<br />
** thumb (for thumbnail)<br />
** full (for full size image)<br />
** photo (for a photograph)<br />
** illo (for an illustration).<br />
* description sub-categorization:<br />
** summary<br />
** extended<br />
* uri (or url) - URI for the product at its brand website; not to be confused with the hListing 'permalink'.<br />
<br />
== Isn't this duplicating hListing and hReview? ==<br />
<br />
No, hProduct would not seek to compete with [[hlisting|hListing]] or [[hreview|hReview]], it simply aims to enhance them. In either of these microformats, the <em>item</em> could easily contain the hProduct. Also, hProduct is the more appropriate place for Manufacturer's Suggested Retail Price (MSRP), which is not likely to be the final price of the product being listed. The actual price/sale price/final price should be solely in the domain of hListing.</div>AaronGustafsonhttps://microformats.org/wiki/index.php?title=product-brainstorming&diff=10766product-brainstorming2006-11-25T16:21:58Z<p>AaronGustafson: media combination?</p>
<hr />
<div>= Brainstorming for hProduct Microformat =<br />
<br />
This is a brainstorm for the hProduct microformat. Examples of hProduct can be found [[hproduct-examples|here].<br />
<br />
== Contributors ==<br />
<br />
* Aaron Gustafson, [http://easy-designs.net/ Easy! Designs]<br />
* Craig Cook, [http://focalcurve.com/ Focal Curve]<br />
<br />
== The Problem ==<br />
<br />
There are numerous ways to publish product information on the web, but nothing is stanardized. It would be useful to have standardized product information on the web for creating mash-up applications which could<br />
<br />
* allow aggregated product details to be linked to from hListings or hReviews<br />
* match hListings to hReviews<br />
* aggregate product-specific information from across the web<br />
* aggregate and compare like products based on features<br />
<br />
== Elements that come up often in practice ==<br />
<br />
Examples of elements that might be included because they seem to come up often in user- and CMS-generated product publishing, include the following:<br />
<br />
=== Base Elements ===<br />
<br />
* name (or fn)<br />
* image (could be sub-categorized)<br />
** thumb (for thumbnail)<br />
** full (for full size image)<br />
** photo (for a photograph)<br />
** illo (for an illustration).<br />
* description (could be sub-categorized)<br />
** summary<br />
** extended<br />
* brand<br />
* uri (or url) - URI for the product at its brand website; not to be confused with the hListing 'permalink'.<br />
* msrp<br />
<br />
=== Extensibility ===<br />
Being that so many products in the world have specific charachteristics or properties, we thought it might be wise to create a means of standardizing the listing of that information, setting the stage for possible subformats of hProduct. This could be done by setting up property value paris or groups using a <code>CLASS</code> of "p-v". It would be possible to offer a few means of doing this.<br />
<br />
==== Natural language property-value association ====<br />
<br />
<pre><nowiki><p class="p-v">The <span class="property">dimensions</span> of this book are <br />
<span class="value">6&#189;&#34;(<abbr title="width">W</abbr>) &#215; <br />
12&#34;(<abbr title="height">H</abbr>) &#215;<br />
1&#190;&#34;(<abbr title="depth">D</abbr>)</span></p></nowiki></pre><br />
<br />
==== List property-value association (pairs) ====<br />
<br />
<pre><nowiki><ul><br />
<li class="p-v"><br />
<span class="property">Mileage</span>: <br />
<em class="value">34,787</em><br />
</li><br />
<li class="p-v"><br />
<span class="property">Year</span>: <br />
<em class="value">2006</em><br />
</li><br />
<li class="p-v"><br />
<span class="property">Exterior Color</span>: <br />
<em class="value">Burgundy</em><br />
</li><br />
<li class="p-v"><br />
<span class="property">Body Style</span>: <br />
<em class="value">Hatchback</em><br />
</li><br />
</ul></nowiki></pre><br />
<br />
==== List property-value association (groups) ====<br />
<br />
Note: as a <code>DL</code> contains semantic property-value pairs/groups, setting a <code>CLASS</code> of "p-v" should be enough (reducing extra markup).<br />
<br />
<pre><nowiki><dl class="p-v"><br />
<dt>Mileage</dt><br />
<dd>34,787</dd><br />
<dt>Color</dt><br />
<dd>Burgundy (Exterior)</dd><br />
<dd>Tan (Interior)</dd><br />
</dl></nowiki></pre><br />
<br />
==== Non-visible property names ====<br />
<br />
We have considered the possibility of allowing property names to be invisible to users by allowing the addition of the property name as a class immediately following the "propery" <code>CLASS</code> keyword:<br />
<br />
<pre><nowiki><ul class="p-v"><br />
<li class="property mileage">34,787</li><br />
<li class="property year">2006</li><br />
<li class="property color-exterior">Burgundy</li><br />
<li class="property body-style>Hatchback</li><br />
</ul></nowiki></pre><br />
<br />
Parsing would be a bit trickier, but from the perspective of someone marking up the document, it is pretty simple and straightforward.<br />
<br />
=== Suggested Additions ===<br />
<br />
* image sub-categorization (could make use of [[media-info|Media microformat]]?):<br />
** thumb (for thumbnail)<br />
** full (for full size image)<br />
** photo (for a photograph)<br />
** illo (for an illustration).<br />
* description sub-categorization:<br />
** summary<br />
** extended<br />
* uri (or url) - URI for the product at its brand website; not to be confused with the hListing 'permalink'.<br />
<br />
== Isn't this duplicating hListing and hReview? ==<br />
<br />
No, hProduct would not seek to compete with [[hlisting|hListing]] or [[hreview|hReview]], it simply aims to enhance them. In either of these microformats, the <em>item</em> could easily contain the hProduct. Also, hProduct is the more appropriate place for Manufacturer's Suggested Retail Price (MSRP), which is not likely to be the final price of the product being listed. The actual price/sale price/final price should be solely in the domain of hListing.</div>AaronGustafsonhttps://microformats.org/wiki/index.php?title=product-brainstorming&diff=10679product-brainstorming2006-11-25T16:20:11Z<p>AaronGustafson: added non-visible property names discussion</p>
<hr />
<div>= Brainstorming for hProduct Microformat =<br />
<br />
This is a brainstorm for the hProduct microformat. Examples of hProduct can be found [[hproduct-examples|here].<br />
<br />
== Contributors ==<br />
<br />
* Aaron Gustafson, [http://easy-designs.net/ Easy! Designs]<br />
* Craig Cook, [http://focalcurve.com/ Focal Curve]<br />
<br />
== The Problem ==<br />
<br />
There are numerous ways to publish product information on the web, but nothing is stanardized. It would be useful to have standardized product information on the web for creating mash-up applications which could<br />
<br />
* allow aggregated product details to be linked to from hListings or hReviews<br />
* match hListings to hReviews<br />
* aggregate product-specific information from across the web<br />
* aggregate and compare like products based on features<br />
<br />
== Elements that come up often in practice ==<br />
<br />
Examples of elements that might be included because they seem to come up often in user- and CMS-generated product publishing, include the following:<br />
<br />
=== Base Elements ===<br />
<br />
* name (or fn)<br />
* image (could be sub-categorized)<br />
** thumb (for thumbnail)<br />
** full (for full size image)<br />
** photo (for a photograph)<br />
** illo (for an illustration).<br />
* description (could be sub-categorized)<br />
** summary<br />
** extended<br />
* brand<br />
* uri (or url) - URI for the product at its brand website; not to be confused with the hListing 'permalink'.<br />
* msrp<br />
<br />
=== Extensibility ===<br />
Being that so many products in the world have specific charachteristics or properties, we thought it might be wise to create a means of standardizing the listing of that information, setting the stage for possible subformats of hProduct. This could be done by setting up property value paris or groups using a <code>CLASS</code> of "p-v". It would be possible to offer a few means of doing this.<br />
<br />
==== Natural language property-value association ====<br />
<br />
<pre><nowiki><p class="p-v">The <span class="property">dimensions</span> of this book are <br />
<span class="value">6&#189;&#34;(<abbr title="width">W</abbr>) &#215; <br />
12&#34;(<abbr title="height">H</abbr>) &#215;<br />
1&#190;&#34;(<abbr title="depth">D</abbr>)</span></p></nowiki></pre><br />
<br />
==== List property-value association (pairs) ====<br />
<br />
<pre><nowiki><ul><br />
<li class="p-v"><br />
<span class="property">Mileage</span>: <br />
<em class="value">34,787</em><br />
</li><br />
<li class="p-v"><br />
<span class="property">Year</span>: <br />
<em class="value">2006</em><br />
</li><br />
<li class="p-v"><br />
<span class="property">Exterior Color</span>: <br />
<em class="value">Burgundy</em><br />
</li><br />
<li class="p-v"><br />
<span class="property">Body Style</span>: <br />
<em class="value">Hatchback</em><br />
</li><br />
</ul></nowiki></pre><br />
<br />
==== List property-value association (groups) ====<br />
<br />
Note: as a <code>DL</code> contains semantic property-value pairs/groups, setting a <code>CLASS</code> of "p-v" should be enough (reducing extra markup).<br />
<br />
<pre><nowiki><dl class="p-v"><br />
<dt>Mileage</dt><br />
<dd>34,787</dd><br />
<dt>Color</dt><br />
<dd>Burgundy (Exterior)</dd><br />
<dd>Tan (Interior)</dd><br />
</dl></nowiki></pre><br />
<br />
==== Non-visible property names ====<br />
<br />
We have considered the possibility of allowing property names to be invisible to users by allowing the addition of the property name as a class immediately following the "propery" <code>CLASS</code> keyword:<br />
<br />
<pre><nowiki><ul class="p-v"><br />
<li class="property mileage">34,787</li><br />
<li class="property year">2006</li><br />
<li class="property color-exterior">Burgundy</li><br />
<li class="property body-style>Hatchback</li><br />
</ul></nowiki></pre><br />
<br />
Parsing would be a bit trickier, but from the perspective of someone marking up the document, it is pretty simple and straightforward.<br />
<br />
=== Suggested Additions ===<br />
<br />
* image sub-categorization:<br />
** thumb (for thumbnail)<br />
** full (for full size image)<br />
** photo (for a photograph)<br />
** illo (for an illustration).<br />
* description sub-categorization:<br />
** summary<br />
** extended<br />
* uri (or url) - URI for the product at its brand website; not to be confused with the hListing 'permalink'.<br />
<br />
== Isn't this duplicating hListing and hReview? ==<br />
<br />
No, hProduct would not seek to compete with [[hlisting|hListing]] or [[hreview|hReview]], it simply aims to enhance them. In either of these microformats, the <em>item</em> could easily contain the hProduct. Also, hProduct is the more appropriate place for Manufacturer's Suggested Retail Price (MSRP), which is not likely to be the final price of the product being listed. The actual price/sale price/final price should be solely in the domain of hListing.</div>AaronGustafsonhttps://microformats.org/wiki/index.php?title=product-brainstorming&diff=10678product-brainstorming2006-11-20T19:08:47Z<p>AaronGustafson: moved old page to a draft proposal document</p>
<hr />
<div>= Brainstorming for hProduct Microformat =<br />
<br />
This is a brainstorm for the hProduct microformat. Examples of hProduct can be found [[hproduct-examples|here].<br />
<br />
== Contributors ==<br />
<br />
* Aaron Gustafson, [http://easy-designs.net/ Easy! Designs]<br />
* Craig Cook, [http://focalcurve.com/ Focal Curve]<br />
<br />
== The Problem ==<br />
<br />
There are numerous ways to publish product information on the web, but nothing is stanardized. It would be useful to have standardized product information on the web for creating mash-up applications which could<br />
<br />
* allow aggregated product details to be linked to from hListings or hReviews<br />
* match hListings to hReviews<br />
* aggregate product-specific information from across the web<br />
* aggregate and compare like products based on features<br />
<br />
== Elements that come up often in practice ==<br />
<br />
Examples of elements that might be included because they seem to come up often in user- and CMS-generated product publishing, include the following:<br />
<br />
=== Base Elements ===<br />
<br />
* name (or fn)<br />
* image (could be sub-categorized)<br />
** thumb (for thumbnail)<br />
** full (for full size image)<br />
** photo (for a photograph)<br />
** illo (for an illustration).<br />
* description (could be sub-categorized)<br />
** summary<br />
** extended<br />
* brand<br />
* uri (or url) - URI for the product at its brand website; not to be confused with the hListing 'permalink'.<br />
* msrp<br />
<br />
=== Extensibility ===<br />
Being that so many products in the world have specific charachteristics or properties, we thought it might be wise to create a means of standardizing the listing of that information, setting the stage for possible subformats of hProduct. This could be done by setting up property value paris or groups using a <code>CLASS</code> of "p-v". It would be possible to offer a few means of doing this.<br />
<br />
==== Natural language property-value association ====<br />
<br />
<pre><nowiki><p class="p-v">The <span class="property">dimensions</span> of this book are <br />
<span class="value">6&#189;&#34;(<abbr title="width">W</abbr>) &#215; <br />
12&#34;(<abbr title="height">H</abbr>) &#215;<br />
1&#190;&#34;(<abbr title="depth">D</abbr>)</span></p></nowiki></pre><br />
<br />
==== List property-value association (pairs) ====<br />
<br />
<pre><nowiki><ul><br />
<li class="p-v"><br />
<span class="property">Mileage</span>: <br />
<em class="value">34,787</em><br />
</li><br />
<li class="p-v"><br />
<span class="property">Year</span>: <br />
<em class="value">2006</em><br />
</li><br />
<li class="p-v"><br />
<span class="property">Exterior Color</span>: <br />
<em class="value">Burgundy</em><br />
</li><br />
<li class="p-v"><br />
<span class="property">Body Style</span>: <br />
<em class="value">Hatchback</em><br />
</li><br />
</ul></nowiki></pre><br />
<br />
==== List property-value association (groups) ====<br />
<br />
Note: as a <code>DL</code> contains semantic property-value pairs/groups, setting a <code>CLASS</code> of "p-v" should be enough (reducing extra markup).<br />
<br />
<pre><nowiki><dl class="p-v"><br />
<dt>Mileage</dt><br />
<dd>34,787</dd><br />
<dt>Color</dt><br />
<dd>Burgundy (Exterior)</dd><br />
<dd>Tan (Interior)</dd><br />
</dl></nowiki></pre><br />
<br />
=== Suggested Additions ===<br />
<br />
* image sub-categorization:<br />
** thumb (for thumbnail)<br />
** full (for full size image)<br />
** photo (for a photograph)<br />
** illo (for an illustration).<br />
* description sub-categorization:<br />
** summary<br />
** extended<br />
* uri (or url) - URI for the product at its brand website; not to be confused with the hListing 'permalink'.<br />
<br />
== Isn't this duplicating hListing and hReview? ==<br />
<br />
No, hProduct would not seek to compete with [[hlisting|hListing]] or [[hreview|hReview]], it simply aims to enhance them. In either of these microformats, the <em>item</em> could easily contain the hProduct. Also, hProduct is the more appropriate place for Manufacturer's Suggested Retail Price (MSRP), which is not likely to be the final price of the product being listed. The actual price/sale price/final price should be solely in the domain of hListing.</div>AaronGustafsonhttps://microformats.org/wiki/index.php?title=hproduct-proposal&diff=12075hproduct-proposal2006-11-20T18:33:15Z<p>AaronGustafson: initial post</p>
<hr />
<div><h1><em>draft</em> hProduct Proposal</h1><br />
<br />
hProduct is a format suitable for embedding in (X)HTML, Atom, RSS, and arbitrary XML. hProduct would be related to several [[microformats]] (including [[hlisting|hListing]] and [[hreview|hReview]]) and would be an open standard.<br />
<br />
__TOC__<br />
<br />
===Authors===<br />
<br />
* Aaron Gustafson, [http://easy-designs.net/ Easy! Designs]<br />
* Craig Cook, [http://focalcurve.com/ Focal Curve]<br />
<br />
==Introduction==<br />
<br />
The web is a thriving marketplace with a plethora of vendors scattered across the globe. Sifting through this mass of information is difficult when it is unstructured. The hProduct microformat will bring order and structure to the chaos, making it easy for people to list the products they offer and easy for Web Services to consume that product information for analysis and syndication. This proposal follows the common practices of ecommerce sites such as Amazon, Buy.com and AutoByTel.<br />
<br />
hProduct would be compatible and combinable with [[hlisting|hListing]] and [[hreview|hReview]].<br />
<br />
=== Scope ===<br />
<br />
Giving details about a particular product is sometimes very complex as parameters are differnet for books and CDs than they are for iPods or cars. It should be very easy to mark up an item using hProduct and the syntax should be simple yet flexible enough for more advanced applications.<br />
<br />
=== Out of Scope ===<br />
<br />
This microformat does not intend to replicate any of the content proposed within [[hListing]] and would defer all money/transactional matters to that microformat.<br />
<br />
== Format ==<br />
<br />
=== In General ===<br />
<br />
The hProduct format is based on a set of fields common to numerous ecommerce sites and formats in use today on the web.<br />
<br />
=== Schema ===<br />
<br />
An hListing schema should consist of the following: <br />
<br />
* hProduct<br />
** ''version''. optional. text. <br />
** '''name'''. required.<br />
** ''image''. optional. <code>IMG</code> element or <code>rel='image'</code>. could be further refined as image type ( ''thumb'' || ''full'', ''photo'' || ''illo'')<br />
** ''description''. optional. could be denoted as 'summary' or 'extended'<br />
** ''brand''. text | [[hcard|hCard]]<br />
** ''uri''. optional. URI to manufacturer product page.<br />
** ''msrp''. optional. retail price.<br />
** ''p-v''. optional. opens up possibilities for custom property-value pairs in more complex examples.<br />
*** '''property'''. required.<br />
*** '''value'''. required. (label may be implied)<br />
<br />
==Field Details==<br />
<br />
The fields of the hListing schema represent the following:<br />
<br />
'''version''':: This optional field permits hProduct publishers to specify a particular version of hProduct that their content uses. By omitting this field, the publisher is stating that implementations may interpret the hListings according to any version of the hProduct specification. The value for this proposal as of 17-Nov-2006 is "0.0," since it has no official standing yet.<br />
<br />
=== Content ===<br />
<br />
'''name''':: This required field contains the name of the item<br />
<br />
'''image''':: This optional field contains either an image (as an <code>IMG</code> element) or a link to an image (as an <code>A</code> with <code>rel="image"</code>). The image can be categorized by additional terms such as 'thumb' (for thumbnail), 'full' (for full size image), 'photo' (for a photograph), 'illo' (for an illustration).<br />
<br />
'''description''':: This optional field contains the full text representing the written description of the item. The field MAY include valid XHTML markup (e.g. paragraphs). User agents SHOULD preserve any markup. Description could be either a 'summary' or an 'extended' description.<br />
<br />
'''brand''':: This optional field can contain either plan text or an [[hcard||hCard]] for the organization responsible for the item. Examples would include Sony, Friends of ED, O'Reilly, etc.<br />
<br />
'''uri''':: This optional field is a URI for the product at its brand website. It is not to be confused with the [[hlisting|hListing]] 'permalink'.<br />
<br />
'''msrp''':: This optional field is the manufacturer's suggested retail price for the item. It follows the [[currency]] format.<br />
<br />
=== Properties & Values ===<br />
<br />
We understand the need for providing extensibility to this microformat and have built in a mechanism for doing that using properties and values (p-v). There will be several ways of accomplishing property-value associations which will be described below, with several possible shorthands.<br />
<br />
'''p-v''':: This optional field initiates a property-value group.<br />
<br />
<ul><br />
<li>'''property''':: This required field denotes the property label.<br />
<br />
<p>Anticipated 'property' types include</p><br />
<br />
* 'recurring' for intervals of time (associated with an 'msrp')<br />
* 'artist'<br />
* 'author'<br />
* 'released' - [[hcal|hCal]] event for date of release<br />
* 'upc'<br />
* 'isbn' - international standard book number<br />
* 'sku' - stock keeping unit<br />
* 'sn' - serial number<br />
* 'vin' - vehicle identification number<br />
* 'batch'<br />
<br />
</li><br />
<br />
<li>'''value''':: This required field denotes the property value. The value may be implied in certain shorthands.</li><br />
<br />
</ul><br />
<br />
===Cross-cutting issues===<br />
<br />
''Internationalization:'' Though there are many English-language tokens, they are only used as invisible class-names; user-visible listing information can be completely localized. n.b. that (X)HTML <code>LANG</code> attribute rules still apply as usual, for multilingual aggregators of hProduct.<br />
<br />
The following field names have been reused from the [[hcard|hCard]] and [[hcalendar|hCalendar]] microformats: <code>version, description</code>. In addition, brands described by hCards MAY contain any hCard field.<br />
<br />
==Examples (Preliminary)==<br />
<br />
=== Simple Product ===<br />
<br />
The Pick of Destiny<br />
by Tenacious D<br />
The Pick of Destiny is the highly anticipated soundtrack to the upcoming <br />
New Line Cinema comedy, Tenacious D in the Pick of Destiny. An epic <br />
musical adventure, the film follows Tenacious D (Jack Black and Kyle Gass)<br />
on their quest to obtain the Pick and become The Greatest Band on Earth.<br />
Released: November 14, 2006<br />
Label: Sony<br />
UPC: 82796948912<br />
<br />
<pre><nowiki><div class="hproduct"><br />
<h4 class="name">The Pick of Destiny</h4><br />
<h5 class="p-v">by <span class="property artist">Tenacious D</span></h5><br />
<p class="description summary">The Pick of Destiny is the highly <br />
anticipated soundtrack to the upcoming New Line Cinema comedy, Tenacious<br />
D in the Pick of Destiny. An epic musical adventure, the film follows <br />
Tenacious D (Jack Black and Kyle Gass) on their quest to obtain the Pick<br />
and become The Greatest Band on Earth.</p><br />
<ul><br />
<li class="p-v"><span class="property">Released</span>:<br />
<span class="value"><abbr title="2006-11-14T12:00:01-05:00">November<br />
14, 2006</abbr></span></li><br />
<li>Label: <span class="brand">Sony</span></li><br />
<li class="p-v"><span class="property">UPC</span>:<br />
<span class="value">82796948912</span></li><br />
</ul><br />
</div></nowiki></pre><br />
<br />
=== Challenge Problems ===<br />
<br />
See [[hproduct-challenges|hProduct Challenge Problems]] for some hypothetical examples that illustrate corners of the specification.<br />
<br />
==Changes==<br />
<br />
mid Nov 2006: initial concepting.<br />
<br />
== Discussions ==<br />
<br />
* Feedback is encouraged on the [[hproduct-feedback|hProduct Feedback]] page.<br />
* See also [http://www.technorati.com/cosmos/referer.html blogs discussing this page].<br />
<br />
==See also==<br />
*[[item]]<br />
*[[currency]]<br />
<br />
== Acknowledgements ==<br />
<br />
Much of this document is based on the fine work of the folks behind [[hlisting|hListing]] and their proposal.</div>AaronGustafsonhttps://microformats.org/wiki/index.php?title=Main_Page&diff=29333Main Page2006-11-19T16:29:26Z<p>AaronGustafson: added hproduct-examples</p>
<hr />
<div>__NOTOC__<br />
=Microformats Wiki=<br />
<br />
'''Hello!''' Welcome to the microformats wiki. If this is your first visit, please see the [[introduction]] page.<br />
<br />
Please read [[how-to-play]] before making any edits.<br />
<br />
Please read [[process]] before proposing any new microformats.<br />
<br />
__TOC__<br />
<br />
==Getting Started==<br />
<br />
[[what-are-microformats|What are microformats]]? [[what-can-you-do-with-microformats|What can you do with them]]? <br />
<br />
The [http://microformats.org/about/ about page], plus recent [[press]], [[presentations]], [[podcasts]], and [[screencasts]] are also good places for some background information. <br />
<br />
Frequently asked questions about the wiki and microformats in general are answered in the [[faq|FAQ]]. <br />
<br />
Want to learn more in person? Check out [[events|microformats events]].<br />
<br />
==Definition==<br />
<br />
One popular definition from our [http://microformats.org/discuss/ mailing list] (see also: [[mailing-lists]]) is "simple conventions for embedding semantics in HTML to enable decentralized development." More precisely, microformats can be defined as:<br />
:simple conventions<br />
:for embedding semantic markup<br />
::for a specific problem domain<br />
:in human-readable (X)HTML/XML documents, Atom/RSS feeds, and "plain" XML<br />
::that normalize existing content usage patterns<br />
::using brief, descriptive class names <br />
::often based on existing interoperable standards<br />
:to enable decentralized development<br />
::of resources, tools, and services<br />
<br />
Simply put: "Microformats are a codification of convention." -- [http://easy-reader.net Aaron Gustafson]<br />
<br />
"Or do you just use your browser to browse? That's so 20th century." -- [http://diveintomark.org Mark Pilgrim]<br />
<br />
== How to contribute ==<br />
<br />
Do you want to help take microformats to the next level? You can:<br />
<br />
*Check out our open [[to-do|to do list]] for things to help get done.<br />
*Join the [http://microformats.org/discuss mailing lists] and [[irc|IRC Channel]] to learn and help answer questions about microformats.<br />
*[[advocacy|Advocate]] the use of microformats.<br />
*help to [[Main_Page#microformats_wiki_in_other_languages|translate the microformats wiki into other languages]] to make microformats globally accessible.<br />
<br />
== Specifications ==<br />
[[microformats|Microformats]] open standards specifications (see also: [[implementations]])<br />
* [[hcalendar|hCalendar]] - [http://microformats.org/code/hcalendar/creator hcalendar creator]<br />
* [[hcard|hCard]] - [http://microformats.org/code/hcard/creator hcard creator]<br />
* [[rel-license]]<br />
* [[rel-nofollow]]<br />
* [[rel-tag]]<br />
* [[vote-links|VoteLinks]]<br />
* [http://gmpg.org/xfn/ XFN] (see also: [[xfn-implementations]])<br />
* [http://gmpg.org/xmdp/ XMDP]<br />
* [[xoxo|XOXO]]<br />
<br />
== Drafts ==<br />
* [[adr|adr]]<br />
* [[geo|geo]]<br />
* [[hatom|hAtom]] {{NewMarker}}<br />
* [[hresume|hResume]] {{NewMarker}}<br />
* [[hreview|hReview]] - [http://microformats.org/code/hreview/creator hreview creator]<br />
* [[rel-directory]]<br />
* [[rel-enclosure]]<br />
* [[rel-home]]<br />
* [[relpayment-research | rel-payment]]<br />
* [[robots-exclusion|Robots Exclusion]]<br />
* [[xfolk|xFolk]]<br />
<br />
== Design Patterns ==<br />
<br />
{{design_patterns}} <!-- this can be edited in /wiki/Template:design_patterns --><br />
<br />
== Exploratory Discussions ==<br />
Research and analysis of real-world [[examples]], existing formats, and brainstorming to motivate the microformat.<br />
*alternates [[alternates-brainstorming|alternates brainstorming]], [[alternates-examples|alternates examples]]<br />
*[[attention]]<br />
* blog description [[blog-description-examples|blog description examples]]<br />
* blog info [[blog-info-examples|blog info examples]]<br />
* blog post [[blog-post-examples|examples]], [[blog-post-formats|blog post formats]], and [[blog-post-brainstorming|blog post brainstorming]] (yielded the [[hatom|hAtom]] draft)<br />
* book [[book-examples|book examples]], [[book-formats|book formats]], and [[book-brainstorming|book brainstorming]]<br />
* chat [[chat-examples|chat examples]], [[chat-formats|chat formats]], and [[chat-brainstorming|chat brainstorming]]<br />
* citation [[citation|citation effort]], [[citation-examples|citation examples]], [[citation-formats|citation formats]], [[citation-brainstorming|citation brainstorming]], and [[citation-faq|citation FAQ]]<br />
* comment [[comment-problem|comment problem]], [[comment-examples|comment examples]], and [[comments-formats|comment formats]] (Some stuff needs to be extracted from [[comments-formats]])<br />
* [[currency]]; [[currency-examples]]; [[currency-brainstorming]] {{NewMarker}}<br />
* directions [[directions-examples|directions examples]] {{NewMarker}}<br />
* directory inclusion [[directory-inclusion-examples|directory inclusion examples]], [[directory-inclusion-formats|directory inclusion formats]]. (see also [[rel-directory]])<br />
* distributed conversation [[distributed-conversation|distributed conversation overview]], [[distributed-conversation-brainstorming|distributed conversation brainstorming]], [[distributed-conversation-examples|distributed conversation examples]], and [[distributed-conversation-formats|distributed conversation formats]]<br />
* forms [[forms-examples|forms examples]]<br />
* genealogy [[genealogy-formats|genealogy examples]]<br />
* group [[group-brainstorming|group brainstorming]] and [[group-examples|group examples]]<br />
* items [[items-brainstorming|items brainstorming]]<br />
* hash [[hash-examples|hash examples]]<br />
* job listing [[job-listing-examples|job listing examples]] and [[job-listing-brainstorming|job listing brainstorming]]<br />
* last modified [[last-modified-examples|last modified examples]], [[last-modified-formats|last modified formats]], and [[last-modified-brainstorming|last modified brainstorming]]<br />
* hListing [[hlisting-proposal|hListing proposal]], and [[hlisting-feedback|hListing feedback]] {{NewMarker}}<br />
** Also, listing [[listing-examples|examples]], [[listing-formats|formats]], and [[listing-brainstorming|brainstorming]]<br />
* [[hproduct|hProduct]] - [[hproduct-brainstorming|hProduct brainstorming]] | [[hproduct-feedback|hProduct discussion]] | [[hproduct-examples|hProduct examples]] {{NewMarker}}<br />
* location [[location-formats|location formats]]. (see also [[adr]] and [[geo]])<br />
* [[luna]] ([[geo]]-like co-ordinates, for places on The Moon) {{NewMarker}}<br />
* [[mars]] ([[geo]]-like co-ordinates, for places on the planet Mars) {{NewMarker}}<br />
* measures and measurement units [[measure]]<br />
* [[media-info]] ([[media-info-examples|media-info examples]], [[media-info-formats|media-info formats]], [[media-info-brainstorming|media-info brainstorming]]) <br />
* meeting minutes [[meeting-minutes-examples|meeting minutes examples]], [[meeting-minutes-formats|meeting minutes formats]], and [[meeting-minutes-brainstorming|meeting minutes brainstorming]]<br />
* metalink [[metalink-examples|metalink examples]] {{NewMarker}}<br />
* microsummary [[microsummary-brainstorming|microsummary brainstorming]] {{NewMarker}}<br />
* [[mfo-examples|MFO examples]]<br />
* music [[music-examples|music examples]]<br />
* photo note [[photo-note-examples|photo note examples]]<br />
* recipe [[recipe-examples|recipe examples]], [[recipe-brainstorming]] {{NewMarker}}<br />
* rel-product [[rel-product-brainstorming|rel-product brainstorming]]<br />
* requirements testing [[requirements-testing|requirements testing overview]], and [[requirements-testing-examples|requirements testing examples]]<br />
* [[rest-examples|REST examples]]<br />
* resume [[resume-brainstorming|resume brainstorming]], and [[resume-formats|resume formats]]<br />
* review [[review-examples|review examples]], and [[review-formats|review formats]] (yielded the [[hreview|hReview]] draft)<br />
* search results [[search-results-example|search results example]]<br />
* show [[show-brainstorming|show brainstorming]]<br />
* showroll [[showroll-brainstorming|brainstorming]]<br />
* [[species]] - for the marking up of the scientific names of living things: [[species-examples]]; [[species-brainstorming]] {{NewMarker}}<br />
* table [[table-examples|examples]]<br />
* tagspeak [[tagspeak-examples|tagspeak examples]]<br />
* tagcloud [[tagcloud-examples|tagcloud examples]], and [[tagcloud-brainstorming|tagcloud brainstorming]]. {{NewMarker}}<br />
* transit table [[transit-table-examples|transit table examples]]<br />
* [[uid]]<br />
* widget [[widget-examples|widget examples]], and [[widget-brainstorming|widget brainstorming]]<br />
* [[wiki-formats|wiki formats]]<br />
* work of art [[work-of-art|work of art overview]], [[workofart-examples|work of art examples]], [[workofart-formats|work of art formats]], and [[workofart-brainstorming|work of art brainstorming]] {{NewMarker}}<br />
*[[xmdp-brainstorming|XMDP brainstorming]] (see also [[xmdp-faq]])<br />
<br />
== Examples ==<br />
* [[examples]]<br />
* [[zen-garden]]<br />
<br />
<br />
== Tools & Test Cases & Additional Research ==<br />
<br />
The first place to look for examples, code, and test cases is in the pages for each individual microformat. There are only a few cross-cutting tools and services that need to process more than one microformat. This section is intended for editors, parsers, validators, test cases, and other information relevant across multiple microformats.<br />
<br />
*[[accessibility]]<br />
*[[faqs-for-rdf]]<br />
*[[icalendar-implementations]]<br />
*[[parsing-microformats]]<br />
*[[selected-test-cases-from-the-web]]<br />
*[http://hg.microformats.org/ Source code repository] -- [[mercurial-quick-start|HowTo: Download code from the repository]]<br />
*[[vcard-implementations]], [[vcard-errata]]<br />
*[[why-are-content-standards-hard]]<br />
<br />
== shared work areas ==<br />
* [[buttons]]<br />
* [[spread-microformats]] {{NewMarker}}<br />
* [[demo]] - a page with links for quickly demonstrating microformats working in practice.<br />
* [[events]] {{NewMarker}}<br />
* [[to-do]]<br />
* [[user-interface]]<br />
* [[marked-for-deletion]]<br />
<br />
== microformats wiki in other languages ==<br />
<br />
You may read and edit microformats articles in many other languages:<br />
<br />
* languages with over 50 articles<br />
** [[Main_Page-fr|Français (French)]] {{NewMarker-fr}}<br />
* languages with over 10 articles<br />
** [[Main_Page-pt-br| Português (Brazilian Portuguese)]] {{NewMarker-pt-br}}<br />
* languages with over 2 articles<br />
** [[Main_Page-ja|日本語 (Japanese)]]<br />
** [[Main_Page-es|Español (Spanish)]]<br />
* languages with 2 articles<br />
** [[Main_Page-de|Deutsch (German)]]<br />
<br />
==== microformats translations elsewhere ====<br />
These are offsite pages/sites with translations about microformats. If you are working on one of these, please consider translating the main microformats website!<br />
* [http://mikroformate.pbwiki.com/ Deutsch (German) mikroformate.pbwiki.com] {{NewMarker}}<br />
<br />
=== Start a microformats wiki in another language ===<br />
<br />
Don't see the language you want? Help translate the microformats wiki into another language!<br />
<br />
We're still figuring this out. <br />
<br />
For now, see the [http://en.wikipedia.org/wiki/Wikipedia:Multilingual_coordination Wikipedia page on Multilingual coordination], and [http://meta.wikimedia.org/wiki/How_to_start_a_new_Wikipedia How to start a new Wikipedia] for some good general tips, advice, and community conventions.<br />
<br />
You may want to start with the list of [[stable-pages]], which are pages that are relatively stable, and have only minimal/editorial changes, which makes them much easier to keep in sync with the English versions, by using the [[Special:Watchlist|my watchlist]] feature (use it to watch the pages you've translated for changes).<br />
<br />
Page naming: for the translated version of a page, use the same name for the page, and simply add the RFC 3066 language identifier code as a dash suffix. E.g. for the French version, [[Main_Page]] becomes [[Main_Page-fr]], and [[how-to-play]] becomes [[how-to-play-fr]].<br />
<br />
==== more languages folks want to see ====<br />
<br />
* Chinese: 微格式 (Microformats) (see [http://msittig.blogspot.com/2005/11/since-i-translated-schedule-of.html source of translation])</div>AaronGustafsonhttps://microformats.org/wiki/index.php?title=product&diff=12064product2006-11-19T16:24:50Z<p>AaronGustafson: </p>
<hr />
<div><h1>hProduct</h1><br />
<br />
hProduct is currently in the exploration/discussion phase and could be a good compliment to [[hlisting|hListing]] (which is more transaction-oriented) and [[hreview|hReview]] which is for reviews of products/items. The concept of hProduct came about because it would be good to extract the item information into a more discrete chunk of data for spidering and for specifying what it is you are selling or reviewing. It could allow for items to be tied to reviews more easily as well as for comparisons of like items to be made and, when combined with hListing, could be used to automate the QA of ecommerce sites (to make sure prices that should be charged for items are charged, etc.).<br />
<br />
Currently the following pages have been created/started:<br />
<br />
* [[hproduct-brainstorming|hProduct Brainstorming]]<br />
* [[hproduct-feedback|hProduct Discussion]]<br />
* [[hproduct-examples|hProduct Examples]]<br />
* [[hproduct-formats|hProduct Formats]]<br />
* [[hproduct-challenges|hProduct Challenge Examples]]</div>AaronGustafsonhttps://microformats.org/wiki/index.php?title=product-brainstorming&diff=10403product-brainstorming2006-11-19T16:23:28Z<p>AaronGustafson: /* Introduction */</p>
<hr />
<div><h1>hProduct Brainstorming</h1><br />
<br />
hProduct is a format suitable for embedding in (X)HTML, Atom, RSS, and arbitrary XML. hProduct would be related to several [[microformats]] (including [[hlisting|hListing]] and [[hreview|hReview]]) and would be an open standard.<br />
<br />
__TOC__<br />
<br />
===Authors===<br />
<br />
* Aaron Gustafson, [http://easy-designs.net/ Easy! Designs]<br />
* Craig Cook, [http://focalcurve.com/ Focal Curve]<br />
<br />
==Introduction==<br />
<br />
The web is a thriving marketplace with a plethora of vendors scattered across the globe. Sifting through this mass of information is difficult when it is unstructured. The hProduct microformat will bring order and structure to the chaos, making it easy for people to list the products they offer and easy for Web Services to consume that product information for analysis and syndication. This proposal follows the common practices of ecommerce sites such as Amazon, Buy.com and AutoByTel.<br />
<br />
hProduct would be compatible and combinable with [[hlisting|hListing]] and [[hreview|hReview]].<br />
<br />
=== Scope ===<br />
<br />
Giving details about a particular product is sometimes very complex as parameters are differnet for books and CDs than they are for iPods or cars. It should be very easy to mark up an item using hProduct and the syntax should be simple yet flexible enough for more advanced applications.<br />
<br />
=== Out of Scope ===<br />
<br />
This microformat does not intend to replicate any of the content proposed within [[hListing]] and would defer all money/transactional matters to that microformat.<br />
<br />
== Format ==<br />
<br />
=== In General ===<br />
<br />
The hProduct format is based on a set of fields common to numerous ecommerce sites and formats in use today on the web.<br />
<br />
=== Schema ===<br />
<br />
An hListing schema should consist of the following: <br />
<br />
* hProduct<br />
** ''version''. optional. text. <br />
** '''name'''. required.<br />
** ''image''. optional. <code>IMG</code> element or <code>rel='image'</code>. could be further refined as image type ( ''thumb'' || ''full'', ''photo'' || ''illo'')<br />
** ''description''. optional. could be denoted as 'summary' or 'extended'<br />
** ''brand''. text | [[hcard|hCard]]<br />
** ''uri''. optional. URI to manufacturer product page.<br />
** ''msrp''. optional. retail price.<br />
** ''p-v''. optional. opens up possibilities for custom property-value pairs in more complex examples.<br />
*** '''property'''. required.<br />
*** '''value'''. required. (label may be implied)<br />
<br />
==Field Details==<br />
<br />
The fields of the hListing schema represent the following:<br />
<br />
'''version''':: This optional field permits hProduct publishers to specify a particular version of hProduct that their content uses. By omitting this field, the publisher is stating that implementations may interpret the hListings according to any version of the hProduct specification. The value for this proposal as of 17-Nov-2006 is "0.0," since it has no official standing yet.<br />
<br />
=== Content ===<br />
<br />
'''name''':: This required field contains the name of the item<br />
<br />
'''image''':: This optional field contains either an image (as an <code>IMG</code> element) or a link to an image (as an <code>A</code> with <code>rel="image"</code>). The image can be categorized by additional terms such as 'thumb' (for thumbnail), 'full' (for full size image), 'photo' (for a photograph), 'illo' (for an illustration).<br />
<br />
'''description''':: This optional field contains the full text representing the written description of the item. The field MAY include valid XHTML markup (e.g. paragraphs). User agents SHOULD preserve any markup. Description could be either a 'summary' or an 'extended' description.<br />
<br />
'''brand''':: This optional field can contain either plan text or an [[hcard||hCard]] for the organization responsible for the item. Examples would include Sony, Friends of ED, O'Reilly, etc.<br />
<br />
'''uri''':: This optional field is a URI for the product at its brand website. It is not to be confused with the [[hlisting|hListing]] 'permalink'.<br />
<br />
'''msrp''':: This optional field is the manufacturer's suggested retail price for the item. It follows the [[currency]] format.<br />
<br />
=== Properties & Values ===<br />
<br />
We understand the need for providing extensibility to this microformat and have built in a mechanism for doing that using properties and values (p-v). There will be several ways of accomplishing property-value associations which will be described below, with several possible shorthands.<br />
<br />
'''p-v''':: This optional field initiates a property-value group.<br />
<br />
<ul><br />
<li>'''property''':: This required field denotes the property label.<br />
<br />
<p>Anticipated 'property' types include</p><br />
<br />
* 'recurring' for intervals of time (associated with an 'msrp')<br />
* 'artist'<br />
* 'author'<br />
* 'released' - [[hcal|hCal]] event for date of release<br />
* 'upc'<br />
* 'isbn' - international standard book number<br />
* 'sku' - stock keeping unit<br />
* 'sn' - serial number<br />
* 'vin' - vehicle identification number<br />
* 'batch'<br />
<br />
</li><br />
<br />
<li>'''value''':: This required field denotes the property value. The value may be implied in certain shorthands.</li><br />
<br />
</ul><br />
<br />
===Cross-cutting issues===<br />
<br />
''Internationalization:'' Though there are many English-language tokens, they are only used as invisible class-names; user-visible listing information can be completely localized. n.b. that (X)HTML <code>LANG</code> attribute rules still apply as usual, for multilingual aggregators of hProduct.<br />
<br />
The following field names have been reused from the [[hcard|hCard]] and [[hcalendar|hCalendar]] microformats: <code>version, description</code>. In addition, brands described by hCards MAY contain any hCard field.<br />
<br />
==Examples (Preliminary)==<br />
<br />
=== Simple Product ===<br />
<br />
The Pick of Destiny<br />
by Tenacious D<br />
The Pick of Destiny is the highly anticipated soundtrack to the upcoming <br />
New Line Cinema comedy, Tenacious D in the Pick of Destiny. An epic <br />
musical adventure, the film follows Tenacious D (Jack Black and Kyle Gass)<br />
on their quest to obtain the Pick and become The Greatest Band on Earth.<br />
Released: November 14, 2006<br />
Label: Sony<br />
UPC: 82796948912<br />
<br />
<pre><nowiki><div class="hproduct"><br />
<h4 class="name">The Pick of Destiny</h4><br />
<h5 class="p-v">by <span class="property artist">Tenacious D</span></h5><br />
<p class="description summary">The Pick of Destiny is the highly <br />
anticipated soundtrack to the upcoming New Line Cinema comedy, Tenacious<br />
D in the Pick of Destiny. An epic musical adventure, the film follows <br />
Tenacious D (Jack Black and Kyle Gass) on their quest to obtain the Pick<br />
and become The Greatest Band on Earth.</p><br />
<ul><br />
<li class="p-v"><span class="property">Released</span>:<br />
<span class="value"><abbr title="2006-11-14T12:00:01-05:00">November<br />
14, 2006</abbr></span></li><br />
<li>Label: <span class="brand">Sony</span></li><br />
<li class="p-v"><span class="property">UPC</span>:<br />
<span class="value">82796948912</span></li><br />
</ul><br />
</div></nowiki></pre><br />
<br />
=== Challenge Problems ===<br />
<br />
See [[hproduct-challenges|hProduct Challenge Problems]] for some hypothetical examples that illustrate corners of the specification.<br />
<br />
==Changes==<br />
<br />
mid Nov 2006: initial concepting.<br />
<br />
== Discussions ==<br />
<br />
* Feedback is encouraged on the [[hproduct-feedback|hProduct Feedback]] page.<br />
* See also [http://www.technorati.com/cosmos/referer.html blogs discussing this page].<br />
<br />
==See also==<br />
*[[item]]<br />
*[[currency]]<br />
<br />
== Acknowledgements ==<br />
<br />
Much of this document is based on the fine work of the folks behind [[hlisting|hListing]] and their proposal.</div>AaronGustafsonhttps://microformats.org/wiki/index.php?title=product-examples&diff=10379product-examples2006-11-19T16:22:21Z<p>AaronGustafson: starting to copy over our item research info</p>
<hr />
<div>= Product Examples =<br />
<br />
This is an exploratory page to document product examples currently published around the web. Typically, the metadata associated with this content is stored in non-semantic markup and proprietary formats. The purpose of the studies on this page is to serve as background for the design of a simple distributed product microformat.<br />
<br />
== Authors ==<br />
<br />
* Aaron Gustafson<br />
* Craig Cook<br />
<br />
== Examples ==<br />
<br />
=== Amazon ===<br />
<br />
==== CD ====<br />
* buying - contains unstructured data<br />
** album (product name)<br />
** artist<br />
* prodImage<br />
* listprice<br />
* price (actual price '''and''' "you save")<br />
* productDetails - contains unstructured data<br />
** format<br />
** release date<br />
** # of discs<br />
** label<br />
** ASIN<br />
<br />
==== Book ====<br />
* buying - contains unstructured data<br />
** title (product name)<br />
** format<br />
** author<br />
* prodImage<br />
* listprice<br />
* price (actual price '''and''' "you save")<br />
* productDetails - contains unstructured data<br />
** format<br />
** page count<br />
** publisher<br />
** publication date<br />
** language<br />
** ISBN<br />
** dimensions<br />
** weight<br />
<br />
==== Video Game ====<br />
* buying - contains unstructured data<br />
** title (product name)<br />
** publisher<br />
** platform<br />
* prodImage<br />
* listprice<br />
* price (actual price '''and''' "you save")<br />
* bucket (game info)<br />
** ESRB Rating<br />
** genre<br />
* productDetails - contains unstructured data<br />
** ASIN<br />
** SKN<br />
** release date<br />
<br />
==== Outdoor Product ====<br />
* buying - contains unstructured data<br />
** product name<br />
** brand<br />
* prodImage<br />
* listprice<br />
* price (actual price '''and''' "you save")<br />
* bucket (product features)<br />
* productDetails - contains unstructured data<br />
** dimensions<br />
** weight<br />
** ASIN<br />
** model number<br />
<br />
=== Buy.com ===<br />
<br />
==== CD ====<br />
* productTitle<br />
* artist (unstructured)<br />
* image (unstructured)<br />
* mainPricSection - contains unstructured data<br />
** actual price<br />
** shipping<br />
** total (augmented by quantity)<br />
* prodPriceSec_2 - actually product details<br />
** format<br />
** release date<br />
** label<br />
** SKU<br />
** item #<br />
* prodInfoSec_1 - additional details<br />
** description<br />
<br />
==== Book ====<br />
* productTitle<br />
* author (unstructured)<br />
* image (unstructured)<br />
* mainPricSection - contains unstructured data<br />
** actual price<br />
** shipping<br />
** total (augmented by quantity)<br />
* prodPriceSec_2 - actually product details<br />
** format<br />
** ISBN<br />
** publication date<br />
** publisher<br />
** dimensions<br />
** SKU<br />
** item #<br />
* prodInfoSec_1 - additional details<br />
** description<br />
<br />
==== Video Game ====<br />
* productTitle<br />
* image (unstructured)<br />
* mainPricSection - contains unstructured data<br />
** actual price<br />
** shipping<br />
** total (augmented by quantity)<br />
* prodPriceSec_2 - actually product details<br />
** format<br />
** release date<br />
** publisher<br />
** sku<br />
* prodInfoSec_1 - additional details<br />
** description<br />
<br />
==== TV ====<br />
* productTitle<br />
* image (unstructured)<br />
* mainPricSection - contains unstructured data<br />
** list price (msrp)<br />
** you save<br />
** price<br />
** shipping<br />
** actual price<br />
* prodPriceSec_2 - actually product details<br />
** manufacturer (brand)<br />
** part #<br />
** SKU<br />
** item #<br />
* prodInfoSec_1 - additional details<br />
** description<br />
* prodInfoSec_2 - tech specs (unstructured)<br />
** type (product description summary)<br />
** display area<br />
** native resolution<br />
** contrast ratio<br />
** viewing angles<br />
** power<br />
** weight<br />
** warranty<br />
** etc.<br />
<br />
== See Also ==<br />
* [[hproduct-brainstorming|hProduct Brainstorming]]<br />
* [[hproduct-feedback|hProduct Discussion]]<br />
* [[hproduct-formats|hProduct Formats]]<br />
* [[hproduct-challenges|hProduct Challenge Examples]]</div>AaronGustafsonhttps://microformats.org/wiki/index.php?title=Main_Page&diff=29329Main Page2006-11-17T22:55:21Z<p>AaronGustafson: /* Exploratory Discussions */</p>
<hr />
<div>__NOTOC__<br />
=Microformats Wiki=<br />
<br />
'''Hello!''' Welcome to the microformats wiki. If this is your first visit, please see the [[introduction]] page.<br />
<br />
Please read [[how-to-play]] before making any edits.<br />
<br />
Please read [[process]] before proposing any new microformats.<br />
<br />
__TOC__<br />
<br />
==Getting Started==<br />
<br />
[[what-are-microformats|What are microformats]]? [[what-can-you-do-with-microformats|What can you do with them]]? <br />
<br />
The [http://microformats.org/about/ about page], plus recent [[press]], [[presentations]], [[podcasts]], and [[screencasts]] are also good places for some background information. <br />
<br />
Frequently asked questions about the wiki and microformats in general are answered in the [[faq|FAQ]]. <br />
<br />
Want to learn more in person? Check out [[events|microformats events]].<br />
<br />
==Definition==<br />
<br />
One popular definition from our [http://microformats.org/discuss/ mailing list] (see also: [[mailing-lists]]) is "simple conventions for embedding semantics in HTML to enable decentralized development." More precisely, microformats can be defined as:<br />
:simple conventions<br />
:for embedding semantic markup<br />
::for a specific problem domain<br />
:in human-readable (X)HTML/XML documents, Atom/RSS feeds, and "plain" XML<br />
::that normalize existing content usage patterns<br />
::using brief, descriptive class names <br />
::often based on existing interoperable standards<br />
:to enable decentralized development<br />
::of resources, tools, and services<br />
<br />
Simply put: "Microformats are a codification of convention." -- [http://easy-reader.net Aaron Gustafson]<br />
<br />
"Or do you just use your browser to browse? That's so 20th century." -- [http://diveintomark.org Mark Pilgrim]<br />
<br />
== How to contribute ==<br />
<br />
Do you want to help take microformats to the next level? You can:<br />
<br />
*Check out our open [[to-do|to do list]] for things to help get done.<br />
*Join the [http://microformats.org/discuss mailing lists] and [[irc|IRC Channel]] to learn and help answer questions about microformats.<br />
*[[advocacy|Advocate]] the use of microformats.<br />
*help to [[Main_Page#microformats_wiki_in_other_languages|translate the microformats wiki into other languages]] to make microformats globally accessible.<br />
<br />
== Specifications ==<br />
[[microformats|Microformats]] open standards specifications (see also: [[implementations]])<br />
* [[hcalendar|hCalendar]]<br />
* [[hcard|hCard]]<br />
* [[rel-license]]<br />
* [[rel-nofollow]]<br />
* [[rel-tag]]<br />
* [[vote-links|VoteLinks]]<br />
* [http://gmpg.org/xfn/ XFN] (see also: [[xfn-implementations]])<br />
* [http://gmpg.org/xmdp/ XMDP]<br />
* [[xoxo|XOXO]]<br />
<br />
== Drafts ==<br />
* [[adr|adr]]<br />
* [[geo|geo]]<br />
* [[hatom|hAtom]] {{NewMarker}}<br />
* [[hresume|hResume]] {{NewMarker}}<br />
* [[hreview|hReview]]<br />
* [[rel-directory]]<br />
* [[rel-enclosure]]<br />
* [[rel-home]]<br />
* [[relpayment-research | rel-payment]]<br />
* [[robots-exclusion|Robots Exclusion]]<br />
* [[xfolk|xFolk]]<br />
<br />
== Design Patterns ==<br />
<br />
{{design_patterns}} <!-- this can be edited in /wiki/Template:design_patterns --><br />
<br />
== Exploratory Discussions ==<br />
Research and analysis of real-world [[examples]], existing formats, and brainstorming to motivate the microformat.<br />
*alternates [[alternates-brainstorming|brainstorming]], [[alternates-examples|examples]]<br />
*[[attention]]<br />
* blog description [[blog-description-examples|examples]]<br />
* blog info [[blog-info-examples|examples]]<br />
* blog post [[blog-post-examples|examples]], [[blog-post-formats|formats]], and [[blog-post-brainstorming|brainstorming]] (yielded the [[hatom|hAtom]] draft)<br />
* book [[book-examples|examples]], [[book-formats|formats]], and [[book-brainstorming|brainstorming]]<br />
* chat [[chat-examples|examples]], [[chat-formats|formats]], and [[chat-brainstorming|brainstorming]]<br />
* citation [[citation|effort]], [[citation-examples|examples]], [[citation-formats|formats]], [[citation-brainstorming|brainstorming]], and [[citation-faq|FAQ]]<br />
* comment [[comment-problem|problem]], [[comment-examples|examples]], and [[comments-formats|formats]] (Some stuff needs to be extracted from [[comments-formats]])<br />
* [[currency]]; [[currency-examples]]; [[currency-brainstorming]] {{NewMarker}}<br />
* directions [[directions-examples|examples]] {{NewMarker}}<br />
* directory inclusion [[directory-inclusion-examples|examples]], [[directory-inclusion-formats|formats]]. (see also [[rel-directory]])<br />
* distributed conversation [[distributed-conversation|overview]], [[distributed-conversation-brainstorming|brainstorming]], [[distributed-conversation-examples|examples]], and [[distributed-conversation-formats|formats]]<br />
* forms [[forms-examples|examples]]<br />
* genealogy [[genealogy-formats|examples]]<br />
* group [[group-brainstorming|brainstorming]] and [[group-examples|examples]]<br />
* items [[items-brainstorming|brainstorming]]<br />
* hash [[hash-examples|examples]]<br />
* job listing [[job-listing-examples|examples]] and [[job-listing-brainstorming|brainstorming]]<br />
* last modified [[last-modified-examples|examples]], [[last-modified-formats|formats]], and [[last-modified-brainstorming|brainstorming]]<br />
* hListing [[hlisting-proposal|proposal]], and [[hlisting-feedback|feedback]] {{NewMarker}}<br />
** Also, listing [[listing-examples|examples]], [[listing-formats|formats]], and [[listing-brainstorming|brainstorming]]<br />
* [[hproduct|hProduct]] - [[hproduct-brainstorming|brainstorming]] | [[hproduct-feedback|discussion]] | [[hproduct-formats|formats]] | [[hproduct-challenges|challenge examples]] {{NewMarker}}<br />
* location [[location-formats|formats]]. (see also [[adr]] and [[geo]])<br />
* [[luna]] ([[geo]]-like co-ordinates, for places on The Moon) {{NewMarker}}<br />
* [[mars]] ([[geo]]-like co-ordinates, for places on the planet Mars) {{NewMarker}}<br />
* measures and measurement units [[measure]]<br />
* [[media-info]] ([[media-info-examples|examples]], [[media-info-formats|formats]], [[media-info-brainstorming|brainstorming]]) <br />
* meeting minutes [[meeting-minutes-examples|examples]], [[meeting-minutes-formats|formats]], and [[meeting-minutes-brainstorming|brainstorming]]<br />
* metalink [[metalink-examples|examples]] {{NewMarker}}<br />
* microsummary [[microsummary-brainstorming|brainstorming]] {{NewMarker}}<br />
* [[mfo-examples|MFO examples]]<br />
* music [[music-examples|examples]]<br />
* photo note [[photo-note-examples|examples]]<br />
* recipe [[recipe-examples|examples]], [[recipe-brainstorming]] {{NewMarker}}<br />
* rel-product [[rel-product-brainstorming|brainstorming]]<br />
* requirements testing [[requirements-testing|overview]], and [[requirements-testing-examples|examples]]<br />
* [[rest-examples|REST examples]]<br />
* resume [[resume-brainstorming|brainstorming]], and [[resume-formats|formats]]<br />
* review [[review-examples|examples]], and [[review-formats|formats]] (yielded the [[hreview|hReview]] draft)<br />
* search results [[search-results-example|example]]<br />
* show [[show-brainstorming|brainstorming]]<br />
* showroll [[showroll-brainstorming|brainstorming]]<br />
* [[species]] - for the marking up of the scientific names of living things: [[species-examples]]; [[species-brainstorming]] {{NewMarker}}<br />
* table [[table-examples|examples]]<br />
* tagspeak [[tagspeak-examples|examples]]<br />
* tagcloud [[tagcloud-examples|examples]], and [[tagcloud-brainstorming | brainstorming]]. {{NewMarker}}<br />
* transit table [[transit-table-examples|examples]]<br />
* [[uid]]<br />
* widget [[widget-examples|examples]], and [[widget-brainstorming|brainstorming]]<br />
* [[wiki-formats|wiki formats]]<br />
* work of art [[work-of-art|overview]], [[workofart-examples|examples]], [[workofart-formats|formats]], and [[workofart-brainstorming|brainstorming]] {{NewMarker}}<br />
*[[xmdp-brainstorming|XMDP brainstorming]] (see also [[xmdp-faq]])<br />
<br />
== Examples ==<br />
* [[examples]]<br />
* [[zen-garden]]<br />
<br />
<br />
== Tools & Test Cases & Additional Research ==<br />
<br />
The first place to look for examples, code, and test cases is in the pages for each individual microformat. There are only a few cross-cutting tools and services that need to process more than one microformat. This section is intended for editors, parsers, validators, test cases, and other information relevant across multiple microformats.<br />
<br />
*[[accessibility]]<br />
*[[faqs-for-rdf]]<br />
*[[icalendar-implementations]]<br />
*[[parsing-microformats]]<br />
*[[selected-test-cases-from-the-web]]<br />
*[http://hg.microformats.org/ Source code repository] -- [[mercurial-quick-start|HowTo: Download code from the repository]]<br />
*[[vcard-implementations]], [[vcard-errata]]<br />
*[[why-are-content-standards-hard]]<br />
<br />
== shared work areas ==<br />
* [[buttons]]<br />
* [[spread-microformats]] {{NewMarker}}<br />
* [[demo]] - a page with links for quickly demonstrating microformats working in practice.<br />
* [[events]] {{NewMarker}}<br />
* [[to-do]]<br />
* [[user-interface]]<br />
* [[marked-for-deletion]]<br />
<br />
== microformats wiki in other languages ==<br />
<br />
You may read and edit microformats articles in many other languages:<br />
<br />
* languages with over 50 articles<br />
** [[Main_Page-fr|Français (French)]] {{NewMarker-fr}}<br />
* languages with over 10 articles<br />
** [[Main_Page-pt-br| Português (Brazilian Portuguese)]] {{NewMarker-pt-br}}<br />
* languages with over 2 articles<br />
** [[Main_Page-ja|日本語 (Japanese)]]<br />
** [[Main_Page-es|Español (Spanish)]]<br />
* languages with 2 articles<br />
** [[Main_Page-de|Deutsch (German)]]<br />
<br />
==== microformats translations elsewhere ====<br />
These are offsite pages/sites with translations about microformats. If you are working on one of these, please consider translating the main microformats website!<br />
* [http://mikroformate.pbwiki.com/ Deutsch (German) mikroformate.pbwiki.com] {{NewMarker}}<br />
<br />
=== Start a microformats wiki in another language ===<br />
<br />
Don't see the language you want? Help translate the microformats wiki into another language!<br />
<br />
We're still figuring this out. <br />
<br />
For now, see the [http://en.wikipedia.org/wiki/Wikipedia:Multilingual_coordination Wikipedia page on Multilingual coordination], and [http://meta.wikimedia.org/wiki/How_to_start_a_new_Wikipedia How to start a new Wikipedia] for some good general tips, advice, and community conventions.<br />
<br />
You may want to start with the list of [[stable-pages]], which are pages that are relatively stable, and have only minimal/editorial changes, which makes them much easier to keep in sync with the English versions, by using the [[Special:Watchlist|my watchlist]] feature (use it to watch the pages you've translated for changes).<br />
<br />
Page naming: for the translated version of a page, use the same name for the page, and simply add the RFC 3066 language identifier code as a dash suffix. E.g. for the French version, [[Main_Page]] becomes [[Main_Page-fr]], and [[how-to-play]] becomes [[how-to-play-fr]].<br />
<br />
==== more languages folks want to see ====<br />
<br />
* Chinese: 微格式 (Microformats) (see [http://msittig.blogspot.com/2005/11/since-i-translated-schedule-of.html source of translation])</div>AaronGustafsonhttps://microformats.org/wiki/index.php?title=hlisting-feedback&diff=10341hlisting-feedback2006-11-17T22:25:41Z<p>AaronGustafson: commented</p>
<hr />
<div>== Default Action ==<br />
I think it's good form to have a default for every required field, since someone out there is going to drop any given requried field in the land of microformats. In that spirit, the default for listing type is offer, since wanted ads are << 10% in the real world. What I don't know is what the default action should be; the most neutral of them is ''announce'', which I am using in my parser.<br />
<br />
-- Rohit<br />
<br />
== Donations ==<br />
<br />
Sell and Rent are obvious enough verbs; what does Trade mean, though? Barter? And what about one-sided gifts, like donations or "free to recycle"? Should we replace Trade and offer Donate in its place?<br />
<br />
-- Rohit<br />
<br />
== Desire to Inherit Context ==<br />
<br />
When it comes to blog posting, I’d like to see us address the following:<br />
<br />
1. '''Less is more'''. Or in reverse, people are lazy, and the less fields they need to fill in order to sell a couch or find a date, the more they'll use the plugin. So I'm trying to visualize how this plays in with the user interface and how we can keep it as simple as possible.<br />
<br />
2. '''DRY'''. We want to capture as much information as possible from what is already available in the blog post. We already have summary (title), listing date/time (post date/time), permalink, author information, tags/categories.<br />
<br />
3. '''Keep it simple'''. And here I'm talking about setup and being able to extend your blog's functionality without too much fuss. This one is a bit more tricky, so I'll go into details.<br />
<br />
WordPress uses templates to render the blog post. The template then calls the WordPress API to render the title, a second call to render the content, and another call to render any additional metadata (e.g. <br />
publish date, categories, author). These separate calls allow people to play with the formatting and apply any styling they like.<br />
<br />
The way uPress works, is by processing the blog post before it goes back to the filter, creating the hEvent (to be: hListing) element around it, and adding any relevant fields into the blog post. So what you fill in the form, finds its way to the post content. As a result, setting up the plugin requires two steps: drop it to the plugins directory, and activate.<br />
<br />
Unfortunately, I only get to process the content of the post. I can't easily include the title inside the hListing element, or any other metadata about the post, even though I have access to it. If I duplicate that information, the post stops being readable. And to wrap the entire post (not just body) inside a microformat element, I need to tweak the template. Except people use different templates, and I can't tweak all of them.<br />
<br />
So the more context we use, the better the plugin becomes.<br />
<br />
-- Assaf Arkin<br />
<br />
== '''Make Info/Photo fields Optional''' ==<br />
<br />
WordPress has a great WYSIWYG editor that lets you drag & drop images. <br />
But the only semantic identification it uses is the HTML <img> element. <br />
So how do we get a photo to be identified from all the images inside the description?<br />
<br />
1. Manually edit the HTML that WordPress creates to add the class.<br />
2. Add another UI doubling the one already used by WordPress, sans drag & drop, strictly for images designated as photos.<br />
3. Tag every single image as photo.<br />
4. Have the crawler interpret every single image as photo.<br />
<br />
I'm not sure we want to push the complexity to the edge, that's like asking people to create only valid XHTML pages and not rendering anything that refuses to validate. This is about humans first, machines second. If complexity needs to exist, it should be not in the blog, but in the crawlers.<br />
<br />
-- Assaf Arkin<br />
<br />
<br />
== '''On hReview''' ==<br />
<br />
This draft was heavily influenced by hReview. That's a good thing. We don’t want to duplicate efforts; are learning from the mistakes of others; and converging on a cohesive set of specifications. I want to eventually add hReview and hCard to my plugin. So this strategy of borrowing from existing microformats helps me get it done quicker. It took me all of five minutes to leverage address formatting from hEvent.<br />
<br />
But we also need to recognize that hReview could also be more blogging friendly. The specification is great, but the implementations are lacking. I think the reason is that hReview was designed for greenfield applications that specifically deal with emitting reviews. The design did not take into consideration applications that already deal with content, but want to supplement it with reviews, listings, etc. There's no mention of such consideration in the spec.<br />
<br />
We want to appeal to the wide populace of bloggers who just want to get stuff done. Rather than put the burden on millions of bloggers out there, we should place the burden on the few companies developing crawlers.<br />
<br />
What would Tantek say? I think he'd ask us to focus on use cases, real examples. I'm presenting one such example. The use case involves a blogger who just wants to sell something on their blog, with the minimum amount of effort and cognitive friction. They want the listing to be discovered, aggregated and searched by others.<br />
<br />
-- Assaf Arkin<br />
<br />
<br />
== '''Neighborhood Name''' ==<br />
<br />
With the exception of housing, most classified listings don’t contain a specific address (e.g., if I’m selling my couch, you don’t need to know where I live in the listing). Some location information, however, is important. In most suburban areas, the name of the town is sufficient. In cities, however, neighborhood is important and more contextually relevant than zipcode (simply a region defined by the post office).<br />
<br />
This is a tough problem that needs to be solved but outside the context of this discussion. We think there are other cases the could benefit from it, including hReview and hEvent. We recommend that this debate be surface in the adr microformation discussion (e.g., perhaps extend the locality field (city) to optionally include a neighborhood)<br />
<br />
-- Craig Donato & Assaf Arkin<br />
<br />
<br />
<br />
== '''Listing Action, Listing Type, Item Type''' ==<br />
<br />
We heavily debated how to classify a listing. Search engines or marketplaces typically need to understand what type of listing it is (e.g., personal ad, house for sale, music) to effectively reference or index a listing. <br />
<br />
We initially considered proposing a single category field that contained tags (in addition to the tags field). Not only did this seem duplicative, it also seemed like too much of a good thing. In a previous project, Assaf managed to successfully overload everything into tags (including dates and locations), and run time-based and location-based searches, and ended up concluding it's a bad idea.<br />
<br />
We eventually decided to propose the use three parametric field that when used together could define any type of listing independent of the words use to describe. These ended up being: listing-type (are you offering something or looking for something; listing-action (are you trying to sell, rent, or announce something); and item type (what item is referenced by the action such as a job opening, product, housing). By making small modifications to this vocabulary, users can specify an extremely wide range of potential transactions. This seemed more feasible given that the UI used to produce the hListing could abstract some of this from the user (as Assaf demonstrated in his demo plugin).<br />
<br />
For example:<br />
<br />
{|<br />
!Desired Transaction<br />
!Listing Type<br />
!Listing Action<br />
!Item Type<br />
|-<br />
|Merchandise For Sale<br />
|Offer<br />
|Sell<br />
|Product<br />
|-<br />
|Looking to Buy Merchandise<br />
|Wanted<br />
|Sell<br />
|Product<br />
|-<br />
|Selling Tickets<br />
|Offer<br />
|Sell<br />
|Event<br />
|-<br />
|Apartment For Rent<br />
|Offer<br />
|Rent<br />
|Housing<br />
|-<br />
|Looking for Apartment<br />
|Wanted<br />
|Rent<br />
|Housing<br />
|-<br />
|Room for Rent (Roommate)<br />
|Offer<br />
|Rent<br />
|Housing<br />
|-<br />
|Looking for a Date<br />
|Offer||Wanted<br />
|Announce, Meet<br />
|-<br />
|Job Opening<br />
|Offer<br />
|Announce<br />
|Opening<br />
|-<br />
|Looking for a Job (Resume)<br />
|Wanted<br />
|Announce<br />
|Opening<br />
|-<br />
|Music Lessons<br />
|Offer<br />
|Service<br />
|Business<br />
|-<br />
|Trade Couch for TV<br />
|Offer<br />
|Trade<br />
|Product<br />
|-<br />
|Pet for Adoption<br />
|Offer<br />
|Announce<br />
|Animal?<br />
|}<br />
-- Craig Donato<br />
<br />
== Eliminate Item Type ==<br />
<br />
Can we eliminate item type and simply use tags? Or perhaps inferred item type from the item info?<br />
<br />
== hClassified? ==<br />
<br />
There are meanings of "listing" that wouldn't fit this format.. might not hClassified be a more descriptive name? It's not overconstraining... 'classifieds' being very broad in practice and the meaning very informally/functionally defined. Or has the 'listing' train left the station? <br />
<br />
== What about retail? == <br />
<br />
Retail is out of scope for hListing, sure -- but what microformat should a retail seller of (e.g. mass-produced) goods use? hForSale? hProduct?<br />
<br />
== Retail ==<br />
<br />
Funnily enough, hProduct is always something that I've thought about.<br />
<br />
I'd be bold enough to say that it will be one of the main uses of microformats in the future. Imagine the amount of shops, price comparison, product review and many more type of sites. It doesn't have to be for profit, it could just be someones product, on their site, that they are displaying.<br />
<br />
I'd be willing to help and continue development of a spec for 'hProduct'.<br />
<br />
Adam Craven<br />
<br />
<br />
== Thubnail Class ==<br />
Hello. I'm not sure I understand everything correctly, but from reading the hListing proposal it seems that one should put pictures of the listed subject into the "photo" class. I'm wondering if also we may wish to have a "thumnail" class or perhaps something like "photo-thumbnail" to denote thumbnail images.<br />
-Andrew<br />
<br />
<br />
== Validator ==<br />
Perhaps to foster development of this type, someone (who knows a lot more about microformats than I) should put a validator type page out there. I realize that microformats, by their nature are a loose specification (it's not as strict as validating say an XML rss feed). But having something that I can use to at least verify that what I'm coding is actually recognized as an hListing by someone other than myself would be very helpful.<br />
-Andrew<br />
<br />
<br />
Blogmatrix have added hListing to their microformats parser [http://tools.blogmatrix.com/extract/ here]<br />
-d4rr3ll<br />
<br />
== Extraction of hProduct ==<br />
<br />
I think it would be wise to extract product information into [[hproduct|hProduct]] and simply maintain the listing for listing-specific data (such as actual price/suggested price, location, timeframe, etc.).<br />
<br />
Also, regarding price, I think going with the currency microformat makes sense, but I also think there should be specifics around the type of price being shown. For instance, there is a MSRP which is tied to the product (and ''should'' be in hProduct), then there is the asking price (or in the case of cars, the dealer invoice, sticker price, etc.). Perhaps going the route of<br />
<br />
<pre><nowiki><p class="price actual money"><br />
<abbr class="currency" title="USD">$</abbr>3.00<br />
</p></nowiki></pre><br />
<br />
would make more sense?<br />
- Aaron Gustafson</div>AaronGustafsonhttps://microformats.org/wiki/index.php?title=Main_Page&diff=29328Main Page2006-11-17T22:18:57Z<p>AaronGustafson: /* Exploratory Discussions */</p>
<hr />
<div>__NOTOC__<br />
=Microformats Wiki=<br />
<br />
'''Hello!''' Welcome to the microformats wiki. If this is your first visit, please see the [[introduction]] page.<br />
<br />
Please read [[how-to-play]] before making any edits.<br />
<br />
Please read [[process]] before proposing any new microformats.<br />
<br />
__TOC__<br />
<br />
==Getting Started==<br />
<br />
[[what-are-microformats|What are microformats]]? [[what-can-you-do-with-microformats|What can you do with them]]? <br />
<br />
The [http://microformats.org/about/ about page], plus recent [[press]], [[presentations]], [[podcasts]], and [[screencasts]] are also good places for some background information. <br />
<br />
Frequently asked questions about the wiki and microformats in general are answered in the [[faq|FAQ]]. <br />
<br />
Want to learn more in person? Check out [[events|microformats events]].<br />
<br />
==Definition==<br />
<br />
One popular definition from our [http://microformats.org/discuss/ mailing list] (see also: [[mailing-lists]]) is "simple conventions for embedding semantics in HTML to enable decentralized development." More precisely, microformats can be defined as:<br />
:simple conventions<br />
:for embedding semantic markup<br />
::for a specific problem domain<br />
:in human-readable (X)HTML/XML documents, Atom/RSS feeds, and "plain" XML<br />
::that normalize existing content usage patterns<br />
::using brief, descriptive class names <br />
::often based on existing interoperable standards<br />
:to enable decentralized development<br />
::of resources, tools, and services<br />
<br />
Simply put: "Microformats are a codification of convention." -- [http://easy-reader.net Aaron Gustafson]<br />
<br />
"Or do you just use your browser to browse? That's so 20th century." -- [http://diveintomark.org Mark Pilgrim]<br />
<br />
== How to contribute ==<br />
<br />
Do you want to help take microformats to the next level? You can:<br />
<br />
*Check out our open [[to-do|to do list]] for things to help get done.<br />
*Join the [http://microformats.org/discuss mailing lists] and [[irc|IRC Channel]] to learn and help answer questions about microformats.<br />
*[[advocacy|Advocate]] the use of microformats.<br />
*help to [[Main_Page#microformats_wiki_in_other_languages|translate the microformats wiki into other languages]] to make microformats globally accessible.<br />
<br />
== Specifications ==<br />
[[microformats|Microformats]] open standards specifications (see also: [[implementations]])<br />
* [[hcalendar|hCalendar]]<br />
* [[hcard|hCard]]<br />
* [[rel-license]]<br />
* [[rel-nofollow]]<br />
* [[rel-tag]]<br />
* [[vote-links|VoteLinks]]<br />
* [http://gmpg.org/xfn/ XFN] (see also: [[xfn-implementations]])<br />
* [http://gmpg.org/xmdp/ XMDP]<br />
* [[xoxo|XOXO]]<br />
<br />
== Drafts ==<br />
* [[adr|adr]]<br />
* [[geo|geo]]<br />
* [[hatom|hAtom]] {{NewMarker}}<br />
* [[hresume|hResume]] {{NewMarker}}<br />
* [[hreview|hReview]]<br />
* [[rel-directory]]<br />
* [[rel-enclosure]]<br />
* [[rel-home]]<br />
* [[relpayment-research | rel-payment]]<br />
* [[robots-exclusion|Robots Exclusion]]<br />
* [[xfolk|xFolk]]<br />
<br />
== Design Patterns ==<br />
<br />
{{design_patterns}} <!-- this can be edited in /wiki/Template:design_patterns --><br />
<br />
== Exploratory Discussions ==<br />
Research and analysis of real-world [[examples]], existing formats, and brainstorming to motivate the microformat.<br />
*alternates [[alternates-brainstorming|brainstorming]], [[alternates-examples|examples]]<br />
*[[attention]]<br />
* blog description [[blog-description-examples|examples]]<br />
* blog info [[blog-info-examples|examples]]<br />
* blog post [[blog-post-examples|examples]], [[blog-post-formats|formats]], and [[blog-post-brainstorming|brainstorming]] (yielded the [[hatom|hAtom]] draft)<br />
* book [[book-examples|examples]], [[book-formats|formats]], and [[book-brainstorming|brainstorming]]<br />
* chat [[chat-examples|examples]], [[chat-formats|formats]], and [[chat-brainstorming|brainstorming]]<br />
* citation [[citation|effort]], [[citation-examples|examples]], [[citation-formats|formats]], [[citation-brainstorming|brainstorming]], and [[citation-faq|FAQ]]<br />
* comment [[comment-problem|problem]], [[comment-examples|examples]], and [[comments-formats|formats]] (Some stuff needs to be extracted from [[comments-formats]])<br />
* [[currency]]; [[currency-examples]]; [[currency-brainstorming]] {{NewMarker}}<br />
* directions [[directions-examples|examples]] {{NewMarker}}<br />
* directory inclusion [[directory-inclusion-examples|examples]], [[directory-inclusion-formats|formats]]. (see also [[rel-directory]])<br />
* distributed conversation [[distributed-conversation|overview]], [[distributed-conversation-brainstorming|brainstorming]], [[distributed-conversation-examples|examples]], and [[distributed-conversation-formats|formats]]<br />
* forms [[forms-examples|examples]]<br />
* genealogy [[genealogy-formats|examples]]<br />
* group [[group-brainstorming|brainstorming]] and [[group-examples|examples]]<br />
* items [[items-brainstorming|brainstorming]]<br />
* hash [[hash-examples|examples]]<br />
* job listing [[job-listing-examples|examples]] and [[job-listing-brainstorming|brainstorming]]<br />
* last modified [[last-modified-examples|examples]], [[last-modified-formats|formats]], and [[last-modified-brainstorming|brainstorming]]<br />
* hListing [[hlisting-proposal|proposal]], and [[hlisting-feedback|feedback]] {{NewMarker}}<br />
** Also, listing [[listing-examples|examples]], [[listing-formats|formats]], and [[listing-brainstorming|brainstorming]]<br />
* [[hproduct|hProduct]] - [[hlisting-brainstorming|brainstorming]] | [[hproduct-feedback|discussion]] | [[hproduct-formats|formats]] | [[hproduct-challenges|challenge examples]] {{NewMarker}}<br />
* location [[location-formats|formats]]. (see also [[adr]] and [[geo]])<br />
* [[luna]] ([[geo]]-like co-ordinates, for places on The Moon) {{NewMarker}}<br />
* [[mars]] ([[geo]]-like co-ordinates, for places on the planet Mars) {{NewMarker}}<br />
* measures and measurement units [[measure]]<br />
* [[media-info]] ([[media-info-examples|examples]], [[media-info-formats|formats]], [[media-info-brainstorming|brainstorming]]) <br />
* meeting minutes [[meeting-minutes-examples|examples]], [[meeting-minutes-formats|formats]], and [[meeting-minutes-brainstorming|brainstorming]]<br />
* metalink [[metalink-examples|examples]] {{NewMarker}}<br />
* microsummary [[microsummary-brainstorming|brainstorming]] {{NewMarker}}<br />
* [[mfo-examples|MFO examples]]<br />
* music [[music-examples|examples]]<br />
* photo note [[photo-note-examples|examples]]<br />
* recipe [[recipe-examples|examples]], [[recipe-brainstorming]] {{NewMarker}}<br />
* rel-product [[rel-product-brainstorming|brainstorming]]<br />
* requirements testing [[requirements-testing|overview]], and [[requirements-testing-examples|examples]]<br />
* [[rest-examples|REST examples]]<br />
* resume [[resume-brainstorming|brainstorming]], and [[resume-formats|formats]]<br />
* review [[review-examples|examples]], and [[review-formats|formats]] (yielded the [[hreview|hReview]] draft)<br />
* search results [[search-results-example|example]]<br />
* show [[show-brainstorming|brainstorming]]<br />
* showroll [[showroll-brainstorming|brainstorming]]<br />
* [[species]] - for the marking up of the scientific names of living things: [[species-examples]]; [[species-brainstorming]] {{NewMarker}}<br />
* table [[table-examples|examples]]<br />
* tagspeak [[tagspeak-examples|examples]]<br />
* tagcloud [[tagcloud-examples|examples]], and [[tagcloud-brainstorming | brainstorming]]. {{NewMarker}}<br />
* transit table [[transit-table-examples|examples]]<br />
* [[uid]]<br />
* widget [[widget-examples|examples]], and [[widget-brainstorming|brainstorming]]<br />
* [[wiki-formats|wiki formats]]<br />
* work of art [[work-of-art|overview]], [[workofart-examples|examples]], [[workofart-formats|formats]], and [[workofart-brainstorming|brainstorming]] {{NewMarker}}<br />
*[[xmdp-brainstorming|XMDP brainstorming]] (see also [[xmdp-faq]])<br />
<br />
== Examples ==<br />
* [[examples]]<br />
* [[zen-garden]]<br />
<br />
<br />
== Tools & Test Cases & Additional Research ==<br />
<br />
The first place to look for examples, code, and test cases is in the pages for each individual microformat. There are only a few cross-cutting tools and services that need to process more than one microformat. This section is intended for editors, parsers, validators, test cases, and other information relevant across multiple microformats.<br />
<br />
*[[accessibility]]<br />
*[[faqs-for-rdf]]<br />
*[[icalendar-implementations]]<br />
*[[parsing-microformats]]<br />
*[[selected-test-cases-from-the-web]]<br />
*[http://hg.microformats.org/ Source code repository] -- [[mercurial-quick-start|HowTo: Download code from the repository]]<br />
*[[vcard-implementations]], [[vcard-errata]]<br />
*[[why-are-content-standards-hard]]<br />
<br />
== shared work areas ==<br />
* [[buttons]]<br />
* [[spread-microformats]] {{NewMarker}}<br />
* [[demo]] - a page with links for quickly demonstrating microformats working in practice.<br />
* [[events]] {{NewMarker}}<br />
* [[to-do]]<br />
* [[user-interface]]<br />
* [[marked-for-deletion]]<br />
<br />
== microformats wiki in other languages ==<br />
<br />
You may read and edit microformats articles in many other languages:<br />
<br />
* languages with over 50 articles<br />
** [[Main_Page-fr|Français (French)]] {{NewMarker-fr}}<br />
* languages with over 10 articles<br />
** [[Main_Page-pt-br| Português (Brazilian Portuguese)]] {{NewMarker-pt-br}}<br />
* languages with over 2 articles<br />
** [[Main_Page-ja|日本語 (Japanese)]]<br />
** [[Main_Page-es|Español (Spanish)]]<br />
* languages with 2 articles<br />
** [[Main_Page-de|Deutsch (German)]]<br />
<br />
==== microformats translations elsewhere ====<br />
These are offsite pages/sites with translations about microformats. If you are working on one of these, please consider translating the main microformats website!<br />
* [http://mikroformate.pbwiki.com/ Deutsch (German) mikroformate.pbwiki.com] {{NewMarker}}<br />
<br />
=== Start a microformats wiki in another language ===<br />
<br />
Don't see the language you want? Help translate the microformats wiki into another language!<br />
<br />
We're still figuring this out. <br />
<br />
For now, see the [http://en.wikipedia.org/wiki/Wikipedia:Multilingual_coordination Wikipedia page on Multilingual coordination], and [http://meta.wikimedia.org/wiki/How_to_start_a_new_Wikipedia How to start a new Wikipedia] for some good general tips, advice, and community conventions.<br />
<br />
You may want to start with the list of [[stable-pages]], which are pages that are relatively stable, and have only minimal/editorial changes, which makes them much easier to keep in sync with the English versions, by using the [[Special:Watchlist|my watchlist]] feature (use it to watch the pages you've translated for changes).<br />
<br />
Page naming: for the translated version of a page, use the same name for the page, and simply add the RFC 3066 language identifier code as a dash suffix. E.g. for the French version, [[Main_Page]] becomes [[Main_Page-fr]], and [[how-to-play]] becomes [[how-to-play-fr]].<br />
<br />
==== more languages folks want to see ====<br />
<br />
* Chinese: 微格式 (Microformats) (see [http://msittig.blogspot.com/2005/11/since-i-translated-schedule-of.html source of translation])</div>AaronGustafsonhttps://microformats.org/wiki/index.php?title=product&diff=10369product2006-11-17T22:18:29Z<p>AaronGustafson: Filled out</p>
<hr />
<div><h1>hProduct</h1><br />
<br />
hProduct is currently in the exploration/discussion phase and could be a good compliment to [[hlisting|hListing]] (which is more transaction-oriented) and [[hreview|hReview]] which is for reviews of products/items. The concept of hProduct came about because it would be good to extract the item information into a more discrete chunk of data for spidering and for specifying what it is you are selling or reviewing. It could allow for items to be tied to reviews more easily as well as for comparisons of like items to be made and, when combined with hListing, could be used to automate the QA of ecommerce sites (to make sure prices that should be charged for items are charged, etc.).<br />
<br />
Currently the following pages have been created/started:<br />
<br />
* [[hproduct-brainstorming|hProduct Brainstorming]]<br />
* [[hproduct-feedback|hProduct Discussion]]<br />
* [[hproduct-formats|hProduct Formats]]<br />
* [[hproduct-challenges|hProduct Challenge Examples]]</div>AaronGustafsonhttps://microformats.org/wiki/index.php?title=Main_Page&diff=29327Main Page2006-11-17T21:49:31Z<p>AaronGustafson: /* Definition */</p>
<hr />
<div>__NOTOC__<br />
=Microformats Wiki=<br />
<br />
'''Hello!''' Welcome to the microformats wiki. If this is your first visit, please see the [[introduction]] page.<br />
<br />
Please read [[how-to-play]] before making any edits.<br />
<br />
Please read [[process]] before proposing any new microformats.<br />
<br />
__TOC__<br />
<br />
==Getting Started==<br />
<br />
[[what-are-microformats|What are microformats]]? [[what-can-you-do-with-microformats|What can you do with them]]? <br />
<br />
The [http://microformats.org/about/ about page], plus recent [[press]], [[presentations]], [[podcasts]], and [[screencasts]] are also good places for some background information. <br />
<br />
Frequently asked questions about the wiki and microformats in general are answered in the [[faq|FAQ]]. <br />
<br />
Want to learn more in person? Check out [[events|microformats events]].<br />
<br />
==Definition==<br />
<br />
One popular definition from our [http://microformats.org/discuss/ mailing list] (see also: [[mailing-lists]]) is "simple conventions for embedding semantics in HTML to enable decentralized development." More precisely, microformats can be defined as:<br />
:simple conventions<br />
:for embedding semantic markup<br />
::for a specific problem domain<br />
:in human-readable (X)HTML/XML documents, Atom/RSS feeds, and "plain" XML<br />
::that normalize existing content usage patterns<br />
::using brief, descriptive class names <br />
::often based on existing interoperable standards<br />
:to enable decentralized development<br />
::of resources, tools, and services<br />
<br />
Simply put: "Microformats are a codification of convention." -- [http://easy-reader.net Aaron Gustafson]<br />
<br />
"Or do you just use your browser to browse? That's so 20th century." -- [http://diveintomark.org Mark Pilgrim]<br />
<br />
== How to contribute ==<br />
<br />
Do you want to help take microformats to the next level? You can:<br />
<br />
*Check out our open [[to-do|to do list]] for things to help get done.<br />
*Join the [http://microformats.org/discuss mailing lists] and [[irc|IRC Channel]] to learn and help answer questions about microformats.<br />
*[[advocacy|Advocate]] the use of microformats.<br />
*help to [[Main_Page#microformats_wiki_in_other_languages|translate the microformats wiki into other languages]] to make microformats globally accessible.<br />
<br />
== Specifications ==<br />
[[microformats|Microformats]] open standards specifications (see also: [[implementations]])<br />
* [[hcalendar|hCalendar]]<br />
* [[hcard|hCard]]<br />
* [[rel-license]]<br />
* [[rel-nofollow]]<br />
* [[rel-tag]]<br />
* [[vote-links|VoteLinks]]<br />
* [http://gmpg.org/xfn/ XFN] (see also: [[xfn-implementations]])<br />
* [http://gmpg.org/xmdp/ XMDP]<br />
* [[xoxo|XOXO]]<br />
<br />
== Drafts ==<br />
* [[adr|adr]]<br />
* [[geo|geo]]<br />
* [[hatom|hAtom]] {{NewMarker}}<br />
* [[hresume|hResume]] {{NewMarker}}<br />
* [[hreview|hReview]]<br />
* [[rel-directory]]<br />
* [[rel-enclosure]]<br />
* [[rel-home]]<br />
* [[relpayment-research | rel-payment]]<br />
* [[robots-exclusion|Robots Exclusion]]<br />
* [[xfolk|xFolk]]<br />
<br />
== Design Patterns ==<br />
<br />
{{design_patterns}} <!-- this can be edited in /wiki/Template:design_patterns --><br />
<br />
== Exploratory Discussions ==<br />
Research and analysis of real-world [[examples]], existing formats, and brainstorming to motivate the microformat.<br />
*alternates [[alternates-brainstorming|brainstorming]], [[alternates-examples|examples]]<br />
*[[attention]]<br />
* blog description [[blog-description-examples|examples]]<br />
* blog info [[blog-info-examples|examples]]<br />
* blog post [[blog-post-examples|examples]], [[blog-post-formats|formats]], and [[blog-post-brainstorming|brainstorming]] (yielded the [[hatom|hAtom]] draft)<br />
* book [[book-examples|examples]], [[book-formats|formats]], and [[book-brainstorming|brainstorming]]<br />
* chat [[chat-examples|examples]], [[chat-formats|formats]], and [[chat-brainstorming|brainstorming]]<br />
* citation [[citation|effort]], [[citation-examples|examples]], [[citation-formats|formats]], [[citation-brainstorming|brainstorming]], and [[citation-faq|FAQ]]<br />
* comment [[comment-problem|problem]], [[comment-examples|examples]], and [[comments-formats|formats]] (Some stuff needs to be extracted from [[comments-formats]])<br />
* [[currency]]; [[currency-examples]]; [[currency-brainstorming]] {{NewMarker}}<br />
* directions [[directions-examples|examples]] {{NewMarker}}<br />
* directory inclusion [[directory-inclusion-examples|examples]], [[directory-inclusion-formats|formats]]. (see also [[rel-directory]])<br />
* distributed conversation [[distributed-conversation|overview]], [[distributed-conversation-brainstorming|brainstorming]], [[distributed-conversation-examples|examples]], and [[distributed-conversation-formats|formats]]<br />
* forms [[forms-examples|examples]]<br />
* genealogy [[genealogy-formats|examples]]<br />
* group [[group-brainstorming|brainstorming]] and [[group-examples|examples]]<br />
* items [[items-brainstorming|brainstorming]] {{NewMarker}}<br />
* hash [[hash-examples|examples]]<br />
* job listing [[job-listing-examples|examples]] and [[job-listing-brainstorming|brainstorming]]<br />
* last modified [[last-modified-examples|examples]], [[last-modified-formats|formats]], and [[last-modified-brainstorming|brainstorming]]<br />
* hListing [[hlisting-proposal|proposal]], and [[hlisting-feedback|feedback]] {{NewMarker}}<br />
** Also, listing [[listing-examples|examples]], [[listing-formats|formats]], and [[listing-brainstorming|brainstorming]]<br />
* location [[location-formats|formats]]. (see also [[adr]] and [[geo]])<br />
* [[luna]] ([[geo]]-like co-ordinates, for places on The Moon) {{NewMarker}}<br />
* [[mars]] ([[geo]]-like co-ordinates, for places on the planet Mars) {{NewMarker}}<br />
* measures and measurement units [[measure]]<br />
* [[media-info]] ([[media-info-examples|examples]], [[media-info-formats|formats]], [[media-info-brainstorming|brainstorming]]) <br />
* meeting minutes [[meeting-minutes-examples|examples]], [[meeting-minutes-formats|formats]], and [[meeting-minutes-brainstorming|brainstorming]]<br />
* metalink [[metalink-examples|examples]] {{NewMarker}}<br />
* microsummary [[microsummary-brainstorming|brainstorming]] {{NewMarker}}<br />
* [[mfo-examples|MFO examples]]<br />
* music [[music-examples|examples]]<br />
* photo note [[photo-note-examples|examples]]<br />
* recipe [[recipe-examples|examples]], [[recipe-brainstorming]] {{NewMarker}}<br />
* rel-product [[rel-product-brainstorming|brainstorming]]<br />
* requirements testing [[requirements-testing|overview]], and [[requirements-testing-examples|examples]]<br />
* [[rest-examples|REST examples]]<br />
* resume [[resume-brainstorming|brainstorming]], and [[resume-formats|formats]]<br />
* review [[review-examples|examples]], and [[review-formats|formats]] (yielded the [[hreview|hReview]] draft)<br />
* search results [[search-results-example|example]]<br />
* show [[show-brainstorming|brainstorming]]<br />
* showroll [[showroll-brainstorming|brainstorming]]<br />
* [[species]] - for the marking up of the scientific names of living things: [[species-examples]]; [[species-brainstorming]] {{NewMarker}}<br />
* table [[table-examples|examples]]<br />
* tagspeak [[tagspeak-examples|examples]]<br />
* tagcloud [[tagcloud-examples|examples]], and [[tagcloud-brainstorming | brainstorming]]. {{NewMarker}}<br />
* transit table [[transit-table-examples|examples]]<br />
* [[uid]]<br />
* widget [[widget-examples|examples]], and [[widget-brainstorming|brainstorming]]<br />
* [[wiki-formats|wiki formats]]<br />
* work of art [[work-of-art|overview]], [[workofart-examples|examples]], [[workofart-formats|formats]], and [[workofart-brainstorming|brainstorming]] {{NewMarker}}<br />
*[[xmdp-brainstorming|XMDP brainstorming]] (see also [[xmdp-faq]])<br />
<br />
== Examples ==<br />
* [[examples]]<br />
* [[zen-garden]]<br />
<br />
<br />
== Tools & Test Cases & Additional Research ==<br />
<br />
The first place to look for examples, code, and test cases is in the pages for each individual microformat. There are only a few cross-cutting tools and services that need to process more than one microformat. This section is intended for editors, parsers, validators, test cases, and other information relevant across multiple microformats.<br />
<br />
*[[accessibility]]<br />
*[[faqs-for-rdf]]<br />
*[[icalendar-implementations]]<br />
*[[parsing-microformats]]<br />
*[[selected-test-cases-from-the-web]]<br />
*[http://hg.microformats.org/ Source code repository] -- [[mercurial-quick-start|HowTo: Download code from the repository]]<br />
*[[vcard-implementations]], [[vcard-errata]]<br />
*[[why-are-content-standards-hard]]<br />
<br />
== shared work areas ==<br />
* [[buttons]]<br />
* [[spread-microformats]] {{NewMarker}}<br />
* [[demo]] - a page with links for quickly demonstrating microformats working in practice.<br />
* [[events]] {{NewMarker}}<br />
* [[to-do]]<br />
* [[user-interface]]<br />
* [[marked-for-deletion]]<br />
<br />
== microformats wiki in other languages ==<br />
<br />
You may read and edit microformats articles in many other languages:<br />
<br />
* languages with over 50 articles<br />
** [[Main_Page-fr|Français (French)]] {{NewMarker-fr}}<br />
* languages with over 10 articles<br />
** [[Main_Page-pt-br| Português (Brazilian Portuguese)]] {{NewMarker-pt-br}}<br />
* languages with over 2 articles<br />
** [[Main_Page-ja|日本語 (Japanese)]]<br />
** [[Main_Page-es|Español (Spanish)]]<br />
* languages with 2 articles<br />
** [[Main_Page-de|Deutsch (German)]]<br />
<br />
==== microformats translations elsewhere ====<br />
These are offsite pages/sites with translations about microformats. If you are working on one of these, please consider translating the main microformats website!<br />
* [http://mikroformate.pbwiki.com/ Deutsch (German) mikroformate.pbwiki.com] {{NewMarker}}<br />
<br />
=== Start a microformats wiki in another language ===<br />
<br />
Don't see the language you want? Help translate the microformats wiki into another language!<br />
<br />
We're still figuring this out. <br />
<br />
For now, see the [http://en.wikipedia.org/wiki/Wikipedia:Multilingual_coordination Wikipedia page on Multilingual coordination], and [http://meta.wikimedia.org/wiki/How_to_start_a_new_Wikipedia How to start a new Wikipedia] for some good general tips, advice, and community conventions.<br />
<br />
You may want to start with the list of [[stable-pages]], which are pages that are relatively stable, and have only minimal/editorial changes, which makes them much easier to keep in sync with the English versions, by using the [[Special:Watchlist|my watchlist]] feature (use it to watch the pages you've translated for changes).<br />
<br />
Page naming: for the translated version of a page, use the same name for the page, and simply add the RFC 3066 language identifier code as a dash suffix. E.g. for the French version, [[Main_Page]] becomes [[Main_Page-fr]], and [[how-to-play]] becomes [[how-to-play-fr]].<br />
<br />
==== more languages folks want to see ====<br />
<br />
* Chinese: 微格式 (Microformats) (see [http://msittig.blogspot.com/2005/11/since-i-translated-schedule-of.html source of translation])</div>AaronGustafsonhttps://microformats.org/wiki/index.php?title=Main_Page&diff=29326Main Page2006-11-17T21:49:07Z<p>AaronGustafson: added quote from The Ajax Experience 2006: Boston</p>
<hr />
<div>__NOTOC__<br />
=Microformats Wiki=<br />
<br />
'''Hello!''' Welcome to the microformats wiki. If this is your first visit, please see the [[introduction]] page.<br />
<br />
Please read [[how-to-play]] before making any edits.<br />
<br />
Please read [[process]] before proposing any new microformats.<br />
<br />
__TOC__<br />
<br />
==Getting Started==<br />
<br />
[[what-are-microformats|What are microformats]]? [[what-can-you-do-with-microformats|What can you do with them]]? <br />
<br />
The [http://microformats.org/about/ about page], plus recent [[press]], [[presentations]], [[podcasts]], and [[screencasts]] are also good places for some background information. <br />
<br />
Frequently asked questions about the wiki and microformats in general are answered in the [[faq|FAQ]]. <br />
<br />
Want to learn more in person? Check out [[events|microformats events]].<br />
<br />
==Definition==<br />
<br />
One popular definition from our [http://microformats.org/discuss/ mailing list] (see also: [[mailing-lists]]) is "simple conventions for embedding semantics in HTML to enable decentralized development." More precisely, microformats can be defined as:<br />
:simple conventions<br />
:for embedding semantic markup<br />
::for a specific problem domain<br />
:in human-readable (X)HTML/XML documents, Atom/RSS feeds, and "plain" XML<br />
::that normalize existing content usage patterns<br />
::using brief, descriptive class names <br />
::often based on existing interoperable standards<br />
:to enable decentralized development<br />
::of resources, tools, and services<br />
<br />
Simply put: "Microformats are a codification of convention." -- [http://easy-reader.net Aaron Gustafson]<br />
<br />
<hr /><br />
<br />
"Or do you just use your browser to browse? That's so 20th century." -- [http://diveintomark.org Mark Pilgrim]<br />
<br />
== How to contribute ==<br />
<br />
Do you want to help take microformats to the next level? You can:<br />
<br />
*Check out our open [[to-do|to do list]] for things to help get done.<br />
*Join the [http://microformats.org/discuss mailing lists] and [[irc|IRC Channel]] to learn and help answer questions about microformats.<br />
*[[advocacy|Advocate]] the use of microformats.<br />
*help to [[Main_Page#microformats_wiki_in_other_languages|translate the microformats wiki into other languages]] to make microformats globally accessible.<br />
<br />
== Specifications ==<br />
[[microformats|Microformats]] open standards specifications (see also: [[implementations]])<br />
* [[hcalendar|hCalendar]]<br />
* [[hcard|hCard]]<br />
* [[rel-license]]<br />
* [[rel-nofollow]]<br />
* [[rel-tag]]<br />
* [[vote-links|VoteLinks]]<br />
* [http://gmpg.org/xfn/ XFN] (see also: [[xfn-implementations]])<br />
* [http://gmpg.org/xmdp/ XMDP]<br />
* [[xoxo|XOXO]]<br />
<br />
== Drafts ==<br />
* [[adr|adr]]<br />
* [[geo|geo]]<br />
* [[hatom|hAtom]] {{NewMarker}}<br />
* [[hresume|hResume]] {{NewMarker}}<br />
* [[hreview|hReview]]<br />
* [[rel-directory]]<br />
* [[rel-enclosure]]<br />
* [[rel-home]]<br />
* [[relpayment-research | rel-payment]]<br />
* [[robots-exclusion|Robots Exclusion]]<br />
* [[xfolk|xFolk]]<br />
<br />
== Design Patterns ==<br />
<br />
{{design_patterns}} <!-- this can be edited in /wiki/Template:design_patterns --><br />
<br />
== Exploratory Discussions ==<br />
Research and analysis of real-world [[examples]], existing formats, and brainstorming to motivate the microformat.<br />
*alternates [[alternates-brainstorming|brainstorming]], [[alternates-examples|examples]]<br />
*[[attention]]<br />
* blog description [[blog-description-examples|examples]]<br />
* blog info [[blog-info-examples|examples]]<br />
* blog post [[blog-post-examples|examples]], [[blog-post-formats|formats]], and [[blog-post-brainstorming|brainstorming]] (yielded the [[hatom|hAtom]] draft)<br />
* book [[book-examples|examples]], [[book-formats|formats]], and [[book-brainstorming|brainstorming]]<br />
* chat [[chat-examples|examples]], [[chat-formats|formats]], and [[chat-brainstorming|brainstorming]]<br />
* citation [[citation|effort]], [[citation-examples|examples]], [[citation-formats|formats]], [[citation-brainstorming|brainstorming]], and [[citation-faq|FAQ]]<br />
* comment [[comment-problem|problem]], [[comment-examples|examples]], and [[comments-formats|formats]] (Some stuff needs to be extracted from [[comments-formats]])<br />
* [[currency]]; [[currency-examples]]; [[currency-brainstorming]] {{NewMarker}}<br />
* directions [[directions-examples|examples]] {{NewMarker}}<br />
* directory inclusion [[directory-inclusion-examples|examples]], [[directory-inclusion-formats|formats]]. (see also [[rel-directory]])<br />
* distributed conversation [[distributed-conversation|overview]], [[distributed-conversation-brainstorming|brainstorming]], [[distributed-conversation-examples|examples]], and [[distributed-conversation-formats|formats]]<br />
* forms [[forms-examples|examples]]<br />
* genealogy [[genealogy-formats|examples]]<br />
* group [[group-brainstorming|brainstorming]] and [[group-examples|examples]]<br />
* items [[items-brainstorming|brainstorming]] {{NewMarker}}<br />
* hash [[hash-examples|examples]]<br />
* job listing [[job-listing-examples|examples]] and [[job-listing-brainstorming|brainstorming]]<br />
* last modified [[last-modified-examples|examples]], [[last-modified-formats|formats]], and [[last-modified-brainstorming|brainstorming]]<br />
* hListing [[hlisting-proposal|proposal]], and [[hlisting-feedback|feedback]] {{NewMarker}}<br />
** Also, listing [[listing-examples|examples]], [[listing-formats|formats]], and [[listing-brainstorming|brainstorming]]<br />
* location [[location-formats|formats]]. (see also [[adr]] and [[geo]])<br />
* [[luna]] ([[geo]]-like co-ordinates, for places on The Moon) {{NewMarker}}<br />
* [[mars]] ([[geo]]-like co-ordinates, for places on the planet Mars) {{NewMarker}}<br />
* measures and measurement units [[measure]]<br />
* [[media-info]] ([[media-info-examples|examples]], [[media-info-formats|formats]], [[media-info-brainstorming|brainstorming]]) <br />
* meeting minutes [[meeting-minutes-examples|examples]], [[meeting-minutes-formats|formats]], and [[meeting-minutes-brainstorming|brainstorming]]<br />
* metalink [[metalink-examples|examples]] {{NewMarker}}<br />
* microsummary [[microsummary-brainstorming|brainstorming]] {{NewMarker}}<br />
* [[mfo-examples|MFO examples]]<br />
* music [[music-examples|examples]]<br />
* photo note [[photo-note-examples|examples]]<br />
* recipe [[recipe-examples|examples]], [[recipe-brainstorming]] {{NewMarker}}<br />
* rel-product [[rel-product-brainstorming|brainstorming]]<br />
* requirements testing [[requirements-testing|overview]], and [[requirements-testing-examples|examples]]<br />
* [[rest-examples|REST examples]]<br />
* resume [[resume-brainstorming|brainstorming]], and [[resume-formats|formats]]<br />
* review [[review-examples|examples]], and [[review-formats|formats]] (yielded the [[hreview|hReview]] draft)<br />
* search results [[search-results-example|example]]<br />
* show [[show-brainstorming|brainstorming]]<br />
* showroll [[showroll-brainstorming|brainstorming]]<br />
* [[species]] - for the marking up of the scientific names of living things: [[species-examples]]; [[species-brainstorming]] {{NewMarker}}<br />
* table [[table-examples|examples]]<br />
* tagspeak [[tagspeak-examples|examples]]<br />
* tagcloud [[tagcloud-examples|examples]], and [[tagcloud-brainstorming | brainstorming]]. {{NewMarker}}<br />
* transit table [[transit-table-examples|examples]]<br />
* [[uid]]<br />
* widget [[widget-examples|examples]], and [[widget-brainstorming|brainstorming]]<br />
* [[wiki-formats|wiki formats]]<br />
* work of art [[work-of-art|overview]], [[workofart-examples|examples]], [[workofart-formats|formats]], and [[workofart-brainstorming|brainstorming]] {{NewMarker}}<br />
*[[xmdp-brainstorming|XMDP brainstorming]] (see also [[xmdp-faq]])<br />
<br />
== Examples ==<br />
* [[examples]]<br />
* [[zen-garden]]<br />
<br />
<br />
== Tools & Test Cases & Additional Research ==<br />
<br />
The first place to look for examples, code, and test cases is in the pages for each individual microformat. There are only a few cross-cutting tools and services that need to process more than one microformat. This section is intended for editors, parsers, validators, test cases, and other information relevant across multiple microformats.<br />
<br />
*[[accessibility]]<br />
*[[faqs-for-rdf]]<br />
*[[icalendar-implementations]]<br />
*[[parsing-microformats]]<br />
*[[selected-test-cases-from-the-web]]<br />
*[http://hg.microformats.org/ Source code repository] -- [[mercurial-quick-start|HowTo: Download code from the repository]]<br />
*[[vcard-implementations]], [[vcard-errata]]<br />
*[[why-are-content-standards-hard]]<br />
<br />
== shared work areas ==<br />
* [[buttons]]<br />
* [[spread-microformats]] {{NewMarker}}<br />
* [[demo]] - a page with links for quickly demonstrating microformats working in practice.<br />
* [[events]] {{NewMarker}}<br />
* [[to-do]]<br />
* [[user-interface]]<br />
* [[marked-for-deletion]]<br />
<br />
== microformats wiki in other languages ==<br />
<br />
You may read and edit microformats articles in many other languages:<br />
<br />
* languages with over 50 articles<br />
** [[Main_Page-fr|Français (French)]] {{NewMarker-fr}}<br />
* languages with over 10 articles<br />
** [[Main_Page-pt-br| Português (Brazilian Portuguese)]] {{NewMarker-pt-br}}<br />
* languages with over 2 articles<br />
** [[Main_Page-ja|日本語 (Japanese)]]<br />
** [[Main_Page-es|Español (Spanish)]]<br />
* languages with 2 articles<br />
** [[Main_Page-de|Deutsch (German)]]<br />
<br />
==== microformats translations elsewhere ====<br />
These are offsite pages/sites with translations about microformats. If you are working on one of these, please consider translating the main microformats website!<br />
* [http://mikroformate.pbwiki.com/ Deutsch (German) mikroformate.pbwiki.com] {{NewMarker}}<br />
<br />
=== Start a microformats wiki in another language ===<br />
<br />
Don't see the language you want? Help translate the microformats wiki into another language!<br />
<br />
We're still figuring this out. <br />
<br />
For now, see the [http://en.wikipedia.org/wiki/Wikipedia:Multilingual_coordination Wikipedia page on Multilingual coordination], and [http://meta.wikimedia.org/wiki/How_to_start_a_new_Wikipedia How to start a new Wikipedia] for some good general tips, advice, and community conventions.<br />
<br />
You may want to start with the list of [[stable-pages]], which are pages that are relatively stable, and have only minimal/editorial changes, which makes them much easier to keep in sync with the English versions, by using the [[Special:Watchlist|my watchlist]] feature (use it to watch the pages you've translated for changes).<br />
<br />
Page naming: for the translated version of a page, use the same name for the page, and simply add the RFC 3066 language identifier code as a dash suffix. E.g. for the French version, [[Main_Page]] becomes [[Main_Page-fr]], and [[how-to-play]] becomes [[how-to-play-fr]].<br />
<br />
==== more languages folks want to see ====<br />
<br />
* Chinese: 微格式 (Microformats) (see [http://msittig.blogspot.com/2005/11/since-i-translated-schedule-of.html source of translation])</div>AaronGustafsonhttps://microformats.org/wiki/index.php?title=product-brainstorming&diff=10304product-brainstorming2006-11-17T21:45:46Z<p>AaronGustafson: Initial revision</p>
<hr />
<div><h1>hProduct Brainstorming</h1><br />
<br />
hProduct is a format suitable for embedding in (X)HTML, Atom, RSS, and arbitrary XML. hProduct would be related to several [[microformats]] (including [[hlisting|hListing]] and [[hreview|hReview]]) and would be an open standard.<br />
<br />
__TOC__<br />
<br />
===Authors===<br />
<br />
* Aaron Gustafson, [http://easy-designs.net/ Easy! Designs]<br />
* Craig Cook, [http://focalcurve.com/ Focal Curve]<br />
<br />
==Introduction==<br />
<br />
The web is a thriving marketplace with a plethora of vendors scattered across the globe. Sifting through this mass of information is difficult when it is unstructured. The hProduct microformat will bring order and structure to the chaos, making it easy for people to list the products they offer and easy for Web Services to consume that product information for analysis and syndication. This proposal follows the common practices of ecommerce sites such as Amazon, Craigslist and AutoByTel.<br />
<br />
hProduct would be compatible and combinable with [[hlisting|hListing]] and [[hreview|hReview]].<br />
<br />
=== Scope ===<br />
<br />
Giving details about a particular product is sometimes very complex as parameters are differnet for books and CDs than they are for iPods or cars. It should be very easy to mark up an item using hProduct and the syntax should be simple yet flexible enough for more advanced applications.<br />
<br />
=== Out of Scope ===<br />
<br />
This microformat does not intend to replicate any of the content proposed within [[hListing]] and would defer all money/transactional matters to that microformat.<br />
<br />
== Format ==<br />
<br />
=== In General ===<br />
<br />
The hProduct format is based on a set of fields common to numerous ecommerce sites and formats in use today on the web.<br />
<br />
=== Schema ===<br />
<br />
An hListing schema should consist of the following: <br />
<br />
* hProduct<br />
** ''version''. optional. text. <br />
** '''name'''. required.<br />
** ''image''. optional. <code>IMG</code> element or <code>rel='image'</code>. could be further refined as image type ( ''thumb'' || ''full'', ''photo'' || ''illo'')<br />
** ''description''. optional. could be denoted as 'summary' or 'extended'<br />
** ''brand''. text | [[hcard|hCard]]<br />
** ''uri''. optional. URI to manufacturer product page.<br />
** ''msrp''. optional. retail price.<br />
** ''p-v''. optional. opens up possibilities for custom property-value pairs in more complex examples.<br />
*** '''property'''. required.<br />
*** '''value'''. required. (label may be implied)<br />
<br />
==Field Details==<br />
<br />
The fields of the hListing schema represent the following:<br />
<br />
'''version''':: This optional field permits hProduct publishers to specify a particular version of hProduct that their content uses. By omitting this field, the publisher is stating that implementations may interpret the hListings according to any version of the hProduct specification. The value for this proposal as of 17-Nov-2006 is "0.0," since it has no official standing yet.<br />
<br />
=== Content ===<br />
<br />
'''name''':: This required field contains the name of the item<br />
<br />
'''image''':: This optional field contains either an image (as an <code>IMG</code> element) or a link to an image (as an <code>A</code> with <code>rel="image"</code>). The image can be categorized by additional terms such as 'thumb' (for thumbnail), 'full' (for full size image), 'photo' (for a photograph), 'illo' (for an illustration).<br />
<br />
'''description''':: This optional field contains the full text representing the written description of the item. The field MAY include valid XHTML markup (e.g. paragraphs). User agents SHOULD preserve any markup. Description could be either a 'summary' or an 'extended' description.<br />
<br />
'''brand''':: This optional field can contain either plan text or an [[hcard||hCard]] for the organization responsible for the item. Examples would include Sony, Friends of ED, O'Reilly, etc.<br />
<br />
'''uri''':: This optional field is a URI for the product at its brand website. It is not to be confused with the [[hlisting|hListing]] 'permalink'.<br />
<br />
'''msrp''':: This optional field is the manufacturer's suggested retail price for the item. It follows the [[currency]] format.<br />
<br />
=== Properties & Values ===<br />
<br />
We understand the need for providing extensibility to this microformat and have built in a mechanism for doing that using properties and values (p-v). There will be several ways of accomplishing property-value associations which will be described below, with several possible shorthands.<br />
<br />
'''p-v''':: This optional field initiates a property-value group.<br />
<br />
<ul><br />
<li>'''property''':: This required field denotes the property label.<br />
<br />
<p>Anticipated 'property' types include</p><br />
<br />
* 'recurring' for intervals of time (associated with an 'msrp')<br />
* 'artist'<br />
* 'author'<br />
* 'released' - [[hcal|hCal]] event for date of release<br />
* 'upc'<br />
* 'isbn' - international standard book number<br />
* 'sku' - stock keeping unit<br />
* 'sn' - serial number<br />
* 'vin' - vehicle identification number<br />
* 'batch'<br />
<br />
</li><br />
<br />
<li>'''value''':: This required field denotes the property value. The value may be implied in certain shorthands.</li><br />
<br />
</ul><br />
<br />
===Cross-cutting issues===<br />
<br />
''Internationalization:'' Though there are many English-language tokens, they are only used as invisible class-names; user-visible listing information can be completely localized. n.b. that (X)HTML <code>LANG</code> attribute rules still apply as usual, for multilingual aggregators of hProduct.<br />
<br />
The following field names have been reused from the [[hcard|hCard]] and [[hcalendar|hCalendar]] microformats: <code>version, description</code>. In addition, brands described by hCards MAY contain any hCard field.<br />
<br />
==Examples (Preliminary)==<br />
<br />
=== Simple Product ===<br />
<br />
The Pick of Destiny<br />
by Tenacious D<br />
The Pick of Destiny is the highly anticipated soundtrack to the upcoming <br />
New Line Cinema comedy, Tenacious D in the Pick of Destiny. An epic <br />
musical adventure, the film follows Tenacious D (Jack Black and Kyle Gass)<br />
on their quest to obtain the Pick and become The Greatest Band on Earth.<br />
Released: November 14, 2006<br />
Label: Sony<br />
UPC: 82796948912<br />
<br />
<pre><nowiki><div class="hproduct"><br />
<h4 class="name">The Pick of Destiny</h4><br />
<h5 class="p-v">by <span class="property artist">Tenacious D</span></h5><br />
<p class="description summary">The Pick of Destiny is the highly <br />
anticipated soundtrack to the upcoming New Line Cinema comedy, Tenacious<br />
D in the Pick of Destiny. An epic musical adventure, the film follows <br />
Tenacious D (Jack Black and Kyle Gass) on their quest to obtain the Pick<br />
and become The Greatest Band on Earth.</p><br />
<ul><br />
<li class="p-v"><span class="property">Released</span>:<br />
<span class="value"><abbr title="2006-11-14T12:00:01-05:00">November<br />
14, 2006</abbr></span></li><br />
<li>Label: <span class="brand">Sony</span></li><br />
<li class="p-v"><span class="property">UPC</span>:<br />
<span class="value">82796948912</span></li><br />
</ul><br />
</div></nowiki></pre><br />
<br />
=== Challenge Problems ===<br />
<br />
See [[hproduct-challenges|hProduct Challenge Problems]] for some hypothetical examples that illustrate corners of the specification.<br />
<br />
==Changes==<br />
<br />
mid Nov 2006: initial concepting.<br />
<br />
== Discussions ==<br />
<br />
* Feedback is encouraged on the [[hproduct-feedback|hProduct Feedback]] page.<br />
* See also [http://www.technorati.com/cosmos/referer.html blogs discussing this page].<br />
<br />
== Acknowledgements ==<br />
<br />
Much of this document is based on the fine work of the folks behind [[hlisting|hListing]] and their proposal.</div>AaronGustafson