—»     —»   Schema Microdata - создаем галерею HD-изображений при помощи микроданных от Schema
  Раздел: Руководства   Нет комментариев  

Schema Microdata - создаем галерею HD-изображений при помощи микроданных от Schema



У разработчиков, которые в своей HTML-разметке используют микроданные (Microdata), есть несколько преимуществ. Поисковые системы вроде Google или Yahoo! часто сканируют эти мета-данные на новых веб-страницах. Вы можете представить там вспомогательные атрибуты для текста или медиа-элементов, а также информацию о людях, фирмах, идеях, проектах – о чем угодно.

В данном руководстве мы хотели бы рассказать вам о микроданных Schema, используемых в HTML5-галерее изображений. Динамический контент подпитывается небольшой библиотекой jQuery, поэтому мы можем отображать и миниатюры и полноценные изображения. Коды, представленные здесь, можно копировать и использовать в собственных проектах для отображения lightbox’ов или потокового видео. Это довольно интересная тема, которая предлагает много полезной информации, которую стоит изучить.

Schema Microdata - создаем галерею HD-изображений при помощи микроданных от Schema

Демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.


Полезные ресурсы

Перед тем, как приступить к разработке кода, мы хотели бы снабдить вас парой ссылок, связанных с микроданными. Этот формат сравнительно молодой, но уже сейчас отлично поддерживается всеми поисковыми системами. Мы нашли отличную статью, посвященную поддержке schema-разметки для видео от Google. Практически такой же код можно использовать и с другими schema-объектами.

Schema Microdata - создаем галерею HD-изображений при помощи микроданных от Schema

Еще один полезный ресурс, представленный Google, посвящен инструменту тестирования структурированных данных. В нем вы можете указать ссылку на сайт, либо встроить собственный HTML-контент, а Google просканирует его, и выдаст вам соответствующие мета-данные. Из выпадающего меню Examples вы можете выбрать несколько демо для ознакомления. Это отличный инструмент, который обязательно стоит изучить и использовать, если вы планируете или уже работаете над какими-либо проектами в интернете. Рекомендуем вам даже ознакомиться с ним еще до того, как вы запустите собственные сайт.

Структурируем HTML

Для начала мы создали типичные файлы, которые нужны в любой обычной демо-странице. В нашем index.html мы используем копию jQuery, а также ссылку на локальные таблицы стилей под названием styles.css. Информация в шапки должна быть вам знакома, поэтому давайте сразу перейдем к телу документа.

<body>
<div id="w">
<nav id="thumbnails">
<ul class="clearfix">
<li itemscope itemtype="http://schema.org/ImageObject">
<a itemprop="contentURL" href="images/photo01_lamp_post.jpg"><img itemprop="thumbnailUrl" src="images/photo01_thumb_lamp_post.jpg" alt="lamp post"></a>
<meta itemprop="caption" content="lamp post">
<meta itemprop="publisher" content="http://www.flickr.com/photos/digitaltree515/4002436362/">
</li>

Самая верхняя часть нашей оболочки содержит миниатюры для каждого большого изображения. Они заранее обрезаны до размера 100х100 пикселей. Мы просто скопировали один пункт списка, чтобы вы имели представление о том, как создается schema-разметка в HTML-коде.

Нам нужно определить, какой типа объекта будет использоваться внутри контейнера, который обворачивает наш контент. Так как мы создали неупорядоченный список, мы можем применить это к каждому тегу 'li'. Тем не менее, мы можем просто добавить дополнительный тег 'div' вокруг содержимого.

Ключевое слово itemscope необходимо для того, чтобы иметь возможность сообщить о том, что мы определяем рамки нового пункта. Значение проводится в itemtype в виде полноценного URL, ведущего на документацию объекта в Schema – в данном случае мы используем ImageObject. Если вы не знакомы с различными параметрами элементов, то возможно вам стоит пробежаться по странице документации.

Применяем мета-данные

Здесь важно понимать, что мы можем включать соответствующие микроданные без нужды отображать контент на странице. Каждый список имеет собственный URL до миниатюры изображения, и анкорную ссылку, которая ведет на полное изображение. Мы можем использовать оба эти элемента для предоставления исходной ссылки для разных itemprops “contentURL” и “thumbnailUrl”.

Здесь есть еще кое-что, что можно использовать в целях оптимизации под поисковые системы. Здесь мы можем использовать тег прямо внутри блока объекта, чтобы хранить там дополнительные параметры изображения. Ознакомьтесь с этой статьей, HTML5 Doctor, в которой обсуждаются микроданные внутри HTML-разметки. Все мета-теги будут видны в коде, но ничего не будет отображаться на самой странице. Это классно, так как у вас будет возможность использовать все преимущества мета-данных без необходимости при этом портить внешний вид и наполнение страницы.

<li itemscope itemtype="http://schema.org/ImageObject">
<a itemprop="contentURL" href="images/photo03_grand_piano.jpg"><img itemprop="thumbnailUrl" src="images/photo03_thumb_grand_piano.jpg" alt="grand piano antique"></a>
<meta itemprop="caption" content="grand piano antique">
<meta itemprop="publisher" content="http://www.flickr.com/photos/paulomarquez/3492496989/">
</li>

Мы скопировали еще один пункт списка чуть ниже, чтоб вы могли видеть, что они в принципе схожи. Мы лишь используем 2 разных мета-тега в качестве параметров изображения. Первый отвечает за подпись, которая копируется из альтернативного текста к изображению. Затем мы указываем ссылку на исходную страницу автора на Flickr. Важно учитывать авторские права, и это отличный способ сделать это.

Динамические изображения

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

<div id="container">
<p class="source"><strong>Image Source:</strong> <a href="http://www.flickr.com/photos/digitaltree515/4002436362/" target="_blank" id="mainsource">http://www.flickr.com/photos/digitaltree515/4002436362/</a></p>

<div id="fullimage">
<img src="images/photo01_lamp_post.jpg" width="1024" height="768">
</div>
</div>

Мы добавили полную ссылку на источник, чтобы у пользователей был доступ к исходнику. Для Google это не столь важно, так как мы уже указали нужную информацию в schema-разметке. И если вы не заметили, мы не использовали какие-либо параметры полноценного изображения. Это все потому, что весь внутренний контент динамичен, и будет изменяться. Бессмысленно, при использовании Schema, указывать ярлыки, и лучше всего держать все в одном месте.

<script type="text/javascript">
$(function(){
$('#thumbnails ul li a').on('click', function(e){
e.preventDefault();

var fullurl = $(this).attr('href');
var srcurl = $(this).siblings('meta[itemprop="publisher"]').attr('content');

$('#fullimage img').attr('src',fullurl);
$('#mainsource').attr('href',srcurl);
$('#mainsource').html(srcurl);
});
});
</script>

И наконец, предлагаем вам наш блок кода javascript, который мы добавили в самый низ страницы. После предотвращения загрузки ссылок, нам нужно извлечь значения URL до полноценного изображения, а также исходный URL на страницу Flickr. Учтите, что мы извлекаем эти значения из соответствующего мета-тега при помощи селектора атрибута meta[itemprop="publisher"]. После этого мы можем обновить внутреннее наполнение, и удерживать его статичным до тех пор, пока пользователь не кликнет еще раз.

Schema Microdata - создаем галерею HD-изображений при помощи микроданных от Schema

В завершение

Мы надеемся, что вам понравилось это простое руководство и представленные демо-страницы, и теперь вы знаете, как использовать микроданные в обычных веб-страницах. Галереи изображений сегодня очень популярны среди веб-разработчиков, так как они поддерживаются всеми браузерами. Тем не менее, бывает сложно изменить последовательность контента.

В сравнении с микроформатами, нам кажется, что микроданные Schema.org могут предложить гораздо больше. Предложенная документация более расширенная, и здесь больше исправленных спецификаций, чем черновых вариантов. Это означает, что вы кроме изображений можете работать со многими другими типами и даже попытаться создать собственные типы. Schema – это мощный помощник в деле с разметкой HTML5, и вам обязательно с ним познакомиться!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: Schema
Опубликовал Design FactoRy   Прочитано (раз): 5358   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Остекление балконов и лоджий
Описание видов остекления. Остекление фасадов, лоджий и балконов
bal-com.ru
Скачать фильмы торрент
Рейтинги фильмов. Обзоры фильмов, начиная с 60-х годов. Обзоры фильмов
kinotrek.org
Воздушные шары с логотипом
Праздничное оформление шарами. Украина промышленная - промышленный портал.
magshar.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31