Sova v síti - 1/12 - vydáno 12.6.2001 Dobrý den, je zde vaše Sova v síti, tentokrát s omluvou za jednodenní zpoždění :-) OBSAH -- Redesign Sovy v síti III - záhlaví a rámečky -- Seriál o PHP, VI.část -- Použitelnost stránek a barvy -- Čtenáři nám píší -- V příštím čísle REDESIGN SOVY V SÍTI III - ZÁHLAVÍ A RÁMEČKY V minulém čísle jsme si připravili rozvržení stránky, neboli layout. Obě verze jsou pro osvěžení paměti či pro nové čtenáře stále k dispozici na adresách http://www.sovavsiti.cz/newlayout/layout1.html a http://www.sovavsiti.cz/newlayout/layout2.html, zatímco na adrese http://www.sovavsiti.cz/download/sova0111.txt můžete nalézt text předešlého dílu. Pro dnešní pokračování jsme připravili záhlaví stránky a postranní rámečky. Nejprve je ovšem třeba říci, že ze dvou varianta layoutu, připravených v minulém dílu, jsme si vybrali ten první, pro který je charakteristická pevná šířka pravého okraje pro rámečky. Vedlo nás k tomu několik důvodů, z nichž nejpodstatnější byl ten, že je to přeci jen jednodušší řešení. Stránku pro dnešní výklad naleznete na adrese http://www.sovavsiti.cz/newlayout/layout11.html. Chcete-li se stáhnout i soubor CSS, je na http://www.sovavsiti.cz/newlayout/style11.css. Hlavička stránky se skládá z obrázku sovy, nadpisu celého webu a podnadpisu. Navíc je pod ní ještě modrá čára na celou šířku obrazovky. V HTML vypadá hlavička takto:
Jak vidíte skládá se ze dvou hlavních bloků DIV. První s id "header" pro vlastní hlavičku a druhý (s id="headerline") pro modrou oddělovací čáru. Pokud si vzpomenete na minulý díl, měli jsme v něm oddělovací čáru realizovanou jako spodní orámování (border-bottom) vlastní hlavičky ("header"). Toto řešení však neumožňovalo ponechat úzký bílý proužek mezi hlavičkou a čárou, a proto jsme ho dnes nahradili způsobem uvedeným výše. Nyní se podíváme na styly, které formátování hlavičky ovlivňují. Selektor #header, tedy vlastní hlavička je definován těmito pravidly: #header { background: #ffffff url(img/bg.gif) repeat-y; height: 72px; } Vidíte, že od minule se dosti zjednodušil. Protože jsme přidali oddělovací čáru, nemusí již obsahovat spodní orámování ani okraj. A protože neobsahuje orámování, nemusíme ani použít onen trik kompenzující chybu v Internet Exploreru (viz výklad v minulém dílu). Vlastní hlavička se nám sice zjednodušila, přibyly nám ale nové prvky. Obrázek, pro který jsme zvolili id "toplogo", hlavní titul stránek s id "htitle", podtitul s id "hsubtitle" a konečně ona oddělovací čára "headerline". Styly pro tyto prvky jsou definovány takto: #toplogo { float: left; margin: 0px 20px 0px 0px; width: 102px; height: 72px; } #htitle { color: #000066; font-size: 22px; font-weight: bold; letter-spacing: 0.7em; padding-top: 12px; padding-bottom: 5px; } #hsubtitle { color: #cc0000; font-size:12px; } #headerline { background: #000099 none; height: 2px; font-size: 0px; margin-top: 2px; margin-bottom: 10px; } Pro logo je použita vlastnost float, aby text mohl obrázek obtékat zprava. Povšimněte si též, že velikost obrázku je také uvedena ve stylech a nikoli v základním HTML. Selektory "htitle" a "hsubtitle" v podstatě jen určují písmo a odsazení titulu a subtitulu. Podstatné je, že velikost písma musí být v tomto případě uvedena v pixelech, aby byla vždy zachována relace k velikosti loga. Na oddělovací čáře definované selektorem #header line na první pohled není nic zajímavého. Jedná se prostě o modrou čáru širokou (přesněji vysokou) 2px s horním okrajem 2px (odsazení od hlavičky) a spodním 10px (odsazení od zbytku stránky). Povšimněte si ale pravidla "font-size: 0px". Proč ho zde máme, když v prvku žádné písmo není? Je to proto, že Internet Explorer chybně vykresluje výšku bloku - i když je blok zcela prázdný a deklarovaný s výškou 2px jako zde, IE5 ho nakreslí tak vysoký, jako by v něm byl nějaké text. Proto je třeba ho přesvědčit, že případný text má nulovou výšku a celkovou výšku bloku tedy nemůže ovlivnit. Nakonec se podívejme na rámečky na pravém okraji. V HTML jsou realizovány opět jako DIV s třídou "sidebox", tedy
. Tentokrát jsme již museli použít třídu místu id, protože rámečků bude na stránce samozřejmě víc. Styly jsou definovány takto: div.sidebox { width: auto; font-size : 85%; background: #c9d7f2 none; border: 1px solid #999999; margin-left: 10px; margin-right: 10px; margin-bottom: 6px; padding-left: 4px; padding-right: 4px; padding-top: 4px; padding-bottom: 4px; } Tentokrát opravdu nic zajímavého. Snad jen šířka nastavená jako "auto". Je to z toho důvodu, že rámečky jsou vloženy do rodičovského prvku #sidebar, který má pevnou šířku 170px. Možná se zeptáte, proč tedy nenastavit šířku rámečků na 100%. Inu proto, že tím bychom opět narazily na problém s velikostmi boxu, který je popsaný v minulém díle. V IE5 by se rámečky se šířkou 100% vždy do vnějšího DIVu vešly, ale v Opeře a NN6 (které přesněji dodržují normu CSS) by okraje vnějšího boxu přelezly o hodnoty padding-left a padding-right. V příštím čísle se pustíme do konečné úpravy písma a barev. Zároveň budu rád, když mne upozorníte na různé odchylky v zobrazení zatím hotové stránky v různých prohlížečích. Osobně jsem stránku testoval pouze v NN 4.7, IE 4, IE 5.0 a v Opeře 5.11 (vše pod W98). ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 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 Tak v předchozích dílech jsme si probrali již velký kus základů PHP a v dnešním díle doděláme příkazy na větvení programu a zopakujeme si již všechny probrané příkazy a také nějaké odkazy na již vytvořené PHP skripty. Příkaz switch Používá se, když na základě hodnoty jednoho výrazu potřebujeme provést určitou část skriptu. A pracuje to takhle. Nejdříve se vyhodnotí výraz za switch a poté jsou postupně procházeny hodnoty za příkazem case, které souhlasí s hodnotou výrazu. Toto probíhá dokud skript nenarazí na break nebo konec příkazu switch. Asi byste to nepochopili bez malé ukázky: Switch ($pismeno) { case "A": case "a": echo "a = A :-)"; case "B": case "b": echo "b = B :-)"; break; default: echo "Tak to neznam :-("; } Asi jste poznali, k čemu se používá příkaz default. Ano, myslíte si to správně. Pokud nic nevyhovuje, provede se vše za příkazem default. Tak a je to. Nyní již známe příkazy na větvení skriptů. Ještě nám zbývá probrat cykly a usnadnění práce s PHP - to jsou příkazy require a include. A pro ty nedočkavé tedy: include a require se používá pokud chceme mít např. na všech stránkách stejné záhlaví a pokud provedeme změnu, tak stačí upravit pouze soubor, kde máte uložené dané záhlaví a nemusíte ho upravovat na každé stránce zvlášť. A ještě příkad použítí: include ("zahlavi.php") nebo require ("zahlavi.php"). Podrobněji si to probereme v dalším čísle. Existují totiž pravidla, kdy smíte a nesmíte použít buď to anebo tohle. Tak a teď to opakování: Phpinfo() - zobrazí informace o PHP Echo - vypíše cokoliv na obrazovku !!! $Promenna není to samé co $pRomenna !!! Pole $pole[0] = "ahoj"; $pole[1] = "nazdar"; $pole[2] = "cau"; $pole[3] = "zdary"; vypsání kusu pole: echo $pole[2]; nebo $pole = array ("ahoj", "nazdar", "cau", "zdary"); If - provede se určitý příkaz, když je splněná daná podmínka b" ; endif; ?> Odkazy na hotové skripty: Asi nejlépe se naučíte PHP, pokud si čas od času prostudujete již hotové skripty. Nechci Vás tu ale navádět, aby jste si stáhli určitý skript, lehce ho upravili a dali ho na vaše stránky. PHP se nikdy nenaučíte, když nepochopíte, jak pracuje. Proč se provádí tohle a ne tamto. Proč je tu if když by to šlo i se switch atd. A ty odkazy jsou: http://www.hotscripts.com a http://code.box.sk. Obsahují tisíce skriptů nejen v PHP, ale i JavaScriptů, DHTML, ale to je zase pro jiný seriál. Při jakékoliv nejasnosti pište na mailto: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 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ POUŽITELNOST STRÁNEK A BARVY Barvy do značné míry určují první dojem i celkové vyznění stránek, ale jejich úloha není jen estetická. Vhodná volba barev totiž přímo ovlivňuje i použitelnost stránek. Zde je pár zásad, které stojí za to dodržovat, pokud chcete, aby se návštěvníci cítili na vašem webu dobře. -- Zdůrazněte barvami strukturu stránek. Časté je odlišné barevné ladění záhlaví, navigačního pruhu a vlastního obsahu stránky. Má-li váš web více autonomních sekcí, můžete každou z nich pojednat mírně odlišně, avšak tak, aby v uživateli zůstal pocit jednotnosti. -- S čím menším počtem barev vystačíte, tím lépe. Je-li na stránce použito víc než přibližně 6 barev, stává se nepřehlednou. -- Používejte barvy tam, kde jsou opravdu potřeba pro oddělení částí stránek s různým významem, ke zdůraznění, atd. Pokud bude na vaší stránce rovnoměrně použito mnoho barev, nikdo na ní nenajde to podstatné. -- Odkazy uvedené v běžném textu by měly být zřetelně barevně odlišeny. Zásadně nestačí odlišení podtržením, nebo velikostí písma. -- Zásadně používejte pro všechny odkazy v běžném textu na celém vašem webu jedinou barvu písma (resp. kombinaci pro nenavštívené/nenavštívené). Naopak, barvy zvolené pro písmo odkazů zásadně nepoužívejte na běžný text. -- Mezi písmem a pozadím by měl být alespoň 90% rozdíl světlosti. Nepoužívejte modrou či červenou na černé, nebo žlutou na bílé. Souvislé bloky textu musí být více kontrastní, krátké texty (položky menu, nadpisy, atd.) mohou být méně kontrastní, avšak v tom případě je vhodné tučné písmo. -- Čistě červený nebo čistě modrý text se na sítnici špatně zaostřuje a působí rozmazaným dojmem. Ještě horší je čistě červené písmo na modrém pozadí, nebo naopak. -- Tam kde je to důležité, nespoléhejte se na pouze barevné odlišení. Typickým příkladem jsou odkazy v textu, které by měly být odlišeny jak barevně, tak podtržením. -- Pro rozměrné plochy pozadí volte raději nižší hodnoty saturace. Velké plochy sytých barev působí často příliš agresivně a unavují oči. Pokud se chcete o barvách dozvědět víc, přečtěte si můj podrobný, dvojdílný článek Magie barev na webu publikovaný nedávno na serveru Interval.cz. Mimo jiné v něm naleznete mnoho velmi užitečných odkazů na hlavní zahraniční zdroje. http://interval.cz/r-article.asp?id=635 (první část) http://interval.cz/r-article.asp?id=653 (druhá část) ČTENÁŘI NÁM PÍŠÍ Dotazů tentokrát přišlo málo a necháme si je tedy na příště. Místo toho pro vás jeden z našich čtenářů připravil minirecenzi užitečného systému Mailform, o kterém jsme se zde již zmínili. Dáváme tedy slovo Miroslavu Vejlupkovi (mailto:mv.www@centrum.cz), který má se službou Mailform osobní zkušenosti. Na adrese http://www.mailform.cz si zcela zdarma můžete zaregistrovat účet, který vám umožní využít skript pro odesílání e-mailových zpráv z formuláře umístěného na vaší stránce. Během několika málo okamžiků obdržíte (po vyplnění povinných registračních údajů a především adresy stránky s formulářem) na svou e-mailovou adresu přístupové ID pro vstup do uživatelské oblasti. Z nabídky menu si kromě jiného můžete nastavit vzhled příchozí zprávy, styl výpisu, přesměrování uživatele na stránku po úspěšném odeslání zprávy atd.. Veškerá navigace v systému MAILFORM je velice přehledná a srozumitelná i pro začínajícího webmastera. Přesto máte-li někdo jakoukoliv nejasnost, rád vám ochotně zodpovím jakýkoliv dotaz. Nevýhody (?): 1) Služba neposkytuje odesílání příloh z formuláře. Na můj osobní dotaz mi poskytovatel služby toto logicky zdůvodnil: "upload souboru by se velmi zatížil server, na němž běží i ostatní aplikace", přičemž při testování serveru jej samotného překvapilo, že "30 KB soubor zatíží procesor 800 MHz na 5 vteřin", což je podle jeho slov, a jak asi sami uznáte, "nepřijatelné". 2) Proti zneužití vašeho účtu je poskytovatelem doporučeno zasílat formulář pouze ze stránky www.mailform.cz. Odesílatel je tak přesměrován na stránku MAILFORMu, kde s konečnou platností potvrdí zadané údaje. Po úspěšném odeslání formuláře jej služba přesměruje na vámi nastavenou stránku. 3) Není možné nastavit stránku zobrazenou v případě neodeslaného formuláře. Přes tyto "nedostatky" zůstává služba MAILFORM velice snadnou a především nejlevnější cestou k odeslání formuláře z webové stránky. Pro laiky v oblasti skriptování je služba nanejvýš uspokojivá. Děkujeme Miroslavovi za hodnotný příspěvek! V PŘÍŠTÍM ČÍSLE -- Redesign Sovy v síti III - písmo a barvy -- Seriál o PHP, VII.část - cykly -- Firemní prezentace nestačí -- 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í (snad ne až v úterý ;-)) 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/