@@ -19,7 +19,7 @@ <h2>¡Ésta es tu guía!</h2>
19
19
20
20
< p >
21
21
Bienvenido a una versión preliminar de Brackets, un nuevo editor de código abierto para la nueva
22
- generación de Internet. Somos unos apasionados de los estándares y queremos construir mejores
22
+ generación de Internet. Somos unos apasionados de los estándares y queremos construir mejores
23
23
herramientas para JavaScript, HTML, CSS y el resto de tecnologías web. Éste es nuestro humilde
24
24
comienzo.
25
25
</ p >
@@ -30,7 +30,7 @@ <h2>¡Ésta es tu guía!</h2>
30
30
< p >
31
31
< em > Brackets es un editor diferente.</ em >
32
32
La gran diferencia es que está escrito en JavaScript, HTML y CSS. Esto significa que la mayoría de quienes
33
- usan Brackets tiene las habilidades necesarias para modificar y extender el editor. De hecho, nosotros
33
+ usan Brackets tiene las habilidades necesarias para modificar y extender el editor. De hecho, nosotros
34
34
lo usamos todos los días para desarrollar Brackets. También tiene algunas características únicas como
35
35
Edición Rápida, Desarrollo en Vivo y más que no encontrarás en otros editores.
36
36
Sigue leyendo para saber más sobre cómo sacar provecho de estas características
@@ -43,17 +43,17 @@ <h2>Estamos intentando algunas cosas nuevas</h2>
43
43
-->
44
44
< h3 > Edición rápida de CSS y JavaScript</ h3 >
45
45
< p >
46
- Se acabó el estar saltando de documento en documento perdiendo de vista lo que estás haciendo. Mientras
47
- estás escribiendo HTML, usa el atajo de teclado < kbd > Cmd/Ctrl + E</ kbd > para abrir un editor rápido en
48
- línea con todo el contenido CSS relacionado. Ajusta tu CSS y pulsa < kbd > ESC</ kbd > para volver a tu HTML, o simplemente
49
- mantén las reglas CSS abiertas para que pasen a formar parte de tu editor de HTML. Si pulsas < kbd > ESC</ kbd >
46
+ Se acabó el estar saltando de documento en documento perdiendo de vista lo que estás haciendo. Mientras
47
+ estás escribiendo HTML, usa el atajo de teclado < kbd > Cmd/Ctrl + E</ kbd > para abrir un editor rápido en
48
+ línea con todo el contenido CSS relacionado. Ajusta tu CSS y oprime < kbd > ESC</ kbd > para volver a tu HTML, o simplemente
49
+ mantén las reglas CSS abiertas para que pasen a formar parte de tu editor de HTML. Si pulsas < kbd > ESC</ kbd >
50
50
fuera de un editor rápido, todos se cerrarán a la vez.
51
51
</ p >
52
52
53
53
< samp >
54
- ¿Quieres verlo funcionando? Coloca tu cursor sobe la etiqueta <!-- <samp> --> y pulsa < kbd > Cmd/Ctrl + E</ kbd > .
55
- Deberías ver aparecer un editor rápido de CSS más arriba. A la derecha verás un listado de todas las reglas CSS
56
- relacionadas con esta etiqueta. Simplemente desplázate entre las reglas con < kbd > Alt + Arriba/Abajo</ kbd > para
54
+ ¿Quieres verlo funcionando? Coloca tu cursor sobe la etiqueta <!-- <samp> --> y oprime < kbd > Cmd/Ctrl + E</ kbd > .
55
+ Deberías ver aparecer un editor rápido de CSS más arriba. A la derecha verás un listado de todas las reglas CSS
56
+ relacionadas con esta etiqueta. Simplemente desplázate entre las reglas con < kbd > Alt + Arriba/Abajo</ kbd > para
57
57
encontrar la que quieres modificar.
58
58
</ samp >
59
59
@@ -63,71 +63,71 @@ <h3>Edición rápida de CSS y JavaScript</h3>
63
63
64
64
< p >
65
65
Puedes usar el mismo atajo en JavaScript para ver el cuerpo de una función colocando el ratón sobre
66
- el nombre de la llamada a la función que quieras examinar. Por ahora, no se pueden anidar editores en línea, por
66
+ el nombre de la llamada a la función que quieras examinar. Por ahora, no se pueden anidar editores en línea, por
67
67
lo que sólo puedes usar la característica de Edición Rápida cuando el cursor está en un editor "completo".
68
68
</ p >
69
69
70
70
<!--
71
71
LIVE PREVIEW
72
72
-->
73
- < h3 > Visualiza cambios en archivos CSS en vivo en el navegador</ h3 >
73
+ < h3 > Visualiza cambios en archivos HTML y CSS en vivo en el navegador</ h3 >
74
74
< p >
75
- ¿Conoces ese baile de "guardar/recargar" que llevamos años haciendo? ¿Ése en el que haces cambios en tu
76
- editor, pulsas guardar, cambias al navegador y recargas para por fin poder ver el resultado? Con Brackets,
75
+ ¿Conoces ese baile de "guardar/recargar" que llevamos años haciendo? ¿Ése en el que haces cambios en tu
76
+ editor, oprimes guardar, cambias al navegador y recargas para por fin poder ver el resultado? Con Brackets,
77
77
ya no tienes que hacerlo.
78
78
</ p >
79
79
< p >
80
80
¡Brackets abrirá una < em > conexión en vivo</ em > con tu navegador local y le enviará los cambios en el
81
- archivo CSS conforme escribas! Puede que ya estés haciendo algo parecido con las herramientas de desarrollo
82
- del navegador, pero con Brackets ya no necesitas copiar y pegar las reglas CSS final de vuelta a tu editor.
81
+ archivo HTML y CSS conforme escribas! Puede que ya estés haciendo algo parecido con las herramientas de desarrollo
82
+ del navegador, pero con Brackets ya no necesitas copiar y pegar el código final de vuelta a tu editor.
83
83
¡Tu código se ejecuta en el navegador, pero vive en tu editor!
84
84
</ p >
85
85
86
86
< h3 > Resaltado en vivo de elementos HTML y reglas CSS</ h3 >
87
87
< p >
88
- Brackets te ayuda a ver cómo los cambios en HTML y CSS afectan a tu página. Cuando tu cursor se encuentre
89
- sobre una regla de CSS, Brackets resaltará todos los elementos afectados en el navegador. Del mismo modo,
90
- cuando estés editando un archivo HTML, Brackets también resaltará los elementos correspondientes en tu
88
+ Brackets te ayuda a ver cómo los cambios en HTML y CSS afectan a tu página. Cuando tu cursor se encuentre
89
+ sobre una regla de CSS, Brackets resaltará todos los elementos afectados en el navegador. Del mismo modo,
90
+ cuando estés editando un archivo HTML, Brackets también resaltará los elementos correspondientes en tu
91
91
navegador.
92
92
</ p >
93
93
94
94
< samp >
95
95
Si tienes instalado Google Chrome, puedes probarlo tú mismo. Haz click sobre el icono del rayo de la
96
96
esquina superior derecha o presiona < kbd > Cmd/Ctrl + Alt + P</ kbd > . Cuando Desarrollo en Vivo está
97
- funcionando en un documento HTML, todos los documentos CSS relacionados se pueden editar en
97
+ funcionando en un documento HTML, todos los documentos CSS relacionados se pueden editar en
98
98
tiempo real. El icono pasará de gris a dorado cuando Brackets consiga establecer una conexión
99
99
con tu navegador.
100
100
101
- Ahora, coloca el cursor sobre la etiqueta <!-- <img> --> que se encuentra un poco más arriba. Observa
102
- cómo aparece el resaltado azul alrededor de la imagen en Chrome. Luego, utiliza < kbd > Cmd/Ctrl + E</ kbd >
103
- para abrir las reglas de CSS existentes. Intenta cambiar el tamaño del borde de 1 a 10 píxeles o el color
104
- del fondo de "dimgray" a "hotpink". Si Brackets y tu navegador están funcionando en paralelo, verás los
101
+ Ahora, coloca el cursor sobre la etiqueta <!-- <img> --> que se encuentra un poco más arriba. Observa
102
+ cómo aparece el resaltado azul alrededor de la imagen en Chrome. Luego, utiliza < kbd > Cmd/Ctrl + E</ kbd >
103
+ para abrir las reglas de CSS existentes. Intenta cambiar el tamaño del borde de 1 a 10 píxeles o el color
104
+ del fondo de "dimgray" a "hotpink". Si Brackets y tu navegador están funcionando en paralelo, verás los
105
105
cambios reflejados de manera instantánea en tu navegador. Genial, ¿verdad?
106
106
</ samp >
107
107
108
108
< p class ="note ">
109
- Actualmente, Brackets sólo soporta Desarrollo en Vivo para CSS. Aún así, en la versión actual, los cambios
110
- en ficheros HTML y JavaScript son detectados y recargados automáticamente en el navegador cuando guardas. En
111
- estos momentos estamos trabajando en añadir soporte para Desarrollo en Vivo de HTML y JavaScript. Además, las
112
- actualizaciones automáticas sólo son posibles en Google Chrome, pero esperamos poder trasladar próximamente
109
+ Actualmente, Brackets sólo soporta Desarrollo en Vivo para HTML y CSS. Aún así, en la versión actual, los cambios
110
+ en ficheros JavaScript son detectados y recargados automáticamente en el navegador cuando guardas. En
111
+ estos momentos estamos trabajando en añadir soporte para Desarrollo en Vivo para JavaScript. Además, las
112
+ actualizaciones automáticas sólo son posibles en Google Chrome, pero esperamos poder trasladar próximamente
113
113
esta funcionalidad a todos los grandes navegadores.
114
114
</ p >
115
115
116
116
< h3 > Vista Rápida</ h3 >
117
117
< p >
118
- Para aquellos que todavía no han memorizado las equivalencias de color entre HEX y RGB, Brackets permite ver
119
- exactamente qué color se está utilizando rápida y fácilmente. Tanto en CSS como en HTML, simplemente mueve el
118
+ Para aquellos que todavía no han memorizado las equivalencias de color entre Hex y RGB, Brackets permite ver
119
+ exactamente qué color se está utilizando rápida y fácilmente. Tanto en CSS como en HTML, simplemente mueve el
120
120
cursor sobre cualquier valor de color o gradiente y Brackets mostrará una previsualización del mismo de manera
121
- automática. Lo mismo sirve para imágenes: simplemente pasa el cursor sobre la dirección de una imagen en Brackets,
121
+ automática. Lo mismo sirve para imágenes: simplemente pasa el cursor sobre la dirección de una imagen en Brackets,
122
122
y éste mostrará una vista en miniatura de la misma.
123
123
</ p >
124
124
125
125
< samp >
126
126
Para probar la previsualización tú mismo, coloca el cursor en la etiqueta <!-- <body> --> al principio de este
127
- documento y pulsa < kbd > Cmd/Ctrl + E</ kbd > para abrir un editor CSS. Ahora, simplemente mueve el ratón sobre
128
- cualquiera de los colores dentro del CSS. También puedes verlo funcionando en gradientes abriendo un editor
129
- de CSS en la etiqueta <!-- <html> --> pasando el cursor por cualquiera de los valores para las imágenes de fondo.
130
- Para probar la vista previa de imágenes, coloca el cursor sobre la imagen con la captura de pantalla incluída
127
+ documento y oprime < kbd > Cmd/Ctrl + E</ kbd > para abrir un editor CSS. Ahora, simplemente mueve el ratón sobre
128
+ cualquiera de los colores dentro del CSS. También puedes verlo funcionando en gradientes abriendo un editor
129
+ de CSS en la etiqueta <!-- <html> --> pasando el cursor por cualquiera de los valores para las imágenes de fondo.
130
+ Para probar la vista previa de imágenes, coloca el cursor sobre la imagen con la captura de pantalla incluida
131
131
antes en este documento.
132
132
</ samp >
133
133
0 commit comments