Brackets.io
Antes que pregunten: no, no tiene que ver con los brackets de los dientes, pero los chicos hicieron esa conexion mental y me pareció gracioso. 😅
En realidad Brackets es un pequeño editor de texto que nos permite trabajar con documentos web de forma rápida y sencilla.
Este tipo de editores permiten trabajar una gran variedad de lenguajes de programación como Java, C, php y muchos más. Dependiendo la extensión que tenga el archivo, coloreará las palabras especiales y ayudará a visualizar mejor nuestor código.
Este tipo de editores permiten trabajar una gran variedad de lenguajes de programación como Java, C, php y muchos más. Dependiendo la extensión que tenga el archivo, coloreará las palabras especiales y ayudará a visualizar mejor nuestor código.
En éste post, solo tendremos un mini tutorial de las funciones que mas frecuentemente usamos en clase, si les interesa conocer en profundidad esta herramienta les recomendamos ir a la página oficial.
Por empezar debermos ir a la página para descargarlo, es GRATUITO y se instala fácil en cualquier sistema operativo.
Con el botón derecho del mouse sobre el archivo podemos abrir el archivo en brackets (OPEN WITH BRACKETS).
El programa en sí, es un sencillo editor de texto, en el panel de la izquierda podemos cargar múltiples archivos, en el de la derecha vemos el archivo actual. Para ahorrar espacio, podemos ocultar el área de la izquierda arrastrando sobre la línea que divide los paneles.
Texto Predictivo
Los chicos están familiarizados con sistemas predictivos en celulares, lo cual ahorra mucho tiempo al escribir en teclados touch. Por su parte, BRACKETS, tiene una función predictiva que va completando lo que necesitamos, por ejemplo en la imagen vemos que empezamos a escribir <h1 y el programa ya entiende que queremos poner un encabezado, y nos presenta un mini men'u contextual, al hacer click ya nos completa la etiqueta de cierre </h1> y deja el cursor en medio para que escribamos el contenido.
Existen muchas propiedades de estilos que son difíciles de recordar, pero con escribir las 2 primeras letras se nos presenta en el menú la posibilidad de autocompletar sin que terminemos de escribir. Por ejemplo si quisiéramos poner una propiedad en un estilo y sabemos que es color de fondo, BACKGROUND-COLOR escribimos BA y nos mostrará todas las propiedades que empiezan con ese prefijo.
Previsualización WEB
Otra facilidad que nos presenta el software está en el pequeño rayo que está en la esquina superior derecha, al presionarlo abre el navegador web con la página cargada. Cuando hacemos alguna modificación el código, veremos que aparece un circulo junto al icono naranja indicando que necesitamos que la vista de navegador no está actualizada, entonces guardamos el documento (con las teclas CTRL y S o bien en el menú Archivo>Guardar) y brackets recargará la página en el navegador.
Acceso Rápido a Estilos
Todavía no usamos mucho ésta opción porque recién vimos estilos, pero cuando hagamos documentos largos, estaremos editando en el BODY, mientras que los colores y tipos de letra están arriba en el HEAD, dentro del área de STYLE.
Para que no tengamos que ir y volver arriba y abajo (lo cual puede ser bastante molesto), debemos poner el cursor en la etiqueta que queremos modificar, en este caso H1 y luego las teclas CTRL+E que abre una espacio de ese estilo (que está en la parte superior del documento) para poder editarlo sin tener que volver a la parte superior del Archivo.
Pronto aprenderemos algunos otros trucos de Brackets, pero por el momento, son suficientes como para crear o editar los archivos que necesitamos.