Introduccion Al Web PDF

Introducción al
Desarrollo de
Aplicaciones Web
Asignatura: Desarrollo de Aplicaciones en Sistemas Distribuidos e Internet
Escuela Universitaria Ingeniería Técnica Informática 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
Páginas estáticas/dinámicas
Servidor de Aplicaciones
Servicios
1
PDF Creator - PDF4Free v2.0 http://www.pdf4free.com
Introducción a Internet
Web = vasta colección de documentos
en Internet enlazados a través de
hiperenlaces
Ü Internet: millones de ordenadores conectados
Conjunto de redes heterogéneas 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
ubicació
ubicación
Evolución de Internet
(60-80) Origen militar
Protocolos de comunicación (TCP/IP)
Seguridad ante ataques (múltiples servidores)
(80 – 90) Implantación académica
Protocolos de intercambio de información (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: Computación ubicua, Web semántica,
etc.
2
Internet
Router ISP local
ISP regional
Modem servidores Telefonía móvil
Acceso particular
Acceso corporativo
wireless
Protocolo TCP/IP
Se encarga de llevar a cabo la conmutación 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
3
Cuatro capas
La familia de protocolos TCP/IP se divide en 4
capas:
Capa de red: de más bajo nivel
Representa el medio físico encargado de enviar en
última instancia los 0 y 1 que componen cada mensaje
Diversas tecnologías: Ethernet, ATM…
Capa de Internet (IP)
Esquema de direcciones, encaminamiento de los
mensajes…
Capa de transporte (TCP)
Envía acuses de recibo, reagrupa el mensaje en destino,
vuelve a mandar los paquetes perdidos o
defectuosos…
No garantiza tiempos de transmisión
Capa de aplicación: 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)…
Arquitectura de TCP/IP
Capa de
Aplicación HTTP Telnet FTP SMTP …
Capa de
Transporte TCP
Capa de IP
Internet
Token Frame ATM
Capa Ethernet
Ring Relay
de red
4
Encaminamiento de paquetes TCP/IP
1. El protocolo TCP
2. Los paquetes
trocea los datos 3. El protocolo TCP
viajan de router
en paquetes ensambla los
a router según
protocolo IP paquetes para
obtener el
mensaje original
router
router
router
router
Emisor Receptor
router router
Direcciones IP
Cada ordenador conectado a Internet (=Host) debe
tener una dirección para poder recibir los paquetes
TCP
Puede ser:
Estática
Fija, siempre la misma
Dinámica
Por ejemplo, cada vez que nos conectamos a Internet con un
módem telefónico, nuestro proveedor de Internet (ISP,
Internet Service Provider) nos asigna una dirección temporal
Las direcciones IP son números 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 más de cuatro mil millones)
5
IPv6
Problema: cada vez más y más dispositivos
conectados. Esquema de direcciones
pequeño…
Se está desarrollando una nueva versión,
denominada IPv6 para sustituir a la actual
(IPv4), que con 128 bits podrá tener 3,4 ×
1038 direcciones
También mejora otras deficiencias de IPv4
Capa de Aplicación
Diversas protocolos de aplicación

SMTP (correo electrónico)
FTP (intercambio ficheros)
IRC (Chat)
HTTP (hipertexto)
DNS (nombres dominio)
…
6
Nombres de dominio
DNS (sistema de nombres de domino) permite
asociar nombres lógicos a direcciones IP
DNS es una base de datos distribuida
Ejemplo: www.euitio.uniovi.es – 156.35.94.5
World Wide Web
7
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,
navegador y el servidor el programa que hace de
servidor Web que está ejecutándose 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 partículas (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,
HTML HTTP,
HTTP un servidor Web y un navegador
Los cuatro componentes esenciales de la Web
8
Esquema general Cliente/Servidor
Petición
Red
Servidor
Respuesta
Cliente
Visión general del Web

www.uniovi.es
index.html
Internet
Internet enlace
El usuario teclea http://www.uniovi.es/

en su navegador
www.euitio.uniovi.es
9
El usuario solicita un documento tecleando su dirección en

el navegador: http://www.uniovi.es
Es lo que se denomina un URL (localizador uniforme de
recursos)
El cliente busca en el DNS cuál es la IP de www.uniovi.es:
156.35.14.3
Cada ordenador en Internet está identificado por una dirección
única denominada IP
El DNS traduce de nombres lógicos a direcciones físicas
Navegador y servidor web comienzan un diálogo a través
del protocolo HTTP (protocolo de transferencia de
hipertexto)
GET /HTTP/1.0
El servidor, si todo es correcto, devuelve el documento
solicitado más información 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 envía una petición al servidor Web
Tecleamos una dirección en

el navegador (por ejemplo,
HTTP
Quien devuelve la página
www.euitio.uniovi.es)
solicitada (en este caso, la
index.html del directorio raíz)
Y el navegador se
encarga de interpretar
el código HTML y
mostrar el resultado
11
Funcionamiento de la Web
Un servidor Web es un ordenador en

Internet que sirve páginas Web y
contenido estático en general a petición
Para ello, debe tener un programa ejecutándose
que haga de servidor Web: Apache, IIS,
etcétera
El usuario accede al Web a través de un
navegador (browser)
Se encarga de solicitar las páginas Web al
servidor y de mostrarlas
HTTP
HTTP (HyperText Transform Protocol) es el
protocolo usado para transferir páginas Web
Es el modo en que un navegador se comunica con un
servidor Web (Apache, Internet Information
Server…)
Es un protocolo sin estado
La sesión termina en cuanto se devuelve el objeto
solicitado
Incluso, si una página contiene otros objetos
(imágenes, frames, etc.) cada uno de ellos inicia
una nueva petición HTTP
12
Ejemplo de mensaje HTTP
Petició
Petición
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
Especificación de HTTP
Tipos de peticiones
GET, HEAD, POST, PUT, DELETE, …
Define códigos de respuestas
200 – OK
400 – Bad Request
401 – Unauthorized
403 – Forbidden
404 – Not Found
...
13
Unicode
m
co
e.
re
4f
df
.p
w
w
w
://
tp
ht
Representación de caracteres
Representación 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 típicos de Europa occidental
Familia ISO-8859-X = Otros alfabetos europeos
ISO-8859-15 (iso-latin-9) Igual que iso-8859-1 + símbolo de €
m
re
te
ac
om
ho
.
sc
¡C.0
s.
ar
uc
y
m
as
ho
AD
uc
ID
di
si
U
ha
€ O!
..
v2
ee
Fr
F4
PD
-
or
at
re
C
F
14
PD
Unicode
ISO-10646 (31 bits) Define un repertorio universal de caracteres (UCS)
En continua revisión: ISO-10646-2:2001 contiene más de 70.000
caracteres
UNICODE = Consorcio de empresas que define restricciones sobre la
implementación de ISO-10646
Varias codificaciones (UTF = Unicode Transformation Format)
- UTF-8: Los primeros 127 códigos se presentan igual (compatible con
ASCII)
El resto se codifican en longitud variable
Relativamente Eficiente
- UTF-16: Usa 16bits para los caracteres más comunes, el resto con pares
de 16 bits
- UTF-32: Codificación directa en 32 bits (desperdicio de espacio)
NOTA: Conviene distinguir:

Carácter: Entidad abstracta (Letra A)
Glifo (Glyph): Representación del carácter 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
Además 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://dirección[:puerto]/directorio/fichero
protocolo://dirección[:puerto]/directorio/fichero
Ejemplos:
http://
http://www.princast.es
www.princast.es/ /
http://195.55.30.17/
http://195.55.30.17/
http://
http://www.cfacebal.com
www.cfacebal.com/ /
http://
http://www.cfacebal.com
www.cfacebal.com/ /index.html
http://
http://web.uniovi.es
web.uniovi.es/Vicerrectorados/
/Vicerrectorados/Extension
Extension/
/
http://
http://localhost
localhost:8080/
:8080/
http://
http://petra.euitio.uniovi.es
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
(HyperText Transfer Protocol)
Protocol)
Especifica cómo tiene lugar el diálogo entre el
navegador y el servidor para conseguir el fichero
especificado
No se ocupa del transporte en sí: TCP
Cada vez que tecleamos una dirección o pulsamos
un enlace el navegador se comunica vía HTTP con
el servidor Web indicado
Ejemplos de protocolos
file Permite acceder a un fichero en el

sistema de ficheros local
ftp File Transfer Protocol
http Páginas Web
17
Dirección del sitio
Suele ser un nombre simbólico: nombre de
dominio
www.uniovi.es especifica una máquina llamada
“www” en el dominio “uniovi.es”
El nombre de máquina puede ser cualquiera
“www” no es más que un convenio para
especificar aquellas máquinas que son
servidores Web
como “ftp” suele designar a los servidores de
FTP
incluso aunque muchas veces se trate de la
misma máquina
Dirección del sitio
También podría ser directamente la

dirección IP
http://156.35.14.3/
Los nombres de dominio no
distinguen entre mayúsculas y
minúsculas
http://www.uniovi.es/
http://WWW.UNIOVI.ES/
http://wWw.UniOvi.es/
18
Directorio
Hay que indicar la ruta hasta el fichero deseado
Como mínimo, debe ir la barra (“/”)
http://
http://www.uniovi.es
www.uniovi.es/
/
Si no la ponemos, la pone el navegador por nosotros
...pero en los enlaces en HTML sí debe aparecer
También se puede indicar un subdirectorio:
http://
http://www.uniovi.es
www.uniovi.es/Vicerrectorados/
/Vicerrectorados/Postgrado_Tit
Postgrado_Tit
ulosPropios/doctorado/
ulosPropios/doctorado/
Siempre se usa la barra “/”, no “\” (incluso aunque el
servidor Web sea una máquina Windows: está
definido por el estándar URI, no depende del SO)
La ruta sí puede diferenciar entre mayúsculas y
minúsculas (si el servidor Web es, por ejemplo,
una máquina Unix)
Nombre del fichero

Depende del SO del servidor Web
Las páginas Web generalmente tienen como
extensión .html o .htm
Las extensiones son importantes para que
el navegador sepa cómo 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
etcétera
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 omisión, una petición HTTP se
dirige al puerto 80
Por eso casi nunca la especificamos
Pero se podría configurar el servidor
Web para que “escuchase”
peticiones en otro puerto
En ese caso, hay que indicarlo
explícitamente:
http://
http://www.midominio.com
www.midominio.com:8080
:8080//
20
Lenguaje HTML
HTML
Es el lenguaje de creación de páginas Web
Al menos, de las páginas “estáticas”
Era imprescindible que la misma información
se pudiese ver en diferentes plataformas
Por tanto, Berners-Lee diseñó un lenguaje de
estructuración de documentos, no de
presentación (é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 gramática... igual que
el español o cualquier otro lenguaje
informático
Es además un lenguaje informático,
para ser procesado por
ordenadores; pero no es un
lenguaje de programación
¿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 top-
notch 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 tí
título y dos pá
párrafos
Ü Pero un ordenador sósólo verí
vería un montó
montón de caracteres
Necesitamos un modo de indicarle la estructura del documento
22
HTML, lenguaje de hipertexto
Por hipertexto designamos al texto al que se

le añade una propiedad: determinadas
porciones de texto pueden ser enlazadas a
otros documentos
De ahí surge el concepto de navegación:
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
búsqueda de la información
Especificación de HTML
La especificación del lenguaje HTML y

de la mayoría de tecnologías
relacionadas con el Web está
definida por el World Wide Web
Consortium (W3C)
www.w3c.org
23
Ejemplo de HTML
AlCapone.html Página visualizada
<html>
<head>
Cabecera <title>Pizzeria Al Capone</title>
</head>
<body bgcolor="blue" text="yellow"
Cuerpo link="red" vlink="white">
<h1>Pizzería Al Capone</h1>
<p>Lista de enlaces</p>
Lista <ul>
<li><a href="Pizzas.html">
Tipos de Pizzas</a></li>
Enlaces <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">Dirección:</font>
Detalles de C/ Génova Nº 3, Oviedo, España</p>
presentación <p><font color="red">Teléfono:</font>
985203040</p>
</body>
</html>
Estructura de documentos HTML
DTD <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”

“http://www.w3.org/TR/REC-html40/strinct.dtd”
<html>
Cabecera
<head>
...
Cuerpo </head>
<body>
...
</body>
</html>
DTD = Declaración de tipo de documento

Muchos visualizadores asumen tipo HTML por defecto
Su inclusión garantiza mayor compatibilidad y validación
La cabecera incluye información sobre el documento actual (meta-
información)
Título, autor, palabras clave para robots de búsqueda, etc.
El cuerpo incluye el contenido del documento
El formato HTML se basa en la utilización 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 vacíos en HTML
En caso de un elemento vacío puede usarse la

sintaxis:<etiqueta/>
Elemento vacío
<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 título del documento
<meta> especifica meta-información. 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=“Páginas de una pizzería...”>
– Atributo http-equiv: Solicita al servidor que incluya información en la

cabecera de envío
<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 verán más

adelante)
<link rel=“stylesheet” href=“estilo.css”>
<style> especifica estilo del documento (se verá más adelante)
<style type=“text/css”>
body { background: blue; color: yellow }
</style>
26
HTML: Texto
Niveles de encabezado (headings)
h1, h2, h3, h4, h5, h6
Párrafo p
Los saltos de línea son gestionados por el visualizador
br inserta un salto de línea
inserta un espacio pero impide un salto de línea
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> ¡ Primer valor
<li>Segundo valor</li> ¡ Segundo valor
</ul>
<ol>
<li>Primer valor</li> 1. Primer valor
<li>Segundo valor</li> 2. Segundo valor
</ol>
27
HTML: Listas de definiciones
Listas de definiciones <dl> (definition-list)

Término de definición <dt> (definition-term)
Descripción de definición <dd> (definition-description)
<dl> HTML
<dt>HTML</dt> Hypertext markup
<dd>Hypertext Markup Language</dd> Language
<dt>XML</dt> XML
<dd>eXtensible Markup Language</dd> eXtensible Markup
</dl> Language
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>
Dirección relativa
pizzas.html
Lista de enlaces
• Tipos de pizzas Dirección absoluta
• Patrocinadores http://www.mafia.it
• Contacto
Dirección interna
#contacto
<a name=“contacto>Información de contacto</a>
...
28
HTML: Imágenes
<img src=“images/fotoPizza.gif”
width=“500” height=“500” alt=“Foto de una pizza”>
Incluir dimensiones permite El texto alternativo es conveniente incluirlo

al visualizador reservar espacio para visualizadores que no puedan mostrar imágenes
También 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 características de formateo de texto
b (bold, negrita) i (itálica) big (más grande) small (más pequeño) tt
(teletipo)
Control de fuentes
<font size=2 color = “red”> Texto rojo grande</font>
Líneas horizontales <hr>
Es posible agrupar contenidos mediante span y div
span se utiliza dentro de líneas de texto
div se utiliza para bloques de contenido (divide unidades)
Con los atributos “id” o “class” se asigna un nombre lógico
Son útiles para trabajar con <div class=“Datos”>
hojas de estilos <p><span class="item">Dirección:</span>
C/ Génova Nº 3, Oviedo, España</p>
<p><span class="item">Teléfono:</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, Piña, 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 Ingredientes Precio
Barbacoa Mozzarella, Bacon 8€
Hawaiana Tomate, Piña, Queso 7€
4 Quesos Tomate, Mezcla 4 quesos 7€
HTML: Objetos externos

MiApplet.java
import java.lang.*;
import java.applet.*; Compilador de
import java.awt.*; java
MiApplet.class
public class MiApplet extends Applet {
public void paint(Graphics g) {
g.drawString("Hola desde Java",10,10);
}
El código se ...
ejecuta en la <applet code=“miApplet.class” width=“500” height=“500” >
máquina cliente Aquí venía un applet que saludaba
(visualizador) </applet>
...
Ventaja: Liberar al servidor de ejecutar tareas

Desventaja: Seguridad? También puede usarse
<object codetype=“application/java”
classid=“MiApplet.class” width=“500” height=“500”>
Aquí venía un applet que saludaba
</object>
NOTA: Object es más general y se adaptará a otros usos en el futuro
30
HTML: Mapas de imágenes
<object data="dibujo.gif"
width="250" height="250"
type="image/gif" usemap="#mapa1">
<map name="mapa1">
Barra de navegación
<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">
</frameset> <a href=“Enlace.html” target=“Principal”>Enlace</a>
<noframes>
información sin marcos
</noframes>
</frameset>
</html>
31
HTML: Formularios
<form action="http://www.mafia.it/cgi-bin/nuevoSocio"
method="get"> Al pulsar “Envía” se le pasan
Nombre: <input type="text" id="nombre"><br/> los valores a esa url
Apellido <input type="text" id="apell"><br/> Se realiza una computación
email: <input type="text" id="email"><br/> en el servidor
<select name="sexo">
Posibilidades:
<option selected value="H">Hombre</option>
<option value="M">Mujer</option> CGI, Servlets, PHP, ASP, etc
</select>
<textarea name="Comentarios"
rows="5" cols="50">
<<Inserta aquí tus comentarios>>
</textarea>
<input type="submit"
value="Envía">
<input type="reset”
value="Borra" >
</form>
HTML: Scripts
La etiqueta <script> permite incluir guiones (scripts)
Son interpretados por navegador (JavaScript, VBScript, etc.)
<head>
<script type="text/javascript">

</script> Al avanzar el ratón
</head> cambia la imagen
<body>
<img name="coche1“ width="128" height="128“
Computación en cliente
onMouseOver=' cambia("coche1", "coche2")'
onMouseOut = ‘cambia("coche1", "coche1")'> Depende de las posibilidades del visualizador
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 máquina
También se denomina así, por extensión,
a la máquina 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
Páginas estáticas
Al principio, el Web estaba poblado únicamente por
páginas estáticas
El servidor Web simplemente localizaba el documento
solicitado en el URL y se lo entregaba al cliente
Este enfoque puede ser perfectamente válido para
muchos sitios
Siempre y cuando no requieran actualizaciones
continuas …
Pero no permitiría, por ejemplo, crear un sitio de
comercio electrónico donde se pueda comprar, o
el de un banco
Es necesario acceder a datos en el servidor y crear
una página a petición
Funcionamiento de las páginas

estáticas
pagina.html
<html><head></head>
st .ht n
ue na ció
sp gi eti
Re pa P
<body>
a m
l
<h1>17/10/2005</h1>
</body>
</html>
<html><head></head>
En el navegador <body>
se vería <h1>17/10/2005</h1>
</body>
17/10/2005 </html>
34
Funcionamiento de las páginas
dinámicas
pagina.php
<html><head></head>
<body>
st .ht n
ue na ció
sp gi eti
Re pa P <?php
a m
l
printf(“<h1>%s</h1>”,
date(“d/m/Y”));
Motor ?>
PHP </body>
</html>
<html><head></head>
En el navegador <body>
se vería <h1>18/10/2005</h1>
</body>
18/10/2005 </html>
Modo de funcionamiento
El servidor Web detecta una petición de una página
dinámica y se la pasa al programa necesario
Podría ser una extensión del servidor
O bien un programa completamente independiente
Éste programa es quien sabe cómo interpretar el
código de la página para devolver el HTML
apropiado
Diversas tecnologías
CGIs, ASP, JSP, Servlets, etc.
35
CGI
CGI fue la primera tecnología

que permitió crear páginas
dinámicas, que realizaban algún
tipo de procesamiento en el lado
del servidor.
CGI: Common Gateway Interface

Es un estándar que permite el intercambio
de información entre servidores Web y
programas externos
Así, mientras que un documento HTML es
estático (un fichero de texto que no
cambia), un programa CGI permite
mostrar información dinámica, al
ejecutarse
Por ejemplo, puede hacer una consulta a una
base de datos ubicada en el servidor y mostrar
los resultados en HTML
36
Introducción
/cgi-bin/buscar.cgi?texto=“web standards”
El servidor
Web invoca
Los datos del al programa
formulario son CGI
enviados vía HTTP pasándole los
parámetros
HTTP recibidos
El usuario, por
ejemplo, rellena un
formulario y pulsa el
botón de enviar Y éste devuelve
el resultado al
servidor por
medio de la
salida estándar
¿Cómo 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 está
estándar (stdin)
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 Descripción
SERVER_NAME El nombre del servidor o su dirección
IP
QUERY_STRING
La información que sigue al “?” en el
URL que referencia a este programa
Para consultas que llevan asociada
CONTENT_LENGTH
información (por ejemplo, las
hechas mediante POST), el tamaño
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 varía
dependiendo del lenguaje en que haya sido
escrito
Por ejemplo, a continuación se muestra cómo acceder
al valor de la variable SERVER_NAME en C y en Perl:
C getenv("SERVER_NAME")
Perl $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 sesión
39
HTTP, protocolo sin estado
HTTP es un protocolo sin estado
Esto significa que para el servidor Web cada
petición de una página es única
No tendría forma de saber, por ejemplo, que ese
usuario acaba de añadir un producto a su
carrito, o si ya se validó o no, en qué punto del
proceso de compra se encuentra, etcétera
Son necesarias alternativas software, por
tanto, que permitan simular el estado
Alternativas para mantener sesión

Algunas de las alternativas son:
Usar el objeto Session (o similar) provisto por los
entornos de programación como ASP o J2EE
(Servlets, JSP...)
Almacenar toda la información de la sesión, a mano,
en una cookie (por ejemplo, mediante JavaScript)
Una combinación de cookie (para guardar un ID de
usuario) y bases de datos
“URL rewriting”
rewriting”
Etcétera
40
¿Qué son las cookies?
Las cookies son pequeñas porciones

datos que son almacenados
localmente por el navegador en
forma de pequeños ficheros de
texto
Cada vez que el cliente envía
información al servidor, incluye en
la petición HTTP las cookies que
previamente haya guardado
provenientes de ese servidor
Detalles de implementación
Según la especificación, 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 automáticamente
de eliminar aquéllas que hace más tiempo
que no se utilizan cuando necesita
guardar nuevas cookies
41
Sintaxis
Cada cookie presenta la siguiente

sintaxis general:
nombre=valor;
nombre=valor;[expires=fecha;
[expires=fecha;path=directorio;
path=directorio;
domain=nombreDeDominio;
domain=nombreDeDominio;secure]
secure]
Lo único obligatorio es que tenga un

nombre y un valor asociado; el
resto de atributos son opcionales
Aunque también se utiliza bastante el
atributo expires
Descripción de los atributos

Un par nombre = valor
Por ejemplo: IDUsuario = 49;
expires
Hasta cuándo será válida la cookie
Debe ir en este formato: Wdy,
Wdy, DD-
DD-Mon-
Mon-YYYY
HH:MM:SS GMT
Si no se dice nada, la cookie será eliminada al
terminar la sesión
Es decir, al cerrar la ventana actual del navegador
path
El conjunto de directorios del servidor para los
que es válida esta cookie (por omisión, será el
raíz “/”, es decir, todos)
42
Descripción de los atributos (2)
domain
El servidor o nombre de dominio para el
que es válida la cookie
Una cookie sólo puede ser leída 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 conexión
segura (https) para que la cookie sea
enviada
URL Rewriting
Consiste en incluir la información 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 más
sesiones simultáneas, páginas tediosas
de programar, sólo se puede usar el
método 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 sesión
Fácil 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 ningún tipo
de distribución del estado entre servidores
La sesión del cliente podría sobrevivir a una
caída del servidor
Un reintento por parte del cliente con el mismo
URL suele funcionar
Inconvenientes del uso de cookies

Privacidad
Otros servidores podrían leer información
almacenada en las cookies del cliente
No son válidas para guardar números de
tarjeta, contraseñas y cosas por el estilo
Los datos pueden ser alterados
Un usuario podría modificar el fichero de una
cookie
Lo mismo ocurre con otros mecanismos de
cliente: URL, formularios, etc.
Aumenta el tráfico por la red
El estado se transmite con cada petición al
servidor
44
Inconvenientes del uso de cookies
Implementación compleja
Mantener “a mano” el estado en el
cliente puede ser realmente complicado
si queremos hacerlo de manera robusta
Tamaño de datos limitado

Tanto el tamaño máximo permitido por
las cookies como la longitud máxima 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 lógica del dominio, ya
que servicios de uso común, 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 electrónico
Es una capa intermedia (middleware
middleware) que se sitúa entre
el servidor Web y las aplicaciones y bases de datos
subyacentes
Visión general
Aplicación Aplicación Aplicación

cliente cliente cliente
Servidor de aplicaciones
(Transacciones, mensajería, servicios Web…)
CORBA J2EE .NET
SGBD
46
Motivación
Comienzan a surgir cuando queda claro las
aplicaciones cliente/servidor no iban a ser
escalables a un gran número de usuarios
Debido a las características de los clientes “pesados”
Se hacía necesario mover las reglas de negocio a
algún lugar intermedio entre los clientes y la
base de datos
Empezaron a surgir productos para hacer esa
tarea
Cada compañía los llamaba de una forma distinta
Servidores de transacciones, servidores de
aplicaciones…
Misión
Los llamasen como los llamasen,

estaban diseñados para gestionar
de forma centralizada el modo en
que los clientes debían conectarse a
la base de datos o a los servicios
con los que tenían que interoperar
47
Servicios proporcionados
Creación y gestión 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
Gestión de la sesión
ElElservidor
servidorha
hade
deconservar
conservarinformación
informaciónentre
entrepeticiones
peticionesdel
delusuario
usuarioaalololargo
largode
delala
duración
duraciónde deuna
unasesión
sesión
Como sabemos, HTTP es un protocolo sin sesión

No permite mantener una conexión abierta entre el
cliente y el servidor más allá de lo que dura la
transferencia del documento en cuestión
En cualquier aplicación de comercio electrónico,
es necesario poder identificar al usuario a
través de su navegación por el sitio Web
Autenticación, adición de productos al carrito de la
compra, etc.
Gestión de la sesión (2)

La implementación “a mano” se complicaría
enormemente en el caso de contar con varios
servidores (equilibrado de carga)
La petición de un usuario registrado en la máquina A
puede ser redirigida al servidor B
Lo lógico es que sea el servidor de aplicaciones
quien se encargue de gestionar la sesión
Además, debería ser más eficiente que si lo
programamos nosotros mismos
49
Equilibrado de carga
Los
Losservidores
servidoresde
deaplicaciones
aplicacionesproporcionan
proporcionanmecanismos
mecanismosde
deequilibrado
equilibradode
decarga
carga
(aspecto
(aspectoclave
clavepara
paralalaescalabilidad)
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
máquina que más desocupada se encuentre en ese
momento
Mejora de rendimiento de la aplicación
No es tan sencillo como añadir una nueva máquina y
ya está
Además 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 lógica
del negocio) acceden a ellas de forma estándar
Independiente de la base de datos subyacente
También suelen permitir acceder a otros tipos de fuentes
de datos:
Tales como distintos ERP (SAP, Vaan...), repositorios XML,
etc.
Los servidores de aplicaciones son también importantes, por
tanto, como mecanismo de integración de sistemas
heredados
50
“Pooling” de conexiones
Abrir una conexión a una base de datos
suele ser un proceso costoso
No es viable abrir una nueva conexión por cada
consulta a la base de datos
Penalizaría enormemente el rendimiento de la
aplicación
Los servidores de aplicaciones suelen contar
con una serie de conexiones
permanentemente abiertas que distribuye
de forma transparente a los distintos
procesos
Se debería poder configurar el número de
conexiones abiertas, e incluso la política de
asignación
Gestión transaccional
Transacción:
Transacción:secuencia
secuenciade
depasos
pasosque,
que,oose
seejecutan
ejecutantodos,
todos,oosisino
noelelsistema
sistema
queda
quedaen
enelelestado
estadooriginal
original
Son un elemento básico de cualquier

aplicación comercial
Evitan que haya información inconsistente
Sería complejísimo implementarlas “a
mano”
Con un servidor de aplicaciones que tenga
esta característica, bastaría con indicarle
dónde empieza y termina la transacción
Encargándose él de deshacer los pasos
intermedios en caso de un error del sistema
51
Tecnologías actuales
Actualmente, las dos plataformas más

comunes son J2EE y, más
recientemente, ha surgido .NET
De hecho, hasta hace poco hablar de
servidores de aplicaciones era
prácticamente hablar de J2EE
(aunque no debemos hacer tal asociación)
Ejemplo: arquitectura J2EE
Máquina Servidor J2EE

Cliente
Contenedor Web
Navegador
Navegador
Páginas
Servlets
JSP
Contenedor
Aplicación Base
Cliente Contenedor EJBs Datos
Aplicación
Aplicación EJB EJB
Cliente
Cliente
52

Introduccion Al Web PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introduccion Al Web PDF

Uploaded by

Copyright:

Available Formats

Introducción al

Asignatura: Desarrollo de Aplicaciones en Sistemas Distribuidos e Internet

Escuela Universitaria Ingeniería Técnica Informática de Oviedo

Ü Los hiperenlaces permiten a los usuarios acceder a documentos

Modem servidores Telefonía móvil

Diversas protocolos de aplicación

World Wide Web

Nacimiento del World Wide Web

Berners-Lee creó las versiones iniciales de:

Visión general del Web

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

El usuario solicita un documento tecleando su dirección en

Visión general del Web

El navegador mira el tipo de documento devuelto (MIME)

Funcionamiento del Web

Tecleamos una dirección en

Un servidor Web es un ordenador en

NOTA: Conviene distinguir:

file Permite acceder a un fichero en el

Dirección del sitio

También podría ser directamente la

Nombre del fichero

Si no se especifica, el servidor busca un

Como tal, tiene unas reglas que

¿Por qué de marcado ?

Acme Computer Corporation is a technology-based company that seeks to offer

Por hipertexto designamos al texto al que se

La especificación del lenguaje HTML y

Estructura de documentos HTML

DTD <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”

DTD = Declaración de tipo de documento

Etiqueta de inicio Contenido Etiqueta final

<body bgcolor=“blue” text=“white”> <h1>Hola</h1> . . . </body>

Elementos vacíos en HTML

En caso de un elemento vacío puede usarse la

<img src=“cara.gif” width=“100” height=“80” />

Aunque en HTML pueden no incluirse las etiquetas finales de

– Atributo http-equiv: Solicita al servidor que incluya información en la

Pueden especificarse hojas de estilo (se verán más

Listas de definiciones <dl> (definition-list)

Incluir dimensiones permite El texto alternativo es conveniente incluirlo

También puede usarse

HTML: Formateo de texto

Nombre Ingredientes Precio

Barbacoa Mozzarella, Bacon 8€

Hawaiana Tomate, Piña, Queso 7€

4 Quesos Tomate, Mezcla 4 quesos 7€

HTML: Objetos externos

Ventaja: Liberar al servidor de ejecutar tareas

NOTA: Object es más general y se adaptará a otros usos en el futuro

¿Qué es un servidor Web?

Funcionamiento de las páginas

CGI fue la primera tecnología

CGI: Common Gateway Interface

¿Cómo obtiene el programa los

Hay dos formas posibles en que el

Acceder a las variables de entorno

El siguiente programa CGI en Perl

Alternativas para mantener sesión

Las cookies son pequeñas porciones

Cada cookie presenta la siguiente

Lo único obligatorio es que tenga un

Descripción de los atributos