L’estensione di un browser è un piccolo programma supplementare (chiamato add-on) che aggiunge funzionalità ad alcune applicazioni. Le funzionalità possono andare da una semplice barra degli strumenti che consente la ricerca di informazioni su Internet ad una caratteristica più complessa, come può essere quella degli effetti sui singoli tab. Ad ogni modo, lo scopo principale delle estensioni è quello di personalizzare il proprio browser web aggiungendo funzioni supplementari. Oggi ci occuperemo nello specifico delle estensioni di Mozilla Firefox. Nel sito ufficiale Mozilla Add-ons è possibile trovare un enorme numero di estensioni pronte per l’uso e facilmente installabili. Per agevolare la ricerca, le estensioni sono suddivise in categorie: dalle estensioni rivolte ai blog a quelle volte alla gestione dei segnalibri o alla navigazione, a quelle per designers. Delle centinaia di estensioni per designers disponibili per Firefox, oggi vedremo quelle che a mio parere sono le migliori.

Nota: prima di utilizzare queste estensioni, dovrete installare prima Firebug

1. Colorzilla

Con oltre 300.000 download, Colorzilla è certamente una delle estensioni più utilizzate dai designers per quanto riguarda la gestione del colore. Offre innanzitutto uno strumento “Contagocce” per catturare i colori delle pagine visualizzate. Una volta installata l’estensione, la piccola inequivocabile iconcina di Colorzilla rimane sempre pronta in basso a sinistra nell’interfaccia del browser: con un semplice clic, si può trasformare il cursore in un piccolo puntatore in grado di leggere in tempo reale (e di catturare con un clic successivo) qualsiasi colore di grafica e testi visualizzati nella pagina aperta. Una volta selezionato un colore, accedendo al menu contestuale (clic destro sull’iconcina di Colorzilla), si può invece accedere ad un grande numero di opzioni e strumenti utili, tutti relativi a colori e tavolozze dedicati a chi crea grafica per il web. Ma non solo! Infatti, il colore catturato viene reso disponibile per la copia negli appunti in tanti formati differenti (rgb, nominale, html etc). Vi sono inoltre moltissime tavolozze già pronte, ma si possono anche creare delle tavolozze personalizzate. Ma con ColorZilla si possono anche “zoommare” con un clic le pagine Web (per catturare meglio i colori, ad esempio) ed anche di personalizzare molte delle sue funzioni e strumenti.

2. Pixel Perfect

Pixel Perfect è una delle estensioni di Firefox più sconosciute ai designer! Ma è utilissima. Essa permette infatti di confrontare facilmente un template per Photoshop con la sua controparte HTML. In altre parole, questo strumento ci consente di caricare su browser un jpeg (preparato precedentemente con Photoshop) da usare come guida durante la creazione dell’HTML. I controlli sono semplici da usare, inoltre permette di inserire manualmente e quindi bloccare la sovrapposizione di immagini in qualsiasi posizione sulla pagina, con un cursore permette di controllare l’opacità.

3. YSlow

YSlow è un’estensione di Firefox che consente di valutare le performance delle pagine web da noi realizzate, ma fornisce anche validi suggerimenti per l’ottimizzazione del nostro sito in Joomla.

4. GridFox

Gridfox è un plugin per firefox indispensabile ai web designer/webmaster, perché visualizza una griglia molto utile per progettare layout di siti web. Una griglia è la suddivisione degli spazi di un sito web per la realizzazione o il restyling di un sito. Questa operazione renderà il sito più omogeneo e di bell’aspetto, ma è anche utile per suddividere le varie aree che poi andranno riempite con quello che si vuole. Gridfox semplifica di molto questo lavoro e, in combinazione con Firebug, velocizzerà la suddivisione delle colonne con i pixel giusti, indifferentemente che sia un template ad una, due, tre, quattro colonne o più.

5. Open With

A volte la visualizzazione di un sito può essere diversa o problematica, a seconda del browser web usato. In aiuto del web designer c’è però Open With, un’estensione molto utile per testare le proprie o generiche pagine web aprendole con Internet Explorer, Chrome, Safari, Opera o qualsiasi altro browser.

6. CSSsir

CSSsir è uno strumento semplice e pratico che permette di generare codice “cross-browser” per le principali regole CSS in pochi click. Questo generatore CSS non è stato pensato solo per webmaster e web designer, ma è così semplice che può essere utilizzato anche da utenti comuni. Anche se CSSsir non è l’unica estensione per Firefox che genera codice CSS, è sicuramente una delle migliori. Come elencato dallo sviluppatore stesso, allo stato attuale, l’estensione può generare codice CSS3 per l’ombra del testo, RGBA, sfumatura lineare, sfumatura radiale, contorno, testo e stile del font e tanto altro. Inoltre, questa estensione è dotata di alcuni strumenti utili per la pulizia dei tag, la conversione (da RGB a HEX, da PX a EM), e per la selezione del colore.