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

Microformats: Web Semantics & More

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.

39c8ef13c693c8d143679be9e3d8cf02?s=128

Emily Lewis

October 04, 2011
Tweet

More Decks by Emily Lewis

Other Decks in Technology

Transcript

  1. Some rights reserved. Microformats: Web Semantics & More Emily Lewis

    InterLab 2009 November 18
  2. 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!
  3. 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
  4. What are microformats? Microformats: Web Semantics & More Microformats: Web

    Semantics & More
  5. 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.
  6. Microformats: Web Semantics & More Microformats enable the publishing and

    sharing of higher fidelity information on the web.
  7. 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
  8. Huh? Microformats: Web Semantics & More

  9. 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.
  10. rel="me" Microformats: Web Semantics & More

  11. 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:
  12. Microformats: Web Semantics & More blog portfolio

  13. Microformats: Web Semantics & More blog portfolio

  14. IdentEngine: Identity consolidation in action Microformats: Web Semantics & More

  15. Let’s talk fundamentals Microformats: Web Semantics & More

  16. Microformats: Web Semantics & More The basics • Use existing

    standards: (X)HTML • Emphasize semantics (POSH) • Intentionally simple • Address a specific “problem” • Humans first, machines second
  17. 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
  18. Microformats: Web Semantics & More Who benefits? • Managers •

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

    Check out Microformats Role Play for more on how microformats benefit different people
  20. 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.
  21. Microformats: Web Semantics & More Why? Semantics FTW! Context-specific searching:

    • Technorati's Tags • Operator Plug-in for Firefox
  22. Operator Plug-in: Contextual search in action Microformats: Web Semantics &

    More
  23. Moving into compounds Microformats: Web Semantics & More

  24. 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
  25. Oomph: Electronic business card action Microformats: Web Semantics & More

  26. Publish hCard in 3 easy steps Microformats: Web Semantics &

    More
  27. Microformats: Web Semantics & More 1 STEP Content Emily Lewis

    A Blog Not Limited Albuquerque, NM 87106 emily@ablognotlimited.com
  28. 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:emily@ablognotlimited.com"> emily@ablognotlimited.com</a></li> </ul> </dd> </dl>
  29. 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:emily@ablognotlimited.com" class="email">emily@ablognotlimited.com</a></li> </ul> </dd> </dl>
  30. 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
  31. 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
  32. H2VX: Electronic calendar in action Microformats: Web Semantics & More

  33. Publish hCalendar in 3 easy steps Microformats: Web Semantics &

    More
  34. 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
  35. 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>
  36. 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>
  37. Combining microformats Microformats: Web Semantics & More For even more

    semantic power!
  38. 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>
  39. 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
  40. 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
  41. 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
  42. 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
  43. Microformats: Web Semantics & More *BLATANT PLUG WARNING* Getting started

  44. 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*
  45. 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
  46. 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
  47. 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
  48. Microformats: Web Semantics & More Questions? Comments? • emily@ablognotlimited.com •

    @emilylewis • Introduce yourself and let’s talk!
  49. Thanks! Microformats: Web Semantics & More