Esta é minha lista de artigos com a tag "rel"

A Wikipedia e o rel-nofollow

Por: Henrique Costa PereiraWednesday 24 January 2007 às 15:24

Recentemente a liderança da Wikipedia (en.wikipedia.org) adotou o atributo rel=”nofollow” em todos os links externos, que apontam para fora da wikipedia, para conter o interesse de spammers que querem apenas fazer campanha SEO por lá. E isso está dando o que falar lá fora. Essa medida havia sido tomada anteriormente, depois voltaram atrás e agora novamente o rel=”nofollow” está presente nos links externos.

Me parece que cada versão de cada idioma da Wikipedia tem o controle sobre esta implementação, por isso não sei ao certo se esta medida engloba todas as versões da Wikipedia em todos os idiomas. Dei uma olhada em alguns artigos na versão em português e parece que a implementação do rel-nofollow está ativa.

que busquem outro Na minha opinião essa é uma forma de melhorar a credibilidade do conteúdo, sabendo que o interesse exclusivo de escrever textos com propósitos de subir no hanking, não mais existirá. Ou seja, os spammersplayground! É ingenuidade acreditar que interesses assim serão apenas uma “pontinha” em um mar de pessoas realmente interessadas em inserir conteúdo realmente útil. Um mundo perfeito sem spammers é impossível de existir, e acredito que todos os espaços públicos na web onde os próprios usuários podem escrever o conteúdo que quiserem, deveria utilizar o nofollow. Sendo assim, muito do lixo que aparece nos mecanismos de busca não estaria lá, pelo menos não com uma relevância vinda de “locais públicos”. Isso significa que eles vão desaparecer? Com certeza não, mas são ferramentas a menos que eles terão nas mãos.

A "usabilidade" de informar ao usuário que um link é externo ao seu site

Por: Henrique Costa PereiraTuesday 31 October 2006 às 13:31

Não, esta não é mais uma discussão se um link externo ao seu site deve ou não abrir em outra janela. Eu já discuti este assunto aqui. Eu já escrevi sobre as razões pelas quais o atributo target foi retirado das especificações de documentos strict da W3C e também já escrevi que se você realmente quer forçar os links externos no seu site a abrirem em outra janela, você deve utilizar JavaScript e não o atributo target. No final, minha opinião é que você não deve forçar um link ser aberto em outra janela se ele for externo ao seu site. Eu acredito que esta tem que ser uma decisão do usuário e não do site.

Estas coisas tratam de comportamento, mas existe uma outra discussão sobre a usabilidade envolvendo links externos. Navegando no meu site rapidamente você consegue perceber que há vários links distribuídos em vários artigos. Você sabe quais deles linkam para outros textos dentro do meu site e quais não? Eu espero que saiba. Porque já faz um bom tempo que eu utilizo uma pequena imagem expernal no formato de seta nos links que são externos ao meu site.

Blogs são repositórios de textos e links. A maioria dos blogs (como o meu) insere vários links para vários lugares diferentes incluindo trechos e páginas do próprio site. Indicar para o usuário quais links apontam para o seu próprio site e quais são externos é uma forma interessante de organizar a informação e de deixar claro para o usuário quando um link está relacionado diretamente com o site (interno) em que o usuário está atualmente e qual não faz parte daquele “sítio” (externo). Simples assim. Há uma solução em CSS bem simples que faz isso.

CSS e o atributo rel faz isso por você

O atributo rel como eu já escrevi anteriormente, indica qual a relação entre o seu site e o site/página que você está linkando. Ele pode possuir o valor que você quiser. No meu site, os links que são externos, eu insiro o atributo rel com o valor de “external” da seguinte maneira:


<a href="http://www.site_externo_ao_meu.com.br" rel="external">
   Isto é um link
</a>

E no meu CSS eu coloco uma regra mais ou menos assim:


* [rel~=external] {
	background:url("external.gif") right 2px no-repeat;
	padding-right:13px;
}

Esta regra funciona da seguinte maneira. Eu utilizo um seletor universal (*) seguido de um seletor de atributo cujo valor dele seja igual ou possua (~=) a palavra “external”. Dessa maneira eu consigo por CSS alterar a aparência de todos os hyperlinks que possuem o atributo rel com valor igual a “external”. Lá eu declaro uma imagem de background com a minha setinha que indica para um usuário que aquele link é externo ao meu próprio site. Funciona em todos os browsers modernos que interpretam CSS 2, incluindo o Internet Explorer 7. Alguém discorda?

Comentários: 31

Tags: CSS Usabilidade rel target blank

Folksonomia e a maneira com que nós colocamos ordem nas coisas

Por: Henrique Costa PereiraWednesday 1 March 2006 às 14:1

A maneira com que as coisas na web estão relacionadas uma com as outras estão em constantes mudanças. E uma das coisas que eu acho mais interessante é a maneira com que a informação é organizada e tratada. As informações que circulam na web todo dia, são avaliadas (ratings) por diversos tipos de mecanismos (user agents), e dessas avaliações, são criadas relações de relevância entre todas as informações encontradas. Quando você faz uma busca em algum destes mecanismos, o que eles fazem nada mais é do que te retornar o resultado de algo que já foi avaliado, analisado e relacionado em ratings, hankings, naturalmente tudo pré-determinado por algum algoritmo que relacionou estas informações contidas nas páginas de diferentes sites, uma com as outras.

Estes são exemplos clássicos e bem básicos de como a informação que nós publicamos na web é tratada. Os critérios dessas avaliações podem ser vários, mas no geral, sites que seguem os web standards tendem a ter uma relevância muito maior. Dentre várias formas de se tratar a informação, existe uma que ficou muito conhecida no mundo dos blogs e que a cada dia tem expandido seus horizontes, que é a folksonomia.

Antes disso, a taxonomia

Taxonomia (taxonomy) é o estudo da classificação das coisas. É o ato de dar nomes, classificar, identificar. Taxonomia é assunto de diversas áreas do conhecimento humano como a computação, antropologia, biologia dentre outras. Quando um cientista classifica um novo inseto, ele procura classificá-lo dentro de uma categoria já existente, baseado em uma lógica estabelecida, verifica qual família ele pertence e no fim encontra o nome mais adequado àquela espécie. Isso é taxonomia. O ato de classificar as coisas.

Agora, folksonomia

Folksonomia (folksonomy) é a junção de duas palavras “folk” (povo, gente) e “taxonomia”. A origem desta palavra é atribuida a um arquiteto da informação chamado Thomas Vander Wal também atual membro do Web Standards Project. O resultado final é algo do tipo “classificação do povo”. Mas não associe isso com a classificação de pessoas em si, e sim com classificação feita por pessoas.

Folksonomia é uma forma relacional (criar relações entre coisas) de categorizar e classificar na web. Ao invéz de utilizar uma forma hierárquica e centralizada de categorização de alguma coisa, o usuário escolhe palavras-chaves (conhecidas como “tags”) para classificar a informação ou partes de informação. Tag em inglês significa “etiqueta”, “identificação”. “Taggear” é identificar, etiquetar alguma coisa. Não confunda o termo tag abordado aqui com as tags de HTML, eles são dois processos distintos de classificar (dar significado?) as coisas.

Classificando

Diversas aplicações web, comumente aquelas que estão relacionadas a ferramentas sociais e colaborativas, utilizam esta forma de classificação (folksonomia) que é entregue na mão do “povo”, ou seja, dos usuários e dos autores. Classificar suas fotos e compartilhar com amigos no Flickr taggeando cada foto que você insere no seu album, bookmarks sociais no Del.icio.us onde você insere várias keywords (palavras-chaves) para classificar seus bookmarks, ferramentas de blogs como o WordPress onde os autores classificam suas entradas ou artigos em várias “tags” (categorias) ao mesmo tempo, mecanismos de busca especializados em blogs como o Technorati, que fazem buscas relacionadas com as tags que você insere no seu site, editor de texto online como o Writely, que permite você taggear todos seus documentos de texto e, mesmo que nem todos estejam compartilhados, facilita a maneira com que você pode encontrar os documentos que estão relacionados com palavras-chave específicas. São muitas as aplicações que podem utilizar este tipo de classificação conhecida como folksonomia.

Taggear é classificar

O resultado disso no mundo é uma enciclopédia de meta-informação visual gerada pelos usuários. A lógica é a seguinte, quando escrevemos, postamos imagens no Flickr ou taggeamos qualquer coisa na web, nós estamos relacionando um objeto a uma ou mais “tags” (palavras-chave) classificando este objeto. Ou seja, o que fazemos é relacionar determinada informação, como uma página web (Del.icio.us), uma foto (Flickr), um post (blogs) com um determinado conjunto de palavras-chaves. Isso é gerar meta-informação on the fly.

Como assim avaliar?

“Rating” em inglês, significa “avaliar”. Avaliar alguma coisa é fazer apreciação, analisar. Quando você taggeia um artigo no seu blog você está associando um conjunto de tags com o conteúdo, ou seja, você está criando um tipo de “rating” (avaliação) sobre aquele objeto. Você classificou determinado artigo por exemplo, em um conjunto de palavras-chaves. Quando o Google ou o Technorati (e centenas de outros mecanismos de busca) encontram o seu site, eles podem tratar a meta-informação que recebem de várias maneiras. Uma delas é verificar a relação das palavras-chaves que você inseriu com o próprio conteúdo taggeado e confirmar a relevância existente.

Se por exemplo você insere palavras a esmo, sem relação nenhuma com o conteúdo, e acha que isso pode ajudar a aumentar a relevância do seu site, os resultados podem ser desatrosos como o caso do site da BMW na Alemanha que teve o site retirado dos resultados das buscas do Google por utilizar de técnicas deste tipo. Só o conteúdo realmente relevante e devidamente codificado e taggeado terá grande valor no final. Mas lembre-se, que folksonomia bem aplicada é apenas um único aspecto de um conjunto de vários outros fatores que podem otimizar seu site nos mecanismos de busca.

Folksonomia e semântica web

Toda informação que está diretamente relacionada com outra informação, que em outras palavras serve para descevê-la, é meta-informação. As tags também são um tipo de meta-informação visível que dá significado de um conteúdo para usuários e máquinas ao mesmo tempo. Quanto mais informação existir sobre a própria informação mais os mecanismos de busca serão cada dia mais precisos. E eles dependem intimamente disso para existir. Todo desenvolvedor web que migrou do jeito antigo de estruturar sites em tabelas para seguir os padrões sabe o que um código semântico é capaz de mudar o posicionamento de um site no Google. Na minha opinião, folksonomia aplicada consistentemente é um aspecto muito importante nessa otimização (SEO).

Como taggear

A forma mais correta de taggear é através da especificação microformats Rel tag, que eu escrevi recentemente aqui no Revolução. Leia o texto para mais detalhes. Através do atributo rel você informa que determinado hyperlink trata-se do endereço de uma tag no seu site. Se você observar na lateral do Revolução Etc, vai encontrar uma sessão chamada “tag” onde se encontra a relação de todas as tags que eu utilizo no meu site. E no final de cada artigo que eu escrevo você encontra a relação de tags que foram utilizadas para taggear (classificar) aquele artigo. Se clicar em uma delas, você vai para uma página onde estará relacionado todos os artigos escritos que foram relacionados com aquela palavra-chave específica. Simples assim. Isso é taggear.

Pode dar uma olhada com mais detalhes na página do Technorati que te ensina com detalhes como implementar folksonomia no seu site e se quiser algo em português eu já escrevi sobre isso por aqui.

Flying higher

Comentários: 26

Tags: Blog Flickr Folksonomia Microformats SEO Semântica Web Tag Taxonomia Technorati User Agent Web Standards WordPress Writely del.icio.us folksonomy hyperlinks metadata rel relTag tags web

Microformats: os atributos rel e rev

Por: Henrique Costa PereiraFriday 17 February 2006 às 20:17

Além de dar continuidade na série de artigos sobre hyperlinks, este texto também trata sobre as especificações microformats que utilizam estes atributos como parte de sua especificação. Apesar destes atributos estarem presentes nas documentações da W3C do HTML desde meados da década de 90, só agora eles estão sendo amplamente utilizados com o advento das especificações microformats. Vamos ver todas estas especificações aqui uma a uma.

O atributo Rel: qual é a relação?

O atributo rel (”rel vem da palavra “relationship” ou “relação”, “relacionamento” em português) pode ser aplicado aos elementos e para informar a relação que a URL que você está linkando tem em relação com a página onde o link está. Por exemplo, se eu posto um link aqui no meu site para o site do Flávio Japs eu poderia usar o atributo rel da seguinte forma:

<a rel="friend co-worker" title="Visite o site do Japs"
href="http://www.japs.etc.br/">Japs </a>

Isto pode ser lido da seguinte maneira: O site Japs é um amigo (friend) e trabalha junto comigo (co-worker). Ou seja, links são pessoas. Principalmente no mundo dos blogs. O atributo rel te permite informar a relação que você (www.seusite.com.br) tem com os links que você posta diariamente no seu site.

Veja outro exemplo do atributo rel aplicado na tag link:

<link title="RevolucaoEtc - Todos os Posts"
type="application/rss+xml" rel="alternate" />

Isto pode ser lido da seguinte maneira: o link para os feeds do meu site (http://feeds.feedburner.com/Revolucao) é um conteúdo alternativo (rel=”alternate”) para o meu próprio site (www.revolucao.etc.br) que é onde o link se encontra. Esta é a função deste atributo criado pela W3C desde meados da década de 90. Fornecer informação e meta-informação de relação entre uma fonte (URL) e outra na web, ou entre um documento (.html) e outro.

O atributo Rev: qual a relação reversa?

Agora que você entendeu o atributo rel, entender o atributo rev e a diferença entre eles é mais fácil. Acima eu exibi a relação que o meu site tem com o meu endereço de feeds (alternate). Agora dentro do meu arquivo de feed, eu poderia colocar um link para o meu site e inserir o atributo rev da seguinte maneira:

<a rev="alternate"
href="http://www.revolucao.etc.br/wp-admin/www.revolucao.etc.br">
Revolução etc
</a>

Ou seja rev (da palavra “reverse” que significa, “inverso” ou “ao contrário”) informa a relação contrária que uma fonte (URL) tem com outra. Se você ainda está com uma pulga atrás da orelha, vamos dar uma olhada nas especificações microformats uma a uma para entender melhor como isso funciona.

Rel Tag

Ao adicionar o atributo rel com o valor de tag (rel=”tag”) em um hyperlink, você está indicando aos user agents que o destino daquele link refere-se ao que chamamos de “tag” (ou “categoria”) de um site. Quando você escreve um artigo no seu site e o classifica em uma ou mais de uma categoria, espera-se que o usuário possa acessar uma listagem de artigos relacionados com aquela categoria específica. Ou seja, o destino deste hyperlink deve existir como uma página e que funcione como um filtro que relacione apenas os textos relacionados com aquela categoria específica. Veja um exemplo:

<a rel="tag" title="Technorat"
href="http://www.revolucao.etc.br/archives/category/technorat/">
Technorat
</a>

A aplicação desta especificação rel-tag está muito relacionada com blogs mas não limitando-se a ela. O maior exemplo prático disso você encontra no Technorati, o maior mecanismo de busca relacionado a blogs. Lá você faz uma busca selecionando uma tag que busca em milhares de sites espalhados pelo mundo e que compartilham da mesma palavra chave (tag). O Technorati é o maior incentivador desta especificação e até ensina os usuários a taggear corretamente.

As tags (ou categorias como preferir) são tipos de de meta-informação visíveis, ou seja, através de uma listagem de tags em um site, você consegue acessar informações muito mais facilmente relacionada com uma palavra-chave, como na lateral do meu site. No site microformats você pode ver diversas implementações que podem servir como sugestões pra você.

XHTML Friends Network (XFN)

A W3C especificou um atributo para ser inserido na tag HEAD chamado “profile” ou “Meta data profiles”. A função deste atributo é especificar a localição de um perfil de meta-informação onde usar agents podem utilizar estes perfis profile reconhecendo uma identidade comum e executar algum tipo de atividade baseado nas convenções daquele perfil. Por exemplo, os mecanismos de busca podem fornecer uma interface de busca que utilize um catálogo de documentos HTML onde todos estes documentos utilizem o mesmo perfil de entrada. Um exemplo prático disso é o buscador Rubhub que faz suas buscas baseadas na relação que um site tem com outro utilizando o perfil do XFN.

O XHTML Friends Network é um profile criado para representar relacionamentos entre sites através de hyperlinks onde você informa a relação que você tem com os sites que você linka no seu blog, apenas utilizando o atributo “rel” nos seus hyperlinks. Vamos ver como isso funciona.
Primeiro você insere o atributo profile com o valor apontando para a página de profiles do XFN da seguinte maneira:


<head profile="http://gmpg.org/xfn/11">

Nesta página linkada, se encontra o perfil de meta-informação de relacionamentos (XFN 1.1 relationships meta data profile) que você pode utilizar. Lá cada item está explicado um a um. A aplicação destes perfis é como no exemplo que eu dei logo acima. Veja novamente:

<a rel="friend co-worker" title="Visite o site do Japs"
href="http://www.japs.etc.br/">Japs</a>

Como eu mostrei no exemplo acima, eu indiquei através do atributo “rel” que o Flávio Japs é meu amigo (friend) e trabalha junto comigo (co-worker) conforme especificado no perfil que eu referênciei na tag head do meu site através do atributo profile.

O Technorati, WordPress, Feedster são alguns exemplos de sistemas que já adotam amplamente o XFN.

Rel-license

Rel-license nada mais é do que um padrão para indicar conteúdo relacionado a licença. Adicionando rel=”license” a um hyperlink você estará indicando que o destino do hyperlink se refere a licença da página atual. Veja um exemplo que você pode encontrar no meu site:

 <a title="Creative Commons License" rel="license"
href="http://creativecommons.org/licenses/by-nc-sa/2.0/br/">
Creative Commons License
</a>

Declarando desta maneira eu estou indicando que o meu site está sob a licença da Creative Commons License. Para vocês terem uma idéia da implementação disto, o Yahoo e o Google possuem em seus mecanismos de buscas formas específicas de encontrar conteúdo baseado na licença de uso.

Rel-nofollow

A especificação Rel-nofollow inserida em hyperlinks através do atributo rel (rel=”nofollow”) indica que o destino do hyperlink não deve ser seguido por nenhum tipo de user agent automatizado, como os mecanismos de busca por exemplo. Para você ter uma idéia prática sobre esta especificação, sabe aqueles comentários nos blogs de pessoas que só querem divulgar seus sites para aumentar o hanking deles no Google espalhando, da forma mais viral possível, links em todos os sites que permite comentários? O Google estimula o uso de rel=”nofollow” em todos os links de comentários nos sites como uma forma de combater os comentários de spammers. Veja um exemplo:

<a rel="nofollow" xhref="http://www.example.com/">Exemplo</a>

O Google estimula o uso de rel=”nofollow” em qualquer lugar em que os usuários podem inserir por si próprios comentários e hyperlinks, como nas áreas de comentários de qualquer site. São várias as ferramentas de blogs que já trazem esta especificação por padrão, como o Blogger, WordPress e Flickr. No WordPress, bem como no meu site, por exemplo, todos os links dos sites das pessoas que comentam aqui, trazem por padrão o atributo rel=”nofollow” toda vez que você preenche o campo “site” para inserir algum comentário, ou seja, o Google não considera os links inseridos aqui e eles não são links válidos para aumentar o hanking de ninguém.

Vote Links

Sistemas de indexação geralmente tratam os hyperlinks como um tipo de “apoio” que se oferece ao destino do próprio hyperlink, ou seja, uma forma de expressar aprovação, suporte, admiração etc. Quantos de nós não fica feliz a cada vez que o nosso site é linkado espontaneamente em outro site como uma referência? Isto também em certos aspectos é sinal de prestígio. Uma das razões práticas que justifica esse prestígio é que a cada vez que o seu site é linkado, o seu hanking na web aumenta, por que naturalmente se consideranda que quanto mais links o seu site possui espalhado pelo mundo, mais relevante ele é em relação aqueles que possuem menos links. Este é um princípio básico de SEO. Agora e quando queremos demonstrar o sentimento oposto de desaprovação a uma referência na web? Qual seria a solução?

A especificação microformat vote-links propõe três novos valores para ser inserido no atributo rel. Eles são vote-for (voto a favor), vote-abstain (abster do voto) ou vote-against (voto contra) que significam respectivamente concordância, abstenção ou indiferença e desacordo.

Um hyperlink qualquer inserido no seu site que não utilize nenhum destes valores através do atributo “rel” julga-se implicitamente que o fato de estar linkando para um determinado endereço, sua relação seja de apoio, suporte e aprovação conforme eu descrevi acima a relação que os hyperlinks naturalmente suportam. Com exceção do rel=”nofollow” que na prática funciona como um rel=”vote-against”, ou seja, não se declara à favor e nem contra.
De modo geral as possibilidades de aplicação desta especificação microformat é enorme. Você pode criar user agents específicos que avaliam índices de aprovaçao ou desaprovação nos sites, gerar estatísticas e medir a populaidade sobre determinado assunto simplesmente implementando a especificação vote-links.

O Paolo Massa chegou até a criar uma extensão para o Firefox chamada SemanticLinks que mostra de uma forma visual através de ícones certas meta-informações inseridas nos links, como vote-links, rel-nofolow etc.

Referências:

Comentários: 18

Tags: Google Microformats SEO Semântica Web Tag Technorati User Agent W3C Web Standards WordPress XFN XHTML hyperlinks rel rel-nofollow relLicense relTag rev vote-links

Microformats

Por: Henrique Costa PereiraThursday 8 December 2005 às 21:8

Introducao

O assunto é Microformats. E cada dia que passa me admiro mais com as possibilidades semânticas dessas especificações que são um tipo de design pattern.

Microformats é uma palavra que praticamente ainda não chegou aqui. Com exceção de uma citação ou outra nada se discutiu ainda no Brasil. Neste artigo eu vou tentar falar sobre isso que também é relativamente novo para mim. Após escrever e estudar melhor sobre o assunto e publicar alguns textos, resolvi voltar aqui e fazer algumas alterações neste artigo que serve como introdução sobre o assunto. O texto ficou mais modular e melhor subdividido, podendo ter partes específicas citadas em outros lugares para fazer referência a conceitos específicos. Se você não compreender alguma coisa e quiser dar alguma sugestão ou comentar alguma coisa, utilize o formulário abaixo e deixe seus comentários.

Bom, antes que você questione sobre a relevância deste assunto, principalmente depois que eu disse que essa palavra nem chegou aqui, Microformats é uma especificação criada por Tantek Çelik, chefe de tecnologia do Technorati, membro do Web Standards Project e especialista da W3C Cascading Style Sheet. O mesmo cara que criou o infame Box Model Hack. Outro cara é o Eric Meyer que dispensa maiores apresentações. São eles que estão falando sobre isso lá fora. Algumas pessoas me escreveram perguntando sobre as últimas coisas que estavam vendo nos meus feeds e que fazem parte da integração dos feeds do Revolução Etc com o meu del.icio.us. Este texto é a explicação de muitas coisas que foram parar lá. Se você quiser ver mais textos sobre isso, assine meu feed principal que praticamente todos os dias eu tenho inserido novos artigos que vão complementar e muito meus textos escritos aqui.

Antes ainda de falar mais sobre o que é Microformats quero citar uma repercussão específica que me chamou a atenção e deixar aqui como uma fonte de referência para pesquisa. O assunto esteve presente este ano no Web Essencial 05, um congresso de desenvolvedores web que aconteceu em Sydney na Austrália. O próprio Tantek estava lá para falar sobre o assunto. Você pode conferir quase tudo o que eles falaram lá na programação do site lendo e ouvindo os podcastings. Agora vamos ao que interessa.

Indice:

O que é Microformats?

Microformats é uma série de especificações que tem como foco principal relacionar a informação ou os dados com os humanos em primeiro lugar e em segundo com as máquinas. É uma nova maneira de se pensar sobre dados. Esta série de especificações constitui um “dicionário” de conteúdo semântico para (X)HTML que tem como base os web standards e é escrito para descrever a informação de forma mais simples possível. O que significa descrever a informação?

A função destas especificações é enriquecer a informação inserida em páginas web com meta informação. “Meta” é uma palavra de origem grega que significa “além de” (beyond) e é usada geralmente como prefixo em palavras que indicam conceitos que explicam ou falam de outros conceitos. Esta é a função das meta tags, fornecer informações que estão além daquilo que é visto em um primeiro momento, ou seja, o próprio conteúdo. Mas microformats se refere a descrever trechos de conteúdos específicos de um site, como datas de eventos, informações de contato, descrição de links etc, coisas que estão além do escopo das meta tags. Ou seja, tratando "Pequenos formatos" (micro + format) de dados (informação) válidos no código do seu XHTML é possível enriquecer a maneira com que nós lidamos com a informação e a maneira com que as máquinas armazenam, indexam e organizam toda essa meta-informação. A função dessas especificações é fornecer o máximo de meta-informação sobre o conteúdo que você insere, ou seja, descrevendo os seus próprios dados.

Porque Microformats?

Pense na quantidade de informação que existe hoje circulando na web. Pense nos seus e-mails, nos comentários em blogs, nos artigos, nas fotos, versões de arquivos, textos, documentos, arquivos de áudio e vídeo, feeds etc. É preciso padrões para organizar toda essa informação com precisão. Os search engines ou spiders possuem um algoritmo onde sua principal função é verificar o que é mais relevante, criando relações entre as informações obtidas sobre cada documento da web e que por sua vez geram ratings, hankings etc, baseando-se nestas inter-relações. Parte desse critério de avaliação é relacionar a meta informação com a própria informação. Quando você digita uma palavra no Google, ele vai retornar uma lista do que é mais relevante relacionado com a palavra que você digitou. Básico não é? As tags do HTML/XHTML são relativamente muito limitadas para descrever a informação que nós inserimos na web. Microformats tenta suprir esta lacuna estendendo para um outro nível as possibilidades de descrever esta informação.

Qual o ambiente propício para Microformats ou como eu posso aplicar isto?

Para aplicar Microformats é preciso aprender antes de mais nada a utilizar um código semanticamente correto. A primeira descrição de dados começa usando as tags certas com o objetivo pelo qual elas foram criadas. Eu já escrevi aqui alguns artigos sobre como definir isso, qual a melhor maneira de exibir dados tabulares, listas, headings etc. Com um código bem formatado, com tags sendo usadas corretamente, está lançado o ambiente perfeito para você aplicar microformats em trechos específico de códigos para resolver questões específicas. Uma característica de Microformats possui, é o conceito de modularidade. Microformats não é uma linguagem nova, são formatos de descrição de dados que podem ser aplicados em trechos específicos do seu código, sem precisar refazer nada. Se você tem um site e o seu código é semanticamente correto, basta você implementar e tratar estes trechos específicos sem precisar de alterações estruturais. O manifesto Microformat é o seguinte:

Criado para resolver problemas específicos.
Ser o mais simples possível
Criado primeiro para humanos e máquinas em segundo lugar
Reutilizar blocos de código quanto necessário utilizados dentro dos padrões web.
Alicação em blocos e trechos específicos (modularidade)

Semântica é significado

Como eu escrevi aqui anteriormente que semântica é o estudo do significado das palavras e sua relação uma com as outras. Não estou me referindo aqui a semântica de SGML da qual o XHTML é um dos derivados. É um assunto muito distante do escopo deste texto. Estou falando de semântica de XHTML e nada mais. Neste sentido estrito, um código semântico nada mais é do que utilizar as tags no sentido real pelo qual elas foram criadas. Se você vai escrever uma lista, você pode usar <ol> <ul> ou <dl>, se vai escrever um endereço você deve usar <adderess>, se precisa de um título, você tem os headings <h1>, <h2>, <h3> e assim por diante. Utilizar as tags no sentido correto é igual a “código semântico” que por sua vez justifica o termo “web standards”. Seguir os web standards é respeitar a semântica!

O validador de HTML verifica a ortografia do seu código, ou seja, verificam se não há erros de escrita nele. E nada mais! É só isso que ele faz. Leia o que eu escrevi em Validação e Semântica. Ele não avalia se o conteúdo que você inseriu, e que só tem significado para seres humanos, foi inserido dentro das tags correspondentes aquele tipo de conteúdo. Ou seja, o validador nem ao menos vai te falar se seu código está dentro dos padrões e nem ao menos significa que seu trabalho seja uma boa página! O validador não vai te informar se este trecho deve estar dentro de um <h1> ou dentro de uma <li>. Isso é impossível de ser feito!

Não existe e nunca vai existir um “validador semântico”. Você vai precisar estudar e ler muito para avaliar você mesmo se o seu XHTML segue os padrões ou não. A semântica é a alma dos web standards. Seguir os padrões é descrever seus dados usando as tags de forma correta. Você precisa dizer para os user agents o que é um título, o que é uma lista ordenada, o que é um endereço e assim por diante.

Modularidade

Praticamente em tudo que você for ler sobre Microformats, uma coisa que deve estar bem clara na sua mente é o conceito de modularidade. Pense que uma página escrita em (X)HTML é feita de diversas partes e de diversos trechos distintos de código. Temos links, parágrafos, listagens, tabelas (sim, por que não?), abreviações, endereços, títulos e subtítulos e por aí vai. Compare isso com várias peças de Lego encaixadas uma nas outras. Imagine que você pode arrancar ou colocar outras peças sem descaracterizar o restante ou ter que fazer tudo do zero. Isso é modularidade. Se um trecho está errado, jogue o trecho fora e coloque outro no lugar. Simples assim! Microformats te fornece várias peças diferentes, para problemas específicos, que podem ser colocadas onde for necessário sem que você precise refazer alguma coisa do início.

A W3C dedicou toda uma documentação chamada de Modularization of XHTML (Modularização do XHTML ), que serve de base para poder compreender que modularidade está no sangue do XHTML. Nesta documentação você vai encontrar vários tópicos terminados com a palavra “module”, que traduzido do inglês significa “módulo” ou “unidade”. Ou seja, são dezenas de unidades (módulos, peças) individuais que podem fazer parte de um documento XHTML, seja ele complexo ou simples. As especificações Microformats se aproveitam desse conceito e oferece soluções padronizadas e semânticas prontas para serem encaixadas onde for necessário. Se você tem um site e se o código dele é semanticamente correto, basta você implementar e tratar estes trechos específicos sem precisar de alterações estruturais.

Padronizando com classe

Nomes de classes podem ser usados para servirem de referências para estilização por CSS e para propósitos gerais processados por user agents. Quem definiu isso foi a W3C. User agent é qualquer aplicação que navega pela sua página. Os browsers e os mecanismos de busca são tipos de user agents, porque de alguma forma eles lêem o código fonte e fazem o trabalho pelo qual foram criados; ou seja, os browsers renderizam o código para você navegar tornando-o aparentável, e os mecanismos de busca criam relações, rankings, armazenam, indexam baseado nas informações e meta-informações contidas em um site. A W3C especificou que os nomes de classes podem ser usados para qualquer própósito que os user agents queiram, inclusive atribuir valores “semânticos” a eles, por que não?.

Semântica, é significado, lembra-se? Atribuir um valor semântico a alguma coisa é dar-lhe significado em um contexto. Um <h1> tem o significado de ser um “título” (o título principal) e a lógica segue assim por diante com qualquer outra tag existente. Cada tag tem seu significado próprio previamente atribuido pela W3C e isso ninguém discute. Mas por padrão os nomes de classes não tem significado nenhum, lembre-se disso. Então como dar significado semântico para nome de classes? Veja no texto que eu escrevi sobre o mundo de significado do atributo class.

Microformats na prática.

Se você entendeu todos estes conceitos até aqui, é mais fácil entender como usar. Como uma série de especificações, esta também possui padrões a serem seguidos. O Microformats já possui algumas especificações estabelecidas e alguns drafts que ainda não foram completamente estabelecidos. A série de especificações são:

hCalendar
hCard
rel-license
rel-nofollow
rel-tag
VoteLinks
XFN (http://gmpg.org/xfn/) (see also: xfn-implementations)
XMDP (http://gmpg.org/xmdp/)
XOXO

Não vou detalhar cada uma delas agora, farei isso em artigos futuros. Estas especificações oferecem aos autores padrões suficientes para descreverem suas informações de forma mais consistente possível. Estas especificações são aplicadas combinando tags e nome de classes para descrever a informação. Veja o exemplo da aplicação do hCalendar abaixo:


<span class="vevent">
<a class="url" href="http://www.web2con.com/">
  <span class="summary">Web 2.0 Conference</span>:

  <abbr class="dtstart" title="2005-10-05">October 5</abbr>-
  <abbr class="dtend" title="2005-10-08">7</abbr>,
at the <span class="location">Argent Hotel, San Francisco, CA</span>

</a>
</span>

Este exemplo é apresentado da seguinte maneira:

Web 2.0 Conference:
October 5-7, at the Argent Hotel, San Francisco, CA

Se for a primeira vez que você está vendo isso, talvez sua reação seja a mesma que eu tive quanto vi isto sendo aplicado desta maneira: espanto. Através de nome de classes padronizados, é possível ampliar a descrição daquilo que está sendo inserido combinando tags semanticamente corretas com classes. A aplicação de microformats gira basicamente em torno disso: criar relações descritivas entre conteúdo e meta informação inserida de forma que comibine tags semanticamente corretas, classes e atributos de HTML.

Veja um exemplo mais simples para descrever uma licensa utilizando a especificação rel-license apenas aplicando o atributo “rel” no link:

<a href="http://creativecommons.org/licenses/by/2.0/"
rel="license">cc by 2.0</a>

O atributo “rel” deve ser usado para indicar a relação que o site que insere o link tem com o site referenciado. Para isso foi criada uma série de profiles distintos que representam diferentes tipos de relação que o seu site pode ter com os sites que você linka.

Espero que este texto sirva de introdução ao microformats. A medida que eu for aplicando de forma mais consistente no meu site eu vou escrever mais artigos detalhados sobre as especificações e suas aplicações. Se quiser ir muito além deste texto, basta ler cada link e referência que eu postei aqui.