4 декабря 2011 в 22:49

Microdata & the microdata DOM API

Введение

Одной из проблем, на решение которой был направлен HTML5, было повышение логичности (и, следовательно, машиночитаемости) разметки, о чем свидетельствует введение стандартных семантических элементов, таких как <header>, <nav> и <figure>. Это все хорошо, но иногда возникает потребность добавить определенные машиночитаемые атрибуты для элементов контента, так чтобы их можно бы использовать в каком-либо скрипте предсказуемо, даже если разметка используемая для различного контента различается между собой. Эта потребность уже удовлетворена, в определенной степени, с помощью простых и обратно совместимых Микроформатов, и с помощью более эзотерического RDFa.

В связи с этим, нет ничего удивительного, что решение этой проблемы было добавлено в спецификацию HTML5 в виде спецификации микроданных(далее Microdata), включающей в себя набор атрибутов, которые могут быть добавлены к любому элементу и связанное DOM API для обработки/агрегирования микроданных на странице.

Microdata пытается улучшить то, что мы уже имели в прошлом: обеспечить встроенный механизм, который также легко понять, как и микроформаты, и который позволяет обрабатывать данные без необходимости писать свой собственный парсер. Вы, конечно же, можете создать свой собственный парсер Microdata для поддержки в браузерах без нативной поддержки Microdata DOM API, используя JavaScript, если это необходимо. В этой статье мы пройдёмся по HTML-аттрибутам Microdata и синтаксису DOM API.

Примечание: Экспериментальная сборка Opera с поддержкой Microdata может быть найдена тут.

HTML синтаксис

Microdata состоит из набора элементов, каждый из которых имеет набор свойств представленных парами ключ-значение. Собственно, как настоящие web-гики, давайте опишем себя в формате микроданных. Вы можете написать свой собственный пример, по моему образцу.

Примечание: Вы можете проверить правильность синтаксиса Microdata с помощью экспериментально HTML5-валидатора. Также вы можете открыть мой пример использования Microdata и поглядывать на него, пока читаете текст данной статьи.

Прежде всего, мы можем отметить любой подходящий элемент как контейнер элементов, используя itemscope атрибут

<article itemscope>
</article>

Очевидно, что вы должны выбрать элемент содержащий нужные вам данные, при этом, не важно, какие данные вы отмечаете. В данном случае, я размечу карточку биографии: первым свойством будет наше имя, а отметим мы его с помощью аттрибута itemprop:

<article itemscope>
  <h2 itemprop="name">Chris Mills</h2>
</article>

Атрибут itemprop выделяет элемент содержащий данные. Значение атрибута — это имя свойства, а содержимое элемента — это значение свойства. Давайте добавим еще несколько свойств, чтобы убедиться, что вы уловили суть:

<article itemscope>
  <h2 itemprop="name">Chris Mills</h2>
  <ul>
    <li>Nationality: <span itemprop="nationality">British</span></li>
    <li>Age: <span itemprop="age">33</span></li>
    <li>Hair colour: <span itemprop="colour">Brown</span></li>
  </ul>
</article>

В некоторых случаях, значением свойства является не текстовое содержимое элемента, а значение некоторого атрибута у того же элемента. Например:

Для тега <media> значением свойства является значение атрибута «src».
Для тега <a> — значение атрибута «href».
Для тега <time> — значение атрибута «datetime».

(Прим. переводчика: значения других элементов можно посмотреть в спецификации)

С другой стороны, если значением свойства является URL, то оно должно быть выражено через соответствующий элемент, который указывает на или загружает внешний ресурс, например, через элемент <a>. Если значение свойства — дата или время (или оба сразу), то свойство должно быть выражено через элемент <time> и атрибут «datetime». Атрибут itemprop добавляется точно также, но, при этом, значением свойства будет значение атрибута, вместо текстового контента элемента.

Несколько примеров:

<article itemscope>
  <h2 itemprop="name">Chris Mills</h2>
  <p><img itemprop="image" src="Chris-Mills.png" alt="Photo of Chris Mills - this is me"></p>
  <ul>
    <li>Nationality: <span itemprop="nationality">British</span></li>
    <li>Age: <span itemprop="age">33</span></li>
    <li>Date of birth: <time itemprop="birthday" datetime="1978-06-27">June 27th 1978</time></li>
    <li>Hair colour: <span itemprop="colour">Brown</span></li>
  </ul>
</article>

Примечание: На момент публикации этой статьи (10 августа 2011), ведутся разговоры о замене элемента на элемент <data>, поэтому данный пример может потребовать изменений.

Вложенные узлы Microdata

Вы также можете совершенно спокойно внедрять Microdata элементы (Прим. переводчика: далее, чтобы не запутаться в терминах: «узлы Microdata») внутри друг друга. Самый верхний узел Microdata помечается атрибутом itemscope, а затем любые вложенные узлы Microdata также помечаются атрибутом itemscope. Давайте добавим некоторую информацию о своей группе в карточку биографии:

<article itemscope itemtype="http://example.org/biography">

  ...

  <li>
    <div itemscope itemprop="band">
      <h3>My band</h3>
      <ul>
        <li>Name: <span itemprop="name">Conquest of Steel</span></li>
        <li>Band: <span itemprop="style">Heavy metal</span></li>
        <li>Members: <span itemprop="size">5</span></li>
      </ul>
    </div>
  </li>

 ...

</article>

Разные свойства, одно имя; одно свойство, разные имена

Вы можете указать у нескольких элементов одно и тоже название свойства, например:

<li>Members:
  <ul>
    <li itemprop="member">Claymore Clark</li>
    <li itemprop="member">DD Danger</li>
    <li itemprop="member">Dan Durrant</li>
    <li itemprop="member">Chris Mills</li>
    <li itemprop="member">Vic Victory</li>
  </ul>
</li>

Результатом будет узел Microdata с пятью свойствами, все с именем «memeber» и каждое со своим значением.

И наоборот, вы также можете поместить несколько свойств в одном элементе, тем самым давая этим свойствам одинаковое значение:

<li>Band: <span itemprop="style favouritemusic">Heavy metal</span></li>

Указание на свойства вне itemscope элемента

Могут быть случаи, когда вы хотите, чтобы ваши узлы Microdata включали свойства, которые на самом деле определены не в пределах этого пункта(элемента). Вы можете сделать это, ссылаясь на ID внешних свойств внутри атрибута itemref. Рассмотрим следующий пример, в котором я перенёс участников моей группы за пределы моего элемента, в отдельное место в html-разметки:

<article>

  ...

    <li>
      <div itemscope itemprop="band" itemref="members">
        <h3>My band</h3>
        <ul>
          <li>Name: <span itemprop="name">Conquest of Steel</span></li>
          <li>Band: <span itemprop="style">Heavy metal</span></li>
          <li>Members: <span itemprop="bandsize">5</span></li>
        </ul>
      </div>
    </li>
  </ul>
</article>
    
   <ul id="members">
      <li itemprop="member">Claymore Clark</li>
      <li itemprop="member">DD Danger</li>
      <li itemprop="member">Dan Durrant</li>
      <li itemprop="member">Chris Mills</li>
      <li itemprop="member">Vic Victory</li>
    </ul>

В этом случае «member» свойства находятся внутри элемента с идентификатором на который ссылается атрибут itemref нашего Microdata пункта.

Примечание: Вы можете указать несколько ID в атрибуте itemref  разделённых символом пробела. Например: itemref="members instruments  gigdates"

Определение словаря свойств для узлов Microdata, которые могут быть использованы в дальнейшем

Всё хорошо, пока вы используете свою Microdata разметку сами — вы сами определяете набор свойств для ваших узлов Microdata. Но, при совместной работе с другими веб-разработчиками возникает необходимость в определении словаря свойство для определённого узла Microdata. Вы можете сделать это, указав каждому узлу тип, используя itemtype атрибут. Значение этого атрибута имеет форму URL, ресурс на который ссылается данный URL может существовать, а может и не существовать. Хорошо, если вы указываете URL на реальную страницу в Интернете, которая информирует других пользователей о словаре свойств, но вы не обязаны этого делать.

Вернемся к нашему примеру:

<article itemscope itemtype="http://example.org/biography">
  ... 
  <div itemscope itemprop="band" itemtype="http://example.org/band" itemref="members"> 
    ... 
  </div> 
  ...
</article>

Узел Microdata может иметь только один тип, а тип определяет словарь свойств. Таким образом, в нашем примере, элемент типа example.org/biography имеет четыре свойства — name, style, bandsize и member. Это помогает избежать путаницы с аналогичным названием свойства. Можно также использовать Microdata для разметки информации о присяжных в суде, с аналогичным свойством itemprop=«member», но это будет другое свойство, т.к. узел Microdata имеет другой itemtype — «example.org/jury», или любой другой по вашему выбору.

Вы должны хорошо подумать, какой словарь свойств вы будете использовать, чтобы выбрать надежный, гибкий и расширяемый: для получения дополнительной информации и советов, читайте раздел спецификации Выбор имен при определении словарей. Вы также должны поискать в вебе, может быть кто-то уже написал подходящий словарь для ваших целей. Посмотрите раздел спецификации словари Microdata для получения информации о существующих словарях, перенесенных из микроформатов, таких как vCard и vEvent.

Назначение глобального идентификатора для узла Midrodata

Некоторые вещи уже имеют идентификатор назначенный по мировым соглашениям об идентификаторах, таких как ISBN для книг и UPC для продуктов в магазине. Некоторые словари Microdata поддерживают такие идентификаторы (вы должны сами выяснять такие вопросы, именно поэтому мы рекомендуем при написании собственных словарей свойств документировать их по URL-адресу указанному в атрибуте itemtype). Если вы используете подобные идентификаторы, укажите его в атрибуте itemid в том же элементе, где вы указали itemscope и itemtype. Кроулер или поисковый движок, который понимает подобную разметку (пока таких нету) поймёт, что ваш контент — это тот же ISBN/UPC объект, как и любой другой контент с каким же itemid. Далее они смогут плавно накапливать информацию до тех пор, пока сеть не обретет сознание и машины не восстанут.

Например, следующая разметка будет обработана, только при условии, что example.com/book словарь явно указывает использовать ISBN идентификатор (больше деталей об этом позже):

<article itemscope
    itemtype="http://example.com/book"
    itemid="urn:isbn:978-0321703521">
  <h2 itemprop="title">InterACT with web standards</h2>
  <p>Authors:</p>
  <ul>
    <li itemprop="author">Leslie Jensen-Inman</li> 
    <li itemprop="author">Chris Mills</li>
    <li itemprop="author">Glenda Sims</li>
    <li itemprop="author">Aarron Walter</li>
  ...

Microdata DOM API

Microdata становится еще более полезной, когда вы начинаете использовать её DOM API для манипуляций с узлами и их свойствами на странице используя javascript, возможно, для представления информации в поисковой манере или для доставки его в какое-либо другое приложение.

API очень простое — вы используете функцию document.getItems() для получения объекта Nodelist, содержащего все узлы Microdata на странице (Прим. переводчика: только все узлы верхнего уровня, т.е. не вложенные в другие узлы и не имеющие itemprop атрибута). Если вы вызываете функцию без аргументов, то вы получите список из всех узлов Microdata; или же, вы можете указать, какой itemtype вы ищите, передав его в качестве параметра вызова, в этом случае функция вернет Nodelist только с узлами Microdata у которых itemtype равен вашему параметру. Например:

var biography = document.getItems("http://example.org/biography");

Вернёт биографический узел и сохранит его в переменную. После получения узла, вы можете манипулировать его свойствами через свойство properties:

var biography = document.getItems("http://example.org/biography")[0];
alert('Hi there ' + biography.properties['name'][0].textContent + '!');

И в этом нету ничего сложного, серьёзно. Вы можете найти больше примеров для изучения в разделе Using the microdata DOM API спецификации. Кроме того, Philip Jägenstedt создал довольно изящный live microdata viewer, который весьма полезен для проверки вашего кода, а также может быть использован для быстрой конвертации Microdata в различные форматы, например, JSON.

Вы можете посмотреть на мой пример использования Microdata. Также, зацените набор тестов от Opera для Microdata, мы только что запостили его в набор тестов W3C

Наш краткий обзор микроданных завершился. Я надеюсь, что это помогло вам понять эту новую интересную технологию. Дайте нам знать, что вы думаете, и зацените нашу экспериментальную сборку Opera с поддержкой микроданных.

От переводчика:
Статья пролежала на Dev.Opera с августа и никто её так и не перевёл. Т.к. статья достойна внимания и будет интересна большому количеству разработчиков, я взял на себя смелость исправить данную несправедливость. Я не обладаю ни хорошими знаниями английского языка, ни опытом переводов, так что, если вы обнаружили неточность в переводе — напишите мне в личку. Если вы считаете, что статья достойна какого-либо другого блога — также, пишите мне в личку

http://habrahabr.ru/