Saltar navegación

IA_5

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.

1 visualizaciones

Más información Transcripción

Descargar la transcripción

Hasta ahora hemos visto aplicaciones, juegos que podíamos crear y que cada vez que iniciábamos 00:00:02
se reseteaban, es decir, que no podían guardar o recuperar datos. Vamos a ver ahora cómo 00:00:08
podemos entrar en este nuevo nivel. El proceso va a ser muy similar al que hemos seguido 00:00:12
hasta ahora, pero vamos a integrar una serie de peticiones donde expliquemos cómo queremos 00:00:15
que la inteligencia artificial guarde los datos que estamos creando. Y para hacerlo, 00:00:19
vamos a crear un ejemplo de un diario personal digital. El proceso empieza exactamente de 00:00:22
la misma forma. Vamos a pegar nuestro prompt. En este caso, le voy a pedir a la inteligencia 00:00:26
artificial que quiera una aplicación web para crear un diario personal digital. La 00:00:29
La aplicación debe permitir al usuario escribir entradas de diario con fecha y título, con un estilo bonito y a pantalla completa, como el creador de entradas de WordPress. 00:00:32
Le pido que haga un diseño parecido a algo que yo ya conozco. Perfecto, lo podemos pedir. 00:00:37
Fijaros aquí. Esto es interesante. Le digo, guarda las entradas en local storage. 00:00:40
Local storage es algo que los navegadores modernos tienen que sirve para guardar datos dentro de un espacio que tiene el propio navegador 00:00:43
destinado a ofrecer a aplicaciones web que guarden sus datos. 00:00:50
Esto significa que, aunque cerremos el navegador y lo volvamos a abrir, los datos seguirán allí. 00:00:53
Y, de hecho, es algo diferente a las propias cookies. 00:00:56
Si borramos las cookies, el local storage no se va a borrar, a no ser que específicamente entremos en la configuración y borremos el local storage como si borráramos cualquier otro archivo. 00:00:58
Es la forma más sencilla de guardar y cargar datos y además le podríamos pedir a nuestra aplicación después que nos permita exportar o importar datos por si queremos usarla desde otro ordenador. 00:01:04
Pero en cualquier caso, esto va a permanecer guardado aunque cerremos el navegador. 00:01:10
A partir de aquí seguiré con las funcionalidades. Le diré que me muestre una lista de entradas pasadas para que se puedan ver o eliminar, pero no editar. 00:01:13
La gracia de tener un diario es que no puede editar lo que ya escribí. Como mucho arrancar una página, pero no cambiarlo. 00:01:17
tener una pequeña sección para ver todas las entradas escritas 00:01:21
igual voy a quitar el lateral para no dar pistas, a ver cómo lo va a hacer 00:01:24
le voy a poner que cuando haya ninguna entrada escrita 00:01:26
tenga un diseño tipo placeholder, es decir, que muestre algo 00:01:27
que no sea todo vacío, para que te inspire a empezar 00:01:29
que use un diseño limpio y minimalista, que mueva una librera física 00:01:31
con Tailwind, igual que las veces anteriores 00:01:33
y después el código que estamos poniendo siempre, que incluya el código HTML 00:01:35
CSS y Javascript en un solo archivo, que cargue 00:01:37
Telindes en un CDN y que funcione completamente del lado del cliente 00:01:39
usando local storage para los datos, he insistido 00:01:41
y directamente que sea todo fácil y que se pueda ejecutar con doble clic 00:01:43
vamos a ver cómo lo hace 00:01:46
perfecto, ya acabo de generar el código, lo voy a copiar 00:01:47
y voy a crear un nuevo archivo en nuestro editor 00:01:52
voy a esperar que se ponga de color y ahora 00:01:54
lo voy a diario personal, diario 00:01:56
versión 1 00:01:58
vamos a cargarlo y aquí lo tenemos, mi diario personal 00:01:59
título de la entrada, escribe aquí tu entrada 00:02:02
el placeholder, este diseño que nos anima 00:02:04
aquí voy a probar, probando mi diario 00:02:06
cuando guardo la entrada ya me aparece 00:02:08
aquí debajo y el placeholder, el empieza a escribir 00:02:12
ha desaparecido, perfecto 00:02:14
como vemos funciona, voy a probar de añadir una más y eliminarla 00:02:15
el sistema de eliminación también funciona 00:02:20
Y ahora lo más complicado. ¿Qué pasará si cierro la aplicación, la ventana, y la vuelvo a abrir? Vemos que siguen las entradas que había creado. Y si cierro completamente el navegador, he cerrado Edge, lo vuelvo a abrir y efectivamente aquí están. Con lo cual vemos que está guardando los datos y que ha funcionado. A partir de aquí ya le podríamos pedir que mejore el diseño, que lo haga diferente, que separe las entradas anteriores en una vista lateral o todos los cambios que quisiéramos. Pero lo más importante es que ya está guardando los datos. 00:02:21
¿Qué problema podría haber? 00:02:47
Que yo me cambie de ordenador o que quiera tener una copia en un pendrive de mis entradas. 00:02:48
Aquí lo que le podríamos pedir sería que añada la funcionalidad de exportar e importar. 00:02:51
Le he pedido que añade un botón para exportar todas las entradas en algún formato ideal para ello. 00:02:55
He puesto algunos formatos que tengo en mente, pero podríamos directamente dejar que la IA eligiera. 00:02:58
Yo he puesto dos formatos típicos para este tipo de exportaciones 00:03:01
y un botón para importarlas sustituyendo el contenido anterior. 00:03:03
He puesto una nota, pero esto es importante. 00:03:06
Cuando el usuario vaya a importar entradas, explícale que se reescribirá al diario 00:03:07
y perderá las entradas actuales para cargar las nuevas. 00:03:09
Si se acepta, después se ejecuta la acción de importar. 00:03:11
Obviamente si no lo quisiéramos de esta forma y quisiéramos que si importo entradas se pongan aparte de las que ya tengo, pues lo podríamos pedir de esta forma 00:03:13
Vamos a ver cómo queda 00:03:19
Perfecto, ya acabo de generar el código, lo voy a copiar y me voy a ir a mi editor de texto 00:03:20
Voy a guardar una nueva versión, que será Diario versión 2 00:03:25
Y voy a pegar el nuevo código 00:03:29
Voy a guardarlo y vamos a ver qué tal lo he hecho 00:03:30
Genial, fijaros que ya ha cargado las entradas, voy a añadir una más, una tercera 00:03:33
Y voy a poner un texto largo, en este caso he copiado un texto típico de relleno en latín 00:03:37
Lo voy a guardar para que se vea una entrada larga, perfecto 00:03:40
Y lo que voy a hacer es exportar entradas 00:03:42
fijaros que me ofrece guardar un archivo, le digo que sí, que lo guarde 00:03:44
y lo voy a llamar entradas diario backup 00:03:48
perfecto, aquí lo tengo guardado y ahora voy a borrarlas 00:03:51
imaginaros que estoy en otro ordenador, cargo el diario y no hay nada 00:03:55
voy a pulsar en importar, voy a seleccionar el archivo 00:03:58
y al abrirlo me avisa que va a reescribir las entradas actuales, le digo que ok 00:04:00
y ya me dice que las ha importado y aquí las tenemos, ha funcionado perfecto 00:04:03
de esta forma siempre los datos se van a quedar guardados por defecto 00:04:07
si recargo, si cierro, si vuelvo a abrir el navegador 00:04:10
pero tengo una forma de exportar o importar contenido a otros ordenadores 00:04:11
o directamente para que yo pueda guardar una copia en algún lugar externo, por ejemplo, 00:04:14
un pendrive o algún espacio web. 00:04:17
Y de esta forma podemos crear aplicaciones que guarden y lean datos sin mayor problema 00:04:19
y sin tener que ponerse a instalar servidores web o software más complejo. 00:04:23
Etiquetas:
TIC
Autor/es:
Curso Copilot
Subido por:
Francisco Javier M.
Licencia:
Reconocimiento
Visualizaciones:
1
Fecha:
13 de enero de 2025 - 20:16
Visibilidad:
Clave
Centro:
C.TER.INN.Y FORM CTIF MADRID-SUR
Duración:
04′ 32″
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:
21.45 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid