W głąb dostępności

Dzień 29: Przeszukiwanie wszystkiego

Każda strona internetowa potrzebuje mechanizmu przeszukiwania treści. Kropka.

Zasady dobrego przeszukiwania strony:

1. Umieść okienko wyszukiwania na każdej stronie, najlepiej gdzieś na górze, żeby było widocznie bez konieczności przewijania strony.
2. Domyślnie przeszukuj wszystko. Jeśli masz opcje wyszukiwania we wpisach, komentarzach albo wszędzie (równocześnie we wpisach i w komentarzach), ustaw "wszędzie" jako wybór domyślny.
3. Nie zagracaj okienka wyszukiwania zaawansowanymi opcjami, jak operatory logiczne, uwzględnianie wielkości liter czy wyrażenia regularne. Określ ustawienia domyślne takie jak w wyszukiwarce Google (szukaj wszystkich słów, szukaj całych słów, nie rozróżniaj wielkości liter, nie używaj wyrażeń regularnych), natomiast wszystkie opcje umieść na osobnej stronie "wyszukiwanie zaawansowane".
4. Nadaj okienku wyszukiwania odpowiednią etykietę oraz klawisz skrótu. Zalecam accesskey="4". (Uwaga: Dla zachowania maksymalnej kompatybilności z różnymi przeglądarkami najlepiej zdefiniować atrybut accesskey dla taga <label>, a nie dla <input>. Zobacz przykłady poniżej.)

Kto na tym skorzysta?

Jadzia, Michał, Bill, Julia, Marek i właściwie wszyscy inni na świecie skorzystają z dobrze wykonanego przeszukiwania strony. Zwłaszcza na blogu lub stronie z newsami, gdzie zawartość jest zorganizowana przede wszystkim chronologicznie. Bardzo frustrująca jest sytuacja gdy nie można znaleźć jakiejś informacji tylko dlatego, że zeszła już ze strony głównej. Co prawda Google posiada mechanizm przeszukiwania tylko jednego określonego serwisu (składnia zapytania: "site:domainname.com"), jednak bardzo niewielu ludzi o tym wie, a ponadto Google nie odwiedza Twoich stron codziennie, więc jego bazy nie zawierają najnowszych wpisów. Dlatego najlepiej stwórz własny mechanizm przeszukiwania.

Jak to zrobić?

• niByLog ma wbudowany mechanizm przeszukiwania wpisów. Musisz tylko na swojej stronie umieścić formularz udostępniający okienko wyszukiwania, np. tak:

  <form action="index.php" method="post">
<label for="query" accesskey="4">Przeszukaj wpisy:</label>
<input type="text" name="query" id="query" size="20">
<input type="submit" value="Szukaj">
</form>

  Zamiast index.php wstaw adres Twojej strony z blogiem, jeżeli nazywa się inaczej.

• Movable Type również posiada wbudowany mechanizm przeszukiwania wpisów (wcześniej dostępny w postaci plugina MT-Search). Standardowy formularz wyszukiwarki posiada już wystarczające elementy dostępności i wygląda nastepująco:

  <form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<label for="search" accesskey="4">Search this site:</label>
<input id="search" name="search" size="20" />
<input type="submit" value="Search" />
</form>

  Przeszukiwanie wpisów w MT może być dużo bardziej rozbudowane - więcej szczegółów w dokumentacji użytkownika Movable Type.

• Greymatter ma wbudowany mechanizm przeszukiwania wpisów, jednak trzeba trochę zmienić szablon i dodać accesskey. Otwórz szablon "Search Form Template" i zmień kod:

  <FORM ACTION="{{cgiwebpath}}/gm-comments.cgi" METHOD=POST>
<INPUT TYPE=TEXT NAME="gmsearch" SIZE=20>
<INPUT TYPE=SUBMIT VALUE="Search">
</FORM>

  na taki:

  <FORM ACTION="{{cgiwebpath}}/gm-comments.cgi" METHOD=POST>
<label for="gmsearch" accesskey="4">Search for:</label>
<INPUT TYPE=TEXT id="gmsearch" NAME="gmsearch" SIZE=20>
<INPUT TYPE=SUBMIT VALUE="Search">
</FORM>

W innych przypadkach możesz spróbować użyć zewnętrznego serwisu przeszukującego, który zaindeksuje zawartość Twojej strony i będzie podawał wyniki wyszukiwania. Do popularnych narzędzi tego typu należą Atomz Express Search oraz Google Free Web Search. Oba są w pewnym stopniu konfigurowalne i dosyć szybkie, chociaż ich indeksy zawartości Twojej strony nie są zawsze całkowicie aktualne. Oba serwisy pozwalają dostosować wygląd okienka wyszukiwania na stronie; np. formularz wykorzystujący Google Free Web Search może wyglądać następująco (zauważ użycie taga <label> i atrybutu accesskey):

<form id="searchform" method="get" action="http://www.google.com/custom">
<p id="searchlabel"><label for="q" accesskey="4">Search this site:</label></p>
<p id="searchinput"><input type="text" id="q" name="q" size="18" maxlength="255" value=" " /></p>
<p id="searchsubmit"><input type="submit" value="Search" />
<input type="hidden" name="cof" value="LW:116;L:http://diveintomark.org/images/eyes.jpg;LH:68;AH:left;GL:0;S:http://diveintomark.org/;AWFID:0d8ffcebe359c844;" />
<input type="hidden" name="domains" value="diveintomark.org" />
<input type="hidden" name="sitesearch" value="diveintomark.org" />
</p>
</form>

Uwaga: nie możesz tak po prostu wkleić tego kodu na swoją stronę. Jeśli chcesz używać Google Free Web Search, musisz się zarejestrować i otrzymać własny kod dla pola cof.

Zobacz także (strony w języku angielskim)

• Atomz Express Search.
• Google Free Web Search.
• Blogger.com: How do I add a search engine to my blog? Blogger poleca Atomz, ale znajdziesz tam też linki do innych serwisów.
• Jakob Nielsen: Is Navigation Useful? Artykuł na temat nawigacji na stronach internetowych. Cytat: Users often rely on search as their main hunting strategy.
• Jakob Nielsen: Search Usability. Artykuł sprzed sześciu lat, a nadal niewiarygodnie aktualny.
• PHP.net: URL HOWTO. Na stronie php.net jest zaimplementowany najbardziej zadziwiający mechanizm przeszukiwania jaki kiedykolwiek widziałem. Oprócz standardowego formularza szukania, używają specjalnie przygotowanych stron błędu 404 (które w innych serwisach zazwyczaj pokazują po prostu komunikat "strona nie znaleziona") tak, aby inteligentnie przeszukać serwis na podstawie podanego adresu URL. Zatem możesz po prostu bezpośrednio w adresie wpisać czego szukasz, np. jak wpiszesz www.php.net/phpinfo w przeglądarce, to php.net przekieruje Cię do strony dokumentacji zawierającej opis funkcji phpinfo.