Introduction - Content

What are microformats?
Why to use microformats?
How to replace microformats?
Advantages of microformats to own markup.
Disadvantages of microformats..
Common used microformats
Microformats design patterns.
Resources on microformats.

What are microformats?

The way how to add simple markup into human readable information to allow computer processing.
- acquiring data from documents
- indexing
- searching
- storing
- cross-referencing
Microformats are elements of a semantic markup using a plain old semantic (X)HTML (POSH)
- Why has been the HTML designed at CERN (Conseil Europeen pour la Recherche Nucleaire) v in the year 1991?

Example of Microformat

 <ol class='xoxo'>
   <li>Prvni bod
     <ol>
         <li>Podbod a</li>
         <li>Podbod b</li>
     </ol>
   </li>
   <li>Druhy bod
     <ol compact="compact">
         <li>Podbod c</li>
         <li>Podbod d</li>
     </ol>
   </li>
 </ol>

Why to use microformats?

Microformats combines some trends:

next logical step in web-design and information architecture progress
the manner how can people and organisations publish semantically rich content without dependency on centralized services
"agreement", that the traditional meta data either failed or their adoption took too long, so there has been a need of a different solution.
- microformats use the meta data. :-)
Use of (X)HTML for data.

How can be microformats replaced? (1)

Including data in own formating in a different namespace
- XHTML + Voice Profile
- (X)HTML + SVG
- XLink
- XHTML+RDF
- …

How can be microformats replaced? (2)

Advantages:
- easy visualisation (direct support in browsers, using CSS for example),
- independent on centralized services.
Disadvantages:
- depends on host markup,
- may be more difficult to process on a computer.

Standardized Microformats

hCalendar - publishing events on the web
hCard - publishing people, companies, organizations on the web
rel-license - indicating licenses of a content embedded in (X)HTML, …
rel-nofollow - hypertext link should not be ranking by user agents
rel-tag - allows adding user-defined tags to hyper links
XFN - the Xhtml Friends Network - simple way of human relationships representation using hyper links
XMDP - (XHTML Meta Data Profiles) - simple XHTML-based format for defining HTML meta data profiles. Specification is documented at http://gmpg.org/xmdp/
XOXO - microformat for embedding outlines into (X)HTML pages.

Developed microformats

adr - address annotations in documents
geo - geographical coordinates annotation in documents
hAtom - markup for content aggregation.
hProduct - microformat for including information on products into (X)HTML pages.
hReceipe - microformat for including informations on receipts into (X)HTML pages.
hResume - microformat for including resume into (X)HTML pages.
hReview - microformat for including reviews on products, services, etc. into (X)HTML pages.
… (for more see Microformats Wiki)

hCalendar - Introduction

Simple, open, distributed microformat for annotation of calendars and events.
Based on the standard iCalendar (RFC2445).
- used for calendar synchronisation in organizers, mobile phones, PDAs, etc. with computer, for temporal based data exchange in between above mentioned devices, etc.
hCalendar corresponds 1:1 to standard iCalendar

Introduction (2)

hCalendar is defined by the XMDP profile at URI http://microformats.org/profile/hcalendar
- Link should be included in (X)HTML document using this microformat.

 <head profile="http://microformats.org/profile/hcalendar">

 <link rel="profile"
  href="http://microformats.org/profile/hcalendar">

 This content uses
 <a rel="profile"
  href="http://microformats.org/profile/hcalendar">
  hCalendar</a>.

Event Markup Example in iCalendar Format

      BEGIN:VCALENDAR
      BEGIN:VEVENT
      UID:guid-1.host1.com
      DTSTAMP:19980309T231000Z
      DESCRIPTION:Project XYZ Review Meeting
      SUMMARY:XYZ Project Review
      DTSTART:19980312T133000Z
      DTEND:19980312T143000Z
      LOCATION:1CP Conference Room 4350
      END:VEVENT
      END:VCALENDAR

Corresponding hCalendar Event Markup

 <div class="vevent">
 <h3 class="summary">XYZ Project Review</h3>
 <p class="description">Project XYZ Review Meeting</p>
 <p>To be held on
 <abbr class="dtstart" title="1998-03-12T08:30:00-05:00">
 12 March 1998 from 8:30am EST</abbr>
 until
 <abbr class="dtend" title="1998-03-12T09:30:00-05:00">
 9:30am EST</abbr></p>
 <p>Location: <span class="location">1CP Conference Room 4350</span></p>
 <small>Booked by: <span class="uid">guid-1.host1.com</span> on
 <abbr class="dtstamp" title="19980309T231000Z">
 9 Mar 1998 6:00pm</abbr></small>
 </div>

Tools for hCalendar Creating and Publishing

hCalendar Creator
Midgard CMS
Firefox Greasemonkey
Event plugin for Windows Live! Writer
… (see hCalendar implementation)

hCard - Introduction

Simple, open, distributed format for publishing information about people,companies, etc.
Corresponds 1:1 to vCard standard (RFC2426).
(X)HTML document using hCard should have assigned corresponding profile:

 <head profile="http://microformats.org/profile/hcard">

 <link rel="profile"
  href="http://microformats.org/profile/hcard">

 This content uses
 <a rel="profile"
  href="http://microformats.org/profile/hcard">hCard</a>.

vCard Example

 BEGIN:VCARD
 VERSION:3.0
 N:Bartek;Ludek
 FN:Ludek Bartek
 URL:http://www.fi.muni.cz/~bar
 END:VCARD

Corresponding hCard

 <div class="vcard">
  <a class="url" href="http://www.fi.muni.cz/~bar/">
   <span class="fn n">
    <span class="given-name">Ludek</span>
    <span class="family-name">Bartek</span>
   </span>
  </a>
 </div>

hCard Creation and Manipulation Tools

hCard creator
Wordpress Addressbook plugin

XOXO - Introduction

Simple format for including outlines and presentations in XHTML.
Made up of the following XHTML modules:
- structure module (elements body, head, html, title)
- hypertext module (element a)
- list module (elements dl, dt, dd, ol, ul, li)
- meta information module (element meta)
- style sheet module (element style)
- style attribute module (attribute style)
- link module (element link)
- legacy module (attribute compact u ol a ul)

Introduction (2)

It is a good practice to assign following profile to a document using XOXO microformat:

 <head profile="http://microformats.org/profile/xoxo">

 <link rel="profile"
 href="http://microformats.org/profile/xoxo">

Sample XOXO Markup

 <ol class='xoxo'>
   <li>Subject 1
     <ol>
         <li>subpoint a</li>
         <li>subpoint b</li>
     </ol>
   </li>
   <li>Subject 2
     <ol compact="compact">
         <li>subpoint c</li>
         <li>subpoint d</li>
     </ol>
   </li>

Sample XOXO Markup (2)

   <li>Subject 3
     <ol>
         <li>subpoint e</li>
     </ol>
   </li>
 </ol>

Sample CSS for Example Visualization

 ol.xoxo { list-style:decimal; }
 ol.xoxo ol { list-style:lower-latin; }
 ol[compact="compact"] { display:none; }

Creating XOXO documents

S5Easy - on-line slide show generation tool
Slimey
…

hResume - Description (1)

Microformat for including resume in (X)HTML pages.
Composed from following microformats:
- hCard
- hCalendar
- rel-tag

Description (2)

It is a good practice to add links to following profiles to document using hResume:

hResume

 <head profile="http://microformats.org/profile/hresume">

 <link rel="profile"
  href="http://microformats.org/profile/hresume">

hCard
hCalendar
eventually. geo, …

Sample - see example from lecture.

Microformats Design Patterns - Introduction

Offers the vocabulary of commonly used markup across microformats.
Basic design patterns:
- abbr-design-pattern
- class-design-pattern
- datetime-design-pattern, date-design-pattern
- class names defined across all design patterns
- include-pattern
- value-class-pattern
- rel-design-pattern
- atomic microformats
- composed microformats

Abbr-design-pattern

Is used to make human-readable text machine-readable as well.
Wraps the human-readable text into abbr element (it contains machine readable equivalent of particular value).

      <abbr class="author" title="Danny Ayers">Danny</abbr>

Not recommended for usage in documents to be accessed by programlisting readers
we have a party in

 <abbr class="dtstart" title="20070312T1700-06">
  March 12, 2007 at 5 PM
 </abbr>

Class-design-pattern

The best matching (X)HTML element should be used.
The semantics is assigned to the elements using the semantic classes.

<div class="vcard">
  <a class="url fn" href="http://www.fi.muni.cz/~bar">
   Ludek Bartek</a>,
  <span class="org">FI MU Brno</span>
</div>

Datetime-design-pattern

Used to make human readable time information machine readable as well.
Human readable time is enclosed into an abbr element.
Machine readable time is the value of attribute title in the format corresponding ISO-8601 standard.

<abbr class="dtstart" title="20051010T10:10:10-0100">
    10 o'clock on the 10th
</abbr>

Atomic microformats

The minimalistic solution of a particular problem.
Composed from standard (X)HTML elements/attributes.
Are the base for composed microformats.
Often use either single class or rel attribute.
Example of atomic microformats:
- rel-license
- XOXO
- …

Composed Microformats

Composed microformats consists from atomic microformats and/or standard (X)HTML elements.
Are designed to be easily included in web pages.
Often use combination of several class or rel attributes.
Example of composed microformats:
- hCalendar
- hCard
- hResume
- …

XML Microformats

Introduction - Content

What are microformats?

Example of Microformat

Why to use microformats?

How can be microformats replaced? (1)

How can be microformats replaced? (2)

Standardized Microformats

Developed microformats

hCalendar - Introduction

Introduction (2)

Event Markup Example in iCalendar Format

Corresponding hCalendar Event Markup

Tools for hCalendar Creating and Publishing

hCard - Introduction

vCard Example

Corresponding hCard

hCard Creation and Manipulation Tools

XOXO - Introduction

Introduction (2)

Sample XOXO Markup

Sample XOXO Markup (2)

Sample CSS for Example Visualization

Creating XOXO documents

hResume - Description (1)

Description (2)

Microformats Design Patterns - Introduction

Abbr-design-pattern

Class-design-pattern

Datetime-design-pattern

Atomic microformats

Composed Microformats

Resources