Saltar al contenido

Diseñar mejores páginas Web con extensiones de Firefox

Para el diseño de páginas web es necesario apoyarse en herramientas que nos faciliten la vida, nos permitan ser más productivos y a la vez, no restrinjan nuestras capacidades creativas.

Si alguna vez has intentado crear o editar una página Web, sabes que a veces puede llevar mucho tiempo conseguir esos pequeños detalles. Aquí tienes algunas extensiones de Firefox que puedes añadir a tu caja de herramientas y que te ayudarán a medir imágenes, alinear objetos en tu página y capturar colores de forma rápida y sencilla.

 

Regla

Cuando necesites conocer el tamaño exacto de tus barras laterales, cabeceras y otras imágenes, en un abrir y cerrar de ojos, MeasureIt puede decírtelo. MeasureIt añade un pequeño icono de regla en el lado izquierdo de la barra de estado. Al hacer clic en el icono se abre un cursor en forma de cruz; simplemente mueve el cursor hasta el objeto que deseas medir y arrastra un cuadro sobre él. La extensión mostrará la anchura y la altura de ese objeto en píxeles a la derecha del cuadro dibujado. Para salir de MeasureIt, pulsa la tecla Escape y la página volverá a la normalidad.

 

Cuadrículas

Las cuadrículas son útiles para juzgar las distancias y las relaciones espaciales, y te ayudan a alinear mejor los objetos, dándoles más espacio en su página Web. Para asegurarte de que los objetos que colocas en tu página Web están bien alineados y mantienen su posición en un diseño basado en cuadrícula, usa GridFox

Esta extensíon nos muestra cuadrículas como las que encontrarás en un editor de imágenes como GIMP. Si alguna vez has utilizado un editor de imágenes de este tipo, encontrarás GridFox fácil de usar, intuitivo y sencillo.

Por defecto, GridFox sólo nos ofrece cuadrículas verticales. Vete a Herramientas -> GridFox -> Opciones para obtener cuadrículas horizontales, cambiar los colores de fondo, cambiar el grosor o color de las cuadrículas, y mucho más. Una desventaja es que es un poco difícil conseguir que las rejillas estén justo donde las quieres. Es posible que tengas que cambiar los valores de las columnas y filas una y otra vez para que sean correctos. Hubiera sido estupendo que las rejillas fueran también guías para que pudieras reposicionarlas fácilmente arrastrándolas. Conocer el ancho de una página Web nos ayuda a colocar las rejillas externas. Puedes colocar tus rejillas internas dependiendo de si deseas que las columnas tengan el mismo ancho.

Colores

Los colores y la paleta de estos, juegan un papel importante en conseguir que su nuestra web destaque. Con ColorZilla, podemos averiguar fácilmente qué colores están siendo usados en las páginas Web.

Después de la instalación, ColorZilla coloca un icono de cuentagotas en el lado izquierdo de la barra de estado.

Para elegir un color, podemos hacer clic con el botón derecho del ratón en el icono del cuentagotas, luego hacemos zoom en la página para que podamos seleccionar mejor el color que deseemos,y para terminar, damos clic con el botón izquierdo en el icono y colocamos el cursor en forma de cruz sobre el color que deseamos analizar. Por defecto, los códigos de color RGB y hexadecimal se muestran en la barra de estado, así como la distancia desde el último punto resaltado por el ratón y la etiqueta del elemento. Solo tenemos que hacer clic con el botón izquierdo del ratón en el color para capturarlo en la paleta de selección de colores de ColorZilla.

Después de capturar el color, podemos hacer doble clic en el cuentagotas ColorZilla para abrir la paleta de selección de colores. Allí podemos modificar el color para que se adapte mejor a nuestras necesidades. ColorZilla también ofrece una completa herramienta de selección de color, como se puede encontrar en todos los editores de imágenes. Encontraremos una amplia gama de opciones de visualización en el menú Formato de la barra de estado. Me gusta poder ver dónde se encuentra un elemento en el modelo de objeto de documento cambiando el menú Formato de la barra de estado en Opciones -> Formato de la barra de estado -> ruta.

ColorZilla también instala la extensión Auto Copy Firefox, que nos permite copiar automáticamente el texto seleccionado en el portapapeles. Después de activarlo (navega a Opciones -> Copia automática -> Activado) podemos copiar automáticamente cualquier texto seleccionado y pegarlo donde deseemos con un clic del ratón.

Pues aquí lo tienes, tres herramientas que pueden ayudarte a publicar imágenes y texto. MeasureIt te ayuda a saber exactamente cuánto espacio se asigna a tus imágenes. GridFox garantiza que el texto y las imágenes están alineadas y ColorZilla puede servirte para modificar los colores de tu post sobre la marcha.

Entradas relacionadas

Download Best WordPress Themes Free Download
Download Nulled WordPress Themes
Download Premium WordPress Themes Free
Download WordPress Themes
udemy paid course free download