Add Spanish workshops: Aventura React and Logic Gates (extracted from #604)

content/espanol/aventura-react/_index.md

@@ -0,0 +1,25 @@
+---
+title: "React: Aventura por Costa Rica"
+description: "Aprender React con Javacript"
+date: 2019-09-22T23:26:18-05:00
+prereq: "Conocimiento en HTML y CSS"
+difficulty: "Normal"
+---
+
+## Introducción
+
+<p style="font-size: 1.8rem; font-weight: bold;">Bienvenidos, te acabas de ganar un tour a Costa Rica.</p>
+<p style="font-size: 1.8rem;">A continuación verás un mapa de Costa Rica con las cosas más importantes de este hermoso país</p>
+
+<img src="https://i.pinimg.com/736x/ac/f1/87/acf187a6547aa6d4126f4ec8137c8ac1.jpg" alt="Mapa de Costa Rica" style="width:50%;">
+
+<p style="font-size: 1.8rem; color: #333; line-height: 1.8;">En este nuevo aprendizaje te ayudará Sharky es un tiburón muy raro que apareció en las aguas de Costa Rica descubierto por unos pescadores!</p>
+<p style="font-size: 1.8rem; color: #555; font-style: italic;">Puedes creerlo un tiburón de un color anaranjado!</p>
+
+<img src="media/Sharky.png" alt="Sharky" style="width:25%;">
+
+## Contenido
+<details>
+<summary>Secciones</summary>
+{{% children /%}}
+</details>

content/espanol/aventura-react/activity-1.md

@@ -0,0 +1,116 @@
+---
+title: "Actividad 1 - Rescatando tortugas"
+date: 2019-07-25T13:24:17-07:00
+weight: 4
+draft: false
+---
+
+<img src="../media/Tortuga.png" alt="Abeja imaginando un cuadrado" style="width:25%;);">
+
+<p style="font-size:1.8rem; text-align:center; color:#333;">Entra en el link de abajo para construir tú mismo el app de Costa Rica</p>
+
+<a class="my-2 mx-4 btn btn-info" href="https://playcode.io/react" target="_blank" style="display:block; text-align:center; background-color:#007BFF; color:white; padding:10px 20px; text-decoration:none; border-radius:5px; font-size:1.5rem; margin:20px auto; width:fit-content;">Crea tu proyecto de React!</a>
+
+<p style="font-size:1.5rem; line-height:1.8; color:#555;">¡Muy bien! Ahora vamos a construir paso a paso un componente para salvar a tortugas en la isla Tortuguero.</p>
+
+<p style="font-size:1.5rem; line-height:1.8; color:#555;">Imagina que React es una caja enorme llena de piezas LEGO. Cada pieza (componente) tiene un trabajo, por ejemplo:</p>
+
+<ul style="font-size:1.5rem; line-height:1.8; color:#333; padding-left:20px;">
+  <li>Una pieza puede ser un botón</li>
+  <li>Otra pieza puede ser una pantalla</li>
+  <li>Otra puede ser una lista</li>
+  <li>Otra puede ser una imagen</li>
+</ul>
+
+<p style="font-size:1.5rem; line-height:1.8; color:#555;">Cuando juntas todas esas piezas… ¡se forma tu aplicación completa!</p>
+
+Empecemos
+
+
+{{% notice tip %}}
+
+
+
+<h2 style="font-size:2rem; color:#007BFF;">import { useState } from "react";</h2>
+
+<p style="font-size:1.6rem; color:#444; line-height:1.8;">¿Qué significa <code>import { useState } from "react";</code>?</p>
+<p style="font-size:1.6rem; color:#444; line-height:1.8;">En React, algunas herramientas no vienen listas. Hay que pedirlas de la cajita de React. <code>useState</code> es una de esas herramientas especiales que nos deja guardar cosas que cambian.</p>
+<p style="font-size:1.6rem; color:#444; line-height:1.8;">Por ejemplo: cuántas tortugas quedan por salvar.</p>
+
+<h2 style="font-size:2rem; color:#007BFF;">export default function Tortugero()</h2>
+
+<p style="font-size:1.6rem; color:#444; line-height:1.8;">¿Qué es <code>export default function Tortugero()</code>?</p>
+<p style="font-size:1.6rem; color:#444; line-height:1.8;">Aquí estamos creando un componente. <code>export default</code> significa: “Este es el archivo principal, lo puedes usar en otros lugares”.</p>
+<p style="font-size:1.6rem; color:#444; line-height:1.8;"><code>function Tortugero()</code> es el nombre del componente. Como una caja que dice: <b>"Esto es Tortugero"</b>.</p>
+
+{{% /notice %}}
+
+
+{{% notice tip %}}
+
+<h2 style="font-size:2rem; color:#007BFF;">¿Qué es <code>const [tortugas, setTortugas] = useState(0);</code>?</h2> <p style="font-size:1.6rem; color:#444; line-height:1.8;"> Imagina que tenemos una caja mágica donde guardamos un número. Ese número es la cantidad de tortugas salvadas. </p> <ul style="font-size:1.6rem; color:#444; line-height:1.8;"> <li><b>tortugas</b> → lo que hay en la caja (un número)</li> <li><b>setTortugas</b> → la llave mágica que permite cambiar ese número</li> <li><b>useState(0)</b> → empieza en 0 tortugas salvadas</li> </ul> <p style="font-size:1.6rem; color:#444; line-height:1.8;"> Así React recuerda cuántas tortugas llevas salvadas. </p>
+
+{{% /notice %}}
+
+{{% notice tip %}}
+
+<h2 style="font-size:2rem; color:#007BFF;">¿Qué es <code>const total = 10;</code>?</h2> <p style="font-size:1.6rem; color:#444; line-height:1.8;"> Este número es la meta del juego: ¡hay 10 tortugas atrapadas en Tortuguero! Aquí estamos diciendo: <b>"Debemos salvar 10 tortugas"</b>. </p> <p style="font-size:1.6rem; color:#444; line-height:1.8;"> Podrías cambiarlo a otro número para hacer el juego más fácil o más difícil. </p>
+
+{{% /notice %}}
+
+{{% notice tip %}}
+
+<h2 style="font-size:2rem; color:#007BFF;">¿Qué hace <code>salvarTortuga()</code>?</h2> <p style="font-size:1.6rem; color:#444; line-height:1.8;"> Esta función se activa hacemos clic en el botón <b>"Salvar tortuga"</b>. </p> <ul style="font-size:1.6rem; color:#444; line-height:1.8;"> <li>Revisa si aún quedan tortugas por salvar → <code>tortugas &lt; total</code></li> <li>Si sí, suma una tortuga más → <code>setTortugas(tortugas + 1)</code></li> </ul> <p style="font-size:1.6rem; color:#444; line-height:1.8;"> Cada clic rescata una tortuga nueva. </p>
+
+``` jsx
+if (tortugas < total) setTortugas(tortugas + 1);
+``` 
+
+{{% /notice %}}
+
+{{% notice tip %}}
+
+<h2 style="font-size:2rem; color:#007BFF;">¿Qué hace <code>reiniciar()</code>?</h2> <p style="font-size:1.6rem; color:#444; line-height:1.8;"> Cuando terminamos la misión, pueden volver a empezar. Esta función pone el contador de tortugas en 0 de nuevo. </p> <p style="font-size:1.6rem; color:#444; line-height:1.8;"> Así pueden jugar otra vez desde el inicio. </p>
+
+``` jsx
+const reiniciar = () => setTortugas(0);
+``` 
+
+{{% /notice %}}
+
+**Importante colocar un div con el classname= Tortugero**
+
+```jsx 
+<p>Has salvado {tortugas} de {total} tortugas</p>
+``` 
+
+Aqui se mostraran las tortugas que has salvado y el total.
+
+``` jsx
+{tortugas < total ? (
+        <button onClick={salvarTortuga}>Salvar tortuga</button>
+      ) : (
+        <>
+          <p className="exito">Todas las tortugas están a salvo!</p>
+          <button onClick={reiniciar}>Reiniciar misión</button>
+        </>
+      )}
+``` 
+
+**El button responde a la funcion SALVARTORTUGAS para ir sumando rescates**
+
+El botton reiniciar limpia la mision, para que puedas rescatar mas tortugas.
+
+Luego para mostrar lo que acabamos de construir debemos importarlo en el `"App.jsx"`
+
+``` jsx
+import Tortugero from "./components/Tortugero.jsx"
+``` 
+
+Con el nombre `"Tortugero"` podemos implementar una nueva "etiqueta" y asi mostramos todo lo que contiene el archivo `"Tortugero.jsx"`
+
+![alt text height="200px" width="50%"](../media/Components1Tortugero.png "Tortugero")
+
+
+
+

content/espanol/aventura-react/activity-2.md

@@ -0,0 +1,104 @@
+---
+title: "Actividad 2 - Limpiando playas"
+date: 2019-07-25T13:24:17-07:00
+weight: 5
+draft: false
+---
+
+<img src="../media/playas.png" alt="Limpieza de playa" style="width:50%;);">
+
+¡Genial! Lograste salvar las tortugas. Ahora para a limpiar playas de Costa Rica aprenderemos a usar constantes pero con arrays, for loops y variables let.
+
+**Escribe este archivo `"Playas.jsx"`**
+
+En primer lugar lo que vamos a hacer es crear una array que ahí puedes guardar una cantidad x de elementos, mira este ejemplo!
+
+Así se ven normalmente las array en react.
+
+``` jsx
+const [Dinero, setDinero] = useState([
+    "Colones",
+    "Dolares",
+    "Euros",
+    "Pesos"
+  ]);
+```
+
+Crea una constante llamada **desechos y setDesechos** para esta actividad. Dentro de esa const pon elementos que son basura en las playas.
+
+Tenemos que crear una funcion para poder limpiar la playa de los desechos de la array.
+
+``` jsx
+const depositar = (d) => setDinero(dinero.filter((x) => x !== d));
+
+``` 
+
+Este codigo deposita dinero en un banco, puedes usarlo para limpiar la playa!!!
+
+
+
+{{% notice tip %}}
+### ¿Qué hace esta función?
+<p style="font-size:1.6rem; color:#444; line-height:1.8;"><code>const depositar = (d) => setDinero(dinero.filter((x) => x !== d));</code>?</p>
+<p style="font-size:1.6rem; color:#444; line-height:1.8;">Cuando le das click elimina lo que tienes en la array</p>
+<p style="font-size:1.6rem; color:#444; line-height:1.8;">El filter, revisa uno por uno, borra el qeu coincida y guarda la lista sin dinero</p>
+<p style="font-size:1.6rem; color:#444; line-height:1.8;">Ejemplo, quito los colones y que quedo con los dolares</p>
+
+{{% /notice %}}
+
+Luego debemos crear una variable llamada `"let"` a diferencia de la const, let si se puede modificar
+
+Le ponemos por nombre `"botones = [];"`
+
+```jsx
+let botones = [];
+
+for (let i = 0; i < desechos.length; i++) {
+  botones.push(
+    <button key={i} onClick={() => limpiar(desechos[i])}>
+      Recolectar {desechos[i]}
+    </button>
+  );
+}
+
+```
+
+Con esto nos ahorramos el escribir 4 botones a mano.
+
+{{% notice info %}}
+### El ciclo hace esto:
+<p style="font-size:1.6rem; color:#444; line-height:1.8;">1. Empieza en el primer desecho.</p>
+<p style="font-size:1.6rem; color:#444; line-height:1.8;">2. Crea un botón para ese desecho.</p>
+<p style="font-size:1.6rem; color:#444; line-height:1.8;">3. Pasa al siguiente.</p>
+<p style="font-size:1.6rem; color:#444; line-height:1.8;">4. Repite hasta terminar.</p>
+
+<p style="font-size:1.6rem; color:#444; line-height:1.8;">El boton tiene el Onclick que sirve para limpiar</p>
+
+**Si la lista cambia, React vuelve a dibujar solo los botones que faltan.**
+
+{{% /notice %}}
+
+**Lo que se muestra en pantalla!!!**
+
+```jsx
+return (
+  <div className="playas-container">
+      <h2>Limpieza de las Playas</h2>
+      <p className="instruccion">
+        Haz clic en los desechos para recolectarlos y ayudar a proteger a las
+        especies marinas
+      </p>
+
+      <div className="botones">{botones}</div>
+
+      //Aqui muestra el mensaje final
+      {desechos.length === 0 && (
+        <p className="mensaje-final">Playa limpia!</p>
+      )}
+    </div>
+);
+```
+
+**NO OLVIDES IMPORTARLO EN EL APP.JSX**
+
+![alt text height="200px" width="50%"](../media/Components2Playa.png "Playa")

content/espanol/aventura-react/activity-3.md

@@ -0,0 +1,94 @@
+---
+title: "Actividad 3 - Finca del café"
+date: 2019-07-25T13:24:17-07:00
+weight: 6
+draft: false
+---
+
+¿Sabes que tan importante es el café en Costa Rica?
+
+El café de Costa Rica es reconocido mundialmente por su alta calidad, gracias a la combinación de suelos volcánicos fértiles, un clima ideal y el cultivo exclusivo de granos de Arábica. El país prohíbe el cultivo de la variedad Robusta para garantizar un producto suave y equilibrado. El café ha sido históricamente vital para la economía y la cultura del país, y se cultiva en diversas regiones, incluyendo Tarrazú, que es una de las más famosas.
+
+Así que vamos a aprender sobre el proceso del café y porque no aprender más de React con **Sharky**
+
+**Escribe este archivo `"FincaCafe.jsx"`**
+
+<img src="../media/cafe.png" alt="Cafe" style="width:50%;);">
+
+Para hacer café primero debemos saber que esto lleva un proceso importante que contiene algunas etapas, que veremos a continuación.
+
+{{% notice info %}}
+### Aprenderemos algunas cosas diferentes
+<p style="font-size:1.6rem; color:#444; line-height:1.8;">1. Usaremos un número para saber en qué etapa de una historia estamos</p>
+<p style="font-size:1.6rem; color:#444; line-height:1.8;">2. Cambiamos lo que vemos según ese número</p>
+<p style="font-size:1.6rem; color:#444; line-height:1.8;">3. No estamos contando, estamos navegando pasos</p>
+
+{{% /notice %}}
+
+```jsx
+const etapas = [
+  "Sembrar café",
+  "Cosechar granos",
+  "Secar al sol",
+  "Tostar",
+  "Disfrutar"
+];
+
+const [indice, setIndice] = useState(0);
+
+```
+
+**Aqui creamos una constante que se llama `"ETAPAS"`, pero tambien tenemos otra constante que se llama `"INDICE"`**
+
+{{% notice info %}}
+### Ya que esto quiere decir que:
+<p style="font-size:1.6rem; color:#444; line-height:1.8;">El número 0 significa etapa 1</p>
+<p style="font-size:1.6rem; color:#444; line-height:1.8;">El número 1 significa etapa 2</p>
+<p style="font-size:1.6rem; color:#444; line-height:1.8;">El número 2 significa etapa 3</p>
+
+{{% /notice %}}
+
+Ya con esto podemos crear una const llamada `"siguiente"` para que vayamos pasando entre etapas.
+
+```jsx
+const siguiente = () => {
+    if (indice < etapas.length - 1) {
+      setIndice(indice + 1);
+    }
+  };
+```
+
+**Como se muestra:**
+
+```jsx
+return (
+    <div className="finca-container">
+      <h2>Finca del Abuelo</h2>
+      <p className="etapa">{etapas[indice]}</p>
+
+      //Estoy en un nivel MENOR que el ultimo nivel?
+      {indice < etapas.length - 1 ? (
+        <button className="btn-siguiente" onClick={siguiente}>
+          Siguiente etapa
+        </button>
+      ) : (
+        //LLEGASTE A LA ULTIMA ETAPA
+        <h3 className="mensaje-final">
+          Has completado todo el proceso del café!
+        </h3>
+      )}
+    </div>
+  );
+```
+
+{{% notice tip %}}
+### Imagina que estas jugando un juego con 5 niveles
+<p style="font-size:1.6rem; color:#444; line-height:1.8;">etapas.length = Cuántos niveles tiene el juego (ejemplo: 5 niveles)</p>
+<p style="font-size:1.6rem; color:#444; line-height:1.8;">indice = En qué nivel estás tú ahora (puede ser nivel 1, 2, 3...)</p>
+<p style="font-size:1.6rem; color:#444; line-height:1.8;">El número 2 significa etapa 3</p>
+
+{{% /notice %}}
+
+**NO OLVIDES IMPORTARLO EN EL APP.JSX**
+
+![alt text height="200px" width="50%"](../media/Components3FincaCafe.png "Finca de cafe")