Tvorba www stránek, Webdesign

Pečlivá a profesionální tvorba www stránek se skládá z mnoha činností, které na sebe navazují a doplňují se. Obecně se dá tvorba webu neboli webdesign rozdělit na:

• grafický návrh, design
• nakódování XHTML a CSS šablony – přístupnost, použitelnost, sémantika, validita kódu;
• s předchozím bodem také souvisí optimalizace kódu pro vyhledávače – SEO;
• tvorba a implementace obsahu do webových stránek – copywriting;
• registrace domény, zřízení webhostingu a spuštění webové prezentace.

O grafických návrzích a optimalizaci webových stránek si můžete přečíst více na dalších stránkách našeho webu. Pokud jsou Vám některé termíny cizí, zkuste se podívat do slovníku pojmů. Dále se budeme věnovat převážně tvorbě HTML a CSS kódu, který je základním stavebním kamenem každé www stránky.

Kódování XHTML šablon

Správně navržený a napsaný zdrojový kód (tedy XHTML) www stránky je základ, od kterého se dále odvíjí kvalita webu. HTML jazyk byl již od začátku koncipován jako nosič informací. V době tabulkových layoutů také suploval grafické podání webu, ale dnes se již opět vrací ke své podstatě.

Profesionálně vytvořené weby mají dnes již oddělenu obsahovou část, kterou tvoří právě HTML, a část zajišťující grafické zpracování, to zajišťují kaskádové styly (CSS). HTML jazyk používá k formatování značky, tzv. tagy a úkolem kvalitního kodéra je umět tyto tagy správně používat, vytvořit sémantický a validní kód a tento také vhodně optimalizovat.

Je důležité si uvědomit, že i když přivedete na svůj web návštěvníky, ti brzy odejdou pokud na Vašich webových stránkách nenaleznou jednoduše a rychle požadované informace. Aby se tak nestávalo je důležité dodržovat pravidla přístupnosti a použitelnosti.

Přístupnost

Proč tvořit přístupný web? Protože na internetu se pohybují nejen zdraví lidé. Někteří mají zdravotní postižení trvalé, jiní dočasné. Určitě si proto přejete, aby byl Váš web pro tyto uživatele bezbariérový, tedy bez překážek.

Zdravotní postižení mohou být zraková (nevidomí, slabozrací, barvoslepí), pohybová (postižení horních končetin, ruka v sádře a tedy nemožnost pohybování se po webu pomocí myši) a jiná. A nemusí se jednat pouze o zdravotní postižení, ale mělo by se myslet také na různé operační systémy, internetové prohlížeče či alternativní způsoby prohlížení webu.

Součet různě hendikepovaných internetových uživatelů se blíží až k podílu 30 %.

Přístupné webové stránky by tedy měly splňovat či umožňovat následující:

• korektně se zobrazovat v hlavních internetových prohlížečích (Internet Explorer 6, 7 a 8, Firefox, Chrome, Safari 3 a 4, Opera);
• pro slabozraké a barvoslepé používat kontrastní barvy pro písmo a pozadí nebo nabídnout alternativní zobrazení pomocí kaskádových stylů;
• stejné skupině také umožnit zvětšování písma pro lepší čitelnost;
• pro nevidomé psát sémantický kód aby se mohli pomocí čtečky www stránek jednoduše pohybovat, rozhodně nepoužívat tzv. „tabulkový layout”, který je pro tyto uživatelé nevhodný.

Položím tedy stejnou otázku ještě jednou. Proč tvořit přístupný web? Protože ve výsledku budou Vaše webové stránky vydělávat více - neodmítáte kupní sílu hendikepovaných internetových uživatelů, www stránky jsou více přístupné pro indexovací roboty a jsou tedy lépe optimalizovány.

Použitelnost

Použitelnost webu jsou určitá pravidla (praxí ověřené výsledky), která mají napomoci návštěvníkům v lepším zorientování se, rychlejšímu pochopení „jak web funguje”, tzn. jak nejrychleji či nejsnadněji nalézt potřebné informace.

V konkrétních případech použitelnost učí, jak správně navrhnout menu nebo celou navigační strukturu, jakou zvolit formu a vzhled formulářů nebo objednávek, jak správně dělit a formátovat bloky textu, jak pracovat s odkazy a mnoho dalších věcí, které si kladou za cíl komfortnější a příjemnější pobyt návštěvníka na Vašich www stránkách.

Čím méně musí návštěvník Vašeho webu přemýšlet „jak co funguje”, tím lépe pro obě strany. Návštěvník se vyzná a najde co potřebuje, Vy máte o jednoho spokojeného návštěvníka, potenciálního zákazníka, více. A jak je známo, spokojení zákazníci se vracejí.

CSS - kaskádové styly

Nyní jsme se dostali k druhé „větvi” tohoto tématu. Prvním bylo kódování v XHTML, jeho možnosti a tipy na zefektivnění kódu.

Kaskádové styly neboli CSS jsou určeny k oddělení grafické podoby www stránek od informačního obsahu. Toto oddělení grafiky od obsahu má své důvody a mnoho výhod:

• výstupní informací správného HTML je čistý text (když nepočítáme případné obrázky). Tento text zajistí, že se bude zobrazovat na jakémkoli zařízení či platformě správně a může být dále jakkoli zpracován - například vytisknutí stránky. Na papíře nás většinou nezajímá, že pozadí www stránky je zelené, v hlavičce je velká fotka a celá www stránka je široká 700 pixelů. Když si www stránku tiskneme, zřejmě potřebujeme její informace a ty se nejlépe prezentují jako čistý text;
• protože se správně CSS načítá jako externí soubor, nezvětšuje velikost html souboru a tím se obsah načítá rychleji;
• když se html soubor načítá rychleji, je také lepší pro vyhledávače a tedy pro optimalizaci;
• jak už název napovídá, jedná se o kaskády, tzn. jednotlivá pravidla se dědí. Takto můžeme jednoduše a rychle úpravou jednoho pravidla v externím CSS souboru změnit vzhled všech stránek webu;
• když znásobíme předchozí bod, změnou CSS souboru můžeme změnit barevné schéma nebo kompletní grafické zobrazení celého webu najednou.

Tyto a další možnosti nabízejí kaskádové styly (CSS). Jedná se jednoduše o moderní způsob tvorby www stránek.

V oblasti tvorby webů Vám nabízíme

Pokud jste pozorně četli text výše, jistě víte, jaké služby Vám můžeme nabídnout.

1. Nemáte své www stránky a přejete si je zhotovit. Nabízíme Vám plný servis. Od navržení grafické podoby, přes nakódování šablon, implementaci obsahu, zřízení domény a hostingu až po spuštění na internetu.
2. Máte-li již zhotovený grafický návrh, nakódujeme Vám XHTML a CSS šablony do podoby, aby výsledný kód odpovídal standardům, přístupnosti, použitelnosti a byl validní.
3. Máte své webové stránky, ale přejete si vylepšit zdrojový kód, aby vyhovoval současným standardům. Jedná se tedy o optimalizaci Vašich www stránek.

Přejete si nezávazně ocenit tvorbu Vašich www stránek či nedokážete sami posoudit stav těch současných? Kontaktujte nás a uvidíme, co pro Vás můžeme udělat.

---