<!DOCTYPE html>

<htmllang="es">

<head>

<metacharset="UTF-8"/>

<metaname="viewport"content="width=device-width, initial-scale=1.0"/>

<title>EduIA Analytics – Panorama 2026</title>

<scriptsrc="https://cdn.tailwindcss.com"></script>

<scriptsrc="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>

body{

font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

background-color:#f8fafc;

color:#1e293b;

}

.chart-wrapper{

position:relative;

width:100%;

height:360px;

margin:0auto;

}

@media (min-width: 768px) {

.chart-wrapper {

height:420px;

}

.gradient-text{

background:linear-gradient(90deg,#ff3b30,#ff9500);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.custom-table-container{

width:100%;

overflow-x:auto;

border-radius:0.75rem;

box-shadow:010px15px-3pxrgba(0,0,0,0.1);

border:1pxsolid#e2e8f0;

background:white;

}

.custom-table{

width:100%;

min-width:900px;

border-collapse:collapse;

text-align:left;

}

.custom-tableth{

background-color:#f1f5f9;

color:#334155;

font-weight:700;

text-transform:uppercase;

font-size:0.75rem;

letter-spacing:0.05em;

padding:1rem;

border-bottom:2pxsolid#e2e8f0;

}

.custom-tabletd{

padding:1rem;

border-bottom:1pxsolid#e2e8f0;

vertical-align:top;

}

.custom-tabletr:nth-child(even) {

background-color:#f8fafc;

}

.custom-tabletr:hover{

background-color:#f0fdf4;

}

</style>

</head>

<bodyclass="antialiased">

<headerclass="bg-white shadow-sm sticky top-0 z-50">

<divclass="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">

<h1class="text-2xl font-bold text-gray-900">

Edu<spanclass="text-[#007AFF]">IA</span> Analytics 2026

</h1>

<navclass="hidden lg:flex space-x-6 text-sm font-medium">

<ahref="#panorama"class="text-gray-600 hover:text-[#007AFF]">Panorama</a>

<ahref="#comparativa"class="text-gray-600 hover:text-[#007AFF]">Comparativa</a>

<ahref="#analisis"class="text-gray-600 hover:text-[#007AFF]">Análisis</a>

<ahref="#practica"class="text-gray-600 hover:text-[#007AFF]">Eficiencia</a>

<ahref="#laboratorio"class="text-[#007AFF] font-bold">Laboratorio Gemini✨</a>

</nav>

</div>

</header>

<mainclass="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">

<sectionclass="text-center mb-16">

<pclass="text-[#FF3B30] font-semibold tracking-wide uppercase text-sm mb-2">Informe Interactivo Semanal</p>

<h2class="text-4xl md:text-5xl font-extrabold tracking-tight text-gray-900 mb-4">

Innovación educativa con <spanclass="gradient-text">IA Generativa</span>

</h2>

<pclass="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">

Datos actualizados sobre herramientas IA 2026, impacto docente y tendencias globales en Educación Superior.

</p>

</section>

<sectionid="panorama"class="mb-20">

<h3class="text-3xl font-bold text-gray-900 mb-4">📊 Panorama Actual</h3>

<pclass="text-lg text-gray-600 mb-8">Evolución de la adopción docente y principales casos de uso 2022–2026.</p>

<divclass="grid grid-cols-1 lg:grid-cols-2 gap-8">

<divclass="bg-white p-6 rounded-2xl shadow border border-gray-100 w-full">

<h4class="text-xl font-semibold mb-6 text-center text-gray-800">

Adopción Global Docente (2022–2026)

</h4>

<divclass="chart-wrapper"><canvasid="adoptionChart"></canvas></div>

</div>

<divclass="bg-white p-6 rounded-2xl shadow border border-gray-100 w-full">

<h4class="text-xl font-semibold mb-2 text-center text-gray-800">

Principales Usos Pedagógicos

</h4>

<pclass="text-sm text-gray-500 text-center mb-4">Porcentaje de adopción por tipo de tarea</p>

<divclass="chart-wrapper"><canvasid="usageChart"></canvas></div>

</div>

</section>

<sectionid="comparativa"class="mb-20">

<h3class="text-3xl font-bold text-gray-900 mb-4">⚖️ Comparativa de Herramientas IA Educativas (2026)</h3>

<pclass="text-lg text-gray-600 mb-8">Resumen de capacidades, novedades y limitaciones principales.</p>

<divclass="custom-table-container mb-12">

<tableclass="custom-table">

<thead>

<tr>

<th>Herramienta</th>

<th>Descripción</th>

<thstyle="background-color:#eff6ff;color:#1d4ed8;">Novedades (2026)</th>

<th>Ventajas Clave</th>

<th>Limitaciones</th>

<th>Aplicación Docente</th>

</tr>

</thead>

<tbodyclass="text-sm">

<tr>

<tdclass="font-bold text-gray-900"><spanclass="text-xl mr-2">🤖</span> ChatGPT</td>

<td>El estándar de la industria. LLM multimodal de OpenAI.</td>

<tdclass="bg-blue-50 border-l-2 border-blue-500 font-medium">Despliegue de GPT-5. Generación de vídeos educativos integrados.</td>

<tdclass="text-green-700">Razonamiento superior, análisis de datos experto, creación de GPTs.</td>

<tdclass="text-red-600">Alucinaciones posibles si no consulta la web.</td>

<td>Rúbricas complejas y simulaciones de debate.</td>

</tr>

<tr>

<tdclass="font-bold text-gray-900"><spanclass="text-xl mr-2">📝</span> Claude</td>

<td>Modelo de Anthropic diseñado para la lectura profunda.</td>

<tdclass="bg-blue-50 border-l-2 border-blue-500 font-medium">Agentes Educativos para conectarse a Moodle autónomamente.</td>

<tdclass="text-green-700">Contexto masivo (libros enteros), Artefactos interactivos.</td>

<tdclass="text-red-600">Conexión web básica en la versión gratuita.</td>

<td>Corrección de ensayos largos, síntesis de papers.</td>

</tr>

<tr>

<tdclass="font-bold text-gray-900"><spanclass="text-xl mr-2">🌐</span> Gemini</td>

<td>IA de Google integrada en el entorno Workspace.</td>

<tdclass="bg-blue-50 border-l-2 border-blue-500 font-medium">Generador automático de estructuras en Classroom.</td>

<tdclass="text-green-700">Conexión total con Drive/Docs, procesa vídeos largos nativamente.</td>

<tdclass="text-red-600">A veces inconsistente en razonamiento matemático.</td>

<td>Extracción de datos masiva desde PDFs en Drive.</td>

</tr>

<tr>

<tdclass="font-bold text-gray-900"><spanclass="text-xl mr-2">🔍</span> Perplexity</td>

<td>Motor de respuestas para investigación con fuentes.</td>

<tdclass="bg-blue-50 border-l-2 border-blue-500 font-medium">Modo "Scholar" con exportación directa a Zotero/Mendeley.</td>

<tdclass="text-green-700">Cero alucinaciones bibliográficas, citas reales siempre.</td>

<tdclass="text-red-600">Menor capacidad creativa para redactar textos largos.</td>

<td>Verificación de hechos (Fact-checking) e investigación.</td>

</tr>

<tr>

<tdclass="font-bold text-gray-900"><spanclass="text-xl mr-2">🎨</span> Canva</td>

<td>Suite de diseño gráfico con IA generativa.</td>

<tdclass="bg-blue-50 border-l-2 border-blue-500 font-medium">Exportación nativa de Módulos SCORM para plataformas e-learning.</td>

<tdclass="text-green-700">Transforma documentos en presentaciones visuales con un clic.</td>

<tdclass="text-red-600">El texto autogenerado es superficial.</td>

<td>Infografías, resúmenes visuales, mapas mentales.</td>

</tr>

<tr>

<tdclass="font-bold text-gray-900"><spanclass="text-xl mr-2">📎</span> Copilot</td>

<td>Asistente integrado en Microsoft 365 (Word, Excel).</td>

<tdclass="bg-blue-50 border-l-2 border-blue-500 font-medium">Creación de rutas adaptativas (Learning Paths) en Teams.</td>

<tdclass="text-green-700">Privacidad garantizada (no entrena modelos con datos de alumnos).</td>

<tdclass="text-red-600">Requiere licencias institucionales caras (A3/A5).</td>

<td>Análisis predictivo de notas en Excel.</td>

</tr>

</tbody>

</table>

</div>

<divclass="bg-white p-6 rounded-2xl shadow border border-gray-100 max-w-4xl mx-auto">

<h4class="text-xl font-semibold mb-6 text-center text-gray-800">

Desempeño Comparado de LLMs

</h4>

<divclass="chart-wrapper"><canvasid="radarChart"></canvas></div>

</div>

</section>

<sectionid="analisis"class="mb-20">

<divclass="text-center mb-10">

<spanclass="text-[#5856D6] font-bold uppercase text-sm">Perspectiva Técnico‑Pedagógica</span>

<h3class="text-3xl font-extrabold text-gray-900 mt-2 mb-4">🔬 Análisis por Modelo</h3>

</div>

<divclass="space-y-8">

<articleclass="bg-white rounded-2xl shadow border-l-8 border-[#10A37F] p-8">

<divclass="flex items-center gap-4 mb-4">

<spanclass="text-4xl">🤖</span>

<h4class="text-2xl font-bold text-gray-900">ChatGPT 5 – Tutor Analítico</h4>

</div>

<pclass="text-sm text-gray-700">

Adapta el tono según la emoción del alumno, corrige por voz y explica según nivel educativo.

</p>

</article>

<articleclass="bg-white rounded-2xl shadow border-l-8 border-[#D97757] p-8">

<divclass="flex items-center gap-4 mb-4">

<spanclass="text-4xl">📝</span>

<h4class="text-2xl font-bold text-gray-900">Claude 3 Opus – El Académico</h4>

</div>

<pclass="text-sm text-gray-700">

Ideal para lectura crítica y generación de síntesis largas con visión ética y transparente.

</p>

</article>

<articleclass="bg-white rounded-2xl shadow border-l-8 border-[#000000] p-8">

<divclass="flex items-center gap-4 mb-4">

<spanclass="text-4xl">🔍</span>

<h4class="text-2xl font-bold text-gray-900">Perplexity Scholar – El Investigador</h4>

</div>

<pclass="text-sm text-gray-700">

Propone citas reales, contrasta fuentes y resume evidencia científica sin sesgos.

</p>

</article>

</div>

</section>

<sectionid="practica"class="mb-20">

<h3class="text-3xl font-bold text-gray-900 mb-4">⚙️ Eficiencia Docente con IA</h3>

<pclass="text-lg text-gray-600 mb-6">Ahorro de tiempo promedio por tipo de tarea docente (semanal).</p>

<divclass="bg-white p-6 rounded-2xl shadow border border-gray-100 mb-8">

<divclass="chart-wrapper"><canvasid="timeChart"></canvas></div>

</div>

</section>

<sectionid="laboratorio"class="mb-20">

<divclass="bg-gradient-to-br from-[#E8F0FE] to-[#FCE8E6] rounded-3xl p-8 shadow-xl border border-blue-200">

<divclass="text-center mb-8">

<spanclass="bg-white text-gray-800 px-4 py-1 rounded-full text-sm font-bold shadow-sm mb-4 inline-block">

Motor de Recomendaciones Gemini API ✨

</span>

<h3class="text-3xl font-extrabold text-gray-900 mb-2">Laboratorio de Prompts Docentes</h3>

<pclass="text-gray-700">

Describe tu necesidad educativa y recibe una recomendación de herramienta y Super Prompt personalizado.

</p>

</div>

<divclass="max-w-3xl mx-auto bg-white rounded-2xl shadow-md p-6">

<labelclass="block text-sm font-semibold text-gray-700 mb-2">Tu idea docente:</label>

<textareaid="geminiInput"rows="3"class="w-full p-4 rounded-xl border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#007AFF] resize-none mb-4"

placeholder="Ej: Quiero automatizar evaluaciones diagnósticas de lectura..."></textarea>

<divclass="flex justify-between items-center">

<buttonid="btnGeneratePrompt"class="bg-[#007AFF] hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-xl shadow transition">

Generar Super Prompt ✨

</button>

<spanid="geminiStatus"class="hidden text-[#007AFF] font-medium text-sm animate-pulse">

Conectando con Gemini API...

</span>

</div>

<divid="geminiResultContainer"class="mt-8 hidden">

<divclass="bg-blue-50 border-l-4 border-[#007AFF] p-4 rounded-r-xl mb-6">

<h5class="font-bold text-gray-900 mb-1">

🎯 Herramienta: <spanid="geminiToolRecommended"class="text-[#007AFF]"></span>

</h5>

<pid="geminiToolReason"class="text-sm text-gray-700"></p>

</div>

<divclass="flex justify-between items-end mb-2">

<labelclass="block text-sm font-semibold text-gray-800">Super Prompt:</label>

<buttonid="btnCopyPrompt"class="text-xs bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-3 rounded shadow-sm">📋 Copiar</button>

</div>

<divclass="bg-gray-900 text-green-400 p-5 rounded-xl border border-gray-800">

<pid="geminiOutput"class="text-sm font-mono whitespace-pre-wrap"></p>

</div>

</section>

</main>

<footerclass="bg-white border-t border-gray-200 mt-12 py-8 text-center text-gray-500 text-sm">

<p>© 2026 EduIA Analytics · Datos actualizados automáticamente cada lunes · Desarrollado con Chart.js + Tailwind + Gemini API.</p>

</footer>

document.addEventListener("DOMContentLoaded",()=>{

const colors ={

blue:"#007AFF", purple:"#5856D6", green:"#4CD964",

orange:"#FF9500", red:"#FF3B30", gray:"#E5E5EA",

bgBlue:"rgba(0,122,255,0.1)", bgGreen:"rgba(76,217,100,0.2)",

bgPurple:"rgba(88,86,214,0.2)", bgOrange:"rgba(255,149,0,0.2)"

};

const tooltipConfig ={

backgroundColor:"rgba(30, 41, 59, 0.95)",

bodyFont:{ size:13},

titleFont:{ size:14},

padding:12

};

// Línea Adopción

newChart(document.getElementById("adoptionChart"),{

type:"line",

data:{

labels:["2022","2023","2024","2025","2026"],

datasets:[{

label:"Adopción IA docente (%)",

data:[18,40,68,85,91],

borderColor: colors.blue,

backgroundColor: colors.bgBlue,

fill:true,

borderWidth:3,

pointRadius:5,

pointBackgroundColor: colors.red,

tension:0.4

}]

options:{

responsive:true,

maintainAspectRatio:false,

plugins:{ tooltip: tooltipConfig, legend:{ display:false}},

scales:{ y:{ min:0, max:100, ticks:{stepSize:20}}}

}

});

// Donut Usos

newChart(document.getElementById("usageChart"),{

type:"doughnut",

data:{

labels:["Materiales","Tutorías","Evaluaciones","Gestión"],

datasets:[{

data:[38,22,24,16],

backgroundColor:[colors.blue,colors.purple,colors.green,colors.orange],

borderWidth:2

}]

options:{

cutout:"65%",

responsive:true,

plugins:{ tooltip:tooltipConfig, legend:{ position:"right"}}

}

});

// Radar

newChart(document.getElementById("radarChart"),{

type:"radar",

data:{

labels:["Razonamiento","Contexto","Creatividad","Datos"],

datasets:[

{ label:"ChatGPT 5", data:[9,9,8,8], borderColor:colors.green, backgroundColor:colors.bgGreen },

{ label:"Claude 3 Opus", data:[8,10,6,7], borderColor:colors.purple, backgroundColor:colors.bgPurple },

{ label:"Gemini 1.5", data:[8,9,7,10], borderColor:colors.blue, backgroundColor:colors.bgBlue },

{ label:"Perplexity Scholar", data:[9,6,5,8], borderColor:colors.orange, backgroundColor:colors.bgOrange }

]

options:{

responsive:true,

maintainAspectRatio:false,

scales:{ r:{ min:0, max:10, ticks:{display:false}}},

plugins:{ tooltip:tooltipConfig }

}

});

// Barras Tiempo

newChart(document.getElementById("timeChart"),{

type:"bar",

data:{

labels:["Preparar clases","Buscar fuentes","Corregir tareas"],

datasets:[

{ label:"Horas sin IA", data:[10,6,12], backgroundColor:colors.gray },

{ label:"Horas con IA", data:[5,2,6], backgroundColor:colors.blue }

]

options:{

responsive:true,

maintainAspectRatio:false,

plugins:{ tooltip:tooltipConfig },

scales:{ y:{ title:{ display:true,text:"Horas Semanales"}}}

}

});

// --- INTEGRACIÓN DE GEMINI API CON JSON Y MOTOR DE RECOMENDACIÓN ---

const apiKey ="";

asyncfunction fetchGeminiConRecomendacion(promptUser){

const url =`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`;

const delays =[1000,2000,4000,8000];

const instruccionSistema =`Eres un experto en IA aplicada a docencia universitaria. El usuario te dará un objetivo. Tu labor es:

1. Recomendar la herramienta ideal entre: ChatGPT, Claude, Gemini, Perplexity, Canva o Copilot.

2. Dar una breve justificación.

3. Escribir un 'Super Prompt' detallado (con roles, restricciones y formatos) para que el usuario lo pegue en esa herramienta.

Devuelve SOLO JSON válido con esta estructura estricta:

{

"herramienta": "Nombre de la IA",

"justificacion": "Por qué es la mejor",

"super_prompt": "El texto completo del prompt"

}`;

const payload ={

contents:[{ parts:[{ text: promptUser }]}],

systemInstruction:{ parts:[{ text: instruccionSistema }]},

generationConfig:{ responseMimeType:"application/json"}

};

for(let i =0; i < delays.length; i++){

try{

const response =await fetch(url,{

method:'POST',

headers:{'Content-Type':'application/json'},

body:JSON.stringify(payload)

});

if(!response.ok)thrownewError("HTTP Status "+ response.status);

const result =await response.json();

const texto = result.candidates[0].content.parts[0].text;

returnJSON.parse(texto);

}catch(error){

if(i === delays.length -1)throw error;

awaitnewPromise(r => setTimeout(r, delays[i]));

}

const btnGen = document.getElementById('btnGeneratePrompt');

const inputText = document.getElementById('geminiInput');

const loader = document.getElementById('geminiStatus');

const containerRes = document.getElementById('geminiResultContainer');

const domHerramienta = document.getElementById('geminiToolRecommended');

const domRazon = document.getElementById('geminiToolReason');

const domPrompt = document.getElementById('geminiOutput');

const btnCopiar = document.getElementById('btnCopyPrompt');

if(btnGen){

btnGen.addEventListener('click',async()=>{

const idea = inputText.value.trim();

if(!idea){

alert("Por favor, escribe una necesidad docente.");

return;

}

btnGen.disabled =true;

btnGen.classList.add('opacity-50');

loader.classList.remove('hidden');

containerRes.classList.add('hidden');

try{

const data =await fetchGeminiConRecomendacion(idea);

domHerramienta.textContent = data.herramienta ||"Herramienta Recomendada";

domRazon.textContent = data.justificacion ||"Procesa este prompt aquí.";

domPrompt.textContent = data.super_prompt ||"No se pudo generar el texto.";

containerRes.classList.remove('hidden');

}catch(err){

domHerramienta.textContent ="Error de Servidor";

domRazon.textContent ="Revisa tu conexión a la API de Gemini.";

domPrompt.textContent ="Ha ocurrido un error al generar la recomendación.";

containerRes.classList.remove('hidden');

}finally{

btnGen.disabled =false;

btnGen.classList.remove('opacity-50');

loader.classList.add('hidden');

}

});

}

if(btnCopiar){

btnCopiar.addEventListener('click',()=>{

const texto = domPrompt.textContent;

const tempTextArea = document.createElement("textarea");

tempTextArea.value = texto;

tempTextArea.style.position ="fixed";

document.body.appendChild(tempTextArea);

tempTextArea.focus();

tempTextArea.select();

try{

document.execCommand('copy');

const btnOriginal = btnCopiar.innerHTML;

btnCopiar.innerHTML ='✅ Copiado';

setTimeout(()=> btnCopiar.innerHTML = btnOriginal,2000);

}catch(e){

alert("Error al copiar");

}

document.body.removeChild(tempTextArea);

});

}

</script>

</body>

</html>