Saltar navegación

Defensa_Proyecto_Adam_Lorenzo_DAW

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 7 de mayo de 2025 por Víctor Borja M.

1 visualizaciones

Más información Transcripción

Descargar la transcripción

Hola, buenas tardes. Hoy, día 7 de mayo, a las 6.25 horas, estamos convocados a través de Jefatura de Departamento para la Defensa del Módulo Profesional de Proyecto del Ciclo Formativo de Grado Superior de DAU. 00:00:01
Te informo de que esta defensa está siendo grabada, 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 evaluadores en el aula virtual para llevar a cabo la evaluación y calificación de la defensa del proyecto. 00:00:17
En el aula virtual de proyectos habéis sido informados de criterios de evaluación y rúbrica. El orden de la presentación de proyectos será el siguiente, 15 minutos para la defensa del proyecto y 15 minutos para preguntas por parte del tribunal. En este caso sería yo. 00:00:31
Dicho esto, tu tiempo de exposición comienza a partir de este momento. Adelante y mucha suerte. 00:00:49
Vale, muchas gracias. Pues hola, soy Edda Lorenzo Gómez, no sé si debo presentarme, pero bueno, alumno del grado superior de Desarrollo de Aplicaciones Web y este es mi proyecto, que lo he titulado Desarrollo de Plataforma Web Escalable con Panel de Control. 00:00:56
Mi tutor ha sido Víctor Borja Martín 00:01:15
Y bueno, procedo a ello 00:01:19
Bueno, esto es solo el índice 00:01:22
Que aparecen los puntos que se van a comentar 00:01:27
Y bueno 00:01:31
¿En qué consiste el proyecto? 00:01:32
Pues el proyecto consiste 00:01:35
En una aplicación web o una página web 00:01:38
O un sitio web 00:01:41
que podría decirse que es como una red social 00:01:43
en la que el objetivo principal es en el que los usuarios 00:01:47
al igual que en otras redes sociales como TikTok, YouTube y tal 00:01:54
al final son los que suben el contenido 00:01:57
pero obviamente también pueden verlo 00:02:00
así que por un lado el proyecto se ha dividido en los usuarios 00:02:03
que son los que entran a la web y pueden ver los vídeos, filtrarlos y además añadir nuevos aportes mediante un formulario. 00:02:12
Y luego, por otro lado, otra parte importante del proyecto sería el panel de administrador, 00:02:20
que se compone de un sitio donde los vídeos que se han enviado los usuarios tienen que ser aprobados o rechazados. 00:02:26
O sea, los vídeos que mandan los usuarios no aparecen, por así decirlo, a todo el mundo hasta que ha pasado por un equipo de moderación o administración. Los administradores también pueden modificar los vídeos que han sido aceptados, por ejemplo, alguna errata o incluso jamberle la categoría o eliminarlos más adelante también si procede. 00:02:35
procede. También pueden gestionar los usuarios, que en este caso solo son usuarios de administrador 00:02:56
o moderación, pero bueno, los puedes añadir, eliminar o editar también. Y también puedes 00:03:02
añadir o eliminar categorías y subcategorías, que son la forma de, aunque sea redundante, 00:03:07
categorizar los vídeos. Para acceder al panel admin, se accede mediante un sistema de login 00:03:14
al que se accede por url no hay por así decirlo un acceso directo desde el home o el index para 00:03:22
acceder al login sino que se accede directamente poniendo en la url el login esto al principio 00:03:30
pensé en poner un acceso y tal pero como es sólo para administradores pues pensé al estilo de 00:03:37
wordpress que tú cuando una página está hecha con wordpress pones en la propia url w admin creo que 00:03:43
Y te lleva al panel de inicio de sesión. Los usuarios a día de hoy no pueden iniciar sesión, pero bueno, eso es una de las mejoras que se podrían implementar en el futuro y que se han planteado, pero bueno, al final nos ha llevado por falta de tiempo y esas cosas. 00:03:51
Y en resumen sería eso, en lo que consiste la página web. Por un lado los usuarios que pueden ver vídeos, buscar vídeos, además de añadir aportes. Y luego por otro lado los administradores que son los que aceptan o rechazan esos vídeos y administran el sitio en general. 00:04:09
Eso serían como las dos partes, igual de importantes, pero bueno, se distingue muy claramente una de otra. 00:04:26
Y en general el proyecto sería eso. Vale, ahora pasamos a la metodología. 00:04:35
Para el proyecto se ha usado una metodología ágil, es decir, se ha enfocado el proyecto en distintas fases y se ha hecho hincapié en la mejora continua, 00:04:44
adaptándome a lo que me iba encontrando y mejorando sobre todo lo que ella iba haciendo. 00:04:55
Se ha hecho un enfoque, aunque también está incluido dentro de la metodología ágil, 00:05:03
incremental porque el proyecto se ha dividido en bloques o mini proyectos, 00:05:08
es decir, no se hacía como todo a la vez, obviamente tampoco se pueda, 00:05:11
pero se ha ido haciendo de modo que se establecía primero el objetivo de, 00:05:19
Por ejemplo, crear el login o, bueno, en este caso fue primero el index. Una vez el index funciona y aparecen los vídeos, se da como por finiquitado, entre comillas, ese bloque y pasamos al siguiente que a lo mejor era la creación del login. 00:05:24
una vez el login funciona, pues hemos pasado 00:05:40
por ejemplo al panel admin, en este caso 00:05:42
pero también 00:05:44
el proyecto o la metodología que se ha usado 00:05:46
es iterativa, porque todo lo que 00:05:48
se ha ido haciendo, no es como que se le pusiese 00:05:50
el punto final, sino que se ha ido revisando, porque a lo mejor 00:05:52
encontraba una forma 00:05:54
mejor de hacerlo, o podía optimizar 00:05:56
más el código 00:05:58
o no sé, si me ocurría 00:05:59
algo y lo podía mejorar, o podía 00:06:02
reutilizar algo de código que he creado en una 00:06:04
función que al principio pensaba que iba a ser como muy concreta 00:06:06
para una página y luego he visto que la podía reutilizar 00:06:08
y así he creado una función y la he reutilizado en más sitios. 00:06:11
Así que, bueno, esa es la metodología que se ha llevado 00:06:16
hasta que se ha terminado, aunque, bueno, incluso habiéndose terminado 00:06:18
se pueden añadir, seguir añadiendo cosas y demás. 00:06:21
Las tecnologías y herramientas que se han utilizado 00:06:29
son las que aparecen por pantalla, que en este caso son HTML 00:06:32
para darle estructura 00:06:37
o un esqueleto al código 00:06:40
CSS para darle 00:06:43
estilo y diseño visual, Javascript 00:06:46
que en este caso no se ha utilizado 00:06:49
ningún framework ni nada y se ha utilizado 00:06:52
lo que se llama Javascript vanilla que es Javascript puro 00:06:54
eso, sin ayuda de framework ni nada 00:06:58
y bueno, ahora que también he mencionado el HTML 00:07:01
es, aunque también lo resaltaré más adelante 00:07:04
La web obviamente lleva HTML, pero no lleva mucho HTML. ¿Por qué? Porque la mayoría se ha generado de forma dinámica mediante el DOM de JavaScript. Se han generado dinámicamente los propios elementos mediante las etiquetas o herramientas o funcionalidades como Create Element y ahí creamos un input o una tabla, cosas así. 00:07:07
Luego también se ha utilizado PHP para el backend, al igual que las tres primeras se orientan más al frontend, PHP para el backend, que sirve para gestionar toda la lógica de backend, interacción con la base de datos y eso. 00:07:31
Luego, SQL para comunicarnos con, bueno, no para comunicarnos con la base de datos, pero bueno, el lenguaje utilizado para interaccionar con la base de datos, a los cuales los llamamos desde PHP, pero claro, con sentencias SQL de normales. 00:07:48
Luego 00:08:02
Como framework 00:08:05
El único que se ha utilizado es Bootstrap 00:08:08
Básicamente para no tener que crear un CSS desde cero 00:08:10
Y porque con su sistema de rejilla 00:08:15
Nos ha ayudado mucho el responsive 00:08:17
Tiene muchos estilos que vienen muy bien 00:08:20
También tiene funcionalidades como los modales 00:08:23
Que se llaman, que son como ventanas 00:08:27
No emergentes, porque al final es el usuario el que elige 00:08:29
cuando se abren pero bueno son como ventanas que se ponen encima del html en este caso en la que 00:08:31
pues podría aparecer pues en este caso en la página pues vídeos o formularios y también se ha utilizado 00:08:38
bootstrap icons que también es una librería que hay que importar al proyecto que también está hecha 00:08:45
por bootstrap y pues básicamente nos aporta una serie de iconos que además se adaptan a bootstrap 00:08:52
Y pues, no sé, se pueden utilizar para representar usuarios o para íconos de redes sociales y demás. 00:08:59
También, aunque no lo meto aquí en esta diapositiva, se ha utilizado una librería externa que se llama Sweet Alert, que básicamente sirve para poner como pop-ups, eso sí que lo definiría como un pop-up, de alertas para usuarios o para los administradores. 00:09:08
Por ejemplo, cuando actualizas un usuario, se hace la petición entre el JavaScript y el PHP y si el resultado es exitoso o no, sale una ventana de si ha actualizado correctamente o no se ha actualizado correctamente. 00:09:25
Básicamente para eso. 00:09:39
Luego también MySQL, que se ha utilizado como gestor de base de datos para almacenarla. 00:09:42
Solo un apunte, Adam, llevamos un poco de tiempo para que sepas. 00:09:51
¿Mitad del tiempo? Vale, se ha utilizado, bueno, YouTube como tal no se ha utilizado, pero al final es la API para la que hemos obtenido los datos y porque hemos utilizado su sistema de E-Frame para visualizar los vídeos. 00:09:55
Github para el repositorio y para el control de versiones y Visual Studio como, ahí no me sale la palabra, para editos de código. Perdón, le meto el turbo. 00:10:13
Los recursos, pues a nivel casero lo he hecho yo solo en un ordenador que me tuve que comprar con las propiedades de G7 y en un entorno local. 00:10:26
Los tiempos son un poco los que se ven aproximadamente en esa imagen 00:10:37
Luego también estas imágenes y la mayoría de estos datos también están en la memoria para consultarlos 00:10:42
Y bueno, un poco los tiempos que se han llevado son estos 00:10:46
A nivel económico pues lo he hecho todo gratis y me tuve que comprar un portátil de 400 euros 00:10:49
Luego en un entorno real se profundiza más en la memoria 00:10:54
Para el diseño, una vez obtenida la API de YouTube 00:10:59
y visto que todo se puede realizar, creadas las variables de entorno, la conexión a base de datos, pues lo que se hizo fue crear la base de datos. 00:11:05
Son cinco tablas, podrían haber sido tres, bueno, no, cuatro. Cada una con una función distinta y es verdad que la de vídeos aprobados y vídeos pendientes 00:11:18
Podría haber sido una sola tabla en la que se distinga mediante un campo adicional que unos vídeos están aprobados o no, mediante un campo boleano, un check o lo que sea. Pero se decidió hacerlo en dos tablas distintas para separar de forma más clara la lógica entre una y otra. 00:11:26
Luego, como parte también del diseño, pues se ha utilizado el modelo vista controlador 00:11:44
Porque estaba familiarizado, lo conocía y tal 00:11:53
Los modelos definen los datos de la aplicación 00:11:55
Hay uno por tabla, además de uno extra, que lo he llamado functions 00:12:00
Que es básicamente un modelo que crea funciones que luego las demás pueden heredar 00:12:05
En ese sentido, los modelos tienen un formato muy similar al de las clases de Java. Luego, las vistas para mostrar los datos y los controladores para gestionar los datos, para pasarlos a las vistas y para consultar a SQL y luego para actualizar también cuando se comunique mediante las funciones asíncronas de JavaScript con el frontend o con el backend. 00:12:12
y luego pues la codificación de todo el código 00:12:39
más o menos una vez estaba ya el SQL de todo hecho 00:12:43
donde se puede destacar lo que he comentado ya de los modelos 00:12:46
que al final son muy similares a lo que es una clase de Java 00:12:49
en el proyecto también como he mencionado 00:12:52
hay muy poquito HTML, casi todo es 00:12:56
generado mediante el DOM de JavaScript 00:12:58
las funciones asíncronas que hay bastantes 00:13:01
para comunicar el frontend con el backend 00:13:05
ya sea cuando se actualiza una tabla, cuando se eliminan unos datos, cuando se acepta un vídeo, lo que sea, todo eso se hace mediante una función asincrona 00:13:08
que se envía desde el frontend hasta el backend, que se comunican con los endpoints, que son las funciones del backend, que reciben los datos y gestionan ya los datos. 00:13:17
Las vistas comparten todas el mismo layout para evitar la repetición de código, sobre todo para no tener que importar de nuevo librerías o el CSS, 00:13:27
O, por ejemplo, todas comparten el mismo header y el mismo footer. Y así lo haces todo en el mismo sitio y lo único que haces es cambiar el contenido y el JavaScript que toque en esa vista. Y, al final, el diseño es minimalista, sencillo, intuitivo y responsive porque es verdad que no tiene un diseño, a lo mejor, muy logo, pero es muy simple, fácil de usar y todo esto también le hace un poco a post-trap. 00:13:36
Os quedan dos minutos. 00:13:59
Uff, guapos 00:14:00
Lo hacemos tan complicado 00:14:01
Los aspectos legales, un poco los que se ven 00:14:03
en pantalla, esto se me olvidó 00:14:06
comentarlo hasta que tú me lo dijiste, lo añadí a la memoria 00:14:08
YouTube permite 00:14:10
que se usen los vídeos siempre y cuando 00:14:12
sea mediante su reproductor 00:14:14
y se adjudique los derechos 00:14:15
al autor original 00:14:18
y bueno 00:14:19
todas las contraseñas están cifradas 00:14:21
las cookies 00:14:24
la verdad que no se añaden, pero bueno 00:14:26
las que haya de YouTube terceros 00:14:28
El contexto laboral. Se puede utilizar en un montón de contextos debido a la creciente importancia del contenido multimedia de las redes sociales. 00:14:30
Es verdad que este proyecto se ha enfocado al ocio, pero bueno, se podría haber enfocado a la educación, a medios de comunicación, videojuegos y un montón de plataformas de distintos tipos, 00:14:42
las que sean los usuarios los que suben el contenido y haya un equipo de moderación que dice esto sí, esto no, por así decirlo. 00:14:50
Respecto a las mejoras futuras, la mayoría no se han implementado por falta de tiempo o recursos o conocimientos. Algunas me las comentó el tutor Borja, otras simplemente se me han ido ocurriendo a mí, como son el sistema de reportes para que los usuarios digan este vídeo es inapropiado o este vídeo ha caducado porque ya no está en YouTube. 00:14:59
panel de estadísticas 00:15:15
para administradores, sistema de registro 00:15:18
donde los usuarios pueden almacenar sus videos favoritos 00:15:20
o tal, sistema de notificaciones 00:15:22
para que un usuario cuando se le ha aceptado un video 00:15:24
le llegue un email, ese tipo de cosas 00:15:26
este video 00:15:27
creo que daba como dos minutos y medio 00:15:30
así que paso directamente a la demostración 00:15:31
donde tenemos por ejemplo 00:15:33
o sea, este sería el home 00:15:38
con un footer genérico 00:15:39
con videos y tal 00:15:43
después de ver el video 00:15:44
puedes recuperar el volumen gracias a la API de 00:15:47
YouTube, lo puedes detener 00:15:49
empezar otro 00:15:51
luego aquí puedes 00:15:53
buscar, por ejemplo, hay uno que tiene la palabra 00:15:55
parque, pues le damos a filtrar 00:15:57
y lo que aparece es parque 00:15:59
restablecemos, ahora queremos ver solo 00:16:01
los que son de ocio, por ejemplo 00:16:03
creo que no hay ninguno, mira, hay uno, el mismo 00:16:05
y así, ¿qué otras opciones 00:16:07
tenemos? Tengo aquí un video preparado para 00:16:09
compartirlo aleatorio, tú como usuario 00:16:11
puedes llegar, darle aportes 00:16:13
tienes que pasar la URL 00:16:15
un título el que sea, voy a poner hola para ser más rápidos, categoría la que sea, subcategoría y descripción son opcionales, son voluntarios, se avisa al usuario y ahora habría que pasar al sistema de login donde por ejemplo si no metemos las cosas pues no nos deja, si por ejemplo metemos un usuario que tampoco existe tampoco nos deja, 00:16:17
Así que habría que poner el completo. Y aquí, por ejemplo, lo que acabamos de crear es este. Aquí tú como administrador podrías ver el vídeo, lo que sea, juzga si te parece bien y lo puedes o rechazar o aceptar. Lo aceptamos y ahora, por ejemplo, si nos ponemos aquí a gestionar vídeos, vemos que el que acabamos de agregar aparece. 00:16:45
Nosotros aquí como administradores podríamos cambiarle la categoría, podríamos volver a verlo, le podemos añadir descripción, hola nos parece muy genérico así que ponemos hola 2 y se actualiza también, incluso podemos eliminarlo si no nos gusta porque ya no nos parece bien. 00:17:11
Los usuarios, lo mismo 00:17:28
Desde aquí también podemos crear usuarios 00:17:30
Con la particularidad, por ejemplo 00:17:33
De que si creamos 00:17:35
Uno 00:17:37
Con un correo que ya existe 00:17:38
Nos salta el chivato 00:17:40
Porque al final el campo de inicio de sesión es este 00:17:41
Este es el usuario, aunque este sea el nombre 00:17:44
Y aquí ponemos lo que sea 00:17:46
Pero no nos va a dejar porque 00:17:48
Este campo que es único en la base de datos 00:17:50
Pues ya nos echa para atrás 00:17:52
Es verdad que si por ejemplo hacemos esto 00:17:53
Pues sí que nos va a dejar porque 00:17:55
tal, la vista se 00:17:57
autoriza automáticamente, no hemos tenido que refrescar 00:18:01
por ejemplo, pero si refresco vemos que efectivamente ya se había 00:18:03
creado y las categorías es un poco lo mismo, podemos 00:18:07
añadirlas, eliminarlas, editarlas, por ejemplo creamos esta 00:18:09
categoría, se llama hola 00:18:13
y ahora si nos venimos aquí a gestionar vídeos, a cambiarnos 00:18:15
por ejemplo, aquí vemos que el hola sale 00:18:19
y las categorías son un poco eso, el hola por ejemplo 00:18:21
no lo queremos cargar y ya no sale 00:18:25
Y ahora, si volvemos al home, vemos que el vídeo que acabamos de aceptar aparece aquí ya en el home. Y bueno, eso sería como la vista súper rápida respecto a la presentación. 00:18:27
Presentación. Conclusiones. Esto desde el día uno lo hablé con mi tutor Borja. O sea, soy consciente de que tampoco es la idea más innovadora del mundo, pero sí que creo que es muy completa. 00:18:44
Al final se tocan un poco todos los módulos del radio superior, sin contar FOL inglés quizá, pero de algún modo u otro se tocan todos los módulos y por eso considero que al final es buen proyecto. 00:18:55
y bueno, en fin, que creo que me he pasado de tiempo 00:19:08
de sobra, muchas gracias 00:19:14
a mi tutor que siempre me contestó muy rápido 00:19:16
a los correos y punto por punto 00:19:18
porque yo a lo mejor le hacía cinco preguntas 00:19:20
en cinco puntos y él me contestaba punto por punto 00:19:22
en forma correcta, me recordaba cosas 00:19:24
y me hacía hincapié un poco en lo que podía mejorar y tal 00:19:26
y bueno, perdón 00:19:28
lo único que, claro, al final 00:19:30
le he metido, bueno, no sabía 00:19:34
que me sobraba tanto contenido, la verdad. 00:19:36
Está bien, está bien. Al final 00:19:39
el problema no ha sido acabar 00:19:40
antes, sino... 00:19:42
Hablar sobre lo que querías hablar. 00:19:43
Me he dejado demasiadas cosas 00:19:47
sin hablar, pero bueno. 00:19:48
No, está bien. Vale, pues 00:19:49
nada, te voy a hacer alguna... Bueno, lo primero 00:19:52
es felicitarte por el proyecto, porque 00:19:54
pienso que está muy bien lo que has 00:19:56
hecho. 00:19:58
Muchas gracias. 00:20:00
Creo que tocas muchos 00:20:01
temas que son 00:20:03
importante es acción de programación y nos parece que la ejecución es bastante impecable 00:20:05
vale pues cuál crees que es la mayor fortaleza del proyecto que crees que es 00:20:14
la mayor fortaleza yo creo que no sé si puedo seguir compartiendo y comentando un poco lo que 00:20:21
Yo creo que en Fortaleza, por ejemplo, una cosa que a mí me gusta es que tú, por ejemplo, si actualizas este campo, ahora, por ejemplo, ponemos hola 3, se ha actualizado directamente y no tienes como que refrescar. 00:20:29
Aquí no se refleja tan bien, pero, por ejemplo, si creamos un nuevo usuario, vemos que al darle a la casilla esta, por ejemplo, se genera una fila en la tabla. 00:20:45
y sin tener que refrescar 00:20:54
se ha creado automáticamente y se han 00:21:03
devuelto al formato 00:21:05
original de la tabla. Si reflejamos 00:21:07
la verdad que está ordenado por orden alfabético y tal, pero bueno 00:21:09
las contraseñas aparecen 00:21:11
encriptadas, pero si las actualizamos 00:21:13
pues obviamente aquí aparece así 00:21:15
pero a la que refrescamos 00:21:17
se ve de aquí el modo 00:21:19
y no sé, ese tipo de cosas a mí me gusta 00:21:20
O como cuando vas a añadir un usuario, ese email, aunque no hace falta que sea un email, pero bueno, ese email ya está cogido y te salta el chivato. 00:21:23
El no ser tan mucho feedback de lo que estás haciendo. 00:21:36
El comunicarse constantemente el frontend con el backend, que en ese sentido, te lo puedo mostrar aquí rápidamente. 00:21:41
creamos funciones 00:21:47
asíncronas a las que les asignamos 00:21:50
una URL con la que 00:21:52
se va a comunicar 00:21:54
y ahora aquí 00:21:54
la busco para no tener que bajar la mano 00:21:57
y aquí se comunica 00:21:59
automáticamente con esto 00:22:02
que ya sería el endpoint o el PHP 00:22:03
y bueno pues desde aquí 00:22:06
recibimos los datos y nos comunicamos 00:22:08
y no sé, en ese sentido me parece 00:22:10
todo como muy limpio 00:22:12
y no sé 00:22:14
me gusta, también es como estoy acostumbrado a trabajar 00:22:16
y no sé, al final me gusta 00:22:18
¿Tenías experiencia en programación o es 00:22:22
lo que has visto en el módulo? 00:22:24
No, tengo, o sea, trabajo 00:22:26
de esto, más o menos 00:22:28
Ya me parecía 00:22:29
Claro, o sea, no 00:22:31
si fuese solo con el HTML 00:22:33
y estas cosas que se dan, a ver, que se da un poco 00:22:36
de todo, pero sí, un poco de experiencia 00:22:38
sí que tengo, no soy experto, porque como 00:22:40
también digo en la memoria y tal, me falta sobre todo 00:22:42
aprender, o sea, yo creo que ahora mi siguiente paso 00:22:44
es aprender frameworks 00:22:46
frameworks, sobre todo Laravel y React 00:22:47
ese sería como mi siguiente 00:22:49
paso, pero diría que 00:22:51
hasta ese punto más o menos sí que lo tengo un poquito 00:22:53
o sea, controlo un poquito 00:22:55
no por fliparme, pero 00:22:57
no voy de cero en ese sentido 00:22:59
No, está muy bien, ya me parecía 00:23:01
a mí que tenías algo de experiencia 00:23:03
o sea, todo el dinamismo de la página 00:23:05
lo estás haciendo con funciones asíncronas de 00:23:07
Javascript, sustituyendo 00:23:09
el contenido HTML de algún 00:23:11
elemento que tienes ahí que es 00:23:13
común, digamos 00:23:14
claro por ejemplo en una vista o sea esto sería esto de aprobar vídeos sería por ejemplo esta 00:23:16
vista que al final es pues bueno esto se importa desde aquí o sea esto es esto el sidebar admin 00:23:25
que es un elemento flotante luego la verdad que no te sea el responsivo y tal pero bueno 00:23:35
si hacemos el responsive 00:23:41
pues esto vemos como se oculta 00:23:44
y si lo abrimos pues aparece aquí en el panel 00:23:46
lateral y esas cositas 00:23:48
si lo podemos ampliar pues 00:23:49
vuelve a aparecer 00:23:52
es eso, no tiene mucho HTML 00:23:55
o sea, básicamente le doy un contenedor 00:23:58
que en este caso lo puedo llamar body admin 00:24:00
o este tipo y luego 00:24:03
en la vista lo que hago es 00:24:05
seleccionarlo 00:24:08
y ya pues le digo 00:24:10
mira, créame esta tabla, este 00:24:12
tg, este tbody 00:24:14
estos th 00:24:16
a cada uno le doy lo que necesite 00:24:17
le puedo dar eventos, le doy las clases 00:24:20
le doy los dataset y tal 00:24:23
y luego pues todo lo anido dentro 00:24:24
del elemento que quiero 00:24:26
y no sé, eso por ejemplo también me gusta mucho 00:24:27
que html como tal y nada 00:24:30
y de este modo como que se hace 00:24:32
muy dinámico 00:24:34
Ha replicado de alguna manera 00:24:36
lo que hace un framework javascript 00:24:38
un poco, ¿no? porque 00:24:40
por ejemplo que trabajaría con componentes 00:24:41
claro, eso es 00:24:44
por eso es un poco a donde me quiero orientar 00:24:46
al igual que Laravel se orienta mucho hacia el modelo 00:24:47
vista controlador 00:24:50
pues por ahí es un poco 00:24:51
por lo que quiero tirar, claro, pero esto es 00:24:53
creo que es el término correcto 00:24:55
javascript vanilla, esto es 00:24:57
a mano, todo, esto 00:25:00
no hay framework 00:25:01
el único framework es 00:25:04
pues chave en ese caso 00:25:05
Está muy bien, porque has aprendido, digamos, la base que ahora te permite enfrentarte a los... 00:25:08
Claro, entiendo que el momento en el que me ponga a aprender esas cosas voy a entenderlo bien. 00:25:15
Sí, veo que manejas bastante bien las funciones de JavaScript. 00:25:21
Tienes que mirar las funciones estas tipo filter, map y todo eso, porque se usan mucho en este tipo de frameworks para ahorrar código y demás. 00:25:27
Claro, es verdad que muchas veces es muy repetitivo 00:25:38
tener que crear no sé cuántos elementos 00:25:40
Claro 00:25:42
Pero sí, sí, o sea 00:25:43
eso es totalmente cierto 00:25:46
Vale, luego 00:25:48
otra preguntilla que tenía por aquí 00:25:50
¿Qué parte del proyecto fue la que te costó más 00:25:51
hacer, implementar? 00:25:54
La que más, con diferencia 00:25:56
lo tengo clarísimo 00:25:57
Lo que es empezar de cero 00:26:00
o sea, crear la base de datos 00:26:04
O sea, por ejemplo, crear esto no es, o sea, sé hacer bases de datos y comunicarme con ellas con SQL también. Mi problema estaba en crear como la base de todo el sistema de rutas, empezar el proyecto desde cero. 00:26:05
O sea, yo puedo crear el repositorio, obviamente, eso es una tontería, pero lo que más me costó es lo que viene a ser esto, el index. Claro, esto sí que tuve que ayudarme de cosas de por ahí y esto al final es una constante, pero bueno, no tanto. 00:26:26
Estos son las variables de entorno 00:26:41
Que básicamente le digo 00:26:43
En el host, localhost, comunícate con la base de datos 00:26:44
Que se llama proyecto DAO 00:26:48
Usuario, contraseña 00:26:49
Y eso es la database 00:26:51
Y para mí esto es lo más difícil 00:26:53
O lo que menos entiendo 00:26:56
Lo tengo todo lo comentado que puedo 00:26:57
Pero esto para mí es lo más difícil 00:26:59
Y luego aquí, todo eso conlleva 00:27:02
A esto, que es el sistema de rutas 00:27:04
Una vez conseguí esto 00:27:05
El proyecto para mí fue 00:27:06
Como bastante rodado 00:27:09
O sea, porque yo aquí lo único que tengo que hacer es añadir, estas son las vistas, por así decirlo, y estos son los endpoints. Son métodos, pero no son vistas, no están hechos para visualizarse nunca, simplemente gestionan datos. 00:27:11
y para mí la parte más compleja fue esta 00:27:26
lo tengo comentado para entenderlo 00:27:29
pero para mí esto es un poquito lo más 00:27:31
también la verdad que creo que estoy yo un poquito 00:27:32
o sea, creo que se me da un poquito mejor el frontend 00:27:35
que el backend, porque al final hay un montón 00:27:37
de PHP y de 00:27:39
y de cosas 00:27:41
pero para mí lo más 00:27:42
complejo fue esto 00:27:45
una vez conseguí que funcionase 00:27:46
ya estaba perfecto 00:27:48
de hecho, cuando menciono 00:27:51
Aquí en el diagrama de Gantt 00:27:54
Mira, creación y configuración 00:27:58
Del sitio, al final 00:27:59
Me llevó más que crear el login 00:28:00
A ver, esto es un poco aproximado a todo 00:28:02
Pero lo más difícil para mí 00:28:04
De largo fue eso 00:28:07
Configurar el sitio de base 00:28:08
Porque claro, también podría haber trabajado 00:28:10
Con rutas 00:28:12
Absolutas, creo que 00:28:13
Se dice, rollo 00:28:16
En vez de 00:28:18
Si por ejemplo estamos en este archivo y queremos llegar al este 00:28:20
Pues nos vamos para atrás, para atrás 00:28:22
Y luego entramos en app, controllers 00:28:24
En el documento, tal 00:28:26
Pero quería trabajar con esto 00:28:27
Con rutas 00:28:30
Relativas, creo que se dice 00:28:32
Eso fue para mí lo más complejo 00:28:36
De largo 00:28:39
Claro, es que lo has hecho 00:28:40
De cero, esto si hubieses 00:28:42
Utilizado algún framework tipo 00:28:44
Porque en React es un poco 00:28:46
Más complejo, pero si utilizas Next.js 00:28:49
Que no sé si lo conoces 00:28:51
Next es como... 00:28:52
No te oigo, no te oigo 00:28:56
¿No me oyes? 00:28:58
No sé si estabas hablando de antes, ahora 00:29:00
Sí, no sé desde cuándo no te oigo 00:29:01
Pero no te oía desde hace un ratito 00:29:04
No pasa nada porque has estado hablando tú 00:29:06
Casi todo el rato, solo ahora te estaba 00:29:08
Contestando un poco 00:29:10
Que bueno, que es un poco porque no has usado 00:29:11
Ningún framework, sabes que has tenido que hacer 00:29:14
Todo el sistema de enrutamiento tú 00:29:16
Para lo más difícil 00:29:18
Pero vamos 00:29:21
Claro, pero bueno, ¿te ha permitido aprender? 00:29:22
Sí, sí, sí. 00:29:25
Te iba a recordar, no sé si conoces Next.js, que es también un framework tipo React. 00:29:26
Está hecho sobre React. 00:29:30
Y esto, el sistema de rutas, lo único que hacen es meterlas dentro de un directorio porque están hechos como por convención. 00:29:33
Entonces, tú metes dentro de Pages tus diferentes páginas a las que vas a navegar y él ya entiende cuando pones esa ruta que tiene que ir a esa página, ¿sabes? Es como que lo tiene muy simplificado. 00:29:41
Está relacionado con NPM, ¿no? Y ese tipo de tecnologías, creo. En plan, lo típico de que tienes que poner en la consola NPM install y NPM run dev y este tipo de cosas. Me suena mucho que está relacionado con eso. 00:29:55
Igual que tienes Create React App 00:30:09
Que es como la 00:30:13
La pasta que te crea una base 00:30:14
Tienes Create Next App o algo así 00:30:15
Ah, pues 00:30:18
Esa es una cosa genial, la verdad 00:30:19
Te lo hace, si te genera un proyecto de cero 00:30:21
Así 00:30:24
Básico para que veas un poco como está hecho y tal 00:30:24
Y bueno, si 00:30:27
Si te quieres poner con ello 00:30:28
Yo la verdad que sí que trabajo con React 00:30:31
Yo en empresas 00:30:33
Y bueno, en recursos y tal 00:30:35
y es verdad que la parte de las rutas 00:30:37
la parte de las llamadas 00:30:39
asíncronas y todo eso, el middleware 00:30:41
que llaman y tal, todo eso es un 00:30:43
súper farragoso 00:30:45
si te puedes evitar eso 00:30:46
que yo creo que Next.js como que lo simplifica 00:30:49
es verdad que una vez 00:30:52
esto ya me funcionó, era muy fácil 00:30:57
porque si por ejemplo quería crear una nueva ruta 00:30:59
o un nuevo endpoint, yo hacía así 00:31:01
añadía el nuevo con un nombre 00:31:03
distinto y ya está pero claro hasta que llegue a eso fue sí sí sí eso fue ahí tuve que consultar 00:31:05
a todos los lados así hacemos todos al final también funciona un poco de memoria pues una 00:31:18
última pregunta, luego te hago 00:31:29
un comentario sobre el proyecto 00:31:31
y acabamos. ¿Qué harías 00:31:33
diferente para un siguiente proyecto? 00:31:35
¿Qué parte 00:31:39
mejor harías en cuanto a tu proceso 00:31:39
de ejecutar el proyecto? 00:31:41
En ese sentido, 00:31:46
además de tener más conocimientos, 00:31:47
aprender frameworks y tal, por ejemplo, esto como que me acabas 00:31:49
de comentar, 00:31:51
a lo mejor pensar más en una 00:31:53
idea guapa, novedosa, 00:31:55
pero es verdad que como yo ya 00:31:57
tenía experiencia 00:31:59
como que tenía 00:32:01
un poco claro los pasos que quería seguir 00:32:04
en ese sentido 00:32:06
primero creabas la base de datos 00:32:07
creabas el repositorio en github 00:32:09
te lo clonas aquí en github desktop 00:32:11
y luego 00:32:14
pues digo vale, mi primera parte 00:32:16
del proyecto por así decirlo 00:32:17
es que funcione 00:32:20
al principio hacía las pruebas en el propio html 00:32:21
con el javascript ahí metido en el propio documento 00:32:23
html hasta que me funcionaba 00:32:26
Y luego una vez ves que es viable, pues ya como que lo empiezas a estructurar bien. Y luego, pues aquí, por ejemplo, desde el principio como que cada commit, en ese sentido que hago, bueno, al principio son un poco genéricos, pero luego es home creado, login creado, se pueden aceptar vídeos, tal. 00:32:27
O sea, en ese sentido, como que me lo he estructurado bien y si lo volviese a empezar, pues no tengo claro qué contestarte en ese sentido. O sea, porque he seguido un poco y se ha cumplido un poco como el procedimiento que más o menos tenía pensado. 00:32:45
Está bien, está bien. Pues que lo has hecho bien a la primera. 00:33:03
Claro, no es como que sea inmejorable, pero no sabría qué mejorar porque al final lo que he hecho es un poco lo que sé, aunque también he improvisado mucho sobre la marcha, obviamente. Pero sí, a lo mejor, no sé, desde el día uno hacer esto y hasta que no saliese no ponerme con otras cosas, por así decirlo. A lo mejor eso sería yo creo que la mejora principal. 00:33:07
¿Usas algún sistema de 00:33:32
gestión de proyectos 00:33:34
tipo Trello 00:33:37
tipo, no sé 00:33:39
Lo que conozco es Notion 00:33:42
es lo que te refieres 00:33:45
Sí, sí, también 00:33:47
Claro, lo único que es de pago 00:33:47
No, pero Notion es gratis 00:33:50
Es que te escucho mencionarlo 00:33:53
Yo Notion lo uso constantemente 00:33:55
para, aquí en el centro 00:33:57
Bueno, de hecho lo estoy usando 00:33:59
para compartir prácticas a los alumnos 00:34:01
me guardo 00:34:02
todo lo que genero a través de 00:34:05
IA, no sé, tengo como una 00:34:07
base de datos ahí 00:34:09
es como yo llevo mis clases 00:34:10
entonces, claro, Notion tiene plantillas 00:34:13
que te pueden ayudar mucho 00:34:15
a gestionar un proyecto 00:34:17
o sea, en plan, pues 00:34:19
generas tareas, cuando las completas las pasas 00:34:20
a otra lista o tal 00:34:23
Claro, eso es lo que yo conozco en Notion 00:34:25
creo una tarea que se llama, por ejemplo, crear login 00:34:27
asigno 00:34:29
a lo mejor tiempos si quiero, documentación 00:34:31
comentarios y una vez está 00:34:34
terminada, yo sé que con Notion por ejemplo 00:34:35
sobre todo a nivel 00:34:37
cuando lo haces pull request y tal 00:34:39
si lo tienes vinculado 00:34:41
como que incluso se vincula el propio 00:34:43
pull request ahí de GitHub 00:34:45
y eso es muy guay 00:34:47
la verdad, no sé cómo lo harán pero es muy guay 00:34:50
y eso es lo que yo 00:34:52
conozco y yo pensaba que era de pago 00:34:54
al final el control 00:34:56
que he llevado es un poco pues 00:34:58
el planning que yo tenía, las notas 00:34:59
que yo me tomaba a mí en mis bloques de notas. 00:35:01
O sea, 00:35:05
punto txt, me 00:35:05
funcionó bastante eso. 00:35:07
Y es un poco 00:35:09
la ruta que he llevado. 00:35:10
O bueno, yo, por ejemplo, también, lo que he utilizado 00:35:13
mucho, a ver si por aquí tienes algún 00:35:15
ejemplo. Yo me pongo todo mucho 00:35:17
en los códigos. 00:35:19
No sé si ahora mismo vamos a encontrar algún ejemplo. 00:35:21
Pero 00:35:24
yo lo que pongo mucho es 00:35:24
todo en todos los lados. Sobre todo 00:35:27
en los controllers 00:35:29
bueno, no sé si ahora mismo voy a encontrar alguno 00:35:30
pero bueno, me pongo todo 00:35:36
y es como 00:35:38
lo que utilizo para acordarme al día siguiente de 00:35:39
hey, continúo por aquí 00:35:42
los buscas y ya sabes 00:35:44
claro, hago control F 00:35:46
de todo y 00:35:48
bueno, justo 00:35:51
no encuentro ninguno 00:35:53
pero sí, al final son como 00:35:54
notas de mí para mí 00:35:58
Pues sí 00:35:59
Muy buena forma de trabajar 00:36:04
Nada, pues tengo unos comentarios 00:36:05
Así que yo he visto 00:36:07
Y ya acabamos 00:36:09
A ver, lo primero 00:36:12
Nada, muy bien 00:36:14
En usar tecnologías 00:36:15
Con las que ya estabas 00:36:17
Aquí tengo los tu-do, perdón 00:36:18
Crear, log y tal, gestionar 00:36:20
Sí, sí 00:36:23
Claro, luego me lo cargo y ya está 00:36:24
Nada, eso 00:36:28
que el tema de trabajar tecnologías 00:36:29
con la que ya conocías, que está muy bien 00:36:31
sobre todo en un proyecto que tiene 00:36:33
una fecha de entrega muy concreta 00:36:35
que te puede llevar 00:36:37
mucho tiempo el meterte directamente a lo mejor 00:36:39
con framework tipo React 00:36:41
y eso, y al final has logrado 00:36:43
implementarlo perfectamente 00:36:45
y no te ha hecho falta 00:36:48
nada más, muy bien 00:36:48
la presentación, como has puesto 00:36:51
las cosas muy limpio 00:36:53
todo, la generación dinámica 00:36:55
de los vídeos está muy bien pensado también 00:36:57
has hecho hasta un logo que está muy bien 00:36:59
y nada 00:37:04
el uso que has hecho de iconos 00:37:06
la interfaz de usuario y todo eso 00:37:08
también está genial 00:37:10
en cuanto a mejoras que yo 00:37:11
he visto, a lo mejor 00:37:14
usar Node.js en vez de PHP 00:37:16
por ejemplo 00:37:18
de esa forma mantendrías todo el stack 00:37:19
en Javascript 00:37:22
también tiene 00:37:23
mejor rendimiento y 00:37:25
Se integra mejor con frameworks 00:37:27
Tipo Next o React 00:37:30
¿Ese cuál es? 00:37:32
Node.js 00:37:35
¿Cómo lo llamas? 00:37:36
Node.js 00:37:38
Eso es 00:37:38
Claro, pero 00:37:41
Si esto alguna vez lo he instalado, pero 00:37:43
Sería un poco el mismo problema 00:37:45
Que a lo mejor con React y con Laravel 00:37:48
Un poco 00:37:50
Ahora yo me he instalado esto y no sé qué me aporta 00:37:51
Y a lo mejor solo el 00:37:54
O sea, no sé si tengo que configurar algo 00:37:56
Ya, hombre, claro 00:37:58
No sé qué magia tiene dentro, ¿sabes? Por así decirlo 00:37:59
Es otra tecnología que tendrías que aprender aparte 00:38:01
Pero es Javascript al final, o sea, es como 00:38:04
Gestionar tu backend a través de Javascript 00:38:06
Ah, pues 00:38:09
Es un poco muy 00:38:11
Eficiente 00:38:12
No sé, es como más moderno, ¿vale? 00:38:13
Sí 00:38:18
Enqueja bastante, ¿no? 00:38:19
Con un poco lo que he hecho en general, yo creo 00:38:21
Encaja muy bien, sí 00:38:24
Y bueno, y luego 00:38:25
en el caso de que migrases el front a React 00:38:26
y tal, pues se integra mejor. 00:38:29
Ah, pues 00:38:31
esto sí que tomó nota. 00:38:32
Luego, bueno, el tema que ya 00:38:35
te comenté creo por correo, el tema del 00:38:37
que no acabas de elegir un nicho, aunque no es 00:38:38
no es una cosa 00:38:41
o sea, porque claro 00:38:42
tú vas a un portal genérico de vídeo 00:38:45
¿no? Estarías compitiendo a lo mejor 00:38:47
con YouTube directamente 00:38:49
en vez de a lo mejor centrarte en 00:38:50
planes de ocio o en planes 00:38:53
Claro, o sea, al principio 00:38:55
sí que quería como enfocarlo ahí 00:38:57
y de hecho 00:38:58
bueno, había de ir, pues todas las categorías 00:39:00
pues van un poco por ahí, ¿sabes? 00:39:02
Pero sí que es verdad que lo he dejado como más abierto 00:39:04
lo he dejado más abierto también 00:39:06
para demostrar que realmente 00:39:08
se puede expandir o que 00:39:10
si llega mañana, por ejemplo 00:39:12
me lo invento, y una empresa quiere comprar 00:39:14
esto 00:39:16
pues de un día para otro se puede convertir 00:39:17
en vez de en ocio en 00:39:20
yo qué sé, videojuegos, me lo invento 00:39:22
en ese sentido por eso lo he dejado un poco 00:39:24
o sea, sí, pero 00:39:26
esa es como mi excusa para haberlo dejado 00:39:29
así, genérico 00:39:31
claro, es que todo depende de cómo lo enfoques 00:39:33
o sea, en realidad, porque tú 00:39:35
claro, podrías usar este proyecto como base 00:39:37
para otros, como dices 00:39:39
o podrías 00:39:40
crearlo como un producto tuyo ya directamente 00:39:42
pero claro, si es un producto ya 00:39:45
y no le das un nicho 00:39:46
muy concreto, a lo mejor vas a tener más problemas 00:39:49
para luego, bueno, sacar 00:39:51
claro, en plan, compite con otro youtuber 00:39:52
pero bueno 00:39:54
sí que es verdad que por ejemplo 00:39:56
una idea 00:39:59
que se me ocurrió como por la que puede 00:40:01
funcionar esto es 00:40:03
por ejemplo un creador de contenido que tenga 00:40:05
sus vídeos yendo a 00:40:07
comer a restaurantes 00:40:09
a lo mejor en TikTok o Youtube o donde sea 00:40:10
pues 00:40:13
yo que sé, tiene 10 visitas 00:40:15
te metes aquí 00:40:16
te autopromocionas un poquito 00:40:18
y al final pues yo que sé 00:40:20
como que nos retroalimentamos el uno 00:40:23
al otro, ¿sabes? Es un poco también como 00:40:25
pienso que se podría incentivar 00:40:27
este tipo de páginas web. 00:40:29
Sí, luego como idea 00:40:31
yo no sé si 00:40:33
convertirlo en una app móvil 00:40:34
por ejemplo y que la gente 00:40:37
pueda ir a restaurantes a hacer vídeos 00:40:39
y recibir descuentos 00:40:40
a lo mejor del restaurante porque al final y tal. 00:40:43
Ah, pues sí, eso sería una locura. Sí, como cuando 00:40:46
en un restaurante te piden que le pongas una reseña. 00:40:48
Eso es. Claro. 00:40:50
Sí, sí, eso sería una locura 00:40:51
Convertirlo en app móvil 00:40:54
Claro, porque tú ahora mismo esto 00:40:56
Bueno, si estuviese publicado en internet esto 00:40:59
Porque está solo en local 00:41:01
Tú esto si lo publicas en internet 00:41:02
Realmente lo puedes abrir desde internet 00:41:04
Y además es responsivitar 00:41:07
Claro, pero no es una aplicación 00:41:08
Sería desde el móvil pero en web 00:41:09
Pero sí, esta página pega mucho 00:41:12
Dentro de la propia aplicación 00:41:15
Que te permitiese grabar ese vídeo 00:41:17
Y ya subirlo a la plataforma 00:41:18
ya eso sería 00:41:20
claro, el problema que tú 00:41:22
que la estás creando en YouTube 00:41:24
entonces aquí es donde 00:41:25
tendrías que subir el vídeo al final es a YouTube 00:41:28
y luego... 00:41:30
Claro, porque esta aplicación no... 00:41:31
bueno, de hecho es una de las políticas que tiene 00:41:33
YouTube que no 00:41:35
permite que yo guarde este vídeo 00:41:36
y haga uso de él en otra página 00:41:39
sino que 00:41:41
es eso, es una de las normas que tiene 00:41:43
YouTube, que cuando me comentaste 00:41:46
lo de que tenía que comentar los aspectos 00:41:48
legales, pues dije, claro, es que tiene todo el sentido porque encima 00:41:49
estoy usando contenido de terceros. 00:41:52
Una de las normas que tienes es eso, 00:41:54
que no puedes descargarte el vídeo y tal, 00:41:55
y que tienes que usar su reproductor. Así que yo 00:41:57
por eso con lo que trabajo es solo con URLs. 00:41:59
Yo lo que almaceno son URLs 00:42:02
como la que he cogido aquí. Es verdad 00:42:03
que del modo que tú dices, 00:42:05
tendrían que almacenarse en algún sitio. 00:42:07
O que se suban a YouTube y ya se muestran aquí. 00:42:09
Serían las alternativas. 00:42:11
Sería más complejo, pero bueno. 00:42:13
Simplemente como idea, ¿no? 00:42:15
Sí, sí, estaría genial eso. 00:42:16
Sí, sí, sí. 00:42:19
Vale, pues nada, por mi parte, nada más. 00:42:20
La nota creo que es la gana a finales de junio, ¿vale? 00:42:25
¿A finales de junio? 00:42:29
A finales de junio, sí. 00:42:30
La comenté la... 00:42:31
Jueves, no queda ni nada. 00:42:32
Sí, hay que esperar un poquito. 00:42:35
Y nada más, nada, nada, felicitarte y que sigas así. 00:42:38
No sé qué planes tienes ahora, después de... 00:42:43
Me imagino que ya acabas, ¿no? 00:42:45
El ciclo y... 00:42:46
Bueno, de momento aprobar los exámenes 00:42:47
de dentro más. 00:42:49
Esa es la prioridad. 00:42:51
Y luego, pues bueno, seguir trabajando 00:42:54
y aumentar el currículum 00:42:56
e irme a buscar sitios donde me paguen más. 00:42:58
Ese es el plan. 00:43:00
Ese es el plan. Buen plan. 00:43:02
Creo que me he quedado 00:43:05
un montón de cosas sin comentar, pero 00:43:06
bueno, al final 00:43:08
sí que te he podido enseñar un poco todo lo que quería, 00:43:10
lo que tenía en mente, o si no, también está en la memoria 00:43:12
al final. Voy a ir parando la grabación, 00:43:14
Ah, vale, sí. 00:43:16
Etiquetas:
Desarrollo de Aplicaciones Web
Subido por:
Víctor Borja M.
Licencia:
Todos los derechos reservados
Visualizaciones:
1
Fecha:
7 de mayo de 2025 - 19:25
Visibilidad:
Clave
Centro:
IES CIFP a Distancia Ignacio Ellacuría
Duración:
43′ 19″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
392.74 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid