Abstract image of a woman sitting on books and studying on a laptop

[Workshop Summits] Microformats Workshop

Emily Lewis, profile picture
Emily Lewis

The document details a workshop on microformats, which are simple, open data formats that enhance the sharing of meaningful information on the web. It covers the benefits, specifications, and practical implementation of various microformats like hcard and hcalendar, emphasizing their importance for both human readability and machine parsing. Additionally, it provides insights into historical context, current usage, and examples of real-world applications.

Technology
1 of 91
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
Microformats Workshop Emily Lewis The Workshop Summits January 15, 2010 Environments for Humans Some rights reserved.
• 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
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
What are microformats? 4 Microformats Workshop The Workshop Summits
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
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
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 give it more meaning. 8 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 Microformats Workshop The Workshop Summits
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
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
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
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
THE BASICS Address a specific “problem” • Common, real-world web content • People • Organizations • Events • Blog posts • Reviews • Tags 14 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 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 Microformats Workshop The Workshop Summits
Why? 17 Microformats Workshop The Workshop Summits
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
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
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 Microformats Workshop The Workshop Summits
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
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
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
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
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
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
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
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 Microformats Workshop The Workshop Summits
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
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
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 (“Add to Firefox”) 34 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 Microformats Workshop The Workshop Summits
DEMO: Operator Plug-in Select “Tagspaces” from Operator toolbar 36 Microformats Workshop The Workshop Summits
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
ELEMENTALS What can you do with rel-me? • Identity consolidation • Ident Engine • Huffduffer 38 Microformats Workshop The Workshop Summits
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 Summits
DEMO: Ident Engine Visit http://identengine.com/identity-discovery.htm and enter URL of a profile page 42 Microformats Workshop The Workshop Summits
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 a web site with rel-me (i.e. Twitter profile) 45 Microformats Workshop The Workshop Summits
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 people 47 Microformats Workshop The Workshop Summits
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
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
Moving into compounds 50 Microformats Workshop The Workshop Summits
Compound microformats • Several attribute-value pairs (properties and sub- properties) • Utilize other microformats as building blocks 51 Microformats Workshop The Workshop Summits
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
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 icon in the upper left corner 54 Microformats Workshop The Workshop Summits
DEMO: Oomph Microformats Toolkit Options to export contact’s electronic business card 55 Microformats Workshop The Workshop Summits
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/hCard-POSH.html 3. Add hCard http://www.emilylewisdesign.com/MicroformatsWorkshop/hCard-Final.html 57 Microformats Workshop The Workshop Summits
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
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
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
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
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
A CLOSER LOOK Don’t forget about validation! • W3C Markup Validation Service • Optimus Microformats Transformer 63 Microformats Workshop The Workshop Summits
DEMO: Markup validation Visit http://validator.w3.org/ and enter URL for page with hCard 64 Microformats Workshop The Workshop Summits
DEMO: Markup validation If there are errors, fix them! 65 Microformats Workshop The Workshop Summits
DEMO: Optimus validation Visit http://microformatique.com/optimus/ and enter URL for page with hCard 66 Microformats Workshop The Workshop Summits
DEMO: Optimus validation If there are errors, fix them! 67 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 Microformats Workshop The Workshop Summits
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
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/workshop-summits/) 71 Microformats Workshop The Workshop Summits
DEMO: H2VX Select “Download” to add .ics to your electronic calendar 72 Microformats Workshop The Workshop Summits
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/MicroformatsWorkshop/hCalendar-POSH.html 3. Add hCalendar http://www.emilylewisdesign.com/MicroformatsWorkshop/hCalendar-Final.html 75 Microformats Workshop The Workshop Summits
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
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
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
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
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
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
For ev moreen seman t power ic ! Combining microformats 82 Microformats Workshop The Workshop Summits
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
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
Resources 85 Microformats Workshop The Workshop Summits
RESOURCES My new book! Available for sale on Amazon Want a preview? Check out Rough Cuts excerpts 86 Microformats Workshop The Workshop Summits
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
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
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
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
Questions? 91 Microformats Workshop The Workshop Summits

More Related Content

PDF
Microformats or: How I Learned to Write POSH and Love the Semantic Web
Emily Lewis
 
PDF
Open Source SharePoint Solutions for Education
C/D/H Technology Consultants
 
PDF
W3C-כיצד פועל ה
Israeli Internet Association technology committee
 
PDF
Drupal and the Future of the Web
John Albin Wilkins
 
PPTX
Get A Head on Your Repository
eosadler
 
PDF
Management de communaute
fOSSa - Free Open Source Software Academia Conference
 
PDF
Dicole Community Platform - Product Sheet
Dicole
 
PDF
W3C Digital Publishing Interest Group Update
Ivan Herman
 
Microformats or: How I Learned to Write POSH and Love the Semantic Web
Emily Lewis
 
Open Source SharePoint Solutions for Education
C/D/H Technology Consultants
 
W3C-כיצד פועל ה
Israeli Internet Association technology committee
 
Drupal and the Future of the Web
John Albin Wilkins
 
Get A Head on Your Repository
eosadler
 
Management de communaute
fOSSa - Free Open Source Software Academia Conference
 
Dicole Community Platform - Product Sheet
Dicole
 
W3C Digital Publishing Interest Group Update
Ivan Herman
 

Similar to [Workshop Summits] Microformats Workshop (20)

KEY
Practical Microformats - Voices That Matter
Emily Lewis
 
PPTX
05 RD PoSD Tutorial_xhtml_to_html5_2016
Rich Dron
 
PDF
Drupal In 1 Hour
Joshua Simmons
 
PDF
Atlassian User Group NYC 20170830 PreSummit Event Slides
Marlon Palha
 
PDF
Contributing to Open Source
Amol A. Sale
 
KEY
WordPress & Other Content Management Systems
Emily Lewis
 
KEY
Drupal at the EBI
Francis Rowland
 
PDF
Presentation 1 Web--dev
altsav
 
PPT
Tech talk webtech
Shehrevar Davierwala
 
PPTX
Business 2.0 with WordPress
Mario Peshev
 
PPTX
Web Technologies 2.0
Andleeb Joyia
 
PPTX
Building SharePoint Online applications using Napa Office 365 Development Tools
Gunnar Peipman
 
PDF
UI Dev in Big data world using open source
Tech Triveni
 
PDF
API Introduction - API Management Workshop Munich from Ronnie Mitra
CA API Management
 
PPTX
Philly Sitecore User Group Meetup | Post-Symposium Knowledge Share
Delphic Digital
 
PDF
20141210 - Microservice Container
Jamie (Taka) Wang
 
PDF
HTML 5 & The Modern Web
Jumping Bean
 
PDF
Social networks: technical issues
Morgan Magnin
 
PDF
Wordpress intro
the-colab
 
PPTX
Modular PHP Development using CodeIgniter Bonfire
Jeff Fox
 
Practical Microformats - Voices That Matter
Emily Lewis
 
05 RD PoSD Tutorial_xhtml_to_html5_2016
Rich Dron
 
Drupal In 1 Hour
Joshua Simmons
 
Atlassian User Group NYC 20170830 PreSummit Event Slides
Marlon Palha
 
Contributing to Open Source
Amol A. Sale
 
WordPress & Other Content Management Systems
Emily Lewis
 
Drupal at the EBI
Francis Rowland
 
Presentation 1 Web--dev
altsav
 
Tech talk webtech
Shehrevar Davierwala
 
Business 2.0 with WordPress
Mario Peshev
 
Web Technologies 2.0
Andleeb Joyia
 
Building SharePoint Online applications using Napa Office 365 Development Tools
Gunnar Peipman
 
UI Dev in Big data world using open source
Tech Triveni
 
API Introduction - API Management Workshop Munich from Ronnie Mitra
CA API Management
 
Philly Sitecore User Group Meetup | Post-Symposium Knowledge Share
Delphic Digital
 
20141210 - Microservice Container
Jamie (Taka) Wang
 
HTML 5 & The Modern Web
Jumping Bean
 
Social networks: technical issues
Morgan Magnin
 
Wordpress intro
the-colab
 
Modular PHP Development using CodeIgniter Bonfire
Jeff Fox
 
Ad

More from Emily Lewis (12)

PDF
Create Your Own Starter Files
Emily Lewis
 
PDF
The Hiring Process
Emily Lewis
 
PDF
Take Your Markup to Eleven
Emily Lewis
 
PDF
Designer-Friendly EE
Emily Lewis
 
PDF
10 Advanced CSS Techniques (You Wish You Knew More About)
Emily Lewis
 
PDF
Building the Webuquerque Community
Emily Lewis
 
PDF
Multiple Site Management with ExpressionEngine
Emily Lewis
 
PDF
Take Your Markup to 11
Emily Lewis
 
PDF
jQuery, A Designer's Perspective
Emily Lewis
 
KEY
Microformats: Web Semantics & More
Emily Lewis
 
KEY
Podcasting & Vodcasting 101
Emily Lewis
 
PPT
Webuquerque: Social Media Means Business
Emily Lewis
 
Create Your Own Starter Files
Emily Lewis
 
The Hiring Process
Emily Lewis
 
Take Your Markup to Eleven
Emily Lewis
 
Designer-Friendly EE
Emily Lewis
 
10 Advanced CSS Techniques (You Wish You Knew More About)
Emily Lewis
 
Building the Webuquerque Community
Emily Lewis
 
Multiple Site Management with ExpressionEngine
Emily Lewis
 
Take Your Markup to 11
Emily Lewis
 
jQuery, A Designer's Perspective
Emily Lewis
 
Microformats: Web Semantics & More
Emily Lewis
 
Podcasting & Vodcasting 101
Emily Lewis
 
Webuquerque: Social Media Means Business
Emily Lewis
 
Ad

Recently uploaded (20)

PDF
Decision Optimization - From Theory to Practice
Eray Cakici
 
PDF
Dell Pro Micro: Speed customer interactions, patient processing, and learning...
Principled Technologies
 
PDF
SaaS reusability assessment using machine learning techniques
IAESIJAI
 
PDF
Ensemble model-based arrhythmia classification with local interpretable model...
IAESIJAI
 
PDF
Co-training pseudo-labeling for text classification with support vector machi...
IAESIJAI
 
PDF
Transform-Your-Supply-Chain-with-AI-Driven-Quality-Engineering.pdf
Kalilur Rahman
 
PDF
Auditboard EB SOX Playbook 2023 edition.
DROK2
 
PDF
Introduction to MCP and A2A Protocols: Enabling Agent Communication
Maxim Salnikov
 
PPTX
Build automations faster and more reliably with UiPath ScreenPlay
AndreeaTom
 
PDF
Transform-Quality-Engineering-with-AI-A-60-Day-Blueprint-for-Digital-Success.pdf
Kalilur Rahman
 
PDF
Transform-Your-Streaming-Platform-with-AI-Driven-Quality-Engineering.pdf
Kalilur Rahman
 
PDF
Planning-an-Audit-A-How-To-Guide-Checklist-WP.pdf
DROK2
 
PDF
substrate PowerPoint Presentation basic one
jwaite4
 
PDF
Examining Bias in AI Generated News Content.pdf
Government
 
PDF
The AI Revolution in Customer Service - 2025
Body of Knowledge
 
PPTX
Presentation - Principles of Instructional Design.pptx
Ntokozo Mhlongo
 
PPTX
Internet of Everything -Basic concepts details
sendilkumar66
 
PPTX
AI-driven Assurance Across Your End-to-end Network With ThousandEyes
ThousandEyes
 
PDF
A symptom-driven medical diagnosis support model based on machine learning te...
IAESIJAI
 
PDF
Electrocardiogram sequences data analytics and classification using unsupervi...
IAESIJAI
 
Decision Optimization - From Theory to Practice
Eray Cakici
 
Dell Pro Micro: Speed customer interactions, patient processing, and learning...
Principled Technologies
 
SaaS reusability assessment using machine learning techniques
IAESIJAI
 
Ensemble model-based arrhythmia classification with local interpretable model...
IAESIJAI
 
Co-training pseudo-labeling for text classification with support vector machi...
IAESIJAI
 
Transform-Your-Supply-Chain-with-AI-Driven-Quality-Engineering.pdf
Kalilur Rahman
 
Auditboard EB SOX Playbook 2023 edition.
DROK2
 
Introduction to MCP and A2A Protocols: Enabling Agent Communication
Maxim Salnikov
 
Build automations faster and more reliably with UiPath ScreenPlay
AndreeaTom
 
Transform-Quality-Engineering-with-AI-A-60-Day-Blueprint-for-Digital-Success.pdf
Kalilur Rahman
 
Transform-Your-Streaming-Platform-with-AI-Driven-Quality-Engineering.pdf
Kalilur Rahman
 
Planning-an-Audit-A-How-To-Guide-Checklist-WP.pdf
DROK2
 
substrate PowerPoint Presentation basic one
jwaite4
 
Examining Bias in AI Generated News Content.pdf
Government
 
The AI Revolution in Customer Service - 2025
Body of Knowledge
 
Presentation - Principles of Instructional Design.pptx
Ntokozo Mhlongo
 
Internet of Everything -Basic concepts details
sendilkumar66
 
AI-driven Assurance Across Your End-to-end Network With ThousandEyes
ThousandEyes
 
A symptom-driven medical diagnosis support model based on machine learning te...
IAESIJAI
 
Electrocardiogram sequences data analytics and classification using unsupervi...
IAESIJAI
 

[Workshop Summits] Microformats Workshop

  • 1. Microformats Workshop Emily Lewis The Workshop Summits January 15, 2010 Environments for Humans Some rights reserved.
  • 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. 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. What are microformats? 4 Microformats Workshop The Workshop Summits
  • 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. 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. Sounds complicated. Let’s make it easier. 7 Microformats Workshop The Workshop Summits
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Why? 17 Microformats Workshop The Workshop Summits
  • 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. 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. Google Rich Snippets: More meaningful search 20 Microformats Workshop The Workshop Summits
  • 21. DEMO: Google Rich Snippets Visit http://google.com and search for “coffee san francisco” 21 Microformats Workshop The Workshop Summits
  • 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. 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. 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. 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. 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. 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. 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. Let’s get started! 29 Microformats Workshop The Workshop Summits
  • 30. Elemental microformats • Single attribute-value pair • Often used as building blocks for other microformats 30 Microformats Workshop The Workshop Summits
  • 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. 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. Operator Plug-in: Contextual search in action 33 Microformats Workshop The Workshop Summits
  • 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. 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. DEMO: Operator Plug-in Select “Tagspaces” from Operator toolbar 36 Microformats Workshop The Workshop Summits
  • 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. ELEMENTALS What can you do with rel-me? • Identity consolidation • Ident Engine • Huffduffer 38 Microformats Workshop The Workshop Summits
  • 39. blog portfolio 39 Microformats Workshop The Workshop Summits
  • 40. blog portfolio 40 Microformats Workshop The Workshop Summits
  • 41. Ident Engine: Identity consolidation in action 41 Microformats Workshop The Workshop Summits
  • 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. DEMO: Ident Engine 43 Microformats Workshop The Workshop Summits
  • 44. Huffduffer: Simplified account creation 44 Microformats Workshop The Workshop Summits
  • 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. DEMO: Huffduffer 46 Microformats Workshop The Workshop Summits
  • 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. 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. 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. Moving into compounds 50 Microformats Workshop The Workshop Summits
  • 51. Compound microformats • Several attribute-value pairs (properties and sub- properties) • Utilize other microformats as building blocks 51 Microformats Workshop The Workshop Summits
  • 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. Oomph: Electronic business card action 53 Microformats Workshop The Workshop Summits
  • 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. DEMO: Oomph Microformats Toolkit Options to export contact’s electronic business card 55 Microformats Workshop The Workshop Summits
  • 56. DEMO: Oomph Microformats Toolkit 56 Microformats Workshop The Workshop Summits
  • 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. 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 [email protected] 58 Microformats Workshop The Workshop Summits
  • 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:[email protected]"> [email protected]</a></li>          </ul>       </dd> </dl> 59 Microformats Workshop The Workshop Summits
  • 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. 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:[email protected]" class="email">[email protected]</a></li>          </ul>       </dd> </dl> 61 Microformats Workshop The Workshop Summits
  • 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. A CLOSER LOOK Don’t forget about validation! • W3C Markup Validation Service • Optimus Microformats Transformer 63 Microformats Workshop The Workshop Summits
  • 64. DEMO: Markup validation Visit http://validator.w3.org/ and enter URL for page with hCard 64 Microformats Workshop The Workshop Summits
  • 65. DEMO: Markup validation If there are errors, fix them! 65 Microformats Workshop The Workshop Summits
  • 66. DEMO: Optimus validation Visit http://microformatique.com/optimus/ and enter URL for page with hCard 66 Microformats Workshop The Workshop Summits
  • 67. DEMO: Optimus validation If there are errors, fix them! 67 Microformats Workshop The Workshop Summits
  • 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. 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. H2VX: Electronic calendar in action 70 Microformats Workshop The Workshop Summits
  • 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. DEMO: H2VX Select “Download” to add .ics to your electronic calendar 72 Microformats Workshop The Workshop Summits
  • 73. DEMO: H2VX Or select “Subscribe” 73 Microformats Workshop The Workshop Summits
  • 74. DEMO: H2VX Use with your own site 74 Microformats Workshop The Workshop Summits
  • 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. 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. 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. 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. 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. 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. 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. For ev moreen seman t power ic ! Combining microformats 82 Microformats Workshop The Workshop Summits
  • 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:[email protected]" class="email">[email protected]</a></li>          </ul>       </dd> </dl> 83 Microformats Workshop The Workshop Summits
  • 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. Resources 85 Microformats Workshop The Workshop Summits
  • 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. 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. 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. 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. 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. Questions? 91 Microformats Workshop The Workshop Summits