KREOBETON – Objednávkový web s konfigurátorom obkladov

Web obsahuje viacero vzájomne prepojených funkcií, ktoré zákazníka sprevádzajú od výberu obkladu až po dokončenie objednávky.

• Interaktívna 3D prezentácia – na úvodnej stránke si návštevník môže prezrieť reliéf jednotlivých obkladov, otáčať 3D modely a sledovať animované skladanie obkladových dielov.
• Produktový katalóg – výber bridlice, pieskovca a tehly s rôznymi farebnými prevedeniami, fotografiami, rozmermi a cenami.
• Konfigurátor plôch – výpočet výmery podľa rozmerov alebo pomocou interaktívneho náčrtu steny. Podporuje nepravidelné tvary a odpočítanie plochy okien.
• Viacero plôch v jednej objednávke – zákazník môže kombinovať rôzne obklady, samostatne upravovať jednotlivé plochy a nastaviť rezervu materiálu.
• Výpočet materiálu a ceny – automatické prepočty množstva obkladov, orientačného počtu kusov a balení, doplnkov a výslednej ceny.
• Rohovníky a doplnky – možnosť pridať rohovníky, ochranný náter alebo objednať samotné rohovníky bez nákupu obkladu.
• Výpočet dopravy – automatické priradenie okresu podľa zvolenej obce a výpočet ceny dopravy, prípadne výber osobného odberu.
• Online objednávka – rekapitulácia položiek, zadanie kontaktných a fakturačných údajov, potvrdenie objednávky a vystavenie predfaktúry s platobnými údajmi a QR kódom.
• Vlastná administrácia – správa produktov, farebných variantov, cien, fotografií a prijatých objednávok.

Súčasťou webu sú aj galérie realizácií, informačné stránky, kontaktný formulár a zákaznícke dokumenty.

Pri návrhu používateľského prostredia som sa sústredil na to, aby aj zložitejší proces výberu a výpočtu materiálu zostal pre návštevníka zrozumiteľný.

Web využíva responzívne rozloženie, prehľadné produktové karty, výrazné ovládacie prvky a jednoduchú navigáciu. Dizajn kombinuje fotografie skutočných výrobkov s interaktívnou 3D prezentáciou ich povrchov.

Objednávkový konfigurátor je rozdelený do troch hlavných krokov:

1. Plochy – zadanie alebo nakreslenie rozmerov.
2. Materiál – nastavenie rezervy, rohovníkov a doplnkov.
3. Doprava a objednávka – výpočet konečnej ceny a potvrdenie objednávky.

Zákazník môže počas konfigurácie upravovať svoje zadanie a priebežne kontrolovať vypočítané množstvá. Dôraz som kládol aj na použiteľnosť na mobilných zariadeniach, kde musí byť ovládanie náčrtu a formulárov pohodlné dotykom.

Jednou z hlavných technických priorít projektu KREOBETON bola vysoká rýchlosť načítavania, stabilita a bezpečnosť. Osobitnou výzvou bolo zachovať interaktívnu 3D prezentáciu výrobkov bez výrazného negatívneho vplyvu na výkon mobilných zariadení.

Výkon a optimalizácia

Pri vývoji som sa venoval najmä optimalizácii načítavania a vykresľovania jednotlivých častí webu.

• 3D modely a animácie – optimalizované načítavanie modelov, odložená inicializácia náročnejších častí scény a obmedzenie zbytočného vykresľovania.
• Optimalizácia obrázkov – responzívne rozmery, moderné obrazové formáty a efektívne načítavanie fotografií.
• CSS a JavaScript – optimalizácia kritických štýlov a načítavania skriptov s dôrazom na rýchle zobrazenie úvodného obsahu.
• Cache a HTTP/2 – nastavenie vyrovnávacej pamäte statických súborov a využitie protokolu HTTP/2 na produkčnom hostingu.
• Lokálne fonty – optimalizované načítavanie písiem bez závislosti od externých služieb.

Google PageSpeed Insights

Výsledkom optimalizácií je výborné hodnotenie v mobilnom teste Google PageSpeed Insights. Pri meraní 12. novembra 2026 dosiahol web nasledujúce výsledky:

• Výkon – 98/100
• Prístupnosť – 100/100
• Osvedčené postupy – 100/100
• SEO – 100/100

Ide o výsledok konkrétneho laboratórneho merania. Skóre sa môže pri ďalších meraniach meniť podľa podmienok testovania.

Bezpečnosť a technická kvalita

Okrem výkonu som sa zameral aj na zabezpečenie webu, ochranu používateľských údajov a kvalitu výsledného HTML kódu.

• HTTPS a HSTS – šifrovaná komunikácia a bezpečnostné pravidlá pre používanie HTTPS.
• Content Security Policy (CSP) – obmedzenie zdrojov, z ktorých môže stránka načítavať obsah.
• Bezpečnostné HTTP hlavičky – výsledné hodnotenie A v teste SecurityHeaders.
• OWASP ZAP – pasívna bezpečnostná kontrola webovej aplikácie.
• Validácia HTML – kontrola vybraných produkčných stránok nástrojom W3C bez zistených chýb a upozornení.
• Testovanie funkčnosti – automatizované testy a kontrola objednávkového procesu, formulárov a výpočtovej logiky.

Cieľom nebolo dosiahnuť vysoké hodnotenie iba v testovacích nástrojoch, ale vytvoriť rýchlu, stabilnú a bezpečnejšiu webovú aplikáciu, ktorá si zachová všetky interaktívne funkcie aj na mobilných zariadeniach.

Najväčšou výzvou projektu bolo prepojenie vizuálne jednoduchej stránky s pomerne rozsiahlym systémom výpočtov a obchodných pravidiel.

Interaktívne kreslenie plôch
Vytvoril som nástroj, ktorý umožňuje zákazníkovi nakresliť obrys steny, zadávať presné dĺžky hrán a odpočítať plochu okien. Výsledná výmera sa následne prenáša do výpočtu materiálu.

Prepojenie množstiev, cien a dopravy
Každý typ obkladu má vlastné rozmery, spôsob balenia a cenu. Systém musí správne spracovať aj kombinované objednávky, rezervu materiálu, samostatné rohovníky a dopravu podľa miesta doručenia.

3D prezentácia výrobkov
Samostatnou úlohou bolo vytvorenie a optimalizácia interaktívnej 3D scény s animovaným skladaním obkladových dielov. Dôležité bolo zachovať plynulé ovládanie a primeranú záťaž aj na mobilných zariadeniach.

Spoľahlivý objednávkový proces
Objednávkový systém prepája zákaznícke údaje, výpočty, dopravu, databázu a generovanie dokumentov. Pri vývoji bolo potrebné ošetriť nielen bežné objednávky, ale aj rôzne kombinácie produktov a neúplne vyplnené údaje.