events/2006-03-13-sxsw-microformats-transcript

2006 SXSW Microformats panel transcript

This is a transcript of the SXSW microformats panel from the audio recording.

Transcript

Tantek Çelik: Good morning everyone. Let's go ahead and get started. This is the microformats session. I'm Tantek Çelik, your moderator for this panel. And we've got a great set of speakers here that are going to show off various things they've done with microformats. Anywhere from just adding some extra semantics to their sites to some tools that are already been developed that can consume and display and browse microformats.

First, I'd like to say this entire presentation, at least the hypertext of my presentation, is licensed under Creative Commons attribution license.

All right, so first I'm going to try and do a little demo. We'll see if this works. We were having a little trouble earlier so it's going to be a bit of a gamble with the network and all. So if I can just please ask everyone to turn off their BitTorrent for a couple minutes. Right, stop uploading photos to Flickr.

So we've got basically a version of the south by southwest speaker's page marked up with the hCard microformat. And what you would've seen if the network was working, would be the entire set of speakers added to the address book. We'll try this again in a few minutes to see if it's working. What we're doing is we're passing the speaker's page through a converter that converts all the hCards to vCards, and everyone of you out there that has a computer or phone has at least one or two implementations of the vCard compatible address book on you right now. The idea is that as soon as any page that has an hCard on it you can add to your address book, you can sync it with your PDA, your handheld, and it makes contact information, personal information, on the web a lot more useful.

I'm going to show you just a quick example of what an hCard looks like. So hCard is essentially the microformat contact information for a person or organization. In this case, here's some information you might find about a person like name, URL, title, etc. You might mark this up with spans, hyperlinks (a tags). And if it's the contact information for a page, you might use the address tag as well. This bit right here, this is the key hCard bit. So what we've done is we've taken the property names from the vCard standard, RFC2426, and simply reused them as class names in HTML. So class equals vcard, url, fn, n, given-name, family-name, title, org. And that's really it. So just by adding that to existing markup you created an hCard.

But one point that I'd like to impress upon everyone is that microformats are more than just really good class names. And this is something that as microformats have become more popular a lot of folks are sort of taken to saying, "Oh, I've been using microformats for years." And while microformats definitely use semantic class names and are taking advantage of this larger trend in web design towards using CSS for presentation, HTML for semantic markup, and then class names for catching additional IA and such in the page, microformats actually takes that a few steps further.

First, is that we've got a set of principles that essentially guide our design processes and help keep things micro as it were, help keep the number of class names down to a minimum, the number of microformats down to a minimum. I'm not going to go into detail about this principle. What I will go into a little more detail is the process. And this actually makes a really big difference because if you just have everyone out there inventing their own semantic class names well, that's what we have today and that's actually just fine. As long as you're not looking to inter-operate that's not a problem. One of the things you have to worry about is if you actually try to establish a standard, you need to inter-operate. So you actually need some amount of process, some amount of community, and we'll talk a little about that. That's where community part comes in. It helps makes sure that everyone tries to solve the same problem. We take the same approach rather than duplicating different ways of solving the same problem.

So let me just go really quickly over microformats process. We try to keep this down to an absolute minimum as much as possible.

The first thing is we ask people to pick a specific simple problem and define it. If you don't have a specific problem that you're trying to solve then you need to probably work hard and define it. We don't want to solve really general-purpose problems; we don't want to invent new frameworks. This is just for solving real world, practical, straightforward, specific problems.

Second, is that we require that anyone that wants to actually come up with a microformat actually go out there on the web and document what existing web pages are doing already with expressing this content. So say you want to build a microformat for widgets, whatever that means, right? If you can't find web pages out there that are publishing widgets or publishing whatever that type of content, then maybe there's not really a need for microformat per se, maybe you can just use semantic markup that you make up yourself.

The third is that we really, really want to avoid inventing new formats, new standards, new names, new terminology, even. We work really hard to go out there and document any existing formats that have tried to solve the same problem, whether these are web formats or whether they are formats for other transports or other types of other fields. You know RFC2426 vCard, that's not an XML format but it solves the problem of contact information. Similarly, the iCalendar standard solves the problem of how do you express a calendar event. So the goal here is to document these existing formats so that we don't invent new ones. If we do invent a new microformat, we try to take the names from existing formats. We try to not even invent new terminology.

Finally, after you've done all that, you try to brainstorm about... okay, given what people are actually publishing on the web (as opposed to what standards might say), from that you can apply a set of fields, what we call a schema, that would define a microformat, and then from there we reuse the names from those formats. Finally, and this is probably the most important piece, which is that we iterate within the community. So people put up a straw proposal based on their research, really early, really often. You try publishing it on your website and then you try and get feedback from the community. And then you iterate. So the goal here is not to try and get it perfect on the first try. The goal is to get something on the first try and evolve and iterate quickly and not feel like you have to support exactly what you came up with first.

All right, I want to show you guys a little bit of the progress we made with microformats over the last couple years.

Beginning in 2004, we had very few microformats. In fact, we had just defined the term "microformats" and XFN had been out a few weeks, which had a few implementations. rel-license had been proposed for Creative Commons and other licenses, XOXO for lists and outlines, and Votelinks for indicating that the page you're linking to, you don't necessarily agree with what it says or maybe you just abstain with what it says. So in two years the community has developed and come up with a whole lot more microformats. And you can sort of read them here for yourself. I'm not going to go into great detail. But literally for events, for people and organizations, for locations, for syndication, for classifieds, resumes and reviews, even tip jars for video blogging. These are all microformats that the community has come up with and documented and researched and published and, in fact, implemented. You can look under each one of these is a set of implementations. And there's many more in development.

And how do you develop more microformats? Well, this is the community. We've got several portions to it. The IRC channel, which is live right now. The email discussion list with public archives. And this is a decision we made really early on; that we wanted to keep all of our research, all of our discussions in public. So literally the IRC channel is archived to a public web page. All the email discussion lists are archived. If you want to participate by blogging about microformats, use the microformats tag. And finally, the wiki is what we use for specifications, for feedback, for issues. And again, anyone can create a login and edit it. And this is one of the lessons that we learned from what Wikipedia has done. Rather than try and keep under very tight control the specifications, we said hey, let's try and put all the specifications out in the open and let anyone come in there and fix the little mistakes. And it's actually been tremendous, the helpfulness of community, contributions that we've seen.

So I'm going to close the little introduction with an exercise for the reader. Create your own hCard. Now this is actually fairly straight forward. We've got a nice hCard creator form that's up on the microformats site, as well as a page that -- if you've already got a contact page on your site, which a lot of folks do -- a page on how to update the markup for that to just turn it into an hCard without having to create a new one. Publish it on your site. Go ahead and go to the hCard specification, there's a whole little section that says "new examples in the wild", and add a link to your hCard. And we've also even got a wiki page for this particular session as well. Go ahead and add yourself to the list of attendees.

And finally for any sort of follow-up Q&A that we don't get to, we're going to hold a pretty informal lunch right after this presentation at Las Manitas. So we'll see how many of us can cram in there and have open discussions about it.

All right, so this entire presentation -- as I'm sure many of them to date -- is built with S5 in microformats and that's the URL down there, if you want to go reference it and look at it for yourself: tantek.com/presentations/2006/03/microformats-sxsw.

So thanks, everyone, and now I'm introduce to you Mark Norman Francis of Yahoo UK.

Mark Norman Francis: Yep, that's where I work. I am a senior web developer and I work on the pan-European websites mostly in the media area, which is things such as news and finance, movies. And when I first heard about microformats I got terribly excited for two basic reasons. One, I'm lazy, and two, I'm impatient. Because I'm lazy, with the Semantic Web in capital letters -- capital S, capital W -- you have to encode all of your information twice. And I just don't want to do that. It's far too much effort. And I'm impatient and I don't want to wait for other people to mark things up twice as well.

Within the company I did a little informal talk to the web development team within Europe about microformats, and we decided that we would try it out on our site to see how it went, basically. And I'm going to show that to you now.

So I was working as the second developer on the movie site at the time. And one of the microformats is hReview. We have a lot of reviews in our site so we marked them up using hReview. If you see down here there's a little microformat icon. So the Tails Firefox extension detects the presence of microformats and has indicated there is one on this page. So you just double click on that and it shows the two reviews on this page are there.

Oh that's lovely... and there goes the wireless. Okay, you'll just have to trust me about that one then, won't you?

So on this page there is... the hReview microformat has an awful lot of information on it and our reviews don't have anywhere near as much as that. Plus hReview was really -- well the version I looked at at the time -- was designed for individuals reviewing things. The reviews that we have more from actual data provided, such as in this case cinema source who other that people give us the data. So we didn't use much of the hReview format but we used it anyway. Of course, other Yahoo properties that use hReview that I know that use microformats, as Tantek said earlier is blo.gs and Upcoming. Upcoming was the first of big sites that used hCalendar?

Tantek Çelik: Right. So Upcoming was definitely the first site that picked up the hCalendar format and deployed it across all their events. I actually don't know how many events Upcoming has but it's got a lot. I'm guessing there's somewhere in the hundreds of thousands. If someone from Upcoming is here then perhaps they can let us know.

Mark Norman Francis: So, of course, that wasn't owned by Yahoo at the time. So we can't really take any credit for that but it's nice that it's there anyway. I can't show it to you right now because it's only in development and I can't get onto the VPN to show it you but in Europe we're going to be launching a local search product and all of the results that that will give you such as restaurants and business are all going to be marked up with hCard. And that's in the seven figure range of results, whereas the movie site is only four or five figures of hReviews.

And obviously the last, Upcoming. I went to this party, I had an awful lot of alcohol. On this page, the information about this party is marked up using microformats and you can extract that and do what you like with it. And that's me. Thank you.

Tantek Çelik: Thanks Mark. [clapping]. Next up we got Jeremy Keith, who's going to show us a little something that he put together just for the conference and then showed around to a few friends. I'm like, "Wow, that's pretty cool. You need to show that off."

Jeremy Keith: Yeah. This isn't going to be quite as big as Norm's. He's got about six millions...or something. I've got one page.

Mark Norman Francis: Yeah. It's a very nice page.

Jeremy Keith: So this is my second year at South by Southwest. I was here last year and had a great time. And I'm sure as many people have told you, the panels are only half the story at South by Southwest. It's the evening events that you really need to go to to get the most out of it and have all the fun. So coming up to this year I decided I'd put something on my web page about the evening events I'd be attending this year. So this is my website and I decided I'd create a page and put events on it.

Now I've already got events out there. I used Upcoming and there's all sorts of South by Southwest stuff on there. I could just use the Upcoming API to pull stuff out or just scrape the hCalendar stuff out but there's some information that's not on Upcoming that I wanted to get at. That was geo-coordinates. I'll show you why I wanted that. The other place I looked for events was on the South by Southwest website, and they have events marked up but these aren't marked up in hCalendar. A couple of strong tags and paragraphs. So I was having to do a bit of cutting and pasting, but the idea is that I would maybe do a bit of cutting and pasting so that nobody else would have to.

So I got all the events together that I wanted to go to and list them all on a page and put it up on austin.adactio.com. So this is how it looks. I've got hCalendar and each event is marked up. So there's extra information in there. You can see the time the start time of an event, the end time of an event. There's hCards for the places. But this is the bit that interested me. I wanted to get geo-information in there so I did have to go and look up the geocodes. There's a few different geocoders out there. Yahoo has a geocoder API you can use. So I had this marked up as hCalendar with geocodes so that I could use the geocodes to mess about with the Google Maps API. Basically as an exercise to myself. I hadn't messed with this API yet and I wanted something fun to do so I thought it would be cool if I could have all my events on one page and you could also see where the events were taking place. So I took the existing page I had, which is marked up with the microformats, mixed in the Google Maps API, and I got this. So it's the same page but just with a couple of extra script tags pointing to the Google Map scripts and a little bit of javascript so that when you click on an event, it shows you exactly where in Austin the event is taking place with a nice, big Shiner Bock logo to show you where it is.

So there's all the parties I planned out that I was going to go to. I was very clever this year in that I made sure the panel I was doing was on the first day so that I could really let loose. And it was only later that Tantek said "Hey, do you want to speak about microformats?" and I was like...uh. So this explains why my voice is maybe a little rough because I've been making active use of this. But it has proved genuinely useful. I was at the Upcoming party last night and I thought, okay, I'm going to skip the web awards ceremony -- it's the Oscars for websites; I don't need to see that -- but I'll go to the after-party for the web awards. So I know I've got to get from there to there and I can see exactly how far that is.

Or tonight for instance, tonight's a busy night. I haven't even put down what's on tonight, all the stuff. There's bowling going on, but that's a bit out of town. I don't think I'm going to make it. But if you are going, go Team Brits.

Look, I'll explain why. The first event I'm going to go to is at Club DeVille. I was potentially going to go by 20x2 but, I'm sorry, that's a bit too much of a hike to get over there and then have to come back to the Adaptive Path/Consumating/Odeo party. It makes much more sense... Look, they're right next door to each other. [Laughter] And if it sucks... I don't think it will 'cause there's going to be live bands playing. It's going to be pretty good. Ben Brown, Internet rock star is putting it together so it's bound to be good. But if it does I can nip around the corner to the Sidebar. How great is it that a bunch web geeks end up in a bar called the Sidebar? I find that perfect. So, looking I can see I don't really need to get all the way -- I'm sorry to whoever's organizing 20x2; I'd like to go but the logistics of it -- I think tonight's events are pretty clearly planned out. I can just stay on Red River.

So I put this up. I had my microformats and I basically just had hCalendar and I had the Google maps mashup. And Tantek saw it and he said oh that's so cool but why don't you do this, and realized there were more microformats I could put in so that's where the hCards came from. And the nice thing, when I did this and I hadn't planned to do it, but you can link off to services on Technorati that will grab any hCalendars or any hCards on a page, just it pass it a URL and it will create an iCal for you. So I linked to Technorati and that will automatically download the iCal, which is very useful. Some friends of mine did this, they said, "I'm going to go to all the same events so I'm just going to pop that into my iCal." And they show up like that. You can see all the ones in blue down on the bottom, they came from that page. And then I can sync it up with my phone, I can sync it up with my iPod. I don't get the maps then, which is a bit of a shame, but because Austin is bathed in WiFi, as long as I have my laptop with me I can always find out where I need to go for the next party.

This did prove useful for other people, aside from when I first marked this up I wasn't thinking about time zones, so when I first marked this up I didn't put in the minus six hours. I'm in the Greenwich Mean tribe. I'm used to just thinking we're the center of the world. Time zones, what's that? As Tantek pointed out, Austin was six hours behind England so I had to take that into account. But another friend of mine, Ian Lloyd, downloaded the calendar and he was saying the dates are all screwed up, but actually once you get to Austin and you set your preferences to US Central then the events fall into place and everything looks good. iCal could be a bit better with how it handles time zones, I think. It's a little bit fuzzy but that's a problem with iCal and certainly not with the format, the hCalendar.

So on Tantek's recommendations I cleaned this up, put in the correct time zones, added the hCard. And the easiest microformat to add by far was to turn this into a XOXO, however you want to pronounce it. Tantek, do you have an opinion on how it should be pronounced? Hugs n' kisses, I turned it into a hugs n' kisses microformat by adding that. That was it because it's a nested list. It's lists within lists. That was by far the simplest microformat to add. So if anybody has cool tools that do stuff with XOXO like Greasemonkey scripts or bookmarklets that will toggle the list items they can do that with this page.

That's pretty much it. That was just a little page I put together just for myself but it proved useful to other people, and I've been making good use of it.

Tantek Çelik: Thanks Jeremy. So one of the things I wanted to ask about is have you ever created an ICS file yourself, like on your website?

Jeremy Keith: No. What I've done in the past is put up an actual vCard for download. But I've never....

Tantek Çelik: Right. When you did that did you find any sort of challenges with say like MIME types or anything else dealing with that kind of thing?

Jeremy Keith: The vCard seem to be OK. There may be challenges but I didn't discover them. But once I came across hCard I thought, well, that's just so much simpler to do that. Have it on the web page itself. Downloadable if they want it.

Tantek Çelik: Right. So basically using the class names as opposed to uploading a file was a difference there in the experience.

Jeremy Keith: If you can have it in the markup rather than putting in any kind of file that has to downloaded before you can read what's in it just makes so much more sense. It's just more easily available.

Tantek Çelik: Okay. Cool. All right. Well, before we got to our last presenter, I actually found the problem I was having with the demo was my fault, not the service's problem. I had a URL problem. So if you can switch back. So for those of you that actually loaded my presentation make sure you do a refresh, reload. It's already been updated: real-time web that we have here.

So the fourth link there, link to convert hCards to vCards. If you click that, what it'll do, like I said is send off the entire converted, the entire south by southwest speakers page with hCard markup added to it, then give you back a vCard file. This is actually a pretty sizable vCard file. Anyone want to take a guess, without actually counting obviously on the page, how many south by southwest speakers there are this year? About 400. So basically with a click of one link (now we'll see if this works) you can have all 388 speakers added to your address book along with their URLS. So say you saw a speaker and you were like, "Oh what was that that I saw? You know what was her name?" You can go check it out later on. I find this personally very handy just because I'm horrible at remembering names. Those of you who've met me probably know this so I find this a useful tool for that respect. Just with one simple addition like that. And the nice thing is that should the list of south by southwest speakers change like, for example, on this panel we had two more speakers than originally scheduled, they can simply update that one page, the speakers page, and not worry about "Oh, there's another side file I need to update" or whatever. And because it's all just hCard markup then just re-import and get all the new stuff in there directly. That's a lot of people.

continues on events/2006-03-13-sxsw-microformats-transcript-02