Veamos Que Nos Ofrece Adobe Brackets

28
¡Veamos que nos ofrece Adobe Brackets! Hola linces@s 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. 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. Ahora veamos la estructura visual de Brackets Interfaz de brackets

description

manual de Adobe Brackets

Transcript of Veamos Que Nos Ofrece Adobe Brackets

Page 1: Veamos Que Nos Ofrece Adobe Brackets

¡Veamos que nos ofrece Adobe Brackets!Hola linces@s programadores, siguiendo el orden de mi post sobreeditores de texto para programadoresen esta ocasion veremos las caracteristicas principales de Adobe Brackets, ese editor desarrollado para programadores web. 

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.

Ahora veamos la estructura visual de BracketsInterfaz de 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 rogram Files (x86)BracketssamplesesPrimeros Pasos). 

Page 2: 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

... y hacer clic en Abrir carpeta ... 

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

Page 3: 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. 

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

Page 4: Veamos Que Nos Ofrece Adobe Brackets

escribir el nombre deseado y pulsar Intro ... 

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

Se pueden crear tantas carpetas como sean necesarias: 

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

... escribir el nombre deseado y pulsar Intro ... 

Page 5: 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 

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. 

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. 

Page 6: 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. 

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. 

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. 

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. 

Page 7: Veamos Que Nos Ofrece Adobe Brackets

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. 

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. 

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. 

Page 8: 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. 

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. 

Page 9: Veamos Que Nos Ofrece Adobe Brackets

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

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

Page 10: 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. 

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

Page 11: 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. 

Page 12: 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 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,

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. 

Page 13: Veamos Que Nos Ofrece Adobe Brackets

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

El nuevo valor se mostrará en lugar del anterior. 

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

Page 14: 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. 

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. 

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. 

Page 15: 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… 

 

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

Page 16: Veamos Que Nos Ofrece Adobe Brackets

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.

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.

Gestor de extensiones

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

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. 

Page 17: 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:

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

Page 18: Veamos Que Nos Ofrece Adobe Brackets

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

Page 19: 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. 

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. 

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. 

Page 20: Veamos Que Nos Ofrece Adobe 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 Minimap 

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! 

Brackets File Icons 

Tendremos iconos bastante bonitos en nuestro editor con esta ext! 

FTP-Sync Plus 

Sincronización con nuestro servidor FTP, bastante util. 

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” 

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. 

Page 21: 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. 

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

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. 

Brackets Document Toolbar(with tabs) 

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

Y por supuesto EMMET 

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

y sus comandos 

Page 22: Veamos Que Nos Ofrece Adobe Brackets

Para acceder a mis otros posts 

Page 23: Veamos Que Nos Ofrece Adobe Brackets