Reorganize structure with entry point
This commit is contained in:
parent
e9c8ac6b07
commit
59204a591f
BIN
img/webgis.webp
Normal file
BIN
img/webgis.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
186
index.html
186
index.html
@ -2,21 +2,13 @@
|
||||
<html lang="it" data-text="html" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="js/vendor/leaflet/dist/leaflet.css" />
|
||||
<link rel="stylesheet" href="css/app.css" />
|
||||
<link rel="stylesheet" href="js/vendor/spotlight.js/dist/css/spotlight.min.css" />
|
||||
<link rel="stylesheet" href="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css" />
|
||||
<script src="js/vendor/leaflet/dist/leaflet.js"></script>
|
||||
<script src="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js"></script>
|
||||
<script src="js/index.js" type="module"></script>
|
||||
<title>WebGIS Isola di Capri</title>
|
||||
<title>Carta Archeologica Isola di Capri</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar mb-2" role="navigation">
|
||||
<nav class="navbar mb-2 is-light" role="navigation">
|
||||
<div class="navbar-brand">
|
||||
<span class="navbar-item is-size-3">
|
||||
WebGIS Isola di Capri
|
||||
</span>
|
||||
<span class="navbar-item is-size-3">Carta Archeologica Isola di Capri</span>
|
||||
<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>
|
||||
@ -25,151 +17,43 @@
|
||||
</a>
|
||||
</div>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-menu ml-3 container is-align-items-center is-justify-content-center" id="nav-menu">
|
||||
<button class="navbar-item button is-size-5 is-white" role="button" id="siti">
|
||||
<i class="fa fa-list mr-2"></i> Beni archeologici
|
||||
</button>
|
||||
<button class="navbar-item is-size-5 is-white" title="Informazioni sul progetto" id="progetto">
|
||||
<i class="fa fa-info-circle mr-2"></i> Progetto
|
||||
</button>
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
</div>
|
||||
<div class="navbar-end"></div>
|
||||
</nav>
|
||||
<!-- TODO Loader -->
|
||||
<div class="wait-lg text-center is-hidden" style="clear: both;">
|
||||
<p>Loading...</p>
|
||||
<div class="loading loading-lg"></div>
|
||||
</div>
|
||||
<div class="main columns">
|
||||
<div class="column is-hidden" id="menu">
|
||||
<aside class="menu ml-4">
|
||||
<p class="menu-label">
|
||||
Beni archeologici
|
||||
<button title="Chiudi menu" class="button is-small is-pulled-right" id="close-menu">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-chevron-left"></i>
|
||||
</span>
|
||||
</button>
|
||||
<div class="main content">
|
||||
<section class="section">
|
||||
<h1 class="m-4 has-text-centered">Il WebGIS</h1>
|
||||
<div class="columns mt-5">
|
||||
<div class="column"></div>
|
||||
<div class="column is-two-thirds is-size-5">
|
||||
<p>
|
||||
Il WebGIS è una tipologia di mappa georeferenziata interattiva presentata
|
||||
tramite il Web, quindi fruibile attraverso un qualsiasi browser moderno.
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
<li>
|
||||
<a class="is-block button" title="Vai al sito Villa di Gradola" id="gradola">
|
||||
Villa di Gradola
|
||||
</a>
|
||||
<a class="button" title="Vai al sito Villa di Damecuta" id="damecuta">
|
||||
Villa di Damecuta
|
||||
</a>
|
||||
<a class="button" title="Vai al sito Grotta di Matermania" id="matermania">
|
||||
Grotta di Matermania
|
||||
</a>
|
||||
<a class="button" id="arsenale">
|
||||
Grotta dell'Arsenale
|
||||
</a>
|
||||
<a class="button" id="tiberio">
|
||||
Bagni di Tiberio
|
||||
</a>
|
||||
<a class="button" id="mura">
|
||||
Mura greche
|
||||
</a>
|
||||
<a class="button" id="san_michele">
|
||||
Villa San Michele
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
<div class="column is-full">
|
||||
<div id="map" aria-describedby="map-progress" aria-busy="true" style="position: relative;">
|
||||
<progress id="map-progress" class="p-2 progress is-medium is-link" aria-label="Map loading..." />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sites data modal -->
|
||||
<div class="modal" id="site-data">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content has-background-white" style="min-height: 95vh;">
|
||||
<div class="tabs is-centered">
|
||||
<ul>
|
||||
<li class="is-active" id="for-short-sheet">
|
||||
<a>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-info-circle" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Scheda sintetica</span>
|
||||
</a>
|
||||
</li>
|
||||
<li id="for-site-sheet">
|
||||
<a>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-info-circle" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Scheda dettagliata</span>
|
||||
</a>
|
||||
</li>
|
||||
<li id="for-photos">
|
||||
<a>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-image" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Disegni e fotografie</span>
|
||||
</a>
|
||||
</li>
|
||||
<li id="for-documents">
|
||||
<a>
|
||||
<span class="icon is-small"
|
||||
><i class="far fa-file-alt" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Documenti</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="data-tabs" id="short-sheet"></div>
|
||||
<div class="data-tabs is-hidden" id="site-sheet"></div>
|
||||
<div class="data-tabs is-hidden" id="photos"></div>
|
||||
<div class="data-tabs is-hidden" id="documents"></div>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
<!-- Not conserved modal -->
|
||||
<div class="modal" id="not-conser-data">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content has-background-white" style="min-height: 95vh;">
|
||||
<div id="not-conser-sheet"></div>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
<!-- Project info modal -->
|
||||
<div class="modal" id="project-info">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card content has-background-white panel" style="width: 70vw;">
|
||||
<header class="modal-card-head p-5">
|
||||
<h1 class="modal-card-title has-text-centered mb-0"><i class="fa fa-info-circle mr-2"></i> Il progetto</h1>
|
||||
<button class="delete" aria-label="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body is-size-5">
|
||||
<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>
|
||||
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 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>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>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et sed quidem atque? Delectus, blanditiis sint. Numquam tempora nemo perferendis ea modi. Pariatur voluptatibus ut consequatur? Sit reprehenderit in accusantium delectus.</p>
|
||||
<div class="card mt-6">
|
||||
<img class="image" src="img/webgis.webp" />
|
||||
<div class="card-content has-text-centered">
|
||||
<a href="webgis/" class="button is-link is-large">Accedi al WebGIS</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column"></div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<div class="buttons">
|
||||
<button class="button">Chiudi</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
Before Width: | Height: | Size: 488 KiB After Width: | Height: | Size: 488 KiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 605 KiB After Width: | Height: | Size: 605 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 196 KiB After Width: | Height: | Size: 196 KiB |
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 431 KiB After Width: | Height: | Size: 431 KiB |
|
Before Width: | Height: | Size: 261 KiB After Width: | Height: | Size: 261 KiB |
176
webgis/index.html
Normal file
176
webgis/index.html
Normal file
@ -0,0 +1,176 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="it" data-text="html" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="js/vendor/leaflet/dist/leaflet.css" />
|
||||
<link rel="stylesheet" href="../css/app.css" />
|
||||
<link rel="stylesheet" href="js/vendor/spotlight.js/dist/css/spotlight.min.css" />
|
||||
<link rel="stylesheet" href="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css" />
|
||||
<script src="js/vendor/leaflet/dist/leaflet.js"></script>
|
||||
<script src="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js"></script>
|
||||
<script src="js/index.js" type="module"></script>
|
||||
<title>WebGIS Isola di Capri</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar mb-2" role="navigation">
|
||||
<div class="navbar-brand">
|
||||
<span class="navbar-item is-size-3">
|
||||
WebGIS Isola di Capri
|
||||
</span>
|
||||
<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-menu ml-3 container is-align-items-center is-justify-content-center" id="nav-menu">
|
||||
<button class="navbar-item button is-size-5 is-white" role="button" id="siti">
|
||||
<i class="fa fa-list mr-2"></i> Beni archeologici
|
||||
</button>
|
||||
<button class="navbar-item is-size-5 is-white" title="Informazioni sul progetto" id="progetto">
|
||||
<i class="fa fa-info-circle mr-2"></i> Progetto
|
||||
</button>
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
</div>
|
||||
</nav>
|
||||
<!-- TODO Loader -->
|
||||
<div class="wait-lg text-center is-hidden" style="clear: both;">
|
||||
<p>Loading...</p>
|
||||
<div class="loading loading-lg"></div>
|
||||
</div>
|
||||
<div class="main columns">
|
||||
<div class="column is-hidden" id="menu">
|
||||
<aside class="menu ml-4">
|
||||
<p class="menu-label">
|
||||
Beni archeologici
|
||||
<button title="Chiudi menu" class="button is-small is-pulled-right" id="close-menu">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-chevron-left"></i>
|
||||
</span>
|
||||
</button>
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
<li>
|
||||
<a class="is-block button" title="Vai al sito Villa di Gradola" id="gradola">
|
||||
Villa di Gradola
|
||||
</a>
|
||||
<a class="button" title="Vai al sito Villa di Damecuta" id="damecuta">
|
||||
Villa di Damecuta
|
||||
</a>
|
||||
<a class="button" title="Vai al sito Grotta di Matermania" id="matermania">
|
||||
Grotta di Matermania
|
||||
</a>
|
||||
<a class="button" id="arsenale">
|
||||
Grotta dell'Arsenale
|
||||
</a>
|
||||
<a class="button" id="tiberio">
|
||||
Bagni di Tiberio
|
||||
</a>
|
||||
<a class="button" id="mura">
|
||||
Mura greche
|
||||
</a>
|
||||
<a class="button" id="san_michele">
|
||||
Villa San Michele
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
<div class="column is-full">
|
||||
<div id="map" aria-describedby="map-progress" aria-busy="true" style="position: relative;">
|
||||
<progress id="map-progress" class="p-2 progress is-medium is-link" aria-label="Map loading..." />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sites data modal -->
|
||||
<div class="modal" id="site-data">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content has-background-white" style="min-height: 95vh;">
|
||||
<div class="tabs is-centered">
|
||||
<ul>
|
||||
<li class="is-active" id="for-short-sheet">
|
||||
<a>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-info-circle" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Scheda sintetica</span>
|
||||
</a>
|
||||
</li>
|
||||
<li id="for-site-sheet">
|
||||
<a>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-info-circle" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Scheda dettagliata</span>
|
||||
</a>
|
||||
</li>
|
||||
<li id="for-photos">
|
||||
<a>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-image" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Disegni e fotografie</span>
|
||||
</a>
|
||||
</li>
|
||||
<li id="for-documents">
|
||||
<a>
|
||||
<span class="icon is-small"
|
||||
><i class="far fa-file-alt" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Documenti</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="data-tabs" id="short-sheet"></div>
|
||||
<div class="data-tabs is-hidden" id="site-sheet"></div>
|
||||
<div class="data-tabs is-hidden" id="photos"></div>
|
||||
<div class="data-tabs is-hidden" id="documents"></div>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
<!-- Not conserved modal -->
|
||||
<div class="modal" id="not-conser-data">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content has-background-white" style="min-height: 95vh;">
|
||||
<div id="not-conser-sheet"></div>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
<!-- Project info modal -->
|
||||
<div class="modal" id="project-info">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card content has-background-white panel" style="width: 70vw;">
|
||||
<header class="modal-card-head p-5">
|
||||
<h1 class="modal-card-title has-text-centered mb-0"><i class="fa fa-info-circle mr-2"></i> Il progetto</h1>
|
||||
<button class="delete" aria-label="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body is-size-5">
|
||||
<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">
|
||||
<div class="buttons">
|
||||
<button class="button">Chiudi</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user