Entrada 07: Base de Datos SQL y Panel Web Dinámico con Claude Artifacts (IA en 2º de Bachillerato)

En esta séptima entrega del proyecto BermejaHab, pasamos el testigo al alumnado de 2º de Bachillerato (asignatura Programación y Computación). Su objetivo es conectar los datos generados por el algoritmo en Python de 1º de Bachillerato con dos soluciones web interactivas: estructurar una Base de Datos SQL funcional y desplegar un Panel Web Dinámico (Dashboard) utilizando Claude (versión gratuita) y su herramienta de Artifacts.

Esta metodología permite trabajar la programación web y la gestión de bases de datos mediante Inteligencia Artificial Generativa asistida, donde los estudiantes no solo generan el código, sino que interactúan con él, ejecutan consultas reales en el navegador y lo adaptan a la misión lunar.

🗄️ Paso 1: Diseñando el Esquema SQL (SdA 3 – Gestión de Datos)

Antes de generar las aplicaciones con IA, el alumnado define en la pizarra la estructura de la base de datos relacional para almacenar las variables del terreno lunar y las notas obtenidas en el análisis multicriterio:

• id (VARCHAR, PRIMARY KEY): Código único del emplazamiento (EMP-01, EMP-02…).
• nombre (VARCHAR): Nombre del cráter o estructura geográfica.
• coordenadas (VARCHAR): Latitud y longitud de NASA QuickMap.
• iluminacion (DECIMAL): Porcentaje de luz solar anual.
• distancia_hielo (DECIMAL): Distancia en kilómetros a la Zona de Sombra Permanente (PSR).
• pendiente (INT): Inclinación media en grados.
• elevacion (INT): Altitud en metros sobre el nivel base.
• puntuacion_final (DECIMAL): Puntuación $0-100$ asignada por el agente en Python.

💻 Paso 2: Tutorial — Consola SQL Interactiva en Claude Artifacts

Para que los estudiantes practiquen consultas SQL reales sin necesidad de instalar servidores complejos en los ordenadores del centro (como MySQL o PHPMyAdmin), utilizamos Claude para que construya una Consola SQL Virtual (Playground) dentro del propio navegador.

📝 Instrucción (Prompt) para el Alumnado

1. Entra en claude.ai e inicia sesión con una cuenta gratuita.
2. Copia y pega la siguiente instrucción en el chat de Claude:

Plaintext

Actúa como un profesor de Informática de 2º de Bachillerato. 

Crea un Artifact interactivo tipo "SQL Playground" usando HTML, CSS y JavaScript (con un motor SQL simulado o AlaSQL en cliente) centrado en el proyecto lunar BermejaHab.

Requisitos del Artifact:
1. Esquema: Muestra la estructura de la tabla "emplazamientos" con sus campos y tipos de datos.
2. Base de Datos precargada con estos 5 registros SQL:
   - ('EMP-01', 'Cráter Shackleton (Cresta)', '-89.82, 246.78', 84.00, 2.50, 12, 1250, 83.08)
   - ('EMP-03', 'Cráter de Gerlache', '-88.50, 271.00', 78.00, 4.00, 10, 800, 68.21)
   - ('EMP-02', 'Macizo de Malapert', '-85.90, 0.00', 88.00, 15.00, 8, 5000, 56.36)
   - ('EMP-04', 'Cráter Nobile', '-85.20, 35.80', 65.00, 1.80, 15, 450, 51.43)
   - ('EMP-05', 'Cráter Amundsen', '-84.40, 82.80', 55.00, 1.20, 20, 300, 41.67)

3. Interfaz:
   - Una caja de texto (textarea) para escribir consultas SQL reales (SELECT, INSERT, UPDATE, WHERE, ORDER BY).
   - Un botón "Ejecutar Consulta SQL" que filtre y muestre el resultado dinámico en una tabla de resultados.
   - 3 Botones de "Práctica Rápida" para los alumnos:
     a) "Ver Ranking Completo" (SELECT * FROM emplazamientos ORDER BY puntuacion_final DESC)
     b) "Sitios con Sol > 80%" (SELECT nombre, iluminacion FROM emplazamientos WHERE iluminacion > 80)
     c) "Sitios cerca del Agua (< 3km)" (SELECT nombre, distancia_hielo FROM emplazamientos WHERE distancia_hielo < 3.0)

⚡ Práctica en el Aula

Al enviar la orden, Claude desplegará una consola funcional en el panel lateral (Artifact). El alumnado podrá escribir sentencias SQL como:

SQL

SELECT nombre, iluminacion, distancia_hielo 
FROM emplazamientos 
WHERE iluminacion >= 75 AND distancia_hielo <= 5.0 
ORDER BY puntuacion_final DESC;

Al pulsar “Ejecutar”, la aplicación filtra los datos instantáneamente, permitiendo comprobar por qué Shackleton es la única ubicación que cumple simultáneamente los criterios de alta radiación solar y proximidad al agua.

🎨 Paso 3: Tutorial — Creación del Panel Web Dinámico (Dashboard)

Una vez dominada la estructura de datos, pasamos a la maquetación de la web que publicaremos en el blog para mostrar el resultado al público.

📝 Prompt para el Dashboard en Claude

En la misma conversación de Claude, el alumnado introduce el siguiente prompt:

Plaintext

Ahora, genera un segundo Artifact que sea el Panel Web Dinámico (Dashboard) oficial de BermejaHab para integrarlo en nuestro blog.

Características:
1. Estética: Modo oscuro espacial (Space Dark Mode), diseño limpio, moderno y futurista.
2. Contenido: Tabla comparativa interactiva con los 5 emplazamientos ordenados por la nota SQL.
3. Interactividad:
   - Destaca a Shackleton (EMP-01) con una etiqueta especial de "EMPLAZAMIENTO OFICIAL SELECCIONADO".
   - Al hacer clic en cualquier fila de la tabla, se debe actualizar abajo una tarjeta con la Ficha Técnica del lugar, mostrando sus coordenadas y el impacto directo en el diseño físico de la base (redimensionamiento de baterías y suministro de agua del invernadero).
   - Incluye una sección desplegable que muestre el código SQL utilizado para generar la tabla.

🖥️ Resultado del Código Generado por el Artifact (HTML/CSS/JS)

Claude construirá una ventana interactiva lista para probar en el navegador o insertar en el blog mediante un bloque HTML:

HTML

<!-- PANEL WEB DE RESULTADOS - BERMEJAHAB (GENERADO CON CLAUDE ARTIFACTS) -->
<style>
  .bermeja-dashboard {
    background-color: #0d1117;
    color: #c9d1d9;
    padding: 24px;
    border-radius: 12px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border: 1px solid #30363d;
  }
  .bermeja-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
  }
  .bermeja-table th {
    background-color: #161b22;
    color: #58a6ff;
    padding: 12px;
    text-align: left;
    border-bottom: 2px solid #30363d;
  }
  .bermeja-table td {
    padding: 12px;
    border-bottom: 1px solid #21262d;
    cursor: pointer;
  }
  .bermeja-table tr:hover {
    background-color: #161b22;
  }
  .row-winner {
    background-color: rgba(46, 160, 67, 0.15) !important;
    border-left: 4px solid #2ea043;
  }
  .badge-selected {
    background-color: #238636;
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: bold;
  }
  .card-detail {
    margin-top: 24px;
    background-color: #161b22;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #30363d;
  }
</style>

<div class="bermeja-dashboard">
  <h2>🏆 BermejaHab: Dashboard Oficial de Emplazamiento Lunar</h2>
  <p>Datos procesados desde la base de datos SQL y puntuados mediante el agente de decisión.</p>

  <table class="bermeja-table">
    <thead>
      <tr>
        <th>Pos.</th>
        <th>Código</th>
        <th>Emplazamiento</th>
        <th>Sol (%)</th>
        <th>Distancia Hielo</th>
        <th>Nota MCDM</th>
        <th>Estado</th>
      </tr>
    </thead>
    <tbody>
      <tr class="row-winner" onclick="cargarFicha('Cráter Shackleton (Cresta)', '-89.82, 246.78', '84%', '2.5 km', 'SELECCIONADO: La alta radiación continua reduce en un 60% la necesidad de baterías masivas. La cercanía al hielo permite el transporte automatizado de agua hacia el invernadero.')">
        <td><strong>#1</strong></td>
        <td>EMP-01</td>
        <td><strong>Cráter Shackleton</strong></td>
        <td>84%</td>
        <td>2.5 km</td>
        <td><strong>83.08 pts</strong></td>
        <td><span class="badge-selected">SELECCIONADO</span></td>
      </tr>
      <tr onclick="cargarFicha('Cráter de Gerlache', '-88.50, 271.00', '78%', '4.0 km', 'DESCARTADO: Buena iluminación, pero con menor altitud y acceso más complejo para los rovers.')">
        <td>#2</td>
        <td>EMP-03</td>
        <td>Cráter de Gerlache</td>
        <td>78%</td>
        <td>4.0 km</td>
        <td>68.21 pts</td>
        <td>Descartado</td>
      </tr>
      <tr onclick="cargarFicha('Macizo de Malapert', '-85.90, 0.00', '88%', '15.0 km', 'DESCARTADO: Excelente visibilidad a la Tierra y sol abundante, pero la distancia de 15 km al agua exige un consumo logístico inasumible.')">
        <td>#3</td>
        <td>EMP-02</td>
        <td>Macizo de Malapert</td>
        <td>88%</td>
        <td>15.0 km</td>
        <td>56.36 pts</td>
        <td>Descartado</td>
      </tr>
    </tbody>
  </table>

  <div id="card-info" class="card-detail">
    <h3 id="info-titulo">📍 Haz clic en un emplazamiento de la tabla</h3>
    <p id="info-desc">Selecciona cualquier candidato para inspeccionar su ficha técnica y ver su impacto en el diseño de ingeniería de BermejaHab.</p>
  </div>
</div>

<script>
  function cargarFicha(nombre, coords, sol, hielo, impacto) {
    document.getElementById('info-titulo').innerText = '📍 Ficha Técnica: ' + nombre + ' (' + coords + ')';
    document.getElementById('info-desc').innerText = 'Iluminación: ' + sol + ' | Distancia al Hielo: ' + hielo + '\n\nImpacto en el Diseño: ' + impacto;
  }
</script>

🎓 Vinculación Curricular y Competencias de 2º de Bachillerato

• Asignatura: Programación y Computación (2º Bachillerato).
• Situaciones de Aprendizaje (SdA):
  • SdA 3 (Gestión y Modelado de Datos): Modelado relacional, diseño de esquemas e implementación de consultas SQL (SELECT, WHERE, ORDER BY).
  • SdA 4 (Diseño y Estructura Web Estática): Maquetación de interfaces responsivas con HTML5 y CSS3 en modo oscuro.
  • SdA 5 (Desarrollo Web Dinámico e IA): Uso crítico y guiado de herramientas de IA Generativa (Claude Artifacts) como entorno asistido para el desarrollo acelerado de software e interacción con bases de datos.
• Competencias Específicas:PRYC.2.2 (almacenamiento y procesamiento de información) y PRYC.2.3 (desarrollo de aplicaciones web funcionales con acceso a bases de datos).

🚀 Próxima Entrega: Entrada 08 (Cierre del Bloque)

Con la base de datos validada y el cuadro de mando publicado, el bloque de selección de emplazamiento llega a su fin. En la Entrada 08 daremos el paso definitivo: ¿Cómo cambia el diseño físico 3D de BermejaHab tras confirmar al Cráter Shackleton como sitio oficial? Ajustaremos el cálculo de baterías, justificaremos el suministro hídrico del invernadero y uniremos todas las piezas en el modelo final.

📦 PAQUETE SEO PARA WORDPRESS

• Slug:base-datos-sql-panel-web-claude-artifacts-bermejahab
• Extracto / Meta Descripción:
  Diseñamos una base de datos SQL y creamos un panel web dinámico con Claude Artifacts (gratis) para publicar el ranking oficial de la base lunar BermejaHab.
• Palabra clave principal:base de datos sql panel web claude artifacts
• Etiquetas para WordPress:PlaintextMonteSTEAM, IES Monterroso, AIDARAC, BermejaHab, base de datos SQL, Claude Artifacts, Inteligencia Artificial educativa, desarrollo web dinamico, HTML CSS JavaScript, ranking emplazamiento lunar, crater Shackleton, Moon Camp Challenge, Programacion y Computacion