Microdata em html5

Semântica adicional

Dê um olhada no seguinte código:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8" />
 5 <title>Microdata 1</title>
 6 </head>
 7 <body>
 8 
 9 <h1>Resultados do trimestre</h1>
 10 <ol>
 11 <li>
 12 <dl>
 13 <dt>nome</dt> <dd>Joaquim</dd>
 14 <dt>total</dt> <dd>10.764</dd>
 15 </dl>
 16 </li>
 17 <li>
 18 <dl>
 19 <dt>nome</dt> <dd>Manoel</dd>
 20 <dt>total</dt> <dd>12.449</dd>
 21 </dl>
 22 </li>
 23 <li>
 24 <dl>
 25 <dt>nome</dt> <dd>Antonio</dd>
 26 <dt>total</dt> <dd>9.202</dd>
 27 </dl>
 28 </li>
 29 <li>
 30 <dl>
 31 <dt>nome</dt> <dd>Pedro</dd>
 32 <dt>total</dt> <dd>17.337</dd>
 33 </dl>
 34 </li>
 35 </ol>
 36 
 37 </body>
 38 </html>

A Microdata API nos permite tornar esta estrutura semântica um pouco mais específica, definindo o que é o conteúdo de cada elemento. Veja este outro exemplo:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8" />
 5 <title>Microdata 2</title>
 6 </head>
 7 <body>
 8 
 9 <h1>Resultados do trimestre</h1>
 10 <ol>
 11 <li>
 12 <dl itemscope>
 13 <dt>nome</dt> <dd itemprop="nome">Joaquim</dd>
 14 <dt>total</dt> <dd itemprop="total">10.764</dd>
 15 </dl>
 16 </li>
 17 <li>
 18 <dl itemscope>
 19 <dt>nome</dt> <dd itemprop="nome">Manoel</dd>
 20 <dt>total</dt> <dd itemprop="total">12.449</dd>
 21 </dl>
 22 </li>
 23 <li>
 24 <dl itemscope>
 25 <dt>nome</dt> <dd itemprop="nome">Antonio</dd>
 26 <dt>total</dt> <dd itemprop="total">9.202</dd>
 27 </dl>
 28 </li>
 29 <li>
 30 <dl itemscope>
 31 <dt>nome</dt> <dd itemprop="nome">Pedro</dd>
 32 <dt>total</dt> <dd itemprop="total">17.337</dd>
 33 </dl>
 34 </li>
 35 </ol>
 36 
 37 </body>
 38 </html>

Adicionamos atributos especias, itemscope e itemprop. Cada elemento itemscope define um item de dados. Cada itemprop define o nome de uma propriedade. O valor da propriedade é o conteúdo da tag HTML. A Microdata API nos fornece acesso especial a esses dados. Veja como acessar esses dados:

resultados=document.getItems()
for(var i=0;i<resultados.length;i++){
 alert(resultados[i].properties.nome[0].content+": R$ "+
 resultados[i].properties.total[0].content)
}
Diferentes tipos de dados

No exemplo acima, temos uma listagem de pessoas. Agora imagine que você precise ter, no mesmo documento, uma listagem de pessoas e carros. Poderia escrever assim:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8" />
 5 <title>Microdata 3</title>
 6 </head>
 7 <body>
 8 
 9 <h1>Resultados do trimestre</h1>
 10 <ol>
 11 <li>
 12 <dl itemscope>
 13 <dt>nome</dt> <dd itemprop="nome">Joaquim</dd>
 14 <dt>total</dt> <dd itemprop="total">10.764</dd>
 15 </dl>
 16 </li>
 17 <li>
 18 <dl itemscope>
 19 <dt>nome</dt> <dd itemprop="nome">Manoel</dd>
 20 <dt>total</dt> <dd itemprop="total">12.449</dd>
 21 </dl>
 22 </li>
 23 <li>
 24 <dl itemscope>
 25 <dt>nome</dt> <dd itemprop="nome">Antonio</dd>
 26 <dt>total</dt> <dd itemprop="total">9.202</dd>
 27 </dl>
 28 </li>
 29 <li>
 30 <dl itemscope>
 31 <dt>nome</dt> <dd itemprop="nome">Pedro</dd>
 32 <dt>total</dt> <dd itemprop="total">17.337</dd>
 33 </dl>
 34 </li>
 35 </ol>
 36 
 37 <h2>Carros mais vendidos</h2>
 38 <ol>
 39 <li>
 40 <dl itemscope>
 41 <dt>nome</dt> <dd itemprop="nome">Fusca</dd>
 42 <dt>total</dt> <dd itemprop="total">382</dd>
 43 </dl>
 44 </li>
 45 <li>
 46 <dl itemscope>
 47 <dt>nome</dt> <dd itemprop="nome">Brasília</dd>
 48 <dt>total</dt> <dd itemprop="total">298</dd>
 49 </dl>
 50 </li>
 51 <li>
 52 <dl itemscope>
 53 <dt>nome</dt> <dd itemprop="nome">Corcel</dd>
 54 <dt>total</dt> <dd itemprop="total">102</dd>
 55 </dl>
 56 </li>
 57 </ol>
 58 
 59 </body>
 60 </html>

Note que pessoas e carros tem propriedades em comum, nome e total. Quando você executar document.getItems() vai obter uma lista de todos os elementos com itemscope. Como obter uma lista apenas de pessoas ou de carros? Você pode adicionar a cada item um atributo itemtype, que diz de que tipo de entidade são aqueles dados:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8" />
 5 <title>Microdata 4</title>
 6 </head>
 7 <body>
 8 
 9 <h1>Resultados do trimestre</h1>
 10 <ol>
 11 <li>
 12 <dl itemscope itemtype="pessoa">
 13 <dt>nome</dt> <dd itemprop="nome">Joaquim</dd>
 14 <dt>total</dt> <dd itemprop="total">10.764</dd>
 15 </dl>
 16 </li>
 17 <li>
 18 <dl itemscope itemtype="pessoa">
 19 <dt>nome</dt> <dd itemprop="nome">Manoel</dd>
 20 <dt>total</dt> <dd itemprop="total">12.449</dd>
 21 </dl>
 22 </li>
 23 <li>
 24 <dl itemscope itemtype="pessoa">
 25 <dt>nome</dt> <dd itemprop="nome">Antonio</dd>
 26 <dt>total</dt> <dd itemprop="total">9.202</dd>
 27 </dl>
 28 </li>
 29 <li>
 30 <dl itemscope itemtype="pessoa">
 31 <dt>nome</dt> <dd itemprop="nome">Pedro</dd>
 32 <dt>total</dt> <dd itemprop="total">17.337</dd>
 33 </dl>
 34 </li>
 35 </ol>
 36 
 37 <h2>Carros mais vendidos</h2>
 38 <ol>
 39 <li>
 40 <dl itemscope itemtype="carro">
 41 <dt>nome</dt> <dd itemprop="nome">Fusca</dd>
 42 <dt>total</dt> <dd itemprop="total">382</dd>
 43 </dl>
 44 </li>
 45 <li>
 46 <dl itemscope itemtype="carro">
 47 <dt>nome</dt> <dd itemprop="nome">Brasília</dd>
 48 <dt>total</dt> <dd itemprop="total">298</dd>
 49 </dl>
 50 </li>
 51 <li>
 52 <dl itemscope itemtype="carro">
 53 <dt>nome</dt> <dd itemprop="nome">Corcel</dd>
 54 <dt>total</dt> <dd itemprop="total">102</dd>
 55 </dl>
 56 </li>
 57 </ol>
 58 
 59 </body>
 60 </html>

Agora você pode executar: document.getItems('carro') para obter só os carros, por exemplo.

Falando um idioma comum

Você deve ter notado que pode definir seus próprios padrões de metadados com microdata. Recomendo que, antes de criar seu próprio formato, verifique se o mesmo problema não já foi resolvido por alguém. O site www.data-vocabulary.org contém alguns desses formatos padronizados. Por exemplo, para descrever os dados de sua empresa ou organização, não invente seu próprio formato, use o formato definido em http://www.data-vocabulary.org/Organization. O valor de itemtype deve ser a própria URL que documenta o formato. Veja como fica:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8" />
 5 <title>Visie Padrões Web</title>
 6 </head>
 7 <body>
 8 
 9 <address itemscope itemtype="http://data-vocabulary.org/Organization">
 10 <h1 itemprop="name">Visie Padrões Web</h1>
 11 <div itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
 12 <p itemprop="street-address">Alameda dos Ubiatans, 257 - Planalto Paulista</p>
 13 <p>
 14 <span itemprop="locality">São Paulo</span> - 
 15 <span itemprop="region">SP</span> - 
 16 <span itemprop="country-name">Brasil</span>
 17 </p>
 18 <p itemprop="postal-code">04070-030</p>
 19 </div>
 20 <div itemprop="tel">+55.11.3477-3347</div>
 21 </address>
 22 
 23 </body>
 24 </html>

Claro que a vantagem de usar o formato padronizado ao invés de inventar o seu não é apenas não ter o trabalho de pensar os nomes das propriedades. Os sistemas de busca, e outros sistemas que acessem seu site, podem entender e tratar esses dados. O Google já faz isso, veja neste endereço:

http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146861

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s