Microformats

Raúl Martín RodríguezCarlos Tejo Alonso

HCI-RG Workshop

Problem

web 4 humansvs

web 4 computers

HCI-RG Workshop

What is a microformat?

It is an approach to annotate datasemantically in a

webpage

HCI-RG Workshop

Example xhtml

<div><a href=”http://www.dayures.net/”>Carlos Tejo</a> from<span>HCI-RG</span>

</div>

HCI-RG Workshop

Example hCard

<div class=”vcard” ><a href=”http://www.dayures.net/”>Carlos Tejo</a> from<span>HCI-RG</span>

</div>Microformats have a root element.

hCard root elements have theclass value=“vcard”.

Microformats have a root element.

hCard root elements have theclass value=“vcard”.

HCI-RG Workshop

Example hCard

<div class=“vcard” ><a class=“fn”href=”http://www.dayures.net/”>Carlos Tejo</a> from<span>HCI-RG</span>

</div>Formatted Names:

class=“fn” (root)class=“given-name”class=“family-name”

Formatted Names:

class=“fn” (root)class=“given-name”class=“family-name”

HCI-RG Workshop

Example hCard

<div class=“vcard” ><a class=“url fn”href=” http://www.dayures.net /”>Carlos Tejo</a> from<span>HCI-RG</span>

</div> URL:

class=“url”

URL:

class=“url”

HCI-RG Workshop

Example hCard

<div class=“vcard” ><a class=“url fn”href=”http://www.dayures.net/”>Carlos Tejo</a> from<span class=“org” >HCI-RG</span>

</div>Organization:

class=“org”

Organization:

class=“org”

HCI-RG Workshop

Example hCard

BEGIN:VCARDVERSION:3.0N:Carlos;TejoFN:Carlos TejoURL:http://www.dayures.netORG:HCI-RGEND:VCARD

HCI-RG Workshop

Semantic

is NOT the Semantic Web!!!

HCI-RG Workshop

Semantic

RDFa, W3C proposal in order to expresssemantic information in (X)HTML documents

HCI-RG Workshop

Theory

� People and Organizations (hCard )

� Calendars and Events (hCalendar )

� Locations (geo )

hCard geo hCalendar

HCI-RG Workshop

”Live” Examples

� http://www.flickr.com/photos/nextors/map/

HCI-RG Workshop

”Live” Examples

� Firefox Extension Tails Export

Exporting microformats via bluetooth

HCI-RG Workshop

It’s your turn!

Questions?

Questions