diff --git a/public/img/blog/es/tutorial/044-zig.jpg b/public/img/blog/es/tutorial/044-zig.jpg new file mode 100644 index 0000000..eb5cda4 Binary files /dev/null and b/public/img/blog/es/tutorial/044-zig.jpg differ diff --git a/public/img/blog/es/tutorial/045-zig.jpg b/public/img/blog/es/tutorial/045-zig.jpg new file mode 100644 index 0000000..046a042 Binary files /dev/null and b/public/img/blog/es/tutorial/045-zig.jpg differ diff --git a/public/img/blog/es/tutorial/046-zig.jpg b/public/img/blog/es/tutorial/046-zig.jpg new file mode 100644 index 0000000..158a67e Binary files /dev/null and b/public/img/blog/es/tutorial/046-zig.jpg differ diff --git a/public/img/blog/es/tutorial/047-zig.jpg b/public/img/blog/es/tutorial/047-zig.jpg new file mode 100644 index 0000000..b6a2b8b Binary files /dev/null and b/public/img/blog/es/tutorial/047-zig.jpg differ diff --git a/public/img/blog/es/tutorial/048-zig.jpg b/public/img/blog/es/tutorial/048-zig.jpg new file mode 100644 index 0000000..714b324 Binary files /dev/null and b/public/img/blog/es/tutorial/048-zig.jpg differ diff --git a/public/img/blog/es/tutorial/049-zig.jpg b/public/img/blog/es/tutorial/049-zig.jpg new file mode 100644 index 0000000..515166c Binary files /dev/null and b/public/img/blog/es/tutorial/049-zig.jpg differ diff --git a/public/img/blog/es/tutorial/050-zig.jpg b/public/img/blog/es/tutorial/050-zig.jpg new file mode 100644 index 0000000..b7f6eaf Binary files /dev/null and b/public/img/blog/es/tutorial/050-zig.jpg differ diff --git a/public/img/blog/es/tutorial/051-zig.jpg b/public/img/blog/es/tutorial/051-zig.jpg new file mode 100644 index 0000000..19acf2e Binary files /dev/null and b/public/img/blog/es/tutorial/051-zig.jpg differ diff --git a/public/img/blog/es/tutorial/052-zig.jpg b/public/img/blog/es/tutorial/052-zig.jpg new file mode 100644 index 0000000..0f690f4 Binary files /dev/null and b/public/img/blog/es/tutorial/052-zig.jpg differ diff --git a/public/img/blog/es/tutorial/053-zig.jpg b/public/img/blog/es/tutorial/053-zig.jpg new file mode 100644 index 0000000..cf764ce Binary files /dev/null and b/public/img/blog/es/tutorial/053-zig.jpg differ diff --git a/public/img/blog/es/tutorial/054-zig.jpg b/public/img/blog/es/tutorial/054-zig.jpg new file mode 100644 index 0000000..859972c Binary files /dev/null and b/public/img/blog/es/tutorial/054-zig.jpg differ diff --git a/public/img/blog/es/tutorial/055-zig.jpg b/public/img/blog/es/tutorial/055-zig.jpg new file mode 100644 index 0000000..c675a72 Binary files /dev/null and b/public/img/blog/es/tutorial/055-zig.jpg differ diff --git a/public/img/blog/es/tutorial/056-zig.jpg b/public/img/blog/es/tutorial/056-zig.jpg new file mode 100644 index 0000000..027940b Binary files /dev/null and b/public/img/blog/es/tutorial/056-zig.jpg differ diff --git a/public/img/blog/es/tutorial/057-zig.jpg b/public/img/blog/es/tutorial/057-zig.jpg new file mode 100644 index 0000000..73cffc6 Binary files /dev/null and b/public/img/blog/es/tutorial/057-zig.jpg differ diff --git a/public/img/blog/es/tutorial/058-zig.jpg b/public/img/blog/es/tutorial/058-zig.jpg new file mode 100644 index 0000000..df616b7 Binary files /dev/null and b/public/img/blog/es/tutorial/058-zig.jpg differ diff --git a/public/img/blog/es/tutorial/059-zig.jpg b/public/img/blog/es/tutorial/059-zig.jpg new file mode 100644 index 0000000..1196a7c Binary files /dev/null and b/public/img/blog/es/tutorial/059-zig.jpg differ diff --git a/public/img/blog/es/tutorial/060-zig.jpg b/public/img/blog/es/tutorial/060-zig.jpg new file mode 100644 index 0000000..ff4b997 Binary files /dev/null and b/public/img/blog/es/tutorial/060-zig.jpg differ diff --git a/public/img/blog/es/tutorial/061-zig.jpg b/public/img/blog/es/tutorial/061-zig.jpg new file mode 100644 index 0000000..cc71829 Binary files /dev/null and b/public/img/blog/es/tutorial/061-zig.jpg differ diff --git a/public/img/blog/es/tutorial/062-zig.jpg b/public/img/blog/es/tutorial/062-zig.jpg new file mode 100644 index 0000000..480d33b Binary files /dev/null and b/public/img/blog/es/tutorial/062-zig.jpg differ diff --git a/public/img/blog/es/tutorial/063-zig.jpg b/public/img/blog/es/tutorial/063-zig.jpg new file mode 100644 index 0000000..e0cb4ef Binary files /dev/null and b/public/img/blog/es/tutorial/063-zig.jpg differ diff --git a/public/img/blog/es/tutorial/064-zig.jpg b/public/img/blog/es/tutorial/064-zig.jpg new file mode 100644 index 0000000..162d3ff Binary files /dev/null and b/public/img/blog/es/tutorial/064-zig.jpg differ diff --git a/public/img/blog/es/tutorial/065-zig.jpg b/public/img/blog/es/tutorial/065-zig.jpg new file mode 100644 index 0000000..83e96ae Binary files /dev/null and b/public/img/blog/es/tutorial/065-zig.jpg differ diff --git a/public/img/blog/es/tutorial/066-zig.jpg b/public/img/blog/es/tutorial/066-zig.jpg new file mode 100644 index 0000000..3460ad9 Binary files /dev/null and b/public/img/blog/es/tutorial/066-zig.jpg differ diff --git a/public/img/blog/es/tutorial/067-zig.jpg b/public/img/blog/es/tutorial/067-zig.jpg new file mode 100644 index 0000000..96f0077 Binary files /dev/null and b/public/img/blog/es/tutorial/067-zig.jpg differ diff --git a/public/img/blog/es/tutorial/068-zig.jpg b/public/img/blog/es/tutorial/068-zig.jpg new file mode 100644 index 0000000..02b18d9 Binary files /dev/null and b/public/img/blog/es/tutorial/068-zig.jpg differ diff --git a/public/img/blog/es/tutorial/069-zig.jpg b/public/img/blog/es/tutorial/069-zig.jpg new file mode 100644 index 0000000..5595809 Binary files /dev/null and b/public/img/blog/es/tutorial/069-zig.jpg differ diff --git a/public/img/blog/es/tutorial/070-zig.jpg b/public/img/blog/es/tutorial/070-zig.jpg new file mode 100644 index 0000000..d08f268 Binary files /dev/null and b/public/img/blog/es/tutorial/070-zig.jpg differ diff --git a/public/img/blog/es/tutorial/071-zig.jpg b/public/img/blog/es/tutorial/071-zig.jpg new file mode 100644 index 0000000..b95fe85 Binary files /dev/null and b/public/img/blog/es/tutorial/071-zig.jpg differ diff --git a/public/img/blog/es/tutorial/072-zig.jpg b/public/img/blog/es/tutorial/072-zig.jpg new file mode 100644 index 0000000..4fdd7d0 Binary files /dev/null and b/public/img/blog/es/tutorial/072-zig.jpg differ diff --git a/public/img/blog/es/tutorial/073-zig.jpg b/public/img/blog/es/tutorial/073-zig.jpg new file mode 100644 index 0000000..80197d9 Binary files /dev/null and b/public/img/blog/es/tutorial/073-zig.jpg differ diff --git a/public/img/blog/es/tutorial/074-zig.jpg b/public/img/blog/es/tutorial/074-zig.jpg new file mode 100644 index 0000000..2a6432a Binary files /dev/null and b/public/img/blog/es/tutorial/074-zig.jpg differ diff --git a/public/img/blog/es/tutorial/075-zig.jpg b/public/img/blog/es/tutorial/075-zig.jpg new file mode 100644 index 0000000..9722198 Binary files /dev/null and b/public/img/blog/es/tutorial/075-zig.jpg differ diff --git a/public/img/blog/es/tutorial/076-zig.jpg b/public/img/blog/es/tutorial/076-zig.jpg new file mode 100644 index 0000000..30e6fa4 Binary files /dev/null and b/public/img/blog/es/tutorial/076-zig.jpg differ diff --git a/public/img/blog/es/tutorial/077-zig.jpg b/public/img/blog/es/tutorial/077-zig.jpg new file mode 100644 index 0000000..debc25a Binary files /dev/null and b/public/img/blog/es/tutorial/077-zig.jpg differ diff --git a/public/img/blog/es/tutorial/078-zig.jpg b/public/img/blog/es/tutorial/078-zig.jpg new file mode 100644 index 0000000..35bacb3 Binary files /dev/null and b/public/img/blog/es/tutorial/078-zig.jpg differ diff --git a/public/img/blog/es/tutorial/079-zig.jpg b/public/img/blog/es/tutorial/079-zig.jpg new file mode 100644 index 0000000..1b82e8b Binary files /dev/null and b/public/img/blog/es/tutorial/079-zig.jpg differ diff --git a/public/img/blog/es/tutorial/080-zig.jpg b/public/img/blog/es/tutorial/080-zig.jpg new file mode 100644 index 0000000..0980081 Binary files /dev/null and b/public/img/blog/es/tutorial/080-zig.jpg differ diff --git a/public/img/blog/es/tutorial/081-zig.jpg b/public/img/blog/es/tutorial/081-zig.jpg new file mode 100644 index 0000000..f82859b Binary files /dev/null and b/public/img/blog/es/tutorial/081-zig.jpg differ diff --git a/public/vid/hacker-2.webp b/public/vid/hacker-2.webp new file mode 100644 index 0000000..aeb0b75 Binary files /dev/null and b/public/vid/hacker-2.webp differ diff --git a/public/vid/hacker.webp b/public/vid/hacker.webp new file mode 100644 index 0000000..094bdc9 Binary files /dev/null and b/public/vid/hacker.webp differ diff --git a/src/pages/blog/es/programacion-05.md b/src/pages/blog/es/programacion-05.md new file mode 100644 index 0000000..2ad5258 --- /dev/null +++ b/src/pages/blog/es/programacion-05.md @@ -0,0 +1,174 @@ +--- +layout: ../../../layouts/BlogLayout.astro +title: "05: Cero a Zig: Instalando VSCode y Zig" +description: | + Instalamos Zig y VSCode en nuestro computador +pubDate: "2024-08-08" +tags: ["tech", "lenguajes", "intro", "tutorial", "zig", "VSCode"] +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. + +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. + + +## Descargar e instalar VSCode + +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) + + +Se abrirá una nueva ventana. Primero selecciona +"Acepto el acuerdo" y despues presiona el boton "Siguiente". + +![Instalación de VSCode](/img/blog/es/tutorial/073-zig.jpg) + +Volveran a salir nuevas ventanas. Presiona "Siguiente" en todas. + +![Instalación](/img/blog/es/tutorial/074-zig.jpg) + +Cuando salga "Instalar" en vez de "Siguiente", presionalo. + +![Instalación](/img/blog/es/tutorial/075-zig.jpg) + +Finalmente, saldrá una última ventana. Presiona "Finalizar" +y se abrirá VSCode. + +![Instalación](/img/blog/es/tutorial/076-zig.jpg) + +También puedes abrir VSCode desde el menú de inicio de +Windows. + +![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 utilizaremos estas herramientas. + diff --git a/src/pages/blog/es/programacion-06.md b/src/pages/blog/es/programacion-06.md new file mode 100644 index 0000000..29a0fb5 --- /dev/null +++ b/src/pages/blog/es/programacion-06.md @@ -0,0 +1,209 @@ +--- +layout: ../../../layouts/BlogLayout.astro +title: "06: Cero a Zig: Terminal y Proyecto Zig" +description: | + Veremos el terminal y cómo crear/ejecutar un proyecto de Zig +pubDate: "2024-08-09" +tags: ["tech", "lenguajes", "intro", "tutorial", "zig", "VSCode"] +image: + url: "/vid/hacker.webp" + 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 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. + + +## El terminal + +[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. + +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. + +Dentro de VSCode, en los menus de arriba a la izquierda, selecciona +los 3 puntos, `Terminal`, `Nuevo Terminal`: + +![Terminal](/img/blog/es/tutorial/053-zig.jpg) + +Aparecerá una nueva ventana en blanco abajo: + +![Terminal](/img/blog/es/tutorial/054-zig.jpg) + +Este es nuestro terminal. Aquí escribiremos algunos comandos +para crear un "proyecto" y "ejecutarlo". + + +## Creando un proyecto de Zig + +Un proyecto es una carpeta con una serie de archivos, +en los cuales programaremos nuestro programa. + +Haz click en en el terminal y escribe `mkdir tutorial` + +![Terminal](/img/blog/es/tutorial/055-zig.jpg) + +`mkdir` es el "comando" que ejecutará la computadora, +y `tutorial` es un "argumento" que recibe el comando. + +`mkdir` viene del inglés "make directory", y crea una +carpeta nueva. En este caso estamos creando una carpeta +llamada `tutorial`. + +Presiona enter para ejecutar el comando. + +![Terminal](/img/blog/es/tutorial/056-zig.jpg) + +En el terminal veremos siempre: + +1. (1) La carpeta en donde estamos +2. (2) El comando que escribimos + +Algunos comandos tienen una "respuesta". En la imágen +de arriba la respuesta es una confirmación de la carpeta +que creamos. + +Ahora vamos a ejecutar otro comando: `cd tutorial` + +![Terminal](/img/blog/es/tutorial/057-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. + +Ahora vamos a crear el proyecto de Zig, con el comando +`zig init`: + +![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. + + +## Abriendo el proyecto + +Dentro de VSCode, presionamos el boton "Abrir carpeta". + +![VSCode](/img/blog/es/tutorial/059-zig.jpg) + +Si no puedes ver este boton, asegurate de estar en la primera pestaña: + +![Ext](/img/blog/es/tutorial/052-zig.jpg) + +Aquí seleccionamos la carpeta `tutorial`. Esta es la carpeta que +acabamos de crear en el terminal. + +![VSCode](/img/blog/es/tutorial/060-zig.jpg) + +Nos saldrá el mensaje de la imagen de abajo. Selecciona "Confiar en +los autores..." y presiona "Si, confio en los autores". + +![VSCode](/img/blog/es/tutorial/061-zig.jpg) + +Ahora veras que en vez del boton "Abrir carpeta" ahora hay una +serie de archivos. + +![VSCode](/img/blog/es/tutorial/062-zig.jpg) + +Este es nuestro proyecto. Aquí es donde estarán todos los archivos +que usaremos. + +- 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í. + + +## Ejecutando el proyecto + +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í: + +![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. + +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. + +