Archive for Category ‘HTML‘

 
 

Book 8: Microformats – Empowering Your Markup for Web 2.0

Don’t look here for books 6 and 7; I’ve very kindly decided to skip reviews of Harry Potter books. Instead we’re skipping straight to book 8 which more on target.

Microformats: Empowering Your Markup for Web 2.0

Microformats CoverHaven’t heard much about Microformats? They are relatively new to the web, but use existing practices just marked up in a uniform way to add new meaning. They’ve been getting a lot of attention lately with adoption at Yahoo, Technorati, LinkedIn, Upcoming, Flickr, Last.fm, Eventful and much more. By marking up their pages in this way, they become more easily parseable by others’ application. For example, Technorati recently created a Microformats search which is still gaining traction. It does work though, as as a serch for ColdFusion reviews shows. :)

The entire purpose of microformats is that they use existing technology (css, html, xhtml) to create semantic, machine parseable information. What’s that mean? It means creating something that’s straightforward to a developer, but follows a strict enough standard that it can be intepreted in a predictable manner as well. To make things a little more clear, how about we start off with an example, XHTML Friends Network. If you take a look at the code for the blogroll on my front page, you’ll see a sample link looks like this:

<a href="http://www.brianlegros.com/blog/" rel="friend met co-worker">Brian LeGros</a>

The relation between me and Brian LeGros is that of “friend met co-worker”, which is straightforward enough in it’s meaning. There is actually a special set of relationships that are available in this context, although they are very broad. They cover relationships such as friend/acquaintance, co-resident/neighbor, child/parent/sibling, muse/crush/date and me, to reference another site about you (would usually be used for myspace/facebook links for example). Since the XHTML standard has nothing against using multiple, space separated relationships, this is a very clean and easy way to markup a set of links, and one that WordPress helps out with.

Reading through Microformats there were more than a few times when I put the book down and decided to implement them then and there. That’s one of the most exciting things about this book — it’s a call to action, and an action anyone who has a web presence can make.

It starts out with very simple microformats such as XFN (short for XHTML Friends Network), and other link-based microformats. Two of these were immediately useful to me — rel=”nofollow” and the VoteLinks Microformat.

You’ve probably heard about the rel-nofollow microformat without even knowing it was one. The idea is that you add

rel="nofollow"

to any link and that link will not be traveled by search engines. Also, that link will not gain pagerank from the link (and your sites pagerank will not be used up on the link). rel-nofollow was introduced by Google and has become the standard for all links that are made within blog comments.

Another one along the same lines is Votelinks which has a few more options. The idea is that you can markup a link which serves as a vote for, a vote against or a null vote for the related link using the “rev” attribute of a link. The possibilities are:

rev="vote-for"
rev="vote-against"
rev="vote-abstain"

Now when you see one of those sensationalist articles about ColdFusion dying, you can just mark it up accordingly.

<a href="http://www.softwaredeveloper.com/features/ghosts-in-machine-071207" rel="nofollow" rev="vote-against">Ghosts in the Machine: 12 Coding Languages That Never Took Off</a>

Microformats goes into these formats at much more detail, as well as providing some examples on styling them (a[rev="vote-against"]) for one. By starting with these extremely easy to implement microformats, this book gets your ideas rolling.

Some of the more complex microformats, such as hCard are built line by line from the simpliest parts up until you have a full hcard. This approach is used throughout the book and works well. hCard is also one of the best examples in the book, with a full walkthrough of how an hCard might be marked up.

You might be thinking microformats are just a matter of adding a little markup and that’s it, but it’s actually quite a bit more complicated than that. For the most part, microformats are marked up by adding classes with specific names to any element. For instance, take hCalendar; a microformat used to markup events. It’s obvious an event needs a title, a date, maybe location, description — and that’s just for starters. What if the event spans multiple days? Who’s the coordinator? Where is the event located? Well when you get into questions like this you start nesting multiple microformats to make full hCalendar. There is hCard microformat to communicate the coordinator (or any person), a whole location markup with geo coordinates, and a way of providing the start date and end date. These little pieces can be reused in other microformats as well.

That’s really what this book helps with — getting a grasp on the building blocks. I don’t see myself wanting to memorize the individual pieces of most microformats, but after reading this you should have an idea of when they can be used with a handy reference for finding out more. As far as Microformats books go, it’s the best one out there — it’s also the only one listed or planned for release.

One thing I would’ve liked to see is a little more styling of some of the microformats. Microformats does style a few of the examples but not all. At the end there are two “case study” chapters going into detail on how Cork’d and Yahoo have used microformats. These provide full styling examples as well. Cork’d was co-created by Dan Cederholm, author of Bulletproof Web Design, and reading his writings has been one of the best ways of helping me learn best practices.

I’d suggest microformats as a subject anyone in web development could easily get the hang of in almost no time at all. If you use ColdFusion, you can always try the Microformats project on Riaforge to help get started. This book is a great resource though, and I’d highly recommend it to anyone interested in learning more.

My rating: 4.5 stars
****1/2

Make Your Blog Easily Readable in 1 Hour

There’s one thing that usually bugs when trying to find new blogs to read and that’s a lack of direction. A lot of the time the user interfaces we take for granted in the often read blogs are far from utilized elsewhere (I admit I’m guilty of some things as well). Do you ever go to a new site only to have no idea what the main focus of the blog is about? Or perhaps it’s so varied that you can’t tell what their specialties are and what they’re just getting into? Or worse yet most posts stray from topic to topic with seemingly no real glue holding them together. Well, before applying over at 9 Rules getting as many of the easy things out of the way as possible was one of my main goals. These are also the kind of things that help with search engine optimization as well. These aren’t hard things to do, but they’re often overlooked.

Title and Subtitle

The title of a site won’t matter much. If you’re hardcore SEO this is more important of course, but for humans it can be made up words, gibberish, anything — as long as it’s unique. The subtitle though helps out almost as much anyways, and that’s where you can put the real focus of your site in the forefront.

Have an Intro

Of course I don’t mean a flash intro, but a quick intro on the side of the homepage describing yourself is a great way to go for single person blogs. Often for more community driven blogs you can still have an intro about the site as well. This can usually link into an about page with more details..

About Page

Easiest thing in the world. Not a bad idea to post a picture either if you have one that’s slightly above decent. This helps bring in some credibility and can clarify background on where you’re coming from.

Tag Cloud / Category List or Cloud

Being able to see what you’re most interested in is never easier than with a sized tag cloud or a category cloud. A category listing with numbers is also a great help. Listing every single tag can backfire though if you’ve heavily tagged your posts.

Related Posts

Showing related posts not only gives the users a few on topic suggestions, but it also helps build credibility that you’ve thought about the topic a little more. For someone new to your site this helps them read more about whatever brought them there in the first place.

SES URLs

If you’re using WordPress, this is as easy as changing a setting. This is one feature that seems to be becoming increasingly important lately. There’s something more professional in a URL that ends with a path rather than a string of text as parameters. This isn’t a make or break item, but if your blogging software supports it, why not use it?

Keep URLs the same

Once you get with something, stick with it. On this blog I’ve been changing the layout on a weekly basis trying to find something that works and that I can elaborate on. In that time, however, all the URLs and the main content on them remained the same.

Sitemap

Recently Yahoo, Google and MSN all decided to use the same sitemap format. There’s also a WordPress plugin to do this for you automatically. This is one thing you can setup and forget completely about. If you’re curious though, they look like my sitemap.

Easy on the Ads

If there’s one thing I can’t stand is a blog loaded down with ads. I can understand wanting to pay for hosting, but I doubt most people are making enough on ads to make things worth it. The techniques used to make the most money from ads probably aren’t the tactics you want associated with you anyways (unless you’re running a “making money from ads” blog ;) . There are much nicer looking ways of making money from ads anyways, such as Text Link Ads, or referring people to a webhost that pays referrals such as Dreamhost or just linking to products on amazon occasionally with your referral code. I’m sure there comes a time when even Joel on Software and Coding Horror will have ads, but they’ve managed to do pretty well without them.

Post, Post, Post!

Regardless of everything else, content is king. If you’re an amazing writer with a barebones site (as with those last two links), people will come. Just writing about what you know and writing about what you learn is enough for most people. If you have something to say, don’t feel shy about saying it.

There are books and books on search engine optimization you can read, but unless you’re making a career out of it one may do the job. So many of the things that make your site more usable for a person also help with SEO anyways. Almost everything on here can be setup and then completely forgotten about, leaving you to just worry about writing.

Using hReview with WordPress

Back in January I mentioned a hReview plugin for WordPress that I’ve been using primarily for book reviews. But what exactly is hReview? According to Microformats.org:

hReview is a simple, open, distributed format, suitable for embedding reviews (of products, services, businesses, events, etc.) in (X)HTML, Atom, RSS, and arbitrary XML. hReview is one of several microformats open standards.

hReview example from Corkd To put it in english, it’s a way of using semantic XHTML to write a review. The prime example is Cork’d a wine review site developed by Dan Cederholm. Take the sample code on the left. It’s from a review on Cork’d and illustrates the structure of an hReview (and also a vcard if you’re curious). The basics of it are shockingly simple and entirely based on the css classes. Almost all the class declarations in the sample code are hReview related and then then marked up via CSS to look stylish.

The benefits of hReview, as with OpenID and other microformats are yet to be fully realized. Technorati has taken a leading role in some Microformats as well as being one of the first to start a hReview, hCalendar and hCard search over at Kitchen.technorati.com. I can confirm it’s working with a search for ColdFusion turning up two of the books I recently reviewed. As a publisher or as consumer having a standard for this kind of thing is a godsend. If you’re wanting to learn a little more about microformats, Jason Allsopp recently released a book on the subject: Microformats: Empowering Your Markup for Web 2.0. There’s two very comprehensive reviews on Amazon, as well as more evangelizing on Allsopp’s site. If you’re writing reviews, give hReview a try!