Lesson 1 HTML Microformats

First what are microformats, microformats are simple codes that you can use to identify specific kinds of data, like people or events, in your webpages. Also a good way to publish information in an easier form.

Objective

This lesson will consist of learning about what are vCards,hCards,iCalendar,hCalendar.

vCards

vCard is a file format standard for electronic business cards. vCards are often attached to e-mail messages, but can be exchanged in other ways, such as on the World Wide Web or Instant Messaging. They can contain name and address information, phone numbers, e-mail addresses, URLs, logos, photographs, and even audio clips.


BEGIN:VCARD
VERSION:3.0
N:Parker;Peter
FN:Peter Parker
ORG:The Daily Bugle
TITLE:Photograhper
PHOTO;VALUE=URL;TYPE=GIF:http://www.site.com/dir_photos/my_photo.gif
TEL;TYPE=WORK,VOICE:(222) 555-1212
TEL;TYPE=HOME,VOICE:(101) 555-6261
ADR;TYPE=WORK:;;401 Forest Hills rd;Queens;NY;25595;United States of America
LABEL;TYPE=WORK:401 Forest Hills rd, NY 25595\nUnited States of America
ADR;TYPE=HOME:;;401 Forest Hills rd;Queens;NY;25595;United States of America
LABEL;TYPE=HOME:401 Forest Hills rd, NY 25595\nUnited States of America
EMAIL;TYPE=PREF,INTERNET:pparker@example.com
REV:20080424T195243Z
END:VCARD

hCards

hCard is a microformat for publishing the contact details (which might be no more than the name) of people, companies, organizations, and places, in (X)HTML, Atom, RSS, or arbitrary XML. The hCard microformat does this using a 1:1 representation of vCard (RFC 2426) properties and values, identified using HTML classes and rel attributes.

It allows parsing tools (for example other websites, or Firefox's Operator extension) to extract the details, and display them, using some other websites or mapping tools, index or search them, or to load them into an address-book program.

Property List hCard properties (sub-properties in parentheses like this) Required:
  • * fn
  • * n1 (family-name, given-name, additional-name, honorific-prefix, honorific-suffix)
Optional:
  • * adr (post-office-box, extended-address, street-address, locality, region, postal-code, country-name, type, value)
  • * agent
  • * bday
  • * category
  • * class
  • * email (type, value)
  • * geo (latitude, longitude)
  • * key
  • * label
  • * logo
  • * mailer
  • * nickname
  • * note
  • * org (organization-name, organization-unit)
  • * photo
  • * rev
  • * role
  • * sort-string
  • * sound
  • * tel2 (type, value)
  • * title
  • * tz
  • * uid
  • * url 
    
    <div class="vcard">
    	<a class="fn org url" href="http://www.commerce.net/">CommerceNet</a>
    	<div class="adr">
    		<span class="type">Work</span>:
    		<div class="street-address">169 University Avenue</div>
    			<span class="locality">Palo Alto</span>,  
    			<abbr class="region" title="California">CA</abbr>  
    			<span class="postal-code">94301</span>
    			<div class="country-name">USA</div>
    		</div>
    	<div class="tel">
    		<span class="type">Work</span> +1-650-289-4040
    	</div>
        
    	<div class="tel">
    		<span class="type">Fax</span> +1-650-289-4041
    	</div>
    	<div>Email: 
    		<span class="email">info@commerce.net</span>
    	</div>
    </div>

iCalendar

iCalendar is a computer file format which allows Internet users to send meeting requests and tasks to other Internet users, via email, or sharing files with an extension of .ics. Recipients of the iCalendar data file (with supporting software, such as an email client or calendar application) can respond to the sender easily or counter propose another meeting date/time.[1]

iCalendar is used and supported by a large number of products, including Google Calendar, Apple iCal[2], GoDaddy Online Group Calendar [3], IBM Lotus Notes [4] and partially also by Microsoft Outlook. iCalendar is designed to be independent of the transport protocol. For example, certain events can be sent by traditional email or whole calendar files can be shared and edited by using a WebDav server, or SyncML. Simple web servers (using just the HTTP protocol) are often used to distribute iCalendar data about an event and to publish busy times of an individual. Publishers can embed iCalendar data in web pages using hCalendar, a 1:1 microformat representation of iCalendar in semantic (X)HTML.


BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//hacksw/handcal//NONSGML v1.0//EN
BEGIN:VEVENT
UID:uid1@example.com
DTSTAMP:19970714T170000Z
ORGANIZER;CN=John Doe:MAILTO:john.doe@example.com
DTSTART:19970714T170000Z
DTEND:19970715T035959Z
SUMMARY:Bastille Day Party
END:VEVENT
END:VCALENDAR

hCalendar

hCalendar (short for HTML iCalendar) is a microformat standard for displaying a semantic (X)HTML representation of iCalendar-format calendar information about an event, on web pages, using HTML classes and rel attributes.

It allows parsing tools (for example other websites, or browser add-ons like Firefox's Operator extension) to extract the details of the event, and display them using some other website, index or search them, or to load them into a calendar or diary program, for instance. Multiple instances can be displayed as timelines.


  <p class="vevent">
    The <span class="summary">English Wikipedia was launched</span> 
    on 15 January 2001 with a party from 
    <abbr class="dtstart" title="2001-01-15T14:00:00+06:00">2</abbr>-
    <abbr class="dtend" title="2001-01-15T16:00:00+06:00">4</abbr>pm at 
    <span class="location">Jimmy Wales' house</span> 
    (<a class="url" href="http://en.wikipedia.org/wiki/History_of_Wikipedia">
    more information</a>)
  </p>