Arquitectura de Aplicaciones Web · Taller Práctico
Actividad práctica para identificar arquitecturas web, componentes y flujos de comunicación en aplicaciones reales, sin programar.
Taller Práctico · Arquitectura de Aplicaciones Web
En esta sesión los alumnos trabajarán con aplicaciones reales para identificar:
- Componentes de una aplicación web
- Flujo cliente-servidor
- Arquitecturas comunes
- APIs y comunicación
- Organización de sistemas modernos
No se programará todavía. El objetivo es desarrollar la capacidad de analizar cómo funcionan las aplicaciones web modernas.
Dinámica de Trabajo
Modalidad
- Trabajo individual
- Análisis personal
- Respuestas justificadas técnicamente
Material necesario
- Navegador web
- Celular o laptop
- Cuaderno o documento para respuestas
Objetivo
Aprender a “leer” la arquitectura de una aplicación web observando su comportamiento.
Actividad 1 · Detectando Componentes
Analicen las siguientes aplicaciones y detecten qué componentes visibles identifican:
- YouTube
- Google Classroom
- Amazon
- Netflix
Identifiquen:
- ¿Qué parte corresponde al Frontend?
- ¿Qué acciones requieren un Backend?
- ¿Qué información creen que se guarda en una Base de Datos?
- ¿Qué funciones probablemente utilizan una API?
Ejemplo:
En Netflix:
- Frontend → interfaz visual del catálogo
- Backend → recomendaciones y autenticación
- Base de datos → usuarios, películas, historial
- API → carga dinámica del catálogo
Actividad 2 · Cliente vs Servidor
Observen el comportamiento de una aplicación web mientras realizan acciones.
Acciones sugeridas:
- Iniciar sesión en una plataforma
- Buscar un producto en Amazon
- Enviar un mensaje en WhatsApp Web
- Reproducir un video en YouTube
Respondan:
- ¿Qué hace el cliente (navegador)?
- ¿Qué hace el servidor?
- ¿Qué datos deben viajar por internet?
- ¿Qué pasaría si el servidor deja de responder?
Reflexión individual
Explica cómo funciona el modelo cliente-servidor usando una analogía cotidiana:
- Restaurante
- Tienda
- Banco
- Biblioteca
Actividad 3 · Arquitectura de Aplicaciones Reales
Analicen cada plataforma e identifiquen qué arquitectura creen que utiliza principalmente.
| Aplicación | Arquitectura probable | Justificación |
|---|---|---|
| … | … | |
| Moodle | … | … |
| Spotify | … | … |
| Uber | … | … |
Opciones posibles:
- Cliente-Servidor
- Tres Capas
- MVC
- API REST
- Tiempo Real
- Microservicios
Cada alumno deberá explicar una de sus respuestas.
Actividad 4 · Diseñando un Sistema Escolar
Imaginen que deben crear un sistema web escolar para una preparatoria o universidad.
El sistema debe permitir:
- Inicio de sesión
- Subir tareas
- Consultar calificaciones
- Enviar mensajes
- Administrar alumnos y maestros
Diseña:
- ¿Qué tendría el Frontend?
- ¿Qué procesos haría el Backend?
- ¿Qué información guardaría la Base de Datos?
- ¿Qué APIs serían necesarias?
- ¿Qué arquitectura usarías?
Actividad visual
Dibuja en papel o en tu cuaderno un diagrama simple:
Usuarios ↓ Frontend ↓ Backend / API ↓ Base de Datos
Agreguen módulos como:
- Login
- Calificaciones
- Tareas
- Chat
- Notificaciones
Conclusiones
Al finalizar el taller, los alumnos deberán ser capaces de:
- Diferenciar Frontend, Backend y Base de Datos
- Explicar el modelo Cliente-Servidor
- Identificar arquitecturas web en aplicaciones reales
- Comprender el propósito de las APIs
- Diseñar conceptualmente una aplicación web moderna
La próxima etapa será transformar estas ideas en prototipos y posteriormente en aplicaciones funcionales.