Možnosti tvorby webové stránky Ing. Martin Klepek, Ph.D. Ing. Tereza Ikášová Design a správa webové stránky Možnosti tvorby webové stránky • Doména • Hosting • Přístupy k tvorbě webové stránky • Redakční systémy • Wordpress DOMÉNA • Doménu lze chápat ve smyslu adresy. • Tak jako vaše trvalé bydliště je na nějaké adrese, tak i webová stránka je na nějaké adrese, což je doména. • Doména - Určuje jednoznačnou pozici vašich webových stránek v internetovém prostředí a za žádných okolností byste její výběr neměli podceňovat. Možnosti tvorby webové stránky DOMÉNA Požadavky na doménu: • Krátká – vyhněte se víceslovným výrazům • Výstižná – charakterizuje co nejpřesněji obor vaší činnosti • Dobře zapamatovatelná – zákazník si vás může podruhé lépe najít • Snadná písemná verze – snažte se o soulad písemné i slovní podoby • Bez hanlivých výrazů – vyvarujte se dvojsmyslným výrazům Možnosti tvorby webové stránky Možnosti tvorby webové stránky DOMÉNA ÚKOL: Vymyslete název domény a zkontrolujte, zda je název volný. (Nic nenakupujte. J) Možnosti tvorby webové stránky DOMÉNA WEBHOSTING • Webhosting (hosting) - pronájem místa na internetu pro vaše webové stránky. Je to něco jako pozemek pro váš dům – stránky. • Na webhostingu je umístěn web. Například redakční systém, ve kterém si stránky vytváříte a spravujete. • Dále jsou na hostingu nahrané všechny obrázky a fotky, které chcete na svých stránkách ukázat, a také sem směřuje vaše doména. Možnosti tvorby webové stránky WEBHOSTING • Za hosting platí provozovatel webových stránek provozovateli webhostingu pravidelné splátky. (Nejčastěji na roční bázi). • Uživatel, nájemce webového prostoru, má neomezený přístup ke svým webovým stránkám. Ty může libovolně upravovat, přidávat nebo mazat. • Celková velikost stránek je přitom ohraničena velikostí vyhrazeného diskového prostoru na daném hostingu. Ta se dnes pohybuje v řádu gigabajtů. Možnosti tvorby webové stránky Možnosti tvorby webové stránky WEBHOSTING PŘÍSTUPY K TVORBĚ WEBOVÉ STRÁNKY • Možnosti zpracování webové stránky jsou různorodé a zahrnují činnosti od situace, kdy se nevyhneme programování až po „naklikání“ webové prezentace úplným laikem bez znalosti programovacích jazyků. Rozhodovací kritéria pro výběr: • cíl webu • role webu v podnikové strategii • rozpočet projektu • časové možnosti (jak moc to spěchá) Možnosti tvorby webové stránky Přístupy k tvorbě webové stránky • Na míru • Šablona s redakčním systémem • Drag and drop systémy Možnosti tvorby webové stránky PŘÍSTUPY K TVORBĚ WEBOVÉ STRÁNKY Obecně můžeme mluvit o třech základních situacích. 1. Web na míru - staví profesionální studio s programátory a webdesignery. 2. Redakční systém – předpřipravená šablona, kde je možné upravovat na webu barvy písmo, položky menu, texty, vkládat obrázky ale už méně můžeme měnit celkové rozvržení stránky. Základní nastavení zvládne i amatér ale častěji se při tvorbě obracíme na konzultanty a webdevelopery. Díky menší náročnosti to bude menší tým lidí. 3. Cloudové služby - které využívají drag and drop systémy – umisťování prvků a celkovou editaci tak zvládne skutečně každý. Možnosti tvorby webové stránky WEB POSTAVENÝ NA MÍRU Vhodný pro projekty: • Při kterých je web strategickým nástrojem podnikatelské činnosti. • Když požadujeme velmi specifické funkce. Např. web firmy Mixit.cz, kde si uživatel seskládá sám vlastní müsli. Tento interakční design šablonové řešení ani drag&drop editory nesvedou. • Web na míru vyžaduje zapojení vývojářů ovládajících programovací jazyky, jako jsou například HTML, PHP, Javacsript a mnohé další. Možnosti tvorby webové stránky HTML – struktura webu Možnosti tvorby webové stránky CSS – vzhled webu Možnosti tvorby webové stránky REDAKČNÍ SYSTÉM = CMS = CONTENT MANAGEMENT SYSTEM • Redakční systém se používá pro správu a publikování obsahu webu. • Nejčastěji pro správu: příspěvků, diskusí, komentářů, pro publikování obrázků nebo jiných multimediálních souborů. • CMS jsou vytvořeny tak, aby je i laik mohl jednoduše a efektivně ovládat. • CMS umožňují určovat práva jednotlivým uživatelům. Možnosti tvorby webové stránky REDAKČNÍ SYSTÉM - Výhody • Jednoduché ovládání –WYSIWYG editor (What You See Is What You Get), díky kterého vidíte prováděné změny v reálném čase. • Mobile friendly - Redakční systémy obsahují šablony pro responzivní webové stránky (stránky optimalizované pro telefon) • Pokročilá personalizace – Stránky lze rozšířit o „plug-iny“, které dodávají systému další funkcionality a jsou zdarma ke stažení přímo v redakčním systému. • Multi-users - Každému uživateli lze přidělit specifická práva pro úpravy • Komunita – fóra, návody, WordCamp • SEO – CMS disponují mechanismy pro optimalizaci stránek pro internetové vyhledávače Možnosti tvorby webové stránky POUŽITÍ REDAKČNÍHO SYSTÉMU A ŠABLONY • Mezi oblíbené redakční systémy patří Wordpress, Joomla nebo Drupal. • Všechny tyto systémy jsou zdarma, nicméně existují samozřejmě i placená řešení. Možnosti tvorby webové stránky Možnosti tvorby webové stránky REDAKČNÍ SYSTÉM - WORDPRESS WORDPRESS • http://wordpress.org (Pozor! Neplést s wordpress.com.) • WordPress je software patřící mezi redakční systémy. • Má 2 části: administraci webového obsahu (backend, obslužnou aplikaci) a samotný výsledný webový obsah (frontend, webové stránky – to, co vidí návštěvník). • Instaluje se na webový hosting nebo server a k jeho obsluze potřebujete webový prohlížeč (tedy počítač, což je dnes také laptop, tablet nebo i chytrý mobil). Možnosti tvorby webové stránky WORDPRESS • WordPress dokáže fungovat jako e-shop, magazín s redakční radou, firemní prezentace nebo mobilní aplikace. • Umí se napojit na jiný software a číst z něj data nebo je tam posílat. • Web na WordPressu si můžete vyrobit sami, nebo si najmout dodavatele (firmu nebo konzultanta). • Vzhled výsledných stránek určují šablony vzhledu, které lze získat zdarma, koupit si je, nebo si je nechat naprogramovat na míru. Možnosti tvorby webové stránky DRAG & DROP EDITOR Možnosti tvorby webové stránky Proces tvorby webové stránky • Fáze tvorby webu PROCES TVORBY WEBU Proces tvorby webové stránky OBJEVOVÁNÍ EVALUACEVÝZKUM TVORBA Proces tvorby webové stránky • Objevování • Výzkum • Tvorba • Evaluace PROCES TVORBY WEBU – OBJEVOVÁNÍ Proces tvorby webové stránky Objevování klienta, jeho podnikání, strategických cílů atd. • Otázky na podnikání, mise, vize, hodnoty • Pochopení business modelu • Pochopení zákazníků • Pochopení, jakou roli hraje web v businessu dané firmy • Potřebuje klient pro naplnění svých cílů webovou stránku? • Stanovení cílů webu (Více poptávek? Vyšší návštěvnost?) • Rozpočet projektu PROCES TVORBY WEBU – VÝZKUM Proces tvorby webové stránky • Po první schůzce zpracuje agentura úvodní analýzu. Nejčastěji jde o analýzu konkurence, tržního prostředí a klíčových slov (SEO analýza). • Po analýze má agentura představu, o jak velký projekt pravděpodobně půjde, a zasílá klientovi nabídku s cenou za své služby. Ten ji může přijmout/odmítnout. Proč je analytická část důležitá? • Aby agentura pochopila klienta a trh, na kterém působí, včetně jeho zákonitostí, co je na něm běžné, důležité, nebo co má naopak ignorovat. • Dále jaké je postavení klienta na trhu, co jeho zákazníci hledají a chtějí a jak jim to nakonec co nejlépe podat. PROCES TVORBY WEBU – VÝZKUM (VYŽÁDÁNÍ PODKLADŮ) Proces tvorby webové stránky • Pokud klient cenovou nabídku přijme, spolupráce pokračuje. • Agentura se znovu sejde s klientem, představí mu všechna zjištěná data a společně se dohodnou, jakým směrem se budou ubírat. Poté následuje výzva k dodání podkladů. • Agentura bude potřebovat fotografie a texty, které na web umístí. Pokud žádné fotografie nemá klient k dispozici, většina agentur se o nafocení vašich produktů postará. • Zároveň by se měla postarat o adekvátnost veškerých textů. Buď je agentura sama sepíše (tuto práci mají na starost copywriteři), nebo přepracuje texty, které zašle klient. PROCES TVORBY WEBU – VÝZKUM (ANALÝZA KONKURENCE) • Analýza současného webu • Analýza webů konkurence • Analýza klíčových slov • STP (segmentace, targeting, positioning) • Hloubkové/strukturované rozhovory • Uživatelské testování • Eye tracking Proces tvorby webové stránky PROCES TVORBY WEBU – VÝZKUM (ANALÝZA KLÍČOVÝCH SLOV) • Soupis toho, co lidé nejčastěji hledají na internetu. • Naslouchání cílové skupině v tom, jaké konkrétní slova a slovní spojení vyhledávají v souvislosti s oblastí, které se má webová stránka týkat. • Na základě ní pak vznikají např. požadavky na vstupní stránky, návrh kategorií na e-shopu nebo filtrů pro zboží. • Pokud text na webu zahrnuje oblíbená klíčová slova, podpoří to jeho návštěvnost a pozici ve vyhledávání. Proces tvorby webové stránky PROCES TVORBY WEBU – TVORBA (INFORMAČNÍ ARCHITEKTURA) Proces tvorby webové stránky • Dříve, než se designéři pustí do tvorby, je potřeba promyslet, jak bude celý web strukturován z hlediska podstránek. • K tomu si můžete sestavit například myšlenkovou mapu, která vám vizualizuje, jaké podstránky má web mít a jaké informace musí obsahovat. • Nikdy bychom stránky neměli vytvářet „do počtu“. Vždy by pro jejich existenci měl být důvod. PROCES TVORBY WEBU – TVORBA (INFORMAČNÍ ARCHITEKTURA) Proces tvorby webové stránky PROCES TVORBY WEBU – TVORBA (UX) Proces tvorby webové stránky • UX deisgnér (UX = user experience neboli „uživatelský prožitek) v rámci plánovaného webu řeší to, aby zážitek jeho návštěvníků z prohlížení webu byl co nejlepší. • Jedná se o odbourání bariér, které lidem v prohlížení překáží (např. příliš agresivní pop-up okna) a šperkuje web tak, aby jeho prohlížení pro lidi bylo co nejpříjemnější a nejzáživnější (apeluje na zrychlení webu, snaží se vyzdvihnout nejdůležitější informace na webu atd.) • UX designer zpracuje svůj návrh v jedné ze tří podob: textové zadání, wireframe nebo v podobě prototypu (funkční model webu, kde se před nakreslením vše vyzkouší vč. toho, jak jednotlivé prvky fungují). PROCES TVORBY WEBU – TVORBA (Wireframe) • Jakmile víme, jaké podstránky má web mít, potřebujeme si je rozvrhnout, jak budou vypadat. Bezcílná tvorba podstránky a ”zkoušení” skládání elementů bez dobrého plánu, je ztráta času a zejména peněz. Proto se tvoří tzv. wireframy. • Wireframy jsou podkladem pro zpracování grafického návrhu webové stránky. • Wireframe definuje rozmístění funkčních prvků. Nejedná se v žádném případě o grafický návrh, neobsahuje obrázky a je tvořen pouze pomocí čar a textu (odtud drátěný model). Proces tvorby webové stránky PROCES TVORBY WEBU – TVORBA (Wireframe) • Nedoporučuje se použití barev, model by měl být co nejjednoduší. • Wireframe připravuje informační architekt ve spolupráci s UX designérem. Do nákresů jsou přeneseny požadavky klienta. • Rozložení podstránek by mělo odpovídat domu, co lidé na webu hledají. Nejdůležitější informace jim předat ”na zlatém podnose”. • Důležité je nenutit uživatele přemýšlet. Tím přicházíme o možné konverze – lidé nemají čas a chuť zjišťovat, co a jak designéři webu mysleli. Proces tvorby webové stránky PROCES TVORBY WEBU – TVORBA (Wireframe) Proces tvorby webové stránky PROCES TVORBY WEBU – TVORBA (Grafika) Proces tvorby webové stránky • Když je vymyšlená celková vize vzhledu webu a jeho funkcí, předá se zadání grafikovi, který ho zpracuje do výsledné podoby. • Tato fáze je poměrně drahou záležitostí - U profesionálních webů totiž design nevychází pouze z jednoho návrhu, ale každá podstránka se kreslí atypicky svému obsahu, což vyžaduje mnohem více času. • Grafik při tvorbě vychází z wireframů. PROCES TVORBY WEBU – TVORBA (Kódování/Design) Proces tvorby webové stránky • Po grafikovi se práce předává člověku, který z grafického návrhu tvoří funkční web. V případě, že se web tvoří na míru, předá se zadání kodérovi, v případě redakčního systému, kde se řešení nasadí prostřednictvím šablony, předá se web designérovi který grafický návrh přivede k životu. • Při kódování dochází k přepsání grafického návrhu do jazyka, kterému weby rozumí. Výsledkem je webová stránka. • Vše se musí nakódovat zvlášť pro desktop a mobilní zařízení, které navíc mají různé operační systémy. PROCES TVORBY WEBU – TVORBA (CMS) Proces tvorby webové stránky • CMS (systém pro správu obsahu, redakční systém) - administrační systém, do kterého se web nasadí. • CMS může obsahovat pouhou správu textů a fotografií, ale také přes něj můžete zpracovávat objednávky, přidávat příspěvky na blog, vést firemní databáze, spravovat poptávky, rezervační systém, distribuční sítě atp. • Dodatečné funkcionality se přidávají pomocí plug-inů. PROCES TVORBY WEBU – EVALUACE Proces tvorby webové stránky • Vytvořením webu dobrá práce nekončí. • Sledování návštěvnosti • Sledování požadovaných konverzí • Sledování plnění požadovaného cílu webu • Ověření, že nový web je skutečně navržen dobře: • Přináší požadované konverze • Uživatelské testování • Eye trackingový experiment • A/B testování • Dotazníky/průzkumy (nejméně efektivní) PROCES TVORBY WEBU - EVALUACE (Uživatelské testování) Proces tvorby webové stránky • Skuteční uživatelé testují web za účelem identifikace možných problémů a zlepšení uživatelského zážitku. • Uživateli zadáte úkol (aniž byste mu vysvětlovali, jak jej na webu vyřešit) a pozorujete jeho kroky. • Uživatel musí spadat do vybrané cílové skupiny webu. • Na základě výsledků můžete určit slabá místa webu, nalézt nefunkčnosti či nejasnosti v designu.