Sova v síti - 1/28 - vydáno 29.10.2001

Dobrý den, končí pondělí a je zde vaše Sova v síti :-)


OBSAH

-- Atomz -- jak si upravit vzhled výsledných stránek
-- Aktivní tlačítka pomocí CSS -- ano či ne?
-- Novinky u Petra Kocny
-- Odpovídáme na dotazy čtenářů
-- Zajímavé odkazy


Na úvod opět jedna omluva. Vzhledem k rozsahu dnešních článků
a protože vás nechceme zahltit příliš mnoha informacemi,
vypustili jsme z dnešního čísla plánované pokračování seriálu
o PHP a databázích. V některém z příštích čísel se k tomuto
tématu opět vrátíme.


ATOMZ -- JAK SI UPRAVIT VZHLED VÝSLEDNÝCH STRÁNEK

Marek Prokop

V minulém čísle jem vám v článku "Atomz - fulltextový vyhledávač
pro vaše stránky" < http://www.sovavsiti.cz/c01271.html >
představil fulltextový vyhledávač Atomz. Ukázal jsem vám, jak si
založit účet, jak ho nakonfigurovat a jak vložit základní verzi
vyhledávače na vaše stránky. Dnes vás naučím, jak ovlivnit vzhled
výsledků vyhledávání tak, aby co nejlépe s vašimi stránkami
ladily.

Pro co nejtěsnější integraci vyhledávání do vašich stránek nabízí
Atomz mechanismus šablon. Celá práce vlastně spočívá v tom, že si
šablonu a tu pak uložíte v databázi Atomz. Od toho okamžiku bude
Atomz tuto šablonu používat pro zobrazování výsledků hledání pro
vaše stránky.

Zde je postup vytvoření šablony:

1) Ve vašem oblíbeném editoru vytvořte stránku, která bude
vypadat tak, jak chcete aby vypadala vaše stránka s výsledky
vyhledávání. Připravte její záhlaví, zápatí, okrajové sloupce,
atd. Jenom část určenou pro vlastní výsledky vyhledávání a s nimi
spojenou navigaci ponechejte prázdnou.

2) Pokud v html kódu stránky máte obrázky či odkazy na jiné
externí soubory (styly, skripty, odkazy na jiné stránky, atd.),
ujistěte se, že jsou identifikovány absolutní adresou, včetně
http://. Pokud ne, změňte to, nebo použijte v hlavičce (head)
dokumentu značku base (např.
<base href="http://www.sovavsiti.cz/">).

3) Nyní si kursorem najeďte do místa, kde chcete zobrazovat
výsledky vyhledávání. Asi to bude buňka tabulky, nebo prvek div.
Sem budete vkládat zvláštní značky vyhledávače dle následujících
bodů.

4) Začněte nadpisem stránky, např. takto:

<div style="float:right;">
  <SEARCH-LOGO>
</div>
<h1>Výsledky hledání</h1>
<SEARCH-IF-RESULTS>
<p>Na dotaz <em><SEARCH-QUERY></em> nalezeno <SEARCH-TOTAL>
stránek. Zobrazena stránka <SEARCH-LOWER> až <SEARCH-UPPER>.</p>
</SEARCH-IF-RESULTS>
<SEARCH-IF-NOT-RESULTS>
<p>Nenalezena žádná stránka obsahující
<em><SEARCH-QUERY></em>.</p>
</SEARCH-IF-NOT-RESULTS>

Část uzavřená ve značce <SEARCH-IF-RESULTS> se zobrazí pouze
tehdy, bylo-li něco nalezeno, naopak část ve značce
<SEARCH-IF-NOT-RESULTS> jen tehdy, nenalezne-li Atomz nic. Značka
<SEARCH-QUERY> obsahuje text dotazu (hledané slovo, či frázi),
značka <SEARCH-TOTAL> celkový počet nalezených stránek a značky
<SEARCH-LOWER> a <SEARCH-UPPER> první a poslední zobrazenou
stránku na dané stránce výsledků.

Ostatní je váš libovolný text a běžné formátování. Nezapomeňte
též někde umístit logo Atomz (značka <SEARCH-LOGO>), neboť to je
v bezplatné verzi vaše povinnost.

5) Nyní pokračujte vlastními výsledky vyhledávání. Např. takto
zobrazíte pro každou nalezenou stránku její titulek (prvek title)
jako odkaz, popis stránky (obsah metatagu description), kontext
(část textu, ve kterém byl hledaný text nalezen) a URL nalezené
stránky:

<SEARCH-RESULTS LENGTH=160>
<p><strong><SEARCH-LINK><SEARCH-TITLE LENGTH=160></SEARCH-LINK>
</strong><br>
<SEARCH-IF-SHOW-SUMMARIES><div style="font-size:smaller;">
<SEARCH-IF-CONTEXT LENGTH=240><SEARCH-CONTEXT><br>
</SEARCH-IF-CONTEXT>
<SEARCH-URL LENGTH=60></div>
</SEARCH-IF-SHOW-SUMMARIES>
</SEARCH-RESULTS>

6) Dále můžete pod výsledky vyhledávání vložit menu odkazů,
kterými lze měnit třídění výpisu a zkrýt, respekteve znovu
zobrazit detaily (popis stránky, kontext, resp cokoli ve značce
<SEARCH-IF-SHOW-SUMMARIES> uvedené výše).

<SEARCH-IF-RESULTS><p>
<SEARCH-IF-SORT-BY-DATE>
<SEARCH-SORT-BY-SCORE COUNT=10>Seřaď dle
relevance</SEARCH-SORT-BY-SCORE>
</SEARCH-IF-SORT-BY-DATE>
<SEARCH-IF-SORT-BY-SCORE>
<SEARCH-SORT-BY-DATE COUNT=10>Seřaď dle
data</SEARCH-SORT-BY-DATE>
</SEARCH-IF-SORT-BY-SCORE>
 |
<SEARCH-IF-SHOW-SUMMARIES>
<SEARCH-HIDE-SUMMARIES COUNT=20>Skryj
detaily</SEARCH-HIDE-SUMMARIES>
</SEARCH-IF-SHOW-SUMMARIES>
<SEARCH-IF-HIDE-SUMMARIES>
<SEARCH-SHOW-SUMMARIES COUNT=10>Zobraz
detaily</SEARCH-SHOW-SUMMARIES>
</SEARCH-IF-HIDE-SUMMARIES>
<br>
</SEARCH-IF-RESULTS>

7) Nutné jsou odkazy pro navigaci mezi stránkami, pokud je
výsledků více. Ty vložíte do šablony takto:

<SEARCH-IF-RESULTS>
<SEARCH-IF-PREV-COUNT>
<SEARCH-PREV>Předchozích <SEARCH-PREV-COUNT></SEARCH-PREV>
<SEARCH-IF-NEXT-COUNT> | </SEARCH-IF-NEXT-COUNT>
</SEARCH-IF-PREV-COUNT>
<SEARCH-IF-NEXT-COUNT>
<SEARCH-NEXT>Následujících <SEARCH-NEXT-COUNT></SEARCH-NEXT><br>
</SEARCH-IF-NEXT-COUNT><p>
</SEARCH-IF-RESULTS>

8) Nakonec zbývá formulář pro případné opakování hledání:

<form method="get" action="http://search.atomz.com/search/">
<SEARCH-IF-NOT-ADVANCED>
<SEARCH-INPUT-ACCOUNT>
<SEARCH-INPUT-GALLERY>
<SEARCH-INPUT-QUERY SIZE=25>
<input type=submit value="Hledej znovu">
<SEARCH-IF-INPUT-COLLECTIONS>
<br><SEARCH-INPUT-COLLECTIONS>
</SEARCH-IF-INPUT-COLLECTIONS>
</SEARCH-IF-NOT-ADVANCED>
</form>

Jakmile máte šablonu hotovou, otevřete stránku Atomz
na http://www.atomz.com/ a přihlaste se emailovou adresu
a heslem, které jste zadali při registraci. Po přihlášení
klikněte na "Templates" (šablony) v menu vlevo a posléze
na "Template Editor" (editor šablon).

Svou připravenou šablonu zkopírujte a vlepte do připraveného
editačního pole (nebojte se přepsat to, co je v něm připraveno
a otestujte. To provedete kliknutím na záložku "Test" nahoře.
Nebojte se, výsledek nyní vidíte jen vy sami. Vaši návštěvníci
mají zatím k dispozici původní podobu výsledné stránky.

Jste-li s výsledkem testu spokojeni, klikněte na tlačítko
"Publish Changes" a váš nový vyhledávač je hotov.

Na závěr ještě doplním, že Atomz umí indexovat i soubory
ve formátu PDF. Připomněl mi to čtenář Stanislav Holeček,
kterému tímto děkuji.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
I malorozpočtový web může být úspěšný -- stačí vědět, kde ušetřit
a kde ne. Čtěte newsletter FIRMA ONLINE, který vyjde 5.11.2001.
Registrace a detaily na http://www.prokopsw.cz/online/ezines.html
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


AKTIVNÍ TLAČÍTKA POMOCÍ CSS -- ANO ČI NE?

Marek Prokop

Čtenář Jan Bönisch nám poslal zajímavý tip, jak udělat tlačítka,
která se mění při najetí myší (tzv. rollover), bez použití
JavaScriptu. Zároveň se ptá: "Chtěl bych znát Váš názor na toto
použití, jestli se mohou vyskytnout nějaké problémy a pod."

Zkusme se tedy na jeho řešení podívat podrobněji. Úvodní příklad
stránky naleznete na adrese
http://www.sovavsiti.cz/samples/bonisch/index.htm Ve stejném
adresáři pak je i soubor definice stylů style.css.

Nejprve popíšu princip řešení. Ve vlastní stránce je menu tvořeno
šesti průhlednými obrázky o stejné velikosti, naskládanými těsně
pod sebe a jednotlivě uzavřenými do prvku A.  Každý prvek A má
definovánu unikátní třídu (class) CSS.

<a class="m1" href="#1">
  <img src="s.gif" width="190" height="36" border="0">
</a><br>
<a class="m2" href="#1">
  <img src="s.gif" width="190" height="36" border="0">
</a><br>
...
<a class="m6" href="#1">
  <img src="s.gif" width="190" height="36" border="0">
</a><br>

V definici CSS je pak pro každou třídu m1 až m6 definováno toto:

a.m1    { background: url("m1.jpg")  ;}
a.m1:hover  { background: url("m1a.jpg") ;}
a.m2    { background: url("m2.jpg")  ;}
a.m2:hover  { background: url("m2a.jpg") ;}
...
a.m6    { background: url("m6.jpg")  ;}
a.m6:hover  { background: url("m6a.jpg") ;}

Prostudováním samotného kódu možná odhalíte drobnou, dalo by se
říci stylovou chybu. Místo třídy (class) by určitě bylo lepší
zvolit id. Třída totiž může být použita opakovaně, pro více
prvků, kdežto id pouze pro jeden jediný prvek v celém dokumentu,
což je právě tento případ. Proto je zed id lepší.

Pokud si příklad otevřete Internet Explorerem (zkoušel jsem 5.0,
ale stejné asi bude i 4 a vyšší), je zdánlivě vše v pořádku.
Oproti tradičnímu řešení rollover efektu se objeví jediná vada --
při prvním najetí myší na jednotlivé položky menu vlevo chvíli
trvá, než se objeví druhá verze obrázku s vysvíceným nápisem.
Obraz na chvíli problikne. To je proto, že druhá sada obrázků
ještě není ze serveru načtena, zatímco při řešení JavaScriptem se
obvykle načte předem hned v úvodu stránky (tzv. preload).

Horší situace ovšem nastane, když si stránku otevřete prohlížečem
Opera. V tom případě zjistíte, že celé menu zmizelo a místo se
něj se zobrazuje jen prázdná žlutá plocha. Proč tomu tak je?
Problém je v tom, že Opera neumí pomocí CSS definovat pozadí
řádkových (inline) značek (tagů) a tedy ani značky A.

Ještě horší situace však nastane, pokud se na stránku podíváte
textovým prohlížečem, nebo prohlížečem s vypnutými obrázky.
Uvidíte pak přibližně toto:

IMAGE
IMAGE
IMAGE
...
IMAGE

Částečně jsem se pokusil tento problém napravit v příkladu
index2.htm a jemu odpovídajícímu souboru stylů style2.css. Změna
spočívá v tom, že je každý jednotlivý obrázek uzavřen do prvku
div takto:

<div id="m1">
  <a href="#1">
    <img src="s.gif" alt="Sestava">
  </a>
</div>

Zároveň jsem obrázkům přidal nezbytný (a v původním příkladu
chybějící) atribut alt a ostatní atributy přesunul do definice
stylů. Ta nyní vypadá pro každou položku menu takto:

#m1 {
  background: #ffffc0 url("m1.jpg") no-repeat;
}
#m1 a:hover {
  background-image: url("m1a.jpg");
}

a pro všechny položky menu ještě jednotný rozměr obrázků:

#m1 img, #m2 img, #m3 img, #m4 img, #m5 img, #m6 img {
  width: 190px;
  height: 36px;
  border: none;
}

Co se mi těmito úpravami podařilo změnit?

1) V IE je vše při starém. Menu se zobrazuje podle záměru autora
jen s drobnou kosmetickou vadou -- výše zmíněným probliknutím při
načítání překryvného obrázku.

2) V Opeře se menu již zobrazí také, i když bez rollover efektu.
Je však plně použitelné.

3) Menu dobře funguje i v textovém (případně hlasovém) režimu.
Díky altům se zobrazí tak jak má a je opět dobře použitelné.

Znamená to tedy, že se nám náš pokus podařil? Bohužel, zatím
nikoli. Zkuste se podívat na třetí příklad, index3.htm
a zjistíte, že celé menu opět zmizelo. Jedná se o stejný příklad
jako index2.htm s jediným rozdílem -- v hlavičce chybí odkaz
na definici stylů. Takto tedy bude vypadat stránka v prohlížeči
s žádnou nebo nedostatečnou podporou CSS. To si nemůžeme dovolit.
Existuje ale řešení?

Existuje. Nejprve jsem průhledné obrázky s.gif v html dokumentu
zaměnil za základní obrázky položek menu m1.jpg až m6.jpg. Tím se
menu opět objevilo i bez připojené definice stylů. Nicméně ani
s připojenou definicí stylů a ani v IE nefunguje rollover efekt,
neboť je tvořen obrázky na pozadí, které jsou ovšem nyní překryty
neprůhlednými obrázky na popředí.

Zbývá tedy v definici stylů obrázky na popředí označit
za neviditelné. Do pravidel pro obrázky menu doplníme ještě
visibility:hidden a je to:

#m1 img, #m2 img, #m3 img, #m4 img, #m5 img, #m6 img {
  width: 190px;
  height: 36px;
  border: none;
  visibility: hidden;
}

Tím jsme dosáhli stavu, kdy je stránka plně použitelná jak
v prohlížečích podporujících CSS, tak ve starších bez této
podpory a dokonce i v prohlížečích textových. V majoritním IE
navíc funguje požadovaný rollover efekt. Výsledek si můžete
prohlédnout na http://www.sovavsiti.cz/samples/bonisch/index4.htm

Odpovídající definice stylů je zde:
http://www.sovavsiti.cz/samples/bonisch/style4.css

Doufám, že vám tento příklad názorně ukázal, jaké nástrahy vás
mohou při ladění návrhu pomocí CSS čekat a jak je můžete
postupnými pokusy a omyly překonávat. Mějte na paměti, že návrh
využívající CSS má stránky učinit přístupnější, nikoli naopak.
Důležitá je v prvé řadě přístupnost *obsahu*, teprve na druhém
místě je *design*.

Na závěr dlužno dodat, že celý příklad bude správně fungovat jen
tehdy, pokud definice stylů nebude přístupná starším prohlížečům.
Jak to udělat se dozvíte ze starších čísel Sovy v síti (číslo 11,
Redesign Sovy v síti II), nebo přímo z jejího současného
zdrojového kódu.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Doporučte sovu v síti vašim přátelům. Přepošlete jim toto číslo,
nebo použijte formulář na http://www.sovavsiti.cz/recommend.html
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


NOVINKY U PETRA KOCNY K 27.10.2001

... v katalgu katalogů http://www.lf1.cuni.cz/~kocna/kam-www.htm
a vyhledávačů http://www.lf1.cuni.cz/~kocna/roboti.htm

Přidány dva nové odkazy - celkem již 173.

Nabídky.cz -- další nový český rozcestník, zařazení odkazů
do zvolené kategorie, vkládání není nijak kontrolováno, není zde
položka na email, takže žadné potvrzení zasláno není, URL -- test
prohledávání -- http://www.nabidky.cz/search/my.php?q=kocna

Pozri Sk, potvrzeno zařazení stránky emailem, prohledává databázi
i přes URL, test -- http://www.pozri.sk/hladaj.php?slovo=kocna

Exo.sk -- další slovenský server, akceptuje české stránky,
po vložení jsou zveřejněny jako nové stránky -- zařazení
do kategorií slibují za 1-2 týdny, emailem potvrzují vložení
stránky, nikoliv její zařazení. Test prohledávání --
http://www.exo.sk/exo/index.php?query=kocna&finder=1&x=13&y=11
funguje i přes URL.

Grano Salis -- 27.října 2001 zprovozněna nová verze Webu,
databáze odkazů je nyní prázdná, původně zařazené odkazy
nepřevedeny. Přidávání odkazů vyžaduje komplikovanou registraci,
na nové zařazení odkazů zatím čekám. URL adresa novinek je
http://www.granosalis.cz/links.php?op=NewLinks


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Starší čísla naleznete na http://www.sovavsiti.cz/archiv.html
Více odkazů pro webmastery na http://www.sovavsiti.cz/odkazy.html
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


ODPOVÍDÁME NA DOTAZY ČTENÁŘŮ

Dotaz:

Čtenář Zbyněk Chomát předělává své stránky do PHP a píše nám:
"Mám strach, že když použiji v jednotlivých souborech návodů
meta-tagy a vyhledáváč je najde tak se mi zobrazí jen ten návod
přiklad ../navody/n0012.php a ne index.php?id=n0012."

Odpověď:

Návštěvou těchto stránek jsme zjistili, že nový design je založen
na rámcích a to je tedy asi to, čeho se čtenář obává. Nutno říci,
že se obává oprávněně. Fulltextové vyhledávače si s rámci opravdu
nerozumí. Sice to jde řešit pomocí tzv. dorway-pages (stránky,
které klientským skriptem automaticky přesměrují na frameset),
ale to je dost složitá a nebezpečná technika, neboť pokročilejší
vyhledávače tento trik penalizují sníženou relevancí výsledků.
Mnohem lepší určitě, obejít se bez rámců. V PHP, které umožňuje
includy to navíc není žádný problém.

Hovoříme-li ale o vyhledávačích a skriptování na straně serveru
(PHP), je třeba dát pozor ještě na jednu věc. Robot fulltextového
vyhledávače musí každou stránku nejprve nalézt, aby ji mohl
zaindexovat. Nalezne ji jen tehdy, když k ni nalezne odkaz.
Navigace tedy nesmí být řešena pouze formuláři (např. oblíbenými
rozbalovacími seznamy), ani JavaScriptem. Některé vyhledávače
navíc nemají rádi stránky, odlišené jen parametrem v URL (viz
příklad v dotazu -- index.php?id=n0012). Proto je lepší používat
klasické, statické URL, např. pomocí serverových filtrů, nebo
zvláštního skriptu pro chybu 404.


UŽITEČNÉ ODKAZY

Shodou okolností, krátce po uveřejnění článku Miroslava Vejlupka
o pevné mezeře < http://www.sovavsiti.cz/c01252.html > v Sově
číslo 25 vyšly v A List Apart hned dva vynikající články na
podobné téma typografie a speciálních znaků na webu. Zde jsou na
ně odkazy s původními anotacemi.

Typography Matters
by Erin Kissane
It's a style thing. It's a usability thing. It's a tricky thing
for large content sites and a step up for independents.  It's
typographically correct punctuation on the web, and ALA's
associate editor makes the case for it.
http://www.alistapart.com/stories/typography/

The Trouble With EM' EN (and other shady characters)
by Peter K. Sheerin
More than you ever wanted to know about dashes, spaces, curly
quotes, and other vagaries of online typography. HTML specs,
grammatical rules, browser bugs and character encoding-it's all
here.
http://www.alistapart.com/stories/emen/

Vřele doporučujeme všem, kteří se nebojí trochu obtížnější
angličtiny.


A to je pro dnešek vše, těšíme se na shledanou opět v pondělí,
kdy v čísle 28 naleznete:

-- Tabulky v HTML 4 -- nevíte, co znamenají tajemné značky THEAD,
TBODY, COLGROUP a další? Pak je tento článek právě pro vás.

-- EyeDropper a Ruler, 2 užitečné utility pro webmastery.

-- Odpovědi na vaše dotazy, zajímavé odkazy, novinky v katalogu
katalogů a vyhledávačů Petra Kocny, atd.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Nechcete, nebo naopak chcete dostávat Sovu v síti?
Odběr lze odhlásit odesláním zprávy na unsubscribe@sovavsiti.cz.
Přihlásit se lze odesláním zprávy na subscribe@sovavsiti.cz, nebo
formulářem na adrese http://www.sovavsiti.cz/.
Chcete nám cokoli sdělit? Uvítáme vaše náměty, připomínky,
kritiku, atd. na adrese mailto:redakce@sovavsiti.cz.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Není-li v konkrétním případě uvedeno jinak, je autorem všech
publikovaných článků Marek Prokop. Tento ezin, nebo jeho
libovolnou část můžete volně šířit dále, pokud současně uvedete
zdroj následujícím způsobem:
_________________________________________________________________
Sova v síti -- (c) 2001 Marek Prokop -- http://www.sovavsiti.cz/