Статьи

Микроформаты: что, почему и как

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

Давайте возьмем это сверху. Какие микроформаты? С домашней страницы microformats.org приходит это определение:

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

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

Так почему вы должны использовать микроформаты? Какой стимул? Что ж, если вы убеждены, что HTML должен быть семантическим только потому, что микроформаты будут вам интересны. В противном случае я буду убеждать: как мы заметили, вся идея микроформатов состоит в том, чтобы стандартизировать способ разметки данных на странице, чтобы их можно было легко извлечь. В настоящее время не так много инструментов, которые используют преимущества микроформатов, но я думаю, что это изменится. Использование микроформатов в вашей работе подготовит ваши сайты к будущему, когда микроформаты будут гораздо более широко распространены. Опять же, на сайте есть общий список того, что вы можете делать с микроформатами . Уже есть достойный аддон Firefox для извлечения микроформатов; это называется оператор .

Оператор FireFox AddOn

Затем Dan Web создал простую библиотеку JavaScript под названием Sumo, которая извлекает микроформаты для использования с JavaScript . Вы также можете попробовать буклет для микроформатов .

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

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

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

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

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

Используя панель инструментов оператора в Firefox, мы видим, что это событие на нашей странице. Мы можем работать с ним несколькими способами:

hCalenday в Операторе

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

Календарь Google, импортирующий hCalendar

Чтобы узнать больше о hCalendar, ознакомьтесь с документацией по hCalendar ,

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

Опять же, мы начнем с нашего корня:

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

Не вдаваясь слишком глубоко, отмечу, что этот формат подразумевает, что «Джон» — это имя, а «Доу» — это фамилия. Если вы хотите указать это, вы можете использовать классы с указанным именем и фамилией:

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

Здесь следует отметить несколько вещей:

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

Используя Operator, я могу экспортировать это как vcard…

hCard в операторе

… и откройте его в Outlook.

hCard в Outlook

Видеть? Все, что мы определили, здесь!

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

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

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

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

Да, просто; Я могу представить, что это полезно в блоге или в веб-обзоре. Подумайте об инструменте, который позволил бы вам добавить в закладки все эти ссылки одновременно.

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

Довольно просто, а? rel = ”me” и все готово.

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

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

VoteLinks — интересная идея: когда вы ссылаетесь на статью, публикацию, продукт, что угодно, добавьте атрибут rev. Rev? Rev — противоположность rel; в то время как rel описывает, что представляет собой связанная страница с текущей страницей (например, «друг» или «таблица стилей»), rev описывает, что текущая страница является связанной страницей. С помощью VoteLinks вы можете сделать свою страницу «голосуйте за», «голосуйте против» или «голосуйте против» независимо от того, на что вы ссылаетесь. Так, например:

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

Гео очень прост; у него есть два свойства: широта и долгота.

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

гео

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

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

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

… Это тег «javascript», а не «сценарии на стороне клиента».

Nettuts реализовал этот микроформат; но вы уже знали, что если у вас есть оператор!

rel-tag на Nettuts

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

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

Будете ли вы внедрять микроформаты в свои сайты?

Я спрятал микроформат в этом уроке; ты можешь найти это?

  • Подпишитесь на нас в Твиттере или подпишитесь на ленту Nettuts + RSS для получения лучших учебных материалов по веб-разработке.