Sei sulla pagina 1di 102

 

1

Autore: Alessandro Tuveri, email at@uniud.it

Il presente documento è di proprietà dell'autore; deriva da un manuale più articolato allestito a


seguito di prestazioni occasionali per la progettazione di siti web esterni all'Università di Udine.

Non è consentita la duplicazione, anche a titolo parziale, delle immagini e testo contenute, salvo
esplicita autorizzazione scritta fornita dall'Autore.

Copyright 2007-2016, AINF, Servizi Informatici e Multimediali – Università degli Studi di Udine

  2

Sommario

Sommario ...................................................... 3  Creazione di una  pagina.............................. 27 
Introduzione al CMS TYPO3 ........................... 5  Come creare una nuova pagina ............... 27 
Prima di proseguire… .................................... 7  Le proprietà di pagina .............................. 30 
Login e logout ................................................ 8  Salvare la pagina ...................................... 31 
Requisiti ..................................................... 8  Come scegliere il layout di pagina ........... 32 
Primo collegamento .................................. 8  Gestione dei contenuti tipici ....................... 34 
Inserimento delle credenziali .................... 9  Layout di pagina ....................................... 34 
Problemi in fase di login ............................ 9  I nomi delle colonne di  backend ............. 34 
Come chiudere la sessione ( logout) ....... 10  Distribuzione dei contenuti nelle colonne di 
Responsabilità nella custodia della  backend ................................................... 35 
password ................................................. 10  Grid system .............................................. 35 
Consigli utili ............................................. 10  Tipi di contenuto ...................................... 36 
Le basi di TYPO3 .......................................... 12  Inserimento di un contenuto di tipo Testo 
L’interfaccia di Backend ........................... 12  & Immagini .............................................. 37 

Come muoversi tra i menu ...................... 13  Come salvare il  contenuto ...................... 43 

Come accedere a un contenuto di una  Gestione  di altri contenuti tipici ............. 44 
pagina ...................................................... 14  Uso dell’editor RTE ...................................... 45 
Suggerimenti ........................................... 15  Cosa è l’editor RTE ................................... 45 
Il menu contestuale ................................. 16  Gli stili ...................................................... 45 
Icone dei menu ........................................ 17  Menu a tendina ....................................... 46 
Altre icone ............................................... 18  Le icone e loro significato ........................ 47 
Tipi di pagina ........................................... 18  Come generare un collegamento (link) ... 49 
Temporizzazione di pagine e contenuti .. 20  Pulizia del testo incollato da Word .......... 50 
Associazione di pagine o singoli contenuti  Gestione di una tabella ............................ 51 
agli utenti di frontend ............................. 20  Inserimento di elenchi puntati ................ 52 
Numero identificativo della pagina (Pid) . 21  Consigli per l’uso ...................................... 53 
Messaggi di errore di TYPO3 ................... 21  Contenuti di Boostrap .................................. 55 
La comunicazione con il server................ 22  Creazione di un nuovo contenuto ........... 55 
Primo accesso al backend ........................... 24  Testo & Icone ........................................... 56 
Modifica della password di accesso ........ 24  Carousel (carosello) ................................. 58 
Scadenza della sessione .......................... 25  Accordion ................................................. 60 

  3

Panel ........................................................ 60  Come spostare records da una pagina ad 
List group ................................................. 61  un’altra .................................................... 84 

External media ......................................... 62  Come muovere o copiare gli elementi nella 
Clipboard ................................................. 89 
Come riordinare  le pagine e i contenuti ..... 63 
Azioni sugli elementi della Clipboard ...... 90 
Icona e id di contenuto ............................ 63 
Le funzioni per cercare nel sito .................... 91 
Funzionalità drag and drop ..................... 64 
Cercare una stringa nella pagina e 
Come spostare una pagina nell’albero .... 64  sottopagine .............................................. 91 
Spostamento o copia  di una pagina  Come cercare una stringa nell’albero delle 
tramite il menu contestuale .................... 65  pagine (filtro) ........................................... 92 
Cancellazione di una pagina .................... 65  Cercare una pagina con il  pid (filtro) ...... 93 
Spostamento di contenuti tra le colonne  Cercare stringhe in tutto il sito ................ 93 
con drag and drop ................................... 65 
Gestione delle aree riservate e accesso degli 
Spostamento di contenuti tra le colonne  utenti ........................................................... 95 
con wizard ............................................... 67 
La cartella Utenti e Gruppi ....................... 95 
Sparizione dei contenuti appena spostati 68 
Protezione di una pagina o di un contenuto
Muovere o copiare un contenuto da una   ................................................................. 97 
pagina  all’altra ........................................ 69 
Gestione di gruppi e utenti di frontend ... 98 
Upload di documenti e filmati ..................... 71 
Pagina di  frontend  per  effettuare  il login
Upload di documenti ............................... 73   ................................................................. 99 
La cartella user upload ............................ 74  Glossario .................................................... 100 
Documenti e relazioni con i contenuti .... 74   
Cancellazione di documenti relazionati .. 75 
Metadati associati alle immagini (FAL) .... 76 
Come generare gallerie partendo da 
documenti  PDF ....................................... 77 
Image auto resizer ................................... 77 
Ridimensionamento in massa di immagini
 ................................................................. 78 
Gestione dei filmati ................................. 79 
Consigli per il trattamento delle immagini
 ................................................................. 80 
Gestione avanzata dei contenuti ................. 81 
Definizione di  record .............................. 81 
Memorizzazione dei records ................... 82 
Visualizzazione Web > Lista ..................... 83 
Il  blocco appunti (clipboard) ................... 83 

  4

Introduzione al CMS TYPO3

TYPO3 è un CMS (Content Management System) un programma per la gestione i contenuti


che permette ad una persona non esperta di modificare un sito; è un prodotto open-
source potente e professionale, diffuso in tutto il mondo e tradotto in oltre 90 lingue.

TYPO3 CMS oltre alle funzionalità di base offre circa 6.000 programmi (estensioni o
plugin) per accrescere le potenzialità del sito. L’aggiunta di una nuova estensione, come
ad es. un carrello della spesa, permetterà l’attivazione di un sistema di un negozio
virtuale (ecommerce).

Per l’utente finale TYPO3 CMS è semplice e intuitivo nell’uso. Viceversa la gestione del
sistema richiede l’investimento di molto tempo da parte del professionista;
l’installazione e la configurazione di alcune estensioni o plugin può richiedere molte ore
di lavoro.

Questo manuale fornisce le istruzioni ed esempi per le versione 6.2 LTS di TYPO3 CMS.
Il supporto per questa versione è garantito fino al 2018; è la distribuzione ufficiale
rilasciata dal TEAM di TYPO3 CMS, dotata di TWITTER BOOTSTRAP 3.

La distribuzione permette la pubblicazione di siti basati sul framework di Twitter con


l’output di pagine con codice HTML5, CSS3.

Il sito pubblicato sarà responsivo; i contenuti si adatteranno alla periferica utilizzata dal
visitatore e, previa adeguata modifica della configurazione, sarà visibile da cellulare,
tablet, personal computer.

Questo manuale si applica anche per i siti migrati da precedenti versioni (es. v. 4.5.x) che
con tutta probabilità non sono responsivi salvo modifica radicale dei modelli e codice
HTML. In tale caso il redattore dovrà ignorare le parti riguardanti la responsività.

Il redattore potrà riempire a piacimento l’area dei contenuti suddividendola in varie


colonne, arrivando a creare ogni singola pagina, diversa dalle altre.

TYPO3 CMS tiene i contenuti separati completamente dalla grafica. Questo significa che
se nel tempo va modificato l'aspetto del sito tutte le pagine precedenti rimarranno
inalterate. Il sito sarà dotato di una nuova grafica senza perdere i contenuti già inseriti
(testi, immagini, news, ecc.).

5

TYPO3 CMS è molto stabile, soggetto a continue modifiche, revisioni ed aggiornamenti,
permettendo agli utenti di beneficiare di nuove opportunità tecniche e lavorare in piena
sicurezza.

TYPO3 CMS è un ottimo investimento per lo sviluppo futuro del sito, per la
professionalità del prodotto, sicurezza e praticità d'uso.

La TYPO3 ASSOCIATION conta oltre 2.500 iscritti sparsi nel mondo; alcuni sviluppatori
particolarmente capaci già impiegati presso le migliori Agenzie Web, appartengono a un
gruppo ristretto e selezionato di programmatori che si occupano del core.

Buon lavoro!

Demo

http://demo.typo3.org/
sito dimostrativo della distribuzione ufficiale Introduction Package.

Nota: l’uso dei dimostrativo è aperto al pubblico e pertanto le pagine possono essere
modificate da chiunque; in genere dopo 1 ora di lavoro il sito viene azzerato e rigenerato
com’era in origine.

Approfondimenti

http://typo3.com
informazioni su prodotto in termini commerciali

http://www.t3blog.com
lavori svolti con il CMS. Grandi marche come Brita, Lindt, Epson, FAO, Lufthansa, Ford,
ecc. hanno scelto questo prodotto e qui è possibile vedere i siti svolti.

http://www.typo3.org
Sito riservato agli sviluppatori e installatori

http://www.html.it/articoli/bootstrap-il-framework-di-twitter-1/
spiega cos’e’ Twitter Boostrap e le potenzialità

  6

Prima di proseguire…

Lo scopo di questo manuale è di fornire informazioni ed esempi per l’uso del CMS
TYPO3.

Il manuale non può affrontare altri aspetti del web come ad esempio il trattamento delle
immagini, l’estetica del web, il marketing e così via. Per quanto non specificato il lettore
dovrà ricorrere ad altri manuali, aiuti in rete ed eventuali corsi di formazione extra.

Le conoscenze che il comune redattore dovrebbe avere sono le seguenti:

 conoscere la comune terminologia informatica e di internet (pixel, finestra, pop-


up, javascript, cookies);
 conoscere il programma di navigazione (browser) impiegato;
 aver già lavorato almeno con un editor di testi (ad es. Microsoft Word);
 avere le basi per il trattamento minimo di una immagine (formato, altezza,
larghezza, compressione).

Per aiutare il lettore al termine della guida è stato pubblicato un glossario.

MOLTO IMPORTANTE! questo manuale è organizzato in capitoli ed


ognuno è propedeutico al successivo. Si consiglia di non saltare alcuni
capitoli o argomenti, pena grosse difficoltà nell’apprendimento.

7

Capitolo 1

Login e logout

TYPO3 richiede l’uso di un programma di navigazione (browser)


come Internet Explorer, Mozilla Firefox, Chrome, Opera. Il redattore
si collegherà al server che ospita il sito. Per creare contenuti e pagine
non dovrà usare altri prodotti o installare software nel suo PC.

TYPO3 CMS è sottoposto a continui aggiornamenti per migliorare le


prestazioni e la compatibilità con i programmi di navigazione
(browser, navigatore).

Requisiti
Per procedere il redattore dece configurare il PC Desktop dal quale si
collega per consentire l’uso di javascript, cookies e della l’apertura
di finestre in pop-up, evitando assolutamente di collegarsi da
postazioni che possono essere violate (es. Internet Point).

Primo collegamento
Lanciare il navigatore e collegarsi al sito copiando o
trascrivendo l’indirizzo assegnato, poi premere il tasto
<invio>. Ad es. se il sito si chiama www.tuodominio.it
l'indirizzo al quale collegarsi sarà:
http://www.tuodominio.it/typo3/

TYPO3 CMS visualizza la finestra di login (vedi immagine a


destra).
L’interfaccia di login può presentarsi anche con logo,
colori e disposizioni differenti, qualora sia stata
personalizzata.

  8

Inserimento delle credenziali
Il modulo va riempito con le credenziali ricevute (username e password), da inserire nelle
rispettive caselle.

Se la videata di accesso un menu a tendina, significa che l’utente ha la possibilità di


scegliere la modalità di lavoro:

backend – è l’ambiente classico descritto in questo manuale

frontend – dopo il login il visitatore sarà rediretto ad una pagina del sito dove potrà
modificare i contenuti cliccando gli strumenti a disposizione (modalità wysiwyg).

La guida non illustra l’estensione per la gestione diretta dei contenuti da frontend.

Per continuare premere il pulsante Login.

Problemi in fase di login


Queste sono le cause più comuni:

 Le credenziali non sono state digitate rispettando le maiuscole e le minuscole; i


dati vanno inseriti così come indicati
 Il tasto MAIUSC (che attiva il maiuscolo nel PC) è rimasto premuto
 I cookies sono disabilitati; modificare le preferenze del navigatore
 L’uso di javascript non è consentito; modificare le preferenze del navigatore ed
attivarlo
 Forse le credenziali comunicate non sono corrette; rivolgersi all’amministratore
 il codice è stato disabilitato (ad esempio perché scaduto); rivolgersi
all’amministratore
 L’accesso può essere temporaneamente impedito per operazioni di
manutenzione ordinaria/straordinaria.

Login lento - In alcuni momenti il login può richiedere diverso tempo di attesa; si tratta
di rallentamenti la cui causa non è sempre facile da individuale. In gran parte questi
problemi dipendono al traffico in rete, dalla linea di connessione e dai tempi di risposta
del server. Controllare la barra di avanzamento del navigatore (rotellina o icona) e se
appare bloccata o incantata, premere ctrl e F5 (per Inernet Explorer) oppure ctrl e R
(per Mozilla) per forzare il ricaricamento della pagina e proseguire.

! Se i problemi si presentano di frequente non esitare e contattare l’amministratore


di sistema per ottenere assistenza.

  9

Come chiudere la sessione ( logout)
Fare logout è importante, per evitare di lasciare il codice in balìa di malintenzionati che
possono alterare i contenuti se non deturpare il sito.

Nella parte alta della videata, a destra, troviamo una pulsantiera, descritta più avanti.

Per chiudere la sessone cliccare sul pulsante contenente il proprio username (nella
videata sotto è service) e dal menu a tendina che si apre premere il pulsante Logout:

Responsabilità nella custodia della password


Ogni redattore è responsabile della custodia della password che non va trascritta su
fogli accessibili da tutti, resa nota a terze persone o pubblicata. L'uso del codice da parte
di terze persone non autorizzate permette la pubblicazione o addirittura rimozione e
conseguente perdita irreversibile di contenuti, soprattutto se non viene effettuato ogni
tanto un backup.

Il redattore deve custodire la password ed è pienamente responsabile dei contenuti


inseriti. In particolare non deve caricare documenti o copiare testi e immagini da altri
siti violando così’ il diritto d'autore.

Per l'acquisto di immagini collegarsi a: http://www.fotolia.it a pagamento o servizi


analoghi anche gratuiti, rintracciabili lanciando una ricerca in Google.

Consigli utili
La sicurezza è importante e l’adozione di semplici misure evita di esporre il sito ad
intrusioni, malintenzionati e terzi che possono pubblicare informazioni indesiderate:

 Evitare di collegarsi da luoghi pubblici o Internet point


 Non trascrivere le credenziali e appenderle al PC o lasciarle in vista nei pressi del
computer

  10

 Anche se suggerito dal navigatore, evitare di memorizzare le password nel PC
 Mantenere il sistema operativo e il programma antivirus sempre aggiornati.
 Installare un firewall nel PC ed aggiornarlo periodicamente
 Terminata la sessione, fare sempre logout .

  11

Capitolo 3

Le basi di TYPO3

Gli esempi pubblicati in questa guida si riferiscono alla versione In questo capitolo
TWITTER BOOTSTRAP. L’utente può collegarsi al sito dimostrativo:
L’interfaccia di Backend
http://bootstrap.typo3cms.demo.typo3.org/typo3
Come muoversi tra i menu
e fare login come utente admin con la password indicata nella
pagina di accesso. Potrà così provare il prodotto senza modificare il Come accedere a un
sito di produzione. contenuto di pagina

L’ambiente di test differisce da quello di produzione, voci e menu si Suggerimenti


presentano con una diversa disposizione nella pagina.
Il menu contestuale

Icone dei menu


L’interfaccia di Backend
Altre icone
Una volta ottenuto l’accesso a TYPO3 CMS il redattore si trova in un
ambiente chiamato di BACKEND. Il termine ricorrerà spesso in Temporizzazione di pagine e
questa guida ed indica tutto ciò che il redattore vede dopo aver contenuti
fatto login. L’accesso al BACKEND è riservato esclusivamente agli
Associazione di pagine o
amministratori del CMS e ai redattori autorizzati. singoli contenuti agli utenti di
frontend
Effettuato il login il BACKEND si presenta in questo modo:
Numero identificativo di
pagina

Messaggi di errore di TYPO3

La comunicazione con
il server

Se la videata sopra non si presenta come sopra (suddivisa in tre frame), l’utente deve
cliccare nella zona indentificata con la lettera A il pulsante Web e poi la voce Pagina e
attendere l’aggiornamento delle altre due finestre.

  12

Differente è invece il cosiddetto ambiente di FRONTEND, che indica lo spazio destinato
ai visitatori che hanno fatto o meno login con diverse modalità.

Ogni redattore, a seconda del ruolo ricoperto e dei privilegi assegnati, potrebbe vedere
più o meno voci nei menu in A di cui alla immagine precedente.

La videata del navigatore è divisa in tre diverse sezioni (frame):

A MENU – questo frame elenca diversi menu, suddivisi in sezioni, tramite i quali il
redattore accede alle funzionalità desiderate. Le sezioni sono contraibili/espandibili
cliccando sulla freccia posta a destra oppure sul titolo di menu.

B ALBERO DELLE PAGINE – questo frame contiene tutte le pagine del sito, ognuna
evidenziata da una icona, che può differire per contraddistinguere il tipo di pagina. La
struttura che si vede è gerarchica. I menu che l’utente vede nel frontend sono generati
da TYPO3 CMS seguendo 1:1 la medesima disposizione gerarchica.

C AREA PER LA GESTIONE DEI CONTENUTI – questo frame contiene tutti i contenuti:
pagine, testi, immagini e/o records, ad es. news, indirizzi, ecc. relazionati alla pagina
scelta dal redattore in B .

Per convenzione da questo punto in poi della guida non sarà più utilizzato il termine
frame o sezione, bensì in luogo saranno utilizzate le lettere A B C .

In alcune condizioni, B e C potrebbero non essere distinte; in luogo viene


presentata una sola sezione che per semplicità chiameremo sempre B .

Come muoversi tra i menu


L’ambiente di backend è omogeneo: le procedure, i menu, le voci e le icone saranno
quasi sempre uguali. Il redattore, una volta imparato l’uso e significato di alcune icone
potrà gestire intuitivamente nuovi tipi di contenuto, senza imparare nulla di nuovo.
In A B C si possono notare dei blocchi che possono apparire contratti o espansi.
L’icona per comprimere la sottosezione WEB in A :

  13

è costituita da una freccia grigia rivolta verso il basso (vedi l’immagine sopra). Se la
sezione è chiusa la freccia nera apparirà rivolta a sinistra, altrimenti verso il basso.
Cliccando la freccia le due modalità di visualizzazione saranno scambiate.

Si noti anche che la voce attualmente selezionata è Pagina, evidenziata dallo sfondo più
chiaro e grassetto.

Come accedere a un contenuto di una pagina


L’uso del prodotto è semplice e intuitivo. Il redattore sceglie l’azione da effettuare
cliccando una voce in A poi prosegue cliccando una voce o elemento in B ed infine
ottiene gli elementi da modificare in C , che appariranno disposti su una o più
colonne:

  14

Far riferimento all’immagine sopra. Per esempio, volendo modificare i contenuti della
pagina selezinata in (2) del sito si procede come segue:

 da A sotto sezione Web cliccare la voce Pagina (1)


 in B dopo qualche istante di attesa apparirà l’albero delle pagine; cliccando il
nome della pagina (non l’icona a forma di pagina!) che desidera modificare (2)
 in C si vedranno i contenuti disposti in varie colonne (3). Come vedremo più
avanti in questa sezione troviamo degli strumenti a forma di icona per modificare
i contenuti o crearne di nuovi. Il redattore potrà trascinare la barra di
scorrimento verticale per accedere ai contenuti, che saranno disposti secondo il
modello scelto e potranno apparire in differenti colonne affiancate. La
disposizione dei contenti riflette al 100% la disposizione degli stessi nella
pagina pubblicata.

Può capitare che l’albero (2) sia chiuso e vada espanso cliccando la freccia nera situata
a sinistra dell’icona a forma di mondo. L’operazione andrà ripetuta per le sottopagine di
sezioni che a loro volta appariranno e ora si presentano ancora chiuse.

Desiderando ad esempio gestire le news, da A sotto sezione Web clicchiamo la voce


News: TYPO3 ci guida nelle scelte e in B troveremo altre finestre con opzioni o voci da
cliccare. La gestione delle news è demandata ad una guida separata.

Nota bene cliccando in B l’icona che distingue la pagina o il suo nome


si ottengono due effetti diversi, come vedremo tra poco.

Suggerimenti
TYPO3 CMS è stato pensato per fornire aiuti al redattore in qualsiasi momento. Per
ottenere informazioni sulla azione associata ad una determinata icona è sufficiente
passare con il mouse sopra la stessa per ottenere un suggerimento.

Nella immagine sopra (dettaglio della parte inziale di B ) passando il mouse sopra
l’icona bordata in rosso apparirà il suggerimento che indica l’azione associata, che nel

  15

caso specifico forza un aggiornamento dell’albero delle pagine. (nota: nella versione
7.6.11 in lingua italiana a causa di una imprecisione, il suggerimento non appare),

Il menu contestuale
Lavorando con l’albero delle pagine in B c’è una differenza sostanziale tra il cliccare
nome della pagina o cliccare l’icona che contraddistingue graficamente il tipo di
pagina. Nella figura che segue vediamo come attivare il menu contestuale, cliccando
con il tasto sinistro del mouse l’icona posta a sinistra del nome di pagina SOHO TEST
(1);

Dopo qualche istante appare in (2) un menu contestuale (o di contesto, volante) che
nell’esempio sopra presenta alcune azioni applicabili alla pagina SOHO Test.

Il menu presenta alcune voci all’interno di una piccola finestra. Tramite il menu
contestuale il redattore può fare delle scelte, selezionando la voce desiderata.

In ultima posizione di appare una voce che a sua volta apre un secondo menu a tendina
(Azioni Pagina) con varie opzioni.

Nota le voci di menu non sono uguali per i tutti i redattori. A seconda
della configurazione e dei privilegi assegnati i menu del CMS possono
apparire differenti ed essere dotati di più o meno voci.

  16

Icone dei menu
A partire da questa pagina definiamo come elemento di contenuto o elemento un
qualsiasi contenuto che il redattore edita, quindi: testo, testo con immagini, sole
immagini, contenuto multimediale, una news, un indirizzo di un utente, quindi anche
singoli records.

TYPO3 CMS permette al redattore di lavorare con un set di icone sempre identiche e
quindi vale la pena di imparare il loro significato per muoversi con facilità in nuovi
contesti.

Le icone per gestire un contenuto qualsiasi sono individuabili in C in alto a sinistra,


una volta aperto il contenuto, e hanno questo aspetto:

A differenza dalla precedente versione di TYPO3 v. 6.2.x non ci sono più icone dispostge
in linea e per le aziioni di salvataggio del contenuto va cliccato il menu a tendina con
voce:

Salva documento

Poco sotto si aprirà un menu a tendina con alcune voci (intuitive) dotato di alcune icone.

L’icona a forma di bidone, a destra, consente di cancellare il contenuto, mentre l’altra


icona più a destra, detta ripristina ancora, permette di recuperare il contenuto
precedente, annullando/ripristinando le modifiche effettuate.

Descrizione delle azioni

Salva documento e visualizza pagina – salva le modifiche e apre la pagina in una


videata separata, così da permettere il controllo redazionale;

Salva documento e creane uno nuovo – salva le modifiche e presenta nuovamente la


maschera di caricamento del contenuto appena editato, per creare un nuovo record. Di
norma il contenuto viene creato dopo quello salvato.

Salva documento e chiudi documento – salva le modifiche e chiude il contenuto; al


termine ci si trova di nuovo in C dove si vedranno tutti i contenuti disposti per
colonne

  17

Altre icone
Le videate del CMS TYPO3 dispongono di icone standard, ognuna delle quali è
visualizzata nel contesto in cui si trova ad operare il redattore. Pertanto, imparato il
significato di queste icone, sarà facile gestire qualsiasi azione o contenuto di TYPO3,
proprio perché le icone presentate sono le medesime e l’ambiente redazionale risulta
così uniformato.

matita – modifica l’elemento di contenuto (pagina, contenuto, carosello, ecc.)

nuovo – crea un nuovo elemento di contenuto

blocca – cliccando il pusante il contenuto sarà disabilitato, ovvero nascosto alla


pubblicazione. Il contenuto nascosto può essere modificato dal redattore ma non sarà
visibile nel frontend, finchè non sarà sbloccato manualmente.

sblocca - se i contenuto è disabilitato, vedi punto precedente, il pulsante apparirà


con la forma indicata e il tutto il contenuto apparirà in grigio stinto. Cliccando questo
pulsante il contenuto apparirà nuovamente in pubblicazione e il pulsante sarà sostituito
dal precedente.

bidone, elimina il contenuto, previa conferma in una finestra di pop-up

aiuto – apre una finestra contestuale all’elemento, che descrive l’uso e note.

Tipi di pagina
Scorrendo l’albero delle pagine in B si notano differenti icone che distinguono
visivamente il tipo di pagina:

  18

1 L’icona di TYPO3 qui raffigurata indica il nome del sito. Il redattore potrebbe gestire
più siti, differenti, tramite un unico accesso al backend.  

2 pagina principale (home) del sito; si trova all’interno di 1

3 a questo livello appaiono le pagine situate sotto la pagina principale. TYPO3


costruirà i menu previsti e pubblicherà i nomi di queste pagine automaticamente. La
pagina Resources non è una pagina standard, ma una sorta di collegamento come quelli
utilizzati in Windows, infatti dispone di una icona con una freccina. E’ inutile creare dei
contenuti in questa pagina; il visitatore vedrà la voce Resources tra i menu, cliccandola
sarà reindirizzato ad una altra pagina dell’albero.

4 cartella di sistema (sysfolder), in pratica è un contenitore e non una vera pagina


destinata alla pubblicazione. E’ usata per ospitare record di vario genere, ad esempio i
dati degli utenti di frontend, prodotti, articoli, indirizzi.

5 pagina ad accesso riservato – l’accesso alla pagina è consentito solo ad alcuni utenti
o gruppi di frontend. I visitatore per vederla tra i menu e accedere ai contenuti deve
disporre delle credenziali e autenticarsi da frontend.

6 cartella di sistema per plugin – alcune cartelle di sistema presentano una icona
sovrapposta, per identificare l’uso riservato a un programma di TYPO3, tipicamente per
memorizzare informazioni e records. Se è destinata ad ospitare le news, newsletter o
altri oggetti potrebbe mostrare un diverso colore e aspetto:

7 pagina standard disabilitata – questa pagina non sarà visibile nel frontend e non
apparirà tra i menu finché non sarà abilitata. TYPO3 permette così al redattore di
modificare la pagina e sbloccarla per pubblicarla in un secondo tempo

8 pagina standard – è una normale pagina attiva e pubblicata, dotata di contenuti


visibili nel sito

9 pagina standard nascosta ai menu – si presenta con colore grigio attenuato. La


pagina potrà essere vista dal visitatore frontend solo se è collegata da un’altra pagina o
se chi si collega ne conosce l’indirizzo esatto. La pagina non apparirà tra le voci di menu
e mappe del sito.

10 pagina standard temporizzata – la visibilità o meno di questa pagina nel frontend e


tra nelle voci dei menu di navigazione dipenderà da una data di inizio e di fine
pubblicazione. Nota questa pagina si trova nel medesimo livello della pagina 3

11 pagina standard – normale pagina che si trova al livello della pagina 3.

  19

Nota alcune icone non sono state qui descritte. TYPO3 CMS infatti usa
sovrapporre alcune icone come l’orologio, l’omino e altro alle normali icone
per indicare lo status della pagina.

Temporizzazione di pagine e contenuti


TYPO3 permette di assegnare un ciclo di vita alle pagine, ai contenuti e anche ai
singoli record (come ad esempio una news o un utente di frontend). Gli elementi
temporizzati mostrano una icona con un piccolo orologio sovrapposto:

Ogni elemento, record o contenuto, può avere una durata propria di vita.

Ad esempio il redattore può creare una nuova pagina nell’albero e fissarne la durata, ad
esempio decidere che una pagina sarà visibile dal 02-02-2014 (data di inizio) fino al 31-
03-2014 (data di fine pubblicazione).

Trascorsa la data di fine pubblicazione oppure se la data odierna è collocata nel passato,
rispetto la data di inizio, la pagina non sarà visibile (si dice sarà nascosta) al frontend.

Inoltre, rispetto ad altri CMS, qualsiasi singolo elemento appartenente ad una pagina,
come uno specifico contenuto di testo, è temporizzabile. Pertanto il redattore può
creare una pagina non soggetta a scadenza, e inserire un testo che avrà una certa
durata in una colonna, seguito da un secondo testo sempre visibile, da un terzo testo
con una differente durata e così via senza limite.

Si dice allora che la pagina cambia automaticamente aspetto nel tempo.

Associazione di pagine o singoli contenuti agli utenti di frontend


Come vedremo più avanti, ogni pagina o addirittura un singolo contenuto può essere
associato ad uno o più gruppi di utenti di frontend, permettendo la visualizzazione degli
oggetti solo a chi si è autenticato.

Questa tecnica, se combinata con la temporizzazione appena descritta, permette di


generare pagine sempre diverse, che variano in funzione delle necessità di redazione.

  20

Numero identificativo della pagina (Pid)
Ogni pagina è identificata univocamente da TYPO3 CMS, tramite l’assegnazione di un
normale numero progressivo chiamato Pid (Page Id) oppure Id di pagina.

Il redattore per ottenere assistenza tecnica deve comunicare il Pid; l’amministratore


solo così potrà capire con estrema facilità quale è la pagina problematica.

Per conoscere il Pid ci sono diversi modi:

 dal navigatore; osservare la barra degli indirizzi (URL); se si vede qualcosa del
tipo: http://www.sito.it/index.php?id=32 significa che la pagina ha per Pid il
numero 32
 se l’URL della pagina appare con diverso formato, ad esempio:
http://www.sito.it/contatti/ non si potrà conoscere immediatamente il numero di
pagina, anche se nella maggior parte dei casi l’indirizzo identifica la posizione
della pagina nell’albero delle pagine in B , ovvero che la pagina contatti
probabilmente è una sottopagina della pagina principale.
 Il modo più semplice e sicuro per conoscere il Pid di pagina è quello di passare
il mouse sopra l’icona della pagina in B ; come si vede chiaramente
nell’immagine seguente TYPO3 CMS visualizza il Pid come un suggerimento:

Nell’immagine sopra , passando con il mouse sopra l’icona della pagina che ha
per nome Community si vedrà apparire il pid che è il numero 11. Il fumetto è
sovrapposto al nome parzialmente visibile. 

Messaggi di errore di TYPO3


In alcuni casi TYPO3 può rifiutarsi di visualizzare una pagina ed in luogo produce un
messaggio di errore su sfondo rosa, come il seguente:

  21

In questo caso il redattore deve copiare il messaggio di errore o creare una immagine
della videta (screenshot) da inviare via email come testo o immagine allegata per
ottenere assistenza, indicando al servizio di assistenza anche il pid della pagina.

La comunicazione con il server


Se il redattore sceglie di modificare una pagina, cliccando una voce di menu, il computer
invia una richiesta al server, e resta in attesa di una risposta. Ottenuta la risposta il PC
genera a video una nuova pagina di backend che presenta alcune opzioni per proseguire
(es. menu, elenco di records, ecc.)

Tramite i menu disponibili il redattore modifica ad esempio un contenuto e poi preme il


pulsante per salvarlo, inviando i dati modificati al server. TYPO3 memorizza i dati nella
base di dati (database) del server.

In pratica si verifica una trasmissione continua di dati bidirezinonale (nei due sensi), da
e verso il server. Siccome TYPO3 è un programma che viene lanciato sul server (ovvero:
gira lato server) e tra i client e il server c’è di mezzo una rete di trasmissione, può capitare
in alcuni momenti di percepire che la trasmissione sia più o meno lenta. Alcuni
rallentamenti di solito sono temporanei e possono dipendere dall’uso eccessivo di
risorse nel server.

La trasmissione e le elaborazioni possono richiedere da alcuni istanti a svariati minuti.


Se il redattore lancia un backup manuale, tra le operazioni di generazione del file (lato
server), la compressione e lo scaricamento (download) possono trascorrere anche 2-3
minuti, dipende dallo spazio occupato dal sito.

Il redattore deve mettere in preventivo dei momenti di attesa, che variano nel corso
della giornata. Le cause di questi ritardi nella trasmissione non sono facili da
identificare e possono dipendere da molti fattori: l’intasamento della rete dalla quale ci
si connette, l’ora di connessione, nodi intermedi che sono intasati, da virus presenti nel
computer dell’utente, risorse del server momentaneamente insufficienti, scarsità di
risorse del computer e così via.

  22

Nella percezione di un rallentamento il redattore spesso attribuisce ingiustificatamente
la colpa al CMS TYPO3 o al server in uso.

Nella maggior parte dei casi bisogna aver pazienza e attendere la conclusione delle
elaborazioni, controllando alcuni riferimenti:

 Le sezioni A B C possono presentare al centro una animazione a forma di


margherita, che indica la comunicazione in corso con il server
 Può darsi che l’animazione a forma di margherita non sia disponibile.
Il redattore deve tenere d’occhio l’indicatore di avanzamento disponibile nel
navigatore, di norma una animazione a forma circolare (Firefox Mozilla), una
barra orizzontale progressiva o una margherita, dipende dal tipo di navigatore
utilizzato.

! Se i problemi tecnici si ripetono nel tempo, è necessario informare


l’amministratore che va avvisato preferibilmente nel momento in cui si sta
verificando il rallentamento.

  23

Capitolo 4

Primo accesso
al backend

In questo capitolo
Modifica della password di accesso
Modifica della password
Una volta effettuato l’accesso il redattore dovrebbe modificare la di accesso

password, per ovvi motivi di sicurezza.


Scadenza della sessione di
Successivamente sarebbe tenuto a farlo almeno una volta ogni tre lavoro
mesi, anche se la modifica è facoltativa.

Per modificare le preferenze e la password il redattore dalla barra


di navigazione posta in alto deve cliccare il proprio username,
nell’esempio seguente è service:

e dal menu a tendina che si apre cliccare la voce Setup Utente.

TYPO3 CMS visualizza in B le opzioni che riguardano il proprio codice di accesso,


suddivise in varie linguette (tabs). TYPO3 presenterà questa videata:

24

dove in B appariranno tutte le opzioni nelle linguette (TABS): dati personali,
password, Startup, Modifica & Funzioni avanzate, ecc. Cliccando la linguetta dati
personali TYPO3 visualizzerà il Nome, l’Email associato e una maschera per la modifica
della password; infine la lingua da utilizzare per il backend.

Il redattore deve controllare l’esattezza dei dati personali ed eventualmente


modificarli; lo username può essere modificato solamente dall’amministratore.

Per modificare la password cliccare il tab Password e inserirne una nuova nelle caselle
di input Nuova password e Ripeti password.

Una volta inseriti i dati, per confermare l’aggiornamento cliccare in alto il pulsante:

Conclusa l’elaborazione TYPO3 CMS presenta un messaggio di avvenuta modifica delle


preferenze.

Per semplicità questo manuale non affronta in dettaglio le opzioni disponibili cliccando
le rimanenti linguette, se non più avanti nella guida quando necessario o in un
manuale separato.

Scadenza della sessione


Dopo un periodo di inattività del backend, TYPO3 CMS forza l’utente a fare logout.

  25

Questo avviene per motivi di sicurezza; una sessione in stato di abbandono prolungato
viene considerata da TYPO3 CMS come non affidabile e inoltre qualche altra persona
non autorizzata la potrebbe usare per modificare i contenuti.

Se la sessione di editing resta inattiva per diverso tempo può essere visualizzato un
messaggio che invita il redattore ad inserire nuovamente la password.

In tal caso è necessario proseguire seguendo le istruzioni a video.

  26

Capitolo 5

Creazione di una pagina

In questo capitolo si analizzerà come creare una nuova pagina con In questo capitolo
TYPO3 CMS, con una procedura passo a passo, nel corso della
Come creare una nuova pagina
quale il lettore apprenderà l’uso di nuove funzionalità.
Le proprietà di pagina

Salvare la pagina
Come creare una nuova pagina
Come scegliere il layout di
Da A cliccare Web e quindi la voce Pagina; attendere che
pagina
in B appaia l’albero delle pagine.

Supponiamo di dover creare una nuova pagina dal nome Inside


TYPO3, che vogliamo posizionare dopo la pagina History, nella posizione qui sotto
evidenziata con una riga rossa:

Si prosegue attivando il menu contestuale (1), cliccando l’icona della pagina dentro la
quale o dopo la quale si desidera creare una nuova pagina.

Il redattore dovrà scorrerlo fino alla voce Azioni Pagina (2).

TYPO3 visualizzerà più a destra un altro menu a tendina (3) nel quale cliccare la voce
Nuovo.

27

Dopo qualche istante in C si vedrà un contenuto simile al seguente:

TYPO3 ha generato l’albero delle pagine e il redattore, per creare una nuova pagina,
dovrà cliccare la freccia scegliendo la locazione desiderata. Nella foto sopra sono state
evidenziate solo alcune frecce, bordate di rosso.

Alcuni esempi:

desiderando creare una nuova pagina prima di Resources, cliccare la freccia nera sopra
la pagina Resources;

  28

per creare una pagina dentro la pagina DUMMY TEST, cliccare la freccia interna alla
pagina in questione

desiderando creare una pagina dopo SOHO TEST, cliccare la freccia nera sotto la voce
SOHO TEST

Creare dentro una pagina significa che la nuova pagina sarà una sottopagina di quella
che la ospita; apparirà rientrata nell’albero delle pagine e TYPO3 provvederà ad inserirla
automaticamente nei menu del sito.

Effettuata la scelta, ovvero cliccando la freccia, TYPO3 CMS presenterà in C questa


videata:

Si vedrà ora una maschera con la quale inserire o modificare alcune informazioni che
fanno parte delle cosiddette Proprietà di Pagina.

  29

NOTE
1) I campi a riempimento obbligatorio, necessari per generare una
pagina, sono segnalati da TYPO3 tramite la sovrapposizione di un
cartello rosso o di pericolo (vedi l’immagine sopra; appare dentro il
campo Titolo di Pagina).
2) Le diverse distribuzioni di TYPO3 possono presentare differenti
linguette a seconda dei prodotti installati, plugin o estensioni in uso

La pagina sarà creata solo quando verrà premuto il pulsante Salva (a forma di floppy disk,
situato in alto a sinistra).

Se il redattore non vuole creare la pagina deve cliccare il pulsante Chiudi (a forma di X).

Le proprietà di pagina
Le informazioni che formano una pagina sono di due tipi:

 Le proprietà di pagina che illustriamo in questo paragrafo


 I contenuti di pagina, ovvero testi, immagini, filmati e altri elementi pubblicati
nella pagina e visibili direttamente al visitatore.

Le proprietà di pagina sono costituite da tutte quelle informazioni e opzioni nascoste al


visitatore, che servono per:

 Definire l’aspetto della pagina, chiamato anche layout di pagina, ovvero il numero
di colonne usate, la presenza o meno di un titolo di testa (header), ecc. Le opzioni
sono contenute nella linguetta Stile.
 I meta-tag di pagina: una descrizione della pagina, le parole chiave da passare ai
motori di ricerca per l’attività di ottimizzazione (SEO). Le opzioni sono contenute
nella linguetta Metadata.
 L’accesso alla pagina – una serie di opzioni tipo: data di inizio pubblicazione, data
di fine pubblicazione, se la pagina è pubblica o l’accesso è riservato specifici gruppi
di utenti, ecc. Le opzioni sono contenute nella linguetta Accesso.

Affinchè la pagina esista il redattore deve riempire alcuni campi:

 Premere la linguetta Generale


 Inserire un titolo di pagina, usato nei menu come etichetta.

  30

 Digitare un titolo di navigazione alternativo; il testo inserito in questo campo
sarà usato nei menu di navigazione pubblicati nel frontend, se presente, in luogo del
contenuto del campo titolo.

Il titolo è importante per l’attività SEO (ottimizzazione per i motori) e può essere più o
meno lungo; si consiglia di riempire il campo usando al massimo 150-200 caratteri,
digitando un testo che descriva il contenuto della pagina.

Alcuni navigatori nascondono il titolo mentre altri come ad es. Microsoft Internet Explorer
lo evidenzia sovrapposto alla barra blu del navigatore; come si nota nella seguente
immagine è evidenziato all’interno del riquadro rosso:

In modo analogo la definizione della etichetta per il pulsante di menu (Titolo di


navigazione alternativo) è una scelta determinante per far comprendere con immediatezza
al visitatore cosa può ottenere accedendo alla pagina stessa.

Salvare la pagina
Il redattore deve salvare la pagina premendo in alto a sinistra, nella sezione C . il
pulsante Salva documento, e scegliere una voce dal menu a tendina che si apre.

La pagina non può essere salvata se non dopo aver compilato i campi a riempimento
obbligatorio. Per una descrizione dettagliata dei tipi di pagina e icone in uso far
riferimento al capitolo precedente.

Una volta salvata la pagina apparirà nella locazione scelta, con il nome assegnato,
all’interno dell’albero delle pagine in B che sarà aggiornato automaticamente dal CMS
TYPO3.

Proseguendo nell’esempio passo-a-passo, va detto che la pagina salvata è priva di


contenuti e quindi presenta più o meno colonne in funzione dei layout scelto. Non è
ancora dotata di alcun testo, immagine o news.

Per proseguire consiglio di salvare la pagina senza uscire dalle proprietà di pagina.

  31

Se accidentalmente le proprietà sono state chiuse, ovvero è stato cliccato
inavvertitamente il pulsante salva e chiudi, TYPO3 CMS presenterà in C di nuovo la
maschera per inserire una seconda pagina e così via. TYPO3 infatti cerca di presentare al
redattore l’ultima maschera, pensando che questi debba creare, come spesso accade, più
pagine una di seguito all’altra.

Per tornare alle proprietà di pagina si prosegue cliccando in B l’icona della pagina
appena creata, e dal menu contestuale si sceglie la voce Modifica.

In alternativa, premuto il nome della nuova pagina, da in C in alto a sinistra, cliccare


l’icona a forma di penna:

così da recuperare la pagina di cui alla immagine precedente.

Come scegliere il layout di pagina


L’aspetto della pagina che chiameremo da in qui avanti layout, può essere modificato in
qualsiasi momento da parte del redattore senza tener conto dei contenuti già inseriti.

In linea di massima è sempre meglio determinare fin dall’inizio l’aspetto della pagina per
evitare successivi spostamenti di contenuti e perdite di tempo. Molte persone
preferiscono, per semplicità, inserire i contenuti in una colonna sola, rinunciando però a
molte funzionalità interessanti offerte dal CMS TYPO3.

Va ribadito che le istruzioni qui pubblicate riguardano sempre il modello grafico di


TWITTER BOOTSTRAP nella configurazione standard. Il tecnico che ha progettato il sito
può aver modificato i layout aggiungendo nuovi elementi oppure prevedendo
comportamenti differenti da quelli qui descritti.

Entrati nelle proprietà di pagina, per vedere i layout disponibili e sceglierne uno, cliccare la
linguetta Aspetto e si vedranno alcune icone (vedi videata successiva), che possono
differire da sito a sito e indicano la disposizione degli elementi nel backend e nel frontend
(che sarà identica).

  32

Nella videata sopra, scegliendo una voce dal menu a tendina di sinistra (Layout di
Backend solo per questa pagina) oppure cliccando una delle icone sottostanti, il
redattore sceglie un modello di pagina dotato delle colonne visibili in anteprima nell’icona
stessa.
La scelta riguarda la pagina corrente, ovvero quella che viene editata al momento.

Dal menu a destra (sottopagine di questa) invece il redattore può scegliere un modello
che sarà applicato alle sottopagine della pagina attuale, evitando in futuro di ripetere la
configurazione pagina per pagina.

Effettuata la scelta dal layout che si desidera per proseguire cliccare l’icona salva e
chiudi. Una volta chiuse le proprietà di pagina, TYPO3 CMS visualizzerànel BACKEND le
colonne che corrispondono una-ad-una a quanto apparirà pubblicato nel FRONTEND.

Si prosegue ora con il caricamento dei contenuti, descritto nel nuovo capitolo.

Nota bene i layout e la disposizione grafica possono variare da sito a sito.


Inoltre il sistema di pubblicazione essendo responsivo, varia la disposizione dei
contenuti a seconda della dimensione della finestra del navigatore.

  33

Capitolo 6

Gestione dei contenuti tipici

Questo capitolo descrive l’inserimento dei contenuti in una nuova In questo capitolo

pagina appena creata, seguendo l’esempio iniziato nel capitolo Layout di pagina
precedente. Le istruzioni valgono anche come promemoria per la
gestione di nuovi contenuti in pagine preesistenti. I nomi delle colonne

Distribuzione dei contenuti


nelle colonne
Layout di pagina
Grid system
Una volta scelto un layout di pagina specifico (vedi capitolo
Tipi di contenuto (comuni)
precedente) la stessa è configurata ed è pronta per accogliere i
contenuti. Inserimento di un contenuto di
tipo Testo & Immagini
Da A sotto Web cliccare Pagina; attendere che in B appaia
l’albero delle pagine e da lì scegliere la pagina desiderata cliccando Come salvare il contenuto

il nome. Attendere che C presenti la maschera di caricamento Gestione di altri contenuti tipici
dei contenuti.

NOTA BENE l’interfaccia di backend in C presenterà una


o più colonne; la visualizzazione dipende dal tipo di layout
scelto attraverso la modifica delle proprietà di pagina appena
viste.

I nomi delle colonne di backend


I nomi che di solito distinguono le colonne in C saranno:

 Normal (Normale, contenuto principale) – detta anche colonna Normale, destinata


a ricevere il contenuto principale o comunque più importante della pagina
 Left, Right, Border (Sinistra, Destra, Bordo) - tipicamente si trova a destra del
precedente
 Altre colonne/aree possono assumere nomi differenti che variano in funzione delle
configurazioni peculiari del sito (es- special1, special2, ecc.), assegnati dal
programmatore.

34

Distribuzione dei contenuti nelle colonne di backend
Una colonna di pagina nel backend può accogliere, a differenza di altri prodotti come
Wordpress, uno o più contenuti, disposti nell’ordine uno sopra l’altro. Per esempio
possiamo usare la colonna principale (Normal) per inserire nell’ordine:

 Un testo iniziale dotato di un titolo di pagina


 Seguito da un testo con una o più immagini disposte a fianco, in alto o dopo il
testo…
 Seguito da una galleria di immagini
 Seguito da un filmato….
 Seguito da un contenuto di tipo testo
 …. Seguito dalle previsioni del tempo

E così via senza limite se non quello determinato dall’estetica o da eccesso di peso della
pagina.

Oltre tutto, lavorando nel backend sarà possibile trascinare i contenuti a video (funzione
drag and drop) per invertire comodamente la posizione di ognuno di essi oppure
spostarli velocemente da una colonna all’altra; con altre procedure si può trasferire un
contenuto da una pagina all’altra.

Grid system
Il lettore sarà convinto che scegliendo un determinato layout, ad es. che prevede l’uso di
una sola colonna, di non poter far altro che riempire l’unica a disposizione.

Niente di più sbagliato!

TYPO3 CMS permette la suddivisione di una determinata colonna in altre colonne,


secondo le regole del grid system (tr. Sistema a griglia).

Il grid system consiste in una serie di configurazioni (stili e codice HTML) con le quali le
colonne si adattano alla dimensione dello schermo in modo dinamico. L’effetto finale,
che consiste in una distribuzione tipografica esteticamente equilibrata, è ben visibile
navigando tra le pagine interne del sito dimostrativo di TYPO3.

Con il Grid system il redattore può attivare fino a 12 o 16 colonne destinate ad ospitare i
contenuti, in funzione della configurazione del CMS TYPO3. Il sito dimostrativo utilizza il
grid system a 12 (default) o 16 colonne.

  35

Tipi di contenuto
Procedendo con l’esempio iniziato nei capitoli precedenti, il redattore si troverà ad
editare una pagina che dispone di due colonne o una colonna, a seconda del layout
scelto. Se si tratta di una pagina appena creata questa pagina sicuramente non dispone
di alcun contenuto.

La sezione a destra in C si presenterà come la seguente:

Per inserire un contenuto cliccare uno dei pulsanti con nome + Contenuto nella
locazione desiderata. Nella foto sopra il contenuto a sinistra, situato nelal colonna
Middle:Left esiste ma non sarà visibile nel frontend, in quanto è un contenuto
nascosto (presentato in grigio chiaro).

  36

Più sotto, a fine pagina, in si nota l’opzione Mostra i contenuti nascosti (1); cliccando il
pulsante di scelta la pagina sarà aggiornata presentando anche eventuali contenuti
nascosti (non visibili nel frontend). Il numero tra le parentesi (1) indica il numero di
contenuti nascosti presenti nella pagina.

Dopo breve attesa TYPO3 presenta in C una videata dotata di alcune linguette:

I contenuti sono suddivisi nelle varie linguette a seconda dell’uso e tipologia.


Nell’immagine sopra l’ultima linguetta, con nome Media, relativa ad una estensione
aggiunta, potrebbe non essere presente nel

I contenuti più usati sono raggruppati sotto la linguetta Contenuto di tipo comune. 

Inserimento di un contenuto di tipo Testo & Immagini 


Il redattore sarà ora guidato nella creazione di un contenuto di tipo testo & Immagini,
costituito da un testo più o meno lungo, dotato di una o più immagini da disporre alla
sua sinistra o destra, in modo incorniciato o meno.

Per proseguire deve cliccare la voce Testo & Immagini. Dopo qualche istante TYPO3
CMS presenta la maschera di caricamento dotata di alcune linguette (tabs):

  37

Il redattore dovrà muoversi tra le linguette Generale per caricare il testo e la linguetta
Immagini per inserire le immagini da affiancare al testo.

L’accesso di norma avviene alla linguetta Generale, dalla quale è possibile inserire un
titolo dell’intero blocco, inserendo del testo (facoltativo) nel campo Titolo principale.
L’aspetto del titolo (dimensione e carattere) varia a seconda della scelta effettuata
tramite il menu a tendina Tipo.

Più sotto c’è un riquadro con nome Testo o Text simile all’editor di Microsoft Word, e
nella zona sottostante di color bianco il redattore può inserire un testo, copiato o
inserito ex-novo.

Una volta inserito del testo di prova, senza usare i pulsanti per la formattazione, che
saranno spiegati più avanti, il redattore prosegue cliccando la linguetta Immagini.

OPZIONI DI CARICAMENTO

TYPO3 offre diverse opzioni di caricamento delle immagini:

  38

‘AL VOLO’ - Le immagini caricare con questa opzione saranno associate esclusivamente
alla pagina in questione e non potranno essere riutilizzate altrove. Per procedere e
caricare una immagine alla volta cliccare il pulsante (1); sfogliare una cartella del
computer e scegliere una immagine.

Se una immagine viene trascinata dal proprio computer (cosiddetta funzione drag and
drop) sopra la zona 2, appare l’area 3 nella quale rilasciare l’immagine che sarà trasferita
nel server.

DAL SERVER – l’immagine da scegliere à già stata caricata in precedenza nel server,
come spiegato più avanti, utilizzando il menu File > Lista File. Questo metodo è utile nel
caso sia necessario utilizzare la medesima immagine in più pagine del sito.
Per procedere cliccare il pulsante (1).

Cliccando il pulsante Aggiungi immagine (figura a sinistra) il redattore ordina


l’inserimento dell’immagine da associare al testo.

  39

Si noti che questo è il metodo classico per caricare una o più immagini, sostituito
eventualmente da quanto illustrato più avanti, vedi Uso del modulo MEDIA.

TYPO3 genera una finestra di pop-up , contenente tutti i documenti del server disposti in
varie cartelle, dalla quale è possibile scegliere l’immagine desiderata.

Nella videata sopra TYPO3 presenta il Folder Tree, una serie di cartelle disposte ad
albero, nelle quali inserire documenti, immagini e altri elementi.

Più sotto c’è una maschera di caricamento che permette di aggiungere nuovi documenti,
dalla sezione Upload files, cliccando il pulsante Sfoglia...

  40

SI prosegue scegliendo (cliccando) una cartella nella quale caricare una nuova
immagine. Nella fotografia qui sotto è stata scelta la cartella customizing che si trova
dentro la cartella introduction e images.

Per inserire le immagini premere + (1) a fianco di ogni immagine. Il redattore può
cambiare la cartella e ripetere l’operazione, scegliendo immagini da diverse cartelle.

Chiusa la finestra di pop-up cliccando il pulsante X in alto a destra, si tornerà a quella


precedente che presenta le immagini appena selezionate e quindi inserite:

  41

Nota tentando di caricare numerose immagini, le elaborazione posso
variare da alcuni secondi ad alcuni minuti; attendere il completamento della
generazione delle icone a video. Si consiglia nel frattempo di evitare altre
elaborazioni.

La nuova immagine sarà dotata con le opzioni, con la sezione delle opzioni di immagine
espansa (aperta) o meno. Se non è aperta il redattore deve cliccare il pulsante a forma di
freccia nera a sinistra di ogni elemento.

E’ vivamente consigliato riempire i campi visualizzati per ottenere una migliore posizione
neimotori di ricerca. Il redattore può assegnare un titolo (title) alla immagine, un testo
alternativo (Alternative Text) che sarà visualizzato qualora il visitatore disabilita l’uso
delle immagini e una descrizione, o meglio didascalia (description, caption) che
apparirà sotto l’immagine. Per inserire le stringhe prima premere il riquadro Sovrascrivi.

A questo punto avrà due opzioni, rendendo l’immagine cliccabile per:

 Collegare l’immagine a una pagina interna al sito oppure a un sito esterno,


premendo lo strumento a forma di matita situata alla destra del campo di input
Link; se il visitatore clicca l’immagine sarà indirizzato ad una pagina interna al
sito oppure ad un sito esterno,

  42

in alternativa
 Far si che l’immagine sia ingrandita a pieno schermo, attivando l’opzione tramite
la casella di scelta Ingrandisci al click (o Enlarge on Click) che si trova al
termine della videata nella sezione Comportamento (o Behavior).
 Per configurare l’aspetto della immagine rispetto al testo inserito, ccliccare il
menu a tendina Posizione, dal quale scegliere una delle voci in elenco e dal
menu Colonne il numero di colonne desiderate (es. se le immagini in elenco
sono 6 e le colonne 2, saranno visualizzate 3 immagini per riga).

Manipolazione della immagine (Image manipulation)

Dalla versione 7.6 CMS TYPO3 offre un potente strumento per ritagliare le immagini
direttamente via web. Cliccare il pulsante Open editor nella sezione Image
manipulation. L’editor a video è semplice da usare:

La videata più sopra presenta una grigia e tirando i vari punti che la formano il redattore
può selezionare parte della immagine (nell’esempio viene isolato il logo arancione
TYPO3). Al termine cliccare Accept per confermare o Cancel per chiudere.

Nota: l’immagine caricata non sarà ritagliata e sovrascritta; solo l’immagine prodotta in
pubblicazione risulterà ritagliata.

Come salvare il contenuto


Per salvare il contenuto cliccare una delle voci di menu dal menu in alto a sinistra
in C evidenziata qui nel riquadro rosso:

  43

Gestione di altri contenuti tipici
La gestione degli altri contenuti raggruppati sotto la linguetta Contenuti tipici è identica
a quella Testo & Immagini, con queste variazioni:

 Solo header permette l’inserimento del solo Titolo


 Testo permette l’inserimento del Titolo e di un testo
 Immagini permette l’inserimento del Titolo e di alcune immagini, ma non di un
testo
 Lista puntata e tabella – permette l’inserimento di un gruppo di voci in elenco o
di elementi in una tabella; le medesime funzionalità sono disponibili all’interno
dell’editor. Per l’uso si rimanda più avanti in questa guida.

La gestione degli altri contenuti non tipici, ovvero: Contenuti speciali, Elementi Form,
Plugins, Bootstrap sarà illustrata più avanti nel manuale.

Il prossimo capitolo spiega l’uso dell’editor che in TYPO3 si chiama RTE Editor (Rich Text
Editor).

  44

Capitolo 7

Uso dell’editor RTE

Questo capitolo spiega come utilizzare l’editor RTE, l’interfaccia per In questo capitolo
inserire i testi, dotata di icone simili a quelle di Microsoft Word.
Cosa è l’editor RTE

Gli stili
Cosa è l’editor RTE I menu a tendina

L’editor RTE (Rich Text Editor) è un potente editor che Le icone e loro significato
l’amministratore può personalizzare in modo molto “granulare”,
Come generare un
fino ad esempio a limitare un redattore nel solo uso di uno o più
collegamento (link)
colori o stili per il testo.
Pulizia del testo incollato da
Un accenno all’editor RTE è stato fatto nel corso del capitolo
Word
precedente, riguardante l’uso dei Contenuti tipici. L’editor in un
certo senso è il cuore del sistema; non è usato solo per inserire dei Gestione di una tabella

testi, bensì per molti altri record come news, prodotti, FAQ, ecc. Inserimento di elenchi puntati

Una volta imparato l’uso dell’editor possiamo affermare di aver Consigli per l’uso
appreso almeno il 60% delle conoscenze necessarie per editare i
contenuti di TYPO3.

Gli stili
L’editor permette di editare testi che cambieranno aspetto (saranno formattati) a
secondo gli stili disponibili; nel caso del pacchetto Twitter Bootstrap saranno quelli
disponibili per default.

L’editor è altamente configurabile e l’amministratore può aggiungere nuovi stili, colori,


blocchi, liste ordinate ed elenchi puntati e così via.

45

Menu a tendina
L’editor si presenta con uno o più menu a tendina (1) e una serie di icone (2)

e un riquadro (3) nel quale inserire del testo, che può essere digitato direttamente o
incollato da una applicazione esterna. Oltre al testo si possono inserire delle immagini,
allinearle a sinistra o destra e ridurle di dimensione, sebbene sia consigliato utilizzare il
tipo di contenuto Testo & Immagini già visto in precedenza.

Con la casella (4) sarà possibile disabilitare l’editor o abilitarlo nuovamente.

Il lettore avrà notato che alcuni menu e icone appaiono in grigio stinto, indicando che
l’elemento pur esistendo non è disponibile. Ci sono alcune icone ad esempio che TYPO3
attiva e rende disponibili solo dopo aver cliccato altre icone; tipico è l’inserimento di una
tabella. Se una tabella non è stata selezionata o inserita, TYPO3 visualizzerà le icone
colorate in grigio chiaro; le azioni associate alle icone saranno disponibili solo una volta
selezionato l’oggetto e in questo caso appariranno con il colore originario.

MENU A TENDINA – Ci sono tre tipi di menu a tendina, nell’ordine da sinistra a destra,
qui descritti:

 Tipo di blocco (type of block) assegna il testo inserito ad un titolo di testa (heading
da 1 a 5), a un contenitore (div) oppure a un contenuto HTML5 tipo articolo, ed
infine a un tipo sezione (section) e ad un paragrafo.
 Stile da applicare al blocco precedente – una volta inserito un tipo di blocco,
ad esempio un paragrafo, da questo menu è possibile selezionare uno stile da
applicare all’elemento inserito. Ad esempio: inserite alcune parole e una volta
generato un nuovo paragrafo, cliccando in una qualsiasi posizione all’interno
dello stesso, da questo menu sarà scelto un differente stile da applicare all’intero
elemento (paragrafo).
 Stile da applicare ad una o più parole – gli stili disponibili da questo menu a
tendina possono essere applicati ad una sola parte del paragrafo o blocco.
Ad esempio: selezionare alcune parole di un paragrafo e agire da questo menu
per cambiare l’aspetto.

  46

INSERIMENTO DI UN TESTO – Cliccare all’interno del riquadro (3) e scrivere, senza
andare accapo, il testo:

il mio primo testo

battendo il pulsante accapo il testo generato sarà attribuito a un paragrafo; il cursore


sarà mandato accapo per inserire un secondo paragrafo e così via.

Il lettore avrà notato che in alto il secondo menu si è illuminato indicando che è le
opzioni ora sono disponibili.

CAMBIARE IL TIPO DI BLOCCO - Cliccando all’interno del paragrafo appena creato, è


possibile mutare l’oggetto in un altro tipo di blocco (agendo sul primo menu), oppure
applicare al blocco paragrafo uno specifico stile scelto dal secondo menu.

L’editor RTE è intelligente, infatti cambiando il tipo di blocco attiverà o meno il


successivo menu a tendina solo se disponibili le voci di stile riguardanti la nuova
selezione. Ad esempio trasformando un paragrafo in heading 1 il secondo menu non
disporrà di alcuna voce.

RTE editor non funziona in modo identico a quello di Microsoft Word e il


comportamento dei due è differente in diversi casi.

Tipicamente, una volta inserito un tipo di blocco, è necessario procedere in questo


modo per evitare di creare confusione con gli stili:

 Inserito ad esempio un paragrafo e scelto uno stile da applicare al paragrafo


stesso, desiderando applicarne un altro bisogna per prima cosa rimuovere la
formattazione già assegnata
 dal primo menu scegliere la prima voce in lista: “remove block format”
 la formattazione del blocco sarà rimossa
 proseguire scegliendo nuovamente un’altra voce dal primo menu per applicare
una nuova formattazione

la regola vale anche per gli altri menu che abbiamo descritto. Se questa procedura non
viene seguita si ottengono risultati inattesi ed è necessario rimuovere ricorsivamente
tutti i block format ripetendo le operazioni descritte e solo alla fine applicarne una
nuova.

Le icone e loro significato


Attraverso le icone disposte in alto, il redattore può applicare diverse formattazioni al
testo che è stato selezionato.

  47

Con l’editor si possono fare molte cose (vedi immagine successiva); le icone sono
raggruppate per azioni simili:

(1) formattare il testo applicando lo stile grassetto (bold), i corsivo (italic) e sottolineato
(underline) o barrare il testo

(2) modificare il colore e lo sfondo del testo

(3) inserire una lista di uno o più elementi, numerata o puntata

(4) gestire l’allineamento a sinistra, destra, centrato o giustificato

La seconda riga presenta altri pulsanti, raggruppati in piccole sezioni; qui ne


descriviamo solo alcuni:

(1) Annulla/Ripristina - come in Word, premendo questi pulsanti a forma di freccia è


possibile recuperare la versione precedente del sottostante testo; utile per annullare o
ripristinare le modifiche appena fatte;

(2) Trova/Sostituisci - lo strumento binocolo apre una finestra con la quale ordinare
una ricerca all’interno del testo; utile se il testo è lungo. Permette anche di sostituire
delle parole con altre. Segue lo strumento spolverino (a forma di pennello) che
permette di ripulire il codice html dagli elementi di Word oppure qui copiati da altra
applicazione.

  48

(3) Crea collegamento queste icone sono disponibili solo se viene selezionato del testo
e permettono di collegare il testo a una immagine, email, pagina esterna o file, vedi
punto successivo. La seconda icona invece permette di cancellare il collegamento.

(4) Inserisci Immagine da modulo Media – Per inserire una immagine all’interno del
testo; sarà documentato più avanti.

Come generare un collegamento (link)


L’editor RTE permette di creare un testo, tipicamente uno o più paragrafi, per poi
selezionare a video una o più parole e quindi generare un collegamento (link).

Il visitatore, cliccando il collegamento, costituito normalmente da alcune parole che


hanno un senso logico e appariranno sottolineate, normalmente evidenziate rispetto al
testo con diverso colore (di solito blu), sarà indirizzato ad una pagina interna al sito, ad
una pagina esterna (URL) oppure sarà lanciato il programma di posta elettronica (mail).

Si procede in questo modo:

 Selezionare una o più parole da utilizzare per creare il link; si fa ovviamente


trascinando il mouse sulle parole
 Le parole selezionate appariranno a caratteri invertiti:
il mio primo testo
 L’icona a forma di link, vedi immagine precedente, punto (3) , apparirà illuminata.
Cliccare l’icona a forma di mondo dotato di catena.

TYPO3 presenta una finestra di pop-up:

  49

Descrizione e uso:

(1) linguette - Cliccare la linguetta relativa al collegamento desiderato; TYPO3 presenta,


nella zona sottostante, le opzioni indicate per la scelta fatta: Pagina per collegare il testo
a una pagina interna; File per forzare lo scaricamento di un documento, URL esterno
per redirigere il visitatore ad un sito esterno, Email per ricevere un messaggio si posta.

(2) target (destinazione) – Con questo menu a tendina è possibile scegliere tra Top e
Nuova finestra. La prima (Top) fa sì che una volta cliccato il collegamento la pagina
corrente sarà sostituita con la nuova pagina collegata. La seconda invece fa sì che la
pagina corrente resti aperta e che la pagina collegata appaia come un nuovo elemento.

(3) titolo – Il redattore può usare questo campo per scrivere un suggerimento associato
al link. Il visitatore, passando con il mouse sopra il collegamento, vedrà una piccola
finestra di suggerimento aprirsi sotto il link. Potrebbe contenere ad es. frasi del tipo:
scrivici un email, visita il sito tal dei tali (esterno), contattaci, scarica il file, ecc.

(4) albero delle pagine – Nella videata sopra la linguetta aperta è Pagina, pertanto da
questa area il redattore deve scegliere la pagina da associare al link. La pagina è interna
al sito e TYPO3 presenta, in questo caso, l’albero delle pagine come si vede in B .

Per attivare il collegamento cliccare una pagina (5), oppure espandere/comprimere


l’albero fino a trovare quella desiderata e cliccarla. Riempire eventualmente le opzioni
sopra descritte, che sono facoltative.

Per quanto riguarda le altre linguette si invita il redattore a provare le funzionalità;


valgono le spiegazioni in dettaglio sopra fornite per la linguetta Pagina.

In luogo dell’albero delle pagine in File si vedrà l’albero dei documenti presenti nel
server; se viene scelto un collegamento mail appariranno solo le opzioni già descritte e
un riquadro per indicare l’indirizzo email nel quale ricevere la posta.

URL esterno permette di collegare il testo a una pagina di un sito esterno; le opzioni
presenteranno un campo di input nel quale inserire il collegamento (ad es.:
http://www.sitoesterno.it).

Pulizia del testo incollato da Word


Il redattore potrà copiare il testo da Microsoft Word nella finestra dell’editor, come qui
di seguito spiegato.

Per primo dovrà lanciare il programma Microsoft Word; aprire un documento e


trascinare il mouse per selezionare il testo e premere Ctrl C (funzione Copia).

  50

Aperto il contenuto di destinazione in TYPO3 dal BACKEND, dovrà posizionare il cursore
all’interno del riquadro di RTE dove normalmente viene editato il testo.

Scelto il punto dove incollarlo premere il pulsante sinistro del mouse. Nel punto di
inserzione si vedrà un cursore verticale lampeggiante; ora dovrà incollare il testo di
Microsoft Word premendo Ctrl V (funzione Incolla). Fatto questo il testo apparirà
all’interno dell’area di testo di RTE.

Il testo appena incollato presenta però delle formattazioni tipiche di Word. La prima
cosa da fare è di salvare il contenuto.

IMPORTANTE! TYPO3 nel momento del salvataggio controlla il testo e lo


filtra, operando delle trasformazioni, togliendo tutti i riferimenti di codice
non consentiti in pubblicazione. Dopo aver salvato il contenuto nel
database, aggiorna la pagina e presenta il contenuto modificato.

Solo a salvataggio avvenuto e aggiornamento della pagina il redattore può valutare


come è trasformato il testo; può procedere con lo strumento spolverino, descritto in
precedenza, per ripulire ulteriormente le formattazioni indesiderate o applicarne di
nuove.

In alcuni casi la pulizia può non aver luogo o presentare problemi. Tecnicamente non
è possibile effettuare una pulizia perfetta, che avviene nella maggior parte dei casi.

Se il risultato non è quello atteso, si deve procede come più sopra descritto fino alla
copia con Ctrl C, poi aprire il notepad (blocco appunti) del PC e incollare il testo per poi
selezionarlo di nuovo con Ctrl C e alla fine incollarlo nella finestra RTE con Ctrl V. Così
facendo (soluzione estrema) il testo di Word perderà tutte le formattazioni e manterrà
comunque la disposizione in paragrafi.

Gestione di una tabella


Notoriamente il punto debole di tutti i CMS risiede nella gestione delle tabelle; le
difficoltà sono legate alla complessità dell’elemento e alla mancata responsività, ovvero
le tabelle, se voluminose in larghezza, poi non si vedono nel cellulare.

L’editor RTE permette di gestire le tabelle e, come tanti altri editor di vari CMS, l’editing a
video a dire il vero non è comodo e del tutto semplice.

Pertanto ci si limita a consigliare di procedere in questo modo:

  51

 Creare una semplice tabella in Word, quindi senza stili, e limitarsi eventualmente
a colorare le celle, per copiarla e incollarla come già spiegato in precedenza con
Ctrl V
 In alternativa utilizzare il contenuto tabella dal wizard dei contenuti (vedi capitolo
precedente)

Per specifiche esigenze il titolare del sito si metterà in contatto con l’amministratore per
modificare stili e procedure atte a migliorare la gestione delle tabelle e per ricevere una
formazione più adeguata.

Consiglio Le tecniche consigliate riguardano quasi sempre l’editing di


piccole tabelle. Per necessità particolari e/o tabelle più complesse o con
molte righe è meglio chiedere all’amministratore di installare una estensione
idonea tra quelle disponibili, capace di pubblicare ad es. nel sito le tabelle di
Excel.

Inserimento di elenchi puntati


Con l’editor è possibile gestire due tipi di elenchi: puntati e ordinali (numerici):

Seguendo l’ immagine precedente, per generare un elenco si deve cliccare una delle
due icone situate nella zona evidenziata in rosso; quella a sinistra attiva un elenco di
tipo numerico; la seconda, a destra un elenco puntato.

Più sotto RTE presenta un rientro per accogliere il testo (1) e ad ogni pressione del tasto
<invio> TYPO3 va accapo pronto ad accogliere un nuovo elemento.

Nella parte sottostante l’editor, la barra grigia detta Percorso (2), appariranno tutti i tag
(codici) che determinano l’elemento. Il tag ul, nell’esempio, identifica tutti gli elementi
della lista, ovvero tutto l’elenco, mentre il tag li descrive l’attuale elemento in lista.

  52

Nella barra Percorso (2) di cui alla precedente immagine, dopo aver premuto ul TYPO3
evidenzierà tutta la lista (punto 1 della immagine successiva) visualizzandola a caratteri
invertiti:

permettendo la scelta di uno stile da applicare alla lista, attraverso il menu (2).

TYPO3 presenterà nel menu dello stile di blocco le sole opzioni ammesse per il tipo di
blocco selezionato. Editando ad esempio una tabella, lo stile di blocco sarà dotato solo
degli stili da applicare alla cella, riga o colonna.

A seconda degli stili impostati dall’amministratore e resi disponibili al redattore, il blocco


potrebbe assumere un aspetto differente, ad es. i pallini diventare colorati, oppure
venire sostituiti da una freccia verso destra, da una icona e così via.

Consigli per l’uso


Il redattore in fase di gestione del testo può incappare facilmente in alcuni errori
piuttosto banali oppure usare l’editor nella maniera non corretta.

Alcuni consigli:

 Il primo blocco di testo dovrebbe essere sempre preceduto dal titolo, quindi
assegnare correttamente un titolo a tutto il testo usando i tag h1, h2, ecc.
(headings).
 Scegliere un titolo corto, efficace e capace di descrivere il contenuto che segue
 Eventualmente, dopo il titolo e prima del testo esteso inserire un paio di righe di
introduzione che anticipano il contenuto della pagina
 Trattare un solo argomento per ogni pagina
 Creare dei link ma non abusarne nella quantità
 Semplificare il testo riducendolo all’essenziale; internet non è il cartaceo e il
visitatore si stanca facilmente di leggere
 Copiando da Word ripulire sempre il testo
 Non usare un eccesso di colorazioni differenti e dimensioni di font per produrre
effetti indesiderati, come accostamento di testo viola con colori gialli (eccesso di
contrasto)

  53

 Suddividere il testo in più paragrafi. Inserire del testo consecutivamente senza
separarlo produce uno sgradevole effetto di pesantezza visiva
 Evidenziare le parti importanti usando l’icona del grassetto
 Scrivere parole in una lingua differente usare il corsivo per evidenziarle
 Strutturare il layout variando la disposizione e le colonne, per rendere la lettura
del sito meno noiosa
 Dove necessario attivare la visualizzazione delle immagini a piena pagina con
effetto di ingrandimento (slimbox)
 L’uso eccessivo di banner, animazioni, caroselli e altro producono un effetto
caotico che alla fine infastidisce il visitatore.

! Un errore comune consiste nel premere più volte, alla fine di un testo, il
tasto <invio>. Pertanto il testo avrà uno spazio invisibile posto al termine.
Aprendo un successivo blocco di testo i due contenitori saranno percepiti
come eccessivamente distanti. Soluzione: rimuovere gli spazi in eccesso alla
fine del testo.

  54

Capitolo 8

Contenuti di Boostrap

In questo capitolo vedremo come gestire i contenuti di Twitter In questo capitolo


Bootstrap. Se il vostro sito non dispone dei moduli di bootstrap
Creazione di un nuovo
potete tranquillamente saltare la lettura di questo capitolo. contenuto

Prima di proseguire è indispensabile aver assimilato le nozioni del


come creare un…
Grid system e la gestione dei contenuti, vedasi capitoli precedenti.
Carousel,

Accordion
Creazione di un nuovo contenuto
Panel
Per iniziare dobbiamo creare un nuovo contenuto seguendo le
istruzioni di cui al paragrafo Tipo Contenuto del precedente List group

capitolo Gestione dei contenuti tipici. External Media

Premuto il pulsante per aggiungere un contenuto in una specifica


colonna in C , si vedrà la seguente videata nella quale cliccare la linguetta Bootstrap
Package.

Si vedranno in elenco quattro tipi di contenuto, che possono variare nel tempo; quelli
classici sono: Text & Icon (icona con testo)

Carousel (carosello)
aggiunge nella pagina una serie di immagini che saranno visualizzate in sequenza, con
effetto a dissolvenza e la possibilità di svorapporre alcune scritte o sfondi costituiti da
immagini o di un determinato colore.

Accordion
pemette di inserire dei blocchi di testo con dei titoli. Il testo sarà nascosto e premendo il
titolo il sarà visualizzato con effetto d’apertura a movimento.

Tab
simile all’accordion ma la visualizzazione delle linguette (tab) è orizzontale. Di solito un
contenuto predefinito è aperto in partenza (la prima tab). Il contenuto sarà di testo.

Panel

55

per inserire alcuni elementi di testo da evidenziare nella pagina; appariranno all’interno di
un box e dotato di un titolo del blocco.

List Group
per formare una lista di elementi puntati, tutti dento un box con un bordo e ognuno
separato verticalmente da una linea.

External Media
per inserire nella pagina filmato da YouTube o altre fonti

Thumbnail menu
(qui non descritto perché ancora sperimentale) 

Testo & Icone


Nella versione di riferimento questo tipo di contenuto non appare tra quelli di Bootstrap,
mente viene elencato nel menu a tendina per scambiare il tipo di contenuto, forse a
causa di un errore.

  56

Il redattore può costruire con facilità un contenuto come quello visibile nella immagine
precedente, scegliendo una icona tra quelle a disposizione, cliccando quella desiderata
dal menu Icons (Icone), un titolo (sopra è Start browsing) e del testo da editare con RTE
editor.

L’icona potrà essere personalizzata con le opzioni:

 Posizione (position): left (sinistra), right (destra), top (sopra). Questa è la


posizione della icona rispetto al testo
 Tipo (Type) square (quadrato), circle (tondo) e default (solo icona). Definisce la
forma del contenitore della icona.
 Dimensione (size): con misure crescenti e predefinite partendo da default a
awesome (sorprendente)

Le seguenti opzioni disponibili o meno seguito della scelta del tipo di icona:

 Colore (Color) è il colore assegnato all’icona


 Background (Sfondo) è il colore di sfondo assegnato al contenitore dell’icona

Più sotto potrà inserire il testo via RTE Editor.

Nota La generazione delle icone non avviene tramite la pubblicazione di una


immagine; è basata su un set di caratteri denominato glyphpicons. L’uso delle icone di
bootstrap è gratuito; desiderando un set personalizzato va sostenuta una spesa di 60 e
più dollari per l’acquisto di set personalizzato.

  57

Carousel (carosello)
Un carosello è costituito da una serie di immagini ed eventualmente anche del testo, che
si muovo in modo circolare, con qualche animazione.

Per inserire il carosello creare un nuovo elemento di contenuto di tipo Bootstrap >
Carousel, nella posizione desiderata, poi cliccare la linguetta Generale (General);
scorrere la videata verso il basso e dopo la dicitura Carousel Item (elemento di
carosello), cliccare il pulsante Crea Nuovo (Create New); più sotto si vedranno alcune
opzioni:

Suddivise nelle linguette Generale (General), Sfondo (Background) e Accesso (Access).

GENERALE – Scegliere il Tipo (type) di contenuto tra Intestazione (header), testo con
immagine (Text and Image) e HTML. Volutamente viene tralasciato l’ultimo tipo di
contenuto, troppo complesso per il redattore, mentre sarà illustrata l’opzione Testo con
Immagine (Text and Image).

Effettuata la scelta TYPO3 propone il cambiamento dei campi del modulo; confermare e
attendere la rigenerazione della pagina; riempire quindi i campi Header (Intestazione),
Text (testo) e Text Color (colore del testo).

Proseguire premendo i pulsanti Aggiungi immagine o Select & upload files, già visti in
precedenza, tramite i quali viene aggiunta una immagine al testo digitato.

Riempire i campi con gli attributi per la immagine appena caricata, cosi’ da facilitare
l’indicizzazione da parte dei motori di ricerca.

Eventualmente formare un link verso una pagina interna o esterna utilizzando il


successivo campo con nome Link.

  58

BACKGROUND (Sfondo) - Percorrendo le opzioni verso l’alto si vedrà la linguetta per
scegliere lo sfondo da applicare all’intero carosello. Lo sfondo può essere costituito da
uno colore uniforme o da una immagine.

Scegliere lo stile dello sfondo (background Style), ovvero il colore o una immagine e se
scelto il colore, più sotto cliccare l’icona scura a destra per attivare il selettore dei colori e
scegliere il colore desiderato. Se scelta immagine il sistema presenta nuove opzioni per
selezionare una immagine o fare l’upload come visto nei capitoli precedenti, in nuovo
contenuto di tipo Testo con Immagine.

Per generare un altro elemento del carosello cliccare il pulsante + Crea Nuovo
(Create New); gli elementi possono essere invertiti tra di loro per variare l’ordine di
apparizione.

  59

Accordion
Un  Accordion  permette  di  gestire  alcuni  contenuti  in  una  pagina,  tipicamente  chiusi  in  blocchi 
ognuno dei quali dotati di un pulsante, largo quanto il contenitore che lo ospita, cliccando il quale 
si apre il contenuto sottostante con effetto ad animazione o meno.

Come per il precedente Carosello, scegliere il tipo di contenuto Bootsrtap >


Accordion. Si vedranno un paio di linguette: Generale (general) e Accesso. Sotto
Generale ci sono due campi da riempire:

Intestazione (Header) scegliendo il layout più opportuno, poi inserire del testo nel
campo Testo (Text) nel quale è possibile formattare il testo a piacimento, disponendo
di RTE editor (vedi capitolo apposito).

Per generare un altro elemento di accordion cliccare il pulsante Crea Nuovo


(Create New); gli elementi possono essere invertiti tra di loro per variare l’ordine di
apparizione.

Panel
Il Panel permette di inserire un titolo e un testo da evidenziare, ad esempio un
messaggio informativo (Info) o di pericolo (danger). Va inserita una Intestazione e del
Testo il cui output è determinato dalla scelta che il redattore può effettuare dalla
linguetta Aspetto:

Si invita il lettore a provare le voci contenuti dal menu Layout, che producono
differenti effetti nel frontend, secondo gli stili di bootstrap: Primario, Successo, Info,
Attenzione, Pericolo.

60

List group
Permette di pubblicare una lista di elementi (testo collegato o meno) disposto
ognuno su una riga, come si vede chiaramente nell’esempio sottostante:

Per ottenere un simile effetto riempire i campi come illustrato nella immagine
seguente:

  61

External media
Questo tipo di contenuto consente di pubblicare un filmato o altri media esterni al
sito, tipicamente da alcuni siti come YouTube.

Inserito l contenuto nella pagina, dalla linguetta Generale inserire l’indirizzo copiato
da YouTube (cliccando nel sito YouTube il pulsante condividi) nel campo External
Media Source.

Eventualmente modificare altre opzioni proposte o definire un link a una pagina o


contenuto (box: Collegamento).

  62

Capitolo 9

Come riordinare
le pagine e i contenuti

Una caratteristica molto interessante e professionale di TYPO3, In questo capitolo


non disponibile in altri CMS, è di avere a disposizione una potente
Icona e id di contenuto
Clipboard (blocco appunti), molto utile per copiare o spostare i
contenuti da una pagina all’altra del sito. Funzionalità drag and drop

Il blocco appunti è una contenitore nel quale copiare i contenuti Come spostare una pagina

da una o più pagine, per poi visitare una pagina di destinazione nell’albero

nella quale incollare i contenuti. Spostamento di una pagina con


menu contestuale

Icona e id di contenuto Cancellazione di una pagina

Spostare i contenuti tra colonne


Una volta aperti i contenuti di una pagina in C , si noterà che con drag and drop
ogni di contenuto dispone di una icona (1) che identifica il tipo e
che si trova nella barra grigia: Spostare i contenuti con il
wizard

Sparizione dei contenuti appena


spostati

Muovere o copiare un
contenuto da una pagina
all’altra

L’icona varia di aspetto a seconda del tipo di contenuto. Passando


con il puntatore del mouse sopra l’icona otteniamo l’id del
contenuto (2), sopra è 183 che identifica questo contenuto in modo univoco.

La id di contenuto è utile per chiedere assistenza; prendere nota del numero e


comunicarlo all’amministratore.

  63

Funzionalità drag and drop
A partire dalla versione 4.5 TYPO3 CMS implementa alcune funzionalità cosiddette drag
and drop, ovvero trascina e rilascia. Queste tecniche permettono un editing sicuramente
più veloce e saranno illustrate in questo capitolo.

Come spostare una pagina nell’albero


Per spostare una pagina da un punto all’altro dell’albero delle pagine visualizzato
in B si deve procedere come segue:

 aprire le sezioni sulle quali agire nell’albero delle pagine. Infatti lo spostamento
potrebbe riguardare anche il riposizionamento della pagina scelta in un altro
punto dell’albero, ad esempio tra le pagine di una sotto sezione.
 L’apertura delle pagine e delle sottopagine, come già spiegato in precedenza, si
effettua cliccando la freccia nera a sinistra della pagina che fa da indice della
sezione.
 Individuata la pagina da spostare (1) che ha per nome inside TYPO3 (o un’altra
pagina), tenere premuto il tasto sinistro sull’icona a sinistra del nome in (1);
nella figura evidenziata dentro il riquadro in rosso.

 Senza rilasciare il contenuto ora trascinare il mouse verso il basso (o verso


l’alto), nella direzione della nuova locazione.

64

 TYPO3 evidenzia la posizione di destinazione presentando una riga di colore blu
visibile nell’immagine precedente, visibile sotto (2). TYPO3 apre una piccola
finestra che suggerisce l’azione in corso.
 Proseguendo in questo modo il redattore può spostare la pagina scegliendo la
nuova posizione, raggiunta la quale va rilasciato il pulsante.

Poco dopo la pagina in B sarà aggiornata; presenterà la pagina spostata nella


posizione di destinazione.

Spostamento o copia di una pagina tramite il menu contestuale


Questo metodo è utile in luogo del drag and drop già descritto quando l’albero è
complesso e risulta difficile usare il sistema a trascinamento.

Dall’albero delle pagine B scegliere la pagina da spostare; cliccare sopra l’icona per
attivare il menu contestuale e scegliere la voce Copia (per copiarla) oppure Taglia per
spostarla. Individuare la nuova pagina o pagina di sezione. Cliccare con l tasto sinistro
per attivare nuovamente il menu contestuale e scegliere una delle due voci: Incolla
dopo per incollare la pagina nella posizione successiva, oppure incolla dentro per
spostare la pagina all’interno di quella di destinazione.

Cancellazione di una pagina


Trascinare la pagina, come spiegato al paragrafo precedente sopra la barra grigia a piè
di pagina (4) sopra l’area colorata di grigio scuro e rilasciare il pulsante del mouse.

In luogo attivare in C il menu contestuale sulla pagina da cancellare e poi dalla


finestra volante scegliere la voce Azioni pagina e quindi Elimina.

Spostamento di contenuti tra le colonne con drag and drop


A partire versione 6.x di CMS TYPO3 i contenuti possono essere spostati in modalità
drag and drop tra le colonne di una pagina.

Si prosegue scegliendo la pagina nell’albero delle pagine B e poco dopo in C il


redattore vedrà i contenuti già caricati e disposti nelle varie colonne.

L’esempio seguente richiede di aprire la pagina principale del sito dimostrativo.

Spiega come spostare il contenuto che ha per nome Typo3 History (1) dalla colonna a
Destra alla colonna a sinistra Normale, sopra il contenuto già ospitato Typo3 – The
Enterprise CMS, nella posizione di destinazione (2) .

  65

Procedere in questo modo:

 Passare il mouse sopra il contenuto (1)


 Si noterà la barra superiore appartenente al contenuto, di un colore grigio scuro
che presenta strumenti di editing a destra:

 Tenere premuto il pulsante sinistro del mouse sulla barra di colore grigio
scuro
 Per facilitare il riposizionamento si consiglia di cliccare la barra in prossimità
delle icone, nella zona sopra evidenziata con un bordo rosso
 … infatti cliccando altrove sulla barra grigia lo spostamento può risultare a volte
problematico; in questo caso rilasciare il mouse e ripetere le azioni sopra descritte
 si vedrà apparire l’icona dello strumento sposta (3)
 Senza rilasciare il pulsante del mouse trascinare il contenuto verso sinistra
 Trascinare il contenuto in prossimità della zona superiore all’interno della
colonna Normale , nella posizione indicata (2) nella prima figura
 Avvicinandosi al punto di destinazione TYPO3 CMS presenterà una barra color
verde stinto che indica la possibile posizione dove rilasciare l’elemento

  66

 Sovrapponendo il blocco sopra questa barra, il verde diventerà più intenso,
come si vede in questa immagine:

 Il redattore ora deve rilasciare il pulsante del mouse


 il contenuto apparirà spostato nella nuova posizione; nell’esempio in corso
prima del contenuto TYPO3 – The Enterprise…

Spostamento di contenuti tra le colonne con wizard


L’uso drag and drop è molto efficiente ma in alcuni casi è più comodo utilizzare un altro
modo per spostare i contenuti. Nella versione attuale del CMS non è possibile
trascinare un elemento verso l’alto o il basso per ottenere lo scivolamento della videata
nella direzione opposta e quindi riposizionarlo.

In alcuni casi è più comodo ricorrere a una procedura guidata (wizard).

Procedere in questo modo:

 Individuare il contenuto da spostare


 Posizionare il puntatore del mouse sopra l’icona che contraddistingue il
contenuto
 Cliccare sulla icona con il tasto sinistro del mouse

  67

 Dopo qualche istante apparirà il menu contestuale per il contenuto come si vede
qui:

 Individuare la voce (1) More options … (altre opzioni, più opzioni); cliccarla con il
tasto sinistro e attendere qualche istante
 Appare a destra un secondo menu a tendina dal quale scegliere la voce la voce
sposta elemento (move element)
 Il sistema visualizza un Wizard simile a quello già illustrato per l’inserimento di
una nuova pagina.
 Il Wizard mostrerà il contenuto scelto in grassetto, per distinguerlo dagli altri
 Spostare il contenuto cliccando le frecce grigie disponibili tra un contenuto e
l’altro nelle colonne visualizzate.
 Una volta scelta la nuova posizione il wizard si chiude e presenta al redattore la
videata aggiornata con il contenuto spostato.

Sparizione dei contenuti appena spostati


In alcuni casi i contenuti possono essere stati spostati inavvertitamente da una colonna
all’altra oppure tramite il wizard e non venir più visualizzati. Un problema di questo tipo
si può verificare anche a causa della instabilità di alcune estensioni usate per il backend
e di norma vengono risolti nel corso dell’aggiornamento di TYPO3 CMS.

Il redattore può nascondere per errore un contenuto che sembra non essere più
disponibile, ad esempio creando una pagina con due colonne, per poi modificare il
layout e vedere scomparire in quanto ospitato dalla colonna non più utilizzata.

Il redattore in questo caso dovrà ripristinare il precedente layout; spostare il contenuto


con le funzionalità drag and drop già illustrate e al termine riconfigurare il layout
modificando le proprietà di pagina.

  68

Muovere o copiare un contenuto da una pagina all’altra
Con TYPO3 è facile riordinare le pagine e i contenuti, che possono essere copiati o
spostati da una pagina ad un’altra.

Va detto che se il redattore vuole replicare uno specifico contenuto (ad esempio le
ultime 5 news) in tutte le pagine, è meglio evitare di copiarlo, perché esistono delle
tecniche specifiche per farlo (contattare l’amministratore).

Infatti:

 Duplicando il contenuto in più pagine, il redattore faticherà non poco nel tenere
tutti i contenuti (uguali) perfettamente aggiornati
 Nelle modifiche Il redattore corre il rischio di tralasciarne qualcuno, con il
pessimo risultato di pubblicare informazioni differenti in diverse pagine del sito.
Questo genera disordine e mancanza di uniformità nella pubblicazione.

Un esempio da non seguire - il redattore vuole inserire in ogni pagina gli orari di
ricevimento o apertura di una attività o ufficio. Crea un primo contenuto con gli orari poi
lo copia e incolla in tutte le pagine. Alla successiva maodifica si troverà in seria difficoltà
perché dovrà cercare manualmente tutti i contenuti e modificali. Con facilità si
dimenticherà di un contenuto e il visitatore troverà informazioni differenti nel sito,
entrando in confusione, e peggio ancora si rechwerà presso l’ufficio trovandolo chiuso.

In molti casi può essere utile copiare un contenuto semplicemente per poi
modificarlo: pensiamo ad un esempio pratico dove il redattore ha un contenuto che
ospita una tabella complessa, che desidera copiare a nuova pagina per modificarla
inserendo dati differenti dal quella di origine.

Il metodo più semplice per copiare o muovere un contenuto alla volta è il seguente, utile
per copiare un contenuto alla volta:

 Aprire la pagina dalla quale copiare il contenuto


 Individuare la colonna che ospita il contenuto
 Cliccare con il tasto sinistro l’icona del contenuto (vedi all’inizio di questo capitolo
 Dal menu contestuale scegliere la voce copia (per copiarlo) oppure la voce taglia
(per spostarlo)
 Attendere la conclusione delle elaborazioni
 Apparentemente non è accaduto nulla; invece il CMS TYPO3 ha memorizzato il
contenuto da spostare che appare nella Clipboard al termine della pagina.

Ora il contenuto può essere incollato nella medesima o differente pagina.

 Aprire la pagina desiderata e sovrappore il puntatore del mouse alla colonna


che nella quale si vuole incollare il contenuto; si vedranno due icone, premendo

  69

la seconda (sotto all’interno del bordo rosso) il testo sarà incollato nella colonna
scelta.

successivamente il contenuto potrà essere riposizionato con il metodo drag and


drop (trascina e rilascia).

 un altro metodo consiste nel posizionare il puntatore del mouse sull’icona di un


altro contenuto. Supponiamo di voler incollare il contenuto (copiato o da
spostare), dopo un altro contenuto. Si procede posizionando il mouse sulla icona
del contenuto di destinazione, qui contornata di rosso (1):

cliccando il tasto sinistro appare il solito menu a tendina volante dal quale
scegliere la voce Incolla dopo (2).

Desiderando copiare più contenuti in una pagina di destinazione, è possibile visitare


pagine diverse, dalle quali trasferire i contenuti presi qua e là nel blocco appunti.

Riempito il blocco appunti il redattore può spostarsi in una pagina di destinazione nella
quale riversare tutti i contenuti presenti nel blocco appunti.

Per l’uso dettagliato del blocco appunti far riferimento al successivo capitolo Gestione
avanzata dei contenuti.

  70

Capitolo 10

Upload di
documenti e filmati

In questo capitolo vedremo come gestire i documenti (files) In questo capitolo


intendendo qualsiasi documento che l’amministratore consente di
File > Lista File
caricare nel server l’upload (tipicamente: .htm, .docx, .rtf, .txt, .jpg,
.gif, .png, .pdf). Upload di documenti

L’amministratore può aver configurato il sito limitando o La cartella user upload


espandendo i tipi di file che possono essere caricati.
Documenti e relazioni con i
contenuti
Il caricamento, detto upload, consiste nel trasferimento dei
documenti dal PC ad uno spazio assegnato sul server. Cancellazione di documenti
relazionati
Le immagini e altri elementi multimediali da associare o inserire ai
contenuti vanno caricate nel server, tramite il menu File > Lista Metadati e immagini (FAL)
File, sotto illustrato, oppure nel corso di una sessione di editing Di
Gallerie di immagini partendo
un contenuto.
da documenti PDF

File > Lista File Image auto resizer

Per consentire di caricare (upload) i documenti l’amministratore Ridimensionamento in massa di


probabilmente avrà predisposto una serie di cartelle nel server, immagini
che saranno usate per ospitare i documenti e le immagini per il
Gestione di filmati
sito.
Consigli per il trattamento dele
Nel sito dimostrativo queste cartelle sono già presente e la loro immagini
gestione avviene aprendo da A la sezione File (1) e quindi
cliccare all’interno la voce Lista File (2).

71

Poco dopo in B si vedrà l’albero dei files, ovvero una struttura formata da alcune cartelle
disposte ad albero, come nel caso delle pagine.

Nello stato iniziale in C si vedranno gli stessi contenuti pubblicati in B .

Il redattore può continuare, ad esempio visualizzando i contenuti di una cartella, cliccando


in B il titolo di una cartella Immagini (3).

Attenzione si è detto di “premere il titolo della cartella”; infatti se premuta


l’icona a forma di cartella che la precede TYPO3 presenta, come nel caso delle
pagine, un menu contestuale per agire sui documenti in lista.

L’immagine precedente visualizza in B l’albero dei files. Cliccando la cartella images


questa appare evidenziata con uno sfondo bianco e in C si vedrà il contenuto (documenti
di testo e immagini) appartenenti alla cartella stessa.

Le immagini o documenti presenti sono raggruppate all’interno del riquadro (4).

Ogni immagine appare in una riga con un piccola icona che la distingue (5); più a destra (6)
c’è una pulsantiera per la gestione delle proprietà dell’immagine.

  72

Upload di documenti
TYPO3 CMS offre diverse modalità per caricare le immagini nel server; il redattore sceglierà
di volta in volta quella più idonea alle elaborazioni in corso.

METODO CLASSICO - Scelta la cartella nella quale caricare le immagini ed ottenuto l’accesso,
si procede cliccando il pulsante in alto a sinistra, in C qui sotto evidenziato in rowsso

Il pulsante più che è identico a quelli visti fino ad ora, serve per creare un nuovo elemento
all’interno della cartella aperta.

A sinistra il pulsante con la freccia verso l’alto indica la possibilità di tornare al livello
precedente della struttura.

Premuto i pulsante di upload TYPO3 CMS visualizza la consueta maschera di caricamento


nella quale cliccare Browse… per sfogliare le cartelle del PC dalle quali scegliere i files da
trasferire. Aperta la cartella del PC il redattore potrà scegliere con il mouse uno o più
documenti, anche non contigui, tenendo premuto il pulsante Ctrl.

Al termine della selezione e una volta confermata l’azione premendo il pulsante Upload
Files, bisogna attendere i tempi di caricamento e poco dopo i documenti saranno disponibili
nella finestra.

In alternativa, come per il tipo di contenuto Testo con Immagini, già visto, TYPO3 propone
un’area dove trascinare dal PC i files da aggiungere alla cartella:

UPLOAD CON DRAG AND DROP - Un altro metodo per fare l’upload di uno o più documenti
consiste nel ridurre leggermente la videata del navigatore; selezionare uno o più documenti
dalla scrivania (o altra cartella) e trascinarli (funzione drag and drop) sulla finestra del CMS
TYPO3 che si vede qui di seguito, dopo aver aperto la cartella nella quale caricare i
documenti.

  73

Seguita la procedura di cui al paragrafo precedente, qualora annullato l’upload con browse
… si vedrà la finestra più sopra, sulla quale il redattore può trascinare i documenti da
caricare nel server, selezionandoli dal PC.

Una volta rilasciato il pulsante del mouse inizia l’upload di uno o più documenti, dipende da
quanti selezionati, con un indicatore progressivo.

UPLOAD DI DOCUMENTI DA UN TIPO DI CONTENUTO – Con questa modalità il redattore


crea nella pagina un nuovo tipo di contenuto, tipicamente di Immagini o Testo con Immagini
e dal menu Immagini carica le foto o documenti in formato pdf.

L’uso di questa modalità è stato ampiamente descritto nel precedente capitolo Gestione dei
contenuti tipici.

Nota Non è possibile caricare cartelle intere, ovvero trascinare una cartella
(folder) dal PC alla finestra nella (invana) speranza di trasferire anche la struttura
ad albero presente nel computer locale.

La cartella user upload


La cartella fileadmin/user_upload è destinata ad ospitare i documenti caricati con la
modalità “Upload di documenti da un tipo di contenuto” appena vista.

Per la gestione dei files memorizzati in questa cartella far riferimento ai successivi paragrafi
che descrivono le relazioni tra documenti e contenuti. 

Documenti e relazioni con i contenuti


Terminato il caricamento di una documento o immagine, quando il redattore lo associa ad
un contenuto (es. Testo con Immagine), visitando nuovamente la cartella fileadmin troverà
un campo generato automaticamente da CMS TYPO3, ovvero più a destra la colonna Ref.

  74

Ogni documento è collegato (relazionato) a uno o più contenuto; la colonna descrive
quanti contenuti in questo momento lo stanno usando.

Ad esempio un documento in formato pdf potrebbe essere usato da uno, due o o più tipi di
contenuto.

Nella finestra a pagina nuova alcuni documenti dispongo di un numero nella colonna Ref.,
indicantge che l’immagine o documento è usato da un contenuto; di conseguenza non è
cancellabile.

Tentando rimuovere il documento, premendo l’icona a forma di bidone, TYPO3 segnalerà


che il documento è relazionato e non può essere cancellato, con un messaggio:

I documenti relazionati pertanto non possono essere cancellati finchè utilizzati da


qualche qualche contenuto.

Cancellazione di documenti relazionati


Quando un contenuto viene cancellato, l’immagine relazionata (collegata) se non è più
utilizzata da altri contenuti, che fine farà?

L’immagine non sarà mai cancellata se non attraverso una procedura di tipo manuale,
infatti la cancellazione può impedire il recupero del contenuto attraverso il cestino (recycler).

Si raccomanda pertanto di evitare la cancellazione di immagini non più relazionate a


meno di non sapere con esattezza cosa si sta facendo.

  75

Metadati associati alle immagini (FAL)
Terminato l’upload delle immagini nel server, TYPO3 CMS le gestirà non solo come semplici
immagini bensì associando ad ognuna di essere una serie di dati o meglio meta-dati per la
loro gestione, es. la localizzazione, l’associazione a categorie, gli accessi e altro ancora.

Questa tecnica si chama FAL (File Abstraction Layer), tr. Livello di Astrazione dal File.

Sebbene non determinante per la pubblicazione, questa sezione descrive in modo sommario i
metadati; il redattore che sa usare TYPO3 può approfondire da sé nel tempo altre caratteristiche
più avanzate.

Per aggiornare i METADATI da File > Lista File accedere a una cartella, poi in corrispondenza
del documento da modificare, cliccare con il tasto sinistro sull’icona all’inizio della riga:

La modifica dei metadati per il file più sopra (area-contenuti.gif) si ottiene cliccando lo
strumento a forma di matita.

I METADATI – si tratta di numerose informazioni associate alla immagine e utili per


catalogare le immagini, proporre alcune informazioni come la didascalia nel caso l’elemento
venga utilizzato in diversi contesti; inserire la geolocalizzazione, le parole chiave e così via.

Un’altra funzione consiste nella possibilità di generare le varianti della immagine (Variants),
ovvero le immagini più piccole di quella caricata da utilizzare nella visualizzazione del sito
qualora consultato da cellulare/tablet. Le varianti saranno implementate dalla futura
versione 6.2 di TYPO3 CMS.

L’uso delle opzioni è facoltativo, quantunque può portare molti vantaggi.

  76

TYPO3 presenta ora due linguette (Generale e Categorie), con alcune opzioni e una
anteprima della immagine.

Sotto Generale c’è il pulsante Replace File (sostituisci file) che permette di sostituire
l’attuale documento con un altro tramite un nuovo upload.

Tra le cose che si possono fare: limitare la visualizzazione ad uno o più gruppi di utenti di
frontend; associare l’immagine ad alcune categorie, inserire informazioni per la
geolocalizzazione, descrizioni e altro.

Come generare gallerie partendo da documenti PDF


Alla data attuale, novembre 2016, causa un bug in fase di risoluzione questa
funzionalità non è disponibile nel bootstrap 7.x

I file in formato Pdf, piuttosto diffusi in rete, sono dei documenti che accolgono testo e
immagini. Non sono delle immagini.

TYPO3 è in grado di riconoscerli e ne permette l’uso all’interno di un contenuto di tipo Testo


& Immagini.

Editando un documento tipo Testo & Immagini oppure solo Immagini, il redattore avrà la
possibilità di indicare un documento PDF alla stregua di una immagine.

Il risultato sarà che la copertina del documento (ovvero la prima pagina) sarà letta da CMS
TYPO3 che si occuperà di generare l’immagine per il sito.

Questa opzione, veramente interessante e professionale, sgrava il redattore da numerose


e onerose elaborazioni per generare, ad esempio, una galleria di documenti PDF da
destinare allo scaricamento.

Per la visualizzazione di documenti PDF e la loro compilazione il CMS TYPO3 dispone di


numerose estensioni, chiedere all’amministratore.

Image auto resizer


Il server che ospita le immagini non ha una capienza infinita. Tipicamente il servizio che
ospita il sito offre uno spazio totale, da non superare, espresso in MegaBytes (MB) che non
va superato.

Lo spreco di risorse nel server produce un aumento dei costi di hosting e delle utilities di
backup e relativi spazi utilizzati.

I documenti in genere vanno ottimizzati prima o durante le operazioni di upload.

  77

Le immagini digitali, soprattutto quelle derivate da scatti fotografici, occupano spesso molto
spazio e dovrebbero essere preventivamente ridotte perché:

 Una immagine voluminosa non serve a nulla e aumenta i tempi di accesso alla
pagina
 Una immagine scattata con una fotocamera digitale è ad alta risoluzione e non può
essere utilizzata così com’è in un contesto web dove le immagini dovrebbero avere
dimensioni massime di 1024x768 pixel ad una risoluzione di 72 dpi.
 I tempi di caricamento risultano molto lunghi e lo spazio occupato eccessivo
 Viene sprecato lo spazio web nel server con costi aggiuntivi per la gestione e la
manutenzione.

TYPO3 CMS viene impedisce al redattore di caricare immagini troppo grandi in modo nativo
(tramite l’impostazione di alcuni parametri) oppure usando una interessante estensione che
si chiama image auto resizer (auto-ridimensionatore di immagini).

Se il redattore invia immagini ad alta risoluzione, questa estensione le ridimensiona


automaticamente e le riduce a 72dpi. Nonostante tutto però non bisogna abusarne; tutto va
bene per caricare una o due immagini voluminose; infatti oltre questo limite l’upload
richiede tempi biblici.

Desiderando formare una galleria di immagini partendo da una cartella che ne contiene
molte si consiglia di seguire le istruzioni per il ridimensionamento di massa.

Il funzionamento è semplice: l’amministratore imposta un limite massimo di dimensione per


il documento, ad esempio 120KB (KiloBytes) e una dimensione massima per la larghezza, es.
960px e per l’altezza, es. 760 px.

Se il redattore tenta un caricamento di una immagine che supera la dimensione massima


ammessa, TYPO3 applica la ridimensiona misurando l’altezza e la larghezza.

Al termine dell’upload apparirà un messaggio del tipo:

che annuncia l’avvenuto ridimensionamento (nell’es. sopra a 425x600 pixel).

Ridimensionamento in massa di immagini


Per il ridimensionamento in massa delle immagini si consiglia di ricorrere al software
preferito come ad esempio usare Photoshop, Gimp o altri programmi di grafica.

Se però le immagini sono tante è consigliato di cercare in rete un programma da scaricare


che serve per creare gallerie di immagini.

  78

Fra i programmi gratuiti disponibili in internet, si consiglia di ricorrere a JAlbum, che è
disponibile per diverse piattaforme, principalmente Windows e Linux; richiede l’installazione
di Java nel PC Desktop dell’utente.

Il programma è scaricabile collegandosi a:

http://jalbum.net/it/

la pagina e il programma sono in lingua italiana; dovete cercare all’interno del sito la
versione free, scaricarla e installarla nel PC. Per le istruzioni cercare la manualistica in rete o
nel sito, infatti non fanno parte del set del CMS TYPO3.

Una volta installato il programma tramite le funzionalità drag and drop il redattore
ridimensiona tutte le immagini in un colpo solo, secondo i parametri indicati nel menu delle
preferenze di output.

Al termine le immagini ridimensionate sono salvate in una cartella che si chiama My Albums
seguita dal Nome dell’album; entrare nella cartella e cercare una sottocartella dal nome
slides.

Avendo impostato le immagini di destinazione con grandezza massima ad esempio di


720x512px, nella cartella slides il redattore troverà le immagini ridimensionate, da
selezionare per fare l’upload (vedi paragrafo precedente) nelle cartelle del server destinate
ad ospitarle.

Gestione dei filmati


I filmati occupano molto spazio; se venissero caricati nel server lo spazio web assegnato si
esaurirebbe in breve tempo. Per la loro visualizzazione è necessario disporre anche di un
server dedicato per fare streaming che comporta costi elevati.

Inoltre il server che ospita il sito non è un server dedicato allo streaming (molto costoso e
improponibile); se un filmato fosse ugualmente pubblicato il visitatore non lo potrebbe
vedere immediatamente e sarebbe costretto ad attendere un tempo più o meno lungo per
completare lo scaricamento, fino ad infastidirsi.

Si può ricorrere allora al sito www.youtube.com dove pubblicare i filmati, previa


accettazione delle condizioni d’uso del servizio, per poi inserire solamente un link nella pagina
desiderata.

Il filmato pubblicato in youtube acquisisce una maggiore visibilità perché pubblicato in un


canale molto frequentato.

Si procede come segue:

  79

 Pubblicare il filmato in youtube; per farlo bisogna disporre di un codice di accesso e
fare login
 In assenza di codice seguire la procedura di registrazione di youtube
 Pubblicato il filmato visualizzarlo collegandosi alla pagina di youtube
 Cliccare, sotto il filmato il link Condividi
 Si apre un blocco contenente il link completo, qualcosa del tipo:
http://youtu.be/kQRNvFJ4N0I
 Copiare questo link selezionandolo e premendo i tasti Ctrl C
 Fare login in TYPO3 CMS come redattore
 Individuata la pagina e la colonna nella quale inserire il filmato, con gli strumenti giù
conosciuti creare un nuovo elemento di contenuto di tipo Bootstrap Package
 Seguire le istruzioni per l’uso e gestione del tipo di contenuto External Media al
precedente capitolo che descrive i contenuti di Bootstrap.

Consigli per il trattamento delle immagini


Si consiglia di:

 evitare l’inserimento di troppe immagini nella pagina, che appare pesante, lunga da
scaricare; l’effetto percepito è caotico
 generare sempre dei thumbnail (piccole anteprime): TYPO3 CMS li genera
automaticamente
 ottimizzare le immagini prima di passarle al server
 adoperare le immagini alla risoluzione idonea
 se il visitatore deve vedere per bene l’immagine e apprezzarne i dettagli è inevitabile
caricarla ad una risoluzione elevata che comporta però tempi di accesso più lunghi e
maggiore uso dello spazio web
 verificare se il visitatore vede perbene l’immagine. Se vogliamo che si legga del testo
inserito nell’immagine, oltre un certo rimpicciolimento il testo non sarà disponibile
 se usate in un animatore (slider) o carosello, è preferibile utilizzare immagini
identiche in altezza e larghezza nella dimensione richiesta dall’animatore .
 Alcuni caroselli non ridimensionano automaticamente le immagini.
 in alcuni casi è preferibile usare delle immagini in bianco e nero
 salvo le gallerie fini a se stesse, usare una sola immagine nel testo, dotata di
didascalia per far capire di cosa si tratta e richiamata dal testo stesso.

  80

Capitolo 11

Gestione avanzata
dei contenuti

La lettura di questo capitolo è riservata a chi ha già seguito gli In questo capitolo
esempi illustrati nei capitoli precedenti.
Definizione di record

Fino ad ora è stato spiegato come gestire una pagina, creare le Memorizzazione dei records
colonne e inserire i contenuti. La gestione avanzata spiega invece
come creare e gestire i records. Visualizzazione Web > Lista

Il blocco appunti (clipboard)


Prima di proseguire il redattore dovrebbe accertarsi che a piè di
pagina in C le opzioni qui visualizzate siano tutte selezionate: Spostamento di elementi da una
pagina all’altra

Come muovere o copiare gli


elementi nella clipboard

Azioni sugli elementi della


Clipboard

Definizione di record
In informatica il termine record (in italiano anche registrazione) identifica generalmente
un oggetto di una banca dati che è strutturata in dati compositi. Un record è costituito
da un insieme di campi o elementi, ciascuno dei quali possiede nome e tipo di dato
propri.

La banca dati o meglio database raccoglie tutti i record disposti in modo ordinato
all’interno di alcune tabelle, diciamo simili a quelle gestite tramite Microsoft Excel.

Per rendere più chiara la spiegazione ed evitare ulteriori, inutili tecnicismi, qui viene
proposto un esempio.

Un semplice indirizzario di persone è costituito da singoli campi (elementi) come: Nome,


Cognome, data di nascita, indirizzo web, email.

81

Ognuno dei campi ha un nome, ad esempio il campo data di nascita potrebbe chiamarsi
data_di_nascita ed essere usato dal database per accogliere per la data di nascita di
una certa persona, scritta in un determinato formato (es. gg/mm/aaaa, ovvero
12/05/1964).

L’insieme di tutti i campi per descrivere una determinata persona si chiama record.

TYPO3 CMS negli aiuti online spesso usa il termine record per identificare i contenuti o le
pagine. L’uso del termine record in questo caso non è inappropriato perché anche le
pagine e i contenuti sono memorizzati nel database sotto forma di record.

Per ulteriori dettagli vedasi:

http://it.wikipedia.org/wiki/Record_(informatica)

Memorizzazione dei records


TYPO3 CMS memorizza i record tipicamente all’interno delle cartelle di sistema
(sysfolder) che presentano un aspetto diverso da quello delle pagine e sono distinte
normalmente da una icona come nella seguente immagine alla voce NEWS:

Per specificare meglio il contenuto della cartella, TYPO3 CMS può presentare dei
sysfolder con un differente aspetto, in modo che il redattore a “colpo d’occhio” possa
identificare il contenuto memorizzato, come qui illustrato:

Nella figura sopra si vede chiaramente che c’è una cartella principale (sysfolder) che
accoglie al suo interno altre cartelle: News (colore blu), Users and groups (utenti e
gruppi), Content elements (elementi di contenuto, Categories (categorie) e Media.

  82

Il redattore se vuole può inserire i records anche all’interno di normali pagine standard,
ma questa opzione è sconsigliata perché, se il sito è complesso e le pagine sono molte, è
difficile poi individuarli.

Visualizzazione Web > Lista


Per aprire qualsiasi cartella e visualizzare i record contenuti, il redattore dovrà scegliere
in A dal menu Web la voce Lista, che non va confusa da quella simile per gestire i
files (File > Lista Files).

Più a destra in B si vedrà apparire l’albero delle pagine e ancor più a destra
in C saranno elencati i records appartenenti alla cartella scelta.

Il blocco appunti (clipboard)


Il blocco appunti non esiste in molti altri CMS ed è una delle caratteristiche più avanzate
di TYPO3 CMS. Detto anche clipboard, il blocco va visto come una sorta di contenitore
destinato ad essere riempito con qualsiasi tipo di contenuto (singoli contenuti, pagine,
records, ecc.) che al termine va copiato o spostato in una determinata pagina o cartella
di destinazione.

Il redattore, con estrema facilità, potrà aprire una o più pagine dalle quali copiare i
contenuti desiderati nella clipboard per poi visitare la pagina di destinazione e lì
svuotare tutto il contenuto del blocco appunti.

L’azione dello svuotamento produce uno spostamento oppure una copia dei contenuti
di origine in una nuova locazione, pagina o cartella di sistema.

Il blocco appunti è disponibile a piè pagina nella sezione C quando il redattore


visualizza contenuti di pagina (Web > pagina) oppure elementi di record (Web > Lista).

Affinchè la Clipboard sia visibile è indispensabile che l’opzione Mostra clipboard sia
contrassegnata:

  83

Nella videata più sopra la clipboard appare con il menu a tendina dotato della voce
Copia elementi; questa funzione è utile per spostare gli elementi. Desiderando invece
muoverli da questo menu va scelta la voce Muovi elementi.

Si nota un elemento già presente nel blocco, che è un contenuto di tipo testo avente
per nome ‘9 settembre – Tavoli di lavoro’.

Il menu successivo [menu] permette di agire esclusivamente su gli elementi presenti


nella clipboard, per modificarli, eliminarli o esportarli.

Seguono alcuni esempi per spostare o copiare elementi da una pagina all’altra.

Come spostare records da una pagina ad un’altra


ESEMPIO 1. – Copia di un solo elemento

Nell’esempio la pagina scelta da Web > Lista, in B cliccando una ipotetica pagina si
vedranno i contenuti della stessa, disposti in alcune tabelle, che variano da pagina a
pagina. Troveremo di solito queste due tabelle:

  84

La prima, sopra raggruppa in un elenco le sottopagine della pagina attualmente scelta e
in uso, disposte una per riga.

La seguente raccoglie tutti i contenuti di pagina, questa volta disposti non per colonne
ma uno per riga:

Scorrendo la pulsantiera a destra di ogni elemento si nota il pulsante con tre puntini
[…] cliccando il quale si visualizzeranno ulteriori pulsanti destinati a specifiche azioni:

Nota se a piè di pagina il box con la voce vista estesa è selezionato allora la
pulsantiera completa sarà visualizzata per tutti i records in lista.

Nell’ordine, da destra a sinistra, l’azione per ogni pulsante (vedi immagine qui sopra) è
la seguente:

occhio – visualizza record


matita – modifica il record
abilita/disabilita – nasconde o visualizza il record per la pubblicazione
bidone – cancella il record
tre puntini – espande o riduce la pulsantiera
i – informazioni
riposiziona (mirino)
cronologia delle modifiche
+ aggiungi record
freccia verso l’alto/basso - sposta il record rispetto il successivo o precedente

più a destra si vede una pulsantiera separata:

  85

che presenta tre icone:

incolla dopo questo record


copia il record
taglia il record

utillizzando questi stati si possono copiare / tagliare (quindi spostare) records nella
stessa pagina o in una altra pagina.

Esempio

 Scelgo una pagina


 passo in modalità Web > Lista
 identifico il record che voglio spostare in un'altra tabella di pagina differente
 clicco il pulsante taglia
 dall’albero delle pagine scelgo un’altra pagina
 vedo in in C la stessa tabella
 scelgo il punto (record) dove incollare il record
 clicco il pulsante incolla del record

Nota a spostamento o copia avvenuta di un contenuto sarà necessario


controllare tramite Web > Pagina la colonna di destinazione ed
eventualmente riposizionarlo trascinandolo (drag and drop).

ESEMPIO 2. – Copia o spostamento di più elementi

Desiderando spostare o copiare più elementi si procede come per l’Esempio 1, ma


prima di fare qualsiasi scelta bisogna scegliere la Clipboard #1 cliccando la presente
nella Clipboard stessa:

  86

La pagina in C si aggiorna e presenta ora delle nuove icone, mentre la Clipboard #1
non presenta alcun elemento o messaggio indicando che è vuota.

La tabella Contenuto di pagina si presenta così:

Si nota subito una pulsantiera (1) in cima alla nuova colonna di selezione, dotata di
alcune icone, da sinistra a destra:

Trasferisci – muove i record selezionati nella clipboard correntemente aperta.


Modifica – modifica i record selezionati
Bidone – rimuove i record selezionati
Seleziona/Deseleziona tutti i record in lista

Il redattore può decidere di selezionare tutti i record oppure solo quelli desiderati
cliccando per ognuno di essi il riquadro (2) ; ogni record selezionato presenterà un
baffetto all’interno del box di selezione.

  87

Una volta selezionati gli elementi, che si presenteranno dotati del solito baffetto, il
redattore prosegue tramite la pulsantiera nella scelta della azione desiderata, cliccando
una delle altre icone (vedi spiegazione precedente).

Copia o Muovi gli elementi: le differenze

Se la clipboard attiva presenta il pulsante Muovi elementi, vedi l’immagine qui sotto:

Significa che gli elementi selezionati e trasferiti nella clipboard (premendo il puslante di
trasferimento) saranno tagliati dalla locazione originaria e spostati nella locazione di
destinazione. Questa azione è utile per muovere ad es. contenuti da una pagina ad
un’altra.

Per modificare il comportamento il redattore deve clicca il pulsante Muovi elementi,


vedi sopra, e scegliere la voce Copia elementi dal menu a tendina. In questo caso gli
elementi saranno copiati nella clipboard. Incollandoli in altra destinazione, non quelli
copiati non saranno mossi o cancellati e resteranno nella locazione originaria.

Consiglio tenere sempre d’occhio il menu (1); come si nota chiaramente


nella immagine precedente questo presenta la voce Muovi elementi. TYPO3
infatti “pensa” che l’azione più logica sia quella di spostare gli elementi
pertanto presenta questa voce per default.

  88

Come muovere o copiare gli elementi nella Clipboard
Per trasferire gli elementi, procedere in questo modo:

1. selezionare gli elementi da trasferire (1) per poi copiare o muovere

2. controllare la voce della clipboard (Muovi o copia)


3. premere il pulsante (2) nella pulsantiera in alto
4. attendere il trasferimento

TYPO3 visualizza la clipboard con gli elementi caricati:

  89

Azioni sugli elementi della Clipboard
Trasferiti i record nella Clipboard TYPO3 permette di scegliere, tramite il [menu] (3) una
azione da applicare a tutti gli oggetti in lista.

Le azioni disponibili sono:

Esporta – genera un documento con i contenuti, da scaricare e ricaricare eventualmente


in un altro sito; azione per utenti esperti qui non illustrata.

Modifica – apre la maschera del contenuto e permette al redattore di modificarlo

Elimina – cancella i contenuti in lista sia dalla clipboard (!) che dalla tabella della pagina
di origine (!).

Desiderando cancellare tutta la clipboard, il redattore può premere il pulsante rosso (2);
per effettuare cancellazione di singoli elementi o vederne le proprietà, la clipboard
presenta, per ogni elemento, due pulsanti (bidone per cancellare, I per le informazioni).

  90

Capitolo 12

Le funzioni per cercare nel sito

Questo capitolo spiega come cercare una stringa, pagina o


In questo capitolo
contenuto utilizzando vari metodi offerti dal CMS TYPO3.
Cercare una stringa nella pagina
Vedremo come cercare: e sottopagine

 una stringa nella pagina aperta e/o nelle sottopagine Cercare una stringa nell’albero
 una stringa nell’albero delle pagine (filtro) delle pagine (filtro)
 una pagina con il pid
Cercare una pagina con il pid
 una stringa in tutto il sito
Cercare una stringa in tutto il
sito
Cercare una stringa nella pagina e sottopagine
Per limitare la ricerca di una determinata parola (stringa) all’interno di una pagina, tra
contenuti e records di qualsiasi tipo, il redattore deve selezionare in A Web > Pagina
oppure Web > Lista e in B aprire l’albero delle pagine, quindi cliccare la pagina
desiderata e in C all’inizio della pagina troverà una pulsantiera nella quale premere lo
strumento (1) a forma di lente:

Premuta l’icona appare la barra di ricerca (2). Per cercare una o più stringhe il
redattore deve riempire il campo Cerca Stringa (3) e dal menu a tendina posto a destra
scegliere i livelli desiderati per la ricerca.

Lasciando la voce di menu Questa pagina la ricerca avrà effetto solo sulla pagina
corrente; diversamente scegliendo 1 livello giù la ricerca sarà effettuata sulla pagina
corrente e sulle sue sottopagine; 2 livelli giù sulle sottopagine delle sottopagine e così
via fino al quarto livello.

Mostra records è una casella da riempire facoltativamente con un valore numerico per
limitare la ricerca ad esempio inserendo 20 TYPO3 CMS restituirà al massimo di 20
risultati.

91

Inserite le parole da cercare va premuto il pulsante Cerca per avviare la ricerca.

Se l’accesso è avvenuto tramite Web > Pagina TYPO3 CMS restituisce in ordine i
contenuti trovati che contengono la stringa indicata, come nel normale editing di una
pagina. Il redattore potrà editarli uno ad uno e salvarli.

Se l’accesso è avvenuto tramite Web > Lista TYPO3 CMS restituisce in ordine i contenuti
disposti però in una o più tabelle; il redattore potrà scegliere il record da modificare
cliccando il pulsante a forma di matita.

I risultati saranno presentati e dotati di una pulsantiera, a sua volta costituita da icone
standard per l’editing, modifica, cancellazione e altre azioni, come ad esempio navigare
all’interno del set di records individuati e così via.

Come cercare una stringa nell’albero delle pagine (filtro)


Questo metodo ricerca permette di usare un filtro (icona a forma di imbuto) per trovare
una determinata pagina nell’albero delle pagine in B che corrisponda ad una certa
stringa inserita (o parte di essa) indicata dal redattore oppure che coincide con il pid di
pagina.

La ricerca sarà lanciata nella pagina selezionata e nelle sue sotto pagine in B .

Per cercare un determinata stringa si procede cliccando l’icona a forma di imbuto (1),
vedi immagine precedente; TYPO3 CMS visualizza un campo di input nel quale inserire la
parola da cercare (2).

Una volta inserita e senza premere alcun pulsante, dopo qualche attimo di pausa TYPO3
CMS presenta i risultati della ricerca, isolando e mostrando nell’albero delle pagine tutte
i percorsi delle pagine che, nell’esempio seguente, contengono la stringa inside, inserita
in (2) – la stringa trovata sarà visualizzata su sfondo in arancio.

Tutte le altre pagine non saranno visualizzate; l’albero conterrà solo i risultati della
ricerca.

Per ricordare al redattore che nell’albero è attivo un filtro, TYPO3 presenta un messaggio
(1) su fondo azzurro.

  92

Nell’esempio seguente TYPO3 ha cercato la stringa Image nell’albero delle pagine

TYPO3 CMS presenta il percorso (pagine e sottopagine) visualizzando le pagine trovate


(2).

Qualora trovate più pagine rispondenti criteri di ricerca o parte di essi, TYPO3 CMS
mostrerà tutti i rami d’albero aperti fino alla pagina trovata.

Il redattore per chiudere il filtro dovrà premere il pulsante a forma di X (1).

Cercare una pagina con il pid (filtro)


In modo analogo, invece di inserire una determinata stringa in (2), se inserito il pid di
pagina (pid) dopo qualche istante TYPO3 mostrerà la pagina che lo identifica.

Cercare stringhe in tutto il sito


In alto a destra, sopra la sezione in C si notano alcuni pulsanti e un campo di input, qui
sotto evidenziato in rosso, utile per ordinare una ricerca:

Per proseguire bisogna riempire il campo contraddistinto da una lente che ospita la
scritta “Cerca”. Cliccare all’interno e scrivere le stringhe da cercare.

  93

Nell’esempio seguente mentre il redattore sta inserendo la stringa, TYPO3 CMS
visualizza dinamicamente in una finestra sottostante, i primi risultati trovati, un po’ come
avviene lanciando una ricerca nel noto motore di Google:

I risultati sono ospitati all’interno di una piccola finestra (sopra se ne vedono alcuni in
(1) ) che può essere visitata trascinando la barra di scorrimento verticale più a destra,
come nelle normali finestre del navigatore.

Il sistema permette di cliccare il contenuto che si aprirà in C per la modifica, oppure di


usare la scrollbar per scegliere un altro risultato, oppure e meglio ancora cliccare il
pulsante Mostra Tutto (2) per ottenere sempre in C l’elenco di tutti i risultati da
modificare, suddivisi nelle varie tabelle come in modalità Web > Lista.

Per chiudere la finestra premere il pulsante a forma di X nell’angolo in alto a destra.

  94

Capitolo 13

Gestione delle aree riservate


e accesso degli utenti

Questo capitolo spiega come creare gli utenti di frontend e In questo capitolo
associarli ad uno o più gruppi; infine illustra come proteggere gli
La cartella Utenti e Gruppi
elementi pubblicati: pagine, contenuti e records.
Protezione di una pagina o
di un contenuto
La cartella Utenti e Gruppi Gestione degli utenti di
frontend
Nell’esempio seguente il redattore dovrà aprire la cartella Users
and groups / Utenti e Gruppi, la quale è destinata per l’appunto a Pagina di frontend per il
contenere i dati degli utenti visitatori di frontend. login

La cartella è contraddistinta da una icona di un omino (vedi capitolo precedente). Questa


icona, se il lettore ha prestato attenzione, è la stessa che identifica una pagina o un
contenuto protetto. L’icona che identifica una pagina protetta (ad es. la pagina standard)
appare anch’essa dotata di un omino sovrapposto.

Si procede per prima cosa attivando in A la visualizzazione Web > Lista. Con gli
stumenti di ricerca a disposizione oppure con una ricerca manuale va individuata
nell’albero B la locazione della cartella Utenti e Gruppi / Users and Groups. Cliccare il
nome della cartella Utenti e Gruppi / Users and Groups.

Il nome della cartella che ospita gli UTENTI DI FRONTEND può variare da sito a sito; di
norma è come la seguente (in caso di dubbio rivolgersi all’amministratore di sistema):

95

Utenti e Gruppi accoglie all’interno tutti i dati degli utenti (di norma visitatori) che si sono
registrati al sito attraverso procedure automatiche oppure che sono stati caricati
manualmente o importati dall’amministratore o redattore incaricato.

L’iscrizione automatica al sito non è un modulo già disponibile nel CMS TYPO3; è un
programma (plugin) che va installato separatamente.

Chiedere l’eventuale installazione e configuirazione all’amministratore.

Nell’esempio seguente i records sono disposti in due differenti tabelle:

La prima tabella si chiama Gruppo Utenti web (1) contiene un elenco dei gruppi
disponibili; nell’immagine sopra l’unico gruppo è visitatori registrati.

La seconda tabella ha per nome Utente Web (2) ed è destinata ad ospitare tutti i dati di
un singolo utente (nome, cognome, indirizzo, email, password di accesso e così via).

La tabella più sopra visualizza l’utente: alex

Alla stessa stregua dei normali elementi di contenuto, i record delle due tabelle possono
subire modifiche (premendo lo strumento a forma di matita) oppure nuove creazioni
premendo i pulsanti standard già visti in precedenza.

Il redattore si sarà chiesto perché esistono due tabelle e la risposta è semplice: ognuno
degli Utenti Web deve appartenere almeno ad uno specifico gruppo elencato nell’altra
tabella. Può essere iscritto indifferentemente a qualsiasi altro gruppo in lista.

Si dice allora che le due tabelle sono relazionate (ovvero: logicamente collegate).

Il redattore può, seguendo semplici procedure, limitare l’accesso ad una o più pagine,
contenuti, ecc. ad uno o più Gruppi di Utenti Web.

  96

In sintesi qualsiasi record (contenuto, pagina, news e altro) può essere
associato ad un determinato gruppo di utenti di frontend. In tal modo solo il
gruppo relazionato al contenuto potrà visualizzare tale record, previo login.

Protezione di una pagina o di un contenuto


La pagina, i contenuti e addirittura altri records normalmente presentano in fase di editing
una linguetta (tab) denominata Accesso che serve per determinare quale gruppo di
utenti di frontend è autorizzato a vederla.

Si possono pertanto p

Nel caso di protezione di pagine, vanno chiariti alcuni aspetti:

 se una pagina è protetta, il visitatore non la vedrà tra i menu del sito
 il visitatore potrà vedere la pagina elencata tra i menu solo dopo aver fatto login
 il redattore può configurare una pagina protetta, ad es. che indentifica una certa
sezione, e far sì che tutte le pagine sottostanti siano protette con le medesime
opzioni.
 il redattore dovrà preferibilmente editare una pagina di login che contiene un
elenco di tutte le risorse (link a pagine e altro) destinate al gruppo dell’utente che
fa login.

  97

L’immagine sopra descrive la linguetta Accesso (access) disponibile editando un
contenuto di tipo Testo & Immagini. E’ presente in tutti i contenuti e pagine del CMS
TYP3.

Presenta due sezioni:

(1) Visibilità - per nascondere il contenuto ed elencarlo nei link di sezione, qui non
spiegati

(2) L’accesso temporizzato in (2.a) e un riquadro (2.b) che presenta alcune voci:

 Nascondi al login – Se un utente di frontend ha fatto login esso non sarà più in
grado di vedere questo contenuto
 Mostra in caso di login – Il contenuto sarà visualizzato da tutti gli utenti che si
sono in qualche modo autenticati nel sito, indipendentemente dalla loro
appartenenza o meno ad un dato Gruppo
 Più sotto ci sono elencati i Gruppi degli Utenti che abbiamo nel paragrafo
precedente.

Per autorizzare l’accesso al singolo contenuto il redattore dovrà scegliere una delle due
voci in lista (prima o seconda) oppure cliccare uno o più gruppi autorizzati a vedere il
contenuto. Effettuata la scelta i nomi dei gruppi o le opzioni appariranno nel riquadro a
sinistra (3).

Nell’esempio il contenuto sarà visibile solo al gruppo visitatori registrati.

Gestione di gruppi e utenti di frontend


Per evitare di ripetere le procedure già descritte in precedenza, le istruzioni per la
gestione degli utenti e gruppi qui saranno ridotte all’osso; infatti la procedura è semplice
ed intuitiva e il redattore dovrà solamente sfogliare le linguette nelle varie maschere di
caricamento.

Per creare, cancellare o modificare un utente bisogna sempre far riferimento alla
cartella contraddistinta da una icona a forma di omino e seguire le istruzioni già fornite in
questo capitolo.

Il redattore potrà creare un numero illimitato di gruppi e questi gruppi a loro volta
possono comprendere altri gruppi; questa funzionalità è molto utile per determinare in
modo preciso gli accessi.

Siccome un utente non può esistere se non associato ad uno o più gruppi, il
redattore deve prima creare un gruppo e solo successivamente potrà un nuovo
utente.

  98

Una volta creato il gruppo il redattore procede generando uno o più utenti da associare
al gruppo o ai gruppi desiderati, oppure a quelli che includono altri sottogruppi.

Il gruppo sarà autorizzato ad accedere a pagine o a singoli contenuti di pagina secondo lo


schema delle autorizzazioni disponibili (nelle pagine e contenuti) dalla linguetta accesso.

Un utente potrà essere associato anche a più gruppi, dilatando o riducendone i privilegi di
accesso ai dati pubblicati in forma riservata nel sito.

Ogni utente o gruppo possono essere a loro volta temporizzati, disponendo di un ciclo di
vita limitato (inizio e fine) oppure, se questi campi non sono stati compilati in fase di
creazione, la loro vita sarà illimitata.

Pagina di frontend per effettuare il login


L’utente registrato deve collegarsi alla pagina di autenticazione, nella quale inserire lo
username e la password (credenziali). Una volta autenticato navigherà nel sito e potrà
accedere alle risorse ad esso riservate.

Il plugin che gestisce il login / logout di norma viene predisposto dall’amministratore,


che può attivare o disattivare alcune funzionalità, come ad esempio il login permanente o
l’invio automatico della password in caso di dimenticanza.

  99

Glossario
Accordion Core
è un widget che permette di visualizzare contenuti Si intende tipicamente il "nucleo elaborativo" di
che possono essere espansi e collassati in un microprocessore. Nel caso del CMS TYPO3 il
verticale. Tipicamente c’è un pulsante per ogni termine sta ad indicare tutti quei componenti,
contenuto, cliccando il quale il testo sottostante costituiti da programmi, librerie, ecc. che stanno
apparirà, mentre gli altri testi nella pagina saranno alla base del CMS. Lo sviluppo di questi
collassati. componenti è affidato strettam,ente a
programmatori qualificati e appartenenti al team
di TYPO3. Tutti gli altri componenti esterni al CMS
Applet (terze parti) sono sviluppati da normali
Piccolo programma incluso in una pagina web o programmatori o aziende.
richiamato dal suo interno.

CSS, vedi Style


Backend
Ambiente di lavoro riservato al redattore e
amministratori. TYPO3 CMS distingue nettamente Database
tra Backend e Frontend (vedi) in modo da evitare Detto anche base di dati, è costituito da un insieme
problemi di sicurezza che possono derivare da un organizzato di dati, suddivisi in tabelle e records;
ambiente misto, tipico di altri CMS. ogni record contiene alcuni campi.

Backup Default
Elaborazione che consiste nell’uso di una Si dice di valore predefinito o meglio preimpostato
procedura con la quale il redattore crea uno o più per poter configurare un elemento. Ad esempio
file che contengono una copia compressa una immagine trattata da CMS avrà un output di
dell’intero sito. 720px per default a meno che il redattore non opti
per un valore differente.

Banca dati, vedi Database


Download
Bootstrap Elaborazione con la quale un visitatore trasferisca
Detto anche twitter bootstrap, è uno dei framework (scarica) un file dal Server al Client.
più usati in rete e di fatto costituisce uno standard
per lo sviluppo dei siti in rete (quindi del codice
Drag and drop
HTML, CSS3 e modelli in uso).
Trascina e rilascia; consiste in una tecnica che
permette all’utente di “afferrare” un elemento a
Browser o navigatore video premendo il tasto del mouse, per trascinarlo
Programma di navigazione come Microsoft sullo schermo e rilasciarlo in un altro punto.
Internet Explorer, Mozilla, Chrome e altri.
Editing
Client da un redattore o da un utente di frontend, per la
Il computer dell’utente che si collega ad un server modifica di contenuti (pagine, records, contenuti
per ottenere l’accesso a dati o pagine web, viene vari).
identificato come Client.
Estensione di file
Compressione Suffisso che viene applicato al nome di un file, per
Elaborazione basata su alcune tecniche per identificarne il tipo. Per esempio l’estensione .doc
ridurre le dimensione di un documento o identifica un documento di Microsoft Word, .xls un
immagine per risparmiare spazio o tempo di foglio di Excel, ecc.
accesso dalla rete.

100

Estensione di TYPO3 Header
Programma aggiuntivo progettato da terzi, che Tr. Testata o informazione di testa. Si definisce la
serve per accrescere le potenzialità del core di parte superiore del sito che di solito contiene il
TYPO3, come ad es. un programma specifico per logo, una immagine e la pulsantiera.
fare il backup.

Heading
FAL (File Abstraction Layer) Tr. Titoli di testa. L’editor RTE di TYOP3
Livello di astrazione dal file; è costituito da un normalmente offre fino a 5 titoli di testa, da
insieme di tecniche per la gestione di un file che heading 1, il più grande, a heading 5, il più piccolo.
non prevedono solo la gestione fisica dello stesso,
bensì l’uso di metainformazioni per catalogarlo,
determinare gli accessi, la geolocalizzazione e così Layout
via. L’aspetto di un elemento di contenuto. Il redattore
potrà scegliere un layout di pagina per disporre le
informazioni in un modo differente, oppure un
Flusso di lavoro (Workflow) layout di contenuto ed infine anche un layout
Insieme di procedure e programmi per la gestione applicato a un singolo campo (ad es. Titolo).
di un processo produttivo (es. redazionale) svolto
in collaborazione (es. più redattori) finalizzato a
coordinare il gruppo di lavoro. Meta-tag
I meta tag sono metadati presenti nel linguaggio
HTML utilizzati per fornire informazioni sulle
Formato di immagine pagine agli utenti o ai motori di ricerca. Ad
Identifica il tipo di immagine ed è costituito da esempio le parole chiave inserite dal redattore per
alcuni standard che descrivono la stessa in termini l’attività SEO, valutate dal motore di ricerca, sono
di dati digitali organizzati in un certo modo. Tra i dei meta-tag.
formati più comuni JPG, GIF, TIFF, ecc.

Jpg, Jpeg
Framework
E’ un formato di immagine che prevede l’uso di una
framework è una struttura logica di supporto su
tavolozza molto estesa di colori (oltre 16 milioni) e
cui un software può essere progettato e realizzato,
che consente anche la compressione della
spesso facilitandone lo sviluppo da parte del
immagine, così da ottimizzare i tempi di accesso
programmatore. Alla base di un framework c'è
durante la visita al sito.
sempre una serie di librerie di codice

Pid / Id
Frontend
E’ un numero univoco che serve per identificare
Nel CMS TYPO3 si intende l’ambiente riservato ai
una pagina in TYPO3 oppure un contenuto.
visitatori, autenticati o meno, che sono detti anche
visitatori o utenti di frontend. Questii posso
accedere a contenuti pubblici o ad essi riservati; Pixel
dipende dal gruppo al quale sono associati. Con questo termine si identifica ciascuno degli
elementi puntiformi che compongono la
rappresentazione di una immagine raster digitale,
Gif, GIF
ad esempio su un dispositivo di visualizzazione o
E’ un formato di immagine che prevede l’uso di una
nella memoria di un computer.
tavolozza limitata di colori (massimo 256).

Plugin
Grid System
Il termine indica un programma non autonomo
Tr. Sistema a griglia; insieme di tecniche per la
che interagisce con un altro programma per
costruzione di una pagina web con aspetto
ampliarne le funzioni. Ad esempio, il programma
“tipografico” dove lo spazio disponibile viene
per la gestione delle news è costituito da un
suddiviso in dodicesimi o sedicesimi. Permette
codice di programma che che a sua volta usa il
una disposizione dei contenuti più ordinata e di
codice del core di TYPO3 (software principale).
tipo proporzionale, migliorando l’aspetto grafico
complessivo del sito.
Pop-up
Il termine identifica generalmente degli elementi
ch––e nel corso della navigazione servono per

  101

attirare l’attenzione del visitatore. Più Stile (Style)
propriamente per finestra di pop-up si intende una Definizione contenuta nei fogli di stile (CSS). Lo
finestra separata aperta da CMS TYPO3 dalla stile ad esempio definisce: lo sfondo della pagina;
quale effettuare scelte. la grandezza e il tipo di carattere usato in un
paragrafo, heading, ecc.
Record
Un record è costituito da un insieme di campi che Sys Folder (Cartella di sistema)
descrivono un singolo oggetto. Ad es. un record E’ un elemento che fa da contenitore per
anagrafico è costituito dai campi: nome, cognome, documenti di vario tipo, pagine, files, ecc.
data di nascita, residenza, ecc.

Tab (linguetta)
RTE editor (Rich Text Editor) A video è costituito da un pulsante cliccando il
E’ l’editor di default utilizzato con il CMS TYPO3, quale è possibile scambiare il contenuto
costituito da un riquadro o meglio campo di input sottostante. Permette di gestire pagine piuttosto
di tipo area di testo, nel quale digitare il testo che voluminose che richiederebbero altrimenti un
può essere formattato usando delle icone. lungo tipo di ricerca visiva per individuare campi
ed elementi da compilare.
Screenshot
Fotografia dello schermo; è una copia “istantanea” Tag
dello schermo, salvata in formato digitale per Elemento del linguaggio HTLM per la creazione di
essere inviata ad altri, di solito per ottenere pagine Web che definisce l'inizio o la fine di un
assistenza. comando.

Scrollbar Upload
Barra di scorrimento che può essere verticale o Elaborazione con la quale un visitatore trasferisce
orizzontale, usata per muoversi all’interno di una un file dal Client al Server.
pagina o contenuto che, a causa delle dimensioni,
non può apparire in toto sullo schermo.
Twitter Bootstrap – vedi Bootstrap
SEO (Search Engine Optimization) Widget
Tecniche ed elaborazioni per posizionare
E’ un componente grafico di una interfaccia
correttamente il sito nei motori di ricerca.
utente di un programma, che ha lo scopo di
facilitare l’utente nella interazione con il
Sessione, Session programma stesso: può essere una vera e propria
Identifica tutte le elaborazioni e dati memorizzati mini applicazione (cfr. applet).
riferiti ad un utente che si è collegato a un sito e
di solito si è anche autenticato. Ad esempio il
Wizard, vedi procedura guidata
redattore si collega al sito, si autentica e quindi
apre una sessione di backend.
Workflow, vedi flusso di lavoro

Setup Wysiwyg (What you see is what you get)


Con questo termine si indicano di solito tutti i Tradotto: quello che vedì è ciò che ottieni.
parametri di configurazione di un dato elemento o Modalità di lavoro che permette all’utente di
periferica. cliccare gli elementi a video e in modo intuitivo e
di modificarli o spostarli.
Server
E’ un computer allacciato alla rete internet, capace
di fornire più svariati servizi, come ad esempio
restituire le pagine web su richiesta del visitatore,
permettere o meno accessi a dati e aree, ecc. Il
computer dell’utente che si collega al server viene
identificato come Client.

  102