Blok 8 — Bannery

E-shop je hotový. Teraz sa o ňom musia dozvedieť ľudia. Prvá forma internetovej reklamy, ktorú vyskúšaš, je najstaršia a stále všadeprítomná: banner — obrázok s odkazom na cudzom webe. Vyrobíš dva v rôznych rozmeroch a potom urobíš to, čo malé firmy robia odjakživa: vymeníš si reklamu so spolužiakom. Jeho banner pôjde na tvoj e-shop, tvoj na jeho.

🎯 Čo sa v tomto bloku naučíš

• Štandardné rozmery bannerov a kam sa ktorý hodí.
• Čo má banner obsahovať, aby fungoval na 3 sekundy pohľadu.
• Vyrobiť banner zadarmo — v grafickom nástroji alebo s pomocou AI.
• Umiestniť cudzí banner s odkazom na svoj e-shop a odovzdať výmenu.

Krok 1 — Rozmery 📐

Bannery majú štandardné rozmery (podľa IAB), aby sa dali umiestniť do reklamných plôch kdekoľvek. Najpoužívanejšie:

Rozmer (px)	Názov	Kde sa používa
300 × 250	Medium Rectangle	v texte článkov, bočné panely — najrozšírenejší
728 × 90	Leaderboard	nad obsahom, pod hlavičkou
160 × 600	Wide Skyscraper	bočný panel
300 × 600	Half Page	bočný panel, veľmi viditeľný
320 × 50 / 320 × 100	Mobile Banner	mobil, nad alebo pod obsahom
970 × 250	Billboard	veľká plocha nad obsahom
336 × 280	Large Rectangle	v texte

Formáty: PNG alebo JPG (statický), GIF (animovaný — pozor, pôsobí lacno), v reálnych kampaniach HTML5. Veľkosť súboru do 150 kB — banner, ktorý sa načíta neskôr než stránka, nikto nevidí.

Tvoja úloha: dva bannery, každý iný rozmer — jeden „široký" (728 × 90 alebo 970 × 250), jeden „obdĺžnik" (300 × 250 alebo 300 × 600). Rozmery si vyberáš aj podľa toho, kam ti ich spolužiak umiestni.

Krok 2 — Čo má banner obsahovať 🎯

Návštevník banneru venuje asi 3 sekundy. Za ten čas musí pochopiť: kto (značka), čo (jedna ponuka) a čo má urobiť (výzva). Preto:

• Značka: názov alebo logo firmy, vždy.
• Jedna správa: jedna ponuka alebo jeden produkt — „Káva na filter z Etiópie", nie zoznam sortimentu.
• Výzva na akciu (CTA): tlačidlo alebo text „Pozrieť ponuku", „Kúpiť", „Zistiť viac".
• Vizuál: produkt alebo jeden silný obrázok, farby z tvojho e-shopu (blok 4).
• Čitateľnosť: veľké písmo, kontrast, max. 2 fonty. Na 300 × 250 sa nezmestí viac než 6–8 slov.

Časté chyby: príliš veľa textu, malé písmo, logo bez ponuky, ponuka bez značky, banner, ktorý vyzerá inak než e-shop, na ktorý vedie.

Krok 3 — Vyrob dva bannery 🖌️

Zadarmo to ide tromi cestami, kombinuj ich:

1. Canva (bezplatný účet): vytvor návrh s vlastným rozmerom v pixeloch, použi šablónu „banner" alebo prázdne plátno, vlož fotku produktu z bloku 5, text a tlačidlo, exportuj PNG. Druhý rozmer: automatická zmena veľkosti býva platená — vyrob ho ako nový návrh, prvky skopíruj.
2. Fotor alebo iný online editor — rovnaký princíp.
3. AI generovanie: nechaj AI (ChatGPT, Copilot, Gemini) vygenerovať pozadie alebo vizuál v požadovanom pomere strán; text a tlačidlo potom dopíš v Canve — AI text v obrázkoch často skomolí.

Skontroluj výsledný súbor: presný rozmer v pixeloch, veľkosť do 150 kB (Squoosh, TinyPNG), text čitateľný pri zobrazení v skutočnej veľkosti — nie priblížený v editore.

AI v tomto bloku

Čo jej zveriť: vizuál a nápady na text. Generuj pozadie bez textu, text pridaj sám.

Vygeneruj reklamný vizuál pre banner e-shopu [firma], ktorý predáva [produkt]. Štýl: [čistý, moderný / rustikálny / minimalistický], hlavné farby [farby e-shopu], pomer strán [na šírku 8:1 / obdĺžnik 6:5]. Na obrázku má byť [produkt v prostredí]. BEZ textu, bez loga, bez ľudí — text dopíšem sám. Nechaj vpravo voľnú plochu na nadpis a tlačidlo.

Čo si overiť: produkt na obrázku musí zodpovedať tomu, čo naozaj predávaš (AI vygeneruje „nejakú kávu", nie tvoju). Žiadne cudzie logá ani podobizne skutočných ľudí. Ak AI predsa vloží text, skontroluj každé písmeno alebo ho prekry. V dokumente uveď, ktoré časti sú generované.

Krok 4 — Výmena reklamy so spolužiakom 🔁

1. Vytvorte dvojice (pri nepárnom počte trojicu do kruhu).
2. Pošli spolužiakovi banner (súbor) a cieľovú adresu — ideálne priamo na produkt alebo kategóriu z banneru, nie na úvodnú stránku.
3. Umiestni jeho banner na svoj e-shop ako obrázok s odkazom, ktorý sa otvára v novej karte, s alternatívnym textom (názov jeho firmy). Vhodné miesta: pätička, bočný panel, sekcia „Odporúčame" na úvodnej stránke.
   • WooCommerce: Vzhľad → Prispôsobiť / Widgety alebo Editor → blok Obrázok → nastaviť odkaz → otvoriť v novej karte.
   • Webnode: pridaj blok obrázok, nahraj banner, nastav odkaz na adresu spolužiaka.
4. Over, že banner sa zobrazuje v správnej veľkosti (nie roztiahnutý), na mobile sa zmenší a preklik funguje.
5. Sprav snímku obrazovky svojej stránky s cudzím bannerom — ide do dokumentu.

Presne takto funguje výmenná (bartrová) reklama medzi malými firmami: kaviareň má banner kníhkupectva a naopak, nikto neplatí, obe získajú návštevníkov s podobným publikom.

Ako je to v praxi

Bannery firmy kupujú cez reklamné systémy (Google Ads a jeho obsahová sieť, programatické platformy) a platia za zobrazenia (CPM — cena za tisíc zobrazení, rádovo jednotky eur) alebo za kliky. Priemerná miera prekliku (CTR) bannerov je nízka — rádovo desatiny percenta — preto sa používajú hlavne na budovanie značky a retargeting (banner vidí ten, kto už bol na tvojom e-shope). Sadu bannerov vo všetkých rozmeroch vyrobí grafik za stovky eur; veľké značky ich majú v HTML5 s animáciou. Výmenná reklama, ktorú robíš dnes, je v praxi bežná medzi malými e-shopmi a blogmi — je zadarmo, ale funguje len s partnerom, ktorý má rovnakého zákazníka.

✅ Výstup bloku

• Dva bannery v dvoch rôznych štandardných rozmeroch — odovzdať v Moodle (zadanie Banner).
• Banner spolužiaka umiestnený na tvojom e-shope s funkčným odkazom; tvoj banner na jeho.
• Kapitola 5 dokumentu: bannery, zdôvodnenie rozmerov a správy, snímka obrazovky s cudzím bannerom, meno partnera výmeny.

Kritérium hodnotenia: prvá polovica Využitie foriem internetovej reklamy (4 b).