Microformats + DOM / AJAX = Mashup Nirvana
This is a presentation. If you'd like to view all the slides like a normal web page, you can.
Agenda
- Microformats Introduction
- Development Case Study
- Cool Examples
- Generation
- Discovery
- Transformation
- Stuff You Can Use Today
- Questions! (you can ask them any time, honest)
What are Microformats?
Microformats are a set of simple, open data formats built upon existing and widely adopted standards.
No, Really...
- Conceptually:
- A way of thinking about data formats that's highly correlated with semantic XHTML, AKA the real world semantics, AKA lowercase semantic web, AKA lossless XHTML
- a set of simple open data format standards that many (including Technorati) are actively developing and implementing for more/better structured blogging and web microcontent publishing in general.
- Practically:
- Add a little bit of extra stuff to your existing markup and you've joined the party.
- Small changes to how you already create XHTML.
- Makes your good markup better without a lot of extra work.
Sounds Hard...
<address>
Westin Boston Waterfront<br />
425 Summer Street<br />
Boston, MA 02210<br />
<a href="http://maps.google.com/maps?q=425+Summer+Street,+Boston,+MA+02210&hl=en" target="_map">View Map</a>
</address>
That Same Code With Microformats!
<address class="vcard">
<p class="org">Westin Boston Waterfront</p>
<p class="street-address">425 Summer Street</p>
<p><b class="locality">Boston</b>, <b class="region">MA</b> <b class="postal-code">02210</b></p>
<a href="http://maps.google.com/maps?q=425+Summer+Street,+Boston,+MA+02210&hl=en" target="_map">View Map</a>
</address>
That Wasn't So Hard, Was It?
- We can use a little CSS (two or three lines at the most) to make that look like we want.
- We'll talk about why you'd want to do all that a little later.
- But first... how we create microformats!
Paving the Cowpath
- solve for existing applications
- solve a specific problem
- start as simple as possible
- design for humans first, machines second
- reuse building blocks from widely adopted standards
- modularity / embeddability
- enable and encourage decentralized and distributed development, content, services
Reuse, Reuse, Reuse!
- reuse building blocks from widely adopted standards
- Before you go inventing a new language, learn the current ones
- Document them, find strengths, weaknesses and reasons behind decisions
- Pick the best from each one, or just go with what exists
Current Microformats
- Several are "finished", lots are very close
- Several are in the brainstorming and example phases.
XFN, rel-license and rel-tag
- All use the
rel attribute of links.
- XFN: XHTML Friends Network - Tell the world what your relationship is with the folks on your blogroll.
- Example:
<a href="http://lawver.net/jen" rel="spouse"></a>
- rel-license: Define the license for your content. Becoming more and more important
- Example:
<link rel="license" href="http://creativecommons.org/licenses/by/2.0/"/>
- Example 2:
Licensed under <a href="http://creativecommons.org/licenses/by/2.0/" rel="license">Creative Commons 2.0</a>
- rel-tag: Tag the current page with links
- Example:
<a href="http://lawver.net/politics" rel="tag">politics</a>
XOXO
- Mark up lists like outlines or blogrolls (comparable to OPML)
- v1.0 is final
- Homepage
XOXO Example
<ul class="xoxo">
<li>An item
<ul>
<li>A sub-item</li>
</ul>
</li>
<li>Another item</li>
</ul>
hCalendar
- Pretty much everything in the iCalendar spec (you know, an iCal or Outlook entry) in HTML.
- baked, set in stone, etc
- Homepage
hCal Example
<ul><li class="vevent">
<h4 class="summary">
<a class="url" href="http://theajaxexperience.com/" target="_new">The AJAX Experience</a>
</h4>
<div class="description">I'll be speaking about microformats, and their uses
in DOM scripting, web services and AJAX-y goodness
</div>
<p class="location">Boston, MA</p>
<p>
<abbr class="dtstart" title="2006-10-23">10/23/2006</abbr> -
<abbr class="dtend" title="2006-10-25">10/25/2006</abbr>
</p>
</li></ul>
hCard
- Everything in an address book card, only in HTML.
- Done!
- Homepage
hCard Example
<div class="vcard">
<a class="url fn" href="http://lawver.net/">Kevin Lawver</a> -
<a href="http://aol.com" class="org">AOL</a>
</div>
hAtom
- The ATOM feed format turned into HTML.
- Draft, but a solid one.
- Homepage
- We'll look at an example in a little bit.
hAtom Example
<div class="hentry">
<h3 class="entry-title">
<a href="http://someurl.com/blog/permalink" class="bookmark">My Blog Post</a>
</h3>
<div class="entry-content">I'm going to AJAX Experience!</div>
<p>
Published <abbr title="2006-10-24T09:30:30">10/24/2006</abbr>
by <b class="author">Kevin Lawver</b>.
</p>
</div>
hReview
- A way to mark up reviews.
- Drafty, but closey to doney
- Homepage
- If we have time, we'll look at an example of this too.
hReview Example
<div class="hreview">
<span class="reviewer vcard">
<span class="fn">anonymous</span>,
<abbr class="dtreviewed" title="20050418">April 18th, 2005</abbr>
</span>
<div class="item">
<a lang="zh" class="url fn" href="http://www.imdb.com/title/tt0299977/">
Ying Xiong (<span lang="en">HERO</span>)
</a>
</div>
<div>Rating: <span class="rating">4</span> out of 5</div>
<div class="description"><p>
This movie has great music and visuals.
</p></div>
</div>
hResume
- Mark up your resume
- A little draftier than the others.
- Homepage
Development Example: ModuleT
- Needed to create modules, but couldn't use other existing formats
- Wanted it to be easy for developers to create, test and deploy them.
- Wanted to be able to embed them in any other format or HTML page.
- So, we created a microformat!
Document Existing Formats
Draft, Publish, Revise, Repeat
- Our profile went through several drafts.
- Each one got better.
- We eventually had to stop and actually get to work...
ModuleT in Action
- Currently in use on AIM Pages
- Coming soon to other AOL products
- Released under a royalty-free license, so anyone can use it for pretty much anything.
Generating Microformats
- I created a module (javascript)
- Allows users to create a simple list of events
- Not terribly exciting, except they're marked up as hcal events!
- See it in use (left hand side)
Parsing Microformats
- I have the Operator plugin, which will light up icons when it sees microformats on the page.
- Click the one that lit up, and it should show you the info it found on the page.
- We'll talk about this a little later.
Discoverability
- Ok, big deal, you can put some dates on your page.
- But, what if everyone else did too?
Shared Events
- Now, when I go to my other page, it should tell me what events "we" have in common.
How Sharing Works
- Module javascript
- Using AIM Page's super cool pageQuery API, I can get just a piece of a page
- I take the URLs out of that chunk, and compare it to the URLs in the my-events module on the current page.
- If any are the same, they get added to the list, and you get a friendly "Hey, you've got events in common" message.
- Check out the module above that one. If I go to my other page, we'll see what events the two pages share.
Possibilities
- SEO is a dirty word, but this could turn out to be SEO on crack.
- Lots and lots of well-marked up data just laying around the web... and spiders crawling all of it.
- I smell smarter spiders in our future.
Your Document Becomes the API
- Using ModuleT, we built a web service to pull individual modules out of a page
- Example
- Lots of other examples of transforming microformats into other things (more on that in a second)
What if...
- You wrote XHTML expecting it to be transformed?
- Your web page was the API, what would happen?
- You could embed pieces your web page in other pages, what would that look like?
- Which leads to...
Transformation
- Ok, let's start with a new module: Cheap Blog
- It's a cheap blog! It stores everything in the page!
- Now that we have a blog in the page, what can we do with it?
Transform it!!
Using Robert Bachman's XSLT, we get just the piece of the page we need, then transform it!- Originally using Robert's stylesheet, now using PHP DOM stuff because my foo is not strong enough (or I didn't have enough time to troubleshoot some encoding issues).
- Example
- It's not perfect, but this is a demo, right?
Other Tools for Transformation
- There are several existing stylesheets and services for microformats (converting to and from):
Mashups and Microformats
- Microformats make getting meaningful data out of HTML documents easier
- Consistent class names and formatting mean repeatable parsing across documents
- Allows for a whole new set of web services
Beginnings of the Revolution
- Browser plugins/extensions
- Web services
- Bookmarklets
- Others?
Other Microformat Web Services and Extensions
- Pingerati - Sends pings to appropriate microformat-aware services based on what's in your page.
- Greasemonkey - Screaming for more microformat mashups. Already treats web pages as a canvas.
Things That Would Make Me Happy
- Microformat to JSON conversion tools
- A "global" widget/module spec
- Consistent licensing of web pages, feeds and services so I know what I can use/embed
- More smart people thinking about web services around microformats.
The Future is Bright
- The Semantic Web is taking forever, and depends on people creating new ontologies, and users fundamentally changing how they use the web.
- Microformats can be the semantic web today, with existing user behavior and using existing browsers and tools.
- There are now millions of web pages with microformats embedded in them.
- The services around them are getting better and better as more people start paying attention.
- What can you do with them?
Return on Investment
- Because someone asked that I cover it... if you use microformats, you'll get:
- more SEO juice in the future
- cool Web 2.0 buzz from the geek-o-sphere
- automatic functionality as more tools become available
- instant web services because your page becomes your API
Questions?
- One, two, three... four?
- More? Is it still too early for questions?