Back to Top

10 Complementos en FireFox para hacer más fácil el diseño web.

Gracias a que los add-on amplían las funcionalidades del navegador de Mozilla. FireFox puede convertirse en una excelente herramienta para los diseñadores web, que están en busca de herramientas útiles que le permitan desarrollar profesionalmente sus labores del día a día de forma más eficiente y fructífera.

En la siguiente lista hallaras 10 complementos (add-on) altamente recomendados para diseñadores web. Si consideras que hay algún otro complemento que valga la pena nombrar y no este listado aquí, no dudes en sugerirlo en el área de comentarios.


1.- ColorZilla.

Complemento FireFox ColorZilla

Esta extensión incorpora un selector de color (semejante al usado en Photoshop) y una herramienta de cuenta gotas que sirve para capturar muestras de color vistas en cualquier página web.

Link: ColorZilla.

2.- CSS Usage.

Complemento FireFox CSS Usage

CSS Usage es una extensión para Firebug (para lo cual necesitaremos tener instalado Firebug) que descubre las reglas de estilo CSS que no estén siendo usadas, señalando que partes del CSS son innecesarias, para su posterior eliminación y así mantener los archivos CSS lo más ligero posible.

Link: CSS Usage.

3.- Firebug.

Complemento FireFox Firebug

Firebug es una extensión de código abierto que ofrece potentes herramientas a los diseñadores para inspeccionar y depurar el desarrollo web. Determinar que estilos CSS afectan a ciertos elementos, inspeccionar el Document Object Model (DOM) para aprender sobre la estructura de la página web, determinar los atributos como el color, la anchura, altura, entre otras.

Link: Firebug.

4.- Foxy SEO Tool.

Complemento FireFox Foxy SEO Tool

Se trata de una barra de herramientas que nos ofrece lo necesario para comprobar y optimizar el posicionamiento en buscadores de nuestros proyectos web. Entre los beneficios que ofrece, se encuentra un análisis del tráfico de la web, búsqueda de palabras claves, el control sobre los backlinks, etc.

Link: Foxy SEO Tool.

5.- HTML Validator.

Complemento FireFox HTML Validator

Esta herramienta nos apoyara para asegurarnos de la correcta escritura de las etiquetas HTML y sus atributos, de acuerdo a las directrices propuestas por la W3C. Devolviéndonos un informe sobre aquellos errores que hayamos cometido en la escritura.

Link: HTML Validator.

6.- IE Tab 2.

Complemento FireFox IE Tab 2

Los diseñadores web siempre se hallan preocupados por asegurarse que la incompatibilidad entre navegadores, no repercuta en su trabajo. Este complemento permite probar como se ve cualquier página web en Internet Explorer, “sin” salir de FireFox.

Link: IE Tab 2.

7.- Page Speed.

Complemento FireFox Page Speed

Page Speed es una extensión desarrollada por Google (disponible tanto en Firefox como en Crome) que genera un análisis, en las páginas web, sobre el rendimiento en cuanto velocidad al cargar los contenidos del sitio e indicándonos que mejoras se pueden aplicar a la página para aumentar su velocidad.

Link: Page Speed.

8.- SEO Doctor.

Complemento FireFox SEO Doctor

Es una herramienta útil para comprobar que las practicas SEO (Search Engine Optimization) estén bien aplicadas en el sitio que se esté analizando. Resaltando aquellas áreas que puedan ser optimizadas para los motores de búsqueda. Una característica interesante en este servicio, es que se pueden exportar los resultados en hojas de cálculo para su posterior análisis y registro.

Link: SEO Doctor.

9.- Screengrab.

Complemento FireFox Screengrab

Es una herramienta sencilla para generar capturas en imagen de cualquier página web, de manera parcial o la página completa. Se puede guardar la captura en el disco duro como archivo de imagen.

Link: Screengrab.

10.- Web Developer.

Complemento FireFox Web Developer

Es una enorme suite de herramientas de diseño web, completa de funciones útiles que ayudaran a los diseñadores a realizar de manera más eficiente su labor. Se muestra como una barra de herramientas posicionada en la parte superior del navegador. Si usted necesita inspeccionar las hojas de estilo, ver los atributos de las etiquetas HTML, validar un diseño de acuerdo a los parámetros de la W3C o checar las dimensiones en tamaño de los elementos, etc., Web Developer es la herramienta ideal para tí.

Link: Web Developer.