diff --git a/public/img/blog/es/tutorial/1x/001.jpg b/public/img/blog/es/tutorial/1x/001.jpg new file mode 100644 index 0000000..0ad841e Binary files /dev/null and b/public/img/blog/es/tutorial/1x/001.jpg differ diff --git a/public/img/blog/es/tutorial/1x/002.jpg b/public/img/blog/es/tutorial/1x/002.jpg new file mode 100644 index 0000000..85280a4 Binary files /dev/null and b/public/img/blog/es/tutorial/1x/002.jpg differ diff --git a/public/img/blog/es/tutorial/1x/003.jpg b/public/img/blog/es/tutorial/1x/003.jpg new file mode 100644 index 0000000..4ece119 Binary files /dev/null and b/public/img/blog/es/tutorial/1x/003.jpg differ diff --git a/public/img/blog/es/tutorial/1x/004.jpg b/public/img/blog/es/tutorial/1x/004.jpg new file mode 100644 index 0000000..76bd42f Binary files /dev/null and b/public/img/blog/es/tutorial/1x/004.jpg differ diff --git a/public/img/blog/es/tutorial/1x/004.png b/public/img/blog/es/tutorial/1x/004.png new file mode 100644 index 0000000..91009b1 Binary files /dev/null and b/public/img/blog/es/tutorial/1x/004.png differ diff --git a/public/img/blog/es/tutorial/1x/005.jpg b/public/img/blog/es/tutorial/1x/005.jpg new file mode 100644 index 0000000..ce49f67 Binary files /dev/null and b/public/img/blog/es/tutorial/1x/005.jpg differ diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro new file mode 100644 index 0000000..a86c9e2 --- /dev/null +++ b/src/components/Navigation.astro @@ -0,0 +1,35 @@ +
+ +
diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro index d7678ba..0f07aa9 100644 --- a/src/layouts/BlogLayout.astro +++ b/src/layouts/BlogLayout.astro @@ -1,4 +1,6 @@ --- +import NavigationLayout from "./NavigationLayout.astro"; + let { frontmatter, lang } = Astro.props; lang = lang ?? "en"; --- @@ -25,39 +27,10 @@ lang = lang ?? "en"; href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css" /> - - -
-
- -
-
+ +
{ frontmatter?.title && ( @@ -97,6 +70,6 @@ lang = lang ?? "en";
-
+ diff --git a/src/layouts/NavigationLayout.astro b/src/layouts/NavigationLayout.astro new file mode 100644 index 0000000..86c1392 --- /dev/null +++ b/src/layouts/NavigationLayout.astro @@ -0,0 +1,8 @@ +--- +import Navigation from "../components/Navigation.astro"; +--- + +
+ + +
diff --git a/src/layouts/SideProject.astro b/src/layouts/SideProject.astro index c9b9605..b3d3854 100644 --- a/src/layouts/SideProject.astro +++ b/src/layouts/SideProject.astro @@ -1,6 +1,7 @@ --- import GithubIcon from "../components/Sideprojects/GithubIcon.astro"; import GlobeIcon from "../components/Sideprojects/GlobeIcon.astro"; +import NavigationLayout from "./NavigationLayout.astro"; --- @@ -25,73 +26,42 @@ import GlobeIcon from "../components/Sideprojects/GlobeIcon.astro"; href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css" /> - - -
-
- -
+
-
-

+
+

Typed Hyperscript Processor (webpage)

- Descripción del proyecto :D (carita feliz) - en 240 palabras o menos + Descripción del proyecto :D (carita feliz) en 240 + palabras o menos

Source code -
+
- https://webpage.araozu.dev/ + https://webpage.araozu.dev/
-
- logos -
+
logos

-
+
-
+ - diff --git a/src/pages/blog/es/programacion-07.md b/src/pages/blog/es/programacion-07.md new file mode 100644 index 0000000..16403d1 --- /dev/null +++ b/src/pages/blog/es/programacion-07.md @@ -0,0 +1,179 @@ +--- +layout: ../../../layouts/BlogLayout.astro +title: "07: Cero a Zig - Variables" +description: | + Introducción a las variables +pubDate: "2024-08-10" +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"; +``` + + + + diff --git a/src/pages/index.astro b/src/pages/index.astro index 65712a7..224c1a0 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -3,8 +3,10 @@ import Sidebar from "../components/Sidebar.astro"; import Languages from "../components/index/Languages.astro"; import Learning from "../components/index/Learning.astro"; import Tools from "../components/index/Tools.astro"; +import NavigationLayout from "../layouts/NavigationLayout.astro"; --- - + + @@ -21,15 +23,17 @@ import Tools from "../components/index/Tools.astro"; -
- -
- - - + +
+ +
+ + + +
-
+ diff --git a/src/pages/side-projects/index.astro b/src/pages/side-projects/index.astro index 32e7285..fc00fb5 100644 --- a/src/pages/side-projects/index.astro +++ b/src/pages/side-projects/index.astro @@ -1,6 +1,7 @@ --- import GithubIcon from "../../components/Sideprojects/GithubIcon.astro"; import GlobeIcon from "../../components/Sideprojects/GlobeIcon.astro"; +import NavigationLayout from "../../layouts/NavigationLayout.astro"; --- @@ -25,78 +26,52 @@ import GlobeIcon from "../../components/Sideprojects/GlobeIcon.astro"; href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css" /> - - -
-
- -
+
-
-

+
+

Typed Hyperscript Processor (webpage)

This is a static webpage that contains documentation for my other project, the THP compiler. -
-
- It is written with Astro and Markdown, highlights - the syntax in the code snippets using said compiler, - and has some interactive code snippets. +
+
+ It is written with Astro and Markdown, highlights the + syntax in the code snippets using said compiler, and + has some interactive code snippets.

- Source code -
+ Source code +
- https://thp.araozu.dev/ + https://thp.araozu.dev/
-
- logos -
+
logos

-
+
-
+