From dc487a27882518cdf1080be7c8b83e9543f535a8 Mon Sep 17 00:00:00 2001 From: Araozu Date: Mon, 19 Aug 2024 18:32:05 -0500 Subject: [PATCH] rearrange the es zig series --- src/pages/blog/es/lenguajes-01.md | 2 +- src/pages/blog/es/programacion-01.md | 2 +- src/pages/blog/es/programacion-02.md | 2 +- src/pages/blog/es/programacion-03.md | 255 +++++++++++++++------------ src/pages/blog/es/programacion-04.md | 229 ++++++++++++------------ src/pages/blog/es/programacion-05.md | 203 +++++++++------------ src/pages/blog/es/programacion-06.md | 244 +++++++++++-------------- src/pages/blog/es/programacion-07.md | 2 +- src/pages/blog/es/programacion-08.md | 2 +- src/pages/blog/es/programacion-09.md | 2 +- 10 files changed, 452 insertions(+), 491 deletions(-) diff --git a/src/pages/blog/es/lenguajes-01.md b/src/pages/blog/es/lenguajes-01.md index 5762ea3..0ea0960 100644 --- a/src/pages/blog/es/lenguajes-01.md +++ b/src/pages/blog/es/lenguajes-01.md @@ -4,7 +4,7 @@ title: "¿Con qué lenguaje de programación se crean los lenguajes de programac description: | Vista superior de cómo funciona un lenguaje de programación realmente. -pubDate: "2024-07-25" +pubDate: "2024-07-14" tags: ["tech", "lenguajes", "tutorial"] image: url: "/img/blog/es/lang/cover.png" diff --git a/src/pages/blog/es/programacion-01.md b/src/pages/blog/es/programacion-01.md index b39573d..fb48991 100644 --- a/src/pages/blog/es/programacion-01.md +++ b/src/pages/blog/es/programacion-01.md @@ -1,6 +1,6 @@ --- layout: ../../../layouts/BlogLayoutEs.astro -title: "01: Programación desde cero absoluto con Zig" +title: "Cero a Zig 01: Programación desde cero absoluto con Zig" description: | Aprendé a programar desde completamente cero, utilizando el lenguaje de programación Zig. diff --git a/src/pages/blog/es/programacion-02.md b/src/pages/blog/es/programacion-02.md index 6dee32e..12b97a7 100644 --- a/src/pages/blog/es/programacion-02.md +++ b/src/pages/blog/es/programacion-02.md @@ -1,6 +1,6 @@ --- layout: ../../../layouts/BlogLayoutEs.astro -title: "02: Programación desde cero absoluto con Zig: Fundamentos" +title: "Cero a Zig 02: Fundamentos" description: | Fundamentos de la computación, programas, componentes pubDate: "2024-07-16" diff --git a/src/pages/blog/es/programacion-03.md b/src/pages/blog/es/programacion-03.md index a341aa3..8f85b18 100644 --- a/src/pages/blog/es/programacion-03.md +++ b/src/pages/blog/es/programacion-03.md @@ -1,141 +1,174 @@ --- layout: ../../../layouts/BlogLayoutEs.astro -title: "03: Programación desde cero: Hola mundo" +title: "Cero a Zig 03: Instalando VSCode y Zig" description: | - Escribí el tradicional programa "Hola mundo" por tí mismo! + Instalamos Zig y VSCode en nuestro computador pubDate: "2024-07-17" -tags: ["tech", "lenguajes", "intro", "tutorial", "zig"] +tags: ["tech", "lenguajes", "intro", "tutorial", "zig", "VSCode"] image: url: "" alt: "" caption: "" --- - -En este artículo vamos a escribir nuestro primer programa: Hola mundo. Vamos a -modificarlo y entender algunos otros conceptos. - -## Hola mundo - -Hola mundo es tradicionalmente el [primer programa](https://es.wikipedia.org/wiki/Hola_mundo) -que se escribe cuando se aprende a programar. - -Vamos a empezar con este programa. Entra a la siguiente página web: -[https://zig.fly.dev/p/xNluereqmgW](https://zig.fly.dev/p/xNluereqmgW) - -Veras lo siguiente: - -![Zig online 1](/img/blog/es/tutorial/007-zig1.jpg) - -Arriba está el nombre de la página: "Zig Playground". A su derecha hay 3 botones en inglés: - -- "Run" ejecuta el programa. -- "Format" hace algo llamado 'formatear' el código. No lo usaremos aún. -- "Share" comparte el código que escribimos. No lo usaremos. - -Dentro del recuadro plomo está escrito el código **Zig**. No lo modifiques aún. - -Si lo modificaste y quieres volver al código original, cierra la página y vuelve a -abrirla con el link de arriba. - -## Ejecutando el código - -Presiona el boton "Run". Aparecerá texto debajo del recuadro del código: - -![Zig online 2](/img/blog/es/tutorial/008-zig.png) - -Este texto es el resultado de ejecutar el programa. Se lee: - -- `Hola mundo!` : Este es el resultado del programa. -- `Program exited.` : Significa "El programa terminó" en ingles. Nos - indica que el programa terminó de ejecutarse. Puedes ignorarlo. - -Felicidades! Has ejecutado tu primer programa. - -> Desafio: Borra todo el código y vuelve a escribirlo, exactamente igual. - Utiliza la imágen como guía. +En este artículo vamos a instalar 2 cosas en nuestro computador: +[Zig](https://ziglang.org/) y +[Visual Studio Code](https://code.visualstudio.com/). +Necesitamos estas 2 herramientas antes de poder empezar a programar. -## ¿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? +Ya que este es un tutorial básico de programación, asumo que +estas utilizando Windows. Yo usaré Windows 10, pero las instrucciones +funcionan igual en Windows 11. -## Magia negra y abstracción +## Descargar e instalar VSCode -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. +Si sabes como instalar un programa y no necesitas instrucciones +paso a paso, saltate esta sección. + +Primero busca `VSCode` en Google, y entra a la primera página que +sale. + +![Resultados de google](/img/blog/es/tutorial/070-zig.jpg) + +Una vez en la página descarga VSCode con el boton grande y azul. + +![Página de VSCode](/img/blog/es/tutorial/071-zig.jpg) + +Se abrirá una nueva ventana en la esquina superior derecha. +Cuando termine de descargarse, ábrelo haciendole click. + +![Descarga de VSCode](/img/blog/es/tutorial/072-zig.jpg) -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. +Se abrirá una nueva ventana. Primero selecciona +"Acepto el acuerdo" y despues presiona el boton "Siguiente". -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. +![Instalación de VSCode](/img/blog/es/tutorial/073-zig.jpg) -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. +Volveran a salir nuevas ventanas. Presiona "Siguiente" en todas. -### Magia negra +![Instalación](/img/blog/es/tutorial/074-zig.jpg) -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. +Cuando salga "Instalar" en vez de "Siguiente", presionalo. -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: +![Instalación](/img/blog/es/tutorial/075-zig.jpg) -![Zig online 1](/img/blog/es/tutorial/007-zig1.jpg) +Finalmente, saldrá una última ventana. Presiona "Finalizar" +y se abrirá VSCode. -Todo el texto que dice: +![Instalación](/img/blog/es/tutorial/076-zig.jpg) -```zig -const std = @import("std") +También puedes abrir VSCode desde el menú de inicio de +Windows. -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. +![Instalación](/img/blog/es/tutorial/044-zig.jpg) +## Introducción a VSCode + +VSCode es un "IDE", un programa que trae muchas funciones +útiles a la hora de programar. Lo vamos a utilizar a partir +de ahora para aprender a programar en Zig. + +La primera vez que se abre VSCode se ve así: + +![VSCode](/img/blog/es/tutorial/045-zig.jpg) + +Hay un monton de botones y divisiones. No te preocupes en +entenderlo todo ahora mismo. + +Notarás que el programa está en inglés. Ahora te mostraré +cómo ponerlo en español. + +### Cambiar idioma a español + +A la izquierda arriba hay una serie de botones. Presiona el último, +que tiene unos cuadros. + +![Ext](/img/blog/es/tutorial/046-zig.jpg) + +Esto abre una pestaña donde podemos buscar "Extensiones". +Las extensiones agregan características a VSCode. + +Primero vamos a instalar el idioma español. En la barra de búsqueda +escribe "español": + +![Ext](/img/blog/es/tutorial/047-zig.jpg) + +Y presiona el botón azul "Install" del primer item de la lista +que dice "Spanish": + +![Ext](/img/blog/es/tutorial/048-zig.jpg) + +Luego de eso, abajo a la derecha saldrá un mensaje. +Presiona el botón azul: + +![Ext](/img/blog/es/tutorial/049-zig.jpg) + +El programa se reiniciará, y ahora estará en español. + +Ahora vamos a instalar la extensión de Zig. + + +### Instalar la extensión de Zig + +Regresa a la pestaña de extensiones: + +![Ext](/img/blog/es/tutorial/046-zig.jpg) + +Y busca "Zig". Instala la extensión que se llama +"Zig Language" y dice "ziglang": + +![Ext](/img/blog/es/tutorial/050-zig.jpg) + +Cuando se haya instalado puedes cerrar la pestaña: + +![Ext](/img/blog/es/tutorial/051-zig.jpg) + +Y volver al inicio: + +![Ext](/img/blog/es/tutorial/052-zig.jpg) + +## Instalar Zig + +Hemos instalado la extensión de Zig, ahora instalaremos algo +llamado "Compilador". + +Presiona `Control + Shift + P`, se abrirá una ventana arriba +en el centro: + +![Zig](/img/blog/es/tutorial/066-zig.jpg) + + +En la barra de busqueda escribe `Zig`, y presiona el botón +`Zig Setup: Install Zig`: + +![Zig](/img/blog/es/tutorial/067-zig.jpg) + +En el dialogo que sale, presiona "Install". + +![Zig](/img/blog/es/tutorial/064-zig.jpg) + +Saldrá una nueva ventana, donde hay que escoger una versión. +Elije la versión debajo de `nightly`. Al momento de escribir +esto es `0.13.0`. + +![Zig](/img/blog/es/tutorial/068-zig.jpg) + +Saldrá una nueva ventana, presiona "Install". + +![Zig](/img/blog/es/tutorial/065-zig.jpg) + +Y selecciona la misma versión de antes. En mi caso, `0.13.0`. + +![Zig](/img/blog/es/tutorial/068-zig.jpg) + + +Con eso terminamos. Hemos instalado Zig en nuestro computador. + +En el siguiente artículo aprenderemos del terminal y +crearemos un proyecto. diff --git a/src/pages/blog/es/programacion-04.md b/src/pages/blog/es/programacion-04.md index f426918..9059c98 100644 --- a/src/pages/blog/es/programacion-04.md +++ b/src/pages/blog/es/programacion-04.md @@ -1,171 +1,170 @@ --- layout: ../../../layouts/BlogLayoutEs.astro -title: "04: Programación desde cero: Modificando el hola mundo" +title: "Cero a Zig 04: Terminal y Proyecto Zig" description: | - Impresión, strings/cadenas y stdout. -pubDate: "2024-07-30" -tags: ["tech", "lenguajes", "intro", "tutorial", "zig"] + Veremos el terminal y cómo crear/ejecutar un proyecto de Zig +pubDate: "2024-07-18" +tags: ["tech", "lenguajes", "intro", "tutorial", "zig", "VSCode"] image: - url: "" + url: "/vid/hacker.webp" 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 +Seguramente has visto imágenes/videos de hackers antes, +escribiendo en una pantalla negra con letras verdes. +Ahora tu también, podras escribir en una pantalla negra +(pero sin letras verdes). + +En este artículo veremos el terminal, crearemos un proyecto +de Zig en nuestro computador, y lo ejecutaremos. + +En el artículo anterior ya instalamos VSCode y Zig, así que a partir +de ahora me referiré a ellos. -## Modificando "Hola mundo" +## El terminal -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/la terminal](https://en.wikipedia.org/wiki/Command-line_interface) +es una forma de interactuar con nuestro computador, y se utiliza +muchisimo en programación. -El resto de las palabras son magia negra. Te habras dado cuenta que -hay palabras en español: Hola y mundo. +En el terminal escribimos comandos, el computador los ejecuta, +y nos responde. En cierto modo es como una versión mini de la +programación. -![Zig online](/img/blog/es/tutorial/009-zig.jpg) +Dentro de VSCode, en los menus de arriba a la izquierda, selecciona +los 3 puntos, `Terminal`, `Nuevo Terminal`: -Hay varias cosas que notar: +![Terminal](/img/blog/es/tutorial/053-zig.jpg) -- Estan pintadas de color amarillo -- Tienen comillas dobles `"` al inicio y al final +Aparecerá una nueva ventana en blanco abajo: -Dentro de estas comillas `"` podemos escribir el texto que querramos. +![Terminal](/img/blog/es/tutorial/054-zig.jpg) -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) +Este es nuestro terminal. Aquí escribiremos algunos comandos +para crear un "proyecto" y "ejecutarlo". -## Strings / cadenas de caracteres +## Creando un proyecto de Zig -Los strings (cadenas de caracteres en inglés) son la forma -en la que almacenamos texto. +Un proyecto es una carpeta con una serie de archivos, +en los cuales programaremos nuestro programa. -Un string empieza con una comilla doble `"`, el contenido -del string, y termina con una comilla doble `"`. +Haz click en en el terminal y escribe `mkdir tutorial` -Unos ejemplos de strings son: `"hola"`, `"adios"`, -`"multiples palabras"`, `"123456"`. +![Terminal](/img/blog/es/tutorial/055-zig.jpg) -En el programa de arriba hay 2 strings: +`mkdir` es el "comando" que ejecutará la computadora, +y `tutorial` es un "argumento" que recibe el comando. -![Zig online](/img/blog/es/tutorial/013-zig.jpg) +`mkdir` viene del inglés "make directory", y crea una +carpeta nueva. En este caso estamos creando una carpeta +llamada `tutorial`. -Estos strings son lo que se muestra en pantalla al -ejecutar el programa. +Presiona enter para ejecutar el comando. -Los strings tienen algunas características: +![Terminal](/img/blog/es/tutorial/056-zig.jpg) -- 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: +En el terminal veremos siempre: - ![Zig online](/img/blog/es/tutorial/014-zig.jpg) +1. (1) La carpeta en donde estamos +2. (2) El comando que escribimos - 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. +Algunos comandos tienen una "respuesta". En la imágen +de arriba la respuesta es una confirmación de la carpeta +que creamos. -- No puede haber nuevas lineas en un string. Esto es un error: +Ahora vamos a ejecutar otro comando: `cd tutorial` - ![Zig online](/img/blog/es/tutorial/015-zig.jpg) +![Terminal](/img/blog/es/tutorial/057-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. +`cd` es una abreviación de "change directory", que +significa cambiar de carpeta. Usando este comando cambiamos +la carpeta en la que estamos. - ![Zig online](/img/blog/es/tutorial/016-zig.jpg) +Ahora vamos a crear el proyecto de Zig, con el comando +`zig init`: - Estos caracteres especiales se conocen como "caracteres de escape". - Hay varios de ellos, pero no los veremos por ahora. +![Terminal](/img/blog/es/tutorial/058-zig.jpg) + +El comando `zig` nos permite realizar varias acciones, +que veremos con el tiempo. + +Al ejecutar `zig init` creamos un proyecto nuevo en +la carpeta actual. Esto crea una serie de archivos +y carpeta, que ahora abriremos. + +Esto solo se hace una vez. Luego vamos a reutilizar el proyecto +que acabamos de crear. -## Impresión +## Abriendo el proyecto -Imprimir es mostrar información a través de la pantalla. Esta -información puede ser palabras, letras, números, símbolos, etc. +Dentro de VSCode, presionamos el boton "Abrir carpeta". -Para imprimir en Zig se escribe lo siguiente: +![VSCode](/img/blog/es/tutorial/059-zig.jpg) -![Zig online](/img/blog/es/tutorial/017-zig.jpg) +Si no puedes ver este boton, asegurate de estar en la primera pestaña: -`std.debug.print` es una invocación que imprime lo que tenga -dentro. Para poner algo dentro, se utilizan parentesis `()`. +![Ext](/img/blog/es/tutorial/052-zig.jpg) -Dentro de los paréntesis va el string que queremos imprimir -y una secuencia misteriosa, así: `("Tu mensaje", .{})`. +Aquí seleccionamos la carpeta `tutorial`. Esta es la carpeta que +acabamos de crear en el terminal. -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. +![VSCode](/img/blog/es/tutorial/060-zig.jpg) -Por ejemplo, para imprimir un nuevo texto `Me gusta Zig` -se escribiriá el código así: +Nos saldrá el mensaje de la imagen de abajo. Selecciona "Confiar en +los autores..." y presiona "Si, confio en los autores". -`std.debug.print("Me gusta Zig", .{});` +![VSCode](/img/blog/es/tutorial/061-zig.jpg) -Podemos tener varias invocaciones a la vez, y ejecutarlas en -siempre que la invocación esté bien escrita. +Ahora veras que en vez del boton "Abrir carpeta" ahora hay una +serie de archivos. -![Zig online](/img/blog/es/tutorial/018-zig.jpg) +![VSCode](/img/blog/es/tutorial/062-zig.jpg) -Y al ejecutar el programa se imprimiran los mensajes en orden. +Este es nuestro proyecto. Aquí es donde estarán todos los archivos +que usaremos. -![Zig online](/img/blog/es/tutorial/019-zig.jpg) +- Carpeta `src`: Contiene el código que ejecutaremos +- `build.zig`: Archivo mágico. Es mejor no tocarlo. +- `build.zig.zon`: Archivo mágico. Es mejor no tocarlo. + +Haz click en la carpeta `src` y en el archivo `main.zig`: + +![VSCode](/img/blog/es/tutorial/063-zig.jpg) + +Este es el archivo donde trabajemos por el resto de la serie. + +![VSCode](/img/blog/es/tutorial/078-zig.jpg) + +Veras que hay un monton de código raro, que aun no sabemos qué +significa. Por ahora lo vamos a dejar así. -## Nuevas lineas +## Ejecutando el proyecto -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) +Ahora que instalamos Zig en nuestro computador, tenemos que ejecutar +el programa en nuestro computador. Eso lo haremos desde el terminal. +Ve al terminal y ejecuta `zig build run`. Veras un monton de texto +raro, pero al final debería quedar así: -## 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" +![VSCode](/img/blog/es/tutorial/077-zig.jpg) +Y también notarás que aparecieron 2 carpetas nuevas: `.zig-cache` +y `zig-out`. Ignóralas. + +Y listo! Has ejecutado el proyecto! + +En el siguiente artículo empezaremos a escribir nuestro propio +código, y a descifrar cada una de las partes que tiene Zig. + +También, en el futuro voy a decir constantemente "Ejecuta el +código" o "Ejecuta el programa". Esto significa ir al terminal +y ejecutar el comando `zig build run`, +como lo acabas de hacer. + diff --git a/src/pages/blog/es/programacion-05.md b/src/pages/blog/es/programacion-05.md index f895a1a..c4c9f0c 100644 --- a/src/pages/blog/es/programacion-05.md +++ b/src/pages/blog/es/programacion-05.md @@ -1,174 +1,141 @@ --- layout: ../../../layouts/BlogLayoutEs.astro -title: "05: Cero a Zig: Instalando VSCode y Zig" +title: "Cero a Zig 05: Hola mundo" description: | - Instalamos Zig y VSCode en nuestro computador -pubDate: "2024-08-08" -tags: ["tech", "lenguajes", "intro", "tutorial", "zig", "VSCode"] + Escribimos nuestro primer programa: Hola mundo! +pubDate: "2024-07-19" +tags: ["tech", "lenguajes", "intro", "tutorial", "zig"] image: url: "" alt: "" caption: "" --- -En este artículo vamos a instalar 2 cosas en nuestro computador: -[Zig](https://ziglang.org/) y -[Visual Studio Code](https://code.visualstudio.com/). -En los artículos anteriores habíamos escrito nuestro código en -una página web. Sin embargo, lo mejor es escribir el código -(programar) y ejecutarlo en nuestro computador. +En este artículo vamos a escribir nuestro primer programa: Hola mundo. Vamos a +modificarlo y entender algunos otros conceptos. -Ya que este es un tutorial básico de programación, asumo que -estas utilizando Windows. Yo usaré Windows 10, pero las instrucciones -funcionan igual en Windows 11. +## Hola mundo +Hola mundo es tradicionalmente el [primer programa](https://es.wikipedia.org/wiki/Hola_mundo) +que se escribe cuando se aprende a programar. -## Descargar e instalar VSCode +Vamos a empezar con este programa. Entra a la siguiente página web: +[https://zig.fly.dev/p/xNluereqmgW](https://zig.fly.dev/p/xNluereqmgW) -Si sabes como instalar un programa y no necesitas instrucciones -paso a paso, saltate esta sección. +Veras lo siguiente: -Primero busca `VSCode` en Google, y entra a la primera página que -sale. +![Zig online 1](/img/blog/es/tutorial/007-zig1.jpg) -![Resultados de google](/img/blog/es/tutorial/070-zig.jpg) +Arriba está el nombre de la página: "Zig Playground". A su derecha hay 3 botones en inglés: -Una vez en la página descarga VSCode con el boton grande y azul. +- "Run" ejecuta el programa. +- "Format" hace algo llamado 'formatear' el código. No lo usaremos aún. +- "Share" comparte el código que escribimos. No lo usaremos. -![Página de VSCode](/img/blog/es/tutorial/071-zig.jpg) +Dentro del recuadro plomo está escrito el código **Zig**. No lo modifiques aún. -Se abrirá una nueva ventana en la esquina superior derecha. -Cuando termine de descargarse, ábrelo haciendole click. +Si lo modificaste y quieres volver al código original, cierra la página y vuelve a +abrirla con el link de arriba. -![Descarga de VSCode](/img/blog/es/tutorial/072-zig.jpg) +## Ejecutando el código +Presiona el boton "Run". Aparecerá texto debajo del recuadro del código: -Se abrirá una nueva ventana. Primero selecciona -"Acepto el acuerdo" y despues presiona el boton "Siguiente". +![Zig online 2](/img/blog/es/tutorial/008-zig.png) -![Instalación de VSCode](/img/blog/es/tutorial/073-zig.jpg) +Este texto es el resultado de ejecutar el programa. Se lee: -Volveran a salir nuevas ventanas. Presiona "Siguiente" en todas. +- `Hola mundo!` : Este es el resultado del programa. +- `Program exited.` : Significa "El programa terminó" en ingles. Nos + indica que el programa terminó de ejecutarse. Puedes ignorarlo. -![Instalación](/img/blog/es/tutorial/074-zig.jpg) +Felicidades! Has ejecutado tu primer programa. -Cuando salga "Instalar" en vez de "Siguiente", presionalo. +> Desafio: Borra todo el código y vuelve a escribirlo, exactamente igual. + Utiliza la imágen como guía. -![Instalación](/img/blog/es/tutorial/075-zig.jpg) -Finalmente, saldrá una última ventana. Presiona "Finalizar" -y se abrirá VSCode. +## ¿Qué significan todas estas letras? -![Instalación](/img/blog/es/tutorial/076-zig.jpg) +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. -También puedes abrir VSCode desde el menú de inicio de -Windows. +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. -![Instalación](/img/blog/es/tutorial/044-zig.jpg) +> ¿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 -## Introducción a VSCode +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. -VSCode es un "IDE", un programa que trae muchas funciones -útiles a la hora de programar. Lo vamos a utilizar a partir -de ahora para aprender a programar en Zig. -La primera vez que se abre VSCode se ve así: +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. -![VSCode](/img/blog/es/tutorial/045-zig.jpg) +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. -Hay un monton de botones y divisiones. No te preocupes en -entenderlo todo ahora mismo. +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. -Notarás que el programa está en inglés. Ahora te mostraré -cómo ponerlo en español. +### Magia negra -### Cambiar idioma a español +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. -A la izquierda arriba hay una serie de botones. Presiona el último, -que tiene unos cuadros. +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: -![Ext](/img/blog/es/tutorial/046-zig.jpg) +![Zig online 1](/img/blog/es/tutorial/007-zig1.jpg) -Esto abre una pestaña donde podemos buscar "Extensiones". -Las extensiones agregan características a VSCode. +Todo el texto que dice: -Primero vamos a instalar el idioma español. En la barra de búsqueda -escribe "español": +```zig +const std = @import("std") -![Ext](/img/blog/es/tutorial/047-zig.jpg) +pub fn main() { + std.debug.print(); +} +``` -Y presiona el botón azul "Install" del primer item de la lista -que dice "Spanish": +es magia negra. Funciona, hace algo, pero no importa. No te +preocupes en intentar entenderlo. -![Ext](/img/blog/es/tutorial/048-zig.jpg) +Eventualmente, y a medida que aprendas conceptos nuevos, +entenderas qué significan esas cosas. -Luego de eso, abajo a la derecha saldrá un mensaje. -Presiona el botón azul: -![Ext](/img/blog/es/tutorial/049-zig.jpg) +## Inglés -El programa se reiniciará, y ahora estará en español. +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. -Ahora vamos a instalar la extensión de Zig. +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. -### Instalar la extensión de Zig -Regresa a la pestaña de extensiones: -![Ext](/img/blog/es/tutorial/046-zig.jpg) - -Y busca "Zig". Instala la extensión que se llama -"Zig Language" y dice "ziglang": - -![Ext](/img/blog/es/tutorial/050-zig.jpg) - -Cuando se haya instalado puedes cerrar la pestaña: - -![Ext](/img/blog/es/tutorial/051-zig.jpg) - -Y volver al inicio: - -![Ext](/img/blog/es/tutorial/052-zig.jpg) - -## Instalar Zig - -Hemos instalado la extensión de Zig, ahora instalaremos algo -llamado "Compilador". - -Presiona `Control + Shift + P`, se abrirá una ventana arriba -en el centro: - -![Zig](/img/blog/es/tutorial/066-zig.jpg) - - -En la barra de busqueda escribe `Zig`, y presiona el botón -`Zig Setup: Install Zig`: - -![Zig](/img/blog/es/tutorial/067-zig.jpg) - -En el dialogo que sale, presiona "Install". - -![Zig](/img/blog/es/tutorial/064-zig.jpg) - -Saldrá una nueva ventana, donde hay que escoger una versión. -Elije la versión debajo de `nightly`. Al momento de escribir -esto es `0.13.0`. - -![Zig](/img/blog/es/tutorial/068-zig.jpg) - -Saldrá una nueva ventana, presiona "Install". - -![Zig](/img/blog/es/tutorial/065-zig.jpg) - -Y selecciona la misma versión de antes. En mi caso, `0.13.0`. - -![Zig](/img/blog/es/tutorial/068-zig.jpg) - - -Con eso terminamos. Hemos instalado Zig en nuestro computador. -En el siguiente artículo utilizaremos estas herramientas. diff --git a/src/pages/blog/es/programacion-06.md b/src/pages/blog/es/programacion-06.md index 70ab310..36c9811 100644 --- a/src/pages/blog/es/programacion-06.md +++ b/src/pages/blog/es/programacion-06.md @@ -1,209 +1,171 @@ --- layout: ../../../layouts/BlogLayoutEs.astro -title: "06: Cero a Zig: Terminal y Proyecto Zig" +title: "Cero a Zig 06: Modificando el hola mundo" description: | - Veremos el terminal y cómo crear/ejecutar un proyecto de Zig -pubDate: "2024-08-09" -tags: ["tech", "lenguajes", "intro", "tutorial", "zig", "VSCode"] + Impresión, strings/cadenas y stdout. +pubDate: "2024-07-30" +tags: ["tech", "lenguajes", "intro", "tutorial", "zig"] image: - url: "/vid/hacker.webp" + url: "" alt: "" caption: "" --- -Seguramente has visto imágenes/videos de hackers antes, -escribiendo en una pantalla negra con letras verdes. -Ahora tu también, podras escribir en una pantalla negra -(pero sin letras verdes). +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 -En este artículo veremos el terminal, crearemos un proyecto -de Zig en nuestro computador, y lo ejecutaremos. -En el artículo anterior ya instalamos VSCode y Zig, así que a partir -de ahora me referiré a ellos. +## 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 terminal +El resto de las palabras son magia negra. Te habras dado cuenta que +hay palabras en español: Hola y mundo. -[El/la terminal](https://en.wikipedia.org/wiki/Command-line_interface) -es una forma de interactuar con nuestro computador, y se utiliza -muchisimo en programación. +![Zig online](/img/blog/es/tutorial/009-zig.jpg) -En el terminal escribimos comandos, el computador los ejecuta, -y nos responde. En cierto modo es como una versión mini de la -programación. +Hay varias cosas que notar: -Dentro de VSCode, en los menus de arriba a la izquierda, selecciona -los 3 puntos, `Terminal`, `Nuevo Terminal`: +- Estan pintadas de color amarillo +- Tienen comillas dobles `"` al inicio y al final -![Terminal](/img/blog/es/tutorial/053-zig.jpg) +Dentro de estas comillas `"` podemos escribir el texto que querramos. -Aparecerá una nueva ventana en blanco abajo: +Por ejemplo, si reemplazas `Hola` por `Adios` y ejecutas el programa, +se imprimirá `Adios mundo!` -![Terminal](/img/blog/es/tutorial/054-zig.jpg) +![Zig online](/img/blog/es/tutorial/010-zig.jpg) -Este es nuestro terminal. Aquí escribiremos algunos comandos -para crear un "proyecto" y "ejecutarlo". +![Zig online](/img/blog/es/tutorial/011-zig.jpg) +Y también, si reemplazas `mundo` por otra palabra, se imprimirá +lo que escribiste. -## Creando un proyecto de Zig +Tambien puedes agregar otro texto en ambos lados. Por ejemplo: -Un proyecto es una carpeta con una serie de archivos, -en los cuales programaremos nuestro programa. +![Zig online](/img/blog/es/tutorial/012-zig.jpg) -Haz click en en el terminal y escribe `mkdir tutorial` -![Terminal](/img/blog/es/tutorial/055-zig.jpg) +## Strings / cadenas de caracteres -`mkdir` es el "comando" que ejecutará la computadora, -y `tutorial` es un "argumento" que recibe el comando. +Los strings (cadenas de caracteres en inglés) son la forma +en la que almacenamos texto. -`mkdir` viene del inglés "make directory", y crea una -carpeta nueva. En este caso estamos creando una carpeta -llamada `tutorial`. +Un string empieza con una comilla doble `"`, el contenido +del string, y termina con una comilla doble `"`. -Presiona enter para ejecutar el comando. +Unos ejemplos de strings son: `"hola"`, `"adios"`, +`"multiples palabras"`, `"123456"`. -![Terminal](/img/blog/es/tutorial/056-zig.jpg) +En el programa de arriba hay 2 strings: -En el terminal veremos siempre: +![Zig online](/img/blog/es/tutorial/013-zig.jpg) -1. (1) La carpeta en donde estamos -2. (2) El comando que escribimos +Estos strings son lo que se muestra en pantalla al +ejecutar el programa. -Algunos comandos tienen una "respuesta". En la imágen -de arriba la respuesta es una confirmación de la carpeta -que creamos. +Los strings tienen algunas características: -Ahora vamos a ejecutar otro comando: `cd tutorial` +- 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: -![Terminal](/img/blog/es/tutorial/057-zig.jpg) + ![Zig online](/img/blog/es/tutorial/014-zig.jpg) -`cd` es una abreviación de "change directory", que -significa cambiar de carpeta. Usando este comando cambiamos -la carpeta en la que estamos. + 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. -Ahora vamos a crear el proyecto de Zig, con el comando -`zig init`: +- No puede haber nuevas lineas en un string. Esto es un error: -![Terminal](/img/blog/es/tutorial/058-zig.jpg) + ![Zig online](/img/blog/es/tutorial/015-zig.jpg) -El comando `zig` nos permite realizar varias acciones, -que veremos con el tiempo. + 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. -Al ejecutar `zig init` creamos un proyecto nuevo en -la carpeta actual. Esto crea una serie de archivos -y carpeta, que ahora abriremos. + ![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. -## Abriendo el proyecto -Dentro de VSCode, presionamos el boton "Abrir carpeta". +## Impresión -![VSCode](/img/blog/es/tutorial/059-zig.jpg) +Imprimir es mostrar información a través de la pantalla. Esta +información puede ser palabras, letras, números, símbolos, etc. -Si no puedes ver este boton, asegurate de estar en la primera pestaña: +Para imprimir en Zig se escribe lo siguiente: -![Ext](/img/blog/es/tutorial/052-zig.jpg) +![Zig online](/img/blog/es/tutorial/017-zig.jpg) -Aquí seleccionamos la carpeta `tutorial`. Esta es la carpeta que -acabamos de crear en el terminal. +`std.debug.print` es una invocación que imprime lo que tenga +dentro. Para poner algo dentro, se utilizan parentesis `()`. -![VSCode](/img/blog/es/tutorial/060-zig.jpg) +Dentro de los paréntesis va el string que queremos imprimir +y una secuencia misteriosa, así: `("Tu mensaje", .{})`. -Nos saldrá el mensaje de la imagen de abajo. Selecciona "Confiar en -los autores..." y presiona "Si, confio en los autores". +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. -![VSCode](/img/blog/es/tutorial/061-zig.jpg) +Por ejemplo, para imprimir un nuevo texto `Me gusta Zig` +se escribiriá el código así: -Ahora veras que en vez del boton "Abrir carpeta" ahora hay una -serie de archivos. +`std.debug.print("Me gusta Zig", .{});` -![VSCode](/img/blog/es/tutorial/062-zig.jpg) +Podemos tener varias invocaciones a la vez, y ejecutarlas en +siempre que la invocación esté bien escrita. -Este es nuestro proyecto. Aquí es donde estarán todos los archivos -que usaremos. +![Zig online](/img/blog/es/tutorial/018-zig.jpg) -- Carpeta `src`: Contiene el código que ejecutaremos -- `build.zig`: Archivo mágico. Es mejor no tocarlo. -- `build.zig.zon`: Archivo mágico. Es mejor no tocarlo. +Y al ejecutar el programa se imprimiran los mensajes en orden. -Haz click en la carpeta `src` y en el archivo `main.zig`: +![Zig online](/img/blog/es/tutorial/019-zig.jpg) -![VSCode](/img/blog/es/tutorial/063-zig.jpg) -Este es el archivo donde trabajemos por el resto de la serie. +## Nuevas lineas -![VSCode](/img/blog/es/tutorial/078-zig.jpg) +Notarás que el mensaje se imprimió junto: `Mi primera impresiónMe gusta Zig`. -Veras que hay un monton de código raro, que aun no sabemos qué -significa. Por ahora lo vamos a dejar así. +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. -## Ejecutando el proyecto +Para tener una nueva linea hay que incluirla en los strings, y con +eso al ejecutar estará cada linea separada: -Ahora que instalamos Zig en nuestro computador, tenemos que ejecutar -el programa en nuestro computador. Eso lo haremos desde el terminal. +![Zig online](/img/blog/es/tutorial/020-zig.jpg) +![Zig online](/img/blog/es/tutorial/021-zig.jpg) -Ve al terminal y ejecuta `zig build run`. Veras un monton de texto -raro, pero al final debería quedar así: -![VSCode](/img/blog/es/tutorial/077-zig.jpg) +## Glosario -Y también notarás que aparecieron 2 carpetas nuevas: `.zig-cache` -y `zig-out`. Ignóralas. +No es necesario que memorices o entiendas estas palabras. -Has ejecutado el proyecto! Ahora vamos a hacerlo con nuestro propio código. - - -## Reemplazando el código - -En artículos anteriores vimos un programa llamado "Hola mundo": - -```zig -const std = @import("std"); - -pub fn main() !void { - std.debug.print("Hola mundo!", .{}); -} -``` - -Ahora vamos a ejecutarlo en nuestro computador, en vez de -la página web. - -Entra a `src/main.zig` y reemplaza todo el código que está ahí -por el código de arriba. - -> Nota: Puede que notes que las imágenes no sean exáctamente - iguales a como cuando tu escribas el código. - No te preocupes, no es un problema. - -Una vez que hayas modificado el código, verás un punto blanco arriba: - -![VSCode](/img/blog/es/tutorial/080-zig.jpg) - -Esto significa que el archivo está modificado, pero no guardado. -Presiona `Control + S` para guardar el archivo. - -Ahora, ejecuta el código: Ve al terminal y ejecuta el comando -`zig build run`: - -> Nota: Verás que mi terminal se ve diferente. Pero lo importante - son los comandos, y el resultado. - -![VSCode](/img/blog/es/tutorial/081-zig.jpg) - -El resultado sale abajo: `Hola mundo!`. - - -## Siguentes pasos - -Ya estamos listos para seguir aprendiendo Zig. - -Ahora intenta ejecutar los programas que escribimos -antes en VSCode. Copia y pega el código, o aún mejor, -escríbelo tú mismo. +- 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" diff --git a/src/pages/blog/es/programacion-07.md b/src/pages/blog/es/programacion-07.md index c9f71ba..89535cf 100644 --- a/src/pages/blog/es/programacion-07.md +++ b/src/pages/blog/es/programacion-07.md @@ -1,6 +1,6 @@ --- layout: ../../../layouts/BlogLayoutEs.astro -title: "07: Cero a Zig - Impresión con formatos" +title: "Cero a Zig 07: Impresión con formatos" description: | Imprimiendo información adicional. pubDate: "2024-08-10" diff --git a/src/pages/blog/es/programacion-08.md b/src/pages/blog/es/programacion-08.md index 5b3a855..71763ff 100644 --- a/src/pages/blog/es/programacion-08.md +++ b/src/pages/blog/es/programacion-08.md @@ -1,6 +1,6 @@ --- layout: ../../../layouts/BlogLayoutEs.astro -title: "08: Cero a Zig - Variables" +title: "Cero a Zig 08: Variables" description: | Introducción a las variables pubDate: "2024-08-11" diff --git a/src/pages/blog/es/programacion-09.md b/src/pages/blog/es/programacion-09.md index fa6ff46..9aa0c56 100644 --- a/src/pages/blog/es/programacion-09.md +++ b/src/pages/blog/es/programacion-09.md @@ -1,6 +1,6 @@ --- layout: ../../../layouts/BlogLayoutEs.astro -title: "09: Cero a Zig - Comentarios y Números" +title: "Cero a Zig 09: Comentarios y Números" description: | Comentarios, números y operaciones matemáticas pubDate: "2024-08-17"