UT1 - Selección de arquitecturas

y herramientas de programación

Desarrollo Web Entorno Servidor

Tabla de contenidos
1. Modelos de programación y tipos de aplicaciones.
2. Diferencias entre aplicaciones cliente-servidor, web y RIA.
3. Mecanismos de ejecución de código en un servidor Web.
4. Tecnologías asociadas: CGI, Perl como generador de aplicaciones web.
5. Generación dinámica de páginas Web. Características y ventajas.
6. Lenguajes de programación en entorno servidor.
7. Integración con los lenguajes de marcas.
8. Servidores de aplicaciones. Funcionalidades.
9. Integración con los servidores Web.
10. Herramientas de programación.
11. Entornos de desarrollo, editores y compiladores.
2
1. Modelos de programación y tipos de aplicaciones Web.

● Las arquitecturas
web definen la
forma en que las
páginas de un sitio
web están
estructuradas y
enlazadas entre sí.
Las aplicaciones
web se basan en el
modelo cliente-
servidor.
3
1. Modelos de programación y tipos de aplicaciones Web.

● Uno o varios clientes acceden a un servidor. Las

nuevas arquitecturas sustituyen el servidor por un
balanceador de carga de manera que N servidores
dan respuesta a M clientes.
● En las aplicaciones web, el cliente es el navegador
web.
● El cliente hace la petición (request normalmente
mediante el protocolo GET mediante el puerto
80/443) y el servidor responde (response). 4
1. Modelos de programación y tipos de aplicaciones Web.
● Evolución de los modelos y de los tipos de aplicaciones:
Mainframe → PC1,2 → Trabajo en red → Web → Web 2.0
→ Web 3.0 → post-PC
● Tipos de aplicaciones:
Monolíticas → De cliente → Cliente-Servidor → Modelo
de n capas → Aplicaciones distribuidas → API’s REST →
Microservicios → ¿etc?.
5
Estudio sobre arquitecturas de aplicaciones web
● Para cada una de las distintas arquitecturas:
○ Definición
○ Características
○ Ventajas
○ Desventajas

6
2. Diferencias entre aplicaciones C-S, web y RIA

● Cliente-servidor: un cliente realiza peticiones a un

servidor.
● Aplicación web: herramientas localizadas en un servidor a
las que accede un cliente a través de un navegador web.
● Rich Internet Applications (RIA): combina las ventajas de
las aplicaciones web con las de escritorio sin necesidad
de instalarlas.

7
3. Mecanismos de ejecución de código en un servidor Web.

● Objetivo: presentar HTML en el navegador web.

● El cómo ha variado a lo largo de la historia:

Webs estáticas → webs dinámicas (server-side: CGI, JSP, servlets, client-

side: JavaScript, Java applets)
● Navegador web (cliente): interfaz universal.
○ Funciones: petición de páginas web, su representación, gestión de errores.
○ Lenguajes script: VBScript, JScript, JavaScript…
○ HTML → DHTML (HTML+CSS+Scripts+modelos de objetos+Aplicaciones(ActiveX,
applets))
○ XML --- XSL --> HTML

8
3. Mecanismos de ejecución de código en un servidor Web.

● Servidor web:
○ Software en un ordenador.
○ Escucha y responde a peticiones (requests) HTTP → Página web o ejecución de programa.
○ Devuelve un HTML al cliente.
○ Parte fundamental del desarrollo de aplicaciones en entorno servidor.

9
3. Mecanismos de ejecución de código en un servidor Web.

● Arquitectura de un servidor: Ejemplo de 3 capas

● Hay que distinguir entre capas físicas y capas lógicas
● Capa Física (Tier): Despliegue de Aplicaciones Web

10
3. Mecanismos de ejecución de código en un servidor Web.

Tier¶
● Capa física de una arquitectura. Supone un nuevo elemento
hardware separado físicamente. Las capas físicas más
alejadas del cliente están más protegidas, tanto por firewalls
como por VPN.
● Ejemplo de arquitectura en tres capas físicas (3 tier):
• Servidor Web
• Servidor de Aplicaciones
• Servidor de base de datos

11
3. Mecanismos de ejecución de código en un servidor Web.

Layer¶
● En cambio, las capas lógicas (layers) organizan el código
respecto a su funcionalidad:
• Presentación
• Negocio / Aplicación / Proceso
• Datos / Persistencia

Como se observa, cada una de

las capas se pueden implementar
con diferentes lenguajes de
programación y/o herramientas.
12
3. Mecanismos de ejecución de código en un servidor Web.

13
4. Tecnologías asociadas: CGI, Perl.
● CGI (Common Gateway Interface)
○ La tecnología más antigua para el desarrollo de aplicaciones web en entorno servidor.
○ Prepara entorno, levanta el proceso, ejecuta un programa (en cualquier lenguaje) con
datos de cliente y devuelve respuesta.
○ Poco eficiente: un proceso por cada petición, no seguridad, no escalabilidad.

14
4. Tecnologías asociadas: CGI, Perl.
● Fast-CGI
○ Variación de CGI con procesos persistentes.
○ Permite concurrencia = Escalabilidad → Atiende más peticiones por segundo.
● Lenguajes de Scripting
○ Integrados con el servidor web en las páginas alojadas e interpretadas por él mismo.
○ Los más utilizados: ASP, PHP, Phyton y Perl.

15
5. Generación dinámica de páginas Web
● Páginas estáticas vs. Páginas dinámicas.

Si la página web únicamente contiene HTML + CSS se considera una

página estática. Para generar una página dinámica, donde el contenido
cambia, a día de hoy tenemos dos alternativas:

Utilizar un lenguaje de servidor que genere el contenido, ya sea

mediante el acceso a una BD o servicios externos.

Utilizar servicios REST de terceros invocados desde JS.

16
5. Generación dinámica de páginas Web

Páginas estáticas

Vs.

Páginas dinámicas.

17
5. Generación dinámica de páginas Web
Páginas dinámicas.
● Se generan a partir de acciones o peticiones de usuario.
● Permite integrar información contenida en BBDD. También manipularla.
● Ejemplos: redes sociales, foros, páginas personalizadas…
● Requiere HTML + lenguajes de script del lado del servidor (PHP) + BBDD.
● El contenido que visualiza cada cliente depende del estado de la BBDD o de
la petición particular que haga.
● Ventajas:
○ Mayor interactividad.
○ Facilidad de actualización de contenidos y mantenimiento.
○ Reduce costes de desarrollo.

18
5. Lenguajes de programación en entorno servidor (back-end)

● PHP (Hypertext PreProcessor)

○ Lenguaje interpretado libre.
○ Integrado en el servidor como un módulo o un programa CGI.
○ Muy utilizado, gran abanico de funcionalidades.
○ Hereda de C y shell script. Soporta programación orientada a objetos (POO).
○ Gran capacidad de integración con otros productos (p.ej.: PayPal) y comunicación en red.
○ Lenguaje de propósito general diseñado para el desarrollo de páginas web dinámicas
○ En un principio, lenguaje no tipado.
○ Actualmente en la versión 8. Se recomienda al menos utilizar una versión superior a la 7.0.
○ Código embebido en el HTML
○ Instrucciones entre etiquetas <?php y ?>
○ Para generar codigo dentro de PHP, podemos usar la instrucción echo
○ Multitud de librerías y frameworks:
○ Laravel, Symfony, Codeigniter, Zend

19
 5. Lenguajes de programación en entorno servidor
Java EE JSP (JavaServer Pages) y Servlets
○ Utiliza Java como lenguaje de programación.
○ Java Enterprise Edition es la solución Java para el
desarrollo de aplicaciones enterprise.
○ Ofrece una arquitectura muy completa y compleja,
escalable y tolerante a fallos. Planteada para
aplicaciones para grandes sistemas
○ Se despliega sobre servidor de aplicaciones
compatible con servlets.
○ Usa Java EE para ejecutar aplicaciones del lado
del servidor.
○ Proporciona APIs para facilitar la vida al
programador. 20
5. Lenguajes de programación en entorno servidor
● ASP (Active Server Pages)
○ Lenguaje interpretado propietario (Microsoft).
○ Sólo funciona con plataformas Windows.
○ Basado en Visual Basic Script (VBScript).
○ La versión más reciente es ASP.NET.
● Perl
○ Lenguaje interpretado.
○ Hereda de C, de shell, LISP y otros lenguajes.
○ Originalmente creado para el procesamiento de textos y archivos.
○ Tiempo de desarrollo bajo y gran flexibilidad.
● JavaScript
○ Bibliotecas populares como React, Angular y Vue para el Frontend
○ Para BackEnd: NodeJS, Deno
○ Frameworks como Express, Koa y NestJS
○ Webpack y Parcel 21
Ejemplos de “Hola mundo” en distintos lenguajes
Lenguaje C para CGI:

#include <stdio.h>
int main() {
printf(“Hola mundo”);
return 0;
}

22
Ejemplos de “Hola mundo” en distintos lenguajes
Lenguaje ASP.NET (.asp o .aspx):
<%@ Page Language="VB" %>
<script runat="server">
Sub Page_Load(Sender As Object, E As EventArgs)
HelloWorld.Text = "Hola mundo"
End Sub
</script>
<html>
<head>
<title>Hola mundo (en ASP.NET)</title>
</head>
<body>
<asp:label id="HelloWorld" runat="server" />
</body>
</html>

23
Ejemplos de “Hola mundo” en distintos lenguajes
Lenguaje PHP (.php):
<html>
<head>
<title>Hola mundo (en PHP)</title>
</head>
<body>
<?php
echo “Hola mundo”;
?>
</body>
</html>

24
Ejemplos de “Hola mundo” en distintos lenguajes
Lenguaje JSP (.jsp):
<html>
<head>
<title>Hola mundo (en JSP)</title>
<%!
String message = "Hola mundo";
%>
</head>
<body>
<%= message %>
</body>
</html>

25
Ejemplos de “Hola mundo” en distintos lenguajes
Lenguaje Java desplegado como servlet (.java):
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class HelloWorld extends HttpServlet {
public void doGet(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException {
res.setContentType("text/html");
PrintWriter out = res.getWriter();
out.println("<html>");
out.println("<head><title>Hola mundo
(servlet)</title></head>");
out.println("<body>");
out.println("Hola mundo");
out.println("</body></html>");
} // doGet
} // HelloWorld

26
27
7. Integración con los lenguajes de marcas
● Acabamos de ver cómo PHP, ASP y JSP se integran perfectamente con
HTML.
● Los lenguajes de marcas utilizan etiquetas para marcar el contenido.
● Tipos de lenguajes de marcas:
○ Presentación: formatean contenido (p.ej.: HTML)
○ Procedimiento: orientado a presentación del texto (p.ej.: TeX)
○ Descriptivo: para describir contenido, no presentación (p.ej.: XML)
● Evolución histórica: SGL → SGML → XML → (+ HTML) → XHTML

28
8. Servidores de aplicaciones. Funcionalidades.
● Definición (obvia): servidor que ejecuta (ciertas) aplicaciones.
● Gestiona la lógica de negocio y el acceso a los datos.
● Se utilizan para construir páginas dinámicas.
● Varias posibilidades: Java Application Server, Windows Application Server…
● Varias formas de desplegar: on-premise, cloud (SaaS, PaaS…)
● Conforman sistemas distribuidos que mejoran (frente a sistema monolítico):
○ Alta disponibilidad.
○ Escalabilidad.
○ Versatilidad.

29
9. Servidores web e integración con servidores de aplicaciones

● Apache
○ Lanzado en 1995.
○ El más popular de los servidores HTTP o servidores web.
○ De código abierto y gratuito.
● Internet Information Services (IIS)
○ Propiedad de Microsoft.
○ Desarrollado para sus sistemas de servidores (p.ej.: Windows Server 2016)
○ Perfecto para trabajar con ASP.NET.
○ Servicios que ofrece: FTP, SMTP y HTTP/HTTPS
● NGINX
○ Multiplataforma (Windows, Unix).
○ La misma compañía ofrece servidor de aplicaciones multilenguaje NGINX Unit

30
9. Servidores web e integración con servidores de aplicaciones

● Google Web Server (GWS)

○ Componente de los servicios de web hosting de Google.
● Cherokee
○ Multiplataforma.
○ User-friendly: gestionado mediante interfaz web.
○ Integra multitud de tecnologías web: CGI, FastCGI, PHP, etc.
○ Es español.
● Apache Tomcat
○ Open source.
○ Integra servidor web + servidor de aplicaciones.
○ Se comporta como contenedor de servlets, implementa JSP y soporta CGI.

31
10. Herramientas de programación
● Editor de texto
● Compilador
● Depurador
● Enlazador
● Generador de documentación
● Control de versiones

32
11. Entornos de desarrollo, editores y compiladores
Un IDE es un programa que empaqueta: editor, compilador, depurador, y
constructor de interfaz gráfica. Algunos:
● Apache NetBeans
○ Multiplataforma.
○ Multilenguaje (PHP, Java, …).
● Visual Studio Code
○ Multiplataforma y multilenguaje.
○ Incorpora control de versiones con Git.
● Eclipse
○ Multiplataforma y multilenguaje, aunque originalmente creado para programar en Java.
○ Open source.

33