SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Hi! • 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 Microformats: Web Semantics & More
Today, you’ll learn: • What
are microformats • Benefits of microformats • How to enrich your content with some common microformats • Where you can see microformats in action • Lots of resources to help you publish microformats Microformats: Web Semantics & More
Designed for humans first and
machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Microformats: Web Semantics & More
Smart content Building blocks that
enable users to own, control, move and share their data on the web. Microformats: Web Semantics & More
Smart content Building blocks that
enable users to own, control, move and share Markup, with their data on the web. more meaning Microformats: Web Semantics & More
Microformats are sets of HTML
attributes and values that are applied to common web content - people, events, blog posts, reviews, tags - to provide more meaning. Microformats: Web Semantics & More
Microformats are sets of HTML
attributes and values that are applied to common web content - people, events, blog posts, reviews, tags - to provide more meaning. Content published with microformats can be extracted by software and indexed, downloaded, searched for, saved, cross- referenced or combined. Microformats: Web Semantics & More
XFN & Identity consolidation Assigned
to links to sites that represent you online: <a href="http://ablognotlimited.com" rel="me"> A Blog Not Limited</a> Microformats: Web Semantics & More
The basics • Use existing
standards: (X)HTML • Emphasize semantics (POSH) • Intentionally simple • Address a specific “problem” • Humans first, machines second Microformats: Web Semantics & More
The benefits • Semantics •
User experience enhancements • More meaningful search results • Encourages consistency and standards • Minimal development effort • No need for software or special technologies • Enables sharing and re-use of your web content Microformats: Web Semantics & More
Who benefits? • Managers •
Developers • Designers • Content Authors • Users Microformats: Web Semantics & More
EVERYONE BENEFITS *BLATANT PLUG WARNING*
Check out Microformats Role Play for more on how microformats benefit different people Microformats: Web Semantics & More
Another elemental: rel-tag Describes the
relationship of links to keywords (tags) for your content <a href="/tags/microformats" rel="tag"> microformats</a> Microformats: Web Semantics & More
Another elemental: rel-tag Describes the
relationship of links to keywords (tags) for your content <a href="/tags/microformats" rel="tag"> microformats</a> Indicates the link destination (href) is to a page that tells what the current page - or part of the current page - is about. Microformats: Web Semantics & More
hCard Contact information - person,
place, organization/ company - published with hCard can be transformed into an electronic business card. Microformats: Web Semantics & More
hCard Contact information - person,
place, organization/ company - published with hCard can be transformed into an electronic business card. • H2VX Contacts Conversion Service Microformats: Web Semantics & More
hCard Contact information - person,
place, organization/ company - published with hCard can be transformed into an electronic business card. • H2VX Contacts Conversion Service • Operator Plug-in for Firefox Microformats: Web Semantics & More
hCard Contact information - person,
place, organization/ company - published with hCard can be transformed into an electronic business card. • H2VX Contacts Conversion Service • Operator Plug-in for Firefox • Tails Export Plug-in for Firefox Microformats: Web Semantics & More
hCard Contact information - person,
place, organization/ company - published with hCard can be transformed into an electronic business card. • H2VX Contacts Conversion Service • Operator Plug-in for Firefox • Tails Export Plug-in for Firefox • Oomph Microformats Toolkit Microformats: Web Semantics & More
hCard Contact information - person,
place, organization/ company - published with hCard can be transformed into an electronic business card. • H2VX Contacts Conversion Service • Operator Plug-in for Firefox • Tails Export Plug-in for Firefox • Oomph Microformats Toolkit • Technorati's Contacts Feeds Service Microformats: Web Semantics & More
Worth noting • Markup doesn't
matter, but it should be POSH • Sometimes you need to add non-semantic elements such as <span> and <div> Microformats: Web Semantics & More
Worth noting • Markup doesn't
matter, but it should be POSH • Sometimes you need to add non-semantic elements such as <span> and <div> • Attribute values are case-sensitive Microformats: Web Semantics & More
Worth noting • Markup doesn't
matter, but it should be POSH • Sometimes you need to add non-semantic elements such as <span> and <div> • Attribute values are case-sensitive • Root properties cannot be combined with sub-properties Microformats: Web Semantics & More
Worth noting • Markup doesn't
matter, but it should be POSH • Sometimes you need to add non-semantic elements such as <span> and <div> • Attribute values are case-sensitive • Root properties cannot be combined with sub-properties • You don't need additional class values for styling, but you can use them Microformats: Web Semantics & More
hCalendar Event information published with
hCalendar can be extracted and imported into users' calendars • H2VX Events Conversion Service Microformats: Web Semantics & More
hCalendar Event information published with
hCalendar can be extracted and imported into users' calendars • H2VX Events Conversion Service • Operator Plug-in for Firefox Microformats: Web Semantics & More
hCalendar Event information published with
hCalendar can be extracted and imported into users' calendars • H2VX Events Conversion Service • Operator Plug-in for Firefox • Tails Export Plug-in for Firefox Microformats: Web Semantics & More
hCalendar Event information published with
hCalendar can be extracted and imported into users' calendars • H2VX Events Conversion Service • Operator Plug-in for Firefox • Tails Export Plug-in for Firefox • Oomph Microformats Toolkit Microformats: Web Semantics & More
hCalendar Event information published with
hCalendar can be extracted and imported into users' calendars • H2VX Events Conversion Service • Operator Plug-in for Firefox • Tails Export Plug-in for Firefox • Oomph Microformats Toolkit • Technorati's Events Feeds Service Microformats: Web Semantics & More
1 Content STEP 009 a
t DOE , Inter Lab 2 a imed elopers k shop ite dev a y wor , webs a nage rs A 4-d asters r s&m w ebm p develope es. we b ap et resourc 09 of in tern 9, 20 e r 16-1 o vemb tional • N khaven Na Broo atory • abor L Microformats: Web Semantics & More
2 POSHify STEP <h1><a href=”http://www.bnl.gov/
interlab09/”>InterLab 2009</a></h1> <p>A 4-day workshop aimed at DOE webmasters, website developers, web app developers & managers of internet resources.</p> <ul> <li>November 16-19, 2009</li> <li><a href=”http://www.bnl.gov/”>Brookhaven National Laboratory</a></li> </ul> Microformats: Web Semantics & More
hCalendar with hCard <div class=”vevent”>
... <li class=”location vcard”> <a href=”http://www.bnl.gov/” class=”fn org url”>Brookhaven National Laboratory</a> <ul class=”adr”> <li class=”post-office-box”>P.O. Box 5000</li> <li><span class=”locality”>Upton</span>, <abbr title=”New York” class=”region”>NY</abbr> <span class=”postal-code”>11973</span></li> </ul> </li> ... </div> Microformats: Web Semantics & More
Microformats you can use now
• hCalendar: event information • hCard: contact information • rel-license: license links • rel-nofollow: restricting increased page rank for links • rel-tag: tag links • VoteLinks: for, against and abstain links • XFN: distributed social networks • XOXO: outline content Microformats: Web Semantics & More
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 Microformats: Web Semantics & More
60,600,000 - hReview 1,660,000,000 -
hCard 2,090,000,000 - rel-tag 807,000,000 - hAtom 6,137,400,000 Yahoo! SearchMonkey results as of 12/17/09 452,000,000 - XFN 108,000,000 - hResume 148,000,000 - geo 768,000,000 - adr 44,100,000 - hCalendar Microformats: Web Semantics & More
Microformats in the wild •
XFN: Twitter Flickr HuffDuffer Digg LinkedIn Plaxo Technorati Last.fm Google Social Graph API Ident Engine • rel-license: Creative Commons Yahoo! CC Search Google "Usage Rights" search • hCard: Google Rich Snippets Google Maps Yahoo! Local Google Profiles Twitter Last.fm • hCalendar: Yahoo! Upcoming MapQuest Local Facebook, Last.fm Eventful • hResume: LinkedIn SimplyHired Microformats: Web Semantics & More
My new book! Available for
sale on Amazon Want a preview? Check out Rough Cuts excerpts *BLATANT PLUGS NOT OVER YET* Microformats: Web Semantics & More
My blog tutorials Getting Semantic
With Microformats: • rel-home, rel-tag, rel-license • XFN • hCard • hCalendar • hAtom • hResume • Themes & Issues • Value class pattern Microformats: Web Semantics & More
Great stuff from other folks
• Microformats Wiki • A good resource once you understand the basics • Microformats: Empowering Your Markup for Web 2.0 by John Allsopp • microformatique • Follow @microformats • Send questions to @microformateers Microformats: Web Semantics & More
Authoring tools • hCard Creator
• hCalendar Creator • hReview Creator • Optimus Microformats Transformer also offers a validator • Jeffrey Zeldman's Web Standards Advisor Dreamweaver plug-in Microformats: Web Semantics & More