Академический Документы
Профессиональный Документы
Культура Документы
Tecnologa web
Integracin de aplicaciones distribuidas en la web
Joan Vila
DISCA / UPV Departament dInformtica de Sistemes i Computadors Universitat Politcnica de Valncia
Tecnologa web
Indice
Introduccin
El protocolo HTTP
La interfaz CGI Informacin de estado: sesiones y cookies Un ejemplo: la eurocalculadora (el servidor) El cliente: Applets El servidor: Servlets
2
DYA
Servicios web
Qu es la Web?
server xyz.com
hipervnculo
server ab.com
hipervnculo
WWW browser
80 WWW server
80 WWW server
DYA
Internet
El cliente Web
Navegadores Web
Son, bsicamente, visores grficos de informacin con formato, provinente de la red.
Una cuestin bsica de diseo (o estrategia) es si estn integrados en el propio sistema operativo como una extensin del navegador del sistema de ficheros.
Tienen capacidad para trabajar unos protocolos y formatos bsicos y extensiones (plugins) para ampliar su funcionalidad.
Tienen capacidad de procesamiento, pues la mayora incluyen soporte para ejecutar lenguajes de programacin:
DYA
Scripts: JavaScript de Netscape, VBS (Visual Basic Script) de Microsoft Applets de Java.
El servidor Web
Servidores Web
Son, bsicamente, servidores de ficheros que atienden sus peticiones a travs de la red (port 80).
Algunos antiguos estn basados en FTP, ya que este proporciona casi la misma funcionalidad.
Pueden tener extensiones para ejecutar programas externos, denominados programas CGI (Common Gate Interface):
Lenguajes de programacin de CGIs: PHP, shell, Perl, C, ... Servlets: son CGIs hechos en Java (clase JSDK)
DYA
Protocolo HTTP
Establecer conexin TCP C: telnet www.w3.org 80 T: Trying 18.23.0.23 ... T: Connected to www.w3.org T: Escape character is ^[. Peticin C: GET /hypertext/WWW/TheProject.html HTTP/1.0 HTTP C: S: HTTP/1.0 200 Document follows Respuesta S: MIME-Version: 1.0 HTTP S: Server CERN/3.0 Cabecera S: Content-Type: text/html MIME RFC 822 S: Content-Length:8247 S: S: <HEAD> <TITLE> The WWW consortium </TITLE> </HEAD> Cuerpo o S:<BODY> entidad S:<H1> <IMG ALIGN=MIDDLE ALT=W3C SRC=w3c_96x67.gif> S: The World Wide Web Consortium </H1> <P> S: S: The world Wibe Web is the universe of information
6
DYA
Protocolo HTTP
La interaccin suele realizarse sobre una conexin TCP (aunque no es estrictamente requerido)
Cada elemento de una pgina web suele emplear una conexin TCP/IP
Mensajes:
DYA
Protocolo HTTP
Ejemplos:
DYA
Request-Line: GET /hypertext/WWW/TheProject.html Request-Line: GET /hypertext/WWW/TheProject.html HTTP/1.0 Content-Type: Image/GIF <lnea blanco> Status-Line: HTTP/1.0 200 Document follows 200 OK, 304 errores
Protocolo HTTP
Request-URI: identifica la entidad a devolver If-Modified-Since: solicitud condicional. Si no se cumple la condicin se utiliza pag. en cache
Pedir al server devolver la cabecera de un mensaje. Pedir al server almacenar una info. en un recurso existente
Request-URI: identifica un proceso que acepta datos. Validacin de identificacin y de permisos
DYA
Pedir al nivel de aplicacin devolver el mensaje original Uso de un proxy como un tunel
9
Protocolo HTTP
campos no MIME
DYA
Allowed (GET, POST; PUT) Public Content-Length Content-Type Content-Transfer-Encoding Content-Encoding Date Expires Last-Modified Message-Id
Message-Id URI: identificacin del objeto http://www.w3.org/pub/www/doc/url.multi; vary=content-type, language, version Version Derived-From Content-Language Cost Link Title
10
Tecnologa web
Indice
Introduccin
El protocolo HTTP
La interfaz CGI Informacin de estado: sesiones y cookies Un ejemplo: la eurocalculadora (el servidor) El cliente: Applets El servidor: Servlets
11
DYA
Servicios web
WWW server
Pginas web
DYA
12
Programa cliente
WWW server
Pginas web
DYA
Ejemplo: un video-juego 13
Programa cliente
WWW server
Servicio
Nivel cliente
Nivel aplicacin
DYA
Servicios web
Computacin distribuida con servicios web
WWW server
Servicio
Base de Datos
Nivel cliente
Invocaciones mtodos
DYA
WWW server
Servicio
Base de Datos
Nivel web
Nivel aplicacin
Nivel almacenamiento
15
Como en toda aplicacin distribuida hay que balancear la carga entre el cliente y el servidor.
Se intenta realizar en la parte del cliente el mximo procesamiento posible (los ciclos del servidor son de oro). Comunicacin segura Mantenimiento de la informacin de estado de una conexin. Almacenamiento de informacin persistente.
DYA
16
Nivel Cliente
La funcionalidad del cliente se centra en la interaccin con el usuario, lo cual incluye:
Visualizacin de la informacin formateada (en lenguajes de formato) Procesamiento de formularios Procesamiento grfico y multimedia
Nivel Servidor
El servidor, fundamentalmente, realiza procesamiento propio de la semntica de la aplicacin:
Intercambiar informacin con el cliente a travs del servidor web Mantenimiento de informacin de estado con los diferentes clientes
Nivel Almacenamiento
Proporciona acceso a bases de datos a travs de interfaces estndares (ODBC).
17
DYA
Tecnologa web
Indice
Introduccin
El protocolo HTTP
La interfaz CGI Informacin de estado: sesiones y cookies Un ejemplo: la eurocalculadora (el servidor) El cliente: Applets El servidor: Servlets
18
DYA
Servicios web
Lenguajes de marcado
El objetivo de los lenguajes de marcado es proporcionar a la informacin una estructura y un formato (metainformacin).
La forma en que logran esto es acompaando la informacin mediante una serie de etiquetas (marcas).
<ol> <li> Letra normal <li> <b> Letra negrita </b> <li> <i> Letra itlica </i> </ol> 1. Letra normal 1. Letra normal 2. Letra negrita 2. Letra negrita 3. Letra itlica 3. Letra itlica
DYA
19
Lenguajes de marcado
Objetivos:
Ser lo suficientemente genricos para describir cualquier tipo de documento. Ofrecer un formato de datos universal que permita adaptar o transformar fcilmente la informacin (basndose en etiquetar la informacin con una descripcin). Lenguajes de marcado generales
SGML (Standard Generalized Markup Language). ISO 8879 SGML
XML (eXtensible Markup Languaje). W3C standard
Ejemplos:
DYA
20
XML
XML: Un ejemplo
<?xml version="1.0" encoding="ISO-8859-1" ?> - <!-- Edited with XML Spy v4.2 --> - <CATALOG> - <CD>
<TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR>
</CD> <CD>
<TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tyler</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>CBS Records</COMPANY> <PRICE>9.90</PRICE> <YEAR>1988</YEAR>
DYA
</CD> </CATALOG>
21
XML
Sirve para que los programas comuniquen datos e interpreten adecuadamente los tipos de dato. Estructura jerrquica <componente> texto del componente </componente>
Muy flexible: las marcas no son fijas, sino dependientes de la aplicacin. El formato con que debe verse la informacin en un determinado medio se especifica mediante hojas de estilo:
DYA
CSS (Cascading Style Sheets): parcialmente implementado en navegadores web. XSL (eXtended Style Shhet Language): definido por W3C.
22
HTML
<html> <html> <head> <!-- Generado aamano por J. Vila --> <head> <!-- Generado mano por J. Vila --> <title> Ejemplo1 </title> <title> Ejemplo1 </title> </head> </head> <body background=pared.gif text=#0000FF> <body background=pared.gif text=#0000FF> Este es el ejemplo 11de pagina web. Este es el ejemplo de pagina web. La letra es de color azul. La letra es de color azul. </body> </body> </html> </html>
23
DYA
DYA
<body background=pared.gif text=#0000FF> Propiedades del fondo: background, bgcolor, bgsound, bgproperties Mrgenes: leftmargin, topmargin Colores del texto: text, link, vlink, alink
24
HTML
DYA
25
HTML: formularios
Formularios HTML
Permiten realizar pgina web interactivas en las que el cliente proporciona informacin a un programa servidor a travs del servidor web.
DYA
26
DYA
Tipos de formularios
HTML: formularios
27
HTML: formularios
Atributos de form Descripcin <form name="..."> Define una etiqueta para el formulario <form method="..."> Define un mtodo para el formulario GET/POST <form action="..."> Define la ubicacin de una accin para el formulario
DYA
GET: los valores se agregan al URL separados por ?. http://widget.com/cgi-bin/eurocal1.php3?pts=1213445 POST: el cuerpo del mensaje HTTP contiene las variables: pts=1213445 28
HTML: formularios
Atributos de input <input type="..."> <input name="..."> <input value="..."> <input onClick="...">
Descripcin Define el tipo de entrada: text, radio, checkbox, etc. Define una etiqueta para la entrada Define el concepto de la entrada Define lo que pasa cuando se valida la entrada (Javascript) <input onSubmit="..."> Define lo que pasa cuando se aprieta el boton de enviar (Javascript) <input size="..."> Define el tamao requerido por la entrada <input maxlength="..."> Define el mximo tamao de la entrada
Descripcin Define el nmero de filas del rea de texto Descripcin Define una etiqueta para el selector
29
DYA
La eurocalculadora
DYA
30
Un ejemplo: la eurocalculadora
Ejemplo: si el campo del formulario queda vaco, no enva la peticin al servidor para su procesamiento. Esto puede realizarse perfectamente a nivel de cliente, sin recurrir al servidor.
DYA
DYA
32
El formulario HTML
<body bgcolor="#f6f2e3" face="charter" link="#4232d9"> <h1>Eurocalculadora</h1> Fique el valor que desitja convertir: <br>
e b d ra we o io ulad ic ervocalc S r eu
<form name="ec" action=" http://www.midominio.com/eurocal.php3" method="post onClick= "return verifica();"> onsubmit="return calcula();"> Tipus de conversi: <select name="conv" size="1" align="left" > <option selected="selected" value="0">---> Per favor, trie el tipus de conversi <---</option> <option value="1"> Pts --> Euros </option> <option value="2"> Euros --> Pts </option> </select> <input type="submit" name="action" value="Convertir" > </form> </body> </html>
Llamadas a JavaScript
DYA
33
DYA
34
DYA
35
Tecnologa web
Indice
Introduccin
El protocolo HTTP
La interfaz CGI Informacin de estado: sesiones y cookies Un ejemplo: la eurocalculadora (el servidor) El cliente: Applets El servidor: Servlets
36
DYA
Servicios web
La interfaz CGI
aplicaciones externas (programas CGI) a los servidores WWW. Su finalidad es procesar informacin solicitada por los clientes (formularios) y devolverles una respuesta. Aplicaciones:
Procesado de formularios Conexin a bases de datos Paquete CERN Paquete NCSA httpd
DYA
37
La interfaz CGI
xaloc.upv.es
/cgi-bin/ uncgi.exe
N
Nombre DNI
Cliente WWW
Servidor WWW
CGI
DYA
URL: http://xaloc.upv.es/cgi-bin/uncgi.exe
38
La interfaz CGI
En un entorno UNIX el servidor web pasa estas variables al programa CGI como variables de entorno del shell.
env
Datos de salida del CGI: El programa CGI enva su salida al servidor web que, a su vez, la reenva al cliente web.
fork
CGI env
stdout
En un entorno UNIX el CGI pasa estas variables al servidor web mediante una tubera, redirigiendo su salida estndar.
DYA
39
La interfaz CGI
Variables CGI
Uso de variables CGI: se utilizan para pasar los datos relacionados con las peticiones HTTP del servidor a la aplicacin CGI correspondiente.
Tipos de variables:
Variables de entorno: las establece el servidor web a partir de los datos de la conexin y la cabecera de las peticiones. Permiten averiguar datos relativos a la propia peticin (tipo, longitud,...), al cliente (IP, Navegador,...) o al propio servidor (nombre, puerto, software) Variables definidas por el cliente. Existen dos mtodos para pasar estas variables:
GET POST
DYA
En sistemas UNIX son variables de entorno del shell. En general los lenguajes de programacin para aplicaciones Web proporcionan bibliotecas.
La interfaz CGI
CONTENT_LENGTH: Tamao ( en hexadecimal) de octetos de entidad vinculada CONTENT_TYPE: MIME de entidad vinculada
SUBTIPOS octet-stream (datos de la aplicacin) plain rfc822, partial, external-body gif, jpeg basic mpeg mixed/alternative, digest, parallel
GATEWAY_INTERFACE: versin de CGI del servidor HTTP_(cadena): cabecera de los datos del cliente
DYA
41
La interfaz CGI
http//www.xy.com/cgi-bin/places.pl?Punta_Umbria
REMOTE_ADDR: direccin IP del cliente que hace la peticin. REMOTE_HOST: nombre del dominio del cliente que hace la peticin. REMOTE_IDENT: identidad del usuario utilizado en el servidor. REMOTE_USER: si se usa identif. nombre del usuario autentif. por el servidor REQUEST_METHOD: GET, HEAD, POST; PUT, DELETE, TRACE, CONNECT SCRIPT_NAME: URL de una aplicacin CGI SERVER_NAME: nombre de dominio o direccin IP del servidor tal como aparece en el URL SERVER_PORT: http//www.xy.com:8119/index.html SERVER_PROTOCOL = HTTP/1.1, SERVER_SOFTWARE= NCSA/1.4 42
DYA
La interfaz CGI
Manejo de conexiones Acceso a variables CGI Mantenimiento de informacin de estado (sesiones, cookies...) Conexiones a bases de datos Seguridad Envo de archivos
DYA
43
La interfaz CGI
variables enviadas por un formulario con el mtodo POST. $REMOTE_ADDR es una variables predefinida de entorno por la que se puede obtener el IP del cliente Forma de obtener variables de formulario y cookies en PHP 5
function phpGetVar($var) { if(!isset($$var)) {$$var 0 $GET[$var];} if(!isset($$var)) {$$var 0 $POST[$var];} if(!isset($$var)) {$$var 0 $COOKIE[$var];} }
DYA
44
Informacin de estado
En las webs interactivas, es decir, webs donde los clientes realizan algn tipo de transaccin, el servidor necesita mantener informacin de estado de los
Ejemplo: En las libreras web el servidor necesita implementar el concepto de carro de compra: para cada cliente se almacena en su carro de compra los libros que ha ido adquiriendo.
Sesiones: la informacin es mantenida en la parte del servidor Cookies: el servidor enva la cliente la informacin de estado en una cookie. El
cliente la devuelve al servidor al principio de cad interaccin.
DYA
45
Sesiones
La informacin es mantenida en la parte del servidor. Las sesiones se caracterizan por las siguientes operaciones:
Abrir una sesin (devuelve un identificador) Almacenar u obtener datos de una sesin Invalidar una sesin: manual o automticamente
Cookies
Son objetos que el servidor web puede enviar en la cabecera de una peticin HTTP al visor con informacin codificada. El navegador web:
No puede modificar los cookies. Devuelve los cookies al servidor cada vez que realiza una peticin al mismo.
DYA
Aunque se interrumpa la sesin entre el cliente y el servidor o el servidor muera, se puede reanudar posteriormente la interaccin, pues el cliente guarda en los cookies su informacin de estado. 46
Cookies
2
Diseo Y Aplicaciones de Sistemas Distribuidos
El navegador web devuelve los cookies al principio de cada interaccin
N
Nombre DNI
Cliente WWW
Servidor WWW
Php3.exe
DYA
1, 4, ...
El servidor www crea y envia los cookies al visor al principio de una interaccin
47
La eurocalculadora
DYA
Pgina dinmica
48
La eurocalculadora
N
Eurocalculadora Quantitat
Cliente WWW eurocal.html <html> <script> function verifica(){ </script> <form name="ec" action="eurocal.php3" onsubmit="return verifica();">
Servidor WWW
Php3.exe
eurocal.html
eurocal.php <?php> $pts = $HTTP_POST_VARS["pts"]; echo <html>; .... echo $pts/167 .... echo </html> 49
DYA
DYA
50
//--------------------------- FUNCTION cola ---------------function cola() { echo </div> </body> </html> " } //--------------------------- FUNCTION escribe IP ---------------function escribeIP() { $fitxer = "$DOCUMENT_ROOT\\ip.txt"; $fd = fopen($fitxer, a"); fwrite( $fd, $REMOTE_ADDR); fclose( $fd ); }
DYA
51
DYA
52
// --------------------------- MAIN ----------------------.... echo "<h3>"; echo "$qorg $org equivalen a <font color=\"ff0000\"> $qdst </font> $dst"; echo "</h3>"; escribeIP(); cola();
DYA
?>
53
CGIs
DYA
54
Tecnologa web
Indice
Introduccin
El protocolo HTTP
La interfaz CGI Informacin de estado: sesiones y cookies Un ejemplo: la eurocalculadora (el servidor) El cliente: Applets El servidor: Servlets
55
DYA
Servicios web
Applets
xaloc.es
Cliente WWW
Servidor WWW
N
http://xaloc.es/echo.html
echoClient. class
DYA
56
Applets
Applets
Son subclases de la clase Applet
Son objetos grficos (subclases de Component) que se pueden ejecutar en el entorno de un browser de red (siempre que este incluya la mquina virtual). El sistema grfico AWT es representable por el browser de red. Se lanzan desde un fichero en HTML: sto hace migrar el cdigo del URL remoto al browser de red. Tienen algunas limitaciones de seguridad en el acceso a ficheros y recursos de la mquina a la que migran.
57
DYA
Servlets
Servlets
Son una forma de realizar CGIs en Java (server side programming) Tiene capacidades para manipular peticiones y respuesta a formularios HTML
DYA
58
Servlets
Arquitectura javax.Servlet
Las interfaces
del
Servlet y
paquete
HttpServlet
proporcionan mtodos para gestionar el Applet y manejar las comunicaciones con los clientes. Cuando un servlet acepta una peticin de un cliente recibe dos objetos
DYA
ServletRequest: encapsula la comunicacin del cliente al servlet ServletResponse: encapsula la comunicacin del servlet al cliente
59