La Arquitectura de las Aplicaciones de Internet

The Architecture of Internet
Applications

Prof. Juan Quemada
UPM

Friday, March 4, 2011

El Modelo Cliente - Servidor
Conexión

 Programación de aplicaciones distribuidas en TCP/IP
4Clientes: dan acceso a los servicios
4Servidores: proveen datos, información, servicios, ...
• Son públicos (dirección fija y conocida: URL, ..)

 Cliente y Servidor son roles en una aplicación
4Un ordenador puede ser cliente y servidor simultaneamente


Servicios TCP-UDP/IP
 Servicio TCP
4Servicio fiable orientado a conexión
• Denominado también de “circuitos virtuales”

 Servicio UDP
4Servicio no fiable de envío de datagramas (paquetes)
• Puede haber perdida, desorden o duplicación de datagramas
4Denominado también servicio “sin conexión” (connectionless)


Dirección de Máquina Ordenador
(host)
y de Aplicación dir. puerto 0
IP ... Aplic. 1
...
red puerto n
...
...
 Dirección IP (o de red): Aplic. 2

4identifica una máquina (host)
• 192.2.3.122, 98.8.77.66, ...
• dit.upm.es, google.com, ..
• “localhost” (mi maquina): 127.0.0.1
 Puerto: dirección de aplicación
4Tienen 16 bits de longitud
• Los servidores usan direcciones prefijadas
– HTTP: puerto 80
– Daytime: puerto 13


Arquitectura TCP/IP

5


Circuitos Virtuales y Sockets TCP
Conexión (circuito virtual)

 Socket TCP: transporte fiable de datos
4orientado a conexión
• Las conexiones se denominan tambien circuitos virtuales

 Cada circuito transporta datos de forma fiable
4Envía flujos de datos, streams de bytes
4Garantiza la entrega
• pero no un plazo de entrega
4Imposibilidad de entregar los datos
• provoca la liberación del circuito


Puertos y Servidores
 Cada “puerto” se asigna a un servidor
4Una misma maquina puede albergar varios servidores
• En puertos diferentes
 Los clientes tambien utilizan “puertos”
4Se suelen asociar solo para un acceso al servidor

máquina máquina
de cliente servidora
puerto 0 puerto 0
... dir. progr.
... IP2 ... serv. l
...
... red puerto n
cliente ... ...
dir.
m ... progr.
IP1
serv. n


Sockets TCP de servidor y cliente


 Existen 2 tipos de sockets
4Socket de servidor
• Espera solicitudes de establecimiento de conexión
– Las acepta cuando llegan si tiene recursos
4Socket de cliente
• Gestiona la conexión, tanto en el cliente, como en el servidor

 Un servidor acepta múltiples conexiones
4Una para cada cliente que se conecte
• Cada conexión posee una cola de información independiente


Las aplicaciones de Internet


Las Aplicaciones de Internet
Las aplicaciones son el motor del tráfico de Internet:
 Las mas usadas: Web (23%), P2P (23%) y Video (51%)
El mayor incremento de tráfico actual se debe al
 Video IP: YouTube, streaming, IP TV, …
 Tráfico P2P y el Web estan perdiendo peso en el porcentaje global, aunque no importancia


Las primeras aplicaciones de Internet
El éxito de Internet se debe a sus aplicaciones

El carácter abierto de Internet produjo nuevas aplicaciones
 Los usuarios las creaban extendiendo aplicaciones existentes
 e-mail: Evolución de mensajería entre usuarios de “mainfarmes”
 FTP (Transferencia de Ficheros): Evolución de COPY
 Otros:
 Terminal Virtual, News, Gopher (pre–Web), ….

Los S.O. de entonces eran orientados a comando

Intercambian datos en ASCII (o ristras de octetos)
 Son legibles y fáciles de procesar
 pero la compresión no es óptima
11


Correo electrónico

Correo electrónico (email)
Primer motor de uso de Internet
Todavía es una de las aplicaciones más utilizadas

Envía un mensaje electrónico entre dos buzones
 Dirección de buzón/usuario: “javier@dit.upm.es”

Protocolo SMTP (Simple Mail Trans. Prot., RFC821)
 Con el tiempo surgen otros protocolos: POP3, IMAP, ...

12


Ejemplo de mensaje
Formato de mensaje definido en RFC 822 (1982)
 Solo permite texto ASCII en Cabecera y Cuerpo
 Línea en blanco: separa Cabecera de Cuerpo

Asunto: Se han integrado los tuneles
De: Enrique Lopez <el@dit.upm.es>
Fecha: Tue, 11 Sep 2007 10:49:08 +0200
Para: jquemada@dit.upm.es, ....
Message-ID: <46E65684.9010901@dit.upm.es>
Agente de usuario:: Thunderbird 1.5.0.13 (X11/20070824)
…….
Content-Length: 532

Hola a todos:

Esta mañana he terminado de integrar ……………
..........
Un saludo
Enrique


MIME
MIME (Multipurpose Internet Mail Extensions)
 Mensajes como acarreadores de contenidos
 Múltiples formatos: texto, imágenes, aplicaciones, …
 Contenidos no-ASCII se encapsulan y se trans-codifican en
 hexadecimal, uuencode, base 64, …

Definido en RFCs 2045-6, 2077, 3023, ….
 http://www.iana.org/assignments/media-types/

El uso de MIME se ha extendido a otros ámbitos:
 HTTP y Web, S.O., ...

14


Extensiónes MIME
MIME introduce 5 nuevos campos en un mensaje
 MIME-Version: indica la versión MIME utilizada
 Ejemplo: “MIME-Version: 1.0” (acorde RFC1521)
 Content-Type: indica el tipo de contenido acarreado
 Ejemplo: “Content-Type: text/html”
 Content-Transfer-Encoding: de octetos a ASCII
 Códigos típicos: hexadecimal, uuencode, base 64, …
 Ejemplo: “Content-Transfer-Encoding: base64”
 Content-ID: identificador único en la red
Ejemplo: “Content-ID: <id23457689@gilito.lab.dit.upm.es>”
 Content-Description: texto descriptivo
 Ejemplo: “Content-Description: Pagina de prueba del servicio”


Tipos de contenidos MIME
Campo Content-Type
 Tiene dos partes: tipo / subtipo
Tipos:
 “application”, “audio”, “image”, “message”, “model”, “multipart”, “text”, “video”,
extension-token
 IANA coordina la definicion de nuevos tipos/subtipos
 http://www.iana.org/assignments/media-types/

Ejemplos:
 image/gif, image/jpeg, image/png, ...
 text/plain, text/html, message/rfc822, ......
 application/postcript, application/msword,
application/x-www-form-urlencoded, multipart/form-data, ...


Ejemplo de mensaje
Asunto: Se han integrado los tuneles
De: Enrique Lopez <el@dit.upm.es>
Fecha: Tue, 11 Sep 2007 10:49:08 +0200
Para: jquemada@dit.upm.es, ....
Message-ID: <46E65684.9010901@dit.upm.es>
Agente de usuario:: Thunderbird 1.5.0.13 (X11/20070824)
MIME-Version: 1.0
Content-Type: text/plain; charset="iso-8859-1"
Content-Transfer-Encoding: 8bit
…….
Content-Length: 532

Hola a todos:

Esta mañana he terminado de integrar ……………
..........
Un saludo
Enrique


Los 90: El Web
Inventado/propuesto por Tim Berners Lee (1989)

Es el almacén de contenidos que la red necesitaba
 Crece incesantemente hasta convertirse en
 el mayor repositorio de información que haya existido nunca

Es un Servicio “Abierto”, “Escalable” y “Descentralizado” para
 Publicación de documentos “hypertexto” en la red
 Alta usabilidad: “se navega haciendo click en enlaces”

Permite modelar las relaciones sociales
 Es un universo de mundos interconectados
 Cada página es el comienzo de un mundo
 El dueño (autor) publica y enlaza con otras páginas libremente

18


Navegación Web: URLs, HTTP y HTML
Servidor Web
Cliente Web

HTTP (URL)

Cliente
Solicita pag.
HTTP - GET PaginaWeb.html HTTP 1.1
con click en
hiperenlace
Servidor
envía pag.
Web a
cliente.

El cliente
recibe <PaginaWeb.html>
y presenta
página HTML
en Visor..

Cada página HTML se identifica por un URL, por ejemplo http://mail.google.com/PaginaWeb.html


Los componentes del primer Web
URI (URL)
 Dirección en la red de un documento o recurso
 Ejemplo: http://www.upm.es/centros/etsit/personal.html
 Los hiperenlaces modelan
 Relaciones o interacciones entre personas, información, empresas, …
 ¡¡Todo recurso Web posee un URL que lo identifica!!

HTML
 Lenguaje abierto de
 descripción de documentos hipermedia, formularios, …
 ¡¡Permite navegación Web muy sencilla!!

HTTP
 Protocolo transaccional genérico
 Protocolo sin estado (Stateless) -> ¡¡Servidores y servicio escalables!!

20


Evolución: Aplicaciones Web
Aplicaciones de servidor
 El Web permite acceso remoto a aplicaciones interactivas
 Consulta y actualización de bases de datos

HTTP (URL)

Aplicaciones de cliente HTML, XML, ..

 HTML no es suficiente
 Hay que mejorar la experiencia de usuario (velocidad, interactividad)
 Aparecen: CSS, Javascript, XML, AJAX, ....

“RIA: Rich Internet Applications” (Flex)
 Arquitecturas de objetos distribuidos (nuevo paradigma)

21


El
Web
• En
1989
Tim
Berners
Lee
comienza
el
desarrollo
del
Web
– Nivel
que
permite
construir
aplicaciones
• Se
convierte
en
el
interfaz
universal
de
acceso
a
aplicaciones


Clientes Web: Visor o Navegador
Programa de acceso al Web
 Mucha funcionalidad y complejidad
 Presentan HTML, XML o CSS, ejecutan Javascript, ....
 Se estan convirtiendo en S.O.
 Ejemplos: Explorer, Firefox, Chrome, Safari, Opera, …

23


Servidor Web
Gestor de recursos Web con HTTP
 Deben ofrecer servicios escalables que atiendan muchos usuarios
 Servicios en la nube (cloud-computing)
 Google, Apple o Amazón tienen granjas de miles de servidores
 Servicios en Ruby on Rails, Java Restlet, PHP Symphony, .....
 Ejemplos: Apache, Tomcat, Microsoft IIS, …

24


Cloud
Compu)ng
(Computación
en
la
Nube)

 Paradigma
emergente
de
creación
de
servicios

escalables,
ﬁables,
……
y
baratos
– Con acceso ubicuo y global a través de Web
– Minimiza costes con componentes baratos
– Utilizando tecnologías de virtualización

 Las
grandes
empresas
de
Internet
uClizan
“Cloud

CompuCng”
y
suelen
revenderlo
como
servicio:
 Amazon, Google, Facebook, Yahoo, Youtube, …


Amazon
Cloud
Compu-ng
Services

• La
Nube
permite
crear
servicios

virtualizados
– Pago
por
uso,
sin
inversión
inicial
• Solo
3ene
costes
variables

– Accesible
con
interfaz
Web
Services

• Amazón
Web
Services
– Plataformas
virtualizadas:
• Servidores,
computo,
bases
de
datos,
…

– Oferta
variada:

• S3,
EC2,
SQS,
RDS,
Elas3c
Map-‐Reduce,
….


Mobile
Internet
Compu2ng


Terminales:
evolución


Los componentes del Web:
Resources, URL, HTML, CSS,
Javascript, HTTP, ...


Recursos y URLs
Un recurso es cualquier cosa en Internet que “merezca la
pena ser referenciada por si misma”
Un fichero, un mapa, un libro, una foto, un video, una base de
datos, …..

Cada recurso se identifica con un URI
 El URI identifica y da acceso al recurso (HTTP)
 El URI define también el formato del recurso

Un recurso debe tener un formato “conocido”
 Texto ASCII, HTML, XML, JSON, ….


URL: ejemplos

<prot>:<//><authority>/<path>?<query>#<frag>
<authority> = <UserInfo@><host><:port>

prot: protocolo o esquema de acceso: http:, mailto:, ftp:, telnet:, ..
authority: identificación de servidor (host), puerto (port) y usuario
Dirección de correo electrónico: mailto:jesus@dit.upm.es
URLs Web con dominio o IP: http://dit.upm.es, http://138.15.12.223:8080

path: identificación de recurso (dentro el servidor)
URL Web: http://www.bb.es/archivo/doc1.html
URL de fichero: file:///usr/lib/registro.txt

query: Define valores de parámetros en formularios
URL Web: http://www.bb.es/foto?nombre=Paco&apellido=Perez

frag: sección de un recurso (se denomina también: anchor, fragment, ref, …)
URL Web: http://www.bb.es/archivo/doc1.html#seccion


Identificación de recursos
URI: Identificador de recurso uniforme
 Uniformiza el acceso a cualquier recurso de Internet
 Definido en: RFC 2396 (98), RFC 2732 (99) y RFC 3986 (05)
 T. Berners-Lee, R. Fielding, L. Masinter, B. Carpenter
 http://www.faqs.org/rfcs/rfc2396.html

 http://www.faqs.org/rfcs/rfc3986.html

Tipos de URI
 URL: Uniform Resource Locator
 Localiza un recurso unívocamente en un lugar físico de la red
 Lugar físico: Recurso en un “host” de Internet
 URN: Uniform Resource Name
 Nombre de un recurso, independiente de posición
 Se definió en la norma, pero se utiliza escasamente


Plataforma HTML o (HTML5)
Tecnologías de cliente para “Web as platform”
 Paradigma de aplicaciones desplegadas desde un servidor
 Soportadas en visores Web: IE, Firefox, Safari, Chrome, ......

Tecnologías mas importantes
 HTML(HyperText Markup Language), HTML5
 Lenguaje de marcado de texto para definir su estructura
 CSS (Cascading Style Sheets)
 Lenguaje de definición de presentación visual
 Javascript
 Lenguaje de programación de aplicaciones de cliente

33


Lenguaje de Marcado HTML
Lenguaje de marcado:
 Define la estructura de un documento con marcas de texto

SGML (Standard Generalized Markup Language)
 Utilizado por la industria editorial: Norma ISO 8879:1986

HTML (HyperText Markup Language)
 Documentos Web con hiperenlaces, derivado de SGML

 Evolución de HTML

 IETF publica: HTML (1993) y HTML2 (1995)
 W3C publica: HTML3.2 y 4.0 en 1997 y HTML 4.01 en 1999
 Se promueve XHTML hasta 2008

 W3C estima: HTML5 en 2012 (candidate rec.) y 2022 (prop. rec.)
 Tutorial:

 http://www.dit.upm.es/~santiago/docencia/master/web/web.html
 http://www.w3schools.com/html/

34


Marcado HTML
Las marcas delimitan el principio y fin de un elemento:
 <TITLE> Titulo .. </TITLE>

 <H1> Cabecera nivel 1 </H1>, ...

Las marcas pueden llevar atributos
 <A HREF="http://www.dit.upm.es"> Dept. Ing. Telemática</A>

Algunas marcas de HTML pueden omitir el terminador
 <P> indica separador de párrafo en HTML

 En XML, XHTML
 el terminador es obligatorio </P>
 o se puede utilizar una marca con sintaxis especial <P />

Algunos tutoriales
 http://www.dit.upm.es/~santiago/docencia/master/web/web.html
 http://www.w3schools.com/html/
 http://www.html.net/tutorials/html/


Ejemplo de pagina HTML
<HTML>
<HEAD><TITLE>Ejemplo página HTML</TITLE></HEAD>

<BODY> 

<H1> Ejemplo de Cabecera </H1>

Acceda al <A HREF="http://www.w3schools.com/html/">
tutorial de HTML de W3C Schools</A>. <p>

A continuación aparece una lista y una tabla

<UL id="lista" >
<LI> elemento <FONT COLOR=red>rojo</FONT> </LI>
<LI> elemento <STRONG>en negrita</STRONG> </LI>
<LI> elemento <SUB>con subíndice</SUB> </LI>
</UL>

<TABLE BORDER id="tabla">
<TR> <TD>Primera celda <br> de la tabla</TD>
<TD><IMG SRC="iconos.gif"></TD> </TR>
<TR> <TD>Celda 21</TD> <TD>Celda 22</TD> </TR>
</TABLE>

</BODY>
</HTML>

Elementos HTML del ejemplo
<HTML>: declaración de página HTML
<HEAD>: cabecera no visible
<BODY>: cuerpo visible
<H1>: titulo de nivel 1
 Sub-niveles: <H2>, <H3>, …
<A HREF="http://....>: hipervínculo
 El URL va en el atributo HREF
<P> párrafo El ejemplo ilustra
 Ejemplo de atributo: ALIGN=“center”
<UL>: lista no numerada Texto
<OL>: lista numerada
<LI>: elemento de lista <OL> o <UL> Enlaces
<DL> Lista definida: Listas
 Tipo de elemento <dt> .... </dt>
 Definición de elemento <dd> ... </dd> Tablas
<.... id=“referencia”> fragment
 referencia a este elemento en URL como: #referencia Se pueden encontrar mas
<FONT>: tipo de fuente detalles sobre HTML o
<STRONG>: resaltar, mas fuerte que el resto
 Otros: <SMALL>, <BIG>, <TT>, <Q>, .. XHTML en el Tutorial.
<SUB>: subíndice
Superíndice: <SUP> Forms y objetos (ejecutables)
<TABLE BORDER>: definicion de tabla con borde
de ven más adelante. No se
 BORDER es un atributo opcional
<TR>: fila de tabla recomienda usar Frames.
<TD>: celda de tabla
<IMG src=”URL”>: imagen
 El URL de la imagen va en el atributo SRC


Árbol sintáctico del ejemplo
Árbol sintactico:
 Árbol definido por anidamientos de marcas
 Cada bloque (<..> …. <..>) es un sub-arbol
 3 tipos principales de nodos:
 elemento: amarillo
 atributo: rosa
 texto: blanco

HTML

HEAD BODY

Acceda A cont. .....
TITLE H1 <!– --!> A . P una lista y UL TABLE
al una tabla

Ejemplo Tutorial de
página
Ejemplo de Esto es un HREF= HTML de W3C
LI LI LI BORDER TR TR
cabecera comentario http://ww ..” Schools
HTML

elemento FONT elemento STRONG elemento SUB TD TD TD TD

COLOR en con Primera de la Celda Celda
rojo BR IMG
=”red” negrita subíndice celda tabla 21 22

SRC=
“Icono.gif”


Representación en arbol de HTML
Un marcado HTML bien construido genera un arbol sintactico
 Es utilizado por programas y herramientas para procesar HTML
 Javascript: lenguaje para procesar paginas Web en HTML
 CSS: lenguaje de visualización “bonita” de páginas HTML

Un marcado bien construido debe anidar unas marcas dentro de otras
 Preservando la estructura de arbol
 Ejemplo de marcado correcto:
 <H1> El <EM> Titulo </EM> es lo mas <B> importante </B> </H1>

 Nunca deben solapse
 Ejemplo de marcado erróneo:
 <H1> El <EM> Titulo </EM> es lo mas <B> importante </H1> </B>

DOM: Document Object Model
 API Javascript para acceder al arbol sintáctico de HTML


Javascript


Javascript
Javascript
 Lenguaje por excelencia de aplicaciones de cliente

 Sintaxis muy similar a Java

 Pero la semantica es diferente
 Nombre:

 inicialmente “LifeScript”, pasó a “JavaScript” al triunfar Java

Lenguaje de scripting integrado en código HTML
 Diseñado para ser ejecutado en el visor Web

 Interprete analiza el código fuente Javascript
 Si es correcto lo ejecuta, sinó genera una excepción

Tutoriales
 http://wwwwww.dit.upm.es/~santiago/docencia/master/web/web.html
 http://www.w3schools.com/js/, http://www.w3schools.com/jsref/


Ejemplo Javascript: Factorial
<html>
<head><title> Ejemplo 1 Javascript</title></head>

<body>
<h2> Tabla de Factorial </h2>





<script>
var fact = 1; // Define variable fact y asigna el entero 1

for(i = 1; i < 10; i++) { // bucle for similar a Java
fact = fact*i; // calcula el factorial iterativamente
document.write(i + "! = " + fact + "<br />") ;
// Inserta string (argumento) en codigo HTML
// Transformación automatica de enter (i, fact) a string
}
</script>

</body>
</html>

Ejemplo Javascript: Fecha

<html>
<head><title> Hora y Fecha</title>
</head>

<body>
<h1>The date and time are:</h1>

<script language="JavaScript">
document.write(new Date( )); // Date(): objeto predefinido
// al crearlo se inicializa con fecha y hora actual
</script>

</body>
</html>


HTML5


XML y XHTML
1999: HTML deja de actualizarse por W3C
 W3C promueve XHTML (redefinición de HTML en XML)

 Sustitución muy compleja -> no aceptada por usuarios
 XHTML tiene demasiadas variantes:
 transitional, frameset, strict, basic, .......

Aparecen tecnologías propietarias para nuevas aplicaciones
 Adobe Flash

 para Webs dinámicas
 con gráficos bonitos
 para video

Se consolida plataforma HTML
 Javascript, CSS, XML, JSON, ...


HTML5
2004: Desarradores de “Browsers” crean WHATWG
 Para definir nueva versión de HTML: HTML5

 Debido a la no actualización de HTML en W3C

Objetivo HTML5: Desarrollo de nueva versión de HTML para
 aplicaciones Web actuales y futuras

2008: W3C finaliza actividad en XHTML 2
 Debido a rechazo de fabricantes de browsers

2008: W3C confluye con WHATWG y HTML5
 Publica “Working Draft” de HTML5 en W3C

Calendario de HTML5
 2012: Candidate Recommendation

 2022: Proposed Recommendation


Características HTML5
HTML5: Primera revisión de HTML en una década
 Para diseñar las aplicaciones Web mas avanzadas

 video, redes sociales, móviles, juegos, gráficos, 3D, ..
 Sustituira a: HTML4, XHTML1.0 y DOM2-HTML

 http://www.w3schools.com/html5/
 http://diveintohtml5.org/table-of-contents.html
 http://www.w3.org/TR/html5/

Soporte a HTML5 debe preceder a las normas (y validarlas)
 Alto soporte en Firefox, Safari, Chrome, Opera, IE, ..
 http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29

HTML4 Polyglot
 Subconjunto compatible con HTML y XHTML (transicional)


Plataforma HTML5: principales novedades
Paginas Web bien estructuradas

Formularios muy enriquecidos

Gráficos vectoriales

Formulas matematicas

CANVAS para juegos y animaciones

Geolocalicación y sensores

Video y audio nativo

Almacenamiento de datos local y en BD

Web & Offline Web workers

.......


Plataforma HTML5
HTML5: se diseño como plataforma en WHATWG
 Incluyendo todos los componentes

 marcas HTML, APIs Javascript y comandos CSS
 Partes iniciales de HTML5 son ahora normas separadas

 Almacenamiento local (Local storage)
 Web Sockets
 Geolocation
 SVG
 MathML
 HttpXMLRequest Level 2
 microdatos
 ......
Plataforma HTML5
 Todo lo necesario para crear nuevas aplicaciones sin plugins

 Paradigma “Web as Platform”:


*From Peter Lubers, Kaazing: HTML5 The 30,000’ View, http://www.slideshare.net/peterlubbers/html5-4378635


Listado de marcas de HTML5 incluyendo las nuevas y las deprecadas:
por Antonio Lupetti http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet.pdf


HTTP


Metodos de HTTP
Métodos mas utilizados
 GET: Pedir un fichero al servidor
 Se invoca desde HTML
 HEAD: Pedir la cabecera de un fichero al servidor

 POST: Enviar un formulario al servidor

 Se invoca desde HTML
 PUT: Cargar un recurso en el servidor

 DELETE: Borrar un recurso del servidor

Otros métodos
 OPTIONS: Determinar que métodos acepta un servidor

 TRACE: Trazar mensaje a través de proxies hasta el servidor

 CONNECT: Conectar a un servidor a través de un proxy


Transacción HTTP GET
Acceso a página Web -> http://scom.dit.upm.es/index.html

GET /index.html HTTP/1.0
Accept: text/html, text/plain, image/gif, image/jpeg
User-Agent: Netscape-Navigator/4.03
// linea en blanco indica final de cabecera
// POST y PUT pueden llevar cuerpo

HTTP/1.0 200 OK
Server: NCSA/1.2.3
Content-type: text/html
Content-length: 608 // tamaño cuerpo en bytes
// linea en blanco hace de separador entre cabecera y cuerpo pregunta
<html>
....... // fichero html
</html>


Formato de cabeceras HTTP GET
Acceso a página Web -> http://scom.dit.upm.es/lib/ej.html

1) Solicitud del Cliente

Comienzo GET /lib/ej.html HTTP/1.1 Comando, camino-recurso, versión-HTTP
Host: scom.dit.upm.es
Accept: text/*, image/* Sentencias de cabecera:
Cabecera
Accept-language: en, sp dan información al servidor
User-Agent: Mozilla/5.0 (WinNT)

Cuerpo
GET no incluye cuerpo en la solicitud

2) Respuesta del Servidor: scom.dit.upm.es

Comienzo HTTP/1.1 200 OK Versión-HTTP, resultado, frase-adicional
Server: Apache/1.3.6 (Unix) Sentencias de cabecera:
Cabecera Content-type: text/html, … dan información al cliente
Content-length: 608

Cuerpo <html> …….. </html> Cuerpo con fichero HTML


Cabeceras HTTP POST
<FORM METHOD=post ACTION="http://scom.dit.upm.es/cgi-bin/aut">

1) Solicitud del Cliente
POST cgi-bin/aut HTTP/1.1
Comienzo Host: scom.dit.upm.es
Accept: text/*, imag/gif, image/jpeg, imag/png
Accept-language: en, sp
Cabecera User-Agent: Mozilla/5.0 (WinNT)
Content-type: application/x-www-form-urlencoded
Content-length: 30

Cuerpo color=blue&msg=Deje+su+mensaje

2) Respuesta del Servidor: scom.dit.upm.es
HTTP/1.1 200 OK
Server: Apache/1.3.6 (Unix)
Comienzo
MIME-version: 1.0
Content-type: text/html, …
Cabecera Last-modified: Wed, 14-Mar-95 18:15:23 GMT
Content-length: 608

Cuerpo <html> …….. </html>


Figura tomada de “HTTP: The Definite Guide” de D. Gourley & B. Toty


Carga de una página típica
Un pagina (X)HTML contiene habitualmente otros objetos que se
cargan en transacciones separadas.
 Conexiones persistentes y transacciones concurrentes aceleran mucho la
descarga de la página completa

Pagina Objetos asociados


Conexión persistente y en paralelo
La conexión TCP en HTTP 1.1 es persistente
 Queda establecida al finalizar una transacción
 Hasta que cliente o servidor solicitan el cierre con
 Connection: close
 Permite múltiples transacciones con una única conexión TCP
Las conexiones HTTP 1.0 no son persistentes
Se puede mantener la conexión TCP establecida con
 Connection: keep-alive

HTTP 1.1 permite transacciones en paralelo (pipelined)
 Una transacción puede comenzar sin que finalice la anterior
 La finalización de las transacciones debe seguir el orden de comienzo
 Aumenta mucho la velocidad de carga de páginas Web


Ejercicio aplicación-2
• Installar Mozilla Firefox y añadirle el Add-On “Live HTTP
Header” que permite ver las cabeceras HTTP intercambiadas
con un servidor.
 Acceder a un servidor e interpretar las cabeceras intercambiadas.
• Hacer un telnet al puerto 80 y simular comandos HTTP
introduciendolos a través del teclado
 > telnet <host> <port> ....


Rest: Restful Web Services


Índice
REST o WS
Principios de REST
 Direccionabilidad
 Interfaz uniforme
 Sin estado
 Representación abierta
 Hipertexto
Conclusiones


Servicios o Recursos


Que es REST


REST: Principios


Interfaz uniforme


Ejemplo: Amazon S3
Servicio de almacenamiento de objetos: “Disco Virtual”
Arquitectura Cloud Computing
http://aws.amazon.com/s3/

Autenticación: “AWS Access Key” o “Certificado X.509”
Tiene 3 tipos de recursos:
Bucket-list: conjunto de buckets* de un usuario
https://s3.amazonaws.com/
Bucket en particular: repositorio de objetos
https://s3.amazonaws.com/{Bucket}/
Objeto: posee metadato y valor
https://s3.amazonaws.com/{Bucket}/{Objeto}
*Bucket: disco o repositorio virtual accesible a través de HTTP


REST,
reu-lización
y
mashups


Cachés y Gestión del tráfico Web


Los Clicks y el tráfico de Internet
Cada click en un URL de una página Web
 Desencadena una acceso Web (HTTP)

El tráfico actual de Internet se mide en clicks
 Es decir: Transacciones HTTP

Todos los portales de Internet
 Intentan maximizar el número de accesos recibidos
 Sus ingresos de publicidad dependen del número de accesos

Atractores de clicks
 El tráfico (clicks) depende de los enlaces a una página
 Desde blogs, Google o sistemas de recomendación


Descargas de Páginas Web


Optimización del Tráfico
Se realiza con caches en dispositivos proxy o pasarela
 Interceptan los accesos
 Y sirven el contenido solicitado de la cache, si no ha cambiado en el servidor
 Una cache se situa en ciente, servidor o punto intermedio estratégico
Proxy: dispositivo intermedio elegido por el cliente
Pasarela: dispositivo intermedio elegido por el servidor o la red

Figura tomada de “HTTP Developer’s Handbook” de Chris Shiflett


Identificador de recurso: Etag

1) Solicitud condicional de recurso
Comienzo GET /lib/ej.html HTTP/1.1
Accept: text/*
Cabecera Accept-language: en, sp
If-None-Match: “V45789099”

Cuerpo

2) Respuesta confirmando
Comienzo HTTP/1.1 304 Not Modified
Cabecera Content-length: 0
Date: Wed, 03 Jul 2002, 19:18:23 GMT
Etag: “V45789099”
Cache-Control: max-age=36000 // cachear 36000 segundos

Cuerpo


Control de Última Modificación
1) Solicitud condicional de recurso
Comienzo GET /lib/ej.html HTTP/1.1
Accept: text/*
Cabecera Accept-language: en, sp
If-Modified-Since: Wed, 21 Jun 2002, 12:11:23 GMT

Cuerpo
2) Respuesta confirmando

Comienzo HTTP/1.1 304 Not Modified
Cabecera Content-length: 0
Date: Wed, 03 Jul 2002, 19:18:23 GMT
Expires: Fri, 05 Jul 2002, 19:18:23 GMT

Cuerpo


Gestión de Cache
Las cabeceras informan al gestor de una cache si los recursos son “frescos” o
“caducados”

Cabeceras de gestión de cache mas comunes
 If-Non-Match: <versión Etag de un recurso> // Cliente
 Etag: <version del objeto para determinar si ha cambiado> // Servidor

 If-Modified-Since: <Enviar solo si modificado desde xxx> // Cliente
 Last-Modified: <Fecha de ultima de última modificación> // Servidor

 Cache-Control: max-age=3600 // Servidor
 Otros parametros de Cache-Control:
 max-age=0 // no guardar
 no-store // no guardar
 No-cache // guaradar, pero no utilizar sin comprobar que


Redes
de
Distribución
de
Contenidos
• Internet
no
fue
diseñada
para
realizar
transacciones
– TCP/IP
es
muy
ineﬁcaz
para
esta
funcion
• No
opCmiza
el
tráﬁco
– Se
diseño
para
crear
aplicaciones
extremo-‐a-‐extremo
• Clientes
dialogan
con
el
servidor

• Son
necesarias
CDNs
(Content
Delivery
Networks)
– OpCmizan
el
uso
del
ancho
de
banda
con
“caches”
• Evitando
retransmiCr
el
mismo
recurso
– Cada
vez
que
lo
pide
un
usuario


Future Internet


Internet
del
Futuro
y
la
Arquitectura

de
Internet

....


Internet
del
Futuro
• Cada
vez
existe
mayor
conciencia
sobre
la
necesidad
de
– Redeﬁnir
Internet
y
TCP/IP
• Para
opCmizar
la
distribución
de
contenidos
– Dilema:
“Evolu@on”
o
“Revolu@on”
– Van
Jacobson,
Agosto
2006:

• h=p://video.google.com/videosearch?q=van+jacobson&emb=0&aq=f#

• Todos
los
países
han
creado
programas
de
invesCgación
– Centrados
en
crear
la
Internet
del
Futuro
• Aunque
nadie
sabe
como
será
realmente


La Arquitectura de las Aplicaciones de Internet

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (8)

Similaire à La Arquitectura de las Aplicaciones de Internet

Similaire à La Arquitectura de las Aplicaciones de Internet (20)

Plus de Juan Quemada

Plus de Juan Quemada (13)

Dernier

Dernier (15)

La Arquitectura de las Aplicaciones de Internet