Пример использования микроформатов на «живом» проекте

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

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

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


    Сегодня я хочу показать еще один путь внедрения микроформатов на примере ресурса livents.ru. В первую очередь, конечно же, следует определиться, какие именно микроформаты возможно и нужно внедрять на подобных ресурсах. Из существующих на данный момент мы использовали hCard для описания личных данных пользователей, hCalendar для описания информации о событиях и микроформатом Rel-Tag пометили теги.

    Самой большой сложностью при внедрении микроформатов в целом – изначальная непригодность существующей верстки. Взять, к примеру, формат даты. Сложно найти ресурс, где дата отображается в формате YYYYMMDDTHHMMSSZ, поэтому самый действенный способ – использовать тег <abbr />, что собственно мы и сделали.

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

    Естественно, размещение блоков, размеченных микроформатами, должно соответствовать логике страницы. Т.е. на странице описания события само событие должно быть оформлено микроформатом hCalendar, а списки его участников и наблюдателей — микроформатом hCard. Для микроформата Rel-Tag идеальным местом будет облако тегов, но не следует забывать и более «очеловеченные» теги — интересы.

    Вот что у нас получилось в итоге:
     <abbr title="20070712" class="dtstart" />
     <abbr title="20070712" class="dtstamp" />
     <p>Когда: Чт, 12 Июля 2007</p>
     <p>Где: <a title="СК Олимпийский" href="http://livents/ru/places/64/">СК Олимпийский</a></p>
     <abbr title="СК Олимпийский, Москва, Россия" class="location" />
     <p>Категория: <a href="http://livents/ru/categories/24/" class="category">Шоу</a></p>
     <p class="vcard">
      Добавила:
      <a href="http://livents/ru/users/feoli/profile/">
       <img width="16" height="16" class="photo" src="http://static.livents.ru/img/userpics/30_small_1172662928.jpg" />
      </a>
      <a href="http://livents/ru/users/feoli/profile/" class="fn nickname url">Feoli</a>

     </p>


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

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

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

      0
      Такое использование ABBR мне очень не по душе. А почему тогда не H1? Или FORM?

      <span class="yellow"> — вообще на уровне начинающих.

      <span>Категория</span> — это как-то очень умно для меня.

      А за использования мульти-классов — плюс.
        0
        Спасибо, исправил.
        Этот пример кода взять с живого проекта, где были определены классы, поэтому и остались теги SPAN. А что касается ABBR, то на сегодняшний день нет специального тега для определения неотображаемого микроформата, и в качестве альтернативы в большинстве случаев используется ABBR.
          +2
          Но семантический смысл тага должен оставаться! Если нету нужного, используйте для этой цели созданные SPAN и DIV!
        0
        Взять, к примеру, формат даты. Сложно найти ресурс, где дата отображается в формате YYYYMMDDTHHMMSSZ, поэтому самый действенный способ – использовать тег , что собственно мы и сделали.

        YYYY-MM-DDTHH:MM:SS+ZZ:ZZ и abbr неразрывно связаны - это элементарный микроформат (точнее у них он называется datetime pattern) и выглядит он так:

        <abbr title="YYYY-MM-DDTHH:MM:SS+ZZ:ZZ">Дата по-человечески</abbr>

        Почитайте про location, многие вопросы снимет.

        Ну и приведённый пример немного некорректен.
          0
          Дело в том, что abbr все же изменяет внешний вид "даты по-человечески", что не входило в планы дизайнера изначально. А вот переопределение стиля тега abbr уже действительно больше похоже на извращение, в этом случае легче будет описать дату в отдельном теге <abbr />

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

            С location здесь другая проблема: человек, добавляющий событие, не обязан жить либо работать в месте его проведения... Поэтому в данном случае семантический смысл, действительно, скорее всего будет теряться.

            Что, простите? По ссылке обьясняется, как можно те самые «страну, город, место» описывать с помощью hCard.
            Про человека и место его проживания - не понял. И причём там семантика?
              0
              Я имел ввиду то, что форматом hCard обычно описывается личные данные о человеке.
                0
                Вы ошибаетесь.
                hCard is a simple, open, distributed format for representing people, companies, organizations, and places

                Но зато теперь будете знать ;)
                  0
                  Да, спасибо, постараюсь теперь смотреть на вещи менее консервативно :)
          +1
          Я так и не понял, что это такое "микроформаты"...
            +3
            Самое простое - это способ структурирования информации и придания ей дополнительного смысла.

            В хорошо структурированном коде, т.е. таком, в котором соблюдается смысловая вложенность, добавление микроформатов будет выражаться всего лишь в добавлении определённых атрибутов к тегам.
              0
              Тоже не совсем понял, но для себя сложил примерно следющую картину:
              — Мы по определенным правилам (формату МИКРОФОРМАТА) представляем нашу информацию на страние). Эти правила представления видимо заключаются в правилах оформлении и использования тегов и классов
              — По полученной информации у нас, а также у огромного количества людей появляется возможность собрать и обработать предоставленную нами информацию. Допустим сделать парсер рунета в поисках всех используемых тегов на страницах… становиться реальностью в случаю стандартизированного формата представления этих тегов.

              Вот… как мне кажется это что-то такое
            0
            Такое использование аббр неверно с точки зрения семантики XHTML и фактически является хаком, как и все микроформаты в целом, но этот особенно кривой. Альтернативным вариантом является такой:

            <span class="dtstart" title="20070312T1700-06">
            March 12, 2007 at 5 PM, Central Standard Time
            </span>

            Что по этому поводу думают парсеры сказать не могу, но, скорее всего, все они поймут правильно.
              0
              Могу сказать точно, что расширение для firefox "Operator" (https://addons.mozilla.org/ru/firefox/ad…) такой "альтернативный вариант" не признает, и, соответственно, событие остается без даты...
                +1
                Аргументы. Ар-гу-мен-ты. Насчёт хаков и всех микроформатов в целом.

                Насчёт abbr, рекомендую вам почитать и ещё раз почитать, хотя второе вы уже прочитали, вижу. Ну раз вы прочитали, пускай другие почитают.
                  0
                  За вторую ссылочку спасибо, не видел раньше. Не понял поинта с аргументами. Мой аргумент таков, что микроформаты используют стандарнтные XHTML атрибуты не так, как их использование задумано в XHTML. И аббр - тому живой пример. По второй ссылочке как раз и обсуждается предложенное мной решение и почему оно более правильное:) Критику остальных форматов приводит не буду, ссылочку вы уже дали. Основные претензии, конечно, к rel-nofollow и к abbr. Мне кажется наиболее оптимальным вариантом испольовать span/title по-максимуму.
                    0
                    Вот. А говорили «является хаком, как и все микроформаты в целом».
                    К этому высказыванию, собственно, я и просил аргументов.
                  0
                  Ну и ещё критика микроформатов. Тоже рекомендую почитать всем. Чтобы быть в курсе.
                  • НЛО прилетело и опубликовало эту надпись здесь
                    –2
                    А лучше всех микроформатами научатся пользоваться поисковые спамеры-оптимизаторы, которые вернут прекрасно структурированную семантическую сеть в прежнее состояние помойки.
                      0
                      Будем надеяться, что в ответ на введение микроформатов в сети поисковики тоже поднатужатся и сделают "смысловой" поиск по этим самым микроформатам :)
                        0
                        Так вот тогда как раз и начнут спамить! Собственно, страшного ничего нет - это все равно произойдет с любой популярной технологией.

                        Взять, например, del.icio.us: на нем раньше (да и сейчас) искать некоторые вещи было куда эффективнее, чем на гугле. Но некоторое время назад и на нем появились накрутки - т.е. нужные страницы специально добавляются в закладки сотнями виртуальных пользователей с "правильными" тегами и описанием, чтобы всплыть повыше при поиске.
                        0
                        Один довольно известный сайт решил эту проблему радикально - просто запретил всем поисковикам индексировать контент :)
                        0
                        А это как-то можно завязать с другими приложениями?

                        Например событие одним кликом занести в себе в каллендарь, hCard в контакты и т.д.?
                          0
                          Да, расширения для firefox уже позволяют добавлять события в Yahoo, Google и другие календари, находить положение места проведения событий на картах того же Google, а также экспортировать события в формат VCARD, которые легко можно добавить например в календарь MS Outlook. И многое другое....)
                            0
                            Обычно когда пишут про микроформаты об этом говорят очень редко. В итоге люди читают что-то про семантику, а практической пользы не понимают =)

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

                      Самое читаемое