
# Introducción
Imagina que estás desarrollando una aplicación web y necesitas configurar distintas fuentes de datos como claves de API, conexiones de bases de datos, tokens de autenticación, etc. Por motivos de seguridad no nos interesará guardar estas configuraciones sensibles dentro de nuestro código y tal vez, ni siquiera queramos conectar con las mismas fuentes si estamos en un entorno local que si estamos ejecutando la aplicación en producción para el público. Es por eso que existen las variables de entorno: valores dinámicos que pueden ser accedidos por el sistema operativo o por el entorno de ejecución.

Al utilizar variables de entorno, podemos:

- **Mantener la portabilidad**: Al separar la configuración de la aplicación de su código fuente, facilitamos la migración entre diferentes entornos y la colaboración entre equipos de desarrollo.

- **Mejorar la seguridad**: Al evitar la exposición de información sensible en el código fuente, reducimos el riesgo de fugas de información y ataques maliciosos.

- **Facilitar la configuración**: Cambiar la configuración de una aplicación en diferentes entornos es tan simple como modificar las variables de entorno correspondientes, sin necesidad de cambiar el código fuente.

## Instalación de dotenv

Para simplificar la gestión de variables de entorno en aplicaciones Node.js, podemos utilizar la biblioteca `dotenv`. Esta biblioteca nos permite cargar automáticamente variables de entorno desde un archivo `.env` en el directorio raíz de nuestro proyecto durante el proceso de arranque de la aplicación.

Para instalar `dotenv`, simplemente ejecutamos el siguiente comando en la terminal dentro del directorio de nuestro proyecto:

```bash
npm install dotenv
```

o

```bash
yarn add dotenv
```

Una vez instalado, podemos comenzar a utilizarlo para cargar nuestras variables de entorno.

## Ejemplo de una aplicación Node.js utilizando dotenv

Supongamos que tenemos una aplicación Node.js simple que necesita acceder a variables de entorno, como el puerto en el que se ejecutará el servidor o una clave de API. A continuación, vamos a ver cómo podemos integrar `dotenv` en nuestra aplicación.

Primero, creamos un archivo `.env` en el directorio raíz de nuestro proyecto. En este archivo, definimos nuestras variables de entorno en el formato `NOMBRE_VARIABLE=valor`.

```plaintext
PUERTO=3000
CLAVE_API=mi_clave_secreta
```

Luego, en nuestro archivo JavaScript principal, usualmente `index.js` o `app.js`, cargamos las variables de entorno utilizando `dotenv` antes de acceder a ellas. 

```javascript
// Importar dotenv y cargar variables de entorno desde .env
require('dotenv').config();

// Acceder a las variables de entorno
const puerto = process.env.PUERTO || 3000;
const claveApi = process.env.CLAVE_API;

// Utilizar las variables de entorno en la aplicación
console.log(`El servidor se está ejecutando en el puerto ${puerto}`);
console.log(`La clave de API es: ${claveApi}`);
```

Con esta configuración, nuestra aplicación Node.js podrá acceder a las variables de entorno definidas en el archivo `.env`, lo que nos brinda flexibilidad y seguridad en la gestión de la configuración de nuestra aplicación.

# Varios entornos

Si tenemos varios entornos podemos crear un archivo para cada uno de ellos, por ejemplo:

```text
.env.development
.env.preproduction
.env.production
```

Luego podemos llamar la aplicación con el parámetro NODE_ENV=entorno para que cargue el archivo adecuado al entorno:

```
NODE_ENV=production node app.js
```

Y luego dentro del script:
```js
require('dotenv').config({ path: `.env.${process.env.NODE_ENV}` })
```

Como ves **dotenv** es una herramienta muy útil para usar distintas variables de entorno según lo que necesitemos.


Cómo distinguir entre distintos entornos donde se ejecuta una aplicación y cómo definir variables para cada uno de ellos

Gestionar variables de entorno con dotenv

gestionar-variables-entorno-dotenv


# Introducción

Ya sea para encontrar la ubicación aproximada en un mapa geográfico o las coordenadas de unos píxeles en una imagen, necesitamos un sistema de referencia. **Rene Descartes** inventó el plano cartesiano, que en 2 dimensiones se representa mediante dos líneas perpendiculares entre sí cuyo eje vertical y horizontal interseccionan en el punto 0,0.

Para crear este sistema de coordenadas utilizando JavaScript y la API Canvas de HTML, podríamos empezar dibujando los ejes: escribiríamos un bucle para trazar lineas horizontales y otro para las verticales usando la instrucción `ctx.lineTo(x, y)`. Y luego podríamos añadir la funcionalidad de movernos por el plano mediante eventos del ratón, guardando la posición inicial al primer clic y después al soltar haríamos la traslación de las lineas del plano restando la diferencia de la posición actual con la guardada anteriormente para simular el efecto de "arrastrar" los objetos.

Pero si aun quisieramos complicarlo más, bastaría con añadirle la opción de poder aumentar o disminuir la escala del plano de forma infinita.

En este artículo haremos todo lo anterior. Explicaremos qué herramientas matemáticas se necesitan y proporcionaremos el código para generar un sistema de coordenadas 2d usando JavaScript.

# Demostración
Si quieres ver directamete el código en acción, aquí puedes ver el resultado final del sistema de coordenadas en 2d:
{{ demo 2024/03/coordenadas.1.html }}

# Implemetación en JavaScript

Lo primero es crear el elemento canvas y añadirlo dentro del elemento ```<body>```
```js
const canvas = document.createElement("canvas");
canvas.width = 1000;
canvas.height = 600;
document.body.appendChild(canvas);
```

Para iniciar la aplicación crearemos una nueva instancia de la clase CoordinateSystem pasándole el elemento canva como parámetro:

```js
new CoordinateSystem(canvas);
```

Puedes ver el código completo en el ejemplo anterior. Aquí sólo comentaremos los puntos más importantes.

Para dibujar la cuadrícula de lineas, lo haremos en el método ```drawGridLines()```. Dibujaremos unas lineas más gruesas y otras más finas:

## Dibujar lineas de cuadrícula
```js
drawGridlines() {
  this.context.beginPath();
  const topLeft = this.fromCanvasCoords(0, 0);
  const bottomRight = this.fromCanvasCoords(
    this.canvas.width,
    this.canvas.height
  );

  for (const i in this.settings.gridLines) {
    this.context.strokeStyle = this.settings.gridLines[i].color;
    this.context.lineWidth = this.settings.gridLines[i].width;

    const spacing = this.settings.gridLines[i].spacing;

    let startX = spacing * Math.ceil(topLeft[0] / spacing);
    let endX = spacing * Math.floor(bottomRight[0] / spacing);

    this.context.beginPath();

    for (let x = startX; x <= endX; x += spacing) {
      const coords = this.canvasCoords(x, 0);

      this.context.moveTo(coords[0], 0);
      this.context.lineTo(coords[0], this.canvas.height);
    }

    let endY = spacing * Math.ceil(topLeft[1] / spacing);
    let startY = spacing * Math.floor(bottomRight[1] / spacing);

    for (let y = startY; y <= endY; y += spacing) {
      const coords = this.canvasCoords(0, y);
      this.context.moveTo(0, coords[1]);
      this.context.lineTo(this.canvas.width, coords[1]);
    }

    this.context.stroke();
  }
}
```

## Dibujar los ejes x e y
Para dibujar los ejes x e y, usaremos el método ```drawAxes```. Obtendremos el origen 0,0 como punto de referencia y luego trazaremos primero la linea horizontal y luego la vertical.

```js
drawAxes() {
  const origin = this.canvasCoords(0, 0);
  const x = origin[0];
  const y = origin[1];

  if (
    (x >= 0 && x <= this.canvas.width) ||
    (y >= 0 && y <= this.canvas.height)
  ) {
    this.context.beginPath();
    this.context.strokeStyle = this.settings.axes.color;
    this.context.lineWidth = this.settings.axes.width;
    this.context.moveTo(0, y);
    this.context.lineTo(this.canvas.width, y);
    this.context.moveTo(x, 0);
    this.context.lineTo(x, this.canvas.height);
    this.context.stroke();
  }
}
```
## Métodos para transformar coordenadas del Canvas y viceversa
Hay dos métodos básicos que son clave para gestionar la visualización del gráfico, estos son ```canvasCoords``` que convierte cualquier posición x e y a la posición que tiene dentro del canvas y ```fromCanvasCoords``` que hace justo lo contrario, a partir de unas coordenadas del canvas nos devuelve la posición x e y reales.

```js
canvasCoords(x, y) {
  const point = new Matrix([[x], [y]]);
  const newPoint = this.zoomMatrix.multiply(point).add(this.translation);

  const coords = [newPoint.entry(0, 0), newPoint.entry(1, 0)];

  return [
    coords[0] + 0.5 * this.canvas.width,
    -coords[1] + 0.5 * this.canvas.height,
  ];
}

fromCanvasCoords(x, y) {
  x -= 0.5 * this.canvas.width;
  y = -(y - 0.5 * this.canvas.height);

  const point = new Matrix([[x], [y]]);
  const newPoint = this.zoomMatrix
    .inverse()
    .multiply(point.subtract(this.translation));
  return [newPoint.entry(0, 0), newPoint.entry(1, 0)];
}
```

Como ves, ambos métodos utilizan operaciones matemáticas con matrices para aplicar traslaciones de las coordenadas. Mira detallademente el código de la función ```Matrix``` en el código de ejemplo para ver los métodos implementados para operar con matrices.


## Mover y ampliar/reducir

Lo que en inglés se conoce como **pan** & **zoom**. Gestionaremos la traslación con el método ```translate``` que llamaremos desde el evento *mousemove* (cuando el ratón esté pulsado y en movimiento) para generar el efecto de mover el gráfico. Y algo parecido conn el método ```zoom```. 

```js
translate(u, v) {
  const w = new Matrix([[u], [v]]);
  const vector = this.zoomMatrix.multiply(w);
  this.translation = this.translation.add(vector);
  this.draw();
}

zoom(zoomFactor, mouseX, mouseY) {
  const worldCoords = this.fromCanvasCoords(mouseX, mouseY);
  const worldCoordsMatrix = new Matrix([[worldCoords[0]], [worldCoords[1]]]);
  const newZoom = this.zoomMatrix.scale(zoomFactor + 1);

  const zoomDifference = newZoom.subtract(this.zoomMatrix);

  this.translation = this.translation.subtract(
    zoomDifference.multiply(worldCoordsMatrix)
  );
  this.zoomMatrix = newZoom;

  this.zoomLevel *= zoomFactor + 1;
  if (this.zoomLevel >= 2 || this.zoomLevel <= 0.5) {
    const factor = this.zoomLevel >= 2 ? 0.5 : 2;

    for (const i in this.settings.gridLines) {
      this.settings.gridLines[i].spacing *= factor;
    }

    this.zoomLevel *= factor;
  }

  this.draw();
}
```


# ¿Y ahora...?
Este código es sólo un ejemplo de cómo implementar un sistema de coordenadas, pero si quieres ampliarlo te propongo varias mejoras:
- Aunque el gráfico tiene zoom hacia dentro y hacia fuera, no es realmente infinito, hay un punto en el que se bloquea, podrías añadir algunas condiciones para que esto no pase si sobrepasa algunos valores al aumentar o disminuir el zoom.
- Por si solo el gráfico no sirve de mucho. Podrías dibujar otros objetos como líneas o formas geométricas.


Implementación de un sistema de coordenadas con las propiedades de zoom y pan

Sistema de coordenadas en un plano 2d infinito con JavaScript

sistema-coordenadas-plano-2d-infinito


# Introducción

La física, con su complejidad inherente, a menudo se vuelve más accesible y comprensible mediante representaciones visuales. La simulación de fenómenos físicos, como el péndulo simple, no solo ofrece una perspectiva clara de los conceptos abstractos, sino que también nos ofrece la oportunidad de aplicar conocimientos teóricos mediante ejemplos prácticos con el uso de lenguajes de programación como JavaScript.

En este artículo, exploraremos la creación de una simulación visual de un péndulo simple. Analizaremos las fórmulas básicas de fuerza que actúan sobre el péndulo y aprenderemos a dibujar y ejecutar una animación en el elemento `canvas` de HTML programando en JavaScript.

# Fórmulas y fundamentos físicos del péndulo simple

Antes de empezar repasemos un poco las fuerzas que actúan sobre el péndulo. Concretamente hay dos fuerzas que actúan sobre la masa del péndulo, el peso y la tensión de la cuerda.

## Peso

El peso se define por **F = m * g** representa la fuerza que actúa hacia abajo en el centro de masa del péndulo, donde $m$ es la masa y $g$ es la aceleración debida a la gravedad.

![Péndulo F = m * g](2024/02/pendulo1.png)

Usando trigonometría, el peso se puede descomponer en dos fuerzas:

### Fuerza en la dirección tangencial
En la dirección tangencial, la única fuerza responsable del movimiento oscilatorio del péndulo es la componente *x* del peso **- m * g * sin(theta)**. El símbolo negativo indica que es una fuerza de restitución contraria a la dirección del movimiento del péndulo.

![Péndulo m * g * sin(theta)](2024/02/pendulo2.png)

### Fuerza en la dirección radial
La fórmula **m * g * cos(theta)** de la gravedad actúa en la dirección radial hacia afuera del círculo. Esta fuerza contrarresta la fuerza de tensión y contribuye al equilibrio del péndulo en su movimiento circular.

![Péndulo m * g * cos(theta)](2024/02/pendulo3.png)

## Fuerza de tensión
La fuerza de tensión **T** es la fuerza que mantiene la cuerda del péndulo en su trayectoria circular. Se dirige hacia el punto de suspensión y actúa radialmente hacia adentro. Esta fuerza es la que mantiene el equilibrio entre la gravedad y la velocidad angular del péndulo.

![Péndulo fuerza T](2024/02/pendulo4.png)

# Simulación y código completo en JavaScript

A continuación puedes ver la simulación y todo el código necesario para realizar la simulación. Verás que en los puntos más altos y más bajos las fuerzas se equilibran, es decir, las flechas que representan las fuerzas se superponen o contrarestan.

{{ demo 2024/02/pendulo.1.html }}


Cómo simular el movimiento de un péndulo simple en JavaScript y mostrar las fuerzas físicas a las que está sometido.

Simulación visual de un péndulo simple

simulacion-pendulo-simple


# Introducción

## ¿Qué es una API REST?
En la actualidad, el diseño de API REST se ha convertido en un estándar para el desarrollo de aplicaciones web y servicios en la arquitectura de cliente-servidor. REST, que significa Transferencia de Estado Representacional (Representational State Transfer), es un conjunto de principios arquitectónicos que guían la creación de servicios web eficientes, escalables y fáciles de mantener.

El término "REST" fue acuñado por Roy Fielding en su [tesis doctoral](https://ics.uci.edu/~fielding/pubs/dissertation/fielding_dissertation.pdf) en el año 2000. Fielding, uno de los coautores del protocolo HTTP (Hypertext Transfer Protocol), ideó los principios REST para describir cómo los sistemas pueden comunicarse a través de la web de manera eficiente. Estos principios han ganado amplia aceptación en la comunidad de desarrollo de software.

## Métodos HTTP en REST

Los métodos HTTP en una API REST definen las acciones que se pueden llevar a cabo sobre los "recursos" que la API expone. En el contexto de una API REST, un "recurso" es una unidad de información o entidad identificable, como un usuario, un producto o cualquier otro conjunto de datos. Cada método HTTP (GET, POST, PUT, DELETE, etc.) se asocia con una operación específica sobre estos recursos. Los métodos principales son:

- **GET:** Recupera información de un recurso específico. Es idempotente, lo que significa que múltiples solicitudes no cambian el estado del servidor.

- **POST:** Crea un nuevo recurso. Se utiliza para enviar datos al servidor para su procesamiento.

- **PUT:** Actualiza un recurso existente o crea uno si no existe. Es idempotente, ya que realizar la misma operación varias veces produce el mismo resultado que hacerlo una vez.

- **DELETE:** Elimina un recurso específico. Al igual que GET, es idempotente.

- **PATCH:** Aplica parcialmente modificaciones a un recurso. Es útil cuando solo se necesitan realizar cambios específicos en lugar de enviar el recurso completo.

- **OPTIONS:** Proporciona información sobre las opciones de comunicación disponibles para el recurso identificado.

## Node.js y Express

Para implementar la API necesitaremos Node.js y el servidor web Express.js

Node.js es un entorno de ejecución de JavaScript del lado del servidor que utiliza el motor V8 de Google Chrome. La singularidad de Node.js radica en su capacidad para ejecutar código JavaScript en el servidor, permitiendo la creación de aplicaciones altamente escalables y orientadas a eventos.

Express.js, por otro lado, es un servidor web para Node.js. Se construye sobre la base de las funciones básicas de Node.js, simplificando la creación de aplicaciones web y APIs REST.

También ayuda que la comunidad es muy activa y el robusto y extenso ecosistema de paquetes de Node.js, a través de NPM, contribuyen a su atractivo y popularidad. 

# Crear una applicación Node.js

## Prerequisitos del sistema

Antes de continuar debes asegurarte de tener el entorno configurado. Concretamente necesitamos que el sistema tenga instalado Node.js y npm. Puedes comprobar si los tienes instalados ejecutando los comandos
```bash
node -v
npm -v
```

Si no tienes instalado Node.js puedes seguir este artículo para [instalar NVM (Node Version Manager) y Node.js](/articulos/2023/12/29/nvm-node-version-manager)
Y para instalar npm:
```bash
npm install -g npm
```

## Creación de un nuevo proyecto Node.js

El primer paso será crear una carpeta donde residirán los archivos de nuestra aplicación. Puedes usar este comando para crear la carpeta:
```bash
mkdir api-rest
```
Accedemos dentro del directorio
```bash
cd api-rest
```
## Inicializar la aplicación

Para inicializar la aplicación podemos ejecutar el comando:

```bash
npm init
```

Se iniciará la creación de la aplicación y te preguntará el nombre de la aplicación y otros parámetros. Puedes aceptar los parámetros por defecto pulsando la tecla Enter.

Una vez creada la aplicación verás que se ha creado un archivo llamado `package.json` que contiene la información proporcionada, y además describe cómo se ejecutará el proyecto y la lista de dependencias.

```json
{
  "name": "api-rest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
```

## Instalar dependencias

Para instalar Express.js, ejecutamos este comando en la terminal:

```bash
npm install express
```
Si volvemos a abrir el archivo `package.json` veremos que se ha añadido la dependencia (la versión puede variar si no se especifica al instalarla).
```json
"dependencies": {
  "express": "^4.18.2"
}
```
y también se ha creado un archivo llamado `package-lock.json`, un archivo que contiene el registro de las dependencias instaladas.

## Iniciar el servidor y crear un endpoint

Creamos un archivo llamado `index.js` y pegamos este código:

Primero importamos la dependencia Express.js y se creamos una instancia de la aplicación llamada app.

```js
const express = require('express');
const app = express();
```

Utilizamos el middleware express.json() para permitir que la aplicación pueda interpretar datos en formato JSON que se envían en las solicitudes.

```js
app.use(express.json());
```

Configuramos el puerto en el que el servidor escuchará las solicitudes. Si hay una variable de entorno llamada PORT definida, utilizará ese valor; de lo contrario, usará el puerto 8080 por defecto.

```js
const PORT = process.env.PORT || 8080;
```

Iniciamos el servidor y empieza a escuchar en el puerto especificado. Cuando el servidor está listo para recibir solicitudes, se imprime en la consola el mensaje 'servidor iniciado'.

```js
app.get('/hola', function (req, response) {
  response.send('mundo');
});
```
Definimos un nuevo enpoint  para las solicitudes GET en la ruta '/hola'. Cuando se recibe una solicitud en esta ruta, la aplicación responde con el texto 'mundo'.


## Ejecutar el servidor

Para probar el código implementado, en la línea de comandos ejecutamos:

```bash
node index.js
```

con el navegador nos podemos dirigir a la url **http://localhost:8080/hola** y veremos el texto
```txt
mundo
````

# Código completo
```js
const express = require('express');
const app = express();
app.use(express.json());
const PORT = process.env.PORT || 8080;

app.listen(PORT, function () {
  console.log('servidor iniciado')
})

app.get('/hola', function (req, response) {
  response.send('mundo');
})
```



Qué es una API Rest y cómo crear un endpoint sencillo con Node.js y Express

Crear una API rest con Node.js y Express

api-rest-node-js-express


Ofrecer la posibilidad de poder copiar texto al portapapeles es una funcionalidad muy común en las aplicaciones web y puede mejorar sustancialmente la experiencia de usuario de tus visitantes. Vamos a explorar cómo implementarla de manera efectiva.

# Copiar al portapapeles con la API Clipboard

En JavaScript, hay varias formas de copiar texto al portapapeles. Pero la API Clipboard es la recomendada. Veamos un ejemplo donde se copia el texto que está dentro de un elemento div de HTML:

```html
<div id="textToCopy">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<button id="copyButton" onclick="copyText()">Copiar</button>
```

```javascript
function copyText() {
  // Texto a copiar
  const textToCopy = document.getElementById("textToCopy").innerText;

  // Usamos la API de Portapapeles para copiar el texto
  navigator.clipboard.writeText(textToCopy).then(function () {
    // Cambiar el texto del botón y deshabilitar el botón
    document.getElementById("copyButton").innerText = "✓ Copiado";
    document.getElementById("copyButton").disabled = true;

    // Dejar el botón como en el estado inicial al cabo de 2 segundos
    setTimeout(function () {
      document.getElementById("copyButton").innerText = "Copiar";
      document.getElementById("copyButton").disabled = false;
    }, 2000);
  }).catch(function (err) {
    console.error('Imposible copiar el texto', err);
  });
}
```
Para ver el código completo puedes mirar aquí, aunque avisamos que este ejemplo no funciona en esta página debido a que está en un iframe. Tendrías que ejecutarlo en otro entorno.

{{ demo 2024/01/portapapeles.1.html }}

# Compatibilidad con navegadores de la API Clipboard

Esta API es relativamente nueva y aunque la soportan todos los navegadores modernos recomendamos mirar la tabla de [compatibilidad](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API#api.clipboard) de los navegadores.

Para copiar al portapapeles históricamente se utilizaba la instrucción `document.execCommand('copy')`. Pero a día de hoy, este método se ha declarado obsoleto y se recomienda no usarlo.



Enfoque práctico de cómo copiar texto dentro de un elemento HTML al portapapeles con un solo clic usando JavaScript

Copiar al portapapeles

copiar-al-portapapeles


# Tipos primitivos en TypeScript

En TypeScript, al igual que en JavaScript, existen tipos primitivos que representan datos simples y básicos. Veamos los tipos primitivos principales en TypeScript con ejemplos de código:

## Números
Representa valores numéricos, ya sean enteros o decimales.

```typescript
let edad: number = 25;
let precio: number = 99.99;

// Ejemplo de operaciones con números
let suma: number = edad + precio;
```
## Cadenas
Son valores de texto o cadenas de caracteres (strings en inglés).

```typescript
let nombre: string = 'Juan';
let mensaje: string = `Hola, ${nombre}!`;

// Ejemplo de longitud de cadena
let longitud: number = mensaje.length;
```

## Booleanos
Representa valores lógicos, verdadero **true** o falso **false**.

```typescript
let activo: boolean = true;
let esMayorDeEdad: boolean = edad >= 18;

// Ejemplo de expresiones lógicas
let puedeVotar: boolean = esMayorDeEdad && activo;
```

## null y undefined

Son tipos que tienen valores **null** (un valor asignado) y **undefined** (variable declarada pero si definir ningún valor). 

```typescript
let valorNulo: null = null;
let valorNoDefinido: undefined = undefined;
```

## Symbol
Representa valores únicos e inmutables utilizados como identificadores de propiedad en objetos. Introducidos en ECMAScript 2015 (ES6).

```typescript
const simbolo1: symbol = Symbol('id');
const simbolo2 = Symbol('id'); // Los símbolos son siempre únicos

// Ejemplo de uso de símbolos en objetos
const persona = {
  nombre: 'Ana',
  [simbolo1]: 28 // Uso de un símbolo como clave de propiedad
};
```

## BigInt

Representa valores enteros mayores que 2^53 - 1 o menores que -(2^53 - 1).

```typescript
const valorGrande: bigint = 9007199254740991n;
const otroValor: bigint = BigInt(100); // Creación de un valor BigInt

// Ejemplo de operaciones con bigints
const sumaBigInt: bigint = valorGrande + otroValor;
```

Estos son algunos de los tipos primitivos básicos en TypeScript que se utilizan para definir variables y estructuras de datos simples en el código.

# Tipos Complejos en TypeScript

Los tipos complejos en TypeScript permiten representar y trabajar con estructuras de datos más sofisticadas y flexibles, lo que proporciona un mayor nivel de seguridad y claridad en el desarrollo de aplicaciones. Aquí te muestro algunos de los tipos complejos principales con ejemplos de código:

## Arrays

Representa una colección ordenada de elementos del mismo tipo.

```typescript
let numeros: number[] = [1, 2, 3, 4, 5];
let palabras: string[] = ['Hola', 'Mundo'];

// Uso de arrays con tipos múltiples (unión de tipos)
let variedad: (number | string)[] = [10, 'veinte', 30];
```

## Tuple
Una tupla es un array de longitud fija que permite definir tipos específicos para cada posición.

```typescript
let tupla: [string, number, boolean] = ['Hola', 10, true];

// Acceso a elementos de la tupla
let mensaje: string = tupla[0];
let valor: number = tupla[1];
let activo: boolean = tupla[2];
```

## Object
Representa un objeto genérico con propiedades y valores.

```typescript
let persona: { nombre: string; edad: number } = {
  nombre: 'Ana',
  edad: 30
};

// Acceso a las propiedades del objeto
console.log(persona.nombre);
console.log(persona.edad);
```

## Any
Representa un tipo dinámico que puede tomar cualquier valor.

```typescript
let variableDinamica: any = 10;
variableDinamica = 'Hola';
variableDinamica = true;
```

## Unión de tipos
Permite definir variables que pueden contener más de un tipo.

```typescript
let resultado: number | string;
resultado = 100;
resultado = 'Éxito';
```
## Enum
Permite definir un conjunto de constantes nombradas.

```typescript
enum DiaSemana {
  Lunes,
  Martes,
  Miércoles,
  Jueves,
  Viernes
}

let diaLaboral: DiaSemana = DiaSemana.Lunes;
console.log(diaLaboral); // Imprimirá: 0 (valor asignado a Lunes)
```

# Type y interface

En TypeScript, tanto **type** como **interface** son herramientas que permiten definir estructuras de datos personalizadas. Aunque pueden parecer similares en algunos aspectos, tienen diferencias en su funcionamiento y uso. Veamos cada uno de ellos:

## Type

**type** es una forma de definir un alias para un tipo existente o crear un nuevo tipo a partir de una combinación de otros tipos. Esto permite reutilizar tipos existentes o crear nuevos tipos basados en composiciones, uniones, intersecciones u otras operaciones con tipos.

Ejemplo:

```typescript
type Coordenada = {
  x: number;
  y: number;
};

type Punto = Coordenada & { color: string };

let punto: Punto = { x: 10, y: 20, color: 'rojo' };
```

En el ejemplo anterior, `Punto` es un tipo que combina las propiedades de `Coordenada` y agrega una propiedad adicional `color`. Los tipos pueden ser usados para definir tipos más complejos y reutilizables.

## Interface

**interface**, por otro lado, se utiliza principalmente para definir la forma de una estructura de datos. Es una forma de declarar contratos que los objetos deben cumplir. Las interfaces son más adecuadas para definir la forma de un objeto y permiten la herencia entre interfaces para extender su comportamiento.

Ejemplo:

```typescript
interface Coordenada {
  x: number;
  y: number;
}

interface Punto extends Coordenada {
  color: string;
}

let punto: Punto = { x: 10, y: 20, color: 'rojo' };
```

En este ejemplo, `Punto` es una interfaz que extiende la interfaz `Coordenada`, agregando la propiedad `color`. Las interfaces también pueden ser implementadas por clases para garantizar que la clase cumpla con la estructura definida por la interfaz.

## Diferencias entre ambas

- **Extensibilidad:** Las interfaces pueden ser extendidas por otras interfaces, lo que permite crear jerarquías de interfaces. Los tipos **type** no admiten herencia directa, aunque se pueden crear tipos compuestos y utilizarlos de manera similar.
  
- **Declaración vs. composición:** Las interfaces son principalmente para la declaración de formas de objetos, mientras que los tipos **type** son más flexibles y pueden ser usados para definir tipos compuestos, uniones, intersecciones y otros tipos más complejos.

En la práctica, la elección entre **type** e **interface** depende del escenario particular y las necesidades del desarrollo. A menudo, ambas pueden ser utilizadas en conjunto para beneficiarse de las diferentes características que ofrecen. Es importante entender sus diferencias y utilizarlas de manera efectiva.

# Genéricos en TypeScript

Los genéricos (*generics*) es un término en TypeScript que sirve para describir la característica que permite escribir código flexible y reutilizable al trabajar con tipos de datos. Permiten la creación de componentes que pueden funcionar con una variedad de tipos sin perder la información de tipo durante la ejecución.

## Ejemplos con genéricos
Los genéricos se definen utilizando el símbolo `<T>`, donde `T` es una variable de tipo. Estos tipos pueden ser utilizados dentro de funciones, clases y otros constructores para proporcionar flexibilidad en la elección de tipos. Por ejemplo, la función identidad soporta varios tipos:

```typescript
function identidad<T>(valor: T): T {
  return valor;
}

let numero: number = identidad(5);       // T se infiere como number
let palabra: string = identidad('Hola'); // T se infiere como string
```

Puedes utilizar varias variables de tipo genérico en una función para trabajar con múltiples tipos.

```typescript
function imprimirPar<T, U>(a: T, b: U): void {
  console.log(`${a}, ${b}`);
}

imprimirPar(1, 'Dos');  // Salida: 1, Dos
imprimirPar('Tres', 4); // Salida: Tres, 4
```

## Uso en Clases

### Clases Genéricas
Las clases también pueden hacer uso de generics para proporcionar flexibilidad en la elección de tipos.

```typescript
class Contenedor<T> {
  valor: T;

  constructor(valor: T) {
    this.valor = valor;
  }
}

let contenedorNumero = new Contenedor<number>(5);
let contenedorString = new Contenedor<string>('Hola');
```

### Uso de Múltiples Tipos Genéricos
Una clase puede tener múltiples variables de tipo genérico.

```typescript
class ParOrdenado<T, U> {
  constructor(public primero: T, public segundo: U) {}
}

let par = new ParOrdenado<number, string>(1, 'Dos');
console.log(par.primero);  // Salida: 1
console.log(par.segundo); // Salida: Dos
```

# Type assertions
## ¿Qué son las Type assertions?

Las Type assertions o conversión de tipos, también conocidas como "casting", son una característica presente en muchos lenguajes de programación como Java o C#. También está presente en TypeScript. Básicamente sirve para ayudar al compilador a determinar un tipo específico a un valor cuando este no puede determinarlo por si mismo.

## Sintaxis y uso

La sintaxis básica de una Type Assertion es utilizar el operador `as` o la notación `<>`. Aquí hay ejemplos de ambas formas:

```typescript
// Sintaxis con <>
let longitud: number = (<string>miVariable).length;

// Sintaxis con 'as'
let longitud: number = (miVariable as string).length;
```

El uso de Type assertions se vuelve útil en situaciones como:

```typescript
let miVariable: any = 'Hola, Mundo!';
let longitud: number = (miVariable as string).length;
```

En este caso, `miVariable` se declara como tipo `any`, pero el desarrollador sabe que, en este contexto específico, su valor será una cadena de texto (string). La Type Assertion le permite a TypeScript tratar `miVariable` como una cadena, permitiendo el acceso a la propiedad `length`.

## Mejores Prácticas

Aunque las Type assertions pueden ser útiles en ciertos escenarios, es importante usarlas con precaución para evitar situaciones de ejecución impredecibles. Veamos las mejores prácticas:

1. **Utilízalas sólo cuando sea necesario**
   - Las Type assertions deben usarse solo cuando sea necesario y no como una solución predeterminada.

2. **Evita Type assertions con `any`**
   - Trata de evitar Type assertions en variables declaradas como `any`, ya que esto anula gran parte de la seguridad de tipo proporcionada por TypeScript.

3. **Usa Type Guards cuando sea posible**
   - En lugar de usar Type Assertions, considera el uso de Type Guards (funciones que realizan comprobaciones de tipo) para proporcionar evidencia al compilador sobre el tipo de una variable.

```typescript
// Ejemplo de Type Guard
function esCadena(valor: any): valor is string {
  return typeof valor === 'string';
}

let miVariable: any = 'Hola, Mundo!';
if (esCadena(miVariable)) {
  let longitud: number = miVariable.length; // TypeScript ahora entiende que es una cadena
}
```

Las Type assertions pueden ser valiosas en ciertos escenarios, pero es crucial utilizarlas con responsabilidad y considerar alternativas más seguras cuando sea posible. Esto ayuda a mantener la integridad del sistema de tipos de TypeScript y a prevenir errores difíciles de depurar.

# Conclusión
En este artículo hemos visto los tipos básicos de TypeScript, los tipos complejos, qué son los genéricos y la conversión de tipos. Comprender todos estos términos no solo nos ayudará a mejorar la calidad del código, sino que también nos abre la puerta a prácticas de desarrollo más avanzadas y eficientes para el desarrollo de nuestras aplicaciones con TypeScript.

Si quieres profundizar más sobre tipos puedes visitar la [documentacion oficial](https://www.typescriptlang.org/docs/handbook/2/objects.html).


Repaso de tipos básicos y complejos en TypeScript. Qué son los genéricos y la conversión de tipos.

Tipos en TypeScript

tipos-typescript

# Introducción

## ¿Qué es TypeScript?
TypeScript es un lenguaje de programación de código abierto creado por Microsoft en el 2012 que se basa en JavaScript. Concretamente es un superconjunto tipado de JavaScript que ha ganado una gran reputación entre programadores por su capacidad para mejorar la calidad y la eficiencia del código. A medida que la complejidad de las aplicaciones web y de software ha aumentado, TypeScript ha surgido como una herramienta crucial para desarrolladores de todos los niveles de habilidad.

## ¿En qué se diferencia con JavaScript?

La distinción principal entre TypeScript y JavaScript radica en su naturaleza tipada. Mientras que JavaScript es un lenguaje de programación de **tipado dinámico**, lo que significa que no se requiere especificar los tipos específicos de datos para las variables, TypeScript introduce el concepto de **tipado estático**. Esto permite declarar tipos de datos para variables, lo que conduce a una detección temprana de errores y una mejor comprensión del código durante el tiempo de desarrollo.

Ejemplo de código en JavaScript:
```js
function sumar(numero) {
  return 2 + numero;
}

let resultado = sumar(2);
console.log(resultado);
```

El mismo ejemplo en TypeScript:
```typescript
function sumar(numero: Number): Number {
  return 2 + numero;
}

let resultado: Number = sumar(2);
console.log(resultado);
```

## ¿Se puede usar TypeScript directamente en el navegador?

Su utilización directa en el navegador no es posible debido a que los navegadores sólo interpretan y ejecutan código JavaScript. Para poder usarlo hay que ejecutar un proceso de transpilación, que consiste en convertir el código TypeScript a JavaScript mediante el compilador de TypeScript **tsc**. Frameworks como React o Vue ofrecen la opción de crear proyectos usando TypeScript y ya incluyen este compilador por defecto. Pero si deseas usar el compilador desde la línea de comandos puedes seguir los siguientes pasos:


## Instalación del compilador TypeScript:

Primero, es necesario tener Node.js instalado, ya que TypeScript se instala a través de npm (Node Package Manager). Usando el siguiente comando en la terminal, se puede instalar TypeScript globalmente:

```bash
npm install -g typescript
```

## Escribir código en TypeScript:

Se escribe el código en archivos con extensión **.ts**. Por ejemplo, se puede tener un archivo *ejemplo.ts* con el siguiente código:

```typescript
function gritar(nombre: string) {
    return "¡Hola, " + nombre + "!";
}

let mensaje = gritar("Mundo");
console.log(mensaje);
```

## Transpilación a JavaScript:

Una vez que se tiene el código en TypeScript, se utiliza el compilador **tsc** para convertirlo a JavaScript. En la terminal, se ejecuta el siguiente comando:

```bash
tsc ejemplo.ts
```

Esto generará un nuevo archivo llamado *ejemplo.js*, que contendrá el código JavaScript equivalente al código TypeScript original.

## Uso del código transpilado en el navegador:

El archivo JavaScript resultante *ejemplo.js* puede ser enlazado a un archivo HTML y usado en un navegador como cualquier otro script JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo TypeScript en Navegador</title>
</head>
<body>
    <script src="ejemplo.js"></script>
</body>
</html>
```

Al cargar la página HTML en un navegador, el código JavaScript transpilado a partir de TypeScript será ejecutado.

## ¿Vale la pena adoptar TypeScript?

La respuesta corta es sí, pero como en cualquier elección depende de nuestro objetivo y situación. Los lenguajes evolucionan con el tiempo y hay muchos factores a tener en cuenta, desde la experiencia de los desarrolladores de nuestro equipo, el tamaño del mismo, el tipo de aplicación a desarrollar, etc. A continuación mostramos las ventagas e inconvenientes principales a considerar de forma general:

### Ventajas de usar TypeScript:

1. **Tipado estático:** TypeScript permite la declaración de tipos de datos, lo que ayuda a detectar errores en tiempo de compilación, mejorando la calidad del código y facilitando su mantenimiento.

2. **Mejora la productividad:** Al proporcionar información más clara y detallada sobre el código, TypeScript ofrece un entorno de desarrollo más sólido, lo que facilita la refactorización, la comprensión y la colaboración en proyectos grandes.

3. **Mayor legibilidad y documentación:** La introducción de tipos hace que el código sea más legible y autodocumentado, facilitando la comprensión del propósito y la funcionalidad de cada parte del programa.

4. **Integración con herramientas de desarrollo:** TypeScript se integra bien con herramientas de desarrollo como IDEs, editores de texto y herramientas de depuración, proporcionando una experiencia de desarrollo más eficiente y ágil.

5. **Compatibilidad con JavaScript:** Al ser un superconjunto de JavaScript, TypeScript es compatible con el código JavaScript existente, permitiendo una transición gradual hacia su adopción.

### Inconvenientes de usar TypeScript:

1. **Curva de aprendizaje inicial:** Para aquellos no familiarizados con el tipado estático, puede llevar tiempo adaptarse a la sintaxis y las reglas de TypeScript.

2. **Necesidad de compilación:** El proceso de transpilar código TypeScript a JavaScript añade una capa adicional al flujo de trabajo, lo que puede ser considerado como un paso adicional en comparación con el desarrollo directo en JavaScript.

3. **Posible sobrecarga de complejidad:** En algunos casos, el uso excesivo de tipos puede aumentar la complejidad del código, especialmente si no se maneja adecuadamente, lo que puede llevar a una sobrecarga cognitiva y dificultar la comprensión del código.

4. **Mayor esfuerzo inicial en pequeños proyectos:** En proyectos pequeños o scripts simples, el beneficio de usar TypeScript puede no ser tan evidente, lo que podría llevar a un esfuerzo adicional sin una clara ventaja percibida.






Qué es TypeScript y en qué se diferencia de JavaScript. Ventajas e inconvenientes del lenguaje.

Introducción a TypeScript

introduccion-typescript


A primera vista, la trigonometría puede parecer un área de las matemáticas distante de la programación, pero su aplicación en el ámbito informático es realmente destacable. En esencia, la trigonometría es la rama de las matemáticas que estudia las relaciones entre los ángulos y los lados de los triángulos. En el universo de la programación, esta disciplina se convierte en un recurso básico para resolver problemas geométricos, gráficos, de movimiento, animación, física simulada y mucho más.

Normalmente cuando se explican estos conceptos en la escuela apenas hay tiempo para aplicarlos en casos más complejos, o bien faltan otros conocimientos para usar la trigonometría en casos más interesantes. Por eso me pareció divertido crear una visualización interactiva para mostrar la aplicación de un caso real utilizando Javascript para dibujar sobre el elemento Canvas de HTML.

# Conceptos básicos de trigonometría

Pero antes vamos a repasar un poco las bases de la trigonometría: el seno y el coseno. En JavaScript, estas funciones son accesibles a través de sus métodos nativos:

- **Seno (sin):** Calcula la relación entre el lado opuesto y la hipotenusa de un triángulo rectángulo. En JavaScript, se utiliza mediante `Math.sin()`.
  
- **Coseno (cos):** Calcula la relación entre el lado adyacente y la hipotenusa de un triángulo rectángulo. En JavaScript, se emplea a través de `Math.cos()`.

Estas funciones son la clave para resolver una amplia gama de problemas con triángulos rectangulos. Pero, ¿qué sucede con la diferencia entre radianes y grados? Los radianes son una medida angular que relaciona el radio de un arco con su longitud. Mientras que los grados son la unidad de medida angular más común.

En JavaScript, podemos convertir fácilmente de radianes a grados y viceversa. Para convertir de radianes a grados, la fórmula es simple:

```javascript
function radianesAGrados(radianes) {
  return radianes * (180 / Math.PI);
}
```

Con estas fórmulas podremos entender la mayoría de operaciones que requeriremos para crear la visualización.

# Visualización interactiva

Vamos a empezar con un archivo llamado *index.html*. Escribiremos el elemento Canvas, sobre el que luego dibujaremos la visualización
```html
<canvas id="canvas" width="600" height="300"></canvas>
```

Luego añadiremos unos tags ```<script></script>``` y dentro escribiremos todo el código JavaScript.
Primero escribiremos las variables para manipular el elemento canvas y su contexto, así como algunos valores por defecto, como el ángulo inicial y los colores:

```js
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const padding = 10;
let thetaAngle = 45
let isDrawing = false;

const colors = {
  black: '#333',
  blue: '#1E90FF',
  red: '#FF6347',
};
```

## Funciones para ayudarnos a dibujar
En esta sección, definimos funciones que permiten dibujar un círculo, una línea, texto paralelo y calcular el ángulo a partir de un clic en un canvas HTML usando el objeto MouseEvent.

```js
const drawCircle = (ctx, x, y, r, fill, border, arc) => {
  ctx.beginPath();
  ctx.fillStyle = 'transparent'
  ctx.arc(x, y, r, 0, arc || Math.PI * 2, true);
  if (border) {
    ctx.stroke();
  }
  if (fill) {
    ctx.lineTo(x, y);
    ctx.fill();
    ctx.closePath();
  }
};

const drawLine = (ctx, p1, p2) => {
  ctx.beginPath();
  ctx.moveTo(...p1);
  ctx.lineTo(...p2);
  ctx.stroke();
};

const drawParallelText = (ctx, text, x1, y1, x2, y2) => {
  const angle = Math.atan2(y2 - y1, x2 - x1);
  const labelX = (x1 + x2) / 2;
  const labelY = (y1 + y2) / 2;

  ctx.save();
  ctx.translate(labelX, labelY);
  ctx.rotate(angle);

  ctx.fillStyle = colors.black;
  ctx.textBaseline = 'middle';
  ctx.textAlign = 'center';
  ctx.fillText(text, 0, -10);

  ctx.restore();
};

const calculateAngleFromClick = (event) => {
  const rect = canvas.getBoundingClientRect();
  const clickX = event.clientX - rect.left - canvas.width / 2;
  const clickY = canvas.height / 2 - (event.clientY - rect.top);
  let angle = Math.atan2(clickY, clickX);
  if (angle < 0) {
    angle += Math.PI * 2;
  }
  return Math.round(angle * 180 / Math.PI);
};
```

## Event Listeners para interacción con el canvas

Estos event listeners están pendientes de la interacción del usuario con el canvas: detectan clics del mouse, movimientos y liberación del botón del mouse.

```js
canvas.addEventListener('mousedown', (event) => {
  isDrawing = true;
  thetaAngle = calculateAngleFromClick(event);
  draw()
});

canvas.addEventListener('mousemove', (event) => {
  if (isDrawing) {
    thetaAngle = calculateAngleFromClick(event);
    draw()
  }
});

canvas.addEventListener('mouseup', () => {
    isDrawing = false;
});
```

## Función de dibujo principal y su invocación inicial

La función *draw()* se encarga de dibujar en el canvas. Define la apariencia de un círculo, líneas, texto y otros elementos, utilizando operaciones trigonométricas como el coseno y el seno para posicionar y rotar elementos en el canvas.

Esta función realiza los siguientes pasos:

- Limpia el canvas.
- Dibuja un círculo, líneas de referencia y un círculo giratorio con base en un ángulo.
- Dibuja líneas y texto indicando valores de seno y coseno.
- Dibuja puntos para representar los valores de seno y coseno.
- Muestra el ángulo en el canvas.

```js
let radius = canvas.height / 2.2;
const draw = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.lineWidth = 1;
  ctx.lineCap = 'round';
  let theta = thetaAngle * Math.PI / 180;
  ctx.strokeStyle = colors.black;

  drawCircle(
    ctx,
    canvas.width / 2, canvas.height / 2,
    radius, false, true
  );

  const margin = 40;
  ctx.setLineDash([5, 5]);
  drawLine(ctx,
    [canvas.width / 2 - radius - margin, canvas.height / 2],
    [canvas.width / 2 + radius + margin, canvas.height / 2]
  );
  drawLine(ctx,
    [canvas.width / 2, canvas.height / 2 - radius - margin],
    [canvas.width / 2, canvas.height / 2 + radius + margin]
  );
  ctx.setLineDash([]);

  if (theta != 0) {
    drawCircle(
      ctx,
      canvas.width / 2, canvas.height / 2,
      30, true, true, -theta
    );
  }

  ctx.lineWidth = 3;
  drawLine(ctx,
    [canvas.width / 2, canvas.height / 2],
    [canvas.width / 2 + radius * Math.cos(theta),
    canvas.height / 2 + -radius * Math.sin(theta)]
  );

  ctx.font = '16px sans-serif';
  drawParallelText(ctx, 'radio',
    canvas.width / 2, canvas.height / 2,
    canvas.width / 2 + radius * Math.cos(theta),
    canvas.height / 2 + -radius * Math.sin(theta)
  );

  ctx.fillStyle = colors.black;
  ctx.textBaseline = 'middle';
  ctx.textAlign = 'center';
  ctx.fillText(`𝜃 = ${thetaAngle}º`,
    canvas.width / 2 + 40 * Math.cos(theta / 2),
    canvas.height / 2 - 40 * Math.sin(theta / 2),
  );

  ctx.strokeStyle = colors.red;
  ctx.fillStyle = colors.red;
  drawLine(ctx,
    [canvas.width / 2 + radius * Math.cos(theta), canvas.height / 2],
    [canvas.width / 2 + radius * Math.cos(theta),
    canvas.height / 2 + -radius * Math.sin(theta)]
  );

  ctx.textBaseline = 'middle';
  ctx.textAlign = 'start';

  ctx.fillText('sin(𝜃)',
    canvas.width / 2 + radius * Math.cos(theta) + padding,
    canvas.height / 2 + -radius * Math.sin(theta) / 2
  );

  ctx.strokeStyle = colors.blue;
  ctx.fillStyle = colors.blue;
  drawLine(ctx,
    [canvas.width / 2, canvas.height / 2],
    [canvas.width / 2 + radius * Math.cos(theta),
    canvas.height / 2]
  );

  ctx.textBaseline = 'top';
  ctx.textAlign = 'center';
  ctx.fillText('cos(𝜃)',
    canvas.width / 2 + radius * Math.cos(theta) / 2,
    canvas.height / 2 + padding
  );

  ctx.fillStyle = colors.black;
  ctx.strokeStyle = colors.black;

  drawCircle(
    ctx,
    canvas.width / 2, canvas.height / 2,
    2, true, true
  );

  drawCircle(
    ctx,
    canvas.width / 2 + radius * Math.cos(theta),
    canvas.height / 2 + -radius * Math.sin(theta),
    2, true, true
  );

  drawCircle(
    ctx,
    canvas.width / 2 + radius * Math.cos(theta),
    canvas.height / 2,
    2, true, true
  );
};

draw();
```

## Visualización completa

Finalmente, aquí tienes la visualización interactiva completa:

{{ demo 2024/01/trigonometria.1.html }}


Visualización interactiva para dibujar un triángulo usando fórmulas trigonométricas con la API Canvas

Visualización trigonométrica

visualizacion-trigonometrica


# ¿Qué es el formato WebP?

WebP es un formato de imagen moderno y altamente eficiente desarrollado por Google. Fue diseñado específicamente para la web, buscando ofrecer una compresión superior sin comprometer la calidad visual. Este formato utiliza algoritmos de compresión inteligentes que reducen significativamente el tamaño de los archivos de imagen, manteniendo una calidad visual excepcional.

# Compatibilidad y calidad de imagen

Una de las ventajas más destacadas de WebP es su amplia compatibilidad. Aunque inicialmente no era tan compatible como otros formatos, con el tiempo ha ganado terreno. Los principales navegadores como Google Chrome, Mozilla Firefox, Microsoft Edge y Opera lo admiten. Además, su capacidad para ofrecer imágenes de alta calidad con tamaños de archivo más pequeños lo convierte en una opción atractiva para mejorar la experiencia del usuario en sitios web.

En cuanto a la calidad de imagen, WebP puede preservar detalles y colores de manera impresionante, incluso a tasas de compresión agresivas. Esto se traduce en imágenes más nítidas y atractivas visualmente, lo que mejora la estética general de un sitio web.

# ¿Es mejor que el formato PNG?

A pesar de la popularidad del formato PNG en la web debido a su capacidad para admitir transparencias, WebP tiene la ventaja clave que comprime en tamaños de archivo más pequeños con una calidad igual o superior. Esto significa que tus páginas web cargarán más rápido sin sacrificar la calidad visual, lo que es esencial para mejorar las métricas de Web Vitals y el rendimiento general del sitio.

# Mejora las métricas de tus páginas en Web Vitals

Web Vitals son métricas clave proporcionadas por Google para medir la experiencia del usuario en la web e incluso pueden determinar el posicionamiento SEO en los rankings de Google Search. Elementos como el tiempo de carga de la página, la interactividad y la estabilidad visual son fundamentales. Aquí es donde entra en juego el formato WebP: al reducir los tamaños de archivo de las imágenes, contribuye significativamente a la optimización del tiempo de carga de la página y mejora la experiencia del usuario. Esto puede impactar positivamente en métricas vitales como el *Largest Contentful Paint* (LCP) y el *Cumulative Layout Shift* (CLS), mejorando así el rendimiento del sitio web en general.

# Convertir imágenes JPG, PNG y GIF a WEBP

Si deseas convertir todas tus imágenes en formato JPEG, PNG y GIF a webP, puedes usar la librería [sharp](https://www.npmjs.com/package/sharp). Puedes instalarla usando el comando npm:

```bash
npm install sharp
```

o Yarn,

```bash
yarn add sharp
```

El script a continuación busca todos los archivos de la carpeta *inputFolder* que contienen las extensiones .png, .gif y .jpg y los convierte a webP, guardándolos en la misma carpeta y con el mismo nombre pero con extensión .webp:

```js
const fs = require('fs');
const path = require('path');
const sharp = require('sharp');
const inputFolder = './input'; // Reemplaza este directorio por el tuyo donde tengas las imágenes que deseas convertir
const extensionsToConvert = ['.png', '.gif', '.jpg'];

async function convertToWebP(inputFilePath) {
  try {
    const image = sharp(inputFilePath);
    const imageInfo = path.parse(inputFilePath);
    const outputFilePath = path.join(imageInfo.dir, `${imageInfo.name}.webp`);

    await image.toFile(outputFilePath);
    console.log(`${inputFilePath} convertido a ${outputFilePath}`);
  } catch (err) {
    console.error(`Error conviertiendo ${inputFilePath} a WebP:`, err);
  }
}

function searchFiles(directory) {
  fs.readdir(directory, (err, files) => {
    if (err) {
      console.error('Error leyendo el directorio:', err);
      return;
    }

    files.forEach((file) => {
      const filePath = path.join(directory, file);

      fs.stat(filePath, (statErr, stat) => {
        if (statErr) {
          console.error('Error al leer el fichero:', statErr);
          return;
        }

        if (stat.isDirectory()) {
          searchFiles(filePath);
        } else {
          const fileExtension = path.extname(file).toLowerCase();
          if (extensionsToConvert.includes(fileExtension)) {
            convertToWebP(filePath);
          }
        }
      });
    });
  });
}

searchFiles(inputFolder);
```

El formato WebP se ha convertido en una herramienta de gran valor para los desarrolladores web que buscan optimizar el rendimiento de sus sitios. Su capacidad para ofrecer imágenes de alta calidad con tamaños de archivo más pequeños lo convierte en una elección inteligente para mejorar la experiencia del usuario, cumplir con las métricas de Web Vitals y acelerar el rendimiento de la página.


Convierte imágenes PNG, GIF y JPEG a un formato moderno como WebP con un script de Node.js

Script de Node.js para convertir imágenes a WebP

script-node-convertir-imagenes-webp

El mundo del desarrollo de software se ha especializado muchísimo a lo largo de los años. Después de terminar la programación de una nueva funcionalidad, empieza el proceso de entrega y distribución a su respectivo entorno de ejecución. Para lograr este objetivo, surgen procesos y metodologías, y entre las más destacadas se encuentran la **Integración Continua** (CI) y la **Distribución Continua** (CD). Estas prácticas se han convertido en el núcleo de la entrega de software eficiente y confiable, permitiendo a los equipos de desarrollo aumentar la velocidad y calidad de sus productos.

# ¿Qué significa CI/CD?

La Integración Continua (CI - *Continuous Integration*) es una metodología que aboga por la integración frecuente de fragmentos de código en un repositorio compartido. Con cada confirmación de código, se ejecutan pruebas automatizadas para detectar errores en el ciclo de desarrollo, lo que ayuda a mantener la estabilidad del proyecto.

Por otro lado, la Distribución Continua (CD - *Continuous Delivery*) amplía este concepto al automatizar el despliegue del software a través de múltiples etapas de prueba y entornos hasta finalmente a producción, garantizando una entrega constante, confiable y estable.

# ¿Qué es una *pipeline* en CI/CD?

Una *pipeline* representa el corazón de las metodologías CI/CD. Se trata de un conjunto de pasos automatizados que llevan el código desde su estado inicial hasta su implementación. Se compone de varias fases, como la compilación, pruebas unitarias, pruebas de integración, despliegue y monitoreo. Cada fase se conecta con la siguiente, creando así un flujo continuo que permite la detección temprana de errores y la entrega eficiente del software.

# Herramientas populares en CI/CD

Existen multitud de herramientas para implementar estas metodologías, entre las que destacan:

1. **GitHub Actions**: Integrado en la plataforma GitHub, permite crear flujos de trabajo personalizados para automatizar tareas de CI/CD directamente desde el repositorio.

2. **GitLab CI/CD**: Integrado directamente en la plataforma GitLab, aporta una solución integral para el desarrollo colaborativo, la CI y el despliegue continuo.

3. **Travis CI**: Ideal para proyectos de código abierto, ofrece una configuración sencilla y soporte para diversas plataformas, facilitando la integración y entrega continuas.

4. **CircleCI**: Con una configuración simple basada en archivos YAML, permite una rápida configuración de *pipelines* para proyectos en diferentes lenguajes de programación.

5. **Jenkins**: Uno de los sistemas de automatización de código abierto más antiguos y populares, que ofrece una amplia gama de plugins para integrar con diversas herramientas y tecnologías.

# Conclusión

La Integración Continua y la Distribución Continua se han convertido en pilares fundamentales para los equipos de desarrollo modernos. La implementación efectiva de CI/CD a través de *pipelines* automatizadas no solo acelera el tiempo de entrega, sino que también mejora la calidad del software al identificar y solucionar problemas rápidamente.

En resumen, CI/CD no es solo una metodología, es un cambio de paradigma que impulsa la innovación y la fiabilidad en el desarrollo de software.


¿Qué son y en que consisten las metodologías CI/CD?

Integración y distribución continua (CI/CD)

integracion-distribucion-continua


Para desarrollar aplicaciones web, el intercambio de datos entre el cliente y el servidor es una tarea fundamental. Para simplificar este proceso, existen numerosas herramientas y librerías que nos facilitan nuestra labor. Entre ellas, Axios es una de las librerías más populares para realizar solicitudes HTTP en Javascript, especialmente en entornos del navegador. A continuación, analizaremos su utilidad en comparación con la API nativa *fetch*, cómo se instala y un ejemplo de código para realizar solicitudes, además de otras características interesantes.

# Principales características

1. **Simplicidad y facilidad de uso:** Axios proporciona una interfaz simple y fácil de entender para realizar peticiones HTTP. Su sintaxis clara y concisa simplifica la escritura de código.

2. **Compatibilidad con promesas:** Axios utiliza promesas, lo que permite un manejo eficiente y sencillo de las respuestas asincrónicas.

3. **Soporte para Node y navegadores:** Axios puede utilizarse tanto en el entorno del navegador como en Node.js, lo que lo hace versátil y adaptable a diferentes contextos de desarrollo.

4. **Intercepción de solicitudes y respuestas:** Ofrece la capacidad de interceptar solicitudes y respuestas para realizar tareas como la configuración de encabezados o el manejo de errores de manera centralizada.

# ¿Por qué Axios en vez de la API Fetch?

En el lado del servidor Axios usa el modulo nativo http de Node, mientras que en el lado del cliente (navegador) usa XMLHttpRequests en vez de la API *fetch*. Si bien la API *fetch* proporciona funcionalidades básicas para realizar solicitudes HTTP, Axios ofrece varias ventajas significativas:

- **Compatibilidad con navegadores antiguos:** Axios maneja automáticamente la conversión de datos (por ejemplo: puede interpretar directamente los resultados en formato JSON) y ofrece una compatibilidad más amplia con navegadores más antiguos en comparación con *fetch*.

- **Manejo simplificado de errores:** Axios simplifica el manejo de errores al permitir la captura centralizada de errores en un bloque *catch*, facilitando el proceso de depuración.

- **Progreso de descarga** Axios lleva de fábrica el soporte para conocer el progreso de una descarga, mientras que con Fetch debes implementar tu propia solución usando ReadableStream.

# Instalación de Axios

Para utilizar Axios en un proyecto web, puedes instalarlo a través de npm, yarn,etc o incluirlo directamente desde un CDN en tu HTML.

Con npm:

```bash
npm install axios
```

Con yarn:

```bash
yarn add axios
```

Para incluirlo directamente en HTML:

```html
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
```

# Ejemplo de código de una petición GET

A continuación, un ejemplo básico de cómo realizar una solicitud GET utilizando Axios:

```js
// Importar Axios si se está utilizando un entorno de módulos
// import axios from 'axios';

// Realizar una solicitud GET a una API
axios.get('https://api.example.com/data')
.then(function (response) {
  // Manejar la respuesta exitosa
  console.log('Datos recibidos:', response.data);
})
.catch(function (error) {
  // Manejar errores de solicitud
  console.error('Error al obtener datos:', error);
})
.finally(function () {
  // siempre sera executado
});
```

En este ejemplo, `axios.get()` realiza una solicitud GET a la URL proporcionada y maneja la respuesta exitosa o los errores a través de los bloques `then` y `catch`, respectivamente.

# Interceptores

Los interceptores en Axios son funciones que se ejecutan antes de que se envíen las peticiones o después de recibir las respuestas. Estas funciones permiten la manipulación global de las peticiones y respuestas, lo que resulta útil para realizar acciones como modificar *headers*, manejar errores, autenticar peticiones, etc.

Aquí hay un ejemplo de cómo utilizar un *interceptor* para modificar los *headers* de las peticiones en Axios:

```js
// Agregar un interceptor para modificar los headers de las peticiones
axios.interceptors.request.use(function (config) {
  // Agregar un encabezado personalizado a todas las peticiones
  config.headers['Authorization'] = 'Bearer token'; // Ejemplo: Autenticación con un token
  
  return config;
}, function (error) {
  // Manejar errores de solicitud
  return Promise.reject(error);
});
```

En este ejemplo, `axios.interceptors.request.use` se utiliza para añadir un interceptor que se ejecutará antes de que se envíe cualquier solicitud. En la función, se modifica el objeto `config.headers` para agregar un encabezado de autorización con un token. Esto se aplica a todas las solicitudes realizadas con Axios.

# Gestión de errores

Axios proporciona una forma sencilla de manejar errores. Gestiona qué códigos son error directamente, sin que tengas que clasificarlos, por ejemplo:

```js
axios.get('https://api.example.com/data')
.catch(function (error) {
  if (error.response) {
    // La respuesta fue hecha y el servidor respondió con un código de estado
    // que esta fuera del rango de 2xx
    console.log(error.response.data);
    console.log(error.response.status);
    console.log(error.response.headers);
  } else if (error.request) {
    // La petición fue hecha pero no se recibió respuesta
    // `error.request` es una instancia de XMLHttpRequest en el navegador y una instancia de
    // http.ClientRequest en node.js
    console.log(error.request);
  } else {
    // Algo paso al preparar la petición que lanzo un Error
    console.log('Error', error.message);
  }
    console.log(error.config);
});
```
Aunque también puedes configurarlo explícitamente usando la propiedad *validateStatus*:

```js 
axios.get('https://api.example.com/data', {
  validateStatus: function (status) {
    return status < 500; // Resuelve solo si el código de estado es menor que 500
  }
})
```

# Conclusión

Axios es una librería muy complete, está bien mantenida y recibe actualizaciones regulares desde hace años. Es una buena opción para no tener que añadir funcionalidades extra encima de otras APIs de html5 como la API Fetch, lo que facilita realizar llamadas a servidores remotos en Javascript. Si deseas tener más información sobre esta librería puedes visitar su [repositorio en GitHub](https://github.com/axios/axios), o su [página oficial](https://axios-http.com/es/).


Cliente HTTP simple basado en promesas para el navegador y Node.js

Axios

axios


Hace un tiempo me encontré con [este vídeo en YouTube](https://www.youtube.com/watch?v=_61SxDrdyhI) del Dr. James O'Donoghue de la NASA que presenta una animación sobre el tiempo que tarda la luz desde que es enviada desde la Tierra hasta que llega a la Luna. Es una animación simple pero fascinante. Curiosamente, me recordó a JavaScript y cómo, al utilizar Promises, experimentamos una demora entre el envío de una petición y la recepción de una respuesta.

Más allá de esta analogía, me pareció interesante recrear la simulación de forma programática. Desconozco cómo el autor generó la animación. Es posible que haya utilizado algún lenguaje de programación, o incluso alguna aplicación de edición de video especializada como Adobe After Effects u otra similar.

En cualquier caso, intentaremos crear la simulación en JavaScript utilizando el elemento HTML canvas para representar el tiempo que tarda la información desde que es enviada desde el Planeta Tierra hasta que es recibida en nuestro satélite natural, la Luna.

# Datos físicos curiosos

La velocidad de la luz es asombrosamente rápida, viajando a aproximadamente 299.792 kilómetros por segundo. Esta velocidad constituye una constante fundamental en el universo y representa la rapidez con la que las ondas electromagnéticas se desplazan a través del espacio. Pero, ¿cómo influye esto en la comunicación entre la Tierra y la Luna?

Considerando la distancia promedio entre la Tierra y la Luna, que es aproximadamente 384.400 kilómetros, podemos calcular el tiempo que la luz tardaría en viajar desde nuestro planeta hasta el satélite. Al dividir la distancia entre ambos cuerpos celestes por la velocidad de la luz, obtenemos un resultado sorprendente: alrededor de 1.28 segundos. ¡Sí, tan solo 1.28 segundos para cubrir esa inmensa distancia!

```
tiempo = distancia / velocidad

tiempo = 384400 / 299792 = 1.2822223408229705 segundos
```

Aunque es poco tiempo, vemos claramente que no se podría mantener una comunicación en tiempo auténticamente real y habría una pequeña demora. Con las vastas distancias del universo, puedes imaginarte cómo sería comunicarse con planetas o satélites todavía más lejanos. 

# Simulación javascript

Ahora que ya tenemos una idea de los números, vamos a crear la simulación. Primero crearemos un archivo llamado index.html con un elemento canvas donde dibujaremos la animación:

```html
<canvas id="canvas" width="800" height="150"></canvas>
```
Luego añadiremos unos tags `<script></script>` y dentro escribiremos todo el código Javascript.

Primero debemos guardar en una variable la referencia del elemento canvas y su contexto dónde dibujaremos el resto de figuras:

```js
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
```

Seguidamente definimos algunas variables con información inicial:

```js
const actualDistanceKm = 384400;
const earthX = 50;
const earthY = canvas.height / 2;
const earthRadius = 20
const moonX = canvas.width - 50;
const moonY = canvas.height / 2;
const moonRadius = 10

let transmissionX = earthX + earthRadius;
let transmissionY = earthY;
let transmissionWidth = 10;
let transmissionHeight = 3;

const transmissionDuration = 1.255;
let isTransmitting = false;
let transmissionStartTime = 0;
let transmissionElapsedTime = 0;
let isReturning = false;
let progress = 0
```

Luego creamos una función *drawScene* que dibujará los elementos visibles como el Planeta Tierra, la Luna y la elipsis que representará la luz o información transmitida. Además también escribiremos por pantalla el tiempo de transmissión y la distancia recorrida:

```js
function drawScene() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  if (isTransmitting) {
    ctx.beginPath();
    ctx.ellipse(transmissionX, transmissionY, transmissionWidth, transmissionHeight, 0, Math.PI * 2, 0);
    ctx.fillStyle = '#fff';
    ctx.fill();
    ctx.closePath();
  }

  ctx.beginPath();
  ctx.arc(earthX, earthY, earthRadius, 0, Math.PI * 2);
  ctx.fillStyle = '#1831F5';
  ctx.fill();
  ctx.closePath();

  ctx.beginPath();
  ctx.arc(moonX, moonY, moonRadius, 0, Math.PI * 2);
  ctx.fillStyle = '#DAD9D7';
  ctx.fill();
  ctx.closePath();

  ctx.fillStyle = '#fff';
  ctx.font = '16px Arial';
  ctx.fillText(`Tiempo transcurrido: ${transmissionElapsedTime.toFixed(2)} segundos`, 10, 20);
  ctx.fillText(`Distancia recorrida: ${(progress >= 1 ? actualDistanceKm : progress * actualDistanceKm).toFixed(2)} kms`, 10, 40);
}
```

Finalmente escribiremos la función para iniciar la transmisión y la función para animarla:

```js
function startTransmission() {
  transmissionStartTime = performance.now();
  isTransmitting = true;
  requestAnimationFrame(animateTransmission);
}

function animateTransmission(timestamp) {
  if (isTransmitting) {
    transmissionElapsedTime = (timestamp - transmissionStartTime) / 1000;

    const totalTransmissionDuration = transmissionDuration;
    progress = transmissionElapsedTime / totalTransmissionDuration;

    if (!isReturning) {
      transmissionX = earthX + progress * (moonX - earthX);
    } else {
      transmissionX = moonX - progress * (moonX - earthX);
    }

    if (progress >= 1) {
      isTransmitting = false;
      isReturning = !isReturning
      setTimeout(() => {
        startTransmission();
      }, 1500);
    }
  }

  drawScene();
  if (isTransmitting) {
    requestAnimationFrame(animateTransmission);
  }
}
startTransmission();
```

Y aquí puedes ver el resultado final:

{{ demo 2024/01/simular-velocidad-luz-tierra-luna.1.html }}

Si te ha gustado la simulación te recomiendo que pruebes con otros parámetros. Como ejercicio podrías enviar información a Marte, te sorprenderá lo rápido que aumenta el tiempo que tarda la luz en llegar!


Cómo crear una simulación sobre el tiempo que se tarda a enviar información desde la Tierra hasta la Luna y viceversa.

Simular velocidad de la luz entre la Tierra y la Luna

simular-velocidad-luz-tierra-luna


# ¿Qué es NVM?

NVM (Node Version Manager) es una herramienta que sirve para poder cambiar rápidamente entre diferentes versiones de Node en un mismo entorno de desarrollo. Esto es especialmente útil ya que distintos proyectos pueden requerir versiones específicas de Node debido a diferencias en compatibilidad con las dependencias o características introducidas en versiones particulares.

Por ejemplo, algunos proyectos pueden requerir una versión más antigua de Node debido a la dependencia de librerías o módulos que aún no son compatibles con las versiones más recientes. Otros proyectos pueden aprovechar las últimas características y mejoras introducidas en las versiones más recientes de Node. En tales casos, NVM permite a los desarrolladores cambiar entre versiones fácilmente sin tener que desinstalar y reinstalar Node cada vez.

# Instalar NVM en Linux y Mac

Tanto en Linux como en Mac se puede instalar NVM de la misma manera.

## Ejecuta el instalador

Abre un terminal y ejecuta el siguiente comando:

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
```

Si quieres descargar la última versión puedes ver cuál es en la página de [GitHub de NVM](https://github.com/nvm-sh/nvm/releases).

## Actualiza la configuración de tu usuario

El instalador del paso anterior añade estas instrucciones automáticamente en ~/.zshrc o ~/.bash_profile.

```bash
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
```

Para que surtan efecto puedes reiniciar el terminal o bien ejecutar

```bash
source ~/.zshrc
```

o bien,
```bashrc
source ~/.bashrc
```

Para comprobar que se ha instalado correctamente puedes usar el comando
```bashrc
nvm -v
```

# Algunos consejos útiles para usar NVM

Para ver las versiones de Node que tienes instaladas puedes usar:
```bashrc
nvm list
```

Para instalar una versión específica:
```bashrc
nvm install 20
```

Para usar una versión en concreto:
```bashrc
nvm use 20
```

Para establecer una versión por defecto:
```bashrc
nvm use 20 --default
```

Finalmente, si en un proyecto creas un archivo .nvmrc y añades la versión a usar, al entrar en ese directorio se usara esa versión de Node automáticamente. Como ejemplo, puedes crear el archivo con este comando que escribirá la versión que estés usando en ese momento.
```
node -v > .nvmrc
```


Instala NVM para gestionar distintas versiones de Node para cada uno de tus proyectos.

Node Version Manager - NVM

nvm-node-version-manager


Obtener datos de un servidor en tiempo real es fundamental en muchas aplicaciones web modernas. Hay varias técnicas que se pueden utilizar para lograrlo, cada una con sus propias ventajas y casos de uso específicos. Aquí te mostraré las más conocidas:

# Short polling

Short polling es una técnica simple en la que el cliente realiza peticiones regulares al servidor a intervalos predefinidos para verificar si hay nuevos datos disponibles.

## Cómo funciona:

El cliente realiza una solicitud HTTP al servidor a intervalos regulares (por ejemplo, cada pocos segundos).
El servidor responde con los datos más recientes, si los hay, o con un mensaje indicando que no hay nuevos datos.

```js
async function shortPolling() {
  try {
    while (true) {
      const response = await fetch('URL_DEL_ENDPOINT'); // Realiza la solicitud al servidor
      const data = await response.json(); // Procesa la respuesta como JSON
      
      // Haz algo con los datos recibidos, por ejemplo escribirlos en la consola:
      console.log('Datos recibidos:', data);

      // Espera antes de realizar la próxima solicitud (por ejemplo, cada 5 segundos)
      await new Promise(resolve => setTimeout(resolve, 5000));
    }
  } catch (error) {
    console.error('Error en la solicitud:', error);
  }
}

// Llama a la función para iniciar el short polling
shortPolling();
```

## Ventajas:

- Fácil de implementar.
- Compatible con la mayoría de los navegadores y servidores web.

## Desventajas:

- Consumo innecesario de ancho de banda, ya que se realizan solicitudes incluso si no hay nuevos datos.
- Los datos se actualizan en la siguiente petición después que se modifiquen en el backend, es decir, no son inmediatos.

## Cuándo usarlo:

En aplicaciones donde la latencia no es un problema crítico y las actualizaciones periódicas que no requieren tiempos de respuesta instantáneos.

# Long polling

Long polling es una variante del polling en la que la solicitud del cliente se mantiene abierta hasta que el servidor tiene nuevos datos para enviar o hasta que se alcanza un tiempo de espera límite.

## Cómo funciona:

El cliente realiza una solicitud HTTP al servidor. Este retiene la solicitud dejando la conexión abierta hasta que tiene nuevos datos para enviar o hasta que se alcanza un tiempo de espera predefinido. Cuando hay nuevos datos o se alcanza el límite de tiempo, el servidor responde con los datos o una indicación de que no hay cambios.

La implementación también es similar a la de short polling, simplemente añadimos un header de *keep-alive* para que no se cierre la conexión. Hay que asegurarse de que la arquitectura del servidor permita estas conexiones.

```js
async function longPolling() {
  try {
    while (true) {
      const response = await fetch('URL_DEL_ENDPOINT', { method: 'GET', headers: { 'Connection': 'keep-alive' }});
      const data = await response.json();
      
      console.log('Datos recibidos:', data);

      // Vuelve a hacer la solicitud después de recibir los datos
    }
  } catch (error) {
    console.error('Error en la solicitud:', error);
  }
}

// Llama a la función para iniciar el long polling
longPolling();
```
La implementación del código del backend que gestiona las respuestas depende en gran medida del lenguaje usado.

## Ventajas:

- Reduce la carga del servidor en comparación con el polling frecuente.
- Los datos se entregan tan pronto como están disponibles, reduciendo la latencia en comparación con el short polling.

## Desventajas:

Puede consumir recursos del servidor al mantener conexiones abiertas.
No es tan eficiente como otras técnicas más recientes.

## Cuándo usarlo:

En aplicaciones donde la actualización inmediata de datos no es crítica pero se necesita una reducción significativa en la latencia en comparación con el short polling.

# Eventos push (Server-Sent Events - SSE)

Server-Sent Events (SSE) es una tecnología que permite al servidor enviar actualizaciones al cliente de forma asincrónica a través de una conexión HTTP única y de una sola vía.

## Cómo funciona:

El cliente establece una conexión persistente con el servidor a través de un objeto EventSource. Luego el servidor envía actualizaciones cuando hay nuevos datos disponibles. En caso de que la conexión se interrumpa, el navegador intenta automáticamente reconectarse.

```js
function escucharEventosServidor() {
  const eventSource = new EventSource('URL_DEL_ENDPOINT');

  eventSource.onopen = (event) => {
    console.log('Conexión establecida');
  };

  eventSource.onerror = (error) => {
    console.error('Error en la conexión:', error);
    eventSource.close();
  };

  eventSource.onmessage = (event) => {
    const data = JSON.parse(event.data);
    console.log('Datos recibidos:', data);

    // Haz algo con los datos recibidos
  };
}

// Llama a la función para iniciar la escucha de eventos del servidor
escucharEventosServidor();

```
## Ventajas:

- Fácil de usar y entender.
- Muy eficiente. Menor sobrecarga en comparación con el *polling* continuo y el servidor sólo envía la información necesaria.
- Si se cierra la conexión por algun motivo se reconecta automáticamente sin tener que implementarlo.

## Desventajas:

- Limitado a la transmisión unidireccional desde el servidor al cliente.
- Puede no ser compatible con los navegadores más antiguos.
- El protocolo estandard no permite pasar *headers* ni parámetros, por lo que se requieren librerías externas que implementen esta funcionalidad que a su vez dificultan depurar las respuestas.

## Cuándo usarlo:

Para aplicaciones que requieren actualizaciones en tiempo real y en las que la transmisión de datos desde el servidor al cliente es suficiente.

# WebSockets

Los WebSockets son un protocolo de comunicación bidireccional full-duplex que proporciona una conexión persistente entre el cliente y el servidor, permitiendo el intercambio de datos en tiempo real.

## Cómo funciona:

El cliente y el servidor establecen una conexión WebSocket a través de un handshake.
Una vez establecida la conexión, ambos pueden enviar y recibir datos simultáneamente sin la sobrecarga de las solicitudes HTTP.

```js
function conectarWebSockets() {
  const socket = new WebSocket('ws://URL_DEL_WEBSOCKET');

  socket.onopen = (event) => {
    console.log('Conexión establecida');
  };

  socket.onerror = (error) => {
    console.error('Error en la conexión:', error);
  };

  socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    console.log('Datos recibidos:', data);

    // Haz algo con los datos recibidos
  };
}

// Llama a la función para establecer la conexión WebSocket
conectarWebSockets();
```

## Ventajas:

- Baja latencia y sobrecarga reducida en comparación con otras técnicas.
- Comunicación bidireccional, lo que permite tanto al cliente como al servidor enviar datos en cualquier momento.

## Desventajas:

- Más complejo de implementar en comparación con otras técnicas.
- Requiere compatibilidad del servidor y del cliente.

## Cuándo usarlo:

En aplicaciones que requieren una comunicación bidireccional en tiempo real y baja latencia, como chats en vivo, juegos en tiempo real, aplicaciones colaborativas, etc.

# Conclusión

Elegir la técnica adecuada para obtener datos en tiempo real depende de los requisitos específicos de tu aplicación. En resumen:

- Utiliza Short Polling para actualizaciones periódicas no críticas.
- Emplea Long Polling si la latencia es un factor importante pero no es necesaria la comunicación bidireccional.
- Considera Eventos Push (SSE) para actualizaciones unidireccionales desde el servidor al cliente.
- Adopta WebSockets para aplicaciones que requieran comunicación bidireccional en tiempo real con baja latencia.

Es importante evaluar las necesidades de tu aplicación y las capacidades de compatibilidad antes de elegir la mejor opción.


Aprende diferentes estrategias para mostrar datos actualizados en tiempo real sin refrescar el navegador.

Actualizar datos en tiempo real

actualizar-datos-tiempo-real


Para indicar el progreso de finalización de una tarea, a menudo se utilizan elementos visuales para mejorar la experiencia del usuario y proporcionar una representación gráfica clara y rápida del estado de su avance.

Quizá habrás visto barras de progreso lineales, que son adecuadas para muchos casos de uso, pero los círculos de progreso círculares pueden ser más llamativos al ofrecer una sensación más dinámica y estéticamente agradable. Pero su implementación es algo más complicada. A continuación intentaremos desgranar todos los pasos para crear una imagen en formato vectorial SVG (Scalable Vector Graphic) y animarla con sólo CSS primero y después con algo de Javascript.

# Círculo SVG

Es posible crear este componente sólo con CSS, pero hacerlo con SVG ofrece algunas ventajas. Desde tener más control sobre su apariencia, hasta hacer más sencilla la animación como veremos más adelante.

La imagen del círculo estará compuesta en realidad por dos círculos. Uno representará la pista (o el fondo), el segundo mostrará el progreso actual. Aquí tenemos el código de la imagen:

```html
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="#eee" stroke-width="12" fill="transparent"  />
  <circle cx="50" cy="50" r="40" stroke="#00f" stroke-width="12" fill="transparent" class="progress"  />
</svg>
```

# Apariencia y estilos

Para mostrar la imagen deberemos aplicar algunas transformaciones y animaciones. Podemos usar el siguiente CSS para ello.

```css
svg {
  transform: rotate(-90deg);
}

.progress {
  stroke-dasharray: 251.327;
  stroke-dashoffset: 251.327;
  animation: progress 1s ease-in forwards;
}

@keyframes progress {
  to {
    stroke-dashoffset: 0;
  }
}
```

Primero aplicaremos una rotación de -90 grados para que la animación empieze desde la parte superior del círculo.

Luego nos valdremos de las propiedades **stroke-dasharray** para partir la linea en segmentos y **stroke-dashoffset** para establecer la ubicación a lo largo de una ruta SVG donde comenzará el patrón de guiones del trazo. Podemos usar las reglas *animation* y *@keyframes* en CSS para controlar los pasos de la animación.

En este primer caso sólo usaremos CSS debido a que no podemos modificar la propiedad de animación *@keyframes* una vez definida. Nos puede ser útil en casos donde sabemos el porcentaje total de progreso antes de renderizar la página.

Este es el resultado:

{{ demo 2023/12/svg-progreso-circular-animado.1.html }}

# Calcular progreso con stroke-dasharray y stroke-dashoffset

Para determinar los valores de **stroke-dasharray** y **stroke-dashoffset** basta con aplicar la siguiente fórmula:

```
circunferencia =  2 * Math.PI * radio 

dashOffset = circunferencia * ((100 - progreso) / 100) 
```

Con los tamaños de los círculos del ejemplo anterior sería:

```
circunferencia =  2 * 3.1415 * 40 = 251.327

dashOffset = 251.327 * ((100 - 100) / 100) = 0 // 100% del progreso
```

Hay casos en los que nos será útil modificar la variable de progreso de forma automática. Para ello debemos hacer algunos cambios en los estilos y usar Javascript como veremos en el siguiente punto.


# Modificar el valor del porcentaje dinámicamente

Si queremos variar el valor del porcentaje de progreso a mostrar de forma dinámica, no es conveniente usar las reglas *animation* ni *@keyframes*, y en cambio, usar la regla *transition*. Luego en Javascript podemos modificar la propiedad **stroke-dashoffset**, y la barra de progreso se moverá a la posición marcada de una forma fluida. Veamos cómo funciona:

```css
svg {
  transform: rotate(-90deg);
}

.progress {
  stroke-dasharray: 251.327;
  stroke-dashoffset: 251.327;
  transition: stroke-dashoffset 1s ease-in-out;
}
```
Con javascript añadimos algunas segundos de retraso entre cada modificación:

```js
const element = document.querySelector('.progress')
setTimeout(() => {
  element.style.strokeDashoffset = 0
}, 0)
setTimeout(() => {
  element.style.strokeDashoffset = 100
}, 1500)
setTimeout(() => {
  element.style.strokeDashoffset = 100
}, 3000) 
```

{{ demo 2023/12/svg-progreso-circular-animado.2.html }}


Fórmula para crear una barra de progreso circular animada usando una imagen SVG con CSS.

Barra de progreso animada con un SVG circular

svg-progreso-circular-animado


En Javascript podemos usar el objeto Date para gestionar fechas y horas, pero a medida que necesitemos operaciones más complejas el trabajo se vuelve más farragoso. Aunque existen varias alternativas, Day.JS es una librería sólida, que ocupa poco espacio y de uso bastante común. Además, si en el pasado usaste librerías antiguas como Moment.js, la sintaxis es muy parecida, por lo que es ideal en muchos aspectos.

# Instalación de la dependencia

Integrar de Day.js en un proyecto es muy sencillo. Puedes empezar ejecutando el siguiente comando en tu terminal según utilizes npm, yarn o pnpm:

```bash
npm install dayjs
```
o bien,
```bash
yarn add dayjs
```
o bien,
```bash
pnpm add dayjs
```

Una vez instalado, puedes importarlo y comenzar a utilizar Day.js en tu aplicación. Si utilizas ES 2015:

```js
import dayjs from 'dayjs'
```

o bien,

```js
const dayjs = require('dayjs')
```

# Ejemplos básicos

El uso de esta librería es muy intuitivo. Veamos algunos ejemplos básicos para entender su sintaxis.

## Obtener el objeto Date nativo

La función dayjs() nos devuelve un objeto con el formato de Day JS, si deseamos obtener el equivalente al objeto nativo Date de Javascript, podemos usar el método toDate()

```js
dayjs().toDate()
```

## Sumar días a una fecha:

```js
const sumarDia = dayjs().add(1, 'day')
```

## Restar días a una fecha:

```js
const sumarDia = dayjs().subtract(1, 'day')
```

## Para dar formato a una fecha

```js
const fechaFormateada = dayjs().format('DD/MM/YYYY')
```

## Formato

- **YY**, 23, año en dos dígitos
- **YYYY** 2023, año en cuatro dígitos
- **M** 1-12, mes empezando en 1
- **MM** 01-12, mes en dos dígitos
- **MMM** Jan-Dec, mes abreviado
- **MMMM** January-December, mes completo
- **D** 1-31, día del mes
- **DD** 01-31, día del mes, dos dígitos
- **d** 0-6, día de la semana, con Domingo en 0
- **dd** Su-Sa, día de la semana en su menor expresión
- **ddd** Sun-Sat, día de la semana abreviado
- **H** 0-23, hora
- **HH** 00-23, hora, dos dígitos
- **h** 1-12, hora, en formato de 12 horas
- **hh** 01-12, hora, en formato de 12 horas, dos dígitos
- **m** 0-59, minuto
- **mm** 00-59, minuto, dos dígitos
- **s** 0-59, segudo
- **ss** 00-59, segundo, dos dígitos
- **SSS** 000-999, milisegundos, tres dígitos
- **Z** +05:00 horas desplazadas de UTC, ±HH:mm
- **ZZ** +0500 horas desplazadas de UTC, ±HH:mm
- **A** AM PM
- **a** am pm

## Formato según el idioma

Hay ciertos formatos comunes que pueden ser localizados en cada idioma.

Requiere un plugin:
```js
import * as localizedFormat from 'dayjs/plugin/localizedFormat';
dayjs.extend(localizedFormat);

dayjs('01-02-2023').format('L'); 
// '01/02/2021'

dayjs('01-02-2023 23:59:59').format('LTS');
// '11:59:59 PM'
```

Tipos de formato:

- formato: **LT**, cadena en inglés: **h:mm A** -> 8:02 PM
- formato: **LTS**, cadena en inglés: **h:mm:ss A** -> 8:02:18 PM
- formato: **L**, cadena en inglés: **MM/DD/YYYY** -> 08/16/2023
- formato: **LL**, cadena en inglés: **MMMM D, YYYY** -> August 16, 2023
- formato: **LLL**, cadena en inglés: **MMMM D, YYYY h:mm A** -> August 16, 2023 8:02 PM
- formato: **LLLL**, cadena en inglés: **dddd, MMMM D, YYYY h:mm A** -> Thursday, August 16, 2023 8:02 PM
- formato: **l**, cadena en inglés: **M/D/YYYY** -> 8/16/2023
- formato: **ll**, cadena en inglés: **MMM D, YYYY** -> Aug 16, 2023
- formato: **lll**, cadena en inglés: **MMM D, YYYY h:mm A** -> Aug 16, 2023 8:02 PM
- formato: **lll**, cadena en inglés: **ddd, MMM D, YYYY h:mm A** -> Thu, Aug 16, 2023 8:02 PM

## Comparar si una fecha es anterior a otra

```js
const fecha1 = dayjs('2023-12-21')
const fecha2 = dayjs('2024-01-01')
const esAnterior = fecha1.isBefore(fecha2) // Devolverá true
```

## Diferencia entre dos fechas

```js
const fecha1 = dayjs('2023-02-24')
const fecha2 = dayjs('2021-07-07')

const diferenciaEnMilisegundos = fecha1.diff(fecha2)
console.log(diferenciaEnMilisegundos)
```

Si luego queremos, podemos transformar los milisegundos en otras unidades, por ejemplo, para saber la diferencia en meses:

```js
fecha1.diff(fecha2, 'month')
```

Las denominaciones disponibles son:

- days
- weeks
- quarters
- months
- years
- hours
- seconds
- milliseconds


## startOf y endOf
Métodos que devuelven el inicio o final de la unidad especificada, por ejemplo:

```js
dayjs().startOf('year').toDate();
// Sun Jan 01 2023 00:00:00

dayjs().endOf('year').toDate();
// Sun Dec 31 2023 23:59:59
```

## Modificar valores

Podemos modificar cualquier valor de una fecha especificada, por ejemplo:

```js
dayjs('1-1-2023').year(2021).toDate();
// Fri Jan 01 2021 00:00:00

dayjs('1-1-2023').date(31).hour(23).minutes(59).seconds(59).toDate();
// Sun Jan 31 2023 23:59:59
```

## Interpretar cadenas de texto

Si queremos transformar una cadena de texto a fecha, debemos importar un pluugin:
```js
import * as customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);

dayjs('06/02/95 2:00:00 PM -05:00', 'MM/DD/YY H:mm:ss A Z');
// Sun Jun 05 1995 20:00:00 GMT+0100
```

## Traducir a otro idioma

Se requiere importar un plugin

```js
import 'dayjs/locale/en-gb';
import * as localizedFormat from 'dayjs/plugin/localizedFormat';
dayjs.extend(localizedFormat);

dayjs().locale('en-us').format('ll'); // Dec 21, 2023
dayjs().locale('en-gb').format('ll'); // 21 Dec 2023
```

# Conclusión

Day.js ofrece muchas funcionalidades para facilitar el trabajo de manipulación de fechas y horas, además puede extenderse con plugins y usar diferentes idiomas. Recomendamos visitar la página oficial para acceder a toda la [documentación](https://day.js.org).

Gestiona la fecha y las horas en Javascript usando Day.js, librería que sólo ocupa 2kB.

Fecha y hora con Day.js

fecha-y-hora-con-day-js


# ¿Qué son las promesas en JavaScript?

Cuando desarrollamos aplicaciones web en Javascript, tarde o temprano necesitaremos ejecutar código asíncrono, y las promesas (Promises en inglés) son la herramienta más poderosa para hacerlo.

Es conveniente usar promesas cuando requerimos un valor que puede no estar disponible inmediatamente, pero que eventualmente se resolverá con un valor o rechazará con un motivo.

Veamos un ejemplo de una promesa:

```js
const miPromesa = new Promise((resolve, reject) => {
  // Ejemplo de operación asíncrona (puede ser una llamada a una API, lectura de archivos, etc.)
  setTimeout(() => {
    const exito = true; // Simulación de éxito o fallo
    if (exito) {
      resolve("¡La operación fue un éxito!");
    } else {
      reject(new Error("¡Algo salió mal!"));
    }
  }, 2000);
});

miPromesa();
```

# Manera común de encadenar promesas

Al ejecutar la promesa anterior, en determinados casos nos podría interesar ejecutar otra operación en caso que miPromesa terminara de forma exitosa. El encadenamiento de promesas implica utilizar los métodos then() y catch() para manejar el resultado o el error de una promesa y devolver otra promesa. Esta técnica permite ejecutar acciones secuenciales de manera clara y legible.

```js
miPromesa
  .then((resultado) => {
    console.log(resultado);
    return otroResultado; // Devuelve otra promesa. otroResultado podría ser una función igual que miPromesa
  })
  .then((otroResultado) => {
    console.log(otroResultado);
    return unTercerResultado; // Devuelve otra promesa
  })
  .then((unTercerResultado) => {
    console.log(unTercerResultado);
  })
  .catch((error) => {
    console.error("¡Hay un error!", error);
  });
```

En el ejemplo anterior, cada then() maneja el resultado de la promesa anterior y devuelve una nueva promesa, lo que permite encadenar múltiples operaciones asíncronas. Si en algún punto se produce un error en alguna promesa, el flujo de ejecución saltará al primer catch() disponible, lo que hace que sea fácil manejar errores en cualquier etapa del encadenamiento.

# Encadenar un número de promesas ilimitado de forma secuencial

El ejemplo anterior requiere escribir manualmente la ejecución secuencial de las promesas, pero, ¿cómo hacerlo si tenemos múltiples promesas que hay que ejecutar de forma dinámica? La clave está en añadir cada tarea en un array [], para luego recorrerla mediante un bucle y ejecutar cada tarea:

```js
// Ejemplo de funciones asíncronas que retornan promesas
function tareaAsincrona1() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("Tarea asíncrona 1 completada");
      resolve();
    }, 1000);
  });
}

function tareaAsincrona2() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("Tarea asíncrona 2 completada");
      resolve();
    }, 1500);
  });
}

function tareaAsincrona3() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("Tarea asíncrona 3 completada");
      resolve();
    }, 800);
  });
}

// Array de funciones asincronas
const tareasAsincronas = [tareaAsincrona1, tareaAsincrona2, tareaAsincrona3];

// Función para ejecutar las promesas de forma secuencial usando async/await
async function ejecutarSecuencial(tareas) {
  for (const tarea of tareas) {
    await tarea();
  }
}

// Llamar las funciones de forma secuencial usando async/await
async function ejecutarTareas() {
  try {
    await ejecutarSecuencial(tareasAsincronas);
    console.log("Se han completado todas las tareas");
  } catch (error) {
    console.error("Ha ocurrido un error:", error);
  }
}

// Invocar la función para ejecutar las tareas
ejecutarTareas();
```

De este modo encadenamos promesas manera clara, elegante y eficiente. Nos permite controlar el flujo de ejecución y facilitar la composición de operaciones asíncronas.


Técnica para ejecutar varias operaciones asíncronas de forma secuencial asegurando que una tarea comience sólo después de que la anterior haya sido completada con éxito.

Encadenamiento secuencial de promesas en JavaScript

encadenar-promesas-secuenciales-javascript

A veces, mientras diseñamos una página web, se puede dar el caso de que el elemento donde se encuentra nuestro contenido no llegue a la altura de la parte inferior de la página, lo que hace que el pie de página (también conocido como *Footer*) aparezca en el medio de la página en vez de al final. Como en la siguiente imagen:

![](2023/10/pie_pagina_footer.webp)

Para solucionar este problema podemos utilizar CSS y asegurarnos de que el *footer* permanezca en la parte inferior de la página, incluso si no hay suficiente contenido que lo empuje hacia abajo. Una buena estrategia es utilizar la disposición de elementos CSS *Flexbox*. Aquí tienes un ejemplo:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título de la página</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        .content {
            flex: 1 0 auto;
        }
        .footer {
            background-color: #f4f4f4;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            
        </div>
        <div class="footer">
            
            Contenido del pie de página
        </div>
    </div>
</body>
</html>
```
La clave está en la propiedad **min-height: 100vh** del *div* .container que asegura que el contenedor ocupe al menos la altura completa de la ventana gráfica (vh significa *viewport height* o altura de la ventana gráfica). La propiedad **flex: 1 0 auto;** en el *div* .content permite que crezca para llenar el espacio restante, empujando el pie de página hacia abajo.

Usando esta técnica, el pie de página siempre se pegará en la parte inferior de la página, independientemente de la cantidad de contenido presente.

Aprende a mantener el pie de página en la parte inferior de la misma, incluso cuando hay poco contenido, utilizando CSS.

Cómo mantener el pie de página al final de la misma en CSS

mantener-pie-de-pagina-al-final

Markdown se basa en una sintaxis simple y legible que te permite aplicar formato al texto de manera rápida y sencilla. A continuación, te mostraremos algunas de las características básicas de Markdown y cómo utilizarlas.

# Encabezados

Para crear encabezados en Markdown, utiliza el símbolo "#" seguido de un espacio y el texto del encabezado. El número de "#" indica el nivel del encabezado, siendo "#" para encabezados de nivel 1, "##" para nivel 2 y así sucesivamente. Aquí tienes un ejemplo:

```markdown
# Encabezado de Nivel 1

## Encabezado de Nivel 2

### Encabezado de Nivel 3

#### Encabezado de Nivel 4
```

Ejemplo:

# Encabezado de Nivel 1

## Encabezado de Nivel 2

### Encabezado de Nivel 3

#### Encabezado de Nivel 4

# Párrafos

Los párrafos en Markdown se crean simplemente escribiendo el texto sin ningún formato adicional. Deja una línea en blanco entre párrafos para separarlos:

```markdown
Este es un párrafo.

Este es otro párrafo.
```

# Énfasis

Puedes agregar énfasis al texto utilizando asteriscos (\*) o guiones bajos (_). Para texto en cursiva, encierra las palabras o frases entre un par de asteriscos o guiones bajos:

```markdown
_Texto en cursiva_
_Texto en cursiva_
```

_Texto en cursiva_  
_Texto en cursiva_

Para texto en negrita, utiliza dos asteriscos o guiones bajos:

```markdown
**Texto en negrita**
**Texto en negrita**
```

**Texto en negrita**  
**Texto en negrita**

# Listas

Markdown admite listas ordenadas y no ordenadas. Para crear una lista no ordenada, simplemente utiliza asteriscos, guiones o signos más seguidos de un espacio:

```markdown
- Elemento 1
- Elemento 2
- Elemento 3
```

- Elemento 1
- Elemento 2
- Elemento 3

Para listas ordenadas, utiliza números seguidos de un punto y un espacio:

```markdown
1. Primer elemento
2. Segundo elemento
3. Tercer elemento
```

1. Primer elemento
2. Segundo elemento
3. Tercer elemento

# Enlaces

Para crear enlaces en Markdown, utiliza la siguiente sintaxis:

```markdown
[Texto del enlace](URL)
```

Por ejemplo:

```markdown
[Visita Webtutoriales](https://www.webtutoriales.com)
```

[Visita Webtutoriales](https://www.webtutoriales.com)

# Imágenes

Para insertar imágenes, utiliza una sintaxis similar a la de los enlaces, pero con un signo de exclamación (!) antes:

```markdown
![Texto alternativo](URL de la imagen)
```

# Citas

Para crear citas o bloques de texto citado, utiliza el símbolo ">" al comienzo de la línea:

```markdown
> Esto es una cita.
```

# Líneas horizontales

Puedes agregar líneas horizontales para separar secciones de tu documento utilizando tres guiones, tres asteriscos o tres signos más en una línea:

```markdown
---
```

Se verá esta línea:

---

# Escape de caracteres

Si necesitas incluir un caracter especial que normalmente tendría un significado en Markdown, como un asterisco o un guión bajo, puedes escaparlo utilizando una barra invertida (\\):

```markdown
\*Texto con asterisco\*
```

# Tablas

Markdown permite crear tablas de una manera sencilla y legible. Las tablas se crean utilizando barras verticales `|` para delimitar las columnas y guiones `-` para separar la fila de encabezados de las filas de datos. Aquí tienes un ejemplo:

```markdown
| Nombre | Líneas |
| ------ | ------ |
| Go     | 25     |
| Java   | 30     |
| Kotlin | 28     |
```

# Bloques de código

Puedes utilizar bloques de código con resaltado de sintaxis para diferentes lenguajes. Especialmente para documentar código. Por ejemplo:

````markdown
```js
function sum(a, b) {
  return a + b
}
```
````

Esto mostrará el código con resaltado de sintaxis para JavaScript:

```js
function sum(a, b) {
  return a + b
}
```

# Listas de tareas

Markdown admite listas de tareas que son útiles para llevar un registro de tareas pendientes o completadas. Utiliza el signo menos `-`, seguido de `[ ]` para una tarea pendiente o `[x]` para una tarea completada:

```markdown
- [ ] Tarea pendiente
- [x] Tarea completada
```

- [ ] Tarea pendiente
- [x] Tarea completada

# Citas con múltiples párrafos

Puedes incluir citas con múltiples párrafos utilizando el símbolo `>` al comienzo de cada párrafo de la cita:

```markdown
> Esto es una cita.
>
> Esta es otra parte de la cita.
```

> Esto es una cita.

> Esta es otra parte de la cita.

# Comentarios

Algunas implementaciones de Markdown, como GitHub Flavored Markdown (GFM), admiten comentarios que no se mostrarán en el documento final. Puedes utilizar `` para finalizarlo:

```markdown

```

# Notas al pie

Markdown también admite notas al pie para añadir explicaciones o referencias a pie de página. Esto varía según la implementación, pero un ejemplo podría ser:

```markdown
[^1]: Esto es una nota al pie.
```

Y luego puedes referenciarlo en el texto principal como[^1].

Estas son algunas de las características avanzadas de Markdown que puedes utilizar para dar formato a tu contenido de manera efectiva. Con estas herramientas, puedes crear documentos más complejos y estructurados.

# Buenas prácticas

Algunas recomendaciones a tener en cuenta:

- Usa encabezados de manera adecuada para organizar tu contenido.
- Separa párrafos con líneas en blanco para mejorar la legibilidad.
- Utiliza énfasis (cursiva y negrita) con moderación para resaltar información importante.
- Formatea tus listas de manera consistente y utiliza listas ordenadas cuando sea necesario.
- Añade enlaces y referencias de manera clara.
- Verifica la visualización de tu Markdown en diferentes entornos para asegurarte de que se vea como esperas.

Exploramos la sintaxis básica de Markdown con ejemplos y compartimos algunas buenas prácticas para dar formato al texto de manera efectiva

Sintaxis y buenas prácticas en Markdown

sintaxis-y-buenas-practicas-en-markdown


¿Alguna vez te has preguntado cómo crear documentos con formato de manera rápida y sencilla sin necesidad de lidiar con complicados programas de edición? Markdown es la respuesta. Vamos a explorar Markdown, una herramienta de marcado ligero que ha ganado popularidad por su facilidad de uso y versatilidad. Nos introduciremos a Markdown y explicaremos sus principales características y cuándo es recomendable utilizarlo.

# ¿Qué es Markdown?

Markdown es un lenguaje de marcado ligero que permite dar formato al texto de una manera sencilla y legible, utilizando una sintaxis fácil de aprender. Fue creado por John Gruber y Aaron Swartz en 2004 con la idea de simplificar la creación de documentos formateados para la web. Desde entonces, se ha convertido en una herramienta ampliamente utilizada por escritores, bloggers, programadores y profesionales técnicos.

# Principales características de Markdown

Las principales características de Markdown incluyen:

1. **Sintaxis sencilla**: Markdown utiliza una sintaxis minimalista que consiste en utilizar ciertos caracteres especiales, como asteriscos y guiones, para aplicar formato al texto. Esto lo hace fácil de aprender y de escribir.

2. **Texto legible**: A diferencia de otros lenguajes de marcado más complejos, los documentos Markdown son legibles incluso en su forma sin formato. Esto facilita la colaboración y la edición.

3. **Soporte multiplataforma**: Puedes crear y editar documentos Markdown en una amplia variedad de aplicaciones y entornos, desde editores de texto simples hasta herramientas específicas para Markdown.

4. **Conversión a HTML**: Markdown se puede convertir fácilmente a HTML, lo que lo hace ideal para la creación de contenido web. La mayoría de las plataformas de blogging y sistemas de gestión de contenido (CMS) admiten Markdown de forma nativa.

5. **Portabilidad**: Los documentos Markdown son archivos de texto plano, lo que significa que son portátiles y se pueden abrir en casi cualquier dispositivo o plataforma.

# ¿Cuándo es recomendable usar Markdown?

Markdown es recomendable utilizarlo en diversas situaciones, incluyendo:

- **Creación de contenido web**: Si estás escribiendo artículos para un blog, documentación en línea o cualquier tipo de contenido web, Markdown es una excelente elección debido a su conversión sencilla a HTML.

- **Documentación técnica**: Los desarrolladores y profesionales técnicos a menudo utilizan Markdown para crear documentación de proyectos, ya que es una forma rápida y efectiva de organizar información técnica.

- **Comunicación en plataformas de colaboración**: Markdown es compatible con muchas plataformas de colaboración, como GitHub y GitLab, lo que facilita la creación y edición de documentación en equipo.

# Extensión de archivo y entornos de uso

Los archivos Markdown generalmente tienen la extensión ".md" o ".markdown". Puedes crear y editar archivos Markdown en una amplia variedad de entornos, que incluyen:

- **Editores de texto**: Puedes utilizar editores de texto simples como Notepad (Windows), Visual Studio Code o Sublime Text entre otros para escribir en Markdown.

- **Plataformas de blogging**: Muchas plataformas de blogging, como WordPress y Blogger, admiten Markdown como una opción de formato.

- **Herramientas en línea**: Hay varias herramientas en línea, como StackEdit y Dillinger, que te permiten crear y editar documentos Markdown directamente en tu navegador.

- **Plataformas de desarrollo**: GitHub, Bitbucket y GitLab son ejemplos de plataformas de desarrollo que utilizan Markdown para la creación de documentación técnica y READMEs de proyectos.

Markdown es una herramienta versátil que simplifica la creación de contenido formateado, lo que lo hace ideal para una variedad de situaciones.


Markdown es un lenguaje de marcas ligero, creado por John Gruber y Aaron Swartz que permite escribir utilizando un formato de texto plano fácil de escribir y leer y después convertirlo en un formato XHTML o HTML estructuralmente válido

Todos los artículos