1 00:00:03,569 --> 00:00:09,529 vamos a ver ahora cómo podemos usar la inteligencia artificial para programar una 2 00:00:09,529 --> 00:00:14,689 pequeña aplicación un juego sin saber programar y es que la ia nos permite aunque no seamos 3 00:00:14,689 --> 00:00:19,929 programadores crear pequeñas aplicaciones juegos o páginas web que después podremos compartir o 4 00:00:19,929 --> 00:00:24,410 incluso usar nosotros mismos para poder empezar a crear nuestras aplicaciones sin tener que 5 00:00:24,410 --> 00:00:29,089 programar o como lo llamamos desde founders ser compositores de software vamos a necesitar 6 00:00:29,089 --> 00:00:35,310 simplemente un navegador web. Yo voy a usar Edge y vamos a tener abiertas diferentes pestañas. Yo 7 00:00:35,310 --> 00:00:40,409 tengo abiertas aquí dos inteligentes artificiales, ChatGPT en su versión gratuita y Copilot también 8 00:00:40,409 --> 00:00:45,630 en la versión gratis. Vamos a necesitar un editor de texto para poder pegar el código que la 9 00:00:45,630 --> 00:00:51,369 inteligencia artificial nos genere. La forma más fácil y directa es usar la versión web de un 10 00:00:51,369 --> 00:00:55,890 programa que se llama Visual Studio Code o VS Code. La versión web significa que no tenemos 11 00:00:55,890 --> 00:01:00,549 que instalar nada que directamente desde aquí lo podemos usar por ejemplo yo voy a archivo nuevo 12 00:01:00,549 --> 00:01:06,030 archivo de texto y aquí podría empezar a escribir oa pegar código el propio programa detectará qué 13 00:01:06,030 --> 00:01:11,890 código es por ejemplo html y automáticamente lo va a colorear si sois de los que preferís tener 14 00:01:11,890 --> 00:01:16,829 el programa instalado en local en el ordenador el mismo programa visual studio code se puede 15 00:01:16,829 --> 00:01:22,890 descargar es totalmente gratis y de hecho software libre y se puede descargar para mac para windows 16 00:01:22,890 --> 00:01:27,290 para linux con lo cual lo vais a poder aplicar a vuestro sistema operativo una vez lo tenéis 17 00:01:27,290 --> 00:01:32,010 descargado esta es la interfaz y funciona exactamente igual un archivo de texto y aquí 18 00:01:32,010 --> 00:01:37,209 empieza a escribir y puedo ir guardando para las temas que vamos a ver en esta sección vamos a usar 19 00:01:37,209 --> 00:01:41,829 la versión web que es lo más fácil y directo que podemos usar qué tipo de programas podemos crear 20 00:01:41,829 --> 00:01:46,810 cualquier cosa que nos imaginemos aunque nos vamos a centrar en un tipo un poco concreto que son 21 00:01:46,810 --> 00:01:52,430 programas que funcionen en el navegador web para no tener que instalar nada ni aprender a compilar 22 00:01:52,430 --> 00:01:56,870 ni cosas más complejas y aquí lo que tiene que volar es nuestra imaginación queremos crear un 23 00:01:56,870 --> 00:02:02,510 planificador de menús semanal para nuestra familia lo podemos crear podemos crear un juego de banderas 24 00:02:02,510 --> 00:02:06,890 para que los niños nosotros mismos aprendamos cómo son las banderas de diferentes países pues 25 00:02:06,890 --> 00:02:13,409 si lo podemos crear con muy pocos minutos sin tener que aprender a programar con lo cual aquí 26 00:02:13,409 --> 00:02:19,069 puede volar nuestra imaginación tanto como queramos y de hecho sin quererlo me está empezando a gustar 27 00:02:19,069 --> 00:02:23,610 pasar aquí un ratito a ver qué puntuación hago vamos a arrancar algunos puntos importantes que 28 00:02:23,610 --> 00:02:27,110 tenemos que definir que es un compositor de software pues es alguien que tiene una idea 29 00:02:27,110 --> 00:02:32,150 clara de lo que quiere crear una idea que va a saber comunicar esa idea de forma efectiva 30 00:02:32,150 --> 00:02:37,449 la inteligencia artificial por eso las clases de pronto engineering y que va a tener eso sí 31 00:02:37,449 --> 00:02:44,449 un método que va a ir siguiendo siempre de forma muy metódica porque dentro de las instrucciones 32 00:02:44,449 --> 00:02:49,909 del prompt que le daremos hay algunas cosas que van a hacer que el proceso sea muy fácil o menos 33 00:02:49,909 --> 00:02:55,770 fácil y más tedioso. Por ejemplo, siempre que le pidamos a la inteligencia artificial que nos genere 34 00:02:55,770 --> 00:03:00,550 un código está bien avisarla de que no somos programadores, con lo cual que nos dé instrucciones 35 00:03:00,550 --> 00:03:06,229 claras de cómo ejecutar esa aplicación. Le vamos a pedir que escriba todo el código, en este caso 36 00:03:06,229 --> 00:03:10,490 que sea código web, y que escriba todo el código en un solo archivo. De hecho pondremos las 37 00:03:10,490 --> 00:03:15,810 tecnologías que queremos que use, os voy a recomendar las más fáciles, le vamos a pedir que cada vez que 38 00:03:15,810 --> 00:03:21,210 sugiera algún cambio reescriba todo el código o nos diga de forma muy clara qué cambios tenemos que hacer 39 00:03:21,210 --> 00:03:25,750 para que lo encontremos sin de nuevo tener que saber programar, etcétera, etcétera. Vamos a verlo con un 40 00:03:25,750 --> 00:03:30,849 primer ejemplo para ver lo que le tenemos que decir y qué tipos de ejemplos podríamos ver. El primer 41 00:03:30,849 --> 00:03:37,090 ejemplo que vamos a ejecutar, vamos a componer, va a ser crear una aplicación que sirva para repasar 42 00:03:37,090 --> 00:03:41,409 las tablas de multiplicar. De hecho, para seros sinceros, es algo que voy a usar esta tarde 43 00:03:41,409 --> 00:03:45,409 cuando vuelva nuestro hijo mayor del cole, porque lo está aprendiendo ahora, o sea que es seguro 44 00:03:45,409 --> 00:03:49,770 que le va a venir bien. Yo voy a copiar el prompt que he preparado, lo puedes descargar 45 00:03:49,770 --> 00:03:54,430 desde esta misma clase como ejemplo, y os voy a ir explicando lo que he puesto. 46 00:03:54,689 --> 00:03:58,729 Le voy a pedir crear una aplicación web simple para practicar las tablas de multiplicar. 47 00:03:59,069 --> 00:04:03,590 Podéis cambiar, simple, compleja, completa, bonita, aquí os dejo a vosotros. 48 00:04:03,590 --> 00:04:08,689 muy importante la aplicación que debe hacer pues mostrar una multiplicación aleatoria del 1 al 10 49 00:04:08,689 --> 00:04:15,349 o mejor del 1 al 9 en este caso lo voy a dejar así permite al usuario que introducir una respuesta 50 00:04:15,349 --> 00:04:19,610 comprobar si la respuesta es correcta y mostrar un mensaje llevar la cuenta de aciertos y fallos 51 00:04:19,610 --> 00:04:24,649 a partir del punto donde hayamos acabado de explicar lo que queremos que nuestra aplicación 52 00:04:24,649 --> 00:04:30,170 haga le voy a poner siempre una serie de mensajes le voy a pedir que tenga un diseño atractivo y 53 00:04:30,170 --> 00:04:35,569 irresponsivo esto significa que pues funcione por ejemplo en tabletas o incluso si lo cargo desde 54 00:04:35,569 --> 00:04:43,009 un teléfono que funciona utilizando tailwind css es una librería de diseño técnicamente css de crear 55 00:04:43,009 --> 00:04:48,050 aplicaciones web que básicamente hace que con poco código podamos hacer cosas más vistosas le voy a 56 00:04:48,050 --> 00:04:52,250 pedir que incluya todo el código html css y javascript en un solo archivo esto es importante 57 00:04:52,250 --> 00:04:56,990 para que no nos genere pues el código de cuatro o cinco archivos separados y tengamos que ir 58 00:04:56,990 --> 00:05:01,850 pegándolo uno por uno y a veces entre ellos no se comuniquen bien le diré que cargue tailwind 59 00:05:01,850 --> 00:05:07,850 desde un cd en esto significa que esta librería que vamos a usar la cargue desde internet es gratis 60 00:05:07,850 --> 00:05:11,769 de hecho la librería es open source con lo cual todo el mundo puede usar modificar como quiera 61 00:05:11,769 --> 00:05:16,129 y le pediría que me proporciona instrucciones claras sobre cómo ejecutar esta aplicación aunque 62 00:05:16,129 --> 00:05:20,810 veréis que es muy fácil siempre va bien que la ya nos lo vaya explicando en este caso aquí podríamos 63 00:05:20,810 --> 00:05:26,230 añadir algunas cosas más por ejemplo imaginad que yo le digo quiero que tenga un diseño atractivo 64 00:05:26,230 --> 00:05:37,629 bonito con fuentes grandes y pensado para niños niños de 7 a 9 años irresponsivo tanto una vez 65 00:05:37,629 --> 00:05:42,230 lo tenga escrito directamente voy a poner al final general código completo y asegúrate que 66 00:05:42,230 --> 00:05:46,329 se puede ejecutar haciendo doble clic en el archivo html resultante parece que no pero aquí 67 00:05:46,329 --> 00:05:51,310 le estamos pidiendo algunas cosas como que no use ciertas tecnologías que requerirían pues instalar 68 00:05:51,310 --> 00:05:57,550 un servidor web parece tonto pero no lo es lo ejecutó espero y automáticamente empieza a 69 00:05:57,550 --> 00:06:03,790 trabajar nos repasa lo que ha hecho le podríamos poner genera directamente el código y no me des 70 00:06:03,790 --> 00:06:07,709 explicaciones pero nunca está de más sobre todo por la parte de que le pedimos que nos 71 00:06:07,709 --> 00:06:12,170 instrucciones por si hay alguna cosa que no nos funciona empieza a generar el código esto que 72 00:06:12,170 --> 00:06:19,509 vemos aquí esto de background o bg blue 100 es código de tailwind de esta librería que hemos 73 00:06:19,509 --> 00:06:25,230 puesto o que le hemos pedido que use, con lo cual con esta pequeña porción de código vamos a poder 74 00:06:25,230 --> 00:06:30,350 hacer cosas muy grandes, a poder hacer pues por ejemplo que el diseño sea atractivo sin una 75 00:06:30,350 --> 00:06:37,490 cantidad de código bastante más grande de lo que sería pues habitual. Una vez acabado de escribir 76 00:06:37,490 --> 00:06:41,910 todo el código nos da las instrucciones y fijaros que siempre van a ser las mismas o muy muy muy 77 00:06:41,910 --> 00:06:46,310 parecidas. Nos pone copia todo el código en un archivo nuevo y guárdalo con la extensión html. 78 00:06:46,870 --> 00:06:53,310 Perfecto. Aquí hay el botón de copiar el código. No hace falta que seleccionemos todo, sino que literalmente nos ponen un botón para copiarlo. 79 00:06:53,709 --> 00:06:57,410 Y vamos a pegarlo. ¿Dónde? En el editor de texto que queramos. 80 00:06:57,829 --> 00:07:02,810 Lo pego. Fijaros que es solo pegarlo y ha detectado que es HTML y me lo ha coloreado para saber qué es cada cosa. 81 00:07:03,589 --> 00:07:09,810 Siguiente punto. Nos dice guárdalo. Nos pone una sugerencia de nombre. El nombre puede ser el que queramos. 82 00:07:09,810 --> 00:07:12,850 Es tan fácil como ir a archivo, guardar como. 83 00:07:12,850 --> 00:07:22,930 Muy importante, revisemos que ya le he puesto la extensión .html. Yo lo voy a llamar practicando tablas de multiplicar. 84 00:07:22,930 --> 00:07:34,329 Como anécdota, esta forma de escribir donde la primera letra de cada palabra está en mayúsculas, los programadores lo llaman camelized o de camello por la idea de que son las chepas de cada palabra. 85 00:07:34,329 --> 00:07:41,610 va elevándose un poco. Es jerga de programador, pero si queréis mostrar vuestras nuevas skills o conocimientos para ser un compositor de software, 86 00:07:41,790 --> 00:07:46,610 pues esto lo vamos a llamar Camelized, que es una palabra absolutamente inventada y sin mucho sentido. 87 00:07:46,990 --> 00:07:52,250 Muy importante poner la extensión .html y os recomiendo tener una carpeta, la podéis llamar como queráis, 88 00:07:52,329 --> 00:07:56,129 yo la he llamado compositor de software, donde ir guardando todas las creaciones que vayáis haciendo. 89 00:07:56,569 --> 00:08:00,329 Lo guardo y en este momento ya podremos ver cómo ha quedado. 90 00:08:00,329 --> 00:08:22,730 ¿Y cómo lo vamos a ver? Muy sencillo. Con nuestro navegador de archivos, vemos aquí el archivo creado, hacemos doble clic y se nos abre. Y aquí lo tenemos. Vamos a probar qué pasa. 14, correcto, aciertos 1, fallos 0, nueva multiplicación. 5 por 5, me voy a equivocar, voy a poner 10, comprobar. Uy, incorrecto, la respuesta es 25, perfecto, nueva multiplicación. 5 por 6, está bien. 91 00:08:22,730 --> 00:08:47,450 La parte interesante empieza aquí, que es cuando queremos mejorarlo. Vuelvo a la misma conversación y le voy a pedir ciertas mejoras. La forma de redactarlo va a ser la siguiente. Pues le vamos a pedir los cambios de esta forma. Primero le voy a decir que funciona, con lo cual lo que le estoy diciendo es que no necesito cambios que arreglen problemas, sino que esta versión era funcional y a pesar de eso le pido los siguientes cambios. 92 00:08:47,450 --> 00:09:11,629 Y aquí vamos a describir muy bien los cambios que queremos. Le he pedido que añade una cuenta atrás que dure 10 segundos y que muestre un contador de puntos de 1000 hasta 0. Cuanto más rápido responda el usuario, mejor. Ficaros la forma de pedir las cosas. Son bastante concretas. Le podríamos poner, añade una cuenta atrás para que sea más divertido jugar y seguramente haría algo así. Pero si sabemos lo que queremos, intentemos explicar con palabras cómo imaginamos la solución. 93 00:09:11,629 --> 00:09:30,389 Segundo punto, una vez haya enviado su respuesta, muestra el mensaje incorrecto o incorrecto durante tres segundos y enseña la nueva multiplicación. Cuatro, ve mostrando la puntuación obtenida en todo momento. Cinco, al llegar a diez multiplicaciones hechas, enseña el resultado de una forma grande y vistosa. 94 00:09:30,389 --> 00:09:35,610 importante escribe de nuevo todo el código completo le estamos diciendo que no nos diga 95 00:09:35,610 --> 00:09:39,809 cambia esta porción por esta otra al final igualmente lo acabar haciendo si la conversación 96 00:09:39,809 --> 00:09:44,909 es muy larga porque no puede generar en una sola generación de ella todo el código de nuevo así que 97 00:09:44,909 --> 00:09:50,070 nos tira busca esta sección y cambiarla por esto otro si de repente nos dejará de funcionar 98 00:09:50,070 --> 00:09:55,230 podríamos arrastrar el archivo html y pedirle que lo analice para ver dónde podría estar el error 99 00:09:55,889 --> 00:09:58,409 Aquí tenemos, perfecto, qué bien que funcione. 100 00:09:58,590 --> 00:10:04,029 A continuación he realizado los cambios solicitados, el código ahora incluye, pues nos explica todo lo que ha hecho. 101 00:10:04,149 --> 00:10:06,289 Y el código completo, aquí lo está creando. 102 00:10:06,830 --> 00:10:11,429 Ya ha acabado de generar todo el código y nos está explicando la descripción de los cambios que ha hecho. 103 00:10:11,429 --> 00:10:17,990 En todo caso, cuando ya ha acabado, y está la parte de texto pero la de código ya ha acabado, ya podemos ir avanzando, copiar el código. 104 00:10:18,669 --> 00:10:21,990 Me voy donde tengo todo el código y aquí podemos hacer dos cosas. 105 00:10:21,990 --> 00:10:38,389 La primera sería guardar la versión anterior con otro nombre, porque quizás la nueva no funciona o quizás queremos volver a la anterior para poner algunos cambios. Así que mi sugerencia es que editéis el nombre del archivo y le pongáis, por ejemplo, versión 1. 106 00:10:38,389 --> 00:10:44,149 y aquí lo que voy a hacer es seleccionar todo el código puedo hacerlo con una combinación de 107 00:10:44,149 --> 00:10:50,929 teclado o puedo bajar y seleccionarlo manualmente y lo borro y voy a pegar la nueva versión como 108 00:10:50,929 --> 00:10:55,789 detalle fijaros que ha crecido el número de líneas es un buen síntoma de que ha generado de nuevo 109 00:10:55,789 --> 00:11:01,830 todo el código y no sólo algunas partes normalmente si pasamos de 200 líneas a 70 líneas podría ser un 110 00:11:01,830 --> 00:11:07,129 indicador de que no ha generado todo el código y de que por aquí habrá algún comentario que nos 111 00:11:07,129 --> 00:11:13,190 diga deja este trozo como estaba que es un comentario es esto marcado en verde depende 112 00:11:13,190 --> 00:11:18,529 el lenguaje de programación nos lo va a enseñar entre trozos de código como estos o por ejemplo 113 00:11:18,529 --> 00:11:23,389 con dos barras normalmente si está pintado de verde es que es un comentario que no es código 114 00:11:23,389 --> 00:11:28,490 en sí sino que es una nota que nos deja la ya que podemos escribir a nosotros mismos para darnos 115 00:11:28,490 --> 00:11:33,450 algún mensaje por ejemplo estos son variables para llevar la cuenta de aciertos esto es la 116 00:11:33,450 --> 00:11:39,509 función para tal esto es la pantalla resultado final perfecto así que voy a guardarlo lo voy 117 00:11:39,509 --> 00:11:45,929 a guardar como y lo voy a llamar en este caso practican tales de multiplicar versión 2 aquí 118 00:11:45,929 --> 00:11:50,009 tengo la versión original que después también llamado versión 1 y voy a ver la versión 2 a 119 00:11:50,009 --> 00:11:56,789 ver qué tal bien punto restante es 3 por 7 ahí voy a poner 21 venga correcto tengo un acierto 120 00:11:56,789 --> 00:12:17,370 Y 400 puntos. 9 por 9. ¿Qué pasa si me equivoco? Ostras, he perdido. Voy 1 a 1 y sigo con 400 puntos. Y de esta forma vamos a ir preparándonos para ir mejorando la aplicación. Fijaros qué pasa. Solo me quedan ya... Mira, ya no me quedan puntos. Se ha pasado el tiempo, pero me da la respuesta. 121 00:12:17,370 --> 00:12:22,169 está perfecto de esta forma podríamos permitir a nuestro hijo que vaya jugando pero darle un poco 122 00:12:22,169 --> 00:12:26,129 de prisa para entender que las tablas en este caso es mejor que salgan de memoria sin estar 123 00:12:26,129 --> 00:12:30,990 esperando que de alguna forma manualmente lo calculemos con el cerebro y al acabar dejadme 124 00:12:30,990 --> 00:12:36,370 ver cómo es al acabar si ha hecho esta parte de que sólo haga 10 1 por 6 voy a poner alguna 125 00:12:36,370 --> 00:12:41,850 respuesta mal perfecto y imagen de hecho esta no es la misma ha puesto antes le podríamos pedir 126 00:12:41,850 --> 00:12:48,049 que no repita las que ha hecho o al contrario o que si bien voy a ver quiero hacer algunas bien 127 00:12:48,049 --> 00:12:54,629 y algunas mal voy 4 a 4 aquí pondremos algo mal perfecto y ahora las vamos a poner bien pues 128 00:12:54,629 --> 00:13:00,149 perfecto venga vamos allá a partir de ahora ya todas bien aquí lo estamos resultado final 5 y 129 00:13:00,149 --> 00:13:05,370 5 con 3.100 puntos pues esto es para mí como padre os diría que es maravilloso porque comentamos que 130 00:13:05,370 --> 00:13:09,730 el niño cuantos más aciertos haga más puntuación tendrá pero a la vez al ver el resultado y 131 00:13:09,730 --> 00:13:14,710 enseñarlo a sus papis pues va a poder enseñar qué tal lo ha hecho también a nivel de aciertos 132 00:13:14,710 --> 00:13:19,090 y fallos si lo acertado todo pero muy poca puntuación significa que se toma mucho tiempo 133 00:13:19,090 --> 00:13:24,669 y con lo cual no es ideal otra sugerencia ya si queréis este código que tenéis lo 134 00:13:24,669 --> 00:13:29,210 podéis compartir lo podéis enviar por whatsapp a otra persona podéis enviar por email y al 135 00:13:29,210 --> 00:13:32,230 final cualquier persona que lo reciba haciendo doble clic se le abrirá un 136 00:13:32,230 --> 00:13:37,210 navegador y va a poder utilizarlo y visto esto vamos a pasar al siguiente ejemplo