Captulo3.

Diseoeimplementacin

3.1 Casosdeuso
Seelaboraroncasosdeuso(figuras20,21y22)paradefinirlosrolesdelosactoresqueinteractuaran conelsistemaylasfuncionesquestospodranejecutar.Deestaformasetendraunpanoramaclaro de las capacidades generales que el sistema deba implementar, lo cual nos ayud a definir la arquitecturadelaaplicacin.

3.1.1 Definicinderoles
Administrador. Es la persona que se encarga del mantenimiento de la informacin que se encuentraenelsitioweb.Seencargadeagregar,modificaryborrarseccionesinformativasque seencuentranenelsitio. Usuario. Es aquel que hace uso del sitio para consultar informacin de su inters mediante la navegacinylabsquedadedatos. Usuarioweb.Serefierealusuarioqueaccedealsitiomedianteundispositivofijo,talcomouna computadoradeescritorioounalaptop. Usuario mvil. Es el usuario que accede al sitio a travs de un dispositivo porttil, por ejemplo untelfonocelularounPDA.

3.1.2 Diagramadecasosdeuso

Acceder al sitio Usuario <<include>>

<<include>> Acceder al portal mvil Acceder al portal web

Figura20.Casosdeusoparaelaccesoalportalmvil.

41

Diseo e implementacin
Consultar secciones y contenido informativo

Contacto con administradores del portal mvil Usuario mvil

Consultar Foros

Consultar Ofertas y servicios

Figura21.Casodeusosdelusuariomvil.

Administrar Secciones y contenido

Administrador

Administrar comentarios de foros

Administrar comentarios de contacto

Figura22.Casosdeusodeladministradordecontenidos.

3.1.3 Definicindecasosdeuso
3.1.3.1 Ingresaralsistema Actor:Usuario. Propsito.Permitirelaccesoalportalmviloalportalwebdeacuerdoconeldispositivodesde elcualseaccede. Resumen. El sistema identifica el dispositivo (fijo o porttil) que utiliza el usuario y direcciona haciaelportalcorrespondiente. Cursonormaldeloseventos: Actores Sistema 1.Elusuariointentaaccederalsitio. 2. El sistema verifica el dispositivo por el cual se intenta acceder. Si corresponde a un dispositivo porttil se direcciona al portal mvil,sinoesas,sedireccionahaciaelportal web. 42

Captulo 3 3.1.3.2 Consultarseccionesycontenidoinformativo Actor.Usuariomvil. Propsito.Consultadeinformacindeinters. Resumen. El usuario accede al portal mvil con el fin de buscar informacin de su inters. Consultalapginaprincipalyaccedeaalgunaseccin.Sepresentanlassubseccionesotemas yescogeunaparaconsultarsuinformacin. Cursonormaldeloseventos: Actores Sistema 1.Elusuarioaccedealsitio. 2. El sistema muestra las secciones principales delsitio. 3. El usuario selecciona una de las secciones 4. El sistema muestra las subsecciones o informativas. temas. 5.Elusuarioseleccionaeltemaaconsultar. 3.1.3.3 Contactaralosadministradoresdelportalmvil Actor.Usuariomvil. Propsito.Enviarunmensaje,dudaoquejaaladministradordelportalmvil. Resumen.ElusuarioaccedealportalmvilyseleccionalaseccinContacto.Elsistemamuestra unformularioparacapturarelmensaje. Cursonormaldeloseventos: Actores Sistema 1.Elusuarioaccedealsitio. 2. El sistema muestra las secciones principales del sitio. 3. El usuario selecciona la seccin 4. El sistema muestra un formulario para capturar Contacto. elmensaje. 5.Elusuariocapturasusdatospersonales 6. El sistema guarda los datos personales y el yelmensaje. mensaje, despus enva un correo electrnico al administrador del sistema avisando que ha llegadounmensajeatravsdelportalmvil. 3.1.3.4 Consultarforosdelportalmvil Actor.Usuariomvil. Propsito.Consultaryagregarcomentariosenlosforos. Resumen. El usuario ingresa al portal mvil y selecciona la seccin Temas de foros. El usuario selecciona uno de los temas y consulta sus comentarios, tambin tiene la posibilidad de agregarunnuevocomentario. Cursonormaldeloseventos: 43 6. El sistema muestra la informacin correspondienteaesetema.

Diseo e implementacin Actores 1.Elusuarioingresaalsitio. 3.ElusuarioseleccionalaseccinTemasde foros. 5.Elusuarioseleccionauntema. 7.Elusuariodecideagregarunnuevo comentario. 9. Elusuariocapturasucomentario. 3.1.3.5 Buscarofertasyservicios Actor.Usuariomvil. Propsito.Consultarlasofertasyserviciosquesepublicanenelportalmvil. Resumen. El usuario ingresa a la seccin Buscador de ofertas y servicios. El usuario busca y consultaofertasyserviciosdesuinters. Cursonormaldeloseventos: Actores Sistema 1.Elusuarioingresaalsitio. 2. El sistema muestra las secciones principales delsitio. 3.ElusuarioseleccionalaseccinBuscadorde 4. El sistema muestra cajas de texto que ofertasyservicios. permiten capturar palabras clave para realizar la bsqueda de ofertas y servicios. En la parte inferior de la pantalla se muestran las ofertas yserviciosmsrecientes. 5. El usuario realiza una bsqueda de ofertas 6.Elsistemamuestraunalistapaginadadelas o servicios por medio del ingreso de una o ofertas o servicios que concuerden con las mspalabrasclave. palabrasclave. 3.1.3.6 Administrarseccionesycontenido Actor.Administrador. Propsito.Administrarlasseccionesycontenidosquesemuestranenelportalmvil. Resumen. Agregar, modificar y eliminar secciones y/o contenidos. Adems de definir la jerarquadelasseccionesy/ocontenidos. Cursonormaldeloseventos: 44 Sistema 2. El sistema muestra las secciones principales delsitio. 4.Elsistemamuestraunalistadelostemasde losforos. 6. Se muestran los comentarios del tema realizadosporlosusuarios. 8. El sistema muestra un formulario para que elusuariocapturesucomentario. 10. El sistema confirma que el comentario ha sidorecibido.

Captulo 3 Actores 1.EladministradoringresaalCMSmvil. Sistema 2. El sistema muestra las secciones y contenidosactuales.

3. El administrador realiza cualquiera de las 4. El sistema permite la captura, modificacin siguientesacciones: yeliminacindeseccionesycontenidos. Crearsecciones. Crearcontenidosinformativos. Borrarseccionesycontenidos. Cambiar jerarqua de secciones y contenidos. 3.1.3.7 Administrarforos Actores Sistema 1. El administrador ingresa al administrador 2. El sistema muestra los temas de foros deforosdelCMSmvil. disponibles. 3.Eladministradorseleccionaunforo. 4. El sistema muestra los comentarios de los usuarios relacionados al tema del foro seleccionado. Actor.Administrador. Propsito.AdministraryautorizarloscomentariosquesehacenenlaseccinTemasdeforos. Resumen.Autorizaryeliminarloscomentarioshechosenlosforos. Cursonormaldeloseventos:

5. El administrador realiza cualquiera de las 6. El sistema permite la eliminacin y la siguientesacciones: autorizacin de uno o varios comentarios. La autorizacin de un comentario tiene como Eliminarcomentario. consecuencia que ste pueda ser observado Autorizarcomentario. enelportalmvil. 3.1.3.8 Administrarcontacto 45 Actor.Administrador. Propsito.AdministrarlosmensajesqueserealizanpormediodelaseccinContacto. Resumen.EliminarymarcarcomoatendidoslosmensajesdelaseccinContacto. Cursonormaldeloseventos:

Diseo e implementacin Actores Sistema 1. El administrador ingresa al administrador 2. El sistema muestra los mensajes enviados decontactodelCMSmvil. por los usuarios a travs de la seccin Contacto. 3. El administrador realiza cualquiera de las 4. El sistema permite borrar y marcar como siguientesacciones: atendidounoovariosmensajes. Eliminarmensaje. Marcarmensajecomoatendido.

3.2 Diseodebasededatos
Antesdedescribireldiseodelabasededatossedebetenerencuentacualeralaestructurageneral delportalmvil.Lapginaprincipalcontenaunalistadelasseccionesquecomponanelsitio.Cuando sedabaclicenunaseccinsedesplegabasudescripcinypuedeonocontenerenlaceshaciasussub secciones. Al dar clic en una subseccin se podan mostrar otras subsecciones y/o algn contenido. Las secciones y subsecciones contaban con una breve descripcin y su funcin era organizar la informacin de forma jerrquica. Los contenidos contenan la informacin la cual estaba formada por unoovariosdelossiguienteselementos:texto,imgenes,animacionesogrficas. De esta manera, se utiliz una estructura de rbol para representar la organizacin de las secciones y contenidos. Las secciones y los contenidos estaban organizados de manera jerrquica, en donde una subseccin pertenece a una seccin y una subseccin puede o no tener secciones asociadas. De modo que para poder realizar dicha jerarquizacin se cre la siguiente entidad con relacin recursiva (figura23):

Figura23.EntidadSECCIONconrelacinrecursiva

Dnde: clave.Camponumriconicoquesirveparaidentificarunaseccin/contenido. titulo.Campoalfanumricoparadesignarelttulodelaseccin/contenido. descripcion.Campoalfanumricoparaespecificarunabrevedescripcindeunaseccin. imagen.Campoalfanumricoparaguardarladireccindedeterminadaimagen. 46

Captulo 3 contenido_html. Campo alfanumrico para guardar contenido HTML. Este campo permite al usuarioadministradorpodereditarelcontenidoquesemuestraencadaseccin.Caberesaltar queestecampodebepermitiralmacenarunagrancantidaddeinformacin. url.Campoalfanumrico. La entidad descrita tiene una relacin a si misma que se lee de la siguiente forma: Cada SECCION contieneceroomsSECCIONES(HIJOS)yCadaSECCIONperteneceaceroounaSECCION(PADRE). La entidad SECCION fue el primer intento para poder administrar la jerarquizacin, pero debido a que se hizo una distincin entre secciones y contenidos se crearon dos entidades dbiles SECCION y CONTENIDO,lascualesdependendelaentidadfuerteJERARQUIA_SECCION. Lasentidadesdbilessedefinieronas: SECCION.Entidadquecontendraatributosnicosdeunaseccin. CONTENIDO.EntidadquecontendraelatributodeCONTENIDO_HTML Ylaentidadfuerte: JERARQUIA_SECCION.EstaentidadtendralosatributoscomunesdeSECCIONyCONTENIDO. Estasentidadessedescribenadetalleenelsiguienteapartado. 47

Diseo e implementacin

3.2.1 DiagramaEntidadRelacin(DER)
ElDERsemuestrapormediodelsiguientediagrama(figura24).

Figura24.DERdelportalmvil

48

Captulo 3 3.2.1.1 Descripcindeentidadesyrelaciones Entidades SECCION. Representaba una seccin del portal mvil que permita estructurar y organizar la informacindelsitio.Susatributoseranlossiguientes: o descripcin.Descripcindelaseccin. o imagen.Imagendelaseccin. CONTENIDO.Representabalainformacinlacualpodaestarconformadapor:texto,imgenes ygrficasquesemostrabanenunadeterminadaseccindelsitio o contenido_xhtml.CdigoXHTML. JERAQUIA_SECCION. Permita representar la jerarqua que exista entre las SECCIONES y CONTENIDOSdelportalmvil. o clave.Identificadornicodelaseccin/contenido. o titulo.Ttulodelaseccin/contenido. o tipo.Banderaquediferenciabaunaseccindeuncontenido. o fecha_creacion.Fechadecreacindelaseccin/contenido. o fecha_modificacion.Fechadelaltimamodificacindelaseccin/contenido. o activa. Indicaba si la seccin/contenido se mostraba en el portal mvil. Este atributo surgi debido a la necesidad de que el usuario pudiera crear una seccin y sus sub secciones y/o contenidos y al final publicar toda la seccin para no hacerlo parcialmente. o orden. Indicaba el orden en el que aparecan las secciones/contenidos en el portal mvil. o editable.Indicabasilaseccin/contenidopodasermodificada. o borrable.Indicabasilaseccin/contenidopodasereliminada. o permite_hijos.Indicabasilaseccinpodatenersubsecciones/contenidos. o url.LaURLporlacualseaccedaalaseccin/contenido. PLANTILLA. Representaban los componentes de software que se encargaban de construir la interfazgrficadeunaseccin/contenido. Esas plantillas tenan determinadas partes dinmicas que cambiaban de acuerdo a ciertas accionesdelusuario. o clave.Identificadornicodelaplantilla. o nombre.Nombredelaplantilla. o url.Direccindelaubicacindelaplantilla. CONTACTO.Representabaelcomentarioqueunusuariohizoatravsdelportalmvilhacialos usuariosadministradoresdelsistema. o clave.Identificadornicodelmensaje. o nombre.Nombredelusuarioquehizoelmensaje. o telefono.Nmerotelefnicodelusuarioquehizoelmensaje. o correo.Direccindecorreoelectrnicoquehizoelmensaje. o empresa.Nombredelaempresaalaquepertenecaelusuario o asunto.Temadelmensaje. o comentario.Textodelmensaje. o fecha.Fechadecreacindelmensaje. o atendido.Valorquedefinasielmensajehasidoatendido. 49

Diseo e implementacin USUARIO.Representabaunusuarioadministradordelportalmvil. o clave.Identificadornicodelusuarioadministrador. o nombre.Nombredelusuarioadministrador. o correo.Direccindecorreoelectrnicodelusuarioadministrador. o contrasea.ContraseadeaccesoalCMSmvildelusuarioadministrador. o vigencia.Valorqueindicabasielusuarioadministradorestabavigente. FORO_COMENTARIO. Representaba el comentario hecho por el usuario en un foro determinado. o clave.Identificadornicodelcomentarioaunforo. o autor.Nombredelusuarioquehizoelcomentario. o comentario.Textodelcomentario. o fecha.Fechadecreacindelcomentario o autorizado. Indicaba si el comentario era autorizado por el usuario administrador para serpublicadoenlosforos. FORO. Representaba un tema de foro. Cabe sealar que esta entidad ya exista como tabla en labasededatosdelcliente. Relaciones JERARQUIA_SECCION JERARQUIA_SECCION. Relacin recursiva que designaba lo siguiente: Cada SECCION contiene cero o ms SECCIONES/CONTENIDOS (HIJOS) y una SECCION/CONTENIDO pertenece a cero o una SECCION (PADRE). Esta relacin permite gestionarlajerarquadelassecciones. JERARQUIA_SECCION SECCION. Relacin que permita asociar una SECCION con su sper entidadJERARQUIA_SECCION. JERARQUIA_SECCION CONTENIDO. Relacin que permita asociar un CONTENIDO con su sperentidadJERARQUIA_SECCION. PLANTILLA JERARQUIA_SECCION. Relacin que asociaba una seccin/contenido al componente que construa la interfaz grfica. Esta relacin se lee de la siguiente manera: cada PLANTILLA est asignada a muchas SECCIONES/CONTENIDOS y cada SECCION/CONTENIDO tieneasignadaunayslounaPLANTILLA. USUARIOJERARQUIA_SECCION(Modificacin).Relacinconelobjetivoderegistrarelusuario administrador que modific por ltima vez una seccin o contenido. La relacin se lee de la siguiente manera: Cada USUARIO modifica cero o ms SECCIONES/CONTENIDOS y Cada SECCION/CONTENIDOesmodificadaporceroounUSUARIO. USUARIO JERARQUIA_SECCION (Creacin). Relacin con el objetivo de registrar al usuario administrador que cre una seccin o contenido. La relacin se lee de la siguiente manera: cada USUARIO crea una o ms SECCIONES/CONTENIDOS y cada SECCION/CONTENIDO es creadaporunUSUARIO. FOROFORO_COMENTARIO.Relacinqueseleedelasiguientemanera:cadaFOROtienecero omsCOMENTARIOSycadaCOMENTARIOperteneceaunFORO.

50

Captulo 3 3.2.1.2 Diagramadelmodelodedatosofsico En el siguiente diagrama (figura 25) muestra el mapeo a tablas en una base de datos ORACLE correspondienteconelDER.

Figura25.Diagramadelmodelodedatos.

51

Diseo e implementacin

3.2.2 Diccionariodedatos
Notacindetablas: LP.Llaveprimaria. LF.Llavefornea. Tabla:PM_CONTACTOS Campo CONTAC_ID CONTAC_NOMBRE Tipodedato NUMBER(7) VARCHAR2(30) Nulo Descripcindelcampo No Clavenicade contacto. Si Nombredeusuario quehizoel comentario. Si Nmerotelefnico. Si Direccindecorreo electrnico. Si Nombredeempresa. Si Asuntodel comentario. Si Comentario. Si Fechadecreacindel comentario. Si Bandera(S/N)para marcarelcomentario comoatendido. LP Si No LF No No

CONTAC_TELEFONO CONTAC_CORREO CONTAC_EMPRESA CONTAC_ASUNTO CONTAC_COMENTARIO CONTAC_FECHA CONTAC_ATENDIDO

VARCHAR2(25) VARCHAR2(100) VARCHAR2(100) VARCHAR2(50) VARCHAR2(200) DATE VARCHAR2(1)

No No No No No No No

No No No No No No No

Tabla:PM_USUARIOS Campo USU_ID USU_NOMBRE USU_CORREO USU_CONTRASENA USU_VIGENCIA Tipodedato NUMBER(3) VARCHAR2(200) VARCHAR2(100) VARCHAR2(35) VARCHAR2(1) Nulo Descripcindelcampo No Clavenicadeusuario administrador. No Nombre. No Direccindecorreo electrniconica. No Contrasea. No Bandera(S/N)para identificarsielusuario estvigente. LP Si No No No No LF No No No No No

Tabla:PM_FORO_COMENTARIOS Campo Tipodedato FORO_ID NUMBER(4) COMEN_ID NUMBER(6) 52 Nulo Descripcindelcampo No Clavenicadeforo. No Clavenicade comentario. LP Si Si LF Si No

Captulo 3 COMEN_AUTOR Nombredelautordel comentario. COMEN_TEXTO VARCHAR2(100) No Comentario COMEN_FECHA DATE No Fechadecreacindel comentario. COMEN_AUTORIZADO VARCHAR2(1) No Bandera(S/N)para identificarsiel comentariohasido autorizadopara publicarseenelportal mvil. Restricciones: PM_FORO_COMEN_FKforeignkey(FORO_ID)references POR_FCATEGORY(FCATEGORY_ID)ondeletecascade; VARCHAR2(100) No No No No Si No No No No

Tabla:PM_PLANTILLAS Campo PLAN_ID PLAN_NOMBRE PLAN_URL Tipodedato NUMBER(2) VARCHAR2(30) VARCHAR2(50) Nulo No No No Descripcindelcampo Clavenicadeplantilla. Nombre. Ruta/URLdel componentede softwarequeconstruye determinadaseccin. LP Si No No LF No No No

Tabla:PM_JERAQUIA_SECCIONES Campo Tipodedato SEC_ID NUMBER(5) SEC_TITULO SEC_TIPO VARCHAR2(60) VARCHAR2(1) Nulo Descripcindelcampo No Clavenicadela seccin/contenido No Ttulodela seccin/contenido. No Bandera(S/C)para identificarsisetratadeuna seccinodeuncontenido. Si Clavenicadelaseccin (padre)alaquepertenece laseccin/contenido. No Clavedelusuarioquecrea seccin/contenido. No Fechadecreacin. Si Clavedeusuarioque modifica. Si Fechademodificacin. No Bandera(S/N)para identificarsila seccin/contenidoest LP Si LF Si

No No No No

SEC_PADRE_ID

NUMBER(5)

No No

SEC_USU_CREA SEC_FECHA_CREA SEC_USU_MODIFICA SEC_FECHA_MODIFICA SEC_ACTIVA

NUMBER(3) DATE NUMBER(3) DATE VARCHAR2(2)

No Si No No No Si No No No No

53

Diseo e implementacin activa. Ordenqueguardala No No seccin/contenido. SEC_PLANTILLA NUMBER(2) No Clavedeplantilla No Si relacionadaconla seccin/contenido. SEC_EDITABLE VARCHAR2(1) No Banderaparaidentificarlas No No secciones/contenidos editables. SEC_PERMITE_HIJOS VARCHAR2(1) No Banderaparaidentificar No No secciones/contenidosque permitentenersub secciones/contenidos. SEC_BORRABLE VARCHAR2(1) No Banderaparadefinirsiuna No No seccinpuedeserono eliminada. SEC_URL VARCHAR2(35) No URLquecapturaelusuario No No administradorparalas secciones/contenidos. Restricciones: PM_JER_SEC_PARENT_FKforeignkey(SEC_PADRE_ID)references PM_JERARQUIA_SECCIONES(SEC_ID)ondeletecascade; PM_JER_USU_CREA_FKforeignkey(SEC_USU_CREA)references PM_USUARIOS(USU_ID); PM_JER_USU_MOD_FKforeignkey(SEC_USU_MODIFICA)references PM_USUARIO(USU_ID); SEC_ORDEN NUMBER(3) No Tabla:PM_SECCIONES Campo SEC_ID Nulo Descripcindelcampo No Clavedelaseccin heredadade PM_JERARQUIA_SECCIONES VARCHAR2(300) No Descripcinbrevedeloque tratalaseccin VARCHAR2(100) No Rutadondeseencuentrala imagendelaseccin PM_SEC_ID_FKforeignkey(SEC_ID)references PM_JERARQUIA_SECCIONES(SEC_ID)ondeletecascade Tipodedato NUMBER(5) LP Si LF Si

SEC_DESCRIPCION SEC_IMAGEN_URL Restricciones:

No No

No No

Tabla:PM_CONTENIDOS Campo Tipodedato CON_ID NUMBER(5)

Nulo Descripcindelcampo LP No Clavedelcontenido Si heredadade PM_JERARQUIA_SECCIONES 54

LF Si

Captulo 3 CON_CONTENIDO Restricciones: CLOB No CdigoXHTML. PM_CON_ID_FKforeignkey(CON_ID)references PM_JERARQUIA_SECCIONES(SEC_ID)ondeletecascade; No No

3.3 Diseoydiagramadeclasesparalapersistenciadedatos
En los sistemas de informacin que se basan en lenguajes de programacin orientados objetos es necesario disear y crear clases que permitan almacenar la informacin que se obtiene de la base de datos. Dichas clases son de gran importancia porque permiten el flujo de la informacin a travs de todosloscomponentesinvolucradosenlaaplicacin. Por cada entidad que se tena en el DER se dise una clase que serva para almacenar un registro de una tabla especfica en la base de datos. Tambin se definieron las relaciones que existan entre estas clasesyconestoseestablecielsiguientediagramadeclases(figura26):
Usuario +clave +nombre +correo +contrasena +vigencia Foro +Nombre +Descripcion

1 0..* ForoComentario +clave +autor +comentario +fecha +autorizado

0..1 0..* 0..1 Contacto +clave +nombre +telefono +correo +empresa +asunto +comentario +fecha +atendido JerarquiaSeccion +clave +titulo +tipo +activa +orden +editable +borrable +permiteHijos +url

0..*

Plantilla 0..* 1 +Clave +Nombre +url

Seccion +descripcion +imagenUrl

Contenido +contenido

Figura26.Diagramadeclases

55

Diseo e implementacin Eneldiagramaseobservanlasrelacionesentrelasclasesyelnombredelaspropiedadesdecadauna deellas.Losmtodosnosemuestranporqueseexplicanmsadelante. Cadaunadelasclasespresentadaseneldiagramatienelassiguientescaractersticas: Sus propiedades son de tipo PRIVATE, es decir, que las dems clases no tienen acceso a estas propiedades. Por cada propiedad existe un mtodo con el prefijo get y otro con el prefijo set que sirve para teneraccesoalapropiedad.Elmtodoconelprefijogetdevuelveelvalordelapropiedadyel mtodoconelprefijosetloactualiza. Ejemplificacindelarelacinentrelasclasesylastablasdebasededatos. La figura 27 muestra la relacin que existe entre la clase JerarquiaSeccion (cdigo Java) y la tabla PM_JERARQUIA_SECCIONES(basededatos).

Figura27.RelacinentrelaclaseJerarquiaSeccionylatablaPM_JERAQUIA_SECCIONES

Cada uno de los campos de la tabla tienen correspondencia con las propiedades de la clase Java, en donde el tipo de dato del campo es similar al tipo de dato de la propiedad de la clase. Por ejemplo: SEC_ID tipo numrico se mapea con la propiedad clave que es un objeto tipo numrico, el campo SEC_TITULOtipocadenasemapeaconlapropiedadttulotipocadena,etc. 56

Captulo 3 Por otro lado podemos ver que los campos SEC_PLANTILLA (para la relacin con PM_PLANTILLAS), SEC_USU_CREA (para la relacin con PM_USUARIOS) y SEC_USU_MODIFICA que sirven para la relacin con otras tablas, se mapean a propiedades de tipo Plantilla y Usuario. La clase Plantilla es la representacin de la tabla PM_PLANTILLAS y la clase Usuario es la representacin de la tabla PM_USUARIOS. De esta forma un objeto del tipo JerarquiaSeccion es capaz de guardar la informacin delasentidadesconlascualesserelaciona. Exista otro caso en el que el mapeo no era directo y se trata del campo SEC_PADRE_ID, este campo era numrico y fue diseado para soportar la relacin recursiva que se presenta porque una seccin puede contener ms secciones/contenidos. Mientras que en la clase se muestra que la relacin entre una seccin y sus subsecciones se representa mediante un arreglo de tipo JerarquiaSeccion que sirve paraalmacenartodoslassubsecciones/contenidosquepertenecenaesaseccin. En el desarrollo de la aplicacin a la clase JerarquiaSeccion se le agregaron otras dos propiedades que permitenconstruirlabarradenavegacin: RutaNombres. Propiedad tipo String que sirvi para guardar los nombres que se desplegaran enlabarradenavegacin. RutaUrls. Propiedad tipo String que sirvi para guardar las URLs necesarias para el funcionamientodelabarradenavegacin. CabedestacarquelaclaseJerarquiaSeccionesabstracta,esdecir,nosepuedehacerusodeestaclase directamente sino por medio de clases que hereden su compartimiento y sus propiedades. Esta clase sirvepararepresentarlascaractersticascomunesqueexistenentreSeccinyContenido,sinembargo noseutilizdirectamente,sinopormediodesusclaseshijas:SeccinyContenido. 57

Diseo e implementacin

3.4 Diseodepantallasdelportalmvil
Laspantallasdelportalmviltenanqueestaroptimizadasparaservisualizadasdemaneracorrectaen cualquier dispositivo mvil y contar con las siguientes caractersticas: navegacin sencilla, mnimo nmero de clics necesarios para llegar a una pgina especfica y brindar la posibilidad de regresar al puntodeinicioconunsloclic. Tambin se deba considerar la resolucin de las pantallas de los dispositivos mviles para definir la maquetacin del sitio, as podramos asegurar que el sitio se visualizara de la misma forma sin importareldispositivodesdeelqueaccedeelusuario.

3.4.1 Resolucinynavegadoresdelosdispositivosmviles
[La siguiente tabla muestra la resolucin y navegador web que utilizaban los principales dispositivos mvilesusadosloscualespretendansersoportadosporelportalmvil]60. Dispositivomvil Resolucin(px) Navegadorweb iPhone 480x320 SafariMobile iPod 480x320 SafariMobile BlackBerryBold 480x320 NavegadorBlackberry (navegadorHTMLcompleto) BlackBerryBold9700 480x360 NavegadorBlackberry (navegadorHTMLcompleto) PalmTreoPro 320x320 WindowsInternetExplorer Mobile HTCTouchDiamond 480x640 Opera9.5 SamsungOmniaII 480x800 WindowsInternetExplorer Mobile MotorolaDEXT 320x480 NavegadorHTMLcompleto MotorolaQA4 240x400 LGChocolateB40 800x345 WAPyXHTML LGCrystalGD900 852x480 LGGM730 240x400 InternetExplorer6.0 NokiaE72 320x240 NavegadorNokiaMiniMap Nokia5235 640x360 NavegadorOSS SamsungBeatDISCM6710 240x400 Navegadorwebcompleto PalmPixi 320x400 Navegadorwebcompleto Comosepuedeobservarenlatablaanteriorlasresolucionesdelosdispositivosylosnavegadoresweb sontantoscomodispositivosmvilesexistenenlaactualidad.Porlotantoerafundamentalcontarcon un sitio que se pudiera mostrar de manera correcta en cualquier dispositivo mvil sin importar la resolucindesupantalla.
60

Especificaciones obtenidas con base en la informacin disponible hasta diciembre de 2010

58

Captulo 3

3.4.2 Mapadelsitio
Elportalmvildebacontarconlassiguientesseccionesinciales:

Figura28.Mapadelsitiodelportalmvil

El sitio consista de las siguientes secciones principales; Principal, Institucin, Programas, Trmites, Buscadordeofertasyservicios,Transparencia,Boletines,Directorio,TemasdeforosyContacto. En el sitio existan secciones estticas y secciones dinmicas. Las secciones estticas tenan un funcionamiento establecido que no poda ser modificado ni eliminado por medio del CMS mvil, en cambio, las secciones dinmicas eran aquellas que eran gestionadas por el usuario administrador del 59

Diseo e implementacin sistemaatravsdelCMSMvil. Las secciones estticas eran: Buscador de ofertas y servicios, Temas de foros y Contacto. A su vez, las secciones dinmicas eran aquellas marcadas en un recuadro alrededor del nombre (vase figura 28) y podanaumentarosereliminadaspormediodelCMSmvil.

3.4.3 Diseodelaestructurabsicadelaspginasportalmvil
En el diseo de las pginas del portal mvil fue primordial la definicin de una plantilla o estructura bsicaquefueracompartidaportodaslaspginasdelportal.Lacreacindeestaestructuradefinirala forma en que el usuario navegara en el sitio, adems brindara uniformidad e identidad a todas las seccionesycontenidos. La estructura bsica del portal mvil se defini con los siguientes elementos: logo, ttulo de seccin, ttulo de pgina, barra de navegacin, cuerpo y pie de pgina. El siguiente diagrama (figura 29) muestralaestructurabsicadelportal.

Figura29.Estructuradelportalmvil.

LaestructuraestababasadaenunaarquitecturaDrilDown(vaseelapartado1.9.2.1).Endondeel portalsedividienseccionesysubsecciones.Todaslasseccionespertenecenalaseccinprincipal. Cadaseccinpuedeonotenerseccionesanidadas.

3.4.4 Diagramadehojasdeestilo(CSS)
Las pginas del portal utilizaban hojas de estilo para mostrar su contenido con una presentacin especfica. La estructura general del portal fue definida por medio de hojas de estilo generales que 60

Captulo 3 definanelaspectodetodaslaspginasdelsitio. Por otra lado, el estilo de cada seccin estaba formado por las hojas generales y una o varias hojas especficasqueservanparadefinirelestiloparticulardecadaseccin. Elsiguientediagrama(figura30)muestralashojasdeestiloqueutilizabacadaunadelasseccionesdel portalmvil.

Figura30.Jerarquadehojasdeestilo

Al observar el diagrama anterior podemos notar que todas las pginas tenan dos estilos en comn: general.css y general_seccion.css. Dichos estilos determinaron la estructura bsica de todas las 61

Diseo e implementacin pginasdelportal.

3.4.5 Estilogeneraldelsitio
La figura 31 muestra la forma en que se visualizaba la estructura general del sitio en un dispositivo mvil.

Figura31.Estilogeneraldelportalmvil.

Acontinuacinsedescribecadaunodeloselementosdelaestructurabsicadelportal.Losnombres deloscoloressemuestranennotacinhexadecimal.Porejemplo,#FFFFFFcorrespondealcolor blancoy#000000correspondealcolornegro. 3.4.5.1 Logo Ellogodelsitiotenalassiguientescaractersticas: Colordefondo: Tamaodelaimagen 3.4.5.2 Barradenavegacin La barra de navegacin estaba formada por los nombres de las secciones que el usuario ha visitado parallegaralapginaqueobservabaenpantalla. As, la barra permita que el usuario ubicara el lugar del portal en el que se encontraba y brindaba la posibilidadderegresaralasseccionesanteriorespormediodeunclic. Cada uno de los elementos de la barra de navegacin era un enlace hacia una seccin especfica a excepcin del ltimo elemento, de izquierda a derecha, el cual slo mostraba el nombre de la pgina 62 #FFFFFF 150x90px

Captulo 3 actual. En la figura anterior se muestra la barra de navegacin generada en el momento que se consult la pgina con nombre contenido.xhtml. As, para regresar a la pgina principal o a la pgina inicial de la seccinInstitucinesnecesariounsloclicporpartedelusuario. 3.4.5.3 Ttulodeseccin Mostrabaelttulodelaseccinalacualpertenecalapgina. Colordefondo: Tamaodelafuente Colordelafuente 3.4.5.4 Ttulodepgina 3.4.5.5 Piedepgina Colordefondo: Tamaodelafuente Colordelafuente #0C5979 small #FFFFFF Colordefondo: Tamaodelafuente Colordelafuente #EE730C large #FFFFFF Colordefondo: Tamaodelafuente Colordelafuente #0C5979 Small #FFFFFF

#0C5979 xlarge #FFFFFF

3.4.6 Estilosdesecciones
Los estilos que se definieron para las secciones del portal mvil fueron: Principal, Bsqueda, Resultados, Detalles, Foro, Contacto, Seccin y Contenido. Cabe aclarar que slo se describir el estilo delcuerpodelaseccindebidoaqueelestilogeneralsedefinianteriormente. 3.4.6.1 Principal Eselestilodefinidoparalapginainicialdelsitio(figura32),lacualcontieneunalistadelassecciones que componen el sitio. Cada uno de los elementos de la lista de secciones era un enlace hacia la pginainicialdedichaseccin.

63

Diseo e implementacin

Figura32.Pginaprincipal(EstiloPrincipal)

Descripcindelcontenido Colordefondo: Tamaodelafuente Colordelafuente #EBEBEB small #0C5979

3.4.6.2 Bsqueda El estilo Bsqueda fue utilizado por la seccin Buscador de ofertas y servicios (figura 33). Esta seccin tena como objetivo realizar bsquedas de ofertas y servicios. Tambin mostraba las ofertas y los serviciosmsrecientes.

Figura33.SeccinBsquedadeofertasyservicios(estilo:Bsqueda)

64

Captulo 3 Descripcindelcontenido Buscar: Colordefondo: #FFFFFF Tamaodelafuente small Colordelafuente #0C5979 BotnBuscar Colordefondo: #0C5979 Tamaodelafuente Small Colordelafuente #FFFFFF OfrecimientosySolicitudes(ttulo): Colordefondo: #CCCCCC Tamaodelafuente small Efectosdefuente Negrita Colordelafuente #0C5979 OfrecimientosySolicitudes(descripcin): Colordefondo: #EBEBEB Tamaodelafuente small Colordelafuente #0C5979

3.4.6.3 Resultados

El estilo Resultados fue utilizado por las pginas que tenan como objetivo mostrar una lista resultados, por ejemplo para mostrar los resultados de la bsqueda de ofrecimientos/solicitudes. Los resultados se mostraban por medio de un listado de elementos paginados de cinco en cinco (vase figura 34). Cada elemento consista en: ttulo, descripcin corta, el nombre del ofertante/solicitante y la fecha de publicacin. El ttulo de cada elemento era un enlace para ver el detalle de la oferta/solicitud. El paginado estaba formado por uno o varios de los siguientes enlaces: primera pgina (|<<), pgina anterior(<),pginasiguiente(>)yltimapgina(>>|).

65

Diseo e implementacin

Figura34.SeccinBuscadordeofertasyservicios(estilo:Resultados)

Descripcindelcontenido Paginado: Colordefondo: #FFFFFF Tamaodelafuente medium Colordelafuente #0C5979 OfrecimientosySolicitudes(ttulo): Colordefondo: #CCCCCC Tamaodelafuente small Efectosdefuente Negrita Colordelafuente #0C5979 OfrecimientosySolicitudes(descripcin): Colordefondo: #EBEBEB Tamaodelafuente small Colordelafuente #0C5979

66

Captulo 3 3.4.6.4 Detalles El estilo Detalles fue creado para las pginas que eran utilizadas para mostrar toda la informacin asociadaaunregistroespecficodelosresultados(vasefigura35).Porejemplo,mostrareldetallede unofrecimientooservicio.

Figura35.SeccinDetalle(estilo:Detalles)

Descripcindelcontenido Ttulo: Colordefondo: Tamaodelafuente Efectosdefuente Colordelafuente Descripcin: Colordefondo: Tamaodelafuente Colordelafuente #CCCCCC small Negrita #0C5979

#EBEBEB small #0C5979

67

Diseo e implementacin 3.4.6.5 Foro ElestiloForofueutilizadoporlaseccinTemasdeForos,lacualcontienelalistadeforos(vasefigura 36). Dicha lista contena ttulo, descripcin del foro, nmero de comentarios asociados y fecha de publicacin.

Figura36.SeccindeTemasdeForos(estilo:Foro)

Descripcindelcontenido Paginado: Colordefondo: Tamaodelafuente Colordelafuente Ttulo: Colordefondo: Tamaodelafuente Efectosdefuente Colordelafuente Descripcin: Colordefondo: Tamaodelafuente Colordelafuente 68 #FFFFFF medium #0C5979

#CCCCCC small Negrita #0C5979

#EBEBEB small #0C5979

Captulo 3 3.4.6.6 Contacto El estilo Contacto fue utilizado para mostrar el formulario que permite a los usuarios entrar en comunicacin con el usuario administrador del sistema. La figura 37 muestra como se mostraba la seccindecontactoenundispositivomvil.

Figura37.SeccinContacto(estilo:Contacto)

Descripcindelcontenido Tamaodelafuente: Colordefondo: Tamaodelafuente Colordelafuente Anchocolumnaderecha Anchocolumnaizquierda #FFFFFF Mdium #0C5979 30% 70%

69

Diseo e implementacin 3.4.6.7 Seccin ElestiloSeccinfueutilizadoporlasseccionesdinmicas,stasestabanformadasporunadescripcin yenlaceshaciasussubseccionesy/ocontenidos.Lafigura38muestraunejemplodeunaseccin.

Figura38.EjemplodeseccindeTrmite(estilo:Seccin)

3.4.6.8 Contenido El estilo Contenido fue utilizado por los contenidos de una seccin. Los contenidos estaban compuestos por texto, imgenes, hipervnculos, enlaces externos, etc. La figura 39 muestra un ejemplodeuncontenido.

Figura39.Ejemplodecontenido:Trmite1(Estilo:Seccin)

70

Captulo 3

3.4.7 Consideracionesdediseodelportalmvil
3.4.7.1 EspecificacinCSSdelashojasdeestilo Hastaahorahemoshabladodehojasdeestiloencascada(CSS)sinmencionarlaespecificacinquese utilizparaelportalmvil.LaespecificacinqueseutilizesWirelessCSSProfile.Dichaespecificacin utilizalasetiquetasmscomunesyquesonsoportadasporlamayoradelosdispositivosmviles. Cada una de las hojas de estilo fue creada tomando en cuenta las reglas que establece W3C para el diseodesitiosparadispositivosmviles. As,alutilizarunaespecificacindeCSSyalutilizarlasreglasdeestilodeW3Cpodamosasegurarque el portal mvil sera desplegado de manera correcta en cualquier dispositivo mvil sin importar su resolucindepantallaysunavegadordeInternet. 3.4.7.2 Usodelaetiquetadiv El diseo del sitio se realiz a travs del uso de etiquetas <div> en lugar de tablas <table><tr><td>. Esto se deba a que era posible que las tablas no se mostraran de manera correcta en pantallas de tamao reducido. Una de las consecuencias de usar tablas puede ser la aparicin de un scroll horizontaly/overtical. La figura 40 se muestra la estructura bsica de las pginas del portal mvil haciendo uso de etiquetas <div>:

Figura40.Maquetacinconetiquetas<div>

71

Diseo e implementacin 3.4.7.3 Tamaodelasimgenes El tamao de las imgenes del sitio deba ser pequeo debido a que la velocidad de descarga en los dispositivosmvileseslentaencomparacinconlavelocidadqueserecibeenundispositivofijoode escritorio. El tamao mximo permitido de una imagen en el portal fue de 20Kb, dicha restriccin fue aadidaenelCMSmvil. 3.4.7.4 Teclasdeaccesorpido Las teclas de acceso rpido (vase figura 41) permitan acceder a los enlaces del sitio por medio de una combinacin de una tecla especfica y una tecla numrica sin necesidad de posicionar el curso sobreelenlacemencionado.

Figura41.Tecladeaccesorpido

El sitio contena enlaces que podan ser accedidos por medio de las teclas de acceso rpido, tales como las listas que se encontraban en la pgina principal. Para que un enlace pueda ser accedido por unateclasedebeagregarlapropiedadacceskeyenelenlace,delasiguienteforma: <ahref=accesskey="1">enlace</a> 3.4.7.5 Navegacin Elportalmvilbrindabaunanavegacinsencillabasadaenseccionesycontenidos.Cadaseccinpoda contener uno o ms secciones/contenidos y a su vez poda tener secciones hijas. De este modo un contenido siempre perteneca a una seccin y todas las secciones del sitio pertenecen a la pgina principal. Al navegar en el sitio el usuario visualizaba una barra de navegacin en la parte superior y en la parte inferior. Si el contenido de la pgina era grande siempre se visualizara al menos una de las barras de navegacin. La barra de navegacin estaba formada por un enlace hacia la pgina principal, uno o ms enlaces hacia las secciones a las cuales perteneca la pgina consultada y el nombre de la pgina consultada (vasefigura42).

Figura42.Estructuradelabarradenavegacin

Enlafigura43semuestraunejemplodelabarradenavegacindelsitio. 72

Captulo 3

Figura43.Ejemplodebarradenavegacin.

3.4.7.6 Codificacindecaracteres La codificacin de caracteres del portal mvil es UTF8, la cual es la ms apropiada para el alfabeto latino.Acontinuacinsemuestranlaslneasqueseagregaronenlaspginasxhtml: <?xmlversion="1.0"encoding="UTF8"?> <metahttpequiv="ContentType"content="text/html;charset=utf8"/> 3.4.7.7 Nousarscriptsycookies Evitar el uso de scripts de JavaScript y CSS dentro del cdigo de una pgina XHTML. La ejecucin de cdigo JavaScript no es soportada por todos los navegadores de los dispositivos mviles. Tambin se debe evitar la insercin de cdigo CSS dentro de las pginas XHTML, en lugar de la insercin se debe almacenar el cdigo CSS en un archivo separado e incluirlo en la pgina XHTML a travs de un enlace que apunte a dicho archivo. El portal no hace uso de cookies, las cuales son utilizadas en otros sitios paraalmacenarvariablespertenecientesaformularios. 3.4.7.8 TamaoligerodelosarchivosCSSyXHTML El tamao de los archivos CSS y XHTML era reducido, en donde el tamao de los archivos XHTML era menora10KByeltamaodelosarchivosCSSeramenora4KB. 3.4.7.9 Manejodeerrores Encasodequealhacerusodelsitiosucedieraunerrorsedebedesplegabaunapginadeerror(vase figura44).

73

Diseo e implementacin

Figura44.Pginadeerror

3.4.7.10 ValidacinW3C Las pginas HTML y las hojas de estilo (CSS) fueron validadas por medio de los sitios de la W3C. Para realizar la validacin de las pginas XHTML se us W3C Markup Validation Service (http://validator.w3.org/). Para realizar la validacin de las hojas de estilo se utiliz CSS Validation Service(http://jigsaw.w3.org/cssvalidator/). Al validar tanto el contenido XHTML y CSS el sitio podra ser desplegado de manera correcta en la mayoradelosdispositivosmvilesexistentessinimportarsuresolucindepantalla.

74

Captulo 3

3.5 Distribucindelaaplicacinenmdulos
[Una de los paradigmas de programacin con mayor uso en la construccin de sistemas informticos es la programacin modular. La programacin modular consiste en dividir un programa en mdulos o subprogramasmssimples,cadaunodeloscualespuedellamaraotrosmdulosofuncionesydonde cadamduloesrelativamenteindependientedelresto. Laprogramacinmodularpresentavariasventajas: Facilitalacomprensindelproblemaysuresolucinescalonada. Aumentalaclaridadylegibilidaddelosprogramas. Permite que varios programadores trabajen en el mismo problema a la vez, puesto que cada unopuedetrabajarenunoovariosmdulosdemaneraindependiente. Reduceeltiempodedesarrollo,reutilizandomdulospreviamentedesarrollados. Mejora la fiabilidad de los programas, porque es ms sencillo disear y depurar mdulos pequeosqueprogramasenormes. Facilitaelmantenimientodelosprogramas.]61 La programacin modular sirvi para estructurar la aplicacin de forma que se pudieran organizar y repartir las labores de desarrollo y tambin poder medir el avance del proyecto a travs de mdulos terminados. Despus de realizar el anlisis de los requerimientos y los casos de uso se dividi la aplicacin en dos grandesmdulosprincipales:portalmvilyCMSmvil. Elmduloportalmvilsedividienlossiguientesmdulos: Mdulo de direccionamiento. Realizaba el direccionamiento hacia el mdulo encargado de la creacindelaseccin/contenidosolicitadaporelusuariomvil. Mdulo secciones y contenido informtico. Este componente se encargaba de mostrar el contenido dinmico, es decir, desplegar de manera correcta el cuerpo de las secciones que el usuarioadministradorhabacreadoatravsdelCMS. Mdulocontacto.UtilizadoparaadministrarlaseccinContacto. Mduloforos.ServaparaadministrarlaseccinForos. Mduloofertasyservicios.PermitaadministrarlaseccinBuscadordeofertasyservicios. PorotroladoelmduloCMSsecomponadelossiguientesmdulos: Mdulodeseguridad.SeencargabadelaccesoalCMSysuseguridad. Mduloadministracindeseccionesycontenidos.Permitalaadministracindelasseccionesy loscontenidos. Mduloadministracindeforos.PermitalaadministracindeloscomentariosdelosForos. Mdulo administracin de contacto. Permita la administracin de los mensajes enviados a travsdelaseccinContacto Mdulo de simulacin. Este mdulo mostraba una simulacin del portal mvil en un dispositivomvil.
61

Fundamentos de programacin C++, Antonio Garrido Carrillo. 2006

75

Diseo e implementacin Lafigura45esquematizalosmdulosprincipalesenlosquesedividielsistema:

Figura45.Mdulosprincipalesdelsistemaportalmvil.

Ademsdelsistemadelportalmvilsecreunmdulodeidentificacindetipodeusuario,queerael encargado de dirigir hacia el portal mvil o hacia el portal web de acuerdo al dispositivo con el cual accedaelusuario. Lafigura46muestralarelacinqueexisteentrelosdistintosmdulosdelaaplicacin.

Figura46.Relacinentrelosmdulosprincipalesdelportalmvil

76

Captulo 3 Cabe destacar que a excepcin del mdulo de acceso todos los mdulos siguieron el patrn MVC. Cadamdulosecomponade: EJBs (Modelos). Componentes donde se encontraban las reglas de negocio y el acceso a base dedatos. Servlets(Controladores).Componentesquegestionabanypermitanelflujodelainformacin. JSPs.(Vistas).ComponentesquedefinieronlaInterfazGrficadeUsuario. JavaBeans.Clasesquepermitanalmacenarlainformacinprovenientedelabasededatos. Clasesvarias.Clasesquecontenanfuncionesespecficas.

3.5.1 Mdulodeacceso
Objetivos Direccionar hacia el portal mvil si el usuario hacia uso de un dispositivo porttil (telfono celular,Palm,PDA,etc.). Direccionar al portal web si el usuario acceda mediante un dispositivo fijo, tal como una computadoradeescritorioounalaptop. Funcionamiento Este mdulo identificaba el tipo de dispositivo que realiz una peticin al servidor web, si la peticin haba sido realizada mediante un dispositivo fijo entonces se direccionaba hacia el portal web, en cambio,sfuehechadesdeundispositivoporttilelmdulodireccionabahaciaelportalmvil. Implementacin Cuando un usuario realiza una peticin HTTP a un sitio por medio de su explorador de Internet, su peticin contiene una cadena de texto llamada agente de usuario (user agent), la cual incluye informacin tal como el nombre de la aplicacin, la versin, el sistema operativo y el idioma del dispositivoquerealizlapeticin. Por ejemplo, el agente de usuario de un telfono celular Blackberry que utiliza como explorador web Operasedefinedelasiguientemanera: Opera/9.80(BlackBerry;OperaMini/5.1.21216/19.916;U;ca) Como se mencion en el anlisis de la infraestructura, el cliente contaba con un servidor web Apache que se encargaba de recibir todas las peticiones y direccionarlas hacia el servidor de aplicaciones. El servidor de aplicaciones era el lugar en donde resida el portal web y el portal mvil. Dicho servidor apachefueelquealbergelmdulodeacceso. El servidor Apache se configur para que realizara la identificacin del agente de usuario del dispositivo que hizo una peticin y comparara el agente de usuario contra una tabla de agentes de dispositivosmviles.Sielagenteseencontrabaendichatablasedireccionabahaciaelportalmvilen otrocasoalportalweb. 77

Diseo e implementacin Lafigura47muestraeldireccionamientoacadaportal(webomvil)deacuerdoalagentedeusuario.

Figura47.Direccionamientoapartirdelagentedeusuario

Elclientecontabaconeldominio: www.institucion.com El direccionamiento hacia el portal mvil fue hecho al subdominio movil del portal web de la institucin: www.institucion.com/movil/

3.5.2 Mdulosdelportalmvil
3.5.2.1 Mdulodedireccionamiento Objetivo MostrarlaseccinoelcontenidoasociadoalaURLsolicitadaporelusuariodelportalmvil. Funcionamiento Este mdulo fue de gran importancia para el funcionamiento del portal mvil. Se encargaba de convertir la URL que el usuario observaba en la barra de direcciones del explorador web en una direccinvlidaparaelservidordeaplicaciones,locualpermitaalservidorllamaralmdulocorrecto paralacreacindelaseccinocontenidoquesesolicitaba. Elmdulodedireccionamientofuecreadodebidoaque: Existan secciones/contenidos dinmicos, es decir, el cuerpo de la seccin/contenido era editadoporelusuarioadministradordelsistema. Las URLs de todas las secciones/contenidos eran dinmicas, es decir, el usuario administrador podracrearlasymodificarlas. 78

Captulo 3 Cuando un usuario acceda al portal mvil su navegador web mostraba en la barra de direcciones la URL asociada a la pgina en uso (la cual haba sido capturada por el usuario administrador del CMS mvil), dicha URL era enviada al servidor web. El servidor web reciba la URL y verificaba que dicha URL se encontraba asociada a una seccin/contenido, en caso afirmativo el servidor web entregaba la descripcin de la seccin/contenido y la informacin general de sus subsecciones inmediatas; tambinentregabalarutadelcomponenteomduloparacrearesaseccinocontenido.SilaURLno estaba asociada a ninguna seccin/contenido del portal mvil, entonces se direccionaba hacia una pginadeerror. Implementacin Para que se pudiera realizar el direccionamiento en el portal, el usuario solicitaba por medio de su navegador de Internet la informacin de una seccin o un contenido. Esta peticin se realizaba por mediodelenvodeunaURLhaciaalservidordeaplicaciones. Cadaseccin/contenidodelportalmvilcoincidaconelsiguientepatrn: http://[DOMINIO]/movil/[URL_SECCION].xhtml Endonde: [DOMINIO].Eraeldominiowebpblicoquetenalainstitucin. movil.Eraelsubdominiowebbajoelcualexistaelportalmvil. [URL_SECCION]. Nombre de la seccin que el usuario administrador captur para cada seccin/contenido. Todas las URLs que seguan el patrn anterior eran interpretadas por un componente de software llamado filtro web. El filtro web era un componente que tena la capacidad de procesar todas las peticionesquecoincidanconlaexpresinregularhttp://[DOMINIO]/movil/+.xhtml.Endnde,+poda ser sustituido por uno o ms caracteres. As el filtro web procesaba todas las peticiones de URL con extensin.xhtmlbajoelsubdominiomvil Elobjetivoprincipaldelfiltroweberalaobtencindelaparte+delaURL(URL_SECCION),lacualsera enviada al proceso getJerarquiaSeccion que resida en el EJB JerarquiaSeccionBean, el cual era capaz de obtener toda la informacin de la seccin/contenido y de sus subsecciones por medio de la URL_SECCION. ElprocesomencionadoutilizabalatecnologaJDBC62pararealizarlassiguientesacciones: Consultaba la tabla JERARQUIA_SECCIONES para encontrar la seccin que corresponda con la URL_SECCION. Siencontrabaalgunaseccin/contenido,entonces: Buscabatodaslassecciones/contenidosquedependande[URL_SECCION]. Lainformacindelaseccin/contenidoysussubseccioneseranguardadaseninstanciasdelas clases:JerarquiaSeccion,SeccionyContenido.
62

Java Database Connectivity. API que permite la ejecucin de operaciones sobre bases de datos desde el lenguaje de programacin Java.

79

Diseo e implementacin El filtro web verificaba que el proceso getJerarquiaSeccion obtuviera informacin y en base a ella generaba la ruta del componente o plantilla que se encargaba de elaborar la seccin/contenido y se direccionabahaciaelcomponentejuntoconlainformacindelcuerpodelaseccin. Lafigura48ejemplificaelprocesoqueseguaelmdulodedireccionamiento.

Figura48.Diagramadeflujodelmdulodedireccionamiento

3.5.2.2 Mdulodesecciones/contenidoinformativos Objetivo Generar las secciones/contenido informativos a partir de la informacin capturada por el usuarioadministrador. Funcionamiento Este mdulo se conformaba por el mdulo de direccionamiento y un par de plantillas, una para generarseccionesyotraparagenerarcontenidos. Cuando el usuario consultaba alguna pgina del portal, el usuario reciba una respuesta por parte del mdulo de direccionamiento, dicha respuesta defina el tipo de plantilla que se deba utilizar para mostrarlapginasolicitada.Eltipodeplantillapodaserseccinocontenido. Las plantillas reciban la informacin por medio de objetos que permitan la construccin de cdigo XHTMLdinmicamente. 80

Captulo 3 Implementacin Los componentes o plantillas que creaban una seccin o contenido eran JSPs que utilizaban la informacin proveniente del filtro web para construir una seccin/contenido formada por cdigo XHTML.Dichaseccin/contenidoXHTMLeraenviadaaldispositivomvil. 3.5.2.3 Mdulosdeseccionesestticas Objetivo. El objetivo de los mdulos de secciones estticas era mostrar en el portal mvil las secciones/contenidosquecumplanconunafuncinpredeterminadayespecfica. Funcionamiento Cada una de las secciones estticas tenan informacin y funcionamiento predeterminados, los cuales nopodansercambiadosatravsdelCMSmvil. Cuandounusuarioaccedaaunaseccinestticalaaplicacinhacausodecomponentesdesoftware predefinidosqueseencargabandegenerarlainformacinyfuncionalidadquelecorresponda. Lasseccionesestticasdelportalmvileran:Principal,Contacto,TemasdeforosyBuscadordeofertas yservicios. La seccin Principal era la seccin inicial y mostraba la lista de las secciones que componan al portal mvil. La seccin Contacto mostraba un formulario que deba ser llenado por el usuario. Los campos del formulario eran: nombre, telfono, correo, empresa, asunto y comentario. Dicha informacin era utilizadaporlosusuariosadministradoresdelportalparapoderresponderacadaunodelosmensajes recibidos. LaseccinTemasdeforosdesplegabalalistadelostemasdeforos.Cuandoelusuarioseleccionabaun foro se mostraba una pgina con la lista de comentarios. De esta forma el usuario poda agregar un comentariooconsultareldetalledeuncomentarioespecfico. La seccin de Buscador de ofertas y servicios brindaba al usuario la opcin de realizar la bsqueda de ofertas y servicios por medio de una palabra clave. Los resultados de una bsqueda se mostraban en unalistapaginada.Elusuariopodaconsultareldetalledeunaofertaoservicio. Implementacin Cuando un usuario acceda a una seccin esttica su peticin era enviada hacia el mdulo de direccionamiento, el cual consultaba la base de datos para obtener el nombre del componente haca elcualdebadireccionar. La informacin de las secciones estticas se encontraba en la base de datos. Previamente se hicieron lasinsercionesdelasseccionesestticasenlatablaPM_JERARQUIA_SECCIONES,ascomodesussub seccionesnecesariasparaelcorrectofuncionamientodelportal. 81

Diseo e implementacin Enlafigura49semuestralajerarquadelasseccionesestticasdelportalmvil.

Figura49.Jerarquadelasseccionesestticas

3.5.3 MdulosdelCMSmvil
3.5.3.1 Mdulodeseguridad Objetivo RealizarlaautentificacindelosusuariosadministradoresparapermitirelaccesoalCMSmvil. Esdecir,slodebapermitirelingresoalCMSmvilalosusuariosqueintrodujeronunnombre deusuariovlidoconsurespectivacontrasea. Funcionamiento Cuandoun usuariointentabaaccederacualquiermdulodelCMSmvilsevalidabaquepreviamente el usuario se hubiera identificado para poder mostrar la informacin solicitada. Si el usuario no se haba identificado se mostraba la pantalla de acceso al CMS mvil, en donde se solicitaba una direccindecorreoelectrnicoyunacontrasea. Implementacin ElingresoalCMSmvilserealizabapormediodelapantalladeacceso,lacualconsistaenunJSPque solicitabalossiguientescampos: Correoelectrnico Contrasea Se verificaba que el correo electrnico y la contrasea correspondieran a un registro especfico de la tabla PM_USUARIOS para permitir el acceso al CMS mvil. Una vez realizada la autentificacin se almacenaba en una variable de sesin la clave del usuario (direccin de correo electrnico), de esta forma, el sistema poda identificar que el usuario se haba identificado de manera correcta en el momentoquefueranecesario. CadavezqueseintentabaaccederaalgnmdulodelCMSseverificabalaexistenciadelavariablede sesin que tena la clave del usuario. Cuando la variable de sesin exista, se permita el acceso solicitadoaunmduloenespecfico.Enotrocaso,sedireccionabahacialapantalladeacceso. 82

Captulo 3 3.5.3.2 Mdulodeadministracindesecciones/contenido Objetivo Permitir consultar cualquier seccin/contenido y obtener la jerarqua que le corresponde en el portalmvil. Permitirlamodificacindelajerarquayordendelasseccionesycontenidos. Permitaagregar,modificar,eliminaryactivar/desactivarseccionesycontenidos. Funcionamiento Estemdulopermitarealizarlaadministracindelasseccionesy/ocontenidosdelportalmvil. Acontinuacinsedescribenlasaccionesquepodanserrealizadas. Consulta de secciones. El usuario acceda a una pantalla (figura 50), la cual mostraba un rbol dondeseobservabalajerarquadelasseccionesycontenidos.Esterboleraconstruidoapartirde la informacin que exista en la tabla JERARQUIA_SECCIONES y deba mostrar la siguiente informacinporseccin/contenido: Nombre.Nombreottulodelaseccin. Activa/Inactiva. Mostraba si la seccin estaba activa o inactiva. Una seccin inactiva no se observabaenelportalmvil. Usuariocreacin.Nombredelusuarioquecrelaseccin/contenido. Fechacreacin.Fechaenquesecrelaseccin/contenido. Usuario modificacin. Nombre del usuario que modific por ltima vez la seccin/contenido. Fechamodificacin.Fechadelaltimamodificacinrealizadaalaseccin/contenido.

Figura50.Pantalladeadministracindeseccionesycontenidos.

83

Diseo e implementacin Agregar/modificar secciones. Se desplegaba una pantalla (figura 51) en la que el usuario poda capturar/modificarlainformacindeunaseccin: URL.NombredelaseccinqueapareceraenlaURL. Ttulo.Ttuloonombredelaseccin. Descripcin.Descripcinbrevedelaseccin.Textoconformato. Imagen.Imagendescriptivadelaseccin.

Figura51.Pantallaparaagregarymodificarsecciones.

Agregar/Modificar contenidos. Se desplegaba una pantalla (figura 52) en la que el usuario poda capturar/modificarlainformacindeuncontenido: URL.NombredelcontenidoqueapareceraenlaURL. Ttulo.Tituloonombredelcontenido. Contenido.Textoconformatoeimgenes.

Figura52.Pantallaparaagregarymodificarcontenidos.

84

Captulo 3 Activar/Desactivar. Esta funcin permita mostrar u ocultar una seccin/contenido en el portal mvil.Cuandounaseccin/contenidoseencontrabaactivaentoncesstasemostrabaenelportal yviceversa. Modificar jerarqua/orden. Esta funcin permita modificar el orden en que aparecan las secciones/contenidos.Tambinpermitacambiarellugardeunaseccin/contenido. Implementacin Para la construccin del mdulo se usaron los componentes de Java EE y una librera JavaScript llamadaEXTJS63paralaconstruccindelainterfazgrficadeusuario.EXTJSutilizatecnologasAJAXy CSSquepermitanunacomunicacinasncronaconelservidor. Cuando el usuario deseaba obtener las subsecciones que pertenecan a una seccin especfica, ste dabaclicsobrelaseccindesuintersenelrboldesecciones.Almomentodedarclic,elnavegador web hacia una llamada AJAX hacia un componente Servlet que a su vez llamaba a un EJB que se encargaba de consultar la tabla PM_JERARQUIA_SECCIONES. Se obtena la informacin de las sub seccionesenformatoJSONystaeradevueltaalServletydespusalnavegadorweb.Enelnavegador web la librera EXT se encargaba de interpretar la informacin JSON y construa las subsecciones de formagrficasinnecesidadderefrescarlapantalla. Cuandoelusuarioadministradorcreabaunaseccin/contenidoinformativo,stenecesitabadefinirel cuerpo de la seccin/contenido con un texto con formato e imgenes, por ejemplo, el cuerpo de una seccin/contenido poda ser modificado de la siguiente forma: tipo de letra, tamao de las fuentes, decoracin del texto (negrita o subrayada), imagen asociada, etc. Adems el cuerpo deba tener formatoXHTML. Existan editores de texto que tenan las caractersticas mencionadas anteriormente, el que fue utilizado en el CMS mvil fue CKEditor64, el cual fue creado para usarse en pginas web. El editor de texto almacenaba el texto creado en formato XHTML. Por ejemplo, cuando una palabra se pona en negritaslapalabraerarodeadaporlaetiquetas<B></B>. Ascuandolosusuarioscreabanelcuerpodeunaseccin/contenido,laedicinserealizabapormedio de CKEditor y en la base de datos se almacenaba el cdigo XHTML que el editor generaba de manera automtica. Cuando los usuarios del portal observaban una seccin o contenido se enviaba el cdigo XTHMLalcomponenteencargadodegenerarlaseccin/contenido,elcualseencargabademostrarde maneragrficaelcdigoXHTML. 3.5.3.3 Mdulodeadministracindecontacto Objetivo Permitir la consulta de los comentarios que los usuarios mviles enviaban al usuario administradorpormediodelaseccindecontactodelportalmvil. Funcionamiento
63 64

http://www.sencha.com/products/extjs/ http://ckeditor.com/

85

Diseo e implementacin El usuario administrador ingresaba a la pantalla Administracin de contacto (figura 53), en donde se mostrabaungriddondeaparecantodosloscomentariosenviadosporlosusuariosdelportalmvil.El grid ofreca las siguientes funciones: filtrado de informacin, seleccin mltiple de registros y paginacin. El usuario administrador seleccionaba uno o ms registros y poda aplicar cualquiera de las siguientes acciones: Marcarcomoatendido.ElcomentariocambiabasuestatusdeNaSenlacolumnaAtendido. Eliminar. Implementacin ParamostrarloscomentariosdecontactoseconsultabalatablaPM_CONTACTOSmediantelasmismas tecnologasusadasanteriormente;EJB,Servlet,JSP,AJAXyEXTJS.

Figura53.Pantalladeadministracindecontacto.

3.5.3.4 Mdulodeadministracindeforos Objetivo Permitir la autorizacin y eliminacin de los comentarios hechos a travs de la seccin Temas deforosdelportalmvil. Funcionamiento Cuando un usuario del portal mvil haca un comentario en un foro, ste no se publicaba inmediatamente.ElcomentariotenaqueserautorizadoporelusuarioadministradordelCMSmvil. La pantalla Administracin de foros (figura 54) mostraba una lista de temas de foros. El usuario administrador seleccionaba un tema para que observara sus comentarios. Los comentarios eran mostrados en un grid ordenados del ms reciente al ms antiguo. El grid ofreca las siguientes funciones:filtradodeinformacin,seleccinmltiplederegistrosypaginacin. Elusuarioadministradorseleccionabaunoomscomentariosypodaaplicarlassiguientesacciones: Autorizar.Autorizaloscomentariosseleccionadosparaquefueranpublicadosenelportal. Eliminar. 86

Captulo 3 Implementacin Para mostrar los comentarios de foros se consulta la tabla PM_FORO_COMENTARIOS mediante las mismastecnologasusadasanteriormente;EJB,Servlet,JSP,AJAXyEXTJS.

Figura54.PantalladeadministracindecomentariosdeForo.

3.5.3.5 Mdulodesimulacin Objetivo Permitiralusuarioadministradorsimularlavistadelportalmvilendosdispositivosmviles. Funcionamiento Estemduloconsistadedospantallas(figura55y56),endondeunadeellasmostrabaelportalmvil conlasdimensionesdeuntelfonoiPhoneylaotraconlasdeunBlackberry.Elusuarioadministrador poda navegar por las secciones y contenidos, de esta manera simulaba el comportamiento del portal enambosdispositivosmviles.

Figura55.PantalladesimulacinenuniPhone

87

Diseo e implementacin

. Figura56.PantalladesimulacinenunBlackberry.

Implementacin. Las vistas simuladas se componan de un iframe y una imagen de telfono celular. Para crear la vista deliPhone,lacartuladeuniPhonesedividien4partes:superior,inferior,derechaeizquierda.stas eranubicadasalrededordeliframequeseencontrabadireccionadahacialapginaprincipaldelportal mvil. Las dimensiones del iframe fueron determinadas de manera que coincidieran con la visibilidad en un dispositivoreal(iPhoneoBlackberry).

88