http://microformats.org/wiki/api.php?action=feedcontributions&user=Ssokolow&feedformat=atomMicroformats Wiki - User contributions [en]2024-03-29T09:29:07ZUser contributionsMediaWiki 1.38.4http://microformats.org/wiki/index.php?title=icons&diff=46858icons2012-07-22T01:39:54Z<p>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</p>
<hr />
<div><entry-title> Icons </entry-title><br />
These icons can be used to depict various microformats in webpages or on the desktop.<br />
<br />
== Creators ==<br />
* [http://factoryjoe.com/blog Chris Messina]<br />
* [http://dmitry.baranovskiy.com Dmitry Baranovskiy]<br />
* [http://ripplefxinc.com Gabriel Dibble] &middot; [[User:Gdibble|^]]<br />
* [http://bartleme.at Wolfgang Bartelme]<br />
<br />
==Accessibility==<br />
Publishers are advised to ensure that these icons are used in an accessible fashion, by including suitable "alt" attributes.<br />
<br />
Icon designers are reminded that inability to distinguish between red and green is the commonest form of color-blindness .<br />
<br />
=== Copyright ===<br />
Unless otherwise noted, these icons are licensed under the [http://creativecommons.org/licenses/by-sa/2.5/ Creative Commons Attribution-ShareAlike 2.5 license].<br />
<br />
== Icons ==<br />
<br />
=== Web ===<br />
<br />
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)'':<br />
<br />
* https://github.com/gdibble/microformatsIcons/raw/master/vCard.xsm.png vCard download / hCard integrated &nbsp;([https://github.com/gdibble/microformatsIcons/blob/master/README readme])<br />
<br />
<br />
The first effort was completed by Wolfgang Bartelme and Chris Messina to create a series of web-friendly icons and buttons for microformats.<br />
<br />
==== General ====<br />
<br />
* http://img.skitch.com/20090827-qa9y941qxn6haf1y2e31fydt7.png hAtom <br />
* http://img.skitch.com/20090827-qg4y5k6ayapuc3fm36a8hada6b.png hCalendar <br />
* http://img.skitch.com/20090827-f3qdiebfdr665y1ag1byy31du2.png hCard Add <br />
* http://img.skitch.com/20090827-fnq86wtfttf2tah18q4j69wbka.png hCard Download <br />
* http://img.skitch.com/20090827-pc154xc2xw6ainsajxbncmxqyg.png hResume (button) <br />
* http://img.skitch.com/20090827-twehb4b77egeieidept1cg7q6t.png rel-tag (button) <br />
* http://img.skitch.com/20090827-p1rkxqnrhwyuta8wghi6xe3bbw.png XFN (button) <br />
* http://github.com/bcampbell/hnews_popup/raw/master/hnews_icon.png hNews<br />
<br />
'''Based on the General Icon DevKit:'''<br />
* http://farm1.static.flickr.com/247/515868619_ed9cda470a_o.png hCalendar Download<br />
* http://farm1.static.flickr.com/217/515843744_57bd70fdf5_o.png hCalendar Add<br />
* http://farm1.static.flickr.com/235/515843768_98956242a7_o.png hCard<br />
* http://farm3.static.flickr.com/2178/2528693942_1a58d71d27_o.png [http://notizblog.org/projects/haudio-icons/ hAudio Icons]<br />
<br />
'''Comments:'''<br />
<br />
* Hober pointed out that bright green seems to be a common color for [eventful.com/images/skin/ical.gif ical chicklets]<br />
* Tantek wonders if the rel-tag button is useful<br />
* ChrisMessina suggest a need for a small 10x10 tag icon<br />
** http://archgfx.net/aspnet_client/tag-ltblue.gif square tag<br />
** [[User:SunBurntKamel|Adam]] suggests 10x10 is a little small, but square is nice<br />
*** [[User:PatHawks|PatHawks]] thinks smaller is better, if the icon is going to sit next to every tag<br />
** [[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<br />
** [[User:Gdibble|Gabriel Dibble]] liked the idea, thus producing the 10x12 transparent icon ''above''<br />
* Tantek wonders whether we need an hCard Download icon -- since it focuses too much on the "pipes"<br />
* 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).<br />
* Adam wonders if a multiple-license, including GPL, might be helpful in increasing adoption among wordpress themes.<br />
* [[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.<br />
* [[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)<br />
<br />
==== XFN ====<br />
<br />
* http://img.skitch.com/20090827-r6ksuun131mk1rupdittkh987b.png rel-me <br />
* http://img.skitch.com/20090827-f6y8qp5q5b3ejtyphw931698uw.png rel-friend <br />
** http://img.skitch.com/20090827-kwbt1kty45ynp8nxf3wbyyderx.png met <br />
* http://img.skitch.com/20090827-tmm7p8pkw149hfdku8jfc2greu.png rel-sweetheart <br />
** http://img.skitch.com/20090827-t3btra8dyxnp5fshqg58ywjhc.png met <br />
* http://img.skitch.com/20090827-miwd8ux7kf35fntsqriicrrjsw.png rel-colleague <br />
** http://img.skitch.com/20090827-pjeiakssxjyr54k7htr3qjxgmu.png met <br />
<br />
'''Comments:'''<br />
<br />
* Tantek: wonders if a rel-me icon is necessary or appropriate; perhaps something indicating "facets"?<br />
* ChrisMesssina: rel-me is useful in blog posts where you link to other posts that you've written<br />
* [[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?<br />
* [[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?<br />
<br />
==== VoteLinks ====<br />
<br />
[http://microformats.org/wiki/vote-links VoteLinks]<br />
<br />
* [http://web.archive.org/web/20071018093426/http://deliciouslymeta.com/projects/vote-links/vote-for.gif vote-for]<br />
* [http://web.archive.org/web/20071018093433/http://deliciouslymeta.com/projects/vote-links/vote-against.gif vote-against]<br />
* [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])<br />
<br />
'''Comments:'''<br />
* [[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?<br />
** [[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)?<br />
*** [[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.<br />
<br />
==== Geo ====<br />
<br />
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:<br />
<br />
* http://users.hol.gr/~dzach/microformats/openmap.gif<br />
<br />
* http://geotagicons.files.wordpress.com/2011/09/geotag_16.png (taken from [http://www.geotagicons.com/ Geotag Icon Project])<br />
<br />
----<br />
<br />
=== Mac ===<br />
[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]<br />
<br />
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.<br />
<br />
Created by [http://factoryjoe.com/blog Chris Messina]<br />
<br />
<br />
----<br />
<br />
<br />
=== PDF & SVG ===<br />
<br />
[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]<br />
<br />
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.<br />
<br />
Created by [http://dmitry.baranovskiy.com Dmitry Baranovskiy]<br />
<br />
==See also==<br />
{{branding-see-also}}<br />
<br />
== Examples in the Wild ==<br />
<br />
* [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.<br />
* [http://zeroseis.com.br ZeroSeis] uses hCard download icon.<br />
* [http://www.bayofislands.net/ Bay of Islands] uses hCard geo icon eg. in [http://www.bayofislands.net/accommodation/backpackers/mousetrap/ Moustrap Backpackers] page<br />
* [http://www.nextbbs.com nextBBS] uses vote-links icons.<br />
* [http://www.revolucao.etc.br Revolução Etc] uses hCard download icon and tag icon.<br />
* 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</div>Ssokolowhttp://microformats.org/wiki/index.php?title=icons&diff=46857icons2012-07-22T01:33:05Z<p>Ssokolow: /* Geo */ Unbreak link to the geotag icon</p>
<hr />
<div><entry-title> Icons </entry-title><br />
These icons can be used to depict various microformats in webpages or on the desktop.<br />
<br />
== Creators ==<br />
* [http://factoryjoe.com/blog Chris Messina]<br />
* [http://dmitry.baranovskiy.com Dmitry Baranovskiy]<br />
* [http://ripplefxinc.com Gabriel Dibble] &middot; [[User:Gdibble|^]]<br />
* [http://bartleme.at Wolfgang Bartelme]<br />
<br />
==Accessibility==<br />
Publishers are advised to ensure that these icons are used in an accessible fashion, by including suitable "alt" attributes.<br />
<br />
Icon designers are reminded that inability to distinguish between red and green is the commonest form of color-blindness .<br />
<br />
=== Copyright ===<br />
Unless otherwise noted, these icons are licensed under the [http://creativecommons.org/licenses/by-sa/2.5/ Creative Commons Attribution-ShareAlike 2.5 license].<br />
<br />
== Icons ==<br />
<br />
=== Web ===<br />
<br />
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)'':<br />
<br />
* https://github.com/gdibble/microformatsIcons/raw/master/vCard.xsm.png vCard download / hCard integrated &nbsp;([https://github.com/gdibble/microformatsIcons/blob/master/README readme])<br />
<br />
<br />
The first effort was completed by Wolfgang Bartelme and Chris Messina to create a series of web-friendly icons and buttons for microformats.<br />
<br />
==== General ====<br />
<br />
* http://img.skitch.com/20090827-qa9y941qxn6haf1y2e31fydt7.png hAtom <br />
* http://img.skitch.com/20090827-qg4y5k6ayapuc3fm36a8hada6b.png hCalendar <br />
* http://img.skitch.com/20090827-f3qdiebfdr665y1ag1byy31du2.png hCard Add <br />
* http://img.skitch.com/20090827-fnq86wtfttf2tah18q4j69wbka.png hCard Download <br />
* http://img.skitch.com/20090827-pc154xc2xw6ainsajxbncmxqyg.png hResume (button) <br />
* http://img.skitch.com/20090827-twehb4b77egeieidept1cg7q6t.png rel-tag (button) <br />
* http://img.skitch.com/20090827-p1rkxqnrhwyuta8wghi6xe3bbw.png XFN (button) <br />
* http://github.com/bcampbell/hnews_popup/raw/master/hnews_icon.png hNews<br />
<br />
'''Based on the General Icon DevKit:'''<br />
* http://farm1.static.flickr.com/247/515868619_ed9cda470a_o.png hCalendar Download<br />
* http://farm1.static.flickr.com/217/515843744_57bd70fdf5_o.png hCalendar Add<br />
* http://farm1.static.flickr.com/235/515843768_98956242a7_o.png hCard<br />
* http://farm3.static.flickr.com/2178/2528693942_1a58d71d27_o.png [http://notizblog.org/projects/haudio-icons/ hAudio Icons]<br />
<br />
'''Comments:'''<br />
<br />
* Hober pointed out that bright green seems to be a common color for [eventful.com/images/skin/ical.gif ical chicklets]<br />
* Tantek wonders if the rel-tag button is useful<br />
* ChrisMessina suggest a need for a small 10x10 tag icon<br />
** http://archgfx.net/aspnet_client/tag-ltblue.gif square tag<br />
** [[User:SunBurntKamel|Adam]] suggests 10x10 is a little small, but square is nice<br />
*** [[User:PatHawks|PatHawks]] thinks smaller is better, if the icon is going to sit next to every tag<br />
** [[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<br />
** [[User:Gdibble|Gabriel Dibble]] liked the idea, thus producing the 10x12 transparent icon ''above''<br />
* Tantek wonders whether we need an hCard Download icon -- since it focuses too much on the "pipes"<br />
* 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).<br />
* Adam wonders if a multiple-license, including GPL, might be helpful in increasing adoption among wordpress themes.<br />
* [[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.<br />
* [[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)<br />
<br />
==== XFN ====<br />
<br />
* http://img.skitch.com/20090827-r6ksuun131mk1rupdittkh987b.png rel-me <br />
* http://img.skitch.com/20090827-f6y8qp5q5b3ejtyphw931698uw.png rel-friend <br />
** http://img.skitch.com/20090827-kwbt1kty45ynp8nxf3wbyyderx.png met <br />
* http://img.skitch.com/20090827-tmm7p8pkw149hfdku8jfc2greu.png rel-sweetheart <br />
** http://img.skitch.com/20090827-t3btra8dyxnp5fshqg58ywjhc.png met <br />
* http://img.skitch.com/20090827-miwd8ux7kf35fntsqriicrrjsw.png rel-colleague <br />
** http://img.skitch.com/20090827-pjeiakssxjyr54k7htr3qjxgmu.png met <br />
<br />
'''Comments:'''<br />
<br />
* Tantek: wonders if a rel-me icon is necessary or appropriate; perhaps something indicating "facets"?<br />
* ChrisMesssina: rel-me is useful in blog posts where you link to other posts that you've written<br />
* [[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?<br />
* [[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?<br />
<br />
==== VoteLinks ====<br />
<br />
[http://microformats.org/wiki/vote-links VoteLinks]<br />
<br />
* http://deliciouslymeta.com/projects/vote-links/vote-for.gif vote-for<br />
* http://deliciouslymeta.com/projects/vote-links/vote-against.gif vote-against<br />
* http://factorycity.net/projects/microformats%2Dicons/images/vote-links.png (download the [http://factorycity.net/projects/microformats%2Dicons/files/vote-links.zip kit])<br />
<br />
'''Comments:'''<br />
* [[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?<br />
** [[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)?<br />
*** [[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.<br />
<br />
==== Geo ====<br />
<br />
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:<br />
<br />
* http://users.hol.gr/~dzach/microformats/openmap.gif<br />
<br />
* http://geotagicons.files.wordpress.com/2011/09/geotag_16.png (taken from [http://www.geotagicons.com/ Geotag Icon Project])<br />
<br />
----<br />
<br />
=== Mac ===<br />
[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]<br />
<br />
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.<br />
<br />
Created by [http://factoryjoe.com/blog Chris Messina]<br />
<br />
<br />
----<br />
<br />
<br />
=== PDF & SVG ===<br />
<br />
[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]<br />
<br />
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.<br />
<br />
Created by [http://dmitry.baranovskiy.com Dmitry Baranovskiy]<br />
<br />
==See also==<br />
{{branding-see-also}}<br />
<br />
== Examples in the Wild ==<br />
<br />
* [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.<br />
* [http://zeroseis.com.br ZeroSeis] uses hCard download icon.<br />
* [http://www.bayofislands.net/ Bay of Islands] uses hCard geo icon eg. in [http://www.bayofislands.net/accommodation/backpackers/mousetrap/ Moustrap Backpackers] page<br />
* [http://www.nextbbs.com nextBBS] uses vote-links icons.<br />
* [http://www.revolucao.etc.br Revolução Etc] uses hCard download icon and tag icon.<br />
* 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</div>Ssokolowhttp://microformats.org/wiki/index.php?title=qr_code&diff=46856qr code2012-07-22T01:30:37Z<p>Ssokolow: /* Graphic */ Unbreak link to example QR code</p>
<hr />
<div>=QR Codes=<br />
<br />
==Background==<br />
<br />
This page contains information about [http://en.wikipedia.org/wiki/QR_Code QR Codes] in relation to http://microformats.org/ and microformats themselves.<br />
<br />
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.<br />
<br />
==Graphic==<br />
<br />
http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=http://microformats.org/<br />
<br />
==Resources==<br />
<br />
[http://code.google.com/apis/chart/#qrcodes Google Charts API for QR Codes] allows you to create and host simple QR Codes.<br />
<br />
==Uses==<br />
2D Barcodes can be used in print advertising or even in digital forms.<br />
<br />
==References==<br />
* http://en.wikipedia.org/wiki/QR_Code<br />
<br />
==See also==<br />
{{branding-see-also}}</div>Ssokolow