Saltar navegación

Programar con IA - Contenido educativo

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 9 de febrero de 2025 por M. Pilar P.

1 visualizaciones

Más información Transcripción

Descargar la transcripción

vamos a ver ahora cómo podemos usar la inteligencia artificial para programar una 00:00:03
pequeña aplicación un juego sin saber programar y es que la ia nos permite aunque no seamos 00:00:09
programadores crear pequeñas aplicaciones juegos o páginas web que después podremos compartir o 00:00:14
incluso usar nosotros mismos para poder empezar a crear nuestras aplicaciones sin tener que 00:00:19
programar o como lo llamamos desde founders ser compositores de software vamos a necesitar 00:00:24
simplemente un navegador web. Yo voy a usar Edge y vamos a tener abiertas diferentes pestañas. Yo 00:00:29
tengo abiertas aquí dos inteligentes artificiales, ChatGPT en su versión gratuita y Copilot también 00:00:35
en la versión gratis. Vamos a necesitar un editor de texto para poder pegar el código que la 00:00:40
inteligencia artificial nos genere. La forma más fácil y directa es usar la versión web de un 00:00:45
programa que se llama Visual Studio Code o VS Code. La versión web significa que no tenemos 00:00:51
que instalar nada que directamente desde aquí lo podemos usar por ejemplo yo voy a archivo nuevo 00:00:55
archivo de texto y aquí podría empezar a escribir oa pegar código el propio programa detectará qué 00:01:00
código es por ejemplo html y automáticamente lo va a colorear si sois de los que preferís tener 00:01:06
el programa instalado en local en el ordenador el mismo programa visual studio code se puede 00:01:11
descargar es totalmente gratis y de hecho software libre y se puede descargar para mac para windows 00:01:16
para linux con lo cual lo vais a poder aplicar a vuestro sistema operativo una vez lo tenéis 00:01:22
descargado esta es la interfaz y funciona exactamente igual un archivo de texto y aquí 00:01:27
empieza a escribir y puedo ir guardando para las temas que vamos a ver en esta sección vamos a usar 00:01:32
la versión web que es lo más fácil y directo que podemos usar qué tipo de programas podemos crear 00:01:37
cualquier cosa que nos imaginemos aunque nos vamos a centrar en un tipo un poco concreto que son 00:01:41
programas que funcionen en el navegador web para no tener que instalar nada ni aprender a compilar 00:01:46
ni cosas más complejas y aquí lo que tiene que volar es nuestra imaginación queremos crear un 00:01:52
planificador de menús semanal para nuestra familia lo podemos crear podemos crear un juego de banderas 00:01:56
para que los niños nosotros mismos aprendamos cómo son las banderas de diferentes países pues 00:02:02
si lo podemos crear con muy pocos minutos sin tener que aprender a programar con lo cual aquí 00:02:06
puede volar nuestra imaginación tanto como queramos y de hecho sin quererlo me está empezando a gustar 00:02:13
pasar aquí un ratito a ver qué puntuación hago vamos a arrancar algunos puntos importantes que 00:02:19
tenemos que definir que es un compositor de software pues es alguien que tiene una idea 00:02:23
clara de lo que quiere crear una idea que va a saber comunicar esa idea de forma efectiva 00:02:27
la inteligencia artificial por eso las clases de pronto engineering y que va a tener eso sí 00:02:32
un método que va a ir siguiendo siempre de forma muy metódica porque dentro de las instrucciones 00:02:37
del prompt que le daremos hay algunas cosas que van a hacer que el proceso sea muy fácil o menos 00:02:44
fácil y más tedioso. Por ejemplo, siempre que le pidamos a la inteligencia artificial que nos genere 00:02:49
un código está bien avisarla de que no somos programadores, con lo cual que nos dé instrucciones 00:02:55
claras de cómo ejecutar esa aplicación. Le vamos a pedir que escriba todo el código, en este caso 00:03:00
que sea código web, y que escriba todo el código en un solo archivo. De hecho pondremos las 00:03:06
tecnologías que queremos que use, os voy a recomendar las más fáciles, le vamos a pedir que cada vez que 00:03:10
sugiera algún cambio reescriba todo el código o nos diga de forma muy clara qué cambios tenemos que hacer 00:03:15
para que lo encontremos sin de nuevo tener que saber programar, etcétera, etcétera. Vamos a verlo con un 00:03:21
primer ejemplo para ver lo que le tenemos que decir y qué tipos de ejemplos podríamos ver. El primer 00:03:25
ejemplo que vamos a ejecutar, vamos a componer, va a ser crear una aplicación que sirva para repasar 00:03:30
las tablas de multiplicar. De hecho, para seros sinceros, es algo que voy a usar esta tarde 00:03:37
cuando vuelva nuestro hijo mayor del cole, porque lo está aprendiendo ahora, o sea que es seguro 00:03:41
que le va a venir bien. Yo voy a copiar el prompt que he preparado, lo puedes descargar 00:03:45
desde esta misma clase como ejemplo, y os voy a ir explicando lo que he puesto. 00:03:49
Le voy a pedir crear una aplicación web simple para practicar las tablas de multiplicar. 00:03:54
Podéis cambiar, simple, compleja, completa, bonita, aquí os dejo a vosotros. 00:03:59
muy importante la aplicación que debe hacer pues mostrar una multiplicación aleatoria del 1 al 10 00:04:03
o mejor del 1 al 9 en este caso lo voy a dejar así permite al usuario que introducir una respuesta 00:04:08
comprobar si la respuesta es correcta y mostrar un mensaje llevar la cuenta de aciertos y fallos 00:04:15
a partir del punto donde hayamos acabado de explicar lo que queremos que nuestra aplicación 00:04:19
haga le voy a poner siempre una serie de mensajes le voy a pedir que tenga un diseño atractivo y 00:04:24
irresponsivo esto significa que pues funcione por ejemplo en tabletas o incluso si lo cargo desde 00:04:30
un teléfono que funciona utilizando tailwind css es una librería de diseño técnicamente css de crear 00:04:35
aplicaciones web que básicamente hace que con poco código podamos hacer cosas más vistosas le voy a 00:04:43
pedir que incluya todo el código html css y javascript en un solo archivo esto es importante 00:04:48
para que no nos genere pues el código de cuatro o cinco archivos separados y tengamos que ir 00:04:52
pegándolo uno por uno y a veces entre ellos no se comuniquen bien le diré que cargue tailwind 00:04:56
desde un cd en esto significa que esta librería que vamos a usar la cargue desde internet es gratis 00:05:01
de hecho la librería es open source con lo cual todo el mundo puede usar modificar como quiera 00:05:07
y le pediría que me proporciona instrucciones claras sobre cómo ejecutar esta aplicación aunque 00:05:11
veréis que es muy fácil siempre va bien que la ya nos lo vaya explicando en este caso aquí podríamos 00:05:16
añadir algunas cosas más por ejemplo imaginad que yo le digo quiero que tenga un diseño atractivo 00:05:20
bonito con fuentes grandes y pensado para niños niños de 7 a 9 años irresponsivo tanto una vez 00:05:26
lo tenga escrito directamente voy a poner al final general código completo y asegúrate que 00:05:37
se puede ejecutar haciendo doble clic en el archivo html resultante parece que no pero aquí 00:05:42
le estamos pidiendo algunas cosas como que no use ciertas tecnologías que requerirían pues instalar 00:05:46
un servidor web parece tonto pero no lo es lo ejecutó espero y automáticamente empieza a 00:05:51
trabajar nos repasa lo que ha hecho le podríamos poner genera directamente el código y no me des 00:05:57
explicaciones pero nunca está de más sobre todo por la parte de que le pedimos que nos 00:06:03
instrucciones por si hay alguna cosa que no nos funciona empieza a generar el código esto que 00:06:07
vemos aquí esto de background o bg blue 100 es código de tailwind de esta librería que hemos 00:06:12
puesto o que le hemos pedido que use, con lo cual con esta pequeña porción de código vamos a poder 00:06:19
hacer cosas muy grandes, a poder hacer pues por ejemplo que el diseño sea atractivo sin una 00:06:25
cantidad de código bastante más grande de lo que sería pues habitual. Una vez acabado de escribir 00:06:30
todo el código nos da las instrucciones y fijaros que siempre van a ser las mismas o muy muy muy 00:06:37
parecidas. Nos pone copia todo el código en un archivo nuevo y guárdalo con la extensión html. 00:06:41
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. 00:06:46
Y vamos a pegarlo. ¿Dónde? En el editor de texto que queramos. 00:06:53
Lo pego. Fijaros que es solo pegarlo y ha detectado que es HTML y me lo ha coloreado para saber qué es cada cosa. 00:06:57
Siguiente punto. Nos dice guárdalo. Nos pone una sugerencia de nombre. El nombre puede ser el que queramos. 00:07:03
Es tan fácil como ir a archivo, guardar como. 00:07:09
Muy importante, revisemos que ya le he puesto la extensión .html. Yo lo voy a llamar practicando tablas de multiplicar. 00:07:12
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. 00:07:22
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, 00:07:34
pues esto lo vamos a llamar Camelized, que es una palabra absolutamente inventada y sin mucho sentido. 00:07:41
Muy importante poner la extensión .html y os recomiendo tener una carpeta, la podéis llamar como queráis, 00:07:46
yo la he llamado compositor de software, donde ir guardando todas las creaciones que vayáis haciendo. 00:07:52
Lo guardo y en este momento ya podremos ver cómo ha quedado. 00:07:56
¿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. 00:08:00
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. 00:08:22
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. 00:08:47
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. 00:09:11
importante escribe de nuevo todo el código completo le estamos diciendo que no nos diga 00:09:30
cambia esta porción por esta otra al final igualmente lo acabar haciendo si la conversación 00:09:35
es muy larga porque no puede generar en una sola generación de ella todo el código de nuevo así que 00:09:39
nos tira busca esta sección y cambiarla por esto otro si de repente nos dejará de funcionar 00:09:44
podríamos arrastrar el archivo html y pedirle que lo analice para ver dónde podría estar el error 00:09:50
Aquí tenemos, perfecto, qué bien que funcione. 00:09:55
A continuación he realizado los cambios solicitados, el código ahora incluye, pues nos explica todo lo que ha hecho. 00:09:58
Y el código completo, aquí lo está creando. 00:10:04
Ya ha acabado de generar todo el código y nos está explicando la descripción de los cambios que ha hecho. 00:10:06
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. 00:10:11
Me voy donde tengo todo el código y aquí podemos hacer dos cosas. 00:10:18
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. 00:10:21
y aquí lo que voy a hacer es seleccionar todo el código puedo hacerlo con una combinación de 00:10:38
teclado o puedo bajar y seleccionarlo manualmente y lo borro y voy a pegar la nueva versión como 00:10:44
detalle fijaros que ha crecido el número de líneas es un buen síntoma de que ha generado de nuevo 00:10:50
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 00:10:55
indicador de que no ha generado todo el código y de que por aquí habrá algún comentario que nos 00:11:01
diga deja este trozo como estaba que es un comentario es esto marcado en verde depende 00:11:07
el lenguaje de programación nos lo va a enseñar entre trozos de código como estos o por ejemplo 00:11:13
con dos barras normalmente si está pintado de verde es que es un comentario que no es código 00:11:18
en sí sino que es una nota que nos deja la ya que podemos escribir a nosotros mismos para darnos 00:11:23
algún mensaje por ejemplo estos son variables para llevar la cuenta de aciertos esto es la 00:11:28
función para tal esto es la pantalla resultado final perfecto así que voy a guardarlo lo voy 00:11:33
a guardar como y lo voy a llamar en este caso practican tales de multiplicar versión 2 aquí 00:11:39
tengo la versión original que después también llamado versión 1 y voy a ver la versión 2 a 00:11:45
ver qué tal bien punto restante es 3 por 7 ahí voy a poner 21 venga correcto tengo un acierto 00:11:50
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. 00:11:56
está perfecto de esta forma podríamos permitir a nuestro hijo que vaya jugando pero darle un poco 00:12:17
de prisa para entender que las tablas en este caso es mejor que salgan de memoria sin estar 00:12:22
esperando que de alguna forma manualmente lo calculemos con el cerebro y al acabar dejadme 00:12:26
ver cómo es al acabar si ha hecho esta parte de que sólo haga 10 1 por 6 voy a poner alguna 00:12:30
respuesta mal perfecto y imagen de hecho esta no es la misma ha puesto antes le podríamos pedir 00:12:36
que no repita las que ha hecho o al contrario o que si bien voy a ver quiero hacer algunas bien 00:12:41
y algunas mal voy 4 a 4 aquí pondremos algo mal perfecto y ahora las vamos a poner bien pues 00:12:48
perfecto venga vamos allá a partir de ahora ya todas bien aquí lo estamos resultado final 5 y 00:12:54
5 con 3.100 puntos pues esto es para mí como padre os diría que es maravilloso porque comentamos que 00:13:00
el niño cuantos más aciertos haga más puntuación tendrá pero a la vez al ver el resultado y 00:13:05
enseñarlo a sus papis pues va a poder enseñar qué tal lo ha hecho también a nivel de aciertos 00:13:09
y fallos si lo acertado todo pero muy poca puntuación significa que se toma mucho tiempo 00:13:14
y con lo cual no es ideal otra sugerencia ya si queréis este código que tenéis lo 00:13:19
podéis compartir lo podéis enviar por whatsapp a otra persona podéis enviar por email y al 00:13:24
final cualquier persona que lo reciba haciendo doble clic se le abrirá un 00:13:29
navegador y va a poder utilizarlo y visto esto vamos a pasar al siguiente ejemplo 00:13:32
Idioma/s:
es
Materias:
Tecnología, Tecnología Industrial, Tecnologías de la Información
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Educación Secundaria Obligatoria
    • Ordinaria
      • Primer Ciclo
        • Primer Curso
        • Segundo Curso
      • Segundo Ciclo
        • Tercer Curso
        • Cuarto Curso
        • Diversificacion Curricular 1
        • Diversificacion Curricular 2
    • Compensatoria
  • Bachillerato
    • Primer Curso
    • Segundo Curso
Autor/es:
Founderz
Subido por:
M. Pilar P.
Licencia:
Reconocimiento - No comercial
Visualizaciones:
1
Fecha:
9 de febrero de 2025 - 21:07
Visibilidad:
Clave
Centro:
IES VILLA DE VALLECAS
Duración:
13′ 43″
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:
1376x776 píxeles
Tamaño:
538.01 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid