En esta clase, hemos diseñado y desarrollado la pestaña "Contenido del Curso". Este componente incluye varias funcionalidades dinámicas y elementos estilizados que simulan una experiencia de usuario interactiva y organizada.

Objetivos de la Clase

• Diseñar la estructura de la sección "Contenido del Curso".
• Implementar funcionalidad dinámica para expandir y contraer contenido con Alpine.js.
• Optimizar la reutilización de código para un diseño modular y escalable.

Desarrollo Paso a Paso

1. Estructura Base

• Creamos un archivo taps.php donde se agrupan las secciones relacionadas.
• Añadimos un contenedor principal con márgenes (my-24) y definimos las áreas de Requisitos, Descripción y Contenido del Curso.
• Utilizamos clases utilitarias de Tailwind CSS para controlar estilos como:
  • max-w-2xl para limitar el ancho del texto.
  • pl-6 para aplicar indentación en listas.
  • text-sm para tamaños de texto.

2. Elementos de la Sección

Requisitos

• Implementamos un encabezado con text-3xl font-bold y una lista (ul) para los puntos destacados.

Descripción

• Creamos una sección con párrafos y estilos para resaltar palabras clave como "Python" y "Udemy" utilizando font-semibold dentro de span.

Contenido del Curso

• Organizamos el contenido en bloques separados, gestionados con clases dinámicas y funcionalidad colapsable.
• Agregamos títulos, listas y subtítulos para las secciones de manera jerárquica.

3. Interactividad con Alpine.js

Colapsar y Expandir

• Instalamos el plugin de colapso de Alpine.js y configuramos las secciones dinámicamente:
  • Utilizamos x-data para gestionar el estado inicial.
  • x-show y @click para mostrar/ocultar contenido al interactuar con los botones.
  • Añadimos animaciones con transition duration-500 para mejorar la experiencia visual.

Rotación de Iconos

• Configuramos la rotación de iconos con rotate-180 y transiciones suaves cuando el usuario interactúa con los elementos.

4. Optimización del Código

• Reutilizamos componentes dinámicos mediante bucles en PHP:
  • Generamos bloques y listas automáticamente.
  • Personalizamos contenido como títulos, tiempos y clases utilizando estructuras repetitivas.

5. Estilización Adicional

• Aplicamos utilidades de Tailwind para:
  • Espaciados consistentes (mt-4, mb-12, gap-2).
  • Colores personalizados en botones y fondos (bg-gray-50, text-primary).
  • Bordes y esquinas redondeadas (rounded-full, border-gray-300).

Funcionalidad Final

1. Requisitos y Descripción:

   • Bloques estáticos con estructura organizada y palabras clave destacadas.

2. Contenido del Curso:

   • Secciones colapsables que alternan entre expandido y contraído.
   • Transiciones y rotaciones en los íconos para mejorar la experiencia visual.

3. Código Dinámico:

   • Generación automática de secciones con bucles.
   • Gestión de elementos interactivos con Alpine.js y Tailwind CSS.