SOLUCIÓN PARA LA OBTENCIÓN DE GRÁFICOS EN EL SISTEMA

SOLUCIÓN PARA LA OBTENCIÓN DE GRÁFICOS EN EL
SISTEMA PARA LA PLANIFICACIÓN DE ACTIVIDADES SIPAC
SOLUTION TO OBTAIN GRAPHICS IN THE SYSTEM OF ACTIVITIES
PLANNING SIPAC
Maria Teresa Rosales González1, Mairelys Fernández González2, Ariadna RendónArtola3,
Dionny Cardoso Carmona4
1 Universidad de las Ciencias Informáticas, [email protected], 8358298
2 Universidad de las Ciencias Informáticas, [email protected], 8358298
3 Universidad de las Ciencias Informáticas, [email protected], 8358298
4 Universidad de las Ciencias Informáticas, [email protected], 8358298
La Habana, octubre2013
RESUMEN
El Sistema de Planificación de Actividades (SIPAC), desarrollado en la Universidad de las
Ciencias Informáticas, informatiza el proceso de planificación estratégica y operativa adoptado
por las entidades cubanas. Independientemente de las funcionalidades que brinda SIPAC, en la
actualidad, no es posible agrupar en gráficos los indicadores claves de la planificación. Se
realizó un estudio de los sistemas informáticos para la generación de gráficos y las bibliotecas
que estos usan, posibilitando adquirir experiencia en las tecnologías propias del contexto. La
funcionalidad de obtención de gráficos en el sistema SIPAC tiene como objetivo garantizar la
representación de la información sobre la composición y el estado en que se encuentran los
elementos de la planificación, el porciento de cumplimiento de los elementos asociados en un
mismo entorno y el total de involucrados por cada uno de ellos. Facilitando el procesamiento de
la información de forma dinámica, lo que contribuye a su análisis y estudio.
Palabras Clave: Gráfico, Planificación, Sistema.
ABSTRACT
The System ofActivities Planning SIPACis developedto aim at computerizing the Process of
Strategic and Operative Planning embraced by the Cuban government. Despite of the
functionalities SIPAC offers, key indicators of the activities planning process cannot be grouped
in graphics nowadays. A study of the computer systems for the generation of graphics and their
libraries was carried out, making possible acquiring experience on technologies related to this
context. The functionality to obtain graphics in the system SIPAC aims at guaranteeing the
representation of the information on the composition and the status of the planning elements,
the percent of fulfillment of elements related to a single area and the total amount involved in
each of them.It makes easier information processing in a dynamic way, contributing to its
analysis and study.
KeyWords: Graphic, Planning, System
.
1. INTRODUCCIÓN
La planificación estratégica y operativa constituye un nuevo modelo de planificación que tiene
como principal función, planificar y organizar los procesos de: establecimiento, aprobación y
puntualización de los planes, sus sistemas de control y factores que influyen en dichos planes.
El mismo se va a ocupar de establecer resultados finales hacia los cuales se dirigen las
actividades organizacionales e individuales, en aras de cumplir los objetivos económicos y
sociales que demanda el desarrollo integral de la sociedad cubana (1).
En función de esto se desarrolla el Sistema de Planificación de Actividades (SIPAC), el cual se
basa en la Instrucción no.1 del Presidente de los Consejos de Estado y de Ministros para la
Planificación de los objetivos y actividades en los órganos, Organismos de la Administración
Central de Estado, entidades nacionales y Administraciones locales del Poder Popular. Dicho
sistema está destinado a facilitar la gestión de las actividades a todos los niveles
organizacionales, permite interrelacionar objetivos de trabajo y actividades en tiempo real;
garantizando el seguimiento del desarrollo y cumplimiento de los objetivos y tareas principales
en las entidades. Informatizando los procesos de Ejecución y Control de la Planeación
Estratégica (definición de los objetivos a largo plazo y estrategias para alcanzarlos) y Operativa
(puntualización de las actividades que debe efectuar cada individuo a corto plazo).
SIPAC cuenta con varios módulos encargados de generar las configuraciones necesarias que
otorgan al sistema y al cliente una simulación de los procesos de organización del personal, así
como los niveles de subordinación necesarios e indispensables para efectuar una planificación
de actividades basadas en reglas de la compartimentación de la información, permitiendo que la
información planificada sea accedida por la persona autorizada, en el momento indicado. Puede
catalogarse como una solución integral para la gestión de elementos de la planeación
estratégica y operativa basada en actividades, objetivos, y planes, diseñada sobre las bases de
la compartimentación de la información.
Independientemente de las funcionalidades con las que cuenta el sistema actualmente no es
posible representar gráficamente la información en el claves sistema agrupada por indicadores
como: cantidad de involucrados, el porciento de cumplimiento, la composición y el estado de
cumplimiento de los elementos de la planificación. Lo que dificulta el seguimiento de las tareas
principales de la entidad como parte de procesos de ejecución y control de la planeación
estratégica y operativa, de manera que los usuarios del sistema encargados del análisis del
cumplimiento de los objetivos deben realizar búsquedas que pueden resultar engorrosas para
1
determinar el desglose de los elementos de la planificación, así como el cumplimiento de los
mismos. Por otra parte el cúmulo de información que deben consultar puede comprometer la
interpretación de la información.
DESARROLLO
La solución presentada se basaen las bibliotecas que permiten generargráficos, con el objetivo
de escoger una que se integre de forma más sencilla a las tecnologías de desarrollo de SIPAC y
que permita cumplir con las necesidades que requiere el cliente.
2.1 Bibliotecas para la generación de gráficos
Pychart
Desarrollada con el lenguaje de programación Python bajo licencia GNU General Public License
(GPL), por la cual aún es distribuida. Trabaja sobre la familia de sistemas operativos Windows.
Aunque fue creada con el objetivo de mostrar gráficos circulares, actualmente permite generar
gráficos de líneas, de barras, de gama de relleno, y de pastel. Además posibilita la creación de
gráficos de alta calidad en formatos PDF, PNG o gráficos SVG.(1).
Graphics Draw (GD)
La biblioteca de gráficos Graphics Draw(GD) inicialmente se desarrolló en el lenguaje de
programación C. En la actualidad existen interfaces desarrolladas en otros lenguajes de
programación como PHP, Perl, Python, Pascal, entre otros. Esta biblioteca permite crear
imágenes a partir de líneas, arcos, texto, otras imágenes, o múltiples colores, así como la
manipulación de las mismas en formato GIF, JPEG, PNG, y WBMP. A partir de la versión 4.3 de
PHP se incluye la biblioteca GD y desde la versión 5.3 puede ser usada opcionalmente otra
instalación GD además de la versión incluida, posibilitando obtener más características.(2).
Highcharts
Highcharts es una biblioteca escrita en JavaScript y Ajax capaz de crear gráficos estadísticos
interactivos de todos tipos y estilos, como por ejemplo líneas, circulares, de barras, áreas,
columnas, entre otras. Posee varios tipos de licencia entre las que se destaca la licencia libre.
Una de las ventajas principales de este script es su utilización sin necesidad de instalar plugins
externos, como Flash o Java, al navegador para que pueda visualizar las gráficas. Highcharts
además es compatible con cualquier navegador web que tenga habilitado el uso de JavaScript.
Para su funcionamiento solo necesita dos archivos: la biblioteca JavaScript Highcharts.js y la
2
conocida biblioteca jQuery o Mootools, lo que permite que se mantenga una constante
actualización con los valores del servidor. Asimismo con el módulo de exportación habilitado,
permite a los usuarios exportar el gráfico a formato PNG, JPG, PDF o SVG, o imprimir el gráfico
directamente desde la página web. Highcharts cuenta con una ayuda o API libre y publicada en
internet que puede ser descargada. (3).
Tomando en cuenta lo anteriormente propuesto se decidió utilizar para el desarrollo de la
solución la biblioteca Highcharts, debido a que se puede integrar fácilmente a SIPAC y permite
obtener los tipos de gráficos que se necesitan para dar solución a los objetivos propuestos.
Además posibilita la administración de las diferentes series, función necesaria para poder
adaptar a la solución propuesta los gráficos generados por esta biblioteca. Apoyado todo esto
en el volumen de documentación disponible para su aprendizaje, que incluye una API o ayuda
de desarrollo.
2.2 Base tecnológica
SAUXE
Sauxe es un marco de trabajo que fue desarrollado en la UCI como fruto del paradigma de
independencia tecnológica por el que aboga el país. Este marco de trabajo, fusionado bajo
tecnología totalmente libre (entre ellas PHP, PostgreSQL, Apache) posee el desarrollo de
tecnologías propias basadas en otros marcos de trabajo como ZendFramework para el manejo
de la lógica de negocio, Doctrine para el acceso a datos y ExtJS para la capa de presentación.
Cuenta con una arquitectura en capas que a su vez presenta en su capa superior un MVC1.
Contiene un conjunto de componentes reutilizables que proveen la estructura genérica y el
comportamiento para una familia de abstracciones, logrando una mayor estandarización,
flexibilidad, integración y agilidad en el proceso de desarrollo (5).
2.3 Descripción de la solución
El desarrollo de la solución para la obtención de gráficos en el Sistema SIPAC se basó en
elestudio y la valoración de las propuestas que se presentan a continuación:
Propuesta de solución inicial: Realizar la recuperación de la información reutilizando métodos
ya implementados en el sistema.
Desventajas:
1
Modelo Vista Controlador: Patrón arquitectónico.
3
1- El rendimiento de la aplicación se ve afectado debido alascontinuas peticiones a la base
de datos desde los diferentes niveles a la hora de recuperar la información asociada a la
composición de los elementos, se debe hacer una búsqueda del o los elementos a los
cuales el usuario en sesión tiene acceso, así mismo de sus elementos hijos, de los
involucrados en cada caso y cada operación de este tipo se traduce en un consulta a
tablas distintas en la BD que deben dar una respuesta y en función de la misma
desembocar otra petición.
Teniendo en cuenta este inconveniente se decidió optar por la siguiente solución:
Propuesta de solución final: Realizarla recuperación de la información implementando métodos
que obtengan la información por tipo de gráficos.
Ventajas de esta solución:
1- Se favorece el rendimiento de la aplicación debido a que para obtener un gráfico solo se
debe realizar una petición a la base de datos.
2- Se favorece el mantenimiento del sistema de manera que si es necesario realizar algún
cambio en la información que representa el grafico, es fácil de identificar y la
modificación no repercute en las restantes funcionalidades del sistema.
2.4 Modelo conceptual
El Modelo conceptual de la soluciónse centra en los Elementos de la planificación, los cuales
pueden ser Objetivos, Actividades, Factores que Influyen en el Plan (FIP) o Planes, a los cuales
se asocian las Áreas de Resultados Claves (ARC). Estos elementos son caracterizados por los
Indicadores claves: cantidad de involucrados, porciento de cumplimiento, composición y
estadode los elementos de la planificación,los cuales componen el Gráfico.
4
Fig. 1: Modelo conceptua
al
2.5 Req
quisitos fun
ncionales
Teniend
do en cuen
nta las neccesidades del cliente y las bon
ndades que
e brinda la
a biblioteca
a
seleccio
onada, se definieron lo
os siguientess requisitoss funcionale
es:
RF 1. Obtener
O
Grá
áfico: Se vissualiza el gráfico
g
defin
nido por el usuario en sesión, en formato de
e
barra o pastel me
ediante la captura
c
de información
n suministrada desde la base de
e datos de
el
sistema
a SIPAC, pe
ermitiendo observar estadísticam
e
mente el comportamien
nto de los indicadoress
claves de
d la planificcación.
RF 2. Exportar
E
Grá
áfico: Exporrta el gráfico
o obtenido en
e a formatto: JPEG, P
PNG, SVG y PDF.
RF 3. Im
mprimir Grá
áfico: Imprim
me la image
en del gráficco obtenido..
RF 4. Abrir Espe
ecificación: Muestra la
l interfaz de la esp
pecificación
n del elemento de la
a
planifica
ación selecccionado porr el usuario en sesión.
RF 5. Modificar
M
E
Especificació
ón: Muestrra la interfa
az de la esspecificació
ón del elem
mento de la
a
planifica
ación selecccionado por el usuario
o en sesión con los cam
mpos editab
bles. Luego
o de realizar
5
la modifficación se muestra el gráfico con
n los datos actualizados
a
s.
2.6 Diag
grama de clases
c
del diseño
d
Como parte
p
del d
diseño de la
a solución se generó
ó el diagram
ma de classes que se muestra a
continua
ación:
Fig. 2: Diag
grama de clases
c
del diseño
d
2.7 Inte
egración de
e la bibliote
eca Highch
hartsen el marco
m
de trrabajo
Parte fu
undamental del éxito de
d esta solución radiccaba en lograr la integ
gración de la biblioteca
a
Highcha
artsal marco
o de trabajo
o Sauxe.El primer passo que se re
ealizó en esste aspecto
o, fue copiar
el conte
enido de lass bibliotecass Highcharts y Jquery e
en la carpe
eta lib del marco de trabajo. Luego
o
se realizzaron las siguientes co
onfiguracion
nes:
-
En la clase
e Secure.php se obtu
uvieron las direcciones de los paquetes de
e
Highcharts y Jquery.
-
En la clase
e config.php
pseconfiguró
ó la direcciónde la carrpeta de pu
ublicaciónde
e
las biblioteccasHighcha
arts y Jqueryy.
6
Luego para la utilización de la biblioteca solo se incluyó en el head jquery de la página .phtml el
siguiente código:
<head>
<script type="text/javascript" src="<?php echo $this->jquery_path; ?>jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="<?php echo $this->jquery_path; ?>jquery-1.8.2.js"></script>
</head>
Para lograr mostrar la gráfica se incluyó en el body de la página la misma página el archivo de
Highcharts y un div con el id = ¨container¨.
<body>
<script type="text/javascript" src="<?php echo $this->highcharts_path;
?>js/highcharts.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
Asimismo para conseguir que los gráficos se exporten a .pdf se incluyó en la dicha página el
archivo exporting.js
<script
type="text/javascript"
src="<?php
echo
$this->highcharts_path;
?>js/modules/exporting.js"></script>
2.8 Resultados
La solución para la obtención de gráficos en SIPAC,permite dar seguimiento al comportamiento
de los principales indicadores de la planificación de actividades mediante la interacción del
usuario con diferentes tipos de gráficos. Lo cual brinda la posibilidad de agrupar la información
de forma atractiva y dinámica,permitiendoasí que el análisisde dicha información se realice de
forma más inmediata. Esta solución incluye además la generación de salidas para el sistema a
diversos formatos teniendo en cuenta lo obtenido previamente en los gráficos. La solución
implementada proporcionó como resultado un producto que cumplecon las exigencias y
necesidades existentes en SIPAC realizándose la gestión de la planificación de forma más
interactiva, permitiendo así el aprovechamiento del tiempo en cuanto a la búsqueda de
especificaciones de los elementos y visualización de la composición de los elementos de la
7
planificación sin recurrir a la opción Desglosar en cada una de las interfaces estos elementos.
Fig. 3: Gráfico Involucrados según el tipo de elemento
Fig. 4: Gráfico Resumen del porciento de cumplimiento
8
Fig. 5: Gráfico composición del elemento seleccionado.
Fig. 6: Exportar imagen del gráfico.
9
Fig. 7: Imprimir imagen del gráfico.
2.9 Impacto de la solución
La solución desarrollada ha sido validada y se considera que los procesos de ejecución y
control de la planeación estratégica y operativa en el sistema se ven favorecidos con la
incorporación de la solución para la obtención de gráficos teniendo en cuenta que:
- La gestión de la planificación se realiza de una manera más interactiva hacia todos los
niveles organizacionales; los usuarios del sistema encargados del seguimiento de las tareas
principales así como el análisis del cumplimiento de los objetivos de la entidad, pueden
consultar el desglose de los elementos de la planificación, así como el cumplimiento de los
mismos, mediante la representación gráfica de los indicadores: composición y estado de
cumplimento, cantidad de involucrados, porciento de cumplimiento.
- Permite el aprovechamiento del tiempo en cuanto a la búsqueda de especificaciones de los
elementos.
- Posibilita la generación de salidas del sistema en función de los indicadores claves de la
planificación.
10
2. CONCLUSIONES
Se obtuvo la solución para la obtención de gráficos en SIPAC, que responde a las necesidades
del cliente, la cual fue comprobada a través de pruebas de software efectuadas al obtenerse
resultados positivos.
3. RECOMENDACIONES
Para futuras mejoras de la solución realizada se recomienda:
-
Incluir gráficos para la representación de los indicadores que se agrupan en los
reportes de la Instrucción No. 1 Del Presidente de Los Consejos de Estado y de
Ministros para la Planificación de los Objetivos y Actividades en los Órganos,
Organismos de La Administración Central del Estado, Entidades Nacionales y las
Administraciones Locales del Poder Popular.
-
Implementar una funcionalidad que permita modificar los gráficos con el objetivo de
ofrecerle al usuario mejoras en la personalización de la solución.
4. REFERENCIAS BIBLIOGRÁFICAS
1. Artola, Ariadna Rendón." Proyecto Técnico SIPAC ". [Documento] Habana : Universidad de las
Ciencias Informáticas, 2013.
2. Dickens, Jeff.Softpedia. [En línea] 23 de Diciembre de 2011. [Citado el: 13 de Junio de 2013.]
http://www.softpedia.es/programa-PyChart-202891.html.
3.
Boutell.Com.Boutell.Com.
[En
línea]
2013.
[Citado
el:
13
de
Junio
de
2013.]
http://www.boutell.com/gd/.
4. Kuan, Joe.Learning Highcharts. [Libro] s.l. : Packt Publishing, 2012. 978-1-84951-908-3.
5. Baryolo, Oiner Gómez, Borbón, Yoandry Morejón y Tejo, Darien Garcia."Arquitectura
tecnológica para el desarrollo de software ". Habana : s.n.
5. BIBLIOGRAFÍA
1. Artola, Ariadna Rendón. Proyecto Técnico SIPAC. [Documento] Habana : Universidad de las
Ciencias Informáticas, 2013.
2. Dickens, Jeff. Softpedia. [En línea] 23 de Diciembre de 2011. [Citado el: 13 de Junio de 2013.]
http://www.softpedia.es/programa-PyChart-202891.html.
3. Boutell.Com. Boutell.Com. [En línea] 2013. [Citado el: 13 de Junio de 2013.]
11
http://www.boutell.com/gd/.
4. Kuan, Joe. Learning Highcharts. [Libro] s.l. : Packt Publishing, 2012. 978-1-84951-908-3.
5. Baryolo, Oiner Gómez, Borbón, Yoandry Morejón y Tejo, Darien Garcia. ARQUITECTURA
TECNOLÓGICA PARA EL DESARROLLO DE SOFTWARE. Habana : s.n.
6.
spimeWiki.
spimeWiki.
[En
línea]
2013.
[Citado
el:
22
de
Enero
de
2013.]
http://wiki.spimebox.com/doku.php?id=framework.
7. Cutter', Blades, Ramsay y Colin y Frederick, Shea. Learning Ext JS. s.l. : Packt Publishing,
2008.
8. Zend Technologies. Zend Technologies. [En línea] 2012. [Citado el: 27 de Noviembre de
2012.] http://framework.zend.com/manual/1.12/en/manual.html.
9. Vesterinen, Konsta. doctrine. [En línea] 2012. [Citado el: 27 de Noviembre de 2012.]
http://www.doctrine-project.org.
12