diff --git a/public/img/blog/es/tutorial/009-zig.jpg b/public/img/blog/es/tutorial/009-zig.jpg new file mode 100644 index 0000000..ad772ed Binary files /dev/null and b/public/img/blog/es/tutorial/009-zig.jpg differ diff --git a/public/img/blog/es/tutorial/010-zig.jpg b/public/img/blog/es/tutorial/010-zig.jpg new file mode 100644 index 0000000..3973d37 Binary files /dev/null and b/public/img/blog/es/tutorial/010-zig.jpg differ diff --git a/public/img/blog/es/tutorial/011-zig.jpg b/public/img/blog/es/tutorial/011-zig.jpg new file mode 100644 index 0000000..1234891 Binary files /dev/null and b/public/img/blog/es/tutorial/011-zig.jpg differ diff --git a/public/img/blog/es/tutorial/012-zig.jpg b/public/img/blog/es/tutorial/012-zig.jpg new file mode 100644 index 0000000..83c4999 Binary files /dev/null and b/public/img/blog/es/tutorial/012-zig.jpg differ diff --git a/public/img/blog/es/tutorial/013-zig.jpg b/public/img/blog/es/tutorial/013-zig.jpg new file mode 100644 index 0000000..b580fc0 Binary files /dev/null and b/public/img/blog/es/tutorial/013-zig.jpg differ diff --git a/public/img/blog/es/tutorial/014-zig.jpg b/public/img/blog/es/tutorial/014-zig.jpg new file mode 100644 index 0000000..0245750 Binary files /dev/null and b/public/img/blog/es/tutorial/014-zig.jpg differ diff --git a/public/img/blog/es/tutorial/015-zig.jpg b/public/img/blog/es/tutorial/015-zig.jpg new file mode 100644 index 0000000..298dabb Binary files /dev/null and b/public/img/blog/es/tutorial/015-zig.jpg differ diff --git a/public/img/blog/es/tutorial/016-zig.jpg b/public/img/blog/es/tutorial/016-zig.jpg new file mode 100644 index 0000000..4be59a7 Binary files /dev/null and b/public/img/blog/es/tutorial/016-zig.jpg differ diff --git a/public/img/blog/es/tutorial/017-zig.jpg b/public/img/blog/es/tutorial/017-zig.jpg new file mode 100644 index 0000000..f93f2df Binary files /dev/null and b/public/img/blog/es/tutorial/017-zig.jpg differ diff --git a/public/img/blog/es/tutorial/018-zig.jpg b/public/img/blog/es/tutorial/018-zig.jpg new file mode 100644 index 0000000..136c7c7 Binary files /dev/null and b/public/img/blog/es/tutorial/018-zig.jpg differ diff --git a/public/img/blog/es/tutorial/019-zig.jpg b/public/img/blog/es/tutorial/019-zig.jpg new file mode 100644 index 0000000..c11b754 Binary files /dev/null and b/public/img/blog/es/tutorial/019-zig.jpg differ diff --git a/public/img/blog/es/tutorial/020-zig.jpg b/public/img/blog/es/tutorial/020-zig.jpg new file mode 100644 index 0000000..bd632fc Binary files /dev/null and b/public/img/blog/es/tutorial/020-zig.jpg differ diff --git a/public/img/blog/es/tutorial/021-zig.jpg b/public/img/blog/es/tutorial/021-zig.jpg new file mode 100644 index 0000000..8d12b9e Binary files /dev/null and b/public/img/blog/es/tutorial/021-zig.jpg differ diff --git a/src/pages/blog/es/lenguajes-01.md b/src/pages/blog/es/lenguajes-01.md index b979a84..3669917 100644 --- a/src/pages/blog/es/lenguajes-01.md +++ b/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. diff --git a/src/pages/blog/es/programacion-03.md b/src/pages/blog/es/programacion-03.md index 1f1aad3..b58ec94 100644 --- a/src/pages/blog/es/programacion-03.md +++ b/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. + diff --git a/src/pages/blog/es/programacion-04.md b/src/pages/blog/es/programacion-04.md new file mode 100644 index 0000000..f8d3327 --- /dev/null +++ b/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" + +