Preferencias de privacidad

Gestión de consentimientos

Cookies utilizadasObligatorias

He leído y acepto la Política de privacidad.

Obligatorias

Estas cookies son necesarias para el funcionamiento del sitio web y no pueden ser desactivadas en nuestros sistemas. En general, sólo se establecen en respuesta a acciones realizadas por usted que equivalen a una solicitud de servicios, como establecer sus preferencias de privacidad, iniciar sesión o rellenar formularios.

Cookies utilizadas Obligatorias

PHPSESSID, Cadabullos_Diseño_WebonlineCookieAnalitycs, Cadabullos_Diseño_WebonlineCookie, id_usuario_tienda, marca_ti

Analíticas

Acepto

Estas cookies nos permiten medir el número de visitas y conocer las fuentes de tráfico. Nos ayudan a saber qué páginas son las más y las menos populares y a conocer cómo se mueven los visitantes por el sitio. Toda la información que estas cookies recolectan es agregada y por lo tanto anónima. Si no autoriza estas cookies, no sabremos cuándo ha visitado nuestro sitio.

Cookies utilizadas

Cómo anular consentimiento
_ga,_gid,_gat,

google.com

_ga,_gid,_gat,
Utilizamos cookies propias y de terceros para mejorar su experiencia y nuestros servicios, analizando la navegación en nuestro sitio web. Puedes obtener más información, o bien conocer cómo cambiar la configuración, en nuestra Política de Cookies
Puedes aceptar todas las cookies pulsando el botón aceptar, configurarlas o rechazar su uso
Opciones

Ir arriba

Ícono menú móvil
Atención al cliente
988 009 665

Las 10 Mejores Extensiones de Google Chrome que deberías instalar si te dedicas al diseño web.

Las 10 Mejores Extensiones de Google Chrome que deberías instalar si te dedicas al diseño web.
19/05/2022
Admin

Seguimos con la misma temática del blog de estas semanas con otro listado de herramientas de diseño web que cualquier persona que se dedique a este mundo debe tener en cuenta.

Hoy le toca el turno a las extensiones de Google Chrome, pequeños programitas que se instalan en el navegador y realizan diferentes tareas para facilitarnos la vida y optimizar nuestro tiempo de trabajo.

Para instalar cualquier extensión de este listado, sólo tienes que acceder a la URL que os indicamos en cada una de ellas desde Chrome y hacer clic en el botón añadir.

En este caso, vamos a centrarnos en las extensiones de Google Chrome que cualquier diseñador web debería tener instalado en su navegador.

CSS Peeper

CSS Peeper Extensión Chrome

Si estas cansado de mirar a un lado y a otro del inspector de código de tu navegador para comprobar las características CSS de un elemento de una página web, con CSS Peeper estarás encantado.

Sólo tendrás que activar la extensión, seleccionar el elemento que quieres inspeccionar y en una ventana emergente podrás ver todas sus propiedades CSS.

A parte de las propiedades CSS, también te indica el tamaño de las imágenes y te de la posibilidad de bajártela desde un botón de la ventana.

Seguro que la encuentras muy útil, dada la comodidad que te ofrece al mostrarte las propiedades CSS de un elemento de manera más visual.

Instalar CSS Peeper

Eye Dropper

Eye dropped Extensión Chrome

Si lo que quieres es conseguir rápidamente los códigos de un color que acabas de ver en una página web, con Eye Dropper lo tienes muy fácil.

Haz clic en el icono de extensiones en Chrome, selecciona la extensión, presiona el botón "Pick color from web page" y luego en el color deseado.

La extensión almacenará una paleta de colores con los colores seleccionados por si quieres utilizarlos en otro momento.

Instalar Eye Dropper

FireShot - Captura de página completa

FireShot Extensión de Chrome

Una de las extensiones más completa a la hora de hacer capturas de pantalla de un sitio web es FireShot, la tengo instalada desde hace tiempo para este tarea, cuando navego en Chrome.

En Mozilla Firefox esta utilidad ya viene por defecto en el navegador.

Puedes realizar diferentes tipos de capturas de pantalla:

  • Captura de página entera.
  • Captura del área seleccionada.
  • Captura del área visible.

Una vez hecha la captura, puedes guardar ésta como imagen, como PDF o copiarla al portapapeles.

Instalar FireShot

Image Downloader

Image Downloader Extensión de Chrome

Una extensión de Chrome interesantísima es Image Downloader. Esta extensión te permite descargarte todas las imágenes de una página web.

Tiene varias opciones de configuración para el filtrado de imágenes:

  • Ancho mínimo o máximo
  • Alto mínimo o máximo
  • Imágenes que incluyan un enlace.

Puedes seleccionar todas la imágenes de la página web o sólo las que te interesen.

Instalar Image Downloader

WhatFont

WhatFont Extensión de Chrome

Genial extensión para Chrome con la que puedes obtener toda la información de una fuente determinada en un sitio web.

Activas la extensión y según vas pasando el ratón por encima del texto, te va indicando el nombre de la fuente.

Si lo que deseas es más información, hace clic y te muestra más detalles:

  • Nombre de la fuente.
  • Nombre de la familia.
  • El estilo.
  • El ancho de la fuente.
  • El tamaño en pixel.
  • El alto de línea
  • Color del texto con su código hexadecimal..

Seguro que encuentras esta extensión muy útil en tus tareas de diseño web.

Instalar WhatFont

Clear Cache

Clear Cache Extensión de Chrome

Si no quieres quebraderos de cabeza a la hora de visualizar cambios en tus diseños web cuando modificas hojas de estilo o cuando renuevas imágenes pero les dejas el mismo nombre, la extensión de Chrome Clear Cache te permite borrar fácilmente la caché de tu ordenador.

La extensión, también te permite borrar otros datos por si  no quieres que queden almacenados en el navegador como contraseñas, historial, cookies, formularios, etc..

También puedes configurar el periodo de tiempo desde el cual quieres que se borren los datos así como una combinación de teclas para ejecutarlo rápidamente.

Instalar Clear Cache

Unstack

Unstack Extensión de Chrome

Con la extensión Unstack de Chrome, podrás generar una guía de estilos de un sitio web con un sólo clic.

Entras en la página web que desees, activas la extensión y enseguida podrás ver un resumen bastante completo de los estilos utilizados en ese sitio:

  • Colores utilizados en los fondos.
  • Colores de los textos.
  • Cabeceras: fuente utilizada, tamaño, ancho, alto de línea, estilo y color.
  • Body: fuente utilizada, tamaño, ancho, estilo y color.

Esta herramienta es bastante útil, ya que nos agiliza el trabajo de buscar toda esta información en el inspector de código.

Unstack Style Guide

Window Resizer

Window Resizer Extensión de Chrome

Si lo que quieres es una extensión de Chrome para cambiar la resolución del navegador rápidamente, Window Resizer va a facilitarte mucho la vida.

Instala la extensión, accede a complementos y elige la resolución del navegador que desees, enseguida Chrome cambia de tamaño y se ajusta a las medidas especificadas.

Puede serte útil para mirar como quedan tus diseños en los diferentes dispositivos, aunque yo para esta tarea prefiero utilizar el inspector del navegador, tanto de Chrome como de Mozilla. En realidad, el que suelo usar, es el de Mozilla que permite cerrar el inspector sin que el marco dedicado a visualizar el diseño se maximice.

Instalar Window Resizer

Night Eye - Modo oscuro

Night Eye - Modo oscuro Extensión de Chrome

Extensión que te permite activar el modo oscuro en cualquier página web. 

La utilidad de este plugin puede ser variada, tanto para ver posibles alternativas al diseño de un sitio web, como para lecturas prolongadas de artículos en la misma página. El modo oscuro suele castigar menos la vista del usuario.

Instalar Night Eye

SiteSee | Web Design Inspiration

Night Eye - Modo oscuro Extensión de Chrome

Con esta extensión al abrir una pestaña nueva en el navegador, te mostrara un listado de sitios web que puedes usar para conseguir inspiración de cara a futuros trabajos.

A pesar de que es una extensión marcada para mejorar la productividad, yo al contrario recomiendo activarla sólo cuando necesites inspiración, sino puedes pasarte el día de sitio en sitio web.

Puedes encontrar otras extensiones similares, pero en lugar de mostrarte sitios web, te muestran otro tipo de recursos como paletas de colores, ilustraciones, iconos.

Instalar SiteSee

Infografía con las mejores extensiones para Google Chrome

Si te ha gustado el post, comparte en tus redes sociales la infografía que os dejamos a continuación. ¡Estaremos muy agradecidos! 

Infografía con las mejores extensiones para Google Chrome

Y hasta aquí hemos llegado en el día de hoy, probablemente vayamos añadiendo al listado más extensiones de Chrome que nos vayamos encontrando por el camino, ¡no dejes de pasarte!

¿Qué te ha parecido la recopilación? ¿Tienes alguna duda al respecto?

¿Conoces alguna otra extensión que debamos añadir al listado? Indícanoslo en los comentarios del post.

Valoraciones
[Votos: 21 Promedio: 5]
Compartir

Post Relacionados

Comentarios

icono persona comentarios
Ana
24/05/2022 11:05 horas
#1

Genial post

Admin
Admin
26/05/2022 01:05 horas

bienvenida de nuevo Ana!! Gracias