UNIVERSIDAD TECNOLÓGICA DEL VALLE

DEL MEZQUITAL
(TIPO DE LETRA: ARIAL 16, NEGRILLAS Y MAYÚSCULAS)

NOTA: CENTRADO EN LA HOJA

LIBRO DIGITAL CAPACITACIÓN IBM

STUDENTS ADVOCATES

MEMORIA DE ESTADÍA
Que para obtener el título de

TÉCNICO SUPERIOS UNIVERSITARIO EN

TECNOLOGÍAS DE LA INFORMACIÓN, ÁREA
DESARROLLO DE SOFTWARE MULTIPLATAFORMA

P R E S E N T A

CRISTIAN YAVIN CORTES LUGO

Generación: Septiembre 2018 – Agosto 2020

Ixmiquilpan, Hidalgo, 31 de agosto 2020

D-SA-06
El presente trabajo fue elaborado por Cristian Yavin Cortes Lugo, como
requisito para obtener el título de Técnico Superior Universitario en:
Tecnologías de la Información, área desarrollo de software multiplataforma.

Bajo la dirección y aprobación de:

Mtra. Gloria Martínez Martín Mtro. Cuitláhuac Alamilla Cintora

Director de Programa Educativo Asesor Académico

D-SA-07
Agradecimientos

Muchas veces creemos que recorremos el camino de nuestra vida

solos, sin embargo, siempre es importante detenerse un momento y
agradecer a todos aquellos que han compartido con nosotros el camino,
aunque sea por un momento, sin embargo, es la suma de esas experiencia
y aprendizajes que te dejan las personas con las que compartes las que te
hacen estar en el lugar que estas en este momento.

El presente trabajo, es dedicado principalmente a mis padres, ya que

gracias a ellos y a cada uno de los esfuerzos que hacen para poder apoyarme
en mis estudios, no estaría donde estoy ahora.

A mis hermanas por estar presente cuando más las necesite, y apoyar
aun cuando no se los pedía.

A compañeros de escuelas ya que gracias a ellos tuve la oportunidad

de aprender muchas cosas que solo te enseña la vida.

A profesores de la Universidad Tecnológica del Valle del Mezquital por

haberme transmitido sus conocimientos a lo largo de mi formación.

El camino no es sencillo, pero las experiencias son invaluables,

gracias por haber compartido este camino conmigo hasta ahora.

I
Resumen

En la actualidad el ser una persona autodidacta es una gran cualidad que toman en
cuenta muchas empresas a la hora de elegir a quien contratar, además que
demuestra un entusiasmo y motivación de la persona por mejorar y querer siempre
ser una persona mejor preparada.

Algo muy cierto es que para ello se necesitan herramientas de las cuales los
usuarios puedan hacer uso, y nutrir sus conocimientos y aprender. Herramientas
que sean de fácil acceso, dinámicas y eficientes al trabajar con ellas.

El objetivo de realizar este proyecto de TI en el proceso de estadía, es buscar,

desarrollar e implementar soluciones informáticas, con el fin de resolver este tipo de
aspectos, basándonos en nuestras propias necesidades para lograr un como
resultado un sistema eficiente que las cubra.

Es por esto que en el presente documento redacta la búsqueda, planteamiento,

desarrollo y solución, durante el periodo de estadía el cual comprende de un tiempo
de catorce semanas, con el fin de aportan ideas de solución innovadoras y entregar
un resultado eficiente y mejorado mediante el uso de las TI.

II
Abstract

At present, being a self-taught person is a great quality that many companies take
into account when choosing who to hire, in addition, it shows an enthusiasm and
motivation of the person to improve and always want to be a better prepared person.

Something very true is that for this, tools are needed that users can make use of
nurture their knowledge and learn. Tools that are easily accessible, dynamic and
efficient when working with them.

The objective of carrying out this IT project in the process of stay, is to seek, develop
and implement IT solutions, in order to solve these types of aspects, based on our
own needs to achieve an efficient system that covers them as a result.

That is why in this document he describe the search, approach, development and
solution, during the period of stay which comprises a period of fourteen weeks, in
order to provide innovative solution ideas and deliver an efficient and improved result
through the use of IT.

III
INDICE

Agradecimientos ................................................................................................................... I
Resumen ............................................................................................................................... II
Abstract ................................................................................................................................ III
Índice de ilustraciones....................................................................................................... VII
Índice de tablas ................................................................................................................. VIII
Introducción ......................................................................................................................... IX
Capítulo 1 Generalidades de la institución ........................................................................... 1
1.1 Nombre ................................................................................................................... 2
1.2 Antecedentes ............................................................................................................. 2
1.3 Misión .......................................................................................................................... 2
1.4 Visión ........................................................................................................................... 3
1.5 Valores ........................................................................................................................ 3
1.6 Localización Geográfica ........................................................................................... 4
1.6.1 Macrolocalizacion ...................................................................................... 4
1.6.2 Microlocalizacion ........................................................................................ 5
1.7 Giro Comercial ........................................................................................................... 5
1.8 Clasificación ............................................................................................................... 6
1.9 Organigrama .............................................................................................................. 6
1.10 Funciones de las principales áreas ...................................................................... 7
Capitulo 2 Análisis y definición del proyecto ......................................................................... 9
2.1 Análisis de Datos Actual ......................................................................................... 10
2.2 Planteamiento del Problema.................................................................................. 10
2.3 Propuesta de Solución............................................................................................ 11
2.4 Justificación .............................................................................................................. 11
2.5 Objetivo General ...................................................................................................... 11
2.6 Objetivos Específicos.............................................................................................. 11
2.7 Alcance...................................................................................................................... 12
2.8 Limitaciones.............................................................................................................. 12
2.9 Impacto y Contribuciones del Proyecto ............................................................... 12

IV
Capitulo 3 Planificación ....................................................................................................... 13
3.1 Elección del modelo de desarrollo de software .................................................. 14
3.2 Justificación del modelo de desarrollo de software ........................................... 15
3.3 Participantes (Roles y Funciones) ........................................................................ 15
3.4 Cronograma de Actividades .................................................................................. 16
Capítulo 4 Marco teórico o Referencial................................................................................ 17
4.1 Sistemas Web .......................................................................................................... 18
4.1.1 Ventajas de Sistemas Web ................................................................................ 18
4.1.2 Desventajas de Sistemas Web .......................................................................... 19
4.2 HTML5 ....................................................................................................................... 19
4.2.1 Ventajas HTML5 ................................................................................................... 20
4.2.2 Desventajas HTML5 ............................................................................................ 20
4.3 CSS3 ......................................................................................................................... 21
4.3.1 Ventajas CSS3 ..................................................................................................... 21
4.3.2 Desventajas CSS3 ............................................................................................... 21
4.4 Bootstrap ................................................................................................................... 22
4.4.1 Ventajas de Bootstrap ......................................................................................... 22
4.4.2 Desventajas de Bootstrap ................................................................................... 23
4.5 Visual Studio Code .................................................................................................. 24
4.5.1 Características de Visual Studio Code ............................................................. 24
4.5.2 Ventajas de Visual Studio Code ........................................................................ 24
4.5.3 Desventajas de Visual Studio Code .................................................................. 25
Capítulo 5 Desarrollo del proyecto ...................................................................................... 26
5.1 Planificación del Sitio Web ..................................................................................... 27
5.1.1 Elección del Tipo de Sitio.................................................................................... 27
5.1.2 Planteamiento de Objetivos................................................................................ 27
5.2 Diseño ....................................................................................................................... 28
5.2.1 Mapa del sitio ........................................................................................................ 28
5.2.2 Diseño de la Plantilla ........................................................................................... 28
5.3 Descripción del Sistema Web................................................................................ 29
5.3.1 Pantalla de Inicio .................................................................................................. 29

V
 5.3.2 Menú Lateral ......................................................................................................... 30
5.3.3 Pantalla por Tema ................................................................................................ 31
5.3.4 Pantalla por Practica............................................................................................ 32
5.3.5 Pantalla por Evaluación ...................................................................................... 32
5.4 Pruebas ..................................................................................................................... 33
5.4.1 Elección del Tipo de Pruebas ............................................................................ 33
5.4.2 Elaboración del plan de pruebas y ejecución de pruebas ............................. 33
5.4.3 Bitácora de pruebas ............................................................................................. 33
5.5 Mantenimiento al Sistema Web ............................................................................ 36
5.5.1 Ampliaciones y Actualizaciones ......................................................................... 36
Conclusiones y Recomendaciones ................................................................................. 37
Bibliografía .......................................................................................................................... 38
Glosario ............................................................................................................................... 39
Anexos ................................................................................................................................. 41

VI
Índice de ilustraciones

Ilustración 1 Logotipo de la institución (UTVM). ...................................................... 2

Ilustración 2 Localización geográfica de la institución. ............................................ 4

Ilustración 3 Macrolocalizacion Hidalgo. ................................................................. 5

Ilustración 4 Microlocalizacion de la institución. ...................................................... 5

Ilustración 5 Organigrama de la institución. ............................................................ 6

Ilustración 6 Ciclo de vida de SCRUM. ................................................................. 14

Ilustración 7 Ejemplo Sistema Web ....................................................................... 19

Ilustración 8 Logo HTML5 ..................................................................................... 20

Ilustración 9 Logo CSS3 ........................................................................................ 22

Ilustración 10 Logo Bootstrap ................................................................................ 23

Ilustración 11 Logo Visual Studio Code ................................................................. 25

Ilustración 12 Mapa de Sitio del Sistema .............................................................. 28

Ilustración 13 Pantalla Inicio .................................................................................. 29

Ilustración 14 Menú Lateral Sistema ..................................................................... 30

Ilustración 15 Pantalla por Tema ........................................................................... 31

Ilustración 16 Pantalla Practica ............................................................................. 32

Ilustración 17 Pantalla Evaluación ......................................................................... 32

VII
Índice de tablas

Tabla 1 Funciones de las principales áreas. ................................................................................ 7

Tabla 2 Cronograma de Actividades ........................................................................................... 16

Tabla 3 Bitácora de Pruebas ........................................................................................................ 34

VIII
Introducción

Se desarrollo un libro virtual, el cual servirá como herramienta para la comunidad

universitaria tenga acceso a los conocimientos expuestos dentro del contenido del
libro. Esto gracias a la oportunidad que brindo la empresa IBM de formar parte de
su programa de capacitación IBM Students Advocates la cual tiene como objetivo
formar profesionales digitales en temas de gran relevancia en la actualidad en el
ámbito de desarrollo tecnológico, el cual se está apoderando cada vez más de la
industria y sus procesos.

Las capacitaciones son la forma más eficiente para el nunca parar de aprender y
estar siempre a la vanguardia, aumentando tus posibilidades de trabajar en grandes
empresas de la tecnología o mejor aún tener la posibilidad de formar tu propia
empresa o startup siendo un logro importante para la sociedad actual.

En el capítulo 1 del presente documento se muestra toda la información referente

de la institución para la cual se desarrolló el sistema.

En el capítulo 2 se presenta la información referente al análisis y definición del

proyecto, donde se define la situación actual, los límites, los objetivos y el alcance
del proyecto.

Por su parte, el capítulo 3 expone la planificación del proyecto, donde se establecen

roles, metodologías y el cronograma de actividades.

Dentro del capítulo 4 se expone toda la parte teórica del proyecto y las referencias
del mismo.

Por último, dentro del capítulo 5, se detalla el desarrollo del proyecto, la elaboración
del plan de pruebas y su realización.

IX
Capítulo 1 Generalida des de la instituci ón

1
1.1 Nombre

UNIVERSIDAD TECNOLOGICA DEL VALLE DEL MEZQUITAL (UTVM).

Ilustración 1 Logotipo de la institución (UTVM).

Fuente: http://www.utvm.edu.mx/

1.2 Antecedentes

La Universidad Tecnológica del Valle del Mezquital (UTVM), se crea el 9 de

Septiembre de 1996 con la finalidad de dar respuesta a las necesidades de la
población en la región; la idea de proporcionar un modelo educativo diferente al que
se aplica en las Universidades Tecnológicas tradicionales y ofrecer a los alumnos
un modelo educativo que enriqueciera al original, el cual fue diseñado para
Universidades que se ubican en zonas donde existen polos de desarrollo
industriales con un gran número de empresas productivas, mismas que facilitan la
contratación y colocación de sus alumnos.

1.3 Misión

 Somos una institución pública de nivel superior que ofrece servicios

educativos y tecnológicos, que promueven el desarrollo sustentable,
comprometidos con la formación de seres humanos con sentido de identidad
y valores, a través del desarrollo de competencias basado en la investigación
y la vinculación.

2
1.4 Visión

 Ser una institución educativa de nivel superior reconocida por sus

contribuciones al desarrollo sustentable, a través de la educación,
investigación y vinculación pertinente e internacional.

1.5 Valores

 Honestidad: Me conduzco con la verdad y autenticidad, desde el respeto, la

honradez y la transparencia.
 Respeto: Reconozco la dignidad, el derecho y la libertad de los que me
rodean, siendo tolerante, justo y veraz.
 Responsabilidad: Cumplo las obligaciones que me corresponden en todos
los órdenes, entre estos, el universitario, social y ambiental, al reconocer y
asumir las consecuencias de las acciones realizadas libremente.
 Lealtad: Actuó desde la fidelidad y el compromiso frente a mi mismo y los
demás.
 Humildad: Reconozco mi justo valor y el de los demás. Identifico mis
fortalezas y debilidades. Me esfuerzo en mi superación personal, actuando
sin orgullo y sin afán de dominio.
 Solidaridad: Empatizo con las necesidades de los demás y participo de
manera consiente y entusiasta en proyectos colectivos.
 Justicia: Respeto los derechos humanos, el ejercicio de las libertades
individuales y la igualdad de oportunidades, buscando equidad e
imparcialidad.
 Libertad: Pienso y me conduzco de manera autónoma por convicción, al
tomar decisiones responsables, reflexivas y de respeto a la diversidad, al
considerar el bienestar propio y el de los demás.

3
1.6 Localización Geográfica

La Universidad Tecnológica del Valle del Mezquital, se encuentra ubicada en

Carretera Ixmiquilpan-Capula, Nith, 42300 Ixmiquilpan, Hidalgo.

Ilustración 2 Localización geográfica de la institución.

Fuente: https://www.google.com/maps

1.6.1 Macrolocalizacion

El estado de Hidalgo está situado en la región central de México, colindando al norte

con los estados de Querétaro, San Luis Potosí y Veracruz; al sur con los estados
de México y Tlaxcala; al este con el estado de Puebla y al oeste con el estado de
Querétaro.

4
 Ilustración 3 Macrolocalizacion Hidalgo.

Fuente: https://sites.google.com/site

1.6.2 Microlocalizacion

Carretera Ixmiquilpan-Capula, Nith, 42300 Ixmiquilpan, Hidalgo.

Ilustración 4 Microlocalizacion de la institución.

Fuente: https://google.com/maps

1.7 Giro Comercial

Giro de servicios.

5
1.8 Clasificación

La Universidad Tecnológica del Valle del Mezquital se encuentra ubicada en la

clasificación de institución de servicios de educación.

1.9 Organigrama

La Universidad Tecnológica del Valle del Mezquital, se encuentra estructurada bajo

el siguiente orden estructural.
Ilustración 5 Organigrama de la institución.

Fuente: http://www.utvm.edu.mx/

6
1.10 Funciones de las principales áreas

Tabla 1 Funciones de las principales áreas.

Área Funciones
Rectoría  Representar oficialmente a la
Universidad.
 predecir los actos académicos
de la Universidad a los que
concurra.
 Dirigir la política académica de la
Universidad.
 Dirigir la acción de equipo
rectoral y coordinar sus
funciones y actividades…
Secretaria Académica  Participar en la elaboración de
proyectos de reglamentos del
área.
 Supervisar la difusión de los
actos académicos de la
Facultad.
 Supervisar la gestión del área de
alumnos…
Dirección de Programa Educativo Supervisar el cumplimiento de los
objetivos curriculares que establece el
modelo educativo de la Universidad
Tecnológica, mediante un control
eficiente de las actividades académicas
y administrativas del Programa
Educativo.

7
Departamentos de Servicio Los departamentos de servicios tienen
como principal función, la atención
personalizada a la comunidad
Universitaria.

Fuente: Elaboración propia.

8
Capitulo 2 Análisis y defini ción del proyecto

9
2.1 Análisis de Datos Actual

International Business Machines (IBM), es una empresa dedicada a proporcionar a

otras empresas soluciones para la mejora de sus procesos de negocio. Así, IBM
facilita a sus clientes los métodos para hacer frente a los problemas empresariales
mediante una adecuada utilización de las tecnologías de la información.

Sus actividades incluyen la investigación, desarrollo, fabricación y comercialización

de tecnologías, productos de hardware y software, así como servicios de TI,
outsourcing, integración de sistemas, financiamiento y servicios de consultoría de
negocio. La oferta de hardware, software, servicios y financiamiento de IBM es la
más completa del mercado, lo que permite a la Compañía ofrecer soluciones
tecnológicas a cualquier tipo de cliente, desde usuarios particulares hasta
instituciones y grandes empresas de cualquier sector de actividad.

IBM opera en 170 países y cuenta con más de 386.000 empleados.

2.2 Planteamiento del Problema

IBM Students Advocates es una comunidad multidisciplinaria creada por

especialistas de IBM para capacitar a universitarios entusiastas de la tecnología en
el desarrollando nuevos skills y así compartir su conocimiento al convertirse en un
profesional digital.

La finalidad de este programa es el desarrollar a profesionales digitales, que puedan

desempeñarse en el mercado laboral actual, al término de sus estudios,
compartiendo sus conocimientos a sus compañeros, participando como mentor en
cursos, conferencias o mentorías que pueda impartir con su comunidad
universitaria.

10
2.3 Propuesta de Solución

La creación de un libro digital con la finalidad de plasmar en él, todos los temas y
conocimientos adquiridos durante la capacitación, además de poder documentar la
experiencia del estudiante al ser partícipe de un programa educativo de IBM,
brindando así una herramienta para conocimiento y aprovechamiento de toda la
comunidad universitaria.

2.4 Justificación

Dentro del mercado laboral de TI, las capacitaciones y el no parar de aprender,

toman un papel primordial, ya que con los avances tecnológicos que se generan a
diario, es necesario que los profesionales en la industria actualicen sus
conocimientos constantemente. El éxito o fracaso de una empresa depende en gran
medida del talento del equipo. Por tal motivo se llegó a la decisión de la creación,
de un libro digital en el cual se plasmen todos los conocimientos adquiridos por le
alumno, durante su participación en la capacitación de IBM Students Advocates,
impartida por profesionales de IBM, y brindar así una herramienta para que toda la
comunidad universitaria pueda tener acceso a esos conocimientos.

2.5 Objetivo General

Diseñar un libro digital dinámico, en donde los alumnos puedan tener acceso a
información recolecta de especialistas de IBM, acerca de temas de gran relevancia
en el mundo laboral tecnológico de la actualidad, desde la comodidad de sus
dispositivos de computo.

2.6 Objetivos Específicos

 Analizar las herramientas para el desarrollo del libro digital.

 Seleccionar la información brindada por los especialistas de IBM.

11
  Análisis la información por parte de un docente especialista en la carrera de
Tecnologías de la Información de la Universidad Tecnológica del Valle del
Mezquital.

2.7 Alcance

El libro digital será creado como herramienta de aprendizaje, de conocimiento unió

para la comunidad universitaria de la Universidad Tecnológica del Valle del
Mezquital, contando con temas de gran importancia en el ámbito del desarrollo
tecnológico, prácticas que reforzaran los conocimientos adquiridos y evaluaciones
para comprobar lo aprendido.

2.8 Limitaciones

La capacitación en la cual está basada la creación del libro digital, fue tomada
únicamente por un alumno.

2.9 Impacto y Contribuciones del Proyecto

Social
La creación de este libro está basado en la mejor de los conocimientos de los
alumnos, para generar mejores oportunidades al incorporarse al mercado laboral
como profesionales digitales.

Tecnológico

La digitalización de contenidos de estudio como una forma de fomentar el

aprendizaje en los alumnos, de una forma cómoda y accesible desde sus
dispositivos.

12
Capitulo |||

Capitulo 3 Planifi cació n

13
3.1 Elección del modelo de desarrollo de software

El ciclo de vida de un software es la estructura aplicada al desarrollo de un producto

de software. Constituidos por varias fases, las cuales tienen la finalidad de
garantizar que el software en desarrollo cumpla con todos los requisitos para
considerarse como un producto de software de calidad.

Scrum es un proceso en el que se aplican de manera regular un conjunto de buenas

prácticas para trabajar colaborativamente, en equipo, y obtener el mejor resultado
posible de un proyecto. Estas prácticas se apoyan unas a otras y su selección tiene
origen en un estudio de la manera de trabajar de equipos altamente productivos.

Ilustración 6 Ciclo de vida de SCRUM.

Fuente: https://slideplayer.es/slide/5656108/

14
3.2 Justificación del modelo de desarrollo de software

En Scrum se realizan entregas parciales y regulares del producto final, priorizadas

por el beneficio que aportan al receptor del proyecto. Por ello, Scrum está
especialmente indicado para proyectos en entornos complejos, donde se
necesita obtener resultados pronto, donde los requisitos son cambiantes o poco
definidos, donde la innovación, la competitividad, la flexibilidad y
la productividad son fundamentales.

Beneficios de SCRUM

 Entrega mensual (o quincenal) de resultados (los requisitos más prioritarios

en ese momento, ya completados) lo cual proporciona las siguientes
ventajas:
 Gestión regular de las expectativas del cliente y basada en resultados
tangibles.
 Resultados anticipados (time to market).
 Flexibilidad y adaptación respecto a las necesidades del cliente, cambios
en el mercado, etc.
 Gestión sistemática del Retorno de Inversión (ROI).
 Mitigación sistemática de los riesgos del proyecto.
 Productividad y calidad.
 Alineamiento entre el cliente y el equipo de desarrollo.
 Equipo motivado.

3.3 Participantes (Roles y Funciones)

 Cristian Yavin Cortes Lugo

Rol: Desarrollador

15
3.4 Cronograma de Actividades

Tabla 2 Cronograma de Actividades

ACTIVIDAD REALIZA DURACION COMIENZO FINAL

Inicio
Planteamiento del Cristian Yavin Cortes 1 día Lun 18/05/20 Lun 18/05/20
Lugo
problema.
Alcance del proyecto. Cristian Yavin Cortes 1 día Mar 19/05/20 Mar 19/05/20
Lugo
Determinación de Cristian Yavin Cortes 1 día Mie 20/05/20 Mie 20/05/20
Lugo
requisitos.
Planteamiento de Cristian Yavin Cortes 1 día Jue 21/05/20 Jue 21/05/20
Lugo
propuesta de solución.
Planificación
Recolección y análisis de Cristian Yavin Cortes 1 semana Vie 22/05/20 Vie 29/05/20
Lugo
información.
Determinación de Cristian Yavin Cortes 2 días Lun 01/06/20 Mar 02/06/20
Lugo
herramientas a utilizar.
Diseño y estructuración Cristian Yavin Cortes 1 semana Mie 03/06/20 Mie 10/06/20
Lugo
del sistema.
Presentación de Cristian Yavin Cortes 2 días Jue 11/06/20 Vie 12/06/20
Lugo
propuesta del diseño de
vista del proyecto.
Ejecución
Inicio de desarrollo del Cristian Yavin Cortes 6 semanas Lun 15/06/20 Lun 27/07/20
Lugo
libro digital.
Presentación de Cristian Yavin Cortes 1 día Mar 28/07/20 Mar 28/07/20
Lugo
propuesta #1.
Corrección de errores. Cristian Yavin Cortes 1 semana Mie 29/07/20 Mie 05/08/20
Lugo
Presentación de Cristian Yavin Cortes 1 día Jue 06/08/20 Jue 06/08/20
Lugo
propuesta #2.
Evaluación
Realización de pruebas. Cristian Yavin Cortes 1 semana Vie 07/08/20 Vie 14/08/20
Lugo
Evaluación final. ING. Cuitláhuac 1 semana Lun 17/08/20 Lun 24/08/20
Alamilla Cintora
Tiempo total 14 semanas

Fuente: Elaboración propia.

16
Capítulo 4 Marco teórico o Refere ncial

17
4.1 Sistemas Web

Los sistemas web o también conocidos como aplicaciones web, es una herramienta
informática accesible desde cualquier navegador, bien sea a través de internet o
bien a través de una red local (Intranet), a través del navegador se puede acceder
a toda la funcionalidad y tener cualquiera de las soluciones con las que disponga el
sistema.

El código de la aplicación, es decir, la aplicación en sí, que se almacena en un

servidor de aplicaciones (normalmente en la nube, pero puede estar alojado también
en un servidor local). (Neosoft, 2018)

4.1.1 Ventajas de Sistemas Web

 La primera gran ventaja es que no necesita ningún tipo de instalación, ya que

se accede a través de un navegador.
 Una aplicación web es multiplataforma y multidispositivo. Esto significa que
nos podemos olvidar de que software tiene cada dispositivo que accede, y
que puede acceder igualmente un ordenador, una Tablet, un smartphone.
 Otra gran ventaja es que la potencia no está en el dispositivo que accede,
por lo que, aunque no tengamos un superordenador la aplicación puede ser
muy potente, ya que el peso no lo soporta el equipo desde el que se accede
sino el servidor donde está alojada.
 La aplicación puede estar en la nube, con lo que sería accesible para
cualquier ordenador con acceso a internet (aunque también podría ser una
aplicación local en una intranet)
 Y para finalizar, es muy adaptable, visualmente intuitiva y muy fácil de
actualizar si fuera necesario. (Neosoft, 2018)

18
4.1.2 Desventajas de Sistemas Web

 El sistema web no estará publicado en las diferentes tiendas oficiales de

aplicaciones.
 Usualmente el usuario necesitara una mayor conectividad a una red de
internet.
 El rendimiento del sistema depende en gran medida de la calidad de la red y
del poder de procesamiento del servidor.
 Se tendrá una restricción en el acceso a ciertas características de hardware
de tu dispositivo. (Neosoft, 2018)

Ilustración 7 Ejemplo Sistema Web

Fuente: https://websystemperu.com/sistemas-web

4.2 HTML5

Es un lenguaje de marcado utilizado para definir la estructura y contenido de una

página o documento web. La idea es utilizar un lenguaje para hacer referencia a
otros documentos, como archivos, imágenes, video, audio, etc. (sodomaygorroma,
2013)

19
4.2.1 Ventajas HTML5

 Es nativo y por lo tanto, es independiente de plugins de terceros.

 Es semántico, con etiquetas que permiten clasificar y ordenar en distintos
niveles y estructuras el contenido.
 El código es más simple lo que permite hacer páginas más ligeras que se
cargan más rápidamente favoreciendo la usabilidad y la indexación en
búsquedas.
 Ofrece una compatibilidad mayor con dispositivos.
 Permite realizar diseños adaptables a distintos dispositivos.
(sodomaygorroma, 2013)

4.2.2 Desventajas HTML5

 HTML5 aún no cuenta con todas las funcionalidades necesarias para poder
incrustar un vídeo en la red con todos los elementos que tiene YouTube
actualmente: anotaciones, subtítulos, anuncios, relacionados. Además,
tampoco permite reproducir vídeos HTML5 a pantalla completa.
(sodomaygorroma, 2013)

Ilustración 8 Logo HTML5

Fuente: Google Imágenes, 2020.

20
4.3 CSS3

Es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación

de los documentos electrónicos definidos con HTML y XHTML. (EcuRed, 2020)

4.3.1 Ventajas CSS3

 Se obtiene un mayor control de la presentación del sitio al poder tener todo

el código CSS reunido en uno, lo que facilita su modificación.
 Conseguimos hacer mucho más legible el código HTML al tener el código
CSS aparte.
 Pueden mostrarse distintas hojas de estilo según el dispositivo que estemos
utilizando.
 Gracias a la técnica CSS Sprites podemos aligerar la carga de nuestro sitio
al juntar todas las imágenes en una. (EcuRed, 2020)

4.3.2 Desventajas CSS3

 dependiendo del navegador, la página que ha sido maquetada con CSS

puede verse distinta (Aunque, si hemos seguido los estándares web de forma
correcta, el problema es del navegador). (EcuRed, 2020)

21
 Ilustración 9 Logo CSS3

Fuente: Google Imágenes, 2020.

4.4 Bootstrap

Bootstrap es un framework front-end utilizado para desarrollar aplicaciones web y

sitios mobile first, o sea, con un layout que se adapta a la pantalla del dispositivo
utilizado por el usuario.

El framework combina CSS y JavaScript para estilizar los elementos de una página
HTML. Permite mucho más que, simplemente, cambiar el color de los botones y los
enlaces. Esta es una herramienta que proporciona interactividad en la página, por
lo que ofrece una serie de componentes que facilitan la comunicación con el usuario,
como menús de navegación, controles de página, barras de progreso y más. (Pedro
Guajardo, 2020)

4.4.1 Ventajas de Bootstrap

 Bootstrap es de código abierto y su licencia nos permite usarlo en cualquier

tipo de trabajo.
 Creación de todo tipo de interfaces de usuario para páginas web, desde
simples elementos como o iconos hasta componentes de interfaz gráfica
avanzados como tips, tabs, desplegables, etc.
 Proporciona una vía rápida para el diseño web adaptado a cualquier tipo de
dispositivo.

22
  Permite indicar que ciertos elementos se deben visualizar, u ocultarse,
dependiendo de si la pantalla del dispositivo tiene dimensiones pequeñas,
medianas, grandes o muy grandes. (Pedro Guajardo, 2020)

4.4.2 Desventajas de Bootstrap

 Optimización. Bootstrap contiene mucho código para componentes, iconos,

rejillas, etc. Si solo vamos a usar una pequeña parte del framework no tiene
sentido cargar todas sus utilidades.
 Código HTML complejo. Nuestro código HTML tendrá que ser modificado
para crear los contenedores tal como Bootstrap necesita para cargar en ellos
ciertos componentes. A veces las soluciones HTML no son las más sencillas
y nos obliga a generar código mayor del que sería necesario si lo hiciéramos
a mano.
 Diseños muy similares entre sí. Si no personalizamos el diseño de nuestro
sitio y no personalizamos el tema gráfico de Bootstrap, obtendremos un
diseño bastante aparente, pero infelizmente parecido a otros millares de
sitios de Internet. (Pedro Guajardo, 2020)

Ilustración 10 Logo Bootstrap

Fuente: Google Imágenes, 2020.

23
4.5 Visual Studio Code

Es un editor de código fuente desarrollado

por Microsoft para Windows, Linux y macOS. Incluye soporte para depuración,
control de Git integrado, resaltado de sintaxis, finalización de código inteligente,
fragmentos de código y refactorización de código. También es personalizable, de
modo que los usuarios pueden cambiar el tema del editor, los métodos abreviados
de teclado y las preferencias. Es gratuito y de código abierto. (EcuRed, 2020)

4.5.1 Características de Visual Studio Code

El código combina la interfaz de usuario optimizada de un editor moderno con

asistencia y navegación de código enriquecido y una experiencia de depuración
integrada, sin la necesidad de un IDE completo. Visual Studio Code, cuenta con
herramientas de Debug hasta opciones para actualización en tiempo real de nuestro
código en la vista del navegador y compilación en vivo de los lenguajes que lo
requieran (por ejemplo, en el caso de SASS a CSS). Además de las extensiones,
tendremos la posibilidad de optar por otros themes o bien configurarlo a nuestro
gusto. Para modificar el esquema de colores y los iconos. (EcuRed, 2020)

4.5.2 Ventajas de Visual Studio Code

 Visual Studio Code es una herramienta que tiene soporte nativo para gran
variedad de lenguajes, entre ellos podemos destacar los principales del
desarrollo Web: HTML, CSS, y JavaScript, entre otros.
 Posibilidad de configurar la interfaz a nuestro gusto. De esta forma, podremos
tener más de un código visible al mismo tiempo, las carpetas de nuestro
proyecto y también acceso a la terminal o un detalle de problemas, entre
otras posibilidades.
 Existencia de una amplísima gama de temas o estilos visuales para Visual
Studio Code, que hacen el trabajo con el software más agradable a la vista.

24
  Goza de un soporte técnico formidable pues debido a su frecuente uso por la
comunidad de desarrolladores, se puede encontrar fácilmente
documentación y ayuda en foros y sitios relacionados. (EcuRed, 2020)

4.5.3 Desventajas de Visual Studio Code

 Para crear aplicaciones multihilo, es necesario realizar llamadas a la API de

Windows. (EcuRed, 2020)

Ilustración 11 Logo Visual Studio Code

Fuente: Google Imágenes, 2020.

25
Capítulo 5 Desarrollo d el proyecto

26
5.1 Planificación del Sitio Web

5.1.1 Elección del Tipo de Sitio

Frente al objetivo del proyecto el cual es desarrollar un libro virtual, he integrarlo a

la intranet de la Universidad Tecnológica del Valle del Mezquital, para que toda la
comunidad universitaria pueda tener acceso al él, es que se llegó a la elección de
realizar el desarrollo bajo la estructura de un sistema web.

5.1.2 Planteamiento de Objetivos

Los objetivos del proyecto son desarrollar un libro virtual, con la estructura de un
sitio web en el cual se pueda tener acceso a los temas por medio de un menú
interactivo que los valla desglosando, además contar con un apartado donde se
podrá tener acceso a prácticas de acuerdo a los temas que se estén estudiando y
así mismo un apartado para evaluaciones para cada uno de los temas,
aprovechando las capacidades de un sistema web, para hacer la experiencia del
usuario lo más confortable y dinámica posible.

27
5.2 Diseño

5.2.1 Mapa del sitio

Ilustración 12 Mapa de Sitio del Sistema

Fuente: Elaboración Propia.

5.2.2 Diseño de la Plantilla

El libro virtual está pensado para ser un sistema web interactivo, el cual valla acorde
con el diseño de la Intranet de la universidad ya que va a estar incluida en ella.

28
5.3 Descripción del Sistema Web

5.3.1 Pantalla de Inicio

Ilustración 13 Pantalla Inicio

Fuente: Elaboración Propia.

La pantalla de inicio nos permite visualizar información acerca del proyecto que se
está desarrollando además de información de la empresa IBM y sobre la
capacitación que ofrecen, especificando la forma de ser parte de la misma si la
comunidad universitaria lo desea.

29
5.3.2 Menú Lateral

Ilustración 14 Menú Lateral Sistema

Fuente: Elaboración Propia.

El menú lateral del sistema nos brinda la posibilidad de mediante el poder acceder
a todos los temas que contiene el libro virtual, regresar a la pantalla de inicio y
además tener acceso a prácticas y evaluaciones separadas por temas.

El menú lateral se encuentra presente en cada una de las interfaces del sistema.

30
5.3.3 Pantalla por Tema

Ilustración 15 Pantalla por Tema

Fuente: Elaboración Propia.

El sistema contiene una pantalla por tema en la cual se muestra todo el contenido
de cada tema, explicación de conceptos y material de apoyo como imágenes que
refuercen el contenido del tema.

31
5.3.4 Pantalla por Practica

Ilustración 16 Pantalla Practica

Fuente: Elaboración Propia.

El sistema cuenta con una Interfaz por practica de cada tema, en la cual se muestra
las instrucciones y característica de en qué consiste la práctica.

5.3.5 Pantalla por Evaluación

Ilustración 17 Pantalla Evaluación

Fuente: Elaboración Propia.

32
El sistema cuenta con una pantalla por evaluación de cada tema, en la cual se
encuentra las preguntas que deberá resolver el usuario para reforzar sus
conocimientos.

5.4 Pruebas

5.4.1 Elección del Tipo de Pruebas

Las pruebas de software nos ayudaran a verificar la correcta integración de los

componentes además de la adecuada implementación de los componentes, existen
diversos tipos de pruebas de software las cuales evalúan diversos aspectos de un
sistema.

Pruebas de funcionalidad:

 Caja negra: se centran en los requisitos funcionales pruebas sobre la interfaz

del software. Enfocada en las entradas y salidas y no en el código fuente.
 Caja blanca: verifican que líneas específicas de código funcionan tal como
están definidas

5.4.2 Elaboración del plan de pruebas y ejecución de pruebas

El plan de prueba consiste en aplicar la metodología de pruebas de software, con el

objetivo de comprobar la correcta funcionabilidad de un sistema y así poder recortar
tiempos en resolver problemas o fallas una vez el sistema este en funcionamiento.

5.4.3 Bitácora de pruebas

La bitácora de pruebas muestra una serie de casos de uso, así como la descripción
y el tiempo de ejecución de la prueba

33
 Tabla 3 Bitácora de Pruebas

Bitácora de Pruebas “Libro Virtual”

Metodología: Caja negra

No de prueba: 01
Fecha: Lun 10 de agosto 2020
Módulo de prueba: Interfaz de sistema
Observaciones: Se realizo una observación acerca de
cómo lucia la interfaz del sistema con
respecto al aspecto de la intranet de la
universidad.
Cambios: Se ajusto el aspecto de la interfaz en
cuanto a colores y estructura, con base
al diseño de la intranet de la
universidad.

Fuente: Elaboración Propia.

Bitácora de Pruebas “Libro Virtual”

Metodología Caja negra

No de prueba 02
Fecha Mier 12 de agosto 2020
Módulo de prueba Menú del sistema
Observaciones El menú debe de redirigir
correctamente a las diferentes

34
 interfaces de acuerdo a la estructura del
sistema.
Cambios Se verifico el correcto funcionamiento
de cada uno de los enlaces del sistema.

Fuente: Elaboración Propia.

Bitácora de Pruebas “Libro Virtual”

Metodología Caja blanca

No de prueba 03
Fecha Vier 14 de agosto 2020
Módulo de prueba Código fuente del sistema
Observaciones Se reviso que el sistema contara con
una correcta estructura en su código
fuente.
Cambios Se realizaron modificaciones en la
estructura del sistema, para hacerlo un
código mejor organizado y legible.

Fuente: Elaboración Propia.

Bitácora de Pruebas “Libro Virtual”

Metodología Diseño
No de prueba 04
Fecha Vier 14 de agosto 2020
Módulo de prueba Contenido del sistema

35
 Observaciones Se realizo una revisión a la tipografía
del contenido del sistema y a la
presentación de su contenido
multimedia.
Cambios Se realizaron modificaciones en la
tipografía de acuerdo a los estándares
para libro virtuales, así también para el
contenido multimedia del libro.

Fuente: Elaboración Propia.

5.5 Mantenimiento al Sistema Web

5.5.1 Ampliaciones y Actualizaciones

El libro virtual podría contar con actualizaciones de contenido dependiendo de las

necesidades del cliente, ya que tiene la capacidad de aumentar de una forma fácil
los temas del libro y el contenido de cada uno de ellos.

36
Conclusiones y Recomendaciones

El periodo de estadía brinda una oportunidad muy buena de probar tus

conocimientos y actitudes, dentro de un entorno parecido al que te has de enfrentar
en el mundo laboral, reforzando nuestra formación con conocimientos los cuales
solo los puedes adquirir por medio de la experiencia.

El desarrollo de un proyecto tecnológico te abre la mente a la gran variedad de

herramientas de las cuales puedes implementar, aumentando tu necesidad de
adquirir conocimientos para tu desarrollo personal y profesional, la importancia del
trabajo estructurado y la invocación en lo que haces son las fuentes del progreso en
la actualidad.

El uso de las TI para las empresas en la actualidad es de suma importancia ya que

sin ellas muchos de los procesos que realizan serían mucho más complejos de
realizar o incluso imposibles de realizar sin ellas, además una gran ventaja de
utilizar soluciones tecnológicas es la reducción de costos en gran medida por la
automatización de los procesos.

Por lo tanto, el desarrollo profesional tecnológico es sumamente importante en la

actualidad y también hacia el futuro, es nuestro deber el estar preparados y bien
desempeñados en este ámbito si es que deseamos el éxito profesional.

37
Bibliografía

IBM. (2009). Conozca IBM, Productos y Soluciones. 02 de agosto 2020, de IBM

Sitio web:
https://www.ibm.com/expressadvantage/mx/pdf/Folleto_Conozca_IBM.pdf

IBM. (2020). Documentos de IBM Cloud / Iniciación a IBM Cloud. 02 de agosto de

2020, de IBM Sitio web: https://cloud.ibm.com/docs/overview?topic=overview-
whatis-platform&locale=es

Neosoft. (2018). Aplicación Web. 04 de agosto 2020, de Blog Neosoft Sistemas

Sitio web: https://www.neosoft.es/blog/que-es-una-aplicacion-web/

sodomaygorroma. (2013). HTML5. 04 de agosto 2020, de sodomaygorroma Sitio

web: https://unbermenchdotcom.wordpress.com/ventajas-y-desventajas/

EcuRed. (2020). CSS3. 04 de agosto 2020, de EcuRed Sitio web:

https://www.ecured.cu/CSS3

Pedro Guajardo. (2020). Bootstrap: guía para principiantes de qué es, por qué y
cómo usarlo. 04 de agosto 2020, de Rock Content Sitio web:
https://rockcontent.com/es/blog/bootstrap/

EcuRed. (2020). Visual Studio Code. 04 de agosto 2020, de EcuRed Sitio web:
https://www.ecured.cu/Visual_Studio_Code

Microsoft. (2020). ¿Qué es la nube?. 17 de agosto 2020, de Microsoft Sitio web:

https://azure.microsoft.com/es-es/overview/what-is-the-cloud/

Microsoft. (2019). Conceptos de minería de datos. 17 de agosto 2020, de Microsoft

Sitio web: https://docs.microsoft.com/es-es/analysis-services/data-mining/data-
mining-concepts?view=asallproducts-allversions#DefiningTheProblem

IBM. (2020). ¿Qué es Machine Learning?. 18 de agosto 2020, de IBM Sitio web:
https://www.ibm.com/mx-es/analytics/machine-learning

38
Glosario

Abstract: El resumen documental o abstract es una representación abreviada,

objetiva y precisa del contenido de un documento o recurso, sin interpretación
crítica.

Macrolización: También llamada macro zona, es el estado de localización que tiene

como propósito encontrar la ubicación más ventajosa para el proyecto.

Microlocalización: Conjuga los aspectos relativos a los asentamientos humanos,

identificación de actividades productivas y determinación de centros de desarrollo.

Metodología: Es un marco de trabajo usado para estructurar, planificar y controlar

el proceso de desarrollo en sistemas de información.

Aplicación web: es una aplicación o herramienta informática accesible desde

cualquier navegador, bien sea a través de internet (lo habitual) o bien a través de
una red local.

Casos de Uso: En Ingeniería del software, es una técnica para la captura de

requisitos potenciales de un nuevo Sistema o una actualización de Software. Cada
caso de uso proporciona uno o más escenarios que indican cómo debería
interactuar el sistema con el usuario o con otro sistema para conseguir un objetivo
específico.

CSS3: CSS es un lenguaje para definir el estilo o la apariencia de las páginas web,
escritas con HTML o de los documentos XML.

HTML5: Se trata de una nueva versión de HTML, con nuevos elementos, atributos
y comportamientos. Contiene un conjunto más amplio de tecnologías que permite a
los sitios Web y a las aplicaciones ser más diversas y de gran alcance.

Intranet: Sitio web interno, diseñado para ser utilizado dentro de los límites de la
compañía.

39
Bootstrap: Bootstrap es un framework front-end utilizado para desarrollar
aplicaciones web y sitios mobile first, o sea, con un layout que se adapta a la pantalla
del dispositivo utilizado por el usuario.

40
Anexos

41