Category Archives: microformats

A Look at the Practical Applications of Microformats

Posted on by
1

HTML used to semantically describe what information looks like. HTML is now leaving the styling of information up to Cascading Style Sheets and is becoming more interested in describing what the data is. There are tags to let the browser know what information is a header, paragraph, list, etc. Microformats take the concept of describing data up a notch. Microformats are pieces of semantic data embedded into HTML that uses existing standards to describe what the information is. Once a user agent (such as a web browser) knows what certain pieces of data are, it can export the data to a more appropriate context. In this article we’re going to look at two microformats in particular: hCard, hCalendar.

Both hCard and hCalendar are based off of already existing standards (vCard – RFC#2426 and iCalelndar – RFC#2445 respectively). With some XSLT transformations or Javascript parsing, we can export the microformatted data in a webpage to other pages or into other data formats. For example, sites like upcoming.org mark up events with the hCalendar microformat. If we plan on attending these events, we can add it our Google Calendar, Yahoo Calendar, or 30Boxes to remind us about the event at a later date.

One of, if not the most popular microformat user-agent is the Firefox extension Operator by Michael Kaply. Currently, Michael is working on adding microformat functionality and javascript functions for microformats to Firefox 3. This means we’ll be seeing a lot of these features in the next version of Firefox. Operator supports a wide range of microformats, but as previously mentioned we’re only going to stick to hCard, hCalendar and we’re going to talk a bit about rel-tag. The premise of operator is simple: if it detects any microformatted data, it allows you to take some sort of action. If you find a person or place marked up with hCard, you can export it as a vCard or add to yahoo contacts. Exporting an hCard as a vCard will allow you to save a contact to programs like Address Book, Outlook or any program that supports the vCard standard.

I’ve already mentioned what you can do with information marked up with hCalendar, so let’s look at rel-tag. Rel-tag is simply marking up up the “rel” property of a hyperlink with the value “tag.” Once Operator knows that the link is a tag, it can then look for that same tag at sites like flickr, technorati, and del.icio.us. A common use for tags is looking up additional information about something you’re reading. Blog posts for example are usually tagged, so people can find pictures on flickr, related blog posts on technorati, or related sites on del.icio.us.

Let’s take a moment to recap and see why we like microformats and operator. For one we don’t have to input data ourselves. Since the data is already online we’re simply copying it to our application of choice. With this comes the advantage of actions becoming point and click. If you want to add an event to your Google Calendar, you point and click on the add to Google Calendar option. Pretty simple.

One area that can benefit from microformats is the cell phone market. I’ve already written about the iPhone as a microformat killer-app, but I wanted to expand this idea to include both cellular phones and internet-enabled PDAs. Cell phones and PDAs both have notoriously horrible input interfaces. Don’t you dread typing out a long text message, let alone trying to search for something on a cell phone browser? What about trying to write something out in Graffiti? What if these devices had the point and click ease of use that operator has? With REAL browsers coming to next-gen cell phones such as the iPhone, I see no reason why microformats shouldn’t be a part of this market. Imagine adding a person’s contact information into your cell phone via their hCard. You have all of the information you need about them ready to and be entered into your cell phone at the tap of a stylus. The same can be said about events and adding it to your calendar application on your cell phone or PDA.

With these smaller devices, ease of input usually suffers. In this case microformats make a great alternative to user input and can help overcome these shortcomings. It really can be just as easy as point and click.

OpenID + uF epiphany

Posted on by
2

UPDATE: After an email discussion with Adam Darowski, I revised this post to make it a bit more user-friendly.

I think I might be going about this idea of consolidating your online identity with the OpenID simple registration extension and microformats wrong. I found this microformat library for PHP; It works by by retrieving the microformatted data (in this case hCard) by simply feeding it a URL and it then saves the hCard data for future manipulation. I’m starting to realize this same practice may be another way to consolidate your online identity with OpenID.

Before we get ahead of ourselves, let’s see how the applicable portion of the OpenID protocol works. The first step is to supply our OpenID URL to the consumer site and hit “submit.” For example, I would enter “nickpeters.net” as my OpenID URL to the consumer site ma.gnolia. What is a consumer site exactly? According to the OpenID Specification, the consumer is:

A web service that wants proof that the End User owns the Claimed Identifier.

Pretty much it means a site that wants to find out whether or not we are who we say we are by first asking for our OpenID URL.

After we hit the “Submit” button, an internal script on the consumer site will redirect itself to the given URL and look for two link tags in the head of the given HTML document. For the sake of simplicity, we’re only going to discuss the one of them: rel=”openid.server.” The href value of this link tag is going to be the script that actually authenticates you by asking you for the username and password you use on all OpenID-enabled sites. This practice is useful because you can offload the authentication process to a site like Vox or livejournal instead of setting up a server on your own server. This means I can enter the URL for the livejournal authentication script or a script hosted on my site. It also means your username and password isn’t sent to the consumer site and is only sent to the specified script.

That should be enough information for now, so let’s see how hCards can fit into this. Let’s say we log in to our OpenID consumer site (ma.gnolia) and go through the login process as normal. While the consumer site looks for the and OpenID.server URL in the head of our page, it would also look for some sort of clue as to the location of your hCard information. Perhaps this “clue” could follow in the steps of the existing OpenID protocol and also be a link tag, such as rel=”hcard” in the head of the document. From there, the consumer-site script can retrieve the hCard location by looking at the href value, properly redirect itself, and retrieve your information (Perhaps even using the hKit library).

The pros of this is that you can add as much or as little information as you want about yourself in your hCard. The simple registration data fields are very limited and there maybe some information in there that you don’t want to be shared (such as email address).

The cons is that it requires more administrative overhead. You’ll have to edit the header information of your site. You may not even be able to do this on all OpenID identifiers (such as ones on livejournal) because you don’t have permission to edit the header information.

Right now there are discussions going on in the microformat community about authoritative hCards that could possibly guide this idea in the right direction. I will continue to think about this and would appreciate any ideas from others.

SHDH15 and OpenID

Posted on by
1

This DevHouse I spent working on an idea that has begun to taken shape in the blogosphere. The idea was to merge OpenID and microformats to manage your online identity. OpenID has a registration extension that stores commonly asked personal information such as full name, email address, date of birth, and time zone. I feel this information could also be used to consolidate your online identity in the form of an hCard on any OpenID-enabled site. Further, if you choose to update any of your personal information, you can change it in one location (your OpenID provider) and it can propagate to all OpenID consumer sites you use (depending on how those OpenID consumer sites are setup).

The problem is that some sites on the internet that implement hCards may contain inconsistent data. This proposed solution will allow sites to retrieve your information from one source. If someone wants to find your personal information, they can go to any site that has your hCard instead of having to find your authoritative hCard (this will be a topic of another blog post I’m sure).

Let’s take the OpenID-enabled site ma.gnolia for example. You can sign-in with OpenID and upon successful login, ma.gnolia can retrieve your personal information from your OpenID identity provider. From there it can turn the resulting information into an hCard microformat. Of course there would have to be some sort of control panel to determine which information gets displayed and which information to hide (such as email).

Now, essentially all I am doing is applying an existing protocol, but I wanted to bring awareness to the idea of using OpenID with the hCard microformat. I also wanted to bring attention to the idea of using OpenID as a way to centralize your personal identity so you have consistent personal information among sites.

The first step I took was to actually learn the entire OpenID protocol. I ended up not learning all of the protocol because I felt the documentation was insufficient. This brings up another project idea: document the OpenID protocol in plain English. It was fun learning as much as I did and learning how to implement it myself in PHP. It also gave a chance to learn/use the cURL library in PHP. Perhaps after I learn the protocol, I’ll use a library to make further development easier.

I spent the rest of my time socializing and meeting new people and talking to people met at previous DevHouses. Highlights include talking to Konstantin Koll about his OS that implements a WinFS-like file system, Jesse Andrews of Flock about the next big release of flock (which I eagerly await!), and Chris Moak about his new sleeping schedule and duct tape accessories.

The night was ended by going out to Dennys where we discussed what made this DevHouse a success and what can be done to improve it for next time.

Pictures can be found at: http://www.flickr.com/photos/tags/shdh15

iPhone: The Microformat Killer App?

Posted on by
8

We have all heard the exciting news regarding the official announcement of Apple’s iPhone. If not, check out the stevenote on Apple’s website. I know it sounds cliché, but it is truly a revolutionary product in all sense of the word. This product will change the way we use our mobile devices and retrieve information. No more worrying about having to stop at an internet cafe or stop to get directions while on vacation. No more having to juggle between multiple devices in our pocket. No more having to wait for trivial information like movie times and weather.

After absorbing all of this, I started to think about how microformats fit into the picture. Now that we are able to retrieve a full XHTML webpage with Safari on a mobile device, we are also able to retrieve microformatted data. What does this mean in terms of how we add contacts to our address book, add events to our calendar or find a location on a map? It sounds like the processes can be streamlined. With hCard we can add a new contact (including a photo for quick recognition!) or find out the location of a business with Google Calendar. With hCalendar we can add an event to our calendar (assuming the calendar supports adding new events). All of this can be possible without typing anything or syncing data from our Mac/PC. Of course all of this is theoretical, but imagine how easy organization will be. It will be exciting to see if microformats ever make it to consumer devices for purposes such as this.

It was already demonstrated that the iPhone already has the ability to dial numbers from locations found on Google Maps. It seems that Google uses their own closed standards/algorithms to parse the information from websites and somehow sends the extracted information to the iPhone. What about the rest of the sites out there that have just as good information to offer? If the move to an open standard like microformats is made, similar functionality can be had on any website that implements the appropriate microformat.

Oh also, I bought an Apple TV today as an impulse buy. It ships out on March 2nd!

Operator 0.6 Released!

Posted on by
2

Michael Kaply emailed me today to announce the release of Operator 0.6. Here are a list of changes (taken from his site):

  • Performance Improvements – I’ve done a few things here. The main thing is that I was going through the document’s DOM one time for each microformat. I’ve reduced that to one time for all microformats, and I also cache the list of microformats as best I can (there’s more work to be done here. I’ve also modified it so that I don’t build any menus until the icons are actually clicked. In addition, I removed the code that did a reverse lookup on geos to get the address. This was causing a MAJOR performance problem on pages with geo tags. I think this is a deficiency in the geo spec – I wish they had a way to specify a name for the geo on the geo tag.
  • User Interface – I’ve added both a toolbar button and a status bar icon that contain all the Operator functionality.
  • Handlers – I’ve made it so that handlers can indicate that they require data in a microformat. If that data is not there, the handler won’t appear. In addition I’ve added basic support for 30 Boxes. If any 30 Boxes developers are out there, please feel free to contact me so we can discuss why I can’t make 30 Boxes work as good as Yahoo or Google Calendar. I’ve also added support for Yedda.
  • Microformats – I’ve added support for hResume. It’s not there by default, so if you want to see it, you’ll have to add it using the Microformats tab in Options.
  • Debug – I’ve modified the debug dialogs so that they now display in a readonly text area that can be copied to the clipboard. They are also formatted better.
  • Tags – I’ve improved the parsing to be more compliant with the spec for valid/invalid tags. You’ll notice the tags on my blog don’t display because they are invalid. (Thanks blogger!)
  • Browsers – I’ve verified that Operator works on Flock and modified the install.rdf to support Flock
  • hCard – I’ve added support for the “hCard reference via object.”

Before I give any of my opinions I would like to try it out for a few days to really get to know the differences. Anyways, I suggest you check it out and give Michael feedback as well.

    Operator: A Firefox Plugin Bringing Functionality to Microformats

    Posted on by
    Reply

    As previously mentioned I would do a review of the brand new Firefox plugin “Operator” by Michael Kaply. Instead, I felt this article at the Mozilla Labs Blog did a better job than I ever could at describing the functionality of Operator.
    There are a few highlights I would still like to cover though. First there are two modes to the plugin: Actions and Microformats. The former is where you get the real functionality out of the plugin; You can export contacts to your defualt email application (Outlook, Mail.app, etc.), add events to your Google Calendar, find a location on Google Maps, and look up tags at flickr, del.icio.us, technorati, and upcoming.org. The latter shows you the microformat type being used on the page and can be used for writing/debuging your own microformats.
    Anyways, check out the plugin and read the article to discover the potential that microformats have.

    Just a General Update – SHDH14 (Part 1)

    Posted on by
    2

    So I’m pretty sure I’m done with my transition from godaddy to Bluehost. I just need to wait for the DNS changes for nickpeters.net to propagate across the internets. Anyways, GoDaddy was slow, didn’t allow SSH access, and just not cutting it for me in terms of features, thus the switch.
    So here’s a recap of the past few days.
    On Saturday I attended SuperHappyDevHouse14 at David Weekly’s (CEO of PBWiki) house in Hillsborough, CA. It was about a 3 hour drive, and felt even longer by myself! I arrived at around 2:00 to the filming of a segment of a documentary on the history of the internet for the discovery channel. It involved David Walking out of his house, inserting a tape into a walkman and putting on his headphones. I later learned this footage was for a segment on MP3s.
    My time at DevHouse was spent on a greasemonkey script called I named “Social xFolk.” This script adds two buttons below bookmarks with the xFolk microformat. The buttons allow you to bookmark the URL in either ma.gnola or del.icio.us with ease. I was excited that I made my first greasemonkey script and that I also was able to contribute to the microformat community.
    My time was also spent conversing with some of the attendees. Highlights include Jeff Lindsay, David Weekly, Tantek Çelik, and Tom Harrison.
    I talked to Jeff Lindsay about systems theory and its application to programming and business management. I even plan on picking up a book he recommended called “Ackoff’s Best” that talks about the subject matter and it’s application to business management. I spent most of the time listening, but it was a damn good conversation.
    I casually talked to David Weekly while he was BBQing some hot dogs, but he had some thought provoking things to say nonetheless. Two of the things I found most interesting is his take on SVG and measuring how much of the internet visits your site. First off, SVG is an XML vector-based graphical format. Because it’s XML and vector based, they are lightweight and scale very easily. However, who cares if the majority (IE users) of your potential visitors don’t support it. Even with the release of version 7, Internet Explorer DOES NOT support SVG. Firefox on the other hand does have native support. When designing websites, you need to think about your entire visitor-base and take into considerations of what works on what browsers and what does not. This discussion led to his idea of measuring how much of the internet is visiting your site. If you look at statistics and see most of your visitors are using firefox, what does that say? Most of the internet is using Firefox? No…according to W3Schools, around only 20-30% of the internet is using firefox, thus less than 20-30% of the users on the internet is visiting your site. Once your visitor-browser ratio closely reflects actual browser usage is when you know you are getting a larger portion of the internet visiting your site.
    I talked to Tantek about…you guessed it…Microformats! I brought up some issues I had with hCard that could extend to Microformats in general (which I might leave for another post) and the project I was working on. He inspired me to contribute to the microformat wiki and check out the IRC channel, which I plan on doing in the near future. Also, while talking to him I learned about this really cool Firefox plugin called “Operator.” I actually plan on writing a very positive review of the plugin (maybe with the hReview microformat!), so look for it soon!
    Tom Harrison, among David Weekly and Jeff Lindsay, is one of the planners of DevHouse and also held the first DevHouse I attended at his parents house in Los Gatos. One of the things he did for this DevHouse was he made a linux-based gateway that prompted you for your name email address, and zip code when you first went online. On his end he could see a list of attendees and their corresponding Mac Addresses. This information was used in the past to see the distribution of machine types at DevHouse. In addition, this time he plans on making some sort of graphical representation of where everyone comes from (using the provided zip code). In the near future Tom plans on making n Linux ISO that can be used to aid in setting up your very own DevHouse. The ISO will be a Linux distro that has the above stated features as well as Squid (for caching) and some more features that I’m currently not aware of. Besides the ISO, Tom plans on providing information on marketing your very own DevHouse, how to setup and tips he has learned from his own personal experiences. This project has been dubbed DevHouse.org. I’m personally excited about this because Joel has talked about wanting to setup a DevHouse in San Luis Obispo. Now that I won’t be leaving the area anytime soon, I’ll be here to help facilitate this idea if it ever does indeed get kicked off.
    As always, DevHouse was an educational experience and well worth my time. I plan on attending many more DevHouses in the future and working on more projects.

    Social xFolk

    Posted on by
    3

    Social xFolk is my first Greasemonkey script that looks for xFolk microformatted bookmarks and adds two buttons for easy bookmarking for del.icio.us and ma.gnolia. It was developed at SuperHappyDevHouse14 and inspired by the greasemonkey script Google hCalendar.
    Anyways, get the script here. Be sure to leave any feedback and let me know what you think.

    Test it here:
    If it works you should see two buttons below the bookmark.

    nickpeters.net: Mah blawg!

    Practical Usage of Microformats

    Posted on by
    1

    My last post was not only an announcement of Taxi Driver playing at The Fremont here in SLO, but also an experiment. I generated the HTML for my post with the hCalendar Microformat creator. Once I created my post and viewed it, a greasemonkey script kicked in and I was able to automatically add it to my gCal. Although many popular browsers don’t have built in support for Microformats, there are scripts and plugins to give added functionality for streamlining tasks.