Mikroformat Vad, Varför och Hur

Det finns mycket data på webben. Typ mycket. Men jag skulle gissa att de data som är mest användbara för massorna, till exempel information om personer som de behöver kontakta eller händelser som de behöver delta, lagras i HTML, där du inte enkelt kan komma åt det. Så vem ska du ringa? Mikroformat försöker ta på jobbet!

Vad?

Låt oss ta det här från toppen. Vad är mikroformat? På hemsidan för microformats.org kommer denna definition:

Designad för människor först och andra maskiner, är mikroformat en uppsättning enkla, öppna dataformat som bygger på befintliga och allmänt antagna standarder.

En bra start, men vi behöver lite mer för att klargöra. Du kan hitta en hel lista med definitioner på webbplatsen, men här är sammanfattningen: mikroformat är en uppsättning standarder för inbäddning av lätt extraherbar data på dina sidor, med hjälp av teknik du är bekväm med idag. Den stora delen av detta är att du förmodligen har innehåll på din webbplats just nu att du kan markera med en mikroformat. Ju större del är att det bara tar dig några minuter efter att du läst den här handledningen.

Varför?

Så varför ska du använda mikroformat? Vad är incitamentet? Tja, om du är övertygad om att HTML ska vara semantisk bara för att då kommer mikroformat att klicka med dig. Annars kommer jag att övertala: som vi märkte är hela ideen om mikroformat att standardisera så att data markeras på en sida så att det enkelt kan extraheras. För närvarande finns det inte många verktyg som utnyttjar mikroformat, men jag tror att det kommer att förändras. Att använda mikroformat i ditt arbete kommer att förbereda dina webbplatser för framtiden, när mikroformat blir mycket mer utbredd. Återigen har webbplatsen en allmän lista över vad du kan göra med mikroformat. Det finns redan anständigt Firefox addon för extrahering av mikroformat; det kallas operatör.

Sedan, Dan Web har skapat ett enkelt JavaScript-bibliotek som heter "Sumo" som extraherar mikroformat för användning med JavaScript. Du kan också prova microformats bookmarklet.

På vilket sätt?

Tja, om du har fått det här långt är det uppenbart att du och mikroformat var avsedda för varandra. Så låt oss hoppa in och titta på en. Men innan vi gör så här är den allmänna strukturen hos mikroformaten vi tittar på: i allmänhet, om de involverar mer än ett element i vår kod använder de klasser. Om de bara berör ett element, är det vanligen det rel attribut som används.

hCalendar

hCalendar är ett enkelt sätt att markera händelser. Vi börjar med ett element som deklarerar vår händelse:

 

Om du har flera händelser ska du lägga dem i en div.vcalendar; Det är dock inte nödvändigt. Det finns två nödvändiga egenskaper för en händelse: startdatumet (dtstart) och sammanfattningen. Låt oss lägga till följande:

 

I år, vår företagsferie middag kommer att börja på 2009-12-18T17: 30.

Mänsklig läsbar, va? Inte det datumet! Du har rätt; Även om mikroformat är skrivet för människor först är datum ett område där det är viktigt att datorer kan läsa den. En vanlig konvention skulle vara att skriva datumet med en abbr-tagg, i vilket fall titelattributet skulle vara värdet för egenskapsvärdet:

 5:30 på fredagen den 18 december.

Det finns också andra valfria egenskaper du kan lägga till. Vad sägs om en sluttid eller en plats?

 

Vi träffas i konferensrum på Tower Hotel, som vi har reserverat fram till 09:30.

Med hjälp av operatörsfältet i Firefox kan vi se att den här händelsen finns på vår sida. Vi kan arbeta med det på flera sätt:

Om jag väljer att exportera den till Google Kalender, överförs den helt över de värden vi har ställt.

Mer information om hCalendar finns i hCalendar-dokumentationen,

hCard

Låt oss gå vidare till hCard; hCard är mycket mer komplicerat än hCalendar, men vi kommer inte att komma in i alla detaljer. Om du vill läsa mer senare, kolla in dokumenten.

Återigen börjar vi med vår rot:

 

För hCard finns det bara två nödvändiga egenskaper; namnet (n) och det formaterade namnet (fn). Vanligtvis finns det samma element.

 

John Doe

Utan att gå för djup, noterar jag att det här formatet innebär att "John" är förnamnet och "Doe" är efternamnet. Om du vill ange detta kan du använda namnen på förnamn och familjenamn:

 John Hind 

Självklart vill du vanligtvis lägga till mer än bara ditt namn. Du kan lägga till ett smeknamn, foto, e-postadress, födelsedag, webbadress, telefonnummer och adress, för att bara nämna några.

 

jaydee

  • Hem: (416) 123-4567
  • Arbete 416-987-6543

1 januari 1980

Min webbsida

123 Main Street

Toronto, Ontario M2W 4R5

kanada

Det finns några saker att notera här:

  • Alla klassnamnen jag har använt här är hCard-egenskaperna.
  • Vissa egenskaper, som url och foto, tar sina värden från attributen href eller src och inte elementets text.
  • Egenskaper som tel och e-post kan ha två barns egenskaper: typ och värde. Om endast typ är definierad kommer värdet att vara underförstått (som du kan se i den andra e-postadressen och telefonnumret).

Med Operatör kan jag exportera detta som ett vcard ...

... och öppna den i Outlook.

Se? Allt vi definierat är här!

xFolk

xFolk är en utvecklande mikroformat för öppna sociala bokmärken. Från dokumenten:

Brist på en öppen, interoperabel datastandard är ett viktigt problem vid användning av sociala bokmärkningstjänster. En öppen standard skulle göra det möjligt att enkelt samla in sociala bokmärkesdata och remixa den för att uppfinna nya tjänster ... En öppen standard skulle också göra det möjligt att skriva JavaScripts som fungerar över tjänster som vissa för närvarande gör för del.icio.us, vilket möjliggör cross- ombord förbättringar i användarupplevelse.

För att implementera xFolk, börja med att ge varje bokmärkeomslag en klass av 'xfolkentry':

  

Lägg sedan in länken och en beskrivning, vilket ger dem klasser av 'taggedLink' respektive 'description'.

 Nettuts, den bästa webbutvecklingsbloggen på planeten. 

Yup, enkelt; Jag kan föreställa mig att det är användbart på en bloggrulle eller i en web-roundup. Tänk på ett verktyg som skulle låta dig boka alla dessa länkar på en gång.

XFN (XHTML Friends Network)

XFN är ett enkelt sätt att markera mänskliga relationer. Använda rel attributet (som saknar relation) på dina länkar definierar du ditt förhållande med ägaren till sidan du länkar till. Du kan ha ett förhållande med två parter: andra eller dig själv (ja, dina andra sidor). Det är lätt att definiera andra sidor du äger:

 Mina Posterous Mina Foton Mina Tweets 

Ganska enkelt, va? rel = "me" och du är klar.

Förhållanden med andra människor är lite mer detaljerade, men inte svårare: Det finns sex kategorier du kan välja mellan: vänskap, fysisk, professionell, geografisk, familj, romantisk. Jag kommer inte att lista dem alla här (en bra idé är att försöka länkskaparen), men här är några exempel:

 
  • God vän
  • Darling fru
  • Kille bredvid
  • Medarbetare på Envato

I den första länken kan du berätta från rel attributet att jag har träffat ägaren till sidan jag länkar till och att jag är hans vän. Nästa är min (hypotetiska) fru, som råkar vara min make och älskling, liksom någon som jag har träffat och som inspirerar mig. Jag har också träffat killen bredvid, men han är bara en bekant och granne. Slutligen, även om min (igen hypotetiska) Medarbetare är en vän, märker att jag aldrig har träffat honom. Detta skulle beskrivas som ett virtuellt förhållande. Jag borde påpeka att du inte ska använda XFN när du bara länkar till ett blogginlägg eller liknande; använd det när du direkt hänvisar till en person, så det är namnet på länken och href går till deras hemsida.

VoteLinks

VoteLinks är en intressant idé: när du länkar till en artikel, posta, produkt, något, lägg till rev attributet. Varv? Rev är motsatsen till rel; medan rel beskriver vad den länkade sidan är till den aktuella sidan (som en "vän" eller ett "stilark"), beskriver rev den aktuella sidan till den länkade. Med VoteLinks kan du göra din sida en "rösta-för", "rösta mot" eller "rösta-avstå" vad du än länkar till. Så till exempel:

 

Kolla vårt fantastiska blogginlägg av Collis på nätet

Jag fick hemsk service vid Five Seasons Grill igår kväll

Vad tänker jag på sin webbplats omkonstruktion?

Hur är det här användbart? Tänk om Google (och andra sökmotorer) tog hänsyn till VoteLinks när du visar objekt. För närvarande är deras system (läggs mycket i grunden) de fler länkar, desto mer synlighet på Google. Men vad händer om de flesta av dessa länkar var röster mot produkten eller sidan? Eller hur är det med en webbplats som crawls på nätet som söker VoteLinks och visar dig sidans allmänna popularitet? Det är allt väldigt spekulativt, men det kan vara intressant. Problemet är att många människor behöver använda VoteLinks för att de ska ha någon effekt.

Geo

Geo är väldigt enkelt; den har två egenskaper: latitud och longitud.

 

Apple: (37,33171397409807 -122,03051626682281)

Envato: -37 ° 48 '45.1008 " 144 ° 58 '8,6736 ".

Som vi har sett tidigare kan du använda abbr-elementet för att maskera de verkliga värdena. Och självklart erkänner Operatör dessa.

rel-licens

Om du någonsin släppt någonting för allmänheten vet du att du måste göra en licens på den. Du kan ge rel attributet för en länk värdet av "licens" när du länkar till licensdokumentationen.

 cc med 2,0 

Vad är poängen? Redan Yahoo Creative Commons Search och Google Usage Right Search använder båda attributet rel = "license" i deras algoritmer.

rel-tagg

Det här är en intressant, för varje bloggare taggar sina inlägg. För denna mikroformat, lägg till rel = "tag" till dina taglänkar och gör det. Nu kan vi använda innehållet från Operator-tillägget från andra webbplatser med samma taggar. Det är viktigt att notera att namnet på taggen är hämtat från länkens href och inte texten till länken. Så i följande exempel ...

 Client-Side Scripting 

... taggen är 'javascript' och inte 'script-side scripting'.

Nettuts har implementerat denna mikroformat; men du visste redan om du har operatör!

rel-nofollow

En annan enkel men förhoppningsvis effektiv tagg: att lägga till rel = "nofollow" till en länk är utformad för att hålla länken från att ha någon inverkan på sidans placering i sökmotorer. Naturligtvis måste sökmotorn implementera detta, och Google, Yahoo och Bing har redan. Det skulle vara perfekt att lägga till det på några länkar i bloggkommentarer, så att de inte kommer att påverka din webbplats och inte få någon egen kredit.

Så vad ska du göra?

Vi har kort täckt ett hälsosamt antal mikroformat; men frågan kvarstår: är de värda din tid? Inte förrän du börjar använda dem! Mikroformat är gjorda för att göra sidan skrapande för data enklare, men tills de används i stor utsträckning kommer det inte att finnas så många verktyg för dem. Även om många av dessa kan verka meningslösa nu, förhoppningsvis kommer de att vara överallt om några år. När det händer kommer verktygen att använda dem vara tillgängliga. Mikroformat är definitivt värt din tid: så lätt, så billig, så potentiellt kraftfull.

Kommer du att implementera mikroformat i dina webbplatser?

Jag har gömt en mikroformat i denna handledning kan du hitta den?

  • Följ oss på Twitter, eller prenumerera på Nettuts + RSS-flödet för de bästa webbutvecklingsstudierna på webben.