Kopiëren van contactgegevens van een webpagina naar je eigen adresboek of mobiele telefoon kost veel tijd. En dat terwijl je een adres of telefoonnummer van een persoon of bedrijf tegenwoordig zo gemakkelijk op kunt zoeken.

Even een adres kopiëren betekent toch vaak dat je de gegevens één voor één in aparte velden moet plakken. Uiteindelijk loont het wel de moeite, omdat als ze eenmaal gestructureerd in je adresboek zitten je de contactgegevens makkelijk kunt synchroniseren met bijvoorbeeld je mobiele telefoon. Maar zou het niet veel makkelijker zijn als je deze contactgegevens en de daarbij behorende structuur met één druk op de knop zou kunnen kopiëren vanuit je browser naar je adresboek? Of nog beter: direct via Bluetooth naar je mobiele telefoon?

Microformats

Door inhoud op een pagina te voorzien van microformats worden dit soort acties een stuk eenvoudiger en neemt de bruikbaarheid van een site toe. In dit artikel leg ik stapsgewijs uit hoe één van de meestgebruikte microformats is opgebouwd.

hCard

Webpagina’s bevatten over het algemeen vrij veel ongestructureerde tekst. Goed, in de meeste pagina’s wordt er wel een onderscheid gemaakt tussen kopjes, alinea’s, lijstjes, tabellen en bijvoorbeeld linkjes, maar verder dan een redelijk grove structuur gaat HTML niet. In HTML zijn geen tags gedefinieerd waarmee je aan kunt geven dat een stuk tekst bijvoorbeeld een naam, adres, plaats of datum is. De mogelijkheden tot het aanbrengen van betekenisvolle opmaak beperken zich tot de structuur van documenten, omdat HTML daar ooit voor is bedacht.

Wanneer je echter automatisch contactgegevens wilt exporteren naar een adresboek hebben we veel meer structuur nodig. De adresregel hieronder van een fotograaf zou je onderaan de pagina van zijn website tegen kunnen komen. Een mens zal weinig moeite hebben om daaruit op te maken wat de naam, adres, postcode, plaatsnaam en telefoonnummer zijn, maar voor een machine ligt dat allemaal minder voor de hand.

<div>
 Johan Enschede - Fotograaf - Laan van Vollenhove 224, 1234 AB Den Haag - 010 - 123 45 67
</div>

Door het toevoegen van een aantal standaard span-tags kun je aangeven welke tekst-elementen qua betekenis bij elkaar horen.

<div>
  <span>Johan Enschede</span> - <span>Fotograaf</span> -
  <span>Laan van Vollenhove 224</span>,
  <span>1234 AB</span> <span>Den Haag</span> -
  <span>010 - 123 45 678</span>

</div>

Hierdoor hebben we al wat meer structuur in de HTML aangebracht. Een machine kan nu herkennen dat Enschede bij Johan hoort en niet een opzichzelfstaand iets is. Nu moeten we nog aangeven wat de verschillende span-tags (zoals Johan Enschede) voorstellen. Daarmee maken we de eerder genoemde automatische export mogelijk. Hiervoor gaan we gebruikmaken van microformats.

Microformats laten zich het best omschrijven als een afgesproken reeks class-names waarmee op een compacte manier meer betekenis binnen standaard-HTML kan worden aangebracht. Voor contactgegevens maken we gebruik van het hCard-formaat, waarmee we via de classnames zoals street-address, postal-code en locality aan kunnen geven wat de inhoud van bepaalde span-tags is.

<div>
  <span class="fn">Johan Enschede</span> - <span>Fotograaf</span> -
  <span class="street-address">Laan van Vollenhove 224</span>,
  <span class="postal-code">1234 AB</span> <span class="locality">Den Haag</span> -
  <span class="tel">010 - 123 45 678</span>

</div>

Dit werkt prima als er maar één adres op een pagina voorkomt. Maar wat als er meerdere contactgegevens voorkomen? Door er tags omheen te zetten kun je aangeven dat deze contactgegevens bij elkaar horen en dat Johan Enschede in Den Haag woont. In dit geval voorzien we de div van de classname vcard en plaatsen we een extra span-tag om het werkadres met de classnames adr en work.

<div class="vcard">
  <span class="fn">Johan Enschede</span> - <span>Fotograaf</span> -
  <span class="adr work">

    <span class="street-address">Laan van Vollenhove 224</span>,
    <span class="postal-code">1234 AB</span> <span class="locality">Den Haag</span> -
  </span>
  <span class="tel">010 - 123 45 678</span>

</div>

Je zult je misschien afvragen waarom de classname vcard wordt gebruikt terwijl we het over het hCard-microformat hebben. Het hCard-microformat is gebaseerd op het vCard-bestandsformaat dat al jaren wordt gebruikt om gegevens tussen mobiele telefoons en PIM’s zoals Outlook uit te wisselen. Eén van de uitgangspunten van microformats is dat ze zo veel mogelijk moeten aansluiten bij bestaande, geaccepteerde standaarden. Op die manier zorg je ervoor dat met microformats opgemaakte informatie vrij eenvoudig is te gebruiken met bestaande applicaties, webdiensten of apparaten.

Hoewel microformats juist extra structuur toevoegen aan ouderwetse HTML betekent dit niet dat de informatie ook gestructureerd moet worden weergegeven. Microformats laten zich prima verwerken in lopende tekst, zoals het onderstaande voorbeeld laat zien. Een korte biografie over iemand kan op deze manier als een hCard worden opgemaakt.

<p class="vcard">
  <span class="fn">Albert de Klein</span> is als
  <span class="role">projectleider</span> werkzaam bij <span class="org">Eend</span> in <span class="adr"><span class="locality">Utrecht</span></span> .

</p>

In bovenstaand voorbeeld ontbreken de exacte adresgegevens. In de specificatie voor het hCard-formaat wordt eigenlijk alleen de naam (fn of n) verplicht gesteld.

hCalendar

Een ander populair microformat is hCalendar. Dit microformat wordt gebruikt om evenementen of gebeurtenissen te voorzien van betekenisvolle structuur. Eenmaal voorzien van een hCalendar-formaat wordt het een stuk makkelijker om afspraken of evenementen toe te voegen aan je favoriete agendaprogramma of -webdienst.

<p class="vevent">Op <abbr class="dtstart" title="2008-05-29">29</abbr> en <abbr class="dtstart" title="2008-05-30">30 mei</abbr> vindt in <span class="location">Londen</span> de <span class="summary">Media 2008</span> conferentie plaats.</p>

In bovenstaand voorbeeld gebruik ik het <abbr>-element om de begin- en einddatum van een evenement te noteren. Hiermee voorkom je dat de volledige datum iedere keer moet worden uitgeschreven. Zo wordt het makkelijker om met data te werken in de lopende tekst.

Server-side acties

Maar wat kunnen we nu met die microformats doen? Het bijvoorbeeld mogelijk om met hCard opgemaakte contactgegegevens in een adresboek in te laden door op de pagina onderstaand download-linkje te plaatsen.

<a href="http://suda.co.uk/projects/microformats/hcard/get-contact.php?uri=http%3A%2F%2Feend.nl%2F">Download as vCard</a>

Het linkje roept een conversiescript aan. Het script zet vervolgens de hCards op de in de uri meegestuurde webpagina om naar een vCard (vcf) bestand. Het mime-type van het vCard-bestand wordt door de browser herkend. Daardoor zal in de meeste gevallen automatisch het bestand worden geopend of geïmporteerd in de standaard adresboekapplicatie, bijvoorbeeld de contactenlijst in Outlook of het adresboek in Thunderbird.

Bijkomend voordeel van het werken met een dergelijke downloadlinkje is dat het vCard-bestandje altijd de actuele contactgegevens op de pagina converteert. Als er via het CMS wijzigingen in de hCard-contactgegevens zijn aangebracht hoeven er niet ook nog eens losse bestandjes bijgewerkt te worden. Dat scheelt dus werk.

Browserondersteuning

Het zou natuurlijk nóg mooier zijn als je voor het importeren van gegevens in je adresboek niet meer aangewezen zou zijn op scripts zoals in het bovenstaande voorbeeld, maar dat de browser standaard ook al met microformats om zou kunnen gaan. De toegevoegde waarde van microformats wordt namelijk pas écht duidelijk als de bezoeker er handelingen mee kan uitvoeren. Met één druk op de knop een adres van een pagina aan je adresboek toevoegen, daarvan ziet iedereen het voordeel.

Op het moment van schrijven zijn er helaas nog geen browsers die standaard al microformats ondersteunen. De volgende generatie webbrowsers zal echter waarschijnlijk wél de mogelijkheid bieden om deze objecten te koppelen aan online of desktopapplicaties. Volgens de ontwikkelaars van Firefox 3 en Internet Explorer 8 gaan beide browsers microformats ondersteunen.

Maar totdat de definitieve versies van die browsers uit zijn, zijn we voor het werken met microformats nog aangewezen op browser plug-ins zoals te vinden op Firefox Extensions of de Safari Microformats plugin.

Operator voor Firefox

De populaire Operator plug-in voor Firefox geeft momenteel de beste indruk van wat we met microformats kunnen (gaan) doen.

Operator herkent automatisch allerlei microformats wanneer deze in een pagina zijn aangebracht. Zodra er microformats worden gedetecteerd in een pagina lichten de bijbehorende knoppen op de operator-balk op. Operator geeft je dan de mogelijkheid om met een of meer items uit een menu-lijst iets te doen: exporteren als vcf, via Bluetooth verzenden, etc. Zo kunnen met hCard-gecodeerde contactgegevens bijvoorbeeld rechtstreeks van een webpagina via Bluetooth naar een mobiele telefoon worden gestuurd. Ook kun je een adres opzoeken in Google Maps of een afspraak toevoegen aan Google Calendar.

Operator heeft bovendien een open architectuur, waardoor gebruikers ook zelf microformats en acties kunnen toevoegen via gebruikerscripts. Zo zijn er gebruikerscripts gemaakt waarmee microformats naar een specifieke website kunnen worden verstuurd.

Tenslotte

Populaire websites zoals Yahoo!, Flickr en LinkedIn hebben microformats inmiddels al omarmd en toegevoegd aan bijvoorbeeld contactgegevens in bedrijvengidsen en profielpagina’s van gebruikers op hun sites. In Nederland blijft het aantal drukbezochte websites dat met microformats werkt nog wat achter. Daarom leg ik in het tweede gedeelte van het artikel uit hoe je in je browser automatisch aan microformatloze websites van anderen tóch microformats toe kunt voegen. Zo kun je ook op deze sites van alle gemakken van microformats gebruik maken.

Verder lezen?

• Microformats - Plugging the Gaps in HTML
• Microformats.org
• Operator

• Home
• Artikelen
• Colofon