1
00:00:05,870 --> 00:00:21,269
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.

2
00:00:21,269 --> 00:00:38,229
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.

3
00:00:38,229 --> 00:00:54,630
Voy a hacer la captura. Perfecto. Me voy a ir a la inteligencia artificial y la voy a pegar. Y después voy a poner mi prompt. Fijaros cómo cambia el prompt respecto a lo que hemos estado viendo hasta ahora, porque es bastante más corto.

4
00:00:54,630 --> 00:01:02,250
le voy a pedir lo siguiente. Programa un juego como el de la imagen. Fijaros que no le digo qué tipo de juego es, ni le digo que es un Arcanoid, ni le doy pistas.

5
00:01:02,310 --> 00:01:09,129
Le digo programa un juego como el de la imagen y simplemente le recuerdo las nociones técnicas que le hemos ido pasando hasta ahora.

6
00:01:09,629 --> 00:01:16,750
Que tenga un diseño atractivo, que use Teluín CSS, que lo cargue desde un CDN para no tener que compilar o cosas complejas, que incluya todo el código en un solo archivo,

7
00:01:16,750 --> 00:01:24,969
que nos dé instrucciones, etc. Con lo cual solo pondré la última parte que teníamos en común entre todos los ejemplos que hemos ido viendo.

8
00:01:25,890 --> 00:01:34,049
Y al enviar esta petición, fijaros que la inteligencia artificial seguramente, aquí lo tenemos, ha detectado que los juegos Arkanoid o Breakout,

9
00:01:34,150 --> 00:01:41,450
otra de las marcas que usaba el juego para venderse, y directamente está programándolo a partir del conocimiento que tiene sobre este juego.

10
00:01:41,450 --> 00:01:47,049
así que no he tenido que decirle que quiero que la barra se pueda mover, que la bolita va rebotando

11
00:01:47,049 --> 00:01:53,969
entre los bloques y los va destruyendo. Todo esto lo ha adivinado o lo ha sabido a partir de la foto

12
00:01:53,969 --> 00:01:59,250
que le he pasado. Lo más interesante es que en lugar de una captura de pantalla podría hacer

13
00:01:59,250 --> 00:02:04,170
exactamente lo mismo con una foto. Podría dibujar a mano en papel un formulario con algunos campos,

14
00:02:04,569 --> 00:02:09,349
podría hacerle una foto y le podría pedir que programe a partir de lo que le estoy enseñando.

15
00:02:09,349 --> 00:02:34,250
Vamos a ver qué tal lo ha hecho, ya tengo el código hecho, lo voy a copiar, me voy a ir a mi editor web, lo voy a pegar, esperaré que aquí está, que se coloree para que detecte que es HTML y lo voy a guardar, perfecto, juego tipo Arkanoid, aquí está, lo guardaré como juego versión 1 y vamos a ver qué tal ha quedado.

16
00:02:34,250 --> 00:02:43,860
qué maravilla, estoy moviendo la barrita con las flechas, veo que se puede meter entre los bloques

17
00:02:43,860 --> 00:02:49,259
que es una de las cosas interesantes y como feedback le podría dar que si os fijáis la pelota rebota

18
00:02:49,259 --> 00:02:53,479
y al rebotar durante un momento está justo por debajo de la línea, lo podría mejorar

19
00:02:53,479 --> 00:03:00,520
y también qué tal si añade la puntuación que vamos teniendo y un poco más de color, vamos a ello

20
00:03:00,520 --> 00:03:04,800
perfecto, le he dicho que funciona y que aplique los siguientes cambios

21
00:03:04,800 --> 00:03:26,020
Le he explicado que al rebotar no quiero que la pelota aparezca debajo de la barra. Que mejore la estética global, por ejemplo que la barra sea redondeada, que tenga más detalle, colores. Le he recordado que quiero que use Tailwind y que si quiere que haga algo de SVG o imágenes donde el propio código de la imagen puede estar dentro del código fuente, es la forma más rápida que la IA lo implemente, pues que lo haga si lo necesita.

22
00:03:26,020 --> 00:03:31,120
que mejore la estética de los bloques y el fondo todo con tailwind y que añada un contador de

23
00:03:31,120 --> 00:03:52,080
puntuación y un número de vidas y que por defecto sean tres vamos a ver qué hace perfecto y acaba

24
00:03:52,080 --> 00:03:57,460
de generar el código fijaros que hemos tenido suerte porque justo se ha parado después de

25
00:03:57,460 --> 00:04:02,520
acabar el código para saber lo que nos iba a decir podemos pulsar para que continúe generando lo pero

26
00:04:02,520 --> 00:04:09,000
al final lo importante lo tenemos aquí arriba perfecto vamos a pegar el código antes pero voy

27
00:04:09,000 --> 00:04:18,350
crear una nueva versión para guardar siempre las versiones anteriores y ahora ya lo podremos

28
00:04:19,790 --> 00:04:26,930
aquí lo tenemos fijaros sin embargo que sí que ha puesto todo el color ha mejorado la estética pero

29
00:04:26,930 --> 00:04:33,290
que no funciona estoy cada vez carga colores distintos pero que no consigo arrancar entonces

30
00:04:33,290 --> 00:04:39,310
igual es que está fallando el juego entonces el anterior funcionaba aunque no era perfecto a

31
00:04:39,310 --> 00:04:43,930
nivel estético el nuevo no funciona aquí lo interesante es que podemos darle una

32
00:04:43,930 --> 00:04:47,949
pista de lo que está fallando y para hacerlo solamente tenemos que pulsar el

33
00:04:47,949 --> 00:04:53,389
botón derecho y pulsar en inspect esto es la barra de desarrollo que llevan la

34
00:04:53,389 --> 00:04:57,670
mayoría de navegadores fijaros que hay una parte pone consola y aquí dentro

35
00:04:57,670 --> 00:05:02,230
normalmente cuando falle como es el caso nos tira algún error que es el error que

36
00:05:02,230 --> 00:05:05,889
está dando lo que podemos hacer es copiar y pegarlo se lo voy a copiar y se

37
00:05:05,889 --> 00:05:11,529
lo voy a pegar este aviso de tailwind es normal nos dice que esta forma de cargarlo con cdn está

38
00:05:11,529 --> 00:05:17,350
pensada para pues desarrollos como nuestro pero no para subirlo a un distribuirlo por internet

39
00:05:17,350 --> 00:05:21,490
porque hay una forma mejor que es compilando lo en cualquier caso lo que nos interesa es esto

40
00:05:21,490 --> 00:05:32,420
donde hay el error lo que haremos será decir copiarlo y decirle decirle veo la estética nueva

41
00:05:32,420 --> 00:05:38,279
pero no funciona da un error y le copio directamente el error de esta forma le estamos chivando a la

42
00:05:38,279 --> 00:05:43,439
inteligente artificial el error que no está y efectivamente fijaros que ya lo ha detectado y

43
00:05:43,439 --> 00:05:54,740
que lo va a corregir perfecto ha generado un nuevo código aquí lo copiaríamos y tenemos dos opciones

44
00:05:54,740 --> 00:05:59,540
podría crear una nueva versión sin embargo justamente la idea de crear versiones es por

45
00:05:59,540 --> 00:06:04,019
si algo no funciona poder volver atrás así que en este caso lo voy a copiar encima de la versión 2

46
00:06:04,019 --> 00:06:09,079
que ya teníamos y lo voy a guardar para ver si lo ha solucionado de esta forma sólo estaré guardando

47
00:06:09,079 --> 00:06:14,660
las versiones que funcionan voy a cerrar la consola y lo voy a cargar y ahora sí que vemos

48
00:06:14,660 --> 00:06:20,839
que ha puesto los colores que van cambiando infinitamente y que ha implementado lo que le

49
00:06:20,839 --> 00:06:24,980
habíamos pedido fijaros que ya sólo me queda una vida que va a incrementar la puntuación y si paso

50
00:06:24,980 --> 00:06:31,199
me ha dicho fin del juego podríamos pedirle ahora que pues fuera implementando mejoras a partir de

51
00:06:31,199 --> 00:06:38,399
aquí pero vemos que funciona y de hecho voy a acabar la demo aquí porque acabo de reconectar

52
00:06:38,399 --> 00:06:40,639
con el Pau de 10 años

53
00:06:40,639 --> 00:06:42,120
y voy a quedarme un ratito jugando