Microformats Wiki - User contributions [en]

icons

2012-07-22T01:39:54Z

Ssokolow: /* VoteLinks */ DeliciouslyMeta.com is gone and FactoryCity.net's icons seem to be gone. Since upload is disabled, link to copies of the icons on web.archive.org

<entry-title> Icons </entry-title>
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://ripplefxinc.com Gabriel Dibble] · [[User:Gdibble|^]]
* [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 color-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 follow-up to Wolfgang & Chris' excellent work, Gabriel has created an extra-small (10x12) general use icon to indicate both ''a vCard download-link'' and ''the integration of an hCard''. In contrast to the more attention-commanding graphics below, this icon intends to ''cleanly and elegantly'' integrate into footers or any in-line text ''(more appropriate for'' some'' site designs)'':

* https://github.com/gdibble/microformatsIcons/raw/master/vCard.xsm.png vCard download / hCard integrated  ([https://github.com/gdibble/microformatsIcons/blob/master/README readme])

The first effort was completed by Wolfgang Bartelme and Chris Messina to create a series of web-friendly icons and buttons for microformats.

==== General ====

* http://img.skitch.com/20090827-qa9y941qxn6haf1y2e31fydt7.png hAtom
* http://img.skitch.com/20090827-qg4y5k6ayapuc3fm36a8hada6b.png hCalendar
* http://img.skitch.com/20090827-f3qdiebfdr665y1ag1byy31du2.png hCard Add
* http://img.skitch.com/20090827-fnq86wtfttf2tah18q4j69wbka.png hCard Download
* http://img.skitch.com/20090827-pc154xc2xw6ainsajxbncmxqyg.png hResume (button)
* http://img.skitch.com/20090827-twehb4b77egeieidept1cg7q6t.png rel-tag (button)
* http://img.skitch.com/20090827-p1rkxqnrhwyuta8wghi6xe3bbw.png XFN (button)
* http://github.com/bcampbell/hnews_popup/raw/master/hnews_icon.png hNews

'''Based on the General Icon DevKit:'''
* http://farm1.static.flickr.com/247/515868619_ed9cda470a_o.png hCalendar Download
* http://farm1.static.flickr.com/217/515843744_57bd70fdf5_o.png hCalendar Add
* http://farm1.static.flickr.com/235/515843768_98956242a7_o.png hCard
* http://farm3.static.flickr.com/2178/2528693942_1a58d71d27_o.png [http://notizblog.org/projects/haudio-icons/ hAudio Icons]

'''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
*** [[User:PatHawks|PatHawks]] thinks smaller is better, if the icon is going to sit next to every tag
** [[User:Pfefferle|Pfefferle]] suggests the [http://www.famfamfam.com/lab/icons/silk/ FamFamFam] tag-icon: http://notizblog.org/wp-content/uploads/2007/05/tag_blue.png
** [[User:Gdibble|Gabriel Dibble]] liked the idea, thus producing the 10x12 transparent icon ''above''
* 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.
* [[User:Pfefferle|Pfefferle]] suggests to change the color of the XFN-button into blue, because it uses the rel-attribute like "rel-tag" http://farm1.static.flickr.com/195/515824030_3c0dd42493_o.png.
* [[User:SvenDowideit|SvenDowideit]] wonders what font is used above, and why there are no open source friendly source files - ie svg (Dmitry's site is offline so i don't know if those are what I'm looking for)

==== XFN ====

* http://img.skitch.com/20090827-r6ksuun131mk1rupdittkh987b.png rel-me
* http://img.skitch.com/20090827-f6y8qp5q5b3ejtyphw931698uw.png rel-friend
** http://img.skitch.com/20090827-kwbt1kty45ynp8nxf3wbyyderx.png met
* http://img.skitch.com/20090827-tmm7p8pkw149hfdku8jfc2greu.png rel-sweetheart
** http://img.skitch.com/20090827-t3btra8dyxnp5fshqg58ywjhc.png met
* http://img.skitch.com/20090827-miwd8ux7kf35fntsqriicrrjsw.png rel-colleague
** http://img.skitch.com/20090827-pjeiakssxjyr54k7htr3qjxgmu.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?
* [[User:PatHawks|Pat Hawks]] 12:58, 11 Apr 2008 (CST): Should "crush" and "sweetheart" use the same icon? Should "colleague" and "co-worker" use the same? Do we need one for "contact" or "acquaintance" as well?

==== VoteLinks ====

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

* [http://web.archive.org/web/20071018093426/http://deliciouslymeta.com/projects/vote-links/vote-for.gif vote-for]
* [http://web.archive.org/web/20071018093433/http://deliciouslymeta.com/projects/vote-links/vote-against.gif vote-against]
* [http://web.archive.org/web/20070730010522/http://www.factorycity.net/projects/microformats-icons/images/vote-links.png] (download the [http://web.archive.org/web/20070730010851/http://www.factorycity.net/projects/microformats-icons/files/vote-links.zip kit])

'''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://users.hol.gr/~dzach/microformats/openmap.gif

* http://geotagicons.files.wordpress.com/2011/09/geotag_16.png (taken from [http://www.geotagicons.com/ Geotag Icon Project])

----

=== 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]

==See also==
{{branding-see-also}}

== Examples in the Wild ==

* [http://ripplefxinc.com RippleFxInc.com], its [http://blog.ripplefxinc.com Blog], [http://wiki.ripplefxinc.com Wiki] and ''All websites professionally produced'' use the hCard download-link / vCard integrated [10x12] icon; et. al.
* [http://zeroseis.com.br ZeroSeis] uses hCard download icon.
* [http://www.bayofislands.net/ Bay of Islands] uses hCard geo icon eg. in [http://www.bayofislands.net/accommodation/backpackers/mousetrap/ Moustrap Backpackers] page
* [http://www.nextbbs.com nextBBS] uses vote-links icons.
* [http://www.revolucao.etc.br Revolução Etc] uses hCard download icon and tag icon.
* There are various microformat logos on [http://www.westmidlandbirdclub.com/site/ the West Midland Bird Club's "about this site" page] and on its [http://www.westmidlandbirdclub.com/club/executive.htm contacts] and [http://www.westmidlandbirdclub.com/diary/2007/10.htm events] pages

icons

2012-07-22T01:33:05Z

Ssokolow: /* Geo */ Unbreak link to the geotag icon

<entry-title> Icons </entry-title>
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://ripplefxinc.com Gabriel Dibble] · [[User:Gdibble|^]]
* [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 color-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 follow-up to Wolfgang & Chris' excellent work, Gabriel has created an extra-small (10x12) general use icon to indicate both ''a vCard download-link'' and ''the integration of an hCard''. In contrast to the more attention-commanding graphics below, this icon intends to ''cleanly and elegantly'' integrate into footers or any in-line text ''(more appropriate for'' some'' site designs)'':

* https://github.com/gdibble/microformatsIcons/raw/master/vCard.xsm.png vCard download / hCard integrated  ([https://github.com/gdibble/microformatsIcons/blob/master/README readme])

The first effort was completed by Wolfgang Bartelme and Chris Messina to create a series of web-friendly icons and buttons for microformats.

==== General ====

* http://img.skitch.com/20090827-qa9y941qxn6haf1y2e31fydt7.png hAtom
* http://img.skitch.com/20090827-qg4y5k6ayapuc3fm36a8hada6b.png hCalendar
* http://img.skitch.com/20090827-f3qdiebfdr665y1ag1byy31du2.png hCard Add
* http://img.skitch.com/20090827-fnq86wtfttf2tah18q4j69wbka.png hCard Download
* http://img.skitch.com/20090827-pc154xc2xw6ainsajxbncmxqyg.png hResume (button)
* http://img.skitch.com/20090827-twehb4b77egeieidept1cg7q6t.png rel-tag (button)
* http://img.skitch.com/20090827-p1rkxqnrhwyuta8wghi6xe3bbw.png XFN (button)
* http://github.com/bcampbell/hnews_popup/raw/master/hnews_icon.png hNews

'''Based on the General Icon DevKit:'''
* http://farm1.static.flickr.com/247/515868619_ed9cda470a_o.png hCalendar Download
* http://farm1.static.flickr.com/217/515843744_57bd70fdf5_o.png hCalendar Add
* http://farm1.static.flickr.com/235/515843768_98956242a7_o.png hCard
* http://farm3.static.flickr.com/2178/2528693942_1a58d71d27_o.png [http://notizblog.org/projects/haudio-icons/ hAudio Icons]

'''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
*** [[User:PatHawks|PatHawks]] thinks smaller is better, if the icon is going to sit next to every tag
** [[User:Pfefferle|Pfefferle]] suggests the [http://www.famfamfam.com/lab/icons/silk/ FamFamFam] tag-icon: http://notizblog.org/wp-content/uploads/2007/05/tag_blue.png
** [[User:Gdibble|Gabriel Dibble]] liked the idea, thus producing the 10x12 transparent icon ''above''
* 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.
* [[User:Pfefferle|Pfefferle]] suggests to change the color of the XFN-button into blue, because it uses the rel-attribute like "rel-tag" http://farm1.static.flickr.com/195/515824030_3c0dd42493_o.png.
* [[User:SvenDowideit|SvenDowideit]] wonders what font is used above, and why there are no open source friendly source files - ie svg (Dmitry's site is offline so i don't know if those are what I'm looking for)

==== XFN ====

* http://img.skitch.com/20090827-r6ksuun131mk1rupdittkh987b.png rel-me
* http://img.skitch.com/20090827-f6y8qp5q5b3ejtyphw931698uw.png rel-friend
** http://img.skitch.com/20090827-kwbt1kty45ynp8nxf3wbyyderx.png met
* http://img.skitch.com/20090827-tmm7p8pkw149hfdku8jfc2greu.png rel-sweetheart
** http://img.skitch.com/20090827-t3btra8dyxnp5fshqg58ywjhc.png met
* http://img.skitch.com/20090827-miwd8ux7kf35fntsqriicrrjsw.png rel-colleague
** http://img.skitch.com/20090827-pjeiakssxjyr54k7htr3qjxgmu.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?
* [[User:PatHawks|Pat Hawks]] 12:58, 11 Apr 2008 (CST): Should "crush" and "sweetheart" use the same icon? Should "colleague" and "co-worker" use the same? Do we need one for "contact" or "acquaintance" as well?

==== 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
* http://factorycity.net/projects/microformats%2Dicons/images/vote-links.png (download the [http://factorycity.net/projects/microformats%2Dicons/files/vote-links.zip kit])

'''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://users.hol.gr/~dzach/microformats/openmap.gif

* http://geotagicons.files.wordpress.com/2011/09/geotag_16.png (taken from [http://www.geotagicons.com/ Geotag Icon Project])

----

=== 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]

==See also==
{{branding-see-also}}

== Examples in the Wild ==

* [http://ripplefxinc.com RippleFxInc.com], its [http://blog.ripplefxinc.com Blog], [http://wiki.ripplefxinc.com Wiki] and ''All websites professionally produced'' use the hCard download-link / vCard integrated [10x12] icon; et. al.
* [http://zeroseis.com.br ZeroSeis] uses hCard download icon.
* [http://www.bayofislands.net/ Bay of Islands] uses hCard geo icon eg. in [http://www.bayofislands.net/accommodation/backpackers/mousetrap/ Moustrap Backpackers] page
* [http://www.nextbbs.com nextBBS] uses vote-links icons.
* [http://www.revolucao.etc.br Revolução Etc] uses hCard download icon and tag icon.
* There are various microformat logos on [http://www.westmidlandbirdclub.com/site/ the West Midland Bird Club's "about this site" page] and on its [http://www.westmidlandbirdclub.com/club/executive.htm contacts] and [http://www.westmidlandbirdclub.com/diary/2007/10.htm events] pages

qr code

2012-07-22T01:30:37Z

Ssokolow: /* Graphic */ Unbreak link to example QR code

=QR Codes=

==Background==

This page contains information about [http://en.wikipedia.org/wiki/QR_Code QR Codes] in relation to http://microformats.org/ and microformats themselves.

QR stands for Quick Recognition and is a type of 2D Barcode. These barcodes can easily be decoded by even low-end devices such as mobile phones.

==Graphic==

http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=http://microformats.org/

==Resources==

[http://code.google.com/apis/chart/#qrcodes Google Charts API for QR Codes] allows you to create and host simple QR Codes.

==Uses==
2D Barcodes can be used in print advertising or even in digital forms.

==References==
* http://en.wikipedia.org/wiki/QR_Code

==See also==
{{branding-see-also}}