Programando A partir de imagen | Mediateca de EducaMadrid

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. 00:00:05

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. 00:00:21

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. 00:00:38

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. 00:00:54

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. 00:01:02

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, 00:01:09

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. 00:01:16

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

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:01:34

así que no he tenido que decirle que quiero que la barra se pueda mover, que la bolita va rebotando 00:01:41

entre los bloques y los va destruyendo. Todo esto lo ha adivinado o lo ha sabido a partir de la foto 00:01:47

que le he pasado. Lo más interesante es que en lugar de una captura de pantalla podría hacer 00:01:53

exactamente lo mismo con una foto. Podría dibujar a mano en papel un formulario con algunos campos, 00:01:59

podría hacerle una foto y le podría pedir que programe a partir de lo que le estoy enseñando. 00:02:04

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. 00:02:09

qué maravilla, estoy moviendo la barrita con las flechas, veo que se puede meter entre los bloques 00:02:34

que es una de las cosas interesantes y como feedback le podría dar que si os fijáis la pelota rebota 00:02:43

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

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

perfecto, le he dicho que funciona y que aplique los siguientes cambios 00:03:00

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. 00:03:04

que mejore la estética de los bloques y el fondo todo con tailwind y que añada un contador de 00:03:26

puntuación y un número de vidas y que por defecto sean tres vamos a ver qué hace perfecto y acaba 00:03:31

de generar el código fijaros que hemos tenido suerte porque justo se ha parado después de 00:03:52

acabar el código para saber lo que nos iba a decir podemos pulsar para que continúe generando lo pero 00:03:57

al final lo importante lo tenemos aquí arriba perfecto vamos a pegar el código antes pero voy 00:04:02

crear una nueva versión para guardar siempre las versiones anteriores y ahora ya lo podremos 00:04:09

aquí lo tenemos fijaros sin embargo que sí que ha puesto todo el color ha mejorado la estética pero 00:04:19

que no funciona estoy cada vez carga colores distintos pero que no consigo arrancar entonces 00:04:26

igual es que está fallando el juego entonces el anterior funcionaba aunque no era perfecto a 00:04:33

nivel estético el nuevo no funciona aquí lo interesante es que podemos darle una 00:04:39

pista de lo que está fallando y para hacerlo solamente tenemos que pulsar el 00:04:43

botón derecho y pulsar en inspect esto es la barra de desarrollo que llevan la 00:04:47

mayoría de navegadores fijaros que hay una parte pone consola y aquí dentro 00:04:53

normalmente cuando falle como es el caso nos tira algún error que es el error que 00:04:57

está dando lo que podemos hacer es copiar y pegarlo se lo voy a copiar y se 00:05:02

lo voy a pegar este aviso de tailwind es normal nos dice que esta forma de cargarlo con cdn está 00:05:05

pensada para pues desarrollos como nuestro pero no para subirlo a un distribuirlo por internet 00:05:11

porque hay una forma mejor que es compilando lo en cualquier caso lo que nos interesa es esto 00:05:17

donde hay el error lo que haremos será decir copiarlo y decirle decirle veo la estética nueva 00:05:21

pero no funciona da un error y le copio directamente el error de esta forma le estamos chivando a la 00:05:32

inteligente artificial el error que no está y efectivamente fijaros que ya lo ha detectado y 00:05:38

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

podría crear una nueva versión sin embargo justamente la idea de crear versiones es por 00:05:54

si algo no funciona poder volver atrás así que en este caso lo voy a copiar encima de la versión 2 00:05:59

que ya teníamos y lo voy a guardar para ver si lo ha solucionado de esta forma sólo estaré guardando 00:06:04

las versiones que funcionan voy a cerrar la consola y lo voy a cargar y ahora sí que vemos 00:06:09

que ha puesto los colores que van cambiando infinitamente y que ha implementado lo que le 00:06:14

habíamos pedido fijaros que ya sólo me queda una vida que va a incrementar la puntuación y si paso 00:06:20

me ha dicho fin del juego podríamos pedirle ahora que pues fuera implementando mejoras a partir de 00:06:24

aquí pero vemos que funciona y de hecho voy a acabar la demo aquí porque acabo de reconectar 00:06:31

con el Pau de 10 años 00:06:38

y voy a quedarme un ratito jugando 00:06:40

Programando A partir de imagen - Contenido educativo

Del mismo autor…

USO DE LA IA PARA IDENTIFICAR HERRAMIENTAS DEL TALLER DE TECNOLOGIA

Usar Insert y Update2

Usar Insert y Update1

Ensayo Los 3 Cerditos 3º ESO IES Miguel de Cervantes, Móstoles.

Actuación 2º de Primaria Carnaval (Aliens vs Astronauts)

Ensayo del Gato con Botas 3º ESO IES Miguel de Cervantes, Móstoles

Ensayo de Caperucita 3º ESO IES Miguel de Cervantes, Móstoles.