Major UX changes for workshops website

content/english/_index.md

@@ -5,8 +5,10 @@ draft: false
 hidemetadata: true
 ---
 
-## Workshop Projects
+## Workshops
+
 {{< workshop-list style="card" depth="1" showhidden="false" description="true"  />}}
 
 ## Contributing
+
 Want to help improve our workshops or our website? Click here: **[Workshop Contributor Guidelines](guidelines/)**!

content/english/chatbot/_index.md

@@ -12,25 +12,30 @@ icon: "fas fa-code"
 In this workshop, you will learn how to create your own chatbot. By the end of the workshop, you will have a chatbot that can have a simple conversation with the user. You will learn how to use AIML, a language for creating chatbots. You will also learn how to use Pandorabots, a platform for hosting chatbots.
 
 In order to complete the workshop, you will need an email address to sign up for a Pandorabots account.
+<p style="text-align: center; "><img src="./img/introduction.png" alt="" width="60%"/></p>
+
 
 ## What is a chatbot?
 A chatbot is a computer program that simulates human conversation to answer questions. 
+<img src="./img/surprised.png" alt="" width="20%" style="" />
 
 ## Examples of chatbots
 Chances are you've already interacted with a chatbot as part of your daily life. 
 
 You might use a virtual assistant to set a reminder on your phone, or to play a song on your smart speaker.
-<p style="text-align: center; "><img src="./img/smart_device.jpg" alt="Two women talking to each other with speech bubbles in the background" width="40%"/></p>
+<p style="text-align: center; "><img src="./img/smart_device.jpg" alt="Two women talking to each other with speech bubbles in the background" width="35%"/></p>
 
 You might have interacted with a chatbot to get help with a product or service.
 
-<p style="text-align: center; "><img src="./img/customer_service_chatbot.png" alt="new account landing page on github" width="40%"/></p>
+<p style="text-align: center; "><img src="./img/customer_service_chatbot.png" alt="new account landing page on github" width="20%"/></p>
 
 More recently, chatbots have become more well-known thanks to technologies like ChatGPT.
 
 ## History of chatbots
 Chatbots have been around for a long time. The first chatbot was created in 1966 and was called ELIZA. In 1995, a new chatbot called ALICE was created. ALICE was written using AIML, which is the same language we will learn in this workshop.
 
+<img src="./img/elderly.png" alt="" width="20%"/>
+
 ## Table of Contents
 
 <details close>

content/english/chatbot/activity-1.md

@@ -5,6 +5,9 @@ weight: 4
 ---
 
 ## Meet ALICE
+
+<img src="../img/chatbot1.png" alt="A teal speech bubble containing a simplified robot face with a rectangular screen showing two orange oval eyes, decorated with a small purple flower, surrounded by a white headset with circular earpieces" width="20%"/>
+
 Before we start building our own chatbot, let's meet ALICE and ask it some questions. You should continue to have this webpage open and available.
 
 <a class="my-2 mx-4 btn btn-info" href="https://www.pandorabots.com/pandora/talk?botid=b8d616e35e36e881" target="_blank">Try ALICE</a>

content/english/chatbot/activity-2.md

@@ -6,6 +6,7 @@ weight: 5
 
 ## AIML
 We will be using AIML to create our chatbot. AIML stands for **Artificial Intelligence Markup Language**. If you have ever used HTML to make a website, you will find that AIML looks very similar. Before we can start writing AIML, we need to sign up for an account on PandoraBots.
+<img src="../img/chat_Alice.png" alt="" width="20%" style="" />
 
 ## Pandorabots
 Go to [https://www.pandorabots.com/](https://www.pandorabots.com/) and click on **Sign Up**. Enter an email and password to create an account. Alternatevely, you can sign up using an account from Google, Facebook, Twitter, or Github. If prompted, choose the free trial option.

content/english/chatbot/activity-3.md

@@ -12,6 +12,8 @@ Right now, our bot can only respond to "Hello". Let's add some more categories s
 2. If the user says "What is your favorite color?" the bot should respond with "My favorite color is blue".
 3. If the user says "What is your favorite food?" the bot should respond with "My favorite food is pizza".
 
+<img src="../img/ideas.png" alt="" width="30%" style="" /
+
 As a reminder, here is the basic structure of a category:
 
 ```

content/english/chatbot/activity-4.md

@@ -17,4 +17,5 @@ Use the wildcard at the beginning of the pattern.
 
 2. If the user enters a question that **ENDS WITH** "color" (e.g. "What is your favorite color?", "What's your favorite color?"), the bot should respond with "My favorite color is blue".
 
-3. If the user enters a question that **ENDS WITH** "name" (e.g. "What is your name?", "What's your name?", "Do you have a name?"), the bot should respond with "My name is Chatbot".
+3. If the user enters a question that **ENDS WITH** "name" (e.g. "What is your name?", "What's your name?", "Do you have a name?"), the bot should respond with "My name is Chatbot".
+<img src="../img/idea.png" alt="" width="20%"/>

content/english/chatbot/activity-5.md

@@ -6,6 +6,7 @@ weight: 10
 
 ## Echoing Wildcards
 Let's use the wildcard ```*``` and ```<star />``` tag together to allow our bot to include user input in its response. 
+<img src="../img/learn.png" alt="" width="20%" style="display: block; margin-left: 0;" /
 
 1. If the user enters "My name is [name]", the bot should respond with "Nice to meet you, [name]!".
 Examples:

content/english/chatbot/categories.md

@@ -8,6 +8,7 @@ weight: 6
 The basic unit of AIML is the **category**. A category consists of a pattern and a template. The **pattern** is what the user says to the bot. The **template** is the response the bot gives to the user. 
 
 Looking at the following example, we can see that the pattern is "HELLO" and the template is "Hello, World!". When the user says "HELLO", the bot will respond with "Hello, World!". Note that pattern matching is case-insensitive, so the bot will respond to "hello", "HELLO", "Hello", and "HeLlo" in the same way.
+<img src="../img/chat_persons_robot.png" alt="" width="20%"/>
 
 ```
 <category>

content/english/chatbot/echoing-wildcards.md

@@ -20,6 +20,8 @@ The ```<star />``` tag is a special tag that allows us to use the word or phrase
 
 Let's walk through how this category works. The pattern "MY FAVORITE COLOR IS *" will match any input that starts with "MY FAVORITE COLOR IS" followed by any word or phrase. So the pattern will match "MY FAVORITE COLOR IS BLUE" and "MY FAVORITE COLOR IS RED" and "MY FAVORITE COLOR IS GREEN" and so on. The ```<star />``` tag will capture the word or phrase that the user entered and use it in the response. So if the user enters "MY FAVORITE COLOR IS BLUE", "blue" is the word represented by the wildcard so when the chatbot responds, ```<star />``` will be replaced with "blue". The bot will respond with "Your favorite color is blue".
 
+<img src="../img/sentence_response.png" alt="" width="27%" />
+
 Here are some more examples of inputs and outputs from this category:
 
 Input | Output 

content/english/chatbot/wildcards.md

@@ -6,7 +6,7 @@ weight: 8
 
 ## Wildcards
 You may be noticing now that it takes a lot of work to write a category for every possible way a user might ask a question. For example, currently the bot will respond to "Hello" with "Hello, world". But what if the user says "Hello there" or "Hello chatbot"? We would have to write a new category for each of these cases. Thankfully, there are additional tools we can use to make our bot more flexible. 
-
+<img src="../img/party.png" alt="" width="25%" style="display: block; margin-left: 0;" />
 One of these tools is the **wildcard**. A wildcard is a special character that matches any word or phrase. Let's see how it works.
 
 ```

content/english/csharp-basics/write-to-console.md

@@ -51,6 +51,6 @@ If you type `Console.WriteLine(""");`, you will get an error because the compute
 Instead, certain characters need to be <b>escaped</b> by adding a `\` in front of it.
 
 ```csharp
-Console.Writeline("\"");`  // this prints out "
+Console.Writeline("\"");  // this prints out "
 ```
 {{% /notice %}}

content/english/security-fundamentals/cyber-security-cause-&-effect.md

@@ -5,7 +5,7 @@ draft: false
 weight: 4
 ---
 
-
+{{< figure src="../img/secret-notes.png" width="700px" >}}
 Cyber security in practice is more than just not falling for scams online. What exactly are the common risks that users online ignore and that hackers take advantage of?  
 
 1.  Not enabling two-factor authentication to log into accounts (social media, banking, gaming, etc.) 

content/english/security-fundamentals/how-can-we-incorporate-security.md

@@ -23,6 +23,7 @@ Cyber security is a big field where everyone needs to do their part to ensure th
  <div>
    <button id="submit_button" type="button" onclick="displaySection()">Submit</button>
  </div>
+ {{< figure src="../img/question.png" width="300px" >}}
 </br>
 
  <!-- Hidden section with sample answers -->
@@ -37,4 +38,4 @@ Cyber security is a big field where everyone needs to do their part to ensure th
    </ul>
  </div>
 </div>
-{{< /rawhtml >}}
+{{< /rawhtml >}}

content/english/security-fundamentals/security-vs-privacy.md

@@ -6,7 +6,7 @@ weight: 3
 ---
 
 Security and privacy are often used interchangeably by people, but it is important to understand how these two ideas are different. 
-
+{{< figure src="../img/teacher.png" width="600px" >}}
 ### Security
 Security refers to protection against the unauthorized access of data regardless of the content. Any measure taken to make sure that data can't be accessed by an unauthorized person is known as security. Some examples include:
 * Ensuring that computers are locked while unattended
@@ -26,8 +26,8 @@ Privacy refers to the right for consumers to be free from unwanted attention or
 We put security controls in place to limit who can access information, and we put privacy controls in place to limit the type of information that is accessible in certain places.
 
 Security can be put into practice without privacy, but privacy cannot be put into practice without security. 
-
-![Cannot load image](../img/security-vs-privacy.png?classes=border,shadow)
+<!-- ![Cannot load image](../img/security-vs-privacy.png?classes=border,shadow)-->
+{{< figure src="../img/security-vs-privacy.png" width="900px" >}}
 
 Here’s an example. You might share personal information with your bank when you open an account. What happens after that? Here are three possible outcomes, all related to your personal information (not to the money in the checking account). 
 

content/english/security-fundamentals/what-is-security.md

@@ -7,6 +7,7 @@ weight: 1
 
 ## General Security vs. Cyber Security
 **Security** on its own is defined as the state of being free from danger or threat. This is the same as the definition of **cyber security** except that cyber security is all about creating a state of being free from danger but in **cyberspace**. 
+![Cannot load image](../img/security.png?)
 
 Someone who works in **cybersecurity** is always working on something to make sure that people who use computers are safe when they use the internet in a variety of ways. Some cybers security engineers ensure that users are safe by always being on alert for new vulnerabilities while others do the same job by trying to break programs before hackers can.
 
@@ -16,4 +17,8 @@ Someone who works in **cybersecurity** is always working on something to make su
 ## Why do we need security?
 We need security because there are constantly hackers out there trying to steal your information. Cyberspace should be a place where people can visit *without* having to worry about the threat of having their information stolen or their computer put at risk by viruses and malware.
 
-The role of cyber security engineers and the field of cyber security in general is important because there are very real consequences to cybercrimes. On one hand, people’s data, lives, or businesses can be **ruined** by the actions of cyber criminals or hackers. On the other hand, there is also a big financial risk as well. According to the Center for Strategic and International Studies, cybercrime costs the world about **$600 billion USD** in 2018. Other sources claim that the number is closer to **$1 trillion USD** in 2020 and 2021.
+The role of cyber security engineers and the field of cyber security in general is important because there are very real consequences to cybercrimes. On one hand, people’s data, lives, or businesses can be **ruined** by the actions of cyber criminals or hackers. On the other hand, there is also a big financial risk as well. According to the Center for Strategic and International Studies, cybercrime costs the world about **$600 billion USD** in 2018. Other sources claim that the number is closer to **$1 trillion USD** in 2020 and 2021.
+<div>
+    <img src="../img/hacker.png" width="15%" > 
+</div>
+

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")
+
+
+
+