Você está aqui: Home ‣ Dive Into HTML5 ‣
❧
xistem
mais de 100 elementos
na HTML5. Alguns são
puramente semânticos, outros são
apenas recipientes para APIs de script. Ao longo da história da HTML, conhecedores dos padrões vêm discutindo sobre que elementos devem ser
incluídos na linguagem. O elemento <figure> deveria ser
incluso na HTML? O elemento <person>? Que
tal um elemento <rant>? Decisões são tomadas,
especificações são escritas, atores atuam, implementadores implementam, e
a web dá um grande passo à frente.
Claro, HTML não pode agradar a todos. Nenhum padrão pode.
Algumas ideias não atendem aos requisitos. Por exemplo, não existe o
elemento <person> na HTML5 (Não há também
o elemento <rant>, droga!). Nada impede de você usar o
elemento <person> numa página web, porém
não vai validar,
não vai funcionar consistentemente nos navegadores, e poderá conflitar com especificações futuras da HTML, se
o elemento for adicionado mais à frente.
Certo, então se fazer seu próprio elemento não é a resposta, o que faz um
escritor semanticamente correto? Houveram tentativas de estender as
versões anteriores da HTML. O método mais popular são os
microformats, que usam os atributos
class e rel na HTML. Outra opção é
RDFa, que foi originamente
projetado para ser usado na
XHTML mas
também foi portado para HTML.
Microformats e RDFa cada um tem seus pontos fortes e fracos.
Eles usam abordagens complamente diferentes em direção ao mesmo objetivo:
extender as páginas web com semântica adicional que não é parte do núcleo
da linguagem HTML. Eu não pretendo transformar este capítulo
em um formato “flamewar”. (Isso definitivamente precisaria de um elemento
<rant>!) Em vez disso, quero focar em uma terceira
opção desenvolvida usando as lições aprendidas a partir de microformats e
RDFa, e projetada para ser íntegra na própria HTML5:
microdata.
❧
Cada palavra na sentença seguinte é importante, então preste atenção.
Microdata escreve o DOM com escopo dos pares de nome/valor a partir de vocabulários personalizados.
Sim, mas o que isso significa? Vamos começar do fim e vamos retrocedendo. Microdados giram em torno de vocabulários personalizados. Pense no “conjunto de todos os elementos da HTML5” como um vocabulário. Este vocabulário inclui elementos para representar uma seção ou um artigo, mas isto não inclui elementos para representar uma pessoa ou um evento. Se você deseja representar uma pessoa na página web, você vai precisar definir seu próprio vocabulário. Microdata deixa você fazer isso. Qualquer um pode definir um vocabulário microdata e começar a incorporar propriedades personalizadas em suas próprias páginas web.
A próxima coisa a fazer para conhecer o microdata é que ele funciona com
pares de nome/valor. Todo vocabulário microdata define um conjunto de
propriedades nomeadas. Por exemplo, um vocabulário Pessoa poderia definir
propriedades como nome e foto. Para incluir um
microdata específico na sua página web, você pode fornecer o nome da
propriedade em um lugar específico. Dependendo de onde você declara o nome
da propriedade, microdata tem regras sobre como extrair o valor da
propriedade. (Mais sobre isto na próxima seção)
Junto com propriedades nomeadas, microdados dependem muito do conceito de
“escopo.” A maneira mais simples de pensar no escopo do microdata é pensar
na relação pai-filho natural dos elementos no DOM. O elemento
<html>
geralmente contém dois filhos,
<head> e
<body>. O elemento <body> geralmente
contém vários filhos, cada um deles pode ter seus próprios
elementos-filho. Por exemplo, sua página pode incluir um elemento
<h1> dentro de um elemento
<hgroup> dentro de um elemento
<header>
que está dentro de um elemento <body>. Uma tabela de
informações pode conter <td> dentro de
<tr> dentro de um <table> (Dentro do
<body>). Microdata reutiliza a estrutura hierarquica do
próprio DOM para fornecer uma forma de dizer “todas as
propriedades dentro deste elemento são tomadas
deste vocabulário.” Isso permite que você use mais de um
vocabulário microdata na mesma página. Você pode até aninhar vocabulários
microdata dentro de outros vocabulários, tudo pelo reuso da estrutura
natural do DOM. (Irei mostrar vários exemplos de vocabulários
aninhados ao longo deste capítulo)
Agora, já toquei no assunto DOM, mas deixe me dissertar sobre isso. Microdata se trata de aplicar semântica adicional para informações que já são visíveis na sua página web. Microdata não foi projetada para ser um formato de dados independente. Ele é um complemento da HTML. Como você verá na próxima seção, microdata funciona melhor quando você já está usando a HTML corretamente, porém o vocabulário da HTML não é expressivo o bastante. Microdata é excelente para aprimorar a semântica da informação que já está no DOM. Se a informação que você está tentando tornar semântica não está no DOM, você deveria voltar atrás e reavaliar se microdata é a solução correta.
Essa sentença faz mais sentido agora? “Microdata escreve o DOM com escopo dos pares de nome/valor a partir de vocabulários personalizados.” Espero que sim. Vamos ver isto na prática.
❧
Definir seu próprio vocabulário microdata é fácil. Primeiro, você precisa
de um namespace, que é apenas uma URL. O namespace
URL pode realmente apontar para uma página web funcionando,
apesar de não ser estritamente necessário. Vamos dizer que eu quero criar
um vocabulário microdata que descreve uma pessoa. Se tenho o domínio
data-vocabulary.org, irei usar a URL
http://data-vocabulary.org/Person como o namespace para meu
vocabulário microdata. Essa é uma maneira fácil de criar um identificador
global exclusivo: escolha uma URL em um domínio que você tem
controle.
Nesse vocabulário, eu preciso definir algumas propriedades nomeadas. Vamos começar com três propriedades básicas:
name (seu nome completo)photo (um link para uma foto sua)url (um link para um site associado a você, como um blog ou
um perfil do Google)
Algumas dessas propriedades são URLs, outras são texto plano.
Cada uma delas se presta a forma natural de marcação, mesmo antes de você
começar a pensar em microdata ou vocabulários ou outros enfeites. Imagine
que você tem um perfil ou uma página “sobre”. Seu nome provalvelmente é
marcado como um título, como um elemento <h1>. Sua foto
provavelmente é um elemento <img>, já que você quer que
as pessoas vejam. E quaisquer URLs associadas ao seu perfil
provavelmente já estão marcadas como hyperlinks, pois você precisa que as
pessoas sejam aptas a clicar neles. Para fins de discussão, vamos dizer
que todo seu perfil também é englobado em um elemento
<section> para separá-lo do resto do conteúdo da
página. Assim:
↶ Minhas informações
<section>
<h1>Mark Pilgrim</h1>
<p><img src="http://www.example.com/photo.jpg" alt="[eu sorrindo]"></p>
<p><a href="http://diveintomark.org/">blog</a></p>
</section>
O modelo microdata são pares de nome/valor. A propriedade microdata name
(como name ou photo ou url neste
exemplo) é sempre declarado no elemento HTML. A propriedade
value correspondente é então retirada do elemento DOM. Para
muitos dos elementos HTML, a propriedade value é simplesmente
o conteúdo textual do elemento. Porém, há uma boa quantidade de exceções.
| Elemento | Valor |
|---|---|
<meta> |
Atributo content |
|
Atributo src |
|
Atributo href |
<object> |
Atributo data |
<time> |
Atributo datetime |
| Demais elementos | Conteúdo textual |
“Adicionar microdata” na sua página é uma questão de adicionar alguns
atributos nos elementos HTML que você já tem. A primeira
coisa que você sempre faz é declarar que vocabulário microdata você está
usando, adicionando um atributo itemtype. A segunda coisa que
você sempre faz é declarar o escopo do vocabulário, usando um atributo
itemscope. Neste exemplo, toda a informação que queremos
tornar semântica é um elemento <section>, então vamos
declarar os atributos itemtype e itemscope no
elemento <section>.
<section itemscope itemtype="http://data-vocabulary.org/Person">
Seu nome é o primeiro pedaço de informação dentro do elemento
<section>. Ele está englobado em um elemento
<h1>. O elemento <h1> não tem nenhum
tratamento especial no
modelo de dados microdata da HTML5, por isso se enquadra na regra “demais elementos” onde a propriedade
microdata value é simplesmente conteúdo textual de um elemento. (Isso
funcionaria igualmente bem se o seu nome for envolvido em um elemento
<p>, <div>, ou
<span>.)
<h1 itemprop="name">Mark Pilgrim</h1>
Traduzindo, isto quez dizer “aqui está a propriedade name do
vocabulário http://data-vocabulary.org/Person, e o valor da
propriedade é Mark Pilgrim.”
Em seguida: a propriedade photo. Isto deveria ser uma
URL. De acordo com o
modelo de dados microdata da HTML5, o “value” de um elemento <img> é seu atributo
src. Ei! Olhe, a URL da foto do seu perfil já
esta em um atributo <img src>. Tudo que você precisa
fazer é declarar que o elemento <img> é a propriedade
photo.
<p><img itemprop="photo"
src="http://www.example.com/photo.jpg"
alt="[eu sorrindo]"></p>
Traduzindo, isto quer dizer “aqui está a propriedade photo do
vocabulário http://data-vocabulary.org/Person, e o valor da
propriedade é http://www.example.com/photo.jpg.”
Finalmente, a propriedade url também é uma URL.
De acordo com o
modelo de dados microdata da HTML5, o “value” de um elemento <a> é seu atributo
href. E mais uma vez, isto funciona perfeitamente com a sua
marcação existente. Tudo que você precisa fazer é dizer que seu elemento
<a> existente é a propriedade url:
<a itemprop="url" href="http://diveintomark.org/">dive into mark</a>
Traduzindo, isto quer dizer “aqui está a propriedade url do
vocabulário http://data-vocabulary.org/Person, e o valor da
propriedade é http://diveintomark.org/.
Claro, se sua marcação parece um pouco diferente, não tem problema. Você pode adicionar propriedades e valores microdata em qualquer marcação HTML, até mesmo "deformado do século 20", "tabelas para layout", "meu Deus por que eu concordei em manter esta" marcação.
↶ Pelo amor de Deus, não faça isso
<TABLE>
<TR><TD>Nome<TD>Mark Pilgrim
<TR><TD>Link<TD>
<A href=# onclick=goExternalLink()>http://diveintomark.org/</A>
</TABLE>
Para marcar a propriedade name, apenas adicione um atributo
itemprop na célula da tabela que contém o nome. Células de
tabela não têm regras especiais no valor da propriedade microdata table,
então elas pegam o valor padrão, “a propriedade microdata é o conteúdo
textual.”
<TR><TD>Nome<TD itemprop="name">Mark Pilgrim
Adicionar a propriedade url parece complicado. Essa marcação
não usa o elemento <a> corretamente. Em vez de colocar
o destino do link no atributo href, não tem nada de útil no
atributo href e usa Javascript no atributo
onclick para chamar a função (não visível) que extrai a
URL e navega até ela. Para extra “caralho, pare de fazer isso
por favor” pontos de bônus, vamos supor que a função abre também o link
numa minúscula janela popup sem barra de rolagem. Não foi a diversão da
internet do século passado?
De qualquer forma, você ainda pode converter isso em propriedade
microdata, você precisa apenas ser um pouco criativo. Usar o elemento
<a> diretamente está fora de questão. O destino do link
não está no atributo href, e não há forma de passar por cima
da regra que diz “em um elemento <a>, procure o valor
da propriedade microdata no atributo href.” Mas você
pode adicionar um elemento englobador em torno de toda a bagunça,
e usar ele para adicionar a propriedade microdata url.
↶ Isto é o que você ganha por subverter a HTML
<TABLE itemscope itemtype="http://data-vocabulary.org/Person">
<TR><TD>Nome<TD>Mark Pilgrim
<TR><TD>Link<TD>
<span itemprop="url">
<A href=# onclick=goExternalLink()>http://diveintomark.org/</A>
</span>
</TABLE>
Já que o elemento <span> não tem processamento
especial, ele usa regras padrões, “a propriedade microdata está no
conteúdo textual.” “Conteúdo textual” não significa “toda marcação dentro
deste elemento” (como você pegaria com, digamos, a propriedade
DOM innerHTML). Isso significa “apenas o texto,
senhora”. Nesse caso, http://diveintomark.org/, o conteúdo
textual do elemento <a> dentro do elemento
<span>.
Para resumir: você pode adicionar propriedades microdata em qualquer marcação. Se você está usando HTML corretamente, você vai achar mais fácil adicionar microdata do que se a sua marcação HTML for uma sujeira, mas o microdata pode sempre ser aplicado.
❧
A propósito, os exemplos iniciais na seção anterior não foram completamente formados. Existe realmente um vocabulário microdata para marcar informação sobre pessoas, e ele é realmente assim fácil. Vamos dar uma olhada.
A maneira mais fácil de integrar microdata em um website pessoal é na sua página “sobre”. Você com certeza tem uma página “sobre”, não é verdade? Se não, você pode seguir como eu estudando este exemplo de página “sobre” com semânticas adicionais. O resultado final está aqui: person-plus-microdata.html.
Primeiro vamos olhar para a marcação crua, antes de qualquer propriedade microdata ser adicionada:
<section>
<img width="204" height="250"
src="https://diveintohtml5.com.br/examples/2000_05_mark.jpg"
alt="[Mark Pilgrim, circa 2000]">
<h1>Informação para Contato</h1>
<dl>
<dt>Nome</dt>
<dd>Mark Pilgrim</dd>
<dt>Cargo</dt>
<dd>Developer Advocate na Google, Inc.</dd>
<dt>Endereço Postal</dt>
<dd>
100 Main Street<br>
Anytown, PA 19999<br>
USA
</dd>
</dl>
<h1>Meus rastros digitais</h1>
<ul>
<li><a href="http://diveintomark.org/">weblog</a></li>
<li><a href="http://www.google.com/profiles/pilgrim">Google profile</a></li>
<li><a href="http://www.reddit.com/user/MarkPilgrim">Reddit.com profile</a></li>
<li><a href="http://www.twitter.com/diveintomark">Twitter</a></li>
</ul>
</section>
A primeira coisa que você sempre precisa fazer é declarar o vocabulário
que você está usando, e o escopo das propriedades que você quer adicionar.
Você faz isso adicionando os atributos itemtype e
itemscope no elemento exterior que contém os outros elementos
que contêm os dados reais. Neste caso, ele é um elemento
<section>.
<section itemscope itemtype="http://data-vocabulary.org/Person">[Acompanhe comigo! Antes: person.html, depois: person-plus-microdata.html]
Agora você pode começar definindo propriedades microdata do vocabulário
http://data-vocabulary.org/Person. Mas o que são essas
propriedades? Como acontece, você pode ver a lista de propriedades
navegando no
data-vocabulary.org/Person
em seu navegador. A especificação do microdata não necessita disso, mas eu
diria que isso é certamente uma “melhor prática.” Afinal, se você deseja
que os desenvolvedores usem de verdade seu vocabulário microdata,
você precisa documentá-lo. E onde mais colocar sua documentação do que na
própria URL do vocabulário?
| Propriedade | Descrição |
|---|---|
name |
Nome |
nickname |
Apelido |
photo |
Um link de imagem |
title |
O cargo da pessoa (por exemplo, “Gerente Financeiro”) |
role |
O papel da pessoa (Por exemplo, “Contador”) |
url |
Link para uma página web, tal como a página pessoal da pessoa |
affiliation |
O nome da organização com que a pessoa é associada (por exemplo, um empregador) |
friend |
Identifica uma relação social entre a pessoa descrita e outra pessoa |
contact |
Identifica uma relação social entre a pessoa descrita e outra pessoa |
acquaintance |
Identifica uma relação social entre a pessoa descrita e outra pessoa |
address |
A localização da pessoa. Pode ter as subpropriedades
street-address, locality,
region, postal-code, e
country-name.
|
A primeira coisa
neste exemplo de página “sobre”
é uma foto minha. Naturalmente, ela é marcada com elemento
<img>. Para declarar que este elemento
<img> é a foto do meu perfil, tudo que precisamos fazer
é adicionar itemprop="photo" no elemento
<img>.
<img itemprop="photo" width="204" height="250"
src="https://diveintohtml5.com.br/examples/2000_05_mark.jpg"
alt="[Mark Pilgrim, circa 2000]">[Acompanhe comigo! Antes: person.html, depois: person-plus-microdata.html]
Onde está o valor da propriedade microdata? Já está lá, no atributo
src. Se você chamar novamente no
modelo de dados microdata da HTML5, o “valor” de um elemento <img> é seu atributo
src. Cada atributo <img> tem um atributo
src — caso contrário, seria apenas uma imagem quebrada — e o
src é sempre uma URL. Viu? Se você está usando
HTML corretamente, microdata é fácil.
Além disso, esse elemento <img> não está sozinho na
página. Ele é um elemento filho de um elemento
<section>, aquele que acabamos de declarar com o
atributo itemscope. Microdata reusa o relacionamento
pai-filho dos elementos na página para definir o escopo das propriedades
microdata. Em linguagem clara, estamos dizendo, “Este é elemento
<section> representa uma pessoa. Qualquer propriedade
microdata que você venha encontrar nos filhos do elemento
<section> são propriedades desta pessoa.” Se isso
ajuda, você pode pensar que o elemento <section> tem o
assunto de uma frase. O atributo itemprop representa o verbo
da frase, algo como “é fotografada em.” O valor da propriedade microdata
representa o objeto da frase.
Esta pessoa [explícito, do
<section itemscope itemtype="...">][é fotografada em] [explícito, do
<img itemprop="photo">]
https://diveintohtml5.com.br/examples/2000_05_mark.jpg[implícito, do atributo<img src>]
O assunto precisa ser definido apenas uma vez, colocando os atributos
itemscope e itemtype no elemento externo
<section>. O verbo é definido colocando o atributo
itemprop="photo" no elemento <img>. O
objeto da sentença não precisa de nenhuma marcação especial, pois o
modelo de dados microdata da HTML5
diz que a propriedade valor de um elemento <img> é o
seu atributo src.
Passando para o próximo pedaço de marcação, vemos um título
<h1> e o começo de uma lista <dl>.
Nem o <h1> nem o <dl> precisam ser
marcados com microdata. Não é toda parte da HTML que precisa
ser uma propriedade microdata. Microdata trata-se das próprias
propriedades, não da marcação ou cabeçalhos em torno das propriedades.
Esse <h1> não é uma propriedade; é apenas um título.
Semelhantemente, o code><dt> que diz “Nome” não é uma
propriedade; é apenas um rótulo.
↶ Chato
Chato ⇝
<h1>Informações de contato</h1>
<dl>
<dt>Name</dt>
<dd>Mark Pilgrim</dd>
Então onde está a verdadeira informação? Ela está no elemento
<dd>, então é nele que precisamos colocar o atributo
itemprop. Que propriedade é essa? É a propriedade
name. Onde está o valor da propriedade? Ele é o texto dentro
do elemento <dd>. Ele precisa ser marcado? o
modelo de dados microdata da HTML5
diz que não, elementos <dd> não têm processamento
especial, então o valor da propriedade é apenas o texto dentro do
elemento.
↶ Este é meu nome, não use-o por aí
<dd itemprop="name">Mark Pilgrim</dd>[Acompanhe comigo! Antes: person.html, depois: person-plus-microdata.html]
O que acabamos de dizer, traduzindo? O nome “dessa pessoa é Mark Pilgrim.” Bom, Ok então. Adiante.
As próximas duas propriedades são um pouco complicado. Essa é a marcação, pré-microdata:
<dt>Cargo</dt>
<dd>Developer Advocate na Google, Inc.</dd>
Se você olhar na definição do vocabulário Pessoa, o texto “Developer
Advocate na Google, Inc.” na verdade engloba duas propriedades:
title (“Developer Advocate”) e
affiliation (“Google, Inc.”). Como você pode expressar isso
em microdata? A resposta curta é, você não pode. Microdata não tem uma
forma de quebrar textos corridos em propriedades separadas. Você não pode
dizer “os primeiros 18 caracteres desse texto é uma propriedade de
microdata, e os 12 caracteres finais desse texto são outra propriedade
microdata.”
Mas nem tudo está perdido. Imagine que você gostaria de estilizar o texto
“Developer Advocate” em uma fonte diferente do texto “Google, Inc.”
CSS também não consegue fazer isso. Então o que você faria?
Primeiramente você precisaria englobar os diferentes pedaços de texto em
elementos “fictícios”, como <span>, em seguida aplicar
regras CSS diferentes para cada elemento
<span>.
Essa técnica também é útil para microdata. Existem dois pedaços distintos
de informação aqui: um title e um affiliation.
Se você engloba cada pedaço em um elemento
<span> “fictício”, você pode declarar que cada
<span> é uma propriedade microdata separada.
<dt>Cargo</dt>
<dd><span itemprop="title">Developer Advocate</span> na
<span itemprop="affiliation">Google, Inc.<span></dd>[Acompanhe comigo! Antes: person.html, depois: person-plus-microdata.html]
Tada! O título “dessa pessoa é 'Developer Advocate.' Essa pessoa é contratada pela Google, Inc.” Duas sentenças, duas propriedades microdata. Um pouco mais de marcação, mas uma compensação que vale a pena.
A mesma técnica é útil para marcar logradouro. O vocabulário Person define
uma propriedade address, que é um próprio item microdata.
Isso significa que o endenreço tem seu próprio vocabulário
(http://data-vocabulary.org/Address) e define suas próprias
propriedades. O vocabulário Address define 5 propriedades:
street-address, locality, region,
postal-code, e country-name.
Se você é um programador, você provavelmente está familiarizado com notação de ponto para definir objetos e suas propriedades. Pense na relação como esse:
PersonPerson.addressPerson.address.street-addressPerson.address.localityPerson.address.regionPerson.address.postal-codePerson.address.country-name
Nesse exemplo, todo o logradouro está contido em um único elemento
<dd>. (Novamente, o elemento <dt> é
apenas um rótulo, logo ele não desempenha nenhum papel na adição de
semântica com microdata.) Notar a propriedade address é
fácil. Adicione apenas um atributo itemprop no elemento
<dd>.
<dt>Endereço Postal</dt>
<dd itemprop="address">[Acompanhe comigo! Antes: person.html, depois: person-plus-microdata.html]
Mas lembre-se, a propriedade address é propriamente um item microdata.
Isso significa que também precisamos adicionar os atributos
itemscope e itemtype.
<dtEndereço Posta</dt>
<dd itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">[Acompanhe comigo! Antes: person.html, depois: person-plus-microdata.html]
Vemos isso tudo antes, porém para itens de alto nível. Um elemento
<section> define itemtype e
itemscope, e todos elementos dentro do elemento
<section> que definem as propriedades microdata são
“escopadas” dentro desse vocabulário específico. Mas esse é o primeiro
caso que vemos escopos aninhados — definir um novo
itemtype e itemscope (no elemento
<dd>) dentro de um já existente (no elemento
<section>). Esse escopo aninhado funciona exatamente
como o DOM HTML. O elemento
<dd> tem um certo número de elementos filho, todos que
estão no escopo do vocabulário definido no elemento
<dd>. Uma vez que o elemento <dd> é
fechado com uma tag </dd> correspondente, o escopo
reverte para o vocabulário definido pelo elemento pai
(<section>, nesse caso).
As propriedades do Address sofrem o mesmo problema que nós encontramos com
as propriedades title e affiliation. Existe apenas um longo texto corrido, porém nós queremos quebrá-lo em
cinco propriedades microdata separadas. A solução é a mesma: englobe cada
pedaço destinto de informação é um elemento
<span> fictício, em seguida declare propriedades
microdata em cada elemento <span>.
<dd itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">100 Main Street</span><br>
<span itemprop="locality">Anytown</span>,
<span itemprop="region">PA</span>
<span itemprop="postal-code">19999</span>
<span itemprop="country-name">USA</span>
</dd>
</dl>[Acompanhe comigo! Antes: person.html, depois: person-plus-microdata.html]
Traduzindo: “Esta pessoa tem um endereço postal. O logradouro parte do endereço postal é '100 Main Street.' A localidade é 'Anytown.' A região é 'PA.' O código postal é '19999.' O nome do país é 'USA.'” Extremamente simples.
☞P: Esse formato de endereço postal é específico dos EUA?
R: Não. As propriedades do vocabulário Address são genéricas o suficiente que podem descrever vários endereços postais do mundo. Nem todo endereço terá os valores para cada propriedade, mas não tem problema. Alguns endereços podem exigir mais de uma “linha” em uma única propriedade, mas sem problemas também. Por exemplo, se o seu endereço postal tem uma rua e um número de suíte, eles podem ir juntos dentro da subpropriedadestreet-address:<p itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"> <span itemprop="street-address"> 100 Main Street Suite 415 </span> ... </p>
Não há nada de mais nessa página “sobre”: uma lista de URLs.
O vocabulário Person tem a propriedade para isso, chamada de
url. A propriedade url pode ser qualquer coisa,
de verdade. (Bem, ela deve ser uma URL, mas você
provavelmente já adivinhou isso.) O que quero dizer é que a propriedade
url é vagamente definida. A propriedade pode ser qualquer
tipo de URL que você queira associar a uma pessoa: um blog,
uma galeria de fotos, ou um perfil em um outro site como Facebook ou
Twitter.
Outra coisa importante de notar aqui é que uma única pessoa pode ter
várias propriedades url. Tecnicamente, qualquer propriedade
pode aparecer mais de uma vez, mas até agora, não tiramos proveito disso.
Por exemplo, poderíamos ter duas propriedades photo, cada uma
apontando para uma URL de imagem diferente. Aqui, gostaria de
listar quatro URLs diferentes: meu blog, meu perfil do
Google, meu perfil de usuário no Reddit, e minha conta no Twitter. Na
HTML, está uma lista de links: quatro elementos
<a>, cada um em seu próprio elemento
<li>. Em microdata, cada elemento
<a> leva um atributo itemprop="url".
<h1>Meus rastros digitais</h1>
<ul>
<li><a href="http://diveintomark.org/"
itemprop="url">blog</a></li>
<li><a href="http://www.google.com/profiles/pilgrim"
itemprop="url">Perfil do Google</a></li>
<li><a href="http://www.reddit.com/user/MarkPilgrim"
itemprop="url">Perfil do Reddit.com</a></li>
<li><a href="http://www.twitter.com/diveintomark"
itemprop="url">Twitter</a></li>
</ul>
De acordo com o
modelo de dados microdata da HTML5, elementos <a> tem processamento especial. O valor da
propriedade microdata é o atributo href, não o conteúdo
textual filho. O texto de cada link é na verdade ignorado pelo processador
microdata. Assim, traduzindo, isso quer dizer “Essa pessoa tem uma
URL no http://diveintomark.org/. Essa pessoa tem
outra URL no
http://www.reddit.com/user/MarkPilgrim. Ela tem outra
URL no http://www.twitter.com/diveintomark.”
Quero voltar atrás apenas um momento e perguntar, “Por que estamos fazendo isso?” Estamos adicionando semântica apenas por questão de adicionar semântica? Não me leve a mal; Gosto de mexer com colchetes tanto quanto o internauta ao lado. Mas por que microdata? Por que se preocupar?
Existem duas principais classes de aplicações que consomem HTML, e por extensão, HTML5 microdata:
Para navegadores, HTML5 define um conjunto de APIs DOM para extrair itens microdata, propriedades, e valores de propriedades de uma página web. No momento que escrevo (Fevereiro 2011), nenhum navegador suporta essa API. Nenhuma delas. Então, isso é… uma espécie de beco sem saída, pelo menos até os navegadores pegarem e implementarem as APIs no lado do cliente.
Outro grande consumidor de HTML são os motores de busca. O que poderia um motor de busca fazer com propriedades microdata sobre uma pessoa? Imagine isso: em vez de simplesmente exibir o título da página e um resumo de texto, o motor de busca poderia integrar algumas das informações estruturadas e mostrá-las. Nome completo, cargo, empregador, talvez até uma miniatura da foto de um perfil. Isso chamaria sua atenção? Isso chamaria a minha.
Google apoia microdata como parte de seu programa
Rich Snippets. Quando web crawler do Google analisa sua página e encontra propriedades
microdata que obedecem ao vocabulário
http://data-vocabulary.org/Person, ele analisa essas
propriedades e armazena elas juntamente com o restante dos dados da
página. Google ainda oferece
uma ferramenta útil para ver como o Google “enxerga” suas propriedades
microdata.
Item Type: http://data-vocabulary.org/person photo = https://diveintohtml5.com.br/examples/2000_05_mark.jpg name = Mark Pilgrim title = Defensor do Desenvolvedor affiliation = Google, Inc. address = Item( 1 ) url = http://diveintomark.org/ url = http://www.google.com/profiles/pilgrim url = http://www.reddit.com/user/MarkPilgrim url = http://www.twitter.com/diveintomark Item 1 Type: http://data-vocabulary.org/address street-address = 100 Main Street locality = Anytown region = PA postal-code = 19999 country-name = USA
Está tudo lá: a propriedade photo do atributo
<img src>, todas as quatro URLs da lista
de atributos <a href>, até o objeto endereço (listado
como “Item 1”) e todos suas cinco subpropriedades.
E como o Google usa toda essa informação? Isso depende. Não há regras rápidas e rígidas sobre como as propriedades microdata devem ser exibidas, qual delas devem ser exibida, ou se todas elas devem ser exibida. Se alguém buscar por “Mark Pilgrim,” e o Google determina que essa página “sobre” deve ser ranqueado nos resultados, e o Google decide que aquela propriedade microdata originalmente encontrados na página valem exibição, então o resultado de busca deve parecer algo parecido com isto: s
Sobre Mark Pilgrim
Anytown PA - Defensor do Desenvolvedor - Google, Inc.
Trecho da página aparecerá aqui.
Trecho da página aparecerá aqui.
diveintohtml5.com.br/examples/person-plus-microdata.html - Cached - Páginas similares
A primeira linha, “Sobre Mark Pilgrim,” é na verdade o título da página,
dado no elemento <title>. Isso não é terrivelmente
maravilhoso; Google faz isso para todas as páginas. Mas a segunda linha é
cheia de informação tirada diretamente das anotações microdata que
adicionamos à página. “Anytown PA” foi parte do
endereço postal, marcado com o vocabulário
http://data-vocabulary.org/Address. “Defensor do
Desenvolvedor” e “Google, Inc.” foram duas propriedades do vocabulário
http://data-vocabulary.org/Person (title e
affiliation, respectivamente).
Isso realmente é bastante surpreendente. Você não precisa ser uma grande empresa fazendo negócios especiais com os fornecedores de motores de busca para customizar suas listagens no resultado de busca. Apenas tire dez minutos e adicione alguns atributos da HTML para anotar os dados que você já estava publicando de qualquer forma.
☞P: Fiz tudo que você falou, mas minha listagem no resultado de busca no Google não apresenta nenhuma diferença. O que houve?
R: “Google não garante que marcação em qualquer página ou site será usada nos resultados de busca.” Mas, mesmo se o Google decidisse não usar suas anotações microdata, outro motor busca pode usá-las. Como o resto da HTML5, microdata é um padrão aberto que qualquer um pode implementar. É seu trabalho fornecer o máximo de informação possível. Deixe o resto do mundo decidir o que fazer com isso. Eles podem lhe surpreender!
❧
Microdata não está limitado a um único vocabulário. Páginas “Sobre” são legais, mas você tem provavelmente apenas uma dela. Ainda sedento por mais?
Aqui está uma página exemplo de listagens de empresas. Vamos olhar para a marcação HTML original, sem microdata.
<article>
<h1>Google, Inc.</h1>
<p>
1600 Amphitheatre Parkway<br>
Mountain View, CA 94043<br>
USA
</p>
<p>650-253-0000</p>
<p><a href="http://www.google.com/">Google.com</a></p>
</article>[Acompanhe comigo! Antes: organization.html, depois: organization-plus-microdata.html]
Curto e suave. Toda a informação sobre a organização está contida dentro
do elemento <article>, então vamos começar por aqui.
<article itemscope itemtype="http://data-vocabulary.org/Organization">
Tal como com marcando “people”, você precisa
configurar os atributos itemscope e itemtype no
elemento externo. Nesse caso, o elemento externo é o elemento
<article>; O atributo itemtype declara o
vocabulário microdata que você está usando (nesse caso,
http://data-vocabulary.org/Organization), e o atributo
itemscope declara que todas as propriedades que você
configura em elementos filho relacionados a esse vocabulário.
Então o que está dentro do vocabulário “Organization”? É simples e direto. Na verdade, alguns deles já deve parecer familiar.
| Propriedade | Descrição |
|---|---|
name |
O nome da empresa (por exemplo, “Initech”) |
url |
Link para a página da empresa |
address |
A localização da empresa. Pode conter as subpropriedades
street-address, locality,
region, postal-code, e
country-name.
|
tel |
O número do telefone da empresa |
geo |
Especifica as coordenadas geográficas da localização. Sempre contém
duas subpropriedades, latitude e
longitude.
|
O primeiro pedaço de marcação dentro do elemento externo
<article> é um <h1>. Esse elemento
<h1> contém o nome de uma empresa, então vamos colocar
um atributo itemprop="name" diretamente no elemento
<h1>.
<h1 itemprop="name">Google, Inc.</h1>[Acompanhe comigo! Antes: organization.html, depois: organization-plus-microdata.html]
De acordo com o
modelo de dados microdata da HTML5, elementos <h1> não precisam de nenhum processamento
especial. O valor da propriedade microdata é simplesmente o conteúdo
textual do elemento <h1>. Traduzindo, acabamos de dizer
“o nome da empresa é 'Google, Inc.'”
Próximo é um logradouro. Marcar endereço de uma empresa funciona
exatamente da mesma forma como
marcar o endereço de um pessoa. Primeiro, adicione
um atributo itemprop="address" no elemento externo do
endereço (nesse caso, um elemento <p>). Que indica que
esta é a propriedade address da “Organization”. Mas e as
propriedades do próprio endereço? Também precisamos definir os atributos
itemtype e itemscope para dizer que esse é um
item Address que tem suas próprias propriedades.
<p itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">[Acompanhe comigo! Antes: organization.html, depois: organization-plus-microdata.html]
Finalmente, precisamos englobar cada parte distinta de informação em um
elemento simulado <span> assim podemos adicionar o nome
apropriado da propriedade microdata (street-address,
locality, region, postal-code, e
country-name) em cada elemento <span>.
<p itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">1600 Amphitheatre Parkway</span><br>
<span itemprop="locality">Mountain View</span>,
<span itemprop="region">CA</span>
<span itemprop="postal-code">94043</span><br>
<span itemprop="country-name">USA</span>
</p>[Acompanhe comigo! Antes: organization.html, depois: organization-plus-microdata.html]
Traduzindo, acabamos de dizer “Essa empresa tem um endereço. A parte de logradouro é '1600 Amphitheatre Parkway'. A localidade é 'Mountain View'. A parte da região é 'CA'. O código postal é '94043'. O nome do país é 'USA'.”
Em seguida: um número de telefone para a empresa. Números de telefone são notoriamente complicados, e a sintaxe exata é específica da localização. (E se você gostaria de ligar para outro lugar, é ainda pior.) Nesse exemplo, temos um número de telefone dos Estados Unidos, em um formato adequado para ligar de qualquer lugar nos Estados Unidos.
<p itemprop="tel">650-253-0000</p>[Acompanhe comigo! Antes: organization.html, depois: organization-plus-microdata.html]
(Ei, caso você não tenha percebido, o vocabulátio Address saiu do escopo
quando seu elemento <p> foi fechado. Agora estamos
voltando a definir propriedades no vocabulário Organization.)
Se você gostaria de listar mais de um número de telefone — talvez um para clientes dos Estados Unidos e outro para clientes internacionais — você pode fazer isso. Qualquer propriedade microdata pode ser repetida. Apenas certifique-se que cada número de telefone está em seu próprio elemento HTML, separado de qualquer rótulo que você tenha dado a ele.
<p>
US customers: <span itemprop="tel">650-253-0000</span><br>
UK customers: <span itemprop="tel">00 + 1* + 6502530000</span>
</p>
De acordo com o
modelo de dados microdata da HTML5, nem o elemento <p> nem o elemento
<span> tem processamento especial. O valor da
propriedade microdata tel é apenas o conteúdo textual. O
vocabulário microdata Organization não faz nenhuma tentativa de subdividir
as diferentes partes de um número de telefone. A propriedade
tel inteira é apenas texto aberto. Se você quiser colocar
código de área em parênteses, ou usar espaços em vez de traços para
separar os números, você pode fazer isso. Se o cliente consumidor de
microdata quiser transformar o número de telefone, isso fica inteiramente
a cargo deles.
Seguindo, temos outra propriedade familiar: url. Assim como
associar uma URL com uma Person,
você pode associar uma URL com uma empresa. Isso pode ser a
página da empresa, uma página de contato, or qualquer outra coisa. Se for
uma URL sobre, da, ou pertencente a empresa, marque-a com um
atributo itemprop="url".
<p><a itemprop="url" href="http://www.google.com/">Google.com</a></p>[Acompanhe comigo! Antes: organization.html, depois: organization-plus-microdata.html]
De acordo com o
modelo de dados microdata da HTML5, o elemento <a> tem processamento especial. O valor
da propriedade microdata é o valor do atributo href, não o
texto do link. Traduzindo, isso quer dizer “essa empresa é associada com a
URL http://www.google.com/.” Isso não diz nada
mais específico sobre a associação, e não inclui o texto do link
“Google.com.”
Finalmente, gostaria de falar sobre geolocalização. Não, não é a API W3C de Geolocalização. Se trata de como marcar a localização física de uma empresa, usando microdata.
Até o momento, todos os nossos exemplos têm-se focado na marcação de dados
visíveis. Isto é, você tem um <h1> com um nome
de uma empresa, então você adiciona um atributo itemprop no
elemento <h1> para declarar que o título textual
(visível) é, na verdade, o nome de uma empresa. Ou você tem um elemento
<img> que aponta para uma foto, então você adiciona um
atributo itemprop no elemento <img> para
declarar que a imagem (visível) é a foto de uma pessoa.
Nesse exemplo, informação de geolocalização não é assim. Não há texto visível que mostra a exata latitude e longitude (com quatro casas decimais!) da empresa. Na verdade, o exemplo organization.html (sem microdata) não tem nenhuma informação de geolocalização. Tem um link para o Google Maps, mas até mesmo a URL desse link não contém as coordenadas de latitude e longitude. (Ele contém informações semelhantes num formato específico do Google.) Porém, mesmo se tivéssemos um link para um hipotético serviço online de mapas que pegasse as coordenadas de latitude e longitude como parâmetros da URL, microdata não tem como separar diferentes partes de uma URL. Você não pode declarar que o primeiro parâmetro query da URL é a latitude e o segundo parâmetro query da URL é a longitude e o resto dos parâmetros são irrelevantes.
Para lidar com casos extremos como este, HTML5 fornece uma maneira de anotar dados invisíveis. Essa técnica deve ser usada apenas como último recurso. Se existir uma forma de mostrar ou processar os dados que você se importa com, você deve fazer assim. Dados invisíveis que apenas máquinas podem ler tendem a “banalizar-se” rapidamente. Isto é, alguém chegará mais tarde e atualizará o texto visível mas esquecerá de atualizar as informações invisíveis. Isso acontece com mais frequência do que você pensa, e isso vai acontecer com você também.
Ainda, existem casos que dado invisível é inevitável. Talvez o seu chefe queira realmente informação de geolocalização legível para máquina mas não queira bagunçar a interface com pares de incompreensíveis números de seis dígitos. Dado invisível é a única opção. A única salvação aqui é que você pode colocar a informação invisível imediatamente depois do texto visível que o descreve, o que pode ajudar a pessoa que vem mais tarde e atualiza o texto visível que eles precisam atualizar a informação invisível logo depois disso.
Nesse exemplo, podemos criar elemento simulado
<span> dentro do mesmo elemento
<article> como todas outras propriedades da empresa, em
seguida colocar o dado de geolocalização invisível dentro do elemento
<span>.
<span itemprop="geo" itemscope
itemtype="http://data-vocabulary.org/Geo">
<meta itemprop="latitude" content="37.4149" />
<meta itemprop="longitude" content="-122.078" />
</span>
</article>[Acompanhe comigo! Antes: organization.html, depois: organization-plus-microdata.html]
Informação de geolocalização é definida em seu próprio vocabulário, como
o endereço de uma pessoa ou empresa. Portanto, esse
elemento <span> precisa de três atributos:
itemprop="geo" diz que o elemento representa a propriedade
geo da “Organization” ao redor
itemtype="http://data-vocabulary.org/Geo" diz que
vocabulário microdata essas propriedades do elemento estão em
conformidade
itemscope diz que esse elemento é o elemento delimitador
para um item microdata com seu próprio vocabulário (dado no atributo
itemtype). Todas as propriedades dentro desse elemento são
propriedades de http://data-vocabulary.org/Geo, não a do em
torno http://data-vocabulary.org/Organization.
A próxima grande questão que esse exemplo responde é, “Como você anota
dado invisível?” Você usa o elemento <meta>. Nas
versões anteriores da HTML, você poderia usar apenas o
elemento <meta> dentro do
<head> de sua página. Na HTML5, você pode usar o elemento
<meta> em qualquer lugar. E é exatamente isso que
estamos fazendo aqui.
<meta itemprop="latitude" content="37.4149" />[Acompanhe comigo! Antes: organization.html, depois: organization-plus-microdata.html]
De acordo com o
modelo de dados microdata da HTML5, o elemento <meta> tem processamento especial. O
valor da propriedade microdata é o atributo content. Já que
esse atributo nunca é visivelmente mostrado, temos a configuração perfeita
para quantidades ilimitadas de dados invisíveis. Com grandes poderes vem
grandes responsabilidades. Nesse caso, a responsabilidade é sua de
certifica-se de que esse dado invisível fique sincronizado com o texto
visível em volta dele.
Não há suporte direto para o vocabulário Organization no Google Rich Snippets, então não tenho nenhum bom exemplo de listagem no resultado de busca para mostrá-lo. Mas as organizações aparecem fortemente nos próximos dois estudos de caso: eventos e revisões, e essas são suportadas pelo Google Rich Snippets.
❧
Merdas aconteces. Algumas merdas acontecem em pré-determinadas vezes. Não seria legal se você pudesse dizer aos motores de busca exatamente quando a merda estava prestes a acontecer?
Vamos começar olhando para um cronograma exemplo de amostra das minhas palestras.
<article>
<h1>Google Developer Day 2009</h1>
<img width="300" height="200"
src="https://diveintohtml5.com.br/examples/gdd-2009-prague-pilgrim.jpg"
alt="[Mark Pilgrim at podium]">
<p>
Google Developer Day é uma chance de aprender sobre o desenvolvimento dos produtos Google pelos engenheiros que os constroem. Essa conferência de um dia inclui seminários e “horário de trabalho” em tecnologias web como Google Maps, OpenSocial, Android, APIs AJAX, Chrome, e Google Web Toolkit.
</p>
<p>
<time datetime="2009-11-06T08:30+01:00">2009 November 6, 8:30</time>
–
<time datetime="2009-11-06T20:30+01:00">20:30</time>
</p>
<p>
Congress Center<br>
5th května 65<br>
140 21 Praha 4<br>
Czech Republic
</p>
<p><a href="http://code.google.com/intl/cs/events/developerday/2009/home.html">GDD/Prague home page</a></p>
</article>[Acompanhe comigo! Antes: event.html, depois: event-plus-microdata.html]
Toda informação sobre o evento está contida dentro do elemento
<article>, então é nele que precisamos colocar os
atributos itemtype e itemscope.
<article itemscope itemtype="http://data-vocabulary.org/Event">[Acompanhe comigo! Antes: event.html, depois: event-plus-microdata.html]
A URL para o vocabuário Event é
http://data-vocabulary.org/Event, que ocorre de conter também um pequeno bonito gráfico descrevendo as
propriedades do vocabulário. E o que são essas propriedades?
| Propriedade | Descrição |
|---|---|
summary |
O nome do evento |
url |
Link para a página de detalhes do evento |
location |
A localização ou lugar do evento. Pode opcionalmente ser representado por um Organization ou Address aninhado. |
description |
Uma descrição do evento |
startDate |
A data e hora inicial do evento no foramato de data ISO |
endDate |
A data e hora final do evento no foramato de data ISO |
duration |
A data de duração no formato de duração ISO |
eventType |
A categoria do evento (por exemplo, “Show” ou “Palestra”). Esta é uma string de forma livre, não um atributo enumerado. |
geo |
Especifica as coordenadas geográficas da localização. Sempre contém
duas subpropriedades, latitude e
longitude.
|
photo |
Um link para uma foto ou imagem relacionada ao evento |
O nome do evento está em um elemento <h1>.
De acordo com o
modelo de dados microdata da HTML5, elementos <h1> não tem processamento especial. O
valor da propriedade microdata é apenas o conteúdo textual do elemento
<h1>. Tudo que precisamos adicionar é o atributo
itemprop para declarar que esse elemento
<h1> contém o nome do evento.
<h1 itemprop="summary">Google Developer Day 2009</h1>[Acompanhe comigo! Antes: event.html, depois: event-plus-microdata.html]
Traduzindo, isso quer dizer, “O nome desse evento é Google Developer Day 2009.”
Essa listagem de evento tem uma foto, que pode ser marcada com uma
propriedade photo. Como você poderia esperar, a foto já está
marcada com um elemento <img>. Como
a propriedade photo no vocabulário Person, uma foto de um evento é uma URL. Já que o
modelo de dados microdata da HTML5
diz que o valor da propriedade de um elemento
<img> está em seu atributo src, a única
coisa que precisamos fazer é adicionar o atributo itemprop no
elemento <img>.
<img itemprop="photo" width="300" height="200"
src="https://diveintohtml5.com.br/examples/gdd-2009-prague-pilgrim.jpg"
alt="[Mark Pilgrim no pódio]">[Acompanhe comigo! Antes: event.html, depois: event-plus-microdata.html]
Traduzindo, isso quer dizer, “A foto para esse evento está aqui
https://diveintohtml5.com.br/examples/gdd-2009-prague-pilgrim.jpg.”
Em seguida está uma descrição mais longa do evento, que é apeanas um parágrafo de texto livre.
<p itemprop="description">Google Developer Day é uma chance de aprender sobre o desenvolvimento dos produtos Google pelos engenheros que os constroem. Essa conferência de um dia inclui seminários e “horário de trabalho” em tecnologias web como Google Maps, OpenSocial, Android, APIs AJAX, Chrome, e Google Web Toolkit.</p>[Acompanhe comigo! Antes: event.html, depois: event-plus-microdata.html]
O próximo pedaço é algo novo. Eventos geralmente ocorrem em datas
específicas e começam e terminam em horas específicas. Na
HTML5, data e hora deve ser marcada com
o elemento <time>, e já estamos fazendo isso aqui. Então fica a questão, como adicionamos
propriedades microdata nesses elementos <time>? Olhando
atrás no
modelo de dados microdata da HTML5, vemos que o elemento <time> tem processamento
especial. O valor da propriedade microdata em um elemento
<time> é o valor do atributo datetime. E
olhe, as propriedades startDate e endDate do
vocabulário Event leva um estilo de data ISO, assim como a
propriedade datetime de um elemento
<time>. Mais uma vez, a semântica do principal
vocabulário HTML se encaixa muito bem com a semântica de
nosso vocabulário microdata personalizado. Marcar data inicial e final com
microdata é tão simples como:
<time> para marcar data e hora), e
itemprop <p>
<time itemprop="startDate" datetime="2009-11-06T08:30+01:00">2009 November 6, 8:30</time>
–
<time itemprop="endDate" datetime="2009-11-06T20:30+01:00">20:30</time>
</p>[Acompanhe comigo! Antes: event.html, depois: event-plus-microdata.html]
Traduzindo, isso quer dizer, “Esse evento começa em 6 de Novembro, 2009, às 8:30 da manhã, e vai até 6 de Novembro, 2009, às 20:30 (horário local para Prague, GMT+1).”
Em seguida está a propriedade location. A
definição do vocabulário Event
diz que isso pode ser tanto uma “Organization” ou um “Address”. Nesse
caso, o evento está sendo realizado em um local especializado em
conferências, o Congress Center in Prague. Marcar isso como uma
“Organization” nos permite incluir o nome do local, bem como seu endereço.
Primeiro, vamos declarar que o elemento <p> que contém
o endereço é a propriedade location do evento, e que esse
elemento é também seu próprio item microdata que está em conformidade com
o vocabulário http://data-vocabulary.org/Organization
<p itemprop="location" itemscope
itemtype="http://data-vocabulary.org/Organization">[Acompanhe comigo! Antes: event.html, depois: event-plus-microdata.html]
Depois, marcar o nome da empresa através de um elemento
<span> externo e adicionar um atributo
itemprop no elemento <span>.
<span itemprop="name">Congress Center</span><br>[Acompanhe comigo! Antes: event.html, depois: event-plus-microdata.html]
Devido as regras microdata de escopo, esse
itemprop="name" está definindo uma propriedade no vocabulário
Organization, não no vocabulário Event. O elemento
<p> definido no começo do escopo das propriedades
Organization, e que elemento <p> não foi fechado ainda
com uma tag </p>. Qualquer propriedade microdata que
definimos aqui são propriedades do mais recente vocabulário com escopo.
Vocabulários aninhadas são como uma
pilha.
Não desempilhamos ainda, então ainda estamos falando sobre propriedades da
“Organization”.
Na verdade, vamos adicionar um terceiro vocabulário na pilha: um “Address” da “Organization” para o “Event”.
<span itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">[Acompanhe comigo! Antes: event.html, depois: event-plus-microdata.html]
Mais uma vez, queremos marcar cada pedaço de um endereço como uma
propriedade microdata separada, então precisamos uma série de elementos
<span> fictícios para pendurar nossos atributos
itemprop dentro. (Se estou indo muito rápido para você aqui,
volte e leia sobre
marcando o endereço de uma pessoa e
marcando o endereço de uma empresa.)
<span itemprop="street-address">5th května 65</span><br>
<span itemprop="postal-code">140 21</span>
<span itemprop="locality">Praha 4</span><br>
<span itemprop="country-name">Czech Republic</span>[Acompanhe comigo! Antes: event.html, depois: event-plus-microdata.html]
Não existem mais propriedades do Address, então fechamos o elemento
<span> que começou o escopo Address, e desempilhamos.
</span>
Não existe mais propriedades da “Organization”, então fechamos o elemento
<p> que começou o escopo Organization, e desempilhamos
novamente.
</p>
Agora voltamos para definir propriedades no evento. A próxima propriedade
é geo, para representar a localização física do evento. Ela
usa o mesmo vocabulário Geo que usamos para
marcar a localização fisica de uma empresa na seção
anterior. Precisamos de um elemento <span> para agir
como um container; ele leva os atributos itemtype e
itemscope. Dentro desse elemento <span>,
precisamos de dois elementos <meta>, um para a
propriedade latitude e outro para a propriedade
longitude.
<span itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">
<meta itemprop="latitude" content="50.047893" />
<meta itemprop="longitude" content="14.4491" />
</span>[Acompanhe comigo! Antes: event.html, depois: event-plus-microdata.html]
E fechamos o <span> que guardava as propriedades Geo,
então estamos voltando a definir propriedades do evento. A última
propriedade é a propriedade url, que deve parecer familiar.
Associar uma URL com um evento funciona da mesma forma que
associar uma URL com uma pessoa e
associar uma URL com uma empresa. Se você está usando HTML corretamente (marcando hyperlinks
com <a href>), então declarar que o hyperlink é uma
propriedade url microdata é uma simples questão de adicionar
o atributo itemprop.
<p>
<a itemprop="url"
href="http://code.google.com/intl/cs/events/developerday/2009/home.html">
GDD/Prague home page
</a>
</p>
</article>[Acompanhe comigo! Antes: event.html, depois: event-plus-microdata.html]
A página de evento exemplo também lista um segundo evento, minha palestra no ConFoo Conference em Montréal. Para ser breve, não vou passar por essa marcação linha a linha. É essencialmente o mesmo que o evento em Prague: um item Event com itens Geo e Address aninhados. Estou mencionando apenas de passagem para recordar que uma única página pode ter vários eventos, cada um marcado com microdata.
De acordo com a ferramenta de teste do Google Rich Snippets, essa é a informação que os rastreadores do Google vão imprimir do nosso exemplo de eventos na página de listagem:
Item
Type: http://data-vocabulary.org/Event
summary = Google Developer Day 2009
eventType = conference
photo = https://diveintohtml5.com.br/examples/gdd-2009-prague-pilgrim.jpg
description = Google Developer Days é uma chance de aprender sobre o desenvolvimento dos produtos Google pelos engenheros que os constrói. Essa conferência de um dia inclui seminários e “horário de trabalho” em tecnologias web como Goo..
startDate = 2009-11-06T08:30+01:00
endDate = 2009-11-06T20:30+01:00
location = Item(__1)
geo = Item(__3)
url = http://code.google.com/intl/cs/events/developerday/2009/home.html
Item
Id: __1
Type: http://data-vocabulary.org/Organization
name = Congress Center
address = Item(__2)
Item
Id: __2
Type: http://data-vocabulary.org/Address
street-address = 5th května 65
postal-code = 140 21
locality = Praha 4
country-name = Czech Republic
Item
Id: __3
Type: http://data-vocabulary.org/Geo
latitude = 50.047893
longitude = 14.4491
Como você pode ver, toda informação que adicionamos no microdata está lá.
Propriedades que são itens separados de microdata recebem
IDs internos (Item(__1),
Item(__2) e assim por diante). Isso não faz parte da
especificação microdata. É apenas uma convenção que ferramentas de teste
do Google usam para linearizar a saída de exemplo e mostrar-lhe o
agrupamento de itens aninhados e suas propriedades.
Aqui está como Google pode escolher representar essa página exemplo em seus resultados de busca. (Novamente, tenho que introduzir isso com o aviso que isso é apenas um exemplo. Google pode mudar o formato dos seus resultados de busca a qualquer momento, e não há garantia que o Google vai prestar atenção em sua marcação microdata. Desculpa parecer uma recordação chata, mas nossos advogados me fazem dizer essas coisas.)
Calendário de Eventos de Mark Pilgrim
Trecho da página aparecerá aqui.
Trecho da página aparecerá aqui.
Google Developer Day 2009 Fri, Nov 6 Congress Center, Praha 4, Czech Republic ConFoo.ca 2010 Wed, Mar 10 Hilton Montreal Bonaventure, Montréal, Québec, Canada diveintohtml5.com.br/examples/event-plus-microdata.html - Cached - Páginas similares
Após o título da página e o auto-gerado texto resumido, o Google começa
usar a marcação microdata que adicionamos na página para mostrar uma
pequena tabela de eventos. Observe o formato de data: “Fri, Nov 6.” Isso
não é uma string que apareceu em algum lugar do nosso HTML ou
marcação microdata. Usamos duas completamentes qualificadas strings
formatadas ISO. 2009-11-06T08:30+01:00 e
2009-11-06T20:30+01:00. Google pegou essas duas datas,
descobriu que se tratava do mesmo dia, e decidiu mostrar uma única data em
um formato mais amigável.
Agora olhe para o endereço físico. Google escolheu mostrar apenas o nome
do local + localização + país, não exatamente o logradouro. Isso é
possível pelo fato de que nós separamos o endereço em cinco
subpropriedades — name, street-address,
region, locality, e country-name —
e marcamos cada parte do endereço como uma propriedade microdata
diferente. Google se aproveita disso para mostrar um endereço abreviado.
Outros consumidores da mesma marcação microdata podem fazer diferentes
escolhas sobre o que mostrar ou como mostrar isso. Não existe escolha
certa ou errada aqui. Está a seu cargo prover o máximo de informação
possível, o mais fielmente possível. Interpretar isso está a cargo do
resto do mundo.
❧
Aqui está outro exemplo de fazer a web melhor (e possivelmente ser listado no resultado de busca) através de marcação: avaliação de produtos e negócios.
Esse é uma pequena avaliação que escrevi da minha pizzaria favorita perto da minha casa. (A propósito, isso é um restaurante de verdade. Se você alguma vez estiver em Apex, NC, recomendo altamente ele.) Vamos olhar para a marcação original:
<article>
<h1>Anna’s Pizzeria</h1>
<p>★★★★☆ (4 estrelas de 5)</p>
<p>Nova pizza no estilo Nova York logo alí no centro histórico Apex</p>
<p>
A comida é de primeira linha. A atmosfera está alí para a “pizzaria do bairro.”
O restaurante em si é um pouco apertado; se você está acima do peso,
você pode ter dificuldade de entrar e sair de sua cadeira e caminhar entre outras mesas.
Costumava dar gratuitamente “garlic knots” quando você sentava; agora eles lhe dão pão
simples e você tem que pagar pelas coisas boas. No geral, é um vencedor.
</p>
<p>
100 North Salem Street<br>
Apex, NC 27502<br>
USA
</p>
<p>— avaliado por Mark Pilgrim, última atualização 31 de Março, 2010</p>
</article>[Acompanhe comigo! Antes: review.html, depois: review-plus-microdata.html]
Essa avaliação está contida em um elemento <article>,
então é nele que vamos colocar os atributos itemtype e
itemscope. A URL namespace para esse vocabulário
é http://data-vocabulary.org/Review.
<article itemscope itemtype="http://data-vocabulary.org/Review">[Acompanhe comigo! Antes: review.html, depois: review-plus-microdata.html]
Quais são as propriedades disponíveis no vocabulário Review? Estou feliz que você perguntou.
| Propriedade | Descrição |
|---|---|
itemreviewed |
O nome do item que está sendo avaliado. Pode ser um produto, serviço, negócio, entre outros. |
rating |
Uma classificação numérica para o item, em uma escala de 1 até 5.
Pode ser também um vocabulário
http://data-vocabulary.org/Rating aninhado para usar
uma escala diferente do padrão.
|
reviewer |
O nome do autor que escreveu a avaliação |
dtreviewed |
A data que o item foi avaliado no formato de data ISO |
summary |
Um pequeno resumo da avaliação |
description |
O corpo da avaliação |
A primeira propriedade é simples: itemreviewed é apenas
texto, e aqui ele está contido no elemento <h1>, então
é aqui onde devemos colocar o atributo itemprop.
<h1 itemprop="itemreviewed">Anna’s Pizzeria</h1>[Acompanhe comigo! Antes: review.html, depois: review-plus-microdata.html]
Vou pular a classificação real e voltarei a ela no final.
As próximas duas propriedades também são simples. A propriedade
summary é uma pequena descrição do que você está avaliando, e
a propriedade description é o corpo da avaliação.
<p itemprop="summary">Nova pizza no estilo Nova York logo alí no centro histórico Apex</p>
<p itemprop="description">
A comida é de primeira linha. A atmosfera está alí para a “pizzaria do bairro.”
O restaurante em si é um pouco apertado; se você está acima do peso,
você pode ter dificuldade de entrar e sair de sua cadeira e caminhar entre outras mesas.
Costumava dar gratuitamente “garlic knots” quando você sentava; agora eles lhe dão pão
simples e você tem que pagar pelas coisas boas. No geral, é um vencedor.
</p>[Acompanhe comigo! Antes: review.html, depois: review-plus-microdata.html]
As propriedades location e geo não tem nada de
novidade. (Se você está mal sintonizando, confira
marcando o endereço de uma pessoa,
marcando o endereço de uma empresa, e
marcando informação de geolocalização anteriormente
nesse capítulo.)
<p itemprop="location" itemscope
itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">100 North Salem Street</span><br>
<span itemprop="locality">Apex</span>,
<span itemprop="region">NC</span>
<span itemprop="postal-code">27502</span><br>
<span itemprop="country-name">USA</span>
</p>
<span itemprop="geo" itemscope
itemtype="http://data-vocabulary.org/Geo">
<meta itemprop="latitude" content="35.730796" />
<meta itemprop="longitude" content="-78.851426" />
</span>[Acompanhe comigo! Antes: review.html, depois: review-plus-microdata.html]
A linha final representa um problema familiar: ela contém duas partes de
informação de um elemento. O nome do avaliador é
Mark Pilgrim, e a data de avaliação é
31 de March, 2010. Como marcar essas duas propriedades
distintas?
Englobe eles em seus próprios elementos
e coloque um atributo itemprop em cada elemento. Na verdade,
em primero lugar a data nesse exemplo deveria ser marcada com um elemento
<time>, assim isso daria um gancho natural sobre para
pendurar o nosso atributo itemprop. O nome do avaliador pode
ser apenas englobado em um fictício elemento <span>.
<p>— <span itemprop="reviewer">Mark Pilgrim</span>, última atualização
<time itemprop="dtreviewed" datetime="2010-03-31">
31 de Março, 2010
</time>
</p>
</article>[Acompanhe comigo! Antes: review.html, depois: review-plus-microdata.html]
Ok, vamos falar de classificações. A parte mais complicada de marcar uma revisão é a classificação. Por padrão, classificação no vocabulário Review está numa escala de 1–5, 1 sendo “terrível” e 5 sendo “maravilhoso.” Se você quer usar uma escala diferente, você definitivamente pode fazer isso. Mas vamos falar sobre a escala padrão primeiro.
<p>★★★★☆ (<span itemprop="rating">4</span> stars out of 5)</p>[Acompanhe comigo! Antes: review.html, depois: review-plus-microdata.html]
Se você está usando a escala padrão 1–5, a única propriedade que você
precisa marcar é a própria classificação (4, nesse caso). Mas e se você
quiser usar uma escala diferente? Você pode fazer isso; você precisa
declarar os limites da escala que você está usando. Por exemplo, se você
gostaria de usar uma escala de pontos de 0–10, você ainda declararia a
propriedade itemprop="rating", mas em vez de dar o valor da
classificação diretamente, você usaria um vocabulário aninhado de
http://data-vocabulary.org/Rating para declarar o péssimo e o
melhor valor na sua escala customizada e o valor real dentro dessa escala.
<p itemprop="rating" itemscope
itemtype="http://data-vocabulary.org/Rating">
★★★★★★★★★☆
(<span itemprop="value">9</span> numa escala de
<span itemprop="worst">0</span> até
<span itemprop="best">10</span>)
</p>Traduzindo, isso quer dizer “o produto que estou avaliando tem um valor de classificação de 9 em uma escla de 0–10.”
Eu mencionei que a microdata review pode afetar a listagem no resultado de busca? Verdade, ela pode. Aqui estão os “dados puros” que a ferramenta do Google Rich Snippets extraiu da minha avaliação melhorada com microdata:
Item Type: http://data-vocabulary.org/Review itemreviewed = Anna’s Pizzeria rating = 4 summary = Nova pizza no estilo Nova York logo alí no centro histórico Apex description = A comida é de primeira linha. A atmosfera está alí ... address = Item(__1) geo = Item(__2) reviewer = Mark Pilgrim dtreviewed = 2010-03-31 Item Id: __1 Type: http://data-vocabulary.org/Organization street-address = 100 North Salem Street locality = Apex region = NC postal-code = 27502 country-name = USA Item Id: __2 Type: http://data-vocabulary.org/Geo latitude = 35.730796 longitude = -78.851426
E aqui (módulo dos caprichos do Google, a fase da lua, e assim por diante e assim por diante) está como minha avaliação pode aparecer em uma listagem de resultado de busca:
Anna’s Pizzeria: avaliação
★★★★☆ Avaliado por Mark Pilgrim - Mar 31, 2010
Trecho da página aparecerá aqui.
Trecho da página aparecerá aqui..
diveintohtml5.com.br/examples/review-plus-microdata.html - Cached - Páginas similares
Colchetes não me impressionam muito, mas eu tenho que admitir, esse é muito legal.
❧
Microdata resources:
Google Rich Snippets resources:
❧
Isso foi “Distribuído”, “Extensível” e Outras Palavras Bonitas; Consulte o Sumário, caso queira continuar com a leitura.
Em associação a Google Press, O’Reilly está distribuindo este livro em variados formatos, incluindo papel, ePub, Mobi, DRM-free e PDF. A edição paga é chamada “HTML5: Up & Running” e está disponível agora. Este capítulo está incluído na versão paga.
Se você gostou deste capítulo e quer mostrar sua apreciação, basta comprar o livro “HTML5: Up & Running” com esse link afiliado ou comprar a edição eletrônica diretamente da O’Reilly. Você vai ganhar um livro, e eu vou ganhar um trocado. Atualmente, não aceito doações diretas.
Copyright MMIX–MMXI Mark Pilgrim