Webdesign prakticky Jak probíhá tvorba webu pro střední a velké společnosti?

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

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

Programování stránek ● Provádí programátor ● 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 ● Provádí webdesigner ● 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 (čtveřice)

Rady pro psaní ● Nejdříve napište XHTML (logická struktura), pak postupně nakódujte CSS ● Kód komentujte a přehledně odsazujte ● 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 * {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 ● ● ● ● ● ● a spousta dalších..