Наверх

Микроформаты для начинающих

Архив
Время чтения: 8 минут
0
Микроформаты для начинающих

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

Гарретт Даймон

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

Микроформаты созданы для передачи максимально полного семантического значения с помощью тех стандартов, которые нам всем знакомы. Их можно назвать лучшим семантическим методом. Они используют существующие XHTML-теги - address, cite, blockquote, а также такие атрибуты, как rel, rev и title для создания соответствующих им по семантическим характеристикам кодовых блоков. Микроформаты хороши тем, что они очень удобны в использовании: для того, чтобы приступить к работе с ними, нужно лишь ознакомиться с оптимальными способами применения тегов и атрибутов, которые вы уже используете.

Простой пример

Теперь, когда вы поняли, что такое микроформаты, давайте посмотрим как они работают. Для простоты примера, возьмем микроформат hCard. Предположим, вы хотите разместить информацию с вашей визитки на веб-сайте. Для электронных визиток применяется стандарт vCard, поэтому именно его мы и будем использовать в качестве отправной точки для создания формата hCard. Микроформаты строятся на основе имеющихся и повсеместно внедряемых стандартов, таких как vCard.

Начнем с примера vCard:

BEGIN:VCARD
VERSION:3.0
N: Зelik;Tantek
FN:Tantek Зelik
URL:http://tantek.com
ORG:Technorati
END:VCARD

Теперь  давайте  взглянем  на  его  микроформатный  эквивалент hCard. Первое, на  что  стоит  обратить  внимание, это  то, что  он  использует стандартный XHTML. Во-вторых, он использует те же типы полей, что и vCard.

<div class="vcard">

 <a class="url fn" href="http://tantek.com/">

  Tantek Зelik

 </a>

 <div class="org">Technorati</div>

</div>

Достаточно взглянуть на этот пример, чтобы понять, что каждое значение визитки присутствует. Более подробное объяснение того, как формат hCard произошел от vCard можно найти на MicroformatsWiki.

Для чего они нужны?

Теперь, когда мы точно знаем что такое микроформаты, и даже рассмотрели пример, возникает вопрос: «А для чего они нужны?»

Стандарты

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

Удобство CSS

В качестве дополнительного преимущества использования общепринятых тегов и атрибутов можно указать на возможность менять стиль микроформатов посредством CSS. Давайте рассмотрим ExtensibleOpenXHTMLOutlines, также известный как XOXO. XOXO – это лишь способ семантической разметки структур. Используя этот простой пример из wiki:

<ol class='xoxo'>

  <li>Тема 1

    <ol>

     <li>подпунктa</li>

     <li>подпунктb</li>

    </ol>

  </li>

  <li>Тема 2

    <ol compact="compact">

     <li>подпункт c</li>

     <li>подпункт d</li>

    </ol>

  </li>

  <li>Тема 3

    <ol>

     <li>подпункт e</li>

    </ol>

  </li>

</ol>

мы можем применять следующие стилевые правила:

ol.xoxo { list-style:decimal; }

ol.xoxo ol { list-style:lower-latin; }

ol[compact="compact"] { display:none; }

И тогда наша структура будет выглядеть следующим образом:

1.   Тема 1

    a. подпункт a

    b. подпункт b

2.   Тема 2

3.   Тема 3

    a. подпункт e

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

Встриваемый JavaScript

Подобно CSS, с помощью микроформатов можно проделать несколько интересных трюков, используя JavaScript и DOM. Ведь микроформаты – это всего-навсего сборка XHTML. Единственное различие в том, что вашим сценариям нет необходимости управлять элементами с каждый раз разной разметкой. На самом деле, каждый может создавать сценарий работы с конкретным микроформатом. Когда приходит время интегрировать сценарий в вашу страницу, это не составляет никакого труда, так как вы уже используете ту же семантически значимую разметку для идентификации тех частей, которыми сценарий может управлять.

Машиночитаемые микроформаты

Мы уже рассмотрели преимущества «человекочитаемых» микроформатов. А как насчет машин, например, поисковых систем? Один из примеров – это элементный микроформат rel="nofollow". Добавив этот элемент к анкерным тэгам, вы даете команду поисковым системам не придавать никакого значения этим ссылкам. Это один из множества машиночитаемых микроформатов.

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

Явные и неявные метаданные

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

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

Содержательная разметка – хорошая разметка

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

●     для инженера, который будет заниматься интеграцией вашего кода на следующей неделе;

●     для вас, когда вы будете обновлять ваш код через месяц;

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

Заключение

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

Перевод компании DIRECTUM

Источник: Digital Web Magazine (Microformats Primer)

Чтобы прочитать эту статью до конца,
или зарегистрируйтесь

Комментарии 0

Чтобы прокомментировать, или зарегистрируйтесь