Modificare Joomla con Firebug (una luce sul lato oscuro della grafica)

[alieno]

Joomla deve il suo successo, oltre alla sua solida struttura e flessibilità in continua evoluzione, anche alla enorme (gigantesca) disponibilità di templates, da quelli free a quelli altamente professionali, da quelli ricchissimi di animazioni e posizioni Modulo a quelli minimalisti o pienamente accessibili.

Ma c'è un lato oscuro: La grafica. Caratteristica, a volte sottovalutata, ma che spesso mette a dura prova webmaster e designer. Diciamocela tutta, possiamo realizzare un portale ricco di contenuti ma se questi non saranno fruibili attraverso una grafica, (l'insieme di forme, accostamento dei colori, font) che sappia dare la giusta impronta, intesa come personalità e carattere che noi desideriamo abbia, avremo un ottimo lavoro ma a cui mancherà quel "qualcosa" che lo distingua e lo renda unico.

Per quanto Joomla faccia uso di templates riccamente gestiti da fogli di stile, i CSS, se non siamo noi gli autori del template, la personalizzazione non sarà operazione semplice e veloce.

Firebug è in grado di semplificarci il lavoro ofrendoci la possibilità di eseguire analisi e modifiche temporanee e quindi di verificare istantaneamente quale risultato avremo a modifiche effettuate. Firebug, inoltre, offre una consolle ricca di strumenti di analisi avanzati:

• Analisi avanzata del codice HTML
• Analisi avanzata dei CSS
• Analisi DOM, ovvero la struttura a oggetti del documento (Document Object Model)
• Debug del codice JavaScript
• Net: Pannello di analisi e monitoraggio delle funzionalità di rete

Firebug è un'estensione nativa per Firefox ma è possibilie utilizzarlo anche con Explorer, Safari e Opera. Questo punto verrà trattato a fine guida.

Partiamo con il primo passo da compiere che sarà quello di avviare Firefox e collegarci a questo link: Firebug. Installata l'estensione e riavviato Firefox, troveremo l'icona in basso a destra nella barra di stato:





Basterà ora collegarci all'indirizzo del sito su cui vogliamo operare (in locale o su remoto che sia) ed aprire la consolle (click sull'immagine per ingrandire):




Premiamo il pulsante Analizza e facciamo scorrere il mouse sulle varie aree della pagina. Le zone verranno evidenziate e in tempo reale la consolle ci mostrerà tutte le caratteristiche relative all'area. Selezionando l'area potremo a questo punto effettuare analisi e modifiche.

Nell'esempio qui sotto, ho eseguito la modifica del colore del testo e la sua dimensione nella sezione Hosting di Joomlahost.it
Notiamo, nei due riquadri della consolle, che Firebug ci mostra, in modo molto chiaro, non solo il nome del file CSS e dove si trova, ma anche il numero di riga su cui stiamo operando (click sull'immagine per ingrandire):




Firebug offre un'accurata analisi sia della struttura che un debug JavaScript. Inoltre, la funzione Net permette di analizzare, ad esempio, i tempi di caricamento della pagina, funzione questa molto utile.
Così come è molto utile la funzione di analisi Layout. In questo caso sarà molto semplice ed intuitivo eseguire modifiche che riguardano, ad esempio, il padding, in una rappresentazione denominata Box Model:





Il vantaggio è quindi evidente: Nessuna modifica reale alla struttura ma, una prima analisi visiva e successivamente tutti gli elementi per renderla definitiva.

E chi non utilizza Firefox? Nulla di più semplice. Firebug mette a disposizione un semplice script da inserire in ogni pagina che desideriamo analizzare:

<script type='text/javascript' 
        src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

In questo modo, da Explorer, Safari ed Opera, sarà possibile generare la consolle e procedere all'analisi.

Riferimenti utili:
Firebug
Firebug Lite
Documentazioni
Firebug Newsgroup