Web Directions North » Blog Archive » Design and Coding at the Cutting Edge: Part 2

Design and Coding at the Cutting Edge: Part 2

In the second part of the presentation, Tantek Çelik covered Microformats.

D. Keith Robinson is delivering an introduction.

Microformats

“The big picture”

• heard of creative commons - presentation is cc.
• how did we get here?
• separation of markup & style
• semantic HTML proficiency
• class names for meaning/IA
• recognizing solved problems
  • noticing common patterns
• reusing vocabularies saves time
• reusing also shares meaning
  • we’re all trying to communicate better
• community established for learning, sharing, collaborating
  • let’s establish some conventions

common content first

• prioritization
• simple solutions to common problems/content first
• blogroll relationships - XFN
• licenses - rel-license
• lists and outlines - XOXO
• people and organizations - hCard
• events - hCalendar
• topics - rel-tag
• ratings & reviews - hReview
• tagged links - xFolk
• locations - adr & geo
• episodic content - hAtom
• enclosed media - rel-enclosure
• for sale/wanted listing hListing
• hResume

just better markup?

• cleanly separated valid semantic publishing
  • maintenance, changes, updates
  • collaboration, team work
  • accessibility
  • diverse device support
• new user benefits
  • easier to move data - less copy/paste
  • subscribing to structured content - events
  • better search (more engines coming online that support microformats)
  • re-entering all my contacts problem

Technorati Contact Page

• goes through demo of adding address to contact manager
• seamless import, hCard to vCard converter

What are Microformats?

• enable the publishing and sharing of higher fidelity information
• building blocks that enable user to own, control, move and share their data on the web.
  • why let users take data? it’s the right thing to do. trust the user.
• small bits of html that identify data types like people and events
• the fastest and simplest way to provide an API for your website
  • you’ve created a building block for your users

more than just “good class names”

• principles keep things micro
• process emphasizes getting real
• community minimizes duplicates
  • if you want to share information, you want the consensus
  • we have an area to instantly look up common information

Microformats principles

• solve a specific problem
• simple as possible
• evolutionary improvements
• solve 80% of the problem
• humans first, machine second
• the point of this information is human created content from one human to another.
• presentable and parsable
• adapt to current behaviors
• reuse from widely adopted standards
• modularity/ embeddability
• decentralized development, content, services.
• explicitly encourage “spirit of the web”

Linked License

• Analogy: link to a stylesheet with rel=”stylesheet”
• just add rel=”license” to a link.
• automatically added into license chooser
• Yahoo (cc) and Google “Usage Rights” search

• pick a specific, simple problem and define it
• research & document current web publishing behaviour
• document existing formats in the problem area
• brainstorm with implied schema / reuse names
• iterate within the community
  • small steps to bigger steps

BarCamp

• hCalendar to iCalendar converter
• seamless subscription into a calendar application
• easier than implementing .ics support directly
• (hCalendar example)

Microformats: 2004 to 2007

• it’s evolution. not everything survives.
• recently released:
• Yahoo! local
• 15 million local business listings with hCards
• local events with hCalendar
• reviews of business etc with hReview
• Edgegio - 500k+ hListings
• Flickr added geo
• Zooomr profiles with hCard + XFN
• Pingerati.net launched - updates distributor
• Technorati Contacts Service, Events Service
• Operator - Firefox extension detects hCard, hCalendar, geo, hReview, rel-tag, hResume, more every week
• LinkedIn - 9M+ hResumes
• Operator Demo

Microformats.org Community

• IRC channel
• Email
• Blog
• Wiki
• new mailing list
• Help Develop
  • citation
  • media-info
  • photo notes

Microformats excercise for the reader

• create your own hCard
  • use the hCard creator
  • or use hCard authoring tips to markup your contact info
• “Add to Address Book” link using Technorati
• Publish it on your site
• Check it with Operator
• Add a LInk to it in the hCard New Examples
• Ping Pingerati

Posted by Jonathan on 8/02/07 at 12:46 pm