마이크로 포맷 관련 아이콘

Microformats icons DevKit

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

[edit]

General

• hAtom
• hCalendar
• hCard Add
• hCard Download
• hResume (button)
• rel-tag (button)
• XFN (button)

Based on the General Icon DevKit:

• hCalendar Download
• hCalendar Add
• hCard
• hAudio Icons (http://notizblog.org/projects/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
  • square tag
  • Adam suggests 10x10 is a little small, but square is nice
    • PatHawks thinks smaller is better, if the icon is going to sit next to every tag
  • Pfefferle suggests the FamFamFam (http://www.famfamfam.com/lab/icons/silk/) 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 ofpromoting the "Microformat idea". Maybe it's a good idea to use adownward 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.
• Pfefferle suggests to change the color of the XFN-button into blue, because it uses the rel-attribute like "rel-tag" .

[edit]

XFN

• rel-me
• rel-friend
  • met
• rel-sweetheart
  • met
• rel-colleague
  • 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
• Jon Williams13:40, 5 Jan 2007 (PST): I thought "Flickr buddy" when I first sawthese due to the color. Also the pink/blue may annoy people with somegender issues. Maybe we should use green for the sweetheart?
• Pat Hawks12:58, 11 Apr 2008 (CST): Should "crush" and "sweetheart" use the sameicon? Should "colleague" and "co-worker" use the same? Do we need onefor "contact" or "acquaintance" as well?

[edit]

VoteLinks

VoteLinks (http://microformats.org/wiki/vote-links)

• vote-for
• vote-against
• (download the kit (http://factorycity.net/projects/microformats%2Dicons/files/vote-links.zip))

Comments:

• 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?
  • Andy Mabbett:Is +1/-1 a common way of representing voting? Would ticks and crossesbe better, or thumbs up/ down (or horizontal for abstain)?
    • Steve Ivy: I rather like the icons used by digg (http://digg.com)for voting on comments, but cannot use them for obvious reasons. I'm noiconographer to be honest, but if someone were to createthumbs-up/thumbs-down icons I'd use them instead of these.

[edit]

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:

• 

• (taken from Geotag Icon Project (http://www.geotagicons.com/))

---

[edit]

Mac

 (http://factoryjoe.com/blog/wp-content/uploads/2006/08/mf-icons.zip)

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

Created by Chris Messina

Microformat Button

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

I already have a "I use " on my blog: http://doncrowley.blogspot.com/

- Don Crowley

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

[edit]

hCalendar

• 
• 
• CSS-powered button from Midgard CMS - Event calendar (http://www.midgard-project.org/community/events/):

››› hCalendar

Code (white space added for readability):

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

[edit]

hCard

• (mirror: )
• 
• 
• CSS-powered button, as evidenced at microformat badges @ re-run (http://re-run.com/about/microformat-badges)

[edit]

rel-license

• 
• 

[edit]

rel-nofollow

• 
• 

[edit]

rel-tag

• 
• 
• 

[edit]

VoteLinks

• 
• 

[edit]

XFN (http://gmpg.org/xfn/)

• 
• 

[edit]

XMDP (http://gmpg.org/xmdp/)

• 
• 

[edit]

XOXO

• 
• 

[edit]

CSS Styles for microformats

I'm not sure wether this can be under buttons, but I don't knowwhere else to put it. This is a stylesheet containing styles for mostmicroformats. 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. Mac Lover 13:25, 13 Apr 2007 (PDT)

License (http://creativecommons.org/licenses/by-sa/3.0/us/)Zip