PB138 — XML Microformats

(C) 2018 Masaryk University --- Tomáš Pitner, Luděk Bártek, Adam Rambousek

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)

 <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

    • …​

Resources