Las 15 extensiones imprescindibles de Firefox para webmasters y bloguers
Lo mejor de Firefox son sus extensiones y hoy en día por ejemplo casi no puedo imaginar lo que sería el desarrollo web sin una extensión tan estupenda como Firebug. Además, existen muchas otras que si te dedicas al diseño o desarrollo web, e incluso si simplemente quieres modificar el aspecto de tu blog te serán herramientas de uso continúo.
De entre los miles de extensiones que tiene Firefox nos hemos decantado por estas 15 porque son las que nosotros usamos cada día y nos resultan verdaderamente útiles. Por supuesto agradecemos sugerencias.
NOTA: Para instalar un complemento accede a esta página desde Firefox y usa los enlaces que hay justo a cada extensión, se instalarán automáticamente (excepto YSlow que debe descargarse desde Yahoo).
1. Firebug
La extensión imprescindible para cualquier diseñador o desarrollador web. Permite modificar una web directamente desde el navegador para ver cómo afecta un determinado cambio, qué causa un error o se parsea correctamente, localizar propiedades y estilos, ver qué elementos se cargan y un largo etc de propiedades casi mágicas. Si te dedicas al diseño web, Firebug es una bendición y nada será lo mismo con él. Creedme.
Con firebug tenemos absoluto control sobre lo que el navegador muestra y se ha parseado, y es muy útil para comprobar medidas de CSS, detectar errores, probar diseños y un largo etc.
Descargar Firebug para Firefox
Haz click en leer más para ver la guía completa
2. Yslow
Genial complemento creado por Yahoo para Firebug que muestra una nueva solapa donde podemos ver los tiempos de carga de una página, peticiones del servidor, llamadas externas, etc. Imprescindible para optimizar los tiempos de carga de una web y para comprobar que todos los elementos que se peticionan desde el código existen.
Como podeis ver en la imagen según lo que seleccionemos en el menu superior se mostrarán los elementos correspondientes. En el ejemplo hemos seleccionado “imágenes” y así podemos ver todas las que carga la página. Según este esquema para este tipo de fichero podemos ver:
- Peticiones: El fichero al que se llama desde el código. En este caso vemos los nombres de la imágenes que es lo que hemos seleccionado. Si hacemos click en la flecha del nombre se despliegan todas las propiedades que tenga.
- Estado del fichero: si por ejemplo muestra un 404 quiere decir que se hace una petición desde el código a algo que no existe. Buscamos el nombre y subimos el elemento o lo buscamos en el código fuente de la página para ver por qué está ahí.
- Ubicación: en este caso todo está en macoteca.com, si se carga un banner por ejemplo se mostraría desde qué servidor de publicidad se recoge la imágen.
- Tamaño: en Kb. Podemos detectar ficheros excesivamente pesados que puedan estar ralentizando la página.
- Gráficas: tiempo necesario para descargar el elemento. Si sobrepasan la línea roja convendría optimizar la imagen para que pese menos.
Cada elemento tiene el suyo, podemos detectar por ejemplo el origen real de un Flash que se muestra. Genial complemento para el genial Firebug ¡Gracias Yahoo!
3. MeasureIt
Reglas para saber la medida de cualquier cosa que aparezca en la pantalla. Perfecto para calcular medidas sin complicarse la vida y casi imprescindible para hacer rejillas css exactas.
4. Colorzilla
Pequeño gran complemento que muestra el código que corresponde a cualquier color que piques en la pantalla con una precisión espectacular. Ideal para seleccionar colores al instante sin necesidad de mirar el código o de recurrir a aplicaciones de pago como ColorSchemer.
Los colores se van mostrando en tiempo real, mientras nos movemos se muestran. Es la manera más rápida de saber qué color es cual, igualar fondos, etc. Si te dedicas al diseño web lo usarás mucho. Ya verás.
Instalar colorpicker para Firefox
5. PixelPerfect
Gracias a este complemento podemos coger una imagen del diseño de una página que estamos maquetando y comprobar si las medidas y el resultado que vamos creando en HTML se ajustan a las originales del diseño en formato imagen. Se acabó andar “buscando las diferencias” a ojo.
6. Web developer
Varias herramientas muy útiles para páginas en desarrollo. Mi preferida es la que simula diferentes resoluciones de monitor para ver cómo queda una página en pantallas más pequeñas pero tiene muchas opciones más que interesantes.
Otros complementos muy útiles
- 7.Cache Status: añade una barra de información al navegador que nos permite ver todos los recursos de caché que está utilizando el navegador. Lo mejor es que nos permite borrar la caché casi al instante, algo que puede ser muy útil para comprobar modificaciones de páginas. Instalar Cache Status
- 8. GooglePreview: agrega a nuestras búsquedas en Google un pantallazo de cada resultado. Adecuado tanto para elegir o reconocer sitios de un golpe de vista como para inspirarse viendo páginas de otras temáticas. instalar GooglePreview
- 9. HTMLvalidator:: Sólo para Firefox de Windows, muestra si una página tiene algún error de HTML y cómo corregirlo. Instalar HTMLValidator
- 10. RankQuestSEO:proporciona la posición de una página en los rankings de Alexa y Pagerank de Google, pero además hace chequeo de enlaces y comprueba si el código es válido y está optimizado. Si te preocupa el posicionamiento de páginas, un complemento que no puede faltar en tu Firefox. Instalar RankQuestSEO
- 11. Imagezoom: Permite ampliar cualquier imagen de una página web para verla a pantalla completa o con más detalle. Instalar ImageZoom
- 12. LivePageRank: descubre de un vistazo el pagerank de una página analizandolo desde diferentes servidores. A día de hoy es el ranking más extendido y no viene mal conocer el puesto que ocupas con tus web. Instalar LivePageRank
- 13. Screengrab: graba como una imagen páginas web completas. Existen otros como WebSnapper o LittleSnapper, pero este complemento es gratis. Instalar Screengrab
- 14. Fireshot: permite hacer capturas de pantalla y agregar notas. Muy útil para ir mostrando proyectos a clientes o compañeros de equipo por ejemplo. Instalar Fireshot
- 15. Cooliris: búsqueda rápida de imágenes en Google, Flickr, etc para cuando buscas inspiración. Instalar Cooliris
Cómo hacer un backup de todos nuestras extensiones de Firefox:
FEBE (FirefoxExtensionBackupExtension) realiza copias de seguridad de todas las extensiones que tengas instaladas en Firefox, para que puedas conservarlas localmente o sincronizarlas en diferentes navegadores. Ahora que ya conoces unos cuantos complementos muy útiles es la mejor manera de conservarlos empaquetados. Instalar FEBE
Espectacular. Muchas gracias. Conocía el firebug pero lo demás me va a ser muy util también sobre todo eso de medir la velocidad y lo de coger el color
Geniales, la mayoría de ellos ya instalados. Aunque la barra de Google tiene muchas de estas cosas, y es la única que acepto en mi navegador
Pero un genial recopilación, sin duda
Muy buena recopilación.
Espectacular artículo.
Me ha encantado, muy sencillo y explicado de una manera clara, seguro que ha sido una currada así que se agradece mas, como todo lo de esta página.