34
Sistemas Distribuidos basados en la web El origen y razón de las páginas web interactivas

Clase17(introduccion a la web)

  • Upload
    tensor

  • View
    162

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Clase17(introduccion a la web)

Sistemas Distribuidos basados en la web

El origen y razón de las páginas web interactivas

Page 2: Clase17(introduccion a la web)

Arquitecturas Cliente-servidor

• Normalmente para consultar, modificar y administrar los datos de una organización

• El programa cliente era la interfaz inteligente entre el usuario y la base de datos

Servidor de BDcliente

Page 3: Clase17(introduccion a la web)

Inconvenientes de las arquitecturas de 2 capas

• Aplicaciones monolíticas difíciles de mantener– Toda la inteligencia está en el cliente– Los servidores son sólo servidores de datos

• Distribución del código que cambia• Poca reusabilidad del código

– No está orientado al desarrollo de componentes• No se puede usar de cualquier lado• Poca seguridad • Mucho tráfico de datos

Page 4: Clase17(introduccion a la web)

Arquitecturas basadas en la web

• El cliente es el browser• La aplicación misma está en el servidor

web• Puede existir un servidor de aplicaciones

Servidor de BDServidor web Servidor de

aplicacionescliente

Page 5: Clase17(introduccion a la web)

Ventajas del esquema de n-capas

• Clara separación de las funciones de control de la interfaz y presentación de datos con la lógica de la aplicación

• Reusabilidad de componentes• Independencia de la interfaz del cliente y la

arquitectura de datos• Mejores posibilidades de balancear la carga• Uso de protocolos abiertos

Page 6: Clase17(introduccion a la web)

¿Qué es la World-wide Web ?

• WWW es un sistema de hipermedia interactivo desarrollado sobre Internet.

• Hipermedia: La idea de hipermedia es la de juntar texto, imágenes, audio y vídeo dentro de un mismo envoltorio llamado documento

• Además, incluye referencias a otros documentos del mismo tipo

Page 7: Clase17(introduccion a la web)

¿Cómo nace la World-wide Web ?

• El primer precedente del WWW se puede encontrar en un tratado escrito por Vannevar Bush titulado ``As We May Think'', de 1954, en el que básicamente animaba a los científicos a hacer más accesible a todo el mundo sus conocimientos y experiencia. En este tratado surgieron las nociones de hipertexto e hipermedia

• Desde entonces, muchos han sido los sistemas hipermedia que se han creado. Como ejemplo cabe destacar el Augment de Doug Englebart en los 70, y en los 90 el WWW de Tim Berners-Lee, TBL, creado en el Laboratorio Europeo de Partículas Físicas (CERN) en Ginebra, Suiza. TBL se basó en muchas fuentes para crear el WWW:

Page 8: Clase17(introduccion a la web)

Internet

Pero la web necesita un protocolo para intercambiar documentos de hipermedia

Para ello hay una conversación entre el que pide un documentoY el que lo “sirve” (invisible para el usuario del browser)Esta conversación se realiza según el protocolo HTTP

Page 9: Clase17(introduccion a la web)

Arquitectura WebPara abrir una página Web en un navegador, normalmente se teclea el correspondiente URL o se “clickea” sobre en el “link” oportuno. Una vez que se solicita esta petición mediante el protocolo HTTP y la recibe el servidor Web, éste localiza la página Web en su sistema de directorios y la envía de vuelta al navegador que la solicitó,

Page 10: Clase17(introduccion a la web)

¿ Qué necesito para “levantar” mi sitio web ?

El Servidor Web El servidor Web es un programa que corre sobre el servidor que escucha las peticiones HTTP que le llegan y las satisface. Dependiendo del tipo de la petición, el servidor Web buscará una página Web o bien ejecutará un programa en el servidor. De cualquier modo, siempre devolverá algún tipo de resultado HTML al cliente o navegador que realizó la petición. El servidor Web va a ser fundamental en el desarrollo de las aplicaciones del lado del servidor, server side applications, que vayamos a construir, ya que se ejecutarán en él.

Page 11: Clase17(introduccion a la web)

¿De dónde lo saco, cómo lo instalo ?

• Hay varios gratis que se pueden bajar de la Internet– JBOSS, APACHE TOMCAT

• Para instalarlo basta echar a correr el archivo bajado (doble click)

• Obviamente, el computador debe estar en la internet y tener una dirección IP fija y un nombre de dominio

Page 12: Clase17(introduccion a la web)

J2EE

• Es un conjunto de especificaciones que implementan una arquitectura abierta de n-capas sobre la web

• Incluye muchos elementos que se habían desarrollado en forma “independiente” anteriormente

• Interoperabilidad gracias a XML y SOAP

Page 13: Clase17(introduccion a la web)

Los principales elementos de la arquitectura J2EE

• Cliente– Puede ser un programa “stand alone”, un applet

dentro de un browser o el browser mismo que contacta un sevlet, un jsp o un web service

• Contenedor web – Contiene (y sabe como hacerlos correr) las páginas

html, los servlets, JSP y web services• Contenedor de aplicaciones

– Contiene y administra a los EJB • Servidor de base de datos

Page 14: Clase17(introduccion a la web)

Qué va dónde

Servidor de BDServidor web Servidor de

aplicacionesCliente:Browser web

Servidor web y de aplicaciones

Comunicación por medio de JDBC

Páginas HTML -Java Script

-JSP

EnterpriseJava Beans

Portlets y Web services

Page 15: Clase17(introduccion a la web)

J2EE icluye

• Acceso a bases de datos (JDBC)• Utilización de directorios distribuidos

(JNDI) • Acceso a métodos remotos (RMI,

CORBA, SOAP)• Funciones de correo electrónico

Page 16: Clase17(introduccion a la web)

El protocolo Http

• Hypertext transfer protocol• Especifica la forma como el cliente pide

las cosas al servidor y cómo el servidor las manda al cliente

• Define un lenguaje de comunicación con reglas sintácticas y gramaticales

Page 17: Clase17(introduccion a la web)

Interaccion browser-servidor• Cuando se ingresa una URL al navegador web pidiendo un archivo

http://servidor/index.jsp el navegador manda la siguiente información:

GET /index.jsp HTTP 1.1 Accept: image/gif, image/jpeg, application/vnd.msexcel,

application/vnd.ms-powerpoint, application/msword, Accept-Language: de Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT

5.1; SV1) Host: localhost:8000 Connection: Keep-Alive

<- linea en blanco

• La primera línea indica el archivo que el cliente solicita y la versión de HTTP. Luego viene una lista de los tipos MIME que puede aceptar como retorno, lenguaje del sistema, codificación, browser que utiliza, etc (lo que manda como encabezado depende de la version de http y del browser). Al final se manda una línea en blanco que determina el final de la cabecera HTTP.

Page 18: Clase17(introduccion a la web)

Un servidor web básicoimport java.net.*;import java.io.*;

public class ServerWeb {

public static void main(String[] args) throws Exception { ServerSocket ss = new ServerSocket(8000); while(true) { Socket s = ss.accept(); PrintWriter out = new PrintWriter(s.getOutputStream(),true); BufferedReader in = new BufferedReader(new

InputStreamReader(s.getInputStream())); String l; while (true) { l = in.readLine(); if (l.equals("")) break; System.out.println(l); } //aqui se debería mandar el contenido del archivo pedido out.println("<H1>ready</H1>"); s.close(); } }} Esto es sólo para ver qué viene del browserEsto es sólo para ver qué viene del browser

Page 19: Clase17(introduccion a la web)

Un servidor web básicoimport java.net.*;import java.io.*;

public class ServerWeb {

public static void main(String[] args) throws Exception { ServerSocket ss = new ServerSocket(8000); while(true) { Socket s = ss.accept(); PrintWriter out = new PrintWriter(s.getOutputStream(),true); BufferedReader in = new BufferedReader(new

InputStreamReader(s.getInputStream())); String l; while (true) { l = in.readLine(); if (l.equals("")) break; System.out.println(l); } //aqui se debería mandar el contenido del archivo pedido out.println("<H1>ready</H1>"); s.close(); } }} Esto es sólo para ver qué viene del browserEsto es sólo para ver qué viene del browser

Abrir una ventana a Internet para recibir peticiones

Page 20: Clase17(introduccion a la web)

Un servidor web básicoimport java.net.*;import java.io.*;

public class ServerWeb {

public static void main(String[] args) throws Exception { ServerSocket ss = new ServerSocket(8000); while(true) { Socket s = ss.accept(); PrintWriter out = new PrintWriter(s.getOutputStream(),true); BufferedReader in = new BufferedReader(new

InputStreamReader(s.getInputStream())); String l; while (true) { l = in.readLine(); if (l.equals("")) break; System.out.println(l); } //aqui se debería mandar el contenido del archivo pedido out.println("<H1>ready</H1>"); s.close(); } }} Esto es sólo para ver qué viene del browserEsto es sólo para ver qué viene del browser

Espera requerimiento de algún cliente (navegador web)

Page 21: Clase17(introduccion a la web)

Un servidor web básicoimport java.net.*;import java.io.*;

public class ServerWeb {

public static void main(String[] args) throws Exception { ServerSocket ss = new ServerSocket(8000); while(true) { Socket s = ss.accept(); PrintWriter out = new PrintWriter(s.getOutputStream(),true); BufferedReader in = new BufferedReader(new

InputStreamReader(s.getInputStream())); String l; while (true) { l = in.readLine(); if (l.equals("")) break; System.out.println(l); } //aqui se debería mandar el contenido del archivo pedido out.println("<H1>ready</H1>"); s.close(); } }} Esto es sólo para ver qué viene del browserEsto es sólo para ver qué viene del browser

Abrir canales de escritura y lectura con el cliente

Page 22: Clase17(introduccion a la web)

Un servidor web básicoimport java.net.*;import java.io.*;

public class ServerWeb {

public static void main(String[] args) throws Exception { ServerSocket ss = new ServerSocket(8000); while(true) { Socket s = ss.accept(); PrintWriter out = new PrintWriter(s.getOutputStream(),true); BufferedReader in = new BufferedReader(new

InputStreamReader(s.getInputStream())); String l; while (true) { l = in.readLine(); if (l.equals("")) break; System.out.println(l); } //aqui se debería mandar el contenido del archivo pedido out.println("<H1>ready</H1>"); s.close(); } }} Esto es sólo para ver qué viene del browserEsto es sólo para ver qué viene del browser

Leer lo que manda el cliente hasta que llegue una línea vacía

Page 23: Clase17(introduccion a la web)

Un servidor web básicoimport java.net.*;import java.io.*;

public class ServerWeb {

public static void main(String[] args) throws Exception { ServerSocket ss = new ServerSocket(8000); while(true) { Socket s = ss.accept(); PrintWriter out = new PrintWriter(s.getOutputStream(),true); BufferedReader in = new BufferedReader(new

InputStreamReader(s.getInputStream())); String l; while (true) { l = in.readLine(); if (l.equals("")) break; System.out.println(l); } //aqui se debería mandar el contenido del archivo pedido

out.println("<H1>ready</H1>"); s.close(); } }}

Esto es sólo para ver qué viene del browser

Mandar respuesta la cliente

Page 24: Clase17(introduccion a la web)

Modificar para mandar archivo reuqerido

String l = in.readline(); int i = l.indexOf(“HTTP“); String nombreArchivo = l.substring(5,i-1); while (true) { l = in.readLine(); if (l.equals("")) break; System.out.println(l); } BufferedReader archivo = new BufferedReader(

new FileReader(nombreArchivo)); while(true) {

l = archivo.readLine(); if (l == null) break; out.println(l); } } }}

Obtener nombre del archivo requerido de la primera líneaGET /nombre_archivo HTTPXXX

Page 25: Clase17(introduccion a la web)

Modificar para mandar archivo reuqerido

String l = in.readline(); int i = l.indegOf(“HTTP“); String nombreArchivo = l.substring(5,i-1); while (true) { l = in.readLine(); if (l.equals("")) break; System.out.println(l); } BufferedReader archivo = new BufferedReader(

new FileReader(nombreArchivo)); while(true) {

l = archivo.readLine(); if (l == null) break; out.println(l); } } }}

Abrir archivo y mandarlo al cliente

Page 26: Clase17(introduccion a la web)

Respuesta del servidorEl servidor responde mandando la siguiente transacción HTTP:

HTTP/1.0 200 OK Date: Friday, 23-Feb-07 16:30:00 GMT Server: Apache/1.1.1 Content-type: text/html Content-length: 230 <- linea en blanco <HTML><HEAD><TITLE> ........ </HTML>

En este mensaje el servidor utiliza la versión 1.0 de HTTP, y manda el código de estado 200 para indicar que la petición del cliente ha sido procesada satisfactoriamente. También se identifica como un servidor Apache. Indica al cliente que el contenido del documento es texto en formato HTML y que tiene una longitud de 230 bytes.Luego de una línea en blanco viene el contenido del archivo pedido.

Page 27: Clase17(introduccion a la web)

Un cliente web básicoimport java.net.*;import java.io.*;

public class ClientWeb {

public static void main(String[] args) throws Exception { Socket s = new Socket(args[0], Integer.parseInt(args[1])); PrintWriter out = new PrintWriter(s.getOutputStream(),true); BufferedReader in = new BufferedReader(new InputStreamReader(s.getInputStream())); String l; out.println("GET /"+args[2]+" HTTP/1.0"); out.println(""); while (true) { l = in.readLine(); if (l==null) break; System.out.println(l); } System.out.println("ready"); s.close(); }} Esto es sólo para ver qué viene del server

Page 28: Clase17(introduccion a la web)

GET, HEAD y POST

• La primera línea de una petición contiene los comandos HTTP, conocidos como métodos. Existen varios, pero los más conocidos y utilizados son tres: GET, HEAD y POST

Page 29: Clase17(introduccion a la web)

GET• El método GET se utiliza para recuperar

información identificada por un URI por parte de los navegadores. Si el URI se refiere a un proceso generador de datos como un programa CGI, en lugar de él, se devuelven los datos generados por el programa. El método GET también se puede utilizar para pasar una pequeña cantidad de información al servidor en forma de pares atributo-valor añadidos al final del URI detrás de un símbolo de interrogación, ?.

Page 30: Clase17(introduccion a la web)

Ejemplo GET con parámetrosGET /servlet/saludar?nombre=pepe&[email protected] HTTP/1.0

• La longitud de la petición GET está limitada por el espacio libre en los buffers de entrada. Por lo que para mandar una gran cantidad de información al servidor se utiliza el método POST.

• Buffer: porcion de memoria en el computador usado para traspasar datos entre dos medios distintos (memoria principal-memoria secundaria, memoria principal – internet)

Page 31: Clase17(introduccion a la web)

HEAD• El método HEAD es idéntico al GET excepto

que el servidor no devolverá el cuerpo del mensaje en la respuesta a un método HEAD. Esto es útil para obtener información sobre las entidades implicadas en la petición sin que tengan que transferirse. Sirve para comprobar si los enlaces son válidos o para saber cuando fue la última modificación de la entidad solicitada.

Page 32: Clase17(introduccion a la web)

POST• El método POST se refiere

normalmente a la invocación de procesos que generan datos que serán devueltos como respuesta a la petición. Además se utiliza para aportar datos de entrada a esos programas. En este caso los pares atributo-valor son incluidos en el cuerpo de la petición separados por &.

Page 33: Clase17(introduccion a la web)

Ejemplo POSTPOST /servlet/saludar HTTP/1.0 Accept: */* <- linea en blanconombre=pepe&[email protected]

• Primero el browser manda las líneas de arriba y el servidor queda esperando información adicional hasta que el browser corta la comunicación (notar la diferencia con el get que solo manda una línea y corta la comunicación)

• De este modo el método POST no sufre de las limitaciones de espacio y puede enviar mucha más información al servidor. En particular se usa cuando se quieren mandar archivos completos (tareas!!!!)

• Más aún, es muy conveneinte cuando se quiere mandar información confidencial (passwords) ya que esta no queda en el historial del browser (solo queda la primera linea)

Page 34: Clase17(introduccion a la web)

El lenguaje html

• Hypertext markup language• Da directivas de cómo debe mostrar un

texto• Estas directivas pueden ser interpretadas

distintamente por cada “mostrador” de documentos html

• (no es el objetivo de este curso aprender bien html, pero lo vamos a necesitar)