1.

4 Planificacin de
las aplicaciones WEB

El desarrollo de aplicaciones web ha evolucionado

enormemente en la ltima dcada, tanto desde el punto de
vista del desarrollo de software como a nivel de
administracin de sistemas.
- Desarrollo de software
Se han creado multitud de tecnologas, frameworks de
desarrollo
de
aplicaciones,
bibliotecas,
aplicaciones
configurables, arquitecturas, modelos de publicacin de
versiones (release)
- Administracin de sistemas
Se ha evolucionado enormemente en la administracin de
sistemas, servicios de alojamiento, tcnicas de escalabilidad,
monitorizacin, gestin de centros de procesos de datos

Desarrollo de Software
- La evolucin ha tenido como resultado que hay una gran
cantidad de tecnologas, libreras, herramientas y estilos
arquitectnicos para desarrollar una aplicacin web.
- Es conveniente conocer los elementos ms importantes
desde un punto de vista de alto nivel para tener una visin
global de la disciplina.
- Existen dos enfoques en el desarrollo de aplicaciones web:
* Creacin de webs con tecnologas de desarrollo.
* Creacin de webs con sistemas gestores de contenido.

Arquitecturas de aplicaciones web: Una aplicacin web puede

tener diferentes arquitecturas. Esto determina cmo se usan

las diferentes tecnologas existentes
Tecnologas

de cliente:Tecnologas que permiten crear

interfaces de usuario atractivos y permiten la comunicacin
con el servidor. Basadas en HTML, CSS y JavaScript.

Tecnologas de servidor:Tecnologas que permiten implementar

el comportamiento de la aplicacin web en el servidor: lgica

de negocio, generacin de informes, compartir informacin
entre usuarios, envo de correos, etc
Bases de datos: La gran mayora de las webs necesitan

guardar informacin.
Las bases de datos son una parte esencial del desarrollo web.

Creacin de webs con sistemas gestores de contenido

-Existen aplicaciones web cuya principal funcionalidad es
la publicacin de contenido: blogs, pginas de empresas,
organismos pblicos, etc.
-Todas
estas
webs
tienen
mucho
en
comn,
prcticamente slo se diferencian en el contenido y en el
aspecto grfico
-Para desarrollar este tipo de webs, en vez de desarrollar
la web con tcnicas de desarrollo, se utiliza un software ya
desarrollado y se personaliza y adapta a las necesidades
-A las aplicaciones de este tipo se las denomina Sistemas
Gestores de Contenido (CMSs).

La arquitectura bsica de una aplicacin web

est formada por los siguientes elementos:
- Un navegador: Hace de cliente y realiza
peticiones solicitando recursos a los servidores
web. Cuando hace una peticin a un servidor y
le contesta envindole un recurso, se lo
muestra al usuario.
- Un servidor web: Recibe peticiones de
clientes (navegadores) y responde a esas
peticiones enviado un recurso o notificando un
error si el recurso no existe.

- El protocolo http: Es el protocolo basado

en TCP/IP que se utiliza para que el navegador
realice las peticiones al servidor web y este
responda.
- HTML: Es el formato bsico de los
documentos de la web. Es un formato textual,
basado en etiquetas que permite estructurar el
contenido de la pgina.

- La arquitectura de las aplicaciones web ha

evolucionado mucho en los ltimos aos.
-No todas las aplicaciones web tienen la misma
arquitectura.
Las
arquitecturas
se
diferencias
principalmente en lo esttica o dinmica que
sea la web.

Una web puede ser dinmica en el cliente y/o

en el servidor Las tecnologas utilizadas:

- Dinamismo en cliente: JavaScript.
- Dinamismo en servidor:Java EE, .NET,
PHP, Ruby on Rails, Python Django, Groovy,
Node.js, Scala Play

Cliente esttico (Sin JavaScript).

- Servidor esttico.
- Servidor dinmico (3 capas).
Cliente dinmico (Con JavaScript).

- Servidor esttico.
- Servidor dinmico.
* JavaScript para efectos grficos.
* JavaScript con peticiones en segundo
plano (AJAX).
* Single Page Application con REST.

Arquitectura Cliente esttico y Servidor

esttico
- El navegador hace peticin al servidor
mediante http.
- El servidor transforma URL a ruta en disco.
- El servidor devuelve el fichero de disco al
navegador.
- El navegador visualiza (renderiza) la pgina
HTML con estilos CSS e imgenes (sin JavaScript).
- Cuando el usuario hace clic en un enlace, el
navegador repite el proceso con la URL del link y
recarga por completo la pgina web.

Arquitectura Cliente esttico y Servidor

esttico
- Con esta arquitectura el servidor siempre
devuelve los mismos recursos.
- Desde el punto de vista del servidor, la web es
esttica.
- La web est formada por HTML, CSS, Imgenes,
PDF, etc (pero no incluye JavaScript).
- A este tipo de web no se le suele llamar
aplicacin web porque nada es dinmico. Se
denomina simplemente pgina web.

Arquitectura Cliente esttico y Servidor

esttico
- La web se dise con esta arquitectura
- Las primeras pginas web eran as
- Todava se sigue usando en muchas
pginas web:
* Pginas personales o de proyectos
bsicas
(p.e. Tecnologa de webs de github).
* Documentacin tcnica (JavaDoc en
Java,
Maven site, etc).

Arquitectura Cliente esttico y Servidor

dinmico
Es un ejemplo de arquitectura de 3 capas:
- Navegador:Capa de presentacin.
- Servidor web: Capa de aplicacin (Lgica de
negocio).
- Base de datos: Capa de datos.

- Arquitectura Cliente esttico y Servidor dinmico.

- Cuando el servidor web recibe una peticin, dependiendo
de la URL:
* Devolver contenido del disco
* Ejecutar cdigo para generar el recurso
dinmicamente
- Cuando se ejecuta cdigo, normalmente se hacen
consultas a una base de datos para recuperar la informacin.
- Lo ms habitual es que se genere la pgina HTML de
forma dinmica.
- Tambin se pueden generar recursos de otro tipo
(imgenes, PDFs).
- Si el usuario pulsa un link, se recarga la pgina al
completo .

Arquitectura Cliente esttico y Servidor dinmico

-Es la arquitectura de las primeras aplicaciones web
-Todava sigue habiendo muchas web con esta
arquitectura.
-El contenido es dinmico, porque se ejecuta cdigo en
el servidor para generar dicho contenido.
-La experiencia de usuario antes no era muy buena:
*Conexiones lentas implican tiempos de carga
apreciables en cada clic.
*La recarga completa de la pgina ofrece una mala
experiencia de usuario (pgina en blanco).
-Pero ha mejorado:
*Mayor velocidad de Internet (menos tiempo
de
espera).
*Navegadores muestran la nueva pgina una vez
cargada (sin pasar por la pgina en blanco).

Arquitectura Cliente dinmico y Servidor

esttico.
- El contenido de la pgina web est alojado en el
disco duro del servidor (esttico).
- El cliente es dinmico porque las pginas incluyen
cdigo JavaScript que se ejecuta en el
navegador.
- Este JavaScript se usa para incluir efectos
grficos:
* Efectos grficos que no se pueden implementar
con CSS.
* Mostrar u ocultar informacin en funcin de los
elementos que se seleccionan (para documentos
largos).
* Mens desplegables
* Pginas adaptables para mviles (responsive)

Arquitectura Cliente dinmico y Servidor

dinmico
- La mayora de las aplicaciones web actuales
son dinmicas tanto en cliente como en servidor.
- Dependiendo de cmo se use el JavaScript en el
cliente, las aplicaciones se pueden dividir en tres
tipos:
* JavaScript para efectos grficos. *
JavaScript con peticiones en
segundo plano
(AJAX).
* Single Page Application con API REST.

JavaScript para efectos grficos

- En este caso, el dinamismo en el cliente se
utiliza exactamente igual que con un servidor
esttico
JavaScript se dise, entre otras cosas, para

aadir efectos grficos bsicos a las pginas

cuando el CSS era muy limitado.
- La gran mayora de las aplicaciones web que
existen en Internet siguen esta arquitectura.

JavaScript con peticiones en segundo plano

(AJAX)
- JavaScript se puede usar para no tener que
recargar
completamente la pgina completa al
pulsar un link.
- Con JavaScript se puede hacer peticin al servidor
web
en segundo plano.
- Cuando llega al navegador el resultado de la
peticin, el cdigo.
- JavaScript actualiza aquellas partes de la pgina
necesarias.
- A esta tcnica se la conoce como AJAX
(Asynchronous JavaScript And XML).

JavaScript con peticiones en segundo plano

(AJAX)
- Usar AJAX en una pgina mejora mucho la
experiencia de usuario.
- No es necesario recargar la pgina al completo, slo
aquellas partes que cambian (por ejemplo: se puede
dejar el men fijo).
- La pgina se puede cargar por partes, primero la
informacin importante y en segundo plano otros
elementos complementarios (por ejemplo: los botones
de compartir, los comentarios en un blog).
- Se puede dar realimentacin al usuario de formas
ms adecuadas (cuadro de dilogo, error de validacin
en un formulario, quitar el icono de carga de un
recurso, etc.).

JavaScript con peticiones en segundo

plano (AJAX)
- Cuando el cdigo JavaScript hace peticiones, el
servidor puede devolver:
* Contenido para ser incluido en la pgina
directamente:
- Fragmentos de HTML generados
dinmicamente
- Recursos estticos en disco:
Imgenes,
PDF, HTML, etc
* Informacin que ser interpretada por
JavaScript para modificar la pgina (Mostrar un
error, cambiar un color). * Informacin generada
dinmicamente estructura en XML o JSON (un
formato
similar a XML).

JavaScript con peticiones en segundo

plano (AJAX)
- Un servidor web genera HTML de forma
dinmica cuando recibe peticiones http.
- Si se usa AJAX, el servidor genera informacin
en XML o JSON cuando recibe peticiones http.
- Habitualmente, cuando un servidor web
genera XML o
JSON ante peticiones http,
implementa una API REST.

JavaScript con peticiones en segundo

plano (AJAX)
- Existen muchas aplicaciones web que no usan
AJAX.
- La mayora de las aplicaciones que se han
desarrollado en los ltimos aos usan AJAX en
algunas de sus pginas por la mejora en la
experiencia del usuario.

Single Page Application con API REST

- La tcnica AJAX se puede llevar al extremo y
que todo el contenido dinmico se cargue
nicamente con JavaScript.
- En este caso, la aplicacin web es un conjunto
de recursos HTML, CSS y JavaScript estticos,
que se cargan en el navegador.
- El contenido dinmico se genera en el servidor
nicamente como XML o JSON que se carga en
segundo plano con JavaScript mediante
peticiones a la API REST del servidor web.