Món musical
Espai per informar de novetats i curiositats musicals.
<!DOCTYPE html>
<html lang="es" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teoría Musical: El Infográfico del Pentagrama</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');
body { font-family: 'Inter', sans-serif; background-color: #f8fafc; }
.chart-container { position: relative; width: 100%; max-width: 650px; margin-left: auto; margin-right: auto; height: 350px; max-height: 400px; }
@media (min-width: 768px) { .chart-container { height: 400px; } }
.vibrant-gradient { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); }
.card-hover:hover { transform: translateY(-4px); transition: all 0.3s ease; }
.note-circle { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; font-weight: bold; color: white; }
</style>
</head>
<body class="text-slate-800">
<!--
NARRATIVE PLAN:
1. Introduction: Overview of the Pentagram as the foundation of musical notation.
2. Core Stats Section: High-impact numbers showing the 5 lines/4 spaces structure.
3. The Treble Clef Deep-Dive: Visualizing the 'Mi-Sol-Si-Re-Fa' hierarchy and space distribution.
4. The Bass Clef Deep-Dive: Comparing the shift in pitch and frequency relative to the treble clef.
5. The Bridge: Visualizing 'Middle C' as the connector between both systems.
6. Process: A CSS-based flowchart explaining how to read a note from scratch.
7. Conclusion: Synthesis of mnemonics for long-term memory.
VISUALIZATION SELECTION:
- Key Metrics -> Inform -> Big Number Cards (HTML/CSS).
- Line Note Progression -> Change/Rank -> Bar Chart (Chart.js/Canvas).
- Space Composition -> Composition -> Donut Chart (Chart.js/Canvas).
- Pitch Distribution -> Relationships -> Scatter Plot (Plotly/WebGL).
- Middle C Comparison -> Comparison -> Line Chart (Chart.js/Canvas).
- Clef Relationship -> Organize -> Responsive CSS Flexbox (No SVG/Mermaid).
VIBRANT PALETTE CHOSEN: "Electric & Energetic" (Indigos, Violets, and Amber accents).
NO SVG OR MERMAID JS USED.
-->
<nav class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200">
<div class="max-container mx-auto px-6 py-4 flex justify-between items-center">
<span class="text-xl font-extrabold text-indigo-600 tracking-tight">MUSICA<span class="text-slate-400">LAB</span></span>
<div class="hidden md:flex space-x-8 font-medium text-slate-600">
<a href="#inicio" class="hover:text-indigo-600 transition">Inicio</a>
<a href="#claves" class="hover:text-indigo-600 transition">Claves</a>
<a href="#analisis" class="hover:text-indigo-600 transition">Análisis</a>
<a href="#proceso" class="hover:text-indigo-600 transition">Lectura</a>
</div>
</div>
</nav>
<header id="inicio" class="vibrant-gradient text-white py-20 px-6">
<div class="max-w-5xl mx-auto text-center">
<h1 class="text-4xl md:text-6xl font-extrabold mb-6">Arquitectura del Pentagrama</h1>
<p class="text-lg md:text-xl text-indigo-100 max-w-3xl mx-auto leading-relaxed">
Descubre la lógica matemática y espacial detrás de la escritura musical. El pentagrama no es solo un conjunto de líneas, es un sistema de coordenadas para el sonido.
</p>
</div>
</header>
<main class="max-w-7xl mx-auto px-6 -mt-10">
<section class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
<div class="bg-white p-8 rounded-2xl shadow-xl border border-slate-100 text-center card-hover">
<div class="text-5xl font-black text-indigo-600 mb-2">5</div>
<p class="text-slate-500 font-semibold uppercase tracking-wider text-sm">Líneas Horizontales</p>
<p class="mt-4 text-slate-600 text-sm">La base estructural donde se asientan las frecuencias principales de cada clave.</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow-xl border border-slate-100 text-center card-hover">
<div class="text-5xl font-black text-violet-600 mb-2">4</div>
<p class="text-slate-500 font-semibold uppercase tracking-wider text-sm">Espacios Intermedios</p>
<p class="mt-4 text-slate-600 text-sm">Zonas de transición que completan la escala diatónica dentro del sistema.</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow-xl border border-slate-100 text-center card-hover">
<div class="text-5xl font-black text-amber-500 mb-2">2</div>
<p class="text-slate-500 font-semibold uppercase tracking-wider text-sm">Claves Principales</p>
<p class="mt-4 text-slate-600 text-sm">Los puntos de referencia (Sol y Fa) que definen el significado de cada posición.</p>
</div>
</section>
<section id="claves" class="mb-20">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-slate-900">La Clave de Sol: El Espectro Agudo</h2>
<p class="text-slate-600 mt-4 max-w-2xl mx-auto">La clave de Sol nace en la segunda línea, estableciendo un ancla para instrumentos como el violín o la flauta.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center bg-white p-8 rounded-3xl shadow-sm border border-slate-100">
<div>
<h3 class="text-xl font-bold mb-6 flex items-center">
<span class="w-2 h-8 bg-indigo-600 rounded-full mr-3"></span>
Jerarquía de Notas en Líneas
</h3>
<div class="chart-container">
<canvas id="chartSolLines"></canvas>
</div>
</div>
<div class="space-y-6">
<div class="p-4 bg-indigo-50 rounded-xl">
<h4 class="font-bold text-indigo-900 mb-2">Mnemotecnia: Mi-Sol-Si-Re-Fa</h4>
<p class="text-indigo-700 text-sm leading-relaxed">Las líneas en clave de Sol siguen una progresión ascendente de terceras. Visualizar esta jerarquía permite identificar saltos melódicos rápidamente.</p>
</div>
<div class="grid grid-cols-5 gap-2">
<div class="flex flex-col items-center"><div class="note-circle bg-indigo-400">Mi</div><span class="text-xs mt-2 text-slate-400">L1</span></div>
<div class="flex flex-col items-center"><div class="note-circle bg-indigo-500">Sol</div><span class="text-xs mt-2 text-indigo-600 font-bold">L2</span></div>
<div class="flex flex-col items-center"><div class="note-circle bg-indigo-600">Si</div><span class="text-xs mt-2 text-slate-400">L3</span></div>
<div class="flex flex-col items-center"><div class="note-circle bg-indigo-700">Re</div><span class="text-xs mt-2 text-slate-400">L4</span></div>
<div class="flex flex-col items-center"><div class="note-circle bg-indigo-800">Fa</div><span class="text-xs mt-2 text-slate-400">L5</span></div>
</div>
</div>
</div>
</section>
<section id="analisis" class="mb-20">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="bg-slate-900 p-8 rounded-3xl text-white shadow-2xl">
<h3 class="text-2xl font-bold mb-8">Distribución Espacial (Clave de Fa)</h3>
<p class="text-slate-400 mb-8">En la clave de Fa, los espacios representan el espectro grave. La composición 'La-Do-Mi-Sol' es fundamental para la mano izquierda en el piano.</p>
<div class="chart-container">
<canvas id="chartFaSpaces"></canvas>
</div>
</div>
<div class="bg-white p-8 rounded-3xl shadow-sm border border-slate-100">
<h3 class="text-2xl font-bold mb-8 text-slate-900">Correlación de Alturas Musicales</h3>
<p class="text-slate-600 mb-8">Este gráfico de dispersión muestra cómo se distribuyen las notas en el eje de frecuencias (ficticio para visualización) entre ambas claves.</p>
<div id="plotFrequencies" class="w-full h-80"></div>
</div>
</div>
</section>
<section id="proceso" class="mb-20">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-slate-900">¿Cómo leer una nota?</h2>
<p class="text-slate-600 mt-4">Sigue este flujo lógico para identificar cualquier posición en el pentagrama.</p>
</div>
<div class="flex flex-col md:flex-row justify-center items-center gap-4">
<div class="flex-1 w-full max-w-sm bg-white p-6 rounded-2xl border-2 border-indigo-100 shadow-lg text-center relative">
<div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-indigo-600 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold">1</div>
<h4 class="font-bold text-slate-800 mt-2">Identifica la Clave</h4>
<p class="text-sm text-slate-500 mt-2">¿Es Sol (aguda) o Fa (grave)? Esto define tu punto de referencia.</p>
</div>
<div class="hidden md:block text-indigo-300">
<span class="text-4xl">→</span>
</div>
<div class="flex-1 w-full max-w-sm bg-white p-6 rounded-2xl border-2 border-indigo-100 shadow-lg text-center relative">
<div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-violet-600 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold">2</div>
<h4 class="font-bold text-slate-800 mt-2">Cuenta desde el Ancla</h4>
<p class="text-sm text-slate-500 mt-2">Si es Sol, cuenta desde la 2ª línea. Si es Fa, desde la 4ª.</p>
</div>
<div class="hidden md:block text-indigo-300">
<span class="text-4xl">→</span>
</div>
<div class="flex-1 w-full max-w-sm bg-white p-6 rounded-2xl border-2 border-indigo-100 shadow-lg text-center relative">
<div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-amber-500 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold">3</div>
<h4 class="font-bold text-slate-800 mt-2">Línea o Espacio</h4>
<p class="text-sm text-slate-500 mt-2">Determina si la cabeza de la nota está atravesada o entre líneas.</p>
</div>
</div>
</section>
<section class="mb-20 bg-indigo-900 rounded-[3rem] p-12 text-center text-white overflow-hidden relative">
<div class="absolute top-0 right-0 w-64 h-64 bg-white opacity-5 rounded-full -mr-20 -mt-20"></div>
<div class="absolute bottom-0 left-0 w-48 h-48 bg-white opacity-5 rounded-full -ml-20 -mb-20"></div>
<h2 class="text-3xl font-bold mb-6">El Nodo de Unión: El Do Central</h2>
<p class="text-indigo-200 mb-10 max-w-2xl mx-auto">Existe una nota que actúa como puente invisible entre ambas claves. Se sitúa en una línea adicional y une el mundo grave con el agudo.</p>
<div class="chart-container bg-white/10 backdrop-blur-sm rounded-2xl p-4">
<canvas id="chartMiddleC"></canvas>
</div>
</section>
</main>
<footer class="bg-slate-100 py-12 px-6 border-t border-slate-200">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
<div class="text-slate-500 text-sm">
© 2024 MusicaLab. Educación visual para músicos.
</div>
<div class="flex space-x-6 text-indigo-600 font-bold">
<span class="cursor-pointer hover:underline">Teoría</span>
<span class="cursor-pointer hover:underline">Práctica</span>
<span class="cursor-pointer hover:underline">Recursos</span>
</div>
</div>
</footer>
<script>
const tooltipOptions = {
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;
}
}
}
};
const ctxSol = document.getElementById('chartSolLines').getContext('2d');
new Chart(ctxSol, {
type: 'bar',
data: {
labels: ['Mi (1ª Línea)', 'Sol (2ª Línea)', 'Si (3ª Línea)', 'Re (4ª Línea)', 'Fa (5ª Línea)'],
datasets: [{
label: 'Posición Relativa',
data: [1, 2, 3, 4, 5],
backgroundColor: ['#818cf8', '#6366f1', '#4f46e5', '#4338ca', '#3730a3'],
borderRadius: 8
}]
},
options: {
maintainAspectRatio: false,
responsive: true,
plugins: {
legend: { display: false },
tooltip: tooltipOptions
},
scales: {
y: { display: false },
x: { grid: { display: false } }
}
}
});
const ctxFa = document.getElementById('chartFaSpaces').getContext('2d');
new Chart(ctxFa, {
type: 'doughnut',
data: {
labels: ['La (1º Espacio)', 'Do (2º Espacio)', 'Mi (3º Espacio)', 'Sol (4º Espacio)'],
datasets: [{
data: [25, 25, 25, 25],
backgroundColor: ['#a78bfa', '#8b5cf6', '#7c3aed', '#6d28d9'],
borderWidth: 0,
hoverOffset: 20
}]
},
options: {
maintainAspectRatio: false,
responsive: true,
cutout: '70%',
plugins: {
legend: { position: 'bottom', labels: { color: '#94a3b8', font: { size: 12 } } },
tooltip: tooltipOptions
}
}
});
const ctxBridge = document.getElementById('chartMiddleC').getContext('2d');
new Chart(ctxBridge, {
type: 'line',
data: {
labels: ['Clave de Fa', 'Do Central', 'Clave de Sol'],
datasets: [{
label: 'Conexión Melódica',
data: [5, 10, 15],
borderColor: '#fbbf24',
backgroundColor: 'rgba(251, 191, 36, 0.2)',
fill: true,
tension: 0.4,
pointRadius: 10,
pointBackgroundColor: '#fbbf24'
}]
},
options: {
maintainAspectRatio: false,
responsive: true,
plugins: {
legend: { display: false },
tooltip: tooltipOptions
},
scales: {
y: { display: false },
x: { grid: { color: 'rgba(255,255,255,0.1)' }, ticks: { color: '#fff' } }
}
}
});
const trace1 = {
x: [1, 2, 3, 4, 5, 6, 7, 8, 9],
y: [10, 15, 22, 28, 35, 45, 55, 68, 80],
mode: 'markers+text',
name: 'Notas',
text: ['Sol (Fa)', 'Si (Fa)', 'Re (Fa)', 'Fa (Fa)', 'Do (C)', 'Mi (Sol)', 'Sol (Sol)', 'Si (Sol)', 'Re (Sol)'],
textposition: 'top center',
type: 'scatter',
marker: { size: 12, color: '#6366f1' }
};
const layout = {
paper_bgcolor: 'rgba(0,0,0,0)',
plot_bgcolor: 'rgba(0,0,0,0)',
margin: { t: 20, b: 40, l: 40, r: 20 },
showlegend: false,
xaxis: { showgrid: false, zeroline: false, showticklabels: false },
yaxis: { title: 'Frecuencia Relativa', showgrid: true, gridcolor: '#f1f5f9' }
};
Plotly.newPlot('plotFrequencies', [trace1], layout, { staticPlot: true, responsive: true });
</script>
</body>
</html>
Anterior 