Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

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

Podobné prezentace


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 ●

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 ●

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ů ● ●

18 Odkazy pro další četbu ● ● ● ● ● ● 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?


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

Podobné prezentace


Reklamy Google