Logo Computerhoy.com

Extensiones de Google Chrome para el diseño y navegación web

Sarah Santiago

Extensiones de Google Chrome para el diseño y navegación web
Las extensiones de Google Chrome que te mostramos en este práctico, te ahorrarán tiempo a la hora de crear una página web. Con ella podrás calcular medidas de una imagen, contrastar colores, hacer capturas de pantalla y en definitiva, optimizar el diseño de una página web.

Instalación de Tape


Ventana Google Store

Busca e instala la extensión Tape. Luego pincha en el icono de acceso que parece una cruz encerrada en un cuadro de colores en la barra de direcciones. Pulsa Enter para activarla. De este manera, se mostrarán guías en color rojo (vertical y horizontal) que te ofrecen información sobre la posición de cada elementos cuando sitúas el curso sobre cada uno de ellos.

Obtén datos de elementos que componen una web


Imagen Tape ejecutado

En el margen inferior izquierdo, verás una ventana con las distintas funciones y atajos de teclado. Si por ejemplo, pulsas las teclas V y H a la vez, fijarás sobre la pantalla una guía vertical y otra horizontal. Para calcular ampliar la imagen y calcular la posición con exactitud te será útil la herramienta de zoom.

Instala Color Picker


Ventana Chrome Store

Instala la extensión Color Picker de Chrome. Cuando lo hagas pulsa en el icono de acceso y aparecerá una ventana donde se muestra información sobre cada área de color de la web en la que te encuentres y según deslizas el puntero del ratón.

Conoce los códigos de los colores que componen una web


[paragraph_media:818143;a0706db1-adc7-480f-a971-2b1ba84427f5]

Junto a estos datos y junto a la imagen, aparecerá un elemento flotante con una muestra del valor hexadecimal del color donde se encuentra el cursor. Pulsa la tecla Enter y se mostrará una pequeña ventana con la información de color que podrás copiar y utilizarla donde necesites.

Instala la extensión Screen Capture


[paragraph_media:818144;7509eb5a-20c7-41db-b3d9-8aeecd4c570b]

Busca e instalar la extensión Screen Capture en Google Chrome. Pulsa sobre el icono de acceso que parecen dos pantallas y se abrirá una ventana desde donde podrás seleccionar diferentes modos de hacer las capturas con sus correspondientes atajos de teclado.

Haz capturas de una web


[paragraph_media:818145;8b3d3082-9ab1-4a11-8807-0307d234a7e7]

Por ejemplo, podrías elegir la opción Capture Page Region para capturar un área de la página en la que te encuentres. Utiliza el ratón para seleccionar esa región. Pulsa OK y luego sobre Save.

Ajusta los atajos de teclado de Screen Capture


[paragraph_media:818146;8f1e1697-7bcb-4eed-bca0-e0456a966977]

Por último, puedes configurar algunas opciones de la extensión de Chrome. Pulsa otra vez sobre el icono de las dos pantallas y en Options se abrirá una ventana donde poder ajustar varios parámetros como, por ejemplo, los atajos de teclado.

Conoce cómo trabajamos en Computerhoy.