O HTML permite marcar seções de texto como cabeçalhos, corpo do texto, hiperlinks e outros elementos da página web. No entanto, essas definições não têm nada a ver com o significado dos dados: será que o texto se refere a uma pessoa, uma organização, um produto ou um evento? Os microformatos e seu sucessor, os microdados, tornam o significado dessas seções um pouco mais claro, apontando para cartões de visita, descrições de produtos, ofertas e dados de eventos de uma forma legível por uma máquina.
Neste artigo, descrevo alguns microformatos importantes, como hCard, HCAL, hProduct, hReview e Geo. Você também terá uma introdução aos microdados e vai aprender sobre algumas ferramentas de código aberto para integrar a consciência de microformatos e microdados aos seus próprios programas.
Microformatos
A linguagem HTML foi originalmente concebida para que fosse possível marcar textos em páginas da web de forma que fossem legíveis por seres humanos, mas com o crescimento explosivo da web, programas tais como os motores de busca também passaram a processar dados HTML.
O que os programas que leem dados HTML tipicamente encontram? A listagem 1 mostra o código-fonte do site mostrado na figura 1 – um documento HTML5 com um cartão de visita. O bloco de texto do título é marcado com um elemento h1. O texto para o cartão de visita é envolto por um elemento de contêiner div e uma tag <br/> introduz uma quebra de linha.
Listagem 1: Documento HTML5 com cartão de visitas
01 <!DOCTYPE html> 02 <html lang="es"> 03 <head></head> 04 <body> 05 <h1>Pedro Miguel Díaz ‐ el Arte Guitarra Flamenca</h1> 06 <div> 07 <img alt="" src="images/el‐fumador.jpg"/> 08 <a href="http://el‐fumador.info">Pedro Miguel Díaz</a> ‐ el Fumador<br/> 09 Flamenco Artist<br/> 10 C/ Peral 43<br/> 11 E‐41002 Sevilla<br/> 12 España<br/> 13 pedro@fumador.info<br/> 14 +34 954 88 24 37 15 </div> 16 </body> 17 </html>
É fácil para um leitor humano ver que os dados apresentados na figura 1 representam um cartão de visitas – mesmo que o texto esteja em um idioma diferente, mas um programa de computador não saberia a diferença entre esses dados e quaisquer outros empacotados dentro de tags HTML. Os microformatos fornecem um meio de demonstrar o efeito da marcação de dados em uma página HTML. A listagem 2 mostra a marcação sob a forma de microformato para um cartão de visitas padrão.
Listagem 2: Cartão de visitas com marcação hCard
01 <!DOCTYPE html> 02 <html> 03 <head><link rel="profile" href="http://microformats.org/profile/hcard"/></head> 04 <body> 05 <h1>Pedro Miguel Díaz ‐ el Arte Guitarra Flamenca</h1> 06 <div id="me" class="vcard"> 07 <img alt="" class="photo" src="images/el‐fumador.jpg"/> 08 <a class="url fn" href="http://el‐fumador.info">Pedro Miguel Díaz</a> 09 ‐ <span class="nickname">el Fumador</span><br/> 10 <span class="title">Flamenco Artist</span> 11 <div class="adr"> 12 <span style="display:None" class="type">Home</span> 13 <span class="street‐address">C/ Peral 43</span><br/> 14 <span class="postal‐code">E‐41002</span> 15 <span class="locality">Sevilla</span><br/> 16 <span class="country‐name">España</span> 17 </div> 18 <span class="email">pedro@fumador.info</span><br/> 19 <div class="tel"> 20 <span class="type" style="display:None">Home</span> 21 <span class="value">+34 954 88 24 37</span> 22 </div> 23 </div> 24 </body> 25 </html>
Como você pode ver, os microformatos usam principalmente o atributo de classe do vocabulário HTML. Nesse caso, o microformato hCard descreve um cartão de visitas.
Na listagem 2, cada propriedade é delimitada por um elemento <span> e descrita pelo atributo de classe universal. Por exemplo, class=”vcard”, na linha 6, refere-se a um objeto do cartão de visitas. O atributo class=”fn url” descreve o conteúdo do hiperlink, Pedro Miguel Díaz, como um nome (fn, “Nome Completo”) e a URL no atributo href como o site da correspondência (url).
O objeto endereço (class=”adr”) na linha 11 compreende várias propriedades. Ele contém o tipo, o endereço, o CEP (ou código postal), a localidade e país do endereço em questão. A marcação do cartão de visitas segue o microformato hCard, que implementa a especificação vCard do Internet Mail Consortium em HTML.
Para cada linha de texto, o vCard armazena um par de chaves/valores e opções adicionais. O microformato hCard traduz esse vocabulário em HTML, traduzindo as chaves e os valores do atributo de classe.
Os microformatos existem para vários outros usos, além de cartões de visita. Por exemplo, é possível descrever eventos usando hCalendar, informação geográfica com Geo, produtos e análises de produtos com hReview e hReview-agregado. Para uma visão geral dos microformatos e suas versões, veja a wiki no site Microformats.org.
A listagem 3 mostra como usar o microformato hCalendar, que foi derivado de iCalendar. A propriedade de chave/valor da classe class=”vevent” descreve o evento, que deve conter um resumo e um início (dtstart). Em contraste, a informação de localização é opcional.
Listagem 3: Marcação de eventos com hCalendar
01 <div class="vevent"> 02 <h3 class="summary">Feria de Abril</h3> 03 <abbr class="dtstart" title="2012‐03‐23T21:00:00Z">el 23 de marzo de 2012, 21:00</abbr> 04 en <span class="location">Sevilla</span> 05 <div class="geo"> 06 <abbr class="latitude" title="37.3844">37° 38′ N</abbr> 07 <abbr class="longitude" title="‐5.9888">5° 98′ W</abbr> 08 </div> 09 </div>
As seguintes regras se aplicam aos microformatos: se você quiser fornecer uma data em um formato legível por máquina, esse dado tem que ser informado no título da propriedade do elemento abbr (linha 3).
Além das regras gramaticais, os microformatos são caracterizados pela sua reutilização. A listagem 3 usa o microformato Geo para especificar o local de um determinado evento. O formato contém propriedades para latitude e longitude. Mais uma vez, a variante legível por máquina é informada no título da propriedade do elemento abbr.
A listagem 4 fornece outro exemplo da reutilização dos microformatos. A marcação da linha 1 refere-se ao resumo (ou descrição) de um produto usando o microformato hReview-agregado. A marcação hProduct é usada para indicar o produto sob a forma de um item. A classificação refere-se à pontuação geral, e votos retorna o número de comentários.
Listagem 4: Marcação de produtos com hProduct
01 <li class="hreview‐aggregate"> 02 <span class="item"> 03 <span class="hproduct"> 04 <a class="fn url" href="www.reseller.com?isbn=9‐874‐444‐333‐85‐1">El Arte Flamenco</a> 05 <span class="price">33.90€</span> 06 <span class="identifier"> 07 <span class="type">ISBN</span> 08 <span class="value">9‐874‐444‐333‐85‐1</span> 09 </span> 10 </span> 11 </span> 12 <abbr class="rating" title="4.9"><sup>☆☆☆☆☆</sup></abbr> 13 <span class="votes">200</span> 14 </li>
Os microformatos usam o atributo rel em hyperlinks para expressar a relação com o recurso de destino; por exemplo, o link:
<a rel=”met friend colleague” href=”http://esoleares.es”> Estrella Soleares ‐ la Pinta</a>
refere-se à homepage pertencente a Estrella Soleares. A lista no atributo rel designa Estrella como um amigo e colega com o qual o provedor do link também tem (met) ligação pessoal. Para uma visão geral dos valores do atributo rel, verifique novamente o wiki Microformats.
Microdados HTML5
O HTML5 inclui uma série de elementos semânticos que não estavam presentes em suas versões anteriores. O elemento time é usado para marcar as datas e horários; o elemento meter significa valores medidos. Para tornar esses dados semânticos capazes de entender programas, o HTML5 adapta o conceito de microformato no formulário conhecido como microdados. O sistema de microdados do HTML5 define um conjunto de propriedades – item-scope, itemtype, itemprop e itemref – que fornece a função do atributo de classe para microformatos.
A listagem 5 mostra os dados do cartão de visitas da listagem 2 como microdados HTML5. Em vez de uma propriedade de classe, os microdados usam o atributo itemprop para definir propriedades. O atributo itemscope é utilizado para delimitar as unidades, como exemplificado nas linhas de 10 a 17. O atributo itemtype (linha 5) designa o vocabulário para a seção que o introduz. O padrão HTML5 adotou o vocabulário para vCard e vEvent. Outros microformatos também foram traduzidos em microdados [8]. O atributo itemref é usado para as propriedades do grupo além da lógica de container. Para permitir que isso aconteça, itemref usa o atributo ID universal para apontar para outros elementos.
Listagem 5: Cartão de visitas com microdata
01 <!DOCTYPE html> 02 <html> 03 <head><title>vCard</title></head> 04 <body> 05 <div id="me" itemscope itemtype="http://microformats.org/profile/hcard"> 06 <img alt="" itemprop="photo" src="images/el‐fumador.jpg"/> 07 <a rel="me" itemprop="url fn" href="http://el‐fumador.info">Pedro Miguel Díaz</a> 08 ‐ <span itemprop="nickname">el Fumador</span><br/> 10 <div itemscope itemprop="adr"> 11 <span style="display:None" itemprop="type">Home</span> 12 <span itemprop="street‐address">C/ Peral 43</span><br/> 13 <span itemprop="postal‐code">E‐41002</span> 14 <span itemprop="locality">Sevilla</span><br/> 15 <span itemprop="region">Andalucía</span><br/> 16 <span itemprop="country‐name">España</span> 17 </div> 18 <span itemprop="email">pedro@fumador.info</span><br/> 19 <div class="tel" itemscope> 20 <span itemprop="type" style="display:None">Home</span> 21 <span itemprop="value">+34 954 88 24 37</span> 22 </div> 23 </div> 24 </body> 25 </html>
Rich Snippet Tool
A importância dos microformatos não se torna aparente até que você realmente veja os dados elaborados com eles. Por exemplo, é possível usar microformatos para otimizar os resultados obtidos pelos motores de busca. A figura 2 mostra o efeito dos microformatos hCard sobre o motor de busca do Google usando a ferramenta de Rich Snippet Tool. A ferramenta de pega os microformatos da página e mostra quais informações o motor de pesquisa irá avaliar. Para o site mostrado na figura 1, o motor de busca pega a localização de Pedro Miguel (Sevilla) e seu respectivo cargo (Flamenco Artist). Avaliações baseadas em hReview ou hReview-agregado também são destaque nos resultados da pesquisa. As classes de 1 a 5 são codificadas graficamente com o número de estrelas. É difícil estimar a abrangência que os microdados mais recentes atingiram em comparação com os microformatos; no entanto, o número de ferramentas de código aberto disponíveis para essa tarefa sugere aumento de seu uso. Como mostra o Rich Snippet Tool, o Google lê ambos os microdados e microformatos.
Trabalhando com microformatos
Ferramentas para microformatos ou microdados se dividem em duas classes: uma cria e marca os dados, e a outra lê as informações. Por exemplo, o sistema de gerenciamento de conteúdo livre, WordPress, tem uma extensão que facilita o processo de criação de microdados.
O plugin Operator para o navegador Firefox simplifica o processo de identificação e processamento de microformatos em sites. Depois de instalar a extensão e reiniciar o navegador, o Operator aparece como uma barra de ferramentas adicional logo abaixo da barra de endereços (figura 3).
A atual versão 0.9.5.6 do Operator (quando este artigo foi escrito) mostra contatos, eventos, locais, tagspaces, indicadores e recursos, e permite processar os dados. Contatos podem ser exportados para o formato vCard e eventos para o formato iCal, ou eles podem ser injetados em serviços web, como Yahoo Contatos ou Google Calendar. O plugin passará coordenadas Geo para serviços de mapas, se desejar. O Operator é fornecido sob a licença MPL/GPL/LGPL. Futuras versões prometem mais microformatos e links.
Uma série de bibliotecas de código aberto em várias linguagens fornecem acesso programático a microdados. O plugin MicrodataJS do jQuery oferece uma interface de programação semelhante à API DOM para microdados com especificação HTML5. A listagem 6 mostra a integração de MicrodataJS em um documento HTML. A linha 3 integra o jQuery, então as linhas 4 e 5 integram os dois plugins jQuery, MicrodataJS e Microdata vCard. A linha 7 demonstra a utilização do MicrodataJS. Esse exemplo utiliza JavaScript para extrair os microdados dos cartões de visita e para destacá-los em formato vCard. Depois de carregar o documento HTML, o código na listagem 7 executa a função atribuída ao evento onload na linha 1. A função $ na linha 2 espera uma expressão seletora de CSS. Ela procura por elementos que contêm atributos itemtype com a especificação do vocabulário hCard.
Listagem 6: Integração com MicrodataJS
01 <head> 02 <script src="js/fumador.js"></script> 03 <script src="js/jquery‐1.7.1.min.js"></script> 04 <script src="js/jquery.microdata.js"></script> 05 <script src="js/jquery.microdata.vcard.js"></script> 06 </head>
Listagem 7: MicrodataJS
01 window.onload = function() {
02 $('[itemtype="http://microformats.org/profile/hcard"]'). each(function(index) {
03 var item = $(this);
04 item.append('<a class="microlink">microdata</a>');
05 item.find("a.microlink").click(
06 function() {
07 $(this).parent().prepend('<div class="microdata"> <a class="microlink close">close</a><textarea >' +jQuery.microdata.vcard(item)+'</textarea></div>');
08 item.find('.close').click(
09 function() {
10 item.find('.microdata').remove()
11 }
12 );
13 }
14 );
15 });
16 }
O método each() passa o conjunto resultante de elementos para a função subsequente. A variável item na linha 3 aceita uma referência ao elemento da variável especial this. Esse valor é, então, visível em todas as expressões, incluindo a definição da função que começa na linha 6. Se o usuário, em seguida, executar a função na linha 6, clicando em um link com a propriedade class=”microlink”, o JavaScript lembrará o valor da variável item.
Antes que isto possa acontecer, a linha 4 usa a função de acréscimo para adicionar um hiperlink com a propriedade class=”microlink” para cada elemento selecionado na linha 2. A linha 5 atribui a função definida na linha 6 de um evento de clique desse hiperlink. A expressão $(this).parent(), na linha 7, aponta também para o valor da variável item.
É mais fácil usar a variável item, como mostrado neste código. Depois de um clique, a função mostrada na linha 7 acrescenta uma importante área preenchida com dados em formato vCard ao elemento item. Para que isso aconteça, o método vcard do MicrodataJS é utilizado – também na linha 7. A listagem 7 também define um handler de eventos para o hiperlink da classe. Outro clique fecha a área que foi aberta. A figura 4 mostra os microdados extraídos.
O MicrodataJS também pode ler microdados como JSON, Plugin Microdata JSON, Vevent ou Plugin Microdata Vevent. Você vai encontrar uma infinidade de funções para trabalhar com microdados, que são – infelizmente – não documentadas em outro lugar fora do código-fonte. Além de tudo isso, o MicrodataJS fornece um frontend chamado Live para a extração de microdados no navegador.
A linguagem de programação Python oferece a biblioteca Microdata, que fornece um analisador para microdados em documentos HTML5. Ele é fornecido como domínio público, sem quaisquer detalhes específicos sobre sua licença. A listagem 8 mostra como instalar o Microdata 0.3.0 no Ubuntu 11.10. Se necessário, o html5lib do Python também será instalado nesse processo.
Listagem 8: Instalando o Python Microdata
01 wget http://pypi.python.org/packages/source/m/microdata/microdata‐0.3.0.tar.gz 02 tar xzvf microdata‐0.3.0.tar.gz 03 cd microdata‐0.3.0/ 04 sudo python setup.py install
A listagem 9 demonstra o uso de microdados em uma sessão Python interativa. O Python é chamado pela primeira vez na linha de comando na linha 1 da listagem, e o módulo de microdados é importado na linha 2. Chamar o método get_items() sobre o arquivo microdata.html na linha 3 extrai todos os microdados do documento HTML5 e armazena essa informação em campos da variável itens. A chamada para a função json() na linha 4 converte os microdados para o formato de dados JSON. De uma maneira semelhante, o método dict() poderia traduzir os dados para um formato do dicionário Python.
Listagem 9: Microdata interativo
01 $ python
02 >>> import microdata
03 >>> items = microdata.get_items(open("microdata.html"))
04 >>> print items[1].json()
05 {
06 "geo": [
07 {
08 "latitude": [
09 "37\u00b0 38\u2032 N"
10 ],
11 "longitude": [
12 "5\u00b0 98\u2032 W"
13 ]
14 }
15 ],
16 "dtstart": [
17 "2012‐03‐23T21:00:00Z"
18 ],
19 "type": "http://www.data‐vocabulary.org/Event",
20 "location": [
21 "Sevilla"
22 ],
23 "summary": [
24 "Feria de Abril"
25 ]
26 }
Outras linguagens também oferecem analisadores grátis para microdados; por exemplo, Ruby, com Mida, Perl com HTML::Microdata, PHP com PHP Microdata, ou Java com Any23. O Any23 não apenas analisa os microdados, mas também converte uma variedade de metainformações entre vários formatos. Os formatos de entrada suportados são: RDF, microdados ou microformatos em (X)HTML5, Turtle, NTriples, N-Quads, RDF em XML e CSV. Os formatos de saída suportados são Turtle, N-Triplos, N-Quads, RDF/XML e JSON.
Tesouro de informações
Os microformatos abrem o conteúdo de páginas da web para um processamento programático mais inteligente por ferramentas como motores de busca.
O HTML5 adotou o princípio de microformatos sob a forma de microdados. Basta experimentar o plugin Firefox Operator para ter uma ideia do potencial que os formatos de dados tem a oferecer. À medida que mais desenvolvedores de websites adotam os microformatos e os microdados, se tornará mais fácil extrair informação útil do emaranhado cada vez mais complexo de informação que nós conhecemos como web.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?