Guida alla gestione contenuti del sito

Transcript

1

2 Guida alla gestione contenuti del sito INTRODUZIONE Per gestire i contenuti del sito Emporio Vini Cantine G.S. Bernabei, è necessario scrivere nella barra degli indirizzi del proprio browser il seguente indirizzo: Verrà visualizzata la seguente schermata nella finestra del browser: Fig.1 Inserire i seguenti dati d'accesso sugli appositi spazi: Username Password cbernabei i7eins9tcdgst8icyhz+6w== La password è stata criptata per motivi di sicurezza. Contattare l indirizzo assistenza@internetimage.it per ricevere la password in chiaro. Inseriti i dati, cliccare sul pulsante entra. Se i dati inseriti sono corretti, sarete collegati come amministratore del sito. Verrà visualizzata la seguente schermata: Fig.2 Per navigare nell aria amministrativa del sito, basta cliccare sui pulsanti del menù che apriranno le relative sezioni quali gestione pagine, news, media, prodotti, clienti, e-commerce e libreria. Le sottopagine delle varie sezioni saranno visibili nel menù a tendina che sarà visualizzato passando il cursore sopra alle voci del menù classico. Pagina 1 di 60

3 Gestione PAGINE Fig.3 La sezione gestione pagine amministra le pagine visibili pubblicamente all interno del sito. Verranno evidenziate le seguenti informazioni: - la pagina destinata ad essere l homepage, evidenziata in viola chiaro (ovviamente la pagina indicata sarà la home come impostazione di default); - le pagine visibili nel menù pubblico, evidenziate in giallo; - le pagine esterne al menù, non evidenziate. Alla sinistra della lista delle pagine inserite, ci sono due box contenenti alcune funzioni. Nel dettaglio: Il box a sinistra permette di evidenziare solamente delle determinate pagine nella lista. Per scegliere la tipologia, basta cliccare sulla freccia e selezionare la voce interessata (tutte, homepage, menù principale ed escluse dal menù). Per inserire una nuova pagina, invece, basta cliccare sul pulsante nuova pagina in alto. Pagina 2 di 60

4 Tool d aiuto nella selezione delle pagine Per facilitare la selezione della pagina, quando si passa il cursore all interno della lista delle pagine inserite nel sito, il rigo si evidenzia in azzurro. Colorazione normale della pagina homepage : Colorazione della pagina selezionata: Tool d aiuto per la navigazione delle pagine Per facilitare la navigazione e la selezione delle pagine create e quindi visibili dall area pubblica del sito, è stato predisposto un menù laterale semplice ed intuitivo, in modo da far assomigliare l area amministrativa al sito vero e proprio visto dall utenza. Per selezionare e successivamente modificare una pagina, basta cliccare nella voce interessata. La visualizzazione delle pagine, inoltre, permette di vedere quali voci hanno delle sottocategorie e quali invece ne sono prive (le sottocategorie hanno una rientranza rispetto alle altre voci, come, ad esempio, la pagina i miei ordini). Di seguito saranno analizzate le altre voci presenti nella pagina. Nome della pagina Cestino Icone Indica il nome della pagina e link associato. Ad esempio: Home index.php?ip=1 e index.php?p=home. Per eliminare una voce dal sito, cliccare trascinare la stessa nell area del cestino. Icona SOTTOPAGINE Se l icona appare accanto al nome della voce, significa che quest ultima ha delle sottopagine associate. Cliccando sull icona (o sul nome che verrà visualizzato con una sottolineatura) si accederà ad una seconda lista di voci (le sottopagine associate alla voce madre) con le medesime funzioni. Icona MODIFICA Cliccando sull icona, si accede al pannello di modifica della voce selezionata. Pagina 3 di 60

5 Posizione e priorità delle pagine La priorità delle pagine, ovvero la posizione più o meno in alto all interno della lista, è amministrabile grazie ad una semplice funzione di drag&drop (trascina e rilascia). Per attivare questa funzione, basta puntare il cursore del mouse sopra alla pagina interessata. Il puntatore, da freccia cambierà forma in un multi freccia, come nell immagine a sinistra. Appena il cursore cambierà forma, basta tenere premuto il pulsante sinistro del mouse e spostare la pagina nella posizione desiderata. Le pagine si scambieranno in tempo reale all interno della lista. Per rendere effettive le modifiche, basta rilasciare il pulsante del mouse; comparirà un box verde a scomparsa che conferma l avvenuta modifica. Nel dettaglio: L immagine a sinistra mostra la selezione e lo spostamento, tenendo premuto il pulsante del mouse, della pagina interessata (nell esempio in figura, la home). Nella figura a sinistra, lo scatto che effettua la pagina durante lo spostamento da una posizione all altra, in questo caso tra la pagina home che viene posizionata al posto della pagina chi siamo. Nell immagine, il messaggio di avvenuta modifica nel box verde a scomparsa. L operazione di modifica della priorità delle pagine può essere eseguita ogni qualvolta lo si desideri, in tutte le liste di amministrazione delle pagine e sottopagine. Per cancellare una pagina, trascinare la voce interessata nel cestino a fondo pagina e lasciare il pulsante (come visto nella tabella grigia sopra). A pagina seguente verrà mostrata la modalità d inserimento di una nuova pagina all interno del sito. Pagina 4 di 60

6 Inserimento e modifica delle pagine Si aprirà una nuova finestra del browser con la seguente interfaccia: Per inserire una nuova pagina all interno del sito, basta cliccare sul pulsante nuova pagina (vedi immagine). Fig.4 Fig.5 Fig.6 Pagina 5 di 60

7 Le voci contrassegnate dal simbolo *, sono obbligatorie e devono essere compilate. Se, al momento della pubblicazione effettiva della pagina, non è stato compilato un campo obbligatorio, il sistema riconosce la mancanza ed avvisa l'utente, segnalando la parte da compilare. Di seguito saranno analizzate le varie funzioni della pagina. Voci principali della pagina Di seguito saranno analizzate le impostazioni principali della pagina che si andrà a creare e/o modificare. Nome della pagina Sottocategoria della pagina Box laterale Voce obbligatoria. Il campo compila il nome della pagina. Alla destra dell'area di testo sarà presente una bandiera che mostra la lingua alla quale fa riferimento l opzione di inserimento (italiano, inglese e tedesco). La funzione permette di associare la nuova pagina ad una precedentemente creata, oppure di impostarla come principale. La voce di default selezionata sarà nessuna - pagina principale. La funzione permette di associare alla pagina un box predefinito (nell esempio a sinistra, contatti). Impostazioni avanzate della pagina La voci contenute in questa sezione fanno riferimento ad alcune impostazioni particolari relative all indicizzazione del sito. Raccomandiamo la modifica di tali voci solo se si conoscono i campi e le funzioni a cui fa riferimento. Di seguito saranno analizzate le impostazioni avanzate della pagina che si andrà a creare e/o modificare. Per visualizzare/attivare il pannello di gestione delle voci, cliccare sul link impostazioni avanzate o sul simbolo della fig.7. Fig.7 È l homepage Voce obbligatoria. La voce imposta o meno la nuova pagina come homepage del sito. Selezionare SI o NO dal menù a tendina. Se esiste già una homepage, il sistema bloccherà questa funzione per questioni di sicurezza. Per impostare la nuova pagina come homepage, occorre prima eliminare la home attuale. Il messaggio visualizzato sarà: ATTENZIONE: elemento non selezionabile: esiste già una homepage per il sito. Viene visualizzata nel menù Consigliamo comunque di contattare la web agency (assistenza@internetimage.it) prima di effettuare questa modifica. Voce obbligatoria. La voce indica se la nuova pagina è visualizzata nel menù pubblico del sito. Selezionare SI o NO dal menù a tendina. Pagina 6 di 60

8 Tipologia della pagina La voce permette di identificare la tipologia della pagina inserita (o da inserire). Spuntare la voce PAGINA NORMALE se la pagina non deve avere particolari caratteristiche (pagina normale appunto) oppure spuntare PAGINA RAGGRUPPAMENTO se la pagina dovrà essere un contenitore di altre pagine figlie, e quindi assumere un aspetto grafico diverso, con dei box cliccabili. Link esterno Modalità ricerca Titolo della pagina (meta tag) Frase della testata Description keywords Keyphrase Visione d insieme Inserire qui il link esterno che si vuole raggiungere cliccando sulla pagina (dall area pubblica). Il link deve essere inserito nel seguente formato: Opzioni aggiuntive sulla funzione link esterno Sotto all area di testo per l inserimento del link, ci sono due circo letti da spuntare. La voce apertura in una nuova finestra farà aprire la pagina in una nuova finestra del browser. La voce apertura nella stessa finestra, aprirà la pagina nella stessa finestra del browser. L opzione permette alla pagina di essere visualizzata nelle opzioni di ricerca, sia dal lato amministrativo e dal lato pubblico del sito. Spuntando la voce pagina normale, non verrà data nessuna opzione aggiuntiva alla pagina che si andrà a creare e/o modificare mentre spuntando la voce pagina che deve comparire tra i risultati della ricerca la pagina sarà visibile all interno della sezione opzioni per la ricerca. Il campo indica il titolo che verrà associato sul codice html della pagina. Di default verrà inserita la voce Cantine G.S. Bernabei è una enoteca online specializzata nella vendita di vini italiani di qualità. Alla destra dell'area di testo sarà presente una bandiera che mostra la lingua alla quale fa riferimento l opzione di inserimento (italiano, inglese e tedesco). Il campo associa alla testata della pagina una frase. Alla destra dell'area di testo sarà presente una bandiera che mostra la lingua alla quale fa riferimento l opzione di inserimento (italiano, inglese e tedesco). Il campo compila la voce relativa alla descrizione della pagina. Consigliamo di inserire il titolo della pagina. Di default verrà inserita la voce Cantine G.S. Bernabei è una enoteca online specializzata nella vendita di vini italiani di qualità. Alla destra dell'area di testo sarà presente una bandiera che mostra la lingua alla quale fa riferimento l opzione di inserimento (italiano, inglese e tedesco). Il campo compila la voce relativa alle parole chiave/classificazione della pagina. Consigliamo di inserire il titolo della pagina. Alla destra dell'area di testo sarà presente una bandiera che mostra la lingua alla quale fa riferimento l opzione di inserimento (italiano, inglese e tedesco). Il campo compila la voce relativa alle parole chiave/classificazione della pagina. Consigliamo di inserire il titolo della pagina. Alla destra dell'area di testo sarà presente una bandiera che mostra la lingua alla Pagina 7 di 60

9 Classification Author Slug Contenuto predefinito quale fa riferimento l opzione di inserimento (italiano, inglese e tedesco). Il campo compila la voce relativa alle parole chiave/classificazione della pagina. Consigliamo di inserire il titolo della pagina. Alla destra dell'area di testo sarà presente una bandiera che mostra la lingua alla quale fa riferimento l opzione di inserimento (italiano, inglese e tedesco). Il campo compila la voce relativa all'autore della pagina. Consigliamo di inserire il titolo della pagina. Alla destra dell'area di testo sarà presente una bandiera che mostra la lingua alla quale fa riferimento l opzione di inserimento (italiano, inglese e tedesco). Il campo compila la voce relativa alle parole chiave/classificazione della pagina. Consigliamo di inserire il titolo della pagina. Il campo indica un contenuto predefinito della pagina (se non viene inserito nulla). Selezionare quindi la voce interessata dal menù a tendina (nell esempio, contatti). Per chiudere la finestra delle impostazioni avanzate, cliccare sullo stesso pulsante usato per aprirla. Voci generiche della pagina (relative al contenuto) Di seguito saranno analizzate le impostazioni principali del locale/pagina che si andrà a creare e/o modificare. Titolo Testo breve Immagine primaria Dati immagine Testo del contenuto Voce obbligatoria. Il campo compila il titolo della pagina. Alla destra dell'area di testo sarà presente una bandiera che mostra la lingua alla quale fa riferimento l opzione di inserimento (italiano, inglese e tedesco). Inserire qui un testo breve relativo alla pagina, generalmente una breve descrizione, che verrà mostrata subito sotto al titolo nella parte pubblica del sito. Alla destra dell'area di testo sarà presente una bandiera che mostra la lingua alla quale fa riferimento l opzione di inserimento (italiano, inglese e tedesco). La funzione permette di inserire un immagine associata al contenuto. Per caricare l immagine, cliccare sul pulsante sfoglia e selezionare il file dal proprio PC. È possibile poi selezionare la posizione dell immagine (sinistra e destra) e la spaziatura in altezza (margine verticale, in pixel) ed in larghezza (margine orizzontale, in pixel). In questo campo verrà inserito il testo (e quindi il contenuto) vero e proprio della pagina. Alla destra dell'area di testo sarà presente una bandiera che mostra la lingua alla quale fa riferimento l opzione di inserimento (italiano, inglese e tedesco). Pagina 8 di 60

10 Di seguito verranno analizzate le icone ed il loro funzionamento (alla base dell area di testo): Icona GRASSETTO Effetto del testo: testo di prova. Icona CORSIVO Effetto del testo: testo di prova. Icona SOTTOLINEATO Effetto del testo: testo di prova. Icona TESTO BARRATO Effetto del testo: testo di prova. Icona ALLINEAMENTO TESTO BANDIERA A SINISTRA La funzione allinea il testo con bandiera a sinistra. Icona ALLINEAMENTO TESTO CENTRATO La funzione allinea il testo centrato. Icona ALLINEAMENTO TESTO BANDIERA A DESTRA La funzione allinea il testo con bandiera a destra. Icona ALLINEAMENTO TESTO GIUSTIFICATO La funzione allinea il testo in giustificato. Icona FAMIGLIA CARATTERE La funzione permette di inserire una determinata tipologia di carattere (font). Icona GRANDEZZA CARATTERE La funzione permette di associare una determinata altezza al carattere (punti). Icona ELENCO PUNTATO Funzione che permette di inserire un elenco puntato. Icona ELENCO NUMERATO Funzione che permette di inserire un elenco numerato. Icona TAB INDIETRO Funzione che permette di spostare indietro il testo sulla riga del paragrafo (tab). Icona TAB AVANTI Funzione che permette di spostare avanti il testo sulla riga del paragrafo (tab). Icona PASSO INDIETRO Funzione che permette di ritornare alla modifica precedente. Icona PASSO AVANTI Funzione che permette di ripristinare la modifica. Pagina 9 di 60

11 Icona INSERISCI/MODIFICA LINK La funzione permette di inserire un link all interno del testo. Il pulsante si attiverà non appena verrà selezionato una parte del testo inserito e al click si aprirà una finestra dove editare il link alla pagine desiderata. Icona ELIMINA LINK La funzione serve per togliere dal testo un link precedentemente inserito. Icona ANCORA La funzione permette l inserimento di un ancora all interno del testo, raggiungibile poi grazie ad un apposito link (solitamente Icona INSERISCI IMMAGINE La funzione permette di inserire un immagine nell area di testo. Icona PULISCI TESTO La funzione permette di pulire il testo inserito all interno dell area di editor. Icona AIUTO La funzione permette di aprire una finestra di aiuto sull editor. Icona VISUALIZZAZIONE CODICE HTML La funzione permette di vedere il codice html dello scritto inserito nell area editabile, e modificarne quindi i tag. Icona INSERISCI RIGA ORIZZONTALE La funzione permette di inserire nell area di testo una riga orizzontale. Icona RIMUOVI FORMATTAZIONE Funzione simile a pulisci testo. Il pulsante permette di cancellare ogni eventuale formattazione del testo Icona CANCELLA GUIDE/MOSTRA CARATTERI NASCOSTI La funzione permette di togliere le linee guida delle tabelle o di visualizzare eventuali caratteri nascosti. Icona PEDICE La funzione permette di inserire un pedice nel testo. Icona APICE La funzione permette di inserire un apice nel testo. Icona CARATTERI SPECIALI La funzione permette di inserire caratteri speciali all interno dell area di testo. Per ulteriori informazioni, contattare assistenza@internetimage.it. Pagina 10 di 60

12 Opzioni della voce IMMAGINI Inserisci un altra immagine Funzione che permette di inserire una nuova immagine (e quindi una nuova interfaccia dedicata alla nuova immagine). Cliccare tante volte quante sono le immagini da inserire. La schermata visualizzata sarà la seguente (n finestre a n clic effettuati): Immagine Pubblicata Priorità Descrizione La funzione permette di inserire l immagine nel contenuto. Per caricare l immagine, cliccare sul pulsante scegli documento e selezionare il file dal proprio PC. La funzione indica se la foto è pubblicata (si) o no. Spuntare quindi la voce interessata. Voce che assegna la priorità all immagine. Più alto sarà il numero inserito, più il video sarà verso le ultime posizioni della lista. L area di testo serve per inserire una breve descrizione associata all immagine. Opzioni della voce VIDEO Inserisci un altro video Funzione che permette di inserire una nuovo video (e quindi una nuova interfaccia dedicata al nuovo video). Cliccare tante volte quanti sono i video da inserire. La schermata visualizzata sarà la seguente (n finestre a n clic effettuati): Video di Youtube Inserire qui il codice del video di Youtube (ovvero, il link è composto ad esempio Pagina 11 di 60

13 Copertina Pubblicato Priorità Descrizione dallo script il codice da copiare sarà solamente lzvxc27udhy. Voce obbligatoria. La funzione permette di inserire una copertina al video, caricabile secondo le modalità già viste all interno della guida (pulsante sfoglia e scegliere il contenuto dal proprio PC). La funzione indica se la foto è pubblicata (si) o no. Spuntare quindi la voce interessata. Voce che assegna la priorità al video (inserita come valore numerico). Più alto sarà il numero inserito, più il video sarà verso le ultime posizioni della lista. Voce che assegna una breve descrizione al video inserito. Opzioni della voce FILE Questa finestra permette di associare file allegati al contenuto. I file prima devono essere inseriti dall apposita sezione nel pannello di amministrazione (gestione media). Fig.8 Verrà visualizzata una cartella con un nome associato, che indica la tipologia alla quale il file è stato associato (vedi la sezione gestione media). Per una maggiore comodità ed intuitività, i file attualmente presenti nel sito sono stati organizzati in macrocategorie. Per associare il file al contenuto, spuntare una o più caselle. Per rendere effettiva la modifica, premere sul pulsante inserisci o modifica. Pagina 12 di 60

14 Gestione NEWS Fig.9 La sezione gestione news amministra le varie notizie inserite all interno del sito. Alla sinistra della lista delle news inserite, ci sono due box contenenti alcune funzioni. Nel dettaglio: Il box a sinistra permette di visualizzare alcune news caratterizzate da caratteristiche simili o dalla data di inserimento. Per impostare il periodo di ricerca, compilare le aree di testo identificate dalle voci da ed a. Per avviare la ricerca, cliccare su visualizza. Per inserire una nuova pagina, invece, basta cliccare sul pulsante nuova pagina in alto. Tool d aiuto nella selezione delle news Per facilitare la selezione delle news, quando si passa il cursore all interno della lista delle news inserite nel sito, il rigo si evidenzia in azzurro. Colorazione normale delle news Colorazione della news selezionata: Tool d aiuto per la navigazione delle news Per facilitare la navigazione e la selezione delle news inserite all interno del sito, è stato predisposto un menù laterale semplice ed intuitivo, in modo da far assomigliare l area amministrativa al sito vero e proprio visto dall utenza. Pagina 13 di 60

15 Per selezionare e successivamente modificare una news, basta cliccare nella voce interessata. Analizziamo ora le altre voci presenti nella pagina. Notizia Data Icone Il campo indica il nome della notizia. Il campo indica la data della news. Icona ATTIVO / NON ATTIVO L icona identifica se la news è attiva o no. Se non è attiva, lo spazio sarà riempito dalla voce NO. Per passare da uno stato (attivo) all altro (non attivo), basta cliccare sull icona. Icona MODIFICA Cliccando sull icona, si accede al pannello di modifica della news. Icona CANCELLA Cliccando sull icona, si cancellerò la news selezionata. Il sistema riconoscerà l operazione e chiederà se si è veramente sicuri di procedere all eliminazione definitiva. A pagina seguente sarà analizzata la modalità di inserimento di una nuova news. Pagina 14 di 60

16 Inserimento e modifica della news Si aprirà una nuova finestra del browser con la seguente interfaccia: Per inserire una nuova pagina all interno del sito, basta cliccare sul pulsante nuova news visto nel paragrafo gestione news (vedi immagine). Fig.10 Fig.11 Le voci contrassegnate dal simbolo *, sono obbligatorie e devono essere compilate. Se, al momento della pubblicazione effettiva della news, non è stato compilato un campo obbligatorio, il sistema riconosce la mancanza ed avvisa l'utente, segnalando la parte da compilare. A pagina seguente saranno analizzate le voci presenti nella pagina. Pagina 15 di 60

17 Voci principali della news Di seguito saranno analizzate le impostazioni principali della news che si andrà a creare e/o modificare. Nome della notizia Data Voce obbligatoria. La voce indica il nome della news. Alla destra dell'area di testo sarà presente una bandiera che mostra la lingua alla quale fa riferimento l opzione di inserimento (italiano, inglese e tedesco). Voce obbligatoria. La voce indica la data della news. È possibile selezionare la data cliccando sul pulsante calendario alla destra dell area di testo. Voci generiche della news (relative al contenuto) Di seguito saranno analizzate le impostazioni principali della pagina che si andrà a creare e/o modificare. Titolo Testo breve Immagine primaria Dati immagine Testo del contenuto Voce obbligatoria. Il campo compila il titolo della news. Alla destra dell'area di testo sarà presente una bandiera che mostra la lingua alla quale fa riferimento l opzione di inserimento (italiano, inglese e tedesco). Inserire qui un testo breve relativo alla news, generalmente una breve descrizione. Alla destra dell'area di testo sarà presente una bandiera che mostra la lingua alla quale fa riferimento l opzione di inserimento (italiano, inglese e tedesco). La funzione permette di inserire un immagine associata alla news. Per caricare l immagine, cliccare sul pulsante sfoglia e selezionare il file dal proprio PC. È possibile poi selezionare la posizione dell immagine (sinistra, destra e centro) e la spaziatura in altezza (margine verticale, in pixel) ed in larghezza (margine orizzontale, in pixel). In questo campo verrà inserito il testo (e quindi il contenuto) vero e proprio della pagina. Alla destra dell'area di testo sarà presente una bandiera che mostra la lingua alla quale fa riferimento l opzione di inserimento (italiano, inglese e tedesco). Di seguito verranno analizzate le icone ed il loro funzionamento (alla base dell area di testo): Icona GRASSETTO Effetto del testo: testo di prova. Icona CORSIVO Effetto del testo: testo di prova. Icona SOTTOLINEATO Effetto del testo: testo di prova. Icona TESTO BARRATO Effetto del testo: testo di prova. Pagina 16 di 60

18 Icona ALLINEAMENTO TESTO BANDIERA A SINISTRA La funzione allinea il testo con bandiera a sinistra. Icona ALLINEAMENTO TESTO CENTRATO La funzione allinea il testo centrato. Icona ALLINEAMENTO TESTO BANDIERA A DESTRA La funzione allinea il testo con bandiera a destra. Icona ALLINEAMENTO TESTO GIUSTIFICATO La funzione allinea il testo in giustificato. Icona FAMIGLIA CARATTERE La funzione permette di inserire una determinata tipologia di carattere (font). Icona GRANDEZZA CARATTERE La funzione permette di associare una determinata altezza al carattere (punti). Icona ELENCO PUNTATO Funzione che permette di inserire un elenco puntato. Icona ELENCO NUMERATO Funzione che permette di inserire un elenco numerato. Icona TAB INDIETRO Funzione che permette di spostare indietro il testo sulla riga del paragrafo (tab). Icona TAB AVANTI Funzione che permette di spostare avanti il testo sulla riga del paragrafo (tab). Icona PASSO INDIETRO Funzione che permette di ritornare alla modifica precedente. Icona PASSO AVANTI Funzione che permette di ripristinare la modifica. Icona INSERISCI/MODIFICA LINK La funzione permette di inserire un link all interno del testo. Il pulsante si attiverà non appena verrà selezionato una parte del testo inserito e al click si aprirà una finestra dove editare il link alla pagine desiderata. Icona ELIMINA LINK La funzione serve per togliere dal testo un link precedentemente inserito. Icona ANCORA La funzione permette l inserimento di un ancora all interno del testo, raggiungibile poi grazie ad un apposito link (solitamente Pagina 17 di 60

19 Icona INSERISCI IMMAGINE La funzione permette di inserire un immagine nell area di testo. Icona PULISCI TESTO La funzione permette di pulire il testo inserito all interno dell area di editor. Icona AIUTO La funzione permette di aprire una finestra di aiuto sull editor. Icona VISUALIZZAZIONE CODICE HTML La funzione permette di vedere il codice html dello scritto inserito nell area editabile, e modificarne quindi i tag. Icona INSERISCI RIGA ORIZZONTALE La funzione permette di inserire nell area di testo una riga orizzontale. Icona RIMUOVI FORMATTAZIONE Funzione simile a pulisci testo. Il pulsante permette di cancellare ogni eventuale formattazione del testo Icona CANCELLA GUIDE/MOSTRA CARATTERI NASCOSTI La funzione permette di togliere le linee guida delle tabelle o di visualizzare eventuali caratteri nascosti. Icona PEDICE La funzione permette di inserire un pedice nel testo. Icona APICE La funzione permette di inserire un apice nel testo. Icona CARATTERI SPECIALI La funzione permette di inserire caratteri speciali all interno dell area di testo. Per ulteriori informazioni, contattare assistenza@internetimage.it. Opzioni della voce IMMAGINI Inserisci un altra immagine Funzione che permette di inserire una nuova immagine (e quindi una nuova interfaccia dedicata alla nuova immagine). Cliccare tante volte quante sono le immagini da inserire. La schermata visualizzata sarà la seguente (n finestre a n clic effettuati): Pagina 18 di 60

20 Immagine Pubblicata Priorità Descrizione La funzione permette di inserire l immagine nel contenuto. Per caricare l immagine, cliccare sul pulsante scegli documento e selezionare il file dal proprio PC. La funzione indica se la foto è pubblicata (si) o no. Spuntare quindi la voce interessata. Voce che assegna la priorità all immagine. Più alto sarà il numero inserito, più il video sarà verso le ultime posizioni della lista. L area di testo serve per inserire una breve descrizione associata all immagine. Opzioni della voce VIDEO Inserisci un altro video Funzione che permette di inserire una nuovo video (e quindi una nuova interfaccia dedicata al nuovo video). Cliccare tante volte quanti sono i video da inserire. La schermata visualizzata sarà la seguente (n finestre a n clic effettuati): Video di Youtube Copertina Pubblicato Priorità Inserire qui il link del video da Youtube ( La funzione permette di inserire una copertina al video, caricabile secondo le modalità già viste all interno della guida (pulsante sfoglia e scegliere il contenuto dal proprio PC). La funzione indica se la foto è pubblicata (si) o no. Spuntare quindi la voce interessata. Voce che assegna la priorità al video (inserita come valore numerico). Più alto sarà il numero inserito, più il video sarà verso le ultime posizioni della lista. Pagina 19 di 60

21 Descrizione Voce che assegna una breve descrizione al video inserito. Opzioni della voce FILE Questa finestra permette di associare file allegati al contenuto. I file prima devono essere inseriti dall apposita sezione nel pannello di amministrazione (gestione media). Fig.12 Verrà visualizzata una cartella con un nome associato, che indica la tipologia alla quale il file è stato associato (vedi la sezione gestione media). Per una maggiore comodità ed intuitività, i file attualmente presenti nel sito sono stati organizzati in macrocategorie. Per associare il file al contenuto, spuntare una o più caselle. Per rendere effettiva la modifica, premere sul pulsante inserisci o modifica. Pagina 20 di 60

22 Gestione MEDIA Fig.13 La sezione gestione media, area files perette di inserire dei file esterni (ad esempio pdf, allegati ecc ) all interno del sistema per poi associarli alle pagine precedentemente create nel sito. Alla sinistra della lista dei file inseriti, ci sono due box contenenti alcune funzioni. Nel dettaglio: Il box a sinistra permette di visualizzare solo determinati file inseriti all interno del sito. Per selezionare le tipologie di file, basta selezionare la voce interessata dal menù a tendina (cliccando sulla freccia azzurra). Per impostare il filtro, cliccare su visualizza. Per inserire una nuova pagina, invece, basta cliccare sul pulsante nuova pagina in alto. Tool d aiuto nella selezione dei file Per facilitare la selezione dei file, quando si passa il cursore all interno della lista dei file inseriti nel sito, il rigo si evidenzia in azzurro. Colorazione normale di un file: Colorazione del file selezionato: Posizione e priorità dei file La priorità dei file, ovvero la posizione più o meno in alto all interno della lista, è amministrabile grazie ad una semplice funzione di drag&drop (trascina e rilascia). Per attivare questa funzione, basta puntare il cursore del mouse sopra il file interessato. Il puntatore, da freccia cambierà forma in un multi freccia, come nell immagine a Pagina 21 di 60

23 sinistra. Appena il cursore cambierà forma, basta tenere premuto il pulsante sinistro del mouse e spostare il file nella posizione desiderata. I file si scambieranno in tempo reale all interno della lista. Per rendere effettive le modifiche, basta rilasciare il pulsante del mouse; comparirà un box verde a scomparsa che conferma l avvenuta modifica. Nel dettaglio: L immagine a sinistra mostra la selezione e lo spostamento, tenendo premuto il pulsante del mouse, del file interessato (l esempio in figura mostra lo spostamento fra due pagine, home e chi siamo. Nella sezione file il sistema di drag&drop rimane invariato). Nella figura a sinistra, lo scatto che effettua la pagina durante lo spostamento da una posizione all altra, in questo caso tra la pagina home che viene posizionata al posto della pagina chi siamo. Nell immagine, il messaggio di avvenuta modifica nel box verde a scomparsa. L operazione di modifica della priorità dei file può essere eseguita ogni qualvolta lo si desideri, in tutte le liste di amministrazione delle pagine e sottopagine. Per cancellare un file dal sistema, trascinare la voce interessata nel cestino a fondo pagina e lasciare il pulsante (come visto nella tabella grigia sopra). Tool d aiuto per la navigazione dei file Per facilitare la navigazione e la selezione dei file inseriti all interno del sito, è stato predisposto un menù laterale semplice ed intuitivo, in modo da far assomigliare l area amministrativa al sito vero e proprio visto dall utenza. Per selezionare e successivamente modificare un file, basta cliccare nella voce interessata. Di seguito saranno analizzate le altre voci presenti nella pagina. Elenco files Cestino Il campo indica il nome del file. Per eliminare un file, cliccare sulla voce interessata e trascinare nell area del cestino. Pagina 22 di 60

24 Icone Icona ATTIVO / NON ATTIVO L icona identifica se il file è attivo o no. Se non è attivo, lo spazio sarà riempito dalla voce NO. Per passare da uno stato (attivo) all altro (non attivo), basta cliccare sull icona. Icona MODIFICA Cliccando sull icona, si accede al pannello di modifica del file. A pagina seguente sarà analizzato come spostare l ordine dei file contenuti nel sito e le modalità di inserimento di un nuovo file. A pagina seguente verrà analizzata l interfaccia di inserimento di un file all interno del sistema. Pagina 23 di 60

25 Inserimento e modifica dei file Si aprirà una nuova finestra del browser con la seguente interfaccia: Per inserire un nuovo file all interno del sito, basta cliccare sul pulsante nuovo file visto nel paragrafo gestione file (vedi immagine). Fig.14 Le voci contrassegnate dal simbolo *, sono obbligatorie e devono essere compilate. Se, al momento della pubblicazione effettiva del file, non è stato compilato un campo obbligatorio, il sistema riconosce la mancanza ed avvisa l'utente, segnalando la parte da compilare. Categoria Oppure inseriscine una Voce obbligatoria. La funzione permette di associare una categoria al file che si andrà ad inserire nel sistema. Questo permetterà anche di facilitare la ricerca dei file allegati all interno del sito. La voce permette di inserire una categoria ben precisa associata al file caricato. Pagina 24 di 60

26 Nome file Descrizione File Description keywords Voce obbligatoria. La voce permette di inserire il nome del file. Voce obbligatoria. La voce permette di inserire una descrizione associata al file che si andrà a caricare. Alla destra dell'area di testo sarà presente una bandiera che mostra la lingua alla quale fa riferimento l opzione di inserimento (italiano, inglese e tedesco). La funzione che permette l inserimento vero e proprio del file. Per inserire il file all interno del sistema, cliccare sul pulsante sfoglia e selezionare il file desiderato da proprio PC. Il campo compila la voce relativa alla descrizione della pagina. Consigliamo di inserire il titolo della pagina. Alla destra dell'area di testo sarà presente una bandiera che mostra la lingua alla quale fa riferimento l opzione di inserimento (italiano, inglese e tedesco). Il campo compila la voce relativa alle parole chiave/classificazione della pagina. Consigliamo di inserire il titolo della pagina. Alla destra dell'area di testo sarà presente una bandiera che mostra la lingua alla quale fa riferimento l opzione di inserimento (italiano, inglese e tedesco). Per rendere effettive le modifiche, cliccare sulla voce modifica o inserisci. Pagina 25 di 60

27 Gestione PRODOTTI Fig.15 La sezione gestione prodotti amministra i vari prodotti, colori, taglie e listini presenti all interno del sito. Qui analizzeremo le voci relative alla gestione prodotti e gestione promozioni. Gestione prodotti, sezione PRODOTTI Fig.16 All interno di questa sezione verranno gestiti i prodotti veri e propri del sito. Alla sinistra della lista dei prodotti inseriti, ci sono due box contenenti alcune funzioni, analizzate a pagina seguente. Pagina 26 di 60

28 Per inserire una nuova categoria basta cliccare sul pulsante nuova categoria in alto. Per inserire una nuova categoria basta cliccare sul pulsante nuovo prodotto in alto. Tool d aiuto nella selezione dei prodotti Per facilitare la selezione dei prodotti, quando si passa il cursore all interno della lista dei prodotti inseriti nel sito, il rigo si evidenzia in azzurro. Colorazione normale dei prodotti Colorazione del prodotto selezionato: Tool d aiuto per la navigazione dei prodotti Analizziamo ora le altre voci presenti nella pagina. Per facilitare la navigazione e la selezione dei prodotti inseriti all interno del sito, è stato predisposto un menù laterale semplice ed intuitivo, in modo da far assomigliare l area amministrativa al sito vero e proprio visto dall utenza. Per selezionare e successivamente modificare un prodotto, basta cliccare sulla voce interessata. Categorie di prodotto Icone Il campo indica il nome del prodotto. Icona MODIFICA Cliccando sull icona, si accede al pannello di modifica del prodotto. Icona PRODOTTI Cliccando sull icona, si accede al pannello di gestione e modifica dei prodotti. Icona NUMERO SOTTOCATEGORIE o PRODOTTI associati Il riquadro identifica il numero di sottocategorie o di prodotti associati alla macro-categoria. Cliccando sopra al numero si accede al pannello di amministrazione e gestione delle categorie e/o prodotti. Cestino Per eliminare un prodotto, cliccare sulla voce interessata e trascinare nell area del cestino. Pagina 27 di 60

29 Posizione e priorità dei prodotti La priorità dei prodotti, ovvero la posizione più o meno in alto all interno della lista, è amministrabile grazie ad una semplice funzione di drag&drop (trascina e rilascia). Per attivare questa funzione, basta puntare il cursore del mouse sopra il prodotto interessato. Il puntatore, da freccia cambierà forma in un multi freccia, come nell immagine a sinistra. Appena il cursore cambierà forma, basta tenere premuto il pulsante sinistro del mouse e spostare il prodotto nella posizione desiderata. I prodotti si scambieranno in tempo reale all interno della lista. Per rendere effettive le modifiche, basta rilasciare il pulsante del mouse; comparirà un box verde a scomparsa che conferma l avvenuta modifica. Nel dettaglio: L immagine a sinistra mostra la selezione e lo spostamento, tenendo premuto il pulsante del mouse, del file interessato (l esempio in figura mostra lo spostamento fra due pagine, home e chi siamo. Nella sezione prodotti il sistema di drag&drop rimane invariato). Nella figura a sinistra, lo scatto che effettua la pagina durante lo spostamento da una posizione all altra, in questo caso tra la pagina home che viene posizionata al posto della pagina chi siamo. Nell immagine, il messaggio di avvenuta modifica nel box verde a scomparsa. L operazione di modifica della priorità dei file può essere eseguita ogni qualvolta lo si desideri, in tutte le liste di amministrazione delle pagine e sottopagine. Per cancellare un prodotto dal sistema, trascinare la voce interessata nel cestino a fondo pagina e lasciare il pulsante (come visto nella tabella grigia sopra). A pagina seguente verrà spiegato come inserire una nuova categoria. Pagina 28 di 60

30 Inserimento e modifica della categoria Si aprirà una nuova finestra del browser con la seguente interfaccia: Per inserire una nuova categoria all interno del sito, basta cliccare sul pulsante nuova categoria visto nel paragrafo gestione prodotti (vedi immagine). Fig.17 Le voci contrassegnate dal simbolo *, sono obbligatorie e devono essere compilate. Se, al momento della pubblicazione effettiva della categoria, non è stato compilato un campo obbligatorio, il sistema riconosce la mancanza ed avvisa l'utente, segnalando la parte da compilare. Di seguito saranno analizzate le altre voci presenti nella pagina. Nome categoria Voce obbligatoria. La funzione da il nome alla categoria che si sta per inserire. Pagina 29 di 60

31 Descrizione Categoria padre Immagine Alla destra dell'area di testo sarà presente una bandiera che mostra la lingua alla quale fa riferimento l opzione di inserimento (italiano, inglese e tedesco). La voce permette di inserire una breve descrizione della categoria. Alla destra dell'area di testo sarà presente una bandiera che mostra la lingua alla quale fa riferimento l opzione di inserimento (italiano, inglese e tedesco). La funzione permette di associare la nuova categoria ad una esistente. Per associare la nuova categoria, cliccare sulla freccia azzurra per aprire il menù a tendina. Verranno mostrate tutte le categorie dei prodotti inserite nel sito, evidenziate con un colore. Se la categoria è evidenziata in rosso, significa che a quella categoria non è possibile associare una sotto categoria; al contrario, se il nome è evidenziato in verde, è possibile inserire al suo interno una nuova categoria. La funzione permette di inserire un immagine associata al contenuto. Per caricare l immagine, cliccare sul pulsante sfoglia e selezionare il file dal proprio PC. Per inserire le immagini della testata, cliccare sulla voce modifica o inserisci. Inserimento e modifica del prodotto Si aprirà una nuova finestra del browser con la seguente interfaccia: Per inserire una nuova categoria all interno del sito, basta cliccare sul pulsante nuovo prodotto visto nel paragrafo gestione prodotti (vedi immagine). Fig.18 Pagina 30 di 60

32 Fig.19 Le voci contrassegnate dal simbolo *, sono obbligatorie e devono essere compilate. Se, al momento della pubblicazione effettiva del prodotto, non è stato compilato un campo obbligatorio, il sistema riconosce la mancanza ed avvisa l'utente, segnalando la parte da compilare. Di seguito saranno analizzate le altre voci presenti nella pagina. Nome del prodotto Categoria Codice PREZZO (al pubblico) Peso Annata Regione associata Voce obbligatoria. La funzione indica il nome del prodotto. Alla destra dell'area di testo sarà presente una bandiera che mostra la lingua alla quale fa riferimento l opzione di inserimento (italiano, inglese e tedesco). La funzione permette di associare il prodotto ad una categoria. Per associare il prodotto alla categoria, cliccare sulla freccia azzurra per aprire il menù a tendina. Verranno mostrate tutte le categorie alle quali [ possibile associare un prodotto. Se la categoria è evidenziata in rosso, significa che in quella categoria non è possibile inserire un prodotto; al contrario, se il nome è evidenziato in verde, è possibile inserire al suo interno un nuovo prodotto. La voce permette di inserire il codice del prodotto. La voce permette di inserire il prezzo al pubblico, espresso in Euro, del prodotto che si andrà ad inserire. La voce permette di inserire il peso, espresso in Kg, del prodotto che si andrà ad inserire. La voce permette di inserire l annata del prodotto che si andrà ad inserire. La voce permette di associare il prodotto ad una regione d Italia. Titolo Testo breve Immagine primaria Voce obbligatoria. La funzione indica il titolo del prodotto. Inserendo il nome del prodotto, la voce si auto-compilerà. Alla destra dell'area di testo sarà presente una bandiera che mostra la lingua alla quale fa riferimento l opzione di inserimento (italiano, inglese e tedesco). La funzione permette di inserire un testo breve associato al prodotto. La funzione permette di caricare un immagine associata al prodotto. Cliccando sul pulsante carica immagine, si aprirà l editor per l upload delle Pagina 31 di 60

33 Dati immagine immagini. È possibile poi selezionare la posizione dell immagine (sinistra e destra) e la spaziatura in altezza (margine verticale, in pixel) ed in larghezza (margine orizzontale, in pixel). Testo del contenuto In questo campo verrà inserito il testo (e quindi il contenuto) vero e proprio della pagina. Alla destra dell'area di testo sarà presente una bandiera che mostra la lingua alla quale fa riferimento l opzione di inserimento (italiano, inglese e tedesco). Di seguito verranno analizzate le icone ed il loro funzionamento (alla base dell area di testo): Icona GRASSETTO Effetto del testo: testo di prova. Icona CORSIVO Effetto del testo: testo di prova. Icona SOTTOLINEATO Effetto del testo: testo di prova. Icona TESTO BARRATO Effetto del testo: testo di prova. Icona ALLINEAMENTO TESTO BANDIERA A SINISTRA La funzione allinea il testo con bandiera a sinistra. Icona ALLINEAMENTO TESTO CENTRATO La funzione allinea il testo centrato. Icona ALLINEAMENTO TESTO BANDIERA A DESTRA La funzione allinea il testo con bandiera a destra. Icona ALLINEAMENTO TESTO GIUSTIFICATO La funzione allinea il testo in giustificato. Icona FAMIGLIA CARATTERE La funzione permette di inserire una determinata tipologia di carattere (font). Icona GRANDEZZA CARATTERE La funzione permette di associare una determinata altezza al carattere (punti). Icona ELENCO PUNTATO Funzione che permette di inserire un elenco puntato. Icona ELENCO NUMERATO Funzione che permette di inserire un elenco numerato. Icona TAB INDIETRO Pagina 32 di 60

34 Funzione che permette di spostare indietro il testo sulla riga del paragrafo (tab). Icona TAB AVANTI Funzione che permette di spostare avanti il testo sulla riga del paragrafo (tab). Icona PASSO INDIETRO Funzione che permette di ritornare alla modifica precedente. Icona PASSO AVANTI Funzione che permette di ripristinare la modifica. Icona INSERISCI/MODIFICA LINK La funzione permette di inserire un link all interno del testo. Il pulsante si attiverà non appena verrà selezionato una parte del testo inserito e al click si aprirà una finestra dove editare il link alla pagine desiderata. Icona ELIMINA LINK La funzione serve per togliere dal testo un link precedentemente inserito. Icona ANCORA La funzione permette l inserimento di un ancora all interno del testo, raggiungibile poi grazie ad un apposito link (solitamente Icona INSERISCI IMMAGINE La funzione permette di inserire un immagine nell area di testo. Icona PULISCI TESTO La funzione permette di pulire il testo inserito all interno dell area di editor. Icona AIUTO La funzione permette di aprire una finestra di aiuto sull editor. Icona VISUALIZZAZIONE CODICE HTML La funzione permette di vedere il codice html dello scritto inserito nell area editabile, e modificarne quindi i tag. Icona INSERISCI RIGA ORIZZONTALE La funzione permette di inserire nell area di testo una riga orizzontale. Icona RIMUOVI FORMATTAZIONE Funzione simile a pulisci testo. Il pulsante permette di cancellare ogni eventuale formattazione del testo Icona CANCELLA GUIDE/MOSTRA CARATTERI NASCOSTI La funzione permette di togliere le linee guida delle tabelle o di visualizzare eventuali caratteri nascosti. Pagina 33 di 60

35 Icona PEDICE La funzione permette di inserire un pedice nel testo. Icona APICE La funzione permette di inserire un apice nel testo. Icona CARATTERI SPECIALI La funzione permette di inserire caratteri speciali all interno dell area di testo. Per ulteriori informazioni, contattare Opzioni della voce IMMAGINI Inserisci un altra immagine Funzione che permette di inserire una nuova immagine (e quindi una nuova interfaccia dedicata alla nuova immagine). Cliccare tante volte quante sono le immagini da inserire. La schermata visualizzata sarà la seguente (n finestre a n clic effettuati): Immagine Pubblicata Priorità Descrizione La funzione permette di inserire l immagine nel contenuto. Per caricare l immagine, cliccare sul pulsante scegli documento e selezionare il file dal proprio PC. La funzione indica se la foto è pubblicata (si) o no. Spuntare quindi la voce interessata. Voce che assegna la priorità all immagine. Più alto sarà il numero inserito, più il video sarà verso le ultime posizioni della lista. L area di testo serve per inserire una breve descrizione associata all immagine. Opzioni della voce VIDEO Inserisci un altro video Funzione che permette di inserire una nuovo video (e quindi una nuova interfaccia dedicata al nuovo video). Cliccare tante volte quanti sono i video da inserire. Pagina 34 di 60

36 La schermata visualizzata sarà la seguente (n finestre a n clic effettuati): Video di Youtube Copertina Pubblicato Priorità Descrizione Inserire qui il link del video da Youtube ( La funzione permette di inserire una copertina al video, caricabile secondo le modalità già viste all interno della guida (pulsante sfoglia e scegliere il contenuto dal proprio PC). La funzione indica se la foto è pubblicata (si) o no. Spuntare quindi la voce interessata. Voce che assegna la priorità al video (inserita come valore numerico). Più alto sarà il numero inserito, più il video sarà verso le ultime posizioni della lista. Voce che assegna una breve descrizione al video inserito. Opzioni della voce FILE Questa finestra permette di associare file allegati al contenuto. I file prima devono essere inseriti dall apposita sezione nel pannello di amministrazione (gestione media). Fig.20 Verrà visualizzata una cartella con un nome associato, che indica la tipologia alla quale il file è stato associato (vedi la sezione gestione media). Per una maggiore comodità ed intuitività, i file attualmente presenti nel sito sono stati organizzati in macrocategorie. Per associare il file al contenuto, spuntare una o più caselle. Pagina 35 di 60

37 Opzioni della voce PRODOTTI CORRELATI Questa finestra permette di associare dei prodotti ad altri utilizzando le categorie presenti all interno del sito. Fig.21 Per selezionare un prodotto, cliccare sul menù a tendina presente sulla destra della finestra e selezionare la categoria interessata (nell esempio, passiti e dessert): Fig.22 Dopo aver atteso qualche istante, verranno mostrati tutti i prodotti inseriti all interno della categoria. Per selezionare un prodotto, cliccare sull icona + verde accanto al nome del prodotto: Fig.23 Dopo aver cliccato sul prodotto o i prodotti interessati, verrà mostrata una nuova finestra, evidenziata in giallo, con tutti i prodotti che sono stati correlati al nuovo che andremo ad inserire. Per cancellare un prodotto dalla lista dei correlati, basta cliccare sull icona X rossa accanto al nome del prodotto (immagine a pagina seguente). Pagina 36 di 60

38 Fig.24 Ricapitolando: Icona AGGIUNGI PRODOTTO AI CORRELATI Cliccando sull icona, si aggiungerà il prodotto all interno della lista dei correlati. Icona ELIMINA PRODOTTO AI CORRELATI Cliccando sull icona, si eliminerà il prodotto all interno della lista dei correlati. Editor per l UPLOAD DELLE IMMAGINI Come spiegato precedentemente, cliccando sul pulsante immagine primaria nella gestione del prodotto, si aprirà un editor dedicato all upload e taglio dell immagine. Fig.25 Pagina 37 di 60

39 Per caricare l immagine, cliccare sul pulsante sfoglia e selezionare l immagine dal proprio PC. Dopo aver selezionato l immagine desiderata, cliccare sulla voce upload. ATTENZIONE: utilizzare la selezione per tagliare liberamente l imamgine. Fig.26 Per rendere visualizzare un anteprima dell immagine tagliata, cliccare sul pulsante salva immagine. Fig.26 Per completare il caricamento dell immagine, cliccare sul link conferma l operazione e inserisci. Se Pagina 38 di 60