Extensiones Google Chrome para diseñadores web

Publicado por & archivado en CSS, Diseño Web, Maquetación.

navegador web google chrome

Por Google Chrome (Google Chrome)

Para mi es imposible trabajar sobre una página web sin utilizar la herramienta firebug (aunque tengo que decir que me funciona mucho mejor firebug para Firefox que para Chrome). Es por ello que al encontrar el artículo en inglés 20 extensiones útiles de Google Chrome para diseñadores web no he podido evitar compartir algunas herramientas con vosotros aquí. Si te interesa alguna de estas extensiones, lo único que debes hacer es abrir este artículo desde Chrome e instalar.

Nota: este artículo no es una traducción del artículo referenciado.

Extensiones de Color

Color Tweaker

captura web colour tweaker

Captura web extensión colour tweaker

Con esta herramienta podrás cambiar el color de elementos de tu diseño directamente en el navegador y previsualizar el resultado sin necesidad de programar nada.

colorPicker 0.9

caputra web colorpicker 0.9

Captura web extensión colorPicker 0.9

Esta herramienta te permite coger muestras de colores que se están utilizando en la página web actual que estás visualizando en Chrome y además te permite cambiar color de algunos elementos tal como hace la herramienta anterior. Podrás probar tus diseños sin necesidad de ir cambiando la hoja de estilos.

Palette for Chrome

captura web paleta para Chrome

Captura web extensión Palette for Chrome

Esta herramienta es muy interesante. A partir de una imagen, esta extensión te genera una paleta de colores. Muy útil si necesitas encontrar colores afines a la imagen o simplemente has encontrado una imagen que inspira tu diseño.

Tipografías

Google Front Previewer

captura web google font previewer

Captura web extensión google font previewer

Esta extensión te permite escoger de entre las distintas fuentes de Google, aplicar algunas opciones de estilos y ver qué tal quedaría en la página web que estés visualizando en Chrome en ese momento.

Font editor

caputra web font editor

Captura web extensión font editor

Con esta herramienta podrás cambiar la fuente (incluye Google Fonts), el tamaño, el “line-height” y muchas otras opciones de la página web que estás visualizando y ver como te quedará sin necesidad de tocar código HTML ni CSS. Cuando te convenza el resultado ya lo cambiarás.

Desarrollo web

Firebug Lite

captura web firebug

Captura web extensión firebug

Esta es una herramienta que actualmente recomendamos usar mejor en el navegador web Mozilla Firefox ya que funciona mejor (Firebug para Mozilla Firefox). Con esta herramienta podrás descubrir qué estilos están afectando a cada uno de los elementos de la página web que estés visualizado, podrás conocer dónde están esos estilos (en qué hoja CSS y línea, en el código HTML,…). Además podrás modificar, añadir estilos y código HTML para hacer las pruebas que necesites. Sin duda esta es una herramienta imprescindible para maquetar páginas web, y sino ésta, alguna similar.

CSS viewer

caputra web css viewer

Captura web extensión css viewer

Es muy similar a la extensión anterior, pero quizás te guste más el entorno. Para gusto, colores.

BuiltWith Technology Profiler

caputra web builtwith

Captura web extensión builtwith

Muy interesante esta extensión también. Con esta extensión podrás saber qué tecnologías está utilizando la página web que estás visualizando. Estas son las tecnologías que detecta a día de hoy: widgets (snap preview), análisis de tráfico web (Google Analytics, Nielsen), frameworks (.NET, Java), CMS blog (WordPress, Blogger), publicidad (DoubleClick, AdSense), CDNs (Amazon S3, Limelight), standards (XHTML, RSS), software de hosting (Apache, IIS, CentOS, Debian).

Window resizer

caputra web window resizer

Captura web extensión window resizer

Ahora que es tan importante tener tu sitio web preparado para ser visualizado desde todos los dispositivos esta herramienta es muy recomendable. Con ella podrás ver como queda la página web en diferentes entornos. A la hora de escribir este artículo habían tres tipos de pantalla disponible: ordenador de sobremesa (estándar), portátil o notebook y móvil.

HTML Validator

captura web html validator

Captura web extensión HTML validator

Si tu página web está validado por W3C, ésta tendrá muchas más posibilidades de que se visualice correctamente en diversos entornos (Mac, PC, smartphones, tablets, iOS, Android, iExplorer, Chrome,…). Por tanto, en la medida de lo posible, recomendamos que los sitios web estén validados. Es por ello que esta herramienta es muy útil ya que ahorras tiempo.

PHP Console

captura web consola php

Captura web extensión consola PHP

PHP es una tecnología web del lado del servidor, aún así, esta extensión de Google Chrome te permite visualizar los errores PHP y depurarlos en una consola o mediante ventanas emergentes en el mismo navegador.

Productividad

La verdad es que este grupo de extensiones que he encontrado en el artículo referenciado al principio parece bastante útil, sin embargo no sé muy bien cómo te puede ayudar a la hora de diseñar una web.

Popchrom

ptura web popchrom

Captura web extensión popchrom

Con esta extensión podrás crear atajos de teclado que al pulsarlos te copiaran frases en los formularios web. Por ejemplo, si pulsas “sy” que se pegue el texto “Sincerely yours”. La gran ventaja de esto es que puedes poner variables como fechas y otras variables.

Ananke Timer

captura ananke timer

Captura web extensión ananke timer

Con esta extensión podrás añadir temporizadores de tareas integrados en Google Chrome.

Chrome Toolbox

captura web chrome toolbox por google

Captura web extensión chrome toolbox por google

Esta extensión de acceso rápido te permite poner tus comandos favoritos en un menú desplegable, guardar datos de formularios no enviados, hacer más grandes imágenes que encuentres en tu sitio web incluso ponerlas de fondo de escritorio, arrastrar archivos de vídeos y Flash fuera del entorno del navegador,…

AppJump App Launcher and Organizer

captura web appjump

Captura web extensión appJump

Con esta extensión podrás lanzar rápidamente aplicaciones que tengas en  la barra de herramientas de tu navegador. También te permite organizar aplicaciones y extensiones en grupos y gestionarlos fácilmente.

Bookmark bar switcher

captura bookmark bar switcher

Captura web extensión bookmark bar switcher

Permite cambiar entre múltiples barras de marcadores. En el momento de escribir este artículo tengo que decir que hay un mensaje de advertencia conforme esta extensión no está funcionando bien al 100%.

Recursos

Google Similar Pages beta

captura web webs similares google

Captura web extensión webs similares Google

Esta extensión ha sido desarrollada por Google y es una extensión que te muestra páginas web similares a las que estás visualizando en ese momento. Si por ejemplo, estás visualizando una página web que te interesa mucho, esta herramienta te mostrará páginas web que hablen sobre el mismo tema y que probablemente te pueda interesar.

Awesome Screenshot

captura web awesome screenshot

Captura web extensión awesome screenshot

Con esta extensión podrás capturar toda la página web o solamente una parte. Lo bueno de ello es que además puedes hacer anotaciones, círculos, flechas,… y además soporta el scroll horizontal.

myNotes

caputra web mynotes

Captura web extensión mynotes

Esta herramienta crea notas automáticamente cuando seleccionas un texto y la añade en tus marcadores.

Microstock Photo Power Search

captura web microstock photo power serch

Captura web extensión microstock photo power serch

Esta herramienta es un buscador que busca imágenes que puedan quedar bien en tu página web en distintas plataformas (fotalia, dreamstime, pixmac,…), de esta manera puedes ahorrar tiempo.

En este punto, queremos recordar un artículo anterior que publicamos en este blog donde comentábamos que existen buscadores que te permiten encontrar imágenes con distintas licencias creatve commons.

Deja un comentario

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

Utilizamos cookies de terceros para recoger información sobre sus visitas y su uso de nuestra web. En caso de continuar navegando por esta web entenderemos que acepta el uso de estos dispositivos. Más información: Política de Cookies .

ACEPTAR
Aviso de cookies
Artimedia