Bologna città d'arte

Progetto

L'esercitazione costruisce un semplice prodotto basato su una navigazione sequenziale costituta da un breve video sulla quale si innestano deviazioni o approfondimenti. Ecco lo schema del prodotto:

Dalla copertina si passa al video principale. Durante l'esecuzione del video in alto a sinistra appaio i nomi di luoghi di interesse che appaiono in quel momento. Cliccando il nome si mette il video in pausa e si naviga verso la deviazione/approfondimento.

Home

Elementi:

  • Immagine di sfondo Fit to window
  • Titolo tipo Title 1, titolo tipo Title 3  e bottone tipo Play button dimensionati in maniera Proportional size e posizionati centro orizzontalmente e ancorati al margine inferiore verticalmente

NB: Rispetto alla versione vista in aula ho eliminato dal bottone Play button l'azione di passaggio automatico a fullscreen. Per ripristinarla:

Principale

Elementi:

  • Per il video Bologna sono impostate le proprietà Fit to window,  Syncronize sequence with this media, Video controls e Autoplay
  • I punti di interesse sono contrassegnati da un icona (un bottone con stile Info Icon) e un titolo (text style Default) dimensionati entrambi come Fixed size e posizionati ancorandoli in alto a sinistra. Ho modificata sostituendo l'icona di default e cambiando gli stili sia per lo stile normale che per lo stile hover nel pannello design delle proprietà del progetto.

Nettuno

Sequenza collocata nel layer overlay. Elementi

  • Un unico elemento iframe dimensionato Fix to window 

Codice contenuto nell'iframe:

<iframe src="http://restauronettuno.comune.bologna.it/viewer/"></iframe>

Mercato di mezzo

Serie di sequenze ognuna contenente un immagine e due bottoni per passare alla sequenza precedente e a quella successiva. Le sequenze sono tutte collocate nel layer overlay, mentre nel layer principale rimane il video.

Elementi:

  • Immagine dimensionata Fix to window 
  • Bottoni stile Left Arrow e Right Arrow impostati Default size and position 

NB: Rispetto quanto fatto durante la lezione ho aggiunto una didascalia per ogni foto usando un elemento Hotspot e un testo stile Title 3

Porta Maggiore

Per questo approfondimento non viene usata una sequenza da caricare nel layer overlay ma un iframe che viene fatto uscire ed entrare nell schermo utilizzando le "interaction" che Klynt consente di associare a bottoni e immagini.In questo caso cliccando sul titolo del punto di interesse viene fatta scattare un animazione che porta l'iframe dalla posizione a destra di -360 alla posizione 0. Insime al bottone entra l'immagine  che è associate ad una interaction che fa ritornare iframe e immagine stessa fuori schermo. Elementi:

  • iframe con Fixed Size e Width 360. Contenuto
<iframe src="https://it.m.wikipedia.org/wiki/Porta_Maggiore_(Bologna)"></iframe>
  • Immagine (Fixed Size ancorata in alto e a destra.

San Petronio

Sequenza collocata nel layer overlay. Elementi:

  • Video Youtube. Proprietà: Fit to window , Syncronize sequence with this media

Gallerie Comunali d'Arte

Sequenza collocata nel layer overlay. Elementi:

  • Audio con proprietà: Syncronize sequence with this media e Autoplay
  • Titolo iniziale con stile Title 2 dimensionato Fixed size e posizionato al centro dello schermo.
  • Foto dimensionate Proportional Size che vengono animate impostando coordinate e dimensioni di partenza e di arrivo. 

Santo Stefano

Die sequenze collocate nel layer overlay.

Sequenza introduttiva con didascalia sul luogo di interesse che si sovrappone alla sequenza principale:

  • Tutti gli elementi sono Proportional size.
  • Titolo in alto: Text (Text Style Title 1) e Hotspot ancorati in alto a sinistra.
  • Titolo in basso collegato a Sequenza Video VR: Text (Text Style Title 3) e Hotspot ancorati in basso a destra.
  • Testo: Text (Text Style Default), ancorato al centro.

Sequenza Video VR 360:

  • Video Youtube dimensionato Fit to window 
  • Elemento iframe che contiene Google Map regolata sulle coordiante della piazza, inizialmento fuori schermo. Fixed size
  • Bottone (stile Star Icon) che fa scivolare l'iframe dentro lo schermo e spostare il video a destra. Fixed size
  • Bottone (immagine importata) che riporta l'iframe fuori schermo. Fixed size

NB: Ho modificata lo stile Star Icon sostituendo l'icona di default e cambiando gli stili sia per lo stato normale che per lo stato hover nel pannello design delle proprietà del progetto.

Risorse

Qui sotto trovi i link alle cartelle condivise. La cartella "Risorse" contiene i file utilizzati per il progetto e un cartella icone che contiene icone scaricata da Internet ridimensionate a 48x48 e 32x32 pixel. Lr icono possono essere usate per sperimentare la modifica dell'aspetto dei bottoni predefiniti di Klynt.

La cartella "Bologna" contiene l'intero progetto Klynt. Per utilizzare il progetto:

  • Seleziona la cartella Bologna e scegli scarica
  • One drive ti farà scaricare un Archivio zip che contiene tutti file del progetto
  • Decomprimi l'archivio 
  • In Klynt scegli Browse per caricare un progetto esistente e apri il file Bologna.klynt

 

Torna all'inizio