Microformats or: How I Learned to Write POSH and Love the Semantic Web
Session for In Control Orlando, covering the basics and benefits of microformats, as well as examples and exercises to help publish microformats (XFN, hCard and hCalendar). Also includes a discussion about POSH, HTML5 and ARIA roles.
microformats • Benefits of microformats • How to enrich your content with some common microformats • Where you can see microformats in action • Lots of resources to help you publish microformats
practices • More efficient • Great for team-based development • Structured content • Semantic markup GATEWAY DRUG MIX Online: Web Standards: Where the ROI Is
set of simple, open data formats built upon existing and widely adopted standards. Microformats enable the publishing and sharing of higher fidelity information on the web. Microformats Wiki: What Are Microformats
• rel-license: license links • rel-nofollow: restricting increased page rank for links • rel-tag: tag links • VoteLinks: for, against and abstain links • XFN: distributed social networks
and unlikely to change. Draft microformats are relatively far along in the specification process, but haven’t been formally completed. They are subject to change.
From a user’s perspective, web content published with microformats is indistinguishable from that published without. • “Invisible” metadata for machine readability
Sunday, February 20 for the In Control welcome happy hour at the Embassy Suites bar. Machines Don’t Blahblah blahbliby blah blahblahblibity blah blah blahblah blahblahblibity blah
parsable. It can be extracted and indexed, downloaded, searched for, saved, cross- referenced and combined. • Web site becomes an API, enabling sharing and re-use of content.
Plaxo Technorati Last.fm Google Social Graph API Ident Engine • rel-license: Creative Commons Yahoo! CC Search Google "Usage Rights" search • hCard: Google Rich Snippets 37Signals Google Maps Yahoo! Local Google Profiles Twitter Last.fm MySpace • hCalendar: Yahoo! Upcoming MapQuest Local Facebook Last.fm Eventful
hReview: Google Rich Snippets Yelp Yahoo! Local Technorati New York Times Travel Cork’d • hListing: Every Car Listed RealEstate.com dealtagger • hRecipe: Food Network Williams Sonoma Recipes Microformats Wiki: Examples in the Wild
containing tags (keywords) to your content: The rel="tag" attribute-value pair indicates the link destination (href) is to a page that tells what the current page - or part of the current page - is about.
acquaintance friend Professional (one or both values) colleague co-worker Family (one value) kin spouse child parent sibling Romantic (any or all values) muse crush date sweetheart Physical met Geographic (one value) neighbor co-resident Identity me
can apply XFN to indicate your social relationship with that person: <a href="http://www.christopherschmitt.com/" rel="met friend colleague muse"> Christopher Schmitt</a>
and organizations/companies. Contact information published with hCard can be transformed into an electronic business card. • H2VX Contacts Conversion Service • Operator Add-on for Firefox • Tails Export Add-on for Firefox • Oomph Microformats Toolkit • Michromeformats extension for Chrome
all of the contact information. Then, add the relevant hCard properties and sub-properties via the class attribute Web Content hCard class Values Name (first and last) fn Web site url Address adr City locality State region ZIP postal-code Email email Add hCard
be POSH • Attribute values are case-sensitive • Root properties cannot be combined with sub-properties • You don't need additional class values for styling, but you can use them
with hCalendar can be extracted and imported into users' calendars • H2VX Events Conversion Service • Operator Add-on for Firefox • Tails Export Add-on for Firefox • Oomph Microformats Toolkit • Michromeformats extension for Chrome
all of the contact information. Then, add the relevant hCalendar properties and sub-properties via the class attribute Web Content hCalendar class Values Event name summary Web site url Description description Type of event category Start date dtstart End date dtend Location location Add hCalendar
celebrating the creativity and passion behind the coolest new media technologies.</p> <ul> <li>March 11-15, 2011</li> <li>Austin Convention Center</li> </ul> </div> 3 STEP Add hCalendar
conference celebrating the creativity and passion behind the coolest new media technologies.</p> <ul> <li>March 11-15, 2011</li> <li>Austin Convention Center</li> </ul> </div> 3 STEP Add hCalendar
</span>March 11</span> Offers authors several options for marking up date-time information: • Machine-readable date information is the title attribute value • Screen-readers won’t read the title value • No tooltip Microformats Wiki: Value Class Pattern
role="search" • role="article" • role="complementary" • role="contentinfo" ARIA not needed on <nav> not needed on <aside> not needed on <footer> Paciello Group: Using WAI ARIA Landmark Roles
emilylewis
shumei_ito
linyows
shigashiyama
tohutohu
kazushi_ohata
ewolff
oracle4engineer
msato
shonansurvivors
hirosatogamo
minorun365
tubone24
ammeep
andyhume
62gerente
jonyablonski
samanthasiow
malarkey
bryan
orderedlist
addyosmani
brianwarren
jakevdp
paulrobertlloyd
