EXPLICACIÓN DEL SOFTWARE BRACKETS SIGUENOS EN :) : ➤ FACEBOOK : https://www.facebook.com/Dise%C3%B1o-... ➤ BLOGGER: http://dwujfsc2018.blogspot.com/2018/... ➤ YOUTUBE : https://www.youtube.com/watch?v=2awq_BT4Oko&feature=youtu.be

1. Diseño de páginas Web
SESIÓN 03
Brackets

2. Contenido
 ¿Qué es Brackets ?
 Cacteristicas
 Interfaz
 Área de trabajo – Vista dividida
 Vista previa en vivo
 Extensiones
 Instalar y Desinstalar Extensiones
 Menú Buscar
 Menú Emmet
 Conclusión

3. ¿Qué es Brackets ?
 Brackets es un editor de código fuente con
un enfoque principal en el desarrollo web .
 Se caracteriza por su interfaz sencilla, su
peso mínimo, su soporte para pre-
procesadores de texto y sus innumerables
extensiones que mejoran su funcionalidad .

4. Características
 Brackets proporciona varias
características que incluyen:
 Edición rápida
 Documentos rápidos
 Vista previa en vivo
 MENOS soporte
 Código abierto
 Extensibilidad

5. Interfaz

6.  En el área de trabajo encontramos los archivos abiertos.
 Vista dividida: Esta función divide la vista principal en dos
partes. Los usuarios pueden dividir la vista en vertical u horizontal
según su propia conveniencia, lo que permite a los usuarios
trabajar en dos archivos al mismo tiempo.
Área de Trabajo
Vista dividida

7.  Cuando se hace clic en el fragmento de código respectivo
en CSS / HTML, el navegador web muestra inmediatamente el
resultado relacionado con ese fragmento de código en el navegador
web.
Vista Previa en Vivo
 Esta
característica
se denomina
Resaltado en
vivo.

8.  Las extensiones permiten
ampliar las capacidades de
Brackets. Normalmente,
cada extensión realiza una
tarea muy concreta.
Extensiones

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

10.  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.
Instalar Extensiones

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

12.  Para instalar una extensión, se puede escribir su nombre en el
cuadro de búsqueda y hacer clic en el botón Instalar:
Instalar Extensiones
 Una vez instalada
se mostrará una
ventana con el
resultado de la
instalación.

13.  Para instalar una extensión, se puede escribir su nombre en el
cuadro de búsqueda y hacer clic en el botón Instalar:
Instalar Extensiones
 Una vez instalada
se mostrará una
ventana con el
resultado de la
instalación.
 Las extensiones
ya instaladas
pueden verse en
la pestaña
instaladas del
gestor de
extensiones.

14.  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.
Desinstalar Extensiones

15.  Una vez marcadas todas las extensiones que se quieren
desinstalar, hay que hacer clic en el botón Cerrar.
Desinstalar Extensiones
 Se mostrará una
ventana de
confirmación. Para
desinstalar las
extensiones, hay
que hacer clic en
el botón Eliminar
extensiones y
recargar.

16.  Escribir lo que deseamos buscar
Menú Buscar
 Si deseamos que diferencie entre MAYÚSCULAS y MINÚSCULAS
daremos click a:

17.  Buscará un texto y lo reemplazara por otro.
Menú Buscar - Reemplazar
Reemplazará una por
una las ocurrencias.
Reemplazará las 12
ocurrencias
En esta ventana
podremos marcar y
desmarcar las
ocurrencias que
queremos remplazar.

18.  Facilita y agiliza la escritura de código..
Menú Emmet – Toggle
Comment
Toggle comment Comenta la etiqueta

19. Menú Emmet –
Balance(outward)
 Expandir selección.

20. Conclusión
 Para concluir, este programa adquirido por Adobe nos facilita el
momento de programar. Desde el simple tema de colores para las
letras del código hasta la complejidad de las extensiones que
podemos añadir o el uso de edición en vivo . Son características
que nos ofrece este editor completamente gratuito, se organiza
fácilmente a través de carpetas para separar los proyectos,
organizarlos y así poder encontrar tus archivos más fácil.