N8N: Automatizaciones, Workflows e IA para Desarrolladores

N8N: Automatizaciones, Workflows e IA para Desarrolladores

Cuando escuchamos hablar de automatizaciones, muchos pensamos en Zapier, Make o en scripts caseros con cron jobs. Pero en los últimos años, N8N ha ido ganando terreno como una de las herramientas más potentes y flexibles para construir workflows inteligentes que no solo conectan servicios, sino que también integran IA, agentes autónomos y lógica personalizada con código.

Prepárate, porque aquí no hablamos solo de arrastrar cajitas: vamos a ver ejemplos con código, integración con agentes de IA y comparaciones entre tiempo de decisión y carga cognitiva en el diseño de workflows.

¿Qué es N8N y por qué debería importarte?

N8N (pronunciado n-eight-n) es una herramienta de automatización de código abierto que te permite conectar APIs, servicios web y scripts propios en flujos visuales.

  • No estás limitado a un set cerrado de integraciones: puedes crear tus propios nodos en JavaScript.
  • Es self-hosted: tienes el control de tus datos y tu infraestructura.
  • Ofrece un modo “low-code” para usuarios no técnicos, pero a la vez se adapta perfectamente a quienes queremos meter las manos en el código.

Primeros pasos con N8N ⚡

Instalación con npm

npm install n8n -g
n8n start

Esto te abre un panel en http://localhost:5678 desde donde ya puedes empezar a crear tus primeros workflows.

Instalación con Docker

version: "3"
services:
  n8n:
    image: n8nio/n8n
    ports:
      - "5678:5678"
    environment:
      - GENERIC_TIMEZONE=Europe/Madrid
    volumes:
      - ~/.n8n:/home/node/.n8n

Construyendo tu primer workflow en N8N 🛠️

Caso práctico: automatizar un flujo con APIs y Google Sheets

Imagina que quieres crear un flujo donde:

  1. Cada vez que alguien rellena un formulario en tu web,
  2. Los datos se envían a un Google Sheet,
  3. Y además recibes una notificación en Slack.

Ejemplo de lógica en un nodo Function

// Prompt enviado al nodo OpenAI
Clasifica este email en una de las siguientes categorías:
- Soporte
- Ventas
- Spam
Texto: {{$json["text"]}}

Integrando N8N con IA y agentes autónomos

Ejemplo: un agente que clasifica correos

  1. Un IMAP Node revisa tu bandeja de entrada.
  2. Un OpenAI Node clasifica el correo: “soporte”, “ventas”, “spam”.
  3. Según la categoría, se crea un ticket en Jira o se mueve a una carpeta.
// Nodo "Function" en N8N
return [
  {
    json: {
      nombre: $json["name"],
      email: $json["email"],
      fecha: new Date().toISOString(),
    }
  }
];

Comparando tiempo de decisión vs carga cognitiva 🧠

En un flujo manual (ej. revisar correos, copiar datos, pegar en Excel), el tiempo de decisión es enorme: cada acción depende de tu atención.

Con un workflow en N8N, reduces la carga cognitiva: no necesitas pensar en cada paso, solo en diseñar la lógica inicial.

Snippets para inspirarte como desarrolladora

Ejemplo: consumir una API REST desde N8N


// Configuración en nodo HTTP Request
{
  "url": "https://api.openweathermap.org/data/2.5/weather?q=Barcelona&appid=API_KEY",
  "method": "GET"
}
// Nodo Function
return [
  {
    json: {
      ciudad: $json["name"],
      temperatura: $json["main"]["temp"] - 273.15,
      clima: $json["weather"][0]["description"]
    }
  }
];

Ejemplo: workflow para generación de resúmenes con IA

// Prompt en nodo OpenAI
Resume el siguiente texto en 3 puntos clave:
{{$json["content"]}}

Consejos avanzados para trabajar con N8N

Usa Variables Globales

Puedes definir credenciales y variables de entorno que se reutilizan en todos tus flujos.

Versionado de workflows

N8N permite exportar tus flujos en JSON. Súbelos a GitHub y tendrás control de versiones.

Extiende con tus propios nodos

class MiNodoPersonalizado {
  async execute() {
    return this.helpers.returnJsonArray([{ saludo: "Hola desde mi nodo" }]);
  }
}

Preguntas frecuentes (FAQs)

¿N8N es gratis?

Sí, es open-source bajo licencia Apache 2.0. Puedes usarlo en local gratis. Si quieres una versión en la nube gestionada, existe n8n.cloud de pago.

¿Necesito saber programar para usar N8N?

No estrictamente. Puedes crear workflows solo con nodos visuales. Pero si sabes programar, tu poder se multiplica porque puedes extender y personalizar cada flujo.

¿Qué diferencia a N8N de Zapier o Make?

Principalmente: flexibilidad, control de datos y posibilidad de extender con código propio. Zapier/Make son más fáciles al inicio, pero N8N te da el control real.

¿El siguiente paso en tu desarrollo: crear o delegar?

Trabajar con N8N es como pasar de ser un operador manual a ser una arquitecta de procesos. Te da el control de cómo se conectan tus sistemas, cómo colaboran tus agentes de IA y cómo se libera tu mente de tareas repetitivas.

En ese balance entre tiempo de decisión y carga cognitiva, N8N se convierte en un aliado estratégico para quienes queremos crear más, pensar mejor y automatizar con sentido.

Dark mode vs Light mode: cuándo usar cada uno y cómo implementarlos

como experta diseñadora gráfica genera una imagen para el blog martagonzalez.dev para el post titulado: Dark mode vs Light mode: cuándo usar cada uno y cómo implementarlos

¿Qué es realmente el Dark Mode y el Light Mode?

El modo claro (light mode) es la convención clásica: fondos claros y texto oscuro.

El modo oscuro (dark mode) invierte esta lógica: fondos oscuros y texto claro.
Pero no se trata solo de cambiar colores. Un buen dark mode necesita contrastes adecuados,
una paleta optimizada y una jerarquía visual clara.

Piensa que no es simplemente “dar vuelta” el esquema de colores, sino rediseñar la experiencia.

Dark mode vs Light mode: ventajas y desventajas

Ventajas del Dark Mode

  • Reduce fatiga visual en entornos oscuros.
  • Mejora la autonomía en pantallas OLED.
  • Aporta estética moderna y elegante.

Desventajas del Dark Mode

  • Peor legibilidad en textos largos.
  • Puede aumentar la carga cognitiva si los contrastes son malos.

Ventajas del Light Mode

  • Excelente para lectura prolongada.
  • Más familiar para la mayoría de usuarios.
  • Contraste y jerarquía más fáciles de gestionar.

Desventajas del Light Mode

  • En la oscuridad produce deslumbramiento.
  • Puede parecer menos sofisticado en ciertas interfaces.

¿Cuándo usar cada uno?

La clave no es cuál es mejor, sino cuál es mejor para tu contexto.

Casos ideales para Light Mode

  • Blogs y periódicos digitales.
  • Aplicaciones educativas o de lectura intensiva.
  • Herramientas de oficina (documentos, hojas de cálculo).

Casos ideales para Dark Mode

  • Aplicaciones creativas (editores de código, diseño, música).
  • Apps de entretenimiento (Netflix, YouTube, Spotify).
  • Interfaces para uso nocturno o en ambientes oscuros.

La mejor opción: dar ambas posibilidades

Lo más recomendable es implementar un sistema dual y permitir que el usuario elija.
Esto reduce la carga cognitiva porque no impones un estilo,
sino que das libertad.

Cómo implementar Dark Mode y Light Mode

Aquí te muestro diferentes formas de hacerlo en proyectos web,
desde lo más sencillo en CSS hasta integraciones en React y Tailwind.

1) Detectar preferencia del sistema con CSS

 

/* Light por defecto */
body {
    background-color: #ffffff; 
    color: #222222; 
    } 
/* Dark automático */ 
@media (prefers-color-scheme: dark) { body { 
        background-color: #121212; 
        color: #f1f1f1; 
    } 
}

2) Toggle manual con JavaScript

const btn = document.getElementById('toggle-theme'); btn.addEventListener('click', () => { document.body.classList.toggle('dark'); localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light' ); });

3) Dark Mode con Tailwind CSS

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  theme: { extend: {} },
};

<div class="bg-white text-black dark:bg-gray-900 dark:text-white">
  <h1>Hola Mundo</h1>
</div>

4) Toggle en React

<code class=»language-tsx»>const [theme, setTheme] = useState( localStorage.getItem(‘theme’) || ‘light’ ); useEffect(() => { document.body.className = theme; localStorage.setItem(‘theme’, theme); }, [theme]); </code>

Buenas prácticas

Contraste adecuado

Evita el negro puro #000 y el blanco puro #fff.
Usa tonos suaves como #121212 y #f9f9f9.

Colores de acento

En dark mode, los colores vibran más. Ajusta saturación para evitar cansancio visual.

Imágenes e iconos

Asegúrate de que tus ilustraciones y logos tengan versión para ambos modos.

Preguntas frecuentes

¿El dark mode es siempre mejor para la vista?

No. Es útil en entornos oscuros, pero puede cansar en lecturas largas.

¿Debo implementar ambos modos en mi web?

Sí, si tu producto se usa en contextos variados (blogs, apps de productividad, e-learning).

¿El dark mode afecta al SEO?

No directamente. Pero mejora la experiencia del usuario y eso ayuda al posicionamiento.


Ofrecer ambas opciones es sencillo hoy en día y aporta comodidad, accesibilidad
y personalización. Al final, lo importante no es qué prefiero yo, sino qué le da
a tu usuario una mejor experiencia.

Atajos y trucos para usar Visual Studio Code desde la terminal en Mac (como una pro)

Visual Studio Code desde la terminal en Mac

Potencia tu flujo de trabajo con terminal y VS Code en Mac

Si ya sabes cómo abrir Visual Studio Code desde la terminal en Mac con code, ¡es hora de ir un paso más allá!

Aquí te comparto una selección de trucos y atajos útiles para exprimir al máximo la combinación de terminal + VS Code en macOS.

Estos tips te ayudarán a ahorrar tiempo y trabajar mejor con Visual Studio Code desde la terminal en Mac.

1. Crea alias personalizados para abrir proyectos

Si sueles trabajar en varios proyectos, puedes crear alias rápidos para abrir cada uno sin tener que navegar carpetas:

📁 Paso 1: Abre tu archivo de configuración
Dependerá de tu shell:

  • Zsh (por defecto en macOS):


	nano ~/.zshrc

Bash:


	nano ~/.bash_profile

📁 Paso 2: Añade tus alias


	alias portafolio="code ~/Proyectos/portafolio"
alias blogdev="code ~/Sites/martagonzalez.dev/blog"

Guarda el archivo y ejecuta source ~/.zshrc (o .bash_profile) para aplicar los cambios.

Ahora solo escribe portafolio y ¡listo!

2. Abre archivos individuales directamente

¿Sabías que también puedes abrir un archivo concreto?


	code index.html

Incluso varios a la vez:


	code index.html style.css app.js

3. Abre VS Code sin cargar ningún proyecto

Si solo quieres lanzar el editor sin abrir carpetas o archivos, basta con:


	code

Ideal para tomar notas rápidas o crear archivos nuevos.

4. Combina VS Code con Git desde la terminal

Visual Studio Code se lleva muy bien con Git. Si estás dentro de un repo, puedes hacer:


	code .gitignore

O incluso configurar que los diffs y merges se abran en VS Code:


	git config --global core.editor "code --wait"

5. Limpieza: cómo reiniciar VS Code desde la terminal

Si algo se queda pillado o quieres cerrar y reabrir el editor rápidamente:


	killall "Visual Studio Code"; sleep 1; code .

⚠️ Úsalo con cuidado, pero puede sacarte de un apuro.

💎 Bonus: otros comandos útiles de VS Code CLI


code --new-window            # Abrir en nueva ventana
code -r .                    # Reemplaza la ventana actual
code --diff file1 file2      # Ver diferencias entre archivos
code --disable-extensions    # Modo sin extensiones (ideal para debug)


A medida que te acostumbras a trabajar desde la terminal, verás que estos pequeños trucos se vuelven parte natural de tu día a día.
Y si además usas alias inteligentes, tu flujo de trabajo se vuelve mucho más ágil y profesional.

Si estás empezando y aún no sabes cómo abrir VS Code desde la línea de comandos, te recomiendo leer primero este artículo: cómo abrir Visual Studio Code desde la terminal en macOS.

¿Aún no tienes instalado Visual Studio Code? Puedes descargarlo gratis desde su sitio oficial y comenzar a potenciar tu flujo de trabajo desde la terminal en Mac.