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

Microformats Workshop

Microformats Workshop

Workshop for Environments for Humans, covering the history and foundation of microformats, as well as examples and exercises to help publish microformats (XFN, hCard and hCalendar). Also includes numerous demonstrations and microformats resources, including validation and authoring tools.

39c8ef13c693c8d143679be9e3d8cf02?s=128

Emily Lewis

October 04, 2011
Tweet

More Decks by Emily Lewis

Other Decks in Technology

Transcript

  1. Some rights reserved. Microformats Workshop Emily Lewis The Workshop Summits

    January 15, 2010 Environments for Humans
  2. Microformats Workshop The Workshop Summits • 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 2
  3. Microformats Workshop The Workshop Summits 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
  4. Microformats Workshop The Workshop Summits What are microformats? 4

  5. Microformats Workshop The Workshop Summits Designed for humans first and

    machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. 5 Microformats Workshop The Workshop Summits Microformats enable the publishing and sharing of higher fidelity information on the web. Microformats Wiki: What Are Microformats
  6. Microformats Workshop The Workshop Summits Building blocks that enable users

    to own, control, move and share their data on the web. Smart content Markup, with more meaning 6 Microformats Workshop The Workshop Summits Microformats Wiki: What Are Microformats
  7. Microformats Workshop The Workshop Summits Sounds complicated. Let’s make it

    easier. 7
  8. Microformats Workshop The Workshop Summits Microformats are sets of HTML

    attributes and values that are applied to common web content to describe that content and give it more meaning. 8
  9. Microformats Workshop The Workshop Summits 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 9
  10. Microformats Workshop The Workshop Summits 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 10
  11. Microformats Workshop The Workshop Summits Formal vs. draft specifications 11

    Formal microformats are those that are stable 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.
  12. Microformats Workshop The Workshop Summits THE BASICS Use existing standards

    • (X)HTML • rel • class • rev • vCard: hCard • iCalendar: hCalendar • Atom: hAtom • Other microformats and naming principles 12
  13. Microformats Workshop The Workshop Summits THE BASICS Emphasize semantics •

    Core purpose is meaning • POSH - Plain Old Semantic HTML • “Self-describing” - Chris Mills • <p> for paragraph content • <ul>, <ol>, <dl> for list content • <h1>-<h6> for heading content 13
  14. Microformats Workshop The Workshop Summits THE BASICS Address a specific

    “problem” • Common, real-world web content • People • Organizations • Events • Blog posts • Reviews • Tags 14
  15. Microformats Workshop The Workshop Summits THE BASICS Intentionally simple •

    Easy to learn and use • Based on current human behavior on the web • Aimed at 80% of use-cases; the most common 15
  16. Microformats Workshop The Workshop Summits THE BASICS Humans first, machines

    second • Human-readable content • From a user’s perspective, web content published with microformats is indistinguishable from that published without. • “Invisible” metadata for machines • Search engines, user agents, applications, etc. • Allows human-readable content to be extracted and used for a wide range of purposes. 16
  17. Microformats Workshop The Workshop Summits Why? 17

  18. Microformats Workshop The Workshop Summits Semantics THE BENEFITS • Meaning

    for machines • Content published with microformats is 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 18
  19. Microformats Workshop The Workshop Summits User experience enhancements THE BENEFITS

    • More meaningful search results • Google Rich Snippets • Download to address book • Download to calendar 19
  20. Microformats Workshop The Workshop Summits Google Rich Snippets: More meaningful

    search 20
  21. Microformats Workshop The Workshop Summits DEMO: Google Rich Snippets Visit

    http://google.com and search for “coffee san francisco” 21
  22. Microformats Workshop The Workshop Summits DEMO: Google Rich Snippets Scroll

    down to see how the Rich Snippet displays hReview information* 22 *NOTE: Google is still rolling out this feature, so not all search users will see Rich Snippets
  23. Microformats Workshop The Workshop Summits Minimal investment THE BENEFITS •

    Easy to learn • Easy to implement • No need for special software • No need to learn new technologies 23
  24. Microformats Workshop The Workshop Summits Encourages standards THE BENEFITS •

    Web standards • Valid, semantic markup • Standard workflows and processes for development teams • Consistent markup • Standard naming conventions for styling 24
  25. Microformats Workshop The Workshop Summits Enrich content with semantics A

    BIT OF HISTORY • Early 2000s • Semantic, structural markup • Separate CSS for presentation • 2003-04 • XFN • rel-license • rel-tag • VoteLinks 25
  26. Microformats Workshop The Workshop Summits 6,137,400,000+ published AND TODAY 26

    • 1,660,000,000 - hCard • 44,100,000 - hCalendar • 60,600,000 - hReview • 108,000,000 - hResume • 807,000,000 - hAtom • 452,000,000 - XFN • 768,000,000 - adr • 148,000,000 - geo Yahoo! SearchMonkey results as of 12/17/09
  27. Microformats Workshop The Workshop Summits Everyone’s doing it AND TODAY

    • 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 MySpace • hCalendar: Yahoo! Upcoming MapQuest Local Facebook Last.fm Eventful 27
  28. Microformats Workshop The Workshop Summits Everyone’s doing it AND TODAY

    • hResume: LinkedIn SimplyHired Stack Overflow • 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 28 Microformats Wiki: Examples in the Wild
  29. Microformats Workshop The Workshop Summits Let’s get started! 29

  30. Microformats Workshop The Workshop Summits Elemental microformats • Single attribute-value

    pair • Often used as building blocks for other microformats 30
  31. Microformats Workshop The Workshop Summits rel-tag ELEMENTALS 31 <a href="/tags/microformats/"

    rel="tag">microformats</a> Describes the relationship of links 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.
  32. Microformats Workshop The Workshop Summits What can you do with

    rel-tag? ELEMENTALS 32 • Context-specific search • Technorati's Tags • Operator Plug-in for Firefox
  33. Microformats Workshop The Workshop Summits Operator Plug-in: Contextual search in

    action 33
  34. Microformats Workshop The Workshop Summits DEMO: Operator Plug-in Using Firefox,

    visit https://addons.mozilla.org/en-US/firefox/addon/ 4106 and install the plug-in (“Add to Firefox”) 34
  35. Microformats Workshop The Workshop Summits DEMO: Operator Plug-in Using Firefox

    with plug-in installed, visit http://ablognotlimited.com/ s/130 and scroll down to see tags for this post 35
  36. Microformats Workshop The Workshop Summits DEMO: Operator Plug-in Select “Tagspaces”

    from Operator toolbar 36
  37. Microformats Workshop The Workshop Summits rel-me ELEMENTALS 37 <a href="http://ablognotlimited.com"

    rel="me"> A Blog Not Limited</a> Assigned to links to sites that represent you online:
  38. Microformats Workshop The Workshop Summits What can you do with

    rel-me? ELEMENTALS 38 • Identity consolidation • Ident Engine • Huffduffer
  39. Microformats Workshop The Workshop Summits blog portfolio 39

  40. Microformats Workshop The Workshop Summits blog portfolio 40

  41. Microformats Workshop The Workshop Summits Ident Engine: Identity consolidation in

    action 41
  42. Microformats Workshop The Workshop Summits DEMO: Ident Engine Visit http://identengine.com/identity-discovery.htm

    and enter URL of a profile page 42
  43. Microformats Workshop The Workshop Summits DEMO: Ident Engine 43

  44. Microformats Workshop The Workshop Summits Huffduffer: Simplified account creation 44

  45. Microformats Workshop The Workshop Summits DEMO: Huffduffer Visit http://huffduffer.com/signup/ and,

    if you don’t already have an account, submit your details using a web site with rel-me (i.e. Twitter profile) 45
  46. Microformats Workshop The Workshop Summits DEMO: Huffduffer 46

  47. Microformats Workshop The Workshop Summits XFN ELEMENTALS 47 XFN is

    used to describe social relationships among people me is just one of the values for the XFN microformat
  48. Microformats Workshop The Workshop Summits XFN ELEMENTALS 48 Relationship XFN

    rel Values Friendship (one value) contact 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
  49. Microformats Workshop The Workshop Summits XFN ELEMENTALS 49 For links

    to other people’s identities online, you can apply XFN to indicate your social relationship with that person: <a href="http://www.christopherschmitt.com/" rel="colleague muse">
  50. Microformats Workshop The Workshop Summits Moving into compounds 50

  51. Microformats Workshop The Workshop Summits Compound microformats • Several attribute-value

    pairs (properties and sub- properties) • Utilize other microformats as building blocks 51
  52. Microformats Workshop The Workshop Summits hCard COMPOUNDS 52 Adds semantics

    to contact information for people, places and organizations/companies. Contact information 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
  53. Microformats Workshop The Workshop Summits Oomph: Electronic business card action

    53
  54. Microformats Workshop The Workshop Summits DEMO: Oomph Microformats Toolkit Visit

    http://visitmix.com/labs/oomph/2.0/client/style/firstrun.html and click the glowing icon in the upper left corner 54
  55. Microformats Workshop The Workshop Summits DEMO: Oomph Microformats Toolkit Options

    to export contact’s electronic business card 55
  56. Microformats Workshop The Workshop Summits DEMO: Oomph Microformats Toolkit 56

  57. Microformats Workshop The Workshop Summits hCard in 3 easy steps

    COMPOUNDS 57 1. Identify content 2. POSHify http://www.emilylewisdesign.com/MicroformatsWorkshop/hCard-POSH.html 3. Add hCard http://www.emilylewisdesign.com/MicroformatsWorkshop/hCard-Final.html
  58. Microformats Workshop The Workshop Summits 1 STEP Start with Content

    Do you have contact information for a person, place or organization? 58 Emily Lewis A Blog Not Limited Albuquerque, NM 87106 emily@ablognotlimited.com
  59. Microformats Workshop The Workshop Summits 2 STEP Add POSH Apply

    valid, semantic markup 59 <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> http://www.emilylewisdesign.com/MicroformatsWorkshop/hCard-POSH.html
  60. Microformats Workshop The Workshop Summits class Value 3 Web Content

    STEP Add hCard Then, add the relevant hCard properties and sub-properties via the class attribute 60 • Name (first and last) • Web site • Address • City • State/province • ZIP code • Email address • fn • url • adr • locality • region • postal-code • email Add the root vcard to an element containing all of the contact information
  61. Microformats Workshop The Workshop Summits Final hCard COMPOUNDS 61 <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> http://www.emilylewisdesign.com/MicroformatsWorkshop/hCard-Final.html
  62. Microformats Workshop The Workshop Summits Non-semantic elements A CLOSER LOOK

    62 <li class="adr"> <span class="locality">Albuquerque</span>, <abbr title="New Mexico" class="region">NM</abbr> <span class="postal-code">87106</span> </li>
  63. Microformats Workshop The Workshop Summits Don’t forget about validation! A

    CLOSER LOOK 63 • W3C Markup Validation Service • Optimus Microformats Transformer
  64. Microformats Workshop The Workshop Summits DEMO: Markup validation Visit http://validator.w3.org/

    and enter URL for page with hCard 64
  65. Microformats Workshop The Workshop Summits DEMO: Markup validation If there

    are errors, fix them! 65
  66. Microformats Workshop The Workshop Summits DEMO: Optimus validation Visit http://microformatique.com/optimus/

    and enter URL for page with hCard 66
  67. Microformats Workshop The Workshop Summits DEMO: Optimus validation If there

    are errors, fix them! 67
  68. Microformats Workshop The Workshop Summits Also 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 68
  69. Microformats Workshop The Workshop Summits hCalendar COMPOUNDS 69 Adds semantics

    to event information. 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
  70. Microformats Workshop The Workshop Summits H2VX: Electronic calendar in action

    70
  71. Microformats Workshop The Workshop Summits DEMO: H2VX Visit http://h2vx.com/ics/ and

    enter URL for page with hCalendar (i.e. http://environmentsforhumans.com/workshop-summits/) 71
  72. Microformats Workshop The Workshop Summits DEMO: H2VX Select “Download” to

    add .ics to your electronic calendar 72
  73. Microformats Workshop The Workshop Summits DEMO: H2VX Or select “Subscribe”

    73
  74. Microformats Workshop The Workshop Summits DEMO: H2VX Use with your

    own site 74
  75. Microformats Workshop The Workshop Summits hCalendar in 3 easy steps

    COMPOUNDS 75 1. Identify content 2. POSHify http://www.emilylewisdesign.com/MicroformatsWorkshop/hCalendar-POSH.html 3. Add hCalendar http://www.emilylewisdesign.com/MicroformatsWorkshop/hCalendar-Final.html
  76. Microformats Workshop The Workshop Summits 1 STEP Start with Content

    Do you have event information? 76 SXSWi 2010 A 5-day conference celebrating the creativity and passion behind the coolest new media technologies • March 12-16, 2010 • Austin Convention Center
  77. Microformats Workshop The Workshop Summits 2 STEP Add POSH Apply

    valid, semantic markup 77 <h1><a href="http://sxsw.com/interactive">SXSWi 2010</a></h1> <p>A 5-day conference celebrating the creativity and passion behind the coolest new media technologies.</p> <ul> <li>March 12-16, 2010</li> <li>Austin Convention Center</li> </ul> http://www.emilylewisdesign.com/MicroformatsWorkshop/hCalendar-POSH.html
  78. Microformats Workshop The Workshop Summits class Value 3 Web Content

    STEP Add hCalendar Then, add the relevant hCalendar properties and sub-properties via the class attribute 78 • Event name • Web site • Description • Type of event • Start date • End date • Location • summary • url • description • category • dtstart • dtend • location Add the root vevent to an element containing all of the event information
  79. Microformats Workshop The Workshop Summits Final hCalendar COMPOUNDS 79 <div

    class="vevent"> <h1 class="summary"><a href="http://sxsw.com/interactive" class="url">SXSWi 2010</a></h1> <p class="description">A 5-day <span class="category">conference</span> celebrating the creativity and passion behind the coolest new media technologies.</p> <ul> <li><span class="dtstart"><span class="value-title" title="2010-03-12"> </span>March 12</span>-<span class="dtend"><span class="value-title" title="2010-03-16"> </ span>16, 2009</span></li> <li class="location">Austin Convention Center</li> </ul> </div> http://www.emilylewisdesign.com/MicroformatsWorkshop/hCalendar-Final.html
  80. Microformats Workshop The Workshop Summits Non-semantic elements A CLOSER LOOK

    80 <div class="vevent"> ... </div> <p class="description">A 5-day <span class="category">conference</span> celebrating the creativity and passion behind the coolest new media technologies.</p> <li><span class="dtstart"><span class="value-title" title="2010-03-12"> </span>March 12</span>-<span class="dtend"><span class="value-title" title="2010-03-16"> </span>16, 2009</span></li>
  81. Microformats Workshop The Workshop Summits Value class pattern A CLOSER

    LOOK 81 <span class="dtstart"><span class="value-title" title="2010-03-12"> </span>March 12</span> Offers authors several options for marking up date- time information, including the empty <span> method: • Machine-readable date information is the title attribute value • Screen-readers won’t read the title value • No tooltip
  82. Microformats Workshop The Workshop Summits Combining microformats For even more

    semantic power! 82
  83. Microformats Workshop The Workshop Summits hCard with rel-me COMBINING MICROFORMATS

    83 <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> http://www.emilylewisdesign.com/MicroformatsWorkshop/hCard-relMe.html
  84. Microformats Workshop The Workshop Summits hCalendar with hCard COMBINING MICROFORMATS

    84 <div class="vevent"> ... <li class="location vcard"><a href="http:// www.austinconventioncenter.com/" class="fn org url">Austin Convention Center</a> <ul class="adr"> <li class="street-address">500 East Cesar Chavez Street</li> <li><span class="locality">Austin</span>, <abbr title="Texas" class="region">TX</abbr> <span class="postal- code">78701</span></li> </ul> </li> ... </div> http://www.emilylewisdesign.com/MicroformatsWorkshop/hCalendar-hCard.html
  85. Microformats Workshop The Workshop Summits Resources 85

  86. Microformats Workshop The Workshop Summits My new book! RESOURCES Available

    for sale on Amazon Want a preview? Check out Rough Cuts excerpts 86
  87. Microformats Workshop The Workshop Summits My blog tutorials RESOURCES Getting

    Semantic With Microformats: • rel-home, rel-tag, rel-license • XFN • hCard • hCalendar • hAtom • hResume • Themes & Issues • Value class pattern 87
  88. Microformats Workshop The Workshop Summits Great stuff from other folks

    RESOURCES • 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 88
  89. Microformats Workshop The Workshop Summits Authoring tools RESOURCES • hCard

    Creator • hCalendar Creator • hReview Creator • XFN Creator • Jeffrey Zeldman's Web Standards Advisor Dreamweaver plug-in 89
  90. Microformats Workshop The Workshop Summits Additional reading RESOURCES • Microformats

    Role Play • Discovering Magic • The Value Class Pattern • More on developing naming conventions, Microformats and HTML5 • Styling hReview Microformats • Styling XFN and rel-license links • Styling hCard 90
  91. Microformats Workshop The Workshop Summits Questions? 91