Plugins para Desarrolladores Web

Después de algunos años dedicado al desarrollo de aplicaciones, he podido observar la evolución tanto en algunos lenguajes de programación como en algunas herramientas necesarias para su desarrollo, ejecución y testeo. En concreto, mis últimos años los he pasado desarrollando aplicaciones web, por lo que he podido apreciar un mayor cambio en un ámbito que ha sufrido un auge brutal desde hace algún tiempo.

Muchos desarrolladores estarán de acuerdo conmigo en que la programación actual no tiene nada que ver con la empleada hace algunos años. Hoy en día tenemos una gran cantidad de herramientas que posibilitan hacer mejor nuestro trabajo y nos permiten ahorrar mucho tiempo. Tenemos una gran variedad de utilidades tales como plugins, frameworks, editores, etc.

En éste post voy a centrarme en una de las herramientas más destacadas a mi parecer, los plugins, ya que considero que su desarrollo ha contribuido en gran medida a mejorar la experiencia del usuario, que a día de hoy se ha vuelto crucial en una aplicación web debido a la gran cantidad de dispositivos que disponen de conexión a internet.

¿Qué es un plugin?

Un plugin es un módulo o complemento de hardware o software que se integra en un sistema mayor para agregarle una característica o función específica.

Los navegadores Google Chrome y Mozilla Firefox han sido desarrollados con la capacidad de poder integrar plugins. De esta manera su funcionalidad estándar puede ser extendida por la comunidad de desarrolladores. Por ejemplo, el módulo de Adobe Flash Player añade la capacidad al navegador de poder cargar animaciones multimedia y visualizar vídeos.

Debido a la gran cantidad y calidad de los plugins, tanto Chrome como Firefox, se han convertido en los navegadores por excelencia para la depuración de las aplicaciones web.

A continuación, voy a detallar brevemente algunos complementos que considero cruciales para nuestro trabajo y que me han facilitado muchas tareas ahorrándome mucho tiempo.

Plugins para Mozilla Firefox

Firebug: Es la mejor extensión creada para programadores y diseñadores web. Nos ofrece una serie de herramientas para visualizar el código fuente de la web, editar el código HTML y las hojas de estilo, ver errores del DOM, monitorizar tiempos de carga y peticiones de red, depurar el código javascript, gestionar cookies, etc.

ColorZilla: Excelente complemento para obtener el código (en hexadecimal y RGB) de cualquier elemento de la web, incluidos fotos, vídeos, iconos, etc. Tiene otras opciones como selector de color, crear paletas de colores y generador de gradientes, entre otros.

WappaLyzer: Este plugin nos permite descubrir la tecnología que hay detrás de una web. Con él podemos obtener información como el servidor web, lenguaje de programación, frameworks que utiliza, widgets, gestor de contenidos, base de datos, etc.

Yslow: Este complemento analiza la página web para ofrecer formas de mejorar el rendimiento. El análisis se basa en 34 reglas de optimización de contenido, servidor, javascript y css, cookies, imágenes y móviles. Ofrece un resumen de los componentes de la página, estadísticas y sugerencias de mejora.

Plugins para Google Chrome

Postman:  Cliente muy útil para gestionar peticiones a servicios con arquitectura REST (GET, PUT, POST, DELETE). Es muy intuitiva de utilizar y captura respuestas en JSON, XML o texto plano.

Clear Cache: Plugin que elimina varios elementos de navegación inmediatamente. Su configuración permite elegir los datos a eliminar. Entre las opciones tenemos: cache, cookies, descargas, historial, datos de formulario, almacenamiento local, contraseñas, etc.

Angular Batrang: Excelente extensión para debugear aplicaciones desarrolladas con el framework AngularJS, tan de moda hoy en día.

Drag Design: Un plugin muy interesante cuando no tenemos muy claro el diseño de nuestra web. Con esta extensión podemos arrastrar cualquier elemento de la web para visualizar el resultado sin tener que tocar el código fuente.

JavaScript Errors Notifier: A pesar de que en la consola de Chrome se pueden observar, con esta extensión se pueden visualizar los errores que existan al cargar una página web a través de una ventana emergente. El tipo de errores a mostrar es configurable.

Page Ruler: Añadir una regla para medir todas las dimensiones de un elemento es esencial en el desarrollo web. Con esta utilidad puedes dibujar áreas a tu antojo obteniendo información como ancho, alto y posición. Tiene una opción llamada “modo elemento” que nos muestra la información de cada elemento tan sólo colocando el ratón encima.

Font Playground: Este plugin nos ofrece la posibilidad de previsualizar el aspecto de nuestra web con cientos de fuentes de Google. En el panel tenemos un buscador y opciones para aplicar otros efectos convertir la fuente en mayúsculas o minúsculas, modificar el tamaño, aplicar sólo a algunos selectores, entre otros.

Validity: Extensión muy útil para validar nuestro código HTML con tan solo clicar un icono en la barra de direcciones. Los resultados se pueden ver en la consola de Google Chrome.

Full Page Screen Capture: Aunque no es parte de la programación, muchas veces hemos necesitado hacer pantallazos de una aplicación para añadir a un manual o enseñar a un cliente. Existen herramientas para hacer capturas a través del teclado o seleccionando elementos fácilmente. Sin embargo, si la página es más grande que nuestra pantalla dicha tarea se complica. Con este plugin podemos realizar pantallazos de toda nuestra página independientemente de su tamaño.

En definitiva…

El desarrollo de estas utilidades ha colaborado en gran medida a la evolución de la programación ya que, al facilitarnos tantas tareas, nos ha permitido centrarnos en otros aspectos como la seguridad o en aplicar otras técnicas de diseño y programación.

Estos son algunos de los plugins que he utilizado alguna vez y me han parecido interesantes tanto por su sencillez como por su funcionalidad. Espero que os sean de utilidad.