Kurz pro studenty oboru
Informační studia a knihovnictví
Úvod do problematiky tvorby webových stránek
Martin Krčál
Brno, FF MU, 3.3.2011

Cyklický diagram
Proces tvorby webových stránek
Návrh
Plánování
Realizace
Údržba
Zveřejnění

Plánování



Tvůrčí tým
qwebdesignér
vgrafik, kodér
qpsycholog
qreklamní specialista, SEO specialista
qzástupce zadavatele
quživatel

Co byste si měli zjistit
qurčení cílové skupiny
qcíle stránek
qobsah webu (existují podklady?)
qspeciální požadavky klienta
qmá klient nějaké vzorové stránky
qzmapování konkurence
q

Určení cílové skupiny
qrůzní uživatelé
vvěk, znalosti, zkušenosti
qrůzné chování uživatelů (návyky)
vstarší lidé více čtou, mladí prohlížejí
qrůzné přístupy (aneb proč přicházejí)
vfiremní stránky, portály, e-shopy, e-banky

přístupy – jinak se uživatelé chovají na portálech, něco jiného očekávají od firemních stránek a
e-shopů

Určení cílové skupiny
qKDO je cílová skupina uživatelů
qCO cílová skupina chce
qJAK (jakou formou) to cílová skupina chce

Praktický úkol
qpojišťovna specializující se na povinné ručení
qdůraz na nízkou cenu pojištění
qdefinujte cílovou skupinu

Proč vytváříme webové stránky?



Cíle stránek
qprezentovat firmu, projekt, služby…
qzpřístupňování informací
qposkytování služeb
qkomunikace
qzábava

prezentace firmy, projektu – oslovení sponzorů, u každého uvést příklady

Cíle stránek prakticky
qinformovat
vudálosti, produkty, služby
qpropagace značky
vzvýšit povědomí o značce, věrnost značce
qzvýšit obrat z prodeje
ve-shopy, podpora prodeje
qvytvoření komunity
qvyrovnat se a překonat konkurenci
q

prezentace firmy, projektu – oslovení sponzorů, u každého uvést příklady

Obsah webu
qjaké informace umístit na web?
qpodklady od zadavatele
qstrukturování informací
qcizojazyčná verze
q

strukturování informací – přemýšlet, jak seskupovat podobné informace

Ostatní
qspeciální požadavky klienta
vgrafika vychází z image firmy
qvzorové stránky klienta
vco se mu líbí, jak si představuje web
qzmapování konkurence
vco je standardem v oboru, inspirace
q

Krutá realita
q L mnoho klientů neví, co chce
q L mnoho klientů není schopno poskytnout podklady
q L cizojazyčná verze = práce pro webmastera

Návrh



Návrh webu
qnápad = polovina práce
qgrafický návrh
vnáčrtek, Photoshop (vrstvy)
qvolba rozlišení
qpozadí, písmo, další prvky na stránce

Informační architektura
qrozdělení obsahu do sekcí
qnávrh menu
vhorizontální
vvertikální
vostatní (víceúrovňová, drobečková,…)
qstálá navigace = na jednom místě

Kde vzít inspiraci
qasociace ke klíčovým slovům webu
qwebové stránky, templates
qdenní tisk, časopisy
qokolí (příroda, město, život)
qptát se kamarádů, členů rodiny,…

Templates
qhttp://www.templatesbox.com
qhttp://www.freewebsitetemplates.com
qhttp://www.flashtemplatestore.com
qhttp://freesitetemplates.com
qFree HTML+CSS Web Templates (Smashing Magazine)

Fotobanky
qsxc.hu - databanka fotografií zdarma
qfreephotosbank.com - zdarma
qeverystockphoto.com - zdarma
qistockphoto.com – komerční
qpixmac.cz – komerční
qProfimédia - komerční

Rozcestník
qBlue Vertigo - odkazy na fotogalerie, šablony, textury, kliparty,…


Druhy licencí
qfree - zdarma
qnon-commercial - pro nekomerční účely
qroyalty free - bez omezení počtu užití (jednorázový nákup, paušální cena)
qrights-managed - dle užití
qcreative commons – piktogramy (druhy, wiki)

Chcete si přivydělat?
qprodej vlastních fotografií


Předkládání návrh klientovi
qprůběžné
qvíce návrhů
qdůležitá komunikace
qnávrh x realizace v HTML - rozdíly
qrealizace teprve po schválení!!!
q

Realizace



Statické prezentace
qvýhody
vrychlé
vjednoduchý návrh
vstačí základní znalosti HTML
qnevýhody
vnutný zásah do zdrojového kódu při každé aktualizaci

Dynamické prezentace
qvýhody
vdata lze ukládat do databáze
vspráva přes administraci
vwebové služby (např. formuláře)
qnevýhody
vnutná znalost programovacího jazyka
vadresa s proměnnými (řeší mod_rewrite)

Redakční systémy
qumožňují správu webu bez znalosti webových technologií
qněkdo je musí zprovoznit (admin)
qspravují se přes webové rozhraní
qnevýhoda - mohou být snadno napadnutelné (zejména free systémy)

Příklady redakčních systémů
qJoomla! - česká lokalizace
qDrupal, Wordpress, PHP Nuke
qSunLight - český systém
qWiki projekty (info)
qWebnode - český online CMS, v základu zdarma
qeshop QuickCart - zdarma
http://www.opensourcecms.com

Nástroje na tvorbu webu
qWYSIWYG
vMS Expression (Frontpage), Nvu, DreamWeaver, Contribute CS5
qnon-WYSIWYG
vNotepad, PSPad, jEdit, EasyPad

Zveřejnění



Hosting a adresa
qfreehosting x komerční hosting
qdomény druhého a třetího řádu
vhttp://www.web.cz x http://www.web.cz/neco
qvolba vhodné adresy
vSEO, krátké, logické,…
qcom, info, org, biz, net, cz, sk,…???
q

Vyhledání vhodného hostingu
qHostingy.cz – přehled hostingů
qMěření dostupnosti hostingů - zdarma

Zásady zveřejnění webu
qproveďte test na uživatelích
qdůkladně si pročtěte texty
qvyzkoušejte platnost odkazů
qotestujte fungování služeb
qzveřejňujte pouze hotový web!!!!
vunder construction = velká chyba

Údržba



Údržba
qpravidelné aktualizace a optimalizace
qudržujte krok s konkurencí
qsledujte aktuální trendy
qsledujte statistiky Æ chování uživatelů
q„donuťte“ uživatele vracet se
q

Cyklický diagram
Proces tvorby webových stránek
Návrh
Plánování
Realizace
Údržba
Zveřejnění

Máme čas?
qCo na webových stránkách nesnášíte?
vuveďte alespoň jednu věc

Závěr
qMartin Krčál
qkrcal@fss.muni.cz
Děkuji za pozornost