Compare commits
3 Commits
8e8cb10d3b
...
7768e3c206
| Author | SHA1 | Date |
|---|---|---|
 Araozu
|
7768e3c206 | |
|
Araozu
|
e83d3ba276 | |
|
Araozu
|
dc487a2788 |
|
|
@ -1,16 +1,33 @@
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
import tailwind from "@astrojs/tailwind";
|
import tailwind from "@astrojs/tailwind";
|
||||||
import mdx from "@astrojs/mdx";
|
import mdx from "@astrojs/mdx";
|
||||||
|
import {
|
||||||
|
transformerNotationDiff,
|
||||||
|
transformerNotationFocus,
|
||||||
|
transformerMetaHighlight,
|
||||||
|
transformerNotationHighlight,
|
||||||
|
transformerNotationErrorLevel,
|
||||||
|
transformerNotationWordHighlight,
|
||||||
|
} from '@shikijs/transformers'
|
||||||
|
|
||||||
// https://astro.build/config
|
// https://astro.build/config
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
integrations: [tailwind(), mdx()],
|
integrations: [tailwind(), mdx()],
|
||||||
markdown: {
|
markdown: {
|
||||||
shikiConfig: {
|
shikiConfig: {
|
||||||
themes: {
|
themes: {
|
||||||
light: "catppuccin-latte",
|
light: "catppuccin-latte",
|
||||||
dark: "github-dark"
|
dark: "dark-plus"
|
||||||
}
|
},
|
||||||
|
transformers: [
|
||||||
|
transformerNotationDiff(),
|
||||||
|
transformerNotationFocus(),
|
||||||
|
transformerMetaHighlight(),
|
||||||
|
transformerNotationHighlight(),
|
||||||
|
transformerNotationErrorLevel(),
|
||||||
|
transformerNotationWordHighlight(),
|
||||||
|
],
|
||||||
|
defaultColor: false,
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
pre.astro-code {
|
pre.astro-code {
|
||||||
padding: 1rem;
|
padding-top: 1rem;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
border: solid 1px var(--c-border-1);
|
border: solid 1px var(--c-border-1);
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
|
|
@ -74,15 +74,13 @@ pre.astro-code>code .line::before {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.astro-code {
|
||||||
|
background-color: var(--shiki-dark-bg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
.astro-code,
|
.astro-code,
|
||||||
.astro-code span {
|
.astro-code span {
|
||||||
color: var(--shiki-dark) !important;
|
color: var(--shiki-dark) !important;
|
||||||
background-color: var(--shiki-dark-bg) !important;
|
|
||||||
/* Optional, if you also want font styles */
|
|
||||||
font-style: var(--shiki-dark-font-style) !important;
|
|
||||||
font-weight: var(--shiki-dark-font-weight) !important;
|
|
||||||
text-decoration: var(--shiki-dark-text-decoration) !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -94,3 +92,70 @@ pre.astro-code>code .line::before {
|
||||||
#isso-thread input {
|
#isso-thread input {
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Shiki transformers */
|
||||||
|
.astro-code {
|
||||||
|
--shiki-highlight-color: #cccccc;
|
||||||
|
--shiki-highlight-word-color: #aaaaaa;
|
||||||
|
--shiki-error-bg-color: rgba(244, 63, 63, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.astro-code {
|
||||||
|
--shiki-highlight-color: #343434;
|
||||||
|
--shiki-highlight-word-color: #3a3a3a;
|
||||||
|
--shiki-error-bg-color: rgba(244, 63, 94, 0.16);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line.highlighted:not(.error) {
|
||||||
|
background-color: var(--shiki-highlight-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line.highlighted.error {
|
||||||
|
background-color: var(--shiki-error-bg-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line .highlighted-word {
|
||||||
|
border: 1px solid var(--shiki-highlight-word-color);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
padding: 1px 3px;
|
||||||
|
margin: -1px -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line_
|
||||||
|
|
||||||
|
.diff {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100vw;
|
||||||
|
margin: 0 -12px;
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff.add {
|
||||||
|
background-color: #0505;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff.remove {
|
||||||
|
background-color: #8005;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff:before {
|
||||||
|
position: absolute;
|
||||||
|
left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-focused .line:not(.focused) {
|
||||||
|
filter: blur(0.08rem);
|
||||||
|
transition: filter linear 250ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-focused:hover .line:not(.focuser) {
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,21 +9,21 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Iosevka Fixed Web';
|
font-family: 'Iosevka Fixed Web';
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-stretch: normal;
|
font-stretch: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
src: url('/Iosevka/Bold.woff2') format('woff2');
|
src: url('/Iosevka/Bold.woff2') format('woff2');
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Iosevka Etoile Web';
|
font-family: 'Iosevka Etoile Web';
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
font-stretch: normal;
|
font-stretch: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
src: url('/IosevkaEtoile/Heavy.woff2') format('woff2');
|
src: url('/IosevkaEtoile/Heavy.woff2') format('woff2');
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Iosevka from Xe Iaso: https://xeiaso.net/ https://github.com/Xe/iosevka */
|
/* Iosevka from Xe Iaso: https://xeiaso.net/ https://github.com/Xe/iosevka */
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
|
|
@ -4,7 +4,7 @@ title: "¿Con qué lenguaje de programación se crean los lenguajes de programac
|
||||||
description: |
|
description: |
|
||||||
Vista superior de cómo funciona un lenguaje de programación
|
Vista superior de cómo funciona un lenguaje de programación
|
||||||
realmente.
|
realmente.
|
||||||
pubDate: "2024-07-25"
|
pubDate: "2024-07-14"
|
||||||
tags: ["tech", "lenguajes", "tutorial"]
|
tags: ["tech", "lenguajes", "tutorial"]
|
||||||
image:
|
image:
|
||||||
url: "/img/blog/es/lang/cover.png"
|
url: "/img/blog/es/lang/cover.png"
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
layout: ../../../layouts/BlogLayoutEs.astro
|
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: |
|
description: |
|
||||||
Aprendé a programar desde completamente cero, utilizando el lenguaje
|
Aprendé a programar desde completamente cero, utilizando el lenguaje
|
||||||
de programación Zig.
|
de programación Zig.
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
layout: ../../../layouts/BlogLayoutEs.astro
|
layout: ../../../layouts/BlogLayoutEs.astro
|
||||||
title: "02: Programación desde cero absoluto con Zig: Fundamentos"
|
title: "Cero a Zig 02: Fundamentos"
|
||||||
description: |
|
description: |
|
||||||
Fundamentos de la computación, programas, componentes
|
Fundamentos de la computación, programas, componentes
|
||||||
pubDate: "2024-07-16"
|
pubDate: "2024-07-16"
|
||||||
|
|
|
||||||
|
|
@ -1,141 +1,174 @@
|
||||||
---
|
---
|
||||||
layout: ../../../layouts/BlogLayoutEs.astro
|
layout: ../../../layouts/BlogLayoutEs.astro
|
||||||
title: "03: Programación desde cero: Hola mundo"
|
title: "Cero a Zig 03: Instalando VSCode y Zig"
|
||||||
description: |
|
description: |
|
||||||
Escribí el tradicional programa "Hola mundo" por tí mismo!
|
Instalamos Zig y VSCode en nuestro computador
|
||||||
pubDate: "2024-07-17"
|
pubDate: "2024-07-17"
|
||||||
tags: ["tech", "lenguajes", "intro", "tutorial", "zig"]
|
tags: ["tech", "lenguajes", "intro", "tutorial", "zig", "VSCode"]
|
||||||
image:
|
image:
|
||||||
url: ""
|
url: ""
|
||||||
alt: ""
|
alt: ""
|
||||||
caption: ""
|
caption: ""
|
||||||
---
|
---
|
||||||
|
|
||||||
|
En este artículo vamos a instalar 2 cosas en nuestro computador:
|
||||||
En este artículo vamos a escribir nuestro primer programa: Hola mundo. Vamos a
|
[Zig](https://ziglang.org/) y
|
||||||
modificarlo y entender algunos otros conceptos.
|
[Visual Studio Code](https://code.visualstudio.com/).
|
||||||
|
Necesitamos estas 2 herramientas antes de poder empezar a programar.
|
||||||
## 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:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
|
|
||||||
## ¿Qué significan todas estas letras?
|
Ya que este es un tutorial básico de programación, asumo que
|
||||||
|
estas utilizando Windows. Yo usaré Windows 10, pero las instrucciones
|
||||||
Como verás, hay un monton de palabras y símbolos con colorcitos.
|
funcionan igual en Windows 11.
|
||||||
Este es el código, es como un lenguaje especial utilizado
|
|
||||||
para comunicarse con el computador.
|
|
||||||
|
|
||||||
Así como el francés, árabe o coreano, el **lenguaje** de programación Zig
|
|
||||||
tiene un conjunto de reglas. Aprenderemos las reglas a medida que avance
|
|
||||||
el tiempo. Mientras tanto, puedes ignorar todas esas palabras.
|
|
||||||
|
|
||||||
> ¿Que pasa si eliminas alguna de esas palabras y ejecutas el programa
|
|
||||||
(con el boton "Run")? ¿Qué mensaje obtienes? ¿Qué crees que significa?
|
|
||||||
|
|
||||||
|
|
||||||
## Magia negra y abstracción
|
## Descargar e instalar VSCode
|
||||||
|
|
||||||
Según [Significados.com](https://www.significados.com/abstracto/),
|
Si sabes como instalar un programa y no necesitas instrucciones
|
||||||
abstracto significa vago, impreciso, teórico, que no tiene existencia
|
paso a paso, saltate esta sección y [ve a la siguiente sección](#introducción-a-vscode).
|
||||||
física (entre otras cosas). Algo abstracto suele ser algo difícil
|
|
||||||
de entender, o imaginario.
|
Primero busca `VSCode` en Google, y entra a la primera página que
|
||||||
|
sale.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Una vez en la página descarga VSCode con el boton grande y azul.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Se abrirá una nueva ventana en la esquina superior derecha.
|
||||||
|
Cuando termine de descargarse, ábrelo haciendole click.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
En programación, abstracto tiene otro significado. Puedes buscar su
|
Se abrirá una nueva ventana. Primero selecciona
|
||||||
definición técnica en internet, pero me parece muy confusa para
|
"Acepto el acuerdo" y despues presiona el boton "Siguiente".
|
||||||
un principiante, así que lo explicare en mis términos.
|
|
||||||
|
|
||||||
En programación, abstracto significa que sabemos **qué** hace, pero
|
|
||||||
no **cómo** lo hace. Un ejemplo claro sería un auto. Sabemos que
|
|
||||||
al pisar el acelerador, el auto avanza. Pero no sabemos **cómo**
|
|
||||||
pisar el acelerador ocasiona que el combustible se transforme en
|
|
||||||
energía cinemática.
|
|
||||||
|
|
||||||
Por ejemplo, voy a hablar más adelante de "imprimir" en el programa.
|
Volveran a salir nuevas ventanas. Presiona "Siguiente" en todas.
|
||||||
Imprimir significa mostrar un mensaje en la pantalla. Sin embargo,
|
|
||||||
no te voy a explicar cómo funciona la impresión. El concepto de
|
|
||||||
"imprimir" es abstracto.
|
|
||||||
|
|
||||||
### Magia negra
|
|
||||||
|
|
||||||
Escuché este termino del canal de Youtube Imesi.net. Magia negra
|
Cuando salga "Instalar" en vez de "Siguiente", presionalo.
|
||||||
es algo que: no se qué hace, cómo funciona, ni tampoco me importa.
|
|
||||||
|
|
||||||
Voy a utilizar el término "magia negra" para referirme a algo
|
|
||||||
por lo que no necesitas preocuparte, o intentar entender. Por
|
|
||||||
ejemplo, en el código de más arriba:
|
|
||||||
|
|
||||||
|
Finalmente, saldrá una última ventana. Presiona "Finalizar"
|
||||||
|
y se abrirá VSCode.
|
||||||
|
|
||||||
Todo el texto que dice:
|
|
||||||
|
|
||||||
```zig
|
También puedes abrir VSCode desde el menú de inicio de
|
||||||
const std = @import("std")
|
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.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 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í:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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":
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Y presiona el botón azul "Install" del primer item de la lista
|
||||||
|
que dice "Spanish":
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Luego de eso, abajo a la derecha saldrá un mensaje.
|
||||||
|
Presiona el botón azul:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Y busca "Zig". Instala la extensión que se llama
|
||||||
|
"Zig Language" y dice "ziglang":
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Cuando se haya instalado puedes cerrar la pestaña:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Y volver al inicio:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 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:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
En la barra de busqueda escribe `Zig`, y presiona el botón
|
||||||
|
`Zig Setup: Install Zig`:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
En el dialogo que sale, presiona "Install".
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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`.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Saldrá una nueva ventana, presiona "Install".
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Y selecciona la misma versión de antes. En mi caso, `0.13.0`.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Con eso terminamos. Hemos instalado Zig en nuestro computador.
|
||||||
|
|
||||||
|
En el siguiente artículo aprenderemos del terminal y
|
||||||
|
crearemos un proyecto.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,171 +1,170 @@
|
||||||
---
|
---
|
||||||
layout: ../../../layouts/BlogLayoutEs.astro
|
layout: ../../../layouts/BlogLayoutEs.astro
|
||||||
title: "04: Programación desde cero: Modificando el hola mundo"
|
title: "Cero a Zig 04: Terminal y Proyecto Zig"
|
||||||
description: |
|
description: |
|
||||||
Impresión, strings/cadenas y stdout.
|
Veremos el terminal y cómo crear/ejecutar un proyecto de Zig
|
||||||
pubDate: "2024-07-30"
|
pubDate: "2024-07-18"
|
||||||
tags: ["tech", "lenguajes", "intro", "tutorial", "zig"]
|
tags: ["tech", "lenguajes", "intro", "tutorial", "zig", "VSCode"]
|
||||||
image:
|
image:
|
||||||
url: ""
|
url: "/vid/hacker.webp"
|
||||||
alt: ""
|
alt: ""
|
||||||
caption: ""
|
caption: ""
|
||||||
---
|
---
|
||||||
|
|
||||||
En el artículo anterior escribimos nuestro primer programa:
|
Seguramente has visto imágenes/videos de hackers antes,
|
||||||
Hola mundo. En este artículos vamos a modificar el mensaje
|
escribiendo en una pantalla negra con letras verdes.
|
||||||
y aprender el primer concepto: Strings
|
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
|
[El/la terminal](https://en.wikipedia.org/wiki/Command-line_interface)
|
||||||
[https://zig.fly.dev/p/xNluereqmgW](https://zig.fly.dev/p/xNluereqmgW),
|
es una forma de interactuar con nuestro computador, y se utiliza
|
||||||
donde se encuentra el programa "Hola mundo". Esta vez vamos a modificar
|
muchisimo en programación.
|
||||||
el mensaje.
|
|
||||||
|
|
||||||
El resto de las palabras son magia negra. Te habras dado cuenta que
|
En el terminal escribimos comandos, el computador los ejecuta,
|
||||||
hay palabras en español: Hola y mundo.
|
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`:
|
||||||
|
|
||||||
Hay varias cosas que notar:
|
|
||||||
|
|
||||||
- Estan pintadas de color amarillo
|
Aparecerá una nueva ventana en blanco abajo:
|
||||||
- Tienen comillas dobles `"` al inicio y al final
|
|
||||||
|
|
||||||
Dentro de estas comillas `"` podemos escribir el texto que querramos.
|
|
||||||
|
|
||||||
Por ejemplo, si reemplazas `Hola` por `Adios` y ejecutas el programa,
|
Este es nuestro terminal. Aquí escribiremos algunos comandos
|
||||||
se imprimirá `Adios mundo!`
|
para crear un "proyecto" y "ejecutarlo".
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Y también, si reemplazas `mundo` por otra palabra, se imprimirá
|
|
||||||
lo que escribiste.
|
|
||||||
|
|
||||||
Tambien puedes agregar otro texto en ambos lados. Por ejemplo:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Strings / cadenas de caracteres
|
## Creando un proyecto de Zig
|
||||||
|
|
||||||
Los strings (cadenas de caracteres en inglés) son la forma
|
Un proyecto es una carpeta con una serie de archivos,
|
||||||
en la que almacenamos texto.
|
en los cuales programaremos nuestro programa.
|
||||||
|
|
||||||
Un string empieza con una comilla doble `"`, el contenido
|
Haz click en en el terminal y escribe `mkdir tutorial`
|
||||||
del string, y termina con una comilla doble `"`.
|
|
||||||
|
|
||||||
Unos ejemplos de strings son: `"hola"`, `"adios"`,
|
|
||||||
`"multiples palabras"`, `"123456"`.
|
|
||||||
|
|
||||||
En el programa de arriba hay 2 strings:
|
`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`.
|
||||||
|
|
||||||
Estos strings son lo que se muestra en pantalla al
|
Presiona enter para ejecutar el comando.
|
||||||
ejecutar el programa.
|
|
||||||
|
|
||||||
Los strings tienen algunas características:
|
|
||||||
|
|
||||||
- En el código, los strings tienen otro color para que
|
En el terminal veremos siempre:
|
||||||
sea más fácil identificarlos.
|
|
||||||
- No puede haber comillas dentro de un string.
|
|
||||||
|
|
||||||
El string termina cuando aparece la primera comilla.
|
|
||||||
Por ejemplo:
|
|
||||||
|
|
||||||
|
1. (1) La carpeta en donde estamos
|
||||||
|
2. (2) El comando que escribimos
|
||||||
|
|
||||||
Aquí el string termina despues del `Hola `, la palabra
|
Algunos comandos tienen una "respuesta". En la imágen
|
||||||
`familia` no es parte del string. Puedes ver que el
|
de arriba la respuesta es una confirmación de la carpeta
|
||||||
color amarillo del string termina en la segunda comilla,
|
que creamos.
|
||||||
y la palabra familia está de color blanco.
|
|
||||||
|
|
||||||
- No puede haber nuevas lineas en un string. Esto es un error:
|
Ahora vamos a ejecutar otro comando: `cd tutorial`
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Sin embargo, hay ocasiones donde queremos tener varias lineas
|
`cd` es una abreviación de "change directory", que
|
||||||
en un string. Para esto se utilizan 2 caracteres especiales:
|
significa cambiar de carpeta. Usando este comando cambiamos
|
||||||
`\n`. Estos nos permiten "señalar" que ahí va una linea nueva.
|
la carpeta en la que estamos.
|
||||||
|
|
||||||
|
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.
|
|
||||||
|
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
|
Dentro de VSCode, presionamos el boton "Abrir carpeta".
|
||||||
información puede ser palabras, letras, números, símbolos, etc.
|
|
||||||
|
|
||||||
Para imprimir en Zig se escribe lo siguiente:
|
|
||||||
|
|
||||||
|
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 `()`.
|
|
||||||
|
|
||||||
Dentro de los paréntesis va el string que queremos imprimir
|
Aquí seleccionamos la carpeta `tutorial`. Esta es la carpeta que
|
||||||
y una secuencia misteriosa, así: `("Tu mensaje", .{})`.
|
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.
|
|
||||||
|
|
||||||
Por ejemplo, para imprimir un nuevo texto `Me gusta Zig`
|
Nos saldrá el mensaje de la imagen de abajo. Selecciona "Confiar en
|
||||||
se escribiriá el código así:
|
los autores..." y presiona "Si, confio en los autores".
|
||||||
|
|
||||||
`std.debug.print("Me gusta Zig", .{});`
|
|
||||||
|
|
||||||
Podemos tener varias invocaciones a la vez, y ejecutarlas en
|
Ahora veras que en vez del boton "Abrir carpeta" ahora hay una
|
||||||
siempre que la invocación esté bien escrita.
|
serie de archivos.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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.
|
||||||
|
|
||||||
|
- 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`:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Este es el archivo donde trabajemos por el resto de la serie.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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`.
|
Ahora que instalamos Zig en nuestro computador, tenemos que ejecutar
|
||||||
|
el programa en nuestro computador. Eso lo haremos desde el terminal.
|
||||||
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:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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"
|
|
||||||
|
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,174 +1,148 @@
|
||||||
---
|
---
|
||||||
layout: ../../../layouts/BlogLayoutEs.astro
|
layout: ../../../layouts/BlogLayoutEs.astro
|
||||||
title: "05: Cero a Zig: Instalando VSCode y Zig"
|
title: "Cero a Zig 05: Hola mundo"
|
||||||
description: |
|
description: |
|
||||||
Instalamos Zig y VSCode en nuestro computador
|
Escribimos nuestro primer programa: Hola mundo!
|
||||||
pubDate: "2024-08-08"
|
pubDate: "2024-07-19"
|
||||||
tags: ["tech", "lenguajes", "intro", "tutorial", "zig", "VSCode"]
|
tags: ["tech", "lenguajes", "intro", "tutorial", "zig"]
|
||||||
image:
|
image:
|
||||||
url: ""
|
url: ""
|
||||||
alt: ""
|
alt: ""
|
||||||
caption: ""
|
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
|
En este artículo vamos a escribir nuestro primer programa: Hola mundo. Vamos a
|
||||||
una página web. Sin embargo, lo mejor es escribir el código
|
modificarlo y entender algunos otros conceptos.
|
||||||
(programar) y ejecutarlo en nuestro computador.
|
|
||||||
|
|
||||||
Ya que este es un tutorial básico de programación, asumo que
|
## Hola mundo
|
||||||
estas utilizando Windows. Yo usaré Windows 10, pero las instrucciones
|
|
||||||
funcionan igual en Windows 11.
|
|
||||||
|
|
||||||
|
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
|
Abre VSCode y abre el proyecto que creaste en el artículo anterior.
|
||||||
|
|
||||||
Si sabes como instalar un programa y no necesitas instrucciones
|
Allí, abre el archivo `src/main.zig`.
|
||||||
paso a paso, saltate esta sección.
|
|
||||||
|
|
||||||
Primero busca `VSCode` en Google, y entra a la primera página que
|
|
||||||
sale.
|
|
||||||
|
|
||||||
|
A partir de ahora vamos a trabajar en ese único archivo.
|
||||||
|
|
||||||
Una vez en la página descarga VSCode con el boton grande y azul.
|
Verás un montón de código raro:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Se abrirá una nueva ventana en la esquina superior derecha.
|
Vamos a eliminar todo y escribir desde cero.
|
||||||
Cuando termine de descargarse, ábrelo haciendole click.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Hola mundo
|
||||||
|
|
||||||
Se abrirá una nueva ventana. Primero selecciona
|
El primer programa siempre es el más fácil. Vas a escribirlo
|
||||||
"Acepto el acuerdo" y despues presiona el boton "Siguiente".
|
(o copiar y pegar) y ejecutarlo.
|
||||||
|
|
||||||
|
Borra todo el contenido del archivo `src/main.zig` y
|
||||||
|
coloca lo siguiente:
|
||||||
|
|
||||||
Volveran a salir nuevas ventanas. Presiona "Siguiente" en todas.
|
```zig
|
||||||
|
const std = @import("std");
|
||||||
|
|
||||||
|
pub fn main() !void {
|
||||||
|
std.debug.print("Hola mundo!\n", .{});
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
Cuando salga "Instalar" en vez de "Siguiente", presionalo.
|
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 escribas el código.
|
||||||
|
No te preocupes, no es un problema.
|
||||||
|
|
||||||
Finalmente, saldrá una última ventana. Presiona "Finalizar"
|
Una vez que hayas modificado el código, verás un punto blanco arriba:
|
||||||
y se abrirá VSCode.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
También puedes abrir VSCode desde el menú de inicio de
|
Esto significa que el archivo está modificado, pero no guardado.
|
||||||
Windows.
|
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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Introducción a VSCode
|
El resultado sale abajo: `Hola mundo!`.
|
||||||
|
|
||||||
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í:
|
¡Ejecutaste tu primer programa!
|
||||||
|
|
||||||
|
## ¿Qué significan todas estas letras?
|
||||||
|
|
||||||
Hay un monton de botones y divisiones. No te preocupes en
|
Como verás, hay un monton de palabras y símbolos con colorcitos.
|
||||||
entenderlo todo ahora mismo.
|
Este es el código, es como un lenguaje especial utilizado
|
||||||
|
para comunicarse con el computador.
|
||||||
|
|
||||||
Notarás que el programa está en inglés. Ahora te mostraré
|
Así como el francés, árabe o coreano, el **lenguaje** de programación Zig
|
||||||
cómo ponerlo en español.
|
tiene un conjunto de reglas. Aprenderemos las reglas a medida que avance
|
||||||
|
el tiempo. Mientras tanto, puedes ignorar todas esas palabras.
|
||||||
|
|
||||||
### Cambiar idioma a español
|
|
||||||
|
|
||||||
A la izquierda arriba hay una serie de botones. Presiona el último,
|
## Magia negra
|
||||||
que tiene unos cuadros.
|
|
||||||
|
|
||||||
|
Escuché este termino del canal de Youtube Imesi.net. Magia negra
|
||||||
|
es algo que: no se cómo funciona, ni tampoco me importa.
|
||||||
|
Solo me importa lo que hace.
|
||||||
|
|
||||||
Esto abre una pestaña donde podemos buscar "Extensiones".
|
Voy a utilizar el término "magia negra" para referirme a algo
|
||||||
Las extensiones agregan características a VSCode.
|
por lo que no necesitas preocuparte, o intentar entender. Por
|
||||||
|
ejemplo, en el codigo que escribiste y ejecutaste,
|
||||||
|
todo lo de rojo es magia negra:
|
||||||
|
|
||||||
Primero vamos a instalar el idioma español. En la barra de búsqueda
|
|
||||||
escribe "español":
|
|
||||||
|
|
||||||
|
```zig
|
||||||
|
const std = @import("std"); // [!code error:3]
|
||||||
|
|
||||||
Y presiona el botón azul "Install" del primer item de la lista
|
pub fn main() !void {
|
||||||
que dice "Spanish":
|
std.debug.print("Hola mundo!\n", .{});
|
||||||
|
} // [!code error]
|
||||||
|
```
|
||||||
|
|
||||||
|
Todo lo de rojo tiene un significado, pero aun no necesitamos
|
||||||
|
saber cuál es. Pero es importante que este ahí, tal como está
|
||||||
|
escrito.
|
||||||
|
|
||||||
Luego de eso, abajo a la derecha saldrá un mensaje.
|
Lo que nosotros vamos a escribir es lo de "adentro":
|
||||||
Presiona el botón azul:
|
|
||||||
|
|
||||||
|
```zig
|
||||||
|
const std = @import("std");
|
||||||
|
|
||||||
El programa se reiniciará, y ahora estará en español.
|
pub fn main() !void {
|
||||||
|
std.debug.print("Hola mundo!\n", .{}); // [!code focus] // [!code highlight]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
Ahora vamos a instalar la extensión de Zig.
|
Y a medida que aprendamos conceptos nuevos, descifraremos
|
||||||
|
qué significan todas esas cosas.
|
||||||
|
|
||||||
|
|
||||||
### Instalar la extensión de Zig
|
|
||||||
|
|
||||||
Regresa a la pestaña de extensiones:
|
## 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.
|
||||||
|
|
||||||
Y busca "Zig". Instala la extensión que se llama
|
En mi opinion, programar sin saber inglés es contraproducente.
|
||||||
"Zig Language" y dice "ziglang":
|
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.
|
||||||
|
|
||||||
Cuando se haya instalado puedes cerrar la pestaña:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Y volver al inicio:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 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:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
En la barra de busqueda escribe `Zig`, y presiona el botón
|
|
||||||
`Zig Setup: Install Zig`:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
En el dialogo que sale, presiona "Install".
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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`.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Saldrá una nueva ventana, presiona "Install".
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Y selecciona la misma versión de antes. En mi caso, `0.13.0`.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Con eso terminamos. Hemos instalado Zig en nuestro computador.
|
|
||||||
En el siguiente artículo utilizaremos estas herramientas.
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,209 +1,171 @@
|
||||||
---
|
---
|
||||||
layout: ../../../layouts/BlogLayoutEs.astro
|
layout: ../../../layouts/BlogLayoutEs.astro
|
||||||
title: "06: Cero a Zig: Terminal y Proyecto Zig"
|
title: "Cero a Zig 06: Modificando el hola mundo"
|
||||||
description: |
|
description: |
|
||||||
Veremos el terminal y cómo crear/ejecutar un proyecto de Zig
|
Impresión, strings/cadenas y stdout.
|
||||||
pubDate: "2024-08-09"
|
pubDate: "2024-07-30"
|
||||||
tags: ["tech", "lenguajes", "intro", "tutorial", "zig", "VSCode"]
|
tags: ["tech", "lenguajes", "intro", "tutorial", "zig"]
|
||||||
image:
|
image:
|
||||||
url: "/vid/hacker.webp"
|
url: ""
|
||||||
alt: ""
|
alt: ""
|
||||||
caption: ""
|
caption: ""
|
||||||
---
|
---
|
||||||
|
|
||||||
Seguramente has visto imágenes/videos de hackers antes,
|
En el artículo anterior escribimos nuestro primer programa:
|
||||||
escribiendo en una pantalla negra con letras verdes.
|
Hola mundo. En este artículos vamos a modificar el mensaje
|
||||||
Ahora tu también, podras escribir en una pantalla negra
|
y aprender el primer concepto: Strings
|
||||||
(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
|
## Modificando "Hola mundo"
|
||||||
de ahora me referiré a ellos.
|
|
||||||
|
|
||||||
|
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.
|
|
||||||
|
|
||||||
En el terminal escribimos comandos, el computador los ejecuta,
|
Hay varias cosas que notar:
|
||||||
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
|
- Estan pintadas de color amarillo
|
||||||
los 3 puntos, `Terminal`, `Nuevo Terminal`:
|
- Tienen comillas dobles `"` al inicio y al final
|
||||||
|
|
||||||
|
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!`
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Este es nuestro terminal. Aquí escribiremos algunos comandos
|
|
||||||
para crear un "proyecto" y "ejecutarlo".
|
|
||||||
|
|
||||||
|
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.
|
|
||||||
|
|
||||||
Haz click en en el terminal y escribe `mkdir tutorial`
|
|
||||||
|
|
||||||
|
## Strings / cadenas de caracteres
|
||||||
|
|
||||||
`mkdir` es el "comando" que ejecutará la computadora,
|
Los strings (cadenas de caracteres en inglés) son la forma
|
||||||
y `tutorial` es un "argumento" que recibe el comando.
|
en la que almacenamos texto.
|
||||||
|
|
||||||
`mkdir` viene del inglés "make directory", y crea una
|
Un string empieza con una comilla doble `"`, el contenido
|
||||||
carpeta nueva. En este caso estamos creando una carpeta
|
del string, y termina con una comilla doble `"`.
|
||||||
llamada `tutorial`.
|
|
||||||
|
|
||||||
Presiona enter para ejecutar el comando.
|
Unos ejemplos de strings son: `"hola"`, `"adios"`,
|
||||||
|
`"multiples palabras"`, `"123456"`.
|
||||||
|
|
||||||
|
En el programa de arriba hay 2 strings:
|
||||||
|
|
||||||
En el terminal veremos siempre:
|
|
||||||
|
|
||||||
1. (1) La carpeta en donde estamos
|
Estos strings son lo que se muestra en pantalla al
|
||||||
2. (2) El comando que escribimos
|
ejecutar el programa.
|
||||||
|
|
||||||
Algunos comandos tienen una "respuesta". En la imágen
|
Los strings tienen algunas características:
|
||||||
de arriba la respuesta es una confirmación de la carpeta
|
|
||||||
que creamos.
|
|
||||||
|
|
||||||
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:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
`cd` es una abreviación de "change directory", que
|
Aquí el string termina despues del `Hola `, la palabra
|
||||||
significa cambiar de carpeta. Usando este comando cambiamos
|
`familia` no es parte del string. Puedes ver que el
|
||||||
la carpeta en la que estamos.
|
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
|
- No puede haber nuevas lineas en un string. Esto es un error:
|
||||||
`zig init`:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
El comando `zig` nos permite realizar varias acciones,
|
Sin embargo, hay ocasiones donde queremos tener varias lineas
|
||||||
que veremos con el tiempo.
|
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.
|
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
|
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:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Aquí seleccionamos la carpeta `tutorial`. Esta es la carpeta que
|
`std.debug.print` es una invocación que imprime lo que tenga
|
||||||
acabamos de crear en el terminal.
|
dentro. Para poner algo dentro, se utilizan parentesis `()`.
|
||||||
|
|
||||||
|
Dentro de los paréntesis va el string que queremos imprimir
|
||||||
|
y una secuencia misteriosa, así: `("Tu mensaje", .{})`.
|
||||||
|
|
||||||
Nos saldrá el mensaje de la imagen de abajo. Selecciona "Confiar en
|
Y finalmente, muy importante, todas las invocaciones
|
||||||
los autores..." y presiona "Si, confio en los autores".
|
terminan con un punto y coma `;`. Si la invocación
|
||||||
|
no termina con su punto y coma tendrás un error misterioso.
|
||||||
|
|
||||||
|
Por ejemplo, para imprimir un nuevo texto `Me gusta Zig`
|
||||||
|
se escribiriá el código así:
|
||||||
|
|
||||||
Ahora veras que en vez del boton "Abrir carpeta" ahora hay una
|
`std.debug.print("Me gusta Zig", .{});`
|
||||||
serie de archivos.
|
|
||||||
|
|
||||||
|
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.
|
|
||||||
|
|
||||||
- Carpeta `src`: Contiene el código que ejecutaremos
|
Y al ejecutar el programa se imprimiran los mensajes en orden.
|
||||||
- `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`:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Este es el archivo donde trabajemos por el resto de la serie.
|
## Nuevas lineas
|
||||||
|
|
||||||
|
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é
|
Este es un buen momento para presentar un concepto muy importante:
|
||||||
significa. Por ahora lo vamos a dejar así.
|
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.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Ve al terminal y ejecuta `zig build run`. Veras un monton de texto
|
|
||||||
raro, pero al final debería quedar así:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Glosario
|
||||||
|
|
||||||
Y también notarás que aparecieron 2 carpetas nuevas: `.zig-cache`
|
No es necesario que memorices o entiendas estas palabras.
|
||||||
y `zig-out`. Ignóralas.
|
|
||||||
|
|
||||||
Has ejecutado el proyecto! Ahora vamos a hacerlo con nuestro propio código.
|
- String: "cadena de caracteres"
|
||||||
|
- `const`: abreviatura de "constante", que no cambia
|
||||||
|
- `std`: abreviatura de "estandar"
|
||||||
## Reemplazando el código
|
- `import`: "importar"
|
||||||
|
- `pub`: abreviatura de "público", que es accesible
|
||||||
En artículos anteriores vimos un programa llamado "Hola mundo":
|
- `fn`: abreviatura de "función". en este artículo les llamé
|
||||||
|
invocaciones
|
||||||
```zig
|
- `void`: "vacio"
|
||||||
const std = @import("std");
|
- `main`: "principal"
|
||||||
|
- `debug`: el debugging es un proceso mediante el cual
|
||||||
pub fn main() !void {
|
se eliminan errores (tambien conocidos como "bugs")
|
||||||
std.debug.print("Hola mundo!", .{});
|
- `print`: "imprimir"
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
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:
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
layout: ../../../layouts/BlogLayoutEs.astro
|
layout: ../../../layouts/BlogLayoutEs.astro
|
||||||
title: "07: Cero a Zig - Impresión con formatos"
|
title: "Cero a Zig 07: Impresión con formatos"
|
||||||
description: |
|
description: |
|
||||||
Imprimiendo información adicional.
|
Imprimiendo información adicional.
|
||||||
pubDate: "2024-08-10"
|
pubDate: "2024-08-10"
|
||||||
|
|
@ -20,8 +20,8 @@ formatos.
|
||||||
El código para imprimir texto tiene dos partes:
|
El código para imprimir texto tiene dos partes:
|
||||||
|
|
||||||
```zig
|
```zig
|
||||||
// --- 1 --- -2-
|
// --- 1 --- -2-
|
||||||
std.debug.print("formato", .{});
|
std.debug.print("formato", .{});
|
||||||
```
|
```
|
||||||
|
|
||||||
- 1: un formato (string)
|
- 1: un formato (string)
|
||||||
|
|
@ -69,7 +69,7 @@ saber que se pueden utilizar.
|
||||||
const std = @import("zig");
|
const std = @import("zig");
|
||||||
|
|
||||||
pub fn main() !void {
|
pub fn main() !void {
|
||||||
const nombre = "Juan";
|
const nombre = "Juan"; // [!code focus:4]
|
||||||
const apellido = "Perez";
|
const apellido = "Perez";
|
||||||
std.debug.print("{s} {s}", .{nombre, apellido});
|
std.debug.print("{s} {s}", .{nombre, apellido});
|
||||||
// Imprime: `Juan Perez`
|
// Imprime: `Juan Perez`
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
layout: ../../../layouts/BlogLayoutEs.astro
|
layout: ../../../layouts/BlogLayoutEs.astro
|
||||||
title: "08: Cero a Zig - Variables"
|
title: "Cero a Zig 08: Variables"
|
||||||
description: |
|
description: |
|
||||||
Introducción a las variables
|
Introducción a las variables
|
||||||
pubDate: "2024-08-11"
|
pubDate: "2024-08-11"
|
||||||
|
|
@ -29,7 +29,7 @@ Digamos que la persona se llama `Juan`. El código es así:
|
||||||
const std = @import("std");
|
const std = @import("std");
|
||||||
|
|
||||||
pub fn main() !void {
|
pub fn main() !void {
|
||||||
std.debug.print("Hola {s}\n", .{"Juan"});
|
std.debug.print("Hola {s}\n", .{"Juan"}); // [!code focus:3]
|
||||||
std.debug.print("Tu pedido cuesta {s} dolares\n", .{"20"});
|
std.debug.print("Tu pedido cuesta {s} dolares\n", .{"20"});
|
||||||
std.debug.print("Adios {s}\n", .{"Juan"});
|
std.debug.print("Adios {s}\n", .{"Juan"});
|
||||||
}
|
}
|
||||||
|
|
@ -47,7 +47,7 @@ Entonces tendríamos que repetirlo 10 veces.
|
||||||
const std = @import("std");
|
const std = @import("std");
|
||||||
|
|
||||||
pub fn main() !void {
|
pub fn main() !void {
|
||||||
std.debug.print("Hola {s}\n", .{"Juan"});
|
std.debug.print("Hola {s}\n", .{"Juan"}); // [!code focus:10]
|
||||||
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"});
|
||||||
|
|
@ -86,10 +86,10 @@ y a partir de ese momento cada vez que usemos
|
||||||
Por ejemplo:
|
Por ejemplo:
|
||||||
|
|
||||||
```zig
|
```zig
|
||||||
const std = @import("std");
|
const std = @import("std"); // [!code word:nombre]
|
||||||
|
|
||||||
pub fn main() !void {
|
pub fn main() !void {
|
||||||
const nombre = "Juan";
|
const nombre = "Juan"; // [!code focus:2] // [!code highlight]
|
||||||
std.debug.print("Hola {s}\n", .{nombre});
|
std.debug.print("Hola {s}\n", .{nombre});
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
@ -108,10 +108,10 @@ Podemos utilizar la variable las veces que queramos.
|
||||||
Si imprimimos 10 veces se vería así:
|
Si imprimimos 10 veces se vería así:
|
||||||
|
|
||||||
```zig
|
```zig
|
||||||
const std = @import("std");
|
const std = @import("std"); // [!code word:nombre]
|
||||||
|
|
||||||
pub fn main() !void {
|
pub fn main() !void {
|
||||||
const nombre = "Juan";
|
const nombre = "Juan"; // [!code focus:11]
|
||||||
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});
|
||||||
|
|
@ -133,10 +133,10 @@ Ahora, si queremos cambiar `Juan` por `Maria`,
|
||||||
solo tenemos que hacerlo en un lugar:
|
solo tenemos que hacerlo en un lugar:
|
||||||
|
|
||||||
```zig
|
```zig
|
||||||
const std = @import("std");
|
const std = @import("std"); // [!code word:nombre]
|
||||||
|
|
||||||
pub fn main() !void {
|
pub fn main() !void {
|
||||||
const nombre = "Maria";
|
const nombre = "Maria"; // [!code focus:11]
|
||||||
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});
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
layout: ../../../layouts/BlogLayoutEs.astro
|
layout: ../../../layouts/BlogLayoutEs.astro
|
||||||
title: "09: Cero a Zig - Comentarios y Números"
|
title: "Cero a Zig 09: Comentarios y Números"
|
||||||
description: |
|
description: |
|
||||||
Comentarios, números y operaciones matemáticas
|
Comentarios, números y operaciones matemáticas
|
||||||
pubDate: "2024-08-17"
|
pubDate: "2024-08-17"
|
||||||
|
|
@ -31,9 +31,11 @@ y terminan cuando acaba la linea.
|
||||||
|
|
||||||
|
|
||||||
```zig
|
```zig
|
||||||
// Este es un comentario
|
const std = @import("std");
|
||||||
|
|
||||||
|
// Este es un comentario // [!code highlight]
|
||||||
pub fn main() !void {
|
pub fn main() !void {
|
||||||
// Este también es un comentario
|
// Este también es un comentario // [!code highlight]
|
||||||
std.debug.print("Hola", .{});
|
std.debug.print("Hola", .{});
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
@ -45,20 +47,23 @@ Si quieres un comentario que abarque varias lineas,
|
||||||
cada linea debe iniciar con doble slash:
|
cada linea debe iniciar con doble slash:
|
||||||
|
|
||||||
```zig
|
```zig
|
||||||
|
const std = @import("std");
|
||||||
|
|
||||||
pub fn main() !void {
|
pub fn main() !void {
|
||||||
// Este es un comentario
|
// Este es un comentario // [!code highlight:3] // [!code focus:4]
|
||||||
// que ocupa 3 lineas
|
// que ocupa 3 lineas
|
||||||
// de texto :D
|
// de texto :D
|
||||||
std.debug.print("Hola", .{});
|
std.debug.print("Hola", .{});
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
También puedes escribir un comentario en
|
También puedes escribir un comentario al final
|
||||||
medio de una linea con código, pero no
|
de una linea con código, pero no es recomendable.
|
||||||
es recomendable.
|
|
||||||
|
|
||||||
```zig
|
```zig
|
||||||
pub fn main() !void { // Este es un comentario
|
const std = @import("std");
|
||||||
|
|
||||||
|
pub fn main() !void { // Este es un comentario al final
|
||||||
std.debug.print("Hola", .{}); // Este también
|
std.debug.print("Hola", .{}); // Este también
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
@ -84,7 +89,7 @@ es el siguiente:
|
||||||
const std = @import("std");
|
const std = @import("std");
|
||||||
|
|
||||||
pub fn main() !void {
|
pub fn main() !void {
|
||||||
std.debug.print("{d}", .{322});
|
std.debug.print("{d}", .{322}); // [!code focus] // [!code highlight]
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -107,7 +112,7 @@ También podemos utilizar números en variables:
|
||||||
const std = @import("std");
|
const std = @import("std");
|
||||||
|
|
||||||
pub fn main() !void {
|
pub fn main() !void {
|
||||||
const edad = 32;
|
const edad = 32; // [!code focus:3] // [!code highlight]
|
||||||
// Imprime: `Tengo 32 años`
|
// Imprime: `Tengo 32 años`
|
||||||
std.debug.print("Tengo {d} años", .{edad});
|
std.debug.print("Tengo {d} años", .{edad});
|
||||||
}
|
}
|
||||||
|
|
@ -155,14 +160,14 @@ refiera a los números enteros.
|
||||||
Ahora que sabemos cómo crear números (int), podemos hacer
|
Ahora que sabemos cómo crear números (int), podemos hacer
|
||||||
operaciones con ellos.
|
operaciones con ellos.
|
||||||
|
|
||||||
Zig soporta las operaciones que conoces: suma `+`,
|
Zig ofrece las operaciones que conoces: suma `+`,
|
||||||
resta `-`, multiplicación `*` y división `/`.
|
resta `-`, multiplicación `*` y división `/`.
|
||||||
|
|
||||||
```zig
|
```zig
|
||||||
const std = @import("std");
|
const std = @import("std");
|
||||||
|
|
||||||
pub fn main() !void {
|
pub fn main() !void {
|
||||||
const r1 = 9 + 3; // 12
|
const r1 = 9 + 3; // 12 // [!code focus:7]
|
||||||
const r2 = 9 - 3; // 6
|
const r2 = 9 - 3; // 6
|
||||||
const r1 = 9 * 3; // 27
|
const r1 = 9 * 3; // 27
|
||||||
const r1 = 9 / 3; // 3
|
const r1 = 9 / 3; // 3
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue