Brackets es un editor de código abierto de HTML y CSS que facilita la inserción de rutas de archivos y la identificación de errores. En este artículo, exploraremos cómo aprovechar al máximo este editor, desde su instalación y configuración hasta el uso de atajos de teclado y extensiones para optimizar tu flujo de trabajo.
Instalación y Configuración Inicial
Debes 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.
Para aumentar el tamaño de la fuente, ve al menú superior Ver > Temas. Saldrá una pantalla con el tamaño de la letra, y ahí podrás cambiarla al que prefieras. También existen temas para Brackets, que puedes descargar desde Gestionar Extensiones.
Extensiones Esenciales para Brackets
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. La única pega es que la información de cada extensión viene en inglés y no es demasiado clara.
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.
Con la extensión de Beautify, la indentación se aplica automáticamente tanto en el HTML como el CSS. Para una mejor comprensión del HTML o del CSS, este código debe tener diferentes márgenes o sangrados. Con esta extensión vas a poder tener tu código indentado correctamente.
Otras Extensiones Recomendadas:
- W3CValidation: Para facilitar la identificación de errores.
- CSSLint: Para facilitar la identificación de errores.
brackets , aprender 12 extensiones que te harán la vida más fácil 2021
Atajos de Teclado Útiles en Brackets
La intención de este tutorial NO es decir absolutamente todos los atajos de teclado, sino nombrar algunos de los más útiles, además de herramientas interesantes o consideraciones a tener en cuenta.
- Este es el atajo de teclado que abre el camino a todos los demás atajos. Básicamente despliega un popup de búsqueda en el que puedes buscar cualquier acción. Si la acción buscada tiene asociado un atajo de teclado, éste se mostrará.
- Abrir preferencias con [⌘ ,] ó [Ctrl + Alt + S] en Windows.
Si se pulsa Ctrl+E cuando el cursor está en algunos elementos se activa la edición rápida.
En la vista previa en el navegador se resalta el elemento que se está editando en Brackets, pero la vista previa no avanza o retrocede automáticamente cuando se edita un elemento posterior o anterior que antes no estaba a la vista.
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.
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.
Edición Rápida y Vista Dinámica
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.
Símbolos y Signos Ortográficos en Inglés
Si en tu oficina, en las reuniones de trabajo o con tus amigos te tienes que manejar en inglés, te vendrá bien conocer los signos y los símbolos del teclado en inglés. Es una de esas cuestiones que no solemos plantearnos hasta que llega el momento de utilizarlos.
Por eso, te vamos a dejar aquí algunos términos para que los tengas siempre a mano y puedas sorprender a tu cliente con un buen uso de los signos ortográficos más comunes en inglés.
Puntuación:
- Full stop / Period: Punto final.
- Dot: Punto en URLs y correos electrónicos.
- Point: Separador decimal.
- Colon: Dos puntos (:).
- Semicolon: Punto y coma (;).
- Ellipses: Puntos suspensivos (…).
- Middle dot / Interpunct: Punto medio (·).
Guiones:
- Hyphen: Guion (-).
- En dash: Guion medio (-).
- Em dash: Raya (-).
Comillas:
- Double angle quotation marks / Guillemet: Comillas españolas (« »).
- Double quotation marks: Comillas inglesas (“ ”).
- Single quotation marks: Comillas rectas simples (‘ ‘).
- Quotation marks: Comillas rectas dobles o tipográficas (" ").
Paréntesis y Corchetes:
- Parenthesis / Round brackets / Brackets: Paréntesis ( ).
- Brackets / Square brackets: Corchetes [ ].
- Curly brackets / Curly braces: Llaves { }.
Otros Símbolos:
- Ampersand: Signo "&".
- Slash: Barra inclinada (/).
- Backslash: Barra invertida (\).
- At: Arroba (@).
Con esta información, estarás mejor preparado para comunicarte eficazmente en inglés y resolver cualquier duda relacionada con los símbolos del teclado.
Alternativas a Brackets
Sublime Text es otro de los editores HTML y CSS muy utilizados.Gestión de Carpetas y Proyectos
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 Brackets es más sencillo: archivo -> abrir carpeta y seleccionamos la que queramos.
Estructura HTML con Emmet
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.
Texto de Relleno con Lorem Ipsum
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.