3 herramientas para desarrollo web imprescindibles

3 herramientas para desarrollo web imprescindibles

Aplicaciones web Blog Desarrollo Web Dexpierta Diseño Web Tecnología

En los últimos años, hemos visto un enorme crecimiento en una generación completamente nueva de aplicaciones web. Estas aplicaciones son más ricas, más interesantes, lo que lleva a un enorme aumento de la complejidad lo que tiene que ver con la parte del desarrollo front-end. En este post vamos a ver algunas herramientas para desarrollo web que facilitan el día a día de trabajo de los desarrolladores.

Marcos de trabajo como Backbone, AngularJS y EmberJS ofrecen soluciones robustas para crear aplicaciones sorprendentes, aprovechando todo el poder de la web. Mientras tanto, Javascript, el lenguaje web, ha crecido mucho (tanto en popularidad como en la madurez) y ahora tiene aplicación lateral de fondo con NodeJS.

Para tener éxito en estos nuevos retos de la complejidad, los desarrolladores han creado una gran cantidad de herramientas para agilizar el proceso general de desarrollo. Desde los marcos de prueba para perfilar herramientas, hasta otras herramientas maduras y útiles para lograr la mejor experiencia a nuestros usuarios.

Las tres herramientas para desarrollo web más imprescindibles

1. Chrome Developers Tools

Una de las mejores herramientas para desarrollo web que tenemos en nuestras manos actualmente. Desde su nacimiento, Chrome ha invertido mucho en sus herramientas de desarrollo y está mejorándolas continuamente. Cada versión (se actualiza cada 6 semanas aproximadamente) viene con sus propias características de la herramienta dev nuevos.

Esta herramienta contiene una completa suite de diversos instrumentos. Puede editar el DOM (HTML) / CSS en tiempo real, depurar Javascript paso a paso, realizar un análisis de rendimiento de profundidad, incluso agregar una terminal.

El editor DOM / CSS es una herramienta muy potente, lo que le permite proporcionar retroalimentación en tiempo real de su equipo. La página web oficial y el canal de desarrolladores de Google Youtube ambos son minas de oro de información. Por ejemplo, la sección sobre  API de línea de comandos contiene comandos muy útiles. También puedes consultar una gran cantidad de tutoriales en este sentido en HTML5 Rocks.

herramientas para desarrollo web

Además de todo esto, las herramientas de red permiten entender lo que realmente está pasando bajo el capó y optimizar sus flujos de carga, a la vez que la línea de tiempo da una visión más profunda de lo que hace el navegador. Si eres lo suficientemente curioso se puede aprender mucho acerca de cómo un navegador (e indirectamente, la web) está funcionando, lo que le permite tomar el control del ciclo de vida completo de una aplicación web.

2. Grunt

Grunt es la herramienta preferida cuando se trata de la tarea de automatización. Es una librería JavaScript que nos permite configurar tareas automáticas y así ahorrarnos tiempo en nuestro desarrollo y despliegue de aplicaciones webs. Con un simple fichero JS que llamaremos Gruntfile, indicamos las tareas que queremos automatizar con un simple comando y las escribimos en él en formato JSON.

El alcance de Grunt va más allá de simplemente la automatización de tareas front-end. Lo utilizamos, por ejemplo, para poner a prueba continuamente en PHP mientras desarrollamos. Grunt ofrece una amplia variedad de plugins y su sintaxis es consistente y fácil de aprender.

3. LiveReload

¿Cuántas veces de medias pulsa la tecla de refrescar (F5) en el teclado todos los días? Mucho, ¿no?

El desarrollo web supone realizar diversas tareas más creativas junto a otras más mundanas y aburridas. En este sentido una de las más básicas y hasta frustrantes es la necesidad de tener que recargar el navegador durante el desarrollo o la depuración de un cambio en una página web. LiveReload monitoriza cambios en el sistema de archivos de forma que cada vez que guardas un archivo el navegador se actualiza para poder ver los cambios en la página web abierta de forma instantánea y sin necesidad de tener que llevar a cabo de forma manual un “refresh”.

Incluso mejor, LiveReload aplica los cambios CSS sin recargar la página y recarga automáticamente la página cuando cambia el HTML.

Esta aplicación de escritorio con soporte para los principales navegadores web está disponible por el momento de forma única para usuarios de sistemas Mac OS X 10.6 Snow Leopard o posterior. Además también es posible acceder a dos extensiones dirigidas a los navegadores Firefox y Chrome.

Hablando de extensiones de Chrome, la tienda de Chrome está llena de cosas interesantes que te harán la vida mucho más fácil. Éstos son algunos de nuestros favoritos:

  • WhatFont, que te permite descubrir la fuente de cualquier elemento en cualquier sitio web (útil cuando se busca la tipografía perfecta que viste en otro sitio, o para la depuración de estilos de font-face).
  • Page ruler: otro útil, sobre todo porque al igual que cualquier desarrollador de front-end, que está obsesionado por la perfección de píxeles, ¿verdad?
  • Proxy SwitchySharp  también puede ser de gran ayuda cuando se trata de información de depuración localizada (moneda por defecto, los números de teléfono, etc).

Y para ti, ¿cuáles son tus herramientas favoritas cuando se trata de desarrollo front-end?

Si te ha gustado este artículo, entonces te encantará esto.

dexpierta

Únete a la comunidad de #dexpiertos y recibe por mail todas las novedades y tutoriales

¡Es gratis! ;)