Guía Completa de Brackets: El Editor de Código HTML y CSS

Brackets es un editor de código abierto, especialmente diseñado para el desarrollo web con HTML y CSS. Fue desarrollado principalmente por Adobe Systems, conocidos por productos como Photoshop y Dreamweaver. En 2021, un grupo de voluntarios creó una bifurcación de Brackets, continuando su desarrollo. En este artículo, exploraremos a fondo este editor, desde su instalación hasta sus funcionalidades más avanzadas.

Lo descubrí gracias a mi profesor de web, Antonio Elías, en el Máster de Marketing, Publicidad y Diseño que he cursado durante 2018/2019. La cuestión es que a través del trabajo que se estaba haciendo en este editor de texto open code, surgió una comunidad que se llamó Brackets y que fue trabajando en paralelo a Edge. ¿Por qué? Porque es un editor muy bueno.

Historia de Brackets

La primera versión beta de Brackets se publicó en diciembre de 2011. Brackets 1.0 se publicó en noviembre de 2014. Antes de la versión 1.0 tenía un ritmo de desarrollo muy rápido (cada mes se publicaba una nueva versión de Brackets). En otoño de 2015 el equipo de desarrollo de Brackets de Adobe anunció que durante unos 9 meses se iban a dedicar a desarrollar una nueva versión de Dreamweaver, el editor web comercial de Adobe, basada en Brackets y que pasado ese tiempo volverían a trabajar en Brackets. Dreamweaver 17, cuyo interfaz ya está basado en el de Brackets, se publicó en noviembre de 2016 pero, por desgracia, esa vuelta no se produjo y el desarrollo de Brackets ha ido apagándose. Entre 2015 y 2018 el ritmo de desarrollo de Brackets se ralentizó pasando a una nueva versión cada cuatro meses aproximadamente, hasta detenerse a partir de 2018.

Primeros Pasos con Brackets

Debes a ir a la página oficial de Brackets io para descargar este editor de textos HTML y CSS. A continuación, la instalación de Brackets es fácil y no tiene mayor misterio. ¡Ya tienes Brackets instalado!. Nada más abrirlo, te saldrá un documento con el fondo en blanco y una pequeña Guía de Primeros Pasos. Escrita, como puedes ver en la siguiente captura, en HTML.

El siguiente paso va a ser configurar las extensiones, para que se haga un editor todavía más potente. Funciona como las extensiones del Google Chrome, y puedes instalar las que más te convengan. Es tan fácil como dar al botón Instalar que aparece al lado de cada una de ellas.

Una vez instalado, es importante familiarizarse con su interfaz. El árbol de archivos muestra todos los archivos y carpetas que contiene una determinada carpeta, normalmente la carpeta de trabajo que contiene nuestras páginas web. Para seleccionar una carpeta, haz clic en el árbol de archivos, selecciona la carpeta del disco en la que tengamos o vayamos a tener nuestras páginas, y haz clic en el botón Seleccionar carpeta. En el árbol de archivos se mostrará el nombre y contenido de la carpeta elegida.

Área de Trabajo

Brackets puede tener abiertos varios documentos a la vez. Los nombres de todos los documentos abiertos se muestran en el área de trabajo. Los nombres de archivos en el área de trabajo se muestran en el mismo orden en que se abrieron los archivos. Al situar el cursor sobre el nombre de un archivo en el área de trabajo se muestra un icono en forma de aspa a la izquierda del nombre.

División de Paneles

Desde la versión Brackets 44 (octubre de 2014), el área de edición se puede dividir en dos paneles, lo que permite ver dos documentos, uno en cada panel. Al elegir un tipo de división, el área de trabajo y el área de edición se dividirán en dos paneles. Al hacer clic en un nombre de archivo, el archivo se abrirá en el panel que tenga el foco.

Características Destacadas de Brackets

• Resaltado de Sintaxis: Cuando haces clic en una etiqueta de HTML, marca en verde principio y fin si está bien cerrada; de lo contrario, marca todas las etiquetas posteriores en rojo.
• Vista Previa de Color: Dentro del propio código CSS, pasando el cursor por encima del código hexadecimal, puedes ver una vista previa del color que estás aplicando.
• Edición Rápida de CSS: Dentro del HTML, si hacemos clic en la etiqueta h1, h2, p, etc, y hacemos Ctrl +E (Windows) o Comando + E (Mac), se despliega el CSS que tienen esos títulos.
• Localización Rápida de Etiquetas: Si te fijas, te dice en qué líneas del código se repite esa etiqueta, para localizarla más rápidamente.
• Vista Previa en Vivo: No hace falta guardar el archivo y subirlo a ningún sitio, podemos ver la preview online EN NUESTRO SERVIDOR WEB LOCAL, por eso en la URL sale nuestra IP.

También existen temas para Brackets, que puedes descargar desde Gestionar Extensiones. Aumentar el tamaño de la fuente desde el menú superior Ver Temas. Saldrá una pantalla con el tamaño de la letra, y ahí podrás cambiarla al que prefieras.

Mientras se escriben las páginas web en Brackets es conveniente ir viendo el resultado en el navegador. Haciendo doble clic en el archivo, se abrirá la página en el navegador predeterminado. Haciendo clic derecho y eligiendo la opción Abrir con ... podemos elegir otro navegador.

Una de las características más interesantes de Brackets es la posibilidad de ver en Google Chrome las páginas al tiempo que se editan. Se abrirá Google Chrome mostrando el documento. A partir de ese momento, las modificaciones en el documento se mostrarán inmediatamente en el navegador sin necesidad de actualizar el contenido. NOTA: Para ver la vista previa dinámica, pulsa en el icono del rayito que verás arriba a la derecha del programa.

Te refleja los cambios hechos en el código, en directo, sin tener que guardar nada, por eso me recuerda un poco al Inspector de código de Chrome.

Extensiones Esenciales para Brackets

Brackets cuenta con una gran cantidad de extensiones que amplían su funcionalidad. La única pega es que la información de cada extensión viene en inglés y no es demasiado clara.

Emmet

En este caso concreto, vamos a buscar Emmet, una extensión de Brackets que según nos dijo nuestro profe, es muy utilizada en varios editores, no solo este. La extensión Emmet tiene muchísimas funcionalidades, pero la más interesante es que gracias a esta ella, cuando escribes html:5 (siempre con la opción de HTML seleccionada en el desplegable de la parte inferior derecha) le das al tabulador y aparece toda la estructura HTML 5 del documento. Este es el esqueleto básico en HTML de la página, pero obviamente, hay que llenarla de texto, imágenes, etc. En otras palabras: maquetarla.

Básicamente se trata de escribir todo el código, abreviado, en una sola línea, y el Brackets editor hace el resto. Por ejemplo, escribes que quieres una cabecera, un contenedor principal y un pie de página tal como aparece en la captura. Pero si escribes código > otro código, con esto estás diciendo al editor HTML que te cree una etiqueta dentro de otra. Y a su vez puedes agruparlas entre paréntesis e indicar cuántas quieres de cada.

Como ves, con esta última opción, básicamente has hecho toda la página tan solo escribiendo una línea: tienes un H1 y un H2 dentro del header, y dentro de la sección principal has puesto la etiqueta de dos H2 y dos párrafos. Incluso has creado una lista. Y has dicho también que dentro del footer te cree un párrafo. ¡No me digas que no es genial! NOTA: Un buen consejo que nos dio mi profesor es que las primeras veces que uses el editor de código, para ir cogiendo el tranquillo, lo dupliques y dejes comentada la fórmula que has visto que funciona.

Beautify

Con esta extensión vas a poder tener tu código indentado correctamente. Si no sabes lo que quiero decir, con indentar me refiero a que cuando escribes código, hay unas jerarquías, unas secciones dentro de otras, que a su vez tienen dentro atributos… Para una mejor comprensión del HTML o del CSS, este código debe tener diferentes márgenes o sangrados. Lo bueno es que con la extensión de Beautify, la indentación se aplica automáticamente tanto en el HTML como el CSS.

Otras Extensiones Recomendadas

Para facilitar la identificación de errores, se recomienda instalar las extensiones W3CValidation y CSSLint de Brackets.

Brackets vs. Sublime Text

Sublime Text es otro de los editores HTML y CSS muy utilizados. En Brackets solo podemos tener abierta una carpeta, que será la que considera como la del proyecto. Todo lo que quieras guardar, ya lo guarda directamente ahí, no tienes que ir buscando. En Sublime nos íbamos a Folder -> add folder cada vez que queríamos abrir la carpeta de otro proyecto. En Brackets es más sencillo: archivo -> abrir carpeta y seleccionamos la que queramos.

En Sublime poníamos el documento en HTML (desde el desplegable de opciones de abajo a la derecha), escribíamos html, dábamos al tabulador, y se nos montaba el armazón de la página. En Brackets recuerda que tienes que poner html:5.

Para terminar, si tienes que rellenar tu página con texto Lorem ipsum, usando Sublime Text tendrás que ir a un generador de Lorem y copiar/pegar. Pero en Brackets io basta con poner lorem, darle a tabulador y ya te inserta un párrafo de relleno.

Destacando sobre todo la edición rápida de etiquetas y la vista dinámica a tiempo real. Dos características que no tiene Sublime. Y además es un editor Open Source, es decir, una herramienta de código abierto y gratuito.¿Qué más se puede pedir?

Si te has quedado con ganas de saber más y sabes inglés, aquí tienes una guía oficial. ¡Ah!

tags: #brackets #programa #html