Primeros Pasos Brackets

<!
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PRIMEROS PASOS CON BRACKETS</title>
<meta name="description" content="Una gua interactiva de primeros pasos
para Brackets.">
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1>PRIMEROS PASOS CON BRACKETS</h1>

<h2>sta es tu gua!</h2>

<p>
Bienvenido a Brackets, un nuevo editor de cdigo abierto que entiende
el diseo web. Es un editor de
cdigo liviano y potente al mismo tiempo que incluye herramientas
visuales dentro del mismo para
que puedas obtener la ayuda que necesites cuando la necesites.
</p>

<p>
<em>Brackets es un editor diferente.</em>
Brackets tiene varias caractersticas nicas como la Edicin rpida y
la Vista previa dinmica y muchas
ms que no vas a encontrar en otros editores. Adems, Brackets est
escrito en JavaScript, HTML y CSS.
Esto significa que la mayora de quienes usan Brackets tienen las
habilidades necesarias para modificar y
extender el editor. De hecho, nosotros usamos Brackets todos los das
para desarrollar Brackets. Para
saber ms sobre cmo utilizar estas caractersticas nicas, contina
leyendo.
</p>

<h3>Proyectos en Brackets</h3>
<p>
Para poder editar tu propio cdigo en Brackets, puedes simplemente
abrir la carpeta que contiene los
archivos. Brackets considera a la carpeta abierta como el "proyecto";
caractersticas como las Sugerencias
de cdigo, la Vista previa dinmica y la Edicin rpida solo utilizan
los archivos contenidos dentro de
la carpeta actualmente abierta.
</p>
<samp>
Una vez que ests listo para salir del proyecto de ejemplo y editar tu
propio cdigo, puedes usar el men
despegable en la barra de la izquierda para cambiar de carpeta. En
estos momentos, el men despegable dice
"Primeros Pasos" - la cual es la carpeta que contiene el archivo que
ests viendo en estos momentos. Haz
clic en el men despegable y selecciona "Abrir carpeta" para abrir tu
carpeta.
Tambin puedes usar el men despegable para abrir las carpetas que
abriste recientemente, incluyendo este
proyecto de ejemplo.
</samp>
<h2>Estamos intentando algunas cosas nuevas</h2>

<h3>Edicin rpida de CSS y JavaScript</h3>
<p>
Se acab aquello de estar saltando de documento en documento perdiendo
de vista lo que ests haciendo. Mientras
ests escribiendo HTML, usa el atajo de teclado <kbd>Cmd/Ctrl + E</kbd>
para abrir un editor rpido en
lnea con todo el contenido CSS relacionado. Ajusta tu CSS y oprime
<kbd>ESC</kbd> para volver a tu HTML,
o simplemente mantenga las reglas CSS abiertas para que pasen a formar
parte de tu editor de HTML. Si
pulsas <kbd>ESC</kbd> fuera de un editor rpido, todos se cerrarn a la
vez. La edicin rpida tambin
funciona con archivos LESS y SCSS, incluyendo las reglas anidadas.
</p>
<samp>
Quieres verlo funcionando? Coloca tu cursor sobre la etiqueta  y oprime
<kbd>Cmd/Ctrl + E</kbd>. Deberas ver aparecer un editor rpido de CSS
ms arriba, mostrando la regla de
CSS que le afecta. La edicin rpida funciona tambin en atributos de
tipo clase e id. Tambin puedes
utilizarlo en tus archivos LESS o SCSS.
Puedes crear nuevas reglas de la misma manera. Haz clic en una de las
etiquetas  de ms arriba
y oprime <kbd>Cmd/Ctrl + E</kbd>. Todava no hay reglas para ese
elemento, pero puedes hacer clic en el
botn Nueva Regla para aadir una nueva regla a las etiquetas .
</samp>
<a href="screenshots/quick-edit.png">
<img alt="Una captura de pantalla con un Editor Rpido de CSS"
src="screenshots/quick-edit.png" />
</a>
<p>
Tambin puedes usar el mismo atajo para editar otras cosas--como
funciones en JavaScript, colores y
funciones de temporizacin de animaciones--y estamos aadiendo ms y
ms continuamente.
</p>
<p>
Por ahora, no se pueden anidar editores en lnea, por lo que slo
puedes usar la caracterstica de
Edicin Rpida cuando el cursor est en un editor "completo".
</p>

<h3>Visualiza cambios en archivos HTML y CSS en vivo en el navegador</h3>
<p>
Conoces ese baile de "guardar/recargar" que llevamos aos haciendo?
se en el que haces cambios en tu
editor, oprimes guardar, cambias al navegador y recargas para por fin
poder ver el resultado? Con
Brackets, ya no tienes que hacerlo.
</p>
<p>
Brackets abrir una <em>conexin en vivo</em> con tu navegador local y
le enviar los cambios en el
archivo HTML y CSS conforme escribas! Puede que ya ests haciendo algo
parecido con las herramientas de
desarrollo del navegador, pero con Brackets ya no necesitas copiar y
pegar el cdigo final de vuelta a tu
editor. Tu cdigo se ejecuta en el navegador, pero vive en tu editor!
</p>
<h3>Resaltado en vivo de elementos HTML y reglas CSS</h3>

<p>
Brackets te ayuda a ver cmo los cambios en HTML y CSS afectan a tu
pgina. Cuando tu cursor se encuentre
sobre una regla de CSS, Brackets resaltar todos los elementos
afectados en el navegador. Del mismo modo,
cuando ests editando un archivo HTML, Brackets tambin resaltar los
elementos correspondientes en tu navegador.
</p>
<samp>
Si tienes instalado Google Chrome, puedes probarlo t mismo. Haz clic
sobre el icono del rayo de la
esquina superior derecha o presiona <kbd>Cmd/Ctrl + Alt + P</kbd>.
Cuando la Vista previa dinmica est
funcionando en un documento HTML, todos los documentos CSS relacionados
se pueden editar en tiempo real.
El icono pasar de gris a dorado cuando Brackets consiga establecer una
conexin con tu navegador.
Ahora, coloca el cursor sobre la etiqueta  que se

encuentra un poco ms arriba. Observa
cmo aparece el resaltado azul alrededor de la imagen en Chrome. Luego,
utiliza <kbd>Cmd/Ctrl + E</kbd>
para abrir las reglas de CSS existentes. Intenta cambiar el tamao del
borde de 10px a 20px o el color
del fondo de "transparent" a "hotpink". Si Brackets y tu navegador
estn funcionando en paralelo, vers
los cambios reflejados de manera instantnea en tu navegador. Genial,
verdad?
</samp>
<p class="note">
Actualmente, Brackets slo soporta Vista previa dinmica para HTML y
CSS. An as, en la versin actual,
los cambios en archivos JavaScript son recargados automticamente en el
navegador cuando guardas. En estos
momentos estamos trabajando en el soporte de Vista previa dinmica para
JavaScript. Las actualizaciones
automticas slo son posibles en Google Chrome, pero esperamos poder
trasladar esta funcionalidad a todos
los grandes navegadores.
</p>
<h3>Vista Rpida</h3>
<p>
Para aquellos que todava no han memorizado las equivalencias de color
entre Hex y RGB, Brackets permite
ver exactamente qu color se est utilizando rpida y fcilmente. Tanto
en CSS como en HTML, simplemente
mueve el cursor sobre cualquier valor de color o gradiente y Brackets
mostrar una previsualizacin del
mismo de manera automtica. Lo mismo sirve para imgenes: simplemente
pasa el cursor sobre la direccin
de una imagen en Brackets, y ste mostrar una vista en miniatura de la
misma.
</p>
<samp>
Para probar la previsualizacin t mismo, coloca el cursor en la
etiqueta  al principio de
este documento y oprime <kbd>Cmd/Ctrl + E</kbd> para abrir un editor
CSS. Ahora, simplemente mueve el
cursor sobre cualquiera de los colores dentro del CSS. Tambin puedes
verlo funcionando en gradientes
abriendo un editor de CSS en la etiqueta  y pasando el
cursor por cualquiera de los valores
para las imgenes de fondo. Para probar la vista previa de imgenes,
coloca el cursor sobre la imagen
incluida antes en ste documento.
</samp>
<h3>Necesitas algo ms? Prueba una extensin!</h3>

<p>
Adems de todas las bondades naturales de Brackets, nuestra amplia y
creciente comunidad de desarrolladores
de extensiones ha creado cientos de extensiones que aaden tiles
funcionalidades. Si hay algo que
necesitas que Brackets no soporta, es bastante probable que alguien
haya construido una extensin para
ello. Para navegar o buscar en la lista de extensiones disponibles,
selecciona <strong>Archivo >
Gestionar extensiones...</strong> y haz clic en la pestaa
"Disponibles". Cuando encuentres una que
quieras, simplemente presiona el botn "Instalar" a su derecha.
</p>

<h2>Involcrate</h2>
<p>
Brackets es un proyecto de cdigo abierto. Desarrolladores web de todo
el mundo estn contribuyendo
a construir un mejor editor de cdigo. Haznos saber lo que piensas,
comparte tus ideas o contribuye
directamente al proyecto.
</p>
<ul>
<li><a href="http://brackets.io">Brackets.io</a></li>
<li><a href="http://blog.brackets.io">Blog del equipo de
Brackets</a></li>
<li><a href="https://github.com/adobe/brackets">Brackets en
GitHub</a></li>
<li><a href="https://brackets-registry.aboutweb.com">Registro de
Extensiones de Brackets</a></li>
<li><a href="https://github.com/adobe/brackets/wiki">Wiki de
Brackets</a></li>
<li><a href="https://groups.google.com/forum/#!forum/brackets-
dev">Lista de correo de los desarrolladores de Brackets</a></li>
<li><a href="https://twitter.com/brackets">@brackets en
Twitter</a></li>
<li>Habla con los desarrolladores de Brackets por IRC en <a
href="http://webchat.freenode.net/?channels=brackets&uio=d4">#brackets en
Freenode</a></li>
</ul>
</body>
</html>

Primeros Pasos Brackets

Cargado por

Copyright:

Formatos disponibles

Primeros Pasos Brackets

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Primeros Pasos Brackets

Cargado por

Copyright:

Formatos disponibles

<!

<h1>PRIMEROS PASOS CON BRACKETS</h1>

<h2>Estamos intentando algunas cosas nuevas</h2>

<h3>Resaltado en vivo de elementos HTML y reglas CSS</h3>

Ahora, coloca el cursor sobre la etiqueta  que se

<h3>Necesitas algo ms? Prueba una extensin!</h3>

También podría gustarte