Typo 3 Sistema per la gestione dei contenuti di un sito web - Csai

Content Manager System - Typo 3
Sistema per la gestione dei contenuti di
un sito web
Manuale di utilizzo
Versione personalizzata per il sito
dell’ ACI- Automobile Club d’Italia
www.aci.it
Manuale_typo.doc
Pagina 1 di 27
Indice dei contenuti
1. Introduzione ........................................................................................... 3
2. Utenza personalizzata .............................................................................. 3
3. Strumenti ............................................................................................... 4
3.1. Indice icone di servizio ........................................................................ 4
3.2. Log in............................................................................................... 6
3.3. Funzioni principali............................................................................... 7
3.4. Gestione lista file / immagini ................................................................ 8
3.4.1 Come si crea una nuova cartella .................................................... 9
3.4.2 Come caricare un file o un'immagine sul server...............................10
3.5. Albero dei contenuti ...........................................................................11
3.6. Struttura delle pagine .........................................................................14
4. Procedimenti ..........................................................................................15
4.1. Gestione contenuti pagine web interne ..................................................15
4.1.1 Modifica/inserisci un contenuto di testo..........................................15
4.1.2 Modifica/inserisci link e allegati.....................................................18
4.1.3 Title, didascalie e testi alternativi ..................................................24
5. Inizia ciclo di approvazione........................................................................26
Manuale_typo.doc
Pagina 2 di 27
1. Introduzione
Questo manuale ha lo scopo di guidare l’utente nell’utilizzo di Typo 3, il
CMS (Content Manager System) destinato alla gestione dei contenuti
del sito web realizzato per ACI.
Al fine di offrire una guida che supporti l’operatore destinato alla
manutenzione del sito sono stati descritti nel dettaglio tutti i
procedimenti consentiti, illustrando passo dopo passo le operazioni
salienti.
2. Utenza personalizzata
Per ogni editor viene creata un’utenza personalizzata, relativa alla
gestione delle pagine di competenza. Attraverso le credenziali di
accesso (nome utente e password) assegnate si entra ne l sistema di
gestione dei contenuti delle pagine.
Manuale_typo.doc
Pagina 3 di 27
3. Strumenti
3.1. Indice icone di servizio
Funzioni rapide
Indica la pagina. Al clik consente la scelta delle funzioni
rapide di modifica associate alle pagine web.
Strumento mostra. Al clik consente la visualizzazione rapida
della pagina o delle modifiche apportate.
Salva. Consente di salvare le modifiche apportate.
Salva e visualizza. Consente di salvare le modifiche apportate
e di visualizzarle direttamente.
Salva e chiudi. Consente di salvare le modifiche apportate e
chiudere direttamente il documento lavorato.
Chiudi. Consente di chiudere il documento in lavorazione senza
salvare le eventuali modifiche apportate.
Elimina. Consente di eliminare l’intero contenuto di
riferimento. Attenzione: se eliminato un contenuto non può
essere ripristinato.
Modifica. Consente di modificare il contenuto relativo.
Crea nuovo contenuto. Consente di creare nella pagina un
nuovo contenuto.
Nascondi. Consente di rendere non visibile nella pagina web il
contenuto relativo.
Sposta. Consente di modificare l’ordine degli item (immagini
caricate, record di contenuto, ecc).
Sfoglia. Consente di sfogliare i file da caricare.
Ricarica. Consente di ricaricare i dati dal server. (Funzione
aggiorna).
Manuale_typo.doc
Pagina 4 di 27
Strumenti di testo
Strumento taglia. Consente di tagliare il contenuto.
Strumento copia Consente di copiare il contenuto.
Strumento incolla. Consente di incollare il contenuto copiato
o tagliato.
Stili di testo. Consente di impostare il testo inserito secondo
gli stili di “sottotitolo” o “normale”.
Grassetto e corsivo. Definiscono lo stile del carattere.
Rimuovi formattazione. Elimina la formattazione al testo
inserito.
Allineamento. Consente di allineare il testo a sinistra.
Elenchi. Definiscono la disposizione del testo ad elenco: per
punti o numerico.
Indentatura. Attribuiscono l’indentatura al testo selezionato.
Link. Aggiungi link/rimuovi link. Attribuisce link al testo
selezionato o li elimina (url, pagine interne, file allegati, indirizzi
email).
Immagine . Consente di inserire o modificare un’immagine
Manuale_typo.doc
Pagina 5 di 27
3.2. Log in
La schermata di log in accoglie l’utente e ne consente l’accesso alla
gestione dei contenuti.
Figura 1. Schermata di log in .
Bisogna aprire il browser e aggiungere /typo3 al dominio:
http://www.aci.it/typo3. Si apre la finestra di log in e
l’utente inserisce negli appositi campi di testo i dati richiesti:
-
Username: nome utente assegnato
Password: chiave di accesso assegnata
Cliccando sul pulsante [Log In] viene consentito l’ingresso nel sistema.
Manuale_typo.doc
Pagina 6 di 27
3.3. Funzioni principali
La schermata successiva al log in presenta all’utente le principali azioni
consentite dal sistema di gestione.
Da qui l’utente può scegliere il tipo di intervento che desidera
effettuare anche grazie ad una breve descrizione delle funzioni.
Figura 2. Schermata iniziale .
Manuale_typo.doc
Pagina 7 di 27
3.4. Gestione Lista file/Immagini
Le immagini e i file allegati (nei diversi formati) devono essere
caricati sul server prima di venire linkati dalle varie pagine ed
essere visualizzati nel sito .
È possibile creare delle cartelle specifiche in cui caricare i file.
Questa operazione consente di catalogare i file, ad esempio, per
tipologia o estensione.
Figura 3. Schermata parziale: la Lista File.
Dal menu di sinistra, nella sezione File, è possibile accedere alla
gestione di tutti i file già caricati nel server ed inserirne di nuovi. La
voce [Lista File] si riferisce a tutti i file presenti sul server: immagini
e documenti.
Manuale_typo.doc
Pagina 8 di 27
3.4.1. Come si crea una nuova cartella
Cliccando sull’icona del server si apre un menu a tendina. Scegliere
[Nuovo] che consente di creare una nuova cartella.
Figura 4. Schermata parziale: menu a tendina
A questo punto si visualizza una nuova schermata (v. fig. 5) in cui
l’utente imposta il numero delle cartelle che desidera creare (menu
a tendina) e assegna il nome alla nuova cartella (campo di testo).
Figura 5. Schermata parziale: creare una nuova cartella.
Le altre funzioni del menu a tendina (v. fig. 4) corrispondono a:
- Rinomina. Consente di rinominare il file o le singole
cartelle
- Upload Files. Consente di caricare un nuovo file nel
server, o di inserirlo direttamente in una cartella
- Info. Fornisce le informazioni relative al server, alla
cartella o al singolo file
- Copia e Taglia . Permettono le tradizionali operazioni di
taglia e copia, consentendo di spostare i file da una cartella
all’altra
- Cancella. Elimina definitivamente un elemento.
Manuale_typo.doc
Pagina 9 di 27
3.4.2. Come caricare un file o un’immagine sul server
Una volta creata la cartella in cui raccogliere i file, cliccare sull’icona
della cartella e selezionare dal menu a tendina la voce [Upload Files].
Figura 6. Schermata parziale: menu a tendina - caricare un file .
Figura 7. Schermata parziale: caricare un file.
A questo punto si visualizza una nuova schermata (v. fig. 7) in cui
l’utente imposta il numero dei file che desidera caricare (menu a
tendina), definisce se il nuovo file andrà a sostituirsi ad uno già
esistente e ricerca il file da caricare sfogliando le varie directory sino a
giungere al file da prelevare. Una volta selezionato il file da caricare,
conclude l’operazione attraverso il pulsante [Upload Files].
Può altrimenti annullare l’operazione attraverso il pulsante [Annulla ].
Attenzione: se la voce “Sovrascrivi i file esistenti” non viene
selezionata, il sistema trovando già un file con lo stesso nome lo
caricherà aggiungendo al nome “_1”.
Manuale_typo.doc
Pagina 10 di 27
3.5. Albero dei contenuti
L’albero dei contenuti rappresenta le pagine del sito. La struttura
ripropone la catalogazione tipica dei sistemi operativi, ordinando gli
elementi in livelli di appartenenza.
Cliccando sul modulo Pagina (a sinistra della schermata) viene
visualizzata (a destra della schermata) la sezione del sito sulla quale
l’utente loggato è autorizzato ad intervenire.
Figura 8. Schermata parziale: l'albero dei contenuti.
Manuale_typo.doc
Pagina 11 di 27
Nell’interfaccia del CMS questa schermata è sempre presente sulla
sinistra dello schermo e consente all’utente di visualizzare l’intera
struttura dei contenuti e di individuare i livelli di profondità di ogni
singola pagina/sezione.
Questo sistema consente di reperire in modo semplice ed immediato,
attraverso il sistema classico di esplorazione, la pagina su cui
intervenire.
Il nome assegnato alle pagine (intestazione) corrisponde al naming
della voce di menu/pagina visualizzata nel sito.
Per esplodere ogni singola voce, e visualizzare il contenuto ad essa
associato, basta cliccare sul “+” posizionato accanto ad ogni cartella.
Ogni pagina è formata da due elementi: l’icona , che ne
contraddistingue il tipo, e il nome o titolo.
Entrambi gli elementi sono linkabili e hanno due funzioni diverse.
Manuale_typo.doc
Pagina 12 di 27
Cliccando sul titolo della pagina nella colonna di destra si attivano le
funzioni relative ai contenuti della pagina stessa (v. fig. 9).
Figura 9. Schermata parziale: l'albero dei contenuti.
Manuale_typo.doc
Pagina 13 di 27
Cliccando invece sull’icona gialla (v. fig. 10) si attiva il menù contestuale
che consente in modo rapido di procedere con le operazioni di modifica
della pagina.
Figura 10. Schermata parziale: l'albero dei contenuti.
Manuale_typo.doc
Pagina 14 di 27
3.6. Struttura delle pagine
I contenuti delle pagine vengono divisi in moduli: sinistra, normale,
destra e bordo.
Il modulo normale è destinato ad ospitare i contenuti centrali delle
pagine web del sito.
Figura 11. Struttura di una pagina.
Manuale_typo.doc
Pagina 15 di 27
4. Procedimenti
4.1 Gestione contenuti pagine web interne
4.1.1.
Modifica/inserisci contenuto di testo
Per modificare il contenuto di una pagina ci sono due modi:
1. cliccare sul titolo della pagina della colonna di sinistra;
2. dal menù contest uale selezionare [Modifica].
L’utente seleziona il contenuto che intende modificare cliccando su un
qualsiasi punto dell’anteprima attraverso il pulsante “Modifica in Rich
Text Editor”.
A questo punto viene visualizzata la pagina di lavoro attraverso la
quale è possibile effettuare le modifiche desiderate e procedere al
salvataggio delle stesse.
Figura 12. Struttura della pagina di lavoro.
Manuale_typo.doc
Pagina 16 di 27
La pagina di lavoro contiene:
- campo “Tipo”: è impostato su Normale e non deve essere modificato.
- campo di inserimento del testo. In questo campo viene visualizzato il
testo della pagina. In caso di un nuovo inserimento è il campo in cui
viene inserito il nuovo contenuto.
Nota: è necessario che il testo venga inserito all’interno di questa finestra senza alcun
tipo di formattazione. In caso di inserimento manuale (testo scritto direttamente
all’interno del campo di questo campo) non è necessaria alcuna operazione. Se invece
si copia e incolla un testo già esistente è necessario selezion are il testo e spuntare
l’opzione “rimuovi formattazione” presente nella barra degli strumenti.
Al campo di testo sono associati una serie di pulsanti (toolbar) che
consentono di effettuare determinate operazioni e di attribuire al testo
inserito delle caratteristiche specifiche:
-
definire lo stile grassetto o corsivo del testo;
-
consente di eliminare la formattazione ad un testo
copiato e incollato;
-
strumenti taglia, copia e incolla che
consentono di copiare e incollare parte del testo;
-
inserire elenchi nel testo;
-
impostare l’indentatura;
-
assegnare o eliminare un link;
inserire o modificare un’immagine.
Per applicare queste funzioni bisogna evidenziare il testo su cui
si vuole intervenire e attribuirgli le caratteristiche cliccando sui
relativi pulsanti.
Manuale_typo.doc
Pagina 17 di 27
Una volta effettuate le modifiche, o ultimato il nuovo inserimento, si
può procedere al salvataggio della pagina scegliendo tra le varie
possibilità:
-
salvataggio semplice;
-
salva le modifiche e visualizza la pagina web in
anteprima;
-
salva le modifiche e chiudi direttamente la pagina di
lavoro;
-
Manuale_typo.doc
chiudi la pagina senza salvare l’intervento.
Pagina 18 di 27
4.1.2.
Modifica/inserisci link e allegati
Link al testo
In alcuni casi vengono assegnati agli elementi della pagina (testo e
immagini) degli attributi ulteriori e a volte indispensabili.
Una volta raggiunta la pagina di lavoro è possibile assegnare ad un
testo link interni, link esterni, link a documenti allegati, link ad indirizzi
email (v. fig 13).
Figura 13. Dettaglio delle funzioni
Una volta selezionato il testo a cui si vuole associare un collegamento
ipertestuale, cliccando sul pulsante [assegna/rimuovi link]
,
si apre
una finestra che consente diverse operazioni:
a) Rimuovi link.
Consente di eliminare un collegamento già assegnato. Basta
selezionare il testo/link e dal pulsante [assegna/rimuovi link ]
scegliere la voce [Rimuovi link].
Il collegamento verrà automaticamente eliminato.
Manuale_typo.doc
Pagina 19 di 27
b) Pagina.
Una volta selezionato il testo a cui si vuole assegnare il
collegamento ad un’altra pagina interna del sito (cross link) dal
pulsante [assegna/rimuovi link]
scegliere la voce [Pagina]
(v. fig 14).
Figura 14. Funzione assegna link ad una pagina interna.
Viene visualizzato l’intero albero dei contenuti, da cui l’utente può
scegliere la pagina di destinazione del link e in basso alcune
indicazioni fondamentali da compilare prima di assegnare la
pagina.
Il campo del Title è molto importante (soprattutto in base ai requisiti di
accessibilità di un sito web) e assegna ad un link un testo alternativo,
che ne commenta la destinazione.
Dopo aver compilato questi campi l’utente può procedere
all’assegnazione della pagina di destinazione.
Manuale_typo.doc
Pagina 20 di 27
La pagina scelta verrà evidenziata come appare nella figura 15.
Figura 15. Dettaglio funzione assegna link ad una pagina interna.
Manuale_typo.doc
Pagina 21 di 27
c) File.
Consente di assegnare ad un testo un link ad un file allegato.
Una volta selezionato il testo a cui far corrispondere l’oggetto, dal
pulsante [assegna/rimuovi link]
scegliere la voce [File] (v.
fig 16).
Figura 16. Dettaglio funzione assegna link ad un file.
Nota: da qui è possibile inserire li file prelevandoli dal server. È quindi necessario che il
file sia stato precedentemente caricato.
Manuale_typo.doc
Pagina 22 di 27
d) Url esterno.
Oltre che alle stesse pagine del sito un link può rivolgersi anche a
pagine esterne (url esterne) di altri siti.
In questo caso, dopo aver selezionato il testo a cui si vuole
attribuire il collegamento, dal pulsante [assegna/rimuovi link ]
scegliere la voce [Url esterno ] (v. fig. 17).
Figura 17. Dettaglio funzione assegna link ad url esterna.
Qui l’utente deve compilare i campi inserendo l’indirizzo della
pagina web a cui il link deve puntare (url), impostando target,
dimensioni finestra e title.
Il salvataggio dell’intervento è automatico attraverso il pulsante
[Imposta link ].
Manuale_typo.doc
Pagina 23 di 27
e) Email.
Si può decidere di collegare un testo direttamente ad un indirizzo
email. Dopo aver selezionato il testo a cui si vuole attribuire il
collegamento, dal pulsante [assegna/rimuovi link]
voce [Email] (v. fig. 18).
scegliere la
Figura 18. Dettaglio funzione assegna link ad email.
L’utente deve compilare i campi di testo con i dati richiesti: indirizzo di
posta elettronica a cui collegare il testo e descrizio ne alternativa del
collegamento (title).
Il salvataggio dell’intervento è automatico attraverso il pulsante
[Imposta link].
Manuale_typo.doc
Pagina 24 di 27
4.1.3. Title, didascalie e testi alternativi
Per rispettare i requisiti di base di usabilità e di accessibilità del
prodotto è opportuno compilare i campi relativi ai title, alle didascalie e
ai testi alternativi ogni qual volta essi si presentino.
I title riguardano soprattutto i link
È il testo alternativo che viene visualizzato sul sito quando si passa con il mouse
su un link s enza cliccare.
Esempio:
-
link ad un sito: link esterno: visita il sito …
link ad un immagine: il logo di …
link ad un file: leggi il documento …
link ad una pagina: vai alla pagina …
email: scrivi a….
Didascalie e testi alternativi si riferiscono soprattutto alle immagini.
-
Didascalia. Compilando questo campo si visualizza nella
pagina la didascalia relativa all’immagine.
Alt/title options. In questo campo va inserito un testo
alternativo che viene visualizzato nel caso in cui il browser
non riesca a mostrare l’immagine
Alt – and title – tag options. Qui va inserito un testo che
commenti l’immagine e che, in caso di una navigazione
alternativa (attraverso strumenti di lettura vocale delle
pagine web – screen reader) renda possibile informare
l’utente sul contenuto dell’immagine. Questo è uno
strumento utilissimo per gli utenti disabili e indispensabile
ai fini di mantenere il requisito di accessibilità del prodotto.
Manuale_typo.doc
Pagina 25 di 27
5. Inizia ciclo di approvazione
Una volta effettuati cambiamenti, modifiche o nuovi inserimenti
l’operatore deve iniziare il ciclo di approvazione dei contenuti,
inviandone notifica al caporedattore.
Per fare questo, dopo aver effettuato tutti i
salvataggi, può selezionare la voce [Versioni]
presente sul lato sinistro della schermata.
A questo punto nel corpo della pagina comparirà una
schermata che elenca tutti gli ultimi interventi
effettuati.
Figura 19. Dettaglio della schermata da cui scegliere l’intervento da far approvare
L’operatore può:
a) inviare una notifica unica per tutti gli interventi effettuati
cliccando sul pulsante [Send all to review]
b) Inviare un commento/notifica singolarmente per ogni intervento,
cliccando sulle freccette che compaiono sotto la voce [Controls].
Utilizzando questa funzione è importante che l’operatore indichi
nel commento l’id delle pagine che ha modificato/creato, in
modo da dare una indicazione precisa al coordinatore in fase di
Review.
Dopo aver fatto questa operazione l’approvatore riceverà una email
con l’indicazione degli interventi effettuati.
Manuale_typo.doc
Pagina 26 di 27