Posted on: May 27th, 2008 by Webmaster
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
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/
Tags: easy, Microformats, tutorial
Posted in Accessibility, Microformats | No Comments »
Posted on: April 29th, 2008 by Jason
Posted in Blogging | No Comments »
Posted on: April 28th, 2008 by Jason
Posted in Blogging | No Comments »
Posted on: April 27th, 2008 by Jason
Posted in Blogging | No Comments »
Posted on: April 26th, 2008 by Jason
Posted in Blogging | No Comments »
Posted on: April 25th, 2008 by Jason
Posted in Blogging | No Comments »
Posted on: April 24th, 2008 by Jason
Posted in Blogging | No Comments »
Posted on: April 24th, 2008 by Jason
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
It’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.
Tags: mobile, web, web 2.0 expo
Posted in Conferences / Workshops | No Comments »
Posted on: April 23rd, 2008 by Jason
Posted in Blogging | No Comments »
Posted on: April 16th, 2008 by Webmaster
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.”
Tags: essential, firefox, networking, plugins, social
Posted in Headliners | No Comments »