2313 kb

Titolo Tutorial
MOVIO: Pagetype Home Page
Release MOVIO SCMS
1.00
Versione Tutorial
1.00
Data
02/03/14
Autori e affiliation
Rubino Saccoccio (Gruppometa)
Commenti
Dichiarazione di copyright
Abstract
Questo documento descrive il front-end e il back-end di MOVIO.
E’ illustrato il pagetype Home Page.
MOVIO – PageType: Home Page - v.1.00 del 17/03/14
1
Sommario Sommario .................................................................................................................. 2 Pagetype: Page .......................................................................................................... 3 Descrizione ............................................................................................................ 3 Campi generali della Pagina.............................................................................. 3 Campi specifici della Pagina ............................................................................. 4 Esempio di pagina Home Page ................................................................................. 7 Slider ..................................................................................................................... 8 Slider 1: vedute di Roma ................................................................................... 8 Slider 2: Artisti .................................................................................................. 8 Esempio di pagina Home Page in Front-end (1) ............................................... 9 Box ...................................................................................................................... 10 Immagine con testo ......................................................................................... 10 Immagine con link........................................................................................... 10 Timeline .......................................................................................................... 11 Esempio di pagina Home Page in Front-end (2) ............................................. 12 MOVIO – PageType: Home Page - v.1.00 del 17/03/14
2
Pagetype: Page Descrizione Il Pagetype Home Page consente di creare una nuova pagina strutturata come la
Home Page di Movio, ossia una pagina che può essere composta da un titolo, uno o
più Slider, uno o più Box.
Creiamo quindi una nuova pagina di tipo Home Page scegliendo Home dal menu dei
Tipi di pagina.
MOVIO ci mostra un modulo dove si richiede di specificare i seguenti campi:
Campi generali della Pagina • Titolo, è il titolo che avrà la nuova pagina all’interno del sito, il campo è già
compilato, ma è ancora modificabile dall’utente.
• URL, è la URL parlante della pagina, il campo è compilabile dall’utente e
serve a poter raggiungere facilmente la pagina digitando nella barra degli
indirizzi del browser direttamente questo: <indirizzo_sito>/<URL_parlante>.
NOTA: la URL parlante non può contenere spazi.
MOVIO – PageType: Home Page - v.1.00 del 17/03/14
3
Campi specifici della Pagina Uno Slider è un elemento composto da:
• Un titolo
• Un testo
• Una immagine
• Un rimando a una pagina di Movio.
Gli Slider, anche se più di uno, occupano lo stesso ingombro nella pagina. Se sono
più di uno il contenuto cambia dinamicamente scorrendo in maniera temporizzata
tutti gli slider che sono stati definiti.
Un Box è un elemento che può ospitare tre tipi diversi di
combinazioni di media:
• Immagine con testo
• Immagine con link
• Timeline.
MOVIO – PageType: Home Page - v.1.00 del 17/03/14
4
A seconda del tipo di combinazione di media che si sceglie ci sono campi diversi da
compilare per definire un Box:
Immagine con testo
• Larghezza: ossia il numero di blocchi di spazio che il Box andrà ad occupare.
Il minimo è uno, il massimo è quattro
•
•
•
•
•
Altezza, in pixel del Box
Il titolo
Il testo descrittivo
Una immagine
La pagina interna collegata al Box
Immagine con link
• Larghezza: ossia il numero di blocchi di spazio che il Box andrà ad occupare.
Il minimo è uno, il massimo è quattro
• Altezza, in pixel del Box
• Il titolo
• Una immagine
• Il titolo del link
• Un rimando ad una pagina di Movio
Timeline
• Larghezza: ossia il numero di blocchi di spazio che il Box andrà ad occupare.
Il minimo è uno, il massimo è quattro
• Altezza, in pixel del Box
• Il titolo
• Un rimando ad una pagina di Movio
MOVIO – PageType: Home Page - v.1.00 del 17/03/14
5
Nota: le immagini che vengono inserite nello Slider o nei Box devono rispettare le
seguenti dimensioni:
LARGHEZZE IMMAGINI BOX HOME
•
•
•
•
248 px se si imposta il campo Larghezza=1;
548 px se si imposta il campo Larghezza=2;
848 px se si imposta il campo Larghezza=3;
1148 px se si imposta il campo Larghezza=4;
IMMAGINE SLIDER IN HOME
•
585x290
NOTA: E' possibile incorporare dei video nei box presenti in home. Nel caso di
video presenti su Youtube o Vimeo, bisogna copiare il codice HTML generato da
YouTube o Vimeo. Dopodiché, dall'amministrazione di MOVIO, si può copiare il
codice nei vari box (agendo, ovviamente, sul linguaggio html e non in modalità
"visuale"). L'unica accortezza è quella di ridurre le dimensioni di altezza e larghezza
del frame dato automaticamente dalle piattaforme esterne, in modo che coincidano
con quelle dei box.
MOVIO – PageType: Home Page - v.1.00 del 17/03/14
6
Esempio di pagina Home Page Creiamo una nuova pagina di tipo Home
Creiamo quindi una nuova pagina di tipo Home Page scegliendo Home dal menu dei
Tipi di pagina.
Andiamo a compilarla
MOVIO – PageType: Home Page - v.1.00 del 17/03/14
7
Slider Aggiungiamo due Slider:
Slider 1: vedute di Roma Slider 2: Artisti Fare click sul pulsante
per salvare la Pagina di tipo Home Page e andare sul
frontend per visualizzare il risultato.
MOVIO – PageType: Home Page - v.1.00 del 17/03/14
8
Esempio di pagina Home Page in Front-­‐end (1) Vediamo che nel front-end abbiamo un riquadro composto da un testo e da una
immagine che cambiano nel tempo.
Nota: per l’uso dell’editor di testo si suggerisce di consultare l’apposito tutorial di
MOVIO dedicato al WYSIWYG
MOVIO – PageType: Home Page - v.1.00 del 17/03/14
9
Box Aggiungiamo ora tre box:
Immagine con testo Immagine con link MOVIO – PageType: Home Page - v.1.00 del 17/03/14
10
Timeline Fare click sul pulsante
per salvare la Pagina di tipo Home Page e andare sul
frontend per visualizzare il risultato.
MOVIO – PageType: Home Page - v.1.00 del 17/03/14
11
Esempio di pagina Home Page in Front-­‐end (2) Nota: per l’uso dell’editor di testo si suggerisce di consultare l’apposito tutorial di
MOVIO dedicato al WYSIWYG
MOVIO – PageType: Home Page - v.1.00 del 17/03/14
12