RulersGuides.js: herramienta auxiliar de diseño web inspirada en Photoshop

La regla y la posibilidad de dibujar líneas auxiliares son características indispensables de Photoshop y otras aplicaciones de dibujo y edición de imágenes. ¿Por qué sólo Photoshop y tal? Medir distancias y verificar orientaciones a través de líneas auxiliares también puede ser útil en un sitio web. RulerGuides.js viene a su rescate. Agrega una regla con las características mencionadas a cualquier sitio web a través de un marcador.

RulersGuides.js: características conocidas de Photoshop

Para poder usar RulersGuides.js, el JavaScript debe configurarse como un marcador en el navegador. Una vez hecho esto, muestra una regla similar a Photoshop en cualquier sitio web cuando se hace clic en el bookmarklet. Las unidades de la regla están únicamente en píxeles. Esto no te sorprende, ¿verdad?

Coordenadas X e Y, así como ancho y alto de los rectángulos dibujados

Ahora se pueden dibujar líneas auxiliares horizontales y verticales con la ayuda de la regla y luego adherirse al sitio web. Hay más funciones disponibles en un menú. Al usar líneas auxiliares para medir distancias, tamaños y posiciones, la función «Mostrar información detallada» puede ser muy útil. Muestra las coordenadas x e y, así como el ancho y el alto de cada rectángulo dibujado con las líneas del libro mayor.

Diferentes opciones de presentación

De forma predeterminada, las reglas están vinculadas al borde superior izquierdo del documento HTML. Por lo tanto, la regla horizontal desaparece al desplazarse hacia abajo. La opción «Desbloquear reglas» las afloja de su posición fija para que siempre estén visibles.

También es posible desvanecer las reglas y las líneas contables hacia adentro o hacia afuera independientemente unas de otras. Por supuesto, también puede eliminar todas las líneas a la vez.

Alineación de líneas auxiliares con elementos DOM

La función „Snap to DOM“ se encarga de una ubicación precisa de las líneas del libro mayor. Aquí, las líneas siempre están alineadas con los bordes exteriores de los elementos DOM. De esta manera, se pueden colocar con tanta precisión que encierran un elemento en particular, por ejemplo, un área „

“ o „“.

Alternativamente, es posible colocar las líneas a una distancia fija entre sí. Por ejemplo, se pueden colocar cada 100 píxeles desde arriba y cada 50 píxeles desde la izquierda. De esta manera, las cuadrículas se pueden construir rápidamente.

RulersGuides.js: guardar líneas auxiliares para uso posterior

Tan pronto como se actualiza una página, las líneas desaparecen. Sin embargo, el marcador le permite guardar todas las líneas colocadas. Luego se pueden recrear y mostrar desde un menú.

Las líneas siempre se guardan por dominio. Las líneas guardadas solo se pueden usar dentro de un solo proyecto y no en diferentes sitios web.

Bookmarklet para todos los navegadores o IE específicamente

El bookmarklet RulersGuides.js está disponible en dos versiones. Una es compatible con Internet Explorer a partir de la versión 7 (sin embargo, sin la opción de guardar las líneas contables) y la otra variante es compatible con todos los navegadores modernos.

Conclusión

RulersGuides.js se distribuye bajo los términos de la licencia liberal MIT que permite el uso gratuito con fines privados y comerciales, incluso en el trabajo del cliente. También está disponible una breve guía de los controles, en la que se incluyen las combinaciones de teclas para acceder a las diferentes funciones.

(dpe)