Microformats I - What, Why

Internal training class held in October 2010. Updated post-presentation with additional details for those unable to attend.

Transcript

1. Microformats How to add meaning to HTML with: •Microformats, •Microdata, •& RDFa
2. Part I What are these things? Why would you use them? What do they look like?
3. What are microformats? •microformats.org: “A set of [...] data formats...” •wikipedia.org: “An approach to semantic markup which seeks [...] to convey metadata.” •google.com: “Simple conventions used [...] to describe a specific type of information...”
4. What is microdata? •w3.org: “Allows machine-readable data to be embedded in HTML documents...” •wikipedia.org: “A simple way to embed semantic markup into HTML documents...” •google.com: “A way to label content to describe a specific type of information...”
5. What is RDFa? •w3.org: “A [way] to augment visual data with machine- readable hints.” •wikipedia.org: “[Embeds] rich metadata within web documents.” •google.com: “A way to label content to describe a specific type of information...”
6. Sound similar? They are! They all have common goals: •Semantics - Meaning. Ex: "This is the name of a person." •Metadata - Data about data. Ex: "This is the author of this article." •Machine Readability - Tell the machine what "adlfladkldbcdefg" means to the humans.
7. How are they different? Individual strengths and weaknesses. But they're all trying to solve the same problem. •Different approaches, •Different "specifications,"* •Different "vocabularies,"** •Different "syntaxes."*** * All words used loosely. ** "Native" vocabs closely related to each. *** The biggest difference.
8. How are they different? •Microformats: Uses existing HTML4 tags & attributes. Easiest to pick up. •Microdata: New in HTML5. Uses new HTML5 attributes. •RDFa: Adds RDF to XHTML using new attributes. The most complex! (Remember: <tag attribute="value"></tag>)
9. What are they used for? •Add Meaning to website content ◦How does a machine know that "Blah Blah" is the name of a person? ◦Currently? Context + vast amounts of data to analyze. ◦Microformats allow us to specify "this is a person's name" in our HTML code.
10. What are they used for? •Describe Relationships in website content ◦We can also use these techniques to describe relationships... ◦Especially between meaningful pieces of website content! ◦For example, we can indicate that a person is affiliated with a particular company.
11. Why would you want that? •Enable Parsing by... ◦Google (Rich Snippets, Zeitgeist) ◦Yahoo! (Pipes, SearchMonkey) ◦& other miscellaneous ▪aggregators, ▪apps, ▪browser plugins, ▪or your own custom code!
12. Why would you want that? •By enabling parsing, you enable sharing! •Sharing increases your potential traffic! •Effectively sharing increases your reach!
13. Why would you want that? •Find-Ability: Better understanding of content's meaning = potentially more targeted traffic. •User Experience: Parsed content can be downloaded and imported into software (ex: contact info or events)! •Workflow Efficiency: Help establish internal standards for class naming and markup patterns. (Emily Lewis, http://msdn.microsoft.com/en-us/scriptjunkie/ff979268.aspx)
14. Who should be interested? Lots of ways & reasons to use microformats et al. They are of especial interest regarding: •Search Engine Optimization •Social Networking •Front End Web Development
15. People & Orgs Reviews Events Example: Google Rich Snippets
16. What are common uses? •People & Organizations •Places / Locations •Events •Listings / Products •Dozens More! Custom Formats!
17. Who uses them? •hCard (Person): Yahoo! Local, Google Rich Snippets, Google Maps, Google Profiles, BrightKite, Twitter, Last.fm, 37Signals’ Basecamp, Telnic, Gravatar •hCalendar (Event): Facebook, Yahoo! Upcoming, Eventful, Google Rich Snippets, MapQuest Local •hResume (Resume): LinkedIn, SimplyHired, Xing •XFN (Relationships): Twitter, Flickr, Digg, Technorati, Ident Engine, Plaxo, Google Social Graph, Last.fm (cite: Emily Lewis, http://msdn.microsoft.com/en-us/scriptjunkie/ff979268.aspx)
18. Who uses them? In the real estate industry: •realestate.com •forrent.com •number1expert.com •zillow.com •realestate.tampabay.com •neighborcity.com
19. Questions? Who has the authority over these? / Where do the formats come from? Microformats - www.microformats.org An independent effort on the part of various web designers & web developers. It's open to input from anyone! They identify common needs -- ie: the need to mark up contact information -- and collaborate to work up formats. There's a core volunteer group in control (they make decisions based on an ideology you can read about on the site), but it's basically a populist movement. Microdata - www.w3.org/TR/html5/ Part of the HTML5 specification worked on by the WHATWG and W3C. The W3C is the biggest "standards authority" of the 'net. There was a big argument over how to add more semantic markup to HTML. Should they create a million new tags or make it extensible like XHTML? Should microformats become part of the HTML5 spec? Or RDFa? So WHATWG came up with their own new alternative, microdata. RDFa - www.w3.org/TR/xhtml-rdfa-primer/ RDF & RDFa are W3C specifications.
20. Questions? If there are different vocabularies, where do they come from? Can one vocabulary be used with all the specifications? There are certainly some overlapping vocabularies. The same groups who worked on specifications for microformats, microdata, and RDFa have often also created custom vocabularies to use with their specifications. But a vocabulary can also be created by a completely separate group. Or an individual. Some vocabularies you'll come across can be used as a microformat, microdata, or RDFa (no matter which they were intended for). So how do you choose? Basically, you want to choose the vocabulary that works for your situation. One which is understood by whatever search engine/web application/software that you are hoping to enable. The two "best" places for vocabularies (ones that are easy to learn and understood on the web) are microformats.org and data-vocabulary.org.
21. How to spot a microformat. <div class="vcard"> <h1 class="n fn"> <span class="given-name">Rachael</span> <span class="family-name">Moore</span> </h1> <div class="org"> <span class="organization-name">Homes.com</span> <span class="organization-unit">Operations</span> <span class="title">Web Developer</span> </div> <div class="adr"> <span class="street-address">280 John Knox Rd.</span> <span class="locality">Tallahassee</span>, <span class="region">Florida</span> <span class="postal-code">32303</span> </div> </div>
22. How to spot a microformat. •Uses regular old HTML4 (or new HTML5 tags). •Uses the @class, @rel, @title, @href and other long- established attributes. •@class names or @rel attribute values come from the formats specified at microformats.org. •Microformats have been established the longest and have the widest support.
23. How to spot microdata. <div itemscope itemtype="http://www.data-vocabulary.org/Person/"> <h1 itemprop="name">Rachael L. Moore</h1> <div itemprop="affiliation" itemscope itemtype="http://www.data-vocabulary.org/Organization/"> <span itemprop="name">Homes.com</span> <span itemprop="title">Web Developer</span> </div> <div itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address/"> <span itemprop="street-address">280 John Knox Rd.</span> <span itemprop="locality">Tallahassee</span>, <span itemprop="region">Florida</span> <span itemprop="postal-code">32303</span> </div> </div>
24. How to spot microdata. •Uses regular old HTML4 or new HTML5 tags. •Uses the new @itemscope, @itemtype, and @itemprop attributes. •Can use @itemtype values and @itemprop names from anywhere! data-vocabulary.org is a good choice because of Google's support, though. •Microdata will be part of HTML5, so it's likely it will become the most widely used (but who knows).
25. How to spot RDFa. <div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person"> <h1 property="v:name">Rachael L. Moore</h1> <div> <div property="v:affiliation"> <div typeof="v:Organization"> <span property="v:name">Homes.com</span> </div> </div> <span property="v:title">Web Developer</span> </div> <div rel="v:address"> <div typeof="v:Address"> <span property="v:street-address">280 John Knox</span> <span property="v:locality">Tallahassee</span>, <span property="v:region">Florida</span> <span property="v:postal-code">32303</span> </div> </div>
26. How to spot RDFa. •Probably uses XHTML. •Declares a namespace using @xmlns, uses namespaces throughout. •Uses the custom @typof, @property, & @content attributes; also uses @rel, @href, <link>, & <meta>. •Again, can use a vocabulary from anywhere. Vocabs designed by RDF proponents also exist.
27. How to spot RDFa. •RDFa has the strongest theoretical foundation. It's also the most complicated. It has the ability to express more complicated statements of meaning and more complicated relationships. •...But it looks like it's probably going to remain the least popular of the options.