Sova v síti - 1/19 - vydáno 27.8.2001 Dobrý den, je zde pondělí a s ním vaše Sova v síti :-) OBSAH -- Úvodník -- Levostranná navigace - má opodstatnění? -- PPWizard - univerzální preprocesor i pro HTML -- Seriál o PHP, XIII.část - Zpracování dat z formulářů -- Odpovídáme na dotazy čtenářů ÚVODNÍK Pomalu nám končí léto. Příští číslo vyjde již za týden, se čtrnáctidenními intervaly je konec. Naštěstí pro mne se tým autorů Sovy opět rozšířil. Oním "nováčkem" je Matin Kopta, kterého mnozí z vás určitě znají jako všeobecně uznávanou autoritu konference Webdesign či v jeho novější roli garcon d'editeur webzinu Lupa. Další známou postavou českého internetu, se kterou Sova začíná spolupracovat, je Dr. Petr Kocna. Již v příštím čísle si podrobněji představíme jeho katalog katalogů a vyhledávačů a začneme též publikovat oznámení o všech aktualitách na těchto velmi užitečných stránkách. Do té doby si je můžete prostudovat na adrese http://www.lf1.cuni.cz/~kocna/kam-www.htm A nyní se již pusťte do čtení. Přeji vám hodně poučení a sem tam i zábavy. LEVOSTRANNÁ NAVIGACE -- MÁ OPODSTATNĚNÍ? Martin Kopta Jeden z významných hlasů světového webdesignu, Jeffrey Zeldman, vydal v květnu letošního roku knihu "Taking Your Talent to the Web". Ve třetí kapitole, která je zaměřena na tvorbu navigace a uživatelského rozhraní website, si všímá zajímavého klišé, které najdete snad na každém druhém webu -- ano, je to navigační menu v levé horní části obrazovky. Zeldman tu k levostranné navigaci zaujímá ryze negativní postoj, ale je opravdu menu v levém sloupci jen a jen špatné? Do roku 1995 svět levostrannou navigaci vůbec neznal; HTML pro ni nemělo dostatečné nástroje. Teprve v tomto přelomovém roce začalo vítězné tažení tabulek napříč webem, a to s sebou přineslo i první navigační menu (mnohdy vyvedená grafickými odkazy) a tehdy také vznikl nejdříve dvousloupcový vzhled, z nějž se později (když uživatelé přešli ze 14" monitorů na 15") vyvinul vzhled třísloupečný, který tak dobře známe ze zpravodajských webů. Umístění navigace do levého horního rohu představovalo z hlediska grafického ohromný přínos pro zpřehlednění a oživení do té doby většinou nudných a jednotvárných webů. Vzhledem k tomu, že v době před vynálezem tagu neexistoval žádný způsob, jak nastavit šířku řádků (snad vyjma tvrdého zalamování), texty roztažené přes celou šířku okna obrazovky se obtížně četly. Umístěním navigace do levého sloupce designer získal vhodné rozvržení objektů stránky, a zároveň tím i zmenšil volný prostor pro šířku řádků souvislého textu. Když se o rok později, v březnu 1996, objevila v Netscape 2.0 poprvé možnost rozdělit okno prohlížeče do rámů, znamenalo vyčlenění navigace do samostatného dokumentu úsporu v práci kodera a urychlení načítání stránek, na což před pěti lety byl kladen mnohem větší důraz než dnes. A tak levostranná navigace stále získávala na popularitě. Seřazení odkazů pěkně pod sebe usnadňuje konstrukci serverem generovaných menu (zvláště kontextových) a v případě, že potřebujete vytvořit strukturovaný strom podobný tomu z Průzkumníka ve Windows, pak asi nemáte ani jinou možnost. Tím ovšem veškeré výhody levostranné navigace končí. Někteří webmasteři se při navrhování menu do levého horního rohu zaštiťují ergonomií ovládání. Bohužel neznám žádný výzkum, o který by se takové tvrzení mohlo opřít, zato se mohu podělit o argumenty, které domnělou ergonomii levostranných menu nahlodávají. Předně si musíme uvědomit, že v našich kulturních podmínkách čtenář vnímá obrazové informace zleva do prava, takže nutnost přeskočit při každém přesunu pohledu na začátek nového řádku zbytečně rozptyluje jeho pozornost a zvyšuje únavu, která se i bez toho u čtení z obrazovky dostavuje mnohem dříve než u tištěných textů. Také argument, že čtenář, který má všechny důležité odkazy pohromadě, méně namáhá zápěstí při pohybu kurzorem, docela pokulhává. Pokud čtenář musí třeba posunovat obsahem okna, je tak jako tak nucen pohybovat se myší napříč celou obrazovkou. Kromě toho ještě nikdo nedokázal, že by jiné druhy navigací nebyly stejně vhodné jako ta levostraná. Ergonomií ovládání se velmi intenzivně zabývají především tvůrci grafického uživatelského rozhraní (GUI) složitých aplikací. Kdyby tedy byla pravda, že levostranná navigace má navrch proti jinému rozložení ovládacích prvků, určitě by většina tlačítek ve Wordu nebyla umístěna do vodorovné lišty a zcela jistě by bitmapové editory nebyly ovládány z paletek a lišt rozmístěných po celém obvodu desktopu. A tak jedinou výraznou výhodou levostranného menu v současnosti zůstává fakt, že zvláště zběhlí uživatelé už navigaci v levém horním rohu stránky hledají zcela instinktivně a velmi snadno se pak na stránce zorientují. Ukázkovou třetí kapitolu Zeldmanovy knížky (30 stránek) si můžete stáhnout přímo z webu autora . Kniha je velmi hodnotná především pro mírně pokročilé webmastery, kteří již do určité míry překonali záludnosti HTML a nyní jim chybí informace pro kvalifikované uvažování o webdesignu jako o prostředku k lepší komunikaci. Přestože zmíněná ukázková kapitola patří v celé knize k tomu vůbec nejlepšímu, určitě se vyplatí pořídit si Taking Your Talent to the Web do své odborné knihovničky. (c) 2001, Martin Kopta ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 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 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ PPWIZARD - UNIVERZÁLNÍ PREPROCESOR I PRO HTML Marek Prokop Jistě to znáte také. Na všech třiadvaceti stránkách svého webu chcete mít stejné záhlaví i zápatí, pravý pruh, levý pruh, atd. A pak je najednou potřeba změnit telefonní číslo v zápatí, logo v záhlaví přesunout doprava, přidat odkaz do menu v levém pruhu. Tradičně si webmasteři usnadňují práci na rozsáhlejších webech dvěma způsoby: 1) Rámce. Pomocí rámců lze snadno dosáhnout toho, aby se určité prvky (například záhlaví, či boční navigační menu) opakovaly neměně na všech stránkách. Použití rámců však má většinou více nevýhod než výhod, o čemž jsem už ostatně jednou v Sově psal (http://www.sovavsiti.cz/c01052.html). 2) SSI, neboli vkládání na straně serveru. Pro tuto techniku je však zpravidla nezbytné mít k dispozici server/webhosting s PHP, či ASP a to nemá každý. Navíc SSI představují pro server určitou zátěž, která u hodně navštěvovaných webů může být nežádoucí. Když tyto způsoby nejsou možné, či vhodné a pominu-li pár dalších, více méně okrajových metod (klientský JavaScript, Shared Borders v MS FrontPage), zdálo by se, že nezbývá nic jiného než pečlivá ruční práce a snad ještě dobrý textový editor se silnou funkcí "Najdi a nahraď". Není to však pravda. Jsou zde HTML preprocesory a jeden z nich, PPWizard, vám dnes představím. PPWizard pochází z Austrálie a jeho autorem je Dennis Bareis. Program ve verzích pro většinu myslitelných operačních systémů i jeho obsáhlou dokumentaci naleznete na http://www.labyrinth.net.au/~dbareis/ppwizard.htm. Jak URL napovídá, program si ještě nevydělal ani na vlastní doménu -- je totiž zcela zdarma. Přesto jsou jeho možnosti naprosto mimořádné. Přiznám se, že nevím, čím začít. PPWizard toho umí tolik, že všechny jeho funkce pravděpodobně nikdy nevyužijete. Na druhou stranu, to nejužitečnější se určitě naučíte během pár hodin a během dalších pár hodin se vám tato časová investice vrátí. Zkusme malý příklad přímo ze Sovy v síti, na kterou PPWizard také používáme. Zdrojový kód stránky archivu (http://www.sovavsiti.cz/archiv.html) pro PPWizard vypadá nějak takto: #define DocTitle Odkazy pro webmastery #define Sidebar \ #include "box_regform_2.ih" \ #include "box_feedbackprompt.ih" \ #include "box_recommendsite.ih" \ #include "box_playagame.ih" #include "template_top.ih"

<$DocTitle>

Na této stránce jsme pro vás připravili přehled těch nejlepších odkazů pro webmastery. Seznam jsme teprve začali budovat, takže prosím omluvte ... ... #include "template_bottom.ih" Jak vidíte, kód začíná příkazy #define, kterými se definují hodnoty proměnných. Například příkazem #define DocTitle Odkazy pro webmastery se do proměnné DocTitle přiřadí řetězec "Odkazy pro webmastery". Proměnné pak mohou být v následujícím zdrojovém kódu kdekoli použity, a to i tehdy, je-li zdrojový kód rozdělen do více souborů. Příklad použití proměnné DocTitle vidíte zde:

<$DocTitle>

Dalším příkazem je #include, který do aktuálního souboru vkládá obsah jiného souboru. V našem příkladu tedy příkaz #include "template_top.ih" způsobí, že se na jeho místo vloží obsah souboru template_top.ih. Pokud template_top.ih bude obsahovat další příkazy define či include, bude jejich zpracování rekursivně pokračovat. To vše ale až v okamžiku kompilace. PPWizard totiž pracuje offline. Nejprve musíte připravit zdrojové soubory, spustit kompilátor (s případnými parametry) a ten vám již vygeneruje konečné HTML dokumenty. Kromě těchto dvou jednoduchých příkazů include a define, toho umí PPWizard ještě mnoho. Alespoň namátkou: -- Větvení zpracování na základě logických podmínek. V logických podmínkách lze využít jak vlastní proměnné, tak proměnné systémové, např. jméno výsledného dokumentu. Na Sově tak jeden a tentýž zdrojový kód generuje navigační menu na levém okraji, ačkoli je toto menu na každé stránce jiné (aktuální stránka není odkaz). -- Cykly a import dat z databází. Tímto způsobem je na Sově generován archiv vydaných čísel. -- Převod prostého textu na HTML. Pomocí této funkce by šlo články Sovy převádět z emailové podoby do běžného HTML. Zatím jsem to však nezkoušel. Zároveň však PPWizard není s HTML nijak svázán. Stejně dobře s ním můžete generovat PHP či ASP skripty, zdrojové texty ve vyšších programovacích jazycích a třebas i milostné dopisy. Podstatné je, že cokoli, co se ve výsledném textu několikrát opakuje, napíšete pouze jednou. Delší texty do samostatných souborů, kratší můžete definovat jako proměnné v jednom souboru. Jakoukoli opravu či změnu opět provedete pouze na jednom místě. Jednoduchým příkazem pak vygenerujete buď jednotlivý výstupní soubor, nebo všechny soubory celého, předem nadefinovaného projektu. V druhém případě PPWizard dokonce automaticky pozná, které soubory je potřeba vygenerovat znovu a které nikoli, protože se jejich zdrojový kód nezměnil. Pokud máte na starosti víc než jen pár stránek, určitě PPWizard vyzkoušejte. Zároveň budu rád, když se s námi o své zkušenosti podělíte. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Majitelé a správci firemních webů, vydáváme pro vás newsletter FIRMA ONLINE - jak zvyšovat návštěvnost a účinnost stránek, jak podnikat na internetu - http://www.prokopsw.cz/online/ezines.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SERIÁL O PHP, XIII.ČÁST - ZPRACOVÁNÍ DAT Z FORMULÁŘŮ Martin Jelínek V minulém díle jsme si ukázali, jak vytvářet formuláře, jak je odesílat skriptům atd. A dnes si ukážeme, jak zpracovávat data z formulářů. Vytvoříme si jednoduchý formulář:
Jméno: Vstupní stránku uložíme třeba jako vstupni.html a nyní si ukážeme, jak bude vypadat PHP skript. Vytvoříme si soubor formular.php (tento soubor jsme nadefinovali v určení formuláře a můžeme ho libovolně měnit). Vypsání hodnot zadaných ve formuláři: Všechny prvky, které vypisujeme se chovají jako proměnné a názvy proměnných se určují v pojmenování prvků formuláře. echo $jmeno ($jmeno = název textového pole) Ale tohle nám asi bude k ničemu, protože data se nikam neuloží a to mi určitě chceme. K tomu se dají použít již dříve zmiňované databáze nebo zapisování do souboru. Nyní si ukážeme, jak jednoduše zapisovat do souboru. Jako první věc si vytvoříme libovolný txt soubor např. soubor.txt. Do tohoto souboru budeme zapisovat všechna data. V souboru formular.php bude následující kód: "; $a = Implode ($pol,"
"); //jednotlivé položky se oddělí mezerou $fp = FOpen("soubor.html","a"); //otevře soubor FWrite($fp,$a); //zápis do souboru FClose($fp); //zavření souboru ?> V řádce $fp = FOpen("soubor.html","a"); a (áčko) na konci znamená otevření souboru pro doplňování. Můžeme, ale použít i další formy zapisování -- r - otevře soubor pro čtení -- w - otevře soubor pro zapisování, pokud existuje je smazán -- a - otevře soubor pro doplňování -- r+ - otevře soubor pro čtení a zápis, soubor musí existovat -- w+ - otevře soubor pro čtení a zápis, pokud existuje je smazán -- a+ - otevře soubor pro doplňování a čtení Tak to by bylo pro dnešní díl vše. Příště si ukážeme jak to udělat, abychom nemuseli vytvářet soubor, do kterého zapisujeme data, protože skript si ho vytvoří sám a my si určíme i název souboru. Pomocí znalostí, které jste nabyli dnes, si již můžete vytvořit vlastní knihu návštěv :-) (c) 2001 Martin Jelínek - http://oozzik.com, http://nokia.webz.cz ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 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: Mam stranku s frames. V jednom z ramu jsou zobrazovany stranky jinych autoru (jedna se o informacni kiosek nekolika obci). Rad bych hlidal "mysi" aktivitu a po urcite dobe necinnosti se vratil na uvodni stranku celeho projektu. Pomoci klientskeho jscriptu je to nemozne, protoze neznam kazdou strukturu a jmena cizich (pripadnych) ramu. Predpokladam pouziti PHP. Jak tento problem resit? Odpověď: Mám obavy, že pomocí PHP to bude ještě nemožnější. Na straně serveru "myší" aktivitu zjistíte těžko. Dotaz: chtel bych se zeptat, zda bylo v nejakem clanku zminovano neco o hudbe na pozadi a s tim spojenem problemu kompatibility IE a NN ?? Odpověď: Dosud ne. Je to dobrý námět na další článek a určitě se k němu někdy vrátíme. Dotaz: Jak mám nastavit odkazy, aby se zpustily dva najednou. (Např. při kliknutí na nějaký odkaz, aby se automaticky zpustila v novém okně reklama) Odpověď: JavaScriptem. Pokud vydržíte do příštího čísla, dozvíte se mnohem podrobnější odpověď v připravovaném článku Martina Kopty. Dotaz: Jak mám nastavit aby návštěvník musel nejdříve kliknout na reklamu (nebo libovolný odkaz) a až potom by se mu povolil přístup k jinému odkazu. Odpověď: V podstatě máte 2 možnosti. Buď použít skripty na straně serveru (PHP, ASP) a po kliknutí na určitý obsah vygenerovat jinou verzi stránky s ostatními odkazy, nebo klientský JavaScript a DHTML. Druhý způsob je však dosti náročný a nebude spolehlivě fungovat ve všech prohlížečích. Dotaz: chtel bych se zeptat k clanku o spravne volbe domeny, zda je vhodnejsi napr. dvouslovne domeny nejak oddelovat (pokud ano, tak cim, teckou, pomlckou atd.), ci se vice zazije jejich spojeni, uvedu priklad. co je lepsi, koupe-zbozi.cz nebo koupezbozi.cz Odpověď: Abych se přiznal, neznám žádný český průzkum, který by podpořil jednu, či druhou variantu. V angličtině se obvykle preferuje název domény bez oddělovacích znaků. V podstatě se ale jedná o pseudoproblém. Pokud můžete, zaregistrujte si všechny varianty požadovaného názvu, jak bez oddělovačů, tak s nimi. Pokud už jsou některé varianty obsazeny, pečlivě zvažte, zda vzít to, co zbývá, nebo se poohlédnout po jiném názvu. A to je pro dnešek vše. Na příští vydání se můžete těšit již za týden, tedy 3.9.2001 a naleznete v něm: -- Více méně praktickou úvahu o nadpisech Marka Prokopa -- Navigace v rámcích pomocí JavaScriptu od Martina Kopty -- Další část seriálu o PHP od Martina Jelínka -- Odpovědi na vaše dotazy, zajímavé odkazy, novinky na stránkách 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/