Predicción con
Matemáticas
y Código
Aprende a usar probabilidades, estadística básica y JavaScript para construir herramientas que predigan resultados reales — como el campeón del Mundial 2026.
¿Por qué predecir con código?
Imagina que puedes escribir un programa que analice datos de equipos de fútbol y te diga quién tiene más probabilidades de ganar un evento deportivo como el Mundial. No es magia ni inteligencia artificial avanzada — es matemática aplicada combinada con código, y es más accesible de lo que crees.
En este mini curso aprenderás los fundamentos que usan los analistas deportivos, las casas de apuestas y los científicos de datos: probabilidades, ponderación de factores y modelos de puntuación. Al final del curso construirás desde cero una herramienta interactiva funcional en HTML y JavaScript.
No necesitas ser matemático ni programador experto. Solo necesitas un editor de texto (incluso el Bloc de Notas funciona), un navegador web y curiosidad.
Las Matemáticas Detrás de la Predicción
Toda predicción se basa en una idea simple: no todos los factores pesan igual. Un equipo con buen ataque pero defensa débil no tiene las mismas posibilidades que uno equilibrado. La matemática nos da herramientas para cuantificar esas diferencias.
1.1 Probabilidad Básica
La probabilidad es un número entre 0 y 1 (o entre 0% y 100%) que representa qué tan probable es que algo ocurra. Si un equipo gana 7 de cada 10 partidos, su probabilidad de ganar es 0.7 o 70%.
1.2 Promedio Ponderado
No todos los datos importan igual. En fútbol, marcar goles es importante, pero también lo es no recibirlos. Un promedio ponderado nos permite darle más importancia a ciertos factores.
Por ejemplo, si decidimos que el ranking FIFA tiene peso 3, los goles anotados peso 2, y los goles recibidos peso 2, el score final combina esos tres valores en proporción a sus pesos.
1.3 Normalización: Comparar Peras con Peras
Problema: el ranking FIFA va del 1 al 200, pero los goles van del 0 al 150. Son escalas distintas. Para combinarlos necesitamos normalizar: convertir todos los valores a la misma escala (0 a 100).
| Factor | Escala Original | Normalizado | Peso |
|---|---|---|---|
| Ranking FIFA | 1–200 (invertido) | 0–100 | 30% |
| Goles anotados | 0–200 | 0–100 | 25% |
| Goles recibidos | 0–200 (invertido) | 0–100 | 25% |
| Experiencia mundialista | 0–22 | 0–100 | 20% |
valor_invertido = max - x. Así, recibir pocos goles da puntaje alto.
Estructura de un Archivo HTML
Antes de escribir la herramienta completa, necesitamos entender la estructura básica de un archivo HTML. Un documento HTML tiene tres partes principales que trabajan juntas.
<!-- 1. La declaración del tipo de documento --> <!DOCTYPE html> <html lang="es"> <!-- 2. El <head>: información del documento (no visible) --> <head> <meta charset="UTF-8"> <title>Mi Predictor</title> <style> /* Aquí va el CSS: colores, fuentes, tamaños */ </style> </head> <!-- 3. El <body>: lo que el usuario ve y toca --> <body> <h1>Hola, mundo</h1> <script> // Aquí va JavaScript: la lógica y los cálculos console.log("¡El predictor está listo!"); </script> </body> </html>
2.1 Variables y Funciones en JavaScript
JavaScript es el lenguaje que le da vida e inteligencia a nuestra página. Con él almacenamos datos, hacemos cálculos y actualizamos lo que el usuario ve. Veamos los bloques más importantes.
// ── VARIABLES: guardan información ────────────── const rankingFIFA = 3; // no cambia let golesAnotados = 15; // puede cambiar // ── OBJETOS: agrupan datos relacionados ───────── const equipo = { nombre: "Brasil", ranking: 3, goles: 20, golesRecibidos: 5, mundiales: 5 }; // ── FUNCIONES: realizan tareas repetibles ─────── function normalizar(valor, minVal, maxVal) { // Convierte el valor a escala 0–100 return ((valor - minVal) / (maxVal - minVal)) * 100; } // Llamada a la función: const rankNorm = normalizar(3, 1, 200); console.log(rankNorm); // → 1.005 (posición 3 normalizada) // ── INTERACCIÓN CON HTML ───────────────────────── // Leer un valor del usuario: const input = document.getElementById("miInput").value; // Mostrar un resultado en la página: document.getElementById("resultado").textContent = "¡Calculado!";
const cuando el valor no va a cambiar y let cuando sí puede cambiar. Evita var — es una versión antigua con comportamientos confusos.
El Algoritmo de Predicción Paso a Paso
Ahora vamos a construir el "cerebro" de nuestra herramienta. El algoritmo sigue estos pasos lógicos:
-
1Recopilar los datos del equipo Ranking FIFA, goles anotados, goles recibidos, partidos mundialistas ganados.
-
2Normalizar cada factor a escala 0–100 Así podemos compararlos y combinarlos correctamente.
-
3Calcular el score ponderado Multiplicar cada factor normalizado por su peso y sumar.
-
4Convertir a probabilidad Dividir el score de cada equipo entre la suma de todos los scores.
Veamos el código JavaScript del algoritmo central. Este es el corazón de toda la herramienta:
// ══════════════════════════════════════════════════ // MOTOR DE PREDICCIÓN — MUNDIAL 2026 // Compara dos selecciones y calcula probabilidades // ══════════════════════════════════════════════════ // Pesos de cada factor (deben sumar 100) const PESOS = { ranking: 30, // 30% de importancia ataque: 25, // 25% goles anotados defensa: 25, // 25% goles recibidos experiencia: 20 // 20% mundiales jugados }; // Rangos máximos de referencia para normalizar const MAXIMOS = { ranking: 200, ataque: 100, defensa: 100, experiencia: 22 }; /** * Normaliza un valor a escala 0–100 * Si invertir=true, un valor bajo da puntaje alto * (útil para "goles recibidos" y "ranking FIFA") */ function norm(val, maximo, invertir = false) { let n = (val / maximo) * 100; return invertir ? 100 - n : n; } /** * Calcula el score total de un equipo * @param {Object} e - datos del equipo * @returns {number} score de 0 a 100 */ function calcularScore(e) { // Normalizamos cada factor const r = norm(e.ranking, MAXIMOS.ranking, true); const a = norm(e.ataque, MAXIMOS.ataque, false); const d = norm(e.defensa, MAXIMOS.defensa, true); const x = norm(e.experiencia, MAXIMOS.experiencia, false); // Aplicamos los pesos y calculamos promedio ponderado const score = (r * PESOS.ranking + a * PESOS.ataque + d * PESOS.defensa + x * PESOS.experiencia) / 100; return Math.round(score * 100) / 100; // redondeamos } /** * Convierte dos scores en probabilidades relativas * El equipo con mayor score tiene mayor probabilidad */ function calcularProbabilidades(scoreA, scoreB) { const total = scoreA + scoreB; return { probA: ((scoreA / total) * 100).toFixed(1), probB: ((scoreB / total) * 100).toFixed(1) }; }
norm() solo normaliza. calcularScore() solo calcula un score. calcularProbabilidades() solo convierte a porcentajes. Este principio de diseño se llama responsabilidad única y hace el código fácil de entender y modificar.
HTML + CSS + JS: La Interfaz Completa
El algoritmo ya funciona "en la sombra". Ahora lo conectamos con una interfaz visual. Lo clave es entender cómo HTML, CSS y JavaScript colaboran:
<!-- CONTROL DESLIZANTE: el usuario ajusta el ranking --> <label for="rankingA">Ranking FIFA (1 = mejor):</label> <input type="range" id="rankingA" min="1" max="50" value="5" oninput="actualizarValor('rankingA', 'valRankA')" > <span id="valRankA">5</span> <!-- BOTÓN: lanza el cálculo al hacer clic --> <button onclick="predecir()"> ⚽ PREDECIR GANADOR </button> <!-- RESULTADO: se llena dinámicamente con JS --> <div id="resultado"></div> <script> // Actualiza el texto que muestra el valor del slider function actualizarValor(inputId, spanId) { const valor = document.getElementById(inputId).value; document.getElementById(spanId).textContent = valor; } // Lee todos los inputs y llama al algoritmo function predecir() { const ranking = +document.getElementById("rankingA").value; // "+" convierte string a número // ... calcular score con el algoritmo ... const resultado = calcularScore({ ranking: ranking, /*...*/ }); // Mostrar en el div de resultado document.getElementById("resultado").innerHTML = `<p>Score: <strong>${resultado}</strong></p>`; } </script>
.value, siempre obtienes un texto, incluso si el usuario escribió un número. Pon un + antes de document.getElementById(...) o usa parseInt() / parseFloat() para convertirlo a número antes de operar con él.
¡Construye el Predictor del Mundial 2026!
Ha llegado el momento de ver todo en acción. A continuación está la herramienta completamente funcional que combina todo lo aprendido: las tres fórmulas matemáticas, el algoritmo de score ponderado y la interfaz HTML interactiva.
Úsala ahora mismo — ajusta los sliders con datos de tus selecciones favoritas y pulsa el botón para obtener la predicción:
🔴 Selección A
🔵 Selección B
Adapta el Predictor a Cualquier Evento
El mismo modelo matemático sirve para predecir elecciones, ventas, resultados deportivos de cualquier deporte, o el rendimiento de estudiantes. Solo necesitas cambiar tres cosas:
6.1 Cambiar los Factores
Para predecir, por ejemplo, quién ganará el Super Bowl, los factores serían: yardas ofensivas, puntos anotados, porcentaje de pases completados, y victorias en la temporada. Solo actualiza el objeto PESOS y los valores max en la función norm().
// Misma estructura, diferentes factores: function scoreNFL(equipo) { const o = norm(equipo.yardasOfensivas, 450, false); const d = norm(equipo.yardasPermitidas, 450, true); const p = norm(equipo.porcentajePases, 75, false); const v = norm(equipo.victorias, 17, false); // Ajusta los pesos según qué tan importante es cada factor return (o*35 + d*35 + p*20 + v*10) / 100; }
6.2 Cambiar los Colores con CSS Variables
Para cambiar todo el esquema de colores del predictor, solo edita las variables CSS al inicio del bloque <style>. Es el único lugar donde tienes que hacer cambios de color:
:root { /* Cambia solo estos valores y todo el diseño se actualiza */ --color-principal: #00c853; /* verde fútbol */ --color-fondo: #0a0a0a; /* negro profundo */ --color-acento: #ffd600; /* dorado ganador */ --color-texto: #c8c8c0; /* gris suave */ /* Para béisbol, cambia verde por rojo y negro por azul marino: */ /* --color-principal: #c0392b; */ /* --color-fondo: #0a1628; */ }
6.3 Agregar Más Equipos
Si quieres predecir entre varios equipos a la vez (como toda la fase de grupos del Mundial), la lógica es la misma: calcula el score de cada equipo, ordena el arreglo de mayor a menor, y muestra el ranking. JavaScript facilita esto con el método .sort():
const equipos = [ { nombre: "Brasil", ranking:3, ataque:35, defensa:8, exp:8 }, { nombre: "Argentina", ranking:1, ataque:32, defensa:10, exp:3 }, { nombre: "Francia", ranking:2, ataque:30, defensa:9, exp:2 }, { nombre: "México", ranking:14, ataque:22, defensa:15, exp:0 } ]; // Calcular score de cada uno y ordenar de mayor a menor const ranking = equipos .map(e => ({ ...e, score: score(e) })) .sort((a, b) => b.score - a.score); // Mostrar el ranking en consola ranking.forEach((e, i) => { console.log(`#${i+1} ${e.nombre}: ${e.score.toFixed(2)} puntos`); });
Lo Que Aprendiste (y lo que sigue)
En este mini curso recorriste un camino completo: desde la teoría matemática hasta una herramienta web funcional. Estos son los conceptos que ahora forman parte de tu caja de herramientas:
| Concepto | Qué hace | Dónde lo usamos |
|---|---|---|
| Probabilidad básica | Cuantifica qué tan probable es un evento | Convertir scores a % |
| Promedio ponderado | Da más importancia a factores clave | Función score() |
| Normalización min-max | Pone todos los datos en la misma escala | Función norm() |
| Variables CSS | Centraliza todos los colores | Bloque :root{} |
| Eventos HTML | Conecta acciones del usuario con JS | oninput, onclick |
| DOM manipulation | Actualiza la página sin recargarla | getElementById |
¿Qué sigue para mejorar el predictor?
Con este fundamento puedes explorar los siguientes pasos para hacer un predictor más sofisticado:
-
+Conectar datos reales via API Servicios como football-data.org ofrecen APIs gratuitas con estadísticas reales de los equipos. Puedes reemplazar los sliders por datos actualizados automáticamente.
-
+Aprender sobre regresión logística Es el siguiente nivel matemático: en lugar de asignar pesos manualmente, el modelo los aprende de datos históricos. Es la base del Machine Learning.
-
+Guardar resultados con localStorage JavaScript permite guardar datos en el navegador del usuario para que sus predicciones persistan entre visitas.
0 Comentarios