Prima delle feste di Natale ho avuto la fantastica occasione di poter collaborare col fotografo Nicola Franchini alla realizzazione di un CD multimediale per il Museo di Storia Naturale di Parma.
Questo disco contiene la raccolta degli scatti fatti ai preparati della Raccolta Alberto Del Prato di Vertebrati del Parmense, scatti eseguiti da Nicola. Tutte queste immagini sono state raccolte in un catalogo cartaceo stampato in bianco e nero. Quindi si è pensato di offrire una visione completa e più dettagliata, attraverso la visualizzazione delle foto digitali e a colori su un disco multimediale di facile consultazione.
Una delle pagine introduttive del disco
La richiesta prevedeva l’inserimento di circa 740 immagini suddivise in 6 classi più una galleria con la raccolta completa. Ogni immagine doveva essere visualizzata col proprio nome e numero di serie e le miniature degli altri scatti dovevano essere accessibili anche durante la visualizzazione delle immagini. È stato inoltre richiesta la possibilità di eseguire una ricerca attraverso il numero di serie dell’immagine, letto dal catalogo cartaceo, che portasse alla visualizzazione della serie di foto presenti nel disco con quel numero.
La tempistica di realizzazione del lavoro è stata davvero bassa e abbiamo corso non poco per poterlo finire in tempo.
La soluzione scelta per questo lavoro è stata quella di realizzare un sito web locale. Ho deciso di realizzarlo così perché permette di poter visualizzare questo lavoro su ogni computer di ogni genere: è necessario solamente un browser web!
Il core del lavoro è stato scrivere alcuni codici che lavorassero in locale senza l’ausilio di un server (come avviene per il PHP) e che fosse abbastanza versatili e snelli da poter essere usati su diversi computer. Sia la galleria, quindi, che il sistema di ricerca per codice è stato scritto in JavaScript. La visualizzazione e la cura grafica del lavoro, sono poi state perfezione con l’ausilio di codici CSS adatti allo scopo.
Galleria della categoria Mammiferi
Abbiamo fatto quindi in modo che, cliccando su una delle categorie scelte, venisse visualizzata una barra laterale (a destra) scorrevole dove sono presenti tutte le miniature delle foto con sotto il loro numero di serie; a sinistra quindi v’è lo spazio per la visualizzazione dell’immagine a piena risoluzione (scalata in base alla dimensione della finestra) con sotto nome e numero di serie.
La barra laterale è scorrevole verticalmente mentre gli elementi a sinistra sono fissi nella pagina: questo grazie all’uso dei CSS. Cliccando sulla miniatura la pagina carica automaticamente l’immagine ingrandita nel posto assegnato, visualizzando nome e codice sotto l’immagine: questo è possibile grazie all’implementazione in JavaScript che legge alcuni tag del codice html delle immagini.
Per ogni categoria la galleria comprende solo un numero limitato e selezionato di scatti per quel determinato gruppo di animali mentre la gallerie completa raccoglie tutti insieme gli scatti presenti nelle 6 classi distinte.
La scelta della categoria e il form di ricerca
Il lavoro maggiore è stato maneggiare, attraverso una serie di automatismi, un file che conteneva tutti i riferimenti di codice e nome per le varie immagini e quindi associarlo a queste per la creazione di un codice HTML adatto alla galleria in JavaScript. L’operazione è riuscita alla perfezione senza perdita di dati sensibili e inoltre, i codici creati per questo scopo, sono stati usati velocemente più volte per effettuare correzioni del database in maniera molto veloce (inserimento di nuove immagini, aggiornamento di nomi, aggiunta di codici, …). Sarebbe stato un lavoro assurdo e lentissimo dover copiare e scrivere “a mano” nomi e codici delle immagini nel codice delle pagine.
Un’altra parte fondamentale e importantissima di questo lavoro è stata la creazione di un form di ricerca funzionante in locale, quindi scritto in JavaScript, dove inserire il codice dell’immagine voluta e visualizzare quindi una galleria con la selezione degli scatti che fanno riferimento a quel codice.
Visualizzazione di uno dei preparati
Siamo riusciti a trovare una soluzione anche a questo problema e abbiamo scritto un codice molto pulito che fa riferimento a un archivio in formato testuale coi riferimenti a ogni immagine. La chicca è stata anche la gestione di alcune eccezioni sulla scrittura del codice immagine che comunque vengono corrette (il codice per l’immagine M-312 può essere scritto anche come m-312 o m312). Abbiamo implementato la ricerca quindi sia nella home dove scegliere le categorie e sia nelle pagine di galleria per rendere la navigazione più veloce e semplice.
Il lavoro è stato un successo totale: svolto in tempi eccezionali con una resa ottima. Il cliente è stato estremamente soddisfatto tanto che la direttrice del Museo di Storia Naturale di Parma ha voluto avere i miei contatti per ringraziarmi di persona dell’eccellente lavoro svolto in tempi così stretti.
Dal mio canto è stata una fantastica esperienza per un lavoro diverso dal mio solito, per la fortuna di aver collaborato con professionisti eccezionali che mi hanno permesso di creare un prodotto eccellente e assolutamente impeccabile.