The Hickensian

20.06.06 A Proposal for a Safari Microformats plugin

42 comments
Tagged with: browsers, microformats, osx, safari

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:

(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:

(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 !

Comments | RSS

No.1

∞ Jesse Wilson said 1330 days ago:

And now you’ve addressed the question as to what Microformats offer for end-users (or viewers if you like). Being able to easily utilize the information they present elsewhere is likely one of the key points in furthering adoption.

Good concept work.

No.2

∞ Small Paul said 1330 days ago:

I reckon “hCard” might be alright: the icon should give people a pretty good idea what it’s all about.

Then again, maybe as it’s Mac-specific, maybe “Address Book card”, as Address Book seems to refer to each person as a card.

Or maybe “Contact details”, to get more literal.

No.3

∞ Sam said 1330 days ago:

Don’t forget to include hCup support!

No.4

∞ Tom Richards said 1330 days ago:

Fantastic idea!

Microformats are a thing of beauty. Increasing their usefullness and visibility will serve to quicken their acceptance rate among the less techie, and lead to a greater number of developers taking advantage of them.

No.5

∞ Des Traynor said 1330 days ago:

Thats a nice idea Jon. I really like it. There are few things standing in the way of microformats at the moment, and your plugin idea certainly addresses one of them. It’d also be nice if email programs could display a contact as a hcard so you can drop it into your blog post/site/whatever.

The tails plugin for firefox isn’t really enough in my opinion, I just end up clicking it, thinking “oh, he has a hcard” , then moving on. Some easy method of storing contacts is needed.

Basically for microformats to take off they need to be easy to create, easy to use, and easy to share. Until then it’s just us webnerds looking at each others

No.6

∞ Jesse J. Anderson said 1330 days ago:

I love this idea, I wish I had a place to sign up to inform me of when something like this is ready to roll out.

No.7

∞ ichigo said 1330 days ago:

we really need something like that!

i just downloaded the flock public beta recently because i expected that flock would be the first browser that really supports microformats.

but then…nothing…what a bummer.

though i remember that i stumbled upon a konqueror screenshot that looked like it would have support for the hcard format (someone can verify that?).

i am a mac user. i would really love to see hcard support in safari or camino in a way like you proposed it in your mockups.

great stuff jon. kudos

No.8

∞ Adam Farnsworth said 1330 days ago:

Yeah, everyone has said what I would, but I want to add my voice to the mix! Great idea, I think it would add volumes to the user experience…

No.9

∞ radioreject said 1330 days ago:

Man I have to agree with your idea. The potential benefits from this are enormous.

No.10

∞ Tim said 1329 days ago:

Using the location bar to alert users about microformats makes a lot of sense. It occurs to me that instead of using the catch all microformats logo (which may be inscrutible to people not reading this post), the icon(s) in the location bar should indicate the type of content that has been detected. A tiny address book card (or a stack of them for multiple hCards) and a tiny calendar icon (or a stack of them) would cover the two best established cases, but it is easy to imagine icons for many other microformats. These would allow the interactions you described, and additionally the icons themselves would be easily draggable from the location bar into relevant applications (address card icon to Mail starts a message, calendar icon to iCal adds hCalendar events). This dead simple interaction would encourage people to actually use microformat content, instead of simply noting that it exists.

No.11

∞ oliver said 1329 days ago:

I finally get microformats now. I never saw the point until this, now I get it!

No.12

∞ Sean Sperte said 1329 days ago:

And here I thought I was the only one who’d swapped out Safari’s default RSS png for the “standard” feedicon. :)

No.13

∞ Jake said 1329 days ago:

What a great illustration of visualising and sharing an idea. Now I can see the attraction of microformats (you should have the plug-in by the end of the week ;)

No.14

∞ Nick Harris said 1329 days ago:

The tails extension was the sole thing that pulled me back to firefox from camino, if this is ever implemented, then Safari would definitely be getting my love back.

btw. comment spam? That’s the first time I’ve seen that round here. Annoying gets they are, these spammers :(

No.15

∞ Thomas said 1329 days ago:

I feel that “Microformats” sounds a little too techie.

No.16

∞ mearso said 1329 days ago:

Great idea. It seems that there is a real appetite for people to start taking microformats out of the great idea box. The next stage is for people to use them and then show others how easy and useful it can be.

Might also suggest a name for the process of harvesting microformats in this way?

I give you Microfarming and perhaps the act of creating microformats could be Microforming

_ I’ll get my coat_

No.17

∞ Uncle Asad said 1329 days ago:

Please, Jon, don’t encourage people to continue overloading the location bar with status icons! These (especially a one-per-format setup as proposed by Tim in comment 10) clutter the location bar (and, in Gecko-based browsers, compete with and obscure the security message of the lock icon…â€œwhich icon is that, now?â€). Safari and Firefox don’t need any more prodding towards bad behavior….

No.18

∞ Marc said 1329 days ago:

Jon, you’re so right! I’m currently implementing Microformats on all websites I manage (esp. hCard and hCalendar), and I’d love to see wide browser support for them like RSS.

No.19

∞ Jon Hicks said 1329 days ago:

@ mearso – I actually rather like microfarming!

Asad – I agree, one per format is far too much. I actually prefer the Firefox method of having all these icons in the status bar, but in Safari, the location bar seems to the better choice. Safari’s status bar isn’t very tall, and with the RSS icon already being in the location bar..

In Camino, I’d prefer to see it on the status bar. Please! ;o)

No.20

∞ Ben said 1329 days ago:

Excellent concept Jon, terrifyingly I was having a discussion with Tantek post-@media about very similar UI that I’ve have sketched for a month or soâ€¦ (although my starting point was a Firefox extension).

Like you, I think putting notification in the URL bar is the way to go – or at least it is in browsers that also show feed discovery there (IE7 doesn’t and would have to do something else, I guess).

The big difference between this and my own concepts (which I’ll endevour to publish today) is that I’d avoided the term â€˜Microformatsâ€™ in the interests of â€˜user friendlinessâ€™. My mum doesn’t need to know what a Microformat is, after all. Instead I had two different notification icons: One for contacts (a .vcf style contact card) and one for events/calendars (a flat, iCal-esque calendar icon). Then users can bring up a list of hCard/hCalendar respectively, potentially accomodating some crossover for things like event attendees, or even ‘events a contact is attending’.

Anyway, I have concept sketches kicking about that I’ll get published and Creative Commonsed later on. In the mean time, thanks for proving the age-old ‘there’s always someone else in the world with the same idea as you’ theoryâ€¦ ;-)

No.21

∞ Matt Caton said 1329 days ago:

Im no expert on Microformats, so please correct me if this is wrong. Take for example an hCard. This is marked up using divs and spans and classnames assigned against a universal list of agreed names to identify the block as an address. Am I missing the point? Surely already identifies an address – and more importantly is correct semantic markup whereas divs and spans are not. Microformats seems to me to be moving the meta data into classnames and away from the actual markup.
Additionally, we already have a mature platform for describing information about data – XML schemas. There are already industry agreed schemas for information interchange – including of course address – and more importantly, address as defined regionally.

No.22

∞ Matt Caton said 1329 days ago:

Correction to my post…
Surely the “address” tag already identifies and address…

No.23

∞ Jon Hicks said 1329 days ago:

@ Matt – address does handle address, you’re right. But what do you use for phone number, organisation name etc.? What do you use to describe calendar events? Besides, class names are as much a part of the markup as address tags.

No.24

∞ Matt Caton said 1329 days ago:

I see you point and feel I’m probably just not getting this yet. Focusing still on the hCard, the address tag isn’t perfect, but at least it says “the following is an address” – which is pretty essential to screen readers. Until screen readers understand that certain class names are effectively reserved, Microformats cant be interpretted and immediately you are alienating part of your audience. Class names are part of the markup – agreed. However, there is not a universally accepted list of class names versus symantic meaning whereas there IS a unverisal list of tags versus meaning. (i.e. HTML).

No.25

∞ Jon Hicks said 1329 days ago:

This isn’t really the place to debate the approach of microformats, but how would a screenreader read an address differently if it was marked up with an class rather than a microformat?

No.26

∞ Matt Caton said 1329 days ago:

Sorry – I realise this is offtopic. One last comment to anyone interested in making markup more semantic theres a good starting point at: http://www.w3.org/MarkUp/2004/02/xhtml-rdf.html
Just search for “Markup metadata” in that document. This talks about why classnames are bad for adding semantic value to HTML (and why the address tag has no subtags such as “city”).
For now I will just let the Microformats bandwagon pass me by.

No.27

∞ Mark Hadley said 1329 days ago:

Although i agree that an icon in the location bar is a good way to go longterm, perhaps there is also some mileage in an icon put in the page by the author as well, even just as a stop gap.

Even though most modern browsers identify RSS feeds in the location bar these days, most people still put an icon in the page too, rather like feedicons.com we could have microformaticons.com as well with a range of icons for the different microformats that people could use to link to for instance the vCard generators etc.

Perhaps this misses the point of microformats being just a few class names and easy to implement, but it might help to popularise them in the same way feedicons seems to have worked for rss…

Just thinking out loud… i’ll be quiet now ;)

No.28

∞ Jon Hicks said 1329 days ago:

Matt – I think the top of the document “This is an internal working draft.” and “Last Modified: 2004/02/27” says it all. Microformats is something we can use here and now.

No.29

∞ Dimitri Glazkov said 1329 days ago:

Comment: Hey Matt, glad you are checking out this microformats thing. A couple of comments:

The purpose of address element is not to mark up an address. Its purpose is to specify contact information of page author (http://www.w3.org/TR/html401/struct/global.html#h-7.5.6). That's quite ait more limiting than just an address.
hCard spec does indeed recommend using address element to signify that it represents the author of the page (http://microformats.org/wiki/hcard-examples#Authors_of_Pages_and_Posts)
There is a very good post talking about class attribute in HTML (http://microformats.org/blog/2005/10/19/more-than-styling/).
The XHTML and RDF document you are referring to is indeed an interesting read, but it does not argue against using classes to specify semantics, just the fact that you indeed need a way to standardize conventions of usage of classes. That's what microformats is all about.
RDF and microformats are not competitors. RDF is a data model that is meant to power Semantic Web. Microformats is a way to get there faster and with realistic assessment of existing environment, aka the lower-case semantic web.

No.30

∞ Matt Caton said 1329 days ago:

@Dimitri. Thanks for taking the time to do some scene setting for me. Very appreciated – I certainly feel I have a better handle on it now.

No.31

∞ matthew smith said 1329 days ago:

I think your idea has merit for a cross browser solution. It would be nice to see this style of microformat reading across multiple browsers and platforms. Not unlike the push for a common feed icon, it might be nice to have a common microformat icon per “small paul’s”http://pauldwaite.co.uk/ comment above [#2], in addition to a common style of retrieval.
This is good stuff man. Well laid out.

No.32

∞ Drew McLellan said 1329 days ago:

Just to clear up a misconception – microformats aren’t prescriptively marked up using DIVs and SPANs. Microformat class names can be applied to any element that accepts a class attribute – which I believe is pretty much every element which inhabits the BODY of your document.

As always, you should use the most semantically rich markup at your disposal. Once you’re at that point, adding microformat class names stands to enrich that structure further.

No.33

∞ Kevan Emmott said 1329 days ago:

How about overloading the feed icon? Maybe it comes to mean a general “Meta data on or relevant to this page” icon and triggers a dropdown – your regular “add live bookmark” type functionality as well as “add John’s hcard to Addressbook” and “add XX event to iCal”. That way you keep only one icon in the URL field.

No.34

∞ radioreject said 1329 days ago:

Jon,
I have also recently downloaded Flock and I discovered that the creator of the Firefox Tails extension has created an extension for Flock as well. It’s called Flock-Tails. It puts an Icon in the status bar and then when you click it uses Flock’s Topbar to display the info. I must say though. Most of my attention goes to the address bar and not the status bar. The idea of having this in the address bar would serve as a better location. See image here.

No.35

∞ radioreject said 1329 days ago:

No.36

∞ Tim Almond said 1329 days ago:

Jon,

Have you tried the Tails Export extension on the Mac?

I’m running Windows so can’t test it, but I checked out the code and could see nothing Windows-specific , and there’s a comment on Rob de Bruin’s site where he also thinks that there’s no reason why it shouldn’t run on Mac too:

http://www.blogger.com/comment.g?blogID=24151979&postID=114414086237911220

No.37

∞ Ben Ward said 1329 days ago:

Well, you’ve delivered a well timed kick up the arse to publish my own Microformats Browser UI concepts Jon. I demo’d these illustrations to Tantek at Saturday’s @media meet and vowed I’d finally get them published so here’s the write up: Microformats Browser UI .

There’s a lesson to be learned here about publishing ideas promptlyâ€¦

No.38

∞ Jon Hicks said 1328 days ago:

Tim, if you go to the extension’s homepage it says:
“Works with: Firefox 1.4.0 – 1.5.0. Windows
Tails Export is not available for MacOSX.”

It even goes as far as hiding the install link, so you can’t even try!

No.39

∞ luxuryluke said 1328 days ago:

Nicely done, Jon.
Commented on Ben Wards article with my thoughts.
Not that i’m a pro at this stuff, but i’m anxious to see it’s widespread use!

No.40

∞ Marko said 1327 days ago:

I can’t wait to see the plugin work with Flock ! :)

No.41

∞ Roger Herbert said 1322 days ago:

Great post Jon!

I add my voice to those suggesting that the interface doesn’t use the terms or icon from ‘microformats’, but rather something more user-friendly. Microformats is fine for devs, but not for my mother :D