Oggi parleremo di Mozilla Firefox e di come usare sia le funzioni integrate che gli add-on disponibili, per aiutarci nello sviluppo web.
Tra quelli già integrati in firefox dalla versione 4 e che in parte replicano in modo basilare alcune delle funzioni di firebug, troviamo la console web che permette di vedere tutte le richieste http effettuate dal browser, il blocco degli appunti che consente di scrivere parti di codice javascript da testare in tempo reale all’interno della pagina infine, analisi pagina che permette un’accurata analisi della struttura html e csse anche un collegamento alla pagina MDN(Mozilla Developer Network) di Mozilla in cui ogni regola css viene mostrata e spiegata.
Adesso vedremo tra le migliaia di add-on quelle che possono essere dei validi strumenti nello sviluppo e nel debug dei siti web.
Tanti plugin tra cui scegliere…
Firebug è sicuramente il più conosciuto tra gli add-on dedicati agli sviluppatori, ma spesso non se ne conosce il potenziale fino in fondo. Descriverò le varie funzioni: quella conosciuta sicuramente da tutti è quella che permette di ispezionare in modo approfondito l’ html e il css dando la possibilità di modificare parti dell’html o del css, d’inserire nuove regole css o tag html utili per effettuare delle modifiche a un template in lavorazione o facilitare l’ analisi del template del CMS che dobbiamo modificare. Ora vedremo com’è possibile effettuare il debug del javascript attraverso i tab script e console. Grazie al primo si può effettuare un debug approfondito del codice javascript, con la seconda si può inserire codice javascript o richieste ajax da eseguire all’interno della pagina,Il tab layout invece in base all’elemento selezionato, mostra un grafico con le misure dell’oggetto( ad esempio table, div o img) e lo spessore del margin, del border e del padding usati; il tab dom mostra la gerarchia e la struttura di tutti gli elementi del documento . Infine il tab net in cui viene mostrato il numero di richieste effettuate dal browser e la velocitàd’esecuzione delle pagine html, css, javascript e dei file multimediali(immagini, flash ecc).
Ora passiamo ad alcuni plugin che estendono le funzionalità di firebug:
FireRainbow evidenzia la sintassi javascript rendendo più facile l’ analisi del codice durante il debug
Firequery è un estensione che semplifica il debug di jQuery rendendo possibile l’ uso della sintassi del framework all’interno delle tab console e script di firebug
Pagespeed è un estensione sviluppata da google che permette l’ analisi prestazionale della pagina, dà un voto sintetico su base 100 e di seguito anche una lista dei parametri analizzati. Nel caso di parametri non idonei, fornisce i suggerimenti per migliorare la reattività della pagina, specificare il set di caratteri in uso, ottimizzare i file immagini, css e javascript.
Pixelperfect rende possibile effettuare test sulle immagini da usare, per un logo o per decorare la pagina inserendo l’ immagine in questione senza entrare nel codice della pagina per testare velocemente la resa.
Senseo serve ad analizzare la pagina per capire se è ottimizzata per i motori di ricerca. Tramite il pannello messo a disposizione dall’add-on si può fare una ricerca tramite parole chiave scelte da noi, vedere quanto è ottimizzata tale pagina, come ad esempio uso dei tag title, meta-description, la sitemap e il contenuto della pagina ecc
Web developer tramite questa estensione si possono gestire una molteplicità di parametri, tra cui la disattivazione della cache, quella dei file javascript, dei colori della pagina o di uno più fogli di stile, si possono gestire tutti i cookie, si può scegliere di disattivare la visualizzazione delle immagini, mostrarne il testo alternativo, le dimensioni, i percorsi o dimensione del file, inoltre si possono contornare gli elementi a livello di blocco, quelli deprecati ma anche in base al posizionamento assoluto, relativo, fisso e flottante, poi abbiamo la possibilità di validare la pagina sia per l’html, per i css e per l’ accessibilità.
Measureit grazie a questa piccola estensione potrete calcolare le dimensioni di un qualunque elemento della pagina.
Wappalyzer analizza il sito web prescelto ed è in grado di indicare se è stato usato un CMS come wordpress, joomla prestashop, drupal nello sviluppo del sito, è in grado di identificare il linguaggio server-side utilizzato, le librerie javascript come jquery, mootools, prototype , il tipo di server (IIS, apache o Nginx), il sistema operativo (windows, unix o linux nelle sue varie distribuzioni) , identifica anche i tool di analisi come google analytic e quantast, i servizi di font web come cufon, google web font, type kit e molti altri servizi o strumenti che vengono usati nello sviluppo dei siti.
Colorzilla può selezionare il colore di un elemento della pagina che sia testo o immagine in rgb sia nella modalità percentuale che in decimali o esadecimale, analizzare l’ intera pagina e dare una panoramica di tutti i colori usati nella pagina, mostrare la palette colori per poter selezionare il codice corrispondente a un colore che serve o creare il codice css per i gradienti tramite lo strumento Gradient Generator.
Colorchecker rende possibile analizzare un singolo elemento o l’ intera pagina per vedere se rispetta le linee guida dettate dal WCAG 1 e 2, dando un resoconto sintetico di tutti i parametri analizzati e quali di questi sono stati superati.
Fontfinder grazie a questa estensione si può facilmente identificare la famiglia a cui appartiene un determinato font e inoltre i parametri che riguardano Spacing ,Color, Decoration \ Transformation. Questi possono essere salvati nella clipborad per essere incollati nell’editor, i parametri possono anche essere modificati per effettuare dei test e valutare l’ effetto cambiando il font, la spaziatura, colore o lo stile del testo.
Naturalmente in base alla specializzazione ci potrebbero alcune estensioni che siano più utili di altre o alcune che, data la molteplicità degli add-on disponibili, non ho inserito nella guida. E voi quali altre estensioni ritenete indispensabili?
