Introduccion Al Web

Introduccin al Desarrollo de Aplicaciones Web
Asignatura: Desarrollo de Aplicaciones en Sistemas Distribuidos e Internet Escuela Universitaria Ingeniera Tcnica Informtica de Oviedo Universidad de Oviedo
Contenidos
Internet
Protocolo TCP/IP Aplicaciones: DNS, FTP, SMTP, etc. HTTP URLs Unicode HTML
World Wide Web
Servidor Web
Servidor de Aplicaciones
Servicios
Arquitectura cliente/servidor Pginas estticas/dinmicas
PDF Creator - PDF4Free v2.0
http://www.pdf4free.com
Introduccin a Internet
Web = vasta coleccin de documentos en Internet enlazados a travs de hiperenlaces
Internet: millones de ordenadores conectados

Conjunto de redes heterogneas conectadas entre s mediante el protocolo TCP/IP
Los hiperenlaces permiten a los usuarios acceder a documentos situados en otros servidores Web, sin preocuparse de su ubicacin ubicaci
Evolucin de Internet
(60-80) Origen militar Protocolos de comunicacin (TCP/IP) Seguridad ante ataques (mltiples servidores) (80 90) Implantacin acadmica Protocolos de intercambio de informacin (FTP, SMTP, ...) (90-95) World Wide Web HTTP, HTML, etc. Enorme biblioteca con material hipermedia (95 00) Acceso comercial Posibilidad de negocio Dinero!! Boom comercial (00-) Crisis de las punto com Historias de fracasos Lecciones aprendidas Nuevas posibilidades: Computacin ubicua, Web semntica, etc.
Internet
Router ISP local ISP regional
Modem
servidores
Telefona mvil
Acceso particular
Acceso corporativo wireless
Protocolo TCP/IP
Se encarga de llevar a cabo la conmutacin de paquetes
Transmission Control Protocol (TCP) Internet Protocol (IP)
Protocolo = conjunto de reglas para formatear, ordenar y comprimir mensajes, comprobar errores, etc.
Pueden implementarse en hardware o software
Cuatro capas
La familia de protocolos TCP/IP se divide en 4 capas:
Capa de red: de ms bajo nivel
Representa el medio fsico encargado de enviar en ltima instancia los 0 y 1 que componen cada mensaje Diversas tecnologas: Ethernet, ATM Esquema de direcciones, encaminamiento de los mensajes Enva acuses de recibo, reagrupa el mensaje en destino, vuelve a mandar los paquetes perdidos o defectuosos No garantiza tiempos de transmisin HTTP (HyperText Transfer Protocol), FTP (File Transfer Protocol), SMTP (Simple Mail Transfer Protocol)
Capa de Internet (IP)
Capa de transporte (TCP)
Capa de aplicacin: programas que hacen uso de los servicios proporcionados por las capas inferiores
Arquitectura de TCP/IP
Capa de Aplicacin Capa de Transporte Capa de Internet Capa de red
HTTP
Telnet
FTP TCP IP
SMTP
Ethernet
Token Ring
Frame Relay
ATM
Encaminamiento de paquetes TCP/IP

1. El protocolo TCP trocea los datos en paquetes 2. Los paquetes viajan de router a router segn protocolo IP 3. El protocolo TCP ensambla los paquetes para obtener el mensaje original
router
router
router
Emisor
router
router router
Receptor
Direcciones IP
Cada ordenador conectado a Internet (=Host) debe tener una direccin para poder recibir los paquetes TCP
Puede ser:
Esttica
Fija, siempre la misma
Dinmica
Por ejemplo, cada vez que nos conectamos a Internet con un mdem telefnico, nuestro proveedor de Internet (ISP, Internet Service Provider) nos asigna una direccin temporal
Las direcciones IP son nmeros de 32 bits separados en cuatro partes (por ejemplo, 156.35.94.5)
Cada uno va de 0 a 255; esto nos da un total de 232 direcciones (algo ms de cuatro mil millones)
IPv6
Problema: cada vez ms y ms dispositivos conectados. Esquema de direcciones pequeo Se est desarrollando una nueva versin, denominada IPv6 para sustituir a la actual (IPv4), que con 128 bits podr tener 3,4 1038 direcciones Tambin mejora otras deficiencias de IPv4
Capa de Aplicacin
Diversas protocolos de aplicacin
SMTP (correo electrnico) FTP (intercambio ficheros) IRC (Chat) HTTP (hipertexto) DNS (nombres dominio)
Nombres de dominio
DNS (sistema de nombres de domino) permite asociar nombres lgicos a direcciones IP
DNS es una base de datos distribuida Ejemplo: www.euitio.uniovi.es 156.35.94.5
World Wide Web
Internet
Web
Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto
Un programa cliente en un ordenador accede a un programa servidor en otro ordenador remoto
La Web = sistema de hipertexto que funciona sobre Internet como uno de sus servicios
En este caso, el programa cliente es nuestro navegador, y el servidor el programa que hace de navegador servidor Web que est ejecutndose en el ordenador remoto y que se encarga de entregar el documento solicitado a nuestro navegador
Nacimiento del World Wide Web

En 1989, Tim Berners-Lee, en el laboratorio europeo de partculas (CERN), en Suiza, crea un lenguaje de etiquetas para representar y enlazar documentos
HTML HyperText Markup Language
Lenguaje de Marcado de Hipertexto
Tim Berners-Lee
Berners-Lee cre las versiones iniciales de:

HTML, HTTP, un servidor Web y un navegador HTML HTTP Los cuatro componentes esenciales de la Web
Esquema general Cliente/Servidor
Peticin Red
Servidor
Respuesta
Cliente
Visin general del Web

www.uniovi.es
index.html
Internet Internet
El usuario teclea http://www.uniovi.es/ en su navegador
enlace
www.euitio.uniovi.es

El usuario solicita un documento tecleando su direccin en el navegador: http://www.uniovi.es
Es lo que se denomina un URL (localizador uniforme de recursos)
El cliente busca en el DNS cul es la IP de www.uniovi.es: 156.35.14.3
Cada ordenador en Internet est identificado por una direccin nica denominada IP El DNS traduce de nombres lgicos a direcciones fsicas
Navegador y servidor web comienzan un dilogo a travs del protocolo HTTP (protocolo de transferencia de hipertexto)
GET /HTTP/1.0 El servidor, si todo es correcto, devuelve el documento solicitado ms informacin adicional

El navegador mira el tipo de documento devuelto (MIME) Si es text/html es un documento HTML, lo visualiza el propio navegador Si es otro tipo de documento se ejecutar el programa que tenga asociado, o nos preguntar si queremos guardar el documento en nuestro ordenador Nota: estos tipos MIME los podemos configurar en nuestro navegador
10
HTTP
Funcionamiento del Web

ste enva una peticin al servidor Web
Tecleamos una direccin en el navegador (por ejemplo, www.euitio.uniovi.es)
HTTP
Quien devuelve la pgina solicitada (en este caso, la index.html del directorio raz)
Y el navegador se encarga de interpretar el cdigo HTML y mostrar el resultado
11
Funcionamiento de la Web
Un servidor Web es un ordenador en Internet que sirve pginas Web y contenido esttico en general a peticin
Para ello, debe tener un programa ejecutndose que haga de servidor Web: Apache, IIS, etctera
El usuario accede al Web a travs de un navegador (browser)

Se encarga de solicitar las pginas Web al servidor y de mostrarlas
HTTP
HTTP (HyperText Transform Protocol) es el protocolo usado para transferir pginas Web
Es el modo en que un navegador se comunica con un servidor Web (Apache, Internet Information Server)
Es un protocolo sin estado

La sesin termina en cuanto se devuelve el objeto solicitado Incluso, si una pgina contiene otros objetos (imgenes, frames, etc.) cada uno de ellos inicia una nueva peticin HTTP
12
Ejemplo de mensaje HTTP

Peticin Petici
GET / HTTP/1.0 > >
Respuesta
< HTTP/1.0 200 OK < Date: Wed, 18 Sep 1996 20:18:59 GMT < Server: Apache/1.0.0 < Content-type: text/html < Content-length: 1579 < Last-modified: Mon, 22 Jul 1996 22:23:34 GMT < < HTML document
Especificacin de HTTP
Tipos de peticiones
200 400 401 403 404 ... GET, HEAD, POST, PUT, DELETE, OK Bad Request Unauthorized Forbidden Not Found
Define cdigos de respuestas
13
Unicode
Representacin de caracteres
Representacin de Caracteres ASCII: 7 bits (0 127) (A)merican (S)tandard (C)ode for (I)nformation (I)nterchange Extensiones de ASCII ISO-8859-1 (iso-latin-1) (8 bits) ASCII (0-127) + otros caracteres tpicos de Europa occidental Familia ISO-8859-X = Otros alfabetos europeos ISO-8859-15 (iso-latin-9) Igual que iso-8859-1 + smbolo de
re at
or -
PD
F4 Fr
ee
v2 .0 C U I D A D O ! .. h a y m u c h o s id i o m a s y m u c h o s c a r a c te r e s ..
ht
tp
://
.p
df
4f
re
e.
co
PD
14
Unicode
ISO-10646 (31 bits) Define un repertorio universal de caracteres (UCS) En continua revisin: ISO-10646-2:2001 contiene ms de 70.000 caracteres UNICODE = Consorcio de empresas que define restricciones sobre la implementacin de ISO-10646 Varias codificaciones (UTF = Unicode Transformation Format) - UTF-8: Los primeros 127 cdigos se presentan igual (compatible con ASCII) El resto se codifican en longitud variable Relativamente Eficiente - UTF-16: Usa 16bits para los caracteres ms comunes, el resto con pares de 16 bits - UTF-32: Codificacin directa en 32 bits (desperdicio de espacio)
NOTA: Conviene distinguir: Carcter: Entidad abstracta (Letra A) Glifo (Glyph): Representacin del carcter A A A A A A Fuente (Font): Conjunto de glyphs, ejemplo: Times Roman, Arial, etc.
URIs
15
URIs
URI: Uniform Resource Identifier
URL: Uniform Resource Locator

Adems de una identificador nico, indica protocolo de acceso http://www.euitio.uniovi.es
URN: Uniform Resource Name

Identificador nico
urn:isbn:0451450523
IRI: Internationalized Resource Identifier

Admite caracteres Unicode
Sintaxis de un URL
protocolo://direccin[:puerto]/directorio/fichero protocolo://direccin[:puerto]/directorio/fichero
Ejemplos:
http://www.princast.es/ http://www.princast.es/ http://195.55.30.17/ http://195.55.30.17/ http://www.cfacebal.com/ http://www.cfacebal.com/ http://www.cfacebal.com/index.html http://www.cfacebal.com/ http://web.uniovi.es/Vicerrectorados/Extension/ http://web.uniovi.es/Vicerrectorados/Extension/ http://localhost:8080/ http://localhost:8080/ http://petra.euitio.uniovi.es/ http://petra.euitio.uniovi.es/
16
Protocolo
Un protocolo define el modo en que se comunican dos ordenadores para llevar a cabo alguna tarea Protocolo del Web:
HTTP (HyperText Transfer Protocol) (HyperText Protocol) Especifica cmo tiene lugar el dilogo entre el navegador y el servidor para conseguir el fichero especificado No se ocupa del transporte en s: TCP
Cada vez que tecleamos una direccin o pulsamos un enlace el navegador se comunica va HTTP con el servidor Web indicado
Ejemplos de protocolos
file ftp http
Permite acceder a un fichero en el sistema de ficheros local File Transfer Protocol Pginas Web
17
Direccin del sitio

Suele ser un nombre simblico: nombre de dominio
www.uniovi.es especifica una mquina llamada www en el dominio uniovi.es El nombre de mquina puede ser cualquiera www no es ms que un convenio para especificar aquellas mquinas que son servidores Web como ftp suele designar a los servidores de FTP incluso aunque muchas veces se trate de la misma mquina
Direccin del sitio

Tambin podra ser directamente la direccin IP
http://156.35.14.3/
Los nombres de dominio no distinguen entre maysculas y minsculas

http://www.uniovi.es/ http://WWW.UNIOVI.ES/ http://wWw.UniOvi.es/
18
Directorio
Hay que indicar la ruta hasta el fichero deseado Como mnimo, debe ir la barra (/)
http://www.uniovi.es/ http://www.uniovi.es/
Si no la ponemos, la pone el navegador por nosotros

...pero en los enlaces en HTML s debe aparecer
Tambin se puede indicar un subdirectorio:

http://www.uniovi.es/Vicerrectorados/Postgrado_Tit http://www.uniovi.es/Vicerrectorados/Postgrado_Tit ulosPropios/doctorado/ ulosPropios/doctorado/
Siempre se usa la barra /, no \ (incluso aunque el servidor Web sea una mquina Windows: est definido por el estndar URI, no depende del SO)
La ruta s puede diferenciar entre maysculas y minsculas (si el servidor Web es, por ejemplo, una mquina Unix)
Nombre del fichero

Depende del SO del servidor Web Las pginas Web generalmente tienen como extensin .html o .htm Las extensiones son importantes para que el navegador sepa cmo tratar un fichero
un .html, lo interpreta y lo muestra un .jpg, trata de mostrar la imagen un .doc, abre el Word si lo tenemos instalado etctera
19
Nombre del fichero

Si no se especifica, el servidor busca un fichero con un nombre determinado en el directorio especificado
Normalmente, el index.html o el index.htm Se puede configurar el el programa que utilicemos como servidor Web (Apache, IIS...)
Puerto
Por omisin, una peticin HTTP se dirige al puerto 80
Por eso casi nunca la especificamos
Pero se podra configurar el servidor Web para que escuchase peticiones en otro puerto En ese caso, hay que indicarlo explcitamente:
http://www.midominio.com:8080/ http://www.midominio.com:8080/
20
Lenguaje HTML
HTML
Es el lenguaje de creacin de pginas Web
Al menos, de las pginas estticas
Era imprescindible que la misma informacin se pudiese ver en diferentes plataformas Por tanto, Berners-Lee dise un lenguaje de estructuracin de documentos, no de presentacin (sta se dejaba al programa cliente)
21
HTML es un lenguaje
Como tal, tiene unas reglas que deben ser cumplidas, esto es, una sintaxis, una gramtica... igual que el espaol o cualquier otro lenguaje informtico Es adems un lenguaje informtico, para ser procesado por ordenadores; pero no es un lenguaje de programacin
Por qu de marcado ?
Qu vemos de un vistazo en el siguiente texto?
Acme Computer Corp. Acme Computer Corporation is a technology-based company that seeks to offer its customers the latest in technological innovation. Our products are created using the latest breakthroughs in computers and are designed by a team of topnotch experts. We are based in Acmetown, USA, and have offices in most major cities around the world. Our goal is to have a global approach to the future of computing. Have a look at our product catalog for some examples of our innovative approach.
Que tiene un ttulo y dos prrafos t p Pero un ordenador slo vera un montn de caracteres s ver mont
Necesitamos un modo de indicarle la estructura del documento
22
HTML, lenguaje de hipertexto

Por hipertexto designamos al texto al que se le aade una propiedad: determinadas porciones de texto pueden ser enlazadas a otros documentos De ah surge el concepto de navegacin: surcamos el Web yendo de unos enlaces a otros El hipertexto debe ser utilizado en los sitios web para facilitar al usuario la labor de bsqueda de la informacin
Especificacin de HTML
La especificacin del lenguaje HTML y de la mayora de tecnologas relacionadas con el Web est definida por el World Wide Web Consortium (W3C)
www.w3c.org
23
Ejemplo de HTML
Cabecera AlCapone.html <html> <head> <title>Pizzeria Al Capone</title> </head> <body bgcolor="blue" text="yellow" link="red" vlink="white"> <h1>Pizzera Al Capone</h1> <p>Lista de enlaces</p> <ul> <li><a href="Pizzas.html"> Tipos de Pizzas</a></li> <li><a href="http://www.mafia.it"> Patrocinadores</a></li> <li><a href="#Contacto">Contacto</a></li> <ul> Pgina visualizada
Cuerpo
Lista
Enlaces
<h2><a name="Contacto">Contacto</a></h2> <p><font color="red">Direccin:</font> Detalles de C/ Gnova N 3, Oviedo, Espaa</p> presentacin <p><font color="red">Telfono:</font> 985203040</p> </body> </html>
Estructura de documentos HTML

DTD Cabecera Cuerpo <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0//EN http://www.w3.org/TR/REC-html40/strinct.dtd <html> <head> ... </head> <body> ... </body> </html>
DTD = Declaracin de tipo de documento Muchos visualizadores asumen tipo HTML por defecto Su inclusin garantiza mayor compatibilidad y validacin La cabecera incluye informacin sobre el documento actual (metainformacin) Ttulo, autor, palabras clave para robots de bsqueda, etc. El cuerpo incluye el contenido del documento El formato HTML se basa en la utilizacin de elementos
24
Elementos HTML
Un elemento contiene: Una etiqueta inicial (nombre entre signos < y > ): <etiqueta> La etiqueta inicial puede contener atributos: <etiqueta atributo=valor> El elemento debe acabar con una etiqueta final con el mismo nombre El contenido del elemento es todo lo que hay entre la etiqueta inicial y la final El contenido pueden ser otros elementos
Elemento Etiqueta de inicio Contenido Etiqueta final
<body bgcolor=blue text=white> <h1>Hola</h1> . . . </body>
Elementos vacos en HTML

En caso de un elemento vaco puede usarse la sintaxis:<etiqueta/>
Elemento vaco <img src=cara.gif width=100 height=80 />
Aunque en HTML pueden no incluirse las etiquetas finales de algunos elementos
25
Cabecera HTML
En la cabecera se pueden incluir los elementos <title> especifica el ttulo del documento <meta> especifica meta-informacin. Dos modos: Atributo name
<meta name=Author content=Jose Granda>
Podemos usar nuestros valores

<meta name=ColorFavorito content=Rojo>
Pueden incluirse palabras clave que ayudan a los buscadores

<meta name=Keywords content=Pizzas, Restaurante>
y descripciones
<meta name=Description content=Pginas de una pizzera...>
Atributo http-equiv: Solicita al servidor que incluya informacin en la

cabecera de envo
<meta http-equiv=Content-language Content=en> <meta http-equiv=Refresh Content=2,http://www.mafia.it> <meta http-equiv="Content-type" content="text/html; charset="iso-8859-1">
Cabecera HTML
Otros elementos de la cabecera <link> especifica relaciones entre documentos Muchas opciones dependen del soporte ofrecido por el visualizador <link rel=INDEX href=indice.html> <link rel=ALTERNATE media=PRINT href=versionImpresa.ps> Pueden especificarse hojas de estilo (se vern ms adelante) <link rel=stylesheet href=estilo.css> <style> especifica estilo del documento (se ver ms adelante) <style type=text/css> body { background: blue; color: yellow } </style>
26
HTML: Texto
Niveles de encabezado (headings) h1, h2, h3, h4, h5, h6 Prrafo p Los saltos de lnea son gestionados por el visualizador br inserta un salto de lnea inserta un espacio pero impide un salto de lnea Elementos de frases em, strong, cite, dfn, code, samp, kbd, var, abbr, acronym, blockquote, q Texto preformateado pre <pre> void main() { return (Hola); } </pre>
HTML: Listas
Listas no ordenadas <ul> (unordered-lists) Listas ordenadas <ol> (ordered-lists) Items de listas <li> (list-item)
<ul> <li>Primer valor</li> <li>Segundo valor</li> </ul>
Primer valor Segundo valor
<ol> <li>Primer valor</li> <li>Segundo valor</li> </ol>
1. Primer valor 2. Segundo valor
27
HTML: Listas de definiciones

Listas de definiciones <dl> (definition-list) Trmino de definicin <dt> (definition-term) Descripcin de definicin <dd> (definition-description) HTML Hypertext markup Language XML eXtensible Markup Language
<dl> <dt>HTML</dt> <dd>Hypertext Markup Language</dd> <dt>XML</dt> <dd>eXtensible Markup Language</dd> </dl>
HTML: Enlaces
<p>Lista de enlaces</p> <ul> <li><a href="Pizzas.html">Tipos de Pizzas</a></li> <li><a href="http://www.mafia.it">Patrocinadores</a></li> <li><a href="#Contacto">Contacto</a></li> <ul>
Direccin relativa
Lista de enlaces Tipos de pizzas Patrocinadores Contacto
pizzas.html
Direccin absoluta
http://www.mafia.it
Direccin interna
#contacto
<a name=contacto>Informacin de contacto</a> ...
28
HTML: Imgenes
<img src=images/fotoPizza.gif width=500 height=500 alt=Foto de una pizza>
Incluir dimensiones permite al visualizador reservar espacio
El texto alternativo es conveniente incluirlo para visualizadores que no puedan mostrar imgenes
Tambin puede usarse

<object data=images/fotoPizza.gif width=500 height=500 type=image/gif> Foto de una pizza </object>
HTML: Formateo de texto

HTML 4.01 incluye caractersticas de formateo de texto b (bold, negrita) i (itlica) big (ms grande) small (ms pequeo) tt (teletipo) Control de fuentes <font size=2 color = red> Texto rojo grande</font> Lneas horizontales <hr> Es posible agrupar contenidos mediante span y div span se utiliza dentro de lneas de texto div se utiliza para bloques de contenido (divide unidades) Con los atributos id o class se asigna un nombre lgico Son tiles para trabajar con <div class=Datos> <p><span class="item">Direccin:</span> hojas de estilos
C/ Gnova N 3, Oviedo, Espaa</p> <p><span class="item">Telfono:</span> 985203040</p> </div>
29
HTML: Tablas
<table> <caption>Pizzas disponibles</caption> <tr><th>Nombre</th><th>Ingredientes</th><th>Precio</th></tr> <tr><td>Barbacoa</td><td>Mozzarella, Bacon</td><td>8 €</td></tr> <tr><td>Hawaiana</td><td>Tomate, Pia, Queso</td><td>7€</td></tr> <tr><td>4 quesos</td><td>Tomate, Mezcla 4 quesos</td><td>7 €</td></tr> </table>
Pizzas Disponibles Nombre Barbacoa Hawaiana 4 Quesos Ingredientes Mozzarella, Bacon Tomate, Pia, Queso Tomate, Mezcla 4 quesos Precio 8 7 7
HTML: Objetos externos

MiApplet.java
import java.lang.*; import java.applet.*; import java.awt.*; public class MiApplet extends Applet { public void paint(Graphics g) { g.drawString("Hola desde Java",10,10); } El cdigo se ejecuta en la mquina cliente (visualizador) Compilador de java MiApplet.class
... <applet code=miApplet.class width=500 height=500 > Aqu vena un applet que saludaba </applet> ...
Ventaja: Liberar al servidor de ejecutar tareas Desventaja: Seguridad?
Tambin puede usarse
<object codetype=application/java classid=MiApplet.class width=500 height=500> Aqu vena un applet que saludaba </object>
NOTA: Object es ms general y se adaptar a otros usos en el futuro
30
HTML: Mapas de imgenes

<object data="dibujo.gif" width="250" height="250" type="image/gif" usemap="#mapa1"> <map name="mapa1"> Barra de navegacin <area href="WWW.html" shape="rect" coords="0,0,250,125" alt="WWW"> <area href="XML.html" shape="rect" coords="0,125,250,250" alt="XML"> </map> </object>
HTML: Marcos
<html> <head> <title>Ejemplo con marcos</title> </head> <frameset rows="10%,*"> <frame src="superior.html"> Se puede asignar un nombre <frameset cols="40%,60%"> para hacer referencias <frame src=Indice.html"> <frame name=Principal src="Pizzas.html"> <a href=Enlace.html target=Principal>Enlace</a> </frameset> <noframes> informacin sin marcos </noframes> </frameset> </html>
31
HTML: Formularios
<form action="http://www.mafia.it/cgi-bin/nuevoSocio" method="get"> Nombre: <input type="text" id="nombre"><br/> Apellido <input type="text" id="apell"><br/> email: <input type="text" id="email"><br/> <select name="sexo"> <option selected value="H">Hombre</option> <option value="M">Mujer</option> </select> <textarea name="Comentarios" rows="5" cols="50"> <<Inserta aqu tus comentarios>> </textarea> <input type="submit" value="Enva"> <input type="reset value="Borra" > </form>
Al pulsar Enva se le pasan los valores a esa url Se realiza una computacin en el servidor Posibilidades: CGI, Servlets, PHP, ASP, etc
HTML: Scripts
La etiqueta <script> permite incluir guiones (scripts) Son interpretados por navegador (JavaScript, VBScript, etc.)
<head> <script type="text/javascript"> <!-if (document.images) { coche1 = new Image(128,128); coche2 = new Image(128,128); coche1.src = "coche1.gif"; coche2.src = "coche2.gif"; } function cambia(name, image) { if (document.images) {document[name].src = eval(image+".src"); }} // --> </script> Al avanzar el ratn </head> cambia la imagen <body> <img name="coche1 width="128" height="128 Computacin en cliente onMouseOver=' cambia("coche1", "coche2")' Depende de las posibilidades del visualizador onMouseOut = cambia("coche1", "coche1")'> src="coche1.gif /> </body>
32
Servidor Web
Qu es un servidor Web?
Un programa que atiende las peticiones HTTP llegadas a un puerto determinado de la mquina
Tambin se denomina as, por extensin, a la mquina que cuenta con uno de tales programas
Ejemplos de servidores Web:

Apache
Apache HTTP Server Project
http://httpd.apache.org/
Internet Information Server (IIS)
33
Pginas estticas
Al principio, el Web estaba poblado nicamente por pginas estticas
El servidor Web simplemente localizaba el documento solicitado en el URL y se lo entregaba al cliente
Este enfoque puede ser perfectamente vlido para muchos sitios

Siempre y cuando no requieran actualizaciones continuas
Pero no permitira, por ejemplo, crear un sitio de comercio electrnico donde se pueda comprar, o el de un banco
Es necesario acceder a datos en el servidor y crear una pgina a peticin
Funcionamiento de las pginas estticas

pagina.html
En el navegador se vera
17/10/2005
<html><head></head> <body> <h1>17/10/2005</h1> </body> </html>
R p P e a e s g t p in ic u a i e .h n s t t m a l
34
Funcionamiento de las pginas dinmicas

pagina.php <html><head></head> <body> <?php printf(<h1>%s</h1>, date(d/m/Y)); ?> </body> </html>
R p P e a e s g t p in ic u a i e .h n s t t m a l
Motor PHP
En el navegador se vera
18/10/2005
Modo de funcionamiento
El servidor Web detecta una peticin de una pgina dinmica y se la pasa al programa necesario
Podra ser una extensin del servidor O bien un programa completamente independiente
ste programa es quien sabe cmo interpretar el cdigo de la pgina para devolver el HTML apropiado Diversas tecnologas
CGIs, ASP, JSP, Servlets, etc.
35
CGI
CGI fue la primera tecnologa que permiti crear pginas dinmicas, que realizaban algn tipo de procesamiento en el lado del servidor.
CGI: Common Gateway Interface

Es un estndar que permite el intercambio de informacin entre servidores Web y programas externos As, mientras que un documento HTML es esttico (un fichero de texto que no cambia), un programa CGI permite mostrar informacin dinmica, al ejecutarse
Por ejemplo, puede hacer una consulta a una base de datos ubicada en el servidor y mostrar los resultados en HTML
36
Introduccin
/cgi-bin/buscar.cgi?texto=web standards
Los datos del formulario son enviados va HTTP HTTP
El servidor Web invoca al programa CGI pasndole los parmetros recibidos
El usuario, por ejemplo, rellena un formulario y pulsa el botn de enviar
Y ste devuelve el resultado al servidor por medio de la salida estndar
Cmo obtiene el programa los datos necesarios?

Hay dos formas posibles en que el servidor Web puede pasarle los datos al programa CGI:
Mediante las variables de entorno Mediante la entrada estndar (stdin) est
37
Variables de entorno
La tabla siguiente muestra alguna de las variables de entorno:
(Puede verse una lista completa en http://hoohoo.ncsa.uiuc.edu/cgi/env.html) Variable
SERVER_NAME QUERY_STRING
Descripcin
El nombre del servidor o su direccin IP La informacin que sigue al ? en el URL que referencia a este programa
Para consultas que llevan asociada informacin (por ejemplo, las CONTENT_LENGTH hechas mediante POST), el tamao en bytes de dicha respuesta
PATH_INFO
Acceder a las variables de entorno

La forma de acceder al contenido de dichas variables desde el programa CGI vara dependiendo del lenguaje en que haya sido escrito
Por ejemplo, a continuacin se muestra cmo acceder al valor de la variable SERVER_NAME en C y en Perl:
C Perl
getenv("SERVER_NAME") $ENV{'SERVER_NAME'}
38
Ejemplo
El siguiente programa CGI en Perl muestra el valor de todas las variables de entorno:
#!/usr/bin/perl print "Content-type: text/html\n\n"; foreach $key (keys %ENV) { print "$key --> $ENV{$key}<br>"; }
Mantenimiento de la sesin
39
HTTP, protocolo sin estado

HTTP es un protocolo sin estado Esto significa que para el servidor Web cada peticin de una pgina es nica
No tendra forma de saber, por ejemplo, que ese usuario acaba de aadir un producto a su carrito, o si ya se valid o no, en qu punto del proceso de compra se encuentra, etctera
Son necesarias alternativas software, por tanto, que permitan simular el estado
Alternativas para mantener sesin

Algunas de las alternativas son:
Usar el objeto Session (o similar) provisto por los entornos de programacin como ASP o J2EE (Servlets, JSP...) Almacenar toda la informacin de la sesin, a mano, en una cookie (por ejemplo, mediante JavaScript) Una combinacin de cookie (para guardar un ID de usuario) y bases de datos URL rewriting rewriting Etctera
40
Qu son las cookies?

Las cookies son pequeas porciones datos que son almacenados localmente por el navegador en forma de pequeos ficheros de texto Cada vez que el cliente enva informacin al servidor, incluye en la peticin HTTP las cookies que previamente haya guardado provenientes de ese servidor
Detalles de implementacin
Segn la especificacin, un agente de usuario (es decir, un navegador), debe permitir al menos:
Un total de 300 cookies Hasta 4 KB (4.096 bytes) por cookie Al menos 20 cookies de un servidor dado
El navegador se encarga automticamente de eliminar aqullas que hace ms tiempo que no se utilizan cuando necesita guardar nuevas cookies
41
Sintaxis
Cada cookie presenta la siguiente sintaxis general:
nombre=valor; [expires=fecha; path=directorio; nombre=valor; [expires=fecha; path=directorio; domain=nombreDeDominio; secure] domain=nombreDeDominio; secure]
Lo nico obligatorio es que tenga un nombre y un valor asociado; el resto de atributos son opcionales
Aunque tambin se utiliza bastante el atributo expires
Descripcin de los atributos

Un par nombre = valor
Por ejemplo: IDUsuario = 49; expires Hasta cundo ser vlida la cookie Debe ir en este formato: Wdy, DD-Mon-YYYY Wdy, DD-MonHH:MM:SS GMT
Si no se dice nada, la cookie ser eliminada al terminar la sesin

Es decir, al cerrar la ventana actual del navegador
path El conjunto de directorios del servidor para los que es vlida esta cookie (por omisin, ser el raz /, es decir, todos)
42
Descripcin de los atributos (2)

domain El servidor o nombre de dominio para el que es vlida la cookie Una cookie slo puede ser leda y modificada desde el servidor y directorio especificados en la cookie cuando sta fue creada secure Es booleano; si est definido (si aparece el atributo) deber haber una conexin segura (https) para que la cookie sea enviada
URL Rewriting
Consiste en incluir la informacin del estado en el propio URL
//comprar.asp?paso=3&producto1=01992CX &producto2=ZZ112230&producto3=HJ19X25 &producto2=ZZ112230&producto3=HJ19X25
No es de recibo en aplicaciones serias

Un cliente puede iniciar dos o ms sesiones simultneas, pginas tediosas de programar, slo se puede usar el mtodo GET, etc.
43
Ventajas del uso de cookies

Menor uso de los recursos del servidor
Los servidores sin estado no necesitan reservar y mantener recursos para guardar el estado de la sesin Al no tener estado, cualquier servidor puede atender a cualquier cliente No hace falta que un cliente siempre sea atendido por el mismo servidor, ni ningn tipo de distribucin del estado entre servidores
Fcil escalabilidad y uso de clusters
La sesin del cliente podra sobrevivir a una cada del servidor

Un reintento por parte del cliente con el mismo URL suele funcionar
Inconvenientes del uso de cookies

Privacidad
Otros servidores podran leer informacin almacenada en las cookies del cliente No son vlidas para guardar nmeros de tarjeta, contraseas y cosas por el estilo Un usuario podra modificar el fichero de una cookie Lo mismo ocurre con otros mecanismos de cliente: URL, formularios, etc. El estado se transmite con cada peticin al servidor
Los datos pueden ser alterados
Aumenta el trfico por la red
44
Inconvenientes del uso de cookies

Implementacin compleja
Mantener a mano el estado en el cliente puede ser realmente complicado si queremos hacerlo de manera robusta
Tamao de datos limitado

Tanto el tamao mximo permitido por las cookies como la longitud mxima de un URL pueden darnos problemas para almacenar sesiones complejas
Servidores de aplicaciones
45
Qu es un servidor de aplicaciones?
Es un programa que provee la infraestructura necesaria para las aplicaciones Web empresariales Qu quiere decir esto?
Que los programadores van a poder dedicarse casi en exclusiva a implementar la lgica del dominio, ya que servicios de uso comn, como transacciones, seguridad, persistencia, etc. ya son proporcionados por el servidor Web Se ha convertido en una pieza de software clave para cualquier empresa dedicada al comercio electrnico Es una capa intermedia (middleware que se sita entre middleware) el servidor Web y las aplicaciones y bases de datos subyacentes
Visin general
Aplicacin cliente Aplicacin cliente Aplicacin cliente
(Transacciones, mensajera, servicios Web)
Servidor de aplicaciones
J2EE
CORBA
.NET
SGBD
46
Motivacin
Comienzan a surgir cuando queda claro las aplicaciones cliente/servidor no iban a ser escalables a un gran nmero de usuarios
Debido a las caractersticas de los clientes pesados
Se haca necesario mover las reglas de negocio a algn lugar intermedio entre los clientes y la base de datos Empezaron a surgir productos para hacer esa tarea
Cada compaa los llamaba de una forma distinta Servidores de transacciones, servidores de aplicaciones
Misin
Los llamasen como los llamasen, estaban diseados para gestionar de forma centralizada el modo en que los clientes deban conectarse a la base de datos o a los servicios con los que tenan que interoperar
47
Servicios proporcionados
Creacin y gestin de los componentes del servidor
Por aquel entonces, basados en CORBA o COM
Clustering Equilibrado de carga Transacciones Seguridad Acceso a datos
Servicios proporcionados
48
Gestin de la sesin
El servidor ha de conservar informacin entre peticiones del usuario aalo largo de la El servidor ha de conservar informacin entre peticiones del usuario lo largo de la duracin de una sesin duracin de una sesin
Como sabemos, HTTP es un protocolo sin sesin

No permite mantener una conexin abierta entre el cliente y el servidor ms all de lo que dura la transferencia del documento en cuestin
En cualquier aplicacin de comercio electrnico, es necesario poder identificar al usuario a travs de su navegacin por el sitio Web
Autenticacin, adicin de productos al carrito de la compra, etc.
Gestin de la sesin (2)

La implementacin a mano se complicara enormemente en el caso de contar con varios servidores (equilibrado de carga)
La peticin de un usuario registrado en la mquina A puede ser redirigida al servidor B
Lo lgico es que sea el servidor de aplicaciones quien se encargue de gestionar la sesin

Adems, debera ser ms eficiente que si lo programamos nosotros mismos
49
Equilibrado de carga
Los servidores de aplicaciones proporcionan mecanismos de equilibrado de carga Los servidores de aplicaciones proporcionan mecanismos de equilibrado de carga (aspecto clave para la escalabilidad) (aspecto clave para la escalabilidad)
Por equilibrado de carga (load balancing) se entiende la capacidad de repartir el procesamiento entre distintos servidores
Las peticiones de los clientes se redirigen a la mquina que ms desocupada se encuentre en ese momento Mejora de rendimiento de la aplicacin
No es tan sencillo como aadir una nueva mquina y ya est Adems de la escalabilidad, se consigue una mayor tolerancia a fallos
Acceso a datos
Los servidores de aplicaciones proveen facilidades para administrar conexiones a bases de datos relacionales
Oracle, SQL Server, DB2
Los componentes (las clases que implementan la lgica del negocio) acceden a ellas de forma estndar
Independiente de la base de datos subyacente
Tambin suelen permitir acceder a otros tipos de fuentes de datos:

Tales como distintos ERP (SAP, Vaan...), repositorios XML, etc. Los servidores de aplicaciones son tambin importantes, por tanto, como mecanismo de integracin de sistemas heredados
50
Pooling de conexiones
Abrir una conexin a una base de datos suele ser un proceso costoso
No es viable abrir una nueva conexin por cada consulta a la base de datos Penalizara enormemente el rendimiento de la aplicacin
Los servidores de aplicaciones suelen contar con una serie de conexiones permanentemente abiertas que distribuye de forma transparente a los distintos procesos
Se debera poder configurar el nmero de conexiones abiertas, e incluso la poltica de asignacin
Gestin transaccional
Transaccin: secuencia de pasos que, oose ejecutan todos, oosi no el sistema Transaccin: secuencia de pasos que, se ejecutan todos, si no el sistema queda en el estado original queda en el estado original
Son un elemento bsico de cualquier aplicacin comercial

Evitan que haya informacin inconsistente
Sera complejsimo implementarlas a mano Con un servidor de aplicaciones que tenga esta caracterstica, bastara con indicarle dnde empieza y termina la transaccin
Encargndose l de deshacer los pasos intermedios en caso de un error del sistema
51
Tecnologas actuales
Actualmente, las dos plataformas ms comunes son J2EE y, ms recientemente, ha surgido .NET
De hecho, hasta hace poco hablar de servidores de aplicaciones era prcticamente hablar de J2EE
(aunque no debemos hacer tal asociacin)
Ejemplo: arquitectura J2EE

Mquina Cliente Navegador Navegador Contenedor Aplicacin Cliente Aplicacin Aplicacin Cliente Cliente Servidor J2EE Contenedor Web Servlets Pginas JSP Base Datos
Contenedor EJBs EJB EJB
52

Introduccion Al Web

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Introduccion Al Web

Enviado por

Direitos autorais:

Formatos disponíveis

Introduccin al Desarrollo de Aplicaciones Web

World Wide Web

Arquitectura cliente/servidor Pginas estticas/dinmicas

PDF Creator - PDF4Free v2.0

Internet: millones de ordenadores conectados

PDF Creator - PDF4Free v2.0

Acceso corporativo wireless

Transmission Control Protocol (TCP) Internet Protocol (IP)

PDF Creator - PDF4Free v2.0

Capa de Internet (IP)

Capa de transporte (TCP)

Capa de Aplicacin Capa de Transporte Capa de Internet Capa de red

PDF Creator - PDF4Free v2.0

Encaminamiento de paquetes TCP/IP

PDF Creator - PDF4Free v2.0

PDF Creator - PDF4Free v2.0

World Wide Web

PDF Creator - PDF4Free v2.0

Nacimiento del World Wide Web

Lenguaje de Marcado de Hipertexto

Berners-Lee cre las versiones iniciales de:

PDF Creator - PDF4Free v2.0

Esquema general Cliente/Servidor

Visin general del Web

PDF Creator - PDF4Free v2.0

Visin general del Web

El cliente busca en el DNS cul es la IP de www.uniovi.es: 156.35.14.3

Visin general del Web

PDF Creator - PDF4Free v2.0

Funcionamiento del Web

Tecleamos una direccin en el navegador (por ejemplo, www.euitio.uniovi.es)

Y el navegador se encarga de interpretar el cdigo HTML y mostrar el resultado

PDF Creator - PDF4Free v2.0

El usuario accede al Web a travs de un navegador (browser)

Es un protocolo sin estado

PDF Creator - PDF4Free v2.0

Ejemplo de mensaje HTTP

Define cdigos de respuestas

PDF Creator - PDF4Free v2.0

PDF Creator - PDF4Free v2.0

URL: Uniform Resource Locator

URN: Uniform Resource Name

IRI: Internationalized Resource Identifier

PDF Creator - PDF4Free v2.0

file ftp http

PDF Creator - PDF4Free v2.0

Direccin del sitio

Direccin del sitio

Los nombres de dominio no distinguen entre maysculas y minsculas

PDF Creator - PDF4Free v2.0

Si no la ponemos, la pone el navegador por nosotros

Tambin se puede indicar un subdirectorio:

Nombre del fichero

PDF Creator - PDF4Free v2.0

Nombre del fichero

PDF Creator - PDF4Free v2.0

PDF Creator - PDF4Free v2.0

Necesitamos un modo de indicarle la estructura del documento

PDF Creator - PDF4Free v2.0

HTML, lenguaje de hipertexto

PDF Creator - PDF4Free v2.0

Estructura de documentos HTML