nicolo/fara-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Requested changes - pt. 1

Browse Source
This commit is contained in:
Nicolò P 2021-09-06 10:50:11 +02:00
parent 25c5007a09
commit 5331b04248
16 changed files with 58 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,4 +1,5 @@
spectre*/ spectre*/
*.zip *.zip
*.ttf *.ttf
*_old*
README.md README.md

12
credits.html
View File

@ -5,8 +5,8 @@
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/spectre-icons.css"> <link rel="stylesheet" href="css/spectre-icons.css">
<script src="js/ui.js" type="text/javascript"></script> <script src="js/ui.js" type="module"></script>
<title>Nel cielo di Fara</title> <title>Credits | Nel cielo di Fara</title>
</head> </head>
<body> <body>
<header class="main-header itin"> <header class="main-header itin">
@ -61,10 +61,10 @@
<strong>Regia cinematografica:</strong> Eva Pietroni (CNR ISPC) <strong>Regia cinematografica:</strong> Eva Pietroni (CNR ISPC)
</p> </p>
<p> <p>
<strong>Realizzazione tecnica:</strong> Sd Cinematrografica <strong>Realizzazione tecnica:</strong> Sd Cinematografica
</p> </p>
<p> <p>
<strong>Musiche:</strong> Sd Cinematrografica <strong>Musiche:</strong> Sd Cinematografica
</p> </p>
<p> <p>
<strong>Attori del Teatro Potlach:</strong> Marcus Acauan, Zsofia Gulyas, Nathalie Mentha, Daniela Regnoli, Irene Rossi, Maurizio Stammati. <strong>Attori del Teatro Potlach:</strong> Marcus Acauan, Zsofia Gulyas, Nathalie Mentha, Daniela Regnoli, Irene Rossi, Maurizio Stammati.
@ -117,7 +117,7 @@
</p> </p>
</div> </div>
<div class="col-lg-2 col-sm-12 col-md-12 column ml-lg"> <div class="col-lg-2 col-sm-12 col-md-12 column ml-lg">
<div class="placeholder"></div> <img src="img/carro_sabino.jpg">
</div> </div>
</div> </div>
</div> </div>
@ -166,7 +166,7 @@
</main> </main>
<footer class="roboto"> <footer class="roboto">
<p id="copy">&copy; Avviso pubblico Beni Culturali e Turismo POR FESR Lazio 2014-2020</p> <p id="copy">&copy; Avviso pubblico Beni Culturali e Turismo POR FESR Lazio 2014-2020</p>
<p><img src="img/loghi_ispc_potlach.png" class="logos" alt="Loghi ISPC Potlach"></p> <p><img src="img/loghi_ispc_potlach_sd.png" class="logos" alt="Loghi ISPC Potlach"></p>
<p><img src="img/FESR_BARRA_BENEFICIARI_DEF.jpg" class="logos" alt="Loghi enti beneficiari"></p> <p><img src="img/FESR_BARRA_BENEFICIARI_DEF.jpg" class="logos" alt="Loghi enti beneficiari"></p>
</footer> </footer>
</body> </body>

8
css/main.css
View File

@ -30,8 +30,10 @@ html {
.mt-lg { .mt-lg {
margin-top: 2rem; margin-top: 2rem;
} }
.ml-lg { @media (min-width: 840px) {
.ml-lg {
margin-left: 2rem; margin-left: 2rem;
}
} }
.short-hr { .short-hr {
width: 3.5rem; width: 3.5rem;
@ -400,3 +402,7 @@ section.poi h3 {
top: 0; top: 0;
width: 100%; width: 100%;
} }
canvas {
width: 100%;
height: 100%;
}

BIN
img/carro_sabino.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
img/loghi_ispc_potlach_sd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

BIN
img/progetto_header.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 322 KiB

After

Width:  |  Height:  |  Size: 760 KiB

BIN
img/slider/Acquisizione Carro.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 152 KiB

BIN
img/slider/Angelo_backst.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 KiB

BIN
img/slider/Rocco si è svegliato02 Backst.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 317 KiB

BIN
img/slider/Vicolo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 221 KiB

2
index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/spectre-icons.css"> <link rel="stylesheet" href="css/spectre-icons.css">
<script src="js/ui.js" type="text/javascript"></script> <script src="js/ui.js" type="module"></script>
<title>Nel cielo di Fara</title> <title>Nel cielo di Fara</title>
</head> </head>
<body> <body>

7
itinerario.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/spectre-icons.css"> <link rel="stylesheet" href="css/spectre-icons.css">
<script src="js/ui.js" type="text/javascript"></script> <script src="js/ui.js" type="module"></script>
<title>L'itinerario | Nel cielo di Fara</title> <title>L'itinerario | Nel cielo di Fara</title>
</head> </head>
<body> <body>
@ -44,7 +44,8 @@
<div class="container"> <div class="container">
<div class="columns"> <div class="columns">
<div class="column col-lg-6 col-sm-12 col-md-12 of-hidden"> <div class="column col-lg-6 col-sm-12 col-md-12 of-hidden">
<img src="img/mappa.png" title="Apri la mappa interattiva" alt="Mappa dei percorsi a Fara Sabina"> <img src="img/mappa.png" title="Apri la mappa interattiva" alt="Mappa dei percorsi a Fara Sabina" id="map">
<!-- <canvas></canvas> -->
</div> </div>
<div class="column col-lg-6 col-sm-12 col-md-12 pl-xl roboto-slab-l" id="itin-c"> <div class="column col-lg-6 col-sm-12 col-md-12 pl-xl roboto-slab-l" id="itin-c">
<h2>Il borgo storico in tappe</h2> <h2>Il borgo storico in tappe</h2>
@ -493,7 +494,7 @@
</main> </main>
<footer class="roboto"> <footer class="roboto">
<p id="copy">&copy; Avviso pubblico Beni Culturali e Turismo POR FESR Lazio 2014-2020</p> <p id="copy">&copy; Avviso pubblico Beni Culturali e Turismo POR FESR Lazio 2014-2020</p>
<p><img src="img/loghi_ispc_potlach.png" class="logos" alt="Loghi ISPC Potlach"></p> <p><img src="img/loghi_ispc_potlach_sd.png" class="logos" alt="Loghi ISPC Potlach"></p>
<p><img src="img/FESR_BARRA_BENEFICIARI_DEF.jpg" class="logos" alt="Loghi enti beneficiari"></p> <p><img src="img/FESR_BARRA_BENEFICIARI_DEF.jpg" class="logos" alt="Loghi enti beneficiari"></p>
</footer> </footer>
</body> </body>

18
js/fara.js
View File

@ -23,3 +23,21 @@ export function slider(nextimage) {
header.setAttribute('style', 'background-image : url("' +images[nextimage++] + '");'); header.setAttribute('style', 'background-image : url("' +images[nextimage++] + '");');
setTimeout(slider(nextimage), 2000); setTimeout(slider(nextimage), 2000);
} }
/**
* @todo
* The canvas should be drawn into an overlay
* container (always fullscreen)
*/
export function interactiveMap() {
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
const img = new Image;
img.src = 'img/mappa.png';
img.onload = () => {
ctx.drawImage(img, 0, 0);
}
}

13
js/ui.js
View File

@ -1,6 +1,7 @@
//use strict; //use strict;
//import * as Farapp from './fara.js'; import * as Farapp from './fara.js';
let homeRE = new RegExp(/(https?:\S+\/$|index.html$)/); let homeRE = new RegExp(/(https?:\S+\/$|index.html$)/);
if (homeRE.test(window.location.href)) { if (homeRE.test(window.location.href)) {
@ -153,3 +154,13 @@ window.addEventListener('load', () => {
}) })
} }
}); });
/**
* Draw interactive map in canvas...
if (window.location.href.includes('itinerario')) {
let mapImg = document.getElementById('map');
mapImg.addEventListener('click', () => {
Farapp.interactiveMap();
});
}
*/

4
news.html
View File

@ -5,8 +5,8 @@
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/spectre-icons.css"> <link rel="stylesheet" href="css/spectre-icons.css">
<script src="js/ui.js" type="text/javascript"></script> <script src="js/ui.js" type="module"></script>
<title>Nel cielo di Fara</title> <title>News & Eventi | Nel cielo di Fara</title>
</head> </head>
<body> <body>
<header class="main-header news"> <header class="main-header news">

14
progetto.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/spectre-icons.css"> <link rel="stylesheet" href="css/spectre-icons.css">
<script src="js/ui.js" type="text/javascript"></script> <script src="js/ui.js" type="module"></script>
<title>Il progetto | Nel cielo di Fara</title> <title>Il progetto | Nel cielo di Fara</title>
</head> </head>
<body> <body>
@ -59,16 +59,16 @@
La tradizionale impostazione descrittiva di itinerari e monumenti viene sostituita da La tradizionale impostazione descrittiva di itinerari e monumenti viene sostituita da
una <strong>rappresentazione drammaturgica di storie, personaggi, modi di vivere e visioni</strong> una <strong>rappresentazione drammaturgica di storie, personaggi, modi di vivere e visioni</strong>
che costituiscono i caratteri irriducibili e unici della vita profonda di un borgo. che costituiscono i caratteri irriducibili e unici della vita profonda di un borgo.
A quest'anima nascosta danno forma recitazioni attoriali, ricostruzioni virtuali, A quest'anima nascosta danno forma recitazioni attoriali, racconti degli abitanti, ricostruzioni virtuali,
ambienti di <em lang="en">Mixed Reality</em>, interventi di scenografia urbana, <em lang="en">projection mapping</em>. ambienti di <em lang="en">Mixed Reality</em>, interventi di scenografia urbana, <em lang="en">projection mapping</em>.
</p> </p>
</div> </div>
<div class="column col-12 mt-2"> <div class="column col-12 mt-2">
<p class="mt-2"><strong>Teatro, cinema e computer grafica</strong> si fondono in questa inedita <p class="mt-2"><strong>Teatro, cinema, letteratura e computer grafica</strong> si fondono in questa inedita
rappresentazione spettacolare alla quale la comunità prende parte e in essa si riconosce, rappresentazione spettacolare alla quale la comunità prende parte e in essa si riconosce,
ma che allo stesso tempo diventa elemento di attrazione turistica. ma che allo stesso tempo diventa elemento di attrazione turistica.
Gli output sono vari: Gli output sono vari:
ambienti interattivi per tecnologie <em>mobile</em>, sito web, installazioni <em>site specific</em>.</p> ambienti interattivi per tecnologie <em>mobile</em>, sito web, installazioni <em>site specific</em>, un docufilm.</p>
</div> </div>
</div> </div>
</div> </div>
@ -84,7 +84,6 @@
<li>La tecnologia aiuta a rendere visibile lo straordinario</li> <li>La tecnologia aiuta a rendere visibile lo straordinario</li>
<li>Tecnologia ad alta usabilità</li> <li>Tecnologia ad alta usabilità</li>
<li>Un prodotto scalabile e ripetibile</li> <li>Un prodotto scalabile e ripetibile</li>
<li>Valorizzazione della "prossimità"</li>
</ul> </ul>
</div> </div>
<div class="column col-lg-5 col-sm-12 col-md-12" id="vagg"> <div class="column col-lg-5 col-sm-12 col-md-12" id="vagg">
@ -97,7 +96,7 @@
<div class="container"> <div class="container">
<div class="columns mb-2"> <div class="columns mb-2">
<div class="col-12 mb-2"> <div class="col-12 mb-2">
<h2>Output del progetto</h2> <h2>Output tecnologici (a cura di Orpheo)</h2>
</div> </div>
<div class="column col-lg-6 col-sm-12 col-md-12 of-hidden mt-2 mb-2 pr-lg"> <div class="column col-lg-6 col-sm-12 col-md-12 of-hidden mt-2 mb-2 pr-lg">
<p class="text-left text-uppercase mb-0 mt-2 robot-slab-b">Piattaforma web</p> <p class="text-left text-uppercase mb-0 mt-2 robot-slab-b">Piattaforma web</p>
@ -110,9 +109,6 @@
</div> </div>
<div class="column col-lg-6 col-sm-12 col-md-12 mt-2 mb-2 pr-lg"> <div class="column col-lg-6 col-sm-12 col-md-12 mt-2 mb-2 pr-lg">
<p class="text-left text-uppercase mb-0 mt-2 robot-slab-b">Web app</p> <p class="text-left text-uppercase mb-0 mt-2 robot-slab-b">Web app</p>
<p class="text-left mb-2">
Generata dal sito web con i contenuti pre-caricati
</p>
<a href="https://pwa.innovapatrimonio.com/" title="Vai alla web app di InnovaPatrimonio"> <a href="https://pwa.innovapatrimonio.com/" title="Vai alla web app di InnovaPatrimonio">
<img src="img/webapp.PNG" alt="Web App InnovaPatrimonio"> <img src="img/webapp.PNG" alt="Web App InnovaPatrimonio">
</a> </a>