Kurz pro studenty oboru Informační studia a knihovnictví 2. Úvod do problematiky tvorby webových stránek Martin Krčál Brno, KISK FF MU, 27.2.2013 OPVK_MU_rgb 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 vstandard 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 q L chybí reálná představa o ceně Návrh Návrh webu qnápad = polovina práce qdrátěný model qgrafický návrh vvolba rozlišení vpozadí, písmo, další prvky na stránce vpoužití barev v... Wireframe = drátěný model webu q Zdroj: Shopsys.cz, SEO-Web-Design.cz a Symbio.cz Další ukázky Druhy Wireframe qTextový vseznam položek a funkcí, nejjednodušší qBlokový vrozmístění do bloků, jejich přibližná velikost na stránce vtext s popisem obsahu nebo funkčnosti qPodrobný vpodrobný popis všech elementů webu vpřesné proporce, obsah i funkčnost podrobně popsány qProklikávací vnadstavba podrobného wireframu vjednotlivé stránky jsou propojeny (jsou klikatelné) vvyužití pro uživatelské testování 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 qeshopy QuickCart a PrestaShop - zdarma http://www.opensourcecms.com Nástroje na tvorbu webu qWYSIWYG vMS Expression Web (Frontpage), DreamWeaver, Contribute, včlánek The 10 Best Windows WYSIWYG Editors na About.com 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 Další možnosti pro náročné qvirtuální hosting vrozdělení serveru mezi menší počet zákazníků, garantovaný výkon qmanaged a dedikované servery vpronájem serveru qserver housing vvlastní server u poskytovatele 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 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 q q qMartin Krčál qkrcal@fss.muni.cz Děkuji za pozornost OPVK_MU_rgb