Какой смысл в семантической разметке, если пользователи никогда об этом не узнают или даже не заботятся? Конечно, есть много хороших ответов. Разработчикам нравится веб-страницы, созданные с помощью семантической разметки, потому что это позволяет легко добавлять презентационные и поведенческие слои в базовый структурный код, а также потому, что в будущем обслуживание становится проще.
Помимо этого, однако, разработчики могут сделать такую семантическую разметку полезной для посетителей сайта, предоставляя эту информацию с помощью различных простых в использовании инструментов. Вот несколько примеров таких инструментов, которые превращают семантическую информацию в виде микроформатов на веб-странице в нечто полезное для посетителя сайта, при этом почти не требуется дополнительных усилий.
Конвертеры файлов hCa * от микроформата до vCa *
Двумя наиболее широко используемыми микроформатами являются микроформаты hCard и hCalendar , каждый из которых смоделирован по ранее существующим спецификациям vCard и vCalendar соответственно. Файлы vCard и, следовательно, микроформат hCard также являются электронными визитными карточками, которые кодируют контактную информацию человека. Файлы vCalendar и микроформат hCalendar кодируют информацию о событиях и расписаниях аналогичным образом независимо от платформы.
Многие приложения и веб-сайты, такие как Календарь Google, используют эти форматы файлов для импорта и экспорта данных. Преобразовав hCard или hCalendar в отдельный файл, вы можете легко и без проблем интегрировать свой веб-сайт и программное обеспечение своего пользователя.
Были написаны многочисленные переводчики, которые позволяют извлекать микроформатированные данные из общедоступных веб-страниц. Все, что нужно сделать веб-разработчику, — это предоставить ссылку на URL-адрес в одну из этих служб переводчиков, при нажатии которой браузер посетителя загружает файл vCard или vCalendar.
Одним из таких приложений является проект Брайана Суда X2V . Прекрасным примером этого является недавнее расписание программ Web Directions South ’08 . Поскольку все расписание конференции было размечено с помощью hCalendar, простая ссылка, подобная этой, дает пользователям возможность загрузить все это.
<a href="http://suda.co.uk/projects/X2V/get-vcal.php?uri=http://south08.webdirections.org/?page_id=88">download this schedule</a> Еще одна из этих услуг — служба новостей Technorati . Сервис Technorati отличается тем, что он также позволяет пользователям «подписаться» на веб-страницу с информацией hCalendar, чтобы при изменении страницы их календарь также автоматически обновлялся. Для этого на боковой панели вики BarCamp предусмотрена следующая простая ссылка.
<a title="Subscribe to the Upcoming Camps schedule in iCal, Sunbird, or Evolution" href="webcal://feeds.technorati.com/events/barcamp.org/">Subscribe to hCalendar</a>
Oomph: набор инструментов для микроформатов
Вы, вероятно, не можете сделать более простой пользовательский интерфейс, чем ссылка, но если вы ищете что-то, чтобы сделать ваши микроформаты hCard и hCalendar более интерактивными, то решение Oomph может быть решением. Oomph — это «набор инструментов» для микроформатов, созданный Microsoft MIX Labs . Это действительно много разных вещей, которые упакованы вместе, поэтому разработчикам легко создавать и показывать микроформаты на своих сайтах.
В частности, одним из компонентов является кросс-браузерный виджет JavaScript, который помещает маленький значок в верхнем левом углу окна просмотра браузера, когда обнаруживает, что на странице присутствует микроформат hCard или hCalendar. Когда пользователи нажимают на значок, появляется наложенная панель, показывающая ряд параметров для просмотра и экспорта встроенных семантических данных. Информация hCalendar отображается слева, а информация hCard — справа. Если отображается более одной кнопки, становятся доступными следующие и предыдущие кнопки для просмотра списка.
Oomph все еще довольно нов, но он набирает обороты довольно быстро, отчасти благодаря некоторым положительным отзывам и потому, что получить оверлей микроформата инструментария Oomph на вашем сайте не может быть проще. Просто вставьте на свои страницы один элемент script который ссылается на JavaScript-библиотеку клиента Oomph, например:
<script type="text/javascript" src="http://visitmix.com/labs/oomph/1.0/Client/oomph.min.js"></script>
Oomph зависит от jQuery, поэтому, если у вас уже нет jQuery на ваших страницах, вам также нужно добавить этот элемент script прямо перед предыдущим:
<script type="text/javascript" src="http://visitmix.com/labs/oomph/1.0/Client/jquery-1.2.6.min.js"></script>
Если вы работаете на WordPress- сайте, есть даже плагин под названием WP-Oomph (действительно написанный вами), который сделает все это за вас. С другой стороны монеты вы можете вставить Oomph JavaScript в веб-сайты, которые вы посещаете как пользователь , используя скрипт Oomph GreaseMonkey, когда вы сами просматриваете веб-страницы.
Mapanui: карманная карта для вашего браузера
Хотя Oomph предоставляет некоторые функции сопоставления, Mapanui — это похожая, но потенциально более точная оверлейная панель, поскольку она использует гео-микроформат, если он доступен в hCard или hCalendar (или в любом другом месте, если на то пошло). SitePoint впервые написал о Mapanui после WebJam 8 , но стоит поближе познакомиться.
Как сказал Алекс , Mapanui — это простое картографическое приложение, которое легко создает плавающую панель Google Maps на любом веб-сайте. Как и Oomph, он сканирует и извлекает данные из любых адресных данных в формате hCard, найденных на странице, но, в отличие от Oomph, он также может идентифицировать гео-тегированные микроформаты и отображать эти местоположения также на панели плавающих карт. Сайт Mapanui предлагает вам интегрировать его с сайтом, добавляя HTML-код таким образом, где вы хотите, чтобы ссылка или кнопка для активации Mapanui отображались:
<div class="vcard"> <div class="street-address">Golden Gate Bridge</div> <span class="locality">San Francisco</span>, <span class="country-name">USA</span>, <span class="geo" style="display:none"><span class="latitude">37.8187740</span><span class="longitude">-122.4784150</span></span> </div> <div id="mapanuiBkmrklt"><a href="javascript:(function(){function%20l(u,i,t,b){var%20d=document;if(!d.getElementById(i)){var%20s=d.createElement('script');s.src=u;s.id=i;d.getElementsByTagName('head')[0].appendChild(s);}s=setInterval(function(){u=0;try{u=t.call()}catch(i){}if(u){clearInterval(s);b.call()}},200)}l('http://www.mapanui.com/bookmarklet/bkmrklt.js','MapanuiJS',function(){return!!(typeof%20MAPANUI=='function')},function(){MAPANUI()})})();">Locate me</a></div>
Конечно, вы можете заменить текст «Найди меня» на любой, что вам нравится, и микроформаты hCard / geo не обязательно должны быть рядом с кнопкой активации. Пока показанный JavaScript все еще вызывается, Mapanui будет находить правильные данные на странице. Некоторые инструменты веб-публикации могут onclick из ссылок javascript: URI и атрибуты onclick , поэтому в некоторых ситуациях может быть необходимо (и обычно предпочтительнее) присоединить этот код к элементам с обработчиками событий.
Вот живой пример расположения моста Золотые Ворота Сан-Франциско, который находится на широте 37,8187740 и долготе -122,4784150 . Вы также можете взять букмарклет Mapanui и добавить его на панель инструментов закладок, чтобы вызвать Mapanui как пользователя любого посещаемого вами веб-сайта.
В конечном счете, микроформаты немного похожи на сантехнику. Они сами по себе мало что делают, но если вы используете предоставленные ими данные, вы можете быстро и легко создать полезную функциональность, за которую посетители будут благодарны.