Desarrollo web, SEO, Redes Sociales.

Teléfono y WhatsApp: 644 266 299

Las mejores extensiones chrome para diseñadores web

Mejores extensiones chrome para diseñadores web

Una de las cosas más interesantes para todo diseñador web o empresa de desarrollo web de los actuales navegadores como Mozilla Firefox o Google Chrome es la posibilidad de añadir ciertos complementos, conocidos como extensiones, con el que se puede personalizar para adaptarlo al trabajo que se realice.

Para profesionales del desarrollo web, el navegador es una herramienta fundamental en la fase final del proyecto, ya que un paso inevitable es comprobar que funciona correctamente y que, en relación al diseño, se cumple con lo planteado. Los desarrolladores web se apoyan en determinadas extensiones cuyo uso está cada vez más extendido debido a las funcionalidades que les aportan, facilitando su trabajo.

Actualmente, casi todos los navegadores de hoy en día llevan incorporadas algunas herramientas que permiten realizar completos análisis de distintas características, hacer una monitorización de eventos durante la navegación en una página web y la detección de posibles errores con una alta precisión para solucionarlos de manera eficaz. Pero la existencia de las extensiones, amplía la variedad de funciones de las herramientas propias de cada navegador y, muchas veces, agrega otras con las que ni siquiera contaban.

A decir verdad, cada profesional tendrá preferencia por un navegador en particular. En este artículo se van a tratar las extensiones de Google Chrome, por su enorme rendimiento y su uso más eficiente de la memoria en comparación con otros navegadores famosos.

En este artículo se va a hacer un repaso de las extensiones de Google Chrome más útiles para cualquier persona que se dedique en mayor o menor medida al desarrollo web.

Las mejores extensiones Chrome para diseñadores web

Extensión chrome instant wireframe1. Instant Wireframe

Esta extensión de Chrome te permite ver los wireframes de cualquier web. Es algo muy útil a la hora de arrancar un proyecto web porque observar la estructura de algunas puede dar bastantes ideas para saber dónde colocar los elementos, así como el resultado en el diseño final. Lo mejor es la sencillez de su uso.

Extensión chrome perfect pixel2. Perfect Pixel

Esta herramienta es especialmente útil en las últimas fases del proyecto porque permite comparar el diseño de una web con el resultado, haciendo una superposición del diseño con el resultado en el propio navegador. Es la mejor manera de comprobar que todo está en el sitio en el que se pensó en la fase de diseño. De eso también se encarga la extensión Ruul.

Extensión chrome stylebot3. Stylebot

Esta extensión permite la manipulación del aspecto de cualquier web, tanto con funciones de la misma extensión como con código propio. Esto permite la instalación de estilos personales y poder compartirlos con otros desarrolladores web, mediante Stylebot Social, versión social de la extensión.

Extensión chrome Full page screen capture4. Full Page Screen Capture

Con esta herramienta se puede capturar una página web al completo, no solo la fracción que se muestra en la ventana del explorador.

Extensión chrome Colorpick Eyedropper5. ColorPick Eyedropper

Este complemento de Chrome sirve para obtener los colores de cualquier elemento que se muestre en la ventana del navegador. Con una herramienta de funcionamiento similar al cuentagotas de los principales softwares de diseño como Photoshop, con un clic en la zona de la que se quiera inspeccionar el color, devolverá el color en los sistemas hexadecimal, RGB o HSL. Otra extensión muy similar es Colorzilla, con la que, además, se puede conocer el código CSS para hacer degradados.

6. Drag Design

Una llamativa extensión para Chrome que permite modificar el diseño de una página web con solo mover los elementos del sitio web. Es interesante para alterar el diseño cualquier web en tiempo real para ver cómo queda.

7. CSS Remove and combine

Una herramienta para analizar los estilos de cualquier web, modificar o eliminar elementos y crear un CSS propio que se puede descargar para utilizar en algún proyecto y ahorrar tiempo en la fase de diseño.

8. Color Contrast Analyzer

Extensión realmente útil para los diseñadores web que necesiten analizar si el contraste de colores utilizado sigue las pautas establecidas por el WCAG 2.0 y sirve también para comprobar si la web esta accesible a las personas que sufran de alguna discapacidad visual.

9. Designer Tools

Es una completísima extensión de Google Chrome que posee un cúmulo de herramientas orientadas al desarrollo web como medir píxeles o inspeccionar la paleta de colores de distintas páginas web.

10. What Font

Una herramienta con un objetivo muy claro: identificar las fuentes utilizadas en cualquier sitio web.

11. Web Developer

Para quienes estén más familiarizados con Firefox, esta extensión añade a Chrome un conjunto de herramientas basadas en la extensión de Firefox para desarrolladores. Es sin duda una de las extensiones más útiles de Chrome.

12. Web Developer checklist

Con esta extensión se puede comprobar si una página web está diseñada siguiendo buenas prácticas en lo relativo al posicionamiento SEO, accesibilidad, usabilidad y rendimiento, notificando cualquier error detectado.

13. Responsive Web Design Tester

Con esta extensión de Chrome se puede verificar si una web está correctamente adaptada a todos los tamaños de pantalla y dispositivos existentes en el mercado. Otras extensiones pueden ser Resolution Test o Browser Resize.

14. Validity

Extensión mediante la cual se puede validar una página web. Además, cuenta con la opción de instalar el servicio de validación del W3C.

15. Appspector

Muy útil para buscar librerías de Java Script de cualquier página web y comprobar si funciona correctamente. Otra herramienta con una función similar es JavaScript Errors Notifier.

16. iMacros para Chrome

Esta extensión te permitirá guardar y grabar las distintas acciones, para así no tener que repetirlas en cada prueba de cada página y, con ello, ahorrar algo tiempo para ocuparlo en otros aspectos que necesiten más atención.

17. Font Playground

Font Playground te posibilita probar con las fuentes de Google en una determinada web, pero sin hacer modificaciones en la web. Contiene, de cada fuente, estilos y efectos necesarios para hacer una previsualización de cómo quedaría en una web antes de implementar.

18. Yslow

Esta extensión sirve para analizar la velocidad de carga de una página web y seleccionar aquellos elementos que están bloqueando la página web. Además, sugiere cómo optimizarla su desarrollo. De esto también se encarga otra extensión, Speed Tracer.

19. DevTools Autosave

Una herramienta fundamental que tienen que tener en cuenta los desarrolladores web ya que acceden a guardar, en el archivo original, mecánicamente todos los cambios que se realicen en los estilos o en el javascript a través de las herramientas de entorno Chrome Dev. Sus ventajas son que es muy sencillo de utilizar y de configurar, lo que produce un ahorro importante de tiempo.

20. Joomla Version Check

Esta herramienta es capaz de mostrar la versión del CMS Joomla que utiliza la página web que se esté visitando siempre y cuando dicha web esté basada en este CMS. Aunque parezca que no es una extensión de mucha utilidad, conocer la versión del CMS es vital para comprobar si ha quedado obsoleto o si presenta algún tipo de vulnerabilidad. Es recomendable ocultar la versión del CMS a todos los usuarios que accedan a la página web para evitar posibles problemas.

21. Ripple Emulator

Se trata de un emulador multiplataforma con el que se puede chequear una aplicación web a diferentes resoluciones de pantalla y dispositivos. Ofrece la posibilidad de ser utilizado junto con distintas herramientas de desarrollo con las que hacer depuraciones, inspeccionar DOM y automatizar pruebas.

22. Streak

Se trata de la mejor extensión para gestionar los mensajes electrónicos de CRM y como apoyo dentro de Gmail. Permite modificar un mensaje electrónico o diálogo en un ticket rastreable, organizado, que puede administrarse o compartirse con otras personas.

23. Search Stackoverflow

Todo desarrollador web que se precie ha escuchado mencionar el Stack Overflow, el lugar donde hay que acudir para hallar una solución ante cualquier incidencia en relación al desarrollo. Con esta extensión se incluye un cuadro de búsqueda directamente en el explorador.

24. PHP Ninja Manual

Recordar funciones específicas de PHP es una tarea bastante complicada por lo que es inevitable pasar horas buscándolas en Google. Esta extensión llegó para resolver ese problema, el PHP Ninja Manual contiene toda la información de PHP 5.5 acompañada de ejemplos sin la necesidad de salir del explorador. Está disponible en ocho idiomas.

25. User Agent Switcher

Otra excelente aplicación para comprobar cómo se muestra una página web en distintos dispositivos como Android, iOS o Windows.

26. IE tab

Esta extensión está considerada como un emulador de Internet Explorer más útiles existentes. Muy interesante para que cualquier desarrollador web pruebe su web en dispares interpretaciones de Internet Explorer sin salir de Google Chrome para así evitar problemas de compatibilidad.

27. PicMonkey

PicMonkey es un portal muy popular la red por la facilidad con la que se pueden crear vistosas composiciones para colocar en una web o simplemente para editar fotografías. Su extensión permite capturar imágenes o la pantalla con solo clic. Dicha captura puede editarse completamente aplicándole la gran cantidad de efectos con la que cuenta la plataforma

28. Chrome Daltonize

Sin duda, el daltonismo tiene efectos en muchos individuos a nivel internacional, por lo que ayudarles para que puedan moverse correctamente por una página web es muy importante. Esta herramienta acepta la elaboración de imágenes que se adapten mejor a las personas con enfermedades en la vista.

30. Page Ruler

Esta extensión puede parecer sencilla, pero resulta tremendamente útil porque con ella se puede dibujar un sector de cualquier página web y mostrará sus dimensiones y la posición que ocupa.

31. Check My Links

Con esta extensión se comprueban los enlaces de una página web. La herramienta colocará los que funcionen en color verde y en rojo los rotos. Muy útil, aunque se trate una página web sencilla.

32. Flickr Tab

Esta herramienta muestra una imagen deFickr donde repentinamente aparece un recuadro vacío. Se puede pinchar en la fotografía para verla en la web de Flickr, o en el apelativo del usuario para observar algunas imágenes del mismo. Existe la posibilidad de ponerse en contacto con el fotógrafo para comprar sus fotografías que se pueden colocar en la web que se esté diseñando.

33. Google Art Project

Muy similar a la anterior, porque en cada nueva pestaña se abrirá una obra de arte proporcionada por el Google Art Project.

34. Data Saver

Es muy útil para ahorrar datos al navegar desde un dispositivo portátil ya que en el momento en el que se activa Chrome utilizará los servidores de Google para comprimir páginas previamente a su descarga. Pero el inconveniente es que con SSL y ventanas de incógnito no se puede utilizar.

35. Lorem Ipsum Generator

Esta minimalista extensión simplemente llenará las maquetas de diseño con texto de relleno para presentaciones o páginas de muestra.

36. SEO Site Tools

Esta extensión de Chrome proporciona una gran cantidad de herramientas y funciones útiles para evaluar el posicionamiento SEO de una determinada página web. Un buen posicionamiento es vital para el futuro de una web, así que esta herramienta se convertirá en una imprescindible para dicha tarea.

37. PHP Code Editor

Muy buena extensión para la creación y edición de código PHP. Este potente editor está integrado en la interfaz del navegador y entre sus funcionalidades están la validación y de código, resaltar palabras reservadas del lenguaje y soporte para múltiples documentos a través de pestañas.

38. Pendule

De forma parecida a Web Developer, pero con la diferencia de que permite la creación de atajos de teclado para las funciones principales y modificar las fuentes con las que validar el código de las páginas web y todo consumiendo mucha menos memoria.

Y hasta aquí este completo recopilatorio de las extensiones más útiles de Google Chrome para diseñadores web.

Como se puede observar, cada año aumenta el número de estas poderosas herramientas que facilitan mucho el trabajo de los profesionales del sector del desarrollo web. De hecho, se está convirtiendo en la opción principal de entre los navegadores actuales en diversos campos, no solo en el desarrollo web.

Se nota que Google apuesta fuerte por las extensiones pues ha convertido a Chrome Web Store en la única fuente oficial de extensiones. Además, se espera que el gigante tecnológico siga ofreciendo más y más herramientas especializadas para su navegador con el que llegar a trabajar de la manera más eficiente posible.

Valoración: 
Promedio: 4 (4 votos)

Contenido Relacionado

Desarrollo web

  • Dominio (.com,.net, .es ...).
  • Hospedaje Web (hosting).
  • Webs autogestionables.
  • Webs escalables.
  • Diseños para móviles y tabletas (Responsive).
  • Intranets y Extranets.
  • Tiendas Online.
  • De PSD a Drupal.

Presencia en Internet

  • Comunity Manager.
  • SEO.
  • SEM.
  • Posicionamiento en Google.
  • Redes sociales.
  • Listas de Correos (Newsletters).
  • Web Temáticas.
  • Creacción de folletos, trípticos, dípticos, flyers...