Tutorial para El Desarrollo de Una Aplicacin Web en Ajax4576

TUTORIAL PARA EL DESARROLLO DE UNA APLICACIN WEB EN AJAX
PARA LA CREACIN Y CONTROL DE ACTAS

CRISTHIAN CAMILO QUINTERO YEPES
DIANA PAOLA ROJAS RAMREZ
UNIVERSIDAD EL BOSQUE
FACULTAD DE INGENIERA DE SISTEMAS
BOGOT D. C.
2!
TUTORIAL PARA EL DESARROLLO DE UNA APLICACIN WEB EN AJAX
PARA LA CREACIN Y CONTROL DE ACTAS
C"#$%&#'( C')#*+ Q,#(%-"+ Y-.-$
D#'(' P'+*' R+/'$ R')0"-1
T"'2'/+ 3- 4"'3+ .'"' +.%'" -* %0%,*+ 3- I(4-(#-"+ 3- S#$%-)'$
A*-/'(3"+ L-5(
D#"-6%+"
A3"#'(' L-#7'
A$-$+" M-%+3+*54#6+
UNIVERSIDAD EL BOSQUE
FACULTAD DE INGENIERA DE SISTEMAS
BOGOT D. C.
2!
8888888888888888888888888888
D#"-6%+"
8888888888888888888888888888
J,"'3+
8888888888888888888888888888
J,"'3+
8888888888888888888888888888
J,"'3+
B+4+%9 D. C.: J,(#+ 3- 2!
i
L' U(#7-"$#3'3 E* B+$;,-: (+ $- &'6- "-$.+($'2*- 3- *+$ 6+(6-.%+$
-)#%#3+$ .+" *+$ #(7-$%#4'3+"-$ -( $, %"'2'/+: $5*+ 7-*'"9 .+" -* "#4+"
6#-(%0<#6+: )-%+3+*54#6+ = >%#6+ 3-* )#$)+ -( '"'$ 3- *' 2?$;,-3' 3- *'
7-"3'3 = *' /,$%#6#'.
ii
AGRADECIMIENTOS
Los autores del presente proyecto de investigacin, expresan sus sinceros
agradecimientos a:
Alejandro Len Mora, Ingeniero y Docente de la Facultad de Ingenera de Sistemas
de la niversidad !l "os#ue, por su tiempo, aporte y dedicacin al proyecto$
Adriana Leiva, Asesora Metodolgica$ %or la asesora en el tra&ajo escrito del
proyecto$
iii
iv
D-3#6+ -$%- %"'2'/+ ' )# )'3"-: ' )#$
&-")'(+$: ' D#'(#%' R+/'$ = ' M-"6*'(.
C. C. Q. Y.
v
D-3#6+ -$%- %"'2'/+ ' )#$ .'3"-$ ;,- 6+( $,
6+*'2+"'6#5( &'( *+4"'3+ ;,- -$%+ $-'
.+$#2*-@ ' C')#*+ Q,#(%-"+ ;,- &' $#3+ )#
'.+=+ = )+%+" .'"' $'*#" '3-*'(%- -( *' 7#3':
*-$ '4"'3-16+ *'$ -($-A'('1'$ %"'($)#%#3'$.
D. P. R. R
TABLA DE CONTENIDO
INTRODUCCIN........................................................................................ B
B PLANTEAMIENTO DEL PROBLEMA.......................................................... 2
B.B.DESCRIPCIN DEL PROBLEMA.......................................................... 2
B.2.FORMULACIN................................................................................... 2
B.C.DELIMITACIN.................................................................................. C
B.D.ESTADO DEL ARTE.............................................................................. C
B.E.JUSTIFICACIN................................................................................. F
B.G.OBJETIVOS....................................................................................... B
B.G.B.O2/-%#7+ G-(-"'*................................................................. B
B.G.2.O2/-%#7+$ E$.-60<#6+$.......................................................... B
2 MARCO TERICO................................................................................. B2
2.B.ANTECEDENTES TERICOS.............................................................. B2
2.2.MARCO CONCEPTUAL....................................................................... BC
C REQUERIMIENTOS............................................................................... D
C.B.RESUMEN......................................................................................... D
C.2.REQUERIMIENTOS FUNCIONALES................................................... D
C.C.REQUERIMIENTOS NO FUNCIONALES............................................. DE
C.D.NORMAS: POLITICAS Y REGLAS DEL NEGOCIO............................... DG
D METODOLOGA..................................................................................... D!
D.B.MODELO DETALLADO DEL CICLO DE VIDA....................................... D!
E DISEHO GLOBAL.................................................................................. DF
E.B.DIAGRAMA DE CLASES SIN PATRNES............................................ DF
E.2.DIAGRAMA DE SECUENCIA SIN PATRNES..................................... DF
G DISEHO DETALLADO............................................................................ E2
G.B.ARQUITECTURA DE SOFTWARE....................................................... E2
G.2.PATRNES DE DISEHO APLICADOS EN LA SOLUCIN..................... EC
G.C.DIAGRAMA DE CLASES CON PATRNES........................................... EG
G.C.B. DIAGRAMA DE SECUENCIA CON PATRNES............................... EF
! PRUEBAS.............................................................................................. EF
I IMPLEMENTACIN............................................................................... G
F MANUALES........................................................................................... !D
B CONCLUSIONES................................................................................. !G
BB RECOMENDACIONES.......................................................................... !I
vi
L#$%'3+ 3- F#4,"'$
F#4,"' BJ M'"6+ T-5"#6+.......................................................................... BC
F#4,"' 2. A";,#%-6%,"' HTML................................................................... BG
F#4,"' C. A";,#%-6%,"' CGI. .................................................................... B!
F#4,"' D. A";,#%-6%,"' PHP. .................................................................... BI
F#4,"' E. C#6*+ 3- 7#3' 3- ,( S-"7*-%....................................................... 2
F#4,"' G. "2+* DOM. .............................................................................. 2C
F#4,"' !. E$%",6%,"' CSS......................................................................... 2D
F#4,"' I. .94#(' W-2 $#( CSS.................................................................. 2E
F#4,"' F. .94#(' W-2 6+( CSS................................................................. 2E
F#4,"' B. P"-$-(%'6#5( 6+( XSLT........................................................... 2I
F#4,"' BB. C+).+(-(%-$ 3- AJAX........................................................... C
F#4,"' B2. C#6*+ 3- 7#3' 3- ,(' .94#(' AJAX. ......................................... CB
F#4,"' BC. AJAX 7$ A.*#6'6#+(-$ %"'3#6#+('*-$. ...................................... C2
F#4,"' BD. E$%",6%,"' 3- B'6K2'$-.......................................................... CC
F#4,"' BE. A";,#%-6%,"' 3-* M+%+" B'6K2'$- AJAX. ................................ CD
F#4,"' BG. E$%",6%,"' B'6K2'$- JSF R,(%#)-. ........................................ CD
F#4,"' B!. A";,#%-6%,"' GWT.................................................................. CE
F#4,"' BI. P"+3,6%#7#3'3 4'('3' 6+( T&#(KCAP JX................................. CG
F#4,"' BF. A";,#%-6%,"' ZL...................................................................... CI
F#4,"' 2. D#'4"')' C'$+$ 3- U$+ C+),(-$.......................................... D
F#4,"' 2B. D#'4"')' 3- C'$+$ 3- U$+ A3)#(#$%"'3+"............................. D2
F#4,"' 22. C#6*+ 3- D-$'""+**+ I%-"'%#7+ P+" E%'.'$................................ DI
F#4,"' 2C. D#'4"')' 3- C*'$-$ G*+2'*..................................................... DF
F#4,"' 2D. D#'4"')' 3- S-6,-(6#' C"-'" A6%'........................................ E
F#4,"' 2E. D#'4"')' 3- S-6,-(6#' M+3#<#6'" A6%'.................................. EB
F#4,"' 2G. E$%",6%,"' G-(-"#' MVC......................................................... EC
F#4,"' 2!. D#'4"')' 3- C*'$-$ P'%"5( F"+(% C+(%"+**-".......................... ED
F#4,"' 2I. D#'4"')' 3- C*'$-$ P'%"5( C+))'(3................................... EE
F#4,"' 2F. D#'4"')' 3- C*'$-$ P'%"5(-$ DAO = VO. ............................... EG
F#4,"' C. D#'4"')' 3- C*'$-$ ,$'(3+ P'%"5(-$.................................... E!
F#4,"' CB. D#'4"')' 3- S-6,-(6#' ,$'(3+ .'%"5(-$.............................. EI
F#4,"' C2. R-$,*%'3+$ +2%-(#3+$ '.*#6'6#5( 6+( AJAX............................ EF
F#4,"' CC. R-$,*%'3+$ +2%-(#3+$ '.*#6'6#5( $#( AJAX............................. EF
F#4,"' CD. P'(%'**' 6"-'6#5( '6%'. .......................................................... GB
F#4,"' CE. P'(%'**' 6"-'6#5( %-)'$......................................................... GB
vii
F#4,"' CG. P'(%'**' '$#4('6#5( ,$,'"#+$.................................................. GB
F#4,"' C!. P'(%'**' 6"-'6#5( 6+)."+)#$+$.............................................. G2
F#4,"' CI. P'(%'**' ."-7#$,'*#1'6#5( '6%'. .............................................. GC
F#4,"' CF. P'(%'**' $-*-66#5( 6+($,*%' '6%'............................................ GC
F#4,"' D. P'(%'**' 6+($,*%' '6%'............................................................ GD
F#4,"' DB. P'(%'**' $-*-66#5( <#")'" '6%'................................................ GD
F#4,"' D2. P'(%'**' <#")'" '6%'............................................................... GD
F#4,"' DC. P'(%'**' -*#)#('" '6%'............................................................ GE
F#4,"' DD. P'(%'**' -*#)#('" '6%'............................................................ GE
F#4,"' DE. P'(%'**' )+3#<#6'" '6%'.......................................................... GE
F#4,"' DG. P'(%'**' )+3#<#6'" '6%'.......................................................... GG
F#4,"' D!. P'(%'**' $-*-66#5( )+3#<#6'" 6+).+)#$+............................... GG
F#4,"' DI. P'(%'**' )+3#<#6'" 6+)."+)#$+ #(4"-$+ #(<+")'6#5(............. G!
F#4,"' DF. P'(%'**' $-*-66#5( "-%#"'" .'"%#6#.'(%-................................... G!
F#4,"' E. P'(%'**' "-%#"'" .'"%#6#.'(%-................................................... G!
F#4,"' EB. P'(%'**' 6"-'6#+( '6%'............................................................ GI
F#4,"' E2. P'(%'**' $-*-66#5( 6+($,*%' '6%'............................................ GF
F#4,"' EC. P'(%'**' 6+($,*%' '6%'............................................................ GF
F#4,"' ED. P'(%'**' $-*-66#5( <#")'" '6%'................................................ !
F#4,"' EE. P'(%'**' $-*-66#5( <#")'" '6%'................................................ !
F#4,"' EG. P'(%'**' $-*-66#5( -*#)#('" '6%'............................................. !B
F#4,"' E!. P'(%'**' -*#)#('" '6%'............................................................ !B
F#4,"' EI. P'(%'**' $-*-66#5( )+3#<#6'" '6%'........................................... !2
F#4,"' EF. P'(%'**' )+3#<#6'" '6%'.......................................................... !2
F#4,"' G. P'(%'**' $-*-66#5( )+3#<#6'" 6+)."+)#$+ '6%'...................... !2
F#4,"' GB. P'(%'**' )+3#<#6'" 6+)."+)#$+.............................................. !C
F#4,"' G2. P'(%'**' $-*-66#5( "-%#"'" ,$,'"#+ '6%'................................... !C
F#4,"' GC. P'(%'**' "-%#"'" ,$,'"#+.......................................................... !C
viii
L#$%'3+ 3- %'2*'$
T'2*' B. D#<-"-(6#'$ HTTP B. = HTTP B.B. ............................................. BD
T'2*' 2. C'$+ 3- U$+ C+($,*%'" A6%'....................................................... DB
T'2*' C. C'$+ 3- U$+ F#")'" A6%'............................................................ DB
T'2*' D. C'$+ 3- U$+ M+3#<#6'" I(<+")'6#+( P-"$+('*............................ DB
T'2*' E. C'$+ 3- U$+ C"-'" A6%'.............................................................. D2
T'2*' G. C'$+ 3- U$+ C"-'" T-)'............................................................ DC
T'2*' !. C'$+ 3- U$+ A$#4('" P'"%#6#.'(%-.............................................. DC
T'2*' I. C'$+ 3- U$+ C"-'" C+)."+)#$+................................................. DC
T'2*' F. C'$+ 3- U$+ D-$#4('" R-$.+($'2#*#3'3-$.................................. DD
T'2*' B. C'$+ 3- U$+ M+3#<#6'" A6%'..................................................... DD
T'2*' BB. C'$+ 3- U$+ M+3#<#6'" C+)."+)#$+......................................... DD
T'2*' B2. C'$+ 3- U$+ R-%#"'" P'"%#6#.'(%-............................................. DE
T'2*' BC. C'$+ 3- U$+ E*#)#('" A6%'....................................................... DE
ix
!l presente proyecto se 'undamento dentro de la lnea de Ingeniera de
So't(are y se centr en la creacin de un tutorial para el desarrollo de
una aplicacin )e& en A*A+, para la creacin y control de las actas
manejadas en los proyectos de grado de la Facultad$
!l tutorial comen, a partir de una aplicacin reali,ada para la creacin
y control de actas, reali,ada en *ava -aciendo uso de *ava Server
%ages y Servlets$ A trav.s de su desarrollo el tutorial a&arc los
principales conceptos #ue componen la tecnologa A*A+ y se gui en el
proceso de implementacin dentro de una aplicacin &ase, con la
'inalidad de 'acilitar el proceso de adaptacin a dic-a tecnologa$
%ala&ras claves: A*A+, *ava, /ttp0e#uest, D1M, 2SS, +ML, *avascript$
x
3-e present project 'oundation (it-in t-e line o' So't(are !ngineering
and (as centered in t-e creation o' a tutorial 'or t-e development o' an
)e& Application in A*A+, 'or t-e creation and control o' acts -andled in
t-e projects o' degree o' t-e Faculty$
3-e tutorial &egan 'rom an application made 'or t-e creation and act
control, made in *ava doing use o' *ava Server %ages and Servlets$
3-roug- its development t-e tutorial included t-e main concepts t-at
compose t-e tec-nology A*A+ and it (as guided in t-e process o'
implementation (it-in an application &ase, (it- t-e purpose o'
'acilitating t-e process o' adaptation to t-is tec-nology$
4ey (ords: A*A+, *ava, /ttp0e#uest, D1M, 2SS, +ML, *avascript$
xi
INTRODUCCIN
De&ido al comien,o #ue tuvo Internet, con sus p5ginas poco din5micas y los
grandes re#uerimientos de los clientes, se -a visto la necesidad de optimi,ar los
tiempos de respuesta para alcan,ar las exigencias de #uienes lo re#uieren$ %ara
suplir este pro&lema se crearon di'erentes soluciones tecnolgicas #ue permitieran
a las p5ginas )e& tener un mayor dinamismo, estas soluciones van desde los
antiguos scripts 26I pasando por tecnologas tan ro&ustas como AS%$ 7o o&stante,
empresas de tecnologa, instituciones educativas y centros de investigacin siguen
tra&ajando en el desarrollo de nuevas tecnologas como 0u&y o A*A+, entre otras,
#ue permitan suplir las necesidades del da a da$
!ste proyecto surge como una necesidad de estar al da en los cam&ios
tecnologicos #ue se presentan, donde estar a la vanguardia es parte 'undamental
para las instituciones educativas, es por esto #ue el e#uipo de desarrollo en
Ingenera de So't(are !mpresarial de la Facultadd de Ingenera de Sistemas de la
niversidad !l "os#ue, !8DIS!L, -a decidido crear este tutorial para ser utili,ado
como gua de re'erencia para la creacin de aplicaciones #ue deseen -acer uso de
la tecnologa A*A+, con el 'in de 'acilitar el entendimiento y -acer m5s pr5ctico el
tutorial, sus ejemplos se enmarcan dentro de una sola aplicacin #ue permita la
creacin y el manejo de las actas de los proyectos del centro de investigacin de la
Facultad de Ingenera de Sistemas$
!n el captulo 9, se descri&e la pro&lem5tica del proyecto, los motivos #ue -an
llevado a reali,arlo y lo #ue se espera aportar con .l: en el captulo ;, se presenta
la &ase terica del proyecto, as como conceptos 'undamentales para el
entendimiento y desarrollo de la investigacin: en el captulo <, se trata la
metodologa utili,ada para el desarrollo de la aplicacin descri&iendo cada una de
sus etapas, en el captulo =, contiene los re#uerimientos 'uncionales y no
'uncionales del so't(are y su descripcin: en el captulo >, se muestra la 'orma
como -a sido dise?ado el so't(are para el presente proyecto de una 'orma glo&al:
en el captulo @, se muestra la 'orma como -a sido dise?ado el so't(are para el
presente proyecto de una 'orma m5s detallada, -aciendo uso de patrnes de
dise?o de so't(are y el modelo de la ar#uitectura del so't(are$
9
3310IAL %A0A !L D!SA001LL1 D! 7A A%LI2A2IA7 )!"
!7 A*A+ %A0A LA 20!A2IA7 B 217301L D! A23AS
2rist-ian 2amilo Cuintero Bepes
Diana %aola 0ojas 0amire,
B PLANTEAMIENTO DEL PROBLEMA
B.B. DESCRIPCIN DEL PROBLEMA
2uando Internet comen, no conta&a con contenido din5mico, todas las p5ginas
#ue en a#u.l entonces se desarrolla&an, se caracteri,a&an por ser est5ticas,
dejando a un lado la interaccin con el cliente, pero con el pasar del tiempo los
usuarios comen,aron a demandar aplicaciones din5micas #ue les permitieran
interactuar con di'erentes propsitos, los desarrolladores -an ideado di'erentes
soluciones para alcan,ar los re#uerimientos de los clientes$ Sin em&argo, da a da,
los re#uerimientos de los usuarios se -an ido incrementando, los tiempos de
respuesta de&en ser menores y es por esto #ue -an surgido alternativas como
A*A+, A3LAS y FL!+, entre otros$
A pesar de #ue A*A+
9
es un conjunto de tecnologas #ue se vienen usando ya -ace
algDn tiempo, su t.rmino se cre recientemente y -a tenido gran acogida entre los
desarrolladores de Aplicaciones )e&, lo #ue le -a permitido crecer r5pidamente y
ser documentado con di'erentes 'ines$
De&ido a la gran acogida #ue -a tenido A*A+ entre la comunidad y a #ue en la
Facultad de Ingeniera de Sistemas de la niversidad !l "os#ue no se cuenta con
un documento #ue expli#ue el proceso de desarrollo de Aplicaciones )e& con
A*A+, al momento de iniciar esta investigacin, as como los di'erentes tipos de
Frame(orEs #ue contri&uyen al desarrollo de Aplicaciones de este tipo, se
pretende generar un tutorial #ue sirva como gua para el desarrollo de proyectos,
#ue permita incrementar la 'uncionalidad de las aplicaciones )e& #ue #uieran
aprovec-ar las caractersticas #ue A*A+ o'rece$
B.2. FORMULACIN
F2u5les son los &ene'icios en la implementacin de un tutorial de A*A+ en el
proceso de desarrollo de una aplicacin )e& para la creacin y control de actasG
9 A*A+: Async-ronous *avaScript And +MLH*avaScript y +ML AsincrnicoI
;
B.C. DELIMITACIN
!l desarrollo del 3utorial de A*A+ se reali,ar5 para la Facultad de Ingeniera de
Sistemas de la niversidad !l "os#ue respaldado con una aplicacin la cual -ar5
uso de -erramientas como *avaJ >$K -aciendo uso de Servlets, *S%, %ostgreSCL
L$;, *aEarta 3omcat >$>$9M, ML y %rogramacin 1rientada a 1&jetos H%11I
durante el segundo periodo del a?o ;KK@ y el primer periodo del a?o ;KKM$
!l tutorial estar5 orientado espec'icamente a A*A+ y la 'orma en #ue se utili,a
#ueda 'uera del 5m&ito de este documento junto con la explicacin avan,ada de
cada una de las tecnologas #ue lo componen, su explicacin dentro del tutorial se
-ar5 de acuerdo a las necesidades de la aplicacin$
2omo resultado del proyecto se entregar5 un tutorial de A*A+ para el desarrollo de
aplicaciones )e& acompa?ado de una aplicacin para la creacin y control de
actas$
B.D. ESTADO DEL ARTE
!n 9NLN 3im "erners Lee invent lo #ue -oy en da se conoce como /3ML
;
H/yper
3erminal MarEup LanguageI #ue permita separar la implementacin, de la
in'ormacin #ue se le mostra&a al usuario, tam&i.n cre el /33% H/yper 3ext
3rans'er %rotocolI #ue permita a los servidores comunicarse con los clientes$
2uando aparecieron las p5ginas )e& solamente tenan contenido est5tico, lo cual
para comen,ar esta&a &ien, los cient'icos intercam&ia&an textos de sus
investigaciones$ Sin em&argo, al populari,arse Internet los usuarios comen,aron a
demandar un contenido #ue les permitiera interactuar con los sitios )e&$ La
primera solucin #ue se cre 'ue la de los scripts 26I H2ommon 6ate(ay
Inter'aceI, los cuales pueden ser creados en di'erentes lenguajes de programacin
pasando por %!0L -asta Oisual "asic, estos scripts son rutinas #ue se ejecutan del
lado del servidor cuando el cliente enva una peticin$ 7o o&stante, los scripts 26I
son lentos y poco seguros, pero aDn son usados en diversos sitios )e&$
%/% H/ypertext %re%rocesorI 'ue creado, en 9NN>, por 0asmus Lerdor', con el
o&jetivo de dar dinamismo a las p5ginas )e& su principal ventaja es la gran
cantidad de extensiones #ue permiten aumentar su potencial, a pesar de su
; 7ota del Autor:Pste t.rmino tam&i.n se conoce como /yper 3ext MarEup Language
<
potencial se -i,o popular varios a?os despu.s$
Los Applets
<
surgieron en 9NN> con la creacin del Lenguaje de programacin
*avaJ el cual era soportado por el 7avegador 7etscape$ De esta 'orma, se
encontr una nueva manera de crear p5ginas )e& din5micas$ !stos permitan a
los desarrolladores crear una gran cantidad de aplicaciones din5micas con pocas
instrucciones de cdigo, pero tenan una serie de restricciones, por ejemplo no es
permitido #ue los Applets lean o escri&an arc-ivos del sistema, no pueden -acer
uso de li&reras nativas y no pueden iniciar programas del lado del cliente$
La ejecucin de los Applets se -ace dentro del navegador sin importar la
plata'orma #ue el usuario tenga en su sistema, de a- su .xito, aun#ue los
desarrolladores de&en estar seguros de #ue sus clientes tengan la versin
apropiada de la M5#uina Oirtual de *avaJ con el 'in de evitar am&igQedades$
%aralelamente, 7etscape tra&aja&a en un lenguaje #ue permitiera a los
desarrolladores #ue no esta&an 'amiliari,ados con *avaJ crear aplicaciones
din5micas$ %ara esto la compa?a contrato a "rendan !ic- con el 'in de dise?ar e
implementar un lenguaje de encriptacin al cual actualmente se le conoce como
*avaScript, este tena como o&jetivo ayudar a los desarrolladores a modi'icar los
atri&utos de sus p5ginas de 'orma din5mica y as proveer al usuario una mejor
experiencia$
!n 9NN@ Sun Microsystems creadora del lenguaje *avaJ introdujo los Servlets los
cuales se ejecuta&an desde el servidor y permitan al desarrollador aislar la capa
de negocio, sin necesidad de preocuparse por la versin instalada en el cliente,
tam&i.n podan ser usados como sustitutos de los scripts 26I$
Los Servlets tienen un completo acceso a la A%I
=
de *avaJ y vienen con una
li&rera para el manejo del protocolo /33%$ %ero, el dise?o de inter'aces puede ser
complejo pues se de&e generar el cdigo /3ML manualmente$
Fue este pro&lema el #ue llev a Sun Microsystems a desarrollar una 'orma de
aislar la capa de presentacin de la capa de negocios y 'ue as como se
construyeron las *S% H*ava Server %agesI como contrapropuesta a las AS% HActive
Server %agesI de Microso't las cuales 'ueron la alternativa creada por esta
< Applet: Aplicacin #ue corre em&e&ida en el lado del cliente$
= Application %rogramming Inter'aces$
=
compa?a para la creacin de p5ginas din5micas$ !stas Dltimas son muy similares
en la 'orma como 'ueron dise?adas y separan la capa de negocio de la capa de
presentacin$
1tra alternativa &astante atractiva es Flas-, #ue permite crear aplicaciones
altamente din5micas a di'erencia de los anteriores, para usar Flas- &5sico no es
necesario tener conocimientos avan,ados de programacin a menos #ue re#uiera
de opciones un poco mas complejas$
Aun#ue Flas- re#uiere #ue el cliente tenga instalado un reproductor especial, las
aplicaciones -ec-as en .l tam&i.n re#uieren de una &uena conectividad a Internet
para 'uncionar r5pidamente pues las aplicaciones de&en ser cargadas totalmente$
!n 9NNM, cuando 7etscape y Microso't lan,aron las versiones =$K de sus
navegadores, los cuales implementa&an la versin 9$9
>
del protocolo /33%, los
desarrolladores podan crear nuevas aplicaciones &asadas en D/3ML HDynamic
/yper 3ext LanguageI #ue es una unin entre /3ML, 2SS H2ascading Style
S-eetsI y *avaScript$ La com&inacin de estas tecnologas le permita a los
desarrolladores modi'icar el contenido y la estructura de las p5ginas r5pidamente$
Sin em&argo, las implementaciones para cada uno de estos navegadores era
di'erente lo cual -a sido un pro&lema para D/3ML$ Adem5s, Los costos de
desarrollo tam&i.n 'ueron altos de&ido a la gran cantidad de cdigo necesario para
crear las aplicaciones$
La )<2 H)ide )orld )e& 2onsortiumI cre +ML He+tensi&le MarEup LanguageI en
9NNL como una 'orma de representar in'ormacin, tam&i.n se pretenda
estandari,ar las p5ginas )e&, de&ido a #ue las aplicaciones de +ML -an llegado
muc-o m5s lejos y actualmente es usado como un metalenguaje en di'erentes
aplicaciones tanto de )e&, como de escritorio$
Las p5ginas )e& se &asa&an en el paradigma peticin R respuesta donde los
usuarios envan solicitudes al servidor normalmente usando los m.todos 6!3 o
%1S3 y .ste contesta con una p5gina )e& generalmente en lenguaje /3ML: el
servidor devuelve la p5gina completa y no solamente la seccin #ue se modi'ic,
por lo #ue se o&liga a la aplicacin cliente #ue maneja el usuario a re'rescar por
completo la p5gina #ue se est5 visuali,ando$
> I73!07!3 S12I!3B$ /ypertext 3rans'er %rotocol 0F2 ;K@L$ *un$ 9NNN H2onsultado ;9 Sep$
;KK@I$ -ttp:RR((($(<$orgR%rotocolsRr'c;@9@Rr'c;@9@8sec9$-tmlSsec9
>
Los primeros intentos para tratar de solucionar este pro&lema se &asaron en
scripts remotos, los cuales le permiten al desarrollador crear p5ginas #ue
interactDen con el servidor de 'orma asincrnica -aciendo uso de la versin 9$9 del
protocolo /33%$
%osteriormente, en 'e&rero de ;KK>, *esse *ames 6arrett en un de&ate so&re
nuevos acercamientos a aplicaciones )e&, utili, el t.rmino A*A+ para -acer
re'erencia a la de'inicin de: Asincrnico, +ML/ttp0e#uest, *avaScript, 2SS, D1M
HDocument 1&ject ModelI$ !n dic-o de&ate 6arret mostr como esta com&inacin
de tecnologas permitira crear aplicaciones muc-o m5s ligeras y din5micas
@
$
A*A+, es otra de las soluciones al pro&lema de peticin R respuesta: la columna
verte&ral de esta tecnologa es *avaScript, #ue utili,a el o&jeto +ML/ttp0e#uest y
del est5ndar D1M nivel <, esta&lecido por la )<2$
A*A+ no re#uiere de ningDn so't(are, ni -ard(are especial y casi todos los
navegadores lo soportan$ 1tra gran ventaja de esta tecnologa es #ue puede
usarse con los lenguajes mencionados anteriormente, lo #ue no o&liga al
desarrollador a aprender un nuevo lenguaje para usarlo$
A*A+ est5 siendo usado para crear aplicaciones )e& #ue antes Dnicamente se
vean como aplicaciones de escritorio, a pesar de ser una tecnologa relativamente
nueva varias de las m5s importantes compa?as en el mundo, est5n us5ndolo para
sus desarrollos entre estas se encuentran 6oogle, Ba-oo y Ama,on, entre otros$
G++4*-: sin lugar a sido la empresa #ue m5s aplicaciones a reali,ado con A*A+
incluso antes de #ue el t.rmino 'uera de'inido, uno de sus primeros productos 'ue
6mail el cual se lan,o en a&ril de ;KK=
M
, las principales 'uncionalidades de A*A+
dentro de 6mail se encuentran en su inter'a, de usuario, donde se pueden reali,ar
acciones como adjuntar arc-ivos mientras se escri&e un correo electrnico, reali,ar
listados de contactos y al agregarlos a un grupo estos se actuali,an
autom5ticamente, lo cual no era muy comDn en la mayora de proveedores de
correo, ni si#uiera en clientes de correo como 1utlooE$ A este producto 6oogle a
sumado una considera&le cantidad de aplicaciones como 6oogle Maps #ue permite
reali,ar &us#uedas de las principales ciudades del mundo, mediante mapas en los
@ %ara mas in'ormacion consultar el articulo completo en:
-ttp:RRadaptivepat-$comRpu&licationsRessaysRarc-ivesRKKK<L>$p-p
M -ttp:RRso't(areli&re$uca$esRnodeRLMG%/%S!SSIDTeMK>NLNK'Laac<;>;N><NMKM@L'e'dc;
@
cuales se pueden -acer acercamientos para o&tener m5s y mejores detalles, entre
otras 'unciones$ 6oogle Spreeds-eats para el manejo de -ojas de calculo y 6oogle
Docs para la creacin de documentos, los cuales son la &ase del pa#uete de
o'imatica #ue 6oogle se encuentra desarrollando -aciendo uso A*A+$
A)'1+(: esta compa?a posee una de las tiendas online m5s 'amosas y
reconocidas del mundo, sin em&argo de&uto con un motor de &Ds#ueda conocido
como AN
L
, este motor #ue a su ve, utili,a otros motores como 6oogle, IMD&
N
y
)iEipedia, entre otros: lo #ue lo -ace Dnico y di'erente es como 'unciona su
inter'a, gr5'ica: AN permite seleccionar #ue motores intervienen en la &Ds#ueda y
los resultados se muestran por columnas y permite o&tener m5s in'ormacin de un
elemento de la &Ds#ueda sin necesidad de recargar toda la p5gina
Y'&++: en el ;KK> Ba-oo decidi relan,ar su sitio de noticias
9K
, los cam&ios
comen,aron por el aspecto gr5'ico para permitirle una mejor interaccin a los
usuarios, en .ste sitio cuando se pasa el mouse so&re el vnculo de una noticia se
despliega un pe#ue?o cuadro #ue muestra m5s in'ormacin y en algunos casos
una imagen asociada, algo #ue ca&e destacar, es #ue para este caso en particular,
el sitio no depende de la 'uncionalidad de A*A+, este es un valor agregado #ue da
una mejor experiencia al usuario$
1tra aplicacin muy popular reali,ada por Ba-oo H#ui,5s la m5s popular de esta
compa?aI es 'licEr
99
un sitio #ue permite su&ir, organi,ar y compartir con
conocidos, amigos y 'amiliares 'otos e im5genes uno de los aspectos m5s
importantes es #ue los usuarios pueden agregar comentarios dentro de los
sectores de las im5genes$
A continuacin se enumeran diversos autores #ue -an reali,ado algunos
tutoriales de A*A+, se anali,ara la consistencia de la in'ormacin, sus pro y sus
contra para la comunidad a la cual est5 en'ocado este proyecto$

!n el departamento de Ingeniera de la niversidad de Deusto
9;
, el Dr$ Diego
Lpe,
9<
cre un curso en el a?o ;KK>, donde trata un en'o#ue al desarroll de
L -ttp:RR((($aN$com
N Internet Movie Data "ase
9K -ttp:RRne(s$ya-oo$com
99 -ttp:RR((($'licEr$comR
9; La niversidad de Deusto esta u&icada en la ciudad de "il&ao, !spa?a$
9< LA%!U, de Ipi?a Diego$ 2urso A*A+$ ;KK> H2onsultado 9N Sep$, ;KK@I$
-ttp:RRp5ginaspersonales$deusto$esRdipinaRajaxR2ursoA*A+$pd'
M
A*A+ denominado V2urso de A*A+W el cual descri&e las principales tecnologas #ue
permiten A*A+: +/3ML, 2SS, *avaScript, D1M, +ML, +SL3 y el o&jeto
+ml/ttp0e#uest de *avaScript: para mejor entendimiento se reali,a una aplicacin
so&re un agregador de noticias 0SS$
!l tutorial es un nuevo en'o#ue de desarrollo )e& #ue garanti,a una mayor
interactividad y usa&ilidad de portales )e&$
!n este mismo a?o, Alejandro Mu?o,
9=
desarroll un mini8tutorial #ue tiene como
o&jetivo la creacin de una p5gina )e& simple -aciendo uso de A*A+, en esta
p5gina se cargan los datos a partir de otra p5gina sin necesidad de recargar la
p5gina actual$ 3am&i.n se vera como darle al usuario un 'eed&acE de lo #ue esta
pasando$ !ste pe#ue?o tutorial servir5 de gua para iniciar y conocer los
principales elementos #ue componen una p5gina #ue implementa A*A+$
%aralelamente, Ste-en Ma&oraE
9>
0eali, un tutorial de A*A+ donde trata el
concepto y se -ace uso de una metodologa para generar un contenido de una
p5gina al ser cargada y procesada, para ello -ace uso de eventos scripts y rutinas
dirigidas al servidor$ Lastimosamente posee un error en el ejemplo <$
De igual manera, "rett McLaug-lin
9@
en conjunto con Mo,illa$org desarrollaron un
completo tutorial dividido en tres partes #ue van desde el signi'icado de A*A+,
pasando por la introduccin a cada uno de los componentes y siguiendo con una
explicacin de los pasos para -acer asincrnica una peticin -aciendo uso de A*A+
y 'inali,ando con peticiones y respuestas m5s avan,adas$ Sin em&argo, el tutorial
no se &asa en un ejemplo &ase si no tiene una serie de ejemplos dispersos #ue no
tienen interrelacin unos con otros, otro limitante #ue tiene es #ue solamente esta
disponi&le en ingl.s$
De modo similar, Steven 2arauna
9M
un a?o mas tarde reali, un tutorial de A*A+
-aciendo uso de IIS HInternet In'ormation ServicesI y %/% >$9$= la 'inalidad de
9= MX1U: Alejandro$ Mini8tutorial de A*A+$ ;KK> H2onsultado 9L Sep$, ;KK@I$
-ttp:RRso'anaranja$comR;KK>RKLR;=Rmini8tutorial8de8ajaxR
9> MA"10A4 Ste-en$ 3utorial de A*A+ HAsync-ronous *avascript Y +MLI$ ;KK> H2onsultado en
Sep$ 9@ de ;KK@I$ -ttp:RR((($mononeurona$orgRindex$p-pGidpT>=M
9@ M2LA6/LI7, "rett$ A*A+ 3utorial$ ;KK> H2onsultado 9L Sep$, ;KK@I$
-ttp:RR((($yaldex$comRFS3utorials$-tm
9M S3!O!7, 2arauna$ Learn A*A+ &y !xample$ ;KK@ H2onsultado 9@ Sep$, ;KK@I$
-ttp:RR((($ajaximpact$comRajaximpact$p-pGnT9KZidT9;@Z&acETRdetail[3utorials[id[9;@[Ajax
[Learn[Ajax[&y[example$-tml
L
este tutorial es crear una aplicacin )e& donde una parte de texto cam&ie
constantemente -aciendo uso de A*A+$ 0ealmente, es un tutorial &astante corto y
sencillo pero #ue muestra claramente la 'orma en la #ue A*A+ tra&aja en
com&inacin con %/%$ Sin em&argo, esta sencille, y el estar en ingl.s son sus
principales limitantes$
%or Dltimo, Murray 6regory y "all *enni'er
9L
, en el ;KK@, crearn un tutorial so&re
A*A+ para -acer aplicaciones )e& 'lexi&les de&ido a componentes agrega&les a las
Inter'aces de suario, donde dic-os componentes son un 'rame(orE adecuado
para usar A*A+ en aplicaciones$
A*A+ mejora percepti&lemente la experiencia del usuario con su uso: mediante
*avaServer Faces el cual agrega componentes A*A+8 permitidos los cuales son m5s
'5ciles para el usuario, este mismo go,a de 'lexi&ilidad$
Sin em&argo este tutorial puede llegar a ser mas complejo #ue los anteriores por
ser usado con varios 'rame(orEs y una tecnologa reciente como es *ava Server
Faces, esto agregado al -ec-o de estar en ingles no lo -acen la mejor opcin para
empe,ar$
!l mini8tutorial de A*A+ reali,ado por Alejandro Mu?o, junto con el desarrollado
por Steven 2arauna, permiten o&tener conocimientos &5sicos so&re el tema$ Sin
em&argo, gracias a el tutorial desarrollado por Diego Lpe, estos conceptos
pueden ser pro'undi,ados y comprendidos de una mejor 'orma, an5logamente los
materiales de "rett McLaug-lin, Murray 6regory y "all *enni'er no de&en ser
consultados por #uien no tiene conocimiento del tema, pues a&ordan temas m5s
complejos y densos #ue pueden desanimar la investigacin o con'undir so&re los
conceptos #ue componen A*A+$
B.E. JUSTIFICACIN
De&ido al desarrollo tecnolgico y las demandas #ue son re#ueridas por los
usuarios, la Facultad de Ingeniera de Sistemas se ve en la necesidad de -acer uso
de nuevas tecnologas y -erramientas en los procesos de educativos #ue tienen
como 'inalidad el desarrollo de aplicaciones con el 'in de no #uedarse atr5s en el
9L 60!610B, Murray, "ALL, *enni'er$ Including A*A+ Functionality in a 2ustom *avaserver Faces
2omponent$ ;KK@ H2onsultado en 9M Sep$, ;KK@I$
-ttp:RRjava$sun$comRjavaeeRjavaserver'acesRajaxRtutorial$jsp
N
proceso de avance tecnolgico$
Actualmente A*A+ constituye una alternativa #ue permite mejorar el rendimiento y
la usa&ilidad de aplicaciones creadas en di'erentes lenguajes de programacin
H%/%, *avaJ, $7!3I motivo por el cual -a tenido una gran acogida entre la
comunidad de desarrolladores #ue &uscan mejorar sus aplicaciones$
A pesar de contar con una gran acogida, la in'ormacin sigue estando de 'orma
vaga y poco estandari,ada Ha pesar de #ue se tra&aja en elloI, en Internet no se
encuentra lo #ue necesita acerca de A*A+ dentro de un slo sitio, por lo #ue la
&Ds#ueda puede llegar a dilatar el o&jetivo 'inal del usuario, es por este motivo
#ue se &usca tener una gua para el desarrollo de Aplicaciones )e& -aciendo uso
de A*A+ donde se usen di'erentes tipos de Frame(orEs para evitar desarrollar
aplicaciones ya implementadas$
La mayora de esta in'ormacin se consigue en ingl.s, la in'ormacin en espa?ol
apenas supera la sencille, y a#uella #ue supera la sencille, no esta
contextuali,ada$
B.G. OBJETIVOS
B.G.B. O2/-%#7+ G-(-"'*.
Anali,ar los &ene'icios en la implementacin de un tutorial de A*A+ en el proceso
de desarrollo de una aplicacin )e& para la creacin y control de actas$
B.G.2. O2/-%#7+$ E$.-60<#6+$.
Desarrollar un 3utorial #ue sirva como gua para el desarrollo de Aplicaciones )e&
-aciendo uso de A*A+ ejempli'icado con una aplicacin para el manejo de actas$
/acer uso de algunos de los Frame(orEs existentes con el 'in de 'acilitar el
desarrollo de las aplicaciones$
Documentar los di'erentes tipos de Frame(orEs usados en la aplicacin con el 'in
de &rindar un conocimiento acerca del 'uncionamiento de los mismos$
9K
Desarrollar e implementar una Aplicacin )e& usando *avaJ
Desarrollar e implementar una Aplicacin )e& usando *avaJ y -aciendo uso de
A*A+
2omparar el rendimiento y la usa&ildad entre las aplicaciones con y sin A*A+$
99
2 MARCO TERICO
2.B. ANTECEDENTES TERICOS
!l presente proyecto se esta&lece dentro de la Lnea de Investigacin de Ingeniera
de So't(are de la niversidad !l "os#ue, con el 'in de servir como una gua en el
desarrollo de aplicaciones )e& con A*A+, para esto se orienta dentro de un
tutorial ya #ue de acuerdo con Mario 3amayo: V!l tra&ajo tutorial es conveniente
para:
Aclarar, ampliar y pro'undi,ar conceptos$
1rientar los ejemplos, ejercicios y pr5cticas -acia los temas y pro&lemas
propios de la disciplina #ue estudie cada participante$
0esolver in#uietudes y dudas$
!stimular el aprendi,aje en la pr5ctica$
Auto8regular el proceso de aprendi,aje$W
9N
!l tutorial contempla tres de las cuatro 'ases claves para el desarrollo del mismo
segDn 6agn.:
;K
Fase introductoria : Se presenta de 'orma resumida los temas a tratar para
darle una perspectiva al usuario$
Fase de orientacin:A medida #ue se explica el tema se ejempli'ica de
'orma codi'icada$
Fase de aplicacin: !l resultado #ue se o&tiene del desarrollo de la 'ase
anterior
%ara 'acilitar su entendimiento se desarrollar5 una aplicacin para el creacin y
control de actas, -aciendo uso de Servlets, *S% y A*A+ y otra sin A*A+, con el 'in
de mostrar los &ene'icios de su uso$
9N 3AMAB1, Mario$ Serie aprender a investigar \ Modulo >$ < !d$ "ogot5$ I2F!S$ 9NNN$ ;<M p$
;K 6ALOIS, Alvaro$ Ingenieria de so't(are educativo$ 9 !d$ "ogot5$ 7IA7D!S$ 9NN;$ ;K p$
9;
2.2. MARCO CONCEPTUAL
!l presente proyecto se enmarca dentro del siguiente marco terico$
Los ejemplos codi'icados #ue se encontrar5n a lo largo del documento no -acen
parte de la aplicacin: son Dnicamente para dar una idea m5s clara so&re el tema
#ue se est5 explicando$
9<
F#4,"' BJ Marco 3erico
2.2.B. D#<-"-(6#'$ -(%"- HTTP B. Y HTTP B.B. 2read en 9NLN, por 3im
"erners Lee, el %rotocolo de 3rans'erencia de /ipertexto H/33%I es el protocolo
usado en cada transaccin de la )e&, en el cual los clientes y servidores se
pueden comunicar$
/33% es un protocolo sin estado, es decir, #ue no guarda ninguna in'ormacin
so&re conexiones anteriores$ Al 'inali,ar la transaccin todos los datos se pierden$
Su 'uncionamiento &5sico es:
i$ !l cliente esta&le una conexin 32% con el servidor
ii$ !l cliente -ace una peticin
iii$ !l servidor le responde
iv$ 2ierra la conexin
/33% es reconocido por dos versiones la 9$K y la 9$9 a pesar de #ue -ay m5s
versiones de&ajo de la 9$K$
Las di'erencias m5s signi'icativas entre am&as versiones son:
T'2*' B. Di'erencias /33% 9$K y /33% 9$9$
HTTP B. HTTP B.B
8 Las conexiones del protocolo
32% son lentas de esta&lecer$
8 na conexin para transmitir
9E&yte de datos tarda alrededor
de >KKms$
8 3ras cerrar una conexin 32%,
el puerto del servicio utili,ado
en dic-a conexin, se #ueda en
estado 3IM![)AI3$
8 De'ine 9@ ca&eceras$
8 Simplicidad$
8 0endimiento He'icienciaI$
8 Asncrono Hpeticiones desde los
clientes en paralelo a trav.s de una
Dnica conexinI$
8 Seguridad HencriptacinI$
8 Servidores intermediarios HproxysI$
8 Oisuali,acin o&ligatoria Hautor,
copyrig-t y licenciaI$
8 0e#uerimientos de red$
8 De'ine =@ ca&eceras$
2.2.2. MIME TYPES. sualmente -a&lar de /33% conlleva a -a&lar de MI7!
3B%!S ya #ue el acrnico extensiones multipropsito de Internet HMultipurpose
Internet Mail !xtensionsI es un est5ndar para programas de correo o navegadores
)e& #ue tiene predeterminado Hmediante un arc-ivo de ca&ecera #ue adjunta en
el cual especi'ica el tipo y su&tipo del contenido del arc-ivoI la trans'erencia de
9=
arc-ivos multimedia como video y sonido, entre otros$
Los MIM! 3B%!S son casi de uso constante ya #ue cada ve, #ue se solicita una
p5gina mediante el protocolo /33% se gener5 un dialogo entre el navegador y el
servidor: donde el navegador -ace la peticin Hla p5ginaI, luego el servidor
con'irma el recurso y el tipo datos mediante una re'erencia MIM! 3B%!S$
!jemplo:
HTTP/1.0 200 OK
Date: Thu, 24 Jul 2003 21:20:18 GMT
Server: Apahe/1.3.2! "#$%&' De(%a$ G)#/*%$u& +,-./0%p/1.3.11.1a
PHP/4.2.3 v2h/1.2.1
34P,5ere-467: PHP/4.2.3
Set48,,9%e: la$/:;pa$%;h< e&p%re;:=r%, 234Jul404 21:20:18 GMT
8,$te$t4T7pe: te&t/ht+l
A/e: 1
21
La primera lnea especi'ica el tipo de protocolo usado, para el caso /33% 9$K y el
14 signi'ica #ue la respuesta del servidor es correcta para la p5gina solicitada$
Las lneas siguientes se re'ieren a la identidad de una cooEie y del servidor: el
2ontent83ype: textR-tml -ace re'erencia al MIM! 3B%!S: una ve, especi'icados los
campos respectivos el navegador de&er5 presentar los datos de la 'orma en #ue
'ueron reci&idos$
Los MIM! 3B%!S se pueden usar en tres lugares di'erentes:
i$ !n el propio servidor Hde&e estar capacitado para manejar diversos MIM!
3B%!SI$
ii$ !n la propia p5gina )e& Hre'erencia constantemente MIM! 3B%!SI$
iii$ !n el navegador del usuario Hde&e estar capacitado para interpretar MIM!
3B%!S en caso de ser necesario de interpretarlos si se presenta un posi&le
dialogoI$
2.2.C. HTML MH=.-"T-N% M'"K,. L'(4,'4-O. !l lenguaje /3ML 'ue creado de
'orma casi simult5nea con el protoclo /33% el cual era el medio para #ue en 9NLN,
pudiera nacer /3ML: actualmente se usa el est5ndar /3ML =$K, pu&licado el 9L de
diciem&re de 9NNM y revisado el ;= de a&ril de 9NNL$
;9 Cue son los MIM! 3B%!S$ ;KK> H2onsultado ;; Sep$, ;KK@I$ -ttp:RR((($diginota$comRtrucos8y8
tutorialesR#ue8son8los8mime8types88;$-tml
9>
Incluye cam&ios no editoriales desde la versin del ;= de a&ril de 9NNL$ %or
ejemplo, se -an -ec-o algunos cam&ios en los D3D]s HData 3ype De'initionI$ 2on
este documento #uedan o&soletas las versiones previas a /3ML =$K, aun#ue la
)<2 seguir5 poniendo a disposicin del pD&lico dic-as especi'icaciones y sus
D3D^s en su sitio )e&$
/3ML = soporta m5s opciones de multimedia, lenguajes de scripts, -ojas de estilo,
mejores capacidades de impresin y documentos m5s accesi&les a usuarios con
discapacidades$ /3ML =, tam&i.n da un gran paso adelante -acia la
internacionali,acin de los documentos, con la intencin de -acer la )e&
aut.nticamente universal
;;
$La 'igura ; ilustra la 'orma en la #ue 'unciona /3ML$
;<

!l 'uncionamiento de /3ML se limita a los siguientes pasos:
i$ Se a&re el explorador$
ii$ Se enva una solicitud de arc-ivos /3ML al servidor remoto mediante la
0L
;=
$
;; )<2$ /3ML =$K9 Speci'ication$ 9NNN H2onsultado ;9 de Sep$, ;KK@I$
-ttp:RR((($(<$orgR30R-tml=K9R
;< Aplicaciones )e&$ ;KK> H2onsultado ;M de Sep$, ;KK@I$
-ttp:RRdis$um$esR_j&ermude,RdadRtransparenciasR3;8Aplicaciones8
(e&K>K@$pd'Ssearc-T`;;3;8Aplicaciones8(e&K>K@$pd'`;;$2
;= ni'orm 0esource Locators, Locali,adores uni'ormes de recursos$
9@
F#4,"' 2. Ar#uitectura /3ML$3omada de Aplicaciones )e&
;<
iii$ !l servidor procesa la solicitud y enva datos al navegador del usuario$
iv$ na ve, los datos llegan el navegador del usuario interpreta todas esas
eti#uetas, im5genes, sonidos, entre otros, reconstruyendo la p5gina como
es originalmente$
Ba #ue /3ML no 'ue su'iciente para cu&rir las necesidades de los usuarios, se
&uscarn di'erentes alternativas #ue se descri&iran en los siguiente numerales$

2.2.D. CGI MC+))+( G'%-P'= I(%-"<'6-O. 26I 'ue la primera 'orma con la
#ue se intent darle dinamismo a las p5ginas )e&$ !l 2ommon 6ate(ay Inter'ace
HInter'a, 2omDn de %asarelaI es un m.todo #ue permite a un cliente solicitar
datos de un programa ejecutado en un servidor )e&, donde su principal 'uncin
es a?adir interaccin a documentos )e&$
;>
Los como se muestra en la 'igura < los pasos 'undamentales son:
i$ Se escri&e la aplicacin 26I o se -ace uso de una existente$
ii$ Se coloca la aplicacin en el servidor$
iii$ Se -ace un llamado desde una p5gina )e&$
iv$ la aplicacin se conecta a la &ase de datos asociada$
v$ na ve, reci&ida la in'ormacin necesaria la aplicacin 26I mejora la
apariencia de los datos para #ue sea m5s entendi&le para el usuario
;> 4AM3/AM, %anEaj$ 26I Security$ ;KK> H2onsultado ;N de 1ct$, ;KK@I$
-ttp:RR((($irt$orgRarticlesRjs9L=Rcgi$gi'
9M
F#4,"' C. Ar#uitectura 26I$ 3omada de %anEaj 4amt-am
;>
Hconstruccin de un documento /3MLI$
2.2.E. PHP MH=.-"%-N% P"-."+6-$$+"O. !s un lenguaje creado para aumentar
el dinamismo de las p5ginas )e&: es utili,ado en servidores y so&re los mismos se
ejecuta$
La primera versin de %/% se remonta a 9NN= y en sus orgenes no eran m5s #ue
una serie de scripts 26I escritos en %erl
;@
$ Sin em&argo, 'ue reescrito en su tercera
versin por Andi 6utmans y Ueev SurasEi con el 'in de mejorar el 'uncionamiento y
agregar nuevas 'uncionalidades, &asado en 2 R 2YY pero con 'unciones de otros
lenguajes como %ascal, "asic y %erl$
;M

La versin m5s reciente de %/% es la >$K tiene ventajas como el soporte de +ML
Hli&xml; li&raryI, una nueva extensin Simple+ML, extensin S1A%
Hinteropera&ilidadI, MySCLi, mejora del streaming para acceder a operaciones
so&re socEets$
%/% est5 muy relacionado con /3ML ya #ue en algunos casos -ay cdigo %/%
insertado dentro de /3ML: una ve, interpretado %/% este genera una p5gina
/3ML #ue ser5 enviada al cliente$
A pesar de ser li&re y ser compacto los tiempos de respuesta de %/%, no son los
mejores en aplicaciones ro&ustas #ue manejen medianos o grandes volumenes de
usuarios e in'ormacin$
;@ S31%F10D, Andre($ 6ua Avan,ada %rogramacin %/% para )indo(s$ Madrid, !spa?a$ %rentice
/all$ ;KK<$ <9L p$
;M 63I!00!U, A&ra-am$ "0AOA, 6ines$ %/% > a trav.s de ejemplos$ *unio de ;KK>$ ed$
Al'aomega$ ;9 p$
9L
F#4,"' D. Ar#uitectura %/%$ 3omada de A&ra-am 6uitierre,
;M
2.2.G. ASP MA6%#7- S-"7-" P'4-$O.!s una tecnologa del lado del servidor para
la generacin de p5ginas )e&$ La Dltima versin manejada desde el ;KK; es
AS%$7!3 la cual reempla,a los lenguajes interpretados por lenguajes compilados a
cdigo$
!l 'uncionamiento &5sico de AS% es:
i$ !l usuario solicita un documento AS%
ii$ !l servidor procesa los contenidos de AS%
iii$ !l usuario o&tiene un documento /3ML #ue 'ue generado en el servidor
A di'erencia de %/%, AS% si es capa, de manejar grandes volumenes de usuarios e
in'ormacion, sin em&argo AS% pertenece a Microso't 2orp$ Lo #ue implica comprar
una licencia de desarrollo$
2.2.!. A..*-%$. SegDn 7augt-on un Applet es: Vuna pe#ue?a aplicacin accesi&le
en un servidor Internet, #ue se transporta por la red, se instala autom5ticamente y
se ejecuta como parte de un documento )e&W
;L
$
!l ciclo de vida de un applet est5 dado por los siguientes sucesos:
i$ Applet suministra 'uncionalidad y soporte a la ventana principal de la
aplicacin$
ii$ !l programa donde se ejecuta el Applet comunica los sucesos relevantes
Hcrear, ejecutar, detener y destruirI$
2.2.I. S-"7*-%. !s una aplicacin *avaJ #ue se ejecuta en un servidor )e&
donde su uso m5s comDn es generar p5ginas )e& de 'orma din5mica teniendo
como &ase unos par5metros enviados por el navegador )e&$
;L 7A6/317, %atricE$ *ava Applets !structura$ H2onsultado ;; de Sep$, ;KK@I$
-ttp:RRdocencia$udea$edu$coRcciRjavaR!structura$-tml
9N
2omo se puede apreciar en la 'igura > el ciclo de un servlet esta con'ormado por:
;N
i$ n servidor carga e iniciali,a el servlet: ejecucin del m.todo init para
cargar el servlet$
ii$ !l servlet maneja cero o m5s peticiones de cliente: Manejo de peticiones por
parte de los clientes$
iii$ !l servidor elimina el servlet: Se ejecutan -asta #ue el servidor los destruye,
el servidor no ejecutar5 de nuevo el servlet, -asta -a&erlo cargado e
iniciali,ado de nuevo$
2.2.F. JSP MJ'7' S-"7-" P'4-$O. !s una tecnologa para la creacin de p5ginas
)e& #ue incluye cdigo *ava, /3MLR+ML me,clado con eti#uetas especiales$
!xisten tres tipos de elementos *S%, las directivas #ue son in'ormacin so&re la
p5gina #ue permanece igual entre respuestas, las acciones #ue se llevan a ca&o en
el momento se la solicitud y los scripting #ue son agregar una pie,a de cdigo
directamente$
!l ciclo de vida de un *S% se ve re'lejado en dos grandes etapas, la traduccin
donde la p5gina *S% se convierte en servlet, luego se toman los componentes y se
'orma la unidad, para 'inali,ar con la reali,acin de controles de correctitud
apropiados$
;N "A00I1S, *uan$ M10!71, *ose$ *ava Servlets$ 7ov$ ;KK9 H2onsultado 9K de 1ct$, ;KK@I$
-ttp:RR((($dcc$uc-ile$clR_j&arriosRservletsRvida$-tml,
;K
F#4,"' E. 2iclo de vida de un Servlet$
3omada de *uan "arrios
;N
La segunda etapa est5 dada por la compilacin donde previamente se -a generado
el servlet, el cual se invoca, se carga y se instancia para ponerse a disposicin$
*ava se cataloga como la mejor opcin en desarrollo para la aplicacin #ue se
desea reali,ar como gua dentro del tutorial, es li&re, porta&le
<K
en casi todos los
Sistemas 1perativos$ Adem5s, es capa, de manejar grandes volDmenes de
in'ormacin y usuarios, inclusive mejor #ue AS%$ 1tro punto a 'avor es #ue es
usado dentro de la Facultad de Ingeniera de Sistemas de la niversidad !l "os#ue
como lenguaje de aprendi,aje en las di'erentes asignaturas concernientes con el
desarrollo de so't(are$
Las siguientes secciones tratar5n las tecnologas #ue componen A*A+, con el 'in de
descri&ir su uso y dar un mejor entendimiento de como est5 con'ormado$
2.2.B. J'7'S6"#.%. *avaScript 'ue introducido por "rendan !ic- en 9NN> y se
de'ine como Vun lenguaje de tipo script compacto, &asado en o&jetos y guiado por
eventos dise?ado espec'icamente para el desarrollo de aplicaciones cliente8
servidor dentro del 5m&ito de InternetW$
<9
*avaScript posee varias versiones #ue van desde la 9$K -asta la 9$> las cuales
a-ora se encuentran compactadas en un est5ndar !2MAScript8;@;, impuesto por
la organi,acin !2MA HAsociacin !uropea de Manu'actura de 2omputadoresI$
n ejemplo para la validacin de un 'ormulario sencillo sera:
>ht+l?
>hea-?
>;r%pt *A)G#AG@:AJavaSr%ptA?
>B44
Cu$t%,$ %$%%,)u+er,"u;uar%,'D
var %
%C"u;uar%,.le$/th?3' D
C,r"%:0< %>u;uar%,.le$/th < %EE'D
%C"u;uar%,.harAt"%'?:A0AFF
u;uar%,.harAt"%'>:A1A'D
retur$ Cal;e<
G
G
retur$ true<
<K )rite 1nce, 0un Any(-ere
<9 2A0D!7AS, Lola$ 6A02IA, *oa#un$ 2onceptos &5sicos$ H2onsultado ;> Sep$, ;KK@I$
-ttp:RR((($(e&estilo$comRjavascriptRjsKK$p-tml
;9
G
G
Cu$t%,$ val%-ar"C,r+ular%,'D
%C"B%$%%,)u+er,"C,r+ular%,.u;uar%,.value''D
retur$ true<
G el;e D
alert"HSe a pr,-u%-, u$ err,r a:I$H'<
retur$ Cal;e<
G
G
Cu$t%,$ e$v%ar"C,r+ular%,'D
%C"val%-ar"C,r+ular%,'' D
C,r+ular%,.;u(+%t"'<
C,r+ular%,.re;et"'<
G
G
44?
>/;r%pt?
>(,-7?
>C,r+ $a+e:AC,r+ular%,A +eth,-:APOSTA at%,$:AJ$/re;,ServletA?
>ta(le (,r-er:A0A 5%-th:A100A %-:Ata(laA?
>tr?
>t-?#;uar%,:>/t-?
>t-? >%$put t7pe:Ate&tA $a+e:Au;uar%,A +a&le$/th:A10A
,$Ke7#p:A-e;ha(%l%ta"'A?>/t-?
>/tr?
>/ta(le?
>%$put t7pe:A(utt,$A $a+e:AaeptarA value:AAeptarA
,$l%9:Ae$v%ar"th%;.C,r+'A?
>%$put t7pe:Ah%--e$A $a+e:Aat%,$A value:A%$/re;,A?
>/C,r+?
>/(,-7?
>/ht+l?
2.2.BB. DOM MD+6,)-(% O2/-6% M+3-*O. D1M es la representacin orientada
a o&jetos de una p5gina #ue puede ser modi'icada con un lenguaje de encriptacin
como *avascript$ Fue estandari,ado por la )<2 en di'erentes niveles$ !l D1M nivel
9 'ue terminado en 1ctu&re de 9NNL y dio como resultado /3ML =$K y +ML 9$K, el
D1M nivel ; terminado en 7oviem&re de ;KKK incluye a 2SS pero aDn no est5
implementado por todos los navegadores y la Dltima es conocida como D1M nivel
< incluye la versin 9$9 de +ML, +ML Sc-ema 9$K y S1A% 9$;, estos niveles est5n
dise?ados para crear la 'orma de modi'icar el contenido de un documento D1M
con contenido +ML independientemente del Sistema 1perativo y el lenguaje #ue
se desea usar$
;;
D1M est5 &asado en la orientacin de o&jetos$ De'ine los o&jetos #ue son
necesarios para representar y modi'icar documentos, los atri&utos y la relacin
entre dic-os atri&utos$ !sta representacin se -ace mediante un 5r&ol$
n ejemplo de un 5r&ol D1M seria el siguiente:
<;
!l cdigo para el ar&ol D1M sera:
>ta(le?
>t(,-7?
>tr?
>t-?=,,>/t-?
>t-?6ar>/t-?
>/tr?
>t(,-7?
>ta(le?
2.2.B2. CSS MC'$6'3#(4 S%=*- S&--%$O. !s una tecnologa estandari,ada por la
)<2 usada para de'inir la presentacin de un documento estructurado escrito en
/3ML o +ML
<<
, con las 2SS lo #ue se &usca es separar la estructura de la
presentacin$
<; ASL!SS17, 0yan, S2/33A, 7at-aniel$ Foundations o' Ajax$ 7e( BorE, !stados nidos$ Apress$
;KK@$ ;N@ p$
<< "A02IA, Diego$ FCu. es 2SSG, 7ov$ ;KK< H2onsultado ;> Sep$, ;KK@I$
-ttp:RR((($maestrosdel(e&$comReditorialRintrocssR
;<
F#4,"' G. ar&ol D1M$
3omado 0yan Aslesson
<<
2SS posee dos versiones la 9$K H9NN@I y la ;$K H9NNLI, actualmente se tra&aja
so&re la versin <$K la cual reDne a las versiones anteriores$
La estructura de 2SS est5 dada por:
!jemplo:
>ht+l?
>(,-7?
>hea-?
<link rel='stylesheet' type='text/css' href='mycss.css' />
>/hea-?
>C,r+ $a+e:AC,r+ular%,A %-:AC,r+ular%,A +eth,-:AA?
>la(el C,r:A$,+(reA?),+(re:>/la(el?
>%$put t7pe:Ate&tA %-:A$,+(reA la;;:Aa+p,A /?
>la(el C,r:Ae+a%lA?@4+a%l:>/la(el?
>%$put t7pe:Ate&tA %-:Ae+a%lA la;;:Aa+p,A /?
>(r /?
>%$put t7pe:A;u(+%tA %-:A(,t,$.e$v%arA $a+e:Ae$v%arA
value:A@$v%arA /?
>/C,r+?
>/(,-7?
>/ht+l?
!n un nuevo arc-ivo de extensin b$css se le aplica un estilo como color de 'ondo:
(,-7 D
(a9/r,u$-: (lue<
G
1rgani,ando el 'ormulario Hdesplegar eti#uetas como &logI
C,r+D
pa--%$/: 30p&<
(a9/r,$u$-: /ra7<
;=
F#4,"' !. !structura 2SS$
5%-th:220p&<
G
la(el D
C,$t4;%0e: 12p&<
C,$t4Ca+%l7: Tah,+a,Ar%al<
,l,r: K=====<
-%;pla7: (l,9<
G
a+p,D
+ar/%$4(,tt,+: 10p&<
G
%ara agregar el arc-ivo 2SS &asta con poner la siguiente lnea en el enca&e,ado:
>l%$9 rel:H;t7le;heetH t7pe:Hte&t/;;H hreC:H+7;;.;;H /?
!l contraste entre una p5gina sin 2SS y una con 2SS es el siguiente:
2.2.BC. XML M-X%-($#2*- M'"K,. L'(4,'4-O. Metalenguaje desarrollado por
la )orld )ide )e& 2onsortium H)<2I es una manera de de'inir lenguajes, de
estandari,ar el intercam&io de in'ormacin entre di'erentes plata'ormas: +ML se
complementa con otras tecnologas$
2.2.BD. DTD MD+6,)-(% T=.- D-<#(#%#+(O. 7o es necesario para crear
documentos +ML, aun#ue est5 de'inido por el est5ndar +ML$ Aun#ue permite
imponer reglas a los mismos con el 'in de seguir un es#uema$ n ejemplo de D3D
;>
F#4,"' F. p5gina )e& con 2SS$
F#4,"' I. p5gina )e& sin 2SS$
sera el siguiente:
>L&+l ver;%,$:M1.0M e$,-%$/:M#T=48ML?
>B@*@M@)T )OM6N@ "KP8DATA'?
>B@*@M@)T A)JMA*"P@NNOE'?
>B@*@M@)T P@NNO ")OM6N@'?
Los D3D]s de&en ser guardados como arc-ivos b$dtd para el ejemplo sera
animal$dtd$
!l nodo 71M"0! es un nodo #ue contiene datos a eso -ace re'erencia la
expresin S%2DA3A$ A7IMAL contiene de una a n instancias de %!001, para eso
es usado el sm&olo Y, #ue puede ser cam&iado por el sm&olo b, en caso de
necesitar de cero a n instancias, 'inalmente %!001 es un nodo #ue contiene un
nodo 71M"0!$
La 'orma de usar un D3D dentro de un documento +ML es la siguiente:
>L&+l ver;%,$:M1.0M e$,-%$/:M#T=48ML?
>BDO8TOP@ MJ@J@MP*O Phttp://+%;%t%,/a$%+al.-t-M?
>A)JMA*?
>P@NNO?
>)OM6N@? Mate, >/)OM6N@?
>/P@NNO?
>P@NNO?
>)OM6N@? P,$/, >/)OM6N@?
>/P@NNO?
>/A)JMA*?
!n caso de no cumplir con las reglas esta&lecidas por el D3D se dice #ue el
documento +ML esta mal 'ormado, para este caso es o&ligatorio #ue todos los
nodos %!001 tengan de una a n instancias del nodo 71M"0!$ %or ejemplo:
>L&+l ver;%,$:M1.0M e$,-%$/:M#T=48ML?
>BDO8TOP@ MJ@J@MP*O2 Phttp://+%;%t%,/a$%+al.-t-M?
>A)JMA*?
>P@NNO?
>/P@NNO?
>/A)JMA*?
2.2.BE. XSLT. Desarrollada por la )<2 como un est5ndar #ue permitiera mostrar
los documentos +ML de una 'orma m5s legi&le$
;@
!l o&jetivo de +SL3 He+tensi&le Styles-eet Language 3rans'ormationsI es muy
similar al de 2SS aplicar estilos y 'ormatos, aun#ue tam&i.n tienen 'ines distintos
por ejemplo +SL3 puede generar /3MLR2SS a partir de +ML, adem5s permite
trans'ormar un documento +ML en otro documento +ML con un 'ormato
espec'ico$
Al igual #ue D3D es un lenguaje +ML lo #ue implica #ue am&os son est5ndares
'ijos, de modo #ue todos los documentos creados de este tipo de&en cumplir con
dic-o est5ndar$
!l siguiente ejemplo ilustra la estructura de un arc-ivo +SL3$
>L&+l ver;%,$:M1.0M e$,-%$/:M#T=48ML?
>&;l: ;t7le;heet ver;%,$:M1.0M
&+l$;:&;l:http://555.53.,r//1111/3S*/Tra$;C,r+?
>&;l:te+plate +athM:/M?
>ht+l?
>hea-/?
>(,-7?
>&;l:appl74te+plate;/?
>/(,-7?
>/ht+l?
>/&;l:te+plate?
>&;l:te+plate +ath:M)OM6N@M?
>;pa$ ;t7le:M-%;pla7:l%;t4%te+< C,$t4Ca+%l7:Ar%alM?
>;pa$ ;t7le:M-%;pla7:l%;t4%te+<C,$t4Ca+%l7:Ar%alM?
>/;pa$?
>/;pa$?
>/&;l:te+plate?
>/&;l:;t7le;heet?
!l documento +SL3 dar5 al documento +ML un 'ormato de documento /3ML
mediante las lneas:
>&;l:te+plate +athM:/M?
>ht+l?
>hea-/?
>(,-7?
>/(,-7?
>/ht+l?
>/&;l:te+plate?
Las lneas siguientes le indican #ue los nodos #ue correspondan a 71M"0!
tendr5n letra Arial$
;M
!l arc-ivo de&e ser guardado b$xslt para el ejemplo animal$xslt y se a?aden a un
documento +ML de la siguiente 'orma:
>L&+l ver;%,$:M1.0M e$,-%$/:M#T=48ML?
>BDO8TOP@ MJ@J@MP*O3 Phttp://+%;%t%,/a$%+al.-t-M?
>L&+l4;t7le;heet t7pe:Mte&t/&;lM
hreC:http://+%;%t%,/a$%+al.&;lt?
>A)JMA*?
>P@NNO?
>)OM6N@? Mate, >/)OM6N@?
>/P@NNO?
>P@NNO?
>)OM6N@? P,$/, >/)OM6N@?
>/P@NNO?
>/A)JMA*?
De esta manera, el arc-ivo +ML slo visuali,ar5 los nodos )OM6N@ en letra Arial
como muestra la 'igura$
2.2.BG. XMLH%%.R-;,-$%. !s un o&jeto perteneciente a Active+
<=
creado en
;KK9 dentro de una li&rera creada por Microso't conocida como MS+ML, #ue
permite a los programadores iniciar una peticin /33% desde cual#uier lugar de la
aplicacin )e&$ !l 'ormato de la in'ormacin es usualmente +ML$
/aciendo uso de este o&jeto, es como en A*A+ se esta&lece la conexin
<= Active+ es un conjunto de tecnologas desarrolladas por Microso't #ue permiten a los
componentes de so't(are interactuar entre s en un am&iente conectado de red, como Internet,
independientemente del lenguaje de desarrollo en #ue 'ueron creados
;L
F#4,"' B. %resentacin con +SL3$
asincrnica entre el cliente y el servidor$
La estructura de una 'uncin #ue crea un o&jeto +ML/ttp0e#uest es la siguiente:
Cu$t%,$ /et3M*HTTPNeQue;t"'D
var &NeQue;t:$ull<
%C "5%$-,5.3M*HttpNeQue;t' D
&NeQue;t:$e5 3M*HttpNeQue;t"'<
Gel;e %C "t7pe,C At%ve3O(Ret B: Au$-eC%$e-A'D
&NeQue;t:$e5 At%ve3O(Ret
"AM%r,;,Ct.3M*HTTPA'<
G
retur$ &NeQue;t<
G
Finalmente, se de'inir5 A*A+ de una 'orma m5s detallada y algunos de los
principales Frame(orEs utili,ados para el desarrollo de aplicaciones con A*A+$
2.2.B!. AJAX. !s el acrnimo de Asincrnico *avascript, +ML #ue -ace re'erencia
a la unin *avascript, 2SS, D1M, +ML/ttp0e#uest #ue existen -ace aproxidamente
una d.cada y #ue se -a&an usado aisladamente o en su&conjuntos pero nunca se
-a&an com&inado de 'orma sin.rgica
<>
$
Las aplicaciones A*A+ est5n escritas en *avascript 9$>
<@
pues este puede ser
interpretado por la mayora de navegadores )e&$
2SS permite de'inir estilos visuales reutili,a&les de los elementos de una p5gina
)e&, en A*A+ son usadas para de'inir el estilo con el #ue de&e mostrarse la
in'ormacin al ser actuali,ada$
D1M presenta la estructura de las p5ginas )e& como una serie de o&jetos
programa&les #ue pueden ser manipulados con *avascript$ !n A*A+ es usado para
poder modi'icar r5pidamente la inter'a, de usuario redi&ujando partes de la
p5gina$Oer 'igura 99$
<> 2uando dos o m5s elementos se unen sin.rgicamente crean un resultado #ue aprovec-a y
maximi,a las cualidades de cada uno de los elementos
<@ 7!3S2A%! 2ommunications 2orp$ 2ore *avascript 6uide 9$>$ ;KKK$ H2onsultado ;M Sep$, ;KK@I$
-ttp:RR(e&$arc-ive$orgR(e&R;KK=K;999N>K<9Rdevedge$netscape$comRli&raryRmanualsR;KKKRjava
scriptR9$>Rguide
;N
!l o&jeto +ML/ttp0e#uest permite a los desarrolladores )e& reci&ir in'ormacin
del servidor )e& como una actividad oculta$ !l 'ormato de la in'ormacin es +ML$
Mediante +SL3 se trans'orma +ML a +/3ML$
<M

!n una aplicacin tradicional la ar#uitectura consiste en:
i$ De'inir una p5gina para cada evento en la aplicacin
ii$ 2ada evento o accin de&e retornar la p5gina completa al navegador
iii$ La p5gina es mostrada al usuario
Las partes m5s importantes de la ar#uitectura de A*A+ son:
<M 20A7!, David, %AS2A0!LL1 !ric$ A*A+ in Action$ 6reen(ic-, !stados nidos$ ;KK@$ @L9 p$
<K
F#4,"' BB. 2omponentes de A*A+$ 3omado de David 2rane
<M
i$ %e#ue?os eventos del lado del servidor: A-ora las aplicaciones pueden
-acer pe#ue?as peticiones al servidor, o&tener alguna in'ormacin y
cam&iar la apariencia de la p5gina cam&iando el D1M, sin necesidad de
re'rescar toda la p5gina$
ii$ Asincrnico: Las peticiones #ue est5n en el servidor no lo &lo#uean$ !l
usuario puede continuar usando otras partes de la aplicacin y la inter'a, de
usuario es actuali,ada para alertar al usuario #ue la peticin se est5
reali,ando$
La ar#uitectura A*A+ consiste en:
i$ !l usuario -ace una peticin a trav.s de una 0L $
ii$ !l navegador retorna la p5gina original$
iii$ !l navegador crea el 5r&ol D1M$
iv$ Algunas actividades del usuario ocasionan peticiones asincrnicas a otras
0L sin tocar el 5r&ol D1M actual$
v$ !l navegador retorna in'ormacin -aciendo el llamado a una 'uncin
existente dentro de la p5gina$
!l navegador actuali,a el resultado y actuali,a en memoria el D1M con la
nueva in'ormacin H.sto se ve re'lejado cuando la p5gina es repintada, sin
ser recargadaI$
<9
F#4,"' B2. 2iclo de vida de una p5gina A*A+$ 3omado de *ustin 6et-land
2.2.B. F"')-P+"K$
B'6K2'$- AJAX Q J'7' E3#%#+(. %ermite crear aplicaciones )e& #ue sean
igual de productivas y e'icientes a las aplicaciones de escritorio$
"acE&ase A*A+ *ava
3M
!dition es una implementacin de *avaServer Faces
H*SFI con un avan,ado motor de *avascript en el lado del cliente y un plug
para ser utili,ado en !clipse$
"acE&ase tra&aja en cual#uier navegador )e& sin necesidad de plugins
como los usados por Flas- o *ava$
<;
F#4,"' BC. A*A+ vs
Aplicaciones tradicionales$
3omado de *ustin 6et-land
!l motor de "acE&ase A*A+ 'ue desarrollado en *avascript y provee una
gran cantidad de 'uncionalidades gen.ricas y reutili,a&les, como
animaciones, vnculos, manejo de estados, encadenamiento de in'ormacin,
entre otros$
<L
"acE&ase *SF 0untime permite a los componentes A*A+ ser representados
en la capa de presentacin de *SF, sincroni,a los estados y 'acilita el
encadenamiento de datos entre cliente y servidor$
Los componentes "acE&ase A*A+ *SF est5n preconstruidos lo #ue acelera la
creacin de la aplicacin$ Alrededor de <K componentes modi'ica&les de
inter'a, de usuario est5n incluidos y los desarrolladores tam&i.n pueden
crear sus propios componentes$
<L "A24"AS!, )-itepaper$ ;KK@ H2onsultado ;@ Sep$, ;KK@I$
-ttp:RR((($&acE&ase$comRdo(nloadR)-itepaper[*ava[!dition$pd'
<<
F#4,"' BD. !structura de "acE&ase$ 3omado de
"A24"AS!
<L
Las -erramientas de desarrollo de "acE&ase A*A+ permiten unirse al
entorno de desarrollo !clipse mediante un %lugin$
G++4*- W-2 T++*K#% MGWTO. %ermite desarrollar aplicaciones en A*A+ con
ayuda de *avaJ usando cual#uier entorno de desarrollo$ !l compilador de
6)3 traduce la aplicacin *avaJ en una serie de arc-ivos *avascript y
/3ML$
<=
F#4,"' BE. Ar#uitectura del Motor "acE&ase A*A+$ 3omado de i&id$
F#4,"' BG. !structura "acE&ase *SF 0untime$ 3omado de de i&id$
%ara comunicarse desde la aplicacin )e& a un servidor, no es necesario
de'inir las clases de *avaJ como seriali,a&le para la peticin y la respuesta$
6)3 autom5ticamente lo -ace$ 6)3 cuenta con un mecanismo #ue
adem5s permite el polimor'ismo, el manejo de excepciones, entre otros$
6)3 permite agregar un estado al &otn atr5s Huna de las mayores criticas
#ue se le -a -ec-o a A*A+ es #ue deja inopera&le dic-o &otnI
!l ciclo de desarrollo con 6)3 consiste en:
Desarrollar la aplicacin en *ava usando las li&reras de 6)3 #ue
sean necesarias$
sar 6)3 para traducir la aplicacin en una serie de arc-ivos
*avascript y /3ML$
2on'irmar #ue la aplicacin se ejecuta en los navegadores deseados
Husualmente no re#uiere tra&ajo adicionalI$
<N
La 'igura 9M muestra los di'erentes componentes de 6)3 lo cuales

consisten en:
2ompilador 6)3 *ava8to8*avaScript: traduce de *avaJ a *avascript$
6)3 /osted )e& "ro(ser: %ermite ejecutar las aplicaciones 6)3$
*0! !mulation li&rary: 2ontiene las implementaciones de *avascript
de los pa#uetes de clases de *avaJ est5ndar como son java$lang,
<N 6116L!, 6oogle )e& 3oolEit %roduct 1vervie($ ;KK@ H2onsultado ;@ Sep$, de ;KK@I
-ttp:RRcode$google$comR(e&toolEitRovervie($-tml
<>
F#4,"' B!. Ar#uitectura 6)3$ 3omado de 6oogle
<N
java$util$ Aun#ue pa#uetes como el java$io no es soportado pues no
aplican para aplicaciones )e&$
6)3 )e& I class li&rary: !s una serie de inter'aces y clases #ue
permiten crear o&jetos visuales como &otones, cuadros de texto,
entre otros$
T&#(KCAP JX. !s un am&iente de desarrollo para la construccin de
aplicaciones )e& &asado en A*A+, cdigo li&re y *;!!, #ue le permite a los
desarrolladores simpli'icar y acelerar el desarrollo de las aplicaciones -asta
en un >K`$ !spec'icamente 3-inE2A% permite crear aplicaciones )e&
mediante una inter'a, visual altamente intuitiva, tam&i.n tiene m5s de ;K
proyectos de cdigo a&ierto en un modelo de tres capas clienteRservidor,
adem5s contiene controles de persistencia de datos, integracin con !clipse,
permite crear inter'aces de usuario interactivas sin la complejidad normal
asociada a A*A+, entre otros$
=K
Las caractersticas principales de 3-inE2A% *+ son:
!ntorno de tra&ajo: la clave para la productividad de 3-inE2A% es el entorno
de tra&ajo, un entorno visual altamente intuitivo para construir la mayor
cantidad de elementos de una aplicacin visual$
=K 2L!A071OA$ 3-inE2A% *+ 1vervie($ ;KK@$ H2onsultado ;= Sep$, ;KK@I$
-ttp:RR((($clearnova$comRpu&licR3-inE2A%[*+[1vervie($pd'
<@
F#4,"' BI. %roductividad ganada con
3-inE2A% *+$ 3omado de 2L!A071OA
=K
!l am&iente de tra&ajo genera arc-ivos +ML #ue contiene los metadatos y
crea las clases *ava para los eventos y acciones adem5s puede integrarse
con !clipse$
Modelo de tres capas clienteRservidor: 3-inE2A% cam&ia la 'orma en
la #ue se construyen las aplicaciones mediante este modelo #ue le
permite a los desarrolladores escoger #ue parte del cdigo se ejecuta
en el cliente, en el servidor o en am&os$ Adem5s, se puede
especi'icar #ue valores se desean enviar, el mecanismo usado entre
el navegador y el servidor$ !n el cliente los desarrolladores escri&en
el cdigo de los eventos en *avascript, en el servidor lo -acen en
*avaJ$ 3-inE2A% tiene una A%I con m5s de <K 'unciones para
manipular las A%I]s del cliente, entre cliente y servidor y mover
cdigo entre los dos$
!'ectos visuales: 3-inE2A% incluye una li&rera de e'ectos visuales
#ue son '5ciles de usar$
Se ejecuta en cual#uier servidor de aplicaciones: 3-inE2A% se puede
usar en cual#uier servidor de aplicaciones *;!! certi'icado en
cual#uier Sistema 1perativo y con cual#uier gestor de &ase de datos
con drivers *D"2;$
ZL. Desarrollado por %otix 2orporation incluye un motor &asado en A*A+
con el 'in de automati,ar la interactividad, una gran cantidad de
componentes +L
=9
y +/3ML #ue permiten mayor usa&ilidad y un lenguaje
de marcado para dise?ar inter'ases de usuario sin necesidad de
programacin llamado UML
=;
$
!l motor &asado en A*A+ esta compuesto por tres partes:
U4 Loader: encargado de cargar las p5ginas UML$
Motor U4 A: !s el motor encargado del manejo de los eventos en el
servidor$
Motor del 2liente U4: !s el motor encargado del manejo de los
eventos en el navegador del cliente$
=9 +ML ser Inter'ace Language
=; U4 ser8Inter'ace MarEup Lenguage
<M
Las principales caractersticas y &ene'icios de U4 son:
=<

"asado en inter'aces de usuario A*A+: Lo #ue lo -ace interactivo y
permite #ue los usuarios 'inales tengan la misma experiencia #ue si
manejaran una aplicacin de escritorio$
2omponentes +L: son un est5ndar, permiten construir aplicaciones
)e& r5pidamente con m5s de @K componentes$
Script en *ava
3M
: Sin necesidad de compilar, sin necesidad de
*avascript, sin D1M, solamente %1*1 H%lain 1ld *ava c1deI$
%rocesamiento centrali,ado: Sin necesidad de programacin
asincrnica, ni 0MI o 0%2$
6eneral %u&lic License: Oeri'icacin de una gran comunidad a nivel
mundial$
S."=. Desarrollado por Ado&e este pe#ue?o 'rame(orE 'ue dise?ado para
agregar A*A+ a las aplicaciones )e&$ !n su primera versin eran capas #ue
incorpora&an +ML en documentos /3ML, usando /3ML, 2SS y una mnima
cantidad de *avascript sin necesidad de recargar toda la p5gina$ !ste
=< %13I+, 2orporation$ Simply 0ic- U4 %roduct 1vervie($ !ne$ ;KK@ H2onsultado 9 1ct$, ;KK@I$
-ttp:RR((($,Eoss$orgRdocRU48(p8prodov($pd'
<L
F#4,"' BF. Ar#uitectura U4$ 3omado de %13I+
=<
'rame(orE se centra en /3ML y es '5cil de implementar para usuarios con
conocimientos &5sicos de /3ML, 2SS y *avascript$
2onsiste en una li&rera *avascript del lado del cliente #ue tiene una serie de
*avascript, 2SS e im5genes #ue permiten el soporte de modi'icacin de
datos +ML, regiones din5micas, e'ectos, entre otros$
3odos los arc-ivos residen en el servidor, lo #ue #uiere decir #ue de&en ser
cargados y ejecutados dentro de un navegador$ Los usuarios del 'rame(orE
de&en incluir R vincular estos arc-ivos y -acer uso de varios componentes
del 'rame(orE en sus documentos /3ML para agregar una mejor
experiencia a los usuarios$
Las principales ventajas de este Spry son:
sa tecnologas est5ndar /3ML, 2SS y *avascript$
==
Mantiene la propiedad de los atri&utos y la sintaxis$
Minimi,a la necesidad de los scripts donde es posi&le$
!s simple$
== AD1"!, La&s$ Spry$ ;KK@ H2onsultado 9 1ct$, ;KK@I$ -ttp:RRla&s$ado&e$comR(iEiRindex$p-pRSpry
<N
C REQUERIMIENTOS
C.B. RESUMEN
La reali,acin del tutorial esta &asada en una aplicacin para la creacin y control
de actas, se reali,aran dos aplicaciones, una -ar5 uso de A*A+ y otra no$
C.2. REQUERIMIENTOS FUNCIONALES
=K
F#4,"' 2. Diagrama 2asos de so 2omunes$
T'2*' 2. 2aso de so 2onsultar Acta$
I3-(%#<#6'3+"
3-* C'$+ 3-
U$+
22K9
N+)2"- 3-* C'$+ 3- U$+
2onsultar Acta
P"#+"#3'3
A*%' +
M-3#'
B'/'
T#.+
D-$-'2*- N-6-$'"#+
+
D-$6"#.6#+(
Le permite al usuario la consulta de un acta segDn un criterio de
&Ds#ueda$
T'2*' C. 2aso de so Firmar Acta$
I3-(%#<#6'3+"
3-* C'$+ 3-
U$+
22K;
N+)2"- 3-* C'$+ 3- U$+
Firmar Acta
P"#+"#3'3
A*%' +
M-3#'
B'/'
T#.+
D-$-'2*- N-6-$'"#+
+
D-$6"#.6#+(
Permite a los usuarios del sistema aceptar los compromisos de las
actas a las que estn adscritos
T'2*' D. 2aso de so Modi'icar In'ormacion %ersonal$
I3-(%#<#6'3+"
3-* C'$+ 3-
U$+
22K<
N+)2"- 3-* C'$+ 3- U$+
Modificar Informacion Personal
P"#+"#3'3
A*%'
M-3#'
B'/' +
T#.+
D-$-'2*-
+
N-6-$'"#+
D-$6"#.6#+(
Permite a los usuarios modificar algunos de sus atributos
personales
=9
T'2*' E. 2aso de so 2rear Acta$
I3-(%#<#6'3+"
3-* C'$+ 3-
U$+
2AK9
N+)2"- 3-* C'$+ 3- U$+
Crear Acta
P"#+"#3'3
A*%' +
M-3#'
B'/'
T#.+
D-$-'2*- N-6-$'"#+
+
D-$6"#.6#+(
Le permite al usuario crear un acta teniendo en cuenta los
parmetros que debe introducir para la creacin de la misma.
Fec-a: 20 de Enero de 200
=;
F#4,"' 2B. Diagrama de 2asos de so Administrador$
T'2*' G. 2aso de so 2rear 3ema$
I3-(%#<#6'3+"
3-* C'$+ 3-
U$+
2AK;
N+)2"- 3-* C'$+ 3- U$+
Crear !ema
P"#+"#3'3
A*%' +
M-3#'
B'/'
T#.+
D-$-'2*- N-6-$'"#+
+
D-$6"#.6#+(
Permite la creacin de un tema a partir de un acta "a creada.
T'2*' !. 2aso de so Asignar %articipante$
I3-(%#<#6'3+"
3-* C'$+ 3-
U$+
2AK<
N+)2"- 3-* C'$+ 3- U$+
Asignar Participante
P"#+"#3'3
A*%' +
M-3#'
B'/'
T#.+
D-$-'2*- N-6-$'"#+
+
D-$6"#.6#+(
Le permite al usuario asignar un participante a un acta "a creada.
T'2*' I. 2aso de so 2rear 2ompromiso$
I3-(%#<#6'3+"
3-* C'$+ 3-
U$+
2AK=
N+)2"- 3-* C'$+ 3- U$+
Crear Compromiso
P"#+"#3'3
A*%' +
M-3#'
B'/'
T#.+
D-$-'2*- N-6-$'"#+
+
D-$6"#.6#+(
Permite la creacin de un compromiso a partir de un acta "a
creada.
=<
T'2*' F. 2aso de so Designar 0esponsa&ilidades$
I3-(%#<#6'3+"
3-* C'$+ 3-
U$+
2AK>
N+)2"- 3-* C'$+ 3- U$+
#esignar $esponsabilidades
P"#+"#3'3
A*%' +
M-3#'
B'/'
T#.+
D-$-'2*- N-6-$'"#+
+
D-$6"#.6#+(
Permite designar un compromiso a un participante.
T'2*' B. 2aso de so Modi'icar Acta$
I3-(%#<#6'3+"
3-* C'$+ 3-
U$+
2AK@
N+)2"- 3-* C'$+ 3- U$+
Modificar Acta
P"#+"#3'3
A*%' +
M-3#'
B'/'
T#.+
D-$-'2*- N-6-$'"#+
+
D-$6"#.6#+(
Permite la modificar de las diferenctes propiedades de un acta.
T'2*' BB. 2aso de so Modi'icar 2ompromiso$
I3-(%#<#6'3+"
3-* C'$+ 3-
U$+
2AKM
N+)2"- 3-* C'$+ 3- U$+
Modificar Compromiso
P"#+"#3'3
A*%' +
M-3#'
B'/'
T#.+
D-$-'2*- N-6-$'"#+
+
D-$6"#.6#+(
Permite modificar las propiedades de un compromiso.
==
T'2*' B2. 2aso de so 0etirar %articipante$
I3-(%#<#6'3+"
3-* C'$+ 3-
U$+
2AKL
N+)2"- 3-* C'$+ 3- U$+
$etirar Participante
P"#+"#3'3
A*%' +
M-3#'
B'/'
T#.+
D-$-'2*- N-6-$'"#+
+
D-$6"#.6#+(
Permite retirar un participante que fue asignado con aterioridad a
un acta.
T'2*' BC. 2aso de so !liminar Acta$
I3-(%#<#6'3+"
3-* C'$+ 3-
U$+
2AKN
N+)2"- 3-* C'$+ 3- U$+
Eliminar Acta
P"#+"#3'3
A*%' +
M-3#'
B'/'
T#.+
D-$-'2*- N-6-$'"#+
+
D-$6"#.6#+(
Permite eliminar todas las propiedades que fueron asginadas al
acta al momento de la creacin.
C.C. REQUERIMIENTOS NO FUNCIONALES
%ara #ue las aplicaciones 'uncionen correctamente el servidor de&e cumplir con las
siguientes condiciones$
Las aplicaciones ser5n desarrolladas usando )indo(s +% S%;$
!l navegador (e& usado para el uso de las aplicaciones es Internet !xplorer
@$K$
*ava SD4 9$>$;$
Apac-e 3omcat >$>
%ostgreSCL L$;$
%ara #ue el cliente pueda -acer uso de la aplicacin #ue contenga A*A+ es
necesario #ue el navegador tenga -a&ilitado el uso de *avascript$
=>
C.D. NORMAS: POLITICAS Y REGLAS DEL NEGOCIO
Si el acta -a sido 'irmada por alguno de los participantes asignados esta no podr5
ser modi'icada, ni eliminada del sistema$
!l acta manejar5 dos atri&utos de 'ec-a con el 'in de evitar am&igQedades entre
las 'ec-as ingresadas por el usuario y las generadas por el sistema$
=@
D METODOLOGA
D.B. MODELO DETALLADO DEL CICLO DE VIDA.
%ara el desarrollo del proyecto, se utili, un m.todo iterativo por etapas #ue
permita el desarrollo 5gil de la aplicacin$
De acuerdo con 6rady "ooc-: V!s un proceso #ue involucra la continua integracin
de la ar#uitectura del sistema para poder generar los ejecuta&les donde cada uno
de ellos incluye una mejora so&re los otrosW
=>
$
Los principales motivos #ue llevan a la seleccin de este ciclo de vida son la
mitigacion de riesgos y la evolucin a trav.s de las iteraciones #ue permitieron el
paso de la aplicacin sin A*A+ a la aplicacin con esta$
!ste proceso se dirige mediante los casos de uso y se compone de las siguientes
'ases:
Iniciacin: La idea &ien 'undamentada: delimitacion, criterios evaluativos,
recursos, creacin de un prototipo ejecuta&le: 'inali,ando se evalDan
o&jetivos para seguir a la siguiente 'ase$
!la&oracin: Se de'ine la visin del proyecto y la ar#uitectura, se clari'ican
los re#uerimientos del sistema teniendo en cuenta cu5les son 'uncionales y
cu5les no 'uncionales$
An5lisis del dominio del pro&lema, desarrollo plan eliminacin de elementos
de alto riesgo, escri&ir y especi'icar re#uisitos del sistema, ejecucin de
casos de uso signi'icativos$
Finali,ando se anali,a el alcance, o&jetivos, solucin de riesgos y
ar#uitectura$
Desarrollo iterativo e incremental del producto, descripcin de re#uisitos
restantes, re'inamiento del dise?o, prue&as de so't(are, complemento de la
implementacin$
Finali,ando se deciden los lugares de uso y usuarios #ue pro&aran so't(are$
=> "112/, 6rady$ 0M"A6/, *ames$ *A21"S17, Ivar$ !l Lenguaje uni'icado de modelado$ pag$
;N
=M
3ransicin: Mejoramiento continuo del sistema, prue&as con usuarios
'inales, erradicacin de errores de programacin, anexos de caractersticas
'altantes de las dem5s etapas$
Fase con so't(are &eta para prue&as y luego si produccin, 'inali,ando se
revisan o&jetivos alcan,ados y se determina si se empie,a de nuevo el ciclo
u otro ciclo$
Dentro de este proyecto cada macro ciclo represent cada una de las aplicaciones,
el primer macro ciclo representara la aplicacin para el control y la gestin de
actas -aciendo uso de Servlets y *S%, el segundo macro ciclo represent la
aplicacin para el control y la gestin de actas -aciendo uso de Servlets, *S% y
A*A+H2SS, *avascript, +ML/ttp0e#uestI
=L
F#4,"' 22. 2iclo de Desarrollo Iterativo %or !tapas$ 3omado de i&id$
E DISEHO GLOBAL
E.B. DIAGRAMA DE CLASES SIN PATRNES
La alternativa de solucin considerada para la aplicacin puede verse en el
siguiente diagrama de clases$
E.2. DIAGRAMA DE SECUENCIA SIN PATRNES
%ara demostrar la via&ilidad del diagrama anterior se reali,arn los siguientes
diagramas de secuencia #ue presentan los di'erentes pasos #ue son reali,ados
para la creacin y modi'icacin de actas,dos de los pasos m5s complejos$
=N
F#4,"' 2C. Diagrama de 2lases 6lo&al$
>K
F#4,"' 2D. Diagrama de Secuencia 2rear Acta$
F#4,"' 2E. Diagrama de Secuencia Modi'icar Acta$
>9
G DISEHO DETALLADO
G.B. ARQUITECTURA DE SOFTWARE
A";,#%-6%,"' M+3-*RV#-PRC+(%"+**-" MMVCO.
La Ar#uitectura MO2 consiste de acuerdo con "usc-mann
=@
en dividir la aplicacin
en tres partes procesamiento, salida y entrada para esto de'ine:
Modelo: !ncapsula los datos y las 'uncionalidades$ !l modelo es
independiente de cual#uier representacin de salida yRo comportamiento de
entrada$
Oista: Muestra la in'ormacin al usuario$ 1&tiene los datos del modelo$
%ueden existir mDltiples vistas del modelo$ 2ada vista tiene asociado un
componente controlador$
2ontrolador: 0eci&en las entradas, usualmente como eventos$ !l usuario
interactDa con el sistema a trav.s de los controladores$
Las Oistas y los 2ontroladores con'orman la inter'a, de usuario$ n mecanismo de
propagacin de cam&ios asegura la consistencia entre la inter'a, y el modelo$ La
separacin del modelo de los componentes vista y del controlador permite tener
mDltiples vistas del mismo modelo$
Si el usuario cam&ia el modelo a trav.s del controlador de una vista, todas las
otras vistas dependientes de&en re'lejar los cam&ios$ %or lo tanto, el modelo
noti'ica a todas las vistas siempre #ue sus datos cam&ien$ Las vistas, en cam&io,
recuperan los nuevos datos del modelo y actuali,an la in'ormacin #ue muestran al
usuario$
La 'igura ;@ ilustra la estructura de la ar#uitectura Modelo8Oista82ontrolador$
=M
=@ "S2/MA77, FranE$ %attern 1riented So't(are Arc-itecture, Oolume 9: A System o' %atterns,
ed$: )illey Z Sons, 9NN@$
=M S7, Microsystems$ *ava "lue%rints Model8Oie(82ontroller$ ;KKK H2onsultada 9> !ne$, ;KKMI$
-ttp:RRjava$sun$comR&lueprintsRpatternsRMO28detailed$-tml
>;
Algunos de sus principales &ene'icios son:
Menor acoplamiento: Desacopla las vistas de los modelos
=L

Desacopla los modelos de la 'orma en #ue se muestran e ingresan los datos
Mayor co-esin: 2ada elemento del patrn esta altamente especiali,ado en
su tarea Hla vista en mostrar datos al usuario, el controlador en las entradas
y el modelo en su o&jetivo de negocioI$
G.2. PATRNES DE DISEHO APLICADOS EN LA SOLUCIN
G.2.B. F"+(% C+(%"+**-" MC+(%"+*'3+" F"+(%'*O. 2onsiste en tener un
componente simple #ue se encargue del manejo centrali,ado de las peticiones de
la aplicacin, la ar#uitectura *;!! sugiere #ue este componente sea un Servlet$
%ara un mejor entendimiento de este patrn se ilustra el diagrama de clases en la
'igura ;M$
=L S7, Microsystems$ 2ore *;!! %atterns 8 Front 2ontroller $ ;KK9 H2onsultado 9> !ne$, ;KKMI$
-ttp:RRjava$sun$comR&lueprintsRcorej;eepatternsR%atternsRFront2ontroller$-tml
><
F#4,"' 2G. !structura 6eneria MO2$ 3omado de S7 Microsystems
=L
Las ventajas de usar este patrn son:
=N
Facilita el mantenimiento: na aplicacin distri&uida es m5s di'cil de
mantener ya #ue los cam&ios de&en verse re'lejados en distintos puntos de
la aplicacin$
0educe la capa de lgica$
G.2.2. C+))'(3 MC+)'(3+O. !ste patrn encapsula la peticin de un o&jeto
mediante una inter'a,, permitiendo parametri,ar las di'erentes peticiones de los
usuarios de las aplicaciones, en la aplicacin se usar5 en conjunto con el patrn
Front 2ontroller #ue -ar5 las veces de invoEer de comandos$
La 'igura ;L ilustra mediante un diagrama de clases la implementacin de este
patrn$
G.2.C. D'%' A66-$$ O2/-6% MDAOO. Mediante un inter'a, permite a la aplicacin
comunicarse con la &ase de datos Haun#ue se puede implementar para ser
utili,ado con otro tipo de almacenamientos persistentes como arc-ivos planos,
entre otrosI$ %ermitiendo de esta 'orma encapsular la 'orma en la #ue van a ser
tratados los o&jetos en medio persistente$
=N S7, Microsystems$ 2ore *;!! %atterns 8 Front 2ontroller $ ;KK9 H2onsultado 9> !ne$, ;KKMI$
>=
F#4,"' 2!$ Diagrama de 2lases %atrn Front
2ontroller$ 3omado de S7 Microsystems
=N
G.2.D. V'*,- O2/-6% MVOO. !l patrn DA1 usualmente va acompa?ado de otro
patrn, para este caso ser5 el patrn Oalue 1&ject Hel cual es e#uivalente de cierta
manera al 3rans'er 1&ject la di'erencia est5 en su 'inalidadI el cual permite la
representacin de los o&jetos #ue se encuentran en medio persistente$
Al igual #ue en los patrones anteriores se ilustra el manejo de los patrones DA1 y
O1 as como su interactividad mediante un diagrama de clases en la 'igura ;N$
>K

>K DA3A Z 1&ject Factory$ 2ommand Design %attern$ ;KKK H2onsultado 9> !ne$, ;KKMI$
-ttp:RR((($do'actory$comR%atternsR%attern2ommand$aspx
>>
F#4,"' 2I. Diagrama de 2lases %atrn 2ommand$ 3omado de DA3A Z
1&ject Factory
>K
G.2.E. W"'..-" M.'%"5( 3- 3#$-A+O.
>9
)rapper tam&ien conocido como Adapter
permite trans'ormar la inter'a, original de un componente en otra inter'a,
mediante un adaptador: la estructura manejada por .ste patrn est5 dada por una
clase #ue usa varias -erencias para lograr adaptar la nueva inter'a, y un o&jeto
#ue posee la composicin de o&jetos$ La implementacin est5 dada por la creacin
de la clase adaptador la cual de&e extenerder del componenete existente para asi
poder implementar la inter'a,$
>;
Pste patrn 'ue utili,ado dentro de la primera aplicacin con el 'in de reali,ar la
validacin de los atri&utos #ue componen el acta, ya #ue al no poder usar un
lenguaje de tipo script del lado del cliente era necesario -acerlo en el servidor,
para esto se adapta&a la inter'a, de los O1 para compararlos con valores v5lidos
para los di'erentes campos$
G.C. DIAGRAMA DE CLASES CON PATRNES
2on este diagrama se pretende demostrar la evolucin de la aplicacin de su
estado anterior Hglo&alI, el diagrama de clases #ue se muestra a continuacin
contiene todos los patrnes mencionados anteriormente al igual #ue la
ar#uitectura de so't(are indicada anteriormente$
>9 S7, Microsystems$ 2ore *;!! %atterns \ Data Access 1&ject$ ;KK9 H2onsultado 9> !ne$,
;KKMI$ -ttp:RRjava$sun$comR&lueprintsRcorej;eepatternsR%atternsRDataAccess1&ject$-tm
>; LA0MA7, 2raig$ ML y %atrones una introduccin al an5lisis y dise?o orientado a o&jetos y al
proceso uni'icado$ Madrid:!spa?a$ %earson ;KK<$
>@
F#4,"' 2F. Diagrama de 2lases %atrnes DA1 y O1$ 3omado de S7
Microsystems
>9
>M
F#4,"' C. Diagrama de 2lases usando %atrnes$
G.D. DIAGRAMA DE SECUENCIA CON PATRNES.
>L
F#4,"' CB. Diagrama de Secuencia usando patrnes$
! PRUEBAS
%ara comparar el 'uncionamiento de las aplicaciones se utili, el so't(are *meter
creado por Apac-e Foundation 6ruop #ue permite -acer simulaciones &asadas en
-ilos, ademas permite ingresar los par5metros #ue se agregan durante un
determinado proceso$
Los resultados o&tenidos son los siguientes:
%ara la aplicacin #ue no -ace uso de A*A+ estos 'ueron los resultados$
F#4,"' C2. 0esultados o&tenidos aplicacin con A*A+$
%ara la aplicacin #ue -ace uso de A*A+ estos 'ueron los resultados$
F#4,"' CC. 0esultados o&tenidos aplicacin sin A*A+$

%ara el manejo de una muestra de 9K -ilos la aplicacin de A*A+ sDpera en
m5s del =K` el rendimiento de la otra aplicacin$ Asi mismo se puede apreciar #ue
tanto los tiempos de trans'erencia como el rendimiento son mejores -asta en un
;>` en la aplicacin #ue implementa A*A+ para una muestra simultanea de >K
-ilos para cada aplicacin$

>N
I IMPLEMENTACIN
La aplicacin #ue apoya al tutorial tiene como 'inalidad demostrar las ventajas
o'recidas por A*A+, mediante la creacin y control de actas, #ue pueden ser
manipuladas por los docentes y consultadas por los estudiantes de la Facultad de
Ingeniera de Sistemas$ !n este sentido, la aplicacin se encuentra orientada al
mejoramiento del control de los acuerdos esta&lecidos entre los participantes de
los encuentros de los proyectos de grado$
Durante el desarrollo de la aplicacin se presentaron dos etapas$ !n la primera, se
desarroll una aplicacin sin la ayuda de A*A+ #ue sera la &ase para implementar
el conjunto de tecnologias: y, en la segunda, etapa estuvo dada por la creacin del
tutorial junto con la implementacin de A*A+ en la aplicacin 'inal$
!l proceso de la aplicacin sin A*A+ estuvo dado por diversos pasos y su&pasos
para lograr la creacion del acta junto con las dem5s 'uncionalidades #ue se activan
luego de existir un acta, .stas estan dadas por la eliminacion del acta, retirar un
participante, modi'icar un compromiso y modi'icar el acta, ca&e aclarar #ue el acta
solo se puede eliminar antes de ser 'irmada de lo contrario .sta operacin no se
podr5 reali,ar$
!l proceso de la aplicacin sin A*A+ estuvo dado por diversos pasos y su&pasos
para lograr la creacion del acta, junto con las dem5s 'uncionalidades #ue se
activan len este proceso, en el #ue se pueden dar la eliminacion del acta, el retiro
de un participante, la modi'icacin de un compromiso y de un acta$ 2a&e aclarar
#ue el acta slo se puede eliminar antes de ser 'irmada de lo contrario .sta
operacin no se podr5 reali,ar$
!l proceso a seguir para la creacin de una acta es el siguiente:
9$ 2rear el acta ingresando el nom&re, la 'ec-as, una descripcin opcional y el
nDmero de temas$ Oer 'igira <;$
@K
F#4,"' CD. %antalla creacin acta$
;$ Ingresar los temas$
F#4,"' CE. %antalla creacin temas$
<$ Asignar los participantes al acta e ingresar el nDmero de compromisos$
F#4,"' CG. %antalla asignacin usuarios$
=$ 2rear los compromisos ingresando el nom&re, la 'ec-a, la descripcin y
asignar el responsa&le$
@9
F#4,"' C!. %antalla creacin compromisos$
>$ Finalmente se previsuali,a el acta y se guarda$
F#4,"' CI. %antalla previsuali,acin acta$
@;
!l proceso a seguir para la consulta de una acta es el siguiente:
i$ Seleccione de una lista de actas creadas la #ue desea consultar$
F#4,"' CF. %antalla seleccin consulta acta$
ii$ 2onsultar acta$
F#4,"' D. %antalla consulta acta$
!l proceso a seguir para 'irmar una acta es el siguiente:
i$ Seleccione de una lista de actas creadas la #ue vaya a 'irmar$
F#4,"' DB. %antalla seleccin 'irmar acta$
@<
ii$ Firmar acta$
F#4,"' D2. %antalla 'irmar acta$
!l proceso a seguir para eliminar una acta es el siguiente:
i$ Seleccione de una lista de actas creadas la #ue #uiera eliminar teniendo en
cuenta #ue no de&e -a&er sido 'irmada$
F#4,"' DC. %antalla eliminar acta$
ii$ !liminar acta$
F#4,"' DD. %antalla eliminar acta$
@=
!l proceso a seguir para modi'icar una acta es el siguiente:
i$ Seleccione de una lista de actas creadas la #ue desea modi'icar$
F#4,"' DE. %antalla modi'icar acta$
ii$ Ingrese la in'ormacin #ue desea cam&iar$
F#4,"' DG. %antalla modi'icar acta$
!l proceso a seguir para modi'icar un compromiso es el siguiente:
i$ Seleccione de una lista el acta #ue contenga el compromiso #ue desea
modi'icar$
F#4,"' D!. %antalla seleccin modi'icar compomiso$
@>
ii$ Ingrese los datos #ue re#uiera cam&iar$
F#4,"' DI. %antalla modi'icar compromiso ingreso in'ormacin$
!l proceso a seguir para retirar un participante es el siguiente:
i$ Seleccione de una lista el acta #ue contenga el participante #ue desea
retirar$
F#4,"' DF. %antalla seleccin retirar participante$
ii$ !scoja el participante a retirar$
F#4,"' E. %antalla retirar participante$
@@
!l proceso dentro de la aplicacin #ue implementa A*A+ para la creacin de un
acta es:
!legir crear el acta y a-i mismo puede ir ingresando el nom&re, escoge la
'ec-a, ingresa la descripcion si lo desea, elige agregar tema, participante o
compromiso, asigan los compromisos a los participantes y guarda el acta$
F#4,"' EB. %antalla creacion acta$
@M
!l proceso dentro de la aplicacin #ue implementa A*A+ para consultar un acta es:
i$ Seleccionar un acta de las creadas con anterioridad$
F#4,"' E2. %antalla seleccin consulta acta$
ii$ 2onsultar acta$
F#4,"' EC. %antalla consulta acta$
@L
!l proceso dentro de la aplicacin #ue implementa A*A+ para 'irmar un acta es:
F#4,"' ED. %antalla seleccin 'irmar acta$
ii$ Firmar el acta$
F#4,"' EE. %antalla seleccin 'irmar acta$
@N
!l proceso dentro de la aplicacin #ue implementa A*A+ para eliminar un acta es:
F#4,"' EG. %antalla seleccin eliminar acta$
ii$ !liminar el acta$
F#4,"' E!. %antalla eliminar acta$
MK
!l proceso dentro de la aplicacin #ue implementa A*A+ para mo'icar un acta es:
F#4,"' EI. %antalla seleccin modi'icar acta$
ii$ Modi'icar el acta$
F#4,"' EF. %antalla modi'icar acta$
!l proceso dentro de la aplicacin #ue implementa A*A+ para modi'icar un
compromiso es:
i$ Seleccionar un acta de las creadas con anterioridad #ue tenga el
compromiso asignado #ue se va a eliminar$
F#4,"' G. %antalla seleccin modi'icar compromiso acta$
M9
ii$ Modi'icar el compromiso$
F#4,"' GB. %antalla modi'icar compromiso$
!l proceso dentro de la aplicacin #ue implementa A*A+ para mo'icar un acta es:
i$ Seleccionar un acta de las creadas con anterioridad la cual tenga asignado
el usuario #ue va a retirar$
F#4,"' G2. %antalla seleccin retirar usuario acta$
ii$ 0etirar usuario arrastrando el #ue se desee retirar$
F#4,"' GC. %antalla retirar usuario$
2omo se pudo o&servar el proceso con A*A+ 'ue reali,ado en un slo paso por#ue
no -u&o la necesidad de pasar de ventana en ventana ingresando la in'ormacin,
cuando A*A+ o'rece la posi&ilidad de agregar o eliminar una opcin unicamente
M;
-aciendo clic so&re el linE correspondiente$
M<
F MANUALES
F.B. M'(,'* 3- #($%'*'6#5( '.*#6'6#5( $#( AJAX
%ara la instalacin de la aplicacin se de&en seguir los siguientes pasos:
9$ !n caso de no tener el D"MS %ostgreSCL vL$; de&er5 reali,ar la instalacin
mediante el arc-ivo ejecuta&le H%rogramascpostgres#l8L$;$<89cpostgres#l8
L$;8int$msiI #ue viene dentro de este 2D801M$
7ota: el usuario para la &ase de datos de&e ser postgres y la contrase?a
de&en ser los nDmeros del uno al oc-o H9;<=>@MLI$
na ve, terminada la instalacin de&er5 ejecutar los scripts u&icados en la
carpeta Scripts "D #ue le permitir5n crear la &ase de datos y las ta&las #ue
la componen$ Ademas, de reali,ar algunas inserciones en ta&las #ue est5n
por 'uera del manejo de la aplicacin$
;$ !l siguiente paso es la instalacin del servidor de aplicaciones, el servidor
seleccionado para esta aplicacin 'ue el Apac-e 3omcat v>$> en caso de no
tenerlo instalado de&er5 reali,ar la instalacin mediante el arc-ivo
ejecuta&le H%rogramascapac-e8tomcat8>$>$;<$exeI #ue viene dentro de este
2D801M$
na ve, terminada la instalacin de&er5 &uscar dentro de la carpeta #ue
seleccion para la instalacin, la carpeta (e&apps y copiar el arc-ivo
gestion$(ar #ue se encuentra en la carpeta Aplicaciones dentro de este 2D8
01M: tam&i.n, de&er5 incluir el *D"2 y el *D"2 de %ostgreSCL, #ue se
guardan en una carpeta al momento de instalarlo,$ %uede encontrarlos en la
ruta instalacionc%ostgreSCLcL$;cjd&ccpostgres#l8L$;8>K=$jd&c<$ !ste arc-ivo
de&er5 copiarlo dentro de la carpeta de ruta instalacin
3omcatccommoncli&$
<$ !l Dltimo paso para poder ejecutar la aplicacin es a&rir el navegador e
M=
ingresar la ruta: -ttp:RRlocal-ost:LKLKRgestion, para poder acceder a la
aplicacin con uno de los usuarios #ue se encuentran en el script de
inserciones usado anteriormente$
=$ !sta aplicacion 'ue desarrollada -aciendo uso del ID! 7et&eans >$>$ Si
desea ver el proyecto, desde este ID!, de&er5 tenerlo instalado en su
e#uipo o usar el arc-ivo ejecuta&le H%rogramascjdE89[>[K[998n&8>[>8(in8
ml$exeI #ue viene dentro de este 2D01M para a&rirlo vaya a 'ile 88d open
project y seleccione la ruta Aplicacioncgestion$
7ota: !n caso de no poder a&rir los documentos, este 2D801M viene con el
arc-ivo instalador #ue permite visuali,ar arc-ivos $doc, $pd' y $odt, entre
otros$ Los arc-ivos en 'ormato $odt tienen su copia correspondiente en
'ormato $pd', con el 'in de evitar inconvenientes$
F.2. M'(,'* 3- #($%'*'6#5( '.*#6'6#5( 6+( AJAX
Los siguientes pasos lo guiar5n en la instalacin de la aplicacin para el control y
creacin de actas con el uso de A*A+$ Los pasos son los mismos: la di'erencia
radica en #ue uno de los 'rame(orEs usados H"acE&aseI de&e ser copiado en la
carpeta (e&apps de 3omcat$
M>
B. CONCLUSIONES
2omo resultado se puede concluir #ue A*A+ como conjunto de tecnologas o'rece
muc-as ventajas so&re las aplicaciones convencionales, ventajas #ue van
relacionadas con la 'acilidad para el manejo de las aplicaciones, la presentacin de
las mismas, la transmisin de datos #ue se disminuye -asta en un NK`, ya #ue el
nDmero de varia&les de sesin$ %or ejemplo, para la creacin un acta de dos temas
y un compromiso, la cantidad de varia&les de sesin es igual a die,, una por cada
campo #ue pueda presentar errores$
Durante el proceso de la creacin del acta, se de&e pasar por di'erentes *S%,
por#ue -ay campos #ue se crean dinamicamente, lo #ue implica #ue exista una
vari&ale de secin #ue sea capa, de almacenar los cam&ios para mantener la
consistencia de la in'ormacin$ %ara ello, se re#uiere de llamadas al servidor,
trans'erencia de datos a trav.s del canal y un proceso de programacion de mayor
complejidad: mientras #ue en A*A+, este proceso se reali,a en una sola p5gina,
como si 'uera una aplicacin de escritorio, es decir, se puede -acer modi'icando la
estructura de la p5gina localmente$
La aplicacin con A*A+ adem5s de ser mejor en rendimiento, tam&i.n permite #ue
el desarrollador tenga mayor granularidad de la misma, aislando di'erentes
componentes en capas m5s especiali,adas$ !s decir, para la aplicacin reali,ada
sin A*A+, se encontra&a una ar#uitectura de tres niveles:
i$ %resentacin: Donde se encontra&an las *S%]s$
ii$ Lgica: 2ontiene toda la lgica del negocio$
iii$ %ersistencia: %resenta la comunicacin con medio persistente H"ase de
DatosI$
%ara la aplicacin reali,ada con A*A+ .sta estructura de tres niveles persiste$ Sin
em&argo, la capa de presentacin puede ser dividida en varias su&capas$
M@
i$ 2omponentes 6r5'icos: !l aspecto de la aplicacin ya no es manejado
dentro de las *S%]s como atri&utos de las eti#uetas se -ace mediante /ojas
de !stilo 2SS, permitiendo un mayor control en el aspecto gr5'ico glo&al de
la aplicacin$
ii$ Lgica del lado del 2liente: !ste aspecto es manejado con *avascript, se
&usca tener una consistencia en la in'ormacin y, para .sto, toda la
in'ormacin #ue el cliente ingresa se veri'ica antes de ser enviada$
A*A+ est5 siendo usada por varias de las principales compa?ias )e& del mundo$
De nada servira esta tecnologia si no se empleara para este tipo de desarrollos,
espec'icamente en lo #ue se re'iere a las aplicaciones )e&$
MM
BB. RECOMENDACIONES
A*A+ es una tecnologa en auge con un crecimiento acelerado #ue trae consigo
nuevos 'rame(orEs de desarrollo, se recomienda reali,ar un estudio m5s pro'undo
de .stos, ya #ue pueden proveer 'uncionalidades #ue desde K pueden tomar
semanas$
Dentro del proceso de investigacin se encontraron varios 'rame(orEs de A*A+
#ue utili,a&an una tecnologa desarrollada por Sun Microsystems, conocida como
*ava Server Faces$ Dentro de esta investigacin, se plante la posi&ilidad de usarla
sin em&argo, pareca poco conveniente reali,ar un tutorial de dos temas, ya #ue
podra dispersar o desmotivar al lector, no o&stante se recomienda ver las
'uncionalidades conjuntas #ue pueden tener am&as tecnologas$
A*A+ a pesar de la cantidad de &ene'icios #ue tiene no es recomenda&le para
todas las aplicaciones, ni todos los usuarios: .sto de&e ser claro para los
desarrolladores interesados en el tema, las aplicaciones tienen #ue ser creadas
pensando en los usuarios y en sus necesidades, pero sin dejar de lado el costo
para el desarrollador$
%ara muc-os usuarios Ha#uellos #ue se reusan al cam&ioI puede ser con'uso no
tener #ue -acer clic en un &oton y ver #ue slo un sector de la p5gina se recarga
por no ir lejos, m5s cuando usualmente A*A+ no in'orma del estado de las
peticiones #ue est5n corriendo de 'orma asincrnica$
Muc-a de la in'ormacin #ue se o&tiene de A*A+, no es m5s #ue una serie de
'uncionalidades dentro de li&rerias *avascript$ A*A+ no es *avascript y *avascript
no es A*A+ es solamente una m5s de las tecnologas #ue lo componen, sin
em&argo -ay #uienes tienen esa erronea idea$
Muc-os de las principales empresas #ue reali,an sus aplicaciones con A*A+, como
es el caso de 6oogle y Ba-oo, #ue tienen 'rame(orEs de esta tecnologa$ Se
recomienda darle una revisin a estos 'rame(orEs$
ML
BIBLIOGRAFA

AD1"!, La&s$ Spry$ ;KK@ H2onsultado 9 1ct$, ;KK@I$
-ttp:RRla&s$ado&e$comR(iEiRindex$p-pRSpry
Aplicaciones )e&$ ;KK> H2onsultado ;M de Sep$, ;KK@I$
-ttp:RRdis$um$esR_j&ermude,RdadRtransparenciasR3;8Aplicaciones8
(e&K>K@$pd'Ssearc-T`;;3;8Aplicaciones8(e&K>K@$pd'`;;$2
ASL!SS17, 0yan, S2/33A, 7at-aniel$ Foundations o' A*A+$ 7e( BorE:
!stados nidos$ Apress$ ;KK@$ ;N@ p$
"A24"AS!, )-itepaper$ ;KK@ H2onsultado ;@ Sep$, ;KK@I$
-ttp:RR((($&acE&ase$comRdo(nloadR)-itepaper[*ava[!dition$pd'
"A02IA, Diego$ FCu. es 2SSG, 7ov$ ;KK< H2onsultado ;> Sep$, ;KK@I$
-ttp:RR((($maestrosdel(e&$comReditorialRintrocssR
"A00I1S, *uan$ M10!71, *ose$ *ava Servlets$ 7ov$ ;KK9 H2onsultado 9K de
1ct$, ;KK@I$
-ttp:RR((($dcc$uc-ile$clR_j&arriosRservletsRvida$-tml$
"112/, 6rady$ 0M"A6/, *ames$ *A21"S17, Ivar$ !l Lenguaje uni'icado de
modelado$ %ag$ ;N
"S2/MA77, FranE$ %attern 1riented So't(are Arc-itecture, Oolume 9: A
System o' %atterns, ed$: )illey Z Sons, 9NN@$
2A0D!7AS, Lola$ 6A02IA, *oa#un$ 2onceptos &5sicos$ H2onsultado ;> Sep$,
;KK@I$ -ttp:RR((($(e&estilo$comRjavascriptRjsKK$p-tml
2L!A071OA$ 3-inE2A% *+ 1vervie($ ;KK@$ H2onsultado ;= Sep$, ;KK@I$
-ttp:RR((($clearnova$comRpu&licR3-inE2A%[*+[1vervie($pd'
6ALOIS, Alvaro$ Ingenieria de so't(are educativo$ 9 !d$ "ogot5$ 7IA7D!S$
MN
9NN;$ ;K p$
20A7!, David, %AS2A0!LL1 !ric$ A*A+ in Action$ 6reen(ic-, !stados nidos$
;KK@$ @L9 p$
DA3A Z 1&ject Factory$ 2ommand Design %attern$ ;KKK H2onsultado 9> !ne$,
;KKMI$ -ttp:RR((($do'actory$comR%atternsR%attern2ommand$aspx
6!3/LA7D, *ustin, 6AL"0AI3/, "en$ %ragmatic A*A+$ !stados nidos$ ;KK>$
;9>$ p
6116L!, 6oogle )e& 3oolEit %roduct 1vervie($ ;KK@ H2onsultado ;@ Sep$, de
;KK@I -ttp:RRcode$google$comR(e&toolEitRovervie($-tml
60!610B, Murray, "ALL, *enni'er$ Including A*A+ Functionality in a 2ustom
*avaserver Faces 2omponent$ ;KK@ H2onsultado en 9M Sep$, ;KK@I$
-ttp:RRjava$sun$comRjavaeeRjavaserver'acesRajaxRtutorial$jsp
63I!00!U, A&ra-am$ "0AOA, 6ines$ %/% > a trav.s de ejemplos$ *unio de
;KK>$ ed$ Al'aomega$ ;9 p$
I73!07!3 S12I!3B$ /ypertext 3rans'er %rotocol 0F2 ;K@L$ *un$ 9NNN
H2onsultado ;9 Sep$ ;KK@I$
-ttp:RR((($(<$orgR%rotocolsRr'c;@9@Rr'c;@9@8sec9$-tmlSsec9
4AM3/AM, %anEaj$ 26I Security$ ;KK> H2onsultado ;N de 1ct$, ;KK@I$
-ttp:RR((($irt$orgRarticlesRjs9L=Rcgi$gi'
LA0MA7, 2raig$ ML y %atrones una introduccin al an5lisis y dise?o orientado
a o&jetos y al procesdo uni'icado$ Madrid:!spa?a$ %earson ;KK<$
LA%!U, de Ipi?a Diego$ 2urso A*A+$ ;KK> H2onsultado 9N Sep$, ;KK@I$
-ttp:RRp5ginaspersonales$deusto$esRdipinaRajaxR2ursoA*A+$pd'
M2LA6/LI7, "rett$ A*A+ 3utorial$ ;KK> H2onsultado 9L Sep$, ;KK@I$
-ttp:RR((($yaldex$comRFS3utorials$-tm
MA"10A4 Ste-en$ 3utorial de A*A+ HAsync-ronous *avascript Y +MLI$ ;KK>
LK
H2onsultado en Sep$ 9@ de ;KK@I$
-ttp:RR((($mononeurona$orgRindex$p-pGidpT>=M
MX1U, Alejandro$ Mini8tutorial de A*A+$ ;KK> H2onsultado 9L Sep$, ;KK@I$
-ttp:RRso'anaranja$comR;KK>RKLR;=Rmini8tutorial8de8ajaxR
7A6/317, %atricE$ *ava Applets !structura$ H2onsultado ;; de Sep$, ;KK@I$
-ttp:RRdocencia$udea$edu$coRcciRjavaR!structura$-tml
7!3S2A%! 2ommunications 2orp$ 2ore *avascript 6uide 9$>$ ;KKK$
H2onsultado ;M Sep$, ;KK@I$
-ttp:RR(e&$arc-ive$orgR(e&R;KK=K;999N>K<9Rdevedge$netscape$comRli&raryR
manualsR;KKKRjavascriptR9$>Rguide
%13I+, 2orporation$ Simply 0ic- U4 %roduct 1vervie($ !ne$ ;KK@ H2onsultado
9 1ct$, ;KK@I$ -ttp:RR((($,Eoss$orgRdocRU48(p8prodov($pd'
Cue son los MIM! 3B%!S$ ;KK> H2onsultado ;; Sep$, ;KK@I$
-ttp:RR((($diginota$comRtrucos8y8tutorialesR#ue8son8los8mime8types88;$-tml
S3!O!7, 2arauna$ Learn A*A+ &y !xample$ ;KK@ H2onsultado 9@ Sep$, ;KK@I$
-ttp:RR((($ajaximpact$comRajaximpact$p-pGnT9KZidT9;@Z&acETRdetail[3uto
rials[id[9;@[Ajax[Learn[Ajax[&y[example$-tml
S31%F10D, Andre($ 6ua Avan,ada %rogramacin %/% para )indo(s$ Madrid,
!spa?a$ %rentice /all$ ;KK<$ <9L p$
S7, Microsystems$ 2ore *;!! %atterns \ Data Access 1&ject$ ;KK9
H2onsultado 9> !ne$, ;KKMI$
-ttp:RRjava$sun$comR&lueprintsRcorej;eepatternsR%atternsRDataAccess1&ject$-
tm
S7, Microsystems$ 2ore *;!! %atterns 8 Front 2ontroller $ ;KK9 H2onsultado
9> !ne$, ;KKMI$
S7, Microsystems$ *ava "lue%rints Model8Oie(82ontroller$ ;KKK H2onsultada
9> !ne$, ;KKMI$
-ttp:RRjava$sun$comR&lueprintsRpatternsRMO28detailed$-tml
L9
3AMAB1, Mario$ Serie aprender a investigar \ Modulo >$ < !d$ "ogot5$ I2F!S$
9NNN$ ;<M p$
)<2$ /3ML =$K9 Speci'ication$ 9NNN H2onsultado ;9 de Sep$, ;KK@I$
-ttp:RR((($(<$orgR30R-tml=K9R
L;
ANEXOS
L<

Tutorial para El Desarrollo de Una Aplicacin Web en Ajax4576

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tutorial para El Desarrollo de Una Aplicacin Web en Ajax4576

Uploaded by

Copyright:

Available Formats

TUTORIAL PARA EL DESARROLLO DE UNA APLICACIN WEB EN AJAX

PARA LA CREACIN Y CONTROL DE ACTAS

La 'igura 9M muestra los di'erentes componentes de 6)3 lo cuales

You might also like