Микроформаты в жизнь. Практическое применение.

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

    Например, в настоящий момент livejournal не поддерживает микроформаты в профайлах пользователей. Однако этот момент мы можем устранить своими силами, опубликовав в своем профайле следующий код:
    <div class="vcard" style="padding:8px;font-size:12px;height:116px;background-color:#fff3d2;">
    <img src="http://horsev.dp.ua/avao1001.jpg" alt="photo" class="photo"/ style="float:left;margin:0 8px 8px 0;">
    <a class="url fn n" href="http://horsev.dp.ua/"><span class="given-name">Andrey</span> <span class="additional-name">P.</span> <span class="family-name">Horsev</span></a>
    <div class="org">908</div>
    <div class="adr">
    <div class="street-address">Rogaleva, 10</div>
    <span class="locality">Dnipropetrovsk</span>, <span class="postal-code">49000</span><span class="country-name">Ukraine</span>
    </div>
    <div class="tel">+38 0562 476808</div>
    </div>
    Выглядеть всё это может довольно симпатично (css на ваше усмотрение, главное правильно указать названия классов для микроформата). Например так:

    <img src=«horsev.dp.ua/avao1001.jpg» alt=«photo» class=«photo»/ style=«float:left;margin:0 8px 8px 0;»>Andrey P. Horsev
    908 Rogaleva, 10Dnipropetrovsk, 49000 Ukraine+38 0562 476808

    Проверить как все работает можно с помощью описаного выше расширения. И на этой странице тоже уже лежит моя карточка в микроформате. Плагин сформирует Vcard для вашей адресной книги.

    Теперь о минусах — адрес электронной почты. Я не хочу в открытом формате выкладывать свой e-mail (по понятным причинам) и в приведенном выше коде поля такого нет, к сожалению на данный момент это очень неприятная деталь.

    Несмотря на это, желаю успехов, в популяризации концепции Микроформатов!
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 25
    • +4
      Я бы может чуть логичнее стуктуру сделал. А то эти спаны ;)

      <dl class="vcard">
         <dt>
            <img src="http://horsev.dp.ua/avao1001.jpg" alt="photo" class="photo"/>
            <a class="url fn n" href="http://horsev.dp.ua/"><span class="given-name">Andrey</span> <span class="additional-name">P.</span> <span class="family-name">Horsev</span></a>
         </dt>
         <dd>
            <div class="org">908</div>
            <ul class="adr">
               <li class="street-address">Rogaleva, 10</li>
               <li class="locality">Dnipropetrovsk</li>
               <li class="postal-code">49000</li>
               <li class="country-name">Ukraine</li>
            </ul>
            <div class="tel">+38 0562 476808</div>
         </dd>
      </dl>
      • 0
        Просто для списков пришлось бы css много втавлять, а я поленился. Ни и чтобы наглядней было.
      • 0
        Объясните, пожалуйста, поподробнее, что такое микроформаты ;) ну или хотя бы ссылочку дайте
        • 0
          Этот блог, Микроформаты, вниз пролистайте :)
          • 0
            Это Вы об этой статье говорили?.. ну что ж, прочитал, понравилось) насколько я понял, на хабре тоже используются микроформаты - например, когда есть ссылка на личную страничку, например, мою, то применяется МФ, к-рый делает свой стиль текста и ссылки и т.д.

            Я правильно понял? ;)
        • 0
          Я бы посоветовал Вам почитать ещё и вот эту статью — там всё очень легко и подробно расписано.
        • 0
          Как я понял, микроформаты - для унификации. Чтобы немецкий такой был порядок.
          Только сейчас от них мало пользы, да? Только Vcard. Rossomachin, как еще можно использовать микроформаты? На каких сайтах они уже применяются?
          Сейчас, чтобы микроформаты заработали в полную мощь нужно большое количество сайтов (их применяющих)?
          • 0
            Не совсем так. На самом деле объёмы микроформатированного контента уже сейчас значительны (и растут всё время) — необходимо увеличение числа инструментов, способных с этим контентом работать. И тут разработчикам открываются широкие перспективы.
          • 0
            Ещё много осталось непонятного, конечно, но одно я понял точно: микроформаты позволяют ускорить поиск, хотя бы даже в пределах одного сайта. В посте был такой кусок кода:
            span class="family-name"Horsev/span

            Это значит, что при задании поиска "По фамилии" и введении туда "Horsev" в каждой карточке будет искаться только family-name.
            P.S. сделал без скобок, потому что иначе не отображалось ;)
            • 0
              Почему-то при попытке вставить подобный код в профайл LJ парсер вырезает все параметры style :\
              Это мои проблемы или ЖЖ? %)
              • 0
                Думаю вы правы, но классы остаются поэтому vcard всё же генерируется.
                • 0
                  таковы настройки безопасности lj
                • 0
                  • 0
                    хороший раздел
                    хороший пример разметки

                    как метить - всё ясно

                    а сикать то как? типа Xquery или Xpath по XML?
                    это же краней трудоёмко и тяжело

                    сли ли примеры применения не только для разметки, но для обратного процесса - поиска?
                    • 0
                      Присоединяюсь к вопросу.
                      • 0
                        А в чем, простите, тяжесть поиска с помощью XPath и XQuery?
                        Уже придумали что-то более удобное для навигации по XML-деревьям?
                        Просветите ;)
                        • 0
                          "тяжесть поиска с помощью XPath и XQuery" в ресурсоёмкости.
                          другого ничего не придумали, но это и не значит, что надо парится с тем что есть.

                          самое главное, что я отнють не уверен что ХТМЛ страница со вставками микроформатов является валидным XML-деревом.

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