Da una raccolta di immagini è nato un catalogo delle opere che alimenta la galleria, i motori di ricerca e i suggerimenti.
Per l'artista Ralph D. Woop abbiamo registrato per la prima volta come dati 98 opere realizzate tra il 2012 e il 2026: con un numero d'opera permanente, dati di base, testi bilingui e una classificazione propria per motivo, atmosfera e composizione.
Da questo modello dati nascono la galleria, 196 pagine delle opere in tedesco e in inglese, i dati strutturati per i motori di ricerca e i sistemi di IA e i suggerimenti di opere simili, che senza questa elaborazione non esisterebbero.
- Committente
- Ralph D. Woop
- Settore
- Arte, atelier e galleria
- Lingue
- Tedesco, Inglese
- Stato
- Online | assistenza continua
- Periodo del progetto
- Giugno – luglio 2026
- Volume del progetto
- CHF 10'000–15'000
- Sito web
- woop-art.de
- Strategia e architettura dell'informazione
- Design UX/UI
- Sviluppo web su misura
- Modello dati delle opere e multilinguismo
- SEO e dati strutturati
- Gestione del consenso
- Hosting e assistenza tecnica
Le opere, le fotografie delle opere e i dati tecnici che le descrivono provengono dall'artista.
Stuttgart, Germania
Gestione del progetto dalla nostra sede di Alt St. Johann (CH‑SG). Sede del progetto: Stuttgart.
Un sito per le immagini, ma nessun catalogo delle opere
L'opera di Ralph D. Woop comprende cianotipie realizzate tra il 2012 e il 2016 e pirografie dal 2017: ritratti, soggetti sacri, omaggi, lavori su commissione e serie. Alcune opere sono disponibili, altre riservate, in collezioni private o non in vendita.
Il primo sito è nato più di dieci anni fa con un incarico semplice: rendere le immagini visibili al pubblico in tempi brevi. Questo compito lo svolgeva. Le opere comparivano in elenchi di immagini, in due sezioni divise per tecnica; come didascalia, ogni opera aveva solo titolo e dimensioni.
Per tutto il resto mancava la base. Nessuna opera aveva un proprio indirizzo, il sito esisteva solo in tedesco e i motori di ricerca, a parte le immagini, trovavano ben poco da poter collocare. Dal 2021 il modulo di contatto e le statistiche dei visitatori erano disattivati, perché i consensi non erano gestiti a livello tecnico. E ogni nuova opera significava una modifica nel codice.
- 01registrare il patrimonio di opere come dati, con titoli, testi, attributi e categorie per ogni opera
- 02diventare bilingue, fino ai titoli delle opere tradotti e approvati
- 03rendere ogni singola opera reperibile per i motori di ricerca e i sistemi di IA
- 04mostrare l'arte in un'atmosfera da mostra
- 05consentire richieste adatte alla disponibilità di un'opera
- 06accogliere nuove opere senza dover sviluppare pagine apposite
Come si trasforma una raccolta di immagini in un patrimonio di opere che persone, motori di ricerca e sistemi di IA possono leggere allo stesso modo?
Dall'immagine al record
RDW-CYA-002… RDW-PYR-103
Progressivo per entrambe le tecniche; la sigla indica la tecnica.
Il punto di partenza è stato un inventario, non il design. Ognuna delle 98 opere ha ricevuto un numero d'opera progressivo, comune alle due tecniche, che non viene mai riassegnato, nemmeno quando un'opera viene rimossa. Così i link e i certificati che rimandano a un numero restano validi.
A ogni numero corrisponde un record: tecnica, anno di realizzazione, dimensioni, formato, orientamento, disponibilità e categorie, registrati una volta e comuni alle due lingue. Titolo, descrizione breve e descrizione estesa, materiale e testo alternativo sono curati per lingua.
Dove manca un'informazione, il record la indica come lasciata aperta di proposito, non come un campo dimenticato. La differenza è verificabile: se manca una traduzione o un numero d'opera contiene un errore di battitura, un controllo automatico lo rileva e l'errore non arriva mai in produzione.
Portata del progetto in breve
Un patrimonio di opere, registrato una volta: galleria, catalogo delle opere, pagine delle opere, dati strutturati e suggerimenti attingono tutti agli stessi record.
Un record, molte rappresentazioni
Dati centrali dell'opera
Un record per opera, comune alle due lingue
- Numero d'opera
- Immagine
- Tecnica
- Anno
- Dimensioni
- Disponibilità
- Classificazione
Testi per lingua
Tedesco e inglese, opera per opera
- Titolo
- Descrizione
- Materiale
- Testo alternativo
Generato automaticamente
Per ogni opera, a partire da dati e testi, con verifica e approvazione prima della pubblicazione
- Pagina dell'opera DE e EN
- Voce nel catalogo delle opere
- Posizione in galleria
- Metadati
- Dati strutturati
- Voce nella sitemap
- Opere simili
- Reindirizzamento del numero d'opera
Gestione centralizzata dei dati e controlli automatici
Ognuna delle 98 opere ha un record centrale con un numero d'opera univoco. I dati di base sono usati da entrambe le versioni linguistiche, mentre titoli, descrizioni e altri testi redazionali sono curati per lingua.
Da questi dati l'applicazione genera in totale 196 pagine delle opere, oltre alle relative voci di catalogo, posizioni in galleria, metadati e collegamenti interni.
Se mancano traduzioni necessarie o i dati contengono riferimenti non validi, un controllo automatico lo rileva e l'errore non arriva mai in produzione. Vengono verificati, tra l'altro, numeri d'opera, traduzioni e riferimenti legati alle opere, a ogni modifica (push e pull request).
Così gli errori nei dati si possono individuare già prima della pubblicazione.
Nuove opere senza nuove pagine
Una nuova opera è un nuovo record. Da esso nascono le pagine dell'opera in entrambe le lingue, la voce nel catalogo delle opere, i metadati, i dati strutturati, la voce nella sitemap e i suggerimenti; non occorre sviluppare nulla. Per ogni nuova opera l'artista compila un modulo di inserimento con tutte le informazioni necessarie, e noi le inseriamo secondo il modello dati nell'ambito dell'assistenza. Per questo non serve un CMS.
Ogni opera con un proprio indirizzo, in due lingue, per persone e macchine
Le singole opere e le loro informazioni prima non erano reperibili. I visitatori umani potevano sì guardare le opere, ma le macchine riuscivano a malapena a identificare le singole immagini e non potevano indicizzare il sito in modo sensato. Oggi ognuna delle 98 opere ha due pagine proprie, una tedesca e una inglese, ciascuna con un proprio titolo, una propria descrizione e un proprio indirizzo.
Per i sistemi di IA vale lo stesso che per i motori di ricerca, solo in modo più rigoroso: contenuti presenti nell'HTML senza bisogno di JavaScript ed entità denominate in modo univoco. Qui entrambe le cose sono la base, non un'aggiunta.
Tradotto, non trasposto
- tedesco
/de/werkverzeichnis/knechtschaft- inglese
/en/catalogue/servitude
Qui bilingue significa più di una seconda interfaccia. Tutti i 98 titoli delle opere sono stati tradotti uno per uno e approvati dall'artista, perché un titolo fa parte dell'opera e non è una didascalia. Dove un titolo è già in inglese o è un nome proprio, resta invariato.
Anche gli indirizzi sono tradotti, non solo il loro codice di lingua:
I tag canonical, hreflang e x-default collegano le due versioni, e i visitatori passano dall'una all'altra senza perdere l'opera.
Un catalogo costruito prima di tutto per le macchine
La galleria carica le sue opere in modo progressivo e disegna la parete museale nel browser. Per i visitatori è la soluzione giusta. Un crawler che non esegue JavaScript ne vedrebbe ben poco.
Per questo esiste il catalogo delle opere: tutte le 98 opere in una sola pagina, nell'HTML fornito dal server, ciascuna con immagine di anteprima, anno, numero d'opera, disponibilità e un link alla sua pagina. È costruito innanzitutto per motori di ricerca e sistemi di IA. Per le persone è la via più rapida verso un'opera precisa.
Dati strutturati e sitemap
Woop Art utilizza sei tipi Schema.org: Person, WebSite, BreadcrumbList, VisualArtwork, CollectionPage e CreativeWork. Opera, artista e sito hanno identificatori fissi e rimandano l'uno all'altro, affinché un motore di ricerca o un modello linguistico li riconosca come le stesse entità.
Tutte le 98 opere sono contrassegnate come VisualArtwork, con tecnica, materiale, numero d'opera e, dove documentate, le dimensioni.
La sitemap nasce dal patrimonio attuale e comprende 214 URL, di cui 196 pagine delle opere. La sua data di modifica segue il contenuto: una pubblicazione puramente tecnica non segnala ogni pagina come modificata.
Opere simili: possibili grazie all'arricchimento dei dati
Alcuni requisiti e alcune idee emergono solo nel corso del processo. Recepiamo rapidamente requisiti e priorità nuovi o modificati e reagiamo di conseguenza. I suggerimenti sono uno di questi casi: non figuravano in nessuna lista di requisiti. Sono diventati possibili perché, dopo l'elaborazione, le opere erano confrontabili.
Ai dati di base dell'artista, cioè immagine, titolo, tecnica e anno, si è aggiunto per ogni opera un secondo livello: motivo, atmosfera, effetto cromatico, composizione, serie e se si tratta di un originale o di un omaggio. Prima queste caratteristiche non esistevano da nessuna parte. Sono state elaborate a partire dalle immagini e registrate in elenchi di valori fissi, affinché due opere parlino la stessa lingua.
Su questa base lavora una logica propria con otto caratteristiche ponderate, e ogni pagina dell'opera propone lavori affini e ne indica la ragione.
Cross-selling senza il selling
Chi si sofferma su un ritratto trova altri ritratti; chi scopre una serie, le altre opere che ne fanno parte. I visitatori si muovono nella collezione entro i confini del proprio gusto, invece di tornare all'elenco.
Questo conta soprattutto per le opere non disponibili: lì il suggerimento porta a lavori comparabili, invece di far finire la visita.
Due esempi da woop-art.de
- Mona Lisa
- Pirografia, omaggio a Leonardo da Vinci
- Jack Sparrow II | Motif: Portrait – Icon
- Amy Winehouse | Motif: Portrait – Icon
- Bowie | Motif: Portrait – Icon
- Elvis | Motif: Portrait – Icon
- Ruins
- Cianotipia, parte di una serie
- Ruins II | Series: Ruins
- Ruins – Study II | Series: Ruins
- New Age | Motif: Landscape & Architecture
- In Search of Atlantis
I primi quattro suggerimenti della rispettiva pagina dell'opera, con la ragione che la pagina indica. Non tutti i suggerimenti hanno una ragione esplicita; in quel caso il suggerimento si regge su più corrispondenze minori.
Come viene calcolata la somiglianza
Otto caratteristiche con peso fisso: serie 5, motivo principale 4, motivi condivisi 3, tecnica 2,5, composizione 2, effetto cromatico 1,5, atmosfera 1,5 e il riferimento (originale o omaggio) 1.
Il calcolo si basa su ciò che l'opera osservata possiede. Per questo un'opera senza serie non è svantaggiata nel confronto rispetto a una che fa parte di una serie.
Il risultato è deterministico: finché la collezione resta invariata, ogni pagina dell'opera mostra gli stessi suggerimenti nello stesso ordine; a parità di punteggio decide il numero d'opera. Se si aggiungono nuove opere, i suggerimenti possono cambiare all'interno della collezione ampliata.
La classificazione è un patrimonio a sé stante: su di essa si potrebbero costruire altri accessi, per esempio sale tematiche per motivo o atmosfera.
Avete una collezione che ha bisogno di essere organizzata?
Esaminiamo il materiale esistente e individuiamo come organizzarlo – prima ancora di iniziare la progettazione grafica.
Una sala espositiva nel browser
Non tutti i visitatori cercano un'opera precisa. Per chi vuole guardarsi intorno c'è la galleria: una parete museale lungo la quale, su desktop, ci si sposta lateralmente, con le opere nelle loro proporzioni reali. Sullo smartphone, una disposizione delle immagini verticale e dedicata guida attraverso la stessa collezione.
Il design unisce l'atmosfera di un atelier storico alla quiete di una sala di galleria: blu notte invece del bianco, oro per azioni ed etichette, un carattere con grazie leggero per i titoli e pulsanti senza angoli arrotondati, squadrati come una cornice.
La galleria come mostra digitale
La galleria interattiva ricrea nel browser l'atmosfera di uno spazio espositivo. Sugli schermi più grandi, i visitatori si muovono orizzontalmente lungo una parete museale virtuale.
Il catalogo delle opere per la ricerca mirata
Il catalogo delle opere offre un accesso diretto all'intera collezione. Da ogni voce, i visitatori possono accedere direttamente alla pagina dell'opera corrispondente.
Desktop e mobile: due percorsi distinti
- Navigazione
Desktop: orizzontale lungo la parete del museo
Mobile: verticale, con una propria disposizione delle immagini
- Immagini
Desktop: nelle loro proporzioni reali
Mobile: con inquadrature adattate
- Allestimento
Desktop: parete, pavimento, luci e cornici generati nel browser
Mobile: lo stesso linguaggio visivo del desktop
Il design system
- #08111B#08111BSfondo della paginatenant-rdw gradient
- #0B1B2A#0B1B2ASchede, menu, finestre di dialogordw-bg-card
- #7A5E3A#7A5E3AAzione primaria (sfumatura)gradient-rdw-gold-button
- #B08A57#B08A57Accento: etichette, linkrdw-gold-main
- #CBB28A#CBB28ALink al passaggio del mouserdw-gold-soft
- #F3EEE6#F3EEE6Titolirdw-text-primary
- #D8D0C4#D8D0C4Testo correnterdw-text-secondary
- #A9A39A#A9A39ATesto secondariordw-text-muted
In Search of Atlantis
Cormorant Garamond · Titoli
Pyrography on wood, 60 × 40 cm
Inter · Testo corrente
Catalogue
Inter · Etichette
- 0px | Pulsanti, schede
- 4px | Finestre di dialogo, riquadri delle immagini
- Sfondo della pagina
- Scheda con bordo dorato
In scala ridotta in questa tavola: nel progetto i pulsanti sono alti 56 px, con testo a 13 px (contorno: 12 px). Focus: linea oro di 2 px a 4 px di distanza. Disattivato: opacità dimezzata.
Catalogue
5,98:1Discover gallery
5,26:1Calcolato secondo le WCAG 2.2 (luminanza relativa) a partire dai valori cromatici del progetto. Entrambe le coppie superano la soglia di 4,5:1 per il testo normale; nell'alone di luce in alto a sinistra della pagina il valore dell'oro scende a 5,33:1. Si tratta di una prova per queste coppie di colori, non dell'accessibilità dell'intero sito.
Una sala espositiva che nasce nel browser
La parete museale virtuale non è un'immagine di sfondo statica. Parete, pavimento, battiscopa, illuminazione e cornici nascono nel browser – da sfumature, ombre, coni di luce e texture di materiali selezionate. La scenografia viene visualizzata su una superficie di disegno (canvas); le opere restano davanti come elementi autonomi e cliccabili.
In questo modo opere di formati e cornici diversi possono essere presentate nello stesso ambiente. Una logica di impaginazione dedicata tiene conto delle loro proporzioni reali e le dispone in file equilibrate.
Anche la versione mobile utilizza una propria disposizione delle immagini e ritagli adattati.
Selezionate un livello per evidenziarlo
Parete
01 / 06La superficie davanti alla quale si trovano tutti gli altri elementi.
Pavimento
02 / 06La superficie sottostante, che conferisce profondità allo spazio.
Battiscopa
03 / 06Il bordo in cui la parete incontra il pavimento.
Illuminazione
04 / 06Luci e ombre sopra le opere.
Cornice
05 / 06La cornice si adatta al formato e alla tecnica dell'opera.
Opera d'arte
06 / 06Rimane un elemento autonomo e cliccabile, posizionato davanti alla superficie di disegno.
Rappresentazione schematica, non uno screenshot, Sfumature, Ombre, Fasci di luce, Texture dei materiali
Due fasi creative, una collezione
Le opere si dividono lungo la biografia: cianotipie fino al 2016, pirografie dal 2017. Il vecchio sito le separava in due sezioni e, in ordine di anno, 47 pirografie avrebbero preceduto la prima cianotipia.
Per questo l'ordine è curato, ma solo all'inizio: dieci opere scelte dall'artista aprono la galleria, poi le tecniche si alternano automaticamente. Poiché oggi le nuove opere sono esclusivamente pirografie, l'equilibrio si mantiene così da sé. Un elenco curato a mano si sbilancerebbe di nuovo a ogni nuova opera.
Tutte le informazioni su un'opera e un percorso di richiesta adatto alla sua disponibilità
Ogni opera ha una propria pagina di dettaglio che unisce la presentazione visiva ai relativi dati.
A seconda dell'opera vengono mostrati, tra l'altro, titolo, anno, tecnica, materiale, dimensioni, numero d'opera, disponibilità e informazioni di contesto.
I visitatori possono spostarsi tra le opere, scoprire lavori affini o inviare direttamente una richiesta.
- 01
Catalogo delle opere
Il visitatore esplora la collezione attraverso le anteprime, i numeri d'opera e le informazioni sulla loro disponibilità.
- 02
Pagina dedicata all'opera
Consulta la scheda completa dell'opera e le informazioni che ne approfondiscono il contesto.
- 03
Richiesta diretta
Contatta la galleria – il numero d'opera e il tipo di richiesta sono già inseriti.
La pagina dell'opera unisce un'immagine di grande formato, dati strutturati e una possibilità di contatto diretta.
Più della metà delle opere non è disponibile: 57 su 98 sono in collezioni private o non in vendita. Lì un pulsante d'acquisto sarebbe un vicolo cieco. Per questo il percorso di richiesta dipende dallo stato dell'opera.
Cinque stati di disponibilità, due percorsi- Inquire about this work
- La richiesta riguarda esattamente quest'opera. Il numero d'opera e il tipo di richiesta sono già inseriti; nessuno deve descrivere l'opera nel modulo.
- Available
- On request
- Reserved
- Request appointment for a similar work
- Se un'opera non è più disponibile, il visitatore chiede di un'opera comparabile. L'opera che stava guardando viene trasmessa come riferimento.
- Private collection
- Not for sale
Entrambi i percorsi arrivano via e-mail, con titolo dell'opera, numero d'opera e tipo di richiesta nell'oggetto.
Sviluppata su misura e seguita nel tempo
Woop Art è stato sviluppato come applicazione web su misura e distribuito come container autonomo. Può quindi funzionare indipendentemente da una specifica piattaforma per siti web e, se necessario, essere trasferito su un'altra infrastruttura di hosting adeguata.
Anche dopo la pubblicazione continuiamo a occuparci della gestione tecnica: manutenzione dell'applicazione, rilasci controllati e aggiornamento dei componenti utilizzati. La protezione dei dati, l'accessibilità e la gestione a lungo termine sono state considerate fin dalle prime fasi dello sviluppo.
Dati operativi
- 01ApplicazioneNext.js, React, TypeScript
- 02DistribuzioneImmagine container versionata, build a più stadi
- 03VerificheVerifiche automatiche di tipi e build
- 04PacchettiGestione pacchetti privata
- 05DeploymentControllato, con ritorno a una versione precedente
- 06E-mailAmazon SES per le richieste di contatto
Consensi
Sul vecchio sito il modulo di contatto e le statistiche dei visitatori erano disattivati, perché i consensi non erano gestiti a livello tecnico. Oggi Woop Art utilizza il nostro sistema di gestione del consenso: i servizi di analisi vengono caricati solo dopo il consenso, ogni decisione viene registrata con versione, data e ora, e i visitatori possono modificarla in qualsiasi momento.
Evidenze
Accessibilità oltre il design visivo
Il sito web tiene conto delle diverse esigenze e modalità di utilizzo. Questo comprende il supporto alle tecnologie assistive, l'adattamento delle animazioni alle impostazioni di sistema per la riduzione del movimento e la possibilità di ingrandire i contenuti sui dispositivi mobili.
Durante lo sviluppo sono stati presi in considerazione, tra gli altri aspetti, l'HTML semantico, i testi per gli screen reader in entrambe le lingue, i testi alternativi delle opere e le etichette accessibili dei moduli.
Il catalogo e le singole pagine delle opere sono inoltre navigabili anche senza JavaScript.
Sviluppo, deployment e manutenzione tecnica
L'applicazione viene sviluppata in un repository dedicato e distribuita come immagine container versionata.
Il codice sorgente specifico dell'applicazione viene gestito separatamente dai componenti riutilizzabili di Woop Technology.
In questo modo è possibile fornire una versione completa e definita del codice sorgente dell'applicazione senza includere componenti appartenenti ad altri progetti dei clienti.
Un patrimonio di opere come dati, da cui nasce tutto ciò che si vede
Oggi il patrimonio di opere esiste come dati, e tutto ciò che si vede nasce da lì: la galleria, il catalogo delle opere, 196 pagine delle opere in due lingue, i dati strutturati e i suggerimenti. Le nuove opere si aggiungono come record, non come nuove pagine.
Dagli obiettivi iniziali ai risultati
- Patrimonio di opere come dati
- 98 opere con numero d'opera permanente, dati di base e classificazione.
- Bilinguismo
- Tutti i titoli delle opere e i testi in tedesco e in inglese, fino agli indirizzi.
- Reperibilità
- Una pagina per opera e per lingua, un catalogo delle opere nell'HTML, 98 opere contrassegnate come VisualArtwork.
- Atmosfera da mostra
- Una galleria con parete museale virtuale e un design system proprio.
- Richieste
- Un percorso di richiesta per ogni stato di disponibilità, con il numero d'opera già inserito.
- Estendibilità
- Una nuova opera è un record; pagine, collegamenti e metadati nascono da esso.
- Aggiunti strada facendo: suggerimenti
- Opere simili con motivazione, ricavate dalla classificazione nata durante il progetto.
Performance
Accessibility
Best Practices
SEO
I valori provengono da una misurazione Lighthouse desktop del 7 agosto 2026 e si riferiscono alla pagina testata al momento della misurazione. Il punteggio di accessibilità si basa su controlli automatici e non costituisce una prova completa della conformità WCAG.
Per me era importante presentare tutte le mie opere in un unico luogo - in questo caso digitale - oltre alle mostre fisiche, e in un contesto adeguato. La galleria digitale trasmette l'atmosfera di una sala espositiva come la desidererei.
Con il nuovo sito posso presentare e gestire le mie opere in modo chiaro. Mi piace soprattutto che ogni opera abbia il suo posto e che i nuovi lavori si inseriscano facilmente nella collezione esistente.
Nello sviluppo del mio sito era importante per me che la veste grafica si accordasse alle mie opere e diventasse una galleria digitale dall'atmosfera corrispondente, con cui posso presentare i miei lavori a modo mio.
La splendida collaborazione personale si vede ora nel risultato del vostro lavoro.
Tradotto dal tedesco — Mostrate l'originale
Mir war wichtig, alle meine Kunstwerke an einem - in diesem Fall digitalen - Ort, zusätzlich zu physischen Ausstellungen, in einer passenden Umgebung zu präsentieren. Die digitale Galerie vermittelt die Atmosphäre eines Ausstellungsraums, wie ich ihn mir wünschen würde.
Mit der neuen Website kann ich meine Kunstwerke übersichtlich präsentieren und verwalten. Besonders gefällt mir, dass jedes Werk seinen eigenen Platz hat und sich neue Arbeiten einfach in die bestehende Sammlung integrieren lassen.
Bei der Entwicklung meiner Website war es mir wichtig, dass die Gestaltung zu meinen Werken passt und in eine entsprechend atmosphärische, digitale Galerie umgesetzt wurde, mit der ich meine Arbeiten auf meine eigene Weise präsentieren kann.
Die wunderbare persönliche Zusammenarbeit zeigt sich nun im Ergebnis eurer Arbeit.
- Web Design & RelaunchGalleria, Catalogo delle opere, Pagine delle opere
- Branding & UX/UI DesignPercorso utente, Disposizione delle immagini, Linguaggio visivo
- Sviluppo web, piattaforme e integrazioniDati delle opere, Pagine delle opere, Suggerimenti
- SEO, GEO & Performance214 URL, Dati strutturati, hreflang
- Hosting, Manutenzione & InfrastrutturaImmagine container, Deployment, Gestione tecnica
- Protezione dei dati & Consent ManagementConsent, Analytics
State pianificando una soluzione digitale su misura?
Piattaforma, applicazione web o sito complesso: vi aiutiamo a tradurre i vostri requisiti in una soluzione ben ponderata e gestibile nel lungo periodo.