Ingreso al sistema.

La pantalla de entrada requiere el ingreso del login de usuario y la contraseña que se le ha asignado a cada uno por el administrador, estos son los únicos que tienen acceso al sistema Figura 1..


Figura 1. Formulario de Autenticación de Usuarios

El campo para usuario y contraseña no pueden ser vacíos, si estos no tienen datos al momento de dar clic en el botón entrar, muestra un mensaje de campos requeridos y no será procesada la petición Figura 2.


Figura 2. Mensaje de error datos vacios.

Si el usuario o la contraseña ingresados son incorrectos manda una pantalla de resultado de error de usuario y contraseña, con el link para regresar a la página de ingreso, para introducir nuevamente los datos Figura 3.


Figura 3. Mensaje de error Usuario no encontrado
Pantalla de bienvenida

Esta página contiene los menús de acceso de acuerdo al usuario que ha ingresado al sistema, estos se presentan como links en la parte superior de la página Figura 4 A, si estos enlaces son menús padres al pasar el mouse sobre ellos desplegarán los submenús que le corresponden y podrán accederse cada uno de ellos. Figura 4 B


Figura 4 A. Pantalla presentación al ingresar al sistema.

Figura 4 B. Listado de Menú desplegado al pasar el mouse para ser accedido.
Pantalla Captura de Obras

Al acceder a este enlace se muestra el mapa que contiene todas las obras que han sido registradas en el sistema Figura 5, cada obra ubicada esta debidamente identificada por un icono que representa la clasificación al tipo de obra a la que pertenece.

Cada una de las obras representadas en el mapa permite tener acceso a su información, dando clic sobre la que se desea obtener datos. En ese momento se puede tener acceso a los botones que se encuentran en la parte inferior del mapa.


Figura 5. Pantalla de principal para captura de obras.

Combos de Navegación: Los comos de navegación ubicados en la parte superior de la pantalla, presentan los departamentos, municipios y cantones correspondientes. Esto significa que al seleccionar un departamento en específico la lista de municipios es llenada con los correspondientes al departamento seleccionado; lo mismo ocurre al seleccionar un municipio el listado de cantones es llenado con los datos respectivos del seleccionado municipio Figura 6.


Figura 6. Combos de navegación en el mapa.

Al lado derecho de la pantalla se muestran las herramientas de navegación del mapa dentro de un panel de control, como lo es la barra de Zoom, las flechas de desplazamiento, botones de acceso a otros paneles de interacción, y un pequeño mapa de ubicación Figura 7.


Figura 7. Panel de Navegación para manipulación del mapa

Barra de Zoom: esta barra contiene 5 elementos de manipulación para la visualización del mapa Figura 8, cada uno de estos elementos permite aumentar la visibilidad del mapa en el área de trabajo o disminuirla si el mapa ha sido previamente afectado por esta herramienta, incluso volver la vista del mapa a su tamaño original.


Figura 8. Barra de zoom para manipular diferentes vistas del mapa.

Flechas de Desplazamiento: Permite desplazarse pequeñas cantidades en el área de visualización del mapa Figura 9, estos desplazamientos dependen del elemento al que se le haga click, cada división que presenta esta herramienta contine diferentes valores para movilizarse dentro del mapa. Estos desplazamientos pueden ser verticales u horizontales.


Figura 9. Flechas con diversos grados de desplazamiento en las 4 direcciones.

Mapa de Ubicación: Herramienta que permite ir de forma rápida y eficiente a una ubicación especifica dentro de mapa base de visualización, haciendo el debido desplazamiento para la visualización del área que se seleccione Figura 10.


Figura 10. Mapa de ubicación, muestra la posición actual del lugar que se visualiza en el area del mapa.

En la parte baja del panel de herramientas de manipulación del mapa se encuentran dos botones Figura 11 que permiten acceder a dos paneles de trabajo como lo es el panel de iconos para el registro de obras y el panel para visualización de capas (clasificación por tipo de obras). Debe darse click sobre las flechas para visualizar los paneles o para ocultarlos.


Figura 11. Botones de acceso a los paneles para Visualización de Capas
y para Registros de Obras

Visualización de Capas: Permiten la visualización de la selección de los diferente tipos de obras Figura 12.. Al dar clic sobre cada uno de los checkbox que identifica cada tipo de obra, puede verse en el área del mapa que todas las obras registradas bajo esa clasificación se vuelven visibles si se activa el checkbox o se ocultan si se desactiva el checkbox.

Esto permite una mejor visualización e identificación de cada tipo de obra si todas las obras registradas se muestran en el mapa al mismo tiempo.


Figura 12. Panel para control de capas selección de obras

Iconos de Obras: Herramienta ha utilizar en el momento que se desea agregar una nueva obra. Para llevar a cabo dicha operación debe darse clic sobre el icono del tipo de obra que se desea registrar, esto activa el proceso de registro de obra Figura 13.


Figura 13. Panel de iconos para registro de nuevas obras.
Agregando Información

Ubicación y registro de obra

Una vez seleccionado el icono de tipo de obra, debe pasarse el mouse sobre el área del mapa y dando clic sobre la ubicación donde se quiere colocar dicha obra serán capturados los puntos de referencia Figura 14 a, estos pueden ser modificados durante el movimiento del mouse sobre el mapa; los puntos de referencia que serán almacenados son aquellos en los que se haya dado clic sobre el mapa como punto final de ubicación.

Nota: Si se desea colocar más de una obra en la misma posición (tome en cuenta que la ubicación es solo una referencia visual), está puede ser ubicada en ese mismo lugar pero si la obra no está visible.
Se recomienda ubicar la nueva obra de forma adyacente a la existente, esto es debido a que cuando se generen los resultados visuales en el mapa no se podrá distinguir, excepto si utiliza la herramienta proporcionada para visualización de capas.

Si ya se tiene la obra visualmente ubicada dentro del área del mapa y esa será su posición permanente, debe darse clic sobre el botón guardar; en ese momento aparece la ventana donde debe ingresarse el nombre que ha de asignarse a la obra a registrar Figura 14 b. Si se presiona ok, se procede al almacenamiento, la nueva obra es ingresada en la base de datos e inmediatamente la pagina será cargada nuevamente con la obra ya registrada y ubicada donde fue previamente establecida.


Figura 14 a. Ubicación de obra en el mapa.

Figura 14 b. Pantalla captura nombre de obra a ingresar.

Para tener acceso a la información de cada una de las obras visualizadas dentro del mapa, debe darse clic sobre la obra de la que se desea obtener la información Figura 15 A, esto permite tener acceso a los botones que se encuentran en la parte inferior de la pantalla Figura 15 B.


Figura 15 A. Selección de obra para ingresar, modificar información.
Figura 15 B. Botones de acceso para pantallas de ingreso de información

Cada uno de las pantallas descritas a continuación y que corresponden a los botones, contienen un campo de registro de código para un nuevo registro con un botón de agregar, y más abajo se muestra un listado con los nombres que identifican cada uno de los registros previamente almacenados en un formato de link para acceder a su respectiva información, si de la página actual depende otro tipo de información son presentados los links correspondientes (como ejemplo la asignación de fuentes de financiamiento en la página de proyectos o la página de seguimiento, estas son explicadas más adelante).

Ingreso de Necesidades

Al acceder esta pantalla se muestra un cuadro de texto donde se ingresa el codigo de la necesidad que se desea ingresar y dar click en el botón adicionar para el caso de una querer ingresar una nueva necesidad Figura16 A. Si ya existen necesidades registradas posteriormente se muestran una lista de necesidades con un link de acceso para poder modificar los datos corresponidentes Figura 16 B.


Figura 16 A. Formulario para registro de nueva necesidad
Figura 16 B. Listado de necesidades existentes, con link para acceder información

Debe ingresarse un código de necesidad, la descripción de la necesidad que se tiene, el monto estimado que se requiere para realizar dicha necesidad, la fecha de ingreso será tomada del sistema, y el responsable que corresponde al usuario activo dentro de la aplicación Figura 17.


Figura 17. Pantalla captura datos para registro necesidades por obra

Debe tenerse en cuenta el tipo de datos que ha de ingresarse, la pantalla cuanta con la validación de datos respectiva a cada campo a ser llenado; si alguno de los datos ingresados no corresponde al tipo de dato requerido, al dar clic en el botón de guardar o almacenar se mostrará una ventanita indicando el error y los datos no serán procesados hasta que se cumplan las condiciones requeridas.

Al tener el formulario debidamente completo debe darse clic en el botón guardar para almacenar los datos, en ese momento se mostrará la pantalla de resultado del almacenamiento de los datos, en esta respuesta no podrán ser modificados, los datos son retornados en modo de solo lectura Figura 18.


Figura 18. Pantalla resultado de Actualización o Ingreso de datos

Asignación de Proyectos

Al acceder esta pantalla se muestra un cuadro de texto donde se ingresa el codigo del proyecto que se desea ingresar y dar click en el botón adicionar para el caso de una querer ingresar un nuevo proyectoFigura19 A. Si ya existen proyectos registrados posteriormente se muestran una lista de proyectos con un link de acceso para poder modificar los datos corresponidentes Figura 19 B.


Figura 19 A. Formulario para registro de nueva necesidad
Figura 19 B. Listado de necesidades existentes, con link para acceder información

Para registrar un proyecto debe asignarse un código del proyecto, clasificación de tipo de proyecto, el nombre que ha de identificar dicho proyecto, una breve descripción para mayor claridad y entendimiento del proyecto si así se desea, los siguientes campos a llenar corresponden a las fechas de programación es decir la fecha en la que se estima iniciará el proyecto, fecha estimada de finalización del mismo; posteriormente se encuentran los campos de fechas reales en las que se inicia el proyecto y la fecha real en la que el proyecto se halla finalizado; un campo para seleccionar la etapa en la se que encuentra, seleccionar el estado del proyecto (estos dos últimos elementos mencionados, sirven para llevar un control del desarrollo del proceso), número de estimado de empleos generados, el estimado del número de personas que serán beneficiados con la realización de este, y por último le responsable del ingreso que es el usuario activo en la aplicación Figura 20.


Figura 20. Formulario de captura de datos para proyectos de inversión

Debe tenerse en cuenta el tipo de datos que ha de ingresarse, la pantalla cuanta con la validación de datos respectiva a cada campo a ser llenado; si alguno de los datos ingresados no corresponde al tipo de dato requerido, al dar clic en el botón de guardar o almacenar se mostrará una ventanita indicando el error y los datos no serán procesados hasta que se cumplan las condiciones requeridas.

Si es un nuevo registro aparece el botón de guardar, pero si el registro se está actualizando debe presionarse el botón de actualizar; cualquiera que fuera el caso de los mencionados anteriormente, al realizarse la acción se mostrará la pantalla con los datos que han sido ingresados en modo únicamente de lectura.

Asignación y Registro de Fuentes de Financiamiento

El link para este proceso puede ser accedido desde la pantalla de proyectos, en el momento que alguno de ellos halla sido seleccionado para la edición o en la pantalla de resultado de actualización o inserción; dado que la asignación de las fuentes de financiamiento se hace sobre un proyecto a ejecutar.

Al acceder esta pantalla se muestra un cuadro de texto donde se ingresa el codigo de la fuente de financiamiento que se desea ingresar y dar click en el botón adicionar para el caso de una querer ingresar una nueva fuetne de financiamiento Figura 21. Si ya existen proyectos registrados posteriormente se muestran una lista de fuentes con un link de acceso para poder modificar los datos corresponidentes Figura 21.


Figura 21. Formulario de captura y acceso a información para las fuentes de financiamiento.

Al acceder a la pantalla de asignación de fuentes de financiamiento es mostrado el nombre de la obra a la que pertenece el proyecto, el nombre del proyecto al cual se le esta asignando, el nombre que identifica la fuente de financiamiento a asignar; los campos mencionados anteriormente son únicamente de lectura dado que no es la pantalla de edición que les corresponde. Posteriormente es mostrado un campo de tipo selección donde se indica el tipo de financiamiento que ha de realizar dicha fuente, y como último campo a llenar se encuentra el monto monetario que la fuente de financiamiento ha de proporcionar Figura 22.


Figura 22. Formulario de captura para fuentes de financiamiento,
Contiene listado para acceso al seguimiento del año seleccionado.

Debe tenerse en cuenta el tipo de datos que ha de ingresarse, la pantalla cuanta con la validación de datos respectiva a cada campo a ser llenado; si alguno de los datos ingresados no corresponde al tipo de dato requerido, al dar clic en el botón de guardar o almacenar se mostrará una ventanita indicando el error y los datos no serán procesados hasta que se cumplan las condiciones requeridas.

Una vez completados todos los datos del formulario puede procederse al almacenamiento o actualización de los datos, como resultado se obtendrá una pantalla con los datos ingresados en modo lectura donde se muestra un mensaje de confirmación de actualización de datos.

Captura de Programación y avances del proyecto.

Desde la pantalla de captura, actualización de proyectos y fuentes de financiamiento se puede acceder a la pantalla para hacer la selección del periodo a registrar o modificar de la programación y avances del proyecto.

Para seleccionar un periodo de programación y ejecución se debe seleccionar de la lista de selección de año, y definir de que mes a que mes se requiere la visualización de registros Figura 23.


Figura 23. Formulario de Selección de período de seguimiento, permite acceder al período del año seleccionado,
Formulario para Captura nuevo seguimiento, para el ingreso de una nueva programación

Si se desea agregar un nuevo registro se ingresa el año para la nueva programación en el espacio que dice “Captura nuevo seguimiento para el año:” Luego se hace clic e el botón Aceptar.

Al inicio de la página se muestra el código y nombre de la obra, el código y nombre del proyecto, el año de programación y a continuación se muestra en un formulario todos los campos correspondientes a la programación y ejecución tanto física, financiera así como las respectivas observaciones que pudieran ser necesarias para los comentarios necesarios Figura 24.


Figura 24. Formulario captura programación de proyecto.

Cuando se registre una nueva programación, en la página se visualiza el espacio para llenar los 12 meses del año.

Debe tenerse en cuenta el tipo de datos que ha de ingresarse, la pantalla cuanta con la validación de datos respectiva a cada campo a ser llenado; si alguno de los datos ingresados no corresponde al tipo de dato requerido, al dar clic en el botón de guardar o almacenar se mostrará una ventanita indicando el error y los datos no serán procesados hasta que se cumplan las condiciones requeridas.

Al finalizar el llenado de los campos correspondientes a la programación se debe dar clic en el botón de guardar o actualizar según sea el caso, posteriormente se muestra la pantalla de resultado con el mensaje respectivo de confirmación.

Ingreso Unidades de Medida.

Como se puede ver en la Figura 25, las unidades de medida son aquellos tipos de obra que pueden ser registrados en la parte de Captura de Obras. Esta pantalla muestra un link para ingresar una nueva unidad de medida y un listado con los tipos ya registrados. Una columna posee el icono que la identifica, un icono que proporciona el acceso para cambiar de la imagen y otro que permite la eliminación de la misma .


Figura 25. Pantalla listado de unidades de medida.
Agregar o Modificar Icono

La Figura 26 muestra en el paso 1 los campos a ser llenados para el ingreso de una nueva unidad de medida, esta contiene el nombre con el cual será identificado y el nombre con el cual será renombrada la imagen a ser almacenada. Debe darse click en el botón Aceptar para continuar con le proceso.


Figura 26. Pantalla de captura para nombre de unidad de medida e imagen. Paso 1

La Figura 27 muestra el paso 2 para captura de obras, en esta pantalla se debe ingresar la ruta fisica donde se encuentra ubicado el archivo a ser ingresado, para esto debe darse click en el botón browse y buscar como si se fuera a abrir un archivo cualquiera en el explorador de windows, luego dar click en el botón Aceptar.


Figura 27. Pantalla de captura imagen para unidad de medida. Paso 2

Al subir el archivo se mostrará un mensaje como el mostrado en la Figura 28


Figura 28. Mensaje Archivo Cargado
Eliminar Icono

La Figura 29 muestra en el paso 1 cuando se desea eliminar una unidad de medida. Si esta unidad de medida no posee obras registradas, entonces se procederá a eliminar sin problema pero si la unidad de meidida posee obras resgistradas entonces msotrará un mensaje como en la Figura 30


Figura 29. Cuadro de diálogo para proceder a la eliminación de la unidad de medida


Figura 30. Mensaje que muestra la unidad de medida tiene obras asociadas por lo que no puede ser eliminada
Visualizando Información

Sección de Mapa

Esta sección permite la creación de criterios de filtrado para la posterior visualización de obras ubicadas dentro del mapa. Esta pantalla presenta una serie de listados con información registrada en la base de datos Figura 31.


Figura 31. Formulario con listas de selección para criterios de filtrado de obras.

Lista de Instituciones: Muestra las diferentes instituciones registradas en la base de datos, las cuales pueden realizar registro de obras o visualización de información.

Listado Tipo de Obra: Despliega las clasificaciones de tipos de obras registradas en la base de datos.

Listado Etapas: Lista la clasificación de las etapas de proyectos.

Departamentos: Muestra los departamentos registrados en la base de datos.

Municipios: Este listado es llenado automáticamente al seleccionar un departamento.

Año: Contiene los años en los cuales existen obras con proyectos registrados en la base de datos.

Esta pantalla de selección permite tener una idea global de los datos que pueden ser mostrados en el mapa. Esto se debe que al seleccionar ya sea una institución.

Al dar clic en el botón mostrar, se generará el mapa con todas aquellas obras que cumplan con los criterios seleccionados y/o los proyectos que tengan registrados con algunas de esas características, cabe recordar que los iconos mostrados en el mapa son obras registradas.

Al posicionarse sobre cada una de las obras, se muestra un pequeño cuadro de texto en la parte superior izquierda de la pantalla del mapa con información general referente a la obra señalada, Figura 32.


Figura 32. Pantalla resultado de obras con información interactiva de cada una de las oras sobre el mapa.

Mapa y Reportes

En la imagen anterior, se puede visualizar también un botón de Reportes la cual cuenta con dos opciones al darle click, ver avances financieros y la otra ver avances físicos.

Esto permite visualizar en el mapa un coloreo de cantones Figura 33 - 38, de acuerdo a los porcentajes de avances que estos tienen, para aclaración de los mismos se muestra una pequeña leyenda en la esquina inferior izquierda del mapa, con la símbologia de cada color representado, estos colores varian de acuerdo al reporte que se quiere visualizar.

Esta información ira variando de acuerdo a los movimientos que se generen en la sección de seguimiento asignado a cada uno de los proyectos.

La sección de reportes en mapa, también incluye un listado con consolidados de información tanto en avances financieros Figura 33 y como en avances físicos Figura 34, que complementan la información que se refleja en el mapa, de tal forma que pueden compararse los resutlados en tabla con los generados en los reportes visuales. Cada uno de los items contenidos en los listados, poseen un link que permite acceder a un detalle respectivo de información, y asi para cada una de las listas que se muestren en esta sección.

 


Figura 33. Mapa y listado de cantones con detalle del avance Financiero.

 


Figura 34. Mapa y listado de cantones con detalle del avance Fisico.

 


Figura 35. Mapa y los listado de obras del canton seleccionado en detalle del avance Financiero.

 


Figura 36. Mapa y los listado de obras del canton seleccionado en detalle del avance Financiero.

 


Figura 37. Mapa y los listado de proyectos del canton seleccionado en detalle del avance Financiero.

 


Figura 38. Mapa y los listado de proyectos del canton seleccionado en detalle del avance Fisico.