===================================================================== DevWebProAU- Implementing Micro Formats On Your Site June 26, 2007 http://www.devwebproau.com ********************************************************************* ********************************************************************* Increase Your Sales With Speaking Animated Characters For Your Site SitePal's animated speaking characters enable you to deliver your messaging using both site and sound, which reinforces your messaging and establishes trust. Try the Free Demo here: http://aj.600z.com/aj/30859/0/cc?z=1&b=30440&c=30853 ********************************************************************* ********************************************************************* Implementing Micro Formats On Your Site Mads Kristensen | Expert Author Micro formats have existed for some years now, but it hasn't been useful for anything until now. If you don't know what micro formats are, then here is an explanation from Wikipedia: A Microformat (sometimes abbreviated ?F or uF) is a way of adding simple semantic meaning to human-readable content which is otherwise, from a machine's point of view, just plain text. They allow data items such as events, contact details or locations, on HTML (or XHTML) web pages, to be meaningfully detected and the information in them to be extracted by software, and indexed, searched for, saved or cross-referenced, so that it can be reused or combined. The reason why it has become useful is because of browser support. Both Firefox 3 and Internet Explorer 8 will support micro formats natively. If you cannot wait for the next version of Firefox or IE, then you can download the Operator micro format extension for Firefox and start testing your site. I have done that and applied some micro formats to my blog and now I'll give you some examples on how to do it easily. The nice thing about micro formats is that you don't have to change your layout and stylesheet because it is completely invisible to the human eye - it only exist in the (X)HTML for machines to read. Let's take a look at three micro formats and how to implement them. hCard The hCard micro format is a XHTML representation of the vCard format that applications such as Outlook and iCal understands. By using hCard you can give your visitors an easy way to retrieve and store your contact information. Here is a screenshot of the hCard implementation in the Operator extension for Firefox. Article image here: http://www.devwebproau.com/0626img.html It is implemented only by the use of adding classes to HTML tags. Here is one similar to the one I use on this blog.
Mads Kristensen
Lead Developer at Traceworks and long time .NET slave.
I live in Copenhagen, Denmark.
Remember that the vcard class name must be set in the surrounding container. There are many other class names that is supported by the hCard specifications and you can find a list of them here. ********************************************************************* ********************************************************************* You need to make a conference call, and you need it now. Whether you are a Fortune 500 company or a small business just getting on your feet, you need to meet when and where it’s convenient for you. Set Up Your Account For Free And Start Conferencing Today! Try ConferenceCall.com Now! http://aj.600z.com/aj/30698/0/cc?z=1&b=30632&c=30697 ********************************************************************* ********************************************************************* xFolk The xFolk micro format is for social bookmarking and can be used to let people add your posts and articles to services like del.icio.us, digg and dotnetkicks. That means you no longer need the social bookmarking links and icons on each blog post, because the browser can take care of it for the user. This is how my blog looks in the Operator extension. Article image here: http://www.devwebproau.com/0626imgb.html xFolk is also one of the simplest micro format to apply to a website and it also just uses classes. Before I added xFolk to my blog, each post looked liked this in the HTML:

Title of the post

The content of the post

And here it is after.

Title of the post

The content of the post

As you can see, I only added two additional classes - xfolkentry and taggedlink - to the existing mark-up. The xFolk format does support additional classes to be used, but I think these two are enough for most websites. You can find the specifications here. Rel-Tag The Rel-Tag micro format is used to provide keywords to content in order to categorize it. If you have a blog post called "Why dogs are better than cats", then you could provide two tags to that post - one called dog and one called cat. They should then point to a page of all your blog posts that has been tagged with the dog and cat tag respectively. It's very similar to categories, but much more granular. To make the dog and cat link into a tag, you simple add the rel-attribute to the link: . The rel attribute is supported by the HTML and XHTML specifications so don't worry about breaking your standards compliant webpage. Where the hCard and xFolk micro format can be applied to existing mark-up easily, you might have to change more to add tags. That's because the Rel-Tag does not use the text in the link tag but the href instead. It sees a tag as everything that is to the right of the last forward slash. That means that the link above has a tag called dog.aspx instead of Dog. If you have control over your webserver and can setup the IIS to map all extensions to the ASP.NET engine, you can rewrite the URL so that the link can point to /tag/dog/ and thereby avoid the .aspx in the URL. However, if your website is hosted you probably don't have that option before IIS 7 will be released with Longhorn Server. If you have to use the .aspx extension you still have a way to make it work. The prettiest is to use the PathInfo part of the URL which looks like this /tag.aspx/dog. The only problem is that when you use the PathInfo you also break the relative root of your website. You can no longer use a link like "~/" to return to your home page because it will send you to /tag.aspx/ instead. That's why I have implemented the other way on my blog. I use a URL parameter instead which isn't very pretty, but it does the trick. Now my tags have this URL /tag.aspx?tag=/dog. The important part is to remember to add a forward slash before the name of the tag. Here is how the Operator extension sees my tags: Article image here: http://www.devwebproau.com/0626imgc.html This was only an introduction to three of the many micro formats you can use. Other important micro formats are XFN, hCalendar and rel-nofollow along with a few more. As a side note I can inform you that BlogEngine.NET 1.1 will fully support hCard, xFolk, Rel-Tag, XFN and rel-nofollow. For article links go here: http://www.devwebproau.com/0626links.html ********************************************************************* ********************************************************************* About the Author: Mads Kristensen currently works as a Senior Developer at Traceworks located in Copenhagen, Denmark. Mads graduated from Copenhagen Technical Academy with a multimedia degree in 2003, but has been a professional developer since 2000. His main focus is on ASP.NET but is responsible for Winforms, Windows- and web services in his daily work as well. A true .NET developer with great passion for the simple solution. http://www.madskristensen.dk/ ********************************************************************* ********************************************************************* For ad details and prices... mailto:susan@ientry.com ********************************************************************* Signup for free newsletters: http://www.ientry.com/page/newsletters ********************************************************************* --- DevWebProAU is an iEntry.com publication --- http://www.iEntry.com iEntry, Inc. 2549 Richmond Rd Second Floor Lexington, KY 40509 *********************************************************************