зеркало из https://github.com/mozilla/brackets.git
Updated latest changes
This commit is contained in:
Родитель
fc136d26eb
Коммит
23dcf61b05
|
@ -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 > 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 >
|
||||
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",
|
||||
|
|
Загрузка…
Ссылка в новой задаче