Home

La Home costituisce la pagina principale del sito e la pi`u dinamica. Al di sotto del menu di navigazione un grande slideshow contiene immagi- ni suggestive degli ambienti della Certosa, corredate da una didascalia cliccabile che indirizza l’utente alla pagina relativa a quell’ambiente, in cui pu`o trovare informazioni e altro materiale visuale. Posto sotto lo slideshow, il contenitore centrale ospiter`a di volta in volta aggiornamenti su festival, incontri, presentazioni ecc., sotto forma di post cliccabili che potranno essere visualizzati come una pagina a s`e stante, in cui l’utente potr`a lasciare eventualmente un commento.

Nella Home, inoltre, `e presente una sidebar posta al lato destro, conte- nente le informazioni principali per la visita (orari di apertura e costo del biglietto) e un video introduttivo [55] alla Certosa, realizzato da Drone- sense per la campagna I luoghi del cuore del Fondo Ambientale Italiano, e l’archivio delle notizie pubblicate.

6.2.2 Visita

Nella sezione Visita l’utente pu`o pianificare la sua visita alla Certosa consultando i vari modi in cui raggiungerla: in auto, in treno, in aereo, in autobus, in bicicletta. Qui `e inoltre possibile reperire informazioni riguardo l’accesso ai disabili, le attivit`a offerte alle scolaresche e alle famiglie, con la possibilit`a di contattare gli organizzatori. Nella parte inferiore del contenitore centrale un iframe contente google map fornisce all’utente indicazioni stradali e distanza della Certosa.

6.2.3 Esplora

La sezione Esplora `e articolata in tre sottosezioni: Storia, Mappa e Risor- se. A differenza della pagina precedente, in cui si fornivano informazioni logistiche per la visita del monastero, in questa parte vengono forniti cenni storici riguardanti fondazione e ampliamenti, ma anche descrizioni degli ambienti visitabili, nonch´e un supporto concreto alla visita in loco.

6.2 Organizzazione dei contenuti

Figura 6.9: Home page del sito della Certosa Monumentale.

6.2.3.1 Storia

In questa sezione una timeline navigabile accompagna l’utente attraverso le varie fasi della costruzione della Certosa, dalla sua fondazione ai nume- rosi rimaneggiamenti strutturali e decorativi, dall’abolizione degli ordini monastici alla divisione fra Museo della Certosa Monumentale e Museo di Storia Naturale e del Territorio. La timeline `e stata realizzata con il tool

Figura 6.10: Vista della pagina Visita del sito della Certosa Monumentale

6.2 Organizzazione dei contenuti open source TimelineJS [56], che permette di creare linee temporali dina- miche e ricche di contenuti visuali e non (foto, video, link, collegamenti ai social, ecc.), a partire da un Google Spreadsheet. `E possibile, inoltre, implementare in modo autonomo JSON per customizzare l’installazione mantenendo le funzionalit`a di base del tool. La linea temporale della Certosa `e costituita da due parti: in quella superiore sono presenti foto e didascalie, mentre in quella sottostante una linea del tempo permette all’utente di scorrere avanti ed indietro cronologicamente, o di saltare da un evento all’altro.

6.2.3.2 Mappa

Nella pagina Mappa il contenitore centrale `e occupato da una grande pianta della Certosa. Sulla mappa sono stati posti dei numeri progressi- vi, da 1 a 16, in corrispondenza dei luoghi oggetto della visita e collegati all’elenco numerico della legenda a lato destro della mappa. Sia i nume- ri posti sulla mappa che la legenda sono cliccabili e indirizzano l’utente alla pagina relativa all’ambiente selezionato. La mappa `e stata elabo- rata mediante Gimpe e Inkscape ed `e tratta da una brochure creata in precedenza per la promozione della Certosa. Mentre i link della legenda sono stati realizzati con un tag HTML <href>, i numeri sono stati creati con Inkscape e, sempre con l’ausilio di questo software, sono stati posti sulla planimetria della Certosa. Per renderli cliccabili `e stata selezionata l’area corrispondente al diametro dell’icona tramite il tag <area> [57]. In HTML, infatti, in un’immagine di tipo map, `e possibile selezionare un’area riportando nell’attributo coord [58] le sue coordinate spaziali, specificandone la forma (in questo caso circle), le dimensioni (x, y, o radius) e associandovi un link di destinazione, in questo caso le pagine dedicate alla descrizione degli ambienti.

Queste ultime, accessibili solo attraverso la pagina genitore Mappa, con- tengono informazioni sull’ambiente scelto e uno slideshow di immagini. Da ognuna di loro, inoltre, `e possibile accedere all’ambiente precedente o successivo (in base all’ordine di visita) oppure tornare a Mappa. Le pagine figlie di Mappa, corrispondenti agli ambienti accessibili durante la visita, dunque, sono: la chiesa, la cappella di San Bruno, la cappella del Rosario, la foresteria nobile, il refettorio, il chiostro del Capitolo, la cappella del Capitolo, il chiostro grande, la cella, gli orti, l’appartamento granducale e la farmacia.

Figura 6.12: Sezione del sito dedicata alla mappa della Certosa Monumentale

`

e molto importante, perch`e permette all’utente di acquistare familiarit`a con gli ambienti oggetto della visita in loco.

6.2.3.3 Risorse

L’ultima sezione quella delle Risorse presenta al suo interno una gui- da multimediale scaricabile in formato .epub e consultabile offline, utile all’utente per una migliore esperienza di visita sul posto.

6.2 Organizzazione dei contenuti

Figura 6.13: Una delle pagine dedicate agli ambienti della Certosa Monumentale: l’appartamento granducale

I dettagli sulla realizzazione della guida multimediale sono riportati nella sezione 5.6 di questo capitolo.

6.3 Il tema

WordPress fornisce una nutrita collezione di temi gratuiti [59] fra cui scegliere. Tramite Filtro delle funzionalit`a `e possibile combinare caratte- ristiche diverse fra quelle proposte e associate alle categorie Layout, Fun- zionalit`a e Oggetto. Nel caso del sito per la Certosa di Calci `e stato scelto il tema Brood [60], realizzato dal team Tidyhive Themes. Brood `e stato scelto per il suo layout semplice e responsivo, realizzato con Bootstrap 3, facilmente modificabile e adattabile alle esigenze della Certosa. Il te- ma, infatti, ha costituito una base da cui partire per l’implementazione, tramite codice PHP, di alcune funzionalit`a aggiuntive (il multilinguismo, ad esempio), e per la creazione di pagine strutturare in modo diverso a seconda del contenuto da presentarvi.

6.3.1 La struttura

Il layout del sito della Certosa presenta alcuni elementi ricorrenti in ogni pagina: il logo e il menu di navigazione nella parte superiore, il footer, contenente i contatti e i link ai profili social, nella parte inferiore. Il layout di ogni pagina `e stato deciso in base al contenuto che vi sarebbe stato proposto. Nella Home `e stato inserito un ampio slideshow responsivo, il Carousel di Bootstrap [61], che anticipa il corpo centrale della pagina contenente gli articoli.

1 if( is_home() ){

2 <div id="myCarousel" class="carousel slide" data-ride="carousel ">

3 <!-- Indicatori -->

4 <ol class="carousel-indicators">

5 <li data-target="#myCarousel" data-slide-to="0" class="active "></li>

6 ... 7 </ol>

8 <div class="carousel-inner" role="listbox">

9 <div class="item active" style="background: url(’http:// localhost/certosa/wp-content/uploads/2017/06/facciata.jpg’);

10 background-size: cover; -webkit-background-size: cover; -moz- background-size: cover; -o-background-size: cover;

11 background-position: 20% 30%;">

6.3 Il tema

13 <h4><a href="http://localhost/certosa/mappa/"

target="_blank">Vita eremitica, vita cenobitica: la Certosa di Calci</a></h4>

14 </div> 15 </div>

16 ... 17 </div>

18 <!-- Controlli sinistra e destra -->

19 <a class="left carousel-control" href="#myCarousel" role=" button" data-slide="prev">

20 <span class="glyphicon glyphicon-chevron-left" aria-hidden=" true"></span>

21 <span class="sr-only">Previous</span> 22 </a>

23 <a class="right carousel-control" href="#myCarousel" role=" button" data-slide="next">

24 <span class="glyphicon glyphicon-chevron-right" aria-hidden=

"true"></span>

25 <span class="sr-only">Next</span> 26 </a>

27 </div> 28 }

Script 6.1: Header.php, codice per l’inserimento dello slideshow Carousel nella home page: se la pagina visualizzata `e la home viene stampato lo slideshow.

Nelle altre pagine (Visita, Storia, Mappa, Risorse), invece, si `e deciso di inserire, al di sopra dei contenuti, una sola immagine fissa, con la funzione di marcare la separazione fra menu di navigazione e contenitore centrale. Mediante codice PHP `e stato creato un array ($imgfissa) contenente le immagini scelte. Con l’utilizzo di un contatore ($c) e del comando rand [62], che genera un numero random, a tutte le pagine tranne la home page viene assegnata in modo casuale una delle immagini contenute nell’array. 1 else { 2 $imgfissa = array (); 3 $imgfissa [] = "http://localhost/certosa/wp-content/uploads /2017/06/Rfixed.png"; 4 ... 5 $c=0;

7 if (!is_home() ){ 8 if ($c==0){

9 $rand=rand(0, 7);

10 echo ’<div id="myCarousel" class="carouselfixed" data-ride=" carousel">

11 <!-- Wrapper for slides -->

12 <div class="carouselfixed-inner" role="listbox"> 13 <div class="item active" style="background: url(’.

$imgfissa[$rand].’);

14 background-size: cover; -webkit-background-size: cover; -

moz-background-size: cover;

15 -o-background-size: cover; background-position: 20% 30%;"> 16 </div> 17 </div> 18 </div>’; 19 } 20 $c=1; 21 } 22 } 23 }

Script 6.2: Header.php, codice per l’assegnamento dell’immagine ad una pagina: se la pagina non `e la home, allora viene stampata un’immagine scelta in modo casuale fra quelle inserite nell’array.

Un altro elemento non presente in tutte le pagine `e la sidebar, conte- nente le informazioni relative agli orari di apertura del complesso monu- mentale e al costo del biglietto, un video di presentazione della Certosa e l’archivio degli eventi/notizie.

Per gestire la barra laterale `e stato necessario modificare il sistema a gri- glia di Bootstrap, descritto nel dettaglio nella sezione successiva. Mentre le pagine Home, Visita, Risorse e tutte le pagine figlie di Mappa, hanno una struttura costituita da contenitore centrale e sidebar, nelle pagine Storia e Mappa la struttura interna prevede soltanto la presenza del con- tenitore centrale. La barra laterale, inoltre, `e presente in ogni pagina contenente un articolo e nei risultati della ricerca.

Questa differenza di struttura `e stata gestita nel file sidebar.php imple- mentando una condizione PHP.

1 <?php

2 if ( (is_home()) || (is_page(array(’visita’, ’risorse’, ’

6.3 Il tema

’, ’foresteria-nobile’, ’foresteria-laica’,’orti’, ’capitolo ’, ’chiostro-capitolare’, ’chiostro-grande’, ’refettorio’, ’ appartamento-granducale’, ’cella’, ’chiesa’, ’farmacia’, ’ visit’, ’materials’,’chapel-san-bruno’, ’granducale-

guesthouse’, ’chapel-colloquio’, ’laical-guesthouse’, ’ gardens’, ’chapel-capitolo’,’cloister-capitolo’, ’main- cloister’, ’refectory’, ’cell’, ’chapel-rosario’, ’church’,

’pharmacy’, ’noble-guesthouse’)))|| is_single() || isset(

$ricerca)) { 3 if ( ! is_active_sidebar( ’sidebar-1’ ) ) { 4 return; 5 } 6 ?> 7 </div>

8 <div class="col-md-4">

9 <div id="secondary" class="widget-area" role="complementary"> 10 <?php dynamic_sidebar( ’sidebar-1’ ); ?> 11 </div><!-- #secondary --> 12 </div><!-- .col-md-4 --> 13 </div><!-- .container --> 14 <?php 15 } 16 else { 17 echo ’

18 <div id="secondary" class="widget-area" role="complementary">

19 </div><!-- #secondary -->

20 </div><!-- .container -->’; 21 }

22 ?>

Script 6.3: Sidebar.php, codice per l’utilizzo della sidebar in pagine selezionate.

6.3.2 Il responsive design

Una delle caratteristiche fondamentali del sito per la Certosa di Calci, che lo rende al passo coi tempi e in linea con le abitudini di navigazione degli utenti, riguarda il suo ridimensionarsi in base al dispositivo utiliz- zato. Il responsive design `e una tecnica di web design per la realizzazione di siti che si adattano, automaticamente, al device con cui vengono vi- sualizzati. Gli studi su questa tecnica del World Wide Web Consortium

(W3C) risalgono al 1990, mentre in un libro del 2010, Zoe Mickeley Gil- lenwater ha trattato l’impaginazione flessibile all’interno dei fogli di stile [63]. La prima implementazione di una tag HTML responsive risale al 2012, quando il W3C pubblic`o una bozza per la proposta di un HTML Responsive Images Extension, per la creazione di un tag <picture> che superasse i limiti del precedente tag <img> e consentisse alle pagine web di visualizzare le immagini adattandole alla risoluzione dello schermo usato. In un sito che si possa definire responsivo l’impaginazione grafica `

e il risultato di una commistione di griglie fluide e di una struttura e immagini flessibili. Tale flessibilit`a `e ottenuta tramite l’implementazione delle media queries in un foglio di stile CSS3. Utenti che accedono al sito da device diversi interpretano diverse caratteristiche del codice sorgente che gestisce lo stile del sito in base al dispositivo.

6.3.2.1 Bootstrap

Uno strumento utile per la realizzazione di siti e applicazioni per il web, responsivi, `e Bootstrap [64]. Sviluppato da Mark Otto e Jacob Thornton con il nome di Twitter Blueprint, nasce come framework per uniformare i componenti costitutivi dell’interfaccia web di Twitter, e si basa su modelli di progettazione HTML, CSS e Javascript. Nel 2011 viene rilasciato come software open source, modificabile da qualsiasi sviluppatore. Compatibile con le ultime versioni dei principali browser e attualmente alla versione 4.0, che implementa il responsive design come impostazione predefinita, `

e possibile scaricare ed utilizzare il framework in tre tipologie:

• versione compilata, costituita dalle versioni compilate dei file CSS e Javascript;

• codice sorgente, comprendente i file LESS originali e i plugin jQue- ry.

6.3.2.1.1 Il sistema a griglia

L’architettura responsiva di Bootstrap si basa su un sistema a griglia composto da righe e colonne che ospitano il contenuto della pagina. La documentazione [65] di Bootstrap spiega chiaramente il funzionamento del sistema a griglia: le righe .row, contenute in un .container ( a lar- ghezza fissa, fixed-width) o .container-fluid ( a larghezza massima, full-width), ospitano al loro interno un numero arbitrario di colonne, fino ad un massimo di 12, corrispondenti al 100% dell’intera riga. A seconda

6.3 Il tema delle esigenze `e possibile combinare colonne di dimensioni diverse fino ad occupare tutto lo spazio disponibile nella riga stessa. Nel caso del sito

Figura 6.14: Diagramma del sistema a griglia utilizzato da Bootstrap

realizzato per la Certosa di Calci, ad esempio, alcune pagine, come Storia e Mappa presentano <div class=row> costituito da una colonna di di- mensioni .col-md-12, grande quindi quanto tutto il container centrale. In altri casi, quali Home, Visita e Risorse, sono presenti due colonne, una di dimensioni .col-md-8, che ospita il contenuto della pagina, e una di dimensioni .col-md-4, contenente la sidebar (per un totale di 12). Ad ogni colonna `e associata una classe il cui prefisso indica la dimensione del device di riferimento: .col-xs-* (extra-small), .col-sm-* (small), .col-md-* (medium) e .col-lg-* (large).

6.3.2.1.2 Resolution breakpoint e media query

Nel responsive design i resolution breakpoint sono soglie, secondo le quali variare l’impaginazione grafica di un sito in funzione della larghezza dello schermo del dispositivo preso in considerazione. Queste soglie, espresse in pixel, sono dichiarate all’interno del foglio di stile CSS tramite la regola media query, con la seguente sintassi: @media screen and (max-width: *) and (min-width: *).

Max-width e min-width esprimono, rispettivamente, la dimensione mas- sima e minima, in pixel, del device di riferimento. Bootstrap implementa quattro resolution breakpoint relativi a quattro tipi di device:

• extra small device (di default in Bootstrap), telefoni cellulari con risoluzione inferiore a 768px;

• small device, tablet con risoluzione a partire da 768px; • medium device, desktop con risoluzione a partire da 992px; • large device, desktop grandi con risoluzione a partire da 1200px. In ogni media query, inoltre, `e possibile combinare la dimensione dello schermo con l’orientamento dello stesso, impostando la versione portrait (verticale) o landscape (orizzontale). Nel caso del sito per la Certosa di Calci sono stati definiti cinque breakpoint:

• @media only screen and (max-width: 414px) and (orientation: portrait): per i pi`u comuni dispositivi mobili in modalit`a portrait (iPhone 5, iPhone 6, iPhone 6+, Galaxy S5, Nexus 5X, Nexus 6P); • @media only screen and (max-width: 736px) and (orientation:

landscape): per i pi`u comuni dispositivi mobili in modalit`a land- scape (iPhone 5, iPhone 6, iPhone 6+, Galaxy S5, Nexus 5X, Nexus 6P);

• @media only screen and (min-width: 768px) and (max-width: 1023): per tablet (iPad);

• @media only screen and (min-width: 1024px) and (max-width: 1199px): per tablet di grandi dimensioni (iPad Pro);

• @media only screen and (min-width: 1200px): per distingue- re i tablet dagli schermi desktop.