Sova v síti - 1/13 - vydáno 18.6.2001 Pondělí se pomalu mění v úterý a přichází vaše Sova v síti :-) OBSAH -- 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ářů -- V příštím čísle REDESIGN SOVY V SÍTI III - PÍSMO A BARVY V minulých dvou dílech o redesignu stránek Sovy v síti jsme si připravili rozvržení stránky, neboli layout, včetně hlavičky a postranních rámečků. Nyní je načase naplnit připravenou stránku obsahem a to se neobejde bez definice písma a vhodných barev. Vzorovou stránku pro dnešní díl naleznete na adrese http://www.sovavsiti.cz/newlayout/layout111.html (pozor, vnitřní odkazy nejsou ještě funkční) a definici stylů na http://www.sovavsiti.cz/newlayout/style111.css. Začneme tím, že si obsah stránky rozdělíme na funkční celky a z nich odvodíme potřebné třídy CSS. Hlavními funkčními skupinami jsou oblast základního obsahu a boxy na pravém okraji. Pro každou z těchto skupin pak potřebujeme definovat vzhled těchto strukturálních prvků: -- běžný text -- nadpisy -- odkazy -- seznamy Podívejme se nyní, jak jsme to provedli. Font je definován v celém souboru CSS pouze jednou pro celé body, a to takto: font: x-small/1.5 Verdana CE, Verdana, Helvetica CE, Arial CE, Arial, Helvetica, sans-serif; Verze fontů CE (Central European) jsou vyjmenovány na prvním místě, aby bylo zaručeno správné zobrazení češtiny i na jiných operačních systémech než Windows. Velikost x-small v kombinaci s řádkováním 1,5 je pro bezpatkové písmo obecně nejčitelnější. Zároveň tato definice umožní uživatelům velikost písma ve svém prohlížeči měnit, což může být např. pro slabozraké či starší čtenáře velmi důležité. V zájmu jednotnosti se na celé stránce jiný druh písma nepoužívá. Používají se však jiné velikosti. Nadpisy úrovně H2 mají písmo o 10% větší než běžný text. Toho je dosaženo touto definicí: h2 { font-size: 110%; font-weight: bold; } Povšimněte si, že pravidlo font-size: 110% určuje písmo o 10% větší, než je písmo rodičovského prvku. Na stránce tedy můžeme mít různé nadpisy úrovně H2 různě veliké a opravdu tomu tak je. Pro prvek sidebar (pruh na pravém okraji obsahující postranní rámečky) totiž máme definováno pravidlo font-size : 85% To říká, že veškeré písmo uvnitř tohoto prvku (i uvnitř prvků v něm obsažených) bude o 15% menší, než písmo body, ve kterém je sidebar umístěn. Jakýkoli nadpis úrovně H2 v prvku sidebar bude tedy o 10% větší než toto o 15% menší písmo. Stejné pravidlo jsme definovali i pro zápatí stránky (prvek footer). Již minule jsme určily velikost textů v záhlaví, pro změnu v pixelech, neboť jsou zde důležité relace ke grafickému logu. Ukažme si ještě jeden příklad práce s písmem v čistém HTML. V jednom z rámečků na pravém okraji chceme zobrazit vybrané citáty z dopisů čtenářů. Protože se jedná o citáty, je vhodné je uzavřít do odpovídajícího významového (strukturálního) prvku, kterým je v tomto případě BLOCKQUOTE. Tento tag však většina prohlížečů vykresluje zleva i zprava odsazený a to se nám v tomto případě nehodí. Proto jsme mu definovali tento styl: div.sidebox blockquote { margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0.6em; } Všimněte si, že se týká jen tagu BLOCKQUOTE uvnitř prvku DIV třídy sidebox, tedy v rámečku na pravém okraji. Všude jinde by se obsah BLOCKQUOTE vykreslil implicitním způsobem. Protože pod každým citátem chceme mít ještě jméno autora, zavedli jsme si třídu source, kterou aplikujeme na příslušný odstavec v rámci BLOCKQUOTE a jejíž styl je definován takto: div.sidebox blockquote p.source { font-size: 90%; font-style: italic; text-align: right; } Tím jsem dosáhli toho, že jméno autora je pod každým citátem zarovnané vpravo a vykresleno kursivou. Přejděme nyní k barvám. Vzhledem k tomu, že nejsem grafik, nelze v tomto směru ode mne očekávat zázraky ;-) V podstatě je zachováno barevné ladění původní Sovy a barvy jsou použity maximálně funkčně. To znamená, že: -- Všechny odkazy mají stejnou barvu, ať se nacházejí kdekoli. -- Hlavní text je na bílém podkladu, naopak postranní rámečky, které mají být zdůrazněny a částečně plní i navigační funkce mají tmavší barvu pozadí. -- Barevně zdůrazněny jsou i nadpisy. Kromě černé a bílé jsou použity všeho všudy 4 barvy, tj. dokonce o jednu méně, než v původní Sově. Jedinou výjimkou z funkčního použití barev je "ozdobný" gradient na pozadí celého levého okraje stránky. Kvůli němu jsme dokonce celou stránku od minule zarámovali do jednoho nového prvku DIV s id=page. Osobně s ním moc spokojen nejsem, neboť poněkud snižuje čitelnost hlavního textu. Pokud si však zkusíte zobrazit stránku bez tohoto pozadí, zjistíte, že široký bílý okraj vlevo působí velmi prázdně a v důsledku ještě rušivěji. Možná se zeptáte, proč tam tedy ten široký prázdný okraj je. Inu proto, aby hlavní text neměl příliš dlouhé řádky. Optimální délka řádku je z hlediska čitelnosti něco mezi 30 a 70 znaky (viz knižní či novinová sazba). Kdyby byl okraj užší, byly by řádky hlavního textu při nejčastější šířce okna příliš dlouhé. Na původní home page Sovy to bylo řešeno rozdělením hlavního obsahu na dva sloupce, ovšem tohoto řešení jsme se nyní v zájmu jednoduchosti kódy vzdali a navíc by bylo neschůdné pro delší souvislý text článků. Pokud se mezi vámi najde talentovaný grafik, který poradí, jak tento problém řešit lépe, budu velmi rád. To je pro dnešek s redesignem vše. Těším se na vaše náměty, připomínky i kritiku a příště náš malý seriál uzavřeme kapitolou o obsahu, struktuře stránek a navigaci. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 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, VII.ČÁST - CYKLY Martin Jelínek Dnes si dobereme základní příkazy pro tvorbu skriptů v PHP. Co to vlastně jsou cykly? Asi již z názvu vyplývá, že se jedná o něco, co se bude opakovat tak dlouho, dokud to potřebujeme. Jako příkazy používáme: for a while. Ty mají stejnou syntaxi jako jazyk C. takže kdo umí "cečko" je ve výhodě. Začneme rovnou od toho nejsložitějšího a tím je příkaz for. Je ale také nejvýkonnější. Syntaxe je: for (výraz x; výraz y; výraz z) příkaz; Výraz x se provede na začátku skriptu. Potom proběhne výraz y. Když se vrátí hodnota "pravda" (TRUE), tak se provede samotný skript. Skript se provádí tak dlouho, dokud je výraz y TRUE. For používáme, kdy již předem zadáme počet opakování. Výraz x...řídící proměnná Výraz y...podmínka Výraz z...aktualizace proměnné Takže příklad: Pokud chceme vypsat čísla od 0 do 100 napíšeme si tento kratičký skript. Proměnná je 101, protože pokud by jsme zadali for ($a=0;$a=100;$a++), tak se dostaneme do nekonečné smyčky. Můžete si to vyzkoušet. Pozn. Procesor aspoň bude mít, co počítat :-) While: Je nejjednodušším příkazem skriptu. Příkaz se provádí dokud platí určitá podmínka. Syntaxe je: while (výraz) příkaz; Jak jednoduché, že? Příkazy pro načítání stránek Při tvorbě stránek pomocí skriptů se určitě setkáme s potřebou načítání daných skriptů nebo stránek. Ty mohou obsahovat přednastavené funkce, hlavičky atd. Existují celkem 2 příkazy a to include a require. Require: Načítaný skript se vloží v místě použití příkazu. Poté se provede vše z vloženého souboru a poté skript pokračuje vlastním tělem. Require (soubor); require "soubor.php"; Include: Můžeme ho použít i několikrát za sebou a to např. v cyklech. Tedy: For ($a=0;$a<101;$a++) Include "hmm.php"; Tak a na závěr jedno upozornění!!! Jako koncovku vkládaných souborů se obvykle používá .inc, ale ta není prováděna interpretem PHP. Takže v praxi to znamená, jestliže někdo zná přesnou adresu souboru, tak se mu zobrazí kód!! A to si asi žádný programátor nepřeje! Tak dnes jsme dobrali základní příkazy v PHP a příště již funkce, jejich definice a pomalu se vrhneme na databáze (zase). Při jakékoliv nejasnosti pište na mailto:webmaster@oozzik.com. (c) 2001 Martin Jelínek - http://oozzik.com - články o PHP, HTML Oprava k minulému dílu: V příkazu switch vypadl nedopatřením před case "B" řádek break; Omlouváme se za chybu a děkujeme čtenáři Pavlovi Pohořelému, který nás na ní upozornil. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Líbí se vám Sova v síti? Doporučte ji vašim přátelům! http://www.sovavsiti.cz/recommend.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FIREMNÍ PREZENTACE NESTAČÍ Shodou okolností jsem minulý týden dělal odborný posudek na 3 weby poměrně velikých a známých českých (byť zřejmě se zahraniční účastí) firem. Jejich celková kvalita přecházela od naprosté nepoužitelnosti (dosažené velmi nákladným způsobem) až po velmi hezké, graficky čistě a profesionálně provedené stránky. Přesto měly všechny tři jedno společné: jejich autoři zcela ignorovali interaktivní povahu webového média a obchodní zájmy majitele. Ty nejhorší stránky z oné trojice pravděpodobně nejenom, že nezískaly své firmě řádného nového zákazníka, ale svým provedením jistě mnoho potenciálních naprosto odradily. Nicméně jsem přesvědčen, že ani ty nejlepší na tom s úspěšností nejsou o mnoho lépe. Nemusím (ani nemohu) jmenovat, ale stejný obrázek můžete vidět na českém webu denně. Podíváte-li se na typickou českou firemní prezentaci a odmyslíte-li se předem daný fakt, že se jedná o firemní prezentaci, nabudete dojmu, že jste ocitli u někoho, pro koho je předmět stránek jenom koníčkem. Dlouze vám bude popisovat historii oné firmy vyzdobenou sto let starými fotografiemi zakladatelů. Další obrazovou galerii věnuje historickému i současnému sídlu vyfocenému z mnoha úhlů jak zvenčí, tak zevnitř. Budete-li trpěliví, dostanete se i k výrobkům. Zjistíte, že jich je sice nepřeberné množství, ale autor stránek, neboť jest to zřejmě jeho celoživotní záliba, vám je krásně utřídí do košatého stromu uspořádaného podle jejich druhů a technických parametrů. Na celém webu nenaleznete slovo "obchod", "kupte", či "cena". Nenaleznete dokonce ani slova "nabízíme" či "prodáváme". Nenaleznete prostě nic z toho, co byste čekali na stránkách někoho, kdo chce něco prodat. Inu, naše firmy evidentně na webu prodávat nechtějí. Chtějí se zřejmě jen "prezentovat". A pak se ovšem diví, že neprodávají, že nezískávají nové zákazníky a že ten web je vůbec k ničemu. Máte-li na starosti také takovou "firemní prezentaci", zkuste se někdy podívat za oceán (myslím ten Atlantický, samozřejmě). Zjistíte, že právě ta slova, která našim firemním webům zcela chybějí, jsou na webech amerických těmi nejfrekventovanějšími. Zjistíte, že home page jedné z nejgigantičtějších a nejvšestrannějších firem na světě se vejde na jedinou obrazovku a její 2/3 zabírá jediný obrázek notebooku s výrazně vyvedenou cenou a odkazem do elektronického obchodu. Hovořím o firmě IBM. Notebook zítra vystřídá server, pozítří krabice nějakého softwaru. Kompletní sortiment výrobků byste hledali dost obtížně (i když tam je). Historii firmy nenaleznete vůbec (od toho jsou veřejné knihovny). Firma IBM, stejně jako desetitisíce dalších amerických firem, se totiž na webu *neprezentuje*. Ona zde *prodává*. A co vy, nechcete to zkusit také? ODPOVÍDÁME NA DOTAZY ČTENÁŘŮ Dotaz: Chtěl bych se stát relativně odborníkem na FLASH. Docela se mi to daří, ale nevím, jestli mají například web sites FLASHe budoucnost???? Co soudíte vy? Odpověď: Předpovídat, zda má, či nemá nějaké software budoucnost, je velmi ošidné. Před necelými deseti lety by nikoho nenapadlo, že lze existovat bez dBase a Lotus 1-2-3. Dnes tyto produkty neexistují a kdo se je pracně učil, má smůlu. Zajímavější otázka by ovšem byla, zda a jak používat správně Flash na stránkách. Tomu se ale bude podrobněji věnovat v příštím čísle. V PŘÍŠTÍM ČÍSLE -- Redesign Sovy v síti IV - struktura a navigace -- Seriál o PHP, VIII.část - funkce -- Jak správně používat animace a multimédia -- 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/