¿Qué estrategias funcionan mejor al momento de realizar un proyecto de programación asistido por Inteligencia Artificial?

Después de todo interactuamos con la IA de una forma bastante particular. Le damos instrucciones escritas en un lenguaje natural, y esperamos recibir la respuesta en un lenguaje formal. Usamos por ejemplo inglés para describir un problema que requiere una acción en Python.

¿Podemos explicar correctamente las especificaciones de lo que queremos? De la calidad de las instrucciones depende buena parte de nuestro éxito.

Pero todas las interacciones encuentran limitaciones técnicas. La efectividad de la IA no es la misma según la extensión del proyecto, y necesitamos comprobar los resultados para evitar alucinaciones.

En lo que sigue voy a revisar un caso práctico: la creación de un sitio estático. Por medio de ese ejemplo vamos a buscar en qué formas podemos reducir la complejidad de nuestras instrucciones, con el objetivo de usar la IA para tareas más grandes.

¿Qué puede enseñarnos un sitio estático de la utilización de la IA?

Pensemos en un sitio web estático que utiliza solamente dos tecnologías:

• HTML para la estructura.
• CSS para el estilo.

No tenemos nada más en el proyecto. Una serie de archivos HTML y un único gran archivo de CSS.

Puede parecer en un primer momento un proyecto sencillo de crear. Una inteligencia artificial en el año 2025 parece ser capaz de generar todos esos documentos sin inconvenientes.

Entonces surge la primera pregunta ¿Cuál es la mejor forma de encarar el sitio?

La primera respuesta puede ser intentar completar el proyecto “One Shot”. Pedirle a la IA que genere nuestro proyecto por medio de una única instrucción.

Pero los primeros problemas se hacen aparentes.

Lo más seguro es que terminemos con un único archivo con cientos de líneas de código, todo el contenido del sitio y el CSS juntos. Y por eso mismo va a tratarse de una versión muy difícil de mantener y expandir.

Intentamos simplificar el proyecto obteniendo todo de un solo movimiento, pero nos encontramos con un archivo enorme en el que fácilmente se nos pueden escapar errores.

¿Qué podemos hacer entonces?

Digamos que estamos programando con la versión pública de alguna de las IA más populares. La mayoría de esas interfaces públicas, utilizadas directamente desde sus propios sitios web, no nos van a permitir subir múltiples archivos a la vez. E incluso si podemos trabajar con múltiples archivos dentro de la ventana de contexto, todavía tenemos que tener en cuenta que a mayor complejidad mayor posibilidad de error.

La solución parece ser movernos del “one shot” hacia un enfoque por pasos de una forma pausada.

Imaginemos que estamos haciendo la página principal del sitio. Una estrategia a seguir puede ser la siguiente:

1. Pedirle a la IA generar una primera versión de nuestra página principal que incluya el HTML integrado al CSS.

2. Después de tener esa primera versión funcionando, le pedimos a la IA que separe el código en dos archivos diferentes: .html y .css

Esos dos archivos van a estar correctamente vinculados, porque la IA solamente los separó luego de tener una primera versión funcional.

Ahora solamente tenemos que vincular estos nuevos archivos de forma local para ver que funcionen en conjunto.

Estamos sin embargo todavía lejos de un sitio funcional. Por eso tenemos que pensar en…

Conocer el problema para intentar resolverlo

Entonces estamos intentando crear un sitio estático.

Y ya conocemos nuestro problema: si encaramos el proyecto de una forma demasiado general el resultado se vuelve complejo. Y eso genera nuevos errores.

Para evitar esos errores necesitamos reducir la complejidad. Lo que buscamos es dividir el problema en partes que podemos manejar. Ahora en lugar de pedir un sitio web completo, vamos a pensar en generar sus componentes por separado.

Con eso en mente revisemos ¿Qué es un sitio web?

Un sitio web es una colección de páginas. Por ejemplo.

• Página de inicio (Landing page / Home page)
• Página Acerca de (About page)
• Página de contacto (Contact page)
• Página de política de privacidad (Privacy policy page)

Esas partes comparten elementos de diseño, como vamos a repasar a continuación.

Nuestro primer intento para simplificar el problema fue pasar de un único documento HTML+CSS a dos documentos diferentes, uno que contiene el HTML y otro que contiene el CSS.

Ahora tenemos un segundo nivel de simplificación: podemos pedirle a la IA que por ejemplo se concentre en únicamente el código de la página de inicio.

Pero podemos seguir dividiendo el proyecto en módulos.

¿Qué es una página de inicio? Una página de inicio es una colección de distintas secciones ordenadas:

Barra de navegación (Navigation bar / Header)
Sección hero (Hero section)
Formulario de suscripción (Subscription box )
Pie de página (Footer)

Eso nos da toda otra dimensión para el trabajo con la IA. Empezamos pidiendo que escriba un sitio web y ahora le pedimos que escriba “Un Hero section para una página de inicio”.

Para hacer esto es necesario que tengamos conocimiento sobre la tecnología de nuestro proyecto. Pero este enfoque más reducido nos ayuda a ganar más control en nuestras instrucciones.

Evitar repeticiones innecesarias por medio de las instrucciones

Cuando empezamos con nuestro ejemplo le pedimos a la IA que genere toda una parte de nuestro sitio estático en un solo movimiento.

Luego de eso, poco a poco, nos movimos a una forma de organización más modular.

Nos queda por preguntar ¿Qué es lo que se mantiene dentro de la memoria de corto plazo de la IA con la que estamos trabajando? ¿Podemos reutilizar partes de nuestra conversación con la máquina para ahorrarnos tiempo?

Toda la conversación de nuestro proyecto puede ser utilizada como contexto previo. Gracias a eso la IA puede reutilizar un bloque que fue generado con anterioridad dentro de la misma conversación.

Por supuesto el tamaño de una “ventana de contexto” va a variar entre las diferentes implementaciones públicas de las diferentes IA. Si la conversación se cierra, si empezamos a trabajar en una nueva conversación, no podemos hacer referencia a esas otras memorias.

Vamos a volver nuestras instrucciones en algo todavía más preciso.

Diferentes partes del sitio comparten las mismas estructuras y clases. Siguiendo con nuestro ejemplo podemos suponer que el mismo “Pie de Página” se repite mostrando la misma información tanto en la página de inicio como en la de contacto y la de privacidad.

De esa forma no necesitamos que la IA escriba las mismas partes una y otra vez. Conocer las reglas del HTML+CSS nos ayuda a resolver ese problema.

Ahora por ejemplo cuando compartimos el prompt para la página contacto, podemos decir por ejemplo “El sitio de contacto comparte la misma barra de navegación y el mismo footer que la página principal”. Incluso también podemos mencionar de manera explicita una clase o un nombre ya existente para que pueda volver a ser utilizado.

La idea con eso es evitar que la herramienta escriba una y otra vez lo mismo. Por ejemplo en nuestro caso, la IA puede escribir un nuevo HTML haciendo un llamado a una clase que ya existe en una implementación previa del CSS. Ahora solamente nos queda tener que actualizar la hoja de estilo sin necesidad de crear un nuevo bloque de código.

Por supuesto también podemos pegar los ejemplos directos dentro de la instrucción si el ejemplo que buscamos usar no se encuentra dentro de la ventana de contexto actual.

Conclusión

Con esto le doy un cierre a mi apunte revisando qué podemos aprender de nuestro trato con la inteligencia artificial (LLM)) mientras creamos un sitio estático.

Es simplemente un intento por analizar algunas de las cosas que encontré al utilizar la IA, proponiendo al mismo tiempo una forma de trabajo más organizada.

Por supuesto todo esta idea puede ser mejorada.

Como ejemplo pensamos de nuevo en el CSS ¿en que forma vamos a estructurarlo? En este punto conocer las mejores prácticas del lenguaje va a ayudarnos a entender mejor lo que le pedimos a la IA.

Me gustaría conocer tus opiniones sobre el texto, me gustaría leer tu correo electrónico con lo que estás pensando del tema.

La seguimos en el próximo apunte.

¿Comentarios o preguntas? Escríbeme tu opinión a: gustavo@apunteimpensado.com

En este apunte práctico voy a desarrollar una explicación sobre las ecuaciones cuadráticas, intentando hacer el tema lo más sencillo que me resulte posible.

Las ecuaciones cuadráticas siempre aparecen en muchos exámenes y en planes de estudios, por lo que con esto voy a crear mi propio apunte para entender de una vez por todas el tema.

Esta explicación va a necesitar atravesar varias capas…como las capas de una cebolla. Por favor, no escapen del sitio todavía, prometo que todo va a tener sentido al final.

El plan es el siguiente: Primero vamos a revisar una explicación técnica. Luego voy a ir poco a poco tratando de explicar cada parte, para que podamos visualizar el asunto.

¿Qué es una ecuación cuadrática?

Una ecuación cuadrática es una ecuación polinómica de segundo grado que tiene la forma general: \[ax^2 + bx + c = 0 \quad \text{con } a \neq 0.\]

Componentes clave

- Coeficientes:

- \(a\): Coeficiente del término cuadrático, con la condición de que \(a \neq 0\).

- \(b\): Coeficiente del término lineal.

- \(c\): Término constante o independiente.

- Variable:

- \(x\): Es la incógnita cuyo valor se busca determinar.

- Raíces:

- Son los valores de \(x\) que satisfacen la ecuación \(ax^2 + bx + c = 0\).

- Se pueden encontrar utilizando la fórmula cuadrática: \[x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}.\]

- Discriminante:

El discriminante de la ecuación cuadrática se define como: \[D = b^2 - 4ac,\] y permite determinar la naturaleza de las raíces:

- Si \(D > 0\), la ecuación tiene dos raíces reales y distintas.

- Si \(D = 0\), la ecuación tiene una única raíz real, con multiplicidad dos (raíz doble).

- Si \(D < 0\), la ecuación tiene dos raíces complejas conjugadas, y no tiene solución real.

No, ahora si realmente… ¿Qué es una ecuación cuadrática?

Desde un punto de vista gráfico, la función cuadrática \[f(x) = ax^2 + bx + c\] representa una parábola en el plano cartesiano.

El término cuadrático \(ax^2\) es el responsable de la forma característica curva de la parábola.

- Dirección de la parábola: El signo del coeficiente \(a\) determina hacia dónde abre la parábola:

- Si \(a > 0\), la parábola tiene un mínimo y abre hacia arriba.

- Si \(a < 0\), la parábola tiene un máximo y abre hacia abajo.

- Vértice de la parábola: El vértice es el punto extremo (máximo o mínimo) de la parábola, y su coordenada \(x\) está dada por: \[x = -\frac{b}{2a}\] Este valor es especialmente importante en problemas de optimización, ya que representa el valor donde la función alcanza su máximo o mínimo. Se puede pensar el vértice como el punto más bajo (mínimo) de la parábola cuando abre hacia arriba, y el punto más alto (máximo) cuando abre hacia abajo.

- Eje de simetría: La recta vertical definida por \(x = -\dfrac{b}{2a}\) corresponde al eje de simetría de la parábola. Esto significa que la parábola es simétrica con respecto a esta recta.

¿Ecuación o función cuadrática?

Es común confundir los términos ecuación cuadrática y función cuadrática, ya que ambos conceptos están estrechamente relacionados, pero tienen significados ligeramente distintos:

- Función cuadrática: Es una regla que asigna a cada valor de \(x\) un valor único mediante la expresión: \[f(x) = ax^2 + bx + c, \quad \text{con } a \neq 0.\] Su propósito es describir cómo cambia el valor de \(f(x)\) a medida que varía \(x\). Gráficamente, representa una parábola.

- Ecuación cuadrática: Surge cuando igualamos la función cuadrática a un valor específico, normalmente a cero: \[ax^2 + bx + c = 0.\] En este caso, el objetivo es encontrar los valores de \(x\) que hacen cierta esta igualdad, es decir, las raíces o soluciones de la ecuación.

- Relación entre ambos: La ecuación cuadrática está basada en la función cuadrática. Resolver la ecuación \(ax^2 + bx + c = 0\) equivale a encontrar los valores de \(x\) para los cuales \(f(x) = 0\), es decir, las intersecciones con el eje \(x\).

En resumen: Una función cuadrática describe una relación, mientras que una ecuación cuadrática busca soluciones específicas.

¿Qué es el discriminante?

De lo anterior, sabemos que los coeficientes \(a\), \(b\) y \(c\) son los componentes de la ecuación cuadrática \(ax^2 + bx + c = 0\).

Pero… ¿qué es el discriminante?

El discriminante (\(D\) o \(\Delta\)) es un número que se calcula a partir de los coeficientes de la ecuación cuadrática usando la fórmula: \[D = b^2 - 4ac\] Este número no es la solución de la ecuación, pero determina la naturaleza y cantidad de las raíces reales.

¿Qué información nos da el discriminante?

El discriminante clasifica las raíces de la ecuación cuadrática en tres casos:

- Caso 1: \(D > 0\) (Discriminante positivo) Dos raíces reales distintas. Ejemplo: Si \(D = 25\), las raíces pueden ser \(x = -1\) y \(x = -6\) (como en la ecuación \(x^2 + 7x + 6 = 0\)). Gráficamente: La parábola cruza el eje \(X\) en dos puntos.

- Caso 2: \(D = 0\) (Discriminante nulo) Una raíz real doble (repetida). Ejemplo: Si \(D = 0\), la raíz es \(x = 3\), pero se escribe como \((x - 3)^2 = 0\). Entonces hay una solución real (\(x = 3\)), pero es una raíz doble (aparece dos veces en la factorización). Gráficamente: La parábola toca el eje \(X\) en su vértice.

- Caso 3: \(D < 0\) (Discriminante negativo) Dos raíces complejas conjugadas (no reales). Ejemplo: Si \(D = -16\), las raíces son \(x = -\frac{3}{2} \pm 2i\). Gráficamente: La parábola no cruza el eje \(X\); “flota” por encima o por debajo.

El discriminante lo utilizamos dentro de la fórmula resolvente de la cuadrática.

¿Qué es la fórmula resolvente de la cuadrática?

Esto se conoce también como la fórmula para resolver la función cuadrática. Tiene la siguiente forma:

\[x = \frac{-b \pm \sqrt{D}}{2a}\]

Su resultado nos da los ceros o **raíces** de la ecuación.

Ya mencioné ampliamente la parte del discriminante, que lo usamos dentro de esta fórmula. Pero hay otro detalle a tener en cuenta: En la resolvente encontramos un signo \(+\) y \(-\) **junto al discriminante**, esto es lo que genera dos soluciones. Recordemos que son dos soluciones si el discriminante es distinto de cero; si el discriminante es cero, ambas soluciones coinciden.

¿Qué es una raíz de la función?

Las raíces son las “\(x\)” que **satisfacen** la ecuación. Se trata de los valores que al sustituirlos en la ecuación producen un resultado igual a cero. Es decir, las raíces son las “\(x\)” que cumplen:

\[f(x) = ax^2 + bx + c = 0\]

Las raíces también pueden aparecer mencionadas como los **ceros** de la función, los puntos donde el gráfico de la función intersecta el **eje \(X\)** en el plano cartesiano (en el caso de raíces reales).

Tres ejemplos de ecuación cuadrática

Cuadrática con dos raíces reales distintas

Ejemplo 1: Resolver la ecuación \[x^2 - 5x + 6 = 0.\]

- Coeficientes: \(a = 1\), \(b = -5\), \(c = 6\)

- Discriminante: \[D = (-5)^2 - 4(1)(6) = 25 - 24 = 1 > 0,\] lo que indica **dos raíces reales distintas**.

- Raíces: \[x = \frac{5 \pm \sqrt{1}}{2} = \frac{5 \pm 1}{2},\] entonces, \[x_1 = \frac{5 + 1}{2} = 3, \quad x_2 = \frac{5 - 1}{2} = 2.\]

- Factorización: \((x - 3)(x - 2) = 0\).

Cuadrática con una raíz real doble

Ejemplo 2: Resolver la ecuación \[x^2 - 4x + 4 = 0.\]

- Coeficientes: \(a = 1\), \(b = -4\), \(c = 4\)

- Discriminante: \[D = (-4)^2 - 4(1)(4) = 16 - 16 = 0,\] lo que indica **una raíz real doble (repetida)**.

- Raíz: \[x = \frac{4}{2} = 2.\]

- Factorización: \((x - 2)^2 = 0\).

Cuadrática con dos raíces complejas conjugadas

Ejemplo 3: Resolver la ecuación \[x^2 + 2x + 5 = 0.\]

- Coeficientes: \(a = 1\), \(b = 2\), \(c = 5\)

- Discriminante: \[D = 2^2 - 4(1)(5) = 4 - 20 = -16 < 0,\] lo que indica **dos raíces complejas conjugadas (no reales)**.

- Raíces: \[x = \frac{-2 \pm \sqrt{-16}}{2} = \frac{-2 \pm 4i}{2} = -1 \pm 2i.\]

- Factorización: \((x + 1 - 2i)(x + 1 + 2i) = 0\).

a, b, c de vuelta a las partes de la función cuadrática

Ya sabemos que la función cuadrática tiene esta forma:

\[ax^2 + bx + c = 0\]

Y al principio del apunte decíamos, por ejemplo, que \(b\) es el término lineal. ¿Qué significa eso?

Revisamos cada parte una vez más, detallando su función:

1. \(a\) (término cuadrático)

Qué es: Coeficiente de \(x^2\) (la variable elevada al cuadrado).

Ejemplo: En \(3x^2 - 5x + 2 = 0\), \(a = 3\).

Importancia:

- Define la curvatura de la parábola: - Si \(a > 0\) → Parábola abre hacia arriba (\(\cup\)). - Si \(a < 0\) → Parábola abre hacia abajo (\(\cap\)).

- Controla el “ancho” de la parábola: - \(|a|\) grande → Parábola estrecha (ej: \(5x^2\)). - \(|a|\) pequeño → Parábola ancha (ej: \(0.2x^2\)).

- Esencial para que la ecuación sea cuadrática: - Si \(a = 0\), ¡no es cuadrática! (sería lineal).

En la fórmula resolvente: Aparece en el denominador: \(\frac{-b \pm \sqrt{D}}{2a}\).

2. \(b\) (término lineal)

Qué es: Coeficiente de \(x\) (la variable sin elevar).

Ejemplo: En \(3x^2 - 5x + 2 = 0\), \(b = -5\).

Importancia:

- Influencia en la posición horizontal del vértice: - Coordenada \(x\) del vértice: \(x_v = -\frac{b}{2a}\).

- Determina la simetría: - El eje de simetría es la recta vertical \(x = -\frac{b}{2a}\). - Si \(b = 0\): La ecuación es simétrica respecto al eje \(y\) (ej: \(2x^2 - 8 = 0\)).

En el discriminante: Parte crucial de \(D = b^2 - 4ac\).

3. \(c\) (término independiente o constante)

Qué es: Término sin variable (constante numérica).

Ejemplo: En \(3x^2 - 5x + 2 = 0\), \(c = 2\).

Importancia:

- Indica el corte con el eje \(y\): Cuando \(x = 0\), \(y = c\) → Punto \((0, c)\).

- Influye en las raíces: Cambia el valor del discriminante \(D = b^2 - 4ac\).

Ecuación cuadrática: algunas otras formas

Los problemas sobre cuadráticas no siempre se nos presentan directamente en la forma:

\[ax^2 + bx + c = 0\]

Algunas veces tenemos que hacer unos pasos extra antes de encontrar los ceros/raíces. Lo que sigue son algunos ejemplos de eso.

1. Funciones cuadráticas en forma vértice

Ecuación: \[f(x) = 2(x - 3)^2 - 8 = 0\]

Paso a paso:

1. Aislar el término cuadrático: \[2(x - 3)^2 - 8 = 0 \implies 2(x - 3)^2 = 8\]
2. Despejar el binomio al cuadrado: \[(x - 3)^2 = \frac{8}{2} \implies (x - 3)^2 = 4\]
3. Aplicar raíz cuadrada (considerando ambas soluciones): \[\sqrt{(x - 3)^2} = \sqrt{4} \implies |x - 3| = 2\] Esto genera dos ecuaciones: \[x - 3 = 2 \quad \text{o} \quad x - 3 = -2\]
4. Resolver cada ecuación: \[x = 3 + 2 = 5; \quad x = 3 - 2 = 1\]
5. Verificar las raíces: \[\text{Para } x = 5: \quad 2(5 - 3)^2 - 8 = 2 \cdot 4 - 8 = 0\] \[\text{Para } x = 1: \quad 2(1 - 3)^2 - 8 = 2 \cdot 4 - 8 = 0\]

Conclusión: Las raíces son \(x = 1\) y \(x = 5\). La ecuación original está en forma vértice: \(a(x - h)^2 + k = 0\)

2. Ecuaciones racionales con términos cuadráticos

Ecuación: \[\frac{x^2 - 4}{x - 1} = 3\]

Paso a paso:

1. Restricción de dominio: \[x - 1 \neq 0 \implies x \neq 1\]
2. Eliminar el denominador (multiplicar ambos lados por \(x - 1\)): \[x^2 - 4 = 3(x - 1)\]
3. Llevar a la forma estándar: \[x^2 - 4 = 3x - 3 \implies x^2 - 3x - 1 = 0\]
4. Aplicar resolvente cuadrática (\(a = 1\), \(b = -3\), \(c = -1\)): \[D = (-3)^2 - 4(1)(-1) = 9 + 4 = 13\] \[x = \frac{3 \pm \sqrt{13}}{2}\]
5. Verificar restricciones: \[x_1 = \frac{3 + \sqrt{13}}{2} \approx 3.303; \quad x_2 = \frac{3 - \sqrt{13}}{2} \approx -0.303\] Ambos valores son \(\neq 1\) → Válidos.

Conclusión: Las raíces son \(x = \frac{3 \pm \sqrt{13}}{2}\). Siempre hay que recordar excluir valores que anulen el denominador.

3. Sistemas de ecuaciones con componentes cuadráticas

Sistema: \[\begin{cases} y = x^2 - 5x + 6 \\ y = 2x - 4 \end{cases}\]

Resolvemos:

1. Igualar ambas ecuaciones (puntos de intersección): \[x^2 - 5x + 6 = 2x - 4\]

2. Llevar a la forma estándar: \[x^2 - 7x + 10 = 0\]

3. Identificamos los coeficientes: \[\begin{aligned} a &= 1 \\ b &= -7 \\ c &= 10 \end{aligned}\]

   Sustituimos en la fórmula: \[x = \frac{-(-7) \pm \sqrt{(-7)^2 - 4(1)(10)}}{2(1)}\]

   \[x = \frac{7 \pm \sqrt{49 - 40}}{2}\]

   \[x = \frac{7 \pm \sqrt{9}}{2}\]

   \[x = \frac{7 \pm 3}{2}\]

   Entonces las soluciones son: \[x_1 = \frac{7 + 3}{2} = 5 \quad \text{y} \quad x_2 = \frac{7 - 3}{2} = 2\]

4. Hallar \(y\) para cada \(x\) (usar la ecuación lineal): \[\text{Si } x = 2: \quad y = 2(2) - 4 = 0 \quad \rightarrow \quad (2, 0)\] \[\text{Si } x = 5: \quad y = 2(5) - 4 = 6 \quad \rightarrow \quad (5, 6)\]

5. Verificar en la cuadrática: \[\text{Para } (2, 0): \quad 2^2 - 5(2) + 6 = 4 - 10 + 6 = 0\] \[\text{Para } (5, 6): \quad 5^2 - 5(5) + 6 = 25 - 25 + 6 = 6\]

Conclusión: Las soluciones del sistema son los puntos \((2, 0)\) y \((5, 6)\). Si lo pensamos de forma gráfica podemos encontrar en esos puntos las intersecciones entre la parábola y la recta. Al igualar funciones, se reduce a una ecuación cuadrática: \(f_{\text{cuad}}(x) = f_{\text{lin}}(x)\)

Conclusión

Con esto le doy un cierre al apunte donde intento simplificar al máximo posible la explicación de las ecuaciones cuadráticas.

Como todo apunte, el mismo puede ser mejorado. ¿Encontraste algún error? ¿Hay algo que pudo haberse explicado de una forma más sencilla? Envíame un correo electrónico contándome tu opinión: gustavo @apunte impensado.com

La seguimos en el próximo apunte.

¿Comentarios o preguntas? Escríbeme tu opinión a: gustavo@apunteimpensado.com

Cómo establecer objetivos de palabras usando Macros y LibreOffice Basic

Seguramente en algún momento tuviste que escribir una determinada cantidad de palabras. Tal vez por un trabajo, por cuestiones de estudio o porque te encontrás escribiendo un proyecto personal.

Por completar este ejemplo, digamos que necesitamos escribir 20.000 palabras.

Una cosa que podemos hacer es revisar de tanto en tanto el contador debajo de Libreoffice Writter para ver si estamos cerca del objetivo. O también podemos crear un macro que nos permita averiguar esa información simplemente apretando un atajo en el teclado.

La idea es tener un código que nos informe del porcentaje total de palabras que completamos al momento de invocar el macro.

El código

El siguiente código es muy sencillo, y hace exactamente lo que estoy buscando:

REM  *****  BASIC  *****
REM Macro para dar el porcentaje completado en palabras de un OBJETIVO_TOTAL.

Sub contador_objetivo()
    Const OBJETIVO_TOTAL As Long = 20000
    Dim doc As Object
    Dim wordCount As Long
    Dim porcentaje As Long

    doc = ThisComponent
    wordCount = doc.WordCount
    porcentaje = (wordCount / OBJETIVO_TOTAL) * 100

    MsgBox ("Ya hiciste el " & porcentaje & "% (" & wordCount & " palabras) de un total de " & OBJETIVO_TOTAL & " palabras.")

End Sub

La explicación:

La mayor parte del código se encarga de establecer las variables.

De todo, creo que lo más importante es esto:

Const OBJETIVO_TOTAL As Long = 20000

Donde se puede reemplazar “20.000” por la cantidad de palabras que se necesitan completar.

Y también esto otro:

MsgBox ("Ya hiciste el " & porcentaje & "% (" & wordCount & " palabras) de un total de " & OBJETIVO_TOTAL & " palabras.")

Ya que es lo que muestra el mensaje con el porciento terminado cuando invocamos el programa.

¿Cómo utilizar el macro?

Para ponerlo en funcionamiento es necesario:

1. Añadir el macro. Esto puede conseguirse en “Herramientas > Macros > Organizar Macros > Basic”

2. Asignarle un nuevo atajo al macro. Para esto voy a “Herramientas > Personalizar” y luego agregar la combinación de teclas en la pestaña “teclado”.

Macro para contar palabras bajo cada cabecera en LibreOffice Writer

Digamos que tenemos que escribir un proyecto con un total de 20.000 palabras. Escribir todas esas palabras es difícil, en especial cuando lo comparamos con escribir solamente 1.000 palabras.

Entonces decidimos dividir el texto en 20 secciones, para que se vuelva más fácil de completar. Creamos diferentes títulos, cabeceras o “headings” (H1, H2…) y podemos navegar entre esos headings. Pero en un principio no podemos saber cuantas palabras agregamos luego en cada uno.

Este macro que comparto a continuación, escrito en LibreOffice Basic, nos va a ayudar exactamente a eso.

La idea es tener un código que revise todo el texto y encuentre las cabeceras. Luego tiene que informarnos del nombre de la cabecera y su cantidad de palabras. Al final tiene que decirnos la cantidad total de palabras, aunque eso ya lo conocemos del contador dentro del documento.

El código:

Sub ContarPalabrasHeadings()
    Dim doc As Object
    Dim cursor As Object
    Dim para As Object
    Dim wordCount As Long
    Dim totalWordCount As Long
    Dim headingFound As Boolean
    Dim result As String

    doc = ThisComponent
    text = doc.getText()
    cursor = text.createEnumeration()

    headingFound = False
    result = ""
    wordCount = 0
    totalWordCount = 0

    While cursor.hasMoreElements()
        para = cursor.nextElement()

        If Left(para.ParaStyleName, 7) = "Heading" Then
            If headingFound Then
                ' Crea un string para reflejar el número de palabras entre cabeceras
                result = result & headingText & ": " & wordCount & " palabras" & Chr(10)
            End If

            headingText = para.getString()
            headingFound = True
            wordCount = 0
        Else
            If headingFound Then
                ' Contar el número de palabras entre cabeceras
                trimmedText = Trim(para.getString())
                wordsArray = Split(trimmedText, " ")
                wordCount = wordCount + UBound(wordsArray) + 1
                totalWordCount = totalWordCount + UBound(wordsArray)
            End If
        End If
    Wend

    ' Actualiza la variable result con el número de palabras
    If headingFound Then
        result = result & headingText & ": " & wordCount & " palabras" & Chr(10)
    End If

    If result = "" Then
        MsgBox "No se encontraron cabeceras en el documento"
    Else
        MsgBox result & Chr(10) & "Total de palabras: " & totalWordCount
    End If

End Sub

Posibles mejoras:

Se me ocurren en este momento dos mejoras que se le pueden agregar al programa:

1- Una forma de contar las palabras debajo de cada heading de forma más precisa. En la forma que se encuentra implementado, encontré que a veces el conteo por secciones puede tener algunas palabras de más o de menos con el conteo total. Nada exagerado de todas maneras, el programa sirve para conseguir una buena idea general de cuanto llevamos avanzado.

2- Se puede modificar el programa para que también nos informe que tipo de cabecera es cada una, H1, H2…

Pero el programa cumple con lo que promete sin necesidad de esas mejoras.

Consejos prácticos para usar en LibreOffice

¿Cómo puedo instalar nuevas tipografías en LibreOffice?

No es necesario instalar tipografías para LibreOffice, lo que hacemos es instalar tipografías a nivel del sistema.

Al instalarla en el sistema operativo, otros programas también pueden aprovecharlas. Una tipografía instalada en el sistema puede usarla LibreOffice, GIMP y otros programas.

En cada sistema operativo la instalación de nuevas fuentes puede variar ligeramente. Lo que es seguro es que por un lado vos descargás, creas o recibí la tipografía para agregar.

Luego buscá en el directorio de raíz la carpeta /usr/share/fonts y dejá el archivo ahi, para que no se pierda.

Acto seguido, dale doble click al archivo de la tipografía (puede ser de extensión .otf o .ttf por ejemplo) y luego dale click a instalar.

Con eso tendrías que tener la tipografía instalada y ubicada en el directorio correcto.

¿Cómo puedo usar la tipografía Times New Roman en LibreOffice en Linux?

Si tuviera que apostar, diría que esta es una de las preguntas más comunes cuando instalamos LibreOffice por primera vez.

Respuesta corta: No vas a encontrar la tipografía Times New Roman en LibreOffice, porque esa tipografía tiene un tipo de licencia que no permite su uso libre.

Lo mejor va a ser que uses una tipografía equivalente, por ejemplo Liberation Serif que si viene lista para usar. Puede servirte como un buen reemplazo y vas a evitarte vueltas.

Respuesta larga: Es posible usar la tipografía Times New Roman en GNU/Linux. Así podes hacerlo en algunas distribuciones, por ejemplo Ubuntu y Linux Mint. Los pasos son los siguientes:

Por medio de la linea de comandos: Descargá el siguiente conjunto de paquetes,

sudo apt-get install ttf-mscorefonts-installer

Y ahora dale aceptar a la licencia de acuerdo. Bueno, lee primero la licencia y dale aceptar.

¿Cómo darle aceptar? Si, yo tampoco supe en un primer momento. Presiona la tecla Tab y va a posicionarte sobre Aceptar.

Lo mejor ahora es reiniciar el equipo, aunque idealmente las tipografías fueron instaladas y ya están disponibles.

Cuando abras un nuevo programa y vayas a escribir, ya van a estar instaladas.

Por supuesto podes revertir la instalación con el comando:

sudo apt-get purge ttf-mscorefonts-installer

Instalar por medio de un instalador gráfico: La otra manera de instalar Times New Roman en GNU/Linux es utilizando el Software Manager. O Ubuntu Software, el nombre puede variar.

El objetivo es: buscar el paquete ttf-mscorefonts-intaller e instalarlo.

Listo, eso también tiene que conseguirte Times New Roman y otras tipografías que estas buscando. Por ejemplo Arial Black, Arial, Courier New y otras.

Pero en resumen… darle una oportunidad a las tipografías que ya trae el sistema GNU/Linux (u otras de licencias similares) no es mala idea. A menos que sea por algún tipo de obligación laboral/universitaria, en ese caso, ya sabes como conseguirlas.

¿Cómo quitar las cabeceras en LibreOffice?

El modo de remover las cabeceras personalizadas es muy sencillo, solo hay que encontrar el menu correcto. Dirigite hacia:

Formato > Estilo de página > Cabecera

Y desmarcá la opción “Activar Cabece**ra”**.

Como es de esperar, en el mismo menú también vas a poder modificar sus parámetros.

¿Cómo puedo activar los backups automáticos en LibreOffice?

Para activar la opción de realizar respaldos automáticos del documento en que te encontrás trabajando, podes dirigirte al menú:

Herramientas > Opciones… > Cargar/guardar > General

Allí podes activar y modificar opciones como la de guardar datos de recuperación automática en intervalos de tiempo, y también la opción de Crear Copia de seguridad.

¿Cómo eliminar una página en blanco en Writer?

Digamos que terminaste el texto, pero sobra una página en blanco al final.

Poné el cursor al principio de esa hoja en blanco, y empezá a borrar. Si, borrar, con la tecla backspace del mismo modo que lo harías con el texto.

Eso tendría que eliminar la última página vacía en el documento.

Dicho de otra forma, lo que estamos haciendo es “eliminar” todo el espacio libre bajo el texto que termina el documento.

¿Cómo puedo recuperar un archivo que se borró accidentalmente?

Entre las preguntas de LibreOffice, esta realmente no tiene solución sencilla.

En un caso difícil, donde no hay ningún tipo de respaldo del archivo, la única solución posible sea tal vez usar algún tipo de programa al estilo Testdisk.

Ahora, en el caso de que tengas activadas copias de seguridad o guardados automáticos, busca en los directorios donde puedan haberse guardado.

Podes conocer esos directorios si revisás dentro de LibreOffice en el menú:

Herramientas > Opciones… > LibreOffice > Rutas > Copias de seguridad

O también en:

Herramientas > Opciones… > LibreOffice > Rutas > Archivos temporales

En esos dos lugares vas a averiguar sobre posibles espacios donde pudo guardarse una copia extra de tu documento perdido.

Si hay archivos de respaldo guardados, seguramente tengan la extensión .bak, por backup. Abrilo y guardalo con otro nombre.

Vale aclarar que tus chances de recuperar el documento aumentan cuanto más cerca a la fecha en que fue borrado comiences a buscarlo.

¿Cómo puedo insertar una página en el medio de un documento de Writer?

Para agregar una nueva página en el documento, posicioná el cursor al final o al principio de la página actual según donde sea que necesitas la nueva pagina.

Luego presiona el atajo Ctrl+Enter y con eso vas a agregar la nueva hoja.

También podes hacerlo desde el menú:

Insertar > Salto de página

O también desde:

Insertar > Más saltos > Salto manual

¿Comentarios o preguntas? Escríbeme tu opinión a: gustavo@apunteimpensado.com

En este apunte práctico voy a revisar cómo extraer el texto contenido en una imagen “.jpg” para utilizarlo como texto dentro de otros documentos.

Para esto vamos a utilizar las siguientes herramientas: Python, OpenCV y Tesseract.

Estamos recorriendo una época de grandes avances en LLM e inteligencia artificial, y las tareas de visión por computadora son cada vez más sorprendentes. Incluso la tarea que vamos a realizar a continuación me resulta sorprendente, aunque al momento de escribir esto pueda resultar algo común para otras personas.

Pero sin más introducción, vamos a empezar.

¿Qué nos interesa hacer?

Empecé a escribir esta entrada porque necesitaba extraer los datos de una tabla que se encontraba guardada en formato .jpg y no quería hacer el esfuerzo de copiarla por mi propia cuenta.

El resultado fue bueno, aunque tuve que hacer algunos ajustes manualmente para obtener toda la información. Recuerden que no soy experto en el tema, solamente un simple principiante y tienen que existir muchas formas de mejorar mi aproximación al problema.

Para los efectos de esta entrada digamos que queremos extraer el texto de la siguiente imagen:

Si queremos hacer esto vamos a necesitar tener algunas cosas en nuestra computadora.

Lista de cosas que necesitamos

Tengan en cuenta que estoy utilizando un sistema operativo Linux. Los detalles para las siguientes instalaciones pueden variar según el sistema que elijas.

Instalar Tesseract a nivel global

Tesseract es un motor de Reconocimiento Óptico de Caracteres (ROC). En resume vamos a necesitarlo para extraer el texto de la imagen.

Primero necesito instalar Tesseract al nivel de sistema:

sudo apt install tesseract-ocr

Ahora si escribo el comando:

tesseract --list-langs

Voy a conseguir que librerías de lenguaje tengo agregadas. Al principio intenté extraer el texto sin la librería para Español, y tuve buenos resultados. Pero por ejemplo aparecían problemas, la letra “ó” con tilde se mostraba en el documento como “é”.

Para resolverlo necesito agregar la librería en Español, y lo hago con este otro comando:

sudo apt install tesseract-ocr-spa

Crear un entorno de Python e instalar pytesseract

Voy a crear un entorno virtual en Python. Lo hago en el directorio en el que voy a ejecutar el código:

Ahora instalo Pytesseract dentro del entorno virtual:

pip install pytesseract

Pytesseract es un librería que le permite interactuar con Python al motor de reconocimiento que instalamos antes.

Instalar Opencv

Necesito ahora, otra vez dentro del entorno virtual agregar otra librería llamada Opencv:

pip install opencv-python

Con eso consigo agregar OpenCV (Biblioteca de Visión Computacional de Código Abierto) a mi entorno. Entre las cosas que nos va a permitir hacer esta librería se encuentra la posibilidad de procesar la imagen para mejorar las posibilidades de un reconocimiento de texto exitoso.

El código

Comparto el código completo para poder extraer el texto de una imagen “.jpg” para que puedas utilizarlo y modificarlo:

# Programa para extraer el texto de una imagen y pasar a un archivo.
# OpenCV para pre-procesar la imangen y Tesseract OCR para extraer el texto

import cv2
import pytesseract
import os
import sys

def preprocess_image(camino_imagen):

    image = cv2.imread(camino_imagen)
    if image is None:
        raise ValueError("Revisar el camino al directorio, no se pudo encontrar la imagen.")

    gray_image = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY) # Convierte la imagen a escala de grises
    blurred = cv2.GaussianBlur(gray_image, (3, 3), 0) # Aplica un desenfoque Gaussiano para reducir el ruido
    threshold_image = cv2.adaptiveThreshold(
        blurred,
        255,
        cv2.ADAPTIVE_THRESH_GAUSSIAN_C,
        cv2.THRESH_BINARY,
        11,
        2
    )

    return threshold_image # adaptive thresholding aplicado en el paso anterior para mejorar la lectura de la imagen

def extraer_texto(image, config=None):
    return pytesseract.image_to_string(image, lang='spa', config=config)

def main():
    DEFAULT_OUTPUT_CONFIG = "--psm 6 -c page_separator=''"  #  --psm 6 asume un texto uniforme

    if len(sys.argv) < 2:
        print("Modo de uso: python texto_imagen.py [camino_imagen]") #si se usan menos de dos argumentos, explica cómo llamar el script
        sys.exit(1)

    camino_entrada = sys.argv[1]
    if not os.path.isfile(camino_entrada):
        print("revisr el nombre de archivo o el camino al directorio") # mensaje de error si falta el nombre de la imagen
        sys.exit(1)

     # Check if the file has a .jpg extension (case-insensitive)
    filename = os.path.basename(camino_entrada)
    if os.path.splitext(filename)[1].lower() not in ('.jpg', '.png'):
        print("Error, solamente se pueden utilziar archivos .jpg o .png")
        sys.exit(1)

    try:
        preprocessed = preprocess_image(camino_entrada)
        text = extraer_texto(preprocessed, DEFAULT_OUTPUT_CONFIG)

        script_dir = os.path.dirname(os.path.abspath(__file__))
        archivo_salida = os.path.join(script_dir, "texto_procesado.txt")

        with open(archivo_salida, 'w', encoding='utf-16') as f:
            f.write(text)

        print(f"El texto fue extraido y guardado como {archivo_salida}")

    except ValueError as ve: # Manejo de errores, por ejemplo si la imagen provista no es del tipo de archivo adecuado.
        print(f"Value error: {ve}")
        sys.exit(1)
    except pytesseract.TesseractError as te:
        print(f"Tesseract error: {te}")
        sys.exit(1)
    except Exception as e:
        print(f"Error inesperado: {e}")
        sys.exit(1)

if __name__ == "__main__":
    main()

Algo importante a tener en cuenta es que el código tiene una clausula que se asegura que el archivo tenga la extensión “.jpg” o “.png” antes de procesarlo. Esto no es completamente necesario, porque las librerías que agregamos pueden usar otro tipo de archivos. Pero lo puse para asegurarme de no confundirme al utilizarlo en mi caso.

Si te sirve podés extraer el texto de la misma imagen que compartí más arriba para poder probar el código más rápido.

¿Cómo utilizar el código?

El código se invoca con este formato:

python texto_imagen.py [camino_imagen]

Tengan en cuenta que “texto_imagen.py” es el nombre con el que guardé el código en mi caso, podés modificarlo por el nombre que más quieras usar.

Conclusión

Con esto llega al final de mi apunte sobre cómo extraer el texto de una imagen utilizando Python, Tesseract y OpenCV.

En mi propio caso es como una primera aproximación al tema, puedo decir que aprendí mucho haciendo este material.

¿Te interesa el tema? ¿Encontraste algún error en mi explicación? Me interesa leer tu opinión, por favor envíame un correo electrónico con tu mensaje.

La seguimos en el próximo apunte

¿Comentarios o preguntas? Escríbeme tu opinión a: gustavo@apunteimpensado.com

En este apunte rápido voy a revisar cómo alternar de forma sencilla entre la parte del editor y la consola de comandos en VSCode.

Por supuesto estos mismos atajos funcionan también para VSCodium.

¿Por qué escribo esto? Al programar en Bash, noté que necesitaba moverme con el mouse repetidamente hacia la consola de comandos para ejecutar el código. Esta acción era casi imperceptible, pero con el tiempo se volvió molesta: me hacia utilizar el ratón una y otra vez con este único objetivo.

Siendo demasiado tranquilo como para remediarlo nunca busqué cuál era el atajo de teclado correcto. Pero ahora que si busqué la solución, la escribo aquí para no olvidarla.

Cómo mostrar y ocultar la consola de comandos

Esta es la documentación de VSCode sobre los atajos de teclado.

Esa documentación dice que el atajo de teclado para esto es:

Ctrl+`

Pero personalmente no tuve suerte con ese comando. Creo que eso es porque estoy utilizando el teclado configurado en español, y por algún motivo el “backtick” no aparece sin dar varias vueltas.

Aunque por otra parte realmente no encontré configurada la opción desde el vamos. Puede ser que dependa de qué versión estamos usando, en versiones antiguos el atajo puede no venir pre configurado.

¿Cómo solucionarlo?

Primero necesitamos abrir el panel de atajos de teclado. Lo podemos encontrar dentro de las opciones de configuración, o presionando alternativamente:

CTRL + k   Ctrl + s

Luego tenemos que buscar la siguiente opción:

view: Toggle Terminal

Utilizo VSCode en inglés, pero seguro en castellano se puede encontrar como “alternar terminal”. Esto nos va a permitir movernos sin necesidad de crear una terminal nueva.

Y le asignamos a esa opción un nuevo atajo de teclado, en mi caso utilicé:

Shift + p

Y listo, ahora presionando ese atajo puedo ocultar y mostrar la terminal, lo que me permite mover el cursor entre ambos paneles sin necesidad de utilizar el mouse.

Otra ventaja de crear este atajo es la siguiente. Digamos que me encuentro en la consola para debug (debug Console). Si presiono por primera vez la combinación en el teclado, me mueve hasta la consola de terminal. Y si lo presiono de vuelta oculto la consola. Algo de mucha utilidad.

Cómo pasar el foco de la terminal de comandos al editor

Solo para agregar algo más a esta que admito es una entrada algo corta, si me encuentro con el cursor en la terminal puedo presionar:

Ctrl + 1

Haciendo esto voy a poder pasar el curso al editor activo sin ocultar la terminal. si tengo más de un editor activo, hago “Ctrl + 2” para ir a ese editor y así por cada editor activo.

Cómo mostrar y ocultar cualquier panel en VSCode

Y solo para volver todos los consejos anteriores más redundantes todavía, aprendí que hay un atajo llamado: “Toggle Panel Visibility”

Esta opción permite que cualquier panel, incluso la consola de comandos se muestre o se oculte inmediatamente. El atajo es:

Ctrl + j

Todo lo anterior no es completamente inútil porque este atajo es más general, puedo usarlo para cerrar la consola de debug por ejemplo.

Conclusión:

Con esto le doy cierre a este apunte sobre cómo alternar rápido entre la consola de comandos y el editor en VSCode.

¿Encontraste algún error en el material? ¿Te interesa el tema? Escribí un correo electrónico a mi cuenta, me interesa conocer tu opinion.

¿Comentarios o preguntas? Escríbeme tu opinión a: gustavo@apunteimpensado.com

En este apunte rápido voy a revisar algunas opciones que tenemos para utilizar Git en Neovim sin necesidad de complementos extra. Y para eso vamos a necesitar acceder a la terminal.

Es importante mencionar que nos soy un experto en el asunto. Si lo que te interesan son las funcionalidades más complejas de Git, es posible que necesites la ayuda de un plugin extra.

Por otra parte, para seguir en esta serie de avisos, nada de esto va en contra de la utilización de complementos. Así que sin más…

Opción 1: Entrar a modo terminal y ejecutar Git desde ahí

Neovim cuenta con un “Modo Terminal” o Terminal Mode.

Este emulador de terminal me va a permitir utilizar los comandos directamente desde Neovim. Se puede entrar en este modo escribiendo en modo comando:

:terminal

En este modo tengo que presionar “i” para poder agregar texto.

Para salir de modo terminal y volver al modo normal utilizo la combinación de teclado:

Ctrl + \  Ctrl + n

La barra invertida \ la encuentro en el teclado, en la parte izquierda al lado de la tecla “1”.

Digamos que entré en modo terminal desde un documento en el que estaba trabajando. Para volver al buffer de ese documento presiono:

Ctrl + o

Desde el modo terminal puedo utilizar cualquier comando, entre ellos los comandos de Git.

Opción 2: suspender Neovim y volver a la terminal

Digamos que abrí Neovim desde la terminal de Linux. Si ahora presiono:

Ctrl + z

Neovim va a suspenderse para devolverme a la terminal. Pero Neovim sigue funcionando en segundo plano, por lo que puedo volver a retomarlo luego de ejecutar algunos comandos.

Este es el punto en el que puedo utilizar Git.

Luego para volver a Neovim, escribo en la terminal:

fg

Este comando “fg” quiere decir “foreground” lo que significa “volver al frente” en este contexto.

Esta forma de volver a la terminal puede causar problemas en algunas configuraciones de Neovim, pero yo no tengo inconvenientes al hacerlo.

Opción 3: ejecutar comandos de Linux directamente desde modo normal en Neovim

En Neovim puede ejecutar comandos de la shell directamente en modo “normal”linea de comando” si agrego el prefijo “:!”

Por ejemplo si escribo:

:git status

No va a ocurrir nada porque ese es un comando de la shell, pero si escribo:

:!git status

Obtengo el resultado del comando “git status”. Puedo volver al modo normal presionando Enter.

De esta forma tengo otra opción para utilizar Git directamente desde Neovim, y es una forma que se puede integrar sin muchas pausas extra.

Opción 4: crear nuevos atajos

Una de las grande ventajas de Neovim es la posibilidad de modificarlo a mi gusto.

Puedo vincular alguna de las opciones anteriores a un nuevo atajo de teclado, para no tener que escribir el comando completo cada vez.

Por ejemplo, en mi archivo de configuración “.lua” agrego la siguiente linea de código:

vim.keymap.set('n', '<F3>', ':!git status<CR>', { noremap = true, silent = true })

Esto quiere decir que si en “modo normal” presiono la tecla “F3”, se va a escribir el comando “:!git status” y se va a presionar “Enter” para ejecutarlo.

De esta forma puedo agregar cualquier otro comando de la shell que quiero utilizar de forma rápida, y puedo asociar esos comandos a las combinaciones de teclado que más me ayuden.

Conclusión

Bueno, con esto termino este apunte sobre cómo usar la Shell directamente desde Neovim. Por añadidura eso nos va a permitir utilizar Git en Neovim desde Linux.

¿Es todo esto una buena idea? Lo más seguro es que existen formas más prácticas que se habilitan por medio de complementos. Pero de todas formas es un buen ejercicio para aprender más de todo esto.

¿Encontraste algún error en el material? Por favor, avísame con un correo electrónico para que pueda corregirlo.

Lo mismo si te interesa comentar algo sobre el texto, mi correo electrónico se encuentra abierto para conocer tus opiniones.

La seguimos en el próximo apunte.

¿Comentarios o preguntas? Escríbeme tu opinión a: gustavo@apunteimpensado.com

Con estas palabras empiezo este apunte llamado “Guía mínima para empezar a utilizar Tmux”.

O bueno, ese era el nombre que iba a ponerle a este texto en un principio. Con la esperanza de volverlo un poco más personal y menos técnico, decidí cambiarle el enfoque.

Por eso estas son algunas de las cosas que aprendí al empezar a usar Tmux, y creo que son cosas que pueden ayudar a cualquiera que empieza a usar el programa.

¿Por qué elegí empezar a usar Tmux?

Me gusta escribir y utilizar programas por medio de la terminal en Linux, y Tmux es una herramienta que vuelve más sencillo utilizar la terminal.

Aunque las ventajas de tmux son varias, principalmente esta frase de la Wiki oficial es la que me convenció:

Work with multiple programs and shells together in one terminal, a bit like a window manager

Tmux es un programa que va a permitirnos utilizar varias programas y shells dentro de una misma terminal.

Por ejemplo podemos usar dentro de un mismo “marco” un fragmento de la pantalla con Bash, otro con Neovim y otro con Nano.

Y de alguna forma este otro apunte también se encuentra relacionado, por el asunto de encajar más programas en una misma pantalla:

• Espacios de trabajo y terminales virtuales en Linux

Instalar Tmux y abrirlo

En este momento estoy utilizando Linux Mint, por lo que para hacer la instalación utilicé el comando:

sudo apt install tmux

Pero este enlace lleva a la documentación para hacer la instalación en otros sistemas operativos

Ahora para empezar a usar Tmux escribo el comando:

tmux new

Tmux tiene una estructura jerárquica

Estoy revisando esto de una forma superficial, pero según entiendo Tmux tiene una estructura jerárquica en niveles. Estos niveles pueden describirse de esta forma:

1. Servidor/cliente (server/client):

Tmux mantiene todo lo que hace dentro de un único proceso, actuando como un servidor que actúa detrás de escena mientras funciona. Luego cada vez que creamos una nueva sesión o usamos un comando, nos conectamos a Tmux como un cliente.

Esta relación server/client es lo que permite algunas de las ventajas del programa, como por ejemplo la posibilidad de usarlo de forma remota y retomarlo en distintos momentos.

Un servidor puede contener multiples sesiones en su interior.

2. Sesión (session):

Una sesión representa un espacio de trabajo. Es un proyecto por ejemplo. Cuándo uso el comando:

tmux new

Lo que estoy haciendo es empezar una nueva sesión. Por ejemplo si quiero crear una sesión llamada “libro” utilizo el comando:

tmux new -s libro

Una misma sesión puede contener múltiples ventanas.

3. Ventana (window):

Una sesión puede tener múltiples ventanas. Las ventanas pueden tener sus propios nombres, y pueden ser modificadas de forma independiente.

Por ejemplo, puedo tener una ventana llamada “ideas” y otra llamada “tareas_pendientes” dentro de la sesión “libro” del ejemplo anterior.

4. Panel (pane):

Una ventana puede contener múltiples paneles en su interior. Cada panel tiene una terminal o programa diferente.

Terminemos de imaginar nuestro ejemplo.

En nuestra sesión llamada “libro” tenemos una ventana llamada “ideas”. Dentro de esa ventana tenemos tres paneles abiertos, uno con Neovim, otro con Bash y otro con Nano. Y en cada panel estoy realizando una tarea distinta.

Tmux se utiliza por medio de comandos y combinaciones del teclado

Hay muchas combinaciones del teclado para este programa, en esto también la experiencia de uso me recuerda mucho a Neovim.

Toda esa información es mucha como para detallarlos en esta entrada, pero podemos encontrar toda la información que necesitamos sobre las combinaciones en este sitio

Tmux tiene una barra de estatus

Tmux tiene una barra de estatus (status bar) en la parte inferior de la pantalla.

Esa barra nos aporta varios datos, por ejemplo el nombre de la sesión y la fecha. El color de la barra puede cambiar.

Otro detalle a tener en cuenta es que podemos modificar los datos que la barra nos muestra.

Tmux tiene diferentes modos de trabajo

Tmux tiene una forma de uso que alterna entre lo que puedo describir como varios modos de trabajo. Y cada uno de esos modos se comporta de una forma diferente. Podemos ir alternando entre estas formas con algunas combinaciones de teclas.

Modo Predeterminado (Default mode)

Me permite interactuar directamente con el texto. El equivalente a “utilizar la terminal” por decirlo de alguna forma.

Modo de selección (choose mode)

Entramos a este modo presionando “Ctrl + b” y luego “w”, o dicho de otra forma:

Ctrl + b w

En este modo podemos seleccionar entre por ejemplo las diferentes ventanas abiertas en la sesión.

Modo de comandos (command mode)

Entramos a este modo presionando:

Ctrl + b  :

El espacio para escribir comandos aparece en el lugar que ocupaba la barra de estatus.

Un comando que puedo escribir por ejemplo es el siguiente, que crea un nuevo panel horizontal:

split-window -h

Conclusión

Con esto le doy un cierre a este apunte, donde cuento mi experiencia al utilizar Tmux.

Espero haber transmitido en el texto de forma sencilla algunas ideas que, de haberlas conocido desde un primer momento, me hubieran facilitado mucho el empezar a usar el programa.

Es algo así como una lista rápida de temas, una vez que conocemos los detalles básicos podemos ampliar nuestro conocimiento con la práctica y con la increíble calidad de todo la documentación que se consigue sobre el tema.

¿Encontraste algún error en el texto? Por favor avisame para que pueda corregirlo.

La seguimos en el próximo apunte.

¿Comentarios o preguntas? Escríbeme tu opinión a: gustavo@apunteimpensado.com

En este nuevo apunte práctico vamos a revisar el generador de sitios estáticos Hugo. Y vamos a hacerlo dentro de nuestra computadora con un sistema operativo Linux.

Pelican, Hugo y Jekyll. Tres herramientas distintas, un sueño de sitios estáticos.

Ya con anterioridad escribí sobre dos de esas herramientas:

• Cómo crear un sitio estático con Jekyll

• Cómo crear un sitio estático con Pelican

Como no quiero dejar de esta serie de apuntes sin terminar, hoy voy a ocuparme de hacer una pequeña introducción sobre Hugo.

Otra cosa interesante que me motiva a completar esta rápida entrada: Pelican se encuentra escrito en Python, Jekyll fue creado con el lenguaje Ruby y Hugo se encuentra escrito con el lenguaje de programación Golang.

Requisitos previos

Todo lo que sigue lo hice guiándome con la documentación oficial de Hugo.

Antes de empezar vamos a necesitar algunos programas extras en la computadora para que todo funcione bien. Estoy utilizando Linux mint al escribir esto, algunos comandos se pueden ajustar para otras distribuciones.

Instalar Git

Git nos va a permitir hacer varias cosas, por ejemplo conseguir el código fuente de Hugo.

Si tengo el administrador de paquetes apt en el sistema puedo conseguir Git con el comando:

sudo apt install git-all

Instalar Go

Necesitamos también el compilador y las librerías de Golang para poder usar el código de Hugo.

Todo lo que sigue supone que no tenemos Go en la computadora. En caso de tenerlo, vamos a necesitar remover el directorio:

/usr/local/go

Tener varias instalaciones de Go en la misma máquina es un tema aparte. Pero en este caso estamos empezando desde cero, por lo que eso no es inconveniente.

Me dirijo a este sitio de descarga oficial de Go y descargo la última versión del lenguaje.

En este caso por ejemplo la última versión es:

go1.23.4.linux-amd64

Entonces descargo ese nuevo archivo “tar.gz” y lo llevo hasta el directorio “/usr/local/”. Voy a necesitar permiso de administración/sudo para hacerlo.

Muevo la terminal hasta el directorio “/usr/local/” donde ahora se encuentra el archivo y luego ejecuto el siguiente comando:

sudo tar -C /usr/local -xzf go1.23.4.linux-amd64.tar.gz

Eso crea el nuevo directorio “Go” con todo lo que necesita el lenguaje para funcionar.

Acto seguido agrego ese nuevo directorio al camino de los archivos ejecutables del sistema con:

export PATH=$PATH:/usr/local/go/bin

Puedo hacer una prueba para comprobar que todo funcionó correctamente con el comando:

go version

Instalar Snap

Para simplificar este y el siguiente paso vamos a necesitar el administrador de paquetes Snap en el equipo.

Si es que no lo tenemos en el sistema, agregamos Snap de esta forma.

En Linux Mint primero tenemos que usar el comando:

sudo mv /etc/apt/preferenc/es.d/nosnap.pref ~/Documents/nosnap.backup

Para mover el archivo “nosnap.pref” que viene dentro del sistema. Esto va a habilitar que podamos usar el programa.

Luego actualizamos con:

sudo apt update

Y terminamos con:

sudo apt install snapd

Y con eso ya tenemos Snap en el equipo.

Si intentamos instalar Snap directamente por medio de “apt” saltando el paso de mover el archivo “nosnap.pref”, vamos a recibir el error:

Package snapd is not available, but is referred to by another package. This may mean that the package is missing, has been obsoleted, or is only available from another source E: Package ‘snapd’ has no installation candidate

Instalar Dart Sass

Entiendo que este lenguaje le permite a Hugo realizar varias tareas dedicadas al estilo CSS mediante el lenguaje Dart.

La instalación de Dart Sass varía un poco dependiendo si lo estamos usando para desarrollar Hugo de forma local, o si lo vamos a usar directamente para producción.

Siendo que ahora estamos haciendo una instalación orientada al desarrollo dentro de nuestra máquina, podemos conseguir Dart Sass con este comando:

sudo snap install dart-sass

Cómo instalar Hugo en un sistema Linux

Con todos los requisitos anteriores cumplidos finalmente podemos agregar Hugo a nuestro equipo.

Ahora bien, existen tres versiones de Hugo: Standard, Extendida y “Extendida para producción”.

Sin detenernos demasiado en los detalles de cada una, vamos a conseguir la versión extendida. Parece una buena opción para nuestro objetivo de hacer desarrollo de forma local.

Hacemos una vez más uso de Snap y utilizamos el comando:

sudo snap install hugo

Y con eso finalmente ya puedo empezar a desarrollar con Hugo.

Puedo conocer la versión con:

hugo version

Cómo crear un primer sitio en Hugo dentro de nuestra máquina

De una forma similar a como ocurre con Pelican y Jekyll, con Hugo podemos tomar un archivo escrito en Markdown para convertirlo rápidamente en un sitio estático.

Por supuesto lo anterior es una simplificación, y cubrir todo el tema desde esta entrada rápida sería muy difícil.

Pero para no terminar este apunte sin tener algo terminado, esto es lo que podemos hacer para crear un primer sitio dentro de nuestra computadora con una de las muchas planillas que este programa ofrece.

Voy a hacer un directorio dedicado dentro de Home para guardar mis proyectos. En ese nueva carpeta hago:

hugo new site nuevo-blog

Mi sitio en este caso se llama “nuevo-blog”, y Hugo va a crear un nuevo árbol de directorios dentro de esa carpeta con todo lo necesario para más tarde exportar el sitio terminado.

Ahora entro en la carpeta del proyecto con:

cd nuevo-blog

E inicio un repositorio de Git:

init git

Aunque podemos elegir un tema para nuestro sitio de entre las múltiples opciones ya disponibles, pero la documentación recomienda empezar con el tema “Ananke”.

Para eso utilizamos este comando:

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

Acto seguido modificados el documento “hugo.toml”, que encontramos en el directorio de nuestro proyecto. Dentro de ese documento agregamos esta linea para establecer el tema Ananke como el predeterminado.

Lo hacemos con este comando:

echo "theme = 'ananke'" >> hugo.toml

Solamente nos falta comenzar el server de desarrollo para poder visitar el sitio desde nuestro equipo. Para eso utilizamos el comando:

hugo server --buildDrafts

Y podemos entrar al sitio poniendo en el navegador esta dirección:

http://localhost:1313/

Para terminar presionamos “Ctrl+C” en la terminal, y de esa forma dejamos de servir el sitio.

Siguiendo estos pasos podemos cambiar el tema e iniciar nuevos proyectos, solamente nos falta agregar nuevas páginas y entradas.

Conclusión

Con esto termina este apunte revisando cómo empezar con el generador de sitios estáticos Hugo en Linux

En mi breve experiencia probando Jekyll, Pelican y Hugo, creo que de las tres opciones prefiero Pelican. Pero creo que es solamente porque se encuentra escrito en Python, y estoy un poco más acostumbrado a ese lenguaje.

¿Encontraste algún error en la publicación? ¿Encontraste algo que puedo mejorar? Me gustaría conocer tu opinion, escribime un mensaje o un correo electrónico sobre el tema.

La seguimos en el próximo apunte.

¿Comentarios o preguntas? Escríbeme tu opinión a: gustavo@apunteimpensado.com

En este breve apunte rápido voy a estar revisando dos conceptos que van a mejorar y profundizar el uso que le damos a nuestro sistema operativo Linux: qué son los espacios de trabajo y las terminales virtuales en Linux.

Se trata de temas que solamente cobran sentido cuándo los utilizamos directamente, por lo que es importante practicarlos mientras los revisamos.

¿Qué son los espacios de trabajo (workspaces) en Linux?

Digamos que tenemos que escribir un ensayo para la universidad. Tenemos abierto en el escritorio de nuestra computadora un programa para escribir, varios documentos de los que estamos estudiando y un navegador de internet con múltiples pestañas para ayudarnos a investigar.

Pero en paralelo estamos realizando otro trabajo, estamos editando un video. Tenemos abierto un programa de edición y un programa para editar imágenes, además de varias carpetas desde dónde vamos buscando el material de montaje.

Hasta ahora describí dos tareas posibles que podemos realizar en la computadora. Esas dos tareas ocupan lugar del mismo escritorio, conviven en la misma barra de tareas, y simplemente alternamos entre los programas según los necesitamos.

Se puede notar que tenemos que hacer un esfuerzo extra para poder organizarnos entre tanta mezcla de información dentro de un número limitado de pantallas… ¿Podemos dividir esas tareas para que cada una ocupe su propio “ambiente” en el escritorio?

En esto es donde entra la idea de espacios de trabajo o “workstations”, una forma gráfica de poder hacer multitareas en Linux.

Alternar entre espacios de trabajo es similar a utilizar varios monitores dentro de un mismo monitor. Es una forma de hacer que cada espacio se aparezca más ordenado. Es como usar varios escritorios virtuales al mismo tiempo.

Siguiendo el ejemplo anterior, podemos utilizar uno de los espacios de trabajo que ofrece el sistema para agrupar todo lo que tiene que ver con la actividad de escribir nuestro ensayo universitario. Y luego otro escritorio virtual va a ocupar todo lo que tiene que ver con la tarea de edición de video.

Este aislamiento entre espacios de trabajo no es total, no se crean compartimientos separados. Los recursos que se utilizan son iguales. Es diferente a crear máquinas virtuales, donde la maquina anfitriona puede correr un sistema huésped en su interior. Tampoco estamos creando contenedores.

Los escritorios virtuales nos sirven para poder organizar múltiples tareas en una misma computadora, sin necesidad de llenar todo dentro de un mismo escritorio. Al parecido a lo que haríamos si pudiéramos asignarle un monitor a cada conjunto de programas que estamos usando.

¿Cómo cambiar entre espacios de trabajo?

Bueno, la forma práctica de usar los escritorios virtuales es un poco diferente entre cada versión del sistema operativo Linux.

Pero para completar estos ejemplos voy a referirme a Linux Mint.

Este sistema operativo nos permite desde un principio alternar entre cuatro workstations.

Un atajo para moverme entre estos espacios de trabajo es el de presionar en el teclado:

Alt + F1

Se me va a mostrar en pantalla partida una representación gráfica de cada escritorio y lo que está ocurriendo en cada uno.

La otra opción que tengo en Mint es la de mantener presionados “Ctrl + Alt” y luego moverme entre los distintos espacios con las flechas direccionales izquierda/derecha/arriba/abajo.

Pero en resumen, cada sistema operativo puede ofrecer su propia forma de alternar entre estos espacios de trabajo virtuales. Lo más importante es saber que existen y que podemos utilizar los espacios para organizarnos efectivamente.

¿Qué son las terminales virtuales (virtual terminals) en Linux?

Lo primero que quiero mencionar es si presionamos “Ctrl + Alt” en el teclado, y luego alternamos entre F1 y F6 vamos a poder saltar entre las diferentes terminales virtuales.

Menciono esto porque si sos como yo, probablemente tu primer acercamiento a este tema ocurrió cuándo apretaste este atajo sin saber y luego no pudiste salir de la pantalla de la nueva terminal virtual.

Para resumir hasta el momento, sabemos que si presiono las teclas:

Ctrl + Alt + F1

Se aparece una terminal llamada “tty1” que ocupa toda la pantalla y me pide una contraseña.

Por otra parte si ahora presiono:

Ctrl + Alt + F7

Vuelvo de nuevo al escritorio. ¿Qué es lo que está ocurriendo?

Según entiendo si yo abro una terminal dentro del “escritorio”, estoy abriendo esa nueva terminal dentro de la interfaz gráfica del sistema operativo. La terminal es emulada dentro de la parte gráfica, y la parte gráfica al mismo tiempo esta siendo ejecutada por el sistema.

Por otra parte al presionar “Ctrl + Alt + F1” se me está presentando una terminal que funciona por fuera de la parte gráfica. Y esta terminal no es un programa, es un entorno de trabajo completo. Se trata de una sesión independiente de la consola que trabaja con el sistema.

Lo importante de todo esto es que puedo usar estas diferentes terminales para realizar diferentes tareas en paralelo. Puedo usar una de esas terminales virtuales para corregir una pieza de código, otra para modificar la configuración de un programa y otra terminal para escribir un texto.

De alguna forma similar al caso de los diferentes espacios de trabajo, puedo usar las distintas terminales virtuales para acomodar en una misma pantalla las diferentes tareas que estoy realizando.

¿Qué credenciales necesito para acceder a una terminal virtual?

Bien, antes dije que utilicé este atajo:

Ctrl + Alt + F1

Y se me apareció una terminal con el mensaje:

Linux Mint 21.3 Virginia Computer tty1computer login:

Bueno, lo que tenemos que usar es el nombre de mi propia cuenta y la contraseña. En mi caso algo como:

computer login: gus password:

Pero hay dos cosas que tenemos que tener en cuenta:

• 1: Si nuestra contraseña tiene números en su interior, no tenemos que usar el teclado numérico para escribir esos números. Tenemos que usar los números de la parte “izquierda” del teclado para no tener errores.

• 2: puede parecer que la contraseña no se está escribiendo, pero es una función de seguridad del sistema para ocultar el número de caracteres del password. Al presionar enter va a funcionar de todas formas, aunque nada se muestre escrito luego de ingresar el password.

Conclusión

Con esto le doy un cierre al apunte referido a qué son los espacios de trabajo y las terminales virtuales en Linux.

De esta forma pudimos cubrir dos temas muy útiles en una sola entrada.

Es importante volver a mencionar que estoy haciendo todo lo posible para explicar el tema con mis propias palabras y según lo entiendo. Puedo equivocarme, te pido por favor que me avises si encontraste algún error en el texto para poder repararlo. Y si no pude explicarme de la mejor forma, avísame con un mensaje para que pueda mejorar el material.

Te recomiendo además esta otra publicación, dónde reviso más en profundidad algunos detalles de la terminal en Linux.

La seguimos en el próximo apunte.

¿Comentarios o preguntas? Escríbeme tu opinión a: gustavo@apunteimpensado.com

En este apunte de título más complicado de lo necesario vamos a revisar cómo estudiar programación orientada a objetos mientras creamos motion graphics en Processing.

Para ejemplificar la explicación vamos a utilizar Processing, un entorno de desarrollo que funciona muy bien para crear imágenes.

Ya escribí en otra oportunidad sobre Processing, por lo que si te interesa aprender más este es el enlace a ese otro apunte.

Vale mencionar que Processing utiliza el lenguaje “Java”, que es un lenguaje de programación orientado a objetos. Python es otro lenguaje orientado a objetos que es muy famoso.

¿Cuál es el objetivo de la entrada? Vamos a crear un sencillo video de “gráficos en movimiento” utilizando código en Processing, y esos gráficos van a tomar el lugar de clases y objetos en la ya tan mencionada “programación orientada a objetos”.

Una explicación sin explicación

Este tema que nos entretiene puede ser comprendido por una serie de inteligentes explicaciones graciosamente desarrolladas. Lamentablemente esas explicaciones de ser escritas por alguien con poca experiencia pueden resultar en algo muy confuso y aburrido. Soy una persona con poca experiencia. ¿Es este el final de este apunte?

No, este no es el final de este texto. El apunte sigue adelante.

Tengo que decir que estamos de suerte, porque no tengo muchas ganas de escribir y no estoy seguro de saber lo suficiente como para poder escribir una explicación coherente.

Lo que voy a hacer en lugar de todo eso es crear una explicación que se construye con una serie de ejemplos de código que sumados en conjunto van a funcionar como una especie de explicación completa.

Para ser honesto, la mayoría de las cosas se explican menor cuándo las ponemos en práctica. Y este es uno de esos temas que se explican mejor en la forma de una epifanía. En un momento no sabemos lo que es la programación orientada a objetos porque no necesitamos de ella, y al otro encontramos una oportunidad para usar sus ventajas y tenemos una relevación que explica qué es y para qué sirve.

Entonces advierto que esta no va a ser la explicación que mejor se ajuste a los conceptos teóricos contemporáneos. Pero al terminar de leerla vas a encontrar que pudiste utilizar la idea para crear algo valioso, algo que luego vas a poder seguir utilizando en otro tipo de proyectos.

Entonces sin más excusas…

Cómo crear un sencillo separador de video usando motion graphics en Processing

Processing nos sirve para crear imágenes y videos. En esta oportunidad me interesa que hagamos un sencillo video, un video que puede servir como una presentación para un proyecto (digamos para un proyecto en las redes) o como un separador por ejemplo para un video más grande.

El video va a estar compuesto por una serie de placas de colores que suben y bajan en forma de cortina, descubriendo el título del proyecto.

Paso 1: un proyecto, muchos capas de color

Lo primero que vamos a hacer es crear un sketch con las dimensiones de la pantalla.

Siendo que queremos hacer un video, vamos a crear la pantalla
en tamaño HD (1280 x 720) y vamos a dejarla de color negro. Por supuesto es posible ajustar estos parámetros según lo que necesites en el momento.

Acto seguido vamos a crear una nueva “capa” por llamarla de algún modo, un color solido naranja que cubra toda la pantalla.

El primer código nos queda de esta forma:

void setup() {
  size(1280, 720);
  background(0);
}

void draw() {
  fill(255, 128, 0); // Color naranja
  rect(0, 0, width, height); // Rectangulo que cubre la pantalla
}

Por ahora nuestro primer rectángulo creado con la función “rect()” tiene algunas características definidas. Por ejemplo tiene un color con la notación (255, 128, 0).

Y el rectángulo tiene una posición en la pantalla determinada por (0,0). Esto quiere decir que la parte superior izquierda del rectángulo coincide con la coordenada del ángulo superior izquierdo de la pantalla. Esto es en la forma (x, y), de una forma similar a la de un plano cartesiano.

Los parámetros “width, height” definen el ancho y el alto del rectángulo. Escritos de esta forma indican que nuestra capa tiene que copiar el tamaño de la pantalla.

Este rectángulo naranja es el primero de los que vamos a usar para crear nuestra cortina animada de motion graphics.

¿Por qué no agregar algunos nuevos colores?

Revisemos este nuevo ejemplo de código:

void setup() {
  size(1280, 720);
  background(0);
}

void draw() {
  fill(255, 128, 0); // Color naranja
  rect(0, 0, width, height); //  Posición del color naranja

  fill(0, 0, 255); // Color Azul
  rect(0, 0, width, height); // Posición del azul

  fill(255, 0, 0); // Color rojo
  rect(0, 0, width, height); // Datos de posición rojo

  fill(0, 255, 0); // Color Verde
  rect(0, 0, width, height); // Posición del color verde
}

Ahora tenemos cuatro rectángulos en total. Pero tenemos que notar algunas cosas:

1- Cada capa se encuentra por debajo de la anterior. La última de la lista es que primero aparece, por eso si ejecutamos el código vamos a ver la pantalla de color verde. Y si borramos la capa verde, va a aparecer la siguiente de color rojo y así sucesivamente.

2- Las capas son difíciles de identificar. Las capas no tienen nombres que las separen, y lo único que nos dice fácilmente lo que hace cada na es el comentario con el que estamos acompañándolas.

3- Las capas todavía no se mueven lo que hace a un video bastante aburrido.

¿Cómo podemos solucionar todo esto? ¿Cómo podemos organizar mejor el proyecto? Aquí es donde entra el momento de la programación orientada a objetos.

Paso 2: una nueva clase de rectángulo

Revisemos este nuevo código, expandiendo nuestro anterior ejemplo:

class Rectangulo {
  int x;
  int y;
  int width;
  int height;
  color fillColor;

  Rectangulo(int _x, int _y, int _width, int _height, color _fillColor) {
    x = _x;
    y = _y;
    width = _width;
    height = _height;
    fillColor = _fillColor;
  }

  void draw() {
    fill(fillColor);
    rect(x, y, width, height);
  }

}

Rectangulo naranjaCapa;
Rectangulo azulCapa;
Rectangulo rojoCapa;
Rectangulo verdeCapa;

void setup() {
  size(1280, 720);

  // Crear objetos de la clase Rectangulo
  naranjaCapa = new Rectangulo(0, 0, width, height, color(255, 165, 0));
  azulCapa = new Rectangulo(0, 0, width, height, color(0, 0, 255));
  rojoCapa = new Rectangulo(0, 0, width, height, color(255, 0, 0));
  verdeCapa = new Rectangulo(0, 0, width, height, color(0, 255, 0));

}

void draw() {
  background(0);

  naranjaCapa.draw();
  azulCapa.draw();
  rojoCapa.draw();
  verdeCapa.draw();

}

Bueno, en un primer momento todo este código parece mucho más complejo que el primero que estuvimos revisando. Pero si lo ejecutamos vamos a notar que tenemos el mismo resultado. Una capa verde cubre la pantalla.

Sin embargo es en este punto dónde empezamos a descubrir la idea de la programación orientada a objetos.

Antes necesitábamos crear cada rectángulo por separado, de esta forma:

fill(0, 0, 255); // Color Azulrect(0, 0, width, height); // Posición del azul

Pero ahora estamos creando una clase o “class”.

Al definir una clase podemos declarar las características, los datos y las funciones que a nuestro parecer tiene que tener un rectángulo. Se trata del “plano” del que luego vamos a construir los objetos.

Pero podríamos definir clases para cualquier tipo de objeto que utilicemos en el futuro, coincide en este caso que nuestra primera clase podemos entenderla de forma gráfica como una figura geométrica.

Realmente una clase puede representar cualquier cosa, como por ejemplo un concepto dentro de una base de datos. Pero volvamos a nuestra clase rectángulo.

class Rectangulo {
  int x;
  int y;
  int width;
  int height;
  color fillColor;

  Rectangulo(int _x, int _y, int _width, int _height, color _fillColor) {
    x = _x;
    y = _y;
    width = _width;
    height = _height;
    fillColor = _fillColor;
  }

  void draw() {
    fill(fillColor);
    rect(x, y, width, height);
  }

}

El manual de referencias de Processing dice que el nombre de una clase es escrito en Mayúscula, para diferenciarla de otras variables. En nuestro
caso lo definimos como “class Rectangulo”.

Luego definimos las propiedades del rectángulo, por ejemplo que su alto y ancho son números enteros:

int x;int y;int width;int height;color fillColor;

Acto seguido construimos la forma que va a tener el nuevo objeto cuando llamemos al objeto:

Rectangulo(int _x, int _y, int _width, int _height, color _fillColor) {    x = _x;    y = _y;    width = _width;    height = _height;    fillColor = _fillColor;  }

Y luego creamos un método, una función que es parte de esta clase:

void draw() {    fill(fillColor);    rect(x, y, width, height);  }

Esa función define la forma en que el rectángulo va a dibujarse en la pantalla.

Con eso terminamos de crear la clase, que podemos considerar como el plano o la serie de instrucciones que definen nuestro objeto. Recordemos que en este caso estamos definiendo las características que queremos agregarle a la clase rectángulo.

¿Dónde empezamos a utilizar a los objetos en todo esto?

Ahora dentro del código principal le asignamos un nombre diferente a cada capa como variable, y creamos nuevos objetos a partir de la serie de características que agregamos en la clase:

Rectangulo naranjaCapa;
Rectangulo azulCapa;
Rectangulo rojoCapa;
Rectangulo verdeCapa;

void setup() {
  size(1280, 720);

  // Crear objetos de la clase Rectangulo
  naranjaCapa = new Rectangulo(0, 0, width, height, color(255, 165, 0));
  azulCapa = new Rectangulo(0, 0, width, height, color(0, 0, 255));
  rojoCapa = new Rectangulo(0, 0, width, height, color(255, 0, 0));
  verdeCapa = new Rectangulo(0, 0, width, height, color(0, 255, 0));

}

Esto nos permite que cada capa de rectángulo pueda manipularse por separado.

Los objetos en movimiento

Ahora queremos pasar a la parte de “movimiento” de “gráficos en movimiento”.

Esta es la nueva versión de nuestro código:

class Rectangulo {
  int x;
  int y;
  int width;
  int height;
  color fillColor;
  float velocidad;

  Rectangulo(int _x, int _y, int _width, int _height, color _fillColor, float _velocidad) {
    x = _x;
    y = _y;
    width = _width;
    height = _height;
    fillColor = _fillColor;
    velocidad = _velocidad;
  }

  void draw() {
    fill(fillColor);
    rect(x, y, width, height);
  }

  void update() {
    y += velocidad;
  }
}

Rectangulo naranjaCapa;
Rectangulo azulCapa;
Rectangulo rojoCapa;
Rectangulo verdeCapa;

void setup() {
  size(1280, 720);

  // Crear objetos de la clase Rectangulo
  naranjaCapa = new Rectangulo(0, 0, width, height, color(255, 165, 0), 4.0);
  azulCapa = new Rectangulo(0, 0, width, height, color(0, 0, 255), -6.0);
  rojoCapa = new Rectangulo(0, 0, width, height, color(255, 0, 0), 9.0);
  verdeCapa = new Rectangulo(0, 0, width, height, color(0, 255, 0), 12.0);

}

void draw() {
  background(0);

  naranjaCapa.update();
  azulCapa.update();
  rojoCapa.update();
  verdeCapa.update();

  naranjaCapa.draw();
  azulCapa.draw();
  rojoCapa.draw();
  verdeCapa.draw();

}

Lo que hicimos fue agregar una nueva variable llamada velocidad. Luego la variable de posición “Y” se modifica cada vez que un nuevo cuadro es dibujado:

Esto quiere decir que si la variable velocidad es “2.0”, cada vez que un nuevo plano es dibujado el rectángulo se mueve dos puntos hacia abajo en el eje “Y”. Por otra parte si la velocidad fuera “-2.0” el rectángulo se va a mover dos posiciones hacia arriba cada vez que es dibujado.

Con esto conseguimos crear un efecto de cortina que “sube y baja” que puede servirnos para presentar un proyecto.

Más objetos en movimiento

Por supuesto también podemos crear una nueva serie de objetos en base a la clase que creamos antes. Esta nueva serie de rectángulos va a ser llamada luego, para cerrar la introducción.

El código nos queda de esta forma:

// Este código de Processing sube y baja rectángulos de colores en forma de cortina

class Rectangulo {
  int x;
  int y;
  int width;
  int height;
  color fillColor;
  float velocidad;

  Rectangulo(int _x, int _y, int _width, int _height, color _fillColor, float _velocidad) {
    x = _x;
    y = _y;
    width = _width;
    height = _height;
    fillColor = _fillColor;
    velocidad = _velocidad;
  }

  void draw() {
    fill(fillColor);
    rect(x, y, width, height);
  }

  void update() {
    y += velocidad;
  }
}

Rectangulo naranjaCapa;
Rectangulo azulCapa;
Rectangulo rojoCapa;
Rectangulo verdeCapa;

Rectangulo amarilloCapa;
Rectangulo cyanCapa;
Rectangulo extra_naranjaCapa;

int startTime; // Variable para el tiempo de comienzo

void setup() {
  size(1280, 720);

  naranjaCapa = new Rectangulo(0, 0, width, height, color(255, 165, 0), 4.0);
  azulCapa = new Rectangulo(0, 0, width, height, color(0, 0, 255), -6.0);
  rojoCapa = new Rectangulo(0, 0, width, height, color(255, 0, 0), 9.0);
  verdeCapa = new Rectangulo(0, 0, width, height, color(0, 255, 0), 12.0);

  amarilloCapa = new Rectangulo(0, 720, width, height, color(255, 255, 50), -11.0);
  cyanCapa = new Rectangulo(0, 720, width, height, color(0, 255, 255), -8.0);
  extra_naranjaCapa = new Rectangulo(0, 720, width, height, color(245, 145, 0), -6.0);


  // Comenzar a guardar la variable de tiempo
  startTime = millis();
}

void draw() {
  background(0);

  naranjaCapa.update();
  azulCapa.update();
  rojoCapa.update();
  verdeCapa.update();

  if (millis() - startTime >= 7000) {

    amarilloCapa.update();
    amarilloCapa.draw();
    cyanCapa.update();
    cyanCapa.draw();
    extra_naranjaCapa.update();
    extra_naranjaCapa.draw();

  }

  naranjaCapa.draw();
  azulCapa.draw();
  rojoCapa.draw();
  verdeCapa.draw();
}

Haciendo esto le sacamos un poco más de jugo a nuestra clase de Rectángulos, agregando nuevos objetos.

Solamente nos falta agregarle algo de texto al sketch para cumplir nuestro objetivo de un sencillo separador en video de motion graphics.

Un objeto de texto

Esta es casi la última revisión del código:

// Este código de Processing sube y baja rectángulos de colores en forma de cortina

class Titulo {
  float x, y;
  String contenido;
  float fade = 255;

  Titulo(float x, float y, String contenido) {
    this.x = x;
    this.y = y;
    this.contenido = contenido;
  }

  void display() {
    fill(255, fade);
    textSize(70);
    textAlign(CENTER, CENTER);
    text(contenido, x, y);
    fade -= 0.5;
    if (fade <= 0) {
      fade = 0;
    }
  }
}

class Rectangulo {
  int x;
  int y;
  int width;
  int height;
  color fillColor;
  float velocidad;

  Rectangulo(int _x, int _y, int _width, int _height, color _fillColor, float _velocidad) {
    x = _x;
    y = _y;
    width = _width;
    height = _height;
    fillColor = _fillColor;
    velocidad = _velocidad;
  }

  void draw() {
    fill(fillColor);
    rect(x, y, width, height);
  }

  void update() {
    y += velocidad;
  }
}

Titulo miFrase;

Rectangulo naranjaCapa;
Rectangulo azulCapa;
Rectangulo rojoCapa;
Rectangulo verdeCapa;

Rectangulo amarilloCapa;
Rectangulo cyanCapa;
Rectangulo extra_naranjaCapa;

int startTime; // Variable para el tiempo de comienzo

void setup() {
  size(1280, 720);

  miFrase = new Titulo(width/2, height/2, "TÍTULO DEL PROYECTO");

  naranjaCapa = new Rectangulo(0, 0, width, height, color(255, 165, 0), 4.0);
  azulCapa = new Rectangulo(0, 0, width, height, color(0, 0, 255), -6.0);
  rojoCapa = new Rectangulo(0, 0, width, height, color(255, 0, 0), 9.0);
  verdeCapa = new Rectangulo(0, 0, width, height, color(0, 255, 0), 12.0);

  amarilloCapa = new Rectangulo(0, 720, width, height, color(255, 255, 50), -11.0);
  cyanCapa = new Rectangulo(0, 720, width, height, color(0, 255, 255), -8.0);
  extra_naranjaCapa = new Rectangulo(0, 720, width, height, color(245, 145, 0), -6.0);

  // Comenzar a guardar la variable de tiempo
  startTime = millis();
}

void draw() {
  background(0);


  miFrase.display();

  naranjaCapa.update();
  azulCapa.update();
  rojoCapa.update();
  verdeCapa.update();

  if (millis() - startTime >= 7000) {

    amarilloCapa.update();
    amarilloCapa.draw();
    cyanCapa.update();
    cyanCapa.draw();
    extra_naranjaCapa.update();
    extra_naranjaCapa.draw();

  }

  naranjaCapa.draw();
  azulCapa.draw();
  rojoCapa.draw();
  verdeCapa.draw();
}

De la misma forma que habíamos hecho antes, ahora creamos una nueva clase llamada “Titulo”.

class Titulo {
  float x, y;
  String contenido;
  float fade = 255;

  Titulo(float x, float y, String contenido) {
    this.x = x;
    this.y = y;
    this.contenido = contenido;
  }

  void display() {
    fill(255, fade);
    textSize(70);
    textAlign(CENTER, CENTER);
    text(contenido, x, y);
    fade -= 0.5;
    if (fade <= 0) {
      fade = 0;
    }
  }
}

Entre las características que le dimos a esa clase está la habilidad de desvanecer el texto poco a poco, registrando el cambio de forma similar a la forma en que fuimos cambiando la posición de los rectángulos en el espacio.

Con el título agregado el separador de video toma una forma. Pero lo importante es poder seguir utilizando esta herramienta de clases y objetos para nuevos proyectos de programación.

Una clase de una clase: herencias en los objetos

Otra de las características importantes de la programación orientada a objetos es la posibilidad de reutilizar las clases por medio de hacer una inheritance o una “herencia”.

En nuestro código tenemos la siguiente clase llamada “Rectángulo:”

class Rectangulo {
  int x;
  int y;
  int width;
  int height;
  color fillColor;
  float velocidad;

  Rectangulo(int _x, int _y, int _width, int _height, color _fillColor, float _velocidad) {
    x = _x;
    y = _y;
    width = _width;
    height = _height;
    fillColor = _fillColor;
    velocidad = _velocidad;
  }

  void draw() {
    fill(fillColor);
    rect(x, y, width, height);
  }

  void update() {
    y += velocidad;
  }
}

Si lo necesitamos podemos crear lo que puede definirse como una clase diferente a partir de una clase ya existente. El resultado va a ser una nueva clase, que referencia datos de la clase a la que hereda.

Las dos clases van a convivir al mismo tiempo, y eso nos permite ahorrarnos repetir información. Los detalles particulares sobre cómo se maneja este asunto de inheritance, y todo el asunto de clases y objetos en general, depende de cada programa. Pero sigamos con la parte práctica, dedicada a Processing y Java.

A partir de la clase “Rectangulo” voy a crear una nueva clase llamada “Cierre”:

class Cierre extends Rectangulo {
  float velocidadY;
  boolean stopYMovement; // Variable que decide si el rectangulo se mueve o no

  Cierre(int _x, int _y, int _width, int _height, color _fillColor, float _velocidadY) {
    super(_x, _y, _width, _height, _fillColor, 2.0);
    velocidadY = _velocidadY;
  }

  void update() {
    if (!stopYMovement) {
        y += velocidadY; // Modifica la velocidad revisando el eje y

        // Revisa si el eje y llega a 0
        if (y <= 0) {
            y = 0;                // Detiene el movimiento en posición cero
                   }
    }

    super.update(); // Actualiza desde la calse heredada.
}

}

Podemos leer que dice que “la clase”Cierre” extiende la clase “Rectangulo”“.

Nuestra nueva clase cierre retiene las mismas características que antes formaban nuestras capas rectangulares de colores. La diferencia es que en
esta nueva versión heredada la forma de revisar la posición en el eje de “Y” es diferente. Siendo que vamos a usar esta imagen de cierre para nuestro video, queremos que la capa deje de moverse al llegar a la posición cero.

De esta forma vamos a tener una capa solida que nos va a permitir generar un video Gif animado que hace un bucle sin que podamos notar dónde empieza o termina.

El código completo es el siguiente:

// Este código de Processing sube y baja rectángulos de colores en forma de cortina

class Titulo {
  float x, y;
  String contenido;
  float fade = 255;

  Titulo(float x, float y, String contenido) {
    this.x = x;
    this.y = y;
    this.contenido = contenido;
  }

  void display() {
    fill(255, fade);
    textSize(70);
    textAlign(CENTER, CENTER);
    text(contenido, x, y);
    fade -= 0.5;
    if (fade <= 0) {
      fade = 0;
    }
  }
}

class Rectangulo {
  int x;
  int y;
  int width;
  int height;
  color fillColor;
  float velocidad;

  Rectangulo(int _x, int _y, int _width, int _height, color _fillColor, float _velocidad) {
    x = _x;
    y = _y;
    width = _width;
    height = _height;
    fillColor = _fillColor;
    velocidad = _velocidad;
  }

  void draw() {
    fill(fillColor);
    rect(x, y, width, height);
  }

  void update() {
    y += velocidad;
  }
}

class Cierre extends Rectangulo {
  float velocidadY;
  boolean stopYMovement; // Variable que decide si el rectangulo se mueve o no

  Cierre(int _x, int _y, int _width, int _height, color _fillColor, float _velocidadY) {
    super(_x, _y, _width, _height, _fillColor, 2.0);
    velocidadY = _velocidadY;
  }

  void update() {
    if (!stopYMovement) {
        y += velocidadY; // Modifica la velocidad revisando el eje y

        // Revisa si el eje y llega a 0
        if (y <= 0) {
            y = 0;                // Detiene el movimiento en posición cero
                   }
    }

    super.update(); // Actualiza desde la calse heredada.
}

}

Titulo miFrase;

Rectangulo naranjaCapa;
Rectangulo azulCapa;
Rectangulo rojoCapa;
Rectangulo verdeCapa;

Rectangulo amarilloCapa;
Rectangulo cyanCapa;
Rectangulo extra_naranjaCapa;

Cierre nuevoVerdeCapa;

void setup() {
  size(1280, 720);

  miFrase = new Titulo(width/2, height/2, "TÍTULO DEL PROYECTO");

  naranjaCapa = new Rectangulo(0, 0, width, height, color(255, 165, 0), 4.0);
  azulCapa = new Rectangulo(0, 0, width, height, color(0, 0, 255), -6.0);
  rojoCapa = new Rectangulo(0, 0, width, height, color(255, 0, 0), 9.0);
  verdeCapa = new Rectangulo(0, 0, width, height, color(0, 255, 0), 12.0);

  amarilloCapa = new Rectangulo(0, 720, width, height, color(255, 255, 50), -12.0);
  cyanCapa = new Rectangulo(0, 720, width, height, color(0, 255, 255), -11.0);
  extra_naranjaCapa = new Rectangulo(0, 720, width, height, color(245, 145, 0), -10.0);

  nuevoVerdeCapa = new Cierre(0, 720, width, height, color(0, 255, 0), -9.0);

}

int targetFrames = 300;

void draw() {
  background(0);

  miFrase.display();

  naranjaCapa.update();
  azulCapa.update();
  rojoCapa.update();
  verdeCapa.update();

  naranjaCapa.draw();
  azulCapa.draw();
  rojoCapa.draw();
  verdeCapa.draw();

  if (frameCount >= targetFrames) {

    amarilloCapa.update();
    amarilloCapa.draw();
    cyanCapa.update();
    cyanCapa.draw();
    extra_naranjaCapa.update();
    extra_naranjaCapa.draw();
    nuevoVerdeCapa.update();
    nuevoVerdeCapa.draw();

  }

// saveFrame("frames/frame-####.png");

}

Conclusión

Con esto le doy un cierre a este apunte dónde intenté explicar cómo estudiar programación orientada a objetos mientras creamos motion graphics en Processing.

Hice todo lo posible por hacer el texto lo más breve posible, sin omitir detalles de lo que entiendo del tema.

¿Hay algo que pueda mejorar de mi explicación? ¿Encontraste algún error en los ejemplos? Me gustaría conocer tu opinion en los comentarios, o por medio de un correo electrónico en mi dirección que se encuentra en el menú de “contacto”.

La seguimos en el próximo apunte.

¿Comentarios o preguntas? Escríbeme tu opinión a: gustavo@apunteimpensado.com

En este apunte rápido voy a revisar cómo cambiar el orden de arranque con GRUB en Linux. Esto va a permitirnos elegir con qué sistema operativo inicia la computadora cuándo levanta.

GRUB en inglés quiere decir Grand Unified Bootloader, lo que puede traducirse por “Cargador de Arranque Unificado”, y es un programa que funciona entre otras cosas como cargador de arranque para Linux.

Ese párrafo anterior no dice mucho. A los efectos prácticos, digamos que en nuestra máquina conviven varios sistemas operativos. Al momento de iniciar la computadora, GRUB nos da una ventana de tiempo para elegir cuál de esos sistemas operativos va a utilizar.

De esa lista de sistemas para elegir, siempre hay una opción que aparece como la principal. En el texto que sigue vamos a modificar esa primera opción, para que siempre arranque primero el sistema que queremos.

Lo más importante es que podemos hacer todo esto haciendo algunas pocas modificaciones en unos archivos de texto.

Cómo cambiar el orden de inicio en GRUB

Los siguientes pasos cubre lo que necesitamos hacer.

Cómo conocer las distintas opciones de arranque

Para conocer las opciones de disco de arranque y su orden utilizo el comando:

awk -F\' '/^menuentry/ {print "Index=" count++ ", Menu Entry: " $2} /^submenu/ {print "Index=" count++ ", Submenu: " $2}' count=0 /boot/grub/grub.cfg

Voy a recibir una respuesta similar a esta:

Index=0, Menu Entry: Linux Mint 21.3 CinnamonIndex=1, Submenu: Advanced options for Linux Mint 21.3 CinnamonIndex=2, Menu Entry: Ubuntu 22.04 LTS Jammy Jellyfish (on /dev/sda3)Index=3, Submenu: Advanced options for Ubuntu 22.04 LTS Jammy Jellyfish (on /dev/sda3)Index=4, Menu Entry: UEFI Firmware Settings

La opción de “índice=0” es la primera opción, la que empieza marcada por default. A mi me interesa cambiar por la opción de “índice=2”.

Cómo cambiar la opción de arranque

Luego uso este comando para entrar al archivo que necesito modificar:

sudo nano /etc/default/grub

Y modifico la linea:

GRUB_DEFAULT=0

Por el número de arranque que quiero que sea el primero, en mi caso es el representado por el número 2 y queda:

GRUB_DEFAULT=2

Luego de guardar el cambio, lo actualizo con:

sudo update-grub

Ahora puedo reiniciar la computadora, y el disco marcado va a ser el que se selecciona primero.

¿Cómo dar más tiempo al menú de Grub al iniciar la máquina?

Puedo cambiar el número de segundos que la ventana de Grub me da para cambiar de opción alterando esta entrada:

GRUB_TIMEOUT=10

En ese caso “10” quiere decir que las opciones van a esperarme 10 segundos. Puedo agregar más o menos tiempo. Si lo marco en “0”, GRUB selecciona la opción inmediatamente.

Conclusión:

Con esto le doy un cierre a este apunte rápido y bastante practico para modificar el sistema operativo de arranque con GRUB en Linux.

Seguramente existen otras opciones para conseguir el mismo resultado. Pero escribí esta entrada mientras intentaba modificar esto, y esta alternativa consiguió el objetivo.

¿Encontraste algún error en el material? ¿Te resultó de utilidad? Me gustaría leer tus opiniones, por medio de comentarios o algún correo electrónico.

La seguimos en el próximo apunte.

¿Comentarios o preguntas? Escríbeme tu opinión a: gustavo@apunteimpensado.com

En este nuevo apunte voy a estudiar los fundamentos de HTML.

¿Por qué aprender sobre HTML ahora? Bueno, realmente no hay ninguna mala oportunidad para empezar a aprender algo. Todo es nuevo cuándo no conocemos cómo funciona.

Pero principalmente, encuentro dos ventajas para estudiar un poco de HTML:

1- No tiene muchos requerimientos para empezar. Necesito solamente tener un editor de texto sin formato para crear el documento y un navegador de internet para mostrarme los resultados. Solo con eso ya puedo empezar a crear cosas nuevas.

2- Incluso si parece difícil al principio, muchas partes de sus sintaxis se repiten una y otra vez. Luego de un poco de práctica es sencillo entender lo que estamos haciendo incluso antes de revisarlo en el navegador.

Y otro detalle importante: puedo avanzar en la creación de un nuevo sitio web trabajando completamente dentro de mi computadora. De este modo puedo estudiar y entender cómo funciona desde un directorio. Luego si quiero puedo publicar la página en un servidor para acceder a la misma desde internet.

Por eso sin más excusas, lo siguiente es…

¿Qué es HTML?

Las siglas HTML quieren decir:

HTML = Hypertext markup language

De esto necesito saber que “Hypertext” viene por la idea de un “texto con links”. Un texto que se conecta con otros textos.

Y la parte de “markup language” me habla de un lenguaje por anotaciones. Se trata de una forma de decirle al navegador, por medio de etiquetas o “tags”, qué es lo que contiene cada parte de la página.

Por ejemplo estas etiquetas crean una estructura donde un a parte de la página web es el título (heading) y otra parte es un párrafo (paragraphs).

Este lenguaje lleva varias revisiones desde su creación. La versión HTML 5.4 es la más actual al momento de escribir todo esto.

El HTML se encarga de la estructura estática de la página web. Cuáles son los títulos, los bloques de texto, y ese tipo de cosas.

Y para cerrar este apartado, el desarrollo web en HTML por lo general tiene otros dos lenguajes que lo complementan:

– El lenguaje CSS maneja el estilo del sitio. Por ejemplo tipografía, colores, columnas y ese tipo de cosas.

– Javascript se encarga de la parte interactiva del sitio, la parte dinámica y su funcionalidad.

Cómo es la estructura de HTML

Para entender mejor todo esto, nada mejor que empezar trabajando con un ejemplo.

Primero necesito crear un nuevo documento. Puedo usar cualquier editor de texto. Pero si quiero tener todos los lujos, como el de “autocompletar” código, lo mejor va a ser usar alguna alternativa como Codium o algún editor al estilo de Neovim que pueda expandirse con plugins.

Lo que sigue es crear el documento, al que tengo que darle una extensión “.html” para guardarlo.

Y para mi suerte, todo archivo HTML tiene la misma forma:

<!DOCTYPE html>

<html>
  <head> </head>

  <body></body>
</html>

Qué significa DOCTYPE en HTML

La primera linea de todo documento html se conoce como “doctype”.

<!DOCTYPE html>

Este marcación “doctype” identifica el tipo de archivo.

Qué es la etiqueta HTML

La etiqueta es la raíz del documento.

<html>
  ...código...
</html>

Todo lo que se encuentra entre esos dos tags es el código del documento. Este tag siempre esta presente, abre y cierra el archivo.

A veces puede aparecer como:

<html lang="es">
  ...código...
</html>

En este caso, el atributo “lang” identifica el idioma en el que se encuentra escrita la página, por ejemplo “es” por “español”.

En su interior, la etiqueta “html” contienen otros dos tags: Head y Body.

Qué es la etiqueta Head en HTML

En el interior de las etiquetas Head:

<head>
  ...código...
</head>

Se puede encontrar información que no se muestra directamente en el navegador, pero si es información que le dice al navegador cómo tiene que interpretar la página.

Esta información incluye metadatos o links a hojas de estilo en CSS.

Entre esos tags que puedo encontrar dentro de “Head”, existe por ejemplo “Title” que es una etiqueta obligatoria del sitio.

<title>Nombre del sitio</title>

El nombre incluido dentro de las etiquetas “Title” aparece por ejemplo arriba en la barra del navegador, cuando visitamos la página web.

Otra etiqueta que aparece dentro de head es una etiqueta llamada “meta”, se trata de un tag que no tiene cierre. Se refiere a la codificación del archivo:

<meta charset="UTF-8" />

Lo que hace es indicar cómo se van a codificar los caracteres, unificando estándares entre los distintos navegadores.

La etiqueta Body en HTML

Dentro de las etiquetas:

<body></body>

Se incluye todos los elementos que van a mostrarse en mi sitio.

Esta etiqueta comienza directamente luego del cierre de “head”. Y le sigue luego el cierre de la etiqueta html.

Sintaxis de HTML: ultra resumen

Según lo que pude entender explicando el ejemplo anterior, en un documento HTML voy a encontrar diferentes contenidos que se encuentran acompañados de etiquetas.

La sintaxis de este lenguaje se maneja agregando la información acompañada de “tags” o etiquetas.

Básicamente en este primer momento tengo que recordar que existen dos tipos de etiquetas. Un tipo de etiquetas se cierra y otro tipo no. Las etiquetas que no se cierran se consideran etiquetas vacías.

Etiquetas que abren y cierran:

Un ejemplo de este tipo de tag puede ser la etiqueta de párrafo:

<p> este es un párrafo </p>

” abre el contenido y “

” lo cierra. Ya había encontrado este tipo de tag antes, por ejemplo al hablar de “body”. Cuando una etiqueta se abre, siempre tiene que cerrarse en algún punto.

Las etiquetas ya vienen establecidas, no es posible crearlas. No es necesario recordar todas y cada una de las etiquetas, algunas se utilizan muchas veces y otras solo dependiendo de un caso en particular.

Otros detalle importante es que las etiquetas se escriben siempre en minúsculas.

Y también es bueno recordar que las etiquetas pueden “anidarse”, pueden existir una dentro de otra. Esto también pude notarlo antes, por ejemplo:

<head><title> Nombre del sitio</title></head>

Etiquetas vacías:

Este tipo de tag no tiene cierre. Se conocen también como “Empty Tags” o “self-closing” (auto cierre).

No hay contenido en el interior de estas etiquetas, por lo que no es necesario cerrarlas. Pero si pueden tener atributos.

Un ejemplo de esto puede ser:

<link rel="stylesheet" href="styles.css">

En este caso la etiqueta “link” contiene una referencia a un archivo externo, una hoja con estilos CSS. La etiqueta no tiene contenido, por lo que no tiene otro tag de cierre.

Lo que si tiene el ejemplo son dos atributos: el atributo “rel” especifica que se trata de una hoja de estilos y el atributo “href” especifica la dirección al nombre del archivo.

Otro ejemplo de etiqueta vacía puede ser:

<meta charset="UTF-8">

Un etiqueta que ya revisé con anterioridad. Hay varias etiquetas de esta forma, tampoco es necesario conocerlas a todas, solamente alcanza con saber como es su forma.

Atributos en HTML:

Los atributos ( o “Attributes” en inglés) son una forma de agregarle datos extra a un tag.

Modifican la forma en que un navegador interpreta el contenido. El nombre de los atributos se escriben entre comillas. Y tampoco puedo inventar nada en esto, cada tipo de etiqueta tiene sus propios tipos de atributos preestablecidos.

Para revisar un ejemplo que ya escribí antes:

<meta charset="UTF-8">

En este caso tengo la etiqueta meta, que es un tag vacío. Aquí tengo el atributo charset, que indica “UTF-8” como el tipo de codificación unicode que utiliza la página.

Hay también más ejemplos de atributos, que voy a ir encontrando con el desarrollo de mi sitio web.

Comentarios en HTML:

Igual que en otros lenguajes de programación, HTML me permite dejar un mensaje por fuera del código.

<!-- contenido -->

Estos mensajes no son para que los interprete el navegador, son para que puedan leerlos las personas que revisan el código. Por ejemplo:

<!-- Dentro de las etiquetas "Head" van los metadatos -->

Revisando mi primer sitio web en HTML:

Si todo va bien, ya tengo creado un documento, digamos que se llama “inicio.html” por ponerle algún nombre.

Y si sumo todo lo anterior, el interior del documento se parece a esto:

<!DOCTYPE html>
<html>
  <head>
    <!-- Dentro de la etiqueta "Head" van los metadatos -->
    <meta charset="UTF-8" />
    <title>Mi sitio de ejemplo</title>
  </head>

  <body>
    <!-- Dentro de la etiqueta "body" se muestra el contenido que aparece en la página -->
    <h1>Este es un nuevo blog</h1>
    <p>Algo de información para una página web que recien comienza.</p>
  </body>
</html>

Lo que puedo hacer ahora es abrir este archivo con un navegador, por ejemplo con la opción “abrir con” o lanzando el archivo directamente sobre la barra de herramientas del navegador.

Haciendo esto voy a poder ver el sitio web en su estado actual.

Recursos para saber más sobre HTML

No voy a sorprender a nadie si digo que realmente existen millones de cosas sobre este tema para leer y estudiar. Después de todo lo de HTML no es un asunto precisamente nuevo.

¿Dónde puedo encontrar un texto verdaderamente completo para seguir aprendiendo?

Existe una documentación oficial de HTML. Esa documentación la mantiene actualziada una organización internacional llamada World Wide Web Consortium (W3C).

Se puede acceder a ese material siguiendo este enlace.

Así que como siempre, si en algún momento mis apuntes se vuelven confusos o insuficientes, lo mejor es referirse a la documentación oficial.

Describiendo la forma del HTML

Según entiendo la idea es darle un sentido a todo lo que se encuentra en una la página web por medio de etiquetas.

Utilizando HTML le asigno etiquetas a las distintas partes de un sitio. Estas etiquetas le permiten a los navegadores y buscadores entender la página, pero también la vuelven legible para cualquier humano que revise este código.

Es por eso que también se dice que HTML es un “lenguaje estructurado”. Las etiquetas marcan la estructura que cumple cada elemento.

Luego de señalar cada parte con uno de estos tags, puedes agregarle estilo de diseño con CSS (“Hojas de estilo en cadena).

Agrupando los elementos comunes del sitio

Todo este tópico aparece muchas veces mencionado por el nombre en inglés de “Common semantic grouping elements”. Esto es en castellano “Agrupación semántica de elementos comunes”.

En lo que a mi respecta, ni siquiera se que quiere decir “semántico”. En un rápido viaje al diccionario, al parecer quiere decir algo como “estudiar el significado de las palabras”.

Una vez más, lo más importante para recordar parece ser esto: Las etiquetas no “acomodan” las partes del sitio en su lugar ni les dan estilo, pero si les dan estructura. Enseña que es cada cosa.

Ya en el anterior texto revisé algunas características de las etiquetas. Algunas tienen que ser abiertas y cerradas, mientras que otras permanecen siempre abiertas.

Algunas de las etiquetas más comunes

Existen varias etiquetas, pero estas son unas de las más usadas:

La etiqueta “Header”

Según la documentación de (W3C):

The header element represents a group of introductory or navigational aids.manual html w3c

Esto es que “el elemento header representa un grupo de ayudas introductorias o de navegación”.

La misma se encuentra de esta forma:

<header> </header>

En teoría puedo pensar que, al poder ser traducida la palabra “header” como una “cabecera”, esta etiqueta tiene que aparecer al principio de las distintas páginas de un sitio web.

Y la mayoría de las veces ocurre de esa forma, repitiéndose más o menos igual en cada página. Contiene cosas como el logo y los títulos, se supone que el header se ocupa de nuclear ese tipo de información introductoria para la navegación.

Sin embargo tengo que recordar que las etiquetas no se refieren a la posición de algo en el diseño. Puede existir más de un header en una determinada página, puede aparecer incluso usado dentro de otras etiquetas siempre que cumpla esa función de albergar datos introductorios.

<nav> </nav>

<footer></footer>

<main> </main>