Sova v síti - 1/11 - vydáno 4.6.2001 Dobrý den, je zde pondělí a s ním vaše Sova v síti :-) OBSAH -- Redesign Sovy v síti II - layout -- Seriál o PHP, V.část -- Prezentace firmy nestačí -- Odpovídáme na dotazy čtenářů -- V příštím čísle REDESIGN SOVY V SÍTI II - LAYOUT Dnes pokročíme v redesignu stránek Sovy v síti od slov k činům. Komu unikl úvodní článek a neví tedy, co máme v plánu, může si stáhnout minulé číslo na adrese http://www.sovavsiti.cz/download/sova0110.txt Jako jeden dílčí cíl jsme si minule vytýčili maximální oddělení formy a obsahu, plně v duchu aktuálních trendů a doporučení standardizačního konsorcia W3C. Co to v praxi znamená? V podstatě to, že budeme používat pouze strukturální prvky HTML (např. odstavec, nadpis, atd.) a veškeré formátování přenecháme kaskádujícím stylům (CSS). Zároveň ovšem chceme, aby uživatel starších prohlížečů, které platné standardy nepodporují, byl schopen obsah stránek zcela bez problémů přečíst. Původní (a stále dosud platná) vstupní stránka Sovy v síti byla rozvržena pomocí tabulek. Dokonce se dá říci, že pomocí mnoha tabulek. I bez těch nejvnořenějších tabulek na pravém okraji byla velikost stránky bez jakéhokoli obsahu a formátování textu, tedy samotného layoutu přes 5kB. Nyní jsme připravili hned 2 varianty nového layoutu jehož velikost činí pouhých 668 Bytů, tedy téměř 10x méně. Není v něm totiž použita jediná tabulka. Výsledky naší práce naleznete na adresách http://www.sovavsiti.cz/newlayout/layout1.html a http://www.sovavsiti.cz/newlayout/layout2.html. Zatím se jedná jen o samotný layout. Barvy jsou použity jen ke zvýraznění jednotlivých bloků a stejně jako typ písma a další stylové prvky se nakonec asi ještě změní. Podíváte-li se na zdrojový kód, zjistíte následující skutečnosti: 1) Obě stránky jsou v podstatě stejné. Tvoří je jeden prvek DIV pro záhlaví (id="header"), jeden DIV pro vlastní obsah (id="maincontent"), další DIV pro pravý pruh (id="sidebar") a poslední DIV pro zápatí (id="footer"). Tyto 4 prvky následují v tomto přirozeném pořadí za sebou bez jakéhokoli vnořování. 2) Ke stránkám patří i příslušné soubory kaskádových stylů. Layout1.html používá style1.css a layout2.html používá style2.css. Podíváte-li se na zdrojový kód stylů, zjistíte, že právě v nich se obě stránky liší. Za chvíli si řekneme jak. Teď si ještě povšimněte, že soubory stylů nejsou k souboru HTML připojeny obvyklým způsobem, tj. pomocí ale pomocí konstrukce To má velký význam pro zachování čitelnosti stránky pro prohlížeče, které podporují CSS nedostatečně, konkrétně pro IE a NN verzí 4 a nižší. Kdybychom použily první způsob připojení stylů, tyto starší prohlížeče by styly použily po svém a výsledek by byl strašný. Příkazu @import ale rozumí jen novější prohlížeče verzí 5 a vyšších, takže starší ho budou ignorovat. Ptáte se, jak tedy starší prohlížeče stránku zobrazí, když se nedostanou na definici stylu. Odpověď je velmi jednoduchá. Zobrazí naprosto čisté a dokonale čitelné HTML bez jakéhokoli formátování. Tedy přesně to, co jsme si dali za cíl. Zkuste si schválně zobrazit stránku http://www.sovavsiti.cz/newlayout/layout1.html např. v NN4. Skutečnost, že se ve starších prohlížečích nepoužije definice stylů, jsme využili k dalšímu "triku", který dokonce doporučuje Webstandards.org. Na začátku stránky je jeden odstavec, který návštěvníka upozorňuje, že stránku uvidí mnohem lépe v prohlížeči, který podporuje platné standardy. Tomuto odstavci je přiřazena třída cssalert (
), která je definována takto: p.cssalert {display: none} Pokud tedy prohlížeč styly nepoužije, bude odstavec normálně vidět. Pokud je použije, odstavec zmizí, neboť pravidlo display:none přikazuje prvek vůbec nezobrazit. Podívejme se nyní, čím se 2 nové verze stránky liší. Když se podíváte na obě stránky prohlížečem, na první pohled možná rozdíl ani nezjistíte. Ten se totiž projeví až když zkusíte různé šířky okna v prohlížeče. Zatímco v prvním případě (layout1.html + style1.css) je šířka pravého pruhu stále stejná, a rozšiřuje/zužuje se jen vlastní obsah vlevo, v druhém případě se proporcionálně rozšiřují/zužují oba sloupce. Obě varianty mají své výhody a nevýhody, takže jsme se ještě nerozhodli, kterou nakonec zvolíme. Rozhodnutí se dozvíte až příští pondělí, kdy začneme do připraveného layoutu vkládat další prvky. Dnes ještě upozorníme na jeden užitečný trik, který je v definici stylů použit. Jedná se o to, že IE5 chybně interpretuje šířku blokových prvků. Pokud nadefinujete styl blokového prvku např. takto: #maincontent { margin-right: 10px; padding-right: 10px; border-right: 10px solid #000000; width: 100px } zjistíte, že celková šířka prvku vč. výplně (padding), rámečku (border) a okraje (margin) bude v IE5 pouze 100px, zatímco v NN5/6 a Opeře 5 bude 130px. IE5 totiž interpretuje šířku chybně (v rozporu se standardem). Aby šířky vycházeli ve všech prohlížečích stejně, použili jsme trik, o kterém se můžete více dočíst na stránce http://www.tantek.com/CSS/Examples/boxmodelhack.html. Nu, a to je pro dnešek s redesignem Sovy v síti vše. Do příště si zvolíme jednu z dosud vytvořených variant layoutu (budeme rádi, když nám pošlete své názory) a pustíme se do záhlaví a rámečků v pravém sloupci. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Lze uspet v poradenstvi na internetu? Mnozi to jiz dokazali! Zeptejte se jich jak v konferenci on-line poradcu iPoradny. http://www.iporadny.cz/konference/ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SERIÁL O PHP, V.ČÁST Martin Jelínek Příkazy if, if - else, if - elseif - else Dnes to projedeme celkem rychle. Zkuste si již něco naprogramovat. 1) If Příkaz if se používá, pokud je splněna nějaká podmínka, tak se provede další příkaz. Syntaxe je: if (výraz) příkaz. Pro lepší pochopení uvedu příklad. Pokud chceme vydělit dvě čísla, ale pouze určená. $a = 2; $b = 4; if ($a < $b): echo "a 2) if - else Používá se, pokud je splněna jedna podmínka provede se daný příkaz. Pokud není provede se jiná. $a = 4; $b = 2; if ($a<$b): echo "a 3) if - elseif - else Pokud neplatí podmínka za if, provede se elseif a pokud neplatí ani tohle, provede se příkaz za else. $a = 4; $b = 2; if ($a<$b): echo "ab" ; endif; ?> Za proměnné $a a $b můžete samozřejmě dosazovat libovolná čísla. Tak nyní již znáte základ programování v Php. Příště si probereme ještě nějaké další příkazy. Zkuste si již něco naprogramovat a napište mi vaše úspěchy i neúspěchy. Při jakémkoliv problému pište na webmaster@oozzik.com (c) 2001 Martin Jelínek - http://oozzik.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Líbí se vám Sova v síti? Doporučte ji vašim přátelům! http://www.sovavsiti.cz/recommend.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ PREZENTACE FIRMY NESTAČÍ V dnešní marketingové promluvě chci upozornit na velmi častou chybu, které se dopouštějí nezkušené firmy vstupující se svými stránkami na internet. Obvyklé schéma vypadá nějak takto: 1) Vedení firmy rozhodne o vytvoření webové prezentace. 2) Dodavatel vytvoří prezentaci, zaregistruje doménu a prezentaci do ní umístí . V mnoha případech tím všechno skončí. Firma vyhodila peníze za webovou prezentaci, která jí nemůže žádným způsobem přinést užitek. Dobrá, připusťme nyní, že naše firma měla štěstí na dobrého dodavatele stránek a ten ji poradil, že předchozí kroky nestačí a že je třeba navíc ještě stránky pravidelně aktualizovat a propagovat. Firma tedy uzavře s dodavatelem dlouhodobou smlouvu, předává mu podklady a stránky se pravidelně aktualizují. Navíc je vyčleněno pár tisíc měsíčně z rozpočtu na bannerovou reklamu. I v takovém případě však očekávaný efekt nepřichází. Návštěvnost je minimální, o objednávkách či nových zákaznících získaných přes web ani nemluvě. Ptáte se v čem je chyba? V tradiční představě o webu jako o prostoru pro *prezentaci*. To správné klíčové slovo totiž zní *komunikace*. Investuje-li firma s jednou e-mailovou schránkou vybíranou jednou týdně do firemního webu sebe víc a sebe lépe, jsou to jen vyhozené peníze. Jak tedy používat web tak, aby skutečně něco přinesl? Zde je pár nejdůležitějších zásad, platných pro komerční stránky: -- Text i úprava stránek musí v návštěvníkovi vzbuzovat dojem dialogu. Pocit, že jsou zde stránky pro něj a že se o něj někdo stará během doby, kdy si je prohlíží. -- Stránky musí nabízet co nejvíc prostředků, kterými s vámi může návštěvník sám zahájit komunikaci: e-mailové kontakty, odpovědní či poptávkové formuláře, kniha návštěv, interaktivní databáze otázek a odpovědí o vašich produktech a službách, diskusní fórum, formulář pro vyžádání pravidelného newsletteru, atd., atd. -- Pro komunikaci s "webovými" zákazníky (i jen zájemci) musí být bezpodmínečně ve firmě někdo vyčleněn. U velmi malé firmy stačí alespoň jeden pracovník na 1-2 hodiny denně, u větší již bude spíš potřeba menší tým na plný úvazek. -- Je třeba neustále vymýšlet nové a nové prvky, jak obsahové, tak formální, které zaujmou nové zákazníky a udrží ty staré. Firemní elektronický časopis, e-mailová konference pro podporu zákazníků, stále aktualizovaná znalostní databáze o vašich výrobcích, atd. To vše vám nemůže zajistit žádný dodavatel. Ten může jen poradit, navrhnout strategii, vytvořit a technicky spravovat web, vyškolit vaše pracovníky. Nicméně to hlavní a nejdůležitější zůstává na vás: komunikovat všemi dostupnými prostředky s každým, kdo váš web navštíví. --- reklama ----------------------------------------------------- A co vaše strategie? Kolik nových zákazníků už získal váš web? http://www.prokopsw.cz/inet/ - mailto:posta@prokopsw.cz Netvoříme webové stránky, tvoříme váš úspěch na internetu! ---------------------------------------------------- reklama ---- ODPOVÍDÁME NA DOTAZY ČTENÁŘŮ Dotaz: Vsimol som si, ze niektore stranky pouzivaju javascript, ktory zistuje prehliadac a na zaklade toho priraduje subor .css bud pre IE, alebo pre NN. Zo stranky www.interval.cz som si staihol tabulku vsetkych css, ale chyba mi tam popis pouzitelnosti v IE a NN. Existuju styly pre IE a NN zvlast? Ak ano mohli by ste ich publikovat? Mne například nefunguje v NN funkcia HOVER, teda nemeni sa farba, alebo text-decoration po nabehnuti mysou. Ako na to? Odpověď: V současnosti existují platné normy CSS1 a CSS2, v návrhu je CSS3 (podrobněji viz www.w3c.org). Jak již však na webu bývá zvykem, jedna věc je norma a druhá realita, v tomto případě podpora prohlížečů a jejich chyby. Obecně se dá říci jen to, že některé prohlížeče některé prvky CSS podporují správně, jiné špatně a jiné vůbec. Některé prohlížeče naopak podporují proprietární vlastnosti, které v žádné normě CSS vůbec nejsou. Pokud vím, zatím snad neexistuje prohlížeč, který by zcela správně podporoval beze zbytku celou normu CSS1. Na druhou stranu je od verzí 5 výše všech hlavních prohlížečů implementace CSS1 i 2 na natolik slušné úrovni, že ji zle velmi slušně používat. Více informací o tom, co který prohlížeč umí naleznete např. na stránkách http://css.nu/pointers/. Co se týče konkrétně pseudotřídy hover, v NN opravdu nefunguje. Ze všech chyb, které NN4 ale má, je to ta nejmenší. Být vámi, vůbec bych se tím netrápil :-) Dotaz: Jsem váš,sice krátký, ale velký příznivec, a zajímalo by mě, zda se dá vyrobit chat v html a nebo popřípadě v jiných formátech! Pokud jste již o tomto tématu psali, napište číslo sovy,prosím. Je to asi trochu obsáhlejší, tak by nebyl od věci samostatný článek v časopise, určitě to nezajímá jen mě. DÍKY Odpověď: Odpovím velmi stručně. V samotném HTML se chat vyrobit nedá. Dá se vyrobit, byť poněkud nedokonale, pomocí serverových skriptů typu ASP či PHP, které generují čisté HTML a na straně klienta je pak stránka s chatem v pravidelných intervalech znovu načítána. Pro skutečný a plnohodnotný chat jsou však lepší jiné prostředky a protokoly než právě HTML a HTTP. V PŘÍŠTÍM ČÍSLE -- Redesign Sovy v síti III - záhlaví a rámečky -- Seriál o PHP, VI.část -- Použitelnost stránek a barvy -- Odpovídáme na dotazy čtenářů A to je pro dnešek vše. Přejeme vám krásný den, jakož i celý zbytek týdne a příští pondělí zase na shledanou! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 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. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ARCHIV STARŠÍCH ČÍSEL Hodně nových čtenářů se ptá, kde najdou články ze starších čísel Sovy v síti. Všechny čísla jsou ihned po vydání ukládány do adresáře www.sovavsiti.cz/download a jmenují se sovaRRCC.txt, kde RR je ročník (zatím vždy 01) a CC je číslo (vždy dvojciferné, tedy např. 02). Soubory jsou textové, čeština je kódována dle Windows-1250. Nehledejte v adresáři žádný html dokument, žádný tam není. Lze si pouze stáhnout jednotlivá čísla přímým zadáním jejich URL, tedy např. http://www.sovavsiti.cz/download/sova0104.txt. Pozor, server rozlišuje malá a velká písmena. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 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/