Curso de HTMX para Empresas — Productividad y front ligero

Atributo `hx-get` para cargar contenido

`hx-target` para indicar dónde insertar

`hx-swap` para controlar cómo insertar

Diferencias entre `innerHTML`, `outerHTML`, etc.

Enlaces que actualizan partes del DOM

Evitar recarga de página con navegación dinámica

Práctica: página con menú que cambia contenido

BONUS: transición de carga suave

Envío de formularios sin recargar página

Validación en servidor + respuesta HTML parcial

Evitar JavaScript para mostrar errores

Actualización de una sección tras submit

Uso de `hx-target` dinámico

Botón que muestra resultado inmediato

Práctica: formulario de contacto validado por backend

BONUS: bloqueo del botón durante envío (`hx-disabled`)

Valores posibles (`click`, `change`, `load`, `keyup`)

`every 5s`, `revealed`, `mouseover`, etc.

Múltiples triggers en un solo elemento

Retrasos (`delay:`) y condiciones (`once`)

Eventos personalizados

Práctica: actualizar lista cada 3 segundos

BONUS: autoguardado con `blur`

`hx-post`, `hx-put`, `hx-patch`, `hx-delete`

Casos para cada método (RESTful)

Envío de datos personalizados con `hx-params`

Diferencia entre `hx-get` y `hx-post` para interactividad

Uso de formularios inline

Práctica: CRUD simple con botones AJAX

BONUS: delete con confirmación sin JavaScript

Objetivos relativos (`this`, `closest`, `next`)

Modos de inserción: `beforebegin`, `afterend`, `outerHTML`

Uso de `hx-swap-oob` para reemplazo fuera del flujo

Cadenas de sustitución en secciones múltiples

Casos de uso avanzados de swap

Práctica: añadir nuevos elementos a una tabla

BONUS: update visual sin parpadeo

Personalizar parámetros enviados

Añadir campos ocultos

Combinar valores dinámicos con JavaScript

Excluir campos con `hx-params="not field1"`

Práctica: filtro dinámico con select y checkbox

BONUS: usar `hx-include` para incluir varios inputs externos

¿Qué es Unobtrusive JS?

Comportamiento progresivo sin depender de JS

Degradación elegante si no hay HTMX

Añadir funcionalidad sin romper accesibilidad

Casos de uso en administración pública o apps críticas

Práctica: formulario que funciona con y sin HTMX

BONUS: plantilla base para HTML progresivo

Usar `hx-indicator` para mostrar loading

Estilos CSS para spinners

Bloquear elementos durante la petición

Cambiar texto de botones (`hx-vals`)

Ocultar contenido condicionalmente

Práctica: loading para áreas grandes y botones

BONUS: animaciones suaves con CSS

Cambiar URL sin recargar

Crear experiencia tipo SPA

Botones o links con historial de navegación

Volver atrás mantiene estado

Práctica: navegación entre pestañas con push-url

BONUS: integración con breadcrumb dinámico

`hx-boost`: interceptar todos los links y formularios

Uso en sitios enteros sin JS

Cabeceras `HX-Trigger`, `HX-Location`, `HX-Redirect`

Control total de respuesta desde backend

Práctica: aplicación con `hx-boost` activado global

BONUS: uso de `HX-Reswap` desde el backend

Cómo renderizar HTML desde backend

Estructura de vistas para HTMX

Diferenciar requests HTMX (`HX-Request`)

Templates parciales

Práctica: CRUD con Django + HTMX

BONUS: paginación con Flask + HTMX

Templates parciales (`_item.html`)

Usar includes para listas dinámicas

Reutilizar estructuras en múltiples vistas

Modularización sin frontend framework

Práctica: tarjeta reutilizable para lista de elementos

BONUS: componente HTML con botones y eventos

Devolver HTML con errores

Insertar errores cerca del input

Diferenciar errores por campo

Usar `hx-target` en `form > div` específicos

Mensajes dinámicos de éxito/error

Práctica: validación server-side completa

BONUS: mensajes que desaparecen tras 3 segundos

Eventos nativos (`htmx:beforeRequest`, `htmx:afterSwap`)

Interceptar peticiones

Modificar payload antes de enviar

Mostrar alertas o modificar DOM en `onComplete`

Práctica: bloquear acción según validación previa

BONUS: mostrar toast personalizado tras respuesta

Atributo `hx-ws="connect:/ws"`

Conexión con backend websocket

Mensajes push al cliente

Casos: notificaciones, chats, dashboards

Práctica: contador en tiempo real

BONUS: websocket + Django Channels

Formularios de subida con `enctype`

Usar `hx-post` para subir archivos

Backend: gestionar archivos y responder HTML

Progreso visual con `progress` o spinner

Práctica: subir y listar archivos dinámicamente

BONUS: arrastrar y soltar con HTML5 + HTMX

Estructura típica de una app HTMX

Gestión de rutas backend y HTML parcial

Seguridad y validación

SPA-like sin frameworks

Práctica: mini CRM con clientes, formularios y AJAX

BONUS: versión multiidioma con rutas dinámicas

HTMX + Alpine.js

HTMX + Hyperscript

HTMX + Tailwind para frontend

HTMX + Turbo para experiencias híbridas

Práctica: demo con Alpine y HTMX combinados

BONUS: usar HTMX como motor AJAX de un CMS

Definición de app: gestor de tareas dinámico

Crear backend básico (Flask/Django/Express)

Componentes reutilizables (tarea, lista, editor)

CRUD completo con HTMX

Navegación SPA con push-url

Upload de documentos por tarea

Validaciones completas y reactividad

Optimización del UX con spinners y triggers

Bonus: eventos HTMX para alertas y feedback

Preparación para producción y hosting