Editores Web: Cuál elegir?

Un editor web, es un editor de texto, que permite escribir código. Cada desarrrollador, suele tener una herramienta en la que se siente cómodo a la hora de programar.
En este post, voy a comentar algunos de ellos en base a mi experiencia.

1. Brackets

   
   Este es mi editor preferido y es el que estoy usando actualmente. Es muy simple e intuitivo de usar.
   Es opensource, de la empresa Adobe. Se puede descargar y utilizar en forma gratuita, y es multiplataforma (para mac, pc y linux).
   Es editor de código HTML, CSS y JavaScript, y está escrito en estos lenguajes.

   Qué diferencia brackets de otros editores?

   • Lo más interesante de este editor, a mi criterio, es la opción «desarrollo en vivo». Al tildar esta opción, el programa sincroniza el editor con el navegador, y los cambios que vamos haciendo en nuestro código se ven automáticamente en el navegador, sin necesidad de guardar (en el editor), ni de recargar la página (en el navegador).
     
   • Edición rápida de css. Si posicionamos nuestro mouse en cualquier etiqueta html y apretando las teclas control +e, nos muestra el código css asociado a esa etiqueta y podemos modificarlo directamente, sin necesidad de abrir el archivo css asociado.
     
   • Texto predictivo y listas a la hora de acceder a nuestras carpetas.
     Cuando ingresamos la url de una carpeta, automáticamente, nos enlista los archivos que se encuentran en esa carpeta, y podemos seleccionarlos en forma visual de manera muy simple.
     
   • Sugerencias de código. Como en la mayoría de los editores web, en brackets, al empezar a escribir una etiqueta o palabra reservada, brackets, te da pistas mientras estás escribiendo.
     
   • Selector visual de colores
     Cuando estamos trabajando con una propiedad de color, apretando ctrl+e, podemos acceder a una ventana que nos va a permitir seleccionar el color en forma visual, como lo haríamos en cualquier editor de imágenes como photoshop o gimp.  Eso nos permite, seleccionar el color, directamente en brackets, sin tener que buscarlo en otro programa y después copiar el código, maravilloso!
     

   Lo podés descargar desde su sitio web: http://brackets.io/

2. Sublime Text
   

    

   
   Es uno de los editores preferidos de la mayoría de los desarroladores. Si bien no es gratuito, se puede descargar una versión de prueba sin limite de tiempo, lo que sí,  te va a aparecer un cartel cada cierto tiempo recordándote que compres la licencia del producto.
   Es también plataforma, se puede descargar para windows, mac y linux.
   Entre sus principales características, podemos mencionar:

   • Soporta una gran cantidad de lenguajes.
   • Trabaja con abreviaturas, que te permiten escriben código muy rápidamente.  Las abreviaturas en sublime text, se despliegan apretando la tecla tab. Son conocidas como snippets, y están las que vienen por defecto, y además, podemos crear nuestros propios snippets.
     Por ejemplo: div.nombre + tecla tab, esto nos crea un div de clase nombre
     div#nombre + tecla tab nos crea un div con id nombre
     lorem + tecla tab nos crea un texto de relleno
   • Permite seleccionar y editar varias líneas de código a la vez.
   • Permite plegar y desplegar bloques de código
   • Autocompletado y sugerencias de código
     Completa palabras reservadas y hasta sugiere orden en el que hay que ingresar parámetros.
   • La interface, se puede personalizar por completo.
   • Hay una cantidad de paquetes y plugins que se pueden instalar para potenciarlo. Por ejemplo, antes cuando hablabamos de bracket, les comentaba que tenía un selector visual de color, en sublime, hay un paquete que se puede instalar, que permite hacer lo mismo, se llama colorpicker.
     

   Lo podés descargar ingresando a: http://www.sublimetext.com/

3. Notepad ++

   
   Es un editor gratuito para windows. Soporta una gran cantidad de lenguajes, y abre incluso archivos sin extensión.
   Está escrito en c++ y es muy liviano.
   Permite abrir varios archivos a la vez en diferentes pestañas.
   Si bien es muy simple y claro de usar, en comparación a los otros editores es mucho más limitado.
   Se le pueden instalar plugins que permiten potenciarlo.
   Al igual que Sublime text, permite plegar y desplegar bloques de código.
   En lo personal, me gusta mucho usarlo cuando necesito imprimir código, la impresión o la exportación a pdf, te da muchas posibilidades de personalización.

   Lo podés descargar ingresando a: http://notepad-plus-plus.org/

4. Adobe Dreamweaver
   

   
   Este es uno de los primeros editores web que utilicé. No es gratuito, es desarrollado por la empresa Adobe (www.adobe.com).
   La característica principal que diferencia a dreamweaver de los otros editores mencionados, es que permite escribir texto, e insertar imágenes, videos, etc, en forma visual y es el mismísimo programa el que se encarga de escribir el código «automáticamente».
   El programa puede utilizarse de 3 maneras, en forma visual, como les comentaba anteriormente, en forma de código, esto es escribiendo el código en forma directa, como con cualquiera de los editores anteriores mencionados, o en forma dividida, esto es que vemos el código y vemos también como va quedando.

   Características interesantes

   • Trabaja con un editor de sitios que nos permite controlar la carpeta de nuestro proyecto. Con lo cual, si modificamos el nombre de un archivo, por ejemplo, el programa automáticamente, detecta todos los links vinculados a ese archivo y nos permite actualizarlos con un solo clic.
   • Trae un ftp integrado, que permite sincronizar tanto los archivos locales como remotos.
   • Se pueden crear plantillas html. Esto quiere decir que sin necesidad de utilizar otro código, podemos tener partes fijas en una plantilla maestra y páginas hijas de esta plantilla. Lo cual permite agilizar por completo las actualizaciones. Por ejemplo, si tuvieramos que cambiar un dato de contacto, lo modificamos en la plantilla y esa actualización se realiza en forma automática en todas las páginas hijas.
   • Cuenta con un panel que permite, agregar comportamientos javascript en forma visual, como validar campos de un formulario, o abrir una ventana emergente.
   • Como los otros editores, es predictivo y tiene sugerencias de código.
   • Los colores, tipografías y tamaños, podés modificarlos en forma visual.
   • Los archivos, los podés agregar navegando visualmente las carpetas.
   • Está integrado con los otros programas de adobe, como fireworks, photoshop, y adobe edge animate.

   Desventajas de usar Dreamweaver

   • El editor visual con el que cuenta el programa, NO muestra lo que finalmente se va a ver. Es decir, no podemos confiar en su editor visual, hay que estar viendo siempre lo que hacemos en un navegador.
   • Cuando escribe código en forma automática, hay que revisar que no ensucie mucho el código, ya que suele escribir de más!
   • Si solés tabular el código (yo lo hago y me molesta bastante que se destabule, jajjaaj) por alguna razón que desconozco, pierde ese formato.

   Pienso que si venís más del diseño que de la programación, es el editor ideal para empezar a hacer web!

5. Eclipse

   
   Este es una plataforma de desarrollo basada en java . Se pueden añadir múltiples lenguajes soportados mediante plugins . Es open source y multiplataforma.

   Es un ide, que permite dentro del mismo entorno de desarrollo, escribir el código, ejecutarlo y hasta ejecutar los test si se instalan las librerías necesarias para hacerlo.

   Lo que me parece más interesante de eclipse es que tiene un «debuggeador» en vivo, esto es que mientras estás escribiendo el código, te subraya en rojo, las palabras que tienen algún error, que puede ser de tipeo, o de algo que no corresponde, una variable que no existe, métodos que te faltan declarar, parámetros faltantes, namespace incorrectos, etc. Y al posicionar  el mouse sobre la palabra, te indica de qué manera solucionarlo. Fantástico, no?

   
   Eclipse se puede descargar ingresando a su página web: http://www.eclipse.org

6. Netbeans

   
   Este editor soporta múltiples lenguajes (PHP, Java,  JavaScript, Ruby, Groovy, etc)  y frameworks.
   Es también Open Source. Permite compilar y debbugear código.
   Tiene también un panel visual, para insertar componentes html, como tablas, listas, formularios, campos, etc.
   Netbeans, lo podés descargar en forma gratuita ingresando a su página web: https://netbeans.org/

Vos cuál editor web usás?