Arquitectura de Información Web

Tabla de Contenidos

PARTE 1 (Actual) 1. Introducción 2. Justificación del Diseño 3. Requerimientos

PARTE 2 4. Arquitectura del Sistema 5. Elementos de Diseño

PARTE 3 6. Interfaces de Usuario (UI) 7. Experiencia de Usuario (UX) 8. Diseño de Interacción (IxD) 9. Formularios

PARTE 4 10. Wireframes 11. Mockups 12. Mapa de Navegación 13. Mapa del Sitio 14. Prototipado

1. Introducción

1.1 Descripción del Proyecto

UTyPCB (Unidad de Tecnología y Profesionales en Capacitación B) es una plataforma web diseñada para un centro de capacitación que ofrece cursos presenciales y en línea en el área de tecnología.

1.2 Objetivos del Sitio Web

Mostrar la oferta académica de cursos de tecnología
Captar nuevos estudiantes interesados en capacitación
Facilitar el proceso de contacto e inscripción
Proporcionar información detallada de cada curso
Ofrecer un sistema de checkout con pago manual

1.3 Áreas de Formación

Programación Web

Diseño UX/UI

Bases de Datos

Redes y Ciberseguridad

2. Justificación del Diseño Web

Perspectiva: Estudiante de Ingeniería de Software

2.1 Justificación Técnica

Como estudiante de Ingeniería de Software, la elección de las tecnologías y el diseño de esta plataforma se fundamenta en los siguientes criterios:

Stack Tecnológico

PHP 8.x: Lenguaje maduro, amplia documentación, compatible con hosting compartido
MySQL: SGBD relacional robusto, ideal para datos estructurados
Bootstrap 5: Framework CSS con sistema grid responsivo
JavaScript Vanilla: Sin dependencias adicionales, mejor rendimiento

Ventajas de la Arquitectura

Patrón MVC simplificado para separación de responsabilidades
PDO para conexiones seguras a BD (prevención SQL Injection)
Código modular mediante includes
Escalabilidad horizontal

2.2 Justificación del Diseño Visual

Aspecto	Justificación
Paleta de Colores	Azul (#2563eb) transmite profesionalismo, confianza y tecnología. Amarillo (#f59e0b) como acento genera atención y energía para CTAs.
Tipografía	Inter - Sans-serif moderna, excelente legibilidad en pantallas, múltiples pesos disponibles.
Layout	Grid de 12 columnas (Bootstrap) permite adaptación fluida a diferentes dispositivos.
Navegación	Menú fijo (sticky) mantiene acceso constante, mejora la usabilidad.
Cards	Componente visual consistente que agrupa información relacionada de forma clara.

2.3 Justificación de Usabilidad

El diseño sigue los principios de Nielsen:

Visibilidad del estado: Breadcrumbs, estados de formularios, badges de curso
Coincidencia sistema-mundo real: Iconografía intuitiva, lenguaje claro
Control del usuario: Navegación clara, botón de regreso visible
Consistencia: Mismos componentes en todo el sitio
Prevención de errores: Validación de formularios, campos requeridos marcados

3. Requerimientos del Sistema

3.1 Requerimientos Funcionales

ID	Requerimiento	Descripción	Prioridad
RF-001	Catálogo de Cursos	El sistema debe mostrar todos los cursos disponibles con filtros por categoría	Alta
RF-002	Detalle de Curso	Cada curso debe tener una página con descripción, temario, requisitos y precio	Alta
RF-003	Sistema de Inscripción	Formulario de checkout para registrar datos del estudiante	Alta
RF-004	Pago Manual	Mostrar datos bancarios y generar referencia de pago única	Alta
RF-005	Confirmación de Inscripción	Página de confirmación con referencia de pago y pasos a seguir	Alta
RF-006	Formulario de Contacto	Permitir envío de mensajes que se almacenan en base de datos	Media
RF-007	Búsqueda por Categoría	Filtrar cursos por área de formación	Media
RF-008	Cursos Destacados	Mostrar cursos marcados como destacados en la página principal	Media
RF-009	Cursos Relacionados	Sugerir cursos de la misma categoría en la página de detalle	Baja
RF-010	Preguntas Frecuentes	Sección FAQ con acordeón desplegable	Baja

3.2 Requerimientos No Funcionales

ID	Categoría	Requerimiento	Métrica
RNF-001	Rendimiento	Tiempo de carga de páginas	< 3 segundos
RNF-002	Usabilidad	Diseño responsivo	Compatible con dispositivos >320px
RNF-003	Compatibilidad	Navegadores soportados	Chrome, Firefox, Safari, Edge (últimas 2 versiones)
RNF-004	Seguridad	Prevención de inyección SQL	Uso de PDO con prepared statements
RNF-005	Seguridad	Prevención XSS	Sanitización de entradas con htmlspecialchars()
RNF-006	Disponibilidad	Uptime del servidor	99.5%
RNF-007	Accesibilidad	Cumplimiento WCAG	Nivel AA
RNF-008	SEO	Optimización para buscadores	Meta tags, URLs amigables, estructura semántica
RNF-009	Mantenibilidad	Código modular	Separación en includes, funciones reutilizables
RNF-010	Escalabilidad	Crecimiento de usuarios	Soporte hasta 1000 usuarios concurrentes

Continúa en: Parte 2 - Arquitectura, Elementos de Diseño y UI/UX