Микроформаты: Что, Почему и Как

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

Что это такое?

Итак, что же такое микроформаты? На домашней странице сайта microformats.org есть такое описание:

Разработанные в первую очередь для людей, а затем для машин, микроформаты – это набор простых, открытых форматов данных, построенные на основе существующих и широко распространенных стандартов.

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

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

Для чего?

Зачем же нужны микроформаты? Ну, если вы убеждены в том, что HTML должен быть семантичным, то микроформаты отлично вам подойдут. Или же, я могу привести другие аргументы: как мы уже заметили, идея микроформатов состоит в стандартизации того, как данные будут отмечены на странице, с тем, чтобы в дальнейшем, их легко можно было извлечь. На сегодняшний день существует не так уж и много инструментов, использующих возможности микроформатов, но я думаю ситуация изменится.

Использование микроформатов в своей работе, подготовит ваши сайты для будущего, когда микроформаты будут более широко распространены. Опять же, на сайте, вы можете найти список того, что вы можете делать с микроформатами. Также для извлечения микроформатов, существует отличный аддон для Firefox, он называется Operator.

operator

Кроме этого, Дэн Веб создал простую JavaScript библиотеку под названием “Sumo”, которая извлекает микроформаты, используя JavaScript. Вы также можете попробовать microformats bookmarklet.

Как их использовать?

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

hCalendar

hCalendar – это простой способ отмечать события. Начнем с элемента, который объявляет наше событие:

<div class="vevent">   

</div>

Если у вас предполагается несколько событий, вам нужно обернуть их в div.vcalendar, однако это не обязательно. Есть два обязательных свойства для события: дата начала (dtstart) и описание (summary). Давайте добавим их:

<div class="vevent">
    <p>This year, our <span class="summary">company holiday dinner</span>
    will begin at <span class="dtstart">2009-12-18T17:30</span>.</p>
</div>

Волне читаемо, не так ли? Но не дата! Вы правы, хотя микроформаты написаны в первую очередь для людей, даты – это единственная область, где в первую очередь важно, чтобы компьютер смог ее прочесть. Поэтому, было принято соглашение, записывать дату с помощью тэга abbr, в котором атрибут title будет выступать в роли значения свойства:

<abbr class="dtstart" title="2009-12-18T17:30">5:30pm on Friday, December 18.</abbr>

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

<p>We'll meet in the <span class="location"> conference room of the Tower Hotel</span>,
which we have reserved until <abbr class="dtend" title="2009-12-18T20:30">9:30pm</abbr>.</p>

С помощью панели аддона Operator в Firefox, мы можем видеть это событие на нашей странице. Мы можем использовать его несколькими способами:

hcalendar

Если я выберу экспорт в Google Calendar, он отлично перенесет в календарь данные, которые мы указали.

gcal

Если хотите узнать больше о hCalendar, обратитесь к документации.

hCard

Давайте перейдем к hCard. hCard гораздо сложнее, чем hCalendar, но мы не будет рассматривать все детали. Если в дальнейшем, вы захотите узнать больше, читайте документацию.

Снова мы начинаем с основы:

<div class="vcard">
</div>

Для hCard существует только два обязательных свойства: имя (n) и форматированное имя (fn). Обычно это один и тот же элемент.

<div class="vcard">
    <p class="fn n">John Doe</p>
</div>

Не забираясь слишком глубоко, замечу, что этот формат подразумевает что «John» – это имя, а “Doe” – фамилия. Если вы хотите это указать, вы можете использовать классы given-name и family-name:

<span class="given-name">John</span>
<span class="family-name">Doe</span>

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

<p class="nickname">JayDee</p>
<img src="http://www.johndoe.com/avatar.jpg" class="photo" />
<ul>
    <li class="email"><span class="type">Personal:</span> <span class="value">johndoe@gmail.com</span></li>
    <li class="email"><span class="type">Work:</span> jdoe@example.com</li>
</ul>
<ul>
    <li class="tel"><span class="type">Home</span>: <span class="value">(416) 123-4567</span></li>
    <li class="tel"><span class="type">Work</span> 416-987-6543</li>
</ul>
<p class="bday">January 1, 1980</p>
<a href="http://www.johndoe.com" class="url">My Website</a>
<address class="adr">
    <p class="street-address">123 Main Street</p>
    <p><span class="locality">Toronto</span>, <span class="region">Ontario</span> <span class="postal-code">M2W 4R5</span></p>
    <p class="country">Canada</p>
</address>

Есть несколько вещей, на которые стоит обратить внимание:

  • Все имена классов, который я использовал здесь, являются свойствами hCard.
  • Некоторые свойства, такие как url или photo, получают свои значения из атрибутов href и src, а не из текста элемента.
  • Такие свойства как tel и email могут иметь два дочерних свойства: type и value. Если указан только type, value все равно будет подразумеваться (как вы могли заметить во втором адресе электронной почты и номере телефона).

С помощью Оператора, я могу экспортировать эти данные…

hcard

… и открыть их в Outlook.

outlook

Видите? Все что мы указывали, здесь!

xFolk

xFolk – это разрабатываемый микроформат для социальных закладок. Из документации:

Недостаток открытых, совместимых стандартов данных является главной проблемой в использовании сервисов социальных закладок. Открытый стандарт позволит легко собирать данные социальных закладок и на их основе изобретать новые сервисы… Кроме того, открытый стандарт сделает возможным написания кода JavaScript, который будет работать на любых сервисах, как сейчас сделано на del.icio.us.

Чтобы использовать xFolk, оберните каждую закладку контейнером с классом «xfolkentry»:

<li class="xfolkentry">
</li>

Затем, вставьте ссылку и описание, используя классы «taggedLink» и «description», соответственно.

<a class="taggedlink" href="http://net.tutsplus.com" title="Nettuts+">Nettuts</a>,
<span class="description">the best web development blog on the planet</span>.

Просто, не правда ли? Думаю, это будет весьма полезно для блог ролла или сводки последних новостей.

XFN (XHTML Friends Network)

XFN – это простой способ отметить человеческие взаимоотношения. С помощью атрибута rel (который является аббревиатурой отношений) в ваших ссылках, вы описываете свои взаимоотношения с владельцем страницы, на которую вы ссылаетесь. У вас могут быть взаимоотношения двух видов: с другими людьми или с самим собой (ссылки на другие ваши страницы). Очень легко описать другие страницы, владельцем которых тоже являетесь вы:

<a rel="me" href="http://JohnDoe.posterous.com">My Posterous</a>
<a rel="me" href="http://www.flickr.com/JohnDoe">My Photos</a>
<a rel="me" href="http://twitter.com/JohnDoe">My Tweets</a>

Очень просто, да? Достаточно указать rel=”me” и все готово.

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

Напишите свой комментарий