Microformats wat, waarom en hoe

Er zijn veel gegevens op internet. Graag, veel. Maar ik vermoed dat de gegevens die het nuttigst zijn voor de massa, zoals informatie over mensen waarmee ze contact moeten opnemen of gebeurtenissen die ze moeten bijwonen, worden opgeslagen in HTML, waar je niet gemakkelijk achter kunt komen. Dus, wie ga je bellen? Microformats probeert de klus aan te nemen!

Wat?

Laten we dit vanaf de top nemen. Wat zijn microformats? Uit de startpagina van microformats.org komt deze definitie:

Eerst ontworpen voor de mens en de tweede machine, microformats zijn een reeks eenvoudige, open gegevensformaten die zijn gebaseerd op bestaande en algemeen aanvaarde normen.

Een goed begin, maar we hebben nog wat meer nodig om te verduidelijken. U kunt een hele lijst met definities vinden op de site, maar hier is de samenvatting: microformats zijn een reeks standaarden voor het insluiten van gemakkelijk extraheerbare gegevens op uw pagina's, met behulp van technologieën waarmee u zich vandaag vertrouwd voelt. Het grote voordeel hiervan is dat u waarschijnlijk inhoud op uw site heeft nu die je kon markeren met een microformat. Nog belangrijker is dat het slechts een paar minuten duurt voordat je deze tutorial hebt gelezen.

Waarom?

Dus waarom zou u microformats gebruiken? Wat is de prikkel? Welnu, als u ervan overtuigd bent dat HTML semantisch zou moeten zijn, alleen omdat, dan zullen microformats met u klikken. Anders zal ik overtuigen: zoals we hebben gemerkt, is het hele idee van microformats om te standaardiseren op die manier gegevens worden gemarkeerd op een pagina, zodat het gemakkelijk kan worden geëxtraheerd. Momenteel zijn er niet heel veel tools die gebruikmaken van microformats, maar ik denk dat dat zal veranderen. Het gebruik van microformats in uw werk zal uw websites voorbereiden op de toekomst, wanneer microformats veel wijdverspreider zullen zijn. Nogmaals, de website bevat een algemene lijst van wat u kunt doen met microformats. Er is al een degelijke Firefox-addon voor het extraheren van microformats; het heet Operator.

Dan, Dan Web heeft een eenvoudige JavaScript-bibliotheek gemaakt met de naam 'Sumo' die microformats voor gebruik met JavaScript extraheert. U kunt ook de bookmarklet microformats proberen.

Hoe?

Nou, als je zo ver bent gekomen, is het duidelijk dat jij en microformats voor elkaar bedoeld waren. Dus laten we meteen naar binnen springen en er naar kijken. Maar voordat we dit doen, is hier de algemene structuur van de microformats die we zullen bekijken: in het algemeen, als ze meer dan één element in onze code betrekken, gebruiken ze klassen. Als ze zich alleen met één element bezighouden, is dit meestal het rel-attribuut dat wordt gebruikt.

hCalendar

hCalendar is een eenvoudige manier om gebeurtenissen te markeren. We beginnen met een element dat ons evenement verklaart:

 

Als je meerdere evenementen hebt, moet je ze in een div.vcalendar stoppen; het is echter niet nodig. Er zijn twee vereiste eigenschappen voor een gebeurtenis: de startdatum (dtstart) en de samenvatting. Laten we deze toevoegen:

 

Dit jaar, onze bedrijfsvakantiediner begint om 2009-12-18T17: 30.

Mens-leesbaar, nietwaar? Niet die datum! Je hebt gelijk; hoewel microformats het eerst voor mensen zijn geschreven, zijn data een gebied waar het belangrijk is dat computers het kunnen lezen. Gebruikelijke conventie zou zijn om de datum te schrijven met een abbr-tag, in welk geval het title-kenmerk de waarde voor de eigenschapswaarde zou zijn:

 17:30 uur op vrijdag 18 december.

Er zijn ook andere, optionele eigenschappen die u kunt toevoegen. Wat dacht je van een eindtijd of een locatie?

 

We ontmoeten elkaar in de vergaderzaal van het Tower Hotel, die we hebben gereserveerd tot 09:30.

Via de operatornetwerkbalk in Firefox kunnen we zien dat dit evenement op onze pagina staat. We kunnen er op verschillende manieren mee werken:

Als ik ervoor kies om het naar Google Agenda te exporteren, draagt ​​het perfect de waarden over die we hebben ingesteld.

Raadpleeg de hCalendar-documentatie voor meer informatie over hCalendar,

hCard

Laten we verder gaan naar hCard; hCard is een stuk gecompliceerder dan hCalendar, maar we zullen niet op alle details ingaan. Als je later meer wilt lezen, bekijk dan de documenten.

Nogmaals, we beginnen met onze root:

 

Voor hCard zijn er slechts twee vereiste eigenschappen; de naam (n) en de opgemaakte naam (fn). Meestal zijn er hetzelfde element.

 

John Doe

Zonder te diep te gaan, zal ik opmerken dat deze indeling impliceert dat 'John' de voornaam is en 'Doe' de achternaam is. Als u dit wilt opgeven, kunt u de klassen voor naam en familie gebruiken:

 John hinde 

Natuurlijk wil je meestal meer toevoegen dan alleen je naam. U kunt een bijnaam, foto, e-mailadres, verjaardag, url, telefoonnummer en adres toevoegen om er maar een paar te noemen.

 

JayDee

  • Huis: (416) 123-4567
  • Werk 416-987-6543

1 januari 1980

Mijn website

123 Main Street

Toronto, Ontario M2W 4R5

Canada

Er zijn een paar dingen om op te merken:

  • Alle klasnamen die ik hier heb gebruikt, zijn de hCard-eigenschappen.
  • Sommige eigenschappen, zoals url en foto, halen hun waarden uit de href- of src-kenmerken en niet de tekst van het element.
  • Eigenschappen zoals tel en e-mail kunnen twee onderliggende eigenschappen hebben: type en waarde. Als alleen het type is gedefinieerd, wordt de waarde geïmpliceerd (zoals u kunt zien in het tweede e-mailadres en telefoonnummer).

Met Operator kan ik dit exporteren als een vcard ...

... en open het in Outlook.

Zien? Alles wat we hebben gedefinieerd is hier!

xFolk

xFolk is een microformat in ontwikkeling voor open sociale bladwijzers. Van de documenten:

Het ontbreken van een open, interoperabele gegevensstandaard is een groot probleem bij het gebruik van sociale bookmarking-services. Een open standaard zou het mogelijk maken om gemakkelijk sociale bookmarkgegevens te verzamelen en te remixen om nieuwe diensten uit te vinden ... Een open standaard zou het ook mogelijk maken om JavaScripts te schrijven die in verschillende diensten werken, zoals sommige momenteel doen voor del.icio.us, waardoor de verbeteringen aan de gebruikerservaring.

Om xFolk te implementeren, moet u elke bladwijzerfolder een klasse 'xfolkentry' geven:

  

Voeg vervolgens de link en een beschrijving in, en geef ze respectievelijk de klassen 'taggedLink' en 'description'.

 Nettuts, de beste blog over webontwikkeling op deze planeet. 

Yup, eenvoudig; Ik kan me voorstellen dat dit nuttig is op een blogrol of in een webronde. Denk aan een tool waarmee u al deze links in één keer kunt markeren.

XFN (XHTML-vriendennetwerk)

XFN is een eenvoudige manier om menselijke relaties te markeren. Met behulp van het rel-kenmerk (wat een afkorting is voor een relatie) op uw links, definieert u uw relatie met de eigenaar van de pagina waarnaar u linkt. Je kunt een relatie hebben met twee partijen: andere mensen of jezelf (nou ja, je andere pagina's). Het is eenvoudig om andere pagina's te definiëren die u bezit:

 My Posterous My Photos Mijn tweets 

Best simpel, toch? rel = "ik" en je bent klaar.

Relaties met andere mensen zijn iets gedetailleerder, maar niet moeilijker: er zijn zes categorieën waaruit je opties kunt kiezen: vriendschap, fysiek, professioneel, geografisch, familie, romantisch. Ik zal ze hier niet allemaal vermelden (een goed idee zou zijn om de maker van de link te proberen), maar hier zijn een paar voorbeelden:

 
  • Goede vriend
  • Lieve vrouw
  • Buurman
  • Co-worker bij Envato

In de eerste koppeling kunt u zien aan de eigenschap rel dat ik de eigenaar heb ontmoet van de pagina waarnaar ik verwijs en dat ik zijn vriend ben. De volgende is mijn (hypothetische) echtgenote, die toevallig mijn echtgenoot en geliefde is, evenals iemand die ik heb ontmoet en die mij inspireert. Ik heb ook de buurman ontmoet, maar hij is alleen een kennis en buurman. Ten slotte, hoewel mijn (weer, hypothetische) mede-werker een vriend is, merk dat ik hem nog nooit heb ontmoet; dit zou worden beschreven als een virtuele relatie. Ik moet erop wijzen dat je XFN niet moet gebruiken wanneer je alleen maar linkt naar een blogpost of iets dergelijks; gebruik het wanneer u rechtstreeks naar een persoon verwijst, dus de naam van de link is de naam en de href gaat naar hun startpagina.

VoteLinks

VoteLinks is een interessant idee: wanneer u naar een artikel, posting, product of wat dan ook linkt, voegt u het rev-kenmerk toe. Rev? Rev is het tegenovergestelde van rel; terwijl rel beschrijft wat de gelinkte pagina is met de huidige pagina (zoals een 'vriend' of een 'stylesheet'), beschrijft rev wat de huidige pagina is voor de gekoppelde pagina. Met VoteLinks kunt u van uw pagina een 'vote-for', 'vote-against' of 'vote-abstain' maken, waar u ook naar linkt. Dus bijvoorbeeld:

 

Bekijk onze geweldige blogpost van Collis op de netsetter

Ik heb vreselijke service gekregen in de Five Seasons Grill vannacht

Wat vind ik van zijn herontwerp van de site?

Hoe is dit nuttig? Stel je voor dat Google (en andere zoekmachines) rekening hielden met VoteLinks bij het weergeven van items. Momenteel is hun systeem (in feite geplaatst) hoe meer links, hoe meer zichtbaarheid op Google. Maar wat als de meeste van die links stemmen tegen het product of de pagina waren? Of wat dacht u van een website die op internet naar VoteLinks crawlt en die u de algemene populariteit van pagina's toont? Het is allemaal erg speculatief, maar het zou interessant kunnen zijn. Het probleem is dat veel mensen VoteLinks moeten gebruiken om effect te hebben.

Geo

Geo is heel eenvoudig; het heeft twee eigenschappen: lengte- en breedtegraad.

 

Appel : (37,33171397409807 -122,03051626682281)

Envato: -37 ° 48 '45.1008 " 144 ° 58 '8.6736 ".

Zoals we eerder hebben gezien, kunt u het abbr-element gebruiken om de werkelijke waarden te maskeren. En natuurlijk herkent de operator deze.

rel-licentie

Als je ooit iets hebt vrijgegeven voor het publiek, weet je dat je er een licentie op moet zetten. U kunt het rel-kenmerk van een koppeling de waarde van 'licentie' geven bij het linken naar de licentiedocumentatie.

 cc door 2.0 

Wat is het punt? Al Yahoo Creative Commons Search en Google Usage Right's Search gebruiken beide het rel = "license" -attribuut in hun algoritmen.

rel-tag

Dit is een interessante, omdat elke blogger zijn berichten tagt. Voor dit microformat voegt u eenvoudig rel = "tag" toe aan uw tag-links en bent u klaar. Nu, met behulp van onze Operator-add-on, kunnen we inhoud zien van andere sites met dezelfde tags. Het is belangrijk op te merken dat de naam van de tag afkomstig is van de href van de link en niet van de tekst van de link. Dus in het volgende voorbeeld ...

 Client-side scripting 

... de tag is 'javascript' en niet 'client-side scripting'.

Nettuts heeft dit microformat geïmplementeerd; maar dat wist je al als je Operator hebt!

rel-nofollow

Een andere eenvoudige maar hopelijk effectieve tag: rel = "nofollow" toevoegen aan een link is ontworpen om te voorkomen dat de link invloed heeft op de rangschikking van uw pagina in zoekmachines. Natuurlijk moet de zoekmachine dit implementeren, en Google, Yahoo en Bing al hebben. Het zou ideaal zijn om dit toe te voegen aan eventuele links in blogcommentaar, zodat ze niet van invloed zijn op uw site en geen krediet krijgen voor hun eigen.

Dus wat ga je doen?

We hebben kort een gezond aantal microformats behandeld; maar de vraag blijft: zijn ze uw tijd waard? Pas als u ze gaat gebruiken! Microformats zijn gemaakt om het schrapen van pagina's voor gegevens gemakkelijker te maken, maar totdat ze op grote schaal worden gebruikt, zullen er niet veel hulpmiddelen voor hen zijn. Hoewel veel hiervan nu misschien zinloos lijken, zullen ze hopelijk over een paar jaar overal zijn. Wanneer dat gebeurt, zijn de hulpmiddelen om hiervan gebruik te maken beschikbaar. Microformats zijn zeker de moeite waard: zo gemakkelijk, zo goedkoop, zo potentieel krachtig.

Gaat u microformats implementeren in uw sites?

Ik heb een microformat verborgen in deze zelfstudie; kan je het vinden?

  • Volg ons op Twitter of abonneer je op de Nettuts + RSS Feed voor de beste tutorials voor webontwikkeling op internet.