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. Ukázka práce s DTD
Ukázka práce s DTD
Zkuste si nyní výše uvedený příklad otevřít v MSIE 6. Udělejte si otisk obrazovky a přidejte před deklaraci DTD: Opět si udělejte otisk obrazovky a oba příklady porovnejte. + Co zjistíte? Podle dokumentace k MSIE 6, by v prvním případě měl být
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): 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/