HTML5 - Microdata

MICRODATA

Semântica adicional

Dê um olhada no seguinte código:

<!DOCTYPE html>
<html>
<head>
<metacharset=”UTF-8” />
<title>Microdata 1</title>
</head>
<body>
<h1>Resultados do trimestre</h1>
<ol>
<li>
<dl>
<dt>nome</dt> <dd>Joaquim</dd>
<dt>total</dt> <dd>10.764</dd>
</dl>
</li>
<li>
<dl>
<dt>nome</dt> <dd>Manoel</dd>
<dt>total</dt> <dd>12.449</dd>
</dl>
</li>
<li>
<dl>
<dt>nome</dt> <dd>Antonio</dd>
<dt>total</dt> <dd>9.202</dd>
</dl>
</li>
<li>
<dl>
<dt>nome</dt> <dd>Pedro</dd>
<dt>total</dt> <dd>17.337</dd>
</dl>
</li>
</ol>
</body>
</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:

 

<!DOCTYPE html>
<html>
<head>
<metacharset=”UTF-8” />
<title>Microdata 2</title>
</head>
<body>
<h1>Resultados do trimestre</h1>
<ol>
<li>
<dl itemscope>
<dt>nome</dt> <dd itemprop=”nome”>Joaquim</dd>
<dt>total</dt> <dd itemprop=”total”>10.764</dd>
</dl>
</li>
<li>
<dl itemscope>
<dt>nome</dt> <dd itemprop=”nome”>Manoel</dd>
<dt>total</dt> <dd itemprop=”total”>12.449</dd>
</dl>
</li>
<li>
<dl itemscope>
<dt>nome</dt> <dd itemprop=”nome”>Antonio</dd>
<dt>total</dt> <dd itemprop=”total”>9.202</dd>
</dl>
</li>
<li>
<dl itemscope>
<dt>nome</dt> <dd itemprop=”nome”>Pedro</dd>
<dt>total</dt> <dd itemprop=”total”>17.337</dd>
</dl>
</li>
</ol>
</body>
</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:

<!DOCTYPE html>
<html>
<head>
<metacharset=”UTF-8” />
<title>Microdata 3</title>
</head>
<body>
<h1>Resultados do trimestre</h1>
<ol>
<li>
<dl itemscope>
<dt>nome</dt> <dd itemprop=”nome”>Joaquim</dd>
<dt>total</dt> <dd itemprop=”total”>10.764</dd>
</dl>
</li>
<li>
<dl itemscope>
<dt>nome</dt> <dd itemprop=”nome”>Manoel</dd>
<dt>total</dt> <dd itemprop=”total”>12.449</dd>
</dl>
</li>
<li>
<dl itemscope>
<dt>nome</dt> <dd itemprop=”nome”>Antonio</dd>
<dt>total</dt> <dd itemprop=”total”>9.202</dd>
</dl>
</li>
<li>
<dl itemscope>
<dt>nome</dt> <dd itemprop=”nome”>Pedro</dd>
<dt>total</dt> <dd itemprop=”total”>17.337</dd>
</dl>
</li>
</ol>
<h2>Carros mais vendidos</h2>
<ol>
<li>
<dl itemscope>
<dt>nome</dt> <dd itemprop=”nome”>Fusca</dd>
<dt>total</dt> <dd itemprop=”total”>382</dd>
</dl>
</li>
<li>
<dl itemscope>
<dt>nome</dt> <dd itemprop=”nome”>Brasília</dd>
<dt>total</dt> <dd itemprop=”total”>298</dd>
</dl>
</li>
<li>
<dl itemscope>
<dt>nome</dt> <dd itemprop=”nome”>Corcel</dd>
<dt>total</dt> <dd itemprop=”total”>102</dd>
</dl>
</li>
</ol>
</body>
</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:

<!DOCTYPE html>
<html>
<head>
<metacharset=”UTF-8” />
<title>Microdata 4</title>
</head>
<body>
<h1>Resultados do trimestre</h1>
<ol>
<li>
<dl itemscope itemtype=”pessoa”>
<dt>nome</dt> <dd itemprop=”nome”>Joaquim</dd>
<dt>total</dt> <dd itemprop=”total”>10.764</dd>
</dl>
</li>
<li>
<dl itemscope itemtype=”pessoa”>
<dt>nome</dt> <dd itemprop=”nome”>Manoel</dd>
<dt>total</dt> <dd itemprop=”total”>12.449</dd>
</dl>
</li>
<li>
<dl itemscope itemtype=”pessoa”>
<dt>nome</dt> <dd itemprop=”nome”>Antonio</dd>
<dt>total</dt> <dd itemprop=”total”>9.202</dd>
</dl>
</li>
<li>
<dl itemscope itemtype=”pessoa”>
<dt>nome</dt> <dd itemprop=”nome”>Pedro</dd>
<dt>total</dt> <dd itemprop=”total”>17.337</dd>
</dl>
</li>
</ol>
<h2>Carros mais vendidos</h2>
<ol>
<li>
<dl itemscope itemtype=”carro”>
<dt>nome</dt> <dd itemprop=”nome”>Fusca</dd>
<dt>total</dt> <dd itemprop=”total”>382</dd>
</dl>
</li>
<li>
<dl itemscope itemtype=”carro”>
<dt>nome</dt> <dd itemprop=”nome”>Brasília</dd>
<dt>total</dt> <dd itemprop=”total”>298</dd>
</dl>
</li>
<li>
<dl itemscope itemtype=”carro”>
<dt>nome</dt> <dd itemprop=”nome”>Corcel</dd>
<dt>total</dt> <dd itemprop=”total”>102</dd>
</dl>
</li>
</ol>
</body>
</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 http://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 itemtypedeve ser a própria URL que documenta o formato. Veja como fica:

<!DOCTYPE html>
<html>
<head>
<metacharset=”UTF-8” />
<title>Visie Padrões Web</title>
</head>
<body>
<address itemscope itemtype=”http://data-vocabulary.org/Organization”>
<h1 itemprop=”name”>Visie Padrões Web</h1>
<div itemprop=”address” itemscope itemtype=”http://data-vocabulary.org/Address”>
<p itemprop=”street-address”>Alameda dos Ubiatans,257 - Planalto Paulista</p>
<p>
<span itemprop=”locality”>São Paulo</span> -
<span itemprop=”region”>SP</span> -
<span itemprop=”country-name”>Brasil</span>
</p>
<p itemprop=”postal-code”>04070-030</p>
</div>
<div itemprop=”tel”>+55.11.3477-3347</div>
</address>
</body>

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

 

Este treinamento faz parte do Microsoft Virtual Academy: http://www.microsoftvirtualacademy.com

Tags:

Follow the Discussion

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.