메모장



마이크로 포맷 관련 아이콘



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.

General

  • icon-hatom.png hAtom
  • icon-hcalendar.png hCalendar
  • icon-hcard-add.png hCard Add
  • icon-hcard-download.png hCard Download
  • icon-hresume.png hResume (button)
  • icon-rel-tag.png rel-tag (button)
  • icon-xfn.png XFN (button)

Based on the General Icon DevKit:

  • 515868619_ed9cda470a_o.png hCalendar Download
  • 515843744_57bd70fdf5_o.png hCalendar Add
  • 515843768_98956242a7_o.png hCard
  • 2528693942_1a58d71d27_o.png 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
    • tag-ltblue.gif 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: tag_blue.png
  • 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" 515824030_3c0dd42493_o.png.

XFN

  • xfn-me.png rel-me
  • xfn-friend.png rel-friend
    • xfn-friend-met.png met
  • xfn-sweetheart.png rel-sweetheart
    • xfn-sweetheart-met.png met
  • xfn-colleague.png rel-colleague
    • 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
  • 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?

VoteLinks

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

  • vote-for.gif vote-for
  • vote-against.gif vote-against
  • vote-links.png (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.

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:

  • openmap.gif

Mac

mf-icons-preview.png (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.

microformats.png

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

- Don Crowley

  • microformat.png
  • microformat_enabled.png
  • emf_green.png
  • mfe_green.png
  • mwmf_green.png
  • smf_green.png
  • emf_white.png
  • mfe_white.png
  • mwmf_white.png
  • smf_white.png

hCalendar

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

hCard

rel-license

  • license.png
  • microformat_rellicense.png

rel-nofollow

  • nofollow.png
  • microformat_relnofollow.png

rel-tag

  • rel-tag.png
  • tag.png
  • microformat_reltag.png

VoteLinks

  • votelinks.png
  • microformat_votelinks.png

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

  • xfn.png
  • microformat_xfn.png

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

  • xmdp.png
  • microformat_xmdp.png

XOXO

  • xoxo.png
  • microformat_xoxo.png

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

핑백

  • User links about "microformat" on iLinkShare 2008-10-02 19:33:24 #

    ... iLinkShare 3 votesPolyphasic Sleep Microformat Icon>> saved by U9433015 1 days ago2 votes마이크로 포맷 관련 아이콘>> saved by Felixia 1 days ago2 votesChocoku Busby Seo Challenge Suggests Sites for Yo ... more

덧글

댓글 입력 영역