Игорь Шевченко — Новая выдача Поиска для сайта -...
DESCRIPTION
В марте 2013 года был запущен новый вид выдачи Поиска для сайта. На первой Вебмастерской мы немного рассказали о её преимуществах и на несложных примерах продемонстрировали, как можно модифицировать внешний вид выдачи, используя лишь немного CSS, — например, для отображения мобильной версии или выдачи с картинками, например, с весёлыми котиками. Цель этого доклада — показать более сложные и интересные примеры того, как можно изменять внешний вид выдачи при помощи CSS3 и немного JavaScript. Для начала рассказывается о внутреннем устройстве выдачи и о некоторых проблемах, с которыми мы столкнулись в процессе её реализации.TRANSCRIPT
![Page 1: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/1.jpg)
поиск для сайта
Я.Субботник в Санкт-Петербурге, 15 июня 2013
Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript Игорь Шевченко, Разработчик интерфейсов
![Page 2: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/2.jpg)
О чем пойдет речь
Что такое Поиск для сайта
SERP поиска для сайта
Примеры плюшек
![Page 3: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/3.jpg)
Поиск для сайта
![Page 4: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/4.jpg)
Поиск для сайта
Поиск для сайта приносит счастье, упорядочивает хаос и просто радует глаз
![Page 5: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/5.jpg)
5
Посмотреть видео Почитать подробнее
Попробовать
site.yandex.ru
![Page 6: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/6.jpg)
6
Дмитрий Вульбрун, Елена Першина Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи
clck.ru/8gpxR
![Page 7: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/7.jpg)
7
Совершенно бесплатно
![Page 8: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/8.jpg)
8
Учёт морфологии и лексики языка
![Page 9: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/9.jpg)
9
Поисковые подсказки
![Page 10: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/10.jpg)
10
Уточнения результатов поиска
![Page 11: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/11.jpg)
11
Индексирование по запросу
![Page 12: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/12.jpg)
12
Рекламная сеть Яндекса
![Page 13: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/13.jpg)
13
Статистика поисковых запросов
![Page 14: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/14.jpg)
Dom Cobb, Inception movie
«We need to go deeper»
SERP* поиска для сайта
*SERP - Search engine results page
![Page 15: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/15.jpg)
15
Выдача в домене Яндекса – I
![Page 16: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/16.jpg)
16
Выдача в домене Яндекса, настройки
![Page 17: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/17.jpg)
17
Выдача в домене Яндекса - II
![Page 18: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/18.jpg)
18 Только код формы, если используется выдача в домене Яндекса
![Page 19: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/19.jpg)
![Page 20: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/20.jpg)
![Page 21: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/21.jpg)
SERP в домене сайта, Iframe
![Page 22: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/22.jpg)
SERP в домене сайта, Iframe
Связь окно iframe easyXDM:
• PostMessageTransport • HashTransport • NameTransport • FlashTransport • Поддержка практически прекратилась год назад
![Page 23: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/23.jpg)
Давайте сделаем новую выдачу, которая…
![Page 24: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/24.jpg)
SERP в домене сайта, «HTML&CSS»
• Встраивается в html-код страницы • Изначально не разваливается
![Page 25: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/25.jpg)
25
Ой!
#content div {
padding-left: 30px !important; }
![Page 26: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/26.jpg)
SERP в домене сайта, «HTML&CSS»
Встраивается в html-код страницы
• Легко кастомизируется стандартными средствами (CSS)
• Доступна страничному JS
![Page 27: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/27.jpg)
27
На распутьи
• CSS reset или • С классами и id все в порядке, решается довольно легко, но тэги…
![Page 28: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/28.jpg)
28
Кастомные тэги!
![Page 29: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/29.jpg)
29
Кастомные тэги
![Page 30: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/30.jpg)
30
Легкая настройка средствами CSS
![Page 31: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/31.jpg)
![Page 32: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/32.jpg)
![Page 33: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/33.jpg)
33
Чуть больше CSS
![Page 34: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/34.jpg)
34
![Page 35: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/35.jpg)
35
Problems???
![Page 36: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/36.jpg)
36
<xyz> display: inline
![Page 37: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/37.jpg)
37
<xyz-a> <xyz-label>
![Page 38: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/38.jpg)
38
Internet Explorer – HTML5 – html5shiv
![Page 39: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/39.jpg)
39
Internet Explorer – HTML5 – html5shiv
![Page 40: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/40.jpg)
40
Internet Explorer – HTML5 – html5shiv
clck.ru/8gq6a
![Page 41: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/41.jpg)
UnknownHTMLElement
![Page 42: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/42.jpg)
42
UnknownHTMLElement
typeof elem.onclick
elem.onclick = new Function(elem.onclick)
![Page 43: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/43.jpg)
43
«HTML&CSS» выдача Поиска для сайта
Profit!
![Page 44: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/44.jpg)
Плюшки
![Page 45: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/45.jpg)
45
Острова beta.yandex.ru
![Page 46: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/46.jpg)
46
![Page 47: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/47.jpg)
Исходная выдача
![Page 48: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/48.jpg)
Усиленно правим стили
#ya-site-results .b-serp-item {
box-shadow: 0 0 0 1px #dddcda; }
#ya-site-results .b-serp-item__number { display: none;
}
![Page 49: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/49.jpg)
Вот это острова!
![Page 50: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/50.jpg)
MOAR CSS
#ya-site-results { background-color: #dddcda;
} #ya-site-results .b-serp-item {
padding: 12px; margin-bottom: 0.5em; background-color: #fff;
} #ya-site-results .b-serp-list {
max-width: 600px; } #ya-site-results a:link {
color: #2E3657; } #ya-site-results .b-serp-url {
color: #406FAC; } #ya-site-results .b-serp-item__text {
color: #797272; }
![Page 51: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/51.jpg)
51
TA-DA!
![Page 52: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/52.jpg)
Можно использовать
![Page 53: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/53.jpg)
53
CSS Device Adaptation
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
![Page 54: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/54.jpg)
54
Media Query
@media only screen and (max-width: 479px) {
.b-body-items, .b-head__l { padding-left: 1em; } .b-serp-item__title-link { font-size: 150%; }
}
![Page 55: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/55.jpg)
55
Внутри Media Query:
#ya-site-results .b-serp-item__text,
#ya-site-results .b-serp-item__links
{
display: none;
}
![Page 56: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/56.jpg)
56
Внутри Media Query:
#ya-site-results .b-serp-item { position: relative; } .lol { width: 13px; height: 13px; box-shadow: 0 0 0 1px #a0a0a0, 0 0 0 2px #d0d0d0; border-radius: 50%; position: absolute; top: 0.5em; right: 0.5em; background: url(./plusminus.png) 0 0 no-repeat transparent; } .minus { background-position-y: -13px; } .hidden { display: none; }
![Page 57: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/57.jpg)
57
Когда результаты будут готовы…
$('#ya-site-results') .find('.b-serp-item__text, .b-serp-item__links').addClass('hidden'); function megafunction () {
$(this) .toggleClass('minus') .parent().find('.b-serp-item__text, .b-serp-item__links')
.toggleClass('hidden'); }
$('.b-serp-item__title').after('<div class="lol" ></div>'); $('.lol').bind('click', megafunction);
![Page 58: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/58.jpg)
58
Когда сработает событие!
$(document).bind('yass.ready', function () {
… });
![Page 59: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/59.jpg)
59
И только для нашего устройства:
if (window.matchMedia("(max-width: 479px)").matches) {
… }
![Page 60: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/60.jpg)
60
Итого:
if (window.matchMedia("(max-width: 479px)").matches) { $(document).bind('yass.ready', function () { $('#ya-site-results') .find('.b-serp-item__text, .b-serp-item__links').addClass('hidden'); function megafunction () {
$(this) .toggleClass('minus') .parent().find('.b-serp-item__text, .b-serp-item__links')
.toggleClass('hidden'); }
$('.b-serp-item__title').after('<div class="lol" ></div>'); $('.lol').bind('click', megafunction); });
}
![Page 61: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/61.jpg)
61
Тыц!
![Page 62: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/62.jpg)
62
![Page 63: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/63.jpg)
63
MOAR JavaScript!
![Page 64: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/64.jpg)
64
MOAR JavaScript!
Находим на просторах интернета jcarousel
clck.ru/8h8Cg
![Page 65: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/65.jpg)
65
MOAR JavaScript!
$(document).bind('yass.ready', function(event) { var links=[]; $(".b-serp-item__title-link").each(function (){ links.push(this.href); });
function getItemHTML(url) { return '<iframe class="frame" src="'+url+'" style="width: 800px; height: 800px;" /> '; } function itemLoadCallback(carousel, state) { if (state != 'init') { return; } itemAddCallback(carousel, carousel.first, carousel.last, links); } function itemAddCallback(carousel, first, last, data) { for (i = 0; i < data.length; i++) { carousel.add(i+1, getItemHTML(data[i])); } carousel.size(data.length); }
$("#mycarousel").detach().insertAfter(".b-head").jcarousel({ itemLoadCallback: itemLoadCallback, size: 5 }); });
![Page 66: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/66.jpg)
66
MOAR JavaScript! And some CSS…
#ya-site-results .b-serp-list { display: none;
} .frame { border: none; transform: scale(0.25); transform-origin: 0 0; }
![Page 67: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/67.jpg)
67
MOAR JavaScript!
![Page 68: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/68.jpg)
68
Любая дополнительная информация
• Имя автора статьи • Карта • Данные из API-шечки
![Page 69: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/69.jpg)
69
site.yandex.ru
![Page 70: Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022042701/559ee91c1a28abdf618b46e2/html5/thumbnails/70.jpg)
Игорь Шевченко
Разработчик интерфейсов
Twitter: @cyberskunk [email protected]
Спасибо!
Задавайте вопросы в Клубе: clubs.ya.ru/sitesearch
Заходите на сайт сервиса: site.yandex.ru