Articoli

Templates per Joomla! più evoluti

Indice

 

Quale intestazione DocType usare

La linea di pensiero attuale (Joomla 1.5.x,NdT) è che per i templates di Joomla! si dovrebbe usare XHTML 1.0 Transitional.

Elenco di DocTypes raccomandati per circostanze diverse:

Riferimenti a proposito dei DocTypes raccomandati:

Sul layout CSS delle pagine

I siti web professionali separano lo stile dal contenuto. Ci sono molte ragioni per questa scelta e la più ovvia (per uno sviluppatore) è la possibilità di controllare l'estetica di molte pagine modificando un solo file. Le informazioni di stile includono: sfondi, immagini (solo quelle che ricorrono su tutte le pagine), posizioni e dimensioni degli elementi delle pagine. Il tuo file HTML sarà ora ridotto a: informazioni d'intestazione, una serie di elementi ed il testo del tuo sito. Dato che stai creando un template per Joomla!, in realtà avrai: alcune informazioni d'intestazione, del codice PHP per richiedere a Joomla! il resto delle informazioni d'intestazione, una serie di elementi, del codice PHP per richiedere a Joomla! le posizioni dei vari moduli ed infine del codice PHP per richiedere i contenuti delle pagine.

Le informazioni di stile sono codificate nel CSS (Cascading Style Sheet) e normalmente memorizzate in files con estensione .css. Una pagina Web contiene un collegamento al CSS associato così un browser può trovare le informazioni di stile appropriate da applicare alla pagina. Il CSS può anche essere messo all'interno dei file HTML fra i tag <style type="text/css"> e </style> (pratica sconsigliata, NdT).

Tutto il codice CSS è applicato ad ogni elemento di una pagina HTML/XML. Se tu volessi uno stile che influenzi un'intera pagina, probabilmente lo applicheresti all'elemento <body>. Puoi applicare stili a qualsiasi elemento HTML come <p>, <table> o <div>. Per applicare uno stile ad un singolo elemento in particolare della pagina, questo deve avere un ID. Per esempio, per applicare uno stile al particolare <div> che contiene il titolo (contrapposto ad applicare uno stile a tutti i <div> della pagina, NdT), come prima cosa dovresti includere un ID nel codice HTML: <div ID="title">.

Centratura orizzontale

(nella versione in lingua originale del presente articolo questa sezione è vuota. Normalmente per centrare orizzontalmente gli elementi è sufficiente impostare nel CSS i margini destro e sinistro allo stesso valore (percentuale, relativo o assoluto), ma non so se fosse ciò a cui l'autore voleva fare riferimento, NdT).

Elementi di PHP

Molti sviluppatori Web e proprietari casuali di siti Web non conoscono il linguaggio PHP (con cui è scritto Jooomla!) a siccome i template per Joomla! normalmente contengono codice PHP, è necessario capire almeno un pochino di questo linguaggio per essere in grado di creare o personalizzare i templates. Questa parte descrive, in termini semplici, come usare ogni aspetto di PHP nel contesto di un template per Joomla!. Per esempio, dà una semplice spiegazione della sintassi if-then-else del PHP usando parti di codice da un template a scopo illustrativo.

La miglior risorsa per imparare il PHP è probabilmente l'esperienza pratica e Joomla! può fornirtela grazie al fatto che è nativamente scritto in PHP. Questo può essere un po' pesante per chi non ha mai programmato prima. Benché Joomla! sia abbastanza facile da installare con l'aiuto della comunità ed un pochino di pazienza, ti capiterà che qualcuno ti chieda di fargli il sito (e per fare questo non basta installare Joomla!, NdT).

Un posto dove c'è una breve lista di funzioni ed esempi è 25 Essential PHP Functions, che va bene per familiarizzare con PHP. Però per una lista completa delle funzioni con spiegazioni ed esempi vai sul sito ufficiale di PHP.

Una volta che hai le basi di PHP, avrai bisogno delle basi della sintassi PHP di Joomla!. Inizia a dare uno sguardo alle estensioni esistenti, osservane il codice e guarda anche alcune delle seguenti guide:

Questo ti aiuterà a familiarizzare con alcune funzioni disponibili nel sistema di Joomla! e con cosa fanno (usando l'API). Fai particolare attenzione a capire la configurazione MVC (Model View Controller).

Comunque, se sei assolutamente all'inizio con PHP, quanto segue potrebbe esserti utile come rapida introduzione a PHP.

(La parte di articolo che introduce i concetti di PHP non è stata tradotta e non viene qui riportata in quanto, nell'opinione del traduttore che casualmente è anche uno sviluppatore PHP, ci sono in rete un sacco di altre risorse per imparare PHP, scritte nativamente in italiano, che sono strutturate meglio e più capibili di quanto non sia possibile ottenere da un breve riassunto inserito in un articolo come questo. La traduzione continua dalla prima sezione successiva all'introduzione su PHP).

Dichiarare le posizioni dei moduli

Per avere le posizioni dei moduli disponibili per essere scelte nella Gestione Moduli di Joomla!, esse devono essere dichiarate nel file templateDetails.xml del tuo template. L'elemento <positions> in questo file contiene dei sotto-elementi per ogni posizione di modulo che è supportata dal tuo template.

Per esempio, qui c'è un tipico elemento <positoins> nel file "templateDetails.xml" per un tipico template.

<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
</positions>

Puoi aggiungere e definire nuove posizioni e chiamarle come vuoi, ma si raccomanda di mantenere almeno quelle elencate qui sopra. In questo modo si ha una certa consistenza quando si passa da un template all'altro oppure quando si usano più templates diversi sullo stesso sito.

Ulteriori informazioni sul posizionamento visuale delle posizioni dei moduli all'interno del template possono essere trovate nella sezione Use and Implementation.

Per avere un'indicazione visuale di tutte le posizioni dei moduli su una pagina puoi seguire questa procedura:

  • apri la pagina nel tuo browser
  • clicca nella barra dell'indirizzo
  • cerca i parametri al fondo dell'indirizzo. Questi sono separati dalla parte principale dell'indirizzo stesso da un punto interrogativo. Per esempio, nell'indirizzo http://mydomain.com/index.php?id=17, il parametro è "id=17".
  • se non ci sono parametri, aggiungi "?tp=1" alla fine dell'indirizzo e premi Invio. Per esempio, http://mydomain.com/index.php?tp=1
  • se ci sono già dei parametri, aggiungi "&tp=1" alla fine dell'indirizzo e premi Invio. Per esempio, http://mydomain.com/index.php?id=17&tp=1
  • le posizioni dei moduli saranno ora evidenziate in rosso.

Note that in some circumstances there may be module positions available that are not outlined in red. This can happen when a template defines those module positions as conditional on there being modules enabled in that position. If there are no modules enabled in that position then the template may adapt and the position will not be visible.

Create a 16x16 pixel image. You may use graphic software such as Photoshop, Gimp or Windows Paint or an online tool such as http://antifavicon.com/ Convert to ico format using free online sites such as:

The file you created in this way will have the extension .ico. Copy the file to the /joomla/templates/<your template> directory and name it favicon.ico. Open a browser. Do you see your new icon? If so, congratulations. If not, that doesn't necessarily mean you did anything wrong. Browsers are designed to minimize data traffic, so they don't refresh the favicon every time they show a page. Even refreshing the page (F5) wont help. So you need to refresh more thoroughly: Mozilla / Firefox / Safari: hold down Shift while clicking Reload, or press Ctrl-Shift-R (Cmd-Shift-R on Apple Mac); IE: hold Ctrl while clicking Refresh, or press Ctrl-F5; Konqueror: simply click the Reload button, or press F5; Opera users may need to completely clear their cache in Tools→Preferences.

If this doesn't work you will need to delete the temporary internet files and the history and then open your page again.

Some templates contain code that redirects the browser to another directory or another icon file. To determine where your new favicon should be, examine http://yoursite.com/templates/your_template/index.php and look for code that contains the text <link rel="shortcut icon". There you will find the directory and the name of the icon file. Copy your icon to that place and give it the the name that link is pointing to (you might want to backup the old file). Make sure you set the security correctly such that you webserver has access to that file. Look at the example below.

<link rel="shortcut icon" href="/http://yoursite.com/templates/your_template/icon/favicon.ico" />

If you don't want to just change the favicon.ico file in its respective template directory you can find the reference to the favicon.ico file in the html.php document. The path is "........\libraries\joomla\document\html\html.php". This should prevent the icon from toggling if you use

<link rel="shortcut icon" href="/http://yoursite.com/templates/your_template/icon/youricon.ico" />

in the template html and you don't remove the favicon.ico file. (why call the icon twice?)

From the html.php

// Try to find a favicon by checking the template and root folder
$path = $directory . DS;
$dirs = array( $path, JPATH_BASE . DS );
foreach ($dirs as $dir )
{
$icon = $dir . 'favicon.ico';
if (file_exists( $icon ))
{
$path = str_replace( JPATH_BASE . DS, , $dir );
$path = str_replace( '\\', '/', $path );
$this->addFavicon( JURI::base(true).'/'.$path . 'favicon.ico' );
break;