Časť 2 · Stavba e-shopu

Blok 4 z 12

Blok 3: Hosting a platforma Blok 5: Produkty

Blok 4 — Základ e-shopu

Máš hosting a adresu. Dnes na nej rozbehneš e-shop — zatiaľ prázdny, ale živý: so šablónou, názvom, logom, menu a zámkom HTTPS. Znie to ako maličkosť, no práve tu sa rozhoduje, či zvyšok semestra stráviš stavaním obchodu, alebo bojom so systémom. Poriadne založený základ ti ušetrí hodiny.

Od tohto bloku sa postup delí podľa skupiny: skupina WooCommerce inštaluje WordPress a plugin WooCommerce na svoj hosting, skupina Webnode zakladá e-shop na platforme. Ciele a kontrola na konci sú pre obe rovnaké.

Čo sa v tomto bloku naučíš

• Nainštalovať alebo založiť e-shopový systém a prihlásiť sa do jeho administrácie.
• Nastaviť základy: jazyk, menu, krajinu, DPH, názov, logo.
• Zapnúť HTTPS a overiť, že e-shop je verejne dostupný.
• Označiť projekt ako študentský, aby nikoho nezmiatol.

Krok 1 — Rozbehni systém

WooCommerceWebnode

1. Nájdi inštalátor. V administrácii hostingu (cPanel, DirectAdmin alebo vlastný panel) hľadaj Softaculous, Installatron, WordPress alebo „1-click install". Vyber WordPress a cieľ inštalácie: tvoja subdoména z bloku 3.
2. Vyplň údaje: názov e-shopu, prihlasovacie meno správcu iné než „admin", silné heslo (správca hesiel), e-mail. Jazyk slovenčina.
3. Prihlás sa na tvoja-adresa/wp-admin. Vidíš Nástenku — administráciu WordPressu. Orientácia: WordPress a WooCommerce.
4. Nainštaluj WooCommerce: Pluginy → Pridať nový → hľadaj „WooCommerce" → Inštalovať → Aktivovať. Spustí sa sprievodca: krajina Slovensko, mena EUR, typ produktov (fyzické, digitálne). Všetko, čo ponúka „vyskúšať zadarmo", platené rozšírenia alebo marketingové doplnky, preskoč — základný WooCommerce stačí na celý predmet.
5. Bez inštalátora? Stiahni WordPress z wordpress.org, v paneli hostingu vytvor databázu (zapíš si názov, používateľa, heslo), nahraj súbory cez FTP alebo správcu súborov a otvor svoju adresu — spustí sa inštalácia, do ktorej zadáš údaje databázy. Je to dlhšia cesta, ale naučí ťa, čo inštalátor robí za teba.

Po inštalácii sa v menu vľavo objavia položky WooCommerce a Produkty. Skontroluj Nastavenia → Všeobecné: adresa webu s https://, časová zóna Bratislava, formát dátumu.

1. Registruj sa na webnode.sk e-mailom z bloku 3 (alias meno+webnode@…), bez karty.
2. Vytvor web a hneď zvoľ typ „E-shop". Toto je najdôležitejší klik dňa — obyčajný web sa na e-shop neskôr mení ťažko alebo vôbec.
3. Názov e-shopu určí subdoménu (nazoveshopu.webnode.sk alebo podobnú). Vyber si názov, ktorý znesie aj tlač na banner.
4. Šablóna: vyber jednoduchú, s dobre viditeľným produktovým výpisom. Vzhľad doladíš v kroku 2, štruktúra šablóny sa neskôr mení ťažko.
5. Nastavenia e-shopu: jazyk slovenčina, mena EUR, krajina Slovensko. Prejdi si sekciu E-shop → Nastavenia, aby si vedel, kde sú doprava, platby a e-maily — nastavíš ich v bloku 6. Orientácia: Webnode.

Bezplatný plán ti dá 10 produktov, subdoménu a reklamný prúžok Webnode na stránke. Všetko ostatné, čo budeš potrebovať, v ňom je.

Krok 2 — Identita: názov, logo, farby, menu

E-shop musí na prvý pohľad vyzerať ako obchod tvojej firmy, nie ako šablóna. Stačí málo, ale dôsledne:

• Názov v hlavičke a v titulku prehliadača (vo WordPresse Nastavenia → Všeobecné, vo Webnode nastavenia webu).
• Logo: ak firma nemá, vyrob jednoduché textové logo v Canve (zadarmo) — názov, jeden symbol, jedna farba. Druhá možnosť: vygeneruj si logo pomocou AI podľa návodu Logo a produktové foto pomocou AI. Žiadne stiahnuté logo z internetu.
• Farby: jedna hlavná, jedna na tlačidlá (akcent), zvyšok neutrálny. Vo WordPresse Vzhľad → Prispôsobiť (alebo Editor pri blokových témach), vo Webnode v nastaveniach šablóny.
• Menu: Domov · Obchod (alebo Produkty) · O nás · Kontakt. Stránky Doprava a platba a Obchodné podmienky pribudnú v blokoch 6 a 7.
• Šablóna (WooCommerce): predvolená téma alebo Storefront stačia. Nekupuj tému a neinštaluj tému stiahnutú mimo oficiálneho katalógu WordPressu — býva zavírená.

Vytvor tri stránky s aspoň jedným odsekom textu: O nás (kto ste, prečo predávate práve toto — použi text z bloku 1), Kontakt (kontaktné údaje firmy, pri fiktívnej fiktívne) a Domov s uvítaním a odkazom na obchod.

Pozri si teóriu

Značka a vizuálna identita: čo zákazník vidí a čo cíti

Vizuálna identita: tvár e-shopu Všetko, čo zákazník vidí: logo, farby, písmo a celkový grafický štýl.

logofarbypísmografický štýl

Viditeľné: okamžitá rozpoznateľnosť

Branding: duša značky To, čo o tebe hovoria ľudia, keď nie si v miestnosti - pocity a sľuby, ktoré si so značkou spájajú.

emócia, ktorú zákazník cíti sľub, ktorý značka drží

Neviditeľné: vzťah a emócia

Vizuál je len špička ľadovca. Pod hladinou je to, čo si zákazník o značke myslí - a to buduješ tým, čo naozaj robíš.

Styleguide - kľúčové prvky grafickej identity

Logo a typografia

Logo je tvárou značky, písmo musí byť jasné a čitateľné. Obe používaj v celom e-shope rovnako - v hlavičke, na faktúrach aj v e-mailoch.

Psychológia farieb

Farby vyvolávajú emócie a musia byť konzistentné naprieč celým e-shopom. Vyber si dve hlavné a jednu doplnkovú, viac nepotrebuješ.

Sila prvého dojmu

Profesionálna grafika buduje dôveru a priamo ovplyvňuje ochotu zákazníka nakúpiť. Zákazník sa rozhodne za pár sekúnd, ešte kým si prečíta prvý produkt.

Tone of voice

Spôsob, akým značka komunikuje - odráža to jej charakter a hodnoty. Drž ho rovnaký v popisoch produktov, v e-mailoch aj v odpovediach zákazníkom.

Logo pomocou AI: prompt, druhy loga a kontrola

1

Univerzálna šablóna promptu

1. Subjekt druh loga a čo zobrazuje „emblem logo pre kávovú pražiareň "ZRNKO""

2. Štýl a médium ako to má vyzerať „minimalistické, plochý vektor"

3. Farby dve, najviac tri „tmavohnedá a krémová"

4. Technické parametre doladenie na konci „biele pozadie, štvorec, vysoké rozlíšenie"

5. Negatívny prompt čo v obrázku nechceš „no 3D effect, no shadows"

Výsledný prompt

„emblem logo pre kávovú pražiareň "ZRNKO", minimalistické, plochý vektor, tmavohnedá a krémová, biele pozadie, štvorec, vysoké rozlíšenie, no 3D effect, no shadows“

Farba podčiarknutia zodpovedá časti promptu vyššie.

Výstup z uvedeného promptu.

2

Druhy loga

Wordmark Celý názov firmy vo výraznom písme. Funguje, keď je názov krátky a zapamätateľný.

Lettermark Iniciály namiesto celého názvu. Pre dlhé názvy, ktoré sa do malého priestoru nezmestia.

Emblém Názov vnútri tvaru, štítu alebo kruhu. Pôsobí tradične, v malých veľkostiach sa zle číta.

Kombinácia Symbol a názov, ktoré fungujú spolu aj samostatne. Pre e-shop najpraktickejšie.

3

Váha slov zľava doprava

začiatok promptukoniec

Model dáva najväčší význam prvým slovám. Najdôležitejšie slovo píš prvé, doladenie a zákazy nechaj na koniec.

4

Negatívny prompt a kedy ho použiť

Nepíš ho hneď. Vygeneruj prvú sadu a až podľa toho, čo ti v nej prekáža, doplň zákazy - inak modelu zbytočne zaberáš pozornosť.

Prišlo 3D a tiene → no 3D effect, no shadows Prišiel skomolený text → no text, no letters Prišla fotorealistická scéna → no photo, no background

5

Limit dĺžky promptu: odkedy je neefektívny

Prompt sa stáva neefektívnym vo chvíli, keď prejde z konkrétnosti do preťaženia informáciami. Pridávanie slov od istej hranice už výsledok nezlepšuje, iba ho zhoršuje.

30-40 slov funguje

200 slov model začína orezávať

250 slov a viac degradácia diverzity

• Degradácia diverzity (200-250 slov) Výskum PromptMoG ukázal, že prompty nad 250 slov vedú k tzv. diversity degradation: model generuje takmer identické výstupy naprieč rôznymi seedmi a ďalšie slová už neprinášajú žiadne zlepšenie.
• Orezanie tokenov (truncation) Pri promptoch nad 200 slov model slová za svojím tokenovým limitom jednoducho ignoruje a odstrihne.
• Preťaženie obmedzeniami (over-specifying) Priveľa detailov a pravidiel naraz vytvára zmätočné, preplnené alebo navzájom si odporujúce výsledky.
• Hromadenie kľúčových slov (keyword stuffing) Vrstvenie generických adjektív (beautiful, amazing, 8k, detailed) plytvá tokenmi a mätie model. Šesť dobre zvolených kľúčových slov má vyšší efekt ako tridsať generických výrazov.
• Sémantické presakovanie a vynechanie subjektu Pri neúmerne dlhom a zložitom prompte hrozí, že AI hlavný subjekt úplne vynechá (catastrophic neglect) alebo jeho vlastnosti prisúdi inému objektu.

6

Reverzné inžinierstvo pomocou /describe

1.Nahraj logo, ktoré sa ti páči, a napíš /describe. 2.Model ti vráti prompt, ktorým by taký obrázok vyrobil. 3.Vyber z neho slová pre štýl a farby, subjekt vymeň za svoj.

Slúži na pochopenie štýlu, nie na kopírovanie cudzieho loga.

7

Škálovateľnosť: favicon test

64 px 32 px 16 px - favicon

Zmenši logo na 16 × 16 px, teda na veľkosť ikony v záložke prehliadača. Logo Apple test prejde: aj v 16 px je tvar rozpoznateľný, pretože je to jeden plný obrys bez detailov. Ak sa tvoje logo v tejto veľkosti rozpadne, vyhoď detaily a tenké linky.

Krok 3 — HTTPS, DPH a základné nastavenia

• HTTPS. Vo Webnode je zapnuté automaticky. Na webhostingu ho zapni v paneli (položka SSL, Let's Encrypt), potom vo WordPresse Nastavenia → Všeobecné zmeň obe adresy na https://. Kontrola: otvor e-shop v novom okne, v adresnom riadku musí byť zámok bez varovania.
• DPH. Malá firma pod obratovým limitom nebýva platiteľom DPH — vtedy dane vôbec nezapínaj a ceny sú konečné. Ak je tvoja firma platiteľ, zapni dane (WooCommerce → Nastavenia → Všeobecné → Povoliť dane; vo Webnode v nastaveniach e-shopu) a nastav aktuálnu základnú sadzbu DPH na Slovensku — over si ju, sadzby sa menili. Rozhodnutie napíš do dokumentu.
• Ceny s DPH pre zákazníka. Spotrebiteľ musí vidieť konečnú cenu. Skontroluj, že e-shop zobrazuje ceny vrátane DPH.

Označ projekt ako študentský

Tvoj e-shop je verejný a nájde ho aj vyhľadávač. Aby skutočný návštevník nečakal tovar, daj do pätičky alebo hlavičky viditeľnú vetu: „Študentský projekt predmetu Elektronické obchodovanie — objednávky nie sú záväzné a nevybavujú sa." Vo WordPresse ako textový blok v pätičke (Vzhľad → Prispôsobiť alebo Editor), vo Webnode ako text v pätičke šablóny.

Krok 4 — Kontrola

Otvor e-shop v anonymnom okne prehliadača (nie prihlásený) a na mobile:

• adresa funguje, zámok HTTPS bez varovania,
• názov a logo firmy v hlavičke, titulok okna nie je „Just another WordPress site" ani názov šablóny,
• menu má Domov, Obchod, O nás, Kontakt a všetky odkazy vedú niekam,
• stránka Obchod existuje (zatiaľ prázdna alebo s ukážkovým produktom),
• veta o študentskom projekte je viditeľná,
• na mobile sa nič neprekrýva a menu sa dá otvoriť.

AI v tomto bloku

Čo jej zveriť: ladenie. Keď sa niečo nedá nájsť alebo vyskočí chyba, opíš AI presne, čo vidíš.

Staviam e-shop v [WooCommerce na WordPresse / Webnode]. V administrácii chcem [čo chceš urobiť], ale [čo sa deje — presná chybová hláška alebo popis]. Používam [názov témy/šablóny]. Poraď mi postup krok za krokom, ako to nájsť alebo opraviť, a povedz, čo si mám skontrolovať, ak to nepomôže.

Čo si overiť: názvy položiek menu sa v každej verzii systému líšia — AI opisuje verziu, ktorú „pozná". Ak položku nenájdeš, hľadaj podobný názov, nie presný. Pluginy, ktoré AI odporučí, over v oficiálnom katalógu WordPressu (počet inštalácií, posledná aktualizácia). A nikdy do AI nevkladaj heslá ani prístupové údaje k hostingu.

Ako je to v praxi

Firma, ktorá zakladá e-shop, si tento blok buď zaplatí, alebo prenajme. Agentúra alebo freelancer postaví WooCommerce e-shop na mieru za stovky až tisíce eur, k tomu platená téma (desiatky eur) a hosting. Platforma (Shoptet, Shopify, Webnode Business) to isté ponúka za mesačný paušál rádovo v desiatkach eur — bez inštalácie, s aktualizáciami a podporou v cene. Za čo firmy platia: nie za kliknutie „Inštalovať", ale za to, že to niekto udržiava — WordPress bez aktualizácií je do roka deravý a e-shop s výpadkom v sezóne stojí viac než rok hostingu.

Výstup bloku

• Živý e-shop na adrese z bloku 3: HTTPS, názov, logo, menu, stránky Domov, O nás, Kontakt a veta o študentskom projekte.
• Prístupové údaje uložené v správcovi hesiel (nie v dokumente projektu).
• Kapitola 4 dokumentu: použitý systém, postup založenia v 5–8 vetách, snímka obrazovky úvodnej stránky.

Kritérium hodnotenia: začínaš plniť Vytvorenie WWW stránok e-shopu (4 b) — hodnotí sa až hotový e-shop po bloku 7.