RulersGuides.js - Reglas y guías de estilo de Photoshop en la Web

Una de las mejores cosas de Photoshop es sus líneas de guía fáciles de usar que se pueden extraer de las reglas. Esas guías pueden hacer que el proceso de diseño sea mucho más fácil cuando se trata de posicionar un elemento y obtener el equilibrio perfecto.

Para nuestro deleite, Mark Rolich ha implementado esta característica particular para su uso en la Web. Ha creado RulersGuide.js basado en reglas y guías de Photoshop.

RulersGuide.js tiene la capacidad de agregar una interfaz de estilo de línea de guía de Photoshop en una página web . Las líneas que se han creado se pueden guardar para su uso futuro también. Le proporciona tres opciones de uso: como una biblioteca de JavaScript, como un marcador o como una extensión de Chrome .

El Javascript

RulersGuide.js requiere algunas otras dependencias para funcionar bien. Como funciona arrastrando y soltando líneas en la página y requiere algo de utilización de eventos, deberá agregar Dragdrop.js (disponible aquí) y Event.js (disponible aquí). Luego, incluya esas dependencias junto con la fuente RulersGuide.js (descargue aquí) de la siguiente manera:

Si no le gusta el estilo predeterminado, puede editar su CSS para adaptarlo a su gusto. Luego, inicialice esos paquetes con la siguiente secuencia de comandos:

Bookmarklet y extensión de Chrome

Para su comodidad, puede usar esta herramienta como un marcador o una extensión de Chrome y abrirla cuando y donde quiera.

Instalación Bookmarklet

Para el bookmarklet, simplemente instálelo como lo hace habitualmente. Dado que Internet Explorer a veces funciona de una manera diferente, esta herramienta se adapta a eso al diferenciar el instalador de bookmarklet para el IE y el usuario que no es IE. Simplemente arrastre y suelte el enlace apropiado a continuación en su barra de marcadores de libros.

• Bookmarklet no IE
• Usuarios de IE Bookmarklet

Instalación de extensión de Chrome

Si eres un amante de Chrome, es posible que te guste esta opción. Desafortunadamente, RulersGuide aún no está disponible en Chrome Webstore. La única opción es instalarlo manualmente.

Primero, toma el archivo de extensión aquí. El navegador le pedirá que confirme el archivo; solo presiona continuar. La extensión no se instalará automáticamente porque Chrome tiene su protocolo de seguridad para mantenerte a salvo.

Ábralo navegando a Opciones> Herramientas> Extensiones o abra una nueva pestaña y luego copie y pegue las extensiones chrome: // en la barra de direcciones. Luego, arrastre y suelte el archivo RulersGuide.crx descargado a la página de extensión como se muestra a continuación.

La extensión está ahora lista.

Trabajando con reglas

Como se mencionó, RulersGuide funciona exactamente como la regla de Photoshop y la línea de guía. Cuando habilite esta herramienta, obtendrá reglas en la parte superior e izquierda de su navegador. Puedes sacar algunas líneas de esas reglas.

Y en la esquina superior izquierda de la página, puede obtener más opciones del menú disponible. Desde este menú, puede personalizar si desea que las líneas se muestren, guarden, bloqueen y más.

Vamos a conocer mejor las opciones.

• La opción ocultar se usa para ocultar ambas reglas y guías como lo desee. Incluso cuando las reglas están ocultas, aún puedes ver la opción de menú.

• Si presionas Desbloquear, las reglas permanecerán visibles en la página mientras te desplazas. Borrar todas las guías es útil cuando quiere borrar todas las guías que ha creado.
• La opción Guardar grilla se usa para guardar la cuadrícula que ha creado. La cuadrícula se guardará en función de la ubicación de la página, por lo que no podrá usar la misma cuadrícula en otras ventanas / pestañas del navegador. Y como era de esperar, la opción Abrir cuadrícula es abrir sus grillas guardadas.

• Cuando pulse la opción Mostrar información detallada, se habilitará el modo de información detallada. Puede mostrarle la posición y el tamaño de las regiones de la cuadrícula que crea, así como también cualquier cambio que realice en la posición de la guía.

• El último es la opción de ajuste . Esto es lo que me gusta de RulersGuide. Puede ajustar las guías al elemento DOM o usarlo con el tamaño de píxel definido. Tenga en cuenta que, la opción Ajustar a DOM todavía está en su etapa experimental en el momento de la escritura. Puede disminuir la velocidad o dejar de responder en una página con muchos elementos.

Conclusión

Desafortunadamente, todavía hay un pequeño inconveniente. No puede eliminar una sola guía como en Photoshop. Solo puede eliminar todas las guías y sxtart crearlas desde cero. Aún así, si trabaja en diseños web con frecuencia en buscadores, entonces esta herramienta es para usted.

Función reciente de Google App: todo lo que hay que saber

Cuando se trata del historial de búsqueda, se sabe que Google mantiene un registro de sus búsquedas en la página Mi actividad como registros de texto. Sin embargo, parece que Google tiene una ventaja cuando se trata de registrar su búsqueda en su propia aplicación, ya que la aplicación de Google ahora almacena en caché su historial de búsqueda en forma de tarjetas visuales . Dispon

(Consejos de tecnología y diseño)

15 ejemplos de cómo la tecnología innova la moda

Fue la gran Coco Chanel quien dijo una vez: "La moda cambia, pero el estilo perdura". Bueno, independientemente de lo que piense sobre el tema, hay otra cosa que cambia junto con la moda. Es tecnología. Con la cantidad de innovación que está sucediendo en estos días, tiene sentido unir a los dos . De

(Consejos de tecnología y diseño)