Sistema di Gestione delle Pagine Statiche

Transcript

1 Sistema di Gestione delle Pagine Statiche manuale_spm.doc Il presente documento è riservato Pagina 1 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

2 SOMMARIO 1 Introduzione Come utilizzare questo manuale Struttura di un Sito Web Il menù di navigazione Il sistema di Gestione delle Pagine Prerequisiti Login Operazioni possibili sulla Home Page Modificare la Home Page Inserire una nuova sezione del sito Inserire le risorse correlate alla pagina Associare un responsabile ad una pagina Operazioni possibili sulle pagine Aggiungere una pagina Eliminare una pagina Spostare una pagina Cambiare la sezione di una pagina Spostare la pagina di una posizione La gestione delle utenze Lo strumento di editor delle pagine Il menù a tendina La barra degli strumenti Inserire un elenco Inserire una tabella Inserire un immagine Inserire una linea orizzontale Inserire un collegamento Inserire un allegato...32 ELENCO DELLE FIGURE Figura 1: struttura ad albero...4 Figura 2: schermata sito con tre sezioni...5 Figura 3: pagine di una sezione...5 Figura 4: schermata di autenticazione...9 Figura 5: prima schermata del sistema...9 Figura 6: operazioni sulla Home Page...10 Figura 7: modificare la Home Page...10 Figura 8: aggiungere una sezione...11 Figura 9: esempio di inserimento sezione...12 Figura 10: visualizzazione nell albero della sezione inserita...13 Figura 11: inserire le risorse correlate...13 manuale_spm.doc Il presente documento è riservato Pagina 2 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

3 Figura 12: schermata risorse correlate...14 Figura 13: esempio di inserimento di una risorsa correlata...14 Figura 14: risorsa correlata inserita con successo...15 Figura 15: responsabile di una pagina...15 Figura 16: associare un responsabile ad una pagina...16 Figura 17: responsabile inserito con successo...16 Figura 18: operazioni su una pagina...17 Figura 19: aggiungere una pagina di una sezione...18 Figura 20: visualizzazione delle pagine inserite nell albero...18 Figura 21: eliminare una pagina...19 Figura 22: cambiare la sezione di una pagina...20 Figura 23: selezionare il nodo destinazione...20 Figura 24: pagina spostata con successo...21 Figura 25: sposta in alto...21 Figura 26: pagina spostata in alto con successo...22 Figura 27: accedere alla gestione delle utenze...22 Figura 28: aggiungere un utente...23 Figura 29: dati del redattore...23 Figura 30: mostra le pagine associate al redattore...24 Figura 31: aggiungi una nuova pagina...24 Figura 32: selezionare da pagina da associare...25 Figura 33: riepilogo pagine associate...25 Figura 34: lo strumento di editor...26 Figura 35: menù a tendina...27 Figura 36: inserire titolo passo Figura 37: inserire titolo passo Figura 38: inserire valore di una abbreviazione...29 Figura 39: barra degli strumenti...30 Figura 40: proprietà di una tabella...30 Figura 41: proprietà dell immagine...31 manuale_spm.doc Il presente documento è riservato Pagina 3 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

4 1 INTRODUZIONE 1.1 Come utilizzare questo manuale Questo manuale è indirizzato a due tipologie di utente: L amministratore del sito ed il redattore di una pagina. Per il redattore tuttavia sono di interesse solo una minima parte delle informazioni qui riportate, in particolare dovrà limitarsi a leggere questa introduzione ed i paragrafi 2.1, 2.2, 2.3.1, 2.3.3, Struttura di un Sito Web Un Sito Web creato con il Sistema di Gestione delle Pagine Statiche si sviluppa con una struttura definita ad albero, ovvero secondo uno schema del tipo: Figura 1: struttura ad albero La Home Page è la prima pagina che viene visualizzata arrivando al Sito Web e rappresenta la radice di questo ipotetico albero dalla quale discendono direttamente le sezioni del sito. Le sezioni sono le aree principali in cui è suddiviso un Sito Web, nel grafico dalla Home Page partono tre rami ciascuno dei quali corrisponde ad una sezione. Per avere un esempio pratico di quanto finora illustrato si può far riferimento alla seguente figura in cui è presentata una schermata di un Sito Web con tre sezioni: portfolio, staff e contatti: manuale_spm.doc Il presente documento è riservato Pagina 4 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

5 Figura 2: schermata sito con tre sezioni Come si può osservare i nomi delle sezioni vengono presentati direttamente nel menù di navigazione del Sito Web. Ciascuna sezione conterrà diverse pagine di argomenti inerenti alla sezione di appartenenza; nello schema di albero presentato dalla Sezione 1 partono due rami, questo significa che la sezione conterrà due pagine. Continuando con l esempio pratico di cui sopra si possono immaginare due pagine nella sezione portfolio ciascuna delle quali descriva un progetto portato a termine dall Ufficio Web di Ateneo: Figura 3: pagine di una sezione 1.3 Il menù di navigazione Come visto finora il menù di navigazione si presenta come una lista che rispecchia perfettamente la struttura ad albero descritta. Quando si accede al sito nel menù sono visibili manuale_spm.doc Il presente documento è riservato Pagina 5 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

6 soltanto i collegamenti alla Home Page ed alle sezioni; cliccando sulla sezione di interesse questa viene espansa e nel menù vengono visualizzate le pagine che appartengono a quella sezione. manuale_spm.doc Il presente documento è riservato Pagina 6 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

7 2 IL SISTEMA DI GESTIONE DELLE PAGINE 2.1 Prerequisiti Per il corretto funzionamento del Sistema di Gestione delle Pagine è necessario installare il software scaricabile dall indirizzo: Oppure accedendo al sistema di gestione e cliccando su Software Necessario in alto a destra: si aprirà la seguente pagina Web: manuale_spm.doc Il presente documento è riservato Pagina 7 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

8 Il prodotto da richiedere è XStandard Pro 30-day Eval. Nel caso in cui non si posseggano i diritti per installare il suddetto software è possibile contattare direttamente i tecnici dell Ufficio Elaborazione Dati ( 2.2 Login Per accedere al sistema è necessario effettuare una login. manuale_spm.doc Il presente documento è riservato Pagina 8 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

9 Figura 4: schermata di autenticazione Basta inserire lo Username e la Password che vi verranno comunicati e cliccare su Entra. 2.3 Operazioni possibili sulla Home Page Una volta effettuata la login si accede al Sistema di Gestione che si presenta con una schermata di questo tipo. Figura 5: prima schermata del sistema Sulla sinistra è presentato il nome dell utente che sta utilizzando il sistema (Mario Rossi nell esempio) ed il pulsante logout mediante il quale si esce dal sistema. Sulla destra è presentata una lista delle pagine che compongono il sito; nel passo uno, poiché il sito è ancora vuoto, è presente solamente la HomePage. Spostando il cursore del mouse sopra l etichetta home vengono visualizzate le manuale_spm.doc Il presente documento è riservato Pagina 9 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

10 operazione che possono essere effetuate: Figura 6: operazioni sulla Home Page Le operazioni possibili sono quattro: Modifica la pagina Aggiungi una pagina Inserisci le risorse correlate alla pagina Associa un responsabile ad una pagina Modificare la Home Page Figura 7: modificare la Home Page Ciccando sull etichetta home si accede ad uno strumento di editor che permette di modificare il titolo ed il contenuto della pagina. Le funzionalità di questo strumento sono descritte in dettaglio nel paragrafo 2.4 manuale_spm.doc Il presente documento è riservato Pagina 10 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

11 2.3.2 Inserire una nuova sezione del sito Per inserire una nuova sezione del sito è sufficiente ciccare sull icona aggiungi accanto all etichetta home: Figura 8: aggiungere una sezione In questo modo si accede allo strumento di editor (cfr 2.4 ) che consente di specificare il titolo della sezione ed il contenuto della pagina che fungerà da introduzione alla sezione. manuale_spm.doc Il presente documento è riservato Pagina 11 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

12 Figura 9: esempio di inserimento sezione E importante prestare molta attenzione al titolo della pagina poiché è proprio il titolo che verrà visualizzato come voce nel menù di navigazione per identificare la sezione. Una volta inserita la sezione (denominata in questo esempio Sezione 1 ) si avrà una visualizzazione di questo manuale_spm.doc Il presente documento è riservato Pagina 12 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

13 tipo: Figura 10: visualizzazione nell albero della sezione inserita Inserire le risorse correlate alla pagina In ogni pagina del Sito Web è presente un box di risorse correlate che contiene collegamenti a pagine o a documenti di interesse per la pagina in questione. Per aggiungere una risorsa correlata è sufficiente cliccare sull icona relativa: Figura 11: inserire le risorse correlate In questo modo si accede ad una schermata con due campi: Titolo ed Url manuale_spm.doc Il presente documento è riservato Pagina 13 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

14 Figura 12: schermata risorse correlate Il titolo rappresenta l etichetta che identificherà la risorse, mentre l url è l indirizzo internet della risorsa; ad esempio se volessimo inserire un collegamento al Sito Web di Ateneo potremmo digitare Univerisità degli Studi Roma Tre nel titolo, nel url e cliccare su aggiungi. Figura 13: esempio di inserimento di una risorsa correlata Una volta effettuata questa operazione si giunge ad una schermata con il riepilogo delle risorse correlate inserite e la possibilità di eliminarle qualora non siano più necessarie (cliccando sulla x manuale_spm.doc Il presente documento è riservato Pagina 14 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

15 rossa accanto alla risorsa). Per tornare all albero delle pagina sarà sufficiente cliccare sul collegamento Albero delle pagine in alto a sinistra. Figura 14: risorsa correlata inserita con successo Associare un responsabile ad una pagina Ogni pagina del Sito Web ha un responsabile delle informazioni che, in genere, viene visualizzato a fondo pagina: Figura 15: responsabile di una pagina manuale_spm.doc Il presente documento è riservato Pagina 15 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

16 L amministratore del sito può associare questo responsabile ad una pagina utilizzando l apposita funzione: Figura 16: associare un responsabile ad una pagina Dopo il click si viene indirizzati ad una schermata con un menù a tendina nel quale sono presenti i nomi dell amministratore e dei redattori del sito (Per inserire un nuovo redattore consultare la sezione 2.5: gestione delle utenze): Una volta selezionato il nome del responsabile desiderato è sufficiente cliccare su conferma per ultimare l operazione: Figura 17: responsabile inserito con successo 2.4 Operazioni possibili sulle pagine Spostando il cursore del mouse su una delle sezioni create vengono visualizzate le manuale_spm.doc Il presente documento è riservato Pagina 16 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

17 operazioni che è possibile effettuare: Figura 18: operazioni su una pagina Come si nota immediatamente le opzioni possibili sono più numerose rispetto a quelle possibili sulla Home Page. Come nel caso descritto in precedenza cliccando sul nome si accede allo strumento di editor (cfr 2.4) che permette di modificare il titolo ed il contenuto della pagina. L inserimento delle risorse correlate corrisponde perfettamente a quanto descritto nel paragrafo così come l associazione di un responsabile ad una pagina (cfr 2.3.4). Le altre opzioni sono rispettivamente: Aggiungi una pagina Elimina pagina Sposta la pagina manuale_spm.doc Il presente documento è riservato Pagina 17 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

18 2.4.1 Aggiungere una pagina Figura 19: aggiungere una pagina di una sezione L operazione per aggiungere una pagina è identica a quella per aggiungere una sezione con l unica differenza che, ovviamente, verrà inserita una pagina della sezione e non una sezione. A titolo esemplificativo aggiungiamo due pagine nella prima sezione che abbiamo creato in precedenza semplicemente ripetendo due volte l operazione vista nel paragrafo 3.1.2; nell albero si avrà una visualizzazione come la seguente: Figura 20: visualizzazione delle pagine inserite nell albero Eliminare una pagina Per eliminare una pagina è sufficiente clicclare sull icona elimina come in figura: manuale_spm.doc Il presente documento è riservato Pagina 18 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

19 Figura 21: eliminare una pagina La pagina verrà eliminata dal sito. E importante far notare che le sezioni posso essere eliminate solo se non hanno pagine al loro interno Spostare una pagina Per spostare una pagina sono previste tre opzioni, la prima consente di cambiare la sezione di una pagina, le altre due consentono di spostare la pagina in alto o in basso di una posizione nell albero. Per poter essere più efficaci nell esempio creiamo un'altra sezione del sito contenente altre due pagine Cambiare la sezione di una pagina Per cambiare la sezione di una pagina si deve cliccare sull icona denominata cambia posizione accanto alla pagina che si desidera spostare: manuale_spm.doc Il presente documento è riservato Pagina 19 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

20 Figura 22: cambiare la sezione di una pagina A questo punto il sistema chiede di selezionare il nodo destinazione ovvero la pagina sotto la quale vogliamo spostare la pagina desiderata. Supponiamo di voler spostare pagina 1 sezione 2 nella sezione 1, sarà sufficiente selezionare come nodo destinazione proprio la sezione 1: Figura 23: selezionare il nodo destinazione manuale_spm.doc Il presente documento è riservato Pagina 20 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

21 La nuova visualizzazione dell albero sarà come la seguente: Figura 24: pagina spostata con successo Spostare la pagina di una posizione Per spostare la pagina di una posizione (in alto o in basso) nell albero sono predisposte due opzioni denominate sposta in alto e sposta in basso. Supponiamo ad esempio di voler spostare la pagina 2 della Sezione 1 sopra alla pagina 1 ; sarà sufficiente cliccare sopra l icona Sposta in alto della pagina 2 come in figura: Figura 25: sposta in alto manuale_spm.doc Il presente documento è riservato Pagina 21 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

22 Il risultato di questa semplice operazione è il seguente: Figura 26: pagina spostata in alto con successo Per spostare la pagina in basso di una posizione si dovrà seguire la stessa procedura semplicemente cliccando sull icona sposta in basso invece che sull icona sposta in alto. 2.5 La gestione delle utenze L amministratore può accedere all area di Gestione delle Utenze cliccando sull apposito collegamento in alto nella pagina: Figura 27: accedere alla gestione delle utenze All interno di questa area è possibile creare nuove utenze per il sito, ovvero aggiungere nuovi redattori per le pagine del sito. Inizialmente non sono presenti redattori, quindi la lista degli utenti è vuota. Il primo passo è quello di aggiungere un nuovo utente: manuale_spm.doc Il presente documento è riservato Pagina 22 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

23 Figura 28: aggiungere un utente In questo modo si arriva ad una schermata dove viene chiesto di inserire il nome del redattore e lo username e la password che questi utilizzerà per accedere a sua volta al sistema: Figura 29: dati del redattore Dopo aver cliccato su Salva il redattore viene inserito e si viene mandati ad una schermata con la lista dei redattori presenti sui quali è possibile effettuare due operazioni: possono essere eliminati (cliccando sulla X rossa a lato di ogni redattore) oppure si possono associare le pagine che il redattore potrà modificare (cliccando su mostra pagine associate ): manuale_spm.doc Il presente documento è riservato Pagina 23 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

24 Figura 30: mostra le pagine associate al redattore Il procedimento per associare una pagina ad un redattore è semplicissimo: una volta cliccato su mostra pagine associate si viene indirizzati ad una pagina con la lista delle pagine associate a quel redattore (se ne ha) e la possibilità di associarne delle nuove (cliccando su Aggiungi una nuova pagina ): Figura 31: aggiungi una nuova pagina Una volta cliccato il sistema fa scegliere la pagina desiderata nell albero delle pagine: manuale_spm.doc Il presente documento è riservato Pagina 24 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

25 Figura 32: selezionare da pagina da associare Dopo aver scelto la pagina si viene indirizzati alla pagina precedente, aggiornata con la nuova pagina associata. Figura 33: riepilogo pagine associate manuale_spm.doc Il presente documento è riservato Pagina 25 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

26 2.6 Lo strumento di editor delle pagine Ogni qualvolta si desidera aggiungere o modificare una pagina si viene indirizzati verso uno strumento di editor per le pagine dal funzionamento semplice ed intuitivo, simile ad un editor di testo quale potrebbe essere Microsoft Word. Figura 34: lo strumento di editor Nel campo denominato Titolo va ovviamente inserito il titolo della pagina, che corrisponderà al nome che identifica la pagina nel menù di navigazione. Il contenuto della pagina va inserito nel box sottostante, ci sono degli strumenti predefiniti per formattare il testo della pagina che di seguito analizzeremo brevemente. manuale_spm.doc Il presente documento è riservato Pagina 26 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

27 Cliccando sul menù a tendina in alto a sinistra si accede ad una serie di opzioni: Figura 35: menù a tendina Il menù a tendina Titolo I livello, Titolo II livello e Titolo III livello sono le opzioni per i titoli interni alla pagina. E importante far notare che un Titolo di II livello può essere inserito solo se preceduto da un Titolo di I livello così come un Titolo di III livello può essere inserito solo dopo un Titolo di II livello. Per fare un esempio pratico possiamo prendere in considerazione questo manuale: il paragrafo 2: Il Sistema di Gestione delle pagine è un titolo di primo livello, seguito da un titolo di secondo livello 2.2 Operazioni possibili sulla Home Page e da uno di terzo livello "2.2.1 Modificare la Home Page. Per inserire i titoli è sufficiente selezionare la parola o la frase che si desidera: manuale_spm.doc Il presente documento è riservato Pagina 27 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

28 Figura 36: inserire titolo passo 1 cliccare sul menù a tendina visto sopra e cliccare sull opzione desiderata: Figura 37: inserire titolo passo 2 Le altre opzioni del menù a tendina si utilizzano allo stesso modo, ci limitiamo a spiegare il significato di ciascuna opzione: manuale_spm.doc Il presente documento è riservato Pagina 28 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

29 Enfatizzato: server per enfatizzare una parola od una frase che abbia una particolare importanza nella pagina Abbreviazione: qualora si voglia inserire una parola abbreviata è possibile associarle un titolo, visibile solo al passaggio del mouse, che riporti per intero il valore della parola abbreviata. Il valore va inserito nel campo Testo Completo della schermata che si apre una volta cliccato su abbreviazione : Figura 38: inserire valore di una abbreviazione Apice e Pedice: inseriscono una parola come apice o come pedice Appoggia a destra e Appoggia a sinistra: allineano una parola od una frase rispettivamente a destra o a sinistra nella pagina La barra degli strumenti Prendiamo ora in considerazione le icone sulla barra accanto al menù a tendina appena manuale_spm.doc Il presente documento è riservato Pagina 29 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

30 descritto. Figura 39: barra degli strumenti Inserire un elenco Le prime due icone elenco puntato. servono per inserire rispettivamente un elenco numerato ed un Inserire una tabella Procedendo c è l icona per l inserimento delle tabelle, cliccandoci si accede ad una schermata come la seguente: Figura 40: proprietà di una tabella dove è possibile specificare tutte le proprietà della tabella. E indispensabile inserire il Sommario che rappresenta una descrizione testuale del contenuto della tabella. Una volta riempita questa schermata sarà sufficiente cliccare su Conferma e la tabella verrà inserita. manuale_spm.doc Il presente documento è riservato Pagina 30 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

31 Inserire un immagine Per inserire un immagine si deve seguire un procedimento simile. Cliccando sull icona Immagine si accede ad una finestra che permette di scegliere l immagine da inserire all interno del proprio computer (computer locale). Una volta selezionata l immagine desiderata si apre la finestra delle proprietà dell immagine: Figura 41: proprietà dell immagine E indispensabile inserire il Testo Alternativo, che rappresenta una descrizione testuale dell immagine per i non vedenti. Una volta inserito basterà cliccare su Conferma e l immagine verrà inserita correttamente. manuale_spm.doc Il presente documento è riservato Pagina 31 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it

32 Inserire una linea orizzontale Cliccando sull icona Linea viene inserita una linea orizzontale che può servire come separatore nel testo della pagina Inserire un collegamento Per inserire un collegamento ad un altra pagina è sufficiente selezionare la parola o la frase sulla quale si vuole inserire il link e cliccare sull icona collegamento. In questo modo si accede ad una schermata simile a quelle viste in precedenza, si deve inserire l indirizzo completo della pagina a cui si vuole rimandare (ad esempio volessimo inserire un collegamento al Sito Web di Ateneo dovremmo inserire nel campo Indirizzo Inserire un allegato L inserimento di un allegato è del tutto simile all inserimento di un immagine. Se vogliamo fare in modo che cliccando su una parola o una frase venga scaricato un documento qualsiasi questo dovrà essere inserito come allegato. Bisogna selezionare la parola o la frase desiderata e cliccare sull icona allegato. In questo modo si accede ad una schermata che permette di scegliere il file da allegare all interno del vostro computer (computer locale). Una volta selezionato questo file sarà sufficiente cliccare su Conferma. manuale_spm.doc Il presente documento è riservato Pagina 32 di 32 - Via Ostiense, 159 (piano IV) Roma - tel uwa@uniroma3.it - uwa.uniroma3.it