Strumenti da usare con Firefox

Intanto ci serve una conoscenza non superficiale di html e CSS. Se non sai neppure di cosa si tratta è impensabile iniziare a modificare sostanzialmente un template. Ma se hai una discreta conoscenza, o te la farai rapidamente seguendo qualche guida di base su HTML e CSS sul sito html.it, allora ti riporto qui sotto il primo articolo che ho scritto per Joomla.it su quelli che sono, secondo me, degli ottimi strumenti per lavorare ad un template di Joomla! , ma in generale a qualsiasi template.

Tre moschettieri al servizio di Joomla!

Appena una persona che ha una piccola dimestichezza con il computer ed il web incontra Joomla! non può che restarne colpito ed affascinato. Come quando in un oscuro e gremito bar di periferia facesse il suo ingresso una sfolgorante, elegantissima e sensuale ragazza!

La ricchezza, direi proprio il fascino, di questo CMS (Sistema di Gestione dei Contenuti) è davvero portentosa. Non bastasse tutto quello che Joomla! ci fornisce di suo ecco che entriamo in contatto con una grande e vivacissima comunità internazionale di cui joomla.it è la più autorevole ed accreditata rappresentanza italiana e che ci fornisce un ricco e competente supporto.

Fatta questa premessa e reso questo omaggio al fascino di Joomla! dobbiamo subito precisare che ci accorgeremo presto che modificare l'aspetto visivo del template di Joomla! non è altrettanto semplice ed intuitivo quanto la gestione dei moduli, dei contenuti e di altre componenti già presenti di default come i sondaggi, i banner, i contatti, ecc.

Non mi dilungo su ciò e invito alla lettura di questo articolo in cui si spiega che occorrono una conoscenza ed un sapere minimo di base per poter operare dei cambiamenti significativi su un template di Joomla!

Ma anche supponendo di avere questa conoscenza di base, o di volerla rapidamente acquisire, ci servono degli strumenti aggiuntivi che ci siano di aiuto nel nostro lavoro; che ci consentano di lavorare di fioretto e non di clava sul nostro template.

Ecco dunque i tre moschettieri del titolo di questo articolo:

- Web Developer

- Firebug

- ColorZilla

Poi, siccome i tre moschettieri erano in realtà quattro, io ci aggiungerei anche:

- MeasureIt

Durante la discussione sul forum apposito ho appreso anche di un quinto strumento molto utile

- Screengrab!

Sono tutti componenti aggiuntivi di Firefox, il noto browser di Mozilla, che si possono scaricare da qui: https://addons.mozilla.org/it/firefox/

Lo scopo di questo articolo non è certo quello di essere una guida esaustiva sull'uso di questi strumenti ma vuole solo segnalare la loro esistenza e spiegare in linea di massima a cosa servono e come si usano. Vediamoli in azione questi moschettieri, allora:

Web Developer

E' una toolbar cioè una barra di strumenti, in questo caso utile allo sviluppatore web. Si va a piazzare da sola nella parte superiore del browser ed è ovviamente personalizzabile, come ogni altra toolbar.

Difficile persino tentare di fare una dettagliata descrizione dei moltissimi strumenti a disposizione. Io la uso da un anno e ancora scopro ogni tanto una nuova funzione che non avevo ancora utilizzato. Si possono visualizzare i form, i css, verificare al volo la validazione W3C di una pagina web, simulare una visualizzazione del monitor con diverse risoluzioni, vedere le dimensioni e il peso delle immagini, la loro path, i loro attributi. Insomma una vera manna di cose utili lì a portata di clic.

Firebug

Per lo sviluppatore web questo è uno strumento ancora più utile della toolbar di cui sopra. Si piazza sul fondo del browser dove compare una barra con all'estrema destra il piccolo baco, logo di firebug. Cliccandolo entra in azione questo potentissimo strumento col quale possiamo ispezionare la nostra pagina web, vedendo le varie parti di cui è composta con il corrispondente codice di origine. Vedendo tutto il codice: html e css. Quindi, posizionando il mouse sopra un modulo, vedremo il codice html che lo origina e contemporaneamente i comandi css che lo formattano. Non solo. Potremo fare delle modifiche del codice al volo vedendo subito sul monitor l'effetto ottenuto. Se la cosa ci garba andremo poi a fare le modifiche sui file veri e propri.
Ma quello che ho descritto non è che uno degli aspetti di Firebug che può fare molte altre cose, alcune della quali io non ho (per il momento) neppure mai utilizzato.

ColorZilla

Appena installato apparirà una piccola finestrella in basso all'estrema sinistra rispetto al baco di Firebug.

Nella finestrella apparirà il classico strumento di prelievo del colore dei principali programmi di grafica. Cliccandolo con il mouse si potrà poi ispezionare la pagina vedendo i codici dei vari colori presenti e prelevando quelli che ci interessano che andremo a incollare nel css dove stiamo lavorando. Con una facilità e una velocità impressionanti.

MeasureIt

Appena installato apparirà un minuscolo righello in una seconda finestrella affiancata a quella di ColorZilla. Cliccandoci sopra trasformeremo il nostro mouse in un tracciatore che potrà misurare ogni angolo della nostra pagina web con precisione pixel, anche nelle coordinate. Altro che il righello che mettevo sul monitor prima di conoscere questo strumento...

Screengrab!

Indispensabile anche questo per poter lavorare al meglio su un template. In pratica usando il taso destro del mouse puoi salvare al volo qualsiasi pagina web, di qualsiasi lunghezza, senza le barre degli strumenti. Lunga anche mezzo chilometro! In più puoi selezionare una parte della pagina e salvare solo quella. Niente più stamp, programma di grafica, lavorazione e salvataggio dell'immagine. Con questo strumento ti salvi direttamente l'immagine in formato png e molto ottimizzata per il web. Portentoso!

Avete visto come si dispongono bene sul browser e come lavorano in sintonia e in modo complementare gli uni agli altri questi indispensabili strumenti? Tutti per uno e uno per tutti, con firefox al servizio della nostra amata Joomla!, regina dei CMS. Cosa aspettate ad assoldarli? Correte a scaricarli...

Articolo scritto da tonicopi