Tecnologías y Aplicaciones Web · Taller Práctico

Arquitectura de
Aplicaciones Web

Actividad práctica individual para identificar componentes, arquitecturas y flujos de comunicación en aplicaciones reales

1h 30min

Individual

Arquitectura Web

Análisis crítico

Auto-guardado

Introducción

¿Qué haremos hoy?

Analizaremos aplicaciones reales para entender cómo están construidas por dentro

🧩

Componentes

Identificar Frontend, Backend y Base de Datos en apps del día a día

↔️

Cliente-Servidor

Entender cómo viajan los datos entre navegador y servidor web

🏗️

Arquitecturas

Detectar MVC, Tres Capas, APIs REST y Microservicios

🔌

APIs

Reconocer comunicación entre servicios externos e internos

📐

Diseño de sistema

Proponer la arquitectura de un sistema escolar propio

Importante: No programaremos todavía. El objetivo es desarrollar la capacidad de leer y entender arquitecturas en aplicaciones web modernas.

💾 Tus respuestas se guardan automáticamente en el navegador. Puedes cerrar y continuar después sin perder progreso.

Organización

Dinámica de Trabajo

Cómo trabajaremos durante el taller

Modalidad

Trabajo individual — análisis propio
Respuestas justificadas técnicamente
Sin respuestas "correctas" únicas
Se evalúa el razonamiento, no la memoria

Material necesario

Navegador web con acceso a internet
Celular o laptop para explorar apps
Estas diapositivas abiertas
Tus respuestas se guardan aquí mismo

🔍

Act. 1

Detectar componentes

↔️

Act. 2

Cliente vs Servidor

🏗️

Act. 3

Arquitecturas reales

🏫

Act. 4

Sistema escolar

Actividad 1

Detectando Componentes

Elige una app, explórala y analiza sus componentes técnicos

YouTube

Google Classroom

Amazon

Netflix

Otra de tu elección

Frontend · Presentación

Backend · Lógica

Base de Datos

Completa tu análisis

Aplicación elegida

1. ¿Qué parte es el Frontend?

2. ¿Qué acciones requieren Backend?

3. ¿Qué guarda la Base de Datos?

4. ¿Qué funciones usan una API externa?

Actividad 2

Cliente vs Servidor

Observa una acción en la app y analiza qué ocurre en cada lado

🌐

Navegador

Tu computadora

HTTP Request / Response

🌍

Internet

DNS · HTTPS

Solicitud al servidor

🖥️

Servidor

Procesa y responde

Consulta BD

🗄️

Base de Datos

MySQL · Mongo

Analiza una acción específica

Acción observada en la app (ej: "iniciar sesión en Netflix")

1. ¿Qué hace el cliente (navegador)?

2. ¿Qué hace el servidor?

3. ¿Qué datos viajan por internet?

4. ¿Qué pasa si el servidor no responde?

5. Analogía cotidiana del modelo cliente-servidor

Actividad 3

Arquitecturas de Apps Reales

Identifica la arquitectura de cada aplicación y justifica tu respuesta

Cliente-Servidor Tres Capas MVC API REST Tiempo Real Microservicios

Aplicación	Arquitectura que crees que usa	Justificación (¿por qué crees eso?)
Facebook
Moodle
Spotify
Uber
Amazon

Pista: Piensa en cuántos usuarios tienen, si actualizan en tiempo real, si tienen app móvil y web, si permiten integraciones con otros servicios.

Actividad 4

Diseñando un Sistema Escolar Web

Propón la arquitectura de una app para: login, tareas, calificaciones, mensajes y administración

Frontend

React / Vue / HTML
Páginas y formularios
Interfaz del usuario

API / Backend

Laravel / Node.js
Lógica de negocio
Rutas y validaciones

Base de Datos

MySQL / PostgreSQL
Tablas relacionales
Datos persistentes

Diseña tu sistema escolar

1. ¿Qué tendría el Frontend?

2. ¿Qué procesos haría el Backend?

3. ¿Qué guardaría la Base de Datos?

4. ¿Qué APIs serían necesarias?

5. ¿Qué arquitectura usarías y por qué?

Actividad 4 · Módulos

Módulos del Sistema Escolar

Incorpora estos módulos en el diagrama que diseñaste

Login / Auth

Calificaciones

Tareas

Chat / Mensajes

Notificaciones

Alumnos

Maestros

Calendario

Reportes

Administración

Documentos

Roles / Permisos

Tarea: Dibuja en papel o pizarrón un diagrama que muestre cómo se conectan estos módulos con Frontend, Backend y Base de Datos en tu diseño.

💡 Ejemplo del stack sugerido: React + Laravel + MySQL + API REST

Referencia

Recordatorio de Arquitecturas

Una guía visual para consultar mientras haces las actividades

↔️

Cliente-Servidor

2 nodos: el cliente pide, el servidor responde. Base de toda la web. Ej: cualquier página estática.

🏢

Tres Capas

Presentación → Lógica → Datos. Separación clara. Ideal para sistemas empresariales medianos.

🔄

MVC

Modelo-Vista-Controlador. El patrón más usado: Laravel, Django, Rails, ASP.NET, CodeIgniter.

⚡

API REST

Frontend y Backend separados conectados por endpoints HTTP. Retorna JSON. Estándar moderno.

📡

Tiempo Real

WebSockets. Comunicación bidireccional continua. Ej: WhatsApp, chats en vivo, mapas con GPS.

🧩

Microservicios

Cada función es un servicio independiente. Escala individual. Ej: Netflix, Amazon, Uber.

Cierre del Taller

Conclusiones

Al terminar el taller debes ser capaz de…

Diferenciar Frontend, Backend y Base de Datos en cualquier aplicación
Explicar el modelo Cliente-Servidor y su flujo de comunicación
Identificar arquitecturas como MVC, Tres Capas, APIs y Microservicios
Comprender para qué sirven las APIs y cómo conectan sistemas
Proponer conceptualmente la arquitectura de una app web propia

Siguiente etapa: Transformar estas ideas en prototipos y luego en aplicaciones funcionales usando frameworks como Laravel o Node.js.

Tus respuestas están guardadas en este navegador. Puedes cerrar y volver sin perder tu progreso.

🏗️

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

— Principio de Arquitectura de Software · Clean Architecture

Tecnologías y Aplicaciones Web

Taller Práctico

¡Excelente trabajo!