http://microformats.org/wiki/api.php?action=feedcontributions&user=Ruben&feedformat=atomMicroformats Wiki - User contributions [en]2024-03-29T08:32:02ZUser contributionsMediaWiki 1.38.4http://microformats.org/wiki/index.php?title=hcard-examples-issues&diff=42993hcard-examples-issues2010-08-21T13:59:17Z<p>Ruben: /* Issues */</p>
<hr />
<div><h1>hCard examples issues</h1><br />
<br />
Issues with specific examples and techniques recommended on the [[hcard-examples]] page, grouped by similar heading.<br />
<br />
== Issues ==<br />
<br />
=== MSN Messenger ===<br />
<br />
Regarding [[hcard-examples#MSN_Messenger]] which was updated 14 May 2006 - Ruben<br />
<br />
Ruben, I tried this, and "msnim:" is an unrecognized protocol on MacOSX.4 (this is with the latest MSN Messenger for Mac installed and running and logged int). Could you provide links to documentation about "msnim:" and links to actual pages that publish their MSNIM ids this way? I don't know of any - [http://tantek.com/ Tantek]<br />
<br />
: Tantek, Wikipedia's [http://en.wikipedia.org/wiki/History_of_Windows_Live_Messenger History of Windows Live Messenger] states that MSN Messenger 7.5 for Windows, among other things, introduced: "the msnim protocol handler, allowing Web sites to provide links which automatically add a contact or start conversations (for example clicking on link msnim:chat?contact=login@passport.net will start chat conversation with user login@passport.net).". The Mac version is notoriously lagging behind, sadly. --''[[User:Chucker|chucker]] 11:33, 29 Jun 2006 (PDT)''<br />
<br />
It also seems that the msnim protocol handler in only supported by Microsoft Internet Explorer 7 (haven't tried earlier versions) on Windows. Latest versions of Firefox, Opera and Netscape Navigator doesn't recognize the protocol. Well, for at least, not at the moment. - [http://www.juhaliikala.com/ Juha Liikala]<br />
<br />
=== ADR type definition and LABEL type definition ===<br />
<br />
Both these examples use &lt;abbr&gt; to mark up text which is not an abbreviation of the title of the &lt;abbr&gt; tag. Shouldn't these be replaced with examples that use semantic markup? [http://eatyourgreens.org.uk Jim O'Donnell]<br />
<br />
== See Also ==<br />
* [[hcard-examples]]</div>Rubenhttp://microformats.org/wiki/index.php?title=buttons&diff=42992buttons2010-08-21T13:54:11Z<p>Ruben: </p>
<hr />
<div><h1>Microformats Buttons</h1><br />
<br />
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]<br />
<br />
==Licensing==<br />
<br />
If you add links to buttons you have designed, '''please also include a statement''' that you do one of the following:<br />
*release them into the public domain<br />
*hold copyright, but release all rights as to it use<br />
*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].<br />
<br />
Thank you.<br />
<br />
* 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<br />
<br />
* 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]]<br />
<br />
* 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]]<br />
<br />
* 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]. &#8212; [[:User:CarlaHufstedler|Carla Hufstedler]]<br />
<br />
__TOC__<br />
<br />
== Buttons ==<br />
<br />
=== Microformat Button ===<br />
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.<br />
<br />
http://www.crowley.nl/images/microformats.png<br />
<br />
I already have a "I use <br />
http://www.crowley.nl/images/microformats.png" on my blog: http://doncrowley.blogspot.com/<br />
<br />
- Don Crowley<br />
<br />
* http://www.boogdesign.com/images/buttons/microformat.png<br />
* http://www.boogdesign.com/images/buttons/microformat_enabled.png<br />
* http://www.boogdesign.com/images/buttons/emf_green.png<br />
* http://www.boogdesign.com/images/buttons/mfe_green.png<br />
* http://www.boogdesign.com/images/buttons/mwmf_green.png<br />
* http://www.boogdesign.com/images/buttons/smf_green.png<br />
* http://www.boogdesign.com/images/buttons/emf_white.png<br />
* http://www.boogdesign.com/images/buttons/mfe_white.png<br />
* http://www.boogdesign.com/images/buttons/mwmf_white.png<br />
* http://www.boogdesign.com/images/buttons/smf_white.png<br />
<br />
=== [[hcalendar|hCalendar]] ===<br />
* http://rbach.priv.at/2006/buttons/hcal.png<br />
* http://www.boogdesign.com/images/buttons/microformat_hcalendar.png<br />
* CSS-powered button from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]: <br />
<br />
<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><br />
<br />
<br />
Code (white space added for readability):<br />
<br />
<pre><nowiki><br />
<span class="badge" <br />
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;<br />
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;<br />
text-align: center;"><br />
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; <br />
margin-right: 0.1em;"><br />
&amp;#8250;&amp;#8250;&amp;#8250;<br />
</span> <br />
hCalendar<br />
</span><br />
</nowiki></pre><br />
<br />
=== [[hcard|hCard]] ===<br />
* http://www.crowley.nl/images/hcard.png (mirror: http://www.davidjanes.com/images/mf_hcard.png)<br />
* http://rbach.priv.at/2006/buttons/hcard.png<br />
* http://www.boogdesign.com/images/buttons/microformat_hcard.png<br />
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]<br />
<br />
=== [[rel-license]] ===<br />
* http://rbach.priv.at/2006/buttons/license.png<br />
* http://www.boogdesign.com/images/buttons/microformat_rellicense.png<br />
<br />
=== [[rel-nofollow]] ===<br />
* http://rbach.priv.at/2006/buttons/nofollow.png<br />
* http://www.boogdesign.com/images/buttons/microformat_relnofollow.png<br />
<br />
=== [[rel-tag]] ===<br />
* http://rbach.priv.at/2006/buttons/rel-tag.png<br />
* http://rbach.priv.at/2006/buttons/tag.png<br />
* http://www.boogdesign.com/images/buttons/microformat_reltag.png<br />
<br />
=== [[vote-links|VoteLinks]] ===<br />
* http://rbach.priv.at/2006/buttons/votelinks.png<br />
* http://www.boogdesign.com/images/buttons/microformat_votelinks.png<br />
<br />
=== [http://gmpg.org/xfn/ XFN] ===<br />
* http://rbach.priv.at/2006/buttons/xfn.png<br />
* http://www.boogdesign.com/images/buttons/microformat_xfn.png<br />
<br />
=== [http://gmpg.org/xmdp/ XMDP] ===<br />
* http://rbach.priv.at/2006/buttons/xmdp.png<br />
* http://www.boogdesign.com/images/buttons/microformat_xmdp.png<br />
<br />
=== [[xoxo|XOXO]] ===<br />
* http://rbach.priv.at/2006/buttons/xoxo.png<br />
* http://www.boogdesign.com/images/buttons/microformat_xoxo.png<br />
<br />
===CSS Styles for microformats===<br />
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)<br />
<br />
[http://creativecommons.org/licenses/by-sa/3.0/us/ License]<br />
[http://alyosha.bendebury.net/microformat-css.zip Zip]<br />
<br />
<br />
== CSS Buttons ==<br />
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.<br />
<br />
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].<br />
<br />
Extract the microformat directory and the files in it to /css so that you have:<br /><br />
/css/microformat/microformat.css<br /><br />
/css/microformat/background.png<br /><br />
/css/microformat/logo.png<br />
<br />
If your paths are different a bit of editing is needed.<br />
<br />
The XHTML to create a button is:<br />
<pre><tag class="microformat-button microformat-type"><span></span>microformat-type</tag></pre><br />
<br />
For example, an hCard button with a link to the spec:<br />
<pre><a href="http://microformats.org/wiki/hcard" title="Microformat enabled" class="microformat-button hcard"><span></span>hcard</a></pre><br />
<br />
== Buttons for draft formats ==<br />
<br />
These may be subject to change if the names of the formats change when they are released.<br />
<br />
=== [[adr]] ===<br />
* http://rbach.priv.at/2006/buttons/adr.png<br />
<br />
=== [[geo]] ===<br />
* http://rbach.priv.at/2006/buttons/geo.png<br />
<br />
=== [[hatom|hAtom]] ===<br />
* http://rbach.priv.at/2006/buttons/hatom.png<br />
* http://www.corvidworks.com/files/microformats/hatom.png<br />
<br />
=== [[hresume|hResume]] ===<br />
* http://rbach.priv.at/2006/buttons/hresume.png<br />
* http://www.boogdesign.com/images/buttons/microformat_hresume.png<br />
<br />
=== [[hreview|hReview]] ===<br />
* http://rbach.priv.at/2006/buttons/hreview.png<br />
<br />
=== [[rel-directory]] ===<br />
* http://rbach.priv.at/2006/buttons/directory.png<br />
<br />
=== [[rel-enclosure]] ===<br />
* http://rbach.priv.at/2006/buttons/enclosure.png<br />
<br />
=== [[rel-home]] ===<br />
* http://rbach.priv.at/2006/buttons/rel-home.png<br />
* http://rbach.priv.at/2006/buttons/home.png<br />
<br />
=== [[relpayment-research|rel-payment]] ===<br />
* http://rbach.priv.at/2006/buttons/payment.png<br />
<br />
=== [[robots-exclusion|Robots Exclusion]] ===<br />
* http://rbach.priv.at/2006/buttons/robots.png<br />
<br />
=== [[xfolk|xFolk]] ===<br />
* http://rbach.priv.at/2006/buttons/xfolk.png<br />
<br />
== Make your own buttons ==<br />
=== Style 1 ===<br />
<br />
Example: http://www.crowley.nl/images/hcard.png<br />
<br />
Use the [http://kalsey.com/tools/buttonmaker/ Kalsey Button Maker] with the following settings:<br />
* Outer border: #666666<br />
* Inner border: #ffffff<br />
* Bar position: 25 pixels from the left<br />
* Left box text: &gt;&gt;&gt;<br />
* Left box background: #000000<br />
* Left box text color: #ffffff<br />
* Left box text start: 7 pixels from the left<br />
* Right box text: (The name of the microformat goes here)<br />
* Right box background: #31757b<br />
* Right box text color: #ffffff<br />
* Right box text start: 3 pixels from the bar<br />
<br />
=== Style 2 ===<br />
<br />
Example: http://rbach.priv.at/2006/buttons/hcal.png<br />
<br />
# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]<br />
# Install [http://www.imagemagick.org/ ImageMagick]<br />
# Get the blank icon (http://rbach.priv.at/2006/buttons/blank.png)<br />
# Type: <br />
<pre>convert blank.png <br />
-fill white <br />
-font Silkscreen <br />
-pointsize 8 <br />
+antialias <br />
-draw "text 28,10 'button label'" <br />
output.png<br />
</pre><br />
<br />
=== Style 3 ===<br />
<br />
Example: http://www.corvidworks.com/files/microformats/hatom.png<br />
<br />
# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]<br />
# Install [http://www.imagemagick.org/ ImageMagick]<br />
# Get the blank icon (http://www.corvidworks.com/files/microformats/button2-blank.png)<br />
# Type: <br />
<pre>convert button2-blank.png <br />
-fill white <br />
-font Silkscreen <br />
-pointsize 8 <br />
+antialias <br />
-draw "text 20,10 'button label'" <br />
output.png<br />
</pre><br />
<br />
= Microformats Logos =<br />
<br />
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.] <br />
<br />
http://microformats.org/img/logo.gif<br />
<br />
<div style="position: relative; top:-46px; left:180px"><br />
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div><br />
<br />
<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><br />
<br />
<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><br />
<br />
<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px"><br />
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span><br />
</div><br />
</div><br />
<br />
The following logo as a transparent PNG (linked here from my own server; if you use it, please copy it for yourself):<br />
<br />
http://www.corvidworks.com/files/microformats/microformats1.png<br />
<br />
== Palette ==<br />
<br />
<br />
<div style="background-color:#AEE219; width:8em; height: 4ex;">#AEE219</div><br />
<br />
<div style="background-color:#85BC07; width:8em; height: 4ex;">#85BC07</div><br />
<br />
<div style="background-color:#679A06; width:8em; height: 4ex;">#679A06</div><br />
<br />
<br /><br />
I created a cheatsheet using [http://bighugelabs.com/flickr/ Big Huge Lab]'s Badgemaker:<br /><br />
[http://flickr.com/photos/hauntedpalace/1296783076/ http://farm2.static.flickr.com/1231/1296783076_1d6fe8a1f8_m_d.jpg]<br />
--[[User:CarlaHufstedler|Carla]] 12:11, 1 Sep 2007 (PDT)<br />
<br />
<br />
<br />
=Wiki buttons=<br />
For use on this wiki.<br />
*{{NewMarker}} - <nowiki>{{NewMarker}}</nowiki><br />
*{{SuccessMarker}} - <nowiki>{{SuccessMarker}}</nowiki><br />
*{{UpdateMarker}} - <nowiki>{{UpdateMarker}}</nowiki><br />
<br />
= Requests =<br />
<br />
* Logos for all microformats<br />
<br />
* When someone has time, these should be repeated on the page for each respective format.<br />
<br />
==See also==<br />
<br />
{{branding-see-also}}<br />
* <span class="POSH logos">[[posh#Spread_POSH|POSH logos and buttons]]</span></div>Rubenhttp://microformats.org/wiki/index.php?title=buttons&diff=9969buttons2006-09-18T15:39:46Z<p>Ruben: </p>
<hr />
<div>= Microformats Buttons =<br />
<br />
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]<br />
<br />
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]<br />
<br />
== Buttons ==<br />
<br />
=== Microformat Banner ===<br />
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.<br />
<br />
http://www.crowley.nl/images/microformats.png<br />
<br />
I already have a "I use <br />
http://www.crowley.nl/images/microformats.png" on my blog: http://doncrowley.blogspot.com/<br />
<br />
- Don Crowley<br />
<br />
=== [[hcalendar|hCalendar]] ===<br />
* http://rbach.priv.at/2006/buttons/hcal.png<br />
* CSS-powered button from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]: <br />
<br />
<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><br />
<br />
<br />
Code (white space added for readability):<br />
<br />
<pre><nowiki><br />
<span class="badge" <br />
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;<br />
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;<br />
text-align: center;"><br />
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; <br />
margin-right: 0.1em;"><br />
&amp;#8250;&amp;#8250;&amp;#8250;<br />
</span> <br />
hCalendar<br />
</span><br />
</nowiki></pre><br />
<br />
=== [[hcard|hCard]] ===<br />
* http://www.crowley.nl/images/hcard.png (mirror: http://www.davidjanes.com/images/mf_hcard.png)<br />
* http://rbach.priv.at/2006/buttons/hcard.png<br />
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]<br />
<br />
=== [[rel-license]] ===<br />
* http://rbach.priv.at/2006/buttons/license.png<br />
<br />
=== [[rel-nofollow]] ===<br />
* http://rbach.priv.at/2006/buttons/nofollow.png<br />
<br />
=== [[rel-tag]] ===<br />
* http://rbach.priv.at/2006/buttons/rel-tag.png<br />
* http://rbach.priv.at/2006/buttons/tag.png<br />
<br />
=== [[vote-links|VoteLinks]] ===<br />
* http://rbach.priv.at/2006/buttons/votelinks.png<br />
<br />
=== [http://gmpg.org/xfn/ XFN] ===<br />
* http://rbach.priv.at/2006/buttons/xfn.png<br />
<br />
=== [http://gmpg.org/xmdp/ XMDP] ===<br />
* http://rbach.priv.at/2006/buttons/xmdp.png<br />
<br />
=== [[xoxo|XOXO]] ===<br />
* http://rbach.priv.at/2006/buttons/xoxo.png<br />
<br />
== Buttons for draft formats ==<br />
<br />
These may be subject to change if the names of the formats change when they are released.<br />
<br />
=== [[adr]] ===<br />
* http://rbach.priv.at/2006/buttons/adr.png<br />
<br />
=== [[geo]] ===<br />
* http://rbach.priv.at/2006/buttons/geo.png<br />
<br />
=== [[hatom|hAtom]] ===<br />
* http://rbach.priv.at/2006/buttons/hatom.png<br />
<br />
=== [[hresume|hResume]] ===<br />
* http://rbach.priv.at/2006/buttons/hresume.png<br />
<br />
=== [[hreview|hReview]] ===<br />
* http://rbach.priv.at/2006/buttons/hreview.png<br />
<br />
=== [[rel-directory]] ===<br />
* http://rbach.priv.at/2006/buttons/directory.png<br />
<br />
=== [[rel-enclosure]] ===<br />
* http://rbach.priv.at/2006/buttons/enclosure.png<br />
<br />
=== [[rel-home]] ===<br />
* http://rbach.priv.at/2006/buttons/rel-home.png<br />
* http://rbach.priv.at/2006/buttons/home.png<br />
<br />
=== [[relpayment-research|rel-payment]] ===<br />
* http://rbach.priv.at/2006/buttons/payment.png<br />
<br />
=== [[robots-exclusion|Robots Exclusion]] ===<br />
* http://rbach.priv.at/2006/buttons/robots.png<br />
<br />
=== [[xfolk|xFolk]] ===<br />
* http://rbach.priv.at/2006/buttons/xfolk.png<br />
<br />
== Make your own buttons ==<br />
=== Style 1 ===<br />
<br />
Example: http://www.crowley.nl/images/hcard.png<br />
<br />
Use the [http://kalsey.com/tools/buttonmaker/ Kalsey Button Maker] with the following settings:<br />
* Outer border: #666666<br />
* Inner border: #ffffff<br />
* Bar position: 25 pixels from the left<br />
* Left box text: &gt;&gt;&gt;<br />
* Left box background: #000000<br />
* Left box text colour: #ffffff<br />
* Left box text start: 7 pixels from the left<br />
* Right box text: (The name of the microformat goes here)<br />
* Right box background: #31757b<br />
* Right box text colour: #ffffff<br />
* Right box text start: 3 pixels from the bar<br />
<br />
=== Style 2 ===<br />
<br />
Example: http://rbach.priv.at/2006/buttons/hcal.png<br />
<br />
# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]<br />
# Install [http://www.imagemagick.org/ ImageMagick]<br />
# Get the blank icon (http://rbach.priv.at/2006/buttons/blank.png)<br />
# Type: <br />
<pre>convert blank.png <br />
-fill white <br />
-font Silkscreen <br />
-pointsize 8 <br />
+antialias <br />
-draw "text 28,10 'button label'" <br />
output.png<br />
</pre><br />
<br />
= Microformats Logos =<br />
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.] <br />
<br />
http://microformats.org/img/logo.gif<br />
<br />
<div style="position: relative; top:-46px; left:180px"><br />
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div><br />
<br />
<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><br />
<br />
<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><br />
<br />
<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px"><br />
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span><br />
</div><br />
</div><br />
<br />
= Requests =<br />
<br />
* Logos for all microformats<br />
<br />
* When someone has time, these should be repeated on the page for each respective format.</div>Rubenhttp://microformats.org/wiki/index.php?title=buttons&diff=8595buttons2006-09-18T15:38:50Z<p>Ruben: </p>
<hr />
<div>= Microformats Buttons =<br />
<br />
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]<br />
<br />
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]<br />
<br />
== Buttons ==<br />
<br />
=== Microformat Banner ===<br />
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.<br />
<br />
http://www.crowley.nl/images/microformats.png<br />
<br />
I already have a "I use <br />
http://www.crowley.nl/images/microformats.png" on my blog: http://doncrowley.blogspot.com/<br />
<br />
- Don Crowley<br />
<br />
=== [[hcalendar|hCalendar]] ===<br />
* http://rbach.priv.at/2006/buttons/hcal.png<br />
* CSS-powered button from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]: <br />
<br />
<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><br />
<br />
<br />
Code (white space added for readability):<br />
<br />
<pre><nowiki><br />
<span class="badge" <br />
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;<br />
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;<br />
text-align: center;"><br />
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; <br />
margin-right: 0.1em;"><br />
&amp;#8250;&amp;#8250;&amp;#8250;<br />
</span> <br />
hCalendar<br />
</span><br />
</nowiki></pre><br />
<br />
=== [[hcard|hCard]] ===<br />
* http://www.crowley.nl/images/hcard.png (mirror: http://www.davidjanes.com/images/mf_hcard.png)<br />
* http://rbach.priv.at/2006/buttons/hcard.png<br />
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]<br />
<br />
=== [[rel-license]] ===<br />
* http://rbach.priv.at/2006/buttons/license.png<br />
<br />
=== [[rel-nofollow]] ===<br />
* http://rbach.priv.at/2006/buttons/nofollow.png<br />
<br />
=== [[rel-tag]] ===<br />
* http://rbach.priv.at/2006/buttons/rel-tag.png<br />
* http://rbach.priv.at/2006/buttons/tag.png<br />
<br />
=== [[vote-links|VoteLinks]] ===<br />
* http://rbach.priv.at/2006/buttons/votelinks.png<br />
<br />
=== [http://gmpg.org/xfn/ XFN] ===<br />
* http://rbach.priv.at/2006/buttons/xfn.png<br />
<br />
=== [http://gmpg.org/xmdp/ XMDP] ===<br />
* http://rbach.priv.at/2006/buttons/xmdp.png<br />
<br />
=== [[xoxo|XOXO]] ===<br />
* http://rbach.priv.at/2006/buttons/xoxo.png<br />
<br />
== Buttons for draft formats ==<br />
<br />
These may be subject to change if the names of the formats change when they are released.<br />
<br />
=== [[adr]] ===<br />
* http://rbach.priv.at/2006/buttons/adr.png<br />
<br />
=== [[geo]] ===<br />
* http://rbach.priv.at/2006/buttons/geo.png<br />
<br />
=== [[hatom|hAtom]] ===<br />
* http://rbach.priv.at/2006/buttons/hatom.png<br />
<br />
=== [[hresume|hResume]] ===<br />
* http://rbach.priv.at/2006/buttons/hresume.png<br />
<br />
=== [[hreview|hReview]] ===<br />
* http://rbach.priv.at/2006/buttons/hreview.png<br />
<br />
=== [[rel-directory]] ===<br />
* http://rbach.priv.at/2006/buttons/directory.png<br />
<br />
=== [[rel-enclosure]] ===<br />
* http://rbach.priv.at/2006/buttons/enclosure.png<br />
<br />
=== [[rel-home]] ===<br />
* http://rbach.priv.at/2006/buttons/rel-home.png<br />
* http://rbach.priv.at/2006/buttons/home.png<br />
<br />
=== [[relpayment-research|rel-payment]] ===<br />
* http://rbach.priv.at/2006/buttons/payment.png<br />
<br />
=== [[robots-exclusion|Robots Exclusion]] ===<br />
* http://rbach.priv.at/2006/buttons/robots.png<br />
<br />
=== [[xfolk|xFolk]] ===<br />
* http://rbach.priv.at/2006/buttons/xfolk.png<br />
<br />
== Make your own buttons ==<br />
=== Style 1 ===<br />
<br />
Example: http://mirror.oogynetworks.com/microformats/buttons/mf_hcal.png<br />
<br />
Use the [http://kalsey.com/tools/buttonmaker/ Kalsey Button Maker] with the following settings:<br />
* Outer border: #666666<br />
* Inner border: #ffffff<br />
* Bar position: 25 pixels from the left<br />
* Left box text: &gt;&gt;&gt;<br />
* Left box background: #000000<br />
* Left box text colour: #ffffff<br />
* Left box text start: 7 pixels from the left<br />
* Right box text: (The name of the microformat goes here)<br />
* Right box background: #31757b<br />
* Right box text colour: #ffffff<br />
* Right box text start: 3 pixels from the bar<br />
<br />
=== Style 2 ===<br />
<br />
Example: http://rbach.priv.at/2006/buttons/hcal.png<br />
<br />
# Get the font [http://www.kottke.org/plus/type/silkscreen/ Silkscreen]<br />
# Install [http://www.imagemagick.org/ ImageMagick]<br />
# Get the blank icon (http://rbach.priv.at/2006/buttons/blank.png)<br />
# Type: <br />
<pre>convert blank.png <br />
-fill white <br />
-font Silkscreen <br />
-pointsize 8 <br />
+antialias <br />
-draw "text 28,10 'button label'" <br />
output.png<br />
</pre><br />
<br />
= Microformats Logos =<br />
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.] <br />
<br />
http://microformats.org/img/logo.gif<br />
<br />
<div style="position: relative; top:-46px; left:180px"><br />
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div><br />
<br />
<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><br />
<br />
<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><br />
<br />
<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px"><br />
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span><br />
</div><br />
</div><br />
<br />
= Requests =<br />
<br />
* Logos for all microformats<br />
<br />
* When someone has time, these should be repeated on the page for each respective format.</div>Rubenhttp://microformats.org/wiki/index.php?title=hcard-examples-rfc2426&diff=6371hcard-examples-rfc24262006-05-14T21:53:41Z<p>Ruben: /* MSN Messenger */</p>
<hr />
<div><h1>hCard examples</h1><br />
<br />
Example [[hcard|hCards]].<br />
<br />
== Authors ==<br />
* [http://tantek.com/log Tantek Çelik]<br />
* Brian Suda<br />
<br />
== Instructive Examples ==<br />
<br />
=== Authors of Pages and Posts ===<br />
[http://www.w3.org/TR/html401/struct/global.html#h-7.5.6 Per the HTML4.01 specification], authors should be using the <code>&lt;address&gt;</code> element to indicate the "contact information for a document or a major part of a document." E.g.<br />
<br />
<pre><nowiki><br />
<address><br />
<a href="http://tantek.com/">Tantek Çelik</a><br />
</address><br />
</nowiki></pre><br />
<br />
By adding [[hcard|hCard]] to such existing semantic XHTML, you can explicitly indicate the name of the person, their URL, etc.:<br />
<br />
<pre><nowiki><br />
<address class="vcard"><br />
<a class="fn url" href="http://tantek.com/">Tantek Çelik</a><br />
</address><br />
</nowiki></pre><br />
<br />
This could be displayed as:<br />
<br />
[http://tantek.com/ Tantek Çelik]<br />
<br />
This works not only for whole pages, but also for "major part[s]" of pages, e.g. blog posts.<br />
<br />
See the [http://microformats.org/blog/ microformats.org blog] (view the source) for a live example. The author of every blog post on the microformats.org blog is marked up as an <code>&lt;address class="vcard"&gt;</code> element like the example shown above.<br />
<br />
=== References to People and Organizations ===<br />
<br />
A common pattern in blog posts is to link mentions of people's names to their blogs, and/or organizations to their home pages. E.g.:<br />
<br />
<pre><nowiki><br />
<cite><a href="http://meyerweb.com/">Eric Meyer</a></cite> wrote a post <br />
(<cite><a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">Tax Relief</a></cite>) <br />
about an unintentionally humorous letter he received from the<br />
<a href="http://irs.gov/">Internal Revenue Service</a>.<br />
</nowiki></pre><br />
<br />
By adding hCard to such markup, you can explicitly indicate both the person and the organization by name and URL:<br />
<br />
<pre><nowiki><br />
<cite class="vcard"><a class="fn url" href="http://meyerweb.com/">Eric Meyer</a></cite> wrote a post <br />
(<cite><a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">Tax Relief</a></cite>) <br />
about an unintentionally humorous letter he received from the<br />
<span class="vcard"><a class="fn org url" href="http://irs.gov/">Internal Revenue Service</a>.<br />
</nowiki></pre><br />
<br />
This could be displayed as:<br />
<br />
''[http://meyerweb.com/ Eric Meyer]'' wrote a post (''[http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/ Tax Relief]'') about an unintentionally humorous letter he received from the [http://irs.gov/ Internal Revenue Service].<br />
<br />
<br />
=== hCard and XFN ===<br />
==== References to People in Blog Posts ====<br />
<br />
In the above example, one person (the blogger) is referring to another person (Eric Meyer). In addition to using hCard to explicitly mark up the reference as a person, the blogger can use [http://gmpg.org/xfn/ XFN] (the XHTML Friends Network) to indicate their relationship to Eric Meyer, e.g.:<br />
<br />
<pre><nowiki><br />
<cite class="vcard"><a class="fn url" rel="friend colleague met" href="http://meyerweb.com/">Eric Meyer</a></cite> wrote a post <br />
(<cite><a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">Tax Relief</a></cite>) <br />
about an unintentionally humorous letter he received from the<br />
<span class="vcard"><a class="fn org url" href="http://irs.gov/">Internal Revenue Service</a></span>.<br />
</nowiki></pre><br />
<br />
It would be displayed the same as the previous example.<br />
<br />
==== References to People in Blogrolls ====<br />
<br />
Many bloggers are using XFN (often using an easy user interface like that built into [http://wordpress.org WordPress]) to explicitly indicate their relationships to the people in their blogrolls:<br />
<br />
<pre><nowiki><br />
<ul><br />
<li><a href="http://meyerweb.com" rel="friend colleague met">Eric Meyer</a></li><br />
<li><a href="http://photomatt.net" rel="friend colleague met">Matt Mullenweg</a></li><br />
</ul><br />
</nowiki></pre><br />
<br />
By adding hCard markup to an XFN Friendly blogroll, you can explicitly indicate the name and URL of the person in addition to their relationship:<br />
<br />
<pre><nowiki><br />
<ul><br />
<li class="vcard"><a class="fn url" href="http://meyerweb.com" rel="friend colleague met">Eric Meyer</a></li><br />
<li class="vcard"><a class="fn url" href="http://photomatt.net" rel="friend colleague met">Matt Mullenweg</a></li><br />
</ul><br />
</nowiki></pre><br />
<br />
This could be displayed as:<br />
* [http://meyerweb.com Eric Meyer]<br />
* [http://photomatt.net Matt Mullenweg]<br />
<br />
For more information on XFN, see the [http://gmpg.org/xfn/ XFN home page], [http://gmpg.org/xfn/join joining XFN], and [http://gmpg.org/xfn/background background on XFN].<br />
<br />
=== New Types of Contact Info ===<br />
<br />
Since vCard was designed, there have been numerous other services that provide individuals with addresses or other means of contact, e.g. instant messaging, voip, etc.<br />
<br />
Does this mean that vCard (and hence hCard) must be extended to represent these?<br />
<br />
Thanks to the flexibility of the URL property, the answer is no, no extensions are necessary. Instead, we use the proper URL for the service which identifies the service (protocol, machine, and/or path), and place the individual's address inside that.<br />
<br />
==== AOL Instant Messenger (AIM) ====<br />
<br />
AOL Instant Messenger (AIM) ids can be represented using the <code>aim:</code> protocol. Many who publish their AIM ids do so with clickable URLs e.g.:<br />
<br />
<pre><nowiki><br />
<a href="aim:goim?screenname=ShoppingBuddy">IM with the AIM ShoppingBuddy</a><br />
</nowiki></pre><br />
<br />
Thus for hCard, we will adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:<br />
<br />
<pre><nowiki><br />
<a class="url" href="aim:goim?screenname=ShoppingBuddy">IM with the AIM ShoppingBuddy</a><br />
</nowiki></pre><br />
<br />
==== Yahoo Messenger ====<br />
<br />
Similarly, Yahoo Instant Messenger (YIM) ids can be represented using the <code>ymsgr:</code> protocol. And similarly many publish their YIM ids as clickable URLs e.g.:<br />
<br />
<pre><nowiki><br />
<a href="ymsgr:sendIM?SomeYahooFriend">IM with SomeYahooFriend</a><br />
</nowiki></pre><br />
<br />
Again, for hCard, we will adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:<br />
<br />
<pre><nowiki><br />
<a class="url" href="ymsgr:sendIM?SomeYahooFriend">IM with SomeYahooFriend</a><br />
</nowiki></pre><br />
<br />
==== MSN Messenger ====<br />
<br />
<strike>Unfortunately, AFAIK, there is no hacked up defacto protocol for opening an MSN IM session with an MSN userid (which themselves are just email addresses). Thus we must simply resort to marking them up as email addresses, and expect that consumers may use some heuristic, such as "hotmail.com email addresses are also MSN IM ids".</strike><br />
<br />
MSN Messenger (MSNIM) ids can be represented using the <code>msnim:</code> protocol. And similarly many publish their MSNIM ids as clickable URLs e.g.:<br />
<br />
<pre><nowiki><br />
<a href="msnim:chat?contact=joebob@hotmail.com">IM with joebob@hotmail.com</a><br />
</nowiki></pre><br />
<br />
For hCard, we will adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:<br />
<br />
<pre><nowiki><br />
<a class="url" href="msnim:chat?contact=joebob@hotmail.com">IM with joebob@hotmail.com</a><br />
</nowiki></pre><br />
<br />
Updated 14 May 2006 - [http://www.wackomenace.co.uk/ Ruben]<br />
<br />
==== Site profiles ==== <br />
Bloggers often indicate their identity on content hosting services using the URL to their home page, feed or profile on those services. By labeling them as URL properties, these additional facets of identity can be publish in an hCard as well.<br />
<br />
* [http://del.icio.us delicious]:<br />
** <code>&lt;a class="url" href="http://del.icio.us/rbach"&gt;Robert Bachmann's links&lt;/a&gt;</code><br />
* [http://flickr.com Flickr]:<br />
** <code>&lt;a class="url" href="http://flickr.com/photos/tantek/"&gt;See my photos&lt;/a&gt;</code><br />
** <code>&lt;a class="url" href="http://flickr.com/people/tantek/"&gt;Flickr profile&lt;/a&gt;</code><br />
* [http://technorati.com/ Technorati]:<br />
** <code>&lt;a class="url" href="http://technorati.com/profile/tantek/"&gt;Technorati profile&lt;/a&gt;</code><br />
* Add more here...<br />
** ....<br />
<br />
== RFC 2426 examples in hCard ==<br />
<br />
These are 1:1 hCard examples for each example in [http://www.ietf.org/rfc/rfc2426.txt RFC 2426].<br />
<br />
Mark Pilgrim has made these hCard examples available as separate files:<br />
* http://diveintomark.org/projects/greasemonkey/hcard/tests/<br />
<br />
=== 2.4.2 VCARD ===<br />
<br />
<pre><nowiki><br />
AGENT:BEGIN:VCARD\nFN:Joe Friday\nTEL:+1-919-555-7878\n<br />
TITLE:Area Administrator\, Assistant\n EMAIL\;TYPE=INTERNET:\n<br />
jfriday@host.com\nEND:VCARD\n<br />
</nowiki></pre><br />
<br />
This vCard fragment has one property whose value is another vCard, and could be represented as an hCard fragment with an embedded hCard, literally (with the unnecessary type=internet default omitted, and the implied n optimization):<br />
<br />
<pre><nowiki><br />
<div class="agent vcard"><br />
<a class="email fn" href="mailto:jfriday@host.com">Joe Friday</a><br />
<div class="tel">+1-919-555-7878</div><br />
<div class="title">Area Administrator, Assistant</div><br />
</div><br />
</nowiki></pre><br />
<br />
this hCard could be displayed as:<br />
<br />
[mailto:jfriday@host.com Joe Friday]<br /><br />
+1-919-555-7878<br /><br />
Area Administrator, Assistant<br />
<br />
=== 3.1.1 FN Type Definition ===<br />
<br />
<pre><nowiki><br />
FN:Mr. John Q. Public\, Esq.<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="fn">Mr. John Q. Public, Esq.</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as:<br />
<br />
Mr. John Q. Public, Esq.<br />
<br />
=== 3.1.2 N Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
N:Public;John;Quinlan;Mr.;Esq.<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="n"><br />
<span class="honorific-prefix">Mr.</span><br />
<span class="given-name">John</span><br />
<span class="additional-name">Quinlan</span><br />
<span class="family-name">Public</span>, <br />
<span class="honorific-suffix">Esq.</span><br />
</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as:<br />
<br />
Mr. John Quinlan Public, Esq.<br />
<br />
==== Example 2 ====<br />
<br />
<pre><nowiki><br />
N:Stevenson;John;Philip,Paul;Dr.;Jr.,M.D.,A.C.P.<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="n"><br />
<span class="honorific-prefix">Dr.</span><br />
<span class="given-name">John</span><br />
<span class="additional-name">Philip</span><br />
<span class="additional-name">Paul</span><br />
<span class="family-name">Stevenson</span>,<br />
<span class="honorific-suffix">Jr.</span>,<br />
<span class="honorific-suffix">M.D.</span>,<br />
<span class="honorific-suffix">A.C.P.</span><br />
</span><br />
</nowiki></pre><br />
<br />
this hCard fragment would be displayed as:<br />
<br />
Dr. John Philip Paul Stevenson, Jr., M.D., A.C.P.<br />
<br />
=== 3.1.3 NICKNAME Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
NICKNAME:Robbie<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="nickname">Robbie</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as:<br />
<br />
Robbie<br />
<br />
==== Example 2 ====<br />
<br />
<pre><nowiki><br />
NICKNAME:Jim,Jimmie<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="nickname">Jim</span>, <br />
<span class="nickname">Jimmie</span><br />
</nowiki></pre><br />
<br />
this hCard fragment would be displayed as:<br />
<br />
Jim, Jimmie<br />
<br />
=== 3.1.4 PHOTO Type Definition ===<br />
<br />
==== Example 1 ====<br />
<pre><nowiki><br />
PHOTO;VALUE=uri:http://www.abc.com/pub/photos/jqpublic.gif<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<img class="photo" src="http://www.abc.com/pub/photos/jqpublic.gif" alt="" /><br />
</nowiki></pre><br />
<br />
==== Example 2 ====<br />
<pre><nowiki><br />
PHOTO;ENCODING=b;TYPE=JPEG:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN<br />
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm<br />
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0<br />
<...remainder of "B" encoded binary data...><br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment (line breaks inserted into src value for readability):<br />
<br />
<pre><nowiki><br />
<img class="photo" src="data:image/jpeg;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN<br />
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm<br />
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0<br />
...remainder of B encoded binary data..." alt="" /><br />
</nowiki></pre><br />
<br />
=== 3.1.5 BDAY Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
BDAY:1996-04-15<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<abbr class="bday" title="1996-04-15">April 15, 1996</abbr><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
<abbr class="bday" title="1996-04-15">April 15, 1996</abbr><br />
<br />
==== Example 2 ====<br />
<br />
<pre><nowiki><br />
BDAY:1953-10-15T23:10:00Z<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<abbr class="bday" title="1953-10-15T23:10:00Z">Oct 15, 1953</abbr><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
<abbr class="bday" title="1953-10-15T23:10:00Z">Oct 15, 1953</abbr><br />
<br />
==== Example 3 ====<br />
<br />
<pre><nowiki><br />
BDAY:1987-09-27T08:30:00-06:00<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<abbr class="bday" title="1987-09-27T08:30:00-06:00">Sept 9, 1987</abbr><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
<abbr class="bday" title="1987-09-27T08:30:00-06:00">Sept 9, 1987</abbr><br />
<br />
=== 3.2.1 ADR Type Definition ===<br />
<br />
<pre><nowiki><br />
ADR;TYPE=dom,home,postal,parcel:;;123 Main<br />
Street;Any Town;CA;91921-1234<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<div class="adr"><br />
<abbr class="type" title="dom">US</abbr><br />
<span class="type">home</span> address, for<br />
<abbr class="type" title="postal">mail</abbr> and<br />
<abbr class="type" title="parcel">shipments</abbr>:<br />
<div class="street-address">123 Main Street</div><br />
<span class="locality">Any Town</span>, <span class="region">CA</span>, <br />
<span class="postal-code">91921-1234</span><br />
</div><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
<div class="adr"><br />
<abbr class="type" title="dom">US</abbr><br />
<span class="type">home</span> address, for<br />
<abbr class="type" title="postal">mail</abbr> and<br />
<abbr class="type" title="parcel">shipments</abbr>:<br />
<div class="street-address">123 Main Street</div><br />
<span class="locality">Any Town</span>, <span class="region">CA</span>, <br />
<span class="postal-code">91921-1234</span><br />
</div><br />
<br />
=== 3.2.2 LABEL Type Definition ===<br />
<br />
<pre><nowiki><br />
LABEL;TYPE=dom,home,postal,parcel:Mr.John Q. Public\, Esq.\n<br />
Mail Drop: TNE QB\n123 Main Street\nAny Town\, CA 91921-1234<br />
\nU.S.A.<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
Please use the following address label for <br />
<div class="label"><br />
<abbr class="type" title="dom">local delivery</abbr><br />
<abbr class="type" title="home">to my home</abbr><br />
<abbr class="type" title="postal">of mail</abbr><br />
<abbr class="type" title="parcel">and packages:</abbr><br />
<pre><br />
Mr.John Q. Public, Esq.<br />
Mail Drop: TNE QB<br />
123 Main Street<br />
Any Town, CA 91921-1234<br />
U.S.A.<br />
</pre><br />
</div><br />
</nowiki></pre><br />
<br />
'''Note:''' the above hCard fragment uses a &lt;pre&gt; tag inside a property value to capture/represent explicit carriage returns ("\n" characters) from the vCard fragment.<br />
<br />
this hCard fragment could be displayed as: <br />
<br />
Please use the following address label for <br />
<abbr class="type" title="dom">local delivery</abbr><br />
<abbr class="type" title="home">to my home</abbr><br />
<abbr class="type" title="postal">of mail</abbr><br />
<abbr class="type" title="parcel">and packages:</abbr><br />
<pre><br />
Mr.John Q. Public, Esq.<br />
Mail Drop: TNE QB<br />
123 Main Street<br />
Any Town, CA 91921-1234<br />
U.S.A.<br />
</pre><br />
<br />
=== 3.3.1 TEL Type Definition ===<br />
<br />
<pre><nowiki><br />
TEL;TYPE=work,voice,pref,msg:+1-213-555-1234<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="tel"><br />
<abbr class="type" title="pref">my</abbr> <br />
<span class="type">work</span> <br />
<abbr class="type" title="voice">phone</abbr>, with <br />
<abbr class="type" title="msg">voicemail</abbr>:<br />
<span class="value">+1-213-555-1234</span><br />
</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
my work phone, with voicemail: +1-213-555-1234<br />
<br />
=== 3.3.2 EMAIL Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
EMAIL;TYPE=internet:jqpublic@xyz.dom1.com<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<a class="email" href="mailto:jqpublic@xyz.dom1.com">email jqpublic</a><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
[mailto:jqpublic@xyz.dom1.com email jqpublic]<br />
<br />
==== Example 2 ====<br />
<br />
<pre><nowiki><br />
EMAIL;TYPE=internet:jdoe@isp.net<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<a class="email" href="mailto:jdoe@isp.net">email jdoe</a><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
[mailto:jdoe@isp.net email jdoe]<br />
<br />
==== Example 3 ====<br />
<br />
<pre><nowiki><br />
EMAIL;TYPE=internet,pref:jane_doe@abc.com<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<a class="email" href="mailto:jane_doe@abc.com"><br />
<abbr class="type" title="pref">preferred</abbr> <br />
email for jane_doe<br />
</a><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
[mailto:jane_doe@abc.com preferred email for jane_doe]<br />
<br />
=== 3.3.3 MAILER Type Definition ===<br />
<br />
<pre><nowiki><br />
MAILER:PigeonMail 2.1<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
Jane Doe uses <span class="mailer">PigeonMail 2.1</span> for email.<br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
Jane Doe uses <span class="mailer">PigeonMail 2.1</span> for email.<br />
<br />
=== 3.4.1 TZ Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
TZ:-05:00<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="tz">-05:00</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
-05:00<br />
==== Example 2 ====<br />
<br />
<pre><nowiki><br />
TZ;VALUE=text:-05:00; EST; Raleigh/North America<br />
;This example has a single value, not a structure text value.<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<abbr class="tz"<br />
title="-05:00; EST; Raleigh/North America;This example has a single value, not a structure text value."><br />
EST<br />
</abbr><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
<abbr class="tz" title="-05:00; EST; Raleigh/North America;This example has a single value, not a structure text value.">EST</abbr><br />
<br />
=== 3.4.2 GEO Type Definition ===<br />
<br />
<pre><nowiki><br />
GEO:37.386013;-122.082932<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="geo"><br />
<span class="latitude">37.386013</span>, <br />
<span class="longitude">-122.082932</span><br />
</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
37.386013, -122.082932<br />
<br />
=== 3.5.1 TITLE Type Definition ===<br />
<br />
<pre><nowiki><br />
TITLE:Director\, Research and Development<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="title">Director, Research and Development</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
Director, Research and Development<br />
<br />
=== 3.5.2 ROLE Type Definition ===<br />
<br />
<pre><nowiki><br />
ROLE:Programmer<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="role">Programmer</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
Programmer<br />
<br />
=== 3.5.3 LOGO Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
LOGO;VALUE=uri:http://www.abc.com/pub/logos/abccorp.jpg<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
<img class="logo" src="http://www.abc.com/pub/logos/abccorp.jpg" alt="my logo" /><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as (note: I used a real URL for the image): <br />
<br />
http://microformats.org/img/mf-lg-ora.gif<br />
<br />
<br />
==== Example 2 ====<br />
<br />
<pre><nowiki><br />
LOGO;ENCODING=b;TYPE=JPEG:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN<br />
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm<br />
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0<br />
<...the remainder of "B" encoded binary data...><br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
<img class="logo" src="data:image/jpeg;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN<br />
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm<br />
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0<br />
...remainder of B encoded binary data..." alt="" /><br />
</nowiki></pre><br />
<br />
no display equivalent given, since data: URL from original example is incomplete.<br />
<br />
=== 3.5.4 AGENT Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
AGENT;VALUE=uri:<br />
CID:JQPUBLIC.part3.960129T083020.xyzMail@host3.com<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
<a class="agent" href="CID:JQPUBLIC.part3.960129T083020.xyzMail@host3.com">JQPUBLIC</a><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as:<br />
<br />
JQPUBLIC<br />
<br />
==== Example 2 ====<br />
<br />
<pre><nowiki><br />
AGENT:BEGIN:VCARD\nFN:Susan Thomas\nTEL:+1-919-555-<br />
1234\nEMAIL\;INTERNET:sthomas@host.com\nEND:VCARD\n<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
<span class="agent vcard"><br />
<a class="email fn n" href="mailto:sthomas@host.com">Susan Thomas</a>,<br />
<span class="tel">+1-919-555-1234</span><br />
</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
[mailto:sthomas@host.com Susan Thomas], +1-919-555-1234<br />
<br />
Note: the vCard in the AGENT property vCard fragment is actually invalid since it lacks an "N" property. However, the hCard version *is* valid, since I added the "n" class name to the example.<br />
<br />
=== 3.5.5 ORG Type Definition ===<br />
<br />
<pre><nowiki><br />
ORG:ABC\, Inc.;North American Division;Marketing<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="org"><br />
<span class="organization-name">ABC, Inc.</span>, <br />
<span class="organization-unit">North American Division</span>,<br />
<span class="organization-unit">Marketing</span>,<br />
</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as:<br />
<br />
ABC, Inc., North American Division, Marketing<br />
<br />
=== 3.6.1 CATEGORIES Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
CATEGORIES:TRAVEL AGENT<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="category">TRAVEL AGENT</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as:<br />
<br />
TRAVEL AGENT<br />
<br />
<br />
==== Example 2 ====<br />
<br />
<pre><nowiki><br />
CATEGORIES:INTERNET,IETF,INDUSTRY,INFORMATION TECHNOLOGY<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="category">INTERNET</span>, <br />
<span class="category">IETF</span>, <br />
<span class="category">INDUSTRY</span>, <br />
<span class="category">INFORMATION TECHNOLOGY</span><br />
</nowiki></pre><br />
<br />
this hCard fragment would be displayed as:<br />
<br />
INTERNET, IETF, INDUSTRY, INFORMATION TECHNOLOGY<br />
<br />
=== 3.6.2 NOTE Type Definition ===<br />
<br />
<pre><nowiki><br />
NOTE:This fax number is operational 0800 to 1715<br />
EST\, Mon-Fri.<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<p class="note">This fax number is operational 0800 to 1715 EST, Mon-Fri.</p><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as:<br />
<br />
This fax number is operational 0800 to 1715 EST, Mon-Fri.<br />
<br />
=== 3.6.3 PRODID Type Definition ===<br />
<br />
<pre><nowiki><br />
PRODID:-//ONLINE DIRECTORY//NONSGML Version 1//EN<br />
</nowiki></pre><br />
<br />
Note, this vCard property actually doesn't make sense as a hCard property, since it really should be filled in by whatever code transforms the hCard into a vCard, e.g. Brian Suda's X2V.<br />
<br />
=== 3.6.4 REV Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
REV:1995-10-31T22:27:10Z<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<abbr class="rev" title="1995-10-31T22:27:10Z">Updated: 10/31 10:27p</abbr><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as:<br />
<br />
<abbr class="rev" title="1995-10-31T22:27:10Z">Updated: 10/31 10:27p</abbr><br />
<br />
==== Example 2 ====<br />
<br />
<pre><nowiki><br />
REV:1997-11-15<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<abbr class="rev" title="1997-11-15">Updated: November 15</abbr><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as:<br />
<br />
<abbr class="rev" title="1997-11-15">Updated: November 15</abbr><br />
<br />
=== 3.6.5 SORT-STRING Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
FN:Rene van der Harten<br />
N:van der Harten;Rene;J.;Sir;R.D.O.N.<br />
SORT-STRING:Harten<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="n"<br />
<span class="honorific-prefix">Sir</span><br />
<span class="fn"><br />
<span class="given-name">Rene</span><br />
<span class="family-name"><br />
van der <span class="sort-string">Harten</span><br />
</span><br />
</span><br />
(<span class="additional-name">J.</span>),<br />
<span class="honorific-suffix">R.D.O.N.</span><br />
</span><br />
</nowiki></pre><br />
<br />
Note: The string "Harten" was NOT repeated in the hCard, even though it WAS repeated in the vCard (3 times! In N, FN, and SORT-STRING). The "SORT-STRING" property provides another good demonstration of how hCard enables better adherence to the [http://microformats.org/wiki/hcard-example1-steps#hCard_example_iteration_1:_DRY DRY principle] than vCard.<br />
<br />
this hCard fragment could be displayed as:<br />
<br />
Sir Rene van der Harten (J.), R.D.O.N.<br />
<br />
==== Example 2 ====<br />
<br />
<pre><nowiki><br />
FN:Robert Pau Shou Chang<br />
N:Pau;Shou Chang;Robert<br />
SORT-STRING:Pau<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="fn n"><br />
<span class="additional-name">Robert</span><br />
<span class="family-name sort-string">Pau</span><br />
<span class="given-name">Shou Chang</span><br />
</span><br />
</nowiki></pre><br />
<br />
Note: Not only was the string "Pau" was NOT repeated in the hCard (better [http://microformats.org/wiki/hcard-example1-steps#hCard_example_iteration_1:_DRY DRY principle] adherence again), even though it WAS repeated in the vCard, but in this case since the "family-name" and "sort-string" are the same, we were able to use [http://microformats.org/wiki/hcard-example1-steps#hCard_example_iteration_2:_element_conservation element conservation] and use only one element for both properties.<br />
<br />
this hCard fragment could be displayed as:<br />
<br />
Robert Pau Shou Chang<br />
<br />
==== Example 3 ====<br />
<br />
<pre><nowiki><br />
FN:Osamu Koura<br />
N:Koura;Osamu<br />
SORT-STRING:Koura<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="fn"><br />
Osamu <span class="sort-string">Koura</span><br />
</span><br />
</nowiki></pre><br />
<br />
Note: This example, in addition to illustrating better support for the [http://microformats.org/wiki/hcard-example1-steps#hCard_example_iteration_1:_DRY DRY principle], also makes use of the [http://microformats.org/wiki/hcard#Implied_.22N.22_Optimization Implied "N" Optimization].<br />
<br />
this hCard fragment could be displayed as:<br />
<br />
Osamu Koura<br />
<br />
==== Example 4 ====<br />
<br />
<pre><nowiki><br />
FN:Oscar del Pozo<br />
N:del Pozo Triscon;Oscar<br />
SORT-STRING:Pozo<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="n"><br />
<span class="fn"><br />
<span class="given-name">Oscar</span><br />
del <span class="sort-string">Pozo</span><br />
</span><br />
<span class="family-name" style="display:none"><br />
del Pozo Triscon<br />
</span><br />
</span><br />
</nowiki></pre><br />
<br />
Note: This example unfortunately could not completely adhere to the DRY principle due to the "FN" using a *substring* of the family-name, and in addition thus had to hide the extra "family-name" string value using CSS display:none, which in general should be avoided. Suggestion welcome for improvements on this hCard fragement.<br />
<br />
this hCard fragment could be displayed as:<br />
<br />
Oscar del Pozo<br />
<br />
==== Example 5 ====<br />
<br />
<pre><nowiki><br />
FN:Christine d'Aboville<br />
N:d'Aboville;Christine<br />
SORT-STRING:Aboville<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="fn"><br />
Christine d'<span class="sort-string">Aboville</span><br />
</span><br />
</nowiki></pre><br />
<br />
Note: This example re-demonstrates the same hCard advantages/efficiencies demonstrated in [http://microformats.org/wiki/hcard-examples#Example_3_3 example 3] above.<br />
<br />
this hCard fragment could be displayed as:<br />
<br />
Christine d'Aboville<br />
<br />
=== 3.6.6 SOUND Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
SOUND;TYPE=BASIC;VALUE=uri:CID:JOHNQPUBLIC.part8.<br />
19960229T080000.xyzMail@host1.com<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
<object class="sound" type="audio/basic"<br />
data="CID:JOHNQPUBLIC.part8.19960229T080000.xyzMail@host1.com"><br />
pronounciation of "JOHN Q PUBLIC"<br />
</object><br />
</nowiki></pre><br />
<br />
this hCard fragment would probably be displayed as <br />
<br />
pronounciation of "JOHN Q PUBLIC"<br />
<br />
unless your browser supports the MIME type "audio/basic" (defined in [http://www.rfc-editor.org/rfc/rfc2046.txt RFC2046 section 4.3]) and has some way of retrieving "CID:" urls.<br />
<br />
==== Example 2 ====<br />
<pre><nowiki><br />
SOUND;TYPE=BASIC;ENCODING=b:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN<br />
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm<br />
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0<br />
<...the remainder of "B" encoded binary data...><br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
<object class="sound" <br />
data="data:audio/basic;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN<br />
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm<br />
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0<br />
...the remainder of "B" encoded binary data..."><br />
pronounciation<br />
</object><br />
</nowiki></pre><br />
<br />
no display equivalent given, since data: URL from original example is incomplete.<br />
<br />
=== 3.6.7 UID Type Definition ===<br />
<br />
<pre><nowiki><br />
UID:19950401-080045-40000F192713-0052<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
Unique id: <br />
<span class="uid">19950401-080045-40000F192713-0052</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as <br />
<br />
Unique id:19950401-080045-40000F192713-0052<br />
<br />
Note: in practice I don't think I've seen globally unique IDs for "contact info" records published on the web, but perhaps I am not considering enough examples.<br />
<br />
<br />
=== 3.6.8 URL Type Definition ===<br />
<br />
<pre><nowiki><br />
URL:http://www.swbyps.restaurant.french/~chezchic.html<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
<a class="url" href="http://www.swbyps.restaurant.french/~chezchic.html">Chez Chic</a><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as <br />
<br />
[http://www.swbyps.restaurant.french/~chezchic.html Chez Chic]<br />
<br />
<br />
=== 3.7.1 CLASS Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
CLASS:PUBLIC<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
<span class="class">PUBLIC</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as <br />
<br />
PUBLIC<br />
<br />
==== Example 2 ====<br />
<br />
<pre><nowiki><br />
CLASS:PRIVATE<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
<span class="class">PRIVATE</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as <br />
<br />
PRIVATE<br />
<br />
==== Example 3 ====<br />
<br />
<pre><nowiki><br />
CLASS:CONFIDENTIAL<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
<span class="class">CONFIDENTIAL</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as <br />
<br />
CONFIDENTIAL<br />
<br />
=== 3.7.2 KEY Type Definition ===<br />
<br />
<pre><nowiki><br />
KEY;ENCODING=b:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcNAQEEBQA<br />
wdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENbW11bmljYX<br />
Rpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0<br />
ZW1zMRwwGgYDVQQDExNyb290Y2EubmV0c2NhcGUuY29tMB4XDTk3MDYwNj<br />
E5NDc1OVoXDTk3MTIwMzE5NDc1OVowgYkxCzAJBgNVBAYTAlVTMSYwJAYD<br />
VQQKEx1OZXRzY2FwZSBDb21tdW5pY2F0aW9ucyBDb3JwLjEYMBYGA1UEAx<br />
MPVGltb3RoeSBBIEhvd2VzMSEwHwYJKoZIhvcNAQkBFhJob3dlc0BuZXRz<br />
Y2FwZS5jb20xFTATBgoJkiaJk/IsZAEBEwVob3dlczBcMA0GCSqGSIb3DQ<br />
EBAQUAA0sAMEgCQQC0JZf6wkg8pLMXHHCUvMfL5H6zjSk4vTTXZpYyrdN2<br />
dXcoX49LKiOmgeJSzoiFKHtLOIboyludF90CgqcxtwKnAgMBAAGjNjA0MB<br />
EGCWCGSAGG+EIBAQQEAwIAoDAfBgNVHSMEGDAWgBT84FToB/GV3jr3mcau<br />
+hUMbsQukjANBgkqhkiG9w0BAQQFAAOBgQBexv7o7mi3PLXadkmNP9LcIP<br />
mx93HGp0Kgyx1jIVMyNgsemeAwBM+MSlhMfcpbTrONwNjZYW8vJDSoi//y<br />
rZlVt9bJbs7MNYZVsyF1unsqaln4/vy6Uawfg8VUMk1U7jt8LYpo4YULU7<br />
UZHPYVUaSgVttImOHZIKi4hlPXBOhcUQ==<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
<object class="key" type="application/octet-stream"<br />
data="data:application/octet-stream;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcNAQEEBQA<br />
wdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENbW11bmljYX<br />
Rpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0<br />
ZW1zMRwwGgYDVQQDExNyb290Y2EubmV0c2NhcGUuY29tMB4XDTk3MDYwNj<br />
E5NDc1OVoXDTk3MTIwMzE5NDc1OVowgYkxCzAJBgNVBAYTAlVTMSYwJAYD<br />
VQQKEx1OZXRzY2FwZSBDb21tdW5pY2F0aW9ucyBDb3JwLjEYMBYGA1UEAx<br />
MPVGltb3RoeSBBIEhvd2VzMSEwHwYJKoZIhvcNAQkBFhJob3dlc0BuZXRz<br />
Y2FwZS5jb20xFTATBgoJkiaJk/IsZAEBEwVob3dlczBcMA0GCSqGSIb3DQ<br />
EBAQUAA0sAMEgCQQC0JZf6wkg8pLMXHHCUvMfL5H6zjSk4vTTXZpYyrdN2<br />
dXcoX49LKiOmgeJSzoiFKHtLOIboyludF90CgqcxtwKnAgMBAAGjNjA0MB<br />
EGCWCGSAGG+EIBAQQEAwIAoDAfBgNVHSMEGDAWgBT84FToB/GV3jr3mcau<br />
+hUMbsQukjANBgkqhkiG9w0BAQQFAAOBgQBexv7o7mi3PLXadkmNP9LcIP<br />
mx93HGp0Kgyx1jIVMyNgsemeAwBM+MSlhMfcpbTrONwNjZYW8vJDSoi//y<br />
rZlVt9bJbs7MNYZVsyF1unsqaln4/vy6Uawfg8VUMk1U7jt8LYpo4YULU7<br />
UZHPYVUaSgVttImOHZIKi4hlPXBOhcUQ=="><br />
Key<br />
</object><br />
<br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as<br />
<br />
Key<br />
<br />
Note: Because of the lack of a TYPE value in the RFC2426 example, I substituted application/octet-stream. Clearly for it to be of some use, the type specified must be some sort of key or certificate mime type.<br />
<br />
=== 7. Authors' Addresses ===<br />
<br />
<pre><nowiki><br />
BEGIN:vCard<br />
VERSION:3.0<br />
FN:Frank Dawson<br />
ORG:Lotus Development Corporation<br />
ADR;TYPE=WORK,POSTAL,PARCEL:;;6544 Battleford Drive<br />
;Raleigh;NC;27613-3502;U.S.A.<br />
TEL;TYPE=VOICE,MSG,WORK:+1-919-676-9515<br />
TEL;TYPE=FAX,WORK:+1-919-676-9564<br />
EMAIL;TYPE=INTERNET,PREF:Frank_Dawson@Lotus.com<br />
EMAIL;TYPE=INTERNET:fdawson@earthlink.net<br />
URL:http://home.earthlink.net/~fdawson<br />
END:vCard<br />
<br />
<br />
BEGIN:vCard<br />
VERSION:3.0<br />
FN:Tim Howes<br />
ORG:Netscape Communications Corp.<br />
ADR;TYPE=WORK:;;501 E. Middlefield Rd.;Mountain View;<br />
CA; 94043;U.S.A.<br />
TEL;TYPE=VOICE,MSG,WORK:+1-415-937-3419<br />
TEL;TYPE=FAX,WORK:+1-415-528-4164<br />
EMAIL;TYPE=INTERNET:howes@netscape.com<br />
END:vCard<br />
</nowiki></pre><br />
<br />
Note that both of these vCards are invalid since they lack the REQUIRED "N" property which is quite ironic, since these are the vCards of the authors themselves.<br />
<br />
Nonetheless, these vCards can be represented by the following hCards:<br />
<br />
<pre><nowiki><br />
<div class="vcard"><br />
<a class="url fn" href="http://home.earthlink.net/~fdawson">Frank Dawson</a><br />
<div class="org">Lotus Development Corporation</div><br />
<div class="adr"><br />
<span class="type">work</span> address <br />
(<abbr class="type" title="postal">mail</abbr> and<br />
<abbr class="type" title="parcel">packages</abbr>):<br />
<div class="street-address">6544 Battleford Drive</div><br />
<span class="locality">Raleigh</span><br />
<span class="region">NC</span><br />
<span class="postal-code">27613-3502</span><br />
<div class="country-name">U.S.A.</div><br />
</div><br />
<div class="tel"><br />
<span class="value">+1-919-676-9515</span> <br />
(<abbr class="type" title="WORK">w</abbr>,<br />
<abbr class="type" title="VOICE">v</abbr><abbr class="type" title="MSG">m</abbr>)<br />
</div><br />
<div class="tel"><br />
<span class="value">+1-919-676-9564</span><br />
(<abbr class="type" title="WORK">w</abbr><abbr class="type" title="FAX">f</abbr>)<br />
</div><br />
<a class="email" href="mailto:Frank_Dawson@Lotus.com"><br />
<span class="type">pref<span>erred</span> email</span><br />
</a>,<br />
<a class="email" href="mailto:fdawson@earthlink.net"><br />
alternate email<br />
</a><br />
</div><br />
<div class="vcard"><br />
<a class="email fn" href="mailto:howes@netscape.com">Tim Howes</a><br />
<div class="org">Netscape Communications Corp.</div><br />
<div class="adr"><br />
<span class="type">work</span> address:<br />
<div class="street-address">501 E. Middlefield Rd.</div><br />
<span class="locality">Mountain View</span>, <br />
<span class="region">CA</span><br />
<span class="postal-code">94043</span><br />
<div class="country-name">U.S.A.</div><br />
</div><br />
<div class="tel"><br />
<span class="value">+1-415-937-3419</span> <br />
(<abbr class="type" title="WORK">w</abbr>,<br />
<abbr class="type" title="VOICE">v</abbr><abbr class="type" title="MSG">m</abbr>)<br />
</div><br />
<div class="tel"><br />
<span class="value">+1-415-528-4164</span><br />
(<abbr class="type" title="WORK">w</abbr><abbr class="type" title="FAX">f</abbr>)<br />
</div><br />
</div><br />
</nowiki></pre><br />
<br />
this hCards could be displayed as<br />
<br />
<div class="vcard"><br />
[http://home.earthlink.net/~fdawson Frank Dawson]<br />
<div class="org">Lotus Development Corporation</div><br />
<div class="adr"><br />
<span class="type">work</span> address <br />
(<abbr class="type" title="postal">mail</abbr> and<br />
<abbr class="type" title="parcel">packages</abbr>):<br />
<div class="street-address">6544 Battleford Drive</div><br />
<span class="locality">Raleigh</span><br />
<span class="region">NC</span><br />
<span class="postal-code">27613-3502</span><br />
<div class="country-name">U.S.A.</div><br />
</div><br />
<div class="tel"><br />
<span class="value">+1-919-676-9515</span> <br />
(<abbr class="type" title="WORK">w</abbr>,<br />
<abbr class="type" title="VOICE">v</abbr><abbr class="type" title="MSG">m</abbr>)<br />
</div><br />
<div class="tel"><br />
<span class="value">+1-919-676-9564</span><br />
(<abbr class="type" title="WORK">w</abbr><abbr class="type" title="FAX">f</abbr>)<br />
</div><br />
[mailto:Frank_Dawson@Lotus.com preferred email],<br />
[mailto:fdawson@earthlink.net alternate email]<br />
</div><br />
<br />
<div class="vcard"><br />
[mailto:howes@netscape.com Tim Howes]<br />
<div class="org">Netscape Communications Corp.</div><br />
<div class="adr"><br />
<span class="type">work</span> address:<br />
<div class="street-address">501 E. Middlefield Rd.</div><br />
<span class="locality">Mountain View</span>, <br />
<span class="region">CA</span><br />
<span class="postal-code">94043</span><br />
<div class="country-name">U.S.A.</div><br />
</div><br />
<div class="tel"><br />
<span class="value">+1-415-937-3419</span> <br />
(<abbr class="type" title="WORK">w</abbr>,<br />
<abbr class="type" title="VOICE">v</abbr><abbr class="type" title="MSG">m</abbr>)<br />
</div><br />
<div class="tel"><br />
<span class="value">+1-415-528-4164</span><br />
(<abbr class="type" title="WORK">w</abbr><abbr class="type" title="FAX">f</abbr>)<br />
</div><br />
</div><br />
<br />
== Test Cases ==<br />
<br />
These are [[hcard|hCard]] examples which have been found to be particularly useful in finding bugs in hCard parsers (e.g. X2V).<br />
<br />
=== Problem with BDAY Information ===<br />
<br />
this example:<br />
<br />
<pre><br />
<!-- birthday --><br />
<div class="bday"><br />
<dt>Birthday</dt><br />
<dd><br />
<abbr class="value" title="1985-10-27T00:00:00Z">October 27, 1985</abbr><br />
</dd><br />
</div><br />
</pre><br />
<br />
ought to produce "BDAY:1985-10-27T00:00:00Z" but it produces "BDAY:Birthday October 27\, 1985". interesting is that the apple addressbook is still willing to accept it in this way.<br />
<br />
=== case-INSENSITIVITY of type values ===<br />
<br />
* "home" vs. "Home"<br />
<br />
this example works with X2V:<br />
<br />
<pre><br />
<div class="tel"><br />
<dt>Phone (<span class="type">home</span>)</dt><br />
<dd><span class="value">+438123418</span></dd><br />
</div><br />
</pre><br />
<br />
this does not, but should. but instead it becomes just TEL without a type in the vcard<br />
<br />
<pre><br />
<div class="tel"><br />
<dt>Phone (<span class="type">Home</span>)</dt><br />
<dd><span class="value">+438123418</span></dd><br />
</div><br />
</pre><br />
<br />
=== GEO parsing ===<br />
The following hCard:<br />
<br />
<pre><nowiki><br />
<div class="vcard"><br />
<span class="n"><br />
<a class="url" href="http://t37.net"><br />
<span class="given-name">Fréderic</span> <br />
<span class="family-name">de Villamil</span> <br />
</a><br />
</span><br />
<span class="nickname">neuro</span><br />
<a class="email" href="mailto:neuroNOSPAM@t37.net"><br />
<span class="type">pref<span>erred</span> email</span><br />
</a><br />
<span class="org">Omatis</span><br />
<span class="adr"><br />
<abbr class="type" title="dom">France</abbr><br />
<span class="type">home</span> address<br />
<abbr class="type" title="postal">mail</abbr> and<br />
<abbr class="type" title="parcel">shipments</abbr>:<br />
<span class="street-address">12 rue Danton</span><br />
<span class="locality">Le Kremlin-Bicetre</span><br />
<span class="postal-code">94270</span><br />
<span class="country-name">France</span><br />
</span><br />
<span class="geo"><br />
<abbr class="latitude" title="48.816667">N 48° 81.6667</abbr><br />
<abbr class="longitude" title="2.366667">E 2° 36.6667</abbr><br />
</span><br />
</div><br />
</nowiki><br />
</pre><br />
<br />
Should be translated into the following vCard:<br />
<br />
<pre><nowiki><br />
BEGIN:VCARD<br />
VERSION:3.0<br />
URL:http://t37.net<br />
ORG:Omatis;;<br />
NICKNAME:neuro<br />
N:de Villamil;Frederic;;Mr.;<br />
EMAIL;TYPE=INTERNET,PREF:neuroNOSPAM@t37.net<br />
ADR;TYPE=HOME:;;12 rue danton;le Kremlin-Bicetre;;94270;France<br />
GEO:48.816667;2.366667<br />
END:VCARD<br />
</nowiki></pre><br />
<br />
X2V currently (2005-12-18) fails to parse/export the GEO property at all.<br />
<br />
== Other ==<br />
<br />
* See [[hcard-brainstorming]] for more examples (which may eventually be moved here) and analysis.</div>Rubenhttp://microformats.org/wiki/index.php?title=hcard-examples-rfc2426&diff=6368hcard-examples-rfc24262006-05-14T21:53:07Z<p>Ruben: /* MSN Messenger */</p>
<hr />
<div><h1>hCard examples</h1><br />
<br />
Example [[hcard|hCards]].<br />
<br />
== Authors ==<br />
* [http://tantek.com/log Tantek Çelik]<br />
* Brian Suda<br />
<br />
== Instructive Examples ==<br />
<br />
=== Authors of Pages and Posts ===<br />
[http://www.w3.org/TR/html401/struct/global.html#h-7.5.6 Per the HTML4.01 specification], authors should be using the <code>&lt;address&gt;</code> element to indicate the "contact information for a document or a major part of a document." E.g.<br />
<br />
<pre><nowiki><br />
<address><br />
<a href="http://tantek.com/">Tantek Çelik</a><br />
</address><br />
</nowiki></pre><br />
<br />
By adding [[hcard|hCard]] to such existing semantic XHTML, you can explicitly indicate the name of the person, their URL, etc.:<br />
<br />
<pre><nowiki><br />
<address class="vcard"><br />
<a class="fn url" href="http://tantek.com/">Tantek Çelik</a><br />
</address><br />
</nowiki></pre><br />
<br />
This could be displayed as:<br />
<br />
[http://tantek.com/ Tantek Çelik]<br />
<br />
This works not only for whole pages, but also for "major part[s]" of pages, e.g. blog posts.<br />
<br />
See the [http://microformats.org/blog/ microformats.org blog] (view the source) for a live example. The author of every blog post on the microformats.org blog is marked up as an <code>&lt;address class="vcard"&gt;</code> element like the example shown above.<br />
<br />
=== References to People and Organizations ===<br />
<br />
A common pattern in blog posts is to link mentions of people's names to their blogs, and/or organizations to their home pages. E.g.:<br />
<br />
<pre><nowiki><br />
<cite><a href="http://meyerweb.com/">Eric Meyer</a></cite> wrote a post <br />
(<cite><a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">Tax Relief</a></cite>) <br />
about an unintentionally humorous letter he received from the<br />
<a href="http://irs.gov/">Internal Revenue Service</a>.<br />
</nowiki></pre><br />
<br />
By adding hCard to such markup, you can explicitly indicate both the person and the organization by name and URL:<br />
<br />
<pre><nowiki><br />
<cite class="vcard"><a class="fn url" href="http://meyerweb.com/">Eric Meyer</a></cite> wrote a post <br />
(<cite><a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">Tax Relief</a></cite>) <br />
about an unintentionally humorous letter he received from the<br />
<span class="vcard"><a class="fn org url" href="http://irs.gov/">Internal Revenue Service</a>.<br />
</nowiki></pre><br />
<br />
This could be displayed as:<br />
<br />
''[http://meyerweb.com/ Eric Meyer]'' wrote a post (''[http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/ Tax Relief]'') about an unintentionally humorous letter he received from the [http://irs.gov/ Internal Revenue Service].<br />
<br />
<br />
=== hCard and XFN ===<br />
==== References to People in Blog Posts ====<br />
<br />
In the above example, one person (the blogger) is referring to another person (Eric Meyer). In addition to using hCard to explicitly mark up the reference as a person, the blogger can use [http://gmpg.org/xfn/ XFN] (the XHTML Friends Network) to indicate their relationship to Eric Meyer, e.g.:<br />
<br />
<pre><nowiki><br />
<cite class="vcard"><a class="fn url" rel="friend colleague met" href="http://meyerweb.com/">Eric Meyer</a></cite> wrote a post <br />
(<cite><a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">Tax Relief</a></cite>) <br />
about an unintentionally humorous letter he received from the<br />
<span class="vcard"><a class="fn org url" href="http://irs.gov/">Internal Revenue Service</a></span>.<br />
</nowiki></pre><br />
<br />
It would be displayed the same as the previous example.<br />
<br />
==== References to People in Blogrolls ====<br />
<br />
Many bloggers are using XFN (often using an easy user interface like that built into [http://wordpress.org WordPress]) to explicitly indicate their relationships to the people in their blogrolls:<br />
<br />
<pre><nowiki><br />
<ul><br />
<li><a href="http://meyerweb.com" rel="friend colleague met">Eric Meyer</a></li><br />
<li><a href="http://photomatt.net" rel="friend colleague met">Matt Mullenweg</a></li><br />
</ul><br />
</nowiki></pre><br />
<br />
By adding hCard markup to an XFN Friendly blogroll, you can explicitly indicate the name and URL of the person in addition to their relationship:<br />
<br />
<pre><nowiki><br />
<ul><br />
<li class="vcard"><a class="fn url" href="http://meyerweb.com" rel="friend colleague met">Eric Meyer</a></li><br />
<li class="vcard"><a class="fn url" href="http://photomatt.net" rel="friend colleague met">Matt Mullenweg</a></li><br />
</ul><br />
</nowiki></pre><br />
<br />
This could be displayed as:<br />
* [http://meyerweb.com Eric Meyer]<br />
* [http://photomatt.net Matt Mullenweg]<br />
<br />
For more information on XFN, see the [http://gmpg.org/xfn/ XFN home page], [http://gmpg.org/xfn/join joining XFN], and [http://gmpg.org/xfn/background background on XFN].<br />
<br />
=== New Types of Contact Info ===<br />
<br />
Since vCard was designed, there have been numerous other services that provide individuals with addresses or other means of contact, e.g. instant messaging, voip, etc.<br />
<br />
Does this mean that vCard (and hence hCard) must be extended to represent these?<br />
<br />
Thanks to the flexibility of the URL property, the answer is no, no extensions are necessary. Instead, we use the proper URL for the service which identifies the service (protocol, machine, and/or path), and place the individual's address inside that.<br />
<br />
==== AOL Instant Messenger (AIM) ====<br />
<br />
AOL Instant Messenger (AIM) ids can be represented using the <code>aim:</code> protocol. Many who publish their AIM ids do so with clickable URLs e.g.:<br />
<br />
<pre><nowiki><br />
<a href="aim:goim?screenname=ShoppingBuddy">IM with the AIM ShoppingBuddy</a><br />
</nowiki></pre><br />
<br />
Thus for hCard, we will adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:<br />
<br />
<pre><nowiki><br />
<a class="url" href="aim:goim?screenname=ShoppingBuddy">IM with the AIM ShoppingBuddy</a><br />
</nowiki></pre><br />
<br />
==== Yahoo Messenger ====<br />
<br />
Similarly, Yahoo Instant Messenger (YIM) ids can be represented using the <code>ymsgr:</code> protocol. And similarly many publish their YIM ids as clickable URLs e.g.:<br />
<br />
<pre><nowiki><br />
<a href="ymsgr:sendIM?SomeYahooFriend">IM with SomeYahooFriend</a><br />
</nowiki></pre><br />
<br />
Again, for hCard, we will adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:<br />
<br />
<pre><nowiki><br />
<a class="url" href="ymsgr:sendIM?SomeYahooFriend">IM with SomeYahooFriend</a><br />
</nowiki></pre><br />
<br />
==== MSN Messenger ====<br />
<br />
<strike>Unfortunately, AFAIK, there is no hacked up defacto protocol for opening an MSN IM session with an MSN userid (which themselves are just email addresses). Thus we must simply resort to marking them up as email addresses, and expect that consumers may use some heuristic, such as "hotmail.com email addresses are also MSN IM ids".</strike><br />
<br />
MSN Messenger (MSNIM) ids can be represented using the <code>msnim:</code> protocol. And similarly many publish their MSNIM ids as clickable URLs e.g.:<br />
<br />
<pre><nowiki><br />
<a href="msnim:chat?contact=joebob@hotmail.com">IM with joebob@hotmail.com</a><br />
</nowiki></pre><br />
<br />
For hCard, we will adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:<br />
<br />
<pre><nowiki><br />
<a class="url" href="msnim:chat?contact=joebob@hotmail.com">IM with joebob@hotmail.com</a><br />
</nowiki></pre><br />
<br />
==== Site profiles ==== <br />
Bloggers often indicate their identity on content hosting services using the URL to their home page, feed or profile on those services. By labeling them as URL properties, these additional facets of identity can be publish in an hCard as well.<br />
<br />
* [http://del.icio.us delicious]:<br />
** <code>&lt;a class="url" href="http://del.icio.us/rbach"&gt;Robert Bachmann's links&lt;/a&gt;</code><br />
* [http://flickr.com Flickr]:<br />
** <code>&lt;a class="url" href="http://flickr.com/photos/tantek/"&gt;See my photos&lt;/a&gt;</code><br />
** <code>&lt;a class="url" href="http://flickr.com/people/tantek/"&gt;Flickr profile&lt;/a&gt;</code><br />
* [http://technorati.com/ Technorati]:<br />
** <code>&lt;a class="url" href="http://technorati.com/profile/tantek/"&gt;Technorati profile&lt;/a&gt;</code><br />
* Add more here...<br />
** ....<br />
<br />
== RFC 2426 examples in hCard ==<br />
<br />
These are 1:1 hCard examples for each example in [http://www.ietf.org/rfc/rfc2426.txt RFC 2426].<br />
<br />
Mark Pilgrim has made these hCard examples available as separate files:<br />
* http://diveintomark.org/projects/greasemonkey/hcard/tests/<br />
<br />
=== 2.4.2 VCARD ===<br />
<br />
<pre><nowiki><br />
AGENT:BEGIN:VCARD\nFN:Joe Friday\nTEL:+1-919-555-7878\n<br />
TITLE:Area Administrator\, Assistant\n EMAIL\;TYPE=INTERNET:\n<br />
jfriday@host.com\nEND:VCARD\n<br />
</nowiki></pre><br />
<br />
This vCard fragment has one property whose value is another vCard, and could be represented as an hCard fragment with an embedded hCard, literally (with the unnecessary type=internet default omitted, and the implied n optimization):<br />
<br />
<pre><nowiki><br />
<div class="agent vcard"><br />
<a class="email fn" href="mailto:jfriday@host.com">Joe Friday</a><br />
<div class="tel">+1-919-555-7878</div><br />
<div class="title">Area Administrator, Assistant</div><br />
</div><br />
</nowiki></pre><br />
<br />
this hCard could be displayed as:<br />
<br />
[mailto:jfriday@host.com Joe Friday]<br /><br />
+1-919-555-7878<br /><br />
Area Administrator, Assistant<br />
<br />
=== 3.1.1 FN Type Definition ===<br />
<br />
<pre><nowiki><br />
FN:Mr. John Q. Public\, Esq.<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="fn">Mr. John Q. Public, Esq.</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as:<br />
<br />
Mr. John Q. Public, Esq.<br />
<br />
=== 3.1.2 N Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
N:Public;John;Quinlan;Mr.;Esq.<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="n"><br />
<span class="honorific-prefix">Mr.</span><br />
<span class="given-name">John</span><br />
<span class="additional-name">Quinlan</span><br />
<span class="family-name">Public</span>, <br />
<span class="honorific-suffix">Esq.</span><br />
</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as:<br />
<br />
Mr. John Quinlan Public, Esq.<br />
<br />
==== Example 2 ====<br />
<br />
<pre><nowiki><br />
N:Stevenson;John;Philip,Paul;Dr.;Jr.,M.D.,A.C.P.<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="n"><br />
<span class="honorific-prefix">Dr.</span><br />
<span class="given-name">John</span><br />
<span class="additional-name">Philip</span><br />
<span class="additional-name">Paul</span><br />
<span class="family-name">Stevenson</span>,<br />
<span class="honorific-suffix">Jr.</span>,<br />
<span class="honorific-suffix">M.D.</span>,<br />
<span class="honorific-suffix">A.C.P.</span><br />
</span><br />
</nowiki></pre><br />
<br />
this hCard fragment would be displayed as:<br />
<br />
Dr. John Philip Paul Stevenson, Jr., M.D., A.C.P.<br />
<br />
=== 3.1.3 NICKNAME Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
NICKNAME:Robbie<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="nickname">Robbie</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as:<br />
<br />
Robbie<br />
<br />
==== Example 2 ====<br />
<br />
<pre><nowiki><br />
NICKNAME:Jim,Jimmie<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="nickname">Jim</span>, <br />
<span class="nickname">Jimmie</span><br />
</nowiki></pre><br />
<br />
this hCard fragment would be displayed as:<br />
<br />
Jim, Jimmie<br />
<br />
=== 3.1.4 PHOTO Type Definition ===<br />
<br />
==== Example 1 ====<br />
<pre><nowiki><br />
PHOTO;VALUE=uri:http://www.abc.com/pub/photos/jqpublic.gif<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<img class="photo" src="http://www.abc.com/pub/photos/jqpublic.gif" alt="" /><br />
</nowiki></pre><br />
<br />
==== Example 2 ====<br />
<pre><nowiki><br />
PHOTO;ENCODING=b;TYPE=JPEG:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN<br />
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm<br />
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0<br />
<...remainder of "B" encoded binary data...><br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment (line breaks inserted into src value for readability):<br />
<br />
<pre><nowiki><br />
<img class="photo" src="data:image/jpeg;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN<br />
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm<br />
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0<br />
...remainder of B encoded binary data..." alt="" /><br />
</nowiki></pre><br />
<br />
=== 3.1.5 BDAY Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
BDAY:1996-04-15<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<abbr class="bday" title="1996-04-15">April 15, 1996</abbr><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
<abbr class="bday" title="1996-04-15">April 15, 1996</abbr><br />
<br />
==== Example 2 ====<br />
<br />
<pre><nowiki><br />
BDAY:1953-10-15T23:10:00Z<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<abbr class="bday" title="1953-10-15T23:10:00Z">Oct 15, 1953</abbr><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
<abbr class="bday" title="1953-10-15T23:10:00Z">Oct 15, 1953</abbr><br />
<br />
==== Example 3 ====<br />
<br />
<pre><nowiki><br />
BDAY:1987-09-27T08:30:00-06:00<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<abbr class="bday" title="1987-09-27T08:30:00-06:00">Sept 9, 1987</abbr><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
<abbr class="bday" title="1987-09-27T08:30:00-06:00">Sept 9, 1987</abbr><br />
<br />
=== 3.2.1 ADR Type Definition ===<br />
<br />
<pre><nowiki><br />
ADR;TYPE=dom,home,postal,parcel:;;123 Main<br />
Street;Any Town;CA;91921-1234<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<div class="adr"><br />
<abbr class="type" title="dom">US</abbr><br />
<span class="type">home</span> address, for<br />
<abbr class="type" title="postal">mail</abbr> and<br />
<abbr class="type" title="parcel">shipments</abbr>:<br />
<div class="street-address">123 Main Street</div><br />
<span class="locality">Any Town</span>, <span class="region">CA</span>, <br />
<span class="postal-code">91921-1234</span><br />
</div><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
<div class="adr"><br />
<abbr class="type" title="dom">US</abbr><br />
<span class="type">home</span> address, for<br />
<abbr class="type" title="postal">mail</abbr> and<br />
<abbr class="type" title="parcel">shipments</abbr>:<br />
<div class="street-address">123 Main Street</div><br />
<span class="locality">Any Town</span>, <span class="region">CA</span>, <br />
<span class="postal-code">91921-1234</span><br />
</div><br />
<br />
=== 3.2.2 LABEL Type Definition ===<br />
<br />
<pre><nowiki><br />
LABEL;TYPE=dom,home,postal,parcel:Mr.John Q. Public\, Esq.\n<br />
Mail Drop: TNE QB\n123 Main Street\nAny Town\, CA 91921-1234<br />
\nU.S.A.<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
Please use the following address label for <br />
<div class="label"><br />
<abbr class="type" title="dom">local delivery</abbr><br />
<abbr class="type" title="home">to my home</abbr><br />
<abbr class="type" title="postal">of mail</abbr><br />
<abbr class="type" title="parcel">and packages:</abbr><br />
<pre><br />
Mr.John Q. Public, Esq.<br />
Mail Drop: TNE QB<br />
123 Main Street<br />
Any Town, CA 91921-1234<br />
U.S.A.<br />
</pre><br />
</div><br />
</nowiki></pre><br />
<br />
'''Note:''' the above hCard fragment uses a &lt;pre&gt; tag inside a property value to capture/represent explicit carriage returns ("\n" characters) from the vCard fragment.<br />
<br />
this hCard fragment could be displayed as: <br />
<br />
Please use the following address label for <br />
<abbr class="type" title="dom">local delivery</abbr><br />
<abbr class="type" title="home">to my home</abbr><br />
<abbr class="type" title="postal">of mail</abbr><br />
<abbr class="type" title="parcel">and packages:</abbr><br />
<pre><br />
Mr.John Q. Public, Esq.<br />
Mail Drop: TNE QB<br />
123 Main Street<br />
Any Town, CA 91921-1234<br />
U.S.A.<br />
</pre><br />
<br />
=== 3.3.1 TEL Type Definition ===<br />
<br />
<pre><nowiki><br />
TEL;TYPE=work,voice,pref,msg:+1-213-555-1234<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="tel"><br />
<abbr class="type" title="pref">my</abbr> <br />
<span class="type">work</span> <br />
<abbr class="type" title="voice">phone</abbr>, with <br />
<abbr class="type" title="msg">voicemail</abbr>:<br />
<span class="value">+1-213-555-1234</span><br />
</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
my work phone, with voicemail: +1-213-555-1234<br />
<br />
=== 3.3.2 EMAIL Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
EMAIL;TYPE=internet:jqpublic@xyz.dom1.com<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<a class="email" href="mailto:jqpublic@xyz.dom1.com">email jqpublic</a><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
[mailto:jqpublic@xyz.dom1.com email jqpublic]<br />
<br />
==== Example 2 ====<br />
<br />
<pre><nowiki><br />
EMAIL;TYPE=internet:jdoe@isp.net<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<a class="email" href="mailto:jdoe@isp.net">email jdoe</a><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
[mailto:jdoe@isp.net email jdoe]<br />
<br />
==== Example 3 ====<br />
<br />
<pre><nowiki><br />
EMAIL;TYPE=internet,pref:jane_doe@abc.com<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<a class="email" href="mailto:jane_doe@abc.com"><br />
<abbr class="type" title="pref">preferred</abbr> <br />
email for jane_doe<br />
</a><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
[mailto:jane_doe@abc.com preferred email for jane_doe]<br />
<br />
=== 3.3.3 MAILER Type Definition ===<br />
<br />
<pre><nowiki><br />
MAILER:PigeonMail 2.1<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
Jane Doe uses <span class="mailer">PigeonMail 2.1</span> for email.<br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
Jane Doe uses <span class="mailer">PigeonMail 2.1</span> for email.<br />
<br />
=== 3.4.1 TZ Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
TZ:-05:00<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="tz">-05:00</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
-05:00<br />
==== Example 2 ====<br />
<br />
<pre><nowiki><br />
TZ;VALUE=text:-05:00; EST; Raleigh/North America<br />
;This example has a single value, not a structure text value.<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<abbr class="tz"<br />
title="-05:00; EST; Raleigh/North America;This example has a single value, not a structure text value."><br />
EST<br />
</abbr><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
<abbr class="tz" title="-05:00; EST; Raleigh/North America;This example has a single value, not a structure text value.">EST</abbr><br />
<br />
=== 3.4.2 GEO Type Definition ===<br />
<br />
<pre><nowiki><br />
GEO:37.386013;-122.082932<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="geo"><br />
<span class="latitude">37.386013</span>, <br />
<span class="longitude">-122.082932</span><br />
</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
37.386013, -122.082932<br />
<br />
=== 3.5.1 TITLE Type Definition ===<br />
<br />
<pre><nowiki><br />
TITLE:Director\, Research and Development<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="title">Director, Research and Development</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
Director, Research and Development<br />
<br />
=== 3.5.2 ROLE Type Definition ===<br />
<br />
<pre><nowiki><br />
ROLE:Programmer<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="role">Programmer</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
Programmer<br />
<br />
=== 3.5.3 LOGO Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
LOGO;VALUE=uri:http://www.abc.com/pub/logos/abccorp.jpg<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
<img class="logo" src="http://www.abc.com/pub/logos/abccorp.jpg" alt="my logo" /><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as (note: I used a real URL for the image): <br />
<br />
http://microformats.org/img/mf-lg-ora.gif<br />
<br />
<br />
==== Example 2 ====<br />
<br />
<pre><nowiki><br />
LOGO;ENCODING=b;TYPE=JPEG:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN<br />
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm<br />
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0<br />
<...the remainder of "B" encoded binary data...><br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
<img class="logo" src="data:image/jpeg;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN<br />
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm<br />
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0<br />
...remainder of B encoded binary data..." alt="" /><br />
</nowiki></pre><br />
<br />
no display equivalent given, since data: URL from original example is incomplete.<br />
<br />
=== 3.5.4 AGENT Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
AGENT;VALUE=uri:<br />
CID:JQPUBLIC.part3.960129T083020.xyzMail@host3.com<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
<a class="agent" href="CID:JQPUBLIC.part3.960129T083020.xyzMail@host3.com">JQPUBLIC</a><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as:<br />
<br />
JQPUBLIC<br />
<br />
==== Example 2 ====<br />
<br />
<pre><nowiki><br />
AGENT:BEGIN:VCARD\nFN:Susan Thomas\nTEL:+1-919-555-<br />
1234\nEMAIL\;INTERNET:sthomas@host.com\nEND:VCARD\n<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
<span class="agent vcard"><br />
<a class="email fn n" href="mailto:sthomas@host.com">Susan Thomas</a>,<br />
<span class="tel">+1-919-555-1234</span><br />
</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as: <br />
<br />
[mailto:sthomas@host.com Susan Thomas], +1-919-555-1234<br />
<br />
Note: the vCard in the AGENT property vCard fragment is actually invalid since it lacks an "N" property. However, the hCard version *is* valid, since I added the "n" class name to the example.<br />
<br />
=== 3.5.5 ORG Type Definition ===<br />
<br />
<pre><nowiki><br />
ORG:ABC\, Inc.;North American Division;Marketing<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="org"><br />
<span class="organization-name">ABC, Inc.</span>, <br />
<span class="organization-unit">North American Division</span>,<br />
<span class="organization-unit">Marketing</span>,<br />
</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as:<br />
<br />
ABC, Inc., North American Division, Marketing<br />
<br />
=== 3.6.1 CATEGORIES Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
CATEGORIES:TRAVEL AGENT<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="category">TRAVEL AGENT</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as:<br />
<br />
TRAVEL AGENT<br />
<br />
<br />
==== Example 2 ====<br />
<br />
<pre><nowiki><br />
CATEGORIES:INTERNET,IETF,INDUSTRY,INFORMATION TECHNOLOGY<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="category">INTERNET</span>, <br />
<span class="category">IETF</span>, <br />
<span class="category">INDUSTRY</span>, <br />
<span class="category">INFORMATION TECHNOLOGY</span><br />
</nowiki></pre><br />
<br />
this hCard fragment would be displayed as:<br />
<br />
INTERNET, IETF, INDUSTRY, INFORMATION TECHNOLOGY<br />
<br />
=== 3.6.2 NOTE Type Definition ===<br />
<br />
<pre><nowiki><br />
NOTE:This fax number is operational 0800 to 1715<br />
EST\, Mon-Fri.<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<p class="note">This fax number is operational 0800 to 1715 EST, Mon-Fri.</p><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as:<br />
<br />
This fax number is operational 0800 to 1715 EST, Mon-Fri.<br />
<br />
=== 3.6.3 PRODID Type Definition ===<br />
<br />
<pre><nowiki><br />
PRODID:-//ONLINE DIRECTORY//NONSGML Version 1//EN<br />
</nowiki></pre><br />
<br />
Note, this vCard property actually doesn't make sense as a hCard property, since it really should be filled in by whatever code transforms the hCard into a vCard, e.g. Brian Suda's X2V.<br />
<br />
=== 3.6.4 REV Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
REV:1995-10-31T22:27:10Z<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<abbr class="rev" title="1995-10-31T22:27:10Z">Updated: 10/31 10:27p</abbr><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as:<br />
<br />
<abbr class="rev" title="1995-10-31T22:27:10Z">Updated: 10/31 10:27p</abbr><br />
<br />
==== Example 2 ====<br />
<br />
<pre><nowiki><br />
REV:1997-11-15<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<abbr class="rev" title="1997-11-15">Updated: November 15</abbr><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as:<br />
<br />
<abbr class="rev" title="1997-11-15">Updated: November 15</abbr><br />
<br />
=== 3.6.5 SORT-STRING Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
FN:Rene van der Harten<br />
N:van der Harten;Rene;J.;Sir;R.D.O.N.<br />
SORT-STRING:Harten<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="n"<br />
<span class="honorific-prefix">Sir</span><br />
<span class="fn"><br />
<span class="given-name">Rene</span><br />
<span class="family-name"><br />
van der <span class="sort-string">Harten</span><br />
</span><br />
</span><br />
(<span class="additional-name">J.</span>),<br />
<span class="honorific-suffix">R.D.O.N.</span><br />
</span><br />
</nowiki></pre><br />
<br />
Note: The string "Harten" was NOT repeated in the hCard, even though it WAS repeated in the vCard (3 times! In N, FN, and SORT-STRING). The "SORT-STRING" property provides another good demonstration of how hCard enables better adherence to the [http://microformats.org/wiki/hcard-example1-steps#hCard_example_iteration_1:_DRY DRY principle] than vCard.<br />
<br />
this hCard fragment could be displayed as:<br />
<br />
Sir Rene van der Harten (J.), R.D.O.N.<br />
<br />
==== Example 2 ====<br />
<br />
<pre><nowiki><br />
FN:Robert Pau Shou Chang<br />
N:Pau;Shou Chang;Robert<br />
SORT-STRING:Pau<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="fn n"><br />
<span class="additional-name">Robert</span><br />
<span class="family-name sort-string">Pau</span><br />
<span class="given-name">Shou Chang</span><br />
</span><br />
</nowiki></pre><br />
<br />
Note: Not only was the string "Pau" was NOT repeated in the hCard (better [http://microformats.org/wiki/hcard-example1-steps#hCard_example_iteration_1:_DRY DRY principle] adherence again), even though it WAS repeated in the vCard, but in this case since the "family-name" and "sort-string" are the same, we were able to use [http://microformats.org/wiki/hcard-example1-steps#hCard_example_iteration_2:_element_conservation element conservation] and use only one element for both properties.<br />
<br />
this hCard fragment could be displayed as:<br />
<br />
Robert Pau Shou Chang<br />
<br />
==== Example 3 ====<br />
<br />
<pre><nowiki><br />
FN:Osamu Koura<br />
N:Koura;Osamu<br />
SORT-STRING:Koura<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="fn"><br />
Osamu <span class="sort-string">Koura</span><br />
</span><br />
</nowiki></pre><br />
<br />
Note: This example, in addition to illustrating better support for the [http://microformats.org/wiki/hcard-example1-steps#hCard_example_iteration_1:_DRY DRY principle], also makes use of the [http://microformats.org/wiki/hcard#Implied_.22N.22_Optimization Implied "N" Optimization].<br />
<br />
this hCard fragment could be displayed as:<br />
<br />
Osamu Koura<br />
<br />
==== Example 4 ====<br />
<br />
<pre><nowiki><br />
FN:Oscar del Pozo<br />
N:del Pozo Triscon;Oscar<br />
SORT-STRING:Pozo<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="n"><br />
<span class="fn"><br />
<span class="given-name">Oscar</span><br />
del <span class="sort-string">Pozo</span><br />
</span><br />
<span class="family-name" style="display:none"><br />
del Pozo Triscon<br />
</span><br />
</span><br />
</nowiki></pre><br />
<br />
Note: This example unfortunately could not completely adhere to the DRY principle due to the "FN" using a *substring* of the family-name, and in addition thus had to hide the extra "family-name" string value using CSS display:none, which in general should be avoided. Suggestion welcome for improvements on this hCard fragement.<br />
<br />
this hCard fragment could be displayed as:<br />
<br />
Oscar del Pozo<br />
<br />
==== Example 5 ====<br />
<br />
<pre><nowiki><br />
FN:Christine d'Aboville<br />
N:d'Aboville;Christine<br />
SORT-STRING:Aboville<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment:<br />
<br />
<pre><nowiki><br />
<span class="fn"><br />
Christine d'<span class="sort-string">Aboville</span><br />
</span><br />
</nowiki></pre><br />
<br />
Note: This example re-demonstrates the same hCard advantages/efficiencies demonstrated in [http://microformats.org/wiki/hcard-examples#Example_3_3 example 3] above.<br />
<br />
this hCard fragment could be displayed as:<br />
<br />
Christine d'Aboville<br />
<br />
=== 3.6.6 SOUND Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
SOUND;TYPE=BASIC;VALUE=uri:CID:JOHNQPUBLIC.part8.<br />
19960229T080000.xyzMail@host1.com<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
<object class="sound" type="audio/basic"<br />
data="CID:JOHNQPUBLIC.part8.19960229T080000.xyzMail@host1.com"><br />
pronounciation of "JOHN Q PUBLIC"<br />
</object><br />
</nowiki></pre><br />
<br />
this hCard fragment would probably be displayed as <br />
<br />
pronounciation of "JOHN Q PUBLIC"<br />
<br />
unless your browser supports the MIME type "audio/basic" (defined in [http://www.rfc-editor.org/rfc/rfc2046.txt RFC2046 section 4.3]) and has some way of retrieving "CID:" urls.<br />
<br />
==== Example 2 ====<br />
<pre><nowiki><br />
SOUND;TYPE=BASIC;ENCODING=b:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN<br />
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm<br />
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0<br />
<...the remainder of "B" encoded binary data...><br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
<object class="sound" <br />
data="data:audio/basic;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN<br />
AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm<br />
ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0<br />
...the remainder of "B" encoded binary data..."><br />
pronounciation<br />
</object><br />
</nowiki></pre><br />
<br />
no display equivalent given, since data: URL from original example is incomplete.<br />
<br />
=== 3.6.7 UID Type Definition ===<br />
<br />
<pre><nowiki><br />
UID:19950401-080045-40000F192713-0052<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
Unique id: <br />
<span class="uid">19950401-080045-40000F192713-0052</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as <br />
<br />
Unique id:19950401-080045-40000F192713-0052<br />
<br />
Note: in practice I don't think I've seen globally unique IDs for "contact info" records published on the web, but perhaps I am not considering enough examples.<br />
<br />
<br />
=== 3.6.8 URL Type Definition ===<br />
<br />
<pre><nowiki><br />
URL:http://www.swbyps.restaurant.french/~chezchic.html<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
<a class="url" href="http://www.swbyps.restaurant.french/~chezchic.html">Chez Chic</a><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as <br />
<br />
[http://www.swbyps.restaurant.french/~chezchic.html Chez Chic]<br />
<br />
<br />
=== 3.7.1 CLASS Type Definition ===<br />
<br />
==== Example 1 ====<br />
<br />
<pre><nowiki><br />
CLASS:PUBLIC<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
<span class="class">PUBLIC</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as <br />
<br />
PUBLIC<br />
<br />
==== Example 2 ====<br />
<br />
<pre><nowiki><br />
CLASS:PRIVATE<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
<span class="class">PRIVATE</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as <br />
<br />
PRIVATE<br />
<br />
==== Example 3 ====<br />
<br />
<pre><nowiki><br />
CLASS:CONFIDENTIAL<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
<span class="class">CONFIDENTIAL</span><br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as <br />
<br />
CONFIDENTIAL<br />
<br />
=== 3.7.2 KEY Type Definition ===<br />
<br />
<pre><nowiki><br />
KEY;ENCODING=b:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcNAQEEBQA<br />
wdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENbW11bmljYX<br />
Rpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0<br />
ZW1zMRwwGgYDVQQDExNyb290Y2EubmV0c2NhcGUuY29tMB4XDTk3MDYwNj<br />
E5NDc1OVoXDTk3MTIwMzE5NDc1OVowgYkxCzAJBgNVBAYTAlVTMSYwJAYD<br />
VQQKEx1OZXRzY2FwZSBDb21tdW5pY2F0aW9ucyBDb3JwLjEYMBYGA1UEAx<br />
MPVGltb3RoeSBBIEhvd2VzMSEwHwYJKoZIhvcNAQkBFhJob3dlc0BuZXRz<br />
Y2FwZS5jb20xFTATBgoJkiaJk/IsZAEBEwVob3dlczBcMA0GCSqGSIb3DQ<br />
EBAQUAA0sAMEgCQQC0JZf6wkg8pLMXHHCUvMfL5H6zjSk4vTTXZpYyrdN2<br />
dXcoX49LKiOmgeJSzoiFKHtLOIboyludF90CgqcxtwKnAgMBAAGjNjA0MB<br />
EGCWCGSAGG+EIBAQQEAwIAoDAfBgNVHSMEGDAWgBT84FToB/GV3jr3mcau<br />
+hUMbsQukjANBgkqhkiG9w0BAQQFAAOBgQBexv7o7mi3PLXadkmNP9LcIP<br />
mx93HGp0Kgyx1jIVMyNgsemeAwBM+MSlhMfcpbTrONwNjZYW8vJDSoi//y<br />
rZlVt9bJbs7MNYZVsyF1unsqaln4/vy6Uawfg8VUMk1U7jt8LYpo4YULU7<br />
UZHPYVUaSgVttImOHZIKi4hlPXBOhcUQ==<br />
</nowiki></pre><br />
<br />
this vCard fragment as an hCard fragment<br />
<br />
<pre><nowiki><br />
<object class="key" type="application/octet-stream"<br />
data="data:application/octet-stream;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcNAQEEBQA<br />
wdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENbW11bmljYX<br />
Rpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0<br />
ZW1zMRwwGgYDVQQDExNyb290Y2EubmV0c2NhcGUuY29tMB4XDTk3MDYwNj<br />
E5NDc1OVoXDTk3MTIwMzE5NDc1OVowgYkxCzAJBgNVBAYTAlVTMSYwJAYD<br />
VQQKEx1OZXRzY2FwZSBDb21tdW5pY2F0aW9ucyBDb3JwLjEYMBYGA1UEAx<br />
MPVGltb3RoeSBBIEhvd2VzMSEwHwYJKoZIhvcNAQkBFhJob3dlc0BuZXRz<br />
Y2FwZS5jb20xFTATBgoJkiaJk/IsZAEBEwVob3dlczBcMA0GCSqGSIb3DQ<br />
EBAQUAA0sAMEgCQQC0JZf6wkg8pLMXHHCUvMfL5H6zjSk4vTTXZpYyrdN2<br />
dXcoX49LKiOmgeJSzoiFKHtLOIboyludF90CgqcxtwKnAgMBAAGjNjA0MB<br />
EGCWCGSAGG+EIBAQQEAwIAoDAfBgNVHSMEGDAWgBT84FToB/GV3jr3mcau<br />
+hUMbsQukjANBgkqhkiG9w0BAQQFAAOBgQBexv7o7mi3PLXadkmNP9LcIP<br />
mx93HGp0Kgyx1jIVMyNgsemeAwBM+MSlhMfcpbTrONwNjZYW8vJDSoi//y<br />
rZlVt9bJbs7MNYZVsyF1unsqaln4/vy6Uawfg8VUMk1U7jt8LYpo4YULU7<br />
UZHPYVUaSgVttImOHZIKi4hlPXBOhcUQ=="><br />
Key<br />
</object><br />
<br />
</nowiki></pre><br />
<br />
this hCard fragment could be displayed as<br />
<br />
Key<br />
<br />
Note: Because of the lack of a TYPE value in the RFC2426 example, I substituted application/octet-stream. Clearly for it to be of some use, the type specified must be some sort of key or certificate mime type.<br />
<br />
=== 7. Authors' Addresses ===<br />
<br />
<pre><nowiki><br />
BEGIN:vCard<br />
VERSION:3.0<br />
FN:Frank Dawson<br />
ORG:Lotus Development Corporation<br />
ADR;TYPE=WORK,POSTAL,PARCEL:;;6544 Battleford Drive<br />
;Raleigh;NC;27613-3502;U.S.A.<br />
TEL;TYPE=VOICE,MSG,WORK:+1-919-676-9515<br />
TEL;TYPE=FAX,WORK:+1-919-676-9564<br />
EMAIL;TYPE=INTERNET,PREF:Frank_Dawson@Lotus.com<br />
EMAIL;TYPE=INTERNET:fdawson@earthlink.net<br />
URL:http://home.earthlink.net/~fdawson<br />
END:vCard<br />
<br />
<br />
BEGIN:vCard<br />
VERSION:3.0<br />
FN:Tim Howes<br />
ORG:Netscape Communications Corp.<br />
ADR;TYPE=WORK:;;501 E. Middlefield Rd.;Mountain View;<br />
CA; 94043;U.S.A.<br />
TEL;TYPE=VOICE,MSG,WORK:+1-415-937-3419<br />
TEL;TYPE=FAX,WORK:+1-415-528-4164<br />
EMAIL;TYPE=INTERNET:howes@netscape.com<br />
END:vCard<br />
</nowiki></pre><br />
<br />
Note that both of these vCards are invalid since they lack the REQUIRED "N" property which is quite ironic, since these are the vCards of the authors themselves.<br />
<br />
Nonetheless, these vCards can be represented by the following hCards:<br />
<br />
<pre><nowiki><br />
<div class="vcard"><br />
<a class="url fn" href="http://home.earthlink.net/~fdawson">Frank Dawson</a><br />
<div class="org">Lotus Development Corporation</div><br />
<div class="adr"><br />
<span class="type">work</span> address <br />
(<abbr class="type" title="postal">mail</abbr> and<br />
<abbr class="type" title="parcel">packages</abbr>):<br />
<div class="street-address">6544 Battleford Drive</div><br />
<span class="locality">Raleigh</span><br />
<span class="region">NC</span><br />
<span class="postal-code">27613-3502</span><br />
<div class="country-name">U.S.A.</div><br />
</div><br />
<div class="tel"><br />
<span class="value">+1-919-676-9515</span> <br />
(<abbr class="type" title="WORK">w</abbr>,<br />
<abbr class="type" title="VOICE">v</abbr><abbr class="type" title="MSG">m</abbr>)<br />
</div><br />
<div class="tel"><br />
<span class="value">+1-919-676-9564</span><br />
(<abbr class="type" title="WORK">w</abbr><abbr class="type" title="FAX">f</abbr>)<br />
</div><br />
<a class="email" href="mailto:Frank_Dawson@Lotus.com"><br />
<span class="type">pref<span>erred</span> email</span><br />
</a>,<br />
<a class="email" href="mailto:fdawson@earthlink.net"><br />
alternate email<br />
</a><br />
</div><br />
<div class="vcard"><br />
<a class="email fn" href="mailto:howes@netscape.com">Tim Howes</a><br />
<div class="org">Netscape Communications Corp.</div><br />
<div class="adr"><br />
<span class="type">work</span> address:<br />
<div class="street-address">501 E. Middlefield Rd.</div><br />
<span class="locality">Mountain View</span>, <br />
<span class="region">CA</span><br />
<span class="postal-code">94043</span><br />
<div class="country-name">U.S.A.</div><br />
</div><br />
<div class="tel"><br />
<span class="value">+1-415-937-3419</span> <br />
(<abbr class="type" title="WORK">w</abbr>,<br />
<abbr class="type" title="VOICE">v</abbr><abbr class="type" title="MSG">m</abbr>)<br />
</div><br />
<div class="tel"><br />
<span class="value">+1-415-528-4164</span><br />
(<abbr class="type" title="WORK">w</abbr><abbr class="type" title="FAX">f</abbr>)<br />
</div><br />
</div><br />
</nowiki></pre><br />
<br />
this hCards could be displayed as<br />
<br />
<div class="vcard"><br />
[http://home.earthlink.net/~fdawson Frank Dawson]<br />
<div class="org">Lotus Development Corporation</div><br />
<div class="adr"><br />
<span class="type">work</span> address <br />
(<abbr class="type" title="postal">mail</abbr> and<br />
<abbr class="type" title="parcel">packages</abbr>):<br />
<div class="street-address">6544 Battleford Drive</div><br />
<span class="locality">Raleigh</span><br />
<span class="region">NC</span><br />
<span class="postal-code">27613-3502</span><br />
<div class="country-name">U.S.A.</div><br />
</div><br />
<div class="tel"><br />
<span class="value">+1-919-676-9515</span> <br />
(<abbr class="type" title="WORK">w</abbr>,<br />
<abbr class="type" title="VOICE">v</abbr><abbr class="type" title="MSG">m</abbr>)<br />
</div><br />
<div class="tel"><br />
<span class="value">+1-919-676-9564</span><br />
(<abbr class="type" title="WORK">w</abbr><abbr class="type" title="FAX">f</abbr>)<br />
</div><br />
[mailto:Frank_Dawson@Lotus.com preferred email],<br />
[mailto:fdawson@earthlink.net alternate email]<br />
</div><br />
<br />
<div class="vcard"><br />
[mailto:howes@netscape.com Tim Howes]<br />
<div class="org">Netscape Communications Corp.</div><br />
<div class="adr"><br />
<span class="type">work</span> address:<br />
<div class="street-address">501 E. Middlefield Rd.</div><br />
<span class="locality">Mountain View</span>, <br />
<span class="region">CA</span><br />
<span class="postal-code">94043</span><br />
<div class="country-name">U.S.A.</div><br />
</div><br />
<div class="tel"><br />
<span class="value">+1-415-937-3419</span> <br />
(<abbr class="type" title="WORK">w</abbr>,<br />
<abbr class="type" title="VOICE">v</abbr><abbr class="type" title="MSG">m</abbr>)<br />
</div><br />
<div class="tel"><br />
<span class="value">+1-415-528-4164</span><br />
(<abbr class="type" title="WORK">w</abbr><abbr class="type" title="FAX">f</abbr>)<br />
</div><br />
</div><br />
<br />
== Test Cases ==<br />
<br />
These are [[hcard|hCard]] examples which have been found to be particularly useful in finding bugs in hCard parsers (e.g. X2V).<br />
<br />
=== Problem with BDAY Information ===<br />
<br />
this example:<br />
<br />
<pre><br />
<!-- birthday --><br />
<div class="bday"><br />
<dt>Birthday</dt><br />
<dd><br />
<abbr class="value" title="1985-10-27T00:00:00Z">October 27, 1985</abbr><br />
</dd><br />
</div><br />
</pre><br />
<br />
ought to produce "BDAY:1985-10-27T00:00:00Z" but it produces "BDAY:Birthday October 27\, 1985". interesting is that the apple addressbook is still willing to accept it in this way.<br />
<br />
=== case-INSENSITIVITY of type values ===<br />
<br />
* "home" vs. "Home"<br />
<br />
this example works with X2V:<br />
<br />
<pre><br />
<div class="tel"><br />
<dt>Phone (<span class="type">home</span>)</dt><br />
<dd><span class="value">+438123418</span></dd><br />
</div><br />
</pre><br />
<br />
this does not, but should. but instead it becomes just TEL without a type in the vcard<br />
<br />
<pre><br />
<div class="tel"><br />
<dt>Phone (<span class="type">Home</span>)</dt><br />
<dd><span class="value">+438123418</span></dd><br />
</div><br />
</pre><br />
<br />
=== GEO parsing ===<br />
The following hCard:<br />
<br />
<pre><nowiki><br />
<div class="vcard"><br />
<span class="n"><br />
<a class="url" href="http://t37.net"><br />
<span class="given-name">Fréderic</span> <br />
<span class="family-name">de Villamil</span> <br />
</a><br />
</span><br />
<span class="nickname">neuro</span><br />
<a class="email" href="mailto:neuroNOSPAM@t37.net"><br />
<span class="type">pref<span>erred</span> email</span><br />
</a><br />
<span class="org">Omatis</span><br />
<span class="adr"><br />
<abbr class="type" title="dom">France</abbr><br />
<span class="type">home</span> address<br />
<abbr class="type" title="postal">mail</abbr> and<br />
<abbr class="type" title="parcel">shipments</abbr>:<br />
<span class="street-address">12 rue Danton</span><br />
<span class="locality">Le Kremlin-Bicetre</span><br />
<span class="postal-code">94270</span><br />
<span class="country-name">France</span><br />
</span><br />
<span class="geo"><br />
<abbr class="latitude" title="48.816667">N 48° 81.6667</abbr><br />
<abbr class="longitude" title="2.366667">E 2° 36.6667</abbr><br />
</span><br />
</div><br />
</nowiki><br />
</pre><br />
<br />
Should be translated into the following vCard:<br />
<br />
<pre><nowiki><br />
BEGIN:VCARD<br />
VERSION:3.0<br />
URL:http://t37.net<br />
ORG:Omatis;;<br />
NICKNAME:neuro<br />
N:de Villamil;Frederic;;Mr.;<br />
EMAIL;TYPE=INTERNET,PREF:neuroNOSPAM@t37.net<br />
ADR;TYPE=HOME:;;12 rue danton;le Kremlin-Bicetre;;94270;France<br />
GEO:48.816667;2.366667<br />
END:VCARD<br />
</nowiki></pre><br />
<br />
X2V currently (2005-12-18) fails to parse/export the GEO property at all.<br />
<br />
== Other ==<br />
<br />
* See [[hcard-brainstorming]] for more examples (which may eventually be moved here) and analysis.</div>Rubenhttp://microformats.org/wiki/index.php?title=buttons&diff=6429buttons2006-05-14T20:02:17Z<p>Ruben: </p>
<hr />
<div>= Microformats Buttons =<br />
<br />
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]<br />
<br />
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]<br />
<br />
== Buttons ==<br />
<br />
=== [[hcalendar|hCalendar]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_hcal.png<br />
* CSS-powered button from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]: <br />
<br />
<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><br />
<br />
<br />
Code (white space added for readability):<br />
<br />
<pre><nowiki><br />
<span class="badge" <br />
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;<br />
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;<br />
text-align: center;"><br />
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; <br />
margin-right: 0.1em;"><br />
&amp;#8250;&amp;#8250;&amp;#8250;<br />
</span> <br />
hCalendar<br />
</span><br />
</nowiki></pre><br />
<br />
=== [[hcard|hCard]] ===<br />
* http://www.crowley.nl/images/hcard.png (mirrors: http://www.davidjanes.com/images/mf_hcard.png , http://mirror.oogynetworks.com/microformats/buttons/mf_hcard.png )<br />
* http://rbach.priv.at/Misc/Volatile/hCard.gif<br />
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]<br />
<br />
=== [[rel-license]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_rel-license.png<br />
<br />
=== [[rel-nofollow]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_rel-nofollow.png<br />
<br />
=== [[rel-tag]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_rel-tag.png<br />
<br />
=== [[vote-links|VoteLinks]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_votelinks.png<br />
<br />
=== [http://gmpg.org/xfn/ XFN] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_xfn.png<br />
<br />
=== [http://gmpg.org/xmdp/ XMDP] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_xmdp.png<br />
<br />
=== [[xoxo|XOXO]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_xoxo.png<br />
<br />
== Buttons for draft formats ==<br />
<br />
These may be subject to change if the names of the formats change when they are released.<br />
<br />
=== [[adr]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_adr.png<br />
<br />
=== [[geo]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_geo.png<br />
<br />
=== [[hatom|hAtom]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_hatom.png<br />
<br />
=== [[hresume|hResume]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_hresume.png<br />
<br />
=== [[hreview|hReview]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_hreview.png<br />
<br />
=== [[rel-directory]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_rel-directory.png<br />
<br />
=== [[rel-enclosure]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_rel-enclosure.png<br />
<br />
=== [[rel-home]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_rel-home.png<br />
<br />
=== [[relpayment-research|rel-payment]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_rel-payment.png<br />
<br />
=== [[robots-exclusion|Robots Exclusion]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_robots-exclusion.png<br />
<br />
=== [[xfolk|xFolk]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_xfolk.png<br />
<br />
== Make your own buttons ==<br />
<br />
Use the [http://kalsey.com/tools/buttonmaker/ Kalsey Button Maker] with the following settings:<br />
* Outer border: #666666<br />
* Inner border: #ffffff<br />
* Bar position: 25 pixels from the left<br />
* Left box text: &gt;&gt;&gt;<br />
* Left box background: #000000<br />
* Left box text colour: #ffffff<br />
* Left box text start: 7 pixels from the left<br />
* Right box text: (The name of the microformat goes here)<br />
* Right box background: #31757b<br />
* Right box text colour: #ffffff<br />
* Right box text start: 3 pixels from the bar<br />
<br />
= Microformats Logos =<br />
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.] <br />
<br />
http://microformats.org/img/logo.gif<br />
<br />
<div style="position: relative; top:-46px; left:180px"><br />
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div><br />
<br />
<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><br />
<br />
<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><br />
<br />
<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px"><br />
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span><br />
</div><br />
</div><br />
<br />
= Requests =<br />
<br />
* Logos for all microformats</div>Rubenhttp://microformats.org/wiki/index.php?title=buttons&diff=6366buttons2006-05-14T20:00:34Z<p>Ruben: added instructions for making own buttons</p>
<hr />
<div>= Microformats Buttons =<br />
<br />
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]<br />
<br />
Added hosted buttons for all the microformats, including the draft ones. (14 May 2006) - [http://www.wackomenace.co.uk/ Ruben]<br />
<br />
== Buttons ==<br />
<br />
=== [[hcalendar|hCalendar]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_hcal.png<br />
* CSS-powered button from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]: <br />
<br />
<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><br />
<br />
<br />
Code (white space added for readability):<br />
<br />
<pre><nowiki><br />
<span class="badge" <br />
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;<br />
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;<br />
text-align: center;"><br />
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; <br />
margin-right: 0.1em;"><br />
&amp;#8250;&amp;#8250;&amp;#8250;<br />
</span> <br />
hCalendar<br />
</span><br />
</nowiki></pre><br />
<br />
=== [[hcard|hCard]] ===<br />
* http://www.crowley.nl/images/hcard.png (mirrors: http://www.davidjanes.com/images/mf_hcard.png , http://mirror.oogynetworks.com/microformats/buttons/mf_hcard.png )<br />
* http://rbach.priv.at/Misc/Volatile/hCard.gif<br />
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]<br />
<br />
=== [[rel-license]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_rel-license.png<br />
<br />
=== [[rel-nofollow]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_rel-nofollow.png<br />
<br />
=== [[rel-tag]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_rel-tag.png<br />
<br />
=== [[vote-links|VoteLinks]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_votelinks.png<br />
<br />
=== [http://gmpg.org/xfn/ XFN] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_xfn.png<br />
<br />
=== [http://gmpg.org/xmdp/ XMDP] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_xmdp.png<br />
<br />
=== [[xoxo|XOXO]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_xoxo.png<br />
<br />
== Buttons for draft formats ==<br />
<br />
These may be subject to change if the names of the formats change when they are released.<br />
<br />
=== [[adr]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_adr.png<br />
<br />
=== [[geo]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_geo.png<br />
<br />
=== [[hatom|hAtom]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_hatom.png<br />
<br />
=== [[hresume|hResume]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_hresume.png<br />
<br />
=== [[hreview|hReview]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_hreview.png<br />
<br />
=== [[rel-directory]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_rel-directory.png<br />
<br />
=== [[rel-enclosure]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_rel-enclosure.png<br />
<br />
=== [[rel-home]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_rel-home.png<br />
<br />
=== [[relpayment-research|rel-payment]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_rel-payment.png<br />
<br />
=== [[robots-exclusion|Robots Exclusion]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_robots-exclusion.png<br />
<br />
=== [[xfolk|xFolk]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_xfolk.png<br />
<br />
== Make your own buttons ==<br />
<br />
Use the [http://kalsey.com/tools/buttonmaker/ Kalsey Button Maker] with the following settings:<br />
* Outer border: #666666<br />
* Inner border: #ffffff<br />
* Bar position: 25 pixels from the left<br />
* Left box text: &gt;&gt;&gt;<br />
* Left box background: #000000<br />
* Left box text colour: #ffffff<br />
* Left box text start: 7 pixels from the left<br />
* Right box text: (The name of the microformat goes here)<br />
* Right box background: #31757b<br />
* Right box text colour: #ffffff<br />
* Right box text start: 3 pixels from the bar<br />
<br />
= Microformats Logos =<br />
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.] <br />
<br />
http://microformats.org/img/logo.gif<br />
<br />
<div style="position: relative; top:-46px; left:180px"><br />
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div><br />
<br />
<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><br />
<br />
<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><br />
<br />
<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px"><br />
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span><br />
</div><br />
</div><br />
<br />
== Requests ==<br />
<br />
* Logos for all microformats</div>Rubenhttp://microformats.org/wiki/index.php?title=buttons&diff=6365buttons2006-05-14T19:53:35Z<p>Ruben: </p>
<hr />
<div>= Microformats Buttons =<br />
<br />
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]<br />
<br />
I've added hosted badges for all the microformats and even the draft ones. (14 May 2006) - [http://www.wackomenace.co.uk/ Ruben]<br />
<br />
== Badges ==<br />
<br />
=== [[hcalendar|hCalendar]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_hcal.png<br />
* CSS-powered badge from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]: <br />
<br />
<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><br />
<br />
<br />
Code (white space added for readability):<br />
<br />
<pre><nowiki><br />
<span class="badge" <br />
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;<br />
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;<br />
text-align: center;"><br />
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; <br />
margin-right: 0.1em;"><br />
&amp;#8250;&amp;#8250;&amp;#8250;<br />
</span> <br />
hCalendar<br />
</span><br />
</nowiki></pre><br />
<br />
=== [[hcard|hCard]] ===<br />
* http://www.crowley.nl/images/hcard.png (mirrors: http://www.davidjanes.com/images/mf_hcard.png , http://mirror.oogynetworks.com/microformats/buttons/mf_hcard.png )<br />
* http://rbach.priv.at/Misc/Volatile/hCard.gif<br />
* CSS-powered badge, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]<br />
<br />
=== [[rel-license]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_rel-license.png<br />
<br />
=== [[rel-nofollow]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_rel-nofollow.png<br />
<br />
=== [[rel-tag]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_rel-tag.png<br />
<br />
=== [[vote-links|VoteLinks]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_votelinks.png<br />
<br />
=== [http://gmpg.org/xfn/ XFN] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_xfn.png<br />
<br />
=== [http://gmpg.org/xmdp/ XMDP] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_xmdp.png<br />
<br />
=== [[xoxo|XOXO]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_xoxo.png<br />
<br />
== Badges for draft formats ==<br />
<br />
These may be subject to change if the names of the formats change when they are released.<br />
<br />
=== [[adr]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_adr.png<br />
<br />
=== [[geo]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_geo.png<br />
<br />
=== [[hatom|hAtom]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_hatom.png<br />
<br />
=== [[hresume|hResume]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_hresume.png<br />
<br />
=== [[hreview|hReview]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_hreview.png<br />
<br />
=== [[rel-directory]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_rel-directory.png<br />
<br />
=== [[rel-enclosure]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_rel-enclosure.png<br />
<br />
=== [[rel-home]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_rel-home.png<br />
<br />
=== [[relpayment-research|rel-payment]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_rel-payment.png<br />
<br />
=== [[robots-exclusion|Robots Exclusion]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_robots-exclusion.png<br />
<br />
=== [[xfolk|xFolk]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_xfolk.png<br />
<br />
== Logos ==<br />
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.] <br />
<br />
http://microformats.org/img/logo.gif<br />
<br />
<div style="position: relative; top:-46px; left:180px"><br />
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div><br />
<br />
<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><br />
<br />
<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><br />
<br />
<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px"><br />
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span><br />
</div><br />
</div><br />
<br />
== Requests ==<br />
<br />
* Logos for all microformats</div>Rubenhttp://microformats.org/wiki/index.php?title=buttons&diff=6364buttons2006-05-14T19:51:46Z<p>Ruben: </p>
<hr />
<div>= Microformats Buttons =<br />
<br />
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]<br />
<br />
I've added hosted badges for all the microformats and even the draft ones. (14 May 2006) - [http://www.wackomenace.co.uk/ Ruben]<br />
<br />
== Badges ==<br />
<br />
=== [[hcalendar|hCalendar]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_hcal.png<br />
* CSS-powered badge [http://www.midgard-project.org/community/events/ from Midgard CMS - Event calendar]: <br />
<br />
<span class="badge" style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1.0em 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><br />
<br />
<br />
Code (white space added for readability):<br />
<br />
<pre><nowiki><br />
<span class="badge" <br />
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;<br />
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;<br />
text-align: center;"><br />
<span style="background: #000; border-right: 1px solid #000; color: #ff; padding: 1px 0.75em; <br />
margin-right: 0.1em;"><br />
&amp;#8250;&amp;#8250;&amp;#8250;<br />
</span> <br />
hCalendar<br />
</span><br />
</nowiki></pre><br />
<br />
=== [[hcard|hCard]] ===<br />
* http://www.crowley.nl/images/hcard.png (mirrors: http://www.davidjanes.com/images/mf_hcard.png , http://mirror.oogynetworks.com/microformats/buttons/mf_hcard.png )<br />
* http://rbach.priv.at/Misc/Volatile/hCard.gif<br />
* CSS-powered badge, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]<br />
<br />
=== [[rel-license]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_rel-license.png<br />
<br />
=== [[rel-nofollow]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_rel-nofollow.png<br />
<br />
=== [[rel-tag]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_rel-tag.png<br />
<br />
=== [[vote-links|VoteLinks]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_votelinks.png<br />
<br />
=== [http://gmpg.org/xfn/ XFN] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_xfn.png<br />
<br />
=== [http://gmpg.org/xmdp/ XMDP] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_xmdp.png<br />
<br />
=== [[xoxo|XOXO]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_xoxo.png<br />
<br />
== Badges for draft formats ==<br />
<br />
These may be subject to change if the names of the formats change when they are released.<br />
<br />
=== [[adr]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_adr.png<br />
<br />
=== [[geo]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_geo.png<br />
<br />
=== [[hatom|hAtom]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_hatom.png<br />
<br />
=== [[hresume|hResume]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_hresume.png<br />
<br />
=== [[hreview|hReview]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_hreview.png<br />
<br />
=== [[rel-directory]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_rel-directory.png<br />
<br />
=== [[rel-enclosure]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_rel-enclosure.png<br />
<br />
=== [[rel-home]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_rel-home.png<br />
<br />
=== [[relpayment-research|rel-payment]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_rel-payment.png<br />
<br />
=== [[robots-exclusion|Robots Exclusion]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_robots-exclusion.png<br />
<br />
=== [[xfolk|xFolk]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_xfolk.png<br />
<br />
== Logos ==<br />
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.] <br />
<br />
http://microformats.org/img/logo.gif<br />
<br />
<div style="position: relative; top:-46px; left:180px"><br />
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div><br />
<br />
<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><br />
<br />
<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><br />
<br />
<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px"><br />
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span><br />
</div><br />
</div><br />
<br />
== Requests ==<br />
<br />
* Logos for all microformats</div>Rubenhttp://microformats.org/wiki/index.php?title=Main_Page&diff=29196Main Page2006-05-14T19:46:28Z<p>Ruben: </p>
<hr />
<div>__NOTOC__<br />
__NOTOC__<br />
= Microformats Wiki =<br />
<br />
'''Please read [[how-to-play]] before making any edits.'''<br />
<br />
'''Please read [[process]] before proposing any new microformats.'''<br />
<br />
== Introduction ==<br />
<br />
[[what-are-microformats|What are microformats]]? And [[what-can-you-do-with-microformats|what can you do with them]]? See the [http://microformats.org/about/ about page] for an overview, and the [[introduction]] page for more info. Recent [[press]], [[presentations]], [[podcasts]], and [[screencasts]] are also a good place for some background reading/listening. Frequently asked questions are answered in the [[faq]]. Want something or want to contribute? Help with things [[to-do]]. Want to learn more in person? Check out microformats [[events]].<br />
<br />
One popular definition from our [http://microformats.org/discuss/ mailing list] (see also: [[mailing-lists]]) is "simple conventions for embedding semantics in HTML to enable decentralized development." More precisely, microformats can be defined as:<br />
:simple conventions<br />
:for embedding semantic markup<br />
::for a specific problem domain<br />
:in human-readable (X)HTML/XML documents, Atom/RSS feeds, and "plain" XML<br />
::that normalize existing content usage patterns<br />
::using brief, descriptive class names <br />
::often based on existing interoperable standards<br />
:to enable decentralized development<br />
::of resources, tools, and services<br />
<br />
"Or do you just use your browser to browse? That's so 20th century." -- [http://diveintomark.org Mark Pilgrim]<br />
<br />
== Specifications ==<br />
[[microformats|Microformats]] open standards specifications (see also: [[implementations]])<br />
* [[hcalendar|hCalendar]]<br />
* [[hcard|hCard]]<br />
* [[rel-license]]<br />
* [[rel-nofollow]]<br />
* [[rel-tag]]<br />
* [[vote-links|VoteLinks]]<br />
* [http://gmpg.org/xfn/ XFN] (see also: [[xfn-implementations]])<br />
* [http://gmpg.org/xmdp/ XMDP]<br />
* [[xoxo|XOXO]]<br />
<br />
== Drafts ==<br />
* [[adr|adr]]<br />
* [[geo|geo]]<br />
* [[hatom|hAtom]] {{NewMarker}}<br />
* [[hresume|hResume]] {{NewMarker}}<br />
* [[hreview|hReview]]<br />
* [[rel-directory]]<br />
* [[rel-enclosure]]<br />
* [[rel-home]] {{NewMarker}}<br />
* [[relpayment-research | rel-payment]]<br />
* [[robots-exclusion|Robots Exclusion]]<br />
* [[xfolk|xFolk]]<br />
<br />
== Design Patterns ==<br />
<br />
Design patterns give microformat authors a vocabulary for expressing their ideas consistently with what has already been done. ''If you're tempted to try your hand at writing a microformat '''[[process|read this first]]'''!''<br />
<br />
* [[abbr-design-pattern]]<br />
* [[class-design-pattern]]<br />
* [[datetime-design-pattern]]<br />
* [[existing-classes|class names defined across all microformats]]<br />
* [[include-pattern]] {{NewMarker}}<br />
* [[rel-design-pattern]]<br />
<br />
== Exploratory discussions ==<br />
Research and analysis of real-world [[examples]], existing formats, and brainstorming to motivate the microformat.<br />
*[[attention]]<br />
*[[blog-description-examples]]<br />
*[[blog-info-examples]]<br />
*[[blog-post-examples]], [[blog-post-formats]], [[blog-post-brainstorming]] (yields [[hatom|hAtom]])<br />
*[[book-examples]], [[book-formats]], [[book-brainstorming]]<br />
*[[chat-examples]], [[chat-formats]]<br />
*[[citation|citation microformat overview]], [[citation-examples]], [[citation-formats]], [[citation-brainstorming]]<br />
*[[comment-problem]], [[comment-examples]], (need to extract from [[comments-formats]])<br />
*[[directions-examples]] {{NewMarker}}<br />
*[[directory-inclusion-examples]], [[directory-inclusion-formats]]. (see also [[rel-directory]])<br />
*[[distributed-conversation]], [[distributed-conversation-brainstorming]], [[distributed-conversation-examples]], [[distributed-conversation-formats]]<br />
*[[forms-examples]]<br />
*[[genealogy-formats]]<br />
*[[hash-examples]]<br />
*[[last-modified-examples]], [[last-modified-formats]], [[last-modified-brainstorming]]<br />
*[[hlisting-proposal]], [[hlisting-feedback]] {{NewMarker}}<br />
**[[listing-examples]], [[listing-formats]], [[listing-brainstorming]]<br />
*[[location-formats]]. (see also [[adr]] and [[geo]])<br />
*[[media-info-examples]]<br />
*[[meeting-minutes-examples]], [[meeting-minutes-formats]], [[meeting-minutes-brainstorming]]<br />
*[[mfo-examples]]<br />
*[[music-examples]]<br />
*[[other-formats]]<br />
*[[photo-note-examples]]<br />
*[[recipe-examples]]<br />
*[[requirements-testing]], [[requirements-testing-examples]]<br />
*[[rest-examples]]<br />
*[[resume-brainstorming]], [[resume-formats]]<br />
*[[review-examples]], [[review-formats]] (yielded the [[hreview|hReview]] draft)<br />
*[[search-results-example]]<br />
*[[show-brainstorming]]<br />
*[[showroll-brainstorming]]<br />
*[[table-examples]]<br />
*[[tagspeak-examples]]<br />
*[[transit-table-examples]]<br />
*[[uid]]<br />
*[[widget-examples]], [[widget-brainstorming]]<br />
*[[wiki-formats]]<br />
*[[work-of-art]] {{NewMarker}}<br />
*[[xmdp-brainstorming]] (see also [[xmdp-faq]])<br />
<br />
== Examples ==<br />
* [[examples]]<br />
* [[zen-garden]] {{NewMarker}}<br />
<br />
<br />
== Tools & Test Cases & Additional Research ==<br />
<br />
The first place to look for examples, code, and test cases is in the pages for each individual microformat. There are only a few cross-cutting tools and services that need to process more than one microformat. This section is intended for editors, parsers, validators, test cases, and other information relevant across multiple microformats.<br />
<br />
*[[parsing-microformats]]<br />
*[[selected-test-cases-from-the-web]]<br />
*[[vcard-implementations]], [[vcard-errata]]<br />
*[[icalendar-implementations]]<br />
*[[faqs-for-rdf]]<br />
*[[why-are-content-standards-hard]]<br />
<br />
== shared work areas ==<br />
* [[buttons]] {{NewMarker}}<br />
* [[demo]] - a page with links for quickly demonstrating microformats working in practice.<br />
* [[events]] {{NewMarker}}<br />
* [[to-do]]<br />
* [[marked-for-deletion]]<br />
<br />
== microformats wiki in other languages ==<br />
<br />
You may read and edit microformats articles in <del>many different</del> other languages<br />
<br />
=== microformats wiki languages with over 2 articles ===<br />
<br />
* [[Main_Page-fr|Français (French)]]<br />
* [[Main_Page-jp|日本語 (Japanese)]] {{NewMarker}}<br />
* [[Main_Page-sp|Español (Spanish)]] {{NewMarker}}<br />
<br />
=== Start a microformats wiki in another language ===<br />
<br />
Don't see the language you want? Help translate the microformats wiki into another language!<br />
<br />
We're still figuring this out. <br />
<br />
For now, see the [http://en.wikipedia.org/wiki/Wikipedia:Multilingual_coordination Wikipedia page on Multilingual coordination], and [http://meta.wikimedia.org/wiki/How_to_start_a_new_Wikipedia How to start a new Wikipedia] for some good general tips, advice, and community conventions.<br />
<br />
You may want to start with the list of [[stable-pages]], which are pages that are relatively stable, and have only minimal/editorial changes, which makes them much easier to keep in sync with the English versions, by using the [[Special:Watchlist|my watchlist]] feature (use it to watch the pages you've translated for changes).<br />
<br />
Page naming: for the translated version of a page, use the same name for the page, and simply add the RFC 3066 language identifier code as a dash suffix. E.g. for the French version, [[Main_Page]] becomes [[Main_Page-fr]], and [[how-to-play]] becomes [[how-to-play-fr]].<br />
<br />
==== more languages folks want to see ====<br />
<br />
* Chinese: 微格式 (Microformats) (see [http://msittig.blogspot.com/2005/11/since-i-translated-schedule-of.html source of translation])</div>Rubenhttp://microformats.org/wiki/index.php?title=buttons&diff=6363buttons2006-05-14T19:46:13Z<p>Ruben: added buttons for draft formats</p>
<hr />
<div>= Microformats buttons =<br />
<br />
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]<br />
<br />
== Badges ==<br />
<br />
=== [[hcalendar|hCalendar]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_hcal.png<br />
* CSS-powered badge [http://www.midgard-project.org/community/events/ from Midgard CMS - Event calendar]: <br />
<br />
<span class="badge" style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1.0em 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><br />
<br />
<br />
Code (white space added for readability):<br />
<br />
<pre><nowiki><br />
<span class="badge" <br />
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1.0em 1px 0;<br />
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;<br />
text-align: center;"><br />
<span style="background: #000; border-right: 1px solid #000; color: #FFF; padding: 1px 0.75em; <br />
margin-right: 0.1em;"><br />
&amp;#8250;&amp;#8250;&amp;#8250;<br />
</span> <br />
hCalendar<br />
</span><br />
</nowiki></pre><br />
<br />
=== [[hcard|hCard]] ===<br />
* http://www.crowley.nl/images/hcard.png (mirrors: http://www.davidjanes.com/images/mf_hcard.png , http://mirror.oogynetworks.com/microformats/buttons/mf_hcard.png )<br />
* http://rbach.priv.at/Misc/Volatile/hCard.gif<br />
* CSS-powered badge, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]<br />
<br />
=== [[rel-license]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_rel-license.png<br />
<br />
=== [[rel-nofollow]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_rel-nofollow.png<br />
<br />
=== [[rel-tag]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_rel-tag.png<br />
<br />
=== [[vote-links|VoteLinks]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_votelinks.png<br />
<br />
=== [[http://gmpg.org/xfn/ XFN]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_xfn.png<br />
<br />
=== [[http://gmpg.org/xmdp/ XMDP]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_xmdp.png<br />
<br />
=== [[xoxo|XOXO]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_xoxo.png<br />
<br />
== Badge for draft formats ==<br />
<br />
=== [[adr]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_adr.png<br />
<br />
=== [[geo]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_geo.png<br />
<br />
=== [[hatom|hAtom]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_hatom.png<br />
<br />
=== [[hresume|hResume]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_hresume.png<br />
<br />
=== [[hreview|hReview]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_hreview.png<br />
<br />
=== [[rel-directory]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_rel-directory.png<br />
<br />
=== [[rel-enclosure]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_rel-enclosure.png<br />
<br />
=== [[rel-home]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_rel-home.png<br />
<br />
=== [[relpayment-research|rel-payment]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_rel-payment.png<br />
<br />
=== [[robots-exclusion|Robots Exclusion]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_robots-exclusion.png<br />
<br />
=== [[xfolk|xFolk]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_xfolk.png<br />
<br />
== Logos ==<br />
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.] <br />
<br />
http://microformats.org/img/logo.gif<br />
<br />
<div style="position: relative; top:-46px; left:180px"><br />
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div><br />
<br />
<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><br />
<br />
<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><br />
<br />
<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px"><br />
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span><br />
</div><br />
</div><br />
<br />
== Requests ==<br />
<br />
* Logos for all microformats</div>Rubenhttp://microformats.org/wiki/index.php?title=buttons&diff=6361buttons2006-05-14T19:37:23Z<p>Ruben: </p>
<hr />
<div>= Microformats buttons =<br />
<br />
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]<br />
<br />
== Badges ==<br />
<br />
=== [[hcalendar|hCalendar]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_hcal.png<br />
* CSS-powered badge [http://www.midgard-project.org/community/events/ from Midgard CMS - Event calendar]: <br />
<br />
<span class="badge" style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1.0em 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><br />
<br />
<br />
Code (white space added for readability):<br />
<br />
<pre><nowiki><br />
<span class="badge" <br />
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1.0em 1px 0;<br />
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;<br />
text-align: center;"><br />
<span style="background: #000; border-right: 1px solid #000; color: #FFF; padding: 1px 0.75em; <br />
margin-right: 0.1em;"><br />
&amp;#8250;&amp;#8250;&amp;#8250;<br />
</span> <br />
hCalendar<br />
</span><br />
</nowiki></pre><br />
<br />
=== [[hcard|hCard]] ===<br />
* http://www.crowley.nl/images/hcard.png (mirrors: http://www.davidjanes.com/images/mf_hcard.png , http://mirror.oogynetworks.com/microformats/buttons/mf_hcard.png )<br />
* http://rbach.priv.at/Misc/Volatile/hCard.gif<br />
* CSS-powered badge, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]<br />
<br />
=== [[rel-license]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_rel-license.png<br />
<br />
=== [[rel-nofollow]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_rel-nofollow.png<br />
<br />
=== [[rel-tag]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_rel-tag.png<br />
<br />
=== [[vote-links|VoteLinks]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_votelinks.png<br />
<br />
=== [[http://gmpg.org/xfn/||XFN]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_xfn.png<br />
<br />
=== [[http://gmpg.org/xmdp/||XMDP]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_xmdp.png<br />
<br />
=== [[xoxo|XOXO]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_xoxo.png<br />
<br />
== Logos ==<br />
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.] <br />
<br />
http://microformats.org/img/logo.gif<br />
<br />
<div style="position: relative; top:-46px; left:180px"><br />
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div><br />
<br />
<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><br />
<br />
<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><br />
<br />
<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px"><br />
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span><br />
</div><br />
</div><br />
<br />
== Requests ==<br />
<br />
* Logos and buttons for all microformats</div>Rubenhttp://microformats.org/wiki/index.php?title=buttons&diff=6360buttons2006-05-14T19:36:57Z<p>Ruben: added loads of new buttons</p>
<hr />
<div>= Microformats buttons =<br />
<br />
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]<br />
<br />
== Badges ==<br />
<br />
=== [[hcalendar|hCalendar]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_hcal.png<br />
* CSS-powered badge [http://www.midgard-project.org/community/events/ from Midgard CMS - Event calendar]: <br />
<br />
<span class="badge" style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1.0em 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><br />
<br />
<br />
Code (white space added for readability):<br />
<br />
<pre><nowiki><br />
<span class="badge" <br />
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1.0em 1px 0;<br />
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;<br />
text-align: center;"><br />
<span style="background: #000; border-right: 1px solid #000; color: #FFF; padding: 1px 0.75em; <br />
margin-right: 0.1em;"><br />
&amp;#8250;&amp;#8250;&amp;#8250;<br />
</span> <br />
hCalendar<br />
</span><br />
</nowiki></pre><br />
<br />
=== [[hcard|hCard]] ===<br />
* http://www.crowley.nl/images/hcard.png (mirrors: http://www.davidjanes.com/images/mf_hcard.png , http://mirror.oogynetworks.com/microformats/buttons/mf_hcard.png )<br />
* http://rbach.priv.at/Misc/Volatile/hCard.gif<br />
* CSS-powered badge, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]<br />
<br />
=== [[rel-license]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_rel-license.png<br />
<br />
=== [[rel-nofollow]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_rel-nofollow.png<br />
<br />
=== [[rel-tag]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_rel-tag.png<br />
<br />
=== [[vote-links|VoteLinks]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_votelinks.png<br />
<br />
=== [[http://gmpg.org/xfn/|XFN]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_xfn.png<br />
<br />
=== [[http://gmpg.org/xmdp/|XMDP]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_xmdp.png<br />
<br />
=== [[xoxo|XOXO]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_xoxo.png<br />
<br />
== Logos ==<br />
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.] <br />
<br />
http://microformats.org/img/logo.gif<br />
<br />
<div style="position: relative; top:-46px; left:180px"><br />
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div><br />
<br />
<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><br />
<br />
<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><br />
<br />
<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px"><br />
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span><br />
</div><br />
</div><br />
<br />
== Requests ==<br />
<br />
* Logos and buttons for all microformats</div>Rubenhttp://microformats.org/wiki/index.php?title=buttons&diff=6359buttons2006-05-14T19:30:49Z<p>Ruben: added a button and cleaned up the page</p>
<hr />
<div>= Microformats buttons =<br />
<br />
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]<br />
<br />
== Badges ==<br />
<br />
=== [[hcalendar|hCalendar]] ===<br />
* http://mirror.oogynetworks.com/microformats/buttons/mf_hcal.png<br />
* CSS button [http://www.midgard-project.org/community/events/ from Midgard CMS - Event calendar]: <br />
<br />
<span class="badge" style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1.0em 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><br />
<br />
Code (white space added for readability):<br />
<br />
<pre><nowiki><br />
<span class="badge" <br />
style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1.0em 1px 0;<br />
border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;<br />
text-align: center;"><br />
<span style="background: #000; border-right: 1px solid #000; color: #FFF; padding: 1px 0.75em; <br />
margin-right: 0.1em;"><br />
&amp;#8250;&amp;#8250;&amp;#8250;<br />
</span> <br />
hCalendar<br />
</span><br />
</nowiki></pre><br />
<br />
=== [[hcard|hCard]] ===<br />
* http://www.crowley.nl/images/hcard.png (mirror: http://www.davidjanes.com/images/mf_hcard.png )<br />
* http://rbach.priv.at/Misc/Volatile/hCard.gif<br />
* CSS-powered badge, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]<br />
<br />
== Logos ==<br />
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.] <br />
<br />
http://microformats.org/img/logo.gif<br />
<br />
<div style="position: relative; top:-46px; left:180px"><br />
<div style="background-color:#679A06; width:30px; height: 30px; left:1px; top:10px; position:absolute; -moz-border-radius:5pt;"></div><br />
<br />
<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><br />
<br />
<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><br />
<br />
<div style="font-family:Arial Narrow,Arial,sans-serif;font-size:17.5pt;letter-spacing:0px;color:#676767; position: absolute; left:44px; top: -6px"><br />
<span style="padding-left:9;color:#111111;vertical-align:40%">micro</span><span style="vertical-align:40%;padding-left:1pt">formats</span><br />
</div><br />
</div><br />
<br />
== Requests ==<br />
<br />
* Logos and buttons for all microformats</div>Ruben