- internet4U -

Jak na opravdu pěkné webové stránky

Problematika dostupnosti (ale i kvality nebo grafické úrovně) vlastních webových stránek spadá už někdy spíše do oblasti umění nežli jen techniky. I v ní jde sice nezbytně opět o počítače, Internet a samozřejmě i o World Wide Web, to vše však tentokrát také v rovině, která je zatím ještě často opomíjena, a to všemi subjekty, které Internet používají, ať už na straně tvůrců nebo čtenářů (stále častěji už se vnucuje lépe i termín diváků nebo konzumentů): v rovině estetické. Proto jsme se obrátili na autora, jenž už takových stránek připravil, jak sám pro sebe tak i pro jiné, víc než dost a na Internetu již dnes pro ně má vlastní "stavební" firmu. Nekamenujte jej, bude-li se některým z vás zdát, že mluví o věcech, jež jsou už, alespoň pro vás osobně, samozřejmostí. Na naše přání se v krátkém seriálu pokusí představit nejdůležitější aspekty této problematiky způsobem přístupným i těm ostatním.


Jak na opravdu pěkné webové stránky

Jakub Ditrich

Má-li se někde začít s poctivou prací hezky od podlahy, na Internetu to znamená spíš od pozadí. Když jsem kdysi vymýšlel svou první internetovou WWW stránku, byl jsem unesen nad tím, že mohu mít v pozadí třeba svůj vlastní portrét, mořské vlny a čárečky, a bůhví co ještě. Až postupem času jsem si uvědomil, že příliš komplikované pozadí, není-li vkusně zakomponováno do celkového designu stránky, je spíše rušivým elementem snižujícím čitelnost písma a v podstatě znemožňujícím jinak velmi efektní stíny ikon, obrázků a písma. Z toho nemusí nutně vyplývat, že podklad stránky musí být "jenom bílý". Velmi působivá je například jemná textura, ať už na bílé nebo jiné vhodně zvolené barvě. Je však samozřejmě dobré mít na paměti, že i podstatou pozadí je jen další obrázek, který se automaticky skládá do čtverců nebo obdélníků (dle jeho povahy), a to jak z hlediska množství objemu dat celkové stránky, tak proto, že je-li základní motiv (pattern) například ve své levé čísti světlý a v pravé tmavší, vytvoří pak na stránce pozadí přinejmenším strakaté, jež může zaujmout natolik, že ve svém důsledku bude spíš rušit. Na druhé straně lze naopak využít pozadí jako funkčního elementu. Zajímavá je např. stránka soutěže Pepsi Max , poutavá právě díky svému pozadí. Úvodní stránka je vlastně zavřený notes, kde se poklepem na patentku nahraje další stránka již s pozadím otevřeného notesu, ve kterém pak můžete "listovat".

Pozadí také může aktivně využít například firma prodávající koberce nebo tapety. Návštěvníci jejich stránek tak mají možnost se po zvoleném materiálu (ovšem virtuálně) hned "projít".

Dalším a vlastně nejdůležitějším atributem WWW stránky je písmo. Zde je bohužel grafik omezen na jednu sadu fontů, kterou má uživatel nakonfigurovanou na svém prohlížeči. Ti, kteří již měli příležitost se s WWW seznámit blíže, ale vědí, že i zde si je možné pomoci. Písmo má šest alternativních velikostí (header 1 až header 6), může být tučné, kurzivní, podtržené, roztažené... Možnosti jsou takřka totožné s možnostmi textového editoru při jednom zapnutém typu písma. To se týká i odrážek, číslování, odsazení textu atd. Je zde jen jedna výjimka, a to styl Typewriter (TT), kde se text zobrazí ve stylu písma psacího stroje. Pokud nevystačíte s možnostmi programovacího jazyka WWW stránek zvaného HTML, máte možnost vytvořit si písmo vlastní, a jím pak napsanou pasáž do stránky vložit jako grafický soubor, tedy zhruba jako obrázek. Nevýhody (v porovnání s pouhým textem především mnohonásobně vyšší objem dat) jsou nasnadě, a proto lze tuto variantu doporučit pouze pro texty velké důležitosti, jako jsou např. názvy.

Slovo nebo věta, jež jsou hypertextově spojeny s jinou stránkou (tzv. odkaz neboli link), se zobrazují v jiné barvě (standardně modře) a jsou vždy podtrženy. Pokud byl tento link již navštíven, barva se změní, opět standardně, na fialovo. Barva písma, odkazů a navštívených odkazů se dá pochopitelně měnit dle libosti a potřeby. Někdy jsou ale tvůrci stránek natolik "originální", že volí tyto barvy tak, že nejsou takřka čitelné (oblíbeným příkladem je citrónově žlutá na bílém podkladu). Proto je často lepší nastavit si předem na svém WWW prohlížeči barvy, ve kterých se má písmo zobrazovat.

Je samozřejmě nutno se zde aspoň okrajově zmínit i o odlišnostech v národních kódováních. Stránka může totiž být nejen česká, v latince a se správnou diakritikou, ale i v kanji - japonsky, nebo v azbuce - rusky a v mnoha jiných jazycích. Jde jen o to nahrát si a nainstalovat ten správný font do svého prohlížeče. Musím říci, že skutečnou virtuální procházku po Japonsku lze absolvovat až po nainstalování japonských znaků (třebaže asi neumíte napsat japonsky ani "Aligató", stejně jako já).

Co se češtiny týče, za dobu rozvoje počítačů u nás vzniklo několik odlišných systémů kódování. Na Internetu se v zásadě používají Latin 2 pro prostředí Unix, kódování pro Windows, pro Apple Macintosh a znaky ASCII, tedy bez diakritiky.

Poslední uvedené řešení se mi dodnes jeví jako nejschůdnější, protože je jako jediné stejně čitelné na všech platformách a všech počítačích, názory jsou však samozřejmě různé. Není ale opravdu dobré hned úvodní stránku (homepage) psát v některém českém kódování. Ta by měla být ještě v univerzálním ASCII bez diakritiky, a až z ní by měl být odkaz na kódovací mezistránku, kde si uživatel sám vybere na zkušebním textu v podobě veselé, i když nesmyslné věty co možná plné háčků a čárek (např. Žluťoučký kůň úpěl ďábelské ódy), který z typů kódování se i jemu zobrazí spolehlivě a správně.

Prozatím jsme hovořili pouze o stránce vizuální. Obsahová stránka textu záleží na každém, kdo jej na Internetu vystaví. Internet - to je totální svoboda projevu. Nutno ale počítat s tím, že čtenáři vašich stránek mají málo času a sil číst z mihotavé obrazovky dlouhé eseje. Doporučuji si text určený pro WWW stránku předem napsat a vytisknout, a až pak vybrat jen informace zásadního charakteru. Plně zde platí zásady, dodržované takzvanými kreativními zaměstnanci reklamních agentur - především stručnost a vysoká informační hodnota.

Také bych rád upozornil na oblíbenou větičku, objevující se asi na čtvrtině českých stránek - "Stránka je ve výstavbě", doplněnou ikonou inspirovanou dopravní značkou Práce na silnici. V podstatě každá stránka na Internetu je totiž ve výstavbě - doplňují se údaje, zlepšuje se grafika, mění se struktura, atd. Má tedy smysl upozorňovat návštěvníka, že se jedná o sice faktické, prakticky trvalé - "torzo" ? Pro toho, kdo vtipnou značku použil poprvé, určitě ano. U těch ostatních, kteří vtip už jen opakují a rozmělňují, spíše ne.

Na rozdíl od textu, který je, jak již bylo řečeno, daný typem písma prohlížeče, jsou estetickým kamenem úrazu většiny stránek grafika a obrázky. Pro Internet platí dvojnásob heslo, že méně je často více. Méně fotek, obrázků, tlačítek, šipek, lišt, atd., znamená lepší přehlednost stránky a zvýšení rychlosti jejího přenosu po síti. Na obrazovém příkladu představuji dvě různé stránky. Sami jistě pochopíte, o čem mluvím....

I přes veškerou nápaditost tvůrců platí základní pravidla, kterými by se grafika na WWW měla řídit.

Za prvé je to originalita. Zprvu jsem se divil, když jsem nacházel tytéž ikony na několika stránkách současně. Pravda, nahrát si ikonu z cizí stránky a dát ji na tu svoji je sice podstatně rychlejší, než ji vytvořit, ale jistě značně neoriginální. Favoritem v této "putovní" kategorii je americký typ poštovní schránky - tzv. mailboxu. Tato nepěkná ikona pro zaslání e-mailové zprávy z WWW stránky je velmi rozšířena v totožné verzi, a to nejen na soukromých homepage ! ("mail" - označení pro zprávy elektronické pošty, "mailbox" - poštovní schránka).

Druhou zásadou je profesionalita. Ať si kdo chce co chce říká, bez rychlého počítače a dobrého grafického softwaru (např.: Macintosh Power PC a Adobe Photo Shop) se dobrá grafika dělat nedá. Podmínkou je také alespoň stolní skener a velkým pomocníkem tablet. Pokud uvedená zařízení nevlastníte, nebo nejste v práci s nimi dostatečně zběhlí, obraťte se s vašimi grafickými nápady na grafická studia. Vložená investice se vrátí v podobě profesionální grafiky a uznání vašich "virtuálních návštěvníků".

Poslední, třetí zásada, zní - "Čím méně kilobytů stránka má, tím lépe". O přenosové rychlosti dat po Internetu bylo napsáno mnoho a je nepochybné, že se bude stále zvyšovat. Avšak při současném stavu, kdy se drtivá většina uživatelů připojuje na Internet modemy o rychlostech 14,4 - 28,8 KB/s se vyplatí to s objemem dat nepřehánět, aby si každý mohl vychutnat designerské nápady vašich stránek. Je dobré vědět, s jakou kompresí pracují oba grafické formáty podporované WWW prohlížeči, tj. Compuserve GIF a JPEG. Dle toho pak volit, v jakém formátu budou obrázky přenášeny. GIF má podle mých pozorování (nejsem v této oblasti odborník) horší kompresi, ale vrstvy obrázku se nahrávají do prohlížeče postupně, takže po načtení 50 % z celkové velikosti máte už představu, co asi zobrazuje. JPEG se komprimuje třikrát, takže co do objemu dat je výhodnější. Na druhou stranu si musíte počkat až se nahraje celý obrázek, a teprve potom jej v prohlížeči uvidíte.

Pokud právě "nesurfujete" ve Web Louvre (stránky, na nichž se můžete procházet touto slavnou pařížskou galerií) anebo kdekoli jinde, kde záleží především na obrazové informaci, jsou pro vás pravděpodobně primární informace obsažené v textu. Máte tedy možnost na prohlížeči pro běžnou práci (myšleno hledání informace) obrázky dočasně "vypnout" a aktivovat je až po nalezení požadované stránky, nebo jen je-li to bezpodmínečně nutné. (Například jsou-li některé stránky WWW řešeny na čistě grafické bázi a i odkazy jsou umístěny přímo v obrázku formou "klikacích map".) Místo obrázků se vám v takovémto případě zobrazí pouze malá ikona a eventuálně i alternativní text, určený pro prohlížeče bez grafických možností.

Když hovoříme o webových stránkách, rozumíme tím soubor stránek, kde je hlavní stránkou (homepage) ta první a má zpravidla také vůbec nejkratší internetovou adresu (URL). Ostatní tzv. podstránky (subpages) se od ní pomocí hypertextových odkazů dále větví dle výrobcem navržené struktury a pořadí. Celý soubor stránek by měl mít jednotný ráz, a to nejen proto, aby stránky vzájemně esteticky ladily, ale protože některé grafické symboly a lišty (zápatí) se na následujících stránkách opakují. Při nahrání první stránky se grafické soubory v ní obsažené uloží do operační paměti počítače, a ten, jestliže je na nové stránce odkaz na jméno již uloženého souboru, jej znovu nenahrává, ale automaticky jej vyvolá ze své paměti. Doba nahrávání (download time) nové stránky se tak příjemně snižuje.

Co všechno by měla obsahovat hlavní stránka ? Správná hlavní, nebo chcete-li domácí stránka, by měla především zaujmout a podnítit zájemce k dalšímu zkoumání obsahu podstránek. Pokud se jedná o firmu, nesmí tu chybět dobře provedené logo firmy s hlavním popisem okruhů jejích činností. Ten by měl být krátký a výstižný, hlavně kvůli identifikaci firmy v hledacích mechanismech Internetu. Tyto rychlé prohledávací databáze (jmenujme například AltaVista, Infoseek, Webcrawler) provádějí z vámi zadaných klíčových slov fulltextové vyhledávání všech stránek, které obsahují jejich databáze. Pokud se tedy jedná například o cestovní kancelář poskytující zájezdy na Mallorcu, měla by se na první stránce vyskytnout slova jako: cestování, turistika, zájezdy, ubytování, Mallorca, letecky atd. Ve výsledcích vyhledávání těchto slov se potom objeví odkaz (pointer) na její WWW stránku a zvýší se tím i její "návštěvnost" (nebo chcete-li "počet zásahů stránky").

Neméně důležitá je navigace ve stránkách. Z první strany musí být každému jasné další větvení odkazů. Pokud se budeme nadále držet příkladu takové cestovní kanceláře, struktura by vypadala asi takto: Představení naší CK, Zájezdy pro rok 1996, Možnosti ubytování, Doprava, Ceník zájezdů, Reference, Kde nás najdete. V takovéto struktuře si pak každý zájemce o služby této kanceláře postupně najde to, co ho zajímá. Právě tyto vůbec první odkazy by měly být řešeny graficky zajímavě, nejlépe s malým, ale výstižným obrázkem (logem) pro každou oblast nabídky. Ty pak budou provázet návštěvníka i na dalších stránkách a můžete z nich sestavit i navigační lištu.

Lišta by měla sloužit uživatelům k tomu, aby se mohli rychle přenést z jedné oblasti do druhé, aniž by se předtím museli pomocí funkce Zpět WWW prohlížeče vracet na hlavní stránku. Lišta má podobu jak textovou, tak obrazovou. Texty jsou klasickými hypertextovými odkazy, ikony jsou buď řešeny separátně jako aktivní linky, nebo tvoří jeden obrázek a je na nich vytvořena tzv. "klikací mapa" (clickable map). Tuto zajímavou a efektní utilitu lze využít všude tam, kde chceme z různých pozic na jednom obrázku odskakovat na rozdílné stránky. Funguje tak, že uživatel určí s aktivní pomocí polohovacího zařízení (myš, trackball, tablet) jedno místo, kterému prohlížeč přiřadí číselné souřadnice x,y, a tyto pak server vyřeší jako odkaz na určitou stránku. Dobrým příkladem takového interaktivního obrázku je mapa České republiky s vyznačenými městy. Při poklepu na zvolené město - zde Plzeň - se automaticky zobrazí domácí stránka tohoto města. Bohužel i klikací mapa má vliv na množství dat obrazového souboru, protože se v podstatě jedná o další vrstvu obrázku s mapou.

Tolik pro dnešek pokus zobecnit na několika řádcích vzhled a funkci pozadí, textu, grafiky a hlavní stránky na WWW. Sami už ovšem víte (nebo teprve zjistíte), že WWW stránky a komunikace po Internetu se permanentně proměňují a zdokonalují, takže i sebeaktuálnější výčet konkrétních možností je vždy jen zlomkem z toho, co World Wide Web nabídne již zítra.

V pokračování seriálu se tak budeme zabývat i standardy WWW stránek v HTML2 s tabulkami a HTML3 s rozdělením obrazovky na samostatná okna, využitím malých programů jazyku JAVA na WWW stránkách, animovanými GIF soubory, virtuální realitou na Internetu v tzv. VRML i možnostmi přehrávání zvuku a videa přímo v HTML dokumentech.

jakub.ditrich


Slovníček pro ty méně zkušené:

Homepage

První (chcete-li domácí nebo domovská) stránka. Obsahuje základní údaje a odkazy na další stránky.

HTML

Hyper Text Markup Language

Programovací jazyk WWW stránek, srozumitelný pro WWW prohlížeče, prostřednictvím kterého určujete polohu, velikost a funkci jednotlivých součástí stránky.

Hypertext

Přeneseně styl textového dokumentu s interaktivními odkazy na jiná místa téhož nebo jiného dokumentu, anebo na zcela jiné zdroje.

Link (odkaz)

Termín pro část textu, obrázek nebo jeho část, která obsahuje odkaz na jinou WWW stránku nebo službu Internetu.

Subpage

Stránka, která následuje po homepage a je s ní spojena hypertextovým (podstránka) odkazem.

URL

Unified Resource Locator

Adresa WWW stránky. Uvádí se ve formátu http://jméno serveru.doména. národní doména (např.: http://www.globe.cz)

WWW

World Wide Web

Volně přeloženo "světová pavoučí síť". Označení nejrozšířenější ze služeb na Internetu, umožňující přenos textů, obrázků, 3D (třírozměrných) modelů, zvuku, videa, atd..

Termíny JAVA, HTML2 a VRML se vztahují blíže až k dalšímu pokračování, kde budou také vysvětleny.

internet4U