Разметка «люди»

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

Самый простой способ интегрировать микроданные на персональный веб сайт на странице «обо мне». У тебя есть страница «Обо мне», не так ли? Если таковой нет, то можно просто проследить, как я буду добавлять семантичность тестовой странице. Окончательный результат можно посмотреть по адресу.

Посмотрим на сырую разметку. Так она выглядит перед добавлением свойств микроданных:

<section>
	<img width="204" height="250" src="" alt="[Mark Pilgrim, circa 2000]">
	<h1>Contact Information</h1>
	<dl>
		<dt>Name</dt>
		<dd>Mark Pilgrim</dd>
		<dt>Position</dt>
		<dd>Developer advocate for Google, Inc.</dd>
		<dt>Mailing address</dt>
		<dd>
			100 Main Street<br>
			Anytown, PA 19999<br>
			USA
		</dd>
	</dl>
	<h1>My Digital Footprints</h1>
	<ul>
		<li><a href="">weblog</a></li>
		<li><a href="">Google profile</a></li>
		<li><a href="">Reddit profile</a></li>
		<li><a href="">Twitter</a></li>
	</ul>
</section>

Первое, что всегда делаем — объявляем используемый словарь и границы его применения. Это можно сделать путем добавления атрибутов itemtype и itemscope внешнему элементу, который содержит все остальные элементы с нужными нам данными. В нашем случае это элемент <section>:

<section itemscope itemtype="">

Заметка: Можно сравнить разметку до и после.

Теперь можно начать определять свойства микроданных согласно словарю. Но что там за свойства? Список свойств можно увидеть, перейдя по ссылке. Спецификации микроданных не обязывают использовать именно этот источник, но это сборник «лучших решений». Если у тебя есть желание, чтобы разработчики использовали твой словарь, его необходимо задокументировать. А есть ли лучший вариант, чем размещение документации словаря в самом URL? Список свойств словаря Person приведен в таблице ниже:

Первый абзац на странице «Обо мне» содержит мою фотографию. Фотография в коде — это, само собой <img>. Чтобы обозначить, что этот элемент <img> является изображением моего профиля, просто следует добавить itemprop="photo":

<img itemprop="photo" width="204" height="250"
		src=""
		alt="[Mark Pilgrim, circa 2000]">

Где тут значение свойства микроданных? В атрибуте src (смотри таблицу выше). Каждый <img> содержит атрибут src, иначе изображение попросту не отобразится. Еще раз убеждаемся, что правильная разметка позволяет легко внедрить микроданные.

Кроме того, элемент <img>не единственный на странице. Он является дочерним элементом <section>, у которого задан атрибут itemscope. Микроданные используют «родственные» отношения между элементами, чтобы определить границы действия свойств микроданных. Переду на человеческий язык: «Элемент <section> описывает персону. Все свойства микроданных, которые присутствуют у дочерних элементов по отношению к <section> относятся к описанию персоны.« Если это будет понятней, то элемент <section> можно представить как подлежащее предложения. Атрибут itemscope тогда будет сказуемым, которые как бы говорит «изображен на«. А значение свойства микроданных — это обстоятельство:

Этот человек [<section itemscope itemtype="...">]

изображен на [<img itemprop="photo">]

[это значение атрибута src]

Подлежащее определено только один раз с помощью атрибутов itemscope и itemtype. В нашем примере — это <section>. Глаголы задаются с помощью имен свойств — атрибут itemprop="photo" у <img>. А для обстоятельства не нужно никакой специальной разметки, т.к. оно определяется согласно таблице приведенной выше и в данном случае — это значение атрибута src.

Переходя к следующему куску разметки, мы встречаем заголовок <h1> и начало списка определений <dl>. Ни <h1>, ни <dl> не получат разметки для микроданных. Не каждому куску разметки следует добавлять свойства микроданных. Они добавляются непосредственно тем элементам, которые содержат необходимые значения. В нашем примере <h1> это просто заголовок, который не имеет отношения к описуемой персоне. Аналогично и <dt> содержит текст "Name". Это просто метка, а не значение:

<h1>Contact Information</h1>
<dl>
	<dt>Name</dt>
	<dd>Mark Pilgrim</dd>

Ну, а где же нужная информация? Она содержится в <dd>, поэтому добавим ему атрибут itemprop. Какое свойство будет у него? Свойство name. Где расположено значение свойства? Это будет текст элемента <dd>. Нужна ли какая-то дополнительная разметка для этого? Вышеприведенная таблица говорит — нет, значение свойства — это просто текст, содержащийся в элементе:

<dd itemprop="name">Mark Pilgrim</dd>

Читается это просто — имя этого человека Mark Pilgrim. Идем дальше.

Со следующими двумя свойствами с немного сложнее. Имеем такую вот разметку:

<dt>Position</dt>
<dd>Developer advocate for Google, Inc.</dd>

Если посмотреть определение словаря Person, текст «Разработчик компании Google, Inc» фактически содержит два свойства: title (разработчик) и affiliation (Google, Inc). Как же это представить микроданными? Короткий ответ — никак. Микроданные самостоятельно не в состоянии разбить текст на нужные свойства. Нет возможности сказать, что первые 18 символов — это первое свойство, а последние 12 — второе.

Но не все так безнадежно. Представь, что тебе нужно было текст "Разработчик"оформить с помощью CSS как-то иначе. Как обычно мы поступаем в таком случае? Мы оборачиваем этот текст в <span> и к нему применяем нужные стили.

Подобная техника так же отлично подходит для микроданных. В нашем случае есть две части информации: название (title) и принадлежность (affiliation). Если каждую из этих частей обернуть в <span>, то можно объявить, что каждая из них — это отдельное свойство микроданных:

<dt>Position</dt>
<dd>
	<span itemprop="title">Developer advocate</span> for <span itemprop="affiliation">Google, Inc.<span>
</dd>

Готово. Читается это как: «Этот человек является разработчиком, нанятым Google, Inc». Таким образом, мы получили два свойства микроданных, хоть и пришлось «раздуть» разметку — такой вот компромисс.

Эта же техника используется для разметки адресов. Словарь Person определяет свойство address, что само по себе является частью микроданных. Это означает, что адрес имеет собственный словарь и определяет свои собственные свойства: street-address, locality, region, postal-code и country-name.

Если ты программист, то тебе скорей всего знаком синтаксис, когда свойство объекта отделяется точкой. Отношения можно себе представить в таком виде:

• Person
• Person.address
• Person.address.street-address
• Person.address.locality
• Person.address.region
• Person.address.postal-code
• Person.address.country-name

В нашем примере адрес полностью содержится в одном элементе <dd>. <dt> тут выступает, опять же, в роли ярлыка и для микроданных не представляет интереса. Чтобы начать использовать свойства для адресов, добавляем атрибут itemprop элементу <dd>:

<dt>Mailing address</dt>
<dd itemprop=&quote;address&quote;>

Но нужно помнить, что свойство address — это часть существующих микроданных. Это означает, что следует также добавить атрибуты itemscope и itemtype:

<dt<Mailing address</dt<
<dd itemprop="address" itemscope itemtype=""<

Все это мы уже видели раньше, но для элемента более высокого уровня. Элемент <section> определяет itemtype и itemscope, и все элементы, расположенные внутри этого <section> попадают под действие определенного словаря. И вот мы первый раз встречаем, когда у вложенной части определяются новые itemtype и itemscope. Тут область действия словарей распространяется так же, как и в дереве документа. Элемент <dd> имеет ряд дочерних элементов, на которые распространяется действие словаря, определенного для родителя (<dd>). После закрытия </dd> дальше действует словарь, определенный выше — тот, который определен для <section>.

Со свойствами словаря Address наблюдается та же проблема, что и с title и affiliation. Имеется текст, который нужно разбить на несколько частей для микроданных. Как поступать в таких случаях мы уже знаем:

<dd itemprop="address" itemscope itemtype="">
	<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>

Читается как: «Этот человек имеет следующий почтовый адрес: дом/улица '100 Main Street', район 'Anytown', регион 'PA', почтовый индекс '19999', страна 'USA'».

<p itemprop="address" itemscope itemtype="">
<span itemprop="street-address">
100 Main Street
Suite 415
</span>
...
</p>

Поговорим еще об одной вещи на странице «обо мне» — о списке URL. Словарь Person имеет для этого подходящее свойство URL. На самом деле свойство URL может содержать что угодно. Нет, это, конечно, должны быть URL. То есть я имею в виду, что это может быть любая ссылка, которая имеет отношение к человеку: ссылка на блог, фотогалерею, профиль на Facebook или Twitter.

Важно понимать, что человек может иметь несколько свойств url. Вообще любое свойство может встретиться более одного раза, вот сейчас рассмотрим как раз такой пример. Я хочу перечислить четыре URL: на блог, на профиль в Google, на пользовательский аккаунт в Reddit и аккаунт в Twitter. В HTML это список, содержащий ссылки. Для микроданных нужно чтобы каждая ссылка содержала атрибут itemprop="url":

<h1>My Digital Footprints</h1>
<ul>
	<li><a href itemprop="url">weblog</a></li>
	<li><a href itemprop="url">Google profile</a></li>
	<li><a href itemprop="url">Reddit profile</a></li>
	<li><a href itemprop="url">Twitter</a></li>
</ul>

Согласно таблице из раздела Модель данных микроданных, ссылки обрабатываются по-особому. Значением свойства микроданных не является текст элемента. Оно берется из атрибута href. Текст при обработке микроданных просто игнорируется. Поэтому этот список можно прочитать так: Этот человек имеет URL И еще такой И еще А еще.

Куда дальше

• следующая — Введение в расширенные фрагменты Google
• предыдущая — Модель данных микроданных
• содержание