Zadanie
Čo klient chcel
- Rýchly web, ktorý pôsobí rovnako prémiovo ako salón
- Online rezerváciu, ktorá ponúkne len naozaj voľné termíny
- Zachovať kontá klientok a históriu termínov zo starého systému
- Prehľad zákaziek pre zamestnancov aj správcu salónu
- Funkčné formuláre, cenník a lepšiu viditeľnosť v Google aj v AI
Výzva
S čím klient prišiel
Runway je salón krásy v Starom Meste v Bratislave, ktorý od roku 2017 ponúka kaderníctvo, kozmetiku, manikúru, pedikúru a depiláciu pod jednou strechou. Pôvodný web bežal na WordPresse s rezervačným modulom Amelia a neskôr ako sada statických HTML stránok.
Každá stránka si z cudzieho servera sťahovala asi 4 MB veľký skript Tailwind, ktorý vzhľad webu skladal až v prehliadači návštevníka. Úvodná stránka mala spolu okolo 2,7 MB, fotky mali 500 až 830 kB a chýbali im rozmery, takže sa obsah pri načítaní posúval.
Kontaktný formulár len otváral e-mailový program, chýbala mapa stránok (sitemap), súbor robots.txt aj chybová stránka 404 a tlačidlá „Rezervácia“ viedli na adresu, ktorá už neexistovala. Hlavička a pätička boli skopírované v každom súbore a na každej stránke vyzerali trochu inak.
Salón zároveň nechcel prísť o nič, čo už mal: o kontá klientok, históriu termínov ani o rezervácie, ktoré tím videl v administrácii Amelie.
Riešenie
Čo sme urobili a prečo
Nový základ bez zbytočností. Web sme prepísali do PHP 8.4 so spoločnými šablónami: hlavička, menu a pätička sú na jednom mieste, takže vyzerajú všade rovnako. Tailwind CSS sa kompiluje vopred a do prehliadača ide len to, čo stránky naozaj používajú.
Rýchle obrázky. Fotky sme prekonvertovali do moderných formátov AVIF a WebP vo viacerých veľkostiach pre mobil, tablet a počítač. Hlavná fotka úvodnej stránky klesla z 828 kB na 41 kB a každý obrázok má zadané rozmery, takže sa stránka pri načítaní neposúva.
Online rezervácia v 4 krokoch. Klientka si vyberie kategóriu, procedúru, zamestnankyňu a voľný termín. Systém ponúkne len čas, ktorý sedí na všetko naraz: otváracie hodiny salónu, pracovný čas konkrétnej kolegyne, jej dovolenku, už obsadené termíny, dĺžku procedúry aj minimálny predstih 2 hodiny. Trojapolhodinový melír sa tak dá objednať najneskôr na 16:30.
Klientska zóna a správa zákaziek. Zákazníčka po prihlásení vidí svoje termíny a cenník, zamestnankyňa svoje najbližšie zákazky. Správca má kalendár všetkých zákaziek po dňoch, týždňoch aj mesiacoch, vie termín pridať, presunúť na kolegyňu, zrušiť s e-mailom pre klientku alebo zablokovať čas na obed či školenie.
Plynulý prechod zo starého systému. Kontá klientok sme preniesli z Amelie a nové rezervácie sa zapisujú späť do nej, takže salón nestratil históriu ani prehľad. Kto sa predtým objednával, zadá svoj e-mail a prihlasovacie heslo mu príde automaticky.
Pripravené pre Google aj AI. Web má sitemap, robots.txt, štruktúrované dáta (strojovo čitateľný popis salónu pre vyhľadávače), súbor llms.txt so zhrnutím pre AI vyhľadávače a nástroje WebMCP, cez ktoré si AI asistent v prehliadači vyhľadá procedúru, cenu či otváracie hodiny. Termín však nikdy neobjedná sám, to vždy potvrdí človek.
Bezpečnosť a čitateľnosť. Formuláre chráni CSRF token (ochrana pred podvrhnutým odoslaním) a skrytá pasca na robotov, heslá sa ukladajú len ako bezpečný odtlačok a prihlasovanie má limit pokusov. Farby sme doladili tak, aby všetok text spĺňal kontrast podľa WCAG 2.1 AA (štandard prístupnosti), a to aj text nad fotkami.
Dodávka
Čo klient dostal
- Web na mieru v PHP 8.4 so spoločnými šablónami
- Online rezerváciu v 4 krokoch s výpočtom voľných termínov
- Klientsku zónu pre zákazníčky aj zamestnancov
- Správu zákaziek s kalendárom a blokáciou času
- Cenník procedúr z databázy, ktorý sa mení na jednom mieste
- Kontaktný a reklamačný formulár s ochranou proti spamu
- Obrázky vo formátoch AVIF a WebP so zadanými rozmermi
- Sitemap, robots.txt, vlastnú stránku 404 a štruktúrované dáta
- llms.txt a nástroje WebMCP pre AI asistentov
- Kontrast textu podľa WCAG 2.1 AA
Výsledky
Čo sa dá overiť
Veľkosť oboch súborov CSS (24,3 kB + 17,7 kB) a odozvu servera sme namerali 19. 9. 2026 na www.rnw.sk z nášho pripojenia. Prenos úvodnej stránky, veľkosti fotiek a kontrast sú z technickej dokumentácie projektu.
Priebeh
Ako projekt prebiehal (cca 3 týždne)
-
Analýza pôvodného webu
Prešli sme WordPress, statické HTML aj dáta z rezervačného modulu Amelia a spísali, čo treba zachovať a čo nefunguje.
-
Nový základ webu
Prepis do PHP 8.4, spoločné šablóny, skompilovaný Tailwind CSS, funkčné formuláre, sitemap, robots.txt a stránka 404.
-
Kontá a databáza
Kontá zákazníčok a zamestnancov, cenník piatich kategórií procedúr, prenos používateľov z Amelie, prihlásenie a obnova hesla.
-
Online rezervácia
Výpočet voľných termínov podľa otváracích hodín, rozvrhu, dovoleniek a obsadenosti a zápis rezervácie späť do Amelie.
-
Správa zákaziek
Zoznam a kalendár zákaziek pre správcu, presun, zrušenie, interné poznámky a blokácia času.
-
Rýchlosť, prístupnosť a AI
Optimalizácia obrázkov, kontrast podľa WCAG 2.1 AA, štruktúrované dáta, llms.txt a nástroje WebMCP.
Technológie
Na čom to beží
- PHP 8.4
- moderný programovací jazyk, na ktorom beží web aj rezervácie
- Tailwind CSS
- štýly skompilované vopred, takže do prehliadača ide len to, čo web používa
- MySQL
- databáza s kontami, cenníkom a termínmi
- AVIF a WebP
- moderné formáty obrázkov: menšie súbory pri rovnakej kvalite
- WebMCP
- nový štandard, cez ktorý AI asistent v prehliadači použije funkcie webu
- llms.txt
- stručné zhrnutie webu pre AI vyhľadávače ako ChatGPT či Perplexity
Galéria
Ukážky
(otvorí obrázok v plnej veľkosti v novom okne)
(otvorí obrázok v plnej veľkosti v novom okne)