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

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

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

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

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

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

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

Для чего?

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

Использование микроформатов в своей работе, подготовит ваши сайты для будущего, когда микроформаты будут более широко распространены. Опять же, на сайте, вы можете найти список того, что вы можете делать с микроформатами. Также для извлечения микроформатов, существует отличный аддон для Firefox, он называется 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, мы можем видеть это событие на нашей странице. Мы можем использовать его несколькими способами:

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

Если хотите узнать больше о 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 все равно будет подразумеваться (как вы могли заметить во втором адресе электронной почты и номере телефона).

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

… и открыть их в 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” и все готово.

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

<ul>   
    <li><a href="#" rel="met friend">Good friend</a></li>   
    <li><a href="#" rel="met muse spouse sweetheart">Darling wife</a></li>   
    <li><a href="#" rel="met acquaintance neighbour">Guy next door</a></li>   
    <li><a href="#" rel="friend co-worker">Co-worker at Envato</a></li>   
</ul>   

В первой ссылке, вы можете сообщить, с помощью атрибута rel, что-то вроде «Я встречал владельца страницы, ставлю ссылку на его страницу, и я его друг». Следующее, это моя (гипотетическая) жена, которой посчастливилось быть моей супругой и возлюбленной. Я также встречал парня по соседству, но он просто знакомый и сосед. И наконец, хотя мой (снова гипотетический) коллега является другом, обратите внимание, что я никогда не встречался с ним, это можно определить как виртуальные взаимоотношения.

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

VoteLinks

VoteLinks – это интересная идея: когда вы ставите ссылку на статью, продукт, на все что угодно, добавляйте атрибут rev. Rev? Rev – это противник rel; в то время как rel описывает как страница на которую ведет ссылка связана с текущей страницей, rev определяет отношение текущей страницы к той, на которую идет ссылка. С помощью VoteLinks, вы можете сделать свою страницу как голосующую за материал, который доступен по ссылке. Голосовать можно за, против, или воздержатся. Например:

<p>Check our <a href="#" rev="vote-for">this great blog post by Collis</a> on the netsetter</p>   
  
<p>I got terrible service at <a href="#" rev="vote-against">the Five Seasons Grill</a> last night</p>   
  
<p>What do I think of <a href="#" rev="vote-abstain">his site redesign</a>? </p>

Насколько это полезно? Ну, представьте если Google (или любой другой поисковик) будет учитывать VoteLinks при выдаче результатов поиска. Сейчас, их система (правда, в общих чертах) выдает то количество ссылок, которое видит поисковик. Но что если за большинство этих ссылок являются голосами пользователей против продукта или страницы? Или как насчет сайта, который будет сканировать веб, в поисках VoteLinks, и выдавать вам список наиболее популярных страниц? Конечно это обширное поле для спекуляции, но возможно это будет интересно. Проблема в том, что для того чтобы получить какой-то эффект, использовать VoteLinks придется очень многим людям.

Geo

Geo очень простой, у него есть только два свойства: latitude и longitude.

<p class="geo"><strong>Apple :</strong>   
    (<span class="latitude">37.33171397409807</span>   
    <span class="longitude">-122.03051626682281</span>)   
</p>   
<p class="geo"><strong>Envato :</strong>   
    <abbr class="latitude" title="-37.812528">-37&deg; 48' 45.1008"</abbr>   
    <abbr class="longitude" title="144.969076">144&deg; 58' 8.6736"</abbr>.   
</p>   

Как мы уже говорили ранее, вы можете использовать элемент abbr для маскировки настоящих значений. И конечно же, Оператор распознает их.

rel-license

Если вы разрабатываете что-то для публичного использования, вы, скорее всего, знаете, что в проект необходимо включить лицензию. Вы можете назначить атрибут rel со значением «license» для ссылки на лицензионную документацию.

<a href="http://creativecommons.org/licenses/by/2.0/" rel="license">cc by 2.0</a>

В чем смысл? В том, что Yahoo Creative Commons Search и Google Usage Right’s Search, оба уже используют атрибут rel=”license” в своих алгоритмах.

rel-tag

Это очень интересный микроформат, потому что каждый блоггер назначает тэги своим статьям. Для того, чтобы использовать этот микроформат, просто добавьте rel=”tag” к вашей тэговой ссылке, и все готово. Теперь, с помощью нашей панели Оператора, мы можем видеть контент других сайтов, с такими же тэгами. Важно понимать, что имя тэга берется из атрибута href, а не из текста ссылки. Так что в следующем примере…

<a href="http://www.example.com/tag/javascript" rel=”tag” >Client-Side Scripting</a>   

… тэгом будет «JavaScript» а не «client-side scripting».

Nettuts использует этот микроформат, но вы конечно об этом знаете, если используете Оператор.

rel-nofollow

Другой простой, но эффективный тэг – это атрибут rel=”nofollow” к ссылке. Он используется для того, чтобы выбранная ссылка не участвовала в ранжировании страниц в поисковых системах. И конечно такие поисковые системы как Google, Yahoo и Bing, активно используют этот микроформат. Он идеален для ссылок в комментариях к блогу, поскольку с этим атрибутом сторонние ссылки не будут оказывать влияния на ваш сайт, а также раздавать рейтинг своим владельцам.

Итак, что вы собираетесь делать?

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

Будете ли вы использовать микроформаты в своих сайтах?

Перевод статьи «Microformats: What, Why, and How«, автор Andrew Burgess