Las 20 más útiles extensiones de Chrome para diseñadores web

Las 20 más útiles extensiones de Chrome para diseñadores web

Chrome se ha convertido en poco tiempo en uno de los navegadores favoritos por los usuarios, teniendo en cuenta de que fue lanzado a finales del 2008, su crecimiento ha sido impresionante poniéndose detrás del líder Firefox.

 

La versatilidad de funciones que ofrece al usuario, es quizás la razón más importante por la que muchos diseñadores y desarrolladores están empezando a usar con más frecuencia a Chrome como su navegador preferido, aunque Firefox mantiene su liderazgo y sigue siendo la primera opción para el diseño y desarrollo web, Chrome no se amilana y le viene pisando muy de cerca los talones. La versatilidad de Chrome en cuanto a funciones y extensiones, cuya misión es facilitar la experiencia y navegación del usuario, y además mejorar y agilizar nuestro trabajo como diseñadores web.

 

Veamos a continuación las 20 más útiles extensiones de Chrome para diseñadores web, que debes considerar tener si usas Chrome como tu navegador.

 

Firebug Lite

Esta útil extensión permite inspeccionar el código de las páginas y poder editar en tiempo real para ver cómo quedan los cambios que vayas haciendo, puedes agregar, quitar o depurar código HML, CSS y JavaScript.

 

Esta extensión se ha convertido en una herramienta imprescindible de diseñadores y desarrolladores web.

 

Enlace

 

Instant Wireframe

Esta importante extensión de Chrome, ayuda a visualizar la estructura de cualquier sitio web y entender la posición de los diversos elementos y wireframes que tiene ese sitio web.

Esta herramienta te puede ser de mucha utilidad para cuando busques inspiración, cuando necesites ver cómo se estructuran los elementos de algún sitio web y tenerlos en cuenta para armar tu propio diseño.

 

Enlace

 

Stylish

Una herramienta que hace muy entretenido el diseño, pues te permite rediseñar cualquier sitio web, sacar contenido irrelevante, cambiar colores, o rediseñar completamente todo el sitio web.

 

Con esta extensión puedes administrar fácilmente los estilos, añadir, eliminar, activar, desactivar y organizar con unos pocos clics. Por si fuera poco, admeás cuenta con miles de estilos realizados por otros usuarios.

 

Enlace

 

CSS Reloader

Esta herramienta me parece muy útil cuando se trata de sitios web muy pesados y que demoran en cargar, con esta extensión puedes volver a cargar los CSS de la página sin la necesidad de recargar el sitio web.

 

Enlace

 

Perfect Pixel

Si eres de las personas que primero maquetan su diseño como una imagen, entonces esta herramienta te será de utilidad. Este complemento superpone tu diseño con una semi-transparencia sobre tu diseño web en el navegador. De esta forma puedes comparar que tan parecido quedó tu diseño final en el navegador.

 

Enlace

 

Stylebot

Otra buena herramienta con la que puedes experimentar con el CSS en tiempo real. Puedes manipular la apariencia de cualquier web, escribir tu propio código, pre visualizar los cambios y compartirlos a través de la extensión hermana Stylebot Social con otros diseñadores.

 

Enlace

 

Speed Tracer (by Google)

Herramienta para ayudar a identificar y corregir problemas de rendimiento en tus aplicaciones web. La interfaz de usuario es un panel de control fácil de usar y lleno de información y gráficos que te ayudarán a optimizar tus aplicaciones.

 

Enlace

 

Colorzilla

Esta extensión viene muy bien para crear la paleta de color de una web a partir de un solo color de la misma así como si quieres hacer degradados pues te genera el código CSS del mismo de manera instantánea. Si necesitas saber el valor hexadecimal exacto de una web en concreto esta aplicación te lo resuelve al instante.

 

Enlace

 

Lorem Ipsum Generator

Sencillo generador integrado en tu navegador, muy útil para cuando la creación de maquetas usando el famoso texto de relleno.

 

Enlace

 

Window Resizer

Cambia el tamaño de la ventana del navegador con el fin de emular varias resoluciones. Te permite evaluar rápidamente tus diseños en diferentes tamaños al menos los más populares.

 

Enlace

 

Google Font Previewer for Chrome

Esta extensión te permite aplicar rápidamente los tipos de letras de Google para selectores CSS específicos y así obtener una vista previa rápida de lo que cómo se verá tu diseño antes de la actualizar los archivos.

 

Enlace

 

Responsive Web Design Tester

Con esta extensión de Chrome podrás comprobar si tu página web está bien adaptada a los diferentes tamaños de pantalla y dispositivos.

 

Enlace

 

Ruul

Una fantástica y sencilla regla en la pantalla para alinear y medir cualquier elemento de una página web. Perfecto para el análisis de los diseños existentes.

 

Enlace

 

Check My Links

Herramienta para comprobar todos los enlaces de una página web, indicando cuáles son válidos y cuáles no, eso ayuda a identificar las cosas que hay que arreglar. Una manera de analizar errores tontos que podemos cometer en nuestros enlaces para asegurarte de que todo está bien.

 

Enlace

 

The Grids

Te ayuda a crear una superposición de una cuadrícula a medida para cualquier página. Tiene bastantes opciones y es muy útil en la creación de píxel perfecto y diseños basados en la cuadrícula.

 

Enlace

 

Validity

Cuando estés en la web que quieras validar presiona Alt+Shift+V a la vez que haces click en el icono de la extensión situado en la barra del navegador. Además te da la opción de instalar el servicio de validación del W3C.

 

Enlace

 

WhatFont

Una impresionante herramienta que puedes encontrar en varios navegadores. Es rápido, fácil, super atractiva y te dice no sólo el nombre del tipo de letra, también la altura y el tamaño de las línea, etc.

 

Enlace

 

SEO & Website Analysis

Te proporciona un profundo análisis de SEO que cubre más de 50 criterios de usabilidad y SEO.

 

Enlace

 

Browser Compatibility Detector

Esta herramienta puede ayudarle a identificar rápidamente posibles áreas problemáticas en el código, en la compatibilidad entre navegadores.

 

Enlace

 

HTML Instant

Una agradable y simple editor de doble panel que te permite introducir HTML, CSS o JavaScript a la derecha y al instante ver una vista previa en vivo en la parte izquierda.

 

Enlace

 

Artículos que también te interesarán

Colorful Tiles UI Kit, completo interfaz de usuario para tus proyectos web
Colorful Tiles UI Kit, completo interfaz de usuario para tus proyectos web

Colorful Tiles, es un bonito y completo interfaz de usuario, muy llamativo, colorido y vibrante que puedes utilizar libremente para crear tu próximo proyecto web o incluso para aplicaciones móviles.   Este buen kit incluye más de 30 elementos de diversas categorías, como por ejemplo, comercio electrónico, blogs, multimedia, radio y video, menús, perfiles, gráficos […]

Boxify, plantilla web One Page responsiva y gratuita
Boxify, plantilla web One Page responsiva y gratuita

Una plantilla web responsiva y gratuita muy moderna, con una aspecto muy pulcro y con animaciones suaves, cuidadosamente elaborado con las últimas tecnologías web como Bootstrap, Flickity, fancyBox, jQuery Waypoints, Animate.css.   Esta plantilla gratuita es ideal para cualquier tipo de sitio web en general, puedes usarlo para muchos proyectos, sin embargo según sus características  y su diseño, es idonea […]

20 sitios web de Fitness y Gimnasios para la inspiración
20 sitios web de Fitness y Gimnasios para la inspiración

Las nuevas tendencias de diseño marcan la pauta de como un sitio web puede destacar de sus similares, muchas empresas buscan tener el mejor diseño y la mejor manera para diseñar un sitio web moderno y que destaque es armándose de las herramientas necesarias, del conocimiento y también de mucha inspiración, por eso aquí he […]

7-puntos-importantes-que-debes-tener-en-cuenta-a-la-hora-de-hacer-tu-web-responsive
7 puntos importantes que debes tener en cuenta a la hora de hacer tu web responsive

Hace poco Google Anuncio la modificación de su algoritmo de ranking para incluir dentro la opción de beneficiar a los sitios web optimizados a dispositivos móviles, es decir todos aquellos sitios web que se adaptan correctamente a cualquier dispositivo móvil tendrán la posibilidad de destacar en las búsquedas de Google frente aquellos sitios web que […]

Un comentario en “7 puntos importantes que debes tener en cuenta a la hora de hacer tu web responsive

  1. Daniel

    Muchas gracias.!!!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> 

Close