Como programar em ChatGPT: Introdução ao chatbot e inteligência artificial
Como criar um chatbot com ChatGPT: Passo a passo
As vantagens de programar com ChatGPT
Introdução aos apps com inteligência artificial em CSS, HTML e JS
Gerando leads orgânicos: O que são e como diferem dos leads pagos
A importância da otimização do seu site para os mecanismos de busca
Criando conteúdo engajador para atrair leads orgânicos
Utilizando as redes sociais para gerar leads orgânicos
Construindo uma lista de e-mails para seus leads orgânicos
Dicas práticas de SEO para aumentar seu tráfego orgânico
Como mensurar e acompanhar seus leads orgânicos
Exemplos de sucesso na geração de leads orgânicos
Analogia: Como gerar leads orgânicos é como cultivar um jardim
Considerações finais sobre a importância dos leads orgânicos
FAQs: Como monitorar e mensurar os resultados da minha estratégia de geração de leads orgânicos?
FAQs: Qual a diferença entre leads orgânicos e leads pagos?
FAQs: Que tipo de conteúdo é mais efetivo para gerar leads orgânicos?
FAQs: Como faço para aumentar minha taxa de conversão de leads orgânicos?
FAQs: Qual a importância da segmentação de leads na minha estratégia de geração de leads orgânicos?
br>Muy buenas salvajes
En el video de hoy voy a enseñarte como programar con ChatGPT pequeñas aplicaciones web basadas en JavaScript, HTML y CSS, de forma fácil, rápida y gratuita, gracias a la inteligencia artificial
En primer lugar, vamos a crear el código fuente de una calculadora digital que nos permitirá sumar, restar, multiplicar y dividir
La segunda aplicación web es el popular juego del Tic Tac Toe, en mi país España se le conoce como el 3 en raya, el cual también lo programamos con ChatGPT
Y para finalizar acabamos creando un reloj digital que nos permite ver la hora
Estos códigos puedes subirlos a tu página, solo necesitas tener hosting y dominio, en este tutorial yo los subo a Codepen para mostrarte como funciona, pero que sepas que puedes hacerlo
#chatgpt #inteligenciaartificial #programacion
Este vídeo foi indexado através do Youtube link da fonte
programar com chatgpt ,
inteligencia artificial,chatgpt,chat gpt,inteligencia artificial 2023,como ganar dinero con la inteligencia artificial,ia,chat gpt como usar,como usar chatgpt,como usar chatgpt en español,como usar chatgpt para crear una pagina web,chatgpt programacion,chatgpt programming,chatgpt programar,html,css,javascript,codepen,chat gpt app,chatgpt aplicaciones,chatgpt codigo programacion,chat gpt codigo ,
https://www.youtubepp.com/watch?v=HnMMGD91Jyw ,
Muy buenas salvajes hoy vamos a utilizar gpt de una forma un poco distinta Y es que estoy seguro de que muchos de los que estáis viendo Este vídeo normalmente utilizáis chat gpt para que os devuelva texto bien sea porque le pedís un artículo que os escriba un email un
Resumen de algún tipo de contenido por eso lo que vamos a ver hoy a mí me parece una brutalidad porque vamos a utilizar chat gpt para programar pequeñas aplicaciones web salvajes salvajes pero como vas a utilizar gpt para programar si programar es súper difícil ya se te ha ido la olla con
Tanta Inteligencia artificial para nada salvaje ni se me ha ido la olla ni programar con chat gpt es difícil de hecho pienso que es bastante sencillo y que precisamente gracias a chat gpt esta posibilidad se ha abierto a muchas más personas porque a ver obviamente saber programar no es algo sencillo la
Programación suele tener una curva de aprendizaje relativamente alta porque requiere de mucho estudio y de mucha prueba y error sin embargo algo en lo que yo coincido con otros colegas del sector es que ser programador es una de las profesiones del momento y del futuro por eso si eres programador Puedes ver
Este vídeo pero si no lo eres también porque posiblemente te explote la cabeza con lo que el Tito salvaje te va a mostrar hoy aquí y es que vamos a ver cómo programar pequeñas aplicaciones web con chat gpt en html css y javascript [Música] y salvaje como sabes a mí me gusta
Hacerlo todo muy práctico muy visual para que lo entiendas mejor por eso vamos a crear tres aplicaciones web distintas y la primera va a ser una calculadora Y si estás viendo bien estamos en la página de Google Translate porque lo primero que necesitamos es crear un Chrome es crear la instrucción con la
Que vamos a pedirle a chat gpt que nos cree el código fuente para la calculadora Y esto es una recomendación que voy a hacerte en base a mi experiencia como sabes en chat gpt podemos darle instrucciones en español pero si se las damos en inglés vamos a tener mejores resultados Especialmente
Cuando intentamos que nos devuelva código por eso lo que te recomiendo Es que escribas el Chrome aquí en esta casilla de Google Translate para después copiarlo y pasárselo a chats salvajes salvaje es que utilizar Google Translate no es profesional Mira Aquí no se trata de ser más profesional o no aquí de lo
Que se trata es de tener los mejores resultados y si sabes inglés perfecto pero si tienes dudas o quieres intentar una la mejor traducción crea el Pro para obtener tu código con un traductor pero venga vamos al lío que voy a crear el mío y sabes que este va a ser el Peón
Que yo lo voy a meter crea el código para una calculadora digital que sirva para sumar estar dividir y multiplicar números Hazlo utilizando solo html css y javascript haz el código todo lo optimizado y simple posible y haz que tenga un diseño sencillo moderno y minimalista entonces una vez que tenemos
Nuestro Pro vamos a copiarlo y directamente lo metemos en chat gpt otra de las ventajas de crearlo en el traductor es que nos permite organizar mucho mejor nuestro código para pasárselo a chat gpt pero una vez que lo introducimos vamos a darle a ejecutar para que empiece a crearnos nuestra
Primera aplicación web como ves ya está creando primero nos crea el código html ahora va a pasar con el código css como te digo no tiene que ser un experto programador pero sí es buena idea que sepas Qué significan las etiquetas html Cómo se llama Las clases dentro del
Código css algunas nociones de programación es bueno que tengas Y por último el el código javascript ya habría terminado de crear nuestra calculadora salvaje Tenemos aquí nuestro código javascript nuestro código css y nuestro código html salvaje salvaje Pero es que yo no tengo ni idea de programación y no
Sé en qué se diferencia un código html de un código css de un código javascript pues te lo voy a explicar muy rápido y muy sencillo Mira esta imagen de aquí que compartí en Twitter hace ya algún tiempo tenemos el código html que sería el esqueleto de nuestra página web el
Código javascript que sería todo el sistema nervioso Cómo funciona el cuerpo cómo lo hace funcionar Cómo mueve toda la máquina y el código css que es lo que envuelve todo eso es lo que lo pinta lo que lo hace bonito lo que lo hace visual Entonces esta ilustración me parece
Realmente buena para entender la diferencia entre código html código javascript y código css como uniendo estos tres códigos podemos tener como resultado final una máquina totalmente funcional por eso salvaje aquí tendríamos en el código html el esqueleto de nuestra aplicación el código css va a pintarnos y a maquetar
Todo el tema visual de nuestra aplicación web y finalmente el código javascript va a encargarse de hacerla funcionar a grandes rasgos y para que lo entiendas este va a ser el funcionamiento de todas las aplicaciones que vamos a ver en el vídeo y tú estarás pensando vale salvaje Esto está muy
Bonito yo veo hay mucho código Pero cómo hacemos funcionar la calculadora Cómo puedo yo sacar de ese código una calculadora pues muy sencillo salvaje yo lo voy a hacer aquí en codepen es un editor online de código el cual nos muestra en tiempo real la ejecución de
Ese código esto lo hago así para que puedas Ver el resultado Pero tú puedes tomar los mismos códigos que te proporciona chat gpt para subirlos a tu página web a tu Hosting a tu servidor y enlazarlos a tu dominio para que se vea es decir nosotros podríamos crear con el código resultante calculadora
Digital.com para mostrar una aplicación de una calculadora digital pero vamos a hacerlo en codepen para ir un poquito más rápido ya que lo que vamos a ver en este vídeo es cómo a la creación de código con chat gpt Así que una vez que estamos en codepem Vamos a darle a nuevo
Y si te fijas aquí nos permite meter código html código css y código javascript los tres tipos de códigos que nos ha proporcionado chat gpt para una vez que lo ejecutemos mostramos el resultado justo aquí abajo Así que vamos a ir pegando cada uno de los códigos seleccionamos en primer lugar el código
Html pulsando en copy code y aquí lo pegamos en el apartado html y como ves lo que te decía salvaje aquí nos ha mostrado el esqueleto de nuestra aplicación tendríamos que proporcionar el entorno gráfico y el motor para proporcionar el entorno gráfico vamos a ver el código css entonces copiamos todo
El código css y lo pegamos en la siguiente columna que pone css como ves el cambio es brutal obviamente este código css lo podemos mejorar todo lo que queramos y si no sabes css le puede pedir a chat gpt que te mejore el código css que te ponga los botones de colores
Que te ponga más grande más pequeña le puede pedir lo que quieras Incluso si tienes conocimientos de diseño web puedes editarlo directamente aquí en el código y vas a ir viendo el resultado aquí ahora Finalmente nos queda incluir el motor el código javascript para eso volvemos a chat gpt vamos hacia abajo y
Copiamos el código volvemos a codepen y en la parte de javascript lo pegamos esperamos que cargue un poco para que tome los cambios y ya tendríamos nuestra calculadora funcional y vamos a hacer una prueba para que veas cómo funciona si pulsamos en Dos más Dos le damos a
Igual 4 el único fallo que podemos tener Es que se ve un poco pegado aquí a la derecha verdad pero se soluciona muy fácil simplemente yéndonos a la clase css que se dedica a pintar aquí el número que es esta de aquí display inputs y le ponemos un margin left de
-10 px por ejemplo ves salvaje ya nos ha separado el dígito de la calculadora Ya lo tenemos perfectamente alineado y es lo que te estaba comentando antes tú puedes utilizar perfectamente chat gpt para que te haga una aplicación web sin tener conocimientos de programación como te he mostrado pero si sabes programar
Vas a tener también mejores resultados y vas a poder corregir más rápido pequeños errores como el que nos ha ocurrido aquí ppt no deja de ser una herramienta que nosotros podemos utilizar a nuestro favor Así que mientras más conocimientos tengas mejor pero salvaje Espérate que aquí no acaba la causa porque te he
Dicho que te iba a mostrar Cómo hacer tres aplicaciones web ya hemos visto la calculadora Así que ahora vamos con la segunda vamos a crear un juego de toda la vida el típico tres en raya también llamado en inglés Tic Tac toe igual de sencillo que hemos creado la calculadora
Y utilizando chat gpt para ello Así que venga vamos con la segunda aplicación el 3 en raya Y de nuevo empezamos nuestra andadura en Google Translate vamos a pedirle que nos cree otro Chrome para crear el Tic Tac toe o también llamado juego del 3 en
Raya y Oye salvaje si en tu país se llama de alguna otra forma pónmelo aquí en comentarios que realmente me causa curiosidad saber cuál es el nombre de este juego en tu país Aquí en España es el tres en raya Entonces yo tengo que decir que vamos a crear el tres en rayas
Para crearlo muy sencillo vamos a meterle un pro y este sería el Pro que yo le voy a meter salvaje crea el código para el juego Tic Tac toe Hazlo utilizando solo html css javascript hace el código todo optimizado y simple posible Haz que tenga un diseño sencillo
Moderno y minimalista incluye un botón de reset para reiniciar el juego y los círculos deben mostrarse en color rojo y Las Cruces en color azul como ves aquí tenemos tres instrucciones que hemos utilizado antes la de Hazlo utilizando solo html css y javascript hace el código todo lo optimizado y simple
Posible y haz que tenga un diseño sencillo y minimalista Estos son tres códigos que puedes incluir en tu Chrome y a mí personalmente me han dado buen resultado Y eso que este Peón es bastante sencillo podríamos ponerlo mucho más complejo con lo cual tendríamos un mejor resultado
Pero hoy en serio que estas tres líneas funcionan muy bien y ahí te las dejo por si tú quieres utilizarlas también ahora lo que nos quedaría sería copiar el Chrome volver a chat gpt y directamente en consola pegamos y ejecutamos empieza como siempre por el código html de hecho
Ya estás viendo aquí Cómo pone la etiqueta Head la etiqueta meta Body Button aquí hace una llamada a javascript ahora empieza con el código css Llamando a las diferentes clases por eso te digo que es bueno que sepas algo de programación es totalmente necesario no tú puedes escribir el Chrome y que te
Devuelva el código pero si quieres entenderlo O si quieres solucionar algún tipo de error si es necesario saber programar salvaje ahora de hecho ya ha empezado con el código javascript pero salvaje ha pasado una cosa que me alegro muchísimo de que haya pasado cuando estoy grabando el vídeo porque que me
Preguntáis un montón en los comentarios me decís que hay veces que sea gpt está ejecutando lo que le habéis pedido pero no lo termina y os quedáis un poco a medias eso es lo que acabo de ocurrir con el código javascript que ha empezado a crearlo pero no ha terminado de
Hacerlo aquí falta código si nosotros ejecutamos este javascript nos va a dar error Entonces cuando pase esto es muy sencillo podéis decirle simplemente que continúe poniendo en el la palabra continúa o pedirle que te lo vuelva a escribir de nuevo Yo voy a pedirle que vuelva a escribir el código javascript
Pero solamente el código javascript y lo hago introduciendo un Pro muy sencillo como es vuelve a escribir solamente el código javascript le damos a ejecutar y ya empezaría a escribirlo de nuevo Así que salvaje si tú también te ves en esta tesitura que sepas que estas son las
Soluciones posibles y mira ya nos lo ha terminado nos pone incluso una anotación final explicándonos un poco cómo funciona este código javascript y los elementos que contienen el documento html nos dice incluso de controla bastantes cosas con distintas funciones como es la función check Win que comprueba si un jugador Ha ganado el
Juego check si hay un empate la función reset reinicia el juego Esto se lo hemos pedido nosotros que lo haga en el Pro si quieres Añadir cualquier tipo de función al juego te aconsejo que se lo pidas en el Pro pero vamos a probar si esto funciona vamos a ver visualmente qué
Juego nos ha creado chat gpt volvemos hacia arriba y tomamos el código html pulsando en copy y lo vamos añadiendo dentro de codepen en el apartado de html ponemos el primer trozo de código salvaje insisto Esto lo puedes meter en tu página web yo lo estoy haciendo así
Un poquito más rápido para que tú veas cómo funciona pero perfectamente podrías incluir este juego en tu página web de hecho Mira ya vemos aquí el botón de reset el título el esqueleto Ya lo tenemos subido ahora vamos a por la pintura por la fachada para eso copiamos
El código css en copy code volvemos a codepen y en el apartado css pegamos el código css y mira ya estamos viendo la estructura del juego del 3 en raya tenemos el esqueleto tenemos la vista diseño nos falta el motor vamos por el código javascript el cual nos ha creado
Justo aquí abajo no te confundas y tomes este toma el nuevo código usamos en copy code y dentro de la opción de javascript añadimos el código javascript y salvaje ya tendríamos nuestro juego del tres en raya perfectamente creado y perfectamente funcional solo nos quedaría probarlo verdad pues vamos a
Ver vamos a darle caña empezamos aquí en medio una x un circulito en rojo tal como le hemos pedido las X en azul y los círculos en rojo vamos a poner otra Cruz ahí ponemos un círculo aquí para impedirlo ahora metemos aquí la x de aquí el círculo rojo para ganar la
Partida Ha ganado el círculo círculo Wings pulsamos en aceptar y se vuelve a reiniciar el juego para poder echar otra Partida pues ya tenemos aquí el juego perfectamente funcional no nos ha costado nada lo hemos creado en un momento utilizando chat gpt y podríamos ponerle un mejor diseño un mejor título
El botón más bonito pero eso ya sería simplemente tocando el código o directamente en consola de chat gpt diciéndole que no pusiera el título más vistoso o el botón de reset más grande con otro estilo en fin aquí ya es a lo que te dé la imaginación como siempre te
Digo salvaje realmente el vídeo me está encantando porque estamos creando cosas muy chulas con chas gpt que pienso que no es lo que estamos acostumbrados de créanme un texto créame un artículo estamos creando aplicaciones web sin necesidad de programar y a mí que llevo tantos años dedicándome al diseño web Es
Que esto me parece mágico salvaje por eso si a ti también te está gustando el vídeo recuerda suscríbete al Canal y déjame un buen like Además ya sabes que si me dejas un comentario aquí abajo al algoritmo del Tito YouTube le encanta y yo puedo traerte más vídeos como este
Que estás viendo ahora en el que te enseño cosas tan alucinantes como crear aplicaciones web con Inteligencia artificial tan chulas como el reloj digital que te voy a mostrar en la aplicación número 3 en primer lugar volvemos a Google Translate para tener un mejor prom que
Incluir en hpt yo voy a incluir el siguiente crea un código que muestre la hora Hazlo utilizando solo html css javascript hace el código todo optimizado posible Haz que tenga un diseño sencillo moderno y minimalista y el formato debe ser el de un reloj digital como ves volvemos a repetir
Estas tres líneas Porque da muy buen resultado Así que en serio salvaje cópiate esas tres líneas guárdalas para cuando vayas a crear un plan de programación porque Funciona muy bien Le hemos modificado que el código debe Mostrar la hora y que el formato debe ser el de un reloj digital si tú quieres
Meterle más florituras es hacer más complejo el Chrome como que tenga un cronómetro un botón de reset o cualquier otra cosa que se te ocurra Yo te lo voy a mostrar así algo rápido y sencillo para que veas cómo funciona así que vamos a copiar el pro y en la consola de
Chat lo pegamos ejecutamos y como ves el proceso es el mismo empieza a crearnos el código html en segunda instancia nos crea el código css y finalizamos con el motor el código javascript ya hemos terminado este sin duda es un código más sencillo y más simple que el segundo que
Hemos visto del juego del 3 en raya pero vamos a probarlo a ver qué tal se ve nuestro reloj digital Así que copiamos el código html y en codepen vamos pegando cada una de las piezas de código que nos ha creado chat gpt en primer lugar el código html volvemos y copiamos
El código css lo añadimos en el apartado css y finalizamos copiando el código javascript lo añadimos aquí en este apartado que va a ser el motor de nuestro reloj digital y ya lo estás viendo en pantalla cómo funciona salvaje nos ha creado un reloj digital que marca
La hora exacta en la que nos encontramos las 12 y 54 con un diseño bastante bonito y que podrías incluirlo perfectamente en tu página web simplemente añadiendo estos tres códigos de aquí que nos ha creado chat gpt que si lo hubiera enseñado en el vídeo de
Hoy no se merece un buen like Yo es que ya no sé verdaderamente hoy he disfrutado como un niño pequeño con este vídeo porque los que me seguís de hace tiempo ya sabéis que soy un creador nato me encanta crear cosas nuevas me encanta aprender me encanta enseñar y estoy
Seguro de que lo que he mostrado hoy aquí va a haceros Útil para muchos de los que estáis viendo Este vídeo pero sabrás que ten muy claro que esto es solo el inicio estamos en los primeros segundos de lo que supone el Big Bang de la Inteligencia artificial y yo estoy
Todo el día investigando probando cosas nuevas para que tú puedas verlas aquí en el canal por eso Si no quieres perderte ninguna recuerda suscríbete al Canal déjame un buen like y salvaje nos vemos en el próximo vídeo adiós [Música] [Música]
,00:00 muy buenas salvajes hoy vamos a utilizar
00:03 gpt de una forma un poco distinta Y es
00:06 que estoy seguro de que muchos de los
00:07 que estáis viendo Este vídeo normalmente
00:08 utilizáis chat gpt para que os devuelva
00:10 texto bien sea porque le pedís un
00:12 artículo que os escriba un email un
00:15 resumen de algún tipo de contenido por
00:17 eso lo que vamos a ver hoy a mí me
00:19 parece una brutalidad porque vamos a
00:21 utilizar chat gpt para programar
00:23 pequeñas aplicaciones web salvajes
00:25 salvajes pero como vas a utilizar gpt
00:28 para programar si programar es súper
00:29 difícil ya se te ha ido la olla con
00:31 tanta Inteligencia artificial para nada
00:33 salvaje ni se me ha ido la olla ni
00:35 programar con chat gpt es difícil de
00:37 hecho pienso que es bastante sencillo y
00:39 que precisamente gracias a chat gpt esta
00:41 posibilidad se ha abierto a muchas más
00:44 personas porque a ver obviamente saber
00:46 programar no es algo sencillo la
00:48 programación suele tener una curva de
00:50 aprendizaje relativamente alta porque
00:52 requiere de mucho estudio y de mucha
00:54 prueba y error sin embargo algo en lo
00:56 que yo coincido con otros colegas del
00:57 sector es que ser programador es una de
01:00 las profesiones del momento y del futuro
01:01 por eso si eres programador Puedes ver
01:04 este vídeo pero si no lo eres también
01:06 porque posiblemente te explote la cabeza
01:08 con lo que el Tito salvaje te va a
01:10 mostrar hoy aquí y es que vamos a ver
01:12 cómo programar pequeñas aplicaciones web
01:14 con chat gpt en html css y javascript
01:18 [Música]
01:20 y salvaje como sabes a mí me gusta
01:22 hacerlo todo muy práctico muy visual
01:24 para que lo entiendas mejor por eso
01:25 vamos a crear tres aplicaciones web
01:28 distintas y la primera va a ser una
01:30 calculadora
01:32 Y si estás viendo bien estamos en la
01:35 página de Google Translate porque lo
01:37 primero que necesitamos es crear un
01:39 Chrome es crear la instrucción con la
01:42 que vamos a pedirle a chat gpt que nos
01:44 cree el código fuente para la
01:45 calculadora Y esto es una recomendación
01:47 que voy a hacerte en base a mi
01:48 experiencia como sabes en chat gpt
01:50 podemos darle instrucciones en español
01:52 pero si se las damos en inglés vamos a
01:54 tener mejores resultados Especialmente
01:56 cuando intentamos que nos devuelva
01:58 código por eso lo que te recomiendo Es
02:00 que escribas el Chrome aquí en esta
02:02 casilla de Google Translate para después
02:03 copiarlo y pasárselo a chats salvajes
02:06 salvaje es que utilizar Google Translate
02:08 no es profesional Mira Aquí no se trata
02:10 de ser más profesional o no aquí de lo
02:12 que se trata es de tener los mejores
02:14 resultados y si sabes inglés perfecto
02:17 pero si tienes dudas o quieres intentar
02:19 una la mejor traducción crea el Pro para
02:21 obtener tu código con un traductor pero
02:23 venga vamos al lío que voy a crear el
02:25 mío y sabes que este va a ser el Peón
02:26 que yo lo voy a meter crea el código
02:28 para una calculadora digital que sirva
02:30 para sumar estar dividir y multiplicar
02:33 números Hazlo utilizando solo html css y
02:36 javascript haz el código todo lo
02:38 optimizado y simple posible y haz que
02:40 tenga un diseño sencillo moderno y
02:43 minimalista entonces una vez que tenemos
02:44 nuestro Pro vamos a copiarlo y
02:46 directamente lo metemos en chat gpt otra
02:49 de las ventajas de crearlo en el
02:50 traductor es que nos permite organizar
02:52 mucho mejor nuestro código para
02:54 pasárselo a chat gpt pero una vez que lo
02:56 introducimos vamos a darle a ejecutar
02:58 para que empiece a crearnos nuestra
03:00 primera aplicación web como ves ya está
03:02 creando primero nos crea el código html
03:04 ahora va a pasar con el código css como
03:07 te digo no tiene que ser un experto
03:08 programador pero sí es buena idea que
03:10 sepas Qué significan las etiquetas html
03:12 Cómo se llama Las clases dentro del
03:14 código css algunas nociones de
03:16 programación es bueno que tengas Y por
03:19 último el el código javascript ya habría
03:21 terminado de crear nuestra calculadora
03:23 salvaje Tenemos aquí nuestro código
03:25 javascript nuestro código css y nuestro
03:28 código html salvaje salvaje Pero es que
03:31 yo no tengo ni idea de programación y no
03:33 sé en qué se diferencia un código html
03:35 de un código css de un código javascript
03:37 pues te lo voy a explicar muy rápido y
03:39 muy sencillo Mira esta imagen de aquí
03:40 que compartí en Twitter hace ya algún
03:42 tiempo tenemos el código html que sería
03:45 el esqueleto de nuestra página web el
03:47 código javascript que sería todo el
03:50 sistema nervioso Cómo funciona el cuerpo
03:53 cómo lo hace funcionar Cómo mueve toda
03:55 la máquina y el código css que es lo que
03:58 envuelve todo eso es lo que lo pinta lo
04:00 que lo hace bonito lo que lo hace visual
04:03 Entonces esta ilustración me parece
04:04 realmente buena para entender la
04:07 diferencia entre código html código
04:09 javascript y código css como uniendo
04:12 estos tres códigos podemos tener como
04:15 resultado final una máquina totalmente
04:16 funcional por eso salvaje aquí
04:18 tendríamos en el código html el
04:21 esqueleto de nuestra aplicación el
04:23 código css va a pintarnos y a maquetar
04:26 todo el tema visual de nuestra
04:29 aplicación web y finalmente el código
04:30 javascript va a encargarse de hacerla
04:33 funcionar a grandes rasgos y para que lo
04:35 entiendas este va a ser el
04:36 funcionamiento de todas las aplicaciones
04:37 que vamos a ver en el vídeo y tú estarás
04:39 pensando vale salvaje Esto está muy
04:41 bonito yo veo hay mucho código Pero cómo
04:44 hacemos funcionar la calculadora Cómo
04:46 puedo yo sacar de ese código una
04:48 calculadora pues muy sencillo salvaje yo
04:50 lo voy a hacer aquí en codepen es un
04:51 editor online de código el cual nos
04:53 muestra en tiempo real la ejecución de
04:55 ese código esto lo hago así para que
04:57 puedas Ver el resultado Pero tú puedes
04:58 tomar los mismos códigos que te
05:00 proporciona chat gpt para subirlos a tu
05:02 página web a tu Hosting a tu servidor y
05:05 enlazarlos a tu dominio para que se vea
05:07 es decir nosotros podríamos crear con el
05:09 código resultante calculadora
05:11 digital.com para mostrar una aplicación
05:13 de una calculadora digital pero vamos a
05:15 hacerlo en codepen para ir un poquito
05:17 más rápido ya que lo que vamos a ver en
05:19 este vídeo es cómo a la creación de
05:20 código con chat gpt Así que una vez que
05:22 estamos en codepem Vamos a darle a nuevo
05:25 y si te fijas aquí nos permite meter
05:27 código html código css y código
05:30 javascript los tres tipos de códigos que
05:33 nos ha proporcionado chat gpt para una
05:35 vez que lo ejecutemos mostramos el
05:37 resultado justo aquí abajo Así que vamos
05:40 a ir pegando cada uno de los códigos
05:41 seleccionamos en primer lugar el código
05:43 html pulsando en copy code y aquí lo
05:46 pegamos en el apartado html y como ves
05:48 lo que te decía salvaje aquí nos ha
05:50 mostrado el esqueleto de nuestra
05:51 aplicación tendríamos que proporcionar
05:52 el entorno gráfico y el motor para
05:55 proporcionar el entorno gráfico vamos a
05:57 ver el código css entonces copiamos todo
06:01 el código css y lo pegamos en la
06:04 siguiente columna que pone css como ves
06:06 el cambio es brutal obviamente este
06:08 código css lo podemos mejorar todo lo
06:11 que queramos y si no sabes css le puede
06:14 pedir a chat gpt que te mejore el código
06:16 css que te ponga los botones de colores
06:18 que te ponga más grande más pequeña le
06:21 puede pedir lo que quieras Incluso si
06:23 tienes conocimientos de diseño web
06:25 puedes editarlo directamente aquí en el
06:27 código y vas a ir viendo el resultado
06:29 aquí ahora Finalmente nos queda incluir
06:30 el motor el código javascript para eso
06:33 volvemos a chat gpt vamos hacia abajo y
06:35 copiamos el código volvemos a codepen y
06:37 en la parte de javascript lo pegamos
06:39 esperamos que cargue un poco para que
06:41 tome los cambios y ya tendríamos nuestra
06:43 calculadora funcional y vamos a hacer
06:45 una prueba para que veas cómo funciona
06:47 si pulsamos en Dos más Dos le damos a
06:49 igual 4 el único fallo que podemos tener
06:51 Es que se ve un poco pegado aquí a la
06:53 derecha verdad pero se soluciona muy
06:55 fácil simplemente yéndonos a la clase
06:57 css que se dedica a pintar aquí el
07:00 número que es esta de aquí display
07:01 inputs y le ponemos un margin left de
07:06 -10 px por ejemplo ves salvaje ya nos ha
07:09 separado el dígito de la calculadora Ya
07:12 lo tenemos perfectamente alineado y es
07:14 lo que te estaba comentando antes tú
07:15 puedes utilizar perfectamente chat gpt
07:17 para que te haga una aplicación web sin
07:19 tener conocimientos de programación como
07:21 te he mostrado pero si sabes programar
07:24 vas a tener también mejores resultados y
07:26 vas a poder corregir más rápido pequeños
07:27 errores como el que nos ha ocurrido aquí
07:30 ppt no deja de ser una herramienta que
07:32 nosotros podemos utilizar a nuestro
07:34 favor Así que mientras más conocimientos
07:35 tengas mejor pero salvaje Espérate que
07:38 aquí no acaba la causa porque te he
07:39 dicho que te iba a mostrar Cómo hacer
07:41 tres aplicaciones web ya hemos visto la
07:44 calculadora Así que ahora vamos con la
07:46 segunda vamos a crear un juego de toda
07:48 la vida el típico tres en raya también
07:50 llamado en inglés Tic Tac toe igual de
07:53 sencillo que hemos creado la calculadora
07:55 Y utilizando chat gpt para ello Así que
07:58 venga vamos con la segunda aplicación el
08:00 3 en raya
08:03 Y de nuevo empezamos nuestra andadura en
08:06 Google Translate vamos a pedirle que nos
08:07 cree otro Chrome para crear el Tic Tac
08:10 toe o también llamado juego del 3 en
08:12 raya y Oye salvaje si en tu país se
08:14 llama de alguna otra forma pónmelo aquí
08:17 en comentarios que realmente me causa
08:18 curiosidad saber cuál es el nombre de
08:20 este juego en tu país Aquí en España es
08:22 el tres en raya Entonces yo tengo que
08:24 decir que vamos a crear el tres en rayas
08:26 para crearlo muy sencillo vamos a
08:27 meterle un pro y este sería el Pro que
08:29 yo le voy a meter salvaje crea el código
08:31 para el juego Tic Tac toe Hazlo
08:34 utilizando solo html css javascript hace
08:37 el código todo optimizado y simple
08:39 posible Haz que tenga un diseño sencillo
08:41 moderno y minimalista incluye un botón
08:43 de reset para reiniciar el juego y los
08:46 círculos deben mostrarse en color rojo y
08:48 Las Cruces en color azul como ves aquí
08:51 tenemos tres instrucciones que hemos
08:53 utilizado antes la de Hazlo utilizando
08:55 solo html css y javascript hace el
08:58 código todo lo optimizado y simple
08:59 posible y haz que tenga un diseño
09:01 sencillo
09:02 y minimalista Estos son tres códigos que
09:05 puedes incluir en tu Chrome y a mí
09:07 personalmente me han dado buen resultado
09:08 Y eso que este Peón es bastante sencillo
09:10 podríamos ponerlo mucho más complejo con
09:12 lo cual tendríamos un mejor resultado
09:14 pero hoy en serio que estas tres líneas
09:16 funcionan muy bien y ahí te las dejo por
09:19 si tú quieres utilizarlas también ahora
09:20 lo que nos quedaría sería copiar el
09:22 Chrome volver a chat gpt y directamente
09:24 en consola pegamos y ejecutamos empieza
09:28 como siempre por el código html de hecho
09:30 ya estás viendo aquí Cómo pone la
09:31 etiqueta Head la etiqueta meta Body
09:34 Button aquí hace una llamada a
09:36 javascript ahora empieza con el código
09:38 css Llamando a las diferentes clases por
09:41 eso te digo que es bueno que sepas algo
09:43 de programación es totalmente necesario
09:45 no tú puedes escribir el Chrome y que te
09:48 devuelva el código pero si quieres
09:50 entenderlo O si quieres solucionar algún
09:52 tipo de error si es necesario saber
09:54 programar salvaje ahora de hecho ya ha
09:56 empezado con el código javascript pero
09:58 salvaje ha pasado una cosa que me alegro
10:00 muchísimo de que haya pasado cuando
10:01 estoy grabando el vídeo porque que me
10:03 preguntáis un montón en los comentarios
10:05 me decís que hay veces que sea gpt está
10:07 ejecutando lo que le habéis pedido pero
10:09 no lo termina y os quedáis un poco a
10:11 medias eso es lo que acabo de ocurrir
10:13 con el código javascript que ha empezado
10:15 a crearlo pero no ha terminado de
10:17 hacerlo aquí falta código si nosotros
10:20 ejecutamos este javascript nos va a dar
10:22 error Entonces cuando pase esto es muy
10:25 sencillo podéis decirle simplemente que
10:27 continúe poniendo en el la palabra
10:29 continúa o pedirle que te lo vuelva a
10:32 escribir de nuevo Yo voy a pedirle que
10:34 vuelva a escribir el código javascript
10:36 pero solamente el código javascript y lo
10:38 hago introduciendo un Pro muy sencillo
10:39 como es vuelve a escribir solamente el
10:41 código javascript le damos a ejecutar y
10:44 ya empezaría a escribirlo de nuevo Así
10:46 que salvaje si tú también te ves en esta
10:48 tesitura que sepas que estas son las
10:50 soluciones posibles y mira ya nos lo ha
10:51 terminado nos pone incluso una anotación
10:53 final explicándonos un poco cómo
10:55 funciona este código javascript y los
10:57 elementos que contienen el documento
10:59 html nos dice incluso de controla
11:01 bastantes cosas con distintas funciones
11:02 como es la función check Win que
11:05 comprueba si un jugador Ha ganado el
11:06 juego check si hay un empate la función
11:09 reset reinicia el juego Esto se lo hemos
11:11 pedido nosotros que lo haga en el Pro si
11:13 quieres Añadir cualquier tipo de función
11:16 al juego te aconsejo que se lo pidas en
11:18 el Pro pero vamos a probar si esto
11:19 funciona vamos a ver visualmente qué
11:21 juego nos ha creado chat gpt volvemos
11:23 hacia arriba y tomamos el código html
11:26 pulsando en copy y lo vamos añadiendo
11:28 dentro de codepen en el apartado de html
11:31 ponemos el primer trozo de código
11:33 salvaje insisto Esto lo puedes meter en
11:35 tu página web yo lo estoy haciendo así
11:37 un poquito más rápido para que tú veas
11:39 cómo funciona pero perfectamente podrías
11:42 incluir este juego en tu página web de
11:44 hecho Mira ya vemos aquí el botón de
11:45 reset el título el esqueleto Ya lo
11:48 tenemos subido ahora vamos a por la
11:51 pintura por la fachada para eso copiamos
11:53 el código css en copy code volvemos a
11:56 codepen y en el apartado css pegamos el
11:59 código css y mira ya estamos viendo
12:02 la estructura del juego del 3 en raya
12:05 tenemos el esqueleto tenemos la vista
12:07 diseño nos falta el motor vamos por el
12:09 código javascript el cual nos ha creado
12:11 justo aquí abajo no te confundas y tomes
12:14 este toma el nuevo código usamos en copy
12:16 code y dentro de la opción de javascript
12:18 añadimos el código javascript y salvaje
12:22 ya tendríamos nuestro juego del tres en
12:24 raya perfectamente creado y
12:25 perfectamente funcional solo nos
12:27 quedaría probarlo verdad pues vamos a
12:29 ver vamos a darle caña empezamos aquí en
12:32 medio una x un circulito en rojo tal
12:35 como le hemos pedido las X en azul y los
12:39 círculos en rojo vamos a poner
12:42 otra Cruz ahí ponemos un círculo aquí
12:46 para impedirlo ahora metemos aquí la x
12:48 de aquí el círculo rojo para ganar la
12:51 partida Ha ganado el círculo círculo
12:54 Wings pulsamos en aceptar y se vuelve a
12:59 reiniciar el juego para poder echar otra
13:01 Partida pues ya tenemos aquí el juego
13:04 perfectamente funcional no nos ha
13:06 costado nada lo hemos creado en un
13:08 momento utilizando chat gpt y podríamos
13:10 ponerle un mejor diseño un mejor título
13:12 el botón más bonito pero eso ya sería
13:14 simplemente tocando el código o
13:16 directamente en consola de chat gpt
13:18 diciéndole que no pusiera el título más
13:20 vistoso o el botón de reset más grande
13:23 con otro estilo en fin aquí ya es a lo
13:25 que te dé la imaginación como siempre te
13:27 digo salvaje realmente el vídeo me está
13:29 encantando porque estamos creando cosas
13:30 muy chulas con chas gpt que pienso que
13:33 no es lo que estamos acostumbrados de
13:34 créanme un texto créame un artículo
13:36 estamos creando aplicaciones web sin
13:39 necesidad de programar y a mí que llevo
13:41 tantos años dedicándome al diseño web Es
13:43 que esto me parece mágico salvaje por
13:45 eso si a ti también te está gustando el
13:46 vídeo recuerda suscríbete al Canal y
13:48 déjame un buen like Además ya sabes que
13:50 si me dejas un comentario aquí abajo al
13:52 algoritmo del Tito YouTube le encanta y
13:54 yo puedo traerte más vídeos como este
13:57 que estás viendo ahora en el que te
13:59 enseño cosas tan alucinantes como crear
14:01 aplicaciones web con Inteligencia
14:03 artificial tan chulas como el reloj
14:04 digital que te voy a mostrar en la
14:06 aplicación número 3
14:10 en primer lugar volvemos a Google
14:12 Translate para tener un mejor prom que
14:15 incluir en hpt yo voy a incluir el
14:17 siguiente crea un código que muestre la
14:19 hora Hazlo utilizando solo html css
14:22 javascript hace el código todo
14:24 optimizado posible Haz que tenga un
14:25 diseño sencillo moderno y minimalista y
14:27 el formato debe ser el de un reloj
14:29 digital como ves volvemos a repetir
14:31 estas tres líneas Porque da muy buen
14:33 resultado Así que en serio salvaje
14:35 cópiate esas tres líneas guárdalas para
14:37 cuando vayas a crear un plan de
14:39 programación porque Funciona muy bien Le
14:41 hemos modificado que el código debe
14:43 Mostrar la hora y que el formato debe
14:45 ser el de un reloj digital si tú quieres
14:47 meterle más florituras es hacer más
14:50 complejo el Chrome como que tenga un
14:52 cronómetro un botón de reset o cualquier
14:54 otra cosa que se te ocurra Yo te lo voy
14:56 a mostrar así algo rápido y sencillo
14:58 para que veas cómo funciona así que
14:59 vamos a copiar el pro y en la consola de
15:02 chat lo pegamos ejecutamos y como ves el
15:05 proceso es el mismo empieza a crearnos
15:06 el código html en segunda instancia nos
15:09 crea el código css y finalizamos con el
15:11 motor el código javascript ya hemos
15:14 terminado este sin duda es un código más
15:16 sencillo y más simple que el segundo que
15:18 hemos visto del juego del 3 en raya pero
15:20 vamos a probarlo a ver qué tal se ve
15:22 nuestro reloj digital Así que copiamos
15:23 el código html y en codepen vamos
15:26 pegando cada una de las piezas de código
15:28 que nos ha creado chat gpt en primer
15:30 lugar el código html volvemos y copiamos
15:32 el código css lo añadimos en el apartado
15:35 css y finalizamos copiando el código
15:39 javascript lo añadimos aquí en este
15:41 apartado que va a ser el motor de
15:43 nuestro reloj digital y ya lo estás
15:45 viendo en pantalla cómo funciona salvaje
15:46 nos ha creado un reloj digital que marca
15:48 la hora exacta en la que nos encontramos
15:50 las 12 y 54 con un diseño bastante
15:54 bonito y que podrías incluirlo
15:56 perfectamente en tu página web
15:57 simplemente añadiendo estos tres códigos
16:00 de aquí que nos ha creado chat gpt que
16:03 si lo hubiera enseñado en el vídeo de
16:04 hoy no se merece un buen like Yo es que
16:06 ya no sé verdaderamente hoy he
16:08 disfrutado como un niño pequeño con este
16:10 vídeo porque los que me seguís de hace
16:11 tiempo ya sabéis que soy un creador nato
16:13 me encanta crear cosas nuevas me encanta
16:15 aprender me encanta enseñar y estoy
16:17 seguro de que lo que he mostrado hoy
16:19 aquí va a haceros Útil para muchos de
16:21 los que estáis viendo Este vídeo pero
16:22 sabrás que ten muy claro que esto es
16:23 solo el inicio estamos en los primeros
16:25 segundos de lo que supone el Big Bang de
16:28 la Inteligencia artificial y yo estoy
16:29 todo el día investigando probando cosas
16:31 nuevas para que tú puedas verlas aquí en
16:33 el canal por eso Si no quieres perderte
16:35 ninguna recuerda suscríbete al Canal
16:38 déjame un buen like y salvaje nos vemos
16:41 en el próximo vídeo adiós
16:44 [Música]
16:50 [Música]
, , , #Como #programar #ChatGPT #FÁCIL #RÁPIDO #Apps #con #INTELIGENCIA #ARTIFICIAL #CSS #HTML , [agora]
