Introduzione

Questo manuale si concentrerà sulla creazione di un tema AutoTheme dal modello HTML, dalle immagini e dai fogli di stile che sono stati realizzati nella parte prima. I concetti presentati qui possono essere applicati a qualsiasi progetto o modello HTML che intendete usare per creare un tema AutoTheme.

Per questo manuale utilizzeremo Macromedia Dreamweaver MX (da ora in poi DW) come HTML editor. Alcuni preferiranno utilizzare altri strumenti ma i concetti di base saranno gli stessi.

I documenti HTML e le immagini utilizzate in questo manuale sono posti nella cartella files/. I temi di lavoro sono posti nella cartella themes/AT-Tutorial/.

Sguardo d’insieme di un documento AutoTheme

I modelli HTML che usate per il vostro tema possono essere chiamati come volete. I nomi di file utilizzati qui sono tratti dalla Parte prima e sono praticamente standard all’interno della comunità di AutoTheme.

Files richiesti

theme.php

Questo è un file del CMS ed è richiesto per caricare correttamente il tema. Fate attenzione ad usare un teme.php di AutoTheme, disponibile in qualsiasi dei temi inclusi con AutoTheme.

theme.cfg

Questo file contiene l’intera configurazione del vostro tema AutoTheme. Questo file viene creato dal pannello di amministrazione di Autotheme e tutto quello che dovete ricordare è di accertarvi che i permessi del file siano impostati a 777 o comunque che esso sia scrivibile dal server. Non avrete bisogno di fare alcunché con questo file, tranne forse farne una copia prima di modificare il tema.

theme.html

Questo file è la base del nostro tema AutoTheme. In sostanza è un file HTML che definisce l’aspetto della pagina e contiene i comandi AutoTheme (chiamati anche tag) di cui parleremo dopo. Potete utilizzare tranquillamente qualsiasi file di layout HTML per questo, ma, a causa della natura dinamica dei dati che verranno visualizzati, dovrete essere sicuri che il progetto della pagina permetta questa dinamicità. Nella Parte prima di questo manuale abbiamo creato un file “template.htm” e discusso alcune delle caratteristiche necessarie che un modello AutoTheme deve possedere. Se non lo avete ancora fatto, dateci prima un’occhiata.

Modelli Blocco

Di norma ci sono tre posizioni per i blocchi: Sinistra, Destra e Centro. Potete creare un numero di posizioni praticamente illimitato (i cosiddetti AutoBlocks) sopra e sotto le tre che abbiamo detto. Questo manuale mostrerà come creare dei modelli per le tre posizioni standard.

ü centerblock.html

ü leftblock.html

ü rightblock.html

Questi tre file contengono il codice HTML per le differenti posizioni dei blocchi e sono richiamate dal modello “theme.html”(o qualsiasi altro modello abbiate scelto). Pensate a questi blocchi come delle inclusioni richiamate da l modello “theme.html” attraverso l’uso di tag di AutoTheme.

Abbiamo già creato dei blocchi nella Parte prima di questo manuale. Dateci una scorsa.

Nuovi modelli

Anche qui di solito ci sono due modelli per visualizzare gli articoli News. I seguenti verranno creati in questo manuale:

ü article.html

ü summary.html

Questi file sono molto simili ai blocchi per quanto riguarda i concetti e funzionano come delle inclusioni. Il file “summary.html” comparirà nella pagina principale del CMS (solitamente la homepage) e “article.html” sarà chiamato se verranno richiamate le news estese (es., se il link “leggi tutto” viene attivato in un articolo di sommario). “summary.html” è anche usato come sommario nel modulo Argomenti.

In aggiunta a questo, se selezionate l’opzione sommario alternato nel pannello di amministrazione di AutoTheme, potete avere due modelli di sommario che compaiono uno dopo l’altro alternativamente.

ü summary1.html

ü summary2.html

Cartelle

All’interno della cartella del vostro tema sono necessarie alcune sottocartelle:

ü images

ü lang

ü style

Le cartelle style e images si spiegano da sé, ma la cartella lang richiede qualche osservazione extra. La cartella lang contiene una cartella per ogni lingua utilizzata nel CMS. E’ una buona regola, quando si progettano temi, che ogni termine “codificato”nel tema sia posto nel file “global.php” di ciascuna lingua utilizzata. Per esempio, immaginiamo che vogliate una barra di navigazione con alcuni link codificati nel vostro tema:

Poi aggiungete questo codice a lang/ita/global.php o ad ogni altra lingua che usate per il vostro sito.

Questo rende anche più semplice ad un utente l’aggiornamento del tema perché è sufficiente cambiare le definizioni di una lingua senza dover passare attraverso centinaia di linee di codice in HTML.

Potete rendere le cose ancora più semplici all’utente aggiungendo delle definizioni per i link:

Poi basta aggiungere un nuovo insieme di definizioni al vostro file global.php:

Costruiamo il Tem a

Nella Parte prima di questo manuale abbiamo creato un modello su cui basare il nostro tema: “template.htm”. Useremo questo modello come base di partenza.

File e cartelle

il modo migliore per iniziare la creazione di un tema AutoTheme è usare un tema AutoTheme esistente come base di partenza per lo sviluppo.

Create una cartella, non importa il nome, e copiate dentro tutti i file della cartella themes/AT-Example/. Questo tema contiene i file di base richiesti e modelli in HTML per costruire un tema. E’ incluso anche il tema AT-Blank, il qiale contiene tutti i file di base ma nessun modello HTML.

Immagini

Apriamo ora il file “template.htm” creato nella Parte prima e aggiungiamo qualche tag AutoTheme in modo da permettere al tema di trovare le proprie immagini. Il tag da usare è <­!-- [image-path] --> che inserirà il percorso corretto alle vostre immagini una volta che il tema sia attivato in un CMS.

Nota: Se includete JavaScript o altri fogli di stile , ecc. assicuratevi di definire il percorso corretto. Di solito io metto questi file nella cartella image e uso il tag del percorso di image per richiamarli. E’ questo il caso, ad esempio, per Macromedia Flash.

Il modo più semplice per far questo è usare un cerca e sostituisci, per esempio:

Trova tutte le istanze di images/ e sostituiscile con <­!-- [image-path] -->. Ora il vostro modelle di percorso alle immagini dovrebbe apparire così:

Ora copiate la cartella delle immagini dal modello che avete creato nella Parte prima del manuale alla cartella del tema su cui state lavorando. Fate la stessa cosa con la cartella dello stile.

Il modello ora si comporterà come un tema AutoTheme non appena lo salverete come “theme.html”. Fatelo ora e non preoccupatevi del file “theme.html” che già esiste: sovrascrivetelo pure. Era solo un esempio.

Trucco : Rinominate il “theme.html” esistente come ” themeBAK.html”. Potete poi utilizzarlo come un riferimento per i tag, ecc.

Impostate a questo punto il tema come tema di default per il vostro CMS. Vedrete che il nostro tema ora è impostato come default ma non visualizzerà i dati in maniera corretta nei blocchi o in qualsiasi modulo avete deciso di far apparire in fondo alla pagina esterno al vostro modello. Nessun timore. Metteremo tutto a posto fra poco.

Creiamo i Bloc chi

Ora integriamo i blocchi di sinistra nel nostro tema. Questa procedura è la stessa per i blocchi di centro e di destra così come per gli AutoBlocks, quindi non dovete far altro che ripeterla.

ü Aprite “leftblock.html” e cancellate tutto il suo contenuto.

Nel vostro “theme.html” tagliate tutte le informazioni incluse fra i tag : <­!-- Begin Block --> e <­!-- End Block --> inclusi i tag di commento (non richiesti ma ottimi per i riferimenti). Tagliate solo la prima istanza e solo all’interno della colonna di sinistra. Cancellate gli atri blocchi dalla colonna.

Incollate questo dentro “leftblock.html”. Il codice apparirà così:

Ora aggiungiamo alcuni tag al codice (sovrascrivete le aree che sono in grassetto nelle righe sopra):

<­!-- [block-title] -->

<­!-- [block-content] -->

Il codice ora apparirà così:

leftblock.html

Ora salvate il file “leftblock.html”. Salvatelo anche come “centerblock.html” e “rightblock.html”, perché usiamo lo stesso modello per tutti i nostri blocchi). Potete usare differenti modelli di blocco per posizioni diverse se lo desiderate.

Visualizziamo i Blocchi

Per includere tutti i blocchi assegnati alla posizione di sinistra all’interno del vostro “theme.html” dovete usare il tag <­!-- [left-blocks] --> (in cui sinistra può diventare la posizione di centro, destra o AutoBlock). Nel pannello di amministrazione di AutoTheme potete specificare quale modello HTML viene utilizzato per ciascuna posizione. Potete far sì che ogni posizione richiami un modello di blocco differente, oppure che tutte le aree abbiano lo stesso modello. E’ importante che il blocco HTML sia autocontenuto (celle, tabelle, div, ecc) in quanto saranno ripetute un numero di volte X in relazione al numero di blocchi definiti assegnati a questa posizione.

Nel file “theme.html” aggungete il tag <­!-- [left-blocks] --> alla vostra colonna di sinistra.

Ora la vostra colonna sinistra apparirà così:

theme.html

Chiaro e semplice! Salvate “theme.html” e ripetete questa procedura per le colonne di centro e di destra. I tag da aggiungere sono :

<­!-- [center-blocks] -->

<­!-- [right-blocks] -->

Ora date uno sguardo al vostro CMS; tutti i blocchi saranno visibili. Date un’occhiata al file “theme.html” fornito con il manuale se avete ancora qualche dubbio.

Cosa dire degli AutoBlocks? Questa è la grande novità di AutoTheme! Non siete limitati a 3 posizioni di blocchi. Potete anche integrare altre zone nel vostro tema utilizzando la stessa procedura descritta sopra. Le altre aree blocchi diventeranno utili per modelli di moduli e layout di blocchi (esempio, potete decidere che nell’area Download sia visibile solo l’area1 ma non i blocchi di sinistra). Tutto quello che dovete fare è aggiungere il tag area1 sotto il tag che codifica i blocchi di sinistra:

theme.html

Dovete accertarvi di aver aggiunto lo stesso codice HTML che si trova in “leftblock.html”nel file “area1block.html”. Dopodiché si tratta solo di impostarlo come attivo nel pannello di amministrazione di AutoTheme . Studieremo questo argomento nella Parte terza.

Visualizziamo i Modul i

Vi è un numero di cose cui pensare prima di fare questa operazione. Volete impostare News come pagina iniziale? Se è così intendete visualizzare ciascuna News come un blocco individuale come fossero linee o piuttosto raggruppate in un blocco che le racchiuda tutte? Utilizzerete sommari alternati?

Vediamo l’approccio che dobbiamo utilizzare per ciascun caso:

News

Il primo caso prevede che le News siano la pagina di inizio con i sommari contenuti nei blocchi.

Vogliamo visualizzare ogni news sotto i blocchi centrali nella colonna di centro. Saranno contenute in un blocco identico al blocco di centro e avranno sommari alternati.

Per prima cosa apriamo il nostro “theme.html” e aggiungiamo il tag <­!—[modules] --> nella colonna di centro (questo tag è richiesto in ogni modello principale tipo “theme.html”):

theme.html

Salvate “theme.html” e date un occhio al vostro CMS. Il modulo verrà ora visualizzato sotto i blocchi di centro.

Useremo ora il codice del file “centerblock.html” per il contenitore del sommario, quindi aprite “summary.html” e sovrascrivete il codice esistente con il codice di “centerblock.html”. Aggiungiamo ora qualche tag:

summary.html

Tutto quello che abbiamo fatto è aggiungere un poco di HTML dove si trovavano il titolo e il contenuto del blocco. Come potete vedere abbiamo aggiunto qualche altro tag per richiamare la data delle news. Queste sono autoevidenti e una lista completa può essere vista nel Manuale di AutoTheme. Abbiamo anche definito nuove classi CSS, modificabili da dentro il vostro foglio di stile CSS.

Il secondo caso prevede che tutte le News siano contenute nello stesso blocco. Vediamo come fare: spostiamo il contenitore blocco da “summary.html” a “theme.html”. “Avvolgiamo” il contenitore blocco intorno al tag dei moduli.

theme.html

Osservate ora come abbiamo avvolto il tag <­!—[modules] --> dentro un blocco. Questo ha anche un altro vantaggio! Tutti i nostri moduli saranno ora contenuti in un blocco! Vi è tuttavia ancora un problema. Il modulo blocco non si estende sul lato destro dello schermo se non è presente il blocco di destra.

Per mettere a posto questo difetto creiamo un altro modello che sarà richiamato dai moduli, intendendo con questo altri moduli quali Downloads, ecc.

Salvate “theme.html” come “themeModules.html”.

Quello che stiamo per fare è aprire il nostro pannello di amministrazione di AutoTheme nel CMS. Navigate attraverso il vostro tema, ignorate ogni avvertimento e cliccate su “General”. Questa è la configurazione di default che verrà utilizzata da tutte le pagine. Quello che vogliamo fare è impostare il modello principale come themeModules.html. Fatelo e cliccate Salva. Ora ogni volta che un modulo viene attivato (in sostanza ogniqualvolta un visitatore si trovi da qualche parte che non sia la homepage, il modello usato sarà themeModules.html).

Ora quello che dobbiamo fare è rimuovere la colonna di destra da themeModules.html:

E cambiare qualche impostazione per l’ampiezza della colonna di centro:

“article.html”sarà richiamato se verrà invocata la news estesa (cioè se viene cliccato il pulsante ”leggi tutto”). Potete creare un nuovo modello per questo, ma visto che abbiamo già un blocco che gira intorno a tutti i nostri moduli non ce ne preoccupiamo per ora.

Aprite “summary.html” e “article.html”. Sovrascrivete “article.html” con l’ HTML di “summary.html”. Dobbiamo solo fare alcuni cambiamenti, visibili qui sotto in grassetto:

article.html

Abbiamo anche rimosso alcuni tag e se guardate al codice originale del file “summary.html” potrete facilmente rendervi conto di quello che abbiamo fatto.

Header e Footer

Aggiungiamo ora qualche tag ai nostri header e footer. Aprite “theme.html”

Prima aggiungiamo una login per l’utente, un messaggio di benvenuto e un banner nella barra di navigazione:

theme.html

I cambiamenti da fare sono in grassetto.

Ora aggiungiamo il tag per il messaggio nel footer.

theme.html

Tutto quello che facciamo è semplicemente sostituire il testo del nostro template con tag di AutoTheme.

Dovete fare queste modifiche tanto a “theme.html” che a “themeModules.html”. Questo è tutto!

Sommario

Questo manuale ha mostrato come prendere un codice HTML sul tipo di quello creato nella Parte prima di questo tutorial e creare un modello di tema pronto all’uso. La Parte terza di questo manuale mostrerà come prendere questi modelli e creare un tema nel pannello di amministrazione di AutoTheme.