En este vídeo os explico cómo hacerlo:
A continuación os dejo el prompt que he utilizado para copiar y pegar en una plataforma de IA Generativa.
Si no pertenecéis a la Universidad Rey Juan Carlos, podéis copiar el prompt y pegarlo en una IA generativa y pedirle que lo adapte a la plataforma de vuestra universidad, e incluso hacer una captura de pantalla de la plataforma para respetar la imagen.
Actúa como un experto desarrollador front-end especializado en accesibilidad web (WCAG 2.1 AA) y en la integración de contenido en Moodle.
**CONTEXTO CLAVE:** El código que vas a generar NO es una página web completa. Es un **FRAGMENTO HTML autónomo** (un bloque) que se incrustará dentro de una etiqueta o recurso "Página" de Moodle. Moodle ya proporciona la estructura exterior (`<html>`, `<head>`, `<body>`, menús, cabeceras, pies de página). Tu fragmento solo debe contener el marcado y estilos del contenido específico de la guía docente.
**Entrada del Usuario:** El usuario te proporcionará:
1. Un archivo PDF de una guía docente universitaria.
2. El código fuente HTML de una página de su curso en el Aula Virtual de la URJC (para que puedas identificar las clases CSS nativas de Moodle/URJC).
3. **OPCIONAL PERO RECOMENDADO:** Una URL donde está alojado el PDF de la guía docente (para el botón de descarga). Si el usuario NO proporciona esta URL, usarás como marcador de posición `javascript:void(0)` y añadirás un comentario en el código indicando dónde debe insertar el enlace el profesor.
**Objetivo:** Generar un FRAGMENTO HTML/CSS/JavaScript que presente la información de la guía docente de forma interactiva (pestañas accesibles), responsiva y con un aspecto visual que se integre perfectamente en el entorno de Moodle de la URJC, reutilizando sus estilos nativos.
**Requisitos Específicos:**
1. **Estructura del Fragmento (CRÍTICO):**
* **NO** incluyas `<html>`, `<head>`, `<body>`.
* **NO** incluyas `<title>`, metadatos, ni enlaces a fuentes externas que ya cargue Moodle.
* **SÍ** comienza directamente con un `<div>` contenedor principal (ej. `<div class="guia-docente-block">`).
* **SÍ** incluye etiquetas `<style>` para el CSS personalizado mínimo necesario.
* **SÍ** incluye etiquetas `<script>` para la lógica de interacción (Vanilla JS).
2. **Extracción de Contenido:** Extrae y estructura el contenido del PDF en secciones: Presentación, Resultados de Aprendizaje, Contenidos (Temario), Metodología, Evaluación, Profesorado, Bibliografía.
3. **Botón de Descarga del PDF (INTERACTIVO CON EL USUARIO):**
* **ANTES DE GENERAR EL CÓDIGO**, debes verificar si el usuario ha proporcionado una URL para el PDF.
* **Si el usuario proporcionó una URL** (ej. "https://www.aulavirtual.urjc.es/.../guia.pdf"), úsala directamente en el atributo `href` del botón de descarga.
* **Si el usuario NO proporcionó una URL**, usa `href="javascript:void(0)"` como valor temporal Y añade un comentario HTML visible dentro del código (o junto al botón) indicando: `<!-- IMPORTANTE: Sustituye 'javascript:void(0)' por la URL real de tu guía docente en PDF -->`.
* El botón debe usar la clase `btn btn-primary` de Bootstrap para que herede el estilo de Moodle.
* El texto del botón debe ser: `📄 Descargar Guía Docente Completa (PDF)`
4. **Reutilización de Estilos de Moodle (CRUCIAL):**
* Analiza el código HTML de Moodle proporcionado para identificar clases nativas de Bootstrap 4 y del tema URJC: `container-fluid`, `card`, `card-body`, `btn`, `btn-primary`, `nav`, `nav-tabs`, `nav-link`, `table`, `badge`, etc.
* **Genera tu HTML usando estas mismas clases siempre que sea posible.** Esto garantiza que el bloque herede los estilos globales de Moodle.
* El CSS personalizado debe ser **mínimo** (solo para ajustes de espaciado, asegurar la accesibilidad del foco, o si alguna interacción no funciona sin estilos adicionales).
5. **Interactividad (Pestañas Accesibles):**
* Usa la estructura `nav nav-tabs` de Bootstrap para las pestañas.
* Implementa la lógica de cambio de panel con **JavaScript nativo** (no dependas de que Bootstrap JS esté disponible globalmente).
* Añade los atributos ARIA necesarios para accesibilidad: `role="tablist"`, `role="tab"`, `role="tabpanel"`, `aria-selected`, `aria-labelledby`, `aria-controls`.
6. **Accesibilidad (WCAG 2.1 AA) - OBLIGATORIO:**
* Navegación completa por teclado (Tabulador, Enter/Espacio para activar pestañas).
* Indicador de foco visible (`:focus-visible`).
* Contraste de color suficiente (4.5:1).
* Texto alternativo en iconos.
**Ejemplo de la Estructura Esperada del Fragmento:**
```html
<div class="container-fluid guia-docente-block mt-3">
<style>
/* CSS personalizado MÍNIMO */
.guia-docente-block [role="tabpanel"]:focus-visible { outline: 2px solid #005b9f; }
</style>
<div class="d-flex justify-content-between align-items-center flex-wrap border-bottom pb-2 mb-3">
<h1 class="h2">Guía Docente: <span id="asignatura-nombre">[NOMBRE ASIGNATURA]</span></h1>
<!-- El href se rellenará con la URL proporcionada por el usuario o con un placeholder -->
<a href="[URL_DEL_PDF_O_PLACEHOLDER]" class="btn btn-primary" id="downloadPdfBtn">📄 Descargar Guía Docente Completa (PDF)</a>
</div>
<!-- Pestañas y contenido... -->
<script>
// Mensaje en consola si el enlace es un placeholder
const downloadBtn = document.getElementById('downloadPdfBtn');
if (downloadBtn && downloadBtn.getAttribute('href') === 'javascript:void(0)') {
console.warn('⚠️ [GUÍA DOCENTE] Recuerda sustituir el enlace del botón de descarga por la URL real de tu guía en PDF.');
}
// Lógica de pestañas...
</script>
</div>
