TYPO3.it: modern template building

Modern Template Building, Part 1 (MTB/1)
PART 1: INTEGRAZIONE DI UN (TEMPLATE) HTML

Part 1: Integrazione di un (template) HTML

Implementare un CMS

La produzione di sito web con un CMS richiede l'integrazione di più componenti rispetto a un sito web fatto da un file HTML statico. Il principio fondamentale di un CMS è quella in cui la parte del contenuro viene separato dalla presntazione. Alcuni CMS conservano i contenuti in files in XML, Altri CMS usano un database relazionale. La differenza è solo tecnica ci sono pro e contro in entrambe i casi, ma l'idea principale è la stessa: "contenuti separati dai colori".

Quando TYPO3 genera paigne web il frontend engine combina il contenuto non formattato proveniente da una sorgente di dati (database), con un (template) HTML che definisce tutta la formattazione. In questo processo il (template record) è l'elemento controllore che istruisce il frontend engine su come svolgere questo lavoro di combinazione.

In questa illustrazone potete vedere come il template record è l'elemento checontrolla il "programma" il frontend engine il quale a sua volta cerca il contenuto nel database, legge il template, inserisce il contenuto negli spazi riservati dallo static template mostrando una pagina web piacevole!

Nella maggior parte delle agenzie un gruppo di persone lavora insieme per la creazione di un site web. In questo gruppo troveremo un grafico, un programmatore e qualcuno che inserisce articoli e foto (almeno inizialmente). Ogniuna di queste persone ha abilità diverse esse dovranno lavorare insieme per la produzione del sito in differenti aree:

Nell'illustrazione qua sopra i vari compiti di un CMS che controllano il sito web, sono assegnati a ogni persona che compone il team del sito:

Mr. Raphael è un artista. Raphael ha una grande abilità per il design e la progettazione, conosce Photoshop, Dreamweaver, CSS fogli di stile, HTML ecc... Raphael inoltre crea filmati con flash. Raphael non utilizza TypoScript con PHP, SQL o altre tecniche di programmazione. Così Raphael creerà i (templates) HTML per noi!
Mr. Benoit e uno sviluppatore. Gli piacciono bits e bytes, adora compilare direttive, espressioni regolare, logica, PHP, SQL – e presto amerà pure TypoScript. Tuttavia Benoit si fida dell'accoppiata, blue jeans come ogni programmatore e l'incapacità nel disegno, tipografia, combinazione dei colori e usability non fanno proprio parte del suo destino. Di conseguenza Benoit è incaricato a configurare TypoScript nei (Template Records).
Mr. Picouto è interessato al contenuto. Lui è un ragazzo del marketing è affascinato dal lavoro di Raphael e Benoit che hai suoi occhi lavorano meravigliosamente, portando le prorpie idee dalla carta allo schermo. Picouto non è nè un programmatore nè un grafico, ma ha un messaggio da comunicare. Ed attraverso TYPO3 backend può generare il contenuto che desidera senza avere conoscenze tecniche particolari oltre a quella di un semplice word processor.

Così abbiamo tre caratteri con abilità uniche, ciò porta alla conclusione che la produzione di un sito web basato su CMS non è una “semplice passegiata nel parco” a meno che possediate tutte e tre le abilità nelle diverse aree menzionate precedentemente: Visive, Prgrammazione e Marketing. Questo normalmente è il caso presente in un team di siti web, più insolito per gli individui. Quindi siete avvisati!! Se siete poco qualificati quello che dovete solamente imparare è semplicemente l'uso Standard dei (Templates) che hanno un design prestabilito potete pubblicare il vostro contenuto con una minima configurazione. Ma questo non è spiegato in questo tutorial.

In questo tutorial vi mostrerò come Raphael, Benoit e Picouto devono cooperare per produrre siti web moderni, in cui ogni membro della squadra può lavorare liberamente nel proprio campo, usando gli strumenti che ognuno ama. La maggir parte della produzione del sito web è facilmente mantenibile, implementando il tutto con un design su misura che avete sempre sognato. Il tutto con TYPO3.

Livello di abilità

intermedio webdesigner con conoscenze di HTML/CSS, non è necessario un programmatore web.

Per completare questa sezione del tutorial dovreste avere una buona conoscenza di HTML and CSS. Naturalmente dovete aver lavorato con il database di TYPO3 e aver creato l'albero di pagine in un capitolo precedente di questo tutorial. Infine potreste avere bisogno di concetti base sulla programmazione per capire tutto completamente. Ma non vi preoccupate - descriveremo chiaramente tutto quello che dovete fare – prestate solamente attenzione, e prendetevi del tempo per capire gli esempi.

Il (template) HTML

Il team del sito ha ottenuto appena un nuovo cliente - Main Dish & Son - e Raphael, l'artista del team, ha prodotto un (template) per il sito web con un normale file HTML:

Questo file HTML è stato messo nella cartella "fileadmin/template/main/" relativa all'installazione di TYPO3 (il dummy-package).

Per seguire questo tutorial dovreste copiare il contenuto della cartella "part1/" da questa estensione del tutorial dentro la cartella "fileadmin/template/main/". Se non avete importato ancora l'estensione del tutorial "doc_tut_templselect" da TER (TYPO3 Extension Repository) dovreste farlo adesso! Inoltre, se avete saltato la precedente sessione su TypoScript, assicurisi di creare almeno l'albero della pagina come descritto nel capitolo “Creare un struttura di pagine” e possibilmente un (template record) vuoto.

Bene, torniamo al lavoro di Raphaels ; il file del (template) HTML è solamente una normale pagina HTML. Ma quando TYPO3 importa questo file come un (template) puntiamo a rendere certe parti dinamiche. Ciò include il menu a sinistra ed anche la sezione con contenuto fittizio nel centro/destra.

L'osservazione del codice del (template) HTML, rivela un semplice documento d'appoggio XHTML che aggancia un foglio di stile e usa una singola tabella per posizionare i vari elementi nella pagina:

Qui segue una spiegazione di questo (template) HTML e i cambiamenti che stiamo affrontando:

Questa parte del documento deve entrare nella nostra pagina web poiché contiene il riferimento al fogliio di stile usato.
Problema: Dobbiamo assicurarci di estrarre questa parte del documento dentro la sezione dell'intestazione generata dal frontend engine !
Il menu a sinistra è fatto dal tag <div>- per ogni voce del menu. Ogniuno di questi elementi <div> ha una classe assegnato ad esso. Da questo nome di classe il disign dell'elemento è controllato dal fogio di stile CSS.
Questo è un modo intelligente per creare un menu poiché ogni elemento contiene una quantità minima di codice HTML(ottimo per l'implementazione in TypoScript), sono facilmente ripetibili (necessario quando il menu sarà dinamico).
Problema: Qui dobbiamo sostituire il menu fittizio con uno generato dinamicamente!
Questo è il contenuto fittizio che Raphael ha messo nel file del (template) solo per avere un'idea abbozzata del design. Attenzione a come ha formattato con i tag <h1> e <p> (usando la classe "bodytext") - questo è il modo corretto poiché il contenuto dinamico più avanti sarà inserito da TYPO3 che usera quei tag/classe per la formattazione! (Raphael ha un po barato documentandosi prcedentemente su typo3, eh?)
Problema: Dobbiamo sostituire il contenuto fittizio con il contenuto della pagina generato dinamicamente.
questo tag mette un piccolo spazio sotto il contenuto in modo che il piè di pagina non sia chiuso troppo vicino al corpo della pagina.

Infine dovreste prestare attenzione a . Questi non sono usati solo dal foglio di stile! C'è un modo intelligente per usare questi id-attributi! Ma primo un pò di teoria sul (templates) HTML:

Principi fondamentali del (TEMPLATE) cObject

Per prima cosa create un novo file, fileadmin/template/test.html, con questo contenuto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>Untitled</title>

</head>

<body>

<h1>

Header of the page

</h1>

</body>

</html>

(Possiamo trovarlo già pronto nell'estensione tutorial nella cartella "misc/test.html")

Poi inserite questo nel campo Setup del vostro (template record):

# Template content object:

temp.mainTemplate = TEMPLATE

temp.mainTemplate {

template = FILE

template.file = fileadmin/template/test.html

}

# Default PAGE object:

page = PAGE

page.typeNum = 0

page.10 < temp.mainTemplate

Questo inserirà un cObject di tipo "TEMPLATE" nella posizione "page.10". La proprietà del (template) dell'oggetto TEMPLATE cObject è definito per essere un altro cObject di tipo "FILE" il quale legge il file recentemente creato, "fileadmin/template/test.html". Le proprietà del .

Ora, se salvate i cambiamenti nel campo Setup e andiamo nel frontend dovreste vedere questo:

Osservando all'interno del codice scopriamo che l'oggetto TEMPLATE cObject legge solo il file e restituisce la riga:

Ora viene il punto dell'oggetto TEMPLATE cObject; non legge solamente il file HTML - ma ci permette di estrarre delle sotto-parti e sostituirlo con contenuto dinamico!

Una sotto-parte è definita come il contenuto iserito tra due stringhe come queste ### e incapsulate in un commento HTML (anche se facoltativo). Il file "test.html" ha due sotto-parti, la sotto-parte "DOCUMENT_BODY" e la sotto-parte "INSIDE_HEADER". Come potete osservare le sotto-parti indicate sono incapsulate tra i tag commenti HTML così che non siano visibili.

Ora provate a modificare il campo Setup del (template record) con questo:

# Template content object:

temp.mainTemplate = TEMPLATE

temp.mainTemplate {

template = FILE

template.file = fileadmin/template/test.html

workOnSubpart = DOCUMENT_BODY

subparts.INSIDE_HEADER = TEXT

subparts.INSIDE_HEADER.value = HELLO WORLD!

}

# Default PAGE object:

page = PAGE

page.typeNum = 0

page.10 < temp.mainTemplate

Visualizzate sul browser, il codice HTML della pagina dovrebbe essere come questo:

I cambiamenti che abbiamo fatto alle proprietà dell'oggetto (TEMPLATE) cObjects sono queste:

In primo luogo l'oggetto TEMPLATE cObject è stato incaricato per lavorare solamente sulla sotto-parte contrassegnata con "###DOCUMENT_BODY###" - così l'intestazione ridondante, i tag body, sono stati eliminati!
secondariamente la sotto-parte contrassegnata con "###INSIDE_HEADER###" è stata sostituita con il contenuto restituito dall'oggetto TEXT cObject definito per la proprietà "subparts.INSIDE_HEADER" dell'oggetto TEMPLATE cObject.

Dovrebbe essere abbastanza facile da comprendere. Tutto quello che dovete fare è quello di indicare il file del (template) di Raphaels: “fileadmin/template/main/template_1.html”. inserire le sotto-parti contrassegnate con ###, sostituite i menù e il contenuto fittizio con i meun e il contenuto reali della pagina generati dinamicamente!

L'estensione del (Template) Auto-parser

Apparentemente, la cosa più ovvia da fare è solamente quella di editare il (template) di Raphaels. Tuttavia nella mia esperienza non potrei fidarmi di quello che molti editor HTML gridano a gran voce, dicendo di non rimuove o di non riorganizzare i commenti HTML all'interno del documento. Immaginate, se in seguito Raphael dovesse effetture alcuni cambiamenti al file (template),e che questi cambiamenti al (template) siano fatti con DreamWeaver. le sotto-parti contrassegnate saranno rimosse in modo trasparente – il lavoro del (template) verebbe tagliato immediatamente! Inoltre il percorso punta al foglio di stile e alle immagini del (template) di Raphaels che sono relative alla cartella [domain]/fileadmin/template/main/ - nessun [domain]/ verebbe torvato per visualizzare il contenuto HTML con il frontend engine di TYPO3s ! Per questo tutti i percorsi dovrebbero essere prefissati!

Tutto questo richiede una soluzione migliore. Ora, vi pregherei di importate ed installate 'estensione (Template) Auto-parser - questa è la risposta a tutti i vostri sogni...

Installazione dell'estensione

Andate nell'Extension Manager, importate l'estensione dal repository in linea:

cercate l'estensione "automaketemplate", cliccate l'icona importa:

Questo dovrebbe essere il risultato dell'avvenuto successo dell'operazione:

Tornate indietro e selezionate la voce "Available Extensions to Install" e installate l'estensione:

Dopo aver premuto il bottone "Make updates", Tornate al modulo Template e cercate nel menù typoScript Object Browser:

L'setensione dovrebbe essere stata aggiunta con l'oggetto USER cObject al percorso dell'oggetto "plugin.tx_automaketemplate_pi1" come potete vedere qua sopra. Questo tipo di cObject può essere utilizato da noi al posto del FILE cObject per leggere il file del (template) di Raphaels correggendo e contrassegnando automaticamente i percorsi relativi in modo corretto!

Configurazione del (Template) Auto-parser

Come per ogni estensione per cui desideriate conoscere qualche informazione dovrete consultare il manuale su typo3.org. Cliccate questo link e vedrete la tabella con le proprietà per l'ggetto cObject.

Per essere chiari su cosa fa il Template Auto-parser, esso inserià solo il contenuto della pagina configurando l'oggetto PAGE "page" semplicemente all'uscita del plugin, in modo da non mostrare il contenuto dell'intestazione e del piè di pagina.

Questo è il contenuto del (template record) nel campo Setup:

# Configuring the Auto-Parser:

plugin.tx_automaketemplate_pi1 {

# Read the template file:

content = FILE

content.file = fileadmin/template/main/template_1.html

# Here we define which elements in the HTML that

# should be wrapped in subpart-comments:

elements {

BODY.all = 1

BODY.all.subpartMarker = DOCUMENT_BODY

HEAD.all = 1

HEAD.all.subpartMarker = DOCUMENT_HEADER

HEAD.rmTagSections = title

TD.all = 1

}

# Prefix all relative paths with this value:

relPathPrefix = fileadmin/template/main/

}

# Default PAGE object:

page = PAGE

page.typeNum = 0

page.config.disableAllHeaderCode=1

page.10 =< plugin.tx_automaketemplate_pi1

Salvate il (template) e andate sul brawser di presntazione. Dovreste vedere esattamente a cosa fileadmin/template/main/template_1.html dovrebbe somigliare:

E allora...? penserete. Ma questo è piuttosto normale e quando osserverete il codice di questa pagina capirete il perchè:

Ora, come potete vedere due cose importanti sono successe:

Alcuni blocchi nel file (template) sono stati automaticamente spostati nelle sotto-parti! (1+2)
Tutti i relativi links/references sono stati prefissati con il percorso "fileadmin/template/main/" (3)

Questo perchè il Template Auto-parser è stato configurato per elaborare "elementi" come questi:

...

elements {

BODY.all = 1

BODY.all.subpartMarker = DOCUMENT_BODY

HEAD.all = 1

HEAD.all.subpartMarker = DOCUMENT_HEADER

HEAD.rmTagSections = title

TD.all = 1

}

...

(Gli "elementi" sono le parti definite da un tag iniziale e uno finale ad esempio il tag <td>. Diversamente, ogni altra parte che non ha un tag finale, come <img>, devono essere definiti dalle proprietà "singole" del Template Auto-parser).

Così la configurazione degli elementi ci dice che:

a) L'elemento <body> dovrebbe essere spostato nella sotto-parte contrassegnata con "###DOCUMENT_BODY###"
b) L'elemento <head> dovrebbe essere spostato nella sotto-parte contrassegnata con "###DOCUMENT_HEADER###". Inoltre ogni sezione <title> dovrebbe essere rimossa. (Non desideriamo che il gag <title> del (template) di Raphaels sia replicato nelle pagine di TYPO3 ...)
c) Tutti gli elementi <td> trovati dovrebbero essere rimossi – tranne quello con il valore “.subpartMarker” che è stato definito soltanto nei tag <td> con un attributo "id" o "class", questo inseguito sarà spostato in una sotto-parte contrassegnata, corrispondete ai valori di id/class. Così il tag <td id="menu_1"> avrà il contenuto spostato di lato nella sotto-parte contrassegnata da "...".

Come possiamo usare tutto questo?

Bene la risposta è Auto-parser che permette a Raphael di creare templates sulla base di moderne tecniche con i fogli di stile CSS con un uso cosciente degli attributi id e class negli elementi HTML, allo stesso tempo quegli attributi serviranno da "contrassegno" che TYPO3 userà per sostituire le parti del (template) con del contenuto dinamico! Facile per Raphael (il grafico), meno complicato per Benoit (lo sviluppatore) e fa risparmiare a Picouto poichè sarà necessaria meno manodopera per convertire a mano lo static templat in dynamic template con lutilizzo dei contrassegni delle sotto-parti!

Combinare tutto insieme

Considerate l'illustrazione presentata di seguito. Questo è quello che dovrete fare:

Il file (template) è letto dall'Auto-parser, il risultato è inviato all'oggetto TEMPLATE cObjects il quale sostituisce le sotto-parti, infine vengono inserite nell'intestazione e nel corpo delle sezioni della pagina di TYPO3.

Ciò sarà fatto dal seguente codice TypoScript inserito nel campo Setup del vostro (template record). È un elenco lungo, ma prendetevi un pò tempo per comprenderlo:

# Configuring the Auto-Parser for main template:

plugin.tx_automaketemplate_pi1 {

# Read the template file:

content = FILE

content.file = fileadmin/template/main/template_1.html

# Here we define which elements in the HTML that

# should be wrapped in subpart-comments:

elements {

BODY.all = 1

BODY.all.subpartMarker = DOCUMENT_BODY

HEAD.all = 1

HEAD.all.subpartMarker = DOCUMENT_HEADER

HEAD.rmTagSections = title

TD.all = 1

}

# Prefix all relative paths with this value:

relPathPrefix = fileadmin/template/main/

}

# Main TEMPLATE cObject for the BODY

temp.mainTemplate = TEMPLATE

temp.mainTemplate {

# Feeding the content from the Auto-parser to the TEMPLATE cObject:

template =< plugin.tx_automaketemplate_pi1

# Select only the content between the <body>-tags

workOnSubpart = DOCUMENT_BODY

# Substitute the ###menu_1### subpart with some example content:

subparts.menu_1 = TEXT

subparts.menu_1.value = HELLO WORLD - MENU

# Substitute the ###content### subpart with some example content:

subparts.content = TEXT

subparts.content.value = HELLO WORLD - CONTENT

}

# Main TEMPLATE cObject for the HEAD

temp.headTemplate = TEMPLATE

temp.headTemplate {

# Feeding the content from the Auto-parser to the TEMPLATE cObject:

template =< plugin.tx_automaketemplate_pi1

# Select only the content between the <head>-tags

workOnSubpart = DOCUMENT_HEADER

}

# Default PAGE object:

page = PAGE

page.typeNum = 0

# Copying the content from TEMPLATE for <body>-section:

page.10 < temp.mainTemplate

# Copying the content from TEMPLATE for <head>-section:

page.headerData.10 < temp.headTemplate

Tutto questo conduce alla seguente struttura ad albero:

Come potete vedere il "temp.mainTemplate" e il "temp.headTemplate" cObjects sono stati copiati nell loro rispettive posizioni nell'albero degli oggetti. ogni voce ha un riferimento all'oggetto USER cObject del plugin Template Auto-parser. Attenzione che il percorso dell'oggetto "page.headerData" e un array numerico di oggetti che definiscono il contenuto per la sezone <head> della pagina. Questo è il modo di aggiungere il contenuto fra i tag <head> per generare pagine inTYPO3.

Result

Il risultato osservato sarà questo:

Attenzione, le aree con il contenuto e il menù sono messe là solo in modo fittizio! saranno sostituiti con il contenuto dell'oggetto TEXT cObjects.

Il cosice HTML osservato sarà così:

La sezione <head> senza il tag <title> è stata inserita
La sezone <body> inserita, content substitutions performed
Le sotto-parti ###header_1### e ###footer### non sono sostituiti poiché non sono stati definiti nell'oggetto TEMPLATE cObject "temp.mainTemplate"! Questo non è un errore.
La sotto-parte ###menu_1### e ###content### sono sostituiti correttamente come abbiamo previsto dal dall'oggetto TEMPLATE cObject "temp.mainTemplate" in effetti è stato configurato per fare così.

Riassumendo

Dal (template) di Raphaels, TYPO3 estrae automaticamente il contenuto <head> e <body>, corregge i percorsi relativi alle immagini, link, form e dei fogli di stile, esegue le sostituzioni del contenuto dinamico, ed inserisce ogni parte nelle sessioni <head> e <body> nella pagina creata da TYPO3.

La struttura di base ora è in servizio - dobbiamo solo aggiungere alcuni contenuti dinamici nel menù e dell'area centrale! Questo è fatto in modo efficente dall'oggetto TypoScript cObjects per la rappresentazione dei menu e degli elementi contenuti.

Generare il menu

Il secondo-levello del menu nella parte sinistra del (template) Deve essere generata dinamicamente per riflettere la struttura della pagina del backend. Anche se Raphael ci prepara un gradevole e pulito (template) con un semplicissimo contrassegno per le voci di menù, questa non è la migliore soluzione per provare a estrarre le parti dalle sotto-prati con Auto-parser; dovrete scrivere codice complesso! Ciò significa che Benoit deve guardare e cambiare manualmente il (template) di Raphaels, occorre che identifichi con attenzione ogni singola voce di menu ed estrarre quelle parti, quindi usarle all'interno del (template record) per costruire l'oggetto che genera il menu. Inoltre questo significa che Raphael non può cambiare la costruzione di base del menu senza che Benoit esegua gli stessi cambiamenti nel (template record)! Ma se Raphael ha fatto il suo lavoro in modo intelligente tutto questo non sarà necessario; i fogli di stile CSS dovrebbero essere usati per tutti gli effetti visivi.

Oggetti del menu e stati delle voci

Prima di tutto l'oggetto cObject che useremo per generare i menu è l'oggetto HMENU. Questo oggetto chiamato "menu objects" e del tipo TMENU, GMENU o GMENU_LAYERS ecc... per ogni livello del menu che desideriamo(quale usare dipende dal genere di menu che volete generare - testuale, grafico, cascading layers etc.).

Per ogni "menu-object" (quelle ad esempio un TMENU o GMENU) definite le proprietà generali per il livello che rappresenta ed in più le proprietà per la voce specifica(per esempio altezza e larghezza di una voce grafica del GMENU). Le proprietà specifiche di una voce sono sempre definite per uno specifico suo stato. Il normale stato (NO) deve essere sempre definita, ma oltre a questo potremmo per esempio definire una stato attivo della voce (ACT), questo significa "come la voce di menu si presenta, se siamo sulla stessa pagina o sotto di essa".

Bene, il punto di questo tutorial non è insegnarvi i dettagli dell'HMENU cObject e tutte le possibili conseguenze. Per questo dovreste riferirvi al .

Ora, diamo uno sguardo al codice HTML del (template) di Raphaels:

Come potete vedere egli ha usato un tag <div> per ogni voce di menù senza riferirsi al livello o allo stato. La grossa differenza si trova nel valore dell'attributo classe! Questo è un design intelligente contrassegnato, diventa così semplice per che Benoit che risparmierà tempo nell'implementazione! :-) E altra conseguenza, il pieno, controllo visivo si trova all'esterno di TYPO3 – nei fogli di stile CSS.

Prestate attenzione a come Raphael ha fornito un disegno per le voci di menù "attivi".

L'implementazione di questo menù è estremamente facile. It just goes like this:

Primo, definite un oggetto provvisorio da qualche parte all'inizio del (template record) (prima della definizione di "temp.mainTemplate"):

# Menu 1 cObject

temp.menu_1 = HMENU

# First level menu-object, textual

temp.menu_1.1 = TMENU

temp.menu_1.1 {

# Normal state properties

NO.allWrap = <div class="menu1-level1-no"> | </div>

# Enable active state and set properties:

ACT = 1

ACT.allWrap = <div class="menu1-level1-act"> | </div>

}

# Second level menu-object, textual

temp.menu_1.2 = TMENU

temp.menu_1.2 {

# Normal state properties

NO.allWrap = <div class="menu1-level2-no"> | </div>

# Enable active state and set properties:

ACT = 1

ACT.allWrap = <div class="menu1-level2-act"> | </div>

}

Attenzione a come le linee rosse contengono il contrassegno di estrazione ( | ) dell'HTML che Benoit ha preso dal (template) di Raphaels. Nesun codice complesso nel (template record).

L'unica cosa che dovete fare ora, è copiare questo oggetto "menu_1" cObject, che sarà la sotto-parte del "temp.mainTemplate" cObject:

...

# Main TEMPLATE cObject for the BODY

temp.mainTemplate = TEMPLATE

temp.mainTemplate {

# Feeding the content from the Auto-parser to the TEMPLATE cObject:

template =< plugin.tx_automaketemplate_pi1

# Select only the content between the <body>-tags

workOnSubpart = DOCUMENT_BODY

# Substitute the ###menu_1### subpart with dynamic menu:

subparts.menu_1 < temp.menu_1

# Substitute the ###content### subpart with some example content:

subparts.content = TEXT

subparts.content.value = HELLO WORLD - CONTENT

...

(Le linee rosse rappresentano i cambiamenti!)

... e il risultato parla da solo:

La struttura della pagina (sotto) è riflessa chiaramente nel menu qui sopra!

E' veramente semplice modificare il design del menù? Provate voi stessi a editare il foglio di stile che si trova in "fileadmin/template/main/res/stylesheet.css":

Vedete! Questo tipo di approccio permette di mettere i fattori importanti che controllano la grafica – (template) HTML e fogli di stile – fuori da TYPO3 per un accesso diretto ed incredibilmente facile per Raphael, il disegnatore di HTML/CSS. Benoit è stato chiamato per effettuare soltanto un lavoro secondario di programmazione all'intero del (template record ) di TypoScript - ha configurato semplicemente il frontend engine per usare la grafica di Raphaels nel modo che egli preferisce, sviluppando il miglior stile!

Per favore riferitevi a TypoScript per esempi se volete utilizzare l'oggetto HMENU e il relativi aregomenti.

Inserire il contenuto nella pagina

Il modo più conosciuto per controllare il contenuto della pagina in TYPO3 è quello di creare content elements della pagina nella tabella tt_content. In effetti non conosco nessuno che non utilizzi questo concetto, talmente è flessibile, potente e facile da implementare. Tuttavia potrebbe scontrarsi con i vostri pregiudizi sulla struttura incapsulata dei contenuti nel (templates) in HTML.

Abbiamo numerosi tipi predefiniti (Testo, testo/immagine, Elenco puntata, Tabelle, Caselle di Login, etc) e un (template) statico predefinito associato a TypoScript che genererà gli elementi per voi in modo automatico. Questo è un gran piacere! Dal momento che i content elements hanno un tipo e per ogni tipo molte opzioni aggiuntive, è impossibile generare questi content elements con un sistema di HTML-template fissi per ogni tipo di elemnto. Questo Non funzionerà e potrete rendervene conto quando avrete maneggiato questo concetto. Ciò perchè il cObjects combinato con funzioni PHP sono invocate per generare il contenuto in funzione di condizioni complesse.

Così se non possiamo disegnare gli elementi contenuti con il (templates) HTML, Cosa possiamo fare allora? Bene, se usate il più recente approccio per generare gli content elements, questa sarà l'estensione "css_styled_content", che affida le decisioni della grafica al vostro foglio di stile CSS esterno! In seguito tutto il contenuto sarà spostato negli elementi di base nell' HTML.

Vediamo come lavora. Primo, creiamo un content element:

Un content element

Nel modulo lista, clicca l'icona della pagina "License C", quindi seleziona "New" e poi nel frame di destra, clicca il link content wizard:

Selezionate "Testo con immagine a destra" e poi colonna "Normale":

Dopo aver inserito il contenuto nell'elemento e averlo salvato, dovreste visualizzare qualcosa del genere:

Così, ora abbiamo un content elements inserito nella pagina"License C":

Inserire un (template) statico

Per visualizzare il content elements abbiamo bisogno di includere uno (static template) che fornirà tutte le centinaia di linee di condice a TypoScript per generare la nostra rappresentazione. Tutto questo è fatto editando il (template record).

Tuttavia, la prima cosa da fare è quella di installare l'estensione, "css_styled_content":

Cliccate solamente il bottone installa e premete il bottone accetta nella prossima pagina.

(ATTENZIONE: Al momento di questo scritto (gennaio 2004) il plugin "CSS styled content" non è completo! E al 3° posto della lista delle cose da fare da Kaspers è previsto lo sviluppo subito dopo un giretto in snowboard.)

Tornate al modello(template): Nel modulo Template, cliccate questo link:

Dovreste vedere il file statico "CSS Styled Content" disponibile nel campo "Include Static (from extensions)":

Cliccatelo, salvate il (template) e osservate in Template Analyzer:

il Template Analyzer mostra la gerarchia del (template records) e dello (static templates) che può essere agganciato al "principale template record". Selezionando lo ( static template) per includerlo, esso sarà semplicemente incluso prima di generare il codice TypoScript dentro il (template record) "NEW SITE". Ciò significa che tutto l'oggetto definito all'interno del ( static template) "EXT:css_styled_content/....." può essere copiato e usato nel (template record) NEW SITE. Questo è quello che dovrete fare ora, incudendo lo static template contenuto nel'oggetto "styles.content.get" che è un content object che seleziona tutto il content elements dalla colonna "Normal" della attuale pagina:

Così il (template record), cambierà questa parte della definizione dell'oggetto "temp.mainTemplate" nel modo seguente:

...

# Main TEMPLATE cObject for the BODY

temp.mainTemplate = TEMPLATE

temp.mainTemplate {

# Feeding the content from the Auto-parser to the TEMPLATE cObject:

template =< plugin.tx_automaketemplate_pi1

# Select only the content between the <body>-tags

workOnSubpart = DOCUMENT_BODY

# Substitute the ###menu_1### subpart with dynamic menu:

subparts.menu_1 < temp.menu_1

# Substitute the ###content### subpart with some example content:

subparts.content < styles.content.get

...

se voi effettuate un refresh della presentazione per la pagina "License C" dovreste vedere questo:

Nel code HTML vedrete questo:

Apparentemente l'intestazione degli elementi contenuti è stato reso dentro i tag <h1>. Se voi invece selezonate un altro tipo di "Layout" per l'intestazione otterrete la rappresentazione dentro es. <h2> (per il Layout 2).
Ogni linea del testo body è spostato nei tag <p> con la classe settata a "bodytext". Così potete specificare quale stile richiamare per il contenuto della pagina dal contenuto del vostro elemento dal foglio di stile! Prestate attenzione a come Raphael ha progettato in modo appropriato il contenuto fittizio nel file (template files) per usare i tag <p class="bodytext">.
Ogni content element inserito avrà un tag <a> con il valore del nome settato con l' uid del content element. Questo è il punto di ancoraggio che sarà usato nell' URL per andare direttamente ad una determinata posizione nella pagina.
Proviene dall'oggetto HMENU generando il menù di 2°-livello. Notate come il collegamento automaticamente punta alla pagina di destra e aggiunge perfino un controllo per onFocus.

L'Albero degli Oggetti?

Ora, copiando questo content element "styles.content.get", che cosa stiamo realmente inserendo nell'albero degli oggetti? Diamo uno sguardo con Object Browser:

Troviamo due cose interessanti:

Il percorso dell'oggetto "styles.content.get" contiene un cObject del tipo CONTENT. Guardando gli attributi sembra ragionevole concludere che esso seleziona le annotazioni della tabella "tt_content" classificandoli per il contenuto dei campi "sorting". Per maggiori informazioni guardare il .
Un nuovo consultate la documentazione perl'estensione "css_styled_content".

I curiosoni potranno osservare all'interno del codice della classe "tx_cssstyledcontent_pi1" e controllare la logica esistente. Qui un pezzo di codice della funzione main():

function main($content,$conf) {

$this->conf = $conf;

// This value is the Content Element Type - determines WHAT kind of element to render...

$CTypeValue = (string)$this->cObj->data["CType"];

$content="";

switch($CTypeValue) {

case "header":

$content = $this->getHeader().$this->render_subheader();

break;

case "bullets":

$content = $this->getHeader().$this->render_bullets();

break;

case "table":

$content = $this->getHeader().$this->render_table();

break;

case "text":

$content = $this->getHeader().$this->render_text();

break;

case "image":

$content = $this->getHeader().$this->render_image();

break;

case "textpic":

$content = $this->render_textpic();

break;

...

Aggiungere il supporto XHTML

Se volete creare un sito web con supporto di XHTML potrete farlo con TYPO3 versione 3.6.0 dedicata al supporto di XHTML (livello: XHTML transitional).

Per questa tutorial dovrete assicurarsi che il (templates) HTML utilizzi il supporto XHTML. Quello è il primo passo di cui naturalmente dovrete accetarvi.

Il passo successivo è far generare a TYPO3 un doctype XHTML in uscita. Ciò è fatto facilmente da questa semplice linea TypoScript inserita nel campo Setup del (template records):

page.config.doctype = xhtml_trans

Inoltre, anche i menù dovrebbero essere supportati. A questo punto caratteri speciali come “&” devono essere eliminati. Questo dovrebbe essere evitato. Così il codice del menu TypoScript dovrebbe essere cambiato aggiungendo quatro linee (qui evidenziate con colore rosso):

# Menu 1 cObject

temp.menu_1 = HMENU

# First level menu-object, textual

temp.menu_1.1 = TMENU

temp.menu_1.1 {

# Normal state properties

NO.allWrap = <div class="menu1-level1-no"> | </div>

NO.stdWrap.htmlSpecialChars = 1

# Enable active state and set properties:

ACT = 1

ACT.stdWrap.htmlSpecialChars = 1

ACT.allWrap = <div class="menu1-level1-act"> | </div>

}

# Second level menu-object, textual

temp.menu_1.2 = TMENU

temp.menu_1.2 {

# Normal state properties

NO.allWrap = <div class="menu1-level2-no"> | </div>

NO.stdWrap.htmlSpecialChars = 1

# Enable active state and set properties:

ACT = 1

ACT.stdWrap.htmlSpecialChars = 1

ACT.allWrap = <div class="menu1-level2-act"> | </div>

}

Ciò assicurerà che le etichette del menu passeranno attraversola funzione PHP htmlspecialchars() la quale convertirà per esempio “&” con “&”

Dopo avere fatto questo potete esaminare il sito con Opera 7 che ha una scorciatoia comoda per testare i supporti:

Basta cliccare il pulsante destro sulla pagina HTML, selezonate “Frame”, poi “Validate source”:

Opera invierà automaticamente per voi il codice della pagina all'URL “http://validator.w3.org/” e se avrà successo dovreste vedere questa schermata:

Cleaning everything up a bit

Ora abbiamo completato il nostro sito web.Benoit e Raphael hanno portato a termine il loro lavoro e nel frattempo Picouto potrebbe riempire tutto il content elements per ogni pagina nell'albero? Non sappiamo, ma le basi del sito web sono sistemate, basato completamente su di un normale file html inserito dentro la cartella "fileadmin/template/main/" con il menù e le aree di contenuto sostituite dinamicamente.

Better template structure

L'unica cosa da sistemare è una migliore gestione del (template record). Anche se la quantità di TypoScript usato si conserva al minimo possiamo vedere facilmente che tale (template record) diventa rapidamente molto grande e poco pratico. La soluzione è quella di creare una serie di (template records) da includere:

Prima di tutto potreste create una nuova pagina al livello della radice dell'albero della pagina. Selezionare il tipo di "sysFolder" (significa "spazio di immagazzinaggio per qualsiasi elemento del database desiderate") e chiamarlo Template Storage.

Poi create tre (template records) come vedete di seguito:

Non vistate il checkbox "Clear"! Copiate solamente l'oggetto "temp.xxxx" definizione del (template) in questo "NEW SITE". L'ordine di questa lista è insignificante.

Il prossimo passo è quello di includere questi tre (templates) nel principale (template) di "NEW SITE". Editate il (template) "NEW SITE":

L'ordine è importante: il primo (template) della lista è quello incluso per primo and since the template record "ext: Main TEMPLATE cObject" fate la copia per esempio dell'oggetto "temp.menu_1" deve essere incluso come ultimo.

Salvate il (template record) ed osservate la nuova struttura con Template Analyzer:

Come potete vedere , prima è stato incluso (static template), poi i tre (base templates) dalla nostra cartella “storage folder” ed infine il (template record) principale. Per ogniuno potete cliccare il titolo e osservare il contenuto qui sotto.

Alcune considerazioni sul HTML-design

Come potete vedere da questa sezione del tutorial l'implementazione di un (template) HTML da un progetto grafico è possibile, in modo molto comodo assicurando la piena compatibilità con il lavoro originale(poiché nessun contrassegno deve essere inserito manualmente nel (template) HTML). inoltre si utilizzano soltanto le tecnologie conosciute come HTML el CSS - no confusing XLST stylesheets need to be build (although XSLT as renderer can be deployed on PHP-level by Mr. Benoit, se vogliono fare così).

But although the freedom to Mr. Raphael, the designer, is almost total he still needs to understand the basics of dynamic and static content.

Make clear quali parti sono dinamiche e quali statiche

Raphael deve in primo luogo capire, probabilmente insieme all'intera squadra del sito web, quali parti della pagina sono statiche e quali dinamiche. Le parti statiche sono tutto quelle che TYPO3 NON tocca. Le parti dinamiche si suppone saranno sostituite con contenuto provenienti dai dati interni a TYPO3.

Una volta che le zone dinamiche sono identificate, Raphael ha bisogno di fare due cose:

La parti che deveno essere incapsulata in un singolo elemento HTML. Questo dovrebbe essere un elemento <div> , un elemento <td>-, o un elemento <span>.
L'elemento incapsulato deve avere una attributo id o classe che il plugin Template Auto-parser configurerà e sposterà in una sotto-parte contrassegnata. Per esempio <td id="content"> per la cella di una tabella che dovrà possedere il contenuto.

E' corretto lasciare che il contenuto fittizio rimanga nel file (template file) dopo tutto verrà sostituito con le controparti dinamiche.

Contrassegnare semplicemnte, usando i fogli di stile CSS

Siamo nell'anno 2004 è venuto il momento di salutare il tag < font>, l'attributo bgcolor è tutto inserito in un foglio di stile esterno. Per un'implementazione del CMS

In questa parte del tutorial il miglior esempio sarà il menù di 2° livello:

<div class="menu1-level2-no"><a href="#">Level 2 item</a></div>

<div class="menu1-level2-act"><a href="#">Level 2 item (act)</a></div>

</td>

Qui diamo uno guardo al singolo elemento (quello rosso qui sopra). questo potrebbe essere implementato con qualcosa del genere:

</font></td>

</tr>

<tr>

</tr>

</table>

...

</td>

Ora, ricordate il nostro TMENUITEM object dentro il (template record) è stato definito per spostare l'elemento con questo semplice tag <div>:

temp.menu_1.1 {

# Normal state properties

NO.allWrap = <div class="menu1-level1-no"> | </div>

...

... e sì, avete indovinato; con la suddetta implementazione avremmo bisogno di spostare gli elementi così:

temp.menu_1.1 {

# Normal state properties

NO.allWrap (

|

</font></td>

</tr>

<tr>

</tr>

</table>

)

...

E se neppure questo non è abbastanza: dovreste aggiungere un nome alla classe del tag A by another property of the NO state object and the "gray_dotted_line.gif" file would need to be prefixed with the correct file path - something like "fileadmin/template/main/".

Don't use class attributes for dynamic links

Many designers might think that the best way to mark up their menu elements and other links would be to use a class attribute for the <A>-tag. Example:

...

</td>

Tuttavia questo non è il caso del tag <A> è precisamente che cosa è generato automaticamente da TYPO3! Così per fare questo lavoro per il nostro TMENUITEM avrete bisogno di aggiungere proprietà TypoScript:

temp.menu_1.1 {

# Normal state properties

NO.allWrap = <div> |</div>

NO.ATagParams = class="menu1-level1-no"

...

Aggiunge proprietà più complesse TypoScript dà meno flessibilità al foglio di stile. For instance se desiderate controllare l'apparenza del link da CSS in questo caso potete utilizzare:

A.menu1-level1-no { color: navy; }

A.menu1-level1-no:hover { color: red; }

... ma non potete controllare lo spostamento dell'elemento <div>- senza che esso non sia stato ettichettato con una classe o un'id! If you just stuck to the original way where the <a>-element had no class attribute, but the <div>-element had, then you could control both the <div>-layer and all links inside of it:

DIV.menu1-level1-no { padding: 2px 2px 2px 2px; }

DIV.menu1-level1-no A { color: navy; }

DIV.menu1-level1-no A:hover { color: red; }

Stay clear of row/colspans!

Questo è probabilmente l'assassino numero uno per il contenuto dinamico - usare colspan per creare un oggetto dinamico! That just leaves it out of question. Per esempio considerate questa implementazione alternativa del menu:

<tr>

. . .

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td class="menu1-level2-no"><a href="#">Level 2 item</a></td>

</tr>

<tr>

<td class="menu1-level2-no"><a href="#">Level 2 item</a></td>

</tr>

<tr>

<td class="menu1-level2-act"><a href="#">Level 2 item (act)</a></td>

</tr>

<tr>

</tr>

Ciò è quasi impossible da implementare! La prima voce di menù è in una fila di tabella con il contenuto della cella, le altre 6 voci di menù sono separate in file di tabella. Inoltre la cella con il contenuto della tabella ha bisogno di un'attributo colspan="7" in modo che esso comprenda tutte le file per il menu!

Questo è chiaramente un cattivo design dal punto di vista tecnico:

Il contrassegno per il menu è sparso in eccessive posizioni differenti nel codice HTML
c' è una dipendenza fra l'attributo colspan e il numero di voci del menù (ricordiamo essere dinamico!)

So designers should stay clear of such designs. Instead designers like Mr. Raphael should learn to create markup for dynamic elements like menu in a manner so they are easily repeatable. These are good examples:

The one from our current template:

...

</td>

Un'implementazione alternativa con le tabelle:

...

</table>

</td>

Gli esempi avrebbero potuto essere più complessi di un semplice elemento spostato in una tabella! Il punto non è la quantità di voci HTML- Il punto è la naturale ripetizione del contrassegno!

Raphael dovrebbe comprendere questa problema così che Benoit non deve passare le ore a implementare un HTML difettoso-struttura -e finalmente Picouto potrà essere felice dello sviluppo veloce derivando dalla collaborazione simbiotica di Raphael e Benoits che pagherà loro il pranzo!

Modern Template Building, Part 1 (MTB/1) -

4 / 5

carica PDF