Tema 1.

1
Modelos de programación web

1. Tipos de Aplicaciones Web

1. Aplicaciones web estáticas
2. Aplicaciones web dinámicas:
1. Aplicaciones de varias páginas Cliente-Servidor
2. Aplicaciones web de página única
3. Aplicaciones web Progresivas

2. Lado Cliente y lado Servidor

3. Arquitectura
4. Tecnologías del Lado Cliente
5. Herramientas del Lado Cliente
 Aplicación de Múltiples Páginas -Cliente Servidor-
 Arquitectura front-end y back-end
 Tema 1.1
Modelos de programación web
Tipos de Aplicaciones Web: Páginas estáticas

• Son páginas enfocadas principalmente a mostrar una información permanente, NO permiten

crear efectos o funcionalidades más allá de los enlaces. El usuario se limita a obtener
información sin poder interactuar con la página web visitada
• Una página web estática puede ser multimedia (contener varios tipos de medios vídeo, sonido,
imágenes...) e interactiva a través de enlaces e hipervínculos, sin ser dinámica por ello
• No cambia la estructura ni el contenido cuando es enviado al usuario. Cambiar un solo elemento
en una página web estática requiere reconstruir y recargar en el servidor toda la página

index.html
india.html
 Tema 1.1
Modelos de programación web
Tipos de Aplicaciones Web: Páginas dinámicas

• Aplicaciones de múltiples páginas (Cliente-Servidor)

• Aplicaciones de página única (SPA)

• Aplicaciones web progresivas (PWA).

 Tema 1.1
Modelos de programación web
Tipos de Aplicaciones Web: Páginas dinámicas
Aplicación de Múltiples Páginas -Cliente Servidor-
Ejecutan la mayor parte de la lógica de aplicación en el servidor. Son aplicaciones web
tradicionales si. Se usarán si:
- Los requisitos del lado cliente de la aplicación son sencillos o incluso de solo lectura
- La aplicación necesita funcionar en exploradores que no admiten JavaScript
- El equipo no está familiarizado con las técnicas de desarrollo de JavaScript o TypeScript
Hacen referencia a Arquitecturas Web Clásicas en donde se dispone de múltiples páginas HTML y
cada una carga diferentes contenidos apoyándose en la navegación contra el servidor. Es decir cada
página muestra su contenido y se conecta mediante links con las demás y todas son generadas
desde el servidor

1 2 3
Navegador
3

2
Realmente estamos navegando
1
entre las diferentes páginas de
una forma muy natural y con
Servidor página completa
 Tema 1.1
Modelos de programación web
Tipos de Aplicaciones Web: Páginas dinámicas
Aplicación de Múltiples Páginas -Cliente Servidor-

Características
• Las aplicaciones web tradicionales apenas cuentan con comportamiento del lado
cliente, y en su lugar se basaban en el servidor para todas las operaciones de
navegación, consultas y actualizaciones que la aplicación tuviera que realizar
• Cada operación nueva realizada por el usuario se convierte en una nueva solicitud
web, con el resultado de una recarga de página completa en el explorador del
usuario final
 Tema 1.1
Modelos de programación web
Tipos de Aplicaciones Web: Páginas dinámicas
Aplicación de Múltiples Páginas -Cliente Servidor-
• El resultado es que en el HTML se mezcla tanto el contenido como la presentación -CSS-. Para
cambiar la forma con la que se muestra una página, estamos obligados a cambiar cada uno de
los archivos HTML que componen una web. Aplicar el formato de forma separada
• Mezclando código PHP, código HTML (e incluso el Javascript) en el mismo archivo "Código
Espagueti". Para cambiar el modo en cómo queremos que se muestre el contenido, estamos
obligados a repasar todas y cada una de las páginas que tiene nuestro proyecto. Sería mucho
más útil que el HTML estuviera separado del lenguaje del servidor
• Se accede a los mismos datos en lugares distintos. Si alteramos la tabla para añadir nuevos
campos o cambiar los existentes, estamos obligados a cambiar, página a página, todos los
lugares donde se consumían estos datos. No estamos reutilizando código

Servidor Web
JavaScipt Petición de Apache
Plugins página
API Servidor BD
MySQL
Cliente

Formateo a
código HTML
Resultado HTML Motor PHP
 Tema 1.1
Modelos de programación web
Tipos de Aplicaciones Web: Páginas dinámicas
Aplicación de Múltiples Páginas -Cliente Servidor-

Arquitectura por capas a nivel de software

Estilo de arquitectura software que separa los datos de una aplicación, la interfaz de
usuario y la lógica de control en tres componentes distintos

Pretende separar el código, de tal manera que si

necesitamos hacer un cambio en la Base de Datos, no
afecte a la lógica del programa
Modelo
• Modelo. Define qué datos debe contener la
aplicación. Si el estado de estos datos cambia, el
modelo generalmente notificará a la vista
• Vista. Define cómo se deben mostrar los datos de Controlador
la aplicación
• Controlador. Contiene una lógica que actualiza el
modelo y / o vista en respuesta a las entradas de
los usuarios de la aplicación
Vista
 Tema 1.1
Modelos de programación web
Tipos de Aplicaciones Web: Páginas dinámicas
Arquitectura front-end y back-end
Hasta hace unos años la tecnología web se basaba en el paradigma MVC era bastante
simple:
• M: Modelo -> back-end
• V: Vista -> front-end
• C: Controlador -> back-end
En la actualidad se tiende a crear aplicaciones web, que se ejecutan en el navegador del
cliente, tal como una app se ejecuta siempre en el cliente (nativa, web o híbrida)
La lógica que antes solo se ejecutaba en el servidor, ha pasado a ejecutarse en el cliente

En este momento, se plantea de la siguiente manera:

• back-end: Es la parte de la aplicación que se ejecuta fuera del dispositivo del
cliente (servidor físico, la nube, contenedores, serverless). Se ejecuta en el
servidor Php, .NET, Java, Python, etc)
• front-end: Es la parte de la aplicación que se ejecuta en el cliente (windows,
osx, linux, chrome, firefox, android, ios). HTML+CSS+JS
 Tema 1.1
Modelos de programación web
Arquitecturas Web
Arquitectura front-end y back-end
Actualmente la carga de trabajo de los servidores se distribuyen en los clientes para evitar
su saturación. El servidor envía los archivos y datos y es el cliente el que los procesa y
muestra
NAVEGADOR SERVIDOR

http Control Base

VMC HTML PHP De
CSS ASP Datos
AJAX Pyphon sql
XML

NAVEGADOR SERVIDOR

Control http/datos Base

Front-end HTML JavaScript Servicios De
frameworks JSON PHP
Back-end CSS
AJAX ASP
Datos
- Angular
- React XML Pyphon sql
Modelo
DAO
datos
 Tema 1.1
Modelos de programación web
Arquitectura front-end

Tecnologías front-end
• HTML  Lenguaje de marcas que se encarga en exclusiva de los contenidos de las páginas y
aplicaciones Web, así como de su distribución. En concreto HTLM 5
• CSS  Aspecto que va a tener la interfaz de usuario o la página web
• JavaScript  Proporciona la funcionalidad a la aplicación. En su última versión ECMAScript 6
• Navegadores  Las herramientas para el desarrollador, indispensables para poder depurar
nuestro código, optimizar la interfaz, medir rendimiento, de los principales navegadores
(Google Chrome y Mozilla Firefox)
• Frameworks JavaScript  Un framework es un esquema o marco de trabajo que ofrece una
estructura base para elaborar un proyecto con objetivos específicos, una especie de plantilla
que sirve como punto de partida para la organización y desarrollo de software. Ejemplos:
AngularJS, vue.js, React
• Jquery: librería de Javascript, que mejora el procesamiento del código HTML, el manejo de
eventos y las animaciones. Reduce la cantidad de líneas de código.
Herramientas
• Visual Studio Code: como editor de textos
• Git, para control de código fuente
• npm / yarn: para gestión de dependencia y automatización de tareas
• Webpack: para gestionar y utilizar dependencias, automatizar y crear aplicaciones
optimizadas
 Tema 1.1
Modelos de programación web
Arquitectura front-end
Aplicación web de una sola página o SPA

Usa JavaScript para controlar el ciclo de vida de la página

El contenido se carga no desde páginas HTML nuevas, sino que se genera dinámicamente a través de
la habilidad de JavaScript de manipular los elementos DOM de la página existente

Características:
• En la misma página se irán intercambian vistas distintas, produciendo el efecto de que tiene
varias páginas, cuando realmente todo es la misma
• En la comunicación con un servidor y éste envía los datos que debe mostrar "en crudo“, es
decir, se envían los datos puros, no mezclados con HTML
• No quiere decir que no cambie la URL a la que se accede con el navegador. La clave es que,
aunque cambie esta URL, la página no se recarga nunca. La navegación entre la secuencia de
páginas del historial se realiza realmente entre vistas de la aplicación
 Tema 1.1
Modelos de programación web
Arquitectura front-end
Aplicación web de una sola página o SPA

Las aplicaciones SPA utilizan un patrón de arquitectura web, que se llama app shell model. Donde las
partes compartidas de la Interfaz de Usuario en el código, como menús, encabezados, pies de página
y otros… se cargan cuando se carga inicialmente página
Y las diferentes vistas se cargan de forma dinámica en este “cascarón”. Lo que reduce la cantidad de
datos que se tienen que enviar a la red

Las SPA funcionan con AJAX/Fetch y HTML5 para crear aplicaciones web receptivas

1. Cargan una sola página HTML, que proviene del servidor y que descarga el navegador. Esta
interacción entre el navegador y el servidor ocurre a través de llamadas AJAX
2. Los datos se devuelven en formato JSON, por lo que el concepto de una sola página se
reescribe dinámicamente y no necesita otras páginas renderizadas previamente. Esto mejora
directamente la velocidad de un sitio web y proporciona interacciones más rápidas
3. A medida que el usuario navega a través de la aplicación web, todos los contenidos y
elementos que necesitan actualización se recuperan y se vuelven a representar sin necesidad
de que el usuario vuelva a cargar el navegador
 Tema 1.1
Modelos de programación web
Arquitectura front-end
Aplicación Web Progresiva o PWA
Las aplicaciones web progresivas se comportan como web nativas (Diapositiva14) desarrolladas
específicamente para cada sistema operativo adaptando a cada uno el lenguaje con el que se
desarrolla, pero usan tecnologías web (HTML, CSS y Javascript) pudiéndose ejecutar en cualquier
navegador compatible con los estándares
A diferencia de las SPA, Progressive Web App (PWA) se parece más a un conjunto de pautas y listas
de verificación que a una arquitectura específica. Las PWA son conocidas y se desvían de las SPA por
varias características, tales como:
• Service workers -Trabajadores de servicios-. Es un script controlable que se ejecuta entre
el navegador y el servidor. Proporcionan la base técnica para muchas de las características
destacadas de PWA como la disponibilidad sin conexión (almacenamiento en caché de los
activos del sitio web) y las notificaciones automáticas (interceptación de las solicitudes de
red). También son responsables de gran parte de los cálculos pesados, que es la razón
principal por la que las PWA son tan eficientes y de carga rápida
• Manifiesto de la aplicación web. Se trata de un archivo JSON que contiene los metadatos
necesarios que determinan cómo se presenta la aplicación al usuario en la pantalla de
inicio para la PWA. Los manifiestos de aplicaciones web se pueden generar
automáticamente mediante un generador de manifiestos PWA
• HTTPS: Las PWA siempre se sirven desde un origen seguro, todas las conexiones pasen por
un origen HTTPS seguro
 Tema 1.1
Modelos de programación web
Arquitectura front-end
Tipos de aplicaciones
Una aplicación nativa es una aplicación que ha sido específicamente desarrollada para el
sistema operativo en el que corre
Una aplicación web funciona en distintos sistemas operativos como Windows, Mac o
sistemas de móviles. Hace referencia a que se construyen utilizando estándares de
desarrollo web, algunos ya conocidos como HTML, CSS y javaScript; y una nueva generación
de APIs de JavaScript
Las aplicaciones web progresivas (PWA) son funcionalidades extendidas de las aplicaciones
web, que permiten colocarlas a un nivel mucho más próximo de las aplicaciones móviles, o
de escritorio. Es decir, son un pasaporte para convertir una web en una aplicación capaz de
hacer cosas que antes estaban asociadas a programas y aplicaciones instalables en
ordenadores o dispositivos
 Tema 1.1
Modelos de Programación Web

ACTIVIDAD

Investiga e indica un ejemplo de web para cada una de las

siguientes arquitecturas:

1. Aplicaciones web de Múltiples Páginas Cliente-Servidor.

2. Aplicación de una sola página (SPA)
3. Aplicaciones web Progresivas (PWA)

Para cada apartado:

• Se valorará la investigación y los ejemplos. Además
• Deberás indicar bibiografía/páginas web utilizadas