Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Microformats: Web Semantics & More

Emily Lewis
October 04, 2011

Microformats: Web Semantics & More

Presentation for InterLab 2009, covering the basics you need to start publishing microformats and, in turn, enrich and add meaning to your content.

Emily Lewis

October 04, 2011

More Decks by Emily Lewis

Other Decks in Technology


  1. Microformats: Web Semantics & More • I’m a web designer

    for Pitney Bowes Business Insight • I love web standards, semantic markup and CSS, accessibility, usability and microformats • I write about web design (and other topics) at A Blog Not Limited • I just wrote Microformats Made Simple Hi!
  2. Microformats: Web Semantics & More Today, you’ll learn: • What

    are 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
  3. Microformats: Web Semantics & More Designed for humans first and

    machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.
  4. Microformats: Web Semantics & More Microformats enable the publishing and

    sharing of higher fidelity information on the web.
  5. Microformats: Web Semantics & More Building blocks that enable users

    to own, control, move and share their data on the web. Smart content Markup, with more meaning
  6. Microformats: Web Semantics & More 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.
  7. Microformats: Web Semantics & More XFN & Identity consolidation <a

    href="http://ablognotlimited.com" rel="me"> A Blog Not Limited</a> Assigned to links to sites that represent you online:
  8. Microformats: Web Semantics & More The basics • Use existing

    standards: (X)HTML • Emphasize semantics (POSH) • Intentionally simple • Address a specific “problem” • Humans first, machines second
  9. Microformats: Web Semantics & More The benefits • Semantics •

    User experience enhancements • More meaningful search results • Encourages consistency and standards • Minimal development effort • No need for software or special technologies • Enables sharing and re-use of your web content
  10. Microformats: Web Semantics & More Who benefits? • Managers •

    Developers • Designers • Content Authors • Users
  11. Microformats: Web Semantics & More *BLATANT PLUG WARNING* EVERYONE BENEFITS

    Check out Microformats Role Play for more on how microformats benefit different people
  12. Microformats: Web Semantics & More Another elemental: rel-tag <a href="/tags/microformats"

    rel="tag"> microformats</a> Describes the relationship of links to keywords (tags) for your content Indicates the link destination (href) is to a page that tells what the current page - or part of the current page - is about.
  13. Microformats: Web Semantics & More Why? Semantics FTW! Context-specific searching:

    • Technorati's Tags • Operator Plug-in for Firefox
  14. Microformats: Web Semantics & More hCard Contact information - person,

    place, organization/ company - published with hCard can be transformed into an electronic business card. • H2VX Contacts Conversion Service • Operator Plug-in for Firefox • Tails Export Plug-in for Firefox • Oomph Microformats Toolkit • Technorati's Contacts Feeds Service
  15. Microformats: Web Semantics & More 2 STEP 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:[email protected]"> [email protected]</a></li> </ul> </dd> </dl>
  16. Microformats: Web Semantics & More 3 STEP 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:[email protected]" class="email">[email protected]</a></li> </ul> </dd> </dl>
  17. Microformats: Web Semantics & More Worth noting • Markup doesn't

    matter, but it should be POSH • Sometimes you need to add non-semantic elements such as <span> and <div> • 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
  18. Microformats: Web Semantics & More hCalendar Event information published with

    hCalendar can be extracted and imported into users' calendars • H2VX Events Conversion Service • Operator Plug-in for Firefox • Tails Export Plug-in for Firefox • Oomph Microformats Toolkit • Technorati's Events Feeds Service
  19. Microformats: Web Semantics & More 1 STEP Content InterLab 2009

    A 4-day workshop aimed at DOE webmasters, website developers, web app developers & managers of internet resources. • November 16-19, 2009 • Brookhaven National Laboratory
  20. Microformats: Web Semantics & More 2 STEP POSHify <h1><a href=”http://www.bnl.gov/

    interlab09/”>InterLab 2009</a></h1> <p>A 4-day workshop aimed at DOE webmasters, website developers, web app developers & managers of internet resources.</p> <ul> <li>November 16-19, 2009</li> <li><a href=”http://www.bnl.gov/”>Brookhaven National Laboratory</a></li> </ul>
  21. Microformats: Web Semantics & More 3 STEP Add hCalendar <div

    class="vevent"> <h1><a href=”http://www.bnl.gov/interlab09/” class="summary url">InterLab 2009</a></h1> <p class="description">A 4-day workshop aimed at DOE webmasters, website developers, web app developers & managers of internet resources.</p> <ul> <li><span class="dtstart"><span class=”value- title” title=”2009-11-16”> </span>November 16</span>-<span class="dtend"><span class=”value-title” title=”2009-11-19”> </ span>19, 2009</span></li> <li class="location"><a href=”http:// www.bnl.gov/”>Brookhaven National Laboratory</a></li> </ul> </div>
  22. Microformats: Web Semantics & More hCalendar with hCard <div class=”vevent”>

    ... <li class=”location vcard”> <a href=”http://www.bnl.gov/” class=”fn org url”>Brookhaven National Laboratory</a> <ul class=”adr”> <li class=”post-office-box”>P.O. Box 5000</li> <li><span class=”locality”>Upton</span>, <abbr title=”New York” class=”region”>NY</abbr> <span class=”postal-code”>11973</span></li> </ul> </li> ... </div>
  23. Microformats: Web Semantics & More Microformats you can use now

    • 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
  24. Microformats: Web Semantics & More And even more drafts •

    hAtom: syndicated content • hAudio: audio content • hListing: open, distributed listings • hMedia: video, images and audio media • hNews: journalistic news • hProduct: consumer products • hRecipe: food and beverage recipes • hResume: Résumés and C.V.s • hReview: reviews • xFolk: bookmarks
  25. Microformats: Web Semantics & More 6,137,400,000 Yahoo! SearchMonkey results as

    of 12/17/09 1,660,000,000 - hCard 44,100,000 - hCalendar 2,090,000,000 - rel-tag 452,000,000 - XFN 60,600,000 - hReview 807,000,000 - hAtom 108,000,000 - hResume 768,000,000 - adr 148,000,000 - geo
  26. Microformats: Web Semantics & More Microformats in the wild •

    XFN: Twitter Flickr 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 Profiles Twitter Last.fm • hCalendar: Yahoo! Upcoming MapQuest Local Facebook, Last.fm Eventful • hResume: LinkedIn SimplyHired
  27. Microformats: Web Semantics & More My new book! Available for

    sale on Amazon Want a preview? Check out Rough Cuts excerpts *BLATANT PLUGS NOT OVER YET*
  28. Microformats: Web Semantics & More My blog tutorials Getting Semantic

    With Microformats: • rel-home, rel-tag, rel-license • XFN • hCard • hCalendar • hAtom • hResume • Themes & Issues • Value class pattern
  29. Microformats: Web Semantics & More 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
  30. Microformats: Web Semantics & More Authoring tools • hCard Creator

    • hCalendar Creator • hReview Creator • Optimus Microformats Transformer also offers a validator • Jeffrey Zeldman's Web Standards Advisor Dreamweaver plug-in
  31. Microformats: Web Semantics & More Questions? Comments? • [email protected]

    @emilylewis • Introduce yourself and let’s talk!