You are here: Home / Ideas / This is Not an Ordinary Blog Post

This is Not an Ordinary Blog Post

June 25, 2006 By Jason Kolb 11 Comments

This post is a proof of concept–I’ve embedded microformatted content into the text of this post.  If you run this page thru a microcontent viewer you should be able to see and use the microcontent.  There aren’t, to my knowledge, any viewers out there yet, so I ( this is my vcard

) wrote a simple one that supports events and contacts (hcards and hevents).  Try viewing this post using the microcontent viewer I wrote using this URL:

Go ahead and play with the viewer a little.  Click the links, map an address, make a call with Skype, copy and paste contacts using Live Clipboard.  (Anyone who’s never used Live Clipboard before should read this other post for a step-by-step.)  It’s purely Javascript and CSS-based, which makes it very simple to plop on top of any AJAX application out there (including RSS readers).  It’s also a small piece of a larger project I’m working on, but I wanted to throw it out there because I see a lot of misunderstanding right now about the potential of microformats.  Although I think it’s very cool that search engines like Technorati are beginning to understand and aggregate microformatted content, that’s only half the equation.  The other half is that we need to allow PEOPLE to use microcontent as well.  This post is an example of that capability.   Viewing this post with a compatible viewer gives the reader the ability to not only read the text, but to do things with the content as well.   (To my knowledge this is the only public text in existance right now with embedded microcontent, although I’d love to learn about some more examples!)

Using Microcontent

Admittedly, there aren’t many fun things to do with microcontent yet. However, it’s very enlightening the first time you move data around between applications using Live Clipboard.   Try copying a contact out of this post and pasting it into Ray Ozzie’s Live Clipboard demo site.  Another site that supports Live Clipboard is M. David Peterson

‘s Global Clip demo (which is super cool because what you paste in gets stored in Amazon’s S3 online storage service).  The sites that support Live Clipboard are a little rough around the edges at the moment, but I would assume that things will start coming together nicely over the next six months.

Here’s an example embedded event just for kicks: Web 2.0 Conference

. Just to give you an event to copy & paste using Live Clipboard.

To me, this is what microformats promise.  They enable us to turn regular old content into rich media, with little to no effort on the part of content creators.

More Examples from Around the Web

Now, let’s have a little more fun ;)   You can actually use the viewer I wrote to look at things other than this blog post.  You can either hit the viewer directly using http://www.xformats.org/MicroViewer or you can append the URL to the query string to automatically load up a page like I did with the link to this post earlier.  Go find some microformatted content and plug it in, here are some links to content that I found from poking around on http://www.microformats.org:

Disclaimer:  if it doesn’t work or your computer bursts into flames or you break out in a rash or something, tell me about it–but I accept no blame in perpetuity for anything :)   This isn’t even beta software, this is like… whatever comes before alpha.  Also, people are doing lots of weird stuff with Microformats such as embedding <script> tags in them, so you’ll often find that although the cards will render, they will choke Live Clipboard if you attempt to paste them into another site.  If you’re technically minded, try pasting the contact into Notepad or something so you can fix it.

These links also aren’t really examples of inline microcontent like this post is, unfortunately to my knowledge this is the first example of that on the Web.  If anyone has any other examples I’d love to know about them.

Technicalities

If anyone’s interested I’ll post some more technical information about all this, but I’m still refactoring it for broader use in actual products.  All of the code for this example is licensed under the Creative Commons Share-Alike license, so you’re free to use and/or modify it if you wish.  I’m still adding to it and refactoring it quite a bit; however, I got it to a stable point and I figured I’d see what people thought of as it stands now.

Oh and by the way, listen up Microsoft:  we need an editor for this stuff.  If you really want to leapfrog the competition, do us all a favor and build Live Clipboard and microformat support into the next version of Word and Outlook.

Thoughts?

Home away from home

1600 Pennsylvania AveWashington

Work

350 Fifth AveNew York

Share and Enjoy:
  • Print
  • Digg
  • Facebook
  • Google Bookmarks
  • HackerNews
  • Reddit
Filed Under: Ideas, Software Development, Web 2.0
  • http://www.argolon.com/2006/06/26/an-example-is-worth-its-weight-in-gold/ Argolon

    An example is worth its weight in gold

    Jason Kolb has put together a stunning example of how you can use microformats as opposed to just looking at them. First have a good read of his post and then try the following.
    Head over to his MicroViewer demo and enter http://argolon.com/contact in …

  • http://www.jasonkolb.com Jason Kolb

    I just noticed that the Technorati microformat search did its job perfectly, picking up the vCard's that I embedded in this post within a few hours. I'd say the semantic Web is starting to come together nicely! Check it out: http://kitchen.technorati.com/contact/search/jason%20kolb

  • http://blogs.msdn.com/alexbarn/archive/2006/06/26/647472.aspx Alex Barnett blog

    microformat viewer

    This is no ordinary blog post. It has embededmicroformat content, but you won’t see it.
    This is…

  • http://www.xlml.com/aehso Aehso

    Nice Jason, great to be able to see microformats in action, if even just in a demo like this.

    Wouldn't it be better if MS enhanced IE (rather than Word) to be a more competent writable-Web editor….

  • http://profile.typekey.com/Hiphop/ Hashim

    Good stuff. It's useful for me to see what it looks like in the viewer in order for me to wrap my mind around the concept.

    What do you think about people mislabeling thier content in order to spam microcontent readers and aggregators?

  • http://www.jasonkolb.com Jason Kolb

    That's an interesting thought Hashim – I hadn't really thought about it. I suppose the engines would have to use the same methods Google does to filter out spam sources. I suppose we'll have to come up with some type of global blacklist eventually.

  • http://jasonkolb.typepad.com/weblog/2006/06/live_clipboard_.html JasonKolb.com

    Live Clipboard How-To for End Users

    It’s the kind of thing you don’t really think about when you’re knee-deep in code, but Live Clipboard is really a new paradigm for the Web and it takes a while for people to adjust and digest everything, let alone

  • http://humanoriented.com Yong Bakos

    I've spent some time reading about all this mRc all you kids are rapping about these days, and I just don't get it.

    It seems to me that all this does is let us cut and paste complex data types. But wouldn't you want to just have your 'copy' just reference its source? Seems to me that if I live-copy your hCard and paste it into my next-gen outlook contact list, I've just copied a serialized copy of your hCard. So if your address changes, I need to go out and update my address book again.

    Couldn't this model be a whole lot simpler if live-copy just copied a uri that I live-paste into my next-gen outlook, which then just displays the result of the uri (your hCard?)
    The hCard could then just be arbitrary semantic xml instead of a bunch of spans.

    Plus, don't you think we're farting on xml and semantics by hacking up xhtml spans with id/class names instead of just using simple semantically meaningful xml?

    Jason, I really like your thoughts and principles behind blueorganizer, looking forward to sharing more ideas for what's really going to blow the kids' minds.

  • http://www.jasonkolb.com Jason Kolb

    @Yong – In a perfect world I agree with you, a URI is all you really need. However, there needs to be something on the other end of the URI. It's the same reason video phones never took off, everyone needs to use it before it becomes useful. I more so see this technology as a stepping stone, a means to an end. It'll give people a way to ease into a different mindframe using what's out there right now–an intermediate step basically.

    I'd also point out that the data copied to the clipboard is actually XML, not spans. And the idea of copying marked up data to the clipboard is an incredibly easy way to move data around. What would you propose as the mechanism for finding out what's available at the other end of a URI? Say I copy a URI to the clipboard, how would the application I'm using know what to do with it? It would have to do some kind of impromptu investigation to find out what's there and if it's something usable I suppose. Seems like it requires quite an elaborate system to get it to work, no?

  • http://humanoriented.com Yong Bakos

    Been keeping up with your recent posts; thanks for sharing.

    Re this thread, what's available at the URI is XML, just as any xhtml document is now. Simple.

    So in the context of my address book, I 'paste' in a url, the addybook goes out and reads whats there, expecting an XML address document or vCard anminal of some sort.

  • http://codebeneath.blogspot.com Jeff Black

    Firefox has a nice mF parser plugin called Operator: https://addons.mozilla.org/en-US/firefox/addon/4106

    J