Brackets: Un editor de código web para diseñadores y desarrolladores eficientes

Un editor web creado por la comunidad y Adobe

Para nadie es un secreto que gracias al trabajo de la comunidad de diseñadores y desarrolladores web en conjunto con el W3C [inglés] la Internet ha avanzado y crecido de una manera impresionante en los últimos años, permitiendo la creación de nuevas tecnologías abiertas y la masificación de los estándares web.

Y nuestros amigos de Adobe, desde ya hace algún tiempo, vienen observando esto y mostrando que desean jugar un mayor rol en esta escena, involucrándose a tiempo completo con los estándares abiertos de la web [inglés] y la creación de herramientas de código abierto [inglés].

Adobe ha venido trabajando junto a una extensa, y cada vez más creciente, comunidad de desarrolladores en lo que promete ser un editor web de peso pesado que puede alejar definitivamente a muchos diseñadores y desarrolladores profesionales del ya decadente ambiente WYSIWYG y al que han llamado Brackets [inglés].

Siempre me ha gustado probar programas y hacer comparaciones entre ellos, ver cuales son sus ventajas y desventajas, funcionalidades y, especialmente, como pueden mejorar mi flujo de trabajo de diseño y desarrollo. Así que tan pronto como supe de su existencia, puse mis manos sobre la última versión de brackets disponible para descarga [inglés], aunque aún está en fase de gestación, por lo tanto un poco inmadura y puede que contenga algunos fallos y errores. Hoy en día es una herramienta muy estable y madura.

Y… ¿Qué es ese Brackets?

Los diseñadores y desarrolladores profesionales en todo el mundo han comenzado a migrar hacia herramientas más flexibles, eficientes y que les permitan trabajar directamente con el código de manera simple, rápida y eficaz como: Textmate [inglés], Coda [inglés], Espresso [inglés], Sublime Text [inglés] o Vim [inglés], por sólo mencionar las más populares. Estos editores han simplificado la interfaz de usuario, eliminando el exceso de elementos gráficos tradicionales de las herramientas WYSIWYG recargadas de paneles e iconos.

Y como el nuevo chico de la cuadra, aparece Brackets [inglés], un editor web de código abierto que permite crear contenidos y desarrollar para la web (HTML, CSS/LESS [inglés] y JavaScript) y que ha sido creado con… tecnologías web. ¡Si, así como has leído!, con HTML, CSS y Javascript.

Puede que estés pensando “¿para qué necesito otro editor de código HTML o CSS?”. Lo mismo pensé yo. Más aún siendo yo un asiduo usuario de Textmate y Sublime Text, luego de haber dejado atrás desde hace mucho tiempo herramientas como Dreamweaver.

Pero para aclarar un poco las cosas y hacerte ver que Brackets es un proyecto que parece ser muy valioso y promete convertirse pronto en una excelente herramienta de diseño y desarrollo web, menciono aquí sus características clave:

Un editor de código sencillo y ligero

Interface de Brackets con ubicación del panel de archivos de proyecto, panel de edición y barra de menús

Como puedes ver en la imagen, Brackets es muy parecido a muchos otros editores de código modernos existentes y que seguramente has usado o usas en este momento. Su interfaz se reduce a:

  1. Un panel de archivos de proyecto a la izquierda (puedes ocultarlo si quieres), con el “árbol de archivos” del proyecto y que te permite explorarlos rápidamente sin abrirlos al seleccionarlos, y en su parte superior, el “conjunto de trabajo” que muestra los archivos actualmente abiertos.
  2. La barra de menús en la parte superior.
  3. El área de edición a la derecha del panel de archivos de proyecto y debajo de la barra de menús, donde se encuentra el documento en el que estás trabajando actualmente.

Todo muy sencillo, ¿no?… bueno, puede que necesites un poco más.

Sugerencias de código y edición rápida de CSS

Sugerencias de código HTML en Brackets Sugerencias de código CSS en Brackets

Como en la mayoría de los editores web, notarás que Brackets te da pistas en caso de que no recuerdes algún atributo o etiqueta HTML (¿Quién puede recordarlas todas?), selector o propiedad CSS, o palabras reservadas, variables locales, argumentos y nombres de propiedades de JavaScript. Para ello Brackets te muestra sugerencias de código emergentes, facilitándote la creación de contenidos y acelerando tu flujo de trabajo.

Edición rápida de CSS en Brackets mediante editor flotante

La estrella del show en Brackets es la Edición rápida de las reglas CSS aplicadas a cualquier etiqueta HTML. Basta con que sitúes tu cursor en un atributo class o id, o en una etiqueta y pulses Ctrl/Cmd+E y aparecerá un editor flotante con las reglas CSS relevantes justo debajo de la etiqueta. Genial, ¿cierto?… Luego, sólo tienes que seleccionar la regla que deseas editar a la derecha, haciéndole clic o con el teclado mediante Alt+Flecha Arriba/Abajo y proceder a editarla. Pan comido, diríamos…

Los desarrolladores quieren extender esta funcionalidad más allá de solamente la edición de CSS, ¡demuestra tu talento como desarrollador web colaborando! [info en inglés]

Selector visual de colores

Selector visual de colores de Brackets en acción

Otra estrella en el flujo de desarrollo web con Brackets es el selector visual de colores. Una herramienta que nos facilita la selección o modificación precisa del color o tonalidad de color que necesitamos aplicar mediante nuestras CSS de una manera visual y a la que estamos acostumbrados a usar en nuestros programas de edición gráfica, por lo que es muy seguro que la sepas utilizar y que le sacarás el máximo provecho con tan sólo colocar el cursor en la propiedad color o en cualquier valor de color en tus reglas CSS y pulsar Ctrl/Cmd+E. ¿Quién necesita paneles de herramientas?.

Desarrollo en vivo… El “Santo Grial” del desarrollo web

Captura de pantalla con una mitad del editor (parte derecha) y una mitad del navegador a su lado al mismo tiempoCaptura de pantalla con una mitad del editor (parte derecha) y una mitad del navegador a su lado al mismo tiempo

Me es difícil imaginar el que hoy en día un diseñador/desarrollador no trabaje con el inspector de código nativo de los navegadores o con la maravillosa extensión Firebug [inglés] que nos permiten diseñar directamente en el navegador (un sueño hecho realidad para los diseñadores web), editando el código fuente y los estilos CSS mientras ves tus cambios inmediatamente en el navegador. ¡Eso si es WYSIWYG!.

Pues Brackets lo hace aún mejor y más fácil integrando estrechamente a tu navegador con tu editor web, por lo que puedes trabajar directamente en tu editor de código y ver los resultados simultáneamente en el navegador, ¡sin tener que recordar los cambios que has ensayado en el navegador y luego regresar al editor para ingresarlos manualmente!.

Todo lo que debes hacer es pulsar en el icono de “relámpago” Icono de Desarrollo en vivo de la parte derecha de la barra de menús y tu archivo HTML se abrirá en Google Chrome.

Si esto no es el Santo Grial para los diseñadores web, díganme que es…

Y como si fuera poco, al colocar el cursor en una regla de tu hoja de estilos CSS, se resaltarán dinámicamente los elementos afectados por la misma en tu navegador. Esta característica se conoce con el nombre de Resaltado en vivo de CSS (Live Highlight for CSS).

Pero no todo en la vida es perfecto, al menos por ahora.

Algunas notas en cuanto al Desarrollo en vivo

Al trabajar con la funcionalidad de Desarrollo en vivo debes tener en cuenta que:

Creado con estándares web, modular y extensible

Brackets es el primer editor de código dirijido a la creación de documentos HTML, CSS/LESS y Javascript (actualmente pueden agregarse otros lenguajes mediante extensiones) creado completamente en HTML, CSS y Javascript.

¡Brackets está siendo desarrollado usando… Brackets! Por lo que es una herramienta bastante estable.

Esto, más su modularidad, permite que el programa sea extensible por cualquier desarrollador web capacitado (¿creo que escuché tu nombre?) a fin de agregarle funcionalidades o mejorar las existentes.

Si te emociona participar en el proyecto, puedes ayudar a mejorar el editor [inglés], añadir funcionalidades mediante una extensión [inglés], conocer el progreso del proyecto [inglés] o unirte al grupo de Google del proyecto [inglés].

Otras funcionalidades interesantes

Además de todo lo ya comentado, el programa cuenta con algunas funcionalidades incluidas:

Adobe hace de Brackets su editor de código

Como era de esperarse, Adobe decidió reempaquetar Brackets en una distribución propia y lo integró a su suite “Adobe Edge Tools & Services [inglés], un conjunto de herramientas modernas, para el diseño web moderno, llamándolo Adobe Edge Code [inglés].

Pero no sólamente le cambiaron el nombre, sino que modificaron ligeramente algunas opciones y le integraron otras herramientas de la suite Edge que le proporcionan un atractivo adicional:

Según comenta Adobe, van a integrarle otras herramientas de la suite Edge mientras se vayan desarrollando. ¡Suena prometedor! Esperemos y veamos.

Por el momento, puedes ir descargando y probando la versión Preview disponible [inglés].

¿Quieres hacerlo más poderoso?

No te desanimes si no ves ninguna opción en los menús para descubrir o instalar extensiones, esa funcionalidad se está desarrollando actualmente 🙁. Simplemente, descarga las extensiones que te interesen de la lista a continuación y cópialas a la carpeta de extensiones seleccionando Ayuda > Abrir carpeta de extensiones (Help > Show extensions folder). Recuerda leer las instrucciones de cada una de ellas.

Para una lista más completa y actualizada visita la página oficial de extensiones [inglés]. Trataremos de tener esta lista al día.

Edición de código/texto

Generación de código

Funcionalidad general

Desarrollo en vivo

Edición visual

Herramientas externas

Documentación

Optimizado y advertencias

Muy útiles comandos de teclado

Aquí tienes algunos comandos de teclado que merece la pena conocer. La lista irá creciendo según se vayan añadiendo funcionalidades.

¿Qué esperas?, si no lo has descargado hasta ahora, Descárgalo [inglés], pruébalo y cuéntanos tu experiencia con Brackets en los comentarios.

Pásalo en: Twitter Facebook Google+

Coméntalo