1.2 Arquitectura de las aplicaciones WEB

1.4 Planificacin de las aplicaciones WEBEl 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 softwareSe han creado multitud de tecnologas, frameworks de desarrollo de aplicaciones, bibliotecas, aplicaciones configurables, arquitecturas, modelos de publicacin de versiones (release)

- Administracin de sistemasSe 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

9Cliente 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).13Arquitectura 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.