Release MOVIO SCMS. Versione Tutorial. Commenti Dichiarazione di copyright

Transcript

1 Titolo Tutorial MOVIO: Template Release MOVIO SCMS 1.00 Versione Tutorial 1.00 Data 16/03/2014 Autori e affiliation Rubino Saccoccio (Gruppometa) Commenti Dichiarazione di copyright Abstract Questo documento descrive il front-end e il back-end di MOVIO. E illustrata la funzionalità Template. MOVIO Template - v.1.00 del 17/03/14 1

2 Sommario Sommario... 2 Template... 3 Descrizione... 3 Personalizzazione del template... 4 Proprietà del sito... 4 Colori... 5 Moduli MOVIO Template - v.1.00 del 17/03/14 2

3 Template Descrizione La funzionalità Template è accessibile dalla colonna di sinistra del backend di MOVIO. Se si clicca sulla voce Template viene mostrata la schermata di scelta dei template attualmente installati in MOVIO. Template installati in MOVIO NOTA: MOVIO nella sua versione iniziale viene rilasciato con un solo template, che quindi è quello selezionato. Il template scelto si può personalizzare cliccando, dopo aver selezionato il template, sulla linguetta Personalizza: MOVIO Template - v.1.00 del 17/03/14 3

4 Personalizzazione del template Proprietà del sito La pagina di personalizzazione consente di compilare alcuni campi con i metadati dell intera istanza di MOVIO e di definire i colori di ogni componente di MOVIO. Metadati generali dell istanza di MOVIO Nella parte iniziale è possibile definire alcune caratteristiche del sito, tipiche del template Titolo di sinistra, titolo in corrispondenza della colonna sinistra Titolo di destra, titolo in corrispondenza della colonna destra Font principale, font usata per il titolo Font secondaria, font usata per il sottotitolo NOTA: le font sono state scelte tra quelle disponibili OpenSource, attualmente in MOVIO sono disponibili sette font diverse MOVIO Template - v.1.00 del 17/03/14 4

5 Colori La seconda parte è dedicata a personalizzare i colori usati nel template scelto. È possibile selezionare i/il preset previsto dal template da un menu a tendina Oppure definire blocco per blocco dei colori personalizzati, tra parentesi i valori di default. Generali In questo blocco si definiscono i colori generali di tutta l istanza Movio Sfondo (#FFFFFF) (Sfondo del testo) Testo (#000000) (Colore del testo) Intestazione (#2F2F2F) (Colore delle scritte di intestazione del testo) Link (#CC3522) (Colore dei link) Cornice immagine (#C6C6C6) (Cornice delle immagini) Blocco per i colori generali (preset template) Esempio con il preset base MOVIO Template - v.1.00 del 17/03/14 5

6 Esempio di uso dei colori generali del preset base del template Esempio con il preset modificato Blocco per i colori generali (preset template) Esempio di uso dei colori generali del preset modificato del template Barra superiore In questo blocco si definiscono i colori della barra superiore: Sfondo (#CC3522) Colore di sfondo della barra in alto Testo (#FFFFFF) Colore del testo Mouse su/selezionato (#B82013) Colore al passaggio del mouse o del testo selezionato Blocco per Barra superiore (preset template) Barra superiore (preset template) MOVIO Template - v.1.00 del 17/03/14 6

7 Blocco per Barra superiore (preset modificato) Barra superiore (preset modificato) MOVIO Template - v.1.00 del 17/03/14 7

8 Slider Home Page Queste impostazioni vanno ad agire sul box dello slider della Home Page Sfondo (#CC3522) Colore dello sfondo del testo Testo (#FFFFFF) Colore del testo Blocco per Slider Home page (preset template) Slider Home page (preset template) Slider Home page (preset template) Slider Home page (preset template) MOVIO Template - v.1.00 del 17/03/14 8

9 Navigazione In questo blocco si definiscono i colori del riquadro di navigazione: Sfondo (#F5F5F5) Sfondo del riquadro Sfondo Mouse su/selezionato (#CC3522) Colore dello sfondo mostrato quando ci si posiziona con il mouse o si seleziona una voce Testo (#000000) Colore delle voci di menu Testo Mouse su/selezionato (#FFFFFF) Colore del testo mostrato quando ci si posiziona con il mouse o si seleziona una voce Blocco per Navigazione (preset template) e Navigazione (preset template) Blocco per Navigazione (preset template) e Navigazione (preset template) MOVIO Template - v.1.00 del 17/03/14 9

10 Box HomePage e Box Entity In questo blocco si definiscono i colori dei Box della Home Page e pulsanti che aprono/chiudono i box delle Entity: Colori dei box della Home Page Cornice (#C6C6C6) Colore della cornice dei box Sfondo (#FAFAFA) Colore dello sfondo dei box Sfondo intestazione (#F3F3F3) Colore dello sfondo della testatina intestazione del box Titolo (#000000) Colore del titolo del box Testo (#000000) Colore del testo del box Icona (#FFFFFF) Colore dell icona Sfondo icona (#A1A1A1) Colore dello sfondo dell icona Blocco per Box (preset template) Box (preset template) MOVIO Template - v.1.00 del 17/03/14 10

11 Blocco per Box (template modificato) Colori di pulsanti che aprono/chiudono i box delle Entity Cornice del pulsante collassabile (#D6D6D6), colore per bordo del pulsante Sfondo del pulsante collassabile (#FFFFFF), colore per sfondo del pulsante Icona del pulsante collassabile (#A1A1A1), colore per icona del pulsante Mouse su icona pulsante collassabile (#CB3521), colore per rollover su icona del pulsante Blocco per pulsante collassabile box Entity (preset template) MOVIO Template - v.1.00 del 17/03/14 11

12 Blocco per pulsante collassabile box Entity (preset modificato) Moduli Questo modulo gestisce i colori dei moduli compilabili: Cornice (#E9E9E9) bordo di separazione dei singoli moduli Cornice se richiesto (#B82013) Cornice per il singolo modulo se obbligatorio Pulsante principale (#B82013) Colore di sfondo del pulsante principale Pulsante secondario (#CACACA) Colore di sfondo del pulsante delle form quando non è il pulsante principale, ad esempio vedi nella form sono previsti i due pulsanti Cerca Reset questo parametro definisce il colore del pulsante Reset Testo del pulsante (#FFFFFF) Colore del testo del pulsante principale Blocco per Form (preset template) e Form (preset template) MOVIO Template - v.1.00 del 17/03/14 12

13 Blocco per Form (preset modificato) e Form (preset modificato) MOVIO Template - v.1.00 del 17/03/14 13

14 Tools/Strumenti In questo blocco la prima opzione è riservata alla Timeline, i restanti quattro allo Storyteller Tema della Timeline(#4822CC), tema del colore usato nella timeline per: Scritta per evento, linea verticale e temporale dell evento Timeline Strumenti - Timeline (preset template) Strumenti Tema della Timeline (preset originale) Tools - TImeline (preset template) Strumenti Tema della Timeline (preset modificato) MOVIO Template - v.1.00 del 17/03/14 14

15 Storyteller Riguardano lo Storyteller le ultime quattro opzioni: Sfondo dello Storyteller (#8AACC4), colore di sfondo generale Sfondo degli elementi dello Storyteller (#D4E4F1), colore di sfondo dei singoli elementi della storia Cornice dello Storyteller (#20176A), colore della cornice di tutta la storia digitale Link dello Storyteller (#07082C), colore dei link testuali Storyteller (preset template) Storyteller (preset originale) MOVIO Template - v.1.00 del 17/03/14 15

16 Tools (preset modificato) Storyteller (preset modificato) MOVIO Template - v.1.00 del 17/03/14 16

17 Footer Blocco riservato ai colori del footer: Sfondo: (#363636) Cornice: (#5E5E5E) Testo: (#FFFFFF) Blocco per Footer (preset template) Footer (preset template) Footer (preset modificato) Blocco per Footer (preset template modificato) MOVIO Template - v.1.00 del 17/03/14 17

18 Footer logo In questo blocco si va ad aggiungere un altro eventuale.. E possibile specificare Logo Aggiuntivo, immagine da inserire nel footer Link a cui punta il logo, link a cui punta il logo se cliccato Titolo a cui punta il logo, titolo del sito a cui punta il logo se cliccato Campi per logo (preset template) Logo (preset template) MOVIO Template - v.1.00 del 17/03/14 18

19 Custom CSS personalizzato Blocco riservato ad eventuale CSS personalizzato per l istanza di MOVIO E possibile rimappare le classi CSS native con classi personalizzate inseribili direttamente dal backend di MOVIO in questa box. (preset css personalizzato) frontend MOVIO Template - v.1.00 del 17/03/14 19

20 (CSS personalizzato) frontend (con css personalizzato) MOVIO Template - v.1.00 del 17/03/14 20