Informe Final Mtig11 Roy A. Justo

MTIG11Proyectofinal
UniversidadAutnomadeBarcelona.
DepartamentodeGeografa.
AudingIntraesaS.A.
Autor:
RoyA.JustoTorres
Tutores:
MiquelngelVargas(LIGIT)
FernandoL.Rodrguez(AudingIntraesa)
DISEO,DESARROLLOEIMPLEMENTACINDEUNAAPLICACINWEB
MAPPARALAVISUALIZACINYCONSULTADELOSPROYECTOS
EJECUTADOSPORAUDINGINTRAESA
InformeFinal(Febrero,2010)
MsterenTecnologasdelaInformacin
Geogrfica.(LIGIT)11Edicin.
Diseo,DesarrolloeImplementacindeunaAplicacinWebMapparalaVisualizaciny
ConsultadelosProyectosEjecutadosporAudingIntraesaS.A.
Agradecimientos
Estatesisdemaestra,sibienharequeridodelaperseveranciayelesfuerzodedicadoporel
autor, no hubiese alcanzado sus objetivos sin la colaboracin y el entusiasmo mostrado por
muchaspersonas.Enestesentidomepermitodedicaresteespacioparamencionaratodoslos
que de alguna forma se han visto involucrado en este proyecto y que sirva para mostrar mi
agradecimiento por el inters expresado y el tiempo dedicado para que todo saliera con la
mayorcalidad.Estaspersonasson:
MiquelngelVargas,tutordeestetrabajoporlapartedelLIGIT.
FernandoL.Rodrguez,tutorporlapartedeAudingIntraesaS.A.
Todoslosprofesoresyestudiantesdelaoncenaedicindelmsterentecnologasde
lainformacingeogrfica.
El departamento de Gestin de la Informacin Territorial de AudingIntraesa S.A.,
principalmenteaThasLimaNemer.
YmuyespecialmenteaIgnacioFerreroBeatoporsuinvaluableayuda,suintersypor
todaslashorasdedicadasaesteproyecto.
Amodopersonalquisieraexpresarmiinfinitoagradecimientoatodoslosfamiliaresyamigos
quehanapoyadoincondicionalmentemisproyectos,ysinloscuales,nohubiesesidoposible
llegaraestepuntodelcamino.Muchasgraciasatodos.!!!
Resumen
Este trabajo consiste en la creacin de una aplicacin WEBMAP para la consulta de

informacinreferentealosproyectosejecutadosporlaempresaAudingIntraesaS.A.Setrata
demostrarenunmapalalocalizacindecadaproyectoylainformacinasociadaaestos.
Para desarrollar esta aplicacin se realiz un anlisis de los requerimientos bsicos, las
funcionalidadesdeseadas,lainformacinpreviaylosinteresescorporativos.
A partir de esto efectu un proceso de seleccin tecnolgica con el fin de identificar la ms
adecuada a los requerimientos de la empresa. La aplicacin proyectada ha requerido un
sistema de gestin de bases de datos, un servidor web y un entorno de desarrollo de la
aplicacin. En este orden se seleccionaron, MySQL, HTTPApache y AdobeFlex. Estas
tecnologas,ademsdesucarctergratuitoyabierto,estnavaladasporsuextensadifusin
enelmercadoyporlagrancantidaddeusuariosquetiene.
Una vez alcanzado este nivel se planific el desarrollo del trabajo en tres grandes fases. La
primeraqueinvolucrabalainstalacinyconfiguracindelatecnologa,ascomoeldesarrollo
delabasededatos.Unasegundafasedondesediseaysedesarrollalainterfazdeusuarios,y
finalmenteunaterceradondesedotadefuncionalidadalaaplicacinparasupublicacinfinal.
Se dise el modelo de base de datos que recoge la informacin con carcter comercial
orientada a la divulgacin. Como parte del tratamiento de los datos fue necesario aadir la
componente espacial a cada registro, incluyendo en cada caso las coordenadas geogrficas
(latitud y longitud) para su visualizacin en GoogleMaps. Tambin se recopilaron las fichas
tcnicaselaboradasporlaempresaparacadaproyectodondesedescribensuscaractersticas
principales, con el objetivo de que estas pudieran ser consultadas a travs de la aplicacin
desdeundirectoriopblico.
Posteriormente se dise la interfaz de usuario partiendo de los siguientes criterios bsicos:
mantener la imagen corporativa, que fuera intuitiva, amigable, eficiente y atractiva. Se
desarrollunaherramientadebsquedaenunprimernivelqueguaalusuarioaobteneruna
lista de proyectos ejecutados dentro de un rea de trabajo, un tema especifico de trabajo y
finalmente una tipologa determinada. Con este resultado se puede realizar un nuevo filtro
paraobtenernuevaslistasenfuncindelaoapartirdelcualsequiereconsultarlosproyectos
visualizados.Almismotiempoaparecenenunmapalalocalizacinasociadaacadaproyecto.
Tanto de esta lista, como de su smbolo correspondiente en el mapa, se puede acceder a la
informacinespecficadecadaunodelosproyectos.
SeutilizoelAPIdeGoogleMapsparaFlash.Tantolatecnologadeservidorydeconsultade
mapas e imgenes que ofrece Google Maps, as como las posibilidades de las libreras
desarrolladas por Flex, permitieron una gran calidad y eficiencia en el proceso de consulta y
visualizacin.Cubriendoas,unodelosmsimportantesrequerimientosestablecidos.
Para dotar de la funcionalidad requerida a la aplicacin, se desarrollaron un conjunto de
rutinasenActionScript3.Estasfuncionalidadesincluyenlaconsultayactualizacinentiempo
de ejecucin de la informacin mostrada en la interfaz, la consulta y descarga de ficheros
externos en formato PDF, la fcil navegacin por el mapa con capacidades de zoom, pan,
cambiodecartografasyelrpidoaccesoalainformacindeseada.
La aplicacin dot a la empresa de un modelo de base de datos unificada y homognea
orientada a la divulgacin de la informacin con carcter comercial de los proyectos
ejecutados.Mejorlacapacidaddedivulgarydistribuirdeformaatractivaeficienteymasiva
el trabajo desempeado desde su fundacin. Optimiz la comunicacin con los clientes. Y,
permiti la implantacin de nuevas tecnologas para la administracin y divulgacin de su
informacindendolecomercial.
Finalmente se proponen un conjunto de recomendaciones a modo de mejoras, que no
pudieronserdesarrolladaseneltiempoprevistoparaesteejercicioacadmico.
Palabras claves: Google Maps, Adobe Flex, AS3, MySQL, PHP, Visor WebMap, Sistemas de
InformacinGeogrfica,RIA,Aplicacioneswebenriquecidas.
Abstract
ThisProjectisbasedondevelopaWEBMAPapplicationsoasuserswouldbeabletoconsult
informationrelatedtoprojectsexecutedbyAudingIntraesaS.A.Mainlyconsistonshowingin
amapeveryprojectlocatedonitsgeographiccontext,andatoolforaccesstotheinformation
relatedtoeachofthem.
Tomakethisdone,itwasnecessarytoanalyzecorporationdemandstogetfulfillduringthe
developmentprocess.Technologicalplatformsselectedtoworkwithwere,MySQLforserver
technology,HTTPApacheforWebservertechnologyandAdobeFlexBuilder3forIDE(stand
for Integrated Development Environment). All of them are very widespread technologies,
widelyusedanddocumentedintheWorldWideWeb.
Atthislevel,theprojectwasplannedtobecarriedoutinthreephases.Thefirstoneinvolves
the setting up and configuration process and, designing database structure. Next dealt with
designing user interface, and the last one, had to do with providing of behavior and
functionalitytheApplication.
Itwascollectedattractiveinformationfromthemarketingpointofview,PDFfilescreatedby
the enterprise for describing projects, geographical coordinates for every project among
others.
Userinterfacewasdesignedaccordingtoenterpriseimageconcept.Interactivecomponentsin
the web application pretended to be intuitive, short timeconsuming and easy to use.
Communication flow between user and application is summed up in three steps. First one,
guide the user to select a framework area where projects belong to, next a second level of
filterguideusertoselectaspecificthemeofworkamongareaselectedbefore,andfinallya
typology filters that are provided a list of projects titles because of the previous consulting
criteria.Thislistcanalsobefilteredbytheyearfromwhichdesireprojects,wereassignedto
thecorporation.Atthesametimethatmentionedlistisfilled,themapshowspatiallocations
relatedtoeachprojectshown.
ThisWebApplicationallowsuserstoconsultinformationrelatedtoservicesprovidedbythe
enterpriseinanattractiveway.Also,allowuserdownloadprojectsprofiles,andinteractwith
the map. This work provides AudingIntraesa with a solid central project database for
marketing. Also, provide a way to show its influence on the market and to implement new
technologiestodistributeitsinformation.
Somerecommendationsareprovidedattheendofthispaperwork,inordertoimprovewhat
couldntbedoneduringthisproject.
ndice
INTRODUCCIN..................................................................................................................................1
CAPTULOI.MARCOTERICOMETEDOLGICO..................................................................................4
CAPTULOII.PLATAFORMATECNOLGICA.........................................................................................7
II.1Anlisisdelainformacindepartida.....................................................................................................7
II.2Fundamentacinyrequerimientostecnolgicos...................................................................................9
II.3Desarrollodelaestructuradelabasededatos...................................................................................15
CAPTULOIII.DISEODELAINTERFAZDEUSUARIO...........................................................................17
III.1DiseodelclientewebconelAPIdeGoogleMapsparaFlash...........................................................17
III.2Conexinentreelclientewebylabasededatos...............................................................................19
III.3Estructuraypersonalizacindelclienteweb......................................................................................21
CAPTULOIV.DESARROLLOEIMPLEMENTACINDELAAPLICACIN.................................................27
IV.1Estructurayfuncionamientodelaaplicacin.....................................................................................27
IV.2Modelolgicodedesarrollo...............................................................................................................31
IV.3Caractersticasdepuestaenmarchayrendimientodelaaplicacin.................................................36
CONCLUSIONES.................................................................................................................................38
RECOMENDACIONES.........................................................................................................................39
BIBLIOGRAFIA...................................................................................................................................40
ANEXOS............................................................................................................................................41
ndicedefigurasytablas
FIGURAS:
FIGURA1:Plandetrabajo..................................................................................................................5
FIGURA2:Fasesdelproyecto..............................................................................................................6
FIGURA3:Esquemadefuncionamientodelatecnologaempleada.....................................................11
FIGURA4:Panelbuscador..................................................................................................................22
FIGURA5:Panelproyectos.................................................................................................................22
FIGURA6:Ventanadeinformacin.....................................................................................................22
FIGURA7:Estructuradelainterfazdeusuario....................................................................................23
FIGURA8:EstructuradeldiseodelpanelBuscador............................................................................24
FIGURA9:EstructuradeldiseodelpanelProyectos...........................................................................24
FIGURA10:EstructuradeldiseodeInfoWindow.mxml......................................................................25
FIGURA11:Diseodelencabezamientodelapginaweb...................................................................25
FIGURA12:Diseodelainterfazdeusuariodelaaplicacin................................................................26
FIGURA13:EstructuraparalacreacindelaaplicacinAudingSpatialsegnlalgicadedesarrollode
Flex...................................................................................................................................................28
FIGURA14:Modelolgicodedesarrollodelaaplicacin.....................................................................31
FIGURA15:EsquemadefuncionamientodeInfowindow.mxml...........................................................34
TABLAS:
TABLA1:ClasificacindelosproyectosejecutadosporAudingIntraesaS.A.enfuncindelmarcode
trabajodondeserealizan...................................................................................................................7
TABLA2:Tecnologasadoptadasparaeldesarrollodelaaplicacin.....................................................11
TABLA3:EstructuradelatablaProjauding,delabasededatosAuding_progis....................................15
TABLA4:Ficherosgeneradosporlaaplicacindeconexinabasededatos.........................................19
TABLA5:Componentesdelaaplicacinaudinig_spatial.mxml.............................................................29
TABLA6:MtodoscreadosdentrodelficheroProjauding.php,paralaconsultapersonalizadaalabase
dedatos............................................................................................................................................32
Introduccin
El uso de la web para la diseminacin de cualquier tipo de informacin susceptible a ser
representadaespacialmente,ademsderepresentarunsaltosignificativoeneldesarrollode
la cartografa, ha abierto innumerables oportunidades para muchas empresas. La posibilidad
decompartiryactualizarinformacinenuncontextogeogrfico,personalizarelcontenidode
los mapas e identificar patrones de distribucin espacial en el comportamiento de los
negocios,sonsoloalgunasdelasventajas.
Enlosltimosaoslaindustriageoespacialhadesarrolladocuantiososproductosenfuncin
delascrecientesnecesidadesdelmercado.Hoyendaasistimosalaemergenciadeunanueva
serie de herramientas cartogrficas onlinede bajo coste como Google Earth y Google Maps,
NASAWorldWind,YahooMapsentreotros.Laventajacomercialestrelacionadaconlagran
masa de usuarios que consultan estos productos y con las posibilidades de desarrollo y
personalizacin que brindan muchos de estos proveedores de servicios geoespaciales. El
desarrollo de APIs, permite a los usuarios personalizar sus mapas, desarrollar entornos de
consultas,publicaractividadesyservicios,eincrementarlacomunicacinconlosclientes.
Desdesufundacin,en1979,Audingproporcionaasusclientesunaextensagamadeservicios
profesionalesdeingenierayconsultora,relacionadosconelestudio,definicinyejecucinde
lasinfraestructurasylosserviciospblicos.Entodoesteperiodoestaempresahaacumulado
unagranexperienciaascomomayorampliacindesuinfluenciaenelmercadoreflejadaenla
gran cantidad de proyectos realizados en diferentes mbitos geogrficos. Su reciente fusin
conIntraesaS.A.consolidaaunmssuposicindentrodelmbitoempresarialdelaIngeniera
CivilenEspaa.Enelprocesodediversificacindeserviciosquehaexperimentadolaempresa,
se cre el departamento de Gestin de la Informacin Territorial, que se ocupa de la
problemtica territorial y est orientado a la ejecucin de proyectos SIG en funcin de las
necesidadesespecficasdecadacliente.Enestemarcorealizaunagestinglobalquevadesde
la consultora a la integracin de sistemas, pasando por el desarrollo de aplicaciones
personalizadasylaformacinymantenimientodelosproductosimplementados.Desdeeste
departamento surge la iniciativa de crear una aplicacin orientada a divulgar de forma
interactivayactualizada,elcampodeinfluenciadelaempresa.Sebasafundamentalmentey
generar una aplicacin Web que muestre la localizacin de cada proyecto ejecutado por
AudingIntraesaS.A.yasuvez,ofrezcainformacinsobrelaspeculiaridadesdecadaunode
ellos.
La idea principal es que lo los usuarios, ya sean clientes reales o potenciales, o personas e
instituciones interesadas en el tema, puedan acceder de manera eficiente y sencilla a un
conjuntodeinformacionesrelacionadasconcadaproyectodesarrolladoporestaempresa.Los
usuariospodranteneraccesoainformacinsobreeltitulodecadaproyecto,enquemarcode
trabajo se encuentra adjudicado, informacin relacionada con las fechas de inicio y
Introduccin 1
finalizacin,importeetc.Tendrnademslaposibilidaddedescargarunafichatcnicadecada
proyectosiaslodesean.Labsquedaenfuncindelalocalizacin,ydelaespecialidadenque
se encuentra enmarcado cada proyecto, permitir orientar rpidamente a los usuarios en
funcindesusintereses.Estaaplicacinaportaraunabasededatoscoherenteycentralizada
de los proyectos realizados por AudingIntraesa desde su fundacin, creara las bases
tecnolgicasparalacreacindeunaherramientacorporativaparalagestindelainformacin
sobrelosproyectos,yofrecerunavisinsobreladistribucinespacialdelcampodeaccinde
laempresa.
Es en este marco que envuelve al departamento de Gestin de la Informacin Territorial de
AudingIntraesa S.A, en cooperacin con el Laboratorio de Informacin Geogrfica y
Teledeteccin (LIGIT) del departamento de Geografa de la Universidad Autnoma de
Barcelona(UAB),dondeserealizaesteproyecto.
Este informe constituye el trabajo final para optar por titulo de mster en tecnologas de la
informacingeogrfica,ydescribelasparticularidadesdelprocesodediseoydesarrollodela
aplicacin,quedandoestructuradoentrescaptulosquesedescribenacontinuacin.
CaptuloI.Marcotericometodolgico.
En este captulo se describe los fundamentos tericos metodolgicos del desarrollo de la
aplicacin.Sedefineelobjetivoprincipal,lastareasejecutadasparaalcanzaresteobjetivo,los
requerimientos necesarios, as como particularidades del proceso de planificacin y
organizacinenlaejecucindetodoeltrabajo.
CaptuloII.PlataformaTecnolgica
En este captulo se hace un anlisis de la informacin de partida. Se analiza tambin las
diferentesalternativastecnolgicasenfuncindelosinteresesdelaempresayapartirdeesto
se comenta las particularidades de la plataforma tecnolgica seleccionada, y finalmente se
explicacmofueestructuradalabasededatosdelaaplicacin.
CaptuloIII.Diseodelainterfazdeusuario.
Este captulo est enfocado en el desarrollo del cliente web, o sea, las caractersticas de la
interface de usuario. Se comenta las particularidades del desarrollo de este tipo de clientes
usandoalAPIdeGoogleMapsparaflash,comoseconectalaaplicacinclienteconlabasede
datosalojadaenelservidordedatos,yfinalmentecomosediseyseestructuroelcliente
WEB.
CaptuloIV.DesarrolloeImplementacindelaaplicacin.
En este captulo se hace nfasis en la lgica de programacin empleada y en la estructura
lgicadefuncionamientodelaaplicacin.Sedescribeesquemticamentecomofuncionacada
Introduccin 2
unodeloselementosquecomponenelproyectoengeneral.Yfinalmenteunavaloracinde
lascaractersticasdesuimplementacinyrendimiento.
El informe tambin contiene unas conclusiones generales y unas recomendaciones donde se
proponen mejoras a la aplicacin que en el periodo de tiempo establecido no se pudieron
elaborar.
Introduccin 3
CaptuloI.Marcotericometodolgico.
EstetrabajohasidorealizadoeneldepartamentodeGestindelaInformacinTerritorialde
AudingIntraesaS.A.comopartedeunconveniodecolaboracinconlaUniversidadAutnoma
de Barcelona. Este convenio permite acoger la realizacin del proyecto final del Mster en
Tecnologas de la Informacin Geogrfica, 11 edicin, organizado por el Departamento de
Geografa, y llevado a cabo por el Laboratorio de Informacin Geogrfica y Teledeteccin
(LIGIT).
Elobjetivofundamentales:Disear,DesarrollareImplementarunaaplicacinWebMappara
lavisualizacinyconsultadelosproyectosejecutadosporAudingIntraesaS.A.
Basado en este objetivo fundamental, la aplicacin estar dotada de las siguientes
funcionalidades.
1. Reunirenunabasededatoscentralizadatodalainformacindecarcterdivulgativo,
referentealosproyectosejecutadosporAudingIntraesaS.A.
2. Mostrarlosproyectosejecutadosporlaempresaenunmarcoterritorial,ascomola
informacinasociadaacadaunodeellos.
3. Consultadelabasededatosdesdeelclientesiguiendodiferentescriterios.
Estas funcionalidades deseadas implican la ejecucin de diferentes tareas tanto de carcter
organizativo,ascomodediseoydesarrollo.Sepuedenresumirenlassiguientes:
Anlisisdelainformacininicial.
Estudioypropuestadelaplataformatecnolgica
Instalacinyconfiguracindeunservidorwebyunservidordebasesdedatos.
Desarrollodelaestructuradelabasededatos.
Diseodelclientewebylainterfazdeusuario.
Conexindelabasededatosconelclienteweb.
Desarrolloypersonalizacindelasfuncionalidadesdelaaplicacin.
Publicacindelaaplicacin.
CaptuloI|MarcoTericoMetodolgico. 4
Afindeconcluirenelplazoestablecidosellevacabounplandetrabajoenmarcandocada
tareaenunperiododeterminadoparasuculminacin.(Figura1)
Figura1.Plandetrabajo
Fuente:elaboradoporelautor
Losbeneficiosqueresultarandeestaaplicacinseran:
a) Una base de datos unificada y homognea orientada a la divulgacin de informacin
concarctercomercialdelosproyectosejecutadosporlaempresa.
b) Localizacinespacialdecadaunodeestosproyectos.
c) Divulgacin y distribucin masiva, eficiente y atractiva de la informacin relacionada
conlosproyectosensumarcoterritorial.
d) Visincorporativadelainformacinrelacionadaconsusproyectos.
e) Mejoradelacomunicacinconlosclientes.
f) Implantacin de nuevas tecnologas y mejoras del proceso de administracin y
divulgacindelainformacin.
g) MayorPromocineltrabajodesarrolladoporAudingIntraesaS.A.
A modo organizativo, se puede resumir en tres grandes fases toda la labor realizada para
alcanzarelobjetivoprincipaldeestetrabajocomosemuestraenlafigura2.Cadaunadeestas
fasesdescribelosprocedimientosylascaractersticasprincipalesdelastareasrealizadas.
Figura2.Fasesdelproyecto.
CAPII.PLATAFORMATECNOLOGICA
Contenidodelcaptulo:
Anlisisdelainformacindepartida.
Fundamentacinyrequerimientostecnolgicos.
Desarrollodelaestructuradelabasededatos
I.1Anlisisdelainformacindepartida.
CadaunodelosproyectosejecutadosporAudingIntraesaS.A.tieneasociadounconjuntode
informacin que es de inters comercial y corporativo. Actualmente la informacin de los
proyectossegestionadesdeunaaplicacindesarrolladasobreVisualBasicyAcces.
Enestesentidolaempresahaadoptadolasiguienteclasificacinbasadaenseisgrandesreas
detrabajoyvariostemasdetrabajoasociadosacadaunadeestasgrandesreas.Elobjetivo
es normalizar la informacin de carcter divulgativo de los proyectos siguiendo esta
clasificacin.
Tabla1.ClasificacindelosproyectosejecutadosporAudingIntraesaS.A.enfuncindelmarcodetrabajodondese
realizan.
readeTrabajo
Temadetrabajo
InfraestructurasdelTransporte
Carreteras
Autopistas
Ferrocarriles
Metro
Tranva
Aeropuertos
AguayMedioAmbiente
Planificacinhidrolgica
Potabilizacinydesalacin
Depuracinyregeneracin
Hidrologaehidrulicafluvial
Ingenieraagroforestal
Impactoambiental
Energasrenovables
CaptuloII|PlataformaTecnolgica 7
readeTrabajo
Temadetrabajo
TecnologaeInstalaciones
Energa.Generacin,transformacinytransporte
Sistemaselectromecnicos
Sealizacinycontrol
Gestindeincidenciasyemergencias
SistemasdeTransporteInteligente
UrbanismoyEdificacin
Planeamiento
Infraestructurasurbanas
Parques
Polgonosindustriales
Edificacinresidencialypblica
EstructuraseIngenieradelTerreno
Puentes
Obrassingulares
Cimentacindeestructuras
Tnelesyobrassubterrneas
Tratamientosdemejoradelterreno
Estabilidaddetaludes
Consultora
Economadeservicios
Gestindeactivos
Participacinpblicoprivada
Gestindeinformacinterritorial
Controldeexplotacin
Auditoras
Asuvez,cadaunodeestosproyectostieneunaTIPOLOGAasociada.Clasificndoseas,segn
estecriterio,enproyectos,anteproyectos,estudios,direccindeobrasetc.Estajerarquadela
informacinpermiteestablecerfiltrosounaguaparasuconsulta.
Elrestodelainformacinestrelacionadaconcaractersticasparticularesdecadaproyecto,o
sea, las fechas de inicio y fin, el presupuesto adjudicado, el ttulo, el contratista o cliente, el
contextogeogrfico(comunidadautnoma,municipio,provincia,pas),elolosautoresentre
otros,yunasfichastcnicasconfotosydetallessobredichosproyectos.
I.2Fundamentacinyrequerimientostecnolgicos
Losrequerimientostecnolgicosparaeldesarrollodeestaaplicacinsepuedenresumirenlos
siguientes:
1. Unservidordebasesdedatos,ascomounaherramientaparasugestin.
2. UnservidorWeb
3. Unentornodedesarrollodelaaplicacin.IDE(Integrateddevelopmentenvironment)
Enelmercadoexisteunagrandiversidaddeproductosytecnologasquepuedenserusadas
paralograrlasfuncionalidadesqueserequierenparaestaaplicacin.Lossistemasdegestin
de bases de datos (SGBD) son software muy especficos desarrollados principalmente para
servir de interfaz entre las bases de datos y los usuarios y las aplicaciones. Su propsito es
manejar de manera clara, sencilla y ordenada un conjunto de datos que posteriormente se
convertirn en informacin relevante para una organizacin. Los SGBD existentes en el
mercadose puedendividiren tresgruposfundamentalesenfuncindesu coste.Existenlos
SGBD libre, los no libres y los no libres gratuitos. El SGBD escogido para este trabajo se
encentraenelprimergrupo.Msadelanteseexplicasusparticularidades,lasventajasdesu
usoycomosecomplementaconelrestodelastecnologasescogidas.Siesimportanteaclarar
que una premisa muy importante en la seleccin de la tecnologa era el carcter liberado y
gratuitodesuuso.
Unservidorwebesunprogramaqueestdiseadoparatransferirhipertextos,pginaswebo
pginasHTML(HyperText Markup Language): textos complejos con enlaces, figuras,
formularios,botones y objetos incrustados como animaciones o reproductores de msica. El
programa implementa elprotocoloHTTP(HyperText Transfer Protocol) que pertenece a la
capadeaplicacindelmodeloOSI.Eltrminotambinseempleaparareferirsealordenador
que ejecuta el programa. El Servidor web se ejecuta continuamente en un ordenador,
mantenindose a la espera de peticiones por parte de un cliente (un navegador web) y que
respondeaestaspeticionesadecuadamente,medianteunapginawebqueseexhibirenel
navegador o mostrando el respectivo mensaje si se detect algn error. Adems de la
transferencia de cdigo HTML, los Servidores web pueden entregar aplicaciones web. stas
son porciones de cdigo que se ejecutan cuando se realizan ciertas peticiones o respuestas
HTTP.Hayquedistinguirentreaplicacionesenelladodelclienteyenelladodelservidor.En
estecasoseusladelladodelclienteweb.Esteeselencargadodeejecutarlasenlamquina
delusuario.Sonlasaplicacionesdondeelservidorproporcionaelcdigodelasaplicacionesal
cliente y ste, mediante el navegador, las ejecuta. Es necesario, por tanto, que el cliente
disponga de un navegador con capacidad para ejecutar aplicaciones. Comnmente, los
navegadores permiten ejecutar aplicaciones escritas en lenguaje JavaScript y Java, aunque
puedenaadirsemslenguajesmedianteelusodePLUGINS 1 .Esfrecuenterequerirdeestos
complementosqueamplanlasfuncionesdelaspginaswebparavercontenidosinteractivos.
Un ejemplo conocido esFlashPlayerdeAdobe.Un complemento que carga animaciones
multimediayaplicacionesinteractivasdesdeelclienteweb.
Instalar un servidor web en nuestroPCpermite, entre otras cosas, poder montar nuestra
propiapginawebsinnecesidaddecontratarhosting,probarnuestrosdesarrollosvalocaly
accederalosarchivosdenuestroequipodesdeunPCremoto.
En el caso del entorno de desarrollo integrado para desarrollo de aplicaciones web existen
tambinmuchasenelmercado.Sinembargoenlosltimosaossehanvenidodesarrollando
unafilosofadedesarrollowebconocidocomoRIA(RichInternetApplications)oAplicaciones
deinternetenriquecidas.
Son aplicaciones web que tienen la mayora de las caractersticas de las aplicaciones
tradicionales.Estasaplicacionesutilizanunnavegadorwebestandarizadoparaejecutarsey
pormediodepluginsoindependientementeunavirtualmachineosandbox,seagregan
las caractersticas adicionales. Surge como una combinacin de las ventajas que ofrecen las
aplicacionesWebylasaplicacionestradicionales.Buscanmejorarlaexperienciadelusuario
NormalmenteenlasaplicacionesWeb,hayunarecargacontinuadepginascadavezqueel
usuariopulsasobreunenlace.Deestaformaseproduceuntrficomuyaltoentreelclientey
elservidor,llegandomuchasveces,arecargarlamismapginaconunmnimocambio.
EnlosentornosRIA,encambio,noseproducenrecargasdepgina,yaquedesdeelprincipio
se carga toda la aplicacin, y slo se produce comunicacin con el servidor cuando se
necesitandatosexternoscomodatosdeunaBasedeDatosodeotrosficherosexternos.
HaymuchasherramientasparalacreacindeentornosRIA.Entrelasmsusadassepueden
mencionar las plataformas Adobe Flash, Adobe Flex, de Adobe, Silverlight de Microsoft, la
trilogaHTML/JavaScript/Ajax,yOpenLaszloentreotros.
Enlasiguientetablasemuestralatecnologaadoptadaparacadacaso.Paraescogercadauna
setuvoencuentalosobjetivospropuestos,lascaractersticasdecadaunadeestastecnologas
ycomosecomplementancadaunadeellasentres,conelfindeoptimizarelrendimientoy
lasprestacionesdelaaplicacinfinal.
PLUGIN: Un complemento es una aplicacin que se relaciona con otra para aportarle una funcin nueva y generalmente muy especifica. Esta
aplicacin adicional es ejecutada por la aplicacin principal e interactan por medio de la API. Tambin se lo conoce como plugin
(del ingles "enchufable"), add-on(agregado), complemento, conector o extensin.
Tabla2.Tecnologasadoptadasparaeldesarrollodelaaplicacin.
TECNOLOGIA
SOFTWARE
ServidorWEB
HTTPApache
Sistemadegestindebasesdedatos
MySQL
AdministradorBasedeDatos
PHPMyAdmin
DesarrolloclienteWeb
AdobeFlex
APIGoogleMapsparaFlash
LENGUAJESDEDESARROLLO
9
Cliente:MXML,AS3.
Servidor:PHP,SQL.
Elesquemadefuncionamientoeinteraccinentreestastecnologassemuestraenlasiguiente
figura.
Figura3.Esquemadefuncionamientodelatecnologaempleada.
Fuente:Elaboradaporelautor.
A continuacin se describe las caractersticas principales de cada una de las tecnologas

utilizadas.
ServidorWEBHTTPApache
El servidor HTTP Apache es unservidor web HTTP decdigo abierto para
plataformasUnix(BSD,GNU/Linux, etc.),Windows, Macintoshy otras, que implementa el
protocolo HTTP/1.1y la nocin de sitio virtual. El servidor Apache se desarrolla dentro del
proyectoHTTPServer(httpd)delaApacheSoftwareFoundation.
Apache presenta entre otras caractersticas altamente configurables, bases de datos de
autenticacinynegociacindecontenido,perofuecriticadoporlafaltadeunainterfazgrfica
queayudeensuconfiguracin.Tieneampliaaceptacinenlared.Desde1996eselservidor
HTTPmsusado.Alcanzsumximacuotademercadoen2005siendoelservidorempleado
enel70%delossitioswebenelmundo.
Apache es usado primariamente para enviar pginas web estticas y dinmicas en la World
WideWeb.EselcomponentedeservidorwebenlapopularplataformadeaplicacionesLAMP,
juntoaMySQLyloslenguajesdeprogramacinPHP,Perl,Pythonentreotros.
Lamayorpartedelaconfiguracinserealizaenelficheroapache2.confohttpd.confsegnel
sistema donde se est ejecutando. Cualquier cambio en ste archivo requiere reiniciar el
servidor,oforzarlalecturadelosarchivosdeconfiguracinnuevamente.
LalicenciaApache(ApacheLicenseoApacheSoftwareLicenseparaversionesanterioresa2.0)
esunalicenciadesoftwarelibrecreadaporlaApacheSoftwareFoundation(ASF).Lalicencia
Apache (con versiones 1.0, 1.1 y 2.0) requiere la conservacin del aviso de copyrighty
eldisclaimer,peronoesunalicenciacopyleft,yaquenorequierelaredistribucindelcdigo
fuentecuandosedistribuyenversionesmodificadas.
Como cualquier otra de laslicencias de software libre, la Licencia Apache permite al usuario
delsoftwarelalibertaddeusarloparacualquierpropsito,distribuirlo,modificarlo,ydistribuir
versiones modificadas de ese software. La Licencia Apache slo exige que se mantenga una
noticiaqueinformealosreceptoresqueenladistribucinsehausadocdigoconlaLicencia
Apache.(Bib.c.h.)
SistemadeGestindeBasesdeDatosMySQL
MySQL es un sistema de gestin de base de datos relacional ymultiusuariocon ms de seis
millones de instalaciones. Es desarrollado comosoftware libre en un esquema de
licenciamiento dual por MySQL AB, una subsidiaria de Sun Microsystemsy sta a su vez
deOracleCorporation.
AlcontrariodeproyectoscomoApache,dondeelsoftwareesdesarrolladoporunacomunidad
pblica y elcopyright del cdigo est en poder del autor individual, MySQL es propietario y
est patrocinado por una empresa privada, que posee elcopyrightde la mayor parte del
cdigo.
MySQL es muy utilizado enaplicaciones web, comoDrupalophpBB, en plataformas
(Linux/WindowsApacheMySQLPHP/Perl/Python), y por herramientas de seguimiento de
errores como Bugzilla. Su popularidad como aplicacin web est muy ligada aPHP, que a
menudoapareceen combinacincon MySQL.MySQLesunabasededatosmuyrpidaenla
lecturacuandoutilizaelmotornotransaccionalMyISAM,peropuedeprovocarproblemasde
integridadenentornosdealtaconcurrenciaenlamodificacin.Enaplicacioneswebhaybaja
concurrencia en la modificacin de datos y en cambio el entorno es intensivo en lectura de
datos,loquehaceaMySQLidealparaestetipodeaplicaciones.
LenguajedeprogramacinPHP
Este es unlenguaje de programacininterpretado, diseado originalmente para la creacin
depginas webdinmicas. Es usado principalmente en interpretacin del lado del servidor
(serverside scripting) pero actualmente puede ser utilizado desde una interfaz de lnea de
comandos o en la creacin de otros tipos de programas incluyendo aplicaciones coninterfaz
grfica.
PHP es un acrnimo recursivo que significaPHP HypertextPreprocessor(inicialmente PHP
Tools,o,PersonalHomePageTools).FuecreadooriginalmenteporRasmusLerdorfen1994y
publicado bajo la PHP License. La Free Software Foundation considera esta licencia como
softwarelibre.
Generalmenteseejecuta enunservidorweb,tomandoel cdigoenPHP comosuentraday
creandopginaswebcomosalida.Puedeserdesplegadoenlamayoradelosservidoresweby
en casi todos los sistemas operativos y plataformas sin costo alguno. PHP se encuentra
instaladoenmsde20millonesdesitioswebyenunmillndeservidores,aunqueelnmero
desitiosenPHPhacompartidoalgodesupreponderantesitioconotrosnuevoslenguajesno
tan poderosos desde agosto de 2005. Es tambin el mdulo Apache ms popular entre las
computadorasqueutilizanApachecomoservidorweb.
EntornodedesarrollodelclienteWEB.AdobeFlex
Es un trmino que agrupa una serie de tecnologas publicadas desdemarzo de 2004por
Macromedia para dar soporte al despliegue y desarrollo deAplicaciones Enriquecidas de
Internet,basadasensuplataformapropietariaFlash.
Losprogramadorestradicionalesdeaplicacionesvencomoundesafoadaptarlametforade
laanimacinsobrelaplataformaconlacualfueoriginalmenteconstruidoFlash.Flexminimiza
elegantementeesteproblemaproveyendounflujodetrabajoyunmodelodeprogramacin
queesfamiliaralosdesarrolladoresdeaplicaciones.
FlexfueinicialmenteliberadocomounaaplicacindelaJ2EEobibliotecadeetiquetasJSPque
compilara el lenguaje de marcas Flex (MXML) y ejecutara medianteActionScript aplicaciones
Flash(archivosSWFbinarios).VersionesposterioresdeFlexsoportanlacreacindearchivos
estticosquesoncompilados,yquepuedenserdistribuidosenlneasinlanecesidaddetener
unalicenciadeservidor.
El objetivo de Flex es permitir a los desarrolladores de aplicaciones web construir rpida y
fcilmenteAplicacionesdeInternetRicas,tambinllamadasRIAs.Enunmodelomulticapa,las
aplicacionesFlexsonelniveldepresentacin.
Flex pone en relieve el desarrollo deInterfaces grficas de usuariousando un lenguaje XML
llamadoMXML. Flex tiene varios componentes y caractersticas que aportan funcionalidades
talescomoServiciosWeb,objetosremotos,arrastrarysoltar,columnasordenables,grficas,
efectosdeanimacinyotrasinteraccionessimples.Elclientesolocargalaaplicacinunavez,
mejorando as el flujo de datos frente a aplicaciones basadas en HTML (eg.
PHP,ASP,JSP,CFMX), las cuales requieren de ejecutar plantillas en el servidor para cada
accin.EllenguajeylaestructuradearchivosdeFlexbuscaneldesacoplamientodelalgicay
eldiseo.
ElservidorFlextambinactacomounapuertadeenlace,permitiendoalclientecomunicarse
con servicios webXMLy objetos remotos, tales como: Coldfusion CFCs,clases Java, y
cualquieraquesoporteelformatodemensajesdeacciones.
APIGoogleMapsparaFlash
Esta API permite a los desarrolladores Flex insertar Google Maps en aplicaciones Flash. De
forma similar a laversin Java Script, esta API de ActionScript proporciona varias utilidades
paramanipularyaadircontenidoamapasatravsdedistintosservicios,loquetepermite
insertaraplicacionesdemapasinteractivasycomplejasenunsitioweb.ElequipodeGoogle
Mapspublicaconstantementenuevosdatosdemapasymejoralacoberturainternacional.No
existeningnlmiterelativoalnmerodevisitasdelapginademapasdelsitioweb.ElAPIde
GoogleMapsestdisponibleparatodoslossitiosdeaccesogratuito.Sepuedeutilizarensitios
webcomercialesysinnimodelucro,siemprequedichossitioscumplanlascondicionesdel
servicio.Sepuedeutilizarsiemprequeelsitioseaaccesibledesdeelpuntodevistagenerala
losclientesdeformagratuita.
I.3Desarrollodelaestructuradelabasededatos.
La informacin relacionada con cada uno de los proyectos ejecutados por la empresa no ha
sido fundamentalmente gestionada a nivel corporativo. El carcter diverso de los servicios
ofertados hace que en cada caso existan particularidades con respecto a la informacin
manejada para cada proyecto, y por tanto una gran variedad de datos e informaciones
asociadas.Deestaformalaprimeratareaconsistienelaborarunaseleccindelainformacin
que tuviera un carcter de inters general y que fuera atractiva desde el punto de vista
comercial,parasermostradaycompartidaenlaaplicacin.
Unavezrealizadoestosecrelabasededatosdenominadaauding_progis,ydentrodeesta
una tabla denominada Projauding. La simplicidad de los datos utilizados para la difusin
comercial,norequirideldiseodeunabasededatosrelacional.Sinembargolascondiciones
tcnicas estn creadas para un futuro desarrollo en caso de que sea inters aumentar la
complejidaddelabasededatos.
Tabla3.EstructuradelatablaProjauding,delabasededatosAuding_progis.
Basededatos:AUDING_PROGIS
Tabla:PROJAUDING
CAMPOS
TIPO
PROYECTO_ID
Integer (6)
AREA_TRABAJO
Varchar (200)
TEMA_TRABAJO
Varchar (200)
TIPOLOGIA
Varchar (200)
TITULO
Varchar (300)
CLIENTE
Varchar (300)
IMPORTE
Double
MONEDA
Varchar (3)
MUNICIPIO
Varchar (100)
CC_AA
Varchar (100)
PAIS
Varchar (50)
FECHA_INI
Varchar (5)
FECHA_FIN
Varchar (5)
CUSTODIA
Varchar (50)
CAMPOS
TIPO
LOCALIZACION*
Varchar (100)
FICHAS*
Varchar (300)
CERTIFICADOS*
Varchar (300)
PROJECTE
Varchar (300)
AUTOR
Varchar (50)
LAT*
Double(10.6)
LNG*
Double(10.6)
Loscampossealadoscon(*),hansidoaadidosporelautordeestetrabajoysucontenidoen
casi todos los casos son URL que apuntan a ficheros externos que contienen informacin
asociadaalosproyectos.EnelcasodelaLOCALIZACIONserefiereaficherosKML 2 queestn
alojados en la carpeta pblica del servidor apache (htdocs), y contiene la localizacin
geogrfica de cada uno de los proyectos (Ver anexo 1). En el caso de las FICHAS y los
CERTIFICADOS,laURLapuntaaotracarpetaqueguardaenformatoPDFlasfichastcnicasde
cada proyecto y los certificados de los proyectos que los han obtenido, con el fin de que
puedanserdescargadosdesdelaaplicacin.Sobreestosaspectossehablaraconmsdetalle
en los captulos siguientes. Los campos de LAT y LNG son campos que contienen las
coordenadasgeogrficaslatitudylongitudrespectivamente,decadaproyecto.
KML (del acrnimo en ingles Keyhole Markup Language) es un lenguaje de marcado basado en XML para
representar datos geogrficos en tres dimensiones. Fue desarrollado para ser manejado con Keyhole LT, precursor
de Google Earth (Google adquiri Keyhole LT en Octubre de 2004 tras lanzar su versin LT 2).
CAPIII.DISEODELAINTERFAZDEUSUARIO
DiseodelclienteWebconelAPIdeGoogleMapsparaFlash.
ConexinentreelclienteWebylabasededatos.
EstructuraypersonalizacindelclienteWeb.
III.1DiseodelclientewebconelAPIdeGoogleMapsparaFlash.
EldesarrollodecontenidoFlashqueintegreGoogleMapsrequierelainclusindelabiblioteca
de interfaces del API de Google Maps para Flash en el cdigo de la aplicacin creada. Esta
biblioteca consta de un archivo(*.swc)situado en el directoriolibdel kit de desarrollo
desoftware(SDK)delAPIdeGoogleMapsparaFlashdisponibleenlasiguienteURL:
http://maps.googleapis.com/maps/flash/release/sdk.zip
El SDK incluye dos archivosSWC: una versin Flex para utilizarla con FlexBuilder (o con la
aplicacingratuitaFlexSDK)yunaversinnoFlexparautilizarlaconFlashCS3.LaversinFlex
delarchivo(*.swc)aparecemarcadaconelsufijo_flexenelnombredearchivo.
Estos archivos SWC contienen interfaces para todas las clases pblicas del entorno de
desarrollo del API de Google Maps para Flash. La compilacin de una aplicacin con esta
biblioteca garantiza que se pueda utilizar y comunicar con todas las funciones pblicas de la
bibliotecadeltiempodeejecucindelAPIdeGoogleMapsparaFlash,queserecuperadesde
losservidoresdeGooglecadavezqueunclientecargalaaplicacin.
La mayor parte del cdigo utilizado para la ejecucin de la aplicacin de Google Maps para
FlashpermanecerenlabibliotecadeltiempodeejecucindelAPIdeGoogleMapsparaFlash
independiente.EstopermitealequipodeGooglerealizarmejoras,solucionarerroresyhacer
modificaciones en las funciones de la biblioteca principal sin que los usuarios tengan que
volveracompilarlaaplicacin.
CaptuloIII.|Diseodelainterfazdeusuario 17
ElAPIdeGoogleMapsparaFlashutilizadoenlaaplicacin,aligualqueelAPIdeGoogleMaps
paraJavaScript,requiereelusodeunaclavededesarrolladordisponibledeformagratuita.La
clavedelAPIsecompilaenelarchivoSWFydebecorresponderaldominioenelquesealojeel
archivoSWF,quenotieneporqusernecesariamentelaubicacindelarchivoHTMLalojado.
Las aplicaciones Flex se definen en las declaracionesMXML. Por lo general, se debe
proporcionarestasdefinicionesdeaplicacinMXMLenlarazdeldirectoriodecdigofuente.
De forma predeterminada, FlexBuilder crea un directoriosrcen el proyecto para colocar el
cdigofuenteylosarchivosMXMLdebenresidirenlarazdeesedirectorio.
La declaracin MXML define elementos de la interfaz de usuario en una aplicacin Flex,
mientras que el cdigo ActionScript integrado en la etiqueta<mx:Script> define acciones
sobre dichos elementos de la interfaz de usuario. En el caso ms sencillo, slo se tiene que
declarar un objetocom.google.maps.Mapen MXML e inicializar el mapa con cdigo
ActionScript.
Adems del cdigo ActionScript, las aplicaciones de Google Maps en Flash requieren un
frameworkdeinterfazdeusuarioparavisualizarelmapaycualquierelementoasociadodela
interfaz de usuario en una pgina web. En el framework de Flex, estos componentes de la
interfaz de usuario se especifican en una declaracinMXML. Una declaracin MXML se
compone de un archivo de configuracin con el sufijo.mxml. Este archivoMXMLreside
normalmenteenlarazdeldirectoriodedesarrollodeActionScript.
Para visualizar el mapa de Flash en una pgina web, se necesita al menos una declaracin
MXML. Todas las declaraciones MXML requieren un componente <mx:Application>raz.
Adems,elcomponente<mx:Application>tambinregistraelprefijomxparahacerreferencia
aloscomponentesestndardeFlex.
El objeto<mx:Script>es un componente de Flex que contiene una referencia al cdigo
ActionScript. Dado que MXML es una variante de XML, se tiene que informar al analizador
MXML de que ignore el cdigo ActionScript en este archivo mediante el uso de los
delimitadores<![CDATA[][y]]>.
III.2Conexinentreelclientewebylabasededatos.
Flex permite generar automticamente servicios o aplicaciones que se conectan a bases de
datos.EnestecasoseutilizunaaplicacinbasadaenPHP.Cuandosecreaestaaplicacin,se
generan un conjunto de ficheros que controlan todo el proceso de comunicacin entre la
aplicacin principal (AudingSpatial.mxml) y la base de datos. Los ficheros generados y sus
funciones se muestran en la siguiente tabla. El directorio donde se generan estos ficheros
siempreselocalizasegnestecriterio[web_server_root\nombredelproyecto_debug].Eneste
directorio se crean adems un subdirectorio PEAR, que es un framework y un sistema de
distribucin para la codificacin de componentes en PHP, donde se guarda un fichero PEAR
XMLqueseocupadelasfuncionalidadesrelacionadasconlosficherosXML.Yunsubdirectorio
HISTORY,dondeseguardaelhistorialdelmanejodelaaplicacin.Enelcasodeestaaplicacin
losarchivossegeneraroneneldirectorio:htdocs\AudingSpatial\bindebug\.
Tabla4:Ficherosgeneradosporlaaplicacindeconexinabasededatos.
Ficheros
Funciones
Projauding.php
Contienetodaslassentenciasdeconsultamanejoyactualizacinalabasededatos.Eselmedio
principaldecomunicacinentrelabasededatosylaaplicacin.
AudingSpatialconn.php
Crealaconexinalabasededatos:nombredelabasededatos,usuarios,contraseasetc.
Functionsinc.php
Optimizaeltratamientodelosvaloresdelabasededatos.
XmlSerializer.class.php
ContienelasfuncionesdelecturaygeneracindedocumentosXML.
Projauding.swf
AplicacindegestindelastablasdelabasededatosquepuedeserejecutadaenFlashPlayery
visualizadaenlosnavegadores.
Projauding.html
Documentowebdondesevisualizayconsultalastablasdelabasededatos.
AC_OETags.js
GeneraunaplantillaHTMLconfuncionalidadesdechequeodeversionesyalojamiento delos
ficheros SWF. Para lograr esto las plantillas HTML llaman a un mtodo de JavaScript llamado
AC_FL_RunContent(),queseencargadealojarlasaplicacionesdeFlexeneldocumentoHTMLy
de chequear la versin de FlashPlayer que el navegador est usando en ese momento para
verificarsucompatibilidadconelSWFgenerado.
SRC\Projauding.mxml
mbito de desarrollo de estructuracin de la aplicacin que maneja las tablas de la base de

datos.
SRC\ProjaudingConfig.as
ClasesquecontrolanlasfuncionalidadesdelaaplicacinProjauding.mxml
SRC\ProjaudingScript.as
ClasesquecontrolanlasfuncionalidadesdelaaplicacinProjauding.mxml
Deestaformaquedaconfiguradalaconexinconlabasededatos.Apartirdeaqucualquier
consulta o peticin que se quiera ejecutar, solo se debe modificar el fichero projauding.php
paragenerarmtodosdeconsultaspersonalizadas.
III.3EstructuraypersonalizacindelClienteWeb.
Estaaplicacinestdirigidaaladifusincomercialdelosproyectosqueejecutalaempresay
puedenserdiferenciadosenfuncindedostiposusuariosfundamentalmente.Enprimerlugar
a personas familiarizadas con el mundo de la ingeniera, ya sean administraciones pblicas,
ayuntamientos y empresas que se desenvuelven profesionalmente dentro de este mundo, y
que demandan este tipo de servicio. Y en segundo lugar usuarios particulares que no estn
familiarizados con los servicios que ofrecen las empresas de ingenieras, pero que pueden
convertirseendemandantesdeestosproductos.
Enestesentido,lafilosofadecaraalusuarioengeneral,consisteenmostrarunaherramienta
eficiente, intuitiva y amigable, de consulta y bsqueda de los proyectos en los que est
interesado. Organizar el proceso de bsqueda en funcin de la estructura organizativa de la
empresacontribuyeaproyectarunaimagendeprofesionalidaddiversidadyexperienciaenel
sector.
Aestosrequerimientosselesaadelacapacidadquedebetenerlaaplicacinquepermitaal
usuario interactuar con el mapa, o sea, funciones de zoom, pan, etc. En el caso de esta
aplicacinestascapacidadeslasofreceelAPIdeGoogleMaps,loqueconstituyeunaventaja
puesto que poseen una de las tecnologas de servicio de mapas e imgenes ms rpidas y
eficientesqueexisten.
Partiendodeestaspremisassediseunaherramientadebsquedaconsistenteenunpanel
con tres objetos ComboBox que permiten al usuario navegar refinando su bsqueda en tres
niveleshastallegaraunalistadelosproyectosqueesteacordeconsusintereses.Unaprimera
bsqueda se refiere al rea de Trabajo, luego al Tema de Trabajo dentro de esta rea, y
finalmentelaTipologadelosproyectosqueleinteresaraconsultar.
Unavezalcanzadoestepunto,otropanelaparecerailustrandounalistaconlosttulosdelos
proyectosasociadosalcriteriodebsquedaestablecidoenelpasoanteriorysobreestalista
yasepuedeentoncesaccederainformacinmsdetalladadecadauno.
Cada uno de estos proyectos que aparecen en la lista desplegada tiene una localizacin
geogrficaasociada,lacualserepresentaenelmapaenelmismomomentoenqueapareceel
panelmencionado.Ambosobjetos,elpanelylosmarcadoresqueindicanlaposicinespacial
decada proyecto,estnrelacionados. Tantodesde cadatemdelalista,comodelmarcador
representado en el mapa, se puede acceder a la informacin especfica del proyecto
seleccionado,ascomolaposibilidaddedescargarunafichatcnicareferentealmismo.
Elfuncionamientogeneralquedararesumidoenlossiguientespasos.
1. Inicializacin de la aplicacin. (Accediendo a la URL pblica de la web desde un
navegador)
2. BsquedamedianteelpanelBuscador.(Figura4.Panelbuscador)
el tema seleccionado en los dos pasos
anteriores.
a) Primerniveldebsqueda:seleccindel
readetrabajo
b) Segundo nivel de bsqueda: seleccin
del tema de trabajo asociado al rea
seleccionadaanteriormente.
c) Tercer nivel de bsqueda: tipologa de
losproyectosrelacionadosconelreay
3. Sedespliegaelpanelconlalistadelosproyectosquerespondenelcriteriodebsqueda
anterior,ascomolosmarcadoresqueindicansuposicinespacial.Apareceotraopcin
de bsqueda de proyectos a partir de una fecha. Esta opcin hace un filtro mostrando
sololosproyectosejecutadosapartirdelaoseleccionadohastalaactualidad,dentrode
loscriteriosseleccionadosenlospasosanteriores.
Figura5.Panelproyectos(elaboradoporelautor)
4. Clicksobreuntemdelalista,osobreunmarcador:sedespliegaunaventanasobreel
marcadorconlainformacinreferenteaeseproyectoseleccionado.
Figura6.Ventanadeinformacin(elaboradoporelautor)
Eldiseode lasinterfazdesarrolladasenFlexsebasafundamentalmente en un conjunto de

objetosaadidosamododeetiquetasenundocumentoconextensin(*.mxml).MXMLesun
lenguajequedescribeinterfazdeusuarios,creamodelosdedatosytieneaccesoalosrecursos
delservidor,deltipoRIA(RichInternetApplication).TieneunaestructurasimilaraHTML,pero
con una sintaxis menos ambigua que proporciona una gran variedad e inclusive permite
extenderetiquetasycrearsuspropioscomponentes.
Los objetos aadidos en Flex deben seguir o respetar una jerarqua. Existen objetos
contenedoresyobjetoscontroladoresocontroles.Losprimerosfuncionancomocontenedores
deotrosobjetosysufuncinfundamentalesorganizarlaformaenquesemuestranlosdatos
quecontienenlosobjetoscontroladores,osea,lasimgenes,tablas,textos,grficos,botones
etc.
ElproyectoAudingSpatial contienedosdocumentosmxml,unoeslaaplicacinprincipalyel
segundoesunaventanadeinformacinquesemuestracuandoesllamadaunafuncindentro
delprograma.
Como se observa en la figura la aplicacin principal contiene un gran panel que a su vez
contiene el resto de los objetos, fundamentalmente tres. Uno est relacionado con la
herramientadebsquedacontenidaenunobjetodetipopanel.Otroestrelacionadoconun
contenedorpaneldondesemuestraunalistadelosproyectosquerespondenauncriteriode
bsqueda determinado, y finalmente un objeto ComboBox que contiene los diferentes tipos
demapasquepuedensermostrados.
Figura7:Estructuradelainterfazdeusuario.
Fuente:elaboradoporelautor.
El panel Buscador est formado por tres objetos etiquetas (mx:Label), y tres objetos
mx:ComboBox,queestndentrodeunObjetomx:VBoxencargadodeorganizarverticalmente
losobjetosquecontiene.
Figura8:EstructuradeldiseodelpanelBuscador.
El SuperPanel pnProyectos es una extensin del objeto panel, al cual se le aade las
propiedadesdeserdesplazable,expansibleyquesepuedacolapsar.Esteademscontieneun
objetodetipomx:Listdondesemuestralalistaconlosttulosdelosproyectosqueresponden
auncriteriodebsquedadeterminado.Yunobjetomx:ComboBoxquecontieneunalistade
los aos a partir de los cuales se puede filtrar para visualizar en la lista los proyectos
ejecutadosdespusdelaoseleccionado.
Figura9:EstructuradeldiseodelpanelProyectos.
La ventana de informacin se dise en funcin del contenido que se quera mostrar.

Esencialmente contiene etiquetas o mx:Label que nombran la informacin que se muestra
interactivamente en los objetos de tipo mx:Text. Estos objetos se llenan desde la base de
datos,deformainteractivaenfuncindelasconsultasquerealiceelusuario.Tambinhayun
objeto de tipo mx:LinkButton que permite descargar ficheros PDF que se encuentran en un
directorio externo. Todos estos componentes u objetos estn contenidos en componentes
mx:Hbox o mx:Vbox en funcin del sentido de orientacin en que se quiera estructurar la
informacindesdeelpuntodevistavisual,osea,deformaverticalodeformahorizontal.Yel
contenedor general es un objeto de tipo mx:Canvas. Canvas es un tipo de contenedor que
define un rea rectangular donde se pueden alojar otros contenedores o controladores. El
proceso mediante el cual este objeto es invocado y visualizado mediante el API de Google
MapsparaflashserexplicadoenelCaptuloIV.
Figura10:EstructuradeldiseodeInfoWindow.mxml.
Cadaobjetoinsertadoenlaaplicacintieneasociadounestilo.Ladefinicindecadaunode
estosestilosseencuentraenundocumentoconextensinCSSdenominadocss_styles.css.
La seleccin de colores y estilos en general se basa fundamentalmente en la imagen
corporativadelaempresa.EnlawebdeAuding,sepuedeaccederafolletosdepromocinde
la empresa y de cada uno de los departamentos. Estos folletos en conjunto con otros
materiales de promocin y marketing que est desarrollando la empresa contienen los
conceptosbsicosdelaimagencorporativaquelaempresapromueve.Enestesentidofueron
seleccionados los diferentes colores y estilos de la aplicacin, as como el diseo del
encabezamiento.
Figura11:Diseodelencabezamientodelapginaweb.
Deestaformaquedodiseadalainterfazdeusuario.Comosemuestraenlafiguraexisteuna
homogeneidadeneldiseo.Seconservalaimagencorporativaaunquesepuedeidentificarla
identidadpropiadeesteproducto.Desdeelpuntodevistafuncionalesintuitiva,amigable,y
permiteunintercambioeficazconelusuario.
Figura12:Diseodelainterfazdeusuariodelaaplicacin.
CAPIV.DESARROLLOEIMPLEMENTACION
DELAAPLICACIN
Estructurayfuncionamientodelaaplicacin.
Modelolgicodedesarrollo
Caractersticasdepuestaenmarchayrendimientodelaaplicacin.
IV.1Estructurayfuncionamientodelaaplicacin.
Los proyectos realizados en Flex son a grandes rasgos, un compendio de objetos o
componentes estructurados (MXML) que configuran la interface y un conjunto de rutinas
escritas en ActionScript que crean y gestionan el comportamiento de la aplicacin. Cada
proyectoestcompuesto,tradicionalmente,porcuatrocarpetas.
BINDEBUG:queeslaabreviaturadebinarydebugging,yque contiene el cdigo de

compilacin(elficheroSWF),yparalasaplicacioneswebcontienetambinunfichero
contenedorHTMLconsusficherossuplementarios.
HTMLTEMPLATE:contieneplantillasHTMLquegeneranlosficherosHTMLsiemprey
cuandosetratedeunaaplicacinWEB.
LIBS:eslaabreviaturadeLibraries,obibliotecas,quecontieneelconjuntodecdigo
compiladoqueseusaenlaaplicacin.
SRC:osource,quecontienetodoelcdigofuente,yaseanficheros.mxml,ficheros.as
oficherosdescriptoresdeaplicacionesparaaplicacionesAIR.
Adems de estas carpetas y ficheros que crea por defecto, se le pueden aadir ms clases,
componentes,yficherosenfuncindelacomplejidaddecadaproyectoquesedeseerealizar.
Una vez acabados estos proyectos son compilados para crear un fichero con extensin SWF
quepuedeseralojadoenundocumentoHTMLparaserpublicadoenlaWEB.Estosficheros
CaptuloIV.|DesarrolloeimplementacindelaAplicacin 27
SWFsonejecutadosporFlashPlayer,unaaplicacinqueescompatibleyestinstaladaenlos
navegadoresmsusadosdelmercado.
EnproyectoAudingSpatialestconstituido,ademsdelascarpetasyficherosquecreanpor
defecto, por un conjunto de elementos que fue necesario aadir para obtener las
funcionalidadesdeseadas(Figura13). Paradesarrollarestaaplicacinhaba quepartirdeun
conjuntodepremisasbsicas:
Necesidaddeconectarlaaplicacinconunabasededatosexterna.
Localizar espacialmente los proyectos y relacionar su ubicacin con la informacin

asociadaacadaunodeellos.
Hacer que ficheros externos a la aplicacin y a la base de datos pudieran ser

consultadosyadquiridosdesdelaaplicacinentiempodeejecucin.
Figura13.EstructuraparalacreacindelaaplicacinAudingSpatialsegnlalgicadedesarrollodeFlex.
Una vez creada y estructurada la base de datos, desarrollada la aplicacin que se conecta y
gestiona el intercambio de informacin entre la base de datos y la aplicacin WebMap
(Captulo III), y diseada la interface de usuario; se procedi a dotar de funcionamiento a la
aplicacin.Elproyectofueestructuradocomoseobservaenlafigura13yestformadoporlos
siguienteselementos:
Tabla5.Componentesdelaaplicacinaudinig_spatial.mxml
Ficheros
Descripcin
AudingSpatial.mxml
Eslaaplicacinprincipal.Enesteficheroestdefinidatodalainterfacedeusuario,as
comolasfuncionesdelosobjetosycomponentesquecontiene.
InfoWindow.mxml
Es una Ventana de informacin asociada a los Marcadores o puntos geogrficos

dondeestnlocalizadoslosproyectosrealizadosporlaempresa.Desdeestaventana
seaccedeaainformacinrelacionadaconcadaproyectoysepuededescargartanto
lasfichastcnicasdelosmismos,ascomoloscertificadosdeestosencasodequelo
tengan.
ComboService.as
Rutinaqueseencargadehacerlaspeticionesdeinformacinalabasededatoscon
lasquesellenanloscombosdelpaneldebsqueda.
ApplicationDataModel.as
Rutina que le da formato y hace accesible a cualquier parte de la aplicacin, a los

datosrecibidosdesdeelservidor.
SuperPanel.as
Es una extensin del componente mx:panel de flex, desarrollada con el objetivo de

dotarlo de mas funcionalidades y propiedades que las que tiene por defecto. Esta
hace que un panel sea minimizable, maximisable, extensible y desplazable. Fue
creadaporWiestseVeenstrael22defebrerodel2007yestdisponibleensuWEB
http://www.wietseveenstra.nl. Ha sido modificada por el autor de este trabajo en
funcindelosinteresesparticularesdeestaaplicacin.
(Version1.0)
FICHAS
EstaeslacarpetadondesealojantodoslosficherosPDFdelasfichastcnicasdecada
unodelosproyectos
CERTIFICADOS
EstaeslacarpetadondesealojantodoslosficherosPDFdeloscertificadosdecada
unodelosproyectosencasodequehayantenganalgunoasignado.
IMAGENES
Carpetadondeseguardanlasimgenesqueseusanenlaaplicacin.
Iconos
Carpetadondeseguardanlosiconosqueseusanenlaaplicacin.
Styles
Carpeta donde se guarda el fichero CSS de estilos de cada componente de la

aplicacin.
Estos componentes estn relacionados entre s y tienen asociado funciones especficas que
responden a eventos que ocurren cuando se ejecuta alguna accin sobre los objetos de la
interfacedeusuario.Estoseventospuedenseriniciadosporelusuario,odesencadenadospor
otroseventos.
Cuando el usuario accede a esta aplicacin para hacer una bsqueda o consulta, la
herramienta que encuentra es un panel de bsqueda que tiene tres combos a partir de los
cuales se establecen los criterios de la bsqueda. Cuando se inicializa la aplicacin el primer
combosellenaconlosvaloresnicosdelcampoqueguardalasdiferentesreasdetrabajode
laempresa.Alseleccionarunodeestostems,laaplicacinpidealabasededatoslostemas
de trabajo asociados al rea de trabajo seleccionada. Con estos valores se llena el segundo
combo de temas de trabajo. Por ltimo al seleccionar un tema de trabajo de este combo se
realizalamismaoperacinperoconotrosparmetrosquedevuelvelasdiferentestipologas
asociadas al tema de trabajo anteriormente seleccionado. Con estos se llena este ltimo
combo.Unavezestablecidoestoscriteriosdebsquedasolosenecesitaseleccionarunadelas
tipologas desplegadas en el ltimo combo, y entonces pasan dos cosas: aparece un nuevo
panel con una lista con los ttulos de todos los proyectos que responden a ese criterio de
bsquedayaparecenenelmapalaslocalizacionesasociadasacadaunodeestosproyectos.
La informacin espacial est localizada en la tabla de la base de datos. En esta parecen dos
columnas(LATyLNG)dondeseguardanlosvaloresdelatitudylongitudgeogrfica,asociadas
acadaunodelosproyectos.
Desdeestenuevopaneldondesevisualizalalistadelosttulosdecadaproyectoyapareceun
nuevo combo, con una lista de los aos en que se iniciaron los proyectos visualizados, para
filtrarlosproyectosdesarrolladosapartirdelaoqueseseleccioneeselcombomencionado.
Desdelalistasepuedeinvocarunaventanaquecontieneinformacinespecficadelproyecto
seleccionado referente al ttulo, cliente, presupuesto, y ao de finalizacin del proyecto
consultado. Tambin esta ventana tiene un botn que permite descargar la ficha tcnica
asociada al proyecto seleccionado. Esta ventana puede ser invocada tambin desde los
marcadoresquerepresentanlalocalizacindelosproyectos.
IV.2Modelolgicodedesarrollo
Elmodelodeprogramacinseguidoesbastantelineal.Sebasaprincipalmenteenrutinasque
consultan la base de datos filtrando informacin hasta llegar a resultados deseados (Figura
14).Estecomportamientoimplicaprogramacintantoenelclientecomoenelservidor.
Figura14.Modelolgicodedesarrollodelaaplicacin
LaprogramacindesdeelservidorserealizaenelficheroProjauding.php.Enestefichero,por
defecto genera cuatro mtodos generales de consulta a la base de datos: FindAll (buscar),
Insert (insertar), Update (actualizar), Delete (borrar) y Count (contar). Para personalizar las
consultasquesenecesitabansecrearoncincomtodosysemodificoelmtodoFindAllpara
una consulta en concreto. En la siguiente tabla se sealan cada uno de estos mtodos y su
descripcin.
Tabla6.MtodoscreadosdentrodelficheroProjauding.php,paralaconsultapersonalizadaalabasededatos.
Mtodos
Descripcin
FindArea
Estemtodopidealabasededatoscadaunodelosvaloresnicosqueexistenenelcampode
AREA_TRABAJOdelabasededatos.
FindTema
AREA_TRABAJOfiltradosporelcampoAREA_TRABAJO.
FindTipologia
TIPOLOGIAfiltradosporelcampoTEMA_TRABAJO.
FindKML
EstemtododevuelvedelabasededatosunXMLquecontienelosvaloresloscamposLAT,LNG
yTITULO,filtradosporelcampoTEMA_TRABAJOyTIPOLOGIA
FindAll($campo)
Estemtodorecuperatodoslosregistrosdelabasededatosfiltradoporcualquiercampo.Para
estosedefineunavariable$campo,dentrodelmtodo,yaspuedetomarcualquiervalor.Este
fuellamadofiltrandoporelcampoPROYECTO_ID.
FindFecha
EstemtododevuelvedelabasededatosunXMLquecontienelosvaloresloscamposLAT,LNG,
TITULOyFECHA_INIfiltradosporelcampoTEMA_TRABAJOyTIPOLOGIA
Cuando desde la aplicacin se llama a estos mtodos, ellos hacen un pedido especfico a la
basededatosyestalesdevuelveunficherodetransportededatosXMLconlainformacin
solicitada.
EstosmtodossoninvocadosdesdelaaplicacinmedianteuncomponenteespecficodeFlex
diseadoparaesto,medianteunHTTPService.Estecomponentesepuedeusarconcualquier
tipodetecnologadeservidor.EnestecasoseusaconPHP.Conestecomponentesellamaala
paginaPHPmedianteelmtodoGETsisequiereconsultardatosdelabasededatos,oconel
mtodo POST si se quiere enviar datos a esta. Como se trata solo de una aplicacin de
consulta,dondeelusuarionopuedeactualizaromodificarlabasededatos,soloserealizan
peticionesusandoelmtodoGET.Casitodaslaspeticionesrealizadasalabasededatosestn
desarrolladas en la clase ComboService.as. Esta clase recibe los ficheros XML que enva el
servidorylosreformateaenE4X.
LaespecificacindeECMAScriptparaXMLdefineunconjuntodeclasesyfuncionalidadpara
trabajar con datos XML. Este conjunto de clases y funcionalidades se denominaE4X.
ActionScript3.0incluyelassiguientesclasesdeE4X:XML,XMLList,QNameyNamespace.
Los mtodos, propiedades y operadores de las clases de E4X se han diseado con los
siguientesobjetivos:
Simplicidad:siemprequeseaposible,E4Xfacilitalaescrituraycomprensindelcdigo
paratrabajarcondatosXML.
Coherencia:losmtodosylalgicaquesubyacenaE4Xsoncoherentesinternamente
yconotroscomponentesdeActionScript.
Familiaridad: los datos XML se manipulan con operadores conocidos, como el

operadorpunto(.).
Posteriormentelosconvierteencoleccionesdedatosmsfcilesderepresentardentrodelos
componentes de la aplicacin. Las colecciones que se usan son de tipo ListCollection y
ArrayCollection.
Cuando los datos son recibidos son asignados a un modelo de datos
(ApplicationDataModel.as).Lafuncindeestemodeloesinstanciarlosdatosdeformatalque
se puedan usar desde cualquier parte de la aplicacin manteniendo su integridad y
actualizndosecontinuamenteenlamedidaqueseactualizalainformacinrecibidadesdeel
servidor. Mantiene los datos actualizados para toda la aplicacin. Esto permite llenar
continuamentelosComboBoxdereadetrabajo,temadetrabajoydetipologa,ylalistade
ttulosdeproyectos,enlamedidaenquesevanactualizandolosdatoscomoresultadodelas
consultasquerealiceelusuario.
Cuandoseestinicializandolaaplicacinyaestarealizaunprimerpedidoalabasededatos
usandoelmtodogetAreasdefinidoenComboService.asquellenaelcombodecmbAreas.As
cuandolaaplicacincargacompletamenteyaeusuariopuedeaccederaesteprimernivelde
bsqueda.Cuandoesteseleccionauntemdelalistaquesedespliegaenestecombo,ocurre
eleventoChange,osea,uncambiodetem.EsteeventollamaalmtodogetTemasdefinido
en la clase ComboService.as que hace el nuevo pedido a la base de datos y llena el combo
cmbTemas con el resultado de este pedido, filtrando segn el rea de trabajo (tem) que se
seleccionenelpasoanterior.AsocurretambinenelcasodelcombocmbTipologia,usando
elmtodoquelecorresponde(getTipologia).
Llegadoaesteltimoniveldebsquedadondeseseleccionauntemdelosdesplegadosenel
combocmbTipolgiaseinvocanuneventoqueasuvezinvocadosprocesos.
1 Sehacevisibleelcomponente<myCom:SuperPanel>
2 SerealizaunnuevopedidoalabasededatosmedianteelmtodofindKMLdefinidoen
projauding.php con el cual se llena la lista que contiene el componente
<myCom:SuperPanel>,yelcombocmbFechaqueaparecetambinenestepanel,con
losresultadosfiltradosenfuncindeltemseleccionado.
Sielusuariodecideimplementarunnuevofiltroenlalistadesplegadaparaobtenerlosttulos
delosproyectosejecutadosapartirdeunaodeterminado,estedebeescogerenelcombo
cmbFecha el tem que le interese. Este proceso invocara un evento llamado get XML2 que
repetira el proceso anterior para llenar la lista de proyectos pero esta vez mediando un
mtodollamadofindFechadentrodeprojauding.php.
Llegadoaestepuntoelusuariotieneaccesoaunalistaconlosttulosdelosproyectosyun
conjunto de marcadores representados en el mapa. Para acceder a informacin sobre un
proyectoenconcretopuedehacerlodedosformas:yaseaporintersgeogrficoaccediendo
desde el marcador, o por inters respecto a algn ttulo de proyecto en especfico que
aparezcaenlalista.Enamboscasoscuandoelusuariohaceclick,yaseasobreelmarcadoro
sobre algn tem de la lista, se invoca un mismo evento dentro de la aplicacin que realiza
variasfunciones.
Cuando se invoca desde la lista, este evento centra en el mapa y hace un zoom hacia el
marcadorquecorrespondeconeltemseleccionadodelalista.Tambinesteeventoejecuta
unafuncindelAPIdeGoogleMapsdenominadaOpenInfoWindow,elcualabreunaventana
deinformacinsobreelmarcadorseleccionado.Elcontenidopersonalizadodeestaventanaes
el fichero InfoWindow.mxml, o sea que una vez ejecutado openinfowindow, se invoca la
inicializacindelficheroMXMLmencionado.
Figura15.EsquemadefuncionamientodeInfowindow.mxml.
Comosemuestraenlafigura15estaaplicacinencuandoseinicializaautomticamentehace
unpedidoalabasededatosatravsdelmtodofindAlldesarrolladoenProjauding.php,que
devuelvelainformacincorrespondientealtemomarcadorseleccionado.Estainformacinse
muestraenloscomponentesmx:Textquelescorresponde.Enlaestructuradeestaventanade
informacin tambin existe un componente de tipo mx:LinkButton que accede a la base de
datosenbuscadel URL queguardael campoFICHASdelabase dedatosyqueapuntaa un
directorioexternodondeseguardanlosficherosenformatoPDFdelasfichastcnicasdecada
proyecto. La funcin que invoca este LinkButton permite a los usuarios descargar estos
ficheros.
IV.3Caractersticasdelapuestaenmarchayrendimientodelaaplicacin.
Como se observa en la primera figura de este captulo, una vez que todo el proceso de
desarrollo esta completado y comprobado que todo funciona correctamente, se pasa a la
compilacin de la aplicacin. Cuando esto sucede se genera un fichero son extensin SWF.
Este es un formato de archivo de grficos vectoriales. Suelen ser suficientemente pequeos
comoparaserpublicadosenlaWEBenformadeanimacionesoappletscondiversasfunciones
ygradosdeinteractividad.
LosarchivosSWFsoncompiladosycomprimidosapartirdearchivoseditablesconlosquese
ha trabajado en Flex. El objetivo principal del formato SWF es crear archivos pequeos pero
quepermitanlainteractividadyquefuncionenencualquierplataforma,ansobreunancho
debandareducido(cmounnavegadorwebconectadoatravsdeunmdem).Elpluginque
permite reproducir ficheros SWF est disponible en Adobe Systems para diferentes
navegadoresydiferentessistemasoperativos,incluidoMicrosoftWindows,AppleMacintoshy
Linux. Este plugin est instalado aproximadamente en un 98% de los ordenadores de los
internautas.
UnavezcompiladalaaplicacinsealojautomticamenteenundocumentooplantillaHTML,
elcualfuecolocadoeneldirectoriopublicodenuestroservidorwebApache.Elaccesopblico
a esta aplicacin se hace mediante un dominio adquirido por AudingIntraesa para este
propsito.
La
aplicacin
puede
ser
consultada
en
este
directorio
http://git.auding.com/AudingIntraesa/auding_spatial.html.
En sentido general el rendimiento es bueno, aunque mejorable. El servicio est siendo
ejecutado,enestafaseinicial,desdeunamaquinavirtualalojadaenelservidordelaempresa.
Sin embargo es inters de la empresa alojar definitivamente esta aplicacin, una vez
terminada,enelservidorprincipalparaoptimizarsurendimiento.
Enelapartadoderecomendacionesdeesteinformesemencionanlaslimitantesactualesylas
solucionespropuestasporelautorparaoptimizarelfuncionamiento.
Latecnologaempleadapermiteunejerciciodemantenimientomuyventajoso.Laaplicacin
pude ser modificada cuantas veces se desee sin que afecte el servicio web. Cuando las
modificacionesestnlistassolosenecesitacompilarnuevamentelaaplicacin,alojndolaen
eldirectoriopublicoreescribiendoeldocumentoHTMLexistente.Esteprocesosolotardaunos
segundos.Esteseraeltiempoquesenecesitaraparaactualizarelservicio.
Elmantenimientodelasbasesdedatosesindependientedelaaplicacin.Demomentoseusa
laherramientadegestindelMySQLmencionadaenelCaptuloII:phpMyAdmin.Estainterfaz
permite manipular los datos de las tablas. En este sentido se seala a modo de
recomendaciones la creacin de una aplicacin de autogestin de la base de datos,
sincronizadaconlaaplicacindeconsultadeformatalquelosencargadosdealimentaresta
basededatostenganunaherramientafcildegestinyadministracindelamisma.
Conclusiones
Este trabajo persegua objetivos especifico referentes a tres niveles principalmente: un nivel
relacionado con la seleccin de la plataforma tecnolgica y el diseo de la estructura de la
basededatos,unsegundonivelrelacionadoconeldiseofuncionalyvisualdelainterfazde
usuario, y finalmente en el desarrollo de una estructura lgica de programacin que fuera
capaz de cubrir con las exigencias de funcionamiento sealadas por la empresa. En este
sentidosepuedeconcluirlosiguiente:
Encuantoalaseleccintecnolgicaylaimplementacindelabasededatossepuede
concluirqueexisteunasincronaentrelasplataformasutilizadasoptimizandoelflujo
deinformacinentreelservidoryelcliente,conunaaltacalidadensurepresentacin
decaraalusuariofinal.
Laestructuradelabasededatoscubrelasexigenciastantodelaaplicacincomode
losinteresescorporativosdedifusindesuinformacin.
Lainterfazdeusuarioessencilla,intuitiva,amigableyeficientedesdeelpuntodevista
funcional.Desdeelpuntodevistavisualsudiseoesatractivoytrasmitelaidentidad
corporativa.
La lgica de programacin empleada es lineal, limpia, modular y slida. Cubre las

exigencias corporativas y permite posteriores mejoras y modificaciones tanto en el
diseocomoenelfuncionamiento,empleandounmnimodecambiosenlaestructura
delcdigoescrito.
El mantenimiento de la aplicacin es ajeno al funcionamiento de la misma. La

tecnologa empleada permite modificar la aplicacin cada vez que se estime
conveniente enunentornodepruebaindependiente.Unavezvalidadosloscambios
puedeserpublicadalaactualizacinrequiriendomuypocotiempo.
Conclusiones 38
Recomendaciones
Las recomendaciones que se plantean en este trabajo responden a dos directrices

fundamentales. Una est relacionada con las necesidades actuales de la empresa que no se
pudieron cubrir en el tiempo destinado para el desarrollo de este proyecto, y otras con
respectoalmejoramientodelfuncionamientodelaaplicacinengeneral.Enestesentidolas
recomendacionesquesesugierensonlassiguientes.
Elaborar una base de datos nica y centralizada de gestin de la informacin

relacionadaconlosproyectosejecutadosporAudingIntraesaS.A.
Elaborar una herramienta amigable de gestin de esta base de datos a un nivel

corporativo, donde se gestione toda la informacin relacionada con los proyectos
(pliegos de licitacin, facturas, documentos de los proyectos, hojas de cierre,
certificados etc.), estableciendo restricciones tanto del personal autorizado a la
gestindelamismas,ascomoencuantoalainformacinsusceptibleaserpublicada
ono.
Aadir ms capacidades de consulta de la base de datos desde la aplicacin, como

consultas de proyectos que estn en un rango de aos seleccionado por el usuario,
visualizar solo los proyectos de un municipio, pas o comunidad autnoma
determinada. Elaborar herramientas de visualizacin de grficos estadsticos que
representeninformacindeproyectoselaboradosporaos,dcadas,tendencias,etc.
Usarlainformacinespacialgeneradaapartirdeesteproyectoparaelaborarpatrones
espacialesinfluenciaenelmercado,oestrategiasdeexpansinempresarial.
Personalizarlosmarcadores.
Recomendaciones 39
Bibliografa
LIBROSyARTCULOS
1. AdobeSystemsIncorporated(2008).ProgrammingActionScript.
2. Alaric Cole. (2008). Learning Flex 3. Getting up to speed with Rich Internet
Applications.OReillyMediaInc.
3. GoodchildMichaelF.(2009)AssertionandAuthority:TheScienceOfUserGenerated
GeographicContent.
4. JackHerrington&EmilyKim.(2008)GettingStartedwithFelx3.OReillyMediaInc.
5. JoshuaNoble&ToddAnderson.(2008)Flex3CookBook.OReillyMediaInc.
WEB:
a. AdobeFlex3HelpResourceCenter.http://www.adobe.com/support/documentation/
b. AdobeFlex3LanguageReference.http://livedocs.adobe.com/flex/3/langref/package
summary.html
c. ApacheSoftwareFoundationHomepage.http://www.apache.org/
d. API Google Maps para flash. Google Code. http://code.google.com/intl/es
ES/apis/maps/documentation/flash/
e. MySQL5.0ReferenceManual.http://dev.mysql.com/doc/refman/5.0/es/index.html
f.
PHPMyAdminDocumentation.http://www.phpmyadmin.net/home_page/
g. Wietse Veenstra Blog. Factum Vicesimus Quartus. Exploring web x.0, innovation and
RIAtechniques.http://www.wietseveenstra.nl/blog/
h. Wikipedia.Laenciclopedialibre.http://es.wikipedia.org/wiki/Wikipedia:Portada
Bibliografa 40
Anexos
ANEXO 1: ESTRUCTURA DE LA APLICACIN CON UNA REPRESENTACION DE GEOMETRIA
COMPLEJAAPATIRDEFICHEROSKML.
En una primera fase del proyecto, uno de los requerimientos de la empresa consista e
representarademsdepuntos,tambinlneasypolgonosenelmapadeGoogle.Paraestose
desarrollounalgicadefuncionamientobasadaenlageneracindelainformacinespacialen
formato KML. Conservndose as estos ficheros en un directorio externo al cual se acceda
desdeunaURLguardadaenlabasededatosenlacolumnaLOCALIZACION.Enestecampose
guardaronlasURLqueapuntabanacadaunodelosficherosdelocalizacindelosproyectos.
Este campo permita vincular la informacin alfanumrica asociada a cada proyecto con su
ubicacinespacial.
Para poder mostrar en la interfaz de usuario la localizacin de los proyectos seleccionados
segnuncriteriodebsqueda,habaquerealizarunpedidoalabasededatosmedianteun
mtodo llamado getKML. Este pedido devolva una lista de cadenas de texto con esta
estructura:http://dominio/KML/proyecto_id.kml.Cadaunodeestosficherosdelocalizacin
estaba nombrado por el identificador de proyecto que le corresponde del campo
PROYECTO_ID de la tabla. De esta forma se asociaba la informacin espacial con la
alfanumrica. Una vez obtenida la lista de URL, se ejecutaba otra funcin (loadFile) que se
encargadedescargarestosficheros.
KML es un formato de archivo que se utiliza para mostrar informacin geogrfica en

navegadores terrestres como Google Earth, Google Maps y Google Maps para mviles. KML
utilizaunaestructurabasadaenetiquetasconatributosyelementosanidadosyestbasado
en el estndar XML. Todas las etiquetas distinguen entre maysculas y minsculas y deben
aparecerexactamentecomoaparecenenlaReferenciadeKMLestablecidaporGoogle.Enesta
referencia se indica qu etiquetas son opcionales. Dentro de un elemento determinado, las
etiquetasdebenaparecerenelmismoordenenelqueaparecenenlareferencia.
Los ficheros KML se pueden encontrar estructurados de diferentes formas. Para su

representacin en GoogleMaps deben estar estructurados al menos como se muestra en la
siguiente figura, o sea, con estas etiquetas bsicas que seala la referencia de Google para
estosficheros:
EjemploficheroKMLquerepresentaunpuntoenelespaciogeogrfico.
Anexo1 41
ParaqueestaestructuraseainterpretadaporlaslibrerasdeFLEX,ypuedanserrepresentadas
enelmapa,elequipodelAPIparaflashdesarrollunaslibrerasconunconjuntodeclasesque
sellamaKMLParser.EstalibreraseencargadeidentificarenlosKMLquetipodegeometra
estos representan. Asociando y representando en el mapa todo tipo de geometra simple
(puntos, lneas y polgonos. Funciona leyendo la informacin referente a las coordenadas y
convertirlas en marcadores o markers (objetos del API de GoogleMaps para flash) que
representan los puntos en el mapa, polylines (lneas), o polgonos. El esquema de
funcionamientoquedararepresentadocomosemuestraenlasiguientefigura.
EsquemadefuncionamientodelaaplicacinusandoficherosKMLparalarepresentacinespacialdelosproyectos.
Anexo1 42

Informe Final Mtig11 Roy A. Justo

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

Informe Final Mtig11 Roy A. Justo

Uploaded by

Copyright:

Available Formats

MTIG11Proyectofinal

Este trabajo consiste en la creacin de una aplicacin WEBMAP para la consulta de

A continuacin se describe las caractersticas principales de cada una de las tecnologas

mbito de desarrollo de estructuracin de la aplicacin que maneja las tablas de la base de

Eldiseode lasinterfazdesarrolladasenFlexsebasafundamentalmente en un conjunto de

La ventana de informacin se dise en funcin del contenido que se quera mostrar.

BINDEBUG:queeslaabreviaturadebinarydebugging,yque contiene el cdigo de

Localizar espacialmente los proyectos y relacionar su ubicacin con la informacin

Hacer que ficheros externos a la aplicacin y a la base de datos pudieran ser

Es una Ventana de informacin asociada a los Marcadores o puntos geogrficos

Rutina que le da formato y hace accesible a cualquier parte de la aplicacin, a los

Es una extensin del componente mx:panel de flex, desarrollada con el objetivo de

Carpeta donde se guarda el fichero CSS de estilos de cada componente de la

Familiaridad: los datos XML se manipulan con operadores conocidos, como el

La lgica de programacin empleada es lineal, limpia, modular y slida. Cubre las

El mantenimiento de la aplicacin es ajeno al funcionamiento de la misma. La

Las recomendaciones que se plantean en este trabajo responden a dos directrices

Elaborar una base de datos nica y centralizada de gestin de la informacin

Elaborar una herramienta amigable de gestin de esta base de datos a un nivel

Aadir ms capacidades de consulta de la base de datos desde la aplicacin, como

KML es un formato de archivo que se utiliza para mostrar informacin geogrfica en

Los ficheros KML se pueden encontrar estructurados de diferentes formas. Para su

You might also like