Tecnolgico Nacional de Mxico

Instituto Tecnolgico de Iztapalapa II

Ingeniera en Tecnologas de la Informacin y Comunicaciones

Informe Tcnico de Residencia Profesional:

Gestor de Informes Ejecutivos Policiales

Presenta
Linares Espinosa Emilio Gamaliel
No. de Control: 121090139

Asesor interno: Lic. Vctor Ivn Vicente Jimnez

Asesor externo: Ing. Julio Csar Gmez Castillo

Marzo 2017

Agradecimiento
Le agradezco a mi madre Ana Urbana Espinosa Hernndez por el tiempo, la
dedicacin, el esfuerzo y las molestias que le cause al paso de todos estos
aos, jams sabr como retribuir a todo lo que hizo, dedico y sacrifico por m,
por los valores que me ha inculcado, por la oportunidad de una buena
educacin , por todas las sacadas de paciencia , regaos y metidas de pata que
cause y ella hizo el favor de sacarme adelante, eres lo que ms valoro en este
mundo y mi preciada Reyna gracias por todo ma.

A mi hermano por todas las molestias y competencias que tuvimos, tenemos y

tendremos al paso del tiempo, por ser como eres con migo, jams desanimarme
en lo que quiera hacer, siempre molestndome pero nunca dejarme tirado,
divertirnos juntos y ser mi mejor amigo en todos los buenos y malos momento,
eres un guerrero y jams te vendrs abajo.

A mi amiga Adriana Araceli Jimnez Rodrguez por soportarme en todo

momento, en acompaarme siempre que lo necesitaba, por ser una buena
amiga la mejor que he tenido , jams rendirse y siempre seguir a mi lado , por
tener la voluntad de hierro , por siempre ser mi compaera y amiga.

A mis profesores por el tiempo, dedicacin, la paciencia y la forma de ensear

tan peculiar que tienen cada uno, por impulsar a las personas a romper siempre
sus lmites e ir por ms y jams dejar de soar.

Linares Espinosa Emilio Gamaliel

Resumen

2
En el presente documento se muestra el desarrollo de una Plataforma Web
para la Secretaria de Seguridad Pblica y el Tribunal Superior de Justicia, as
como una aplicacin mvil que est dividido en seis captulos principales:

En el primer captulo se muestra la informacin general de la institucin as

como las caractersticas, ubicacin, giro, misin, visin, etc. Tambin podemos
encontrar informacin sobre el rea donde se trabaj.

En el segundo captulo se redacta el marco terico, se introducen los conceptos

y definiciones necesarios para la comprensin adecuada del proyecto. Describe
toda la investigacin terica como las herramientas que se utilizaran para el
desarrollo del proyecto dando mencin del porque se utilizaran.

Se encuentran los diagramas de bloques de la plataforma web en general y

cada uno de sus apartados.

En el tercer captulo muestra el desarrollo de la plataforma web y de la

aplicacin mvil, el procedimiento y descripcin de las actividades realizadas.

La plataforma ayudar al Tribunal Superior de Justica a tener un mejor control

de las visitas a los imputados, ya que se llevar a cabo con la plataforma web y
la aplicacin mvil que ayudan a ser ms gil y exacta la visita, muestra la
informacin de cada imputado, la ubicacin y sus datos de identificacin
personal para verificar si es a quien se visitar.

La aplicacin mvil es una herramienta til tanto para los elementos de la

Secretaria de Seguridad Pblica, como del personal del Tribunal Superior de
Justicia que llevar a cabo la visita y pueda confirmar la informacin del
imputado.

En el cuarto captulo se encuentran los resultados adquiridos al trmino de la

plataforma web y de la aplicacin mvil.

En el quinto captulo se muestran las conclusiones del proyecto en general y las

experiencias adquiridas durante el desarrollo del proyecto.

En el captulo sexto, se localiza las competencias desarrolladas y aplicadas en

el proyecto como el mtodo utilizado para obtener la informacin acerca del
problema, el cual ser por el mtodo de observacin; posteriormente que se
realiz en cada una de sus fases.

NDICE

3
Resumen....................................................................................................................................3
Captulo I. Generalidades del proyecto...............................................................................9
1.1 Introduccin....................................................................................................................9
1.2 Descripcin de la empresa u organizacin...........................................................10
1.2.1 Antecedentes histricos de la empresa..........................................................10
1.2.2 Misin, Visin de la Institucin........................................................................11
1.2.3 Ubicacin................................................................................................................12
1.2.4 Giro..........................................................................................................................13
1.2.5 Logos de la empresa..........................................................................................13
1.2.6 Organigrama..........................................................................................................14
1.2.7 Descripcin del rea............................................................................................15
1.2.8 Misin de rea.......................................................................................................15
1.2.9 Visin de rea........................................................................................................16
1.3 Problemas a resolver..................................................................................................17
1.4 Objetivos........................................................................................................................18
1.4.1 Objetivo general....................................................................................................18
1.4.2 Objetivos especficos..........................................................................................18
1.5 Justificacin..................................................................................................................19
Captulo II. Marco Terico....................................................................................................20
2.1 Programas utilizados para el desarrollo del proyecto........................................20
2.1.1 Plataforma web.....................................................................................................20
2.1.2 Aplicacin mvil...................................................................................................20
2.1.3 Sublime Text..........................................................................................................20
2.1.4 Navicat....................................................................................................................21
2.1.5 Android Studio......................................................................................................22
2.1.6 Google Maps..........................................................................................................22
2.1.7 XAMPP....................................................................................................................23
2.2 Sistema para el Tribunal Superior de Justicia por la Secretaria de
Seguridad Pblica..............................................................................................................24
Capitulo III. Desarrollo..........................................................................................................29
3.1 Procedimiento y descripcin de las actividades realizadas.............................29
3.1.1 Plataforma web.....................................................................................................29

4
 3.1.2 Aplicacin Mvil....................................................................................................36
Capitulo IV. Resultados.........................................................................................................41
Capitulo V. Conclusiones.....................................................................................................42
5.1 Conclusiones de proyecto.........................................................................................42
5.2 Recomendaciones y experiencia personal profesional adquirida..................43
5.2.1 Recomendaciones................................................................................................43
5.2.2 Experiencia profesional adquirida...................................................................43
Captulo VI. Competencias desarrolladas y/o Aplicadas..............................................43
Fuentes de informacin........................................................................................................45
ANEXOS....................................................................................................................................46
Anexo 1. Manual de Usuario...........................................................................................47

Tabla de imgenes

5
Ilustracin 1 Ubicacin de la Secretaria de Seguridad Pblica Google Maps (2016)..................12

Ilustracin 2 Logo de la Secretaria de Seguridad Pblica (SSP, 2016).........................................13

Ilustracin 3 Organigrama de la Secretaria de Seguridad Pblica (SSP, 2016)............................14

Ilustracin 4 Diagrama del proyecto general (SSP, 2016)............................................................24

Ilustracin 5 Diagrama de alta del imputado (SSP, 2016)............................................................24

Ilustracin 6 Diagrama alta de periodo de visitas (SSP, 2016).....................................................25

Ilustracin 7 Diagrama de entrega de oficio por el TSJ y visualizacin de tablero para la SSP (SSP,
2016)...........................................................................................................................................26

Ilustracin 8 Diagrama de registro de usuarios de la aplicacin para escanear QR (SSP, 2016).. 27

Ilustracin 9 Diagrama del proceso de la aplicacin mvil para escanear QR (SSP, 2016)..........28

Ilustracin 10 Plataforma Web...................................................................................................29

Ilustracin 11 Consulta por rangos de fechas.............................................................................29

Ilustracin 12 Direcciones del imputado....................................................................................30

Ilustracin 13 Localizacin de imputados...................................................................................30

Ilustracin 14 Estructura de Plataforma.....................................................................................31

Ilustracin 15 Diagrama de rbol de la plataforma web.............................................................32

Ilustracin 16 Conexin de base de datos Prueba....................................................................33

Ilustracin 17 Consultas a base de datos....................................................................................33

Ilustracin 18 Conexin, vista y base de datos...........................................................................34

Ilustracin 19 Creacin del mapa...............................................................................................34

Ilustracin 20 Creacin de infowindow.......................................................................................35

Ilustracin 21 Creacin de contenido, nombre y ubicacin de marcador...................................35

Ilustracin 22 Creacin del marcador.........................................................................................35

Ilustracin 23 Login (inicio de sesin).........................................................................................36

Ilustracin 24 Login de aplicacin...............................................................................................37

Ilustracin 25 Sesin iniciada.....................................................................................................37

6
Ilustracin 26 Cmara del celular................................................................................................38

Ilustracin 27 Resultado de aplicacin.......................................................................................38

Ilustracin 28 Conexin de base de datos..................................................................................38

Ilustracin 29 Libreras predeterminadas para lector QR...........................................................39

Ilustracin 30 Libreras para la aplicacin...................................................................................39

Ilustracin 31 Evento de botn....................................................................................................39

Ilustracin 32 Creacin de botn de escner...............................................................................39

Ilustracin 33 Obtencin de la lectura de cdigo QR..................................................................40

Ilustracin 34 Plataforma web....................................................................................................41

Ilustracin 35 Aplicacin mvil...................................................................................................41

Ilustracin 36 Navegador............................................................................................................48

Ilustracin 37 Plataforma web....................................................................................................48

Ilustracin 38 Validador de fechas..............................................................................................48

Ilustracin 39 Mapa de Ubicaciones de los imputados...............................................................48

Ilustracin 40 Ubicacin de direccin mediante mapa Google Maps (2016)..............................48

Ilustracin 41 Ubicacin de direccin mediante barra lateral....................................................48

Ilustracin 42 Ejemplo del error.................................................................................................48

Ilustracin 43 Visualizacin al resolver el error..........................................................................48

Ilustracin 44 Ejemplo del problema..........................................................................................48

Ilustracin 45 Revisin del proxy................................................................................................48

Ilustracin 46 Revisin de internet.............................................................................................48

Ilustracin 47 Solucin de problemas del internet.....................................................................48

Ilustracin 48 Aplicacin mvil...................................................................................................48

Ilustracin 49 Iniciar sesin........................................................................................................48

7
Ilustracin 50 Primer ventana de la aplicacin mvil.................................................................48

Ilustracin 51 Lector QR.............................................................................................................48

Ilustracin 52 Informacin del cdigo QR...................................................................................48

8
 Captulo I. Generalidades del proyecto

1.1 Introduccin

La Secretaria de Seguridad Pblica (SSP), es una dependencia de gobierno

que tiene como una de sus funciones salvaguardar la integridad y patrimonio de
las personas, prevenir la comisin de delitos e infracciones a las disposiciones
gubernativas y de polica, as como a preservar las libertades, el orden y la paz.

Actualmente dentro de cualquier organizacin, institucin o dependencia se

utilizan nuevas herramientas tecnolgicas, y la Secretaria de Seguridad Pblica
no es la excepcin ya que con la plataforma web y la aplicacin mvil se busca
es ayudar a agilizar el procesos de visitas a imputados, acelerando su mejora
continua.

El sistema que se plantea permitir implementar una solucin para llevar el

control del personal y almacenamiento de informacin de las visitas a
imputados1, (SSP, 2016).

1 Persona a la cual se le atribuye la comisin de un determinado delito o su participacin en algn acto

delictivo. Definicin ABC http://www.definicionabc.com/derecho/imputado.php

9
1.2 Descripcin de la empresa u organizacin

1.2.1 Antecedentes histricos de la empresa

Acrnimo: SSPCDMX.
Tipo: Dependencia del Gobierno de la Ciudad de Mxico.
Fundacin: 1968.
mbito: Mxico.
Sede: Cuidad de Mxico, Liverpool 136, Col. Jurez, Delegacin
Cuauhtmoc.
Secretario: Hiram Almeida Estrada.
Entidad Superior: Jefe de gobierno de la Ciudad de Mxico.

El antecedente moderno de la actual Secretara de Seguridad Pblica del

Ciudad de Mxico se encuentra en la antigua dependencia del Ciudad de
Mxico creada en 1984, denominada Secretara General de Proteccin y
Vialidad que integraba los cuerpos policacos y de trnsito en la misma
institucin. En 1993 se expide la Ley de Seguridad Pblica del Ciudad de
Mxico que comienza la transformacin de dicha secretara, a la que un ao
ms tarde se deslindara de las competencias en materia de reclusorios y de
autotransporte urbano pero manteniendo el cuerpo de control de trnsito, para,
finalmente en 1995, terminar cambiando su nombre a "Secretara de Seguridad
Pblica del Ciudad de Mxico".

En 1999 entra en vigor la nueva "Ley Orgnica de la Administracin Pblica

Federal" que otorga el fundamento jurdico an vigente, numerndola entre las
dependencias auxiliares en las atribuciones del Jefe de Gobierno del Ciudad de
Mxico y sealando que dicha institucin junto con la Procuradura de Justicia
del DF "se ubican en el mbito orgnico del Gobierno del Ciudad de Mxico y
se regirn por las leyes especficas correspondientes".

Por ltimo el 20 de mayo de 2003, se estipula la organizacin interna de la

institucin mediante la Publicacin de la "Ley Orgnica de la Secretara de
Seguridad Pblica del Ciudad de Mxico" que se vera complementada en 2005
con la Publicacin del "Reglamento Interior de la Secretara de Seguridad
Pblica del Ciudad de Mxico".(SSP, 2016).

10
1.2.2 Misin, Visin de la Institucin.

Misin

Preservar y proteger el orden pblico, la integridad personal y los bienes de

toda la poblacin del Ciudad de Mxico, ejercitando acciones de participacin
ciudadana, profesionalizacin de las instituciones policiales y ptima aplicacin
de la tecnologa en el otorgamiento del servicio de seguridad pblica, que
contribuyan a prevenir la comisin de delitos, en coordinacin con los niveles de
Gobierno.

Visin

Ser una Secretara de excelencia dentro de la administracin Pblica del

Ciudad de Mxico, que acta con apego a la legalidad y respeto por los
derechos humanos, promoviendo la participacin activa de la sociedad en las
acciones de prevencin del delito, Siendo una Institucin eficaz, eficiente y
responsable, con personal permanentemente capacitado en el ejercicio de sus
funciones, con el fin de fortalecer la confianza de seguridad pblica de la
poblacin del Ciudad de Mxico, (SSP, 2016).

1.2.3 Ubicacin

11
La Secretaria de Seguridad Pblica se encuentra ubicada al norte de la Ciudad
de Mxico en la direccin de Liverpool No. 136, Colonia Jurez, C.P. 06600,
Delegacin Cuauhtmoc, Ciudad de Mxico. As como lo muestra el mapa de
Google Maps.

Ilustracin 1 Ubicacin de la Secretaria de Seguridad Pblica Google Maps (2016).

1.2.4 Giro

De gobierno.

12
1.2.5 Logos de la empresa

Ilustracin 2 Logo de la Secretaria de Seguridad Pblica (SSP, 2016).

1.2.6 Organigrama
SECRETARIA DE SEGURIDAD PBLICA DEL CIUDAD DE MXICO

Secretaria de Seguridad
Pblica Secretaria
Particular
Direccin General Tecnologas de la
Informacin y comunicaciones
13
 Direccin Ejecutiva de
Sistemas

Direccin de Servicios de Direccin de Desarrollo de

Computo Sistemas

Subdireccin de Desarrollo de Subdireccin de Desarrollo

Sistemas Informticos de de Sistemas Informticos
Subdireccin de Subdireccin de Atencin Operacin Administrativos
Infraestructura y Tecnolgica
Seguridad Informtica

JUD de Servicios y JUD de Centro de JUD de Sistemas JUD de Sistemas

Seguridad Informtica Atencin Tecnolgica Policiales Administrativos
I

JUD de Sistemas de JUD de Servicios

Colaboracin Tecnolgicos
Enlace de Sistemas Enlace de Sistemas
Operativos Administrativos

Enlace de Gestin Enlace de Control de

de Dictamen Ante Servicios de Cmputo
Terceras Instancias

Ilustracin 3 Organigrama de la Secretaria de Seguridad Pblica (SSP, 2016).

1.2.7 Descripcin del rea

La Secretaria de Seguridad Pblica es una dependencia muy extensa por lo

que cuenta con un rea especfica que se dedica al desarrollo de nuevas
plataformas tecnolgicas:

Subsecretaria de informacin e inteligencia policial.

Direccin general de tecnologas de informacin y comunicaciones.
Direccin de sistemas de radiocomunicacin.

14
Est dedicada a la incorporacin de tecnologa como condicin de eficacia en el
logro de los objetivos policiales y la incorporacin de tecnologas de punta en
mbitos sensibles de la operacin y la administracin policial, desde
equipamiento y sistemas informticos integrados hasta video vigilancia y
comunicaciones.

Objetivo de rea

Establecer y coordinar las estrategias y los programas de apoyo que refuercen

la operacin policial, mediante la aplicacin del uso de plataformas
tecnolgicas, sistemas de informacin, investigacin y de tcticas policiales,
que contribuyan a la toma de decisiones para la prevencin del delito en el
Ciudad de Mxico.

1.2.8 Misin de rea

Planear, desarrollar e implementar las estrategias y los programas de apoyo

que refuercen la operacin policial, mediante la regulacin de los servicios de
seguridad privada, la aplicacin del uso de plataformas tecnolgicas, sistemas
de informacin e inteligencia, que permitan la adecuada toma de decisiones
para la prevencin del delito en el Ciudad de Mxico.

15
1.2.9 Visin de rea

Constituir una unidad lder en la regulacin de los servicios de seguridad

privada, con alta especializacin tecnolgica, de informacin e inteligencia con
procedimientos especficos de operacin claros, giles y eficientes, a travs de
capital humano capacitado, propiciando una colaboracin Interinstitucional,
Nacional e Internacional que mantenga a la Secretara de Seguridad Pblica a
la vanguardia en la prevencin del delito para el beneficio de la ciudadana,
(SSP, 2016).

16
 1.3 Problemas a resolver

Tiempo de desarrollo ya que se requiere reuniones previas para toma de

acuerdos entre ambas instituciones.

Bsqueda de informacin del manejo del framework codeigniter ya que

no se tena conocimiento.

Tener que llevar un equipo de cmputo para trabajar ya que la institucin

cuenta con los equipos necesarios para sus trabajadores y no para los
residentes y servicio social.

Internet limitado por medio de un proxy, esto hace que haya algunas
pginas restringidas por ello las pruebas no podan ser realizadas en el
momento necesario.

Realizar pruebas ficticias ya que no se cuenta con la base de datos

original ni con la conexin del servidor.

1.4 Objetivos

17
1.4.1 Objetivo general.

Realizar una plataforma web y una aplicacin mvil para llevar a cabo el control,
seguimiento y veracidad de las visitas a los imputados que da de alta el Tribunal
Superior de Justicia de una manera ms gil.

1.4.2 Objetivos especficos.

Analizar el proceso de las visitas a imputados.

Establecer diseo grfico a partir las autoridades de la Secretaria de

Seguridad Pblica.

Realizar la programacin con base al diseo grfico usando las

herramientas adquiridas por la Secretaria de Seguridad Pblica.

18
 1.5 Justificacin

Los registros de personas imputadas del Tribunal Superior de Justica son muy
ineficiente y realizado de forma manual, lo que genera demasiado tiempo en
realizarse dichas actividades, adems de ser un proceso muy laborioso, por
ello, solicita una plataforma web la cual haga ms gil el proceso.

Para realizar este proyecto intervienen dos instituciones: La Secretaria de

Seguridad Pblica y el Tribunal Superior de Justica. Por lo que la Secretaria de
Seguridad Pblica realizar una plataforma web que ayudara a verificar cuando
y donde se realizaran las visitas. As como una aplicacin mvil para que los
elementos puedan ver la informacin del imputado en el momento de la visita y
verificar correctamente si es la persona que se tiene que visitar.

Para dar cumplimiento a las visitas peridicas, el Tribunal Superior de Justica

solicita apoyo a los elementos de la Secretaria de Seguridad Pblica para
seguridad de la persona que realizar las visitas, este proceso se lleva a cabo a
travs de un oficio ingresado por oficiala de partes sealando las fechas en que
se ejecutarn las visitas, dicho oficio se entrega en Base Orus en donde se
organiza y manda el apoyo de los elementos que se solicitan.

Captulo II. Marco Terico

19
 2.1 Programas utilizados para el desarrollo del proyecto

2.1.1 Plataforma web

Una plataforma web incluye elementos adicionales a la pgina web tales como
aplicaciones, carritos de compras, formularios, convertidores, instancias de
aprobacin y alguna otra solucin especfica para la necesidad del cliente y el
mercado. Estos elementos pueden ser pblicos o privados, tales como sistemas
de comunicacin interna o inventarios.

Nuestra firma desarrolla proyectos o plataformas a partir de los requerimientos

de clientes y en todo tipo de lenguajes, usando ASP.net, HTML, HTML5,
Joomla, WordPress, Drupal, Zencart, Magento, etc.

Al ser un producto a medida, nuestro servicio incluye un seguimiento continuo

durante el proceso y despus de la entrega. Capacitamos al personal que se
involucrar en el manejo e implementamos manuales y tutoriales para
complementar la capacitacin y entrenamiento de nuevo personal.[ CITATION
Int16 \l 3082 ]
2.1.2 Aplicacin mvil

Una aplicacin mvil, applo o app (en ingls) es una aplicacin informtica
diseada para ser ejecutada en telfonos inteligentes, tabletas y otros
dispositivos mviles y que permite al usuario efectuar una tarea concreta de
cualquier tipo profesional, de ocio, educativa, de acceso a servicios, etc.
[ CITATION Inf11 \l 3082 ]
2.1.3 Sublime Text

Es un editor de cdigo multiplataforma es bastante personalizable al punto que

podemos cambiar el comportamiento del editor, el tamao y tipo de tipografa, los
atajos de teclado, los esquemas de colores y otras series de opciones para
acomodar la aplicacin a nuestras necesidades. Por defecto incluye un mini mapa
que nos permite navegar rpidamente por nuestro cdigo. Est escrito en C++ y
Python para los plugins, creado por Jon Skinner.

Se seleccion Sublime Text ya que no es de libre acceso, pero podemos usar la

versin de prueba por tiempo indefinido, solo que nos saldr un popUp cada vez
que guardemos nuestros archivos una determinada cantidad de veces.

20
 Podemos adems gestionar nuestros proyectos, e incluso combinarlos, y cambiar
entre ellos de forma rpida. En Sublime Text se puede escribir cdigo para diversos
lenguajes, tienes soporte para Snippets, y con la instalacin de plugins podremos
tener soporte para GIT, o pre-compiladores para CSS como como Less o Stylus. Es
ideal si queremos desarrollar con DJango o Python directamente.

En su men de herramientas podremos encontrar opciones para casi todo. Digamos que
por ende es un editor para desarrolladores con un nivel de conocimiento que parte de lo
medio. . Bisb, R. L. (26 de 01 de 2015).

2.1.4 Navicat

Navicat es una interfaz grfica, proporciona una manera ms fcil de gestionar,

disear y manipular datos en MySQL, MariaDB, SQL Server, SQLite, Oracle y
PostgreSQL. Creado por el Magazine Database Trends and Applications.
Aqu podr crear, editar, ejecutar consultas y ver los resultados. Con nuestra
increble funcin de Finalizacin de Cdigo Contextual, no slo le ayudar a
completar la consulta que est escribiendo, haciendo sugerencias razonables,
tambin le ayudar rpidamente en los errores de cdigo. El Generador de
Consultas permite crear y editar consultas visualmente sin conocimientos de SQL.
Proporcionando un conjunto de mtodos para construir las partes individuales de
una instruccin de seleccin. Tambin, rene las diferentes partes de una
instruccin vlida de SQL. Slo con unos pocos clics, tendr una consulta
completada.
Utilizado en la Secretaria de Seguridad Pblica ya que se tienen la licencia,
tambin porque es un Administrador de Base de datos rpido, fiable y asequible.
Especialmente diseada para simplificar la gestin de bases de datos y reducir los
costes de administracin.

El embellecedor de SQL en el Editor de SQL est diseado para aumentar la

productividad, ya que no tendr que preocuparse por el formato de la consulta al
crearla o reformatearla al realizar modificaciones. Obtendr una consulta
formateada al instante, lo que le permitir comprenderla fcilmente y mejorar la
legibilidad de su consulta. ( navicat 2016).

2.1.5 Android Studio

Android Studio es un entorno de desarrollo integrado (IDE), basado en IntelliJ

IDEA de la compaa JetBrains, que proporciona varias mejoras con respecto al
plugin ADT (Android Developer Tools) para Eclipse. Android Studio utiliza una

21
licencia de software libre Apache 2.0, est programado en Java y es
multiplataforma.
Android Studio utiliza una licencia de software libre Apache 2.0, est programado en
Java y es multiplataforma. Este programa lo manejan ya que es un software libre
aparte de sus mltiples ventajas y comodidad al manejarlo como una compilacin
rpida, ejecucin de la App en tiempo real gracias al emulador tambin contiene
todo lo necesario para desarrollar cualquier IDE.
Una de las ventajas al usar Android Studio es la ejecucin de la App directamente
desde el mvil. No soporta el desarrollo para NDK, pero intellij con el plugin Android
s. [ CITATION And14 \l 3082 ]
2.1.6 Google Maps

Se utiliza Google Maps para el desarrollo de la plataforma web ya que se

introdujo un mapa que nos ayuda a saber con certeza la ubicacin de los
imputados.

Google Maps fue desarrollado originalmente por dos hermanos Daneses, Lars y
Jens Rasmussen, co-fundadores de Where 2 Technologies una empresa
dedicada a la creacin de soluciones de mapeo. La empresa fue adquirida por
Google en octubre de 2004, y los dos hermanos luego crearon Google Maps
(tambin son los que estn detrs de Google Wave).

Antes de que hubiera una API pblica, algunos desarrolladores descubrieron la

manera de hackear Google Maps para incorporar los mapas en sus propios
sitios web. Esto llev a Google a la conclusin de que haba una necesidad de
una API pblica, y en junio de 2005 fue lanzado pblicamente.

Cmo funciona Google Maps?

Es slo HTML, CSS y JavaScript trabajando junto. Los mapas son solo
imgenes que se cargan en el fondo a travs de peticiones ejecutadas por la
tecnologa de AJAX, y se insertan en un <div> en la pgina HTML. Mientras
navegas en el mapa, el API enva informacin acerca de las nuevas
coordenadas y los niveles de zoom del mapa a travs de AJAX y esto retorna
las imgenes.

El API consiste de archivos JavaScript que contienen las clases, mtodos y

propiedades que se usan para el comportamiento de los mapas. Cmo se
usan?, de eso se trata esta gua. Esta gua tratar acerca de la ltima versin
creada al momento, la versin 3.

22
Las coordenadas estn expresadas usando nmeros decimales separados por
coma. La latitud siempre precede la longitud. La latitud es positiva si va
despus del punto mostrado en el mapa y negativo si va antes. La longitud es
positiva si va arriba del punto y negativa si va debajo. Coln, A. R. (4 de abril de
2011).

2.1.7 XAMPP

Es un paquete de instalacin independiente de plataforma, software libre, que

consiste principalmente en el sistema de gestin de bases de datos MySQL, el
servidor web Apache y los intrpretes para lenguajes de script: PHP y Perl.

Incluye adems servidores de bases de datos como MySQL ySQLite con sus
respectivos gestores phpMyAdmin y phpSQLiteAdmin. Incorpora tambin el
intrprete de PHP, el intrprete de Perl, servidores de FTP como ProFTPD
FileZilla FTP Serve, etc.

XAMPP es una herramienta de desarrollo que te permite probar tu trabajo

(pginas web o programacin por ejemplo) en tu propio ordenador sin
necesidad de tener que acezar a internet.

Si eres un desarrollador que recin est comenzando, tampoco debes

preocuparte sobre las configuraciones ya que XAMPP te provee de una
configuracin totalmente funcional desde el momento que lo instalas
(bsicamente lo extraes). Sin embargo, es bueno acotar que la seguridad de
datos no es su punto fuerte, por lo cual no es suficientemente seguro para
ambientes grandes o de produccin. Creado por Apache Friends. Xampp. (5 de
09 de 2016).

2.2 Sistema para el Tribunal Superior de Justicia por la

Secretaria de Seguridad Pblica

23
 Diagrama inicial del proceso de visitas a imputados por el Tribunal Superior de
Justicia y la Secretaria de Seguridad Pblica. Los nmeros indican los pasos a
seguir del proyecto.

1 2 3 4

Alta de Alta De Consulta Registro De

Inicio imputados visitas por el tablero usuarios Final
por el TSJ TSJ (visitas) por para la
la SSP aplicacin

Tribuna Secretaria de Seguridad Pblica

Superior de
Ilustracin 4 Diagrama del proyecto general (SSP, 2016).

Alta del imputado 1

El TSJ captura en
Se genera el
su sistema de datos El TSJ
cdigo QR Final
Inicio del imputado imprime el
con el No.
Nombre QR y entrega
De carpeta
Apellido paterno al imputado
judicial
Apellido materno
cifrado
No. De carpeta
judicial
Direccin
Foto base 64
Latitud
Longitud

Ilustracin 5 Diagrama de alta del imputado (SSP, 2016).

Alta de periodo de visitas 2

El TSJ captura en24 Enviar datos La aSSP

la SSP por
entrega
su sistema web service y se
folio deinsertan
recibido
Inicio Fecha de visita en la base de datos de laFinal
No. De 6carpeta
Ilustracin Diagrama alta de periodo de visitas (SSP, 2016). SSP
Entrega de oficio por el TSJ y visualizacin de tablero para
la SSP 3

Inicio El TSJ crea y enva La SSP recibe el oficio

oficio a la SSP para de autorizacin de
dar autorizacin de visitas por un elemento
visitas por un elemento y actualiza informacin
No. De oficio de la visita en la base
No. De carpeta judicial de datos
No. De oficio
No. De carpeta judicial

La SSP cuenta con No

oficio para visitar
al imputado

Web service por la SSP para

obtener zona, sector y cuadrante
Si

Tablero
Fecha
No. De carpeta judicial
Direccin
Latitud
Longitud
Zona
Sector
Cuadrante

Final

Ilustracin 7 Diagrama de entrega de oficio por el TSJ y visualizacin de tablero para la SSP (SSP, 2016).

25
 Registro de usuarios de la aplicacin para escanear QR2 4

La SSP generar el registro de

usuarios que utilizaran la
Inicio aplicacin
La SSP entrega usuario y
Nombre
contrasea
Apellido paterno
Apellido materno
IMEI
Email
Contrasea

Final

Ilustracin 8 Diagrama de registro de usuarios de la aplicacin para escanear QR (SSP, 2016).

Proceso de la aplicacin mvil para escanear QR

2 cdigo QR (del ingls Quick Response code, "cdigo de respuesta rpida") es un mdulo para
Inicio almacenar informacin en una matriz de puntos o en un cdigo de barras bidimensional. Wikipedia
https://es.wikipedia.org/wiki/C%C3%B3digo_QR#Almacenamiento

26
 El elemento llega al domicilio del imputado

Se inserta en el web El TSJ realiza

Se encuentra No service de la SSP proceso de
imputado Motivo (catalogo incumplimiento
proporcionado por el
Si TSJ)
Observaciones
Para El elemento de la SSP escanea cdigo Fecha Final
QR Id del usuario

La SSP consulta web service para

obtener datos del imputado Se inserta en el web
Nombre service de la SSP
Apellido paterno Motivo (catalogo
Apellido materno+ proporcionado por el TSJ)
Foto en base 64 Observaciones
Direccin Fecha
Id del usuario

Coinciden datos con el

El TSJ realiza proceso de
imputado
incumplimiento

Se inserta en el web service de la SSP

Asistencia
Fecha de la visita Final
Id del usuario

Ilustracin 9 Diagrama del proceso de la aplicacin mvil para escanear QR (SSP, 2016).

Capitulo III. Desarrollo

27
3.1 Procedimiento y descripcin de las actividades realizadas.

3.1.1 Plataforma web

Para el desarrollo de la plataforma se utiliz Xampp para la creacin de base de

datos y php para la programacin.

Ilustracin 10 Plataforma Web.

En la primera parte del sistema se puede visualizar dos lectores de fechas, los
cuales nos dan el manejo de visitas ya echas o por hacer, tambin hay un
validador que nos indica el permiso de la visita a las personas imputadas que se
pueda visitar, el cual es entregado por el tribunal.

En la parte izquierda se mostrara la ubicacin (direccin) de la persona, dando

Ilustracin 11 Consulta por rangos de fechas.

clic en la direccin, en el mapa te mostrara o te dar la ubicacin del imputado.

28

Ilustracin 12 Direcciones del imputado.

En el mapa de la ilustracin 13 se muestran los diferentes puntos, ellos nos
indican la direccin del imputado, donde se localiza. La cantidad de los datos
radica en la autorizacin del tribunal.

Ilustracin 13 Localizacin de imputados.

2.2.2 Cdigo fuente de la Plataforma:

Estructura de la plataforma:

29
Nos basamos en el modelo vista controlador (MVC) 3 codeigniter 2 el cual nos
permiti dar una estructura a la codificacin de la plataforma, ya sea dentro del
framework y la carpeta application -> views nos permiti colocar nuestro cdigo
front-end.

Ilustracin 14 Estructura de Plataforma.

El Sistema fue desarrollado en ambiente web, es por eso que se realiza un

diagrama de rbol, para conocer la estructura, los colores representan la
jerarqua de etiquetas.

<html>

<head> <body>
3 Propone la construccin de tres componentes distintos que son el modelo, la vista y el controlador, es
decir, por un lado define componentes para la representacin
<div de la informacin, y por otro lado para la
id="wrapper">
interaccin del usuario. Wikipedia La enciclopedia libre https://es.wikipedia.org/wiki/Modelo
%E2%80%93vista%E2%80%93controlador#cite_note-1

30<FORM align="center"
<div id="page-content-wrapper"> action=
<div id="sidebar-wrapper">
<a href="#menu-toggle" "<?= base_url();?>"
<INPUT type="date" <div
<INPUT type="date"
class="gradient-menu" id="menu- name="validacion"
<div class="container-fluid"> id="map_canvas">
<h1<ul
<h1> <div >class="col-lg-12">
<div
toggle" class="row"> <div> class="sidebar-nav"
name="fechainc">
method="POST"> <br> id="side_bar"
<STRONG> >
name="fechafin">
style="color: #e4007d" >Lugares</h1>
<img align="margin-right"
src="logo1.jpg"/>

Ilustracin 15 Diagrama de rbol de la plataforma web.

En application -> config nos permiti colocar nuestro cdigo conexin con la
base de datos:

Ilustracin 16 Conexin de base de datos Prueba.

31

Ilustracin 17 Consultas a base de datos.

En application -> models nos permiti colocar nuestras consultas a la base de
datos:

En application -> controllers nos permiti la conexin de entre la vista y la base

de datos:

Ilustracin 18 Conexin, vista y base de datos.

Se utiliz el api de google maps y de ellos mismos los marcadores que
proporciona el api4:

4 Es una sigla que procede de la lengua inglesa y que alude a la expresin Application Programming
Interface (cuya traduccin es Interfaz de Programacin de Aplicaciones). Definicin
http://definicion.de/api/

32
5
<script src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyDzRfhHeo_JGvr5EuDsvZgJx_PxwY3N2ZM"
Type="text/javascript"></script>

Ilustracin 19 Creacin del mapa.

Tambin el api de google maps nos proporciona distintas herramientas que
utilizamos; como son la creacin de los marcadores, infowindows 6 y el
contenido de dicho marcador.

Ilustracin 20 Creacin de infowindow.

Ilustracin 21 Creacin de contenido, nombre y ubicacin de marcador.

5 Api
6 Los objetos InfoWindow muestran contenido (generalmente, texto o imgenes) dentro de una ventana
emergente que aparece en sobre el mapa, en una ubicacin determinada. Maps JavaScript API
https://developers.google.com/maps/documentation/javascript/infowindows?hl=es-419

33
 Ilustracin 22 Creacin del marcador.
3.1.2 Aplicacin Mvil

La aplicacin fue desarrollada en 3 distintas software, la creacin de base de

datos se ocup XAMPP, en el diseo de la aplicacin se utiliz Android studio
(java) y para la conexin de la aplicacin y la base de datos se utiliz php
sublime text.

34
 Ilustracin 23 Login (inicio de sesin).

En la parte inferior de la aplicacin se debe de iniciar sesin, para poder

ingresar al lector QR, el registro del personal lo hace directamente el tribunal
superior de justicia, el cual al termino del registro le proporciona al personal de
la visita un usuario y contrasea para el ingreso.

35

Ilustracin 24 Login de aplicacin.

Al verificar que el personal ya este registrado, la aplicacin permitir acceder al
escner y al cierre de sesin.

Ilustracin 25 Sesin iniciada.

36
Dando clic al botn de escaneo nos direcciona a la cmara del telfono la cual
utilizaremos para poder leer el cdigo QR y nos proporcionara los datos del
imputado.

Ilustracin 26 Cmara del celular. Ilustracin 27 Resultado de aplicacin.

Para poder realizar el login se realiz la conexin a la base de datos la cual fue:

Ilustracin 28 Conexin de base de datos.

Para realizar el lector QR se ocuparon distintas libreras, las principales fueron:

37
Ilustracin 29 Libreras predeterminadas para lector QR.
 Ilustracin 30 Libreras para la aplicacin.

Con la librera escrita se coloc el botn que mandar el evento del lector QR

Ilustracin 31 Creacin de botn de escner.

Ilustracin 32 Evento de botn.

38

Ilustracin 33 Obtencin de la lectura de cdigo QR.

39
 Capitulo IV. Resultados

Con base al desarrollo anterior el resultado fue la aplicacin web que muestra
las direcciones de los imputados cuando se tienen que realizar las visitas en las
fechas ingresadas en la parte superior de la plataforma web. En la parte lateral
izquierda muestra las direcciones y en el mapa lo indica con los marcadores.

Ilustracin 34 Plataforma web

Otro de los resultados fue la aplicacin mvil que servir para los elementos de
la Secretaria de Seguridad Pblica, al realizar la visita a imputados ya que
podrn ingresar cada uno con nombre y contrasea, al escanear el cdigo QR
podrn ver la informacin del imputado. La plataforma web y la aplicacin mvil
fueron probadas con informacin ficticia. Ver anexo 1 Manual de usuario.

Ilustracin 35 Aplicacin
40 mvil
 Capitulo V. Conclusiones

5.1 Conclusiones de proyecto

El sistema de control de imputados est enfocado al monitoreo de personas que

ha sido acusados de un delito no grave, y se busca optimizar mediante la
plataforma web y la aplicacin mvil el funcionamiento de la empresa en el
proceso de visita a imputados.

La plataforma web y la aplicacin mvil estn en estado de prueba por la

Secretaria de Seguridad Publica, an no se ha podido implementar al 100% ya
que las instituciones involucradas no han podido reunirse para realizar las
pruebas correspondientes y el acuerdo de la aceptacin e implementacin

41
5.2 Recomendaciones y experiencia personal profesional
adquirida

5.2.1 Recomendaciones

Poder tener equipo de cmputo para los residentes y servicio social ya

que no todos tiene la posibilidad de llevar su propio equipo para trabajar.

No tener restricciones (proxy) para poder hacer las pruebas necesarias y

corregir errores.

Contar con la informacin verdica, como la base de datos para poder

realizar pruebas de la plataforma web y la aplicacin mvil.

5.2.2 Experiencia profesional adquirida

A lo largo de las residencias profesionales en la Secretaria de Seguridad

Pblica fue una gran experiencia ya que se trabaj con framework que
desconoca como codeigniter, por lo mismo se investig su funcionamiento y fue
muy accesibles porque no son complejos y es fcil de programar en poco
tiempo.

42
Captulo VI. Competencias desarrolladas y/o Aplicadas

Solucin de problemas aplicando una herramienta de programacin.

Anlisis del problema

Programacin web
Programacin mvil
Diseo de soluciones mediante diagramas de bloques y rbol.
Uso y diseo de base de datos.

Trabajo en equipo. Consisti en conocer la visita de imputados y como es

realizado el proceso que se lleva acabo.

Comunicacin es principal elemento para llegar al objetivo y solucionar los

problemas que se presentan, plantear las soluciones posibles.

43
Fuentes de informacin
Bisb, R. L. (26 de 01 de 2015). Los mejores cursos online para programadores. Obtenido de
campusmvp: https://www.campusmvp.es/recursos/post/5-caracteristicas-de-Sublime-
Text-que-deberias-conocer.aspx

Coln, A. R. (4 de abril de 2011). Maestros del Web. Obtenido de

http://www.maestrosdelweb.com/google-maps-api-v3-introduccion-y-primeros-pasos

Evaluando software.com. (26 de 10 de 2016). evaluando software.com. Obtenido de evaluando

sonftware.com

Informacion para las comunicaciones . (09 de 2011). Obtenido de

https://www.consumidor.ftc.gov/articulos/s0018-aplicaciones-moviles-que-son-y-
como-funcionan

InterClase. (junio de 2016). Obtenido de http://www.interclase.com/que-son-las-plataformas-

virtuales/

Marcos. (17 de 04 de 2016). Academia Android. Obtenido de

http://academiaandroid.com/android-studio-v1-caracteristicas-comparativa-eclipse/

navicat. (2016). Obtenido de https://navicat.com/es/products/navicat-premium-feature-matrix

SSP. (10 de octubre de 2016). Secretaria de Seguridad Publica. Obtenido de

http://www.ssp.cdmx.gob.mx/

SSP. (8 de 10 de 2016). ssp. Obtenido de

http://www.ssp.df.gob.mx/informacion_inteligencia_policial.html

Studio, A. (11 de 12 de 2014). Academia Android. Obtenido de

https://academiaandroid.com/android-studio-v1-caracteristicas-comparativa-eclipse/

Totus. (12 de 9 de 2016). Totus. Obtenido de http://blog.totvs.com/la-clave-de-la-

automatizacion-en-los-procesos-administrativos/?lang=es

Xampp. (5 de 09 de 2016). Apache Friends. Obtenido de

https://www.apachefriends.org/es/index.html

44
ANEXOS

45
 Anexo 1. Manual de Usuario

Introduccin

Es importante leer este manual antes de comenzar a utilizar la plataforma y la

aplicacin, ya que contiene toda la informacin requerida que el usuario debe
tener en cuenta.

El manual tiene como finalidad dar a conocer de manera detallada y sencilla la

estructura y funcin de la plataforma y aplicacin mvil para que cualquier
usuario pueda obtener el mximo beneficio y as brindarle una herramienta que
asegure el uso correcto de ellos.

La primera parte del proyecto consta de una plataforma que est incorporado
por un mapa y una base de datos, la cual nos proporciona la ubicacin del o la
imputada, el mapa toma como referencia de la base de datos: fechas, el
documento si fue o no fue aprobado, el permiso de visita a imputado y las
coordenadas de l o ella.

La segunda parte del proyecto consta de una aplicacin mvil que est
estructurada por un login7, lector QR y una base de datos, despus de localizar
en el mapa al imputado; el polica, acompaado de una persona del tribunal se
dirigen a la ubicacin del imputado, con la aplicacin cada imputado tiene un
cdigo QR que proporciona al polica y acompaante, registro de esa persona.

Objetivos

7 login o logon (en espaol ingresar o entrar) es el proceso mediante el cual se controla el acceso
individual a un sistema informtico mediante la identificacin del usuario utilizando credenciales
provistas por el usuario. Wikipedia https://es.wikipedia.org/wiki/Login

46
Brindar una descripcin detallada y clara sobre el funcionamiento y uso de la
plataforma web como la aplicacin mvil.

Requerimientos para el uso

47
1. La plataforma fue diseada para que funcione en los siguientes
dispositivos:

computadora.
Laptop.
Tablet.
Smartphone.

2. La aplicacin mvil fue diseada para que funcione en los siguientes

dispositivos:

Tablet (Android).
Telfonos Smartphone (Android).

3. La plataforma como la aplicacin mvil necesita internet.

4. La plataforma puede trabajar en los siguientes navegadores:

Internet Explorer.
Mozilla Firefox.
Google Chrome. (Recomendado)
Safari.

48
Plataforma

Pasos a realizar:

1. Ingresar al navegador de su preferencia:

Ilustracin 36 Navegador

2. Ingresar a la plataforma http://127.0.0.1/tribunal/ o la que proporcione el

administrador.

49

Ilustracin 37 Plataforma web

3. Ingresar Fechas que desee realizar visitas o haya permiso de visita, una
vez introducidas las fechas deseadas hacer clic en el botn validar y
enviar

Ilustracin 38 Validador de fechas

50
4. Una vez hayas echo clic en el botn Validar y enviar, en el mapa
aparecern las ubicaciones de las personas a visitar, al igual que en la
barra latera de lado izquierdo.

Ilustracin 39 Mapa de Ubicaciones de los imputados

5. Ya teniendo en el mapa las distintas ubicaciones, si conoces la direccin

de la persona puedes ir directamente al mapa y verla.

51

Ilustracin 40 Ubicacin de direccin mediante mapa Google Maps (2016)

 6. Si no conoces la ubicacin en el mapa y tienes la direccin en la barra
lateral, puedes buscarla al darle clic a la barra, aparecer en el mapa la
ubicacin de la persona.

Ilustracin 41 Ubicacin de direccin mediante barra lateral

Problemas y Soluciones

Problema:

52
1. No ingresa a la plataforma.
Ejemplo:

Ilustracin 42 Ejemplo del error

Solucin:
Pedir la Url (Direccin) a la persona encargada de la plataforma.

Ilustracin 43 Visualizacin al resolver el error

Problema:
2. No carga el mapa.

53

Ilustracin 44 Ejemplo del problema

 Solucin :
Revise su proxy.

Ilustracin 45 Revisin del proxy

Revisar conexin de internet.

54

Ilustracin 46 Revisin de internet

 Clic derecho.

Ilustracin 47 Solucin de problemas del internet

Aplicacin Mvil

Pasos a realizar:

1. Abrir la aplicacin mvil en el telfono (Smartphone) Android.

55

Ilustracin 48 Aplicacin mvil

2. Iniciar sesin

Ilustracin 49 Iniciar sesin

3. Una vez iniciada la sesin, aparecern 2 botones uno proporcionar la

opcin de cerrar sesin y el otro es para el escaneo del cdigo QR.

56

Ilustracin 50 Primer ventana de la aplicacin mvil

4. Oprimir botn Escner para activar el lector.

Ilustracin 51 Lector QR

5. En la pantalla de posteros aparecer el resultado del cdigo.

57

Ilustracin 52 Informacin del cdigo QR

 6. Al terminar de usar la aplicacin cierre sesin.

Problemas y Soluciones

Problema:
1. Inicio de sesin.

58
 Correccin: Conexin de internet.
Correccin: No est registrado, para eso se requiere registrarse
con la persona encargada de los registros.

Problema:
2. Compatibilidad.
Correccin: La aplicacin es para dispositivos Android.

59