Microformats

Introdução

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 http://www.we05.com/ a página ficou indisponível) lendo e ouvindo os podcastings. Agora vamos ao que interessa.

  1. Indice:
    1. Introdução
    2. O que é Microformats
    3. Porque Microformats?
    4. Qual o ambiente propício para Microformats ou como eu poso aplicar isso?
    5. Semântica é significado
    6. Modularidade
    7. Padronizando com classe
    8. Microformats na prática
    9. Referências

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, rankings 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 quando necessário utilizados dentro dos padrões web.
  • Aplicaçã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 <address>, 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 aplicar. 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:

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 57, 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.

Referências

  1. Textos publicados aqui relacionados com Microformats:
    1. Microformats
    2. Microformats: XOXO
    3. Microformats: O mundo de significado do atributo class
    4. hCard
    5. Microformats: os atributos rel e rev
  2. Referências normativas
    1. Microformats.org
    2. Microformats Wiki
    3. Modularization of XHTML

82 thoughts on “Microformats”

  1. Quando penso que começo a aprender a semantica, surgem coisas novas rsrssr…
    Realmente, quanto mais padrões criados melhor pra internet… Acho que padronizar classes, ajudaria bastante no trabalho. Pense no trabalho em grupo, por exemplo… Eu trabalho com uma equipe bem desorganizada… se todo mundo usasse semantica ia facilitar muito, pois se eu tivesse que editar alguma coisa num projeto de outro, saberia o que é cada uma das centenas de linhas do código… Atualmente, antes de começar uma atualização, eu perco uns 2 minutos até entender a forma como foi feito…

    E essa é só mais uma das vantangens de uma boa definição no código

  2. Não sei… eu ainda não engloi isso muito bem, desde que vi a primeira vez.

    Tudo bem, a intenção é boa. Os buscadores têm codições de fazer muito mais do que vem sendo feito, mas o conteúdo na web não está preparado. Como vai demorar um bocado para a web estar preparada, acharam essa saída (gambiarra?).

    Parece muito mais uma atitude reformista, do que evolucionária ou revolucionária. O que não deixa de ter seus méritos…

  3. Off Tópico:
    Eh, no Opera, além da barra horizontal enorme, tem alguns textos saindo para fora da parte branca (tanto para a direita quanto para a esquerda).

    Agora quanto ao Java Script encorporado no HTML, tente usar EventListener.

  4. Sabe o que eu acho brabo do Opera? É que as vezes ele chega a ser pior do que o Internet Explorer. Você precisa ficar colocando hack pra ele aceitar certas coisas. Sobre a barra horizontal gigante é por causa da técnica "image replacement" que dependendo da quantidade que você usa ele estoura. Estou escrevendo este comentário do Opera agora, só para ser sincero no que escrevo, e um browser que precisa de hacks deveria ser deixado de lado. Meu conselho é que baixem o Mozilla. Ele é perfeito e não precisa de hack nenhum para interpretar CSS. Para aqueles que insistem em usar o Opera, nas minhas férias eu devo fazer alguns ajustes para este browser.

  5. Tive pensando no seguinte… Cada tag tem sua classe nomeada de forma inteligente para indicar do que se trata cada informação do documento. Até aí tudo bem.
    Mas vi que o resultado visual é o mesmo que eu teria se não tivesse colocado nenhuma dessas tags.
    Agora fiquei imaginando. Eu tenho que ter essas classes definidas no meu css?
    Por exemplo, tenho que ter um .dtstart {} ou .dtend {} ?
    Pq acredito que se eu não tiver, vou acabar tendo uma inconsistencia de dados, de forma que eu indiquei uma classe de estilo, sendo que ela não existe. Seria quase um lixo de código…

    Pensei que posso traduzir isso melhor ainda criando umas meta tags tipo:

    Isso foi uma viagem que eu tive sobre o assunto. O que vcs acham?

  6. Acho que minhas meta tags do post anterior foram removidas pq eu escrevi a tag normal.
    As meta tags seriam do tipo:

    meta name="dtstart" content="Data Início Evento"

    meta name="dtend" content="Data Fim Evento"

  7. Kico Zaninetti –> A vantagem de se usar microformatos é que não é presciso usar metatags sendo que a infomação já está na pagina.

  8. Pessoal, já existe uma "tabela de microformats" e seus significados. Nada mais é do que a própria especificação. Ou se usa os padrões de cada especificação ou não é microformats. Outra coisa. Meta tags está relacionado com meta informação do documento em si e Microformats é meta-informação (no sentido lato) de determinado trecho específico, ou seja, enquanto eu só posso ter uma meta tag sobre um evento por exemplo, em uma mesma página eu posso trazer centenas de eventos distintos feitos em microformats. Não sou limitado por trechos considerando as características modulares de microformats que me permite aplicar em qualquer lugar, basta existir a necessidade.

  9. Pessoal tirem algumas dúvidas minhas:

    Quem cria os microformats?
    Porque eles não seguem nenhum padrão de nomeação?
    Os user-agents já estão entendendo essa técnica?

    Ao afirmar que: "primeiro para humanos depois para máquinas", não caímos no mesmo enigma de quem vem primeiro: "o ovo ou a galinha?".

    No meu ponto de vista, se as máquinas não entenderem do que se trata tal informação, o mesmo não poderá formatar isso para humanos entenderem, pois os microformats é irrelevante para um ser humano sem um tratamento, ou estou errado?

    Bom pessoal, espero não ter falado muita besteira, mas aposto que além de eu, muitas pessoas ainda estão cheio de dúvidas em relação aos Microformats.

    Um abraço!

  10. Tantek Çelik é o responsável por não ter implementado corretamente, no CSS2, o alinhamento vertical de objetos?

    Definitivamente, preciso ter uma palavrinha com esse cara…

  11. "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."

    Particularmente nao concordo com a afirmacao acima. Microformats utiliza tais tags e somente as organizam (em xml readable way) proporcionando q estas possam ser 'parseaveis' ao formato nativo. Ex. hCard(microformat) to vCard(eformat)

  12. Pingback: Xmedia Webfactory » Arquivo do Blog » Yahoo vai publicar em Microformats
  13. Pingback: Reinvantando o HTML: o futuro da linguagem de hypertexto » Revolução Etc - Web Standards em uma casca de noz!
  14. Pingback: InterblogNet » Blog Archive » Microformatos
  15. Pingback: Techbits
  16. Muito show, agora entendi…

    Mas isso é super show, para desenvolvedores a entregar um site…

    Agora imagine criar um painel de controle, onde o cliente irá atualizar o website, como explicar o que é microformatos? OK, vamos mais longe, vamos dizer que via REPLACE do ASP ou PHP conseguimos fazer código parecido com o do BBCode, você cola o [b]texto[/b] e fica negrito, vamos fazer um [date]2/6/2007[/date] e usamos um replace e pronto, temos microformatos no código…

    Mas será que o cliente REALMENTE vai usar isso? Ou seja a semantica só se mantem na entrega do projeto, após isso é na base da reza…. rs

    Esse é meu ponto de vista 🙂

  17. Pingback: Web2 | Microformats at Zé Cachorro
  18. Pingback: Microformatos na Expo 2.0 « Vista eXPerience
  19. Pingback: O que é Microformats? Conheça ou saiba mais :: blodd - o blog de 2d ou Pedro Bachiega pros conhecidos...
  20. Pingback: Techbits
  21. Pingback: WEBtudinho » Microformats: uma novidade obrigatória
  22. Pingback: João Ximenes » Blog Archive » Microformats: Ta chegando a hora de pôr em prática :)
  23. Bacana esse post durar aí já quase 3 anos..
    estou começando com os microformats.
    Minha dúvida é: como posso minerar informações com eles?
    Ou seja.. apliquei os microformatos.. e ai.. existe alguma ferramenta para `interpreta-los` e me gerar informacao util?

  24. Pingback: supersimples » O perfil do Designer.
  25. Henrique. Não sei se eu já comentei alguma coisa aqui ou não, mas quero parabenizá-lo pelo site/blog. Esses artigos sobre microformats, semantica, etc são excelentes, completos, altamente elucidativos e um prato cheio pra quem quer se manter sempre atualizado, como eu. Parabéns mesmo!!!

  26. Realmente muito interessante essa "técnica" tornar os códigos mais "humanos" realmente facilitam o trabalho dos programadores, e no mar de "pérolas" que encontramos nos códigos HTML(principalmente com o advento dos editores gráficos) uma corrente que luta pela "limpeza" desses códigos é sempre bem vinda.

    Entretando não entendi o porque de no exemplo ter sido utilizado o:
    "Argent Hotel, San Francisco, CA"

    ao invés de:
    Argent Hotel, San Francisco, CA

    já que a Tag deve ser utilizada para todos os tipos de locais(creio eu).

    Mesmo assim o artigo está show!

  27. No comentário acima não apareceu as tags… tsc tsc tsc

    a pergunta é, por que usar a tag "span" com a classe "location" ao invés de usar uma tag "address"?

  28. Pingback: Fazer tudo sozinho não é tão legal » Comunidade WordPress-BR
  29. Um microformats que já está começando a ser utilizado é o microformats hproduct, atualmente os sites que tenho conhecimendo que estão utilizando são o Best Buy e no Brasil o Ponto Frio.com

  30. No Brasil os comércios eletrônicos
    começaram a utilizar o microformats hproduct, como foi dito pelo Ricardo Souza no comentário acima, além do PontoFrio.com, verifiquei que já utlizam também o Extra.com.br e a Loja Hp [www.lojahp.com.br]

Leave a Reply

Your email address will not be published. Required fields are marked *