Saltar navegación

IA_4

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, que es empezar a partir de una imagen. Para ello, en lugar de ir directamente a la inteligencia artificial y empezar a explicar lo que queremos que cree, vamos a buscar una foto o imagen de algo que ya exista. Me voy a ir a Bing, mirad que simpática nutria nos ha puesto Bing hoy, y voy a buscar, por ejemplo, uno de mis videojuegos favoritos de cuando era pequeño, que era el juego Arkanoid. Me iré a imágenes. Lo que quiero aquí es simplemente hacer una captura de pantalla del propio juego, de lo que yo quiera crear. Voy a hacer la captura, perfecto, me voy a ir a la inteligencia artificial y la voy a pegar. 00:00:00
y después voy a poner mi prompt, fijaros como 00:00:26
cambia el prompt respecto a lo que hemos estado viendo 00:00:28
hasta ahora, porque es bastante más corto 00:00:30
le voy a pedir lo siguiente, programa un juego 00:00:33
como el de la imagen, fijaros que no le digo que tipo de juego es, ni le digo 00:00:34
que es un arcanoy, ni le doy pistas, le digo programa un juego 00:00:37
como el de la imagen, y simplemente le recuerdo 00:00:38
las nociones técnicas que le hemos ido pasando hasta ahora 00:00:40
que tenga un diseño atractivo, que use el CSS, que lo cargue 00:00:42
desde un CDN para no tener que compilar o cosas complejas 00:00:44
que incluya todo el código en un solo archivo, que nos dé instrucciones 00:00:46
etcétera, con lo cual solo pondré la última parte que 00:00:48
teníamos en común entre todos los ejemplos 00:00:50
que hemos ido viendo, y al enviar esta petición 00:00:52
Fijaros que la inteligencia artificial, seguramente, aquí lo tenemos, ha detectado que el juego es Arkanoid Breakout, otra de las marcas que usaba el juego para venderse, y directamente está programándolo a partir del conocimiento que tiene sobre este juego. 00:00:55
Así que no he tenido que decirle que quiero que la barra se pueda mover, que la bolita va rebotando entre los bloques y los va destruyendo. Todo esto lo ha adivinado o lo ha sabido a partir de la foto que le he pasado. 00:01:04
Lo más interesante es que, en lugar de una captura de pantalla, podría hacer exactamente lo mismo con una foto. Podría dibujar a mano en papel un formulario con algunos campos, podría hacerle una foto y le podría pedir que programe a partir de lo que le estoy enseñando. 00:01:13
Vamos a ver qué tal lo ha hecho, ya tengo el código hecho 00:01:22
Lo voy a copiar, me voy a ir a mi editor web 00:01:24
Lo voy a pegar, esperaré que, aquí está, que se coloree 00:01:27
Para que detecte que es HTML, y lo voy a guardar 00:01:29
Perfecto 00:01:31
Juego tipo Arkanoid 00:01:32
Aquí está, lo guardaré como juego 00:01:35
Versión 1, y vamos a ver qué tal 00:01:36
Ha quedado, qué maravilla 00:01:39
Estoy moviendo la barrita con las flechas 00:01:42
Lo que se puede meter entre los bloques, que es una de las cosas interesantes 00:01:45
Y como feedback, le podría dar que si os fijáis 00:01:46
La pelota rebota, y al rebotar, durante un momento 00:01:48
Está justo por debajo de la línea, lo podría mejorar 00:01:50
Y también, qué tal si añade la puntuación que vamos teniendo 00:01:52
y un poco más de color, vamos a ello 00:01:54
perfecto, le he dicho que funciona y que aplique 00:01:57
los siguientes cambios, le he explicado que al rebotar no quiero que la pelota 00:01:59
aparezca debajo de la barra, que mejore la estética 00:02:01
global, pues por ejemplo que la barra sea redondeada, que tenga 00:02:03
más detalle, colores, le he recordado que quiero que use tailwind 00:02:05
y que si quiere que haga algo de svg o imágenes 00:02:07
donde el propio código de la imagen puede estar dentro del código 00:02:09
fuente, es la forma más rápida que la IA lo implemente, pues que lo haga 00:02:11
si lo necesita, que mejore la estética 00:02:13
de los bloques y el fondo, todo con tailwind y que añade 00:02:15
un contador de puntuación y un número de vidas y que por defecto sea 00:02:17
antes, vamos a ver que hace, perfecto 00:02:19
acabado de generar el código, fijaros que hemos tenido suerte 00:02:31
porque justo se ha parado después de acabar 00:02:33
el código, para saber lo que nos iba a decir, podemos pulsar 00:02:35
para que continúe generándolo, pero al final lo importante 00:02:37
lo tenemos aquí arriba, perfecto 00:02:39
vamos a pegar el código, antes espero, voy a crear una nueva 00:02:40
versión, para guardar 00:02:43
siempre las versiones anteriores 00:02:45
y ahora ya lo podremos abrir 00:02:46
aquí lo tenemos 00:02:49
fijaros sin embargo que 00:02:50
sí que ha puesto todo el color, ha mejorado la estética, pero que no 00:02:52
funciona, estoy cada vez cargando colores distintos 00:02:54
pero que no consigo arrancar, entonces 00:02:56
igual es que está fallando el juego, entonces el anterior 00:02:58
funcionaba, aunque no era perfecto a nivel 00:03:00
estético, el nuevo no funciona. Aquí lo interesante 00:03:03
es que podemos darle una pista de lo que está fallando 00:03:05
y para hacerlo solamente tenemos que pulsar el botón derecho 00:03:06
y pulsar en Inspect. Esto es la 00:03:09
barra de desarrollo que llevan la mayoría de navegadores. 00:03:10
Fijaros que hay una barra que pone Consola. 00:03:13
Y aquí dentro normalmente cuando falle, como es el caso, 00:03:14
nos tira algún error, que es el error que está dando. Lo que podemos hacer 00:03:16
es copiar y pegarlo. Se lo voy a copiar y se lo voy a pegar. 00:03:18
Este aviso de Tailwind es normal. Nos dice que 00:03:21
esta forma de cargarlo con CDN está pensada 00:03:22
para desarrollos como el nuestro, pero no para subirlo 00:03:24
y distribuirlo por Internet, porque hay una forma 00:03:26
lo mejor que es compilándolo. En cualquier caso, lo que nos interesa 00:03:28
es esto, donde hay el error. Lo que haremos será 00:03:30
copiarlo y decirle 00:03:32
veo la estética nueva, pero no funciona. 00:03:34
Da un error. Y le copio directamente el error. 00:03:39
De esta forma, le estamos chivando a la inteligencia artificial 00:03:40
el error que no está y, efectivamente, 00:03:42
ya lo he detectado y que lo va a corregir. 00:03:44
Perfecto, ha generado un nuevo código. 00:03:50
Aquí lo copiaríamos y tenemos dos opciones. Podría crear una nueva versión, 00:03:52
sin embargo, justamente, la idea de crear versiones 00:03:54
es, por si algo no funciona, poder volver atrás. Así que, en este caso, 00:03:56
lo voy a copiar encima de la versión 2 que ya teníamos 00:03:57
y lo voy a guardar para ver si lo ha solucionado. 00:03:59
De esta forma solo estaré guardando las versiones que funcionan 00:04:01
Voy a cerrar la consola y lo voy a cargar 00:04:03
Y ahora sí que vemos que ha puesto los colores 00:04:05
Que van cambiando infinitamente 00:04:07
Y que ha implementado lo que le habíamos pedido 00:04:08
Fijaros que ya solo me queda una vida 00:04:11
Que va a incrementar la puntuación 00:04:12
Y si paso, me ha dicho fin del juego 00:04:12
Podríamos pedirle ahora que fuera implementando mejoras a partir de aquí 00:04:14
Pero vemos que funciona 00:04:17
Y de hecho voy a acabar la demo aquí 00:04:19
Porque acabo de reconectar con el PAU de 10 años 00:04:20
Y voy a quedar un ratito jugando 00:04:23
Etiquetas:
TIC
Autor/es:
Curso Copilot
Subido por:
Francisco Javier M.
Licencia:
Reconocimiento
Visualizaciones:
1
Fecha:
13 de enero de 2025 - 20:14
Visibilidad:
Clave
Centro:
C.TER.INN.Y FORM CTIF MADRID-SUR
Duración:
04′ 32″
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:
24.19 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid