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 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 csvukrs 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 https://hosting.cz/nevite-si-rady/co-je-to-hosting-35/ Možnosti tvorby webové stránky WEBHOSTING csvukrs 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 csvukrs 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 csvukrs Možnosti tvorby webové stránky DOMÉNA csvukrs ÚKOL: Vymyslete název domény a zkontrolujte, zda je název volný. (Nic nenakupujte. J) Možnosti tvorby webové stránky DOMÉNA 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 Výsledek obrázku pro stavba domu Výsledek obrázku pro stavba domu Výsledek obrázku pro stavba domu svépomocà 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 Výsledek obrázku pro redakÄ�nà systém csvukrs 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 https://www.ovh.cz/webhosting/website/porovnani-cms/ 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 Výsledek obrázku pro wordpress logo Výsledek obrázku pro joomla logo Výsledek obrázku pro drupallogo https://www.ovh.cz/webhosting/website/porovnani-cms/ Možnosti tvorby webové stránky REDAKČNÍ SYSTÉM - WORDPRESS https://cs.wikipedia.org/wiki/Syst%C3%A9m_pro_spr%C3%A1vu_obsahu 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 https://coumiwp.cz/co-je-wordpress/ 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 https://coumiwp.cz/co-je-wordpress/ DRAG & DROP EDITOR •Wix, Webnode, E-stranky, … •Nevyžaduje znalost programování. •Ideální pro tvorbu malých, nenáročných webů. •Má omezené možnosti a funkcionality. •Je téměř nemožné přejít k jinému poskytovateli, aniž byste museli web tvořit odznovu. Možnosti tvorby webové stránky https://coumiwp.cz/co-je-wordpress/ 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Í EVALUACE VÝZKUM TVORBA Dle Jana Řezáče (Web ostrý jako břitva) 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 csvukrs 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 csvukrs 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 Informační architektura webu https://mladypodnikatel.cz/informacni-architektura-webu-t26202 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 csvukrs 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 csvukrs PROCES TVORBY WEBU – TVORBA (Wireframe) Proces tvorby webové stránky Výsledek obrázku pro wireframe https://medium.com/@robertsmith_co/validating-your-product-design-ideas-with-low-fidelity-wireframe s-fba03b84af23 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. •