Plone CMS, Bootstrap Italia e Nunjucks per Ispra
La nuova interfaccia web dell’Istituto Superiore per la Protezione e la Ricerca Ambientale
release: 2020
Tipologia: Pubblica Amministrazione
Il cliente
L' Istituto Superiore per la Protezione e la Ricerca Ambientale (ISPRA), è un ente di ricerca italiano nato nel 2008 dall'accorpamento di tre enti controllati dal Ministero dell'Ambiente e della Tutela del Territorio e del Mare (Agenzia per la Protezione dell'Ambiente e per i Servizi Tecnici, Istituto Centrale per la Ricerca scientifica e tecnologica Applicata al Mare, Istituto Nazionale per la Fauna Selvatica).
La sua mission è quella di razionalizzare l'attività svolta dai suddetti tre organismi ed assicurare maggiore efficacia alla protezione ambientale, contenendo al contempo la spesa pubblica.
La sfida: è tempo di innovare
L’Ispra si è rivolto ad Unitiva con l’esigenza di migrare la versione del CMS Plone all’ultima disponibile (v5.2, scaricabile qui) e modernizzare le dinamiche di utilizzo del suo portale web divulgativo rendendolo più user friendly per i propri utenti. Il sito web precedente non era responsive e quindi di difficile consultazione dai dispositivi mobili, oltre al fatto che il design datato ne rendeva meno appetibili i contenuti per l’utente finale.
La necessità, dunque, era in primis quella di un adeguamento tecnologico e in secondo luogo quella di adattarsi al target seguendo le Linee guida di design per i servizi digitali della PA , per le quali i cittadini devono essere il fulcro della comunicazione da parte della pubblica amministrazione. 
La Soluzione: collaborazione tra team e metodo agile
Unitiva ha intrapreso un piano di riprogettazione ripartito in step:
studio di una nuova user experience, per rendere maggiormente fruibili i contenuti di maggiore rilevanza pubblica;
progettazione dell’ interfaccia utente, a partire da nuovi colori, font e stile in base alle richieste del cliente.
creazione del front-end con tecnologie Open Source
migrazione dei contenuti dal vecchio al nuovo portale
ricostruzione dei vecchi contenuti nella nuova veste grafica e adattamento alle due lingue del portale, italiano ed inglese.
In ognuna di queste fasi il team di Unitiva ha lavorato a stretto contatto con il team di sviluppatori e redattori dell’Ispra, creando una sinergia che ha permesso il buon avanzamento del progetto secondo la tabella di marcia stabilita.
Affrontando tutto in modo agile i due team hanno collaborato per spiegare le proprie esigenze, l’uno, e andare in contro con soluzioni mirate, l’altro.
I Risultati: redesign sì, ma mobile first
Il miglioramento dell'esperienza utente del sito web è stata una parte importante del progetto, ma il primo obiettivo era quello di puntare sulla efficacia della navigazione da mobile. Abbiamo, quindi, utilizzato l’approccio Mobile first.
Il front-end del nuovo design, realizzato con l’adattamento del pacchetto messo a disposizione dal progetto Bootstrap Italia con l’aggiunta del motore di templating Nujucks per l’inclusione degli snippet di codice html e l’utilizzo del cms Plone, ha restituito una UI moderna, accessibile, comprensibile, con un cms da sempre robusto ed affidabile.
L’aver utilizzato un pacchetto Open Source garantisce anche una certa manutenibilità del sito, per restare sempre aggiornati con le direttive ministeriali.
Le Tecnologie
- jQuery © jQuery Foundation, licenza MIT
- Popper.js © Federico Zivolo and contributors, licenza MIT
- Bootstrap 4 © Twitter, Inc., licenza MIT
- Bootstrap Select © SnapAppointments, LLC, licenza MIT
- Owl Carousel 2 © Owl (David Deutsch), licenza MIT
- jQuery Easing © George McGinley Smith, licenza BSD
- Motore di templating completo per javascript Nunjucks
- Tool per il reload automatico del browser Browser Sync Apache License Version 2.0
- Compilazione SASS node-sass , © Andrew Nesbitt, licenza MIT
- GitHub REST API client per JavaScript Octokit rest.js © 2012 Cloud9 IDE, Inc. (Mike de Boer), 2017-2018 Octokit contributors, licenza MIT
- Pacchetto Unitiva
URL del progetto: www.isprambiente.gov.it
