Logotipo Webficina

Como sacar información de otros diseños web y hacer pruebas online de los nuestros

Contenido

Hoy vamos a ver una nueva extensión que tanto nos permite extraer información de otras webs, como pueden se fuentes utilizadas, tamaños, paddings, márgenes, coloreles, etc., como nos permite hacer pruebas en nuestras webs ya publicadas, editar textos, colores, etc.

Visbug, extensión de código abierto para diseñadores

La extensión se llama Visbug y vamos a ver sus características principales.

A lo largo de un menú vertical, aparecen las distintas opciones de esta extensión

Guías

Visbug Comprobar medidas

Las guías se utilizan principalmente para verificar las alineaciones y conocer las distancias entre distintos elementos de la web

Activación de guías: hover, al pasar el ratón por encima

Medidas: Click + hover, hacer click y pasar el ratón por encima

Etiqueta de medidas: Shift + Click

Inspect

La herramienta inspeccionar te permite ver los estilos comunes y actuales de los elementos de la web

Visbug Inspector

Accessibility

Accesibilidad evalúa y puntúa el ratio de contraste entre los elementos y su fondo A++ y A+++ son las máximas puntuaciones.

Visbug Contraste accesibilidad

Move

Mover permite mover y cambiar de sitio algunos elementos dentro de la web con el ratón y las teclas de dirección.

Margin

Margen, como su nombre indica, nos muestra y permite modificar con algunas teclas los márgenes de los elementos utilizados en el diseño de la web.

Visbug Margenes

Más margen – ◀▶▲▼

Menos margen – alt + ◀▶▲▼

Todos – ctrl + ▲▼

Padding

Esta opción permite hacer lo mismo que la de margen pero modificando en este caso el padding

Visbug Padding

Flexbox Align

Permite crear o modificar la dirección, distribución, orden y envoltura del flexbox

Filas: ctrl + ▼

Columnas: ctrl + ▶

Alignment: ◀▶▲▼

Distribución: Shift + ◀▶

Order: ctrl + Shift + ◀▶

Relacionados:
10 Servicios de Hosting gratuito a tener en cuenta

Wrapping: ctrl + Shift +▲▼

Hue Shift

Cambiar el tono, el brillo, la saturación y la opacidad del primer plano y del fondo

Saturación: ◀▶

Brillo: ▲▼

Tono: ctrl + ▲▼

Opacidad: ctrl + ◀▶

Shadow

Permite crear y ajustar la posición, el desenfoque y la opacidad de una sombra de caja

X/Y Position: ◀▶▲▼

Blur: alt + ▲▼

Spread: alt + ◀▶

Opacity: ctrl + ◀▶

Position

Permite posicionar los elementos de la web, tanto con las flechas de dirección del teclado como con el ratón.

Visbug Position

Font Styles

Cambiar el tamaño, la alineación, el interlineado, el espaciado y el peso de las letras

Visbug Modificar fuentes

Tamaño: ▲▼

Alineación: ◀▶

Espaciado: Shift + ◀▶

Interlineado: Shift + ▲▼

Peso: ctrl + ▲▼

Edit Text

Permite editar los textos de la web haciendo doble click sobre ellos.

Visbug Editor de texto

También hay unos iconos fuera del menú principal vertical que permiten cambiar el color a los textos, a los background o fondos y a los bordes.

Visbug Cambiar colores

A continuación te dejamos un breve vídeo donde puedes ver como funciona esta extensión.