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

1,126 views

Published on

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

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,126
On SlideShare
0
From Embeds
0
Number of Embeds
708
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

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

×