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
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
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 nel sistema di gestione dei contenuti delle pagine.
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).
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
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.
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 .
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.
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.
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”.
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.
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.
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.
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.
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.
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ù contestuale 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.
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.
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;
- chiudi la pagina senza salvare l’intervento.
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.
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.
La pagina scelta verrà evidenziata come appare nella figura 15.
Figura 15. Dettaglio funzione assegna link ad una pagina interna.
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.
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].
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] scegliere la voce [Email] (v. fig. 18).
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].
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.
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
