Microformats Wiki - User contributions [en]

User:SunBurntKamel

2007-10-18T19:21:09Z

SunBurntKamel:

Adam Freetly

a.k.a. SunBurntKamel

http://archgfx.net/

hatom

2007-06-06T16:48:02Z

SunBurntKamel: /* adding last.fm */

<h1> hAtom 0.1 </h1>

hAtom is a microformat for content that can be syndicated, primarily but not exclusively weblog postings. hAtom is based on a subset of the [http://www.atomenabled.org/ Atom] syndication format. hAtom is one of several [[microformats]] open standards.

__TOC__
== Draft Specification ==

=== Editor/Author ===
* [http://blogmatrix.blogmatrix.com/ David Janes], [http://www.blogmatrix.com BlogMatrix, Inc.]

=== Contributors ===
* [http://members.optusnet.com.au/benjamincarlyle/benjamin/blog/ Benjamin Carlyle]
* [http://tantek.com/ Tantek Çelik], [http://technorati.com Technorati, Inc.]

=== Copyright ===
{{MicroFormatCopyrightStatement2005}}

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

== Introduction ==

hAtom is a [[microformat]] for identifying semantic information in weblog posts and practically any other place [http://www.atomenabled.org/ Atom] may be used, such as news articles. hAtom content is easily added to most blogs by simple modifications to the blog's template definitions.

== Semantic XHTML Design Principles ==
{{semantic-xhtml-design-principles}}

== Format ==
=== In General ===
The [http://atomenabled.org/developers/syndication/#person Atom Syndication Format] provides the conceptual basis for this microformat, with the following caveats:

* Atom provides a lot more functionality than we need for a "blog post" microformat, so we've taken the minimal number of elements needed.
* the "logical" model of hAtom is that of Atom. If there is a conflict, Atom should be taken as correct.
* the "physical" model of hAtom -- the actual writing of elements -- is a lot more varied than Atom provides for, due to the variety of ways weblogs are actually produced in the wild. The hAtom microformat provides a number of rules for "bridging the gap"

=== Schema ===
Schema elements are based on the Atom nomenclature and follow the microformat pattern of prefixing a unique identifier (in this case, '<code>h</code>') on the outermost container elements -- the Feed or Entry. The parts of this microformat are based on analysis of many weblog, bulletin board and media posts and can be read [[blog-post-brainstorming#Discovered_Elements]].

The hAtom schema consists of the following:

* hfeed ('''<code>hfeed</code>'''). optional.
* hentry ('''<code>hentry</code>''').
** '''<code>entry-title</code>'''. required. text.
** '''<code>entry-content</code>'''. optional (see field description). text.
** '''<code>entry-summary</code>'''. optional. text.
** '''<code>updated</code>'''. required using [[datetime-design-pattern]].
** '''<code>published</code>'''. optional using [[datetime-design-pattern]].
** '''<code>author</code>'''. required using '''[[hcard|hCard]]'''.
** '''<code>bookmark</code>''' (permalink). optional, using '''[[rel-bookmark]]'''.
** tags. optional. keywords or phrases, using '''[[rel-tag]]'''.

Some required elements have defaults if missing, see below.

=== Field and Element Details ===

===== Feed =====
* a Feed element is identified by the class name <code>hfeed</code>
* a Feed element represents the concept of an [http://www.atomenabled.org/developers/syndication/atom-format-spec.php#rfc.section.4.1.1 Atom feed]
* the Feed element is optional and, if missing, is assumed to be the page
* hAtom documents MAY have multiple Feed elements

===== Feed Category =====
* a Feed Category element is identified by [[rel-tag]]
* a Feed MAY have a Feed Category
* a Feed Category element represents the concept of an [http://www.atomenabled.org/developers/syndication/atom-format-spec.php#rfc.section.4.2.2 Atom category] inside a [http://www.atomenabled.org/developers/syndication/#optionalFeedElements feed]
* Feed Category elements MUST appear inside a Feed element but not inside an Entry element
* the [[rel-tag]] <code>href</code> encodes the atom <code>category:term</code>; the link text defines the atom <code>category:label</code>

===== Entry =====
* an Entry element is identified by class name <code>hentry</code>
* an Entry element represents the concept of an [http://www.atomenabled.org/developers/syndication/atom-format-spec.php#rfc.section.4.1.2 Atom entry]
* any microformat content inside a <code><blockquote></code> or <code><q></code> element within the Entry should not be considered part of the Entry.
: ''This allows quoting other microformated data without worry of corrupting the model''

===== Entry Category =====
* an Entry Category element is identified by [[rel-tag]]
* an Entry MAY have an Entry Category
* an Entry Category element represents the concept of an [http://www.atomenabled.org/developers/syndication/atom-format-spec.php#rfc.section.4.2.2 Atom category] inside an [http://www.atomenabled.org/developers/syndication/#optionalEntryElements entry]
* the [[rel-tag]] <code>href</code> encodes the atom <code>category:term</code>; the link text defines the atom <code>category:label</code>

===== Entry Title =====
* an Entry Title element is identified by the class name <code>entry-title</code>
* an Entry SHOULD have an Entry Title
* an Entry Title element represents the concept of an [http://www.atomenabled.org/developers/syndication/atom-format-spec.php#rfc.section.4.2.14 Atom entry title]
* if the Entry Title is missing, use
** the first <code><h#></code> element in the Entry, or
** the <code><title></code> of the page, if there is no enclosing Feed element, or
** assume it is the empty string

===== Entry Content =====
* an Entry Content element is identified by class name <code>entry-content</code>
* an Entry SHOULD have Entry Content
* an Entry Content element represents the concept of an [http://www.atomenabled.org/developers/syndication/atom-format-spec.php#atomContent Atom content]
* an Entry MAY have 0 or more Entry Content elements. The "logical Entry Content" of an Entry is the concatenation, in order of appearance, of all the Entry Contents within the Entry
: ''Many weblogs split content into multiple sections with a "Read More" link and javascript tricks. This is also needed in cases where Entry Titles are coded inline and are considered part of the content.''
* if the Entry Content is missing, assume it is the empty string

===== Entry Summary =====
* an Entry Summary element is identified by class name <code>entry-summary</code>
* an Entry Summary element represents the concept of an [http://www.atomenabled.org/developers/syndication/atom-format-spec.php#rfc.section.4.2.13 Atom summary]
* an Entry MAY have 0 or more Entry Summary elements. The "logical Entry Summary" of an Entry is the concatenation, in order of appearance, of all the Entry Summarys within the Entry

===== Entry Permalink =====
* an Entry Permalink element is identified by [[rel-bookmark]]
* an Entry SHOULD have an Entry Permalink
* an Entry Permalink element represents the concept of an [http://www.atomenabled.org/developers/syndication/atom-format-spec.php#rfc.section.4.2.7 Atom link in an entry]
* if the Entry Permalink is missing, use the URI of the page; if the Entry has an "id" attribute, add that as a fragment to the page URI to distinguish individual entries

===== Entry Updated =====
* an Entry Updated element is identified by class name <code>updated</code>
* an Entry Updated element represents the concept of [http://www.atomenabled.org/developers/syndication/atom-format-spec.php#rfc.section.4.2.15 Atom updated]
* an Entry SHOULD have an Entry Updated element
* use the [[datetime-design-pattern]] to encode the updated datetime
* if there is no Entry Updated element,
** use the Entry Published element, if present
** otherwise the page is invalid hAtom

===== Entry Published =====
* an Entry Published element is identified by the class name <code>published</code>
* an Entry Published element represents the concept of [http://www.atomenabled.org/developers/syndication/atom-format-spec.php#rfc.section.4.2.9 Atom published]
* use the [[datetime-design-pattern]] to encode the published datetime

===== Entry Author =====
* an Entry Author element is represented by class name <code>author</code>
* an Entry Author element represents the concept of an [http://www.atomenabled.org/developers/syndication/atom-format-spec.php#rfc.section.4.2.1 Atom author]
* an Entry Author element MUST be encoded in an [[hcard|hCard]]
* an Entry Author element SHOULD be encoded in an <code><address></code> element
* an Entry SHOULD have at least one Entry Author element
* an Entry MAY have more than one Entry Author elements
* if the Entry Author is missing
** find the [[algorithm-nearest-in-parent|Nearest In Parent]] <code><address></code> element(s) with class name <code>author</code> and that is/are a valid [[hcard|hCard]]
** otherwise the entry is invalid hAtom

=== XMDP Profile ===
<pre>
<dl class="profile">
<dt>class</dt>
<dd><p>
<a rel="help" href="http://www.w3.org/TR/html401/struct/global.html#adef-class">
HTML4 definition of the 'class' attribute.</a>
This meta data profile defines some 'class' attribute values (class names)
and their meanings as suggested by a
<a href="http://www.w3.org/TR/WD-htmllink-970328#profile">
draft of "Hypertext Links in HTML"</a>.
<dl>
<dt>hfeed</dt>
<dd>
The concept of atom:feed from
<a href="http://www.atomenabled.org/developers/syndication/atom-format-spec.php">The Atom Syndication Format</a>,
constrained and modified as per the <a href="http://microformats.org/wiki/hatom">hAtom microformat spec</a>.
</dd>
<dt>hentry</dt>
<dd>
The concept of atom:entry from
<a href="http://www.atomenabled.org/developers/syndication/atom-format-spec.php">The Atom Syndication Format</a>,
constrained and modified as per the <a href="http://microformats.org/wiki/hatom">hAtom microformat spec</a>.
</dd>
<dt>entry-title</dt>
<dd>
The concept of atom:title inside of an atom:entry from
<a href="http://www.atomenabled.org/developers/syndication/atom-format-spec.php">The Atom Syndication Format</a>,
constrained and modified as per the <a href="http://microformats.org/wiki/hatom">hAtom microformat spec</a>.
</dd>
<dt>entry-content</dt>
<dd>
The concept of atom:content from
<a href="http://www.atomenabled.org/developers/syndication/atom-format-spec.php">The Atom Syndication Format</a>,
constrained and modified as per the <a href="http://microformats.org/wiki/hatom">hAtom microformat spec</a>.
</dd>
<dt>entry-summary</dt>
<dd>
The concept of atom:summary from
<a href="http://www.atomenabled.org/developers/syndication/atom-format-spec.php">The Atom Syndication Format</a>,
constrained and modified as per the <a href="http://microformats.org/wiki/hatom">hAtom microformat spec</a>.
</dd>
<dt>bookmark</dt>
<dd>
The concept of atom:link (without any "rel") with an atom:entry from
<a href="http://www.atomenabled.org/developers/syndication/atom-format-spec.php">The Atom Syndication Format</a>,
constrained and modified as per the <a href="http://microformats.org/wiki/hatom">hAtom microformat spec</a>.
</dd>
<dt>published</dt>
<dd>
The concept of atom:published from
<a href="http://www.atomenabled.org/developers/syndication/atom-format-spec.php">The Atom Syndication Format</a>,
constrained and modified as per the <a href="http://microformats.org/wiki/hatom">hAtom microformat spec</a>.
</dd>
<dt>updated</dt>
<dd>
The concept of atom:updated from
<a href="http://www.atomenabled.org/developers/syndication/atom-format-spec.php">The Atom Syndication Format</a>,
constrained and modified as per the <a href="http://microformats.org/wiki/hatom">hAtom microformat spec</a>.
</dd>
<dt>author</dt>
<dd>
The concept of atom:author from
<a href="http://www.atomenabled.org/developers/syndication/atom-format-spec.php">The Atom Syndication Format</a>,
constrained and modified as per the <a href="http://microformats.org/wiki/hatom">hAtom microformat spec</a>.
</dd>
</dl>
</dd>
</dl>
</pre>

== Examples ==

See [[hatom-examples]].

== Examples in the wild ==
This section is '''informative'''.

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

=== 0.1 hAtom examples===
* [http://www.sndbx.org/ The Sandbox Designs Competition] uses hAtom for all content, hCard for participant (the competition designers) and sponsor information, hCalendar for the competition schedule, XFN for links, and rel-license for licensing information. It's all GNU GPL.
* [http://guyleech.net guyleech.net] uses hAtom for blog posts, and uses hCard for contact information. There is also an [http://guyleech.net/2007/7 article] on how to minimise hAtom, to save time and code.
* [http://kpumuk.info/ Dmytro Shteflyuk] uses hAtom for all blog posts.
* [http://blog.no-panic.at Florian Beer] uses hAtom to mark up all the blog posts. There is also a [http://blog.no-panic.at/2006/11/16/hatom-and-wordpress/ tutorial] on how to convert Wordpress themes to include hAtom.
* [http://ficlets.com/ Ficlets] uses hAtom on the [http://ficlets.com/stories main stories page] and on [http://ficlets.com/stories/12 individual story pages].
* [http://www.international.unt.edu UNT International] uses hAtom combined with hCard on news/announcement pages (e.g., [http://www.international.unt.edu/quick/news the main news page]) in addition to providing traditional Atom feeds
* [http://www.absalom.net.au Absalom Media] uses hAtom combined with hCard for articles.
* [http://www.joomlamug.com Joomla! Melbourne User Group] uses hAtom combined with hCard for articles.
* [http://www.volume.co.uk Volume] - Main news page is marked up as hAtom 0.1
* [http://yedda.com Yedda] - Yedda support hAtom on exploration of questions where there is also support for Atom and RSS feeds. ([http://yedda.com/questions/recent/ example])
* The [http://www.westmidlandbirdclub.com/ West Midland Bird Club's] frequently-updated [http://www.westmidlandbirdclub.com/new.htm What's New] page, [http://www.westmidlandbirdclub.com/ladywalk/latest.htm news from its Ladywalk Reserve] and [http://www.westmidlandbirdclub.com/worcs/grimley/latest.htm news from Grimley Pits] — comments welcome on my talk page [[User:AndyMabbett|Andy Mabbett]]
* [http://pixelsebi.com pixelsebi's repository] uses hAtom 0.1 for blog posts (and hCard, hCalendar, XFN, xFolk and many more) based on manual WordPress template modifications
* [http://www.geekinthepark.co.uk Geek in the Park] uses hAtom for the comments. -- by [[User:Trovster|trovster]]
* [http://www.csarven.ca Sarven Capadisli] uses hAtom for the articles and comments -- by [[User:Csarven|csarven]]
* [http://www.fberriman.com fberriman.com] uses hAtom 0.1 for blog posts (WordPress loop) and hCard throughout -- by [[User:Phae|Frances Berriman]] (Also - [http://www.fberriman.com/?p=86 Implementing hAtom: The Entries Code])
* [http://www.capital.edu Capital University] uses hAtom 0.1 to mark up the feed of latest posts by student bloggers on its home page.
* [http://blog.davidjanes.com Ranting and Roaring] (David Janes)
* [http://ChunkySoup.net/ ChunkySoup.net] has redesigned using hAtom 0.1 and hCards on the entire site -- by [[User:ChrisCasciano|Chris Casciano]]
* [http://sedna.spip.org/sedna/ Sedna RSS] (a feed aggregator based on SPIP, by Fil, IZO and others; GPLd sources are available at [http://zone.spip.org/trac/spip-zone/browser/_squelettes_/sedna SPIP-Zone])
* [http://members.optusnet.com.au/benjamincarlyle/benjamin/blog/ Sound Advice] (Benjamin Carlyle)
* [http://quotedprintable.com/pages/scribbish Scribbish] is a Typo theme which uses hAtom.
* [http://rbach.priv.at/hAtom2Atom/Changelog/ hAtom2Atom.xsl's Changelog] is published as hAtom and Atom.
* [http://federali.st/ federali.st]'s webbed Federalist Papers are each marked up in hAtom.
* [http://www.plaintxt.org/themes/sandbox/ Sandbox] is a theme for [http://wordpress.org/ WordPress] that uses hAtom.
** The theme is also available to accounts on the [http://wordpress.com/ <username>.wordpress.com] hosting service. The [http://blog.coworking.info Coworking] and [http://barcamp.wordpress.com BarCamp] blogs are examples of custom Sandbox themes.
* [http://www.whump.com/dropbox/Strangelove.zip Strangelove] is a modification of the default WordPress theme (Kubrick) with hAtom support.
** It points to the hAtom2Atom proxy service as the link for syndication feeds.
* All [http://www.plaintxt.org/themes/ plaintxt.org themes] for [http://wordpress.org/ WordPress] now use hAtom. The themes are also coded for hCard compliance. The themes, by name, are:
** [http://www.plaintxt.org/themes/barthelme/ Barthelme] (two-column, fluid), [http://www.plaintxt.org/themes/blogtxt/ blog.txt] (two- or three-column, elastic), [http://www.plaintxt.org/themes/plaintxtblog/ plaintxtBlog] (three-column, fluid), [http://www.plaintxt.org/themes/simplr/ Simplr] (one column, elastic), [http://www.plaintxt.org/themes/veryplaintxt/ veryplaintxt] (two column, fluid)
* [http://archgfx.net/blog/index.php/themes/disconnected/ Disconnected], a theme for WordPress, also incorporated hAtom with version 1.2
* [http://www.pats.ua.ac.be/courses PATS Courses], the PATS Research Group uses hAtom to mark up the latest course documents for some of their courses
* [http://mix.excite.co.uk Excite MIX], the Ajax Start Page from Excite Europe, uses hAtom 0.1 and hCard in the Feed Viewer to mark up feed entries and authors.
* [http://last.fm Last.FM], a social music sharing platform, uses hAtom markup for [http://blog.last.fm/2007/05/30/rss-your-shoutbox-and-you shoutbox], and recommends using [http://tools.microformatic.com microformatic]'s transcode tool

===Examples with some problems===

Entries may be moved here if there's a problem with the way hAtom is used on the page concerned. If the page is yours, and you want to improve it, see the [[hatom-faq|hAtom FAQ]], or raise any queries on [[hatom-issues|hAtom Issues]] or [[mailing-lists#microformats-discuss|the mailing list]], where people will be happy to help you.

==== Pre 0.1 hAtom examples====
These pages conform to an older draft standard and need to be updated.

* [http://www.myelin.co.nz/post/ Second p0st] (Phil Pearson)

== Implementations ==

This section is '''informative'''.

The following implementations have been developed which either generate or parse hAtom links. If you have an hAtom implementation, feel free to add it to the top of this list. Once the list grows too big, we'll make a separate wiki page.

* [http://dichotomize.com/uf/hatom/creator.html hAtom Creator] modified from the other creators by BenWest.
* the [http://tools.blogmatrix.com/extract/ Almost Universal Microformat Parser] can extract hAtom content from webpages ([http://tools.blogmatrix.com/extract/?uri=http%3A%2F%2Fblog.davidjanes.com&microformat=hatom&submit=Submit example])
* the [http://www.trinityanne.com/tools/greasemonkey/microformat-action.user.js microformat-action] [[greasemonkey|Greasemonkey]] script detects hAtom content on webpages and will call the [http://tools.blogmatrix.com/extract/ Almost Universal Microformat Parser]
* [http://rbach.priv.at/hAtom2Atom/ hAtom2Atom.xsl] transforms hAtom to Atom (as the name suggests.)
* There is now an [http://www.lukearno.com/projects/hatom2atom/ hatom2atom proxy] that uses hAtom2Atom.xsl.
* [http://placenamehere.com/article/185/SubscribingTohAtomFeedsWithNetNewsWire Subscribe To hAtom] is a script that provides [http://ranchero.com/netnewswire/ NetNewsWire 2.x] users with the ability to subscribe to hAtom documents as they would any other feed. by [[User:ChrisCasciano|Chris Casciano]].
* [http://boxtheweb.mihopa.net/code/apis/#outlineclasses Outline Classes] - has GPL'ed PHP code for reading hAtom
* [http://boxtheweb.4x2.net/ BoxtheWeb] - supports subscribing to hAtom as a feed format

== References ==
=== Normative References ===
* [http://www.w3.org/TR/2002/REC-xhtml1-20020801/ XHTML 1.0 SE]
* [http://www.ietf.org/rfc/rfc4287 RFC4287: The Atom Syndication Format]
* [[hcard-parsing]]

=== Informative References ===
* [http://www.atomenabled.org/ atomenabled.org]

== Work in progress ==
This specification is a work in progress. As additional aspects are discussed, understood, and written, they will be added. There is a separate document where we are keeping our brainstorms and other explorations relating to hAtom:

* [[blog-post-brainstorming|blog-post Brainstorming]]

=== Version 0.1 ===

Version 0.1 was released 28 February 2006.

== Discussions ==

* See [http://www.technorati.com/cosmos/referer.html blogs discussing this page].

=== Q&A ===
* If you have any questions about hAtom, check the [[hatom-faq|hAtom FAQ]], and if you don't find answers, add your questions!

=== Issues ===
* Please add any issues with the specification to the separate [[hatom-issues|hAtom issues]] document.

==See Also==
{{hatom-related-pages}}
* [[rel-enclosure]] - how to semantically reference enclosures (e.g. podcasts) in hAtom
* [[blog-post-brainstorming]]
* [[blog-post-formats]]
* [[blog-post-examples]]
* [[blog-description-format]] - how to describe a blog (as opposed to the individual entries, which is what we're doing here)

User:SunBurntKamel

2007-04-05T21:22:55Z

SunBurntKamel: /* that's me */

Adam Freetly

a.k.a. SunBurntKamel

http://archgfx.net/

http://sunburntkamel.archgfx.net/

icons

2007-04-05T21:21:19Z

SunBurntKamel: /* proposed tag icon */

<h1> Icons </h1>
These icons can be used to depict various microformats in webpages or on the desktop.

== Creators ==
* [http://factoryjoe.com/blog Chris Messina]
* [http://dmitry.baranovskiy.com Dmitry Baranovskiy]
* [http://bartleme.at Wolfgang Bartelme]

==Accessibility==
Publishers are advised to ensure that these icons are used in an accessible fashion, by including suitable "alt" attributes.

Icon designers are reminded that inability to distinguish between red and green is the commonest form of colour-blindness .

=== Copyright ===
Unless otherwise noted, these icons are licensed under the [http://creativecommons.org/licenses/by-sa/2.5/ Creative Commons Attribution-ShareAlike 2.5 license].

== Icons ==

=== Web ===

A [http://factorycity.net/projects/microformats-icons/ first effort] has been completed by Wolfgang Bartelme and Chris Messina to create a series of web-friendly icons and buttons for microformats.

==== General ====

* http://factorycity.net/projects/microformats%2Dicons/images/icon-hatom.png hAtom
* http://factorycity.net/projects/microformats%2Dicons/images/icon-hcalendar.png hCalendar
* http://factorycity.net/projects/microformats%2Dicons/images/icon-hcard-add.png hCard Add
* http://factorycity.net/projects/microformats%2Dicons/images/icon-hcard-download.png hCard Download
* http://factorycity.net/projects/microformats%2Dicons/images/icon-hresume.png hResume (button)
* http://factorycity.net/projects/microformats%2Dicons/images/icon-rel-tag.png rel-tag (button)
* http://factorycity.net/projects/microformats%2Dicons/images/icon-xfn.png XFN (button)

'''Comments:'''

* Hober pointed out that bright green seems to be a common color for [eventful.com/images/skin/ical.gif ical chicklets]
* Tantek wonders if the rel-tag button is useful
* ChrisMessina suggest a need for a small 10x10 tag icon
** http://archgfx.net/aspnet_client/tag-ltblue.gif square tag
** [[User:SunBurntKamel|Adam]] suggests 10x10 is a little small, but square is nice
* Tantek wonders whether we need an hCard Download icon -- since it focuses too much on the "pipes"
* Ron thinks it's ok to use icons, cause it's a nice way of promoting the "Microformat idea". Maybe it's a good idea to use a downward aimed arrow to indicate the possibility to "download" something (like an hCard or hResume).
* Adam wonders if a multiple-license, including GPL, might be helpful in increasing adoption among wordpress themes.

==== XFN ====

* http://factorycity.net/projects/microformats%2Dicons/images/xfn-me.png rel-me
* http://factorycity.net/projects/microformats%2Dicons/images/xfn-friend.png rel-friend
** http://factorycity.net/projects/microformats%2Dicons/images/xfn-friend-met.png met
* http://factorycity.net/projects/microformats%2Dicons/images/xfn-sweetheart.png rel-sweetheart
** http://factorycity.net/projects/microformats%2Dicons/images/xfn-sweetheart-met.png met
* http://factorycity.net/projects/microformats%2Dicons/images/xfn-colleague.png rel-colleague
** http://factorycity.net/projects/microformats%2Dicons/images/xfn-colleague-met.png met

'''Comments:'''

* Tantek: wonders if a rel-me icon is necessary or appropriate; perhaps something indicating "facets"?
* ChrisMesssina: rel-me is useful in blog posts where you link to other posts that you've written
* [[User:WizardIsHungry|Jon Williams]] 13:40, 5 Jan 2007 (PST): I thought "Flickr buddy" when I first saw these due to the color. Also the pink/blue may annoy people with some gender issues. Maybe we should use green for the sweetheart?

==== VoteLinks ====

[http://microformats.org/wiki/vote-links VoteLinks]

* http://deliciouslymeta.com/projects/vote-links/vote-for.gif vote-for
* http://deliciouslymeta.com/projects/vote-links/vote-against.gif vote-against

'''Comments:'''
* [[User:SteveIvy|Steve Ivy]]: I don't have a good icon for vote-abstain. Recommendations welcome. These are also a tad large to site next to links, perhaps?
** [[User:AndyMabbett|Andy Mabbett]]: Is +1/-1 a common way of representing voting? Would ticks and crosses be better, or thumbs up/ down (or horizontal for abstain)?
*** [[User:SteveIvy|Steve Ivy]]: I rather like the icons used by [http://digg.com digg] for voting on comments, but cannot use them for obvious reasons. I'm no iconographer to be honest, but if someone were to create thumbs-up/thumbs-down icons I'd use them instead of these.

==== Geo ====

Can be used in the ''background-image'' CSS property, next to a geo microformat. It could also indicate that a map opens in a new window:

* http://microformats.telemetry.gr/openmap.gif

----

=== Mac ===
[http://factoryjoe.com/blog/wp-content/uploads/2006/08/mf-icons.zip http://factoryjoe.com/blog/wp-content/uploads/2006/08/mf-icons-preview.png]

These [http://factoryjoe.com/blog/wp-content/uploads/2006/08/mf-icons.zip icons] can be used for folders or files on your Mac. You can use a tool like [http://iconfactory.com/software/pixadex Pixadex] for managing and applying them.

Created by [http://factoryjoe.com/blog Chris Messina]

----

=== PDF & SVG ===

[http://dmitry.baranovskiy.com/res/mf-logo.pdf http://dmitry.baranovskiy.com/i/pdffile.png] [http://dmitry.baranovskiy.com/res/mf-logo.svg http://dmitry.baranovskiy.com/i/svgfile.png]

This logo looks pretty much as first icon of Chris’ set. You could open it in any bitmap or vector editing tools, such as Adobe Photoshop or Adobe Illustrator.

Created by [http://dmitry.baranovskiy.com Dmitry Baranovskiy]

== Examples in the Wild ==

* [http://zeroseis.com.br ZeroSeis] uses hCard download icon.
* [http://www.nextbbs.com nextBBS] uses vote-links icons.
* [http://www.revolucao.etc.br Revolução Etc] uses hCard download icon and tag icon.

icons

2007-04-04T17:08:45Z

SunBurntKamel: /* sorry if this is the wrong place. */

<h1> Icons </h1>
These icons can be used to depict various microformats in webpages or on the desktop.

== Creators ==
* [http://factoryjoe.com/blog Chris Messina]
* [http://dmitry.baranovskiy.com Dmitry Baranovskiy]
* [http://bartleme.at Wolfgang Bartelme]

==Accessibility==
Publishers are advised to ensure that these icons are used in an accessible fashion, by including suitable "alt" attributes.

Icon designers are reminded that inability to distinguish between red and green is the commonest form of colour-blindness .

=== Copyright ===
Unless otherwise noted, these icons are licensed under the [http://creativecommons.org/licenses/by-sa/2.5/ Creative Commons Attribution-ShareAlike 2.5 license].

== Icons ==

=== Web ===

A [http://factorycity.net/projects/microformats-icons/ first effort] has been completed by Wolfgang Bartelme and Chris Messina to create a series of web-friendly icons and buttons for microformats.

==== General ====

* http://factorycity.net/projects/microformats%2Dicons/images/icon-hatom.png hAtom
* http://factorycity.net/projects/microformats%2Dicons/images/icon-hcalendar.png hCalendar
* http://factorycity.net/projects/microformats%2Dicons/images/icon-hcard-add.png hCard Add
* http://factorycity.net/projects/microformats%2Dicons/images/icon-hcard-download.png hCard Download
* http://factorycity.net/projects/microformats%2Dicons/images/icon-hresume.png hResume (button)
* http://factorycity.net/projects/microformats%2Dicons/images/icon-rel-tag.png rel-tag (button)
* http://factorycity.net/projects/microformats%2Dicons/images/icon-xfn.png XFN (button)

'''Comments:'''

* Hober pointed out that bright green seems to be a common color for [eventful.com/images/skin/ical.gif ical chicklets]
* Tantek wonders if the rel-tag button is useful
* ChrisMessina suggest a need for a small 10x10 tag icon
* Tantek wonders whether we need an hCard Download icon -- since it focuses too much on the "pipes"
* Ron thinks it's ok to use icons, cause it's a nice way of promoting the "Microformat idea". Maybe it's a good idea to use a downward aimed arrow to indicate the possibility to "download" something (like an hCard or hResume).
* Adam wonders if a multiple-license, including GPL, might be helpful in increasing adoption among wordpress themes.

==== XFN ====

* http://factorycity.net/projects/microformats%2Dicons/images/xfn-me.png rel-me
* http://factorycity.net/projects/microformats%2Dicons/images/xfn-friend.png rel-friend
** http://factorycity.net/projects/microformats%2Dicons/images/xfn-friend-met.png met
* http://factorycity.net/projects/microformats%2Dicons/images/xfn-sweetheart.png rel-sweetheart
** http://factorycity.net/projects/microformats%2Dicons/images/xfn-sweetheart-met.png met
* http://factorycity.net/projects/microformats%2Dicons/images/xfn-colleague.png rel-colleague
** http://factorycity.net/projects/microformats%2Dicons/images/xfn-colleague-met.png met

'''Comments:'''

* Tantek: wonders if a rel-me icon is necessary or appropriate; perhaps something indicating "facets"?
* ChrisMesssina: rel-me is useful in blog posts where you link to other posts that you've written
* [[User:WizardIsHungry|Jon Williams]] 13:40, 5 Jan 2007 (PST): I thought "Flickr buddy" when I first saw these due to the color. Also the pink/blue may annoy people with some gender issues. Maybe we should use green for the sweetheart?

==== VoteLinks ====

[http://microformats.org/wiki/vote-links VoteLinks]

* http://deliciouslymeta.com/projects/vote-links/vote-for.gif vote-for
* http://deliciouslymeta.com/projects/vote-links/vote-against.gif vote-against

'''Comments:'''
* [[User:SteveIvy|Steve Ivy]]: I don't have a good icon for vote-abstain. Recommendations welcome. These are also a tad large to site next to links, perhaps?
** [[User:AndyMabbett|Andy Mabbett]]: Is +1/-1 a common way of representing voting? Would ticks and crosses be better, or thumbs up/ down (or horizontal for abstain)?
*** [[User:SteveIvy|Steve Ivy]]: I rather like the icons used by [http://digg.com digg] for voting on comments, but cannot use them for obvious reasons. I'm no iconographer to be honest, but if someone were to create thumbs-up/thumbs-down icons I'd use them instead of these.

==== Geo ====

Can be used in the ''background-image'' CSS property, next to a geo microformat. It could also indicate that a map opens in a new window:

* http://microformats.telemetry.gr/openmap.gif

----

=== Mac ===
[http://factoryjoe.com/blog/wp-content/uploads/2006/08/mf-icons.zip http://factoryjoe.com/blog/wp-content/uploads/2006/08/mf-icons-preview.png]

These [http://factoryjoe.com/blog/wp-content/uploads/2006/08/mf-icons.zip icons] can be used for folders or files on your Mac. You can use a tool like [http://iconfactory.com/software/pixadex Pixadex] for managing and applying them.

Created by [http://factoryjoe.com/blog Chris Messina]

----

=== PDF & SVG ===

[http://dmitry.baranovskiy.com/res/mf-logo.pdf http://dmitry.baranovskiy.com/i/pdffile.png] [http://dmitry.baranovskiy.com/res/mf-logo.svg http://dmitry.baranovskiy.com/i/svgfile.png]

This logo looks pretty much as first icon of Chris’ set. You could open it in any bitmap or vector editing tools, such as Adobe Photoshop or Adobe Illustrator.

Created by [http://dmitry.baranovskiy.com Dmitry Baranovskiy]

== Examples in the Wild ==

* [http://zeroseis.com.br ZeroSeis] uses hCard download icon.
* [http://www.nextbbs.com nextBBS] uses vote-links icons.
* [http://www.revolucao.etc.br Revolução Etc] uses hCard download icon and tag icon.