Compare commits

...

4 Commits

9 changed files with 68 additions and 236 deletions

View File

@ -4,3 +4,8 @@ This project includes two versions of the same HTML5 app:
- offline local installation (tracked by `master` branch) - offline local installation (tracked by `master` branch)
- online website _nelcielodifara.cnr.it_ (tracked by `online-site` branch) - online website _nelcielodifara.cnr.it_ (tracked by `online-site` branch)
## TODO
- Add Vimeo links for videos in `online-site` version.
- Interactive SVG map??

View File

@ -21,14 +21,14 @@
<div class="hide-sm column col-lg-5 col-sm-12 col-md-10 nav-menu" id="links"> <div class="hide-sm column col-lg-5 col-sm-12 col-md-10 nav-menu" id="links">
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a> <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a> <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a> <a href="credits.html" title="Credits del progetto">Credits</a>
</div> </div>
<nav class="d-hide side-nav bg-white opensans"> <nav class="d-hide side-nav bg-white opensans">
<p id="close-nav"><i class="icon-close"></i></p> <p id="close-nav"><i class="icon-close"></i></p>
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a> <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a> <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a> <a href="credits.html" title="Credits del progetto">Credits</a>
</nav> </nav>
</div> </div>

View File

@ -21,14 +21,14 @@
<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="itinerario.html" title="Vai all'itinerario">L'itinerario</a> <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a> <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a> <a href="credits.html" title="Credits del progetto">Credits</a>
</div> </div>
<nav class="d-hide side-nav bg-white opensans"> <nav class="d-hide side-nav bg-white opensans">
<p id="close-nav"><i class="icon-close"></i></p> <p id="close-nav"><i class="icon-close"></i></p>
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a> <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a> <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a> <a href="credits.html" title="Credits del progetto">Credits</a>
</nav> </nav>
</div> </div>

View File

@ -21,14 +21,14 @@
<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="itinerario.html" title="Vai all'itinerario">L'itinerario</a> <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a> <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a> <a href="credits.html" title="Credits del progetto">Credits</a>
</div> </div>
<nav class="d-hide side-nav bg-white opensans"> <nav class="d-hide side-nav bg-white opensans">
<p id="close-nav"><i class="icon-close"></i></p> <p id="close-nav"><i class="icon-close"></i></p>
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a> <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a> <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a> <a href="credits.html" title="Credits del progetto">Credits</a>
</nav> </nav>
</div> </div>

View File

@ -123,7 +123,7 @@ export function menuKeys()
let menuK = { let menuK = {
'1' : 'itinerario.html', '1' : 'itinerario.html',
'2' : 'progetto.html', '2' : 'progetto.html',
'3' : 'news.html',
'4': 'credits.html', '4': 'credits.html',
}; };
@ -187,46 +187,16 @@ export function openVideo(a)
.trim(); .trim();
let vStr = ''; let vStr = '';
let vimeoVids = {
'thumb_prologo' : '478632535',
'thumb_viaggiatore' : '562518107',
'thumb_faresi' : '562529310',
'thumb_piazza' : '443587380',
'thumb_antonio' : '606341398',
'thumb_francesco' : '471773781',
'thumb_nobili' : '562534835',
'thumb_rocco' : '606346781',
'thumb_alberto' : '606372910',
'thumb_disputa' : '471537982',
'thumb_duomo' : '606343917',
'thumb_loredana' : '513080769',
'thumb_pietro' : '455576197',
'thumb_castello' : '562536148',
'thumb_sabini' : '542321131',
'thumb_monumento' : '606362546',
'thumb_eva' : '606352547',
'thumb_toto' : '606348670',
'thumb_fuori' : '606358668',
'thumb_carro' : '562262086',
};
let vimeoLink = 'https://player.vimeo.com/video/';
aNodes.forEach(n => { aNodes.forEach(n => {
if (n.src) { if (n.src) {
vStr = n.src; vStr = n.src;
vStr = vStr.substr(vStr.lastIndexOf('/')+1, vStr.length) vStr = vStr.substr(vStr.lastIndexOf('/')+1, vStr.length)
.replace(/thumb_(.*)\.\w+$/, 'vid_$1.mp4'); .replace(/thumb_(.*)\.\w+$/, 'vid_$1.mp4');
vimeoLink += vimeoVids[n.src.substr(n.src.lastIndexOf('/')+1, n.src.length)
.replace(/\.(png|jpg)/, '')];
vimeoLink += '?autoplay=1';
} }
}); });
localStorage.setItem('vidURI', vStr); localStorage.setItem('vidURI', vStr);
localStorage.setItem('vimeo', vimeoLink);
localStorage.setItem('vidTitle', title); localStorage.setItem('vidTitle', title);
/** /**
* Go to video page * Go to video page

View File

@ -23,7 +23,6 @@ if (!window.location.href.includes('video')) {
} }
/** /**
* For itinerario.html... * For itinerario.html...
* @todo What about the interactive map?!?
*/ */
if (window.location.href.includes('itinerario')) { if (window.location.href.includes('itinerario')) {
let vidLinks = document.querySelectorAll('.open-vid'); let vidLinks = document.querySelectorAll('.open-vid');
@ -44,7 +43,7 @@ if (window.location.href.includes('itinerario')) {
*/ */
if (window.location.href.includes('video')) { if (window.location.href.includes('video')) {
document.addEventListener('readystatechange', () => { document.addEventListener('readystatechange', () => {
let vimeoLink = localStorage.getItem('vimeo'); let vStr = localStorage.getItem('vidURI');
let vidTitle = localStorage.getItem('vidTitle'); let vidTitle = localStorage.getItem('vidTitle');
document.querySelector('h1').innerHTML = vidTitle; document.querySelector('h1').innerHTML = vidTitle;
@ -57,12 +56,12 @@ if (window.location.href.includes('video')) {
window.history.go(-1); window.history.go(-1);
}); });
let iframe = document.querySelector('iframe'); let source = document.querySelector('source');
//let video = source.parentNode; let video = source.parentNode;
iframe.src = vimeoLink; source.src = `assets/video/${vStr}`;
//video.load(); video.load();
}); });
} }
/** /**

112
news.html
View File

@ -1,112 +0,0 @@
<!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="module"></script>
<title>News & Eventi | 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">
<a href="/"><img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo"></a>
</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="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</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="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</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 ml-2">
<p><img src="img/news_6.png"></p>
<h2 class="text-center">Prima proiezione pubblica nel borgo, Fara Sabina, 3 settembre 2021</h2>
<p class="text-center">
La sera del 3 settembre abbiamo proiettato il docufilm "Nel Cielo di Fara, pietre e ali d'angelo"
in piazza Duomo, alla presenza di tutta la popolazione del borgo e del Sindaco.
&Egrave; stato un bellissimo momento. Grazie al teatro Potlach.</strong>
</p>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 column ml-2">
<p><img src="img/news_5.jpg"></p>
<h2 class="text-center">Simulazione interattiva 360° del projection mapping</h2>
<p class="text-center">
&Egrave; stata realizzata
<a href="https://www.youtube.com/watch?v=E2PKV9fJYw4" title="Guarda il video su YouTube">
una simulazione 360° interattiva del Video Projection Mapping
</a>
"I Sabini Ieri e Oggi". Grazie ad Enzo d'Annibale.
</p>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 column">
<p><img src="img/news_4.jpg"></p>
<h2 class="text-center">Fara Film Festival, Fara Sabina, 25 luglio 2021</h2>
<p class="text-center">
Al Fara Film Festival 2021, il 25 luglio alle ore 21:00, è stato fatto il lancio del film "Nel Cielo di Fara, pietre e ali d'angelo"
ed è stato mostrato un breve estratto.<br>
(<a href="https://vimeo.com/578170143" title="Guarda il video su Vimeo">Video su Vimeo</a>).
</p>
</div>
</div>
<div class="columns">
<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 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 alliniziativa 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>
</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>

View File

@ -21,14 +21,14 @@
<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="itinerario.html" title="Vai all'itinerario">L'itinerario</a> <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a> <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a> <a href="credits.html" title="Credits del progetto">Credits</a>
</div> </div>
<nav class="d-hide side-nav bg-white opensans"> <nav class="d-hide side-nav bg-white opensans">
<p id="close-nav"><i class="icon-close"></i></p> <p id="close-nav"><i class="icon-close"></i></p>
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a> <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a> <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a> <a href="credits.html" title="Credits del progetto">Credits</a>
</nav> </nav>
</div> </div>
@ -42,7 +42,8 @@
<div class="container"> <div class="container">
<div class="columns"> <div class="columns">
<div class="column col-lg-7 col-sm-12 col-md-12 of-hidden"> <div class="column col-lg-7 col-sm-12 col-md-12 of-hidden">
<iframe src="https://player.vimeo.com/video/464788316" <!-- What about this for offline?? -->
<iframe src="assets/video/vid_trailer.mp4"
width="640" height="360" frameborder="0" allowfullscreen></iframe> width="640" height="360" frameborder="0" allowfullscreen></iframe>
</div> </div>
<div class="column col-lg-5 col-sm-12 col-md-12 pl-lg"> <div class="column col-lg-5 col-sm-12 col-md-12 pl-lg">
@ -85,40 +86,12 @@
</ul> </ul>
</div> </div>
<div class="column col-lg-7 col-sm-12 col-md-12 of-hidden"> <div class="column col-lg-7 col-sm-12 col-md-12 of-hidden">
<iframe src="https://player.vimeo.com/video/578170143" <iframe src="assets/video/vid_estratti.mp4"
width="640" height="360" frameborder="0" allowfullscreen></iframe> width="640" height="360" frameborder="0" allowfullscreen></iframe>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Solo versione online -->
<section class="odd-stripe">
<div class="container">
<div class="columns mb-2">
<div class="col-12 mb-2">
<h2>Output tecnologici (a cura di Orpheo)</h2>
</div>
<div class="column col-lg-3 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">Sito web</p>
<a href="https://www.innovapatrimonio.com/" title="Vai al sito di InnovaPatrimonio">
<img class="mt-2" src="img/innova.png" alt="Sito di InnovaPatrimonio">
</a>
</div>
<div class="column col-lg-3 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>
<a href="https://cms.innovapatrimonio.com/" title="Vai alla piattaforma web">
<img class="mt-2" src="img/sito_ip.PNG" alt="Piattaforma InnovaPatrimonio">
</a>
</div>
<div class="column col-lg-3 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>
<a href="https://pwa.innovapatrimonio.com/" title="Vai alla web app di InnovaPatrimonio">
<img class="mt-2" src="img/webapp.PNG" alt="Web App InnovaPatrimonio">
</a>
</div>
</div>
</section>
<!-- Fine (versione online) -->
<section class="prj-logos"> <section class="prj-logos">
<div class="container"> <div class="container">
<div class="columns mb-2"> <div class="columns mb-2">
@ -135,12 +108,10 @@
</figure> </figure>
</div> </div>
<div class="col-3 col-sm-12 col-md-12 pl-2 pr-2"> <div class="col-3 col-sm-12 col-md-12 pl-2 pr-2">
<a href="https://orpheogroup.com">
<figure class="figure"> <figure class="figure">
<img class="of-hidden" src="img/loghi/logo_orpheo.png" alt="ORPHEO"> <img class="of-hidden" src="img/loghi/logo_orpheo.png" alt="ORPHEO">
<figcaption class="figure-caption text-center opensans">ORPHEO</figcaption> <figcaption class="figure-caption text-center opensans">ORPHEO</figcaption>
</figure> </figure>
</a>
</div> </div>
<div class="col-3 col-sm-12 col-md-12 pl-2 pr-2"> <div class="col-3 col-sm-12 col-md-12 pl-2 pr-2">
<figure class="figure"> <figure class="figure">
@ -153,20 +124,16 @@
<div class="columns mt-lg"> <div class="columns mt-lg">
<div class="col-3 col-sm-12 col-md-12"></div> <div class="col-3 col-sm-12 col-md-12"></div>
<div class="col-4 col-sm-12 col-md-12"> <div class="col-4 col-sm-12 col-md-12">
<a href="https://www.ispc.cnr.it" title="Vai al sito di CNR ISPC">
<figure class="figure"> <figure class="figure">
<img class="of-hidden" src="img/ispc_ext_large.png" alt="CNR ISPC"> <img class="of-hidden" src="img/ispc_ext_large.png" alt="CNR ISPC">
<figcaption class="figure-caption text-center opensans">CNR ISPC</figcaption> <figcaption class="figure-caption text-center opensans">CNR ISPC</figcaption>
</figure> </figure>
</a>
</div> </div>
<div class="col-2 col-sm-12 col-md-12"> <div class="col-2 col-sm-12 col-md-12">
<a href="https://www.teatropotlach.org" title="Vai al sito del Teatro Potlach">
<figure class="figure"> <figure class="figure">
<img class="of-hidden" src="img/loghi/logo_potlach.jpg" alt="TEATRO POTLACH" id="potlach"> <img class="of-hidden" src="img/loghi/logo_potlach.jpg" alt="TEATRO POTLACH" id="potlach">
<figcaption class="figure-caption text-center opensans">TEATRO POTLACH</figcaption> <figcaption class="figure-caption text-center opensans">TEATRO POTLACH</figcaption>
</figure> </figure>
</a>
</div> </div>
<div class="col-3 col-sm-12 col-md-12"></div> <div class="col-3 col-sm-12 col-md-12"></div>
</div> </div>

View File

@ -20,8 +20,11 @@
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<div class="video-responsive"> <div>
<iframe src="" frameborder="0" allowfullscreen allow="autoplay"></iframe> <video class="video-responsive" disablePictureInPicture oncontextmenu="return false;" controls autoplay controlsList="nodownload">
<source src="" type="video/mp4">
Il browser non supporta i video integrati
</video>
</div> </div>
</div> </div>
</div> </div>