Microformatos para leigos
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:
- Localização geográfica (latitude longitude)
- Programa de e-mail que o usuário usa para enviar suas mensagens (!)
- Definição da logomarca de uma empresa
- Categorização de conteúdo (tag)
- Autor do texto
- Contato de redes de mensagens instantâneas (instant messengers)
- Link para profile pessoal em sites como flickr, blogger.com, del.icio.us
- Menus de sites
- Listas retráteis (como os FAQ comuns nos nossos sites)
- 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:
- Apenas “summary” do currículo
- Apenas telefone do hCard
- Apenas capa e título do álbum de música
- Telefone da pessoa em negrito e vermelho vibrante
- 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:
- wiki com muitos dos microformatos existentes, ótimo para pesquisas
- Padronização para currículos
- Criador de contatos no microformato hCard
- Microformato para organização e semântica de listas
- Site oficial
- Vídeo do Bill Gates falando que precisamos de microformatos
- 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
- Dezenas de diferentes exemplos de dados no formato hCard
- Wiki oficial do microformato hCard
Oba! mais coisinhas sobre microformats em portuga =O
Passa os ‘Styles Sheets’ também… eu quero dar uma olhada. Abraço!!
Uma idéia: Mostra umas interações também com ‘XML – XSL’
[...] Intenso uso de microformatos (hCard, XOXO); [...]
e ai Marco blz?
ou ja viu o novo 007?? vai ter parkour em algumas cenas de perseguição!!!
[...] Como já existe um ótimo texto do Marco Gomes, microformatos para leigos, bem explicado, com exemplos e muitos links para referência, achei desnecessário tentar escrever algo novo. É só clicar e se divertir. [...]
[...] Pra finalizar, vou indicar novamente o artigo do Marco Gomes que fala de Microformatos para leigos. Se você ainda tem dúvidas sobre o que são os Microformatos, vale a pena passar lá e dar uma lida. [...]
[...] Microformatos para leigos Outro bom artigo introdutório sobre os microformatos. [...]
[...] Microformatos para leigos Outro bom artigo introdutório sobre os microformatos. [...]
[...] Pra finalizar, vou indicar novamente o artigo do Marco Gomes que fala de Microformatos para leigos. Se você ainda tem dúvidas sobre o que são os Microformatos, vale a pena passar lá e dar uma lida. [...]
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!
Aqui fica um outro bom artigo sobre Microformatos.
[...] http://marcogomes.com/blog/2006/microformatos-para-leigos [...]