Ak sa chcete stať odborníkom na webový dizajn alebo len niečomu nerozumiete, gratulujem—práve ste objavili absolútny klenot v ktorom sa všetko dozviete (aj s príkladmi).
Bez správneho porozumenia web designových pojmov ako „UX“, „UI“, alebo „responzívny dizajn“, je to, ako keby ste sa pokúšali navigovať v cudzom meste bez mapy.
V tomto článku vás prevedieme kľúčovými termínmi, ktoré potrebujete poznať, aby ste mohli komunikovať efektívne s dizajnérmi, vývojármi a klientami.
Spolu s odborníkom Tomášom Millerom, ktorý má rozsiahle skúsenosti v oblasti web dizajnu a marketingu, vám pomôžeme lepšie pochopiť tieto pojmy a ako ich aplikovať vo vašich projektoch od A po Z.
Poďme teda na to: použite klávesovú skratku Ctrl+F aby ste vyhľadali slovíčko!
#
301 presmerovanie – 301 Redirect
Vysvetlenie: Trvalé presmerovanie jednej URL adresy na inú, čo informuje vyhľadávače, že stránka bola trvalo presunutá.
Príklad: Ak presuniete stránku z www.example.com/old-page na www.example.com/new-page, použijete 301 presmerovanie, aby používatelia aj vyhľadávače boli automaticky presmerovaní na novú adresu.
404 chyba – 404 Error
Vysvetlenie: Chyba, ktorá sa zobrazí, keď server nemôže nájsť požadovanú stránku.
Príklad: Ak používateľ navštívi www.example.com/nonexistent-page, a vy túto stránku nemáte, zobrazí sa mu 404 chyba, pretože táto stránka jednoducho neexistuje.
A
A/B testovanie – A/B Testing
Vysvetlenie: Metóda porovnávania dvoch verzií webovej stránky alebo aplikácie, aby sa zistilo, ktorá z nich dosahuje lepšie výsledky.
Príklad: Testovanie dvoch rôznych variantov tlačidla „Kúpiť teraz“ na e-shope, aby sa zistilo, ktoré generuje viac predajov.
Adaptívny dizajn – Adaptive Design
Vysvetlenie: Dizajn, ktorý sa prispôsobuje rôznym veľkostiam obrazovky pomocou rôznych pevných rozložení.
Príklad: Webová stránka má odlišné verzie pre mobilné zariadenia, tablety a desktopové počítače, ktoré sa načítajú podľa zariadenia používateľa.
Adaptívne obrázky – Adaptive Images
Vysvetlenie: Obrázky, ktoré sa dynamicky menia podľa rozlíšenia obrazovky alebo typu zariadenia.
Príklad: Na mobilnom zariadení sa načíta menšia verzia obrázka, aby sa znížila doba načítania, zatiaľ čo na stolovom počítači sa zobrazí obrázok vo vyššom rozlíšení.
Alternatívny text – Alt Text
Vysvetlenie: Textový popis obrázka, ktorý sa zobrazí, ak sa obrázok nepodarí načítať, a je tiež dôležitý pre prístupnosť a SEO.
Príklad: Obrázok produktu na e-shope má alt text „čierne kožené topánky“, čo pomáha vyhľadávačom a používateľom so zrakovým postihnutím pochopiť obsah obrázka.
Analytika – Analytics
Vysvetlenie: Zber, spracovanie a analýza dát o návštevníkoch webovej stránky na účely zlepšenia výkonu a používateľskej skúsenosti.
Príklad: Google Analytics vám ukáže, koľko návštevníkov vaša stránka mala, odkiaľ prišli a ktoré stránky si najviac prezerali.
Aplikačné programovacie rozhranie – API (Application Programming Interface)
Vysvetlenie: Sada nástrojov a protokolov, ktoré umožňujú rôznym softvérom komunikovať medzi sebou.
Príklad: Webová stránka používa Google Maps API na zobrazenie mapy s polohou firmy priamo na stránke.
Asynchrónny JavaScript a XML – AJAX (Asynchronous JavaScript and XML)
Vysvetlenie: Technológia, ktorá umožňuje načítať dáta na webovej stránke bez nutnosti obnoviť celú stránku.
Príklad: Pri vyhľadávaní v e-shope sa výsledky zobrazujú okamžite bez nutnosti obnovenia stránky vďaka AJAX-u.
B
Back-end – Back-End
Vysvetlenie: Časť webovej stránky, ktorá spracováva dáta na serveri a nie je priamo viditeľná pre používateľov.
Príklad: Prihlásenie sa na webovú stránku odošle dáta na server (back-end), ktorý overí prihlasovacie údaje.
Banner – Banner
Vysvetlenie: Grafický prvok umiestnený na webovej stránke, ktorý slúži na propagáciu alebo upozornenie.
Príklad: Na úvodnej stránke webu je banner propagujúci zľavu 20 % na všetky produkty.
Bohaté úryvky – Rich Snippets
Vysvetlenie: Rozšírené informácie zobrazené vo výsledkoch vyhľadávania, ktoré obsahujú viac než len názov a URL stránky.
Príklad: Vo výsledkoch vyhľadávania sa okrem názvu stránky zobrazujú aj recenzie, ceny a dostupnosť produktu.
C
Cache prehliadača – Browser Cache
Vysvetlenie: Dočasné úložisko prehliadača, ktoré ukladá kópie navštívených stránok, aby sa rýchlejšie načítali pri ďalšej návšteve.
Príklad: Pri opätovnom návšteve tej istej webovej stránky sa obrázky načítajú rýchlejšie vďaka cache prehliadača.
Cieľová stránka – Landing Page
Vysvetlenie: Špeciálne navrhnutá stránka, kam návštevník prichádza po kliknutí na reklamu alebo odkaz, zameraná na dosiahnutie konkrétneho cieľa.
Príklad: Po kliknutí na reklamu v Google Ads sa návštevník dostane na stránku s ponukou zľavy, kde ho stránka motivuje k nákupu.
CMS s plochými súbormi – Flat File CMS
Vysvetlenie: Systém na správu obsahu, ktorý nevyžaduje databázu a všetky dáta ukladá do plochých súborov.
Príklad: Malý firemný web používa Flat File CMS na správu obsahu, čo zjednodušuje jeho inštaláciu a údržbu.
CMS (systém na správu obsahu) – Content Management System (CMS)
Vysvetlenie: Softvér, ktorý umožňuje ľahko spravovať obsah webových stránok bez nutnosti programovania.
Príklad: WordPress je populárny CMS, ktorý umožňuje užívateľom pridávať a upravovať články na blogu.
CSS mriežka – CSS Grid
Vysvetlenie: Layout systém v CSS, ktorý umožňuje vytvárať komplexné a flexibilné rozloženie stránok s použitím mriežok.
Príklad: Webová stránka používa CSS Grid na usporiadanie textu a obrázkov do viacerých stĺpcov a riadkov, čo zlepšuje vizuálnu štruktúru.
CSS Preprocesor – CSS Preprocessor
Vysvetlenie: Nástroj, ktorý rozširuje možnosti CSS a umožňuje používať funkcie ako premenné, funkcie a mixiny na zjednodušenie a zlepšenie písania štýlov.
Príklad: Sass je populárny CSS preprocesor, ktorý umožňuje používať premenné na definovanie farieb a písma, čo zjednodušuje údržbu štýlov.
CSS (kaskádové štýly) – CSS (Cascading Style Sheets)
Vysvetlenie: Jazyk používaný na opis vzhľadu a formátovania webových stránok, vrátane rozloženia, farieb a typografie.
Príklad: CSS pravidlá ako color: blue; a font-size: 16px; definujú farbu textu a veľkosť písma na webovej stránke.
D
Dátový tok – Bitrate
Vysvetlenie: Miera, ktorou sa dáta prenášajú cez internet alebo iné sieťové pripojenia, zvyčajne vyjadrená v kilobitoch alebo megabitoch za sekundu.
Príklad: Video streamovanie vo vysokom rozlíšení môže vyžadovať bitrate 5 Mbps na zabezpečenie plynulého prehrávania.
Dátami riadený dizajn – Data-Driven Design
Vysvetlenie: Dizajnový prístup založený na analýze dát a používateľských preferencií na optimalizáciu používateľského zážitku.
Príklad: Použitie analytických údajov o najpopulárnejších funkciách na webovej stránke na prepracovanie rozhrania, aby sa zlepšil výkon a používateľský zážitok.
Dizajnový šprint – Design Sprint
Vysvetlenie: Intenzívny, krátkodobý proces (zvyčajne päťdňový), ktorý pomáha tímom rýchlo vyvinúť a testovať nové nápady alebo prototypy.
Príklad: Tím strávi jeden týždeň vytváraním prototypu novej funkcie pre mobilnú aplikáciu a testovaním tohto prototypu s používateľmi.
Dizajn orientovaný na mobilné zariadenia – Mobile First Design
Vysvetlenie: Dizajnový prístup, ktorý sa najprv zameriava na vytváranie optimalizovaného rozhrania pre mobilné zariadenia pred rozšírením na desktopové verzie.
Príklad: Webová stránka sa najprv navrhuje pre smartfóny a až potom sa prispôsobuje pre väčšie obrazovky, aby sa zabezpečil optimálny zážitok na mobilných zariadeniach.
Dizajn orientovaný na užívateľa – User-Centered Design
Vysvetlenie: Dizajnový prístup, ktorý kladie dôraz na potreby a preferencie používateľov počas celého procesu návrhu a vývoja.
Príklad: Keďže väčšina používateľov drží ich smartphone v pravej ruke, dôležité tlačidlo by malo byť umiestnené v pravom dolnom rohu obrazovky.
Dlhochvostové kľúčové slovo – Long-Tail Keyword
Vysvetlenie: Toto nádherné pomenovanie v sebe ukrýva špecifické a často dlhšie kľúčové slová alebo frázy, ktoré sú menej hľadané, ale môžu prilákať cielených návštevníkov.
Príklad: Namiesto „topánky“ môže byť dlhý chvost „dámske zimné bežecké topánky“, čo priťahuje konkrétnych kupujúcich.
Docker – Docker
Vysvetlenie: Platforma na vytváranie, distribúciu a spúšťanie aplikácií v izolovaných prostrediach nazývaných kontajnery.
Príklad: Vývojár používa Docker na vytvorenie kontajnera, ktorý obsahuje všetky závislosti aplikácie, čo zabezpečuje, že aplikácia beží rovnako na rôznych počítačoch.
Dotaz na médium – Media Query
Vysvetlenie: Technika v CSS, ktorá umožňuje aplikovať rôzne štýly na základe charakteristík zariadenia, ako je jeho šírka alebo rozlíšenie.
Príklad: Použitie media query na zmenu veľkosti písma na mobilných zariadeniach, kde sa nastaví @media (max-width: 600px) { font-size: 14px; }.
Drôtený model – Wireframe
Vysvetlenie: Jednoduchý vizuálny návrh webovej stránky alebo aplikácie, ktorý zobrazuje základné rozloženie prvkov a štruktúru.
Príklad: Drôtený model pre webovú stránku môže zobraziť, kde bude umiestnený text, obrázky a navigačné prvky pred vytvorením finálneho dizajnu.
E
Em Dash – Emová pomlčka
Vysvetlenie: Dlhá pomlčka používaná na oddelenie častí textu alebo na vytvorenie dramatického efektu.
Príklad: „Študoval som dizajn—konkrétne webový dizajn a UX—a zistil som, že je to fascinujúce.“
F
Fallback – Záloha
Vysvetlenie: Mechanizmus, ktorý poskytuje alternatívne riešenie, keď primárna možnosť nie je dostupná alebo nefunguje.
Príklad: Ak sa nenačíta font zo servera, webová stránka použije systémové písmo ako zálohu.
Favicon – Ikonka webstránky
Vysvetlenie: Malý obrázok zobrazený v záložkách prehliadača a na paneli s adresou, ktorý reprezentuje webovú stránku.
Príklad: Malá ikona s logom firmy sa zobrazuje vedľa názvu webovej stránky na paneli s adresami prehliadača.
Framework – Rámec
Vysvetlenie: Štruktúra, ktorá poskytuje základné komponenty a nástroje na uľahčenie vývoja softvéru alebo webových aplikácií.
Príklad: “React” je populárny framework pre vývoj webových aplikácií, ktorý poskytuje nástroje a knižnice na vytváranie užívateľských rozhraní.
Funkčná vlajka – Feature Flag
Vysvetlenie: Mechanizmus, ktorý umožňuje aktivovať alebo deaktivovať funkcie v softvéri bez potreby nasadiť nový kód.
Príklad: Funkčné vlajky môžu byť použité na zapnutie novej funkcie na určitých používateľských účtoch pred jej úplným zavedením.
Full-Stack vývojár – Full-Stack Developer
Vysvetlenie: Vývojár, ktorý má zručnosti v práci so všetkými úrovňami vývoja aplikácií, od front-endu (užívateľské rozhranie) po back-end (server a databázy).
Príklad: Full-Stack vývojár môže vytvoriť webovú stránku od návrhu užívateľského rozhrania až po nastavenie databázy a serverových funkcií.
G
Geo-Targeting – Geocielenie
Vysvetlenie: Technika používaná na prispôsobenie obsahu alebo reklám na základe geografickej polohy používateľa.
Príklad: E-commerce stránka zobrazuje rôzne produkty v závislosti na tom, v akej krajine sa nachádza návštevník.
Gestalt princípy – Gestalt Principles
Vysvetlenie: Teória v psychológii, ktorá skúma, ako ľudia organizujú vizuálne podnety do zmysluplných celkov a vzorcov.
Príklad: Princíp blízkosti hovorí, že objekty, ktoré sú blízko seba, sú vnímané ako súvisiace, napríklad ikony v aplikácii, ktoré sú umiestnené blízko seba, sú chápané ako súvisiace funkcie.
Git – Github
Vysvetlenie: Systém na správu verzií, ktorý sleduje zmeny v kóde a umožňuje viacerým vývojárom spolupracovať na projekte.
Príklad: Git umožňuje tímu vývojárov sledovať a spravovať rôzne verzie kódu počas vývoja aplikácie.
Gzip kompresia – Gzip Compression
Vysvetlenie: Metóda kompresie súborov, ktorá zmenšuje ich veľkosť a znižuje čas načítania webových stránok.
Príklad: Použitie gzip na kompresiu CSS a JavaScript súborov môže výrazne znížiť čas potrebný na načítanie webovej stránky.
H
Hĺbka klikania – Click Depth
Vysvetlenie: Koľkokrát používateľ musí kliknúť aby sa dostal k požadovanému obsahu.
Príklad: Ak je potrebné prejsť cez päť rôznych stránok na webovej stránke, aby sa dostali k produktu, hĺbka klikania je päť. Čím menej, tým lepšie.
Hĺbka rolovania – Scroll Depth
Vysvetlenie: Miera, do akej používateľ prechádza nadol na stránke, zvyčajne meraná ako percento obsahu stránky, ktoré bolo zobrazené.
Príklad: Analytika ukazuje, že používatelia sa prejdú na 75 % dĺžky stránky, čo môže naznačovať, že obsah je dobre zaujímavý alebo je potrebné upraviť rozloženie.
Hraničný prípad – Edge Case
Vysvetlenie: Situácia, ktorá sa vyskytuje zriedka, ale môže spôsobiť problémy alebo chyby v systéme alebo aplikácii.
Príklad: Zápis veľkého množstva dát do formulára môže odhaliť problémy s kapacitou, ktoré sa zvyčajne neobjavujú pri bežnom používaní.
Hlavný Obrázok – Hero Image
Vysvetlenie: Veľký a často vizuálne pôsobivý obrázok, ktorý sa nachádza na vrchu webovej stránky a slúži na prilákanie pozornosti.
Príklad: Na úvodnej stránke portfólia je veľký obrázok s vysokým rozlíšením, ktorý zobrazuje prácu dizajnéra, čím upúta návštevníkov.
Hlavná Sekcia – Hero Section
Vysvetlenie: Hlavná sekcia na vrchu webovej stránky, ktorá často obsahuje hero image a hlavné texty alebo výzvy k akcii.
Príklad: Sekcia s veľkým obrázkom, nadpisom a tlačidlom „Zistite viac“ na úvodnej stránke startupu, ktorá návštevníkom predstavuje produkt.
Hierarchia navigácie – Navigation Hierarchy
Vysvetlenie: Struktúra, ktorá určuje, ako sú navigačné prvky organizované a aký je ich vzťah na webovej stránke, aby sa zabezpečila jednoduchá orientácia.
Príklad: Hlavná navigačná lišta s kategóriami ako „Produkty“, „O nás“ a „Kontakt“ a podkategórie zobrazené v rozbaľovacom menu.
HTML (Hypertextový značkovací jazyk) – HTML (Hypertext Markup Language)
Vysvetlenie: Základný jazyk používaný na tvorbu a štruktúrovanie webových stránok.
Príklad: HTML kód ako <h1>Najnovšie produkty</h1> sa používa na označenie hlavného nadpisu na webovej stránke.
HTTPS (Bezpečný protokol prenosu hypertextu) – HTTPS (Hypertext Transfer Protocol Secure)
Vysvetlenie: Rozšírenie HTTP, ktoré zabezpečuje šifrovanie dát prenášaných medzi webovým serverom a prehliadačom.
Príklad: Webová stránka začínajúca na https:// zabezpečuje, že všetky osobné informácie zadané používateľom sú šifrované.
Hybridná aplikácia – Hybrid App
Vysvetlenie: Aplikácia, ktorá kombinuje prvky natívnej aplikácie a webovej aplikácie, často vytvorená s použitím webových technológií a nasadená na rôznych platformách.
Príklad: Aplikácia, ktorá je vyvinutá pomocou technológií ako Cordova alebo React Native a môže byť nainštalovaná na Android a iOS zariadeniach.
I
Ikonografia – Iconography
Vysvetlenie: Štúdium a používanie ikon a symbolov na komunikáciu s používateľmi a zlepšenie vizuálnej navigácie.
Príklad: Používanie ikon ako „domček“ pre domovskú stránku alebo „ozubené koleso“ pre nastavenia na webovej stránke.
Informačná architektúra – Information Architecture (IA)
Vysvetlenie: Proces organizovania a štruktúrovania informácií na webovej stránke alebo v aplikácii, aby sa používateľom ľahko navigovalo a našlo požadované informácie.
Príklad: Vytvorenie sitemap, ktorá zobrazuje hierarchiu a vzťahy medzi stránkami a sekciami na webovej stránke.
Interakčný dizajn – Interaction Design (IxD)
Vysvetlenie: Dizajnový proces, ktorý sa zameriava na vytváranie efektívnych a príjemných interakcií medzi používateľmi a produktom.
Príklad: Navrhovanie užívateľských rozhraní, ktoré reagujú na kliknutia a pohyby myši s jasnou vizuálnou odozvou.
Intranet – Intranet
Vysvetlenie: Interná sieť používaná v rámci organizácie na zdieľanie informácií a komunikáciu medzi zamestnancami.
Príklad: Spoločnosť používa intranet na zdieľanie interných správ, dokumentov a nástrojov medzi zamestnancami.
J
JavaScript – JavaScript
Vysvetlenie: Programovací jazyk používaný na vytváranie interaktívnych prvkov na webových stránkach, ako sú animácie, dynamické formuláre alebo aktualizácie obsahu bez načítania stránky.
Príklad: JavaScript sa používa na vytvorenie vyskakovacieho okna (popup) pri kliknutí na tlačidlo „Prihlásiť sa“.
JavaScriptový rámec – JavaScript Framework
Vysvetlenie: Knižnica alebo nástrojová sada, ktorá zjednodušuje vývoj aplikácií v JavaScripte tým, že poskytuje preddefinované šablóny a funkcie.
Príklad: Angular a React sú populárne JavaScriptové rámce používané na tvorbu dynamických webových aplikácií.
JQuery – JQuery
Vysvetlenie: Knižnica JavaScriptu, ktorá zjednodušuje manipuláciu s HTML dokumentmi, spracovanie udalostí a vytváranie animácií.
Príklad: Pomocou JQuery môžete jednoducho zmeniť farbu všetkých nadpisov na stránke kliknutím na tlačidlo.
K
Kanonická URL – Canonical URL
Vysvetlenie: URL, ktorá je označená ako preferovaná verzia stránky, aby sa zabránilo duplicitnému obsahu na viacerých URL adresách.
Príklad: Ak má webová stránka rovnaký obsah na viacerých URL adresách, použitie kanonickej URL pomáha vyhľadávačom pochopiť, ktorá stránka by mala byť indexovaná.
Kategorizácia kariet – Card Sorting
Vysvetlenie: Metóda používaná na organizovanie informácií do kategórií prostredníctvom triedenia kariet s názvami alebo popismi.
Príklad: Pri navrhovaní štruktúry webovej stránky môžu používatelia triediť karty s rôznymi témami, aby navrhli optimálne rozloženie menu.
Kaskádové štýly – CSS (Cascading Style Sheets)
Vysvetlenie: Jazyk používaný na určovanie vzhľadu a formátovania webových stránok, ako je farba, rozloženie, písma a ďalšie vizuálne aspekty.
Príklad: CSS môže zmeniť farbu textu nadpisu na modrú pomocou pravidla h1 { color: blue; }.
Kľúčová animácia – Keyframe Animation
Vysvetlenie: Typ animácie v CSS alebo JavaScripte, kde sú definované určité body (kľúčové snímky) pre prechody medzi nimi.
Príklad: Pomocou kľúčovej animácie môžete nastaviť pohyb obrázka zľava doprava počas 5 sekúnd.
Kľúčový ukazovateľ výkonnosti – Key Performance Indicator (KPI)
Vysvetlenie: Metrika, ktorá sa používa na hodnotenie úspešnosti konkrétnych cieľov alebo procesov v organizácii.
Príklad: Počet konverzií na webovej stránke môže byť kľúčovým ukazovateľom výkonnosti pre marketingovú kampaň.
Kotviaci text – Anchor Text
Vysvetlenie: Text v rámci hypertextového odkazu, ktorý je viditeľný pre používateľov a klikateľný na prechod na inú stránku.
Príklad: Veta „Prečítajte si viac o SEO“ obsahuje kotviaci text „SEO“, ktorý odkazuje na stránku s informáciami o optimalizácii pre vyhľadávače.
Kompatibilita medzi prehliadačmi – Cross-Browser Compatibility
Vysvetlenie: Schopnosť webovej stránky alebo aplikácie správne fungovať vo viacerých webových prehliadačoch.
Príklad: Webová stránka je testovaná a funguje rovnako dobre v prehliadačoch Chrome, Firefox, Safari a Edge.
Kliková mapa – Click Map
Vysvetlenie: Vizualizácia zobrazujúca, kde používateľa najčastejšie klikajú na webovej stránke, pomáha optimalizovať jej rozloženie.
Príklad: Kliková mapa ukazuje, že väčšina používateľov kliká na hlavný obrázok a výzvu k akcii (CTA) v pravom hornom rohu stránky.
L
Lokalizácia – Localization
Vysvetlenie: Proces prispôsobenia webovej stránky alebo aplikácie pre konkrétny jazyk, kultúru alebo geografickú oblasť.
Príklad: Lokalizácia aplikácie zahŕňa preklad textov do slovenčiny a prispôsobenie formátov dátumu a času pre Slovensko.
M
Mapa stránky – Sitemap
Vysvetlenie: Štruktúrovaný zoznam stránok na webovej stránke, ktorý pomáha používateľom a vyhľadávačom nájsť konkrétny obsah.
Príklad: XML súbor so sitemapou je odoslaný do Google Search Console, aby uľahčil indexovanie stránok vyhľadávačom.
Mediálny objekt – Media Object
Vysvetlenie: Dizajnový vzor používaný na usporiadanie obrázkov a textu vedľa seba, často používaný v článkoch alebo blogoch.
Príklad: V článku je obrázok autora umiestnený vedľa textu úvodu, čo je príklad mediálneho objektu.
Mega Menu – Mega menu
Vysvetlenie: Rozbaľovacie menu, ktoré zobrazuje veľké množstvo možností a podkategórií naraz, často s použitím obrázkov a viacerých úrovní.
Príklad: E-shop s oblečením používa mega menu, kde pri prechode myšou nad „Muži“ sa zobrazia kategórie ako tričká, nohavice, topánky a doplnky.
Miera konverzie – Conversion Rate
Vysvetlenie: Percento návštevníkov webovej stránky, ktorí vykonajú požadovanú akciu, napríklad nákup alebo registráciu.
Príklad: Ak 100 ľudí navštívi stránku a 5 z nich si niečo kúpi, miera konverzie je 5 %.
Miera odskokov – Bounce Rate
Vysvetlenie: Percento návštevníkov, ktorí opustia webovú stránku bez interakcie alebo prechodu na inú stránku.
Príklad: Stránka s vysokou mierou odskokov môže naznačovať, že obsah je nerelevantný, nekvalitný alebo sa načítava príliš pomaly.
Miera zapojenia – Engagement Rate
Vysvetlenie: Metrika, ktorá meria úroveň interakcie používateľov s obsahom, ako sú komentáre, zdieľania a lajky.
Príklad: Príspevok na sociálnych sieťach s vysokou mierou zapojenia má veľa lajkov, zdieľaní a komentárov, čo naznačuje, že je pre publikum zaujímavý.
Mikrointerakcie – Microinteractions
Vysvetlenie: Malé, často animované reakcie alebo interakcie na webovej stránke, ktoré slúžia na zlepšenie užívateľského zážitku.
Príklad: Po kliknutí na tlačidlo „Páči sa mi“ na sociálnej sieti sa zobrazí animácia srdiečka, čo je príklad mikrointerakcie.
Mikrotexty – Microcopy
Vysvetlenie: Krátke texty alebo frázy na webovej stránke alebo v aplikácii, ktoré poskytujú používateľom pokyny alebo vysvetlenia.
Príklad: Text „Prejsť do obchodu“ na tlačítku je nesmierne dôležitý a je skvelým príkladom mikrotextu.
Multiplatformový – Cross-Platform
Vysvetlenie: Softvér alebo aplikácia, ktorá funguje na viacerých operačných systémoch alebo zariadeniach.
Príklad: Hra, ktorá je dostupná pre Windows, MacOS aj Linux, je multiplatformová.
MŽP (Minimálne životaschopný produkt) – MVP (Minimum Viable Product)
Vysvetlenie: Prvá verzia produktu s minimálnymi funkciami, ktoré sú potrebné na to, aby bol produkt použiteľný pre zákazníkov.
Príklad: Aplikácia na doručovanie jedla, ktorá v prvej verzii umožňuje iba základné objednávanie a platbu, je MVP.
N
Návratnosť výdavkov na reklamu – Return On Ad Spend (ROAS)
Vysvetlenie: Metrika, ktorá meria efektívnosť reklamy tým, že porovnáva príjmy z reklamy s nákladmi na jej zobrazenie.
Príklad: Ak ste minuli 100 eur na reklamu a získali z nej 400 eur, váš ROAS je 4:1.
Návrh – Mockup
Vysvetlenie: Vizuálny model alebo koncept webovej stránky alebo aplikácie, ktorý zobrazuje rozloženie a dizajn pred jeho implementáciou.
Príklad: Pred kódovaním nového e-shopu dizajnér vytvoril mockup, aby klient videl, ako bude stránka vyzerať.
Názvový priestor – Namespace
Vysvetlenie: Systém na rozlišovanie rôznych identifikátorov v kóde, aby sa predišlo konfliktom medzi rovnakými názvami.
Príklad: V XML sú rôzne názvové priestory použité na rozlíšenie rovnakých názvov značiek s rôznym obsahom.
Navigačné omrvinky – Breadcrumbs
Vysvetlenie: Navigačný prvok na webovej stránke, ktorý ukazuje používateľovi jeho aktuálnu polohu v štruktúre stránky.
Príklad: Na e-shope je v hornej časti zobrazená navigácia „Domov > Kategória > Produkt“, čo sú navigačné stopy.
Navigácia mimo plátna – Off-Canvas Navigation
Vysvetlenie: Typ navigačného menu, ktoré sa skryje mimo obrazovku a zobrazí sa po interakcii, napríklad po kliknutí na tlačidlo.
Príklad: Na mobilnej verzii stránky sa hlavné menu objaví po kliknutí na ikonu hamburgera, čo je príklad navigácie mimo plátna.
Navigačný panel – Navigation Bar
Vysvetlenie: Horizontálny alebo vertikálny panel na webovej stránke, ktorý obsahuje odkazy na hlavné sekcie stránky.
Príklad: V hornej časti webovej stránky je navigačný panel s odkazmi na sekcie ako „O nás“, „Služby“ a „Kontakt“.
Nekonečné rolovanie – Infinite scroll
Vysvetlenie: Funkcia, ktorá umožňuje automatické načítanie nového obsahu, keď používateľ posúva stránku nadol, čím sa eliminujú potreby preklikávať sa na ďalšie stránky.
Príklad: Sociálne siete ako Facebook používajú nekonečné rolovanie, kde sa nové príspevky načítajú, keď používateľ posúva stránku.
Noindex značka – Noindex tag
Vysvetlenie: HTML značka, ktorá zabraňuje vyhľadávačom indexovať stránku, aby sa nezobrazovala vo výsledkoch vyhľadávania.
Príklad: Ak nechcete, aby bola stránka „Ochrana osobných údajov“ dostupná vo vyhľadávačoch, použijete noindex značku.
O
Otvorený zdroj – Open Source
Vysvetlenie: Softvér, ktorého zdrojový kód je verejne dostupný a môže byť upravovaný a distribuovaný komunitou.
Príklad: WordPress je populárny open-source systém na správu obsahu, ktorý môžu používatelia a vývojári prispôsobiť podľa svojich potrieb.
Optimalizácia cieľovej stránky – Landing Page Optimization
Vysvetlenie: Proces úprav a testovania cieľovej stránky s cieľom zlepšiť jej výkon a konverzné miery.
Príklad: Zmena nadpisu a výzvy k akcii na cieľovej stránke viedla k zvýšeniu počtu registrácií o 20 %.
Optimalizácia miery konverzie – Conversion Rate Optimization (CRO)
Vysvetlenie: Proces zlepšovania webovej stránky alebo aplikácie na zvýšenie miery konverzie, teda pomeru návštevníkov, ktorí vykonajú požadovanú akciu.
Príklad: Testovanie rôznych dizajnov tlačidiel na nákupnej stránke (A/B testing) s cieľom zvýšiť počet nákupov je súčasťou CRO.
Optimalizácia pre vyhľadávače – SEO (Search Engine Optimization)
Vysvetlenie: Súbor techník a postupov, ktoré zlepšujú viditeľnosť webovej stránky vo vyhľadávačoch a pomáhajú dosiahnuť vyššie pozície vo výsledkoch vyhľadávania (ranking).
Príklad: Vylepšenie meta popisov, zrýchlenie stránky a písanie kvalitného blogu s použitím relevantných kľúčových slov pomáha zvýšiť organickú návštevnosť.
Optimalizácia výkonu – Performance Optimization
Vysvetlenie: Proces zlepšovania rýchlosti načítania a celkovej výkonnosti webovej stránky alebo aplikácie.
Príklad: Kompresia obrázkov a využitie caching techník na zrýchlenie načítania stránky sú kroky optimalizácie výkonu.
P
Paralaxné rolovanie – Parallax Scrolling
Vysvetlenie: Dizajnová technika, pri ktorej sa pozadie webovej stránky pohybuje pomalšie ako obsah v popredí, čím vzniká efekt hĺbky.
Príklad: Na stránke s príbehom sa pozadie s horami posúva pomalšie než text, čo vytvára 3D efekt.
Pixelovo presné – Pixel Perfect
Vysvetlenie: Dizajnérsky prístup, ktorý zaisťuje, že každý prvok na stránke alebo aplikácii je vykreslený presne podľa návrhu, s dokonalou presnosťou pixelov.
Príklad: Počas vývoja webovej stránky sa uistíme, že logá, obrázky a texty sú zarovnané presne podľa návrhu, aby boli „pixelovo presné.“
Patobná stena – Paywall
Vysvetlenie: Systém, ktorý obmedzuje prístup k obsahu na webovej stránke, pričom používatelia musia zaplatiť za plný prístup.
Príklad: Novinový web umožňuje prečítať si tri články zdarma, ale potom vyžaduje predplatné, čo je príklad paywallu.
Plávajúce akčné tlačidlo – Floating Action Button (FAB)
Vysvetlenie: Tlačidlo, ktoré je neustále viditeľné na obrazovke, obyčajne v dolnom rohu, a poskytuje rýchly prístup k hlavnej akcii aplikácie alebo stránky.
Príklad: V aplikácii na správu úloh môže plávajúce akčné tlačidlo umožniť používateľovi rýchlo pridať novú úlohu.
Plochý dizajn – Flat Design
Vysvetlenie: Minimalistický dizajnérsky štýl, ktorý sa vyhýba použitiu textúr, tieňov a 3D efektov, sústreďujúc sa na čisté línie a jednoduché tvary.
Príklad: Dizajn domovskej stránky bez tieňov, s jasnými farbami a jednoduchými ikonami je príkladom plochého dizajnu.
Prístupnosť webu – Web Accessibility
Vysvetlenie: Proces a princípy, ktoré zabezpečujú, že všetci používatelia, vrátane osôb so zdravotným postihnutím, môžu plne interagovať s webovými stránkami.
Príklad: Webová stránka je optimalizovaná pre prístupnosť tým, že obsahuje titulky pre videá a možnosti navigácie cez klávesnicu.
Progresívna webová aplikácia – Progressive Web App (PWA)
Vysvetlenie: Webová aplikácia, ktorá ponúka používateľom zážitok podobný natívnej aplikácii, vrátane offline prístupu a rýchleho načítania.
Príklad: Webová stránka, ktorá funguje offline a má ikonu na ploche mobilného zariadenia, je príkladom progresívnej webovej aplikácie.
Prototyp – Prototype
Vysvetlenie: Skorá verzia produktu, ktorá slúži na testovanie nápadov a konceptov pred finálnym vývojom.
Príklad: Klikateľný prototyp webovej stránky vytvorený v nástroji ako Figma umožňuje klientovi otestovať funkcionalitu pred kódovaním.
Prepojené dáta – Linked Data
Vysvetlenie: Metodika na prepojenie a zdieľanie dát cez web, kde sú dáta prepojené pomocou štandardov, aby boli jednoducho dostupné a prepojiteľné.
Príklad: Zbierky kníh v online knižniciach, ktoré sú prepojené pomocou prepojených dát, umožňujú ľahké vyhľadávanie a zdieľanie informácií.
Preplnenosť funkciami – Feature Creep
Vysvetlenie: Tendencia pridávať nové funkcie do projektu, čo môže viesť k jeho komplikovaniu a prekročeniu pôvodného rozsahu.
Príklad: Počas vývoja aplikácie sa neustále pridávajú nové funkcie, čo zvyšuje zložitosti a predlžuje čas potrebný na dokončenie.
Push notifikácia – Push Notification
Vysvetlenie: Krátke upozornenie, ktoré sa zobrazí na obrazovke používateľa, aj keď nie je aktívne prihlásený do aplikácie alebo webovej stránky.
Príklad: E-shop môže posielať push notifikácie o zľavách priamo na mobilné zariadenie používateľa, aj keď aplikácia nie je spustená.
R
Recaptcha – Recaptcha
Vysvetlenie: Bezpečnostný nástroj, ktorý pomáha rozlíšiť, či je používateľom stránky človek alebo bot, často použitím testov, ako je identifikácia obrázkov.
Príklad: Pred odoslaním formulára na webovej stránke je používateľ požiadaný o označenie všetkých obrázkov so semaformi, čo je príkladom Recaptcha.
Responzívne obrázky – Responsive Images
Vysvetlenie: Obrázky, ktoré sa automaticky prispôsobujú rôznym veľkostiam obrazoviek a rozlíšeniam, aby zabezpečili optimálne zobrazenie na všetkých zariadeniach.
Príklad: Obrázok na webovej stránke, ktorý sa na mobilnom zariadení zmenší, aby sa prispôsobil menšej obrazovke, je responzívny obrázok.
Responzívny dizajn – Responsive Design
Vysvetlenie: Dizajnérsky prístup, ktorý zabezpečuje, že webové stránky sa automaticky prispôsobia rôznym veľkostiam a typom obrazoviek.
Príklad: Webová stránka, ktorá sa rovnako dobre zobrazuje na počítači, tablete aj smartfóne, využíva responzívny dizajn.
Rámec – Framework
Vysvetlenie: Štruktúra alebo základná kostra, ktorá uľahčuje vývoj softvéru tým, že poskytuje základné funkcie a usmernenia.
Príklad: Angular je populárny rámec pre vývoj webových aplikácií, ktorý vývojárom poskytuje hotové nástroje a vzory.
Reťazec požiadavky – Query String
Vysvetlenie: Časť URL adresy, ktorá obsahuje dáta odosielané na server, zvyčajne v pároch „kľúč=hodnota“.
Príklad: V URL „www.example.com/search?query=webdesign“ je „query=webdesign“ reťazec dotazu, ktorý server použije na spracovanie vyhľadávania.
Režim údržby – Maintenance Mode
Vysvetlenie: Stav, kedy je webová stránka dočasne mimo prevádzky z dôvodu aktualizácií alebo údržby, zvyčajne s oznamom používateľom.
Príklad: Keď sa na e-shope vykonáva údržba, stránka zobrazí oznam „Stránka je momentálne v údržbe. Skúste to neskôr.“
Rýchle mobilné stránky – AMP (Accelerated Mobile Pages)
Vysvetlenie: Technológia, ktorá umožňuje rýchle načítanie webových stránok na mobilných zariadeniach optimalizáciou kódu a obmedzením použitia skriptov.
Príklad: Článok na spravodajskom webe, ktorý sa načíta takmer okamžite na mobilnom telefóne, je príkladom AMP stránky.
S
SEO (Optimalizácia pre vyhľadávače) – SEO (Search Engine Optimization)
Vysvetlenie: Proces úpravy a optimalizácie webovej stránky tak, aby sa zlepšila jej viditeľnosť vo vyhľadávačoch a prilákala viac návštevníkov.
Príklad: Použitie kľúčových slov, optimalizácia obrázkov a budovanie spätných odkazov sú techniky SEO, ktoré pomáhajú zlepšiť pozíciu vo vyhľadávaní.
Sémantické HTML – Semantic HTML
Vysvetlenie: Používanie HTML značiek, ktoré majú zmysluplné názvy, aby sa zlepšila čitateľnosť a prístupnosť kódu pre vyhľadávače a používateľov.
Príklad: Použitie značky <article> na označenie hlavného obsahu článku namiesto všeobecnej <div> značky je príkladom sémantického HTML.
SSL certifikát – SSL Certificate
Vysvetlenie: Digitálny certifikát, ktorý zabezpečuje šifrované spojenie medzi webovým serverom a prehliadačom, čím chráni citlivé dáta prenášané cez internet.
Príklad: Webová stránka s URL začínajúcou „https://“ má SSL certifikát, ktorý zaisťuje bezpečný prenos informácií, napríklad pri platbách.
Svetelná Škatuľka – Lightbox
Vysvetlenie: Technika zobrazenia obrázkov alebo videí na webovej stránke, kde sa obsah zobrazí v popredí a pozadie sa stmaví.
Príklad: Po kliknutí na obrázok produktu sa otvorí lightbox, ktorý zobrazí obrázok vo väčšom formáte, pričom zvyšok stránky sa stmaví.
Systém na správu obsahu – CMS (Content Management System)
Vysvetlenie: Softvér, ktorý umožňuje jednoduchú správu obsahu webových stránok bez potreby znalostí programovania.
Príklad: WordPress je populárny CMS, ktorý umožňuje užívateľom pridávať a upravovať obsah na svojich webových stránkach pomocou jednoduchého rozhrania.
Š
Šírenie DNS – DNS Propagation
Vysvetlenie: Proces, pri ktorom sa aktualizácie v DNS záznamoch šíria po celom internete, aby nové alebo zmenené doménové informácie boli prístupné všade.
Príklad: Po zmene DNS záznamov môže trvať až 48 hodín, kým sa šírenie DNS dokončí a webová stránka je dostupná z nového servera.
Štýlový sprievodca – Style Guide
Vysvetlenie: Dokument alebo návod, ktorý definuje vizuálne a obsahové pravidlá pre dizajn a komunikáciu na webovej stránke alebo v aplikácii.
Príklad: Štýlový sprievodca pre značku obsahuje pravidlá pre použitie loga, farebnú paletu a typografiu, ktoré musia byť dodržané na všetkých marketingových materiáloch.
T
Tmavý režim – Dark Mode
Vysvetlenie: Nastavenie užívateľského rozhrania, ktoré používa tmavé farebné schémy na zníženie únavy očí a spotreby energie na zariadeniach s OLED displejmi.
Príklad: Mnohé mobilné aplikácie ponúkajú možnosť prepnutia na tmavý režim, ktorý zmení pozadie aplikácie na čierne alebo tmavošedé.
Tvrdé obnovenie – Hard Refresh
Vysvetlenie: Proces, ktorý núti webový prehliadač ignorovať uloženú verziu stránky v cache a načítať najnovšiu verziu priamo zo servera.
Príklad: Ak sa zmení obsah webovej stránky, ale prehliadač stále zobrazuje starú verziu, tvrdé obnovenie stránky (napr. stlačením Ctrl + F5) načíta aktuálne dáta.
Typografia – Typography
Vysvetlenie: Umenie a technika usporiadania písma, ktoré zahŕňa výber fontov, veľkostí, rozstupov a ďalších aspektov, aby bol text čitateľný a vizuálne príťažlivý.
Príklad: Webová stránka so starostlivo vybranými fontmi a správne nastavenými riadkovými rozstupmi zlepšuje čitateľnosť a estetiku obsahu.
U
Užívateľská cesta – User Journey
Vysvetlenie: Celkový priebeh a skúsenosti používateľa od prvej interakcie s produktom alebo službou až po splnenie cieľa, napríklad dokončenie nákupu.
Príklad: Užívateľská cesta na e-shope môže začať vyhľadávaním produktu, pokračovať prehliadaním recenzií a skončiť dokončením objednávky.
Užívateľský zážitok – User Experience (UX)
Vysvetlenie: Celkový dojem a spokojnosť používateľa pri interakcii s produktom, webom alebo aplikáciou, vrátane jednoduchosti použitia a estetického zážitku.
Príklad: Webová stránka, ktorá sa ľahko naviguje, rýchlo sa načítava a má príjemné vizuálne prvky, poskytuje pozitívnu užívateľskú skúsenosť.
Užívateľský tok – User Flow
Vysvetlenie: Sled krokov, ktoré používateľ prejde pri plnení úlohy na webovej stránke alebo v aplikácii, ako napríklad registrácia alebo nákup.
Príklad: Užívateľský tok pri registrácii na webovú stránku môže zahŕňať vyplnenie formulára, potvrdenie emailu a prihlásenie sa do systému.
Užívateľské rozhranie – UI (User Interface)
Vysvetlenie: Vizuálna časť softvéru alebo webovej stránky, s ktorou používateľ priamo interaguje, vrátane tlačidiel, ikon, menu a formulárov.
Príklad: Moderné užívateľské rozhranie aplikácie na správu úloh obsahuje intuitívne ikony, prehľadné menu a jasné tlačidlá, ktoré zjednodušujú používanie.
V
Vizuálna hierarchia – Visual Hierarchy
Vysvetlenie: Usporiadanie a štruktúra vizuálnych prvkov na stránke tak, aby používateľ ľahko pochopil, ktoré informácie sú najdôležitejšie.
Príklad: Nadpisy väčším písmom a kontrastnými farbami na webovej stránke vedú oči používateľa k najdôležitejšiemu obsahu, čím sa vytvára vizuálna hierarchia.
Vlastné písma – Custom Fonts
Vysvetlenie: Fonty, ktoré sú špeciálne vybrané alebo vytvorené pre určitý projekt, aby dodali webovej stránke alebo aplikácii unikátny vzhľad a pocit.
Príklad: Použitie vlastného písma v logu alebo na titulnej stránke webovej stránky môže zlepšiť značkovú identitu a odlíšiť stránku od konkurencie.
Výzva k akcii – Call to Action (CTA)
Vysvetlenie: Prvok na stránke, ktorý motivuje používateľa k určitej akcii, ako je kliknutie na tlačidlo, vyplnenie formulára alebo nákup produktu.
Príklad: Tlačidlo „Kúpiť teraz“ na produktovej stránke je príkladom výzvy k akcii, ktorá má presvedčiť používateľa, aby okamžite dokončil nákup.
Výzva na akciu – Callout
Vysvetlenie: Zvýraznený text alebo grafický prvok na stránke, ktorý upozorňuje používateľa na dôležitú informáciu alebo sekciu.
Príklad: Box s textom „Obmedzená ponuka – Zľava 50 %“ na domovskej stránke je príkladom výzvy na akciu, ktorá priťahuje pozornosť používateľov.
Z
Zobrazenie stránky – Pageview
Vysvetlenie: Počet zobrazení konkrétnej webovej stránky alebo stránky počas určitého časového obdobia, ako je merané analytickými nástrojmi.
Príklad: Ak užívateľ načíta domovskú stránku, produktovú stránku a kontaktnú stránku, každé načítanie sa počíta ako jedno zobrazenie stránky.
Zrýchlené mobilné stránky – AMP (Accelerated Mobile Pages)
Vysvetlenie: Špeciálny typ webových stránok optimalizovaných pre rýchle načítanie na mobilných zariadeniach pomocou zjednodušeného HTML a CSS.
Príklad: Spravodajská webová stránka, ktorá načítava články takmer okamžite na mobilných zariadeniach, používa technológiu AMP.
