Facebook Twitter RSS Reset

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!


¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Hola [email protected] programadores, siguiendo el orden de mi post sobreeditores de texto para programadores en esta ocasion veremos las caracteristicas principales de Adobe Brackets, ese editor desarrollado para programadores web.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Entre sus características principales tenemos:

  • Te permite editar rápidamente tus hojas de estilo CSS directamente en tu documento HTML en un editor flotante, sin necesidad de abrir el archivo separadamente.
  • Muestra sugerencias de código 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 código HTML/CSS mientras ves los cambios en tiempo real en tu navegador (actualmente sólo funciona con Google Chrome).
  • Está creado con estándares 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.
editor

Ahora veamos la estructura visual de Brackets

Interfaz de brackets

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

El árbol de archivos

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.. Al instalar Brackets se muestra la carpeta de ejemplo “Primeros pasos” (en Windows, C¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!rogram Files (x86)BracketssamplesesPrimeros Pasos).

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Pero yo no quiero tener mi carpeta alli, asi que la cambiare

Cambiar la carpeta raíz del árbol de archivos

Para cambiar la carpeta raíz del árbol de archivos, hay que hacer clic en el nombre del árbol de archivos …

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

… y hacer clic en Abrir carpeta …

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

… seleccionar la carpeta del disco en la que tengamos o vayamos a tener nuestras páginas, y hacer clic en el botón Seleccionar carpeta. En la captura se ha seleccionado la carpeta Mis documentos > LMSGI Nombre > HTML CSS.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

En el árbol de archivos se mostrará el nombre y contenido de la carpeta elegida. Como en este caso es una carpeta vacía, no se muestra el área de trabajo.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Crear una carpeta

Para crear una carpeta, se puede hacer clic derecho en el contenido del árbol de archivos y elegir la opción Nueva carpeta …

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

… escribir el nombre deseado y pulsar Intro …

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Una vez creada la carpeta, se mostrará en el árbol de archivos:

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Se pueden crear tantas carpetas como sean necesarias:

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Crear un archivo

Para crear un archivo en una carpeta, se puede hacer clic derecho en el contenido del árbol de archivos y elegir la opción Nuevo archivo …

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

… escribir el nombre deseado y pulsar Intro …

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Una vez creado el archivo, se mostrará en el árbol de archivos. El archivo se abre automáticamente en el editor, por lo que se añade al área de trabajo y se muestra su contenido

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Haciendo clic en los triángulos situados a la izquierda de los nombres de las carpetas se pueden plegar (ocultar) o desplegar (mostrar) su contenido.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

editor

El área de trabajo

El área de trabajo sólo está visible cuando se han abierto archivos en Brackets. En el ejemplo siguiente, el área de trabajo no es visible, pero se pueden ver los archivos existentes en el árbol de archivos.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Haciendo clic en cualquier archivo del árbol de archivos, este se abre en el área de edición y se muestra su nombre en el área de trabajo.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Brackets puede tener abiertos varios documentos a la vez. Los nombres de todos los documentos abiertos se muestran en el área de trabajo. Haciendo clic en el nombre del archivo en el área de trabajo, este se mostrará en el área de edición.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Los nombres de archivos en el área de trabajo se muestran en el mismo orden en que se abrieron los archivos. Si se quiere modificar ese orden, se puede hacer clic en el icono de la rueda dentada del área de trabajo.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

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. Haciendo clic en ese aspa, el archivo se cerrará y su nombre dejará de mostrarse en el área de trabajo.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

cualidades

Dividir pantalla

Desde la versión Brackets 44 (octubre de 2014), Brackets permite ver dos documentos simultáneamente en el área de edición.

Para ello, primero hay que hacer clic en el icono de división del área de trabajo y elegir el tipo de división: sin división, división vertical o división horizontal.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Al elegir un tipo de división, el área de trabajo y el área de edición se dividirán en dos paneles. Para dar el foco a uno de los dos paneles, hay que hacer clic en él.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Al hacer clic en un nombre de archivo, el archivo se abrirá en el panel que tenga el foco. El nombre del archivo abierto se mostrará en el área de trabajo.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Lo que no es posible actualmente (septiembre de 2015) es abrir el mismo archivo en los dos paneles a la vez, aunque los desarrolladores lo tienen en consideración.

Se puede mover un archivo de un panel a otro arrastrándolo en el área de trabajo.

editor

Ver páginas web en el navegador

Mientras se escriben las páginas web en Brackets es conveniente ir viendo el resultado en el navegador. Tenemos dos alternativas:

  • abrir las páginas como archivos (sin pasar un servidor) en el navegador que prefiramos
  • utilizar la vista previa en vivo de Brackets para ver las páginas en Google Chrome (pasando por el servidor incluido en Brackets)

Abrir páginas en el navegador

Para abrir una página en el navegador que prefiramos, hay que hacer clic derecho en el nombre del archivo (en el área de trabajo o en el árbol de archivos) y elegir la opción Mostrar en el Explorador.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Se abrirá el explorador de Windows en la carpeta en la que se encuentre la página.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

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. En la barra de dirección del navegador podemos ver el prefijo file:/// que nos indica que la página se ha abierto como archivo (sin pasar por un servidor).

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Si modificamos la página web en Brackets, para ver la versión actualizada en el navegador hay que guardar el archivo en Brackets y actualizar la página en el navegador.

Vista previa en vivo en el 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. Para ello hay que hacer clic en el icono de Vista previa en vivo.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Se abrirá Google Chrome mostrando el documento. En la barra de dirección del navegador podemos ver la dirección 127.0.0.1 que nos indica que la página se ha abierto en un servidor local (incluido en Brackets).

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

A partir de ese momento, las modificaciones en el documento se mostrarán inmediatamente en el navegador sin necesidad de actualizar el contenido. El elemento que se está editando en Brackets se muestra en Google Chrome con un borde azul.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Para desactivar la Vista previa en vivo hay que hacer clic en el icono de Vista previa en vivo.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

A partir de ese momento, las modificaciones en el documento no se mostrarán en el navegador hasta que no se guarde el documento y se actualice el contenido en el navegador (o se vuelva a activar la Vista previa en vivo).

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

A partir de Brackets 1.1 se puede configurar Brackets de manera que la vista en vivo abra el navegador predeterminado (Chrome, Firefox, IE, etc.), pero no está activada por defecto (quizás porque no funciona correctamente en todos los casos).

Para hacerlo, es necesario abrir el archivo de preferencias (brackets.json) mediante la opción de menú Desarrollo > Abrir archivo de preferencias y añadir la opción:

“livedev.multibrowser”: true,
editor

Configuración

Sangría

La sangría que se recomienda utilizar en este curso es de 2 espacios. Para configurar Brackets de esa manera, hay que hacer clic en el número que se muestra en la parte inferior derecha de la ventana (es necesario tener algún archivo abierto en el área de trabajo.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Se podrá editar el valor. Hay que cambiarlo a 2 y pulsar Intro.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

El nuevo valor se mostrará en lugar del anterior.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Editar en Brackets

Plegado de código (Code Folding)

A partir de la versión Brackets 1.3 (publicada el 17 de abril de 2015) se ha incorporado a Brackets la antigua extensión Code Folding(de Patrick Oladimeji), que permitía plegar secciones de código.

Desde esa versión, Brackets muestra muestra unos triángulos en las secciones de código susceptibles de ser plegadas (etiquetas que incluyen varios elementos, etiquetas cuyo contenido abarca 3 o más líneas, etc.).

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Haciendo clic en los triángulos, la sección se pliega y el triángulo cambia de orientación.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Para restaurar la sección, se puede hacer clic en el triángulo o en el icono situado entre las etiquetas de la sección plegada.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Sugerencias de código y edición rápida de CSS

Como en la mayoría de los editores web, notarás que Brackets te da pistas en caso de que no recuerdes algún atributo o etiqueta HTML (¿Quién 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 código emergentes, facilitándote la creación de contenidos y acelerando tu flujo de trabajo.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

La estrella del show en Brackets es la Edición rápida de las reglas CSS aplicadas a cualquier etiqueta HTML. Basta con que sitúes 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, sólo tienes que seleccionar la regla que deseas editar a la derecha, haciéndole clic o con el teclado mediante Alt+Flecha Arriba/Abajo y proceder a editarla. Pan comido, diríamos…

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

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 selección o modificación 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 edición gráfica, por lo que es muy seguro que la sepas utilizar y que le sacarás el máximo provecho con tan sólo colocar el cursor en la propiedad color o en cualquier valor de color en tus reglas CSS y pulsar Ctrl/Cmd+E. ¿Quién necesita paneles de herramientas?.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

cualidades

Otras funcionalidades interesantes

Además de todo lo ya comentado, el programa cuenta con algunas funcionalidades incluidas:

  • Buscar/Reemplazar usando Edición > Reemplazar (Edit > Replace) o mediante el teclado con (Ctrl/Cmd+H) y Buscar en archivos usando Edición > Buscar en archivos (Edit > Find in files) o mediante el teclado con (Ctrl/Cmd+Mayúsculas+F).
  • De manera predeterminada, Brackets ejecuta la herramienta de análisis de calidad de código Javascript JSLint [inglés] en todos los archivos JS. Si ves una estrella dorada en la barra de información 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ú Visualización > Habilitar JSLint (View > Enable JSLint).
  • Abrir archivos mediante arrastrar y soltar
  • Abrir archivos rápidamente usando Navegación > Apertura rápida (Navigate > Quick Open) o mediante el teclado (Ctrl/Cmd+Mayúsculas+O). Esto te mostrará un listado de los documentos existentes en la carpeta en la que trabajas.
  • Ir a una definición de un método en particular en el documento usando Ctrl/Cmd+T o ir a un número de línea específica presionando Ctrl/Cmd+G.
¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Algunos comandos de teclado

Aquí tienes algunos comandos de teclado que merece la pena conocer.

  • 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 código, si es aplicable.
  • Ctrl/Cmd+Mayúsculas+O: Mostrar el diálogo de Apertura rápida.
  • Ctrl/Cmd+L: Ir a una línea en el archivo actual.
  • Ctrl/Cmd+T: Ir a un método en el archivo actual.
  • Ctrl/Cmd+Mayúsculas+H: Mostrar/ocultar la barra lateral.
  • Ctrl/Cmd+Alt+P: Previsualizar archivo en vivo.

brackets

Gestor de extensiones

El menú Archivo > Gestionar extensiones … o el icono Gestor de extensiones abren la ventana del Gestor de extensiones

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

El Gestor de extensiones permite instalar extensiones y temas en Brackets, así como actualizar o desinstalar las extensiones ya instaladas. Para cerrar el gestor de extensiones hay que hacer clic en el botón Cerrar.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Instalar extensiones

Para instalar una extensión, se puede escribir su nombre en el cuadro de búsqueda y hacer clic en el botón Instalar:

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Una vez instalada se mostrará una ventana con el resultado de la instalación.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Las extensiones ya instaladas pueden verse en la pestaña instaladas del gestor de extensiones.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Desinstalar extensiones

Para desinstalar una extensión hay que abrir el Gestor de extensiones y en la pestaña de las extensiones instaladas hacer clic en el botón Eliminar de la extensión que se desea desinstalar.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Actualizar extensiones

Si se han publicado nuevas versiones de alguna de las extensiones instaladas, Brackets mostrará el icono del Gestor de extensiones en color verde.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

El gestor de extensiones muestra en la pestaña de extensiones instaladas el número de extensiones pendientes de actualizar al princicpio de la lista. Para actualizar las extensiones, hay que hacer clic en el botón Actualizar.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

brackets

Ahora que ya conocemos las características mas resaltantes de brackets ¡vamos a instalar extensiones interesantes!

Los principal… Donde carajos esta nuestro amado MINIMAP????

Pues nada, tenemos una extension para ello ¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Minimap

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

cualidades

Interactive Linter

Este nos sirve para que el editor nos diga cuando tenemos un error en nuestro codigo, es compatible con JSHint, JSLint, ESLint, JSCS, CoffeeLint, y mas!

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Brackets File Icons

Tendremos iconos bastante bonitos en nuestro editor con esta ext!

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

FTP-Sync Plus

Sincronización con nuestro servidor FTP, bastante util.

editor

Autosave Files on Windows Blur

Guardar Cambios Automáticamente Al Cambiar De Ventana

En el caso de este plugin, cada vez que seleccione una ventana que no sea la de Brackets, los archivos se guardan automáticamente. Esto es perfecto para cualquier programador o desarrollador, ó al menos para aquellos que estén cambiando entre programas de editor de imagen, navegador, u otra aplicación que manejen.

Los archivos LESS se compilan y luego se guardan, esto ahorra un poco de tiempo, y no se desgastan las teclas “Ctrl” y “S”

cualidades

Document Outliner

Si está trabajando en un archivo de HTML5, de seguro te parecerá interesante este complemento. Se crea un “esquema” de su documento basado en cosas como nav, header, sección, y las etiquetas de pie de página. Puede acceder a este esquema a través de un panel de navegación de documentos rápida y fácil.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Reopener

Necesitas rápidamente volver a abrir un archivo que acaba de cerrar? Reopener llega para ayudarte. Sólo tienes que ir a “Archivo> Volver a abrir pestaña cerrada”, o pulse “CTRL + ALT + W” y listo, tu archivo será abierto rápidamente.

brackets

RightClickExtended

En la mayoría de aplicaciones al dar click derecho encontraras una serie de opciones que puedes encontrar, estas son las mas usadas, como Copiar, Cortar y Pegar, desafortunadamente, Brackets no trae esta serie de opciones ¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!¡A Programar! ¡Veamos que nos ofrece Adobe Brackets! Al parecer alguien del equipo primero se pone los zapatos y luego las medias 😀 Es triste que tenga que existir un plugin para esto, pero lo puedes encontrar aquí.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Sidebar Plus

Esta extensión oculta la barra lateral con un simple atajo de teclado para esos momentos en los que desea concentrar toda tu atención en un solo archivo. Nota: Si usted tiene la extensión Brackets Tabs instalado, oculta los mismos.

editor

Brackets Document Toolbar(with tabs)

Extension que añade una nueva barra de herramientas con una lista de todos los documentos abiertos(tabs)

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Y por supuesto EMMET

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

Nota: el editor del gif es Sublime text, pero no cambia mucho en Brackets

y sus comandos

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

editor

Para acceder a mis otros posts hagan click en las imagenes

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

editor

Eso fue todo, ya saben si tienen dudas déjenla en comentarios, o envienme MP y den fav, reco, y puntos y estaré haciendo mas de estos posts.

¡A Programar! ¡Veamos que nos ofrece Adobe Brackets!

No comments yet.

Leave a Comment