Jste tu poprvé? - Skrýt (musíte být přihlášeni)

1. část - Různé formy webů

27. 5. 2007 v 0:00 1 1. část - Různé formy webů

Ukázky možných podob webů, příklady stránek a ukázka formy webu, který budeme tvořit.

Chcete přejít na jiný díl seriálu? Vyberte si:
1. část – Různé formy webů
2.část – Základy grafiky
3.část – Grafika na plný úvazek
4.část – Finišování grafiky

Tento díl je spíš pro úplné začátečníky, takže vy, co už máte alespoň přibližnou představu o tom, jak vytvořit web, aby se z něj návštěvník nerozsypal na atomy, můžete dnešní díl přeskočit :)

Předtím, než se pustíme do tvorby plnohodnotných stránek, měli bychom se rozmyslet, co by bylo zajímavé vytvářet. Jelikož zde budeme vytvářet fiktivní web, který pro návštěvníky nemá žádné osobní využití ve svém základu, tak můžu říct „zajímavé vytvářet“ místo vhodné :) Projdeme si různé typy rozmístění, ukážeme si, které se k čemu nejčastěji používají a uvedeme příklady. Na závěr vám předvedu, jaký typ web budeme v seriálu tvořit a proč jsem se pro něj rozhodl.

Webů existuje mnoho konstrukcí, které jsou unikátní svého druhu. Ovšem masově používaných je několik typů, které budu postupně uvádět, s náčrtem provedení i příklady normálních běžných stránek, na které narazíte na internetu. Není důležité, jestli nějaké vynechám, protože tady opravdu nejde o to, vyjmenovat všechny obvyklé typy designů. Přestože weby mohou být různě načančané a mohou se vzhledem velmi lišit, pod slupkou grafiky často bývá stejný základ. Když si odmyslít bohaté pozadí s mnoha tahy štětce, můžete poté vidět místa pro obsah, místa pro hlavičku a tak dále. Nejlépe jde toto posoudit s vypnutými obrázky, pokud ovšem přijdete na web, který tvůrce dělal s ohledem na tuto situaci (a my to dělat budeme). Nu, abych jenom tak neplkal, pojďme se podívat na prvního kandidáta.

Různé typy stránek

První rozvržení spočívá v jednoduchém obsahu. Design čítá hlavičku, která by měla být na každém webu, protože je to hlavní prvek, který ukazuje, na kterém webu se právě návštěvník nachází, ideálně navíc informuje o zaměření webu. Dále je zde menu, je jedno jestli vpravo nebo vlevo a obsah. Pata často chybí, ovšem to není pro nás příliš podstatné, pokud ji tam budeme chtít, není problém ji vhodně začlenit.

Forma 1

Tento první příklad se často používá pro blogy pro svojí jednoduchost. Na blogu nepotřebujete komplikované konstrukce, stačí vám jednoduché menu, jakási hlavička, aby návštěvník věděl, kde je a samozřejmě slušný prostor pro obsah. Tedy nic pro nás, jednak je to příliš prosté a navíc s dnešními možnostmi, kde na každém rohu zakopnete o volbu založit si svůj blog, nemá cenu něco takového vytvářet. Nutno dodat, že většinu blogů píšou naprostá prasata, kterým je jedno, že díky jejich krásným obrázkům to náhodní návštěvníci nejspíš nepřečtou. Proč? To je záhada. Možná že jsou všichni tito lidé slepí, šílení, nebo co já vím, faktem je, že na jednoho normálního člověka s kvalitním blogem (mluvíme o použitelnosti a vzhledu, ne o obsahu) spadá asi tak 10 mizerných (můj odhad). Níže máte typický příklad, první je web běžící na službě blog.cz a druhý bloguje.cz – samozřejmě, je mnoho kvalitních a přehledných blogů. Jenže je daleko víc těch, které naprosto přerostly přes hranice vkusu a lidského zraku.

Forma 1 příklad 1
Forma 1 příklad 2

Takže to bychom měli první příklad – je jich více než dost, proto zaměříme svůj zrak dál. Podíváme se na další typický nástin webu, u kterého si jsou tvůrci jisti, kolik prostoru potřebuji, což se projeví hlavně vodorovným menu, u kterého se mohou více vyřádit a lépe a hezčeji ho začlenit do celkového vzhledu. Takto tvoří weby mnoho profesionálních firem, protože většinou na běžnou prezentaci je to to nejlepší, co člověk může udělat. Navigace je přehledná, na jednom místě a bývá vkusně začleněna.

Forma 2

Největší výhoda je u grafického provedení v tom, že zde je rozhodnuto během návrhu, co kde bude. Pokud se to ovšem bude měnit, tvůrce bude trpět, protože tento web není stavěný na nějaké drastické změny, kupříkladu v menu. Může se stát, že by byla potřeba další kolonka a průšvih by byl na světě. Tedy je zde upřednostněn grafický soulad, hlavně s oním několikasložkovým menu, do kterého prostě nenapasujete víc věcí, aniž byste neudělali bordel. Tedy nevýhoda je v horší editovatelnosti, kdy v případě, že je to opravdu nutné, je třeba i překopávat celý vzhled stránek, znám takové případy. Proto nemám podobný styl moc rád, mám raději průžný web, kam mohu kategorie přidávat a měnit podle toho, jak chci.

Forma 2 příklad 1

Pata na webech je spíš estetický pojem, bývá v ní často uveden copyright (přestože ze zákona jsme všichni chráněni proti kopírování automaticky, není třeba to nikde psát už před 5 let v našem právním řádu), jindy třeba kontakt na autora nebo informace o použitých technologiích na webu. Není to podstatná věc, takže jestli ji někde ukazuji a jinde ne, je jedno. Někteří lidé ji nepoužívají, protože jim přijde zbytečná a nepotřebují jí – je to pravda. Ale proč ji nepoužít, jak jako doplňek, tak jako informace o webu. Neuděláte nic špatně ani když ji nevyrobíte, ani když si s ní dáte práci. Kupříkladu výše zobrazený deviant art má v patě takovou menší navigaci, využívá ji tedy rozhodně dost.

Forma 2 příklad 2

Ano, je to velmi hezké. Ovšem tento styl je vhodnější pro jednodušší weby, jinak vznikají různé kompromisy. Kupříkladu deviant art má vhodně zvládnutou navigaci, kde je hlavní obsah vždy navrchu a při vstupu do různých sekcí se ještě po stranách přidávají tentokrát klasické sloupky s položkami, takže stejně je nutné další menu. Obecně nejčastější jsou v tomto stylu firemní prezentace. Ovšem nakonec jsem se rozhodl, že použiji svoje stránky, přestože původně jsem chtěl v seriálu vytvořit nějaký anonymní web. Je to pro mě stažší – jednak proto, že já k tomu webu něco cítím a jednak proto, že ho pořád upravuji a vylepšuji, takže bych rád využil něco, s čím jsem tak dlouho pracoval. Ale nejde o žádné pouhé portfolio, půjde o komplexnější web s dvěma sloupky, který se může hodit prakticky k čemukoliv.

Jak budou vypadat námi tvořené stránky?

Následující náčrt vám přiblíží strukturu webu. Použijeme pevnou velikost webu (o pevné velikosti budu pokračovat níže), protože pokud se máme víc věnovat designu webu, bude lepší mít web natvrdo složený, ono je procentuální zobrazení (web se zvětšuje a zmenšuje podle rozlišení) sice lepší (jak kdy), ale nehodí se pro web, který chcete přesně sestavovat. Takže jak jsem už říkal, použijeme 2 sloupce. Proč? V levém můžou být navigace stránek a v pravé uživatelská nastavení, bannery (díky tomu může být pravý sloupec velmi užitečný) nebo poslední komentáře. Jelikož na mých stránkách funguje registrace a následně úprava uživatelských možností, rozhodl jsem se pro tento druhý sloupec. Navíc to vypadá vzhledově lépe, když je vše pravidelné. Je takovým módním trendem, že hlavička (skutečná) je buď uprostřed nebo u nějakého rohu a pod jí je opakující se pozadí pro celou šířku dokumentu. Stejně tak patička. Proč ne, já si hodně lámal hlavu s tím, jestli to použít, nebo ne a nakonec jsem shledal, že je atraktivnější použít u hlavičky a paty ono prodloužení na celou šířku.

Forma 3

Vertikální menu jsem zvolil hlavně proto, že jednak budu mít na svém webu slušný počet položek, a i kdyby ne, nemám ještě jisto, co tam bude, takže pravděpodobně budu některé přidávat, nebo ubírat. Proto raději vytvořím pohodlnější vzhled, který nebude s menu závislý na omezeném prostoru. Nu a níže můžete vidět, jak to ve finále bude vypadat. Upozorňuji, že zde se dostaneme pouze ke kompletnímu nakódování webu, aby byl použitelný na internetu, ne k php ani jiným systémům, které by na webu zajišťovaly administraci. Tedy výsledné stránky jsou takový hybrid – jednak to může být portfolio, jednak blog a jednak i stránky, věnující se všemu možnému, například Armed Assaultu, webdesignu a jiným věcem.

Forma 3

Pevná velikost, nebo roztahující se stránky?

S rozšiřujícími se velkými monitory a HDTV se rozdíly mezi rozlišeními čím dál víc prohlubují. Někteří lidé se rozhodnou svoje stránky udělat tak, aby se rozšiřovaly podle toho, jaké má návštěvník rozlišení (inteligentní člověk ovšem vytyčí nějaké limity, aby se stránky třeba příliš nezúžily nebo neroztáhly). Na jedné straně je to asi to nejlepší, co můžete udělat v boji s mnoha různými rozlišeními, co návštěvník může mít. Na straně druhé není lehké podobný web udělat tak, aby tím neutrpělo grafické zpracování. Díky roztahujícímu se obsahu (menu asi roztahovat nebudete) může na některých větších rozlišeních web vypadat opravdu divně a hlavně špatně se doplňovat s hlavičkou. Uvažoval jsem o této verzi, ale nakonec, když jsem viděl, jak by to vypadalo, jsem prostě zjistil, že by to sedělo na jiný typ webu. Takže budeme tvořit web s pevnou velikostí.

Dále něco o rozlišeních. Před nějakou dobou průzkumy ukazovaly, že rozlišení 800×600 a menší používá méně než 10% uživatelů. Jelikož to nejsou zas tak nové průzkumy, můžeme čekat, že počet lidí s malými monitory se ještě více snížil. Takže můžeme celkem bez obav přejít na rozlišení 1024×768. Pokud nebudete tvořit firemní web za peníze, můžete v podstatě použít takovou šířku webu, aby byl pro rozlišení 1024×768, tedy něco kolem šířky 900 px, protože do oněch 1024 se počítá i posuvník v prohlížeči. Rozlišení 800×600 dnes používá pouze minimum uživatelů. Já vím, že to není omluva pro to, že se jim na takový stránkách ukáže vodorovný posuvník, ale zkrátka jsem se rozhodl, že to tak udělám, hlavní je to, aby se při takovém rozlišení web nerozpadl, pokud se ukáže vodorovný posuvník, tak to není nic tragického, hlavní bude, když web bude fungovat. Někteří lidé volí minimalistické veby, které jsou uzounké, ovšem pro člověka, který má co říct a aktivně na stránky píše, něco takového příliš vhodné není. Já mám, a co vy?

Porovnání procentuelního a pevného modelu

Pokud budete tvořit svoje stránky, vyplatí se chvíli se rozmýšlet, který model se pro váš web bude hodit. Většinou je to jasné, ale může se stát, že vám váš předpoklad nakonec nevyjde a je lepší na začátku trochu víc promýšlet, než všechno dělat znovu.

Mimochodem, než začnete na počítači tvořit svůj návrh, nebývá marné si svůj nápad zachytit na papíře – hrubý náčrt vám pomůže si určit, co by kde mohlo být. Pomůže vám to vytvořit si navigaci a rozmístění obsahu stránek. Sice to moc často nedělám, ale pokud mi o vzhled webu skutečně jde a nechci nic zkazit, tak si ho předtím rozhodně načrtnu. Může to jednak ušetřit čas a jednak člověku vylepšit představu, kterou má zatím jenom v hlavě (a někteří i jinde).

Na konec tohoto článku musím zdůraznit obavy, že někteří nepochopili, proč tohle píšu a že budu muset pravděpodobně upravit úvodní část pro lidi, kteří přijdou někdy jindy, aby se to neopakovalo. Protože, a teď mě dobře poslouchejte, tenhle seriál nemá za hlavní úkol vám ukázat jeden web a předvést vám, jak jsem ho udělal, abyste ho potom kopírovali. Má fungovat jako teoreticky-praktický průvodce vaší cestou webdesignem, má vás vést, má vám ukázat, jak co můžete dělat, ale nechci, abyste jenom koukali na to, co zde tvoříme. Pokud čtete tento seriál a jenom doufáte, kdy už vám konečně ukážu, jak udělat ty stránky, jejichž obrázky jsem ukázal v úvodním díle a nyní znovu, tak jste tu špatně. Potom vám tento seriál nic nedá a nějaké učení bude k ničemu. Pokud se ovšem chcete poučit o důležitých prvcích moderního webu a základních a důležitých pravidlech tvorby stránek, jste tu správně. Moje snaha je přesně o tohle, ukázat vám směr a předat zkušenosti. Ne ukázat jednu práci. A věřím, že se mi již podařilo chytnout niť a že se zde najde něco pro každého. Ale abychom se příště už k něčemu dostali, začneme tvorbou grafiky, návrhem struktury webu a zdůrazněním věcí, které by měl web splňovat ohledně grafiky. Tím myslím (předchozí věta není nejlépe napsaná), že na vaše stránky mohou zavítat lidé s vypnutými obrázky, se starým prohlížečem, který jim grafiku nedovolí (existují i čistě textové prohlížeče, například Lynx), takže by měl být přístupný i jim, a jiný si kupříkladu bude chtít něco na vašich stránkách vytisknout, takže ho jistě potěší, že budete umět nastavit stránky tak, že tisknout se bude pouze text a ne grafika. A o tom si příště důkladně popovídáme.

Ps. Článek o faviconu se dočká slušného rozšíření, aby nevypadal vedle článku o bannerech jako velice chudý příbuzný.

Petr Široký Profil na fóru / Osobní stránky / Twitter Webdesignér povoláním, kritik přesvědčením, šašek duší, to vše zde najdete. Tutoriarts jsou poslední 3 roky můj největší osobní projekt. Kromě toho se zkouším věnovat jiným menším webovým projektům, živím se jako nezávislý webový designér a snažím se více hledět do budoucnosti, aby tyto stránky vzkvétaly.

Zdrojový soubor : Není k dispozici

Komentáře k článku

Nejste přihlášeni - před odesláním příspěvku vyplňte protispamovou kontrolu níže - váš komentář bude viditelný až po schválení správcem. Pro okamžité schválení se přihlašte, nebo registrujte. Registrace nezabere déle než minutu.

  • :-D
  • 8-|
  • :-/
  • 8-)
  • :-(
  • :-O
  • =(
  • =D
  • :-)
  • <3
  • ;-)

* Povinné položky

  • #1
  • Neregistrovaný kolemjdoucí
  • 7. November 2015 | 11:16
  • Skupina: Neregistrovaní

Ahoj
zaujal ma tento clanok, ale bohuzial mi nezobrazuje obrazky v nom pouzite. neda sa to nejako napravit?
dakujem
Maro

Nahoru

Autoři: Jakub Houdek, Jakub Šimůnek, Petr Široký a příležitostní sebevrazi