1<!DOCTYPE html> 2<!-- 3 Vibe Coding Educativo â Código HTML/JS 4 Licencia: GPL-3.0 (ver LICENSE.txt) 5 Contenidos educativos: âEsta obra está bajo licencia CC BY-SA 4.0â 6 https://creativecommons.org/licenses/by-sa/4.0/ 7--> 8<html lang="es" class="scroll-smooth"> 9 10<head> 11 <meta charset="UTF-8"> 12 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 13 <title>Vibe Coding Educativo</title> 14
14<script> 15 tailwind = window.tailwind || {}; 16 tailwind.config = { darkMode: 'class' }; 17 </script>
17 18
18<script> 19 // Modo automático: aplica dark y reacciona a cambios del sistema 20 (function () { 21 try { 22 var mq = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)'); 23 if (!mq) return; 24 var apply = function (isDark) { 25 document.documentElement.classList.toggle('dark', !!isDark); 26 }; 27 apply(mq.matches); 28 if (mq.addEventListener) mq.addEventListener('change', function (e) { apply(e.matches); }); 29 else if (mq.addListener) mq.addListener(function (e) { apply(e.matches); }); 30 } catch (e) {} 31 })(); 32 </script>
32 33
33<script src="https://cdn.tailwindcss.com"></script>
33 34 <link rel="preconnect" href="https://fonts.googleapis.com"> 35 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 36 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap" rel="stylesheet"> 37 <link rel="stylesheet" href="assets/styles.css"> 38 <!-- inline CSS moved to assets/styles.css 39 body { 40 font-family: 'Inter', sans-serif; 41 background-color: #f8fafc; /* slate-50 */ 42 /* Se ha suavizado el color del patrón de fondo para que sea menos distractor */ 43 background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e0f2fe' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); 44 } 45 46 h1, h2, h3 { 47 font-family: 'Poppins', sans-serif; 48 } 49 50 /* Gradiente de texto actualizado con la nueva paleta de colores */ 51 .gradient-text { 52 background: linear-gradient(90deg, #2563EB, #0891B2, #0EA5E9); 53 -webkit-background-clip: text; 54 -webkit-text-fill-color: transparent; 55 background-clip: text; 56 text-fill-color: transparent; 57 } 58 59 .card { 60 background: rgba(255, 255, 255, 0.9); 61 backdrop-filter: blur(10px); 62 border: 1px solid rgba(226, 232, 240, 0.4); 63 transition: transform 0.3s ease, box-shadow 0.3s ease; 64 } 65 66 .card:hover { 67 transform: translateY(-8px); 68 box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); 69 } 70 71 .nav-link { 72 position: relative; 73 transition: color 0.3s; 74 } 75 76 /* Color del subrayado del enlace de navegación actualizado */ 77 .nav-link::after { 78 content: ''; 79 position: absolute; 80 width: 0; 81 height: 2px; 82 bottom: -4px; 83 left: 50%; 84 background-color: #2563EB; /* blue-600 */ 85 transition: all 0.3s ease-in-out; 86 transform: translateX(-50%); 87 } 88 89 .nav-link:hover::after { 90 width: 100%; 91 } 92 93 /* Colores de fondo de sección más sutiles y consistentes */ 94 .section-bg-odd { 95 background-color: #f8fafc; /* slate-50 */ 96 } 97 98 .section-bg-even { 99 background-color: #f0f9ff; /* sky-50 */ 100 } 101 --> 102</head> 103 104<body class="text-slate-700 dark:text-slate-200 antialiased dark:bg-slate-900"> 105 106 <!-- Navegación --> 107 <nav class="bg-white/80 dark:bg-slate-900/80 backdrop-blur-lg sticky top-0 z-50 border-b border-slate-200 dark:border-slate-700"> 108 <div class="container mx-auto px-6 py-3 flex justify-between items-center"> 109 <a href="#" class="flex items-center space-x-3"> 110 <!-- Logo actualizado --> 111 <img src="https://vibe-coding-educativo.github.io/vibe_coding_educativo.png" alt="Logotipo de Vibe Coding Educativo" class="h-10 w-auto rounded-full"> 112 <span class="hidden sm:block text-xl font-bold gradient-text" data-lang="groupName">Vibe Coding Educativo</span> 113 </a> 114 <div id="main-nav" class="hidden md:flex space-x-6 items-center"> 115 <a href="#que-es" class="nav-link text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium" data-lang="navWhatIs">Qué es</a> 116 <a href="#comunidad" class="nav-link text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium" data-lang="navCommunity">Comunidad</a> 117 <a href="#apps" class="nav-link text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium" data-lang="navApps">Aplicaciones</a> 118 <a href="#boletin" class="nav-link text-slate-600 dar
118k:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium" data-lang="navNewsletter">BoletÃn</a> 119 <a href="#recursos" class="nav-link text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium" data-lang="navResources">Recursos</a> 120 <a href="#agente" class="nav-link text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium" data-lang="navAgent">Agente</a> 121 <div class="relative"> 122 <select id="lang-selector" class="appearance-none bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 py-2 pl-3 pr-8 rounded-lg leading-tight focus:outline-none focus:bg-white dark:focus:bg-slate-900 focus:border-slate-500"> 123 <option value="es">Español</option> 124 <option value="ca">Català </option> 125 <option value="gl">Galego</option> 126 <option value="eu">Euskara</option> 127 <option value="en">English</option> 128 </select> 129 <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-700 dark:text-slate-300"> 130 <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg> 131 </div> 132 </div> 133 134 </div> 135 <div class="flex items-center md:hidden"> 136 <button id="mobile-menu-button" class="text-slate-700 ml-4"> 137 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 138 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" /> 139 </svg> 140 </button> 141 </div> 142 </div> 143 <!-- Menú Móvil --> 144 <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-700"> 145 <a href="#que-es" class="block py-2 px-4 text-sm hover:bg-slate-100 dark:hover:bg-slate-800" data-lang="navWhatIs">Qué es</a> 146 <a href="#comunidad" class="block py-2 px-4 text-sm hover:bg-slate-100 dark:hover:bg-slate-800" data-lang="navCommunity">Comunidad</a> 147 <a href="#apps" class="block py-2 px-4 text-sm hover:bg-slate-100 dark:hover:bg-slate-800" data-lang="navApps">Aplicaciones</a> 148 <a href="#boletin" class="block py-2 px-4 text-sm hover:bg-slate-100 dark:hover:bg-slate-800" data-lang="navNewsletter">BoletÃn</a> 149 <a href="#recursos" class="block py-2 px-4 text-sm hover:bg-slate-100 dark:hover:bg-slate-800" data-lang="navResources">Recursos</a> 150 <a href="#agente" class="block py-2 px-4 text-sm hover:bg-slate-100 dark:hover:bg-slate-800" data-lang="navAgent">Agente</a> 151 152 <a href="https://t.me/vceduca" target="_blank" class="block py-3 px-4 text-sm bg-blue-600 text-white text-center font-bold" data-lang="joinGroup"> 153 Ãnete al Grupo 154 </a> 155 </div> 156 </nav> 157 158 <!-- Hero Section --> 159 <header class="bg-white dark:bg-slate-900"> 160 <div class="container mx-auto px-6 py-20 text-center"> 161 <!-- Logo actualizado --> 162 <img src="https://vibe-coding-educativo.github.io/vibe_coding_educativo.png" alt="Logotipo de Vibe Coding Educativo" class="mx-auto h-28 w-auto mb-8 rounded-full shadow-lg border-4 border-white"> 163 <h1 class="text-4xl md:text-6xl font-bold gradient-text" data-lang="heroTitle">Programa con Propósito y Vibe</h1> 164 <p class="text-lg md:text-xl text-slate-600 dark:text-slate-300 mt-4 max-w-3xl mx-auto" data-lang="heroSubtitle">Un espacio para crear, compartir y aprender a desarrollar aplicaciones educativas interactivas con lenguaje natural e Inteligencia Artificial.</p> 165 <div class="mt-8 flex flex-col sm:flex-row justify-center items-center gap-4 flex-wrap"> 166 <!-- Botones principales --> 167 <a href="#apps" class="w-full sm:w-auto bg-amber-500 text-white font-bold py-3 px-6 rounded-lg hover:bg-amber-600 transition duration-300 shadow-lg transform hover:scale-105" data-lang="viewApps">Ver Aplicaciones</a> 168 <a href="#boletin" class="w-full sm:w-auto bg-blue-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-700 transition duration-300 shadow-lg transform hover:scale-105" data-lang="viewNewsletter">Ver BoletÃn</a> 169 <a href="#agente" class="w-full sm:w-auto bg-cyan-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-cyan-700 transition duration-300 shadow-lg transform hover:scale-105" data-lang="agentButtonHeader">Resuelve tus dudas con nuestro Agente</a> 170 <a href="https://t.me/vceduca" target="_blank" class="w-full sm:w-auto bg-slate-700 text-white font-bold py-3 px-6 rounded-lg hover:bg-slate-800 transition duration-300 transform hover:scale-105" data-lang="joinTelegram">Ãnete en Telegram</a> 171 </div> 172 </div> 173 </header> 174 175 <!-- Ficha destacada: la guÃa «Vibe coding responsable», en el idioma elegido --> 176 <section id="vibe-responsable" class="py-16 section-bg-odd"> 177 <div class="container mx-auto px-6"> 178 <div class="max-w-4xl mx-auto card rounded-2xl bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 border-t-4 border-teal-600 shadow-lg p-6 md:p-10 flex flex-col md:flex-row items-center gap-8"> 179 <a href="https://vibe-coding-educativo.github.io/vibe-responsable/es/" data-href-lang="https://vibe-coding-educativo.github.io/vibe-responsable/{lang}/" target="_blank" rel="noopener noreferrer" class="flex-shrink-0"> 180 <img src="https://vibe-coding-educativo.github.io/vibe-responsable/infografia/lista-iconos.es.png" data-src-lang="https://vibe-coding-educativo.github.io/vibe-responsable/infografia/lista-iconos.{lang}.png" alt="" width="1080" height="1928" loading="lazy" class="w-40 md:w-48 h-auto rounded-lg shadow-md border border-slate-200 dark:border-slate-700"> 181 </a> 182 <div class="text-center md:text-left"> 183 <p class="text-sm font-bold uppercase tracking-wider text-teal-700 dark:text-teal-400" data-lang="guideBadge">GuÃa de la comunidad</p> 184 <h2 class="text-3xl md:text-4xl font-bold text-slate-900 dark:text-slate-100 mt-2" data-lang="guideTitle">Vibe coding responsable</h2>
185 <p class="mt-4 text-lg text-slate-600 dark:text-slate-300" data-lang="guideDesc">Diez recomendaciones para publicar de forma responsable y ética los materiales creados con IA: licencias, datos del alumnado, accesibilidad y transparencia sobre cómo se han hecho. Incluye instrucciones para que la IA las siga y una rúbrica para evaluar cualquier recurso.</p> 186 <a href="https://vibe-coding-educativo.github.io/vibe-responsable/es/" data-href-lang="https://vibe-coding-educativo.github.io/vibe-responsable/{lang}/" target="_blank" rel="noopener noreferrer" class="mt-6 bg-teal-700 text-white font-bold py-3 px-8 rounded-lg hover:bg-teal-800 transition duration-300 shadow-lg inline-flex items-center transform hover:scale-105" data-lang="guideButton">Leer la guÃa</a> 187 </div> 188 </div> 189 </div> 190 </section> 191 192 <!-- Sección Qué es Vibe Coding --> 193 <section id="que-es" class="py-20 section-bg-even"> 194 <div class="container mx-auto px-6"> 195 <div class="text-center mb-12"> 196 <h2 class="text-3xl md:text-4xl font-bold text-slate-900 dark:text-slate-100" data-lang="whatIsTitle">¿Qué es el Vibe Coding Educativo?</h2> 197 <p class="mt-4 text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto" data-lang="whatIsSubtitle">Una nueva forma de programar, más intuitiva y accesible para todos los educadores.</p> 198 </div> 199 <div class="grid md:grid-cols-2 gap-12 items-center"> 200 <div class="prose lg:prose-lg text-slate-700 dark:text-slate-300" data-lang="whatIsContent"> 201 <p><strong>Vibe Coding Educativo</strong> es un grupo y una metodologÃa centrada en la creación de aplicaciones para la enseñanza mediante <em>vibe coding</em>: un enfoque de desarrollo basado en <strong>lenguaje natural</strong> y apoyado por modelos de inteligencia artificial ð¤.</p> 202 <p>Es un espacio para compartir aplicaciones, resolver dudas técnicas y profundizar en el uso didáctico de esta forma de programación asistida. No necesitas ser un experto en código; si tienes una idea para una herramienta educativa, aquà puedes aprender a hacerla realidad.</p> 203 <blockquote class="border-l-4 border-blue-500 pl-4 italic text-slate-800"> 204 "Es hacer programas a través de la IA. Le dices lo que quieres y lo hace." - Juanjo de Haro 205 </blockquote> 206 <p>La clave está en la conversación con la IA, refinando la idea paso a paso hasta obtener una aplicación funcional y atractiva que puedes integrar en tus clases y recursos digitales.</p> 207 </div> 208 <div> 209 <!-- SVG con colores actualizados --> 210 <div class="bg-white dark:bg-slate-800 p-4 rounded-xl shadow-2xl border border-slate-100 dark:border-slate-700"> 211 <svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg" class="w-full h-full rounded-lg"> 212 <defs> 213 <linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%"> 214 <stop offset="0%" stop-color="#e0f2fe" /> 215 <stop offset="100%" stop-color="#dbeafe" /> 216 </linearGradient> 217 </defs> 218 <rect width="200" height="150" fill="url(#bg-grad)" /> 219 220 <g transform="translate(30, 45)"> 221 <path d="M20,0 L20,50 L5,50 C2.23,50,0,47.77,0,45 L0,5 C0,2.23,2.23,0,5,0 z" fill="#60a5fa"/> 222 <path d="M25,0 L25,50 L45,50 C47.77,50,50,47.77,50,45 L50,5 C50,2.23,47.77,0,45,0 z" fill="#93c5fd"/> 223 <rect x="22" y="-2" width="6" height="54" fill="#3b82f6" rx="2"/> 224 <text x="25" y="65" font-family="Poppins, sans-serif" font-size="10" fill="#1e40af" text-anchor="middle" font-weight="600" data-lang="learnWord">Aprender</text> 225 </g> 226 227 <text x="100" y="80" font-family="Poppins, sans-serif" font-size="30" fill="#334155" text-anchor="middle" font-weight="600">+</text> 228 229 <!-- Desplazado para equilibrar márgenes izquierdo/derecho --> 230 <g transform="translate(112, 50)"> 231 <text x="20" y="10" font-family="monospace" font-size="14" fill="#0891B2" opacity="0.8"><div></text> 232 <text x="25" y="28" font-family="monospace" font-size="14" fill="#0891B2" opacity="0.8"> IA</text> 233 <text x="20" y="46" font-family="monospace" font-size="14" fill="#0891B2" opacity="0.8"></div></text>
234 <path d="M10,0 L0,10 L10,20" stroke="#06b6d4" stroke-width="2.5" fill="none"/> 235 <path d="M68,48 L78,38 L68,28" stroke="#06b6d4" stroke-width="2.5" fill="none"/> 236 <text x="35" y="65" font-family="Poppins, sans-serif" font-size="10" fill="#155e75" text-anchor="middle" font-weight="600" data-lang="createWord">Crear</text> 237 </g> 238 </svg> 239 </div> 240 </div> 241 </div> 242 </div> 243 </section> 244 245 <!-- Sección Comunidad --> 246 <section id="comunidad" class="py-20 bg-white dark:bg-slate-900"> 247 <div class="container mx-auto px-6"> 248 <div class="text-center mb-12"> 249 <h2 class="text-3xl md:text-4xl font-bold text-slate-900 dark:text-slate-100" data-lang="communityTitle">Una Comunidad Abierta y Colaborativa</h2> 250 <p class="mt-4 text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto" data-lang="communitySubtitle">Conectamos con otros apasionados de la tecnologÃa y la educación.</p> 251 </div> 252 <div class="grid md:grid-cols-3 gap-8"> 253 <!-- Tarjeta 1: Color primario --> 254 <div class="card p-6 text-center border-t-4 border-blue-500 rounded-lg bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 border border-slate-100 dark:border-slate-700"> 255 <img src="https://vibe-coding-educativo.github.io/vibe_coding_educativo.png" alt="Logo Vibe Coding Educativo" class="mx-auto h-16 w-16 mb-4 rounded-full"> 256 <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300" data-lang="card1Title">Grupo de Telegram</h3> 257 <p class="text-slate-600 dark:text-slate-300 mb-4" data-lang="card1Desc">El corazón de nuestra comunidad. Ãnete para compartir tus proyectos, resolver dudas y aprender de los demás.</p> 258 <a href="https://t.me/vceduca" target="_blank" class="font-semibold text-blue-600 dark:text-blue-400 hover:underline" data-lang="card1Link">Unirme al grupo →</a> 259 </div> 260 <!-- Tarjeta 2: Color secundario (cian) --> 261 <div class="card p-6 text-center border-t-4 border-cyan-500 rounded-lg bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 border border-slate-100 dark:border-slate-700"> 262 <img src="https://chatgpt-ia-edu.github.io/chatgptTelegram.jpeg" alt="Logo ChatGPT-IA-edu" class="mx-auto h-16 w-16 mb-4 rounded-full"> 263 <h3 class="text-2xl font-bold mb-3 text-cyan-800 dark:text-cyan-300" data-lang="card2Title">ChatGPT-IA-edu</h3> 264 <p class="text-slate-600 dark:text-slate-300 mb-4" data-lang="card2Desc">Este grupo está vinculado con la comunidad especializada en el uso educativo de la IA en un sentido más amplio. En él encontrarás otros grupos de interés sobre IA educativa.</p> 265 <a href="https://chatgpt-ia-edu.github.io/" target="_blank" class="font-semibold text-cyan-600 dark:text-cyan-400 hover:underline" data-lang="card2Link">Visitar grupo →</a> 266 </div> 267 <!-- Tarjeta 3: Color de acento (ámbar) para destacar --> 268 <div class="card p-6 text-center border-t-4 border-amber-500 rounded-lg bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 border border-slate-100 dark:border-slate-700"> 269 <img src="https://conocimiento-abierto.github.io/abierto_reducido.png" alt="Logo Conocimiento Abierto" class="mx-auto h-16 w-16 mb-4 rounded-full"> 270 <h3 class="text-2xl font-bold mb-3 text-amber-800 dark:text-amber-300" data-lang="card3Title">Conocimiento Abierto</h3> 271 <p class="text-slate-600 dark:text-slate-300 mb-4" data-lang="card3Desc">Nos adherimos a los principios del Conocimiento Abierto, fomentando que la tecnologÃa y la educación sean accesibles para todos.</p> 272 <a href="https://bilateria.org/app/" target="_blank" class="font-semibold text-amber-600 dar
272k:text-amber-400 hover:underline" data-lang="card3Link">Leer principios →</a> 273 </div> 274 </div> 275 </div> 276 </section> 277 278 <!-- Sección Aplicaciones --> 279 <section id="apps" class="py-20 section-bg-even"> 280 <div class="container mx-auto px-6"> 281 <div class="text-center mb-12"> 282 <h2 class="text-3xl md:text-4xl font-bold text-slate-900 dark:text-slate-100" data-lang="appsTitle">GalerÃa de Aplicaciones</h2> 283 <p class="mt-4 text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto" data-lang="appsSubtitle">Descubre lo que hemos creado. ¡InspÃrate y crea la tuya!</p> 284 </div> 285 <div class="text-center mb-8"> 286 <a href="https://vibe-coding-educativo.github.io/app_edu/" target="_blank" class="bg-blue-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-blue-700 transition duration-300 shadow-lg inline-flex items-center space-x-2 transform hover:scale-105"> 287 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> 288 <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" /> 289 <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.022 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" /> 290 </svg> 291 <span data-lang="exploreRepo">Explorar el Repositorio Completo</span> 292 </a> 293 </div> 294 <p class="text-center mt-4 text-slate-600" data-lang="addAppNote">Para añadir tu aplicación, utiliza el formulario oficial disponible en el grupo de Telegram.</p> 295 </div> 296 </section> 297 298 <!-- Sección BoletÃn --> 299 <section id="boletin" class="py-20 section-bg-odd"> 300 <div class="container mx-auto px-6"> 301 <div class="text-center mb-12"> 302 <h2 class="text-3xl md:text-4xl font-bold text-slate-900 dark:text-slate-100" data-lang="newsletterTitle">BoletÃn Semanal</h2> 303 <p class="mt-4 text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto" data-lang="newsletterSubtitle">Un resumen de las conversaciones, recursos y proyectos más destacados de la comunidad.</p> 304 </div> 305 <div class="max-w-2xl mx-auto text-center card p-8 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 border border-slate-100 dark:border-slate-700"> 306 <p class="text-slate-600 mb-6" data-lang="newsletterDesc">Cada semana, recopilamos lo más relevante de nuestro grupo de Telegram para que no te pierdas nada. Descubre nuevas herramientas, debates interesantes y las últimas creaciones de los miembros.</p> 307 <a href="https://vibe-coding-educativo.github.io/boletin/" target="_blank" class="bg-cyan-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-cyan-700 transition duration-300 shadow-lg inline-flex items-center space-x-2 transform hover:scale-105"> 308 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 309 <path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3h3m-3 4h3m-3 4h3" /> 310 </svg> 311 <span data-lang="readNewsletter">Leer el último boletÃn</span> 312 </a> 313 </div> 314 </div> 315 </section> 316 317 <!-- Sección Recursos --> 318 <section id="recursos" class="py-20 bg-white dark:bg-slate-900"> 319 <div class="container mx-auto px-6"> 320 <div class="text-center mb-12"> 321 <h2 class="text-3xl md:text-4xl font-bold text-slate-900 dark:text-slate-100" data-lang="resourcesTitle">Recursos y GuÃas</h2> 322 <p class="mt-4 text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto" data-lang="resourcesSubtitle">Enlaces clave para empezar y profundizar en el Vibe Coding.</p> 323 </div> 324 <div class="max-w-4xl mx-auto"> 325 <ul class="space-y-6">
326 <li class="bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200 border border-slate-100 dark:border-slate-700 p-6 rounded-lg shadow-sm hover:shadow-md transition hover:bg-blue-50 dark:hover:bg-slate-700 flex items-start space-x-4"> 327 <div class="flex-shrink-0 text-blue-500 dark:text-blue-400 mt-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg></div> 328 <div> 329 <h3 class="text-xl font-semibold mb-2 text-blue-700 dark:text-blue-300" data-lang="resource1Title">Manual de Vibe Coding Educativo</h3> 330 <p class="text-slate-600 dark:text-slate-300 mb-3" data-lang="resource1Desc">Una guÃa completa con extractos de artÃculos sobre cómo crear aplicaciones, dónde publicarlas y más.</p> 331 <a href="https://labia.tiddlyhost.com/#Vibe%20Coding%20Educativo" target="_blank" class="font-semibold text-blue-600 dark:text-blue-400 hover:underline" data-lang="resourceLink">Acceder al manual →</a> 332 </div> 333 </li> 334 <li class="bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200 border border-slate-100 dark:border-slate-700 p-6 rounded-lg shadow-sm hover:shadow-md transition hover:bg-cyan-50 dark:hover:bg-slate-700 flex items-start space-x-4"> 335 <div class="flex-shrink-0 text-cyan-500 dark:text-cyan-400 mt-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7Z"/><path d="M18 8h-8"/><path d="M18 12h-8"/><path d="M12 16h-8"/></svg></div> 336 <div> 337 <h3 class="text-xl font-semibold mb-2 text-cyan-700 dark:text-cyan-300" data-lang="resource2Title">Cómo activar la IA en recursos educativos</h3> 338 <p class="text-slate-600 dark:text-slate-300 mb-3" data-lang="resource2Desc">Aprende a integrar chatbots de IA (Grok, ChatGPT, etc.) en tus materiales digitales como Moodle, eXeLearning o Google Sites.</p> 339 <a href="https://educacion.bilateria.org/como-activar-la-ia-con-html" target="_blank" class="font-semibold text-cyan-600 dark:text-cyan-400 hover:underline" data-lang="readArticle">Leer el artÃculo →</a> 340 </div> 341 </li> 342 </ul> 343 </div> 344 </div> 345 </section> 346 347 <!-- Sección Agente --> 348 <section id="agente" class="py-20 section-bg-even"> 349 <div class="container mx-auto px-6"> 350 <div class="text-center mb-12"> 351 <h2 class="text-3xl md:text-4xl font-bold text-slate-900 dark:text-slate-100" data-lang="agentTitle">Agente NotebookLM</h2> 352 <p class="mt-4 text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto" data-lang="agentSubtitle">Tu asistente para resolver dudas sobre Vibe Coding Educativo al instante.</p> 353 </div> 354 <div class="max-w-2xl mx-auto text-center card p-8 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 border border-slate-100 dark:border-slate-700"> 355 <p class="text-slate-600 dark:text-slate-300 mb-6" data-lang="agentDesc">Nuestro agente NotebookLM reúne el conocimiento compartido por la comunidad y te guÃa con respuestas contextualizadas y recursos recomendados.</p> 356 <p class="text-slate-600 dark:text-slate-300 mb-6" data-lang="agentNote">Hemos creado un nuevo agente experto con NotebookLM a partir de las conversaciones del grupo de Telegram, para que recibas respuestas alineadas con la experiencia colectiva.</p> 357 <a id="agent-open-button" href="https://notebooklm.google.com/notebook/8604babb-0861-43f0-8c96-152a49a509b3" class="bg-blue-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-blue-700 transition duration-300 shadow-lg inline-flex items-center space-x-2 transform hover:scale-105"> 358 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 359 <path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> 360 </svg>
361 <span data-lang="agentButton">Abrir el Agente</span> 362 </a> 363 </div> 364 </div> 365 </section> 366 367 <!-- Footer --> 368 <footer class="bg-slate-800 text-white"> 369 <div class="container mx-auto px-6 py-8"> 370 <div class="text-center"> 371 <h3 class="text-2xl font-bold" data-lang="footerTitle">Participa, comparte, aprende y programa con propósito y vibe.</h3> 372 <div class="mt-6"> 373 <a href="https://t.me/vceduca" target="_blank" class="bg-amber-500 text-white font-bold py-3 px-6 rounded-lg hover:bg-amber-600 transition duration-300 shadow-lg transform hover:scale-105" data-lang="joinConversation"> 374 Ãnete a la conversación 375 </a> 376 </div> 377 </div> 378 <div class="mt-12 text-center text-slate-400 text-sm"> 379 <p data-lang="footerCommunity">Comunidad Vibe Coding Educativo.</p> 380 <p class="mt-2"> 381 <a href="LICENSE.txt" class="hover:underline">Código: GPL v3</a> 382 · 383 <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" class="hover:underline">Contenidos: CC BY-SA 4.0</a> 384 </p> 385 </div> 386 </div> 387 </footer> 388 389
389<script src="assets/main.js"></script>
389 390 <!-- moved inline script to assets/main.js --> 391 <!-- legacy inline script removed --> 392 393</body> 394 395</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.