Configuración inicial del nuevo editor potente de texto para el desarrollo de aplicaciones Web.

1. Puesta a punto Brackets 14 de diciembre de 2015
ID
…PUESTA A PUNTO…
0
DUMMY AVANZADO
Por: Carlos Arce.

2. Puesta a punto Brackets 14 de diciembre de 2015
CONFIGURANDO EDITOR DE TEXTO BRACKETS
Desarrollado por Adobe Systems Licencia MIT.
Escrito en HTML, CSS, JavaScript con un enfoque principal
en desarrollo Web.
Lanzado el 4 de Noviembre 2014, es multiplataforma
descarga en MAC, WINDOWS, LINUX.
wikipedia…
 Vamos a empezar instalando Brackets a los que ya lo
tienen instalado omitir estos pasos.
Nos vamos a la página oficial que les dejo en el siguiente
enlace:
Ambos son buenos editores

3. Puesta a punto Brackets 14 de diciembre de 2015
 Una vez instalado nos vamos al gestor de extensiones
Buscar plugins:
1. Themes for Brackets
Una vez instalado Ver-Temas
Personalmente me gusta así, pero vosotros escoger el tema
que más os guste.
Extensiones

4. Puesta a punto Brackets 14 de diciembre de 2015
Para completar código rápidamente.
Lo primero es asignarle una extensión es decir index.html y guardar el archivo
caso contrario no os va funcionar.
Solo tiene que escribir por Ejemplo div + y los crea
automáticamente con esa lógica funciona todo.
Para más información, iros a su Página oficial…
Para trabajar con las pestañas más cómodamente.
Para agregar iconos y poder diferenciarlos en nuestro entorno.
! +
2. Pestañas trabajando cómodamente
1. Emmet
3. Brackets Icons

5. Puesta a punto Brackets 14 de diciembre de 2015
Viene instalado en automáticamente en la última versión 1.5, pero
en los que son portables hay que instalarlo.
Sirve para ver en vivo los cambios que le hacemos a nuestro
proyecto de una forma dinámica y en vivo.
Hasta aquí ya tenemos lo necesario para trabajar con nuestro
proyecto o continuar instalando las demás extensiones.
Para que puedas crear tus propios atajos de teclado Ejemplo:
+ INTRO
4. Extract for Brackets (Preview)
5. Brackets Snippets (by edc)

6. Puesta a punto Brackets 14 de diciembre de 2015
Ordena el código automáticamente es una buena práctica.
Muestra todos los atajos de teclado que tiene instalado el programa.
RESULTADO
Ctrl+Alt+i
6. Indentator
7. Display Shortcuts

7. Puesta a punto Brackets 14 de diciembre de 2015
Hace que las líneas largas (que no caben en una sola línea) tengan el
mismo sangrado en todas las líneas.
Para saber si nuestro código es validado correctamente.
Falta <h1>
8. Indent softwrapped lines
9. w3cvalidation

8. Puesta a punto Brackets 14 de diciembre de 2015
Corregido el problema: Esto es una buen práctica !!!
Hasta aquí hemos llegado compañeros espero que os haya gustado
este pequeño tutorial no formal.