Editor de código «Brackets»

A la hora de crear una página web tenemos a nuestra disposición un montón de editores de código, desde los más simples y ligeros a lo más completos.

Cualquier editor puede ser una buena opción si se adapta a nuestras necesidades y nos encontramos cómodos utilizándolo.

Hoy quiero hablar de Brackets, que lo he empezado a utilizar recientemente y con el que trabajo bastante a gusto.

Brackets

Brackets es un editor open source creado por Adobe que nos facilita trabajar con HTML, CSS y Javascript.  Permite trabajar con varios lenguajes, pero su especialidad es el desarrollo web. Dos cosas a tener en cuenta, es totalmente gratuito y dispone de versión en español.

Alguna de las ventajas de un editor de estas características:

• La interface tiene como protagonista al código reduciendo al máximo el espacio para barras o paneles, y mostrándolo de manera limpia y ordenada.

• Disponemos de temas para variar el aspecto de la interface y mostrar el código con la combinación de colores que más se adapte a nuestros gustos.

• Posee cierre automático de etiquetas y paréntesis.

• Muestra sugerencias de código a medida que vas escribiendo.

• Y muchas más cosas que facilitan el trabajo.

Instalación

Para instalar Brackets deberemos ir a su página web, http://brackets.io/ , allí encontraremos un botón que nos descargará rápidamente el instalador de la última versión. Una vez descargado el archivo lo ejecutaremos y en pocos segundos tendremos instalada la versión de Brackets en nuestro idioma (lo detecta automáticamente).

Cuando abramos el programa por primera vez, aparecerá un documento html que nos guiará en  nuestros primeros pasos con este editor de código. Es recomendable leerlo ya que es muy breve y nos dará valiosa información para comenzar a trabajar.

Temas

Como ya he mencionado una de las ventajas de estos editores es la de poder personalizar el aspecto con que se muestran los documentos. Para ello disponemos de los “temas”, configuraciones que podemos descargarnos y cambiar.

Para descargarnos nuevos temas iremos  a Archivo>Gestionar extensiones. Una vez que se haya abierto la ventana cliquearemos en la pestaña “temas”, allí dispondremos de multitud de opciones (quizás demasiadas) y buscaremos la que más nos guste. Después de instalarla deberemos ir a Ver>Temas y seleccionarla, además en la misma ventana podremos cambiar la familia y el tamaño de fuente.

Características principales

Vista rápida con cursor.

Unas de las características que más me gustan de este editor es la información que te da de una imagen o color con solo poner el cursor encima del código correspondiente, algo simple pero práctico.

Edición rápida.

Situando el cursor encima de una etiqueta y con el atajo de teclado ctrl+E se desplegará el código que le afecta y podremos editarlo directamente sin tener que ir al documento CSS que lo contiene.

De igual manera también se puede editar un color sin tener que ir a un programa o página web específica que nos dé los códigos.

Vista previa dinámica.

Esta utilidad nos permite ver en tiempo real en el navegador los cambios que hacemos en el código. Realmente práctico ¿verdad?, el único pero es que de momento solo funciona con Chrome.

Para ello tenemos el atajo ctrl+alt+P o el icono del rayito en la esquina superior derecha del navegador.

Además como guía, cuando estemos en una de las etiquetas del documento en Brackets, el elemento que le corresponda en el navegador se marcará con un recuadro azul.

El resto de características las voy a dejar que las investigues por tu cuenta si en algún momento te interesas por este editor.