diff --git a/lib/step.rb b/lib/step.rb index 7bb8e49..1321d95 100644 --- a/lib/step.rb +++ b/lib/step.rb @@ -54,6 +54,7 @@ def insert file @@header_sections = { steps:"Steps", + pasos:"Pasos", explanation:"Explanation", explicacion:"Explicación", overview:"Overview", diff --git a/sites/es/frontend/javascript_basico.step b/sites/es/frontend/javascript_basico.step new file mode 100644 index 0000000..ea71251 --- /dev/null +++ b/sites/es/frontend/javascript_basico.step @@ -0,0 +1,109 @@ +spanish_goals do + goal "Agregar una etiqueta javascript al documento." + goal "Escribir un script sencillo para interactuar con él." +end + +pasos do + + spanish_step do + message "Ahora que haz completado los retos para tu index.html y los archivos CSS relacionados, regresaremos a hechar un vistazo a tu archivo hello.html." + message "CSS hace que tus páginas sean bonitas, pero es **JavaScript** el que hace interactivas la mayoría de las páginas. Ve a tu archivo hello.html de nuevo y agrega una etiqueta script a tu página para que puedas empezar a escribir código JavaScript. En la parte inferior de tu documento, abajo de los párrafos, agrega lo siguiente:" + + source_code :html, < + +HTML + + message "Guarda y actualiza la página en el navegador. Ésta debería permanecer sin cambio alguno." + end + + + spanish_step do + message "Escribe en este pequeño script. Javascript es case-specific y exigente en la sintaxis, por lo tanto si tu script no corre, revisa cuidadosamente errores de tipografía." + + source_code :html, < + function reemplazaNombre() { + var miNuevoNombre = window.prompt('¡Elige un nuevo nombre!'); + document.getElementById('nombre-usuario').innerHTML = miNuevoNombre; + } + + document.onclick = reemplazaNombre; + +HTML + + message <<-MARKDOWN +Actualiza la página, y da clic sobre uno de los párrafos. Deberías ver un mensaje del navegador como éste: + + +Cuando respondas el mensaje, deberías ver que lo que acabas de introducir está en el texto en negrita que tenía tu nombre. + + + MARKDOWN + + important "Toma años convertirse en un experto en Javascript. No te preocupes si el último paso es confuso para tí o tienes problemas al intentar correr tu script. Lo más importante aquí es que debes notar que puedes escribir código Javascript **directamente** en tu documento si así lo quieres, poniéndolo dentro de una etiqueta `script`, y usar este script para agregarle interactividad a tu página." + + end + +end + + +explanation do + + message <<-MARKDOWN + +## ¿Por qué JavaScript? + +Javascript te permite hacer tus páginas interactivas. Puedes usarlo para construir +cualquier cosa desde una simple animación hasta una gigantesca aplicación Web como +Twitter o Github. Te da control total para agregar, remover, o modificar contenido +que haz hecho con HTML. También puedes usarlo para cambiar estilos o agregar o +remover clases. + +Escribir Javascript en una página web puede ser difícil, porque no empiezas con +un espacio en blanco. Todo el contenido de un navegador web, incluyendo los +objetos incorporados del navegador y tus elementos HTML están ahí también. Sólo +debes averiguar como obtenerlos con Javascript para que puedas manipularlos. + +## ¿Qué hizo este script? + +Explicaremos línea por línea: + +La primera línea declara una función 'function', que es una porción de código +reusable a la que puedes hacer referencia después llamándola por su nombre: + + MARKDOWN + source_code :js, "function reemplazaNombre() {" + message <<-MARKDOWN + +Las siguientes dos líneas son pasos que la función hará. La primera crea una +variable llamada 'miNuevoNombre' y le asigna un valor. La ventana del navegador +intentará obtener este valor usando su método `prompt`, una función incorporada +que sabe cómo enviar un cuadro de texto emergente para que tú lo llenes. + + MARKDOWN + source_code :js, "var miNuevoNombre = window.prompt('¡Elige un nuevo nombre!');" + message <<-MARKDOWN + +En la siguiente línea, entra en tu documento HTML, y, usando una función incorporada +al documento sabe que puede encontrar un elemento por su ID, localiza tu span +'nombre-usuario'. Entonces pone en el contenido HTML del span el valor de la variable +'miNuevoNombre'. + + MARKDOWN + source_code :js, "document.getElementById('nombre-usuario').innerHTML = miNuevoNombre;" + message <<-MARKDOWN + +La `}` cierra la función que empezaste a definir en la primera línea. + +La línea final le dice al navegador, 'Cuando dé clic al documento, corre esa función llamada reemplazaNombre que definí' + +MARKDOWN +source_code :js, "document.onclick = reemplazaNombre;" + + +tip "Algunos elementos de este script, como 'document.onclick' o la propiedad '.innerHTML', están un poco desactualizados. Éstos son excelentes medios para comenzar a jugar con Javascript, pero cuando escribas tu propio Javascript, tal vez quieras usar técnicas más contemporáneas o una librería como jQuery que hará estas cosas por tí de una manera menos torpe." + +end + +next_spanish_step 'jquery'