Extensions útils de Firefox per a tot dissenyador web
Com es ben sabut, Firefox és el navegador de codi obert per excel·lència. Fora d’enaltir la seva gran potencialitat i/o la seva robustesa, aquesta entrada és un recull de les principals extensions que considero útils per a tot dissenyador web.
Aquestes són:
- Web developer
- ShowIp
- MeasureIt
- ColorZilla
- DOM inspector
- HTML Validator
- FireBug ACTUALITZACIÓ – 05/10/07
Web developer
És una extensió que afegeix un menú a la barra d’eines del nostre navegador amb diferents eines orientades als desenvolupadors d’aplicacions web.
Entre totes les opcions que ofereix aquesta, cal destacar les opcions de ressaltat de formes segons el seu atribut, la capacitat d’inhabilitar el CSS, Javascript, imatges, i demés per tal de comprovar l’accessibilitat del lloc; a més a més, cal destacar la quantitat abundant d’informació clara que pot extreure del codi amb un simple click, com pot ser la informació dels formularis de la plana, les mides d’un determinat component o imatge, etc.
ShowIp
És una extensió per aquells que esteu treballant en dos o més entorns a la vegada, com pot ser el cas de desenvolupament, integració i producció, per exemple.
Aquesta ens mostra a la barra d’estat del navegador l’adreça IP de la màquina a la qual ens estem connectant, a més a més, d’altres funcions avançades. Així, podem saber en tot moment en quin dels entorns ens trobem.
MeasureIt
És una petita, senzilla però potent extensió que ens instal·la una petita icona a la barra d’estat des d’on podem accedir a una regla que ens ajudarà a mesurar qualsevol dels elements que trobem en el nostre document, oferint-nos així mesures exactes de la visualització actual que tenim a la pantalla.
ColorZilla
És una extensió que ens instal·la una petita icona a la barra d’estat del navegador i que ens ofereix un petit cursor que possicionant-lo damunt d’un element, ens dóna informació del seu color, etiqueta, estil i demés. A més a més, hom pot ampliar la plana amb una petita eina d’ampliació que incorpora, guardar els colors que seleccionem en una paleta pròpia, i analitzar el color del document a través de l’estructura DOM del document.
DOM inspector
És una extensió que s’ha d’escollir en quan instal·lem el navegador (opció personalitzada). Aquesta instal·la una petita aplicació que ens permet accedir d’una forma senzilla, ràpida i molt intuïtiva a l’estructura de documents DOM, XML, etc. Per posar un petit exemple de la potència d’aquesta extensió, només dir que hi ha una opció que permet clicar directament damunt d’un element del document (mentre l’estem visualitzant en mode gràfic), per tal d’accedir a tota la seva informació del node en el que es troba aquest element. Així, podem accedir a la seva informació lògica, al Javascript, a cadascun dels seus atributs segons el DOM, als estils que aplica i als estils que computa l’element, i així fins a un llarg etcètera.
HTML Validator
És una potent extensió que afegeix la funcionalitat de validació de codi HTML. El nombre d’errors de la plana ens apareixen en una petita icona a la barra d’estat del nostre navegador. Els detalls d’aquests errors, juntament amb una explicació de com resoldre’ls ho podem veure al visualitzar el codi font de la pàgina.
Aquesta extensió està basada en Tidy, que és un petit programa creat pel W3C que intenta ajudar a corregir els errors d’HTML que es poden classificar en tres:
- Errors
- Errors HTML que Tidy no pot arreglar o entendre.
- Warnings
- Error HTML que Tidy pot arreglar automàticament.
- Warnings opcionals d’accessibilitat
- Warnings HTML classificats en els tres nivells de prioritat definits en els termes d’accessibilitat del WAI de la W3C.
FireBug
És l’extensió definitiva per a tot maquetador CSS, desenvolupador d’aplicacions AJAX i altres tecnologies basades en XHTML, CSS, XML i Javascript. Entre algunes de les característiques principals hi ha:
- Inspeccionar XHTML i editar en línia aquest i també el seu CSS associat.
- Visualitzar el layout d’una caixa d’una forma molt gràfica.
- Monitoritzar la xarxa per veure quan tarda en carregar cadascun dels elements.
- Debugar Javascript de forma fàcil i intuïtiva.
- Trobar errors al XML, CSS i al Javascript fàcilment.
- Explorar el DOM fàcilment.
- …
Només dir que des que he descobert aquesta extensió, les altres ja quasi bé ni les utilitzo. És l’extensió definitiva per a tota persona que es dediqui al món de la construcció d’aplicacions basades en web. Recomanada al 100% a tothom.
Tags: firefox