Ralph D. Woop művész számára olyan egyedi digitális megjelenést fejlesztettünk, amely egy kiállítás hangulatát strukturált, többnyelvű műjegyzékkel kapcsolja össze.
A műalkotások, a műfotók és a szakmai műadatok a művésztől származnak.
digitálisan dokumentált egyedi alkotás
indexelhető URL
teljesen integrált nyelv
Lighthouse SEO
Lighthouse Accessibility
Cumulative Layout Shift
A weboldal nyelvenként 107 URL-t tartalmaz; a 214 URL-ből 196 automatikusan, a központilag kezelt műadatokból jön létre. A Lighthouse-értékek a 2026. augusztus 7-i asztali mérésből származnak, amely emellett 99-es teljesítménypontszámot ér el 0,8 másodperces Largest Contentful Paint mellett.
Ralph D. Woop munkássága ciánotípiákat, pirográfiákat, portrékat, megrendelésre készült és kísérleti alkotásokat foglal magában, nagyon eltérő formátumokkal, történetekkel és elérhetőséggel.
A feladat tehát nem egyszerűen az volt, hogy képek kerüljenek az internetre.
Az új weboldalnak egyszerre kellett
Ebből fakadt az igény egy olyan digitális megjelenésre, amely a kiállítást, a műjegyzéket és a kommunikációs felületet egyetlen rendszerben köti össze.
Egy műalkotás máshogy működik, mint egy klasszikus termék. Minden mű egyedi darab. A formátumok és az arányok erősen eltérnek. Egyes alkotások elérhetők, mások foglaltak, magángyűjtemény részei, vagy elvi okból nem eladók.
Egy szokványos kártyarács vizuálisan egységesítette volna ezt a sokféleséget. Egy tisztán kísérleti galéria ugyan hangulatot teremtett volna, de a célzott kereséshez, a keresőmotorok számára és a konkrét mű iránt érdeklődő látogatóknak csak korlátozottan lett volna alkalmas.
A központi kérdés tehát így hangzott: hogyan köthető össze a digitális galériaélmény egy strukturált műjegyzékkel? A válasz nem egyetlen felület lett, hanem két különböző út ugyanahhoz a műállományhoz.
Az információarchitektúrát úgy alakítottuk ki, hogy a látogatók maguk dönthessék el, hogyan szeretnének közelíteni a művekhez.
A vizuális megjelenés egy történelmi műterem és egy gondosan rendezett galériatér hangulatához igazodik.
A sötét kék és fekete tónusok nyugodt hátteret adnak. A meleg arany- és fényakcentusok a művek anyagait és színhangulatát veszik át. A klasszikus talpas tipográfia a digitális felületet egy kiállítás esztétikájával köti össze. A kezelőfelület tudatosan a művészet mögé lép.
A fekvő, álló vagy szokatlan arányokat nem kényszerítjük egyforma képkeretbe. A galériához saját elrendezési logikát fejlesztettünk, amely figyelembe veszi a művek valós képarányát, és ebből kiegyensúlyozott sorokat alkot.
További művek betöltésekor a már látható képek a helyükön maradnak. A tartalmak soronként egészülnek ki, így a meglévő elemek nem méreteződnek át utólag.
A múzeumi fal nem háttérkép. A fal, a lábazat, a parketta, a mennyezeti reflektorok és az egyes művek kerete a böngészőben jön létre – színátmenetekből, árnyékokból, fénykúpokból és néhány anyagtextúrából. Egy fénykép ugyanezt a termet mutatta volna, de mindig csak ezt az egyet: rögzített fény, rögzített keretszín, rögzített képméret.
Mivel minden réteg tervezési értékekből áll össze, bármikor módosítható marad. Világosabb fal, másik faanyag, egy további reflektor vagy keskenyebb paszpartu egyetlen érték módosítása a kódban – nincs új renderelés, nincs új fotózás. A tér a gyűjteménnyel együtt nő, ahelyett hogy egyszer rögzített képbe kényszerítené.
Hogy ez a díszlet az oldalirányú görgetés közben ne tegyen költségessé minden mozdulatot, képernyőméretenként egyszer egy vászonra (canvas) számoljuk ki, és kész képként helyezzük a művek mögé. Maguk a művek önálló elemek maradnak az előtérben – kattinthatók, linkelhetők, valódi képadatokkal. Ha az ablak mérete változik, a tér újra elkészül; görgetés közben a böngésző már csak egyetlen réteget mozgat.
A digitális galéria egy klasszikus kiállítótér elemeit fordítja le a böngészőre. Nagyobb képernyőkön a látogatók vízszintesen haladnak egy virtuális múzeumfal mentén. A különböző képformátumok megtartják valós arányaikat, és térben megkomponált környezetben jelennek meg. A falstruktúrák, a paszpartuk, a világítás és a visszafogott téri elemek keretet adnak anélkül, hogy versenyeznének a művekkel. Így elsőként nem az információ, hanem a vizuális felfedezés kerül a középpontba.
Aki egy adott művet keres, vagy célzottan szeretné átnézni az állományt, a műjegyzéken keresztül közvetlenül eljut a lényeges információkhoz. Minden műnél többek között az előnézeti kép, a cím, a keletkezés éve, a műszám, a technika és az elérhetőségi státusz jelenik meg áttekinthetően.
A teljes műjegyzéket szerveroldalon szolgáljuk ki, így az interaktív galériaélménytől függetlenül is világosan strukturált, közvetlenül elérhető és a keresőmotorok számára feldolgozható marad.
Az asztali galériát tudatosan nem zsugorítottuk kisebb kijelzőkre. A mobil eszközökhöz önálló interakciós koncepció készült:
A vizuális identitás így megmarad, a kezelés viszont az adott eszközhöz igazodik.
Mindegyik réteg egy tervezési érték a kódban – szín, szélesség, átlátszóság, darabszám. A kiállítás így bármikor átrendezhető és újravilágítható anélkül, hogy egyetlen új képet is elő kellene állítani.
A weboldal központi alapja nem az oldalcím, hanem a műszám. Egy mű megtartja az azonosságát attól függetlenül, hogy később változik-e a címe vagy az URL-je. A fordítások, az ajánlások, a galériapozíciók és a további kapcsolódások így megbízhatóan összefüggnek egymással.
Példa egy műszámra
Maga a műszám is digitális belépési ponttá válik. Aki egy fizikai művön, dokumentáción vagy tanúsítványon talál egy műszámot, címként használhatja. A rendszer automatikusan a kanonikus műoldalra irányít.
Így közvetlen kapcsolat jön létre a fizikai műalkotás és a digitális műjegyzék között, anélkül hogy további, versengő URL-ek keletkeznének a keresőmotorok számára.
Minden lényeges műadatot központilag kezelünk.
Ezekből automatikusan létrejön
A weboldal 214 indexelhető URL-jéből 196 ilyen módon, a műadatokból jön létre.
A műszámok, a fordítások és a további műhöz kötött struktúrák típusosan kapcsolódnak egymáshoz. Ha hiányzik egy fordítás vagy elgépelnek egy műszámot, az automatizált build hibára fut ahelyett, hogy hiányos tartalom kerülne észrevétlenül az élő oldalra. Ez az ellenőrzés minden push és pull request esetén automatikusan lefut.
A műadatlap, a jegyzékbejegyzés, a galériapozíció, a metaadatok, a sitemap-bejegyzés és az átirányítások ugyanabból a forrásból jönnek létre. Egy további mű ezért egy rekorddal több – nem új oldal, nem új útvonal, és nincs második hely, ahol ugyanazt az adatot karban kellene tartani.
Minden műnek saját adatlapja van, ahol a vizuális bemutatás és a strukturált információ összekapcsolódik.
A műtől függően megjeleníthető
A látogatók emellett válthatnak az előző és a következő mű között. A sorrend a gondozott galéria rendjét követi, nem pedig egy adatbázis sorrendjét.
A rokon alkotásokhoz saját ajánlási logikát fejlesztettünk. Figyelembe veszi többek között a következőket:
Összesen nyolc súlyozott jellemzőt veszünk figyelembe. Az ajánlás emellett el is tudja magyarázni a látogatónak, miért minősült hasonlónak egy másik mű. A felfedezés így nem ér véget egyetlen adatlapon, hanem tematikusan vezet tovább az állományban.
A Woop Artot tudatosan nem webáruházként építettük fel. A hangsúly a művészet közvetítésén, a művek dokumentálásán és a személyes kapcsolaton van.
A felhívás ezért az adott mű státuszához igazodik.
A mű még gazdát cserélhet: megvásárolható, vagy valaki számára előjegyzés alatt áll. A gomb ezért egy kifejezetten erre a műre vonatkozó érdeklődéshez vezet.
A mű magántulajdonban van, vagy nem áll eladásra. Egy rá vonatkozó érdeklődés nem vezetne sehová – a gomb ezért nem a műhöz, hanem egy hasonló munkáról szóló beszélgetéshez vezet.
Az érdeklődés magán a műadatlapon indul. A mű megnevezése, illetve műszáma és az érdeklődés típusa automatikusan átkerül – a látogatóknak nem kell átmásolniuk.
Lényeges elvárás volt, hogy az egyes műalkotások tartósan megtalálhatók és technikailag egyértelműen leírhatók legyenek.
A weboldal ehhez hat különböző Schema.org-típust használ
Mind a 98 műoldal VisualArtwork jelöléssel szerepel, kiegészítve olyan információkkal, mint a technika, az anyag, a műszám és a méretek. Stabil entitáskapcsolatok kötik össze a műalkotást, a művészt és a weboldalt.
Az ár- és ajánlatjelölésről tudatosan lemondtunk, mivel a Woop Art galéria, nem pedig klasszikus webáruház.
A többnyelvűséget nem pusztán a látható szövegek fordításával oldottuk meg. Mind a 98 mű teljes egészében gondozott németül és angolul: összesen 196 műadatlap, 1372 kitöltött fordított szövegmezővel.
Az URL-ek is nyelvspecifikusan épülnek fel
A canonical-, hreflang- és x-default-kapcsolatok gondoskodnak arról, hogy a keresőmotorok helyesen kössék össze a nyelvi változatokat. A többnyelvűség így nem kiegészítő funkció, hanem az alapvető információarchitektúra része.
A sitemap automatikusan a tényleges oldal- és műállományból jön létre, és jelenleg 214 címet fog át. Minden URL-hez többek között nyelvi alternatívákat, frissítési dátumot, prioritást és kanonikus hozzárendelést tartunk karban.
A módosítás dátuma a tényleges tartalmi állapotot követi, nem pusztán az utolsó telepítés időpontját. Így elkerülhető, hogy minden technikai publikálás tévesen azt jelezze, hogy az összes tartalom frissült.
A Woop Art egyedi webalkalmazásként készült Next.js, React és TypeScript alapon. Az alkalmazás önálló konténerként telepíthető, így nem kötődik konkrét weboldalplatformhoz vagy egyetlen tárhelyszolgáltatóhoz.
A technikai üzemeltetéshez tartozik
Minden kiadott verzió reprodukálhatóan telepíthető, illetve szükség esetén visszaállítható egy korábbi állapotra.
A kapcsolatfelvételi megkeresések e-mailes küldése is központi infrastruktúrán, az Amazon SES-en keresztül történik.
A felületet minden projektnél külön repositoryban készítjük. A Woop Art ezért lezárt forráskód-állapotként adható át anélkül, hogy más projektek részei is vele mennének.
A leírtak azt mutatják, mi van előirányozva. Az egyes esetekben érvényes feltételeket a mindenkori szerződés rendezi.
A hozzájárulás-kezelés is a Woop Technology saját, újrafelhasználható komponensén alapul. A Woop Art esetében a konfiguráció a következőket foglalja magában:
hozzájárulási kategória
szolgáltatás
deklarált süti
nyelv: német és angol
A hozzájárulási konfiguráció változásait verziózzuk, és szükség esetén új döntést kérhetnek a látogatótól.
A Google Consent Mode v2 alapértelmezetten elutasított állapotokkal indul. A webanalitika csak a megfelelő hozzájárulás megadása után töltődik be. A hozzájárulási döntéseket szerveroldalon naplózzuk időbélyeggel, hozzájárulási verzióval és anonimizált IP-címmel.
A weboldal azokat a felhasználókat is figyelembe veszi, akik képernyőolvasóval, csökkentett mozgással vagy nagyítással dolgoznak.
Megvalósult többek között
Éppen egy művészeti oldalon tudatosan lemondtunk arról, hogy korlátozzuk a nagyítást mobil eszközökön – a látogatók nagyítva is meg tudják nézni a műveket.
Formális WCAG-megfelelőségi auditot nem végeztünk, ezért ilyen tanúsítási vagy megfelelőségi állítást sem fogalmazunk meg.
A Woop Art ma már nem csupán egy képeket tartalmazó weboldal. Olyan digitális művészeti tér jött létre, amely különböző igényeket köt össze egymással:
Hangulatos galéria a vizuális felfedezéshez.
Teljes digitális műjegyzék.
Önálló mű-, technika-, projekt- és művészoldalak.
214 indexelhető URL többnyelvű SEO-struktúrával.
Konkrét műhöz kapcsolódó megkeresések az általános kapcsolatfelvétel helyett.
Az új munkák központilag kerülnek be, és automatikusan illeszkednek a meglévő struktúrába.
A digitális megjelenés így együtt tud növekedni a művészeti életművel – anélkül, hogy minden új alkotáshoz új technikai megoldás kellene.
Performance
Accessibility
Best Practices
SEO
Az értékek a 2026. augusztus 7-i Lighthouse asztali mérésből származnak.
Saját hozzájárulás-motorunk. Kezeli a hozzájárulásokat, csak hozzájárulás után tölti be az érintett szolgáltatásokat, visszavonáskor pedig törli a cookie-kat – miközben az adatok, a nyelvek és a megjelenés projektenként szabadon meghatározhatók.
Világosan strukturált platform ciklusfókuszú edzéshez, táplálkozási és életmód-tanácsadáshoz – ajánlat-összehasonlítással, időpontkéréssel és foglalással.
Az első egyeztetésen áttekintjük céljait és azt, hogyan alakítható ki belőlük egy illeszkedő digitális megoldás.