Microformats
•Download as PPT, PDF•
1 like•653 views
Presentation on the basics and benefits of Microformats.
![Microformats ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (19)
Similar to Microformats
Similar to Microformats (20)
Recently uploaded
Recently uploaded (14)
Microformats
- 1. Microformats Finally Coming of Age? Aaron T. Grogg Senior Front-End Developer People.com
Editor's Notes
- Welcome to "Microformats: Finally Coming of Age?" My name is Aaron Grogg, and I am a Senior Front-End Developer at People.com.
- Today I am going to discuss Microformats. I'll cover what MFs are, why you might want to use them, show you a few existing use cases, show you the dangling carrot that probably brought most of you here, and then we can discuss how MFs might be used at various Time, Inc. titles.
- So what are MFs? Essentially, they are an established set of elements classes that give your data semantic value. MFs allow you to make your mark-up tell people what it is. Is it a calendar event Is it a person's or organization's contact information? Is it a feed of information? Is it geographical coordinates? Is it relational data? Etc. Another "version" of such mark-up is RDFa, which is very similar to MFs in principle, but quite different application. I will only be covering MFs today.
- So what does the sentence "We will meet next Wednesday for another Watercooler." tell you? As a person, you can read that and know what it means. You can infer that next Wednesday is actually February 17th. You know from previous Watercoolers that it will start at 12:30pm. You even know that the meeting is called Watercooler. But to a computer or browser, that sentence is nothing more than a string of characters between an opening and closing P tag. If however, we include a little extra mark-up, like the highlighted dtstart , and include a standardized date format in its title attribute, suddenly any person or machine that reads that could know that "next Wednesday" is actually February 17, 2010. And with a little more mark-up, like the vevent , summary , and expanded title which now includes a time, this actually becomes enough data to "automatically" add something to your calendar! We know there is an event, its summary is Watercooler, we know its start date, and we know it start time.
- Similarly, to you and me, this text obviously represents a person's name, title, and URL. But to machines, it is nothing more than a string of characters strewn together, separated by some HTML tags. But by adding the class vcard , we mark this as someone's contact information. The classes org , organzation-name , fn , and n , mark that information as an organization, organization's name, full name, and name. Likewise, title marks that person's title and url marks their website address.
- So, so what, right? Okay, now machines know what my data means, but who cares? Who's going to use it? And how? Up until now, MFs have been relatively useless. If you happened to use Firefox, and had either the Operator or Tails add-on installed, you could make an icon in your status bar light up, and, technically, such users could download vcards into their Outlook. But how many people do you really think did that? You could also do something fancy like have some geo coords on your page, then those fancy icons that lit up would allow users to open those coords into a Google Maps page... Oooo, aahhh, blah, blah....
- Then some of the real spearheads of MFs started trying to find useful ways to use MFs, to help people get excited about them. Jeremy Keith, when creating Huffduffer, adding something fun to his already interesting sign-up page, but having me not upload an image of myself, but going and getting an image of me from any one of several social sites to which I uploaded an image. That's nice, makes my life a little easier, one less image to update when I eventually shave. Glenn Jones took probably one of the biggest steps forward when he created Oomph. Oomph is a JS library that you can add to your website , which does what the FF add-ons do, but it is then in any browser, no add-ons required. Now we're getting somewhere, but where? Google has a social graph, which proves I'm not very social... IdentEngine starts getting a little scary, as it scours the social web, collecting bits and pieces from here and there, bringing them all back together in a single location for your viewing pleasure. And UFXtract will collect any MF info from a page and return it to you as JSON, XML, Text, or JSON/P. That's pretty handy, better than me having to write that myself.
- But now... Here's where this starts to get interesting, and not just because the first bullet starts with the word Google. Okay, somewhat because of that, but really because of what they're doing now. Back in May of 2009, Google announced something they're oddly calling Rich Snippets. Essentially, they're looking at your mark-up and, if they see something that they recognize as structured data, they just "might" give it visual representation on search result pages... So far, they are only doing this for hReview and hCard, but others are sure to follow. In addition, some of the smart phones are making very nice use of MFs, though this is still truly one of the most powerful markets for MFs to be useful...
- So, I'd like to open the discussion to ideas for various Time, Inc. titles. To get us started, People.com currently used hFeed for its Newswire channel, and most other modules that have a "feed" feel to them. As with most WP sites, all of our blogs have hFeed baked right in as well. And here are a few examples I thought could be useful. So, what else?
- And here is a very brief list of resources that you might find useful in learning about, and then making use of, MFs.
- Thank you, and here is the address to this presentation, via Bit.ly.