1
00:00:01,139 --> 00:00:16,000
Buenas tardes, Manuel. Hoy día 22 de enero a las 7 y 20 horas estamos convocados a través de Jefatura de Deportamento para la defensa del módulo profesional de proyecto del ciclo formativo de grado superior de desarrollo de aplicaciones web.

2
00:00:16,859 --> 00:00:29,620
Informo que esta grabación se usará en el entorno cerrado de EducaMadrid con fines educativos y sólo estará a disposición de los profesores en el aula virtual para llevar a cabo la evaluación y la calificación de la defensa del proyecto.

3
00:00:29,620 --> 00:00:52,679
En el aula virtual de proyecto has sido informado de los criterios y rúbrica de calificación. El orden de la presentación del proyecto es el siguiente. 15 minutos máximo para defender el proyecto, 5 minutos para preguntas por parte del tribunal y dicho esto, tu tiempo de exposición comienza a partir de este momento. Adelante y mucha suerte.

4
00:00:52,679 --> 00:01:03,060
Buenas tardes. ¿Alguna vez has tenido la sensación de querer mejorar en algún punto de tu vida, pero no has sabido por dónde empezar?

5
00:01:03,659 --> 00:01:11,280
Tal vez tu objetivo sea leer más libros, pero ¿te abruma la cantidad de opciones disponibles o no tienes la capacidad de mantener el hábito?

6
00:01:11,760 --> 00:01:20,060
Soy Manuel Luis Muñoz, estudiante del grado superior de Desarrollo de Aplicaciones Web y tengo el honor de presentar Enhanced Reads,

7
00:01:20,060 --> 00:01:42,739
Una plataforma web dedicada para mejorar este proyecto. Actualmente, pese a vivir en una sociedad repleta de información, mucha gente, gran parte de la población, no tiene acceso a recursos de alto valor en áreas claves como son las habilidades sociales, los recursos financieros y la salud mental.

8
00:01:43,659 --> 00:01:52,060
Enhanced Reads tiene como misión ser el punto de encuentro para todas aquellas personas interesadas en el ámbito de la mejora personal y colectiva.

9
00:01:53,420 --> 00:02:08,860
Entre los objetivos se destacan facilitar la integración e intercambio de conocimientos, ofrecer una amplia variedad de libros y recursos de gran valor y diseñar una interfaz intuitiva, minimalista y accesible a todo tipo de usuarios y dispositivos.

10
00:02:08,860 --> 00:02:19,560
Para el desarrollo de este proyecto se ha empleado el ciclo de vida iterativo e incremental, pues permite un desarrollo flexible, eficiente y adaptable.

11
00:02:20,680 --> 00:02:33,979
En cuanto a las tecnologías, en el frontend se ha empleado HTML, CSS, Javascript y jQuery para diseñar una interfaz minimalista y dotar de interactividad al sitio web.

12
00:02:33,979 --> 00:02:41,580
En el backend se ha utilizado PHP, Composer como gestor de dependencias y MySQL como sistema gestor de base de datos.

13
00:02:42,439 --> 00:02:56,639
En cuanto a las herramientas, Git y GitHub permiten el control de versiones del código, Visual Studio Code ha permitido la codificación del proyecto y VirtualBox es la herramienta encargada de desplegar las máquinas virtuales del proyecto.

14
00:02:56,639 --> 00:03:01,659
En cuanto a la arquitectura, se ha ampliado el patrón modelo vista controlador

15
00:03:01,659 --> 00:03:05,439
Pues permite un desarrollo organizado, modular y escalable

16
00:03:05,439 --> 00:03:11,219
El sistema es transparente para el usuario

17
00:03:11,219 --> 00:03:16,180
Pues cuando se realiza una petición, el controlador se comunica con el modelo

18
00:03:16,180 --> 00:03:22,659
Este le responde los datos correspondientes y el controlador renderizará la vista necesaria al usuario

19
00:03:22,659 --> 00:03:44,199
En cuanto al esquema de red, el proyecto se fundamenta en tres máquinas virtuales con sistema operativo Ubuntu, ejecutadas bajo un único sistema anfitrión con Windows. Esto ha permitido separar y aislar los servicios, mejorando el rendimiento, la seguridad y la optimización de los recursos.

20
00:03:44,939 --> 00:03:52,780
Por un lado, el servidor DNS permite la traducción de nombres de dominio a direcciones IP.

21
00:03:53,599 --> 00:04:03,879
El servidor web y de base de datos permite gestionar la aplicación web, servir la aplicación y almacenar los datos de la misma.

22
00:04:05,080 --> 00:04:11,979
Por otro lado, el cliente web es la máquina que empleará el usuario para acceder a la aplicación desde un navegador.

23
00:04:11,979 --> 00:04:32,449
El diseño de la plataforma está basado para crear una experiencia intuitiva, minimalista y accesible a todo tipo de usuarios. Para ello, se ha diseñado una interfaz de escritorio, ideal para ordenadores de sobremesa y portátiles, y una interfaz responsive, ideal para dispositivos móviles y tablets.

24
00:04:33,209 --> 00:04:43,709
De igual manera, la aplicación cuenta con un tema claro y con un tema oscuro, ambos con una paleta de colores concreta para garantizar una calidad de lectura en cualquier tipo de entorno.

25
00:04:45,089 --> 00:04:55,470
En cuanto al apartado de pruebas, a continuación se harán en tiempo real unas pruebas desde la máquina virtual del cliente.

26
00:04:55,470 --> 00:05:18,649
Para ello, se accederá a la página principal, en donde se pueden apreciar las dos secciones principales de la web, tanto libros como publicaciones, un apartado donde se informa del objetivo de la web, así como las valoraciones de los usuarios, y un pie de página en donde aparecen los datos de contacto y la información legal.

27
00:05:18,649 --> 00:05:28,149
Comenzando con la gestión de usuarios, el proceso inicia al dar clic en el botón de acceder

28
00:05:28,149 --> 00:05:36,069
Se mostrará un formulario de inicio de sesión en donde además el usuario puede crear una cuenta o restablecer su contraseña

29
00:05:37,170 --> 00:05:42,490
Para crear una cuenta se deberá indicar el nombre de usuario, que en este caso es Pablo

30
00:05:42,490 --> 00:05:50,519
Un correo electrónico y una contraseña que debe de ser validada

31
00:05:50,519 --> 00:06:03,209
Al crear la cuenta saldrá un mensaje de éxito y se redirigirá al formulario de inicio de sesión

32
00:06:03,209 --> 00:06:12,120
Para ello indicamos las credenciales que acabamos de indicar y nos habremos logado correctamente

33
00:06:12,120 --> 00:06:18,980
Una vez iniciada la sesión el usuario tiene la capacidad de cerrar la sesión y de modificar su perfil

34
00:06:18,980 --> 00:06:22,819
En este caso se añadirá el apellido al usuario

35
00:06:22,819 --> 00:06:30,399
Tras dar en aceptar aparecerán los datos ya actualizados

36
00:06:30,399 --> 00:06:40,100
Asimismo, en esta interfaz, el usuario puede eliminar su cuenta haciendo clic en el botón correspondiente y aceptando la validación

37
00:06:40,100 --> 00:06:46,120
Tras la confirmación, se regresará a la página de inicio y el usuario habrá quedado borrado

38
00:06:47,959 --> 00:06:56,120
A continuación, se mostrará la sección de libros y recursos, en donde de manera principal se mostrará todo el catálogo de manera paginada

39
00:06:56,120 --> 00:07:05,439
paginada. Asimismo, existe la capacidad de filtrar los resultados por diferentes criterios. A

40
00:07:05,439 --> 00:07:10,439
continuación se mostrarán que al filtrar por libros de finanzas con más de 200 páginas,

41
00:07:10,819 --> 00:07:17,120
existen dos resultados. Al hacer clic en la portada de un libro de recursos, se mostrarán los detalles

42
00:07:17,120 --> 00:07:23,480
del mismo, incluyendo información esencial como enlaces a las diferentes plataformas para su

43
00:07:23,480 --> 00:07:31,019
compra en caso de un libro por ejemplo amazon casa del libro nada y busca libre en cuanto a

44
00:07:31,019 --> 00:07:36,740
la administración de los libros y recursos esta acción recae únicamente en el administrador para

45
00:07:36,740 --> 00:07:45,079
ello se inicia la sesión con la cuenta de administrador que es menor y puesto que el

46
00:07:45,079 --> 00:07:51,079
usuario de administrador requiere de una doble factor de autenticación se deberá de indicar un

47
00:07:51,079 --> 00:07:58,680
código OTP, One Time Password, generado por Google Authenticator. Tras iniciar sesión y regresar a la

48
00:07:58,680 --> 00:08:06,360
sección de libros, aparecerá un botón que se llama gestionar libros. Al pulsar en él, se podrán

49
00:08:06,360 --> 00:08:12,259
insertar libros, autores, géneros y editoriales, cada uno con su formulario correspondiente.

50
00:08:12,259 --> 00:08:24,100
En este ejemplo, para insertar un libro, se hará la inserción del título llamado Deja de ser tú, de Joy Dispensa

51
00:08:24,100 --> 00:08:32,740
El cual recomiendo encarecidamente su lectura, pues es un libro de mentalidad que puede cambiar tu día a día

52
00:08:33,480 --> 00:08:41,519
Para facilitar este proceso, la inserción de los diferentes datos solicitados los tengo anotados en un blog de notas

53
00:08:41,519 --> 00:08:59,419
Pues esto voy a ir indicando los datos correspondientes. El año de publicación del libro fue 2012, idioma español, ISBN está por aquí, y en cuanto a la portada se indicará una imagen que tengo previamente descargada.

54
00:08:59,419 --> 00:09:13,639
Para la descripción se insertará la sinopsis del libro y en cuanto a los enlaces se indicará el enlace de compra a la web de Amazon y a la casa del libro

55
00:09:14,460 --> 00:09:23,799
Tras insertar el libro aparecerá un mensaje de éxito y al regresar a la sección veremos que aparece el libro ya insertado en el catálogo

56
00:09:23,799 --> 00:09:31,399
Al hacer clic en el libro, el usuario administrador tiene la posibilidad de editarlo y eliminarlo

57
00:09:31,399 --> 00:09:35,340
En este caso, vamos a cambiar el autor a Brian Tracy

58
00:09:35,340 --> 00:09:40,360
Y tras actualizar los datos y regresar, se puede apreciar que ha cambiado

59
00:09:40,360 --> 00:09:46,960
De igual manera, en caso de querer borrar el libro, tan simple como pulsar en borrar y aceptar la confirmación

60
00:09:46,960 --> 00:09:56,720
Ahora para abordar el apartado de publicaciones voy a iniciar sesión con una cuenta de Google

61
00:09:56,720 --> 00:10:04,159
Voy a introducir mis credenciales y me lo hará automáticamente

62
00:10:04,159 --> 00:10:13,600
En este apartado de publicaciones aparecerán un listado de todos los posts vigentes, también de manera paginada

63
00:10:13,600 --> 00:10:21,940
así como la posibilidad de hacer filtrado de los resultados por diferentes criterios en este caso

64
00:10:21,940 --> 00:10:28,240
como el usuario está autenticado tiene un filtro adicional de favoritos en el que se muestran las

65
00:10:28,240 --> 00:10:35,340
publicaciones a las que el usuario ha dado me gusta al hacer clic en una publicación esta se

66
00:10:35,340 --> 00:10:43,980
mostrará de forma completa incluyendo el apartado de comentarios para crear una publicación es tan

67
00:10:43,980 --> 00:10:49,960
simple como dar clic en el botón crear post y rellenar la categoría el idioma el título y su

68
00:10:49,960 --> 00:10:57,059
contenido en esta ocasión se va a insertar una pequeña publicación de una frase motivacional

69
00:10:57,059 --> 00:11:03,779
por tanto la categoría será mentalidad y el título es el poder está en ti ahora indicamos

70
00:11:03,779 --> 00:11:11,700
el contenido del mismo y damos en publicar tras quitar el filtro de favoritos aparecerá en la

71
00:11:11,700 --> 00:11:16,679
publicación recién creado puesto que somos el autor de dicha

72
00:11:16,679 --> 00:11:21,659
publicación tenemos la posibilidad de editarlo en este caso vamos a cambiar el

73
00:11:21,659 --> 00:11:26,480
idioma inglés y se puede apreciar cómo ha cambiado correctamente así como la

74
00:11:26,480 --> 00:11:31,639
posibilidad de eliminar la publicación tras la previa confirmación

75
00:11:32,779 --> 00:11:37,879
además los usuarios autenticados tienen la posibilidad de dar me gustas a las

76
00:11:37,879 --> 00:11:43,600
publicaciones y realizar comentarios. En este caso se va a dejar me gusta a la publicación de Jorge

77
00:11:43,600 --> 00:11:48,659
sobre las claves de mejorar tu productividad y se le dejará un comentario de apoyo.

78
00:11:51,419 --> 00:11:58,960
Como vemos aparece aquí ya insertado hace un momento. Debido a esta interacción social cada

79
00:11:58,960 --> 00:12:03,480
usuario autenticado tendrá un apartado de notificaciones representado por una campana

80
00:12:03,480 --> 00:12:10,480
en donde se mostrará un listado en tiempo real de todas las interacciones a las que el usuario ha recibido.

81
00:12:11,820 --> 00:12:16,340
Al hacer el clic en una de ellas, se mostrará la publicación de manera individual,

82
00:12:17,000 --> 00:12:22,899
lo cual es ideal para compartirla con otros usuarios o para guardarla para su posterior lectura.

83
00:12:25,179 --> 00:12:29,960
Regresando a la presentación, toca abordar el apartado de conclusiones,

84
00:12:29,960 --> 00:12:55,919
Pues tras el desarrollo de este proyecto se han llevado a cabo varios de los objetivos propuestos inicialmente, tales como el desarrollo de una plataforma funcional que fomente la mejora personal y colectiva, el desarrollo de una interfaz minimalista que cumple con los estándares de accesibilidad y la implementación de medidas de seguridad que refuerzan la integridad del sistema.

85
00:12:55,919 --> 00:13:18,759
Para el largo plazo se han planteado diversas mejoras y actualizaciones en la plataforma, tales como la personalización del contenido sugerido mediante inteligencia artificial, la creación de un chat entre los miembros de la plataforma, la traducción de la web a múltiples idiomas y la migración de la aplicación a la nube para una mayor escalabilidad.

86
00:13:18,759 --> 00:13:34,820
Si alguna vez has tenido dudas de cómo empezar a mejorar tu vida, ahora ya sabes que en Enhanced Reach tienes todo el contenido y material necesario para dar este primer paso, pudiendo incluso mejorar en comunidad. Muchas gracias por su atención.

87
00:13:34,820 --> 00:13:54,710
Muchas gracias a ti Manuel. Y pasamos ahora a las preguntas. ¿Nos puedes mostrar el entorno de desarrollo para ver dónde está el código, cómo se puede modificar y ver el diseño de la base de datos?

88
00:13:55,710 --> 00:14:03,509
Sí, el código lo tengo por aquí en el Visual Studio Code. ¿Necesitas que te muestre algo en especial?

89
00:14:03,509 --> 00:14:12,250
no únicamente ver el entorno como se ha desarrollado sí pues aquí tenemos la el

90
00:14:12,250 --> 00:14:19,710
proyecto se divide en diferentes en directorios en este primer directorio de linux son los scripts

91
00:14:19,710 --> 00:14:26,070
empleados para la configuración de las máquinas virtuales por tanto no están relacionados como

92
00:14:26,070 --> 00:14:37,350
tal al proyecto a la página web y luego en él en el directorio public se encuentran alojados

93
00:14:37,350 --> 00:14:45,990
los assets en donde aparece todo el contenido css las hojas de estilo las fuentes empleadas

94
00:14:45,990 --> 00:14:52,110
las imágenes del proyecto tanto los avatares de los usuarios como las portadas de los libros

95
00:14:52,110 --> 00:15:20,990
Y las diferentes imágenes empleadas en la aplicación. Además, se incluye todo el código JavaScript de la aplicación, en donde se puede, por ejemplo, mostrar este código de inicio, donde hay código que se referencia del Intersection Observer para cuando el apartado de Conoce no sé si te lo puedo llegar a mostrar.

96
00:15:22,110 --> 00:15:43,649
Vale, pues esto es cuando estás haciendo scroll en la página, hay un apartado, este código detecta que el scroll ha llegado al viewport y entonces se muestra el contenido concretamente, para no mostrarlo de manera directa, únicamente cuando el usuario hace scroll.

97
00:15:43,649 --> 00:15:57,049
También se incluye en este apartado de la carpeta public el fichero index.php que contiene todas las rutas de la aplicación

98
00:15:57,049 --> 00:16:05,590
Por ejemplo, las rutas de los libros y las rutas de las publicaciones, es como los endpoints, por así decirlo

99
00:16:05,590 --> 00:16:24,799
Luego se incluye la carpeta SQL que incluye todo el código de la base de datos para la creación de las tablas y la inserción de todos los datos, incluyendo notificaciones, libros, autores, etc.

100
00:16:24,799 --> 00:16:51,759
En el directorio SRC se contiene toda la estructura modelo vista controlado. En la primera carpeta de controllers hay una clase main, una clase principal controller, encargada de gestionar y despachar las rutas y luego las diferentes subclases heredan de esta principal.

101
00:16:51,759 --> 00:17:14,920
Y aquí cada clase tiene asociada una tarea concreta. Este controlador, por ejemplo, es el encargado de gestionar las publicaciones. Hace la conexión con el modelo y se realizan las peticiones a la base de datos.

102
00:17:14,920 --> 00:17:24,140
Pasando a los modelos, pues igual incluye una clase principal de la conexión a la base de datos

103
00:17:24,140 --> 00:17:26,519
Y las demás clases se heredan de esta

104
00:17:26,519 --> 00:17:36,140
Por ejemplo, la clase de usuarios incluye todos los métodos para hacer las consultas a la base de datos

105
00:17:36,140 --> 00:17:43,420
Por ejemplo, obtener el rol de usuario, pues se hace la conexión a la base de datos y se hace un select de la tabla correspondiente

106
00:17:43,420 --> 00:17:52,519
En cuanto a las vistas, pues se han organizado las diferentes páginas que el usuario ve según las categorías

107
00:17:52,519 --> 00:18:01,339
Por ejemplo, en el directorio de libros podemos ver este fichero, esta vista de libros

108
00:18:02,240 --> 00:18:09,039
En donde aparece los diferentes filtros de la página

109
00:18:09,039 --> 00:18:17,059
así como un contenedor en donde se albergarán todos los libros obtenidos de la base de datos.

110
00:18:20,160 --> 00:18:34,519
También en este directorio de SRC se incluye el fichero RoutepHP, que es el encargado de gestionar las peticiones HTTP, ya sean GET o POST,

111
00:18:34,519 --> 00:18:43,319
y despachar la solicitud según sea el método utilizado.

112
00:18:44,339 --> 00:18:53,559
En cuanto al directorio de test, se incluyen las clases con las pruebas unitarias realizadas en cada apartado.

113
00:18:54,160 --> 00:18:58,539
En este caso son las pruebas unitarias sobre el apartado de publicaciones.

114
00:18:58,539 --> 00:19:04,980
Puesto que se ha utilizado PHP Unit y se han empleado mockups de las clases

115
00:19:04,980 --> 00:19:10,259
Esto ha permitido que no se modifiquen los datos reales

116
00:19:10,259 --> 00:19:14,380
Es hacer una simulación mientras se han realizado las pruebas unitarias

117
00:19:14,380 --> 00:19:20,900
Luego el directorio vendor es creado por Composer para albergar todas las dependencias

118
00:19:20,900 --> 00:19:26,980
Y en el directorio principal de la aplicación se incluye Gitignore

119
00:19:26,980 --> 00:19:40,779
que son los directorios excluidos al subir el proyecto a GitHub. Composer.json y Composer.log son los ficheros necesarios de Composer.

120
00:19:40,779 --> 00:19:48,440
El license.txt es el archivo de licencia, en este caso es una MIT license

121
00:19:48,440 --> 00:20:02,000
Y el readme es un fichero markdown en donde se explica el objetivo del proyecto, su instalación y justamente lo que estamos tratando en los directorios de la aplicación

122
00:20:02,000 --> 00:20:12,569
Muy bien, pues muchas gracias

123
00:20:12,569 --> 00:20:16,190
¿Tienes algo más que añadir?

124
00:20:16,470 --> 00:20:18,809
¿O algo que consideres oportuno?

125
00:20:19,509 --> 00:20:21,609
Antes de dar por finalizada la presentación

126
00:20:21,609 --> 00:20:24,849
No, puesto que ya me has comentado

127
00:20:24,849 --> 00:20:28,289
Antes que las notas iban a ser el 29-30

128
00:20:28,289 --> 00:20:30,809
No tengo ahora mismo ninguna objeción

129
00:20:30,809 --> 00:20:33,710
Venga, pues muy bien, muchas gracias

130
00:20:33,710 --> 00:20:35,809
Y damos por finalizada la presentación

131
00:20:35,809 --> 00:20:36,950
A ti Pablo