
# 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

Introducción a Markdown

introduccion-a-markdown


Python es un lenguaje de programación versátil que se utiliza en una amplia y gran variedad de aplicaciones, incluyendo el desarrollo de páginas web. Una de las tareas comunes que puedes realizar con Python es ejecutar un servidor web local para probar tus aplicaciones web o sitios estáticos. En este artículo, mostraré cómo hacerlo tanto en Python 3 como en Python 2.

# Python 3

Python 3 es la última versión del lenguaje y se recomienda su uso en todos los proyectos nuevos. Para ejecutar un servidor web local en Python 3, sigue estos pasos:

1. Abre una terminal o línea de comandos en tu sistema.
2. Navega hasta el directorio donde se encuentra tu proyecto web o sitio estático. Puedes usar el comando cd para hacerlo.
3. Ejecuta el siguiente comando para iniciar un servidor web local en el puerto 8000 por defecto:

```bash
python3 -m http.server
```

Ahora, puedes acceder a tu sitio web local en tu navegador web ingresando la siguiente URL: http://localhost:8000 o http://127.0.0.1:8000

Algo muy útil es también poder acceder a este servidor local desde otra computadora de la red. Siempre que sepamos la dirección IP de la máquina dónde se ejecuta el servidor. El IP lo podemos obtener usando el comando `ipconfig` en Windows o `ifconfig` en Linux. Si los ordenadores están en la misma subred y no hay firewall que lo impida podremos ver el contenido del servidor desde otro pc.

# Versión antigua Python 2

Aunque Python 2 ya no recibe soporte oficial, es posible que tengas que trabajar con él en proyectos antiguos. Para ejecutar un servidor web local en Python 2, sigue estos pasos:

1. Abre una terminal o línea de comandos en tu sistema.
2. Navega hasta el directorio donde se encuentra tu proyecto web o sitio estático.
3. Ejecuta el siguiente comando para iniciar un servidor web local en el puerto 8000:

```bash
python -m SimpleHTTPServer
```

Igual que con Python 3, puedes acceder a tu sitio web local en tu navegador web ingresando la siguiente URL: http://localhost:8000

# Antes de terminar

Ejecutar un servidor web local en Python es una tarea sencilla y útil para el desarrollo y pruebas locales de aplicaciones web. Aunque Python 2 ya no se recomienda debido a la falta de soporte, todavía puedes usarlo en proyectos antiguos si es necesario. Sin embargo, se aconseja encarecidamente utilizar Python 3 para todos los proyectos nuevos, ya que ofrece mejoras significativas y un soporte continuo.

¡Espero que este artículo te haya ayudado a ejecutar un servidor web local en Python!


Levantar un servidor HTTP para páginas web estáticas de la forma más sencilla y rápida

Servidor web local con Python

servidor-web-local-python


Ejemplo de cómo crear una API Java (JAX-RS) con servicios REST usando Jersey con Eclipse en un proyecto MAVEN.

# Requisitos previos

Para completar este tutorial con éxito es necesario tener antes instalado Eclipse, el servidor Tomcat y tener nociones básicas de Java.

# ¿Qué es un servicio REST?

REST son las siglas de _Representational State Transfer_. Es una arquitectura de software para desarrollar servicios Web. Coloquialmente, un servicio web sirve para hacer una llamada a una url (normalmente HTTP) y obtener datos de respuesta del servidor (principalmente en formato JSON o XML).

En los últimos años los servicios web REST se han establecido como el modelo predominante en la Web, desplazando a otras arquitecturas como SOAP.

# JAX-RS y Jersey

JAX-RS es una API de Java para servicios web REST que forma parte de JAVA EE.

Jersey es un framework que simplifica todavía más el uso de JAX-RS extendiéndola y dándole más funcionalidades para los desarrolladores.

# Creación del proyecto en Eclipse

El primer paso será crear una aplicación llamada **ApiRest**. En eclipse vamos al menú **File > New > Dynamic Web Project**. Luego sólo escribimos el nombre del proyecto como en la imagen y le damos a finalizar.

![](2016/12/step1.webp)

# Cambiar el tipo de proyecto a Maven

MAVEN sirve para gestionar las dependencias del proyecto. Principalmente servirá para registrar las librerías externas que usa el proyecto con sus respectivas versiones. Para que eclipse trate el proyecto como un proyecto Maven, lo convertiremos. Para nos dirigimos a la ventana de Project Explorer (si no lo tenemos abierto en el menú Window > Show View > Project explorer), en la carpeta principal del proyecto le damos **click al botón derecho > Configure > Convert to Maven Project**. Lo dejamos tal cual está en la imagen y pulsamos finish.

![](2016/12/step2.webp)

Automáticamente se crea un archivo pom.xml en la raíz del proyecto que es donde manejaremos las librerías. Para este ejemplo usaremos las librerías asm.jar, jersey-bundle.jar, json.jar y jersey-server.jar. Para editar pom.xml podemos clickar encima de el con el botón derecho > Open with > Text editor y pegamos este XML:

4.0.0 ApiRest ApiRest 0.0.1-SNAPSHOT war src maven-compiler-plugin 3.5.1 1.8 1.8 maven-war-plugin 3.0.0 WebContent asm asm 3.3.1 com.sun.jersey jersey-bundle 1.19 org.json json 20140107 com.sun.jersey jersey-server 1.19 com.sun.jersey jersey-core 1.19

# Implementación de un servicio web

Hasta ahora todo lo que hemos hecho ha sido para crear y configurar el proyecto. Ahora creamos un servicio REST que devuelva, por ejemplo, un listado de usuarios. Pero antes crearemos un package donde almazenar nuestro código. Por convención se suele crear uno llamado com. En la carpeta ApiRest / Java Resources / src botón derecho **New > Package**. Ahora dentro de este package botón derecho > New > Class. Se nos abrirá una ventana y ponemos como nombre de la clase UsersService. Dentro de UsersService.java copiaremos este código:

```java
package com;

import java.util.ArrayList;
import java.util.List;

import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.Response;

import org.json.JSONException;

@Path("/users")
public class UsersService {
	private static final long serialVersionUID = 1L;

	@GET
	@Produces("application/json")
	public Response getUsers() throws JSONException {
		List users = new ArrayList<>();
		users.add(new User("admin"));
		users.add(new User("john"));
		users.add(new User("usuario2"));
		return Response.status(200).entity(users.toString()).build();
	}
}
```

También crearemos un POJO (Plain Old Java Object), una clase para definir el usuario:

```java
package com;

import javax.xml.bind.annotation.XmlElement;
import javax.xml.bind.annotation.XmlRootElement;

import org.json.JSONException;
import org.json.JSONObject;

@XmlRootElement
public class User {
	@XmlElement(name = "username")
	String username;

	public User() {
	}

	public User(String username) {
		this.username = username;
	}

	@Override
	public String toString() {
		try {
			return new JSONObject().put("username", username).toString();
		} catch (JSONException e) {
			return null;
		}
	}
}
```

# Compilar el proyecto

Hacemos clic sobre el botón derecho sobre el proyecto y seleccionamos Maven > Update Project. Y le damos a Ok. Luego otra vez el botón derecho sobre la carpeta del proyecto y le damos a Run as > Maven Build (la opción número 5). En el popup que se nos abre en la pestaña Main y el campo Goal escribimos **clean install** y luego pulsamos sobre Run.

Si todo ha ido bien deberías ver un mensaje de éxito parecido a este:

```log
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 10.046 s
[INFO] Finished at: 2016-12-28T17:35:36+01:00
[INFO] Final Memory: 17M/132M
[INFO] ------------------------------------------------------------------------
```

# Ejecutar el proyecto

Si ya tenemos instalado y configurado el servidor Tomcat para eclipse, podemos ir a la pestaña de Servers y en la instancia de **Tomcat Server at localhost** pulsamos el botón derecho y seleccionamos "Add and Remove..."

![](2016/12/step3.webp)

En la ventana que se abre movemos nuestra aplicación ApiRest de Available a Configured y le damos a Finish.

Ahora hay que configurar un web.xml para que el servidor tomcat. Crearemos un archivo web.xml dentro de la carpeta WebContent/WEB-INF y copiaremos el siguiente código XML:

```xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
	version="3.0">
	<display-name>ApiRest</display-name>
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.htm</welcome-file>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>default.htm</welcome-file>
		<welcome-file>default.jsp</welcome-file>
	</welcome-file-list>

	<servlet>
		<servlet-name>Jersey Web Application</servlet-name>
		<servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>Jersey Web Application</servlet-name>
		<url-pattern>/*</url-pattern>
	</servlet-mapping>
</web-app>
```

Para ejecutar la instancia del servidor pulsamos sobre el botón derecho del Tomcat y le damos a start. Al cabo de unos momentos ya podemos abrir el navegador y visitar la url [http://localhost:8080/ApiRest/users/](#). Si todo ha ido bien deberíamos ver un JSON con el siguiente contenido:

```json
[
  {
    "username": "admin"
  },
  {
    "username": "john"
  },
  {
    "username": "usuario2"
  }
]
```

Como resumen la estructura de directorios debería quedar así:

```
ApiRest/
---- src/
-------- com/
------------ User.java
------------ UsersService.java
---- WebContent/
--------WEB-INF/
------------web.xml
---- pom.xml
```


Ejemplo de cómo crear una API Java (JAX-RS) con servicios REST usando Jersey con Eclipse en un proyecto MAVEN.

Servicios REST con JAVA usando JAX-RS y Jersey

servicios-rest-con-java-usando-jax-rs-y-jersey


RVM es una herramienta de linea de comandos (principalmente linux) que permite instalar y gestionar fácilmente múltiples versiones de Ruby al mismo tiempo y distintas listas de gems.

Para instalarlo antes debemos instalar la aplicación CURL si aun no la tenemos:

```bash
sudo apt-get install curl
```

Curl servirá para descargar la última versión de rvm con el siguiente comando:

```bash
curl -sSL https://get.rvm.io | bash -s stable
```

Luego ejecutamos:

```bash
source /home/myuser/.rvm/scripts/rvm
```

Para ver que funciona correctamente escribimos:

```bash
rvm use
```

Y deberíamos ver el texto: `Now using system ruby.`

- Atención: Al abrir una nueva consola, es posible que al usar rvm use nos aparezca el siguiente texto:

```
RVM is not a function, selecting rubies with 'rvm use ...' will not work.
You need to change your terminal emulator preferences to allow login shell. Sometimes it is required to use \`/bin/bash --login\` as the command. Please visit https://rvm.io/integration/gnome-terminal/ for an example.
```

Para solucionarlo podemos editar el archivo .bashrc en nuestra carpeta home, /home/miusuario/.bashrc y añadir la instrucción al final del archivo:

```bash
source /home/myuser/.rvm/scripts/rvm
```

## Instalando versiones de Ruby

Ahora que a hemos instalado RVM ya podemos proceder a instalar diferentes versiones de Ruby. Para ver las versiones disponibles de Ruby podemos ejecutar la instrucción:

```bash
rvm list known
```

Podemos instalar una versión concreta, pero si queremos instalar la última versión estable ejecutamos:

```bash
rvm install ruby-head
```

Esto tardará un poco porque descargará y compilara la versión seleccioanda y sus dependencias.

Una vez terminada la instalación de Ruby, podemos ejecutar:

```bash
rvm list
```

Y nos aparecerá la versión instalada. Ahora crearemos una lista de Gems:

```bash
rvm gemset create myGemsList
```

Con este comando veremos que se ha creado correctamente nuestra lista de gems

```bash
rvm gemset list
```

Si nos fijamos la lista que hemos creado no está seleccionada por defecto. Para ello podemos usar

```bash
rvm gemset use myGemsList
```

Ahora podemos instalar las gems que queramos con la instrucción `gem install ...`

## Usar una versión de Ruby y un gemset por defecto al entrar a un directorio

Normalmente, como para cada proyecto usaremos una versión de ruby y una lista de gems concreta, nos interesará que al entrar al directorio automáticamente pasemos a usar esas configuraciones.

Para ello ejecutaremos el comando:

```bash
rvm --ruby-version use ruby-head@myGemsList
```

Se crearán dos archivos .ruby-gemset y .ruby-version con la información de las versiones a usar de modo que si cerramos la consola y volvemos a acceder al directorio, veremos que ya se están usando las versiones especificadas:

```bash
rvm list
rvm gemset list
```


Cómo gestionar distintas versiones de Ruby y listas de gems

Ruby Version Manager (RVM)

ruby-version-manager-rvm


Hemos recorrido internet y hemos recopilado trucos y ejemplos prácticos para que domines jQuery. Este artículo no trata de ser un manual, ni tan siquiera una guía para principiantes, sino una colección de consejos, buenas prácticas y trucos rápidos para trabajar con este framework Javascript de una forma productiva!

## Evento Ready forma corta

Si queremos ejecutar código cuando se ha cargado el contenido del objeto DOM, podemos usar el evento ready:

```js
$(document).ready(function () {
  // ...
})
```

¿Pero para qué escribir más cuando se puede escribir menos?

```js
$(function () {
  // ...
})
```

Por cierto, ¿sabías que se pueden registrar varios eventos _document ready_ en la misma página?

## ¿Está este objeto vacío?

Una manera elemental de comprobar si un objeto jQuery contiene o no elementos es utilizando la función length:

```js
$(function () {
  if ($('.activo').length) {
    // solo pasará por aquí si hay algun elemento con la clase .activo en el documento
  }
})
```

## Recorrer colecciones de objetos

Hacer bucles para recorrer arrays de objetos nunca fue más fácil:

```js
$(function () {
  $.each(
    [
      { titulo: 'agua' },
      { titulo: 'viento' },
      { titulo: 'fuego' },
      { titulo: 'hielo' },
    ],
    function (indice, objeto) {
      console.log(objeto.titulo)
    }
  )
})
```

## Encadenar funciones

Una de las funcionalidades más útiles de jQuery es que permite encadenar funciones, de forma que la salida de una función pueda ser la entrada de otra:

```js
$(function () {
  $.map(
    [
      { titulo: 'agua' },
      { titulo: 'viento' },
      { titulo: 'fuego' },
      { titulo: 'hielo' },
    ],
    function (objeto) {
      return objeto.titulo
    }
  )
    .sort()
    .reverse()
})
```

Este ejemplo manipula un array para devolver otro array que solo contiene títulos ['agua', 'viento', 'fuego', 'hielo'], luego lo ordena alfabéticamente, y finalmente lo ordena en orden inverso.

## Encadenar llamadas ajax de forma síncrona

Ajax significa asynchronous javascript and XML, y sirve para hacer llamadas remotas a un servidor. Las llamadas no son síncronas, es decir se hace la llamada y la ejecución del programa sigue para no bloquear al usuario. Sin embargo, hay ocasiones en que necesitamos un dato para poder hacer otra llamada. Es por eso que podemos encadenar peticiones una detrás de otra, por ejemplo:

```js
$(function () {
  $.when($.get('http://urldelapeticion'))
    .then(function (respuesta) {
      console.log(respuesta.responseText)
      return $.get('http://otraurl')
    })
    .then(function (otraRespuesta) {
      console.log(otraRespuesta.responseText)
    })
    .fail()
})
```

## Obtener el elemento padre más cercano hacia arriba

Una buena manera de navegar sobre el árbol de objetos del documento (DOM), es utilizar el método closest()

```js
$(function () {
  $('input').closest('form')
})
```

Devolverá el objeto más cercano hacia arriba que sea de tipo _form_

## Acceder al contenido de un iFrame desde la ventana padre

Aunque usar iframes no suele ser la mejor solución, cuando usemos una siempre nos vendrá saber cómo acceder a sus contenidos desde la ventana padre, es decir, la ventana que contiene el iframe. Para ello usaremos el método contents()

```js
$(function () {
  var iframe = $('iframe#miID').contents()
  // ahora ya podemos usar el método find para obtener elementos del iframe:

  iframe.find('.activo').hide()
  // esconde todos los elementos con la clase .activo de dentro del iframe
})
```

## Acceder a los atributos data de HTML5

En las etiquetas de HTML5 se pueden usar atributos personalizados para contener información varia para luego usarla en Javascript, por ejemplo:

`<div data-id="15" data-paises="['España', 'Argentina', 'México', 'Chile']"></div>`

Para acceder al tag de paises:

`$("div").data("paises"); // Devolverá el array de países ['España', 'Argentina', 'México', 'Chile']`

## Codificar y decodificar entidades HTML

Para codificar
`$("").text('<div class="activo""></div>').html()`

Devolverá el text: <div class="activo""></div>, en cambio si queremos volver a decodificarlo podemos usar:

`$("").html('cadena codificada').text()`

## Referencias y Créditos

Para escribir este artículo nos hemos basado en páginas como [http://stackoverflow.com/questions/182630/jquery-tips-and-tricks](http://stackoverflow.com/questions/182630/jquery-tips-and-tricks) (en inglés) y también en la propia experiencia.


Domina jQuery con ejemplos prácticos y eficaces para aumentar tu productividad.

Trucos y ejemplos imprescindibles jQuery

trucos-y-ejemplos-imprescindibles-jquery


**_Atención, esta librería es antigua. Hay alternativas como luxon, dayjs o datefns entre otras._**

La manipulación de la fecha y la hora en Javascript siempre ha causado dolores de cabeza a los desarrolladores. Es una de las partes más tediosas del lenguaje. Por suerte han aparecido librerías como momentjs que nos facilitarán enormemente trabajar con el objeto Date. Una vez hayas leído este artículo la encontrarás indispensable.

Puedes descargar la última versión de [moment.js](http://momentjs.com) en su página oficial. Este framework es gratuito y de código libre.

## Ejemplos básicos

Vamos a la acción con una serie de ejemplos:

Creamos un objeto moment

```js
const ahora = moment()
```

Creamos una fecha año, mes, dia

```
const fechaHoy = moment([2015, 3, 15]);
```

Hasta aquí nada nuevo, casi exactamente igual que crear un objeto Date de Javascript solo que con la nueva librería.

Hora actual

```js
moment().format('HH:mm:ss') // "15:46:28"
```

Día de la semana

```js
moment().day() // numérico indicando el número de día
moment().format('HH:mm:ss') // "15:46:28"
```

Mes actual

```js
moment().month // numérico indicando el número de mes
moment().format('HH:mm:ss') // "15:46:28"
```

Nombre del mes actual

```js
moment.months()[moment().month()] // en inglés: March
moment().format('HH:mm:ss') // "15:46:28"
```

## Trabajando con fechas

Vamos a complicar un poco las cosas:

```js
const fecha = moment([2000, 1, 1]) // 1/1/2000
```

¿Cuánto tiempo ha pasado?

```js
fecha.fromNow(true) // años que han pasado desde la fecha

fecha.add(20, 'years') // añade 20 años a la fecha

fecha.subtract(20, 'days') // resta 20 días a la fecha
```

Comprobar si una fecha es anterior a otra

```js
moment('2015-10-20').isBefore('2015-10-21')
```

Comprobar si es la misma fecha

```js
moment('2015-10-20').isSame('2015-10-20')
```

Comprobar si la fecha esta entre otras dos

```js
moment('2015-10-20').isBetween('2015-10-19', '2015-10-25')
```

Comprobar si un año es bisiesto

```js
moment([2000]).isLeapYear()
```

## Usar momentjs en español

Esta librería permite localizarla para el idioma español. Tan solo tenemos que añadir el archivo de las traducciones y definir el idioma antes de ejecutar cualquier otra instrucción:

```js
moment.locale('es')
```

Si necesitáis todos los idiomas podéis descargarlos en [http://momentjs.com/downloads/moment-with-locales.js](http://momentjs.com/downloads/moment-with-locales.js), pero aquí os dejo la versión en español:

```js
// moment.js locale configuration
// locale : spanish (es)
// author : Julio Napurí : https://github.com/julionc

(function (factory) {
    factory(moment);
}(function (moment) {
    cost monthsShortDot = 'ene,feb,mar,abr,may,jun,jul,ago,sep,oct,nov,dic.'.split(','),
        monthsShort = 'ene,feb,mar,abr,may,jun,jul,ago,sep,oct,nov,dic'.split(',');

    return moment.defineLocale('es', {
        months : 'enero,febrero,marzo,abril,mayo,junio,julio,agosto,septiembre,octubre,noviembre,diciembre'.split(','),
        monthsShort : function (m, format) {
            if (/-MMM-/.test(format)) {
                return monthsShort[m.month()];
            } else {
                return monthsShortDot[m.month()];
            }
        },
        weekdays : 'domingo,lunes,martes,miércoles,jueves,viernes,sábado'.split(','),
        weekdaysShort : 'dom,lun,mar,mié,jue,vie,sáb.'.split(','),
        weekdaysMin : 'Do,Lu,Ma,Mi,Ju,Vi,Sá'.split(','),
        longDateFormat : {
            LT : 'H:mm',
            LTS : 'LT:ss',
            L : 'DD/MM/YYYY',
            LL : 'D [de] MMMM [de] YYYY',
            LLL : 'D [de] MMMM [de] YYYY LT',
            LLLL : 'dddd, D [de] MMMM [de] YYYY LT'
        },
        calendar : {
            sameDay : function () {
                return '[hoy a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
            },
            nextDay : function () {
                return '[mañana a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
            },
            nextWeek : function () {
                return 'dddd [a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
            },
            lastDay : function () {
                return '[ayer a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
            },
            lastWeek : function () {
                return '[el] dddd [pasado a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
            },
            sameElse : 'L'
        },
        relativeTime : {
            future : 'en %s',
            past : 'hace %s',
            s : 'unos segundos',
            m : 'un minuto',
            mm : '%d minutos',
            h : 'una hora',
            hh : '%d horas',
            d : 'un día',
            dd : '%d días',
            M : 'un mes',
            MM : '%d meses',
            y : 'un año',
            yy : '%d años'
        },
        ordinalParse : /\\d{1,2}º/,
        ordinal : '%dº',
        week : {
            dow : 1, // Monday is the first day of the week.
            doy : 4  // The week that contains Jan 4th is the first week of the year.
        }
    });
}));
```

No olvides visitar la página oficial de momentjs para leer toda la documentación.


Librería javascript indispensable para manipular la fecha y la hora

Trabajando con moment.js

trabajando-con-moment-js


Hoy en día, al instalar un sistema operativo en una nueva máquina, siempre hay un paso de la instalación en que nos pide la zona horaria en la que nos encontramos. Incluso la mayoría de sistemas operativos, si tienen una conexión a internet es posible que ya nos la sugieran de forma automática.

Sin embargo, el otro día me encontré con un servidor Linux que administro que no tenía la hora real. Estaba desincronizado!

Para volver a sincronizarlo hay que seguir unos sencillos pasos. Primero hay que instalar la utilidad NTP si aún no la tenemos instalada. En un Debian o Ubuntu podemos ejecutar desde la linea de comandos la instrucción:

```bash
sudo apt-get install ntp
```

Ahora procederemos a configurar esta herramienta. Con algun editor de texto (por ejemplo nano) abrimos el archivo de configuración:

```bash
sudo nano /etc/ntp.conf
```

En este documento hay muchas opciones de configuración, pero las que nos interesan son las del tipo:

```
server 0.ubuntu.pool.ntp.org
server 1.ubuntu.pool.ntp.org
server 2.ubuntu.pool.ntp.org
server 3.ubuntu.pool.ntp.org
```

Estas lineas corresponden a las urls de los servidores con los que queremos sincronizar la fecha y la hora. Puedes cambiarlas por servidores más cercanos al alojamiento de tu servidor. Por ejemplo si tienes hospedado la máquina en España, puedes ir a esta página [http://www.pool.ntp.org/zone/es](http://www.pool.ntp.org/zone/es), y reemplazar los servidores por defecto por estos:

```
server 1.es.pool.ntp.org
server 3.europe.pool.ntp.org
server 0.europe.pool.ntp.org
```

Para cualquier otra zona puedes buscar por continentes: [http://www.pool.ntp.org/es/](http://www.pool.ntp.org/es/).

Guardamos el archivo y salimos a la linea de comandos. Ahora reiniciamos el servicio para aplicar los cambios. En la linea de comandos escribimos:

```bash
/etc/init.d/ntp restart
```

Para comprobar que la fecha es la correcta ejecutamos el comando:

```bash
date
```


Cómo configurar la hora y fecha de nuestra máquina con la hora real de manera automática.

Cómo sincronizar la hora de Linux

como-sincronizar-la-hora-de-linux


Antes de HTML5, la información de las aplicaciones sólo se podía guardar en cookies.

Tanto localStorage, como sessionStorage como las cookies, son soluciones que sirven para guardar información en el cliente, pero cada una tiene sus particularidades.

## localStorage y sessionStorage

Aunque HTML5 ya es un estándar en los principales navegadores modernos, hay versiones anteriores que no soportan este tipo de almacenamiento. Estos son los principales navegadores y las versiones en las que localStorage y sessionStorage son compatibles:

- Internet Explorer: 8.0
- Firefox: 3.5
- Chrome: 4.0
- Safari: 4.0
- Opera: 11.5

La única diferencia entre localStorage y sessionStorage, es que en localStorage se guarda la información de forma persistente en el navegador, es decir, si el usuario cierra el navegador y vuelve a entrar en la web, la información aun seguirá disponible.

En cambio, en sessionStorage, la información sólo dura lo que dure la sesion del navegador. Al cerrar la ventana se perderá la información.

También hay que decir que el sessionStorage sólo sirve para la ventana que se está viendo. Si el usuario abre un enlace de la aplicación en una nueva ventana o un nuevo TAB, esta información tampoco estará disponible.

localStorage y sessionStorage son útiles para persistir información no sensible entre páginas. Nunca debería guardarse información sensible como pueden ser las contraseñas o información que puedan comprometer la seguridad del usuario.

Veamos cómo funcionan. Para guardar un elemento en localStorage y sessionStorage podemos hacer

```js
localStorage.setItem('color', 'rojo');
sessionStorage.setItem('color', 'rojo');
```

Para obtener un valor que ya está guardado en localStorage o sessionStorage:
```js
localStorage.getItem('color');
sessionStorage.getItem('color');
```

Si queremos guardar información más compleja podemos usar JSON.stringify para guardar
```js
localStorage.setItem('objeto', JSON.stringify({a: 1}));
```
y JSON.parse para cargar datos:

```js
const obj = localStorage.getItem('objeto');
JSON.parse(obj);
```

## Cookies

Las cookies también pueden ser leídas por el usuario y no se debe guardar información comprometida. Este tipo de información siempre tiene que guardarse en la sesión del servidor.

Además, como las cookies se suelen usar para autentificación, todas las cookies válidas para una página se envían del navegador al servidor en cada petición del mismo dominio. Es decir, por cada petición que el navegador haga al servidor, ya sea una página html o una llamada ajax, imágenes o fuentes se envía una cookie. Es por esta razón que las cookies no deben almacenar demasiada información. Lo más común es usar cookies para guardar tokens (identificadores encriptados) que identifican la sesión del usuario en el servidor, o bien para hacer un seguimiento de publicidad.

Las cookies sólo permiten guardar strings (cadenas de texto), mientras que los otros dos sistemas permiten guardar objetos primitivos Javascript como integers, strings, pero no arrays ni objetos. Para guardar estos últimos también se suele serializar y codificar el objeto en JSON.

## Conclusión

La información de sesión se debe controlar por la aplicación desde el servidor. Es el mejor lugar para almacenar información de caracter sensible. Sin embargo, el principal inconveniente es la escalabilidad. Como desde el servidor no hay manera de saber si un usuario cierra el navegador o visita una página externa, la información de sesión deberá expirar al cabo de un tiempo para evitar que consuman todos los recursos del servidor.

Finalmente, hay que mencionar que los tres sistemas de almacenamiento estan sujetos a la regla del mismo dominio "same-origin", que significa que los navegadores no permitirán acceder a información de dominios distintos del que se está realizando la petición.


Diferentes maneras de almacenar información del usuario en el navegador web

Cookies vs localStorage vs sessionStorage

cookies-vs-localstorage-vs-sessionstorage


Protractor es un framework para crear tests _end-to-end_. Sirve para automatizar pruebas sobre la aplicación que se quiera probar utilizando un navegador real e interaccionado como lo haría un usuario.

Aunque Protractor está diseñada para probar el framework javascript AngularJS, en este artículo lo configuraremos para que pueda probar cualquier tipo de aplicación javascript.

## Instalar Protractor

Para ejecutar Protractor antes hay que tener instalado Node.js para poder usar el gestor de paquetes NPM. Si ya lo tienes instalado, desde la linea de comandos escribe la instrucción:

```bash
npm install -g protractor
```

Se instalará **Protractor** y la herramienta **webdriver-manager**. Para ver que se ha instalado correctamente ejecuta la siguiente instrucción que nos dará la versión instalada:

```bash
protractor --version
```

La herramienta webdriver-manager es una utilidad que sirve para emular las acciones de un usuario que se definirán mediante los tests. Para descargar selenium usa el comando:

```bash
webdriver-manager update
```

Una vez instalados los binarios, inicia el servidor con:

```bash
webdriver-manager start
```

Este servidor es una instancia de Selenium, que debes dejar abierta mientras se ejecutan los tests. Puedes abrir la url en **http://localhost:4444/wd/hub** para ver el estado del servidor.

Aunque no es necesario, en nuestro caso escribiremos los tests en coffeescript, un lenguaje para escribir javascript de forma más sencilla y leíble, para ello hay que instalar el módulo de node coffee-script:

```bash
npm install -g coffee-script
```

Antes de ejecutar los tests, antes hay que configurarlos. Para ello se crea un archivo lamado **conf.js** con el siguiente contenido:

```js
require('coffee-script/register')
baseUrl = "http://localhost"

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: [
    '*.spec.coffee'
  ],
  baseUrl: baseUrl,
  capabilities: {
    'browserName': 'chrome'
  },
  onPrepare: function() {
    browser.ignoreSynchronization = true
    browser.manage().timeouts().pageLoadTimeout(40000)
    browser.manage().timeouts().implicitlyWait(25000)
  }
}
```

Este de archivo de configuración es en Javascript (.js) y cargamos con el require los comandos que parsearán el coffeescript.

También definimos la url del servidor selenium, los archivos que contienen los tests (en nuestro caso los que terminen con la extensión .spec.coffee), la url base de nuestra APP, el driver del navegador que se usará (en este caso chrome) y finalmente setearemos la variable **browser.ignoreSynchronization** a true, para indicarle que no es una aplicación AngularJS para que no intente sincronizarla como tal.

## Escribir tests

Ahora vamos a definir un test de ejemplo. Para ello creamos un script llamado **test.spec.coffee**:

```js
describe "Sesion de un usuario", ->
  it "inicio sesión de un usuario", ->
    browser.get("/")
    expect(browser.getTitle()).toEqual('Login')
    element(By.id('username')).sendKeys("nombreusuario")
    element(By.id('password')).sendKeys("contraseña")
    element(By.id('login')).click()
```

El ejemplo visita una página de login, rellena el usuario y password y le da click al botón "login".

Para ejecutar el test desde la consola usamos
```bash
protractor conf.js --verbose
```

La opción --verbose sirve para que muestre por la consola los mensajes de detallados del test cuando falla o salta una excepción.

Si todo ha ido bien, veremos como se abre una pantalla del navegador chrome y se van realizando los pasos definidos automáticamente.


Tests automáticos javascript con Protractor, el framework de testing de AngularJS

Testing javascript End 2 End con Protractor

testing-javascript-end-2-end-con-protractor


LESS es un lenguaje que sirve para generar archivos en formato CSS. La principal ventaja es que facilita el desarrollo de nuevas funcionalidades a los diseñadores. Permitiendo el uso de funciones (conocidos como mixins), importar archivos y operaciones matemáticas entre otras.

Los navegadores solo saben procesar archivos CSS es por eso que debemos convertir los LESS a CSS utilizando las herramientas que instalaremos a continuación.

Primero hay que instalar NodeJS que se puede descargar desde la página oficial [http://node.org](http://nodejs.org). Una de las cualidades de NodeJS es que trae una herramienta llamada npm (node package manager), que permite instalar otras aplicaciones o dependencias.

Una vez instalado Node, crearemos un archivo llamado **package.json**. Este archivo gestionará los paquetes que necesitaremos para poder compilar less. El contenido de este archivo es el siguiente:

```json
{
  "name": "nombre",
  "version": "1.0.0",
  "description": "Compilación archivos LESS a CSS",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-less": "^0.12.0"
  }
}
```

Podéis modificar el contenido del archivo con vuestros datos, pero lo más importante son las **devDependencies** que indican que necesitaremos instalar Grunt y Grunt-contrib-less.

Una vez guardado el archivo, abrimos la linea de comandos y en la misma ruta donde lo hayamos guardado y ejecutamos el comando:

```bash
npm install
```

Este comando instalará las dependencias citadas anteriormente.

## ¿Qué es GruntJS?

GruntJS es un gestor de tareas que sirve para automatizar trabajo repetitivo. Para que compilen los archivos less, creamos un archivo llamado **Gruntfile.js** e introducimos el siguiente código:

```js
module.exports = function (grunt) {
  // Project configuration
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    path: 'c:/tmp',
    less: {
      development: {
        options: {
          yuicompress: true,
          compress: true
        },
        files: {
          '<%= path %>/ruta-donde-guardaremos-el-css/application.css': [
          '<%= path %>/ruta-archivo-less/application.less']
        }
      }
    }})

    grunt.loadNpmTasks('grunt-contrib-less')
    // Default task(s).
    // task for build. Executed by default when using command 'grunt'
    grunt.registerTask('default', ['less'])
}
```

Tendremos que configurar las rutas definiendo un **path** base, que será la ruta del directorio principal de donde tengamos los css, y luego, al configurar LESS, pondremos la ruta del archivo css que saldrá compilado y la ruta de los archivos less de origen que queremos compilar.

Finalmente, para generar los archivos CSS, desde la linea de comandos escribiremos:

```bash
grunt
```

Se generaran los archivos CSS. Opcionalmente hemos puesto que se compriman y minimizen los archivos de manera que ocupen menos espacio cuando los subamos a internet.


Introducción al gestor de tareas javascript GruntJS para compilar archivos LESS a CSS

Usar GruntJS para compilar archivos LESS

usar-gruntjs-para-compilar-archivos-less


Ionic es un framework de código abierto optimizado para crear aplicaciones para teléfonos móviles. La principal característica de esta herramienta, es que permite crear aplicaciones híbridas en HTML, Javascript y CSS.

La plataforma está construida sobre otro popular framework de Javascript, Angular JS. Por lo que es recomendable conocerlo antes de aventurarnos a programar con ella.

Ionic está pensada para usar las API's nativas de Apache Cordova, que son un conjunto de herramientas que nos dan acceso directo al uso del hardware del teléfono como la cámara, el gps o el acelerómetro utilizando Javascript.

## Instalar Ionic JS

Antes de instalar Ionic, deberemos instalar [NodeJS](http://nodejs.org), para poder descargar paquetes y dependencias de Ionic.

Una vez instalado abrimos una linea de comandos y ejecutamos:

```bash
npm install ionic -g
```

Ahora instalaremos Cordova:

```bash
npm install cordova -g
```

Ionic soporta un conjunto de comandos para manejar la aplicación de forma sencilla. Para crear una aplicación usaremos:

```bash
ionic start miaplicacion blank
```

En este caso el nombre de nuestra app es **miaplicacion** y **blank** es el nombre de la plantilla que usaremos. Si accedemos a la carpeta miaplicacion, veremos la estructura de archivos y directorios de nuestra APP.

Si nos fijamos, hay una carpeta llamada www, que es donde se guardan los archivos HTML, CSS, y Javascript por defecto que usará nuestra aplicación.

## Ejecutar la aplicación en el navegador

Para testear nuestra aplicación de la forma más sencilla, es probarla en nuestro navegador. Para ello, desde la linea de comandos, nos situaremos en la carpeta **miaplicacion** y ejecutamos la instrucción:

```bash
ionic serve
```

Se abrirá el navegador apuntando a la url **http://localhost:8100** con nuestra aplicación. Podemos redimensionar manualmente la pantalla del navegador para ver como se adapta el diseño responsive.

## Ejecutar la aplicación en un emulador

Para probar la aplicación en un emulador, primero debemos descargarlo. Para usar un emulador android podemos ejecutar el comando:

```bash
ionic platform add android
```

Una vez instalado, compilamos el código de nuestra APP para dejarlo preparado para el emulador:

```bash
ionic build android
```

Y finalmente ejecutamos el emulador:

```bash
ionic emulate android
```

Se abrirá una aplicación que que simula un teléfono móvil y automáticamente veremos nuestra APP en la aplicación.

Para más información sobre otros emuladores como el IOS de apple, puedes visitar la página [https://ionicframework.com/docs/intro/cli](https://ionicframework.com/docs/intro/cli).

### Ejecutar la aplicación directamente en el dispositivo móvil

Finalmente, para ejecutar la aplicación en el dispositivo podemos ejecutar:

```bash
ionic run android
```

Este comando compilará y ejecutará la aplicación. Si tenemos el dispositivo conectado al PC, y configurado para permitirlo, veremos como se instala la aplicación APK en el móvil.


Framework para crear aplicaciones híbridas HTML5 para smartphones y dispositivos móviles

Empezando con Ionic Framework

empezando-con-ionic-framework


## Instalar MongoDB

Primero descargar la base de datos desde la página oficial [www.mongodb.org/downloads](http://www.mongodb.org/downloads) manualmente. O bien usar el comando:

```bash
cd /tmp
wget http://downloads.mongodb.org/linux/mongodb-linux-x86_64-2.6.7.tgz
```

Luego extraer los archivos comprimidos

```bash
tar -zxvf mongodb-linux-x86_64-2.6.7.tgz
```

Creamos un directorio, por ejemplo en la carpeta /opt y copiamos los archivos descomprimidos:

```bash
sudo mkdir -p /opt/mongodb
sudo mv mongodb-linux-x86_64-2.6.7/\* /opt/mongodb/
```

Finalmente, exportaremos la ruta de los binarios en la variable PATH del sistema para que la base de datos sea accesible en la linea de comandos desde cualquier sitio. Esto lo haremos en el archivo .bashrc, situado en la carpeta del usuario. Lo abriremos con algun editor de texto, por ejemplo:

```bash
sudo nano ~/.bashrc
```

Y al final del archivo escribiremos:

```bash
export PATH=/opt/mongodb/bin:$PATH
```

Para que los cambios surtan efecto escribiremos:

```bash
source ~/.bashrc
```

Ahora hay que crear la carpeta física donde se guardaran los documentos de mongo. Por defecto los creamos en /data y le damos permisos de escritura:

```bash
sudo mkdir /data
sudo mkdir /data/db
sudo chmod uo+w /data/db
```

Finalmente, para usar la base de datos MongoDB, usaremos el comando

```bash
mongod --smallfiles
```

para iniciar la base de datos, y el comando

```bash
mongo
```

para iniciar una instancia de cliente desde donde poder hacer consultas NoSQL.


Instalación paso a paso de la base de datos MongoDB en entornos linux

Instalar MongoDB en Linux

instalar-mongodb-en-linux


En el mundo del desarrollo web, Javascript está viviendo una época dorada. Con páginas web visitadas cada vez por más usuarios, aparecen librerías y frameworks que nos facilitan la creación de aplicaciones interactivas pensadas para soportar millones de visualizaciones.

## Introducción a KnockoutJS

Este artículo presenta **Knockout JS** ([knockoutjs.com](http://knockoutjs.com/)). KnockoutJS es una librería de código libre escrita en javascript que sigue el patrón de arquitectura de software Model-View-ViewModel (MVVM).

Este patrón de diseño es muy parecido al clásico Modelo-Vista-Controlador (MVC) que usan otros frameworks como Ruby on Rails, Zend Framework de PHP, o ASP.NET MVC. La principal diferencia entre MVVM y MVC, sin entrar en demasiados tecnicismos, es que en el modelo de MVVM, existe la posibilidad de compartir datos transversalmente del modelo a la vista y viceversa de forma automática. Esto es lo que se conoce como "data-binding". Veremos un ejemplo más adelante.

## Ejemplo de data-binding

Para crear una aplicación Knockout JS lo primero que hay que hacer es crear un archivo HTML y cargar la librería. Podemos descargar Knockout de la página oficial y guardar el archivo en local o bien usar una CDN como la de Microsoft. Por ejemplo, en un archivo HTML escribimos:

```html
<html>
  <head>
    <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
  </head>
  <body>
    <div id="aplicacion">
    </div>
  </body>
</html>
```

Una vez cargada la librería, vamos a definir un ViewModel, que contendrá las propiedades y métodos así como la lógica de la aplicación. Para ello se crea un archivo Javascript: ViewModel.js, que añadiremos a continuación de haber cargado la librería en los encabezamientos HTML de la página:

```html
<script src="ViewModel.js"></script>
```

Knockout JS utiliza lo que se conoce como _observables_ para marcar una variable como tal, de modo que si su valor se modifica, se actualize automáticamente en la vista.

```js
function ViewModel(){
  var nombre = ko.observable();
}
```

Una vez creado el View Model, hay que aplicarlo a la vista HTML donde tendrá efecto. Si te fijas, hemos creado un DIV con el id "aplicacion". Con la siguiente instrucción realizamos esta asignación:

```js
ko.applyBindings(new ViewModel(), document.getElementById('aplicacion'));
```

Ahora vamos a lo divertido. Creamos una etiqueta HTML input text para que el usuario entre texto y automáticamente se escriba abajo:

```html
<input data-bind="value: nombre" />
  <div data-bind="text: nombre">
</div>
```

## Código completo

index.html

```html
<html>
  <head>
    <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
    <script src="ViewModel.js"></script>
  </head>
  <body>
    <div id="aplicacion">
      <input data-bind="value: nombre" />
      <div data-bind="text: nombre">
      </div>
    </div>
  </body>
</html>
```

ViewModel.js

```js
function ViewModel(){
  var nombre = ko.observable();
}
ko.applyBindings(new ViewModel(), document.getElementById('aplicacion'));
```


Knockout JS es una librería opensource con licencia MIT para desarrollar aplicaciones web interactivas.

Empezando con KnockoutJS en Javascript

empezando-con-knockoutjs-en-javascript


Hay muy pocos artículos en la red sobre cómo testear automáticamente Javascript. En este tutorial veremos cómo hacerlo, y para ello instalaremos Node JS (servidor y gestor de módulos Javascript), PhantomJS (un navegador webkit para NodeJS) y CasperJS (una utilidad para crear scripts de navegación y testing).

Antes de empezar necesitamos el sistema de control de versiones GIT, lo puedes instalar usando la instrucción:

```bash
sudo apt-get install git
```

Para más formas de instalación del GIT puedes visitar la [página oficial](http://git-scm.com/book/en/Getting-Started-Installing-

Git). Una vez instalado clonaremos el repositorio GIT de NodeJS, lo compilaremos e instalaremos.

## Instalar NodeJS

```bash
git clone https://github.com/joyent/node.git
cd node
./configure
make
sudo make install
```

Una vez instalado (puede tardar un rato) podemos ejecutar **node -version** y nos tiene que devolver la versión que se ha instalado.

## Instalar PhantomJS

Procederemos a instalar PhantomJS. El parámetro -g sirve para indicar que se instale para todo el sistema.

```bash
sudo npm install phantomjs -g
```

También podemos ejecutar el comando **phantomjs --version** para comprobar que se ha instalado correctamente.

## Instalar CasperJS

Para instalar CasperJS haremos lo mismo, instalar el módulo mediante Nodejs:

```bash
sudo npm install casperjs -g
```

Con **casperjs --version** nos aparecerá la versión que se ha instalado.

## Ejemplo de testing

Genial! si has llegado hasta aquí es que todo se ha instalado correctamente, en caso contrario no dudes en preguntar en los comentarios.

A continuación veremos un ejemplo de testing que integra CasperJS con PhantomJS. Para ello creamos un archivo en una ruta conocida con algun editor de textos un archivo llamado **tests.js** y guardamos el test a continuación.

```js
casper.test.begin('La búsqueda en Google retorna 10 o más resultados', 5, function suite(test) {
  casper.start("http://www.google.es/", function() {
    test.assertTitle("Google", "el titulo de la página es el esperado");
    test.assertExists('form[action="/search"]', "encontrado el formulario de búsqueda");
    this.fill('form[action="/search"]', {
    q: "webtutoriales"
    }, true);
  });

  casper.then(function() {
    test.assertTitle("webtutoriales - Buscar con Google", "el título en la búsqueda es correcto");
    test.assertUrlMatch(/q=webtutoriales/, "el término de búsqueda se ha enviado correctamente");
    test.assertEval(function() {
    return __utils__.findAll("h3.r").length >= 10;
  }, "la búsqueda google por \"webtutoriales\" devuelve más de 10 resultados");
  });

  casper.run(function() {
          test.done();
  });
});
```

Este test se encarga de realizar una búsqueda en google de la palabra clave "webtutoriales" y comprueba que devuelve resultados. Para ejecutar el test podemos ejecutar la siguiente instrucción desde la consola:

```bash
casperjs tests.js
```

Veremos si los tests han pasado o no.

```
# La búsqueda en Google retorna 10 o más resultados
PASS el titulo de la página es el esperado
PASS encontrado el formulario de búsqueda
PASS el título en la búsqueda es correcto
PASS el término de búsqueda se ha enviado correctamente
PASS la búsqueda google por "webtutoriales" devuelve más de 10 resultados
PASS 5 tests executed in 1.191s, 5 passed, 0 failed, 0 dubious, 0 skipped.
```

Como habrás observado estas librerías son muy potentes. Entre otras cualidades, también se permiten hacer capturas de pantalla. Para ver más opciones visita la documentación oficial de [casperjs](http://docs.casperjs.org/en/latest/).


Tutorial para instalar un kit para realizar testing automático en Javascript en Linux

Instalar Nodejs, PhantomJS y CasperJS

instalar-nodejs-phantomjs-y-casperjs


Twitter Bootstrap es un kit de diseño Open Source desarrollado por [@mdo](http://twitter.com/mdo) y [@fat](http://twitter.com/fat) de Twitter y ayudados por una multitud de colaboradores gracias a la herramienta colaborativa [GitHub](https://github.com/twitter/bootstrap).

[Twitter Bootstrap](http://twitter.github.com/bootstrap/) es un framework front-end diseñado para facilitar y agilizar el desarrollo de páginas web. Bootstrap proporciona estilos para maquetar nuestras páginas de forma eficiente y compatible con todos los navegadores del mercado: desde estilos para navegación, tablas, botones, formularios y tipografías, hasta una manera estándar de organizar los elementos en una cuadrícula de filas y columnas.

Una de las mayores ventajas de utilizar este framework es que te permite crear una página web muy rápida que se verá bien en todos los navegadores, con soporte HTML5 y utilizando los últimos patrones de diseño como diseño responsivo para adaptar nuestro sitio a móviles y tablets.

Twitter Bootstrap también dispone de un conjunto de componentes CSS comunes en el diseño de páginas web. La mayoría de estos componentes los podremos copiar y pegar en nuestro código HTML para luego rellenarlos con contenido.

También ofrece plugins Javascript habituales en el diseño de páginas web como ventanas modales, manejo de transiciones, desplegables, pestañas y carrusel de imágenes entre otros.

Bootstrap utiliza LESS para codificar el CSS, permitiendo de esta forma reducir el código necesario y utilizar variables configurables para adaptar el diseño a nuestro sitio. También es recomendable usar LESS para sobreescribir el CSS con nuestras propias reglas sobre el framework adaptándolo así a nuestro diseño sin perder el potencial de la herramienta.


Repaso al framework front-end Twitter Bootstrap

Twitter Bootstrap

twitter-bootstrap


AngularJS es un magnífico framework para crear aplicaciones Javascript que se ejecutan en el navegador. Una de sus mayores virtudes es que permite desarrollar potentes aplicaciones con muy poco código y facilitar el testing de la misma aplicación.

Veamos un ejemplo rápido. Copia y pega este código en un archivo HTML y ábrelo en el navegador.

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"></script>
  </head>
  <body>
    <div>
      <label>Texto:</label>
      <input type="text" ng-model="texto" placeholder="Escribe cualquier texto aquí">
      <h1>{{texto}}</h1>
    </div>
  </body>
</html>

AngularJS está basado en el patrón de diseño MVC (Model, Vista, Controlador). Una de sus mayores particularidades es la capacidad de actualizar la vista automáticamente cuando cambia el modelo y viceversa. Haciendo innecesaria la manipulación del DOM de la página. Este proceso se llama **databinding** y consiste en sincronizar la información con el elemento en que se muestra de forma automática y de manera que si se altera la información, el cambio se refleje también en el elemento HTML.

Para aprender como funciona el framework, lo más recomendable es empezar con el tutorial de la página oficial que podéis encontrar en [http://docs.angularjs.org/tutorial](http://docs.angularjs.org/tutorial) . Para probar los ejemplos se requiere el sistema de control de versiones GIT e instalar nodejs para instalar un servidor de testing llamado Testacular.


Framework javascript para hacer aplicaciones del lado del cliente de forma rápida y eficaz

AngularJS

angularjs


## Redis: Introducción

Redis es una base de datos NoSQL. Es una base de datos no relacional y funciona a modo de clave-valor. A diferencia de las bases de datos relacionales como MySQL, Oracle y PostgreSQL entre otras, las bases de datos NoSQL ofrecen una velocidad de lectura rapidísima, lo que las hacen muy útiles en algunos tipos de aplicaciones web, donde la velocidad de obtención de datos es mucho más importante que su relación.

## Instalar Redis

La página oficial de Redis recomienda descargar la versión estable de la base de datos y compilarla. Redis no tiene dependencias aparte del compilador GCC y libc. Que vienen en la mayoría de las distribuciones linux de hoy en día como Ubuntu, o CentOS.

Podemos descargar el código de la página oficial:

```bash
wget http://download.redis.io/redis-stable.tar.gz
tar xvzf redis-stable.tar.gz
cd redis-stable
make
sudo make install
```

Se compilará e instalará Redis. Por defecto la instalación colocará los ejecutables de redis redis-server y redis-cli en /usr/local/bin/.

Para iniciar el servidor manualmente basta con escribir el comando

```bash
redis-server
[14608] 12 Feb 12:22:00.510 # Warning: no config file specified, using the default config. In order to specify a config file use redis-server /path/to/redis.conf
[14608] 12 Feb 12:22:00.519 # Unable to set the max number of files limit to 10032 (Operation not permitted), setting the max clients configuration to 3984.
[14608] 12 Feb 12:22:00.521 # Warning: 32 bit instance detected but no memory limit set. Setting 3 GB maxmemory limit with 'noeviction' policy now.
...
```

Redis no encuentra los archivos de configuración y setea unos valores por defecto, esto es completamente correcto. En caso de querer usar una configuración especial podemos pasarle como parámetro la ruta del archivo de configuración al comando redis-server, por ejemplo:

```bash
redis-server /ruta/a/redis.conf
```

## Conectarse al servidor Redis con el cliente

Una vez instalado el servidor, ya podemos conectarnos con el cliente para probar que funciona todo correctamente. Con el servidor redis-server activo, abrimos otra consola y ejecutamos el comando:

```bash
redis-cli ping
```

Si todo va bien como respuesta recibiremos PONG por la linea de comandos.

La base de datos ya está activada y lista para ser usada como base de datos no relacional.


Instalar la base de datos NoSQL Redis paso a paso en linux

Instalar Redis

instalar-redis


## Diseño Responsive

Con la aparición de los móviles y las tabletas, cada una con una forma y tamaño de pantalla distinta, es insostenible para un desarrollador web tener que adaptar una versión diferente para cada tipo de dispositivo. Para poder tratar este problema, se ha acuñado el término "responsive", haciendo referencia a un tipo de diseño que se adapta al tamaño de las pantallas en la que se muestra. La forma de aplicar este diseño en CSS es usar media queries.

## Media queries

En CSS 2.0 se pueden usar las media type para indicar el tipo de estilos a usar según el tipo de dispositivo que se está usando (impresora o pantalla).

```html
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="printer.css" media="print" />
```

Las **media queries** están disponibles desde la versión 3 de CSS y permiten especificar más detalles en las reglas de las hojas de estilos.

Un ejemplo de regla de media query:

```css
@media (min-width: 768px) and (max-width: 979px) {
  font-size: 40px;
}
```

Esta regla define los estilos CSS que se usarán cuando la pantalla tenga una dimensión de entre 768px y 979px. En el ejemplo, cuando la pantalla esté entre estas dimensiones, el tamaño de letra será de 40px.

Una buena forma de probar que las media queries funcionan sin tener que usar distintos dispositivos, es modificar manualmente el tamaño de la ventana.


¿Qué es el diseño responsive y para qué sirven las media queries en CSS?

Diseño responsive y media queries

diseno-responsive-y-media-queries


Para testear flujos de pago en nuestras aplicaciones web, existen generadores online de números aleatorios de tarjetas de crédito. Aquí van algunos:

## VISA

- 4716245607395918
- 4556501377698698
- 4485067333438500
- 4130507834714957
- 4539207007105748

## Mastercard

- 5599235200289948
- 5141187842229100
- 5397482635892136
- 5302266481433267
- 5101625439959736

## Discover

- 6011117422478327
- 6011164320118472
- 6011865018075457
- 6011932278303944
- 6011538786036767

## American Express

- 372879201198238
- 344542328731050
- 374869257468765
- 370534447271297
- 373192193115908

_\*Atención_: Estos números de tarjetas de crédito fueron generados de forma automática en la web [Get Credit Card Numbers](http://www.getcreditcardnumbers.com/) y sólo sirven para hacer pruebas en entornos de testing propios. Cualquier uso ilícito en aplicaciones web reales pueden ser constituyentes de fraude.


Ejemplos de números de tarjetas de crédito para usar a modo de test

Números de tarjetas de crédito

numeros-de-tarjetas-de-credito


Font Reactor ha lanzado una herramienta para convertir fuentes para la web. El [@font-face kit generator](http://www.fontreactor.com/font-face-generator) convierte tipografías en formato ttf, o otf en aptas para ser usadas en la web.

El funcionamiento es muy simple, se sube una tipografía y se le da a generar al formulario. Nos bajamos el archivo zip que trae consigo las fuentes generadas (.ttf, .otf, .woff), así como una muestra de archivo HTML y CSS con el código necesario para usar las letras en nuestra web.


Herramienta para usar cualquier tipo de letra en nuestra web usando la regla css @font-face

Generar fuentes para la web

generar-fuentes-para-la-web


Si tenemos un dominio http://dominio.com y queremos redireccionarlo a http://www.dominio.com y también todas las páginas interiores lo podemos hacer con el siguiente código en el archivo de configuración de sitios de Nginx. Depende de cada caso, pero normalmente los archivos de configuración de cada dominio están en la carpeta sites-available, por ejemplo: **/etc/nginx/sites-available/dominio.conf**.

```
server {
  server_name dominio.com;
  rewrite ^(.\*) http://www.dominio.com$1 permanent;
}

server {
  server_name www.dominio.com; # resto de la configuración
}
```

Esto suele ser útil para evitar que algunos buscadores traten los contenidos como duplicados.


Añadir www en las urls automáticamente con Nginx

Redireccionar dominio a 'www' con Nginx

redireccionar-dominio-a-www-con-nginx


Oracle instant client es un cliente que nos permite conectar nuestra aplicación web a la base de datos Oracle.

La instalación de este cliente es algo complicada ya que hay poca documentación y el sitio oficial de Oracle no lo pone muy fácil para instalarlo. En este artículo instalaremos Oracle instant client en Ubuntu.

En la página oficial de Oracle descargaremos el [cliente](http://www.oracle.com/technetwork/database/features/instant-client/index-097480.html). Es necesario registrarse para poder descargarlo.

Seleccionamos el cliente que nos interesa, generalmente:

Instant Client for Linux x86

Aceptamos el acuerdo de licencia y seleccionamos **oracle-instantclient11.2-basic-11.2.0.3.0-1.i386.rpm** y **oracle-instantclient11.2-devel-11.2.0.3.0-1.i386.rpm**.

Podemos descargar también el SQL Developer, que es un programa de escritorio que se utiliza para hacer consultas y programar en PL/SQL en la base de datos Oracle, pero no lo necesitamos para conectar nuestra aplicación web a Oracle.

En Ubuntu/Debian los instalables suelen empaquetarse en archivos acabados en extensión .deb y los archivos descargados son .rpm, por lo que necesitaremos reconvertirlos. Para ello usaremos la aplicación alien, que si no la tenemos instalada podemos hacerlo con:

```bash
sudo apt-get install alien
```

Luego reconvertimos los archivos .rpm a .deb con:

```bash
alien oracle-instantclient11.2-basic-11.2.0.3.0-1.i386.rpm
alien oracle-instantclient11.2-devel-11.2.0.3.0-1.i386.rpm
```

y luego usaremos el comando dpkg para instalarlos:

```bash
dpkg -i oracle-instantclient11.2-basic-11.2.0.3.0-1.i386.deb oracle-instantclient11.2-devel-11.2.0.3.0-1.i386.deb
```

# Instalar extensión oci8 en PHP

Si deseamos instalar el driver en PHP para poder conectar con una base de datos Oracle, podemos usar PECL para que nos lo instale. Usaremos:

```bash
sudo apt-get install libaio1
sudo apt-get install pecl
sudo pecl install oci8
```

Finalmente añadimos la extensión a php.ini, normalmente el archivo está en /etc/php5/apache/php.ini, y podemos añadir la linea en cualquier parte del archivo:

```bash
extension=oci8.so
```

Si se ha instalado correctamente, con la instrucción phpinfo() de PHP deberíamos ver el módulo OCI8.


Instalar el cliente de Oracle para conectarse usando PHP en Ubuntu

Oracle Instant Client en Ubuntu

oracle-instant-client-en-ubuntu


Presentamos un nuevo videotutorial para crear un efecto de texto en Photoshop parecido a un letrero con luz de neon. Los pasos a seguir son bastante simples. Aunque el tutorial está pensado para Photoshop CS6 o superiores, es compatible con versiones anteriores.

La letra usada para el logo es la fuente [neon](http://www.fontreactor.com/foundries/fenotype/neon), si os interesa otra fuente podéis navegar por los tipos de letra de la misma web [http://www.fontreactor.com](http://www.fontreactor.com)

La imagen de fondo usada como bloques de ladrillo podéis usar cualquiera de las [imagenes de Google](https://www.google.es/search?hl=es&q=bloques+de+ladrillo&bav=on.2,or.r_gc.r_pw.r_qf.&biw=1680&bih=925&um=1&ie=UTF-8&tbm=isch&source=og&sa=N&tab=wi&ei=_69VUOHTL426hAet0oFA#um=1&hl=es&tbm=isch&sa=1&q=bricks&oq=bricks&gs_l=img.3..0l10.3572.4202.0.4312.6.6.0.0.0.0.179.607.0j4.4.0...0.0...1c.1.L8O59Dnka-8&pbx=1&bav=on.2,or.r_gc.r_pw.r_qf.&fp=fa49fae0458b586c&biw=1680&bih=925).

Por último, recomiendo ver el video en HD a tamaño completo para ver los detalles correctamente.


Tutorial para crear paso a paso un efecto de texto de tipo neon en Photoshop CS6

Efecto de texto NEON con Photoshop

efecto-de-texto-neon-con-photoshop


A continuación os presentamos un script para generar sprites de iconos en GIMP. El script está codificado en Python.

Funciona en cualquier documento (PSD, etc) con un tamaño definido que será la dimensión del icono. En cada una de las capas se debe poner una imagen que representa el icono y con un nombre de capa determinado que luego se usará para definir los estilos CSS.

Para ejecutar el script dentro del editor gráfico GIMP (gratuito y de código abierto), tan solo hay que guardar este código en un archivo .py, por ejemplo **sprites.py** en la carpeta de Ubuntu: ~/.gimp-2.6/plug-ins (esto es dentro de nuestra home, por ejemplo, /home/miusuario/.gimp-2.6/plug-ins).

Luego reiniciamos el editor, abrimos el archivo donde tenemos las imágenes por capas y vamos al menú **Python-Fu > SpriteTool > Generate Sprites**

```python
#!/usr/bin/env python

# -*- coding: utf-8 -*-

from gimpfu import *

def to_sheet(image, drawable):
margin = 0
max_columns = 4

    css_output = ""
    col = 0
     row = 0

    number_of_layers = float(len(image.layers))
    sprite_x, sprite_y = image.width, image.height

    new_doc_width = max_columns * sprite_x + (max_columns - 1) * margin
    new_doc_height = math.ceil(number_of_layers  / max_columns) * sprite_y + ( math.ceil(number_of_layers  / max_columns) - 1) * margin

    image.resize(int(new_doc_width), int(new_doc_height), 0, 0)

    image.undo_group_start()

    # Move layers in sheet
    for layer in image.layers:
    if col > max_columns - 1:
    	col = 0
    	row += 1

    layerXPosition = layer.offsets[0]
    layerYPosition = layer.offsets[1]

    x = col * (sprite_x + margin);
    y = row * (sprite_y + margin);

        layer.set_offsets(x, y)
    col += 1
    	css_output += "\\n.icon-%(size_x)sx%(size_y)s-%(layer_name)s\\t{ background-position:  %(x_position)spx %(y_position)spx; }" % dict(size_x=sprite_x, size_y=sprite_y, layer_name = layer.name, x_position = ((-x) if (x != 0) else '0'), y_position = ((-y) if (y != 0) else '0') )

    image.undo_group_end()

    print css_output

if _name_ == '_main_':
register(
"redimensionar_imagen",
"Redimensionar imagen",
"Redimensionar imagen",
"",
"",
"2012",
"/Python-Fu/SpriteTool/Generate Sprites", "RGB*, GRAY*", [], [], to_sheet) main()
```

Script en Python para generar sprites de iconos con el editor gráfico GIMP

Generar sprites con Python y GIMP

generar-sprites-con-python-y-gimp


En las páginas web los formularios son elementos básicos para obtener información de los usuarios. Existen multitud de razones para crear un formulario y en la mayoría de webs encontrarás alguno, desde cajas de búsqueda, encuestas, introducción de datos para la identificación, etc.

En este artículo veremos la estructura básica de un formulario HTML y los componentes más habituales que lo forman.

Un ejemplo de formulario HTML podría ser este:

```html
<label for="name">Nombre:</label><input id="name" type="text"></input>
<label for="surname">Apellido:</label><input id="surname" type="text"></input>
```

En un formulario intervienen varios elementos. En el ejemplo anterior tan sólo se escriben las instrucciones para crear elementos del formulario: el formulario en sí mismo con la etiqueta **form**, las etiquetas label y los campos input.

## Consideraciones

Hay que tener en cuenta que un formulario como el del ejemplo no realiza ninguna acción. Para ello se utiliza la instrucción action, que es la ruta que manejará los datos del formulario. Para tratar estos datos suelen usarse lenguajes de lado del servidor como PHP, Ruby, Python, Java o cualquier otro que sea capaz de leer peticiones. Además, también hay que definir el método "method" que es cómo se enviarán los datos por el protocolo HTTP. Post suele ser el más habitual, pero también se permiten peticiones GET, PUT y DELETE. Aunque también depende del lenguaje o framework que se usará para interpretar los datos enviados.

También hay que decir que este formulario es solamente HTML, es decir, que no lleva maquetación, por lo que se necesitarían estilos CSS para estructurar el formulario gráficamente.


Estructura básica de un formulario en HTML

Formulario HTML

formulario-html


En linux existe una herramienta para rotar los logs del sistema, de modo que no se generen archivos de tamaño desorbitado y nos llene todo el espacio del disco.

La herramienta se llama **logrotate** y es muy sencilla de utilizar. La configuración general de logrotate se puede encontrar en /etc/logrotate.conf

Para configurar logrotate para unos logs en concreto, podemos crear un archivo en /etc/logrotate.d/

Podemos crear un archivo en esa carpeta para definir los logs que rotarán. Pueden haber varios definiciones en un mismo archivo. Un ejemplo de rotación podría ser:

```
/var/www/vhosts/miweb.com/log/production.log {
daily
missingok
rotate 30
compress
delaycompress
sharedscripts
postrotate
touch /var/www/vhosts/miweb.com/tmp/restart.txt
endscript
}
```

En nuestro ejemplo tras hacer la rotación se ejecuta el reinicio de una aplicación en Ruby on Rails en la etiqueta "postrotate", pero en otros casos puede cambiar según lo que se quiera, por ejemplo en un servidor apache se podría recargar la configuración del servidor con

```
postrotate
/etc/init.d/apache2 reload
endscript
```

O simplemente no hacer nada.

## Testear la configuración de logrotate

logrotate permite debuguear los scripts de configuración para ver si funcionan como esperamos, podemos ejecutar el comando con el parámetro -d

```bash
logrotate -d /etc/logrotate.d/nombredelarchivodeconfiguracion
```


Rotación automática de logs en linux con la aplicación logrotate

Rotar logs

rotar-logs


Buscar archivos desde la consola de Linux es una tarea complicada si eres nuevo en sistemas Linux.

Para buscar archivos el comando más común es el comando **find**. Este comando es muy potente y permite una infinidad de opciones para buscar tipos de archivos en todo el sistema. Veamos algunos ejemplos de cómo funciona.

## Buscar archivos y mostrar sus nombres

Para buscar todos los archivos dentro de un directorio con extensión .txt

```bash
find /home/miusuario -name "\*.txt"
```

Para encontar un archivo en todo el sistema, podemos buscarlo desde la carpeta raiz /

```bash
find / -name nombre_de_archivo
```

## Buscar archivos por nombre de usuario

Si deseamos buscar un archivo por nombre de usuario podemos escribir:

```bash
find / -user nombreusuario
```

Esto mostrará todos los archivos de ese usuario a partir de la carpeta raiz / y todas sus subcarpetas.

## Buscar archivos por tamaño de fichero

Para buscar archivos vacíos (el . indica el directorio en el que nos encontramos):

```bash
find . -size 0c
```

Para buscar archivos de un tamaño en kilobytes:

```bash
find . -size 54k
```

## Buscar por expresiones regulares

El comando find permite buscar utilizando expresiones regulares. Esto nos ofrece una potencia considerable. Por ejemplo si deseamos buscar archivos del tipo archivo01_01.txt, archivo02_03.txt, etc, podemos utilizar:

```bash
find . -regex './archivo0[1-2]_0[1-3].\*'
```

Además podemos anidar todas las opciones para hacer consultas más complejas.

## Buscando archivos con el comando Locate

También existe otra forma de buscar archivos en el índice del sistema, el comando locate.

Este comando funciona de la siguiente forma:

```bash
locate nombredelarchivo
```

Y devolverá todas las rutas en donde aparece el nombre entrado, podemos consultar dentro de los resultados devueltos por ejemplo:

```bash
locate miarchivo | grep bin
```

Devolverá todos las rutas del sistema que contengan el nombre miarchivo y que además también aparezca el texto bin.

Para actualizar el índice del sistema podemos utilizar el comando updatedb

```bash
sudo updatedb
```

Es recomendable ejecutarlo antes de hacer un locate para añadir las rutas recientes, por ejemplo si acabamos de instalar un programa.


Buscar archivos desde la linea de comandos en Linux

Buscar archivos en Linux

buscar-archivos-en-linux


FLV es un formato de vídeo (Flash Video) que se usa para transmitir videos por Internet utilizando Adobe Flash Player. Muchos sitios conocidos han adoptado este formato para transmitir videos, desde Youtube hasta MySpace. Esto es debido a la gran popularidad de Flash player, ya que está instalado en casi todos los ordenadores.

Avi (Audio Video Interleave) es otro formato de video creado por Microsoft en 1992. Para reproducir este formato es necesario un reproductor en el PC y no se puede visualizar en la web.

## De AVI a FLV

En linux podemos bajarnos la herramienta ffmpeg. En ubuntu podemos usar:

```bash
sudo apt-get install ffmpeg
```

Para convertir del formato de video FLV a AVI podemos utilizar la aplicación del siguiente modo.

```bash
ffmpeg -i mivideo.avi mivideo.flv
```

## De FLV a AVI

Si por el contrario, deseamos convertir un video de formato FLV a AVI podemos invertir el orden de los archivos utilizando la misma aplicación ffmpeg:

```bash
ffmpeg -i mivideo.flv mivideo.avi
```


Convertir un video con formato AVI a FLV y viceversa con ffmpeg

Convertir vídeos AVI a FLV

convertir-videos-avi-a-flv


Las expresiones regulares son patrones que se usan para encontrar combinaciones de caracteres en cadenas de texto. En Javascript, las expresiones regulares también son objetos. Hay varias funciones que nos permiten utilizar expresiones regulares en Javascript: la instrucción match, replace, search y split de la clase String.

Para comprobar si una cadena de texto encaja con el patrón dado podemos utilizar la función test, que devuelve true si encaja y false si no. Veamos algunos ejemplos útiles de uso de expresiones regulares:

## Validación de email

Patrón de validación para dirección de email

```regexp
/^(([^<>()[\\]\\\\.,;:\\s@\\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\\"]+)\*)|(\\".+\\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/.test("miemail@a.com")
```

La validación de email suele ser muy variable porque existen multitud de emails que son válidos, lo más común es que tengan un nombre de usuario, una arroba @ y un dominio.

## Colores HTML hexadecimales

Para validar si un color tiene el formato hexadecimal del estilo #FFFFFF

```regexp
/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test("#FFFFFF")
```

## Comprobar extensiones de archivos

Para determinar si unos archivos tienen una extensión permitida podemos usar:

```regexp
/^.\*\\.(txt|doc|docx)$/.test("miarchivo.docx")
```

_Estas expresiones no han sido testeadas al 100% por lo que no nos hacemos responsables de su corrección. Si vas a utilizarlas en algun entorno que requiera seguridad recuerda hacer tests._


Ejemplos de expresiones regulares en javascript utilizando la función test

Expresiones regulares en Javascript

expresiones-regulares-en-javascript


**.htaccess** es un archivo de configuración a nivel de directorios para varios servidores web.

En sistemas operativos Linux/Unix, es común utilizar archivos de este tipo para configurar directorios de una forma descentralizada, es decir, que cada directorio puede contener uno de estos archivos para configurar al directorio y sus subdirectorios.

El punto que hay delante del archivo .htaccess suele denotar que es un archivo oculto.

htaccess suele usarse en el servidor Apache y principalmente se utiliza para los siguientes casos para autentificación de directorios, para reescribir direcciones urls, para permitir o denegar direcciones IP de un dominio, para controlar cómo reaccionará el servidor cuando no encuentre una página, para gestionar la cache de los navegadores y los proxies, etc.

Veamos algunos ejemplos usuales:

## Mostrar mensaje de error personalizado

Para mostrar las típicas páginas de error 404 no encontrado y 500 error interno, podemos escribir las siguientes instrucciones:

```
ErrorDocument 500 /500.html
ErrorDocument 404 /404.html
```

Esto mostrará la página 500.html y 404.html respectivamente cuando el servidor muestre el código de error 500 y 404.

## Redireccionar

También es común redireccionar urls antiguas por nuevas usando la instrucción **redirect**

```
redirect /mi-direccion-antigua http://minuevodominio.com/minuevapagina
```


.htaccess es un archivo de configuración de Apache a nivel de directorio

htaccess


A partir de Java 5 se añadió una forma más conveniente para iterar sobre colecciones. En concreto usando la instrucción **for**. En muchos de lenguajes de programación se utiliza lo que se entiende como **for each** que traducido al español sería algo como "para cada". Hasta entonces Java no disponía de una manera leíble y entendedora hacer este tipo de bucles, encontrándonos en algunos casos con bucles for del tipo:

```java
void cancelAll(Collection c) {
    for (Iterator i = c.iterator(); i.hasNext();)
        i.next().cancel();
}
```

En este caso vemos cómo hacía falta hasta un iterador para navegar por la colección de datos.

## for each

Veamos un ejemplo de un foreach en Java tal y como se hace ahora:

```java
double[] coleccion = {5.0, 3.2, 1.8, 4.6};
int suma = 0;
for (double valor : coleccion) {
    suma += valor;
}
```

Dentro del for definimos el tipo de elemento (en este caso double) que contiene cada entrada de la colección.

Con este método conseguimos que el código sea sencillo, fácil de leer e intuitivo.


Uso de la función for each en Java. Exemplo práctico de foreach.

Java foreach

java-foreach


Aunque Javascript es un lenguaje de programación que siempre ha gozado de cierta popularidad, en los últimos años ésta se ha disparado.

A pesar de crearse en 1995 por Mozilla Foundation y por los creadores de Netscape, apenas ha sufrido cambios en su sintaxis, claramente basada en la sintaxis de Java.

CoffeScript es un intento de agilizar el proceso de escribir código en Javascript. Permitiendo al usuario centrarse en los algoritmos que ejecutarán sus programas en vez de escribir código farragoso.

CoffeScript es un lenguaje que compila en Javascript. Su traducción a Javascript es literal por lo que no hay interpretación en el tiempo de ejecución, es decir, se podría pasar de Coffee Script a Javascript y de Javascript a CoffeScript sin afectar al rendimiento ni perder código.

## Ejemplos CoffeScript a Javascript

Veamos algunos ejemplos sacados de su [página oficial](http://coffeescript.org/#language).

square = (x) -> x \* x
cube = (x) -> square(x) \* x

en javascript se convierte en:

var cube, square;

square = function(x) {
return x \* x;
};

cube = function(x) {
return square(x) \* x;
};

Un ejemplo de bucles:

eat food for food in ['toast', 'cheese', 'wine']

Se convierte en:

_ref = ['toast', 'cheese', 'wine'];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
food = _ref[_i];
eat(food);
}

## CoffeeScript y Ruby on Rails

CoffeeScript viene por defecto en las nuevas aplicaciones de Rails aunque su uso es totalmente opcional.

Desde mi punto de vista este lenguaje es útil si se desarrolla bastante en Javascript, puesto que ahorra mucho tiempo en escribir el código. Con el tiempo veremos si se establece o no.

## Probar CoffeScript

La página oficial de CoffeeScript permite probar código en tiempo real para ver cómo compila en Javascript. Podéis verlo en [CoffeeScript](http://www.coffeescript.org). En el menú superior en TRY COFFEESCRIPT.


CoffeeScript es un lenguaje que compila en Javascript.

Gestionar variables de entorno con dotenv

Sistema de coordenadas en un plano 2d infinito con JavaScript

Simulación visual de un péndulo simple

Crear una API rest con Node.js y Express

Seleción de artículos

Comandos Linux

Mapa de caracteres y tabla ASCII

Simular velocidad de la luz entre la Tierra y la Luna

Barra de progreso animada con un SVG circular