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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

854
views

Published on

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

В марте 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
854
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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