Введение
Библиотеки, подобные jQuery, революционизировали способы создания сайтов разработчиками. Они резко ускорили формирование крупномасштабных наборов готовых к применению скриптов, которые разработчикам достаточно добавить к своим HTML-страницам. Микроданные могут продвинуть эту революции еще на один шаг — они упрощают создание скриптов, которые беспрепятственно работают на любом сайте, вне зависимости от различий в HTML-шаблонах.
Например, для демонстрации на карте запланированных мероприятий ("событий") jQuery-плагины интегрируются с картами Google, что облегчает создание интерактивной карты на вашем сайте. Единственно, что требуется от разработчика — создать файл с соответствующими местоположениями в структурированном формате, таком как JSON или CSV. Однако наличие этих данных в виде отдельного файла в структурированном формате может порождать проблемы, если вы хотите отображать информацию страницы и в виде HTML. Чтобы поддерживать контент и в виде HTML, и в виде файла данных, вы должны написать скрипт, который осуществлял бы трансляцию между HTML-страницей и файлом данных. В противном случае вам придется дважды выполнять одну и ту же работу. Этот подход способен очень быстро привести к рассинхронизации между HTML-файлом и файлом данных.
Поддержание синхронизации между файлами является одним главных преимуществ таких форматов HTML-данных, как микроданные и RDFa. Вы можете написать HTML-код обычным образом, а затем добавить несколько атрибутов в соответствующие HTML-теги, чтобы использовать этот код в качестве хранилища для своих данных. Эти форматы HTML-данных являются веб-стандартами, которые разработаны и санкционированы такими организациями, как WHATWG и W3C, поэтому разработчики уже создают инструменты, понимающие, как извлекать данные из HTML. Вы сможете с легкостью использовать эти готовые инструменты на своем сайте.
Поскольку микроданные начали активно применяться лишь недавно, на данный момент выпущено лишь несколько плагинов с их поддержкой. Характерным примером является плагин jQuery UI Map, который поддерживает карты описанного выше типа.
Создание карты событий, готовой к применению Rich Snippets
Достаточно одного небольшого сегмента HTML-кода, чтобы не только получить интерактивную карту событий, но и улучшить поисковую оптимизацию (SEO).
Как рассказывалось в одной из прошлых статей (соответствующая ссылка приведена в разделе
Ресурсы), микроданные можно использовать с терминами из словаря Schema.org, чтобы помочь поисковым машинам лучше понимать ваш контент. Этот подход позволяет поисковым машинам показывать элементы Rich Snippets, которые вводят самую важную информацию о странице непосредственно в результаты поиска. Аннотации, которые добавляются для получения Rich Snippets, могут нести двойную нагрузку. Помимо улучшения результатов поиска, вы можете использовать их на своей странице для улучшения отображения.
С этой целью этого вы будете использовать jQuery-плагин. Я включила соответствующие файлы в пример кода для
загрузки, который содержит несколько измененную версию этого плагина.
Базовый перечень событий
Давайте создадим перечень событий для мероприятий DrupalCamp, проводимых по всему миру. Для начала создайте HTML-страницу с двумя событиями (см.
листинг 1).
Листинг 1. Базовый HTML-перечень с двумя событиями
<!DOCTYPE html>
<head>
<title>Upcoming DrupalCamps</title>
</head>
<body id="doc">
<h1>Upcoming DrupalCamps</h1>
<!-- Event 1: DrupalCamp Toulouse -->
<div>
<h2><a href="http://example.com/drupalcamp_fr">DrupalCamp Toulouse 2011</a></h2>
<img src='images/drupalicon_fr.png' />
<p>Vous l’attendiez tous, le DrupalCamp Toulouse aura bien lieu,
réuni avec 2 autres événements sous la bannière
"Capitole du Libre": le DrupalCamp, une Ubuntu Party, une Akademy
(évènement KDE).</p>
<div>
ENSEEIHT, Toulouse, Haute-Garonne, FR
</div>
<div>
<time datetime="2011-11-26T09:00:00+01:00">November 26, 10:00am</time> –
<time datetime="2011-11-27T17:00:00+01:00">November 27, 6:00pm</time>
</div>
</div>
<!-- Event 2: DrupalCamp Ohio -->
<div>
<h2><a href="http://example.com/drupalcampohio">Drupalcamp Ohio 2011</a></h2>
<img src='images/drupalicon_oh.png' />
<p>The Central Ohio Drupal User Group (CODUG) is proud to announce
Ohio’s first Drupalcamp. On Saturday, December 3rd, we’ll hold an
all-day camp with keynote speaker, breakout sessions and Birds of Feather groups at The
Ohio State University’s Nationwide and Ohio Farm Bureau 4-H Center.</p>
<div>
The Ohio State University, Columbus, Ohio, US
</div>
<div>
<time datetime="2011-12-03T09:00:00-05:00">December 3, 9:00am</time> –
<time datetime="2011-12-03T17:00:00-05:00">5:00pm</time>
</div>
</div>
</body>
</html>
Обратите внимание, что вы пометили даты с помощью специального элемента. Это новый элемент time, который является частью базового стандарта HTML5. Он позволяет добавлять к страницам точное время, что упрощает их разбор и их использование приложениями. В нашем примере Google использует эти элементы time для выбора из страницы трех очередных событий для отображения в Rich Snippets. Примечание. На момент публикации этой статьи продолжалось обсуждение замены элемента time на более "типовой" элемент данных. Если это произойдет, то в показанном ниже коде элемент "time" будет заменен элементом "data", а элемент "datetime" будет заменен элементом "value".
Элемент datetime формируется следующим образом. Сначала идет дата в формате YYYY-MM-DD. Затем следует символ "T", отделяющий дату от времени, которое представлено в формате HH:MM:SS. Затем задается смещение относительно времени UTC (всеобщее скоординированное время). Например, во Франции зимнее время на 1 час опережает время UTC, таким образом, сдвиг добавляет +01:00 к концу строки datetime. В Огайо зимнее время на 5 часов отстает от UTC, таким образом, сдвиг добавляет -05:00 к концу строки datetime. Моменту "9 утра 3 декабря 2011 года по центральному поясному времени США" соответствует машиночитаемое значение 2011-12-03T09:00:00-05:00.
Сохраните этот файл в каталоге jquery-ui-map/demos своего веб-сервера и загрузите его в свой браузер. На
рис. 1 показаны подробности обоих событий, описанных в
листинге 1.
Рисунок 1. Базовая страница с двумя событиями
Подготовка событий к применению Rich Snippets
Страница с элементом time содержит некоторый объем информации, понятной машине. Теперь посмотрим, как это дополнение изменило отображение результатов машиной Google. Перейдите к инструменту Google Rich Snippets Testing Tool и введите URL-адрес своей страницы (см.
рис. 2). Вместо подробностей события вы видите ошибки генерации предварительного просмотра, поскольку страница не имеет разметки авторства, разметки rich snippet и информации об авторе.
Рисунок 2. Отсутствие результатов для базовой HTML-страницы в инструменте тестирования Rich Snippets
Даже если машина Google знает, что ваша страница содержит элементы time, она не знает, что они представляют собой моменты начала и окончания событий. Чтобы помочь Google понять это, вам нужно добавить несколько терминов Schema.org (см.
листинг 2). Публикация разметки Schema.org с микроданными более подробно рассматривается в предыдущей статье (соответствующая ссылка приведена в разделе
Ресурсы).
Листинг 2. Ввод в элемент Event блока <div> для каждого события
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
...
</div>
<!-- Event 2: DrupalCamp Ohio -->
<div itemscope itemtype="http://schema.org/Event">
...
</div>
Затем добавьте к событию такие свойства, как url и name. Обратите внимание, что к name добавляется тег <span>, чтобы обеспечить место для добавления атрибута itemprop. Кроме того, вы добавляете свойство image. Для данного Rich Snippet в этом нет необходимости, однако вы используете это свойство позднее.
Листинг 3. Добавление свойств url и name к событиям
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
<h2><a href="http://example.com/drupalcamp_fr" itemprop="url"><span
itemprop="name">DrupalCamp Toulouse 2011</span></a></h2>
<img itemprop="image" src='images/drupalicon_fr.png' />
...
</div>
<!-- Event 2: DrupalCamp Ohio -->
<div itemscope itemtype="http://schema.org/Event">
<h2><a href="http://example.com/drupalcampohio" itemprop="url"><span
itemprop="name">Drupalcamp Ohio 2011</span></a></h2>
<img itemprop="image" src='images/drupalicon_oh.png' />
...
</div>
Теперь вы можете добавить момент начала и (по желанию) момент окончания. Поскольку вы использовали элемент time, у вас уже есть машиночитаемое значение для начала и для окончания. Теперь вам нужно лишь добавить термины Schema.org, чтобы помочь Google узнать, "что к чему" (см.
листинг 4).
Листинг 4. Добавление свойств startDate и endDate к элементам time
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
...
<div>
<time itemprop="startDate" datetime="2011-11-26T09:00:00+01:00">November 26,
10:00am</time> –
<time itemprop="endDate" datetime="2011-11-27T17:00:00+01:00">November 27,
6:00pm</time>
</div>
</div>
<!-- Event 2: DrupalCamp Ohio -->
<div itemscope itemtype="http://schema.org/Event">
...
<div>
<time itemprop="startDate" datetime="2011-12-03T09:00:00-05:00">December 3,
9:00am</time> –
<time itemprop="endDate"
datetime="2011-12-03T17:00:00-05:00">5:00pm</time>
</div>
</div>
Снова протестируйте эту страницу в инструменте Testing Tool. Поскольку эти URL-адреса указывают не на тот домен, на который указывает базовый URL-адрес, вы видите предупреждения, которые препятствуют отображению Rich Snippet (
рис. 3).
Рисунок 3. Предупреждения, препятствующие отображению Rich Snippet
Google требует, чтобы ссылки на события указывали на страницы в том же домене. Это требование призвано противодействовать спамерским методикам. Если вы замените домен example.com своим доменом и осуществите повторное тестирование, вы должны увидеть отображение Rich Snippet (см.
рис. 4).
Рисунок 4. Rich Snippet отображает оба события с датами их начала
Примечание. Даже если инструмент тестирования демонстрирует Rich Snippet, у вас нет гарантии, что Rich Snippet будет показан в реальных результатах поиска. Вы должны сообщить Google о необходимости просмотра вашего сайта до вывода Rich Snippet для ваших страниц в результатах поиска. Для получения дополнительной информации обратитесь к FAQ.
Добавление плагина jQuery UI Map
Поскольку мероприятия DrupalCamps проводятся во всем мире, вашим посетителям потребуется карта, показывающая, какие из этих мероприятий находятся от них в пределах разумного расстояния. Для реализации этой карты необходимо добавить еще немного информации.
Во-первых, настройте карту для отображения. Добавьте в документ блок <div> для размещения карты под заголовком страницы и над списком событий (
листинг 5).
Листинг 5. Добавление блока <div> для карты
<body id="doc">
<h1>Upcoming DrupalCamps</h1>
<div>
<div id="map_canvas"></div>
</div>
<!-- Event 1: DrupalCamp Toulouse -->
Чтобы преобразовать этот блок <div> в интерактивную карту, вам нужно добавить несколько JavaScript-файлов. Также добавьте несколько CSS-файлов, задающих высоту блока
#map_canvas <div>, чтобы его можно было увидеть. Соответствующие локальные файлы включены в исходный код (см. раздел
Загрузка).
Листинг 6. Добавление внешних CSS-файлов, JavaScript-библиотек и jQuery-файлов
<head>
<title>Upcoming DrupalCamps</title>
<!-- External Stylesheets -->
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css" />
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/3.2.0/build/cssbase/base-min.css" />
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/3.2.0/build/cssfonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<!-- Google Maps API and jQuery, served by Google -->
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<!-- jQuery UI Maps files for placing markers and for parsing Microdata -->
<script type="text/javascript" src="../web/jquery.fn.gmap.js"></script>
<script type="text/javascript"
src="../ui/jquery.ui.map.services.js"></script>
<script type="text/javascript"
src="../ui/jquery.ui.map.microdata.js"></script>
...
Затем добавьте jQuery-блок, который получает
#map_canvas div при инициализации страницы и превращает эту страницу в карту (см.
листинг 7). Позднее вы расширите эту функцию.
Листинг 7. Инициализация карты
...
<!-- Grab the #map_canvas div and turn it into a map -->
<script type="text/javascript">
$(function() {
map = $('#map_canvas');
map.gmap().bind('init', function () {
});
});
</script>
</head>
После перезагрузки страницы вы увидите карту (см.
рис. 5). Пока на ней не отмечено никаких событий; для отображения этих событий вам еще необходимо добавить определенную информацию.
Рисунок 5. Базовая карта без каких-либо маркеров
Добавление местоположений в микроданные
Прежде чем вы сможете наносить на карту маркеры, вам необходимо добавить в микроданные местоположения соответствующих событий. Пока мы рассматриваем каждый адрес как одиночную строку. Следует, однако, отметить, что адрес состоит из нескольких отдельных частей. Необходимо представить эту структуру в микроданных, чтобы можно было легко и единообразно получать правильные значения даже в том случае, если структура HTML-кода будет впоследствии изменена. Сначала добавьте свойство location (местоположение), которое имеет значение Place (см.
листинг 8).
Листинг 8. Добавление свойства location к событию
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
...
<div itemprop="location" itemscope itemtype="http://schema.org/Place">
ENSEEIHT, Toulouse, Haute-Garonne, FR
</div>
...
</div>
Значение Place может включать название и почтовый адрес. Почтовый адрес представляет собой элемент со своими собственными свойствами, такими как улица (
streetAddress), город (
addressLocality), регион(
addressRegion) и страна (
addressCountry). Этот элемент должен быть представлен в двухбуквенном коде страны согласно стандарту ISO 3166−1 alpha-2. В
листинге 9 эти свойства разделены с помощью тегов span.
Листинг 9. Использование тегов span
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
...
<div itemprop="location" itemscope itemtype="http://schema.org/Place">
<span itemprop="name">ENSEEIHT</span><br />
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Rue Sylvain Dauriac</span><br />
<span itemprop="addressLocality">Toulouse</span>,
<span itemprop="addressRegion">Haute-Garonne</span>,
<span itemprop="addressCountry">FR</span>
</span>
</div>
...
</div>
Вы можете отформатировать адреса для других событий аналогичным образом.
Нанесение местоположений на карту
Теперь вы готовы к нанесению маркеров на карту. Сначала осуществите разбор микроданных на странице в объекты, которые вы сможете использовать. С этой целью укажите, какой тип элемента верхнего уровня является источником нужных вам данных. Элементы верхнего уровня в микроданных могут рассматриваться как корневые элементы; они не являются свойствами любого другого элемента, но имеют собственные свойства. Укажите
http://schema.org/Event. Это обеспечит возвращение объекта для каждого события Event (см.
листинг 10).
Листинг 10. Разбор микроданных в объекты
<script type="text/javascript">
$(function() {
map = $('#map_canvas');
map.gmap().bind('init', function () {
// Process the microdata for each Event into an object.
map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
window.console.log(result);
});
});
});
</script>
Созданный из микроданных объект вы сможете увидеть в JavaScript-консоли таких браузеров, как Firefox и Chrome. Каждый элемент в микроданных транслируется в объект со своим объектом свойств, который содержит все значения itemprop этого элемента. Поскольку свойства в микроданных могут иметь несколько значений, значения itemprop обрабатываются как массивы (см.
рис. 6).
Рисунок 6. Исследование объекта в JavaScript-консоли браузера Chrome
Этот объект имеет все свойства, необходимые вам для получения географических координат местоположения, которые, в свою очередь, необходимы вам для размещения маркера для соответствующего события. Чтобы получить эту информацию, извлеките из объекта части адреса и объедините их в адресной строке, которую сможет понять машина Google. Затем вы можете использовать инструмент Google Geocoder с целью получения координат для этого адреса. Библиотека jQuery UI Map предоставляет функцию упаковщика (wrapper), которую вы можете использовать для исполнения запроса к Geocoder.
Примечание. При получении неопределенной ошибки дважды щелкните мышью, чтобы убедиться в наличии всех требуемых свойств у всех перечисленных событий (см.
листинг 11).
Листинг 11. Исполнение запроса к Geocoder для адреса
<script type="text/javascript">
$(function() {
map = $('#map_canvas');
map.gmap().bind('init', function () {
// Process the Microdata for each Event into an object.
map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
// Traverse from the Event to the Place and from the Place to the
// Address to get the properties.
var placeName = result.properties.location[0].properties.name[0];
var streetAddress =
result.properties.location[0].properties.address[0].properties.streetAddress[0];
var city =
result.properties.location[0].properties.address[0].properties.addressLocality[0];
var state =
result.properties.location[0].properties.address[0].properties.addressRegion[0];
var country =
result.properties.location[0].properties.address[0].properties.addressCountry[0];
// Join the address parts into a comma-separated string.
var address = [placeName, city, state, country].join(', ')
// Run the Geocoder request for the address.
map.gmap('search', {'address': address } , function(result, status) {
window.console.log(result);
// We will place the marker here.
});
});
});
});
</script>
Посмотрите на результат в консоли – вы увидите, что сервис возвратил одно или несколько местоположений, соответствующих вашему адресу. Вы будете использовать только первое из этих местоположений, поскольку оно обладает максимальным соответствием. Объект имеет свойство geometry, которое содержит необходимую вам информацию о географических координатах (см.
листинг 12).
Листинг 12. Нанесение маркеров
<script type="text/javascript">
$(function() {
map = $('#map_canvas');
map.gmap().bind('init', function () {
// Process the Microdata for each Event into an object.
map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
// Traverse from the Event to the Place and from the Place to the
// Address to get the properties.
var placeName = result.properties.location[0].properties.name[0];
var streetAddress =
result.properties.location[0].properties.address[0].properties.streetAddress[0];
var city =
result.properties.location[0].properties.address[0].properties.addressLocality[0];
var state =
result.properties.location[0].properties.address[0].properties.addressRegion[0];
var country =
result.properties.location[0].properties.address[0].properties.addressCountry[0];
// Join the address parts into a comma-separated string.
var address = [placeName, city, state, country].join(', ')
// Run the Geocoder request for the address.
map.gmap('search', {'address': address } , function(result, status) {
if (status == google.maps.GeocoderStatus.OK) {
// Create a LatLng object.
var lat = result[0].geometry.location.lat();
var lng = result[0].geometry.location.lng();
var latlng = new google.maps.LatLng(lat, lng);
// Place the marker.
var markerOptions = {
'bounds':true,
'position': latlng
};
map.gmap('addMarker', markerOptions);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
});
});
});
</script>
После перезагрузки страницы вы должны увидеть маркеры местоположений, как на
рис. 7.
Рисунок 7. Маркеры, нанесенные на карту
Придание карте интерактивных возможностей
Карта будет еще более полезной, если пользователь сможет нажимать на тот или иной маркер для получения сведений о соответствующем событии — например, даты и ссылки на мероприятие. Добавление этих функциональных возможностей не составляет никакого труда.
Сначала извлеките из разобранных микроданных нужную вам дополнительную информацию о соответствующем событии (см.
листинг 13).
Листинг 13. Получение дополнительной информации
<script type="text/javascript">
$(function() {
map = $('#map_canvas');
map.gmap().bind('init', function () {
// Process the Microdata for each Event into an object.
map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
var eventName = result.properties.name[0];
var logo = result.properties.image[0];
var url = result.properties.url[0];
var start = result.properties.startDate[0];
...
});
});
</script>
Прежде чем добавлять маркер к карте, создайте HTML-блок с подробностями события (см.
листинг 14).
Листинг 14. Создание HTML-блока для информационного окна
// Run the Geocoder request for the address.
map.gmap('search', {'address': address } , function(result, status) {
if (status == google.maps.GeocoderStatus.OK) {
// Create a LatLng object.
var lat = result[0].geometry.location.lat();
var lng = result[0].geometry.location.lng();
var latlng = new google.maps.LatLng(lat, lng);
var eventDetails = '';
eventDetails += '<div class="iw">';
eventDetails += '<img src="'+logo+'"></img>';
eventDetails += '<h2><a href="'+url+'">'+eventName+'</a></h2>';
eventDetails += new Date(start).toDateString();
eventDetails += '</div>';
// Place the marker.
...
Затем добавьте подробности события к маркеру, который вы создаете. Воспользуйтесь jQuery-функцией
.click, чтобы указать, какое действие следует выполнять при нажатии посетителя на соответствующий маркер. В этой функции используйте helper-функцию
openInfoWindow из состава библиотеки jQuery UI Map для формирования окна и просто передайте свой HTML-код в качестве контента для этого окна (см.
листинг 15).
Листинг 15. Добавление информационного окна InfoWindow в качестве click-события
// Place the marker.
...
map.gmap('addMarker', markerOptions).click( function() {
map.gmap('openInfoWindow', { 'content': eventDetails }, this );
});
После выполнения этой задачи перезагрузите страницу, а затем нажмите на маркер. Вы увидите всплывающее окно с подробностями события (см.
рис. 8).
Рисунок 8. Click-событие при нажатии на маркер
Для улучшения внешнего вида добавьте несколько CSS-правил. Они включены в загружаемый код примера (см. раздел
Загрузка). В конечном итоге ваша карта будет выглядеть, как показано на
рис. 9.
Рисунок 9. Итоговый вид карты
Заключение
Посредством jQuery-плагинов микроданные упрощают динамическое использование данных на веб-странице, например, использование данных на картах Google Maps. Спецификация микроданных определяет типовые скрипты, которые вы сможете использовать в качестве плагинов на разных сайтах, не связанных друг с другом. Кроме того, микроданные упрощают комбинирование данных с нескольких различных сайтов при создании новых приложений. В следующей статье я продемонстрирую, как можно использовать Drupal для создания такого
Привет друзья! Наконец-то, после десятка писем на почту с просьбой поделиться скриптом, решил рассказать вам про свой универсальный скрипт формы обратной связи, который работает на AJAX, имеет встроенную проверку полей формы на валидность и подойдет для любого сайта на любом движке, или даже на чистом html.
