MICROFORMATS

Ioana BărbănțanSemantic Web developer

2

Content• What Are The Microformats?

o Definitions

• Benefits & Limitation• An Example • Categories• Web & Mobile Browsers Supporting Microformats• Facebook• Conclusions

09/05/2012

3

What Are The Microformats?

Official definition of microformats• set of simple, open data formats • built upon existing and widely adopted standards• designed for humans first and machines second• intend to solve simpler problems first by adapting to

current behaviors and usage patternsOther properties• makes a page evolve from being machine-readable to

being machine understandable• set of conventions• microformats are not a new language

o but adapted to current behaviors and usage patterns and is connected with semantic XHTML

09/05/2012

4

Microformats Concept• Generic title given to any and all the formats

based on XML/HTML with the objective of providing additional metadata concerning the web object

09/05/2012

5

Benefits & Limitations• B1: They will improve the semantic value of the

content• B2: Reuse of HTML and XML tags to convey data• B3:Add structure to content• L1: Web browsers do not support them uniformly• L2: They require additional HTML markup

09/05/2012

6

An ExampleProblem: the need to mark-up address information semantically. <div class="adr"><abbr class="type" title="dom">U.S.</abbr><span class="type">home</span> address, for<abbr class="type" title="postal">mail</abbr> and<abbr class="type" title="parcel">shipments</abbr>:<div class="street-address">123 Main Street</div><span class="locality">Any Town</span>,<span class="region">CA</span><span class="postal-code">91921-1234</span></div> Microformats are easily human-readable when rendered in a browser.

09/05/2012

7

CategoriesPeople and Organizations • hCard

<div class="vcard"> <a class="url fn" href="http://tantek.com/">Tantek Çelik</a> </div>

• Geoo enables publishers to add geodata about the location of a person, place, event, or thing

to a page<span class="geo"><span class="latitude">27.976628</span>, <span class="longitude"> å86.933302</span></span>

• XFN (XHTML Friends Network) is a simple way to represent human relationships using hyperlinkso indicate their relationship(s) to the people in their blogrolls simply by adding a 'rel'

attribute to their <a href> tags<a href="http://jeff.example.org" rel="friend met">

o other rel : coworker, neighbor, child

09/05/2012

8

Categories• hRecipe• markup for creating meals, drinks, food-based

items• identify individual food related concepts• required property: fn – fromatted name and an

ingredient<span class = “hrecipe”><span class = “fn ingredient”> sugar </span></span>

09/05/2012

9

Categories –contd.• Calendars and Events

o hCalendar

• Opinions, Ratings and Reviews o VoteLinks, hReview

• Licenses o rel-license

• Tags, Keywords, Categories o rel-tag

• Lists and Outlines o XOXO

09/05/2012

10

Web Browsers Supporting Microformats• Firefox from V3

o Operator add-on that detects microformats in each page you view and enables actions on them

• IE, 7+ supports microformats using add-ins • Chrome 5+• Safari – has unofficial plugins

09/05/2012

11

Mobile Browsers Supporting Microformats• No support

o BlackBerryo iPhone

• Nokiao The S60 3rd generation browser can handle vcards and icals extracted

from hcards and vcards very well

09/05/2012

12

User Interface

09/05/2012

13

Firefox Microformats

09/05/2012

14

Firefox Microformats

09/05/2012

Person representation<div class="vcard"> <a class="url fn" href="http://tantek.com/">Tantek Çelik</a> </div>

15

Firefox Microformats –contd.

09/05/2012

Eventsexport to outlook/ windows live / Google / Apple / 30 boxesexport event add to 30 boxesbookmarkadd to Google/Yahoo calendar

16

Firefox Microformats –contd.

09/05/2012

Tagspacesfind products on amazon/ del.icio.usfind photos on flickrfind bookmarksfind blogsfind events on upcoming.orgfind answers on Yeddafind videos on Youtube

17

IE Microformats

09/05/2012

18

IE Microformats

09/05/2012

19

Chrome Microformats

09/05/2012

20

Facebook Uses Microformats

•  Facebook has marked up all events with the hCalendar microformat including marking up their venues with hCard as well

<div>Monday, March 14 ·<span class="dtstart"> <span class="value-title" title="2011-03-14T18:00:00"> </span>6:00pm</span> - <span class="dtend"> <span class="value-title" title="2011-03-14T21:00:00"> </span>9:00pm</span> </div>

09/05/2012

21

Conclusions • A format used in the Semantic Web that re-uses

HTML and XML tags to convey• Provide easy reading and understanding by

humans• Add structure to content• Humans first, machines second

09/05/2012

22

References• http://microformats.org/• John Allsop, “Microformats: Empowering Your

Markup for Web 2.0”, Berkeley, CA , 2007

09/05/2012

23

• Mulțumesc!

09/05/2012