Kurz pro studenty oboru Informační studia a knihovnictví 2. Proces tvorby webových stránek Martin Krčál Brno, KISK FF MU, 2.3.2015 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 qspecialista na obsah vvizualizace obsahu, SEO,… 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 qMířit na všechny q= qnetrefit nikoho Praktický úkol qpojišťovna specializující se na povinné ručení qdůraz na nízkou cenu pojištění qdefinujte cílovou skupinu Jak poznat cílovou skupinu? qkvantita vdotazníky, průzkumy qkvalita vrozhovory, focus groups, pozorování, persony, storybordy,… Koho testovat? qbudoucí uživatelé qzástupci oboru, kterému se web věnuje qoddělení péče o uživatele qlidé komunikující s uživateli qlidé z okolí vrodina, známí,… Kde zkoumat? qonline prostředí qneformální prostředí vkavárna vs. kancelář Odměny za testování qfinanční odměna qposkytnutí SW nebo služby qcertifikát qdrobný dárek qdobrý pocit J Ptejte se na to,… qjaký mají problém a jak ho teď řeší vnástroje, weby, postupy qco ji na řešení vadí vjak by to šlo vylepšit qco dělají vjak pracují s Vaším produktem, chtějí ho využívat, pomáhá jim q Rozhovory qPOSLOUCHEJTE qRESPONDENTY!!!! 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 qskica, drátěný model qprototyp qgrafický návrh vvolba rozlišení vpozadí, písmo, další prvky na stránce vpoužití barev v... Skica http://www.itnetwork.cz/images/2068/moderni_portfolio/06/01.jpg Zdroj: Inetwork.cz 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í Nástroje qAxure vkomerční, demoverze qBalsamiq vkomerční 7 denní trial, webová verze qJustinmind vkomerční, i měsíční předplatné, freeforever edition qdalší nástroje 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ě Prototyp a grafický návrh http://www.artweby.cz/uploaded/dokumenty/prototyp-a-web-design-big.jpg Zdroj: Artweby.cz 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í qDollarphotoclub – komerční, foto za $1 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ů qWordpress, qJoomla!, Drupal, 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 Hostingy zdarma qZikum.cz vhosting zdarma, doména .tk zdarma qWebzdarma.cz qPípni.cz vhosting pro domény 2. řádu qzahraniční hostingy 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@phil.muni.cz Děkuji za pozornost OPVK_MU_rgb