• Save
Microformats: Web Semantics & More
Upcoming SlideShare
Loading in...5
×
 

Microformats: Web Semantics & More

on

  • 11,126 views

Presentation for InterLab 2009, covering the basics you need to start publishing microformats and, in turn, enrich and add meaning to your content.

Presentation for InterLab 2009, covering the basics you need to start publishing microformats and, in turn, enrich and add meaning to your content.

Statistics

Views

Total Views
11,126
Views on SlideShare
10,706
Embed Views
420

Actions

Likes
65
Downloads
0
Comments
5

13 Embeds 420

http://tonycecala.com 213
http://www.ablognotlimited.com 65
http://www.slideshare.net 40
http://ablognotlimited.com 40
http://techno-sphere.blogspot.com 33
http://www.shrikantbhosale.com 13
http://janq.posterous.com 7
url_unknown 3
http://www.techgig.com 2
http://techno-sphere.blogspot.ca 1
http://stuff.davebonds.info 1
http://locallab.wordpress.com 1
http://techno-sphere.blogspot.ie 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Microformats: Web Semantics & More Microformats: Web Semantics & More Presentation Transcript

  • Microformats: Web Semantics & More Emily Lewis InterLab 2009 November 18 Some rights reserved.
  • 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 View slide
  • What are microformats? Microformats: Web Semantics & More View slide
  • What are 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
  • Microformats enable the publishing and sharing of higher fidelity information on the web. Microformats: Web Semantics & More
  • 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 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
  • Huh? 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
  • rel="me" Microformats: Web Semantics & More
  • XFN & Identity consolidation Assigned to links to sites that represent you online: 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
  • blog Microformats: Web Semantics & More
  • blog portfolio Microformats: Web Semantics & More
  • blog portfolio Microformats: Web Semantics & More
  • blog portfolio Microformats: Web Semantics & More
  • blog portfolio Microformats: Web Semantics & More
  • blog portfolio Microformats: Web Semantics & More
  • blog portfolio Microformats: Web Semantics & More
  • blog portfolio Microformats: Web Semantics & More
  • blog portfolio Microformats: Web Semantics & More
  • blog portfolio Microformats: Web Semantics & More
  • blog portfolio Microformats: Web Semantics & More
  • blog portfolio Microformats: Web Semantics & More
  • blog portfolio Microformats: Web Semantics & More
  • blog portfolio Microformats: Web Semantics & More
  • IdentEngine: Identity consolidation in action Microformats: Web Semantics & More
  • Let’s talk fundamentals 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 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 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
  • Why? Microformats: Web Semantics & More
  • Why? Semantics FTW! Microformats: Web Semantics & More
  • Why? Semantics FTW! Context-specific searching: • Technorati's Tags • Operator Plug-in for Firefox Microformats: Web Semantics & More
  • Operator Plug-in: Contextual search in action Microformats: Web Semantics & More
  • Moving into compounds 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
  • Oomph: Electronic business card action Microformats: Web Semantics & More
  • Publish hCard in 3 easy steps Microformats: Web Semantics & More
  • 1 Content STEP Emily Lewis A Blog Not Limited Albuquerque, NM 87106 emily@ablognotlimited.com Microformats: Web Semantics & More
  • 2 POSHify STEP Microformats: Web Semantics & More
  • 2 POSHify STEP <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> Microformats: Web Semantics & More
  • 3 Add hCard STEP Microformats: Web Semantics & More
  • 3 Add hCard STEP <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> Microformats: Web Semantics & More
  • Worth noting Microformats: Web Semantics & More
  • Worth noting • Markup doesn't matter, but it should be POSH 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 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
  • H2VX: Electronic calendar in action Microformats: Web Semantics & More
  • Publish hCalendar in 3 easy steps 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 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
  • 3 Add hCalendar STEP Microformats: Web Semantics & More
  • 3 Add hCalendar STEP <div class="vevent"> <h1><a href=”http://www.bnl.gov/interlab09/” class="summary url">InterLab 2009</a></h1> <p class="description">A 4-day workshop aimed at DOE webmasters, website developers, web app developers & managers of internet resources.</p> <ul> <li><span class="dtstart"><span class=”value- title” title=”2009-11-16”> </span>November 16</span>-<span class="dtend"><span class=”value-title” title=”2009-11-19”> </ span>19, 2009</span></li> <li class="location"><a href=”http:// www.bnl.gov/”>Brookhaven National Laboratory</a></li> </ul> </div> Microformats: Web Semantics & More
  • Combining microformats Microformats: Web Semantics & More
  • For mo even sem re powantic er! Combining microformats Microformats: Web Semantics & More
  • hCalendar with hCard 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
  • 6,137,400,000 Microformats: Web Semantics & More
  • 6,137,400,000 Yahoo! SearchMonkey results as of 12/17/09 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
  • Getting started Microformats: Web Semantics & More
  • Getting started *BLATANT PLUG WARNING* Microformats: Web Semantics & More
  • My new book! Microformats: Web Semantics & More
  • My new book! Available for sale on Amazon 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
  • Questions? Comments? • emily@ablognotlimited.com • @emilylewis • Introduce yourself and let’s talk! Microformats: Web Semantics & More
  • Thanks! Microformats: Web Semantics & More