adobe · jasonsanjose · Sep 10, 2012 · Aug 24, 2012 · Aug 24, 2012 · Aug 25, 2012
diff --git a/samples/es/Primeros Pasos/index.html b/samples/es/Primeros Pasos/index.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html>
+
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <title>PRIMEROS PASOS CON BRACKETS</title>
+        <meta name="description" content="Una guía interactiva de primeros pasos para Brackets.">
+        <link rel="stylesheet" href="main.css">
+    </head>
+    <body>
+
+<h1>PRIMEROS PASOS CON BRACKETS</h1>
+<h2>¡Ésta es tu guía!</h2>
+
+<!--
+    HECHO CON <3 Y JAVASCRIPT
+-->
+
+<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 relacionadas. Éste es nuestro
+    humilde comienzo.
+</p>
+
+<!--
+    ¿QUÉ ES BRACKETS?
+-->
+<p>
+    <em>Estás viendo una versión preliminar de Brackets.</em>
+    En muchos aspectos, Brackets es otro tipo de editor. La gran diferencia es que está escrito en
+    JavaScript. Y es que, aunque Brackets no esté listo todavía para tu uso diario, nosotros lo estamos
+    utilizando todos los días para construir Brackets.
+</p>
+
+
+<h2>Estamos intentando algunas cosas nuevas</h2>
+
+<!--
+    LA RELACIÓN ENTRE HTML, CSS Y JAVASCRIPT
+-->
+<h3>Edición rápida de CSS y JavaScript</h3>
+<p>
+    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 CSS relacionado. Ajusta tu CSS, pulsa <kbd>ESC</kbd> y de vuelta
+    al HTML. O simplemente mantén 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, todas se cerrarán a la vez. Ya no es necesario estar cambiando 
+    de documentos continuamente.
+</p>
+
+<samp>
+    ¿Quieres verlo funcionando? Coloca tu cursor sobe el tag <!-- <samp> --> superior y pulsa
+    <kbd>Cmd/Ctrl + E</kbd>. Deberías ver aparecer un editor rápido de CSS por encima. A la derecha
+    verás un listado de todas las reglas CSS relacionadas con este tag. Simplemente desplázate entre las
+    reglas con <kbd>Alt + Up/Down</kbd> para encontrar la que quieres modificar.
+</samp>
+
+<a href="screenshots/brackets-quick-edit.png">
+    <img alt="Una captura de pantalla con un Editor Rápido de CSS" src="screenshots/brackets-quick-edit.png" />
+</a>
+
+<!--
+    LIVE PREVIEW
+-->
+<h3>Visualiza cambios CSS en vivo en el navegador</h3>
+<p>
+    ¿Te suena de algo ese baile de "guardar/recargar" que llevamos años haciendo? ¿Ése en el que haces 
+    cambios en tu  editor, pulsas 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
+    CSS conforme escribas! Puede que ya estés haciendo algo parecido con herramientas basadas en navegador,
+    pero con Brackets ya no necesitas copiar y pegar el CSS final de vuelta a tu editor. ¡Tu código se 
+    ejecuta en el navegador, pero vive en tu editor!
+</p>
+
+<samp>
+    Si tienes instalado Google Chrome, puedes probarlo tú mismo. Pulsa en el icono del rayo de la
+    esquina superior derecha o presiona <kbd>Cmd/Ctrl + Alt + P</kbd>. Cuando Desarrollo en Vivo 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.
+
+    Ahora, coloca el cursor sobre el tag <!-- <img> --> que se encuentra un poco más arriba y utiliza 
+    <kbd>Cmd/Ctrl + E</kbd> para abrir las reglas de CSS existentes. Intenta cambiar el tamaño del borde
+    de 1 a 10 píxeles o cambia el color del fondo de "dimgray" 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 Desarrollo en Vivo para CSS. Añadiremos soporte para Desarrollo en
+    Vivo de HTML y JavaScript en próximas versionas. Las actualizaciones automáticas sólo son posibles en
+    Google Chrome en estos momentos. Queremos trasladar esta funcionalidad a todos los grandes navegadores,
+    y estamos deseando poder trabajar con ellos para conseguirlo.
+</p>
+
+<!--
+    HAZNOS SABER LO QUE PIENSAS
+-->
+<h2>Involúcrate</h2>
+<p>
+    Brackets es un proyecto de código abierto. Desarrolladores web de todo el mundo están contribuyendo
+    a construir un mejor editor de código. 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="http://github.com/adobe/brackets">Brackets en GitHub</a></li>
+    <li><a href="http://github.com/adobe/brackets/wiki">Wiki de Brackets</a></li>
+    <li><a href="http://groups.google.com/group/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 #brackets en Freenode</li>
+</ul>
+
+    </body>
+</html>
+<!--
+
+    [[[[[[[[[[[[[[[     ]]]]]]]]]]]]]]]
+    [::::::::::::::     ::::::::::::::]
+    [::::::::::::::     ::::::::::::::]
+    [::::::[[[[[[[:     :]]]]]]]::::::]
+    [:::::[                     ]:::::]
+    [:::::[                     ]:::::]
+    [:::::[                     ]:::::]
+    [:::::[                     ]:::::]
+    [:::::[    CODE THE WEB     ]:::::]
+    [:::::[  http://brackets.io ]:::::]
+    [:::::[                     ]:::::]
+    [:::::[                     ]:::::]
+    [:::::[                     ]:::::]
+    [:::::[                     ]:::::]
+    [::::::[[[[[[[:     :]]]]]]]::::::]
+    [::::::::::::::     ::::::::::::::]
+    [::::::::::::::     ::::::::::::::]
+    [[[[[[[[[[[[[[[     ]]]]]]]]]]]]]]]
+
+-->
diff --git a/samples/es/Primeros Pasos/main.css b/samples/es/Primeros Pasos/main.css
@@ -0,0 +1,36 @@
+html {
+    background-color: #eeeeee;
+}
+
+body {
+    margin: 0 auto;
+    padding: 2em;
+    max-width: 800px;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    line-height: 1.5em;
+    color: #333333;
+    background-color: #ffffff;
+    -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
+    -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
+    box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
+}
+
+h1, h2, h3, h4, h5, h6 {
+    line-height: 1.3em;
+}
+
+samp
+{
+    /* hide <samp> from the browser so we can show cool features in Edge Code */
+    display: none;
+}
+
+img
+{
+    border: 1px solid black;
+    background-color: dimgray;
+    padding: 10px;
+    margin: 10px 0;
+    max-width: 95%;
+}
diff --git a/samples/es/Primeros Pasos/screenshots/brackets-quick-edit.png b/samples/es/Primeros Pasos/screenshots/brackets-quick-edit.png