Микроформаты в профиле хабрапользователя

    Сделал тестовую страницу. Под катом описание моих действий.
    ВНИМАНИЕ! Я дописываю и дополняю описание вот прямо сейчас, когда вы это читаете, так что не удивляйтесь появлению новых абзацев.


    С новой строки не жаль новой начать строкой


    Итак, «Хабр» сверстали блоками. Отличный повод начать внедрять в него микроформаты. Заодно почищу тот код, с которым буду иметь дело. Именно такая мысль посетила меня несколько дней назад. Скачал страницу своего профиля, адаптировал её к работе на локальном компьютере (поправил пути к файлам изображений, стилей и т.п.), и приступил к осмотру поля боя.

    Наши новые профайлы


    Прежде чем править код сайта, который писан не вами, хорошо бы изучить его характерные особенности. Итак, что мы видим, глядя внутрь текущей версии страницы хабрапользователя:
    • Страница свёрстана блочно (хорошо, но можно и лучше)
    • DOCTYPE'ом включен режим соответствия стандартам (то, что надо)
    • У элементов не обнулены поля и отступы «по умолчанию» (жаль, придётся обнулять самому)
    • Код местами лихорадочно отбит пробелами, а потому тяжеловесен и плохочитаем


    Пролистав шапку, меню и т.п. принялся изучать содержимое блока с class=«userinfo» — именно он содержит информацию о пользователе. Ему я и назначу дополнительный класс vcard. Это будет указывать на то, что в блоке содержится микороформат hCard.
    <div class="userinfo vcard">

    Порции иформации о пользователе сейчас содержатся внутри типовых конструкций такого вида:

    <div class="userinfo_line">
    <div class="left"></div>
    <div class="right"><span class="username">Максим Россомахин</span></div>
    </div>


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

    В примерах я убрал всю служебную информацию, мешающую восприятию (в основном URL-ы), заменив её троеточиями (…).

    <dl class="fn n">
    <dt> </dt>
    <dd class="username"><span class="given-name">Максим</span> <span class="family-name">Россомахин</span></dd>
    </dl>


    Этот код указывает, что внутри него содержится информация об имени и фамилии персоны.

    Идём далее. Описываем информацию о дате рождения:
    <dl>
    <dt>Дата рождения:</dt>
    <dd class="bday" title="1982-01-26">26 января 1982</dd>
    </dl>


    Описываем ссылку на фотографию:
    <dl>
    <dt>Фото:</dt>
    <dd><img class="photo" src="…" width="136" height="144" alt="" title="" border="0"></dd>
    </dl>


    Настал черёд информации о местоположении пользователя:
    <dt>Откуда:</dt>
    <dd><a class="country-name" href="…">Россия</a>,
    <a class="region" href="…">Архангельская обл.</a></dd>
    </dl>

    Собственно информация о пользователе, которую он сам считает нужным сообщить о себе:
    <dl>
    <dt>О себе:</dt>
    <dd class="summary">Рассказ обо мне, любимом</dd>
    </dl>


    Сайт. Какой же IT-шник без сайта? Обратите внимание на то, что помимо класса "url" я применил также и атрибут rel со значением "me" — это говорит о том, что ссылка ведёт на сайт пользователя, профайл которого мы читаем. Т.е. прямое соответствие конкретного пользователя конкретному сайту. И этот код — не что иное, как микроформат XFN, органично дополняющий микроформат hCard.

    <dl>
    <dt>Сайт:</dt>
    <dd class="url"><a class="icon" rel="me" href="http://webmascon.com/" target="_blank">Webmascon</a></dd>
    </dl>


    Продолжение следует.

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

      0
      поясните непосвященным куда смотреть?
        0
        Внутрь кода. Либо же с помощь Firefox и расширения Operator либо Tails.
        Большего пока не скажу, ибо ответ на ваш вопрос требует обстоятельного разъяснения многого. Почитайте этот блог с самого начала, если заинтересовались. :-)
          0
          Operator - это не то ли кривое расширение, которое догадалось div вставлять в html разметку страницы и портить при этом верстку? Или уже исправили? Мне очень нравилось, пока я не понял как оно работает. Надо же было догадаться.
            0
            Вот чесно — понятия не имею, как оно работает. Мне на данном сам факт работы важен.
              +1
              Плагин реально классный и лучший из тех что я попробовал. Конечно для работы с микроформатами я его включу, но пока он не нужен, пусть валяется себе, ибо портит вид сайта во время работы и заставляет думать, что за глюки в верстке :)
          +1
          Operator toolbar для FF
          0
          Отлично. Только без комментариев в коде и пояснений - таки "трудновато". Ждем.
            +1
            Если есть Firefox, достаточно включить Web Developer toolbar и выбрать «Information - Display Id&Class details» — сразу станет видно, что чем размечено.
              0
              Будут. Вот только поужинаю.
              0
              В профиле ещё нужно внедрить XFN для «друзей».

              Кроме того, на Хабре стоит внедрить rel-tag (ясно где) и hCard для компаний тоже.
                0
                XFN я туда внедрил уже :-)
                В блоке с id="friends_list" есть примеры.

                В Хабр можно много чего внедрить, если глубоко задуматься.
                0
                А для ICQ кстати нет общепринятого обозначения протокола (как «xmpp:» для JID-URL'ов Jabber)? В vCard нет инфраструктуры для обозначения типа адреса элемента URL в отрыве от самого значения.
                0
                Очень жаль, что для FF нет плагина переписывающего страницу на основе регулярных выражений (ну не знаю я JS для Greasemonkey). Можно было бы переписать сайт под себя или по крайней мере подстроить получше.
                  0
                  Освоить регулярные выражения в JS — дело пяти минут :)
                  +1
                  Кстати, <link> тоже бы не помешал
                    0
                    link-навигация?
                      0
                      Да, с расширением cmSiteNavigation для FF ими очень удобно пользоваться. Ну и Опера хорошо их поддерживает.
                        0
                        Ага, знаю. Внедрял. Доводилось. Спасибо за то, что напомнил. Переговорю с Мио или Денискиным. Внедрить-то не сложно в принципе.
                        0
                        Не знаете ли вы, реализовано ли где либо в рунете следование WAI или хотя бы хорошее описание того стоит ли овчинка выделки?
                    0
                    спинным мозгом чую, что-то интересное!
                    *побежал читать про микроформаты*
                      0
                      Я себе делаю сейчас, но я использую и FOAF и XFN. Может FOAF для Хабра и перебор (хотя по-моему очень даже нужен, то XFN - нужен. Мы ж соц. сеть!
                        0
                        Я решил начать с малого. Напильником подрихтовать никогда не поздно.
                          +1
                          Это правда. Но микроформаты нужны, ибо социальная сеть...
                        0
                        Очень жаль, что отсутствует валидатор микроформатов т.к. можно сделать вроде как всё правильно, а как дело дойдёт до применения текст куда то может не вставиться. Непонятно на чём проверять готовый код.
                          0
                          Со временем появится, я думаю. Пока можно и так работать.
                            0
                            Дык в файрфоксе же есть какой-то экстеншн, если через него отображается, значит валидно :)
                              +1
                              «Operator и Tails лучший валидатор»?
                                0
                                Вот проверьте мой топик Зомби напали на Apple Store в Сан-Франциско, там есть hcallendar запись которая берётся плагином к FF и потом не вставляется в календарь гугл (хотя может календарь глючит)
                              +2
                              Полезно, спасибо!
                              0
                              Блин, Оператором экспортнул вкард, открыл в Аутлуке - крякозябры. Видимо связано с тем, что кодировка - Win-1251, а не юникод.
                                0
                                Зимой ставил эксперименты на эту тему. Ни Оператор ни Тейлс не экспортировали кирилицу никак ни из какой кодировки. Плагины очень сырые и сделаны понятно не нашими людьми. Врядли с зимы что то изменилось. Удалось найти букмарклет, который прекрасно справляется с задачей экспорта. И работает к тому же не только в Ффоксе :) Рекомендую.

                                Чудно: букмарклет справляется с тем, с чем не справляются плагины. Разруха как всегда в головах.
                                0
                                А почему при экспорте у меня всегда кодировка ломается? И в Operator и в Tail Export.

                                Попробовал у себя на страничке - то же самое =/
                                  0
                                  Нашел 2 ошибки:
                                  1) Дата рождения. "-" не нужны, следовало бы написать 19820126
                                  2) Ссылки. Класс url нужно присваивать тегу < a > , а не < dd >, в текущем варианте выхватывается текст ссылки, а не её адрес.
                                    0
                                    Спасибо. Поправил. В новом Хабре будет правильно.
                                    0
                                    Из-за этого, кстати, Tails на странице ничего не видит :)

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

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