Compare commits
3 Commits
8e8cb10d3b
...
7768e3c206
| Author | SHA1 | Date | |
|---|---|---|---|
| 7768e3c206 | |||
| e83d3ba276 | |||
| dc487a2788 |
@ -1,16 +1,33 @@
|
||||
import { defineConfig } from 'astro/config';
|
||||
import tailwind from "@astrojs/tailwind";
|
||||
import mdx from "@astrojs/mdx";
|
||||
import {
|
||||
transformerNotationDiff,
|
||||
transformerNotationFocus,
|
||||
transformerMetaHighlight,
|
||||
transformerNotationHighlight,
|
||||
transformerNotationErrorLevel,
|
||||
transformerNotationWordHighlight,
|
||||
} from '@shikijs/transformers'
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [tailwind(), mdx()],
|
||||
markdown: {
|
||||
shikiConfig: {
|
||||
themes: {
|
||||
light: "catppuccin-latte",
|
||||
dark: "github-dark"
|
||||
}
|
||||
integrations: [tailwind(), mdx()],
|
||||
markdown: {
|
||||
shikiConfig: {
|
||||
themes: {
|
||||
light: "catppuccin-latte",
|
||||
dark: "dark-plus"
|
||||
},
|
||||
transformers: [
|
||||
transformerNotationDiff(),
|
||||
transformerNotationFocus(),
|
||||
transformerMetaHighlight(),
|
||||
transformerNotationHighlight(),
|
||||
transformerNotationErrorLevel(),
|
||||
transformerNotationWordHighlight(),
|
||||
],
|
||||
defaultColor: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
}
|
||||
|
||||
pre.astro-code {
|
||||
padding: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
border: solid 1px var(--c-border-1);
|
||||
font-size: 0.8rem;
|
||||
@ -74,15 +74,13 @@ pre.astro-code>code .line::before {
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.astro-code {
|
||||
background-color: var(--shiki-dark-bg) !important;
|
||||
}
|
||||
|
||||
.astro-code,
|
||||
.astro-code span {
|
||||
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 {
|
||||
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-family: 'Iosevka Fixed Web';
|
||||
font-display: swap;
|
||||
font-weight: 700;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
src: url('/Iosevka/Bold.woff2') format('woff2');
|
||||
font-family: 'Iosevka Fixed Web';
|
||||
font-display: swap;
|
||||
font-weight: 700;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
src: url('/Iosevka/Bold.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Iosevka Etoile Web';
|
||||
font-display: swap;
|
||||
font-weight: 900;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
src: url('/IosevkaEtoile/Heavy.woff2') format('woff2');
|
||||
font-family: 'Iosevka Etoile Web';
|
||||
font-display: swap;
|
||||
font-weight: 900;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
src: url('/IosevkaEtoile/Heavy.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* 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: |
|
||||
Vista superior de cómo funciona un lenguaje de programación
|
||||
realmente.
|
||||
pubDate: "2024-07-25"
|
||||
pubDate: "2024-07-14"
|
||||
tags: ["tech", "lenguajes", "tutorial"]
|
||||
image:
|
||||
url: "/img/blog/es/lang/cover.png"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
layout: ../../../layouts/BlogLayoutEs.astro
|
||||
title: "01: Programación desde cero absoluto con Zig"
|
||||
title: "Cero a Zig 01: Programación desde cero absoluto con Zig"
|
||||
description: |
|
||||
Aprendé a programar desde completamente cero, utilizando el lenguaje
|
||||
de programación Zig.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
layout: ../../../layouts/BlogLayoutEs.astro
|
||||
title: "02: Programación desde cero absoluto con Zig: Fundamentos"
|
||||
title: "Cero a Zig 02: Fundamentos"
|
||||
description: |
|
||||
Fundamentos de la computación, programas, componentes
|
||||
pubDate: "2024-07-16"
|
||||
|
||||
@ -1,141 +1,174 @@
|
||||
---
|
||||
layout: ../../../layouts/BlogLayoutEs.astro
|
||||
title: "03: Programación desde cero: Hola mundo"
|
||||
title: "Cero a Zig 03: Instalando VSCode y Zig"
|
||||
description: |
|
||||
Escribí el tradicional programa "Hola mundo" por tí mismo!
|
||||
Instalamos Zig y VSCode en nuestro computador
|
||||
pubDate: "2024-07-17"
|
||||
tags: ["tech", "lenguajes", "intro", "tutorial", "zig"]
|
||||
tags: ["tech", "lenguajes", "intro", "tutorial", "zig", "VSCode"]
|
||||
image:
|
||||
url: ""
|
||||
alt: ""
|
||||
caption: ""
|
||||
---
|
||||
|
||||
|
||||
En este artículo vamos a escribir nuestro primer programa: Hola mundo. Vamos a
|
||||
modificarlo y entender algunos otros conceptos.
|
||||
|
||||
## Hola mundo
|
||||
|
||||
Hola mundo es tradicionalmente el [primer programa](https://es.wikipedia.org/wiki/Hola_mundo)
|
||||
que se escribe cuando se aprende a programar.
|
||||
|
||||
Vamos a empezar con este programa. Entra a la siguiente página web:
|
||||
[https://zig.fly.dev/p/xNluereqmgW](https://zig.fly.dev/p/xNluereqmgW)
|
||||
|
||||
Veras lo siguiente:
|
||||
|
||||
|
||||
|
||||
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.
|
||||
En este artículo vamos a instalar 2 cosas en nuestro computador:
|
||||
[Zig](https://ziglang.org/) y
|
||||
[Visual Studio Code](https://code.visualstudio.com/).
|
||||
Necesitamos estas 2 herramientas antes de poder empezar a programar.
|
||||
|
||||
|
||||
## ¿Qué significan todas estas letras?
|
||||
|
||||
Como verás, hay un monton de palabras y símbolos con colorcitos.
|
||||
Este es el código, es como un lenguaje especial utilizado
|
||||
para comunicarse con el computador.
|
||||
|
||||
Así como el francés, árabe o coreano, el **lenguaje** de programación Zig
|
||||
tiene un conjunto de reglas. Aprenderemos las reglas a medida que avance
|
||||
el tiempo. Mientras tanto, puedes ignorar todas esas palabras.
|
||||
|
||||
> ¿Que pasa si eliminas alguna de esas palabras y ejecutas el programa
|
||||
(con el boton "Run")? ¿Qué mensaje obtienes? ¿Qué crees que significa?
|
||||
Ya que este es un tutorial básico de programación, asumo que
|
||||
estas utilizando Windows. Yo usaré Windows 10, pero las instrucciones
|
||||
funcionan igual en Windows 11.
|
||||
|
||||
|
||||
## Magia negra y abstracción
|
||||
## Descargar e instalar VSCode
|
||||
|
||||
Según [Significados.com](https://www.significados.com/abstracto/),
|
||||
abstracto significa vago, impreciso, teórico, que no tiene existencia
|
||||
física (entre otras cosas). Algo abstracto suele ser algo difícil
|
||||
de entender, o imaginario.
|
||||
Si sabes como instalar un programa y no necesitas instrucciones
|
||||
paso a paso, saltate esta sección y [ve a la siguiente sección](#introducción-a-vscode).
|
||||
|
||||
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
|
||||
definición técnica en internet, pero me parece muy confusa para
|
||||
un principiante, así que lo explicare en mis términos.
|
||||
Se abrirá una nueva ventana. Primero selecciona
|
||||
"Acepto el acuerdo" y despues presiona el boton "Siguiente".
|
||||
|
||||
En programación, abstracto significa que sabemos **qué** hace, pero
|
||||
no **cómo** lo hace. Un ejemplo claro sería un auto. Sabemos que
|
||||
al pisar el acelerador, el auto avanza. Pero no sabemos **cómo**
|
||||
pisar el acelerador ocasiona que el combustible se transforme en
|
||||
energía cinemática.
|
||||
|
||||
|
||||
Por ejemplo, voy a hablar más adelante de "imprimir" en el programa.
|
||||
Imprimir significa mostrar un mensaje en la pantalla. Sin embargo,
|
||||
no te voy a explicar cómo funciona la impresión. El concepto de
|
||||
"imprimir" es abstracto.
|
||||
Volveran a salir nuevas ventanas. Presiona "Siguiente" en todas.
|
||||
|
||||
### Magia negra
|
||||
|
||||
|
||||
Escuché este termino del canal de Youtube Imesi.net. Magia negra
|
||||
es algo que: no se qué hace, cómo funciona, ni tampoco me importa.
|
||||
Cuando salga "Instalar" en vez de "Siguiente", presionalo.
|
||||
|
||||
Voy a utilizar el término "magia negra" para referirme a algo
|
||||
por lo que no necesitas preocuparte, o intentar entender. Por
|
||||
ejemplo, en el código de más arriba:
|
||||
|
||||
|
||||
|
||||
Finalmente, saldrá una última ventana. Presiona "Finalizar"
|
||||
y se abrirá VSCode.
|
||||
|
||||
Todo el texto que dice:
|
||||
|
||||
|
||||
```zig
|
||||
const std = @import("std")
|
||||
También puedes abrir VSCode desde el menú de inicio de
|
||||
Windows.
|
||||
|
||||
pub fn main() {
|
||||
std.debug.print();
|
||||
}
|
||||
```
|
||||
|
||||
es magia negra. Funciona, hace algo, pero no importa. No te
|
||||
preocupes en intentar entenderlo.
|
||||
|
||||
Eventualmente, y a medida que aprendas conceptos nuevos,
|
||||
entenderas qué significan esas cosas.
|
||||
|
||||
|
||||
## Inglés
|
||||
|
||||
Como habras visto, prácticamente todo el código está en inglés.
|
||||
Si ya sabes ingles, o lo estas aprendiendo, no tendrás muchos
|
||||
problemas continuando.
|
||||
|
||||
En mi opinion, programar sin saber inglés es contraproducente.
|
||||
Los lenguajes de programación (en su mayoría) se escriben en
|
||||
inglés, las mnemotécnicas están en inglés, y mucha información
|
||||
útil e importante está en inglés. Programar sin saber inglés
|
||||
es sumamente difícil.
|
||||
|
||||
Seguramente aprenderás algunas palabras a lo largo del tutorial,
|
||||
pero lo mejor que podrías hacer es aprender inglés.
|
||||
|
||||
|
||||
|
||||
|
||||
## 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
|
||||
title: "04: Programación desde cero: Modificando el hola mundo"
|
||||
title: "Cero a Zig 04: Terminal y Proyecto Zig"
|
||||
description: |
|
||||
Impresión, strings/cadenas y stdout.
|
||||
pubDate: "2024-07-30"
|
||||
tags: ["tech", "lenguajes", "intro", "tutorial", "zig"]
|
||||
Veremos el terminal y cómo crear/ejecutar un proyecto de Zig
|
||||
pubDate: "2024-07-18"
|
||||
tags: ["tech", "lenguajes", "intro", "tutorial", "zig", "VSCode"]
|
||||
image:
|
||||
url: ""
|
||||
url: "/vid/hacker.webp"
|
||||
alt: ""
|
||||
caption: ""
|
||||
---
|
||||
|
||||
En el artículo anterior escribimos nuestro primer programa:
|
||||
Hola mundo. En este artículos vamos a modificar el mensaje
|
||||
y aprender el primer concepto: Strings
|
||||
Seguramente has visto imágenes/videos de hackers antes,
|
||||
escribiendo en una pantalla negra con letras verdes.
|
||||
Ahora tu también, podras escribir en una pantalla negra
|
||||
(pero sin letras verdes).
|
||||
|
||||
En este artículo veremos el terminal, crearemos un proyecto
|
||||
de Zig en nuestro computador, y lo ejecutaremos.
|
||||
|
||||
En el artículo anterior ya instalamos VSCode y Zig, así que a partir
|
||||
de ahora me referiré a ellos.
|
||||
|
||||
|
||||
## Modificando "Hola mundo"
|
||||
## El terminal
|
||||
|
||||
Entra a la página web
|
||||
[https://zig.fly.dev/p/xNluereqmgW](https://zig.fly.dev/p/xNluereqmgW),
|
||||
donde se encuentra el programa "Hola mundo". Esta vez vamos a modificar
|
||||
el mensaje.
|
||||
[El/la terminal](https://en.wikipedia.org/wiki/Command-line_interface)
|
||||
es una forma de interactuar con nuestro computador, y se utiliza
|
||||
muchisimo en programación.
|
||||
|
||||
El resto de las palabras son magia negra. Te habras dado cuenta que
|
||||
hay palabras en español: Hola y mundo.
|
||||
En el terminal escribimos comandos, el computador los ejecuta,
|
||||
y nos responde. En cierto modo es como una versión mini de la
|
||||
programación.
|
||||
|
||||
|
||||
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
|
||||
- Tienen comillas dobles `"` al inicio y al final
|
||||
Aparecerá una nueva ventana en blanco abajo:
|
||||
|
||||
Dentro de estas comillas `"` podemos escribir el texto que querramos.
|
||||
|
||||
|
||||
Por ejemplo, si reemplazas `Hola` por `Adios` y ejecutas el programa,
|
||||
se imprimirá `Adios mundo!`
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Y también, si reemplazas `mundo` por otra palabra, se imprimirá
|
||||
lo que escribiste.
|
||||
|
||||
Tambien puedes agregar otro texto en ambos lados. Por ejemplo:
|
||||
|
||||
|
||||
Este es nuestro terminal. Aquí escribiremos algunos comandos
|
||||
para crear un "proyecto" y "ejecutarlo".
|
||||
|
||||
|
||||
## Strings / cadenas de caracteres
|
||||
## Creando un proyecto de Zig
|
||||
|
||||
Los strings (cadenas de caracteres en inglés) son la forma
|
||||
en la que almacenamos texto.
|
||||
Un proyecto es una carpeta con una serie de archivos,
|
||||
en los cuales programaremos nuestro programa.
|
||||
|
||||
Un string empieza con una comilla doble `"`, el contenido
|
||||
del string, y termina con una comilla doble `"`.
|
||||
Haz click en en el terminal y escribe `mkdir tutorial`
|
||||
|
||||
Unos ejemplos de strings son: `"hola"`, `"adios"`,
|
||||
`"multiples palabras"`, `"123456"`.
|
||||
|
||||
|
||||
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
|
||||
ejecutar el programa.
|
||||
Presiona enter para ejecutar el comando.
|
||||
|
||||
Los strings tienen algunas características:
|
||||
|
||||
|
||||
- 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.
|
||||
En el terminal veremos siempre:
|
||||
|
||||
El string termina cuando aparece la primera comilla.
|
||||
Por ejemplo:
|
||||
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.
|
||||
|
||||
Aquí el string termina despues del `Hola `, la palabra
|
||||
`familia` no es parte del string. Puedes ver que el
|
||||
color amarillo del string termina en la segunda comilla,
|
||||
y la palabra familia está de color blanco.
|
||||
Ahora vamos a ejecutar otro comando: `cd tutorial`
|
||||
|
||||
- No puede haber nuevas lineas en un string. Esto es un error:
|
||||
|
||||
|
||||
|
||||
`cd` es una abreviación de "change directory", que
|
||||
significa cambiar de carpeta. Usando este comando cambiamos
|
||||
la carpeta en la que estamos.
|
||||
|
||||
Sin embargo, hay ocasiones donde queremos tener varias lineas
|
||||
en un string. Para esto se utilizan 2 caracteres especiales:
|
||||
`\n`. Estos nos permiten "señalar" que ahí va una linea nueva.
|
||||
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
|
||||
información puede ser palabras, letras, números, símbolos, etc.
|
||||
Dentro de VSCode, presionamos el boton "Abrir carpeta".
|
||||
|
||||
Para imprimir en Zig se escribe lo siguiente:
|
||||
|
||||
|
||||
|
||||
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
|
||||
y una secuencia misteriosa, así: `("Tu mensaje", .{})`.
|
||||
Aquí seleccionamos la carpeta `tutorial`. Esta es la carpeta que
|
||||
acabamos de crear en el terminal.
|
||||
|
||||
Y finalmente, muy importante, todas las invocaciones
|
||||
terminan con un punto y coma `;`. Si la invocación
|
||||
no termina con su punto y coma tendrás un error misterioso.
|
||||
|
||||
|
||||
Por ejemplo, para imprimir un nuevo texto `Me gusta Zig`
|
||||
se escribiriá el código así:
|
||||
Nos saldrá el mensaje de la imagen de abajo. Selecciona "Confiar en
|
||||
los autores..." y presiona "Si, confio en los autores".
|
||||
|
||||
`std.debug.print("Me gusta Zig", .{});`
|
||||
|
||||
|
||||
Podemos tener varias invocaciones a la vez, y ejecutarlas en
|
||||
siempre que la invocación esté bien escrita.
|
||||
Ahora veras que en vez del boton "Abrir carpeta" ahora hay una
|
||||
serie de archivos.
|
||||
|
||||
|
||||
|
||||
|
||||
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`.
|
||||
|
||||
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:
|
||||
|
||||
|
||||
|
||||
|
||||
Ahora que instalamos Zig en nuestro computador, tenemos que ejecutar
|
||||
el programa en nuestro computador. Eso lo haremos desde el terminal.
|
||||
|
||||
|
||||
Ve al terminal y ejecuta `zig build run`. Veras un monton de texto
|
||||
raro, pero al final debería quedar así:
|
||||
|
||||
## Glosario
|
||||
|
||||
No es necesario que memorices o entiendas estas palabras.
|
||||
|
||||
- String: "cadena de caracteres"
|
||||
- `const`: abreviatura de "constante", que no cambia
|
||||
- `std`: abreviatura de "estandar"
|
||||
- `import`: "importar"
|
||||
- `pub`: abreviatura de "público", que es accesible
|
||||
- `fn`: abreviatura de "función". en este artículo les llamé
|
||||
invocaciones
|
||||
- `void`: "vacio"
|
||||
- `main`: "principal"
|
||||
- `debug`: el debugging es un proceso mediante el cual
|
||||
se eliminan errores (tambien conocidos como "bugs")
|
||||
- `print`: "imprimir"
|
||||
|
||||
|
||||
|
||||
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
|
||||
title: "05: Cero a Zig: Instalando VSCode y Zig"
|
||||
title: "Cero a Zig 05: Hola mundo"
|
||||
description: |
|
||||
Instalamos Zig y VSCode en nuestro computador
|
||||
pubDate: "2024-08-08"
|
||||
tags: ["tech", "lenguajes", "intro", "tutorial", "zig", "VSCode"]
|
||||
Escribimos nuestro primer programa: Hola mundo!
|
||||
pubDate: "2024-07-19"
|
||||
tags: ["tech", "lenguajes", "intro", "tutorial", "zig"]
|
||||
image:
|
||||
url: ""
|
||||
alt: ""
|
||||
caption: ""
|
||||
---
|
||||
|
||||
En este artículo vamos a instalar 2 cosas en nuestro computador:
|
||||
[Zig](https://ziglang.org/) y
|
||||
[Visual Studio Code](https://code.visualstudio.com/).
|
||||
|
||||
En los artículos anteriores habíamos escrito nuestro código en
|
||||
una página web. Sin embargo, lo mejor es escribir el código
|
||||
(programar) y ejecutarlo en nuestro computador.
|
||||
En este artículo vamos a escribir nuestro primer programa: Hola mundo. Vamos a
|
||||
modificarlo y entender algunos otros conceptos.
|
||||
|
||||
Ya que este es un tutorial básico de programación, asumo que
|
||||
estas utilizando Windows. Yo usaré Windows 10, pero las instrucciones
|
||||
funcionan igual en Windows 11.
|
||||
## Hola mundo
|
||||
|
||||
Hola mundo es tradicionalmente el [primer programa](https://es.wikipedia.org/wiki/Hola_mundo)
|
||||
que se escribe cuando se aprende a programar.
|
||||
|
||||
## Descargar e instalar VSCode
|
||||
Abre VSCode y abre el proyecto que creaste en el artículo anterior.
|
||||
|
||||
Si sabes como instalar un programa y no necesitas instrucciones
|
||||
paso a paso, saltate esta sección.
|
||||
Allí, abre el archivo `src/main.zig`.
|
||||
|
||||
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.
|
||||
Cuando termine de descargarse, ábrelo haciendole click.
|
||||
Vamos a eliminar todo y escribir desde cero.
|
||||
|
||||
|
||||
|
||||
## Hola mundo
|
||||
|
||||
Se abrirá una nueva ventana. Primero selecciona
|
||||
"Acepto el acuerdo" y despues presiona el boton "Siguiente".
|
||||
El primer programa siempre es el más fácil. Vas a escribirlo
|
||||
(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"
|
||||
y se abrirá VSCode.
|
||||
Una vez que hayas modificado el código, verás un punto blanco arriba:
|
||||
|
||||
|
||||
|
||||
|
||||
También puedes abrir VSCode desde el menú de inicio de
|
||||
Windows.
|
||||
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.
|
||||
|
||||
|
||||
|
||||
## 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
|
||||
entenderlo todo ahora mismo.
|
||||
Como verás, hay un monton de palabras y símbolos con colorcitos.
|
||||
Este es el código, es como un lenguaje especial utilizado
|
||||
para comunicarse con el computador.
|
||||
|
||||
Notarás que el programa está en inglés. Ahora te mostraré
|
||||
cómo ponerlo en español.
|
||||
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.
|
||||
|
||||
### Cambiar idioma a español
|
||||
|
||||
A la izquierda arriba hay una serie de botones. Presiona el último,
|
||||
que tiene unos cuadros.
|
||||
## Magia negra
|
||||
|
||||
|
||||
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".
|
||||
Las extensiones agregan características a VSCode.
|
||||
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 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
|
||||
que dice "Spanish":
|
||||
pub fn main() !void {
|
||||
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.
|
||||
Presiona el botón azul:
|
||||
Lo que nosotros vamos a escribir es lo de "adentro":
|
||||
|
||||
|
||||
```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
|
||||
"Zig Language" y dice "ziglang":
|
||||
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.
|
||||
|
||||
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
|
||||
title: "06: Cero a Zig: Terminal y Proyecto Zig"
|
||||
title: "Cero a Zig 06: Modificando el hola mundo"
|
||||
description: |
|
||||
Veremos el terminal y cómo crear/ejecutar un proyecto de Zig
|
||||
pubDate: "2024-08-09"
|
||||
tags: ["tech", "lenguajes", "intro", "tutorial", "zig", "VSCode"]
|
||||
Impresión, strings/cadenas y stdout.
|
||||
pubDate: "2024-07-30"
|
||||
tags: ["tech", "lenguajes", "intro", "tutorial", "zig"]
|
||||
image:
|
||||
url: "/vid/hacker.webp"
|
||||
url: ""
|
||||
alt: ""
|
||||
caption: ""
|
||||
---
|
||||
|
||||
Seguramente has visto imágenes/videos de hackers antes,
|
||||
escribiendo en una pantalla negra con letras verdes.
|
||||
Ahora tu también, podras escribir en una pantalla negra
|
||||
(pero sin letras verdes).
|
||||
En el artículo anterior escribimos nuestro primer programa:
|
||||
Hola mundo. En este artículos vamos a modificar el mensaje
|
||||
y aprender el primer concepto: Strings
|
||||
|
||||
En este artículo veremos el terminal, crearemos un proyecto
|
||||
de Zig en nuestro computador, y lo ejecutaremos.
|
||||
|
||||
En el artículo anterior ya instalamos VSCode y Zig, así que a partir
|
||||
de ahora me referiré a ellos.
|
||||
## Modificando "Hola mundo"
|
||||
|
||||
Entra a la página web
|
||||
[https://zig.fly.dev/p/xNluereqmgW](https://zig.fly.dev/p/xNluereqmgW),
|
||||
donde se encuentra el programa "Hola mundo". Esta vez vamos a modificar
|
||||
el mensaje.
|
||||
|
||||
## El terminal
|
||||
El resto de las palabras son magia negra. Te habras dado cuenta que
|
||||
hay palabras en español: Hola y mundo.
|
||||
|
||||
[El/la terminal](https://en.wikipedia.org/wiki/Command-line_interface)
|
||||
es una forma de interactuar con nuestro computador, y se utiliza
|
||||
muchisimo en programación.
|
||||
|
||||
|
||||
En el terminal escribimos comandos, el computador los ejecuta,
|
||||
y nos responde. En cierto modo es como una versión mini de la
|
||||
programación.
|
||||
Hay varias cosas que notar:
|
||||
|
||||
Dentro de VSCode, en los menus de arriba a la izquierda, selecciona
|
||||
los 3 puntos, `Terminal`, `Nuevo Terminal`:
|
||||
- Estan pintadas de color amarillo
|
||||
- Tienen comillas dobles `"` al inicio y al final
|
||||
|
||||
|
||||
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,
|
||||
y `tutorial` es un "argumento" que recibe el comando.
|
||||
Los strings (cadenas de caracteres en inglés) son la forma
|
||||
en la que almacenamos texto.
|
||||
|
||||
`mkdir` viene del inglés "make directory", y crea una
|
||||
carpeta nueva. En este caso estamos creando una carpeta
|
||||
llamada `tutorial`.
|
||||
Un string empieza con una comilla doble `"`, el contenido
|
||||
del string, y termina con una comilla doble `"`.
|
||||
|
||||
Presiona enter para ejecutar el comando.
|
||||
Unos ejemplos de strings son: `"hola"`, `"adios"`,
|
||||
`"multiples palabras"`, `"123456"`.
|
||||
|
||||
|
||||
En el programa de arriba hay 2 strings:
|
||||
|
||||
En el terminal veremos siempre:
|
||||
|
||||
|
||||
1. (1) La carpeta en donde estamos
|
||||
2. (2) El comando que escribimos
|
||||
Estos strings son lo que se muestra en pantalla al
|
||||
ejecutar el programa.
|
||||
|
||||
Algunos comandos tienen una "respuesta". En la imágen
|
||||
de arriba la respuesta es una confirmación de la carpeta
|
||||
que creamos.
|
||||
Los strings tienen algunas características:
|
||||
|
||||
Ahora vamos a ejecutar otro comando: `cd tutorial`
|
||||
- En el código, los strings tienen otro color para que
|
||||
sea más fácil identificarlos.
|
||||
- No puede haber comillas dentro de un string.
|
||||
|
||||
|
||||
El string termina cuando aparece la primera comilla.
|
||||
Por ejemplo:
|
||||
|
||||
`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`:
|
||||
Aquí el string termina despues del `Hola `, la palabra
|
||||
`familia` no es parte del string. Puedes ver que el
|
||||
color amarillo del string termina en la segunda comilla,
|
||||
y la palabra familia está de color blanco.
|
||||
|
||||
|
||||
- No puede haber nuevas lineas en un string. Esto es un error:
|
||||
|
||||
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.
|
||||
Sin embargo, hay ocasiones donde queremos tener varias lineas
|
||||
en un string. Para esto se utilizan 2 caracteres especiales:
|
||||
`\n`. Estos nos permiten "señalar" que ahí va una linea nueva.
|
||||
|
||||
|
||||
|
||||
## Abriendo el proyecto
|
||||
Estos caracteres especiales se conocen como "caracteres de escape".
|
||||
Hay varios de ellos, pero no los veremos por ahora.
|
||||
|
||||
Dentro de VSCode, presionamos el boton "Abrir carpeta".
|
||||
|
||||
|
||||
## Impresión
|
||||
|
||||
Si no puedes ver este boton, asegurate de estar en la primera pestaña:
|
||||
Imprimir es mostrar información a través de la pantalla. Esta
|
||||
información puede ser palabras, letras, números, símbolos, etc.
|
||||
|
||||
|
||||
Para imprimir en Zig se escribe lo siguiente:
|
||||
|
||||
Aquí seleccionamos la carpeta `tutorial`. Esta es la carpeta que
|
||||
acabamos de crear en el terminal.
|
||||
|
||||
|
||||
|
||||
`std.debug.print` es una invocación que imprime lo que tenga
|
||||
dentro. Para poner algo dentro, se utilizan parentesis `()`.
|
||||
|
||||
Nos saldrá el mensaje de la imagen de abajo. Selecciona "Confiar en
|
||||
los autores..." y presiona "Si, confio en los autores".
|
||||
Dentro de los paréntesis va el string que queremos imprimir
|
||||
y una secuencia misteriosa, así: `("Tu mensaje", .{})`.
|
||||
|
||||
|
||||
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.
|
||||
|
||||
Ahora veras que en vez del boton "Abrir carpeta" ahora hay una
|
||||
serie de archivos.
|
||||
Por ejemplo, para imprimir un nuevo texto `Me gusta Zig`
|
||||
se escribiriá el código así:
|
||||
|
||||
|
||||
`std.debug.print("Me gusta Zig", .{});`
|
||||
|
||||
Este es nuestro proyecto. Aquí es donde estarán todos los archivos
|
||||
que usaremos.
|
||||
Podemos tener varias invocaciones a la vez, y ejecutarlas en
|
||||
siempre que la invocación esté bien escrita.
|
||||
|
||||
- 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`:
|
||||
Y al ejecutar el programa se imprimiran los mensajes en orden.
|
||||
|
||||
|
||||
|
||||
|
||||
Este es el archivo donde trabajemos por el resto de la serie.
|
||||
|
||||
|
||||
## Nuevas lineas
|
||||
|
||||
Veras que hay un monton de código raro, que aun no sabemos qué
|
||||
significa. Por ahora lo vamos a dejar así.
|
||||
Notarás que el mensaje se imprimió junto: `Mi primera impresiónMe gusta Zig`.
|
||||
|
||||
Este es un buen momento para presentar un concepto muy importante:
|
||||
la computadora hace lo que le pides, no lo que quieres.
|
||||
|
||||
## Ejecutando el proyecto
|
||||
El código que ejecutamos no le pide a la computadora que imprima
|
||||
una nueva linea `\n`. Así que la computadora no la imprime.
|
||||
|
||||
Ahora que instalamos Zig en nuestro computador, tenemos que ejecutar
|
||||
el programa en nuestro computador. Eso lo haremos desde el terminal.
|
||||
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í:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Y también notarás que aparecieron 2 carpetas nuevas: `.zig-cache`
|
||||
y `zig-out`. Ignóralas.
|
||||
## Glosario
|
||||
|
||||
Has ejecutado el proyecto! Ahora vamos a hacerlo con nuestro propio código.
|
||||
No es necesario que memorices o entiendas estas palabras.
|
||||
|
||||
|
||||
## 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:
|
||||
|
||||
|
||||
|
||||
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.
|
||||
- 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"
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
layout: ../../../layouts/BlogLayoutEs.astro
|
||||
title: "07: Cero a Zig - Impresión con formatos"
|
||||
title: "Cero a Zig 07: Impresión con formatos"
|
||||
description: |
|
||||
Imprimiendo información adicional.
|
||||
pubDate: "2024-08-10"
|
||||
@ -20,8 +20,8 @@ formatos.
|
||||
El código para imprimir texto tiene dos partes:
|
||||
|
||||
```zig
|
||||
// --- 1 --- -2-
|
||||
std.debug.print("formato", .{});
|
||||
// --- 1 --- -2-
|
||||
std.debug.print("formato", .{});
|
||||
```
|
||||
|
||||
- 1: un formato (string)
|
||||
@ -69,7 +69,7 @@ saber que se pueden utilizar.
|
||||
const std = @import("zig");
|
||||
|
||||
pub fn main() !void {
|
||||
const nombre = "Juan";
|
||||
const nombre = "Juan"; // [!code focus:4]
|
||||
const apellido = "Perez";
|
||||
std.debug.print("{s} {s}", .{nombre, apellido});
|
||||
// Imprime: `Juan Perez`
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
layout: ../../../layouts/BlogLayoutEs.astro
|
||||
title: "08: Cero a Zig - Variables"
|
||||
title: "Cero a Zig 08: Variables"
|
||||
description: |
|
||||
Introducción a las variables
|
||||
pubDate: "2024-08-11"
|
||||
@ -29,7 +29,7 @@ Digamos que la persona se llama `Juan`. El código es así:
|
||||
const std = @import("std");
|
||||
|
||||
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("Adios {s}\n", .{"Juan"});
|
||||
}
|
||||
@ -47,7 +47,7 @@ Entonces tendríamos que repetirlo 10 veces.
|
||||
const std = @import("std");
|
||||
|
||||
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"});
|
||||
@ -86,10 +86,10 @@ y a partir de ese momento cada vez que usemos
|
||||
Por ejemplo:
|
||||
|
||||
```zig
|
||||
const std = @import("std");
|
||||
const std = @import("std"); // [!code word:nombre]
|
||||
|
||||
pub fn main() !void {
|
||||
const nombre = "Juan";
|
||||
const nombre = "Juan"; // [!code focus:2] // [!code highlight]
|
||||
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í:
|
||||
|
||||
```zig
|
||||
const std = @import("std");
|
||||
const std = @import("std"); // [!code word:nombre]
|
||||
|
||||
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});
|
||||
@ -133,10 +133,10 @@ Ahora, si queremos cambiar `Juan` por `Maria`,
|
||||
solo tenemos que hacerlo en un lugar:
|
||||
|
||||
```zig
|
||||
const std = @import("std");
|
||||
const std = @import("std"); // [!code word:nombre]
|
||||
|
||||
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});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
layout: ../../../layouts/BlogLayoutEs.astro
|
||||
title: "09: Cero a Zig - Comentarios y Números"
|
||||
title: "Cero a Zig 09: Comentarios y Números"
|
||||
description: |
|
||||
Comentarios, números y operaciones matemáticas
|
||||
pubDate: "2024-08-17"
|
||||
@ -31,9 +31,11 @@ y terminan cuando acaba la linea.
|
||||
|
||||
|
||||
```zig
|
||||
// Este es un comentario
|
||||
const std = @import("std");
|
||||
|
||||
// Este es un comentario // [!code highlight]
|
||||
pub fn main() !void {
|
||||
// Este también es un comentario
|
||||
// Este también es un comentario // [!code highlight]
|
||||
std.debug.print("Hola", .{});
|
||||
}
|
||||
```
|
||||
@ -45,20 +47,23 @@ Si quieres un comentario que abarque varias lineas,
|
||||
cada linea debe iniciar con doble slash:
|
||||
|
||||
```zig
|
||||
const std = @import("std");
|
||||
|
||||
pub fn main() !void {
|
||||
// Este es un comentario
|
||||
// Este es un comentario // [!code highlight:3] // [!code focus:4]
|
||||
// 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.
|
||||
También puedes escribir un comentario al final
|
||||
de una linea con código, pero no es recomendable.
|
||||
|
||||
```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
|
||||
}
|
||||
```
|
||||
@ -84,7 +89,7 @@ es el siguiente:
|
||||
const std = @import("std");
|
||||
|
||||
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");
|
||||
|
||||
pub fn main() !void {
|
||||
const edad = 32;
|
||||
const edad = 32; // [!code focus:3] // [!code highlight]
|
||||
// Imprime: `Tengo 32 años`
|
||||
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
|
||||
operaciones con ellos.
|
||||
|
||||
Zig soporta las operaciones que conoces: suma `+`,
|
||||
Zig ofrece 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 r1 = 9 + 3; // 12 // [!code focus:7]
|
||||
const r2 = 9 - 3; // 6
|
||||
const r1 = 9 * 3; // 27
|
||||
const r1 = 9 / 3; // 3
|
||||
|
||||
Loading…
Reference in New Issue
Block a user