Arquitectura Básica

Cliente/Servidor
Dr. Ismael Figueroa

ismael.figueroa@pucv.cl
http://www.inf.ucv.cl/~ifigueroa
IBC 3-23
 Resumen Historia de la Web

1994
1989 1991 1992
Navegadores: 1995
Propuesta de Protocolo HTTP, Navegador
Netscape, Opera, Javascript
Tim Berners-Lee Lenguaje HTML Mosaic
Internet Explorer

2002 2004 2008

1996 1997 1999
Navegador Navegador Navegador
XML Flash AJAX
Safari Firefox Chrome

… mucho más!!!

http://www.evolutionoftheweb.com
¿Por qué ha sido tan exitosa la web?
¿Por qué ha sido tan exitosa la web?
Probablemente debido a una combinación de los siguientes factores:

● Simplicidad: basta saber un poco de HTML y tener acceso a un servidor web.

● Tecnologías gratuitas y libres de patentes o impedimentos comerciales.

● Sirvió para satisfacer un nicho: la publicación personal de contenido.

● Universalidad de acceso: cualquier persona con acceso a Internet puede, en

principio, acceder a cualquier contenido público

● Uso progresivo de la web en actividades cotidianas: comercio, cuentas,

trámites, etc.
Página vs Sitio vs Aplicación

Páginas Web
< Sitio Web
<< Aplicación Web
Página vs Sitio vs Aplicación
Páginas Web
< Sitio Web
● Contenido estático
● Sin coherencia estética,
conceptual o de contenidos
● Contenidos ligeramente
conectados
● Básicamente un puñado de
páginas estáticas
<<
● Contenido (mayormente)
estático
● Consistencia temática, de
contenidos, y estética
● Estructura jerárquica o bien
organizada de contenidos
● Existe un diseño arquitectónico
que apunta a la fácil
mantención del sitio
Aplicación Web
● Una aplicación cliente/servidor
● Genera contenido de manera
dinámica, en base a las
peticiones y necesidades de sus
usuarios
● Diseño arquitectónico avanzado,
considera seguimiento,
seguridad, etc.
Web X.0
● Web 1.0 - La Web Estática:

○ Principalmente páginas estáticas

○ Mucho uso de framesets/iframes para inscrustar contenido

○ Raramente los contenidos se actualizaban

○ El aporte por parte de los usuarios (comentarios, etc) practicamente inexistente

● Web 2.0 - La Web Social:

○ Comienza alrededor del año 2001, con una explosión en el desarrollo de tecnologías web
http://www.oreilly.com/pub/a//web2/archive/what-is-web-20.html
○ Generación dinámica de contenido y los sitios como aplicaciones
Web X.0
● Web 3.0 - La Web de las Máquinas:

○ La característica principal es la Web como espacio universal de información

○ Esta información además debe ser “fácilmente” accesible y manipulable por software más
que por humanos

○ Esta accesibilidad usualmente es dada por Web Services, que igual se usan en Web 2.0

○ Dado lo anterior, se facilita la aplicación de técnicas de Inteligencia Computacional:

■ Análisis de textos, Twitter, Facebook, etc

■ Análisis de la red como grafo, con interacciones sociales, etc.

https://www.lifewire.com/what-is-web-3-0-3486623
○ Usualmente se asocia con la Web Semántica y sus tecnologías: RDF, SPARQL.
¿Qué entendemos por arquitectura?
Dentro de las muchas definiciones destacaremos lo siguiente:

● La arquitectura describe la estructura de un sistema

● La arquitectura forma la transición desde el análisis hacia la implementación

● Una arquitectura puede verse desde distintos puntos de vista

● La arquitectura hace que un sistema sea entendible

● La arquitectura representa un marco de trabajo flexible y adaptable al cambio

¿Qué entendemos por arquitectura?
Es fundamental distinguir entre:

● La arquitectura de la infraestructura web: servidores, routers, firewalls,

switches, balanceadores de carga, alta disponibilidad, etc.

● La arquitectura de las aplicaciones web: patrones de diseño, separación de

responsabilidades, paradigmas de programación

● Usualmente se puede mostrar una visión mixta

¿Qué entendemos por arquitectura?

Aplicación Web
“Navegadorcito”
¿Qué entendemos por arquitectura?

¿Mejor?

Client

Application
Web Server BD
Server
Componentes Generales Arquitectura Física
● Cliente: generalmente un navegador (user-agent) controlado por un usuario para
acceder a recursos web o para operar una aplicación web

● Web Server: servidor que recibe y procesa las peticiones HTTP de los clientes

● Application Server: expone la lógica de negocios a través de protocolos como HTTP u

otros. Generan dinámicamente el contenido de las aplicaciones web

● Database Server: provee persistencia y administración de datos, generalmente se usan

BD relacionales, pero tambien pueden ser “NoSQL”
Bloques Esenciales de la Web
En su mínima expresión, la web consiste 3 bloques esenciales:

● Un lenguaje de marcado para formatear documentos de hipertexto

● Una notación uniforme para acceder a recursos web en las redes

● Un protocolo para transportar mensajes a través de las redes

Markup Language / Lenguaje de Marcado
Permiten anotar un documento de
manera que las anotaciones sean
sintácticamente diferenciables del
contenido.

El lenguaje HTML es
esencialmente el estándar para los
documentos de hipertexto usados
en la web
 Direccionamiento Uniforme de Recursos
Un gran problema de la Web es cómo identificar los recursos que pueden estar en cualquier
lugar de Internet.

● URN (Universal Resource Name): solución ideal, un nombre universal para cada
recurso, independiente de servidor, puerto etc. Funciona por ejemplo en artículos
científicos -- DOI

● URL (Universal Resource Locator): índica cómo acceder a un recurso, qué protocolo
hay que usar, y dónde está.

● URI (Universal Resource Identifier): combinación de URN y URL

https://stackoverflow.com/questions/176264/what-is-the-difference-between-a-uri-a-url-and-a-urn
 Direccionamiento Uniforme de Recursos
Ejemplos:

● URN (Universal Resource Name): ???

● URL (Universal Resource Locator): ???

● URI (Universal Resource Identifier): ???

https://stackoverflow.com/questions/176264/what-is-the-difference-between-a-uri-a-url-and-a-urn
 Esquema general de sintáxis URX

scheme://host[:port]/path/.../[;url-params][?query-string][#anchor]

https://www.skorks.com/2010/05/what-every-developer-should-know-about-urls/
Esquema general de sintaxis URX

scheme://host[:port]/path/.../[;url-params][?query-string][#anchor]

● scheme: indica el protocolo a utilizar, HTTP, FTP, SSH, etc.

● host: dirección IP o nombre de dominio del servidor al que se accede

● path: ruta de acceso al recurso, relativo a la configuración del servidor

● url-params: manera poco usada para especificar parámetros

● query-string: manera archiconocida de pasar parámetros mediante pares llave/valor

El Protocolo HTTP
“Es un protocolo a nivel de las aplicaciones que es ligero y veloz permitiendo la
colaboración distribuida entre los distintos componentes de un sistema de
hipertexto o hipermedios. ” (RFC1945, 1996)

El corazón de la comunicación en la Web es el protocolo HTTP:

● Cliente/servidor o con paradigma request/response

● Stateless

● Formato simple, en texto plano, legible por humanos y máquinas

Comunicación mediante HTTP
HTTP Request

Recursos

HTTP Response
Comunicación mediante HTTP
GET www.inf.ucv.cl

Recursos

HTTP/1.1 200 OK
HTTP Request - Esquema General

METHOD /path-to-resource HTTP/version-number

Header-Name-1: value1
Header-Name2: value2

[optional request body]

HTTP Request - Ejemplo
GET http://www.inf.ucv.cl/

Upgrade-Insecure-Requests: 1
X-DevTools-Emulate-Network-Conditions-Client-Id: d3cdde31-8869-4df9-95f1-b7aaa8801565
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/60.0.3112.101 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: es-419,es;q=0.8,en;q=0.6,gl;q=0.4
Cookie: PHPSESSID=a8r0a8usadtvs3q2u3ddpai7n2;
HTTP Request - Ejemplo
GET / HTTP/1.1

Host: www.inf.ucv.cl
Upgrade-Insecure-Requests: 1
X-DevTools-Emulate-Network-Conditions-Client-Id: d3cdde31-8869-4df9-95f1-b7aaa8801565
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/60.0.3112.101 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: es-419,es;q=0.8,en;q=0.6,gl;q=0.4
Cookie: PHPSESSID=a8r0a8usadtvs3q2u3ddpai7n2;
 Métodos HTTP para los Requests
Los métodos de request permiten diferenciar distintos tipos de mensajes, con
restricciones o características particulares, para que el servidor web y los clientes
puedan diferenciar lo que se busca hacer. Los métodos más comunes:

● GET: el método más simple y usado, solicita un recurso. En general no tiene

“cuerpo”. Generalmente se parametriza mediante el query string

● POST: también solicita un recurso, pero a diferencia de GET, tiene un

“cuerpo”. Generalmente se usa para someter formularios, donde los valores
de los campos van el en cuerpo.
Una misma URL puede responder de forma diferente según el método usado!!
HTTP Response - Esquema General

HTTP/version-number status-code explanation HTTP/version-number

Header-Name-1: value1
Header-Name2: value2

[response body]
HTTP Response - Ejemplo
HTTP/1.1 200 OK
Cache-Control:max-age=0, no-cache, no-store, must-revalidate
Connection:close
Content-Encoding:gzip
Content-Length:13533
Content-Type:text/html; charset=UTF-8
Date:Sat, 19 Aug 2017 00:27:38 GMT
Server:Apache/2.2.15 (CentOS)

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="es"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="google-site-verification" content="yAcvfuRWPXQRUBEISVsNdJBFCpt6Jg1su76n3OK0Noc"/>

<!-- Mobile viewport optimized: h5bp.com/viewport -->

<meta name="viewport" content="width=device-width, initial-scale=1"/>

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Códigos de Status para las Responses
El código de status en las respuestas indica al cliente qué paso con la petición:

● 1XX: status informativo

● 2XX: indican operaciones exitosas

● 3XX: indican redirecciones o acciones adicionales que el cliente debe hacer

● 4XX: representan errores en el request, o sea, culpa del cliente

● 5XX: representan errores en el servidor

Headers

Los encabezados o headers son un sistema de metadatos para comunicación

entre el cliente y el servidor. Son pares llave/valor con formato:

Header-name: value

Se usan tanto en los requests como en las responses, aunque hay algunos que
sólo tienen sentido al ser enviados por el cliente, o en una respuesta del servidor.
Headers Generales
● Date: especifica la fecha y hora en que el mensaje fue creado

● Connection: indica si el cliente o servidor desea mantener viva la conexión

● Warning: se utiliza para emitir texto que debiera ser revisado por humanos,
ante potenciales problemas
Headers solo en Requests
● User-Agent: identifica el software, usualmente el navegador, usado para
generar el request

● Referer: indica “de donde provino el acceso” a la URL

● Authorization: se utiliza para solicitar recursos protegidos

Headers solo en Responses
● Location:en caso de redirecciones, indica la nueva URL a la que debiera
dirigirse el cliente

● WWW-Authenticate: ante un acceso no autorizado a un recurso, este header

específica que es necesario autentificarse y ahí se podrá acceder

● Server: identifica el software utilizado en el servidor

Headers / Content-Types
● Content-Encoding: especifica el formato comprimido en el que se envía un
recurso, por ejemplo: gzip, compress, deflate.

● Content-Type: especifica el contenido del documento en función de una

jerarquía de tipos/subtipos, por ejemplo: text/html, application/pdf, etc.
Headers / Otros
● Control de cache: indica si el recurso puede ser puesto en cache, su
duración/expiración, etc.

● Autentificación: el servidor puede establecer un desafío de autentificación,

típicamente un password. Si no se usa HTTPS, el password se envía
codificado pero no encriptado---muy inseguro!

● Manejo de Cookies: indica si el cliente debe setear cookies, o bien, el cliente

envía cookies a un servidor.
Actividad 1
Implemente en Python un servidor web minimalista:

● Debe usar sockets

● Debe escuchar peticiones en el puerto 9100

● Debe responder sólo a método GET

● Debe enviar recursos en una carpeta predefinida

○ Si no existe el recurso pedido retornar status 404

○ Si el recurso existe, retorna status 200 y además el recurso

● Debe procesar la URL y obtener todos los parámetros