Aplicaciones Web

Desarrollo de Aplicaciones Distribuidas

Contenido

La Web.

Sitios Web vs. Aplicaciones Web.

HTTP.

HTML.

Sesiones.

Tecnologías facilitadoras.

HTML Dinámico.

JavaScript.

Desarrollo de Aplicaciones Distribuidas 2

La Web

Petición

http://www.um.es/index.html

HTTP
HTML
Respuesta

Navegador Servidor Web

Hiperenlace

Documento
/index.html
Sistema Hipermedia
Sistema Ficheros

Desarrollo de Aplicaciones Distribuidas 3

Sitio Web vs. Aplicación Web

Aplicación web

 “Sitio web donde las entradas del usuario (navegación

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

 “Una aplicación web usa un sitio web como fachada de

una aplicación tradicional”

Desarrollo de Aplicaciones Distribuidas 4

HTTP

Protocolo comunicación entre el Navegador y el Servidor Web.

Protocolo sin conexión
 Tolerante a fallos

Modelo Petición/Respuesta:
 Peticiones: GET, POST, HEAD, PUT, ...
GET /isi/index.html HTTP/1.1
User-Agent: Mozilla/4.72 [en]
Accept: text/html

Codificación de datos MIME
 text/html, image/gif, ...

URL: identificación universal de recursos
 protocolo://maquina[:puerto]/recurso
 Ejemplo: http://www.um.es/index.html

HTTPS: HTTP seguro sobre SSL.

Desarrollo de Aplicaciones Distribuidas 5

HTML

Lenguaje basado en etiquetas utilizado para escribir páginas
web.

Define el contenido y el formato visual.

Ampliamente difundido:
 Facilidad de aprendizaje.
 Independencia del dispositivo de visualización.

Formularios para la edición de datos.

Ha ido evolucionando para superar sus limitaciones iniciales:
 Hojas de estilo.
 Server Side Includes (SSI).
 Lenguajes de script y APIs manipulación documentos:
JavaScript y DOM.
 HTML dinámico: programación dirigida por eventos.

Desarrollo de Aplicaciones Distribuidas 6

HTML – Elementos Destacados

Hiperenlaces:
 Establecen relaciones de navegación.
 Ejecución de páginas de servidor.

Formularios:
 Fragmento de página que acepta entradas de usuario.
 Dos parámetros:

Action: recurso que procesará el formulario

Method: método HTTP envío de datos  GET y POST.
 Elementos:

Select (listas), TextArea.

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

Frames:
 Dividen el área de visualización de un documento en otras
áreas representadas por otros documentos HTML.
 Desde un frame se puede actuar sobre otro.

Desarrollo de Aplicaciones Distribuidas 7

Sesiones

“Uso coherente e individual de una aplicación web por un
usuario”

Requisito esencial en las aplicaciones de comercio
electrónico  Ej. Carro de la compra

Problema: HTTP es un protocolo sin estado.

Solución: Cookies.
 Pequeños fragmentos de datos que una aplicación envía a un
navegador.
 El navegador los devolverá cada vez que acceda a la aplicación
 Los servidores web los utilizan para implementar un
mecanismo de seguimiento
 Proporcionan APIs para almacenar información asociada a una
sesión.
 Tiempo de vida limitado.

Nuevo problema: desactivación de las cookies.

Solución: reescritura de URLs

Desarrollo de Aplicaciones Distribuidas 8

Tecnologías Facilitadoras

Tecnologías que permiten a las aplicaciones web
ser dinámicas y responder a las entradas de
usuario.

Protocolo CGI:
 Estándar para la ejecución de programas de un
servidor web.
 Programas implementados en cualquier lenguaje
 PERL es el más utilizado.
 Limitaciones:

No permite el seguimiento de la sesión.

Cada ejecución se realiza en un nuevo proceso.

Desarrollo de Aplicaciones Distribuidas 9

Tecnologías Facilitadoras-
-Tendencias Actuales

Módulos compilados:
 Cargados dinámicamente.
 API: contexto llamada, sesión, etc.
 Tipos: ISAPI, NSAPI, Servlets
 Limitaciones:

Mezcla lógica negocio y salida HTML.

Reiniciar servidor ante modificaciones.

Páginas de Script:
 Páginas HTML con scripts para generar una respuesta
dinámica.
 Tipos: PHP (.php), Cold Fusion (.cfm), ASP (.asp) y JSP
(.jsp)
 Ventajas:

Facilitan el desarrollo y despliegue.

Facilitan la separación Modelo/Vista.
Desarrollo de Aplicaciones Distribuidas 10
HTML Dinámico

Motivación:
 Aumentar la capacidad de procesamiento del cliente
(navegador).
 Mejorar la interface web, especialmente con
capacidades de interacción: eventos.
 Ejemplo: validación de formularios.

Dos estrategias:
 Compilación: Applets, ActiveX
 Interpretación: JavaScript, VBScript

API DOM:
 API basada en objetos que permite manipular el
contenido, la estructura y el estilo de un documento.

Desarrollo de Aplicaciones Distribuidas 11

HTML Dinámico

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

window layer text

frame link password

Solución: HTML Dinámico document image hidden

 DOM + Eventos + location area submit

Hojas de estilo history anchor reset

 No es estándar applet radio

form checkbox

button

select option

Modelo de eventos:
 <input type=”submit” name=”botonAceptar” value=”ok”
ONCLICK=”return validarDatos()” >

Desarrollo de Aplicaciones Distribuidas 12

HTML Dinámico - Eventos
Evento Objeto
Abort Imágenes
Blur Ventanas, frames, elementos formulario
Click Botones, radio botones, checkboxes, botones submit, botones reset,
enlaces
Change Campos texto, áreas de texto, listas
Error Imágenes, 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 Botón submit
Unload Documento

Desarrollo de Aplicaciones Distribuidas 13

JavaScript

Lenguaje de script que interpretan los navegadores
durante la visualización de una página.

Similar a Java, pero con algunas diferencias (interpretado,
orientado a la presentación):
 Tipado dinámico.
 Número limitado de tipos de datos.
 Basado en objetos  no tiene herencia.

Etiqueta HTML Script.

Código trabaja sólo con API DOM.

Programación dirigida por eventos:
 Definir funciones manejadores de eventos.

Otros lenguajes: JScript y VBScript.
Desarrollo de Aplicaciones Distribuidas 14