3 de outubro de 2007

Microformats: Entenda-os.

"A Web semântica é uma extensão da web atual que permitira encontrar, compartilhar e combinar informações com mais facilidade. Isso seria feito por meio da adição de dados semânticos a informação disponível nas paginas (...)". Foi assim que o Robinson começou o seu artigo sobre Microformats na Revista W deste mês. E isso me motivou a escrever este post.


Microformats é uma tecnologia que permite adicionar mais semântica a um trecho de código, ou seja, com eles você pode descrever melhor os eventos, links, perfis e outras informações que você usa em suas paginas.


Para cada tipo de dado, existe um microformat. Como o hCard, para perfis e informações pessoais; o rel="nofollow" para links que não devem ser seguidos; e o hCalendar, que vai ser explicado nesse post.



Observe este exemplo:



<p>
Olá,<br />
Amanhã vai ter uma festa da escola, vai acontecer na Rua 5 às 13 horas. Quero ver todo mundo lá!
</p>

Um parágrafo escrito em html, falando sobre uma festa. Com microformats podemos descrever melhor o conteúdo desse parágrafo, marcando a localização, o resumo, o horário, etc.



<p class="vevent">
Ola,<br />
Amanhã vai ter uma festa da escola, vai acontecer na Rua 5 às 13 horas. Quero ver todo mundo lá!
</p>

Esse é o microformat hCalendar, que é usado para descrever eventos. Percebeu que adicionei uma classe ao p? Com isso mostro a todos, que estou falando sobre um evento, e isso mais tarde pode ser usado por um programa de calendário, por exemplo. Vamos continuar adicionando significado a esse código:



<p class="vevent">
Olá,<br />
Amanhã vai ter uma <span class="summary">festa da escola</span>, vai acontecer na rua 5 às 13 horas. Quero ver todo mundo lá!
</p>

A classe "summary" indica que "festa da escola" é o resumo do evento. Mas ainda não acabou:



<p class="vevent">
Olá,<br />
Amanhã vai ter uma <span class="summary">festa da escola</span>, vai acontecer na <span class="location">rua 5</span>. Quero ver todo mundo lá!
</p>

Envolvendo o trecho "rua 5" a classe "location”, dizemos que a localização do evento é neste local. Mas, e a data?



<p class="vevent">
Olá,<br />
<abbr class="dtstart" title="2007-10-04">Amanha</abbr> vai ter uma <span class="summary">festa da escola</span>, vai acontecer na <span class="location">rua 5</span>. Quero ver todo mundo lá!
</p>

O padrão ISO para datas é o formato AAAA-MM-DD; quatro números no ano, dois no mês e dois no dia. O elemento abbr com a classe "dtstart" indica que a data do evento é a data que esta no title.



Um simples parágrafo com muita informação que pode ser descrita com os microformats.



Aprenda mais:
Microformats - Revolução Etc.
Sobre microformats - Microformats.org



Tags:

0 comentários: