|
|
<!DOCTYPE html> |
|
|
<html lang="es"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>¿Qué es la Programación?</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.code-block { |
|
|
font-family: 'Courier New', monospace; |
|
|
background-color: #2d3748; |
|
|
color: #f7fafc; |
|
|
border-radius: 0.5rem; |
|
|
padding: 1rem; |
|
|
margin: 1rem 0; |
|
|
overflow-x: auto; |
|
|
} |
|
|
.analogy-card { |
|
|
transition: all 0.3s ease; |
|
|
transform: scale(1); |
|
|
} |
|
|
.analogy-card:hover { |
|
|
transform: scale(1.03); |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.flow-chart { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
gap: 1rem; |
|
|
} |
|
|
.flow-step { |
|
|
background-color: #4299e1; |
|
|
color: white; |
|
|
padding: 1rem 2rem; |
|
|
border-radius: 0.5rem; |
|
|
width: 80%; |
|
|
text-align: center; |
|
|
position: relative; |
|
|
} |
|
|
.flow-step:not(:last-child)::after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
bottom: -1rem; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
width: 0; |
|
|
height: 0; |
|
|
border-left: 1rem solid transparent; |
|
|
border-right: 1rem solid transparent; |
|
|
border-top: 1rem solid #4299e1; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0%, 100% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
} |
|
|
.pulse-animation { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
|
|
|
<header class="text-center mb-12"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold text-blue-600 mb-4"> |
|
|
<i class="fas fa-code mr-3"></i> ¿Qué es la Programación? |
|
|
</h1> |
|
|
<p class="text-xl text-gray-700 max-w-3xl mx-auto"> |
|
|
Aprende los conceptos básicos de la programación de computadoras con ejemplos de la vida real |
|
|
</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="max-w-6xl mx-auto"> |
|
|
|
|
|
<section class="bg-white rounded-xl shadow-md p-6 mb-8"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center"> |
|
|
<i class="fas fa-question-circle text-blue-500 mr-2"></i> Definición Simple |
|
|
</h2> |
|
|
<p class="text-gray-700 mb-4"> |
|
|
La programación es el proceso de dar <span class="font-bold text-blue-600">instrucciones precisas</span> a una computadora para que realice tareas específicas. |
|
|
Es como escribir una receta de cocina, pero en lugar de ingredientes y pasos para un plato, usamos |
|
|
<span class="font-bold text-blue-600">código</span> para decirle a la computadora qué hacer. |
|
|
</p> |
|
|
|
|
|
<div class="flex flex-col md:flex-row gap-6 mt-6"> |
|
|
<div class="flex-1 bg-blue-50 p-4 rounded-lg"> |
|
|
<h3 class="font-semibold text-blue-700 mb-2"> |
|
|
<i class="fas fa-lightbulb text-yellow-500 mr-2"></i> ¿Por qué es importante? |
|
|
</h3> |
|
|
<p class="text-gray-700"> |
|
|
Todo lo que hace una computadora, desde mostrar esta página web hasta los juegos en tu teléfono, |
|
|
está controlado por programas escritos por programadores. |
|
|
</p> |
|
|
</div> |
|
|
<div class="flex-1 bg-green-50 p-4 rounded-lg"> |
|
|
<h3 class="font-semibold text-green-700 mb-2"> |
|
|
<i class="fas fa-cogs text-green-500 mr-2"></i> ¿Cómo funciona? |
|
|
</h3> |
|
|
<p class="text-gray-700"> |
|
|
Los programadores escriben código en lenguajes especiales (como Python, JavaScript o Java) |
|
|
que luego la computadora puede entender y ejecutar. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-white rounded-xl shadow-md p-6 mb-8"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center"> |
|
|
<i class="fas fa-project-diagram text-purple-500 mr-2"></i> Proceso de Programación |
|
|
</h2> |
|
|
|
|
|
<div class="flow-chart"> |
|
|
<div class="flow-step"> |
|
|
<i class="fas fa-lightbulb mr-2"></i> Tener una idea o problema a resolver |
|
|
</div> |
|
|
<div class="flow-step"> |
|
|
<i class="fas fa-pencil-alt mr-2"></i> Escribir el código (instrucciones) |
|
|
</div> |
|
|
<div class="flow-step"> |
|
|
<i class="fas fa-cogs mr-2"></i> La computadora ejecuta el código |
|
|
</div> |
|
|
<div class="flow-step"> |
|
|
<i class="fas fa-check-circle mr-2"></i> Obtener el resultado deseado |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-white rounded-xl shadow-md p-6 mb-8"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center"> |
|
|
<i class="fas fa-globe-americas text-green-500 mr-2"></i> Programación en la Vida Real |
|
|
</h2> |
|
|
<p class="text-gray-700 mb-6"> |
|
|
Aunque no lo notes, "programamos" cosas todo el tiempo. Aquí hay algunos ejemplos: |
|
|
</p> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="analogy-card bg-orange-50 rounded-lg overflow-hidden shadow"> |
|
|
<div class="bg-orange-400 p-4 text-white"> |
|
|
<i class="fas fa-utensils text-2xl"></i> |
|
|
<h3 class="font-semibold text-lg mt-2">Receta de Cocina</h3> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<p class="text-gray-700 mb-3"> |
|
|
Una receta es como un programa: tiene ingredientes (variables) y pasos (instrucciones) que deben seguirse en orden. |
|
|
</p> |
|
|
<button onclick="showExample('recipe')" class="text-orange-500 hover:text-orange-700 font-medium"> |
|
|
Ver ejemplo <i class="fas fa-arrow-right ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="analogy-card bg-blue-50 rounded-lg overflow-hidden shadow"> |
|
|
<div class="bg-blue-400 p-4 text-white"> |
|
|
<i class="fas fa-map-marked-alt text-2xl"></i> |
|
|
<h3 class="font-semibold text-lg mt-2">Instrucciones de GPS</h3> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<p class="text-gray-700 mb-3"> |
|
|
Un GPS da instrucciones paso a paso (algoritmo) basadas en condiciones (si hay tráfico, toma otra ruta). |
|
|
</p> |
|
|
<button onclick="showExample('gps')" class="text-blue-500 hover:text-blue-700 font-medium"> |
|
|
Ver ejemplo <i class="fas fa-arrow-right ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="analogy-card bg-purple-50 rounded-lg overflow-hidden shadow"> |
|
|
<div class="bg-purple-400 p-4 text-white"> |
|
|
<i class="fas fa-clock text-2xl"></i> |
|
|
<h3 class="font-semibold text-lg mt-2">Rutina Matutina</h3> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<p class="text-gray-700 mb-3"> |
|
|
Tu rutina matutina es un programa: secuencia de acciones que repites cada mañana, a veces con condiciones (si llueve, lleva paraguas). |
|
|
</p> |
|
|
<button onclick="showExample('routine')" class="text-purple-500 hover:text-purple-700 font-medium"> |
|
|
Ver ejemplo <i class="fas fa-arrow-right ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="exampleDisplay" class="mt-6 hidden"> |
|
|
<div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> |
|
|
<h3 id="exampleTitle" class="text-xl font-semibold mb-3"></h3> |
|
|
<div id="exampleContent"></div> |
|
|
<button onclick="hideExample()" class="mt-3 text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times mr-1"></i> Cerrar |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-white rounded-xl shadow-md p-6 mb-8"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center"> |
|
|
<i class="fas fa-laptop-code text-red-500 mr-2"></i> Ejemplo de Código Simple |
|
|
</h2> |
|
|
<p class="text-gray-700 mb-4"> |
|
|
Aquí hay un ejemplo sencillo de código JavaScript que calcula el área de un rectángulo: |
|
|
</p> |
|
|
|
|
|
<div class="code-block"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="text-sm text-gray-400">JavaScript</span> |
|
|
<button onclick="runCode()" class="bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded text-sm"> |
|
|
<i class="fas fa-play mr-1"></i> Ejecutar |
|
|
</button> |
|
|
</div> |
|
|
<pre id="codeExample">// Definir variables (ancho y alto) |
|
|
let width = 5; |
|
|
let height = 10; |
|
|
|
|
|
// Calcular área |
|
|
let area = width * height; |
|
|
|
|
|
// Mostrar resultado |
|
|
console.log("El área es: " + area);</pre> |
|
|
</div> |
|
|
|
|
|
<div id="codeOutput" class="hidden mt-4 p-3 bg-gray-800 text-green-300 rounded"> |
|
|
<p class="font-mono">Resultado:</p> |
|
|
<pre id="outputText"></pre> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 bg-yellow-50 p-4 rounded-lg border-l-4 border-yellow-400"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-info-circle text-yellow-500 text-xl mt-1"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h3 class="text-sm font-medium text-yellow-800">¿Cómo leer este código?</h3> |
|
|
<div class="mt-2 text-sm text-yellow-700"> |
|
|
<p>1. Primero definimos dos variables (como cajas con valores)</p> |
|
|
<p>2. Luego hacemos un cálculo con ellas</p> |
|
|
<p>3. Finalmente mostramos el resultado</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl shadow-md p-6 text-white mb-8"> |
|
|
<h2 class="text-2xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-rocket mr-2"></i> ¿Por qué aprender a programar? |
|
|
</h2> |
|
|
<ul class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-brain text-xl mr-3 mt-1"></i> |
|
|
<span>Desarrolla el pensamiento lógico y resolución de problemas</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-briefcase text-xl mr-3 mt-1"></i> |
|
|
<span>Habilidades valiosas para el mercado laboral</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-lightbulb text-xl mr-3 mt-1"></i> |
|
|
<span>Te permite crear herramientas que resuelvan problemas reales</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-globe text-xl mr-3 mt-1"></i> |
|
|
<span>Entender mejor el mundo digital que nos rodea</span> |
|
|
</li> |
|
|
</ul> |
|
|
|
|
|
<div class="mt-6 text-center pulse-animation"> |
|
|
<a href="#start" class="inline-block bg-white text-blue-600 font-bold py-3 px-6 rounded-full shadow-lg hover:bg-gray-100 transition duration-300"> |
|
|
<i class="fas fa-play mr-2"></i> ¡Empieza a aprender hoy! |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="start" class="bg-white rounded-xl shadow-md p-6"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center"> |
|
|
<i class="fas fa-flag-checkered text-green-500 mr-2"></i> ¿Cómo empezar? |
|
|
</h2> |
|
|
|
|
|
<div class="flex flex-col md:flex-row gap-6"> |
|
|
<div class="flex-1"> |
|
|
<h3 class="text-xl font-medium text-gray-700 mb-3">Lenguajes para principiantes</h3> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100"> |
|
|
<div class="bg-yellow-400 text-white p-2 rounded-full mr-3"> |
|
|
<i class="fab fa-js"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">JavaScript</h4> |
|
|
<p class="text-sm text-gray-600">Para desarrollo web e interactividad</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100"> |
|
|
<div class="bg-blue-500 text-white p-2 rounded-full mr-3"> |
|
|
<i class="fab fa-python"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Python</h4> |
|
|
<p class="text-sm text-gray-600">Sencillo y versátil para múltiples usos</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100"> |
|
|
<div class="bg-red-500 text-white p-2 rounded-full mr-3"> |
|
|
<i class="fas fa-code"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">HTML/CSS</h4> |
|
|
<p class="text-sm text-gray-600">Para crear páginas web</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex-1"> |
|
|
<h3 class="text-xl font-medium text-gray-700 mb-3">Recursos gratuitos</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-external-link-alt text-blue-500 mr-2"></i> |
|
|
<a href="https://www.freecodecamp.org/" target="_blank" class="text-blue-600 hover:underline">freeCodeCamp</a> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-external-link-alt text-blue-500 mr-2"></i> |
|
|
<a href="https://www.codecademy.com/" target="_blank" class="text-blue-600 hover:underline">Codecademy (parte gratuita)</a> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-external-link-alt text-blue-500 mr-2"></i> |
|
|
<a href="https://www.khanacademy.org/computing/computer-programming" target="_blank" class="text-blue-600 hover:underline">Khan Academy</a> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-external-link-alt text-blue-500 mr-2"></i> |
|
|
<a href="https://www.youtube.com/results?search_query=aprender+a+programar" target="_blank" class="text-blue-600 hover:underline">Tutoriales en YouTube</a> |
|
|
</li> |
|
|
</ul> |
|
|
|
|
|
<div class="mt-6 bg-indigo-50 p-4 rounded-lg"> |
|
|
<h4 class="font-medium text-indigo-800 mb-2"> |
|
|
<i class="fas fa-trophy text-indigo-500 mr-2"></i> Consejo para principiantes |
|
|
</h4> |
|
|
<p class="text-gray-700"> |
|
|
Empieza con proyectos pequeños y simples. ¡No intentes construir Facebook en tu primer día! |
|
|
Comienza con cosas como una calculadora o una lista de tareas. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="mt-12 text-center text-gray-600 py-6 border-t border-gray-200"> |
|
|
<p>© 2023 Introducción a la Programación. Todos los derechos reservados.</p> |
|
|
<p class="mt-2 text-sm">Creado con <i class="fas fa-heart text-red-500"></i> para futuros programadores</p> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function runCode() { |
|
|
const codeOutput = document.getElementById('codeOutput'); |
|
|
const outputText = document.getElementById('outputText'); |
|
|
|
|
|
|
|
|
const width = 5; |
|
|
const height = 10; |
|
|
const area = width * height; |
|
|
|
|
|
outputText.textContent = `El área es: ${area}`; |
|
|
codeOutput.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
codeOutput.scrollIntoView({ behavior: 'smooth' }); |
|
|
} |
|
|
|
|
|
|
|
|
function showExample(type) { |
|
|
const exampleDisplay = document.getElementById('exampleDisplay'); |
|
|
const exampleTitle = document.getElementById('exampleTitle'); |
|
|
const exampleContent = document.getElementById('exampleContent'); |
|
|
|
|
|
exampleDisplay.classList.remove('hidden'); |
|
|
|
|
|
switch(type) { |
|
|
case 'recipe': |
|
|
exampleTitle.textContent = 'Receta como Programa'; |
|
|
exampleContent.innerHTML = ` |
|
|
<div class="mb-4"> |
|
|
<h4 class="font-semibold text-orange-600 mb-2">Receta de Huevos Revueltos:</h4> |
|
|
<ol class="list-decimal list-inside space-y-1"> |
|
|
<li>Ingredientes (variables): 2 huevos, sal, mantequilla</li> |
|
|
<li>Calentar sartén (función)</li> |
|
|
<li>Agregar mantequilla (acción)</li> |
|
|
<li>Batir huevos (proceso)</li> |
|
|
<li>Si quieres queso, agregar ahora (condicional)</li> |
|
|
<li>Cocinar hasta que estén listos (condición de salida)</li> |
|
|
</ol> |
|
|
</div> |
|
|
<div class="code-block"> |
|
|
<pre>// Pseudocódigo equivalente |
|
|
ingredientes = [huevos, sal, mantequilla] |
|
|
sartén.calentar() |
|
|
sartén.agregar(mantequilla) |
|
|
huevos.batir() |
|
|
if (quieresQueso) { |
|
|
sartén.agregar(queso) |
|
|
} |
|
|
while (!huevos.cocidos) { |
|
|
seguirCocinando() |
|
|
}</pre> |
|
|
</div> |
|
|
`; |
|
|
break; |
|
|
|
|
|
case 'gps': |
|
|
exampleTitle.textContent = 'GPS como Algoritmo'; |
|
|
exampleContent.innerHTML = ` |
|
|
<div class="mb-4"> |
|
|
<h4 class="font-semibold text-blue-600 mb-2">Instrucciones de GPS:</h4> |
|
|
<p class="mb-2">Un GPS sigue un algoritmo similar a este pseudocódigo:</p> |
|
|
<div class="code-block"> |
|
|
<pre>function navegarA(destino) { |
|
|
ruta = calcularRuta(ubicaciónActual, destino) |
|
|
|
|
|
while (!llegado) { |
|
|
pasoActual = ruta.siguientePaso() |
|
|
mostrarInstrucción(pasoActual) |
|
|
|
|
|
if (hayTraficoEn(pasoActual)) { |
|
|
ruta = calcularRutaAlternativa() |
|
|
} |
|
|
|
|
|
if (usuarioSeDesvia()) { |
|
|
recalcularRuta() |
|
|
} |
|
|
} |
|
|
|
|
|
mostrar("¡Has llegado a tu destino!") |
|
|
}</pre> |
|
|
</div> |
|
|
</div> |
|
|
<p>Esto muestra cómo los programas toman decisiones basadas en condiciones, igual que un GPS.</p> |
|
|
`; |
|
|
break; |
|
|
|
|
|
case 'routine': |
|
|
exampleTitle.textContent = 'Rutina Matutina como Programa'; |
|
|
exampleContent.innerHTML = ` |
|
|
<div class="mb-4"> |
|
|
<h4 class="font-semibold text-purple-600 mb-2">Rutina Matutina:</h4> |
|
|
<div class="code-block"> |
|
|
<pre>// Programa de rutina matutina |
|
|
despertar() { |
|
|
if (alarmaSuena && !quieroDormirMás) { |
|
|
levantarse() |
|
|
} else if (alarmaSuena && quieroDormirMás) { |
|
|
posponerAlarma(10.minutos) |
|
|
} |
|
|
} |
|
|
|
|
|
rutinaMatutina() { |
|
|
despertar() |
|
|
bañar() |
|
|
vestir() |
|
|
|
|
|
if (esDíaLaboral) { |
|
|
prepararAlmuerzo() |
|
|
} |
|
|
|
|
|
while (!desayunoListo) { |
|
|
prepararDesayuno() |
|
|
} |
|
|
|
|
|
comer(desayuno) |
|
|
|
|
|
if (hora > "8:00") { |
|
|
apurarse() |
|
|
} |
|
|
|
|
|
salirDeCasa() |
|
|
}</pre> |
|
|
</div> |
|
|
</div> |
|
|
<p>Nuestras rutinas diarias siguen lógicas similares a los programas, con secuencias, condiciones y bucles.</p> |
|
|
`; |
|
|
break; |
|
|
} |
|
|
|
|
|
|
|
|
exampleDisplay.scrollIntoView({ behavior: 'smooth' }); |
|
|
} |
|
|
|
|
|
function hideExample() { |
|
|
document.getElementById('exampleDisplay').classList.add('hidden'); |
|
|
} |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Ateneo/curso-qu-es-la-programaci-n-i" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
