Si vamos a iniciarnos en el desarrollo y la programación web, lo más recomendable es contar con las herramientas adecuadas para ahorrar tiempo y esfuerzo, y por ende facilitarnos la vida. Cada herramienta tiene sus peculiaridades y escoger la más adecuada para nosotros depende de nuestros gustos o nuestras necesidades. Ya en Bitelia hablamos en su momento de los mejores editores de texto para desarrolladores, y en esta ocasión voy a profundizar un poco más en dos de ellos: Brackets y Sublime Text 3, pero tratando de enfocarme en sus opciones para los desarrolladores novatos.

Habiendo más de una alternativa puede que se pregunten ¿por qué hablar solo de estos dos?, mi objetivo es responder a esta pregunta a lo largo de este artículo, mostrando las ventajas y desventajas de cada uno. Quiero aclarar que aunque establezco una comparación entre Sublime Text vs Brackets, mi objetivo solo es mostrar los beneficios que nos aportan, no quitarles méritos.

Sublime Text 3

SublimeText3

Sin duda alguna en los tiempos que corren Sublime Text no necesita presentación. Un editor de texto que poco a poco suplantó a TextMate en Mac y que se ha ido expandiendo en otras plataformas a ritmo acelerado. Entre las ventajas de este editor se encuentra su reducido tamaño (el instalador no sobrepasa los 10MB), su arranque casi inmediato y la capacidad de ampliar sus funcionalidades a través de plugins.

Sublime Text no es gratis, sin embargo podemos usar la versión de prueba por tiempo indefinido, solo que nos saldrá un popUp cada vez que guardemos nuestros archivos una determinada cantidad de veces, recordándonos que sería bueno para su desarrollador, el pagar por usarlo. No es tan molesto en realidad, pero siempre puedes pagar por su licencia que comparada con otros programas, es muy barata.

Esta aplicación es bastante personalizable al punto que podemos cambiar el comportamiento del editor, el tamaño y tipo de tipografía, los atajos de teclado, los esquemas de colores y otras series de opciones para acomodar la aplicación a nuestras necesidades. Por defecto incluye un minimapa que nos permite navegar rápidamente por nuestro código. Podemos además gestionar nuestros proyectos, e incluso combinarlos, y cambiar entre ellos de forma rápida. Con Sublime Text podemos escribir código para diversos lenguajes, tienes soporte para Snippets, y con la instalación de plugins podremos tener soporte para GIT, o pre-compiladores para CSS como como Less o Stylus. Es ideal si queremos desarrollar con DJango o Python directamente.

Algo que hace genial a Sublime Text es que mantiene nuestros archivos en el mismo estado en el que los dejamos al cerrar el editor (sin necesidad de guardar) y tiene por defecto soporte para Código Zen por lo que podemos agilizar nuestro trabajo. Ejemplo de ello es que si en un archivo HTML escribimos:

<code>div.cuerpo</code>


Y tabulamos, el resultado que obtendremos es:

<div class="cuerpo"></div>


Si queremos acceder de forma rápida a los comandos de Sublime Text (para no tener que navegar en el menú) existe un atajo de teclado (Ctrl+Shit+P) que nos lanza una paleta de comandos, y solo tenemos que escribir lo que queremos para que vaya filtrando los comandos disponibles:

SublimeText_Comandos

Solo he mencionado algunas de sus ventajas, pues navegando en su menú de herramientas podremos encontrar opciones para casi todo. Digamos que por ende es un editor para desarrolladores con un nivel de conocimiento que parte de lo medio. Quizás la única pega que tiene este editor es que solo está disponible en Inglés y bueno, por lo menos a mi no me gusta su lento ciclo de desarrollo (teniendo en cuenta que la última versión de la Beta fue lanzada el 17 de Diciembre del 2013).

Instalación:

Para instalar Sublime Text solo debemos ir hasta su sitio web oficial y escoger según nuestro Sistema Operativo entre la versión 2 (estable) o la versión 3 (en desarrollo), yo les recomiendo esta última. Se encuentra disponible para Windows, Ubuntu y OS X.

Instalando Plugins en Sublime Text

Para instalar nuevas funcionalidades podemos hacer uso de Package Control, y añadirlo a Sublime Text es muy simple. Solo tenemos que ir al sitio web de Package Control, seleccionar para que versión de Sublime queremos instalar (recuerden que está la 2 y la 3) y copiar el código que ahí nos muestran. En caso de que no se instale de forma automática, en esa misma página nos muestran como hacerlo manualmente, pero es muy raro que no funcione automáticamente.

Una vez hecho esto solo debemos ir al menú View » Show Console y en la parte inferior pegar el texto que copiamos anteriormente en el sitio de Package Control. Damos Enter, esperamos a que se instale y reiniciamos Sublime Text.

SublimeText_Consola1

A partir de ese momento lo que hacemos posteriormente es ir a Preferences » Package Control:

SublimeText_PackageControl

Ahora tecleamos Install Package. Damos Enter y esperamos a que nos salga el listado de "plugins" que podemos añadir.

SublimeText_PackageControl1

En la imagen de ejemplo instalaremos Stylus. Presionamos la tecla Enter y en unos segundos ya lo tenemos instalado. Es así de fácil.

SublimeText_PackageControl2

Brackets

Brackets

Impulsado por Adobe como parte de Adobe Edge, Brackets es un editor de texto construido sobre Tecnología Web para la Web. Al contrario de Sublime Text, que como dije soporte muchos lenguajes, Brackets está enfocado en HTML, CSS y JavaScript.

Su ciclo de desarrollo es muy activo, lanzando lo que ellos llaman "sprint" (y yo llamo versión) todos los meses con muchas mejoras y correcciones de errores. Brackets es completamente gratis y de código abierto, por lo que podemos ayudar a mejorarlo o simplemente añadir las funcionalidades que queramos. Algo que me llama mucho la atención de Brackets es que incluye muchas etiquetas HTML5 y propiedades CSS3 en su autocompletado de código que no tiene ningún otro editor de texto, o incluso muchos de los potentes IDEs disponibles.

La cualidad más grandiosa que posee Brackets es lo que sus desarrolladores llaman "desarrollo en vivo". ¿Qué es eso?, muy simple, si tenemos instalado Node.js (un servidor JavaScript) y Google Chrome, podemos ver los cambios que vamos realizando en nuestros ficheros HTML y CSS sin recargar la página en el navegador. Pero no terminan ahí sus bondades. En lo persona prefiero usar Brackets pues posee ciertas mejoras que agilizan el proceso de maquetado en HTML. Les muestro algunos ejemplos que son geniales:

Si nos colocamos sobre una etiqueta HTML que ya tiene propiedades CSS establecidas en la hoja de estilo, y presionamos Ctrl+E, se despliega un sub-editor que nos indica en que fichero CSS y en que línea se encuentran dichas propiedades.

Brackets1_CSS_Editor

Por supuesto, podemos editarlas en ese mismo instante sin necesidades de abrir la hoja de estilos. Otra de las comodidades que nos ofrece Brackets es que no tenemos que recordar las rutas de nuestros ficheros. Cuando insertamos una etiqueta HTML o una propiedad CSS que necesite un fichero externo, Brackets nos mostrará una ventana donde podremos escoger la ruta del mismo.

Brackets5_Rutas

Cuando colocamos el cursor sobre un color en la hoja de estilos, podemos ver un pequeño cuadro con el color en cuestión:

Brackets3_Vista_Color

Lo mismo sucede cuando ponemos el cursor sobre una imagen de nuestro proyecto que está enlazada en el código HTML:

Brackets2_Vista_Imagen

Instalación:

Para instalar Brackets solo debemos ir al sitio web oficial y automáticamente en dependencia del sistema operativo que estemos usando, nos saldrá el botón de descarga apuntando al binario que necesitamos instalar. Hasta el momento Brackets está disponible para Windows (.msi), para Ubuntu 32 y 64 bits (.deb) y para OS X (.dmg).

Instalar Extensiones en Brackets

Podemos ampliar sus funcionalidades y opciones mediante extensiones, las cuales se pueden instalar de forma muy fácil desde Internet, desde una URL o también de forma local.

Brackets4_Extensiones

Conclusiones

Si me preguntan cual de los dos es mejor, o cual uso, mi respuesta sería: ambos. Establecer una comparación del tipo Sublime Text vs Brackets de forma objetiva, depende del punto de vista de cada quién y el uso que le dé a cada una de estas aplicaciones. Brackets yo se lo recomiendo a los nuevos usuarios por su excelente autocompletado y las ventajas y opciones que les mostré anteriormente, y sobre todo por ser open source, tener un desarrollo muy activo y estar disponible en varios idiomas. Sublime Text por su parte, tiene funciones interesantes como el indentado de Código y la ventaja de incluir algo de ZenCoding por defecto. También nos ofrece la opción de editar múltiples líneas al mismo tiempo. Pero al final la decisión es de cada usuario.

Más guías y consejos

Recibe cada mañana nuestra newsletter. Una guía para entender lo que importa en relación con la tecnología, la ciencia y la cultura digital.

Procesando...
¡Listo! Ya estás suscrito