Cómo Crear una Página Web con Brackets: Tutorial Completo

Brackets es un editor de código abierto de HTML y CSS que destaca por su facilidad de uso y funcionalidades innovadoras. Este editor, surgido de una comunidad paralela al trabajo en Edge, ofrece a los desarrolladores una herramienta potente y gratuita para la creación y edición de páginas web.

A continuación, te guiaremos paso a paso para que puedas instalar, configurar y aprovechar al máximo este editor.

Instalación de Brackets

En primer lugar, vamos a explicar brevemente como instalar Brackets a fecha de hoy. Posiblemente puede variar más adelante, pero en cualquier caso la instalación es muy sencilla, solo sigue los pasos y deja las opciones por defecto.

Debes a ir a la página oficial de Brackets io para descargar este editor de textos HTML y CSS. Si no lo tienes instalado, desde la página oficial de Brackets haz clic en el botón para descargar el archivo de instalación: Download Brackets 1.x. 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.

Primeros Pasos y Configuración Básica

Por defecto se inicia con un archivo index.html y una hoja de estilo main.css. Estarán agrupados en la carpeta Primeros pasos.

Para crear nuestra propia carpeta haz clic sobre el menú Archivo y luego en Abrir carpeta, se abrirá la ventana del explorador de archivos para que elijas una carpeta, busca la carpeta ejercicios que creaste en el primer ejercicio paso a paso de esta unidad. Si no la creaste, pulsa en el botón Nueva carpeta y créala ahora.

Para crear un archivo pulsa en Nuevo del menú Archivo.

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. 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.

NOTA: Ruta alternativa: debajo del icono del rayito también encontrarás la opción Gestionar extensiones. 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.

Bueno, en realidad te he buscado un artículo donde te hablan un poquito de las mejores extensiones, que lo mismo te sirve de guía. Te recomendamos instalar en Brackets la extensión "Pestañas.

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.

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.

Funcionalidades Clave de Brackets

Una vez que tenemos la estructura, dentro del body habrá que poner las etiquetas de diseño web que necesitamos. 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.

Vista Previa Dinámica

Esto me parece de lo mejor: 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. 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. NOTA: Para ver la vista previa dinámica, pulsa en el icono del rayito que verás arriba a la derecha del programa.

Edición Rápida y Otras Características

• 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 - en el ejemplo de la captura serían las etiquetas main, body y html. Esto a mí me encanta.
• 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.
• 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.
• Por último, si te fijas, te dice en qué líneas del código se repite esa etiqueta, para localizarla más rápidamente. En el caso de la captura, en las líneas 71 (la actual) y en la 86.

Otras Funcionalidades

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?

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. Otra opción es, arriba a la izquierda, aparece el nombre de la carpeta que tienes abierta actualmente.

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.

Antes de dejarte, buenas noticias: si te has quedado con ganas de saber más y sabes inglés, aquí tienes una guía oficial.

tags: #como #hacer #una #pagina #web #en