maidireJoomla.it

Esperienze nel mondo di Joomla e dei CMS

logo_maidirejoomla
Home I Templates Guida ai template di Joomla Parte 3
Guida ai template di Joomla Parte 3 E-mail
Martedì 05 Gennaio 2010 13:56

{magictabs}

Esercizio 2::

Esercizio 2 - Secondo template

E se adesso volessimo aggiungere una colonna a destra della zona destinata ai contenuti? Qualcosa del genere insomma:

modello01

La colonna che vogliamo aggiungere altro non è che un ennesimo container DIV da posizionare a destra di quello denominato Main Content. In sostanza il trucco sta nel trovare il punto di inserimento del nuovo container DIV. Riprendiamo quindi il codice HTML precedente e, visto che abbiamo usato delle classi del fogli di stile adeguatamente nominate, lo troveremo immediatamente.


<body>
 <div class="principale">
 <div class="header"> Header </div>
 <div class="left"> Left </div>
 <div class="maincontent"> Main Content </div>
 <div class="right"> Right </div>
 <div class="footer"> Footer </div>
 </div>
</body>

Come vedete è stato aggiunto un nuovo tag DIV al quale verrà applicata la classe right del foglio di stile. Questa classe la aggiungeremo al foglio di stile del template scrivendola così:


.right {
 text-align: center;
 background-color:#6666CC;
 width: 15%;
 height: 600px;
 float:left;
}

Dovremo però avere l'accortezza di modificare la larghezza (width) delle due classi right e main-content per adattarle alla presenza del nuovo container. Ad esempio assegnamo il 15% di larghezza alla colonna destra e il 70% di larghezza alla zona centrale: 15%(sinistra) + 70% (al centro) + 15%(a destra) = 100% della pagina.

Ecco un esempio pratico di quello che abbiamo appena fatto.

||||

Esercizio 3::

Esercizio 3 - Complichiamoci la vita

Un ultimo sforzo adesso e vediamo come modificare il precedente template secondo questo schema:

modello02

Come vedete sono state aggiunti due container: top e breadcrumb. Uno si trova proprio sotto l'header e l'altro sopra la main-content ma sempre tra i container left e right. Quest'ultimo sarà un pò più complicato da posizionare. Sulla base di quanto detto prima posizionare il container top non è cosa difficile: individuiamo il container header e subito dopo inseriamo il tag div che ci serve:


<body>
 <div class="principale">
  <div class="header"> Header </div>
  <div class="top"> Top </div>
  <div class="left"> Left </div>
  <div class="maincontent"> Main Content </div>
  <div class="right"> Right </div>
  <div class="footer"> Footer </div>
</div>
</body>

Per l'altro container invece la cosa è più complessa. Dal momento che i tre container div (left, main-content e left) sono disposti in sequenza e uno alla destra dell'altro grazie alla proprietà float del foglio di stile la presenza di un nuovo container che interrompe la sequenza fa saltare tutto. Provare per credere.

La soluzione è abbastanza semplice: creare un container all'interno del quale racchiudere i due container div di classe breadcrumbs e main-content. Nell'immagine seguente vedete questo nuovo container disegnato con il colore viola:

modello02_1

Ed ecco come dovrà essere modificato il codice html della pagina:


<div class="principale">
 <div class="header"> Header  </div>
 <div class="top"> Top  </div>
 <div class="left">  Left  </div>
 <div class="main-area">
 <div class="breadcrumb"> Breadcrumb  </div>
 <div class="main-content">  Main Content </div>
 </div>
<div class="right">  right  </div>
<div class="footer"> Footer  </div>
</div>

Come vedete abbiamo racchiuso i due container breadcrumbs e main-content un un nuovo container al quale assegneremo una nuova classe del foglio di stile chiamata main-area che definiremo come segue:


.main-area{
  width: 70%;
  float:left;
}

Il nuovo container ovviamente non si vedrà nel template ma questo sistema ci permette di ripristinare la sequenzialità dei container che adesso possono essere posizionati uno a destra dell'altro (left - main-area - right) mentre ciò che è contenuto dentro (annidato è il termine corretto) il container main-area segue regole di posizionamento diverse.

Le classi main-content e breadcrumbs del foglio di stile saranno dichiarate come segue:


.breadcrumb {
  text-align: center;
  background-color: #FFF58F;
  border: 1px solid #000000;
  width: 100%;
  height: 30px;
}
.main-content{
  text-align: center;
  background-color:#FFCC99;
  width: 100%;
  height: 570px;
}

Notare che, rispetto a prima, la classe main-content non possiede più la proprietà float perchè non segue più le regole di posizionamento di prima. La larghezza dei due container è adesso fissata al 100% perchè a comandare è la dimensione del container main-area che è fissata al 70%. I container annidati riferiscono la loro larghezza al container che li contiene.

Questo è un esempio pratico di ciò che abbiamo appena fatto.

||||

Trasformazione::

Trasformiamo in un template per Joomla

Fino ad ora abbiamo lavorato solo con HTML e Fogli di Stile e questo ci ha consentito di costruire la struttura della pagina. Avremmo potuto lavorare anche con un pò più di grafica inserendo magari delle immagini ma lo scopo di questo tutorial è comprendere come strutturare un template per Joomla, per la grafica c'è sempre tempo.

Cosa bisogna aggiungere adesso perchè il template si trasformi in qualcosa che Joomla può utilizzare?

Anzitutto vediamo cosa dobbiamo togliere dal documento HTML che abbiamo appena definito. Cominciamo col togliere i riferimenti allo stile (ciò che è racchiuso tra i tag <style> e </style>) e ha trasferirlo all'interno di un file che chiameremo template.css. Quindi inseriremo tra i tag <header> e </header> del documento un nuovo tag che ci permetta di includere il foglio di stile esterno dentro il nostro template la cui sintassi è la seguente:

<link rel="stylesheet" type="text/css" href="/template.css">

La proprietà href del tag link conterrà il percorso e il nome del foglio di stile. Vedremo poi come dichiarare questo percorso. Così facendo abbiamo reso indipendente (e più leggibile) il documento HTML dalla definizione degli stili.

Prepariamo le cartelle che conterranno il template

Creiamo la seguente struttura di cartelle:

Cartelle Template

La cartella Nome_template sarà chiamata con il nome con cui vorremo battezzare il nostro template. Questo dovrà essere diverso da qualsiasi template in circolazione quindi cerchiamo di essere originali. Ricordiamoci che poi il nostro template verrà installato in un sito web Joomla e rischieremmo di impedirne l'installazione sol perchè abbiamo usato un nome troppo comune. La cartella css è destinata a contenere i fogli di stile, la cartella images le immagini usate nel nostro template e la cartella html per consentire l'override di moduli e componenti (vedere la guida sull'Override).

Spostiamo adesso il file template.css contenente il nostro foglio di stile nella cartella css e il nostro documento html nella cartella con il nome del template rinominandolo in index.php. Non fatevi ingannare dall'estensione php del file, è sempre un file html (per adesso).

Modifichiamo l'intestazione del file index.php

Apriamo il file index.php con un editor di testo e modifichiamolo come segue:

1) in testa al file inseriemo questo codice:


<?php

/**
* @copyright  Copyright (C) 2005 - 2008 Open Source Matters. 
* All rights reserved.
* @license  GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/
// no direct access
  defined( '_JEXEC' ) or die( 'Restricted access' );
?>

Questo è codice php ed è racchiuso tra i marcatori <?php e ?> che aprono e chiudono una sequenza di codice php. La funzione define('_JEXEC') evita che il file venga eseguito indipendentemente dall'ambiente di Joomla.

2) immediatamente sotto questo blocco di codice inseriemo il seguente codice sostituendolo a quello che già troviamo in un comune file html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="" lang="" >

Questo codice permette di personalizzare i riferimenti alla lingua utilizzata dal nostro template.

3) di seguito, tra i tag <head> e </head> inseriemo quanto segue:


<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/templates/nome_template/css/template.css" type="text/css" />
</head>

Abbiamo detto in precedenza che il tag <link> permette di collegare un foglio di stile esterno dentro il nostro template. Nel parametro href va dichiarato il nome e il percorso del file contenente gli stili da applicare al nostro template. In questo caso il percorso viene ricavato utilizzando del codice php:

<?php echo $this->baseurl ?>

Questo codice verrà sostituito dal path assoluto contenente l'url del nostro sito (http://www.miosito.it) al quale seguirà l'intero percorso per raggiungere il file. Notare che nel percorso ho inserito il termine nome_template al quale andrà sostituito il nome che abbiamo dato al template.

Il tag <jdoc:include> verrà invece sostituito da una serie di informazioni da includere nell'header del file html finale. Queste informazioni sono direttamente ricavate dal framwork di Joomla e contengono il titolo della pagina e i tag <meta> utili all'indentificazione e classificazione della pagina da parte dei motori di ricerca.

 

Creiamo le posizioni per la pubblicazione dei moduli di Joomla

Perchè si parla di pagine dinamiche quando si parla di un sito realizzato con Joomla? Perchè viene utilizzato un unico file (il template) nel quale alcune informazioni vengono sostituite di volta in volta in base alle richieste che il navigatore fa attraverso i link che trova nella pagina. Quando ad esempio clicchiamo su un link ad un articolo inviamo al server web una richiesta (corrispondente a link su cui abbiamo cliccato) e il server rielabora la pagina (il template) sostituendo le informazioni presenti con quelle richieste leggendole da un database MySQL (il cuore di un sito Joomla).

Le parti dinamiche di un sito Joomla sono individuate nei cosiddetti moduli e componenti di Joomla. Questi altro non sono che blocchi di codice php che, elaborati dal web server, danno origine ad altrettanti blocchi di tag html. I menù di Joomla corrispondono al modulo mod_mainmenu ma ciò che vede e interpreta il nostro browser è il risultato dell'elaborazione eseguita dal server, ossia codice html.

Quello che dobbiamo fare adesso è inserire, all'iterno del codice del nostro template, il codice necessario al web server ad includere i moduli e i componenti di joomla. Per farlo utilizzeremo il tag <jdoc:include> a cui abbiamo accennato in precedenza. La sintassi è la seguente:

<jdoc:include type="tipo_elemento" name="nome_posizione" style="xhtml" />

l'attributo type specifica il tipo di inclusione; può essere uno dei seguenti:

  • modules
  • message
  • components

Il primo indica al web server che si intende inserire in quella posizione uno o più moduli di Joomla pubblicati nella posizione dichiarata nell'attributo name, il secondo che in quella posizione verranno visualizzati eventuali messaggi di sistema (ad esempio messaggi di errore) e il terzo che in quello posizione verranno inseriti i contenuti (gli articoli).

L'attributo name (usato solo per i moduli) indica il nome della cosiddetta posizione-modulo ovvero quel nome che, nel backend di Joomla, ci consentirà di stabilire dove pubblicare un modulo. Il nome che assegneremo dovrebbe rispettare lo standard utilizzato per i template di Joomla: left per la posizione modulo corrispondente alla colonna sinistra del nostro template, right per la posizione destra, footer per quella in basso, ecc. Non confondiamo le posizioni modulo dichiarate nella istruzione <jdoc:include> con i nomi delle classi che assegnamo ai container div. Queste spesso coincidono solo per migliorare la lettura del codice del template ma non hanno nessuna attinenza tra loro.

L'attributo style (usato solo per i moduli) indica lo stile html con cui il modulo verrà trattato nella composizione della pagina. Esso può essere scelto tra i seguenti:

  • table
  • horz
  • xhtml - genera un container div pèer il modulo con il titolo in <h3>
  • rounded - genera div annidati

Se ad esempio scegliamo lo stile rounded per un modulo menù di Joomla il codice finale generato sarà il seguente:

<div class="module_menu">
    <div>
   <div>
       <div>
      <h3>Main Menu</h3>
       <ul class="menu">
        <li><!-- voci di menu --></li>
       </ul>
     </div>
   </div>
  </div>
</div>
Module Rounded

Mentre se usiamo lo stile xhtml avremo questo risultato:

<div class="moduletable_menu">
 <h3>Main Menu</h3>
  <ul class="menu">
   <li><!-- various menu items --></li>
  </ul>
</div>
 Modulo xhtml

Per approfondimenti vi consiglio vivamente di leggere questa guida sul wiki ufficiale di joomla.org. Contiene anche chiarimenti sulla tecnica di creazione di box container con i bordi arrotondati.

Visto come abbiamo costruito il template è ovvio che i moduli andranno posizionato nelle colonne destra e sinistra, nell'header e nel container breadcrumbs e, perchè no, anche nel container footer. Quindi il nostro codice html verrà integrato come segue:


<body>

<div class="principale">
  <div class="header">
   <jdoc:include type="modules" name="header" style="xhtml" />
  </div>
  <div class="top">
   <jdoc:include type="modules" name="top" style="xhtml" />
  </div>
  <div class="left">
   <jdoc:include type="modules" name="left" style="rounded" />
  </div>
  <div class="main-area">
   <div class="breadcrumb">
    <jdoc:include type="modules" name="breadcrumbs" style="xhtml" />
   </div>
   <div class="main-content">
    <jdoc:include type="component" />
   </div>
  </div>
  <div class="right">
   <jdoc:include type="modules" name="right" style="xhtml" />
  </div>
  <div class="footer">
   <jdoc:include type="modules" name="footer" style="xhtml" />
  </div>
</div>
</body>
</html>

Come vedete al puro codice html abbiamo solo aggiunto l'istruzione <jdoc:include> dove vorremmo visualizzati i moduli e i contenuti del nostro sito Joomla. La scelta di posizionare moduli nell'header piuttosto che nel footer è totalmente arbitraria, possiamo anche non farlo. Dipende solo dal fatto che vogliamo o meno visualizzare dei moduli in quelle posizioni. Come noterete i nomi delle posizioni modulo corrispondono ai container div che le contengono. Questo invece è voluto perchè rende più semplice la lettura del codice del template e la sua modifica a distanza di tempo.

 

Ritocchi finali

Per completare l'opera dobbiamo creare, nella stessa cartella che contiene il file index.php del nostro template il file templateDetails.xml contenente il seguente codice:

<?xml version="1.0" encoding="utf-8"?>

  <!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" 
        "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">

  <install version="1.5" type="template">

  <name>miotemplate</name>

  <creationDate>29/12/2009</creationDate>

  <author>BigHam</author>

  <authorEmail>bigham64@gmail.com</authorEmail>

  <authorUrl>http://bigham.netsons.org</authorUrl>

  <copyright></copyright>

  <license>GNU/GPL</license>

  <version>1.0.0</version>

  <description>Il mio primo template</description>

  <files>

   <filename>index.php</filename>

   <filename>templateDetails.xml</filename>

   <filename>template_thumbnail.png</filename>
   <filename>index.html</filename>

   <filename>images/index.html</filename>

   <filename>css/index.html</filename>

   <filename>css/template.css</filename>

  </files>

  <positions>

   <position>header</position>

   <position>top</position>

   <position>left</position>

   <position>breadcrumb</position>

   <position>right</position>

   <position>footer</position>

  </positions>

  </install>

La struttura è abbastanza semplice: le prime informazioni sono assolutamente descrittive del template mentre tra i marcatori <files> e </files> vengono elencati i file che fanno parte del template descrivendo il percorso completo a partire dalla cartella principale del template. Tra i marcatori <positions> e </positions> vengono invece elencate le posizioni modulo di cui abbiamo parlato in precedenza. Queste le rivedrete, così come le avete elencate, quando pubblicherete un modulo nel backend del sito Joomla.

Create un file chiamato index.html vuoto e copiatelo in tutte le cartelle del vostro template. Resta solo da fare uno screen shot del nostro template in azione e memorizzarlo nella cartella principale del template con il nome template_thumbnail.png e le dimensioni 206x150 pixel.

Terminata questa fase potete anche comprimere in formato .zip il contenuto della cartella del template in modo da prepararlo per l'installazione in Joomla.

||||

In azione::

Template in azione

Ora che abbiamo il minimo indispensabile per un template di Joomla vediamo se funziona. Ve lo anticipo, non funzionerà all primo colpo.

La via più semplice, invece di installarlo, è quella di prendere la cartella contenente il template e copiarla all'interno della cartella /templates del nostro sito web realizzato in joomla. Accediamo al backend del sito e dal menù Estensioni ->visualizziamo i template del nostro sito rendendo Predefinito il nostro template

Le indicaizioni nelle colonne Nome Template, Versione, Data e Author sono ricavate dal file templateDetails.xml

Visualizziamo l'anteprima e... Oh my God!!!

Ovviamente, se avete seguito quanto ho scritto fino ad ora, il risultato non sarà esteticamente dei migliori. Tutte le classi del foglio di stile avevano impostato l'allineamento del testo al centro e alcune avevano definita un'altezza fissa di 600px.

Quindi per prima cosa modifichiamo il fogli di stile eliminando dalle classi left, right e main-content la definizione della proprietà height (altezza) e cambiamo l'allineamento del testo (text-align) da center a left in tutte le classi. Il risultato non sarà migliore ma, quanto meno, il testo verrà allineato correttamente e la pagina si adatterà al contenuto.

Adesso dobbiamo lavorare molto sul foglio di stile per definire le classi standard di Joomla

||||

Classi di stile::

Le classi di stile di Joomla

Fino a questo momento ci siamo occupati di definire la struttura di un documento html e abbiamo inserito le istruzioni necessarie a Joomla per includere dinamicamente quelle porzioni di codice html che daranno origine alla visualizzazione dei contenuti, dei menù e di tutti quei moduli che avremo deciso di pubblicare.

Ma proprio per questa parte dinamica manca una definizione di layout (aspetto grafico) e il risultato si vede nell'esempio precedente. Esistono però un insieme di classi di stile predefinite dagli sviluppatori di Joomla che consentono di dare forma quasi ad ogni elemento della pagina.

Nel wiki di joomla.it trovate un esempio di fogli di stile utilizzabile in tutti i template per joomla 1.5. Ovviamente la mera elencazione delle classi di un foglio di stile non è sufficiente: bisogna sapere dove esse agiscono. Per far questo ho trovato questo preziosissimo link nel quale potrete vederle in azione.

||||

Conclusioni::

Conclusioni

Come avete visto le conoscenze di HTML e Fogli di stile non importanti, meno importante, in questa fase, è la consocenza del linguaggio php. Alla fine non abbiamo fatto altri che creare una pagina scritta in HTML, definire lo stile dei tag in un fogli di stile collegato alla pagina e aggiungere quelle istruzioni, tipiche di Joomla, per creare la dinamicità del sito.

Lo scopo di questo tutorial era di guidarvi nella realizzazione di un templapte partendo da un documento html vuoto e credo sia stato raggiunto. Adesso sta a voi proseguire. Evitate di usare tool che producono template, piuttosto imparate prima a creare da voi un template e solo dopo potrete utilizzare altri strumenti. Diversamente imparerete a guidare un'automobile senza sapere come e perchè si muove e, in caso di problemi, sarete costretti a chiedere aiuto ad un meccanico.

||||

Link::

Link Utili

Tutorial

Conversione template Joomla da 1.0 a 1.5 - Una guida per chi volesse trasformare un template dalla versione 1.0 alla 1.5 di Joomla

Joomla! 1.5 Template Tutorials Project - Tutto ciò che bisogna sapere sui template di Joomla 1.5

Guide ai Fogli di Stile - Le migliori guide (in italiano) sui fogli di stile. Leggetele prima di intraprendere lo sviluppo di template per Joomla.

Html with style Tutorial - Vi consiglio anche la lettura dei template da 18 a 22 dai quali sono state ricavate alcune parti di questa guida

Guida al layout dei siti con i CSS

CSS Tutorial MaxDesign

Struttura e classi di un template per Joomla - Trovo questa risorsa molto utile per capire come agiscano le singole classi del foglio di stile sulle componenti di un template per Joomla

 

Strumenti

Dynamic CSS Layout - Generatore automatico di strutture xhtml di base (per i più pigri)

Creazione di box con margini arrotondati - Ottima guida per imparare a costruire un box container con i bordi arrotondati (ce ne sono altre in rete, basta usare google)

Raccolta di css template free - Ottimo punto di partenza per iniziare la creazione di un template per Joomla

{/magictabs}
 

Tutorials

I più letti

Pubblicità