Microformati cosa, perché e come

Ci sono molti dati sul web. Mi piace molto. Ma immagino che i dati più utili per le masse, come le informazioni sulle persone che devono contattare o gli eventi a cui hanno bisogno di partecipare, siano archiviati in HTML, dove non puoi facilmente ottenerli. Allora, chi chiamerai? I microformati stanno tentando di assumere il lavoro!

Che cosa?

Prendiamo questo dall'alto. Cosa sono i microformati? Fuori dalla homepage di microformats.org arriva questa definizione:

Progettati prima per gli esseri umani e secondariamente per le macchine, i microformati sono un insieme di semplici formati di dati aperti basati su standard esistenti e ampiamente adottati.

Un buon inizio, ma abbiamo bisogno di un po 'di più per chiarire. Puoi trovare un intero elenco di definizioni sul sito, ma ecco il riassunto: i microformati sono una serie di standard per l'incorporazione di dati facilmente estraibili sulle tue pagine, utilizzando le tecnologie con le quali ti senti a tuo agio oggi. La parte importante di questo è che probabilmente hai contenuto sul tuo sito proprio adesso che potresti contrassegnare con un microformato. La parte ancora più grande è che ci vorrà solo un paio di minuti dopo aver letto questo tutorial.

Perché?

Quindi perché dovresti usare i microformati? Qual è l'incentivo? Bene, se sei convinto che l'HTML dovrebbe essere semantico solo perché, allora i microformati faranno clic con te. Altrimenti, persuaderò: come abbiamo notato, l'idea generale dei microformati è quella di standardizzare in questo modo i dati su una pagina, in modo che possano essere facilmente estratti. Attualmente non ci sono molti strumenti che sfruttano i microformati, ma penso che cambieranno. L'uso di microformati nel tuo lavoro preparerà i tuoi siti web per il futuro, quando i microformati saranno molto più diffusi. Anche in questo caso, il sito Web contiene un elenco generale di ciò che è possibile fare con i microformati. C'è già un decente addon per Firefox per estrarre i microformati; si chiama Operatore.

Poi, Dan Web ha creato una semplice libreria JavaScript chiamata "Sumo" che estrae i microformati per l'uso con JavaScript. Puoi anche provare il bookmarklet dei microformati.

Come?

Bene, se sei arrivato così lontano, è ovvio che tu ei microformati fossero fatti l'uno per l'altro. Quindi saltiamo dentro e guardiamo uno. Ma prima di farlo, ecco la struttura generale dei microformati che guarderemo: in generale, se coinvolgono più di un elemento nel nostro codice, usano le classi. Se riguardano solo un elemento, di solito è l'attributo rel usato.

hCalendar

hCalendar è un modo semplice per contrassegnare gli eventi. Inizieremo con un elemento che dichiara il nostro evento:

 

Se hai più eventi, dovresti raggrupparli in un div.vcalendar; tuttavia, non è necessario. Esistono due proprietà obbligatorie per un evento: la data di inizio (dtstart) e il riepilogo. Aggiungiamo questi:

 

Quest'anno, il nostro cena aziendale inizierà a 2009-12-18T17: 30.

Leggibile dall'uomo, eh? Non quella data! Hai ragione; sebbene i microformati siano scritti per primi, le date sono un settore in cui è importante che i computer possano leggerlo. La convenzione comune sarebbe quella di scrivere la data con un tag abbr, nel qual caso l'attributo title sarebbe il valore per il valore della proprietà:

 17:30 di venerdì 18 dicembre.

Ci sono anche altre proprietà facoltative che puoi aggiungere. Che ne dici di un orario di fine o di un luogo?

 

Ci incontreremo nel sala conferenze del Tower Hotel, che abbiamo riservato fino a 09:30.

Usando la barra degli strumenti di Operator in Firefox, possiamo vedere che questo evento è sulla nostra pagina. Possiamo lavorare con esso in diversi modi:

Se scelgo di esportarlo in Google Calendar, esso mantiene perfettamente i valori che abbiamo impostato.

Per ulteriori informazioni su hCalendar, consulta la documentazione di hCalendar,

hCard

Passiamo alla hCard; hCard è molto più complicato di hCalendar, ma non entreremo in tutti i dettagli. Se vuoi leggere più tardi, controlla i documenti.

Di nuovo, iniziamo con la nostra radice:

 

Per hCard, ci sono solo due proprietà richieste; il nome (n) e il nome formattato (fn). Di solito, ci sono lo stesso elemento.

 

John Doe

Senza andare troppo in profondità, noterò che questo formato implica che "John" è il primo nome e "Doe" è il cognome. Se si desidera specificarlo, è possibile utilizzare le classi nome-nome e nome famiglia:

 John daino 

Ovviamente, di solito vuoi aggiungere altro oltre al tuo nome. È possibile aggiungere un soprannome, una foto, un indirizzo email, un compleanno, un url, un numero di telefono e un indirizzo, solo per citarne alcuni.

 

Jaydee

  • Casa: (416) 123-4567
  • Lavoro 416-987-6543

1 gennaio 1980

Il mio sito web

123 Main Street

Toronto, Ontario M2W 4R5

Canada

Ci sono alcune cose da notare qui:

  • Tutti i nomi delle classi che ho usato qui sono le proprietà hCard.
  • Alcune proprietà, come url e foto, prendono i loro valori dagli attributi href o src e non dal testo dell'elemento.
  • Proprietà come tel ed email possono avere due proprietà figlio: tipo e valore. Se viene definito solo il tipo, il valore sarà implicito (come puoi vedere nel secondo indirizzo email e numero di telefono).

Usando Operator, posso esportarlo come una vcard ...

... e aprilo in Outlook.

Vedere? Tutto ciò che abbiamo definito è qui!

xFolk

xFolk è un microformato in sviluppo per i social bookmark aperti. Dai documenti:

La mancanza di uno standard di dati aperto e interoperabile è un problema fondamentale nell'utilizzo dei servizi di social bookmarking. Uno standard aperto renderebbe possibile raccogliere facilmente i dati dei segnalibri sociali e remixarli per inventare nuovi servizi ... Uno standard aperto renderebbe anche possibile scrivere JavaScript che funzionano su tutti i servizi come alcuni attualmente fanno per del.icio.us, abilitando in modo trasversale miglioramenti della scheda nell'esperienza utente.

Per implementare xFolk, inizia dando a ogni wrapper di segnalibri una classe di 'xfolkentry':

  

Quindi, inserisci il link e una descrizione, assegnando loro rispettivamente le classi 'taggedLink' e 'description'.

 Nettuts, il miglior blog di sviluppo web del pianeta. 

Sì, semplice; Posso immaginare che ciò sia utile su un blog roll o in un rastrellamento web. Pensa a uno strumento che ti consente di aggiungere tutti questi link contemporaneamente.

XFN (Rete di amici XHTML)

XFN è un modo semplice per marcare le relazioni umane. Utilizzando l'attributo rel (che è l'abbreviazione di relazione) sui tuoi link, definisci la tua relazione con il proprietario della pagina a cui stai collegando. Puoi avere una relazione con due parti: altre persone o te stesso (beh, le tue altre pagine). È facile definire le altre pagine che possiedi:

 My Posterous My Photos I miei tweet 

Piuttosto semplice, eh? rel = "me" e il gioco è fatto.

Le relazioni con altre persone sono un po 'più dettagliate, ma non più difficili: ci sono sei categorie da cui puoi scegliere: amicizia, fisico, professionale, geografica, familiare, romantica. Non li elenco tutti qui (una buona idea sarebbe quella di provare il creatore di link), ma qui ci sono alcuni esempi:

 
  • Buon amico
  • Cara moglie
  • Ragazzo della porta accanto
  • Collaboratore di Envato

Nel primo link, puoi dire dall'attributo rel che ho incontrato il proprietario della pagina a cui sto collegando e che sono suo amico. La prossima è la mia (ipotetica) moglie, che sembra essere mia moglie e dolcezza, così come qualcuno che ho incontrato e che mi ispira. Ho anche incontrato il ragazzo della porta accanto, ma è solo un conoscente e un vicino. Infine, sebbene il mio collega (ancora ipotetico) sia un amico, nota che non l'ho mai incontrato; questo sarebbe descritto come una relazione virtuale. Vorrei sottolineare che non si dovrebbe usare XFN quando si collega solo a un post di blog o simili; usalo quando ti stai riferendo direttamente a una persona, quindi il nome è il testo del link e l'href va alla loro home page.

VoteLinks

VoteLinks è un'idea interessante: quando ti colleghi a un articolo, a un post, a un prodotto, a qualcosa, aggiungi l'attributo rev. Rev? Rev è l'opposto di rel; mentre rel descrive cos'è la pagina collegata alla pagina corrente (come un 'amico' o un 'foglio di stile'), rev descrive quale sia la pagina corrente rispetto a quella collegata. Con VoteLinks, puoi rendere la tua pagina un 'voto-per', 'votare-contro' o 'votare-astenersi' qualunque cosa tu stia collegando. Quindi, ad esempio:

 

Controlla il nostro bellissimo post sul blog di Collis sul net-set

Ho ricevuto un servizio terribile al Five Seasons Grill la scorsa notte

Cosa penso della sua riprogettazione del sito?

Come è utile? Bene, immagina se Google (e altri motori di ricerca) ha preso in considerazione VoteLinks durante la visualizzazione degli oggetti. Attualmente, il loro sistema (in pratica molto) è più link, più visibilità su Google. Ma cosa succede se la maggior parte di questi link erano voti contrari al prodotto o alla pagina? O che ne dici di un sito che esegue la scansione del Web alla ricerca di VoteLinks e ti mostra la popolarità generale delle pagine? È tutto molto speculativo, ma potrebbe essere interessante. Il problema è che molte persone devono usare VoteLinks per fare in modo che abbiano effetto.

Geo

Geo è molto semplice; ha due proprietà: latitudine e longitudine.

 

Mela : (37,33171397409807 -122,03051626682281)

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

Come abbiamo visto prima, puoi usare l'elemento abbr per mascherare i valori reali. E, naturalmente, Operator riconosce questi.

rel-licenza

Se hai mai rilasciato qualcosa al pubblico, sai che devi metterti una licenza. È possibile attribuire all'attributo rel di un collegamento il valore di "licenza" quando si collega alla documentazione della licenza.

 cc per 2.0 

Qual e il punto? Già la ricerca Creative Commons di Yahoo e la ricerca di Google Usage Right utilizzano entrambi l'attributo rel = "license" nei loro algoritmi.

rel-tag

Questo è interessante perché ogni blogger etichetta i loro post. Per questo microformato, è sufficiente aggiungere rel = "tag" ai collegamenti dei tag ed essere fatto. Ora, utilizzando il nostro add-on Operator, possiamo vedere il contenuto di altri siti con gli stessi tag. È importante notare che il nome del tag è preso dall'href del link e non dal testo del link. Quindi nel seguente esempio ...

 Scripting lato client 

... il tag è 'javascript' e non 'scripting lato client'.

Nettuts ha implementato questo microformato; ma tu lo sapevi già se hai Operatore!

rel-nofollow

Un altro tag semplice ma auspicabilmente efficace: l'aggiunta di rel = "nofollow" a un collegamento è progettata per impedire al link di influire sul ranking della pagina nei motori di ricerca. Certo, il motore di ricerca deve implementare questo e Google, Yahoo e Bing hanno già. Sarebbe ideale aggiungere questo link a qualsiasi link nei commenti del blog, in modo che non influenzino il tuo sito e non ottengano alcun credito per i propri.

Quindi, cosa hai intenzione di fare?

Abbiamo brevemente trattato un numero sano di microformati; ma la domanda rimane: ne vale la pena? Non fino a quando non inizi a usarli! I microformati sono fatti per rendere più facile la raschiatura delle pagine per i dati, ma finché non vengono ampiamente utilizzati, non ci saranno molti strumenti per loro. Anche se molti di questi possono sembrare inutili ora, si spera che saranno ovunque in pochi anni. Quando ciò accadrà, saranno disponibili gli strumenti per farne uso. I microformati valgono sicuramente il tuo tempo: così facile, così economico, così potenzialmente potente.

Implementerai i microformati nei tuoi siti?

Ho nascosto un microformato in questo tutorial; Puoi trovarlo?

  • Seguici su Twitter o iscriviti al feed Nettuts + RSS per i migliori tutorial di sviluppo web sul web.