Microformats

How do I use Microformats?
For those of us that don’t want all the this is why, what, how etc…, but want to just implement the microformats into our pages, skip all the stuff below and read up on the quick tutorials section.

What are microformats?
Microformats are simple ways to share data from your website about you and what you are doing in a standards complient, accessible, easy to use way.

My favorite definition for Microformats is written by: Tantek Celik

“Microformats are the way to publish and share information on the web with higher fidelity.

For example, if a company wanted their contact information to be easily found and shared, they would publish it with hCard. Similarly if an organization is planning a series of events and wants more people to know about them and add them to their calendars, then they would publish their events listing with hCalendar. For advocacy groups, whenever they take a position on some political leader, some piece of legislation etc., if they wanted their evaluations/reviews/ratings of those people/laws to be more easily found and passed around, they would publish such opinions with hReview. For all of these, to make it easier, publishers can use tools and services that support microformats.
The key here is that microformats are simple/easy enough that the any organizations own web authors/designers can easily add them in themselves. Adding microformats is easier than publishing an RSS feed for example. You don’t have to be a programmer. Anyone with decent (X)HTML+CSS authoring/writing skills can use microformats. Pretty much anyone who is literate can be taught how to author HTML+CSS, and thus microformats makes use of very widely available skill sets.”

Taken from: http://microformats.org/wiki/what-are-microformats


Quick and Easy Personal Contact (hCard) Implementation

The XHTML

<div id=”vtop”>Download My Contact Information</div>
<div class=”vcard”>
<div class=”photo”>
<img src=”http://yourdomain.com/avatar.gif” alt=”Your Avatar” width=”50″ height=”75″/>
</div>
<a class=”url fn” href=”http://www.yourdomain.com/”>Your First and Last Name</a>
<div class=”title”>Your Job Title</div>
<div class=”org”>Your Company Name</div>

<div class=”adr”>
<div class=”street-address”>123 Your Street</div>
<div class=”post-office-box”>P.O. Box 5</div>
<span class=”locality”>Quincy</span>,
<span class=”region”>CA</span>
<span class=”postal-code”>99999</span>
</div>

<div class=”tel”>
<div class=”type”>Cell<span class=”value”>(555)555-1212</span></div>
<div class=”type”>Work<span class=”value”>(555)555-2323</span></div>
</div>

<div class=”email”>
<a href=”mailto:you@example.com”>you@example.com</a>
</div>
</div>

The CSS

body{
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#vtop{
padding:5px;
font-size:10px;
width:200px;
border-top:1px solid #CCCCCC;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
font-weight:bold;
background-color: #FFFFCC;
}
.vcard{
font-size:12px;
border:1px solid #CCCCCC;
padding:10px;
line-height:1.5em;
width:300px;
background-color: #FFFFCC;
}
.fn{
font-weight:bold;
font-size:13px;
}
.title{}
.org{}
.adr{}
.adr .street-address{}
.adr .post-office-box{}
.adr .locality{}
.adr .region{}
.adr .postal-code{}
.tel{}
.tel type{}
.email{}
.photo{
float:right;
background:#00FF00;
width:50px;
height:75px;
border:1px solid #000000;
padding:2px;
}
.photo img{

}

Microformat Icons

Micorformat Icons http://factorycity.net/projects/microformats-icons/

Good Resources

  • http://developer.mozilla.org/en/docs/Category:Microformats
  • http://microformats.org/
  • http://en.wikipedia.org/wiki/Microformats
  • http://www.ilovejackdaniels.com/cheat-sheets/microformats-cheat-sheet/
  • http://www.xml.com/pub/a/2005/03/23/deviant.html
  • http://www.digital-web.com/articles/microformats_primer/
  • http://microformats.org/wiki/hcard-authoring
  • Wordpress Microformat Plugin - http://bloghelper.is-there.net/using-microformats-in-wordpress/
  • Microformat Icons - http://www.factorycity.net/projects/microformats-icons/

Twitter Updates for 2008-04-29

  • Got a little more organized yesterday… got the website updated with news and what not. Time to get travel reimbursments! #
  • Ron Paul is still in the presidential race. Did you know that? I haven’t heard anything about him EVER. #
  • at safeway gettin’ some veggies. they got a good amount of OG now. Nice… #

Powered by Twitter Tools.

Twitter Updates for 2008-04-28

  • Happy Monday morning all! Back at worked, jazzed to read over my web2.0expo notes and start implementing some thoughts, ideas and techniques #
  • FreeRice,FreeRice,FreeRice,FreeRice,FreeRice…. http://freerice.com/ #

Powered by Twitter Tools.

Twitter Updates for 2008-04-27

  • building stairs on my house is THE hardest thing a man can do to improve his place. Prove me wrong. #

Powered by Twitter Tools.

Twitter Updates for 2008-04-26

  • overall impression of web2.0expo is good. i will look for key speakers for next year to decide if i’ll go or not. #
  • i’m looking 4 more on usability and how to create functional easy to use and enjoy interactive websites. #

Powered by Twitter Tools.

Twitter Updates for 2008-04-25

  • having some dinner with an entrepreneur. #
  • last day of the conference. i could keep learning about the new developments in the web for some time. good stuff coming #
  • i’m at the keynote morning speakers gathering now. they could really step it up and serve Breve’ and Latte’ to us all. #
  • then again there’d be a line out the door for that. I’m looking fwd to "what google know’s about spam" #
  • @timoreilly How can this web2.0 help out or even work within the government? #
  • the network is the computer. data is the currency. #
  • fake steve job’s is crazy, but sees the future of media right i think. #
  • this SEO talk is really great! Rebecca Murtagh should have more longer talks to really get into the gears of SEO. #
  • ahhh. the greek salad again. i like feta. there should be a couple spots that are hard wired in here. #
  • 45min to "even faster websites" then i havn’t decided on either "the how of oauth" or "the pwr of online communities…" #
  • i wasn’t around to win the macbook air. some other luck person gets to enjoy it. i’m gonna look into it when i get home. #
  • big up the web2.0expo’s strive for low enviro impact! compostable cups and recycled carpet… etc #
  • i 1st designed websites on a laptop… now i can’t stand the small screen and photoshop together. i need the 22" of luv #
  • so far thursday’s workshops were the worst. i’d say today, friday, so far has been the best. Steve Souders is starting. #
  • @kingsley2 how does dell use the internal blog data? do they worry about time waste? #
  • @kingsley2 thanks for asking the ques! #
  • great talk on the power of communities. checkout: http://kiva.org it’s a microloan site. #

Powered by Twitter Tools.

Twitter Updates for 2008-04-24

  • live mesh from microsoft looks like a good colaboation tool 4 computer illiterate family members. #
  • Clay Shirky is great! this guys funny and full of great info #
  • a tv shipped without a mouse, is shipped broke. #
  • at Sanraku sushi. nice place. clean. good waiters/hostess. #
  • the whole time I was twittering about Tim O’Reilly I was saying Bill O’Reilly. Woops… #
  • if u are down near Moscone West, drop by the Organic Coffee co. and get something to eat or drink. fresh juice and food. #
  • Marc Andreessen is super great. this guy is smart! #
  • http://ning.com #
  • http://www.opensocial.com #
  • jonathan zittrain is good stuff. U.S.A. 2.0… the constitution. #
  • open development will allow for more innovation through the web. Fennic - firerox for mobile? #
  • Mitchell Baker of firefox gave a convincing speech on open source. #
  • http://current.com #
  • designing for a web of data is up next. #
  • tom coates is great. really explaining why sharing data and having ur system open is crucial for growth. #
  • dopplr.com #
  • there are just some crazy people out there that can’t get jobs and can’t function well within society. #
  • had the veggie lunch again… i think the 1st day had the best. walked up to 7th n looped back through Yerba Buena park. #
  • this is more of a usability talk. UI and application design thoughts. #
  • yeap, this one’s good for developers and their usability questions. #
  • next! open platforms in web2.0. i hope this one introduces new ideas. today’s keynote: Marc A. has been the highlitght. #
  • so far i have heard in a nutshell… that simple interactions, with open platforms over a varity #
  • …over a variety of sevices need to be connected in order for web2.0 to be real effective. #

Powered by Twitter Tools.

Web 2.0 Expo

This week I am at the Web 2.0 Expo in San Francisco at Moscone Center West. It’s been a great workshop so far. My favorite workshops so far have been:

  • Mobile Web 2.0
  • Bringing Web 2.0 to your Enterprise
  • Best Kept Secrets in SEO
  • Tim O’Reilly’s Keynote Speech

Web 2 Expo LogoIt’s only Wednesday right now, so I am looking forward to the next couple days. Listening to these top innovators in our field has really brought some great ideas to our web and what is happening in the next few years. I think the social web is really growing. The mobile web is where we will be in the next couple years. Having the ability to have web applications on the handset will be the future. I am excited to implement some of these new best practices to websites that we have in under the 3wpros banner.

Twitter Updates for 2008-04-23

  • there is way more people here today than yesterday. #
  • gettin’ some lunch right now. #
  • at the coghead booth. got some mints at the photobucket display… and checked out quickbase. #
  • checking out the instructables.com booth #
  • best keep secrets in seo starts in 10 minute. i’m looking fwd to this one. and the next called web psycology. #
  • learing a bunch of new things in the seo workshop. go! go! #
  • the SEO workshop was way to quick. i need a whole day of that alone! Stephan Spencer is excelent! #
  • now for web site psycology! #
  • anyone know of a good sushi place near mascone west? #
  • people come and go in these shorter talks so much. u could miss the goods if u leave early! #
  • website psycology talk was good, not enough of this is what is needed and this is how u do it. #
  • 4/24/08 i win an mac air. #
  • time for the keynote speakers. i’m cravin’ some sushi tonight. i need somthing within walking distance of moscone west. #
  • Great job on the recycling web2.0expo gang1 #
  • Bill O’Reilly is giving a great speach. #
  • great presentatio by Bill O. do it! do it! #

Powered by Twitter Tools.

5 Essential Social Networking FireFox Plugins

Here are 5 plugins for FireFox that I think are essential to your social networking network online.

Twitter Bar
“The twitterbar extension allows you to post to twitter from the firefox addressbar. A small unobtrusive grey icon sits to the right of your addressbar, clicking on it will post your tweet, mouseover will tell you how many characters you have left. You can also post by typing ‘ –post’ or hit the grey arrow when visiting a webpage to carry out a URL tweet (i.e it adds ‘Currently Browsing: ‘ in front of the url). Options for the extension include safe/secure mode, open twitter in new tab after posting and the ability to change the URL tweet ‘Currently browsing’ text.”

Online Bookmark Manager
“This extension allows you to access all your personal bookmarks online. If you save or edit an online bookmark that change is instantly made to all your other computers. No synchronization is required because you are actually using the bookmarks in real time. Perfect for those that use multiple computers at home, for work, traveling, at a friends house, or Internet cafe. You will never lose or misplace a bookmark as they will be saved safely online.”

Shareaholic
“Found something awesome online and can’t wait to pass it on? Tired of copying and pasting endless URLs? Shareaholic allows you to share, bookmark and e-mail web pages quickly without leaving your browser. Supported services: * digg * del.icio.us * facebook * friendfeed * google bookmarks * magnolia * mixx * reddit * simpy * stumbleupon * truemors * tumblr * twitter * bzzster!”

Gift Wisdom
“GiftWisdom Social GiftRegistry for the holidays for those expensive gifts. PUT AN END TO RE-GIFTING FROM NOW ON! We launched this site by connecting popular online features such as social bookmarking add-on, online payments, paypal, and universal wishlists to create a site thats lets friends come together to give meaningfully. With Social networking all the rage and upcoming gifting season, it would be good to publish this add-on. The idea is to make expensive gifting possible by letting friends pool cash easily and put an end to re-gifting. Save the environment a bit! It works with your Paypal account. Use GiftWisdom even at those times when you need to give something to a colleague and hate having to run cubicle to cubicle reminding folks to payup. Now all that can happen at GiftWisdom from your individual computers!.”

RatePoint
“People Powered Ratings (sm) - Rate and connect with like-minded people… Submit and view ratings and comments without leaving the site right from within your browser window and on the ratepoint.com site.”