Arquitectura de Información Web - Parte 2

┌─────────────────────────────────────────────────────────────────────┐
│                         CLIENTE (NAVEGADOR)                          │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐ │
│  │   Desktop   │  │   Tablet    │  │   Mobile    │  │   Laptop    │ │
│  └─────────────┘  └─────────────┘  └─────────────┘  └─────────────┘ │
└────────────────────────────┬────────────────────────────────────────┘
                             │ HTTPS (SSL/TLS)
                             ▼
┌─────────────────────────────────────────────────────────────────────┐
│                      SERVIDOR WEB (Apache/Nginx)                     │
│                   cursos.mitiendamonica.com:443                      │
└────────────────────────────┬────────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────────┐
│                         CAPA DE PRESENTACIÓN                         │
│  ┌──────────────────────────────────────────────────────────────┐   │
│  │                    Frontend (HTML/CSS/JS)                     │   │
│  │  • Bootstrap 5 (Grid Responsivo)                              │   │
│  │  • Bootstrap Icons                                            │   │
│  │  • Google Fonts (Inter)                                       │   │
│  │  • JavaScript Vanilla                                         │   │
│  └──────────────────────────────────────────────────────────────┘   │
└────────────────────────────┬────────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────────┐
│                         CAPA DE NEGOCIO (PHP 8.x)                    │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐  ┌────────────┐  │
│  │  index.php  │  │ cursos.php  │  │  curso.php  │  │checkout.php│  │
│  └─────────────┘  └─────────────┘  └─────────────┘  └────────────┘  │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐                  │
│  │contacto.php │  │nosotros.php │  │confirmacion │                  │
│  └─────────────┘  └─────────────┘  └─────────────┘                  │
│                                                                      │
│  ┌──────────────────── INCLUDES ────────────────────┐               │
│  │  header.php │ footer.php │ functions.php          │               │
│  └───────────────────────────────────────────────────┘               │
│                                                                      │
│  ┌──────────────────── CONFIG ──────────────────────┐               │
│  │                   database.php                    │               │
│  └───────────────────────────────────────────────────┘               │
└────────────────────────────┬────────────────────────────────────────┘
                             │ PDO (Prepared Statements)
                             ▼
┌─────────────────────────────────────────────────────────────────────┐
│                       CAPA DE DATOS (MySQL/MariaDB)                  │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐  ┌────────────┐  │
│  │ categorias  │  │   cursos    │  │ estudiantes │  │inscripciones│ │
│  └─────────────┘  └─────────────┘  └─────────────┘  └────────────┘  │
│  ┌─────────────┐                                                     │
│  │  contactos  │                                                     │
│  └─────────────┘                                                     │
└─────────────────────────────────────────────────────────────────────┘
                

cursos/
├── index.php                 # Página principal
├── cursos.php                # Catálogo de cursos
├── curso.php                 # Detalle de curso individual
├── checkout.php              # Proceso de inscripción
├── confirmacion.php          # Confirmación de pago
├── contacto.php              # Formulario de contacto
├── nosotros.php              # Información institucional
│
├── assets/
│   ├── css/
│   │   └── styles.css        # Estilos personalizados
│   └── js/
│       └── main.js           # JavaScript principal
│
├── config/
│   └── database.php          # Configuración de BD y constantes
│
├── includes/
│   ├── header.php            # Cabecera común
│   ├── footer.php            # Pie de página común
│   └── functions.php         # Funciones auxiliares
│
└── sql/
    └── database.sql          # Script de creación de BD
                

┌──────────────────┐       ┌──────────────────────────────────────────┐
│    CATEGORIAS    │       │                  CURSOS                   │
├──────────────────┤       ├──────────────────────────────────────────┤
│ PK id            │───┐   │ PK id                                    │
│    nombre        │   │   │ FK categoria_id ─────────────────────────┤
│    descripcion   │   └──▶│    titulo                                │
│    icono         │       │    slug (UNIQUE)                         │
│    activo        │       │    descripcion_corta                     │
│    created_at    │       │    descripcion                           │
└──────────────────┘       │    imagen                                │
                           │    precio                                │
┌──────────────────┐       │    precio_oferta                         │
│   ESTUDIANTES    │       │    duracion                              │
├──────────────────┤       │    modalidad (ENUM)                      │
│ PK id            │───┐   │    nivel (ENUM)                          │
│    nombre        │   │   │    temario                               │
│    apellidos     │   │   │    requisitos                            │
│    email (UNIQUE)│   │   │    instructor                            │
│    telefono      │   │   │    fecha_inicio                          │
│    activo        │   │   │    cupo_maximo                           │
│    created_at    │   │   │    destacado                             │
└──────────────────┘   │   │    activo                                │
         │             │   │    created_at                            │
         │             │   └──────────────────────────────────────────┘
         │             │                      │
         │             │                      │
         ▼             ▼                      ▼
┌─────────────────────────────────────────────────────────────────────┐
│                           INSCRIPCIONES                              │
├─────────────────────────────────────────────────────────────────────┤
│ PK id                                                                │
│ FK estudiante_id ◀──────────────────────────────────────────────────┤
│ FK curso_id ◀───────────────────────────────────────────────────────┤
│    referencia_pago (UNIQUE)                                         │
│    monto                                                            │
│    metodo_pago (ENUM: transferencia, deposito, efectivo)            │
│    comprobante                                                       │
│    estado (ENUM: pendiente, verificando, aprobado, rechazado)       │
│    notas                                                            │
│    created_at                                                        │
└─────────────────────────────────────────────────────────────────────┘

┌──────────────────┐
│    CONTACTOS     │
├──────────────────┤
│ PK id            │
│    nombre        │
│    email         │
│    telefono      │
│    asunto        │
│    mensaje       │
│    leido         │
│    created_at    │
└──────────────────┘
                

Fuente Principal: Inter (Google Fonts)

Biblioteca utilizada: Bootstrap Icons v1.11.1 (CDN)

Todas las imágenes provienen de Unsplash.com (licencia libre)