mirror of
https://github.com/andwati/copilot-dev-days.git
synced 2026-10-18 10:12:53 +00:00
201 lines
10 KiB
HTML
201 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<!-- Google tag (gtag.js) -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LSC44NDPLQ"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
gtag('config', 'G-LSC44NDPLQ');
|
|
</script>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>VS Code GitHub Copilot Agent Lab | Edición TypeScript</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<link rel="alternate" hreflang="en" href="https://copilot-dev-days.github.io/agent-lab-typescript/">
|
|
<link rel="alternate" hreflang="pt-BR" href="https://copilot-dev-days.github.io/agent-lab-typescript/pt_BR/">
|
|
<link rel="alternate" hreflang="es" href="https://copilot-dev-days.github.io/agent-lab-typescript/es/">
|
|
<link rel="alternate" hreflang="x-default" href="https://copilot-dev-days.github.io/agent-lab-typescript/">
|
|
<link rel="stylesheet" href="../styles.css">
|
|
<link rel="stylesheet" href="../light-theme.css">
|
|
<script src="../theme-toggle.js"></script>
|
|
</head>
|
|
<body>
|
|
<div style="position:fixed;top:1rem;right:1rem;z-index:1000;display:flex;gap:0.5rem;align-items:center;">
|
|
<div class="locale-picker" id="localePicker">
|
|
<button type="button" class="locale-toggle" aria-haspopup="listbox" aria-expanded="false" aria-label="Seleccionar idioma">🌐</button>
|
|
<ul role="listbox" aria-label="Idioma">
|
|
<li role="option" data-locale="en" aria-selected="false">🇬🇧 English</li>
|
|
<li role="option" data-locale="es" aria-selected="true" class="active">🇪🇸 Español</li>
|
|
<li role="option" data-locale="pt-BR" aria-selected="false">🇧🇷 Português (Brasil)</li>
|
|
</ul>
|
|
</div>
|
|
<button class="theme-toggle" onclick="toggleTheme()">☀️ Claro</button>
|
|
</div>
|
|
<div class="container">
|
|
<section class="hero">
|
|
<span class="hero-badge">🚀 TypeScript + Vite + React + Tailwind</span>
|
|
<h1>VS Code GitHub Copilot Agent Lab</h1>
|
|
<p class="hero-subtitle">
|
|
Construye un juego de Bingo Social mientras dominas el Agent Mode de VS Code con GitHub Copilot.
|
|
Aprende ingeniería de contexto, agentes personalizados y flujos de desarrollo con IA.
|
|
</p>
|
|
<div class="hero-cta">
|
|
<a href="step.html?step=00-overview" class="btn btn-primary">🚀 Iniciar Taller</a>
|
|
<a href="../game/" class="btn btn-secondary">🎮 Jugar</a>
|
|
<a href="https://github.com/copilot-dev-days/agent-lab-typescript" class="btn btn-secondary">📦 GitHub Repo</a>
|
|
</div>
|
|
<p class="hero-also">También disponible en <a href="https://copilot-dev-days.github.io/agent-lab-dotnet/">.NET</a>, <a href="https://copilot-dev-days.github.io/agent-lab-java/">Java</a> y <a href="https://copilot-dev-days.github.io/agent-lab-python/">Python</a></p>
|
|
<div class="stats">
|
|
<div class="stat">
|
|
<div class="stat-value">~1hr</div>
|
|
<div class="stat-label">Duración</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value">4</div>
|
|
<div class="stat-label">Partes</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value">9</div>
|
|
<div class="stat-label">Etapas</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="features">
|
|
<h2 class="section-title">Lo que Aprenderás</h2>
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🧠</div>
|
|
<h3>Ingeniería de Contexto</h3>
|
|
<p>Enseña a la IA sobre tu código con instrucciones, haciendo las sugerencias de Copilot más precisas y relevantes.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🤖</div>
|
|
<h3>Primitivas Agénticas</h3>
|
|
<p>Usa agentes en segundo plano, agentes en la nube y flujos personalizados para escalar tu desarrollo.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🎨</div>
|
|
<h3>Desarrollo Design-First</h3>
|
|
<p>Deja que la IA itere en la UI mientras tú guías la visión creativa con agentes de diseño especializados.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🧪</div>
|
|
<h3>Desarrollo Guiado por Pruebas</h3>
|
|
<p>Construye funcionalidades confiables usando agentes TDD con el flujo Red-Green-Refactor.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="workshop">
|
|
<h2 class="section-title">Partes del Taller</h2>
|
|
<div class="parts-list">
|
|
<a href="step.html?step=01-setup" class="part-card">
|
|
<div class="part-number">01</div>
|
|
<div class="part-content">
|
|
<h3>Setup & Ingeniería de Contexto</h3>
|
|
<p>Clona, configura y enseña a la IA sobre tu proyecto</p>
|
|
</div>
|
|
<span class="part-time">15 min</span>
|
|
</a>
|
|
<a href="step.html?step=02-design" class="part-card">
|
|
<div class="part-number">02</div>
|
|
<div class="part-content">
|
|
<h3>Frontend Design-First</h3>
|
|
<p>Rediseña la UI con temas creativos usando Plan Mode</p>
|
|
</div>
|
|
<span class="part-time">15 min</span>
|
|
</a>
|
|
<a href="step.html?step=03-quiz-master" class="part-card">
|
|
<div class="part-number">03</div>
|
|
<div class="part-content">
|
|
<h3>Quiz Master Personalizado</h3>
|
|
<p>Crea preguntas temáticas con agentes personalizados</p>
|
|
</div>
|
|
<span class="part-time">10 min</span>
|
|
</a>
|
|
<a href="step.html?step=04-multi-agent" class="part-card">
|
|
<div class="part-number">04</div>
|
|
<div class="part-content">
|
|
<h3>Desarrollo Multi-Agent</h3>
|
|
<p>Construye nuevas funcionalidades con agentes de TDD y diseño</p>
|
|
</div>
|
|
<span class="part-time">20 min</span>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="prereqs">
|
|
<div class="container">
|
|
<h2 class="section-title">Requisitos Previos</h2>
|
|
<div class="prereqs-grid">
|
|
<div class="prereq-item">
|
|
<span class="prereq-check">✓</span>
|
|
<span>VS Code v1.107+</span>
|
|
</div>
|
|
<div class="prereq-item">
|
|
<span class="prereq-check">✓</span>
|
|
<span>GitHub Copilot</span>
|
|
</div>
|
|
<div class="prereq-item">
|
|
<span class="prereq-check">✓</span>
|
|
<span>Node.js 22+</span>
|
|
</div>
|
|
<div class="prereq-item">
|
|
<span class="prereq-check">✓</span>
|
|
<span>Git instalado</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="container">
|
|
<footer>
|
|
<div class="footer-links">
|
|
<a href="https://github.com/copilot-dev-days/agent-lab-typescript">GitHub Repository</a>
|
|
<a href="https://www.youtube.com/code">VS Code YouTube</a>
|
|
<a href="https://code.visualstudio.com/docs/copilot/overview">Copilot Docs</a>
|
|
<a href="https://github.com/github/awesome-copilot">Awesome Copilot</a>
|
|
</div>
|
|
<p class="footer-credit">Hecho con 💜 por el equipo de VS Code</p>
|
|
</footer>
|
|
</div>
|
|
<script>
|
|
(function(){
|
|
var match=location.pathname.match(/\/(pt_BR|es)\//);
|
|
var locale=match?match[1]:'en';
|
|
var picker=document.getElementById('localePicker');
|
|
if(!picker)return;
|
|
var btn=picker.querySelector('.locale-toggle'),list=picker.querySelector('ul');
|
|
list.querySelectorAll('li').forEach(function(li){
|
|
var l=li.dataset.locale==='pt-BR'?'pt_BR':li.dataset.locale;
|
|
if(l===locale){li.classList.add('active');li.setAttribute('aria-selected','true');}
|
|
else{li.classList.remove('active');li.setAttribute('aria-selected','false');}
|
|
});
|
|
function open(){list.style.display='block';btn.setAttribute('aria-expanded','true');}
|
|
function close(){list.style.display='none';btn.setAttribute('aria-expanded','false');}
|
|
btn.addEventListener('click',function(e){e.stopPropagation();list.style.display==='block'?close():open();});
|
|
document.addEventListener('click',close);
|
|
document.addEventListener('keydown',function(e){if(e.key==='Escape')close();});
|
|
list.querySelectorAll('li').forEach(function(li){
|
|
li.addEventListener('click',function(e){
|
|
e.stopPropagation();
|
|
var t=li.dataset.locale==='pt-BR'?'pt_BR':li.dataset.locale;
|
|
if(t===locale){close();return;}
|
|
var p=location.pathname;
|
|
if(locale!=='en')p=p.replace(new RegExp('/'+locale+'/'),'/');;
|
|
if(t!=='en')p=p.replace(/\/docs\//,'/docs/'+t+'/');
|
|
localStorage.setItem('preferred-locale',t);
|
|
window.location.href=p+location.search;
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|