Add Isso comments to /blog/*

main
Araozu 2024-08-19 17:16:08 -05:00
parent 85e5e98c71
commit 8e8cb10d3b
19 changed files with 503 additions and 198 deletions

View File

@ -84,4 +84,13 @@ pre.astro-code>code .line::before {
font-weight: var(--shiki-dark-font-weight) !important; font-weight: var(--shiki-dark-font-weight) !important;
text-decoration: var(--shiki-dark-text-decoration) !important; text-decoration: var(--shiki-dark-text-decoration) !important;
} }
} }
/* isso */
#isso-thread textarea {
color: black;
}
#isso-thread input {
color: black;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

View File

@ -6,7 +6,7 @@ lang = lang ?? "en";
--- ---
<!doctype html> <!doctype html>
<html lang={lang ?? "en"}> <html lang={lang}>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
@ -68,8 +68,22 @@ lang = lang ?? "en";
<slot /> <slot />
</div> </div>
<div class="pt-4 border-t border-c-on-bg">
<h3>Comments/Comentarios</h3>
<section id="isso-thread"
>
<noscript>Javascript needs to be activated to view comments.</noscript>
</section>
</div>
<div class="min-h-40"></div> <div class="min-h-40"></div>
</div> </div>
</NavigationLayout> </NavigationLayout>
<script data-isso="https://comments.araozu.dev/"
data-isso-lang={lang}
src="https://comments.araozu.dev/js/embed.min.js"
></script>
</body> </body>
</html> </html>

View File

@ -0,0 +1,9 @@
---
import BlogLayout from "./BlogLayout.astro";
let { frontmatter } = Astro.props;
---
<BlogLayout lang="es" frontmatter={frontmatter}>
<slot />
</BlogLayout>

View File

@ -1,5 +1,5 @@
--- ---
layout: ../../../layouts/BlogLayout.astro layout: ../../../layouts/BlogLayoutEs.astro
title: "¿Con qué lenguaje de programación se crean los lenguajes de programación?" title: "¿Con qué lenguaje de programación se crean los lenguajes de programación?"
description: | description: |
Vista superior de cómo funciona un lenguaje de programación Vista superior de cómo funciona un lenguaje de programación

View File

@ -1,5 +1,5 @@
--- ---
layout: ../../../layouts/BlogLayout.astro layout: ../../../layouts/BlogLayoutEs.astro
title: "01: Programación desde cero absoluto con Zig" title: "01: Programación desde cero absoluto con Zig"
description: | description: |
Aprendé a programar desde completamente cero, utilizando el lenguaje Aprendé a programar desde completamente cero, utilizando el lenguaje

View File

@ -1,5 +1,5 @@
--- ---
layout: ../../../layouts/BlogLayout.astro layout: ../../../layouts/BlogLayoutEs.astro
title: "02: Programación desde cero absoluto con Zig: Fundamentos" title: "02: Programación desde cero absoluto con Zig: Fundamentos"
description: | description: |
Fundamentos de la computación, programas, componentes Fundamentos de la computación, programas, componentes

View File

@ -1,5 +1,5 @@
--- ---
layout: ../../../layouts/BlogLayout.astro layout: ../../../layouts/BlogLayoutEs.astro
title: "03: Programación desde cero: Hola mundo" title: "03: Programación desde cero: Hola mundo"
description: | description: |
Escribí el tradicional programa "Hola mundo" por tí mismo! Escribí el tradicional programa "Hola mundo" por tí mismo!

View File

@ -1,5 +1,5 @@
--- ---
layout: ../../../layouts/BlogLayout.astro layout: ../../../layouts/BlogLayoutEs.astro
title: "04: Programación desde cero: Modificando el hola mundo" title: "04: Programación desde cero: Modificando el hola mundo"
description: | description: |
Impresión, strings/cadenas y stdout. Impresión, strings/cadenas y stdout.

View File

@ -1,5 +1,5 @@
--- ---
layout: ../../../layouts/BlogLayout.astro layout: ../../../layouts/BlogLayoutEs.astro
title: "05: Cero a Zig: Instalando VSCode y Zig" title: "05: Cero a Zig: Instalando VSCode y Zig"
description: | description: |
Instalamos Zig y VSCode en nuestro computador Instalamos Zig y VSCode en nuestro computador

View File

@ -1,5 +1,5 @@
--- ---
layout: ../../../layouts/BlogLayout.astro layout: ../../../layouts/BlogLayoutEs.astro
title: "06: Cero a Zig: Terminal y Proyecto Zig" title: "06: Cero a Zig: Terminal y Proyecto Zig"
description: | description: |
Veremos el terminal y cómo crear/ejecutar un proyecto de Zig Veremos el terminal y cómo crear/ejecutar un proyecto de Zig

View File

@ -1,8 +1,8 @@
--- ---
layout: ../../../layouts/BlogLayout.astro layout: ../../../layouts/BlogLayoutEs.astro
title: "07: Cero a Zig - Variables" title: "07: Cero a Zig - Impresión con formatos"
description: | description: |
Introducción a las variables Imprimiendo información adicional.
pubDate: "2024-08-10" pubDate: "2024-08-10"
tags: ["tech", "lenguajes", "intro", "tutorial", "zig", "VSCode"] tags: ["tech", "lenguajes", "intro", "tutorial", "zig", "VSCode"]
image: image:
@ -11,214 +11,76 @@ image:
caption: "" caption: ""
--- ---
Ahora veremos un concepto fundamental: Variables. En este artículo aprenderemos más acerca de la impresión,
especialmente un aspecto importante para futúros artículos:
formatos.
Todo el código lo escribiremos en el proyecto que creamos ## Formato de impresión
en el artículo anterior.
El código para imprimir texto tiene dos partes:
## Motivación
Vamos a plantear un escenario: Queremos escribir un programa
que salude a una persona, le diga cuanto cuesta su orden,
y se despida.
Digamos que la persona se llama `Juan`. El código es así:
```zig ```zig
const std = @import("std"); // --- 1 --- -2-
std.debug.print("formato", .{});
pub fn main() !void {
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Tu pedido cuesta {s} dolares\n", .{"20"});
std.debug.print("Adios {s}\n", .{"Juan"});
}
``` ```
Y al ejecutarlo se muestra: - 1: un formato (string)
- 2: datos adicionales
![Codigo](/img/blog/es/tutorial/1x/001.jpg) Hasta ahora utilizamos el primer string (1) para imprimir
nuestro texto. Pero en (1) podemos poner unas secuencias
especiales, que permiten colocar información adicional.
Esta información adicional se coloca en (2).
Como el código es sencillo, no hay ningún problema. Por ejemplo, podemos colocar `{s}` para imprimir un
¿Pero qué pasaría si tuvieramos que imprimir el nombre 10 veces? texto adicional:
Entonces tendríamos que repetirlo 10 veces.
![Codigo](/img/blog/es/tutorial/1x/011.png)
En este caso, `{s}` será reemplazado por `Hola`, e
imprimirá `Hola`.
Otro ejemplo:
![Codigo](/img/blog/es/tutorial/1x/012.jpg)
Aquí también, `{s}` será reemplazado por `Sara`.
Al ejecutar obtendremos `Mi nombre es Sara, y el tuyo?`
Podemos colocar más de un formato:
![Codigo](/img/blog/es/tutorial/1x/013.jpg)
En este caso la información adicional se reemplaza en orden,
e imprime `Soy Raul y ella es Rosa`.
Cuando se colocan datos adicionales, se separan con comas:
```zig ```zig
const std = @import("std"); .{"Raul", "Rosa"}
// |
pub fn main() !void {
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
}
``` ```
![Codigo](/img/blog/es/tutorial/1x/002.jpg) En el siguiente artículo veremos un concepto
llamado variables. Por ahora, solo necesitas
Un poco tedioso, pero nada imposible. saber que se pueden utilizar.
Ahora vamos a cambiar el programa: el nombre de la
persona será `Maria`.
Lo que tenemos que hacer es cambiar `Juan` por
`Maria` en los 10 lugares, uno por uno.
Esto es bastante común, y existe una solución para
no cambiar 10 veces, sino solamente una.
## Variables
Una variable es como un almacén. Una variable
almacena un valor bajo un nombre.
Por ejemplo, podemos decir que `nombre = "Juan"`,
y a partir de ese momento cada vez que usemos
`nombre` se reemplazará por `Juan`.
Por ejemplo:
```zig ```zig
const std = @import("std"); const std = @import("zig");
pub fn main() !void { pub fn main() !void {
const nombre = "Juan"; const nombre = "Juan";
std.debug.print("Hola {s}\n", .{nombre}); const apellido = "Perez";
std.debug.print("{s} {s}", .{nombre, apellido});
// Imprime: `Juan Perez`
} }
``` ```
En el código de arriba en la linea 4, hemos creado una
variable `nombre`, y le hemos dado como valor `"Juan"`.
Despues, en la linea 5 estamos utilizando la variable. ## Otros formatos
En vez de escribir `.{"Juan"}` escribimos `.{nombre}`.
Al ejecutar el programa se imprimirá `Hola Juan` Hemos visto el formato `{s}`, pero existen muchos más,
que aprenderemos a medida que los necesitemos.
![Codigo](/img/blog/es/tutorial/1x/003.jpg)
Podemos utilizar la variable las veces que queramos.
Si imprimimos 10 veces se vería así:
```zig
const std = @import("std");
pub fn main() !void {
const nombre = "Juan";
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
}
```
Y al ejecutar se imprime 10 veces.
![Codigo](/img/blog/es/tutorial/1x/004.jpg)
Ahora, si queremos cambiar `Juan` por `Maria`,
solo tenemos que hacerlo en un lugar:
```zig
const std = @import("std");
pub fn main() !void {
const nombre = "Maria";
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
}
```
![Codigo](/img/blog/es/tutorial/1x/005.jpg)
## Creando una variable
Para crear una variable se escribe:
- `const`
- El nombre de la variable
- `=`
- El valor de la variable
- `;`
El nombre de la variable solo puede tener letras,
números y guiones bajos. No puede tener espacios.
Puedes crear varias variables, cada una en una
línea. Por ejemplo:
```zig
const nombre = "Pedro";
const edad = "32";
const helado_favorito = "Vainilla";
```
## Error de duplicado
Otro dato importante es que solo se puede crear
una variable con un nombre una vez. Por ejemplo:
![Codigo](/img/blog/es/tutorial/1x/006.jpg)
En el código de arriba hay un error. Cuando aparecen
lineas punteadas rojas significa que hay un error.
Si colocas tu mouse encima de la palabra subrayada
aparecerá un mensaje:
![Codigo](/img/blog/es/tutorial/1x/007.jpg)
El error es `redeclaration of local constant 'nombre'`.
Significa "redeclaración de constante local 'nombre'".
Hay algunas palabras raras, pero quiere decir que
estas volviendo a crear una variable con un nombre
ya ocupado.
Para solucionar el error, cambia el nombre de la variable.
## Error con variables no utilizadas
Si creas variables, y no las utilizas despues,
tendrás este error:
![Codigo](/img/blog/es/tutorial/1x/008.jpg)
`unused local constant`: "constante local inutilizada".
Zig no nos permite crear una variable y dejarla olvidada.
Si creamos una variable, la tenemos que usar.
Para solucionar el error, imprime la variable,
o elimínala, si no la vas a utilizar aún.
## Próximamente
En el siguiente artículo aprenderemos los conceptos:
comentarios, números y operaciones matemáticas.

View File

@ -0,0 +1,224 @@
---
layout: ../../../layouts/BlogLayoutEs.astro
title: "08: Cero a Zig - Variables"
description: |
Introducción a las variables
pubDate: "2024-08-11"
tags: ["tech", "lenguajes", "intro", "tutorial", "zig", "VSCode"]
image:
url: ""
alt: ""
caption: ""
---
Ahora veremos un concepto fundamental: Variables.
Todo el código lo escribiremos en el proyecto que creamos
en el artículo anterior.
## Motivación
Vamos a plantear un escenario: Queremos escribir un programa
que salude a una persona, le diga cuanto cuesta su orden,
y se despida.
Digamos que la persona se llama `Juan`. El código es así:
```zig
const std = @import("std");
pub fn main() !void {
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Tu pedido cuesta {s} dolares\n", .{"20"});
std.debug.print("Adios {s}\n", .{"Juan"});
}
```
Y al ejecutarlo se muestra:
![Codigo](/img/blog/es/tutorial/1x/001.jpg)
Como el código es sencillo, no hay ningún problema.
¿Pero qué pasaría si tuvieramos que imprimir el nombre 10 veces?
Entonces tendríamos que repetirlo 10 veces.
```zig
const std = @import("std");
pub fn main() !void {
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
std.debug.print("Hola {s}\n", .{"Juan"});
}
```
![Codigo](/img/blog/es/tutorial/1x/002.jpg)
Un poco tedioso, pero nada imposible.
Ahora vamos a cambiar el programa: el nombre de la
persona será `Maria`.
Lo que tenemos que hacer es cambiar `Juan` por
`Maria` en los 10 lugares, uno por uno.
Esto es bastante común, y existe una solución para
no cambiar 10 veces, sino solamente una.
## Variables
Una variable es como un almacén. Una variable
almacena un valor bajo un nombre.
Por ejemplo, podemos decir que `nombre = "Juan"`,
y a partir de ese momento cada vez que usemos
`nombre` se reemplazará por `Juan`.
Por ejemplo:
```zig
const std = @import("std");
pub fn main() !void {
const nombre = "Juan";
std.debug.print("Hola {s}\n", .{nombre});
}
```
En el código de arriba en la linea 4, hemos creado una
variable `nombre`, y le hemos dado como valor `"Juan"`.
Despues, en la linea 5 estamos utilizando la variable.
En vez de escribir `.{"Juan"}` escribimos `.{nombre}`.
Al ejecutar el programa se imprimirá `Hola Juan`
![Codigo](/img/blog/es/tutorial/1x/003.jpg)
Podemos utilizar la variable las veces que queramos.
Si imprimimos 10 veces se vería así:
```zig
const std = @import("std");
pub fn main() !void {
const nombre = "Juan";
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
}
```
Y al ejecutar se imprime 10 veces.
![Codigo](/img/blog/es/tutorial/1x/004.jpg)
Ahora, si queremos cambiar `Juan` por `Maria`,
solo tenemos que hacerlo en un lugar:
```zig
const std = @import("std");
pub fn main() !void {
const nombre = "Maria";
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
std.debug.print("Hola {s}\n", .{nombre});
}
```
![Codigo](/img/blog/es/tutorial/1x/005.jpg)
## Creando una variable
Para crear una variable se escribe:
- `const`
- El nombre de la variable
- `=`
- El valor de la variable
- `;`
El nombre de la variable solo puede tener letras,
números y guiones bajos. No puede tener espacios.
Puedes crear varias variables, cada una en una
línea. Por ejemplo:
```zig
const nombre = "Pedro";
const edad = "32";
const helado_favorito = "Vainilla";
```
## Error de duplicado
Otro dato importante es que solo se puede crear
una variable con un nombre una vez. Por ejemplo:
![Codigo](/img/blog/es/tutorial/1x/006.jpg)
En el código de arriba hay un error. Cuando aparecen
lineas punteadas rojas significa que hay un error.
Si colocas tu mouse encima de la palabra subrayada
aparecerá un mensaje:
![Codigo](/img/blog/es/tutorial/1x/007.jpg)
El error es `redeclaration of local constant 'nombre'`.
Significa "redeclaración de constante local 'nombre'".
Hay algunas palabras raras, pero quiere decir que
estas volviendo a crear una variable con un nombre
ya ocupado.
Para solucionar el error, cambia el nombre de la variable.
## Error con variables no utilizadas
Si creas variables, y no las utilizas despues,
tendrás este error:
![Codigo](/img/blog/es/tutorial/1x/008.jpg)
`unused local constant`: "constante local inutilizada".
Zig no nos permite crear una variable y dejarla olvidada.
Si creamos una variable, la tenemos que usar.
Para solucionar el error, imprime la variable,
o elimínala, si no la vas a utilizar aún.
## Próximamente
En el siguiente artículo aprenderemos los conceptos:
comentarios, números y operaciones matemáticas.

View File

@ -0,0 +1,187 @@
---
layout: ../../../layouts/BlogLayoutEs.astro
title: "09: Cero a Zig - Comentarios y Números"
description: |
Comentarios, números y operaciones matemáticas
pubDate: "2024-08-17"
tags: ["tech", "lenguajes", "intro", "tutorial", "zig", "VSCode"]
image:
url: "/img/blog/es/tutorial/1x/009-matematicas.jpg"
alt: "Imágen del meme 'Matemáticas hijo'"
caption: "¡Matemáticas hijo!"
---
En este artículo vemos 3 conceptos: Comentarios, números
y operaciones matemáticas.
## Comentarios
Hasta el momento lo único que hemos escrito es código.
Pero existen multitud de ocasiones donde queremos escribir
apuntes, recordatorios, explicaciones, etc. Para esto sirven
los comentarios.
Un comentario es un texto que es ignorado por Zig. Dentro
de un comentario podemos escribir cualquier cosa, sin importar
las reglas de Zig.
Los comentarios inician con doble slash `//`,
y terminan cuando acaba la linea.
```zig
// Este es un comentario
pub fn main() !void {
// Este también es un comentario
std.debug.print("Hola", .{});
}
```
Una vez que iniciamos un comentario con doble slash,
la única forma de terminarlo es con una linea nueva.
Si quieres un comentario que abarque varias lineas,
cada linea debe iniciar con doble slash:
```zig
pub fn main() !void {
// Este es un comentario
// que ocupa 3 lineas
// de texto :D
std.debug.print("Hola", .{});
}
```
También puedes escribir un comentario en
medio de una linea con código, pero no
es recomendable.
```zig
pub fn main() !void { // Este es un comentario
std.debug.print("Hola", .{}); // Este también
}
```
A partir de ahora, utilizaré comentarios en el código
para explicar mejor los conceptos.
## Números
Hay un concepto importante que aprenderemos en un
próximo artículo llamado "Tipos de datos". Pero por
ahora, hablaremos solo de una parte pequeña: números.
No necesito explicarte qué son los números. Lo que
sí necesito es explicar cómo se utilizan en Zig,
y como se diferencian de los strings.
Primero, vamos a imprimir un número. El código
es el siguiente:
```zig
const std = @import("std");
pub fn main() !void {
std.debug.print("{d}", .{322});
}
```
Nota que el número no tiene comillas. Es `322`,
no `"322"`.
Al ejecutarlo en el terminal con `zig build run`
obtenemos:
![Codigo](/img/blog/es/tutorial/1x/010.jpg)
Nota en la línea 4 qué formato estamos utilizando:
`{d}`. Este formato permite imprimir números.
También podemos utilizar números en variables:
```zig
const std = @import("std");
pub fn main() !void {
const edad = 32;
// Imprime: `Tengo 32 años`
std.debug.print("Tengo {d} años", .{edad});
}
```
También podemos utilizar números negativos: `-20`;
### Números, no strings
Quiero recalcar este punto. Estamos escribiendo
`123`, no `"123"`. No utilizamos comillas.
Esto es importante porque estos dos son cosas
diferentes. Una cosa es un número, y otra cosa
es un texto (string).
`123` es un número. Podemos realizar operaciones
matemáticas con él. `"123"` no es un número,
es un string. Solo que resulta que los caracteres
son el 1, 2 y 3. Pero no podemos hacer matemática
con un string.
Este es un punto de confusión común cuando se
aprende a programar.
### Números enteros, técnicamente (`int`)
Técnicamente, hay muchos tipos de números.
Lo que estamos utilizando hasta ahora son números
enteros, que en ingles se llaman "integer numbers".
Ya que en programación todo es inglés y abreviaciones,
en vez de decir "integer numbers", se les conoce como
"int".
A partir de ahora también diré `int` cuando me
refiera a los números enteros.
## Matemáticas
Ahora que sabemos cómo crear números (int), podemos hacer
operaciones con ellos.
Zig soporta las operaciones que conoces: suma `+`,
resta `-`, multiplicación `*` y división `/`.
```zig
const std = @import("std");
pub fn main() !void {
const r1 = 9 + 3; // 12
const r2 = 9 - 3; // 6
const r1 = 9 * 3; // 27
const r1 = 9 / 3; // 3
// imprime: `12 6 27 3`
std.debug.print("{d} {d} {d} {d}", .{r1, r2, r3, r4});
}
```
También puedes hacer varias operaciones a la vez, y
agruparlas con paréntesis.
```zig
const resultado = 80 + 20 / (5 - 3);
```
## Números racionales (float)