Sei sulla pagina 1di 9

Come creare Template per joomla con NVU

di Salvatore Schirone 1 ottobre 2006


Sommario In questo tutorial vedremo come usare una estensione di NVU per creare facilmente un template per joomla. Il tutorial ` una libee ra traduzione di: http://www.open4g.com/index.php?option=com_ content&task=view&id=13&Itemid=29 Sebbene gli strumenti e le istruzioni si riferiscano al CMS Mambo, versione 4.5.3, abbiamo avuto modo di testarle con risultati positivi su joomla 1.0.x.

Indice
1 Introduzione 2 Le funzioni di NVU Mambo template builder 3 Procurarsi gli strumenti 4 Creamo la struttura del template 5 Creamo il le templateDetails.xml 6 Creamo il le di layout 7 Creazione del pachetto dinstallazione 2 2 2 3 5 6 6

Introduzione

Se siamo stanchi di generare ogni volta manualmente il templateDetails.xml, le directory della struttura del template, il le vuoto index.html, i le css, la directory delle immagini, ecc., oggi abbiamo uno strumento facile e potente che lo far` automaticamente per noi: NVU mambo template builder. a Dando per scontato che sappiamo cosa sia NVU e come si usa (www.nvu. com), prover` ad orire le istruzioni di base per generare un template per o Joomla usando la suddetta estensione. Non parleremo di come generare il layout della tabella per includere i tag PHP dei blocchi di joomla (cosa realizzabile facilmente usando NUV e la barre facilitanti della stessa estensione)1 , n delle altre questioni relative al e disegno della mascherina (usando GIMP)2 , per questo abbiamo gi` preparato a un pacchetto con esempi pronti.

Le funzioni di NVU Mambo template builder

La corrente versione di NVU Mambo template builder, la 0.0.9beta ha le seguenti funzioni: Permettere di inserire i tag PHP che deniscono le posizioni dei blocchi di Mambo nella nostra maschera Genera la struttura del template Genera un le generico template css.css pronto per essere personalizzato Genera il le index.html nelle dir del template delle immagini ecc.. Genera ed aggiorna un templateDetails.xml valido Cambia tutti Genere un pacchetto zip pronto per essere installato

3
1 2

Procurarsi gli strumenti


Questo sar` oggetto di un altro articolo e capitolo di un futuro tutorial completo. a Idem

Procuriamoci tutti gli strumenti:

NVU: http://www.nvu.com/download.html NVU Mambo Template Builder extension: http://mamboforge.net/projects/open4g/ NVU Mambo Template Builder extension si installa come ogni altra estensione della suite mozilla, basta aprire laerchivio xpi nel programma NVU. Al successvio riavvio del programma le nuove funzioni saranno immediatamente disponibili (cfr: Figura 1)

Figura 1: Come si presenta NVU dopo linstallazione della nuova estensione

Creamo la struttura del template

Prima di tutto abbiamo bisogno di creare la directory di lavoro. Clicchiamo sul pulsante Builder il primo in alto a sinistra nella della seconda toolbar. 3

Figura 2: La nestra dalla quale gestire le fari della composizione del template Si apre una nestra, dalla quale potremo segire tutti gli step dello sviluppo (Figura 2). Innazitutto cliccare su Browse e selezioniamo una cartella vuota da usare per creare il nostro template. Si raccomanda di scegliere una la directory template della installazione locale di Joomla e di chiamrla col nome che vogliamo dare al template, perch il nostro costruttore generer` automaticamento e a larchivio con lo stesso nome. Ora possiamo costruire la struttura del nostro template Clicchiamo sul pulsante Build Template Structure che nel frattempo si sar` reso attivo. Se tutto ` andoto bene avremo ottenuto due subdirectory a e css e images. ATTENZIONE: Se volete usare un index.php gi` egenerato e un vostro a template css.css, NON CLICCATE SU Build Template Structure altrimenti saranno sovrascritti da quelli generati dal costruttore.

Figura 3: La nestra dalla quale gestire le fari della composizione del template

Creamo il le templateDetails.xml

Cliccare su Edit Template Info. Si apre una nstra di dialogo che ci permette di inserire tutte le nostre informazioni, cambiando quelle proposte di default nei vari campi. ATTENZIONE: per il nome usare quello scelto per la directory che ci viene gi` proposto, per evitare problemi nella generazione del pacchetto a dinstallazione. Clicanndo su Save ci viene generato un messaggio che ci avverte che il le ` stato creato con successo (Figura 3) e Ora possiamo chiudere il programma. IMPORTANTE: dovete cliccare il combobox diretory sopra di funzionamento per attivare Publish and Secure Template e aggiornare la lista dei le. QUESTA FUNZIONE SARA DISPONIBILE NELLA VERSIONE SUCCESSIVE!

Figura 4: La nestra dalla quale gestire le fasi della composizione del template

Creamo il le di layout

Prima di inziare a lavorare, bisogna sapere che NVU non gestisce i le php pertanto dobbiamo generare un le xhml che chimeremo index.xhtml. Possiamo partire da uno gi` esistente o crearne uno completamente nuovo, a inserendo i tag php di base, creare la struttura a tabele e inserendo i tag php dei blocchi utilizzando le barre dellestensione NVU Mambo template builder. I valori dei singolo tag sono visualizzabili usando la vista sorgente, come nellimmagine seguente, Figura: 4: Apportando le modiche, cercate di impostare le giuste preferenze della pagina, settabile da Strumenti -> Preferenze -> Imposta pagina: il set di caratteri a ISO-8859-1 e dalla scheda avanzati, il linguaggio xhtml. Alla termine salviamo il le index.xhtml nella nostra directory du lavoro e le relative immagine nella cartella images. Riaprendo di nuovo Builder, avremo una situazione analoga a quella in gura: 5: Clicchiamo sul tasto Publish and Secure Template e sar` prodotto un a nuovo le php nella directory, come in gura: 6

Creazione del pachetto dinstallazione

Selezioniamo tutti i le e le cartelle con il segno di spunta cos` come nella gura 7 Clicchiamo su Build Zip Install Package: abbiamo ottenuto il nostro pacchetto che possiamo installare in joomla nel modo consueto dal pannello di ammnistrazione. Buon divertimento!

Figura 5: La nestra dalla quale gestire le fari della composizione del template

Figura 6: La nestra dalla quale gestire le fari della composizione del template

Figura 7: La nestra dalla quale gestire le fari della composizione del template