Microformats
Workshop
Emily Lewis



                            The Workshop Summits January 15, 2010
                   ...
•   I’m a web designer for Pitney Bowes
        Business Insight
    •   I love web standards, semantic
        markup and...
Today, you’ll learn:
•   What are microformats
•   Benefits of microformats
•   How to enrich your content with some common...
What are microformats?



4           Microformats Workshop The Workshop Summits
Microformats Wiki: What Are Microformats




Microformats enable the
publishing and sharing of higher
fidelity information ...
Microformats Wiki: What Are Microformats




Smart
content
          Building blocks that
          enable users to own,
 ...
Sounds complicated.
    Let’s make it easier.


7              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 gi...
Formal microformats
•   hCalendar: event information
•   hCard: contact information
•   rel-license: license links
•   rel...
And even more drafts
•    hAtom: syndicated       •   hProduct: consumer
     content                     products
•    hA...
Formal vs. draft specifications
Formal microformats are those that are
stable and unlikely to change.

Draft microformats a...
THE BASICS
Use existing standards
•    (X)HTML
     • rel
     • class
     • rev

•    vCard: hCard
•    iCalendar: hCale...
THE BASICS
Emphasize semantics
•    Core purpose is meaning
•    POSH - Plain Old Semantic HTML
     • “Self-describing” -...
THE BASICS
Address a specific “problem”
•    Common, real-world web content
     • People
     • Organizations
     • Event...
THE BASICS
Intentionally simple
•    Easy to learn and use
•    Based on current human behavior on the web
•    Aimed at 8...
THE BASICS
Humans first, machines second
•    Human-readable content
     • From a user’s perspective, web content publishe...
Why?



17     Microformats Workshop The Workshop Summits
THE BENEFITS
Semantics
•    Meaning for machines
     • Content published with microformats is parsable. It can
       be ...
THE BENEFITS
User experience enhancements
•    More meaningful search results
     • Google Rich Snippets
•    Download to...
Google Rich Snippets:
More meaningful search


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




21                           ...
DEMO: Google Rich Snippets
Scroll down to see how the Rich Snippet displays hReview
information*
*NOTE: Google is still ro...
THE BENEFITS
Minimal investment
•    Easy to learn
•    Easy to implement
•    No need for special software
•    No need t...
THE BENEFITS
Encourages standards
•    Web standards
     • Valid, semantic markup
•    Standard workflows and processes fo...
A BIT OF HISTORY
Enrich content with semantics
•    Early 2000s
     • Semantic, structural markup
     • Separate CSS for...
AND TODAY
6,137,400,000+ published
•    1,660,000,000 - hCard                  •   807,000,000 - hAtom
•    44,100,000 - h...
AND TODAY
Everyone’s doing it
•    XFN:    Twitter Flickr Huffduffer Digg LinkedIn Plaxo
     Technorati Last.fm Google So...
AND TODAY
Everyone’s doing it
•    hResume:             LinkedIn SimplyHired Stack Overflow

•    hReview:    Google Rich S...
Let’s get started!



29            Microformats Workshop The Workshop Summits
Elemental microformats
•    Single attribute-value pair
•    Often used as building blocks for other microformats




30  ...
ELEMENTALS
rel-tag
Describes the relationship of links containing tags
(keywords) to your content:
<a href="/tags/microfor...
ELEMENTALS
What can you do with rel-tag?
•    Context-specific search
     • Technorati's Tags
     • Operator Plug-in for ...
Operator Plug-in:
     Contextual search in
           action


33              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 (“...
DEMO: Operator Plug-in
Using Firefox with plug-in installed, visit http://ablognotlimited.com/
s/130 and scroll down to se...
DEMO: Operator Plug-in
Select “Tagspaces” from Operator toolbar




36                                Microformats Worksho...
ELEMENTALS
rel-me
Assigned to links to sites that represent you online:

<a href="http://ablognotlimited.com" rel="me">
A ...
ELEMENTALS
What can you do with rel-me?
•    Identity consolidation
     • Ident Engine
     • Huffduffer




38          ...
blog




                                 portfolio




39          Microformats Workshop The Workshop Summits
blog




                                 portfolio




40          Microformats Workshop The Workshop Summits
Ident Engine:
     Identity consolidation
            in action

41               Microformats Workshop The Workshop Summi...
DEMO: Ident Engine
Visit http://identengine.com/identity-discovery.htm and enter URL
of a profile page




42              ...
DEMO: Ident Engine




43                   Microformats Workshop The Workshop Summits
Huffduffer:
     Simplified account
         creation

44            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 ...
DEMO: Huffduffer




46                 Microformats Workshop The Workshop Summits
ELEMENTALS
XFN
me   is just one of the values for the XFN microformat

XFN is used to describe social relationships among
...
ELEMENTALS
XFN
 Relationship                        XFN rel Values
 Friendship (one value)              contact     acquai...
ELEMENTALS
XFN
For links to other people’s identities online, you can
apply XFN to indicate your social relationship with
...
Moving into compounds



50         Microformats Workshop The Workshop Summits
Compound microformats
•    Several attribute-value pairs (properties and sub-
     properties)
•    Utilize other microfor...
COMPOUNDS
hCard
Adds semantics to contact information for people,
places and organizations/companies.
Contact information ...
Oomph:
Electronic business card
         action

53           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 ...
DEMO: Oomph Microformats Toolkit
Options to export contact’s electronic business card




55                              ...
DEMO: Oomph Microformats Toolkit




56                    Microformats Workshop The Workshop Summits
COMPOUNDS
hCard in 3 easy steps
1. Identify content
2. POSHify
     http://www.emilylewisdesign.com/MicroformatsWorkshop/h...
1
       Start with Content
       Do you have contact information for a person, place or
STEP

       organization?

    ...
2
       Add POSH http://www.emilylewisdesign.com/MicroformatsWorkshop/hCard-POSH.html
STEP
       Apply valid, semantic m...
3
       Add hCard
STEP
       Add the root vcard to an element containing all of the contact
       information
       Th...
COMPOUNDS
   Final hCard           http://www.emilylewisdesign.com/MicroformatsWorkshop/hCard-Final.html


<dl class="vcar...
A CLOSER LOOK
Non-semantic elements
<li class="adr">
  <span class="locality">Albuquerque</span>,
  <abbr title="New Mexic...
A CLOSER LOOK
Don’t forget about validation!
•    W3C Markup Validation Service
•    Optimus Microformats Transformer




...
DEMO: Markup validation
Visit http://validator.w3.org/ and enter URL for page with hCard




64                           ...
DEMO: Markup validation
If there are errors, fix them!




65                              Microformats Workshop The Worksh...
DEMO: Optimus validation
Visit http://microformatique.com/optimus/ and enter URL for page
with hCard




66               ...
DEMO: Optimus validation
If there are errors, fix them!




67                              Microformats Workshop The Works...
Also worth noting
•    Markup doesn't matter, but it should be POSH
•    Attribute values are case-sensitive
•    Root pro...
COMPOUNDS
hCalendar
Adds semantics to event information.
Event information published with hCalendar can be
extracted and i...
H2VX:
     Electronic calendar
          in action

70             Microformats Workshop The Workshop Summits
DEMO: H2VX
Visit http://h2vx.com/ics/ and enter URL for page with hCalendar
(i.e. http://environmentsforhumans.com/worksho...
DEMO: H2VX
Select “Download” to add .ics to your electronic calendar




72                                  Microformats ...
DEMO: H2VX
Or select “Subscribe”




73                      Microformats Workshop The Workshop Summits
DEMO: H2VX
Use with your own site




74                       Microformats Workshop The Workshop Summits
COMPOUNDS
hCalendar in 3 easy steps
1. Identify content
2. POSHify
     http://www.emilylewisdesign.com/MicroformatsWorksh...
1
       Start with Content
       Do you have event information?
STEP




                                           010 ...
2
       Add POSH http://www.emilylewisdesign.com/MicroformatsWorkshop/hCalendar-POSH.html
STEP
       Apply valid, semant...
3
       Add hCalendar
STEP
       Add the root vevent to an element containing all of the event
       information
      ...
COMPOUNDS
   Final hCalendar   http://www.emilylewisdesign.com/MicroformatsWorkshop/hCalendar-Final.html



<div class="ve...
A CLOSER LOOK
Non-semantic elements
<div class="vevent"> ... </div>

<p class="description">A 5-day <span
class="category"...
A CLOSER LOOK
Value class pattern
Offers authors several options for marking up date-
time information, including the empt...
For ev
                                          moreen
                                        seman
                    ...
COMBINING MICROFORMATS
   hCard with rel-me http://www.emilylewisdesign.com/MicroformatsWorkshop/hCard-relMe.html

<dl cla...
COMBINING MICROFORMATS
   hCalendar with hCard
                     http://www.emilylewisdesign.com/MicroformatsWorkshop/h...
Resources



85        Microformats Workshop The Workshop Summits
RESOURCES
My new book!
            Available for sale on Amazon


            Want a preview? Check out
            Rough ...
RESOURCES
My blog tutorials
Getting Semantic With Microformats:
     • rel-home, rel-tag, rel-license
     • XFN
     • hC...
RESOURCES
Great stuff from other folks
•    Microformats Wiki
     • A good resource once you understand the basics
•    M...
RESOURCES
Authoring tools
•    hCard Creator
•    hCalendar Creator
•    hReview Creator
•    XFN Creator
•    Jeffrey Zel...
RESOURCES
Additional reading
•    Microformats Role Play
•    Discovering Magic
•    The Value Class Pattern
•    More on ...
Questions?



91        Microformats Workshop The Workshop Summits
Upcoming SlideShare
Loading in...5
×

[Workshop Summits] Microformats Workshop

3,086

Published on

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.

Published in: Technology
1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,086
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide
  • Transcript of "[Workshop Summits] Microformats Workshop"

    1. 1. Microformats Workshop Emily Lewis The Workshop Summits January 15, 2010 Environments for Humans Some rights reserved.
    2. 2. • 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 Microformats Workshop The Workshop Summits
    3. 3. 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 Workshop The Workshop Summits
    4. 4. What are microformats? 4 Microformats Workshop The Workshop Summits
    5. 5. Microformats Wiki: What Are Microformats Microformats enable the publishing and sharing of higher fidelity information on the web. 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
    6. 6. Microformats Wiki: What Are Microformats Smart content Building blocks that enable users to own, control, move and share Markup, with their data on the web. more meaning 6 Microformats Workshop The Workshop Summits
    7. 7. Sounds complicated. Let’s make it easier. 7 Microformats Workshop The Workshop Summits
    8. 8. 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 Microformats Workshop The Workshop Summits
    9. 9. 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 Microformats Workshop The Workshop Summits
    10. 10. 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 10 Microformats Workshop The Workshop Summits
    11. 11. Formal vs. draft specifications 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. 11 Microformats Workshop The Workshop Summits
    12. 12. THE BASICS Use existing standards • (X)HTML • rel • class • rev • vCard: hCard • iCalendar: hCalendar • Atom: hAtom • Other microformats and naming principles 12 Microformats Workshop The Workshop Summits
    13. 13. 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 Microformats Workshop The Workshop Summits
    14. 14. THE BASICS Address a specific “problem” • Common, real-world web content • People • Organizations • Events • Blog posts • Reviews • Tags 14 Microformats Workshop The Workshop Summits
    15. 15. 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 Microformats Workshop The Workshop Summits
    16. 16. 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 Microformats Workshop The Workshop Summits
    17. 17. Why? 17 Microformats Workshop The Workshop Summits
    18. 18. THE BENEFITS Semantics • 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 Microformats Workshop The Workshop Summits
    19. 19. THE BENEFITS User experience enhancements • More meaningful search results • Google Rich Snippets • Download to address book • Download to calendar 19 Microformats Workshop The Workshop Summits
    20. 20. Google Rich Snippets: More meaningful search 20 Microformats Workshop The Workshop Summits
    21. 21. DEMO: Google Rich Snippets Visit http://google.com and search for “coffee san francisco” 21 Microformats Workshop The Workshop Summits
    22. 22. DEMO: Google Rich Snippets Scroll down to see how the Rich Snippet displays hReview information* *NOTE: Google is still rolling out this feature, so not all search users will see Rich Snippets 22 Microformats Workshop The Workshop Summits
    23. 23. THE BENEFITS Minimal investment • Easy to learn • Easy to implement • No need for special software • No need to learn new technologies 23 Microformats Workshop The Workshop Summits
    24. 24. THE BENEFITS Encourages standards • Web standards • Valid, semantic markup • Standard workflows and processes for development teams • Consistent markup • Standard naming conventions for styling 24 Microformats Workshop The Workshop Summits
    25. 25. A BIT OF HISTORY Enrich content with semantics • Early 2000s • Semantic, structural markup • Separate CSS for presentation • 2003-04 • XFN • rel-license • rel-tag • VoteLinks 25 Microformats Workshop The Workshop Summits
    26. 26. AND TODAY 6,137,400,000+ published • 1,660,000,000 - hCard • 807,000,000 - hAtom • 44,100,000 - hCalendar • 452,000,000 - XFN • 60,600,000 - hReview • 768,000,000 - adr • 108,000,000 - hResume • 148,000,000 - geo Yahoo! SearchMonkey results as of 12/17/09 26 Microformats Workshop The Workshop Summits
    27. 27. AND TODAY Everyone’s doing it • 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 Microformats Workshop The Workshop Summits
    28. 28. AND TODAY Everyone’s doing it • 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 Microformats Wiki: Examples in the Wild 28 Microformats Workshop The Workshop Summits
    29. 29. Let’s get started! 29 Microformats Workshop The Workshop Summits
    30. 30. Elemental microformats • Single attribute-value pair • Often used as building blocks for other microformats 30 Microformats Workshop The Workshop Summits
    31. 31. ELEMENTALS rel-tag Describes the relationship of links containing tags (keywords) to your content: <a href="/tags/microformats/" rel="tag">microformats</a> 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. 31 Microformats Workshop The Workshop Summits
    32. 32. ELEMENTALS What can you do with rel-tag? • Context-specific search • Technorati's Tags • Operator Plug-in for Firefox 32 Microformats Workshop The Workshop Summits
    33. 33. Operator Plug-in: Contextual search in action 33 Microformats Workshop The Workshop Summits
    34. 34. 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 Microformats Workshop The Workshop Summits
    35. 35. 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 Microformats Workshop The Workshop Summits
    36. 36. DEMO: Operator Plug-in Select “Tagspaces” from Operator toolbar 36 Microformats Workshop The Workshop Summits
    37. 37. ELEMENTALS rel-me Assigned to links to sites that represent you online: <a href="http://ablognotlimited.com" rel="me"> A Blog Not Limited</a> 37 Microformats Workshop The Workshop Summits
    38. 38. ELEMENTALS What can you do with rel-me? • Identity consolidation • Ident Engine • Huffduffer 38 Microformats Workshop The Workshop Summits
    39. 39. blog portfolio 39 Microformats Workshop The Workshop Summits
    40. 40. blog portfolio 40 Microformats Workshop The Workshop Summits
    41. 41. Ident Engine: Identity consolidation in action 41 Microformats Workshop The Workshop Summits
    42. 42. DEMO: Ident Engine Visit http://identengine.com/identity-discovery.htm and enter URL of a profile page 42 Microformats Workshop The Workshop Summits
    43. 43. DEMO: Ident Engine 43 Microformats Workshop The Workshop Summits
    44. 44. Huffduffer: Simplified account creation 44 Microformats Workshop The Workshop Summits
    45. 45. 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 Microformats Workshop The Workshop Summits
    46. 46. DEMO: Huffduffer 46 Microformats Workshop The Workshop Summits
    47. 47. ELEMENTALS XFN me is just one of the values for the XFN microformat XFN is used to describe social relationships among people 47 Microformats Workshop The Workshop Summits
    48. 48. ELEMENTALS XFN 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 48 Microformats Workshop The Workshop Summits
    49. 49. ELEMENTALS XFN 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"> 49 Microformats Workshop The Workshop Summits
    50. 50. Moving into compounds 50 Microformats Workshop The Workshop Summits
    51. 51. Compound microformats • Several attribute-value pairs (properties and sub- properties) • Utilize other microformats as building blocks 51 Microformats Workshop The Workshop Summits
    52. 52. 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. • H2VX Contacts Conversion Service • Operator Plug-in for Firefox • Tails Export Plug-in for Firefox • Oomph Microformats Toolkit 52 Microformats Workshop The Workshop Summits
    53. 53. Oomph: Electronic business card action 53 Microformats Workshop The Workshop Summits
    54. 54. 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 Microformats Workshop The Workshop Summits
    55. 55. DEMO: Oomph Microformats Toolkit Options to export contact’s electronic business card 55 Microformats Workshop The Workshop Summits
    56. 56. DEMO: Oomph Microformats Toolkit 56 Microformats Workshop The Workshop Summits
    57. 57. COMPOUNDS hCard in 3 easy steps 1. Identify content 2. POSHify http://www.emilylewisdesign.com/MicroformatsWorkshop/hCard-POSH.html 3. Add hCard http://www.emilylewisdesign.com/MicroformatsWorkshop/hCard-Final.html 57 Microformats Workshop The Workshop Summits
    58. 58. 1 Start with Content Do you have contact information for a person, place or STEP organization? Emily Lewis A Blog Not Limited Albuquerque, NM 87106 emily@ablognotlimited.com 58 Microformats Workshop The Workshop Summits
    59. 59. 2 Add POSH http://www.emilylewisdesign.com/MicroformatsWorkshop/hCard-POSH.html STEP Apply valid, semantic markup <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> 59 Microformats Workshop The Workshop Summits
    60. 60. 3 Add hCard STEP Add the root vcard to an element containing all of the contact information Then, add the relevant hCard properties and sub-properties via the class attribute Web Content class Value • Name (first and last) • fn • Web site • url • Address • adr • City • locality • State/province • region • ZIP code • postal-code • Email address • email 60 Microformats Workshop The Workshop Summits
    61. 61. COMPOUNDS Final hCard http://www.emilylewisdesign.com/MicroformatsWorkshop/hCard-Final.html <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> 61 Microformats Workshop The Workshop Summits
    62. 62. A CLOSER LOOK Non-semantic elements <li class="adr"> <span class="locality">Albuquerque</span>, <abbr title="New Mexico" class="region">NM</abbr> <span class="postal-code">87106</span> </li> 62 Microformats Workshop The Workshop Summits
    63. 63. A CLOSER LOOK Don’t forget about validation! • W3C Markup Validation Service • Optimus Microformats Transformer 63 Microformats Workshop The Workshop Summits
    64. 64. DEMO: Markup validation Visit http://validator.w3.org/ and enter URL for page with hCard 64 Microformats Workshop The Workshop Summits
    65. 65. DEMO: Markup validation If there are errors, fix them! 65 Microformats Workshop The Workshop Summits
    66. 66. DEMO: Optimus validation Visit http://microformatique.com/optimus/ and enter URL for page with hCard 66 Microformats Workshop The Workshop Summits
    67. 67. DEMO: Optimus validation If there are errors, fix them! 67 Microformats Workshop The Workshop Summits
    68. 68. 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 Microformats Workshop The Workshop Summits
    69. 69. COMPOUNDS hCalendar 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 69 Microformats Workshop The Workshop Summits
    70. 70. H2VX: Electronic calendar in action 70 Microformats Workshop The Workshop Summits
    71. 71. DEMO: H2VX Visit http://h2vx.com/ics/ and enter URL for page with hCalendar (i.e. http://environmentsforhumans.com/workshop-summits/) 71 Microformats Workshop The Workshop Summits
    72. 72. DEMO: H2VX Select “Download” to add .ics to your electronic calendar 72 Microformats Workshop The Workshop Summits
    73. 73. DEMO: H2VX Or select “Subscribe” 73 Microformats Workshop The Workshop Summits
    74. 74. DEMO: H2VX Use with your own site 74 Microformats Workshop The Workshop Summits
    75. 75. COMPOUNDS hCalendar in 3 easy steps 1. Identify content 2. POSHify http://www.emilylewisdesign.com/MicroformatsWorkshop/hCalendar-POSH.html 3. Add hCalendar http://www.emilylewisdesign.com/MicroformatsWorkshop/hCalendar-Final.html 75 Microformats Workshop The Workshop Summits
    76. 76. 1 Start with Content Do you have event information? STEP 010 b rating d SX SWi 2 c e cele n behin n feren passio ay co ty and A 5-d eativi media r the c olest new the coologies 0 techn , 201 12-16 enter • March e ntion C n Conv • Austi 76 Microformats Workshop The Workshop Summits
    77. 77. 2 Add POSH http://www.emilylewisdesign.com/MicroformatsWorkshop/hCalendar-POSH.html STEP Apply valid, semantic markup <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> 77 Microformats Workshop The Workshop Summits
    78. 78. 3 Add hCalendar STEP Add the root vevent to an element containing all of the event information Then, add the relevant hCalendar properties and sub-properties via the class attribute Web Content class Value • Event name • summary • Web site • url • Description • description • Type of event • category • Start date • dtstart • End date • dtend • Location • location 78 Microformats Workshop The Workshop Summits
    79. 79. COMPOUNDS Final hCalendar http://www.emilylewisdesign.com/MicroformatsWorkshop/hCalendar-Final.html <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> 79 Microformats Workshop The Workshop Summits
    80. 80. A CLOSER LOOK Non-semantic elements <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> 80 Microformats Workshop The Workshop Summits
    81. 81. A CLOSER LOOK Value class pattern Offers authors several options for marking up date- time information, including the empty <span> method: <span class="dtstart"><span class="value-title" title="2010-03-12"> </span>March 12</span> • Machine-readable date information is the title attribute value • Screen-readers won’t read the title value • No tooltip 81 Microformats Workshop The Workshop Summits
    82. 82. For ev moreen seman t power ic ! Combining microformats 82 Microformats Workshop The Workshop Summits
    83. 83. COMBINING MICROFORMATS hCard with rel-me http://www.emilylewisdesign.com/MicroformatsWorkshop/hCard-relMe.html <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> 83 Microformats Workshop The Workshop Summits
    84. 84. COMBINING MICROFORMATS hCalendar with hCard http://www.emilylewisdesign.com/MicroformatsWorkshop/hCalendar-hCard.html <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> 84 Microformats Workshop The Workshop Summits
    85. 85. Resources 85 Microformats Workshop The Workshop Summits
    86. 86. RESOURCES My new book! Available for sale on Amazon Want a preview? Check out Rough Cuts excerpts 86 Microformats Workshop The Workshop Summits
    87. 87. RESOURCES My blog tutorials Getting Semantic With Microformats: • rel-home, rel-tag, rel-license • XFN • hCard • hCalendar • hAtom • hResume • Themes & Issues 87 • Value class pattern Microformats Workshop The Workshop Summits
    88. 88. 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 88 Microformats Workshop The Workshop Summits
    89. 89. RESOURCES Authoring tools • hCard Creator • hCalendar Creator • hReview Creator • XFN Creator • Jeffrey Zeldman's Web Standards Advisor Dreamweaver plug-in 89 Microformats Workshop The Workshop Summits
    90. 90. RESOURCES Additional reading • 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 Microformats Workshop The Workshop Summits
    91. 91. Questions? 91 Microformats Workshop The Workshop Summits

    ×