Saltar navegación

IA_2

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 13 de enero de 2025 por Francisco Javier M.

1 visualizaciones

Más información Transcripción

Descargar la transcripción

vamos a empezar otro ejemplo en nuestro camino para ser compositores de software o crear software 00:00:04
con inteligencia artificial y en este caso vamos a programar un juego un juego que igual algunos 00:00:10
son ahora vamos a intentar imitar un juego clásico que se llamaba donde está carmen san diego que 00:00:14
básicamente consistía en a partir una serie de pistas identificar ciudades o países mientras 00:00:17
perseguidas a un ladrón es un juego bastante antiguo pero que a mí al menos cuando era niño 00:00:21
me encantaba para ello usaremos una inteligencia artificial como es el CPT Copilot en este caso 00:00:23
siempre usamos las versiones gratuitas y el prompt que vamos a usar ahora va a ser este 00:00:26
tiene una aplicación web para un juego de detectives al estilo de carmen san diego la 00:00:30
La aplicación debe presentar un escenario ideal de un robo en una ciudad famosa. 00:00:32
Aquí voy a explicar un poco lo que quiero que haga, pues ofrecer tres pistas del siguiente destino relacionadas con geografía, cultura e historia. 00:00:35
Los que jugasteis recordaréis que decía, he visto una bandera con estos tres colores, ¿dónde podría estar? 00:00:40
Le voy a pedir que permita que el jugador elija entre tres posibles destinos basados en las pistas, pensado para un público quizás más infantil, donde no puedan todavía saber la respuesta exacta. 00:00:43
Si no, lo podríamos quitar y pedir que el jugador tenga que escribir la respuesta. 00:00:51
Tener al menos cinco ciudades diferentes para visitar durante la persecución, un sistema de puntos y ofrecer datos interesantes sobre cada ciudad. 00:00:54
tener un final, el jugador intenta identificar al ladrón entre varios 00:00:59
sospechosos y tener un diseño atractivo y responsivo 00:01:01
y después pondremos las cosas que siempre ponemos, que todo el código 00:01:03
esté en un solo archivo, que usemos tailwind desde un cdn 00:01:05
etcétera, etcétera, y sin más vamos a ver 00:01:07
qué tal lo hace, aquí tienes el archivo html 00:01:09
y vamos a ver qué tal, mira qué divertido, lo ha llamado 00:01:11
juego de detectives, dónde está el ladrón, claro que sí 00:01:13
respetando el copyright, bien, bien 00:01:15
perfecto, hemos acabado de generar el código, nos explica 00:01:17
las instrucciones que tenemos que seguir, que son las mismas 00:01:19
que hemos ido siguiendo y las funcionalidades que tiene, voy a copiar 00:01:21
el código, voy a crear un nuevo archivo de texto 00:01:23
lo pego y pum, va a estar de blanco a color al detectar 00:01:25
que es HTML, muy bien, lo voy a guardar 00:01:27
voy a ver cómo, voy a 00:01:29
crear una nueva carpeta, juego de detectives 00:01:31
y dentro lo llamaré juego detectives 00:01:33
versión 1 00:01:35
perfecto, y vamos a verlo 00:01:37
aquí lo tenemos, ¿dónde está el ladrón? un famoso ladrón, una joya 00:01:39
oh Dios mío, sigue las pistas para atraparlo 00:01:41
se ha cometido un robo en París, el ladrón ha huido 00:01:43
sigue las pistas, la ciudad, alberga, tututun 00:01:45
pero si me está diciendo dónde ha sido, ¿dónde está el ladrón? 00:01:47
pues entiendo que estará en París, si no 00:01:49
muy bien, se ha llegado al punto, igual le tenemos que decir 00:01:51
Se ha cometido un robo en Tokio, ¿os dais cuenta que me está poniendo la ciudad? 00:01:53
Puede ser, puede ser, se ha equivocado la IA. 00:01:55
Con lo cual, ¿qué tal si se lo comentamos? 00:01:56
Funciona a medias. 00:01:58
Y le he pedido lo siguiente. 00:02:00
En primer lugar, y se lo he puesto en mayúsculas, 00:02:01
estamos diciendo qué ciudad es en el enunciado. 00:02:02
Es absurdo dar la respuesta. 00:02:03
Arreglalo, por favor. 00:02:04
Al final le estoy destacando que igual ha hecho algo que no tiene mucho sentido. 00:02:05
El juego debería ser más visual. 00:02:08
Añade emojis en las opciones, pone emojis gigantes, por ejemplo, del ladrón del detective. 00:02:09
Y le he pedido hacer la interfaz más bonita, con colores degradados y fuentes más chulas. 00:02:11
Vamos a ver qué hace. 00:02:14
y ya lo está generando, y fijaros que ha pasado algo 00:02:15
que tarde o temprano nos tenía que suceder, que es que no ha podido 00:02:17
generar todo el código, fijaros que es mucho, en una sola generación 00:02:19
sin embargo, nos tenemos que fijar siempre 00:02:21
que al acabar de generarlo, cierre con 00:02:23
lo típico que hemos visto antes de 00:02:25
cerrando body, que es el cuerpo de la página web 00:02:27
y html, pues aquí vemos que 00:02:29
aquí vemos que lo está generando, pero se ha quedado a medias 00:02:31
sin embargo, chatgpt nos pone un botón de continuar 00:02:33
generando, si no, le podríamos escribir literalmente continúa y lo haría 00:02:35
pero si pulso el botón, tiene una ventaja 00:02:37
que es que continúa generándolo dentro 00:02:39
de la ventana de código, con lo cual solo lo voy a tener que copiar una vez 00:02:41
si yo le escribiera que continuara, seguramente 00:02:43
generaría otro mensaje y me iría a copiar primero el primero y después 00:02:45
el segundo, pero usando el botón que nos ponen, nos lo 00:02:47
genera en el mismo lugar, fijaros que estaba a puntito ya de acabar 00:02:49
pero bueno, copiar código, antes 00:02:51
importante, voy a guardar como la 00:02:53
versión 2, antes de pegarlo, para que no me lo sustituya 00:02:55
automáticamente, y pasamos de un código de 170 líneas 00:02:57
a 184, bien, parece que es poco, pero vamos 00:02:59
a ver si ha mejorado algo, si ha mejorado, para 00:03:01
verlo antes, esto es lo que veíamos al principio, y ahora 00:03:03
ya ha mejorado, juego de detectives, encuentra al ladrón 00:03:05
alerta, se ha cometido un robo en una ciudad famosa, sigue las pistas 00:03:07
La ciudad alberga un monumento famoso, fue construido, pues, ¿cuál sería? 00:03:09
Las capitales más visitadas y cocina, queso y vino. 00:03:12
Pues igual es París. 00:03:14
Bien, correcto. 00:03:15
La verdad es que en París has ganado un punto. 00:03:15
Uy, fijaros que aquí le podemos pedir que si solo es uno lo digan en singular. 00:03:16
Siguiente. 00:03:19
Está en la ciudad más poblada del mundo, está en Asia. 00:03:19
Aquí se trae un evento olímpico. 00:03:21
Perfecto. 00:03:22
En 2021. 00:03:23
Los Juegos Olímpicos de 2021, que tendrían que haber sido en 2020, fueron en Tokio. 00:03:23
Duda. 00:03:26
Es la ciudad más poblada del mundo. 00:03:26
Igual resulta que se ha equivocado en este dato y es otra. 00:03:28
Lo podríamos comprobar. 00:03:29
Y si está mal, pues pedirlo que lo arregle 00:03:30
De hecho, lo podemos ir pidiendo o lo podemos arreglar nosotros mismos 00:03:32
Si poco a poco vamos viendo el código, vemos que es bastante fácil de entender 00:03:34
Fijaros que es la ciudad más poblada del mundo 00:03:36
Y está en Asia, pues podríamos cambiar esto por 00:03:38
Es la ciudad o es la capital del país donde nació el anime 00:03:40
Podríamos tocarlo aquí, sin embargo, si editamos el código directamente 00:03:42
Es muy importante después, en la IA que estamos usando 00:03:44
Pues arrastrar el archivo HTML 00:03:46
Con los cambios que ya hemos puesto, si no lo hemos tocado directamente 00:03:48
Pues le pedimos los cambios aquí, pero si sí lo hemos tocado 00:03:50
Pues obviamente la IA no sabe los cambios que hemos hecho, lo tenemos que arrastrar y soltar 00:03:52
Vamos a seguir viéndolo, entiendo que está en Tokio 00:03:54
Perfecto, se ha cometido un robo en la ciudad famosa 00:03:57
Es la ciudad conocida por su enorme parque en medio, Central Park 00:03:59
Bien, tengo dudas, ¿qué pasaría si lo pongo mal? 00:04:01
Sé que es Nueva York, pero, ¿qué pasa si pongo? Ah, mira, el ladrón está en Los Ángeles 00:04:02
Nueva York, sí, bien, un punto 00:04:04
Podríamos pedirle que, pues, que si lo haces mal, te arreste puntos y demás 00:04:06
Bien, la ciudad, por sus playas de Copacabana e Ipanema 00:04:08
Pues, el mundo moderno, maravillas 00:04:11
Unos carnavales más grandes, vamos a probar, si arriba de Janeiro 00:04:12
Perfecto, y la última 00:04:14
¿Cuál podría ser? Estambul, Atenas 00:04:16
El Cairo, vamos a ver, bien 00:04:19
Has ganado dos puntos 00:04:20
¿Quién crees que es el ladrón? 00:04:21
Pues aquí les podríamos pedir 00:04:22
Un poco de información, ¿no? 00:04:22
Igual es suficiente o no 00:04:24
Para saberlo 00:04:25
Pues yo creo que es Carlos 00:04:25
Pues toma, efectivamente 00:04:26
Tu condición es seis puntos 00:04:27
Evidentemente es un juego muy sencillo 00:04:28
Pero lo podríamos usar como base 00:04:29
Para ir cambiando 00:04:31
Con emojis 00:04:31
Lo que va pasando 00:04:32
Con escenas 00:04:32
Lo que quisiéramos 00:04:33
Es un muy buen ejemplo 00:04:33
Sobre cómo podemos crear 00:04:34
Cosas visuales divertidas 00:04:35
Usando la inteligencia artificial 00:04:36
Y hasta aquí este ejemplo 00:04:38
Vamos a ver otros distintos 00:04:38
Y yo creo que incluso 00:04:39
Alguno más complejo que este 00:04:41
Sigamos 00:04:42
Etiquetas:
TIC
Autor/es:
Curso Copilot.
Subido por:
Francisco Javier M.
Licencia:
Reconocimiento
Visualizaciones:
1
Fecha:
13 de enero de 2025 - 20:05
Visibilidad:
Clave
Centro:
C.TER.INN.Y FORM CTIF MADRID-SUR
Duración:
04′ 43″
Relación de aspecto:
16:9 Es el estándar usado por la televisión de alta definición y en varias pantallas, es ancho y normalmente se le suele llamar panorámico o widescreen, aunque todas las relaciones (a excepción de la 1:1) son widescreen. El ángulo de la diagonal es de 29,36°.
Resolución:
1360x768 píxeles
Tamaño:
23.06 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid