Strukturerad information med microformats
Genom att märka upp din HTML-kod med specifika klasser tillför du semantisk mening och gör det möjligt för datorer och system att förstå vad det är du beskriver på webben.
Förutom Microformats, som vi kommer att titta på här, så finns det ett par andra standards som gör ugefär samma sak. De vanligaste alternativen idag är JSON-LD, HTML Microdata och RDFa. Google stöder exempelvis alla dessa tre standards.
Konceptuellt så fungerar dessa på ungefär samma sätt, så i det avseendet får du förhoppningsvis ut något av artikeln även om du hellre arbetar med någon av dessa två andra standards.
Tips! På schema.org finns standardiserade scheman för Microdata för många av de vanligaste saker man vill märka upp.
Vad är microformats?
Idag finns det några program och webbsidor som verkligen utnyttjar microformats, men inom en inte allt för avlägsen framtid kommer det troligen finnas ännu fler smarta och vettiga sätt att utnyttja all den information som ändå redan finns där. Vill du ha en adressbok som uppdaterar sig själv? Vill du att sökmotorer skall förstå vad som är vad på din webbplats? Vi är redan på väg dit.
Det kan väl knappast ha undgått någon med intresse för webbdesign och webbutveckling att det numer är viktigt att bygga webbplatser med hjälp av webbstandards. På samma skoningslösa sätt som ångmaskinen konkurrerades ut av den elektriska motorn har webbdesign med tabellbaserad layout, font-taggar och genomskinliga 1px stora GIF-bilder konkurrerats ut av responsiv CSS och externa JavaScript de senaste åren.
Utvecklare validerar sin HTML och CSS och använder hjälpmedel som jslint för att skriva bättre JavaScript, allt för att bygga bättre webbplatser. Förutom detta så börjar fler och fler kunder kräva att webbplatserna skall vara tillgängliga för alla typer av besökare, vilket gör att vi verkligen höjt ribban de senaste åren.
Förutom allt detta så har vi den mobila webben, idag är det många som förväntar sig att de kan använda sin mobiltelefon för att kolla på webben på bussen hem från jobbet eller på väg till träningen. Informationen håller både på att bli mer tillgänglig och mobil, så vad kan vi göra för att bygga en ännu mer robust webb?
Information på webben måste bli enklare att tolka
För att få ihop alla dessa krav och önskemål är det väldigt viktigt att informationen på webben är lätt att förstå. Det gäller inte bara för oss människor, utan vår vardag blir väldigt mycket enklare om även datorerna kan tolka informationen och relatera den till vad som egentligen beskrivs. Tanken med microformats är att använda vanlig HTML och CSS för att märka upp informationen på webben för att åstadkomma just detta.
Som nämndes inledningsvis finns det andra liknande standards som microdata och RDFa, men koncepten är desamma som för microformats även om syntax och uppmärkning går annorlunda till. Google har exempelvis en bra introduktion till konceptet, som de generellt kallar för Rich Snippets, på webbplatsen ”Verktyg för webbansvariga”.
Microformats låter dig alltså tala om vilken typ av information som finns representerad på din sida, och det är faktiskt inte speciellt svårt att implementera.
Microformats intresserar många, och det tog exempelvis över tre år innan Microsoft över huvud taget officiellt uppmärksammade en teknik som RSS, men bara månader efter det att de första microformaten presenterades satt Bill Gates och pratade om dem i ett inledningsanförande på en stor utvecklarkonferens.
Det börjar även bli lite trendigt med microformats, men det är inte därför du skall börja implementera dem, utan för att detta kanske är början till en rad riktigt smarta applikationer som skulle underlätta vardagen för många av oss.
Vad skulle du säga om din adressbok själv höll reda på när dina kunder och kollegor på jobbet bytte mobilnummer eller adress? Eller vad skulle du tycka om du hela tiden kunde ha korrekta uppgifter om den där konferensen du skall åka på om två månader i din kalender?
Vi är inte riktigt där ännu, men det är inte långt borta…
Publicera kontaktuppgifter med hjälp av hCard
Säg att du skall publicera dina kontaktuppgifter på webben. Med hjälp av microformats kan du märka upp dessa så att andra enkelt kan se att det är kontaktuppgifter. Redan nu kan du importera dessa till din adressbok tack vare ett format som funnits sedan länge — vCard.
vCard är ett standardiserat format för att utbyta kontaktuppgifter mellan exempelvis kontaktboken på datorn, mobiltelefonen och din iPad. Med hjälp av microformat kan du nämligen märka upp dina uppgifter som ett hCard (vilket är det microformat som är baserat på vCard).
Ett exempel är våra kontaktuppgifter här på webbsidan
<p class="vcard">
<span class="fn">Christofer Sandin</span>,
<span class="org">
<a href="http://www.republic.se/” class="url">Republic Factory AB</a>
</span>
</p>
<p class="adr">
<span class="street-address">Korsgatan 12</span>,
<span class="postal-code">411 16</span>
<span class="locality">Göteborg</span>
</p>
<p>
<span class="tel">Tel: <span class="type">work</span>
<span class="value">031-7112620</span>
</p>
Här finns mina kontaktuppgifter uppmärkta efter den standard som beskrivs på hcard/microformats.org/wiki/hcard/ — om ni kollar i källkoden på kontakt-sidan finns det även en länk till Technoratis tjänst som konverterar denna HTML-kod till ett vCard. Tyvärr så fungerar den inte helt klanderfritt med våra svenska tecken å,ä och ö vissa gånger (trots att den är kodad med UTF‑8) så vi får väl bygga en egen snart… men ni förstår tanken.
Förutom hCard, som brukar vara standardexemplet i de flesta introduktioner jag läst, finns det faktiskt en rad andra ganska intressanta format.
Märk upp kalenderdata med hCalendar
hCalender, används för att märka upp evenemang, dvs. kalenderdata så som konferenser, möten och andra händelser som är styrda av tid, datum och plats. Tänk vad smidigt det skulle vara om iCal eller Outlook kunde prenumerera på informationen istället, och alltid hålla kalendern uppdaterad.
Här är ett exempel, saxat från microformats.org/wiki/hcalendar/, på en konferens uppmärkt med hCalendar:
<span class="vevent">
<a href="http://www.web2con.com/" class="url">
<span class="summary">Web 2.0 Conference</span>:
<abbr class="dtstart" title="2005-10-05">October 5</abbr>-
<abbr class="dtend" title="2005-10-08">7</abbr>, at the
<span class="location">Argent Hotel, San Francisco, CA</span>
</a>
</span>
Definiera en licens med rel-license
rel-license är ett sätt att tala om vilket typ av licens som gäller för publicerat material. Du kan till exempel märka upp att en sida med ikoner är publicerade under Creative Commons, en licens som gör det tillåtet att använda materialet i andra sammanhang, så att alla som kollar på dina ikoner vet att det är ok att använda dessa i egna projekt.
Även de stora spelarna utnyttjar rel-license — Yahoo har till exempel redan idag en sökmotor som söker bland material med Creative Commons-licens.
Det är alltså rel
-attributet i a
-taggen som sätts till “license” (därav då även namnet rel-license) och länken läggs till på de sidor för vilken den tänkta licensen gäller;
<a href="http://creativecommons.org/licenses/by/2.0/" rel="license">
CC by 2.0
</a>
Tagga upp information med rel-tag
Taggar har blivit ett väldigt populärt sätt att märka upp och kategorisera exempelvis artiklar, länkar och blogginlägg.
Tjänster som Flickr, Wikidpedia och delicious använder alla taggar och då microformatet rel-tag.
Så här märker du upp en länk med taggen “microformats” på Technorati;
<a href="http://technorati.com/tag/microformats" rel="tag">
microformats
</a>
Märk upp vänner och kollegor
X.F.N. betyder XHTML Friends Network och är också det ett hjälpattribut för att ge länkar en mer betydelsefull innebörd.
Detta är ett sätt att tala om vilken din relation är till den person som du länkar till. Exempelvis kan du tala om om du träffat personen, om det är en vän, en bekant eller en kollega i samma bransch. Men det finns också sätt beskriva dina romantiska känslor (så som en partner) och familjerelationer (syskon, förälder, etc). En komplett lista med alla värden som rel-attributet kan anta finns på http://gmpg.org/xfn/11.
Här är ett exempel på hur det kan användas på professionella webbsidor för att länka till exempelvis kollegor;
<a href="http://www.republic.se" rel="co-worker colleague met">
Republic Factory
</a>
Det finns mer…
Detta är några av de microformat som redan finns specificerade men det finns många fler intressanta varianter under utveckling.
Bland annat finns det microformats för att märka upp syndikerbart material (exempelvis bloggposter som publiceras via RSS), du kan använda hReview för att märka upp en recension av någonting eller använda hResume för att publicera din CV på webben.
Så varför inte börja använda microformats redan idag? Imorgon kanske någon har utvecklat en sökmotor för bokrecensioner eller ett system för att lokalisera vart potentiella kollegor (eller konkurrenter) inom samma bransch finns.
Eller som Paul Boag resonerade i en av sina podcasts; med tanke på den return-on-investment som man får genom att implementera microformats är det inte försvarsbart mot kunderna att låta bli. Microformats kräver ganska lite extra utvecklingstid och kan öppna många dörrar i framtiden.
Länkar och källförteckning
Avslutningsvis tänkte jag publicera en samlig med länkar till sidor som är intressanta om du vill fördjupa dig i microformats. Det finns även länkar till plug-ins för Firefox som meddelar när du befinner dig på en sida som innehåller microformats, och låter dig utnyttja dessa för lite olika ändamål.
- microformats.org
- Microformats Wiki
- Specifikationer för de olika formaten
- Microformats Cheat Sheet