Ko'p odamlar uchun Internetda ma'lumot qidirishning samaradorligi - bu bo'rini boqadigan oyoqlar. Zamonaviy va dolzarb ma'lumotlarni qaerdan topsam bo'ladi? Qaerda arzonroq sotib olish va qimmatroq sotish kerak? Muayyan vazifalarni bajarish bo'yicha eng aniq ko'rsatmalarni qaerdan topsam bo'ladi? Onlaynda filmlarni qaerdan tomosha qilish mumkin? Foydalanuvchilarning shu va shunga o'xshash savollariga iloji boricha to'g'ri javob berish uchun qidiruv tizimlari yildan-yilga aniq foydalanuvchi so'rovlari uchun qidiruv natijalariga saytlarni yuborish uchun allaqachon takomillashtirilgan mexanizmlarni takomillashtirmoqda. Qidiruv tizimlarning maqsadi odamlarni so'ralgan savollarga javob olish uchun eng yuqori sifatli saytga olib borishdir.

Qidiruv tizimlardan tashqari har qanday foydalanuvchi ma'lumot qidirishni qisqartirishi yoki so'rovini toraytirishi uchun qidiruv tizimlarining o'zi qidiruv filtrlari bilan jihozlangan.

Quyida mashhur brauzerlarni to'ldira oladigan va natijada Internetda ma'lumot qidirish samaradorligini oshiradigan ba'zi qidiruv kengaytmalarini ko'rib chiqing.

Google Chrome uchun kengaytmalarni qidiring

Joriy saytni qidiring

Har bir sayt ichki qidiruv tizimi bilan ta'minlanmagan va bunday manbalarda ma'lum ma'lumotlarni qidirish uchun uzoq vaqt davomida bo'limdan bo'limga o'tishingiz kerak. Sayt ichida qidirish uchun o'rnatilgan brauzer kengaytmasi, qaysi saytga kirishingizdan qat'i nazar, doimo yoningizda bo'ladigan universal vosita. Sayt ichidagi kerakli ma'lumotlarni topish uchun brauzer satridagi kengaytma tugmachasini bosganingizda paydo bo'ladigan kichik qidiruv maydoniga kalit so'zni kiritish kifoya.

Qidiruv tizimining qidiruv natijalari yangi brauzer yorlig'ida ochiladi va ular kalit so'z topilgan ma'lum bir sayt sahifalarini tanlaydi.

Joriy saytni qidirish oldindan o'rnatilgan Google qidiruvi bilan amalga oshiriladi, ammo kengaytma parametrlarida siz boshqa qidiruv tizimini o'rnatishingiz mumkin - Yandex, Yahoo yoki Bing. Buning uchun kengaytma tugmachasidagi kontekst menyusiga qo'ng'iroq qiling va "Parametrlar" buyrug'ini tanlang.

Kengaytma parametrlari yangi qidiruv tizimini tanlashimiz mumkin bo'lgan yangi brauzer yorlig'ida ochiladi. Va u allaqachon sayt ichida qidiradi.

Muqobil Google qidiruvi

Yandeks qidiruvi dastlab ikkita boshqa qidiruv tizimlarida - Google va Bing-da ma'lumotlarni bir marta bosish bilan qidirish imkoniyatini beradi, garchi ushbu qidiruv tizimlariga kirish havolalari kiritilgan kalit so'rov bilan birga qidiruv natijalari sahifasining eng pastki qismida joylashgan bo'lsa.

Ammo Google bu borada ko'proq xudbinlik qiladi - qidiruv natijalarida raqobatlashuvchi qidiruv tizimlari haqida so'z yuritilmagan. Ushbu holat Google Chrome-da "Alternative Google Search" kengaytmasini amalga oshirish orqali tuzatilishi mumkin.

Ushbu maqsadlar uchun maxsus kengaytmani o'rnatish TMS (Torrents MultiSearch) torrent trekerlari uchun qidiruv natijalarini olish uchun doimo "torrent" kalit so'ziga qo'shimcha kiritgandan ko'ra osonroqdir.

Kengaytma tugmasi brauzerning asboblar panelida joylashgan bo'lib, bosilganda sizning so'rovingizni kiritish uchun kichik qidiruv maydoni ochiladi.

Qidiruv natijalari alohida yorliqda ko'rinadi va bu faqat Runet torrent-trekerlarida topiladi, vareznik saytlari, dasturiy ta'minot va media-portallarda yoki rasmiy saytlarda emas.

Torrent-trekerlarni qidirish natijalarida topilgan tarkibni fayl hajmi yoki yuklangan sanasi bo'yicha filtrlash mumkin. Qidiruvni qisqartirish uchun qo'shimcha kalit so'zlarni ko'rsatish mumkin.

Qidiruv natijalarini maxsus torrent trekerlari uchun alohida va filmlar, musiqa, dasturiy ta'minot kabi tarkib turlari bo'yicha alohida ko'rish mumkin.

Bundan tashqari, TMS kengaytmasi brauzerning kontekst menyusiga o'rnatilgan bo'lib, Internetdagi sahifalarda ta'kidlangan har qanday so'z yoki iborani torrent-trekerlarda qidirish uchun keraksiz shov-shuvsiz nusxa ko'chirish va joylashtirish bilan yuborishingiz mumkin.

Kontekstli qidiruv

Google Chrome standart brauzerda o'rnatilgan bitta qidiruv tizimidan foydalangan holda kontekstli qidiruv funktsiyasini amalga oshirdi. "Kontekstli qidirish" kengaytmasi sayt sahifalarida istalgan tanlangan so'zni qidirish uchun ishlatilishi mumkin bo'lgan qidiruv tizimlari sonini ko'paytirishga mo'ljallangan.

Dastlab kengaytma RuTracker-ning eng mashhur torrent-trekerini, Vikipediyani va Kinopoisk.Ru media-portalini qidirish imkoniyatiga ega.

Kengaytma parametrlariga ular orqali to'g'ridan-to'g'ri brauzerning kontekst menyusidan ma'lumotlarni qidirish mumkin bo'lgan boshqa qidiruv tizimlari qo'shiladi. Keling, Google Chrome menyusini ochamiz, "Sozlamalar" -ni tanlang va brauzerda o'rnatilgan kengaytmalar bo'limiga o'ting.

Kengaytmalar ro'yxatida bizga kerak bo'lgan narsani tanlang - "Kontekstni qidirish". "Tanlovlar" havolasini bosing.

Opera uchun kengaytmalarni qidirish

Sayt ichida qidirish

Kengaytma tugmasi brauzerning asboblar panelida joylashgan bo'lib, uni bosish orqali qidiruv maydoniga qo'ng'iroq qilib kalit so'rovni kiritishingiz, shuningdek qidiruv tizimini o'zgartirishingiz mumkin.

Kengaytma sozlamalarida oldindan o'rnatilgan Yandex va Google boshqa qidiruv tizimlari bilan to'ldirilishi mumkin. Kengaytma tugmachasidagi kontekst menyusiga qo'ng'iroq qiling va "Sozlamalar" buyrug'ini tanlang.

Google Chrome uchun "Kontekstli qidirish" kengaytmasida bo'lgani kabi, yangi qidiruv tizimini qo'shish uchun siz uning URL satrini kiritishingiz kerak.

Torrents MultiSearch

Shunga o'xshash rasm qidirish

Shu kabi rasmlarni qidirish Opera brauzerining kontekst menyusiga bir nechta qidiruv tizimlari yordamida o'xshash rasmlarni qidirish uchun qo'shimcha buyruq qo'shadi.

Yoki o'xshash rasmlarga ega nashrlarning ro'yxati taqdim etiladi.

Mozilla Firefox uchun kengaytmalarni qidiring

Saytdan qidirish

Avvalgi ikkita holatda bo'lgani kabi, Mozilla Firefox brauzeri uchun Internetdagi har qanday saytni qidirish uchun maxsus kengaytma mavjud.

Faqat Fire Fox-da saytni qidirish brauzerning mavjud qidirish maydoniga kiritilgan bo'lib, uning belgisini oddiy qidirish belgisi oldida qizil kattalashtiruvchi shisha shaklida qo'shib qo'yadi.

Oddiy Mozilla Firefox qidiruvi uchun standart qidiruv tizimini o'zgartirish qidiruv tizimining o'zgarishiga va saytlarni qidirishga olib keladi.

Saytni qidirish kengaytmasi Mozilla Firefox kontekst menyusiga qo'shiladi va qo'lga keladigan har qanday so'zni tanlab, individual qidiruv natijalarida siz ushbu so'z mavjud bo'lgan saytning barcha sahifalarini ko'rishingiz mumkin.

Byffox-dan qidirish

Bunday "hali etuk bo'lmagan" nomlarga ega bo'lgan har qanday dasturiy mahsulotlar, qoida tariqasida, ko'plab foydalanuvchilarni taklif qilinadigan vositalarning mo'ljallangan maqsadlariga ishora ham ko'rmasliklari bilan bezovta qiladi.

Va "Vasinadan Softina" yoki "Petyadan o'ynatilgan Repack" tomonidan aniq nima taklif qilinayotgani haqida siz faqatgina tavsifni batafsil o'qiganingizda bilib olishingiz kerak. Shunga qaramay, "Byffox-dan qidirish" kabi beparvo nomning orqasida foydali va oqilona funksionallik yotadi. Ushbu kengaytma turli xil qidiruv tizimlari yordamida tanlangan so'z uchun qo'shimcha qidirish buyrug'i bilan brauzerning kontekst menyusini to'ldirishga imkon beradi.

Ushbu xabar "Google AJAX Search API va jQuery-dan foydalangan holda blog qidirish" oldingi maqolasining (tarjimasi) davomi.
Yozgandan so'ng, men alohida varaqdan tashqari, bunday shaklni va natijalar gilamini qaerga joylashtirish eng muvaffaqiyatli bo'lishi haqida o'ylardim. Bu g'oya uzoq kutmagan edi: ochilgan oynada natijalar bilan qidirishni sinab ko'rish mantiqan to'g'ri.

Birinchidan demo:

Bloglarni qidirish ↓

Qalqib chiquvchi qidiruv uchun asos sifatida men jQuery modal plaginini tanladim Oshkor qilish ... Bu engil, keraksiz elementlarsiz va ulanishi juda oson.

Ko'rinishni o'rnatish.
Ssenariy va uslublarga havolalar shablon qismida yozilgan:
Plaginlar arxivida png rasm borligini unutmang, siz uni picas albomingizga kiritishingiz va unga yo'lni yozishingiz kerak oshkor.css.

Keyingi qadam - plaginni ishga tushirish " sozlash" skript (xuddi shu joyga qo'ying):

Keyin biz aniqlaymiz ochiladigan tarkib (biz buni post tanasiga joylashtirdik):

Bloglarni qidirish ↓

bu erda biz "Google AJAX Search API va jQuery yordamida blog qidirish" maqolasidan barcha qidiruv kodlarini kiritamiz.

Ushbu kod ichidagi sharhimga ko'ra, nusxa ko'chiring va butun "google qidiruv" ni o'sha erga joylashtiring, biz hozir haqida gaplashamiz. CSS uslublar jadvalida siz oq kvadrat maydonini ko'paytirishingiz kerak bo'ladi.

Va oxirgi qadam o'zi modal havola, bu ham matn, ham grafik bo'lishi mumkin. Rasm shaklidagi bog'lanish kodi (shuningdek, post tanasida):

Bor Oshkor qilish, modal plagin, ikkita turdagi animatsiya mavjud: fade and fadeAndPop, effektning sozlanishi tezligi: animatsiyalar tezligi: 300va qorong'i fonni bosish orqali butun oynani yopish qobiliyati: closeonbackgroundclick: rost.

Ushbu sozlamalar "konfiguratsiya" skriptiga yozilgan (yuqoriga qarang):

$ ("# myModal"). oshkor et ((animatsiya: "fadeAndPop", // fade, fadeAndPop, animatsiyalar tezligi yo'q: 300, // animatsiyalar qanchalik tez closeonbackgroundclick: true, // tugmachasini bosgan bo'lsangiz, modal yopiladi? "close-reve-modal" // ochiq modalni yopadigan tugma yoki element klassi));

Yoki ushbu parametrlar orqali ulanishi mumkin havola modal oynaga (yuqoriga qarang)

Bunday sxemani tushunish kerak alohida oynada qidirish - sof eksperiment va ehtiyotkorlik bilan sozlashni talab qiladi.

Ushbu qo'llanmada biz mobil interfeys dizayniga to'liq mos tushadigan ochiladigan qidiruv shaklini yaratamiz. Elementni amalga oshirish uchun faqat CSS ishlatiladi - JavaScript yo'q yoki qo'shimcha belgilanmaydi. Yilni qidiruv shaklini amalga oshirishning sodda va samarali usuli.

Uchrashuv

Mobil qurilmalarda har bir piksel hisobga olinadi. Shaklni namoyish qilish uchun zarur bo'lgan bo'sh joy hajmini minimallashtirish uchun u dastlab ixcham shaklda ko'rsatiladi va kirish fokusini olganida kengaytiriladi (: fokus). Ushbu yondashuv boshqa interfeys elementlari va tarkibi uchun joyni tejaydi.

HTML belgisi

Formada HTML5 ishlatiladi. Kod juda oddiy:

Vebkit brauzerlarida qidiruv shakli uchun standart ko'rinishni tiklash

Odatiy bo'lib, Webkit brauzerlarida qidiruv shakli quyidagicha ko'rinadi:

Qidiruv shaklini oddiy matn kiritish maydoniga o'xshash qilish uchun quyidagi uslublarni qo'shishingiz kerak:

Kirish (-webkit-tashqi ko'rinishi: textfield; -webkit-box-sizeing: content-box; font-family: inherit; font-size: 100%;) input :: - webkit-search-decor, input :: - webkit- search-bekor qilish tugmasi (displey: none;)

Biz qidiruv shaklimizni shakllantiramiz

Kirish maydoni muntazam ravishda 55px kenglikka ega bo'ladi: va fokus holatida 130pxgacha kengayadi. O'tish xususiyati animatsiya uchun, box-shadow esa porlash effekti uchun ishlatiladi.

Kirish (fon: #ededed url (img / search-icon.png) takrorlanadigan 9px markazi; chegara: qattiq 1px #ccc; to'ldirish: 9px 10px 9px 32px; kengligi: 55px; / * standart kenglik * / -webkit- border-radius: 10em; -moz-border-radius: 10em; border-radius: 10em; -webkit-o'tish: barcha .5s; -moz-o'tish: hamma .5s; o'tish: barcha .5s;) kirish: diqqat ( width: 130px; / * Fokus bilan kenglik * / 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); / * Yorqin effekt * /)

B misoli

Masalan, B-da, qidiruv shakli sezilarli darajada minimallashtirilgan - faqat piktogramma to'ldirilmagan holda ko'rsatiladi. Qidiruv maydonchasi uchun to'ldirish va kenglik xususiyatlari yumaloq tugmachani shakllantirish uchun o'zgarganiga e'tibor bering. Matnni ko'rinmas qilish uchun rangni ishlating: shaffof xususiyat.

# demo-b kiritish (kenglik: 15px; to'ldirish-chapda: 10px; rang: shaffof; kursor: ko'rsatgich;) # demo-b kiritish: hover (fon-rang: #fff;) # demo-b kirish: fokus (kenglik : 130px; padding-left: 32px; color: # 000; background-color: #fff; kursor: auto;)

Brauzer mosligi

Ta'riflangan usul barcha asosiy brauzerlarda ishlaydi: Chrome, Firefox, Safari va IE8 +. IE7 va undan kattaroq brauzerlarda funktsiya ishlamayapti, chunki: pseudo-class va qidirish maydonining turi.

2019 yil 25 oktyabr Kirish yangilandi

Saytdagi slaydni qidiruv shakli

Flat uslubi veb-saytlar dizaynida juda mashhurlikka erishdi. Va ushbu darsda biz ushbu uslubda tayyorlangan saytning yana bir elementini ko'rib chiqamiz. Ushbu element qidiruv shaklidir. Ammo oddiy emas, lekin bosilganda paydo bo'ladigan va ishlatilmasa "qulab tushadigan" qidiruv shakli. Qidiruv belgisiga kelsak, u SVG-faylidan olingan va turli ekran o'lchamlari (mobil qurilmalarda ham, katta monitorlarda ham) miqyosli.

Misolni bu erda ko'rish mumkin:

Yuklash

Qidiruv shakli

Qanday ishlatish?

HTML

Birinchidan, HTML sahifada belgilanadigan belgini aniqlaylik:

1 2 3 4 5 6 7

<div id \u003d "sb-search" class \u003d "sb-search"\u003e <shakl\u003e <input class \u003d "sb-search-input" placeholder \u003d "Nima qidirasiz?" 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 </ shakl\u003e </ div\u003e

Qidiruv shaklida g'ayrioddiy narsa yo'q: kirish uchun matn maydoni, qidirish tugmasi va element belgisi uchun.

CSS

Keling, qidiruv shakli sahifada chiroyli ko'rinishi uchun biroz uslublar qo'shaylik.

U bosilganda paydo bo'lishi sababli, dastlab yashiringan. Bu xususiyat yordamida amalga oshiriladi toshib ketishva uning ma'nosi yashirin, natijada piktogramma tashqarisidagi hamma narsa yashiringan (natijada biz faqat piktogrammani ko'ramiz, va matn maydoni yo'q):

.sb-search (pozitsiya: nisbiy; margin-top: 10px; kenglik: 0%; min-width: 60px; balandlik: 60px; suzuvchi: o'ng; toshib ketish: yashirin; -webkit-o'tish: kenglik 0.3s; -moz- o'tish: kenglik 0.3s; o'tish: kenglik 0.3s; -webkit-backface-visibility: yashirin;)

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

.sb-search-input (pozitsiya: mutlaq; top: 0; o'ng: 0; chegara: yo'q; kontur: yo'q; fon: #fff; kenglik: 100%; balandlik: 60px; chekka: 0; z-indeks: 10 padding: 20px 65px 20px 20px; font-family: inherit; font-size: 20px; color: # 2c3e50;) input [type \u003d "search"] .sb-search-input (-webkit-намуди: none; -webkit) - chegara radiusi: 0px;)

So'rovning fonida bo'lgan matnning rangini aniqlaymiz (qidirish paytida kiritilgan matn):

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;)

Qidiruv tugmasi har doim sahifadagi qolgan bloklar va elementlarning yuqorisida turadi, shuning uchun biz uni katta qiymatga o'rnatdik z-indeks:

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 "; }

Shuningdek, maxsus piktogramma (SVG) qo'shishni unutmang. Qidiruv tugmachasiga belgi kiritish uchun:

1 2 3 4 5 6 7 8 9 10

@ font-face (shrift oilasi: "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" skript\u003e<skript src \u003d "js / uisearch.js"\u003e <skript\u003e yangi UISearch (document.getElementById ("sb-search"));</ skript\u003e

Chiqish

Saytda juda kam joy egallaydigan va qidirish belgisini bosganingizda chiroyli ko'rinadigan yaxshi qidiruv shakli.

parametr kaliti nomi. Qidiruv maydonida ko'pincha "q" yoki "matn" ishlatiladi. parametr kalit qiymati. Ko'pincha u so'ralmaydi. Agar faqat o'qish va o'chirib qo'yilgan atributlar ko'rsatilmagan bo'lsa, foydalanuvchi uni o'z matniga o'zgartirishi mumkin. bloklangan foydalanuvchi modifikatsiyasi bloklangan kirish, foydalanuvchi modifikatsiyasi va joriy parametr maydonidagi ma'lumotlarni uzatish JS oddiy ifodalaridagi kabi bo'sh kirish shabloni bo'lishi mumkin emas, bu shaklni yuborish uchun talab qilinadigan belgilarning minimal sonini talab qilishi kerak, foydalanuvchi maydon uzunligini yozishi mumkin bo'lgan maksimal belgilar soni. belgilarda avtoulovni to'ldirishda ko'rsatma uchun joy-ko'rsatgich. Zamonaviy brauzerlar joriy domendagi ilgari kiritilgan qidiruvlarni namoyish etadi. Siz uni o'chirib qo'yishingiz yoki aniqroq qilishingiz mumkin. tavsiya etilgan so'rovlar ro'yxati imlo va grammatika tekshirilgan maydonning diqqat markazida (ya'ni elementni bosish va elementni bosish orasidagi davr) hujjatni yuklashda olingan

Qidiruv maydonidagi "Tozalash" xochini olib tashlang, avval yozilgan matnni o'chirib tashlang

Saytda qidiruv shakli qanday ishlaydi

Eng oddiy HTML kod

Agar siz "savol" maydoniga yozsangiz va "Topish" tugmasini bosgan bo'lsangiz, sahifa manzili "http: //site/2011/06/forma-poiska-po-saitu..html" dan o'zgaradi ? matn \u003d savol »Agar siz havolani bosganingizda shunday bo'ladi. Sahifa yuklanganda, skript URL-da ko'rsatilgan parametrlarning mavjudligini tekshiradi va agar topilsa, saytdagi qidiruv natijalarini hosil qiladi va namoyish etadi.

name \u003d "text">

Ammo hujjatni yuklash tezligini oshirish uchun so'rovni ko'rib chiqadigan skript, qoida tariqasida, saytning faqat bitta sahifasida joylashtiriladi, unga o'tish amalga oshiriladi, agar uning manzili aksiya atributida yozilgan bo'lsa: " http: // site / search /? matn \u003d savol ".

action \u003d "http: // site / search /">

Skriptning ishlashi uchun ko'rsatilgan qo'shimcha parametrlar talab qilinishi mumkin ... Ushbu maydon ko'rsatilmaydi.? searchid \u003d 808327& text \u003d question ".

Maqsad atributidan foydalangan holda formaning natijasini yangi yorliqda oching

target \u003d "_ blank">

Saytni qidirish skriptini qaerdan olish mumkin

Siz foydalanishingiz mumkin

• yandex va Google maxsus xizmatlari tomonidan taklif qilingan,
• siz foydalanadigan CMS-ga o'rnatilgan (agar mavjud bo'lsa), masalan, Blogger-da "https: // site.ru/ search? q \u003d question ", bu erda" site.ru "blogingiz manzili bilan almashtiriladi,
• mustaqil ravishda ishlab chiqilgan, masalan, PHP da.

Eng oson variant - Google so'rovini yo'naltirish:

Tugmachadagi matn: "Izlash", "Izlash", "Topish"

So'zlashuvchi so'zlardan "Topish" mukammal shaklga ega va qidiruv natijasi ijobiy bo'lishini anglatadi.