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

Prezentace na téma: "Webdesign prakticky Jak probíhá tvorba webu pro střední a velké společnosti a několik koderských technik navíc.."— Transkript prezentace:

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

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

3 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ší

4 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...

5 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ý)

6 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

7 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“

8 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

9 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?)

10 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“)

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

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

13 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

14 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;}

15 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 ● http://www.mezzoblue.com/tests/revised-image-replacement/ http://www.mezzoblue.com/tests/revised-image-replacement/

16 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 ● http://maxdesign.com.au/presentation/page_layouts/ http://maxdesign.com.au/presentation/page_layouts/

17 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ů ● http://www.alistapart.com/articles/fauxcolumns/ http://www.alistapart.com/articles/fauxcolumns/ ● http://www.wellstyled.com/css-2col-fluid-layout.html http://www.wellstyled.com/css-2col-fluid-layout.html

18 Odkazy pro další četbu ● www.jakpsatweb.cz www.jakpsatweb.cz ● www.wellstyled.com ● www.wdnews.com www.wdnews.com ● www.weblogy.cz www.weblogy.cz ● www.alistapart.com www.alistapart.com ● KNIHY o typografii, použitelnosti, SEO,...

19 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?