1
00:00:01,580 --> 00:00:20,300
Bueno, pues buenas tardes. Hoy es día 22 de mayo, son las 7 y 5, y bueno, estamos convocados a través de Jefatura del Departamento para la Defensa del Módulo Profesional del Proyecto del Ciclo Formativo de Grado Superior de DAO, Desarrollo de Aplicaciones Web.

2
00:00:20,300 --> 00:00:42,640
En el aula virtual de proyecto habéis sido informados de los criterios y rúbrica de la calificación. El orden de la presentación del proyecto es el siguiente. 15 minutos máximos para la defensa de tu proyecto, 15 minutos máximos por mi parte para hacerte preguntas y cuestiones y bueno, pues dicho esto, tu tiempo de exposición comienza a partir de este momento. Adelante y mucha suerte.

3
00:00:42,640 --> 00:00:59,759
Vale, pues buenas tardes. Soy María Priscila Pineda Lima y nada, voy a contar un poco sobre mi proyecto que, bueno, como nombre tiene, Clarity Hub, y es un gestor de tareas eficientes.

4
00:00:59,759 --> 00:01:10,920
¿Qué es Clarity Hub? Pues es una aplicación web sencilla, diseñada para la gestión de tareas personales

5
00:01:10,920 --> 00:01:20,579
Esto surge sobre todo de las necesidades que yo por ejemplo como usuaria siempre he utilizado muchos gestores de tareas

6
00:01:20,579 --> 00:01:34,280
pero muchas veces no son con demasiada carga de información, otros son de pago, no van a lo claro, a lo sencillo.

7
00:01:34,439 --> 00:01:46,659
Entonces, pues mi idea fue hacer una aplicación web que tenga lo justo y necesario y que además no tengas que tener una conexión a internet para poder utilizarla.

8
00:01:46,659 --> 00:02:06,780
Entonces, de ahí, como digo, los objetivos de esta aplicación. El objetivo principal era desarrollar este gestor de tareas de una forma que visualmente sea llamativa, accesible y eficiente.

9
00:02:06,780 --> 00:02:33,860
Y algunos de los otros objetivos más específicos, pues que tuviera, lo que he comentado antes, que se pudiera usar sin conexión a internet con el uso de local storage, que tenga un diseño moderno y que se pueda adaptar sobre todo también tanto en las páginas web, o sea, en ordenadores como en pantallas de otros tamaños, tablet, móvil y demás.

10
00:02:33,860 --> 00:02:48,780
También utilizar notificaciones desde la API del navegador y que sea funcional y sencilla y clara.

11
00:02:48,780 --> 00:02:55,219
Dentro de las tecnologías y herramientas que he utilizado

12
00:02:55,219 --> 00:02:59,639
En la parte de front he utilizado sobre todo Angular

13
00:02:59,639 --> 00:03:04,680
JavaScript, TypeScript, Angular Materia, CSS, HTML

14
00:03:04,680 --> 00:03:08,520
Todo para la parte de lógica y visual

15
00:03:08,520 --> 00:03:13,300
Para ello he utilizado herramientas como Visual Studio Code

16
00:03:13,300 --> 00:03:15,979
Angular Clip y Git y GitHub

17
00:03:15,979 --> 00:03:24,379
para para sobre todo de tener un control de los pasos que iba haciendo y bueno si en el caso de

18
00:03:24,379 --> 00:03:30,740
tener que volver atrás y demás bueno pues para tener las diferentes versiones vaquen como he

19
00:03:30,740 --> 00:03:38,120
dicho mi objetivo era realizar no utilizar hacer algo sencillo personal y que puedas usarlo en tu

20
00:03:38,120 --> 00:03:46,879
propio ordenador y no era necesario una base de datos y lo que utilizaba lo que he utilizado es

21
00:03:46,879 --> 00:03:52,879
el propio locales torres y para la parte de la interfaz visual como he dicho también angular

22
00:03:52,879 --> 00:04:06,599
material vale pues el diseño de clarity hub ha sido en una sola es una estructura modular que

23
00:04:06,599 --> 00:04:14,860
Esto quiere decir que está utilizado diferentes bloques, diferentes módulos

24
00:04:14,860 --> 00:04:20,800
y está todo organizado en una única carpeta, por así decir,

25
00:04:20,800 --> 00:04:24,860
para que se pueda entender, en la que está dividida la parte lógica,

26
00:04:24,980 --> 00:04:30,379
que sería la app-component.ts, que es esa parte lógica,

27
00:04:30,379 --> 00:04:42,680
HTML para esa parte estructural y visual y la carpeta de CSS para poder poner los estilos,

28
00:04:43,100 --> 00:04:45,220
tanto generales como específicos.

29
00:04:46,259 --> 00:04:52,180
Y dentro de esa parte visual, de diseño, que es lo que le he dedicado bastante tiempo,

30
00:04:52,180 --> 00:04:56,819
Bueno, he utilizado Angular Material

31
00:04:56,819 --> 00:05:00,779
Y dentro de ello, por ejemplo, he utilizado

32
00:05:00,779 --> 00:05:05,300
MatToolBad, que es para la cabecera

33
00:05:05,300 --> 00:05:09,379
Del navegador, el MatForm para los formularios

34
00:05:09,379 --> 00:05:12,560
Que ya os enseñaré, y bueno, así

35
00:05:12,560 --> 00:05:16,980
Para el MatIcon, MatButton, y eso lo puedo ir explicando

36
00:05:16,980 --> 00:05:20,519
Ahora cuando vaya enseñando la propia aplicación

37
00:05:20,519 --> 00:05:41,709
Vale, las funcionalidades que he implementado en esta aplicación son las que he considerado que eran las esenciales, como crear, editar y eliminar tareas, agregar subtareas, poder tener categorías de tareas,

38
00:05:41,709 --> 00:06:05,310
tanto si es personal, de trabajo, de estudio y que tenga también diferentes filtros que lo puedas poner, por ejemplo, por fecha de creación o por prioridad o por categorías, que puedas hacer un filtrado y ver únicamente lo que realmente te interesa en ese momento.

39
00:06:05,310 --> 00:06:11,430
Otras de las funcionalidades, como he dicho, son los recordatorios de notificaciones locales

40
00:06:11,430 --> 00:06:14,970
Y bueno, los filtros y órdenes que he comentado ya

41
00:06:14,970 --> 00:06:20,910
Otras de las funcionalidades que puedes ver en las imágenes

42
00:06:20,910 --> 00:06:24,009
Es que he agregado también un modo

43
00:06:24,009 --> 00:06:27,490
La aplicación se basa en un modo claro

44
00:06:27,490 --> 00:06:30,529
Pero también le he puesto para que pueda ser algo un poco más visual

45
00:06:30,529 --> 00:06:32,810
Tenga la opción de modo oscuro

46
00:06:32,810 --> 00:06:46,870
Y se puede poner tanto en vista de lista como en vista de cuadrícula. Y ahí en la última foto vemos un ejemplo de cómo se vería adaptada a un tamaño de un móvil habitual.

47
00:06:46,870 --> 00:07:19,259
Vale, pues Clarity Hub no solo se centra en eso, también está pensado con una base sólida para que pueda ir creciendo a lo largo del tiempo y poder hacer de esta pequeña base sólida una aplicación mucho más robusta y poder llegar a diferentes vías de mejora, por así decirlo.

48
00:07:19,720 --> 00:07:45,019
Entonces, algunas de esas vías de mejoras que yo puedo proponer para un futuro, por ejemplo, sería la sincronización en la nube. Es verdad que yo pretendía poner que no tuviera un backend como tal en esta primera fase, pero sí que se podría agregar que las tareas se guarden en la nube para poder abrirlas desde otro ordenador.

49
00:07:45,019 --> 00:07:59,079
Si no, una de las limitaciones que tendría sería que solo es a nivel personal y se pueden guardar esas tareas solo en tu propio ordenador. Entonces, hay cosas que beneficia y cosas que, bueno, en un futuro se podrían ampliar.

50
00:07:59,079 --> 00:08:11,060
También se podría hacer como una gestión múltiple de usuarios, esto podría venir bien como para que si tú estás con compañeros de estudio, por ejemplo, compartir tareas

51
00:08:11,060 --> 00:08:17,540
Que uno se dividan y puedan, bueno, pues eso, dividirse un poco el trabajo y demás

52
00:08:17,540 --> 00:08:24,740
Aunque la aplicación está adaptada a las pantallas de móvil, por ejemplo

53
00:08:24,740 --> 00:08:31,800
Sí que se podría adaptar de una forma un poco más profunda

54
00:08:31,800 --> 00:08:36,340
Con algunas aplicaciones específicas para aplicaciones móviles

55
00:08:36,340 --> 00:08:37,799
Como IONI, por ejemplo

56
00:08:37,799 --> 00:08:42,620
Y bueno, se podría también poner calendarios

57
00:08:42,620 --> 00:08:45,519
Al final las notificaciones son a nivel local

58
00:08:45,519 --> 00:08:58,340
pero se podrían integrar con calendarios externos como Google Calendar y que esas notificaciones también te puedan llegar a través de otras partes.

59
00:08:58,340 --> 00:09:28,350
Bueno, y por último, hablar un poco de las conclusiones a las que llego con esta publicación. Creo que lo que me he planteado, al final, todos los objetivos que he ido teniendo, o sea, que he ido poniendo, los he alcanzado.

60
00:09:28,350 --> 00:09:53,570
Y bueno, al final he podido poner en práctica los conocimientos que yo anteriormente también tenía de Angular y muchas veces, aunque yo estoy trabajando en esto, muchas veces te metes en un proyecto a hacer unas correcciones

61
00:09:53,570 --> 00:10:00,029
o hacer cosas desde un punto donde otro programador lo ha dejado.

62
00:10:00,509 --> 00:10:03,909
Entonces a mí esto me ha servido también mucho para poder hacer algo

63
00:10:03,909 --> 00:10:06,009
desde un inicio hasta un final.

64
00:10:06,610 --> 00:10:10,570
Entonces para mí ha sido también un logro de poder guiarme yo misma,

65
00:10:11,570 --> 00:10:16,929
poner las pautas, los objetivos y poder ir avanzando y consiguiendo poner eso en práctica

66
00:10:16,929 --> 00:10:21,970
todo lo que he aprendido hasta ahora.

67
00:10:23,570 --> 00:10:37,269
vale y si te parece bien tengo aquí el enlace para poder demostrar la aplicación vale y a ver

68
00:10:44,210 --> 00:10:54,850
vale estás viendo la pantalla perfecto vale vale pues esta sería la pantalla principal

69
00:10:54,850 --> 00:11:13,909
Aquí sí que se pueden ver algunas modificaciones respecto a las imágenes que había puesto en el PDF, porque es una pantalla de ordenador un poco más pequeña, ¿vale? Entonces, se recolocan un poco los filtros, los botones, ¿vale?

70
00:11:13,909 --> 00:11:37,399
Entonces, voy a hacer una demostración, ¿vale? Creando una tarea. Vale, aquí no sé por qué me sale un poco más grande el formulario de lo habitual, pero bueno.

71
00:11:37,399 --> 00:12:18,320
Vale, perdón.

72
00:12:18,340 --> 00:12:23,200
sí qué tipo de prioridad tiene la tarea vale yo la voy a poner en alta en este caso

73
00:12:27,549 --> 00:12:43,659
vamos a poner sí que es una notificación para hoy son las 17 las 19 17 pues voy a poner las 19 10 y

74
00:12:43,659 --> 00:12:46,179
nueve, ¿vale?

75
00:12:48,779 --> 00:12:50,620
Diecinueve, para que dé tiempo.

76
00:12:51,460 --> 00:12:57,740
Y aquí está lo que comentaba, las categorías, tanto de trabajo, personal, estudio, ¿vale?

77
00:12:57,860 --> 00:12:59,259
Y añadimos la tarea.

78
00:13:00,600 --> 00:13:02,899
Aquí estaría la tarea, ¿vale?

79
00:13:03,039 --> 00:13:12,340
Con su prioridad, el color rojo, las demás tendrían color amarillo o verde según su prioridad, ¿vale?

80
00:13:12,340 --> 00:13:36,889
Y aquí tenemos las diferentes opciones, como agregar subtareas, lengua, por ejemplo, ¿vale? Tanto la tarea en sí se puede editar o eliminar, igual que las subtareas, ¿vale? O modificar.

81
00:13:36,889 --> 00:13:52,629
Y aquí podemos ver la notificación que teníamos, las 19.19, que queda unos segundos o un minutillo para que salte, y la categoría que le hemos puesto.

82
00:13:52,629 --> 00:14:17,629
Esto, como comentaba, tiene los diferentes filtros, tanto pendientes como completadas, y los filtros de categorías, que en este caso si ponemos otro no tendríamos nada, y ordenar también por fecha de creación o prioridad.

83
00:14:17,629 --> 00:14:23,070
también la parte de lista o cuadrícula aquí como vemos se ha modificado porque

84
00:14:23,070 --> 00:14:29,710
lo estamos viendo en en lista y se modifica luego si no ponemos

85
00:14:29,710 --> 00:14:37,240
podemos poner otro para verlo vale

86
00:14:37,240 --> 00:14:47,600
la notificación no sé por qué no sé si es que no no sé si es que esta me salta

87
00:14:47,600 --> 00:14:53,440
en otra pantalla o qué y si no hacemos ahora otra otra prueba

88
00:14:53,440 --> 00:14:58,980
vale y esto que íbamos a mostrar pues las completadas y que aparecerían

89
00:15:01,659 --> 00:15:08,960
vale lo mismo pues con el modo oscuro vale se verían los colores más

90
00:15:11,100 --> 00:15:12,419
bueno más apagados

91
00:15:12,419 --> 00:15:17,139
Y bueno, más o menos

92
00:15:17,139 --> 00:15:20,700
¿Vale? Y con esto

93
00:15:20,700 --> 00:15:22,460
Más o menos

94
00:15:22,460 --> 00:15:24,759
Pues es la demostración un poco de la aplicación

95
00:15:24,759 --> 00:15:29,259
No sé si

96
00:15:29,259 --> 00:15:30,960
Si tienes alguna duda

97
00:15:30,960 --> 00:15:32,259
O si quieres

98
00:15:32,259 --> 00:15:33,539
Alguna preguntilla

99
00:15:33,539 --> 00:15:36,559
Te comento, estoy viendo que lo estás utilizando

100
00:15:36,559 --> 00:15:37,820
En un Apple, ¿no?

101
00:15:38,279 --> 00:15:40,740
Entonces, mira, una pregunta era esa

102
00:15:40,740 --> 00:15:42,159
Si valía solo para Windows

103
00:15:42,159 --> 00:15:59,779
Sí, hay algunos pequeños matices, como por ejemplo la notificación, que veo que no me ha saltado bien y que puede ser que esté influyendo eso.

104
00:15:59,779 --> 00:16:15,620
La verdad es que mi ordenador solo es Windows y aunque lo he probado en el móvil y demás, sí que me saltaba, pero es posible que sea uno de los inconvenientes con Apple.

105
00:16:15,620 --> 00:16:35,679
Vale, una pregunta era esa y también lo de los avisos. También con respecto a lo de los avisos, si solo has probado a lo mejor en Windows, ¿has llegado a probar si o podría ser una mejora futura que se pudieran implementar en una aplicación externa?

106
00:16:35,679 --> 00:16:44,000
¿Que nosotros tengamos una aplicación externa de avisos y poder implementar, fusionar lo que es tu aplicación con esa aplicación de avisos?

107
00:16:44,080 --> 00:16:47,919
¿O al menos crees que podría ser posible en una aplicación futura?

108
00:16:50,179 --> 00:16:52,039
No sé si te estoy entendiendo bien.

109
00:16:52,559 --> 00:16:59,059
La aplicación, sí, los avisos como tal, las notificaciones, tú aquí lo configuras y...

110
00:16:59,059 --> 00:17:09,519
Ah, para que sean, sí, como un aviso en el propio navegador, pero sí que se podría hacer que ese aviso sea no con el propio navegador,

111
00:17:09,519 --> 00:17:23,740
pero sí que agregar una parte de alguna otra manera, sí que podría ser una mejora y sería factible que se pudiera hacer de una manera diferente para que no solo dependa de eso.

112
00:17:23,740 --> 00:17:42,839
Vale. Y luego, bueno, estoy viendo que lo tienes en un GitHub, ¿cómo se diga? Y ahora mismo, bueno, lo tienes como compartido, digamos, de alguna manera para que tanto tú como yo, que lo he podido probar, accedamos a ello.

113
00:17:43,160 --> 00:17:49,720
Pero como decías que es una aplicación en local, ¿cómo te lo descargarías en local?

114
00:17:49,720 --> 00:18:11,160
Sería tal cual con ese, sería como un enlace, o sea, lo tendrías como en tu cuenta de navegador, no sé si me explico.

115
00:18:12,460 --> 00:18:16,480
Pero es que como no he visto una gestión de usuarios como tal, o sea…

116
00:18:16,480 --> 00:18:28,920
Claro, bueno, es que eso es verdad que solo está hecho, en principio solo está hecho esta primera fase, por así decirlo, que sea algo personal, es algo individual.

117
00:18:28,920 --> 00:18:42,519
Entonces lo tienes tú en tu propio ordenador, pero sí que he pensado que para algunas otras de las mejoras que podría hacer sería ponerle un login para que pueda hacer algo más individual

118
00:18:42,519 --> 00:18:49,960
y cada uno pueda conectarse con su propio mail, por ejemplo, su propia contraseña

119
00:18:49,960 --> 00:18:56,299
y que cada persona pueda usarlo de esa manera y no solo esté en tu ordenador.

120
00:18:57,559 --> 00:19:10,019
Vale, vale. Es que, ves, por ejemplo, yo ahora estoy accediendo y, bueno, pues en realidad no veo la que tú has creado, o sea, no es como…

121
00:19:10,019 --> 00:19:14,279
No, porque es personal. Esto solo se guarda en el ordenador y solo lo puedo ver yo.

122
00:19:14,920 --> 00:19:20,039
Si tú abres la aplicación, es como que vuelve a cero.

123
00:19:20,900 --> 00:19:23,599
Es algo solo de cada ordenador.

124
00:19:24,200 --> 00:19:29,019
Yo si, por ejemplo, apago el ordenador y mañana vuelvo a entrar, mi tarea está.

125
00:19:29,720 --> 00:19:30,000
Vale.

126
00:19:30,700 --> 00:19:32,440
Pero no vería la de nadie más.

127
00:19:32,440 --> 00:19:38,099
Aunque no gestione usuarios, más o menos sí gestiona al final que sea particular, porque lo guarda el local.

128
00:19:38,460 --> 00:19:39,240
Claro, exacto.

129
00:19:39,420 --> 00:19:39,779
Vale.

130
00:19:40,019 --> 00:20:03,059
Vale, bueno, pues tener también así un poquillo, no entendía tampoco muy bien como lo del uso del servidor local que mencionas en el, que accedes al localhost con el puerto 4200 que mencionas en el trabajo, no entiendo muy bien que funciona.

131
00:20:03,059 --> 00:20:07,339
Claro, esto es simplemente para poder levantar la aplicación.

132
00:20:07,880 --> 00:20:15,539
Yo, para, esto sí que es en el GitHub, pero yo para desarrollar la aplicación,

133
00:20:15,660 --> 00:20:19,339
a lo que me refería era eso, en el momento del desarrollo de la aplicación,

134
00:20:19,339 --> 00:20:23,839
para poder ir yo viendo los cambios a tiempo real que he ido haciendo,

135
00:20:25,019 --> 00:20:31,400
lo que tiene el Visual Studio es que puedo levantar esa aplicación

136
00:20:31,400 --> 00:20:37,519
y poder verlo en mi local store, por así decirlo,

137
00:20:37,519 --> 00:20:41,839
en lo que tú has dicho del 42, 40.200, ¿vale?

138
00:20:41,859 --> 00:20:43,799
Que es donde normalmente se levanta la aplicación

139
00:20:43,799 --> 00:20:45,960
y yo entonces, yo todos los cambios que he ido haciendo,

140
00:20:46,339 --> 00:20:47,799
he podido verlos a tiempo real.

141
00:20:47,940 --> 00:20:49,660
Entonces, a mí me facilita mucho el trabajo

142
00:20:49,660 --> 00:20:52,559
porque vas viendo todo lo que vas creando,

143
00:20:52,660 --> 00:20:53,859
los errores vas probando.

144
00:20:54,400 --> 00:20:58,680
Entonces, así al final vas viendo sobre, pues eso,

145
00:20:58,700 --> 00:21:00,380
a tiempo real todo lo que vas creando

146
00:21:00,380 --> 00:21:08,640
y si tienes que hacer alguna modificación antes de que veas que algo no funciona, o sea, que lo puedes ver en el momento.

147
00:21:09,059 --> 00:21:15,579
Vale, o sea, que primero lo has implementado ahí y luego ya lo has subido al GitHub, ¿no?

148
00:21:16,259 --> 00:21:17,500
Exacto, exacto.

149
00:21:17,579 --> 00:21:28,740
Vale, vale. Vale, pues bueno, no tengo más preguntas. En principio ya he visto que has corregido todas las indicaciones que te dije y nada, pues está bien.

150
00:21:30,380 --> 00:21:43,460
Estate tranquila, bueno pues si quieres cortamos por aquí la grabación porque esto es suficiente y dame un segundito, gracias por tu exposición, dame un segundín.

151
00:21:44,079 --> 00:21:44,259
Sí.