Logotipo Webficina

Cómo 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

 

1. Guías

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

 

Visbug Comprobar medidas

 

 

  • 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

 

2. Inspect

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

 

Visbug Inspector

 

3. 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

 

4. Move

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

 

5. 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 + ▲▼
  •  

6. Padding

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

 

Visbug Padding

 

7. 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 + ◀▶
  • Wrapping: ctrl + Shift +▲▼
  •  
Relacionados:
Buscador de Imágenes gratuitas para tus proyectos

8. 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 + ◀▶

 

9. 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 + ◀▶

 

10. Position

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

 

Visbug Position

 

11. 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 + ▲▼

 

12. 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.