Modifica e creazione di pagine e contenuti

Modifica della pagina

Noi sappiamo che le pagine memorizzano il loro contenuto visibile negli elementi di contenuto di pagina. Dunque la redazione di una pagina passa attraverso la modifica degli elementi di contenuto di pagina!

È veramente facile modificare il contenuto di pagina in TYPO3. Scegliete il modulo di Pagina (#1), cliccate sul titolo di pagina della pagina che volete modificare (#2) e nella vista “Columns” (#3) cliccate sull'icona di modifica (#4) dell’elemento di contenuto di pagina che volete cambiare: 

 

Apparirà la finestra per la modifica: 

 

Innanzitutto il campo “Type” (#1) vi dice il tipo del contenuto di pagina! In questo caso “Testo”. Potrebbe essere anche “Tabella” (come avete visto prima), o “Immagine” o “Testo con Immagine”, ecc. Vedete voi stessi! Ciascun tipo di elemento di contenuto ha un aspetto e dei campi propri e inserendo degli elementi diversi potete realizzare pagine molto diverse sul vostro sito.

Il campo “Titolo” (#2) contiene il titolo e il campo “Testo” il corpo. Sulla pagina web corrisponde a: 

 

Provate a cambiare il valore del campo “Titolo” e cliccate su “Salva documento e visualizza pagina”: 

 

Dato che avete utilizzato “Salva documento e visualizza pagina” la finestra di frontend appare automaticamente dopo qualche secondo: 

 

TYPO3 ha inviato la modifica al server, aggiornato il database con la nuova informazione, cancellato la cache della pagina e rigenerato la pagina - la modifica è immediatamente messa in linea e le persone che navigano sul vostro sito Web vedono ora il nuovo titolo al posto del vecchio! È facile anche mantenere le pagine web con TYPO3!

Tip: un altro modo di attivare la pagina in modifica 

Invece di cliccare sul modulo “Pagina” e compiere tutte le altre operazioni, c’è anche un menu “Modifica” nel menu che permette di modificare una pagina: 

 

Tip : Modifica rapida - salvare con un click del mouse... 

Se volete un accesso rapido ai vostri elementi di contenuto di pagina potete portare la vista del modulo Pagina da “Columns” a “QuickEdit”, così selezionando una pagina il primo elemento di contenuto è in modifica: 

 

Nuova pagina

La creazione di nuove pagine è molto facile. Questo perché le pagine sono sempre organizzate nella gerarchia dell’albero delle pagine e voi dovrete innanzitutto selezionare una posizione per la pagina. Naturalmente la potete cambiare in seguito se lo desiderate. 

Per creare una nuova pagina utilizzando il modulo Pagina, nella modalità di visualizzazione “Colonne”, cliccate su “Nuova Pagina” per avviare l’assistente di creazione di una nuova pagina che vi aiuterà a definire la sua posizione: 

 

Allora apparirà un selettore di posizione, e voi potrete scegliere la posizione cliccando:

 

Infine apparirà la finestra per la creazione di una nuova pagina e potete inserire un titolo per la pagina: 

 

Salvate e uscite. 

Ora l’albero dovrebbe essere aggiornato: 

 

E se cliccate sull’icona della nuova pagina “Topscorer” dovreste vedere che il menu è stato automaticamente aggiornato anche nel frontend. 

 

Notate che la pagina è referenziata con l’id “27” - dunque alla nuova pagina è stato assegnato automaticamente il numero “27” durante la creazione. 

La pagina è sempre bianca - dobbiamo creare qualche elemento di contenuto di pagina!

La creazione di contenuto 

Nel modulo Pagina, cliccate sul titolo di pagina “Topscorer” nell’albero delle Pagine e dopo sul pulsante “Crea contenuto”:

 

Immediatamente vedrete il form seguente che vi permette di scegliere un tipo di contenuto di pagina - come indicato precedentemente, tipi differenti di contenuto permettono di creare contenuti differenti nelle pagine web. 

Creazione nel contenuto “Testo con l’immagine sotto”: 

 

Otteniamo questa finestra. Inserite del testo e scegliete un’immagine dal vostro hard disk (trovate una piccola immagine jpeg): 

 

Premete il pulsante “Salva documento”. L’immagine è caricata nel server e legata al nuovo contenuto di pagina. Dovrebbe assomigliare a questo: 

 

Sul sito Web dovrebbe assomigliare a questo: 

 

Inserimento di un altro elemento di contenuto 

Tornando nel modulo Pagina si vede chiaramente il nuovo elemento di contenuto: 

 

Attenzione: La miniatura manca? Se non vedete la piccola immagine qui  TYPO3 non è probabilmente configurato correttamente per utilizzare ImageMagik. È il caso più probabile se non avete usato il pacchetto d’installazione Windows (vedere la sezione installazione di questo manuale). Riferitevi per favore al documento information on installation found on typo3.org e the install mailing list archives. Potete continuare questo manuale senza correggere questo problema.

 

Cliccate sul pulsante “Nuovo contenuto” per creare un altro contenuto di tipo elenco puntato dopo quello: 

 

Questa volta dobbiamo fare anche un’altra scelta: dove poniamo questo nuovo contenuto? Prima di o dopo il contenuto esistente?

 

 

Lo inseriamo dopo il primo. Ora c’è solamente il contenuto dell’elenco da inserire: 

 

Notate che il “Tipo” è stato predefinito a “Elenco puntato” - questo avrebbe potuto essere scelto manualmente. E potete anche cambiarlo in seguito! Se volete conoscere i diversi tipi di contenuto disponibile utilizzate l’icona “?”.

 

Ora abbiamo una pagina a due elementi di contenuto, il tipo “Testo con immagine” e il tipo “Elenco puntato” - in questo ordine: 

 

Nel modulo Pagina questo assomiglia a: 

 

Gestione di elementi di contenuto 

Abbiamo appena utilizzato l’assistente “Nuovo Contenuto” per creare un nuovo contenuto di pagina. Tuttavia gli assistenti in TYPO3 svolgono solamente un compito veloce e semplice convalidando direttamente le opzioni importanti. Ma tutte le funzioni possono essere scelte, regolate e controllate manualmente. Le dominerete lavorando con TYPO3. Prendetevi del tempo per esplorare i pulsanti e le opzioni. Ci sono molte possibilità e le dominerete solamente se vi prendete del tempo per giocare con esse. 

Ecco qualche esempio delle funzioni dell’interfaccia che potete provare: 

 

Creazione di un nuovo elemento di contenuto di pagina dopo quello realizzato direttamente con questo pulsante (#1). Arrivate di default a un elemento di tipo “Testo” - cambiate questo tipo con quello che volete aggiungere. Il pulsante “Sposta record giù” (#2) può essere utilizzato per cambiare l’ordine tra molti elementi nella stessa pagina/colonna. Potete utilizzare le funzioni “Copia”, “Taglia” e “Incolla dopo” del menu di Click (#8) - queste funzioni vi permettono anche di fare delle copie e degli spostamenti a partire dalle altre pagine! Il pulsante (#3) “Nascondi” è un modo rapido di cambiare la visibilità del contenuto e il cestino (#4) vi permette di eliminare totalmente l’elemento (in realtà esso può essere ripristinato se lo eliminate accidentalmente).

Se desiderate modificare il contenuto solo dell’elemento contenuto, potete utilizzare il pulsante “Modifica in Rich Text Editor” (#5). Ciò aprirà una finestra “pieno schermo” per modificare il testo - piacevole se c'è molto testo! Infine potete modificare non solo un elemento di contenuto di pagina alla volta, ma due (o più) cliccando sull’icona “Modifica questa colonna” (#7). 

Spostamento pagina

Anche lo spostamento di una pagina è molto facile con l’assistente disponibile nel modulo Pagina. Spostiamo la pagina “Topscorer” dalla sua posizione attuale dopo “Sitemap” alla sezione “Home”: 

 

Vedrete una parte dell’albero delle pagine, cliccando sulla pagina superiore salite di un livello: 

 

 

E con un semplice click avete spostato la pagina nella sua nuova posizione: 

 

L’albero delle pagine è immediatamente aggiornato: 

 

L’utilizzo di copia/incolla per spostare una pagina 

L’assistente “Sposta pagina” è uno strumento intuitivo per i principianti. Tuttavia quando volete spostare degli elementi - includendo delle pagine - in TYPO3 dovreste utilizzare la clipboard interna. Lavora pressappoco come ne avete l’abitudine sotto Windows: selezionate un documento col mouse destro, scegliete “Taglia”, selezionate la cartella dove volete inserirlo col mouse destro ed utilizzate “Incolla”. Lo stesso principio è impiegato in TYPO3. Utilizziamo questo sistema per spostare la pagina verso la sua posizione di origine:

“Taglia” la pagina: 

 

“Incolla dopo” la pagina “Report Results”: 

 

 

Rispondere “OK”: 

 

 

Voilà! La pagina è di nuovo nella sua posizione d’origine: 

 

Background: fate attenzione - concetti comuni! 

Gli stessi principi di taglia/copia/incolla possono essere utilizzati non solo con le pagine, ma anche con elementi di contenuto di pagina - infatti qualunque elemento di database o file che TYPO3 gestisce è sottoposto a questa funzione! È un esempio che mostra che TYPO3 utilizza gli stessi concetti dovunque nel sistema - così una volta che avete appreso una funzione, molte altre vi sembrano evidenti! 

Parametri di visibilità - pagine nascoste, apparizione programmata, etc.

Una caratteristica disponibile per molti elementi - in particolare per le pagine e gli elementi di contenuto - è l’utilizzo di campi di controllo di pubblicazione o di parametri di visibilità. Per le pagine assomigliano a questo:

 

Per gli elementi di contenuto hanno questa forma: 

 

Mascheramento di una pagina 

Provate a selezionate “Nascondi pagina”: 

 

L’icona di pagina si sbiadisce e appare una piccola croce rossa - La pagina ora è nascosta! 

 

Questo significa che non potete vedere la pagina nel frontend: 

 

(è molto importante che voi scegliate “Mostra” per la pagina “Last week”!). 

Nessuna pagina “This week” è visible! 

Tuttavia se andate direttamente alla pagina “This week” la vedrete ugualmente: 

 

... perché quando siete connessi come utente backend le pagine nascoste possono essere viste - come indicato con il piccolo box in fondo alla pagina:

 

Ma questo è visibile solamente da voi. Nessuno può vedere la pagina prima che voi non la rendiate visibile di nuovo!

Programmazione della pubblicazione delle pagine e degli elementi di contenuto 

Il mascheramento delle pagine e degli elementi di contenuto è probabilmente il genere più tipico di impostazione di visibilità. È così comune che ha la sua voce specifica nel menu cliccabile: 

 

Ma potete anche determinare quando una pagina deve essere pubblicata - in quale data! Per esempio selezionate “d+10” nel campo “Inizio”: 

 

Automaticamente la data è configurata alla data attuale più 10 giorni! Se salvate la pagina e tenete il mouse sull’icona, potete anche vedere questo settaggio: 

 

Questa pagina non è visibile attualmente e sarà automaticamente visibile l’11-04-2003, 10 giorni dopo! È semplice tanto quanto programmare delle pubblicazioni basate su una data d’inizio. Gli stessi principi sono validi per il campo “Fine”, per il contenuto, le news, gli elementi del guestbook. Lo stesso principio - per differenti elementi - facile da capire.

Rich Text Editing: Grassetto, Corsivo, Elenco puntato, inserimento d’immagini

Quando lavorate con il corpo di testo delle vostre pagine potete utilizzare gli stessi principi di formattazione che utilizzate nel vostro trattamento testi. Se utilizzate TYPO3 con IE avete accesso al Rich Text Editor (RTE) per il corpo del testo. “Rich Text” (testo ricco) significa che potete applicare la formattazione al testo semplice.

Provate a modificare il corpo del testo della nuova pagina di “Topscorer”: 

 

Selezionate il testo “my first” e cliccate su “B” (grassetto) per farlo diventare grassetto: 

 

Utilizzando i pulsanti “B”, “I”, “U” e “Allinea al centro” potete facilmente realizzare il paragrafo seguente: 

 

Premete il pulsante “Salva documento e visualizza pagina” - vedrete questo nel frontend: 

 

 

Creazione di un elenco puntato 

Potete creare un elenco puntato altrettanto facilmente. Cliccate sull’icona “Elenco puntato” e inserite qualche riga (di testo): 

 

Premete il pulsante “Salva documento e visualizza pagina” - vedrete questo nel frontend: 

 

Considerazioni su “rich content” 

Come potete vedere - questo vi offre due scelte : a) creare elenchi puntati “integrati” nei campi del corpo di testo oppure b) creare elementi di contenuto separati. Potete mescolare i due approcci. Personalmente preferisco creare l’elenco puntato all’interno del corpo di testo con RTE - ma se qualcuno senza IE (Microsoft Internet Explorer) tenta di modificare l’elenco questo sarà molto duro! E potreste avere delle “ragioni politiche” per non inserire degli elenchi puntati nel corpo di testo (per esempio per conservare il corpo di testo “pulito”. 

L’RTE in dettaglio 

L’editor di testo RTE può essere molto facile da utilizzare, ma pone anche numerose sfide tecniche quando lo esaminate in dettaglio. Esiste il manuale extensive documentation available for the RTE. Da leggere anche in-depth about the RTE per sapere come configurarlo.

Inserire dei links

I links sono la colla di Internet. In TYPO3 avete già dei links creati automaticamente, poiché la struttura gerarchica delle pagine ha creato automaticamente il menu nel frame di sinistra. 

Ma potreste voler creare dei links verso un altro frammento di testo di un’altra pagina, un file, un altro sito web o un indirizzo elettronico, non è vero? 

È molto facile se utilizzate il Rich Text Editor (RTE): 

Selezionate semplicemente il testo e premete sull’icona “Inserire un link”: 

Cliccate poi sul titolo della pagina Guestbook: 

 

... e il link è creato: 

 

Nel frontend questo produce un link come vi aspettavate. Cliccate e siete indirizzati alla pagina con il guestbook! 

 

Dietro le quinte 

Prima ho sollevato il problema dell’utilizzazione di RTE, se volete avere un’idea di ciò che è la modifica di base senza RTE. Potete simulare ciò modificando il contenuto intero di un elemento e scegliendo l’opzione “Disabilita Rich Text Editor (RTE)”, in fondo alla finestra (prima di creare qualsiasi cosa): 

 

Il campo “Testo” assomiglia ora a qualsiasi campo di forma ordinaria (in html): 

 

 

Innanzitutto potete vedere che il link alla pagina “Guestbook” è stato fatto da un tag specifico di TYPO3, <link>, combinato con l’id della pagina. Ciò permette alle persone che non dispongono di RTE di creare dei links! È abbastanza semplice per essere scritto a mano. (Nota: il link interno “<link>” è convertito in link HTML standard “<a>” quando la pagina viene generata).

Potete vedere anche che l’elenco puntato è stato convertito in una serie di linee incapsulate in <typolist> - un altro tag specifico di TYPO3. Queste liste sono anche convertite in elenchi puntati reali dal motore quando poi è generata la pagina. 

Ogni prima linea contiene il marcatore HTML regolare per il grassetto, il corsivo e la sottolineatura più l’allineamento di centro del paragrafo intero. 

 

Altri tipi di link? 

Potete creare dei links verso files locali e pagine Web esterne - oppure dei links verso un contenuto specifico di un’altra pagina (guardate la pagina “Last weeks” per un esempio e deducete voi stessi). 

Finalmente possono essere creati anche i links per inviare posta elettronica. 

Ora, poiché abbiamo messo fuori servizio il Rich Text Editor perché non utilizzare l’icona dell'assistente per la redazione a pieno schermo? 

 

Inserite ora un nuovo elemento nell’elenco puntato, selezionatelo e premete il pulsante “Inserisci link”. Scegliete allora “E-mail” nel menu e inserite il vostro indirizzo di posta elettronica:

 

Ci si dovrebbe aspettare un risultato del genere: 

 

 - un link che apre il programma client di email pronto a scrivere un altro e-mail:

 

 

Tipi di contenuto

Come sapete sono già disponibili molti elementi di contenuto di pagina e combinarli è la chiave per creare pagine web diverse e variate! 

 

In generale più un elemento si trova in basso nell’elenco meno è utilizzato ed è complicato da mettere in opera. L’elemento più utilizzato è il "Testo” o il “Testo con immagine”. 

Assistenti (Wizards) 

Notate che alcuni elementi utilizzano un piccolo assistente. Provate per esempio a pubblicare un elenco di risultati della pagina “This week”: 

 

Il campo “Testo” che contiene normalmente il corpo del testo contiene ora il contenuto della tabella, apparentemente organizzato in un certo modo: 

 

La tabella è costruita interpretando ciascuna linea del campo “Testo” come una riga di tabella. La linea verticale, | , è utilizzata per separare le colonne le une dalle altre. È il primo livello e potrebbe essere mantenuto a mano. Ma “Table wizard” è lo strumento da utilizzare. Questo creerà i campi e i pulsanti per l’aggiunta, la soppressione e lo spostamento del contenuto della tabella.

Per esempio per aggiungere una nuova linea: 

 

Aggiungete allora il contenuto della linea: 

 

Salvate il contenuto dell’assistente della Tabella e nel campo Testo il contenuto assomiglia a questo: 

 

Quando la pagina Web nel frontend è rigenerata vediamo questo: 

 

Se vi chiedete come il colore del fondo può essere cambiato - continuate a leggere! 

Opzioni secondarie - “Palettes” 

Dall’inizio TYPO3 ha tenuto in considerazione il concetto di campi primari e secondari. I forms di modifica in TYPO3 contengono molti campi e altri possono essere aggiunti. Ma con molti campi visibili non è molto semplice lavorare per l’utente medio. In particolare se voi siete principianti e avete molte cose nuove da imparare.

Il concetto di campi primari e secondari significa che normalmente vedete solo i campi più importanti e utilizzati più di frequente (primari). E le opzioni più dettagliate sono nascoste nei campi secondari che vengono mostrati a richiesta.

Considerate questa finestra: 

 

 

Tre campi visibili - visione d’insieme facile. Ma se voi cliccate su una delle icone a fianco dei campi troverete le opzioni secondarie mostrate nella palette (frame superiore):

 

Questo è pratico - abbiamo molte opzioni e dettagli ma essi sono nascosti finché non ne abbiamo bisogno, così non ne siamo confusi. 

Di contro quando avete bisogno di una di queste opzioni secondarie e non vi ricordate “dietro a quale icona” si trova (o se non usate regolarmente il campo) - allora potrebbe essere complicato trovarla!

È per questo che potete attivare l’opzione “Mostra opzioni secondarie” in fondo a tutte le finestre di modifica: 

 

Questo restituisce una grande, e probabilmente confusa, finestra. Ma tutte le opzioni sono disponibili immediatamente:

 

Notate che ogni riga di opzioni corrisponde esattamente al contenuto della palette nel frame superiore se prima avevate cliccato sull’icona “More options”! 

 

Allora come cambiamo il colore di fondo del quadro? Nelle opzioni secondarie per il selettore “Layout”: 

 

(l'etichetta “Color 2” si riferisce al colore configurato con questo nome nel modello del sito web). 

Modifica del frontend

Il punto finale riguardante la modifica di pagine è modificare facilmente il frontend. Sono spiacente che vi siano tanti modi di fare la stessa cosa. Con il tempo apprezzerete questa caratteristica scoprendo quale sistema vi piace di più e come eseguire più lavoro in meno tempo perché TYPO3 offre queste caratteristiche. 

Ma la modifica del frontend non è solo un nuovo pulsante, ma potrebbe essere un’autentica rivoluzione della maniera in cui vorreste lavorare con il sistema, voi e i vostri editori di contenuti. 

Avete probabilmente notato le piccole icone di modifica che sono apparse sulla pagina web: 

 

Provate a cliccare su una di esse: 

 

Immediatamente siete indirizzati a una finestra in cui possono essere subito modificati solamente il campo titolo e altre informazioni attinenti! 

 

 

Provate a cambiare il testo del titolo e premete su “Salva e chiudi il documento” - siete indirizzati alla pagina web e il cambio è eseguito immediatamente: 

 

La modifica dal frontend è molto intuitiva, perfetta per correggere dei piccoli errori e fare dei piccoli adeguamenti, eccellente per i principianti della vostra équipe. È il metodo di redazione contestuale - la forza bruta alla vostra portata.

Dunque tutti possono modificare le mie pagine?

No, solo quando siete identificati e connessi al backend. Diversamente le icone sono nascoste - e se qualcuno potesse cliccarci sopra, sarebbe respinto immediatamente. Provate voi stessi - chiudete la vostra sessione nel backend: 

 

Se avete ancora una pagina di frontend con delle icone, provate a cliccarne una - vedrete apparire questa schermata al posto della finestra di modifica: 

 

... e quando rigenerate la pagina web potete vedere che le icone non sono più visibili:

 

Connettetevi di nuovo a http://localhost/quickstart/typo3/ (username = “admin”, password = “password”). 

Maggiori informazioni 

La modifica dal frontend è descritta più in dettaglio anche su questa pagina - Frontend editing.

Getting Started -

 

5 / 15