🌍 ¡Explora la Paradoja de Jevons! 🌟
Descubre cómo la eficiencia en el uso de recursos puede generar un efecto contrario al esperado. 📈
🎓 Una herramienta interactiva diseñada para educación y sostenibilidad.
💻 Creado por: Ing. Yulian Sepúlveda Casadiego,
@UniversidadUNAD.
🔗 [sigue el hilo apara obtener el código fuente]
#InnovaciónEducativa #Sostenibilidad #AprenderEsDivertido
//Código fuente Paradoja de Jevons
<?php
// Simulación de la Paradoja de Jevons
if (isset($_GET['efficiency'])) {
$efficiency = floatval($_GET['efficiency']);
$initial_demand = 100;
$consumption = $initial_demand * pow($efficiency, 0.5);
echo json_encode(array('efficiency' => $efficiency, 'consumption' => $consumption));
exit;
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paradoja de Jevons</title>
<script src="
cdn.jsdelivr.net/npm/chart.j…"></script>
<script src="
cdn.tailwindcss.com"></script>
<style>
body { font-family: 'Inter', sans-serif; }
.container { max-width: 900px; margin: auto; padding: 20px; }
.fade-in { animation: fadeIn 0.5s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
#jevonsChart { width: 100% !important; height: 320px !important; max-height: 400px; }
</style>
</head>
<body class="bg-gray-100 text-gray-800">
<div class="container bg-white rounded-lg shadow-lg p-8 fade-in">
<h1 class="text-2xl font-bold text-center mb-6">Visualización de la Paradoja de Jevons</h1>
<p class="text-center mb-6">Cuando la eficiencia del uso de un recurso aumenta, el consumo total del recurso también puede aumentar.</p>
<div class="slider-container flex items-center justify-center mb-6">
<label for="efficiency" class="mr-4 font-medium">Eficiencia:</label>
<input type="range" id="efficiency" min="1" max="5" step="0.1" value="1" class="w-2/3 cursor-pointer" oninput="updateChart()">
<span id="efficiency-value" class="ml-4 text-lg font-bold">1</span> veces más eficiente
</div>
<canvas id="jevonsChart" class="block mx-auto"></canvas>
<table class="table-auto w-full text-sm bg-gray-50 mt-6 rounded-lg shadow">
<thead class="bg-gray-200">
<tr>
<th class="px-4 py-2">Eficiencia</th>
<th class="px-4 py-2">Consumo Total</th>
<th class="px-4 py-2">Motivo</th>
</tr>
</thead>
<tbody id="actionTable" class="bg-white">
<!-- Datos dinámicos -->
</tbody>
</table>
<section class="mt-8">
<h3 class="text-lg font-semibold mb-4">Importancia de la Paradoja de Jevons</h3>
<p class="mb-4">
La paradoja de Jevons destaca cómo un aumento en la eficiencia de un recurso no siempre resulta en su menor consumo. En cambio, la reducción de costos asociada a esta eficiencia puede incentivar un mayor uso, lo que podría incrementar el consumo total.
</p>
</section>
<section class="mt-8 text-center">
<h3 class="text-lg font-semibold">Créditos</h3>
<p class="text-sm text-gray-600 mt-2">
Diseñado por el Ingeniero <strong>Yulian Sepúlveda Casadiego</strong>, Director del Centro de Innovación y Productividad CIP Dosquebradas, Universidad Nacional Abierta y a Distancia (UNAD).
</p>
</section>
</div>
<script>
let ctx = document.getElementById('jevonsChart').getContext('2d');
let jevonsChart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'Consumo Total',
data: [],
borderColor: '
#3b82f6',
fill: false
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
scales: { y: { beginAtZero: true } }
}
});
function updateChart() {
let efficiency = document.getElementById('efficiency').value;
document.getElementById('efficiency-value').innerText = efficiency;
fetch(`?efficiency=${efficiency}`)
.then(response => response.json())
.then(data => {
jevonsChart.data.labels.push(efficiency);
jevonsChart.data.datasets[0].data.push(data.consumption);
jevonsChart.update();
let table = document.getElementById('actionTable');
let row = table.insertRow();
row.classList.add('fade-in');
row.innerHTML = `
<td class='px-4 py-2'>${data.efficiency}</td>
<td class='px-4 py-2'>${data.consumption.toFixed(2)}</td>
<td class='px-4 py-2'>El aumento de la eficiencia reduce el costo, incentivando mayor uso.</td>
`;
})
.catch(error => console.error('Error:', error));
}
</script>
</body>
</html>