Templates

Nel corso di questo documento avreste potuto chiedervi - come si cambia il colore verde del fondo? Oppure, come inserire il proprio logo? E i fonts? (io voglio Times, non Arial e Verdana...). 

Prima di rispondere a queste domande dovete comprendere qualcosa di fondamentale sul funzionamento della maggior parte dei CMS: essi separano il contenuto dalla presentazione. Questo significa che le pagine e il loro contenuto sono memorizzate nel database senza nessun colore o font o immagine di sfondo abbinati. Invece, queste informazioni sono inserite nel template e nei fogli di stile che si applicano normalmente al sito intero quando si pubblicano le pagine. Così un semplice cambiamento del modello si rifletterà sulla presentazione di tutte le pagine del sito. È una funzione potente e molto importante in un CMS! Domandate a qualcuno che gestisce un sito di più di 100 pagine basato su files html, cosa succede se vuole cambiare la presentazione...

Contenuto statico e dinamico 

Considerate il sito “FC Bigfeet”: 

 

Parti dinamiche: in questo sito il menu (#1), il titolo delle pagine (#2) e la sezione “Last update” (#4) sono indirettamente le parti dinamiche della pagina. Questo significa che esse cambiano da una pagina all’altra automaticamente. Non possiamo assegnare direttamente questi elementi per ogni pagina. Sono parti programmate dinamicamente nel template.

Comunque la sezione di contenuto (#3) è una parte veramente dinamica della pagina in cui è inserito il contenuto specifico. Possiamo assegnarlo aggiungendo, eliminando e modificando gli elementi di contenuto della pagina! Questa sezione non fa parte completamente del template (eccettuata la formattazione dei colori e dei fonts) poiché la controlliamo direttamente con gli elementi di contenuto.

Parti statiche: messe da parte le sezioni dinamiche, il template comporta sempre lo stesso logo (#5), la stessa immagine di fondo (#6) e lo stesso colore di fondo (#7). Questi elementi fanno anche parte del modello (come le parti indirettamente dinamiche) ma non cambiano mai, indipendentemente dall’azione. Sempre la stessa cosa in tutte le pagine.

 

I records Template? 

In che modo TYPO3 implementa questo principio? Potete leggere informazioni approfondite nel manuale raccomandato per la realizzazione di siti professionali: Modern Template Building. Però esso è scritto per i professionisti del web design che lavorano in équipes con sviluppatori, designers, ecc. Il livello richiesto è un po’ più avanzato rispetto a quello di questo manuale.

Ma il punto principale è il record del template. È un elemento di controllo che istruisce TYPO3 nel modo di manipolare una certa parte dell’albero delle pagine. Se questo vi sembra un approccio maldestro a prima vista, allora sia - ma è coerente con quello che avete già appreso. Più avanti diventerà perfettamente chiaro quando vorrete sviluppare molti siti nello stesso albero di pagine includendo templates multipli.

Se guardate il sito “FC Bigfeet” notate che la pagina radice del sito contiene un tale record di template: 

 

Apportare modifiche al template

Tentiamo di cambiare alcune cose nel record del template, “NEW SITE, based on standard”. Modifichiamolo: 

 

Per templates standard  il campo “Constants” è spesso il posto per cambiare alcuni valori. Le costanti sono inserite poi nel campo Setup e possono essere inserite in molti posti. Dunque la modifica di una costante può significare molti cambiamenti in differenti posizioni nel codice finale di configurazione di TypoScript del template.

Nel nostro caso, aggiungiamo un colore di fondo nel frame del menu (vedere qui sotto). 

Salvate il template, cliccate “Clear all cache” nel menu “Admin functions”: 

 

Fatelo sempre se modificate direttamente i records del template (non ne avete bisogno quando usate il modulo Template).

 

Il risultato è: 

 

Potete giocare anche con gli altri valori! 

Il Constant editor 

Il modo migliore per manipolare questi cambiamenti è utilizzare la vista “Constant Editor” del modulo Template: 

 

Qui potete aver accesso a molte opzioni, vi sono spiegazioni visuali per la maggior parte di esse e potete scegliere diverse categorie. Troverete anche il menu del colore di sfondo del menu (categoria “Basic”): 

 

Notate che l’assistente non fa che modificare la costante “menu.bgCol” precedente! 

Ugualmente potete facilmente cambiare e caricare sul server immagini da utilizzare come logo o come sfondo della pagina: 

 

Qui viene rimpiazzata l’immagine di sfondo attuale con quella del logo (#1) e con il pulsante “Browse...” (#2) potete      prendere un’immagine locale sulla vostra macchina per utilizzarla come nuovo logo – presto avrete un sito web per la vostra compagnia e non un club di football!

Ora non c’è ragione per dirvi di più su queste caratteristiche poiché sono abbastanza evidenti e l’unico modo per conoscerle è usarle, giocate con loro, vedete quello che accade. Quindi fatelo! 

Configurazione della cartella utenti del frontend 

Vi ricordate dell’osservazione a proposito del cambiamento richiesto sul template prima che l’identificazione delle connessioni degli utenti del frontend funzioni? È il momento di parlarne. 

Quando il form di login è eseguito ha bisogno di sapere in quale pagina (sysFolder) cercare gli utenti che possono connettersi. Viene fatto configurando una costante - “styles.content.loginform.pid” - al valore di uid della cartella di sistema “Users”. 

In questo esempio, l’uid del sysFolder è “14”: 

 

Dunque tutto quello che dobbiamo fare è piazzare il numero “14” in questo campo: 

 

Questo campo si trova nei 64 valori iscritti nella categoria CONTENT del Constant Editor. Potete anche impostare il valore manualmente nel campo “Constants”. 

Il campo Setup

Il modo migliore per modificare un template, o il campo Costants, è di utilizzare la vista “Info/Modify”. Ottenete un accesso diretto al campi del template. È stato pensato come aiuto per gli sviluppatori che useranno molto questo sistema:

 

(Notate che c’è un link (#1) sotto il blocco che vi porta direttamente alla modifica completa del template se necessario). 

Nel campo Setup trovate queste righe di codice: 

 

È un codice strano che esige un manuale ed un poco di conoscenza di fondo per essere gestito! Non vi preoccupate. 

La prima linea (#1) inserisce una mappa del sito alternativa a quella di default (che è venuta piuttosto a noia), poi viene configurato un foglio di stile per la pagina (#2). È utilizzato dal plugin “mininews” che gestisce ogni suo risultato da CSS (contrariamente ad altre parti di questo template standard ancora gestito attraverso tags <font>). Infine troviamo la configurazione del plugin newsletter (#3). Questa è necessaria per assicurarsi che qualcuno non riceva una e-mail con un link ancora prima che si sia iscritto. Poi viene configurata la lingua danese (#4) ed è attivato il Login User Tracking (#5).

Si tratta di una breve descrizione. Ricordatevi che queste opzioni non parlano da sole. Avrete bisogno di più informazioni come Tsref) prima che possiate comprenderle interamente. Per ora potete solo intuire che il campo Setup è apparentemente il posto per aggiungere queste cose! E queste cose sono chiamate TypoScript!

Il Navigatore di oggetti (Object Browser)

Come nota finale sul campo Setup (per ora) vi presenterò il Navigatore di oggetti: 

 

Questo strumento mostra visivamente l’abero degli oggetti TypoScript del campo Setup. Se avete notato la linea TypoScript per la configurazione della lingua danese (“page.config.language = dk”) comprenderete la logica di questa vista d’albero. 

Notate che TypoScript non è realmente un linguaggio di scripting con strutture di controllo, ma piuttosto un linguaggio dichiarativo di configurazione che crea una gerarchia dell’informazione utilizzata internamente per istruire il motore di template su cosa fare e in che ordine – un po’ il Database di Registro in Windows. Il linguaggio di scripting di TYPO3 è lo stesso PHP! Perciò TypoScript non è una tecnologia nuova, di proprietà riservata che avrebbe dovuto essere invece XSLT o qualcosa di simile - piuttosto TypoScript è un inevitabile - ed in questo caso brillante - linguaggio di configurazione per legare insieme parti esterne (come contenuto, maschere, PHP e XML o altre cose).Ma chiaramente voi dovrete apprenderlo bene. Non c’è realmente nessuna alternativa e il livello a cui volete usare TypoScript dipende in parte da voi. Ne conoscerete di più con altri manuali.

Torniamo al lavoro: se attivate “Enable Objects Links” (in fondo alla pagina) potete anche cambiare i valori di questa grande vista d’insieme: 

Cliccate sulla proprietà che volete modificare:

 

Cambiatene il valore e salvate:

 

È facile! 

Ora, come potreste sapere cosa significa questa opzione? Ebbene, avrete sempre bisogno di un po’ più di conoscenza di fondo, ma il TS wizard vi aiuterà con la sintassi se sapete cosa cercare: 

Per l’oggetto “page.config” c’è la possibilità che possa essere mostrato con il TSreference wizard: 

 

Nella finestra che compare potete ora cercare l’oggetto di cui vi servono le proprietà. È qui che dovete sapere cosa si applica alla vostra pagina specifica (nel nostro caso “page.config”): 

 

E la prossima schermata mostrerà le proprietà in modo chiaro. 

 

Infatti questa informazione è ricavata direttamente dai manuali in linea e può essere trovata anche su typo3.org. Guardate il CONFIG object in Tsref.

TSref 

Il documento TypoScript reference (TSref) è molto conosciuto nella collezione dei documenti che riguardano TYPO3. Esso contiene la descrizione di tutti gli oggetti TypoScript che potete utilizzare per creare dei templates in TYPO3. È il manuale degli elementi che potete inserire nel campo Setup dei templates.

Prima che vi immergiate in TSref notate che questo ha senso solamente se sapete già ciò che cercate! È un manuale di riferimento che descrive tutte le proprietà. Così se conoscete la proprietà da cercare questo documento è molto utile -  anzi indispensabile!

Il TypoScript by Example 

Il miglior modo di procedere, se volete provare ciò voi stessi, è utilizzare TypoScript by Example. Questo documento contiene molti esempi organizzati come dei mini-manuali su argomenti relativi a TypoScript.

Cambiare il template?

Nel nostro caso il template FC Bigfeet è basato sul template standard chiamato “BUSINESS”. È da là che proviene tutta la configurazione visibile nel navigatore di oggetti!

Potete vedere questa struttura con la vista “Template Analyser” nel modulo Template: 

 

Tutti gli “elementi” di quest’albero rappresentano il contenuto TypoScript prefabbricato per il template! Così quando guardate il campo Setup o Constant del template principale “NEW SITE, based on standard” (#1) e vi domandate da dove proviene tutto quel codice, ebbene la risposta è stata pre inclusa dal parser (analizzatore sintattico) dei templates statici.

Se volete vedere il contenuto di ciascun elemento, cliccate sul suo titolo. 

Templates statici 

Il template statico “styles.sitemap.gs” è stato incluso per ottenere una mappa del sito più simpatica. Il file di template statico “Ext:da_newsletter_subscript...” è stato incluso per ottenere i diritti di configurazione per l’abbonamento alla newsletter (vedete il video prima). Infine il template statico “BUSINESS” (standard template) è l'elemento chiave dell’aspetto del nostro sito.

Tutto questo è modificabile nel record del template. Andate alla lista modulo e modificatelo: 

 

 

Chiaramente il campo “Include static” contiene come ho già detto i modelli statici (#1 e #2) e il campo “Include static (from extentions)” contiene il riferimento al file di template statico dell’estensione newsletter (#3). I checkboxes “Clear” e “Rootlevel” dovrebbero normalmente essere selezionati (#4) solo per templates principali.

 

I templates statici non sono molto utilizzati nei siti professionali creati con TYPO3. La ragione è che tali siti sono il risultato di un lavoro personalizzato che richiede un TypoScript personalizzato. I templates statici contengono del codice TypoScript generico, molto utile, ma limitato anche ad un certo grado.

Tuttavia in ciascun template, anche in quelli personalizzati, è incluso un modello statico per restituire gli elementi di contenuto di pagina. Difatti, la creazione di un template con il codice che ne consegue, per tutte le combinazioni di elementi di contenuto è un lavoro molto grande; in questo caso dunque è interessante riutilizzare il codice. 

Sostituire il template 

Proviamo un altro template standard al posto di quello “BUSINESS”. Nel campo “include static” eliminiamo il modello BUSINESS e aggiungiamo il template CANDIDATE: 

 

Salvate il risultato, cliccate su “Cancella tutte le Cache” e verificate il sito: 

 

Come potete vedere gli elementi di contenuto sono gli stessi, il colore del background è lo stesso, il foglio di stile utilizzato per le news è lo stesso, ma il template è diverso! È a questo che servono i template! Essi cambiano la struttura completa del sito! Perciò con TYPO3 è facile allo stesso modo cambiare l’aspetto di un sito tanto di 10 che di 100 che di 1000 pagine - un semplice cambiamento di template riguarda tutte le pagine! 

In questo nuovo modello sembra essere presente una caratteristica che non avevamo prima. È la colonna bordo nella quale possiamo inserire del contenuto. 

Contenuto in colonne multiple

Pagina TSconfig 

La prima cosa che dobbiamo fare è cambiare l’opzione “Tsconfig” che limita TYPO3 a mostrare solo la colonna “Normale” nel modulo Pagina. Modificate l’intestazione della pagina radice “FC Bigfeet”: 

 

 

Aggiungete “,3” alla lista come indicato qui: 

 

Questo indicherà al modulo Pagina di mostrare le colonna Normale (0) e la colonna di contenuto Bordo (3). Se volete conoscere le altre opzioni possibili, cliccate sul pulsante di “TS” a destra. Nella finestra che appare, cercate “mod.SHARED”: 

 

Questo vi presenterà la proprietà “colPos_list” includendo la sua descrizione. Ciò vi permette anche di cliccare sulla proprietà e di essere trasferiti nel campo Tsconfig. 

 

Salvate l’intestazione di pagina e andate nel modulo Pagina - vedrete ora una colonna supplementare: 

 

Ora provate ad aggiungere qui un elemento di contenuto. Cliccate sull’icona “Nuovo elemento...”: 

Scegliete un elemento di tipo “Testo” ordinario e inserite del contenuto: 

 

Notate il contento del campo “Colonne” tra le opzioni secondarie del campo “Tipo”. Esso ha il valore “Bordo”, questo è il setting che farà in modo che questo elemento di contenuto appaia nella colonna Bordo e non nella colonna Normale! Questo campo è stato impostato prima della creazione di questo form. 

Premete sul pulsante “Salva e chiudi documento”. Tornando al modulo Pagina vedrete il nuovo contenuto presente nella colonna a destra come ci si aspettava: 

 

Ma esso dovrebbe essere mostrato nella giusta posizione anche sul sito! Verifichiamo dunque anche il frontend: 

 

E anche in questo caso è corretto! 

 

Comprendere “Page TSconfig” 

La piccola modifica che abbiamo fatto nel campo “Tsconfig” della pagina radice era alquanto interessante. Era un frammento di codice di configurazione che aveva effetto sul funzionamento del backend - in quel particolare ramo dell’albero di pagina!  La “Pagina Tsconfig” è anche un concetto potente che vi permette di mettere a punto finemente il comportamento dei moduli, del Rich Text Editor e di altri elementi. La sintassi del codice che inserite è di TypoScript, la stessa dei templates. Ma non c’è nessun rapporto con i templates nel frontend, solo la configurazione interna delle caratteristiche è identica.

Se volete saperne di più sulle proprietà di TSCONFIG potete trovare queste informazioni su typo3.org. Questa particolare opzione è documentata su questa pagina (cercate il titolo “Shared options for modules (mod.SHARED)”).

Verifica di “Page TSconfig” 

Per vedere i parametri Tsconfig della pagina in qualunque punto dell’albero utilizzate il modulo “Info” con la vista “TSConfig della pagina”: 

 

Come potete vedere, viene mostrato lo stesso tipo di struttura ad albero dell’Object Browser. 

Annullate le modifiche nel template 

Prima di continuare, ripristiniamo il template BUSINESS. Possiamo farlo facilmente cliccando sul pulsante Annulla se nel frattempo non avete fatto cambiamenti nel template - il pulsante ristabilirà lo stato precedente del record nel database. Scegliete “Modifica” per il template: 

 

Dopo che lo schermo è stato aggiornato controllate il risultato. La configurazione precedente del campo “Include static” dovrebbe essere di nuovo visibile: 

 

(in caso contrario fate la modifica manualmente). 

Potete anche ristabilire il colore di sfondo della costante di menu (menu.bgCol) a #007000. 

 

Maggiori informazioni su Undo/History feature in TYPO3 sono disponibili qui.

Creazione di un altro sito nel database?

TYPO3 ha la capacità di creare non un solo sito, ma tutti quelli desiderati nello stesso database! È una funzionalità potente chiamata “multi sito”. Il principio è che un nuovo sito può avere origine da qualunque pagina dell’albero e si indica la pagina iniziale (pagina radice) di un nuovo sito inserendo un record di template!

Se pensate che i records di template sono un approccio strano per la creazione di templates allora dovreste vedere per quale ragione ora sono una soluzione molto efficace a questo problema. Il record di template diventa l’elemento di controllo che inserite in una pagina per segnare l’inizio di un nuovo sito.

Ora proviamolo in pratica: 

Creazione di un nuovo ramo 

Innanzitutto create una nuova pagina sotto l’attuale, aggiungete poi alcune sotto-pagine. Questo è l’inizio del sito del fan club: 

 

“Fan club” è la vostra nuova pagina radice per questo sito. Provate a visualizzarla:

 

Non ha l’aria di funzionare: 

 

Perché? La risposta si trova nel principio spiegato precedentemente, perché non abbiamo ancora creato il record di template per indicare a TYPO3 che si tratta della pagina radice! Il modo più facile per fare questo è utilizzare il Modulo Template, scegliere la vista "Info/Modify" e utilizzare l’assistente:

 

Scegliete il modello standard che volete utilizzare come base del vostro nuovo sito: 

Confermate la creazione del nuovo modello a andate nel modulo Lista per verificare l’esistenza del nuovo record di template: 

 

Ora arriva la cosa interessante - il problema è risolto? Tornate nel frontend: 

 

Si! Ma le pagine sono vuote perché nessun contenuto esiste ancora. E il template deve ancora essere modificato con il “Constant Editor” per modificare i colori, ecc. È la tappa successiva... 

Non è probabilmente una sorpresa vedere che l’id della pagina inviata dal navigatore è “34”. Ma quale dei due siti nel database sarà mostrato se non inviamo l’id? La risposta è il primo, il sito “FC Bigfeet”. 

Se è così come faranno gli utenti per arrivare a visitare il nostro nuovo sito? Continuate a leggere... 

Gestione dei domini multipli

Quando volete gestire dei siti multipli all’interno del vostro database TYPO3 è sufficiente semplicemente che vi assicuriate che essi abbiano ciascuno un dominio separato. Per esempio il sito “FC Bigfeet” potrebbe avere il dominio “ww.fc.bigfeet.com” e il sito del fan club potrebbe essere “fanclub.fc-bigfeet.com” e anche “www.fanclub.fc-bigfeet.com”. È necessario ora assicurarsi che i visitatori vedano il sito giusto se utilizzano il nome di dominio giusto! 

È un processo in tre tappe: 

• Assicuratevi che i DNS di tutti i domini siano diretti verso il vostro server web (indipendentemente da TYPO3) 

• Configurate il vostro server per ridirigere tutte le richieste dei tre domini verso la cartella contenente TYPO3 (.../quickstart/) - ora una visita verso uno qualunque dei tre domini finirà sul sito principale “FC Bigfeet”. 

• Infine create un record di dominio per ciascun dominio che volete indirizzare sul sito “Fan Club”.

Questo si fa aggiungendo un nuovo elemento alla pagina radice “Fan Club”: 

 

Inserite allora il nome del dominio principale: 

 

Salvate il record. Createne un altro per il dominio alternativo “www.fanclub.fc-bigfeet.com”. È un dominio che utilizziamo per “sicurezza” e  desideriamo ridirigere verso il dominio “fanclub.fc-bigfeet.com”. È fatto come quello:

 

Salvate e visualizzate la pagina nel modulo Lista: 

 

I due records sono visibili tra gli elementi della pagina “Fan Club” del modulo Lista. Se avete configurato tutto correttamente, una visita su “http://fanclub.fc-bigfeet.com” mostrerà il nuovo sito e l’URL “http://www.fc-bigfeet.com” mostrerà quello vecchio. Chiaramente non funzionerà, a meno che non vi affrettiate a registrare questi domini!

Questo è quello che succede dietro le quinte: TYPO3 trova il nome del dominio. Poi cerca un record di dominio. Se ne trova uno (come “fanclub.fc-bigfeet.com”) allora TYPO3 considera quella come pagina radice! Questo significa che qualunque richiesta di id di pagina deve essere nel ramo in cui il record di dominio è stato trovato! Se un id di pagina da “FC Bigfeet” è richiesto sul dominio “fanclub.fc-bigfeet.com”, TYPO3 mostrerà la prima pagina del sito “Fan Club”!

Creazione di un nuovo sito

Utilizzo dell’assistente Nuovo template 

La funzione “Create template for a new site” della vista “Info/Modify” è molto pratica per creare nuovi siti. 

 

Se cliccate senza scegliere un template standard creerete sempre un nuovo record di template, ma senza nessun template standard e con qualche linea di TypoScript per cominciare. Questa è la via che prendono gli esperti per iniziare un nuovo sito e in seguito essi utilizzano le loro conoscenze di TypoScript. È il sistema suggerito nel manuale “Modern Template Building, Part 1”. 

Struttura per nuovi progetti? 

Quando iniziate dei nuovi siti lo fate generalmente con un database pulito. Se cercate un database totalmente vuoto senza pagine, senza contenuto e solamente con un utente “amministratore”, scaricate il pacchetto "Dummy" da typo3.org. Questo è progettato per essere la struttura di partenza per i nuovi progetti.

Se siete principianti con TYPO3 - o siete semplicemente pigri - potreste anche iniziare nuovi progetti con il pacchetto “QuickStart” - quello che utilizziamo qui! La ragione è che esso contiene già un insieme di utenti, un template, del  contenuto già a posto ecc. Dovreste solo rimuovere il template, crearne uno nuovo, risistemare delle pagine e aggiungere nuovo contenuto eliminando le parti di cui non avete bisogno. È probabilmente una buona idea se dovete iniziare rapidamente.

Nota importante sui templates!

Poiché il template è il punto cruciale delle vostre possibilità operative con un CMS, è molto importante sottolineare che questo manuale sorvola sulle possibilità dei templates in TYPO3. Ho utilizzato solamente un template standard molto noioso che dà un’apparenza da dilettante. L’ho fatto apposta così non ci perdiamo in questi problemi. Ricordatevi che questo manuale deve insegnarvi i principi di TYPO3. E questi principi sono ugualmente validi per un utilizzo professionale del prodotto. Ma la messa in opera dei template sarà molto diversa.

Notate che questo manuale è basato su un sito interamente funzionante con un template già inserito! Non avete appreso (almeno nei dettagli) come mettere in opera il vostro progetto personalizzato. È ciò che fanno tutti i manuali restanti (o quasi) - il sito “FC Bigfeet” è concepito come un’introduzione - la personalizzazione dei templates è la grande scienza che qui non è trattata!

Caratteristiche e potenzialità dei templates 

Alcune caratteristiche dei templates in TYPO3: 

• Potete attuare qualunque idea grafica, nel modo che volete.

• Potete avere qualunque numero di livelli di menu. 

• Potete avere siti multipli e templates multipli. 

• Potete avere pagine in qualunque numero di lingue. 

• Potete avere aree multiple di contenuto (colonne) in una pagina. 

• Potete integrare ogni tipo di sorgenti di dati esterne attraverso plugins scritti in PHP. 

• Potete aggiungere applicazioni web quante ne volete ed eseguirle su pagine differenti in TYPO3. 

• Potete estendere tutto con PHP (con una completa compatibilità all’indietro!). 

• Potete fare tutto - alcune cose saranno più dirette (più tipiche), altre invece più complicate (meno tipiche). 

Se avete bisogno di dare un’occhiata all’elenco delle caratteristiche di TYPO3 le trovate qui su typo3.com.

Sviluppare siti Web professionali con TYPO3? 

Il manuale “Modern Template Building, Part 1” è il prossimo documento da leggere per i principianti volendo sviluppare a un livello professionale!

Getting Started -

 

10 / 15