UNIVERSIDAD TECNOLGICA DEL VALLE

DEL MEZQUITAL

DESARROLLO DEL SISTEMA DE

TRAYECTORIAS EDUCATIVAS DE LA UTVM

MEMORIA DE ESTADA
.

Que para obtener el ttulo de

TCNICO SUPERIOR UNIVERSITARIO EN

TECNOLOGAS DE LA INFORMACIN Y COMUNICACIN, REA
Y SISTEMAS INFORMTICOS

P R E S E N T A

Generacin: Septiembre 2014 Agosto 2016

Ixmiquilpan, Hidalgo, Agosto 2016

D-SA-06
El presente trabajo fue elaborado por Jonathan Ruperto Corona
Martnez, como requisito para obtener el ttulo de Tcnico
Superior Universitario en:
Tecnologas de la Informacin y Comunicacin, rea y Sistemas
Informticos.

Bajo la direccin y aprobacin de:

Mtra. Gloria Martnez Martin Ing. Alfredo Prez Gmez

Director de Programa Educativo Asesor Acadmico

D-SA-07

NDICE

2
Contenido
Resumen 6
Abstract 6
Introduccin........................................................................................................7
Captulo I 8
GENERALIDADES DE LA INSTITUCIN...........................................................8
1.1 Nombre..................................................................................... 9
1.2 Antecedentes............................................................................ 9
1.3 Misin....................................................................................... 9
1.4 Visin..................................................................................... 10
1.5 Valores.................................................................................... 10
1.6 Localizacin geogrfica...........................................................10
1.6.1 Macro localizacin............................................................................................................. 10
1.6.2 Micro localizacin.............................................................................................................. 11
1.7 Giro comercial.........................................................................12
1.8 Clasificacin........................................................................... 12
1.9 Organigrama........................................................................... 13
1.10 Funciones de las principales reas.............................................14
Captulo II...........................................................................................................16
ANLISIS Y DEFINICIN DEL PROYECTO....................................................16
2.1 Anlisis de la situacin actual......................................................17
2.2 Planteamiento del problema.........................................................17
2.3 Propuesta de solucin.................................................................17
2.4 Justificacin............................................................................... 18
2.5 Objetivo General.........................................................................18
2.6 Objetivos especficos..................................................................18
2.7 Alcance....................................................................................... 18
2.8 Limitaciones............................................................................... 19
2.9 Impacto y contribuciones del proyecto.........................................19
2.10 Estudio de factibilidad...............................................................19
2.10.1 Factibilidad tcnica.......................................................................................................... 19
2.10.2 Factibilidad econmica.................................................................................................... 20
2.10.3 Factibilidad operacional................................................................................................... 20
Captulo III..........................................................................................................21
PLANIFICACIN................................................................................................21

3
 3.1 Eleccin del modelo de desarrollo de software.............................22
3.2 Justificacin del modelo de desarrollo de software.......................22
3.3 Participantes............................................................................... 23
3.4 Cronograma de actividades.........................................................25
Captulo IV.........................................................................................................26
MARCO TERICO O REFERENCIAL..............................................................26
4.1 Estudio del arte...........................................................................27
4.2 Trayectorias Educativas..............................................................27
4.2.1 Qu son las trayectorias educativas?.........................................................................27
4.3 Twitter Bootstrap.........................................................................28
4.3.1 Qu es Bootstrap?........................................................................................................ 28
4.4 Php............................................................................................ 28
4.4.1Qu es Php?................................................................................................................... 28
4.5. Xampp....................................................................................... 29
4.5.1Qu es Xampp?.............................................................................................................. 29
4.6 Notepad++.................................................................................. 29
4.6.1 Qu es Notepad++?...................................................................................................... 29
4.7 Dreamweaver.............................................................................. 29
4.7.1 Que es Dreamweaver?.................................................................................................. 29
Captulo IV.........................................................................................................30
DESARROLLO DEL PROYECTO.....................................................................30
5.1 Diseo........................................................................................ 31
5.1.1 Mapa de sitio............................................................................. 31
5.1.2 Guas de estilo.................................................................................................................. 32
5.2 Desarrollo del sistema web..........................................................34
5.3 Pruebas...................................................................................... 37
Conclusiones....................................................................................................44
Bibliografa........................................................................................................45
Glosario 46

4
ndice de Imgenes

Ilustracin 1: Macro localizacin................................................................5

Ilustracin 2: Micro localizacin.................................................................6
Ilustracin 3: Organigrama........................................................................7
Ilustracin 4: cronograma de actividades..................................................19
Ilustracin 5: Cdigo de inicio de cesin...................................................26
Ilustracin 6: Pantalla de inicio de sesin..................................................27
Ilustracin 7: Cdigo de bsqueda de datos..............................................27
Ilustracin 8:Pantalla de bsqueda..........................................................28
Ilustracin 9: Cdigo de la pantalla de inicio..............................................28
Ilustracin 10: Pantalla de inicio...............................................................29

ndice de Tablas
Tabla 1: Software.................................................................................. 13
Tabla 2: Hardware................................................................................. 14
Tabla 3: Ventajas del modelo basado en prototipos....................................16
Tabla 4: Integrante del proyecto...............................................................17
Tabla 5: Integrante del proyecto...............................................................17
Tabla 6: tipografa.................................................................................. 24
Tabla 7: Colores principales....................................................................24
Tabla 8: Colores secundarios..................................................................25
Tabla 9: plan de prueba..........................................................................26
Tabla 10: Prueba 1................................................................................ 27
Tabla 11: Prueba 2................................................................................. 28
Tabla 12: Prueba 3................................................................................ 29
Tabla 13: Prueba 4................................................................................ 30
Tabla 14: Prueba 5................................................................................ 31

5
Resumen

El Sistema integral de informacin cuenta con diversos mdulos al cual se

agregar uno nuevo con la finalidad de facilitar la informacin de los alumnos
de esta casa de estudios de una manera ms organizada.

Las tecnologas y el software que se utilizarn para desarrollar este proyecto

sern Bootstrap, Php, MySql, Xampp.

El modulo del sistema se realizar en base a los estndares y diseos

establecidos por la universidad as mismo todo el proyecto que se desea crear
ser con un diseo dinmico e intuitivo, pues se pretende lograr que el diseo
este centrado en el usuario.

Abstract

Integral Information System has several modules, which will be added a new
order to provide the information of students in this university.

Technologies and software that will be used to develop this project will
Bootstrap, Php, MySql, Xampp.

The module system will be based on the standards and designs established by
the university itself and the whole project to be created will be a dynamic and
intuitive design, it is intended to ensure that the design is user-centered.

6
Introduccin

La importancia de tener la informacin detallada de los alumnos de la

universidad nos lleva a implementar un nuevo sistema dentro del Sistema
Integral de Informacin el cual es una plataforma que integra los sistemas
acadmicos y administrativos con el objetivo de automatizar los procesos y as
mismo poder obtener informacin oportuna y confiable para la toma de
decisiones.

Este mismo est integrado por varios mdulos (control escolar, caja, control de
becas, visitas industriales, control de laboratorios, control de inventarios,
educacin continua evaluacin a docentes, control de activos fijos,
psicopedagoga, mantenimiento e instalaciones y control presupuestal) al cual
se le anexara el sistema de Trayectorias educativas.

El sistema contendr informacin detallada de los estudiantes, as como su

historial acadmico y psicopedaggico facilitando la obtencin de datos de
cualquier alumno de la institucin para los fines que se requieran.

7
 Captulo I
GENERALIDADES DE
LA INSTITUCIN

8
1.1 Nombre

Universidad Tecnolgica del Valle del Mezquital

1.2 Antecedentes

La Universidad Tecnolgica del Valle del Mezquital, se crea el 9 de Septiembre

de 1996 con la finalidad de dar respuesta a las necesidades de la poblacin en
la regin; la idea de proporcionar un modelo educativo diferente al que se
aplica en las Universidades Tecnolgicas tradicionales y ofrecer a los alumnos
un modelo educativo que enriqueciera al original, el cual fue diseado para
Universidades que se ubican en zonas donde existen polos de desarrollo
industriales con un gran nmero de empresas productivas, mismas que facilitan
la contratacin y colocacin de sus alumnos.

A diferencia de ellas, la UTVM tiene grandes retos, se ubica en una zona no

industrializada, de escasos recursos econmicos, alta marginacin en su
poblacin; pero con la firme decisin de formar alumnos que conjuguen la
teora con la prctica.

Desde su fundacin, nuestra Universidad goz del respaldo de la comunidad

del Valle del Mezquital, as como del gobierno Estatal y Federal, como lo
demuestra el hecho de constituirse en la primera Universidad Tecnolgica
concebida como motor del desarrollo regional.

1.3 Misin

Somos una institucin pblica de nivel superior que ofrece servicios

educativos y tecnolgicos, que promueven el desarrollo sustentable,
comprometidos con la formacin de seres humanos con sentido de
identidad y valores, a travs del desarrollo de competencias basado en la
investigacin y la vinculacin.

9
1.4 Visin

Ser una institucin educativa de nivel superior reconocida por sus

contribuciones al desarrollo sustentable, a travs de la educacin,
investigacin y vinculacin pertinente e internacional.

1.5 Valores

Honestidad, Respeto, Responsabilidad, Lealtad, Humildad, Solidaridad,

Justicia, Libertad, Equidad y Tolerancia.

1.6 Localizacin geogrfica

1.6.1 Macro localizacin

Ilustracin 1: Macro localizacin

Fuente Imgenes de Google: http://intranet.e-hidalgo.gob.mx/enciclomuni/municipios/13030a.htm

10
 1.6.2 Micro localizacin

Ilustracin 2: Micro localizacin

Fuente Imgenes de Google: http://www.keywordpicture.com/abuse/mapa%20de%20ixmiquilpan/

1.7 Giro comercial

Institucin de servicios educativos

1.8 Clasificacin

Servicios

11
1.9 Organigrama
Ilustracin 3: Organigrama

Fuente: http://www.utvm.edu.mx/wp-content/uploads/2016/01/Estructura-Organica-2015.pd

12
1.10 Funciones de las principales reas

Funcin de la Vinculacin

La vinculacin, entendida como la interaccin de las universidades con el

entorno econmico, social, gubernamental y educativo, constituye la
plataforma desde la cual el Subsistema de Universidades Tecnolgicas teje
su red de contactos con el universo del que surge y para cuyo desarrollo fue
diseado. La formacin acadmica y la vinculacin constituyen un binomio
indisoluble.

Un trabajo fundamental de la vinculacin es determinar los perfiles

requeridos por la planta productiva para disear los planes y programas de
estudio que cubran eficaz y suficientemente los diferentes niveles y ramos
del sector productivo, a quienes se pide que reciban a los estudiantes con el
fin de realizar sus prcticas y estadas, lo que permite abrir los canales para
que los egresados establezcan contacto con sus futuros empleadores.

Sin embargo, la vinculacin no puede restringirse a las necesidades

coyunturales de una o varias empresas, sino que debe tener presente las
necesidades generales de la planta productiva de la regin e incluso de la
entidad federativa y, por lo tanto, las Universidades Tecnolgicas tienen que
proporcionar una amplia formacin profesional.

Programas Educativos basados en Competencias Profesionales

Toda la oferta educativa est diseada con un enfoque de competencias

profesionales, considerando las bases sentadas en el Tuning de Europa y
Amrica Latina y en el mismo sentido que el modelo de Quebec,
respondiendo de esta manera a las nuevas tendencias educativas.

La definicin de Competencia Profesional para Universidades Tecnolgicas

es: Posesin y desarrollo de conocimientos, destrezas y actitudes que
permiten al sujeto que las posee, desarrollar actividades en su rea
profesional, adaptarse a Gestin de nuevas situaciones, as como transferir,

13
 si es necesario, sus conocimientos, habilidades y actitudes a reas
profesionales.

Para garantizar la pertinencia de la oferta educativa, la actualizacin del

plan de estudios de los programas educativos se realiza cada 4 aos, de
manera conjunta entre los acadmicos de las Universidades Tecnolgicas y
la Subdireccin de Programas Educativos de la CGUTYP.

Educacin Continua

El Departamento de Educacin Continua disea, desarrolla, comercializa y

evala productos acadmicos que tienen como objetivo el desarrollo de
competencias profesionales o laborales, para incidir en la formacin,
certificacin, actualizacin, capacitacin, y entrenamiento de todos los
sectores sociales que tienen, o no, formacin acadmica.

Las acciones de Educacin Continua estn centradas en el cliente, sus

necesidades y en todos los casos estn enfocadas a impulsar el desarrollo
social y productivo a travs de la educacin.

Los programas de Educacin Continua estn diseados y desarrollados por

acadmicos de la Universidad que cuentan con grado acadmico de
maestra o doctorado y una amplia experiencia en el sector productivo; se
dirigen a todo pblico, no obstante, algunos tienen como requisito contar
con una preparacin especfica o con determinado grado acadmico.

El servicio de Educacin Continua est certificado ante la Norma ISO

9001:2008 y respaldado por la Secretara del Trabajo y Previsin Social; y
en el caso de los Centros Certificadores se cuenta con la Certificacin de la
Embajada Francesa para el Centro DELF-DALF, por el ETS para el Centro
TOEFL-ITP y por CONOCER para el Centro de Competencias Laborales.

14
Captulo II
ANLISIS Y
DEFINICIN DEL
PROYECTO

2.1 Anlisis de la situacin actual.

La Universidad Tecnolgica del Valle del Mezquital cuenta con una intranet que
ofrece a sus usuarios el acceso a la informacin mediante el SIIN tales como
(control escolar, caja, control de becas, visitas industriales, control de
laboratorios, control de inventarios, educacin continua evaluacin a docentes,

15
control de activos fijos, psicopedagoga, mantenimiento e instalaciones y
control presupuestal) de manera rpida y segura.

2.2 Planteamiento del problema.

En la Universidad Tecnolgica del Valle del Mezquital el SIIN no cuenta con un

sistema que ofrezca informacin detallada de los alumnos de esta casa de
estudios, en muchas ocasiones se tienen que consultar varios mdulos para
obtener la informacin deseada reflejndose en prdida de tiempo por parte de
los departamentos de servicios escolares, secretaria acadmica, directores y
tutores que necesiten cotejar la informacin a detalle de los estudiantes de esta
casa de estudios.

2.3 Propuesta de solucin.

Derivado de la problemtica anterior se pretende implementar en la

Universidad Tecnolgica del Valle del Mezquital un nuevo sistema que agilizar
la obtencin de datos, el sistema de trayectorias educativas se encargar de
centrar la informacin del estudiante con el fin de mostrar un historial
acadmico psicopedaggico e informacin complementaria de todos los
estudiantes de esta universidad de una manera rpida y organizada.

2.4 Justificacin.

La Universidad Tecnolgica del Valle del Mezquital cuenta con los recursos
necesarios para la implementacin de nuevos mdulos y hoy en da con el uso
de las nuevas tecnologas es posible implementar nuevas formas de manejar
los datos de una manera ms fcil y organizada, el proyecto ayudar de
manera significativa puesto que se podr acceder a la informacin de los

16
estudiantes de una manera ms organizada mejorando en gran medida la
visualizacin de los datos.

2.5 Objetivo General.

Desarrollar un mdulo que permita centrar la informacin de los alumnos de la

Universidad Tecnolgica del Valle del Mezquital para una mejor visualizacin de
los datos de los alumnos de una manera ms prctica y ordenada evitando
prdidas de tiempo.

2.6 Objetivos especficos.

Agilizar la bsqueda de informacin de los alumnos.

Mostrar informacin de acuerdo al criterio de bsqueda.

Generar reportes

2.7 Alcance.

El Sistema de Trayectorias Educativas ofrecer la informacin a los

departamentos de servicios escolares, secretaria acadmica, directores y
tutores que deseen datos adicionales sobre un alumno en particular.

Se acceder a los datos de los alumnos sin complicaciones.

Ofrecer seguridad y resguardo de informacin.
La informacin estar seccionada para una mejor visualizacin.

2.8 Limitaciones.

El diseo ya est preestablecido por la institucin por lo que no se puede

cambiar.
Solo se tuvo acceso a las interfaces del mdulo ms no las bases de
datos.
Poco conocimiento acerca de Bootstrap y Php.

17
2.9 Impacto y contribuciones del proyecto.

El proyecto contribuye de manera significativa a los departamentos de servicios

escolares, secretaria acadmica, directores y tutores ya que facilita la
obtencin de la informacin de los alumnos de una manera ms ordenada.

Ahorro de tiempo en cuanto a la bsqueda de informacin de los alumnos de la

Universidad Tecnolgica del Valle del Mezquital.

2.10 Estudio de factibilidad

2.10.1 Factibilidad tcnica
Tabla 1: Software

Software
Software Licencia Descripcin
Dreamweaver
Dreamweaver es la
Prueba herramienta de diseo de
pginas web ms avanzada.
Notepad
Este programa sirve
Software libre tanto para escribir textos
como para editar archivos
que contienen cdigo fuente
en diversos lenguajes de
programacin.
Boostrap
Es un framework o conjunto
de herramientas de cdigo
Software libre abierto para diseo de sitios y
aplicaciones web.

Php Lenguaje de programacin de

uso general de cdigo del
Software libre lado del servidor
originalmente diseado para
el desarrollo eb de contenido
dinmico.
Xampp
Software libre Es un servidor independiente
de plataforma, software libre,
que consiste principalmente

18
 en el sistema de gestin de
bases de datos MySQL.

Fuente: Propia

Tabla 2: Hardware

Hardware
Cantidad Hardware Descripcin
Samsung
1
Memoria RAM 6GB
Computadora
SO Windows 10
Disco Duro 1TB
1
Servidor Aloja tanto la informacin, as
como los ejecutables.

Fuente: Propia

2.10.2 Factibilidad econmica

En este proyecto no fue necesario un estudio de factibilidad econmica ya que

la Universidad Tecnolgica del Valle del Mezquital cuenta con los recursos
necesarios para la realizacin del proyecto.

2.10.3 Factibilidad operacional

El sistema es bastante intuitivo, por tal motivo solo se necesitan conocimientos
bsicos en el uso de la computadora y cualquier administrativo con acceso al
mdulo podr manipularlo sin problema alguno.

19
Captulo III
PLANIFICACIN

3.1 Eleccin del modelo de desarrollo de software

Para el desarrollo del mdulo de trayectorias educativas se eligi el modelo de
desarrollo de software por prototipos.
20
3.2 Justificacin del modelo de desarrollo de software

El modelo de desarrollo de software basado en prototipos proporciona la

posibilidad de reutilizar cdigo adems de que requiere de pocos recursos.

Este modelo de prototipos permite que todo el sistema, o algunas de sus

partes, se construyan rpidamente para comprender con facilidad y aclarar
ciertos aspectos en los que se aseguren que el desarrollador, el usuario y el
cliente estn de acuerdo en lo que se necesita, gracias a estos se refinan los
requisitos del software que se desarrollara.

Tabla 3: Ventajas del modelo basado en prototipos

Ventajas

Se puede reutilizar cdigo

Reduce el tiempo de desarrollo

No modifica el flujo del ciclo de vida

Mejoras en la administracin de proyectos

Reduce costo y aumenta la probabilidad de xito

Reduce el riesgo de construir productos que no satisfagan las

necesidades de los usuarios

El modelo es til cuando el cliente conoce los objetivos generales

del software, pero no identifica los requisitos detallados de entrada,
procesamiento o salida.
Fuente:https://santmp.files.wordpress.com/2013/03/modelo-de-prototipo.pdf

3.3 Participantes
Tabla 4: Integrante del proyecto

21
Integrante 1

Titulo Ingeniero en tecnologas de la

informacin

Nombre Blas ngel ngeles Maciel

Rol Lder y programador

E-mail [email protected]

Telfono 7721249608

Fuente: propia

Tabla 5: Integrante del proyecto

Integrante 2

Titulo TSU en tecnologas de la informacin

Nombre Jonathan Ruperto Corona Martinez

Rol Diseador y programador

E-mail [email protected]

Telfono 7721155095

Fuente: propia

22
3.4 Cronograma de actividades
Ilustracin 4: cronograma de actividades

Fuente: Propia

23
 Captulo IV
MARCO TERICO O
REFERENCIAL

4.1 Estudio del arte

24
Debido a que el modulo desarrollado en este proyecto fue diseado de acuerdo
a las necesidades de la Universidad Tecnolgica del Valle del Mezquital se
supone que no exista ningn sistema similar en el mercado y en caso de
haberlo en alguna otra universidad son sistemas internos por lo que su anlisis
se limita al acceso que se pueda tener a dicho sistema, por lo tanto, no es
posible saber a ciencia cierta que exista algn sistema similar o parecido.

4.2 Trayectorias Educativas

4.2.1 Qu son las trayectorias educativas?

La nocin de trayectoria educativa se refiere al desempeo de los alumnos a lo

largo de su escolaridad, ao a ao, observando su punto de partida y los
procesos y resultados del aprendizaje.

Este concepto subraya la importancia de conocer la historia de cada alumno en

la escuela, teniendo en cuenta su pasado y su futuro. Hacia atrs, la vista est
puesta en los docentes, sus estrategias de enseanza y sus resultados. Hacia
adelante, la apuesta consiste en profundizar el aprendizaje.

Mirar la trayectoria invita a redescubrir a la persona en el alumno, al alumno en

su aula con un docente y tiempo determinado, al aula en la escuela conducida
por un equipo directivo que a su vez es acompaado por un supervisor. El
concepto de trayectoria invita a pensar, y sobre todo a actuar, para promover la
inclusin educativa y garantizar el ejercicio real y efectivo del derecho a la
educacin.

La trayectoria escolar no refiere solo a recorridos personales de los alumnos,

sino que interpela y moviliza a las escuelas a buscar estrategias de trabajo
para garantizar la permanencia, la calidad educativa y el egreso de cada
alumno.

25
4.3 Twitter Bootstrap

4.3.1 Qu es Bootstrap?

Twitter Bootstrap es un framework o conjunto de herramientas de Cdigo

abierto para diseo de sitios y aplicaciones web. Contiene plantillas de diseo
con tipografa, formularios, botones, cuadros, mens de navegacin y otros
elementos de diseo basado en HTML y CSS, as como, extensiones
de JavaScript opcionales adicionales.

4.4 Php

4.4.1Qu es Php?

PHP es un lenguaje de programacin de uso general de cdigo del lado del

servidor originalmente diseado para el desarrollo web de contenido dinmico.
Fue uno de los primeros lenguajes de programacin del lado del servidor que
se podan incorporar directamente en el documento HTML en lugar de llamar a
un archivo externo que procese los datos. El cdigo es interpretado por un
servidor web con un mdulo de procesador de PHP que genera la pgina web
resultante. PHP ha evolucionado por lo que ahora incluye tambin una interfaz
de lnea de comandos que puede ser usada en aplicaciones
grficas independientes. Puede ser usado en la mayora de los servidores web
al igual que en casi todos los sistemas operativos y plataformas sin ningn
costo.

PHP se considera uno de los lenguajes ms flexibles, potentes y de alto

rendimiento conocidos hasta el da de hoy, lo que ha atrado el inters de
mltiples sitios con gran demanda de trfico, como Facebook, para optar por el
mismo como tecnologa de servidor.

26
4.5. Xampp

4.5.1Qu es Xampp?

XAMPP es un servidor 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. El
nombre proviene del acrnimo de X (para cualquiera de los diferentes sistemas
operativos), Apache, MySQL, PHP, Perl. Desde la versin "5.6.15", XAMPP
cambi la base de datos de MySQL A MariaDB. El cual es un fork de MySQL
con licencia GPL.

El programa se distribuye bajo la licencia GNU y acta como un servidor web

libre, fcil de usar y capaz de interpretar pginas dinmicas. Actualmente
XAMPP est disponible para Microsoft Windows, GNU/Linux, Solaris y Mac OS.

4.6 Notepad++

4.6.1 Qu es Notepad++?

Notepad++ es un editor de texto y de cdigo fuente libre con soporte para

varios lenguajes de programacin. De soporte nativo a Microsoft Windows.

Se parece al Bloc de notas en cuanto al hecho de que puede editar texto sin
formato y de forma simple. No obstante, incluye opciones ms avanzadas que
pueden ser tiles para usuarios avanzados como desarrolladores y
programadores.

4.7 Dreamweaver

4.7.1 Que es Dreamweaver?

Adobe Dreamweaver es una aplicacin en programa de estudio (basada en la

forma de estudio de Adobe Flash) que est destinada a la construccin, diseo
y edicin de sitios, vdeos y aplicaciones Web basados en estndares.

27
Captulo IV
DESARROLLO DEL
PROYECTO

28
5.1 Diseo
5.1.1 Mapa de sitio

Login

Inicio

Informacion Historial
Datos Datos Historial
complementar Psicopedagogi
Personales Generales Academico
ia co

TSU

ING

29
5.1.2 Guas de estilo

Modulo Trayectorias Educativas

Tipografa

Tabla 6: tipografa

Tipografa Uso Caractersticas Representacin

Arial Contenido de men 14px
y opciones.
Helvetica Ttulo de formularios 14px

Sans-serif Ttulos/Encabezados 14px

Fuente: http://www.fontreactor.com

Combinacin de colores

Tabla 7: Colores principales

Color Cdigo de RGB Uso Representacin

color
Blanco #FFFFFF 255,255,255 Fondo
Azul #E0E0E0 224,224,22 Fondo
4
Verde #CDEB8B 205,235,139 Cuadro de
texto
Rojo #74282C 116,40,44 Formularios
Fuente: http://www.color-hex.com

Tabla 8: Colores secundarios

Color Cdigo de RGB Uso en la Representacin

color aplicacin
Caf #00A65A 0,166,90 Texto.
Negro #292929 41,41,41 Texto
Fuente: http://www.color-hex.com

Manejo de colores. Hexadecimal

En dispositivos electrnicos todos los colores se forman mediante la mezcla

aditiva de los colores primarios rojo, verde y azul. Pues bien, el sistema
30
hexadecimal se basa en este principio de un modo bastante fiel, ya que lo que
estos cdigos hacen no es otra cosa que especificar qu cantidad o intensidad
de cada color primario hay que aadir a la mezcla.

En primer lugar, la almohadilla (#) indica al explorador o al editor de imgenes

el sistema que estamos usando, en este caso el hexadecimal.

A la almohadilla seguirn siempre seis caracteres que pueden ser nmeros o

letras, y que representan, en pares, la intensidad presente de cada uno de los
tres colores de la mezcla aditiva

5.2 Desarrollo del sistema web

Mdulo de trayectorias educativas

Para el desarrollo del mdulo se utilizaron los lenguajes de programacin ms

conocidos PHP, HTML y SQL dichos lenguajes proporcionan las bases
necesarias para la elaboracin del proyecto.

Fue necesaria la utilizacin de un framework con el fin de realizar un diseo

ms dinmico y responsivo para as tener una mejor visualizacin.

Inicio de sesin

La siguiente imagen muestra el cdigo de la estructura de la pantalla de inicio

de sesin.

31
 Ilustracin 5: Cdigo de inicio de cesin

Fuente: propia

Ilustracin 6: Pantalla de inicio de sesin

Fuente: Intranet de la UTVM

Busqueda

32
Sedesarrollo una interfaz de busqueda avanzada que permiqte buscar a un
alumno ya sea por nombre apellidos o numero de matricula.

El siguiente codigo muestra la estructura de la pantalla de busqueda que

valida el acceso a los datos.

Ilustracin 7: Cdigo de bsqueda de datos

Fuente: Propia

Ilustracin 8:Pantalla de bsqueda

Fuente: propia

33
Pantalla de inicio

En la pantalla principal se mustran los datos del alumno.

El siguiente codigo muestra la estructura de la pantalla principal .

Ilustracin 9: Cdigo de la pantalla de inicio

Fuente: propia

Ilustracin 10: Pantalla de inicio

Fuente: propia

34
5.3 Pruebas

Prueba de integracin.

Prueba basada en subprocesos: Cada subproceso se integra y

prueba individualmente.

Pruebas de validacin: Funcionamiento del mdulo segn las necesidades del

cliente.

Pruebas del sistema.

Pruebas de recuperacin y tolerancia a fallas.

Pruebas de seguridad y control de acceso.

Pruebas de caja blanca.

Pruebas de software que se realizan sobre las funciones internas de un

mdulo.

Prueba de arquitectura cliente servidor.

Pruebas de base de datos.

Pruebas de inicio de sesin.

Pruebas de funcionalidad de interfaz.

Tabla 9: plan de prueba

Prueb Modulo Nombre de la Tester C.P.

a prueba
No.
1 Login Pruebas de Jonathan Ruperto CP001
seguridad y control Corona Martinez
de acceso
2 Botones Prueba de Jonathan Ruperto CP002
condicin Corona Martinez
3 Men Prueba de caja Jonathan Ruperto CP003
negra Corona Martinez
4 Bsqueda Prueba de caja Jonathan Ruperto CP004

35
 de datos negra Corona Martinez
5 Barra de Prueba de caja Jonathan Ruperto CP005
navegacin negra Corona Martinez
Cerrar Prueba de caja Jonathan Ruperto CP005
sesin blanca Corona Martinez
Pruebas del
sistema
6 Aplicacin Pruebas de Jonathan Ruperto CP006
validacin Corona Martinez

Fuente: propia

Bitcora de prueba

Tabla 10: Prueba 1

1. Introduccin
Identificador CP001
Creador del CP Jonathan Ruperto Corona Martinez
Versin V1
Nombre Funcionalidad del botn.
Identificador de Funcionalidad de botones de forma dinmica y de acuerdo a
requerimientos los requerimientos o necesidades.
Propsito/ Descubrir fallas al momento de presionar los botones del
objetivo modulo
2. Actividades de los CP

36
 Ambiente de Base de datos.
pruebas / Modulo.
configuracin

Acciones Realizar cualquier actividad y que el botn responda de

acuerdo a la peticin que se aplica.

3.Resultados
Resultados Funcionalidad al cien por ciento de los botones al
esperados realizar alguna actividad.
Resultados Se obtuvo una funcionalidad del cien por ciento.
obtenidos
Estatus Correcto.

Fuente: propia

Tabla 11: Prueba 2

1. Introduccin
Identificador CP002
Creador del CP Jonathan Ruperto Corona Martinez
Versin V1
Nombre Inicio de sesin.
Identificador de Conexin exitosa a la base de datos, verificar el usuario para
requerimientos acceder de manera correcta al mdulo.
Propsito/ Descubrir fallas al momento de iniciar sesin.
objetivo
2. Actividades de los CP

37
 Ambiente de Base de datos.
pruebas / Host.
configuracin Usuario.

Acciones Acceso de manera exitosa en la aplicacin.

3.Resultados
Resultados Funcionalidad al cien por ciento de inicio de sesin.
esperados
Resultados Se obtuvo un resultado de funcionalidad al cien por ciento.
obtenidos
Estatus Correcto.
Fuente: propia

1. Introduccin
Identificador CP003
Creador del CP Jonathan Ruperto Corona Martinez
Versin V1
Nombre Funcionalidad del men.
Identificador de Ejecucin de cada opcin del men de manera correcta de
requerimientos acuerdo a la que se all elegido.
Propsito/ Descubrir fallas al momento de accionar los botones del men
objetivo y permita subir el aviso dependiendo la opcin.
2. Actividades de los CP
Ambiente de Base de datos.
pruebas / Host.
configuracin Modulo.

Acciones Al presionar o elegir algn botn del men, que

responda de acuerdo a la peticin que se aplica.

3.Resultados
Resultados Funcionalidad al cien por ciento de los botones al
esperados realizar alguna actividad.

38
 Resultados Se obtuvo un resultado del ochenta por ciento.
obtenidos
Estatus Correcto.

Tabla 12: Prueba 3

Fuente: propia

1. Introduccin
Identificador CP004
Creador del CP Jonathan Ruperto Corona Martinez
Versin V1
Nombre Bsqueda de datos.
Identificador de Funcionalidad a la hora de realizar bsqueda de datos.
requerimientos
Propsito/ Mostar los datos correspondientes a la bsqueda.
objetivo
2. Actividades de los CP
Ambiente de Base de datos.
pruebas / Host.
configuracin Modulo

Acciones Mostrar un listado de la informacin de manera

correcta.

3.Resultados
Resultados Visualizacin de la informacin buscada.
esperados
Resultados Se obtuvo un resultado de funcionalidad del noventa por
obtenidos ciento.
Estatus Correcto.

39
 Tabla 13: Prueba 4

Fuente: propia

1. Introduccin
Identificador CP006
Creador del CP Jonathan Ruperto Corona Martinez
Versin V1
Nombre Prueba de validacin
Identificador de Validacin de bsqueda de datos
requerimientos
Propsito/ Descubrir fallas al elegir alguna opcin o que no realice al
objetivo cien por ciento su accin correspondiente.
2. Actividades de los CP
Ambiente de Modulo.
pruebas /
configuracin

Acciones .
Si elige una opcin que funcione correctamente al
accionarlo.

3.Resultados
Resultados Las funcionalidades de las opciones se manejen al cien
esperados por ciento.
Resultados Se obtuvo un resultado de funcionalidad del noventa por
obtenidos ciento.
Estatus Correcto.

40
 Tabla 14: Prueba 5

Fuente: propia

Conclusiones

El proyecto realizado durante el periodo de estada en la UTVM ha

contribuido de manera muy importante para la consulta de datos de los
alumnos de esta casa de estudios de manera rpida y eficaz, ya que se a
seccionado la informacin para una mejor visibilidad de la misma.

Tambin se mejor el diseo del mdulo para que fuera responsivo y se

ajustara a diferentes tamaos de pantalla siendo posible mantener una visin
clara del contenido del mdulo.

Puedo decir que al haber participado en la elaboracin de este proyecto

me ayud a desarrollar mis habilidades y a adquirir nuevos conocimientos,

41
 Bibliografa

Typography
http://www.fontreactor.com

Color
http://www.color-hex.com

Bootstrap
http://getbootstrap.com/

J. Spurlock. Bootstrap. O'Reilly (2013)

Php
http://www.w3schools.com/php/

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

D. Cochran. Twitter Bootstrap Web Development How-To. Packt

Publishing (2012)

Modelo de desarrollo
https://santmp.files.wordpress.com/2013/03/modelo-de-prototipo.pdf

42
UTVM
http://www.utvm.edu.mx

LibrosWeb: Bootstrap 3, el manual oficial

http://librosweb.es/bootstrap_3/

Glosario

CGUTYP: Coordinacin general de universidades tecnolgicas y

politcnicas en cargada de impulsar una educacin de calidad.

DELF-DALF: Diploma de estudios de lengua francesa- Diploma

avanzado de lengua francesa.

ISO: Organizacin Internacional de normalizacin.

NOTEPAD: es un editor de texto de cdigo fuente libre con soporte para

varios lenguajes de programacin.

PHP: es un lenguaje de programacin de uso general de cdigo del lado

del servidor originalmente diseado para el desarrollo web.

SIIN: sistema integral de informacin.

43
 TOEFL-ITP: test of English as a foreign language-institutional testing
program.

TWITTER BOOTSTRAP: es un framework o conjunto de herramientas

de cdigo abierto para diseo de sitios y aplicaciones web.

UTVM: Universidad Tecnolgica del Valle del Mezquital.

XAMPP: es un servidor 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.

44