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.

World Wide Web

HTTP
URLs
Unicode
HTML

Servidor Web
Arquitectura cliente/servidor
Pginas estticas/dinmicas

Servidor de Aplicaciones
Servicios
2007-2008

DASDI

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

2007-2008

DASDI

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.
2007-2008

DASDI

Internet
Router ISP local

Modem

ISP regional

servidores

Telefona mvil

Acceso
particular

Acceso corporativo
wireless
2007-2008

DASDI

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

2007-2008

DASDI

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

Capa de Internet (IP)

Esquema de direcciones, encaminamiento de los
mensajes

Capa de transporte (TCP)

Enva acuses de recibo, reagrupa el mensaje en destino,
vuelve a mandar los paquetes perdidos o
defectuosos
No garantiza tiempos de transmisin

Capa de aplicacin: programas que hacen uso de los

servicios proporcionados por las capas inferiores
HTTP (HyperText Transfer Protocol), FTP (File Transfer
Protocol), SMTP (Simple Mail Transfer Protocol)
2007-2008

DASDI

Arquitectura de TCP/IP

Capa de
Aplicacin

HTTP

Telnet

FTP

SMTP

Capa de
Transporte

TCP

Capa de
Internet

IP

Capa
de red

2007-2008

Ethernet

DASDI

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

router

router

router

router

Emisor

router

router

2007-2008

3. El protocolo TCP
ensambla los
paquetes para
obtener el
mensaje original

DASDI

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)

2007-2008

DASDI

10

Capa de Aplicacin
Diversas protocolos de aplicacin
SMTP (correo electrnico)
FTP (intercambio ficheros)
IRC (Chat)
HTTP (hipertexto)
DNS (nombres dominio)

2007-2008

DASDI

11

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

2007-2008

DASDI

12

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
2007-2008

DASDI

14

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
HTML,
HTTP, un servidor Web y un navegador
Los cuatro componentes esenciales de la Web

2007-2008

DASDI

15

Esquema general Cliente/Servidor

Peticin
Red
Servidor

Respuesta
Cliente
2007-2008

DASDI

16

Visin general del Web

www.uniovi.es
index.html

Internet

enlace

El usuario teclea http://www.uniovi.es/

en su navegador

www.euitio.uniovi.es
2007-2008

DASDI

17

Visin general del Web

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

2007-2008

DASDI

18

Visin general del Web

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

2007-2008

DASDI

19

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

2007-2008

DASDI

21

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

2007-2008

DASDI

22

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

2007-2008

DASDI

23

Ejemplo de mensaje HTTP

Peticin
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
2007-2008

DASDI

24

Especificacin de HTTP
Tipos de peticiones
GET, HEAD, POST, PUT, DELETE,

Define cdigos de respuestas

200
400
401
403
404
...

2007-2008

OK
Bad Request
Unauthorized
Forbidden
Not Found

DASDI

25

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

2007-2008

DASDI

27

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.
2007-2008
DASDI

28

URIs

URIs
URI: Uniform Resource Identifier

URL: Uniform Resource Locator

Adems de un 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

2007-2008

DASDI

30

Sintaxis de un URL
protocolo://direccin[:puerto]/directorio/fichero

Ejemplos:
http://www.princast.es/
http://195.55.30.17/
http://www.cfacebal.com/
http://www.cfacebal.com/index.html
http://web.uniovi.es/Vicerrectorados/Extension/
http://localhost:8080/
http://petra.euitio.uniovi.es/
2007-2008

DASDI

31

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)
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

2007-2008

DASDI

32

Ejemplos de protocolos

file
ftp

Permite acceder a un fichero en el

sistema de ficheros local
File Transfer Protocol

http

Pginas Web

2007-2008

DASDI

33

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

2007-2008

DASDI

34

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/
2007-2008

DASDI

35

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
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)
2007-2008

DASDI

36

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

2007-2008

DASDI

37

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...)

2007-2008

DASDI

38

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//

2007-2008

DASDI

39

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)

2007-2008

DASDI

41

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
2007-2008

DASDI

42

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

Pero un ordenador slo vera un montn de caracteres

Necesitamos un modo de indicarle la estructura del documento

2007-2008

DASDI

43

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
2007-2008

DASDI

44

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

2007-2008

DASDI

45

Ejemplo de HTML
Cabecera
Cuerpo

Lista
Enlaces

AlCapone.html
<html>
<head>
<title>Pizzeria Al Capone</title>
</head>
<body bgcolor="blue" text="yellow"
link="red" vlink="white">

Pgina visualizada

<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>

<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>
2007-2008

DASDI

46

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

2007-2008

DASDI

47

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>

2007-2008

DASDI

48

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

2007-2008

DASDI

49

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">
2007-2008

DASDI

50

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>
2007-2008

DASDI

51

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
&nbsp; 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>
2007-2008

DASDI

52

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>




<ol>
<li>Primer valor</li>
<li>Segundo valor</li>
</ol>
2007-2008

Primer valor
Segundo valor

1. Primer valor
2. Segundo valor

DASDI

53

HTML: Listas de definiciones

Listas de definiciones <dl> (definition-list)
Trmino de definicin <dt> (definition-term)
Descripcin de definicin <dd> (definition-description)

<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>XML</dt>
<dd>eXtensible Markup Language</dd>
</dl>

2007-2008

DASDI

HTML
Hypertext markup
Language
XML
eXtensible Markup
Language

54

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

Direccin absoluta
Direccin interna

pizzas.html
http://www.mafia.it
#contacto

<a name=contacto>Informacin de contacto</a>

...
2007-2008

DASDI

55

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>

2007-2008

DASDI

56

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

2007-2008

C/ Gnova N 3, Oviedo, Espaa</p>

<p><span class="item">Telfono:</span>
985203040</p>
</div>

DASDI

57

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 &euro;</td></tr>
<tr><td>Hawaiana</td><td>Tomate, Pia, Queso</td><td>7&euro;</td></tr>
<tr><td>4 quesos</td><td>Tomate, Mezcla 4 quesos</td><td>7 &euro;</td></tr>
</table>
Pizzas Disponibles

2007-2008

Nombre

Ingredientes

Precio

Barbacoa

Mozzarella, Bacon

Hawaiana

Tomate, Pia, Queso

4 Quesos

Tomate, Mezcla 4 quesos

DASDI

58

HTML: Objetos externos

MiApplet.java
import java.lang.*;
import java.applet.*;
import java.awt.*;

Compilador
de
java

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)

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

2007-2008

DASDI

59

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>

2007-2008

DASDI

60

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>

2007-2008

DASDI

61

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>

2007-2008

DASDI

Al pulsar Enva se le pasan

los valores a esa url
Se realiza una computacin
en el servidor
Posibilidades:
CGI, Servlets, PHP, ASP, etc

62

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 />
2007-2008
DASDI
63
</body>

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)

2007-2008

DASDI

65

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

2007-2008

DASDI

66

Funcionamiento de las pginas

estticas
pagina.html
<html><head></head>
<body>
<h1>17/10/2005</h1>
</body>
</html>

En el navegador
se vera

17/10/2005

2007-2008

<html><head></head>
<body>
<h1>17/10/2005</h1>
</body>
</html>

DASDI

67

Funcionamiento de las pginas

dinmicas
pagina.php

Motor
PHP

En el navegador
se vera

18/10/2005

2007-2008

<html><head></head>
<body>
<?php
printf(<h1>%s</h1>,
date(d/m/Y));
?>
</body>
</html>

<html><head></head>
<body>
<h1>18/10/2005</h1>
</body>
</html>

DASDI

68

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.

2007-2008

DASDI

69

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
2007-2008

DASDI

71

CGI: Esquema
/cgi-bin/buscar.cgi?texto=web standards

Los datos del

formulario son
enviados va HTTP
HTTP

El usuario, por
ejemplo, rellena un
formulario y pulsa el
botn de enviar

2007-2008

DASDI

El servidor
Web invoca
al programa
CGI
pasndole los
parmetros
recibidos

Y ste devuelve
el resultado al
servidor por
medio de la
salida estndar 72

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)

2007-2008

DASDI

73

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

Descripcin

SERVER_NAME

El nombre del servidor o su direccin

IP

QUERY_STRING

La informacin que sigue al ? en el

URL que referencia a este programa

Para consultas que llevan asociada

CONTENT_LENGTH informacin (por ejemplo, las
hechas mediante POST), el tamao
en bytes de dicha respuesta
PATH_INFO
2007-2008

DASDI

74

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:

2007-2008

getenv("SERVER_NAME")

Perl

$ENV{'SERVER_NAME'}

DASDI

75

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>";
}

2007-2008

DASDI

76

Mantenimiento de la sesin

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

2007-2008

DASDI

78

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
Etctera

2007-2008

DASDI

79

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
2007-2008

DASDI

80

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
2007-2008

DASDI

81

Sintaxis
Cada cookie presenta la siguiente
sintaxis general:
nombre=valor; [expires=fecha; path=directorio;
domain=nombreDeDominio; secure]

Lo nico obligatorio es que tenga un

nombre y un valor asociado; el
resto de atributos son opcionales
2007-2008

Aunque tambin se utiliza bastante el

atributo expires
DASDI

82

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, DDDD-Mon
Mon-YYYY
HH: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)
2007-2008

DASDI

83

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

2007-2008

Es booleano; si est definido (si aparece

el atributo) deber haber una conexin
segura (https) para que la cookie sea
DASDI
84
enviada

URL Rewriting
Consiste en incluir la informacin del
estado en el propio URL
//comprar.asp?paso=3&producto1=01992CX
&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.
2007-2008

DASDI

85

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

Fcil escalabilidad y uso de clusters

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

La sesin del cliente podra sobrevivir a una

cada del servidor
Un reintento por parte del cliente con el mismo
URL suele funcionar
2007-2008

DASDI

86

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

Los datos pueden ser alterados

Un usuario podra modificar el fichero de una
cookie
Lo mismo ocurre con otros mecanismos de
cliente: URL, formularios, etc.

Aumenta el trfico por la red

El estado se transmite con cada peticin al
servidor
2007-2008

DASDI

87

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
2007-2008

DASDI

88

Servidores de aplicaciones

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
middleware) que se sita entre
el servidor Web y las aplicaciones y bases de datos
subyacentes
2007-2008

DASDI

90

Visin general
Aplicacin
cliente

Aplicacin
cliente

Aplicacin
cliente

Servidor de aplicaciones
(Transacciones, mensajera, servicios Web)

CORBA

J2EE

.NET

SGBD
2007-2008

DASDI

91

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
2007-2008

DASDI

92

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

2007-2008

DASDI

93

Servicios proporcionados

Ciclo de vida de componentes

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

Invocacin remota
Deploy
Theading
Pooling de recursos
Caching

2007-2008

DASDI

94

Servicios proporcionados

Gestin de la sesin
El servidor ha de conservar informacin entre peticiones del usuario a lo largo de la
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.

2007-2008

DASDI

96

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

2007-2008

DASDI

97

Equilibrado de carga
Los servidores de aplicaciones proporcionan mecanismos de equilibrado de carga
(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
2007-2008

DASDI

98

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

2007-2008

DASDI

99

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

2007-2008

Se debera poder configurar el nmero de

conexiones abiertas, e incluso la poltica de
asignacin
DASDI

100

Gestin transaccional
Transaccin: secuencia de pasos que, o se ejecutan todos, o si no el sistema
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
2007-2008

Encargndose l de deshacer los pasos

DASDI de un error del sistema
intermedios en caso

101

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)

2007-2008

DASDI

102

Ejemplo: arquitectura J2EE

Mquina
Cliente

Servidor J2EE
Contenedor Web

Navegador
Servlets
Contenedor
Aplicacin
Cliente
Aplicacin
Cliente

2007-2008

Pginas
JSP

Contenedor EJBs
EJB

DASDI

Base
Datos

EJB

103