Микроформаты в жизнь!

21 Dec, 2007

Мои(и не только) мысли о микроформатах. А так же нескольно примеров проектов, в которых я применял микроформаты.

Что это

Всего лишь предопределенные имена классов, и тагов. Не более того. Смотрите сами, ХТМЛ до микроформатов:
  1. <dd>
  2. Юрий Артюх,
  3. +38 096 970-6428,
  4. <a href="mailto:...">akella.a@mail.com</a>
  5. </dd>
И после:
  1. <dd class="vcard">
  2. <span class="fn">Юрий Артюх</span>,
  3. <span class="tel">+38 096 970-6428</span>,
  4. <a class="email" href="mailto:...">akella.a@mail.com</a>
  5. </dd>

Добавилися класс показывающий тип формата — vcard. Спаны, для того чтобы "машины" разобрались где телефон, имя и адрес. Вот и все. Делов то. Зато какие перспективы!

Зачем это

Представьте себе 1970 год. Вся информация об организациях хранится в бумажном каталоге, "Желтые страницы" например. Обновляется раз в год, а то и реже. А потом еще полгода чтобы издать.

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

А теперь представьте, год 2010й. Каждая фирма обновляет свою информацию у себя на сайте. Где она разметила ее в hcard. Таким образом, при наличии поисковика по формату, мы будем иметь всё те же "Желтые страницы", но обновляющиеся моментально. (я принимаю интернетизацию общества за данность).
Фирмам не нужно нигде регистрироваться, просто обновить инфо на своем сайте!

По сути это шаг от централизованных систем к распределенным. Тот же веб2.0 в некотором смысле шагнул, от централизованной генерации контента, к распределенной. И этот тренд видно практически во всех областях. Это наводит на мысли о правильности пути микроформатов.

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

Примерно так бы я распределил сервисы и их аналоги по сущностям в микроформатах (на самом деле, мне просто нравится новый дизайн таблиц на блоге):

 Цетрализованная системаРаспределённая
Новости Feedburner, news.google.comhAtom
Адресная книга plaxo, linkedin, facebook (vkontakte)hCard + XFN
Календари upcoming, ckopo.in.uahCalendar

Микроформаты и Wordpress

Как пример микроформатизации можно рассмотреть Wordpress, хотя практически все новые темы выходят с учетом hAtom. Тем не менее, сейчас у меня вот такой кусочек кода в /wp-content/wp-themes/wpthemename/index.php выводит список заметок:
  1. <div class="hentry">
  2. <h2 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="пермалинк <?php the_title(); ?>">...</a></h2>
  3. <abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO'); ?>"><?php the_time('j F, Y') ?></abbr>
  4. <div class="entry-summary"><?php the_content('читать дальше'); ?></div>
  5. </div>
Результатом будет такой HTML, я выделил жирным все, что добавлено для микроформатов:
  1. <div class="hentry">
  2. <h2 class="entry-title"><a href="#" rel="bookmark"> ... </a></h2>
  3. <abbr class="published" title="2007-12-06T16:36:10+0200">6 октября, 2007</abbr>
  4. <div class="entry-summary">Выдержка из поста</div>
  5. </div>
Как видно, всего лишь классы. Для даты принят стандартный формат <abbr title="2007-12-06T16:36:10+0200", вдобавок вся новостная лента должна быть обернута в див с классом hfeed.

XFN

Так называется формат нагружающий смыслом ссылки. XFN — XHTML Friends Network. Здесь вообще все элементарно, вот одна из ссылок в правой колонке моего блога:
  1. <a href='http://uggallery.audiopeace.ru/' rel='acquaintance met colleague'>Александр Исаков</a>
Что означает, что я знаком с этим человеком(acquaintance), встречал его вживую(met) и являюсь его коллегой(colleague). Подробнее можно почитать на главной странице XFN

В конце

Несмотря на то, что идее уже третий год, и даже Билл Гейтс считает ее удачной, она(идея) все еще в развивающемся состоянии. И думаю во многом это зависит от разработчиков. Изучение микроформатов все же является неким риском. Никто не гарантирует во что это все выльется. Тем не менее, я их использую в большинстве своих проектов уже сейчас. Потому что это просто.

Ваши мысли о перспективах микроформатов приветствуются!

27 комментариев к “Микроформаты в жизнь!”

1.Иван Сагалаев | 21 Dec, 2007
Юрий! Ко мне с этой статьи приходят pingback'и (штуки 3 уже, кажется). Но я их удаляю, потому что похоже, что Wordpress'овская реализация не в состоянии распознать, что делать с кодировкой windows-1251 и выглядят они нечитаемо. Это я пишу на всякий случай, если Вы беспокоитесь, куда они деваются :-)
2.akella | 21 Dec, 2007
Знаю ) Ко мне приходят такие же ЮТФные, я обычно копирую кусок из трекбэкающего поста и перевожу их. Но я прекрасно понимаю Вас, пусть это будет это плата за мою лень перевестись на ЮТФ... Спасибо за то, что сказали =)
3.Chupa | 21 Dec, 2007
Когда я писал письмо разработчикам "Вконтакте", чтоб они добавили микроформаты, то получил один ответ: "Что это?". А это один из самых популярных сайтов в Рунете :)
4.akella | 21 Dec, 2007
Да, они похоже больше увлечены продажами нежели разработкой =) Зато на moikrug.ru уже это есть, и люди-звезды задействованные в разработке Хабра-Дерти, ЖЖ и Яндекса позволяют надеяться что рано или поздно и там все обмикроформатится. Когда же блин начнут их применять наконец? =) А то пока все это похоже на подготовку к запуску.
5.Nikita | 21 Dec, 2007
Скажите, а чем это лучше, чем вынести такого рода данные в отдельный XML файл и подгружать данные из него в HTML, чтоб HTML не захламлять?
6.akella | 21 Dec, 2007
Тогда информация будет продублирована - на самой странице и в XML файле. А именно этого мы и пытаемся избежать. Так как ты говоришь например работает RSS. По сути в блоге и в РСС одно и то же. И будь hatom более распространенным — можно было бы подписываться на него, и не дублировать информацию в РСС..
7.Иван Сагалаев | 21 Dec, 2007
> Зато на moikrug.ru уже это есть, и люди-звезды задействованные в разработке Хабра-Дерти, ЖЖ и Яндекса позволяют надеяться что рано или поздно и там все обмикроформатится. Собственно, событи в Яндексе.Афише и Яндекс.ТВ уже обвешаны микроформатом hCalendar. Правда, с небольшим багом, который еще на публичных сайтах не пофиксен. Поэтому я про это еще не написал :-).
8.Artem.Chertov | 21 Dec, 2007
Есть несколько убитых поисковиков по микроф-ной ин-ии. hAtom уже давненько конвертируется в atom или rss (тут, например). Для скрытия данных include pattern. Для XFN'a нужен профиль в хеаде. hCard+XFN+OpenID(+oAuth). SW сейчас смотрят на системы типа QDOS.
9.akella | 21 Dec, 2007
Отличные новости Иван =) Не сомневался что у вас постоянно происходит что-то хорошее. Артем, они конечно есть, но хотелось бы, например, чтобы мой РСС ридер мог подписываться не на РСС-каналы, а уже на hAtom. =) То есть большей мейнстримовости.
10.Денис Радченко | 21 Dec, 2007
Самое страшное в этой системе то, что с помощью нее можно собирать просто потрясающие спам базы. Ведь вы сами отдаете роботам информацию в понятном для них формате.
11.akella | 21 Dec, 2007
Чисто(в почте) не там где убирают(прячут имейлы), а там где не сорят (не спамят) Мой имейл уже у спаммеров, так что мне нечего бояться ))
12.Max Ischenko | 21 Dec, 2007
Мне очень нравятся микроформаты. Но любовь пока платоническая, т.к. я не вижу инструментов которые эти микроформаты используют. Когда они будут тогда наверное и разработчики будут "чесаться" чтобы сделать их поддержку.
13.akella | 21 Dec, 2007
Вот и получается курица и яйцо =) Разработчики инструментов кивают "Зачем мол, нету их почти в инете", а вебдевелоперы "Зачем, софта ж нет" =)
14.Иван Сагалаев | 21 Dec, 2007
Тут ситуация, мне кажется, чуть похуже, чем у курицы с яйцами. Тут еще не очень понятно, а какие собственно интересные клиенты могут быть у этой технологии. Ну ладно, есть Firefox Operator, который показывает, какие на странице есть микроформаты. Но показывать не интересно. Пока единственное применение интересное, которое я ему нашел -- это ткнуть правой кнопкой в событие на Я.Афише (когда починенная версия в продакшн доедет) и добавить его в Google Calendar. Жаль только, что я пользуюсь нашим яндексовым календарем, а с ним мы можем проинтегрироваться и так :-). Экспортировать hCard в vcard-файлы как-то коряво: если бы оно в мою адресную книгу в Thunderbird сразу добавлялось, было бы лучше, но этого пока никто не делает. И это, в общем-то, все. Другими словами, пока основное "применение" микроформатов -- это системы, которые их опознают и говорят: "глядите -- микроформат!" Надо придумать что-нибудь поинтересней :-)
15.akella | 22 Dec, 2007
На данный момент похоже почти так =) Как бы грустно и забавно это ни было. Пожалуй все остальные применения, кроме подписки на hAtom как-то фантастичны. Но что если пойти в лоб. К примеру, поисковик по hResume, чем не применение? Или просто поисковик по какой-либо из сущностей? "Поиск в Веб, Поиск в картинках, Поиск в видео, поиск в событиях, поиск в резюме" ? Можно сказать, что на данный момент микроформатов очень мало и поиск не имеет смысла, но ясно как день, что на утро после запуска все SEOшники кинутся реализовывать везде и всюду hCard. Вариант? Ведь реализовать его, думается, не так сложно как новую морфологию...
16.v | 22 Dec, 2007
По-моему возможность подписываться на "обычные html-страницы" вместо rss вполне-себе применение >)
17.FX Poster | 22 Dec, 2007
<a class=”email” href=”mailto:akella.a@mail.com”>akella.a@mail.com</a></a> a закрыл 2 раза :)
18.akella | 22 Dec, 2007
Спасибо, все красиво переформатировал.
19.Wojciech Zaj&#261;c | 22 Dec, 2007
Just thought "entry-content" would be better there than "entry-summary". Great redesign!! I wish your post were available in english too… )) Best, Wojtek
20.akella | 22 Dec, 2007
Thanx Wojciech! But the code i supplied was for the main page of the blog, and there i 'echo' only summaries of the posts, approx. one sentence. Anyway, entry-content would be better as an example of the hAtom. Ha! Now i got one english reader, and really started thinking about international blog =) BTW great poland domain! I wish i could buy microformats.ua.
21.CB | 22 Dec, 2007
2Max Ischenko - уже додав мікроформати на testing.developers.org.ua
22.Tugarinov Sergey | 24 Dec, 2007
Не могу не прорекламировать свой проект, коли вы так заинтересованы в микроформатах и используете Mac OS - Safari Microformats plugin :)
23.akella | 24 Dec, 2007
Спасибо! Отличный плагин! Жаль что для его инсталляции нужно так много совершенно противоречащих идеологии маков шагов, неужели все так плохо с плагинами для сафари?! :(
24.Tugarinov Sergey | 24 Dec, 2007
Пожалуйста. Не всегда и не со всеми :) Но проблема действительно присутствует.
25.tobto | 07 Jan, 2008
'Никто не гарантирует во что это все выльется.' Это выльется в семантический веб, который начнет качать права в 2008 с помощью семантических поисковиков. Так что, изучение XML и его деток - мастхев для всех кодеров. Это касаца и CSS - правильно написанные классы могут рассказать как построена страница, какую информационную нагрузку несут блоки!, какая эмоциональная подоплека у UI, какая динамика присутствует (ajax), и т.п. Поэтому, рекомендовано писать все для human а не для броузеров.
26.Алексей ? рючков &raquo; Микроформаты | 02 Jul, 2008
[...] http://cssing.org.ua/2007/12/21/gogo-mf/ [...]
27.cssing :: Архив :: G-club, микроформаты и дизайн | 08 Aug, 2008
[...] Микроформаты в жизнь — мой старый пост о микроформатах [...]