Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW

Arquitectura de Aplicaciones Web

Servicios y Aplicaciones Telem aticas

Departamento de Sistemas Telem aticos y Computaci on (GSyC)

gsyc-profes@gsyc.escet.urjc.es

5 de noviembre de 2008

Departamento de Sistemas Telem aticos y Computaci on (GSyC) Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW

Arquitectura de Aplicaciones Web

c 2008 Grupo de Sistemas y Comunicaciones. Algunos derechos reservados. Este trabajo se distribuye bajo la licencia Creative Commons Attribution Share-Alike disponible en http://creativecommons.org/licenses/by-sa/2.1/es

Departamento de Sistemas Telem aticos y Computaci on (GSyC)

Arquitectura de Aplicaciones Web

Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW

Arquitectura SW de las aplicaciones Web

Es importante mantener tan separados como sea posible l ogica y f sicamente los siguientes niveles de la arquitectura a la hora de implementar cada uno de ellos:
Cliente Nivel de Presentacin APIs

Servidor Flujo de interaccin

Lgica de la Aplicacin Web

Datos en almacenamiento estable

Departamento de Sistemas Telem aticos y Computaci on (GSyC) Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW

Arquitectura de Aplicaciones Web

Arquitectura SW de las aplicaciones Web

Datos en almacenamiento estable
Datos almacenados en cheros, pero normalmente usando una base de datos relacional en el lado del servidor El primer paso en el desarrollo de la aplicaci on suele ser pensar en qu e datos almacenar, de d onde conseguirlos, c omo representarlos

L ogica de la Aplicaci on Web

C odigo que implementa la funcionalidad propia de la aplicaci on Web. Dene qu e puede hacer el usuario gracias a la aplicaci on. Ej. Acumular en el carrito de la compra productos que quiere comprar, Realizar la orden de compra una vez que el usuario no quiere m as productos Si se cambia la l ogica de la aplicaci on Web se altera la naturaleza de la aplicaci on: es otra aplicaci on Es la u nica forma de acceder a los datos Programado en el lado del servidor (PHP, Perl, Ruby, Python, Java, .NET)
Departamento de Sistemas Telem aticos y Computaci on (GSyC) Arquitectura de Aplicaciones Web

Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW

Arquitectura SW de las aplicaciones Web

Flujo de interacci on
Dene la navegaci on del usuario a trav es de p aginas alogo de productos como p agina HTML. Ej. mostrar cat principal, si selecciona producto mostrar p agina con contenidos del carrito, al terminar pedir tarjeta de cr edito,... Es posible intercambiar el ujo de interacci on por otro, sin modicar la l ogica de la aplicaci on Web Programado en el lado del servidor (PHP, Perl, Ruby, Python, Java, .NET)

Nivel de Presentaci on / APIs

La interfaz con el usuario se realiza a trav es del navegador Se mantienen separados, por un lado la estructura de la p agina (marcado HTML), y por otro el aspecto visual (hojas de estilo CSS) Proporcionando APIs se abre la posibilidad de que terceros denan su propio nivel de presentaci on y su propio ujo de interacci on (Ej. mashups)
Departamento de Sistemas Telem aticos y Computaci on (GSyC) Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW Arquitectura de Aplicaciones Web

Peri odico electr onico

Datos: art culos, usuarios (presentes en casi todas las aplicaciones) y permisos sobre el web (LDAP, base de datos, etc.) L ogica de la Aplicaci on web: mecanismos para subir y editar informaci on en la Web, gesti on de estad sticas, gesti on de publicidad Nivel de Presentaci on: Maquetaci on autom atica usando plantillas Flujo de interacci on, presentaci on: ver www.elpais.es, www.elmundo.es

Departamento de Sistemas Telem aticos y Computaci on (GSyC)

Arquitectura de Aplicaciones Web

Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW

Foro de noticias
Muy similar al peri odico electr onico, pero a nadiendo como datos de la aplicaci on los comentarios de los usuarios Base de datos m as y m as compleja: comunidades, certicaciones de conanza, modicaci on de art culos y comentarios, etc. L ogica de la aplicaci on: mecanismos para puntuaci on y selecci on de noticias, m odulo de correo electr onico para enviar res umenes y recomendaciones, m odulo de paso a PDF para impresi on y/o conversi on en documentos, buscador (y buscador personalizado) Nivel de Presentaci on: m odulos XML para servir titulares Flujo de interacci on, presentaci on: ver slashdot.org, meneame.net, barrapunto.com
Departamento de Sistemas Telem aticos y Computaci on (GSyC) Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW Arquitectura de Aplicaciones Web

Comercio electr onico

Datos: base de datos con productos, cuentas de clientes, proveedores, etc. L ogica de la aplicaci on: seguridad para gesti on de datos de facturaci on, integraci on con el sistema de correo electr onico (gesti on de incidencias), m odulo de acceso a entidades nancieras (gesti on de cobros), comentarios y cr ticas de clientes, recomendaci on autom atica de art culos, estad sticas, programas de aliados, etc. Presentaci on: formularios y plantillas para acceso al sitio Flujo de interacci on, presentaci on: ver www.amazon.com, optize.es

Departamento de Sistemas Telem aticos y Computaci on (GSyC)

Arquitectura de Aplicaciones Web

Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW

Aula virtual

Datos administrativos (listados, horarios, tutor as, etc.) Datos: Streaming de clases grabadas L ogica de la aplicaci on: documentos en l nea (subida, edici on, organizaci on), incluyendo apuntes de alumnos, foros de interacci on, chats, integraci on con correo electr onico, encuestas, ex amenes y pruebas en l nea, gesti on de pr acticas (entrega, correcci on semiautom atica, etc.) Flujo de interacci on, presentaci on: ver gsyc.es/moodle

Departamento de Sistemas Telem aticos y Computaci on (GSyC) Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW

Arquitectura de Aplicaciones Web

Campus virtual
A nade al aula virtual la siguiente l ogica de aplicaci on: Matriculaci on y gesti on de datos administrativos Gesti on de informaci on de proyectos Servicios de comunicaci on: correo electr onico, foros, documentaci on, etc. Relaci on con el campus f sico (localizaci on, control de acceso, etc.) Biblioteca virtual Gesti on de compras y de inventario Obtenci on de informes de estado y estad sticos Flujo de interacci on, presentaci on: ver www.campusvirtual.urjc.es
Departamento de Sistemas Telem aticos y Computaci on (GSyC) Arquitectura de Aplicaciones Web

Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW

Sitio de fotos

Datos: fotos L ogica de la aplicaci on: mecanismos para retocar las fotos, clasicar las fotos en albumes, buscar fotos, etiquetar las fotos con descripciones para facilitar la b usqueda, a nadir comentarios a las fotos, realizar pase autom atico de fotos, mandar a imprimir (con gesti on de cobro) Flujo de interacci on, presentaci on: ver www.ickr.com, picasaweb.google.es

Departamento de Sistemas Telem aticos y Computaci on (GSyC) Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW

Arquitectura de Aplicaciones Web

Red social

Similar a foro de noticias + sitio de fotos L ogica de la aplicaci on: mecanismos para gesti on del grafo social: X se hace amigo de Y, Z pertenece al grupo de inter es G, informe de actividades de un usuario a los miembros de su grafo social Flujo de interacci on, presentaci on: ver www.facebook.com, www.tuenti.com

Departamento de Sistemas Telem aticos y Computaci on (GSyC)

Arquitectura de Aplicaciones Web

Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW

Aplicaciones con geolocalizaci on

Datos: los usuarios a naden datos geolocalizados: fotos, rese nas de lugares, ... L ogica de la aplicaci on: b usqueda de direcciones, lugares en funci on de la localizaci on del usuario (WIFI, GPS, GSM, manualmente) Interconexi on con Red Social: chatear con amigos que est en cerca de m Flujo de interacci on, presentaci on: ver maps.google.com, maps.yahoo.com, rummble.com, www.life360.com

Departamento de Sistemas Telem aticos y Computaci on (GSyC) Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW

Arquitectura de Aplicaciones Web

Otros ejemplos

Reservas e informaci on tur stica Agencia de bolsa Sitio de alojamiento de listas y p aginas personales Buscador de Internet ...

Departamento de Sistemas Telem aticos y Computaci on (GSyC)

Arquitectura de Aplicaciones Web

Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW

Tecnolog as SW
En el cliente: En el cliente s olo cabe elegir entre un navegador web u otro (Firefox, MS Internet Explorer, Opera,...) La elecci on delimita el conjunto de tecnolog as SW disponibles: CSS, XHTML, HTML, DOM, JavaScript, AJAX, Flash,... En el servidor: En el servidor hay m as grados de libertad en cuanto a las tecnolog as a utilizar:
Servidor Web (CGI, FastCGI, Servlets, SSI) Tecnolog as de scripting en el lado del servidor Base de datos Frameworks
Departamento de Sistemas Telem aticos y Computaci on (GSyC) Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW Arquitectura de Aplicaciones Web

Servidor Web

Dos servidores principales: Apache HTTP Server de la Apache Software Foundation, Internet Information Services (IIS) de Microsoft FastCGI: con CGI hay que arrancar el programa auxiliar cada vez que llega una nueva petici on al servidor Web. Con FastCGI se deja arrancado el programa auxiliar, que crea un thread para cada nueva petici on M odulos de Apache compilados: usar CGI o FastCGI para arrancar scripts implica arrancar el int erprete. Los m odulos de Apache permiten integrar el c odigo del int erprete con el c odigo del servidor Web, acelerando la ejecuci on de programas auxiliares en scripts
Departamento de Sistemas Telem aticos y Computaci on (GSyC) Arquitectura de Aplicaciones Web

Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW

Servidor Web
Servlets: tecnolog a Java para generaci on de contenido din amico. Los servlets se integran en un contenedor web que interact ua con el servidor Web.
Los Java Servlets son clases Java que corren en el servidor, devolviendo c odigo HTML al servidor. Contenedores: Java System Application Server, Apache Tomcat, IBM WebSphere, Oracle Application Server, Apple WebObjects

SSI: Server Side Include

Alternativa a CGI y FastCGI para generaci on de c odigo din amico Primera aproximaci on a la inclusi on de c odigo mezclado con el marcado HTML. En funci on de la extensi on (.shtml) el servidor sab a que deb a analizar el chero en busca de directivas que, tras ejecutarse, insertaban nuevo c odigo HTML en el lugar en el que aparec an.
Departamento de Sistemas Telem aticos y Computaci on (GSyC) Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW Arquitectura de Aplicaciones Web

Tecnolog as de scripting en el lado del servidor

En lugar de incluir directivas SSI en las p aginas HTML se puede utilizar la potencia de un lenguaje de scripting Los lenguajes de scripting aportan mayor portabilidad frente a los compilados: los scripts no necesitan ser recompilados para otro SSOO o arquitectura, siempre que exista un int erprete Son m as lentos, pero cada vez menos. Existen m ultiples alternativas.
ASP/ASP.NET (Mundo Microsoft IIS) PHP Python Ruby Java. JSP (JavaServer Pages) es el equivalente en el mundo Java a ASP o PHP: c odigo Java mezclado en las p aginas HTML.
Departamento de Sistemas Telem aticos y Computaci on (GSyC) Arquitectura de Aplicaciones Web

Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW

Base de datos

Normalmente se utilizan RDBMS (bases de datos relacionales), aunque hay otros modelos de BD (p.ej. orientadas a objetos, usada en Zope) Oracle Microsoft SQL Server IBM DB2 Open Source: MySQL, PostgreSQL

Departamento de Sistemas Telem aticos y Computaci on (GSyC) Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW

Arquitectura de Aplicaciones Web

Frameworks

Facilitan la programaci on de Aplicaciones Web, simplicando la interfaz con la BD, la gesti on de formularios, sesiones, Ajax, ... permitiendo al programador centrarse en los aspectos de la l ogica de la Aplicaci on Web .NET framework Ruby on Rails Java: Struts, Spring, Tapestry,... Python: Django, Zope PHP: CakePHP, Zoop, Zend,

Departamento de Sistemas Telem aticos y Computaci on (GSyC)

Arquitectura de Aplicaciones Web

Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW

Arquitectura LAMP

LAMP: Linux, Apache, MySQL, Perl (PHP, Python, Ruby,...) Acr onimo utilizado para referirse a un conjunto de tecnolog as com unmente utilizadas en muchos sitios Web de exito (en el propio Google) Alternativa del mundo del software libre a las plataformas de Microsoft (ASP) y Sun (Java)

Departamento de Sistemas Telem aticos y Computaci on (GSyC) Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW

Arquitectura de Aplicaciones Web

Arquitectura HW
Conjunto de m aquinas, con sus componentes HW y software de sistemas (SO, BD,...) Se necesitan varios tipos de m aquinas, cada una de ellas corriendo diferente sw de sistemas Para comenzar se puede utilizar HW est andar (PCs con GNU/Linux p.ej.) Sitios como Google llevan esta soluci on al extremo: cientos de miles de PCs est andar con GNU/Linux En cuanto al SW de sistemas, cualquier distribuci on de GNU/Linux est andar, sin conguraci on especial, vale para arrancar. Luego se puede ir congurando ajustando par ametros del kernel, de la instalaci on de MySQL,... Al nal de un proyecto para desarrollar una aplicaci on Web el coste del desarrollo del SW es grande, pero al principio hay una inversi on importante: el HW
Departamento de Sistemas Telem aticos y Computaci on (GSyC) Arquitectura de Aplicaciones Web

Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW

Arquitectura HW: ejemplo 1

N1

Internet

N2
Router/ Cortafuegos Router/ Cortafuegos

Equilibrado de carga

Equilibrado de carga

N3
Servidor HTTP Servidor HTTP Servidor HTTP

N4

Servidor de Aplicaciones

Servidor de Aplicaciones

Servidor de Aplicaciones

servidor de cache memcached

servidor de cache memcached

servidor de cache memcached

N5
Base de Datos

Departamento de Sistemas Telem aticos y Computaci on (GSyC) Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW

Arquitectura de Aplicaciones Web

Arquitectura HW: ejemplo 2

Wikipedia (2007) M as de 75000 editores 5.300.000 art culos (2M en ingl es) En m as de 100 lenguas 100 servidores en varias localizaciones geogr acas
Departamento de Sistemas Telem aticos y Computaci on (GSyC) Arquitectura de Aplicaciones Web

Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW

D onde instalar el HW?

Instalaci on tradicional en proveedor: HW compartido: un proveedor de servicios de Internet o de hospedaje de sitios Web permite que se instale SW en una de sus m aquinas (PC) junto al SW de otros. Soluci on buena y barata para prototipar y lanzar la aplicaci on Web. HW dedicado: el proveedor dedica HW espec co para la aplicaci on (ej. un PC). Puede dejarnos una cuenta (ellos instalan el SO) o dejarnos instalar el SO. HW nuestro: nos dejan espacio, energ a y conexi on a la red. Nosotros ponemos el HW. Servicios: monitorizar la aplicaci on Web y diagnosticar el problema por tel efono vs. monitorizar s olo el acceso a la red y rearrancar m aquinas.
Departamento de Sistemas Telem aticos y Computaci on (GSyC) Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW Arquitectura de Aplicaciones Web

D onde instalar el HW?

Instalaci on en la nube (cloud computing): mediante APIs se hace transparente el uso del HW del proveedor, usando recursos virtuales. Permite empezar con poco y luego hacer escalar f acilmente gracias a que el proveedor tiene muy automatizada la conguraci on / instalaci on / cobro seg un recursos utilizados Framework en la nube. Se ofrece una plataforma de desarrollo de aplicaciones (Rails, Django) en la red. Mediante APIs se puede subir c odigo de la aplicaci on Web. Transparencia: no se sabe en qu e m aquinas correr a: gestionado por el proveedor, quien hace escalar. Ej. Google App Engine, Mosso.com, Force.com Infraestructura en la nube. El proveedor ofrece servicios de m as bajo nivel: host virtual en el que instalar uno u otro SO, capacidad de almacenamiento, ancho de banda. Ej. Amazon Web Services (Microsoft y otros est an detr as de este negocio). Departamento de Sistemas por Telem a ticos y(bytes Computaci o n (GSyC) Arquitectura de Aplicaciones Web Pagos uso almacenados, tiempo de CPU, bytes transferidos)

Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW

D onde instalar el HW?

En casa: Soluci on para muy peque nas (PC a trav es de ADSL) o muy grandes instalaciones. Ej. de gran instalaci on: Google (cientos de miles de m aquinas).
Edicio, operadores para monitorizar, conexiones redundantes a la red el ectrica, servicios de alimentaci on ininterrumpida, sistemas antiincendios, contratos con varios proveedores de Internet,...

Departamento de Sistemas Telem aticos y Computaci on (GSyC) Arquitectura SW Ejemplos de Aplicaciones Web Tecnolog as SW Arquitectura HW

Arquitectura de Aplicaciones Web

Referencias:

Cap tulo 2 (Web Application Architecture) Building Scalable Web Sites. Cal Henderson. OReilly 2006.
http://proquest.safaribooksonline.com/0596102356

Arquitectura HW de Wikipedia.

http://meta.wikimedia.org/wiki/Wikimedia servers

Departamento de Sistemas Telem aticos y Computaci on (GSyC)

Arquitectura de Aplicaciones Web