Главная/ Учимся Javascript, CSS, HTML/ Уроки HTML/ Up And Running/ Fancy Words/ Модель данных микроданных. HTML5. Up and Running. Марк Пилгрим

Модель данных микроданных

Дата публикации: 19.04.2011

Определить свой словарь микроданных просто. Прежде всего, требуется пространство имен, собственно URL. URL на пространство имен — это просто указатель на рабочую веб страницу, хотя это не обязательно. Скажем мне нужно создать словарь для описания человека. Если я владею доменом data-vocabulary.org, я могу использовать адрес http://data-vocabulary.org/Person как пространство имен для моего словаря.

В этом словаре мне нужно задать имена свойствам. Начну с трех основных:

  • name (полное имя пользователя);
  • photo (ссылка на фото пользователя);
  • url (ссылка на сайт связанный с пользователем, такой как блог или аккаунт на facebook).

Два из этих свойств — URL, и одно — обычный текст. Каждое из этих свойств представлено в виде обычной разметки. Представь, что у тебя есть страница профайла или страница «обо мне». Твое имя скорей всего размечено как заголовок, например, тег < h1>. Твое фото, скорей всего — это тег <img>, для того, чтобы люди смогли увидеть, как ты выглядишь. А URL на ресурс связанный с тобой — это скорей всего гирперссылка, т.к. ты хочешь, чтобы люди смогли по ней кликнуть. Ну и заключим весь блок профиля в элемент <section>, чтобы отделить его от остального содержимого страницы. Вот как это выглядит:

<section>
	<h1>Mark Pilgrim</h1>
	<p>
		<img src="http://www.example.com/photo.jpg" alt="[me smiling]">
	</p>
	<p>
		<a href="http://diveintomark.org/">weblog</a>
	</p>
</section>

Модель данных микроданных — это пары имя/значение. Имена свойств микроданных (в нашем примере это name, photo, url) всегда основываются на HTML тегах. Соответствующие значения свойств берутся из DOM элементов. Для большинства HTML тегов значение свойства — это содержимое тега (текст). Но есть и несколько исключений, о которых говориться в следующей таблице:

Элемент Значение
<meta> содержание атрибута content
<audio> содержание атрибута src
<embed>
<iframe>
<img>
<source>
<video>
<a> содержание атрибута href
<area>
<link>
<object> содержание атрибута data
<time> содержание атрибута datetime
Все остальные элементы текстовое содержание

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

<section itemscope itemtype="http://data-vocabulary.org/Person">

Твое имя — это первый бит данных, содержащихся в <section>. К тому же имя заключено в <h1>. Элемент <h1> не требует специальной обработки, поэтому попадает под категорию «Все остальные элементы» из вышеприведенной таблицы. А это значит, что значение свойства — это просто текст, содержащийся внутри элемента (аналогичная ситуация будет с тегами <p>, <div> или <span>):

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

Это можно «расшифровать» так: «Это свойство name словаря http://data-vocabulary.org/Person. Значение свойства — Mark Pilgrim».

Следующим идет свойство photo. Это должен быть URL. Согласно таблице значение элемента <img> содержится в атрибуте src. Выходит, что URL на фото в профиле уже содержится в элементе <img src>. Все, что нужно сделать — это объявить, что элемент <img> — это свойство photo.

<p><img itemprop="photo" src="http://www.example.com/photo.jpg" alt="[me smiling]"></p>

Читаем так: «Это свойство photo словаря http://data-vocabulary.org/Person. Значение свойства — http://www.example.com/photo.jpg«.

И, наконец, свойство url — так же является URL’ем. Согласно таблице значение элемента <a> — это атрибут href. Это отлично вписывается в текущую разметку. Нужно только сообщить, что элемент <a> — это значение свойства url:

<a itemprop="url" href="http://diveintomark.org/">dive into mark</a>

Читаем так: «Это свойство url словаря http://data-vocabulary.org/Person. Значение свойства — http://diveintomark.org».

Конечно, если разметка выглядит иначе — это не проблема. Можно добавлять свойства и значения микроданных в любой HTML код, даже если используются морально устаревшие таблицы (это ж кем надо быть, чтобы до сих пор их использовать для разметки страниц?!). Посмотрим, как можно применить микроданные к подобной разметке:

<TABLE>
<TR><TD>Name<TD>Mark Pilgrim
<TR><TD>Link<TD><A href=# onclick=goExternalLink()>http://diveintomark.org/</A>
</TABLE>

Чтобы обозначить свойство name, просто добавляем атрибут itemprop для ячейки таблицы, которая содержит имя. Табличные ячейки не имеют специальных правил для значений свойств микроданных. Поэтому значение — это текст в ячейке:

<TR><TD>Name<TD itemprop="name">Mark Pilgrim

Добавление свойства url выглядит сложнее. Эта разметка использует тег <a> неправильно: атрибут href, который должен содержать адрес, не содержит ничего полезного. Но при этом привязан обработчик события onclick, который извлекает адрес из текста ссылки и осуществляет переход страницы на этот адрес. Чтобы стало совсем интересно, представим, что по клику на ссылке будет открываться попап окно без прокрутки. Весело было в Веб в прошлом веке?

В любом случае весь этот «ужас» все еще можно привести к свойствам микроданных, нужно только подойти к делу более творчески. Об использовании напрямую элемента <a> не может быть речи. В href нет нужного значения и нет возможности обойти правило, которое гласит, что значение тега <a> нужно искать в атрибуте href. Но можно добавить обрамляющий контейнер и уже ему добавить свойство url:

<TABLE itemscope itemtype="http://data-vocabulary.org/Person">
	<TR><TD>Name<TD>Mark Pilgrim
	<TR><TD>Link<TD>
		<span itemprop="url">
			<A href=# onclick=goExternalLink()>http://diveintomark.org/</A>
		</span>
</TABLE>

Поскольку элемент <span> не имеет специальной обработки, он придерживается правила: «значение свойств микроданных находится в тексте элемента». При нашей разметке текст у <span> будет тот же, что и у вложенного <a> — http://diveintomark.org/.

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

Куда дальше

Показать комментарии