Mikroformater Hva, hvorfor og hvordan

Det er mange data på nettet. Liker mye. Men jeg vil gjette at dataene som er mest nyttige for massene, for eksempel informasjon om personer de trenger for å kontakte eller hendelser de trenger å delta, lagres i HTML, hvor du ikke lett kan komme til det. Så hvem skal du ringe? Mikroformater forsøker å ta jobben!

Hva?

La oss ta dette fra toppen. Hva er mikroformater? Av hjemmesiden til microformats.org kommer denne definisjonen:

Designet for mennesker først og andre maskiner, er mikroformater et sett med enkle, åpne dataformater basert på eksisterende og allment vedtatte standarder.

En god start, men vi trenger litt mer for å klargjøre. Du kan finne en hel liste med definisjoner på nettstedet, men her er sammendraget: Mikroformater er et sett med standarder for å legge inn lett utpakkbare data på sidene dine, ved hjelp av teknologier du er komfortabel med i dag. Den store delen om dette er at du sannsynligvis har innhold på nettstedet ditt akkurat nå at du kunne markere med en mikroformat. Den enda større delen er at det bare tar deg et par minutter etter å ha lest denne opplæringen.

Hvorfor?

Så hvorfor skal du bruke mikroformater? Hva er incitamentet? Vel, hvis du er overbevist om at HTML skal være semantisk bare fordi, så vil mikroformater klikke med deg. Ellers vil jeg overtale: Som vi la merke til, er hele ideen om mikroformater å standardisere den måten data er merket opp på en side, slik at den enkelt kan hentes ut. For tiden er det ikke mange verktøy som utnytter mikroformater, men jeg tror det vil endres. Ved å bruke mikroformater i arbeidet ditt, vil du forberede nettstedene dine til fremtiden, når mikroformater blir mye mer utbredt. Igjen har nettstedet en generell liste over hva du kan gjøre med mikroformater. Det er allerede anstendig Firefox addon for utvinning av mikroformater; det kalles operatør.

Deretter, Dan Web har opprettet et enkelt JavaScript-bibliotek kalt 'Sumo' som trekker ut mikroformater for bruk med JavaScript. Du kan også prøve micromarkets bookmarklet.

Hvordan?

Vel, hvis du har kommet så langt, er det åpenbart at du og mikroformater var ment for hverandre. Så la oss hoppe rett inn og se på en. Men før vi gjør det, her er den generelle strukturen av mikroformatene vi ser på: Generelt sett, hvis de involverer mer enn ett element i vår kode, bruker de klasser. Hvis de bare er opptatt av ett element, er det vanligvis rel attributten som brukes.

hCalendar

hCalendar er en enkel måte å markere hendelser på. Vi starter med et element som erklærer hendelsen vår:

 

Hvis du har flere hendelser, bør du pakke dem inn i div.vcalendar; Det er imidlertid ikke nødvendig. Det er to nødvendige egenskaper for en hendelse: startdatoen (dtstart) og sammendraget. La oss legge til disse:

 

I år, vår Bedriftsferie middag vil begynne på 2009-12-18T17: 30.

Menneskelig lesbar, eh? Ikke den datoen! Du har rett; Selv om mikroformater er skrevet for folk først, er datoene ett område hvor det er viktig at datamaskiner kan lese den. Felles konvensjon ville være å skrive datoen med en abbr-tag, i så fall vil tittelattributtet være verdien for eiendomsverdien:

 17.30 på fredag ​​18. desember.

Det finnes også andre valgfrie egenskaper du kan legge til. Hva med en sluttid, eller et sted?

 

Vi møter i konferanserom på Tower Hotel, som vi har reservert til 09:30.

Ved å bruke Operator Toolbar i Firefox, kan vi se at denne hendelsen er på vår side. Vi kan jobbe med det på flere måter:

Hvis jeg velger å eksportere den til Google Kalender, overfører den perfekt de verdiene vi har satt.

For mer om hCalendar, sjekk ut hCalendar-dokumentasjonen,

hCard

La oss gå videre til hCard; hCard er mye mer komplisert enn hCalendar, men vi kommer ikke inn på alle detaljer. Hvis du vil lese mer senere, sjekk ut dokumentene.

Igjen begynner vi med roten vår:

 

For hCard er det bare to nødvendige egenskaper; navnet (n) og det formaterte navnet (fn). Vanligvis er det samme element.

 

John Doe

Uten å gå for dypt, merker jeg at dette formatet innebærer at "John" er fornavnet og "Doe" er etternavnet. Hvis du vil spesifisere dette, kan du bruke navnene og familienavnene:

 John Doe 

Selvfølgelig vil du vanligvis legge til mer enn bare ditt navn. Du kan legge til et kallenavn, bilde, e-postadresse, bursdag, URL, telefonnummer og adresse, for bare å nevne noen.

 

Jaydee

  • Hjem: (416) 123-4567
  • Arbeid 416-987-6543

1. januar 1980

Min nettside

123 Main Street

Toronto, Ontario M2W 4R5

Canada

Det er noen ting å merke seg her:

  • Alle klassenavnene jeg har brukt her er hCard-egenskapene.
  • Noen egenskaper, som url og bilde, tar sine verdier fra attributene href eller src, og ikke elementets tekst.
  • Egenskaper som tel og e-post kan ha to barnegenskaper: type og verdi. Hvis bare type er definert, vil verdien bli underforstått (som du kan se i den andre e-postadressen og telefonnummeret).

Ved å bruke Operatør kan jeg eksportere dette som vcard ...

... og åpne den i Outlook.

Se? Alt vi definerte er her!

xFolk

xFolk er en utviklingsmikroformat for åpne sosiale bokmerker. Fra dokumentene:

Mangel på en åpen, interoperabel datastandard er et viktig problem ved bruk av sosiale bokmerkings tjenester. En åpen standard vil gjøre det mulig å enkelt samle sosiale bokmerkdata og remixe det for å finne nye tjenester ... En åpen standard vil også gjøre det mulig å skrive JavaScripts som fungerer på tvers av tjenester som noen for tiden gjør for del.icio.us, ombord forbedringer i brukeropplevelsen.

For å implementere xFolk, start ved å gi hvert bokmerke wrapper en klasse av 'xfolkentry':

  

Deretter legger du inn lenken og en beskrivelse, og gir dem klasser av henholdsvis 'taggedLink' og 'description'.

 Nettuts, den beste webutviklingsbloggen på planeten. 

Yup, enkel; Jeg kan forestille meg at dette er nyttig på en bloggrulle, eller i en web-roundup. Tenk på et verktøy som vil la deg bokmerke alle disse koblingene samtidig.

XFN (XHTML Friends Network)

XFN er en enkel måte å markere menneskelige relasjoner på. Ved å bruke rel attributten (som er kort for forholdet) på linkene dine, definerer du forholdet ditt med eieren av siden du kobler til. Du kan ha forhold til to parter: andre mennesker eller deg selv (vel, dine andre sider). Det er enkelt å definere andre sider du eier:

 Mine Posterous Mine Bilder Mine Tweets 

Ganske enkelt, eh? rel = "meg" og du er ferdig.

Forhold til andre mennesker er litt mer detaljert, men ikke vanskeligere: Det er seks kategorier du kan velge mellom: vennskap, fysisk, profesjonell, geografisk, familie, romantisk. Jeg vil ikke liste dem alle her (det ville være en god idé å prøve koblingsskaperen), men her er noen eksempler:

 
  • God venn
  • Darling kone
  • Guy naboen
  • Medarbeider på Envato

I den første linken kan du fortelle av rel attributten at jeg har møtt eieren av siden jeg knytter til, og at jeg er hans venn. Neste er min (hypotetiske) kone, som skjer med min ektefelle og kjære, så vel som noen som jeg har møtt og hvem inspirerer meg. Jeg har også møtt fyren ved siden av, men han er bare en bekjent og nabo. Til slutt, selv om min (igjen, hypotetiske) Medarbeider er en venn, legg merke til at jeg aldri har møtt ham; Dette vil bli beskrevet som et virtuelt forhold. Jeg bør påpeke at du ikke bør bruke XFN når du bare kobler til et blogginnlegg eller lignende; bruk den når du direkte henviser til en person, så navnet heter teksten til lenken, og href går til hjemmesiden sin.

VoteLinks

VoteLinks er en interessant idé: Når du kobler til en artikkel, legger ut, produkt, noe, legger du til rev-attributtet. Rev? Rev er det motsatte av rel; mens rel beskriver hva den koblede siden er til den nåværende siden (som en "venn" eller et "stilark"), beskriver rev den aktuelle siden til den koblede. Med VoteLinks kan du gjøre siden din en stemme for, stemme mot eller avstemme, uansett hva du knytter til. Så for eksempel:

 

Sjekk vårt flotte blogginnlegg av Collis på netsetteren

Jeg fikk forferdelig service på Five Seasons Grill i går kveld

Hva tenker jeg på ombyggingen av nettstedet deres??

Hvordan er dette nyttig? Tenk, om Google (og andre søkemotorer) tok VoteLinks i betraktning når du viste elementer. For tiden, deres system (sett veldig i utgangspunktet) er jo flere lenker, jo mer synlighet på Google. Men hva om de fleste av disse linkene var stemmer mot produktet eller siden? Eller hva med et nettsted som gjennomsøker nettet på jakt etter VoteLinks og viser deg sidens generelle popularitet? Det er alt veldig spekulativt, men det kan være interessant. Problemet er at mange mennesker trenger å bruke VoteLinks for at de har noen effekt.

Geo

Geo er veldig enkel; den har to egenskaper: breddegrad og lengdegrad.

 

Eple : (37,33171397409807 -122,03051626682281)

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

Som vi har sett før, kan du bruke abbr-elementet til å maskere de virkelige verdiene. Og selvfølgelig anerkjenner Operatør disse.

rel-lisens

Hvis du noen gang har gitt ut noe for allmennheten, vet du at du må sette inn en lisens på den. Du kan gi rel attributten til en lenke verdien av "lisens" når du kobler til lisensdokumentasjonen.

 cc med 2,0 

Hva er poenget? Allerede Yahoo Creative Commons Search og Google Usage Right's Search bruker begge rel = "license" -attributtet i deres algoritmer.

rel-tag

Dette er en interessant, fordi hver blogger merker innleggene sine. For denne mikroformat, legg ganske enkelt rel = "tag" til tagkoblingene dine og gjør det. Nå kan vi se innhold fra andre nettsteder med de samme kodene ved hjelp av vår Operator-tillegg. Det er viktig å merke seg at navnet på taggen er hentet fra href av lenken, og ikke teksten til linken. Så i følgende eksempel ...

 Client-Side Scripting 

... merket er «javascript» og ikke "script-side scripting."

Nettuts har implementert denne mikroformaten; men du visste allerede at hvis du har operatør!

rel-nofollow

En annen enkel men forhåpentligvis effektiv tag: legge rel = "nofollow" til en lenke er designet for å holde koblingen fra å ha noen innflytelse på sidens rangering i søkemotorer. Selvfølgelig må søkemotoren implementere dette, og Google, Yahoo og Bing har allerede. Det ville være ideelt å legge til dette på noen linker i bloggkommentarer, slik at de ikke vil påvirke nettstedet ditt, og vil ikke få noen kreditt for sine egne.

Så hva har du tenkt til å gjøre?

Vi har kort dekket et sunt antall mikroformater; men spørsmålet er fortsatt: er de verdt tiden din? Ikke før du begynner å bruke dem! Mikroformater er laget for å gjøre siden skrapende for data lettere, men til de blir mye brukt, vil det ikke være mange verktøy for dem. Selv om mange av disse kan virke meningsløse nå, forhåpentligvis vil de være overalt om noen få år. Når det skjer, vil verktøyene for å gjøre bruk av dem være tilgjengelige. Mikroformater er definitivt verdt tiden din: så lett, så billig, så potensielt kraftig.

Vil du implementere mikroformater i nettstedene dine?

Jeg har skjult en mikroformat i denne opplæringen; kan du finne den?

  • Følg oss på Twitter, eller abonner på Nettuts + RSS-feed for de beste webutviklingsopplæringene på nettet.