Guía Maestra de Implementación

Evolución de presentacion_curso.php a una Herramienta de Marketing

Objetivo del Documento

Esta guía detalla, paso a paso, las acciones técnicas necesarias para implementar las mejoras propuestas en la página de presentación del curso. El objetivo es transformar una página informativa en una experiencia persuasiva y atractiva para los potenciales alumnos. El desarrollo se realizará de forma iterativa, solicitando autorización antes de codificar cada fase.

Plan de Desarrollo

FASE 1: Modificaciones a la Base de Datos (Backend)
FASE 2: Actualización de la Lógica PHP para Obtener Nuevos Datos (Backend)
FASE 3: Reestructuración de la Interfaz con Nuevas Secciones (Frontend)
FASE 4: Implementación de Llamados a la Acción (CTA)
FASE 5: Puesta en Marcha y Revisión Final

FASE 1: Modificaciones a la Base de Datos (Backend)

La base de nuestro proyecto. Primero prepararemos la estructura de datos para almacenar la nueva información.

Paso 1.1: Añadir campo de "Beneficios" al curso

Objetivo: Almacenar el texto persuasivo que describe lo que el alumno logrará.

Acción: Ejecutar la siguiente consulta SQL para modificar la tabla cursos_sence.

ALTER TABLE `cursos_sence`
ADD `beneficios_clave` TEXT NULL
COMMENT 'Párrafo o lista de beneficios clave que el alumno obtendrá. Se usa en la página de presentación del curso.';

Paso 1.2: Añadir campo para "Clase Muestra"

Objetivo: Permitir marcar un subtema como el video de muestra que se mostrará en la página.

Acción: Ejecutar la siguiente consulta SQL para modificar la tabla subtemas_curso.

ALTER TABLE `subtemas_curso`
ADD `es_muestra` TINYINT(1) NOT NULL DEFAULT 0
COMMENT 'Marcar con 1 si este subtema es la clase de muestra para la página de presentación.';

Paso 1.3: Crear tabla para "Testimonios"

Objetivo: Crear una nueva tabla para almacenar los testimonios de los alumnos, lo que constituye una poderosa prueba social.

Acción: Ejecutar la siguiente consulta SQL para crear la tabla testimonios_curso.

CREATE TABLE `testimonios_curso` (
  `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
  `curso_id` INT NOT NULL,
  `nombre_alumno` VARCHAR(200) NOT NULL,
  `texto_testimonio` TEXT NOT NULL,
  `foto_alumno` VARCHAR(255) NULL COMMENT 'Ruta a la foto opcional del alumno',
  `estado` ENUM('activo', 'inactivo') NOT NULL DEFAULT 'inactivo',
  `fecha_creacion` TIMESTAMP NULL DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (`curso_id`) REFERENCES `cursos_sence`(`id`) ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

FASE 2: Actualización de la Lógica PHP (Backend)

Con la base de datos lista, modificaremos presentacion_curso.php para que consulte y prepare toda la nueva información.

Paso 2.1: Actualizar la consulta principal del curso

Objetivo: Obtener los nuevos campos beneficios_clave, modalidad_instruccion, y total_general_horas.

Acción: Modificar la consulta SQL dentro del script PHP.

Consulta Original:

SELECT nombre_actividad, valor_total, valor_participante, codigo_oferta_sence FROM cursos_sence WHERE id = ?

Consulta Propuesta:

SELECT nombre_actividad, valor_total, valor_participante, codigo_oferta_sence, beneficios_clave, modalidad_instruccion, total_general_horas FROM cursos_sence WHERE id = ?

Paso 2.2: Añadir consulta para obtener la "Clase Muestra"

Objetivo: Buscar en la base de datos si existe un subtema marcado como muestra para este curso.

Acción: Después de obtener los detalles del curso, añadir un nuevo bloque de código PHP para esta consulta.

// Lógica para obtener el subtema de muestra
$subtema_muestra = null;
$sql_muestra = "SELECT titulo, url_video FROM subtemas_curso WHERE curso_id = ? AND es_muestra = 1 AND estado = 'activo' LIMIT 1";
$stmt_muestra = $mysqli->prepare($sql_muestra);
if ($stmt_muestra) {
    $stmt_muestra->bind_param("i", $curso_id);
    $stmt_muestra->execute();
    $result_muestra = $stmt_muestra->get_result();
    if ($result_muestra->num_rows > 0) {
        $subtema_muestra = $result_muestra->fetch_assoc();
    }
    $stmt_muestra->close();
}

Paso 2.3: Añadir consulta para obtener "Testimonios"

Objetivo: Extraer de 2 a 3 testimonios activos de forma aleatoria para mostrarlos.

Acción: Añadir otro bloque de código para consultar la tabla testimonios_curso.

// Lógica para obtener testimonios
$testimonios = [];
$sql_testimonios = "SELECT nombre_alumno, texto_testimonio, foto_alumno FROM testimonios_curso WHERE curso_id = ? AND estado = 'activo' ORDER BY RAND() LIMIT 3";
$stmt_testimonios = $mysqli->prepare($sql_testimonios);
if ($stmt_testimonios) {
    $stmt_testimonios->bind_param("i", $curso_id);
    $stmt_testimonios->execute();
    $result_testimonios = $stmt_testimonios->get_result();
    while ($row = $result_testimonios->fetch_assoc()) {
        $testimonios[] = $row;
    }
    $stmt_testimonios->close();
}

Paso 2.4: Actualizar consulta de "Profesores" para incluir biografía

Objetivo: Obtener el resumen del CV del profesor para mostrarlo.

Acción: Modificar la consulta existente que obtiene los profesores.

Consulta Original:

SELECT p.nombre, p.apellido_paterno, p.apellido_materno, p.especialidad, p.foto_perfil ...

Consulta Propuesta (añadiendo cv_resumen):

SELECT p.nombre, p.apellido_paterno, p.apellido_materno, p.especialidad, p.foto_perfil, p.cv_resumen ...

FASE 3: Reestructuración de la Interfaz (Frontend)

Ahora, integramos las nuevas secciones en el cuerpo del archivo HTML.

Paso 3.1: Actualizar el cuadro de detalles del curso

Objetivo: Añadir la modalidad y las horas totales al resumen.

Acción: Modificar el <section class="course-details-box"> para incluir estos nuevos datos.

<!-- Ejemplo de nuevo item a añadir dentro del div course-details-box -->
<div class="detail-item">
    <strong>Modalidad</strong>
    <span><?php echo htmlspecialchars($curso['modalidad_instruccion']); ?></span>
</div>
<div class="detail-item">
    <strong>Horas Totales</strong>
    <span><?php echo htmlspecialchars($curso['total_general_horas']); ?> horas</span>
</div>

Paso 3.2: Integrar la nueva sección "Beneficios Clave"

Objetivo: Crear un espacio atractivo para mostrar los beneficios.

Acción: Añadir el siguiente bloque de HTML después de course-details-box.

<?php if (!empty($curso['beneficios_clave'])): ?>
<section class="mb-5">
    <h3 class="section-title"><i class="fas fa-check-circle"></i> ¿Qué Lograrás con Este Curso?</h3>
    <div class="card">
        <div class="card-body">
            <p class="card-text"><?php echo nl2br(htmlspecialchars($curso['beneficios_clave'])); ?></p>
        </div>
    </div>
</section>
<?php endif; ?>

Paso 3.3: Integrar la sección "Clase de Muestra"

Objetivo: Incrustar el video de muestra para que sea visible directamente.

Acción: Añadir este bloque de HTML, idealmente antes de la sección de profesores.

<?php if (!empty($subtema_muestra) && !empty($subtema_muestra['url_video'])): ?>
<section class="mb-5">
    <h3 class="section-title"><i class="fas fa-play-circle"></i> Explora una Clase de Muestra</h3>
    <h5><?php echo htmlspecialchars($subtema_muestra['titulo']); ?></h5>
    <div class="ratio ratio-16x9">
        <iframe src="<?php echo htmlspecialchars($subtema_muestra['url_video']); ?>" title="Video de muestra" allowfullscreen></iframe>
    </div>
</section>
<?php endif; ?>

Paso 3.4: Mejorar tarjetas de "Profesores" con biografía

Objetivo: Añadir la biografía resumida y un modal para ver más detalles.

Acción: Modificar el bucle que genera las tarjetas de profesor.

<!-- Dentro del bucle foreach ($profesores as $profesor) -->
<div class="professor-card w-100">
    <!-- ... imagen, nombre, especialidad como ya existen ... -->
    <p class="small text-muted"><?php echo htmlspecialchars(substr($profesor['cv_resumen'], 0, 100)) . '...'; ?></p>
    <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#modalProfesor<?php echo $profesor['id']; ?>">
        Conoce más
    </button>
</div>

<!-- Modal (también dentro del bucle) -->
<div class="modal fade" id="modalProfesor<?php echo $profesor['id']; ?>" ...>
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><?php echo htmlspecialchars($profesor['nombre'] . ' ' . $profesor['apellido_paterno']); ?></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <?php echo nl2br(htmlspecialchars($profesor['cv_resumen'])); ?>
            </div>
        </div>
    </div>
</div>

Paso 3.5: Integrar la sección "Testimonios"

Objetivo: Mostrar las tarjetas con los testimonios de los alumnos.

Acción: Añadir este nuevo bloque de HTML, por ejemplo, después de la sección del temario.

<?php if (!empty($testimonios)): ?>
<section class="mb-5">
    <h3 class="section-title"><i class="fas fa-comments"></i> Lo que Dicen Nuestros Alumnos</h3>
    <div class="row">
        <?php foreach ($testimonios as $testimonio): ?>
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-body">
                    <p class="fst-italic">"<?php echo htmlspecialchars($testimonio['texto_testimonio']); ?>"</p>
                </div>
                <div class="card-footer d-flex align-items-center">
                    <img src="<?php echo htmlspecialchars($testimonio['foto_alumno'] ?? 'img/hombre_sin_foto.jpg'); ?>" class="rounded-circle me-3" width="50" height="50">
                    <strong><?php echo htmlspecialchars($testimonio['nombre_alumno']); ?></strong>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
</section>
<?php endif; ?>

FASE 4: Implementación de Llamados a la Acción (CTA)

El paso final para guiar al usuario hacia la conversión.

Paso 4.1: Añadir botones de acción fijos

Objetivo: Asegurar que las opciones de "Inscribirse" y "Contactar" estén siempre visibles para el usuario.

Acción: Añadir el siguiente bloque HTML justo antes del cierre de la etiqueta </body>. Esto cumplirá con la directriz de usar btn-fixed-group.

<div class="btn-fixed-group">
    <a href="ruta/a/contacto.php?curso_id=<?php echo $curso_id; ?>" class="btn btn-secondary mb-2">
        <i class="fas fa-question-circle"></i> Solicitar Información
    </a>
    <a href="ruta/a/inscripcion.php?curso_id=<?php echo $curso_id; ?>" class="btn btn-success btn-lg">
        <i class="fas fa-rocket"></i> ¡Inscríbete Ahora!
    </a>
</div>

FASE 5: Puesta en Marcha y Revisión Final

Una vez completadas las fases de desarrollo, se debe realizar una revisión integral.

Verificar que toda la nueva información se carga correctamente desde la base de datos.
Probar la visualización en diferentes dispositivos (móvil, tablet, escritorio) para asegurar que el diseño es responsivo.
Asegurarse de que los nuevos botones de CTA dirijan a las páginas correctas.
Revisar que los modales de los profesores se abran y muestren la información adecuada.

Listo para la Aprobación

Esta guía de desarrollo está completa. Espero tu revisión y autorización para comenzar con la codificación de la Fase 1.