Practical Microformats - Voices That Matter

Practical Microformats Emily Lewis Voices That Matter June 28, 2010 Some rights reserved.

• Freelance web designer • Lover of web standards, semantic markup and CSS, accessibility, usability and microformats • Writer of web design/development topics at A Blog Not Limited, ScriptJunkie and MIX Online • Author of Microformats Made Simple Practical Microformats Voices That Matter

Today, you’ll learn • What are microformats • Beneﬁts 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 Practical Microformats Voices That Matter

What are microformats? Microformats: Web Semantics & More Practical Microformats Voices That Matter

Designed for humans ﬁrst and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Microformats: Web Semantics & More Practical Microformats Voices That Matter

Microformats enable the publishing and sharing of higher ﬁdelity information on the web. Microformats: Web Semantics & More Practical Microformats Voices That Matter

Building blocks that enable users to own, control, move and share their data on the web. Microformats: Web Semantics & More Practical Microformats Voices That Matter

Smart content Building blocks that enable users to own, control, move and share their data on the web. Microformats: Web Semantics & More Practical Microformats Voices That Matter

Smart content Building blocks that enable users to own, control, move and share Markup, with their data on the web. more meaning Microformats: Web Semantics & More Practical Microformats Voices That Matter

Huh? Practical Microformats Voices That Matter

Microformats are sets of HTML attributes and values that are applied to common web content - people, events, blog posts, reviews, tags - to provide more meaning. Practical Microformats Voices That Matter

Microformats are sets of HTML attributes and values that are applied to common web content - people, events, blog posts, reviews, tags - to provide more meaning. Content published with microformats can be extracted by software and indexed, downloaded, searched for, saved, cross- referenced or combined. Practical Microformats Voices That Matter

Formal microformats • hCalendar: event information • hCard: contact information • 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 • XOXO: outline content Practical Microformats Voices That Matter

And even more drafts • hAtom: syndicated • hProduct: consumer content products • hAudio: audio content • hRecipe: food and beverage recipes • hListing: open, distributed listings • hResume: Résumés and C.V.s • hMedia: video, images and audio media • hReview: reviews • hNews: journalistic • xFolk: bookmarks news Practical Microformats Voices That Matter

Let’s talk fundamentals Practical Microformats Voices That Matter

FUNDAMENTALS The basics • Use existing standards: (X)HTML • Emphasize semantics (POSH) • Intentionally simple • Address a speciﬁc “problem” • Humans ﬁrst, machines second Practical Microformats Voices That Matter

FUNDAMENTALS The beneﬁts • Semantics • User experience enhancements • More meaningful search results & better ﬁndability • Encourages consistency and standards • Minimal development effort • No need for software or special technologies • Enables sharing and re-use of your web content elsewhere Practical Microformats Voices That Matter

FUNDAMENTALS Who beneﬁts? • Managers • Developers • Designers • Content Authors • Users Practical Microformats Voices That Matter

EVERYONE BENEFITS Practical Microformats Voices That Matter

EVERYONE BENEFITS *BLATANT PLUG WARNING* Check out Microformats Role Play for more on how microformats beneﬁt different people Practical Microformats Voices That Matter

Sounds good, but is anyone really using them? Practical Microformats Voices That Matter

6,137,400,000 Practical Microformats Voices That Matter

60,600,000 - hReview 1,660,000,000 - hCard 2,090,000,000 - rel-tag 807,000,000 - hAtom 6,137,400,000 Yahoo! SearchMonkey results as of 12/17/09 452,000,000 - XFN 108,000,000 - hResume 148,000,000 - geo 768,000,000 - adr 44,100,000 - hCalendar Practical Microformats Voices That Matter

Everyone’s doing it • XFN: Twitter Flickr Google Buzz Huffduffer Digg LinkedIn 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 Google Maps Yahoo! Local Google Proﬁles Twitter Last.fm MySpace • hCalendar: Yahoo! Upcoming MapQuest Local Facebook Last.fm Eventful Google Rich Snippets Practical Microformats Voices That Matter

Everyone’s doing it • hResume: LinkedIn SimplyHired Stack Overﬂow • 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 Google Rich Snippets Microformats Wiki: Examples in the Wild Practical Microformats Voices That Matter

Enough with the sales pitch, let’s get started! Practical Microformats Voices That Matter

ELEMENTALS rel-me Assigned to links to sites that represent you online: <a href="http://ablognotlimited.com"> A Blog Not Limited</a> Practical Microformats Voices That Matter

ELEMENTALS rel-me Assigned to links to sites that represent you online: <a href="http://ablognotlimited.com" rel="me"> A Blog Not Limited</a> Practical Microformats Voices That Matter

ELEMENTALS rel-me Assigned to links to sites that represent you online: <a href="http://ablognotlimited.com" rel="me"> A Blog Not Limited</a> One of the values of XFN. Aids in online identity consolidation. Practical Microformats Voices That Matter

blog Practical Microformats Voices That Matter

blog portfolio Practical Microformats Voices That Matter

DIY DEMOS Identity consolidation • Create a new account at Huffduffer using a URL containing rel="me" (i.e. Twitter profile) • Visit Ident Engine’s Identity Discovery and enter a profile URL that uses rel="me" • Add a <link> to your Google Profile with rel="me" to your site for automatic discovery with Buzz Practical Microformats Voices That Matter

COMPOUNDS hCard Adds semantics to contact information for people, places and organizations/companies. Contact information published with hCard can be transformed into an electronic business card. hCard also improves the ﬁndability of your contact information. Practical Microformats Voices That Matter

STEP 1 Consider your content Emily Lewis A Blog Not Limited Albuquerque, NM 87106 emily@ablognotlimited.com Practical Microformats Voices That Matter

STEP 2 POSHify <dl> <dt>Emily Lewis</dt> <dd> <ul> <li><a href="http://www.ablognotlimited.com"> A Blog Not Limited</a></li> <li>Albuquerque, <abbr title="New Mexico">NM</abbr> 87106</li> <li><a href="mailto:emily@ablognotlimited.com"> emily@ablognotlimited.com</a></li> </ul> </dd> </dl> Practical Microformats Voices That Matter

STEP 3 Add hCard <dl> <dt>Emily Lewis</dt> <dd> <ul> <li><a href="http://www.ablognotlimited.com"> A Blog Not Limited</a></li> <li>Albuquerque, <abbr title="New Mexico">NM</abbr> 87106</li> <li><a href="mailto:emily@ablognotlimited.com"> emily@ablognotlimited.com</a></li> </ul> </dd> </dl> Practical Microformats Voices That Matter

STEP 3 Add hCard Practical Microformats Voices That Matter

STEP 3 Add hCard <dl class="vcard"> <dt>Emily Lewis</dt> <dd> <ul> <li><a href="http://www.ablognotlimited.com"> A Blog Not Limited</a></li> <li>Albuquerque, <abbr title="New Mexico">NM</abbr> 87106</li> <li><a href="mailto:emily@ablognotlimited.com"> emily@ablognotlimited.com</a></li> </ul> </dd> </dl> Practical Microformats Voices That Matter

STEP 3 Add hCard <dl class="vcard"> <dt class="fn">Emily Lewis</dt> <dd> <ul> <li><a href="http://www.ablognotlimited.com"> A Blog Not Limited</a></li> <li>Albuquerque, <abbr title="New Mexico">NM</abbr> 87106</li> <li><a href="mailto:emily@ablognotlimited.com"> emily@ablognotlimited.com</a></li> </ul> </dd> </dl> Practical Microformats Voices That Matter

STEP 3 Add hCard <dl class="vcard"> <dt class="fn">Emily Lewis</dt> <dd> <ul> <li><a href="http://www.ablognotlimited.com" class="url">A Blog Not Limited</a></li> <li>Albuquerque, <abbr title="New Mexico">NM</abbr> 87106</li> <li><a href="mailto:emily@ablognotlimited.com"> emily@ablognotlimited.com</a></li> </ul> </dd> </dl> Practical Microformats Voices That Matter

STEP 3 Add hCard <dl class="vcard"> <dt class="fn">Emily Lewis</dt> <dd> <ul> <li><a href="http://www.ablognotlimited.com" class="url">A Blog Not Limited</a></li> <li class="adr">Albuquerque, <abbr title="New Mexico">NM</abbr> 87106</li> <li><a href="mailto:emily@ablognotlimited.com"> emily@ablognotlimited.com</a></li> </ul> </dd> </dl> Practical Microformats Voices That Matter

STEP 3 Add hCard <dl class="vcard"> <dt class="fn">Emily Lewis</dt> <dd> <ul> <li><a href="http://www.ablognotlimited.com" class="url">A Blog Not Limited</a></li> <li class="adr"><span class="locality">Albuquerque </span>, <abbr title="New Mexico">NM</abbr> 87106</li> <li><a href="mailto:emily@ablognotlimited.com"> emily@ablognotlimited.com</a></li> </ul> </dd> </dl> Practical Microformats Voices That Matter

STEP 3 Add hCard <dl class="vcard"> <dt class="fn">Emily Lewis</dt> <dd> <ul> <li><a href="http://www.ablognotlimited.com" class="url">A Blog Not Limited</a></li> <li class="adr"><span class="locality">Albuquerque </span>, <abbr title="New Mexico" class="region">NM</abbr> 87106</li> <li><a href="mailto:emily@ablognotlimited.com"> emily@ablognotlimited.com</a></li> </ul> </dd> </dl> Practical Microformats Voices That Matter

STEP 3 Add hCard <dl class="vcard"> <dt class="fn">Emily Lewis</dt> <dd> <ul> <li><a href="http://www.ablognotlimited.com" class="url">A Blog Not Limited</a></li> <li class="adr"><span class="locality">Albuquerque </span>, <abbr title="New Mexico" class="region">NM</abbr> <span class="postal-code">87106</span></li> <li><a href="mailto:emily@ablognotlimited.com"> emily@ablognotlimited.com</a></li> </ul> </dd> </dl> Practical Microformats Voices That Matter

STEP 3 Add hCard <dl class="vcard"> <dt class="fn">Emily Lewis</dt> <dd> <ul> <li><a href="http://www.ablognotlimited.com" class="url">A Blog Not Limited</a></li> <li class="adr"><span class="locality">Albuquerque </span>, <abbr title="New Mexico" class="region">NM</abbr> <span class="postal-code">87106</span></li> <li><a href="mailto:emily@ablognotlimited.com" class="email">emily@ablognotlimited.com</a></li> </ul> </dd> </dl> Practical Microformats Voices That Matter

Final hCard Practical Microformats Voices That Matter

Final hCard <dl class="vcard"> <dt class="fn">Emily Lewis</dt> <dd> <ul> <li><a href="http://www.ablognotlimited.com" class="url">A Blog Not Limited</a></li> <li class="adr"><span class="locality">Albuquerque </span>, <abbr title="New Mexico" class="region">NM</abbr> <span class="postal-code">87106</span></li> <li><a href="mailto:emily@ablognotlimited.com" class="email">emily@ablognotlimited.com</a></li> </ul> </dd> </dl> Practical Microformats Voices That Matter

Worth noting • Markup doesn't matter, but it should 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 Practical Microformats Voices That Matter

DIY DEMOS Electronic business card • Go to H2VX Contacts Conversion, enter URL of a page with hCard and select “download.” Or copy the generated URL and paste into your own markup. • Using Firefox, install the Operator add-on and visit a page with hCard. Next, select “contacts” from the new Operator toolbar. • Add the Oomph Microformats Toolkit to your site with hCard. Once installed, select the “gleam” icon from the upper left-hand corner. Select any of the “contacts” export options. Practical Microformats Voices That Matter

COMPOUNDS hCalendar Adds semantics to event information. Event information published with hCalendar can be extracted and imported into users' calendars. hCalendar also improves the ﬁndability of your event information. Practical Microformats Voices That Matter

STEP 1 Consider your content at M atter ing on h s Voi ces T c e focun web feren ents i p th conancem In-de g adv io ns by rs and e xcitin with sess y autho , r d esign ted indust c respe rs. leade 10 2 9, 20 e 28- rence • Jun on Bay Confe Missi r • ente C Practical Microformats Voices That Matter

STEP 2 POSHify <h1><a href="http://www.voicesthatmatter.com/ webdesign2010">Voices That Matter</a></h1> <p>In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li>June 28-29, 2010</li> <li><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> Practical Microformats Voices That Matter

STEP 3 Add hCalendar <h1><a href="http://www.voicesthatmatter.com/ webdesign2010">Voices That Matter</a></h1> <p>In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li>June 28-29, 2010</li> <li><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> Practical Microformats Voices That Matter

STEP 3 Add hCalendar <div class="vevent"> <h1><a href="http://www.voicesthatmatter.com/ webdesign2010">Voices That Matter</a></h1> <p>In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li>June 28-29, 2010</li> <li><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> </div> Practical Microformats Voices That Matter

STEP 3 Add hCalendar <div class="vevent"> <h1 class="summary"><a href="http:// www.voicesthatmatter.com/webdesign2010">Voices That Matter</a></h1> <p>In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li>June 28-29, 2010</li> <li><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> </div> Practical Microformats Voices That Matter

STEP 3 Add hCalendar <div class="vevent"> <h1 class="summary"><a href="http:// www.voicesthatmatter.com/webdesign2010" class="url">Voices That Matter</a></h1> <p>In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li>June 28-29, 2010</li> <li><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> </div> Practical Microformats Voices That Matter

STEP 3 Add hCalendar <div class="vevent"> <h1 class="summary"><a href="http:// www.voicesthatmatter.com/webdesign2010" class="url">Voices That Matter</a></h1> <p class="description">In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li>June 28-29, 2010</li> <li><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> </div> Practical Microformats Voices That Matter

STEP 3 Add hCalendar <div class="vevent"> <h1 class="summary"><a href="http:// www.voicesthatmatter.com/webdesign2010" class="url">Voices That Matter</a></h1> <p class="description">In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li><span class="dtstart">June 28</span>-29, 2010</li> <li><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> </div> Practical Microformats Voices That Matter

STEP 3 Add hCalendar <div class="vevent"> <h1 class="summary"><a href="http:// www.voicesthatmatter.com/webdesign2010" class="url">Voices That Matter</a></h1> <p class="description">In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li><span class="dtstart"><span class="value-title" title="2010-06-28"> </span>June 28</span>-29, 2010</li> <li><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> </div> Practical Microformats Voices That Matter

STEP 3 Add hCalendar <div class="vevent"> <h1 class="summary"><a href="http:// www.voicesthatmatter.com/webdesign2010" class="url">Voices That Matter</a></h1> <p class="description">In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li><span class="dtstart"><span class="value-title" title="2010-06-28"> </span>June 28</span>-<span class="dtend">29, 2010</span></li> <li><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> </div> Practical Microformats Voices That Matter

STEP 3 Add hCalendar <div class="vevent"> <h1 class="summary"><a href="http:// www.voicesthatmatter.com/webdesign2010" class="url">Voices That Matter</a></h1> <p class="description">In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li><span class="dtstart"><span class="value-title" title="2010-06-28"> </span>June 28</span>-<span class="dtend"><span class="value-title" title="2010-06-29"> </span>29, 2010</span></li> <li><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> </div> Practical Microformats Voices That Matter

STEP 3 Add hCalendar <div class="vevent"> <h1 class="summary"><a href="http:// www.voicesthatmatter.com/webdesign2010" class="url">Voices That Matter</a></h1> <p class="description">In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li><span class="dtstart"><span class="value-title" title="2010-06-28"> </span>June 28</span>-<span class="dtend"><span class="value-title" title="2010-06-29"> </span>29, 2010</span></li> <li class="location"><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> </div> Practical Microformats Voices That Matter

Final hCalendar <div class="vevent"> <h1 class="summary"><a href="http:// www.voicesthatmatter.com/webdesign2010" class="url">Voices That Matter</a></h1> <p class="description">In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li><span class="dtstart"><span class="value-title" title="2010-06-28"> </span>June 28</span>-<span class="dtend"><span class="value-title" title="2010-06-29"> </span>29, 2010</span></li> <li class="location"><a href="http://www.acc- missionbayconferencecenter.com">Mission Bay Conference Center</a></li> </ul> </div> Practical Microformats Voices That Matter

DIY DEMOS Electronic calendar • Go to H2VX Events Conversion, enter URL of a page with hCalendar and select “download.” Or copy the generated URL and paste in your own markup. • Using Chrome, install the Michromeformats extension and visit a page with hCalendar. Next, select the new uf icon from your address bar and download the .ics ﬁle. Practical Microformats Voices That Matter

Combining microformats Practical Microformats Voices That Matter

For mo even sem re powantic er! Combining microformats Practical Microformats Voices That Matter

hCard and XFN Practical Microformats Voices That Matter

hCard and XFN <dl class="vcard"> <dt class="fn">Emily Lewis</dt> <dd> <ul> <li><a href="http://www.ablognotlimited.com" class="url" rel="me">A Blog Not Limited</a></li> <li class="adr"><span class="locality">Albuquerque </span>, <abbr title="New Mexico" class="region">NM</abbr> <span class="postal-code">87106</span></li> <li><a href="mailto:emily@ablognotlimited.com" class="email">emily@ablognotlimited.com</a></li> </ul> </dd> </dl> Practical Microformats Voices That Matter

hCalendar with hCard Practical Microformats Voices That Matter

hCalendar with hCard <div class="vevent"> <h1 class="summary"><a href="http:// www.voicesthatmatter.com/webdesign2010" class="url">Voices That Matter</a></h1> <p class="description">In-depth conference focusing on exciting advancements in web design, with sessions by respected industry authors and leaders.</p> <ul> <li><span class="dtstart"><span class="value-title" title="2010-06-28"> </span>June 28</span>-<span class="dtend"><span class="value-title" title="2010-06-29"> </span>29, 2010</span></li> <li class="location vcard"><a href="http://www.acc- missionbayconferencecenter.com" class="fn org url">Mission Bay Conference Center</a></li> </ul> </div> Practical Microformats Voices That Matter

Resources Practical Microformats Voices That Matter

Resources *BLATANT PLUG WARNING* Practical Microformats Voices That Matter

RESOURCES My book! Practical Microformats Voices That Matter

RESOURCES My book! Microformats Made Simple Practical Microformats Voices That Matter

RESOURCES My book! Microformats Made Simple Want a preview? Check out Rough Cuts excerpts *BLATANT PLUGS NOT OVER YET* Practical Microformats Voices That Matter

RESOURCES My blog tutorials Getting Semantic With Microformats: • rel-home, rel-tag, rel-license • XFN • hCard • hCalendar • hAtom • hResume • Themes & Issues • Value class pattern Practical Microformats Voices That Matter

RESOURCES Great stuff from other folks • Microformats Wiki • A good resource once you understand the basics • Microformats: Empowering Your Markup for Web 2.0 by John Allsopp • microformatique • Follow @microformats • Send questions to @microformateers Practical Microformats Voices That Matter

RESOURCES Authoring tools • hCard Creator • hCalendar Creator • hReview Creator • XFN Creator • Jeffrey Zeldman's Web Standards Advisor Dreamweaver plug-in Practical Microformats Voices That Matter

RESOURCES Validate, extract, transform • H2VX • Tails Export Add-on for Firefox • Optimus-Microformats Transformer • Semantic Checker Add- on for Firefox • Microform.at Transformer • Michromeformats extension for Chrome • Oomph Microformats Toolkit • SafariMicroformats plug-in for Safari • Operator Add-on for Firefox Practical Microformats Voices That Matter

RESOURCES Additional reading • Microformats Role Play • The Value Class Pattern • More on developing naming conventions, Microformats and HTML5 • Styling hReview Microformats • Styling XFN and rel-license links • Styling hCard Practical Microformats Voices That Matter

RESOURCES Additional reading • Discovering Magic • Meaningful Markup: POSH and Beyond • Google’s Semantic Web Push: Rich Snippets Usage Growing • Microformats Proﬁle URIs Updated Practical Microformats Voices That Matter

Questions? Comments? • emily@ablognotlimited.com • @emilylewis • Introduce yourself and let’s talk! Practical Microformats Voices That Matter

Thanks! Practical Microformats Voices That Matter

http://www.slicefactory.com	460
http://www.slideshare.net	215
http://ablognotlimited.com	61
http://techno-sphere.blogspot.com	37
http://www.ablognotlimited.com	15
http://translate.googleusercontent.com	10
http://www-rohan.sdsu.edu	10
http://www.newiwakuramission.com	3
http://www.taaza.com	1
http://webcache.googleusercontent.com	1

Practical Microformats - Voices That Matter

by Emily Lewis on Jun 28, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 813

Statistics

Practical Microformats - Voices That Matter — Presentation Transcript