Birçok insan için internette bilgi aramanın etkinliği kurdu besleyen bacaklardır. Güncel ve güncel bilgileri nerede bulabilirim? Daha ucuz nereden alınır ve daha pahalı satılır? Belirli görevleri gerçekleştirmek için en doğru talimatları nerede bulabilirim? Çevrimiçi film nerede izlenir? Kullanıcıların bu ve benzer sorularını olabildiğince doğru bir şekilde yanıtlamak için, arama motorları yıldan yıla belirli kullanıcı sorguları için arama sonuçlarında site göndermek için halihazırda gelişmiş mekanizmaları geliştirmektedir. Arama motorlarının amacı, sorulan sorulara cevap alabilmek için insanları mümkün olan en kaliteli siteye götürmektir.

Arama motorlarına ek olarak, arama motorlarının kendileri de arama filtreleri ile donatılmıştır, böylece herhangi bir kullanıcı bilgi için aramayı daraltabilir veya talebini daraltabilir.

Aşağıda, popüler tarayıcıları tamamlayabilecek ve sonuç olarak İnternette bilgi aramanın verimliliğini artırabilecek bazı arama uzantılarını düşünün.

Google Chrome için arama uzantıları

Mevcut siteyi ara

Her site dahili bir arama motoruna sahip değildir ve bu tür kaynaklar üzerinde belirli bilgileri aramak için bölümden bölüme uzun süre çalışmanız gerekir. Site içinde arama yapmak için yerleşik tarayıcı uzantısı, hangi siteyi ziyaret ederseniz edin, her zaman elinizin altında olacak evrensel bir araçtır. Bir site içinde ihtiyaç duyduğunuz bilgileri bulmak için yapmanız gereken tek şey, tarayıcı çubuğundaki uzantı düğmesini tıkladığınızda görünen küçük bir arama alanına bir anahtar kelime girmektir.

Arama motorunun arama sonuçları yeni bir tarayıcı sekmesinde açılacak ve anahtar kelimenin bulunduğu belirli bir sitenin sayfalarını seçeceklerdir.

Mevcut sitede arama, önceden yüklenmiş bir Google arama motoru ile uygulanır, ancak uzantı parametrelerinde başka bir arama motoru kurabilirsiniz - Yandex, Yahoo veya Bing. Bunu yapmak için, uzantı düğmesindeki bağlam menüsünü çağırın ve "Parametreler" komutunu seçin.

Uzantı seçenekleri, farklı bir arama motoru seçebileceğimiz yeni bir tarayıcı sekmesinde açılacaktır. Ve zaten site içinde arama yapacak.

Alternatif Google araması

Yandex arama motoru başlangıçta diğer iki arama motorunda (Google ve Bing) tek bir tıklama ile bilgi arama olanağı sağlar, ancak bu arama motorlarına giden bağlantılar, girilen anahtar sorguyla birlikte arama sonuçları sayfasının en altında toplanır.

Ancak Google bu konuda daha bencildir - arama sonuçlarında rakip arama motorlarından bahsedilmez. Bu durum, Google Chrome'da "Alternatif Google Arama" uzantısı uygulanarak düzeltilebilir.

Bu amaçla özel bir uzantı kurmak TMS (Torrents MultiSearch), torrent izleyiciler için arama sonuçları almak üzere sürekli olarak "torrent" anahtar kelimesinin ekini girmekten daha kolaydır.

Uzantı düğmesi tarayıcı araç çubuğuna gömülüdür ve tıklandığında, sorgunuzu girmek için küçük bir arama alanı açılır.

Arama sonuçları ayrı bir sekmede görünür ve bu içerik vareznik sitelerinde, yazılım ve medya portallarında veya resmi sitelerde değil, yalnızca Runet'in torrent izleyicilerinde bulunacaktır.

Torrent izleyiciler için arama sonuçlarında, bulunan içerik dosya boyutuna veya yüklendiği tarihe göre filtrelenebilir. Aramayı daraltmak için ek anahtar sözcükler belirtilebilir.

Arama sonuçları ayrıca belirli torrent izleyiciler için ayrı olarak ve filmler, müzik, yazılım gibi içerik türleri için ayrı olarak görüntülenebilir.

Ek olarak, TMS uzantısı tarayıcının bağlam menüsüne yerleştirilmiştir, böylece İnternet'teki sayfalarda vurgulanan herhangi bir kelimeyi veya tümceciği, kopyalama ve yapıştırma ile gereksiz yere uğraşmadan torrent izleyicilerindeki aramaya gönderebilirsiniz.

Bağlamsal arama

Google Chrome, varsayılan tarayıcıda kurulu tek bir arama motorunu kullanarak bir bağlamsal arama işlevi uyguladı. "Bağlamsal Arama" uzantısı, site sayfalarında seçilen herhangi bir kelimeyi aramak için kullanılabilecek arama motorlarının sayısını artırmayı amaçlamaktadır.

Uzantı başlangıçta en popüler torrent izleyici RuTracker, Wikipedia ve medya portalı Kinopoisk.Ru'da arama yapma yeteneğine sahiptir.

Diğer arama motorları, bunlar aracılığıyla doğrudan tarayıcının içerik menüsünden bilgi aramanın mümkün olması için uzantının parametrelerine eklenir. Google Chrome menüsünü açalım, "Ayarlar" ı seçelim ve tarayıcıda yüklü uzantılar bölümüne gidelim.

Uzantılar listesinde ihtiyacımız olanı seçin - "Bağlam Arama". "Seçenekler" bağlantısını tıklayın.

Opera için arama uzantıları

Site içinde ara

Uzantı düğmesi tarayıcı araç çubuğunda bulunur ve üzerine tıklayarak, bir anahtar sorgu girmek için arama alanını arayabilir ve arama motorunu değiştirebilirsiniz.

Uzantı ayarlarında önceden yüklenmiş Yandex ve Google, diğer arama motorları ile desteklenebilir. Uzantı düğmesindeki bağlam menüsünü çağırın ve "Ayarlar" komutunu seçin.

Google Chrome için "Bağlamsal Arama" uzantısı durumunda olduğu gibi, yeni bir arama motoru eklemek için URL dizesini girmelisiniz.

Torrents MultiSearch

Benzer görsel arama

Benzer görsel arama, Opera tarayıcısının içerik menüsüne birkaç arama motorunu kullanarak benzer görselleri aramak için ek bir komut ekler.

Veya benzer resimlere sahip yayınların bir listesi sunulacaktır.

Mozilla Firefox için arama uzantıları

Site araması

Önceki iki durumda olduğu gibi, Mozilla Firefox tarayıcısı için İnternet'teki herhangi bir sitenin içinde arama yapmaya yönelik özel bir uzantı mevcuttur.

Sadece Fire Fox site araması durumunda, tarayıcının mevcut arama alanına yerleştirilir ve simgesi normal arama simgesinin önüne kırmızı bir büyüteç şeklinde eklenir.

Mozilla Firefox'ta normal arama için varsayılan arama motorunun değiştirilmesi, hem arama motorunun hem de siteler içinde arama yapılmasını gerektirir.

Site Arama uzantısı, Mozilla Firefox bağlam menüsüne entegre olur ve elinize gelen herhangi bir kelimeyi seçerek, tek tek arama sonuçlarında bu kelimenin bulunduğu sitenin tüm sayfalarını görebilirsiniz.

Byffox'ta ara

Bu tür "henüz olgunlaşmamış" adlara sahip herhangi bir yazılım ürünü, kural olarak, önerilen araçların amaçlanan amacına ilişkin bir ipucu bile görmemeleri gerçeğiyle birçok kullanıcıyı rahatsız eder.

Ve "Softina'dan Vasya'dan" veya "Petya'dan oynanan Repack" tarafından tam olarak ne teklif edildiğini, ancak açıklamayı ayrıntılı bir şekilde tanıdıktan sonra öğrenmelisiniz. Yine de, "byffox'tan ara" gibi anlamsız bir adın arkasında kullanışlı ve mantıklı bir işlev vardır. Bu uzantı, tarayıcı içerik menüsünü çeşitli arama motorlarını kullanarak seçilen sözcük için ek bir arama komutu ile doldurmanıza olanak tanır.

Bu gönderi, bir önceki makalenin (çeviri) devamıdır: "Google AJAX Arama API'sı ve jQuery kullanarak blog arayın".
Yazdıktan sonra, ayrı bir sayfa dışında böyle bir formu ve sonuç halısını nereye yerleştirmenin en başarılı olacağını düşündüm. Fikir uzun sürmedi: bir pop-up pencerede sonuçları olan bir arama denemek mantıklı olurdu.

İlk demo:

Blog Araması ↓

Açılır arama için bir temel olarak, adında bir jQuery modal eklentisi seçtim Ortaya çıkartmak ... Hafiftir, gereksiz öğeler içermez ve bağlanması çok kolaydır.

Reveal'ı Yükleme.
Komut dosyası ve stillere bağlantılar şablon bölümünde yazılır:
Eklenti arşivinde picas albümünüze koymanız ve yolunu yazmanız gereken bir png resmi olduğunu unutmayın. ortaya çıkarmak.css.

Sonraki adım, eklentiyi başlatmaktır " ayarlama" senaryo (aynı yere koyun):

Sonra tanımlarız pop-up içeriği (bunu yazının gövdesine koyarız):

Blog Araması ↓

buraya "Google AJAX Arama API'sı ve jQuery kullanarak blog ara" makalesindeki tüm arama kodlarını ekliyoruz.

Bu kodun içindeki yorumuma göre, "google aramasının" tamamını kopyalayıp buraya yapıştırın, şimdi bahsettiğimiz. Css stil sayfasında, beyaz karenin alanını artırmanız gerekecektir.

Ve son adım kendisidir modsal bağlantı, hem metin hem de grafik olabilir. Resim biçiminde bağlantı kodu (ayrıca gönderinin gövdesinde):

Sahip olmak Ortaya çıkartmak, modal eklenti, iki tür animasyon vardır: solmak ve solmak, efektin ayarlanabilir hızı: animasyon hızı: 300ve koyulaştırılmış arka plana tıklayarak tüm pencereyi kapatma yeteneği: closeonbackgroundclick: true.

Bu ayarlar "yapılandırma" komut dosyasına yazılır (yukarıya bakın):

$ ("# myModal"). açığa ((animasyon: "fadeAndPop", // fade, fadeAndPop, none animationspeed: 300, // animasyonlar ne kadar hızlı closeonbackgroundclick: true, // arka planı tıklarsanız modal kapanacak mı? dismissmodalclass: "kapat-göster-modal" // açık bir modeli kapatacak bir düğme veya öğenin sınıfı));

Veya bu seçenekler şu yolla bağlanabilir bağlantı kalıcı bir pencereye (yukarıya bakın)

Böyle bir şema ile anlaşılmalıdır ayrı bir pencerede ara - saf deney ve daha dikkatli özelleştirme gerektirir.

Bu eğiticide, mobil arayüz tasarımına mükemmel şekilde uyan bir açılır arama formu oluşturacağız. Öğeyi uygulamak için yalnızca CSS kullanılacaktır - JavaScript veya ek işaretleme yok. Kompakt bir arama formu uygulamanın basit ve etkili bir yolu.

Randevu

Mobil cihazlarda her piksel sayılır. Formu görüntülemek için gereken alan miktarını en aza indirmek için, başlangıçta kompakt bir biçimde gösterilecek ve giriş odağı alındığında genişletilecektir (: odak). Bu yaklaşım, diğer arayüz öğeleri ve içeriği için yer tasarrufu sağlar.

HTML biçimlendirmesi

Form HTML5 kullanıyor. Kod çok basit:

Webkit tarayıcılarında arama formu için varsayılan görünümü sıfırlama

Varsayılan olarak, Webkit tarayıcılarında arama formu şu şekilde görünecektir:

Arama formunun normal bir metin giriş alanı gibi görünmesini sağlamak için aşağıdaki stilleri eklemeniz gerekir:

Girdi (-webkit-görünüm: textfield; -webkit-box-boyutlandırma: içerik kutusu; yazı tipi ailesi: miras; yazı tipi boyutu:% 100;) input :: - webkit-search-decoration, input :: - webkit- arama-iptal düğmesi (ekran: yok;)

Arama formumuzu oluşturuyoruz

Giriş alanının normal genişliği 55px olur ve: focus durumunda 130px'e genişler. Geçiş özelliği animasyon için kullanılır ve kutu gölgesi ışıma efekti için kullanılır.

Giriş (arka plan: #ededed url (img / search-icon.png) no-rep 9px center; border: solid 1px #ccc; padding: 9px 10px 9px 32px; genişlik: 55px; / * Varsayılan genişlik * / -webkit- border-radius: 10em; -moz-border-radius: 10em; border-radius: 10em; -webkit-geçiş: tümü .5s; -moz geçişi: tümü .5s; geçiş: tümü .5s;) girdi: odak ( genişlik: 130px; / * Odaklı genişlik * / background-color: #fff; border-color: # 6dcff6; -webkit-box-shadow: 0 0 5px rgba (109,207,246, .5); -moz-box- gölge: 0 0 5px rgba (109,207,246, .5); kutu-gölge: 0 0 5px rgba (109,207,246, .5); / * Parlama efekti * /)

Örnek B

Örnek B'de, arama formu önemli ölçüde küçültülmüştür - metin doldurulmadan yalnızca simge görüntülenir. Arama kutusu için dolgu ve genişlik özelliklerinin yuvarlak bir düğme oluşturacak şekilde değiştiğine dikkat edin. Metni görünmez yapmak için color: transparent özelliğini kullanın.

# demo-b girişi (genişlik: 15px; sol dolgu: 10px; renk: şeffaf; imleç: işaretçi;) # demo-b girişi: fareyle üzerine gelme (arka plan rengi: #fff;) # demo-b girişi: odak (genişlik : 130px; sol dolgu: 32px; renk: # 000; arka plan rengi: #fff; imleç: otomatik;)

Tarayıcı Uyumluluğu

Açıklanan yöntem tüm büyük tarayıcılarda çalışır: Chrome, Firefox, Safari ve IE8 +. IE7 ve daha eski tarayıcılarda, şunlara yönelik destek eksikliğinden dolayı işlevsellik çalışmaz: odak sözde sınıf ve arama alanı türü.

25 Ekim 2019 Giriş güncellendi

Sitede kayan arama formu

Düz stili, web sitesi tasarımında önemli bir popülerlik kazanmıştır. Ve bu derste, sitenin bu tarzda yapılmış başka bir unsuruna bakacağız. Bu öğe bir arama formudur. Ancak basit değil, tıklandığında görünen ve kullanılmadığında "daraltılan" bir arama formu. Arama simgesine gelince, SVG dosyasından alınır ve farklı ekran çözünürlüklerinde (hem mobil cihazlarda hem de büyük monitörlerde) ölçeklenebilir.

Burada bir örnek görülebilir:

İndir

Çekme arama formu

Nasıl kullanılır?

HTML

Öncelikle, HTML sayfasında olacak işaretlemeyi tanımlayalım:

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" yer tutucu \u003d "Ne arayacak?" 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

Arama formunda olağandışı bir şey yok: giriş için bir metin alanı, bir arama düğmesi ve bir öğe simge için.

CSS

Şimdi arama formunun sayfada güzel görünmesi için biraz stil ekleyelim.

Tıklandığında görüneceğinden, başlangıçta gizlidir. Bu mülk kullanılarak yapılır taşmave anlamı gizli, bunun sonucunda simgenin dışındaki her şeyin gizlendiği (sonuç olarak, yalnızca simgeyi görüyoruz ve metin alanı değil):

.sb-search (konum: göreli; kenar boşluğu: 10px; genişlik:% 0; min-genişlik: 60px; yükseklik: 60px; kayan: sağ; taşma: gizli; -webkit-geçiş: genişlik 0.3s; -moz- geçiş: genişlik 0,3s; geçiş: genişlik 0,3s; -webkit-arka yüz-görünürlük: gizli;)

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

.sb-search-input (konum: mutlak; üst: 0; sağ: 0; kenarlık: yok; anahat: yok; arka plan: #fff; genişlik:% 100; yükseklik: 60px; kenar boşluğu: 0; z-endeksi: 10 ; padding: 20px 65px 20px 20px; yazı tipi ailesi: miras; yazı tipi boyutu: 20px; renk: # 2c3e50;) input [tür \u003d "arama"] .sb-search-input (-webkit-görünüm: yok; -webkit sınır yarıçapı: 0px;)

İsteğin arka planında bulunan metnin rengini belirleyin (arama sırasında girdiğimiz metin):

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

.sb-search-input :: -webkit-input-yer tutucu (renk: # efb480;) .sb-search-input: -moz-yer tutucu (renk: # efb480;) .sb-search-input :: -moz- yer tutucu (renk: # efb480;) .sb-search-input: -ms-input-yer tutucu (renk: # efb480;)

Arama düğmesi her zaman sayfadaki geri kalan blokların ve öğelerin üzerindedir, bu nedenle onu büyük bir değer olarak ayarlıyoruz z-endeksi:

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

.sb-icon-search (renk: #fff; arka plan: # e67e22; z-endeksi: 90; yazı tipi boyutu: 22px; yazı tipi ailesi: "icomoon"; konuşma: yok; yazı tipi stili: normal; yazı tipi ağırlığı : normal; yazı tipi değişkeni: normal; metin dönüşümü: yok; -webkit-yazı tipi yumuşatma: kenar yumuşatma;) .sb-simge-arama: önce (içerik: " \\ e000 "; }

Ayrıca, özel simgeler (SVG) eklemeyi de unutmayın. Arama düğmesine bir simge eklemek için:

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 ("gömülü-açık tip"), url ( "../fonts/icomoon/icomoon.woff") biçim ("woff"), url ( "../fonts/icomoon/icomoon.ttf") format ("truetype" komut dosyası\u003e<script src \u003d "js / uisearch.js"\u003e <komut dosyası\u003e yeni UISearch (document.getElementById ("sb-search"));</ script\u003e

Sonuç

Sitede çok az yer kaplayan ve arama simgesine tıkladığınızda güzel görünen güzel bir arama formu.

parametre anahtarı adı. Arama alanı için en çok "q" veya "metin" kullanılır. parametre anahtarı değeri. Çoğu zaman sorulmaz. Salt okunur ve devre dışı bırakılan özellikler belirtilmezse kullanıcı bunu kendi metnine değiştirebilir. engellenen kullanıcı değişikliği engellenmiş erişim, kullanıcı değişikliği ve mevcut parametre alanının veri aktarımı, JS normal ifadelerinde olduğu gibi boş giriş şablonu olamaz, bu, forma göndermek için gerekli minimum karakter sayısını kullanıcının yazabileceği maksimum karakter sayısını yazın alan uzunluğu sembollerde imleç otomatik tamamlamada ipucu-yer tutucu araç ipucu. Modern tarayıcılar, mevcut etki alanında önceden girilmiş aramaları gösterir. Kapatabilir veya daha spesifik hale getirebilirsiniz. önerilen sorgular listesi yazım denetimi ve dilbilgisi denetimi alan odağı (yani, bir öğeye tıklama ile öğenin dışına tıklama arasındaki süre) bir belge yüklenirken alınan

Önceden yazılmış metni silerek, arama alanındaki "Temizle" çarpısını kaldırın

Arama formu sitede nasıl çalışır?

En basit HTML kodu

Eğer "soru" alanına "soru" yazıp "Bul" düğmesini tıklarsanız, sayfa adresi "http: //site/2011/06/forma-poiska-po-saitu..html'den değişecektir. ? text \u003d soru »Bir bağlantıya tıkladığınızda olduğu gibi. Sayfa yüklendiğinde, komut dosyası URL'de belirtilen parametrelerin varlığını kontrol eder ve bulunursa sitede arama sonuçlarını oluşturur ve görüntüler.

name \u003d "metin">

Ancak, belgeyi yükleme hızını artırmak için, isteği işleyen komut dosyası, bir kural olarak, adresi action özniteliğinde yazıldıysa, geçişin yapılacağı sitenin yalnızca bir sayfasına yerleştirilir: " http: // site / arama /? metin \u003d soru ".

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

Komut dosyasının çalışması için, şurada belirtilen ek parametreler gerekebilir: ... Bu alan görüntülenmiyor. searchid \u003d 808327& text \u003d soru ".

Hedef özelliğini kullanarak formun sonucunu yeni bir sekmede açın

target \u003d "_ boş">

Site arama komut dosyası nereden alınır?

Kullanabilirsiniz

• yandex ve Google'ın özel hizmetleri tarafından sunulan,
• kullanılan CMS'ye (varsa), örneğin Blogger'da "https: // site.ru/ search? q \u003d question ", burada" site.ru "blog adresinizle değiştirilir,
• bağımsız olarak geliştirildi, örneğin PHP'de.

En kolay seçenek, Google isteğini yeniden yönlendirmektir:

Düğme üzerindeki metin: "Ara", "Ara", "Bul"

Uyarıcı sözcüklerden "Bul" mükemmel bir biçime sahiptir ve arama sonucunun mutlaka pozitif olacağını ima eder.