Brackets[Editor]

Percy Maldonado Quispe

Jose Pablo Alpaca Rivera

Facultad de Ingenieria y Computación

Ciencia de la Computación
Universidad Católica San Pablo

April 5, 2018

C-COMP (UCSP) Brackets[Editor] April 5, 2018 1 / 12

 ¿Qué es?

¿Qué es?

Brackets es un editor de texto

moderno, liviano y poderoso. Mezcla
herramientas visuales en el editor
para que pueda obtener la cantidad
correcta de ayuda cuando lo desee
sin obstaculizar su proceso creativo.

C-COMP (UCSP) Brackets[Editor] April 5, 2018 2 / 12

 Brackets

Brackets

C-COMP (UCSP) Brackets[Editor] April 5, 2018 3 / 12

 Instalación

Instalación

Ir a la página oficial de Brackets. Descargar .deb (versión deseada).

Nos posicionamos en la carpeta que lo contenga.
Comando.
sudo dpkg -i ./name.deb
Listo!. Podemos utilizar Brackets.

C-COMP (UCSP) Brackets[Editor] April 5, 2018 4 / 12

 Caracteristicas

Caracteristicas

Vista previa y edición rápida.

C-COMP (UCSP) Brackets[Editor] April 5, 2018 5 / 12

 Caracteristicas

Caracteristicas

Vista previa y edición rápida.

Construido con la web para la web.

C-COMP (UCSP) Brackets[Editor] April 5, 2018 5 / 12

 Caracteristicas

Caracteristicas

Vista previa y edición rápida.

Construido con la web para la web.
Un editor de código para la web. Centrarse en una cosa, y hacerlo
muy bien.

C-COMP (UCSP) Brackets[Editor] April 5, 2018 5 / 12

 Caracteristicas

Caracteristicas

Vista previa y edición rápida.

Construido con la web para la web.
Un editor de código para la web. Centrarse en una cosa, y hacerlo
muy bien.
Las herramientas no deben ser obstáculo. Brackets se centra en la
prestación de “edición rápida“, vistas en lı́nea que proporcionan
acceso contextual a su contenido.

C-COMP (UCSP) Brackets[Editor] April 5, 2018 5 / 12

 Caracteristicas

Caracteristicas

Vista previa y edición rápida.

Construido con la web para la web.
Un editor de código para la web. Centrarse en una cosa, y hacerlo
muy bien.
Las herramientas no deben ser obstáculo. Brackets se centra en la
prestación de “edición rápida“, vistas en lı́nea que proporcionan
acceso contextual a su contenido.
Funciona con el navegador. El navegador es su punto de vista del
diseño. Brackets conecta directamente en el navegador.

C-COMP (UCSP) Brackets[Editor] April 5, 2018 5 / 12

 ¿Por qué utilizar Brackets?

¿Por qué utilizar Brackets?

Vista previa dinamica.

Dedicado al desarrollo
web con html, css y
javascript.

C-COMP (UCSP) Brackets[Editor] April 5, 2018 6 / 12

 Caso de Estudio

Caso de Estudio

Implementaremos un archivo index.html sencillo para que en el

proceso nos demos cuenta de las funcionalidades de brackets.
Implementaremos un archivo main.css, cabe resaltar que este mismo
puede ser accedido directamente desde index.html presionando
ctrl+E.
Uso de Javascript para los gráficos.

C-COMP (UCSP) Brackets[Editor] April 5, 2018 7 / 12

 Editor

HTML

Figure: Estructura .html

C-COMP (UCSP) Brackets[Editor] April 5, 2018 8 / 12
 Editor

CSS

Figure: Estilos Ctr+E sobre el selector

C-COMP (UCSP) Brackets[Editor] April 5, 2018 9 / 12

 Editor

CSS

Figure: Escoger Color RGB

C-COMP (UCSP) Brackets[Editor] April 5, 2018 10 / 12

 Editor

Web

Figure: Navegador al Editor

C-COMP (UCSP) Brackets[Editor] April 5, 2018 11 / 12
 FIN!

FIN!

GRACIAS POR SU ATENCIÓN, NO SE

PERMITE PREGUNTAS!

C-COMP (UCSP) Brackets[Editor] April 5, 2018 12 / 12