Unlimited AE and Premiere Pro templates, videos & more! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Photo & Video
  2. Video

Vistazo rápido: ¿Qué hay de nuevo en VisBug en 2020?

by
Read Time:4 minsLanguages:

Spanish (Español) translation by Marsel Toussaint (you can also view the original English article)

VisBug es una extensión increíblemente útil para Chrome y Chromium que te permite hacer cambios sencillos en cualquier sitio web directamente dentro del navegador.

Ya hemos cubierto previamente VisBug en nuestros cursos de VisBug Quick Start. y en Personaliza una plantilla con VisBug, y desde entonces ha habido algunas nuevas adiciones en nuestras herramientas.

Vamos a revisar que son cada una y como accesarlos en este articulo corto.

Complemento del visualizador del índice Z

Z-index Visualizer PluginZ-index Visualizer PluginZ-index Visualizer Plugin

Instantáneamente muestra los valores del índice z de todos los elementos haciendo clic en el icono de búsqueda en VisBug e introduciendo la letra z. A continuación, una opción de autocompletar que dice "/zindex" aparecerá. Haz clic en ella para activar el complemento y aparecerá un cuadro alrededor de sus elementos que muestran el valor del índice z en la parte superior.

Contraste al pasar el mouse sobre SVG

Contrast When Hovering Over SVGContrast When Hovering Over SVGContrast When Hovering Over SVG

Ahora puedes pasar el mouse sobre cualquier parte de cualquier imagen SVG y ver cuál es su valor de contraste de color en relación con el fondo que lo rodea. Primero, selecciona la herramienta de "Accesibilidad" de VisBug y, después, mantén el mouse sobre un SVG. Verás que aparece una información sobre herramientas encima del mouse que muestra el valor de contraste de color.

Ten en cuenta que el valor se mostrará en un color que coincida con la parte del SVG sobre la que está pasando el mouse, lo que te ayudará a asegurarte que estás obteniendo la lectura de contraste para la parte de la ilustración que deseas medir.

Simulación Daltónica

Colorblind SimulationColorblind SimulationColorblind Simulation

Al igual que la visualización del índice z, la simulación daltónica se activa a través de un complemento.

Otra vez, haz clic en la herramienta de búsqueda en la barra de herramientas VisBug y comienza a buscar "color". Verás una opción de autocompletar que dice "/simulate-colorblind". Haz clic en él para activar el complemento y veras un cuadro que aparece en la esquina superior derecha que enumera múltiples opciones de simulación daltónica. Selecciona cualquiera de esas opciones y veras que los colores de la página se transforman en una simulación para la forma especificada de daltonismo.

Soporte del Modo Oscuro

Dark Mode SupportDark Mode SupportDark Mode Support

Cuando tu sistema operativo está configurado para preferir el modo oscuro VisBug detectará esto y mostrará tus herramientas en modo oscuro, así, como aparece arriba.

Haz clic para anclar CSS y A11y Tooltips

Ahora es muy fácil anclar información sobre herramientas que muestra información sobre CSS y accesibilidad. Con cualquiera de las herramientas de "Info" o "Accesibilidad" activa, mientras te muevas por una página,las herramientas aparecerán cuando pases el mouse sobre varios elementos. Para anclar esa información sobre herramientas, simplemente haz clic en su lugar.

Esto se demuestra mejor en un GIF, como verás en este tweet del desarrollador de VisBug, Adam Argyle:

Si todavía no lo haz hecho, asegúrate de echarle un vistazo a VisBug. Es gratis, de código abierto y una herramienta muy útil en cualquier kit de un diseñador grafico.it.
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.