Sova v síti - 2/7 - vydáno 16.7.2002
Dobrý den, je zde další číslo Sovy v síti :-)
OBSAH
-- Úvodník
-- Jak funguje deklarace DTD
-- FRAMES nebo NOFRAMES? Dokonalé FRAMES!
-- Novinky u Petra Kocny
ÚVODNÍK
Jak většina z vás ví, po vydání minulé Sovy došlo v pražských
Nuslích k prvnímu (za pár let bude označováno jako "historické")
setkání autorů a čtenářů Sovy v síti. I přes nepřízeň počasí se
skvěle vydařilo a všem účastníků za něj já i Martin Kopta upřímně
děkujeme. Po prázdninách se něco podobného pokusíme zopakovat.
Protože jsme se (někteří) rozcházeli až v časných ranních
hodinách, kdy již ani trénovaná paměť neslouží nejlépe, prosím
všechny, kterým jsem něco slíbil a dosud nedodržel, aby se mi
připomenuli.
...
Jak se rozrůstá počet čtenářů, přibývá i těch nespokojených. Po
posledních dvou číslech přišly již dohromady tři stížnosti, že
článek ten a ten byl o ničem. Nuže, stěžujte si dál, ale prosím,
nepište nám jen jaké články se vám nelíbí, ale i to, jaké by se
vám líbili. To víte, do vkusu a potřeb dvou a půl tisíce čtenářů
se bez zpětné vazby strefuje těžko.
...
Mimochodem, na setkání v Nuslích i ve vašich emailech často
zaznívá dotaz, proč mají stránky Sovy stále ten ošklivý design.
Inu proto, že dosud nikdo neudělal lepší. Přesněji řečeno, dva
návrhy od čtenářů se nám již sešly, ale chtělo by to vybírat
z většího počtu.
Co byste tedy říkali malé soutěži? Jistě je mezi vámi mnoho
talentovaných designérů a jistě máte svou představu, jak by
ideální soví stránky měly vypadat. Zkuste nám své návrhy poslat.
Uspořádáme z nich malou výstavku a společně vybereme ten
nejlepší. Co vy na to?
A teď vás již nebudu zdržovat od čtení. Čeká vás povídání o DTD
od Martina Kopty a zajímavé triky s rámci od čtenáře Pedra.
Krásný den vám přeje,
Marek Prokop
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Denně aktualizované novinky, odkazy na články, zajímavé stránky:
Weblog Sovy v síti -- http://www.sovavsiti.cz/weblog/
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
JAK FUNGUJE DEKLARACE DTD
Martin Kopta
Zásadní chybou všech knih pro začátečníky ve webdesignu je
opomíjení základního kamene (X)HTML -- tím je DTD, tedy Definice
Typu Dokumentu. Hned poté, kdy nováčkovi vysvětlíte, jak HTML
funguje, že se skládá ze značek (tagů) a jejich vlastností
(atributů), měli byste hned přikročit k vysvětlení, že HTML se
řídí normami, jež jsou definovány v DTD.
V dnešním článku si řekneme něco o deklarování dokumentu, tedy
o odkazování na jeho DTD. V příštím díle si vysvětlíme základy
čtení DTD.
+ Rozehřívací ukázka
Nejde jen o nějaké bezduché dodržování standardů. Hned vám
ukážu, že správné užití deklarace DTD může mít zásadní vliv
na zobrazení dokumentu v prohlížeči.
zarovnaný vlevo a šířka bloku bude 480 pixelů, protože 10 + 10 px
připadá na sílu tahu rámečku. To je samozřejmě v přímém rozporu
s definicí vzhledu v CSS. V druhém případě bude už šířka správná
a blok bude navíc správně zarovnán na střed (margin: auto;).
Dokud se pohybujeme na půdě HTML, pak o moc nejde. V okamžiku,
kdy se pustíte do XHTML nebo XML obecně, riskujete, že se
dokument nezobrazí vůbec, pokud nebude přísně dodržovat normu
předepsanou v DTD.
+ Deklarace typu dokumentu
Na DTD se v dokumentech HTML a XML odvoláváme prostřednictvím
deklarace , která musí být ve zdrojovém textu XML
uvedena hned za deklarací XML
a u dokumentů HTML jako první.
Deklarace typu dokumentu má ustálený tvar. Za
Pomlčka na začátku znamená, že DTD nebyla registrována
u oficiální standardizační organizace a jedná se tedy
o průmyslový standard. Na tom místě může být uvedeno
ISO 8879:1986 jako v případě ISO HTML 4.0, které se poněkud
liší od W3C HTML 4.0. Pokud je Identifikátor registrován jinou
organizací, může začít jejím prefixem, nebo znamínkem + (plus).
Za // následuje název původce standardu, za dalším // je název
standardizovaného typu dokumentu a po posledním // následuje
ISO zkratka pro jazyk, v němž je definice sepsána (takže tam
nepište //CS, pokud zároveň nepřepíšete i celé DTD do češtiny).
Existují i jiné typy identifikátorů. U nich se používají URN:
Za identifikátorem by měl, ale nemusí následovat URL uložení DTD.
Na uvedeném URL si prohlížeč vyzvedne DTD v případě, že ji ještě
nemá ve svém katalogu, takže doporučuji URL nevynechávat.
Druhým typem jsou DTD, které nejsou obecně známé, a proto nelze
předpokládat, že budou uloženy v katalogu prohlížeče předem.
U těchto deklarací se neuvádí veřejný identifikátor, ale pouze
odkaz na uložení DTD. Odkaz může být relativní vůči umístění
aktuálního dokumentu, nebo absolutní odkaz, který se více hodí
pro soubory umístěné na Webu.
Aby se odlišily veřejné definice od systémových, označují se
slovem SYSTEM. Příkladem za všechny může být DocBook, což je
velmi rozšířený formát pro rukopisy knih (a existuje pro něj
i veřejný identifikátor).
Poslední možností je vepsat DTD přímo do dokumentu. To se hodí
pro krátké definice jednoduchých dokumentů, jako je následující
ukázka definice XML dokumentu pro zápis genealogického vývodu.
]>
Za takovou definicí by mohl následovat třeba tento dokument:
Jaromír
Vomáčka
Karel Jaromír
Vomáčka-Eberhardt
Už jen pro samotné HTML existuje mnoho DTD. Na deklaraci
některých z nich se můžete podívat v dokumentaci Mozilly:
http://mozilla.org/docs/web-developer/quirks/doctypes.html
Samotné DTD se liší podle toho, zda jde o definice HTML nebo XML.
Pro XML jsou trochu zjednodušeny, protože syntaxe dokumentů XML
je přísnější (například, že všechny otevřené kontejnery musejí
být uzavřeny) a není toho tolik třeba definovat pro jednotlivé
typy dokumentů. O tom si ale povíme jindy.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
FRAMES NEBO NOFRAMES? DOKONALÉ FRAMES!
Pedro
Pedro je čtenář Sovy, se kterým jsem svedl tuhý boj o rámce již
letos na jaře. Přesvědčit ho, že rámce většinou nejsou ideální
se mi nepodařilo a tak jsem se mu alespoň pomstil tím, že jsem
z něj vymámil následující článek. Pokud rámce používáte, věřím
že vám bude užitečný.
Kdysi módní vymoženost -- rámce (angl. frames), upadly
v zapomnění. Na internetu je vše kompromis, vše má své výhody
i nevýhody a udělat stránku, která vyhovuje úplně všem snad ani
nelze. Na rámce se zapomnělo, tedy alespoň ve světě
profesionálních stránek, a začaly se používat stránky vytvořené
pomocí tabulek. Ale ani ty nejsou dokonalé. Zde přináším můj
názor na oba layouty a jednoduché, ale podstatné vylepšení rámců.
První, co se mi na tabulkách (rozuměj stránkách s tabulkovým
layoutem) nelíbí je to, že stejný obsah se sítí přenáší vícekrát
a zbytečně. Pokud nevíte, o čem mluvím, podívejte se třeba (na mé
oblíbené) stránky Mobilmánie, http://www.mobilmania.cz. Jak
vidíte, stránka má hlavičku, patičku, levé menu, pravé menu.
Zbytečně. Chcete si přečíst nějaký článek? Kliknete na odkaz,
nahraje se vám článek, ale mimo jiné i hlavička, patička, levé
menu, pravé menu. Zbytečně. To je také důvod, proč čtu Textovou
Mobilmanii, http://www.mobilmania.cz/Text.
Další problém je, že tabulkovou stránku lze rozumně tisknout buď
pomocí server-side programu, který pošle holou stránku určenou
pro tisk nebo pomocí CSS. A nedej bože, když na to autoři
redakčního systému zapomenou.
Marek Prokop také v naší e-mailové debatě o problému argumentoval
tím, že uživatel v případě rámců vidí i to, co vidět nechce:
pokud má stránka 3 rámy (horní reklama, vlevo menu, vpravo
obsah), vidí reklamu pořád, i když nechce. V případě tabulky by
ji odroloval. To je pravda. Také argumentuje tím, že v případě
dobrého tabulkového layoutu má možnost si narolovat doprostřed
článek a menu (vlevo, vpravo) ho neruší. To je také pravda, ale
má to jednu vadu: pak to menu musí hledat… Tabulky mají ale také
jednu výhodu - nepřekáží tam rolovátka (scrollers) mezi rámy,
v případě, že jsou povoleny a obsah se nevejde. Já si ale stejně
myslím, že v rozumně navržené rámcové stránce rolovátka
nepřekáží.
To, o čem se ale chci hlavně rozepsat, teď přichází. Pokud
používáte rámce, uživateli jen tak nemůžete dát konkrétní adresu
na konkrétní stránku v rámci. Příklad: vlevo menu, vpravo obsah.
Vlevo v menu vyberete položku a ta se vám zobrazí v pravém rámci.
Pokud na ní budete chtít někomu poslat odkaz, buď pošlete vzkaz
typu: "adresa je www.mojestranka.cz, pak klikni vlevo na Odkaz"
nebo pošlete jen adresu na konkrétní obsah rámce
"www.mojestranka.cz/ramec3.html" s tím, že uživatel uvidí holou
stránku bez možnost navigace, tedy bez kontextu.
Řešením je Javascript a skriptování na straně serveru. Osobně
jsem použil PHP (4), které je u nás hojně rozšířené a stále
oblíbenější. Kdo chcete vidět výsledek, podívejte se na mé
cyklistické stránky http://pedrokv.zde.cz/cykloweb. Nebudu si
vymýšlet žádný abstraktní příklad, vše vysvětlím na svých
stránkách.
Stránky začínají definicí rámů index.php (pro tento účel
nepodstatné části html vynechám či zkrátím):
if(!@$plocha) {
$plocha = "uvod/uvod.html" ;
} else {
$plocha = urldecode($plocha);
}
?>
Text pro prohlížeče, které neumí frames
S vysvětlením začnu od konce:
-- noframes asi nemusím vysvětlovat, komentář je ostatně
v ukázce.
-- rámce jsou definovány jako levý sloupec široký 150 pixelů
a pravý dle šířky okna. Při rozlišení 800x600 bodů to znamená
šířku pravého rámce (nazvaného plocha) 650 bodů, při 1024x768 je
to 874 bodů. U rámců je povolena změna velikosti tažením rámce
a v obou se automaticky zobrazuje rolovátko. Stránka, která se
bude nahrávat do rámce plocha je v php proměnné $plocha (viz.
dále).
-- hned za hlavičkou je php kód: Pokud není nastavena hodnota
proměnná $plocha, nastav tuto proměnnou na hodnotu
"uvod/uvod.html". V praxi to znamená, že pokud někomu dáme adresu
http://pedrokv.zde.cz/cykloweb, proměnná $plocha není ani
definována, natož aby měla nějakou hodnotu. Proto je na prvním
řádku hned před názvem proměnné zavináč, který php říká "když ta
proměnná neexistuje, kašli na to" a php nevrátí chybové hlášení.
Takže výsledek - zobrazí se nám úvodní stránka, tak jako na
obyčejných rámcových stránkách. Ale podmínka pokračuje (else),
tedy pokud proměnná nastavená je, tedy přes proměnnou zadanou
v url, hodnota se dekóduje (urldecode) a přiřadí proměnné
$plocha. Znamená to, že pokud někomu napíšeme adresu
http://pedrokv.zde.cz/cykloweb/index.php?plocha=trasy/trasy.php
dotyčný uvidí stránku, kterou chceme aby viděl a dokonce
v kontextu rámů. Uau!
Tím ale možnosti (a problémy) nekončí, ještě musíme ošetřit jednu
věc. Představte si vyhledávač. Zadáte mu slůvko a on potom jede
jako kombajn, projíždí databázi a vrací odkazy na všechny
stránky, kde se slůvko nachází. Uživatel klikne na naši stránku,
ta se mu sice načte, ale bez kontextu rámů -- bez možnosti
navigace. Můžeme sice v javascriptu napsat prográmek, který
stránku automaticky reloadne do kontextu rámů (s využitím
předcházejícího index.php), jenže tím omezíme uživatele, který
chce stránku vidět bez rámů - například pro tisk.
My v této stránce (typicky na konci nebo na začátku, avšak mezi
a ) použijeme sofistikovanější javascript:
Zde začnu popis od začátku:
Pokud je stránka "top", tedy mimo rám, napiš to dokumentu kód:
*zobrazit v rámu*
Uživatel má tedy možnost stránku prohlížet mimo kontext rámů
a pokud klikne na tento odkaz, může ji zobrazit v kontextu -
natáhnou se rámy, ale s touto správnou stránkou. A pro tisk
stránky text *zobrazit v rámu* ani nijak zvlášť nevadí.
Ještě jedna rada, či tip: vyhledávače často zobrazují titulek
vyhledané stránky (
titulek). Mnozí autoři
rámcových stránek je ale zapomínají definovat. Není divu,
v kontextu rámů nejsou vidět, je vidět jen titulek stránky, která
rámy definuje (index.html). Používejte proto vždy relevantní
titulek i u vrámované stránky.
Závěr:
Správně navržený rámcový layout (ostatně jako jakýkoliv jiný
správně navržený layout) nemusí být pro uživatele peklo, ale
naopak výhoda. Uživatel nemusí stahovat opakující se položky
(typicky menu) vícekrát. Donedávna jsem měl 14,4kbps modem, takže
vím, o čem mluvím.
Pedro, mailto:pedro_german@centrum.cz, http://pedro.jinak.cz/
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Starší čísla naleznete na http://www.sovavsiti.cz/archiv.html
Více odkazů pro webmastery na http://www.sovavsiti.cz/odkazy.html
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
NOVINKY U PETRA KOCNY K 13. 3. 2002
... v katalgu katalogů http://www.lf1.cuni.cz/~kocna/kam-www.htm
a vyhledávačů http://www.lf1.cuni.cz/~kocna/roboti.htm
Od posledního zveřejnění novinek v Sově číslo 2/4 bylo přidáno
dalších 10 zdroju, celkový počet je již 202. Vybíráme
nejvýznamnější změny.
Cz.Versions: na URL je zcela jiný projekt, bez katalogu či výměny
ikonek.
HealthCz je zrušeno, server neodpovídá.
Nově zařazen server iTop cz, obdoba služby TOP nebo NaVrcholu,
nabízí statistiky prístupu; do seznamu stránku slibují vložit
během 2-5 dnu, přidělují ID a emailem potvrzují vložení do
databáze.
BezvaPortal: zprovozněn je již katalog, prohledávání katalogu je
fulltextové.
Matlafous: tipy na WWW stránky opět po delší době aktualizovány.
Caramba: databáze převzata ze serveru Redbox s mnoha chybami.
Nový Reboot.Cz má kategorii rozcestníku -
http://www.reboot.cz/links.phtml
Fulltextový hledač Megatext je zrušen.
Seznam Nula.cz: zrušena možnost pridávat nové odkazy.
Nově přidán server Jednorožec -- jsou zde kategorie se 145 000
odkazy, prohledává i přes URL.
Roboti a pavouci -- dne 13.6. provedena detailní kontrola,
aktualizace vyhledávání, tabulky změněny a rozšíreny.
A to je pro dnešek vše. Mějte se krásně a užívejte si léta :-)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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) 2002 Marek Prokop -- http://www.sovavsiti.cz/