Diseño de Interfaces · Arquitecturas Web
☁ Cloud
Arquitectura de
Aplicaciones Web
Estructura, Modelos y Comunicación Moderna
Tres capas
MVC
APIs
Cliente-Servidor
Full Stack
Introducción

¿Qué es una Aplicación Web
y por qué importa su arquitectura?

Una aplicación web es un programa de software que se ejecuta en un servidor y al que los usuarios acceden a través de un navegador mediante internet o intranet, sin necesidad de instalar nada localmente.

— W3C / IETF Web Architecture

👤
Usuario
Escribe una URL
🌐
Internet
HTTP / HTTPS
🖥️
Servidor
Procesa y responde
🏗️ La arquitectura web define cómo están organizados los componentes de una aplicación y cómo se comunican entre sí. Una buena arquitectura garantiza escalabilidad, mantenimiento y rendimiento.
Definición

Ejemplos de Aplicaciones Web

Programas que ya conoces y usas diariamente son aplicaciones web

📝
Google Docs
Editor de texto colaborativo en tiempo real. Guarda en la nube, accesible desde cualquier dispositivo.
Productividad · SaaS
🎬
Netflix
Plataforma de streaming con millones de contenidos. Arquitectura de microservicios altamente escalable.
Entretenimiento · Streaming
🎓
Moodle
Plataforma e-learning de código abierto. Gestiona cursos, tareas y calificaciones de forma web.
Educación · LMS
👥
Facebook
Red social con miles de millones de usuarios. Arquitectura distribuida con APIs y servicios propios.
Social Media · Red Social
💡 Todas comparten algo: funcionan en el navegador, se ejecutan en servidores remotos y se comunican vía HTTP/S.
Clasificación

Tipos de Aplicaciones Web

Página Web

Documento HTML estático o dinámico accesible por URL.

  • Contenido fijo o semi-dinámico
  • Sin autenticación compleja
  • Carga desde servidor web
wikipedia.org
Sitio Web

Conjunto de páginas web relacionadas bajo un mismo dominio.

  • Múltiples páginas vinculadas
  • Navegación estructurada
  • Puede incluir blog, galería, contacto
apple.com
Sistema Web

Aplicación con lógica de negocio completa, base de datos y usuarios.

  • Autenticación y roles
  • CRUD de datos
  • Procesos y flujos complejos
moodle / SAP
API Web

Interfaz de programación que expone datos y funciones via HTTP.

  • Responde en JSON o XML
  • No tiene interfaz visual
  • Conecta aplicaciones entre sí
REST / GraphQL
Modelo

Modelo Cliente–Servidor

El modelo fundamental de comunicación en la web: el cliente pide, el servidor responde

👤
Usuario
Ingresa URL o interactúa
HTTP Request / Response
🌐
Navegador
Chrome, Firefox, Safari
Internet · DNS
🖥️
Servidor Web
Apache, Nginx, Node
SQL / NoSQL Query
🗄️
Base de Datos
MySQL, PostgreSQL
Cliente: pide recursos (Request)
Servidor: responde con datos (Response)
HTTPS cifra la comunicación
Arquitectura

Modelo de Tres Capas

🖥️
Capa de Presentación
Frontend · UI
solicitudes
⚙️
Capa de Lógica
Backend · Negocio
consultas
🗄️
Capa de Datos
Base de datos · Storage
Presentación
  • Interfaz de usuario (HTML, CSS, JS)
  • Lo que ve e interactúa el usuario
  • React, Vue, Angular, Blade, Twig
Lógica de Negocio
  • Reglas y procesos del sistema
  • Validaciones, cálculos, flujos
  • PHP, Python, Node.js, Java
Datos
  • Almacenamiento persistente de información
  • Consultas y transacciones SQL/NoSQL
  • MySQL, PostgreSQL, MongoDB
Patrón

Modelo MVC

Modelo – Vista – Controlador: el patrón arquitectónico más usado en desarrollo web

Capa
Vista
HTML · Templates · UI
Capa
Controlador
Lógica de flujo · Rutas
Capa
Modelo
Datos · ORM · DB
Storage
Base de Datos
SQL · NoSQL
Vista (View)

Todo lo que el usuario ve e interactúa. Renderiza datos del Modelo sin lógica de negocio.

Controlador (Controller)

Intermediario. Recibe peticiones, procesa lógica y coordina Model y View.

Modelo (Model)

Lógica de datos. Accede a la BD, aplica reglas de negocio y devuelve información.

Laravel Django .NET Ruby on Rails CodeIgniter
Comparación

Comparación de Arquitecturas

Criterio Cliente-Servidor Tres Capas MVC
Organización 2 nodos: cliente y servidor 3 capas independientes 3 componentes separados por rol
Escalabilidad Media — limitada por servidor central Alta — capas escalan por separado Alta — separación clara de responsabilidades
Mantenimiento Difícil — cambios afectan todo Fácil — modificar capa sin afectar otras Fácil — modelo, vista y control independientes
Reutilización Baja Media Alta — componentes reutilizables
Uso común Apps simples, protocolos FTP/correo ERP, sistemas empresariales Laravel, Django, Rails, ASP.NET
Complejidad inicial Baja — simple de implementar Media Media — curva de aprendizaje del patrón
APIs

APIs en Aplicaciones Web

Una API (Application Programming Interface) es un conjunto de reglas y protocolos que permite que dos aplicaciones se comuniquen entre sí de forma estandarizada.

— Como un menú de restaurante: defines qué puedes pedir y cómo recibirás la respuesta

📱
App Móvil
Request
⚡
API
REST / GraphQL
Response
🖥️
Servidor / BD
JSON / XML Endpoints Auth Token / API Key
🔑 Las APIs permiten que frontend y backend trabajen de forma independiente, y que servicios de terceros (pagos, mapas, redes sociales) se integren fácilmente.
Tipos de APIs

Tipos de APIs Web

📦
API de Acceso a Datos
Permite leer, crear, actualizar y eliminar datos de un sistema. Opera sobre recursos.
Google Maps API · OpenWeather
↔️
API Cliente-Servidor
La más común. Sigue HTTP: el cliente hace una request y el servidor devuelve una response (REST).
Spotify API · GitHub API
🔗
API Punto a Punto
Comunicación directa entre dos aplicaciones sin intermediario central. Alta eficiencia.
Sistemas de pagos internos
⚡
API en Tiempo Real
Comunicación bidireccional y continua mediante WebSockets o Server-Sent Events.
WhatsApp · Chat en vivo · Bolsa
🌐 Las APIs REST son el estándar más usado. Retornan JSON y se acceden mediante verbos HTTP: GET · POST · PUT · DELETE
Stack Moderno

Arquitecturas y Tecnologías Modernas

Frontend
React
Vue.js
Angular
Next.js
Svelte
Backend
Laravel (PHP)
Node.js
Django (Python)
Ruby on Rails
ASP.NET Core
Base de Datos
MySQL
PostgreSQL
MongoDB
Redis
Firebase
Cloud / DevOps
AWS
Azure
Google Cloud
Docker
Kubernetes
Caso Práctico

Sistema Escolar Web:
Arquitectura Completa

Usuarios
🧑‍🎓
Alumno
👩‍🏫
Docente
🏛️
Admin
Frontend
  • React / Vue
  • Calificaciones
  • Horarios
  • Tareas
  • Chat
API Gateway
⚡
REST API
JSON
Backend
  • Laravel / Node
  • Auth JWT
  • Lógica de notas
  • Notificaciones
  • Reportes PDF
Base de Datos
  • MySQL/Postgres
  • Alumnos
  • Materias
  • Calificaciones
  • Usuarios
🏫 Patrón: MVC + API REST. Frontend desacoplado del Backend. Base de datos relacional para integridad de datos escolares.
Actividad Interactiva

🔍 Detectando Arquitecturas

Identifica el tipo de app, arquitectura y uso de APIs en cada caso

🎬 Netflix
Tipo de App
Arquitectura
🛒 Amazon
Tipo de App
Arquitectura
🎓 Moodle
Tipo de App
Arquitectura
💬 WhatsApp Web
Tipo de App
API utilizada
Conclusiones

Ideas clave de hoy

🏗️
La arquitectura importa
Una buena arquitectura define el éxito a largo plazo. La mala deuda técnica paraliza proyectos.
📐
Separación de capas
Presentación, Lógica y Datos separados permiten cambios sin romper todo el sistema.
🔌
APIs = Conectividad
Las APIs son el lenguaje universal que conecta apps, servicios y plataformas en el ecosistema digital.
📈
Escalabilidad
MVC y microservicios permiten crecer componente por componente sin reconstruir desde cero.
🔄
MVC es el estándar
Laravel, Django, Rails. El patrón Modelo-Vista-Controlador domina el desarrollo web moderno.
🚀 La arquitectura correcta no es la más compleja, sino la más adecuada para el problema que quieres resolver.
🏗️

"Una buena arquitectura no solo
hace funcionar una aplicación,
también permite que crezca."

— Principio de Arquitectura de Software · Clean Architecture

Diseño de Interfaces
Arquitectura Web
¡Hasta la próxima clase!