Aplicaciones Web

Aplicaciones Distribuidas

Contenido
La Web.
Sitios Web vs. Aplicaciones Web.
HTTP.
HTML.
Sesiones.
Tecnologas facilitadoras.
HTML Dinmico.
JavaScript.
2

La Web
Peticin
http://www.um.es/index.html

HTTP

HTML

Respuesta
Servidor Web

Navegador
Hiperenlace

Documento
/index.html

Sistema Hipermedia

Sistema Ficheros
3

Sitio Web vs. Aplicacin Web

Aplicacin web

Sitio web donde las entradas del usuario (navegacin

y entrada de datos) afectan al estado de negocio
Jim Conallen

Una aplicacin web usa un sitio web como fachada

de una aplicacin tradicional

HTTP
Protocolo comunicacin entre el Navegador y el Servidor Web.
Protocolo sin conexin
Tolerante a fallos

Modelo Peticin/Respuesta:

Peticiones: GET, POST, PUT, ...

Codificacin de datos MIME

GET /dad/index.html HTTP/1.1

User-Agent: Mozilla/4.72 [en]
Accept: text/html

text/html, image/gif, ...

URL: identificacin universal de recursos

protocolo://maquina[:puerto]/recurso
Ejemplo: http://www.um.es/index.html

HTTPS: HTTP seguro sobre SSL.

5

HTML

Lenguaje basado en etiquetas utilizado para escribir pginas web.

Define el contenido y el formato visual.

Ampliamente difundido:
Facilidad de aprendizaje.
Independencia del dispositivo de visualizacin.

Formularios para la edicin de datos.

Ha ido evolucionando para superar sus limitaciones iniciales:

Hojas de estilo.
Server Side Includes (SSI).
Lenguajes de script y APIs manipulacin documentos: JavaScript y
DOM.
HTML dinmico: programacin dirigida por eventos.
6

HTML Elementos
Destacados
Hiperenlaces:

Establecen relaciones de navegacin.

Ejecucin de pginas de servidor.

Formularios:

Fragmento de pgina que acepta entradas de usuario.

Dos parmetros:

Action: recurso que procesar el formulario

Method: mtodo HTTP envo de datos GET y POST.

Elementos:

Select (listas), TextArea.

Input: CheckBox, Text, Password, Radio, Hidden y Submit.

Frames:

Dividen el rea de visualizacin de un documento en otras reas

representadas por otros documentos HTML.
Desde un frame se puede actuar sobre otro.
7

Sesiones

Uso coherente e individual de una aplicacin web por un usuario

Requisito esencial en las aplicaciones de comercio electrnico

Ej. Carro de la compra
Problema: HTTP es un protocolo sin estado.
Solucin: Cookies.

Pequeos fragmentos de datos que una aplicacin enva a un navegador.

El navegador los devolver cada vez que acceda a la aplicacin
Los servidores web los utilizan para implementar un mecanismo de
seguimiento
Proporcionan APIs para almacenar informacin asociada a una sesin.
Tiempo de vida limitado.

Nuevo problema: desactivacin de las cookies.

Solucin: reescritura de URLs
8

Tecnologas Facilitadoras
Tecnologas que permiten a las aplicaciones web ser
dinmicas y responder a las entradas de usuario.
Protocolo CGI:
Estndar para la ejecucin de programas de un
servidor web.
Programas implementados en cualquier lenguaje
PERL es el ms utilizado.
Limitaciones:
No permite el seguimiento de la sesin.
Cada ejecucin se realiza en un nuevo proceso.
9

Tecnologas Facilitadoras-Tendencias Actuales

Mdulos compilados:

Cargados dinmicamente.
API: contexto llamada, sesin, etc.
Tipos: ISAPI, NSAPI, Servlets
Limitaciones:
Mezcla lgica negocio y salida HTML.
Reiniciar servidor ante modificaciones.

Pginas de Script:
Pginas HTML con scripts para generar una respuesta dinmica.
Tipos: PHP (.php), Cold Fusion (.cfm), ASP (.asp) y JSP (.jsp)
Ventajas:
Facilitan el desarrollo y despliegue.
Facilitan la separacin Modelo/Vista.

10

HTML Dinmico
Motivacin:

Aumentar la capacidad de procesamiento del cliente

(navegador).
Mejorar la interface web, especialmente con capacidades de
interaccin: eventos.
Ejemplo: validacin de formularios.

Dos estrategias:

Compilacin: Applets, ActiveX

Interpretacin: JavaScript, VBScript

API DOM:

API basada en objetos que permite manipular el contenido,

la estructura y el estilo de un documento.
11

HTML Dinmico
Problema:
DOM no define un modelo de eventos ni hojas de estilo.

Solucin: HTML Dinmico

DOM + Eventos +

window

layer

text

Hojas de estilo

frame

link

password

No es estndar

document

image

hidden

location

area

submit

history

anchor

reset

applet

radio

form

checkbox
button

Modelo de eventos:

select

<input type=submit name=botonAceptar value=ok

ONCLICK=return validarDatos() >
12

option

HTML Dinmico - Eventos

Evento

Objeto

Abort

Imgenes

Blur

Ventanas, frames, elementos formulario

Click

Botones, radio botones, checkboxes, botones submit, botones reset,

enlaces

Change

Campos texto, reas de texto, listas

Error

Imgenes, ventanas

Focus

Ventanas, frames y elementos formulario

Load

Documento

Mouseout

reas de texto, enlaces

Mouseover

Enlaces

Reset

Formularios

Select

Campos de texto, reas de texto

Submit

Botn submit

Unload

Documento
13

JavaScript

Lenguaje de script que interpretan los navegadores durante la visualizacin de

una pgina.

Similar a Java, pero con algunas diferencias (interpretado, orientado a la

presentacin):

Tipado dinmico.
Nmero limitado de tipos de datos.
Basado en objetos no tiene herencia.

Etiqueta HTML Script.

Cdigo trabaja slo con API DOM.

Programacin dirigida por eventos:

Definir funciones manejadores de eventos.

Otros lenguajes: JScript y VBScript.

14