1
00:00:00,690 --> 00:00:09,449
Un juego sin saber programar. Y es que la IA nos permite, aunque no seamos programadores, crear pequeñas aplicaciones, juegos o páginas web que después podremos compartir o incluso usar nosotros mismos.

2
00:00:09,869 --> 00:00:16,070
Para poder empezar a crear nuestras aplicaciones sin tener que programar, o como lo llamamos desde Founders, ser compositores de software, vamos a necesitar simplemente un navegador web.

3
00:00:16,190 --> 00:00:23,030
Yo voy a usar Edge y vamos a tener abiertas diferentes pestañas. Yo tengo abiertas aquí dos inteligentes artificiales, ChatGPT en su versión gratuita y Copilot también en la versión gratis.

4
00:00:23,030 --> 00:00:41,890
Vamos a necesitar un editor de texto para poder pegar el código que la inteligencia artificial nos genere. La forma más fácil y directa es usar la versión web de un programa que se llama Visual Studio Code o VS Code. La versión web significa que no tenemos que instalar nada, que directamente desde aquí lo podemos usar, por ejemplo, yo voy a archivo, nuevo archivo de texto y aquí podría empezar a escribir o a pegar código. El propio programa detectará qué código es, por ejemplo, HTML y automáticamente lo va a colorear.

5
00:00:41,890 --> 00:00:46,710
Si sois de los que preferís tener el programa instalado en local, en el ordenador, el mismo programa, Visual Studio Code, se puede descargar.

6
00:00:46,789 --> 00:00:48,530
Es totalmente gratis y, de hecho, es software libre.

7
00:00:48,729 --> 00:00:52,649
Y se puede descargar para Mac, para Windows, para Linux, con lo cual lo vais a poder aplicar a vuestro sistema operativo.

8
00:00:52,929 --> 00:00:55,469
Una vez lo tenéis descargado, esta es la interfaz y funciona exactamente igual.

9
00:00:55,689 --> 00:00:58,149
Un archivo de texto, yo aquí empiezo a escribir y puedo ir guardando.

10
00:00:58,250 --> 00:01:02,049
Para las temas que vamos a ver en esta sección, vamos a usar la versión web, que es lo más fácil y directo que podemos usar.

11
00:01:02,049 --> 00:01:06,090
¿Qué tipo de programas podemos crear? Cualquier cosa que nos imaginemos, aunque nos vamos a centrar en un tipo un poco concreto,

12
00:01:06,090 --> 00:01:10,930
que son programas que funcionen en el navegador web para no tener que instalar nada, ni aprender a compilar, ni cosas más complejas.

13
00:01:11,170 --> 00:01:15,469
Y aquí lo que tiene que volar es nuestra imaginación. ¿Queremos crear un planificador de menú semanal para nuestra familia? Lo podemos crear.

14
00:01:15,670 --> 00:01:23,569
¿Podemos crear un juego de banderas para que los niños o nosotros mismos aprendamos cómo son las banderas de diferentes países? Pues sí, lo podemos crear con muy pocos minutos sin tener que aprender a programar.

15
00:01:23,629 --> 00:01:29,049
Con lo cual, aquí puede volar nuestra imaginación tanto como queramos, y de hecho, sin quererlo, me está empezando a gustar y me pasará aquí un ratito a ver qué punto hacía o no.

16
00:01:29,150 --> 00:01:34,370
Vamos a arrancar. Algunos puntos importantes que tenemos que definir. ¿Qué es un compositor de software? Pues es alguien que tiene una idea clara de lo que quiere crear, una idea,

17
00:01:34,370 --> 00:01:36,629
que va a saber comunicar esa idea de forma efectiva

18
00:01:36,629 --> 00:01:38,489
a la inteligencia artificial, por eso las clases de prompt engineering,

19
00:01:38,870 --> 00:01:40,709
y que va a tener, eso sí, un método

20
00:01:40,709 --> 00:01:42,510
que va a ir siguiendo siempre de forma

21
00:01:42,510 --> 00:01:44,810
muy metódica, porque dentro de las instrucciones

22
00:01:44,810 --> 00:01:46,629
del prompt que le daremos, hay algunas cosas que van a hacer

23
00:01:46,629 --> 00:01:48,670
que el proceso sea muy fácil o menos fácil

24
00:01:48,670 --> 00:01:50,629
y más tedioso. Por ejemplo, siempre que le

25
00:01:50,629 --> 00:01:52,670
pidamos a la inteligencia artificial que nos genere un código,

26
00:01:52,769 --> 00:01:54,450
está bien avisarla de que no somos programadores,

27
00:01:54,689 --> 00:01:56,810
con lo cual que nos dé instrucciones claras de cómo ejecutar esa aplicación.

28
00:01:57,349 --> 00:01:58,930
Le vamos a pedir que escriba todo el código,

29
00:01:59,109 --> 00:02:00,530
en este caso que sea código web, y que escriba todo el código

30
00:02:00,530 --> 00:02:02,530
en un solo archivo. De hecho, pondremos las tecnologías

31
00:02:02,530 --> 00:02:04,250
que queremos que use, os voy a recomendar las más fáciles.

32
00:02:04,530 --> 00:02:06,549
Le vamos a pedir cada vez que sugiera algún cambio

33
00:02:06,549 --> 00:02:08,389
reescriba todo el código o nos diga de forma muy clara

34
00:02:08,389 --> 00:02:10,330
qué cambios tenemos que hacer para que lo encontremos sin de nuevo

35
00:02:10,330 --> 00:02:12,389
tener que saber programar, etcétera, etcétera. Vamos a verlo con un

36
00:02:12,389 --> 00:02:14,490
primer ejemplo para ver lo que le tenemos que decir y qué tipos

37
00:02:14,490 --> 00:02:16,550
de ejemplos podríamos ver. El primer ejemplo que vamos

38
00:02:16,550 --> 00:02:18,349
a ejecutar, vamos a componer, va a ser

39
00:02:18,349 --> 00:02:20,430
crear una aplicación que sirva para repasar las tablas de

40
00:02:20,430 --> 00:02:22,509
multiplicar. De hecho, para seros sinceros, es algo que voy a usar

41
00:02:22,509 --> 00:02:24,349
esta tarde cuando vuelva nuestro hijo mayor del cole porque

42
00:02:24,349 --> 00:02:26,210
lo está aprendiendo ahora, o sea que seguro que le va a venir bien.

43
00:02:26,389 --> 00:02:28,370
Yo voy a copiar el prompt que he preparado, lo puedes descargar

44
00:02:28,370 --> 00:02:31,490
desde esta misma clase como ejemplo, y os voy a ir explicando lo que he puesto.

45
00:02:31,689 --> 00:02:34,370
Le voy a pedir tirar una aplicación web simple para practicar las tablas de multiplicar.

46
00:02:34,550 --> 00:02:37,590
Podéis cambiar, simple, compleja, completa, bonita, aquí os dejo a vosotros.

47
00:02:37,990 --> 00:02:40,530
Muy importante, la aplicación que debe hacer, pues, mostrar una multiplicación aleatoria

48
00:02:40,530 --> 00:02:43,930
del 1 al 10, o mejor, del 1 al 9. Bueno, en este caso lo voy a dejar así.

49
00:02:44,210 --> 00:02:46,490
Permitir al usuario que introducir una respuesta, comprobar si la respuesta es correcta

50
00:02:46,490 --> 00:02:48,349
y mostrar un mensaje, llevar la cuenta de aciertos y fallos,

51
00:02:48,669 --> 00:02:52,009
a partir del punto donde hayamos acabado de explicar lo que queremos que nuestra aplicación haga.

52
00:02:52,150 --> 00:02:53,990
Le voy a poner siempre una serie de mensajes.

53
00:02:54,229 --> 00:02:55,930
Le voy a pedir que tenga un diseño atractivo y responsivo,

54
00:02:55,930 --> 00:03:23,069
Esto significa que funcione, por ejemplo, en tabletas o incluso si lo cargo desde un teléfono funciona. Utilizando Tailwind CSS, es una librería de diseño, prácticamente CSS, de crear aplicaciones web que básicamente hace que con poco código podamos hacer cosas más vistosas. Le voy a pedir que incluya todo el código HTML, CSS y Javascript en un solo archivo. Esto es importante para que no nos genere el código de cuatro o cinco archivos separados y tengamos que ir pegándolo uno por uno y a veces entre ellos no se comuniquen bien. Le diré que cargue Tailwind desde un CDN. Esto significa que esta librería que vamos a usar la cargue desde Internet. Es gratis. De hecho, la librería es open source, con lo cual todo el mundo la puede usar, modificar como quiera.

55
00:03:23,069 --> 00:03:25,650
Y le pediría que me propusiera instrucciones claras sobre cómo ejecutar esta aplicación

56
00:03:25,650 --> 00:03:28,370
Aunque veréis que es muy fácil, siempre va bien que la IA nos lo vaya explicando

57
00:03:28,370 --> 00:03:29,729
En este caso aquí podríamos añadir algunas cosas más

58
00:03:29,729 --> 00:03:31,610
Por ejemplo, imaginad que yo le digo

59
00:03:31,610 --> 00:03:33,569
Quiero que tenga un diseño atractivo, bonito

60
00:03:33,569 --> 00:03:35,590
Con fuentes grandes y pensado

61
00:03:35,590 --> 00:03:39,129
Para niños de 7 a 9 años

62
00:03:39,129 --> 00:03:39,969
Y responsivo tanto

63
00:03:39,969 --> 00:03:41,509
Una vez lo tenga escrito, directamente

64
00:03:41,509 --> 00:03:43,750
Voy a poner al final, genera el código completo y asegúrate que se puede ejecutar

65
00:03:43,750 --> 00:03:45,590
Haciendo doble clic en el archivo HTML resultante

66
00:03:45,590 --> 00:03:46,810
Parece que no, pero aquí le estamos pidiendo algunas cosas

67
00:03:46,810 --> 00:03:49,949
Como que no use ciertas tecnologías que requerirían instalar un servidor web

68
00:03:49,949 --> 00:03:51,250
Parece tonto, pero creedme, no lo es

69
00:03:51,250 --> 00:04:01,990
Lo ejecuto, espero y automáticamente empieza a trabajar. Nos repasa lo que ha hecho. Le podríamos poner generar directamente el código y no me des explicaciones, pero nunca está de más, sobre todo por la parte de que le pedimos que nos dé instrucciones por si hay alguna cosa que no nos funciona.

70
00:04:02,229 --> 00:04:12,889
Empieza a generar el código. Esto que vemos aquí, esto de background.obg.blue100 es código de Tailwind, de esta librería que hemos puesto o que le hemos pedido que use, con lo cual con esta pequeña porción de código vamos a poder hacer cosas muy grandes.

71
00:04:12,889 --> 00:04:15,150
a poder hacer, por ejemplo, que el diseño sea atractivo

72
00:04:15,150 --> 00:04:17,029
sin una cantidad de código bastante

73
00:04:17,029 --> 00:04:18,790
más grande de lo que sería habitual.

74
00:04:19,310 --> 00:04:21,269
Una vez acabado de escribir todo el código, nos da las instrucciones

75
00:04:21,269 --> 00:04:23,050
y fijaros que siempre van a ser las mismas o muy, muy

76
00:04:23,050 --> 00:04:24,990
parecidas. Nos pone copia todo el código en un archivo nuevo

77
00:04:24,990 --> 00:04:26,730
y guárdalo con la extensión HTML. Perfecto.

78
00:04:26,889 --> 00:04:28,870
Aquí hay el botón de copiar el código. No hace falta que seleccionemos

79
00:04:28,870 --> 00:04:30,750
todo, sino que literalmente nos ponen un botón para copiarlo

80
00:04:30,750 --> 00:04:32,990
y vamos a pegarlo. ¿Dónde? En el editor de texto

81
00:04:32,990 --> 00:04:34,949
que queramos. Lo pego. Fijaros que solo pegarlo

82
00:04:34,949 --> 00:04:37,089
y ha detectado que es HTML y me lo ha coloreado para saber que es cada cosa.

83
00:04:37,589 --> 00:04:38,910
Siguiente punto. Nos dice

84
00:04:38,910 --> 00:04:40,970
guardarlo, nos pone una sugerencia de nombre,

85
00:04:41,029 --> 00:04:42,990
el nombre puede ser el que queramos, es tan fácil como ir a archivo,

86
00:04:43,250 --> 00:04:45,110
guardar como. Muy importante, revisemos

87
00:04:45,110 --> 00:04:46,689
que ya le ha puesto la extensión .html.

88
00:04:47,029 --> 00:04:48,750
Yo lo voy a llamar practicando

89
00:04:48,750 --> 00:04:51,149
tablas de multiplicar. Como anécdota,

90
00:04:51,350 --> 00:04:53,149
esta forma de escribir, donde la primera letra de cada

91
00:04:53,149 --> 00:04:55,269
palabra está en mayúsculas, los programadores lo llaman

92
00:04:55,269 --> 00:04:57,170
camelized, o de camello, por la idea de que

93
00:04:57,170 --> 00:04:59,170
son las chepas de cada palabra, para elevándose un poco. Es jerga

94
00:04:59,170 --> 00:05:01,069
de programador, pero si queréis mostrar vuestras nuevas

95
00:05:01,069 --> 00:05:02,949
skills o conocimientos para ser un conocedor software,

96
00:05:03,069 --> 00:05:05,089
pues esto lo vamos a llamar camelized, que es una palabra

97
00:05:05,089 --> 00:05:06,949
absolutamente inventada y sin mucho sentido. Muy importante poner

98
00:05:06,949 --> 00:05:10,050
la extensión .html y os recomiendo tener una carpeta, la podéis llamar como queráis,

99
00:05:10,110 --> 00:05:12,329
yo la he llamado compositor de software, donde ir guardando todas las creaciones que vayáis

100
00:05:12,329 --> 00:05:15,970
haciendo. Lo guardo y en este momento ya podremos ver cómo ha quedado. ¿Y cómo lo vamos a

101
00:05:15,970 --> 00:05:19,850
ver? Muy sencillo, con nuestro navegador de archivos, vemos aquí el archivo creado, hacemos

102
00:05:19,850 --> 00:05:23,649
doble clic y se nos abre. Y aquí lo tenemos. Vamos a probar qué pasa, 14, correcto, aciertos

103
00:05:23,649 --> 00:05:27,269
1, fallos 0, nueva multiplicación, 5 por 5, me voy a equivocar, voy a poner 10, comprobar,

104
00:05:27,389 --> 00:05:30,370
uy, incorrecto la respuesta, es 25, perfecto, nueva multiplicación, 5 por 6, está bien.

105
00:05:30,370 --> 00:05:34,089
La parte interesante empieza aquí, que es cuando queremos mejorarlo. Vuelvo a la misma

106
00:05:34,089 --> 00:05:36,149
conversación y le voy a pedir ciertas mejoras.

107
00:05:36,250 --> 00:05:38,170
La forma de redactarlo va a ser la siguiente. Pues le vamos a pedir

108
00:05:38,170 --> 00:05:40,089
los cambios de esta forma. Primero, le voy a decir que

109
00:05:40,089 --> 00:05:41,990
funciona, con lo cual lo que le estoy diciendo es que

110
00:05:41,990 --> 00:05:44,209
no necesito cambios que arreglen problemas, sino

111
00:05:44,209 --> 00:05:46,129
que esta versión era funcional. Y a pesar de eso

112
00:05:46,129 --> 00:05:47,970
le pido los siguientes cambios. Y aquí vamos a describir muy bien

113
00:05:47,970 --> 00:05:50,290
los cambios que queremos. Le he pedido que añade una cuenta atrás, que dure 10 segundos

114
00:05:50,290 --> 00:05:52,050
y que muestre un contador de puntos de 1000 hasta 0,

115
00:05:52,110 --> 00:05:54,110
cuanto más rápido responda lo suave, mejor. Fijaros en la forma de pedir

116
00:05:54,110 --> 00:05:55,970
las cosas. Son bastante concretas.

117
00:05:56,089 --> 00:05:57,910
Le podríamos poner, añade una cuenta atrás para que

118
00:05:57,910 --> 00:06:00,230
sea más divertido jugar. Y seguramente haría algo así. Pero si sabemos

119
00:06:00,230 --> 00:06:02,569
lo que queremos, intentemos explicar con palabras cómo imaginamos

120
00:06:02,569 --> 00:06:04,410
la solución. Segundo punto, una vez haya enviado

121
00:06:04,410 --> 00:06:06,589
su respuesta, muestra el mensaje incorrecto o incorrecto

122
00:06:06,589 --> 00:06:08,290
correcto o incorrecto durante 3 segundos y

123
00:06:08,290 --> 00:06:10,329
enseñar una multiplicación. Cuatro, vemos la puntuación obtenida

124
00:06:10,329 --> 00:06:12,269
en todo momento. Cinco, al llegar a 10 multiplicaciones hechas

125
00:06:12,269 --> 00:06:14,389
enseña el resultado de una forma

126
00:06:14,389 --> 00:06:16,050
grande y vistosa. Importante,

127
00:06:16,449 --> 00:06:18,290
escribe de nuevo todo el código completo. Le estamos

128
00:06:18,290 --> 00:06:20,129
diciendo que no nos diga, cambia esta porción por esta otra.

129
00:06:20,209 --> 00:06:22,170
Al final, igualmente lo acabará haciendo si la conversación es muy larga

130
00:06:22,170 --> 00:06:24,290
porque no puede generar en una sola generación de ella

131
00:06:24,290 --> 00:06:26,290
todo el código de nuevo. Así que nos dirá, busca esa sección y

132
00:06:26,290 --> 00:06:28,269
pues cámbiala por esto otro. Si de repente nos dejara

133
00:06:28,269 --> 00:06:30,230
de funcionar, podríamos arrastrar el archivo HTML

134
00:06:30,230 --> 00:06:32,050
y pedirle que lo analice para ver dónde podría estar el error.

135
00:06:32,470 --> 00:06:34,149
Aquí tenemos. Perfecto. Qué bien que funcione.

136
00:06:34,269 --> 00:06:36,029
A continuación, he realizado los cambios solicitados. El código ahora

137
00:06:36,029 --> 00:06:38,250
incluye, pues nos explica todo lo que ha hecho. Y el código

138
00:06:38,250 --> 00:06:40,250
completo, aquí lo está creando. Ya ha acabado de generar

139
00:06:40,250 --> 00:06:42,269
todo el código. Nos está explicando la descripción de los cambios

140
00:06:42,269 --> 00:06:44,329
que ha hecho. En todo caso, cuando ya ha acabado, ya está la parte

141
00:06:44,329 --> 00:06:46,430
de texto, pero la de código ya ha acabado, ya podemos ir avanzando,

142
00:06:46,670 --> 00:06:48,269
copiar el código. Me voy donde

143
00:06:48,269 --> 00:06:49,889
tengo todo el código. Y aquí podemos hacer dos cosas.

144
00:06:50,230 --> 00:06:51,949
La primera sería guardar la versión anterior

145
00:06:51,949 --> 00:06:54,110
con otro nombre. Porque quizás la nueva no funciona.

146
00:06:54,290 --> 00:06:56,089
O quizás queremos volver a la anterior para poner algunos cambios.

147
00:06:56,089 --> 00:07:23,610
Así que mi sugerencia es que editéis el nombre del archivo y le pongáis, por ejemplo, versión 1. Y aquí lo que voy a hacer es seleccionar todo el código. Puedo hacerlo con una combinación de teclado o puedo bajar y seleccionarlo manualmente y lo borro y voy a pegar la nueva versión. Como detalle, fijaros que ha crecido el número de líneas. Es un buen síntoma de que ha generado de nuevo todo el código y no solo algunas partes. Normalmente, si pasamos de 200 líneas a 70 líneas, podría ser un indicador de que no ha generado todo el código y de que por aquí habrá algún comentario que nos diga, deja este trozo como estaba. ¿Qué es un comentario? Es esto marcado en verde.

148
00:07:23,610 --> 00:07:26,930
Depende del lenguaje de programación, nos lo va a enseñar entre trozos de código como estos

149
00:07:26,930 --> 00:07:28,170
O por ejemplo con dos barras

150
00:07:28,170 --> 00:07:30,069
Normalmente si está pintado de verde es que es un comentario

151
00:07:30,069 --> 00:07:32,709
Que no es código en sí, sino que es una nota que nos deja la IA

152
00:07:32,709 --> 00:07:34,670
Que podemos escribir a nosotros mismos para darnos algún mensaje

153
00:07:34,670 --> 00:07:37,189
Por ejemplo, estos son variables para llevar la cuenta de aciertos

154
00:07:37,189 --> 00:07:38,889
Esto es la función para tal, esto es la pantalla resultado final

155
00:07:38,889 --> 00:07:40,949
Perfecto, así que voy a guardarlo

156
00:07:40,949 --> 00:07:42,029
Lo voy a guardar como

157
00:07:42,029 --> 00:07:44,810
Y lo voy a llamar, en este caso, practicante de multiplicar

158
00:07:44,810 --> 00:07:46,550
Versión 2, aquí tengo la versión original

159
00:07:46,550 --> 00:07:47,769
Que después también la voy a llamar versión 1

160
00:07:47,769 --> 00:07:49,129
Y voy a ver la versión 2, a ver qué tal, bien

161
00:07:49,129 --> 00:07:51,949
Puntos restantes, 3 por 7, ayayay, voy a poner 21

162
00:07:51,949 --> 00:07:54,250
venga, correcto, tengo un acierto y 400 puntos

163
00:07:54,250 --> 00:07:55,829
9 por 9, ¿qué pasa si me equivoco?

164
00:07:56,089 --> 00:07:58,529
ostras, he perdido, voy 1 a 1 y sigo con 400 puntos

165
00:07:58,529 --> 00:07:59,949
y de esta forma vamos a ir

166
00:07:59,949 --> 00:08:01,509
preparándonos para