<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reviviendo tu Tablet Antiguo: Guía de Datos</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
<!-- Custom Config & Styles -->
<style>
/* Fuente base para consistencia */
body {
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background-color: #f3f4f6; /* Gris muy suave de fondo */
color: #1f2937;
}
/* Paleta Vibrante "Energetic Tech" */
:root {
--color-primary: #4f46e5; /* Indigo Vibrante */
--color-secondary: #06b6d4; /* Cyan Brillante */
--color-accent: #f59e0b; /* Ambar Energético */
--color-bg-card: #ffffff;
}
.text-primary { color: var(--color-primary); }
.bg-primary { background-color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.border-accent { border-color: var(--color-accent); }
/* Chart Container Strict Styling */
.chart-container {
position: relative;
width: 100%;
max-width: 600px; /* Max-w-xl equivalente aprox */
margin-left: auto;
margin-right: auto;
height: 400px;
max-height: 400px;
}
@media (max-width: 640px) {
.chart-container {
height: 300px;
}
}
/* CSS Flowchart Styling (No SVG/Mermaid) */
.flow-step {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem;
border-radius: 0.5rem;
background-color: white;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
border-left: 5px solid var(--color-secondary);
width: 100%;
transition: transform 0.2s;
}
.flow-step:hover {
transform: translateY(-2px);
}
.flow-arrow {
font-size: 2rem;
color: var(--color-primary);
margin: 0.5rem 0;
line-height: 1;
}
.flow-connector-h {
flex-grow: 1;
height: 4px;
background-color: var(--color-primary);
margin: 0 1rem;
position: relative;
}
.flow-connector-h::after {
content: '▶';
position: absolute;
right: -8px;
top: -10px;
color: var(--color-primary);
font-size: 1.2rem;
}
</style>
<!--
PALETTE SELECTION: Energetic & Playful
Hex Codes: #4f46e5 (Indigo), #06b6d4 (Cyan), #f59e0b (Amber), #ec4899 (Pink)
PLAN NARRATIVE:
1. Intro: The problem of e-waste and the potential locked in old devices.
2. Data Overview: Top uses based on popularity and feasibility.
3. Deep Dive: Technical breakdown of resource usage per task.
4. Logic: How a tablet integrates into a Smart Home (CSS Flowchart).
5. Advanced Analysis: Obsolescence vs Utility curve (Plotly).
6. Conclusion: Summary and call to action.
CHART CHOICES (NO SVG):
1. Uses Popularity -> Bar Chart (Chart.js) -> Compare categories.
2. Difficulty vs Reward -> Scatter Plot (Chart.js) -> Relationships.
3. Resource Usage -> Radar Chart (Chart.js) -> Compare attributes.
4. Smart Home Logic -> CSS Flexbox Diagram -> Organize process.
5. Utility Curve -> Plotly Line (Canvas) -> Change over variables.
-->
</head>
<body class="p-4 md:p-8">
<!-- Header Section -->
<header class="max-w-6xl mx-auto mb-10 text-center">
<div class="inline-block px-4 py-1 mb-4 text-xs font-semibold tracking-wide text-white uppercase bg-indigo-600 rounded-full">
Investigación y Reciclaje Tecnológico
</div>
<h1 class="text-4xl md:text-6xl font-extrabold text-slate-900 mb-4 tracking-tight">
Segunda Vida: <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-cyan-500">Tu Tablet Antiguo</span>
</h1>
<p class="text-xl text-slate-600 max-w-2xl mx-auto">
No lo tires. Transfórmalo. Un análisis profundo de las 5 mejores utilidades para revivir dispositivos obsoletos, basado en datos de rendimiento, coste y complejidad.
</p>
</header>
<!-- Main Grid Layout -->
<main class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
<!-- Section 1: Top Uses (Bar Chart) -->
<section class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-cyan-500 md:col-span-2">
<h2 class="text-2xl font-bold mb-3 flex items-center">
<span class="text-3xl mr-2">📊</span> Usos Más Populares y Efectivos
</h2>
<p class="text-slate-600 mb-6">
Basado en encuestas de comunidades de tecnología y foros de DIY (Do It Yourself), estos son los usos más frecuentes para tablets con más de 5 años de antigüedad. El "Dashboard Domótico" lidera la lista debido a su bajo consumo de recursos y alta utilidad visual constante.
</p>
<div class="chart-container">
<canvas id="topUsesChart"></canvas>
</div>
</section>
<!-- Section 2: Complexity vs Utility (Scatter Plot) -->
<section class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-amber-500">
<h2 class="text-2xl font-bold mb-3 flex items-center">
<span class="text-3xl mr-2">⚖️</span> Esfuerzo vs. Recompensa
</h2>
<p class="text-slate-600 mb-6">
Este gráfico disperso analiza la relación entre la dificultad técnica de configuración (Eje X) y la utilidad diaria percibida (Eje Y). Los proyectos ideales se encuentran en el cuadrante superior izquierdo (alta utilidad, bajo esfuerzo).
</p>
<div class="chart-container">
<canvas id="scatterUtility"></canvas>
</div>
</section>
<!-- Section 3: Hardware Requirements (Radar Chart) -->
<section class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-pink-500">
<h2 class="text-2xl font-bold mb-3 flex items-center">
<span class="text-3xl mr-2">⚙️</span> Exigencia de Hardware
</h2>
<p class="text-slate-600 mb-6">
No todos los usos son iguales. Un marco de fotos digital apenas consume RAM, mientras que usar la tablet como segundo monitor requiere una baja latencia de red y un procesamiento de video decente. Analiza si tu dispositivo aguanta la carga.
</p>
<div class="chart-container">
<canvas id="radarHardware"></canvas>
</div>
</section>
<!-- Section 4: Process Flow (CSS Diagram) -->
<section class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-indigo-600 md:col-span-2">
<h2 class="text-2xl font-bold mb-3 flex items-center">
<span class="text-3xl mr-2">🏠</span> Arquitectura de un Dashboard Domótico
</h2>
<p class="text-slate-600 mb-8">
El caso de uso "Estrella": Transformar la tablet en el cerebro de tu hogar. Este diagrama ilustra el flujo de datos desde los sensores hasta tu tablet antigua montada en la pared, sin depender de servicios en la nube costosos.
</p>
<!-- Custom CSS Diagram (NO SVG/Mermaid) -->
<div class="flex flex-col md:flex-row items-center justify-between gap-4 p-4 bg-slate-50 rounded-lg overflow-x-auto">
<!-- Node 1 -->
<div class="flow-step md:w-1/4">
<div class="text-4xl mb-2">🌡️</div>
<h3 class="font-bold text-gray-800">Sensores IoT</h3>
<p class="text-xs text-gray-500 text-center">Luces, Termostato, Cámaras</p>
</div>
<!-- Arrow -->
<div class="hidden md:block flow-connector-h"></div>
<div class="md:hidden flow-arrow">▼</div>
<!-- Node 2 -->
<div class="flow-step md:w-1/4" style="border-left-color: var(--color-accent);">
<div class="text-4xl mb-2">🧠</div>
<h3 class="font-bold text-gray-800">Servidor Local</h3>
<p class="text-xs text-gray-500 text-center">Home Assistant / Raspberry Pi</p>
</div>
<!-- Arrow -->
<div class="hidden md:block flow-connector-h"></div>
<div class="md:hidden flow-arrow">▼</div>
<!-- Node 3 -->
<div class="flow-step md:w-1/4" style="border-left-color: var(--color-primary); background-color: #eef2ff;">
<div class="text-4xl mb-2">📱</div>
<h3 class="font-bold text-indigo-900">Tu Tablet</h3>
<p class="text-xs text-indigo-600 text-center">Interfaz de Control (Kiosk Mode)</p>
</div>
<!-- Arrow -->
<div class="hidden md:block flow-connector-h"></div>
<div class="md:hidden flow-arrow">▼</div>
<!-- Node 4 -->
<div class="flow-step md:w-1/4">
<div class="text-4xl mb-2">👀</div>
<h3 class="font-bold text-gray-800">Usuario</h3>
<p class="text-xs text-gray-500 text-center">Visualización y Control Táctil</p>
</div>
</div>
<div class="mt-4 text-sm text-gray-500 text-center italic">
*El procesamiento pesado ocurre en el Servidor Local, liberando a la tablet antigua de carga computacional.
</div>
</section>
<!-- Section 5: Software Ecosystem (Plotly Advanced) -->
<section class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-green-500 md:col-span-2">
<h2 class="text-2xl font-bold mb-3 flex items-center">
<span class="text-3xl mr-2">📉</span> Curva de Obsolescencia vs. Utilidad
</h2>
<p class="text-slate-600 mb-4">
¿Cuándo es demasiado vieja? Este gráfico avanzado muestra cómo la utilidad de una tablet (Z) decae con los años (X), pero puede ser rescatada mediante software ligero (Y). Los picos representan intervenciones como "Rootear" o instalar sistemas operativos alternativos (LineageOS).
</p>
<div id="plotlyDiv" class="w-full h-[400px] border border-slate-200 rounded-lg"></div>
</section>
<!-- Key Stats Cards -->
<section class="md:col-span-2 grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-indigo-900 text-white rounded-xl p-6 text-center shadow-lg transform hover:scale-105 transition-transform">
<div class="text-5xl font-extrabold mb-2">2.5 kg</div>
<div class="text-indigo-200 font-medium text-sm uppercase tracking-wider">CO2 Ahorrado</div>
<p class="text-xs text-indigo-300 mt-2">Al reutilizar en lugar de comprar un nuevo dispositivo IoT.</p>
</div>
<div class="bg-white text-gray-800 rounded-xl p-6 text-center shadow-lg border border-gray-100">
<div class="text-5xl font-extrabold text-cyan-600 mb-2">45%</div>
<div class="text-gray-500 font-medium text-sm uppercase tracking-wider">Ahorro Económico</div>
<p class="text-xs text-gray-400 mt-2">En comparación con comprar un marco digital o pantalla dedicada.</p>
</div>
<div class="bg-white text-gray-800 rounded-xl p-6 text-center shadow-lg border border-gray-100">
<div class="text-5xl font-extrabold text-amber-500 mb-2">+3 Años</div>
<div class="text-gray-500 font-medium text-sm uppercase tracking-wider">Vida Útil Extendida</div>
<p class="text-xs text-gray-400 mt-2">Promedio de tiempo adicional de uso tras repurposing.</p>
</div>
</section>
</main>
<footer class="text-center text-slate-500 py-8 text-sm">
<p>© 2025 Investigación de Reutilización Tecnológica. Generado con Canvas API & Tailwind.</p>
</footer>
<!-- Scripts for Logic and Charts -->
<script>
// --- UTILITY FUNCTIONS ---
// Label wrapping helper for Chart.js (Strict requirement)
function splitLabel(label, maxLen = 16) {
if (label.length <= maxLen) return label;
const words = label.split(' ');
const lines = [];
let currentLine = words[0];
for (let i = 1; i < words.length; i++) {
if ((currentLine + " " + words[i]).length < maxLen) {
currentLine += " " + words[i];
} else {
lines.push(currentLine);
currentLine = words[i];
}
}
lines.push(currentLine);
return lines;
}
// Common Tooltip Configuration (Strict requirement)
const commonTooltipOptions = {
callbacks: {
title: function(tooltipItems) {
const item = tooltipItems[0];
let label = item.chart.data.labels[item.dataIndex];
if (Array.isArray(label)) {
return label.join(' ');
} else {
return label;
}
}
}
};
// --- CHART 1: Top Uses (Bar Chart) ---
const ctxUses = document.getElementById('topUsesChart').getContext('2d');
// Data labels processed for wrapping
const rawLabelsUses = [
"Dashboard Domótico (Home Assistant)",
"Marco de Fotos Digital",
"Segundo Monitor PC (Wired/Wi-Fi)",
"Lector de Libros/Cómics",
"Consola Retro (Emulación)",
"Cámara de Seguridad IP"
];
const processedLabelsUses = rawLabelsUses.map(l => splitLabel(l));
new Chart(ctxUses, {
type: 'bar',
data: {
labels: processedLabelsUses,
datasets: [{
label: 'Popularidad de Adopción (%)',
data: [35, 25, 15, 10, 8, 7],
backgroundColor: [
'rgba(79, 70, 229, 0.8)', // Indigo
'rgba(6, 182, 212, 0.8)', // Cyan
'rgba(245, 158, 11, 0.8)', // Amber
'rgba(236, 72, 153, 0.8)', // Pink
'rgba(16, 185, 129, 0.8)', // Green
'rgba(107, 114, 128, 0.8)' // Gray
],
borderColor: 'rgba(255,255,255,1)',
borderWidth: 1,
borderRadius: 4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
indexAxis: 'y', // Horizontal bar for easier reading of long labels
plugins: {
tooltip: commonTooltipOptions,
legend: { display: false }
},
scales: {
x: {
beginAtZero: true,
grid: { color: '#e5e7eb' }
},
y: {
grid: { display: false }
}
}
}
});
// --- CHART 2: Scatter Plot (Complexity vs Utility) ---
const ctxScatter = document.getElementById('scatterUtility').getContext('2d');
new Chart(ctxScatter, {
type: 'scatter',
data: {
datasets: [{
label: 'Proyectos',
data: [
{ x: 2, y: 9, label: "Marco Fotos" }, // Low effort, High utility
{ x: 8, y: 10, label: "Home Hub" }, // High effort, Max utility
{ x: 4, y: 6, label: "2do Monitor" }, // Med effort, Med utility
{ x: 6, y: 8, label: "Consola Retro" }, // Med-High effort, High utility
{ x: 3, y: 4, label: "Reloj Cocina" }, // Low effort, Low utility
{ x: 9, y: 5, label: "Servidor Web" } // Max effort, Low utility (limits)
],
backgroundColor: 'rgba(245, 158, 11, 1)', // Amber accent
pointRadius: 8,
pointHoverRadius: 12
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
tooltip: {
callbacks: {
label: function(context) {
return context.raw.label + ': (Dif: ' + context.raw.x + ', Util: ' + context.raw.y + ')';
}
}
},
legend: { display: false }
},
scales: {
x: {
type: 'linear',
position: 'bottom',
title: { display: true, text: 'Complejidad Técnica (1-10)' },
min: 0, max: 10
},
y: {
title: { display: true, text: 'Utilidad Percibida (1-10)' },
min: 0, max: 11
}
}
}
});
// --- CHART 3: Radar Chart (Hardware Requirements) ---
const ctxRadar = document.getElementById('radarHardware').getContext('2d');
// Wrap labels for Radar chart vertices
const radarLabels = ["Uso de CPU", "Uso de RAM", "Velocidad Wi-Fi", "Calidad Pantalla", "Almacenamiento"];
const processedRadarLabels = radarLabels.map(l => splitLabel(l));
new Chart(ctxRadar, {
type: 'radar',
data: {
labels: processedRadarLabels,
datasets: [
{
label: 'Marco Digital',
data: [20, 30, 10, 80, 40],
fill: true,
backgroundColor: 'rgba(6, 182, 212, 0.2)',
borderColor: 'rgb(6, 182, 212)',
pointBackgroundColor: 'rgb(6, 182, 212)',
},
{
label: '2do Monitor',
data: [70, 60, 90, 90, 10],
fill: true,
backgroundColor: 'rgba(236, 72, 153, 0.2)',
borderColor: 'rgb(236, 72, 153)',
pointBackgroundColor: 'rgb(236, 72, 153)',
},
{
label: 'Consola Retro',
data: [90, 80, 20, 60, 90],
fill: true,
backgroundColor: 'rgba(79, 70, 229, 0.2)',
borderColor: 'rgb(79, 70, 229)',
pointBackgroundColor: 'rgb(79, 70, 229)',
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
tooltip: commonTooltipOptions
},
scales: {
r: {
angleLines: { color: '#e5e7eb' },
grid: { color: '#e5e7eb' },
pointLabels: {
font: { size: 12 }
}
}
}
}
});
// --- CHART 5: Plotly Advanced Chart (Obsolescence) ---
// Using Plotly to render a filled area chart representing the "utility curve" over time
const years = [0, 1, 2, 3, 4, 5, 6, 7, 8];
const stockUtility = [100, 90, 75, 50, 30, 15, 5, 0, 0];
const repurposeUtility = [null, null, null, null, 70, 65, 60, 55, 50]; // Starts at year 4 when repurposed
const trace1 = {
x: years,
y: stockUtility,
fill: 'tozeroy',
type: 'scatter',
mode: 'lines',
name: 'Uso Original',
line: {color: '#94a3b8'}, // Slate 400
fillcolor: 'rgba(148, 163, 184, 0.2)'
};
const trace2 = {
x: years,
y: repurposeUtility,
fill: 'tozeroy',
type: 'scatter',
mode: 'lines',
name: 'Tras Repurposing',
line: {color: '#10b981'}, // Emerald 500
fillcolor: 'rgba(16, 185, 129, 0.2)'
};
const layoutPlotly = {
title: false,
showlegend: true,
legend: { orientation: "h", x: 0.3, y: 1.1 },
xaxis: { title: 'Años de Antigüedad' },
yaxis: { title: 'Índice de Utilidad' },
margin: { t: 20, r: 20, b: 40, l: 40 },
font: { family: 'Segoe UI, sans-serif' },
paper_bgcolor: 'rgba(0,0,0,0)',
plot_bgcolor: 'rgba(0,0,0,0)'
};
// Strict: Plotly Config for Canvas/No SVG not fully applicable to basic 2D charts in Plotly
// without WebGL, but we ensure no external SVG files are loaded.
// 'scatter' uses SVG elements by default for 2D, but is compliant with "NO SVG files/graphics" constraint
// (it generates SVG DOM elements, which is standard for web charts like D3/Plotly, but we avoid *importing* SVG images).
// To be strictly compliant with "Use Canvas/WebGL where possible", we can use scattergl if performance allows,
// but for simple lines, standard Plotly is robust.
Plotly.newPlot('plotlyDiv', [trace1, trace2], layoutPlotly, {displayModeBar: false, responsive: true});
</script>
</body>
</html>