Microformats: o mundo de significado do atributo class

O atributo de (X)HTML “class” tem uma característica interessante que tem feito com que certos padrões sejam criados e contextualizados na aplicação no XHTML e tudo isso em torno deste atributo. Várias especificações Microformats utilizam nomes de classes padronizados, se tornando um tipo de design pattern e criando semântica onde antes não existia e era puro silêncio. Me deixe explicar melhor esta idéia.

Microformats e as classes

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?

E fez-se a luz!

O Technorati e o Google são user agents. O Google já “interpreta” (só se interpreta aquilo que tem significado, certo?) certas especificações microformats bem como o Technorati como você pode observar nesta área de desenvolvimento (conteúdo removido) dentro do próprio Technorati. Agora como funciona uma especificação Microformat? Bom uma delas, como o hCard, por exemplo, utiliza nome de classes como uma forma de meta-informação para descrever trechos específicos de um cartão de visitas. Veja o exemplo:


<div class="vcard">
<a class="url fn" href="http://tantek.com/">Tantek Çelik</a>
<div class="org">Technorati</div>
</div>

Estes nomes de classes acima se tornaram padrões da especificação Microformats hCard. Você não pode colocar o nome de classe que quiser ali, senão você terá tudo, menos um hCard. Se você quiser criar um user agent na sua casa e atribuir a ele o valor de vcard que seja igual a “informações pessoais sobre alguém” você pode. Daí sempre que o seu user agent navegar por um site e encontrar uma classe com o valor de “vcard”, ele sempre vai armazenar as informações contidas ali dentro como “informações pessoais sobre alguém”. Entendeu? Ou seja, você atribuiu valor semântico a um conjunto de nomes de classes.

O Technorati fez isso e é fantástico! A estrutura de hCard acima é parte de um padrão criado, usando tags semânticas com nome de classes padronizados. Uma vez padronizado, é possível reproduzir este padrão seguindo uma lógica, ou seja, de acordo com um significado previamente determinado, que é o que faz com que microformats seja algo semântico no aspecto mais abrangente possível. Coloque na sua cabeça que Microformats é semântica.

O que o Google e o Technorati fizeram, foi pegar as especificações microformats (algumas delas), reconhecer seus valores que associados com outros em uma página, torna possível criar relações entre as informações contidas em um documento inclusive utilizando nomes de classes como meta-informação. Microformats extende o mundo de significado e semântica do XHTML como eu já disse anteriormente. Se você entendeu por completo estes conceitos acima, basta estudar quais são os padrões individuais de cada especificação, que você será capaz de entender facilmente qualquer coisa relacionado com Microformats.

Mais de um valor para as classes.

Outra característica do atributo class, é que você pode atribuir-lhe mais de um valor ao mesmo tempo separado por espaço, ao contrário do id, que deve ter um único valor individual em toda a página. Se você olhar no header do meu site vai ver o seguinte:


<p  class="titulo header">...

O mesmo vale para o meu hCard:


<a class="url fn" href=”www.revolucao.etc.br” ...

As vantages de se ter mais de um valor em um atributo class são inúmeras. Faça seus testes e explore você mesmo. Eu espero que este texto tenha solucionado todas suas dúvidas relativas aos Microformats e sua relação com os nomes de classes. Compreender este ponto é a porta para entender semântica e microformats. Continue fazendo perguntas e me enviando suas dúvidas, que algumas delas foram atendidas aqui.

  • Rafael Slonik

    Vi esses dias lá no Technorati uma ferramenta que pega o hcard e fáz dele um cartão lido por programas de e-mail, etc.

    Era disso que eu tanto falavo nos outros posts sobre microformats: UTILIDADE! :-)

    Essa tal ferramenta se mostra útil e demonstra que a solução é boa.

    P.S.: Viste que saiu uma build mais recente do SETE ?
    http://www.jcxp.net/forums/index.php?showtopic=44

  • Fellipe Cicconi

    Henrique, essa digestão de posts do technorati são muito bem vindos, obrigado!

    Seu post ficou muito bom, até mesmo para quem acha que entendeu, caiu a ficha em vários aspectos.

  • Túlio Guimar&

    Muito bom esses textos sobre microformatos. =D

  • Hugo

    Parece que minha cabeça se abriu e o conteúdo foi empurrado pra dentro! Finalmente entendi! =P Sem querer ser chato, mas eu gostaria de avisar q os links do menu superior nao estao muito acessíveis (pelo menos no firefox)… Vlws

  • Junio Vitorino

    Olá Henrique Costa Pereira eu também sou de Minas Gerais e gostaria de lhe perguntar onde posso dar meu chute inicial em Microformats, tipo aonde posso encotrar algo para iniciar do zero?

  • Pingback: Microformats » Revolução()

  • http://putcharles.wordpress.com/ Carlos Eduardo de So

    Simplesmente perfeito…

    Qualquer dúvida que, ainda havia sobre este assunto dos Microformats, foram sanadas por esta magnífica matéria.

    Parabéns.

  • Davis Zanetti Cabral

    Rapaz, a Central TI agora está ajustada! Só que não consegue computar se abrir o link em uma tab nova no firefox.

  • Pingback: hCard » Revolução()

  • Pingback: Hyperlinks » Revolução()

  • Pingback: A semântica do span e do div » Revolução Etc - Web Standards em uma casca de noz!()

  • Pingback: Denniscs » Blog Archive » Pequenos formatos, grandes serviços()

  • http://about.me/muriloazevedo Murilo Azevedo

    Interessantissimo, há um tempo atrás pensei em utilizar no meu código, nomes que a maioria das pessoas utilizavam, justamente para tornar mais semântico, mas não achei que isso era levado tão a sério no desenvolvimento web.

    Uma nova gama de possibilidades, parabéns pelo texto! :-)