Arquitectura de Información Web - Parte 2

Arquitectura del Sistema, Elementos de Diseño y UI/UX

4. Arquitectura del Sistema

4.1 Diagrama de Arquitectura
┌─────────────────────────────────────────────────────────────────────┐
│                         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  │                                                     │
│  └─────────────┘                                                     │
└─────────────────────────────────────────────────────────────────────┘
                
4.2 Estructura de Archivos
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
                
4.3 Modelo de Base de Datos (ERD)
┌──────────────────┐       ┌──────────────────────────────────────────┐
│    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    │
└──────────────────┘
                

5. Elementos de Diseño

5.1 Paleta de Colores

Primary

#2563eb

Encabezados, botones principales

Primary Dark

#1d4ed8

Hover states, acentos

Secondary

#f59e0b

CTAs, ofertas, destacados

Success

#10b981

Confirmaciones, checks

Dark

#1e293b

Textos, footer

Gray

#64748b

Textos secundarios

Light

#f8fafc

Fondos, secciones

Danger

#dc3545

Ofertas, alertas

5.2 Tipografía
Fuente Principal: Inter (Google Fonts)

Light 300 - Textos de apoyo y descripciones largas

Regular 400 - Texto de párrafos y contenido general

Medium 500 - Navegación, labels y botones

Semi-bold 600 - Subtítulos y destacados

Bold 700 - Títulos y encabezados principales

ElementoTamañoPeso
H1 (Display)2.5rem - 3.5rem700
H22rem700
H31.5rem600
H4-H61.25rem - 1rem600
Párrafo1rem (16px)400
Small0.875rem400
5.3 Iconografía (Bootstrap Icons)

Biblioteca utilizada: Bootstrap Icons v1.11.1 (CDN)

5.4 Botones
Botones Primarios
Botones Secundarios
Botones Outline
Botones con Iconos
Especificaciones CSS:
border-radius: 8px; font-weight: 500; padding: 0.6rem 1.25rem; transition: all 0.2s ease;
5.5 Imágenes Utilizadas

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

Uso URL de Imagen Dimensiones
Hero Background unsplash.com/photo-1517694712202-14dd9538aa97 1920px wide
Curso PHP Full Stack unsplash.com/photo-1498050108023-c5249f4df085 800x600
Curso JavaScript unsplash.com/photo-1627398242454-45a1465c2479 800x600
Curso UX/UI unsplash.com/photo-1561070791-2526d30994b5 800x600
Curso Ciberseguridad unsplash.com/photo-1550751827-4bd374c3f58b 800x600
Instructores (Avatars) unsplash.com/photos (varios retratos) 150x150
5.6 Animaciones y Transiciones
Elemento Tipo CSS
Cards (hover) Transform + Shadow transform: translateY(-5px); transition: 0.3s ease;
Botones (hover) Transform transform: translateY(-2px); transition: 0.2s ease;
Botón Inscripción Pulse (keyframes) animation: pulse 2s infinite;
Navbar scroll Box-shadow box-shadow: 0 2px 10px rgba(0,0,0,0.1);
Tabs Color + Background transition: all 0.2s ease;
Temario items Transform transform: translateX(5px); transition: 0.2s;