6 Complementos esenciales de Firefox para diseñadores
Como diseñador web (y conocedor de Internet con conocimientos tecnológicos), no hay excusa para no utilizar Firefox como su navegador web principal. Si aún no está usando Firefox, necesita ir y descargar en este momento. Firefox no solo proporciona una experiencia de navegación de Internet de primera línea, sino que también proporciona una cantidad infinita de funciones que simplemente no encontrará en ningún otro navegador de Internet.
Debido a que los terceros pueden desarrollar complementos para Firefox, al descargar los mejores complementos que están disponibles, puede transformar Firefox en una herramienta que aumenta drásticamente su productividad y le ahorra una cantidad de tiempo incontable. Dado que hay tantos complementos disponibles para descargar, puede ser un poco abrumador elegir cuáles debería usar.
Por lo tanto, decidí hacer todo el trabajo por usted y compilar una lista de los seis mejores complementos de Firefox para diseñadores web.
Desarrollador web
Aunque se llama Desarrollador web , este complemento de Firefox es absolutamente invaluable para los diseñadores web. Si solo fuera a descargar e instalar un complemento de Firefox, este es el que yo recomendaría. La razón es que este complemento proporciona una variedad de características útiles diferentes, y podría clasificarse como los complementos Swiss Army Knife of Firefox .
La primera característica de este add-on que los diseñadores encontrarán útil es el menú CSS . Las características de este menú incluyen la capacidad de deshabilitar estilos, mostrar CSS por tipo de medio, ver CSS, ver información de estilo, agregar una hoja de estilo de usuario personalizada o editar directamente CSS .
La siguiente característica de interés para los diseñadores es el menú Imagen . Además de permitirte mostrar los atributos ALT, las dimensiones de la imagen, los tamaños de los archivos de imagen y las rutas de las imágenes, puedes inhabilitarlas, encontrar imágenes rotas, delinear imágenes, reemplazar imágenes con atributos ALT y varias funciones adicionales.
Aunque podría dedicar varias páginas a todas las características que ofrece este complemento, solo quiero tocar algunas otras funciones que los diseñadores web encontrarán especialmente útiles. Estos incluyen la capacidad de delinear diferentes elementos (desde marcos hasta elementos de nivel de bloque), editar HTML y mostrar elementos ocultos .
Firebug
Si bien Web Developer es el primer complemento que recomendaría a cualquier diseñador, Firebug se ejecuta muy cerca en términos de utilidad para los diseñadores.
Con Firebug, se te brinda instantáneamente la capacidad de editar, depurar o monitorear cualquier página web . Firebug te da un control total sobre CSS, HTML y JavaScript de cualquier página que elijas. Lo mejor de todo es que cada cambio que realice se realiza en vivo y de manera instantánea , de modo que puede probar rápidamente diferentes cambios y ver los resultados de esos cambios al instante.
Al igual que la mayoría de los mejores complementos para Firefox, Firebug va más allá de su funcionalidad básica y ofrece una gran cantidad de opciones que hacen que sea fácil para cualquier usuario personalizar por completo el uso de este add-on. Algunas de las características y opciones adicionales ofrecidas por Firebug incluyen atajos de teclado, la capacidad de controlar cómo y dónde aparece el área de edición de Firebug, guías visuales para editar CSS, análisis de actividad de red y registro personalizable para JavaScript .
Colorzilla
Como diseñador web, nunca se sabe cuándo le va a sorprender la inspiración mientras navega por Internet. Por ejemplo, puede que esté mirando un sitio web y encuentre un color que realmente le guste.
Si desea una forma rápida y eficiente de poder averiguar el valor exacto de HSV y RGB para esa herramienta, debe instalar el ColorZilla Añadir.
El add-on de ColorZilla cuenta con un cuentagotas en línea , lo que hace que sea bastante simple obtener el valor exacto de un color específico. Además del cuentagotas en línea, ColorZilla ofrece varias funciones adicionales que la mayoría de los diseñadores web encontrarán útiles, como un analizador de color DOM y un visor de paleta en línea . El analizador de color DOM le permite ubicar elementos en la página que corresponden a un color determinado y conocer las reglas de CSS que especifican un determinado color, mientras que el visor de paleta en línea le permite marcar y compartir las paletas de colores que desee.
Disparo de fuego
Aunque su sistema operativo sin duda tiene una función integrada de captura de pantalla, esto no significa que la captura de pantalla predeterminada tenga todas las capacidades que pueda necesitar.
Por ejemplo, ¿la captura de pantalla predeterminada de su sistema operativo puede tomar partes de una página web que están fuera de la ventana del navegador?
En la mayoría de los casos, la respuesta a esa pregunta va a ser no. Afortunadamente, hay un complemento de Firefox que ofrece esta función, junto con una variedad de otras funciones útiles.
FireShot es un complemento de captura de pantalla avanzado para Firefox . Además de darle la capacidad de capturar una página web completa (incluso cuando hay partes de la página web que no son visibles como resultado de las restricciones de la ventana de su navegador), FireShot también le permite agregar anotaciones directamente a su capturas de pantalla.
Disparo de fuego le brinda varias opciones para manejar sus capturas de pantalla. No solo se pueden guardar en una variedad de formatos de archivo, sino que también pueden guardarse en su computadora, enviarse por correo electrónico a otros o guardarse en el servidor de alojamiento de FireShot gratuito. Como resultado de su amplia gama de funciones, este complemento ha atraído a más de ciento cincuenta mil usuarios activos, y ha demostrado ser de gran valor para diseñadores web y otros profesionales de Internet.
CSS Validator / HTML Validator
Como diseñador, debe asegurarse de que los visitantes puedan acceder fácilmente a todos sus trabajos y de que se les muestren correctamente. Una de las formas más sencillas de garantizar que se lleven a cabo estas dos tareas es validando todo el código .
Aunque son dos complementos separados, tanto el Validador CSS como el Validador HTML deben instalarse en el navegador de cualquier diseñador web. Una vez que los complementos están instalados, Validador de CSS se puede acceder desde el menú Herramientas, mientras que se puede acceder al Validador HTML desde la barra de estado de Firefox.
Cada uno de los complementos valida el código con los estándares W3C apropiados . Si bien CSS Validator simplemente hace una validación estándar del código, el Validador HTML proporciona alguna funcionalidad adicional.
Al utilizar Validador HTML, puede optar por validar directamente en el navegador (donde los errores se muestran como un icono de barra de estado), mostrar el origen con explicaciones de errores después de la validación o una validación con soluciones propuestas a cualquier error.
Resizer de la ventana del navegador
Como alguien que crea diseños para Internet, uno de los problemas más frustrantes que indudablemente encontrará es tratar de crear diseños que funcionen en una variedad de tamaños de pantalla.
Como no sabe si un visitante va a ver su trabajo a 640 × 480, 800 × 600, 1024 × 768, 1280 × 1024 o 1600 × 1200, es su responsabilidad crear diseños que funcionen con todas estas resoluciones. .
Si bien hay una variedad de maneras de ver su trabajo en diferentes resoluciones, he encontrado que el navegador Complemento de Window Resizer es la forma más eficiente de lograr esta tarea. Una vez que descargue e instale este complemento, podrá cambiar el tamaño de la ventana de su navegador al instante a cualquiera de los tamaños de resolución estándar enumerados anteriormente.
Esto le permitirá ver si su diseño se verá bien para los visitantes que no están usando la misma resolución que usted. Lo mejor de este add-on es que si lo está usando junto con los otros complementos de esta lista (específicamente Firebug), cuando ve que algo no se muestra correctamente, puede hacer ajustes instantáneos a su código. y vea si eso soluciona el problema, todo sin dejar su ventana actual del navegador.
¿Conoce alguna otra buena extensión para diseñadores? Siéntase libre de comentar y dejarnos sus comentarios.