En un contexto en el que resulta prácticamente impensable que un negocio carezca de su propio sitio en Internet y en el que la tecnología en general ha experimentado un crecimiento tan célere como significativo, los desarrolladores se han convertido en los nuevos gurús del momento. Y precisamente este post va dedicado a ellos; o al menos a aquellos que se dedican a diseñar webs.
Así, hoy recopilamos algunas de las herramientas más útiles a la hora de pulir y comprobar el resultado final, en concreto, tres extensiones para personalizar nuestro navegador y medir distancias en la página creada de manera más sencilla. Unos “extras” interesantes que nos ponen las cosas más fáciles. Esta es nuestra selección:
Measure It
Una de las más populares, Measure It es una extensión con una larga trayectoria a sus espaldas. Un complemento compatible con Firefox y Chrome que se instalará sobre la barra del navegador con su propio icono, un botón que deberemos pulsar para poder usar una suerte de regla que se superpone a la web que tengamos abierta y que nos brinda la posibilidad de medir los píxeles de alto y ancho, la distancia entre determinadas imágenes y un largo etcétera que ya te puedes imaginar.
Una de sus mayores virtudes es que resulta muy sencilla de utilizar, una virtud que nos permite, con solo un par de clics activar esta capa sobreimpresa para determinar las medidas de cualquier objeto que se esté mostrando en nuestra pantalla. Bastará con pinchar y arrastrar seguidamente hasta el lugar que deseemos; otra opción consiste en usar las flechas del teclado. Cada pulsación desplaza la zona de medición 1 píxel.
Page Ruler
Page Ruler, asimismo, es un plugin con idéntica función: la de ayudarte a conocer las medidas de distintos elementos de la web que estás analizando. Dibuja una regla en cualquier lugar y comprueba el ancho, el alto, la posición del objeto y más. Para cambiar el tamaño de la regla deberás arrastrar sus bordes hasta conseguir el resultado que desees. Ahora bien, si necesitas un cambio de precisión puedes usar la barra de herramientas.
Otra de sus prestaciones consiste en la habilitación de un “modo elemento”, que sirve para delinear los elementos de la web a medida que el puntero de nuestro ratón se mueve sobre ellas. La hallarás en hasta más de 10 idiomas distintos; aunque si deseas obtener más información puedes acceder a su sitio web oficial. Respecto a su código, se encuentra en GitHub.
OMeasure
Pensada para el navegador Opera, OMeasure resulta muy similar a las extensiones que le preceden en esta lista. De hecho, funciona de la misma manera: creando una capa que se superpone a la web que estamos visualizando y que nos permite crear una regla sobre el elemento que deseemos seleccionar con la intención de conocer su tamaño, posición y demás. También mitiga el fondo para informarnos de que se encuentra activada.
Otras consideraciones
Al margen de lo dicho, existen más extensiones para personalizar el navegador que serán de gran ayuda en el proceso de depuración de la web. Es el caso de la barra de herramientas de Web Developer que, a diferencia de las anteriores, no se trata de una específica, pero nos permite llevar a cabo mediciones. Firebug, enfocada a otras funciones, también incluye una regla, aunque no resulta demasiado sencillo encontrarla.
Otras, como CSS remove and combine, nos permiten analizar el CCS, eliminar secciones concretas, descargarlo, etcétera. Drag Design también nos permite alterar el diseño con solo arrastrar los elementos, algo muy interesante si queremos saber cómo influirán determinados cambios.
En cuanto al color, nos quedamos con Color Contrast Analyzer –para llevar a cabo un análisis del contraste de los tonos que hemos usado siguiendo las pautas del WCAG 2.0 y comprobar si nuestra web es accesible para personas con alguna discapacidad visual- y Color Pick Eyedropper –un complemento con el que inspeccionar la paleta de colores y hasta obtener el código hexadecimal que define el tono en cuestión-.
En Genbeta | Es hora de plantearte tu carrera como desarrollador
En Genbeta Dev | Extensiones de Firefox para desarrolladores web
Ver 2 comentarios