Introducción

Programación web
Programación web

Mada Cantabella Sabater

Ingeniería Informática
ÍNDICE
CONTENIDOS
1. Definición
2. Host, servidores y puertos
3. HTTP (HiperText Transfer Protocol)
4. Aplicaciones cliente‐servidor
5. Cliente pesado
6. Cliente ligero
7. Aplicaciones web: El cliente
8. Aplicaciones web: El servidor
2
ÍNDICE
CONTENIDOS
9. Aplicación servidor web
10. Aplicaciones web
11. Comparativa
12. Enfoque estático
13. Enfoque dinámico
14. Páginas activas
15. Aplicaciones web

3
1. Definición

Una aplicación web es una aplicación cliente/servidor de cliente ligero, basada en

WWW (tecnologías, lenguajes, protocolos...).

Ejemplos de aplicaciones web

• Ejemplos de • Banca on‐line • Blog

aplicaciones web • Campus virtual • Secretarías virtuales
• Tienda virtual • Reserva de entradas o • Buscador
(Comercio billetes • ...
electrónico)
• Intranet corporativa
4
2. Host, Servidores y Puertos

Host Puerto

• Máquina Servidora de los • Dirección de 16 bits dentro del servidor, donde se

Servicios. instala el programa servidor.
• Tiene una dirección • Cliente y servidor se comunican a través de un
conocida DNS (google.es): protocolo: HTTP, SMTP...
• Asociada a una IP • Los servicios tienen un protocolo y un puerto por
binaria. defecto.

Web Protocolo HTTP (puerto 80), HTTPS (443)

Email Protocolo SMTP (puerto 25), POP3 (110), IMPA143)
Shell segura Protocolo SSH (puerto 22)

5
3. HTTP (HiperText Transfer Protocol)

Protocolo web:
• Procesa recursos identificados por un URL en un servidor remoto.
Figura 1
GET y POST
Comandos relevantes:
• GET trae al cliente (lee) un recurso
identificado por un URL.
• POST crea un recurso identificado
por un URL.
• PUT actualiza un recurso identificado
por un URL.
Nota. La figura muestra el proceso que siguen los comandos relativos a GET y POST.
Fuente: Elaboración propia, 2022.
6
GET
Nueva página

GET

Usuario Navegador Servidor

POST
Envía datos

POST

Usuario Navegador Servidor

7
4. Aplicaciones Cliente‐Servidor
Aplicaciones dividas en dos partes
Situadas en ordenadores distintos (surgen con las redes).
 Servidor:
• Centraliza los datos y el proceso de los datos.
• Soporta clientes simultáneos.
• Máquina con dimensionamiento más exigente.
 Cliente:
• Envía peticiones de servicios y recibe sus respuestas.
• Interface con el usuario.
• Máquina con dimensionamiento menos exigente.

8
4. Aplicaciones Cliente‐Servidor
Aplicaciones dividas en dos partes
Figura 2
Aplicaciones Cliente‐Servidor

Servidor
Cliente Red

petición

datos
respuesta

Nota. La figura representa las aplicaciones que se bifurcan en dos: en cliente y servidor.
Fuente: Elaboración propia, 2022.

9
5. Cliente pesado

 Interfaz gráfica para interacción con usuario

 Lógica de negocio en el cliente
• Procesa los datos (el servidor actúa como un disco duro remoto).
 Movimiento de datos que sobrecarga la red
• Ej.: Si los datos de cada cliente ocupan 10 KB y hay 100.000 clientes, ¡habrá
que enviar 10GB para realizar una consulta!

10
5. Cliente pesado

Servidor
Cliente Red
petición

datos
Presentación

Procesamiento Datos selecc. Selección

Figura 3
Cliente pesado

Nota. La figura ilustra cómo se comporta un cliente pesado.

Fuente: Elaboración propia, 2022.

11
6. Cliente ligero

 Interfaz gráfica para interacción con usuario

 Lógica de negocio en el servidor
• Solo se envían los resultados de la operación.
 Poca carga de proceso
• El cliente apenas realiza proceso de datos (validaciones…).
 Ej. Procedimientos almacenados en BD parametrizados
• Pueden devolver cursores (conjuntos de datos que se pueden recorrer).

12
6. Cliente ligero

Servidor
Cliente Red
petición

datos
Procesamiento

Presentación resultados Selección

Figura 4
Cliente ligero
Nota. La figura ilustra cómo se comporta un cliente ligero.
Fuente: Elaboración propia, 2022.
13
7. Aplicaciones Web: el cliente

 El cliente web: aplicación que envía peticiones HTTP

• Normalmente: navegador, que recibe código HTML.
• El software cliente suele estar instalado en el S.O.
• Puede no ser un navegador convencional: otro servidor, robot de búsqueda,
aplicación solicita o envía datos por HTTP (ej. licencia)...
• Puede no alojarse en un PC convencional: Tableta, móvil...
• Puede tratar HTML, XML, texto, formatos binarios (PDF, JPEG...).
 Pequeña capacidad de proceso: scripting de lado del cliente.
 Puede extenderse (plugins, visualizadores externos…).

14
7. Aplicaciones Web: el cliente

Servidor web
Cliente Red
HTTP Request

página
URL
Cookies
…

Presentación HTTP Response Procesamiento

Cookies
HTML
CSS
Figura 5
Aplicaciones Web: el cliente
… Nota. La figura se centra en la aplicación web que es el cliente y en el proceso que sigue.
Fuente: Elaboración propia, 2022. 15
8. Aplicaciones web: el servidor

 El servidor web: aplicación que recibe peticiones HTTP

• Recibe petición URL mediante HTTP.
• Descodifica URL y procesa la petición.
• Responde como HTTP (página correcta, Error 404 Not Found...).
• Cliente solicita imágenes en sucesivas peticiones HTTP.
• Cliente compone la página, ejecuta JavaScript y visualiza por pantalla.
 Ejemplos:
• Internet Information Server (IIS).
• Apache. Multiplataforma.

16
8. Aplicaciones web: el servidor

Servidor web
Cliente Red
HTTP Request

página
URL
Cookies
…
Aplicación
Servidor web

Presentación HTTP Response Procesamiento

Cookies
HTML
CSS
Figura 6
Aplicaciones web: el servidor … Nota. La figura se centra en la aplicación web que es el servidor y en el proceso que sigue.
Fuente: Elaboración propia, 2022. 17
9. Aplicación Servidor Web

 Escucha en un puerto. Por defecto:

• Puerto TCP 80 para HTTP.
• Puerto TCP 443 para HTTPS.
 Soporta concurrencia.
 Un solo servidor puede contener múltiples aplicaciones.
 Posibilidad de cifrar la comunicación: Servidor Seguro.
 Se ejecuta como un usuario de S.O. específico.

18
9. Aplicación Servidor Web

 Accede a recursos de la máquina:

• Disco duro: permisos sobre usuario del servidor web.
• Base de datos: permisos sobre usuario del servidor o usuario remoto.
 Posibilidad de exigir autenticación remota:
• Usuario y password (autenticación básica).
• Certificado digital (usando SSL).

19
 Figura 7
Aplicación Servidor Web

9. Aplicación Servidor Web Proxy caché

Puede ocultar una estructura compleja en Balanceador

varios niveles. de carga
Cliente Red

HTTP Request Servidores

web
URL
Cookies
…
Servidores
de apps

Presentación HTTP Response Servidores de ficheros

Nota. Esta figura sugiere que el servidor web Cookies CSS Servidores
adquiere una estructura compleja en diferentes HTML …
niveles: servidores web, servidores de apps, etc. de BD
Fuente: Elaboración propia, 2022.
20
10. Aplicaciones Web

 Limitación:
• Limitadas por tecnologías que no fueron diseñadas pensando en aplicaciones:
HTML, HTTP (mantenimiento de estados)...
• Problemas con interface.
• Problemas en control de comunicación.

21
10. Aplicaciones Web

 Ventajas:
• Basadas en estándares.
• No se requiere instalación de software en cliente
• Sin problemas por instalación de software (librerías…).
• Propagación de actualizaciones inmediata.
• Aceptación del usuario: “todo el mundo sabe navegar”.
• Fácil coexistencia con firewalls.

22
11. Comparativa

Aplicación cliente‐servidor Aplicación web

Software cliente específico, que el cliente Software cliente: Navegador web. Las
debe tener instalado. respuestas son páginas web.

Interface como cualquier aplicación del Interface: Páginas web programadas en

sistema. Windows: ventanas, menús, ... HTML.

Software servidor específico, que el Software específico, que es ejecutado por

servidor debe tener instalado. un servidor web.

Protocolo red entre C y S: Protocolo red entre C y S:

• Protocolos propietarios. • Protocolo HTTP(S) (pero: no orientado

conexión, pro: facilita config. Firewall,
• Múltiples posibilidades.
no nos preocupamos por configurar la
• Generalmente TCP/IP. comunicación)

23
12. Enfoque estático

 Páginas que no cambian de contenido en el tiempo

• Recuperadas desde el sistema de archivos del servidor.
• No requieren procesamiento: solo transmitir el contenido.
 Inconvenientes graves:
• Dificultad de actualización y mantenimiento.
› Ej.: Aplicar un descuento a todos los productos en una tienda web. Cada
precio es mostrado en múltiples páginas.
• Acceso limitado a la información: posibilidad de usar índices (difíciles de
mantener), difícil hacer búsquedas...
 No es un enfoque inherentemente malo, pero sí limitado: no es adecuado para sitios con
páginas cambiantes.
24
12. Enfoque estático
Figura 8
Enfoque estático

HTTP Request Servidor

web

HTTP Response Página, imagen o doc

Presentación estático

Nota. La figura enseña cómo funciona un enfoque estático en una solicitud HTTP al servidor web.
Fuente: Elaboración propia, 2022.

25
13. Enfoque dinámico

 Páginas que cambian de contenido con el tiempo.

 Resultado procedente de la ejecución de un programa.
• CGI: programa cuya salida es HTML.
• Página activa: HTML + código de programación embebido.
 Existen muchas tecnologías:
• ASP.NET : para IIS.
• PHP: multiplataforma, Apache.
• JSP: multiplataforma.
• Extensiones PL/SQL de Oracle: sólo para IAS y BD Oracle.
• Perl: multiplataforma…
26
13. Enfoque dinámico

 Fáciles de mantener: páginas actualizadas automáticamente.

 Ejemplo:

<% si contraseña es correcta entonces %>

<h2> Bienvenido al servidor web </h2>
<% si no %>
<h2> Contraseña incorrecta </h2>
<% fin si %>

27
14. Páginas Activas

 Contenidos recuperados de…

• El propio HTML de la página activa.
• Datos enviados por el usuario (URL, formularios, cookies).
• Datos leídos de la base de datos.
• Datos leídos de un fichero (ej.: Fichero de propiedades).
• Información del entorno (Sistema Operativo y Servidor Web).
• Información de sesión, aplicación.

28
14. Páginas Activas

Figura 9
Páginas Activas
Bases
Datos
Interface
Página,
Servidor Servidor imagen
HTTP Request
web web o doc
estático

HTTP Response
Página Datos
activa entorno

Nota. La figura representa el funcionamiento de las páginas activas, que generan retroalimentación entre distintos servidores web.
Fuente: Elaboración propia, 2022.

29
 14. Páginas Activas Figura 10
Páginas Activas

<!DOCTYPE html><html>
<head>
<title>Ejemplo</title>
<meta charset=“UTF-8>

<style type=“text/css”>
body {´color: blue;}
1) Cliente solicita WebApp Solicitud HTTP GET </style>
</head>
identificada con URL asociada a un URL <body>
<h3>Fecha y hora</h3>
2) Script se ejecuta al cargar <script
type=“text/javascript”>
la página Web en el Client document.write(new
Date());
navegador: Respuesta HTTP: </script>
página Web con script </body>
</html>
Server
Respuesta HTTP:
página Web con script
Nota. La figura representa el funcionamiento de las páginas activas, donde el
cliente solicita WebApp y el Scrip se ejecuta al cargar la web en el navegador.
Fuente: Elaboración propia, 2022.
30
Imagen 1
Portátil

15. Aplicaciones Web

Modelos de aplicaciones web

Nota. Adaptado de White and black laptop, por Ben Kolde, 2017, Unsplash

31
15. Aplicaciones Web
Modelo internet
Internet
 Aplicaciones accesibles de forma
pública.
• Desde cualquier lugar del
mundo.
Organización
Figura 11
Modelo internet

Nota. Esta figura indica que las aplicaciones a las que se

puede acceder desde cualquier parte del mundo de forma
totalmente pública representan el modelo internet.
Fuente: Elaboración propia, 2022.

32
15. Aplicaciones Web Figura 12
Modelo intranet Modelo intranet

 Aplicaciones web internas a la Internet

organización.
 No accesibles desde fuera de la
organización.
• Limitar acceso a nivel de
configuración de red. Organización

• Limitación de IP por programa.

 Identificación usuario/password,
permisos que determinan la
información visible.
Nota. El modelo intranet limita el acceso a las
aplicaciones a los usuarios de una organización. 33
Fuente: Elaboración propia, 2022.
15. Aplicaciones Web Figura 13

Modelo extranet Modelo extranet

 Intranet parcialmente accesible a Internet

usuarios externos.
• Acceso a través de firewall.
 Identificación usuario/password,
permisos que determinan la
información visible. Organización
 Apropiado para:
• Miembros de la organización
en itinerancia.
• Empresas asociadas (B2B):
clientes, proveedores.
Nota. El modelo extranet limita el acceso a las aplicaciones a los
usuarios externos que se identifican o que tienen permisos. 34
Fuente: Elaboración propia, 2022.
15. Aplicaciones Web
Modelo ASP (Application Service Provider)
 Aplicaciones de uso interno, en servidores externos
Internet
 La organización alquila el uso de aplicaciones web
 Lógica reside en el ASP: El proveedor realiza las
actualizaciones
 Datos residen en el ASP: El proveedor realiza
backup
 Fuerte infraestructura de red (caídas,
rendimiento...) Organización
• Indemnización por ausencia de servicio
• Alta disponibilidad: Enlaces y equipos
redundantes
Figura 14
 Desconfianza Modelo ASP (Application Service Provider)

Nota. El modelo ASP consiste en aplicaciones de uso

interno que funcionan en servidores externos. 35
Fuente: Elaboración propia, 2022.
15. Aplicaciones Web
Modelo ASP (Application Service Provider)

Ventajas para el cliente

Ventajas para el cliente
• Fin de las copias ilegales.
• No se requieren instalaciones.
• Control del tiempo exacto de uso.
• Copias de seguridad y
• No requiere distribución:
actualizaciones por el proveedor.
• En la instalación.
• Accesible desde cualquier punto.
• En las actualizaciones.

36
15. Aplicaciones Web
Web development

El desarrollo web (Web

Development) se divide en: • Se centra en la estética de la
web.

Diseño gráfico (Web Design) • Herramientas WYSIWYG

(DreamWeaver), Flash,
Photoshop.

37
15. Aplicaciones Web
Web development

• Se centra en desarrollo de aplicaciones

informáticas para Web.
El desarrollo web (Web • Tecnologías:
Development) se divide en:
• Lenguajes etiquetados (HTML, XML...).
• Lenguajes interpretados en cliente
Programación Web (JavaScript, VBScript).
(Web Programming) • Páginas activas (ASP, JSP, PHP...).
• Bases de datos (MySQL, Access, SQL
Server, Oracle...).

38
15. Aplicaciones Web
Web development

El desarrollo web (Web

Development) se divide en:
• Especificación de requisitos.
Ingeniería del software para web • Prototipado.
(Web Engineering) • Herramientas de diseño (Modelo
E‐R, Mapa Web, UML).

39
 Ejemplo de equipo de desarrollo web

Figura 15
Ejemplo de equipo de desarrollo web Cliente

Responsable Planificación, control fases,

Proyecto / Controller Control presupuestos, …

Ingenieros de
Analistas
Sistemas

Diseñadores Técnicos de
Programadores
Gráficos Sistemas

Nota. En esta figura se aprecia cómo podría ser un equipo de desarrollo web, con cliente, controller, analistas, diseñadores gráficos, programadores e ingenieros y técnicos de sistemas.
Fuente: Elaboración propia, 2022.
40
 Equipo explotación web
Figura 16
Equipo explotación web Cliente

Responsable
Canal

Responsable
Marketing…
Técnico

Ingenieros de Ingenieros de Administración

Analistas
Sistemas Sistemas canal

Diseñadores Técnicos de Atención Cliente

Programadores
Gráficos Sistemas Helpdesk

Nota. En esta figura se aprecia cómo podría ser un equipo de explotación web, con cliente, responsable canal, responsable técnico, analistas, ingenieros y técnicos de sistemas, helpdesk, etc.
Fuente: Elaboración propia, 2022.
41
Imagen 2
Pòrtátil con código

El trabajo en equipo es esencial; te

permite echarle la culpa a otro.
(Anónimo)

Nota. Adaptado de Turn on flat screen computer, por Blake Connally, 2017, Unsplash

42
REFERENCIAS
BIBLIOGRÁFICAS

43
Mada Cantabella Sabater
mmcantabella@ucam.edu

UCAM Universidad Católica de Murcia

© UCAM
Mada Cantabella DNS
Programación web SMTP
Ingeniería Informática SSH
Host Protocolo
Servidores web GET
Clientes web POST
Puertos PUT
HTTP Usuario
Hipertext transfer protocol Navegador
Cliente pesado Cliente‐servidor
Cliente ligero TCP/IP
Aplicaciones web Intranet
Enfoque estático Extranet
Enfoque dinámico ASP
Páginas activas Application Service Provider

45