Webdesign prakticky Jak probíhá tvorba webu pro střední a velké společnosti a několik koderských technik navíc..

Vývoj webu ● Analýza ● Programování ● Tvorba grafického návrhu ● Copywriting ● Kódování šablon stránek ● SEO/SEM ● a další...

Ideální web je: ● Dostupný (naleznu ho ve vyhledávačích) ● Přístupný (je jedno, co mám za prohlížeč) ● Použitelný (dobře se mi s ním pracuje) ● Přesvědčivý (přesvědčuje mě ke konverzi) ● A tudíž nese zisk ● Ziskový web zdaleka nemusí být: vytvořen dle standardů, semantický, líbivý... ale může tak být ještě ziskovější

Analýza webu ● Důkladná analýza je nutným předpokladem úspěšného projektu ● Výstup: cíle, smlouva, wireframy - obrazovky s náčrtem stránek, definice funkčnosti webu, důkladné ocenění práce...

Programování stránek ● Na straně klienta / serveru ● Jazyky: PHP, ASP.NET, Java, Python, spousta dalších ● Výstup: funkční část webu (přes web už v tuto chvíli můžete nakoupit, ale nákup rozhodně nebude příjemný)

Grafický návrh webu ● Výstup: soubor v Adobe Photoshopu (reálná velikost, vrstvy) ● Grafika je vždy největší třecí plocha webové studio / klient

Grafický návrh II ● Pozor na nakódovatelnost (web není plakát) ● Grafika významně ovlivňuje celkovou použitelnost webu ● Grafický návrh by se měl maximálně podobat výsledku (vyhlazování písma, apod.) ● „Méně je více“ x „dostatek detailu“

Copywriting ● „psaní textů pro web“ ● Web není reklamní leták ● Web není kniha ● Web je web :-), což znamená: ● Všechny texty zkraťte na polovinu ● Všechna vypustitelná slova vypusťte ● Pište jednoduše ● Pište stručně, nikoliv stroze ● Používejte nadpisy a krátké odstavce

Kódování webu ● Vstup: grafický návrh ● Výstup: šablony webových stránek ● XHTML + CSS ● Kód: Semantika + well formed + validita (kvůli chybám) ● Dobrý kód zajišťuje přístupnost webu ● Svatá trojice (FF, Opera, IE6, IE7, Safari?, Links?)

Rady pro psaní ● Nejdříve napište XHTML (logická struktura), pak postupně nakódujte CSS ● Kód přehledně odsazujte, popř. i komentujte ● Vhodné pojmenování tříd vyjadřuje CO, ne KDE (class=“vlevo“ x class=“menu“)

CSS zeširoka ● Vizuální formátování stránky ● Zápis CSS: inline do elementu, hlavička webu, externí soubor p {color: red}

CSS čitelně ● Styly uvnitř dělíme na související celky ● Styl pro moderní browsery ● Styl pro IE (vhodné pro všechny menší projekty)

Praktická řešení XHTML + CSS ● Vynulování přednastavených vlastností prohlížečů ● Náhrada textu obrázkem ● Vícesloupcový layout ● Stejně vysoké sloupce i bez tabulek

Vynulování CSS ● Problém: Každý prohlížeč má svou vlastní sadu přednastavených vlastností a každý je má přednastavené trochu jinak ● tj. nemáte kontrolu nad výsledkem, když tu a tam zapomenete něco vynulovat ● Řešení: hvězdičkový selektor, lépe reset.css * {margin: 0;padding: 0;}

Náhrada textu obrázkem ● Problém 1: chci dostat na web obrázky pouze pomocí CSS, abych je pak mohl pomocí CSS i měnit (alternativní styly) ● Problém 2: přístupnost pro uživatele s vypnutými obrázky / zapnutými CSS ● Řešení: náhrada textu obrázkem ●

Vícesloupcový layout ● Problém: jak udělat více sloupců, když nemáme tabulky ● Řešení 1: absolutní pozicování ● Řešení 2: plaváčci ●

Stejně vysoké sloupce ● Problém: Tabulky poskytovaly jednoduchou možnost mít stejně vysoké sloupce o rozdílné výšce obsahu, CSS to jednoduše neumožňuje ● Řešení: Falešné sloupce z obrázků ● ●

Odkazy pro další četbu ● ● ● ● ● ● KNIHY o typografii, použitelnosti, SEO,...

Nový web FI ● Při troše štěstí bude redesign ● Více obsahu, změna informační architektury ● Lepší, skvělejší a intuitivnější ● Dostačuje vám aktuální web? Jsou na něm informace, co hledáte? ● Chybí vám na něm nějaký obsah? Chybělo vám na něm něco, když jste se sem hlásili?