Add es blog post

src/pages/blog/es/lenguajes-01.md

@@ -91,9 +91,9 @@ programación se implementa en sí mismo. Curioso, y confuso.
 Poniendo como ejemplo el lenguaje C:
 
 1. Primero se crea un compilador para C en cualquier lenguaje
-    [(C se implementó inicialmente en B)](https://www.bell-labs.com/usr/dmr/www/chist.html).
+    [(C se implementó inicialmente en BCPL)](https://www.bell-labs.com/usr/dmr/www/chist.html).
 2. Ahora que tenemos un compilador de C capaz de crear programas
-    nuevos (escrito en B), crearemos el siguiente programa:
+    nuevos (escrito en BCPL), crearemos el siguiente programa:
     un compilador de C.
 3. Una vez que terminamos de escribir el compilador de C, en C,
     listo. Tenemos un lenguaje de programación escrito en sí mismo.

src/pages/blog/es/programacion-03.md

@@ -56,8 +56,86 @@ Felicidades! Has ejecutado tu primer programa.
     Utiliza la imágen como guía.
 
 
+## ¿Qué significan todas estas letras?
+
+Como verás, hay un monton de palabras y símbolos con colorcitos.
+Este es el código, es como un lenguaje especial utilizado
+para comunicarse con el computador.
+
+Así como el francés, árabe o coreano, el **lenguaje** de programación Zig
+tiene un conjunto de reglas. Aprenderemos las reglas a medida que avance
+el tiempo. Mientras tanto, puedes ignorar todas esas palabras.
+
+> ¿Que pasa si eliminas alguna de esas palabras y ejecutas el programa 
+    (con el boton "Run")? ¿Qué mensaje obtienes? ¿Qué crees que significa?
+
+
+## Magia negra y abstracción
+
+Según [Significados.com](https://www.significados.com/abstracto/),
+abstracto significa vago, impreciso, teórico, que no tiene existencia
+física (entre otras cosas). Algo abstracto suele ser algo difícil
+de entender, o imaginario.
+
+
+En programación, abstracto tiene otro significado. Puedes buscar su
+definición técnica en internet, pero me parece muy confusa para
+un principiante, así que lo explicare en mis términos.
+
+En programación, abstracto significa que sabemos **qué** hace, pero
+no **cómo** lo hace. Un ejemplo claro sería un auto. Sabemos que
+al pisar el acelerador, el auto avanza. Pero no sabemos **cómo**
+pisar el acelerador ocasiona que el combustible se transforme en
+energía cinemática.
+
+Por ejemplo, voy a hablar más adelante de "imprimir" en el programa.
+Imprimir significa mostrar un mensaje en la pantalla. Sin embargo,
+no te voy a explicar cómo funciona la impresión. El concepto de
+"imprimir" es abstracto.
+
+### Magia negra
+
+Escuché este termino del canal de Youtube Imesi.net. Magia negra
+es algo que: no se qué hace, cómo funciona, ni tampoco me importa.
+
+Voy a utilizar el término "magia negra" para referirme a algo
+por lo que no necesitas preocuparte, o intentar entender. Por
+ejemplo, en el código de más arriba:
+
+![Zig online 1](/img/blog/es/tutorial/007-zig1.jpg)
+
+Todo el texto que dice:
+
+```zig
+const std = @import("std")
+
+pub fn main() {
+    std.debug.print();
+}
+```
+
+es magia negra. Funciona, hace algo, pero no importa. No te
+preocupes en intentar entenderlo.
+
+Eventualmente, y a medida que aprendas conceptos nuevos,
+entenderas qué significan esas cosas.
+
+
 ## Inglés
 
+Como habras visto, prácticamente todo el código está en inglés.
+Si ya sabes ingles, o lo estas aprendiendo, no tendrás muchos
+problemas continuando.
+
+En mi opinion, programar sin saber inglés es contraproducente.
+Los lenguajes de programación (en su mayoría) se escriben en
+inglés, las mnemotécnicas están en inglés, y mucha información
+útil e importante está en inglés. Programar sin saber inglés
+es sumamente difícil.
+
+Seguramente aprenderás algunas palabras a lo largo del tutorial,
+pero lo mejor que podrías hacer es aprender inglés.
+
 
 
 

src/pages/blog/es/programacion-04.md

@@ -0,0 +1,171 @@
+---
+layout: ../../../layouts/BlogLayout.astro
+title: "04: Programación desde cero: Modificando el hola mundo"
+description: |
+    Impresión, strings/cadenas y stdout.
+pubDate: "2024-07-30"
+tags: ["tech", "lenguajes", "intro", "tutorial", "zig"]
+image: 
+    url: ""
+    alt: ""
+    caption: ""
+---
+
+En el artículo anterior escribimos nuestro primer programa:
+Hola mundo. En este artículos vamos a modificar el mensaje
+y aprender el primer concepto: Strings
+
+
+## Modificando "Hola mundo"
+
+Entra a la página web
+[https://zig.fly.dev/p/xNluereqmgW](https://zig.fly.dev/p/xNluereqmgW),
+donde se encuentra el programa "Hola mundo". Esta vez vamos a modificar
+el mensaje.
+
+El resto de las palabras son magia negra. Te habras dado cuenta que
+hay palabras en español: Hola y mundo.
+
+![Zig online](/img/blog/es/tutorial/009-zig.jpg)
+
+Hay varias cosas que notar:
+
+- Estan pintadas de color amarillo
+- Tienen comillas dobles `"` al inicio y al final
+
+Dentro de estas comillas `"` podemos escribir el texto que querramos.
+
+Por ejemplo, si reemplazas `Hola` por `Adios` y ejecutas el programa,
+se imprimirá `Adios mundo!`
+
+![Zig online](/img/blog/es/tutorial/010-zig.jpg)
+
+![Zig online](/img/blog/es/tutorial/011-zig.jpg)
+
+Y también, si reemplazas `mundo` por otra palabra, se imprimirá
+lo que escribiste.
+
+Tambien puedes agregar otro texto en ambos lados. Por ejemplo:
+
+![Zig online](/img/blog/es/tutorial/012-zig.jpg)
+
+
+## Strings / cadenas de caracteres
+
+Los strings (cadenas de caracteres en inglés) son la forma
+en la que almacenamos texto.
+
+Un string empieza con una comilla doble `"`, el contenido
+del string, y termina con una comilla doble `"`.
+
+Unos ejemplos de strings son: `"hola"`, `"adios"`,
+`"multiples palabras"`, `"123456"`.
+
+En el programa de arriba hay 2 strings:
+
+![Zig online](/img/blog/es/tutorial/013-zig.jpg)
+
+Estos strings son lo que se muestra en pantalla al
+ejecutar el programa.
+
+Los strings tienen algunas características:
+
+- En el código, los strings tienen otro color para que
+    sea más fácil identificarlos.
+- No puede haber comillas dentro de un string.
+    
+    El string termina cuando aparece la primera comilla.
+    Por ejemplo:
+
+    ![Zig online](/img/blog/es/tutorial/014-zig.jpg)
+
+    Aquí el string termina despues del `Hola `, la palabra
+    `familia` no es parte del string. Puedes ver que el
+    color amarillo del string termina en la segunda comilla,
+    y la palabra familia está de color blanco.
+
+- No puede haber nuevas lineas en un string. Esto es un error:
+
+    ![Zig online](/img/blog/es/tutorial/015-zig.jpg)
+
+    Sin embargo, hay ocasiones donde queremos tener varias lineas
+    en un string. Para esto se utilizan 2 caracteres especiales:
+    `\n`. Estos nos permiten "señalar" que ahí va una linea nueva.
+
+    ![Zig online](/img/blog/es/tutorial/016-zig.jpg)
+
+    Estos caracteres especiales se conocen como "caracteres de escape".
+    Hay varios de ellos, pero no los veremos por ahora.
+
+
+## Impresión
+
+Imprimir es mostrar información a través de la pantalla. Esta
+información puede ser palabras, letras, números, símbolos, etc.
+
+Para imprimir en Zig se escribe lo siguiente:
+
+![Zig online](/img/blog/es/tutorial/017-zig.jpg)
+
+`std.debug.print` es una invocación que imprime lo que tenga
+dentro. Para poner algo dentro, se utilizan parentesis `()`.
+
+Dentro de los paréntesis va el string que queremos imprimir
+y una secuencia misteriosa, así: `("Tu mensaje", .{})`.
+
+Y finalmente, muy importante, todas las invocaciones
+terminan con un punto y coma `;`. Si la invocación
+no termina con su punto y coma tendrás un error misterioso.
+
+Por ejemplo, para imprimir un nuevo texto `Me gusta Zig`
+se escribiriá el código así:
+
+`std.debug.print("Me gusta Zig", .{});`
+
+Podemos tener varias invocaciones a la vez, y ejecutarlas en
+siempre que la invocación esté bien escrita.
+
+![Zig online](/img/blog/es/tutorial/018-zig.jpg)
+
+Y al ejecutar el programa se imprimiran los mensajes en orden.
+
+![Zig online](/img/blog/es/tutorial/019-zig.jpg)
+
+
+## Nuevas lineas
+
+Notarás que el mensaje se imprimió junto: `Mi primera impresiónMe gusta Zig`.
+
+Este es un buen momento para presentar un concepto muy importante:
+la computadora hace lo que le pides, no lo que quieres.
+
+El código que ejecutamos no le pide a la computadora que imprima
+una nueva linea `\n`. Así que la computadora no la imprime.
+
+Para tener una nueva linea hay que incluirla en los strings, y con
+eso al ejecutar estará cada linea separada:
+
+![Zig online](/img/blog/es/tutorial/020-zig.jpg)
+
+![Zig online](/img/blog/es/tutorial/021-zig.jpg)
+
+
+
+## Glosario
+
+No es necesario que memorices o entiendas estas palabras.
+
+- String: "cadena de caracteres"
+- `const`: abreviatura de "constante", que no cambia
+- `std`: abreviatura de "estandar"
+- `import`: "importar"
+- `pub`: abreviatura de "público", que es accesible
+- `fn`: abreviatura de "función". en este artículo les llamé
+    invocaciones
+- `void`: "vacio"
+- `main`: "principal"
+- `debug`: el debugging es un proceso mediante el cual
+    se eliminan errores (tambien conocidos como "bugs")
+- `print`: "imprimir"
+
+