Cliente-Servidor

y protocolo HTTP

Entendiendo los fundamentos de la web

Una introducción

¿Qué es el modelo cliente-servidor?

👨‍🍳

Servidor

(el que ofrece el servicio)

⟷

🧑‍💻

Cliente

(el que solicita el servicio)

🍽️ Cliente = comensal (pide el plato)
👨‍🍳 Servidor = cocinero (prepara y entrega)
📝 Petición = el pedido (menú)
📦 Respuesta = el plato servido

Frontend vs Backend

El frontend es lo que ves, el backend es lo que hace funcionar todo.

🖥️ Frontend

(Presentación)
HTML, CSS, JavaScript

Interfaz de usuario

⚙️ Backend

Capa de lógica de negocio

Capa de acceso a datos

(Aquí trabajan frameworks como Spring, Django, Express…)

🗄️ Base de Datos

MySQL, PostgreSQL, MongoDB…

Almacenamiento persistente

✅ El frontend se comunica con el backend a través de HTTP.

¿Qué es una URL?

Localizador Uniforme de Recursos. Es la dirección de un recurso en la web.

          https://
          ejemplo.com
          :8080
          /api/usuarios
          ?id=5&activo=true
          #perfil
        

https:// → Protocolo (HTTP seguro)
ejemplo.com → Dominio (nombre del servidor)
:8080 → Puerto (opcional, por defecto 80 para HTTP, 443 para HTTPS)
/api/usuarios → Path (ruta al recurso)
?id=5&activo=true → Parámetros de consulta (opcionales)
#perfil → Anchor (ancla dentro del documento)

Path y Endpoint

📂 Path

La ruta específica dentro del servidor.

/productos
/usuarios/123
/api/v1/pedidos

🎯 Endpoint

Un path combinado con un verbo HTTP.
Representa una acción concreta.

GET    /usuarios      → listar
POST   /usuarios      → crear
PUT    /usuarios/123  → actualizar
DELETE /usuarios/123  → eliminar

📌 En los frameworks, los endpoints se definen con rutas y métodos.

HTTP: Request y Response

📤 Request (Petición)

Método (GET, POST, …)
URL (path + query)
Cabeceras (headers): metadatos (tipo de contenido, autenticación, etc.)
Cuerpo (body): datos enviados (en POST, PUT, PATCH)

📥 Response (Respuesta)

Código de estado (200, 404, 500, …)
Cabeceras (headers): información adicional
Cuerpo (body): datos devueltos (HTML, JSON, etc.)

Imagen: Cabeceras HTTP- Autor: Seobility - Licencia: CC BY-SA 4.0

💡 Ejemplo de petición GET (sin cuerpo) y respuesta JSON

GET /api/usuarios/5 HTTP/1.1
Host: ejemplo.com
Authorization: Bearer xyz123

HTTP/1.1 200 OK
Content-Type: application/json

{
  "id": 5,
  "nombre": "Ana",
  "email": "ana@mail.com"
}

Verbos HTTP más utilizados

GET

Obtener un recurso (sin modificar).

POST

Crear un nuevo recurso.

PUT

Reemplazar completamente un recurso existente.

PATCH

Actualizar parcialmente un recurso.

DELETE

Eliminar un recurso.

🔹 Cada verbo tiene un significado semántico que los frameworks aprovechan.

Códigos de estado HTTP

El servidor responde con un número que indica el resultado de la operación.

2xx - Éxito

200 OK - Todo bien
201 Created - Recurso creado
204 No Content - Éxito sin contenido

3xx - Redirección

301 Moved Permanently - Recurso movido
302 Found - Redirección temporal

4xx - Error del cliente

400 Bad Request - Petición mal formada
401 Unauthorized - No autenticado
403 Forbidden - Sin permiso
404 Not Found - Recurso no existe

5xx - Error del servidor

500 Internal Server Error - Fallo genérico
503 Service Unavailable - Servidor caído

📌 Los códigos ayudan a diagnosticar problemas rápidamente.

¿Y todo esto con frameworks?

Spring (Java) Django / Flask / FastAPI (Python) Express (Node.js) PHP (Laravel, Symfony) Apache / Nginx (servidores)

✅ Todos entienden HTTP y manejan peticiones/respuestas.
✅ Definen rutas (paths) y las asocian a verbos.
✅ Procesan parámetros, cuerpos y generan respuestas (HTML, JSON, etc.).
✅ Se conectan a bases de datos a través de capas de acceso a datos (ORM, etc.).

💡 Conclusión: Aprender el modelo cliente-servidor y HTTP es la base para dominar cualquier framework backend.

Recapitulemos

📡 Cliente-Servidor: el cliente pide, el servidor responde.
🧩 Frontend (presentación) vs Backend (lógica + datos).
🔗 URL: protocolo, dominio, puerto, path, query, anchor.
🔄 HTTP: petición (método, cabeceras, cuerpo) y respuesta (código, cabeceras, cuerpo).
📌 Verbos: GET, POST, PUT, DELETE, PATCH.
📊 Códigos: 2xx (éxito), 3xx (redir), 4xx (error cliente), 5xx (error servidor).

🚀 ¡Con esto ya tienen las bases para empezar a crear sus propias APIs y WebApps!

🙋 Preguntas

¿Dudas? ¡Estamos aquí para resolverlas!

CC BY-NC-SA Esta obra está bajo una Licencia Creative Commons.

Presentación creada con ❤️ y reveal.js