299 lines
		
	
	
		
			18 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			299 lines
		
	
	
		
			18 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <!DOCTYPE html>
 | ||
| <html lang="it" data-text="html" data-theme="light">
 | ||
| <head>
 | ||
|     <meta charset="UTF-8" />
 | ||
|     <link rel="stylesheet" href="css/app.css" />
 | ||
|     <link rel="shortcut icon" type="image/png" href="/img/favicon.png">
 | ||
|     <title>Carta Archeologica Isola di Capri</title>
 | ||
|     <script type="importmap">
 | ||
|     {
 | ||
|         "imports": {
 | ||
|         "@hotwired/stimulus": "./webgis/js/vendor/@hotwired/stimulus/dist/stimulus.js"
 | ||
|         }
 | ||
|     }
 | ||
|     </script>
 | ||
| </head>
 | ||
| <body data-controller="modal">
 | ||
|     <nav class="navbar mb-2 p-3 has-bottom-border" role="navigation">
 | ||
|         <div class="navbar-brand">
 | ||
|             <a class="navbar-item" href="https://ispc.cnr.it" title="CNR-ISPC">
 | ||
|                 <img class="image" src="img/logo_ispc_compatto.png" style="min-height: 88px;" />
 | ||
|             </a>
 | ||
|             <a class="navbar-item" title="Associazione Apragopolis">
 | ||
|                 <img class="image" src="img/logo_apragopolis.jpg" style="min-height: 68px;" />
 | ||
|             </a>
 | ||
|             <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="nav-menu">
 | ||
|                 <span aria-hidden="true"></span>
 | ||
|                 <span aria-hidden="true"></span>
 | ||
|                 <span aria-hidden="true"></span>
 | ||
|                 <span aria-hidden="true"></span>
 | ||
|             </a>
 | ||
|         </div>
 | ||
|         <hr class="navbar-divider">
 | ||
|         <div class="navbar-end">
 | ||
|             <a href="/webgis/" class="navbar-item">WebGIS</a>
 | ||
|             <a class="navbar-item" href="https://www.comune.anacapri.na.it/" title="Comune di Anacapri">
 | ||
|                 <img class="image" src="img/logo_anacapri.svg" style="min-height: 88px;" />
 | ||
|             </a>
 | ||
|             <a class="navbar-item" href="https://www.cittadicapri.it/" title="Comune di Capri">
 | ||
|                 <img class="image" src="img/logo_comune_capri.png" style="min-height: 88px;" />
 | ||
|             </a>
 | ||
|         </div>
 | ||
|     </nav>
 | ||
|     <div class="main content mt-5">
 | ||
|         <h1 class="mt-6 title has-text-centered">La Carta Archeologica dell'Isola di Capri</h1>
 | ||
|         <div class="columns">
 | ||
|             <div class="column"></div>
 | ||
|             <div class="column is-three-quarters is-size-5">
 | ||
|                 <section class="section pb-1 has-text-centered">
 | ||
|                     La carta archeologica di Capri è frutto di un lavoro condiviso tra il <a href="https://ispc.cnr.it">CNR–ISPC</a>,
 | ||
|                     la <a href="https://sabapmetropolitanana.cultura.gov.it/">Soprintendenza Archeologia Belle Arti e Paesaggio per l'Area Metropolitana di Napoli</a>,
 | ||
|                     i Comuni di Capri e Anacapri e l’Associazione Culturale Apragopolis.
 | ||
|                     Il <a href="/webgis/">WebGis</a>, creato appositamente per una consultazione facile e interattiva, contiene gli elaborati dei rilievi
 | ||
|                     archeologici svolti, le ricerche archivistiche e bibliografiche sui beni archeologici oggi visibili e su quelli
 | ||
|                     non più esistenti, la raccolta della cartografia storica, contenuti multimediali e immagini storiche.
 | ||
|                 </section>
 | ||
|             </div>
 | ||
|             <div class="column"></div>
 | ||
|         </div>
 | ||
|         <div class="level is-fullwidth mb-0 has-background-light">
 | ||
|             <div class="columns mt-5 is-8" style="width: 80vw; margin-left: auto; margin-right: auto">
 | ||
|                 <div class="column card has-text-centered is-one-third"
 | ||
|                     data-id="progetto" data-action="click->modal#homeOpen">
 | ||
|                     <div class="card-image">
 | ||
|                         <img src="img/progetto.jpg" />
 | ||
|                     </div>
 | ||
|                     <div class="card-content">
 | ||
|                         <button class="button is-link mt-3 is-large has-text-white">
 | ||
|                             Il progetto
 | ||
|                         </button>
 | ||
|                     </div>
 | ||
|                 </div>
 | ||
|                 <div class="column card has-text-centered is-clickable"
 | ||
|                     data-id="webgis" data-action="click->modal#homeOpen">
 | ||
|                     <div class="card-image">
 | ||
|                         <img src="img/webgis.jpg" />
 | ||
|                     </div>
 | ||
|                     <div class="card-content">
 | ||
|                         <button class="button is-link mt-3 is-large has-text-white">
 | ||
|                             Il WebGIS
 | ||
|                         </button>
 | ||
|                     </div>
 | ||
|                 </div>
 | ||
|                 <div class="column card has-text-centered mb-5">
 | ||
|                     <div class="card-image">
 | ||
|                         <img src="img/cartografia.jpg" />
 | ||
|                     </div>
 | ||
|                     <div class="card-content">
 | ||
|                         <a href="" class="button is-link is-large mt-3 has-text-white">Cartografia storica</a>
 | ||
|                     </div>
 | ||
|                 </div>
 | ||
|             </div>
 | ||
|         </div>
 | ||
|         <div class="level is-fullwidth mt-0 has-background-light">
 | ||
|             <div class="columns is-8 pt-6 pb-6" style="width: 80vw; margin-left: auto; margin-right: auto">
 | ||
|                 <div class="column is-one-third card has-text-centered">
 | ||
|                     <div class="card-image">
 | ||
|                         <img src="img/pubblicazioni.jpg" />
 | ||
|                     </div>
 | ||
|                     <div class="card-content">
 | ||
|                         <a href="" class="button is-link is-large mt-3 has-text-white">Pubblicazioni</a>
 | ||
|                     </div>
 | ||
|                 </div>
 | ||
|                 <div class="column card has-text-centered is-clickable"
 | ||
|                     data-id="credits" data-action="click->modal#homeOpen">
 | ||
|                     <div class="card-image">
 | ||
|                         <img src="img/credits.jpg" />
 | ||
|                     </div>
 | ||
|                     <div class="card-content">
 | ||
|                         <button class="button is-link is-large mt-3 has-text-white">Credits</button>
 | ||
|                     </div>
 | ||
|                 </div>
 | ||
|                 <div class="column card mb-5 has-text-centered is-clickable"
 | ||
|                     data-id="riconoscimenti" data-action="click->modal#homeOpen">
 | ||
|                     <div class="card-image">
 | ||
|                         <img src="img/riconoscimenti.jpg" />
 | ||
|                     </div>
 | ||
|                     <div class="card-content">
 | ||
|                         <button class="button is-link is-large mt-3 has-text-white">Riconoscimenti</button>
 | ||
|                     </div>
 | ||
|                 </div>
 | ||
|             </div>
 | ||
|         </div>
 | ||
|         </div>
 | ||
|         <div class="modal" data-modal-target="modal" data-id="progetto">
 | ||
|             <div class="modal-background" data-action="click->modal#homeClose" data-id="progetto"></div>
 | ||
|             <div class="modal-card">
 | ||
|             <header class="modal-card-head">
 | ||
|                 <h3 class="modal-card-title has-text-centered">Il progetto</h3> 
 | ||
|                 <button class="delete" aria-label="close" data-action="modal#homeClose" data-id="progetto"></button>
 | ||
|             </header>
 | ||
|             <section class="modal-card-body">
 | ||
|                 <p class="p-2 mt-2 mb-2">
 | ||
|                     Il progetto per la realizzazione della carta archeologica dell’isola di Capri vede coinvolti, tramite appositi accordi di collaborazione e sotto la direzione scientifica della Soprintendenza Archeologia Belle Arti e Paesaggio per l’Area Metropolitana di Napoli, i Comuni di Capri e di Anacapri, l’Istituto di Scienze del Patrimonio Culturale (ISPC) del CNR e l’Associazione Culturale Apragopolis.
 | ||
|                 </p>
 | ||
|                 <p class="p-2 mt-2 mb-2">
 | ||
|                     L’obiettivo principale consiste nell’acquisire conoscenze sull’effettiva estensione dei beni archeologici presenti sull’isola, localizzarne i resti e approfondirne le funzioni e dimensioni originarie. La creazione di una mappa archeologica dell’isola rappresenta lo strumento più idoneo per affrontare diverse esigenze, tra cui facilitare le azioni mirate alla protezione e valorizzazione del patrimonio culturale, oltre a fornire una corretta comprensione dell’evoluzione territoriale. Questa comprensione è un presupposto fondamentale per ricostruire gli eventi storici dell’area e guidare la pianificazione territoriale.
 | ||
|                 </p>
 | ||
|                 <p class="p-2 mt-2 mb-2">
 | ||
|                     Il progetto sperimenta l’utilizzo di metodi innovativi di rappresentazione dei monumenti per produrre nuovi contenuti scientifici e una documentazione grafica dettagliata utile all’analisi archeologica. Attraverso la creazione del webgis si consente a tutti i soggetti interessati di fruire liberamente ed in maniera condivisa delle informazioni storico-archeologiche appositamente raccolte e archiviate.
 | ||
|                 </p>
 | ||
|                 <p class="p-2 mt-2 mb-2">
 | ||
|                     Il contributo del CNR ha riguardato il censimento del noto, la raccolta e lo studio della cartografia storica, le attività di rilevamento archeologico dei siti di estensione maggiore scarsamente studiati e rappresentati, la schedatura e analisi delle murature e delle tecniche costruttive, ipotesi di ricostruzione e delle funzioni degli spazi, nonché la costruzione del sistema Web GIS.
 | ||
|                 </p>
 | ||
|                 <p class="p-2 mt-2 mb-2">
 | ||
|                     L’Associazione Culturale Apragopolis ha condotto attività di digitalizzazione e analisi della documentazione d’archivio storico e corrente (documenti amministrativi, documentazione di scavo, disegni storici, planimetrie e fotografie), unitamente a ricognizioni sul campo con il coinvolgimento di esperti per l’avvio dei rilievi subacquei e per la realizzazione di ricostruzioni virtuali.
 | ||
|                 </p>
 | ||
|             </section>
 | ||
|             <footer class="modal-card-foot">
 | ||
|             </footer>
 | ||
|             </div>
 | ||
|         </div>
 | ||
|         <div class="modal" data-modal-target="modal" data-id="webgis">
 | ||
|             <div class="modal-background" data-action="click->modal#homeClose" data-id="webgis"></div>
 | ||
|             <div class="modal-card">
 | ||
|             <header class="modal-card-head">
 | ||
|                 <h3 class="modal-card-title has-text-centered">Il WebGIS</h3> 
 | ||
|                 <button class="delete" aria-label="close" data-action="modal#homeClose" data-id="webgis"></button>
 | ||
|             </header>
 | ||
|             <section class="modal-card-body">
 | ||
|                 <p>
 | ||
|                     Il WebGIS è una tipologia di mappa georeferenziata interattiva presentata 
 | ||
|                     tramite il Web, quindi fruibile attraverso un qualsiasi browser moderno.
 | ||
|                 </p>
 | ||
|                 <p>
 | ||
|                     Il WebGIS relativo alla Carta Archeologica dell'Isola di Capri è stato realizzato
 | ||
|                     utilizzando esclusivamente tecnologie open-source, principalmente la libreria JavaScript
 | ||
|                     <a href="https://leafletjs.com">Leaflet</a> per il rendering della mappa con
 | ||
|                     i layer (livelli) georeferenziati contenenti i punti geografici e le strutture rilevate
 | ||
|                     dal progetto, e il framework PHP <a href="https://symfony.com">Symfony</a> per lo
 | ||
|                     sviluppo della API (lato server) che interagisce con il database per recuperare le informazioni
 | ||
|                     e i dati relativi ai punti da visualizzare sulla mappa.
 | ||
|                 </p>
 | ||
|                 <p>
 | ||
|                     Il database stesso è stato costruito con il sistema <a href="https://www.postgresql.org/">PostgreSQL</a>, il quale - attraverso l'estensione
 | ||
|                     <a href="https://postgis.net/">PostGIS</a> - permette di rappresentare dati geografici e geometrici e fornisce un insieme di
 | ||
|                     funzionalità integrate per l'interazione e le operazioni con i dati geometrici, rendendolo quindi
 | ||
|                     particolarmente utile per applicazioni <abbr title="Geography Information Systems">GIS</abbr>.
 | ||
|                 </p>
 | ||
|                 <p class="has-text-centered">
 | ||
|                     <a href="webgis/" class="button mt-6 is-link is-large has-text-white">Accedi al WebGIS</a>
 | ||
|                 </p>
 | ||
|             </section>
 | ||
|             <footer class="modal-card-foot">
 | ||
|             </footer>
 | ||
|         </div>
 | ||
|         </div>
 | ||
|         <div class="modal" data-modal-target="modal" data-id="credits">
 | ||
|             <div class="modal-background" data-action="click->modal#homeClose" data-id="credits"></div>
 | ||
|             <div class="modal-card">
 | ||
|                 <header class="modal-card-head">
 | ||
|                     <h3 class="modal-card-title has-text-centered">Credits</h3> 
 | ||
|                     <button class="delete" aria-label="close" data-action="modal#homeClose" data-id="credits"></button>
 | ||
|                 </header>
 | ||
|                 <section class="modal-card-body">
 | ||
|                     <article class="media">
 | ||
|                         <figure class="media-left">
 | ||
|                           <p class="image is-128x128">
 | ||
|                             <img src="img/logo-soprintendenza-abap-area-metropolitana-napoli-bianco-e1680166536285.webp" />
 | ||
|                           </p>
 | ||
|                         </figure>
 | ||
|                         <div class="media-content">
 | ||
|                           <div class="content">
 | ||
|                             <p>
 | ||
|                               <strong>
 | ||
|                                 <a href="https://sabapmetropolitanana.cultura.gov.it/">
 | ||
|                                     Soprintendenza Archeologia Belle Arti e Paesaggio per l'Area Metropolitana di Napoli
 | ||
|                                 </a>
 | ||
|                               </strong>
 | ||
|                               <br />
 | ||
|                                Direzione scientifica
 | ||
|                             </p>
 | ||
|                           </div>
 | ||
|                         </div>
 | ||
|                     </article>
 | ||
|                     <article class="media">
 | ||
|                         <figure class="media-left">
 | ||
|                           <p class="image is-128x128">
 | ||
|                             <img src="img/logo_ispc_compatto.png" />
 | ||
|                           </p>
 | ||
|                         </figure>
 | ||
|                         <div class="media-content">
 | ||
|                           <div class="content">
 | ||
|                             <p>
 | ||
|                               <strong><a href="https://ispc.cnr.it">CNR-ISPC</a></strong>
 | ||
|                               <br />
 | ||
|                                 Rilievo archeologico con analisi delle murature, schedatura e studio delle emergenze indagate,
 | ||
|                                 documentazione grafica archeologica di cartografie, planimetrie, prospetti e sezioni,
 | ||
|                                 modellazione 3D e video, creazione del <a href="webgis/">WebGIS</a> (elaborazione, struttura
 | ||
|                                 logica dei contenuti, architettura e sviluppo software, grafica), ricerche bibliografiche,
 | ||
|                                 raccolta e georeferenziazione dei vincoli archeologici e paesaggistici. 
 | ||
|                             </p>
 | ||
|                           </div>
 | ||
|                         </div>
 | ||
|                       </article>
 | ||
|                     <article class="media">
 | ||
|                         <figure class="media-left">
 | ||
|                           <p class="image is-128x128">
 | ||
|                             <img src="img/logo_apragopolis.jpg" />
 | ||
|                           </p>
 | ||
|                         </figure>
 | ||
|                         <div class="media-content">
 | ||
|                           <div class="content">
 | ||
|                             <p>
 | ||
|                               <strong>Associazione Culturale Apragopolis</strong>
 | ||
|                               <br />
 | ||
|                                 Ricerche archivistiche e bibliografiche, schedatura dei siti e rinvenimenti archeologici, incarichi
 | ||
|                                 a professionisti per rilievi subacquei e ricostruzioni virtuali, organizzazione di convegni e curatela
 | ||
|                                 di pubblicazioni inerenti lo studio archeologico dell’isola.
 | ||
|                             </p>
 | ||
|                           </div>
 | ||
|                         </div>
 | ||
|                     </article>
 | ||
|                 </section>
 | ||
|                 <footer class="modal-card-foot">
 | ||
|                 </footer>
 | ||
|             </div>
 | ||
|         </div>
 | ||
|         <div class="modal" data-modal-target="modal" data-id="riconoscimenti">
 | ||
|             <div class="modal-background" data-action="click->modal#homeClose" data-id="riconoscimenti"></div>
 | ||
|             <div class="modal-card">
 | ||
|                 <header class="modal-card-head">
 | ||
|                     <h3 class="modal-card-title has-text-centered">Riconoscimenti</h3> 
 | ||
|                     <button class="delete" aria-label="close" data-action="modal#homeClose" data-id="riconoscimenti"></button>
 | ||
|                 </header>
 | ||
|                 <section class="modal-card-body">
 | ||
|                     <p>
 | ||
|                         Il progetto della carta archeologica dell’isola di Capri è stato realizzato con il contributo dei
 | ||
|                         Comuni di Capri e Anacapri, i convegni internazionali e i relativi volumi sono stati svolti e pubblicati
 | ||
|                         con il sostegno della Direzione Generale Educazione, Ricerca e Istituti Culturali e del Porto Turistico di Capri.
 | ||
|                     </p>
 | ||
|                     <p class="has-text-centered mt-5">
 | ||
|                         <img src="img/logo direzione generale ricerca.png">
 | ||
|                     </p>
 | ||
|                     <p class="has-text-centered mt-5">
 | ||
|                         <img src="img/logo porto turistico.png">
 | ||
|                     </p>
 | ||
|                 </section>
 | ||
|                 <footer class="modal-card-foot">
 | ||
|                 </footer>
 | ||
|             </div>
 | ||
|         </div>
 | ||
|     </div>
 | ||
|     <footer class="footer has-text-centered">
 | ||
|         <p>© <span id="c-year"></span> CNR-ISPC Tutti i diritti riservati</p>
 | ||
|     </footer>
 | ||
|     <script type="text/javascript" defer>
 | ||
|         const year = new Date().getFullYear();
 | ||
|         document.getElementById('c-year').innerText = year;
 | ||
|     </script>
 | ||
|     <script type="module">
 | ||
|         import { Application } from '@hotwired/stimulus';
 | ||
|         import ModalController from './webgis/js/controllers/modal_controller.js';
 | ||
| 
 | ||
|         window.Stimulus = Application.start();
 | ||
|         Stimulus.register("modal", ModalController);
 | ||
|     </script>
 | ||
| </body>
 | ||
| </html>
 |