Microformats Wiki - User contributions [en]

buttons

2010-11-21T18:19:11Z

Kwilson: Images no longer exist

<h1>Microformats Buttons</h1>

There have been requests for buttons for various microformats. Either badges, or buttons that do something with the specific microformats. This page keeps a list of buttons, and requests as well. - [http://tantek.com/log/ Tantek]

==Licensing==

If you add links to buttons you have designed, '''please also include a statement''' that you do one of the following:
*release them into the public domain
*hold copyright, but release all rights as to it use
*license them under a specified free license, e.g. consider using a [http://creativecommons.org/ Creative Commons] license, such as [http://creativecommons.org/licenses/by/3.0 cc-by-3.0].

Thank you.

* Images below hosted at boogdesign.com are available under [http://creativecommons.org/licenses/by/2.0/ CC Attribution 2.0 License], see [http://www.boogdesign.com/buttons.html my buttons page] for the Photoshop files if you need them. - Rob Crowther

* Images below hosted at rbach.priv.at are available under [http://creativecommons.org/licenses/by/3.0 cc-by-3.0 license]. - [[User:RobertBachmann|Robert Bachmann]]

* Images below hosted at hauntedpalace.net and flickr.com/photos.hauntedpalace (POSH logos and palette cheatsheet) are available under the [http://creativecommons.org/licenses/by-sa/3.0/ Creative Commons Attribution-ShareAlike 3.0 license]. — [[:User:CarlaHufstedler|Carla Hufstedler]]

__TOC__

== Buttons ==

=== Microformat Button ===
I've made a button for microformats. Since there are so many microformats and with more to come, just indicating support/ use of might be a good generic approach. The image is free to use. Please copy it to your own hosting account and not link to it.

http://www.crowley.nl/images/microformats.png

I already have a "I use
http://www.crowley.nl/images/microformats.png" on my blog: http://doncrowley.blogspot.com/

- Don Crowley

* http://www.boogdesign.com/images/buttons/microformat.png
* http://www.boogdesign.com/images/buttons/microformat_enabled.png
* http://www.boogdesign.com/images/buttons/emf_green.png
* http://www.boogdesign.com/images/buttons/mfe_green.png
* http://www.boogdesign.com/images/buttons/mwmf_green.png
* http://www.boogdesign.com/images/buttons/smf_green.png
* http://www.boogdesign.com/images/buttons/emf_white.png
* http://www.boogdesign.com/images/buttons/mfe_white.png
* http://www.boogdesign.com/images/buttons/mwmf_white.png
* http://www.boogdesign.com/images/buttons/smf_white.png

=== [[hcalendar|hCalendar]] ===
* http://rbach.priv.at/2006/buttons/hcal.png
* http://www.boogdesign.com/images/buttons/microformat_hcalendar.png
* CSS-powered button from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]:

<span class="badge" style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0; border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none; text-align: center;"><span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; margin-right: 0.1em;">›››</span> hCalendar</span>

Code (white space added for readability):

<pre><nowiki>
<span class="badge"
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;
text-align: center;">
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em;
margin-right: 0.1em;">
&#8250;&#8250;&#8250;
</span>
hCalendar
</span>
</nowiki></pre>

=== [[hcard|hCard]] ===
* http://www.crowley.nl/images/hcard.png (mirror: http://www.davidjanes.com/images/mf_hcard.png)
* http://rbach.priv.at/2006/buttons/hcard.png
* http://www.boogdesign.com/images/buttons/microformat_hcard.png
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]

=== [[rel-license]] ===
* http://rbach.priv.at/2006/buttons/license.png
* http://www.boogdesign.com/images/buttons/microformat_rellicense.png

=== [[rel-nofollow]] ===
* http://rbach.priv.at/2006/buttons/nofollow.png
* http://www.boogdesign.com/images/buttons/microformat_relnofollow.png

=== [[rel-tag]] ===
* http://rbach.priv.at/2006/buttons/rel-tag.png
* http://rbach.priv.at/2006/buttons/tag.png
* http://www.boogdesign.com/images/buttons/microformat_reltag.png

=== [[vote-links|VoteLinks]] ===
* http://rbach.priv.at/2006/buttons/votelinks.png
* http://www.boogdesign.com/images/buttons/microformat_votelinks.png

=== [http://gmpg.org/xfn/ XFN] ===
* http://rbach.priv.at/2006/buttons/xfn.png
* http://www.boogdesign.com/images/buttons/microformat_xfn.png

=== [http://gmpg.org/xmdp/ XMDP] ===
* http://rbach.priv.at/2006/buttons/xmdp.png
* http://www.boogdesign.com/images/buttons/microformat_xmdp.png

=== [[xoxo|XOXO]] ===
* http://rbach.priv.at/2006/buttons/xoxo.png
* http://www.boogdesign.com/images/buttons/microformat_xoxo.png

===CSS Styles for microformats===
I'm not sure wether this can be under buttons, but I don't know where else to put it. This is a stylesheet containing styles for most microformats. And, it's automatic. I release it under the cc by-sa. Please note that I am new to microformats, and if you can improve this, please do. [[User:Mac Lover|Mac Lover]] 13:25, 13 Apr 2007 (PDT)

[http://creativecommons.org/licenses/by-sa/3.0/us/ License]
[http://alyosha.bendebury.net/microformat-css.zip Zip]

== CSS Buttons ==
As there are new microformats happening all the time I set about making a CSS button that looks like the ''handmade'' versions. This is the result.

The file with the CSS and the two images required (logo and background) can be downloaded from [http://thebeastlybeasts.co.uk/css/microformat_css.zip The Beastly Beasts].

Extract the microformat directory and the files in it to /css so that you have:<br />
/css/microformat/microformat.css<br />
/css/microformat/background.png<br />
/css/microformat/logo.png

If your paths are different a bit of editing is needed.

The XHTML to create a button is:
<pre><tag class="microformat-button microformat-type"><span></span>microformat-type</tag></pre>

For example, an hCard button with a link to the spec:
<pre><a href="http://microformats.org/wiki/hcard" title="Microformat enabled" class="microformat-button hcard"><span></span>hcard</a></pre>

== Buttons for draft formats ==

These may be subject to change if the names of the formats change when they are released.

=== [[adr]] ===
* http://rbach.priv.at/2006/buttons/adr.png

=== [[geo]] ===
* http://rbach.priv.at/2006/buttons/geo.png

=== [[hatom|hAtom]] ===
* http://rbach.priv.at/2006/buttons/hatom.png

=== [[hresume|hResume]] ===
* http://rbach.priv.at/2006/buttons/hresume.png
* http://www.boogdesign.com/images/buttons/microformat_hresume.png

=== [[hreview|hReview]] ===
* http://rbach.priv.at/2006/buttons/hreview.png

=== [[rel-directory]] ===
* http://rbach.priv.at/2006/buttons/directory.png

=== [[rel-enclosure]] ===
* http://rbach.priv.at/2006/buttons/enclosure.png

=== [[rel-home]] ===
* http://rbach.priv.at/2006/buttons/rel-home.png
* http://rbach.priv.at/2006/buttons/home.png

=== [[relpayment-research|rel-payment]] ===
* http://rbach.priv.at/2006/buttons/payment.png

=== [[robots-exclusion|Robots Exclusion]] ===
* http://rbach.priv.at/2006/buttons/robots.png

=== [[xfolk|xFolk]] ===
* http://rbach.priv.at/2006/buttons/xfolk.png

== Make your own buttons ==
=== Style 1 ===

Example: http://www.crowley.nl/images/hcard.png

Use the [http://kalsey.com/tools/buttonmaker/ Kalsey Button Maker] with the following settings:
* Outer border: #666666
* Inner border: #ffffff
* Bar position: 25 pixels from the left
* Left box text: >>>
* Left box background: #000000
* Left box text color: #ffffff
* Left box text start: 7 pixels from the left
* Right box text: (The name of the microformat goes here)
* Right box background: #31757b
* Right box text color: #ffffff
* Right box text start: 3 pixels from the bar

=== Style 2 ===

Example: http://rbach.priv.at/2006/buttons/hcal.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://rbach.priv.at/2006/buttons/blank.png)
# Type:
<pre>convert blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 28,10 'button label'"
output.png
</pre>

= Microformats Logos =

Rohit is a very poor CSS hacker, but gave it his best shot. He also [http://labs.commerce.net/~rohit/µf-logo.html rendered it at 72 and 18 points.]

http://microformats.org/img/logo.gif

<div style="position: relative; top:-46px; left:180px">
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div>

<div style="background-color:#85BC07; width:22px; height: 22px; left:11.5px; top:6px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white; -moz-border-radius:4pt;"></div>

<div style="background-color:#AEE219; width:14px; height: 14px; left:22.5px; top:4px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white;-moz-border-radius:2pt;"></div>

<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px">
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span>
</div>
</div>

== Palette ==

<div style="background-color:#AEE219; width:8em; height: 4ex;">#AEE219</div>

<div style="background-color:#85BC07; width:8em; height: 4ex;">#85BC07</div>

<div style="background-color:#679A06; width:8em; height: 4ex;">#679A06</div>

<br />
I created a cheatsheet using [http://bighugelabs.com/flickr/ Big Huge Lab]'s Badgemaker:<br />
[http://flickr.com/photos/hauntedpalace/1296783076/ http://farm2.static.flickr.com/1231/1296783076_1d6fe8a1f8_m_d.jpg]
--[[User:CarlaHufstedler|Carla]] 12:11, 1 Sep 2007 (PDT)

=Wiki buttons=
For use on this wiki.
*{{NewMarker}} - <nowiki>{{NewMarker}}</nowiki>
*{{SuccessMarker}} - <nowiki>{{SuccessMarker}}</nowiki>
*{{UpdateMarker}} - <nowiki>{{UpdateMarker}}</nowiki>

= Requests =

* Logos for all microformats

* When someone has time, these should be repeated on the page for each respective format.

==See also==

{{branding-see-also}}
* <span class="POSH logos">[[posh#Spread_POSH|POSH logos and buttons]]</span>

buttons

2009-05-10T04:42:22Z

Kwilson: URLs updated again (cleaning house)

<h1>Microformats Buttons</h1>

There have been requests for buttons for various microformats. Either badges, or buttons that do something with the specific microformats. This page keeps a list of buttons, and requests as well. - [http://tantek.com/log/ Tantek]

Added hosted buttons for all the microformats, including the draft ones, as well as instructions on how to make your own buttons. (14 May 2006) - [http://www.wackomenace.co.uk/ Ruben]

==Licensing==

If you add links to buttons you have designed, '''please also include a statement''' that you do one of the following:
*release them into the public domain
*hold copyright, but release all rights as to it use
*license them under a specified free license, e.g. consider using a [http://creativecommons.org/ Creative Commons] license, such as [http://creativecommons.org/licenses/by/3.0 cc-by-3.0].

Thank you.

* Images below hosted at boogdesign.com are available under [http://creativecommons.org/licenses/by/2.0/ CC Attribution 2.0 License], see [http://www.boogdesign.com/buttons.html my buttons page] for the Photoshop files if you need them. - Rob Crowther

* Images below hosted at rbach.priv.at are available under [http://creativecommons.org/licenses/by/3.0 cc-by-3.0 license]. - [[User:RobertBachmann|Robert Bachmann]]

* Images below hosted at corvidworks.com are available under the [http://creativecommons.org/licenses/by/3.0/ Creative Commons Attribution 3.0 license]. -- [[User:Kwilson|Kenn Wilson]]

* Images below hosted at hauntedpalace.net and flickr.com/photos.hauntedpalace (POSH logos and palette cheatsheet) are available under the [http://creativecommons.org/licenses/by-sa/3.0/ Creative Commons Attribution-ShareAlike 3.0 license]. — [[:User:CarlaHufstedler|Carla Hufstedler]]

__TOC__

== Buttons ==

=== Microformat Button ===
I've made a button for microformats. Since there are so many microformats and with more to come, just indicating support/ use of might be a good generic approach. The image is free to use. Please copy it to your own hosting account and not link to it.

http://www.crowley.nl/images/microformats.png

I already have a "I use
http://www.crowley.nl/images/microformats.png" on my blog: http://doncrowley.blogspot.com/

- Don Crowley

* http://www.boogdesign.com/images/buttons/microformat.png
* http://www.boogdesign.com/images/buttons/microformat_enabled.png
* http://www.boogdesign.com/images/buttons/emf_green.png
* http://www.boogdesign.com/images/buttons/mfe_green.png
* http://www.boogdesign.com/images/buttons/mwmf_green.png
* http://www.boogdesign.com/images/buttons/smf_green.png
* http://www.boogdesign.com/images/buttons/emf_white.png
* http://www.boogdesign.com/images/buttons/mfe_white.png
* http://www.boogdesign.com/images/buttons/mwmf_white.png
* http://www.boogdesign.com/images/buttons/smf_white.png

=== [[hcalendar|hCalendar]] ===
* http://rbach.priv.at/2006/buttons/hcal.png
* http://www.boogdesign.com/images/buttons/microformat_hcalendar.png
* CSS-powered button from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]:

<span class="badge" style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0; border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none; text-align: center;"><span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; margin-right: 0.1em;">›››</span> hCalendar</span>

Code (white space added for readability):

<pre><nowiki>
<span class="badge"
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;
text-align: center;">
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em;
margin-right: 0.1em;">
&#8250;&#8250;&#8250;
</span>
hCalendar
</span>
</nowiki></pre>

=== [[hcard|hCard]] ===
* http://www.crowley.nl/images/hcard.png (mirror: http://www.davidjanes.com/images/mf_hcard.png)
* http://rbach.priv.at/2006/buttons/hcard.png
* http://www.boogdesign.com/images/buttons/microformat_hcard.png
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]

=== [[rel-license]] ===
* http://rbach.priv.at/2006/buttons/license.png
* http://www.boogdesign.com/images/buttons/microformat_rellicense.png

=== [[rel-nofollow]] ===
* http://rbach.priv.at/2006/buttons/nofollow.png
* http://www.boogdesign.com/images/buttons/microformat_relnofollow.png

=== [[rel-tag]] ===
* http://rbach.priv.at/2006/buttons/rel-tag.png
* http://rbach.priv.at/2006/buttons/tag.png
* http://www.boogdesign.com/images/buttons/microformat_reltag.png

=== [[vote-links|VoteLinks]] ===
* http://rbach.priv.at/2006/buttons/votelinks.png
* http://www.boogdesign.com/images/buttons/microformat_votelinks.png

=== [http://gmpg.org/xfn/ XFN] ===
* http://rbach.priv.at/2006/buttons/xfn.png
* http://www.boogdesign.com/images/buttons/microformat_xfn.png

=== [http://gmpg.org/xmdp/ XMDP] ===
* http://rbach.priv.at/2006/buttons/xmdp.png
* http://www.boogdesign.com/images/buttons/microformat_xmdp.png

=== [[xoxo|XOXO]] ===
* http://rbach.priv.at/2006/buttons/xoxo.png
* http://www.boogdesign.com/images/buttons/microformat_xoxo.png

===CSS Styles for microformats===
I'm not sure wether this can be under buttons, but I don't know where else to put it. This is a stylesheet containing styles for most microformats. And, it's automatic. I release it under the cc by-sa. Please note that I am new to microformats, and if you can improve this, please do. [[User:Mac Lover|Mac Lover]] 13:25, 13 Apr 2007 (PDT)

[http://creativecommons.org/licenses/by-sa/3.0/us/ License]
[http://alyosha.bendebury.net/microformat-css.zip Zip]

== CSS Buttons ==
As there are new microformats happening all the time I set about making a CSS button that looks like the ''handmade'' versions. This is the result.

The file with the CSS and the two images required (logo and background) can be downloaded from [http://thebeastlybeasts.co.uk/css/microformat_css.zip The Beastly Beasts].

Extract the microformat directory and the files in it to /css so that you have:<br />
/css/microformat/microformat.css<br />
/css/microformat/background.png<br />
/css/microformat/logo.png

If your paths are different a bit of editing is needed.

The XHTML to create a button is:
<pre><tag class="microformat-button microformat-type"><span></span>microformat-type</tag></pre>

For example, an hCard button with a link to the spec:
<pre><a href="http://microformats.org/wiki/hcard" title="Microformat enabled" class="microformat-button hcard"><span></span>hcard</a></pre>

== Buttons for draft formats ==

These may be subject to change if the names of the formats change when they are released.

=== [[adr]] ===
* http://rbach.priv.at/2006/buttons/adr.png

=== [[geo]] ===
* http://rbach.priv.at/2006/buttons/geo.png

=== [[hatom|hAtom]] ===
* http://rbach.priv.at/2006/buttons/hatom.png
* http://www.corvidworks.com/files/microformats/hatom.png

=== [[hresume|hResume]] ===
* http://rbach.priv.at/2006/buttons/hresume.png
* http://www.boogdesign.com/images/buttons/microformat_hresume.png

=== [[hreview|hReview]] ===
* http://rbach.priv.at/2006/buttons/hreview.png

=== [[rel-directory]] ===
* http://rbach.priv.at/2006/buttons/directory.png

=== [[rel-enclosure]] ===
* http://rbach.priv.at/2006/buttons/enclosure.png

=== [[rel-home]] ===
* http://rbach.priv.at/2006/buttons/rel-home.png
* http://rbach.priv.at/2006/buttons/home.png

=== [[relpayment-research|rel-payment]] ===
* http://rbach.priv.at/2006/buttons/payment.png

=== [[robots-exclusion|Robots Exclusion]] ===
* http://rbach.priv.at/2006/buttons/robots.png

=== [[xfolk|xFolk]] ===
* http://rbach.priv.at/2006/buttons/xfolk.png

== Make your own buttons ==
=== Style 1 ===

Example: http://www.crowley.nl/images/hcard.png

Use the [http://kalsey.com/tools/buttonmaker/ Kalsey Button Maker] with the following settings:
* Outer border: #666666
* Inner border: #ffffff
* Bar position: 25 pixels from the left
* Left box text: >>>
* Left box background: #000000
* Left box text color: #ffffff
* Left box text start: 7 pixels from the left
* Right box text: (The name of the microformat goes here)
* Right box background: #31757b
* Right box text color: #ffffff
* Right box text start: 3 pixels from the bar

=== Style 2 ===

Example: http://rbach.priv.at/2006/buttons/hcal.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://rbach.priv.at/2006/buttons/blank.png)
# Type:
<pre>convert blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 28,10 'button label'"
output.png
</pre>

=== Style 3 ===

Example: http://www.corvidworks.com/files/microformats/hatom.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://www.corvidworks.com/files/microformats/button2-blank.png)
# Type:
<pre>convert button2-blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 20,10 'button label'"
output.png
</pre>

= Microformats Logos =

Rohit is a very poor CSS hacker, but gave it his best shot. He also [http://labs.commerce.net/~rohit/µf-logo.html rendered it at 72 and 18 points.]

http://microformats.org/img/logo.gif

<div style="position: relative; top:-46px; left:180px">
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div>

<div style="background-color:#85BC07; width:22px; height: 22px; left:11.5px; top:6px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white; -moz-border-radius:4pt;"></div>

<div style="background-color:#AEE219; width:14px; height: 14px; left:22.5px; top:4px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white;-moz-border-radius:2pt;"></div>

<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px">
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span>
</div>
</div>

The following logo as a transparent PNG (linked here from my own server; if you use it, please copy it for yourself):

http://www.corvidworks.com/files/microformats/microformats1.png

== Palette ==

<div style="background-color:#AEE219; width:8em; height: 4ex;">#AEE219</div>

<div style="background-color:#85BC07; width:8em; height: 4ex;">#85BC07</div>

<div style="background-color:#679A06; width:8em; height: 4ex;">#679A06</div>

<br />
I created a cheatsheet using [http://bighugelabs.com/flickr/ Big Huge Lab]'s Badgemaker:<br />
[http://flickr.com/photos/hauntedpalace/1296783076/ http://farm2.static.flickr.com/1231/1296783076_1d6fe8a1f8_m_d.jpg]
--[[User:CarlaHufstedler|Carla]] 12:11, 1 Sep 2007 (PDT)

=Wiki buttons=
For use on this wiki.
*{{NewMarker}} - <nowiki>{{NewMarker}}</nowiki>
*{{SuccessMarker}} - <nowiki>{{SuccessMarker}}</nowiki>
*{{UpdateMarker}} - <nowiki>{{UpdateMarker}}</nowiki>

= Requests =

* Logos for all microformats

* When someone has time, these should be repeated on the page for each respective format.

==See also==

{{branding-see-also}}
* <span class="POSH logos">[[posh#Spread_POSH|POSH logos and buttons]]</span>

buttons

2009-04-10T15:16:15Z

Kwilson: Updated image URLs

<h1>Microformats Buttons</h1>

There have been requests for buttons for various microformats. Either badges, or buttons that do something with the specific microformats. This page keeps a list of buttons, and requests as well. - [http://tantek.com/log/ Tantek]

Added hosted buttons for all the microformats, including the draft ones, as well as instructions on how to make your own buttons. (14 May 2006) - [http://www.wackomenace.co.uk/ Ruben]

==Licensing==

If you add links to buttons you have designed, '''please also include a statement''' that you do one of the following:
*release them into the public domain
*hold copyright, but release all rights as to it use
*license them under a specified free license, e.g. consider using a [http://creativecommons.org/ Creative Commons] license, such as [http://creativecommons.org/licenses/by/3.0 cc-by-3.0].

Thank you.

* Images below hosted at boogdesign.com are available under [http://creativecommons.org/licenses/by/2.0/ CC Attribution 2.0 License], see [http://www.boogdesign.com/buttons.html my buttons page] for the Photoshop files if you need them. - Rob Crowther

* Images below hosted at rbach.priv.at are available under [http://creativecommons.org/licenses/by/3.0 cc-by-3.0 license]. - [[User:RobertBachmann|Robert Bachmann]]

* Images below hosted at corvidworks.com are available under the [http://creativecommons.org/licenses/by/3.0/ Creative Commons Attribution 3.0 license]. -- [[User:Kwilson|Kenn Wilson]]

* Images below hosted at hauntedpalace.net and flickr.com/photos.hauntedpalace (POSH logos and palette cheatsheet) are available under the [http://creativecommons.org/licenses/by-sa/3.0/ Creative Commons Attribution-ShareAlike 3.0 license]. — [[:User:CarlaHufstedler|Carla Hufstedler]]

__TOC__

== Buttons ==

=== Microformat Button ===
I've made a button for microformats. Since there are so many microformats and with more to come, just indicating support/ use of might be a good generic approach. The image is free to use. Please copy it to your own hosting account and not link to it.

http://www.crowley.nl/images/microformats.png

I already have a "I use
http://www.crowley.nl/images/microformats.png" on my blog: http://doncrowley.blogspot.com/

- Don Crowley

* http://www.boogdesign.com/images/buttons/microformat.png
* http://www.boogdesign.com/images/buttons/microformat_enabled.png
* http://www.boogdesign.com/images/buttons/emf_green.png
* http://www.boogdesign.com/images/buttons/mfe_green.png
* http://www.boogdesign.com/images/buttons/mwmf_green.png
* http://www.boogdesign.com/images/buttons/smf_green.png
* http://www.boogdesign.com/images/buttons/emf_white.png
* http://www.boogdesign.com/images/buttons/mfe_white.png
* http://www.boogdesign.com/images/buttons/mwmf_white.png
* http://www.boogdesign.com/images/buttons/smf_white.png

=== [[hcalendar|hCalendar]] ===
* http://rbach.priv.at/2006/buttons/hcal.png
* http://www.boogdesign.com/images/buttons/microformat_hcalendar.png
* CSS-powered button from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]:

<span class="badge" style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0; border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none; text-align: center;"><span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; margin-right: 0.1em;">›››</span> hCalendar</span>

Code (white space added for readability):

<pre><nowiki>
<span class="badge"
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;
text-align: center;">
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em;
margin-right: 0.1em;">
&#8250;&#8250;&#8250;
</span>
hCalendar
</span>
</nowiki></pre>

=== [[hcard|hCard]] ===
* http://www.crowley.nl/images/hcard.png (mirror: http://www.davidjanes.com/images/mf_hcard.png)
* http://rbach.priv.at/2006/buttons/hcard.png
* http://www.boogdesign.com/images/buttons/microformat_hcard.png
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]

=== [[rel-license]] ===
* http://rbach.priv.at/2006/buttons/license.png
* http://www.boogdesign.com/images/buttons/microformat_rellicense.png

=== [[rel-nofollow]] ===
* http://rbach.priv.at/2006/buttons/nofollow.png
* http://www.boogdesign.com/images/buttons/microformat_relnofollow.png

=== [[rel-tag]] ===
* http://rbach.priv.at/2006/buttons/rel-tag.png
* http://rbach.priv.at/2006/buttons/tag.png
* http://www.boogdesign.com/images/buttons/microformat_reltag.png

=== [[vote-links|VoteLinks]] ===
* http://rbach.priv.at/2006/buttons/votelinks.png
* http://www.boogdesign.com/images/buttons/microformat_votelinks.png

=== [http://gmpg.org/xfn/ XFN] ===
* http://rbach.priv.at/2006/buttons/xfn.png
* http://www.boogdesign.com/images/buttons/microformat_xfn.png

=== [http://gmpg.org/xmdp/ XMDP] ===
* http://rbach.priv.at/2006/buttons/xmdp.png
* http://www.boogdesign.com/images/buttons/microformat_xmdp.png

=== [[xoxo|XOXO]] ===
* http://rbach.priv.at/2006/buttons/xoxo.png
* http://www.boogdesign.com/images/buttons/microformat_xoxo.png

===CSS Styles for microformats===
I'm not sure wether this can be under buttons, but I don't know where else to put it. This is a stylesheet containing styles for most microformats. And, it's automatic. I release it under the cc by-sa. Please note that I am new to microformats, and if you can improve this, please do. [[User:Mac Lover|Mac Lover]] 13:25, 13 Apr 2007 (PDT)

[http://creativecommons.org/licenses/by-sa/3.0/us/ License]
[http://alyosha.bendebury.net/microformat-css.zip Zip]

== CSS Buttons ==
As there are new microformats happening all the time I set about making a CSS button that looks like the ''handmade'' versions. This is the result.

The file with the CSS and the two images required (logo and background) can be downloaded from [http://thebeastlybeasts.co.uk/css/microformat_css.zip The Beastly Beasts].

Extract the microformat directory and the files in it to /css so that you have:<br />
/css/microformat/microformat.css<br />
/css/microformat/background.png<br />
/css/microformat/logo.png

If your paths are different a bit of editing is needed.

The XHTML to create a button is:
<pre><tag class="microformat-button microformat-type"><span></span>microformat-type</tag></pre>

For example, an hCard button with a link to the spec:
<pre><a href="http://microformats.org/wiki/hcard" title="Microformat enabled" class="microformat-button hcard"><span></span>hcard</a></pre>

== Buttons for draft formats ==

These may be subject to change if the names of the formats change when they are released.

=== [[adr]] ===
* http://rbach.priv.at/2006/buttons/adr.png

=== [[geo]] ===
* http://rbach.priv.at/2006/buttons/geo.png

=== [[hatom|hAtom]] ===
* http://rbach.priv.at/2006/buttons/hatom.png
* http://files.corvidworks.com/microformats/hatom.png

=== [[hresume|hResume]] ===
* http://rbach.priv.at/2006/buttons/hresume.png
* http://www.boogdesign.com/images/buttons/microformat_hresume.png

=== [[hreview|hReview]] ===
* http://rbach.priv.at/2006/buttons/hreview.png

=== [[rel-directory]] ===
* http://rbach.priv.at/2006/buttons/directory.png

=== [[rel-enclosure]] ===
* http://rbach.priv.at/2006/buttons/enclosure.png

=== [[rel-home]] ===
* http://rbach.priv.at/2006/buttons/rel-home.png
* http://rbach.priv.at/2006/buttons/home.png

=== [[relpayment-research|rel-payment]] ===
* http://rbach.priv.at/2006/buttons/payment.png

=== [[robots-exclusion|Robots Exclusion]] ===
* http://rbach.priv.at/2006/buttons/robots.png

=== [[xfolk|xFolk]] ===
* http://rbach.priv.at/2006/buttons/xfolk.png

== Make your own buttons ==
=== Style 1 ===

Example: http://www.crowley.nl/images/hcard.png

Use the [http://kalsey.com/tools/buttonmaker/ Kalsey Button Maker] with the following settings:
* Outer border: #666666
* Inner border: #ffffff
* Bar position: 25 pixels from the left
* Left box text: >>>
* Left box background: #000000
* Left box text color: #ffffff
* Left box text start: 7 pixels from the left
* Right box text: (The name of the microformat goes here)
* Right box background: #31757b
* Right box text color: #ffffff
* Right box text start: 3 pixels from the bar

=== Style 2 ===

Example: http://rbach.priv.at/2006/buttons/hcal.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://rbach.priv.at/2006/buttons/blank.png)
# Type:
<pre>convert blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 28,10 'button label'"
output.png
</pre>

=== Style 3 ===

Example: http://files.corvidworks.com/microformats/hatom.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://files.corvidworks.com/microformats/button2-blank.png)
# Type:
<pre>convert button2-blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 20,10 'button label'"
output.png
</pre>

= Microformats Logos =

Rohit is a very poor CSS hacker, but gave it his best shot. He also [http://labs.commerce.net/~rohit/µf-logo.html rendered it at 72 and 18 points.]

http://microformats.org/img/logo.gif

<div style="position: relative; top:-46px; left:180px">
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div>

<div style="background-color:#85BC07; width:22px; height: 22px; left:11.5px; top:6px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white; -moz-border-radius:4pt;"></div>

<div style="background-color:#AEE219; width:14px; height: 14px; left:22.5px; top:4px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white;-moz-border-radius:2pt;"></div>

<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px">
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span>
</div>
</div>

The following logo as a transparent PNG (linked here from my own server; if you use it, please copy it for yourself):

http://files.corvidworks.com/microformats/microformats1.png

== Palette ==

<div style="background-color:#AEE219; width:8em; height: 4ex;">#AEE219</div>

<div style="background-color:#85BC07; width:8em; height: 4ex;">#85BC07</div>

<div style="background-color:#679A06; width:8em; height: 4ex;">#679A06</div>

<br />
I created a cheatsheet using [http://bighugelabs.com/flickr/ Big Huge Lab]'s Badgemaker:<br />
[http://flickr.com/photos/hauntedpalace/1296783076/ http://farm2.static.flickr.com/1231/1296783076_1d6fe8a1f8_m_d.jpg]
--[[User:CarlaHufstedler|Carla]] 12:11, 1 Sep 2007 (PDT)

=Wiki buttons=
For use on this wiki.
*{{NewMarker}} - <nowiki>{{NewMarker}}</nowiki>
*{{SuccessMarker}} - <nowiki>{{SuccessMarker}}</nowiki>
*{{UpdateMarker}} - <nowiki>{{UpdateMarker}}</nowiki>

= Requests =

* Logos for all microformats

* When someone has time, these should be repeated on the page for each respective format.

==See also==

{{branding-see-also}}
* <span class="POSH logos">[[posh#Spread_POSH|POSH logos and buttons]]</span>

recipe-brainstorming

2008-10-19T18:29:28Z

Kwilson: Noted problems with programatically marking up ingredients

<h1>Recipe Brainstorming</h1>

Towards a [[recipe|Recipe]] microformat. Please read the [[process]] before editing this page.

<div id="Format-In-Progress">
==format-in-progress - september 2007==
</div>
This format-in-progress follows the restarting of Recipe development by [[User:Phae|Frances Berriman]] on 25th September 2007. Note that this Format-In-Progress section is intended to be edited to reflect the discussion that occurs on the microformats-new list, rather than being a free-form playground for schema. This documentation was produced by [[User:BenWard|Ben Ward]] and [[User:Phae|Frances Berriman]].

; Editor
: [[User:Phae|Frances Berriman]] (BBC)

===Introduction===

Recipe is based on [[recipe-examples|examples]] and fields in [[recipe-formats|existing formats]].

The recipe microformat is designed for the mark-up of instructions for creating meals, drinks or food-based items.

===Root Class Name===

To be decided. Likely ‘hrecipe’.

===Property List===

Class names <code>author</code> and <code>published</code> are taken from [[hAtom]], <code>photo</code> used from [[hCard]] and <code>item</code> from [[measure]].

* Title. <code>recipe-title</code>. required. text.
* Summary. <code>recipe-summary</code>. optional. text.
* Author. <code>author</code>. optional. [[hcard]].
* Date published. <code>published</code>. optional. [[datetime-design-pattern]].
* Photo(s). <code>photo</code>. optional. img or url.
* Ingredient(s). <code>ingredient</code>. 1 or more required.
** Quantity. <code>quantity</code>. optional. text, optionally [[measure]].
** Item. <code>item</code>. required. text.
** Note. <code>note</code>. optional. text.
** Optionality. <code>optional</code>. optional. text. Its absence should imply that the ingredient is required.
* Method. <code>method</code>. required. text with optional valid HTML markup.
* Yield. <code>yield</code>. optional. text.
* Preparation time. <code>preparation-time</code>. optional. (see [[ISO-31-1]] duration brainstorming)
* Tags. optional. [[rel-tag]].
* License. optional. [[rel-license]].

===Field Details===

'''Title''': The title of the recipe.
* The element is identified by class name <code>recipe-title</code>.
* A Recipe {{must}} have a <code>recipe-title</code>

'''Summary''': The summary provides a short introduction or an accompanying statement about the recipe.
* The element is identified by class name <code>recipe-summary</code>.
* A Recipe {{may}} have a <code>recipe-summary</code>.

'''Author''': Author the person who authored the recipe.
* The element is identified by class name <code>author</code>.
* A Recipe {{may}} include an <code>author</code>.
* The contents of the element {{must}} include a valid [[hCard]].

'''Date published''': The date the recipe was published.
* The element is identified by the class name <code>published</code>.
* A Recipe {{may}} include a <code>published</code> date.
* {{should}} (?) use the [[datetime-design-pattern]] to encode the published datetime.

'''Photo''': Accompanying image.
* The element is identified by the class name <code>photo</code>.
* A Recipe {{may}} include one or more photo elements.
* The element {{should}} use an <code><img></code> element.
* The element {{may}} use any other element that contains a URL, such as <code><a></code> or <code><object></code>, but it is not recommended.

'''Ingredient''': Describes an ingredient used in the recipe.
* The element is identified by the class name <code>ingredient</code>.
* A Recipe {{must}} have one or more <code>ingredient</code>s.
* The element {{must}} include the field item.
* The element {{may}} include <code>quantity</code>, <code>note</code> and/or <code>optionality</code>.

'''Quantity''': The quantity of an ingredient needed for the recipe.
* The element is identified by the class name <code>quantity</code>.
* An ingredient {{may}} specify the <code>quantity</code>.

'''Item''': Specifies the name of the ingredient.
* The element is identified by the class name <code>item</code>.
* An ingredient {{must}} specify the <code>item</code>.

'''Note''': A note concerning one of the ingredients.
* The element is identified by the class name <code>note</code>.
* An ingredient {{may}} include a <code>note</code>.

'''Optionality''': States that an ingredient is optional to the recipe.
* The element is identified by the class name <code>optionality</code>.
* The <code>optionality</code> of an <code>ingredient</code> {{may}} be specified.
* The absence of the element implies that the ingredient is required.

'''Method''': The method of the recipe.
* The element is identified by the class name <code>method</code>.
* A Recipe {{must}} include a <code>method</code>.
* The field {{may}} include valid HTML markup (e.g. paragraphs).

'''Yield''': Specifies the quantity produced by the recipe.
* The element is identified by the class name <code>yield</code>.
* A Recipe {{may}} include a <code>yield</code>.

<div id="Format-In-Progress-10-2008">
==format-in-progress - #2 - october 2008==
</div>
This second Format-In-Progress reflects the discussions following the first one from september 2007 (see above). It's not an entirely new format but rather an evolution and about 95% the same as the first one. Most important changes are the adition of a <code>nutrition</code> element , a <code>preparation-time-note</code> element and the optionality of <code>method</code>. To improve readability also parts that haven't changed are repeated, while changes are marked with '''<#2''' and commented.
Please note again that Format-In-Progress sections are intended to be edited to reflect the discussion that occurs on the microformats-new list, rather than being a free-form playground for schema. This Format-In-Progress was produced by [[User:ThomasLoertsch|ThomasLoertsch]] 15:29, 15. Oct 2008 (CET)

===Introduction===

Recipe is based on [[recipe-examples|examples]] and fields in [[recipe-formats|existing formats]].

The recipe microformat is designed for the mark-up of instructions for creating meals, drinks or food-based items.

===Root Class Name===

To be decided. Likely ‘hrecipe’.

===Property List===

Class names <code>author</code> and <code>published</code> are taken from [[hAtom]], <code>photo</code> used from [[hCard]] and <code>item</code> from [[measure]].

* Title. <code>recipe-title</code>. required. text.
* Summary. <code>recipe-summary</code>. optional. text.
* Author. <code>author</code>. optional. [[hcard]].
* Date published. <code>published</code>. optional. [[datetime-design-pattern]].
* Photo(s). <code>photo</code>. optional. img or url.
* Ingredient(s). <code>ingredient</code>. 1 or more required.
** Quantity. <code>quantity</code>. optional. text, optionally [[measure]].
** Item. <code>item</code>. required. text.
** Note. <code>note</code>. optional. text.
** '''<#2''' deleted Optionality
* Method. <code>method</code>. optional. text with optional valid HTML markup. '''<#2''' changed to optional
* Yield. <code>yield</code>. optional. text.
* Preparation time. <code>preparation-time</code>. 1 or more, optional. (see [[ISO-31-1]] duration brainstorming) '''<#2''' changed to optionally multiple instances
** Preparation time note. <code>preparation-time-note</code>. optional. text '''<#2''' added
* Tags. optional. [[rel-tag]].
* Nutrition<code>nutrition</code>. optional. Joule [[measure] '''<#2''' added, see Field Details below for a longer version
* License. optional. [[rel-license]].

===Field Details===

'''Title''': The title of the recipe.
* The element is identified by class name <code>recipe-title</code>.
* A Recipe {{must}} have a <code>recipe-title</code>

'''Summary''': The summary provides a short introduction or an accompanying statement about the recipe.
* The element is identified by class name <code>recipe-summary</code>.
* A Recipe {{may}} have a <code>recipe-summary</code>.

'''Author''': Author the person who authored the recipe.
* The element is identified by class name <code>author</code>.
* A Recipe {{may}} include an <code>author</code>.
* The contents of the element {{must}} include a valid [[hCard]].

'''Date published''': The date the recipe was published.
* The element is identified by the class name <code>published</code>.
* A Recipe {{may}} include a <code>published</code> date.
* {{should}} (?) use the [[datetime-design-pattern]] to encode the published datetime.

'''Photo''': Accompanying image.
* The element is identified by the class name <code>photo</code>.
* A Recipe {{may}} include one or more photo elements.
* The element {{should}} use an <code><img></code> element.
* The element {{may}} use any other element that contains a URL, such as <code><a></code> or <code><object></code>, but it is not recommended.

'''Ingredient''': Describes an ingredient used in the recipe.
* The element is identified by the class name <code>ingredient</code>.
* A Recipe {{must}} have one or more <code>ingredient</code>s.
* The element {{must}} include the <code>field</code> item.
* The element {{may}} include <code>quantity</code> and/or <code>note</code>.

'''Quantity''': The quantity of an ingredient needed for the recipe.
* The element is identified by the class name <code>quantity</code>.
* An ingredient {{may}} specify the <code>quantity</code>.

'''Item''': Specifies the name of the ingredient.
* The element is identified by the class name <code>item</code>.
* An ingredient {{must}} specify the <code>item</code>.

'''Note''': A note concerning one of the ingredients.
* The element is identified by the class name <code>note</code>.
* An ingredient {{may}} include a <code>note</code>.
* '''<#2''' '''Optionality''' has been deleted since it's rarely needed and can be stated within a <code>note</code>

'''Method''': The method of the recipe.
* The element is identified by the class name <code>method</code>.
* A Recipe {{may}} include a <code>method</code>.
* The field {{may}} include valid HTML markup (e.g. paragraphs).
* '''<#2''' <code>method</code> is now optional since there are recipes like salads or shakes that don't need a method

'''Yield''': Specifies the quantity produced by the recipe.
* The element is identified by the class name <code>yield</code>.
* A Recipe {{may}} include a <code>yield</code>.

'''Preparation Time''': The time it takes to prepare the meal described by the recipe.
* The element is identified by the class name <code>preparation-time</code>.
* A Recipe {{may}} include one or more <code>preparation-time</code>s.
* '''<#2''' Since some recipes need not only time for preparation, but also considerable time for e.g. boiling, waiting for the dough to rise etc, this element may be used multiple times.

'''Preparation Time Note''': '''<#2''' added. Specifies the purpose of a Preparation Time .
* The element is identified by the class name <code>preparation-time-note</code>.
* A Preparation Time {{may}} include a <code>preparation-time-note</code>.
* An optional note may be added to each of multiple intervals to specify their respective purpose.

'''Nutrition''': '''<#2''' added to optionally provide nutritional information.
* The element is identified by class name <code>nutrition</code>.
* A Recipe {{may}} include a <code>nutrition</code> element.
* This simple version would just add Joules since this is the most used and asked for information.
* A more elaborate version would add information for fat, proteins, carbohydrates and dietary fiber - but this may already be out of the 80/20 range. Of course a lot more nutritional values would be available but these seem definitely outside 80/20.
** Nutrition<code>nutrition</code>. optional
*** Energy. <code>energy</code>. optional. Joule [[measure]]
*** Fat. <code>fat</code>. optional. gram [[measure]]
*** Protein. <code>protein</code>. optional. gram [[measure]]
*** Carbohydrates. <code>carbohydrates</code>. optional. gram [[measure]]
*** Dietary fiber. <code>dietary fiber</code>. optional. gram [[measure]]

===Example===

<pre><nowiki><div class="hrecipe">
<p class="recipe-title">Pommes Frites</p>
<p class="recipe-summary">Pommes frites come from the outer space. They are served hot.<br />This recipe is only an example. Don't try this at home!</p>
<p class="vcard"><span class="fn">Thomas Loertsch</span></p>
<p>Published <abbr class="published" title="2008-10-14T10:05:37-01:00">14. Oct 2008</abbr></p>
<img src="/img/pommes.png" class="photo" width="100" height="100" alt="Pommes Frites"/>
<p class="ingredient">
<span class="quantity hmeasure">
<span class="num">500</span>
<span class="unit">gramme</span>
</span>
<span class="item">potatoes</span>,
<span class="note">hard cooking</span>.
</p>
<ul class="method">
<li>First wash the potatoes.</li>
<li>Then slice and dice them and put them in boiling fat.</li>
<li>After a few minutes take them out again.</li>
</ul>
<p>Enough for <span class="yield">12</span> children.</p>
<p class="preparation-time hmeasure">Preparation time is approximately <span class="h">1</span> hour <span class="min">30</span> minutes.</p>
<p class="preparation-time hmeasure">Add <span class="min">5</span> minutes for <span class="preparation-time-note">preparing the Ketchup</span>.</p>
<p>This recipe is <span href="http://www.eut.de/tags/difficulty/easy" rel="tag">easy</span> and <span href="http://www.eut.de/tags/tastyness/delicious" rel="tag">delicious</span>.</p>
<p class="nutrition hmeasure">Pommes Frites have more than <span class="joule">1000</span> Joule</p>
<p>This recipe is licensed under <a href="http://creativecommons.org/licenses/by/2.0/" rel="license">CC by 2.0</a>.</p>
</div>
</nowiki></pre>

==brainstorming==
===RecipeML-based Brainstorm===
Excerpted from [http://conoroneill.com/2006/03/21/what-if-i-suggest-a-structured-recipe-format-and-you-critique-it/ Conor Bandon's Blog entry] and derived from The RecipeML Spec:
*Recipe_Title
*Summary Description (one liner)
*Measurement System (U.S., Imperial etc)
*Ingredients (each one a separate "item" rather than block text with count/amount/range/unit broken out too)
**Some (e.g. meats, vegetables) could optionally be marked up with (elements of) the proposed [[species]] microformat. [[User:AndyMabbett|Andy Mabbett]] 06:41, 16 Nov 2006 (PST)
** Ingredient importance (e.g. Main, Required, Optional) should be listed as an attribute of each entry. [[User:AlexanderShusta|α]]
**Units need separate microformat: see [[measure]]
**Ingredient Preparation: such as diced, chopped, sliced, grated, minced, etc. [[User:SteveL|Steve Lewis]] 18:55, 11 Feb 2007 (PST)
*Preparation Time (overall time)
*Yield Quantity and Unit (4 pancakes or 5 servings)
**Calories per serving [[User:JohnLeMasney| John LeMasney]]
**Calories per ounce [[User:JohnLeMasney| John LeMasney]]
*Background Information - Optional section to encapsulate information that is useful but not necessarily required for a successful recipe. [[User:AlexanderShusta|α]]
**Author (Person) ([[hcard]]?)
**Submitter (Person) ([[hcard]]?)
**Source (Book Title etc)
*** could use the proposed [[citation]] microformat. [[User:AndyMabbett|Andy Mabbett]] 06:43, 16 Nov 2006 (PST)
**Date (Of Creation or Publication)
**Rights (Copyright or other)
**Meal Category (Starter, entree, dessert )
**Cuisine Category (Italian etc)
*Instructions (text, but can contain:)
**Steps (optional)
***Should be an ordered list [[User:AndyMabbett|Andy Mabbett]] 14:46, 16 Nov 2006 (PST)
***Another vote for an ordered list, perhaps in the [[XOXO]] format. [[User:AlexanderShusta|α]]
***Many recipes associate ingredients with specific steps of a multi-step method; if methods are broken out into steps, then the format should support this association whether the complete ingredient list is up front or the ingredient list is itself broken out per step. [[User:Quixote|Ben Curtis]]
*Photo (optional) [[User:IamCam|Cameron Perry]]
**Could be one per dish, or one for each (or for some of the) step(s). [[User:AndyMabbett|Andy Mabbett]]

===Cookcamp brainstorming===
At [http://barcamp.org/CookCamp CookCamp] in February 2007, Tantek moderated a fairly free form discussion of how to publish/share recipes. Here is a [http://flickr.com/photos/tantek/422072573/ photo of the whiteboard]:
[http://flickr.com/photos/tantek/422072573/ http://farm1.static.flickr.com/162/422072573_9956d93f61.jpg]

'''To Do''': OCR this and enter rough notes here...

===Additional Suggestions===
*Steps - As cited above but to include estimated time per step. Include the type of step (prep, preheat, cook, bake, mix, saute, etc) as well as the ingredients involved. This would be very useful when trying to time a meal so all the food appears together.
**I think this is being to specific. Are there any real world examples where this would be useful? --[[User:Yde|Yde]] 08:41, 30 May 2008 (PDT)
*Difficulty/Notes - Perhaps incorporation of [[hreview|hReview]] to describe difficulty (using rating) and general comments (review), as an optional field. [[User:Phae|Frances Berriman]]
** -1. Too diverse in the wild, better handled bytags (at least in the first version). same for suitablility.
*Suitability (e.g. vegetarian, vegan, wheat-free, etc.). Possibly [[rel-tag]]. [[User:AndyMabbett|Andy Mabbett]] 14:57, 16 Nov 2006 (PST)
*Ingredient Grouping - In baking you need to differentiate wet from dry ingredients. See also an [[recipe-examples|example recipe]] from [http://www.extratasty.com/recipe/46/cuba_libre extratasty.com] for useful grouping in cocktail mixing. [[SteveL|Steve Lewis]] 19:10, 11 Feb 2007
** Maybe this ingredient grouping can be used to express some alternative ingredients, like "mayonnaise or cream cheese". [[EstevaoSamuel|Estêvão Samuel Procópio]] 15:33, 16 Dez 2007 (PDT)
** This could be solved by using a xoxo list and ignoring list items that don't include a class="name". Example:<pre><nowiki>
<ul class="ingredients">
<li>Booze
<ul>
<li>1 part <span class="name">Rum</span></li>
</ul>
</li>
<li>Mixer
<li>1 part <span class="name">Cola</span></li>
<li>1 part <span class="name">Lime juice</span></li>
</li>
</ul></nowiki></pre> --[[User:Yde|Yde]] 13:09, 18 Apr 2008 (PDT)
**We can't have a dependency on XOXO or any list mark-up for ingredients. That's too restrictive on publishing patterns, preventing patterns like: <pre><nowiki>
<p class="method">Take <span class="ingredient"><span class="quantity">a handful</span>
of spinach</span> and fry it</p></nowiki></pre> --[[User:BenWard|BenWard]] 13:20, 18 Apr 2008 (PDT)
**You're right. I think grouping would introduce too many new elements (class="group", class="group-title") considering how relatively uncommon this is. --[[User:Yde|Yde]] 13:51, 23 Apr 2008 (PDT)

*Method > Steps - or Method-Step[] as a child of Method. Imply ordered steps from an HTML list or explicitly mark-up ordered steps respectively.
** -1. Outside 80/20. POSH is good enough for this purpose. --[[User:ThomasLoertsch|ThomasLoertsch]] 15:04, 01 Oct 2008 (CET)
* Number of dishes or similar - often it's mentioned how many dishes (or breads in baking, etc) the ingredients are for. [[User:WilleRaab|WilleRaab]] 16:57, 20 Jul 2007 (PDT)
* Suitable for occasions - what occasions are the dish suitable for? [[User:WilleRaab|WilleRaab]] 16:57, 20 Jul 2007 (PDT)
* Category - many sites categorize their recipes. [[User:WilleRaab|WilleRaab]] 16:57, 20 Jul 2007 (PDT)
** Tags could be used for both suitability and category.

*Under what terms is the recipe licensed? Microformat: rel="license". Often a page is in the creative commons but the page author has taken some text from a copyrighted page and in theory re-published the work in violation to the terms of use, adding a rel="license" to each recipe on the page? [[User:Lee Jordan|Lee Jordan]] 20:55, 04 Feb 2008 (GMT)

*Single foodstuffs - If "method" is made optional, this could be used for marking up individual foodstuffs in prose. for example, "I like to eat cheese for supper." would become:
<pre><nowiki>
I like to eat <span class="hRecipe"><span class="ingredient">cheese</span></span> for supper.
</nowiki></pre>
or simply (if the proposed "[http://microformats.org/discuss/mail/microformats-discuss/2008-January/011199.html sub-microformat-pattern]" is adopted):
<pre><nowiki>
I like to eat <span class="hRecipe-ingredient">cheese</span> for supper.
</nowiki></pre>
: [[User:AndyMabbett|Andy Mabbett]] 08:16, 5 Jan 2008 (PST)
**But that's not really a recipe, is it? And what would the purpose of knowing that cheese is an ingredient be? --[[User:Yde|Yde]] 12:46, 18 Apr 2008 (PDT)
** -1. Makes no sense to me either --[[User:ThomasLoertsch|ThomasLoertsch]] 15:29, 01 Oct 2008 (CET)

*Menus - With the addition of a "price" field, and perhaps one or two others, and again making "method" optional, this microformat can also be used for menus. See [[recipe-examples#Menus|menu examples]]. [[User:AndyMabbett|Andy Mabbett]] 02:39, 19 Feb 2008 (PST)
**I would consider this out of scope (which is to produce an as-simple-as-possible microformat "for the mark-up of instructions for creating meals, drinks or food-based items" - [[recipe-brainstorming#Introduction | introduction]]) --[[User:Yde|Yde]] 13:39, 23 Apr 2008 (PDT)

===Calories===
per serving. May be part of the [[measure]] microformat in future.
* +1. Nutritional information is quite important for a lot of people and is inside the 80/20. It should be included as an optional element. The problems are: which nutritional information exactly? A common denominator is calories, proteins, carbohydrates and fat. That's also what european law demands as information on packaged food. Most sites that I visited only list calories as nutritional information (if any). Since Calories are a somehow superordinate concept for proteins, carbohydrates and fat that's fine. Allrecipes.com is quite extreme with a huge list of nutritional information - clearly outside 80/20 IMHO. Another problem: although Calories are the most popular term, the measure is deprecated in favor of Joule. hMeasure too uses Joule. I'd therefor propose to add the ''optional'' element <code>nutrition</code> and subelements <code>calories</code>("mandatory") in Joule,<code>fat</code>("optional"), <code>protein</code>("optional"), <code>carbohydrates</code>("optional"), and <code>dietary fiber</code>("optional"), those all in grams. --[[User:ThomasLoertsch|ThomasLoertsch]] 15:16, 01 Oct 2008 (CET), modified 09.Oct 2008 and 13.Oct 2008
** +1 for a <code>nutrition</code> element. However, I would like to change the subelement <code>calories</code> to <code>energy</code>, as that would allow using either calories or joules (using hMeausere) and it feels weird to state joule in an element called calories. --[[User:Yde|Yde]] 05:57, 11 Oct 2008 (PDT)
** I felt the same and <code>energy</code> is a good idea. However I think we should stay with Joules, since hMeasure doesn't include Calories and we don't want to get things too complicated.
*** hMeasure allows ''any'' units to be used. The [[measure#unit:_The_Unit_of_Measurement|<code>unit</code> property]] is defined as an opaque string. The draft spec does ''allow'' parsers to delve into this otherwise opaque string and assign meaning to it, and strongly suggests that any parsers which do this support all SI units and prefixes. However, it does not prevent authors from using non-SI units, such as calories. [[User:TobyInk|TobyInk]]
*** You're right. Still, wouldn't it make more sense to go for the standardized Joule instead of the deprecated and non-standardized Calories?
**** I think a lot of people are using calories instead of joule (or both), so IMO it would be too restrictive to only allow joule. --[[User:Yde|Yde]] 02:50, 18 Oct 2008 (PDT)
** But do we really decide for the multi-element proposal outlined above? Or should we rather go for a simple and single <code>nutrition</code> element, ''optional'', without subelements (and with hMeasure Joule)? I'm still undecided myself. [[User:ThomasLoertsch|ThomasLoertsch]] 12:02, 13.Oct 2008 (CET)

===Note===
The 'note' property is only useful in some [http://microformats.org/discuss/mail/microformats-new/2008-June/001635.html rare cases] and might not fit the 80-20 rule.
* We might want to [[principles|start as simple as possible]] and leave this out for a future revision.
* People often put some of the very basic preparation steps into the ingredients list. For example, ingredients lists sometimes read like "one onion, finely chopped".
* +1. <code>note</code> should stay as an optional value. There are so many ways to define ingredients that it seems useful enough to fit into the 80/20. --[[User:ThomasLoertsch|ThomasLoertsch]] 15:26, 01 Oct 2008 (CET)

===Optional===
Instead of <code>note</code> I'd rather remove the <code>optional</code> property. Information about the optionality of an ingredient can easily be added in the <code>note</code> field, e.g. together with suggestions for a possible replacement. --[[User:ThomasLoertsch|ThomasLoertsch]] 12:59, 13.Oct 2008 (CET)

===Method===
For informally or concisely written recipes, the method is often left out. Could we either make this optional, or have an optimisation such that if the method is absent, the entire text of the recipe is taken to be the method. [[User:TobyInk|TobyInk]] 02:53, 15 Jul 2008 (PDT)
* e.g. salad, sandwich and smoothie recipes don't often require a method to be useful.
* +1 for making it optional. Although most recipes rely heavily on a method there are indeed those where it isn't necessary. If 80/20 does mean that easy or simple usecases should be facilitated it would be in line with the principal to make the method optional. And it wouldn't hurt anybody either. --[[User:ThomasLoertsch|ThomasLoertsch]] 15:04, 01 Oct 2008 (CET)
* I don't know... Making the method optional would make "I like to eat cheese for supper" a technically valid recipe, but it provides no value as a recipe. In other words, I am concerned that this will lead to people using the format for things it was not intented for. I don't know if this will happen, but we need to take it into consideration. --[[User:Yde|Yde]] 06:17, 11 Oct 2008 (PDT)
* I think there's no technical way to prevent misuse (and no other way either ;-). --[[User:ThomasLoertsch|ThomasLoertsch]] 12:52, 13.Oct 2008 (CET)

===Preparation Time===
Make <code>preparation-time</code> plural and add an optional <code>preparation-time-note</code> element inline to preparation time
* <code>preparation-time</code> (optional, plural)
** <code>preparation-time-note</code> (optional, singular)
There are often times additional to the main preparation time i.e. the time the dough needs to rise. When scanning a recipe for
practicality - i.e. your guest are coming in 4 hours - this is a very important information. Allowing <code>preparation-time</code> to be used more than once per recipe and adding an optional <code>note</code> element would allow great flexibility in stating such details while staying simple. It could also be used to give times for different parts of a recipe like cake and topping or to differentiate times for preparation, waiting and cooking. --[[User:ThomasLoertsch|ThomasLoertsch]] 15:05, 01 Oct 2008 (CET)
* That's a good point. But how do we semantically connect the preparation time and a specific part of the recipe? --[[User:Yde|Yde]] 06:25, 11 Oct 2008 (PDT)
* In the absence of sections for ingredients or method steps I see no way to connect the preparation time and a specific part of the recipe in a standardized manner. But the same applies to ingredients and method steps. I guess a solution would need some quite involved sectioning constructs. In my feeling this is not such a big problem that it justifies further constructs. [[User:ThomasLoertsch|ThomasLoertsch]] 12:25, 13 Oct 2008 (CET)

===Quantity===
There are a lot of units typically used in recipes that do not make much sense in most other cases and therefor most likely will never make it into a 80/20-aware measure-microformat. This is a deliberatly short list:
* cup
* leave
* pinch
* tablespoonful
* teaspoonful
* lacing
* tie (??? my english is really leaving me here, hope you get the idea)
<code>note</code> can be used to indicate more subtle differentiation (like a "big spoonful", "some leaves" etc). I think this list is both usefully short and complete. The following measures:
* weight (gram)
* volume (litre)
* length (metre)
can be taken from the measure microformat. I guess measure is already stable enough that it's save to use these terms "experimentally". The measure-element should be optional. That way nobody is forced to select a value from it - it's just a help to facilitate interoperability. --[[User:ThomasLoertsch|ThomasLoertsch]] 15:45, 01 Oct 2008 (CET)

=== Proposed Optimisations ===

====Item====
Can we have this optimisation?... if no "item" is found, the entire ingredient is taken to be the item. [[User:TobyInk|TobyInk]]

Example:
<pre><nowiki><span class="ingredient">salt</span></nowiki></pre>
is a shorthand for:
<pre><nowiki><span class="ingredient"><span class="item">salt</span></span></nowiki></pre>
* +1. That and the Proposed Ingredient List Optimisation seem to be very pragmatic proposals. --[[User:Yde|Yde]] 14:40, 14 Jul 2008 (PDT)
* -1. I'm not convinced that it's wise to introduce variations in the syntax for the singlemost important element (beside the title). Also the case seems very rare to me. Can you give some examples? --[[User:ThomasLoertsch|ThomasLoertsch]] 15:07, 01 Oct 2008 (CET)

====Ingredient List====

[[User:TobyInk|TobyInk]] 03:42, 23 Mar 2008 (PDT):

If class="ingredients" (note: plural) is found on an element, class="ingredient" (note: singular) is automatically implied on all its children.

<pre><nowiki><ul class="ingredients">
<li><span class="quantity">3</span> <span class="item">eggs</span></li>
<li><span class="quantity">6 oz</span> <span class="item">self-raising flour</span></li>
<li><span class="quantity">6 oz</span> <span class="item">caster sugar</span></li>
<li><span class="quantity">6 oz</span> <span class="item">butter</span></li>
<li><span class="quantity">1 tsp</span> <span class="item">vanilla essence</span></li>
</ul></nowiki></pre>

is a shorthand for:

<pre><nowiki><ul class="ingredients">
<li class="ingredient"><span class="quantity">3</span> <span class="item">eggs</span></li>
<li class="ingredient"><span class="quantity">6 oz</span> <span class="item">self-raising flour</span></li>
<li class="ingredient"><span class="quantity">6 oz</span> <span class="item">caster sugar</span></li>
<li class="ingredient"><span class="quantity">6 oz</span> <span class="item">butter</span></li>
<li class="ingredient"><span class="quantity">1 tsp</span> <span class="item">vanilla essence</span></li>
</ul></nowiki></pre>

* I agree. This would save a lot of space, especially combined with the proposed hmeasure [http://microformats.org/wiki/measure#hmeasure minimisation technique]. --[[User:Yde|Yde]] 12:57, 18 Apr 2008 (PDT)
* Do we have <code>ingredients</code> (plural) as an element? Doesn't that open a whole can of list-issues? --[[User:ThomasLoertsch|ThomasLoertsch]] 15:37, 01 Oct 2008 (CET)

====Ingredient Item/Quantity====

[[User:TobyInk|TobyInk]] 03:42, 23 Mar 2008 (PDT):

This idea's a bit more "out there" and probably needs a bit more work.

<pre><nowiki><li class="ingredient">3 eggs</li></nowiki></pre>

(note the double-space between '3' and 'eggs') is treated as a shorthand for:

<pre><nowiki><li class="ingredient"><span class="quantity">3</span> <span class="item">eggs</span></li></nowiki></pre>

This is similar to N-optimisation in hCard, but uses a double space instead of a single space because the components (quantity, item) may themselves each contain spaces. With both of these optimisations in place, the sponge cake ingredient list can be written as concisely as:

<pre><nowiki><ul class="ingredients">
<li>3 eggs</li>
<li>6 oz self-raising flour</li>
<li>6 oz caster sugar</li>
<li>6 oz butter</li>
<li>1 tsp vanilla essence</li>
</ul></nowiki></pre>

Which (apart from the double spaces) is pretty close to how many people publish ingredients lists already. (Certainly close to how I do!)

==== Alternative Ingredient Item/Quantity Optimisation ====

[[User:TobyInk|TobyInk]] 02:02, 24 Mar 2008 (PDT): Perhaps a better solution than the double spacing...

As above, but:

<pre><nowiki><ul class="ingredients">
<li><var>3</var> eggs</li>
<li><var>6 oz</var> self-raising flour</li>
<li><var>6 oz</var> caster sugar</li>
<li><var>6 oz</var> butter</li>
<li><var>1 tsp</var> vanilla essence</li>
</ul></nowiki></pre>

Or is this stretching the meaning of <var> too much?

==== Problems with programatically marking up ingredients ====

While I understand the need for a <code>item</code> element within an <code>ingredient</code>, in practice this may be difficult to implement. The <code>quantity</code> element suffers from the same problem, but it's optional, unlike <code>item</code>.

The problem occurs when marking up existing recipes for display. A list of ingredients pulled from a database is trivial to mark up with <code>ingredient</code> but it's nearly impossible to add the required <code>item</code> with a high degree of accuracy. Doing so would require being able to parse each ingredient and identify and separate the quantities and items, which is only really possible if you know in advance every form the quantities will take so you can accurately pattern-match them.

For a real-world example, I'm currently building a site for a good-sized (9,000+) recipe collection. These recipes come from a number of sources and contain many different units of measure. While I can match for things like "oz", "cup", etc, and assume that what follows is the <code>item</code>, this is error prone and doesn't take into account things like "pinch", "dash", and the nearly endless list of other possible terms I may encounter.

I'd like to suggest that <code>item</code> be made optional, as the other child elements of <code>ingredient</code> already are. People coding recipes by hand or who are otherwise able to separate these things may use them, but those of us who are unable to do this can omit them while still outputting valid recipe microformat.

[[User:Kwilson|Kenn Wilson]] 11:29, 19 Oct 2008 (PDT)

==issues==
Issues have been moved to a seperate [[recipe-issues|recipe-issues ]] page.

==implementations==
===Cognition===
As of September 2008, [http://buzzword.org.uk/cognition/ Cognition] has experimental support for this format. ([http://buzzword.org.uk/cognition/uf-plus.html#hrecipe Details of support].) Recipes may be exported in [[recipe-formats#RecipeBook_XML|RecipeBook XML]] format or RDF.

== related pages ==
* [[recipe]]
* [[recipe-examples]]
* [[recipe-formats]]
* [[recipe-issues]]

User:Kwilson

2008-10-19T18:04:33Z

Kwilson: Updated URL

== Kenn Wilson ==

Linux sysadmin and web geek in San Francisco.

== External Links ==

* [http://www.inmostlight.org/ Personal site] (includes hCard)
* [http://www.corvidworks.com/ Professional site] (includes hCard and hResume)

hresume-examples-in-wild

2008-10-19T18:02:32Z

Kwilson: Updated my resume URL

<h1>hResume examples in the wild</h1>

This page is '''informative'''.

The following sites have published '''hResumes''', and thus are a great place to start for anyone looking for examples "in the wild" to try parsing, indexing, organizing, etc.

__TOC__

== New Examples ==
If you have an hResume on your own page, feel free to add it to the '''top''' of this list. Please be sure to include at least one URL to a page on your site that includes actual [[hresume|hResume]] markup. Examples added without a URL to a page with hResume markup may be removed.

* [http://l2fprod.com/ Frederic Lavigne] has marked up his [http://l2fprod.com/cv/cv.php résumé] with hResume
* [http://matthewlevine.com/ Matthew Levine] has marked up his [http://matthewlevine.com/resume résumé] with hResume
* [http://www.jdclark.org/ Jordan Clark] has marked up his [http://www.jdclark.org/cv CV / résumé] with hResume
* [[User:SebastienSauteur|Sebastien Sauteur]] has marked up his [http://valeurdusage.net/drupal/cv C.V.] with hResume
* [[User:MarkNg|Mark Ng]] has marked up his [http://www.markng.co.uk/cv CV] with hResume.
* [[User:SidRoberts|Sid Roberts]] has marked up his [http://www.sidroberts.co.uk/cv/ CV] with hResume.
* [http://bergantinedesign.us/about/resume Joseph Bergantine] has marked up his resume with hResume
* [[User:NathanChase|Nathan Chase]] has marked up [http://www.nathanchase.com/resume.html his resume] with hResume.
* [[User:WikiObert|Alberto Ramacciotti]] has marked up an italian and an english version of his h[http://obertfsp.com/cv.html Resume].
* [[User:JaredEssig|Jared Essig]] has styled and marked up his h[http://prochor.us/resume Resume].
* [[User:Dreamisle|David Millar]] has *hopefully successfully* marked up [http://thegriddle.net/pages/resume his Resume] with hResume.
* [[User:Bczerniak|Brad Czerniak]] has created [http://brad.hawidu.com his Resume] with hResume.
* [[User:BenDodson|Ben Dodson]] has marked up [http://bendodson.com/cv/ his CV] with hResume.
* [[User:Twoplayer|Stephen Kelly]] has marked up his [http://www.twoplayer.net/stephen-kelly/cv.php CV] with hResume.
* [[User:MattWilliams|Matt Williams]] has marked up his [http://mattwilliamsnyc.com/resume/ resume] with hResume.
* [[User:Niall Kennedy|Niall Kennedy]] has marked up his [http://www.niallkennedy.com/about/resume.html résumé] with hResume.
* [[User:ManasTungare|Manas Tungare]] has marked up his [http://manas.tungare.name/resume/ Résumé] with hResume.
* [[User:Eferraiuolo|Eric Ferraiuolo]] has marked up his [http://eric.ferraiuolo.name/resume/ Resume] with hReesume
* [[User:ChristopheDucamp|Christophe Ducamp]] has marked up his [http://www.elanceur.org/CV_ChristopheDucampFr.html C.V.] with hResume
* [[User:RichardDavies|Richard Davies]] has marked up his [http://www.richarddavies.us/resume/ resume] as an hResume.
* [[User:JeffMcNeill|jeffmcneill]] has marked up [http://jeffmcneill.com/microformats/hresume-jeffmcneill.html his resume] with hResume
* Actor [[User:DavidSwain|David Swain]] has marked up his [http://davidswain.co.uk/cv cv] as an hResume.
* [[User:CiaranMc|Ciaran McNulty]] has marked up his [http://ciaranmcnulty.com/cv/html CV] as an hResume.
* [[User:RobCrowther|Rob Crowther]] has marked up his [http://www.dotrob.com/cv.html resume] as an hResume.
* [[User:Ajaswa|Andrew Jaswa]] has marked up his [http://www.gotkicked.net/hresume resume] as an hResume.
* [[User:ScottWallick|Scott Allan Wallick]] has [http://scottwallick.com/about/resume/ his resume] as an hResume.
* Ed Lau has [http://www.edlabs.net/ his resume] marked up with hResume.
* [[User:AndySmith|Andy Smith]] has marked up [http://ymkm.com/AndySmith.html his CV] with hResume.
* [[User:BruceDailey|Bruce Dailey]] has marked up his [http://www.jciti.com/cv/cv.php resume] as an hResume.
* [[User:JesseNewland|Jesse Newland]] has marked up his [http://resume.jnewland.com resume] as an hResume.
* [[User:Harriyott|Simon Harriyott]] has his [http://harriyott.com/cv.aspx curriculum vitae] as an hResume.
* [[User:BradT|Brad Touesnard]] has scraped together [http://brad.touesnard.com/documents/resume/ his resume] with the [http://brad.touesnard.com/projects/wordpress/linkedin-hresume/ LinkedIn hResume for Wordpress] plugin.
* [[User:ChadL|Chad Lindstrom]] has extended his [http://chadlindstrom.ca/resume/ resume] with hResume.
* Dawn Waswick has marked up [http://www.miniminx.com/portfolio/resume.cfm her CV] with hResume.
* [[User:Rolandinsh|Rolands Umbrovskis]] has [http://www.rolandinsh.lv/?ro=hResume marked up his CV] with hResume.
* [http://linkedin.com/ LinkedIn] has ~9 million Public Profiles marked up in hResume, e.g. [http://www.linkedin.com/in/steveganz Steve Ganz's Public Profile].
* [http://steinhardt.nyu.edu/ NYU Steinhardt] has [http://steinhardt.nyu.edu/faculty_bios/list/Faculty 240+ faculty bios marked up], e.g. [http://steinhardt.nyu.edu/faculty_bios/view/Susan_Murray]. ([[User:WizardIsHungry|Jon Williams]])
* [[User:ClintAndrewHall|Clint Hall]] has marked up his [http://www.clintandrewhall.com/resume.html resume] as an hResume.
* [[User:Csarven|Sarven Capadisli]] has marked up his [http://www.csarven.ca/cv Curriculum Vitae] as an hResume.
* [[User:Jax|Xavier Roy]] has marked his [http://xavierroy.com/resume/ resume] with hResume
* [[User:SanchTheFat|Robert O'Rourke]] has marked up his [http://robert.o-rourke.org/ CV] with hResume.
* [[User:Keri Henare|Keri Henare]] has marked up [http://www.kerihenare.com/cv/ his Curriculum Vitae] using hResume.
* [[User:Kwilson|Kenn Wilson]] has marked up [http://www.corvidworks.com/resume/ his resume] using hResume, following [[User:Ralph Brandi|Ralph Brandi]]'s method of using object.include.
* [[User:Ralph Brandi|Ralph Brandi]] has [http://www.brandi.org/ralph/resume/ marked up his resume] with hResume, additionally using the object.include method to associate one description with three hCalendar experiences.
* [[User:Pat Ramsey|Pat Ramsey]] has his [http://www.patramsey.net/resume.html resume] marked up as an hResume.
* [[User:Wim Le Page|Wim Le Page]] has also marked up [http://adrem.ua.ac.be/~wlepage/curriculum-vitae/ his curriculum vitae] as an hResume.
* [[user:Jonathan Arkell|Jonathan Arkell]] has posted an [http://portfolio.jonnay.net/cv/ hResume] on his portfolio website.
* [http://steve.ganz.name/hresume/ Steve Ganz - hResume 0.1]
* [[User:Dave Cardwell|Dave Cardwell]] has marked up [http://davecardwell.co.uk/cv/ his curriculum vitae] as an hResume.
* [[User:EdwardOConnor|Edward O'Connor]]'s [http://edward.oconnor.cx/resume/ resume] is in hResume, and has some experimental JavaScript in it to extract a skill summary from the resume.
* [[User:Lindsey Simon|Lindsey Simon]] has his [http://www.commoner.com/~lsimon/lindsey_simon_resume.html resume] marked up as an hResume - with lots of thanks to Pat Ramsey.
* [[User:Ben Ward|Ben Ward]] has published [http://ben-ward.co.uk/cv his CV] with hResume.
* [http://www.kelleychambers.com Kelley Chambers] has published her [http://www.kelleychambers.com/resume resume] via [http://www.ssdesigninteractive.com/ssdesign/?p=96 Sajid Saiyed's Microformat hResume Plugin for Wordpress].
* [[User:Fishy5|Brennan Falkner]] used hResume to markup his [http://my.usf.edu/bbcswebdav/users/bfalker/resume.html resume].
* [http://www.zachary.com/creemer/resume.html David Creemer's resume] uses hResume, with thanks to Pat Ramsey for the CSS.
* [[User:ChristophBurgdorfer|Christoph Burgdorfer]] has integrated his hResume into a [http://emcons.net/index.php mashup].

== Examples with some problems ==

If you find a problem with any example in any other section, please move it here, and note the precise problem and cite the section of the [[hresume|hResume spec]] that appears to be violated. If the example that was moved here is yours, and you want to improve it, see the [[hresume-faq|hResume FAQ]], or raise any queries on [[hresume-issues|hResume Issues]] or [[mailing-lists#microformats-discuss|the mailing list]], where people will be happy to help you. 

* Inga Scholes had <nowiki>http://inga-art.co.uk/cv</nowiki> her CV marked up with hResume.
** '''invalid''' - hResume version missing as of 2007-10-28.
* [[User:RudyDesjardins|Rudy Desjardins]] has marked up his [http://rudy.theendless.org/resume/index.html resume] as an hResume.
** '''Invalid''' : hCard seems invalid
* [[User:MattBosworth|Matt Bosworth]] has marked up his chronological [http://www.codetastic.com/resume-chrono.html resume] and his functional [http://www.codetastic.com/resume-functional.html resume] with hResume.
** '''Invalid''' -- hCalendar's summaries to be specified
* [[User:AndrewPendrick|Andrew Pendrick]] has marked up his [http://www.andrewpendrick.co.uk/cv.html resume] as an hResume.
**'''Invalid''' - hCalendars's summaries to be specified (per Operator).[[User:ChristopheDucamp|xtof]]
* [[User:WebOrganics|Martin McEvoy]] has cobbled together his [http://weborganics.co.uk/hResume/ resume] as a hResume.
**'''Invalid''' - Three hCalendars have empty summary; several tags are invalid (per Operator). [[User:AndyMabbett|Andy Mabbett]] 22:48, 1 Sep 2007 (PDT)
* [[User:DmytroShteflyuk|Dmytro Shteflyuk]] has marked up [http://kpumuk.info/curriculum-vitae/ his resume] as an hResume.
** Invalid; job titles contain hCards without a "fn" (either directly or via object). --[[User:Gazza|Gazza]] 04:27, 1 May 2007 (PDT)
* [[user:Izo|Mathieu Drouet]] has posted an [http://izo.aucuneid.com/hresume.html hResume].
** ''Incorrect root class name hResume? -- [[DavidJanes]]''
* [[User:Stauciuc|Sergiu Sebastian Tauciuc]] has his [http://www.sergiutauciuc.ro/en/cv.html curriculum vitae] as an hResume.
** '''Invalid''' - no contact vCard specified. [[User:AndyMabbett|Andy Mabbett]] 04:05, 10 Mar 2007 (PST)

== Reviewed Examples ==

If you have reviewed a New Example (and you are not the author of the example) and believe it to be valid, go ahead and move it here.
* ...

== Related Pages ==
{{hresume-related-pages}}

buttons

2007-10-10T18:40:39Z

Kwilson: Updated image URLs

<h1>Microformats Buttons</h1>

There have been requests for buttons for various microformats. Either badges, or buttons that do something with the specific microformats. This page keeps a list of buttons, and requests as well. - [http://tantek.com/log/ Tantek]

Added hosted buttons for all the microformats, including the draft ones, as well as instructions on how to make your own buttons. (14 May 2006) - [http://www.wackomenace.co.uk/ Ruben]

==Licensing==

If you add links to buttons you have designed, '''please also include a statement''' that you do one of the following:
*release them into the public domain
*hold copyright, but release all rights as to it use
*license them under a specified free license, e.g. consider using a [http://creativecommons.org/ Creative Commons] license, such as [http://creativecommons.org/licenses/by/3.0 cc-by-3.0].

Thank you.

* Images below hosted at boogdesign.com are available under [http://creativecommons.org/licenses/by/2.0/ CC Attribution 2.0 License], see [http://www.boogdesign.com/buttons.html my buttons page] for the Photoshop files if you need them. - Rob Crowther

* Images below hosted at rbach.priv.at are available under [http://creativecommons.org/licenses/by/3.0 cc-by-3.0 license]. - [[User:RobertBachmann|Robert Bachmann]]

* Images below hosted at synaesthetic.net are available under the [http://creativecommons.org/licenses/by/3.0/ Creative Commons Attribution 3.0 license]. -- [[User:Kwilson|Kenn Wilson]]

* Images below hosted at hauntedpalace.net and flickr.com/photos.hauntedpalace (POSH logos and palette cheatsheet) are available under the [http://creativecommons.org/licenses/by-sa/3.0/ Creative Commons Attribution-ShareAlike 3.0 license]. — [[:User:CarlaHufstedler|Carla Hufstedler]]

__TOC__

== Buttons ==

=== Microformat Button ===
I've made a button for microformats. Since there are so many microformats and with more to come, just indicating support/ use of might be a good generic approach. The image is free to use. Please copy it to your own hosting account and not link to it.

http://www.crowley.nl/images/microformats.png

I already have a "I use
http://www.crowley.nl/images/microformats.png" on my blog: http://doncrowley.blogspot.com/

- Don Crowley

* http://www.boogdesign.com/images/buttons/microformat.png
* http://www.boogdesign.com/images/buttons/microformat_enabled.png
* http://www.boogdesign.com/images/buttons/emf_green.png
* http://www.boogdesign.com/images/buttons/mfe_green.png
* http://www.boogdesign.com/images/buttons/mwmf_green.png
* http://www.boogdesign.com/images/buttons/smf_green.png
* http://www.boogdesign.com/images/buttons/emf_white.png
* http://www.boogdesign.com/images/buttons/mfe_white.png
* http://www.boogdesign.com/images/buttons/mwmf_white.png
* http://www.boogdesign.com/images/buttons/smf_white.png

=== [[hcalendar|hCalendar]] ===
* http://rbach.priv.at/2006/buttons/hcal.png
* http://www.boogdesign.com/images/buttons/microformat_hcalendar.png
* CSS-powered button from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]:

<span class="badge" style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0; border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none; text-align: center;"><span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; margin-right: 0.1em;">›››</span> hCalendar</span>

Code (white space added for readability):

<pre><nowiki>
<span class="badge"
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;
text-align: center;">
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em;
margin-right: 0.1em;">
&#8250;&#8250;&#8250;
</span>
hCalendar
</span>
</nowiki></pre>

=== [[hcard|hCard]] ===
* http://www.crowley.nl/images/hcard.png (mirror: http://www.davidjanes.com/images/mf_hcard.png)
* http://rbach.priv.at/2006/buttons/hcard.png
* http://www.boogdesign.com/images/buttons/microformat_hcard.png
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]

=== [[rel-license]] ===
* http://rbach.priv.at/2006/buttons/license.png
* http://www.boogdesign.com/images/buttons/microformat_rellicense.png

=== [[rel-nofollow]] ===
* http://rbach.priv.at/2006/buttons/nofollow.png
* http://www.boogdesign.com/images/buttons/microformat_relnofollow.png

=== [[rel-tag]] ===
* http://rbach.priv.at/2006/buttons/rel-tag.png
* http://rbach.priv.at/2006/buttons/tag.png
* http://www.boogdesign.com/images/buttons/microformat_reltag.png

=== [[vote-links|VoteLinks]] ===
* http://rbach.priv.at/2006/buttons/votelinks.png
* http://www.boogdesign.com/images/buttons/microformat_votelinks.png

=== [http://gmpg.org/xfn/ XFN] ===
* http://rbach.priv.at/2006/buttons/xfn.png
* http://www.boogdesign.com/images/buttons/microformat_xfn.png

=== [http://gmpg.org/xmdp/ XMDP] ===
* http://rbach.priv.at/2006/buttons/xmdp.png
* http://www.boogdesign.com/images/buttons/microformat_xmdp.png

=== [[xoxo|XOXO]] ===
* http://rbach.priv.at/2006/buttons/xoxo.png
* http://www.boogdesign.com/images/buttons/microformat_xoxo.png

===CSS Styles for microformats===
I'm not sure wether this can be under buttons, but I don't know where else to put it. This is a stylesheet containing styles for most microformats. And, it's automatic. I release it under the cc by-sa. Please note that I am new to microformats, and if you can improve this, please do. [[User:Mac Lover|Mac Lover]] 13:25, 13 Apr 2007 (PDT)

[http://creativecommons.org/licenses/by-sa/3.0/us/ License]
[http://alyosha.bendebury.net/microformat-css.zip Zip]

== Buttons for draft formats ==

These may be subject to change if the names of the formats change when they are released.

=== [[adr]] ===
* http://rbach.priv.at/2006/buttons/adr.png

=== [[geo]] ===
* http://rbach.priv.at/2006/buttons/geo.png

=== [[hatom|hAtom]] ===
* http://rbach.priv.at/2006/buttons/hatom.png
* http://files.synaesthetic.net/microformats/hatom.png

=== [[hresume|hResume]] ===
* http://rbach.priv.at/2006/buttons/hresume.png
* http://www.boogdesign.com/images/buttons/microformat_hresume.png

=== [[hreview|hReview]] ===
* http://rbach.priv.at/2006/buttons/hreview.png

=== [[rel-directory]] ===
* http://rbach.priv.at/2006/buttons/directory.png

=== [[rel-enclosure]] ===
* http://rbach.priv.at/2006/buttons/enclosure.png

=== [[rel-home]] ===
* http://rbach.priv.at/2006/buttons/rel-home.png
* http://rbach.priv.at/2006/buttons/home.png

=== [[relpayment-research|rel-payment]] ===
* http://rbach.priv.at/2006/buttons/payment.png

=== [[robots-exclusion|Robots Exclusion]] ===
* http://rbach.priv.at/2006/buttons/robots.png

=== [[xfolk|xFolk]] ===
* http://rbach.priv.at/2006/buttons/xfolk.png

== Make your own buttons ==
=== Style 1 ===

Example: http://www.crowley.nl/images/hcard.png

Use the [http://kalsey.com/tools/buttonmaker/ Kalsey Button Maker] with the following settings:
* Outer border: #666666
* Inner border: #ffffff
* Bar position: 25 pixels from the left
* Left box text: >>>
* Left box background: #000000
* Left box text colour: #ffffff
* Left box text start: 7 pixels from the left
* Right box text: (The name of the microformat goes here)
* Right box background: #31757b
* Right box text colour: #ffffff
* Right box text start: 3 pixels from the bar

=== Style 2 ===

Example: http://rbach.priv.at/2006/buttons/hcal.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://rbach.priv.at/2006/buttons/blank.png)
# Type:
<pre>convert blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 28,10 'button label'"
output.png
</pre>

=== Style 3 ===

Example: http://files.synaesthetic.net/microformats/hatom.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://files.synaesthetic.net/microformats/button2-blank.png)
# Type:
<pre>convert button2-blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 20,10 'button label'"
output.png
</pre>

= Microformats Logos =

Rohit is a very poor CSS hacker, but gave it his best shot. He also [http://labs.commerce.net/~rohit/µf-logo.html rendered it at 72 and 18 points.]

http://microformats.org/img/logo.gif

<div style="position: relative; top:-46px; left:180px">
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div>

<div style="background-color:#85BC07; width:22px; height: 22px; left:11.5px; top:6px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white; -moz-border-radius:4pt;"></div>

<div style="background-color:#AEE219; width:14px; height: 14px; left:22.5px; top:4px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white;-moz-border-radius:2pt;"></div>

<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px">
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span>
</div>
</div>

The following logo as a transparent PNG (linked here from my own server; if you use it, please copy it for yourself):

http://files.synaesthetic.net/microformats/microformats1.png

== Palette ==

<div style="background-color:#AEE219; width:8em; height: 4ex;">#AEE219</div>

<div style="background-color:#85BC07; width:8em; height: 4ex;">#85BC07</div>

<div style="background-color:#679A06; width:8em; height: 4ex;">#679A06</div>

<br />
I created a cheatsheet using [http://bighugelabs.com/flickr/ Big Huge Lab]'s Badgemaker:<br />
[http://flickr.com/photos/hauntedpalace/1296783076/ http://farm2.static.flickr.com/1231/1296783076_1d6fe8a1f8_m_d.jpg]
--[[User:CarlaHufstedler|Carla]] 12:11, 1 Sep 2007 (PDT)

=Wiki buttons=
For use on this wiki.
*{{NewMarker}} - <nowiki>{{NewMarker}}</nowiki>
*{{SuccessMarker}} - <nowiki>{{SuccessMarker}}</nowiki>
*{{UpdateMarker}} - <nowiki>{{UpdateMarker}}</nowiki>

= Requests =

* Logos for all microformats

* When someone has time, these should be repeated on the page for each respective format.

==See also==

{{branding-see-also}}
* <span class="POSH logos">[[posh#Spread_POSH|POSH logos and buttons]]</span>

User:Kwilson

2007-06-30T23:35:35Z

Kwilson: Reverting spam edit

== Kenn Wilson ==

Linux sysadmin and web geek in San Francisco.

== External Links ==

* [http://www.inmostlight.org/ Personal site]
* [http://www.six23.net/ Professional site] (uses hCard and hResume)

hresume-examples-in-wild

2007-06-30T23:33:49Z

Kwilson: Updated URL

buttons

2007-06-19T14:44:24Z

Kwilson: Missed one

<h1>Microformats Buttons</h1>

There have been requests for buttons for various microformats. Either badges, or buttons that do something with the specific microformats. This page keeps a list of buttons, and requests as well. - [http://tantek.com/log/ Tantek]

Added hosted buttons for all the microformats, including the draft ones, as well as instructions on how to make your own buttons. (14 May 2006) - [http://www.wackomenace.co.uk/ Ruben]

==Licensing==

If you add links to buttons you have designed, '''please also include a statement''' that you do one of the following:
*release them into the public domain
*hold copyright, but release all rights as to it use
*license them under a specified free license, e.g. consider using a [http://creativecommons.org/ Creative Commons] license, such as [http://creativecommons.org/licenses/by/3.0 cc-by-3.0].

Thank you.

* Images below hosted at boogdesign.com are available under [http://creativecommons.org/licenses/by/2.0/ CC Attribution 2.0 License], see [http://www.boogdesign.com/buttons.html my buttons page] for the Photoshop files if you need them. - Rob Crowther

* Images below hosted at rbach.priv.at are available under [http://creativecommons.org/licenses/by/3.0 cc-by-3.0 license]. - [[User:RobertBachmann|Robert Bachmann]]

* Images below hosted at synaesthetic.net are available under the [http://creativecommons.org/licenses/by/3.0/ Creative Commons Attribution 3.0 license]. -- [[User:Kwilson|Kenn Wilson]]

__TOC__

== Buttons ==

=== Microformat Button ===
I've made a button for microformats. Since there are so many microformats and with more to come, just indicating support/ use of might be a good generic approach. The image is free to use. Please copy it to your own hosting account and not link to it.

http://www.crowley.nl/images/microformats.png

I already have a "I use
http://www.crowley.nl/images/microformats.png" on my blog: http://doncrowley.blogspot.com/

- Don Crowley

* http://www.boogdesign.com/images/buttons/microformat.png
* http://www.boogdesign.com/images/buttons/microformat_enabled.png
* http://www.boogdesign.com/images/buttons/emf_green.png
* http://www.boogdesign.com/images/buttons/mfe_green.png
* http://www.boogdesign.com/images/buttons/mwmf_green.png
* http://www.boogdesign.com/images/buttons/smf_green.png
* http://www.boogdesign.com/images/buttons/emf_white.png
* http://www.boogdesign.com/images/buttons/mfe_white.png
* http://www.boogdesign.com/images/buttons/mwmf_white.png
* http://www.boogdesign.com/images/buttons/smf_white.png

=== [[hcalendar|hCalendar]] ===
* http://rbach.priv.at/2006/buttons/hcal.png
* http://www.boogdesign.com/images/buttons/microformat_hcalendar.png
* CSS-powered button from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]:

<span class="badge" style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0; border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none; text-align: center;"><span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; margin-right: 0.1em;">›››</span> hCalendar</span>

Code (white space added for readability):

<pre><nowiki>
<span class="badge"
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;
text-align: center;">
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em;
margin-right: 0.1em;">
&#8250;&#8250;&#8250;
</span>
hCalendar
</span>
</nowiki></pre>

=== [[hcard|hCard]] ===
* http://www.crowley.nl/images/hcard.png (mirror: http://www.davidjanes.com/images/mf_hcard.png)
* http://rbach.priv.at/2006/buttons/hcard.png
* http://www.boogdesign.com/images/buttons/microformat_hcard.png
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]

=== [[rel-license]] ===
* http://rbach.priv.at/2006/buttons/license.png
* http://www.boogdesign.com/images/buttons/microformat_rellicense.png

=== [[rel-nofollow]] ===
* http://rbach.priv.at/2006/buttons/nofollow.png
* http://www.boogdesign.com/images/buttons/microformat_relnofollow.png

=== [[rel-tag]] ===
* http://rbach.priv.at/2006/buttons/rel-tag.png
* http://rbach.priv.at/2006/buttons/tag.png
* http://www.boogdesign.com/images/buttons/microformat_reltag.png

=== [[vote-links|VoteLinks]] ===
* http://rbach.priv.at/2006/buttons/votelinks.png
* http://www.boogdesign.com/images/buttons/microformat_votelinks.png

=== [http://gmpg.org/xfn/ XFN] ===
* http://rbach.priv.at/2006/buttons/xfn.png
* http://www.boogdesign.com/images/buttons/microformat_xfn.png

=== [http://gmpg.org/xmdp/ XMDP] ===
* http://rbach.priv.at/2006/buttons/xmdp.png
* http://www.boogdesign.com/images/buttons/microformat_xmdp.png

=== [[xoxo|XOXO]] ===
* http://rbach.priv.at/2006/buttons/xoxo.png
* http://www.boogdesign.com/images/buttons/microformat_xoxo.png

===CSS Styles for microformats===
I'm not sure wether this can be under buttons, but I don't know where else to put it. This is a stylesheet containing styles for most microformats. And, it's automatic. I release it under the cc by-sa. Please note that I am new to microformats, and if you can improve this, please do. [[User:Mac Lover|Mac Lover]] 13:25, 13 Apr 2007 (PDT)

[http://creativecommons.org/licenses/by-sa/3.0/us/ License]
[http://alyosha.bendebury.net/microformat-css.zip Zip]

== Buttons for draft formats ==

These may be subject to change if the names of the formats change when they are released.

=== [[adr]] ===
* http://rbach.priv.at/2006/buttons/adr.png

=== [[geo]] ===
* http://rbach.priv.at/2006/buttons/geo.png

=== [[hatom|hAtom]] ===
* http://rbach.priv.at/2006/buttons/hatom.png
* http://files.synaesthetic.net/public/microformats/hatom.png

=== [[hresume|hResume]] ===
* http://rbach.priv.at/2006/buttons/hresume.png
* http://www.boogdesign.com/images/buttons/microformat_hresume.png

=== [[hreview|hReview]] ===
* http://rbach.priv.at/2006/buttons/hreview.png

=== [[rel-directory]] ===
* http://rbach.priv.at/2006/buttons/directory.png

=== [[rel-enclosure]] ===
* http://rbach.priv.at/2006/buttons/enclosure.png

=== [[rel-home]] ===
* http://rbach.priv.at/2006/buttons/rel-home.png
* http://rbach.priv.at/2006/buttons/home.png

=== [[relpayment-research|rel-payment]] ===
* http://rbach.priv.at/2006/buttons/payment.png

=== [[robots-exclusion|Robots Exclusion]] ===
* http://rbach.priv.at/2006/buttons/robots.png

=== [[xfolk|xFolk]] ===
* http://rbach.priv.at/2006/buttons/xfolk.png

== Make your own buttons ==
=== Style 1 ===

Example: http://www.crowley.nl/images/hcard.png

Use the [http://kalsey.com/tools/buttonmaker/ Kalsey Button Maker] with the following settings:
* Outer border: #666666
* Inner border: #ffffff
* Bar position: 25 pixels from the left
* Left box text: >>>
* Left box background: #000000
* Left box text colour: #ffffff
* Left box text start: 7 pixels from the left
* Right box text: (The name of the microformat goes here)
* Right box background: #31757b
* Right box text colour: #ffffff
* Right box text start: 3 pixels from the bar

=== Style 2 ===

Example: http://rbach.priv.at/2006/buttons/hcal.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://rbach.priv.at/2006/buttons/blank.png)
# Type:
<pre>convert blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 28,10 'button label'"
output.png
</pre>

=== Style 3 ===

Example: http://files.synaesthetic.net/public/microformats/hatom.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://files.synaesthetic.net/public/microformats/button2-blank.png)
# Type:
<pre>convert button2-blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 20,10 'button label'"
output.png
</pre>

= Microformats Logos =
Rohit is a very poor CSS hacker, but gave it his best shot. He also [http://labs.commerce.net/~rohit/µf-logo.html rendered it at 72 and 18 points.]

http://microformats.org/img/logo.gif

<div style="position: relative; top:-46px; left:180px">
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div>

<div style="background-color:#85BC07; width:22px; height: 22px; left:11.5px; top:6px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white; -moz-border-radius:4pt;"></div>

<div style="background-color:#AEE219; width:14px; height: 14px; left:22.5px; top:4px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white;-moz-border-radius:2pt;"></div>

<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px">
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span>
</div>
</div>

The following logo as a transparent PNG (linked here from my own server; if you use it, please copy it for yourself):

http://files.synaesthetic.net/public/microformats/microformats1.png

==Palette==

<div style="background-color:#AEE219; width:8em; height: 4ex;">#AEE219</div>

<div style="background-color:#85BC07; width:8em; height: 4ex;">#85BC07</div>

<div style="background-color:#679A06; width:8em; height: 4ex;">#679A06</div>

=Wiki buttons=
For use on this wiki.
*{{NewMarker}} - <nowiki>{{NewMarker}}</nowiki>
*{{SuccessMarker}} - <nowiki>{{SuccessMarker}}</nowiki>
*{{UpdateMarker}} - <nowiki>{{UpdateMarker}}</nowiki>

= Requests =

* Logos for all microformats

* When someone has time, these should be repeated on the page for each respective format.

buttons

2007-06-19T14:42:33Z

Kwilson: Fixed hAtom button URL.

<h1>Microformats Buttons</h1>

There have been requests for buttons for various microformats. Either badges, or buttons that do something with the specific microformats. This page keeps a list of buttons, and requests as well. - [http://tantek.com/log/ Tantek]

Added hosted buttons for all the microformats, including the draft ones, as well as instructions on how to make your own buttons. (14 May 2006) - [http://www.wackomenace.co.uk/ Ruben]

==Licensing==

If you add links to buttons you have designed, '''please also include a statement''' that you do one of the following:
*release them into the public domain
*hold copyright, but release all rights as to it use
*license them under a specified free license, e.g. consider using a [http://creativecommons.org/ Creative Commons] license, such as [http://creativecommons.org/licenses/by/3.0 cc-by-3.0].

Thank you.

* Images below hosted at boogdesign.com are available under [http://creativecommons.org/licenses/by/2.0/ CC Attribution 2.0 License], see [http://www.boogdesign.com/buttons.html my buttons page] for the Photoshop files if you need them. - Rob Crowther

* Images below hosted at rbach.priv.at are available under [http://creativecommons.org/licenses/by/3.0 cc-by-3.0 license]. - [[User:RobertBachmann|Robert Bachmann]]

* Images below hosted at synaesthetic.net are available under the [http://creativecommons.org/licenses/by/3.0/ Creative Commons Attribution 3.0 license]. -- [[User:Kwilson|Kenn Wilson]]

__TOC__

== Buttons ==

=== Microformat Button ===
I've made a button for microformats. Since there are so many microformats and with more to come, just indicating support/ use of might be a good generic approach. The image is free to use. Please copy it to your own hosting account and not link to it.

http://www.crowley.nl/images/microformats.png

I already have a "I use
http://www.crowley.nl/images/microformats.png" on my blog: http://doncrowley.blogspot.com/

- Don Crowley

* http://www.boogdesign.com/images/buttons/microformat.png
* http://www.boogdesign.com/images/buttons/microformat_enabled.png
* http://www.boogdesign.com/images/buttons/emf_green.png
* http://www.boogdesign.com/images/buttons/mfe_green.png
* http://www.boogdesign.com/images/buttons/mwmf_green.png
* http://www.boogdesign.com/images/buttons/smf_green.png
* http://www.boogdesign.com/images/buttons/emf_white.png
* http://www.boogdesign.com/images/buttons/mfe_white.png
* http://www.boogdesign.com/images/buttons/mwmf_white.png
* http://www.boogdesign.com/images/buttons/smf_white.png

=== [[hcalendar|hCalendar]] ===
* http://rbach.priv.at/2006/buttons/hcal.png
* http://www.boogdesign.com/images/buttons/microformat_hcalendar.png
* CSS-powered button from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]:

<span class="badge" style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0; border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none; text-align: center;"><span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; margin-right: 0.1em;">›››</span> hCalendar</span>

Code (white space added for readability):

<pre><nowiki>
<span class="badge"
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;
text-align: center;">
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em;
margin-right: 0.1em;">
&#8250;&#8250;&#8250;
</span>
hCalendar
</span>
</nowiki></pre>

=== [[hcard|hCard]] ===
* http://www.crowley.nl/images/hcard.png (mirror: http://www.davidjanes.com/images/mf_hcard.png)
* http://rbach.priv.at/2006/buttons/hcard.png
* http://www.boogdesign.com/images/buttons/microformat_hcard.png
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]

=== [[rel-license]] ===
* http://rbach.priv.at/2006/buttons/license.png
* http://www.boogdesign.com/images/buttons/microformat_rellicense.png

=== [[rel-nofollow]] ===
* http://rbach.priv.at/2006/buttons/nofollow.png
* http://www.boogdesign.com/images/buttons/microformat_relnofollow.png

=== [[rel-tag]] ===
* http://rbach.priv.at/2006/buttons/rel-tag.png
* http://rbach.priv.at/2006/buttons/tag.png
* http://www.boogdesign.com/images/buttons/microformat_reltag.png

=== [[vote-links|VoteLinks]] ===
* http://rbach.priv.at/2006/buttons/votelinks.png
* http://www.boogdesign.com/images/buttons/microformat_votelinks.png

=== [http://gmpg.org/xfn/ XFN] ===
* http://rbach.priv.at/2006/buttons/xfn.png
* http://www.boogdesign.com/images/buttons/microformat_xfn.png

=== [http://gmpg.org/xmdp/ XMDP] ===
* http://rbach.priv.at/2006/buttons/xmdp.png
* http://www.boogdesign.com/images/buttons/microformat_xmdp.png

=== [[xoxo|XOXO]] ===
* http://rbach.priv.at/2006/buttons/xoxo.png
* http://www.boogdesign.com/images/buttons/microformat_xoxo.png

===CSS Styles for microformats===
I'm not sure wether this can be under buttons, but I don't know where else to put it. This is a stylesheet containing styles for most microformats. And, it's automatic. I release it under the cc by-sa. Please note that I am new to microformats, and if you can improve this, please do. [[User:Mac Lover|Mac Lover]] 13:25, 13 Apr 2007 (PDT)

[http://creativecommons.org/licenses/by-sa/3.0/us/ License]
[http://alyosha.bendebury.net/microformat-css.zip Zip]

== Buttons for draft formats ==

These may be subject to change if the names of the formats change when they are released.

=== [[adr]] ===
* http://rbach.priv.at/2006/buttons/adr.png

=== [[geo]] ===
* http://rbach.priv.at/2006/buttons/geo.png

=== [[hatom|hAtom]] ===
* http://rbach.priv.at/2006/buttons/hatom.png
* http://files.synaesthetic.net/public/microformats/hatom.png

=== [[hresume|hResume]] ===
* http://rbach.priv.at/2006/buttons/hresume.png
* http://www.boogdesign.com/images/buttons/microformat_hresume.png

=== [[hreview|hReview]] ===
* http://rbach.priv.at/2006/buttons/hreview.png

=== [[rel-directory]] ===
* http://rbach.priv.at/2006/buttons/directory.png

=== [[rel-enclosure]] ===
* http://rbach.priv.at/2006/buttons/enclosure.png

=== [[rel-home]] ===
* http://rbach.priv.at/2006/buttons/rel-home.png
* http://rbach.priv.at/2006/buttons/home.png

=== [[relpayment-research|rel-payment]] ===
* http://rbach.priv.at/2006/buttons/payment.png

=== [[robots-exclusion|Robots Exclusion]] ===
* http://rbach.priv.at/2006/buttons/robots.png

=== [[xfolk|xFolk]] ===
* http://rbach.priv.at/2006/buttons/xfolk.png

== Make your own buttons ==
=== Style 1 ===

Example: http://www.crowley.nl/images/hcard.png

Use the [http://kalsey.com/tools/buttonmaker/ Kalsey Button Maker] with the following settings:
* Outer border: #666666
* Inner border: #ffffff
* Bar position: 25 pixels from the left
* Left box text: >>>
* Left box background: #000000
* Left box text colour: #ffffff
* Left box text start: 7 pixels from the left
* Right box text: (The name of the microformat goes here)
* Right box background: #31757b
* Right box text colour: #ffffff
* Right box text start: 3 pixels from the bar

=== Style 2 ===

Example: http://rbach.priv.at/2006/buttons/hcal.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://rbach.priv.at/2006/buttons/blank.png)
# Type:
<pre>convert blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 28,10 'button label'"
output.png
</pre>

=== Style 3 ===

Example: http://files.synaesthetic.net/common/images/buttons/hatom.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://files.synaesthetic.net/public/microformats/button2-blank.png)
# Type:
<pre>convert button2-blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 20,10 'button label'"
output.png
</pre>

= Microformats Logos =
Rohit is a very poor CSS hacker, but gave it his best shot. He also [http://labs.commerce.net/~rohit/µf-logo.html rendered it at 72 and 18 points.]

http://microformats.org/img/logo.gif

<div style="position: relative; top:-46px; left:180px">
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div>

<div style="background-color:#85BC07; width:22px; height: 22px; left:11.5px; top:6px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white; -moz-border-radius:4pt;"></div>

<div style="background-color:#AEE219; width:14px; height: 14px; left:22.5px; top:4px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white;-moz-border-radius:2pt;"></div>

<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px">
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span>
</div>
</div>

The following logo as a transparent PNG (linked here from my own server; if you use it, please copy it for yourself):

http://files.synaesthetic.net/public/microformats/microformats1.png

==Palette==

<div style="background-color:#AEE219; width:8em; height: 4ex;">#AEE219</div>

<div style="background-color:#85BC07; width:8em; height: 4ex;">#85BC07</div>

<div style="background-color:#679A06; width:8em; height: 4ex;">#679A06</div>

=Wiki buttons=
For use on this wiki.
*{{NewMarker}} - <nowiki>{{NewMarker}}</nowiki>
*{{SuccessMarker}} - <nowiki>{{SuccessMarker}}</nowiki>
*{{UpdateMarker}} - <nowiki>{{UpdateMarker}}</nowiki>

= Requests =

* Logos for all microformats

* When someone has time, these should be repeated on the page for each respective format.

hresume-examples-in-wild

2007-05-15T17:27:55Z

Kwilson: URL update

User:Kwilson

2007-05-15T17:27:08Z

Kwilson: /* External Links */

User:Kwilson

2007-05-12T18:47:08Z

Kwilson: It would be nice if I had used the correct TLD on that link...

== Kenn Wilson ==

Linux sysadmin and web geek in San Francisco.

== External Links ==

* [http://www.inmostlight.org/ Personal site]
* [http://www.six23.net/kwilson/ Professional site] (uses hCard and hResume)

hresume-examples-in-wild

2007-05-12T18:46:55Z

Kwilson: It would be nice if I had used the correct TLD on that link...

hresume-examples-in-wild

2007-05-12T18:29:05Z

Kwilson: Updated URL

User:Kwilson

2007-05-12T18:23:35Z

Kwilson: Updated URL

== Kenn Wilson ==

Linux sysadmin and web geek in San Francisco.

== External Links ==

* [http://www.inmostlight.org/ Personal site]
* [http://www.six23.org/kwilson/ Professional site] (uses hCard and hResume)

hcalendar

2007-04-09T00:23:37Z

Kwilson: Removed jwz link that was just an excerpt from the other linked page.

<h1>hCalendar</h1>
http://www.boogdesign.com/images/buttons/microformat_hcalendar.png

hCalendar is a simple, open, distributed calendaring and events format, based on the iCalendar standard ([http://www.ietf.org/rfc/rfc2445.txt RFC2445]), suitable for embedding in (X)HTML, Atom, RSS, and arbitrary XML. hCalendar is one of several open [[microformats|microformat]] standards.

Want to get started with writing an [[hcalendar|hCalendar]] event? Use the [http://microformats.org/code/hcalendar/creator hCalendar creator] to write up an event and publish it, or follow the [[hcalendar-authoring|hCalendar authoring tips]] to add hCalendar markup to your page of upcoming events or events you mention in blog posts, wikis, etc.

__TOC__

== Specification ==

; Editor : [http://tantek.com/ Tantek Çelik] ([http://technorati.com Technorati, Inc])
; Authors : [http://tantek.com/ Tantek Çelik], [http://technorati.com Technorati, Inc]
: [http://suda.co.uk/ Brian Suda]

=== Copyright ===
{{MicroFormatCopyrightStatement2004}}

=== Patents ===
{{MicroFormatPatentStatement}}

=== Inspiration and Acknowledgments ===
Thanks to:
* Adam Bosworth for leading the [http://wiki.oreillynet.com/foocamp04/index.cgi?HTMLForCalendars FOO Camp 2004 HTML For Calendars presentation] which brought together a critical mass of interested parties.

== Introduction ==
The iCalendar standard ([http://www.ietf.org/rfc/rfc2445.txt RFC2445]), has been broadly interoperably implemented (e.g. Apple's "iCal" application built into MacOSX).

In addition, bloggers often discuss events on their blogs -- upcoming events, writeups of past events, etc. With just a tad bit of structure, bloggers can discuss events in their blog(s) in such a way that spiders and other aggregators can retrieve such events, automatically convert them to iCalendar, and use them in any iCalendar application or service.

This specification introduces the '''hCalendar''' format, which is a 1:1 representation of the aforementioned iCalendar standard, in semantic XHTML. Bloggers can both embed hCalendar events directly in their web pages, and style them with CSS to make them appear as desired. In addition, hCalendar enables applications to retrieve information about such events directly from web pages without having to reference a separate file.

== Semantic XHTML Design Principles ==

{{semantic-xhtml-design-principles}}

For practical implementations, it should be noted that Internet Explorer's support for styling <code><nowiki><abbr></nowiki></code> elements is poor, and may require wrapper elements.

== Format ==

=== In General ===

The iCalendar standard ([http://www.ietf.org/rfc/rfc2445.txt RFC2445]) forms the basis of hCalendar.

Note: the editor and authors of this specification are tracking the [http://lists.osafoundation.org/pipermail/ietf-calsify/ "iCal-Basic" effort] and intend to base the core hCalendar profile on iCal-Basic. See references for a link to the current draft.

The basic format of hCalendar is to use iCalendar object/property names in lower-case for class names, and to map the nesting of iCalendar objects directly into nested XHTML.

=== More Semantic Equivalents ===

However, for some properties there is a more semantic equivalent, and therefore they get special treatment, e.g.:
* <code>URL</code> in iCalendar becomes <code><a class="url" href="...">...</a></code> inside the element with <code>class="vevent"</code> in hCalendar.
* <code>ATTENDEE</code>, <code>CONTACT</code>, and <code>ORGANIZER</code> in iCalendar may be represented by an [[hcard|hCard]] in hCalendar .
* A named <code>LOCATION</code> (potentially with an address and/or geo) in iCalendar may be represented by a nested [[hcard|hCard]] in hCalendar. Similarly, an address <code>LOCATION</code> may be represented by an [[adr]], and a geo (latitude and longitude) <code>LOCATION</code> may be represented by a [[geo]].
* <code>UID</code> in iCalendar simply becomes another semantic applied to a specific URL for an hCalendar event.

=== Singular vs. Plural Properties ===

For properties which are singular (e.g. "N" and "FN" from vCard), the first descendant element with that class should take effect, any others being ignored.

For properties which can be plural (e.g. "TEL" from vCard), each class instance should create a instance of that property. Plural properties with subtypes (e.g. TEL with WORK, HOME, CELL from vCard) can be optimized to share a common element for the property itself, with each instance of subtype being an appropriately classed descendant of the property element.

==== Plural Properties Singularized ====

Since plural property names become their singular equivalents, even if the original plural property permitted only a single value with multiple components, those multiple components are represented each with their own singularly named property and the the property is effectively multivalued and subject to the above treatment of multivalued properties.

=== Human vs. Machine readable ===
If an <code><nowiki><abbr></nowiki></code> element is used for a property, then the '<code>title</code>' attribute of the <code><nowiki><abbr></nowiki></code> element is the value of the property, instead of the contents of the element, which instead provide a human presentable version of the value. This specification recommends that such <code><nowiki><abbr></nowiki></code> elements be used for the following iCalendar properties:
* DTSTART, DTEND, DURATION, RDATE, RRULE

== Example ==

Here is a sample event in an iCalendar:
<pre><nowiki>
BEGIN:VCALENDAR
PRODID:-//XYZproduct//EN
VERSION:2.0
BEGIN:VEVENT
URL:http://www.web2con.com/
DTSTART:20071005
DTEND:20071020
SUMMARY:Web 2.0 Conference
LOCATION:Argent Hotel\, San Francisco\, CA
END:VEVENT
END:VCALENDAR
</nowiki></pre>

and an equivalent event in hCalendar format with various elements optimized appropriately. See [[hcalendar-example1-steps]] for the derivation.

<pre><nowiki>
<div class="vevent">
<a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
<span class="summary">Web 2.0 Conference</span>:
<abbr class="dtstart" title="2007-10-05">October 5</abbr>-
<abbr class="dtend" title="2007-10-20">19</abbr>,
at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>
</nowiki></pre>

which could be displayed as:

<div class="vevent">
<span class="url">http://www.web2con.com/</span> 
<span class="summary">Web 2.0 Conference</span>:
<abbr class="dtstart" title="2007-10-05">October 5</abbr>-
<abbr class="dtend" title="2007-10-20">19</abbr>,
at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>

Note that this is a '''live''' hCalendar microformat, which will be found on this page by parsers.

=== Example 2===

The following example specifies a scheduled meeting that begins
at 8:30 AM EST on March 12, 1998 and ends at 9:30 AM EST on March 12,
1998.

<pre><nowiki>
BEGIN:VCALENDAR
BEGIN:VEVENT
UID:guid-1.host1.com
DTSTAMP:19980309T231000Z
DESCRIPTION:Project XYZ Review Meeting
SUMMARY:XYZ Project Review
DTSTART:19980312T133000Z
DTEND:19980312T143000Z
LOCATION:1CP Conference Room 4350
END:VEVENT
END:VCALENDAR
</nowiki></pre>

The equivalent in hCalendar:

<pre><nowiki>
<div class="vevent">
<h3 class="summary">XYZ Project Review</h3>
<p class="description">Project XYZ Review Meeting</p>
<p>To held on <abbr class="dtstart" title="1998-03-12T08:30:00-05:00">12 March 1998 from 8:30am EST</abbr>
until <abbr class="dtend" title="1998-03-12T09:30:00-05:00">9:30am EST</abbr></p>
<p>Location: <span class="location">1CP Conference Room 4350</span></p>
<small>Booked by: <span class="uid">guid-1.host1.com</span> on
<abbr class="dtstamp" title="19980309T231000Z">9 Mar 1998 6:00pm</abbr></small>
</div>
</nowiki></pre>

This could be displayed as:

----

<div class="vevent">

<h3 class="summary">XYZ Project Review</h3>
<p class="description">Project XYZ Review Meeting</p>
<p>To held on <abbr class="dtstart" title="1998-03-12T08:30:00-05:00">12 March 1998 from 8:30am EST</abbr>
until <abbr class="dtend" title="1998-03-12T09:30:00-05:00">9:30am EST</abbr></p>
<p>Location: <span class="location">1CP Conference Room 4350</span></p>
<small>Booked by: <span class="uid">guid-1.host1.com</span> on
<abbr class="dtstamp" title="19980309T231000Z">9 Mar 1998 6:00pm</abbr></small></div>

----

Note 1: The product information is not necessary since hCalendar is an interchange format. When transforming hCalendar back into iCalendar, the transforming engine should add its own product ID.

Note 2: A surrounding <code><nowiki><span class="vcalendar"></nowiki></code> element is optional, and is left out as such. It is optional since the context of a vcalendar is implied when a vevent is encountered. The implied context/scope is that of the document. Authors may explicitly use elements with class="vcalendar" to wrap sets of vevents that all belong to the same calendar, e.g. when publishing multiple calendars on the same page.

Note 3: The version information is unnecessary in hCalendar markup directly since the version will be defined by the profile of hCalendar that is used/referred to in the 'profile' attribute of the <head> element.

Note 4: ISO8601 dates (required by iCalendar) are not very human friendly. In addition, the year is often understood implicitly by humans from the context. Thus <code><nowiki><abbr></nowiki></code> elements are used to simultaneously provide a human friendly date and/or time in the visible contents of the element, while placing the respective machine parsable comprehensive ISO8601 datetime in the 'title' attribute.
The notation <code>YYYY-MM-DDThh:mm:ss</code> should be used for better readability, following the format of RFC 3339.

Note 5: The difference between the DTEND ISO8601 date (2005-10-08) and the human readable date (7) is NOT a mistake. [http://lists.osafoundation.org/pipermail/ietf-calsify/2005-September/000769.html DTEND is exclusive], meaning, that the event ends just before the DTEND. Thus for events which start on one day and end on another day, the DTEND date must be specified as the day after the day that a human would say is the last day of the event.

Note 6: The location in this example contains implicit structure (venue name, city, state) which could be marked up explicitly as an [[hcard|hCard]]. See [http://microformats.org/wiki/hcalendar-brainstorming#hCard_locations hCalendar brainstorming: hCard locations] for a informative explanation of how to do this.

==Buttons==
Don't forget that you can add one of our [[buttons#hCalendar|buttons]] to the page, to indicate the presence of hCalendar microformats. For example: http://www.boogdesign.com/images/buttons/microformat_hcalendar.png. If you can link it back to this page (or even page on your website, about your use of the microformat), so much the better!

=== More Examples ===
See [[hcalendar-examples|hCalendar examples]] for more examples, including examples from iCalendar RFC 2445 converted into hCalendar.

== Examples in the wild ==
This section is '''informative'''. The number of hCalendar examples in the wild has expanded far beyond the capacity of being kept inline in this specification. They have been moved to a [[hcalendar-examples-in-wild|separate page]].

See [[hcalendar-examples-in-wild|hCalendar Examples in the wild]].

== Implementations ==
This section is '''informative'''. The number of hCalendar implementations has also expanded beyond the capacity of keeping them inline. They have been moved to a [[hcalendar-implementations|separate page]].

See [[hcalendar-implementations|hCalendar Implementations]].

== References ==
=== Normative References ===
* [http://www.w3.org/TR/2002/REC-xhtml1-20020801/ XHTML 1.0 SE]
* [[hcard|hCard]]
* [http://www.ietf.org/rfc/rfc2445.txt iCalendar RFC2445]

=== Informative References ===
* [http://w3.org/TR/REC-CSS1 CSS1]
* [http://tantek.com/log/2004/09.html#hcalendar hCalendar term introduced and defined on the Web, 20040930]
* [http://wiki.oreillynet.com/foocamp04/index.cgi?HTMLForCalendars FOO Camp 2004 HTML For Calendars presentation, 20040911]
* [http://wiki.oreillynet.com/foocamp04/index.cgi?SimpleSemanticFormats FOO Camp 2004 Simple Semantic Formats presentation, 20040910]
* [http://ietfreport.isoc.org/idref/draft-royer-ical-basic/ iCal-Basic (latest)] [http://www.faqs.org/ftp/pub/pub/internet-drafts/draft-royer-ical-basic-04.txt (draft 04)]
* Contributed from http://developers.technorati.com/wiki/hCalendar
* [http://www.w3.org/TR/xhtml11 XHTML 1.1]
* [http://www.imc.org/pdi/ Internet Mail Consortium Personal Data Interchange vCard and vCalendar]

==== Specifications That Use hCalendar ====
* [[hreview|hReview]]

==== Similar Work ====
* [http://lists.osafoundation.org/pipermail/ietf-calsify/ IETF-calsify archives]
* [http://www.softwarestudio.org/iCal/2445Issues.html RFC2445 Issues List]
* [http://ietf.webdav.org/calsify/ CALSIFY WG Links And Resources]

== Further Reading ==
* [http://www.jwz.org/doc/groupware.html Groupware Bad by Jamie Zawinski] crystalizes the reason for hCalendar ('''emphasis''' added):
<blockquote>Right now people can do that by publishing .ics files, but it's not trivial to do so, and it's work on the part of other people to look at them. '''If it's not HTML hanging off our friend's home page that can be viewed in any browser on a public terminal in a library, the bar to entry is too high and it's useless.'''</blockquote>

* [http://muddybranch.thejkgroup.com/ Jason Klemow's blog]
* [http://weblog.infoworld.com/udell/2006/01/11.html#a1368 Moving forward with microformats] by [http://weblog.infoworld.com/udell Jon Udell] provides an hCalendar example and some discussion.
* See also [http://www.technorati.com/cosmos/referer.html blogs discussing this page] and the [http://technorati.com/tags/hcalendar hCalendar tag]
* [http://en.wikipedia.org/wiki/HCalendar Wikipedia article on hCalendar] (requires expansion)

== Related Pages ==
{{hcalendar-related-pages}}

buttons

2007-04-09T00:20:48Z

Kwilson: Added license info for my button images.

<h1>Microformats Buttons</h1>

There have been requests for buttons for various microformats. Either badges, or buttons that do something with the specific microformats. This page keeps a list of buttons, and requests as well. - [http://tantek.com/log/ Tantek]

Added hosted buttons for all the microformats, including the draft ones, as well as instructions on how to make your own buttons. (14 May 2006) - [http://www.wackomenace.co.uk/ Ruben]

==Licensing==

If you add links to buttons you have designed, '''please also include a statement''' that you do one of the following:
*release them into the public domain
*hold copyright, but release all rights as to it use
*license them under a specified free license, e.g. consider using a [http://creativecommons.org/ Creative Commons] license, such as [http://creativecommons.org/licenses/by/3.0 cc-by-3.0].

Thank you.

* Images below hosted at boogdesign.com are available under [http://creativecommons.org/licenses/by/2.0/ CC Attribution 2.0 License], see [http://www.boogdesign.com/buttons.html my buttons page] for the Photoshop files if you need them. - Rob Crowther

* Images below hosted at rbach.priv.at are available under [http://creativecommons.org/licenses/by/3.0 cc-by-3.0 license]. - [[User:RobertBachmann|Robert Bachmann]]

* Images below hosted at synaesthetic.net are available under the [http://creativecommons.org/licenses/by/3.0/ Creative Commons Attribution 3.0 license]. -- [[User:Kwilson|Kenn Wilson]]

__TOC__

== Buttons ==

=== Microformat Button ===
I've made a button for microformats. Since there are so many microformats and with more to come, just indicating support/ use of might be a good generic approach. The image is free to use. Please copy it to your own hosting account and not link to it.

http://www.crowley.nl/images/microformats.png

I already have a "I use
http://www.crowley.nl/images/microformats.png" on my blog: http://doncrowley.blogspot.com/

- Don Crowley

* http://www.boogdesign.com/images/buttons/microformat.png
* http://www.boogdesign.com/images/buttons/microformat_enabled.png
* http://www.boogdesign.com/images/buttons/emf_green.png
* http://www.boogdesign.com/images/buttons/mfe_green.png
* http://www.boogdesign.com/images/buttons/mwmf_green.png
* http://www.boogdesign.com/images/buttons/smf_green.png
* http://www.boogdesign.com/images/buttons/emf_white.png
* http://www.boogdesign.com/images/buttons/mfe_white.png
* http://www.boogdesign.com/images/buttons/mwmf_white.png
* http://www.boogdesign.com/images/buttons/smf_white.png

=== [[hcalendar|hCalendar]] ===
* http://rbach.priv.at/2006/buttons/hcal.png
* http://www.boogdesign.com/images/buttons/microformat_hcalendar.png
* CSS-powered button from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]:

<span class="badge" style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0; border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none; text-align: center;"><span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; margin-right: 0.1em;">›››</span> hCalendar</span>

Code (white space added for readability):

<pre><nowiki>
<span class="badge"
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;
text-align: center;">
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em;
margin-right: 0.1em;">
&#8250;&#8250;&#8250;
</span>
hCalendar
</span>
</nowiki></pre>

=== [[hcard|hCard]] ===
* http://www.crowley.nl/images/hcard.png (mirror: http://www.davidjanes.com/images/mf_hcard.png)
* http://rbach.priv.at/2006/buttons/hcard.png
* http://www.boogdesign.com/images/buttons/microformat_hcard.png
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]

=== [[rel-license]] ===
* http://rbach.priv.at/2006/buttons/license.png
* http://www.boogdesign.com/images/buttons/microformat_rellicense.png

=== [[rel-nofollow]] ===
* http://rbach.priv.at/2006/buttons/nofollow.png
* http://www.boogdesign.com/images/buttons/microformat_relnofollow.png

=== [[rel-tag]] ===
* http://rbach.priv.at/2006/buttons/rel-tag.png
* http://rbach.priv.at/2006/buttons/tag.png
* http://www.boogdesign.com/images/buttons/microformat_reltag.png

=== [[vote-links|VoteLinks]] ===
* http://rbach.priv.at/2006/buttons/votelinks.png
* http://www.boogdesign.com/images/buttons/microformat_votelinks.png

=== [http://gmpg.org/xfn/ XFN] ===
* http://rbach.priv.at/2006/buttons/xfn.png
* http://www.boogdesign.com/images/buttons/microformat_xfn.png

=== [http://gmpg.org/xmdp/ XMDP] ===
* http://rbach.priv.at/2006/buttons/xmdp.png
* http://www.boogdesign.com/images/buttons/microformat_xmdp.png

=== [[xoxo|XOXO]] ===
* http://rbach.priv.at/2006/buttons/xoxo.png
* http://www.boogdesign.com/images/buttons/microformat_xoxo.png

== Buttons for draft formats ==

These may be subject to change if the names of the formats change when they are released.

=== [[adr]] ===
* http://rbach.priv.at/2006/buttons/adr.png

=== [[geo]] ===
* http://rbach.priv.at/2006/buttons/geo.png

=== [[hatom|hAtom]] ===
* http://rbach.priv.at/2006/buttons/hatom.png
* http://files.synaesthetic.net/common/images/buttons/hatom.png

=== [[hresume|hResume]] ===
* http://rbach.priv.at/2006/buttons/hresume.png
* http://www.boogdesign.com/images/buttons/microformat_hresume.png

=== [[hreview|hReview]] ===
* http://rbach.priv.at/2006/buttons/hreview.png

=== [[rel-directory]] ===
* http://rbach.priv.at/2006/buttons/directory.png

=== [[rel-enclosure]] ===
* http://rbach.priv.at/2006/buttons/enclosure.png

=== [[rel-home]] ===
* http://rbach.priv.at/2006/buttons/rel-home.png
* http://rbach.priv.at/2006/buttons/home.png

=== [[relpayment-research|rel-payment]] ===
* http://rbach.priv.at/2006/buttons/payment.png

=== [[robots-exclusion|Robots Exclusion]] ===
* http://rbach.priv.at/2006/buttons/robots.png

=== [[xfolk|xFolk]] ===
* http://rbach.priv.at/2006/buttons/xfolk.png

== Make your own buttons ==
=== Style 1 ===

Example: http://www.crowley.nl/images/hcard.png

Use the [http://kalsey.com/tools/buttonmaker/ Kalsey Button Maker] with the following settings:
* Outer border: #666666
* Inner border: #ffffff
* Bar position: 25 pixels from the left
* Left box text: >>>
* Left box background: #000000
* Left box text colour: #ffffff
* Left box text start: 7 pixels from the left
* Right box text: (The name of the microformat goes here)
* Right box background: #31757b
* Right box text colour: #ffffff
* Right box text start: 3 pixels from the bar

=== Style 2 ===

Example: http://rbach.priv.at/2006/buttons/hcal.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://rbach.priv.at/2006/buttons/blank.png)
# Type:
<pre>convert blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 28,10 'button label'"
output.png
</pre>

=== Style 3 ===

Example: http://files.synaesthetic.net/common/images/buttons/hatom.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://files.synaesthetic.net/public/microformats/button2-blank.png)
# Type:
<pre>convert button2-blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 20,10 'button label'"
output.png
</pre>

= Microformats Logos =
Rohit is a very poor CSS hacker, but gave it his best shot. He also [http://labs.commerce.net/~rohit/µf-logo.html rendered it at 72 and 18 points.]

http://microformats.org/img/logo.gif

<div style="position: relative; top:-46px; left:180px">
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div>

<div style="background-color:#85BC07; width:22px; height: 22px; left:11.5px; top:6px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white; -moz-border-radius:4pt;"></div>

<div style="background-color:#AEE219; width:14px; height: 14px; left:22.5px; top:4px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white;-moz-border-radius:2pt;"></div>

<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px">
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span>
</div>
</div>

The following logo as a transparent PNG (linked here from my own server; if you use it, please copy it for yourself):

http://files.synaesthetic.net/public/microformats/microformats1.png

==Palette==

<div style="background-color:#AEE219; width:8em; height: 4ex;">#AEE219</div>

<div style="background-color:#85BC07; width:8em; height: 4ex;">#85BC07</div>

<div style="background-color:#679A06; width:8em; height: 4ex;">#679A06</div>

=Wiki buttons=
For use on this wiki.
*{{NewMarker}} - <nowiki>{{NewMarker}}</nowiki>
*{{SuccessMarker}} - <nowiki>{{SuccessMarker}}</nowiki>
*{{UpdateMarker}} - <nowiki>{{UpdateMarker}}</nowiki>

= Requests =

* Logos for all microformats

* When someone has time, these should be repeated on the page for each respective format.

buttons

2007-02-28T04:41:54Z

Kwilson: /* Style 3 */

= Microformats Buttons =

There have been requests for buttons for various microformats. Either badges, or buttons that do something with the specific microformats. This page keeps a list of buttons, and requests as well. - [http://tantek.com/log/ Tantek]

Added hosted buttons for all the microformats, including the draft ones, as well as instructions on how to make your own buttons. (14 May 2006) - [http://www.wackomenace.co.uk/ Ruben]

== Buttons ==

=== Microformat Banner ===
I've made a banner for microformats. Since there are so many microformats and with more to come, just indicating support/ use of might be a good generic approach. The image is free to use. Please copy it to your own hosting account and not link to it.

http://www.crowley.nl/images/microformats.png

I already have a "I use
http://www.crowley.nl/images/microformats.png" on my blog: http://doncrowley.blogspot.com/

- Don Crowley

* http://www.boogdesign.com/images/buttons/microformat.png
* http://www.boogdesign.com/images/buttons/microformat_enabled.png
* http://www.boogdesign.com/images/buttons/emf_green.png
* http://www.boogdesign.com/images/buttons/mfe_green.png
* http://www.boogdesign.com/images/buttons/mwmf_green.png
* http://www.boogdesign.com/images/buttons/smf_green.png
* http://www.boogdesign.com/images/buttons/emf_white.png
* http://www.boogdesign.com/images/buttons/mfe_white.png
* http://www.boogdesign.com/images/buttons/mwmf_white.png
* http://www.boogdesign.com/images/buttons/smf_white.png

=== [[hcalendar|hCalendar]] ===
* http://rbach.priv.at/2006/buttons/hcal.png
* http://www.boogdesign.com/images/buttons/microformat_hcalendar.png
* CSS-powered button from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]:

<span class="badge" style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0; border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none; text-align: center;"><span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; margin-right: 0.1em;">›››</span> hCalendar</span>

Code (white space added for readability):

<pre><nowiki>
<span class="badge"
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;
text-align: center;">
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em;
margin-right: 0.1em;">
&#8250;&#8250;&#8250;
</span>
hCalendar
</span>
</nowiki></pre>

=== [[hcard|hCard]] ===
* http://www.crowley.nl/images/hcard.png (mirror: http://www.davidjanes.com/images/mf_hcard.png)
* http://rbach.priv.at/2006/buttons/hcard.png
* http://www.boogdesign.com/images/buttons/microformat_hcard.png
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]

=== [[rel-license]] ===
* http://rbach.priv.at/2006/buttons/license.png
* http://www.boogdesign.com/images/buttons/microformat_rellicense.png

=== [[rel-nofollow]] ===
* http://rbach.priv.at/2006/buttons/nofollow.png
* http://www.boogdesign.com/images/buttons/microformat_relnofollow.png

=== [[rel-tag]] ===
* http://rbach.priv.at/2006/buttons/rel-tag.png
* http://rbach.priv.at/2006/buttons/tag.png
* http://www.boogdesign.com/images/buttons/microformat_reltag.png

=== [[vote-links|VoteLinks]] ===
* http://rbach.priv.at/2006/buttons/votelinks.png
* http://www.boogdesign.com/images/buttons/microformat_votelinks.png

=== [http://gmpg.org/xfn/ XFN] ===
* http://rbach.priv.at/2006/buttons/xfn.png
* http://www.boogdesign.com/images/buttons/microformat_xfn.png

=== [http://gmpg.org/xmdp/ XMDP] ===
* http://rbach.priv.at/2006/buttons/xmdp.png
* http://www.boogdesign.com/images/buttons/microformat_xmdp.png

=== [[xoxo|XOXO]] ===
* http://rbach.priv.at/2006/buttons/xoxo.png
* http://www.boogdesign.com/images/buttons/microformat_xoxo.png

== Buttons for draft formats ==

These may be subject to change if the names of the formats change when they are released.

=== [[adr]] ===
* http://rbach.priv.at/2006/buttons/adr.png

=== [[geo]] ===
* http://rbach.priv.at/2006/buttons/geo.png

=== [[hatom|hAtom]] ===
* http://rbach.priv.at/2006/buttons/hatom.png
* http://files.synaesthetic.net/common/images/buttons/hatom.png

=== [[hresume|hResume]] ===
* http://rbach.priv.at/2006/buttons/hresume.png
* http://www.boogdesign.com/images/buttons/microformat_hresume.png

=== [[hreview|hReview]] ===
* http://rbach.priv.at/2006/buttons/hreview.png

=== [[rel-directory]] ===
* http://rbach.priv.at/2006/buttons/directory.png

=== [[rel-enclosure]] ===
* http://rbach.priv.at/2006/buttons/enclosure.png

=== [[rel-home]] ===
* http://rbach.priv.at/2006/buttons/rel-home.png
* http://rbach.priv.at/2006/buttons/home.png

=== [[relpayment-research|rel-payment]] ===
* http://rbach.priv.at/2006/buttons/payment.png

=== [[robots-exclusion|Robots Exclusion]] ===
* http://rbach.priv.at/2006/buttons/robots.png

=== [[xfolk|xFolk]] ===
* http://rbach.priv.at/2006/buttons/xfolk.png

== Make your own buttons ==
=== Style 1 ===

Example: http://www.crowley.nl/images/hcard.png

Use the [http://kalsey.com/tools/buttonmaker/ Kalsey Button Maker] with the following settings:
* Outer border: #666666
* Inner border: #ffffff
* Bar position: 25 pixels from the left
* Left box text: >>>
* Left box background: #000000
* Left box text colour: #ffffff
* Left box text start: 7 pixels from the left
* Right box text: (The name of the microformat goes here)
* Right box background: #31757b
* Right box text colour: #ffffff
* Right box text start: 3 pixels from the bar

=== Style 2 ===

Example: http://rbach.priv.at/2006/buttons/hcal.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://rbach.priv.at/2006/buttons/blank.png)
# Type:
<pre>convert blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 28,10 'button label'"
output.png
</pre>

=== Style 3 ===

Example: http://files.synaesthetic.net/common/images/buttons/hatom.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://files.synaesthetic.net/public/microformats/button2-blank.png)
# Type:
<pre>convert button2-blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 20,10 'button label'"
output.png
</pre>

= Microformats Logos =
Rohit is a very poor CSS hacker, but gave it his best shot. He also [http://labs.commerce.net/~rohit/µf-logo.html rendered it at 72 and 18 points.]

http://microformats.org/img/logo.gif

<div style="position: relative; top:-46px; left:180px">
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div>

<div style="background-color:#85BC07; width:22px; height: 22px; left:11.5px; top:6px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white; -moz-border-radius:4pt;"></div>

<div style="background-color:#AEE219; width:14px; height: 14px; left:22.5px; top:4px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white;-moz-border-radius:2pt;"></div>

<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px">
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span>
</div>
</div>

The above logo as a transparent PNG (linked here from my own server; if you use it, please copy it for yourself):

http://files.synaesthetic.net/public/microformats/microformats1.png

= Requests =

* Logos for all microformats

* When someone has time, these should be repeated on the page for each respective format.

buttons

2007-02-28T04:41:33Z

Kwilson: /* Microformats Logos */

= Microformats Buttons =

There have been requests for buttons for various microformats. Either badges, or buttons that do something with the specific microformats. This page keeps a list of buttons, and requests as well. - [http://tantek.com/log/ Tantek]

Added hosted buttons for all the microformats, including the draft ones, as well as instructions on how to make your own buttons. (14 May 2006) - [http://www.wackomenace.co.uk/ Ruben]

== Buttons ==

=== Microformat Banner ===
I've made a banner for microformats. Since there are so many microformats and with more to come, just indicating support/ use of might be a good generic approach. The image is free to use. Please copy it to your own hosting account and not link to it.

http://www.crowley.nl/images/microformats.png

I already have a "I use
http://www.crowley.nl/images/microformats.png" on my blog: http://doncrowley.blogspot.com/

- Don Crowley

* http://www.boogdesign.com/images/buttons/microformat.png
* http://www.boogdesign.com/images/buttons/microformat_enabled.png
* http://www.boogdesign.com/images/buttons/emf_green.png
* http://www.boogdesign.com/images/buttons/mfe_green.png
* http://www.boogdesign.com/images/buttons/mwmf_green.png
* http://www.boogdesign.com/images/buttons/smf_green.png
* http://www.boogdesign.com/images/buttons/emf_white.png
* http://www.boogdesign.com/images/buttons/mfe_white.png
* http://www.boogdesign.com/images/buttons/mwmf_white.png
* http://www.boogdesign.com/images/buttons/smf_white.png

=== [[hcalendar|hCalendar]] ===
* http://rbach.priv.at/2006/buttons/hcal.png
* http://www.boogdesign.com/images/buttons/microformat_hcalendar.png
* CSS-powered button from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]:

<span class="badge" style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0; border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none; text-align: center;"><span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; margin-right: 0.1em;">›››</span> hCalendar</span>

Code (white space added for readability):

<pre><nowiki>
<span class="badge"
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;
text-align: center;">
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em;
margin-right: 0.1em;">
&#8250;&#8250;&#8250;
</span>
hCalendar
</span>
</nowiki></pre>

=== [[hcard|hCard]] ===
* http://www.crowley.nl/images/hcard.png (mirror: http://www.davidjanes.com/images/mf_hcard.png)
* http://rbach.priv.at/2006/buttons/hcard.png
* http://www.boogdesign.com/images/buttons/microformat_hcard.png
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]

=== [[rel-license]] ===
* http://rbach.priv.at/2006/buttons/license.png
* http://www.boogdesign.com/images/buttons/microformat_rellicense.png

=== [[rel-nofollow]] ===
* http://rbach.priv.at/2006/buttons/nofollow.png
* http://www.boogdesign.com/images/buttons/microformat_relnofollow.png

=== [[rel-tag]] ===
* http://rbach.priv.at/2006/buttons/rel-tag.png
* http://rbach.priv.at/2006/buttons/tag.png
* http://www.boogdesign.com/images/buttons/microformat_reltag.png

=== [[vote-links|VoteLinks]] ===
* http://rbach.priv.at/2006/buttons/votelinks.png
* http://www.boogdesign.com/images/buttons/microformat_votelinks.png

=== [http://gmpg.org/xfn/ XFN] ===
* http://rbach.priv.at/2006/buttons/xfn.png
* http://www.boogdesign.com/images/buttons/microformat_xfn.png

=== [http://gmpg.org/xmdp/ XMDP] ===
* http://rbach.priv.at/2006/buttons/xmdp.png
* http://www.boogdesign.com/images/buttons/microformat_xmdp.png

=== [[xoxo|XOXO]] ===
* http://rbach.priv.at/2006/buttons/xoxo.png
* http://www.boogdesign.com/images/buttons/microformat_xoxo.png

== Buttons for draft formats ==

These may be subject to change if the names of the formats change when they are released.

=== [[adr]] ===
* http://rbach.priv.at/2006/buttons/adr.png

=== [[geo]] ===
* http://rbach.priv.at/2006/buttons/geo.png

=== [[hatom|hAtom]] ===
* http://rbach.priv.at/2006/buttons/hatom.png
* http://files.synaesthetic.net/common/images/buttons/hatom.png

=== [[hresume|hResume]] ===
* http://rbach.priv.at/2006/buttons/hresume.png
* http://www.boogdesign.com/images/buttons/microformat_hresume.png

=== [[hreview|hReview]] ===
* http://rbach.priv.at/2006/buttons/hreview.png

=== [[rel-directory]] ===
* http://rbach.priv.at/2006/buttons/directory.png

=== [[rel-enclosure]] ===
* http://rbach.priv.at/2006/buttons/enclosure.png

=== [[rel-home]] ===
* http://rbach.priv.at/2006/buttons/rel-home.png
* http://rbach.priv.at/2006/buttons/home.png

=== [[relpayment-research|rel-payment]] ===
* http://rbach.priv.at/2006/buttons/payment.png

=== [[robots-exclusion|Robots Exclusion]] ===
* http://rbach.priv.at/2006/buttons/robots.png

=== [[xfolk|xFolk]] ===
* http://rbach.priv.at/2006/buttons/xfolk.png

== Make your own buttons ==
=== Style 1 ===

Example: http://www.crowley.nl/images/hcard.png

Use the [http://kalsey.com/tools/buttonmaker/ Kalsey Button Maker] with the following settings:
* Outer border: #666666
* Inner border: #ffffff
* Bar position: 25 pixels from the left
* Left box text: >>>
* Left box background: #000000
* Left box text colour: #ffffff
* Left box text start: 7 pixels from the left
* Right box text: (The name of the microformat goes here)
* Right box background: #31757b
* Right box text colour: #ffffff
* Right box text start: 3 pixels from the bar

=== Style 2 ===

Example: http://rbach.priv.at/2006/buttons/hcal.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://rbach.priv.at/2006/buttons/blank.png)
# Type:
<pre>convert blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 28,10 'button label'"
output.png
</pre>

=== Style 3 ===

Example: http://files.synaesthetic.net/common/images/buttons/hatom.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://files.synaesthetic.net/microformats/button2-blank.png)
# Type:
<pre>convert button2-blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 20,10 'button label'"
output.png
</pre>

= Microformats Logos =
Rohit is a very poor CSS hacker, but gave it his best shot. He also [http://labs.commerce.net/~rohit/µf-logo.html rendered it at 72 and 18 points.]

http://microformats.org/img/logo.gif

<div style="position: relative; top:-46px; left:180px">
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div>

<div style="background-color:#85BC07; width:22px; height: 22px; left:11.5px; top:6px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white; -moz-border-radius:4pt;"></div>

<div style="background-color:#AEE219; width:14px; height: 14px; left:22.5px; top:4px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white;-moz-border-radius:2pt;"></div>

<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px">
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span>
</div>
</div>

The above logo as a transparent PNG (linked here from my own server; if you use it, please copy it for yourself):

http://files.synaesthetic.net/public/microformats/microformats1.png

= Requests =

* Logos for all microformats

* When someone has time, these should be repeated on the page for each respective format.

buttons

2007-02-25T00:12:21Z

Kwilson: Moved transparent PNG image and so updated link here

= Microformats Buttons =

There have been requests for buttons for various microformats. Either badges, or buttons that do something with the specific microformats. This page keeps a list of buttons, and requests as well. - [http://tantek.com/log/ Tantek]

Added hosted buttons for all the microformats, including the draft ones, as well as instructions on how to make your own buttons. (14 May 2006) - [http://www.wackomenace.co.uk/ Ruben]

== Buttons ==

=== Microformat Banner ===
I've made a banner for microformats. Since there are so many microformats and with more to come, just indicating support/ use of might be a good generic approach. The image is free to use. Please copy it to your own hosting account and not link to it.

http://www.crowley.nl/images/microformats.png

I already have a "I use
http://www.crowley.nl/images/microformats.png" on my blog: http://doncrowley.blogspot.com/

- Don Crowley

* http://www.boogdesign.com/images/buttons/microformat.png
* http://www.boogdesign.com/images/buttons/microformat_enabled.png
* http://www.boogdesign.com/images/buttons/emf_green.png
* http://www.boogdesign.com/images/buttons/mfe_green.png
* http://www.boogdesign.com/images/buttons/mwmf_green.png
* http://www.boogdesign.com/images/buttons/smf_green.png
* http://www.boogdesign.com/images/buttons/emf_white.png
* http://www.boogdesign.com/images/buttons/mfe_white.png
* http://www.boogdesign.com/images/buttons/mwmf_white.png
* http://www.boogdesign.com/images/buttons/smf_white.png

=== [[hcalendar|hCalendar]] ===
* http://rbach.priv.at/2006/buttons/hcal.png
* http://www.boogdesign.com/images/buttons/microformat_hcalendar.png
* CSS-powered button from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]:

<span class="badge" style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0; border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none; text-align: center;"><span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; margin-right: 0.1em;">›››</span> hCalendar</span>

Code (white space added for readability):

<pre><nowiki>
<span class="badge"
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;
text-align: center;">
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em;
margin-right: 0.1em;">
&#8250;&#8250;&#8250;
</span>
hCalendar
</span>
</nowiki></pre>

=== [[hcard|hCard]] ===
* http://www.crowley.nl/images/hcard.png (mirror: http://www.davidjanes.com/images/mf_hcard.png)
* http://rbach.priv.at/2006/buttons/hcard.png
* http://www.boogdesign.com/images/buttons/microformat_hcard.png
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]

=== [[rel-license]] ===
* http://rbach.priv.at/2006/buttons/license.png
* http://www.boogdesign.com/images/buttons/microformat_rellicense.png

=== [[rel-nofollow]] ===
* http://rbach.priv.at/2006/buttons/nofollow.png
* http://www.boogdesign.com/images/buttons/microformat_relnofollow.png

=== [[rel-tag]] ===
* http://rbach.priv.at/2006/buttons/rel-tag.png
* http://rbach.priv.at/2006/buttons/tag.png
* http://www.boogdesign.com/images/buttons/microformat_reltag.png

=== [[vote-links|VoteLinks]] ===
* http://rbach.priv.at/2006/buttons/votelinks.png
* http://www.boogdesign.com/images/buttons/microformat_votelinks.png

=== [http://gmpg.org/xfn/ XFN] ===
* http://rbach.priv.at/2006/buttons/xfn.png
* http://www.boogdesign.com/images/buttons/microformat_xfn.png

=== [http://gmpg.org/xmdp/ XMDP] ===
* http://rbach.priv.at/2006/buttons/xmdp.png
* http://www.boogdesign.com/images/buttons/microformat_xmdp.png

=== [[xoxo|XOXO]] ===
* http://rbach.priv.at/2006/buttons/xoxo.png
* http://www.boogdesign.com/images/buttons/microformat_xoxo.png

== Buttons for draft formats ==

These may be subject to change if the names of the formats change when they are released.

=== [[adr]] ===
* http://rbach.priv.at/2006/buttons/adr.png

=== [[geo]] ===
* http://rbach.priv.at/2006/buttons/geo.png

=== [[hatom|hAtom]] ===
* http://rbach.priv.at/2006/buttons/hatom.png
* http://files.synaesthetic.net/common/images/buttons/hatom.png

=== [[hresume|hResume]] ===
* http://rbach.priv.at/2006/buttons/hresume.png
* http://www.boogdesign.com/images/buttons/microformat_hresume.png

=== [[hreview|hReview]] ===
* http://rbach.priv.at/2006/buttons/hreview.png

=== [[rel-directory]] ===
* http://rbach.priv.at/2006/buttons/directory.png

=== [[rel-enclosure]] ===
* http://rbach.priv.at/2006/buttons/enclosure.png

=== [[rel-home]] ===
* http://rbach.priv.at/2006/buttons/rel-home.png
* http://rbach.priv.at/2006/buttons/home.png

=== [[relpayment-research|rel-payment]] ===
* http://rbach.priv.at/2006/buttons/payment.png

=== [[robots-exclusion|Robots Exclusion]] ===
* http://rbach.priv.at/2006/buttons/robots.png

=== [[xfolk|xFolk]] ===
* http://rbach.priv.at/2006/buttons/xfolk.png

== Make your own buttons ==
=== Style 1 ===

Example: http://www.crowley.nl/images/hcard.png

Use the [http://kalsey.com/tools/buttonmaker/ Kalsey Button Maker] with the following settings:
* Outer border: #666666
* Inner border: #ffffff
* Bar position: 25 pixels from the left
* Left box text: >>>
* Left box background: #000000
* Left box text colour: #ffffff
* Left box text start: 7 pixels from the left
* Right box text: (The name of the microformat goes here)
* Right box background: #31757b
* Right box text colour: #ffffff
* Right box text start: 3 pixels from the bar

=== Style 2 ===

Example: http://rbach.priv.at/2006/buttons/hcal.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://rbach.priv.at/2006/buttons/blank.png)
# Type:
<pre>convert blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 28,10 'button label'"
output.png
</pre>

=== Style 3 ===

Example: http://files.synaesthetic.net/common/images/buttons/hatom.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://files.synaesthetic.net/microformats/button2-blank.png)
# Type:
<pre>convert button2-blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 20,10 'button label'"
output.png
</pre>

= Microformats Logos =
Rohit is a very poor CSS hacker, but gave it his best shot. He also [http://labs.commerce.net/~rohit/µf-logo.html rendered it at 72 and 18 points.]

http://microformats.org/img/logo.gif

<div style="position: relative; top:-46px; left:180px">
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div>

<div style="background-color:#85BC07; width:22px; height: 22px; left:11.5px; top:6px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white; -moz-border-radius:4pt;"></div>

<div style="background-color:#AEE219; width:14px; height: 14px; left:22.5px; top:4px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white;-moz-border-radius:2pt;"></div>

<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px">
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span>
</div>
</div>

The above logo as a transparent PNG (linked here from my own server; if you use it, please copy it for yourself):

http://files.synaesthetic.net/microformats/microformats1.png

= Requests =

* Logos for all microformats

* When someone has time, these should be repeated on the page for each respective format.

buttons

2007-02-22T15:25:59Z

Kwilson: Added blank button in another style and usage instructions.

= Microformats Buttons =

There have been requests for buttons for various microformats. Either badges, or buttons that do something with the specific microformats. This page keeps a list of buttons, and requests as well. - [http://tantek.com/log/ Tantek]

Added hosted buttons for all the microformats, including the draft ones, as well as instructions on how to make your own buttons. (14 May 2006) - [http://www.wackomenace.co.uk/ Ruben]

== Buttons ==

=== Microformat Banner ===
I've made a banner for microformats. Since there are so many microformats and with more to come, just indicating support/ use of might be a good generic approach. The image is free to use. Please copy it to your own hosting account and not link to it.

http://www.crowley.nl/images/microformats.png

I already have a "I use
http://www.crowley.nl/images/microformats.png" on my blog: http://doncrowley.blogspot.com/

- Don Crowley

* http://www.boogdesign.com/images/buttons/microformat.png
* http://www.boogdesign.com/images/buttons/microformat_enabled.png
* http://www.boogdesign.com/images/buttons/emf_green.png
* http://www.boogdesign.com/images/buttons/mfe_green.png
* http://www.boogdesign.com/images/buttons/mwmf_green.png
* http://www.boogdesign.com/images/buttons/smf_green.png
* http://www.boogdesign.com/images/buttons/emf_white.png
* http://www.boogdesign.com/images/buttons/mfe_white.png
* http://www.boogdesign.com/images/buttons/mwmf_white.png
* http://www.boogdesign.com/images/buttons/smf_white.png

=== [[hcalendar|hCalendar]] ===
* http://rbach.priv.at/2006/buttons/hcal.png
* http://www.boogdesign.com/images/buttons/microformat_hcalendar.png
* CSS-powered button from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]:

<span class="badge" style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0; border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none; text-align: center;"><span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; margin-right: 0.1em;">›››</span> hCalendar</span>

Code (white space added for readability):

<pre><nowiki>
<span class="badge"
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;
text-align: center;">
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em;
margin-right: 0.1em;">
&#8250;&#8250;&#8250;
</span>
hCalendar
</span>
</nowiki></pre>

=== [[hcard|hCard]] ===
* http://www.crowley.nl/images/hcard.png (mirror: http://www.davidjanes.com/images/mf_hcard.png)
* http://rbach.priv.at/2006/buttons/hcard.png
* http://www.boogdesign.com/images/buttons/microformat_hcard.png
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]

=== [[rel-license]] ===
* http://rbach.priv.at/2006/buttons/license.png
* http://www.boogdesign.com/images/buttons/microformat_rellicense.png

=== [[rel-nofollow]] ===
* http://rbach.priv.at/2006/buttons/nofollow.png
* http://www.boogdesign.com/images/buttons/microformat_relnofollow.png

=== [[rel-tag]] ===
* http://rbach.priv.at/2006/buttons/rel-tag.png
* http://rbach.priv.at/2006/buttons/tag.png
* http://www.boogdesign.com/images/buttons/microformat_reltag.png

=== [[vote-links|VoteLinks]] ===
* http://rbach.priv.at/2006/buttons/votelinks.png
* http://www.boogdesign.com/images/buttons/microformat_votelinks.png

=== [http://gmpg.org/xfn/ XFN] ===
* http://rbach.priv.at/2006/buttons/xfn.png
* http://www.boogdesign.com/images/buttons/microformat_xfn.png

=== [http://gmpg.org/xmdp/ XMDP] ===
* http://rbach.priv.at/2006/buttons/xmdp.png
* http://www.boogdesign.com/images/buttons/microformat_xmdp.png

=== [[xoxo|XOXO]] ===
* http://rbach.priv.at/2006/buttons/xoxo.png
* http://www.boogdesign.com/images/buttons/microformat_xoxo.png

== Buttons for draft formats ==

These may be subject to change if the names of the formats change when they are released.

=== [[adr]] ===
* http://rbach.priv.at/2006/buttons/adr.png

=== [[geo]] ===
* http://rbach.priv.at/2006/buttons/geo.png

=== [[hatom|hAtom]] ===
* http://rbach.priv.at/2006/buttons/hatom.png
* http://files.synaesthetic.net/common/images/buttons/hatom.png

=== [[hresume|hResume]] ===
* http://rbach.priv.at/2006/buttons/hresume.png
* http://www.boogdesign.com/images/buttons/microformat_hresume.png

=== [[hreview|hReview]] ===
* http://rbach.priv.at/2006/buttons/hreview.png

=== [[rel-directory]] ===
* http://rbach.priv.at/2006/buttons/directory.png

=== [[rel-enclosure]] ===
* http://rbach.priv.at/2006/buttons/enclosure.png

=== [[rel-home]] ===
* http://rbach.priv.at/2006/buttons/rel-home.png
* http://rbach.priv.at/2006/buttons/home.png

=== [[relpayment-research|rel-payment]] ===
* http://rbach.priv.at/2006/buttons/payment.png

=== [[robots-exclusion|Robots Exclusion]] ===
* http://rbach.priv.at/2006/buttons/robots.png

=== [[xfolk|xFolk]] ===
* http://rbach.priv.at/2006/buttons/xfolk.png

== Make your own buttons ==
=== Style 1 ===

Example: http://www.crowley.nl/images/hcard.png

Use the [http://kalsey.com/tools/buttonmaker/ Kalsey Button Maker] with the following settings:
* Outer border: #666666
* Inner border: #ffffff
* Bar position: 25 pixels from the left
* Left box text: >>>
* Left box background: #000000
* Left box text colour: #ffffff
* Left box text start: 7 pixels from the left
* Right box text: (The name of the microformat goes here)
* Right box background: #31757b
* Right box text colour: #ffffff
* Right box text start: 3 pixels from the bar

=== Style 2 ===

Example: http://rbach.priv.at/2006/buttons/hcal.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://rbach.priv.at/2006/buttons/blank.png)
# Type:
<pre>convert blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 28,10 'button label'"
output.png
</pre>

=== Style 3 ===

Example: http://files.synaesthetic.net/common/images/buttons/hatom.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://files.synaesthetic.net/microformats/button2-blank.png)
# Type:
<pre>convert button2-blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 20,10 'button label'"
output.png
</pre>

= Microformats Logos =
Rohit is a very poor CSS hacker, but gave it his best shot. He also [http://labs.commerce.net/~rohit/µf-logo.html rendered it at 72 and 18 points.]

http://microformats.org/img/logo.gif

<div style="position: relative; top:-46px; left:180px">
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div>

<div style="background-color:#85BC07; width:22px; height: 22px; left:11.5px; top:6px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white; -moz-border-radius:4pt;"></div>

<div style="background-color:#AEE219; width:14px; height: 14px; left:22.5px; top:4px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white;-moz-border-radius:2pt;"></div>

<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px">
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span>
</div>
</div>

The above logo as a transparent PNG (linked here from my own server; if you use it, please copy it for yourself):

http://tools.synaesthetic.net/common/images/logos/microformats1.png

= Requests =

* Logos for all microformats

* When someone has time, these should be repeated on the page for each respective format.

buttons

2007-02-22T15:14:54Z

Kwilson: Added additional hAtom button

= Microformats Buttons =

There have been requests for buttons for various microformats. Either badges, or buttons that do something with the specific microformats. This page keeps a list of buttons, and requests as well. - [http://tantek.com/log/ Tantek]

Added hosted buttons for all the microformats, including the draft ones, as well as instructions on how to make your own buttons. (14 May 2006) - [http://www.wackomenace.co.uk/ Ruben]

== Buttons ==

=== Microformat Banner ===
I've made a banner for microformats. Since there are so many microformats and with more to come, just indicating support/ use of might be a good generic approach. The image is free to use. Please copy it to your own hosting account and not link to it.

http://www.crowley.nl/images/microformats.png

I already have a "I use
http://www.crowley.nl/images/microformats.png" on my blog: http://doncrowley.blogspot.com/

- Don Crowley

* http://www.boogdesign.com/images/buttons/microformat.png
* http://www.boogdesign.com/images/buttons/microformat_enabled.png
* http://www.boogdesign.com/images/buttons/emf_green.png
* http://www.boogdesign.com/images/buttons/mfe_green.png
* http://www.boogdesign.com/images/buttons/mwmf_green.png
* http://www.boogdesign.com/images/buttons/smf_green.png
* http://www.boogdesign.com/images/buttons/emf_white.png
* http://www.boogdesign.com/images/buttons/mfe_white.png
* http://www.boogdesign.com/images/buttons/mwmf_white.png
* http://www.boogdesign.com/images/buttons/smf_white.png

=== [[hcalendar|hCalendar]] ===
* http://rbach.priv.at/2006/buttons/hcal.png
* http://www.boogdesign.com/images/buttons/microformat_hcalendar.png
* CSS-powered button from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]:

<span class="badge" style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0; border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none; text-align: center;"><span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; margin-right: 0.1em;">›››</span> hCalendar</span>

Code (white space added for readability):

<pre><nowiki>
<span class="badge"
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;
text-align: center;">
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em;
margin-right: 0.1em;">
&#8250;&#8250;&#8250;
</span>
hCalendar
</span>
</nowiki></pre>

=== [[hcard|hCard]] ===
* http://www.crowley.nl/images/hcard.png (mirror: http://www.davidjanes.com/images/mf_hcard.png)
* http://rbach.priv.at/2006/buttons/hcard.png
* http://www.boogdesign.com/images/buttons/microformat_hcard.png
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]

=== [[rel-license]] ===
* http://rbach.priv.at/2006/buttons/license.png
* http://www.boogdesign.com/images/buttons/microformat_rellicense.png

=== [[rel-nofollow]] ===
* http://rbach.priv.at/2006/buttons/nofollow.png
* http://www.boogdesign.com/images/buttons/microformat_relnofollow.png

=== [[rel-tag]] ===
* http://rbach.priv.at/2006/buttons/rel-tag.png
* http://rbach.priv.at/2006/buttons/tag.png
* http://www.boogdesign.com/images/buttons/microformat_reltag.png

=== [[vote-links|VoteLinks]] ===
* http://rbach.priv.at/2006/buttons/votelinks.png
* http://www.boogdesign.com/images/buttons/microformat_votelinks.png

=== [http://gmpg.org/xfn/ XFN] ===
* http://rbach.priv.at/2006/buttons/xfn.png
* http://www.boogdesign.com/images/buttons/microformat_xfn.png

=== [http://gmpg.org/xmdp/ XMDP] ===
* http://rbach.priv.at/2006/buttons/xmdp.png
* http://www.boogdesign.com/images/buttons/microformat_xmdp.png

=== [[xoxo|XOXO]] ===
* http://rbach.priv.at/2006/buttons/xoxo.png
* http://www.boogdesign.com/images/buttons/microformat_xoxo.png

== Buttons for draft formats ==

These may be subject to change if the names of the formats change when they are released.

=== [[adr]] ===
* http://rbach.priv.at/2006/buttons/adr.png

=== [[geo]] ===
* http://rbach.priv.at/2006/buttons/geo.png

=== [[hatom|hAtom]] ===
* http://rbach.priv.at/2006/buttons/hatom.png
* http://files.synaesthetic.net/common/images/buttons/hatom.png

=== [[hresume|hResume]] ===
* http://rbach.priv.at/2006/buttons/hresume.png
* http://www.boogdesign.com/images/buttons/microformat_hresume.png

=== [[hreview|hReview]] ===
* http://rbach.priv.at/2006/buttons/hreview.png

=== [[rel-directory]] ===
* http://rbach.priv.at/2006/buttons/directory.png

=== [[rel-enclosure]] ===
* http://rbach.priv.at/2006/buttons/enclosure.png

=== [[rel-home]] ===
* http://rbach.priv.at/2006/buttons/rel-home.png
* http://rbach.priv.at/2006/buttons/home.png

=== [[relpayment-research|rel-payment]] ===
* http://rbach.priv.at/2006/buttons/payment.png

=== [[robots-exclusion|Robots Exclusion]] ===
* http://rbach.priv.at/2006/buttons/robots.png

=== [[xfolk|xFolk]] ===
* http://rbach.priv.at/2006/buttons/xfolk.png

== Make your own buttons ==
=== Style 1 ===

Example: http://www.crowley.nl/images/hcard.png

Use the [http://kalsey.com/tools/buttonmaker/ Kalsey Button Maker] with the following settings:
* Outer border: #666666
* Inner border: #ffffff
* Bar position: 25 pixels from the left
* Left box text: >>>
* Left box background: #000000
* Left box text colour: #ffffff
* Left box text start: 7 pixels from the left
* Right box text: (The name of the microformat goes here)
* Right box background: #31757b
* Right box text colour: #ffffff
* Right box text start: 3 pixels from the bar

=== Style 2 ===

Example: http://rbach.priv.at/2006/buttons/hcal.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://rbach.priv.at/2006/buttons/blank.png)
# Type:
<pre>convert blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 28,10 'button label'"
output.png
</pre>

= Microformats Logos =
Rohit is a very poor CSS hacker, but gave it his best shot. He also [http://labs.commerce.net/~rohit/µf-logo.html rendered it at 72 and 18 points.]

http://microformats.org/img/logo.gif

<div style="position: relative; top:-46px; left:180px">
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div>

<div style="background-color:#85BC07; width:22px; height: 22px; left:11.5px; top:6px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white; -moz-border-radius:4pt;"></div>

<div style="background-color:#AEE219; width:14px; height: 14px; left:22.5px; top:4px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white;-moz-border-radius:2pt;"></div>

<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px">
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span>
</div>
</div>

The above logo as a transparent PNG (linked here from my own server; if you use it, please copy it for yourself):

http://tools.synaesthetic.net/common/images/logos/microformats1.png

= Requests =

* Logos for all microformats

* When someone has time, these should be repeated on the page for each respective format.

buttons

2007-02-21T16:55:31Z

Kwilson: Updated URL of transparent PNG.

= Microformats Buttons =

There have been requests for buttons for various microformats. Either badges, or buttons that do something with the specific microformats. This page keeps a list of buttons, and requests as well. - [http://tantek.com/log/ Tantek]

Added hosted buttons for all the microformats, including the draft ones, as well as instructions on how to make your own buttons. (14 May 2006) - [http://www.wackomenace.co.uk/ Ruben]

== Buttons ==

=== Microformat Banner ===
I've made a banner for microformats. Since there are so many microformats and with more to come, just indicating support/ use of might be a good generic approach. The image is free to use. Please copy it to your own hosting account and not link to it.

http://www.crowley.nl/images/microformats.png

I already have a "I use
http://www.crowley.nl/images/microformats.png" on my blog: http://doncrowley.blogspot.com/

- Don Crowley

* http://www.boogdesign.com/images/buttons/microformat.png
* http://www.boogdesign.com/images/buttons/microformat_enabled.png
* http://www.boogdesign.com/images/buttons/emf_green.png
* http://www.boogdesign.com/images/buttons/mfe_green.png
* http://www.boogdesign.com/images/buttons/mwmf_green.png
* http://www.boogdesign.com/images/buttons/smf_green.png
* http://www.boogdesign.com/images/buttons/emf_white.png
* http://www.boogdesign.com/images/buttons/mfe_white.png
* http://www.boogdesign.com/images/buttons/mwmf_white.png
* http://www.boogdesign.com/images/buttons/smf_white.png

=== [[hcalendar|hCalendar]] ===
* http://rbach.priv.at/2006/buttons/hcal.png
* http://www.boogdesign.com/images/buttons/microformat_hcalendar.png
* CSS-powered button from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]:

<span class="badge" style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0; border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none; text-align: center;"><span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; margin-right: 0.1em;">›››</span> hCalendar</span>

Code (white space added for readability):

<pre><nowiki>
<span class="badge"
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;
text-align: center;">
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em;
margin-right: 0.1em;">
&#8250;&#8250;&#8250;
</span>
hCalendar
</span>
</nowiki></pre>

=== [[hcard|hCard]] ===
* http://www.crowley.nl/images/hcard.png (mirror: http://www.davidjanes.com/images/mf_hcard.png)
* http://rbach.priv.at/2006/buttons/hcard.png
* http://www.boogdesign.com/images/buttons/microformat_hcard.png
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]

=== [[rel-license]] ===
* http://rbach.priv.at/2006/buttons/license.png
* http://www.boogdesign.com/images/buttons/microformat_rellicense.png

=== [[rel-nofollow]] ===
* http://rbach.priv.at/2006/buttons/nofollow.png
* http://www.boogdesign.com/images/buttons/microformat_relnofollow.png

=== [[rel-tag]] ===
* http://rbach.priv.at/2006/buttons/rel-tag.png
* http://rbach.priv.at/2006/buttons/tag.png
* http://www.boogdesign.com/images/buttons/microformat_reltag.png

=== [[vote-links|VoteLinks]] ===
* http://rbach.priv.at/2006/buttons/votelinks.png
* http://www.boogdesign.com/images/buttons/microformat_votelinks.png

=== [http://gmpg.org/xfn/ XFN] ===
* http://rbach.priv.at/2006/buttons/xfn.png
* http://www.boogdesign.com/images/buttons/microformat_xfn.png

=== [http://gmpg.org/xmdp/ XMDP] ===
* http://rbach.priv.at/2006/buttons/xmdp.png
* http://www.boogdesign.com/images/buttons/microformat_xmdp.png

=== [[xoxo|XOXO]] ===
* http://rbach.priv.at/2006/buttons/xoxo.png
* http://www.boogdesign.com/images/buttons/microformat_xoxo.png

== Buttons for draft formats ==

These may be subject to change if the names of the formats change when they are released.

=== [[adr]] ===
* http://rbach.priv.at/2006/buttons/adr.png

=== [[geo]] ===
* http://rbach.priv.at/2006/buttons/geo.png

=== [[hatom|hAtom]] ===
* http://rbach.priv.at/2006/buttons/hatom.png

=== [[hresume|hResume]] ===
* http://rbach.priv.at/2006/buttons/hresume.png
* http://www.boogdesign.com/images/buttons/microformat_hresume.png

=== [[hreview|hReview]] ===
* http://rbach.priv.at/2006/buttons/hreview.png

=== [[rel-directory]] ===
* http://rbach.priv.at/2006/buttons/directory.png

=== [[rel-enclosure]] ===
* http://rbach.priv.at/2006/buttons/enclosure.png

=== [[rel-home]] ===
* http://rbach.priv.at/2006/buttons/rel-home.png
* http://rbach.priv.at/2006/buttons/home.png

=== [[relpayment-research|rel-payment]] ===
* http://rbach.priv.at/2006/buttons/payment.png

=== [[robots-exclusion|Robots Exclusion]] ===
* http://rbach.priv.at/2006/buttons/robots.png

=== [[xfolk|xFolk]] ===
* http://rbach.priv.at/2006/buttons/xfolk.png

== Make your own buttons ==
=== Style 1 ===

Example: http://www.crowley.nl/images/hcard.png

Use the [http://kalsey.com/tools/buttonmaker/ Kalsey Button Maker] with the following settings:
* Outer border: #666666
* Inner border: #ffffff
* Bar position: 25 pixels from the left
* Left box text: >>>
* Left box background: #000000
* Left box text colour: #ffffff
* Left box text start: 7 pixels from the left
* Right box text: (The name of the microformat goes here)
* Right box background: #31757b
* Right box text colour: #ffffff
* Right box text start: 3 pixels from the bar

=== Style 2 ===

Example: http://rbach.priv.at/2006/buttons/hcal.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://rbach.priv.at/2006/buttons/blank.png)
# Type:
<pre>convert blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 28,10 'button label'"
output.png
</pre>

= Microformats Logos =
Rohit is a very poor CSS hacker, but gave it his best shot. He also [http://labs.commerce.net/~rohit/µf-logo.html rendered it at 72 and 18 points.]

http://microformats.org/img/logo.gif

<div style="position: relative; top:-46px; left:180px">
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div>

<div style="background-color:#85BC07; width:22px; height: 22px; left:11.5px; top:6px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white; -moz-border-radius:4pt;"></div>

<div style="background-color:#AEE219; width:14px; height: 14px; left:22.5px; top:4px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white;-moz-border-radius:2pt;"></div>

<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px">
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span>
</div>
</div>

The above logo as a transparent PNG (linked here from my own server; if you use it, please copy it for yourself):

http://tools.synaesthetic.net/common/images/logos/microformats1.png

= Requests =

* Logos for all microformats

* When someone has time, these should be repeated on the page for each respective format.

buttons

2007-02-20T04:57:10Z

Kwilson: Added request to not link to image on my server.

= Microformats Buttons =

There have been requests for buttons for various microformats. Either badges, or buttons that do something with the specific microformats. This page keeps a list of buttons, and requests as well. - [http://tantek.com/log/ Tantek]

Added hosted buttons for all the microformats, including the draft ones, as well as instructions on how to make your own buttons. (14 May 2006) - [http://www.wackomenace.co.uk/ Ruben]

== Buttons ==

=== Microformat Banner ===
I've made a banner for microformats. Since there are so many microformats and with more to come, just indicating support/ use of might be a good generic approach. The image is free to use. Please copy it to your own hosting account and not link to it.

http://www.crowley.nl/images/microformats.png

I already have a "I use
http://www.crowley.nl/images/microformats.png" on my blog: http://doncrowley.blogspot.com/

- Don Crowley

* http://www.boogdesign.com/images/buttons/microformat.png
* http://www.boogdesign.com/images/buttons/microformat_enabled.png
* http://www.boogdesign.com/images/buttons/emf_green.png
* http://www.boogdesign.com/images/buttons/mfe_green.png
* http://www.boogdesign.com/images/buttons/mwmf_green.png
* http://www.boogdesign.com/images/buttons/smf_green.png
* http://www.boogdesign.com/images/buttons/emf_white.png
* http://www.boogdesign.com/images/buttons/mfe_white.png
* http://www.boogdesign.com/images/buttons/mwmf_white.png
* http://www.boogdesign.com/images/buttons/smf_white.png

=== [[hcalendar|hCalendar]] ===
* http://rbach.priv.at/2006/buttons/hcal.png
* http://www.boogdesign.com/images/buttons/microformat_hcalendar.png
* CSS-powered button from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]:

<span class="badge" style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0; border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none; text-align: center;"><span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; margin-right: 0.1em;">›››</span> hCalendar</span>

Code (white space added for readability):

<pre><nowiki>
<span class="badge"
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;
text-align: center;">
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em;
margin-right: 0.1em;">
&#8250;&#8250;&#8250;
</span>
hCalendar
</span>
</nowiki></pre>

=== [[hcard|hCard]] ===
* http://www.crowley.nl/images/hcard.png (mirror: http://www.davidjanes.com/images/mf_hcard.png)
* http://rbach.priv.at/2006/buttons/hcard.png
* http://www.boogdesign.com/images/buttons/microformat_hcard.png
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]

=== [[rel-license]] ===
* http://rbach.priv.at/2006/buttons/license.png
* http://www.boogdesign.com/images/buttons/microformat_rellicense.png

=== [[rel-nofollow]] ===
* http://rbach.priv.at/2006/buttons/nofollow.png
* http://www.boogdesign.com/images/buttons/microformat_relnofollow.png

=== [[rel-tag]] ===
* http://rbach.priv.at/2006/buttons/rel-tag.png
* http://rbach.priv.at/2006/buttons/tag.png
* http://www.boogdesign.com/images/buttons/microformat_reltag.png

=== [[vote-links|VoteLinks]] ===
* http://rbach.priv.at/2006/buttons/votelinks.png
* http://www.boogdesign.com/images/buttons/microformat_votelinks.png

=== [http://gmpg.org/xfn/ XFN] ===
* http://rbach.priv.at/2006/buttons/xfn.png
* http://www.boogdesign.com/images/buttons/microformat_xfn.png

=== [http://gmpg.org/xmdp/ XMDP] ===
* http://rbach.priv.at/2006/buttons/xmdp.png
* http://www.boogdesign.com/images/buttons/microformat_xmdp.png

=== [[xoxo|XOXO]] ===
* http://rbach.priv.at/2006/buttons/xoxo.png
* http://www.boogdesign.com/images/buttons/microformat_xoxo.png

== Buttons for draft formats ==

These may be subject to change if the names of the formats change when they are released.

=== [[adr]] ===
* http://rbach.priv.at/2006/buttons/adr.png

=== [[geo]] ===
* http://rbach.priv.at/2006/buttons/geo.png

=== [[hatom|hAtom]] ===
* http://rbach.priv.at/2006/buttons/hatom.png

=== [[hresume|hResume]] ===
* http://rbach.priv.at/2006/buttons/hresume.png
* http://www.boogdesign.com/images/buttons/microformat_hresume.png

=== [[hreview|hReview]] ===
* http://rbach.priv.at/2006/buttons/hreview.png

=== [[rel-directory]] ===
* http://rbach.priv.at/2006/buttons/directory.png

=== [[rel-enclosure]] ===
* http://rbach.priv.at/2006/buttons/enclosure.png

=== [[rel-home]] ===
* http://rbach.priv.at/2006/buttons/rel-home.png
* http://rbach.priv.at/2006/buttons/home.png

=== [[relpayment-research|rel-payment]] ===
* http://rbach.priv.at/2006/buttons/payment.png

=== [[robots-exclusion|Robots Exclusion]] ===
* http://rbach.priv.at/2006/buttons/robots.png

=== [[xfolk|xFolk]] ===
* http://rbach.priv.at/2006/buttons/xfolk.png

== Make your own buttons ==
=== Style 1 ===

Example: http://www.crowley.nl/images/hcard.png

Use the [http://kalsey.com/tools/buttonmaker/ Kalsey Button Maker] with the following settings:
* Outer border: #666666
* Inner border: #ffffff
* Bar position: 25 pixels from the left
* Left box text: >>>
* Left box background: #000000
* Left box text colour: #ffffff
* Left box text start: 7 pixels from the left
* Right box text: (The name of the microformat goes here)
* Right box background: #31757b
* Right box text colour: #ffffff
* Right box text start: 3 pixels from the bar

=== Style 2 ===

Example: http://rbach.priv.at/2006/buttons/hcal.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://rbach.priv.at/2006/buttons/blank.png)
# Type:
<pre>convert blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 28,10 'button label'"
output.png
</pre>

= Microformats Logos =
Rohit is a very poor CSS hacker, but gave it his best shot. He also [http://labs.commerce.net/~rohit/µf-logo.html rendered it at 72 and 18 points.]

http://microformats.org/img/logo.gif

<div style="position: relative; top:-46px; left:180px">
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div>

<div style="background-color:#85BC07; width:22px; height: 22px; left:11.5px; top:6px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white; -moz-border-radius:4pt;"></div>

<div style="background-color:#AEE219; width:14px; height: 14px; left:22.5px; top:4px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white;-moz-border-radius:2pt;"></div>

<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px">
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span>
</div>
</div>

The above logo as a transparent PNG (linked here from my own server; if you use it, please copy it for yourself):

http://tools.synaesthetic.net/common/images/logos/microformats.png

= Requests =

* Logos for all microformats

* When someone has time, these should be repeated on the page for each respective format.

buttons

2007-02-20T04:55:45Z

Kwilson: Added logo in PNG format.

= Microformats Buttons =

There have been requests for buttons for various microformats. Either badges, or buttons that do something with the specific microformats. This page keeps a list of buttons, and requests as well. - [http://tantek.com/log/ Tantek]

Added hosted buttons for all the microformats, including the draft ones, as well as instructions on how to make your own buttons. (14 May 2006) - [http://www.wackomenace.co.uk/ Ruben]

== Buttons ==

=== Microformat Banner ===
I've made a banner for microformats. Since there are so many microformats and with more to come, just indicating support/ use of might be a good generic approach. The image is free to use. Please copy it to your own hosting account and not link to it.

http://www.crowley.nl/images/microformats.png

I already have a "I use
http://www.crowley.nl/images/microformats.png" on my blog: http://doncrowley.blogspot.com/

- Don Crowley

* http://www.boogdesign.com/images/buttons/microformat.png
* http://www.boogdesign.com/images/buttons/microformat_enabled.png
* http://www.boogdesign.com/images/buttons/emf_green.png
* http://www.boogdesign.com/images/buttons/mfe_green.png
* http://www.boogdesign.com/images/buttons/mwmf_green.png
* http://www.boogdesign.com/images/buttons/smf_green.png
* http://www.boogdesign.com/images/buttons/emf_white.png
* http://www.boogdesign.com/images/buttons/mfe_white.png
* http://www.boogdesign.com/images/buttons/mwmf_white.png
* http://www.boogdesign.com/images/buttons/smf_white.png

=== [[hcalendar|hCalendar]] ===
* http://rbach.priv.at/2006/buttons/hcal.png
* http://www.boogdesign.com/images/buttons/microformat_hcalendar.png
* CSS-powered button from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]:

<span class="badge" style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0; border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none; text-align: center;"><span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; margin-right: 0.1em;">›››</span> hCalendar</span>

Code (white space added for readability):

<pre><nowiki>
<span class="badge"
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;
text-align: center;">
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em;
margin-right: 0.1em;">
&#8250;&#8250;&#8250;
</span>
hCalendar
</span>
</nowiki></pre>

=== [[hcard|hCard]] ===
* http://www.crowley.nl/images/hcard.png (mirror: http://www.davidjanes.com/images/mf_hcard.png)
* http://rbach.priv.at/2006/buttons/hcard.png
* http://www.boogdesign.com/images/buttons/microformat_hcard.png
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]

=== [[rel-license]] ===
* http://rbach.priv.at/2006/buttons/license.png
* http://www.boogdesign.com/images/buttons/microformat_rellicense.png

=== [[rel-nofollow]] ===
* http://rbach.priv.at/2006/buttons/nofollow.png
* http://www.boogdesign.com/images/buttons/microformat_relnofollow.png

=== [[rel-tag]] ===
* http://rbach.priv.at/2006/buttons/rel-tag.png
* http://rbach.priv.at/2006/buttons/tag.png
* http://www.boogdesign.com/images/buttons/microformat_reltag.png

=== [[vote-links|VoteLinks]] ===
* http://rbach.priv.at/2006/buttons/votelinks.png
* http://www.boogdesign.com/images/buttons/microformat_votelinks.png

=== [http://gmpg.org/xfn/ XFN] ===
* http://rbach.priv.at/2006/buttons/xfn.png
* http://www.boogdesign.com/images/buttons/microformat_xfn.png

=== [http://gmpg.org/xmdp/ XMDP] ===
* http://rbach.priv.at/2006/buttons/xmdp.png
* http://www.boogdesign.com/images/buttons/microformat_xmdp.png

=== [[xoxo|XOXO]] ===
* http://rbach.priv.at/2006/buttons/xoxo.png
* http://www.boogdesign.com/images/buttons/microformat_xoxo.png

== Buttons for draft formats ==

These may be subject to change if the names of the formats change when they are released.

=== [[adr]] ===
* http://rbach.priv.at/2006/buttons/adr.png

=== [[geo]] ===
* http://rbach.priv.at/2006/buttons/geo.png

=== [[hatom|hAtom]] ===
* http://rbach.priv.at/2006/buttons/hatom.png

=== [[hresume|hResume]] ===
* http://rbach.priv.at/2006/buttons/hresume.png
* http://www.boogdesign.com/images/buttons/microformat_hresume.png

=== [[hreview|hReview]] ===
* http://rbach.priv.at/2006/buttons/hreview.png

=== [[rel-directory]] ===
* http://rbach.priv.at/2006/buttons/directory.png

=== [[rel-enclosure]] ===
* http://rbach.priv.at/2006/buttons/enclosure.png

=== [[rel-home]] ===
* http://rbach.priv.at/2006/buttons/rel-home.png
* http://rbach.priv.at/2006/buttons/home.png

=== [[relpayment-research|rel-payment]] ===
* http://rbach.priv.at/2006/buttons/payment.png

=== [[robots-exclusion|Robots Exclusion]] ===
* http://rbach.priv.at/2006/buttons/robots.png

=== [[xfolk|xFolk]] ===
* http://rbach.priv.at/2006/buttons/xfolk.png

== Make your own buttons ==
=== Style 1 ===

Example: http://www.crowley.nl/images/hcard.png

Use the [http://kalsey.com/tools/buttonmaker/ Kalsey Button Maker] with the following settings:
* Outer border: #666666
* Inner border: #ffffff
* Bar position: 25 pixels from the left
* Left box text: >>>
* Left box background: #000000
* Left box text colour: #ffffff
* Left box text start: 7 pixels from the left
* Right box text: (The name of the microformat goes here)
* Right box background: #31757b
* Right box text colour: #ffffff
* Right box text start: 3 pixels from the bar

=== Style 2 ===

Example: http://rbach.priv.at/2006/buttons/hcal.png

# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]
# Install [http://www.imagemagick.org/ ImageMagick]
# Get the blank icon (http://rbach.priv.at/2006/buttons/blank.png)
# Type:
<pre>convert blank.png
-fill white
-font Silkscreen
-pointsize 8
+antialias
-draw "text 28,10 'button label'"
output.png
</pre>

= Microformats Logos =
Rohit is a very poor CSS hacker, but gave it his best shot. He also [http://labs.commerce.net/~rohit/µf-logo.html rendered it at 72 and 18 points.]

http://microformats.org/img/logo.gif

<div style="position: relative; top:-46px; left:180px">
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div>

<div style="background-color:#85BC07; width:22px; height: 22px; left:11.5px; top:6px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white; -moz-border-radius:4pt;"></div>

<div style="background-color:#AEE219; width:14px; height: 14px; left:22.5px; top:4px; position:absolute; border-left: 2px solid white;border-bottom: 2px solid white;-moz-border-radius:2pt;"></div>

<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px">
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span>
</div>
</div>

The above logo as a transparent PNG:

http://tools.synaesthetic.net/common/images/logos/microformats.png

= Requests =

* Logos for all microformats

* When someone has time, these should be repeated on the page for each respective format.

User:Kwilson

2006-08-11T21:49:25Z

Kwilson: Adding some minimal content.

== Kenn Wilson ==

Linux sysadmin and web geek in San Francisco.

== External Links ==

* [http://www.inmostlight.org/ Personal site]
* [http://www.3color.org/~kwilson/ Professional site] (uses hCard and hResume)

selected-test-cases-from-the-web

2006-08-11T21:41:44Z

Kwilson: Fixed display of hCard example.

This page exists to collect snapshots in time of events found "in the wild" for testing purposes. Also see [http://microformats.org/~rkhare/mf-testcases.html an external page of test cases].

=Elemental=
==RelTag==
<nowiki>
<a rel="tag" href="http://technorati.com/tag/blog">blog</a></nowiki>
==XFN==
<nowiki>
<a href="http://roguelibrarian.com" rel="friend colleague met">Carrie Bickner</a>
<ul>
<li><a href="http://www.iamthedj.com/news/index.html" rel="sweetheart date muse friend met" title="Amber Nixon">Amber</a></li>
<li><a href="http://zeldman.com/" rel="friend colleague met" class="" title="Jeffrey Zeldman">Jeffrey Zeldman</a></li>
<li><a href="http://meyerweb.com/" rel="friend colleague met" title="Eric Meyer" class="ref xfnfriendly">meyerweb</a></li>
<li><a href="http://www.stopdesign.com/" class="ref xfnfriendly" rel="friend colleague met" title="Douglas Bowman">Stopdesign</a></li>
<li><a href="http://glazman.org/weblog" class="ref xfnfriendly" rel="friend colleague met">Glazblog</a></li>
<li><a href="http://photomatt.net/" title="Matthew Mullenweg" rel="friend met colleague" class="ref xfnfriendly">photomatt</a></li>
<li><a href="http://dbaron.org/log/" rel='met friend colleague'>David Baron</a></li>
<li><a href="http://ln.hixie.ch/" rel="friend colleague met" title="Ian Hickson">Hixie</a></li>
<li><a href="http://www.jluster.org/" rel="met colleague friend" class="ref xfnfriendly" title="Jonas Luster">jluster.org</a></li>
<li><a href="http://ifindkarma.typepad.com/" rel="met colleague friend" title="Adam Rifkin">Relax, Everything Is Deeply Intertwingled</a></li>
<li><a href="http://davidx.org/blog/" class="ref" title="David Andersen" rel="met acquaintance colleague co-worker">Davidx.org</a></li>
<li><a href="http://www.richardault.com/" title="Richard Ault" rel="met co-worker friend" class="ref">ctrl-ault-del</a></li>
<li><a href="http://adam.typepad.com/" title="Adam Hertz" class="ref" rel="met acquaintance colleague co-worker">To Wish For Impossible Things</a></li>
<li><a rel="met acquaintance colleague co-worker" href="http://joi.ito.com/">Joi Ito</a></li>
<li><a href="http://epeus.blogspot.com/" rel="friend met colleague co-worker" title="Kevin Marks">Kevin Marks</a></li>
<li><a href="http://www.arachna.com/roller/page/spidaman/" title="Ian Kallen" rel="met acquaintance colleague co-worker">What's That Noise?!</a></li>
<li><a href="http://www.sifry.com/alerts/" rel="met acquaintance colleague co-worker" title="David Sifry">Sifry's alerts</a></li>
<li><a href="http://powazek.com/" rel="met friend colleague co-worker neighbor" title="Derek Powazek">This is Powazek</a></li>
<li><a href="http://jason.defillippo.com/" rel="met friend colleague co-worker neighbor" title="Jason DeFillippo">A Fresh Start</a></li>
<li><a href="http://bradleyallen.org/" title="Bradley Allen" rel="met acquaintance colleague co-worker">Bradley Allen</a></li>
<li><a href="http://scoble.weblogs.com/" title="Robert Scoble" rel="met acquaintance colleague">Scobleizer</a> (<a href="http://radio.weblogs.com/0001011/" rel="met acquaintance colleague">2</a>) </li>
<li><a href="http://www.nickfinck.com/" rel="colleague met">Nick Finck</a></li>
<li><a href="http://kottke.org/" class="ref" title="Jason Kottke" rel="acquaintance met">kottke</a></li>
<li><a href="http://www.aaronsw.com/weblog/" class="ref" rel="met acquaintance colleague" title="Aaron Swartz">Aaron Swartz</a></li>
<li><a rel="met acquaintance colleague" href="http://www.zephoria.org/thoughts/" title="Danah Boyd">apophenia</a></li>
<li><a rel="me" href="http://www.orkut.com/Profile.aspx?uid=12385561615767130248">orkut profile</a></li>
</ul></nowiki>

=Compound=

==hCard==
A very good implementation of the hCard standard

* From http://gbraad.nl/site/?p=profile or http://gbraad.survion.com/site/?p=profile

I noticed that this author keeps updating his implementation to reflect the revised drafts. Perhaps it is also good to notice the problem of not being able to put the suffix in a meta-description.

<pre>
<nowiki>
<div class="vcard">
<img style="float:right; margin:4px" src="http://gbraad.nl/photos/profile/0.jpg" alt="Profile photo" class="photo"/>

<a class="url fn" href="http://gbraad.nl/" title="Full name"><span class="n given-name">Gerard</span> <span class="n family-name">Braad</span> Jr.</a>
<span class="nickname">g_braad</span>

<span class="bday" title="Date of Birth">1981-02-22</span>
<div class="org" title="Organisation"><a class="url work" href="http://www.survion.com/">Sur-V-ioN</a></div>
<span class="role" title="Role">(Freelance) Software Developer</span>
<div class="adr">
<div class="street-address" title="Street">Rustenburgstraat 224</div>
<span class="postal-code" title="Postal code">7311JC</span>
<span class="locality" title="City">Apeldoorn</span>
<span class="country-name" title="Country">The Netherlands</span>
</div>
<div class="tel">
<span class="pref work voice" title="Work phonenumber">+31 (0)87 1901 799</span>
<span class="home voice" title="Home phonenumber">+31 (0)55 521 2488</span>
<span class="cell voice" title="Cell phonenumber">+31 (0)6 4256 7996</span>
</div>
<div class="email">
<a class="pref internet" title="Primary email" href="mailto:me@gbraad.nl">me at gbraad dot nl</a>
<a class="internet" title="Alternate email" href="mailto:g_braad@survion.com">g_braad at survion dot com</a>
<a class="internet" title="Alternate email" href="mailto:g_braad@spotsnel.nl">g_braad at spotsnel dot nl</a>
</div>
</div>

<div class="services">
<span class="yahoo" title="Yahoo! contact">g_braad</span>
<span class="msn" title="MSN contact">g_braad@hotmail.com</span>
<span class="icq" title="ICQ number">25725591</span>
<span class="aim" title="AIM contact">gbraadjr</span>
<span class="skype" title="Skype username">g_braad</span>
<span class="gizmo" title="Gizmo username">g_braad</span>
</div>
</nowiki>
</pre>

==hCalendar==

=Multiple Tests=

* Tantek's blog always has a fresh selection of microformatted content: http://tantek.com/log
* The home page of this site?

hresume

2006-07-19T22:02:10Z

Kwilson: Added myself to list of hResumes in the wild

<h1> hResume </h1>

hResume is a microformat for publishing resumes and CVs.

This paragraph is where we write some thing that makes everyone in the world want to use hResume. Because, you know, hResume's the future and people like the future. And so on... [[hresume-use|Wanna get started on hResume right now?]]

<h2> Microformats Draft Specification </h2>

; Editor/Author: [http://theryanking.com Ryan King]
; Acknowledgments: See [http://microformats.org/wiki/hresume#Acknowledgements acknowledgments].

Microformats [http://microformats.org/wiki/hresume#Copyright copyright] and [http://microformats.org/wiki/hresume#Patents patents] statements apply.

__TOC__

== Status ==
Draft, version 0.1.

== Introduction ==
=== Semantic XHTML Design Principles ===
{{SemanticXHTMLDesignPrinciples}}

== Format ==
=== In General ===
The hResume format is based on a set of fields common to numerous resumes published today on the web. Where possible field names have been chosen and reused from preexisting microformats.

=== Schema ===
The hResume schema consists of the following:

* hResume
** summary. optional. text.
** contact info. required. '''Must''' use [[hcard|hCard]]. '''Should''' use <code class="element"><address></code> + [[hcard|hCard]].
** experience. optional. One or more [[hcalendar]] events with the class name '<code class="class-name">experience</code>', with an embedded [[hcard|hCard]] indicating the job title, name of company, address of company etc.
** education. optional One or more [[hcalendar]] events with the class name '<code class="class-name">education</code>', with an embedded [[hcard|hCard]] indicating the name of school, address of school etc.
** skills. optional. phrases or keywords using the [[rel-tag]] microformat with the class name '<code class="class-name">skill</code>'.
** affiliations. optional. the class name <code class="class-name">affiliation</code> along with an [[hcard]] of the organization
** publications. optional. One or more citations. Use cite tag.

=== Field details ===
The fields of the hResume schema represent the following:

* '''<code class="class-name">hresume</code>''':: root class name
* '''<code class="class-name">summary</code>''':: The class name <code class="class-name">summary</code> is used to mark up an overview of qualifications and objectives.
* '''contact''':: Current contact info in an [[hCard]]. '''Should''' use <code class="element"><address></code> with [[hCard]] when possible.
* '''<code class="class-name">education</code>''':: the class name '<code class="class-name">education</code>' is applied to an [[hcalendar]] event.
* '''<code class="class-name">experience</code>''':: the class name '<code class="class-name">experience</code>' is applied to an [[hcalendar]] event. Job titles/positions should use an [[hCard]].
* '''<code class="class-name">skill</code>''':: An hResume may be tagged using the [[rel-tag]] microformat and the '<code class="class-name">skill</code>' class name.
* '''<code class="class-name">affiliation</code>''':: The class name <code="class-name">affiliation</code> is used along with an [[hcard]] of the organization
* '''publications''':: just use <code class="element"><cite></code>. When there is a [[citation]] microformat, then that can be used in combination with the cite element to further markup the components of the citation.

=== Notes ===
This section is informative.

*...

== Examples ==
=== Summary ===
An example summary:

<pre><nowiki>
<p class="summary">
I have 10 years experience with all Web 2.0 technologies– I've been working with Ajax since 1996,
designing with pastels while others will still using tiled background images and frames...
</p>
</nowiki></pre>

=== Contact ===
<pre><nowiki>
<address class="vcard">
<span class="fn">Pedro Sanchez</span>
<span class="adr">
<span class="street-address">123 Fake St.</span>
<span class="locality">Preston</span>, <span class="region">Idaho</span> <span class="postal-code">83263</span>
</span>
<span>Email: <a class="email" href="mailto:joe@example.com">pedro@vote-for-pedro.com</a></span>
<span>Homepage: <a class="url" href="http://vote-for-pedro.com/">vote-for-pedro.com</a></span>
<span>Phone: <span class="tel">+01.208.555.4567</span></span>
</address>
</nowiki></pre>

=== Education ===
<pre><nowiki>
<ol class="vcalendar">
<li class="education vevent">
<a class="url summary" href="http://example.edu/">Preston High School</a>
(<abbr class="dtstart" title="2001-01-24">2001</abbr> - <abbr class="dtend" title="2005-05-25">2005</abbr>)
</li>
...
</nowiki></pre>

=== Experience ===
==== Basic ====
A basic experience event:

<pre><nowiki>
<ol class="vcalendar">
<li class="experience vevent">
<span class="summary">President</span>,
<span class="location">Preston High School</span>,
<abbr class="dtstart" title="2004-09-01">May 2004</abbr> - <abbr title="2005-05-25">present</abbr>
</li>
...
</nowiki></pre>

==== Job Titles ====
To express one or more job titles/positions in the same experience event you should use [[hCard]]s. [[hcard]] requires the <code class="class-name">fn</code> ("formatted name") field, but it isn't reasonable to repeat your name for every job title you mark up in [[hResume|hresume]]. So, you may use an <code class="element"><object></code> and the class name '<code class="class-name">include</code>' with a reference to the <code class="class-name">fn</code> somewhere else on the page.

For example, this [[hCard]] refers to another [[hCard]]

<pre>
<span class="vcard">
<object data="#j" class="include"></object>
<span class="org">Preston High School</span>
<span class="title">Class President</span>
</span>
</pre>

Where "<code class="attr-value">j</code>" is the id attribute value of the "<code class="mf-prop">fn n</code>" element of the contact [[hCard]] at the top of the page, e.g. (shown here as a verbose [[hCard]] for purposes of illustration that the reference may be to a subtree, not just a text node):

<pre><nowiki>
<address class="vcard">
<span class="fn n" id="j">
<span class="given-name">Pedro</span>
<span class="family-name">Sanchez</span>
</span>
</address>
</nowiki></pre>

This method of hCard property indirection via an object element [[include-pattern|has been generalized]] to apply to any/all string/text properties in hCard.
Note: the object data attribute MUST be a local ID reference. External references (which would require a consuming application to load an external resource) are currently not supported by this method.

=== Skills ===
Some sample skills tags:
<pre><nowiki>
I have skills in <a class="skill" rel="tag" href="http://en.wikipedia.org/wiki/Bow_%28weapon%29">bow hunting</a>
and <a class="skill" rel="tag" href="http://en.wikipedia.org/wiki/Nunchucks">nunchucks</a>.
</nowiki></pre>

=== Affiliations ===
<pre><nowiki>
<span class="affiliation vcard"><span class="fn org">National Honor Society</span></span>
</nowiki></pre>

=== Publications ===
<pre><nowiki>
<cite>Breeding Ligers for Fun and Magic</cite>, Idaho Press, 2004.
</nowiki></pre>

== Examples in the wild ==
This section is '''informative'''.

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

* [[User:Kwilson|Kenn Wilson]] has marked up [http://www.3color.org/~kwilson/resume/kenneth-wilson.html his resume] using hResume, following [[User:Ralph Brandi|Ralph Brandi]]'s method of using object.include.
* [[User:Ralph Brandi|Ralph Brandi]] has [http://www.brandi.org/ralph/resume/ marked up his resume] with hResume, additionally using the object.include method to associate one description with three hCalendar experiences.
* [[User:Pat Ramsey|Pat Ramsey]] has his [http://www.southwestern.edu/~ramseyp/ramsey_resume2006.html resume] marked up as an hResume.
* [[User:Wim Le Page|Wim Le Page]] has also marked up [http://adrem.ua.ac.be/~wlepage/curriculum-vitae/ his curriculum vitae] as an hResume.
* [[user:Jonathan Arkell|Jonathan Arkell]] has posted an [http://portfolio.jonnay.net/cv/ hResume] on his portfolio website.
* [http://steve.ganz.name/hresume/ Steve Ganz - hResume 0.1]
* [[User:Dave Cardwell|Dave Cardwell]] has marked up [http://davecardwell.co.uk/cv/ his curriculum vitae] as an hResume.
* [[user:Izo|Mathieu Drouet]] has posted an [http://izo.aucuneid.com/hresume.html hResume]. ''Incorrect root class name hResume? -- [[DavidJanes]]''
* [[User:EdwardOConnor|Edward O'Connor]]'s [http://edward.oconnor.cx/resume/ resume] is in hResume, and has some experimental JavaScript in it to extract a skill summary from the resume.
* [[User:Lindsey Simon|Lindsey Simon]] has his [http://www.commoner.com/~lsimon/lindsey_simon_resume.html resume] marked up as an hResume - with lots of thanks to Pat Ramsey.
* [[User:Ben Ward|Ben Ward]] has published [http://ben-ward.co.uk/cv his CV] with hResume.

== Profile ==
@TODO

== Implementations ==
@TODO

== References ==
=== Normative References ===
* [http://www.w3.org/TR/REC-html40/ HTML 4]
* [http://www.w3.org/TR/xhtml1/ XHTML]
* [http://gmpg.org/xmdp/ XMDP]
* [[rel-tag| Rel-Tag]]
* @TODO

=== Informative References ===
@TODO

== Copyright ==
{{MicroFormatCopyrightStatement2006}}

== Patents ==
{{MicroFormatPatentStatement}}

== Acknowledgements ==

=== Concept ===
* [http://theryanking.com/ Ryan King], [http://technorati.com Technorati]
* [http://tantek.com/ Tantek Çelik], [http://technorati.com Technorati]
* James Levine [http://simplyhired.com Simply Hired]
* [http://epeus.blogspot.com/ Kevin Marks], [http://technorati.com Technorati]

== See also ==
* [[resume-examples]]
* [[resume-formats]]
* [[resume-brainstorming]]

== Discussions ==

* Feedback is encouraged on the [[hresume-feedback]] page.
* See also [http://www.technorati.com/cosmos/referer.html blogs discussing this page].

=== Q&A ===
* If you have any questions about hResume, check the [[hresume-faq|hResume FAQ]], and if you don't find answers, add your questions to the end!

=== Issues ===
* Please add any issues with the specification to the separate [[hresume-issues|hResume issues]] document.