Hicks

You’re reading all articles on The Hickensian tagged 'microformats'

hReview in Textpattern

That last post was a little test in using the hReview Microformat in Textpattern. I think it worked!

One of Textpattern’s great features is the ability to use a different ‘form’ (the template that specifies how posts are marked up) that each post uses. With this in mind, all you need to do is create a different article form called ‘hReview’ and specify that any time you do a review on a Textpattern blog.

I’ll come to the actual markup of the form in a moment, but first I just want to show you how I’ve used the Content > Write tab to write the review.

In this example, all I added were 2 custom fields (via Admin > Preferences > Advanced), ‘URL’ and ‘Rating’, but you may want to add more for fields such ‘Item Type’.

Then I entered the review as follows:

TXP Field name Microformat Class TXP Tag
Title Item <txp:title />
Excerpt Summary <txp:excerpt />
Body Description <txp:body />
Article Image* Photo <txp:article image class="photo" />
Rating (custom field) ** Rating <txp:custom_field name="Rating" />
URL (custom field) URL <txp:custom_field name="URL" />

*The Textpattern ID of the image

**Entered as a number from 1-5

I then chose ‘hReview’ from the ‘Override form’ dropdown before publishing. However, you can’t choose that until you create the form, so let’s get down to the nitty gritty! Create a new form called ‘hReview’, choose ‘article’ from the type dropdown, and add the following code:


<div class="hreview">
  <h2 class="item"><txp:permlink class="fn"><txp:title /></txp:permlink></h2>
  <p><abbr class="dtreviewed" title="<txp:posted format="%Y%m%d" />"><txp:posted format="%B %e, %Y" / ></abbr>
  <span class="reviewer vcard">  by 
    <span class="fn"><txp:author /></span>
  </span>
  <txp:if_custom_field name="URL">
  	<p><strong>Website:</strong> <a href="<txp:custom_field name="URL" />"  class="fn url" rel="bookmark"><txp:custom_field name="URL" /></a></p>
  </txp:if_custom_field>
   <div class="summary">
    <txp:excerpt />
   </div>
	<div class="description">
    <p>Rating: <span title="<txp:custom_field name="Rating" />" class="rating"> <txp:custom_field name="Rating" /></span> out of 5</p>
	<txp:article_image wraptag="p" class="photo" />
	<txp:body/> 	
	</div>
</div>

A lot of this is self-explanatory. The review description is output wherever you put <txp:body />, the item name is output wherever you put <txp:title />. There are a few places where it’s probably worth talking through what’s going on.

Date

The txp tag @23.01.07 has an attribute “format” which allows you to customise the date using PHP’s strftime strings:

<abbr class="dtreviewed" title="<txp:posted format="%Y%m%d" />"><txp:posted format="%B %e" />, <txp:posted format="%Y" />

Doing this uses the published time information and displays in ‘human readable’ form:

< txp:posted format="%B %e, %Y" / >

as well as ISO for the title attribute:

<txp:posted format="%Y%m%d" />">

Handy if you also want to use Textpattern to display events in hCalendar format (which I’ll cover in another post).

Rating

Whatever number is entered into the Rating field is output in the title attribute as well as the text:

<p>Rating: <span title="<txp:custom_field name="Rating" />" class="rating"> <txp:custom_field name="Rating" /></span> out of 5</p>

There are other possibilities here, such as: class="rating star<txp:custom_field name="Rating" />" and then using image replacement to style the span with the resulting class name (star1, star2 etc.). The hReview creator suggests using HTML entities to display a star rating, for which we’d need to use the conditional tag <txp:if_custom_field>, e.g:

<txp:if_custom_field name="Rating" val="1">&#x2605;&#x2606;&#x2606;&#x2606;&#x2606;</txp:if_custom_field>

This is what I used on the first review, but as Mr Oxton pointed out, this isn’t very ‘human readable’ to things like screenreaders, so I intend to implement the image replacement/class method above.

It’s a wee bit of sweat to set it up, but you have, you’ve got a form that can be called up anytime you want a review on your site to be marked up as a hReview!

More Microformats Highlighting

As well as some tweaks and improvements to my first attempt, I’ve added highlighting of XFN attributes to the list. I’m too lazy to do the XFN thing, but others seem to like it. Maybe one day.

It works by revealing the relationships when hovering over the name, like this (again, taken from adactio)

Animation of XFN highlighting

There is a caveat. This is only CSS, and apart from having the potential to mess up some site layouts, can only work when the author has added a class of “n” or “fn” to the link (as used in hCard). Otherwise, it would go about showing all sorts of rel attributes that wouldn’t be quite so interesting (such as ‘alternate’).

After trying out all sorts of complicated styling, I’ve decided to keep this all as simple as I can bear, so as not to mess things up too much. Do leave feedback if there is anything you want adding! In particular, I’m looking for feedback on whether to use ‘vCard’, ‘Contact’, just an address book icon, or just a microformats icon. What would be the most useful and understandable?

Highlight Microformats with CSS

Those that use Firefox with the Tails extension, read no further. This is not for you. You have it given to you on a plate, you don’t know how lucky you are. This is for those of us using Camino, Safari or Omniweb.

After I mocked up an image of how Microformats detection might work in Safari, I started looking at the tools there were available. While there wasn’t anything that handled detection, Tantek did release his bookmarklets to allow hCard and hCalendar information to be exported from a page. Nothing in the region of Tails where you could view a list and choose which contacts/events you wanted, but it worked. This just left some way of handling detection, until I came across Chris Casciano’s script for NetNewsWire to Extract Microformats. It was a simple solution too – use css to style .vcard and .vevent classes differently.

So I’ve knocked up one of my own as a starting point. Here it is in action on Adactio, a rich harvest of microformats to be highlighted:

Example of the highlight microformats css in action

Here’s the file to download: expose-mf.css

It may work better with some designs than others. So far, I’ve not come across any problems where it renders a site unreadable, but it could easily happen. This just highlights hCard and hCalendar, but easily be expanded to things like XFN and show attributes. This is something I might update as time goes on.

A wee CSS note: I’ve put in a border-radius property for those using the latest WebKit. For Camino folks there’s a -moz-border-radius of course.

Using it in Camino

Copy and paste the css into your userContent.css file found in username/Library/Application Support/Camino/chrome/. Restart Camino. If for some reason you did want to use this with Firefox, the instructions (for the Mac) are the same.

User scripts functionality is planned for a future version of Camino, so hopefully this will open better ways of dealing with Microformats.

Using it in Safari

Put the css file anywhere you like (your username/Library/Safari/ folder might be a good place) and then select it in Preferences > Advanced > Style Sheet. Restart Safari.

Using it in Omniweb

Again, put the css file anywhere you like, and then select it in Preferences > Appearance > Style Sheet. No need to restart, just refresh.

A Proposal for a Safari Microformats plugin

In a nutshell, I want to be able to easily take advantage of Microformats. I want to know about and get that information with the same ease as RSS Feeds, and I want it to work on a Mac.

Firefox already has its ‘Tails’ extension, but this currently only displays microformats in the sidebar. There’s the TailsExport extension for exporting the data found, but sadly, this is Windows only.

So what tools do we have on OS X? Tantek has put up some bookmarklets that will do the export for you, but the trick is detection – knowing that there is data present in the first place. So either the site author needs to announce the presence of microformats (in the same way that they would display an icon for RSS feeds), or the browser has to check and inform you. I prefer the latter, but currently, Endo is the only OS X app I know that detects (it looks for the hCalendar format and passes it onto iCal).

What I’m doing here is illustrating a request I sent to Hao Li (Saft), Hetima (SafariStand) and Kasper Nauwelaerts (Safari Tidy), all developers of excellent Safari plugins. I can’t imagine that Apple are intending to integrate Microformats any time soon, so I thought it was worth trying the plugin developers. If you don’t ask, you don’t get!

Here’s what I’m imagining in Safari (although I would equally welcome this in Camino and Omniweb). Microformats are detected and announced the same as RSS feeds – an icon appears in the location bar to warn you. (Incidentally, in these screenshots, I’m using Safari Standardized Feed Icon from Mac Specialist). I’ve picked on Chris Messina’s Blog here, as it had a post with plenty of hCalendar love:

Mock screenshot showing Microformats notification icon

(Click to see the full image)

Clicking the icon reveals a sheet, with details of all the available data on that site hCards, hCalendars and so on. Each type is represented by an familiar OS X system icon:

Mock screenshot showing sheet with available Microformats

(Click to see the full image)

Data can be added individually, or all in one go. An option to cancel is there too. I’m not sure about the small + button, but you get the idea. I also think the ‘hCard’ bit is too techie – perhaps something like an email address or phone number?

I don’t know how hard this would be to implement, but I certainly needed to illustrate what I was asking for. Cross fingers! Any further suggestions and ideas welcome.

Update: Ben Ward had a similiar idea at the same time, but Ben expands the idea further. I like the concept of a ‘downloads’ style window. Go see.

Another Update: Remy Sharp has implemented this functionality as a bookmarklet !

Big ideas, and then ... no time

Every time I go to a conference, I come away with big ideas, opinions, and definitive actions for when I get home. I going to do X! I’m going to demand that X starts using Y! I’m going to change the world by doing Z etc. Once I’m home, other pressures take hold (running a business, running a family), and these big ideas never happen. They are quickly forgotten.

One example. Last year’s SXSW was my first encounter with Microformats in Tantek’s presentation. Almost scary in their simplicity, I was excited at the possibilities they presented*. When I got back, I would start looking at how I could implement this into my work.

A year went by. This year at SXSW, Gordon Montgomery on the “Design and Social Responsibility” panel urged people to start small. Even a small change was better than no change at all. These words stuck with me, and gave me hope for this years inevitable come home… then not do anything cycle.

So, its taken me a year to get around to such a chuffing simple task, but I’ve reformatted my contact details to use the hCard microformat. Its funny how a few extra class names can give you satisfaction.

Now I repeat to myself as a mantra. Small changes. Start small…