Está en la página 1de 39

PROGRAMACIN WEB

UNIDAD I
Arquitectura
1.1 Evolucin de las aplicaciones web.
1.2 Arquitectura de las aplicaciones web.
1.3 Tecnologas para el desarrollo de
aplicaciones web.
1.4 Planificacin de aplicaciones web.
http://es.wikipedia.org/wiki/Aplicaci%C3%B3n_web

La evolucin de la Web
La Web de hoy es un universo de aplicaciones y pginas
web interconectadas lleno de vdeos, fotos y contenido
interactivo. Lo que no ve el usuario es cmo interactan
los navegadores y las tecnologas web para hacer que
esto sea posible.
A lo largo del tiempo, las tecnologas web han
evolucionado hasta permitir que los desarrolladores
puedan crear nuevas e increbles experiencias web. La
Web actual es el resultado de los continuos esfuerzos de
una comunidad web abierta que ayuda a definir estas
tecnologas web, tales como HTML5, CSS3 y WebGL, y
garantiza que todos los navegadores web las admitan.

http://www.evolutionoftheweb.com/?hl=es#/growth/day

Historia de las aplicaciones web


En un principio la web era sencillamente una coleccin de pginas estticas, documentos, etc., para su consulta o
descarga. El paso inmediatamente posterior en su evolucin fue la inclusin de un mtodo para elaborar pginas
dinmicas que permitieran que lo mostrado tuviese carcter dinmico (es decir, generado a partir de los datos de la
peticin). Este mtodo fue conocido como CGI ("Common GatewayInterface") y defina un mecanismo mediante el que
se poda pasar informacin entre el servidor y ciertos programas externos. Los CGIs siguen utilizndose ampliamente; la
mayora de los servidores web permiten su uso debido a su sencillez. Adems, dan total libertad para elegir el lenguaje
de programacin que se desea emplear.
El funcionamiento de los CGIs tena un punto dbil: cada vez que se reciba una peticin, el servidor deba lanzar un
proceso para ejecutar elprograma CGI. Como la mayora de CGIs estaban escritos en lenguajes interpretados, como Perl
o Python, o en lenguajes que requeran "run-time environment", como Java o VisualBasic, el servidor se vea sometido a
una gran carga. La concurrencia de mltiples accesos al CGI poda comportar problemas graves.
Por eso se empiezan a desarrollar alternativas a los CGIs que solucionaran el problema del rendimiento. Las soluciones
llegan bsicamente por 2 vas: 1) se disean sistemas de ejecucin de mdulos mejor integrados con el servidor, que
evitan la instanciacin y ejecucin de varios progrmas, y 2) se dota a los servidores unintrpretede algn lenguaje de
programacin que permita incluir el cdigo en las pginas de forma que lo ejecute el servidor, reduciendo el intervalo de
respuesta.
Entonces se experimenta un aumento del nmero de arquitecturas y lenguajes que permiten desarrollar aplicaciones
web. Todas siguen alguna de estas vas. Las ms tiles y las ms utilizadas sonlas quepermiten mezclar los 2 sistemas:
un lenguaje integrado que permita al servidor interpretar comandos "incrustados" en las pginas HTML y, adems, un
sistema de ejecucin de programas mejor enlazado con el servidor, que no implique los problemas de rendimiento
propios de los CGIs.
Una de las ms potentes es la seguida por Sun Microsystems con su Java, integrado por 2 componentes; un lenguaje que
permite la incrustacin de cdigo en las pginas HTML que el servidor convierte en programas ejecutables, JSP ("Java
Server Pages" o "Pginas de Servidor de Java"), y un mtodo de programacin muy ligado al servidor, con un rendimiento
superior a los CGIs, denominado "Java Servlet".
Otra tecnologa de xito y una de las ms utilizadas es el lenguaje PHP. Se trata de un lenguaje interpretado que permite
la incrustacin de HTML en los programas, con una sintaxis derivada de C y Perl. El hecho de ser sencillo y potente ha
contribuido a hacer de PHP una herramienta muy apropiada para determinados desarrollos.
Existen otros mtodos, a menudo vinculados a unservidor webconcreto, como mod_perl para Apache o RXML para
Roxen.

CONCEPTOS???

ARQUITECTURA DE
APLICACIONES WEB

APLICACIONES WEB
Aplicaciones que los usuarios pueden utilizar
accediendo a un servidor web a travs de Internet o de
una intranet mediante un navegador.
Es una aplicacin software que se codifica en un
lenguaje soportado por los navegadores web en la que
se confa la ejecucin al navegador

Una pgina Web puede contener elementos que


permiten una comunicacin activa entre el usuario y la
informacin.
Por ejemplo rellenar y enviar formularios, participar en
juegos diversos y acceder a gestores de base de datos
de todo tipo.

Una aplicacin Web es una extensin dinmica de la


web o una aplicacin de servidor.
Existen 2 tipos de aplicaciones Web
Orientada a la presentacin
Orientada al servicio

Orientada a la presentacin
Genera paginas web interactivas que contienen varios
tipos de lenguaje de marca (HTML, XML, etc.) y
contenido dinmico en respuesta a peticiones.

Orientada al servicio
Estas paginas implementan el punto final del servicio
web.
Las aplicaciones orientadas a la presentacin
frecuentemente son clientes de las aplicaciones web
orientadas al servicio.

La iteracin entre un cliente Web y una aplicacin


Web.
1. cliente enva una peticin HTTP al servidor web
2. Las tecnologas Java server convierten la
peticin un objeto HTTPServetRequest
3. Esta peticin es deliberada a un componente
Web, el cual puede interactuar con JavaBeans y
otros para generar un contenido dinmico
4. El componente web puede generar un objeto
HTTPServletResponse
5. El servidor web convierte este objeto en una
respuesta HTTP y es enviada a su cliente.

Una Arquitectura define: un conjunto de elementos,


conectores, restricciones y un sistema de control que
caracterizan a un sistema o a una familia de sistemas.

ARQUITECTURA DE DOS CAPAS


La WWW est basado en el modelo Cliente / Servidor.
El Cliente principal en el WWW son los browsers o

navegadores que solicitan informacin al Servidor.


El Servidor son los Servidores Web que proporcionan

documentos y contenidos multimedia a los clientes a


travs de la red

Esta arquitectura consiste bsicamente en un cliente


que realiza peticiones a otro programa (el servidor) que
le da respuesta.

La separacin entre cliente y servidor es una separacin


de tipo lgico, donde el servidor no se ejecuta
necesariamente sobre una sola mquina ni es
necesariamente un slo programa.
Los tipos especficos de servidores incluyen los
servidores web, los servidores de archivo, los servidores
del correo, etc. Mientras que sus propsitos varan de
unos servicios a otros, la arquitectura bsica seguir
siendo la misma

La red cliente-servidor es aquella red de comunicaciones en la que


todos los clientes estn conectados a un servidor, en el que se
centralizan los diversos recursos y aplicaciones con que se cuenta; y
que los pone a disposicin de los clientes cada vez que estos son
solicitados.
Esto significa que todas las gestiones que se realizan se concentran
en el servidor, de manera que en l se disponen los requerimientos
provenientes de los clientes que tienen prioridad, los archivos que son
de uso pblico y los que son de uso restringido, los archivos que son
de slo lectura y los que, por el contrario, pueden ser modificados,
etc. Este tipo de red puede utilizarse conjuntamente en caso de que
se este utilizando en una red mixta

Ventajas
Centralizacion del control
Escalabilidad
Facil mantenimiento

Desventajas:
Congestin del trafico
El cliente no dispone de los recursos que pueden existir
en el servidor

Ejemplos
wikipedia
Juegos on line

ARQUITECTURA DE 3 CAPAS

Arquitectura en 3 capas
Capa de datos
Capa de negocios
Capa de presentacin

La WEB
Al conectarnos a internet estamos navegando en 3
capas.
Al abrir un formulario web de inscripcin (capa de
presentacin)
Despus de enviar la informacin esta es verificada (capa de
negocios).
Finalmente la informacin es grabada en una base de datos
(capa de datos).

Ejemplo
Capa de datos

Capa de Negocio

Capa de Presentacin

Capa de datos
Base de datos
Tablas
Procedimientos almacenados
Componentes de datos

Capa de datos Microsoft


ADO .NET
SQL SERVER 20000
Procedimientos almacenados
Componentes (c#, vb, c++, j#)
XML

Capa de Negocio
Reglas del negocios
Validaciones
Clculos
Flujos y procesos

Capa de Negocios Microsoft


Lenguajes de Componentes (c#, vb, c++, j#)
Componentes Locales
Componentes Web (Servicios web)

Comunicacin entre componentes utilizando el SOAP y


XML

Web Services
Permiten publicar componentes de negocios(Web
Services) en un servidor web.
Estas componentes pueden ser llamadas desde otros
servidores o clientes utilizando SOAP.
Simple Object Access Protocol (SOAP) es un protocolo
para el intercambio de la informacin basado en HTTP y
XML

Capa de Presentacin
Formularios
Informes
Respuestas al usuario

Capa de Presentacin Microsoft


ASP .NET
ASP
XML, XSL
HTML
JAVASCRIPT , VBSCRIPT
Vb Form
Word, Excel

Extensible Markup Language (XML)


Meta Lenguaje de Marcacin es un lenguaje estandar
similar al html, que permite la comunicacin entre los
sistemas de informacin.
Tiene una estructura de rbol.
Se recomienda usarlo en la comunicacin entre las
componentes de Presentacin con las de Negocios

Ejemplo

DB

COMPONENTES
DATOS
C# o VB .NET

HTML
FORMULARIO
JAVASCRIPT

XML
INFORMACIN

COMPONENTES
NEGOCIO
C# o VB .NET
WEB SERVICE

PRESENTACION
ASPX

XSL
HOJA DE ESTILO

XML
INFORMACIN
PROCESADA

1.3 Tecnologas para el desarrollo Web.??

CGI. Common Gateway Interface.


Fast-CGI.
Paginas dinmicas en servidor.
Java.
Java DataBase Connectivity. JDBC.
Servlets.
Java Server Pages. JSP.
eXtensible Markup Language XML.
eXtensible Stylesheet Language. XSL.
Applets de Java.

1.4 Planificacin de aplicaciones web.


IMPORTANCIA DEPLANIFICAR
1. Qu tipo de appweb voy a crear?
2. Qu clase de pblico visitar la appweb?
3. Cul es la finalidad / objetivo final de la appweb?
4. Cumplir el diseo en mente los objetivos?
5.Es usable e intuitivo?

1. Planificar el futuro.
2. Documentacin.
3. No empieces por los pequeos detalles.
4. Diseo de la interfaz.
5. Evita construirte libreras o frameworks innecesarios.
6. Ten un plan de proyecto.
7. Elige el lenguaje adecuado.
8. Evita lasdistracciones.
9. Sigue un buen control de calidad.
10. Plantate los pasos a seguir despus del desarrollo.

Metodologas para el desarrollo de aplicaciones Web.


Se proponen cuatro pasos bsicos a seguir para el desarrollo de un sitio Web de forma independiente a las herramientas que usen los diseadores grficos. Tambin se pone nfasis en la optimizacin de las tiempos de
descarga de la pginas.
1. Diseo conceptual.Se fijan las pautas con el cliente, como ser el sitio, que datos tendr, como se navegar, tipo de cliente al que ir orientado, etc. De esta fase se tiene una idea del diseo y la navegacin que
tendr el sitio. El resultado ideal de esta fase es una prueba de concepto. La prueba de concepto puede tener dos partes:
-Diseo grfico del sitio. Esta parte es preparada por el diseador principalmente, y suele bastar con los dibujos hechos en aplicaciones de diseo como el Illustrator, FreeHand, KIllustrator e inclusive con software de
imgenes como el Gimp o Photoshop.
-Consulta y carga de datos: Esta parte es preparada principalmente por los programadores y consistir en unas pginas HTML sencillas generadas por los scripts y que accedan a un prototipo simplificado de la base de datos.
2. Diseo grfico y rboles de navegacin.Se hace un diseo detallado de las diferentes pginas que tendr el Web, el diseo grfico normalmente realizado en una aplicacin de dibujo (como el Illustrator), y los
rboles de navegacin.
Lo ms importante que hay que tener en cuenta a la hora del diseo conceptual de la parte grfica y lgica del sitio es el tiempo que tardar el cliente para visualizar el resultado (tiempo de visualizacin.
Tiempo de visualizacin El primer aspecto a tener en cuenta es la cantidad de cdigo HTML que debe ser bajado para cada pgina. Esto depende del tipo de conexin que tendrn los visitantes del sitio. Un buen parmetro
es que el tamao mximo del HTML no debe superar los 30-40 KBytes por pgina genrica. En el caso de imgenes es un poco ms flexible, ya que se puede acelerar la previsualizacin de la pgina indicando los tamaos
en pixels de cada imagen.
Las pginas de sitios dinmicos suelen tener una estructura bien definida:
-Cabecera: aqu se suelen poner el logo de la empresa, men de opciones de navegacin, banners de publicidad.
-Cuerpo: en estar parte se pone la parte principal de la pgina. Tambin suele estar dividida en dos a tres columnas que sirven para un men de navegacin y otra para un ndice de temas o artculos relacionados.
-Pi: aqu suele ir informacin para contactar a la empresa, direcciones, telfonos y otros enlaces corporativos.
3-. Desarrollo. En esta fase se desarrollan los grficos, el cdigo HTML y los scripts necesarios. Aqu aparece el problema, los responsables de proyectos buscan que todo esto se haga con una sola aplicacin. Es mejor
dividir el desarrollo en dos partes claramente diferenciadas y que se podrn desarrollar en paralelo. -Desarrollo grfico y HTML , -Desarrollo de programas. Al mismo tiempo que el o los diseadores preparan el cdigo HTML,
el o los programadores deben preparar los programas usando HTML muy simples para probar la base de datos y ejecucin de los programas.
4. Produccin.El sitio ya entra en produccin y su acceso es pblico. Aunque esta parece la ms sencilla de las fases, es la ms cara y difcil de conseguir. Hay que actualizar los datos para que el sitio sea interesante y
visitado y adems asegurase que funcione las 24 horas del da, los 7 das de la semana (24x7).
Metodologas
EORM.Es una Metodologa de Relacin entre Objeto (Enhanced Object Relationship Methodology), es definido por un proceso iterativo que se concentra en el modelado orientado a objetos por la representacin de
relaciones entre los objetos (acoplamientos) como objetos, es por ello que fue una de las primeras propuestas para Web centrada en el paradigma de la orientacin a objetos. Se basa en muchas de las ideas que se definen
en HDM, pero las traslada a la orientacin a objetos. La adopcin del enfoque orientado a objetos garantiza todas las ventajas reconocidas para esta tcnica de modelado, como la flexibilidad (posible existencia de mltiples
formas de relaciones entre nodos) y la reutilizacin, por la existencia de una librera de clases de enlaces que pueden ser reutilizados en diferentes proyectos de desarrollo hipermedial.
OOHDM. Es un Mtodo de Diseo de Desarrollo en Hipermedia Orientado a Objetos (Object-Oriented Hypermedia Design Method) y abarca las cuatro actividades: El modelado conceptual, diseo navegacional, diseo
abstracto de interfaz y la puesta en prctica. Estas actividades se realizan en una mezcla de estilo incremental, iterativo y basado en prototipos de desarrollo .
SOHDM. Es un Mtodo que Desarrolla Diseo en panoramas (scenario) Orientada a Objetos en Hipermedia (Scenario - based Object-oriented Hypermedia Design Methodology). Presenta la necesidad de disponer de un
proceso que permita capturar las necesidades del sistema. Para ello, propone el uso de escenarios. Es una de las primeras propuestas para la web y brinda ms importancia a la tarea de tratamiento de requisitos. Se
caracteriza principalmente porque su ciclo de vida comienza con la aplicacin de los escenarios como tcnica de elicitacin y definicin de requisitos.
WSDM.Es un Mtodo de Diseo para Sitios Web (Web Site Design Method), donde hay un acercamiento al usuario que define los objetos de informacin basado en sus requisitos de informacin para el uso de la Web. En
este mtodo se definen una aplicacin Web a partir de los diferentes grupos de usuarios que vaya a reconocer el sistema. Propone cuatro etapas: modelo de usuario, diseo conceptual, diseo de la implementacin e
implementacin. El tratamiento de requisitos se lleva a cabo en la etapa inicial, donde, en primer lugar, se identifican y clasifican los usuarios que van a hacer uso de la aplicacin Web. A continuacin, se describen los
requisitos de cada grupo de usuarios y sus fases.
RNA. Es un mtodo de Anlisis de Navegacin Relacional (Relationship Navigational Analysis), que define una secuencia de pasos que se utilizarn para el desarrollo de la Web. Es especialmente til para uso de la Web
creados en base de sistema de herencia. En este mtodo encontramos cinco fases las cuales son: Anlisis del entorno, donde el propsito de esta fase es el de estudiar las caractersticas de la audiencia, luego encontramos
las definiciones de elementos de inters, el anlisis del conocimiento y navegacin y finalmente la implementacin de los anlisis realizados. La propuesta de RNA es quizs una de las que ms ha resaltado la necesidad de
trabajar con la especificacin de requisitos, incluyendo tareas como el anlisis del entorno y de los elementos de inters. Adems, resulta interesante pues plantea la necesidad de analizar los requisitos conceptuales de
manera independiente a los navegacionales.