|
10 | 10 | </head> |
11 | 11 | <body> |
12 | 12 |
|
13 | | -<h1>PRIMEROS PASOS CON BRACKETS</h1> |
14 | | -<h2>¡Ésta es tu guía!</h2> |
15 | | - |
16 | | -<!-- |
17 | | - HECHO CON <3 Y JAVASCRIPT |
18 | | ---> |
19 | | - |
20 | | -<p> |
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 |
23 | | - herramientas para JavaScript, HTML, CSS y el resto de tecnologías web relacionadas. Éste es nuestro |
24 | | - humilde comienzo. |
25 | | -</p> |
26 | | - |
27 | | -<!-- |
28 | | - ¿QUÉ ES BRACKETS? |
29 | | ---> |
30 | | -<p> |
31 | | - <em>Estás viendo una versión preliminar de Brackets.</em> |
32 | | - En muchos aspectos, Brackets es otro tipo de editor. La gran diferencia es que está escrito en |
33 | | - JavaScript. Y es que, aunque Brackets no esté listo todavía para tu uso diario, nosotros lo estamos |
34 | | - utilizando todos los días para construir Brackets. |
35 | | -</p> |
36 | | - |
37 | | - |
38 | | -<h2>Estamos intentando algunas cosas nuevas</h2> |
39 | | - |
40 | | -<!-- |
41 | | - LA RELACIÓN ENTRE HTML, CSS Y JAVASCRIPT |
42 | | ---> |
43 | | -<h3>Edición rápida de CSS y JavaScript</h3> |
44 | | -<p> |
45 | | - Mientras estás escribiendo HTML, usa el atajo de teclado <kbd>Cmd/Ctrl + E</kbd> para abrir un editor |
46 | | - rápido en línea con todo el CSS relacionado. Ajusta tu CSS, pulsa <kbd>ESC</kbd> y de vuelta |
47 | | - al HTML. O simplemente mantén las reglas CSS abiertas para que pasen a formar parte de tu editor de HTML. Si |
48 | | - pulsas <kbd>ESC</kbd> fuera de un editor rápido, todas se cerrarán a la vez. Ya no es necesario estar cambiando |
49 | | - de documentos continuamente. |
50 | | -</p> |
51 | | - |
52 | | -<samp> |
53 | | - ¿Quieres verlo funcionando? Coloca tu cursor sobe el tag <!-- <samp> --> superior y pulsa |
54 | | - <kbd>Cmd/Ctrl + E</kbd>. Deberías ver aparecer un editor rápido de CSS por encima. A la derecha |
55 | | - verás un listado de todas las reglas CSS relacionadas con este tag. Simplemente desplázate entre las |
56 | | - reglas con <kbd>Alt + Up/Down</kbd> para encontrar la que quieres modificar. |
57 | | -</samp> |
58 | | - |
59 | | -<a href="screenshots/quick-edit.png"> |
60 | | - <img alt="Una captura de pantalla con un Editor Rápido de CSS" src="screenshots/quick-edit.png" /> |
61 | | -</a> |
62 | | - |
63 | | -<!-- |
64 | | - LIVE PREVIEW |
65 | | ---> |
66 | | -<h3>Visualiza cambios CSS en vivo en el navegador</h3> |
67 | | -<p> |
68 | | - ¿Te suena de algo ese baile de "guardar/recargar" que llevamos años haciendo? ¿Ése en el que haces |
69 | | - cambios en tu editor, pulsas guardar, cambias al navegador y recargas para por fin poder ver el |
70 | | - resultado? Con Brackets, ya no tienes que hacerlo. |
71 | | -</p> |
72 | | -<p> |
73 | | - ¡Brackets abrirá una <em>conexión en vivo</em> con tu navegador local y le enviará los cambios en el |
74 | | - CSS conforme escribas! Puede que ya estés haciendo algo parecido con herramientas basadas en navegador, |
75 | | - pero con Brackets ya no necesitas copiar y pegar el CSS final de vuelta a tu editor. ¡Tu código se |
76 | | - ejecuta en el navegador, pero vive en tu editor! |
77 | | -</p> |
| 13 | + <h1>PRIMEROS PASOS CON BRACKETS</h1> |
| 14 | + <h2>¡Ésta es tu guía!</h2> |
78 | 15 |
|
79 | | -<h3>Localiza elementos HTML y reglas CSS en vivo</h3> |
80 | | -<p> |
81 | | - Para ayudarte a visualizar la relación entre tu CSS y HTML, cuando tu cursor se encuentre sobre |
82 | | - una regla de CSS, Brackets resaltará todos los elementos afectados en el navegador. Además, cuando |
83 | | - estés editando un archivo HTML, Brackets también destacará los elementos correspondientes en tu |
84 | | - navegador. |
85 | | -</p> |
86 | | - |
87 | | -<samp> |
88 | | - Si tienes instalado Google Chrome, puedes probarlo tú mismo. Pulsa en el icono del rayo de la |
89 | | - esquina superior derecha o presiona <kbd>Cmd/Ctrl + Alt + P</kbd>. Cuando Desarrollo en Vivo está |
90 | | - funcionando en un documento HTML, todos los documentos CSS relacionados se pueden editar en |
91 | | - tiempo real. El icono pasará de gris a dorado cuando Brackets consiga establecer una conexión |
92 | | - con tu navegador. |
93 | | - |
94 | | - Ahora, coloca el cursor sobre el tag <!-- <img> --> que se encuentra un poco más arriba. Fíjate cómo |
95 | | - aparece el resaltado azul alrededor de la imagen en Chrome. Luego, utiliza <kbd>Cmd/Ctrl + E</kbd> |
96 | | - para abrir las reglas de CSS existentes. Intenta cambiar el tamaño del borde de 1 a 10 píxeles o |
97 | | - cambia el color del fondo de "dimgray" a "hotpink". Si Brackets y tu navegador están funcionando en |
98 | | - paralelo, verás los cambios reflejados de manera instantánea en tu navegador. Genial, ¿verdad? |
99 | | -</samp> |
| 16 | + <!-- |
| 17 | + HECHO CON <3 Y JAVASCRIPT |
| 18 | + --> |
| 19 | + |
| 20 | + <p> |
| 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 |
| 23 | + herramientas para JavaScript, HTML, CSS y el resto de tecnologías web. Éste es nuestro humilde |
| 24 | + comienzo. |
| 25 | + </p> |
| 26 | + |
| 27 | + <!-- |
| 28 | + ¿QUÉ ES BRACKETS? |
| 29 | + --> |
| 30 | + <p> |
| 31 | + <em>Brackets es un editor diferente.</em> |
| 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 |
| 34 | + lo usamos todos los días para desarrollar Brackets. También tiene algunas características únicas como |
| 35 | + Edición Rápida, Desarrollo en Vivo y más que no encontrarás en otros editores. |
| 36 | + Sigue leyendo para saber más sobre cómo sacar provecho de estas características |
| 37 | + </p> |
100 | 38 |
|
101 | | -<p class="note"> |
102 | | - Actualmente, Brackets sólo soporta Desarrollo en Vivo para CSS. En estos momentos estamos trabajando en |
103 | | - añadir soporte para Desarrollo en Vivo de HTML y JavaScript. En la versión actual, no podrás ver tus cambios |
104 | | - en HTML hasta que guardes el archivo. Las actualizaciones automáticas sólo son posibles en Google Chrome en |
105 | | - estos momentos. Queremos trasladar esta funcionalidad a todos los grandes navegadores, y estamos deseando |
106 | | - poder trabajar con ellos para conseguirlo. |
107 | | -</p> |
108 | | - |
109 | | -<!-- |
110 | | - HAZNOS SABER LO QUE PIENSAS |
111 | | ---> |
112 | | -<h2>Involúcrate</h2> |
113 | | -<p> |
114 | | - Brackets es un proyecto de código abierto. Desarrolladores web de todo el mundo están contribuyendo |
115 | | - a construir un mejor editor de código. Haznos saber lo que piensas, comparte tus ideas o contribuye |
116 | | - directamente al proyecto. |
117 | | -</p> |
118 | | -<ul> |
119 | | - <li><a href="http://brackets.io">Brackets.io</a></li> |
120 | | - <li><a href="http://blog.brackets.io">Blog del equipo de Brackets</a></li> |
121 | | - <li><a href="http://github.com/adobe/brackets">Brackets en GitHub</a></li> |
122 | | - <li><a href="http://github.com/adobe/brackets/wiki">Wiki de Brackets</a></li> |
123 | | - <li><a href="http://groups.google.com/group/brackets-dev">Lista de correo de los desarrolladores de Brackets</a></li> |
124 | | - <li><a href="https://twitter.com/#!/brackets">@Brackets en Twitter</a></li> |
125 | | - <li>Habla con los desarrolladores de Brackets por IRC en #brackets en Freenode</li> |
126 | | -</ul> |
| 39 | + <h2>Estamos intentando algunas cosas nuevas</h2> |
| 40 | + |
| 41 | + <!-- |
| 42 | + LA RELACIÓN ENTRE HTML, CSS Y JAVASCRIPT |
| 43 | + --> |
| 44 | + <h3>Edición rápida de CSS y JavaScript</h3> |
| 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> |
| 50 | + fuera de un editor rápido, todos se cerrarán a la vez. |
| 51 | + </p> |
| 52 | + |
| 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 |
| 57 | + encontrar la que quieres modificar. |
| 58 | + </samp> |
| 59 | + |
| 60 | + <a href="screenshots/quick-edit.png"> |
| 61 | + <img alt="Una captura de pantalla con un Editor Rápido de CSS" src="screenshots/quick-edit.png" /> |
| 62 | + </a> |
| 63 | + |
| 64 | + <p> |
| 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 |
| 67 | + lo que sólo puedes usar la característica de Edición Rápida cuando el cursor está en un editor "completo". |
| 68 | + </p> |
| 69 | + |
| 70 | + <!-- |
| 71 | + LIVE PREVIEW |
| 72 | + --> |
| 73 | + <h3>Visualiza cambios en archivos CSS en vivo en el navegador</h3> |
| 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, |
| 77 | + ya no tienes que hacerlo. |
| 78 | + </p> |
| 79 | + <p> |
| 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. |
| 83 | + ¡Tu código se ejecuta en el navegador, pero vive en tu editor! |
| 84 | + </p> |
| 85 | + |
| 86 | + <h3>Resaltado en vivo de elementos HTML y reglas CSS</h3> |
| 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 |
| 91 | + navegador. |
| 92 | + </p> |
| 93 | + |
| 94 | + <samp> |
| 95 | + Si tienes instalado Google Chrome, puedes probarlo tú mismo. Haz click sobre el icono del rayo de la |
| 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 |
| 98 | + tiempo real. El icono pasará de gris a dorado cuando Brackets consiga establecer una conexión |
| 99 | + con tu navegador. |
| 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 |
| 105 | + cambios reflejados de manera instantánea en tu navegador. Genial, ¿verdad? |
| 106 | + </samp> |
| 107 | + |
| 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 |
| 113 | + esta funcionalidad a todos los grandes navegadores. |
| 114 | + </p> |
| 115 | + |
| 116 | + <h3>Vista Rápida</h3> |
| 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 |
| 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, |
| 122 | + y éste mostrará una vista en miniatura de la misma. |
| 123 | + </p> |
| 124 | + |
| 125 | + <samp> |
| 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 al principio de esta página, pasando el cursor por cualquiera de los valores para las |
| 130 | + imágenes de fondo. Para probar la vista previa de imágenes, coloca el cursor sobre la imagen con la captura |
| 131 | + de pantalla incluída antes en este documento. |
| 132 | + </samp> |
| 133 | + |
| 134 | + <!-- |
| 135 | + HAZNOS SABER LO QUE PIENSAS |
| 136 | + --> |
| 137 | + <h2>Involúcrate</h2> |
| 138 | + <p> |
| 139 | + Brackets es un proyecto de código abierto. Desarrolladores web de todo el mundo están contribuyendo |
| 140 | + a construir un mejor editor de código. Haznos saber lo que piensas, comparte tus ideas o contribuye |
| 141 | + directamente al proyecto. |
| 142 | + </p> |
| 143 | + <ul> |
| 144 | + <li><a href="http://brackets.io">Brackets.io</a></li> |
| 145 | + <li><a href="http://blog.brackets.io">Blog del equipo de Brackets</a></li> |
| 146 | + <li><a href="http://github.com/adobe/brackets">Brackets en GitHub</a></li> |
| 147 | + <li><a href="https://github.com/adobe/brackets/wiki/Brackets-Extensions">Extensiones para Brackets</a></li> |
| 148 | + <li><a href="http://github.com/adobe/brackets/wiki">Wiki de Brackets</a></li> |
| 149 | + <li><a href="http://groups.google.com/group/brackets-dev">Lista de correo de los desarrolladores de Brackets</a></li> |
| 150 | + <li><a href="https://twitter.com/#!/brackets">@Brackets en Twitter</a></li> |
| 151 | + <li>Habla con los desarrolladores de Brackets por IRC en #brackets en Freenode</li> |
| 152 | + </ul> |
127 | 153 |
|
128 | 154 | </body> |
129 | 155 | </html> |
|
0 commit comments