Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript
Upcoming SlideShare
Loading in...5
×
 

Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript

on

  • 1,144 views

В марте 2013 года был запущен новый вид выдачи Поиска для сайта. На первой Вебмастерской мы немного рассказали ...

В марте 2013 года был запущен новый вид выдачи Поиска для сайта. На первой Вебмастерской мы немного рассказали о её преимуществах и на несложных примерах продемонстрировали, как можно модифицировать внешний вид выдачи, используя лишь немного CSS, — например, для отображения мобильной версии или выдачи с картинками, например, с весёлыми котиками.

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

Statistics

Views

Total Views
1,144
Views on SlideShare
492
Embed Views
652

Actions

Likes
0
Downloads
0
Comments
0

5 Embeds 652

http://tech.yandex.ru 384
http://events.yandex.ru 203
https://tech.yandex.ru 60
http://test1e.tech.yandex.ru 3
http://news.google.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript Presentation Transcript

  • поиск для сайта Я.Субботник в Санкт-Петербурге, 15 июня 2013 Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaScript Игорь Шевченко, Разработчик интерфейсов
  • О чем пойдет речь Что такое Поиск для сайта SERP поиска для сайта Примеры плюшек
  • Поиск для сайта View slide
  • Поиск для сайта Поиск для сайта приносит счастье, упорядочивает хаос и просто радует глаз View slide
  • 5 Посмотреть видео Почитать подробнее Попробовать site.yandex.ru
  • 6 Дмитрий Вульбрун, Елена Першина Яндекс.Поиск для сайта. HTML+CSS: новые возможности дизайна выдачи clck.ru/8gpxR
  • 7 Совершенно бесплатно
  • 8 Учёт морфологии и лексики языка
  • 9 Поисковые подсказки
  • 10 Уточнения результатов поиска
  • 11 Индексирование по запросу
  • 12 Рекламная сеть Яндекса
  • 13 Статистика поисковых запросов
  • Dom Cobb, Inception movie «We need to go deeper» SERP* поиска для сайта *SERP - Search engine results page
  • 15 Выдача в домене Яндекса – I
  • 16 Выдача в домене Яндекса, настройки
  • 17 Выдача в домене Яндекса - II
  • 18 Только код формы, если используется выдача в домене Яндекса
  • SERP в домене сайта, Iframe
  • SERP в домене сайта, Iframe Связь окно iframe easyXDM: • PostMessageTransport   • HashTransport   • NameTransport   • FlashTransport   • Поддержка  практически   прекратилась  год  назад  
  • Давайте сделаем новую выдачу, которая…
  • SERP в домене сайта, «HTML&CSS» •  Встраивается в html-код страницы •  Изначально не разваливается
  • 25 Ой! #content div { padding-left: 30px !important; }
  • SERP в домене сайта, «HTML&CSS» Встраивается в html-код страницы •  Легко кастомизируется стандартными средствами (CSS) •  Доступна страничному JS
  • 27 На распутьи •  CSS reset или •  С классами и id все в порядке, решается довольно легко, но тэги…
  • 28 Кастомные тэги!
  • 29 Кастомные тэги
  • 30 Легкая настройка средствами CSS
  • 33 Чуть больше CSS
  • 34
  • 35 Problems???
  • 36 <xyz> display: inline
  • 37 <xyz-a> <xyz-label>
  • 38 Internet Explorer – HTML5 – html5shiv
  • 39 Internet Explorer – HTML5 – html5shiv
  • 40 Internet Explorer – HTML5 – html5shiv clck.ru/8gq6a
  • UnknownHTMLElement
  • 42 UnknownHTMLElement typeof elem.onclick elem.onclick = new Function(elem.onclick)
  • 43 «HTML&CSS» выдача Поиска для сайта Profit!
  • Плюшки
  • 45 Острова beta.yandex.ru
  • 46
  • Исходная выдача
  • Усиленно правим стили #ya-site-results .b-serp-item { box-shadow: 0 0 0 1px #dddcda; } #ya-site-results .b-serp-item__number { display: none; }
  • Вот это острова!
  • 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; }
  • 51 TA-DA!
  • Можно использовать
  • 53 CSS Device Adaptation <meta name="viewport" content="width=device-width, initial-scale=1, maximum- scale=1">
  • 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%; } }
  • 55 Внутри Media Query: #ya-site-results .b-serp-item__text, #ya-site-results .b-serp-item__links { display: none; }
  • 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; }
  • 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);
  • 58 Когда сработает событие! $(document).bind('yass.ready', function () { … });
  • 59 И только для нашего устройства: if (window.matchMedia("(max-width: 479px)").matches) { … }
  • 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); }); }
  • 61 Тыц!
  • 62
  • 63 MOAR JavaScript!
  • 64 MOAR JavaScript! Находим на просторах интернета jcarousel clck.ru/8h8Cg
  • 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 }); });
  • 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; }
  • 67 MOAR JavaScript!
  • 68 Любая дополнительная информация •  Имя автора статьи •  Карта •  Данные из API-шечки
  • 69 site.yandex.ru
  • Игорь Шевченко Разработчик интерфейсов Twitter: @cyberskunk cyberskunk@yandex-team.ru Спасибо! Задавайте вопросы в Клубе: clubs.ya.ru/sitesearch Заходите на сайт сервиса: site.yandex.ru