Modifying an hReview microformat to include HTML from schema.org

Google, Yahoo and Bing announced schema.org yesterday.

Many sites are generated from structured data, which is often stored in databases. When this data is formatted into HTML, it becomes very difficult to recover the original structured data. Many applications, especially search engines, can benefit greatly from direct access to this structured data. On-page markup enables search engines to understand the information on web pages and provide richer search results in order to make it easier for users to find relevant information on the web. Markup can also enable new tools and applications that make use of the structure.

A shared markup vocabulary makes easier for webmasters to decide on a markup schema and get the maximum benefit for their efforts. So, in the spirit of sitemaps.org, Bing, Google and Yahoo! have come together to provide a shared collection of schemas that webmasters can use.

I immediately began to think about how this would apply to my frequently used hReview microformat. I looked at the schema for books, and tried to see how I could incorporate that into a book review if I continue to use the hReview microformat to do book reviews.

Here’s what I came up with. I’d love comments. The additions to the hReview from the book schema are in red.

<div class="hreview"
itemscope itemtype="http://schema.org/Book">
<span style="display:none">product</span>
<p><img class="photo" src="image.jpg" alt="alt here"></p>
<div class="description" itemprop="reviews">
<p><a class="fn url" itemprop="name url" href="link here"
title="affiliate link to Amazon"><cite>book title
here</cite></a>
by <span itemprop="author">author's name</span> is from
 <span itemprop="publisher">publisher's
name</span>, <span itemprop="datePublished">date
here</span>.
Text of the review here.</p>
<p>Text of the review here.</p>
<p>Text of the review here.</p>
<p class="summary">Summary: text of the summary</p>
<p><span class="reviewer vcard">A review by
<a href="http://www.webteacher.ws/" rel="me">Virginia
DeBolt</a></span> of <cite itemprop="name">
book title here</cite>
<span class="rating" itemprop="rating">
(rating: n stars)</span></span></p>
</div>
</div>

What I’m wondering.

  1. Is the hReview microformat even needed since there is so much overlap between the book schema and the hReview microformat. It’s redundant. Should reviewers switch to the schema and abandon the microformat?
  2. I’m wondering about putting an itemprop in the cite element, since most of the schema HTML is added with span tags. It seems more semantic to me.

What do you think? Are schemas going to replace microformats completely?

Foundational HTML talk from Emily Lewis

Get to know Emily Lewis, who will be on a panel at SXSW Interactive this year. This is a recent talk she gave to a local tech group called Webuquerque. She talks about the basics of good markup, semantics, and new concepts in markup. It’s about an hour long.

I think it would make a good resource or assignment for web education students.

A text summary and the slide deck are available on the Webuquerque site.

Other speakers and talks from Webuquerque meetings are available on Vimeo.

Useful Links: PowerPoint, Microformats in HTML5, dConstruct audio

PowerPoint Accessibilty at WebAIM tells you how to create an accessible PowerPoint presentation. The news for Mac users is not good.

Extending HTML5 – Microformats at HTML5 Doctor is a must read and explains the “wrinkles.”

As most microformats use only class and/or rel — basic parts of HTML that remain unchanged in HTML5 — these microformats are completely fine in HTML5. Yay! However there are a few wrinkles to keep us on our toes.

While you’re there, be sure to read the comments, too. They are important.

dConstruct 2010 is Jeremy Keith’s report on the recent conference. Included are links to the talks from the event and links to other bloggers reports on the event.

Useful Links: Microformats, HTML5 Mess, gender issues, accessibility conference, CSS spirites, Twitter in class

Microformats Workshop is the slides by Emily Lewis from the Workshop Summits event. Outstanding presentation, excellent slides.

SitePoint Podcast #44: HTML5 is a (Beautiful) Mess is a discussion about HTML5 and related issues among Sitepoint’s Kevin Yank, Opera Software’s Bruce Lawson, author Ian Lloyd, and Kyle Weems  of the CSSquirrel web comic.

whose voice do you hear? gender issues and success from apophenia is a response to Clay Shirky’s Rant About Women. Read the rant and all the comments before you read what apophenia said.

California Web Accessibility Conference in February is a Knowbility event. That means it will provide you with the best possible accessibility training available anywhere.

CSS Sprites is an online app that will take your images and generate a sprite and the code to make it work. Nice time saver.

Using Twitter to Facilitate Classroom Discussion is about a history class. How could it be used in a web dev or web design class?

Should your blog have an hCard?

What’s an hCard, you ask? It’s a digital version of a business card. You put it on your blog or website and it provides your name, your contact information and other information you want people to know. Because it’s digital, it can be exported from your web page to an address book and synched to a mobile phone. Google and Yahoo! both index information in hCards, so it gives you some search engine clout as well as providing portable contact information to your blog’s users.

You can provide only your name in an hCard, or you can give a physical address and phone number. If you are running a brick and mortar business, letting your customers have your phone number and address on their mobile phones might be a smart move. If you aren’t selling something at a physical location, you might just want to include your name, perhaps your URLs or an email contact.

Before you learn how to make an hCard, look at some in action. hCards are a particular type of HTML code called a microformat. A Blog Not Limited is the home of the queen of microformats, Emily Lewis. Scroll to the bottom of her page and look at that material where is says, “The Coolest Person I Know.” That information, which includes Emily’s name, email, and location is wrapped up in HTML behind the scenes that makes it an hCard. The hCard can be exported from her web page and saved as a contact. Emily wrote a book about microformats—Microformats Made Simple—and numerous blog posts on the topic. Here’s her post describing everything you’d ever need to know about hCard.

Here’s another blog with an hCard: New England Living. This blog uses the hCard in the footer of each post, and identifies only the post author’s full name as Alyson (New England Living). This isn’t the only blog I’ve seen with an hCard microformat in the post footers. It makes sense in each post footer if the blog has more than one author. If your blog has a single author, I think it would be much better placed on the page’s footer for each page of the blog. I have an hCard in the footer of my blog that simply provides my real name and a link to my sadly neglected site at vdebolt.com

Look at New Parent’s About Us page. Here is all the business information you would put in a full-blown hCard, but it isn’t in one. This is a place where an hCard would be very valuable. Or here, at the Austin Real Estate News and Advice Blog. The realtor’s name and phone number is given right there in the blog’s header, but there’s no downloadable hCard with the info that can be synched with a mobile phone. A realtor’s blog is a perfect spot for an hCard.

Ready to make one? The easiest way is to go to Microformats.org hCard Creator and fill in the form. As you add your information to the form fields, the HTML is generated beside it. Only fill in the fields for the information you want to share. Copy and paste the HTML into your blog in an appropriate place. An appropriate place might be the page footer or an About page. (Feel free to leave out that last line about the hCard Creator when you use the code.)

When you examine the code, you see that most of the magic is done by using various classes to define your data. You don’t really need to know why the microformat class is called “vcard” instead of “hcard,” but if you are interested in the reason, the article I mentioned by Emily Lewis tells you all about it. If you are geeky enough to make your own hCard by hand instead of using the hCard Creator, Emily’s article is the place to learn all the details.

How do you find and download hCards that are on web pages? The easiest way is to use the Operator Add-on in Firefox. When an hCard (or several other types of microformats) are on a web page, the Operator toolbar lets you know and has a menu option to view or export the information.

If you visit this page at A Blog Not Limited with the Operator Toolbar working in Firefox, you see three contacts.

export contacts menu

One or all of the contacts can be exported to your address book and synched to your mobile phone.

The Operator toolbar also shows other microformats on the page. The image above shows: Events(2). hEvents can be exported, too, and added to your calendar. Microformats have many handy uses besides contact information via hCards.

If you are running a business with your blog, I think you need an hCard. If you are using your blog for other reasons, you need to decide for yourself how important having your contact information in an hCard format is to you.

Cross posted at BlogHer.

Useful Links: Intro to HTML5, Univ. Web survey, paid to tweet

Introduction to HTML5, microformats and CSS3 is a screencast showing the building of a web page in HTML5.

State of the University Web Department Survey results are available at eduGuru. The survey included all sorts of interesting questions such as university size, CMS used, technology used, department size, decision makers, frequency of redesign and more.

What do you think of A Friend’s Tweet Could be an Ad? I find the idea offensive and have started to unfollow people who use their twitter stream to collect ad revenue. You may have ads on your blog, which is fine: the choice whether to read the ads is mine. But when an ad comes through your twitter stream like it’s normal content it’s no longer my choice. Web users have developed visual skills to filter past ads on web pages. There’s no visual cue on Twitter that would let you scan past a paid tweet. It’s deceptive.

When should we teach microformats?

Since I read Microformats Made Simple I keep toying with this question: when should we teach microformats?

Odd that I didn’t think about this when I read Microformats: Empowering Your Markup for Web 2.0 or when I recommended a couple of articles by John Allsopp in this post.

My only excuse is that I was concerned with learning to use microformats myself for a period, but by the time I read Microformats Made Simple I was ready to think about sharing the information.

Here’s what I’m wondering. Do microformats have a place in a standards-based curriculum like the InterAct Curriculum? When done right, microformats use both valid and semantic HTML. Should they be introduced as a best practice when working the way through a web design 101 or web development 101 or basic HTML class?

For example, when a student learns to create a hyperlink, should the rel attribute be included with that instruction as a standard practice?

If I taught a student how to make a link to their home page, should I teach them to do this:

<a href="http://www.webteacher.ws/" rel="me">Web Teacher</a>

or this?

<a href="http://www.webteacher.ws/">Web Teacher</a>

Or perhaps the web design 101 courses need a module or a couple of lectures or a single lecture/lab on microformats in one concentrated dose? When should a student learn to make an hCard? Or to use any other microformat?

What do you think?