Как стать автором
Обновить

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

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


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


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

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


Прежде чем править код сайта, который писан не вами, хорошо бы изучить его характерные особенности. Итак, что мы видим, глядя внутрь текущей версии страницы хабрапользователя:
  • Страница свёрстана блочно (хорошо, но можно и лучше)
  • 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>


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

Теги:микроформатыmicroformatsХабрахабрпрофиль пользователя
Хабы: Микроформаты
Всего голосов 28: ↑26 и ↓2 +24
Просмотры1.1K

Похожие публикации

Frontend разработчик (Антифрод)
от 150 000 до 280 000 ₽СберМожно удаленно
UX-исследователь (UX-researcher)
от 120 000 до 240 000 ₽Ю-экспертМожно удаленно
Руководитель отдела тестирования (TestLead)
от 180 000 до 200 000 ₽CrafterМосква
Бизнес аналитик
от 1 500 до 2 500 $Profit CenterМожно удаленно
Product Manager
от 120 000 до 180 000 ₽MVP LabМожно удаленно

Лучшие публикации за сутки