1
00:00:00,430 --> 00:00:26,589
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.

2
00:00:26,589 --> 00:00:28,910
y después voy a poner mi prompt, fijaros como

3
00:00:28,910 --> 00:00:30,929
cambia el prompt respecto a lo que hemos estado viendo

4
00:00:30,929 --> 00:00:33,170
hasta ahora, porque es bastante más corto

5
00:00:33,170 --> 00:00:34,829
le voy a pedir lo siguiente, programa un juego

6
00:00:34,829 --> 00:00:37,130
como el de la imagen, fijaros que no le digo que tipo de juego es, ni le digo

7
00:00:37,130 --> 00:00:38,829
que es un arcanoy, ni le doy pistas, le digo programa un juego

8
00:00:38,829 --> 00:00:40,789
como el de la imagen, y simplemente le recuerdo

9
00:00:40,789 --> 00:00:42,810
las nociones técnicas que le hemos ido pasando hasta ahora

10
00:00:42,810 --> 00:00:44,929
que tenga un diseño atractivo, que use el CSS, que lo cargue

11
00:00:44,929 --> 00:00:46,710
desde un CDN para no tener que compilar o cosas complejas

12
00:00:46,710 --> 00:00:48,869
que incluya todo el código en un solo archivo, que nos dé instrucciones

13
00:00:48,869 --> 00:00:50,750
etcétera, con lo cual solo pondré la última parte que

14
00:00:50,750 --> 00:00:52,929
teníamos en común entre todos los ejemplos

15
00:00:52,929 --> 00:00:55,070
que hemos ido viendo, y al enviar esta petición

16
00:00:55,070 --> 00:01:04,370
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.

17
00:01:04,370 --> 00:01:13,090
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.

18
00:01:13,469 --> 00:01:22,969
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.

19
00:01:22,969 --> 00:01:24,849
Vamos a ver qué tal lo ha hecho, ya tengo el código hecho

20
00:01:24,849 --> 00:01:27,310
Lo voy a copiar, me voy a ir a mi editor web

21
00:01:27,310 --> 00:01:29,209
Lo voy a pegar, esperaré que, aquí está, que se coloree

22
00:01:29,209 --> 00:01:31,349
Para que detecte que es HTML, y lo voy a guardar

23
00:01:31,349 --> 00:01:32,689
Perfecto

24
00:01:32,689 --> 00:01:35,090
Juego tipo Arkanoid

25
00:01:35,090 --> 00:01:36,790
Aquí está, lo guardaré como juego

26
00:01:36,790 --> 00:01:39,049
Versión 1, y vamos a ver qué tal

27
00:01:39,049 --> 00:01:42,920
Ha quedado, qué maravilla

28
00:01:42,920 --> 00:01:45,019
Estoy moviendo la barrita con las flechas

29
00:01:45,019 --> 00:01:46,799
Lo que se puede meter entre los bloques, que es una de las cosas interesantes

30
00:01:46,799 --> 00:01:48,920
Y como feedback, le podría dar que si os fijáis

31
00:01:48,920 --> 00:01:50,920
La pelota rebota, y al rebotar, durante un momento

32
00:01:50,920 --> 00:01:52,379
Está justo por debajo de la línea, lo podría mejorar

33
00:01:52,379 --> 00:01:54,980
Y también, qué tal si añade la puntuación que vamos teniendo

34
00:01:54,980 --> 00:01:57,099
y un poco más de color, vamos a ello

35
00:01:57,099 --> 00:01:59,280
perfecto, le he dicho que funciona y que aplique

36
00:01:59,280 --> 00:02:01,299
los siguientes cambios, le he explicado que al rebotar no quiero que la pelota

37
00:02:01,299 --> 00:02:03,120
aparezca debajo de la barra, que mejore la estética

38
00:02:03,120 --> 00:02:05,120
global, pues por ejemplo que la barra sea redondeada, que tenga

39
00:02:05,120 --> 00:02:07,239
más detalle, colores, le he recordado que quiero que use tailwind

40
00:02:07,239 --> 00:02:09,280
y que si quiere que haga algo de svg o imágenes

41
00:02:09,280 --> 00:02:11,360
donde el propio código de la imagen puede estar dentro del código

42
00:02:11,360 --> 00:02:13,400
fuente, es la forma más rápida que la IA lo implemente, pues que lo haga

43
00:02:13,400 --> 00:02:15,159
si lo necesita, que mejore la estética

44
00:02:15,159 --> 00:02:17,139
de los bloques y el fondo, todo con tailwind y que añade

45
00:02:17,139 --> 00:02:19,139
un contador de puntuación y un número de vidas y que por defecto sea

46
00:02:19,139 --> 00:02:31,280
antes, vamos a ver que hace, perfecto

47
00:02:31,280 --> 00:02:33,219
acabado de generar el código, fijaros que hemos tenido suerte

48
00:02:33,219 --> 00:02:35,240
porque justo se ha parado después de acabar

49
00:02:35,240 --> 00:02:37,159
el código, para saber lo que nos iba a decir, podemos pulsar

50
00:02:37,159 --> 00:02:39,039
para que continúe generándolo, pero al final lo importante

51
00:02:39,039 --> 00:02:40,900
lo tenemos aquí arriba, perfecto

52
00:02:40,900 --> 00:02:43,120
vamos a pegar el código, antes espero, voy a crear una nueva

53
00:02:43,120 --> 00:02:45,000
versión, para guardar

54
00:02:45,000 --> 00:02:46,800
siempre las versiones anteriores

55
00:02:46,800 --> 00:02:49,300
y ahora ya lo podremos abrir

56
00:02:49,300 --> 00:02:50,599
aquí lo tenemos

57
00:02:50,599 --> 00:02:52,599
fijaros sin embargo que

58
00:02:52,599 --> 00:02:54,979
sí que ha puesto todo el color, ha mejorado la estética, pero que no

59
00:02:54,979 --> 00:02:56,939
funciona, estoy cada vez cargando colores distintos

60
00:02:56,939 --> 00:02:58,939
pero que no consigo arrancar, entonces

61
00:02:58,939 --> 00:03:00,900
igual es que está fallando el juego, entonces el anterior

62
00:03:00,900 --> 00:03:03,039
funcionaba, aunque no era perfecto a nivel

63
00:03:03,039 --> 00:03:05,060
estético, el nuevo no funciona. Aquí lo interesante

64
00:03:05,060 --> 00:03:06,939
es que podemos darle una pista de lo que está fallando

65
00:03:06,939 --> 00:03:09,039
y para hacerlo solamente tenemos que pulsar el botón derecho

66
00:03:09,039 --> 00:03:10,860
y pulsar en Inspect. Esto es la

67
00:03:10,860 --> 00:03:12,900
barra de desarrollo que llevan la mayoría de navegadores.

68
00:03:13,240 --> 00:03:14,520
Fijaros que hay una barra que pone Consola.

69
00:03:14,819 --> 00:03:16,599
Y aquí dentro normalmente cuando falle, como es el caso,

70
00:03:16,840 --> 00:03:18,919
nos tira algún error, que es el error que está dando. Lo que podemos hacer

71
00:03:18,919 --> 00:03:21,039
es copiar y pegarlo. Se lo voy a copiar y se lo voy a pegar.

72
00:03:21,259 --> 00:03:22,819
Este aviso de Tailwind es normal. Nos dice que

73
00:03:22,819 --> 00:03:24,759
esta forma de cargarlo con CDN está pensada

74
00:03:24,759 --> 00:03:26,819
para desarrollos como el nuestro, pero no para subirlo

75
00:03:26,819 --> 00:03:28,879
y distribuirlo por Internet, porque hay una forma

76
00:03:28,879 --> 00:03:30,819
lo mejor que es compilándolo. En cualquier caso, lo que nos interesa

77
00:03:30,819 --> 00:03:32,620
es esto, donde hay el error. Lo que haremos será

78
00:03:32,620 --> 00:03:34,780
copiarlo y decirle

79
00:03:34,780 --> 00:03:38,919
veo la estética nueva, pero no funciona.

80
00:03:39,060 --> 00:03:40,479
Da un error. Y le copio directamente el error.

81
00:03:40,900 --> 00:03:42,780
De esta forma, le estamos chivando a la inteligencia artificial

82
00:03:42,780 --> 00:03:44,300
el error que no está y, efectivamente,

83
00:03:44,500 --> 00:03:46,439
ya lo he detectado y que lo va a corregir.

84
00:03:50,819 --> 00:03:51,939
Perfecto, ha generado un nuevo código.

85
00:03:52,120 --> 00:03:54,159
Aquí lo copiaríamos y tenemos dos opciones. Podría crear una nueva versión,

86
00:03:54,300 --> 00:03:56,180
sin embargo, justamente, la idea de crear versiones

87
00:03:56,180 --> 00:03:57,879
es, por si algo no funciona, poder volver atrás. Así que, en este caso,

88
00:03:57,900 --> 00:03:59,939
lo voy a copiar encima de la versión 2 que ya teníamos

89
00:03:59,939 --> 00:04:01,939
y lo voy a guardar para ver si lo ha solucionado.

90
00:04:01,939 --> 00:04:03,699
De esta forma solo estaré guardando las versiones que funcionan

91
00:04:03,699 --> 00:04:05,340
Voy a cerrar la consola y lo voy a cargar

92
00:04:05,340 --> 00:04:07,400
Y ahora sí que vemos que ha puesto los colores

93
00:04:07,400 --> 00:04:08,539
Que van cambiando infinitamente

94
00:04:08,539 --> 00:04:11,000
Y que ha implementado lo que le habíamos pedido

95
00:04:11,000 --> 00:04:12,219
Fijaros que ya solo me queda una vida

96
00:04:12,219 --> 00:04:12,960
Que va a incrementar la puntuación

97
00:04:12,960 --> 00:04:14,039
Y si paso, me ha dicho fin del juego

98
00:04:14,039 --> 00:04:17,660
Podríamos pedirle ahora que fuera implementando mejoras a partir de aquí

99
00:04:17,660 --> 00:04:19,019
Pero vemos que funciona

100
00:04:19,019 --> 00:04:20,939
Y de hecho voy a acabar la demo aquí

101
00:04:20,939 --> 00:04:23,800
Porque acabo de reconectar con el PAU de 10 años

102
00:04:23,800 --> 00:04:25,060
Y voy a quedar un ratito jugando