CAPITULO 2.

DESARROLLO DE APLICACIONES WEB

El diseo y desarrollo de aplicaciones web consiste en implementar sus necesidades, objetivos o ideas en Internet utilizando las tecnologas ms idneas segn su proyecto.

as aplicaciones web o!recen servicios a los usuarios de Internet "ue acceden utilizando un navegador web como I. E#plorer, $ire!o# entre otros, dirigi%ndose a una direccin de Internet donde obtendrn los servicios "ue buscan.

as aplicaciones web pueden ser de acceso pblico como tiendas virtuales, diarios digitales, portales de Internet,... o de acceso restringido como son las intranets para mejorar las gestiones internas de su empresa como el reporte de &oras de su personal, gestin de proyectos y tareas, control de presencia, gestores documentales,' o el uso de e#tranets para aumentar y mejorar el servicio con sus distribuidores, clientes, proveedores, comerciales y colaboradores e#ternos.

2.1 Arquitectura de las a licaci!"es #e$

Arquitectura de d!s ca as( es conocida tambi%n como la ar"uitectura tradicional de cliente)servidor. *e"uiere una inter!az de usuario "ue se instala y corre en una +, o estacin de trabajo y enva solicitudes a un servidor para ejecutar operaciones complejas. +or ejemplo, una estacin de trabajo utilizada como cliente puede correr una aplicacin de inter!az de usuario "ue interroga a un servidor central de bases de datos.

%e"ta&as'

El desarrollo de aplicaciones en un ambiente de dos capas es muc&o mas rpido "ue en ambientes anteriores, pero no es necesariamente mas rpido "ue con el nuevo ambiente de tres capas. as &erramientas para el desarrollo con dos capas son

robustas y evaluadas. as t%cnicas de prototipo se emplean !cilmente. as soluciones de dos capas trabajan bien en ambientes no dinmicos estables, pero no se ejecutan bien en organizaciones rpidamente cambiantes.

Des(e"ta&as'

os ambientes de dos capas re"uieren control e#cesivo de las versiones y demandan es!uerzo de distribucin de la aplicacin cuando se les &acen cambios. Esto se debe al &ec&o de "ue la mayora de la aplicacin lgica e#iste en la estacin de trabajo del cliente. a seguridad del sistema en un diseo de dos capas es compleja y a menudo re"uiere administracin de las bases de datos- esto es debido al nmero de dispositivos con acceso directo al ambiente de esas bases de datos. as &erramientas del cliente y de la base de datos, utilizadas en diseos de dos capas, constantemente estn cambiando. a dependencia a largo plazo de cual"uier &erramienta, puede complicar el escalamiento !uturo o las

implementaciones.

Arquitectura de tres ca as' es un diseo reciente "ue introduce una capa intermedia en el proceso. ,ada capa es un proceso separado y bien de!inido corriendo en plata!ormas separadas. .e instala una inter!az de usuario en la computadora del usuario !inal /el cliente0. 1sta ar"uitectura trans!orma la inter!az de bs"ueda e#istente /el e#plorador de 2eb0, en la inter!az del usuario !inal.

%e"ta&as'

as llamadas de la inter!az del usuario en la estacin de trabajo, al servidor de capa intermedia, son ms !le#ibles "ue en el diseo de dos capas, ya "ue la estacin solo necesita trans!erir parmetros a la capa intermedia. a inter!az del cliente no es re"uerida para comunicarse con el receptor de los datos. +or lo tanto, esa estructura de datos puede ser modi!icada sin cambiar la inter!az del usuario en la +,. El cdigo de la capa intermedia puede ser reutilizado por mltiples aplicaciones si esta diseado en !ormato modular.

a separacin de roles en tres capas, &ace mas !cil reemplazar o modi!icar a una, sin a!ectar a los mdulos restantes.

Des(e"ta&as'

os ambientes pueden incrementar el tr!ico en la red y re"uiere ms balance de carga u tolerancia a las !allas. os e#ploradores actuales no son iguales. a estandarizacin entre di!erentes proveedores &a sido lenta en desarrollarse. 3uc&as organizaciones son !orzadas a escoger uno en lugar de otro, mientras "ue cada uno o!rece sus propias ventajas.

Figura 2.1 Arquitectura de dos capas o arquitectura tradicional de cliente/servidor.

Figura 2.2 Arquitectura de tres capas o arquitectura basada en web.

Arquitectura )%C' a ar"uitectura 3odel45iew4,ontroller surgi como patrn ar"uitectnico para el desarrollo de inter!aces gr!icos de usuario en entornos .malltal6. .u concepto se basaba en separar el modelo de datos de la aplicacin de su representacin de cara al usuario y de la interaccin de %ste con la aplicacin, mediante la divisin de la aplicacin en tres partes !undamentales(

El modelo, "ue contiene la lgica de negocio de la aplicacin. a vista, "ue muestra al usuario la in!ormacin "ue %ste necesita.

El controlador, "ue recibe e interpreta la interaccin del usuario, actuando sobre modelo y vista de manera adecuada para provocar cambios de estado en la representacin interna de los datos, as como en su visualizacin.

Esta ar"uitectura &a demostrado ser muy apropiada para las aplicaciones web y especialmente adaptarse bien a las tecnologas proporcionadas por la plata!orma 78EE, de manera "ue(

El modelo, conteniendo lgica de negocio, sera modelado por un conjunto de clases 7ava, e#istiendo dos claras alternativas de implementacin, utilizando objetos java tradicionales llamados +979s /Plain Old Java Objects0 o bien utilizando E7: /Enterprise JavaBeans0 en sistemas con mayores necesidades de concurrencia o distribucin. a vista proporcionar una serie de pginas web dinmicamente al cliente, siendo para %l simples pginas ;<3 . E#isten mltiples !ramewor6s "ue generan estas pginas web a partir de distintos !ormatos, siendo el ms e#tendido el de pginas 7.+ / JavaServer Pages0, "ue mediante un conjunto de eti"uetas o tags =3 proporcionan un inter!az sencillo y adecuado a clases 7ava y objetos proporcionados por el servidor de aplicaciones. Esto permite "ue sean sencillas de desarrollar por personas con conocimientos de ;<3 . Entre estos tags tiene mencin la librera estndar 7.< / JavaServer Pages Standard Tag Library0 "ue proporciona una gran !uncionalidad y

versatilidad.

El controlador en la plata!orma 78EE se desarrolla mediante servlets, "ue &acen de intermediarios entre la vista y el modelo, ms verstiles "ue los 7.+ para esta !uncin al estar escritos como clases 7ava normales, evitando mezclar cdigo visual /;<3 , =3 0 con cdigo 7ava. +ara !acilitar la implementacin de estos servlets tambi%n e#iste una serie de !ramewor6s "ue proporcionan soporte a los desarrolladores, entre los "ue cabe destacar .truts, "ue con una amplia comunidad de usuarios se &a convertido en el estndar de facto en este rol.

El !uncionamiento de una aplicacin web 78EE "ue utilice el patrn ar"uitectural 35, se puede descomponer en una serie de pasos(

El usuario realiza una accin en su navegador, "ue llega al servidor mediante una peticin ;<<+ y es recibida por un servlet /controlador0. Esa peticin es interpretada y se trans!orma en la ejecucin de cdigo java "ue delegar al modelo la ejecucin de una accin de %ste. El modelo recibe las peticiones del controlador, a trav%s de un inter!az o !ac&ada "ue encapsular y ocultar la complejidad del modelo al controlador. El resultado de esa peticin ser devuelto al controlador. El controlador recibe del modelo el resultado, y en !uncin de %ste, selecciona la vista "ue ser mostrada al usuario, y le proporcionar los

datos recibidos del modelo y otros datos necesarios para su trans!ormacin a ;<3 . >na vez &ec&o esto el control pasa a la vista para la realizacin de esa trans!ormacin.

En la vista se realiza la trans!ormacin tras recibir los datos del controlador, elaborando la respuesta ;<3 adecuada para "ue el usuario la visualice.

%e"ta&as'

?l separar de manera clara la lgica de negocio /modelo0 de la vista permite la reusabilidad del modelo, de modo "ue la misma implementacin de la lgica de negocio "ue maneja una aplicacin pueda ser usado en otras aplicaciones, sean %stas web o no. +ermite una sencilla divisin de roles, dejando "ue sean diseadores gr!icos sin conocimientos de programacin los "ue se encarguen de la realizacin de la capa vista, sin necesidad de mezclar cdigo 7ava entre el cdigo visual "ue desarrollen /tan slo utilizando algunos tags, no muy di!erentes de los usados en el cdigo ;<3 0.

Figura 2.3 MVC o Modelo-Vista-Controlador.

CAPITULO 2.DESARROLLO DE APLICACIONES WEB

2.2 Le"*ua&es de r!*ra+aci," del lad! del clie"te

El navegador es una aplicacin capaz de interpretar las rdenes recibidas en !orma de cdigo ;<3 !undamentalmente y convertirlas en las pginas "ue son el resultado de dic&a orden.

?l dar clic sobre un enlace de &iperte#to, se establece una peticin de un arc&ivo ;<3 residente en el servidor /un ordenador "ue se encuentra continuamente conectado a la red0 el cual es enviado e interpretado por el navegador del usuario /el cliente0.

>n lenguaje de lado cliente es totalmente independiente del servidor, lo cual permite "ue la pgina pueda ser albergada en cual"uier sitio sin

necesidad de pagar ms, ya "ue, por regla general, los servidores "ue aceptan pginas con scripts de lado servidor son en su mayora de pago o sus prestaciones son muy limitadas. Inversamente, un lenguaje de lado servidor es independiente del cliente por lo "ue es muc&o menos rgido respecto al cambio de un navegador a otro o respecto a las versiones del mismo.

Figura 2.4 Co

unicaci!n cliente/servidor usando aplicaciones del lado del cliente.

a siguiente tabla describe los lenguajes de programacin usados en el lado del cliente.

Le"*ua&e de Pr!*ra+aci,"

De-i"ici,"

HTML

Indica al navegador donde poner cada te#to, cada imagen o cada video y la !orma "ue tendrn estos al ser colocados en la pgina. ,onsta de eti"uetas "ue tienen esta !orma @:A, @+A. ,ada eti"ueta signi!ica una !uncin y se utilizan para de!inir la !orma o estilo "ue "ueremos aplicar al documento.

JAVASCRIPT Es un lenguaje de programacin utilizado para crear pe"ueos programitas encargados de realizar acciones dentro del mbito de una pgina web. Es un lenguaje de programacin del lado del cliente, por"ue es el navegador el "ue soporta la carga de procesamiento. .u uso se basa !undamentalmente en la creacin de e!ectos especiales en las pginas y la de!inicin de interactividades con el usuario, las sentencias escritas en 7ava.cript se encapsulan entre las eti"uetas @scriptA y

@)scriptA. APPLETS DE JAVA Es otra manera de incluir cdigo a ejecutar en los clientes "ue visualizan una pgina web. .e trata de pe"ueos programas &ec&os en 7ava, "ue se trans!ieren con las pginas web y "ue el navegador ejecuta en el espacio de la pgina. Ba "ue estn programados en 7ava y pre4compilados, la manera de trabajar de %stos vara un poco con respecto a los lenguajes de script como 7ava.cript. os applets son ms di!ciles de programar "ue los scripts en y re"uerirn unos conocimientos bsicos o medios del lenguaje 7ava. a ventaja de utilizar applets consiste en "ue son muc&o menos dependientes del navegador "ue los scripts en 7avascript, incluso independientes del sistema operativo del ordenador donde se ejecutan. ?dems, 7ava es

ms potente "ue 7avascript, por lo "ue el nmero de aplicaciones de los applets podr ser mayor. ,omo desventajas en relacin con 7avascript cabe sealar "ue los applets son ms lentos de procesar y "ue tienen espacio muy delimitado en la pgina donde se ejecutan, es decir, no se mezclan con todos los componentes de la pgina ni tienen acceso a ellos. Es por ello "ue con los applets de 7ava no podremos &acer directamente cosas como abrir ventanas secundarias, controlar $rames, !ormularios, capas, etc. VISUAL BASIC SCRIPT Es un lenguaje compatible slo con Internet E#plorer. Es por ello "ue su utilizacin est desaconsejada a !avor de 7avascript. Est basado en 5isual :asic, un popular lenguaje para crear

aplicaciones 2indows. <anto su sinta#is como la manera de trabajar estn muy inspiradas en %l. .in embargo, no todo lo "ue se puede &acer en 5isual :asic lo podremos &acer en 5isual :asic .cript, pues este ltimo es una versin reducida del primero. Es una tecnologa "ue permite crear pginas web de una manera ms e#acta. Cracias a las ,.. se pueden controlar los resultados !inales de la pgina, pudiendo &acer muc&as cosas ms "ue ;<3 , como incluir mrgenes, tipos de letra, !ondos, colores, etc. ,.. son las siglas de ,ascading .tyle .&eets, en espaol ;ojas de estilo en ,ascada. Es una tecnologa, y un programa, para crear e!ectos especiales en pginas web. ,on $las& tambi%n conseguimos

CSS

FLASH

&acer pginas dinmicas del lado del cliente. $las& en realidad no es un lenguaje- .in embargo, si tuvi%ramos "ue catalogarlo en algn sitio "uedara dentro del mbito de las pginas dinmicas de cliente. +ara visualizar las DpelculasD $las&, el navegador debe tener instalado un programa /plug4in0 "ue le permita visualizarlas.

CAPITULO 2.DESARROLLO DE APLICACIONES WEB

2.. Le"*ua&es de r!*ra+aci," del lad! del ser(id!r

os lenguajes de lado servidor son a"uellos lenguajes "ue son reconocidos, ejecutados e interpretados por el propio servidor y "ue se envan al cliente en un !ormato comprensible para %l. +or otro lado, los lenguajes de lado cliente son a"uellos "ue pueden ser directamente DdigeridosD por el navegador y no necesitan un pre4tratamiento.

Figura 2." Co

unicaci!n cliente/servidor usando aplicaciones de a bos lados.

a siguiente tabla describe los lenguajes de programacin usados en el lado del servidor.

Le"*ua&e de

De-i"ici,"

Pr!*ra+aci," +erl es un lenguaje de programacin interpretado, al igual "ue muc&os otros lenguajes de Internet como 7avascript o ?.+. Esto "uiere decir "ue el cdigo de los scripts en +erl no se compila sino "ue cada vez "ue se "uiere ejecutar se lee el cdigo y se pone en marc&a interpretando lo "ue &ay escrito. ?dems es e#tensible a partir de otros lenguajes, ya "ue desde +erl se &acen llamadas a subprogramas escritos en otros lenguajes. Eesde otros lenguajes tambi%n se puede ejecutar cdigo +erl. Es el sistema ms antiguo "ue e#iste para la programacin de las pginas dinmicas de servidor. ?ctualmente se encuentra un poco des!asado por diversas razones entre las "ue destaca la di!icultad con la "ue se desarrollan los programas y la pesada carga "ue supone para el servidor "ue los ejecuta. os ,CI se escriben &abitualmente en el lenguaje +erl, sin embargo, otros lenguajes como ,, ,FF o 5isual :asic pueden ser tambi%n empleados para construirlos.

PERL

CGI

ASP

?.+ /?ctive .erver +ages0 es la tecnologa desarrollada por 3icroso!t para la creacin de pginas dinmicas del servidor. ?.+ se escribe en la misma pgina web, utilizando el lenguaje 5isual :asic .cript o 7script /7avascript de 3icroso!t0. +;+ es el acrnimo de ;iperte#t +reprocesor. Es un lenguaje de programacin del lado del servidor gratuito e independiente de plata!orma, rpido, con una gran librera de !unciones y muc&a documentacin. 7.+ es un acrnimo de 7ava .erver +ages, /+ginas de .ervidor 7ava0. Es una tecnologa orientada a crear pginas web con programacin en 7ava. ,on 7.+ se crean aplicaciones "ue se ejecuten en variados servidores web, de mltiples plata!ormas, ya "ue 7ava es en esencia un lenguaje multiplata!orma. +or tanto, las 7.+ podremos escribirlas con nuestro editor ;<3 )=3 &abitual.

PHP

JSP

+or ltimo %sta tabla describe los lenguajes de programacin usados en el lado del cliente4servidor.

Le"*ua&e de Pr!*ra+aci,"

De-i"ici," Es una tecnologa "ue tiene a su alrededor otras "ue la complementan y la &acen muc&o ms grande y con posibilidades mayores. .u principal novedad consiste en permitir compartir los datos con los "ue se trabaja a todos los niveles, por todas las aplicaciones y soportes. E;<3 no es precisamente un lenguaje de programacin. 3s bien se trata de una nueva capacidad de la "ue disponen los navegadores modernos, por la cual se puede tener un mayor control sobre la pgina "ue antes. ,ual"uier pgina "ue responde a las actividades del usuario y realiza e!ectos y !uncionalidades se puede englobar

XML

DHTML

dentro del E;<3 , pero en este caso nos re!erimos ms a e!ectos en el navegador por los cuales se pueden mostrar y ocultar elementos de la pgina, se puede modi!icar su posicin, dimensiones, color, etc. E;<3 proporciona ms control sobre la pgina, gracias a "ue los navegadores modernos incluyen una nueva estructura para visualizar en pginas web denominada capa. as capas se pueden ocultar, mostrar, desplazar, etc. +ara realizar las acciones sobre la pgina, como modi!icar la apariencia de una capa, se necesita un lenguaje de programacin del lado del cliente como 7avascript o 5:.cript. En la actualidad, E;<3 tambi%n puede englobar la programacin en el servidor.

CAPITULO 2.- DESARROLLO DE APLICACIONES WEB

2./ A+$ie"tes ara el desarr!ll! de a licaci!"es #e$

Es un programa compuesto por un conjunto de &erramientas para un programador, puede dedicarse en e#clusiva a un slo lenguaje de programacin o bien, poder utilizarse para varios. ,onsiste en un editor de cdigo, un compilador, un depurador y un constructor de inter!az gr!ica, su meta es proveer un marco de trabajo amigable para los programadores de algn lenguaje de programacin.

os IEE /ambientes integrados de desarrollo0 para aplicaciones 2eb son muy numerosos, algunos son espec!icos para lenguajes del lado del servidor. +or ejemplo, 5isual .tudio solo soporta ?.+.GE< del lado

del servidor.

Entre varios IEEHs destacan algunos(

3icroso!t 5isual .tudio. 3icroso!t 2eb Eeveloper E#press. 3ono /para ?.+.GE<0. Get :eans. 7builder. Eclipse.

CAPITULO 2.- DESARROLLO DE APLICACIONES WEB

2.0 )et!d!l!*1as ara el desarr!ll! de a licaci!"es We$

EOR)

Es una 3etodologa de *elacin entre 9bjeto /En&anced 9bject *elations&ip 3et&odology0, de!inida por un proceso iterativo "ue se concentra en el modelado orientado a objetos por la representacin de relaciones entre ellos /acoplamientos0 como objetos, es por ello "ue !ue una de las primeras propuestas para 2eb centrada en el paradigma de la orientacin a objetos.

+ara automatizar la aplicacin de la metodologa

E9*3, su autor &a desarrollado, en los laboratorios de investigacin de I:3, una &erramienta denominada 9E3<ool "ue, junto a un generador comercial de Inter!aces Cr!icas de >suario denominado 9G<9. .tudio y un .istema de Cestin de :ase de Eatos 9rientado a 9bjetos /.C:E990, permite el diseo interactivo de es"uemas E9*3 y la generacin de cdigo !uente, inicialmente en ,FF, de las clases incluidas en estos es"uemas. El .C:E99 o!rece un repositorio de objetos "ue permite la comparticin de la in!ormacin de los es"uemas entre las &erramientas /9E3<ool, 9G<9. .tudio0 y las aplicaciones &ipermediales desarrolladas.

Esta metodologa tiene las siguientes ventajas(

Encajamiento de relaciones semnticas en construcciones e#tensibles, pudiendo participar en otras relaciones y ser parte de bibliotecas reutilizables. E9*3 distingue dos tipos de relaciones orientadas a objetos( *elaciones de generalizacin y relaciones de!inidas por el usuario. 3ientras "ue los primeros se concentran como en la semntica asociada entre ellas, los segundos con!an totalmente en la especi!icacin del usuario.

a semntica de vnculos bsicos de clases "ue se manejan, son las siguientes de manera resumida( .imple in6( Es la raz vnculo bsica de clase "ue proporciona capacidad de intercone#in, incluido !unciones para la creacin, supresin y recorrido.

Gavigational in6( +roporciona mecanismos para enlaces &ipermedia "ue incluye el almacenamiento de creacin de tiempo e in!ormacin &istrica. .e &ereda de simple in6. Gode<oGode( Es un vnculo "ue &ereda de Gavigational in6 y proporciona a un objeto ;ipermedia vnculo de !uncionalidad.

.pan<oGode( .e &ereda de Gavigational in6. 5incula el contenido de un objeto a otro objeto.

.tructure in6( .e &ereda de .imple in6 y la raz

de los vnculos estructurales. .e inserta despu%s creacin en el conte#to estructural.

.et in6( Es una structure in6 "ue proporciona acceso a un objeto en una desordenada coleccin de objetos.

ist in6( Es un structure in6 "ue proporciona acceso a un objeto en una coleccin ordenada de objetos.

EOR) c!"sta de tres -ases'

2ase de A"3lisis' .e trata de orientar a objetos al sistema, sin considerar los aspectos &ipermediales del mismo, obteni%ndose para ello un 3odelo de 9bjetos con la misma notacin utilizada en 93<, "ue re!leje la estructura de la in!ormacin /mediante clases de objetos con atributos y relaciones entre las clases0 y el comportamiento del sistema /a trav%s de los m%todos asociados a las clases de objetos0.

2ase de Dise4!' +rocede a modi!icar el modelo de objetos obtenido durante el anlisis aadiendo la semntica apropiada a las relaciones entre clases de objetos para convertirlas en enlaces &ipermedia, obteniendo !inalmente un modelo enri"uecido /E9*30, en el "ue se re!leje tanto la estructura de la in!ormacin /modelo abstracto &ipermedial compuesto de nodos y enlaces0 como las posibilidades de navegacin o!recidas por el sistema sobre dic&a estructura, para lo cual e#istir una librera de clases de enlaces, donde se especi!ican las posibles operaciones asociadas a cada enlace de un &iperdocumento, "ue sern de tipo crear, eliminar, atravesar, siguiente, previo etc., as como sus posibles atributos /!ec&a de creacin del enlace, estilo de presentacin en pantalla, restricciones de acceso, etc.0.

2ase de C!"strucci,"' .e trans!orman los es"uemas en cdigo y son guardados en una :ase de Eatos 9rientada a 9bjetos, al elaborar !ormularios de consulta de las clases con la ayuda de un editor gr!ico de inter!aces. .e genera el cdigo !uente /por ejemplo ,I0 correspondiente a cada clase y se prepara la

Inter!ace Cr!ica de >suario. as relaciones de!inidas en un modelo orientado a objetos pueden ser representadas por clases de enlaces &ipermedia. Estas clases aaden a las relaciones del modelo objeto la semntica navegacional de la aplicacin. Estn organizadas en una jerar"ua de &erencia propuesta por el m%todo bajo la !orma de una biblioteca de clases. a semntica relativa a las propiedades &ipermedia de las relaciones encuentra, por tanto, una representacin en E9*3 bajo la !orma de clases.

OO5D)

Es un 3%todo de Eiseo de Eesarrollo en ;ipermedia 9rientado a 9bjetos /9bject49riented ;ypermedia Eesign 3et&od0 y abarca las cuatro actividades( El modelado conceptual, diseo navegacional, diseo abstracto de inter!az y la puesta en prctica. Estas actividades se realizan en una mezcla de estilo incremental, iterativo y basado en prototipos de desarrollo.

C!"sta de cuatr! -ases'

2ase C!"ce tual' durante esta actividad se construye un es"uema conceptual representado por los objetos del dominio, las relaciones y colaboraciones e#istentes establecidas entre ellos. En las aplicaciones &ipermedia convencionales, cuyos componentes no son modi!icados durante la ejecucin, se podra usar un modelo de datos semntico estructural /como el modelo de entidades y relaciones0. Ee este modo, en los casos en "ue la in!ormacin base pueda cambiar dinmicamente o se intenten ejecutar clculos complejos, se necesitar enri"uecer el comportamiento del modelo de objetos En 99;E3, el es"uema conceptual est construido por clases, relaciones y subsistemas. as clases son descritas como en los modelos orientados a objetos tradicionales. .in embargo, los atributos pueden ser de mltiples tipos para representar perspectivas di!erentes de las mismas entidades del mundo real.

2ase Na(e*aci!"al' se debe tener en mente "ue la generacin de aplicaciones 2eb !ue pensada para

realizar navegacin a trav%s del espacio de in!ormacin, utilizando un simple modelo de datos de &ipermedia. En 99;E3, la navegacin es considerada un paso crtico en el diseo aplicaciones. >n modelo navegacional es construido como una vista sobre un diseo conceptual, admitiendo la construccin de modelos di!erentes de acuerdo con los distinto per!iles de usuarios. ,ada modelo navegacional provee una vista subjetiva del diseo conceptual. El diseo de navegacin es e#presado en dos es"uemas( el es"uema de clases navegacionales y el es"uema de conte#tos navegacionales. En 99;E3 e#iste un conjunto de tipos prede!inidos de clases navegacionales( nodos, enlaces y estructuras de acceso. a semntica de los nodos y los enlaces son las tradicionales de las aplicaciones &ipermedia, y las estructuras de acceso, tales como ndices o recorridos guiados, representan los posibles caminos de acceso a los nodos. a principal estructura primitiva del espacio navegacional es la nocin de conte#to navegacional. >n conte#to navegacional es un conjunto de nodos, enlaces, clases de conte#tos, y otros conte#tos navegacionales /conte#tos anidados0. +ueden ser de!inidos por comprensin o e#tensin, o por enumeracin de sus miembros. os conte#tos navegacionales juegan un rol similar a las colecciones y !ueron inspirados sobre el concepto de conte#tos anidados. 9rganizan el espacio navegacional en conjuntos convenientes "ue pueden ser recorridos en

un orden particular y "ue deberan ser de!inidos como caminos para ayudar al usuario a lograr la tarea deseada. os nodos son enri"uecidos con un conjunto de clases especiales "ue permiten observar y presentar sus atributos /incluidos las anclas0, as como m%todos /comportamiento0 cuando se navega en un particular conte#to.

2ase de I"ter-a6 A$stracta( as estructuras navegacionales son de!inidas y se deben especi!icar los aspectos de inter!az. Esto signi!ica de!inir la !orma en la cual los objetos navegacionales pueden aparecer, de cmo los objetos de inter!az activarn la navegacin y el resto de la !uncionalidad de la aplicacin, "u% trans!ormaciones de la inter!az son pertinentes y cundo es necesario realizarlas. >na clara separacin entre diseo navegacional y diseo de inter!az abstracta permite construir di!erentes inter!aces para el mismo modelo navegacional, dejando un alto grado de independencia de la tecnologa de inter!az de usuario.

El aspecto de la inter!az de usuario de aplicaciones interactivas /en particular las aplicaciones 2eb0 es un punto crtico en el desarrollo "ue las modernas

metodologas tienden a descuidar. En 99;E3 se utiliza el diseo de inter!az abstracta para describir la inter!az del usuario de la aplicacin de &ipermedia. El modelo de inter!az ?E5s /5ista de Eatos ?bstracta0 especi!ica la organizacin y comportamiento de la inter!az, pero la apariencia !sica real o de los atributos, y la disposicin de las propiedades de las ?E5s en la pantalla real son &ec&as en la !ase de implementacin.

2ase I+ le+e"taci,"' .e tendr en cuanta "ue el diseador debe ya implementar el diseo. ;asta a&ora, todos los modelos !ueron construidos en !orma independiente de la plata!orma de implementacin- en esta !ase es tenido en cuenta el entorno particular en el cual se va a correr la aplicacin. ?l llegar a esta !ase, el primer paso "ue debe realizar el diseador es de!inir los tems de in!ormacin "ue son parte del dominio del problema. Eebe identi!icar tambi%n, cmo son organizados los tems de acuerdo con el per!il del usuario y su tarea- decidir "u% inter!az debera ver y cmo debera comportarse. ? !in de implementar todo en un entorno 2eb, el diseador debe decidir adems "u% in!ormacin debe ser almacenada.

,onstruir la inter!az de una aplicacin 2eb es una

tarea compleja- no slo se necesita especi!icar cules son los objetos de la inter!az "ue deberan ser implementados, sino tambi%n la manera en la cual interactuarn con el resto de la aplicacin.

99;E3 propone un conjunto de tareas "ue en principio pueden involucrar mayores costos de diseo, pero "ue a mediano y largo plazo reducen notablemente los tiempos de desarrollo al tener como objetivo principal la reusabilidad de diseo, y as simpli!icar la evolucin y el mantenimiento.

SO5D)

Es un 3%todo "ue Eesarrolla Eiseo en panoramas /scenario0 9rientada a 9bjetos en ;ipermedia /.cenario 4 based 9bject4oriented ;ypermedia Eesign 3et&odology0. +resenta la necesidad de disponer de un proceso "ue permita capturar las necesidades del sistema. +ara 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 re"uisitos. .e caracteriza principalmente por"ue su ciclo de vida comienza con la aplicacin de los escenarios como t%cnica de licitacin y de!inicin de re"uisitos. El proceso de de!inicin de re"uisitos parte de la realizacin de un diagrama de conte#to tal y como se propone en los diagramas de !lujos de datos /E$E0 de Bourdon /JKLK0. En este diagrama de conte#to se identi!ican las entidades e#ternas "ue se comunican con el sistema, as como los eventos "ue provocan esa comunicacin. a lista de eventos es una tabla "ue indica en "u% eventos puede participar cada entidad. +or cada evento di!erente, .9;E3 propone elaborar un escenario. Estos son representados gr!icamente mediante los denominados .?,s8 /.cenario ?ctivity ,&art0.

,ada escenario describe el proceso de interaccin entre el usuario y el sistema cuando se produce un evento determinado, especi!icando el !lujo de actividades, los objetos involucrados y las transacciones realizadas. .9;E3 propone un proceso para conseguir a partir de estos escenarios el modelo conceptual del sistema, "ue es representado mediante un diagrama de clases. El proceso de .9;E3 contina reagrupando estas clases para conseguir un modelo de

clases navegacionales del sistema.

Esta metodologa tiene semejanzas con, 99;E3 y E9*3 donde se di!erencian en el uso de panoramas, "ue describen las actividades en los acontecimientos y primitivas de !lujos de actividades. os panoramas se de!inen en la !ase de anlisis y se utilizan para modelar los objetos.

C!"sta de seis -ases'

2ase de A"3lisis' .e realiza un estudio de las necesidades de la aplicacin, del entorno de trabajo y de los actores. a !inalidad principal de esta !ase es conseguir los escenarios "ue representen las actividades "ue se pueden llevar a cabo en el sistema. 2ase de )!delad! de O$&et!s' .e desarrolla un diagrama de clases "ue representa la estructura conceptual del sistema.

2ase de Dise4! de %istas' .e reorganizan los objetos en unidades navegacionales, "ue representan una vista de los objetos del sistema.

2ase de Dise4! Na(e*aci!"al' .e enri"uecen dic&as vistas de!iniendo los enlaces e &iperenlaces "ue e#isten en el sistema.

2ase de Dise4! de la I+ le+e"taci,"' .e disean las pginas, la inter!az y la base de datos del sistema.

2ase de C!"strucci,"' .e realiza la construccin de la base de datos del sistema. a cual "ue se implementar a la aplicacin.

En conclusin la metodologa .9;E3 es una propuesta nueva "ue cubre en mayor parte todas las !ases del proceso de desarrollo, aun"ue no toma en cuenta la implantacin y las pruebas, proponi%ndonos un proceso cclico de tal !orma "ue al realizar una !ase se puede regresar a alguna de las anteriores para

re!inarla y adaptarla mejor.

WSD)

Es un 3%todo de Eiseo para .itios 2eb /2eb .ite Eesign 3et&od0, donde &ay un acercamiento al usuario "ue de!ine los objetos de in!ormacin basado en sus re"uisitos de in!ormacin para el uso de la 2eb. En este m%todo se de!inen una aplicacin 2eb a partir de los di!erentes grupos de usuarios "ue vaya a reconocer el sistema.

C!"sta de cuatr! -ases'

2ase de )!del! de Usuari!' .e intenta detectar los per!iles de usuarios para los cuales se construye la aplicacin. Eurante esta !ase es necesario determinar( MNui%n es el pblico objetivoO M,mo ser la visin de su sitio 2ebO M,ules son los objetivos de mar6eting de la empresaO M,ules son los objetivos de su sitio webO MNu% mensaje tiene su compaa "uiere

transmitirO M,ul es el campo del negocioO M,ules son los estndares de la industriaO >na vez "ue tenemos una comprensin de su negocio y sus objetivos de la empresa, "ue &ar recomendaciones a la mejor alcanzar sus metas. Guestro proceso de plani!icacin estrat%gica se crear un plan inicial de su sitio web. .e divide en dos sub4 !ases siguientes(

,lasi!icacin de usuarios( .e deben identi!icar y clasi!icar a los usuarios "ue van a &acer uso del sistema. +ara ello, 2.E3 propone el estudio del entorno de la organizacin donde se vaya a implantar el sistema y los procesos "ue se vayan a generar, describiendo las relaciones entre usuarios y actividades "ue realizan estos usuarios.

Eescripcin de los grupos de usuarios( .e describen con ms detalles los grupos de usuarios detectados en la etapa anterior. +ara ello, se debe elaborar un diccionario de datos, en principio con !ormato libre, en el "ue indican los

re"uisitos de almacenamiento de in!ormacin, re"uisitos !uncionales y de seguridad para cada grupo de usuarios.

2ase de Dise4! C!"ce tual' .e desarrolla el modelado conceptual no tiene el mismo signi!icado "ue en 99;E3. Eurante el modelado conceptual se realizan dos tareas a la vez( el modelado de objetos, "ue es lo "ue en 99;E3 se llama modelo conceptual y el diseo de la navegacin, "ue coincide con la idea de su diseo navegacional, Este tipo de diseo de navegacin en aplicaciones 2eb tiene una estructura muy jerr"uica.

+ocas recomendaciones se dan en esta etapa, tales como la utilizacin de pginas de ndice, derec&o de in!ormacin dividida en diversos tamaos, el uso de conte#to y de la in!ormacin y el uso de seales de navegacin. Este modelo distingue tres tipos de componentes de navegacin, in!ormacin y e#ternos. ,ada una consta de tres capas( conte#to, navegacin y capas de in!ormacin. En 2.E3 puede e#istir ms de un modelo de navegacin, dependiendo de los roles de usuario detectados durante la primera !ase.

2ase de Dise4! de I+ inter!az para cada rol de una versin de!initiva del la construccin del sitio tendr lugar lo siguiente(

le+e"taci,"( .e modela la usuario, ?&ora "ue se tiene plan se pueda comenzar con web. Eurante esta !ase, se

,reacin de alta !uncionalidad, teniendo como !in a la animacin, pues &ar "ue se propague por todas las pginas de los medios necesarios con sus los gr!icos y el te#to. El cdigo de los programas !uncionalidad del sitio. t%cnicos y la

a creacin y diseo de la pgina principal disponible. $ase de *ealizacin de Implementacin, se codi!ican todos estos aspectos en el lenguaje concreto "ue se &aya seleccionado.

.e +repara el lanzamiento de la web teniendo en cuenta M,undo entraran a nuestra webO ?ntes de eso &ay "ue asegurar lo siguiente(

,ontinuo y e#&austivas pruebas "ue garantizar un impecable !inal del sitio web. <rabajo directamente con la empresa para garantizar la t%cnica y la usabilidad se cumplen las normas. 5elar el !inal del proyecto para se cumplieron los re"uisitos planteados. ,rear una !ec&a de lanzamiento y el plan. ver si

2.E3 se describe en t%rminos de componentes y enlaces. Eistingue tres tipos de componentes de navegacin. ,ada navegacin consta de tres capas( conte#to, la navegacin y capas de in!ormacin. El conte#to es la capa superior de la navegacin y a su vez la de in!ormacin es la capa in!erior. a capa de navegacin conecta la capa de conte#to y la capa de in!ormacin. +ara acceder a la in!ormacin intermedia por componentes y los vnculos "ue se crean, tales

como los ndices. En la actualidad, es uno de los trabajos ms interesantes y novedosos "ue se le est aplicando es el desarrollo de una &erramienta ,?.E "ue permita aplicar el ciclo de vida de desarrollo de 2.E3.

RNA

Es un m%todo de ?nlisis de Gavegacin *elacional /*elations&ip Gavigational ?nalysis0, "ue de!ine una secuencia de pasos "ue se utilizarn para el desarrollo de la 2eb. Es especialmente til para uso de la 2eb creados en base de sistema de &erencia.

a propuesta de *G? es "uizs una de las "ue ms &a resaltado la necesidad de trabajar con la especi!icacin de re"uisitos, incluyendo tareas como el anlisis del entorno y de los elementos de inter%s. ?dems, resulta interesante pues plantea la necesidad de analizar los re"uisitos conceptuales de manera independiente a los navegacionales.

C!"sta de ci"c! -ases' Fase de Anlisis del Entorno, se determinar y clasifica a los usuarios finales de la aplicacin en grupos segn sus perfiles

2ase de De-i"ici," de Ele+e"t!s' ?"u prosiguen los elementos de inter%s en la cual se &an listando dic&os elementos de la aplicacin. +or elementos de inter%s se entienden los documentos, las pantallas "ue se van a re"uerir, la in!ormacin, etc.

2ase de A"3lisis del C!"!ci+ie"t!' .e desarrolla un es"uema "ue represente a la aplicacin. +ara ello *G? propone identi!icar los objetos, los procesos y las operaciones "ue se van a poder realizar en la aplicacin, as como las relaciones "ue se producen entre estos elementos

2ase de A"3lisis de Na(e*aci,"' .e veri!ica "ue el es"uema obtenido en la !ase anterior sea enri"uecido con las posibilidades de navegacin dentro de la

aplicacin.

2ase de I+ le+e"taci," del A"3lisis' >na vez obtenido el es"uema !inal en el "ue ya se encuentran incluidos los aspectos de navegacin, se pasa el es"uema a un lenguaje entendible por la m"uina.

CAPITULO 2.DESARROLLO DE APLICACIONES WEB

2.7 As ect!s de se*uridad

as tecnologas 2eb 8.P permiten abrir nuevos canales de comunicacin y mejorar la usabilidad de las aplicaciones 2eb, &aciendo "ue estas sean ms amigables e interactivas a trav%s de !uncionalidades como redes sociales, blogs, y servicios de interactivos, los principales aspectos asociados con la 2eb 8.P son(

*ic& Internet ?pplications /*I?0 principalmente usando ?7?=. Nue permite la actualizacin del contenido web en tiempo real y asncrona. ,olaboracin, donde se cambia el paradigma de tener contenido controlado

o de!inido por el publicador a uno controlado por la comunidad.

.indicalizacin, "ue permite la emisin y recepcin de contenido en tiempo real, as como realizar la !usin de contenido proveniente de diversas !uentes distintas.

as tecnologas 2eb 8.P e#panden !uncionalidades de las aplicaciones y mejoran su usabilidad, sin embargo, abren nuevos riesgos a la seguridad, los cuales deben ser atendidos.

I+ licaci!"es de las tec"!l!*1as We$ 2.8 e" la se*uridad

E#iste mayor complejidad en las aplicaciones, por lo tanto es ms di!cil protegerlas. as aplicaciones se con!orman por un mayor nmero de componentes, normalmente con tareas muy pe"ueas y cada uno de ellos deber ser protegido ya "ue pueden ser sujetos de posibles ata"ues. as pruebas de &ac6ing %tico se vuelven ms complejas por lo "ue se puede dejar de detectar algunas vulnerabilidades. E#isten nuevas !ormas de inyeccin de cdigo malicioso debido a la

utilizacin de 7ava.cripts ya "ue =3 puede contener scripts con !unciones.

os usuarios pueden usar los blogs para insertar cdigo ;<3 insertar arc&ivos con virus o gusanos.

malicioso o

;oy en da, las tecnologas 2eb 8.P ya son objeto de mltiples ata"ues. .egn datos del .ecurity Enterprise 8.P $rum los principales vectores de ata"ues son los siguientes(

.N Injection con un 8JQ. ?utenticacin insu!iciente con un JLQ. $alsi!icacin de contenido con un JJQ. ,ross4site scripting /=..0 con un JJQ. ,ross4.ite *e"uest $orgery con un LQ. 3ala con!iguracin con un LQ.

.iendo las principales consecuencias identi!icadas las siguientes(

$uga de in!ormacin con un 8KQ. Eesin!ormacin con un 8RQ.

*ecientemente se &an conocido mltiples casos de identidades robadas en redes sociales as como la di!usin de noticias y comentarios !alsos.

Estrate*ias de

r!tecci,"

Ee acuerdo a lo "ue diversos e#pertos en el tema &an de!inido, algunas de las estrategias "ue se pueden seguir para mitigar los riesgos "ue las tecnologas 2eb 8.P implican son las siguientes(

.ensibilizar tanto a los desarrolladores de las aplicaciones como a los dueos de las mismas sobre los riesgos "ue supone la utilizacin de tecnologas 2eb 8.P. 3antenerse actualizado sobre las vulnerabilidades y sus e#ploits, pudiendo utilizar un inventario de componentes para !acilitar esta tarea. >sar prcticas de desarrollo seguro, "ue consideren aspectos como(

,ontar con un inventario de todos los componentes 2eb 8.P e#istentes y realizar una validacin antes de utilizarlos. Evitar poner la lgica de seguridad en el lado cliente de la aplicacin. .eparar los datos del cdigo de la aplicacin, es decir, usar mdulos distintos para generar las estructuras de despliegue y otros para el rellenado de contenido. Go procesar 7ava.cripts provistos por el usuario, codi!icar los datos =3 y no ejecutarlos directamente como scripts. 5alidar siempre las entradas en el servidor Evitar "ue los usuarios puedan postear arc&ivos con virus o gusanos.

o o

Implementar sistemas de $irewall para aplicaciones 2eb, "ue permiten entre otras cosas(
o

?nalizar el tr!ico ;<<+ y =3 , as como proteger de ata"ues de tipo =.. &ttp())!oro.el&ac6er.net)tutorialesSdocumentacion)tutorialSata"uesS# ss4tT8PU8.P.&tml0, ,.*$ u otros tipos de ata"ues por inyeccin. ?utomatizar lo mas posible la creacin y mantenimiento de la poltica de seguridad, por ejemplo utilizando tecnologas "ue identi!i"uen de manera automtica todas las peticiones =3 inclusive las "ue suceden en Dbac6groundD.

Eetectar de contenido malicioso en *.. !eeds y ?tom !eeds Eetectar oportuna de vulnerabilidades en las aplicaciones usadas para *.. !eeds y mas&ups. as tecnologas 2eb 8.P aportan grandes bene!icios pero su despliegue re"uiere considerar estrategias de seguridad espec!icas y concretas.