Strumenti e tecniche utili per la personalizzazione grafica di un sito joomla


Sono sempre più le persone che utilizzano joomla come cms per realizzare il proprio sito , una delle cose più importanti è la personalizzazione dell’aspetto grafico che rende originali le proprie pagine. Di cosa abbiamo bisogno ? in realtà basta un semplice blocco note per editare la parte css e quella php , ma vediamo alcuni tools e tecniche utili che ci aiuteranno nel nostro processo di lavoro :

Firebug

Chiunque lavori nel campo web non può farne a meno , famosa estensione di firefox che ci permette di tener traccia del nostro codice sorgente e le risorse che ne derivano .Grazie a questo possiamo controllare in tempo reale il sorgente ed editarlo in modo da visualizzarne subito il risultato senza caricare ogni volta il tutto su server. Possiamo quindi analizzare HTML , CSS , SCRIPT , DOM e la parte NET che ci restituisce tutte le richieste effettuate suddivise in categorie. Per approfondimenti si consiglia la lettura del seguente articolo modifica template joomla
firebug

Web Devoloper toolbar

Fondamentale per studiare la causa di problemi grazie alle sue molteplici possibilità di bloccare redirect , visualizzare soltanto i fogli di stile ,disabilitare immagini e molto altro in una comoda barra di strumenti scaricabile da questa pagina
web toolbox

tre Posizione dei moduli

Uno dei problemi che si presenta durante il cambio di aspetto e cioè di caricamento di un nuovo tema è la posizione associata ad i moduli che spesso non rispecchia la demo presentata sul sito di rilascio .Vediamo quindi come scoprirla attraverso una semplice modifica al link , cioè aggiungendone ?tp=1 avremo il seguente risultato :

4 Color picker

Un’altro strumento indispensabile per la cattura di colori direttamente dal proprio browser in un punto preciso è color picker , restituirà il codice colore che andremo a inserire nella nuova proprietà.
colore

5 Performace

Misurare la performance è una soluzione utile per capire se stiamo utilizzando troppe risorse e di conseguenza creando un sito lento e pesante, possiamo utilizzare Googlepagespeed , Yslow oppure dei tools online come pingdoom , entrembi ci mostreranno il tempo di risposta per ogni singolo file indicandoci eventuali suggerimenti per l’ottimizzazione.
caricamento

6 Aspetto grafico e css

Per la creazione delle immagini , sfumature ed icone che compongono il sito utilizzeremo un editor gratuito come gimp , disponibile per più piattaforme , associato all’applicazione in codice con un foglio di stile ( css ) ,( per chi ha difficoltà nella comprensione può consultare le sue proprietà Css reference )
Esempio di modifica :

[css].sidebar1 h2 {</div>
<div>-moz-border-radius:5px 5px 5px 5px;</div>
<div>background-color:#000000;[/css]

in :
[css].sidebar1 h2 {</div>
<div>-moz-border-radius:2px 2px 2px 2px;</div>
<div>background-color:#ffffff;[/css]

Qui abbiamo semplicemente editato una riga di style.css che si trova all’interno del nostro template o in root oppure nella cartella css ,il risultato sarà da uno sfondo nero arrotondato di 5px ad uno bianco con bordi arrotondati a 2 pixel.
sfondo

7 Documentazione e risorse

Dalla pagina uffciale joomla possiamo trovare notizie e guide aggiornate cosantemente riguardo il webdesign del cms in questione joomla Web_designers mentre per seguire le novità riguardo il codice e lo sviluppo di nuovi componenti consultare joomlacode

ufficiale

8 Verfica compatibilità

Come ben sappiamo ogni browser interpreta in maniera differente il codice e quindi possono sorgere problemi di incompatibilità e differenze di visualizzazione come spesso capita in IE . Avere a disponibilità firefox , chrome , opera ecc.. sotto piu sistemi operativi , quali linux, windows è spesso quasi impossibile e soprattutto scomodo nel testare. Utilizzeremo allora un tools online che in breve tempo ci mostrerà gli screenshoot ottenuti dalle varie combinazioni .Il piu affidabile al momento è Browsershoot che permette un numero illimitato di test effettuando una semplice registrazione . Inoltre è consigliato un controllo tramite il validator w3c per assicurarsi che non ci siano errori in caso contrario ripararli tramite i suggerimenti dati.

validato

9 Estensioni e plugin

Sul web data la popolarità del cms si possono trovare molti sviluppatori che collaborano nella realizzazione di componenti , moduli ed estensioni che ci consentono di ottenere il massimo da questo cms . Molti di questi riguardano la personalizzazione delle pagine di sistema come dal login , al backend e possiamo trovarli in una directory che seleziona le migliori dedicate allo style e design

componente

10 Ispirazione

Per concludere questa serie di consigli vi lasciamo con una serie di siti quindi uno showcase che potrà illuminare la vostra creazione grafica , restando comunque nella propria creatività :
Joomlashow : directory italiana dove è possibile ordinare in base ad i voti ricevuti e la valutazione media .
Bestofjoomla : comprende una serie di siti selezionati per il loro design particolare ed innovativo.
Non ci rimane che augurarvi un buon lavoro.


6 commenti

Silvia Rosa · 12 Febbraio 2010 alle 17:06

Un post che merita attenzione , cè praticamente scritto tutto su come lavorare , alcuni punti li avevo sottovalutima farò attenzione in futuro

Guglielmo · 12 Febbraio 2010 alle 17:07

Praticamente perfetto , condivido su twitter 😉

Carissima · 12 Febbraio 2010 alle 17:09

A quando uno dedicato a wordpress ?

    n-rik · 12 Febbraio 2010 alle 20:44

    Ci sono gia molte guide e consigli sul sito, cerca tra gli articoli precedenti.

Rich · 17 Febbraio 2010 alle 12:41

Great post ! from digg

Personalizzare la grafica di un sito Joomla | Magenta Design - Risorse, tutorial e idee per la grafica! · 7 Luglio 2011 alle 19:09

[…] Articolo tratto dal sito risorsainformatica.com >> […]

I commenti sono chiusi.