This commit is contained in:
TomMalbran 2014-10-28 23:40:06 -03:00
Родитель fc136d26eb
Коммит 23dcf61b05
2 изменённых файлов: 67 добавлений и 59 удалений

Просмотреть файл

@ -18,9 +18,9 @@
-->
<p>
Bienvenido a una versión preliminar de Brackets, un nuevo editor de código abierto para la nueva
generación de Internet. Somos unos apasionados de los estándares y queremos construir mejores
herramientas para JavaScript, HTML, CSS y el resto de tecnologías web. Éste es nuestro humilde comienzo.
Bienvenido a Brackets, un nuevo editor de código abierto que entiende el diseño web. Es un editor de
código 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>
<!--
@ -28,13 +28,33 @@
-->
<p>
<em>Brackets es un editor diferente.</em>
La gran diferencia es que está escrito en JavaScript, HTML y CSS. Esto significa que la mayoría de quienes
usan Brackets tiene las habilidades necesarias para modificar y extender el editor. De hecho, nosotros
lo usamos todos los días para desarrollar Brackets. También tiene algunas características únicas como
Edición rápida, Vista previa dinámica y más que no encontrarás en otros editores.
Sigue leyendo para saber más sobre cómo sacar provecho de estas características
Brackets tiene varias características únicas como la Edición rápida y la Vista previa dinámica y muchas
más que no vas a encontrar en otros editores. Además, Brackets está escrito en JavaScript, HTML y CSS.
Esto significa que la mayoría de quienes usan Brackets tienen las habilidades necesarias para modificar y
extender el editor. De hecho, nosotros usamos Brackets todos los días para desarrollar Brackets. Para
saber más sobre cómo utilizar estas características únicas, continua leyendo.
</p>
<!--
EMPIEZA CON TUS PROPIOS ARCHIVOS
-->
<h3>Proyectos en Brackets</h3>
<p>
Para poder editar tu propio código en Brackets, puedes simplemente abrir la carpeta que contiene los
archivos. Brackets considera a la carpeta abierta como el "proyecto"; características como las Sugerencias
de código, la Vista previa dinámica y la Edición rápida solo utilizan los archivos contenidos dentro de
la carpeta actualmente abierta.
</p>
<samp>
Una vez que estés listo para salir del proyecto de ejemplo y editar tu propio código, 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 estás viendo en estos momentos. Haz
clic en el menú despegable y selecciona "Abrir carpeta…" para abrir tu carpeta.
También 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>
@ -46,18 +66,19 @@
Se acabó el estar saltando de documento en documento perdiendo de vista lo que estás haciendo. Mientras
estás escribiendo HTML, usa el atajo de teclado <kbd>Cmd/Ctrl + E</kbd> para abrir un editor rápido en
línea 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 rápido, todos se cerrarán a la vez. La edición rápida también funciona con
archivos LESS y SCSS files, incluyedo las reglas anidadas.
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 rápido, todos se cerrarán a la vez. La edición rápida también
funciona con archivos LESS y SCSS files, incluyendo las reglas anidadas.
</p>
<samp>
¿Quieres verlo funcionando? Coloca tu cursor sobe la etiqueta <!-- <samp> --> y oprime <kbd>Cmd/Ctrl + E</kbd>.
Deberías ver aparecer un editor rápido de CSS más arriba, mostrando la regla CSS que le afecta. La edición rápida
funciona también en atributos de de tipo clase e id.
¿Quieres verlo funcionando? Coloca tu cursor sobe la etiqueta <!-- <samp> --> y oprime
<kbd>Cmd/Ctrl + E</kbd>. Deberías ver aparecer un editor rápido de CSS más arriba, mostrando la regla CSS
que le afecta. La edición rápida funciona también en atributos de de tipo clase e id. También puedes
utilizarlo en tus archivos LESS o SCSS.
Puedes crear nuevas reglas de la misma manera. Haz click en una de las etiquetas <!-- <p> --> de más arriba y
oprime <kbd>Cmd/Ctrl + E</kbd>. Todavía no hay reglas para ese elemento, pero puedes hacer click en el
Puedes crear nuevas reglas de la misma manera. Haz clic en una de las etiquetas <!-- <p> --> de más arriba
y oprime <kbd>Cmd/Ctrl + E</kbd>. Todavía no hay reglas para ese elemento, pero puedes hacer clic en el
botón Nueva Regla para añadir una nueva regla a las etiquetas <!-- <p> -->.
</samp>
@ -80,14 +101,14 @@
<h3>Visualiza cambios en archivos HTML y CSS en vivo en el navegador</h3>
<p>
¿Conoces ese baile de "guardar/recargar" que llevamos años 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.
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>conexión en vivo</em> con tu navegador local y le enviará los cambios en el
archivo HTML y CSS conforme escribas! Puede que ya estés haciendo algo parecido con las herramientas de desarrollo
del navegador, pero con Brackets ya no necesitas copiar y pegar el código final de vuelta a tu editor.
¡Tu código se ejecuta en el navegador, pero vive en tu editor!
archivo HTML y CSS conforme escribas! Puede que ya estés haciendo algo parecido con las herramientas de
desarrollo del navegador, pero con Brackets ya no necesitas copiar y pegar el código final de vuelta a tu
editor. ¡Tu código se ejecuta en el navegador, pero vive en tu editor!
</p>
<h3>Resaltado en vivo de elementos HTML y reglas CSS</h3>
@ -98,7 +119,7 @@
</p>
<samp>
Si tienes instalado Google Chrome, puedes probarlo tú mismo. Haz click sobre el icono del rayo de la
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 dinámica 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 conexión con tu navegador.
@ -106,60 +127,46 @@
Ahora, coloca el cursor sobre la etiqueta <!-- <img> --> que se encuentra un poco más arriba. Observa
cómo 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 tamaño del borde de 10px a 20px o el color
del fondo de "transparent" a "hotpink". Si Brackets y tu navegador están funcionando en paralelo, verás los
cambios reflejados de manera instantánea en tu navegador. Genial, ¿verdad?
del fondo de "transparent" a "hotpink". Si Brackets y tu navegador están funcionando en paralelo, verás
los cambios reflejados de manera instantánea en tu navegador. Genial, ¿verdad?
</samp>
<p class="note">
Actualmente, Brackets sólo soporta Vista previa dinámica para HTML y CSS. Aún así, en la versión actual, los cambios
en archivos JavaScript son recargados automáticamente en el navegador cuando guardas. En stos momentos estamos
trabajando en el soporte de Vista previa dinámica para JavaScript. Las actualizaciones automáticas sólo son posibles
en Google Chrome, pero esperamos poder trasladar esta funcionalidad a todos los grandes navegadores.
Actualmente, Brackets sólo soporta Vista previa dinámica para HTML y CSS. Aún así, en la versión actual,
los cambios en archivos JavaScript son recargados automáticamente en el navegador cuando guardas. En estos
momentos estamos trabajando en el soporte de Vista previa dinámica para JavaScript. Las actualizaciones
automáticas sólo son posibles en Google Chrome, pero esperamos poder trasladar esta funcionalidad a todos
los grandes navegadores.
</p>
<h3>Vista Rápida</h3>
<p>
Para aquellos que todavía no han memorizado las equivalencias de color entre Hex y RGB, Brackets permite ver
exactamente qué color se está utilizando rápida y fácilmente. Tanto en CSS como en HTML, simplemente mueve el
cursor sobre cualquier valor de color o gradiente y Brackets mostrará una previsualización del mismo de manera
automática. Lo mismo sirve para imágenes: simplemente pasa el cursor sobre la dirección de una imagen en Brackets,
y éste mostrará una vista en miniatura de la misma.
Para aquellos que todavía no han memorizado las equivalencias de color entre Hex y RGB, Brackets permite
ver exactamente qué color se está utilizando rápida y fácilmente. Tanto en CSS como en HTML, simplemente
mueve el cursor sobre cualquier valor de color o gradiente y Brackets mostrará una previsualización del
mismo de manera automática. Lo mismo sirve para imágenes: simplemente pasa el cursor sobre la dirección
de una imagen en Brackets, y éste mostrará una vista en miniatura de la misma.
</p>
<samp>
Para probar la previsualización tú mismo, coloca el cursor en la etiqueta <!-- <body> --> al principio de este
documento y oprime <kbd>Cmd/Ctrl + E</kbd> para abrir un editor CSS. Ahora, simplemente mueve el ratón sobre
cualquiera de los colores dentro del CSS. También puedes verlo funcionando en gradientes abriendo un editor
de CSS en la etiqueta <!-- <html> --> y pasando el cursor por cualquiera de los valores para las imágenes de fondo.
Para probar la vista previa de imágenes, coloca el cursor sobre la imagen incluida antes en este documento.
Para probar la previsualización tú mismo, coloca el cursor en la etiqueta <!-- <body> --> 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. También puedes verlo funcionando en gradientes
abriendo un editor de CSS en la etiqueta <!-- <html> --> y pasando el cursor por cualquiera de los valores
para las imágenes de fondo. Para probar la vista previa de imágenes, coloca el cursor sobre la imagen
incluida antes en éste documento.
</samp>
<h3>¿Necesitas algo más? ¡Prueba una extensión!</h3>
<p>
Además de todas las bondades naturales de Brackets, nuestra amplia y creciente comunidad de desarrolladores
de extensiones ha creado más de un centenar de extensiones que añaden útiles funcionalidades. Si hay algo que
necesitas que Brackets no soporte, es bastante probable que alguien haya construido una extensión para ello.
Para navegar o buscar en la lista de extensiones disponibles, selecciona <strong>Archivo &gt; Gestionar
extensiones...</strong> y haz click en la pestaña "Disponibles". Cuando encuentres una que quieras, simplemente
presiona el botón "Instalar" a su derecha.
de extensiones ha creado cientos de extensiones que añaden útiles funcionalidades. Si hay algo que
necesitas que Brackets no soporte, es bastante probable que alguien haya construido una extensión para
ello. Para navegar o buscar en la lista de extensiones disponibles, selecciona <strong>Archivo &gt;
Gestionar extensiones...</strong> y haz clic en la pestaña "Disponibles". Cuando encuentres una que
quieras, simplemente presiona el botón "Instalar" a su derecha.
</p>
<h3>Proyectos en Brackets</h3>
<p>
Para poder editar tu propio código en Brackets, puedes simplemente abrir la carpeta que contiene los archivos.
Brackets considera a la carpeta abierta como el "proyecto"; características como las Sugerencias de Código,
la Vista Previa y la Edición Rápida solo usan los archivos dentro de la carpeta abierta actualmente.
</p>
<samp>
Una vez que estés listo para salir del proyecto de ejemplo y editar tu propio código, puedes usar el menú
despegable en la barra de la izquierda para cambiar carpetas. En estos momentos, el menú despegable dice
"Primeros Pasos" - la cual es la carpeta que contiene el archivo que estás viendo en estos momentos. Haz
click en el menú despegable y selecciona "Abrir carpeta…" para abrir tu carpeta.
También puedes usar el menú despegable para abrir las carpetas que abriste recientemente, incluyendo este
proyecto de ejemplo.
</samp>
<!--
HAZNOS SABER LO QUE PIENSAS
-->

Просмотреть файл

@ -426,6 +426,7 @@ define({
// Strings for main-view.html
"EXPERIMENTAL_BUILD" : "versión experimental",
"RELEASE_BUILD" : "versión",
"DEVELOPMENT_BUILD" : "versión de desarrollo",
"RELOAD_FROM_DISK" : "Volver a cargar desde disco",
"KEEP_CHANGES_IN_EDITOR" : "Conservar los cambios del editor",