Fork me on GitHub

Você está aqui: Home Dive Into HTML5


“Distribuído”,
“Extensível,”
e Outras Palavras Bonitas

 

Mergulhando

Existem 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.

O que é Microdata?

Cada palavra na sentença seguinte é importante, então preste atenção.

Professor de Marcação Diz

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.

Modelo de Dados do Microdata

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:

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.

De Onde Vêm as Propriedades Value?
ElementoValor
<meta>Atributo content
  • <audio>
  • <embed>
  • <iframe>
  • <img>
  • <source>
  • <video>
Atributo src
  • <a>
  • <area>
  • <link>
Atributo href
<object>Atributo data
<time>Atributo datetime
Demais elementosConteú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.

Marcando “People”

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="http://diveintohtml5.org/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?

Vocabulário Person
PropriedadeDescrição
nameNome
nicknameApelido
photoUm link de imagem
titleO cargo da pessoa (por exemplo, “Gerente Financeiro”)
roleO papel da pessoa (Por exemplo, “Contador”)
urlLink para uma página web, tal como a página pessoal da pessoa
affiliationO nome da organização com que a pessoa é associada (por exemplo, um empregador)
friendIdentifica uma relação social entre a pessoa descrita e outra pessoa
contactIdentifica uma relação social entre a pessoa descrita e outra pessoa
acquaintanceIdentifica uma relação social entre a pessoa descrita e outra pessoa
addressA 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="http://diveintohtml5.org/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">]

http://diveintohtml5.org/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:

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.

Pergunte ao Professor de Marcação

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 subpropriedade street-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.”

Apresentando o Google Rich Snippets

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:

  1. Navegadores Web
  2. Motores de busca

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 = http://diveintohtml5.org/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.org/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.

Pergunte ao Professor de Marcação

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!

Marcando “Organizations”

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.

Vocabulário Organization
PropriedadeDescrição
nameO nome da empresa (por exemplo, “Initech”)
urlLink para a página da empresa
addressA localização da empresa. Pode conter as subpropriedades street-address, locality, region, postal-code, e country-name.
telO número do telefone da empresa
geoEspecifica 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:

  1. itemprop="geo" diz que o elemento representa a propriedade geo da “Organization” ao redor
  2. itemtype="http://data-vocabulary.org/Geo" diz que vocabulário microdata essas propriedades do elemento estão em conformidade
  3. 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.

Marcando “Events”

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="http://diveintohtml5.org/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>
      &ndash;
    <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?

Vocabulário Event
PropriedadeDescrição
summaryO nome do evento
urlLink para a página de detalhes do evento
locationA localização ou lugar do evento. Pode opcionalmente ser representado por um Organization ou Address aninhado.
descriptionUma descrição do evento
startDateA data e hora inicial do evento no foramato de data ISO
endDateA data e hora final do evento no foramato de data ISO
durationA data de duração no formato de duração ISO
eventTypeA categoria do evento (por exemplo, “Show” ou “Palestra”). Esta é uma string de forma livre, não um atributo enumerado.
geoEspecifica as coordenadas geográficas da localização. Sempre contém duas subpropriedades, latitude e longitude.
photoUm 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="http://diveintohtml5.org/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 http://diveintohtml5.org/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:

  1. Usar HTML corretamente em primeiro lugar (usar elemento <time> para marcar data e hora), e
  2. Adicionar um simples atributo itemprop
  <p>
    <time itemprop="startDate" datetime="2009-11-06T08:30+01:00">2009 November 6, 8:30</time>
      &ndash;
    <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.

O Retorno do Google Rich Snippets

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 = http://diveintohtml5.org/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 2009Fri, Nov 6Congress Center, Praha 4, Czech Republic
ConFoo.ca 2010Wed, Mar 10Hilton Montreal Bonaventure, Montréal, Québec, Canada

diveintohtml5.org/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.

Marcando “Reviews”

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.

Vocabulário Review
PropriedadeDescrição
itemreviewedO nome do item que está sendo avaliado. Pode ser um produto, serviço, negócio, entre outros.
ratingUma 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.
reviewerO nome do autor que escreveu a avaliação
dtreviewedA data que o item foi avaliado no formato de data ISO
summaryUm pequeno resumo da avaliação
descriptionO 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.org/examples/review-plus-microdata.html - Cached - Páginas similares

Colchetes não me impressionam muito, mas eu tenho que admitir, esse é muito legal.

Leitura Complementar

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.

Você sabia?

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