Proyecto Francisco Pinilla Mayo 2025 - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Sí, venga, pues empezamos. Bueno, soy Francisco Río Pinilla, vengo a presentar el proyecto final del módulo de DAO, lo he llamado página web de Francisco Arroyo, FAP, que es el acrónimo de Francisco Río Pinilla, y nada, pues comenzamos.
00:00:00
He seguido, vamos a seguir el índice en esta presentación, igual que en la memoria final que proponía el centro, con los 13 puntos, desde introducción a anexos, y bueno, veremos por orden.
00:00:14
Como introducción, hablando con mi tutor Eduardo Rojo, llegamos a la conclusión de que si queréis hacer una página web, lo más funcional era hacerlo con WordPress, entonces utilizar la plataforma WordPress y la idea era demostrar las habilidades de desarrollo web donde una es accesible, fácil de interpretar, evitando esas configuraciones complejas y un software avanzado.
00:00:25
Al final lo que buscaba era que la herramienta fuese accesible desde un navegador web y que no hubiese la necesidad de instalar ningún tipo de software adicional en el ordenador y sobre todo que se priorizasen, se hizo ratito el hosting y va a ser todo en línea.
00:00:44
mi motivación pues al final se veía apoyada y radicaba en la facilidad de implementación que
00:00:54
fuese accesible la práctica la practicidad del mismo y que también la posibilidad de expansión
00:00:59
futura pues como pues estas son las bases y luego en un futuro pues podemos meter un canal de pagos
00:01:03
o un chat interno dentro de la propia página al final como digo es una página web wordpress con
00:01:08
el plan gratuito que veremos como luego me limitó bastante este plan y nada integrante de juegos
00:01:15
educativos sencillos que servirá para que lo dijera alojados en el tío es una plataforma
00:01:21
también independiente individual y gratuita que también veremos por qué tiene por ahí y porque
00:01:26
también tuvo restricciones y bueno al final sí que consigue también sistema funcional de registro
00:01:31
usuario que también me limitó por no poder tener una base de datos y he tenido que hacerlo todo
00:01:36
en web pues lo hice con word font si con flujos de the world fonsi iguales como que todo general
00:01:42
que además se cumple pues ahora precisamente crear esa página web en wordpress con los tres
00:01:49
juegos interactivos realizados desde cero en en un texto plano con html y css embebido en
00:01:55
javascript y alojados en el tío que sí que permitía la subida cosa que veremos que la
00:02:03
versión gratuita de wordpress no lo dejaba y bueno al final un sistema de registro funcional
00:02:09
de jugadores ranking para las puntuaciones de los jugadores como específico pues ahora
00:02:14
diseñar en sí los tres juegos, como también se hizo,
00:02:18
publicar cada juego en la plataforma de Itch y enlazarlos
00:02:21
con un enlace directo a WordPress, que era nuestra
00:02:24
página web, y luego implementar un registro de usuarios y
00:02:26
puntuación también gratuito y funcional y dinámico.
00:02:31
Además de crear ese ranking, asegurar que la página fuese
00:02:33
accesible y responsiva y evitar confusiones avanzadas para que
00:02:36
cualquier persona en un futuro pudiese replicarlo o sirviese
00:02:39
para un tema de formación o educativo.
00:02:42
La metodología de implementación, pues una metodología
00:02:45
adaptada a mi conocimiento como estudiante de segundo de desarrollar aplicaciones web y las
00:02:47
plataformas gratuitas como veremos que fueron wordpress y sí empecé pues haciéndome un perfil
00:02:52
metiéndome en wordpress y empecé a crear las páginas pues una página de landing de portada
00:03:00
luego una explicando los juegos otra de contacto otra registro aquí de hecho en correcciones
00:03:07
parciales que tuve con mi tutor eduardo corregir cosas como por ejemplo que había una página de
00:03:12
landing que era hola mundo que no sabía por qué me salía porque de manera predeterminada el wordpress
00:03:16
gratuito te metía con especie como de saludo en un blog entonces no era la página no estaba en
00:03:22
página estaba en blogs bueno y con ello y pude perfilarlo y pulirlo al final es eso tener un
00:03:28
texto plano pasarlo a html e intenté subirlo a wordpress a mi página wordpress pero como es el
00:03:36
tan gratuito pues cuando hacía un html personalizado me daba error y tuve que
00:03:44
buscar una alternativa como fue aquí está el error la subida es una plataforma individual
00:03:51
y gratuita como era y yo que bueno que busqué en foros como está cover flow otros desarrolladores
00:03:59
que también subían a esos juegos y vi que bueno que era viable y de confianza y lo subía ya que
00:04:06
bueno al final pues el wordpress gratuito no nos permite conocer las viajas escribieran por lo que
00:04:11
me da ese error este es un ejemplo del dashboard de dicho lo puse público ya cuando se pone público
00:04:16
pues ya sí que te deja reproducir el juego como digo un texto plano que se pasa html y que los
00:04:22
vea al dashboard de dicho ese sea como producto final de uno de los juegos que se tiene memoria
00:04:28
y luego lo que hice fue con la url que me salía en el dashboard de dicho lo lanzaba con el botón
00:04:34
de jugar ahora, de enlace directo que tenía
00:04:39
en la página web de WordPress de cada uno de los juegos
00:04:41
pues con el papel de tijera
00:04:43
este que era de memoria, lo mismo con el de ahorcado
00:04:45
y luego me encontré otra pide en el camino
00:04:47
que fue que la versión gratuita de WordPress
00:04:49
pues no me permitía tampoco activar un registro de usuarios
00:04:51
personalizado, ¿no?
00:04:53
porque no te permitía insertar ni base de datos
00:04:55
ni código de usuario, ni plugins externos
00:04:57
entonces tuve que también buscar una alternativa 100% gratuita
00:04:58
y se hacía que era un poco el objetivo de este proyecto
00:05:01
y terminé optando por Google Sheets
00:05:03
que es una alternativa
00:05:05
como base de datos de nuestro proyecto 100% gratuita
00:05:07
y funcional
00:05:09
y sencilla
00:05:11
este es un pantallazo de
00:05:12
el sheet, al final lo que hice fue crear
00:05:14
un formulario, crear un flujo para que cuando la gente
00:05:16
se registre en ese formulario
00:05:18
los usuarios y apuntaciones
00:05:20
se guardasen
00:05:22
en esta hoja de cálculo y me metí un query
00:05:23
y un sort, pues bueno al final
00:05:27
se agrupan por nombre y se suman las apuntaciones
00:05:27
de cada jugador y se lo dan de mayor a menor
00:05:31
dependiendo de las apuntaciones que tengan
00:05:33
además de meterlo en la
00:05:35
pestaña de wordpress
00:05:37
registras tus puntuaciones
00:05:38
luego también
00:05:41
dentro de cada
00:05:43
juego
00:05:45
cuando finalizas y te da la puntuación pues también
00:05:47
puse un enlace directo para que
00:05:49
el usuario pues tuviese también
00:05:51
a manos ese formulario, como digo cuando
00:05:53
rellenas el formulario pues al final
00:05:55
el flujo hace que aparezca en
00:05:57
Google Sheet y que mediante
00:05:59
el query en la pestaña de ranking
00:06:01
pues se vayan clasificando, hay
00:06:03
ejemplos de Fran prueba 1, Fran prueba 2 que fui
00:06:05
haciendo y fue fue funcionando como una pequeña victoria que me lleve y me llevo es que al final
00:06:07
aunque no me dejó meter el html de los juegos el archivo dentro de wordpress por la versión
00:06:13
gratuita así que me permitió la visualización directa de la pestaña de ranking dentro de mi
00:06:19
google sheets directamente en el wordpress bueno pues es por una pequeña victoria que me llevo y
00:06:24
que bueno pero no sé que me dejó que además es responsivo y se actualiza pues directamente todo
00:06:28
Esto está más detallado paso a paso en un documento que se llama Pantezos paso a paso final, que también está en el drive.
00:06:35
Como tecnologías y herramientas utilizadas en el proyecto, bueno, pues al final HTML, CSS y Javascript para el archivo HTML de cada juego.
00:06:41
Itio, que fue la plataforma donde subí los juegos.
00:06:47
Wordpress, el plan gratuito, que como vemos me ha limitado bastante.
00:06:49
Luego, Google Forms, Google Sheets para el tema de la hoja de cálculo vinculada al formulario y la clasificación del ranking.
00:06:51
Luego, el Drive para subir toda la documentación.
00:06:59
También se valoran otras opciones como plugins y bases de datos externas, pero es que ya no su complejidad, sino que es que eran incompatibles con servicios gratuitos de WordPress, por lo que no puedo optar a ello.
00:07:01
Como recursos utilizados, mi portátil que es un MacBook de 2020, conexión a internet estable, un navegador de Google Chrome, Safari, luego también hice pruebas con Firefox y Conex para que funcionase bien la página de los juegos, la plataforma de ITEO, WordPress y la cuenta de Dragno para subir todo.
00:07:12
Ahí deja un poco una planificación temporal de cómo fue aproximada el proyecto, aunque la mayoría del empuje lo metí en vacaciones de semana santa, que es cuando tuve más tiempo.
00:07:29
Como analicé el proyecto, hay que diferenciar entre el funcional y el técnico.
00:07:39
A nivel funcional, tenía que tener en cuenta que los juegos que lo teníamos, que los jugadores pudieran registrarse con su nombre y puntuación a la vez que finalizaba la partida, que también lo conseguí.
00:07:43
Y luego mostrar un ranking de jugadores actualizado temporal en la propia página web, que también se consigue.
00:07:54
Y a nivel técnico, que todos los recursos tengan que estar basados en servicios web gratuitos, como ha sido el caso, aunque me ha limitado un poco. Y que, bueno, al no disponer de un servidor propio y no basado en un local, pues he tenido que tirar por ahí. La solución, al final, la actividad es fácil de mantenerse y para poder ser replicable y creo que se ha conseguido también.
00:07:57
Al final, también intenté con el uso de Web Apps Script, pues, o sea, que todo fuese más automático, pero también vamos a ver cómo me encontré limitado.
00:08:13
Esta vez no por el WordPress, sino por el propio Itch.io. Pero bueno, al final esta manera que encontré fue la más idónea para, con los requisitos que teníamos, poder salir del entorno web sin necesidad de conectarse a un servidor y poder llevar a cabo el proyecto.
00:08:28
el diseño del proyecto lo comentaba un poco antes
00:08:46
y lo adelantaba, pues hay una página de landing
00:08:49
en la que se explica el proyecto, los juegos
00:08:51
luego otra pestaña
00:08:52
dentro de la página
00:08:54
que es una descripción de cada juego
00:08:56
y luego una página
00:08:59
individual de cada juego con un botón de jugar ahora
00:09:00
que es justo donde está el enlace
00:09:03
a la URL directa de la plataforma
00:09:05
donde se reproduce el juego
00:09:07
y se puede jugar, aparte de
00:09:09
otra pestaña para registrarse para competir
00:09:10
tu puntuación, pues después de cada juego
00:09:12
como comentábamos también sale para poder gestar en el formulario que está unido con ese flujo a
00:09:14
nuestro sitio y luego pues a la base de datos entre comillas nuestro backend entre comillas
00:09:18
que pude meter dentro de la pestaña de ranking fab de wordpress que es esa pequeña victoria que
00:09:28
como digo me llevo una vez más todo esto está bien organizado en todas las carpetas drive
00:09:35
html están pues todo el html de los juegos documentación documentado tanto de memoria
00:09:42
como ppt y también las culturas paso a paso de cómo se ha ido haciendo todo todo el proyecto y
00:09:48
también pues todas las piedras que me encontré en camino al final eso es un poco como se dirá
00:09:53
un juego final en el de pierna lo dijera que aparte puede jugar y elegir tu opción pues
00:09:57
cuando acaba el juego pues te dice tu puntuación y una vez más pues el formulario de registro para
00:10:01
que puedas registrarte al final esta simplicidad hace que el proyecto se pueda ser replicado y se
00:10:07
utiliza fácilmente por los alumnos en posteriores años lo quiera aprender o replicarlo dentro de
00:10:12
despedida de pruebas aquí hablo un poco más de todo lo que me está haciendo en el camino
00:10:18
nacional no fue posible utilizar el php porque bueno en este proyecto como se ha hecho con
00:10:22
nichos y éste sólo permite juegos en html y no ejecuta código en seguido como php para hacer
00:10:25
esto pues al final se necesita el propio soporte con php una base de datos y bueno al final opte
00:10:31
por la versión gratuita que sí que me dejaba walt y frank como diego que genera como asombrar un
00:10:35
backend sin tener que montar una real al final cuando subes un juego al litio la plataforma
00:10:39
no ejecuta directamente porque bueno pues lo protege lo meten en un frame y esto sí que habrá
00:10:44
que proteger al usuario pero claro hace que el navegador bloque por la seguridad la llamada
00:10:50
política course y hace que pues no escribe este caso cuando no pueda utilizarlo por eso no
00:10:56
funcionaba el esquema automático y los otros por el formulario que además lo tenemos aquí y bueno
00:11:03
si hubiese trabajado con su vida externo pues habitualmente pues un php que recogerá dos
00:11:09
enviadores de los juegos con sets y bueno guardas una base de datos de más sql entonces sí que
00:11:14
podríamos dar un ranking de otra página de php tendría más control y mejor incluso podría meter
00:11:18
un login para jugadores y usuarios bueno al final busca soluciones más simples y google ha sido la
00:11:23
la solución esta plataforma es al final perfecta para proyectos estáticos como ha sido este caso
00:11:32
de este tema de javascript básico que una vez más no están preparados para ejecutarse con código de
00:11:38
servidor ni cargar frameworks de javascript como puede ser reactivar y creación requieren
00:11:44
conferencias más especiales y también pues como por ejemplo puede ser el hecho de meter
00:11:48
pues plugins que tampoco me dejaba por ser versión gratuita así que nada pues sólo
00:11:54
desarrollar html css y carácter puro y pues una vez más como digo webforms fue mi salvador y lo
00:12:02
que vi más óptimo para poder sacar el proyecto luego realizamos muchas pruebas en diferentes
00:12:08
navegadores en dispositivos móviles en ordenador y con diferentes usuarios y bueno pues sabe todo
00:12:15
bien y al final el sistema permite jugar,
00:12:20
registrar puntuaciones y consultar resultados, al final cumpliendo
00:12:22
con los objetivos planteados que teníamos.
00:12:24
Como contexto laboral, bueno,
00:12:27
pues aparte de
00:12:29
las herramientas de metodología que
00:12:31
al final
00:12:32
sí que se me ha planteado en proyectos web reales
00:12:34
en la vida, en el mundo laboral,
00:12:37
también he tenido como esa capacidad,
00:12:39
bueno, digo, HTML,
00:12:41
JavaScript, Google Forms y
00:12:43
entregas en Google Drive o en GitHub,
00:12:44
bueno, en este caso elegimos Google Drive,
00:12:46
pero también podría haber sido GitHub.
00:12:49
Bueno, que esta capacidad final también de generar soluciones ante piedras que encontramos en camino, pues es lo que creo que me ha encontrado en la vida real a nivel laboral y también este proyecto me ha ayudado no solo a aprender a nivel técnico, sino también a aprender un poco de resiliencia.
00:12:50
como digo aquí
00:13:06
al final ha sido una experiencia completa
00:13:07
y enriquecedora, he cumplido todos los objetivos
00:13:10
y bueno pues me da
00:13:12
unas gotitas de confianza
00:13:14
para en un futuro saber que tengo esa residencia
00:13:16
y que aunque
00:13:18
he tenido frenos como por ejemplo la versión gratuita
00:13:19
de WordPress pues he podido buscar
00:13:22
alternativas creativas y funcionales para cumplir
00:13:24
todos los objetivos propuestos
00:13:26
como vía futura bueno comentaba eso que
00:13:27
si me hubiese dejado
00:13:29
por ejemplo meter plugins pues podría haber metido
00:13:32
un canal de pago o incluso un chat
00:13:34
entre jugadores para que, bueno, pues entre ellos
00:13:35
se piquen con las votaciones de, ah, yo he sacado más que tú,
00:13:38
yo tengo más que tú, y bueno, pues eso mejor
00:13:40
sería para un desarrollo más
00:13:42
a futuro y
00:13:44
sobre todo en este
00:13:46
caso de pago, que sí que te dejarían meter
00:13:48
plugins y podían meter ese tipo de cosas, pero como esto
00:13:49
al final era, el objetivo era que
00:13:52
fuese simple, gratuito y un poco
00:13:54
accesible para todo el mundo, independiente
00:13:56
de su nivel de informática, pues creo que
00:13:58
al final, pues he cumplido con
00:14:00
el objetivo y aparte que he estado
00:14:02
limitado por como digo por todo tema de versión gratuita de wordpress y yo aquí dejo un glosario
00:14:04
que he utilizado la modificación no todo esto la biografía y la biografía con enlaces directos y
00:14:10
luego los anexos en los que te redireccione directamente a el drive con todo con todos
00:14:21
archivos y con esta presentación y la memoria final incluso hay más corte de preguntas que
00:14:27
creo que ya el tiempo se ha echado un poco encima y vamos a ver lo que me queda un poco
00:14:36
es has comentado con sexto que has utilizado el wordpress las metido una página web puesto
00:14:41
una versión gratuita de la página web de wordpress no te la ha bajado todo a un ser
00:14:49
te lo has bajado todo de forma local
00:14:55
No, no, o sea, realmente
00:14:57
lo he hecho todo en web, al final
00:15:00
luego WordPress te daba como diferentes
00:15:01
selecciones del tipo
00:15:03
oye, ¿qué quieres? un .org
00:15:05
si era .org era pagando
00:15:07
si era .com que era lo sin partida
00:15:09
Sí, eso lo entiendo, pero no te lo puedes haber bajado
00:15:11
a lo mejor WordPress y haberlo instalado en tu propia
00:15:13
máquina y a lo mejor se te hubieran
00:15:15
quitado tantas limitaciones
00:15:17
Pregunto
00:15:19
Sí, bueno
00:15:20
a ver, tengo yo un alumno que ha metido
00:15:21
un montón, creo que de plugin
00:15:24
aunque decías tú que era de pago
00:15:26
en tu
00:15:27
has comentado que los plugins eran la versión de pago
00:15:28
pero no sé yo si hubieras tenido
00:15:31
menos restricciones, si te lo hubieras bajado y instalado
00:15:33
en tu propio servidor
00:15:35
o algo, pregunto
00:15:37
al final como el objetivo, que también lo marqué
00:15:38
uno como los objetivos, que todo fuese en web
00:15:41
que no fuese nada en local, pues por eso
00:15:43
bueno, también puedes poner tu servidor
00:15:45
y ponerlo a web, puedes abrir los puertos
00:15:48
de tu router y
00:15:49
con tu dirección IP ponerlo que
00:15:51
salga a internet, tampoco
00:15:53
lo pones primeramente local y después
00:15:55
sale de internet, entonces te estoy
00:15:58
preguntando, no sé que otro alumno
00:16:00
también ha hecho con WordPress y
00:16:02
él sí que ha puesto plugin
00:16:03
y no ha tenido tantos problemas
00:16:05
Claro
00:16:07
es que al final también
00:16:09
el objetivo de este proyecto, vamos básicamente
00:16:11
era un poco, yo lo hice pensando
00:16:13
si mi madre lo entiende y lo puede
00:16:15
hacer es que cumple el objetivo
00:16:17
porque al final lo que quería era que cualquier persona
00:16:19
independiente de su nivel
00:16:21
de informática pues pudiese
00:16:23
pudiese replicarlo
00:16:24
si claro, con un servidor propio daría más control
00:16:27
pero bueno, ese es mi objetivo
00:16:29
también
00:16:32
era un poco ese y claro, por eso me he visto limitado
00:16:32
a la hora de no poder utilizar
00:16:36
ni plugins ni un servidor propio
00:16:37
Sí, que ya he visto que no has
00:16:40
utilizado una base de datos, que has utilizado
00:16:42
Google Form, de acuerdo
00:16:44
Sí, y sí, es que
00:16:45
bueno, voy a hacerte una pregunta
00:16:48
a ver, eso de que lo pueda
00:16:50
replicar cualquiera no llega a ser un objetivo
00:16:52
tampoco
00:16:54
al final tú haces una
00:16:54
página web y no tienes por qué poder replicar
00:16:57
a los demás, pero bueno
00:17:00
pregunta, a ver, originalidad
00:17:01
de la aplicación
00:17:04
presentas algo original
00:17:05
algo innovador, es uno de los puntos de la
00:17:07
Rubika
00:17:10
¿qué decía ahí
00:17:10
entre otras páginas de videojuegos?
00:17:14
O sea, al final lo que buscaba era que fuese algo básico y también un poco para poner en práctica mi conocimiento, ¿no? Y que fuese pues eso, una especie como de guía también replicable. A lo mejor con lo original puede ser pues su simplicidad y accesibilidad educativa, no sé.
00:17:16
que cualquier persona con nivel básico
00:17:33
que lea esto y lo vea
00:17:36
pueda hacerlo
00:17:38
no sé si a lo mejor es original el hecho de buscar una alternativa
00:17:39
como registro del ranking
00:17:42
como hice con Google Forms and Seeds
00:17:44
porque eso fue
00:17:46
como antepiedras que tuve en el camino
00:17:48
pues tuve que buscarme las habichuelas
00:17:49
Sí, eso para que fuera gratuito
00:17:51
y más o menos, vamos a ver
00:17:52
otra pregunta de la Rubika, la número 2
00:17:56
¿Identificas correctamente las necesidades
00:17:58
del proyecto?
00:18:00
¿a qué te refieres con?
00:18:01
Sí, las necesidades
00:18:07
¿has cumplido todas las necesidades que tenía el proyecto?
00:18:08
Sí, las necesidades del proyecto
00:18:11
se han identificado desde el principio
00:18:12
que al final crear esa página web
00:18:14
de online funcional y accesible
00:18:16
como hice, que fuera gratuita, que también es gratuita
00:18:18
por eso todo lo que he utilizado es gratuito
00:18:20
y que el registro de usuarios
00:18:22
y el ranking fuese real y dinámico
00:18:24
y fácil de implementar
00:18:26
y mantener, que era un poco el objetivo
00:18:28
Vale, está muy bien
00:18:30
Bueno, pues ya hemos pasado el tiempo. Muchas gracias.
00:18:32
Gracias a vos.
00:18:36
¿Tienes tu nota? ¿Cómo se llama esto?
00:18:36
Si no recuerdo mal, para el 26 de junio, ¿de acuerdo?
00:18:39
- Materias:
- Sistemas Microinformáticos y Redes
- Etiquetas:
- Redes locales
- Niveles educativos:
- ▼ Mostrar / ocultar niveles
- Formación Profesional
- Ciclo formativo de grado básico
- Primer Curso
- Segundo Curso
- Ciclo formativo de grado medio
- Primer Curso
- Segundo Curso
- Ciclo formativo de grado superior
- Primer Curso
- Segundo Curso
- Ciclo formativo de grado básico
- Autor/es:
- Eduardo Rojo Sánchez
- Subido por:
- Eduardo R.
- Licencia:
- Todos los derechos reservados
- Visualizaciones:
- 1
- Fecha:
- 16 de mayo de 2025 - 17:05
- Visibilidad:
- Clave
- Centro:
- IES CIFP a Distancia Ignacio Ellacuría
- Duración:
- 18′ 43″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1920x1080 píxeles
- Tamaño:
- 134.16 MBytes
