🧠 IA en la vida real (Capítulo 1): Validar números de contenedor con un script generado por Copilot
La IA está muy bien para generar imágenes, escribir textos o resumirte un PDF de 200 páginas, pero donde realmente empieza a brillar es en las pequeñas tareas del día a día. Esas que te quitan tiempo, que son repetitivas, que nadie quiere hacer… pero que son necesarias.
Y justo así nació este primer ejemplo práctico.
Tenía un problema sencillo:
Necesitaba validar números de contenedor en una web, de forma visual, rápida y sin depender de plugins externos. Algo ligero, que pudiera incrustar en WordPress y que cualquier usuario entendiera al instante.
Y pensé: “¿Por qué no se lo pido a Copilot?”.
🚢 El problema: validar un número de contenedor
Quien trabaja con logística o transporte marítimo sabe que los contenedores no se identifican con un número cualquiera.
Tienen un formato concreto y, sobre todo, un dígito de control que se calcula siguiendo un algoritmo muy específico.
El usuario introduce un número.
La web debe decirle si es válido o no.
Y además, de forma visual: verde si es correcto, rojo si no.
Nada del otro mundo… pero hacerlo a mano es un rollo.
🤖 La solución: explicarle a Copilot cómo funciona el cálculo
Aquí viene la magia.
Le expliqué a Copilot:
- Cómo se compone un número de contenedor (4 letras + 6 números + dígito de control).
- Cómo se calcula el dígito de control.
- Le puse un ejemplo real paso a paso.
- Y le pedí:
“Genérame un código en HTML + JavaScript para incrustarlo en WordPress y que valide el número de contenedor visualmente.”
Y Copilot respondió como un campeón.
🧩 El código generado
Me devolvió un script limpio, funcional y fácil de incrustar en cualquier página de WordPress usando un bloque HTML personalizado.
El resultado final:
- Un campo donde el usuario introduce el número de contenedor.
- Un botón para validar.
- Un mensaje visual que cambia automáticamente según el resultado.
- Todo funcionando en local, sin dependencias externas.
Justo lo que necesitaba.
Validador de Número de Contenedor
Introduce el código completo para comprobar automáticamente si el dígito de control es válido.
Formato esperado: 4 letras + 7 números
Escribe el número de contenedor para validar automáticamente.
filename.html
<div class="container-validator-pro">
<div class="cv-card">
<div class="cv-header">
<div class="cv-icon">📦</div>
<div>
<h3>Validador de Número de Contenedor</h3>
<p>Introduce el código completo para comprobar automáticamente si el dígito de control es válido.</p>
</div>
</div>
<div class="cv-body">
<label for="cvContainerNumber">Número de contenedor</label>
<input
type="text"
id="cvContainerNumber"
placeholder="Ejemplo: CSQU3054383"
maxlength="11"
autocomplete="off"
spellcheck="false"
/>
<div class="cv-help">
Formato esperado: <strong>4 letras + 7 números</strong>
</div>
<div id="cvStatus" class="cv-status cv-neutral">
Escribe el número de contenedor para validar automáticamente.
</div>
<div id="cvDetail" class="cv-detail"></div>
</div>
</div>
</div>
<style>
.container-validator-pro {
max-width: 680px;
margin: 30px auto;
padding: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.cv-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
overflow: hidden;
}
.cv-header {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 22px 22px 12px 22px;
background: linear-gradient(135deg, #f8fafc 0%, #eef4ff 100%);
border-bottom: 1px solid #e5e7eb;
}
.cv-icon {
width: 52px;
height: 52px;
min-width: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: #0f172a;
color: #ffffff;
font-size: 24px;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}
.cv-header h3 {
margin: 0;
font-size: 24px;
line-height: 1.2;
color: #111827;
}
.cv-header p {
margin: 6px 0 0 0;
color: #4b5563;
font-size: 14px;
line-height: 1.5;
}
.cv-body {
padding: 22px;
}
.cv-body label {
display: block;
margin-bottom: 8px;
font-weight: 700;
color: #111827;
font-size: 14px;
}
#cvContainerNumber {
width: 100%;
padding: 14px 16px;
font-size: 22px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
border: 2px solid #d1d5db;
border-radius: 14px;
box-sizing: border-box;
outline: none;
transition: all 0.2s ease;
background: #ffffff;
color: #111827;
}
#cvContainerNumber:focus {
border-color: #2563eb;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.cv-help {
margin-top: 8px;
font-size: 13px;
color: #6b7280;
}
.cv-status {
margin-top: 18px;
padding: 16px 18px;
border-radius: 14px;
font-weight: 700;
font-size: 16px;
line-height: 1.5;
border: 1px solid transparent;
transition: all 0.2s ease;
}
.cv-neutral {
background: #f3f4f6;
color: #374151;
border-color: #e5e7eb;
}
.cv-valid {
background: #ecfdf3;
color: #166534;
border-color: #86efac;
}
.cv-invalid {
background: #fef2f2;
color: #991b1b;
border-color: #fca5a5;
}
.cv-detail {
margin-top: 12px;
font-size: 14px;
color: #4b5563;
line-height: 1.6;
}
.cv-detail strong {
color: #111827;
}
.cv-chip {
display: inline-block;
margin-top: 8px;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
background: #eff6ff;
color: #1d4ed8;
}
@media (max-width: 640px) {
.cv-header {
flex-direction: column;
}
.cv-icon {
width: 46px;
height: 46px;
min-width: 46px;
font-size: 20px;
}
.cv-header h3 {
font-size: 20px;
}
#cvContainerNumber {
font-size: 18px;
}
}
</style>
<script>
(function () {
const input = document.getElementById('cvContainerNumber');
const statusBox = document.getElementById('cvStatus');
const detailBox = document.getElementById('cvDetail');
// Tabla de conversión ISO 6346
const letterValues = {
A: 10, B: 12, C: 13, D: 14, E: 15, F: 16, G: 17, H: 18, I: 19, J: 20,
K: 21, L: 23, M: 24, N: 25, O: 26, P: 27, Q: 28, R: 29, S: 30, T: 31,
U: 32, V: 34, W: 35, X: 36, Y: 37, Z: 38
};
const weights = [1, 2, 4, 8, 16, 32, 64, 128, 256, 512];
function setStatus(type, message, detail = '') {
statusBox.className = 'cv-status';
if (type === 'valid') {
statusBox.classList.add('cv-valid');
} else if (type === 'invalid') {
statusBox.classList.add('cv-invalid');
} else {
statusBox.classList.add('cv-neutral');
}
statusBox.innerHTML = message;
detailBox.innerHTML = detail;
}
function calculateCheckDigit(container10) {
let sum = 0;
for (let i = 0; i < 10; i++) {
const char = container10[i];
let value;
if (/[A-Z]/.test(char)) {
value = letterValues[char];
if (typeof value === 'undefined') return null;
} else if (/[0-9]/.test(char)) {
value = parseInt(char, 10);
} else {
return null;
}
sum += value * weights[i];
}
const remainder = sum % 11;
return remainder === 10 ? 0 : remainder;
}
function validateContainerLive() {
let value = input.value.toUpperCase().replace(/[^A-Z0-9]/g, '').trim();
input.value = value;
if (value.length === 0) {
setStatus(
'neutral',
'Escribe el número de contenedor para validar automáticamente.'
);
return;
}
if (value.length < 11) {
setStatus(
'neutral',
'Introduce el código completo para poder validarlo.',
'Longitud actual: <strong>' + value.length + '/11</strong><br><span class="cv-chip">Se esperan 4 letras + 7 números</span>'
);
return;
}
if (value.length > 11) {
setStatus(
'invalid',
'❌ Demasiados caracteres. El número de contenedor debe tener exactamente 11 caracteres.',
'Has introducido <strong>' + value.length + '</strong> caracteres.'
);
return;
}
const formatRegex = /^[A-Z]{4}[0-9]{7}$/;
if (!formatRegex.test(value)) {
setStatus(
'invalid',
'❌ Formato incorrecto.',
'El formato correcto es: <strong>4 letras + 7 números</strong><br>Ejemplo: <strong>CSQU3054383</strong>'
);
return;
}
const base10 = value.substring(0, 10);
const enteredCheckDigit = parseInt(value.substring(10, 11), 10);
const calculatedCheckDigit = calculateCheckDigit(base10);
if (calculatedCheckDigit === null) {
setStatus(
'invalid',
'❌ El número contiene caracteres no válidos.'
);
return;
}
if (enteredCheckDigit === calculatedCheckDigit) {
setStatus(
'valid',
'✅ CORRECTO: el número de contenedor es válido.',
'Código: <strong>' + value + '</strong><br>Dígito introducido: <strong>' + enteredCheckDigit + '</strong> · Dígito calculado: <strong>' + calculatedCheckDigit + '</strong>'
);
} else {
setStatus(
'invalid',
'❌ INCORRECTO: el número de contenedor no es válido.',
'Código: <strong>' + value + '</strong><br>Dígito introducido: <strong>' + enteredCheckDigit + '</strong> · Dígito calculado: <strong>' + calculatedCheckDigit + '</strong>'
);
}
}
input.addEventListener('input', validateContainerLive);
input.addEventListener('paste', function () {
setTimeout(validateContainerLive, 10);
});
input.addEventListener('blur', validateContainerLive);
})();
</script>🎯 ¿Por qué este ejemplo es importante?
Porque demuestra algo clave:
La IA no viene a sustituirte. Viene a multiplicarte.
Con Copilot, en 30 segundos tenía una base sólida.
Y a partir de ahí, solo tuve que ajustar detalles.
Este es el tipo de uso real que quiero mostrar en esta serie:
IA aplicada a problemas concretos, del día a día, que te ahorran tiempo y te hacen la vida más fácil.
📌 Próximos capítulos de la serie
Ya tengo varias ideas en marcha:
- Actualizar aplicación a última versión con Powershell
- Generar Informes de herramientas de monitorización o antivirus para revisar rendimientos.
- Crear Agente para temas concretos.
- Y muchos más.