Sedm základních pravidel webu

Vytváříte svoje vlastní webové stránky? Prezentujete na Internetu vlastní výtvory, nebo se na to teprve chystáte? Zde je několik obecných rad, které by vám měly pomoci tvořit stránky tak, aby byly co nejpřitažlivější a co nejnavštěvovanější.
Vytváříte svoje vlastní webové stránky? Prezentujete na Internetu vlastní výtvory, nebo se na to teprve chystáte? Zde je několik obecných rad, které by vám měly pomoci tvořit stránky tak, aby byly co nejpřitažlivější a co nejnavštěvovanější. Několik následujících bodů by se dalo také považovat za odpověďi na nejčastější a stále se opakující dotazy, které posílají čtenáři našeho časopisu do rubriky Webový servis.

To je velmi důležité. Měli byste mít jasno v tom, jaké informace bude vaše prezentace obsahovat. Jaké obrázky použijete. Nebojte se sednout si a na papír namalovat strukturu připravovaného webu, kde bude jasně vyznačeno, která stránka je titulní, a které patří těsně pod ni. Nakreslete si vše jako strom s jednotlivými větvemi. Musíte vědět, jaké odkazy budou na vaší stránce, jak se uživatel bude po stránkách pohybovat. Zlatým pravidlem je, že uživatel musí mít minimálně možnost se z jakékoliv stránky webu vrátit na stránku titulní. Ta by měla být jakýmsi rozcestníkem. Odsud by měly vycházet všechny odkazy na další stránky. Vyvarujte se zbytečné úvodní stránky, kde uživatel nenajde nic jiného, než logo vaší společnosti. Je to sice pěkné, ale zcela zbytečné. Většina lidí se nepřišla dívat podívat, jak kreativní byl váš grafik, ale hledá informace. Titulní strana webu by mohla obsahovat nejenom třeba obrázek sídla společnosti, ale rovnou musí říkat, co společnost dělá, jaké připravuje novinky atd. Stejně tak se vyvarujte zbytečných stránek, které nemají žádnou informační hodnotu. Většině lidí je zcela jedno, jak vypadá počítač ve vaší kanceláři. Naopak je jistě bude zajímat telefon na vaši sekretářku.

Nemusíte být zrovna akademický malíř na to, aby vaše stránky vypadaly dobře. Uvědomte si ale, že v případě Internetu více než stoprocentně platí heslo, že méně je více. Grafika by měla být střídmá a umírněná. Dávno již „neletí“ pestrobarevné stránky s točícími se logy a směsicí všech možných odstínů. Pokud to není vyloženě nutné, nepoužívejte žádné grafické pozadí jako podklad stránky. Důvodů je hned několik. Jednak se vám téměř nikdy nepovede sladit obsah stránky s tímto pozadím. Vždy někde něco přečnívá, nezapadá, je nečitelné. Grafické pozadí poměrně hodně zatěžuje systémové prostředky uživatele, který si vaši stránku prohlíží. Použijte raději jednobarevné pozadí. Velmi elegantní je černá, ovšem bílá písmena se hůře čtou, proto není vhodné prezentovat takto příliš rozsáhlé texty. I když se rozhodnete pro bílé pozadí, musíte vždy nastavit v tagu <BODY> pozadí stránky na bílé (<BODY BGCOLOR=„white“>). Je sice pěkné, že vám i bez tohoto Internet Explorer 4.0 zobrazuje vše správně, ale to záleží jen a jen na jeho implicitním nastavení. Pokud si uživatel nastaví jako implicitní barvu modrou, budou vaše stránky vypadat děsně. (Navíc vyzkoušejte se mrknout na takovou stránku Netscape Navigatorem nebo starší verzí MS Internet Exploreru a uvidíte sami.) Dbejte vždy na to, aby vaše stránky měly jednotný grafický vzhled. Není nic horšího, než když v rámci jednoho webu každá stránka vypadá jinak. Uživatel je pak mírně řečeno zmatený a mnohdy neví, jestli je ještě na tom samém serveru nebo se jediným kliknutím přenesl někam úplně jinam.

Grafika musí být co nejmenší a nejúspornější. Je sice pěkné, že vaše stránka vypadá jako by ji vystřihli z některého časopisu životního stylu, ovšem co je to platné, když se na ni kvůli její obří velikosti dostane třeba jen desetina uživatelů, kteří by se na ni jinak normálně podívali.

Pokud vám chybí cit pro grafiku, používejte ji raději méně než více. Existuje velká řada nástrojů, které vám pomohou s její tvorbou a začleněním do webu od takových těžkotonážních aplikací jako je Adobe Photoshop až po zcela drobné utilitky pro přípravu tlačítek. Velmi pěkné efekty se dají vytvořit v aplikaci MS PhotoDraw 2000. Pokud si budete chvíli hrát, dostanete se k zajímavým výsledkům, ty navíc budou poměrně neokoukané. Pokud vás snad napadne, uložit si některý grafický prvek, který na Internetu najdete, a použít jej ve vlastních stránkách, uvědomte si zároveň, zda náhodou neporušujete autorská práva. Existují webové galerie volně použitelných grafických prvků. Ovšem i jejich používání moc nedoporučuji. Stránek, na kterých najdete točící se e-mail nebo onoho známého běžícího psíka je až příliš.

Nepoužívejte žádné neznámé a málo používané fonty. Písmo, které vám přivezl váš kamarád ze svých toulek po jihozápadní Číně je sice pěkné, ale kromě vás a deseti šikmookých obyvatel malé podhorské vesničky jej s největší pravděpodobností nikdo jiný nemá. Přitom se stránkou se z webu písmo automaticky nestahuje. Počítač, na kterém je stránka otevřená, hledá nejprve nastavené písmo na svém disku. Pokud jej nenajde, nahradí jej písmem standardním (nejčastěji Times New Roman). Vaše snaha s nestandardním fontem tak vyjde zcela vniveč. Používejte písma, jako již výše jmenovaný patkový Times nebo bezpatková písma Arial nebo Helvetica. Čehokoliv jiného byste se měli vyvarovat. Neuvádějte pouze jedno písmo ale seznam písem, pokud uživatel nemá nainstalováno první, ještě je šance, že bude mít druhé atd. Jediný a správný způsob (jak se na něm shodli účastníci konference o webdesignu na serveru grafika.cz), jak používat bezpatkové písmo je následující <FONT FACE=„Arial CE, Helvetica CE, Arial, Helvetica“>. Nezapomeňte také nastavit kódovou stránku, pod kterou byla stránka vytvořena. Slouží k tomu jeden meta-tag, který uvedete do hlavičky dokumentu <meta http-equiv=„Content-Type“ content=„text/html; charset=windows-1250“>. Tento tag říká prohlížeči, že následující stránka byla vytvořena v kódování Windows 1250. Ten se tomu přizpůsobí a zobrazí správně všechny české znaky.

Hned na začátku celou prezentaci přehledně rozčleňte do několika adresářů. Každý větší celek by měl mít svůj vlastní adresář. Stejně tak nemíchejte dohromady dokumenty HTML a obrázky; ty patří do svého vlastního adresáře (standardně se pro něj používá např. označení img). Pokud bude vaše prezentace sestávat z více jazykových verzí, každá z nich by opět měla míst svůj vlastní podadresář. Jedině tak se vyhnete nepřehledné struktuře a nebudete mít problémy při úpravě celého webu, přidání nových dokumentů, či změnn obsahu některých dokumentů stávajících. Dávejte dobrý pozor na malá a velká písmena v názvech souborů a adresářů. Pokud server, který obsluhuje vaše stránky, běží pod operačním systémem Windows NT (98/95), je to vcelku jedno. Ovšem problémy nastanou v případě použití operačního systému Linux, Unix apod. Ten bere v úvahu malá i velká písmena a soubory tlacitko.gif a tlacitko.GIF pro něj rozhodně nejsou totožné! Potom se můžete dostat do situace, kdy na vašem lokálním disku vše perfektně funguje, ovšem na serveru nejsou dostupné některé obrázky nebo celé stránky.

Než začnete pracovat na své vlastní stránce, vyberte si vhodné nástroje, které k tomu použijete. Základem je samozřejmě editor webových stránek. Začátečníkům a těm, kteří se příliš v HTML neorientují, doporučuji sáhnout po vizuálním editoru, kde se vše připravuje podobně jako dokument ve Wordu. Nemusíte chodit ani moc daleko – velice silný nástroj najdete hned v kompletní instalaci MS Internet Exploreru 4.0. Jmenuje se FrontPage Express a je jakýmsi „menším bratříčkem“ Microsoft FrontPage 98, nástroje určeného pro vytváření stránek a udržování celých rozsáhlých webů. Můžete sáhnout ovšem i po aplikacích jiných firem, než je Microsoft, Adobe nabízí svůj Adobe ImageStyler, na trhu je i poměrně populární Macromedia Dreamweaver. Zkušenější by měli používat editory, které dovolují pracovat na úrovni zdrojového kódu. Jenom tak lze totiž zajistit stoprocentní kontrolu nad vytvořeným kódem stránky a jejím vzhledem. Poměrně často se používají kombinace, ve kterých je základ stránky tvořen v některém vizuálním editoru a zbytek již dotvořen ručně. Mezi nejrozšířenější editory patří HomeSite 4.0 – skutečný král ve své třídě, sáhnout můžete také kupříkladu po kvalitním editoru HotDog, nebo českém Easypadu. Vyhněte se editorům typu Notepad (poznámkový blok), ruční psaní všech tagů je velmi neefektivní a je také často zdrojem mnoha chyb.

Otázka zní, jaký nástroj použít na práci s grafiku? Neměla by vám chybět aplikace, prostřednictvím které dokážete manipulovat s bitmapovou grafikou. Sáhnout můžete po Adobe Photoshopu. Ten je ovšem příliš drahý pro ty, kteří se nehodlají věnovat práci s grafikou profesionálně. Poměrně slušné editory lze najít i mezi sharewarem; jedním z nejznámějších je asi Paint Shop Pro, dnes ve verzi 5.01. Optimalizovat vaše obrázky vám pomůže Ulead Smart Saver a kvalitní animovaný gif jednoduše vytvoříte s aplikací Ulead Gif Animator.

Pro přenos souborů na web musíte mít aplikaci, která podporuje protokol FTP. Existuje velká řada FTP-klientů, kteří vypadají téměř totožně jako kterýkoliv souborový manažer a stejně tak se s nimi i pracuje. Ovšem s tím rozdílem, že v jednom okně je zobrazen váš disk a v okně druhém disk vzdáleného počítače. Jak jsem napsal, klientů je nepřeberné množství, namátkou bych jmenoval WS FTP nebo CuteFTP. Plně dostačující podpora pro přenos souborů je integrována i ve Windows Commanderu 3.5.

Především byste si měli uvědomit, že je téměř nemožné udělat stránku tak, aby byla stejně zobrazena ve všech prohlížečích, které existuji – tedy pokud použijete více fines, než pouhý text s odstavci. Připravujte stránky pro ty nejrozšířenější prohlížeče. Dnes jsou to Internet Explorer 3.0, 4.0 a 5.0. Z konkurenčního tábora pak Nescape Navigator 3.0 a Netscape Navigator 4.x. V těchto prohlížečích by vaše stránky měly vždy vypadat korektně a správně. Testování stránek v různých verzích Netscape Navigatoru není nijak složité. Navigator může být nainstalován na počítači hned v několika verzích. S Internet Explorerem je to poněkud složitější. Nemůžete mít zaráz instalováno více verzí. Otázkou zůstává, jak tedy takové stránky vyladit. Možností je několik. Můžete se spolehnout na své zkušenosti a připravit stránku pro Internet Explorer 4.0 (5.0) a věřit, že v nižší verzi bude zobrazena správně. Další možností je použít druhý počítač s instalovanou nižší verzí prohlížeče. Tady ale vznikají problémy s přenosem souborů z jednoho počítače na druhý, nemluvě ani o tom, že každý nemá k dispozici dva počítače. Ani poslední řešení není dvakrát ideální, ačkoliv eliminuje nutnost dvou počítačů: Můžete váš disk rozdělit na několik částí a na každou část nainstalovat operační systém, vždy však s jinou verzí prohlížeče.

Jestliže si nejste něčím jisti, obraťte se nejprve na nápovědu. Internet je plný stránek, kde najdete pomoc jak s vytvářením samotných stránek, tak s grafikou či případně programováním skriptů. Stačí, když některý vyhledávací stroj požádáte o nalezení odkazů, které obsahují slovo webdesign. Používejte nápovědu k HTML. Jednu velice dobře zpracovanou najdete integrovanou třeba v editoru stránek HomeSite 4.0. Je v ní skutečně téměř vše. Nápověda se jmenuje The HTML Reference Library a její domovskou stránkou je http://hot.virtual-pc.com/htmlib. Odpovědi na mnoho otázek najdete také v konferencích o HTML a webdesignu. Jednou z nejznámějších (a českých) je konference na serveru Grafika. Informace o přihlášení do ní najdete na adrese http://www.grafika.cz. Setkáte se zde se spoustou známých jmen, která stojí za mnohdy velmi známými a špičkovými weby. Zkusíte „nadhodit“ svůj problém týkající se HTML a je velmi pravděpodobné, že se najde někdo, kdo ochotně vám poradí. V neposlední řadě můžete psát přímo na moji adresu (sedlar@cpress.cz) nebo na adresu webového servisu, který vychází v každém čísle Computeru (servis@cpress.cz). Pokud budeme znát odpověď na váš dotaz, rádi poradíme.

Zdroj: Computer

Diskuze (3) Další článek: Kdy notebook a kdy kapesní počítač?

Témata článku: Software, Programování, Internet Explorer, Obří velikost, Sed, Lokální rozcestník, HTML Editor, Navigator, FrontPage Express, Základ, Animovaný GIF, Fines, Zak, Vytvořený kód, Editor, Následující stránka, Nejúspornější řešení, Ruční psaní


Určitě si přečtěte

Jak se žije s telefonem bez Googlu: Čerstvé zkušenosti s telefony Honor a Huawei

Jak se žije s telefonem bez Googlu: Čerstvé zkušenosti s telefony Honor a Huawei

** Honor u nás přichází s prvním telefonem bez Google Mobile Services ** Současný stav je lepší než na začátku, ideální ale není ** Zkusili jsme i hack s ručním přidáním služeb Googlu

Tomáš Holčík | 162

Epic chce rozbít monopol Play Storu a App Storu. Nastražil trik s hrou Fortnite a žaluje Google i Apple

Epic chce rozbít monopol Play Storu a App Storu. Nastražil trik s hrou Fortnite a žaluje Google i Apple

** Apple a Google odstranili z obchodů s aplikacemi hru Fortnite ** Její vývojáři nejprve přichystali parodické video ** V žalobách viní obě firmy z monopolního chování

Karel Kilián | 134

Je lepší hrát na PC, či na konzolích? Nebo jsou i jiné možnosti?

Je lepší hrát na PC, či na konzolích? Nebo jsou i jiné možnosti?

** Jaké jsou výhody a nevýhody hraní na počítači? ** Co mají společného a v čem se liší Xbox One, PS4 a Switch? ** Na čem hrát, když nemáte výkonné PC ani konzoli?

Lukáš Václavík | 125

Otestovali jsme 8 mobilů do 8 000 Kč: rozdíly ve výkonu jsou ohromné

Otestovali jsme 8 mobilů do 8 000 Kč: rozdíly ve výkonu jsou ohromné

** Mobil za 8 000 Kč uspokojí většinu uživatelů ** Klasické foťáky stačí, širokáče ale zklamaly ** Zásadní jsou rozdíly ve výkonu

Časopis Computer | 4


Aktuální číslo časopisu Computer

Megatest mobilů do 8 000 Kč

Test bezdrátových headsetů

Linux i pro začátečníky

Jak surfovat anonymně