Microformate Ce, de ce și cum

Există o mulțime de date pe web. Ca multe. Dar aș ghici că datele cele mai utile pentru mase - cum ar fi informațiile despre persoanele de care au nevoie sau despre care trebuie să participe - sunt stocate în HTML, unde nu puteți ajunge cu ușurință la ele. Deci, cine o să suni? Microformatele încearcă să-și asume locul de muncă!

Ce?

Să luăm asta de sus. Ce sunt microformatele? În afara paginii de pornire a microformats.org vine următoarea definiție:

Concepute mai întâi pentru om și mașini secundare, microformatele reprezintă un set de formate de date simple, deschise pe baza standardelor existente și adoptate pe scară largă.

Un început bun, dar avem nevoie de ceva mai mult pentru a clarifica. Puteți găsi o întreagă listă de definiții pe site, dar iată rezumatul: microformatele reprezintă un set de standarde pentru încorporarea datelor ușor de extras din paginile dvs., folosind tehnologiile pe care le simțiți confortabil astăzi. Partea mare despre acest lucru este că probabil că aveți conținut pe site-ul dvs. chiar acum pe care le puteți marca cu un microformat. Partea chiar mai mare este că vă va lua doar câteva minute după ce ați citit acest tutorial.

De ce?

De ce ar trebui să folosiți microformatele? Care este motivul? Ei bine, dacă sunteți convins că HTML ar trebui să fie semantic doar pentru că, atunci microformatele vor face clic cu tine. În caz contrar, voi convinge: așa cum am observat, întreaga idee a microformatelor este de a standardiza astfel că datele sunt marcate pe o pagină, astfel încât să poată fi ușor extrase. În prezent, nu există o mulțime de instrumente care să profite de microformate, dar cred că se va schimba. Folosirea microformelor în munca dvs. vă va pregăti site-urile web pentru viitor, când microformatele vor fi mult mai răspândite. Din nou, site-ul conține o listă generală a ceea ce puteți face cu microformatele. Există deja un addon Firefox decent pentru extragerea microformelor; se numește Operator.

Atunci, Dan Web a creat o bibliotecă JavaScript simplă numită "Sumo" care extrage microformate pentru utilizare cu JavaScript. Puteți încerca, de asemenea, marcajele microformate.

Cum?

Ei bine, dacă ați ajuns atât de departe, este evident că voi și microformatele ați fost destinate unul pentru celălalt. Deci hai să mergem și să ne uităm la unul. Dar înainte de a face, aici este structura generală a microformatelor pe care le vom analiza: în general, dacă implică mai mult de un element în codul nostru, ele folosesc clase. Dacă se referă numai la un element, este de obicei atributul rel care este folosit.

hCalendar

hCalendar este o modalitate ușoară de a marca evenimentele. Vom începe cu un element care declară evenimentul nostru:

 

Dacă aveți mai multe evenimente, trebuie să le înfășurați într-o div.vcalendar; cu toate acestea, nu este necesar. Există două proprietăți necesare pentru un eveniment: data de începere (dtstart) și rezumatul. Să adăugăm următoarele:

 

În acest an, a noastră cina de vacanță a companiei va începe la 2009-12-18T17: 30.

Ușor de citit, nu? Nu data asta! Ai dreptate; deși microformatele sunt scrise mai întâi pentru oameni, datele sunt o zonă în care este important ca computerele să o poată citi. Convenția convențională ar fi să scrieți data cu o etichetă abbr, caz în care atributul title ar fi valoarea valorii proprietății:

 17:30 vineri, 18 decembrie.

Există și alte proprietăți opționale pe care le puteți adăuga, de asemenea. Ce zici de un moment de sfârșit sau de o locație?

 

Ne vom întâlni în sala de conferințe a Hotelului Tower, pe care am rezervat până acum 09:30.

Utilizând bara de instrumente Operator din Firefox, vedem că acest eveniment se află pe pagina noastră. Putem lucra cu acesta în mai multe moduri:

Dacă aleg să-l exporte în Google Calendar, acesta transferă perfect valorile pe care le-am setat.

Pentru mai multe informații despre hCalendar, consultați documentația hCalendar,

hCard

Să trecem la hCard; hCard este mult mai complicat decât hCalendar, dar nu vom intra în toate detaliile. Dacă doriți să citiți mai multe mai târziu, verificați documentele.

Din nou, începem cu rădăcina noastră:

 

Pentru hCard, există doar două proprietăți necesare; numele (n) și numele formatat (fn). De obicei, există același element.

 

John Doe

Fără să fiu prea adânc, voi remarca faptul că acest format implică faptul că "John" este primul nume, iar "Doe" este numele de familie. Dacă doriți să specificați acest lucru, puteți folosi clasele date și numele de familie:

 Ioan Căprioară 

Desigur, de obicei, veți dori să adăugați mai mult decât numele dvs. Puteți adăuga un pseudonim, o fotografie, o adresă de e-mail, o zi de naștere, o adresă URL, un număr de telefon și o adresă, pentru a numi doar câteva.

 

JayDee

  • Acasă: (416) 123-4567
  • Muncă 416-987-6543

1 ianuarie 1980

Site-ul meu

123 Main Street

Toronto, Ontario M2W 4R5

Canada

Există câteva lucruri de reținut aici:

  • Toate numele de clasă pe care le-am folosit aici sunt proprietățile hCard.
  • Unele proprietăți, cum ar fi url și fotografie, își iau valorile din atributele href sau src și nu textul elementului.
  • Proprietăți precum tel și e-mail pot avea două proprietăți copil: tipul și valoarea. Dacă este definit doar un tip, valoarea va fi implicită (după cum puteți vedea în a doua adresă de e-mail și numărul de telefon).

Folosind Operatorul, pot exporta acest lucru ca o vcard ...

... și deschideți-l în Outlook.

Vedea? Tot ce am definit este aici!

xFolk

xFolk este un microformat în curs de dezvoltare pentru marcaje sociale deschise. Din docs:

Lipsa unui standard deschis de date interoperabile este o problemă majoră în utilizarea serviciilor de marcare socială. Un standard deschis ar permite colectarea cu ușurință a datelor din marcajul social și remixarea acestuia pentru a inventa noi servicii ... Un standard deschis ar permite, de asemenea, scrierea de JavaScript-uri care funcționează în cadrul serviciilor, așa cum o fac în prezent pentru del.icio.us, îmbunătățiri la nivel de bord în experiența utilizatorului.

Pentru a implementa xFolk, începeți prin a da fiecărei wrapper-uri o clasă de 'xfolkentry':

  

Apoi, introduceți link-ul și o descriere, oferindu-le clase de "taggedLink" și, respectiv, "description".

 Nettuts, cel mai bun blog de dezvoltare web de pe planetă. 

Da, simplu; Îmi imaginez că acest lucru este util pe un blog sau într-un blog. Gândiți-vă la un instrument care vă permite să marcați toate aceste linkuri simultan.

XFN (Rețeaua de prieteni XHTML)

XFN este o modalitate simplă de a marca relațiile umane. Folosind atributul rel (care este scurt pentru relație) pe legăturile dvs., definiți relația dvs. cu proprietarul paginii la care vă conectați. Poți avea o relație cu două părți: alți oameni sau tine (bine, celelalte pagini). Este ușor să definiți alte pagini pe care le dețineți:

 Fotografiile mele Posterous My My Tweets 

Destul de simplu, nu? rel = "eu" și ați terminat.

Relațiile cu alte persoane sunt mai detaliate, dar nu mai dificile: există șase categorii pe care le puteți lua opțiuni: prietenie, fizică, profesională, geografică, familie, romantică. Nu le voi lista pe toate (o idee bună ar fi încercarea creatorului de link-uri), dar aici sunt câteva exemple:

 
  • Prieten bun
  • Dragă soție
  • Tipul de lângă ușă
  • Co-lucrător la Envato

În primul link, puteți spune din atributul rel că am întâlnit proprietarul paginii la care mă conectez și că eu sunt prietenul lui. În continuare este soția mea (ipotetică), care se întâmplă să fie soțul meu și iubita mea, precum și pe cineva pe care l-am întâlnit și care mă inspiră. De asemenea, l-am intalnit pe tipul de alaturi, dar el este doar o cunoscuta si un vecin. În cele din urmă, deși prietenul meu (din nou, ipotetic) este un prieten, observați că nu l-am întâlnit niciodată; aceasta ar fi descrisă ca o relație virtuală. Ar trebui să subliniez că nu ar trebui să utilizați XFN atunci când vă conectați doar la un post pe blog sau la fel; utilizați-o atunci când vă referiți direct la o persoană, deci numele este textul linkului și href-ul merge la pagina de pornire.

VoteLinks

VoteLinks este o idee interesantă: atunci când vă conectați la un articol, postați, produs, orice, adăugați atributul rev. Rev? Rev este opusul rel; în timp ce rel descrie ce este pagina legată la pagina curentă (cum ar fi o "prietenă" sau o "foaie de stil"), rev descrie ce este pagina curentă cu cea legată. Cu ajutorul "VoteLinks", poți transforma pagina dvs. într-un "vot pentru vot", "vot împotriva" sau "abținere la vot", indiferent de ce faceți legătura. Deci, de exemplu:

 

Verificați această postare grozavă pe blog de către Collis pe netsetter

Am avut o slujbă groaznică la Five Seasons Grill noaptea trecuta

Ce cred eu despre reproiectarea site-ului?

Cum este util acest lucru? Ei bine, imaginați-vă dacă Google (și alte motoare de căutare) au luat în considerare VoteLinks atunci când afișează elementele. În prezent, sistemul lor (pus foarte practic) este mai multe link-uri, cu atât mai multă vizibilitate pe Google. Dar dacă majoritatea acestor link-uri au fost votate împotriva produsului sau paginii? Sau cum despre un site care accesează cu crawlere site-ul căutând VoteLinks și vă arată popularitatea generală a paginilor? Totul este foarte speculativ, dar ar putea fi interesant. Problema este că o mulțime de oameni trebuie să utilizeze VoteLinks pentru ca ei să aibă vreun efect.

Geo

Geo este foarte simplu; are două proprietăți: latitudine și longitudine.

 

Măr : (37.33171397409807 -122.03051626682281)

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

După cum am văzut mai devreme, puteți utiliza elementul abbr pentru a masca valorile reale. Și, desigur, Operatorul le recunoaște.

rel-licență

Dacă ați lansat vreodată ceva publicului, știți că trebuie să puneți o licență pe acesta. Puteți da atributul rel al unui link valoarea "licenței" atunci când vă conectați la documentația de licență.

 cc de 2.0 

Care-i rostul? Deja Căutarea Google Creative Commons și Căutarea dreptului de utilizare Google utilizează atributul rel = "license" în algoritmii lor.

rel-tag

Acesta este unul interesant, pentru că fiecare blogger etichetează postările. Pentru acest microformat, trebuie doar să adăugați rel = "tag" la link-urile dvs. de tag și să fiți gata. Acum, folosindu-ne add-on-ul operatorului, putem vedea conținut de pe alte site-uri cu aceleași etichete. Este important să rețineți că numele etichetei este luat de la href-ul link-ului, și nu din textul link-ului. Astfel, în exemplul următor ...

 Scripting pe partea de client 

... tag-ul este "javascript" și nu "scripting pe partea clientului".

Nettuts a implementat acest microformat; dar ați știut deja că dacă aveți Operator!

rel-nofollow

O altă etichetă simplă, dar cu speranță eficace: adăugarea linkului rel = "nofollow" la un link este menită să mențină legătura fără a afecta clasamentul paginii dvs. în motoarele de căutare. Desigur, motorul de căutare trebuie să implementeze acest lucru, iar Google, Yahoo și Bing au deja. Ar fi ideal să adăugați acest lucru la orice link-uri din comentariile de pe blog, astfel încât acestea să nu afecteze site-ul dvs., și nu vor primi nici un credit pentru propria lor.

Ce ai de gând să faci?

Am acoperit pe scurt un număr sănătos de microformate; dar întrebarea rămâne: merită timpul tău? Nu până nu începeți să le utilizați! Microformatele sunt făcute pentru a ușura fragmentarea paginilor pentru date, dar până când sunt utilizate pe scară largă, nu vor fi foarte multe instrumente pentru ele. Deși multe dintre acestea pot părea inutile acum, sperăm că vor fi peste tot în câțiva ani. Când se întâmplă acest lucru, vor fi disponibile instrumentele pentru a le folosi. Microformatele merită cu siguranță timpul dvs.: atât de ușor, atât de ieftin, deci potențial puternic.

Veți implementa microformate în site-urile dvs.?

Am ascuns un microformat în acest tutorial; Poti sa o gasesti?

  • Urmați-ne pe Twitter sau abonați la Nettuts + RSS Feed pentru cele mai bune tutoriale de dezvoltare web de pe web.


Cod