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

Add News & Credits

Browse Source
This commit is contained in:
Nicolò P 2021-09-01 15:46:57 +02:00
parent 851e7a6ff2
commit fabdabe331
11 changed files with 397 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
credits.html Normal file
View File

@ -0,0 +1,173 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/spectre-icons.css">
<script src="js/ui.js" type="text/javascript"></script>
<title>Nel cielo di Fara</title>
</head>
<body>
<header class="main-header itin">
<div class="container">
<div class="columns bg-white" id="nav">
<div class="column col-lg-7 col-sm-10 col-md-2">
<img class="of-hidden" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
</div>
<div class="column col-sm-2 show-sm text-right">
<i class="icon icon-menu icon-2x"></i>
</div>
<div class="hide-sm column col-lg-5 col-sm-12 col-md-120 col-md-10 nav-light nav-menu" id="links">
<a href="index.html" title="Torna alla home page">Home</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a>
</div>
<nav class="d-hide side-nav bg-white opensans">
<p id="close-nav"><i class="icon-close"></i></p>
<a href="index.html" title="Torna alla home page">Home</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a>
</nav>
</div>
</div>
<div id="title" class="text-center">
<h1 class="roboto-med ochre-dark">Credits</h1>
</div>
</header>
<main>
<section>
<div class="container">
<div class="columns">
<div class="col-lg-2 col-sm-12 col-md-12 column">
<div class="placeholder"></div>
</div>
<div class="col-lg-2 col-sm-12 col-md-12 column ml-lg">
<h2>Modello narrativo e contenuti</h2>
<p class="mt-lg">
CNR ISPC, il Teatro Potlach e Sd Cinematografica
</p>
<p>
<strong>Soggetto e sceneggiatura:</strong> Eva Pietroni (CNR ISPC)
</p>
<p>
<strong>Regia teatrale:</strong> Pino Di Buduo (Teatro Potlach)
</p>
<p>
<strong>Regia cinematografica:</strong> Eva Pietroni (CNR ISPC)
</p>
<p>
<strong>Realizzazione tecnica:</strong> Sd Cinematrografica
</p>
<p>
<strong>Musiche:</strong> Sd Cinematrografica
</p>
<p>
<strong>Attori del Teatro Potlach:</strong> Marcus Acauan, Zsofia Gulyas, Nathalie Mentha, Daniela Regnoli, Irene Rossi, Maurizio Stammati.
</p>
<p>
Con la partecipazione degli <strong>abitanti di Fara in Sabina</strong>.
</p>
<p>
<strong>Fonica:</strong> Alessandro Rosato (Teatro Potlach), Daniele Ferdani (CR ISPC)
</p>
<p>
<strong>Aiuto alla produzione:</strong> Alfonsina Pagano, Daniele Ferdani (CNR ISPC)
</p>
<p>
<strong>Computer grafica:</strong> Eva Pietroni, Daniele Ferdani, Enzo d'Annibale, Emanuel Demetrescu, Bruno Fanini, (CNR ISPC).
</p>
<p>
<strong>Narrazione e compositing nel video mapping “I Sabini ieri e oggi”:</strong> Eva Pietroni
</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="columns">
<div class="col-lg-2 col-sm-12 col-md-12 column">
<h2>Ringraziamenti</h2>
<p class="mt-lg">
Si ringrazia <strong>Claudio Rufa</strong> per l'aiuto alla regia.
</p>
<p>
<strong>Consulenza scientifica per la ricostruzione del carro di Eretum:</strong> Adriana Emiliozzi e Paola Santoro;
si ringrazia il <strong>Museo Nazionale Romano</strong> per aver autorizzato l'acquisizione digitale delle lamine bronzee del carro.
</p>
<p>
Si ringraziano il <strong>Comune di Fara Sabina</strong> e il <strong>Museo Civico Archeologico</strong>
e <strong>Maria Luisa Agneni</strong> per la gentile collaborazione, <strong>l'Abbazia di Farfa</strong>.
</p>
<p>
Si ringraziano <strong>Alberto Amici</strong> i cui libri sono stati preziose fonti bibliografiche;
<strong>Francesco Saverio Bellini</strong> per le mappe storiche;
<strong>Pietro Antinori, Alessandro Antonini, Francesco Saverio Bellini, Alberto Giovannini, Loredana Mazzocchi, Antonio Mercadante</strong>
per i loro racconti; <strong>Adriana Abbatelli, Fiammetta Bellini, Mirella Bianchini, Patrizia Bianchini, Edoardo Chiarotti, Maria e Sergio Cirilli,
Antonella Ciucciarelli, Marisa Corpacci, Graziella Dominici, Sergio Giovannini, Anna Giuliani, Cristiano D'Alessio, Paolo D'Alessio,
Samuele D'Alessio, Lucio Girardini, Romeo Grisetti, Anna Lupi, Giovanna Lupi, Manuela Lupi, Maurizio Lupi, Sabina Mariani,
Angelo Mazzocchi, Luigia Pecoroni, Mario Perilli, Carla Petracci, Alberto Sacchetti, Mario Sforzini, Gloria Stazi, Giampietro Tanteri,
Alessandro Vicari, Tullia Scardocci, la famiglia Calvesi, Annarita Satta, Andrea</strong> il cantore sul monumento,
il bar di <strong>Stefania</strong> per essere entrati nelle storie o aver messo a disposizione le loro case, giardini e botteghe.
</p>
</div>
<div class="col-lg-2 col-sm-12 col-md-12 column ml-lg">
<div class="placeholder"></div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<h2>Informazioni sul sito web</h2>
<p class="text-bold mb-1">
Titolare del Sito, Concezione, Web Design e sviluppo:
</p>
<p>CNR ISPC - Istituto di Scienze del Patrimonio Culturale, sede di Roma<br>
Via Salaria km 29, 300<br>
00015 - Monterotondo St. (Roma)
</p>
<p>
<strong>Concezione e testi:</strong> Eva Pietroni<br>
<strong>Grafica e layout:</strong> Alfonsina Pagano, Nicolò Paraciani, Eva Pietroni<br>
<strong>Sviluppo:</strong> Nicolò Paraciani<br>
</p>
<p>
<strong>E-mail contatti:</strong> eva.pietroni@cnr.it
</p>
<h3 class="ochre-dark text-bold">Cookie e Privacy Policy</h3>
<p>
Il sito web <span class="text-bold">https://nelcielodifara.cnr.it</span> non utilizza cookie di terze parti di nessun tipo né sistemi
di analitica o tracciamento, ma solo cookie tecnici strettamente necessari al corretto funzionamento del sito stesso.</p>
<p>
I video <em>embedded</em> sono ospitati sulle piattaforme <strong>YouTube</strong> e <strong>Vimeo</strong>, per le rispettive privacy policy fare riferimento
alle seguenti pagine web:
<ul class="mt-1">
<li><a href="https://policies.google.com/privacy?hl=it">YouTube Privacy Policy (Google)</a></li>
<li><a href="https://vimeo.com/privacy">Vimeo</a></li>
</ul>
</p>
<h2>&copy; Copyright, diritto d'autore e dei segni distintivi</h2>
<p>
Tutto il contenuto di questo sito web è protetto da copyright e non può
essere riprodotto o utilizzato in altre pubblicazioni stampate,
elettroniche o informatiche senza l'espressa autorizzazione degli autori.
</p>
</div>
</section>
</main>
<footer class="roboto">
<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/FESR_BARRA_BENEFICIARI_DEF.jpg" class="logos" alt="Loghi enti beneficiari"></p>
</footer>
</body>
</html>

47
css/main.css
View File

@ -10,6 +10,10 @@
--lilac: #c852ff; --lilac: #c852ff;
--emerald: #067d08; --emerald: #067d08;
} }
/** Necessary for iPhone in portrait mode (apparently) **/
html {
overflow-x: hidden;
}
/** General utils **/ /** General utils **/
.of-hidden { .of-hidden {
overflow: hidden; overflow: hidden;
@ -26,6 +30,9 @@
.mt-lg { .mt-lg {
margin-top: 2rem; margin-top: 2rem;
} }
.ml-lg {
margin-left: 2rem;
}
.short-hr { .short-hr {
width: 3.5rem; width: 3.5rem;
margin-left: 0; margin-left: 0;
@ -115,9 +122,29 @@ header {
background: none; background: none;
min-height: 25vh; min-height: 25vh;
} }
@media (max-width: 840px) {
.main-header.itin {
margin-top: 4rem;
}
}
.main-header.itin #nav { .main-header.itin #nav {
color: var(--dark); color: var(--dark);
} }
.main-header.news {
min-height: 60vh;
background-image: url('../img/bg_news.jpg');
}
.main-header.news::before {
background-color: rgba(33,33,33,1);
opacity: 0.5;
content: "";
display: block;
position: absolute;
bottom: calc(100% - 60vh);
left: 0;
right: 0;
top: 0;
}
.main-header h1 { .main-header h1 {
font-size: 3rem; font-size: 3rem;
} }
@ -157,7 +184,7 @@ header {
padding-left: 5px; padding-left: 5px;
height: 100vh; height: 100vh;
margin: 0; margin: 0;
left: 0; right: 0;
position: absolute; position: absolute;
z-index: 11; z-index: 11;
animation-name: slidein; animation-name: slidein;
@ -283,7 +310,7 @@ footer p {
max-height: 70px; max-height: 70px;
} }
/*** Section stripes ***/ /*** Section stripes ***/
.odd-stripe { .ochre-stripe {
background-color: var(--ochre-light); background-color: var(--ochre-light);
} }
section .container { section .container {
@ -310,6 +337,9 @@ section .container h2 {
font-family: 'roboto_bold'; font-family: 'roboto_bold';
font-size: 26pt; font-size: 26pt;
} }
section.news-sec .container h2 {
font-size: 14pt !important;
}
section .container ul { section .container ul {
list-style-type: square; list-style-type: square;
margin-left: 0; margin-left: 0;
@ -325,6 +355,9 @@ section.prj-logos img {
section.poi .container { section.poi .container {
max-width: 1180px; max-width: 1180px;
} }
section.poi h3 {
font-size: 0.9rem;
}
#itin-c { #itin-c {
padding-right: 12%; padding-right: 12%;
font-size: 14pt; font-size: 14pt;
@ -353,3 +386,13 @@ section.poi .container {
#mod-vid .modal-overlay { #mod-vid .modal-overlay {
background-color: #555; background-color: #555;
} }
/** Temp **/
.placeholder {
background-color: rgba(0,0,0,.03);
height: 70%;
left: 0;
outline: 2px dashed rgba(0,0,0,0.10);
overflow: hidden;
top: 0;
width: 100%;
}

BIN
img/bg_news.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 390 KiB

BIN
img/news_1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
img/news_2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
img/news_3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

5
index.html
View File

@ -13,11 +13,10 @@
<div class="container"> <div class="container">
<div class="columns text-gray" id="nav"> <div class="columns text-gray" id="nav">
<div class="column col-lg-7 col-sm-10 col-md-2"> <div class="column col-lg-7 col-sm-10 col-md-2">
<img class="hide-sm" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo"> <img class="of-hidden" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
<i class="icon icon-menu show-sm"></i>
</div> </div>
<div class="column col-sm-2 show-sm text-right"> <div class="column col-sm-2 show-sm text-right">
<img class="show-sm" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo"> <i class="icon icon-menu icon-2x"></i>
</div> </div>
<div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-light nav-menu" id="links"> <div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-light nav-menu" id="links">
<a href="index.html" title="Torna alla home page">Home</a> <a href="index.html" title="Torna alla home page">Home</a>

95
itinerario.html
View File

@ -13,11 +13,10 @@
<div class="container"> <div class="container">
<div class="columns bg-white" id="nav"> <div class="columns bg-white" id="nav">
<div class="column col-lg-7 col-sm-10 col-md-2"> <div class="column col-lg-7 col-sm-10 col-md-2">
<img class="hide-sm" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo"> <img class="of-hidden" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
<i class="icon icon-menu show-sm"></i>
</div> </div>
<div class="column col-sm-2 show-sm text-right"> <div class="column col-sm-2 show-sm text-right">
<img class="show-sm" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo"> <i class="icon icon-menu icon-2x"></i>
</div> </div>
<div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-menu" id="links"> <div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-menu" id="links">
<a href="index.html" title="Torna alla home page">Home</a> <a href="index.html" title="Torna alla home page">Home</a>
@ -51,7 +50,7 @@
<h2>Il borgo storico in tappe</h2> <h2>Il borgo storico in tappe</h2>
<p> <p>
Il percorso nel borgo storico <strong>Fara in Sabina</strong> si snoda attraverso <strong>12 punti di interesse</strong> Il percorso nel borgo storico <strong>Fara in Sabina</strong> si snoda attraverso <strong>12 punti di interesse</strong>
che, all’interno, contengono due tipologie di contenuti: che, all'interno, contengono due tipologie di contenuti:
<ul> <ul>
<li class="lilac"> <li class="lilac">
drammaturgie drammaturgie
@ -72,14 +71,14 @@
</p> </p>
<hr class="short-hr"> <hr class="short-hr">
<p class="note roboto-slab"> <p class="note roboto-slab">
L’itinerario di Fara in Sabina è stato ideato e realizzato dal <strong>CNR ISPC</strong> L'itinerario di Fara in Sabina è stato ideato e realizzato dal <strong>CNR ISPC</strong>
e dal <strong>Teatro Potlach</strong>, la realizzazione tecnica è di <strong>SD Cinematografica</strong>. e dal <strong>Teatro Potlach</strong>, la realizzazione tecnica è di <strong>SD Cinematografica</strong>.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section class="odd-stripe poi"> <section class="ochre-stripe poi">
<div class="container"> <div class="container">
<div class="columns mb-2"> <div class="columns mb-2">
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
@ -88,11 +87,11 @@
</a> </a>
</div> </div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="lilac mb-2 text-small text-italic text-bold"> <h3 class="lilac mb-2 text-italic text-bold">
Prologo - Annunciazione Prologo - Annunciazione
</h3> </h3>
<p class="text-small"> <p class="text-small">
Un angelo compare a un eremita all’inizio dei tempi, sul Monte Acuziano. Un angelo compare a un eremita all'inizio dei tempi, sul Monte Acuziano.
Gli annuncia che sulla collina antistante sorgerà una città Gli annuncia che sulla collina antistante sorgerà una città
che si chiamerà Fara, dove si vivrà in pace e in armonia con la natura, che si chiamerà Fara, dove si vivrà in pace e in armonia con la natura,
in attesa di un re che farà ritorno&hellip; in attesa di un re che farà ritorno&hellip;
@ -104,7 +103,7 @@
</a> </a>
</div> </div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="lilac mb-2 text-small text-italic text-bold"> <h3 class="lilac mb-2 text-italic text-bold">
Il viaggiatore #1 Il viaggiatore #1
</h3> </h3>
<p class="text-small"> <p class="text-small">
@ -127,13 +126,13 @@
</a> </a>
</div> </div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="lilac mb-2 text-small text-italic text-bold"> <h3 class="lilac mb-2 text-italic text-bold">
Sul carattere dei Faresi #2 Sul carattere dei Faresi #2
</h3> </h3>
<p class="text-small"> <p class="text-small">
Trilussa, poeta romano ma ormai di casa qui a Fara Sabina, e Ariel, spirito del vento prestato Trilussa, poeta romano ma ormai di casa qui a Fara Sabina, e Ariel, spirito del vento prestato
dalla commedia shakespeariana “La Tempesta”, si affrontano in una piazzetta. dalla commedia shakespeariana “La Tempesta”, si affrontano in una piazzetta.
Ariel, l’eterno spiritello sognatore è sospeso sui tetti e guarda il mondo dall’alto, Ariel, l'eterno spiritello sognatore è sospeso sui tetti e guarda il mondo dall'alto,
osserva la forma della città e le abitudini dei suoi abitanti, fa magie. osserva la forma della città e le abitudini dei suoi abitanti, fa magie.
Trilussa ha i piedi ben piantati per terra ed esorta Ariel a scendere e prendere Trilussa ha i piedi ben piantati per terra ed esorta Ariel a scendere e prendere
contatto con il mondo. contatto con il mondo.
@ -145,19 +144,19 @@
</a> </a>
</div> </div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="lilac mb-2 text-small text-italic text-bold"> <h3 class="lilac mb-2 text-italic text-bold">
Piazza Forcina #3 Piazza Forcina #3
</h3> </h3>
<p class="text-small"> <p class="text-small">
Trilussa, accompagnato da un angelo, racconta la storia di questa piazza che si chiamava Trilussa, accompagnato da un angelo, racconta la storia di questa piazza che si chiamava
piazza Forcina per via delle prigioni che vi si affacciavano fino a dopo l’unità d’Italia. piazza Forcina per via delle prigioni che vi si affacciavano fino a dopo l'unità d'Italia.
Immagina il lamento di quei poveri disgraziati a cui solo la luna teneva compagnia. Immagina il lamento di quei poveri disgraziati a cui solo la luna teneva compagnia.
Ma poi tutto è cambiato, botteghe artigiane, il trasporto pubblico... è arrivata la modernità! Ma poi tutto è cambiato, botteghe artigiane, il trasporto pubblico... è arrivata la modernità!
</p> </p>
</div> </div>
</div> </div>
</section> </section>
<section class="odd-stripe poi"> <section class="ochre-stripe poi">
<div class="container"> <div class="container">
<div class="columns mb-2"> <div class="columns mb-2">
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
@ -166,7 +165,7 @@
</a> </a>
</div> </div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="green mb-2 text-small text-italic text-bold"> <h3 class="green mb-2 text-italic text-bold">
Antonio #3a Antonio #3a
</h3> </h3>
<p class="text-small"> <p class="text-small">
@ -181,13 +180,13 @@
</a> </a>
</div> </div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="green mb-2 text-small text-italic text-bold"> <h3 class="green mb-2 text-italic text-bold">
Francesco #3b Francesco #3b
</h3> </h3>
<p class="text-small"> <p class="text-small">
Francesco appartiene ad un'antica famiglia di Fara, Francesco appartiene ad un'antica famiglia di Fara,
negli anni ha raccolto nella sua casa una collezione negli anni ha raccolto nella sua casa una collezione
di oggetti dell’800 e del primo ‘900 che ci di oggetti dell'800 e del primo ‘900 che ci
raccontano una cultura ormai scomparsa. raccontano una cultura ormai scomparsa.
</p> </p>
</div> </div>
@ -202,11 +201,11 @@
</a> </a>
</div> </div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="lilac mb-2 text-small text-italic text-bold"> <h3 class="lilac mb-2 text-italic text-bold">
I Nobili di Fara #4 I Nobili di Fara #4
</h3> </h3>
<p class="text-small"> <p class="text-small">
Trilussa, accompagnata dall’angelo, racconta e mostra Trilussa, accompagnata dall'angelo, racconta e mostra
i molti palazzi nobiliari a Fara, appartenuti alle famiglie i molti palazzi nobiliari a Fara, appartenuti alle famiglie
romane degli Orsini, dei Farnese, dei Barberini... romane degli Orsini, dei Farnese, dei Barberini...
da queste potenti famiglie baronali da queste potenti famiglie baronali
@ -221,13 +220,13 @@
</a> </a>
</div> </div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="lilac mb-2 text-small text-italic text-bold"> <h3 class="lilac mb-2 text-italic text-bold">
Rocco si è svegliato #5 Rocco si è svegliato #5
</h3> </h3>
<p class="text-small"> <p class="text-small">
Rocco era un abitante di Fara in Sabina morto nel 1987 e vissuto in Rocco era un abitante di Fara in Sabina morto nel 1987 e vissuto in
un momento di fervore della vita del paese e della sua comunità. un momento di fervore della vita del paese e della sua comunità.
Passava tutto il tempo all’osteria del paese. Ora si è appena Passava tutto il tempo all'osteria del paese. Ora si è appena
risvegliato dal lungo sonno e non riconosce più la sua Fara, risvegliato dal lungo sonno e non riconosce più la sua Fara,
tutta vuota e silenziosa. Ma Ariel compie una magia e gli mostra tutta vuota e silenziosa. Ma Ariel compie una magia e gli mostra
il borgo popolato come era allora il borgo popolato come era allora
@ -235,7 +234,7 @@
</div> </div>
</div> </div>
</section> </section>
<section class="poi odd-stripe"> <section class="poi ochre-stripe">
<div class="container"> <div class="container">
<div class="columns mb-2"> <div class="columns mb-2">
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
@ -244,7 +243,7 @@
</a> </a>
</div> </div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="green mb-2 text-small text-italic text-bold"> <h3 class="green mb-2 text-italic text-bold">
Alberto #5b Alberto #5b
</h3> </h3>
<p class="text-small"> <p class="text-small">
@ -260,12 +259,12 @@
</a> </a>
</div> </div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="lilac mb-2 text-small text-italic text-bold"> <h3 class="lilac mb-2 text-italic text-bold">
Disputa sui dialetti e sui saperi #6 Disputa sui dialetti e sui saperi #6
</h3> </h3>
<p class="text-small"> <p class="text-small">
Trilussa intrattiene con una piccola platea in una piazzetta, Trilussa intrattiene con una piccola platea in una piazzetta,
recitando poesie. Alberto, inizialmente seduto un po’ in disparte, recitando poesie. Alberto, inizialmente seduto un po' in disparte,
mal sopporta la lingua romanesca di Trilussa e improvvisamente mal sopporta la lingua romanesca di Trilussa e improvvisamente
si accende, accusando il poeta di essere un forestiero, si accende, accusando il poeta di essere un forestiero,
un sabotatore in terra sabina. I due intraprendono una un sabotatore in terra sabina. I due intraprendono una
@ -284,12 +283,12 @@
</a> </a>
</div> </div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="lilac mb-2 text-small text-italic text-bold"> <h3 class="lilac mb-2 text-italic text-bold">
Piazza Duomo #7 Piazza Duomo #7
</h3> </h3>
<p class="text-small"> <p class="text-small">
Piazza duomo è il cuore del borgo, dove il sacro e il profano Piazza duomo è il cuore del borgo, dove il sacro e il profano
si incontrano: la cisterna dell’acqua pubblica, l'antico Monte si incontrano: la cisterna dell'acqua pubblica, l'antico Monte
Frumentario, il forno, il museo, i palazzetti nobiliari, Frumentario, il forno, il museo, i palazzetti nobiliari,
la chiesa, e un panorama magnifico. Ariel si delizia e volteggia la chiesa, e un panorama magnifico. Ariel si delizia e volteggia
nella piazza, tessendo ghirlande da finestra a finestra, nella piazza, tessendo ghirlande da finestra a finestra,
@ -302,21 +301,21 @@
</a> </a>
</div> </div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="green mb-2 text-small text-italic text-bold"> <h3 class="green mb-2 text-italic text-bold">
Loredana #7a Loredana #7a
</h3> </h3>
<p class="text-small"> <p class="text-small">
Loredana gestisce il forno quattrocentesco di Fara, Loredana gestisce il forno quattrocentesco di Fara,
con suo fratello Angelo e altri abitanti del borgo. con suo fratello Angelo e altri abitanti del borgo.
Era l’antico forno pubblico del borgo. Loredana racconta Era l'antico forno pubblico del borgo. Loredana racconta
come questo forno sia l'espressione del suo forte legame come questo forno sia l'espressione del suo forte legame
con la famiglia, dalla quale ha imparato l’arte e con la famiglia, dalla quale ha imparato l'arte e
la gestualità del fare il pane. la gestualità del fare il pane.
</p> </p>
</div> </div>
</div> </div>
</section> </section>
<section class="poi odd-stripe"> <section class="poi ochre-stripe">
<div class="container"> <div class="container">
<div class="columns mb-2"> <div class="columns mb-2">
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
@ -325,15 +324,15 @@
</a> </a>
</div> </div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="green mb-2 text-small text-italic text-bold"> <h3 class="green mb-2 text-italic text-bold">
Pietro #7b Pietro #7b
</h3> </h3>
<p class="text-small"> <p class="text-small">
Pietro è venuto a vivere a Fara, da Roma. Pietro è venuto a vivere a Fara, da Roma.
Nel suo palazzo ha raccolto una collezione d’arte africana Nel suo palazzo ha raccolto una collezione d'arte africana
straordinaria, frutto di cinquant’anni di vita trascorsi in Africa. straordinaria, frutto di cinquant'anni di vita trascorsi in Africa.
Ci racconta il suo rapporto di serenità con il borgo, Ci racconta il suo rapporto di serenità con il borgo,
dove l’architettura vive in stupefacente equilibrio con la natura dove l'architettura vive in stupefacente equilibrio con la natura
</p> </p>
</div> </div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
@ -342,12 +341,12 @@
</a> </a>
</div> </div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="lilac mb-2 text-small text-italic text-bold"> <h3 class="lilac mb-2 text-italic text-bold">
Il castello #8 Il castello #8
</h3> </h3>
<p class="text-small"> <p class="text-small">
Fara ha un castello di nobili origini, più volte espugnato e ricostruito. Fara ha un castello di nobili origini, più volte espugnato e ricostruito.
Un tempo ospitava la scuola di musica, l’ospedale, e tante attività del paese. Un tempo ospitava la scuola di musica, l'ospedale, e tante attività del paese.
Oggi è quasi in abbandono ma ci sono ancora dei tesori. Due imbonitori Oggi è quasi in abbandono ma ci sono ancora dei tesori. Due imbonitori
sui trampoli convincono la popolazione ad entrare nel castello, sui trampoli convincono la popolazione ad entrare nel castello,
promettendo che lì dentro potrà trovare risposta a tutti i suoi desideri. promettendo che lì dentro potrà trovare risposta a tutti i suoi desideri.
@ -365,7 +364,7 @@
</a> </a>
</div> </div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="lilac mb-2 text-small text-italic text-bold"> <h3 class="lilac mb-2 text-italic text-bold">
I Sabini ieri e oggi #9 I Sabini ieri e oggi #9
</h3> </h3>
<p class="text-small"> <p class="text-small">
@ -382,20 +381,20 @@
</a> </a>
</div> </div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="lilac mb-2 text-small text-italic text-bold"> <h3 class="lilac mb-2 text-italic text-bold">
Il monumento sacro #10 Il monumento sacro #10
</h3> </h3>
<p class="text-small"> <p class="text-small">
Lo strano personaggio guida e l’angelo ci accompagnano attraverso la pineta, Lo strano personaggio guida e l'angelo ci accompagnano attraverso la pineta,
fino al monumento sacro dei caduti in guerra. Un tumulo recintato e scavato fino al monumento sacro dei caduti in guerra. Un tumulo recintato e scavato
nel banco roccioso, dove gli abitanti del paese si prendono cura dei sentieri nel banco roccioso, dove gli abitanti del paese si prendono cura dei sentieri
e dei fiori o cantano spensieratamente. Un luogo naturale fatto di roccia e memorie, e dei fiori o cantano spensieratamente. Un luogo naturale fatto di roccia e memorie,
all’ombra gentile dei lecci. all'ombra gentile dei lecci.
</p> </p>
</div> </div>
</div> </div>
</section> </section>
<section class="poi odd-stripe"> <section class="poi ochre-stripe">
<div class="container"> <div class="container">
<div class="columns mb-2"> <div class="columns mb-2">
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
@ -404,7 +403,7 @@
</a> </a>
</div> </div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="green mb-2 text-small text-italic text-bold"> <h3 class="green mb-2 text-italic text-bold">
Eva #10a Eva #10a
</h3> </h3>
<p class="text-small"> <p class="text-small">
@ -422,7 +421,7 @@
</a> </a>
</div> </div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="green mb-2 text-small text-italic text-bold"> <h3 class="green mb-2 text-italic text-bold">
Toto #10b Toto #10b
</h3> </h3>
<p class="text-small"> <p class="text-small">
@ -443,7 +442,7 @@
</a> </a>
</div> </div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="lilac mb-2 text-small text-italic text-bold"> <h3 class="lilac mb-2 text-italic text-bold">
Fuori Porta #11 Fuori Porta #11
</h3> </h3>
<p class="text-small"> <p class="text-small">
@ -460,14 +459,14 @@
</a> </a>
</div> </div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg"> <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
<h3 class="lilac mb-2 text-small text-italic text-bold"> <h3 class="lilac mb-2 text-italic text-bold">
Il ritorno del carro #12 Il ritorno del carro #12
</h3> </h3>
<p class="text-small"> <p class="text-small">
L’angelo e Ariel si trovano sul Belvedere e improvvisamente compare L'angelo e Ariel si trovano sul Belvedere e improvvisamente compare
qualcosa nel cielo. &Egrave; il presagio di qualcosa che si compie qualcosa nel cielo. &Egrave; il presagio di qualcosa che si compie
e che si celebrerà con il rito di ri-fondazione della città, e che si celebrerà con il rito di ri-fondazione della città,
all’insegna dell’immaginazione e della felicità. all'insegna dell'immaginazione e della felicità.
</p> </p>
</div> </div>
</div> </div>

71
js/ui.js
View File

@ -103,44 +103,57 @@ window.addEventListener('load', () => {
window.addEventListener('load', () => { window.addEventListener('load', () => {
let modal = document.querySelector('#mod-vid'); let modal = document.querySelector('#mod-vid');
let vidLinks = Array.from(document.querySelectorAll('a[href="#open-vid"]')); let vidLinks = Array.from(document.querySelectorAll('a[href="#open-vid"]'));
let source = document.querySelector('source');
let video = source.parentNode;
/** /**
* Dynamically change video source * Dynamically change video source
* Note naming convention... * Note naming convention...
*/ */
vidLinks.forEach(a => { if (vidLinks.length) {
let aNodes = a.childNodes; let source = document.querySelector('source');
// Hacky?? let video = source.parentNode;
let title = a.parentElement let overlay = document.querySelector('.modal-overlay');
.nextElementSibling
.firstElementChild
.innerHTML
.trim();
a.addEventListener('click', () => { vidLinks.forEach(a => {
aNodes.forEach(n => { let aNodes = a.childNodes;
// Hacky??
let title = a.parentElement
.nextElementSibling
.firstElementChild
.innerHTML
.trim();
if (n.src) { a.addEventListener('click', () => {
let vStr = n.src aNodes.forEach(n => {
.substr(n.src.lastIndexOf('/')+1, n.src.length)
.replace(/thumb_(.*)\.\w+$/, 'vid_$1.mp4');
source.src = `assets/video/${vStr}`; if (n.src) {
let vStr = n.src
.substr(n.src.lastIndexOf('/')+1, n.src.length)
.replace(/thumb_(.*)\.\w+$/, 'vid_$1.mp4');
video.load(); source.src = `assets/video/${vStr}`;
}
video.load();
}
});
modal.classList.add('active');
document.querySelector('.modal-title').classList.add('roboto');
document.querySelector('.modal-title').innerHTML = title;
}); });
modal.classList.add('active');
document.querySelector('.modal-title').classList.add('roboto');
document.querySelector('.modal-title').innerHTML = title;
}); });
});
let close = document.querySelectorAll('#mod-vid a[href="#close"]')[1]; let close = document.querySelectorAll('#mod-vid a[href="#close"]')[1];
close.addEventListener('click', () => { close.addEventListener('click', () => {
modal.classList.remove('active'); modal.classList.remove('active');
}); });
})
/* Close the modal when clicking on the
* overlay
*/
overlay.addEventListener('click', () => {
modal.classList.remove('active');
})
}
});

83
news.html Normal file
View File

@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/spectre-icons.css">
<script src="js/ui.js" type="text/javascript"></script>
<title>Nel cielo di Fara</title>
</head>
<body>
<header class="main-header news">
<div class="container">
<div class="columns text-gray" id="nav">
<div class="column col-lg-7 col-sm-10 col-md-2">
<img class="of-hidden" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
</div>
<div class="column col-sm-2 show-sm text-right">
<i class="icon icon-menu icon-2x"></i>
</div>
<div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-light nav-menu" id="links">
<a href="index.html" title="Torna alla home page">Home</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a>
</div>
<nav class="d-hide side-nav bg-white opensans">
<p id="close-nav"><i class="icon-close"></i></p>
<a href="index.html" title="Torna alla home page">Home</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a>
</nav>
</div>
</div>
<div id="title" class="text-center">
<h1 class="arvo">News & Eventi</h1>
</div>
</header>
<main>
<section class="news-sec">
<div class="container">
<div class="columns">
<div class="col-lg-4 col-md-12 col-sm-12 column">
<p><img src="img/news_1.jpg"></p>
<h2 class="text-center">Virtual Reality Experience Festival, Roma, 16 ottobre 2020</h2>
<p class="text-center">
Partecipazione all’iniziativa con una presentazione del progetto e del trailer.
A cura di <strong>Eva Pietroni</strong> (CNR ISPC) e <strong>Pino di Buduo</strong> (Teatro Potlach)
</p>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 column ml-2">
<p><img src="img/news_2.jpg"></p>
<h2 class="text-center">Conferenza 15th International Technology, Education and Development Conference INTED2021, Valencia 7-8 marzo 2021</h2>
<p class="text-center">
Contributo di Eva Pietroni (CNR ISPC),
<strong>A new narrative approach to valorize historical villages,
between dramaturgy and mixed reality. The “Innova Patrimonio” project.</strong>
<br>
Published by IATED Academy, pp: 8386-8395. ISBN: 978-84-09-27666-0
</p>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 column ml-2">
<p><img src="img/news_3.jpg"></p>
<h2 class="text-center">Volume “Il digital storytelling come strumento di marketing culturale e turistico” a cura di Elisa Bonacini, Dario Flaccovio Editore, 2021</h2>
<p class="text-center">
Contributo di Eva Pietroni (CNR ISPC),
<strong>Una nuova forma narrativa per i borghi storici, tra drammaturgia e mixed reality. Il progetto “Innova Patrimonio”</strong>
</p>
</div>
</div>
</div>
</section>
</main>
<footer class="roboto">
<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/FESR_BARRA_BENEFICIARI_DEF.jpg" class="logos" alt="Loghi enti beneficiari"></p>
</footer>
</body>
</html>

5
progetto.html
View File

@ -13,11 +13,10 @@
<div class="container"> <div class="container">
<div class="columns text-gray" id="nav"> <div class="columns text-gray" id="nav">
<div class="column col-lg-7 col-sm-10 col-md-2"> <div class="column col-lg-7 col-sm-10 col-md-2">
<img class="hide-sm" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo"> <img class="of-hidden" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
<i class="icon icon-menu show-sm"></i>
</div> </div>
<div class="column col-sm-2 show-sm text-right"> <div class="column col-sm-2 show-sm text-right">
<img class="show-sm" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo"> <i class="icon icon-menu icon-2x"></i>
</div> </div>
<div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-light nav-menu" id="links"> <div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-light nav-menu" id="links">
<a href="index.html" title="Torna alla home page">Home</a> <a href="index.html" title="Torna alla home page">Home</a>