2022

QUICK REFERENCE
PROYECTO DE INGENIERÍA II
“PAGINA WEB (LIBRO DIGITAL)”

1
UNIVERSIDAD MEXIQUENSE DEL BICENTENARIO

UES TEPOTZOTLÁN

PROYECTO DE INGENIERÍA II
“PAGINA WEB (LIBRO
DIGITAL)”
TRABAJO PRESENTADO POR DIAZ GARCIA GEYMMY,
GODÍNEZ ETCHEGARAY JESÚS SANTIAGO, HERRERA
ZAMORA JOSAFAT, SÁNCHEZ HERNÁNDEZ MARTIN,
MELCHOR MEDRANO KENNET, PIÑA VILLEGAS ÁNGEL
URIEL PARA ACREDITAR LA ASIGNATURA "Proyecto de
ingeniería ll" DE LA CARRERA DE INGENIERÍA EN
TECNOLOGÍAS DE LA INFORMACIÓN Y LAS
COMUNICACIONES.
Asesores: García Floriano Karen Argelia y Figueroa Castro
Antonio

Junio 2021

2
 Índice
Introducción ......................................................................................... 4
Objetivo general .................................................................................. 6
Objetivos específicos ........................................................................... 6
Hipótesis ............................................................................................. 6
Quick reference ................................................................................... 7
Pantalla de inicio .............................................................................. 7
Inicio de pantalla .......................................................................... 7
Introducción de Información del libro ............................................ 8
Sección de interactuar .................................................................. 8
Apartado de importancia de los libros digitales y pie de pagina .... 9
Unidades.......................................................................................... 9
Regresar al inicio .........................................................................10
Contenido ....................................................................................11
Unidad 1 ......................................................................................12
Unidad 2 ......................................................................................13
Unidad 3 ......................................................................................14
Unidad 4 ......................................................................................15
Recursos .....................................................................................16
Descarga de audios ........................................................................17
Actividades .....................................................................................18
Menú de actividades....................................................................18
Teléfonos de soporte ..........................................................................47

3
 Introducción
En el proyecto de la materia de inglés, se realizó una página web siendo
esta un libro técnico digital e interactivo en base a los conocimientos de
la carrera, se inició una investigación sobre lenguajes de programación
que nos ayudó a desarrollar la página web con alta calidad, menor
tiempo y mejores resultados. Esta investigación tuvo como objetivo
encontrar el mejor programa que nos ayude a crear un libro digital y
dinámico, se utilizaron los lenguajes de programación (HTML, CSS,
JavaScript).
Nos ayudamos de un software editor de código en este caso usamos
Visual Code ya que este editor nos permite la interacción y creación de
diseño web, en la codificación desde cero de igual forma nos da la
opción de previsualizar el desarrollo web y hacer uso de un servidor.
HTML es una herramienta que nos ayuda para la creación del mismo
desarrollo web, esta herramienta es fundamental ya que sin estos
códigos no se podría estructurar nuestra página, esto nos ayuda para la
definición de contenido de una como texto, imágenes, etc.
CSS nos ayudó al diseño web ya que HTML es la herramienta de
creación, pero CSS es el estilo de este, nos ayuda a dar una mejor vista
de la página dando mejor forma, diseño, color, presentación y nos ayuda
a reducir la complejidad y la repetición del código. en la estructura del
documento, nuestra página web cuenta con únicamente tres códigos
diferentes de estilos: El primero para el inicio de la página, el segundo
para el diseño de las unidades y por último el código de estilos de los
menús para acceder a las actividades. Y finalmente, JavaScript es el
encargado de darle el aspecto dinámico ya que a la hora de diseñar y
codificar la misma página es fundamental para el diseño ya que esta
herramienta nos permite dar movimiento, realismo e interpretativo ya
que JavaScript es una herramienta que permite ese dinamismo a la
página.
Estos lenguajes se utilizaron en el proyecto, se subió a un servidor para
que la página web pueda ser visualizado desde una computadora o un
celular. Una vez realizada la investigación proponemos las
herramientas que utilizaremos como el libro y el contenido multimedia

4
de esta, teniendo bien definidas las herramientas a utilizar se realizó un
diseño previo de cómo se visualizaría el sitio web.
Se definió que cuente con diferentes secciones para la mejor
visualización y accesibilidad, de la misma manera que puede ser
manipulado por cualquier persona con ayuda visual y que sea fácil de
utilizar.
El objetivo principal es hacer una página web visualmente atractiva y
comprensible para cualquier persona, se visualiza y se puede
interactuar con un libro ya asignado para la materia de inglés técnico 1,
la página o el libro Digital tiene las siguientes secciones:
• Inicio: Esta sección muestra el libro y el acceso al mismo.
• Libro (Acceso a unidades): dentro de este puedes ver cómo van
cambiando las páginas, así mismo el libro digital tiene dos herramientas:
Audios para resolver los ejercicios que se descargan de manera fácil y
sencilla.
Actividades de cada unidad para resolver diferentes ejercicios del libro
donde el usuario permitía responder y comprobar si sus respuestas
fueron correctas o incorrectas y el total de aciertos obtenidos.

5
 Objetivo general

Implementar una herramienta de trabajo (Libro Digital) que brinde apoyo

a los estudiantes que cursan la materia de inglés técnico 1.

Objetivos específicos

• Utilizar los conocimientos adquiridos a lo largo de la carrera para poder

realizar el trabajo.
• Fomentar el uso de las tecnologías de la información y la
comunicación.
• Implementar nuevas formas de trabajo para brindar apoyo a los
estudiantes.

Hipótesis

Con el uso de esta herramienta que incorpora el uso de las TIC, los
estudiantes reciben un apoyo que facilita la interacción con el cuaderno
de trabajo Inglés Técnico 1, así mismo los estudiantes de la UMB ponen
en práctica los conocimientos adquiridos a lo largo de la carrera para
este Proyecto

6
 Quick reference
Pantalla de inicio
Inicio de pantalla
1.- Botón de acceso rápido a la siguiente sección.
2.- Icono de Facebook que lleva directo al perfil de inglés.
3.- Perfil de inglés.

7
 Introducción de Información del libro
1.- Información del libro.
2.- Icono de Facebook que lleva directo al perfil de inglés.

Sección de interactuar
1.- Botón de acceso a las unidades.
2.- Botón para la descarga de audios.
3.- Botón de acceso a las actividades.
4.- Icono de Facebook que lleva directo al perfil de inglés.

1
3
2
8
 Apartado de importancia de los libros digitales y pie de pagina
1.- Información acerca de la importancia de los libros digitales.
2.- Pie de página.
3.- Icono de Facebook que lleva directo al perfil de inglés. 1

Unidades
1.- Interacción de unidades.
2.- Botón para acceder a las unidades.

1
2

9
 Regresar al inicio
1.- Botón de regresa al inicio de la página.
2.- Inicio de la página.

10
 Contenido
1.- Botón de acceso al contenido.
2.- Contenido del libro.
1

11
 Unidad 1
1.- Botón de acceso para la unidad 1.
2.- Unidad 1 del libro.

12
 Unidad 2
1.- Botón de acceso para la unidad 2.
2.- Unidad 2 del libro.

13
 Unidad 3
1.- Botón de acceso para la unidad 3.
2.- Unidad 3 del libro.
1

14
 Unidad 4
1.- Botón de acceso para la unidad 4.
2.- Unidad 4 del libro.
1

15
 Recursos
1.- Botón de acceso para los recursos.
2.- Recursos del libro. 1

16
Descarga de audios
1.- Interacción de audios.
2.- Botón para descargar audios.
3.- Barra de audios descargados.
1

17
Actividades
1.- Interacción de actividades.
2.- Botón para acceder a las actividades.
1

Menú de actividades
1.- Interacción de actividades.
2.- Botón para acceder a las actividades.
3.- Botón de regreso al inicio de la pagina
4.-Boton para acceder a las unidades.

4 1

18
 2
1

Unidad 1 Menú
1.- Boton de regreso al inicio de la pagina.
2.- Boton de regreso a las actividades de la unidad.
3.- Boton para acceder al ejercicio 6.
4.- Boton para acceder al ejercicio 8.
5.- Boton para acceder al ejercicio 11.

3 5
4

19
 Actividad 1
1.- Ejercicio a realizar.
2.-Boton de regreso al inicio de la pagina.
3.-Boton de regreso a las actividades de la unidad.
4.-Boton de regreso a la interaccion de los ejercicios 6, 8 y 11.
5.- Resultado de la respuesta correcta.
6.- Resultado de la respuesta incorrecta.
7.- Resultado de la actividad realizada.

20
2 3 4
 1
6

2 3 4

21
 Actividad 2
1.- Ejercicio a realizar.
2.-Boton de regreso al inicio de la pagina.
3.-Boton de regreso a las actividades de la unidad.
4.-Boton de regreso a la interaccion de los ejercicios 6, 8 y 11.
5.- Resultado de la respuesta correcta.
6.- Resultado de la respuesta incorrecta.
7.- Resultado de la actividad realizada.

22
2 3 4
 1

2 3 4

23
 Actividad 3
1.- Ejercicio a realizar.
2.-Boton de regreso al inicio de la pagina.
3.-Boton de regreso a las actividades de la unidad.
4.-Boton de regreso a la interaccion de los ejercicios 6, 8 y 11.
5.- Resultado de la respuesta correcta.
6.- Resultado de la respuesta incorrecta.
7.- Resultado de la actividad realizada.

24
2 3 4
 1

2 3 4

25
 Unidad 2 Menú
1.- Boton de regreso al inicio de la pagina.
2.- Boton de regreso a las actividades de la unidad.
3.- Boton para acceder al ejercicio 1.
4.- Boton para acceder al ejercicio 6.
5.- Boton para acceder al ejercicio 11.

1 2

3 4 5

Actividad 1
1.- Ejercicio a realizar.
2.-Boton de regreso al inicio de la pagina.
3.-Boton de regreso a las actividades de la unidad.
4.-Boton de regreso a la interaccion de los ejercicios 1, 6 y 11.
5.- Resultado de la respuesta correcta.
6.- Resultado de la respuesta incorrecta.
7.- Resultado de la actividad realizada.

26
 1

2 3 4

27
 1

2 4
3

28
 Actividad 2
1.- Ejercicio a realizar.
2.-Boton de regreso al inicio de la pagina.
3.-Boton de regreso a las actividades de la unidad.
4.-Boton de regreso a la interaccion de los ejercicios 1, 6 y 11.
5.- Resultado de la respuesta correcta.
6.- Resultado de la actividad realizada.
3
4
2

29
 1

30
 Actividad 3
1.- Ejercicio a realizar.
2.-Boton de regreso al inicio de la pagina.
3.-Boton de regreso a las actividades de la unidad.
4.-Boton de regreso a la interaccion de los ejercicios 1, 6 y 11.
5.- Resultado de la respuesta correcta.
6.- Resultado de la respuesta incorrecta.
7.- Resultado de la actividad realizada.

4 31
2
3
 1

2 4
3

32
 Unidad 3 Menú
1.- Boton de regreso al inicio de la pagina.
2.- Boton de regreso a las actividades de la unidad.
3.- Boton para acceder al ejercicio 2.
4.- Boton para acceder al ejercicio 3.
5.- Boton para acceder al ejercicio 13.

1 2

3 4 5

Actividad 1
1.- Ejercicio a realizar.
2.-Boton de regreso al inicio de la pagina.
3.-Boton de regreso a las actividades de la unidad.
4.-Boton de regreso a la interaccion de los ejercicios 2, 3 y 13.
5.- Resultado de la respuesta correcta.
6.- Resultado de la respuesta incorrecta.
7.- Resultado de la actividad realizada.

33
2 3
4

34
 1

35
 Actividad 2
1.- Ejercicio a realizar.
2.-Boton de regreso al inicio de la pagina.
3.-Boton de regreso a las actividades de la unidad.
4.-Boton de regreso a la interaccion de los ejercicios 2, 3 y 13.
5.- Resultado de la respuesta correcta.
6.- Resultado de la respuesta incorrecta.
7.- Resultado de la actividad realizada.

3 4 36
 1

2 4

37
 Actividad 3
1.- Ejercicio a realizar.
2.-Boton de regreso al inicio de la pagina.
3.-Boton de regreso a las actividades de la unidad.
4.-Boton de regreso a la interaccion de los ejercicios 2, 3 y 13.
5.- Resultado de la respuesta correcta.
6.- Resultado de la respuesta incorrecta.
7.- Resultado de la actividad realizada.

38
 1

4
2 3

2
3 4

39
 7

Unit 4 Menu
1.- Boton de regreso al inicio de la pagina.
2.- Boton de regreso a las actividades de la unidad.
3.- Boton para acceder al ejercicio 3.
4.- Boton para acceder al ejercicio 5.
5.- Boton para acceder al ejercicio 6.

1 2

3 4 5

40
 Actividad 1
1.- Ejercicio a realizar.
2.-Boton de regreso al inicio de la pagina.
3.-Boton de regreso a las actividades de la unidad.
4.-Boton de regreso a la interaccion de los ejercicios 3, 5 y 6.
5.- Resultado de la respuesta correcta.
6.- Resultado de la respuesta incorrecta.
7.- Resultado de la actividad realizada.

3
4

41
1

42
 Actividad 2
1.- Ejercicio a realizar.
2.-Boton de regreso al inicio de la pagina.
3.-Boton de regreso a las actividades de la unidad.
4.-Boton de regreso a la interaccion de los ejercicios 2, 3 y 13.
5.- Resultado de la respuesta correcta.
6.- Resultado de la respuesta incorrecta.
7.- Resultado de la actividad realizada.

2
4

3 43
4
 5

1
4
4 6

3
4 4
2 4 4
4

44
 Actividad 3
1.- Ejercicio a realizar.
2.-Boton de regreso al inicio de la pagina.
3.-Boton de regreso a las actividades de la unidad.
4.-Boton de regreso a la interaccion de los ejercicios 2, 3 y 13.
5.- Resultado de la respuesta correcta.
6.- Resultado de la respuesta incorrecta.
7.- Resultado de la actividad realizada.

4
3 4
2

45

4
4
4
 1

3 4
2
4 4

4 7
4

46
 Teléfonos de soporte

Proporcionamos en caso de cualquier falla en el sitio web los números

de soporte de los ingenieros que podrían brindar la ayuda necesaria.
Ing. Geymmy Dìaz Garcìa: 5518416961
Ing. Godínez Etchegaray Jesús Santiago: 5575100968
Ing. Herrera Zamora Josafat: 5586917686
Ing. Sánchez Hernández Martin: 5586126159
Ing. Melchor Medrano Kennet: 5581707069
Ing. Piña Villegas Ángel Uriel: 5613970680

47