Los Enredos de la Web
Una paseo por los cimientos de las aplicaciones web
Made with ❤️ by Mauricio Matias
Organizado por:
Agenda
Día 1
Día 2
Día 3
Funciones, Callbacks, Asincronía y Promesas
Protocolo HTTP, Programación de Servidor HTTP y Peticiones
Manipulación del DOM, Eventos y Reactividad
Recursos
Pueden encontrarme en:
Repositorio del taller:
¿Qué esconde una Aplicación Web?
¿Cómo se llama esta arquitectura?
Cliente - Servidor
Cliente - Servidor
Frontend
Backend
Lo que los shavos
denominan...
¿Por qué son ampliamente usadas y populares?
¿Qué esconden?
Frontend
Datos
JS
CSS
HTML
HTTP
Backend
HTTP
HTTP
Protocolo de Transferencia de Hipertexto
(Hyper Text Transfer Protocol)
Cliente
Servidor
Servidor
Cliente
Cliente
Cliente
...
some-app.com
HTTP
Modelo OSI
7. Capa de Aplicación: Interactúa con el usuario (navegadores, correo, FTP).
6. Capa de Presentación: Traduce y encripta datos (formato, compresión, cifrado).
5. Capa de Sesión: Maneja las conexiones entre aplicaciones (inicio, mantenimiento, cierre).
4. Capa de Transporte: Asegura que los datos lleguen completos y en orden (TCP/UDP).
3. Capa de Red: Decide la ruta que siguen los datos (IP, routers).
2. Capa de Enlace de Datos: Controla el envío de datos entre dispositivos conectados directamente (MAC, switches).
1. Capa Física: Transmite bits por cables o señales (ej. cables, voltajes).
Pero enfoquémonos en HTTP
REQUEST
Request
Response
Cliente
Servidor
GET: Solicita datos (leer).
POST: Envía datos (crear).
PUT: Reemplaza recurso (crear o actualizar).
PATCH: Modifica parcialmente.
DELETE: Elimina recurso.
HEAD: Solicita solo encabezados.
OPTIONS: Consulta métodos permitidos.
TRACE: Prueba de diagnóstico.
CONNECT: Establece túnel (HTTPS).
Method(s)
RESPONSE
Request
Response
Cliente
Servidor
200 OK: Éxito, la solicitud fue completada.
201 Created: Recurso creado exitosamente.
204 No Content: Éxito, pero sin contenido que devolver.
301 Moved Permanently: Redirección permanente.
302 Found: Redirección temporal.
304 Not Modified: No modificado, usa la versión en caché.
400 Bad Request: Solicitud mal formada.
401 Unauthorized: No autorizado, requiere autenticación.
403 Forbidden: Prohibido, acceso denegado.
404 Not Found: Recurso no encontrado.
405 Method Not Allowed: Método no permitido para ese recurso.
500 Internal Server Error: Error interno del servidor.
502 Bad Gateway: Puerta de enlace inválida.
503 Service Unavailable: Servicio no disponible.
Status code(s) / Status message(s)
Características de HTTP por versión
Establecimiento de Conexión
DOM
Reactivity
Make it Real
