Saltar navegación

IA_1

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 13 de enero de 2025 por Francisco Javier M.

6 visualizaciones

Más información Transcripción

Descargar la transcripción

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. 00:00:00
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. 00:00:09
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. 00:00:16
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. 00:00:23
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. 00:00:41
Es totalmente gratis y, de hecho, es software libre. 00:00:46
Y se puede descargar para Mac, para Windows, para Linux, con lo cual lo vais a poder aplicar a vuestro sistema operativo. 00:00:48
Una vez lo tenéis descargado, esta es la interfaz y funciona exactamente igual. 00:00:52
Un archivo de texto, yo aquí empiezo a escribir y puedo ir guardando. 00:00:55
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. 00:00:58
¿Qué tipo de programas podemos crear? Cualquier cosa que nos imaginemos, aunque nos vamos a centrar en un tipo un poco concreto, 00:01:02
que son programas que funcionen en el navegador web para no tener que instalar nada, ni aprender a compilar, ni cosas más complejas. 00:01:06
Y aquí lo que tiene que volar es nuestra imaginación. ¿Queremos crear un planificador de menú semanal para nuestra familia? Lo podemos crear. 00:01:11
¿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. 00:01:15
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. 00:01:23
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, 00:01:29
que va a saber comunicar esa idea de forma efectiva 00:01:34
a la inteligencia artificial, por eso las clases de prompt engineering, 00:01:36
y que va a tener, eso sí, un método 00:01:38
que va a ir siguiendo siempre de forma 00:01:40
muy metódica, porque dentro de las instrucciones 00:01:42
del prompt que le daremos, hay algunas cosas que van a hacer 00:01:44
que el proceso sea muy fácil o menos fácil 00:01:46
y más tedioso. Por ejemplo, siempre que le 00:01:48
pidamos a la inteligencia artificial que nos genere un código, 00:01:50
está bien avisarla de que no somos programadores, 00:01:52
con lo cual que nos dé instrucciones claras de cómo ejecutar esa aplicación. 00:01:54
Le vamos a pedir que escriba todo el código, 00:01:57
en este caso que sea código web, y que escriba todo el código 00:01:59
en un solo archivo. De hecho, pondremos las tecnologías 00:02:00
que queremos que use, os voy a recomendar las más fáciles. 00:02:02
Le vamos a pedir cada vez que sugiera algún cambio 00:02:04
reescriba todo el código o nos diga de forma muy clara 00:02:06
qué cambios tenemos que hacer para que lo encontremos sin de nuevo 00:02:08
tener que saber programar, etcétera, etcétera. Vamos a verlo con un 00:02:10
primer ejemplo para ver lo que le tenemos que decir y qué tipos 00:02:12
de ejemplos podríamos ver. El primer ejemplo que vamos 00:02:14
a ejecutar, vamos a componer, va a ser 00:02:16
crear una aplicación que sirva para repasar las tablas de 00:02:18
multiplicar. De hecho, para seros sinceros, es algo que voy a usar 00:02:20
esta tarde cuando vuelva nuestro hijo mayor del cole porque 00:02:22
lo está aprendiendo ahora, o sea que seguro que le va a venir bien. 00:02:24
Yo voy a copiar el prompt que he preparado, lo puedes descargar 00:02:26
desde esta misma clase como ejemplo, y os voy a ir explicando lo que he puesto. 00:02:28
Le voy a pedir tirar una aplicación web simple para practicar las tablas de multiplicar. 00:02:31
Podéis cambiar, simple, compleja, completa, bonita, aquí os dejo a vosotros. 00:02:34
Muy importante, la aplicación que debe hacer, pues, mostrar una multiplicación aleatoria 00:02:37
del 1 al 10, o mejor, del 1 al 9. Bueno, en este caso lo voy a dejar así. 00:02:40
Permitir al usuario que introducir una respuesta, comprobar si la respuesta es correcta 00:02:44
y mostrar un mensaje, llevar la cuenta de aciertos y fallos, 00:02:46
a partir del punto donde hayamos acabado de explicar lo que queremos que nuestra aplicación haga. 00:02:48
Le voy a poner siempre una serie de mensajes. 00:02:52
Le voy a pedir que tenga un diseño atractivo y responsivo, 00:02:54
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. 00:02:55
Y le pediría que me propusiera instrucciones claras sobre cómo ejecutar esta aplicación 00:03:23
Aunque veréis que es muy fácil, siempre va bien que la IA nos lo vaya explicando 00:03:25
En este caso aquí podríamos añadir algunas cosas más 00:03:28
Por ejemplo, imaginad que yo le digo 00:03:29
Quiero que tenga un diseño atractivo, bonito 00:03:31
Con fuentes grandes y pensado 00:03:33
Para niños de 7 a 9 años 00:03:35
Y responsivo tanto 00:03:39
Una vez lo tenga escrito, directamente 00:03:39
Voy a poner al final, genera el código completo y asegúrate que se puede ejecutar 00:03:41
Haciendo doble clic en el archivo HTML resultante 00:03:43
Parece que no, pero aquí le estamos pidiendo algunas cosas 00:03:45
Como que no use ciertas tecnologías que requerirían instalar un servidor web 00:03:46
Parece tonto, pero creedme, no lo es 00:03:49
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. 00:03:51
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. 00:04:02
a poder hacer, por ejemplo, que el diseño sea atractivo 00:04:12
sin una cantidad de código bastante 00:04:15
más grande de lo que sería habitual. 00:04:17
Una vez acabado de escribir todo el código, nos da las instrucciones 00:04:19
y fijaros que siempre van a ser las mismas o muy, muy 00:04:21
parecidas. Nos pone copia todo el código en un archivo nuevo 00:04:23
y guárdalo con la extensión HTML. Perfecto. 00:04:24
Aquí hay el botón de copiar el código. No hace falta que seleccionemos 00:04:26
todo, sino que literalmente nos ponen un botón para copiarlo 00:04:28
y vamos a pegarlo. ¿Dónde? En el editor de texto 00:04:30
que queramos. Lo pego. Fijaros que solo pegarlo 00:04:32
y ha detectado que es HTML y me lo ha coloreado para saber que es cada cosa. 00:04:34
Siguiente punto. Nos dice 00:04:37
guardarlo, nos pone una sugerencia de nombre, 00:04:38
el nombre puede ser el que queramos, es tan fácil como ir a archivo, 00:04:41
guardar como. Muy importante, revisemos 00:04:43
que ya le ha puesto la extensión .html. 00:04:45
Yo lo voy a llamar practicando 00:04:47
tablas de multiplicar. Como anécdota, 00:04:48
esta forma de escribir, donde la primera letra de cada 00:04:51
palabra está en mayúsculas, los programadores lo llaman 00:04:53
camelized, o de camello, por la idea de que 00:04:55
son las chepas de cada palabra, para elevándose un poco. Es jerga 00:04:57
de programador, pero si queréis mostrar vuestras nuevas 00:04:59
skills o conocimientos para ser un conocedor software, 00:05:01
pues esto lo vamos a llamar camelized, que es una palabra 00:05:03
absolutamente inventada y sin mucho sentido. Muy importante poner 00:05:05
la extensión .html y os recomiendo tener una carpeta, la podéis llamar como queráis, 00:05:06
yo la he llamado compositor de software, donde ir guardando todas las creaciones que vayáis 00:05:10
haciendo. Lo guardo y en este momento ya podremos ver cómo ha quedado. ¿Y cómo lo vamos a 00:05:12
ver? Muy sencillo, con nuestro navegador de archivos, vemos aquí el archivo creado, hacemos 00:05:15
doble clic y se nos abre. Y aquí lo tenemos. Vamos a probar qué pasa, 14, correcto, aciertos 00:05:19
1, fallos 0, nueva multiplicación, 5 por 5, me voy a equivocar, voy a poner 10, comprobar, 00:05:23
uy, incorrecto la respuesta, es 25, perfecto, nueva multiplicación, 5 por 6, está bien. 00:05:27
La parte interesante empieza aquí, que es cuando queremos mejorarlo. Vuelvo a la misma 00:05:30
conversación y le voy a pedir ciertas mejoras. 00:05:34
La forma de redactarlo va a ser la siguiente. Pues le vamos a pedir 00:05:36
los cambios de esta forma. Primero, le voy a decir que 00:05:38
funciona, con lo cual lo que le estoy diciendo es que 00:05:40
no necesito cambios que arreglen problemas, sino 00:05:41
que esta versión era funcional. Y a pesar de eso 00:05:44
le pido los siguientes cambios. Y aquí vamos a describir muy bien 00:05:46
los cambios que queremos. Le he pedido que añade una cuenta atrás, que dure 10 segundos 00:05:47
y que muestre un contador de puntos de 1000 hasta 0, 00:05:50
cuanto más rápido responda lo suave, mejor. Fijaros en la forma de pedir 00:05:52
las cosas. Son bastante concretas. 00:05:54
Le podríamos poner, añade una cuenta atrás para que 00:05:56
sea más divertido jugar. Y seguramente haría algo así. Pero si sabemos 00:05:57
lo que queremos, intentemos explicar con palabras cómo imaginamos 00:06:00
la solución. Segundo punto, una vez haya enviado 00:06:02
su respuesta, muestra el mensaje incorrecto o incorrecto 00:06:04
correcto o incorrecto durante 3 segundos y 00:06:06
enseñar una multiplicación. Cuatro, vemos la puntuación obtenida 00:06:08
en todo momento. Cinco, al llegar a 10 multiplicaciones hechas 00:06:10
enseña el resultado de una forma 00:06:12
grande y vistosa. Importante, 00:06:14
escribe de nuevo todo el código completo. Le estamos 00:06:16
diciendo que no nos diga, cambia esta porción por esta otra. 00:06:18
Al final, igualmente lo acabará haciendo si la conversación es muy larga 00:06:20
porque no puede generar en una sola generación de ella 00:06:22
todo el código de nuevo. Así que nos dirá, busca esa sección y 00:06:24
pues cámbiala por esto otro. Si de repente nos dejara 00:06:26
de funcionar, podríamos arrastrar el archivo HTML 00:06:28
y pedirle que lo analice para ver dónde podría estar el error. 00:06:30
Aquí tenemos. Perfecto. Qué bien que funcione. 00:06:32
A continuación, he realizado los cambios solicitados. El código ahora 00:06:34
incluye, pues nos explica todo lo que ha hecho. Y el código 00:06:36
completo, aquí lo está creando. Ya ha acabado de generar 00:06:38
todo el código. Nos está explicando la descripción de los cambios 00:06:40
que ha hecho. En todo caso, cuando ya ha acabado, ya está la parte 00:06:42
de texto, pero la de código ya ha acabado, ya podemos ir avanzando, 00:06:44
copiar el código. Me voy donde 00:06:46
tengo todo el código. Y aquí podemos hacer dos cosas. 00:06:48
La primera sería guardar la versión anterior 00:06:50
con otro nombre. Porque quizás la nueva no funciona. 00:06:51
O quizás queremos volver a la anterior para poner algunos cambios. 00:06:54
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. 00:06:56
Depende del lenguaje de programación, nos lo va a enseñar entre trozos de código como estos 00:07:23
O por ejemplo con dos barras 00:07:26
Normalmente si está pintado de verde es que es un comentario 00:07:28
Que no es código en sí, sino que es una nota que nos deja la IA 00:07:30
Que podemos escribir a nosotros mismos para darnos algún mensaje 00:07:32
Por ejemplo, estos son variables para llevar la cuenta de aciertos 00:07:34
Esto es la función para tal, esto es la pantalla resultado final 00:07:37
Perfecto, así que voy a guardarlo 00:07:38
Lo voy a guardar como 00:07:40
Y lo voy a llamar, en este caso, practicante de multiplicar 00:07:42
Versión 2, aquí tengo la versión original 00:07:44
Que después también la voy a llamar versión 1 00:07:46
Y voy a ver la versión 2, a ver qué tal, bien 00:07:47
Puntos restantes, 3 por 7, ayayay, voy a poner 21 00:07:49
venga, correcto, tengo un acierto y 400 puntos 00:07:51
9 por 9, ¿qué pasa si me equivoco? 00:07:54
ostras, he perdido, voy 1 a 1 y sigo con 400 puntos 00:07:56
y de esta forma vamos a ir 00:07:58
preparándonos para 00:07:59
Etiquetas:
TIC
Autor/es:
Curso Copilot
Subido por:
Francisco Javier M.
Licencia:
Reconocimiento
Visualizaciones:
6
Fecha:
13 de enero de 2025 - 20:04
Visibilidad:
Clave
Centro:
C.TER.INN.Y FORM CTIF MADRID-SUR
Duración:
08′ 02″
Relación de aspecto:
16:9 Es el estándar usado por la televisión de alta definición y en varias pantallas, es ancho y normalmente se le suele llamar panorámico o widescreen, aunque todas las relaciones (a excepción de la 1:1) son widescreen. El ángulo de la diagonal es de 29,36°.
Resolución:
1360x768 píxeles
Tamaño:
29.31 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid