Marco Gomes

Interneteiro, imigrante, nerd, cristão, biker. Founder da boo-box (vendida) e do Heartbit. Consigliere do JovemNerd

Microformatos para leigos

Publicado em 2006-04-16

Veja um exemplo de um bloco de informação que segue um microformato:

<div class="vcard">

    <img src="foto.jpg" alt="photo" class="photo"/><!-- foto pessoal -->

    <a class="url fn" href="http://www.marcogomes.com">Marco Gomes</a><!-- nome com link para site pessoal -->

    <div class="org">Foobar Xpto Ltda</div><!-- empresa -->

        <div class="adr"><!-- bloco relativo ao endereço pessoal -->

        <div class="street-address">Setor Leste</div><!-- rua -->

        <span class="locality">Gama</span>,<!-- cidade -->

        <span class="region">DF</span><!—estado/região -->

        <span class="postal-code">72460XXX</span><!-- CEP -->

    </div>

    <div class="tel">+55 (61) XXXX-XXXX</div><!-- telefone -->

</div>

Esse é o hCard, um microformato para publicar informações de contato de pessoas ou empresas (como um cartão de visitas). É uma padronização da forma de escrever as informações de contato (marcação semântica).

Da mesma forma que temos o hCard para contatos de pessoas, podem existir microformatos para publicação de álbum de música, compromissos, álbum de fotos, livros, roupas, qualquer coisa.

Em um microformato de “data de evento cultural” (exposição de quadros, apresentação de peça, show de música), por exemplo, poderíamos ter uma <div> com a data e a classe “date”, outra com a hora e classe “time”, uma terceira com local e classe “location” e assim por diante, descrevendo o conteúdo com tags (as mais apropriadas, não necessariamente apenas divs) e classes.

Existem microformatos para os mais variados tipos de dados, como:

  1. Localização geográfica (latitude longitude)
  2. Programa de e-mail que o usuário usa para enviar suas mensagens (!)
  3. Definição da logomarca de uma empresa
  4. Categorização de conteúdo (tag)
  5. Autor do texto
  6. Contato de redes de mensagens instantâneas (instant messengers)
  7. Link para profile pessoal em sites como flickr, blogger.com, del.icio.us
  8. Menus de sites
  9. Listas retráteis (como os FAQ comuns nos nossos sites)
  10. Currículos profissionais.

Muito bem mas: Pra que serve isso?

Bem, tudo gira em torno da semântica, com microformatos, você deixa seus dados mais fáceis de serem reconhecidos por máquinas, que posteriormente, entregam esse conteúdo mais facilmente às pessoas.

Por exemplo, um site que varre a internet registrando todos os hCard que encontra, quando você quiser saber o telefone daquele seu contato do MSN, você pode ir a esse motor de busca e fazer uma busca pelo e-mail dele, o site retornaria o hCard da pessoa, com Nome, Telefone, Endereço etc.

Outro exemplo mais “real”, um buscador de profissionais que procura por textos de currículos “padronizados” na web (pode até usar o motor do google ou yahoo pra não ter muito trabalho), registra essas informações e retorna ao usuário o profissional com características desejadas. Até existe um “draft” (rascunho) de microformato para currículos, o hResume (ver referência).

O mesmo para qualquer outro tipo de dado que seja padronizado, se é padronizado, as máquinas entendem mais facilmente e podem encontrar e guardar mais facilmente, agora e no futuro.

E não é somente “encontrar”, mas também “exibir”, como os dados são “somente marcação semântica”, o usuário pode escolher como visualizar o texto:

  1. Apenas “summary” do currículo
  2. Apenas telefone do hCard
  3. Apenas capa e título do álbum de música
  4. Telefone da pessoa em negrito e vermelho vibrante
  5. Foto piscando e nome com fonte em tamanho 150%

Qualquer alteração visual é possível graças à separação entre conteúdo e apresentação disseminada com a técnica tableless.

Abaixo as referências:

  1. wiki com muitos dos microformatos existentes, ótimo para pesquisas
  2. Padronização para currículos
  3. Criador de contatos no microformato hCard
  4. Microformato para organização e semântica de listas
  5. Site oficial
  6. Vídeo do Bill Gates falando que precisamos de microformatos
  7. Só como exemplo, estes dados não estão padronizados com classes e tags adequadas, como exercício, poderíamos criar um microformato para descrever um álbum de musica a partir desses dados
  8. Dezenas de diferentes exemplos de dados no formato hCard
  9. Wiki oficial do microformato hCard

Textos relacionados:

Deixe sua opinião

19 comentários

  1. Fabrício Soares comentou:

    Oba! mais coisinhas sobre microformats em portuga =O

  2. Filipe Souza comentou:

    Passa os ‘Styles Sheets’ também… eu quero dar uma olhada. Abraço!!

  3. Filipe Souza comentou:

    Uma idéia: Mostra umas interações também com ‘XML – XSL’

  4. bruno comentou:

    e ai Marco blz?
    ou ja viu o novo 007?? vai ter parkour em algumas cenas de perseguição!!!

  5. Jefferson Romano comentou:

    Olá, tenho uma dúvida em relação ao uso das classes, temos que tê-las dentro do css ou apenas no html?

    Estou lendo a respeito mas essa duvida persiste!

  6. Francisco Costa comentou:

    Aqui fica um outro bom artigo sobre Microformatos.

  7. Daniel comentou:

    Legal essa materia pois microformats para min e muito recente, e sou leigo mesmo
    Gostaria de saber onde acho algo para aprender a fazer o microformats para menu de site
    Abraços

  8. Olavo comentou:

    Show ! Tudo em nome da semântica :)
    Em nosso site já está adicionado e estamos analisando os resultados em termos de melhoria de desempenho.

    Ótimo artigo. Parabéns !