- hace 2 días
Categoría
🤖
TecnologíaTranscripción
00:00Buenas, bienvenido al tercer módulo de este curso.
00:02Este módulo lo llamé creando mi primera aplicación o mi primera web con inteligencia artificial.
00:08Así que espero que después de este video salgas ya habiendo hecho tu primera página web
00:15y te sientas orgulloso de haberla y decir, por fin aprendí esta habilidad.
00:20Por lo menos aprender a hacerla de primeras, que es ya un primer paso.
00:24Y a partir del siguiente módulo vas a poder profesionalizarlas y poder venderlas.
00:28Lo primero que tendremos que hacer es crearnos una carpeta.
00:31Yo recomiendo que te la crees en documentos, en algún sitio donde tú puedas identificar tu carpeta.
00:36Yo la voy a crear en el escritorio para que sea más simple a nivel de video y lo puedan
00:40ver con más facilidad.
00:42La carpeta se llama la curso y luego dentro de curso vamos a crear otra carpeta.
00:46El nombre de esta carpeta debe ser el nombre de nuestro proyecto.
00:49Es decir, este nombre se va a mantener para todo, así que vamos a ponerle un buen nombre que identifique
00:53lo que queremos.
00:54Si estamos haciendo para la peluquería de Juan, ponemos peluquería Juan en el nombre, tal cual.
00:59Por ejemplo así, peluquería, siempre sin acentos estos nombres, barra Juan.
01:05Recomiendo que siempre le pongan barras bajas o guiones para que se pueda identificar mejor
01:09y que cuando se vayan a subir y todas estas cosas las aplicaciones no den mucho problema.
01:14Quiero que el nombre sea lo más sencillo posible y no utilice caracteres raros como arrobas, espacios o acentos
01:20porque esto nos puede generar errores en el futuro.
01:23No le vamos a llamar peluquería Juan, evidentemente, porque no vamos a hacer una página para la peluquería de Juan
01:27pero sí que le voy a poner primera barra baja página.
01:33Como ven, sin acento, le ponemos primera, siempre utilizamos la barra baja o el guión para los espacios
01:40y le pegamos.
01:42Ahora veríamos nuestro editor de código de confianza llamado Antigravity
01:46que ya lo hemos visto anteriormente en el curso y que ya deberías tenerlo instalado
01:49y esto es diferente para Mac y para Windows pero vamos que en Windows es muy muy similar
01:54básicamente aquí arriba vas a tener todos estos botones
01:57y le vas a tener que dar aquí a File o Archivo, te dirá
02:00le vas a dar aquí Open Folder o Abrir Carpeta en español
02:03le damos a Abrir Carpeta y nos vamos a donde tengamos nuestra carpeta
02:07que es, en mi caso, en escritorio
02:10quizá tú la tienes en documento como te comenté
02:12nos vamos a Curso y Primera Página
02:15aquí es importante que solo le demos un clic
02:17nos entramos dentro de la carpeta y le damos Abrir
02:22aquí le damos que sí, que autorizamos
02:25y aquí ya nos abre nuestra carpeta
02:27vemos que aquí pone Primera Barra Página
02:28así que esto lo podemos ampliar un poco aquí
02:30desde esta parte, vemos que sale una rayita azul
02:33la ampliamos y aquí podemos hacer
02:35Control más
02:36o en Mac es Alt o Command más
02:39lo ampliamos
02:40y aquí ya podríamos empezar a escribir nuestros prompts
02:43como lo hacemos con ChatGPT
02:45tenemos esta parte que pone agente esencial que vamos a utilizar
02:48porque es como el ChatGPT
02:50pero integrado dentro de Antigravity
02:52entonces, aquí debemos escribirle específicamente qué queremos
02:56qué tipo de web queremos construir
02:58siempre recomiendo para páginas web básicas
03:00escribir esto al principio
03:05hazme una página web en HTML, CSS y JS
03:08¿qué es todo esto?
03:10en principio no te hace falta entenderlo todavía
03:12pero HTML, CSS y JS serían los lenguajes de programación
03:16que va a utilizar la inteligencia artificial
03:18para nosotros no es tan relevante
03:20pero así la inteligencia artificial
03:21no elige otro tipo de lenguaje de programación
03:24más complicado
03:25sino que elige los básicos y que utiliza todo el mundo
03:28luego tenemos que describir qué tipo de página web queremos
03:30aquí le escribo
03:31quiero que me hagas un portafolio sobre mí
03:34te preguntarás qué es un portafolio
03:35si no lo conoces no pasa nada
03:37un portafolio es básicamente como tu currículum
03:40pero en la página web
03:42entonces recomiendo que como primer proyecto
03:44hagas un portafolio sobre ti mismo
03:47cuál puedes poner tu experiencia
03:48tu educación
03:49qué has estudiado
03:50dónde
03:51dónde vives
03:51de qué trabajas
03:53todo esto
03:54sería información relevante que podríamos poner en nuestro portafolio
03:57y te recomiendo que sea tu primer proyecto
03:58porque cada uno tiene su propia experiencia
04:01su propia vivencia
04:01y así la página web va a quedar diferente para todos
04:04aquí le voy a explicar
04:05quién soy yo
04:06escribí bastante
04:07así que yo a ti
04:08te recomiendo que también escribas bastante
04:10para que sea lo más detallado posible
04:12sobre tu vida
04:13que te dé tu experiencia
04:14que te escriba en la página web
04:15todo lo que sabes sobre ti
04:16y que así lo puedas publicar en una página web
04:19en mi caso le puse
04:20soy Humberto García
04:21un programador con cuatro años de experiencia
04:23hago un curso con inteligencia artificial
04:24para personas sin conocimientos en programación
04:26eso sería como mi parte técnica
04:28luego
04:29he trabajado en varias empresas
04:30puedes inventarlas
04:31en este caso le puse
04:32puedes inventarlas
04:33para evitar
04:34escribir tanto
04:35pero en este caso te recomiendo
04:36que tú si pongas
04:37pues trabajé como mecánico
04:39en tal taller
04:40o trabajé como pintor
04:42en tal sitio
04:43y así tú puedes
04:44pues tener un portafolio realista
04:47basado en tus experiencias reales
04:48esto lo recomiendo muchísimo
04:50para que tu primera página web
04:51sea realmente útil
04:52aquí también puse
04:53he estudiado varios cursos de programación
04:55los cuales también puedes inventar
04:57que aquí también te recomiendo
04:58que si tienes cursos reales
04:59digas
05:00estudié este curso en Udemy
05:01estudié el curso de inteligencia artificial de Humber
05:04o tengo estudios superiores
05:06en tal
05:06o estudié la universidad
05:07en no sé dónde
05:08y así la página web también
05:10pues te pueda involucrar
05:12con tus estudios
05:12que la gente pueda saber
05:13dónde estudiaste
05:14de dónde eres
05:15toda esta parte
05:16y luego le dije
05:17que la parte más importante
05:18es que añada
05:19un enlace a mi Instagram
05:20que es Humber.ia
05:22así la página web
05:24se va a basar
05:25en redireccionar
05:25a todas las personas
05:26que entren
05:27a mi Instagram
05:28y esto es un principio
05:30muy básico
05:30de las páginas webs
05:31si tú quieres hacer
05:32una página web
05:32lo más importante
05:33es redirigir a la gente
05:34a un sitio
05:35por ejemplo
05:36si eres mecánico
05:37te interesaría quizás
05:38que la gente te llame
05:39o que agende una cita contigo
05:40o si eres veterinario
05:42también te conviene
05:42que te llamen
05:43o que te escriban por Whatsapp
05:44para agendar citas
05:45entonces en nuestro prom
05:46ya sabemos
05:47el lenguaje de programación
05:48sabemos
05:49qué tipo de página
05:50vamos a hacer
05:51y sabemos
05:51información
05:52para rellenar la página
05:54así que por último
05:55te recomiendo
05:55que en tu prompt
05:56escribas también
05:57qué estilo quieres
05:58que tenga la web
05:59colores
06:00etcétera
06:00y aquí yo le escribí
06:02diseño moderno
06:03y mucho de inteligencia artificial
06:04o sea como que tenga
06:05ese estilo de inteligencia artificial
06:06usa los colores negro
06:09blanco
06:09y amarillo
06:10y con esto ya tendríamos
06:11todo para escribir
06:12un buen prompt
06:12para que la inteligencia artificial
06:14nos haga nuestra primera página web
06:15en un solo prompt
06:16así que aquí comprobaríamos
06:18que este modo
06:18esté en fast
06:19en vez de planning
06:20para ahorrar tokens
06:20y por último
06:22aquí elegir siempre
06:23el modelo
06:23gemini 3.1 pro low
06:25porque si elegimos
06:26el high
06:27o alguno de cloud
06:28nos van a cobrar
06:29muchos tokens
06:29y no vamos a poder
06:31hacer tantas páginas web
06:32como querríamos
06:32en un futuro
06:33así que elegimos
06:34gemini 3.1 pro low
06:36y le damos en ver
06:36la generación
06:38puede dar entre
06:381 o 10 minutos
06:39dependiendo
06:40de lo que le tome
06:41la inteligencia artificial
06:42generar imágenes
06:43buscarlas en internet
06:44así que
06:45si quieres que la página
06:46sea buena
06:47tienes que esperar
06:48un poco más
06:48y si tarda un poco menos
06:50pues mejor
06:50porque así puedes ir probándola
06:51y luego podrías ir mejorándola
06:53que lo vamos a explicar
06:54en la siguiente lección
06:54vale
06:55vemos que ya la inteligencia artificial
06:56está generando varios archivos
06:57y me dice
06:58he creado tu portafolio web
07:00completo
07:00o sea que ya tendríamos
07:02a mí me tardó aproximadamente
07:03unos 4 minutos
07:04en hacerlo
07:05y aquí te recomiendo
07:06que te vayas
07:07a la parte de aquí arriba
07:07donde dice explorador
07:09donde hay como unos documentos
07:11y aquí tendríamos
07:12nuestra carpeta
07:13con los 3 archivos
07:14estos 3 archivos
07:15son los que componen
07:15nuestra página web básica
07:17ya podríamos minimizar
07:19la parte de antigravity
07:21nos vamos a nuestra carpeta
07:24vemos que tenemos
07:25los mismos 3 archivos
07:26que acabamos de mencionar
07:27el html
07:28donde está el contenido
07:28el js
07:29donde está
07:30la parte de la lógica
07:31digamos
07:32y el ccs
07:32donde está el estilo
07:33donde están los colores
07:35toda la parte
07:36de estilar la página
07:37y hacerla bonita
07:38y aquí te preguntarás
07:39¿cómo puedo ver mi página?
07:42pues es sencillo
07:44simplemente le damos
07:44doble clic
07:45al archivo
07:46index.html
07:47que debería abrirte
07:48en tu navegador
07:49en caso de que no tengas
07:50ninguna aplicación configurada
07:52le das doble clic
07:52y eliges tu navegador
07:54de confianza
07:54ya sea safari
07:55google chrome
07:57brave
07:57el que uses
08:01vale
08:01y aquí ya tendríamos
08:02wow
08:03está increíble
08:04está muy muy bonita
08:05es una página web
08:07creada
08:07con la inteligencia artificial
08:09en un solo prom
08:10y vemos que
08:11usó los colores
08:11negro y amarillo
08:12como le pedí
08:13habla sobre mí
08:14pone hola mundo
08:15soy Humberto García
08:16que esto es una frase
08:17de programación
08:18pone las llavecitas
08:19que son también
08:20de programación
08:20o sea
08:21si lo ven todo
08:21te da la estética
08:22de que soy programador
08:23de que es una página web
08:25como limpia
08:26minimalista
08:27justo lo que le pedí
08:28vamos a darle aquí
08:28a conocerme más
08:29y en principio
08:29los botones funcionan
08:31vemos que habla sobre mí
08:32habla un poco
08:33sobre todo lo que estoy
08:34desarrollando
08:34me dice lo que uso
08:36las tecnologías
08:37y todo esto
08:40vemos aquí una parte
08:41muy bonita
08:41con la experiencia
08:42vemos que incluso
08:43puso aquí de fondo
08:44como un efecto
08:45no sé si se verá
08:45en el video
08:46pero es increíble
08:47como la inteligencia artificial
08:48ha avanzado
08:49de tal modo
08:50que en un solo prom
08:51puede llegar a ser
08:52esto tan genial
08:56podemos ver
08:56el apartado de estudios
08:57que en mi caso
08:57le pedí
08:58que lo inventara un poco
08:58pero en tu caso
08:59puede poner
09:00los estudios tuyos reales
09:02y como podemos ver
09:03hizo lo que le pedí
09:04que fuera lo más importante
09:05que era poner
09:06mi página de instagram
09:07lo puso aquí
09:08en un botón gigante
09:09en amarillo
09:09para que toda la persona
09:10que lea este portafolio
09:11le dé clic aquí
09:12y aparezca en mi instagram
09:14que podemos ver
09:14que funciona perfectamente
09:16y te redirige
09:18incluso podemos ver
09:19el efectito
09:19que le puso
09:20a la pelotita amarilla
09:21que está como flotando
09:22o sea está increíble
09:23la verdad
09:23a mí me encanta
09:24por lo menos esta página
09:25yo me imagino
09:26que a alguna persona
09:27no le gustará
09:27pero es porque
09:28es el estilo
09:29que le pedí
09:30en el caso
09:30de que tú quieras
09:31otro estilo
09:32completamente distinto
09:33algo más abstracto
09:34algo un poco más moderno
09:36más blanco
09:37más otros colores
09:38usar el verde
09:39quizás
09:40o que sea una página web
09:42un poco menos simple
09:43que pueda tener
09:44cosas diferentes
09:45todo lo que quieras
09:46pedirle extra
09:47lo puedes hacer
09:48simplemente añadiendolo
09:49al prompt
09:50igualmente
09:51imagínate en el caso
09:52de que no te haya gustado
09:52tu página web
09:53que podría ser el caso
09:54por eso
09:55vamos a hacer
09:56en la siguiente elección
09:56la parte de iteración
09:58y de mejora
09:59para la página web
09:59así que no te pierdas
10:00la siguiente elección
10:01vamos a hacer otra página web
10:02de cero
10:03pero esa sí que la vamos
10:04a mejorar
10:04hasta tal punto
10:05que nos quede súper profesional
10:06y que se pueda vender