Tweet
Tweet

Slide 1

Slide 1 text

Some rights reserved. Microformats: Web Semantics & More Emily Lewis InterLab 2009 November 18

Slide 2

Slide 2 text

Microformats: Web Semantics & More • 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 Hi!

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

What are microformats? Microformats: Web Semantics & More Microformats: Web Semantics & More

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

Microformats: Web Semantics & More Microformats enable the publishing and sharing of higher fidelity information on the web.

Slide 7

Slide 7 text

Microformats: Web Semantics & More Building blocks that enable users to own, control, move and share their data on the web. Smart content Markup, with more meaning

Slide 8

Slide 8 text

Huh? Microformats: Web Semantics & More

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

rel="me" Microformats: Web Semantics & More

Slide 11

Slide 11 text

Microformats: Web Semantics & More XFN & Identity consolidation A Blog Not Limited Assigned to links to sites that represent you online:

Slide 12

Slide 12 text

Microformats: Web Semantics & More blog portfolio

Slide 13

Slide 13 text

Microformats: Web Semantics & More blog portfolio

Slide 14

Slide 14 text

IdentEngine: Identity consolidation in action Microformats: Web Semantics & More

Slide 15

Slide 15 text

Let’s talk fundamentals Microformats: Web Semantics & More

Slide 16

Slide 16 text

Microformats: Web Semantics & More The basics • Use existing standards: (X)HTML • Emphasize semantics (POSH) • Intentionally simple • Address a specific “problem” • Humans first, machines second

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Microformats: Web Semantics & More Who benefits? • Managers • Developers • Designers • Content Authors • Users

Slide 19

Slide 19 text

Microformats: Web Semantics & More *BLATANT PLUG WARNING* EVERYONE BENEFITS Check out Microformats Role Play for more on how microformats benefit different people

Slide 20

Slide 20 text

Microformats: Web Semantics & More Another elemental: rel-tag microformats Describes the relationship of links to keywords (tags) for your content Indicates the link destination (href) is to a page that tells what the current page - or part of the current page - is about.

Slide 21

Slide 21 text

Microformats: Web Semantics & More Why? Semantics FTW! Context-specific searching: • Technorati's Tags • Operator Plug-in for Firefox

Slide 22

Slide 22 text

Operator Plug-in: Contextual search in action Microformats: Web Semantics & More

Slide 23

Slide 23 text

Moving into compounds Microformats: Web Semantics & More

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Oomph: Electronic business card action Microformats: Web Semantics & More

Slide 26

Slide 26 text

Publish hCard in 3 easy steps Microformats: Web Semantics & More

Slide 27

Slide 27 text

Microformats: Web Semantics & More 1 STEP Content Emily Lewis A Blog Not Limited Albuquerque, NM 87106 [email protected]

Slide 28

Slide 28 text

Microformats: Web Semantics & More 2 STEP POSHify
Emily Lewis
  • A Blog Not Limited
  • Albuquerque, NM 87106
  • [email protected]

Slide 29

Slide 29 text

Microformats: Web Semantics & More 3 STEP Add hCard
Emily Lewis
  • A Blog Not Limited
  • Albuquerque, NM 87106
  • [email protected]

Slide 30

Slide 30 text

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 and
• 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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

H2VX: Electronic calendar in action Microformats: Web Semantics & More

Slide 33

Slide 33 text

Publish hCalendar in 3 easy steps Microformats: Web Semantics & More

Slide 34

Slide 34 text

Microformats: Web Semantics & More 1 STEP Content InterLab 2009 A 4-day workshop aimed at DOE webmasters, website developers, web app developers & managers of internet resources. • November 16-19, 2009 • Brookhaven National Laboratory

Slide 35

Slide 35 text

Microformats: Web Semantics & More 2 STEP POSHify

InterLab 2009

A 4-day workshop aimed at DOE webmasters, website developers, web app developers & managers of internet resources.

  • November 16-19, 2009
  • Brookhaven National Laboratory

Slide 36

Slide 36 text

Microformats: Web Semantics & More 3 STEP Add hCalendar

InterLab 2009

A 4-day workshop aimed at DOE webmasters, website developers, web app developers & managers of internet resources.

  • November 16- 19, 2009
  • Brookhaven National Laboratory

Slide 37

Slide 37 text

Combining microformats Microformats: Web Semantics & More For even more semantic power!

Slide 38

Slide 38 text

Microformats: Web Semantics & More hCalendar with hCard
...
  • Brookhaven National Laboratory
    • P.O. Box 5000
    • Upton, NY 11973
    • ...

    Slide 39

    Slide 39 text

    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

    Slide 40

    Slide 40 text

    Microformats: Web Semantics & More And even more drafts • hAtom: syndicated content • hAudio: audio content • hListing: open, distributed listings • hMedia: video, images and audio media • hNews: journalistic news • hProduct: consumer products • hRecipe: food and beverage recipes • hResume: Résumés and C.V.s • hReview: reviews • xFolk: bookmarks

    Slide 41

    Slide 41 text

    Microformats: Web Semantics & More 6,137,400,000 Yahoo! SearchMonkey results as of 12/17/09 1,660,000,000 - hCard 44,100,000 - hCalendar 2,090,000,000 - rel-tag 452,000,000 - XFN 60,600,000 - hReview 807,000,000 - hAtom 108,000,000 - hResume 768,000,000 - adr 148,000,000 - geo

    Slide 42

    Slide 42 text

    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

    Slide 43

    Slide 43 text

    Microformats: Web Semantics & More *BLATANT PLUG WARNING* Getting started

    Slide 44

    Slide 44 text

    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*

    Slide 45

    Slide 45 text

    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

    Slide 46

    Slide 46 text

    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

    Slide 47

    Slide 47 text

    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

    Slide 48

    Slide 48 text

    Microformats: Web Semantics & More Questions? Comments? • [email protected] • @emilylewis • Introduce yourself and let’s talk!

    Slide 49

    Slide 49 text

    Thanks! Microformats: Web Semantics & More