Для багатьох людей ефективність пошуку інформації в Інтернеті - це ті самі ноги, які вовка годують. Де знайти актуальну і свіжу інформацію? Де купити дешевше, а продати дорожче? Де знайти максимально точні інструкції для виконання тих чи інших завдань? Де подивитися фільми онлайн? Щоб максимально коректно відповідати на ці та подібні запитання користувачів пошукові системи з року в рік вдосконалюють і без того витончені механізми подання сайтів в пошукових ведучих по конкретним призначеним для користувача запитів. Мета пошукових систем - відвести людей на якомога більш якісний сайт для отримання відповіді на поставлені запитання.

Крім пошукових механізмів, самі пошуковики оснащені фільтрами пошуку, щоб будь-який користувач міг звузити область пошуку інформації або конкретизувати свій запит.

Розглянемо нижче деякі з пошукових розширень, якими можна доповнити популярні браузери, і, як наслідок - збільшити ефективність пошуку інформації в Інтернеті.

Пошукові розширення для Google Chrome

Search the current site

Внутрішнім пошукачем облаштований не кожен сайт, і на таких ресурсах доводитися довго бігати з розділу в розділ в пошуках конкретної інформації. Впроваджених в браузер розширення для пошуку всередині сайту - універсальний інструмент, який буде завжди під рукою, на якій би сайт ви не потрапили. Все, що необхідно зробити для пошуку потрібної інформації всередині якогось сайту, це ввести ключовий запит в невелике пошукове поле, що з'являється при натисканні кнопки розширення на панелі браузера.

У новій вкладці браузера відкриються результати пошуку пошукача, і в них будуть відібрані сторінки конкретного сайту, де зустрічається ключове слово.

Search the current site впроваджується з попередньо встановленою пошуковою системою Google, але в параметрах розширення можна встановити інший пошуковик - Яндекс, Yahoo або Bing. Для цього на кнопці розширення викликаємо контекстне меню і вибираємо команду «Параметри».

У новій вкладці браузера відкриються параметри розширення, де можемо вибрати іншу пошукову систему. І вже вона буде здійснювати пошук усередині сайту.

Альтернативний пошук Google

Пошукова система Яндекс спочатку передбачає можливість шукати інформацію в двох інших пошукових системах - Google і Bing - одним кліком, правда посилання для переходу в ці пошуковики разом з введеним ключові запитом туляться в самому низу сторінки результатів пошуку.

А ось Google в цьому плані більш егоїстичний - в його результатах пошуку немає ніяких згадок про пошукових системах-конкурентах. Виправити цю ситуацію можна, запровадивши в Google Chrome розширення «Альтернативний пошук Google».

Чим постійно за кожним разом вводити в доважок до ключового слова «торрент», щоб отримати результати пошуку по торрент-трекера, простіше встановити спеціальне розширення для цих цілей TMS (Torrents MultiSearch).

Кнопка розширення впроваджується в панель інструментів браузера, і при її натисканні відкриється невелике пошукове поле для введення запиту.

Результати пошуку з'являються в окремій вкладці, і це буде контент, знайдений тільки на торрент-трекерах Рунета, а не на сайтах-виразника, софт-і медійних порталах або офіційних сайтах.

У результатах пошуку по торрент-трекерах знайдений контент можна відфільтрувати за розміром файлу або датою його викладки. Для звуження пошуку можна задати додатково ключові слова.

Результати пошуку також можна дивитися окремо по конкретним торрент-трекера і окремо за такими типами контенту, як фільми, музика, програмне забезпечення.

Крім цього, розширення TMS впроваджується в контекстне меню браузера, щоб можна було відправити в пошук по торрент-трекера будь-яке слово або фразу, виділені на сторінках в Інтернеті без зайвої метушні з копіюванням і вставкою.

контекстний пошук

У Google Chrome впроваджена функція контекстного пошуку за допомогою одного пошукача, встановленого в браузері за замовчуванням. Збільшити число пошукових систем, за допомогою яких можна шукати будь-яке виділене слово на сторінках сайтів, покликане розширення «Контекстний пошук».

У розширенні спочатку присутня можливість пошуку по популярному торрент-трекеру RuTracker, по Вікіпедії і по медійного порталу Kinopoisk.Ru.

Інші пошукові системи, щоб через них можна було б шукати інформацію прямо з контекстного меню браузера, додаються в параметрах розширення. Відкриємо меню Google Chrome, виберемо «Налаштування» і перейдемо в розділ розширень, встановлених в браузері.

У переліку розширень вибираємо потрібне нам - «Контекстний пошук». Тиснемо посилання «Параметри».

Пошукові розширення для Opera

Search within the site

Кнопка розширення знаходиться на панелі інструментів браузера, і, натиснувши на неї, можна викликати пошукове поле для введення ключового запиту, а також змінити пошуковик.

Попередньо Яндекс і Google в налаштуваннях розширення можна доповнити іншими пошуковими системами. Викличемо на кнопці розширення контекстне меню і вибираємо команду «Налаштування».

Точно так же, як і у випадку з розширенням «Контекстний пошук» для Google Chrome, для додавання нової пошукової системи необхідно ввести її URL-рядок.

Torrents MultiSearch

Similar image search

Similar image search додає в контекстне меню браузера Opera додаткову команду пошуку схожих зображень за допомогою декількох пошукових систем.

Або буде представлений список публікацій зі схожими картинками.

Пошукові розширення для Mozilla Firefox

Пошук по сайту

Як і в попередніх двох випадках, спеціальне розширення для пошуку всередині будь-якого сайту в Інтернеті існує і для браузера Mozilla Firefox.

Тільки у випадку з Вогненним Лисом пошук по сайту вбудовується в існуючу пошукове поле браузера, додаючи перед значком звичайного пошуку свій значок у вигляді червоного збільшувального скла.

Зміна пошукач за умовчанням для звичайного пошуку Mozilla Firefox тягне за собою і зміну пошукача і для пошуку всередині сайтів.

Розширення «Пошук по сайту» інтегрується в контекстне меню Mozilla Firefox, і, виділивши будь-«ліпше під руку» слово, в окремих результатах пошуку можна побачити всі сторінки сайту, де це слово присутнє.

Пошук від byffox

Будь-які програмні продукти з такими «ще не подорослішали» назвами, як правило, дратують багатьох користувачів тим, що в них ну ніяк не вбачається навіть натяк про цільове призначення пропонованого інструментарію.

І про те, що саме пропонує «Софтина від Васі» або «Ріпак ігрулю від Петі», доводиться дізнаватися лише при детальному ознайомленні з описом. Проте, за таким легковажним назвою, як «Пошук від byffox», криється корисний і тлумачний функціонал. Це розширення дозволяє поповнити контекстне меню браузера додаткової командою пошуку виділеного слова за допомогою різних пошукових систем.

Ця замітка є продовженням попередньої статті (переведення) "Пошук для блогу за допомогою Google AJAX Search API і jQuery".
Після її написання я задумався про те, де буде найвдаліше розташувати таку форму і килим результатів, крім окремої сторінки. Ідея не змусила себе довго чекати: логічно спробувати пошук з результатами у спливаючому вікні.

спочатку демка:

Пошук по блогу ↓

Як "фундаменту" для спливаючого пошуку я вибрав jQuery плагін модальних вікон під назвою Reveal . Він легкий, без зайвих елементів і дуже просто підключається.

установка Reveal.
У секцію шаблону прописуються лінки на скрипт і стилі:
Не забудьте, що в архів плагіна є картинка png, яку потрібно покласти в свій альбом Пікасо і прописати шлях до неї в reveal.css.

Наступні крок - форматувати плагін " настроювальна" скриптом (Кладемо туди ж):

потім визначаємо вміст сплив вікна (Це кладемо в тіло поста):

Пошук по блогу ↓

сюди вставляємо всі коди пошуку зі статті "Пошук для блогу за допомогою Google AJAX Search API і jQuery".

Згідно з моїм коментарем всередині цього коду, копіпаст туди весь "гуглопоіск", Про який йде зараз мова. У шаблоні стилів css доведеться збільшити площу білого квадрата.

І останній крок - сама посилання на модальне вікно, Яка може бути як текстової, так і графічної. Код посилання у вигляді картинки (теж в тіло поста):

У Reveal, Плагіна модальних вікон, є два види анімації: fade і fadeAndPop, Регульована швидкість виконання ефекту: animationspeed: 300, І можливість закрити все вікно, клікнувши по затемнених фону: closeonbackgroundclick: true.

Ці настройки записуються в "настроювальний" скрипт (див. Вище):

$ ( "# MyModal"). Reveal ((animation: "fadeAndPop", // fade, fadeAndPop, none animationspeed: 300, // how fast animtions are closeonbackgroundclick: true, // if you click background will modal close? Dismissmodalclass: "close-reveal-modal" // the class of a button or element that will close an open modal));

Або ж ці опції можна підключати через посилання на модальне вікно (див. вище)

Слід розуміти, що така схема з пошуком в окремому вікні - чистої води експеримент і вимагає більш ретельної кастомізації.

В даному уроці ми створимо розкривається форму пошуку, яка відмінно впишеться в дизайн інтерфейсу для мобільних пристроїв. Для реалізації елемента буде використовуватися тільки CSS - ніякого JavaScript і додаткової розмітки. Простий і ефективний спосіб для реалізації компактної форми пошуку.

призначення

На мобільних пристроях йде облік кожного пікселя. Для мінімізації необхідного для виведення форми простору вона буде спочатку показуватися в компактній формі і розкриватися по отриманню фокусу введення (: focus). Такий підхід дозволяє зберегти місце для інших елементів інтерфейсу і змісту.

розмітка HTML

Для форми використовується HTML5. Код дуже простий:

Скидаємо вид для форми пошуку за замовчуванням в браузерах Webkit

За замовчуванням в браузерах Webkit форма пошуку матиме такий вигляд:

Для того, щоб форма пошуку виглядала як звичайне поле введення тексту потрібно додати наступні стилі:

Input (-webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%;) input :: - webkit-search-decoration, input :: - webkit- search-cancel-button (display: none;)

Формуємо нашу форму пошуку

Поле введення матиме звичайну ширину 55px і розкриватися для 130px в стані: focus. Властивість transition використовується для анімації, а box-shadow використовується для ефекту світіння.

Input (background: #ededed url (img / search-icon.png) no-repeat 9px center; border: solid 1px #ccc; padding: 9px 10px 9px 32px; width: 55px; / * Ширина за замовчуванням * / -webkit- border-radius: 10em; -moz-border-radius: 10em; border-radius: 10em; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s;) input: focus ( width: 130px; / * Ширина при наявності фокусу введення * / background-color: #fff; border-color: # 6dcff6; -webkit-box-shadow: 0 0 5px rgba (109,207,246, .5); -moz-box- shadow: 0 0 5px rgba (109,207,246, .5); box-shadow: 0 0 5px rgba (109,207,246, .5); / * Ефект світіння * /)

приклад У

У прикладі B форма пошуку істотно мінімізована - виводиться тільки іконка без заповнює тексту. Зверніть увагу, що змінилися властивості padding і width для поля пошуку, щоб сформувати круглу кнопку. Для того, щоб текст був невидимий використовується властивість color: transparent.

# Demo-b input (width: 15px; padding-left: 10px; color: transparent; cursor: pointer;) # demo-b input: hover (background-color: #fff;) # demo-b input: focus (width : 130px; padding-left: 32px; color: # 000; background-color: #fff; cursor: auto;)

Сумісність з браузерами

Описаний метод працює у всіх основних браузерах: Chrome, Firefox, Safari, і IE8 +. У IE7 і старих браузерах функціонал не діє через відсутність підтримки псевдо-класу: focus і типу поля пошуку.

Жовтень 25, 2019 Запис була оновлена

Висувається форма пошуку на сайт

Стиль Flat знайшов чималу популярність при дизайні сайтів. І в цьому уроці ми розглянемо ще один елемент сайту, який зроблений в цьому стилі. Це елемент - форма пошуку. Але не проста, а форма пошуку яка з'являється при натисканні і «згортається» якщо її не використовують. Що стосується іконки пошуку, то вона береться з SVG-файлу і є масштабованої при різних дозволах екрану (як на мобільних пристроях, так і на великих моніторах).

Приклад можна побачити тут:

завантажити

Висувається форма пошуку

Як використовувати?

HTML

Спершу визначимося з розміткою, яка буде на HTML сторінці:

1 2 3 4 5 6 7

<div id \u003d "sb-search" class \u003d "sb-search"\u003e <form\u003e <input class \u003d "sb-search-input" placeholder \u003d "Що буде шукати?" type \u003d "text" value \u003d "" name \u003d "search" id \u003d "search"\u003e <input class \u003d "sb-search-submit" type \u003d "submit" value \u003d ""\u003e <span class \u003d "sb-icon-search"\u003e </ Form\u003e </ Div\u003e

У формі пошуку нічого незвичайного немає: текстове поле для введення, кнопка пошуку і елемент для іконки.

CSS

Тепер додамо стилів, щоб форма пошуку красиво виглядала на сторінці.

Так як буде з'являтися при кліці, то спочатку вона прихована. Це робиться за допомогою властивості overflowі його значенням hidden, В результаті чого ховається все що знаходиться за межами іконки (в результаті ми бачимо тільки іконку, а текстове поле немає):

.sb-search (position: relative; margin-top: 10px; width: 0%; min-width: 60px; height: 60px; float: right; overflow: hidden; -webkit-transition: width 0.3s; -moz- transition: width 0.3s; transition: width 0.3s; -webkit-backface-visibility: hidden;)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

.sb-search-input (position: absolute; top: 0; right: 0; border: none; outline: none; background: #fff; width: 100%; height: 60px; margin: 0; z-index: 10 ; padding: 20px 65px 20px 20px; font-family: inherit; font-size: 20px; color: # 2c3e50;) input [type \u003d "search"] .sb-search-input (-webkit-appearance: none; -webkit -border-radius: 0px;)

Визначаємо колір тексту, який знаходиться на тлі запиту (тексту, який ми вводимо при пошуку):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.sb-search-input:: -webkit-input-placeholder (color: # efb480;) .sb-search-input: -moz-placeholder (color: # efb480;) .sb-search-input:: -moz- placeholder (color: # efb480;) .sb-search-input: -ms-input-placeholder (color: # efb480;)

Кнопка пошуку знаходиться завжди над іншими блоками і елементами на сторінці, тому задаємо їй велике значення z-index:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.sb-icon-search (color: #fff; background: # e67e22; z-index: 90; font-size: 22px; font-family: "icomoon"; speak: none; font-style: normal; font-weight : normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased;) .sb-icon-search: before (content: " \\ E000 "; }

Також не забуваємо підключити спеціальні іконки (SVG). Для того щоб вставити іконку в кнопці пошуку:

1 2 3 4 5 6 7 8 9 10

@ Font-face (font-family: "icomoon"; src: url ( "../Fonts/icomoon/icomoon.eot"); src: url ( "../Fonts/icomoon/icomoon.eot?#iefix") Format ( "embedded-opentype"), url ( "../Fonts/icomoon/icomoon.woff") Format ( "woff"), url ( "../Fonts/icomoon/icomoon.ttf") Format ( "truetype" script\u003e<script src \u003d "js / uisearch.js"\u003e <script\u003e new UISearch (document.getElementById ( "sb-search"));</ Script\u003e

висновок

Симпатична форма пошуку, яка займає дуже мало місця на сайті і красиво з'являється при натисканні на іконку з пошуком.

ім'я ключа параметра. Для поля пошуку найчастіше застосовується «q» або «text». значення ключа параметра. Частіше за все не задається. Користувач може його змінити на свій текст, якщо не вказані атрибути readonly і disabled. заблоковано зміна користувачем заблоковані доступ, зміну користувачем і передача даних поточного параметра поле не може бути порожнім шаблон введення як в регулярних виразах JS, проходження якого необхідно для відправки форми мінімальну кількість символів, необхідне для відправки форми максимальну кількість символів, яку може набрати користувач довжина поля в символах підказка-заглушка підказка при наведенні курсору мишки автозаповнення. Сучасні браузери показують раніше введені пошукові запити на поточному домені. Можна його відключити або зробити більш конкретизованим. список рекомендованих запитів перевіряється орфографія і граматика фокус поля (тобто період між клацанням по елементу і клацанням поза елементом) отримано при завантаженні документа

Прибрати в поле пошуку хрестик «Очистити», що видаляє раніше набраний текст

Як працює форма пошуку на сайті

Найпростіший HTML-код

Якщо набрати в поле «питання» і клацнути по кнопці «Знайти», то адреса сторінки зміниться з «http: //сайт/2011/06/forma-poiska-po-saitu..html ? Text \u003d питання », Як це відбувається при натисканні на посилання. При завантаженні сторінки, скрипт перевіряє наявність заданих параметрів в URL і при їх виявленні формує і відображає результати пошуку по сайту.

name \u003d "text">

Але з метою збільшення швидкості завантаження документа, скрипт, що обробляє запит, як правило, поміщають тільки на одну сторінку сайту, на яку буде зроблений перехід, якщо її адреса прописати в атрибуті action: « http: // сайт / search /? Text \u003d питання ».

action \u003d "http: // сайт / search /">

Для роботи скрипта можуть знадобитися додаткові параметри, які вказуються в . Це поле не відображається.? searchid \u003d 808327& Text \u003d питання ».

Результат роботи форми відкрити в новій вкладці за допомогою атрибута target

target \u003d "_ blank">

Де взяти скрипт пошуку по сайту

можна скористатися

• запропонованим спеціальними сервісами Яндекса і Google,
• вбудованим в використовувану CMS (при наявності), наприклад, на Blogger на «https: // site.ru/ Search? Q \u003d питання », де« site.ru »замінити на свою адресу блогу,
• розробленим самостійно, наприклад, на PHP.

Найпростіший варіант - перенаправити запит Google:

Текст на кнопці: «Пошук», «Шукати», «Знайти»

З слів-збудників «Знайти» має досконалий вигляд і має на увазі, що результат пошуку буде обов'язково позитивним.