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.

Dificultad:
media
Tiempo:
30 minutos

1: Instalación de Tape

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.

Ventana Google Store

2: Obtén datos de elementos que componen una web

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.

Imagen Tape ejecutado

3: Instala Color Picker

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.

Ventana Chrome Store

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

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.

Imagen Color Picker Ejecucion

5: Instala la extensión Screen Capture

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.

Ventana Chrome Store instalar Screen Capture

6: Haz capturas de una web

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.

Web para Capture Page REgion

7: Ajusta los atajos de teclado de Screen Capture

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.

Ventana opciones Screen Capture