Brackets: Un editor de

cdigo web para diseadores

y desarrolladores eficientes
Por: rubenmediosfebrero 12, 2013Comntalo
Publicado en: Desarrollo webHerramientas
Un editor web creado por la comunidad y
Adobe
Para nadie es un secreto que gracias al trabajo de la comunidad de
diseadores y desarrolladores web en conjunto con el W3C [ingls] la Internet ha
avanzado y crecido de una manera impresionante en los ltimos aos,
permitiendo la creacin de nuevas tecnologas abiertas y la masificacin de los
estndares web.
Y nuestros amigos de Adobe, desde ya hace algn tiempo, vienen observando
esto y mostrando que desean jugar un mayor rol en esta escena,
involucrndose a tiempo completo con los estndares abiertos de la
web [ingls] y la creacin de herramientas de cdigo abierto [ingls].
Adobe ha venido trabajando junto a una extensa, y cada vez ms creciente,
comunidad de desarrolladores en lo que promete ser un editor web de peso
pesado que puede alejar definitivamente a muchos diseadores y
desarrolladores profesionales del ya decadente ambiente WYSIWYG y al
que han llamado Brackets [ingls].
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 diseo y desarrollo.
As que tan pronto como supe de su existencia, puse mis manos sobre la ltima
versin de brackets disponible para descarga [ingls], aunque an est en fase
de gestacin, por lo tanto un poco inmadura y puede que contenga algunos
fallos y errores. Hoy en da es una herramienta muy estable y madura.
Y Qu es ese Brackets?
Los diseadores y desarrolladores profesionales en todo el mundo han
comenzado a migrar hacia herramientas ms flexibles, eficientes y que les
permitan trabajar directamente con el cdigo de manera simple, rpida y
eficazcomo: Textmate [ingls], Coda [ingls], Espresso [ingls], Sublime
Text [ingls] o Vim [ingls], por slo mencionar las ms populares. Estos editores
han simplificado la interfaz de usuario, eliminando el exceso de elementos
grficos tradicionales de las herramientas WYSIWYG recargadas de paneles e
iconos.
Y como el nuevo chico de la cuadra, aparece Brackets [ingls], un editor web
de cdigo abierto que permite crear contenidos y desarrollar para la web
(HTML, CSS/LESS [ingls] y JavaScript) y que ha sido creado con
tecnologas web. Si, as como has ledo!, con HTML, CSS y Javascript.
Puede que ests pensando para qu necesito otro editor de
cdigo HTML o CSS?. Lo mismo pens yo. Ms an siendo yo un asiduo
usuario de Textmate y Sublime Text, luego de haber dejado atrs 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 diseo y desarrollo web, menciono aqu sus caractersticas
clave:
Es un editor de cdigo sencillo y ligero, sin paneles de opciones ni barras
de iconos que sobrecarguen la interfaz.
Te permite editar rpidamente tus hojas de estilo CSS directamente en tu
documento HTML en un editor flotante, sin necesidad de abrir el archivo
separadamente.
Muestra sugerencias de cdigo para las etiquetas y atributos HTML, los
selectores y propiedades de las hojas de estilo CSS y las palabras reservadas,
variables locales, argumentos y nombres de propiedades de JavaScript.
Con Desarrollo en vivo (Live Development), editas tu
cdigo HTML/CSS mientras ves los cambios en tiempo real en tu
navegador (actualmente slo funciona con Google Chrome).
Est creado con estndares web.
Es modular y extensible mediante extensiones. Como mencion
anteriormente, est creado con HTML, CSS y Javascript, por lo que t, yo y
otros desarrolladores web podemos colaborar en su desarrollo.
Un editor de cdigo sencillo y ligero

Como puedes ver en la imagen, Brackets es muy parecido a muchos otros
editores de cdigo 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 rpidamente
sin abrirlos al seleccionarlos, y en su parte superior, el conjunto de trabajo
que muestra los archivos actualmente abiertos.
2. La barra de mens en la parte superior.
3. El rea de edicin a la derecha del panel de archivos de proyecto y debajo de
la barra de mens, donde se encuentra el documento en el que ests
trabajando actualmente.
Todo muy sencillo, no? bueno, puede que necesites un poco ms.
Sugerencias de cdigo y edicin rpida
de CSS


Como en la mayora de los editores web, notars que Brackets te da pistas en
caso de que no recuerdes algn atributo o etiqueta HTML (Quin 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 cdigo emergentes, facilitndote la
creacin de contenidos y acelerando tu flujo de trabajo.

La estrella del show en Brackets es la Edicin rpida de las
reglas CSS aplicadas a cualquier etiquetaHTML. Basta con que sites 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, slo tienes que seleccionar la regla que
deseas editar a la derecha, hacindole clic o con el teclado
mediante Alt+Flecha Arriba/Abajo y proceder a editarla. Pan comido,
diramos
Los desarrolladores quieren extender esta funcionalidad ms all de solamente
la edicin de CSS, demuestra tu talento como desarrollador web
colaborando! [info en ingls]
Selector visual de colores

Otra estrella en el flujo de desarrollo web con Brackets es el selector visual de
colores. Una herramienta que nos facilita la seleccin o modificacin 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 edicin grfica, por lo que es muy seguro que la
sepas utilizar y que le sacars el mximo provecho con tan slo colocar el
cursor en la propiedad color o en cualquier valor de color en tus reglas CSS y
pulsar Ctrl/Cmd+E. Quin necesita paneles de herramientas?.
Desarrollo en vivo El Santo Grial del
desarrollo web

Me es difcil imaginar el que hoy en da un diseador/desarrollador no trabaje
con el inspector de cdigo nativo de los navegadores o con la
maravillosa extensin Firebug [ingls] que nos permiten disear directamente
en el navegador (un sueo hecho realidad para los diseadores
web), editando el cdigo fuente y los estilos CSSmientras ves tus cambios
inmediatamente en el navegador. Eso si es WYSIWYG!.
Pues Brackets lo hace an mejor y ms fcil integrando estrechamente a
tu navegador con tu editor web, por lo que puedes trabajar directamente
en tu editor de cdigo y ver los resultados simultneamente 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 relmpago de la parte
derecha de la barra de mens y tu archivo HTML se abrir en Google Chrome.
Si esto no es el Santo Grial para los diseadores web, dganme que es
Y como si fuera poco, al colocar el cursor en una regla de tu hoja de
estilos CSS, se resaltarn dinmicamente los elementos afectados por la
misma en tu navegador. Esta caracterstica 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:
Slo funciona con Google Chrome. En caso de no tenerlo puedes descargarlo
del sitio web oficial.
El Desarrollo en vivo usa la depuracin remota de Google Chrome, la cual es
activada por una marca (flag) de la lnea de comandos, por lo que si ya esta
abierto el Chrome, Brackets preguntar si deseas reiniciarlo de modo que
pueda activarse la depuracin remota. Debers aceptar para que pueda
hacerlo.
Solamente es posible trabajar en un documento HTML a la vez. Si cambias de
documento, Brackets cerrar el que se encuentre abierto para trabajar con el
nuevo documento.
No pueden cargarse documentos desde una direccin web, slo se permiten
archivos locales.
Creado con estndares web, modular y
extensible
Brackets es el primer editor de cdigo dirijido a la creacin 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, ms 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 [ingls], aadir funcionalidades mediante una extensin [ingls], conocer el
progreso del proyecto [ingls] o unirte al grupo de Google del proyecto[ingls].
Otras funcionalidades interesantes
Adems de todo lo ya comentado, el programa cuenta con algunas
funcionalidades incluidas:
Buscar/Reemplazar usando Edicin > Reemplazar (Edit >
Replace) o mediante el teclado con (
Ctrl/Cmd+H
) y Buscar en archivos
usando Edicin > Buscar en archivos (Edit > Find in
files) o mediante el teclado con (
Ctrl/Cmd+Maysculas+F
).
De manera predeterminada, Brackets ejecuta la herramienta de anlisis de
calidad de cdigo Javascript JSLint[ingls] en todos los archivos JS. Si ves una
estrella dorada en la barra de informacin de la parte inferior, esto significa que
eres un ninja desarrollando en Javascript y tu archivo est limpio y correcto.
Puedes desactivar esta herramienta en el men Visualizacin >
Habilitar JSLint (View > Enable JSLint).
Abrir archivos mediante arrastrar y soltar
Abrir archivos rpidamente usando Navegacin > Apertura
rpida (Navigate > Quick Open) o mediante el teclado
(
Ctrl/Cmd+Maysculas+O
). Esto te mostrar un listado de los documentos
existentes en la carpeta en la que trabajas.
Ir a una definicin de un mtodo en particular en el documento
usando
Ctrl/Cmd+T
o ir a un nmero de lnea especfica
presionando
Ctrl/Cmd+G
.
Adobe hace de Brackets su editor de cdigo
Como era de esperarse, Adobe decidi reempaquetar Brackets en una
distribucin propia y lo integr a su suite Adobe Edge Tools & Services [ingls],
un conjunto de herramientas modernas, para el diseo web moderno,
llamndolo Adobe Edge Code [ingls].
Pero no slamente 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:
Edge Web Fonts: servicio gratuito de fuentes web brindado por la
plataforma Typekit (recin adquirida porAdobe), que te permite usar un gran
nmero de fuentes en tus proyectos web.
Edge PhoneGap Build: servicio en la nube que permite empaquetar
aplicaciones creadas en HTML, CSS y Javascript para las distintas plataformas
mviles (entindase: iOS, Android, Windows Phone, Blackberry ySymbian).
Segn 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 versin Preview
disponible [ingls].
Quieres hacerlo ms poderoso?
No te desanimes si no ves ninguna opcin en los mens para descubrir o
instalar extensiones, esa funcionalidad se est desarrollando actualmente .
Simplemente, descarga las extensiones que te interesen de la lista a
continuacin y cpialas 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 ms completa y actualizada visita la pgina oficial de
extensiones [ingls]. Trataremos de tener esta lista al da.
Edicin de cdigo/texto
Snippets: Asigna atajos de teclado para insertar fragmentos de cdigo
(snippets). Configurable mediante JSON.
String Convert: Proporciona atajos para modificar y codificar cadenas dentro
del editor.
Prefixr: Genera prefijos CSS especficos de cada navegador usando el
servicio Prefixr.
TabToSpace: Convierte el sangrado mediante tabuladores a espacios y
viceversa.
Align Assignments: Alnea los operadores de asignacin (signos de igual).
Generacin de cdigo
App Cache Buddy: Genera y valida los archivos manifest para el cache de
aplicaciones.
Annotate: Genera anotaciones JSDoc para sus funciones (IMPLEMENTACIN
MUY TEMPRANA).
Funcionalidad general
Extension Manager: Instala, elimina y actualiza tus extensiones desde la nube
directo dentro de Brackets(requiere node.js).
Related Files: Detecta y te permite abrir archivos relacionados en tu proyecto.
Open file from url: Abre cualquier url de los atributos href y rel en el editor
mediante el atajo Alt+0. Actualmente solo funciona con archivos existentes.
Desarrollo en vivo
Debugger: Depurador de Brackets para el navegador de Desarrollo en vivo.
Everyscrub: Pulsa Ctrl/Cmd + arrastra el cursor sobre cualquier nmero o
cdigo hexadecimal de color para saturar/desaturar el color y actualizar el
navegador en tiempo real.
Reload in Browser: Aade un botn a la barra de mens y un atajo para
recargar la pgina en el navegador.
V8/Node Live Development: Actualiza los scripts que se ejecutan
en node.js mientras escribes
Edicin visual
Color Picker: Si invocamos la edicin rpida sobre colores hexadecimales abre
un seleccionador de color flotante.
Herramientas externas
GitHub: Implementa la API de GitHub, incluyendo oAuth. Actualmente esta
funcionalidad est limitada a los Gists.
ToGist: Crea un Gist annimo de la seleccin actual.
(El Prefixr mencionado anteriormente).
PhoneGap Build: Su objetivo final es la capacidad de enviar un proyecto
a PhoneGap Build desde Brackets. Todava est en sus primeras etapas de
desarrollo.
Documentacin
MDNLookup: Permite buscar etiquetas HTML en Mozilla Developer Network.
Incluye una manera de crear una barra de herramientas de extensiones y
aadirle botones a la barra mediante callbacks. ATENCIN: Requiere ligeros
cambios al cdigo principal de Brackets.
Optimizado y advertencias
CSSLint: Aplica CSSLint a tus archivos.
JSHint: Elabora un reporte de JSHint.
W3CValidator: Aplica el validador del W3C a tus archivos HTML.
(Tambin la extensin App Cache Buddy ya descrita).
Muy tiles comandos de teclado
Aqu tienes algunos comandos de teclado que merece la pena conocer. La lista
ir creciendo segn se vayan aadiendo funcionalidades.
Ctrl/Cmd+E: Abrir/cerrar el editor flotante.
Alt+Flecha Arriba/Abajo: Desplazarse entre las reglas en el editor flotante.
Ctrl/Cmd+Espacio: Mostrar sugerencias de cdigo, si es aplicable.
Ctrl/Cmd+Maysculas+O: Mostrar el dilogo de Apertura rpida.
Ctrl/Cmd+L: Ir a una lnea en el archivo actual.
Ctrl/Cmd+T: Ir a un mtodo en el archivo actual.
Ctrl/Cmd+Maysculas+H: Mostrar/ocultar la barra lateral.
Ctrl/Cmd+Alt+P: Previsualizar archivo en vivo.