Vibra de programación con Windsurf: diseño web sin códigos para principiantes | Programar con IA

1. INTRODUCCIÓN: Bienvenidos al futuro. Esta es tu oportunidad de subir de nivel para aprender algo que va a mejorar significativamente tu vida. Y eso es codificación de vibra. Y eso es porque ya no tienes que ser un desarrollador con toneladas de años de experiencia para crear un sitio web, una aplicación, un negocio. Utilizaremos una plataforma llamada windsurf AI y el poder de la inteligencia artificial para ayudarnos a construir sitios web Te lo imaginas, lo describes, lo entiendes. Lo afinas, lo lanzas, aprendes, y luego finalmente, ganas. Puede que te lleve un par de intentos y tal vez un par de meses, pero la codificación de vibra te da una oportunidad increíble para hacer un negocio fantástico por tu cuenta. Creo que esta es la mejor oportunidad para mayoría de la gente cree un ingreso sólido y confiable. Y repito sin ser técnico, sin saber codificar, este es el futuro. En este curso, vamos a crear un sitio web desde cero. Vamos a lanzarlo en nuestro propio dominio paso a paso con la ayuda de la IA. Esto no va a ser súper fácil. A veces va a ser frustrante, y eso es porque llegamos temprano Pero llegar temprano es donde está nuestra principal ventaja. Imagínese haber invertido en Apple hace 20 años o haber comprado Bitcoin cuando se lanzó por primera vez. Claro, va a haber incertidumbre al principio, ¿verdad? Temas, todo tipo de problemas, pero no esperes hasta que se generalice. Esta es tu Tienda. Y en este curso, voy a explicarte todo lo que necesitas saber. Acaba de comenzar y lanzar en primer sitio web en muy poco tiempo. Te voy a enseñar en inglés sencillo lo que significan IA, LLM, MCPs y todo eso Soy diseñadora, y si alguna vez has visto mis cursos de diseño, sabes que me concentro en obtener resultados rápido sin teoría aburrida. No voy a llenar tu cabeza de términos y conceptos complicados. No, de nuevo, no soy desarrollador, y eso es una gran ventaja. En cambio, me enfoco en ejemplos y ejercicios divertidos. Invierte en tu futuro. Esta es una de las mejores cosas que puedes aprender ahora mismo. Para asegurar tu futuro y tener un ingreso fantástico. Empieza hoy mismo. No esperes. Esta es tu oportunidad. 2. Qué es la codificación de vibra y windsurf: Bienvenida de nuevo. En esta cita, vamos a usar el windsurf para el código vibra, pero ¿qué es el windsurf y qué es la codificación de vibra, verdad Entonces, antes que nada, el windsurf es una plataforma que te ayuda a construir software con el poder de la IA, y eso es sin saber codificar Acaba de comprarlo Open AI, la gente detrás de Chat GPT por 3 mil millones de dólares Sí, eso es un billón de mil millones. Son 15 dólares mensuales, y lo que obtienes a cambio es un cambio de juego completo. Con Winserf, estás trabajando codo a codo con la inteligencia artificial Eso entiende tu proyecto, sigue tus instrucciones y construye tu app para ti, casi como magia. Escribes lo que quieras. A eso se le llama el aviso. A lo mejor describas cuáles son las aplicaciones que haces. Y luego la IA se cargo y hace la mayor parte del trabajo pesado. Entonces, en resumen, ¿qué puede construir realmente Windserf? Bueno, podemos hacer aplicaciones móviles, tanto para IOS como para Android, al igual que las aplicaciones que puedes obtener en la tienda de aplicaciones o en Google Play. Puedes crear cualquier cosa, desde un rastreador de fitness hasta una aplicación de chat e incluso una herramienta de finanzas profesional. Lo que sea que se te ocurra, puedes construir. Por supuesto, puedes hacer sitios web como lo vamos a hacer en este curso, como sitios web de presentación, portafolios, blogs personales, los trabajos Puede manejar páginas de destino para productos, para startups, para los eventos, lo que sea. Todo es rápido, todo receptivo, todo limpio. No hay ningún inconveniente. Por supuesto, puedes construir productos SAS. Eso significa software como servicio. Y el windsurf puede ayudarte a construir eso. Te puede ayudar con el front-end, con el back end, con la base de datos, con todo, que no tengas que saber esas cosas. Sólo dile lo que debe hacer, y va a averiguar las cosas complicadas. Y una última cosa. Puedes construir plugins y diversas herramientas. Puedes construir extensiones cromadas. Se pueden hacer bots de discordia. Puedes hacer herramientas internas para tu equipo o empresa. Demonios, incluso puedes hacer complementos de prensa web. Si vive en un navegador o se ejecuta en una computadora, hay muy buenas posibilidades de que Winserf pueda construir Ahora, aquí está la gran idea. Winserf se conecta directamente a algunos de los modelos de IA más inteligentes del Entonces eso significa que sabe escribir Python, Javascript, reaccionar, siguiente JS, nodo, lo que sea. Es como tener un equipo senior de desarrolladores en el staff 247 con infinita paciencia, listo para codificar lo que quieras en el acto. Le dices lo que quieres, y luego empieza a codificar. Revisas los resultados, das feedback y mejora al instante. Esto es, de nuevo, sin que sepas codificar sin todas esas cosas que antes mencioné. Entonces esa es la parte esencial. Así que imagina esto. una idea para el producto, bien, para el plug in, una app, una herramienta que resuelve un problema que tal vez has tenido desde hace años. Ahora, normalmente, necesitarías meses de desarrollo. Necesitarías un equipo, cierto, un presupuesto, un sinfín de reuniones. Y la cosa es, eso ya no es necesario con Windsor. Simplemente describes la idea, y en unos minutos, tienes algo real, algo funcional, algo que puedes probar, mejorar, y luego tal vez finalmente lanzar después de algún trabajo. Así que eso es codificación de vibra. Entonces, la codificación de vibra es que le dices al programa lo que quieres que se haga en un inglés simple y sencillo, y luego la plataforma lo ejecuta Eso es lo que hace que el windsurf sea tan poderoso. No te ayuda a escribir código. No, te ayuda a construir productos. Resuelve problemas y te ayuda a pasar de idea a la ejecución más rápido que nunca. Por favor, descargue el archivo adjunto e inscríbase en el windsurf Así que adelante y apúntate, y en la próxima conferencia, vamos a instalar juntos el windsurf . Vamos a por ello. 3. Instalar el windsurf y establecer tus expectativas: Bienvenido de nuevo. Instalar windsurf es bastante sencillo porque es solo un programa sencillo No pasa nada especial, pero mientras me ocupo de eso en el fondo, déjame establecer tus expectativas, ¿verdad? Llegamos temprano. Las cosas están cambiando rápidamente. Cada semana más o menos, tal vez cada dos semanas, hay grandes noticias, mejoras. Y eso es un poco incómodo, ¿verdad? Están saliendo nuevas características, y estoy seguro de que este curso va a estar desactualizado, aunque voy a hacer todo lo posible para mantenerlo actualizado. Ahora, mi objetivo es enseñarte a aprender y a usar estas herramientas. Te voy a enseñar principios que no van a quedar obsoletos, y ese es el verdadero valor de este curso. Volvamos a este cambio constante de mejoras, ¿no? Ahora bien, este es el precio que hay que pagar por llegar temprano. Necesitas mucha paciencia. Necesitas dejar que tu frustración te lave. Y eso es porque te prometo que te quedarás atascado. Te lo prometo. Y no se trata de este curso, mi estilo de enseñanza, ni de mis conocimientos. No, he tenido innumerables casos donde dijo el guía oficial, haga clic en el botón azul. Pero sólo había los rojos. O el guía dijo que hiciera clic en el botón de guardar, pero no había ningún botón de guardar. Es muy molesto cuando eso sucede. Tenía problemas en los que ya no podía trabajar por problemas con mi VPN. Pero en realidad no uso una VPN. Decía que no tenía Internet, pero todo estaba funcionando bien. Seguí cada paso de cada guía oficial, y me quedé atascado con un problema oscuro Yo uso tres computadoras diferentes, y tengo tres problemas diferentes. Ahora, podría continuar por años. Esto está obligado a suceder. Y mi consejo, usa la guía del archivo adjunto para obtener ayuda. Ahora, la mayor parte del tiempo, tendrás que hacer muchas búsquedas y arreglar todo por tu cuenta. Estoy aquí para ayudar. Puedes contar conmigo. Pero algunos temas van a ser muy específicos de tu computadora. Y hay que tener paciencia para resolverlos. Entonces ese es el inconveniente, correcto, por estar tan temprano en el juego Ahora bien, ¿cuál es la ventaja de ser tan temprano? Bueno, se obtiene ventaja en la carrera. Ya sea para el trabajo, cuenta propia o para construir un negocio, esto es masivo Aprendes de tus errores. Ves temas comunes, y sales adelante. Te adelantas a todos los demás que no quieren pasar por todo ese dolor de llegar temprano, de que las cosas no salgan bien. Te adelantas a ellos. Y como dije, es como invertir en Apple hace 20 años. Nadie sabía que iba a ser una compañía tan grande, cierto, un éxito tan grande. Pero aquí, te lo prometo, no hay nada más grande. Y todo está en tus manos. Esa es la cosa. Puedes crear cosas increíbles. O simplemente podrías posponer. Puedes esperar hasta que las cosas estén súper claras, fáciles para todos. No más errores, no más problemas. ¿Y entonces qué? Bueno, vas a tener 100 veces la competencia, ¿ verdad? Es tan sencillo como eso. Si inviertes ahora en Apple o Bitcoin o lo que sea, seguro, puedes hacerlo bien, claro. Pero si estuvieras ahí al principio, las recompensas habrían sido infinitamente mayores Entonces, por favor entiende por qué vas a sufrir. Tendrás dolores de cabeza y mucha frustración. Pero es para tu futuro. Y si puedes manejar eso, si puedes seguir empujando, la recompensa va a ser enorme. Por eso me encanta tanto la codificación de vibra. Es exactamente el nivel de dificultad correcto, ¿verdad? Si fuera demasiado difícil, solo sería la codificación clásica. La forma clásica de estudiar durante cuatro, quizá seis años, estudiar, trabajar constantemente, ser junior, subir de nivel lentamente, pero seguramente. Entonces, de cuatro a seis años. Entonces esa sería la manera difícil. Pero si fuera demasiado fácil, todos estarían aquí. Todos lo harían. Entonces la recompensa sería casi nada. Este, este nivel de dificultad, es fantástico. Es exactamente el nivel correcto de dificultad. Así que volvamos a ello. En realidad no vas a codificar, ¿verdad? No necesitas conocer ningún lenguaje de programación de ningún tipo. Tendrás que ser paciente, y tienes que ser capaz de explicar claramente la idea de tu mente a la computadora. Y esa es una habilidad que vas a desarrollar a lo largo de este curso y a través de la práctica. Pero otra vez, no vas a codificar y no vas a leer código. Se supone que no debes entender todo lo que está pasando mientras el windsurf está trabajando en segundo plano en tu proyecto No, uno de los principios clave que quiero enseñarte es que puedes pasar todo el día creando memes para compartir con tus amigos y reírte o por otro lado, puedes crear una plataforma para el puedes crear una plataforma para windsurf que permita a la gente crear memes, y luego puedes hacer una fuente de ingresos con eso Por lo que esta es una de las cosas más importantes del curso. Se trata de dónde está tu enfoque y cómo puedes llegar a ideas y ejecutarlas. Voy a dar una conferencia sobre eso, así que estén atentos. Pero ahora hay que tener instalado el windsurf. Yo configuré nuestra interfaz para el esquema de color oscuro y estamos a punto de crear nuestro primer proyecto. Sí, así que pronto vamos a hacer uno. Ahora, una nota final. Voy a simplificar muchas cosas, así que es fácil de entender para todos, ¿verdad? Pero por si acaso eres el codificador con vastos conocimientos, por favor entiende que cuando dices que windsurf es una bifurcación del código VS, eso realmente no le dice mucho a la mayoría O cuando dices algo como levanta tu terminal y ejecutas este rápido script de Python. De nuevo, eso es un poco abrumador para la mayoría de la gente. Yo no voy a hacer eso. Puedo simplificar demasiado las cosas, pero este es un curso para principiantes que no son técnicos, así que vamos a tomarlo con calma y paso a paso Bien, con eso, te voy a ver en un segundo. 4. Nuestro primer sitio web sobre windsurf: Bienvenido de nuevo. Vamos a crear nuestro primer sitio web en Windserf Ahora, antes de comenzar, por favor vea esta conferencia dos veces. La primera vez, solo mira y mira lo que está pasando. Después rebobinar desde el inicio y hacer una pausa para trabajar a lo largo. Vas a necesitar presionar pausa con bastante frecuencia. Por favor, no intente trabajar a lo largo de su primera visualización. No vas a poder seguir el ritmo. Así que de nuevo, por favor mire dos veces, y la segunda vez, haga una pausa frecuencia que necesite. Bien, ahora, todos nuestros proyectos tienen que organizarse en carpetas. Entonces abramos nuestra computadora y creemos una nueva carpeta. Si estás en Windows, intenta evitar tu partición principal donde está instalado Windows porque a veces para algunas personas, eso puede crear problemas. Bien, llámalo, como quieras. Voy a usar wind one, pero el nombre realmente no importa. A continuación, vamos a encender el windsurf y vamos a abrir esa carpeta Nada especial hasta ahora, ¿verdad? Espere el segundo hasta que se cargue la interfaz . Pero sí, eso es todo. Ahora tenemos nuestro primer proyecto. Adjunto al curso, vas a tener este archivo de texto con una tarea. Es algo súper simple, bastante básico. Esto es lo que pegamos aquí al lado derecho en cascada. Esto es cascada en el lado derecho. Ahora, estamos en modo escritura, y desde este desplegable, voy a usar este modelo. Por favor use el mismo, o si no está disponible, puede usar cualquiera de estos desde la pantalla. Bien, voy a explicar todo a detalle más adelante. Entonces, por favor, sigamos adelante. Ahora, el mensaje, la tarea es la siguiente. Crea una página de destino de cartera moderna para mí, Chris Barron 36 de Bucarest Rumania Tengo 14 años de experiencia en diseño. Voy a ser instructor certificado Dobe, y me especializo en diseño web y app Prefiero un esquema de color rojo y negro, bonitas animaciones y una sección de portafolio con cinco categorías. Usa imágenes de marcador de posición por ahora. Será una sola página con un menú principal en la parte superior que te llevará a esa sección en particular. La dirección de mi oficina es esta, y por favor agregue reseñas ficticias Agregar un formulario de contacto para que la gente me envíe un mensaje y me muestre mi número de teléfono. También mostrar mis perfiles en redes sociales. Utilice las mejores prácticas para crear esta página de destino. Bien, entonces esa es la tarea. Deberías usar el mismo, pero ten en cuenta que es totalmente normal que tu diseño se vea diferente al mío. Así es exactamente como funciona la IA. No es un error. Así es como funciona. Ahora, en caso de que algo no funcione en absoluto, simplemente se atasca. No te preocupes por ello. Continuar a la siguiente conferencia donde vamos a configurar todo y luego vamos a volver y vamos a intentarlo de nuevo. Entonces, nuevamente, si no eres capaz de ejecutar esto en absoluto, continúa con la siguiente lección, luego vuelve. Bien, una vez que golpeamos Enter, nos vamos a las carreras. Observe esta área aquí. Esto dice que está funcionando. Y también puedes notar este círculo verde debajo. En caso de que quieras detenerlo, quieres detener la IA. Puedes usar este botón rojo, aunque en realidad no vas a hacer eso. Ahora dentro de este panel, se puede ver cómo piensa el modelo. Algunos modelos son bastante descriptivos. Explican todo a detalle. Aquí, este modelo dice que va a hacer un sitio web bastante básico usando HTML y CSS más un poco de JavaScript. Bien. Y los archivos están apareciendo, empezando por el archivo índice, que es básicamente la página principal Puedes ver los archivos en el lado izquierdo de la pantalla, y potencialmente podrías abrirlos aquí al frente y al centro. Pero el 99% de las veces, en realidad vas a enfocarte en el lado derecho. Ahora, voy a acelerar esta grabación ya que a veces puede llevar un tiempo, sobre todo con ciertos modelos. Ahora bien, no se sorprenda al ver que la modelo puede cometer un error, ¿verdad? El modelo simplemente significa la IA, por cierto. Ahora, por ejemplo, aquí, intentó generar demasiado código a vez y fracasó. No pudo hacerlo. Pero se dio cuenta de su error, por lo que buscó la solución diferente, y luego ya la aplicó. Y eso es sin que intervengamos, sin que hagamos cosas. Así que eso es bastante agradable. Ahora, a continuación, intentó poner en marcha Python, así que en realidad pudimos ver el sitio web. No necesitas conocer Python, pero sí necesitamos tenerlo instalado. Ahora, se puede ver que aquí es donde tenemos que decidir. Ahora bien, ¿instalamos Python o deberíamos probar de otra manera? Esto es lo que nos pide la IA. Y quiero mostrarte algo. Vamos a decirle que instale Python por su cuenta, ¿verdad? Eso sería genial, ¿verdad? Pero no, en realidad no lo hará. Y hablaremos de eso en una conferencia separada. En definitiva, nos haría la vida más fácil, pero eso sería una preocupación importante en materia de seguridad. No sería seguro. Ahora, volviendo a ello, digamos que continúe. Pero aquí está la cosa. Fui demasiado vago con mi mensaje Continuar. Entonces no sabe qué hacer, ¿verdad? Entonces verifiqué Python. Una vez más, en realidad quería la otra opción. Entonces es mi culpa. Ahora, siempre hay que ser precisos con sus instrucciones. Dile exactamente lo que quieres. No te quedes corto al respecto. Pero en realidad, eso tampoco va a funcionar. Así que vamos a instalar Python porque en realidad es bastante simple. Sólo lo haremos una vez, y después el modelo se encargará de todo. Bien, entonces desplácese hacia arriba y haga clic en este enlace. No te preocupes por el mensaje de advertencia. Aquí estamos en el sitio web oficial, así que es todo agradable y seguro. Desplázate hacia abajo y busca tu sistema operativo. Como puedes ver, esta es la recomendada. Entonces lo descargaremos e instalaremos. Ahora, antes de elegir algo, el modelo sí decía que necesitamos habilitar una característica específica, y esa es esta segunda casilla de verificación aquí Pero lo mejor es que los revises a ambos. Bien, ahora, por favor, tenga paciencia y haga una pausa tantas veces como necesite para trabajar. Bien, ahora, vamos a instalarlo, y esto sólo tomará un minuto más o menos. Ahora bien, a veces esto no va a funcionar correctamente, y tengo una conferencia para ese caso específico. Pero sí, aquí está hecho. Volver al windsurf Digamos al modelo que Python está instalado, y vamos a decirle que continúe. inmediato, me sale un comando aquí de que Winserf no está configurado para ejecutarse por sí solo Pero eso no es problema. Haremos clic en este botón excepto nosotros mismos. Y después del segundo, aquí hay otro. Vuelva a hacer clic en Aceptar. Y así, deberíamos estar listos con Python, y ya estamos listos para irnos. Ahora, mi computadora con Windows está pidiendo permiso, y por supuesto, vamos a decir que sí. Ahora podemos consultar nuestro sitio web utilizando esta dirección. Vamos a copiarlo y luego pegarlo en cualquier navegador. Pero también podrías usar Open y External Browser. Ahora voy a usar Microsoft Edge en esta computadora, pero puedes usar lo que quieras. Sí, este es un sitio web encantador. Es negro y rojo porque eso es lo que pedí. Ahora, mirándolo, ¿es espectacular? No, claro que no, pero lo conseguimos funcionando con solo unos pocos clics. Observe que no tengo fotos porque no hemos proporcionado ninguna. Nuevamente, el modelo no descargaría nada por sí solo. Pero vamos a dar un paso más allá. Cambiemos el negro con un bonito tono de azul, y tal vez agreguemos el mapa en lugar de simplemente mostrar la dirección, ¿verdad? Ahora, de nuevo, escribe eso, y puede que tarde un tiempo, pero voy a acelerarlo. Ahora, cuando se hayan hecho todos los cambios, por favor utilice el botón aceptar todos desde aquí. No uses el de la parte central de la pantalla. No, siempre concéntrese en el panel derecho y acepte todos los cambios una vez hecho el modelo. Observe que no hay círculo verde y no hay botón rojo para detenerlo. Entonces eso significa que está parado, y podemos aceptar. Bien, echemos un vistazo y veamos. Sí, esto es sólido. Ahora es azul, y tenemos un mapa. Tenemos algo con lo que trabajar, y debería ser receptivo. Podemos hacer click derecho y de esta lista, podemos elegir inspeccionar. En este nuevo panel, estamos buscando este icono, que va a cambiar el navegador a modo móvil. Sí, esto es increíble. Enhorabuena. Nuevamente, no es perfecto. Sé que tengo cosas que mejorar. Pero así es lo rápido que puedes ponerte en marcha con el windsurf en muy poco tiempo Lo que quiero que hagas es crear tu propia versión, empezando por mi TextFile Crea una nueva carpeta en tu computadora, luego ve al menú superior y usa Abrir carpeta. Es tan fácil como eso comenzar un nuevo proyecto. Reemplace el nombre en el archivo de texto, cambie sus datos y luego créelo. Cuando termines, toma una captura de pantalla de todo el diseño y publícalo para que pueda verlo. Si no logras tomar una captura de pantalla, no te preocupes. Solo toma una foto con tu teléfono. En caso de que tengas problemas y no puedas manejarlo, usa el PDF que se adjunta para obtener ayuda. Ahora, antes de que terminemos, para algunas personas, Python no se instalará correctamente, y esto puede que no funcione. Si ese eres tú, por favor no te decepciones. Tenemos una conferencia donde configuramos todo. Entonces, si no tienes un sitio web en este momento, deja un comentario para que sepa a qué problema te enfrentas y luego pasar a la siguiente conferencia. Bien, te voy a ver en un segundo. 5. Qué puedes construir con codificación de vibra en Windsurf: Bienvenido de nuevo. Antes de continuar con el windsurf, tal vez preguntes, Chris, ¿qué debo construir? Lo pillo. Sé que puede que no seas emprendedor con algunos los genios, pero déjame ayudarte con algunas ideas rápidas Ahora, antes de eso, tengo que decirte una cosa importante. La ejecución es esencial. Las ideas no valen nada. Voy a decir eso otra vez. Se trata de la ejecución. No es la calidad de la idea. Voy a ampliar eso entonces. Entonces comencemos con este sitio web. Yo lovemg.com, ¿verdad? Este sitio web reduce tus imágenes. Si alguna vez has trabajado con Photoshop, por ejemplo, sabes que a veces te va a dar enormes tamaños de archivo, como dos, tres, 5 megabytes, ¿verdad? como dos, tres, 5 megabytes, ¿verdad Ahora, con esta plataforma, dragón suelta las imágenes, y eso es todo. Rebajas su talla en un 80% sin perder calidad. Y también puede ayudarte a cambiar el tamaño de las imágenes rápidamente. Otra vez, arrastra, suelta, y eso es todo, ¿verdad? Y tienes algunas otras características aquí. Pero el precio es de cuatro a siete dólares mensuales. No es nada. Incluso me inscribí. Entonces esa es una idea. Y aquí hay una plataforma que cambia tu PDF a un archivo Excel, que tu contador tenga un tiempo más fácil con él Es súper nicho, ¿verdad? Es sólo para el selecto grupo de personas, pero esto hace 38 mil dólares mensuales $38,000 mensuales. Cosas locas. Y esa es otra que le va muy bien. Esto cambia el nombre de todas tus fotos, y eso es todo. Todo el asunto. Esa es toda la plataforma. Entonces, en lugar de llamarlos IMG 010203, les da un nombre propio, lo cual es increíble para esos casos en los que te vas vacaciones y tienes miles de fotos por ahí, Nuevamente, este es un servicio muy específico. A continuación, usemos este poly.com, que te ayuda a publicar y programar tu contenido en todos tus canales de redes sociales Esta plataforma tiene una sola persona, un solo chico detrás de ella está ganando más de $1 millón al año, dólares australianos, pero aún así, y ahora es Channel se. Ahora, tomemos un descanso. Estas no son ideas increíbles. Estos no vienen de genios de los negocios, ¿verdad? Se trata de gente normal que tuvo una idea. Tenían un problema, y arreglaron ese problema. Ejecutaron esa idea, y la hicieron bien. Quizás hay otras 50 plataformas como Poly, por ejemplo. Entonces más caro, algunos más baratos. Por eso dije que se trata de la ejecución. Y mi consejo, enfócate en el lado del diseño. Toma algo que ya se ha hecho 100 veces antes, agrega un hermoso diseño, un pequeño giro, y te conseguiste un negocio. Por supuesto, aún necesitas promocionarlo. Necesitas anunciarte, pero esa es una historia diferente. Ahora, permítanme continuar con algunos otros ejemplos, algo un poco más arriba. Entonces aquí está la cámara base, una plataforma aparentemente complicada que está enfocada en mensajes de una cosa. Básicamente te permite crear una lista de tareas pendientes de una manera muy similar a la noción. Por supuesto, hay mucho más estas plataformas, muchas más características. Pero luego comienzas con una idea simple, y luego te expones, haces que crezca. Por ejemplo, haz una app que te recuerde levantarte de tu silla cada hora, ¿verdad? Eso es un negocio. Eso es un servicio. Esa es una app, esa es una plataforma. Y esa pequeña idea puede darte otra fuente de ingresos, cómo la monetizas, cómo construyes una audiencia Eso es otra cosa otra vez. Eso es además de los puntajes. Pero te prometo que son toneladas de plataformas construidas alrededor de una idea muy simple. Aquí hay una extensión de WordPress que simplemente te permite insertar publicaciones en redes sociales en tu sitio web. Súper fácil, y hacen mucho dinero, en su mayoría pasivos, ¿verdad? Ahora he visto extensiones pagas de WordPress que te permiten agregar una barra con un mensaje personalizado en la parte superior o en la parte inferior de tu sitio web. Eso es. Eso es todo. Ese es todo el enchufe en todo el negocio. Entonces la cosa es que el cielo es el límite. Se trata de resolver problemas, problemas que sabes que te importan, que quieres resolver por ti mismo. Aún en WordPress, hay una aplicación que te ayuda a insertar el código de Google Analytics o el seguimiento de Facebook Ads. Y es tan fácil como eso. No es nada demasiado complicado. Ahora, una vibra de chico codificó una plataforma de horóscopo en vivo en TikTok, y lo está haciendo muy, muy bien Hodoscop lo que sea. No tiene ningún sentido. No es para mí, pero a lo mejor es para ti. Ahora, otro tipo hizo una aplicación de fondo de pantalla, pero sólo para el tipo específico de anime. No tienes que hacer el siguiente Uber o tablero de puerta. Se llega a uno, cinco, diez K mensuales. En realidad necesitas resolver un problema para un pequeño nicho de personas. Pero digamos que no tienes ninguna de estas ideas, ¿verdad? Bueno, hicimos el sitio web de la cartera, ¿verdad? ¿Por qué no ofrecer este servicio a algunas empresas locales? Encuentra 100 de ellos en tu zona, en tu ciudad, en tu país y pídeles $1,000 o 80 dólares mensuales Y acabas de hacer un buen trozo de cambio. Hay otras plataformas que te ofrecen listas de todos los odontólogos de tu ciudad o país de York. Ahora bien, lo que importa es que encuentres el enfoque correcto. ¿Los envias por correo electrónico? ¿Los llamas? ¿Te presentas en el negocio? ¿Cobras $1,000 u 800? Y claro, no tienes que hacer eso solo con odontólogos. Piensa en todos los demás negocios de tu zona que hacen buen dinero, pero tienen sitios web horribles. En mi parte del mundo, eso son restaurantes, eso son abogados, eso son tiendas de servicios, son veterinario La lista sigue y sigue. Tienen innumerables agencias de diseño web, por supuesto. Pero el tuyo puede ser diferente porque puedes especializarte en un área determinada que quizás conozcas muy bien. O que estás a punto de aprender muy bien. Ofreces un buen sitio web ya codificado con poco o ningún mantenimiento. Por eso es una carrera porque cada vez más gente va a empezar a ofrecer lo mismo, ¿verdad? Porque si puedes hacer un sitio web en cinco, diez, 15, 20 minutos, claro, ¿cuál es la palabra, verdad? ¿Vas a cobrar tal vez 600 dólares? El siguiente tipo va a cobrar 400 y de repente desde $1,000, empiezas a ofrecerlo por centavos Entonces el tiempo es de la esencia. Por eso dije que vale la pena llegar temprano. Pero claro, no hay necesidad de entrar en pánico. Hay más que suficiente para que todos puedan dar vueltas. Entonces mi consejo antes crear cualquier cosa que quieras vender, empieza con unos pequeños proyectos divertidos. Ahora, hagamos una pausa. Ojalá, ahora puedas ver que hay un mundo de oportunidades, pero no tienes que apuntar al negocio de 100 millones de dólares Solo resuelve pequeños problemas como transformar esquinas cuadradas de una imagen en redondeadas, ¿verdad? Y eso tal vez un fondos de 100 dólares mensuales. Suena tonto, lo sé, pero las redes sociales están llenas de historias como esta. Se llama edificio en Público, y es una excelente manera de hacer publicidad. Constantemente publicas sobre tu viaje. Este edificio en movimiento público es fantástico porque en realidad puedes inspirarte en sus proyectos, y también puedes aprender de sus errores para que puedas evitarlos. Cuando veas sus perfiles, puedes ver que estas son solo personas normales. Entonces así es como puedes obtener algo de inspiración. El tipo que codificó ply.com documentó cada paso de su viaje y cómo lo creció en el transcurso de muchos años Estaba totalmente solo. Codificó todo, a la antigua usanza. Fue el único desarrollador. Pero ahora tal vez estés solo, pero tienes el conocimiento y el poder de 100, mil desarrolladores calificados, en tu esquina por 15, 20, 25 dólares al mes, ¿verdad? Así que no te llevará años construir tu proyecto. Puedes fallar en el marketing, pero luego puedes hacerlo en otro momento y en otro momento y en otro momento. Puedes volver a intentarlo. Puedes fallar rápido. Se puede aprender. Y luego en un momento, vas a tener éxito. Ya sea grande o pequeño, depende de ti. Está en tus manos. Pero sí, ahora la pregunta es, ¿ qué quieres construir? Puede que sea una tontería. Puede ser pequeño. Pero si sigues intentando y aprendiendo, te prometo que vas a tener resultados. Sigamos con Windsor. 6. Cómo desplazarse haciendo windsurf: Bienvenido de nuevo. Vamos a encender Windserf para que podamos explorar su interfaz Esto puede cambiar de tu parte, pero lo básico siempre estará aquí. Tenemos un menú principal en la parte superior que en realidad no usaremos, un panel de toallas en el lado izquierdo y en el lado derecho, tenemos nuestro glorioso panel en cascada, que es donde hablaremos con el programa y haremos que construya cosas. Cuando inicies un proyecto, debes crear una carpeta en algún lugar de tu computadora, luego debes usar el botón Abrir carpeta. Ahora, por si acaso trabajaste en un proyecto diferente en el pasado, es posible que los veas aquí. Y en este panel de la derecha llamado cascada, puedo empezar a dar instrucciones poco poco usando este campo aquí, o puedo retomar una conversación previa pinchando en ella aquí. Ahora, no trabajes, solo mira lo que está pasando. Así que saltando dentro de un proyecto activo, hay mucho que mirar, ¿verdad? Pero cambiemos el equipo porque es posible que quieras cambiar la interfaz, ¿verdad? Así que ve al menú superior para archivar. A partir de aquí, bajar a preferencias. Entonces busca Equipo. Y por último, aquí, da clic en Equipo de color. este momento, después de hacer clic en cualquiera de ellos, la ventana se cerrará, lo cual no es lo ideal, pero vuelve a abrirla. Preferencias de archivo, equipo de color del equipo y elige cualquiera de ellos. Bien, genial. A continuación, para ver mejor la interfaz, puedes usar Control plus para aumentar el tamaño del texto. Ahora bien, no tienes que hacer eso, pero si el texto es difícil de leer, esa es una opción. Así Control plus. Para encogerlo, usa Control menos. Ahora, volviendo a un proyecto real, en realidad no tienes que leer ningún código. La interfaz es bastante abrumadora, pero en realidad el 90% del tiempo, si no más, vas a enfocarte aquí del lado derecho en cascada. Entonces aquí es donde verás cómo piensa la inteligencia artificial y en qué está trabajando. Te va a decir cuándo tiene errores y básicamente qué se hace. Ahora bien, el resto de la interfaz, bueno, tienes un archivo explotado aquí a través del cual puedes ver todos los archivos del proyecto, y estos en realidad se abren aquí en la parte principal de la pantalla. Entonces, al hacer clic en los archivos de la izquierda, van a abrir aquí en el centro de la pantalla. Observe las pestañas de apertura, muy similares a su navegador. Para que puedas recorrerlos rápidamente. Ahora, ¿vas a hacer eso? No, el 99% de las veces, no. Nuevamente, nuestro enfoque va a estar aquí del lado derecho en cascada. Bien, es más o menos lo mismo con el panel inferior. Problemas, salidas, terminales, etc. Realmente no vamos a usar tanto este bit. El terminal puede ser útil, pero sí, vamos a llevarlo paso a paso. Entonces, si bien todo parece tan intimidante para la persona normal que ha codificado, esto en realidad es bastante simple porque le quitas la mayor parte. Hablas con la IA aquí a la derecha, entonces eso es todo. Ahora, hay una configuración importante aquí, escribe y chatea. Siempre usaremos escritura, lo que simplemente significa que haremos que la IA lo cree todo. Ahora, los programadores experimentados pueden simplemente querer hablar con la IA para obtener consejos y así sucesivamente Ese no es el caso con nosotros. Queremos que la IA haga de todo. Eso es ser codificación. Entonces, para nosotros, no gracias. Vamos a apegarnos al modo de escritura. Bien, una cosa a tener en cuenta es que esta la IA solo funcionará en los archivos de esa carpeta específica. Así que cada sitio web, cada proyecto necesita su propia carpeta. Así es como mantienes las cosas claramente separadas. Abres esa carpeta y haces windsurf. Tienes tu conversación en el lado derecho, y va a crear o editar archivos de esa carpeta específica, nada más. Ahora, la configuración final importante aquí es esta parte donde eliges tu modelo. Eso va a cambiar drásticamente los resultados. Entonces hablemos de modelos en la próxima conferencia. Por ahora, por favor cámbiela a un nuevo equipo y crea una nueva carpeta en tu computadora y luego ábrela y windsurf solo para que puedas acostumbrarte a ese flujo Así es como creas nuevos proyectos, y eso es lo que haremos nosotros también. 7. Cómo desplazarse haciendo windsurf: Bienvenida de nuevo. ciertas herramientas que puedes instalar en tu computadora, por lo que el windsurf puede hacer un mejor trabajo, sobre todo si quieres hacer la menor cantidad de trabajo posible Ahora, no vamos a renunciar al control completo a ninguna IA. En cambio, vamos a instalar herramientas de software muy conocidas que van a ayudar a Winserf a funcionar mejor Ahora, ya instalamos Python, pero si no lo has hecho, por favor hazlo. Al final, voy a mostrarte un problema potencial y efectos. Ahora, para verificar y ver si tu instalación es buena, abre tu menú de inicio y escribe CMD CMD es la abreviatura de comando. Esto es lo que quieres. Símpter del sistema. Aquí, escriba este comando. Y si ves algo como esto, estás listo para ir. Ahora, lo más probable es que tengas una versión más nueva, pero eso está totalmente bien. Siempre y cuando no haya advertencias ni problemas, ya está listo para ir. Ahora, en caso de que no puedas manejarlo, puedes ir al windsurf al menú superior a la terminal Aquí empieza uno nuevo. Va a estar justo aquí en la parte inferior. Escriba la misma cosa y vea si funciona. Todo está bien de mi parte. Ahora, antes de continuar, tengo que decir, no voy a explicar cada pieza de software porque es contraproducente En cambio, voy a adjuntar un archivo con algunos detalles sobre cada programa. Ahora, lo que quiero hacer es centrarme en cosas prácticas. Para mí, el objetivo es sencillo. Crea sitios web lo más rápido posible. Aprender sobre Python en este momento no ayudará. Te va a hacer girar la cabeza. Entonces voy a mantener esto lo más corto posible. Sí, Python está marcado de mi lista. Idealmente, reiniciaría su computadora solo para estar seguro después de cada paso. Aquí voy a continuar, aunque eso pueda ocasionar algunos problemas. Pero sí, vamos. Lo siguiente en mi lista es éste. Ahora, no hay versión JS LTS. Este es otro must have. Y durante el proceso de instalación, te va a preguntar si quieres instalar algunos otros duales. Ahora, una cosa, por favor asegúrate de marcar esta opción. Esto va a mostrar otra ventana con muchos textos, y sí quiero decir mucho. Ahora, por mi parte, dice que no puede encontrar Python, aunque lo acabo de instalar. Reiniciar mi computadora podría haber resuelto potencialmente este problema. Sé que está instalado. Voy a continuar. Pero la cosa es que, después de un tiempo, esto simplemente se detiene. Pero aquí está la cosa. Abre una nota de símbolo del sistema y escribe en el nodo V. Por cierto, no es necesario memorizar ninguno de estos comandos Todos están apegados al curso. Y si, aquí veo mi versión, así que estoy listo para irme. Entonces dos programas que he marcado. Siguiente en mi lista, Power Shell siete. Estamos en la tienda oficial de Microsoft, y esto nos dice que son muchas formas de instalar Power Shell seven. Ahora, parece abrumador, pero en realidad es bastante simple. Usaremos este método, Win Get, ¿cuál es el método recomendado? Aquí, en realidad, sólo hay dos pasos. Parece complicado, pero en realidad es bastante simple. Esta es la primera. Entonces abres Símpter del sistema. Da clic aquí para copiar este texto, y luego simplemente lo pegas con Control V. Aquí vas a obtener una pregunta, escribe Y como en sí, y luego presiona Enter. Parece que hay dos versiones disponibles. Vista previa significa algo así como Beta. Entonces es una versión que es un poco experimental, generalmente menos estable. Eso no queremos. Entonces queremos el otro. Entonces ese es el paso dos, para instalarlo, copia este comando. Nuevamente, no la versión de vista previa, eso es un poco más abajo, y luego pégalo en el símbolo del sistema. Y después de los pocos segundos, esto se va a instalar. Ahora, pruébalo, abre nuevo tu menú estrella y escribe push. Pero en lugar de una U, usa una W, y deberías ver Powershell seven disponible Ahora lo estamos haciendo bastante bien. Sigamos con GitHub. Necesitamos una cuenta, pero como con todo lo demás, es totalmente gratuita. Pon tu dirección de correo electrónico, luego después de un rato, vas a tener que verificarlo, y eso es todo, ya estamos listos para ir. Github es muy necesario, aunque pueda ser súper intimidante Como estás a punto de ver, nos centraremos en lo esencial, y pronto, vas a estar cómodo con eso. Bien, cosas geniales. A continuación, vamos a instalar Docker Esto se considera opcional, pero tuve bastantes problemas porque no lo tenía instalado, así que preferiría que también lo instalaras. Este es uno de los programas más lentos para instalar, pero en realidad no hay mucho que tengas que hacer Simplemente es lento de instalar. Pero sí, después de que finalmente esté listo y van a ser unos minutos, sí hay que tener paciencia. Vas a tener que crear una cuenta. El caso es que inicialmente quería configurar una cuenta, pero aquí está lo de Qull Algunas de estas herramientas te permiten registrarte usando Giild Hub Entonces porque acabamos de hacer una cuenta en GID Hub, ¿por qué no usarla, verdad? Es mucho más rápido. Y aquí hay algunas otras cosas. Pero mientras trabajo en segundo plano, déjame explicarte qué está pasando. Entonces estamos a punto de cocinar muchos platillos en la cocina, ¿verdad? Va a ser el desayuno, el almuerzo y la cena. Van a ser postres. Van a ser refrigerios. Va a ser comidas completas, ¿verdad? Ahora, esto significa que necesitamos tener una nevera y utensilios completamente surtidos Necesitamos los ingredientes, y necesitamos cuchillos, tenedores, cucharas, los trabajos, ¿verdad? Esto es lo que estamos haciendo ahora mismo. ¿Vamos a utilizar absolutamente cada uno de ellos en cada plato? No, claro que no, pero es mucho más fácil preparar todo ahora mismo que tratar de encontrarlos mientras se cocina. ver si obtienes error después del error en windsurf porque te estás perdiendo esto o aquello, vas a perder el tiempo Vas a usar créditos, que básicamente es dinero. Pierdes energía e impulso. Entonces es por eso que te sugiero encarecidamente que instales todo ahora mismo. Te detienes, claro, llegas al ingenio. Pero luego después de esto se va a hacer, vas a estar volando. Entonces eso es lo que estamos haciendo ahora mismo. Bien, ahora vamos a instalar algo llamado Git para Windows. Esto va a tener bastantes configuraciones, pero en realidad solo vamos a usar los valores predeterminados en cada paso del camino. Ahora, siéntete libre de hacer una pausa, pero solo voy a aceptar todo porque el windsurf en realidad va a manejarlo todo Ahora bien, me doy cuenta de que esta lista no es tan cómoda, pero esto permitirá que la IA haga mucho más con menos indicaciones, con menos intervención de nosotros. Entonces va a ser un poco más independiente. Bien, avance rápido, y solo tenemos tres cuentas más que crear. Pero estos se hacen en un instante. Versll es el primero. Usaremos esto para alojar nuestros sitios web para que todos puedan verlos, ¿verdad? Ahora, de nuevo, es gratis, así que no te preocupes. Regístrate usando Github para simplificar el proceso. Bien, genial. A continuación, usaremos reenviar para enviar correos electrónicos Esto es totalmente gratuito para hasta 3,000 correos electrónicos al mes. Impresionante para empezar. Y por último, vamos a hacer una cuenta con Super base, lo cual es fantástico para nuestras bases de datos para proyectos más complejos, lo que podríamos hacer más adelante. Pero bueno, es solo un clic, así que vamos a sacarlo del camino. Y si, en general, lo creas o no, ya terminamos con estas herramientas. Ahora, hay algunos otros escenarios que vamos a manejar en la próxima conferencia. Por ahora, pausa, instala todo, y solo continúa después de haber pasado por esta lista de verificación. Te voy a ver en un momento cuando termines. Pausa el curso ahora mismo e instala todo. 8. Configura los MCP y las reglas en el windsurf: la forma fácil: Bienvenida de nuevo. Hemos instalado bastantes cosas como Python, NOJs, Power Shell Pero también hay algunas cosas que podemos configurar en WinSerf El primero son las reglas. Puedes llegar a esta sección enfocándote en esta esquina y WinSerf Y dentro de la personalización tenemos algunas pestañas, reglas, flujos de trabajo y recuerdos. Ahora, voy a mantenerlo lo más simple posible. Las reglas globales son lo que nos interesa. Así que haz click aquí y vas a obtener un documento vacío en esta parte central. Aquí, use el archivo adjunto para simplemente copiar y pegar estas reglas. Ahora, en definitiva, le estamos diciendo a Winsorf cómo debería actuar. Es como decirle a alguien cómo te gusta que se haga tu café, ¿verdad? Y dentro de las reglas, tenemos cosas básicas como queremos ser eficientes, queremos usar las mejores prácticas. Queremos que sea seguro y encubrió la información sensible y así sucesivamente. Puedes encontrar muchas plantillas para las reglas en la web, o simplemente puedes usar las mías. También lo obtuve de la web. Ahora con el uso de reglas globales porque queremos que windsurf las aplique a cada proyecto Las reglas del espacio de trabajo serían específicas para este proyecto único, y no queremos eso. Por ejemplo, si cambiamos a un proyecto de aplicación móvil en IOS, por ejemplo, podemos tener reglas diferentes. Entonces sí, en ese caso, eso tendría sentido. Pero sí, en general, lo que está escrito aquí es algo global. Así que simplemente copia pégalo, presiona Controles, y puedes usar este ícono para refrescar las cosas. Pasados los pocos segundos, deberías verlo aquí. Bien, ahora vamos a hacer click en plugins. Es este icono de aquí mismo. Estos son los MCP, y ordenar para ser súper cortos, esto es nosotros dando más control a la IA Si no queremos usar estos, tendríamos que hacer mucho más trabajo, escribir código nosotros mismos, escribir más comandos. Básicamente es más trabajo para nosotros, y en cambio, queremos que la IA haga la mayor parte, ¿verdad? Ahora bien, lo bueno es que esta es una lista oficial. Es seguro. Es bueno para ir. Ahora, de tu parte, es posible que tengas más disponibles porque son absolutamente fantásticos, y Winsurf está agregando cada vez más de ellos. Pero sí, comencemos. El primero recuerdo. Haga clic en él. Y aunque podrías usar este ícono de descarga, prefiero usar la parte central aquí y presionar Instalar. Y básicamente, eso es todo. No hay otros ajustes para este. Lo mismo para el pensamiento secuencial. Esto ayudará a la IA a descomponer la tarea en bits más pequeños, y va a hacer un seguimiento de ellos, y nos va a dar resultados mucho mejores. Bien, sigamos en ello. Vamos a habilitar Git aquí hay algo que puede pasar y va a ser bastante molesto. A pesar de que instalé Git para Windows correctamente en la sesión anterior, es decir que no está funcionando. Entonces vamos a volver a ello al final. Esto es una cosa que seguramente va a pasar de tu parte, también. En los tutoriales, parece tan sencillo. Haces todo bien. Pero aquí está la cosa, de tu parte, no funciona. Sigues cada paso del video, pero de tu parte, no funciona. Sé que es frustrante, pero no te preocupes. Haremos nuestro mejor esfuerzo para arreglarlo. A continuación, el sistema de archivos MCP. Esto permite que la IA haga carpetas, mueva archivos, haga copias, etc., porque quiere que te sientas seguro, es preguntar dónde exactamente querías tener permiso. Ahora, mi consejo es que lo pongas a todo el disco. En caso de que estés nervioso, potencialmente podrías darle una carpeta, tal vez dentro de una carpeta, pero eso podría crear algunos problemas en el futuro. Ahora, siempre colocaré todo mi Drive, no solo una sola carpeta porque me siento muy segura al respecto. A continuación, habilitemos Suba Base, que en realidad es bastante útil para proyectos serios Ahora bien, esto nos está pidiendo la ficha, y esto en realidad es bastante común. Nada demasiado complicado. Haz clic aquí y serás llevado a esa página exacta. Una cosa, nunca, nunca le enseñes las llaves a nadie. Es como mostrar tu número de tarjeta de crédito en la web. Todo tipo de cosas malas pueden pasar. Entonces es por eso que no podrás verlo después de que te hayas alejado de esta página. Lo vas a ver una vez. Entonces di eso en algún lugar seguro. Sólo voy a pegarlo dentro del windsurf. Bien, sigamos con esto, pero por favor, haz una pausa tantas veces como necesites en tu segunda visualización. Vamos por GitHub. Anteriormente, era Git, que es una cosa. Ahora bien, esto es Github, que es una cosa diferente. Esto nos está pidiendo la ficha. Puedes usar Google para buscar Github, token de acceso personal. O puedes hacer esto. Vaya a su navegador, vaya a github.com y luego a Ahora, desde aquí en el lado izquierdo, en la parte inferior, vas a encontrar la configuración del desarrollador. Y desde esta nueva ventana, verás exactamente lo que queremos token de acceso personal. Queremos el clásico. Creado, pero ten en cuenta que tendrás que configurar un nombre, una fecha de caducidad. 90 días es lo que te recomiendo, pero vas a tener que marcar absolutamente todo por tu cuenta. Sé que estás harto de arreglar las cosas, pero te lo prometo, esto nos va a hacer la vida mucho más fácil. No te saltes ningún paso. Es bastante importante. Pero sí, en general, con ahora listo para el rock and roll. Todo está configurado. Toda la lista está desactivada por mi parte. Una cosa, sin embargo, parece que Github no está funcionando. El tema tiene algo que ver con Docker, lo cual es un poco extraño En cualquier caso, aquí está la cosa. Cuando reinicias tu computadora, es posible que Docker no se inicie por sí solo. En este caso, voy a lanzarlo, y después voy a esperar el minuto hasta que se cargue. Y luego voy a refrescar usando el icono de la parte superior derecha. Una cosa, sin embargo, por favor tenga paciencia con Docker. No importa tu computadora, se carga bastante lentamente. Bien, empezó, así que vamos a refrescarnos. Y si, ahí tienes. Nosotros bien. Todo esto está bien. Se puede decir, ¿Qué pasa con algunos otros aquí en Windsor, algunos otros MCP Bueno, por el momento, si intentas habilitar más de ellos, vas a obtener un error. Estoy seguro que en un futuro cercano, vamos a poder sumar más y más. Pero en este momento, esto es todo. Una lista bastante corta, bastante torpe. Pero sí, ahora puedes hacer una pausa, configurar todo de tu parte, así que estás al día. Pero por si algo anda mal de tu parte, puedes saltarte al siguiente video. 9. Cómo solucionar problemas: Todo funciona, puedes saltarte al siguiente video. Pero por si algo anda mal, de tu parte, sigue viendo. Es mi caso. Por cualquier razón, el servidor Git MCP no funciona, y dice que se debe a Python Instalamos Python y me pareció bien, ¿verdad? Entonces copié el error y utilicé Google. Encontré algunas cosas en el desbordamiento de pila. Probé muchas soluciones, pero no funcionaron. Para ser claros, no soy desarrollador. No tengo idea de cuál es el problema. Cómo manejas estos temas cuando surjan, eso va a determinar tu nivel de éxito. Entonces repito. Sigues todas las instrucciones, ya sea del curso o de la web, pero las cosas no van a funcionar. Así es como va ahora mismo. Entonces, cómo manejas esta situación va a determinar tu éxito. Aquí, probé algunas cosas, y luego me cambié a chatear GPT Puedes usarlo totalmente gratis, o puedes registrarte. Te recomiendo que te inscribas, aunque sea otra suscripción, son otros 20 dólares mensuales o lo que sea, de tu parte. Pero lo uso con bastante frecuencia, así que honestamente puedo recomendarlo. No lo vas a necesitar para el propósito de este curso, por cierto. Es sólo algo bueno para tener. Bien, utilicé este modelo, que es muy bueno para pensar en razonar. Yo dije eso exactamente lo que está pasando. Oye, estoy usando la IA de windsurf, y me sale este error La divertida solución que me dio, bueno, fue bastante complicada. Para mi gusto, dije: No, gracias. Es un poco complicado. Entonces me salté al segundo Aquí, no tenía idea de lo que significaban estos, pero recién comencé a pegarlos en mi ventana CMD Entonces la primera línea no pareció ayudar. Entonces entonces pasé a probar el segundo, el otro. Y sí, después de los pocos segundos, instaló algo, y tuve la sensación de que funcionaba. Volví a Windsorf. Me refresqué Y sí, todo está bien. Pero aquí hay otro caso en una computadora diferente. El Git NCP no funciona, pero por otra razón, honestamente no sé lo que esto significa, y para ser totalmente transparente, no planeo aprenderlo En cambio, voy a usar el mismo método. Voy a preguntarle a Chat GPT OT sobre. Voy a usar 03 porque es el modelo de razonamiento más avanzado en este momento, y para mí, es gratis. Pago 20 dólares al mes, así que obtengo discusiones ilimitadas. Ahora bien, si no tienes acceso a CHA GPT por cualquier motivo, usa cascada, y es muy probable que obtengas la misma respuesta Ahora, aquí en CHA GPT, le dije que estaba pasando Y luego después de unos 90 segundos más o menos, me dio un plan paso a paso. Entonces antes que nada, tengo que instalar algo usando Power Shell. Y aquí está el comando exacto. Bien, así que eso es bastante simple. Voy a usar el menú de inicio, y después voy a escribir push pero con una W. Ahora, dentro de Power Shell, voy a copiar, pegar ese comando y tenía Enter. Bien, ahora, esto es instalar algo. Es hacer varias cosas. Y bien, sí, parece que es bueno para ir. Bien, bastante genial. Ahora para el siguiente paso, me dio un comando diferente, pero es insistir en que abra una nueva terminal. Bien, bastante bien. Voy a escribir push una vez más y pegar ese comando. Pero claro, eso plantea un tema. He copiado dos líneas distintas, lo cual no es correcto. Pero voy a pegar de todos modos, y parece que estamos bien. Ahora, el segundo paso es reiniciar el windsurf. No nos saltemos eso. Estoy feliz ya no tengo que reiniciar mi computadora, voy a tener que esperar un segundo hasta que se caliente. Voy a presionar el botón de refrescar desde la parte superior derecha, y la victoria. Estupendas cosas. Ahora, de tu parte, estoy seguro de que vas a tener diferentes temas, diferentes problemas. Pero recuerda una cosa. Una vez que los resuelvas, vas a estar bien para ir. Vas a estar volando. Esta es la esencia de la codificación vibra. No tienes que saber codificar. Hay que tener pacientes A, B, hacer las preguntas correctas, y C, lo más importante, probar cosas hasta que funcione. Ahora, aquí está la cosa. Podría haber hecho mi pregunta cascada y windsurf. Pero como ya tengo chat GPT, ¿por qué no usarlo, verdad? Preferiría obtener una respuesta gratuita versus desperdiciar créditos y windsurf Ahora, para concluirlo, así es como ocurren los dolores de cabeza. En tut o els, es simple ABC y éxito, ¿verdad? En tu caso, puedes pasar horas en el escalón B, y estás atascado y no puedes continuar. Siempre y cuando tengas mis consejos en mente, paciencia, hagas las preguntas correctas y pruebes cosas hasta que funcione, vas a estar bien. Recuerda, este es el precio a pagar por ser tan temprano. Ser temprano significa sin errores, con otros temas, pero es un pequeño precio a pagar por tu futuro. Y con eso, continuemos. 10. Claude vs. GPT: Regresa. Los LLM son modelos lingüísticos grandes, y son lo principal que usa el windsurf Entonces toda la inteligencia viene a través de estos LLM, que la mayoría de la gente llama modelos. Entonces ese es un modelo. Ahora, para ser claros, el windsurf es el programa principal, pero la mayor parte de su inteligencia proviene de estos modelos de diferentes empresas Entonces el windsurf es como una pipa. Los modelos son el agua. Ahora bien, ¿podría fluir el agua sin la tubería? Claro, claro, pero puede que esté por todas partes. Así que el windsurf se asegura de que estés obteniendo más de lo que quieres, y por eso estamos usando De lo contrario, podríamos simplemente inscribirnos una compañía específica y utilizar este modelo específico, ¿verdad? Pero eso sería mucho más limitante y sustancialmente más caro. Es por ello que el windsurf es una opción mucho mejor. Entonces a través de Winsurf, obtienes acceso a la mayoría de las empresas y a la mayoría de los modelos que existen. Es por eso que cuando haces clic aquí en el panel en cascada, puedes elegir entre bastantes. Y ahora la pregunta es, si esto es tan importante, cuál deberías elegir, verdad? Y la respuesta corta es, realmente depende. Voy a darle la misma tarea a los primeros para que podamos comparar los resultados para que podamos decidir juntos. Pero de nuevo, vas a ver que realmente depende. Ahora, tienes la tarea adjunta, por lo que debes hacer lo mismo. En tu segunda visualización, deberías probar esto en tu propia computadora solo para verificar que tienes la misma experiencia. Ahora bien, aquí está la cosa por que puede ser diferente de tu parte. Los modelos cambian a menudo. Entonces, lo que hoy es lento puede ser bastante rápido mañana. Así que tenlo en mente. Bien, comencemos con una pizarra clara. Cuando inicies windsurf, obtendrás el proyecto anterior Pero puedes ir al menú superior para archivar. Desde aquí, da clic en Ventana Nueva. Genial. Ahora podemos usar la función de carpeta abierta, y voy a cejar a una ubicación Justo desde esta ventana, voy a hacer una nueva carpeta y la voy a llamar por el nombre de la modelo. Esto es opcional. El nombre realmente no importa. Es para que nos organicemos. Nube 37. Bien, genial. Selecciona esa carpeta, y vamos a cargar nuestro nuevo proyecto en Windsor. Por cierto, si no puedes administrar, ve a tu disco en tu computadora y haz una carpeta de la manera básica. También agregaré algunas imágenes a esta carpeta. Ahora, la forma más rápida es hacer clic en este panel y seleccionar Reveal Explorer. Entonces simplemente voy a copiar y pegar la carpeta con algunas imágenes. Para asegurarme que el modelo sepa que están ahí, voy a hacer click derecho y voy a elegir Copiar como ruta. Tenemos que pegar esa dirección en el archivo de texto. Si no tienes copia una ruta, no es un problema. Simplemente haga clic aquí y copie la dirección. Es exactamente lo mismo. Haz una pausa tantas veces como necesites, pero vamos a hacer esto muchas veces más en esta conferencia, así que no te preocupes. Bien, las imágenes están, por supuesto, adjuntas. El modelo se establece en la nube. Ahora, voy a pegar la tarea y voy a poner en marcha el temporizador. Bien, bueno, esto está funcionando. Déjame decirte esto. Winserf es como un auto Qué llantas deberías ponerte bien, eso realmente depende de ti. ¿Hay alguna marca y modelo de llantas en particular que sea lo mejor que existe? No, claro, no. Hay marcas premium, hay medianas y, por supuesto, las baratas. Entonces no es una cosa clara. No hay nadie muy claro ganador. Es lo mismo en el futbol con teléfonos, con Coca-Cola y Pepsi, con casi todo Hay una batalla entre dos, tres, cinco empresas muy bien establecidas. Así que siempre es algo donde hay mucha competencia, y puedes elegir entre muchas opciones. Y es lo mismo aquí con estos modelos de IA. Y aquí hay una tabla que te muestra qué modelos están disponibles ahora mismo. Antropic es una sola compañía. La IA abierta, por supuesto, es otra. Google está en el juego, pero también está Twitter, que se llama X AI. Y ese es Deep Sk. Hay empresas chinas, y está destinado a que las pocas más aparezcan aquí. Ahora bien, esto puede hacer que tu cabeza gire tantas opciones, ¿verdad? Y más que eso, todos tienen costos y capacidades diferentes. Y lo que vemos aquí es que algunos modelos son muy inteligentes, pero son bastante lentos. Algunos son inteligentes, pero son súper caros. Es exactamente como comprar un auto o comprar un teléfono. Claro, todos hacen algo lo mismo, ¿verdad? Algunas personas juran por BMW. Otras personas no conducirían otra cosa que no sea un Mercedes. Algunas personas extravagantes podrían preferir Lexus. Es lo mismo con estos modelos. Cada uno de ellos tiene fans muy duros. Pero aquí está el pateador Siempre salen nuevas versiones y bastante rápidas. Entonces, ¿qué recomiendo? Yo digo, quédate con los de arriba. Pruébalos y ve las personalidades. Porque, sí, sí tienen personalidades. Ahora bien, lo que usé mucho es lo siguiente. Es Cloud 3.7, GPT 4.1 oh cuatro Mini alta y Gemini 2.5 pro Esto seguramente cambiará en las próximas semanas o en unos meses, pero esto es lo que tienes que recordar. Hay que probarlos, que es lo que estamos haciendo en esta conferencia. Oh, por cierto, vamos a echar un vistazo. Entonces esto es en una computadora nueva con una configuración muy básica, no lo que hicimos anteriormente al inicio del curso. Entonces no tenemos ninguna herramienta instalada. Por lo que Claude comenzó de inmediato. Se trata de proponer un enfoque muy sólido con un bonito stack de texto, react y next JS. No hay que saber lo que eso significa, pero es una señal muy saludable de que el modelo esté aplicando las mejores prácticas en la tecnología moderna. Ahora bien, aquí está lo primero en la terminal, tenemos que darle a Enter, lo contrario, no va a continuar. Esto puede no ser muy obvio para la mayoría de la gente. Este es uno de esos casos no debes enfocarte solo en el panel derecho. El lado inferior, el terminal también es bastante importante de vez en cuando. Ahora está instalando un montón de cosas. Pero estoy esperando aquí, y parece que se quedó atascado. Está congelado. No estoy seguro de lo que pasa. Entonces aquí está la cosa. Vamos a detenerlo. Y ahora para retomarlo, tenemos que decir continuar. Bien, cuando aparezca un botón de aceptar en el panel derecho, voy a presionar Aceptar bastante rápido. Ahora, vas a notar un montón de s, pesar de que la modelo hizo absolutamente de todo, y parece que dejó de funcionar una vez más. Entonces voy a usar un tercer prompt y decir continuar una vez más. Esta vez, aunque Claude bajó los estándares. Ya no está tratando de usar esa etiqueta de texto desde el principio. No, rebajó a algo mucho más sencillo. Todavía va a funcionar, pero no es una gran práctica. Va de un auto nuevo a un auto a partir de 1999. De alguna manera hace lo mismo, claro, pero va a faltar de características. Y tengo que decir que en la marca de cinco minutos, estoy bastante decepcionada. Se mueve mucho más lento de lo que esperaba. Voy a hacer zoom hacia adelante, y después de unos 7.5 minutos, ya está hecho. Podríamos usar este botón llamado Abrir y navegador externo, pero esta vez, voy a entrar en su carpeta y buscar el archivo index, la manera clásica. Y así es como se ve el sitio web. Nada loco, pero sí se ve bastante bien. Ese es un estado hover. El tipo de letra es bonito y fornido. Siguió nuestras instrucciones. Sí, en general, estoy bastante contento con ello. Y creo que la versión móvil, en realidad también es bastante sólida. Nada por lo que gritar sino sólido. Ahora, vamos a compararlo con algo. Cambiemos a GPT 4.1. Voy a agregar todos mis pasos de configuración en un archivo adjunto. Bien, por favor revísalo. Entonces me voy a adelantar. 4.1 también propone algo bastante fuerte reaccionar y veterinario, y luego tailwind CSS De nuevo, está totalmente bien si no sabes lo que eso significa, pero es sólido. Es una gran señal. 4.1 está revisando las imágenes y está creando archivos bastante rápido. Menos de un minuto y estoy bastante contenta. Pero aquí está la cosa. Esto es lo que está sucediendo. Se arrolla en espiral hacia abajo. Error tras error tras error. Y esto continúa por un tiempo. Y entonces me sorprendió bastante. Dejó de funcionar sin decir nada. Busqué un archivo índice, pero no había ninguno. Entonces esto es lo que quiero decir con personalidad. Normalmente, Claude siempre me dice ¿qué pasa? Cuál es la situación. Y muchas veces hace muchos pasos sin parar y pedirme cosas. Pero escucho que este modelo, 4.1 de Open AI, está mucho más nervioso. Se detiene a menudo y tiende a consumir muchos más créditos porque quiere que confirmemos si queremos continuar Por supuesto, queremos continuar. Más sobre costos más adelante. Pero sí, esto es más caro. Esto va a tomar más dinero. Pero sí, volviendo a ello, tuve que darle un segundo prompt para que podamos continuar. Acepte todo, y luego un prompt final, el tercero, continúe. Pero, sí, creo que ya está hecho. Bastante interesante. Bien, entonces solo ahora, aunque, me dio la dirección del sitio web, su host local. Debido a que utilizó un texto diferente, un enfoque diferente, en realidad no hizo un archivo de índice. Interesante. Bien, ahora vamos a mantenerlo sencillo. Vamos a abrirlo, pero, no se carga. Ahora, aquí está la luz amarilla en esta zona. Ahora bien, esto significa que algo está tratando de correr. Entonces abramos la terminal. Y aquí, parece que me está pidiendo que ejecute un comando, que lo escriba en mí mismo y lo ejecute yo mismo, lo cual es un poco frustrante mí me hubiera gustado que lo hiciera por su cuenta o al menos lo escribiera. Pero es lo que es. Bien, déjame escribir eso. Bien, ejecútalo, y luego algunos problemas, y me está diciendo lo que tengo que hacer para arreglarlo. Nuevamente, es un simple copiado pegado. No es nada mayor. Pero inicialmente no tenía idea de que tenía que hacer esto por mi cuenta. Entonces, bien, vamos a que continúe el cuarto prompt. Y ahora creo que el servidor está en funcionamiento, y podemos comprobarlo. Bien, sí, vamos a echar un vistazo. El diseño se ve bastante bien. Es bastante más oscuro, y aquí hay algo divertido. Quería un feed de Instagram, aunque sabía que sería muy difícil de implementar. Sí añadió uno, pero es uno aleatorio, no el que mencioné. Entonces, ¿eso es una victoria? No, no estoy segura. En general, es un diseño decente hecho con una buena etiqueta tex, y la versión móvil es lo suficientemente decente, también. Entonces eso es GPT 4.14 incita en resultados totales, decentes, pero ya vemos una diferencia bastante grande entre él y Claude Sigamos después del descanso rápido. No trabajes todavía. Déjame hacer las otras también. 11. GPT vs. Gemini vs. Grok: Bienvenido de nuevo. Sigamos comparando estos modelos. Entonces vamos con GPT 04. Ahora, mientras configuré esto, permítanme explicar rápidamente 4.1 contra 04. En resumen, cada modelo se construye alrededor del caso de uso. Es un auto deportivo versus un SUV de siete plazas. Sobresalen en diferentes cosas. Están pensadas para diferentes usos, ¿verdad? 04 está muy enfocado en la codificación. No soporta imágenes. Se centra en el razonamiento, lógica, lo que básicamente significa que es genial codificando, ¿verdad? Ahora, por otro lado, 4.1 es universal. Es un sedán típico que mayoría de la gente puede usar para casi todo. Ahora bien, ¿eso significa que sobresale en cada cosa? No, claro que no. Al estar bien con todo, no es genial en nada, ¿verdad? Ahora bien, esto obviamente no es una comparación integral entre estos dos, pero espero que entiendas por qué una compañía sacaría diferentes modelos, exactamente como marcas de autos. Ofrecen dos asientos de auto deportivo, un sedán, un SUV, una camioneta, y así sucesivamente, diferentes casos de uso con diferentes necesidades. Pero sí, volvamos a eso, 04 es realmente, realmente pensando. Ahora, donde los otros modelos empezaron de inmediato, este duda. Después de 2 minutos, no ha hecho nada productivo. Acabo de ver mis imágenes dentro de la carpeta, y eso es todo. Entonces eso es un poco decepcionante. Y esta lentitud continúa, y en realidad es bastante molesta Ten en cuenta, por el momento, el precio es un poco más bajo que el resto de ellos. En realidad es el 25% del costo frente a la Nube, por ejemplo. Pero aquí está la cosa. En realidad es bastante lento. Pero sorprendentemente, después de unos 4 minutos, en realidad está hecho el sitio web. El proyecto está hecho. Ahora, echemos un vistazo y, ya sabes, el sitio web no es tan bueno. Por cierto, el modelo no nos dijo qué usaba. ¿Qué marco utilizó? No decía que no logró usar lo que hicieron los anteriores, como el siguiente JS o VT, lo que sea. Pero, sí, en realidad no lo pensó. No nos dijo nada y no nos pidió nada. Ahora bien, porque con los codificadores de Knot, esto es en realidad una señal bastante mala porque no tenemos contexto Realmente no podemos pedir ayuda. Realmente no sabemos qué pasa con nuestro proyecto. La construyó, pero no tenemos contexto, ni idea. Y en cuanto al diseño. En la versión móvil, podemos ver cómo el texto toca los lados, las tarjetas también. No tienen respiro a los lados. Entonces sí, hizo el trabajo. Lo hizo en un solo prompt, lo que sea. Pero no creo que esto sea increíble. Pero sí, en general, esto es 04. Y aquí está la cosa. Cuando lo buscas en un gráfico, parece ser uno de los mejores. Pero creo que en este caso, es bastante bajo en la lista. Es lento. No nos dijo nada. Entonces, en general, no puedo decir que sea feliz. De hecho lo he probado por algunos días. En realidad, creo que fue como una semana, sin parar sólo 04. Y, hombre, demasiado lento. A pesar de que es inteligente, no compensa. Claro, estoy feliz de que no comete muchos errores, pero sí, en general, es demasiado lento. Bien, pasemos a X AI, ak Twitter. Tienen un modelo llamado Glock. Entonces voy a ir a la misma tarea exacta , a los mismos pasos. Bien, Glock tres dice que quiere usar react y type script, y explica por qué. Esto es bastante bueno. Comienza fuerte haciendo un montón de archivos, pero algo a pescado está pasando. Entonces, como puedes ver aquí, vienen los evos, y hay bastantes de ellos uno tras otro. De, así que eso no es genial. Entonces algo pasó aquí. Se superó el plazo. No tengo idea de lo que es. Pero no nos preguntaste nada, así que simplemente continúa. Entonces creo que se recordó a sí mismo el objetivo, que es bastante bueno. Y sí, es rehacer los archivos desde arriba, que tenían vs. Aunque, de nuevo, más vs aquí Entonces esta no es una gran señal, pero mientras esté funcionando, ya sabes, puedo encargarme de eso. Y aquí está la cosa mientras mi computadora no esté montada porque repito que no está configurado, es lo mismo para todos los modelos, ¿verdad? Entonces esta es una comparación justa porque todos los modelos recibieron exactamente la misma tarea en la misma computadora. Ahora, grog parece pensar que hay un problema con creación de archivos y está buscando opciones Por lo que decidió usar una estructura más simple con solo los archivos esenciales. Así que rebajando, no es ideal, pero vamos a ver. Entonces después de un solo prompt , nos dio nuestro resultado. Bien, vamos a echar un vistazo. Es un diseño básico. No está usando la etiqueta de texto que inicialmente dijo que usaría. Y en cuanto al diseño real, bueno, es el único que logró implementar los feeds correctos de Instagram, por lo que este es el único que realmente funciona. Pero dicho eso, los productos les faltan las fotos respectivas. Entonces, en general, por lo que estoy viendo aquí, el árbol Glock, es un poco faltante No puedo decir que sea mi favorito, pero no es peor que 04. A mí me gusta su personalidad, pero de nuevo, vas a tener que decidir por tu cuenta. Ahora, una prueba final. Cambiemos a Gemini de Google, que la mayoría de la gente apuesta. Los mismos pasos que antes, nada ha cambiado. Así que sigamos adelante y echemos un vistazo. Entonces de inmediato, dice que va a hacer un sitio web básico, sin etiqueta de texto. No genial. Sin embargo, nos habla de una gran manera. Explica que ve ocho imágenes, y es feliz de que pueda hacer una cuadrícula perfecta de cuatro por dos. Esta es una visión encantadora. Es bastante interesante. No es pedirnos nada. Sigue corriendo. Y está funcionando bastante rápido, el tiempo que lo demuestra. Después del minuto y medio en punto, en realidad está listo. Guau. Bien, bastante rápido. Y echemos un vistazo. Bien, sí, esto es sólido. Nada por lo que gritar, claro, pero la tarea era bastante vaga Entonces estoy contento con el resultado. Sin embargo, el feed de Instagram no es real. Esto es muy interesante. Entonces lo que hizo fue usar mis fotos para crear una falsa, lo cual es un enfoque muy interesante. Sin embargo, no estoy seguro de que confíe en eso. Yo hubiera preferido que dijera, oye, no puedo hacerlo con algo. Pero sí, acabo de hacer una. Bien. La tarjeta no es tan bonita como la de Claude, y las imágenes, son un poco modestas. Son bastante pequeños, y no encajan bien. Además, todo el sitio web es súper amplio. Bien. Google acaba de lanzar un nuevo modelo, un nuevo modelo Gemini, pero aún no está disponible. Pero sí, en general, esto es lo que el actual puede hacer bastante rápido. Entonces, en general, ¿cuál es el ganador? Bueno, está a debate. Tienes que probarlo tú mismo. Pero puedo decir claramente que 04 es demasiado lento. Y Grock olvidó una de las cosas más importantes las fotos del producto GPT 4.1, creo que es el único que realmente usó el servidor local, y usó el gran textag con react VT y tailwind CSS, Me gustaría decir que como no codificador, como persona que no es técnica, creo que esto es una gran ventaja porque no sé qué cosas quiero pedir, ¿verdad Cuando el modelo me está guiando, creo que es lo mejor porque de nuevo, no sé qué pedir. Entonces eso en realidad es bastante bueno. Ahora, además, en el lado destacado, sí se integró en el feed de Instagram, aunque era el equivocado de una compañía aleatoria. Pero sí, en general, esta es la prueba. No es definitivo. No es integral. Si estás dando mejores instrucciones a los modelos, si has configurado tu sistema de una mejor manera, posible que obtengas resultados totalmente diferentes. Además, cada vez que lo ejecutas, hay muchas posibilidades de que consigas algo más. Así que no tomes estos resultados como definitivos. No, me costó mucho con GPT 4.1 con mis aplicaciones para Android. Estaba olvidando lo que intenté hace dos, 3 minutos, y estaba corriendo en círculos. Luego me cambié a Cloud, y funcionó desde el principio inmediatamente. Entonces no hay respuestas definitivas. Estoy cambiando constantemente a veces durante un proyecto cuando me quedo atascado, pero la mayoría de las veces, empiezo con un objetivo claro. Oye, voy a construir este proyecto con Model X, con Claude, con Gemini, lo que sea. Y eso es porque cuando cambias de modelo durante un proyecto, al nuevo puede que no le guste lo que hizo el anterior. Sí, eso pasa. En realidad es bastante gracioso. Tenerlo criticas. Oh, hombre. Aquí hay un desastre. Tengo que arreglar todas estas cosas. Déjame manejarlo, hombre. El que trabajaba aquí hizo un trabajo terrible. Entonces, cuando ves a la IA decir cosas así, en realidad es bastante divertido. Pero sí, para terminarlo, espero que ahora tengas un poco de idea de cómo se comparan estos modelos. Y ahora tienes una perspectiva diferente, no sólo el gráfico que te mostré. Por cierto, hay muchos gráficos. Ese es sólo uno de ellos. Entonces mi consejo, pruébalo por tu cuenta. Usa mi mensaje. Lo tienes apegado, y mira qué es qué. Entonces dime tus resultados en el área de comentarios. Me encantaría saber de tu experiencia. Dame tu mejor modelo, eres el peor, y eres el promedio. Recuerda, diviértete con él. Los problemas están destinados a surgir. Mantente fresco, relájate y disfruta del proceso. Tendrás tus propios favoritos. Lo que importa es que logres tu objetivo, no importa lo que uses. Buena suerte. 12. Costos explicados de forma sencilla: Bienvenido de nuevo. Quiero abordar algo que es bastante importante, y eso es ansiedad por rango, ansiedad crediticia. Y aquí está la cosa. Tu plan mensual viene con una cierta cantidad de créditos, 500 créditos a partir de ahora mismo. Pagas una cierta suma, y llegas a usar esos créditos. Son 15 dólares por el momento, así que 15 dólares por 500 créditos. Ahora bien, así es como va esto. Haz clic aquí y echa un vistazo. Se puede ver, el costo varía. Algunos de ellos son muy caros y nadie los usa. De vez en cuando, también hay promociones. Por ejemplo, Open AI dio 4.1 y 04 gratis, totalmente gratis durante diez días más o menos. Por el momento, son más baratos que Cloud. Claude también tiene dos versiones por el momento. Entonces parece bastante complicado, ¿verdad? Y eso es porque a veces le das un aviso a un modelo, una tarea. Y entonces el modelo hace 20 cosas una tras otra, cierto, completamente por sí sola, y tú eres solo un pasajero, y es un crédito, ¿verdad? Descompone una tarea enorme en otras más pequeñas, y luego poco a poco, las marca. Funciona por su cuenta. Genial. Pero otros modelos son diferentes. Le das un prompt y hace un solo paso. Entonces un crédito, pero en realidad es solo un paso. A veces en realidad te dice lo que debes hacer, lo cual es muy frustrante. Es por ello que el costo es relativo. Se puede decir, Bien, digamos que 4.1 es súper barato, ¿verdad? Pero si tiene amnesia y necesita que le tomes de la mano en cada paso del camino, y hay que darle cuatro o cinco prompts, mientras que a Claude, solo hay que darle un solo prompt Bueno, entonces, ¿ realmente tiene sentido el costo? ¿De verdad puedes comparar los dos? No, en realidad no. Por otro lado, algunos modelos son increíblemente caros, incluso diez veces más caros. Ahora bien, ¿eso significa que son diez veces más buenos? No, ese no es el caso. De nuevo, creo que las cosas están cambiando a un ritmo rápido, y estos modelos van a ser mejores y menos costosos. Ahora bien, esto es lo que en realidad quiero que tomes nota. Quedarse sin créditos no es gran cosa. Tienes ese lindo número redondo 500. Pero la primera vez que lo usas, baja a 499 y luego 498. Y después de los pocos días en este curso, vas a tener 450 y luego 390. Y entonces empieza a entrar el pánico. ¿Y si reviento todo el plan, 500 créditos? ¿Qué pasa entonces? Yo tenía el mismo pensamiento, pero luego me di cuenta del juego. Incluso si pasas por los 500 créditos y no tienes un proyecto terminado, lo cual es casi imposible, por cierto, siempre puedes comprar más. Y el precio en estos momentos son diez dólares por 250 créditos. Eso es $0.04 por baile de graduación que tomarías. Entonces $0.04, ¿verdad? Nuevamente, a veces un solo crédito puede darte mucho progreso. Mientras que, otras veces puede que no. Realmente depende de lo claro que estés con tus instrucciones, lo detallado que sea. Pero aunque tengas resultados promedio, bien, pongámoslo de esta manera. Es $0.04, ¿verdad? Entonces diez indicaciones, diez tareas, te van a costar $0.40 100 significa cuatro dólares. Y mi conjetura es que al principio, gastarás menos de 50 al día, sobre todo si usas algunos de los modelos más baratos que están en modo promoción. Ahora, aquí es donde esto finalmente hace clic, y donde, para mí, tenía mucho sentido. Nuestro objetivo es construir sitios web y luego ganar dinero, ¿verdad? Construir proyectos que nos contraten como freelancers, conseguirnos trabajo estable, lanzar un negocio. Ese es el objetivo, ¿verdad? Bien, si quisieras contratar a un codificador, créeme, no pagarías dos, tres, cuatro dólares diarios No. Estoy hablando de un codificador promedio, ¿verdad? Pero aquí, tienes acceso a algunos de los mejores codificadores del mundo por centavos, literalmente centavos Ahora, una landing page promedio debería llevarte a cualquier lugar desde las indicaciones de 2030 hasta tal vez 100 como máximo En nuestro ejemplo, usamos menos de cinco, ¿verdad? Pero aunque uses 50, ¿verdad? Confía en mí, eso no es nada en el gran esquema de las cosas. Cuando vendes ese sitio web por lo que sea, llamémoslo 500 dólares en el extremo inferior, ¿verdad? ¿De verdad importa que gastaste dos dólares haciendo que no, claro que no Entonces esta ansiedad de rango que te vas a quedar sin créditos en realidad no es racional. La mayoría de los codificadores piden 25-100 dólares por hora en plataformas independientes Winsurf es más barato, más rápido , mejor y está bajo tu control No usarás cientos de créditos diarios, sobre todo en tus primeros meses. Ahora, ten en cuenta otra cosa. Al principio, no sabes lo que estás haciendo, ¿ verdad? Está bien. Puedes quemar algunos créditos. Los primeros 20 o 30. Eso está totalmente bien. Eso es normal. Así es como aprendes, ¿verdad? Pero a medida que vayas mejorando y mejorando en ello, usarás los créditos de manera más sabia Pero por ahora, derrochar. Úselos. No te preocupes por ellos. Esta es una inversión en tu futuro. Usted compra un curso, compra varias suscripciones, pero el costo general no es nada comparado con el alza. He construido negocios reales en el sector alimentario. He construido negocios en la industria tecnológica. He tenido equipos con decenas de personas. Los costos son inmensos. Renta, servicios públicos, salarios, equipo caro, las obras en el otro lado con windsurf con pagar centavos Eso no es mejor trato que la codificación de vibra en este momento. Con unos pocos dólares, se puede lograr tanto. Ahora, para terminarlo, no protejas tus créditos. No los aprecies. Es una inversión en tu educación. Úselos. Bien, continuemos. 13. Los peligros ocultos de la codificación Vibe y el acceso completo a la IA: Bienvenido de nuevo. Hablemos de algo que no es muy divertido, pero es una seguridad súper importante. Específicamente, ¿qué pasa cuando vibra el código? Sabes, cuando estamos en la zona, todos emocionados de probar nuestros nuevos agentes de IA, podríamos instalar un montón de cosas izquierda y a la derecha sin pensarlo dos veces, ¿verdad? Pero aquí está el problema. Cada vez ejecutas un script que encontraste en este cable, lo lees o en algunos otros lugares, cada vez que das acceso completo a un agente, a una modelo, a una empresa, estás entregando las llaves de tu computadora Y déjame explicarte lo que eso significa. Imagina que tu computadora es tu departamento, ¿verdad? Y por dentro, tienes cosas privadas. Tu inicio de sesión bancario, tus planes de negocios, tienes archivos creativos, dinero criptográfico, tarjetas de crédito, fotos privadas, tu pasaporte, DNI, las obras. Ahora, imagínate esto. Sales a almorzar y dejas la puerta de tu departamento abierta de par en par. Peor aún, le pegas la llave a la puerta principal para que cualquiera pueda usarla para que cualquiera la lleve, ¿verdad? Ahora bien, eso es exactamente lo que sucede cuando dejamos que alguien o alguna cosa controle nuestra computadora sin duda. Esto sucede mucho con la codificación de vibra porque a veces la IA no considera estos temas. A veces guarda de contraseñas, todas de todas las contraseñas de proyectos en un archivo de texto llamado contraseñas. No estoy exagerando. Bueno, estoy un poco, pero no por mucho. Los malos saben estas cosas. Estos modelos no tienen en mente la seguridad a menos que se lo digas. Y cuando dejas que un programa haga lo que quiera con tu computadora, Nuevamente, es como decir, Oye, siéntete libre de mirar a mi alrededor a mi casa, tomar lo que quieras. Ahora, aquí está la cosa. No queríamos instalar Python nosotros mismos. No queríamos arreglar la instalación cuando no funcionó, ¿verdad? No queríamos leer sobre cuatro habitaciones y enviar tickets de soporte y pedir a la gente que nos ayudara, ¿ verdad? No queríamos hacer eso. Preferiríamos mucho que la IA se limitara a arreglarla, que la hiciera sola. Pero así es como tiene que ser, aunque sea frustrante. Sé que todos queremos un robot personal que haga las cosas automáticamente de una manera perfecta, un clon GPT, algo así A lo mejor escribe para ti, a lo mejor instala programas. Suena tan genial, ¿verdad? Pero aquí está la cosa. Dar control total a la IA no es como contratar a un asistente personal. No, es como darle a un extraño, tu tarjeta de crédito, tienes llaves de casa, tu pasaporte y decir: Oye, haz lo que creas que es mejor. Aquí está la cosa. Aún no estamos ahí. Y si bien esta tecnología es impresionante, la tecnología es fantástica. La parte de seguridad sigue siendo muy frágil. Entonces, sí, estoy a favor de la IA. Me encanta usarlo para agilizar mi trabajo. Estoy bien dando algún control, pero no voy a darle control a ningún tipo de MCP, a ningún tipo de agente o lo que sea, ¿verdad Un poco más de trabajo para mis manos. Claro, eso está totalmente bien. Instalar herramientas manualmente, verificar permisos, leer algunas instrucciones, no es el fin del mundo. Seguro que lleva más tiempo, pero también te puede dar el control. Y cuando se trata de lanzar un proyecto serio, ya sea una aplicación, un sitio web o una startup, lo que sea, seguridad nunca debería ser una idea tardía Hablaremos más de eso más adelante. Pero por ahora, quería decirte que vamos a hacer un poco de trabajo nosotros mismos, pero quería contarte todas estas cosas porque creo que es bastante importante. Todo lo que hemos instalado es de primera categoría. Son cosas oficiales. Se trata de programas muy conocidos. Pero vas a encontrar en la web otras cosas que no son oficiales, por así decirlo. Vas a encontrar software hecho por quién sabe quién en una parte diferente del mundo que afirma que puede operar tu computadora automáticamente. Bien, ¿quién es esa persona? ¿Cuáles son esos desarrolladores? ¿Quién es esa compañía? No puedes darte las llaves un salario como. Entonces, nuevamente, todo lo que hemos instalado hasta ahora y todo lo que estamos a punto de hacer, nuevamente, se investiga. Es algo que es seguro y no deberías tener ningún problema en absoluto. Pero no caigas en esa trampa donde ves algo en TikTok y, oye, mira, opera mi computadora automáticamente No instales eso todavía. Usa algo que sea muy conocido. Utilice las mejores prácticas. Bien, continuemos. 14. 80%-20%: Bienvenida de nuevo. Déjeme ser claro. No ganarás $1,000,000,000 compañía por tu cuenta con la codificación vibe, pero puedes lanzar productos, sitios web, aplicaciones que generen un Uno de los principales problemas es conseguir que dure del diez al 20% que tal vez quieras. Y ese último bit puede llevarte una cantidad increíble de tiempo. Además mucha frustración. Entonces hagámoslo. Adjunto, tienes esta carpeta. Es uno de nuestros sitios web anteriores. Y ahí está esta tarjeta de producto que se ve decente, pero a lo mejor queremos que se vea un poco mejor, ¿verdad? Entonces ese es el objetivo. Haz que esto se vea mejor. Ahora bien, este es el tipo de cosas que pueden salir bien bien o muy mal en el windsurf Así que vamos a probar la Suerte. Por favor, vaya al menú principal para archivar y luego abra esta carpeta. Tienes un archivo adjunto que primero tienes que extraer. Bien, ahora, aquí está la cosa. Vamos a usar Cloud 3.7 por el momento, sin embargo, vas a tener una experiencia similar con mayoría de los modelos, incluso los más nuevos. Ahora, es posible que desee abrir este sitio web que pueda ver cómo se ve mi tarjeta existente, y quiero usarla como punto de referencia, ¿verdad? Algo como esto me haría feliz. Bien, ahora potencialmente podríamos escribir todos los cambios que queramos, y eso nos ahorraría algunos créditos. Pero lo voy a dar paso a paso. Esto normalmente te da mejores resultados. Entonces digamos esto para las reseñas en las tarjetas de producto, agregue la puntuación del producto con dos dígitos. Haz que la partitura sea negrita. Bien, nos vamos a las carreras. Hace falta bastante análisis, pero eso es típico cuando importas un proyecto. Va a revisar todo el código, y va a tratar de entender lo que pasa. Bien, avance rápido. Y bien, ya está hecho. Y esto es exactamente a lo que me refiero. Este es todo mi punto. Esto no se parece a lo que tengo en mi sitio web en vivo. Ahora bien, ¿se ve horrible? No, claro, no, pero no es lo que quiero. Y si eres perfeccionista, este tipo de cosas pueden volverte chiflado Si quieres que las cosas sean de una manera muy específica, esto puede llevarte muchos proms y bastante esfuerzo Bien, continuemos. Vamos a escribir esto. Agregue un texto de vista de detalles que estilo en naranja y negrita, sin fondo, y agregue un botón de agregar a la tarjeta que tenga un fondo naranja y texto blanco Estos dos botones deben estar uno al lado del otro por debajo de la clasificación. Bien. Ahora esa es una pregunta. ¿Podría describirlo de una mejor manera? Esa es otra discusión. Pero sí, tienes una idea en tu mente. En este caso, tenemos la ventaja de ver realmente la versión en vivo. Pero, sí, solo tienes que dar lo mejor de ti y describir lo que quieres. Y veamos cómo va esto. Bien, después de un rato, ya está hecho. Recuerda presionar siempre aceptar todas las ediciones. Ahora podemos refrescarlo. Sí. De nuevo, es bastante bueno. ¿Es exactamente lo que quiero? No, en realidad no. Esto es todo lo que tienes que darte cuenta. Claro, esa es una pregunta sobre la calidad de mis instrucciones de mi pronta. Podría describir lo que quiero con mucho más detalle, ¿verdad? mejor proporcionar una imagen como referencia, tal vez mostrarle un diseño que hice Figma. Claro. Eso podría funcionar potencialmente. Y no estoy en contra de más trabajo, pero eso no es lo que estoy tratando de decir. Estoy tratando de decir que deberías estar preparado para esta carga de trabajo. Ahí se obtiene del 80% al 90%, pero luego el resto es realmente complicado. Permítanme probar con un último aviso. Mueva el peso del producto, el lado derecho del precio, alinee el peso con el botón de agregar a la tarjeta, hacer que el botón de agregar a la tarjeta esté completamente redondeado, cambie el peso de los detalles de la vista de negrita a normal. Entonces como pueden ver, estoy apilando instrucciones, ¿verdad? Un solo crédito, pero estoy tratando de arreglar varias cosas. Puedes, por supuesto, hacer esto, veamos cómo va esto. Por cierto, si bien podrías crear al 100% una tienda con Winserf, creo que seguiría usando WooCommers basado en WordPress, pero tal vez ShopII para tal proyecto, simplemente porque Por supuesto, si es solo una tienda simple con solo uno o dos productos, algo bastante pequeño, puedes trabajar en WinSerf igual de bien, mi La única excepción sería una tienda muy sencilla que se basa en muy pocos productos. Pero si, volviendo, esto es, de nuevo, decente. No es exactamente lo que quiero. Podríamos gastar diez, 15, 20 créditos más, o podríamos probar varios enfoques para acercarnos a lo que quiero, pero preferiría terminarlo con esto. Sé feliz con ello. Esto no hará ni romperá tu proyecto. No seas perfeccionista. Lanzar el proyecto lo antes posible, ver cómo va, averiguar lo que la gente está diciendo al respecto, luego pulirlo. Nuevamente, después de eso, deberías pulirlo. Es muy fácil fijarse en estos detalles, pero te lo prometo, simplemente perderás a la larga Y estoy hablando por experiencia porque soy perfeccionista, también Es duro, pero tenemos que aceptarlo. Lánzalo, luego pule. Y con eso, continuemos. 15. ¿De Figma al windsurf?: Bienvenida de nuevo. El sueño de codificar un diseño hecho en Figma en tan solo unos segundos aún no está ahí. Al menos no el wind surf. Contamos con un Figma MCP a través del cual puedes dar acceso a tus diseños de windsurf. Suena genial. Necesitas configurar un token y tienes la configuración de Figma. No es demasiado complicado, pero sí hay que ser un poco paciente. Por favor, no trabajes, por cierto. Ahora, aquí está la cosa. Suena increíble. La IA ahora puede analizar todas nuestras decisiones de diseño e implementarlas de una manera perfecta de píxeles. Después de todo, eso es con lo que estamos luchando, ¿verdad? Eso duran diez o 20%, los detalles, pero no funciona. A la fecha de esta grabación, en realidad está haciendo un trabajo horrible, sin importar qué modelo uses. Lo intenté con Claude, con Gemini, con GPT, y los resultados van desde malos hasta no poder terminar la tarea, y realmente me refiero mal El flujo es sencillo. Diseñas una bonita página en Figma, ¿verdad? Se selecciona todo el marco. Después, copia esa página específica haciendo clic derecho y eligiendo copiar enlace a selección. Bien. Entonces puedes iniciar un nuevo proyecto y una nueva ventana, hacer una carpeta, como siempre, y luego decirle al modelo de tu elección para implementar este diseño usando CSS, HTML y JavaScript. Entonces cosas muy básicas para no complicar las cosas, ¿verdad? Después agregas el enlace. Debería ser tan sencillo como eso. Pero por la razón que sea, no funciona. De nuevo, es tan malo que realidad ni siquiera vale la pena mostrarlo. Es simplemente horrible. No funciona. Ahora, aquí está la cosa. Cuando las cosas cambien y el windsurf, te voy a avisar Pero por ahora, no creo que se trate de créditos bien gastados. Por otro lado, recomiendo encarecidamente mis cursos de diseño web. Y eso no es porque debas aprender a usar figma, sino porque los principios de diseño marcan la diferencia, cosas como el contraste Entonces la gente ve lo que realmente importa, jerarquía para guiar el ojo, grandes títulos, despejar los botones, amplio espacio. Más obviamente es mejor. No agrupen las cosas. Simetría, alineación, manténgalo ordenado, manténgalo limpio. Tipografía, no solo fuentes hermosas, sino tamaños, peso y espaciado apropiados Estos son los principios que enseño. Y a medida que te estás enterando, estas plataformas de codificación nos ayudan con todo el código complicado. Pero si quieres un diseño pulido, tienes que conocer estos principios que puedas guiar el modelo. Tienes que saber qué pedir. Cosas como aumentar el relleno en la tarjeta o hacer que este texto H sea dos, y luego este texto H tres, lo que sea, usa este código coloreado o cómo algunos botones necesitan ser llenados mientras que otros deben ser texto puro. Estas son las cosas que te enseño en mis cursos de diseño, y te prometo que esto no es publicidad. Es lo que necesitas. Lleva tus diseños al siguiente nivel para mejorar tus instrucciones, tus indicaciones, para que obtengas mejores resultados Es lo que necesitas para describir mejor tus ideas. Y con eso dicho, Figma y windsurf no funcionan, así que continuemos. 16. Descripción general: Bienvenida de nuevo. Hasta ahora, hemos aprendido que la codificación de vibra básicamente mató al diseño web en términos de la forma clásica de trabajar. Wireframes, diseños de alta fidelidad y figma, preparando el archivo para la codificación, y finalmente, un código entra y realmente implementa el proyecto en un sitio web en funcionamiento Ahora bien, todo este flujo tomaría de unos días a algunos meses, y ya no es así. Y de hecho me duele decirlo porque he estado activo en esa área por muchos y muchos años. Pero aquí está la cosa. Como diseñadora, tengo bastante experiencia en mover ideas de mi mente a una página en blanco. Normalmente sé lo que quiero. Sé lo que se ve bien, y lo que suelen querer los clientes. Voy a estar bien. No estoy 100% cómodo con esta ola de IA, pero porque estoy en ella, estoy aprendiendo, estoy creciendo. Creo que en realidad hay más oportunidades que antes. Creo que estoy montando esta ola, y aunque voy a perder muchos proyectos. Creo que voy a encontrar un gran éxito con la codificación de vibra. Ahora bien, lo que realmente me preocupa es cómo se van a adaptar mis amigos que están en la codificación. Ver, al menos en mi país, ya nadie está contratando desarrolladores. Los únicos trabajos que están disponibles son para puestos súper senior y otros puestos donde alguien normalmente obtendría, digamos, $3,000 mensuales, ahora se ofrecen solo $2,000 Es un gran cambio porque mayoría de las empresas no pueden adaptarse tan rápido. Ellos ven cómo las empresas multimillonarias se están enfocando en la IA, por ejemplo, la jerga dual, Pero la mayoría de las empresas en realidad no pueden hacer eso. Sin muchos fondos, sin muchos desarrolladores senior en el personal que pasan por alto de cerca la IA, las cosas van a salir mal, las cosas van a salir mal, y la mayoría de las empresas no pueden permitirse eso, no pueden permitirse el lujo de estropearle algo a la IA Su reputación lo es todo, ¿verdad? Entonces eso significa que la mayoría de las empresas están básicamente estancadas. Realmente no pueden contratar a la gente de la manera clásica a los desarrolladores porque eso parece que está desactualizado. Inversionistas, accionistas de todo tipo, bancos podrían mirarlos como si estuvieran comprando máquinas de fax. Ahora, obviamente, eso tendría sentido, pero por otro lado, tampoco pueden cambiar a IA realmente, porque, de nuevo, es demasiado sensible. Es temprano y los errores están destinados a suceder. Entonces esto significa que el mercado laboral para los desarrolladores está básicamente en pausa, al menos en mi parte del mundo. Y por eso me preocupa Otra vez, diseñadores, creo que pueden pivotar. Por lo general, son ingeniosos, ágiles. Espero que los desarrolladores sean capaces de hacer lo mismo. Pero sí, en general, así es como veo las cosas. Se pierden algunas oportunidades, pero las nuevas son mucho más interesantes. Entonces, en general, creo que vamos a estar bien. Y con eso, continuemos. 17. De la idea al windsurf, al sitio web en vivo Vercel: Bienvenida de nuevo. Déjame explicarte el proceso de crear un sitio web en vivo con tu propio nombre de dominio en muy poco tiempo. Entonces comenzaremos con un proyecto totalmente en blanco y windsurf. Crear una versión funcional de ese sitio web que se ejecute localmente en nuestra propia computadora, nada más. Cuando estemos contentos con ello, luego lo enviaremos a la Nube a Github, a Internet. Puedes pensar en GitHub como Drawbox o Google Drive. Es un lugar en Internet donde almacenas tus archivos. Eso significa que tienes acceso a ellos desde cualquier dispositivo, y si quieres, puedes compartirlo con todos. Es bastante fácil de hacer. Entonces, una vez que el sitio web esté en Github, luego lo enviaremos a Versll, que es una plataforma que nos va a ayudar a publicarla para que todos puedan verla En definitiva, Versll reemplaza a una empresa de hosting. Esa es la esencia de la misma. Aquí está la cosa. Después de importar el sitio web de Github a Versll, va a funcionar bastante bien, pero vas a tener un enlace feo, algo así, ¿verdad Pero aún en general, todavía está disponible para todos. Para que puedas compartirlo con amigos, familiares, puedes mostrárselo a tu cliente, que haga el trabajo. Pero si quieres llevarlo al siguiente paso, puedes comprar un nombre de dominio directamente en Versll, esperar unos minutos, quizá unas horas, y entonces tendrás tu propia dirección como cresbarn.com Eso ya estaba tomado, así que compré cresbarndt Entonces una vez que todo esto esté configurado y funcionando, por supuesto, podrás volver a Winserf y seguir haciendo mejoras Lo bueno de esto es que puedes decirle a Winserf que actualice Github, y lo va a hacer automáticamente Y luego Verslls va a trabajar automáticamente, también. Entonces, en realidad, es bastante fácil. Lo difícil fue montar todo al inicio del curso. Ahora es un método de pasar por los movimientos y depurar, arreglar pequeños problemas que surgirán Ahora bien, estos temas pueden llevarnos cinco, seis, diez indicaciones, tal vez diez, 15, 20 minutos, o puede que tengas mala suerte A lo mejor vas a necesitar 20 indicaciones, tal vez unas horas. Pero en cualquier caso, llegarás ahí. Esto es lo que vamos a hacer en esta parte del curso. Entonces, para recapitular, comenzaremos con un buen prompt, algo con una cantidad decente de detalles, y luego empezaremos a construir en Windsorf Entonces cuando terminemos, vamos a publicar en Github. Después a Versll. Entonces va a ser vivo y compartible con todos. Paso opcional al final, podemos comprar nuestro propio nombre de dominio. Pero otra vez, eso es opcional. Una cosa rápida. ¿Por qué nos inscribimos en Superbse o reenviamos? Bueno, reenviar va a ser útil en este proyecto porque vamos a tener un formulario de contacto, y reenviar es necesario para Cuando alguien usa el formulario de contacto en el sitio web, queremos que el cliente reciba ese mensaje, ¿verdad? Entonces para eso es para lo que está reenviar. SupaBSE es ideal para dar a los usuarios la opción de registrar una cuenta Manejará todas las cosas complicadas de la base de datos, y a través de la forma en que configuramos todo, lo va a hacer automáticamente. Supabse es para más adelante. Por ahora, terminaremos un sitio web sólido de principio a fin, y luego podremos platicar más sobre cosas complicadas como bases de datos, pagos, registro y otras cosas. Por ahora, pongámonos a trabajar. Publiquemos nuestro primer sitio web. 18. Vamos a entender el tema: Bienvenido de nuevo. Aquí está el prompt que ambos vamos a usar. Lo tienes adjunto. Y en términos de detalle, yo diría que es un seis de cada diez. Si tomas este prompt de sonido natural e intentas mejorarlo en el chat GBT, por ejemplo, obtendrás un prompt que es mucho más detallado que técnico Normalmente, esto ayuda, pero un prompt complicado sería un poco abrumador, así que decidí ceñirme a algo que suene natural. Caminamos, luego corremos paso a paso, ¿no? Ahora bien, uno de los temas es este en términos simples, digo azul, derecho, azul y blanco. Esa es la combinación de colores. Pero por lo general, debes proporcionar códigos de color. azul puede significar absolutamente cualquier cosa desde un azul bebé súper claro hasta un azul marino oscuro e intenso. Así que tenlo en mente. Cuantos más detalles le des, mejor será el resultado. Quiero recordarte que aunque hagas todo a la perfección, aunque copies y pegues mi prompt, tu sitio web va a verse diferente al mío. Y así es como funcionan estos modelos. Y otra cosa, es muy probable que tengas temas diferentes los que voy a tener. Y eso es totalmente normal. De nuevo, no tengo una bola de cristal, pero llevo mucho tiempo trabajando en Windsor, así que sé que esto es inevitable. Bien, así que configura una nueva carpeta y el nuevo proyecto en windsurf lo básico Por favor, asegúrate de tener toda la configuración realizada desde la primera parte del curso. GitHub, Python, no JS, las obras, Power Shell, Docker, etcétera. Hablando de Tech, escribí algunas cosas en el prompt, uso next JS y tailwind, reenvié para el formulario, reenvié para el formulario, y luego GitHub y Verll Entonces mencioné claramente estas cosas, y he aquí por qué. Entonces cuando empiezas, escribes un prompt básico, me haces un sitio web, ¿verdad? Y ya ves como ciertos modelos, los más inteligentes, al menos, te hablan. Ya vimos como algunos eligieron HTML básico, CSS y JavaScript, mientras que otros más inteligentes recomendaban exactamente lo que escribí aquí. Entonces aquí está la cosa. Si un modelo prefiere usar esta etiqueta de texto entonces tome nota de ella. Y luego la próxima vez, sugiérelo. Y eso es exactamente lo que hice. Hablé con unos programadores, los mayores, y les pregunté, ¿por qué viento de cola? ¿Por qué no esto? ¿Por qué no eso? ¿Por qué reaccionar? ¿Por qué no esto? ¿Por qué no eso? Y en definitiva, estos codificadores me dijeron lo siguiente. Cada uno tiene su propia preferencia. Entonces como BMW Pepsi y Android, otras personas como Mercedes, doctor Pepper, e IOS. ¿Quién tiene razón? Nadie, claro. Es lo que prefieres. Aquí es lo mismo. Entonces, si este modelo prefiere usar estas etiquetas de texto específicas, Bien, vamos por eso. Ahora, lo siguiente sobre el aviso, pedí un PRD, un documento de requisitos del producto Esto es para que el modelo pueda decirnos claramente lo que está por suceder. El PRD suena elegante, pero es como una especie de lista de verificación, si se quiere, para que sepa dónde se encuentra Entonces ese es el PRD. No duele, así que siempre tenlo ahí dentro. A continuación, quería agregar imágenes. Si bien podríamos usar un MCP para descargar algunos automáticamente. De hecho hice esto splash.com. Seleccioné algunas fotos que funcionarían para un dentista. Por cierto, ten en cuenta, es un filtro. Algunas fotos son gratuitas, algunas son de pago, así que asegúrate de usar el filtro. Bien. Y luego me cambio a la gente para obtener algunas fotos para todas las críticas. Entonces, después de configurar su proyecto en su unidad, debe copiar la dirección y pegarla aquí en el prompt. Entonces esto es algo que tienes que hacer. Hay que reemplazarlo. Este es el primero aquí, y aquí está el segundo, que lo que hice fue, puse una carpeta dentro de la principal. Solo para ser claros, descargas fotos de Osplash. Los pones dentro de la carpeta en cualquier lugar. Llamé al TMG, y lo puse en mi escritorio aquí A continuación, tenemos que mover esta carpeta desde el escritorio hasta donde se configura el proyecto en WinSerf En mi caso, el proyecto en Winserf se configura en D Entonces ahí es donde tenemos que pegar esta carpeta. Ahora, para obtener una dirección desde cualquier ubicación, use esta área. En mi caso, es D Dentista IMG. Entonces cópialo con Control C, luego cambia al archivo prom y pégalo. Aquí ya está configurado, pero voy a pegarlo debajo para que lo veas, así sí funciona. Así es como obtienes la dirección. Y recuerda, en Winserf abrimos dentista. Por eso ahí estamos agregando las fotos. Por eso no los estamos dejando en el escritorio. Y para las críticas, lo mismo. Entra dentro de la carpeta y da click aquí para ver la ruta. Cópielo y luego pegarlo en el archivo de texto. Bien, continuemos. Bien, el resto del aviso es solo información básica. Lo único importante que estoy pidiendo es un formulario para hacer citas, pero no tiene ninguna funcionalidad avanzada. Así que no incluí un desplegable para los servicios que el cliente podría querer. No incluí la hora que requeriría que tuviéramos el horario del médico cuando esté ocupado, cuando esté disponible. Entonces lo que hice fue elegir la versión más simple absoluta, un sencillo formulario de contacto. Además, agregué el número de teléfono para que puedan atender llamadas de esa manera. La idea es esta, podrías vender este sitio web. Siempre y cuando tengan a alguien contestando sus teléfonos y correo electrónico, un formulario de contacto básico funcionará. Te lo prometo. Ahora, el gabinete puede llamar al cliente y pedirle más información y concertar una cita. Entonces repito, a pesar de que esta es la forma básica, la más simple, la versión más simple, todavía se puede vender esta. Pero claro, también puedes agregar más características y funcionalidades. Puedes usar esto como base y luego probablemente adaptarlo, venderlo a los médicos, a restaurantes, a abogados, cualquier cosa que se te ocurra Nuevamente, esta landing page es versátil y puedes hacer que funcione. Vamos a llegar a ello. 19. Comienza el proyecto: Regresa. Para este proyecto, voy a usar este modelo porque me gusta bastante su personalidad. Si uno mucho más nuevo no está disponible, por favor use el mismo. No importa qué, vas a encontrar temas que tal vez no aparezcan de mi parte. Así que por favor sea paciente y pida ayuda. Bien, comencemos. Se va a las carreras. Es fascinante ver cómo piensa el modelo y cómo suele cometer errores. Al igual que, está tratando de crear una lista de verificación, pero no hizo primero la carpeta, lo cual es bastante tonto, pero esto es lo peor que va a ser. Ténganlo en mente. En unos meses, esto va a despegar, y este modelo va a parecerse a Windows 95 si eres tan viejo. Bien, tenemos al PRD, y esto en realidad es bastante detallado Puedo ver en los requisitos técnicos que entendió correctamente lo que quería usar. Entonces siguiente JS, viento de cola, y así sucesivamente. Nuevamente, no soy desarrollador, pero si a este modelo le gusta trabajar con esas tecnologías, claro, ¿por qué no? Bien, los revisé. Son modernos y tienen muchos beneficios sobre el simple sitio web básico CSS y HTML. Entonces sí, en general, todo bien. Bien, tenemos un primer comando para la terminal. Potencialmente podrías montar windsurf, así que todos estos correrían por su cuenta Pero me gusta revisarlos y aceptarlos individualmente uno a la vez. Es una buena manera de aprender. Una cosa. Si ves amarillo aquí, significa que debes esperar. Pero a partir de ahora, he visto innumerables casos en los que la terminal acaba de detenerse. Y, ya sabes, solo esperamos. En realidad no está pasando nada. Bien, el modelo está funcionando, pero no pasa nada en la terminal. No es instalar cosas, no es mover cosas. Está atascado. Entonces en estos casos en los que simplemente estoy atascado, lo que me gusta hacer es esto, escribo una sola letra en la terminal, y le doy a Enter. Por lo general, uso Z. Ahora bien, eso obviamente no es un comando correcto, pero sí parece despertar al modelo Si ahora compruebas el color, es verde, lo que significa que está hecho, y ahora puede continuar. Entonces esto es sin detener el modelo y reiniciar. Para ser honesto, no tengo idea si este es un enfoque válido. He intentado ver si puedo evitarlo, si puedo evitar que la terminal se congele, pero no pude encontrar nada. Entonces lo que hice fue que se me ocurrió algo por mi cuenta, escribir cualquier letra y presionar Enter. Pero aquí es donde hay que tener cuidado. En realidad tienes que golpear Enter en la terminal. El modelo escribió el comando, pero está esperando que peguemos a Enter. Esto no es súper obvio ya que otras veces no tenemos que hacer nada. Entonces eso es algo que hay que tener en cuenta. Si no pasa nada, pero el modelo sigue funcionando, puede que te esté esperando. Bien, así que revisa la terminal y ve si hay alguna instrucción o si se supone que solo debes presionar Enter. Ahora, después de un tiempo, vuelve a ocurrir lo mismo. Está atascado. Entonces salgo con mi Ziki, lo escribo, pegué a Enter, y así así, el modelo continúa Volviendo a ello, me gusta bastante este modelo porque es bastante independiente. Un prompt puede darte decenas de acciones seguidas. Sabe lo que quiero. Tiene el PRD, por lo que solo ejecuta cosas paso a paso Pero bastante gracioso, después de 20 pasos, hay que decírselo para continuar. Sería malo para los negocios si un solo crédito te consiguiera un sitio web completo, ¿verdad? Entonces, cuando golpees Continuar, vas a usar otro crédito. Ahora, para ser honestos, no deberíamos empantanarnos en el uso del crédito. Realmente no importa. Solo úsalos. No actúes como si fueran preciosos. Están destinados a ser utilizados. Ahora bien, la única vez que estaba realmente molesto fue con un modelo de IA abierta que constantemente decía que iba a hacer cosas, pero luego no lo hizo. O me seguía diciendo que hiciera eso por mi cuenta, pesar de que era más que capaz de hacerlo por su cuenta. Entonces eso es algo donde sientes que has escaneado, ¿sabes? Pero este modelo, solo mira cuántos pasos pasó este modelo sin parar. Imagínese si cambiamos a uno donde necesitara que tomáramos su mano en cada paso del camino, digamos continuar después de cada paso, eso sería desagradable. Pero sí, aquí hay un problema. Elogié este modelo, ya sabes, pero ahora está instalando super Base, creo. Y eso es raro porque no le dije que hiciera eso. Y aquí hay otra parada automática. Entonces después de 20 pasos más o menos, vas a tener que golpear Continuar por tu cuenta. También voy a aceptar todos los cambios hasta el momento. Eso es lo que te recomiendo que hagas también . Ahora, aquí está la cosa. Decidí esperar el descanso natural y luego preguntar por Superbse, que no está en los requisitos Ahora, podría detenerlo ahora mismo, pero existe la posibilidad de que pueda producir más errores, más problemas. Y creo que hice lo correcto porque el modelo parece que en realidad tiene mucho más trabajo por hacer. Está en un tren de pensamiento, y detenerlo para eliminar la súper base en realidad podría interferir con ella. Por supuesto, aunque reinicies tu computadora o cualquier otra cosa, tienes tu historial de conversaciones, y cualquier modelo puede revisar toda la base de código y puede seguir funcionando. Pero me pareció ideal. Dejaste que terminara su tren de pensamiento. Parece que tiene algo así como otros 15 pasos, así que voy a dejárselo a una cosa. Bien, ahora aquí está la parte interesante. De hecho hice un proyecto más grande para un dentista, y usé el mismo modelo y el mismo programa Wser creo que pude haber usado un nombre similar para la carpeta Ahora, el windsurf tiene esta capacidad de crear recuerdos. Entonces después de que funcione por un tiempo y logre ciertos resultados, va a hacer un recuerdo. Esto le ayuda a consumir menos recursos. Entonces, piénsalo así. Digamos que solo puede recordar 100 mensajes en nuestra conversación, ¿verdad? Esto es solo un ejemplo para que puedas entender cómo funciona. Entonces al agregar cinco mensajes más, los primeros cinco, los cinco iniciales se pierden. Es como una niebla de guerra si te gustan los juegos de estrategia. Pero, ¿y si esos cinco mensajes iniciales contienen algo importante? Bueno, ahí es donde entra en juego un recuerdo. Almacena esa información clave por separado, independientemente de esos 100 mensajes, y esto hace que todo sea más inteligente. En cierto modo, es como si le dijeras a tu médico que eres realmente alérgico a los mariscos, ¿verdad Ahora bien, el médico puede olvidarse de otras cosas que estás diciendo, pero cuando el médico revise sus notas, va a ver que eres alérgico y va a actuar en consecuencia. Ahora bien, esta es, por supuesto, una explicación sobresimplificada, pero espero que tenga sentido. Eso es lo que hacen los recuerdos. Ayudan al windsurf a recordar piezas clave de información. Ahora, aquí, cuando uso SuPaBse, tuve muchos problemas con él No estaba funcionando bien. El modelo me vio luchar con ello. Seguía intentando que funcionara, y no iba bien. Super Base no funcionaba bien. Y después de intentarlo por un tiempo, hizo que el recuerdo al respecto. Y ahora ese recuerdo entró en juego. En realidad es súper emocionante y fascinante, aunque no es ideal para nuestro proyecto. Hagamos una pausa, y después voy a continuar en un momento. 20. Cómo lidiar con los errores: Bienvenido de nuevo. Los bichos son inevitables. Se podría decir que si inteligencia artificial lo va a escribir, 100%, lo va a hacer correctamente, verdad? Pero ese no es el caso. No en este estado actual. Los errores son inevitables, pero la buena noticia es que son bastante fáciles de arreglar. Así que volviendo al proyecto, nuestro modelo hizo un trabajo bastante bueno. Creó todo el sitio web con muy pocos proms. Entonces, sin gastar un montón de dinero, puedes decir que está hecho cuando ves una visión general de lo que ha logrado hacer. Ahora bien, algunos modelos no ofrecen esta idea, pero ésta sí. También puedes ver estos dos botones importantes, abrir vista previa o abrir en un navegador externo. Ahora, me gusta usar un navegador externo porque así es como la mayoría de la gente va a ver el sitio web. Entonces prefiero ese look limpio sin distracciones. Bien, eso es un error, pero lo arreglaremos en un segundo. Así que volvamos a Windsor por ahora. Ahora en el resumen, se puede ver que el modelo nos dice que los siguientes pasos dos y tres son todos buenos. Github y versel. ¿Bien? Después pruebe el formulario para que funcione correctamente. Fresco. Pero el paso número uno no tiene ningún sentido. Superbse no debería estar aquí, aunque no seas técnico Se puede ver claramente que es un problema porque no se mencionó en ninguna parte. Pero digamos que no tienes idea, ¿verdad? De la misma manera no sabes reaccionar siguiente JS, viento de cola, lo que sea Si el modelo los elige, tal vez sepa mejor, ¿ verdad? Bueno, aquí está la cosa. Habla con él como lo harías con un desarrollador. Solo pregúntale exactamente esto. ¿Por qué usaste Super Base? Para el formulario, dije, deberíamos usar reenviar Y luego mira lo que dice, ¿verdad? Por cierto, así es como aprendí. Yo le pregunté sobre reaccionar, siguiente JS, VT, viento de cola, todas esas cosas Le pregunté al modelo al respecto. ¿Por qué lo usaste? Y el modelo dijo: Es una gran elección. Es la mejor práctica, así sucesivamente y así sucesivamente. Tiene muchas ventajas. Bien, entonces la modelo puede decir, Oye, hice la llamada correcta. Yo hice la elección correcta si eso tiene sentido, ¿verdad? Bueno, aquí, en realidad es bastante gracioso. Dice, tengo toda la razón. Y pido disculpas por la confusión. Implementó Super Base por sus recuerdos. Y aquí está la cosa. Va a arreglar el código por su cuenta. Fíjate, ni siquiera nos está pidiendo que lo validemos. Sabe lo que hizo mal. Sabe lo que tiene que hacer, y simplemente lo hace. Y ahora se están editando montones y montones de archivos. Ahora, estoy seguro de que no vas a tener este tipo de temas, pero realmente quería mostrarte este caso. Quería mostrarte que algunos temas son totalmente inesperados. Pero, sí. Bien, continuemos. Avance rápido, y ya está hecho. Entonces reemplazó muchas cosas. Actualizó la documentación, bastantes cosas. Ahora voy a aceptarlo, claro, pero aquí está la cosa. Apuesto que el error en mi navegador sigue ahí. Entonces echemos un vistazo. Siempre refrescar, por cierto. Pero, sí, todavía está aquí. Entonces esto es lo que debes hacer. Así que selecciona todo este texto y simplemente pegarlo en el windsurf Con o sin contexto, realmente no hace mucha diferencia en este caso Ahora, aquí está la cosa. De inmediato, el modelo entiende el problema y comienza a resolverlo. Mientras tanto, hablemos de reenviar. Ahora, para que sea breve, necesitamos conectar nuestro proyecto para reenviarlo Es como enchufarlo. Ahora, para que eso suceda para conectarlo, necesitamos la llave. Por lo que nuestro sitio web va a utilizar esa clave para obtener acceso a reenviar Eso significa que podrá hablar para reenviar, y eso permitirá que los correos electrónicos se envíen de ida y vuelta Ahora, para obtener la clave reciente, en realidad es tan fácil como hacer clic en un botón. Como dije antes, normalmente, sólo se llega a verlo una vez. Si la pierdes, vas a tener que hacer otra. Ahora, no se preocupe. No hay costo, pero no es una gran idea volver a reenviar y encontrar 15 llaves, y no sabes cuál es cuál, ¿verdad Cuál es para este proyecto específico. Bien, ahora, otra cosa, voy a difuminar mis llaves porque es similar al número de mi tarjeta de crédito. Sí, una vez que lo tengas, tienes que agregarlo aquí y tienes proyecto. De hecho, puedes decirle a Winserf que lo agregue por usted, o potencialmente podría encontrar ese archivo usted mismo y pegarlo Por lo general, la información sensible alli se almacena en un archivo llamado punto ENV Aquí es donde voy a pegar mi llave. Ahora, aquí hay otros dos campos. Estos son específicos para reenviar. De correo electrónico es nuestro sitio web. Se puede ver que en realidad el modelo creó un correo electrónico falso para ello, pero obviamente esto no es real. No va a funcionar. Y al correo electrónico es donde el formulario va a mandar el mensaje, básicamente el dentista, la recepcionista, lo que sea Entonces en esta segunda, voy a poner mi dirección de correo electrónico para que podamos probarla. Y en la primera, tendremos que usar una dirección especial llamada entregada en reenviar punto V. Cuando decidas usar Super Base o firebase o reciente o cualquier otra cosa, vas a tener que aprender un poco sobre esa plataforma Bien, volvamos a nuestro sitio web. Entonces ya está en vivo. Pero ¿es lo que queremos? Echemos un vistazo en un segundo. Tomemos un breve descanso. Y y 21. Lograr que el formulario funcione correctamente: Bienvenido de nuevo. Nuestro sitio web se ve bien a primera vista, ¿verdad? Entonces lo que vemos aquí es profesional, bastante limpio, muy adecuado para el odontólogo. Hay algunos problemas con el texto. Eso es un poco ligero y no se puede leer. Y las fotos no parecen cargarse correctamente. El sitio está en inglés, pero los precios y nombres están en mi idioma local. Supongo que lo hizo porque vio la dirección del gabinete. Un cambio de negocio, algo que arreglar, pero interesante no obstante. La barra pegajosa en la parte inferior es fría. El mapa funciona bien. Entonces, en general, esto me hace feliz. Este es un gran comienzo. Ahora bien, lo primero que quiero hacer es asegurarme de que las imágenes se carguen y asegurarme de que el formulario esté funcionando correctamente. Así que vamos a escribir eso. Ahora aquí está el trato. Puede proporcionar una lista de cambios en un solo prompt. Incluso podrías escribir diez, 20 cosas que quieres cambiar, y hay una buena posibilidad de que las ejecute correctamente, cada una de ellas, ¿verdad? Pero si quieres estar seguro, debes llevarlo paso a paso poco a poco. Por lo general, el modelo se concentra un poco mejor y se obtienen resultados más predecibles. Bien, mi aviso es bueno para ir. Veamos qué pasa. , asegúrate de trabajar a lo largo cierto, asegúrate de trabajar a lo largo de tu segunda visualización. Bien. Por cierto, una cosa, es posible que hayas visto algo donde puedas hablar con un micrófono, y luego el windsurf entiende Para que puedas hablar directamente con la IA. Pero en realidad no lo recomiendo. Para la codificación de vibra, es una buena idea escribir tus pensamientos, revisarlos, hacer cambios, agregar más detalles, cortar cosas y luego enviar tu mensaje. Hablar puede ser genial para los otros casos, pero no me gusta usarlo para la codificación de vibra. Bien, ahora para las fotos, creo que eso las va a arreglar bastante rápido. Pero después de un tiempo, creo que vamos a tener el mismo tema ahorcado. Sí, aquí tienes. El terminal se detuvo. Podemos verlo copiado todos los archivos. Bien, todo bien. Entonces, ¿qué estamos esperando? Así que de nuevo, escribe cualquier letra Z o lo que sea, cabeza Enter. Y ahora, sí, vuelve a encarrilarse. Parece que esto fue un poco más complicado de lo que pensaba. Hay una gran cantidad de archivos que hay que ajustar. Pero sí, en general, realmente no nos importa tanto, ¿verdad? Ni siquiera es media hora, y ya tenemos algo súper sólido. Entonces, continuemos. Avancemos rápido. Entonces el modelo está hecho, ¿verdad? Hizo muchos cambios. Añadió mi llave para reenviar y así sucesivamente. Lo desdibujé. Pero como está hecho, estoy realmente tentado a volver a mi navegador y actualizar mi página. Eso es instintivo, Pero aquí está la cosa, no va a funcionar. Este es un gran momento de enseñanza. Si no estás prestando atención, puedes discutir con Windserf Oye, no está funcionando. Es una página en blanco. ¿Qué pasa? Pero aquí está la cosa. En realidad, reinició el servidor local y cambió ligeramente el enlace Por eso deberías usar navegador Open External por si acaso eso sucede. Bien, probemos rápidamente el formulario y veamos si eso funciona. Las imágenes, estoy seguro que van a bien, eso no debería ser un problema. Voy a difuminar mis datos porque el navegador guardó mis datos reales. Bien, pero aquí está la cosa. En realidad no está funcionando. Hay un problema. Eso se puede ver en la parte inferior izquierda. Un tema. Entonces haz click en él, y veremos que aquí hay un mensaje. El mensaje no tiene mucho sentido, pero copiémoslo y peguémoslo en windsurf. Y aquí está la cosa. Aunque el mensaje no sea tan útil, el modelo puede revisar todo el código. Puede revisar un montón de archivos. Y sí, eso es exactamente lo que está pasando aquí, paso a paso, comprobando cualquier problema potencial. Y en realidad, me encanta este enfoque. Creo que es fantástico. Y sí, sí vio que hay un problema, y se trata del nombre de dominio. No está verificado, y reenviar no lo permite, lo que de nuevo, es increíble porque esta es una solución muy rápida En la parte central, se puede ver cómo se resalta en rojo la línea original con smile care.com, que no existe Esto significa que va a ser removido. El siguiente es con esa dirección de correo electrónico al abordar en reenviar punto DV Estupendas cosas. Sólo para que quede claro, no le presté atención, y dejé ese nombre de dominio que no existe, smileca.com Ese es un dominio falso que no existe, que el modelo puso por sí solo. Por supuesto, reenviar no lo permitirá porque no está verificado Es un dominio falso, ¿verdad? Pero tuvimos la suerte porque Winserf reemplazó el dominio falso por el correcto el de la documentación con el oficial Entonces por eso no estaba funcionando por esa dirección falsa, smilecare.com Para ser sinceros, aquí es donde cometí un pequeño error. Estaba discutiendo con Winserf que todavía no funciona, pero aquí está el trato Tengo muchas direcciones de correo electrónico. Olvidé cuál usé para esta cuenta de reenvío. Entonces, para fines de prueba, puedes enviar correos electrónicos a tu propia dirección que usaste para registrarte. Ahora, porque me metí, lo intenté un par de veces más, y me estaba dando el mismo error. Al final, hice este cambio. Al correo electrónico, el segundo campo, configuré el correo electrónico correcto. Usé el que usé cuando me inscribí para reenviar. Entonces ese era el tema. Entonces ese es uno de los peligros de los que estaba hablando. Te fastidias. Está totalmente en ti. Es tu problema, pero sigues hablando con Winserf. Sigues hablando con la modelo, ¿verdad? Y el modelo no tiene idea. Está tratando de revisar el código, está tratando de ver posibles correcciones, soluciones , va a probar Pero obviamente, va a fallar. No va a tener éxito. Es de tu parte. Es tu problema. Ahora, la gran noticia es que se puede ver el mensaje aquí mismo en la terminal. Oye, solo puedes enviar correos electrónicos de prueba a esta dirección, y en realidad te dice la dirección de correo electrónico. Entonces, mientras mantengas mente abierta y no dejes que la frustración se haga cargo, deberías estar bien. Estaba bastante escalofriante. Estaba mirando la terminal del lado derecho. Estaba explorando posibles soluciones. Pero la cosa es que si te enojas y empiezas a ver rojo, puedes quedarte atascado aquí por horas o incluso días. Pero me alegra decir, sólo cometerás este error una vez. Ahora puedes usar reenviar para todos tus proyectos sin preocuparte Y solo para confirmar que está funcionando, he abierto mi correo personal, y sí, el correo llegó a través también puedes ir a reenviar y también puedes confirmarlo Entonces, ¿por qué hicimos todo esto? Porque si esto fuera un cliente real, un dentista real, por supuesto, preferiría recibir todos sus mensajes por correo electrónico, ¿verdad? Así que felicidades. El formulario está funcionando. Reenviar está funcionando. Recuerda, agrega la clave del proyecto y mantenlo privado. Utilice su correo electrónico especial en el primer campo. Y para el segundo campo, usa tu dirección de correo electrónico, la que usaste para registrarte para reenviar Bien, cosas geniales. Sigamos después del descanso rápido. 22. Subir tu sitio web a GitHub: Bienvenida de nuevo. El sitio se ve bastante bien y está funcionando bien. Probamos el formulario, y está bien. Ahora, potencialmente podríamos mejorar el diseño, pero eso es bastante sencillo. Vuelves al windsurf y dices lo que quieres cambiar, y eso es todo Ahora vamos a hacer eso al final. Pero por ahora, quiero mostrarles cómo podemos llevarlo en vivo en tan solo unos pasos. Entonces el primero es GitHub. Recuerda, este sitio está funcionando, pero solo está disponible en nuestra computadora local. Para publicarlo, usaremos Versll, pero un paso intermediario es Más sobre eso en un segundo. Por ahora, digamos al modelo que estamos listos para seguir adelante. Voy a decir exactamente eso. Pasemos a los siguientes pasos. Por favor, súbela a Github. Voy a hacer una pausa. Aquí, quiero hacer la menor cantidad de trabajo posible, ¿verdad? Entonces prefiero decirle al modelo que use Github MCP. Esto es menos trabajo en nuestras manos y menos problemas potenciales. De lo contrario, puede indicarnos que vayamos allí, hagamos un nuevo proyecto, hagamos algunos ajustes, y demás Yo no quiero hacer eso. Bien. Entonces le voy a decir al modelo que voy a usar Versll para publicarlo, así me puede guiar en caso de que me quede atascado Ahora bien, compartir en exceso no es un problema. No, lejos de eso. Cuantos más detalles, mejor. Bien, y nos vamos a las carreras. Va a mirar mi cuenta, mi cuenta de Github, ver qué pasa y crear un nuevo proyecto todo por su cuenta. Esto se llama repositorio. Ese es el término correcto repositorio o repositorio. Bien, pero puedes recordarlo como un proyecto. Proyecto, repo es lo mismo. Ahora, desafortunadamente, como siempre, la modelo se atasca. Pero vamos a traerlo de vuelta con un comando aleatorio en la sección terminal. Bien, igual que con BO Track. Así que esto es lo que está pasando. Estamos subiendo todos nuestros archivos desde nuestra computadora, desde nuestra computadora local a la Nube a Github, con básicamente clonar el proyecto Ahora bien, puede que no estés familiarizado con Github. Yo tampoco. Yo no soy un codificador Pero aquí está lo genial. No tienes que saber nada de Github. Sólo vas a usar el modelo en Winserf. Ahora, por si tienes curiosidad, puedes ir a tus repositorios y buscar este proyecto, que debería ser el único en tu caso De hecho tengo mucho cargado porque sí uso bastante Github. Pero sí, una vez que lo veas, podrás ver todos los archivos más algunas instrucciones que el modelo escribió para ti con otras personas. Ahora bien, esto es fantástico. Ahora bien, ¿por qué ayuda Github? Bueno, aquí es donde GitHub se convierte en algo más que un simple intermediario Cuando tu proyecto está arriba en Github, has creado una copia de seguridad de control de versiones que es pública o privada dependiendo de lo que elijas. Entonces, paso a paso, ¿qué es el Control de versiones? Digamos que esta es la Virgen O. Con una forma que es lo más sencilla posible. Nada tan elegante, ¿verdad? Ahora bien, podemos crear una forma mucho más avanzada donde el visitante, no sé, puede elegir los servicios, puede elegir la hora y la fecha y así sucesivamente, ¿verdad? Algo un poco más avanzado. Y aquí está la cosa. Nosotros hacemos eso. Luego se lo llevamos al cliente. Lo haces vivir. Pero después de un tiempo, recibes esa temida llamada telefónica. Oye, Chris, ¿sabes qué? El nuevo formulario no está funcionando. En realidad estoy teniendo menos citas. La gente no lo está usando por cualquier razón. Entonces volvamos al viejo porque a la gente simplemente no le está gustando. Se puede preguntar, ¿está roto? ¿No está funcionando? No, no, está bien, pero la gente prefiere la vieja. ¿Puedes traer de vuelta la vieja? Ah. Bien, eso sería doloroso. Tendrías que volver al windsurf, quitarte todo ese código extra Eso puede producir bichos. La forma puede romperse. Todo el sitio web puede romperse pero eso en realidad no es un problema en absoluto. Aquí es donde entra en juego el control de versiones. Con GitHub, simplemente vuelves a la versión anterior o a cualquier versión, para ser honesto, porque puedes tener múltiples. También puede tener versiones separadas, basadas en una combinación de colores, basada en la funcionalidad, diseños. Puedes hacer lo que quieras. Tu nombre. Entonces Github te ayuda a organizar todo eso. Se puede volver a una versión que fue ayer, una semana antes, un mes antes, hace cinco años, realmente es así de fácil. Y es así como así. Ahora bien, ¿es increíblemente sencillo? No, pero ahí no es dificultad, porque aquí está la cosa. Tienes windsurf Tienes la IA de tu lado. Simplemente dile que haga lo que quiera hacer. Vuelve al viento rojo, vuelve a la Virgen con el formulario básico de contacto. Entonces así es como funciona. Eso es control de versiones. GitHub nos da control de versiones. Ahora, público o privado. Bien, público significa que otras personas pueden verte en el trabajo, pueden ver este proyecto. Y eso es súper útil si quieres conseguir un trabajo, o si quieres colaborar con otras personas, tal vez un equipo, algo así, ¿verdad? Pero si quieres venderlo, si quieres conseguir clientes por tu cuenta, si quieres tener una agencia o algo así, si quieres ser freelancer, más probable es que lo vas a mantener en privado. Entonces, sí, esa es la elección, pública o privada. Bien. Control de versiones, público o privado. Eso es GitHub. Tiene muchas más características, pero en fin, esa es la cuestión. Pero ahora volviendo a nuestra historia de IA, aquí está la primicia, aquí está lo más importante. GitHub es el puente perfecto entre tu código local en windsurf y desplegarlo en línea a Versll. Aquí está la situación. Plataformas como Verll están profundamente integradas con Github. Entonces, cuando tu sitio esté listo para publicarse, Versll simplemente mira a Github y ve, Oh, bien, aquí están todos tus archivos Aquí están todos sus ajustes. Veo los últimos cambios. Déjame ponerlo en vivo. Entonces eso significa que no tienes que subir ningún archivo. No es necesario cambiar ninguna configuración. No tienes que hacer nada. Simplemente conectas Verll a tu repositorio Github, y eso va a ser todo Por cierto, lo haremos en tan solo unos minutos. Los conectaremos. Pero, sí, así es como tu sitio web va a ser tomado en vivo. Esto es potente porque mantiene todo automatizado y limpio. Si haces cambios en tu proyecto más adelante en windsurf en tu computadora, solo tienes que pedirle al modelo que actualice el proyecto Github Y cuando haces eso, automáticamente, se envía una señal a Versll para actualizar la versión en vivo de tu sitio web Con ese código extra. Es fantástico. No hay pasos adicionales. Se escribe algo en el windsurf y en general, en tan solo unos segundos, tal vez un par de minutos, es en vivo, y no tienes que preocuparte por ello Todo está cableado. Entonces, en términos simples, windsurf es donde construyes el sitio web Github es donde lo almacenas en la web, y luego Verll es donde lo haces vivir para que el mundo lo vea Piense en ello como una empresa de hosting. H, por cierto, tienes instrucciones paso a paso en la cascada, para que puedas leer y tomarlo despacio. Bien, gran trabajo hasta ahora. Estoy muy feliz de que hayas llegado a este punto. Tomemos un breve descanso, y te voy a ver en un segundo. Recuerda, trabaja en tu segunda visualización. 23. Publica tu sitio web con Vercel y corrige errores: Bienvenido de nuevo. Vamos a recapitular Así que creamos un sitio web mediante el uso de tecnología moderna. Nos aseguramos de que funcione bien. Luego lo subimos a Github, y ahora ya estamos listos para publicarlo para poder compartirlo con el mundo. Ahora, los desarrolladores realmente no dicen publicar. Dicen desplegar. Así que vamos a implementar con Verll ya debería tener una cuenta si has estado siguiendo a lo largo Ahora, en Verll se te puede pedir que conectes a Github, pero eso es súper fácil Es solo un par de clics. Nada mayor, ni llave, nada de eso. Siempre y cuando te quedes conectado, te dorarás. Bien, aquí es donde comienza el fondo. Queremos importar el proyecto porque hemos conectado Verll a Github, vemos todos nuestros proyectos. Este es mi nombre aquí. Bueno, el nombre que puse en Github, así que lo reconozco. Y más que eso, puedo ver que hay un nuevo proyecto que acabo de subir. Entonces lo que voy a hacer es que voy a golpear a Import. Aquí solo tenemos algunas cosas que encargarnos. Entonces Versll da un nombre de proyecto por su cuenta, y eso está totalmente bien Reconoce el marco. Siguiente JS. Bien, cosas buenas. Realmente no nos importa. Lo único que necesitamos agregar son estas variables de entorno. Y eso suena complicado, pero en realidad es lo que nos dice el windsurf que hagamos Así que vuelve a ella y verás que tienes que agregar la clave API y dos campos desde email y hasta email. Entonces esto en realidad es bastante simple. Es cuestión de copiar y pegar, y la IA te dice exactamente lo que necesitas pegar Entonces la primera parte en el campo izquierdo, el nombre de la cosa, y en el lado derecho, el valor, AKA la clave. Entonces déjame hacer precisamente eso. De nuevo, voy a difuminar mi llave por motivos de seguridad. Oh, asegúrate de usar los valores recomendados. Entonces, en el campo from email, es la dirección predeterminada. Entregado en reenviar punto Dev aquí, hecho me confundió Windsurf y usé otra dirección, pero creo que eso también funciona Bien. Y en los dos correos, es el correo electrónico que usas para registrarte para reenviar Y ahora estamos listos para desplegar. Usa este gran botón para publicar nuestro sitio web. Pero aquí está la cosa. Por favor, tenga en cuenta que toma unos minutos. A veces dos, tres, cuatro, realmente depende. Ahora, si te desplazas hacia abajo, en realidad puedes ver un temporizador y el estado actual. Si tenemos suerte, tal vez obtengamos un mensaje de éxito en unos 40 a tal vez 50 segundos. Pero en la mayoría de los casos, para ser justos, va a fallar las comidas pocas veces alrededor. Ahora, veamos si tenemos suerte. Bien, no, en realidad falló. Podemos ver que hay algunos problemas con él. Pero aquí está la cosa. un icono de copia en la parte superior derecha, así que vamos a usarlo. Bastante gracioso, puedo ver que está relacionado con los testimonios. He tenido algo similar en el pasado. Aquí están las cosas divertidas. Entonces, cuando agregas testimonios, normalmente agregas una cotización para mostrar lo que la gente dice sobre el negocio, ¿ verdad? Una cotización, ¿verdad? Bueno, esas citas, ese personaje, bueno, si no está formateado correctamente, esos caracteres rompen el código. Así que en realidad es súper tonto, pero, sí, tuve que usar de cinco a diez indicaciones solo para revisar todo el proyecto y limpiarlo Si bien algunos de estos modelos son increíblemente inteligentes, a veces cometen errores tontos. Pero sí, volvamos a ello. Esto es lo que está sucediendo. Así que el windsurf es revisar los archivos y arreglar casi todo Después de que esté feliz, va a empujar a Github, lo que significa que va a actualizar GitHub con el último código con todas las correcciones. Por supuesto, la terminal puede detenerse, pero escribe cualquier cosa, presiona Enter, y debería reanudarse. Bien, bueno para ir. Pero sí, una vez que se cargue el código de nuestra computadora a Github, entonces Versll también va a recibir el nuevo código automáticamente Bien, el modelo dice que está hecho, y dice que deberíamos intentarlo de nuevo en Versll Bien, voy a dar click aquí en GoTo Project. Aquí, sé que es tu primera vez, pero en realidad es bastante simple. Si notas esta parte, es amarilla, lo que significa que está tratando de volver a construir el proyecto. Entonces es un proceso activo. Pero sí, después de unos segundos, vuelve a fallar, así que es de color rojo. Nuevamente, esto es típico. Así que hagamos clic y veamos el registro. Parece ser muy similar. Sí, probablemente sea el mismo problema, pero aquí está la cosa. No te molestes en leer demasiado el registro. Sólo tienes que copiar y pegarlo de nuevo en Winserf y ya veremos qué es qué. Tómate tu tiempo con él. Y a estas alturas, deberías estar acostumbrado a este flujo donde Winserf está arreglando cosas, la terminal se atasca, la reanuda, y luego todo se vuelve a subir a Github Bien, ahora, volvamos a Versll y aquí es donde debes enfocarte Esta es mi cuenta, y este es el proyecto actual, y este es el despliegue actual, que ha fallado. Entonces volvemos al proyecto dando click aquí en el nombre del proyecto. Recuerda hacer una pausa tantas veces como necesites hasta la segunda vez que veas el video. Bien. Ahora, una vez que haces clic, puedes ver la nueva versión que ahora está intentando construir. Debido a que actualizamos GitHub, Versel vio eso, y lo está publicando automáticamente. Ahora, claro, puedes parar eso, pero sí, esto suele ser lo que quieres hacer. Ahora, veamos si tenemos suerte. Podemos esperar aquí o podemos dar click en él. Veamos qué hay dentro. Entonces el estado aquí es en amarillo, así que tenemos que esperar un poco más. Pero sí, después de aproximadamente un minuto más o menos, Bien , algunos temas más. Nuevamente, clásico. Ahora, bastante gracioso, se trata de súper Base. Bien, pensé que lo habíamos eliminado, pero parece que algunos archivos todavía tienen algo al respecto. Ahora bien, esto es un poco frustrante, ¿verdad? La IA hizo muchas cosas malas en nuestro proyecto. Ahora, por su parte, estoy seguro que no va a tener este tema específico. A lo mejor tuviste suerte y a lo mejor funcionó la primera vez alrededor. Pero por otro lado, creo que esto es útil. Se llega a ver la depuración en acción. Ahora bien, no quería quitar estos temas de la grabación del curso porque creo que es esencial que entiendas que esto es normal. Esto está totalmente bien. Se espera. A medida que te sientes más cómodo con este flujo, estarás listo para cualquier cosa. Pero tienes que estar relajado. No tienes que estar nervioso. No tienes que ver rojo. No tienes que enojarte. No tienes que preocuparte por los créditos y cómo estás consumiendo dinero. Eso no va a ayudar. Pero sí, avance rápido y otro fracaso, pero no voy a desesperarme Voy a seguir trabajando en ello, y voy a seguir actualizando. Voy a seguir arreglándolo. A pesar de que me está costando algunos créditos y bastantes minutos, estoy bien con ello. Intenta trabajar con un freelancer de otra parte del mundo por, digamos, 50 dólares la hora y rápidamente verás cómo esto es infinitamente mejor No es increíble. No es un paseo por el parque, pero la alternativa es mucho peor. Pero sí, después de tantas molestias, finalmente tenemos luz verde. El sitio web está listo. Es en vivo. Ahora puedes pinchar sobre él aquí y verlo en acción. Y aquí está en todo su esplendor. Ahora puedes compartirlo con tus amigos y familiares. Pero aquí está la cosa. Antes de que haga algo, veamos si llega el correo electrónico. Entonces Wserf lo sugirió, recuerda, usamos un correo diferente que no usamos entregado Utilizamos el onboarding. Entonces echemos un vistazo rápidamente y veamos si esto funciona. Y sí, victoria. El formulario sigue funcionando. El sitio web está en vivo. El formulario funciona. Enhorabuena. Bien, continuemos después del descanso rápido. 24. Publica el sitio web con tu propio nombre de dominio: Bienvenido de nuevo. Logramos subir nuestro sitio web a GithHub y luego implementarlo con Si vuelves a Versll, puedes ver una dirección temporal aquí No es hermoso a la vista, claro, pero es en vivo. Funciona. Puedes compartirlo con la gente. Ya puedes parar, volver a Winserf y hacer algunos otros cambios para mejorar el sitio web, agregar más páginas, más funciones, mejorar el diseño, traducirlo a tu propio idioma, las obras, Pero por si acaso tienes curiosidad, quiero mostrarte cómo puedes pasar de una dirección temporal, un enlace feo a algo como cresbarn.com Entonces tu propio nombre de dominio. Vuelve a Versll a tu proyecto, y tendrás algo llamado dominio Haga clic en él. Esto es exactamente lo que estamos buscando. Aquí, puedo ver el que Versll hizo para mí por su cuenta. Ahora bien, de nuevo, esto no está mal, pero quiero algo que sea mío. Así que hagamos clic en Por dominio. Y después de unos segundos, vas a poder buscar algo, tu propio nombre de dominio. Ahora, los mejores, por supuesto, ya están tomados, pero puedes usar tu propio nombre. Entonces voy a escribir Chris Barn, pero sé que.com ya está tomado porque antes lo compré Ahora bien, lo que me encanta de Versll es que te está mostrando muchas opciones potenciales from.ai a algo un poco más clásico como.net Estos son todos los que están disponibles, y se puede tomar una decisión informada porque los precios son claros como el día. Obviamente, Chris Barry and.ai a 149 dólares es un poco demasiado caro. Entonces voy a ir por otra cosa. Vamos con FYI, lo que en realidad significa para tu información, FYI Eso no tiene mucho sentido, pero bueno, son 6 dólares, seis dólares Así que vamos a hacer clic en él y comprar. Como puedes ver, son seis dólares y algo de cambio. Bien, eso es por año. Bien, cosas geniales. Voy a hacer clic aquí para comprarlo, y ahora tengo que confirmarlo haciendo clic de nuevo. Bien, no te preocupes. Ahora voy a tener que agregar mi tarjeta de crédito y mi información de facturación. Esto va a llevar un tiempo. Pero sí, no te preocupes. Es sencillo. También tengo que volver a verificar con mi banco, claro, confirmar la transacción, las obras. Nada demasiado importante. Es como cualquier otra compra en línea. Ahora, aquí está la cosa. En realidad me dio este mensaje, lo cual no es bueno. Pero aquí está la cosa. Vi que se llevaron el dinero, pero sí, Versll me dio este error Ahora, en estos casos, tienes que mantener la calma. Se trata de negocios serios y no debes preocuparte. Entonces volvamos a los dominios. Entonces sí, aquí está el mío. Chris Barron para tu información. Todo bien. Me gustaría recordarles que Versll reemplaza a su empresa de hosting Así que no hay necesidad de comprar un plan de hosting, un VPS, un servidor compartido, o cualquier otra cosa. Bien, ahora volvamos a ello. Volvamos a nuestro proyecto haciendo clic aquí en la parte superior izquierda. Solo tengo un proyecto odontólogo, así que vamos a darle click. Bien, estamos listos para irnos. Ahora, vamos a hacer clic en Dominios y estamos de vuelta donde empezamos. Pero esta vez, no vamos a comprar uno. Vamos a añadir uno. Así que haz clic aquí y elige el que acabas de comprar. Para mí, ese es Chris Barron para tu información. Aquí hay una configuración que es recomendable. Déjalo comprobado. Bien, ahora no voy a entrar en eso en lo que eso significa porque eso nos va a descarrilar. Déjalo comprobado. Bien, presiona Agregar dominio y tendrás que elegir qué versión del proyecto quieres publicar. Por supuesto, vamos a mantenerlo sencillo el actual que está en producción. Golpea a salvo y ahora de tener algunas instrucciones para nosotros. Nada importante, pero tendremos que hacer algo por nuestra cuenta. Hasta el momento, ha sido fácil navegar, pero ahora nos toca agregar este registro de nombre C. Nuevamente, no tienes que saber qué es eso. Déjeme guiarlo paso a paso. Entonces, lo que hay que hacer es tomar nota de estos tres bits, estos tres elementos. Puedes copiarlos en un bloc de notas o lo que sea. Ahora, la primera línea ya está establecida, así que no se preocupe por eso. Sólo tenemos que hacer el segundo. Ahora, por si tienes curiosidad y quieres verificar el estado sin hacer nada, obviamente, no va a funcionar. Configuración no válida, por supuesto. Claramente, no está funcionando porque no lo instalamos. Entonces esto es lo que debes hacer. Volver a la página de dominios. Mira la navegación aquí. Deberías encontrarla sin demasiados problemas. Luego usa los puntos en el lado derecho de tu nombre de dominio. Aquí, queremos configurarlo. Queremos configurarlo. Desplázate un poco hacia abajo, y bajo DNS DNS, tenemos estos campos para hacer lo que podemos agregar esos detalles de antes. Para ser honesto, Verl podría haber hecho esto por su cuenta, pero, oye, está bien Así que pon en WWW en el primer campo. Después, para el menú desplegable, seleccione C nombre. Y luego finalmente para el valor, agrega ese texto, pero asegúrate de agregar el punto al final. El punto en realidad es necesario. Bien, no cambies nada más. En cambio, haz clic en agregar y créelo o no, eso es todo. Vas a recibir un mensaje de éxito en la parte inferior derecha, y podrás ver que la entrada ya está guardada. Ahora, aquí está la cosa. Puede que estés emocionado de ir a visitar tu propio nombre de dominio, ¿verdad? Pero no está listo. Está en el horno. Esto lleva un tiempo. Normalmente, de 4 horas a 24 horas. Esa es la guía oficial. Así que no te decepciones si no está funcionando de inmediato. Para mí, tardó entre diez y 15 minutos. Pero recuerda, tienes que ser paciente. No vayas a cambiar cosas. No te quejes a Windsor por versel que no está funcionando. Tómate tu tiempo con él. Mantén la calma. Pero sí, aquí tienes. Déjame avanzar rápido. Chris Barron ya está en vivo. El sitio web se ve bien. Somos de oro. Enhorabuena. Ahora tienes tu propio sitio web de principio a fin sin saber codificar. Ah, uno. Puedes refrescarte como loco, bien, en los primeros segundos o pocos minutos. Tarda unos minutos para que el SSL se instale. Por lo que su anti virus puede mostrarle algunas advertencias nuevamente al principio, o puede que obtenga un sitio web roto si constantemente golpea un cinco si actualiza. Pero después del par de minutos o tal vez un par de horas, va a funcionar perfectamente sin ninguna advertencia ni lo que sea. Esto es totalmente normal. Cualquier programador clásico o cualquier compañía de hosting clásico funcionaría exactamente de la misma manera Entonces no hay desventajas. Bien, tomemos un momento y celebremos 25. Hacer cambios en nuestro sitio web en vivo: Regresa. No importa si compraste tu propio nombre de dominio o si estás usando el que Verll creó para ti, aún puedes seguir mejorando el sitio web Para mí, hay un área con texto de súper rayos de luz que es difícil de leer, así que tengo que arreglarlo. Entonces déjame mostrarte lo fácil que es una vez que todo está configurado. Nuevamente, esto va a funcionar con un dominio personalizado o con uno básico que Versll dio Entonces antes que nada, voy a hacer una captura de pantalla desde Firefox. Puedes usar cualquier tipo de complemento de navegador. De veras depende de ti. Sé que algunas personas usan Safari, Chrome, Brave Edge, y mucho más, así que no me meteré en plugins que hagan una captura de pantalla. Solo haz una captura de pantalla y eso es todo. Entonces arrástrelo al windsurf a este campo. Se va a quedar así. Pero solo para que no sea decepcionante, hagamos un gran cambio, algo que va a ser realmente Entonces, vamos a pedirle al modelo que cambie el esquema de color de azul a rojo. Esto debería marcar una gran diferencia. Eso va a ser bastante obvio. Bien, vamos a darle a Enter, y nos vamos a las carreras. Entonces el modelo analiza todo el sitio web y prepara todo. En realidad no es tan sencillo como pensé que sería. Entonces el modelo está cambiando bastantes archivos. Ahora bien, para ser honestos, ¿realmente nos importa? No, en realidad no. Está haciendo todo por sí solo con un solo prompt. Aunque, para ser justos, después de un tiempo, tendremos que gastar otro crédito porque a este ritmo, en realidad va a bastantes archivos. Y sí, aquí está. Como recordatorio, después de unos 20 pasos más o menos, Wind Surf te pregunta si quieres continuar. Eso te costará otro crédito. Y sí, continuará, y, sí, está haciendo mucho. Pero, sí, espero que puedas sentir cómo podrías potencialmente romper tu sitio web cambiando tantos archivos. Cuando estás trabajando con tantos archivos y cambiando cosas, eso puede ser un poco peligroso. Y aquí está la cosa. En cierto punto, el modelo sí lleva bastante tiempo. Se puede ver aquí. Así que en realidad me preocupaba que estuviera atascado en este momento. Pero sí, antes, la terminal era el problema, y acabamos de escribir cualquier letra, y estuvo bien Pero en este caso, parece que el modelo está pensando por un tiempo. Pero no, tenemos suerte, tenemos suerte. Todo está bien. Supongo que el archivo era bastante grande con algo, y por eso tomó algún tiempo. De nuevo, hay que estar relajado. No te pongas nervioso por ello. No te pongas nervioso. De nuevo, estoy honestamente sorprendido, sin embargo, cuántos archivos está cambiando por el simple código de color. Esto probablemente esté relacionado con la estructura del texto que utilizamos. Aquí es donde algo de experiencia en codificación sería útil. Es por ello que los desarrolladores han pagado seis cifras al año o solían ser, de todos modos. Saben optimizar las cosas. Pueden construir las cosas más rápido con menos recursos. Pero entonces, lo que es más importante, pueden construir proyectos que sean fáciles de administrar. Así que he tenido proyectos en los que podría editar un código de un solo color en una línea, y todo el sitio web se actualizaría. Aquí, parece que estamos tratando con más de 15 expedientes, tal vez incluso más. Ahora, de nuevo, ¿realmente nos importa? ¿Nos impacta? No, en realidad no. ¿ El cliente atendería? No, claro, no, en realidad no. Son unos minutos extra para nosotros. Tal vez algunas indicaciones extra, pero no es un trabajo real real, ya sabes, en realidad no estamos trabajando Sólo estamos esperando. Bien, parece que tenemos que continuar una vez más. Pero creo que estamos bastante cerca del final, creo. Sí, palabra de avance rápido. Y si, vamos a empujar todo a GitHub. Por supuesto, lo hace automáticamente, así que eso es súper genial. Ese es el poder de configurar las cosas correctamente. No puedo enfatizar eso lo suficiente. Estoy seguro de que no estabas tan emocionada de instalar todas esas herramientas para configurar todos esos MCP y lo que sea Pero, sí, está dando sus frutos. Y parece que ya está hecho. Podrías mirar el sitio web y refrescarte, pero obviamente el cambio no va a ser instantáneo porque está en vivo en un servidor. Es en vivo en Internet. Entonces volvamos a Versll y veamos el estado de la factura. Ahora, en general, después de que logres desplegarlo correctamente, hay muy buenas posibilidades de que no falle. Es muy probable que siempre se ejecute siempre y cuando no hagas ningún cambio importante serio. Ahora, se tarda aproximadamente el mismo tiempo en construir de 30 a 50 segundos. Pero sí, en general, creo que va a recibir luz verde. Y sí, aquí está. Echemos un vistazo al sitio web. Y sí, es de color rojo. Para ser justos, no es solo rojo. Son tonos de rojo. Así que potencialmente pude ver por qué tardó tanto tiempo. Pero, sí, un aviso, algunos siguen siendo justos, y hemos hecho un cambio significativo nuestro diseño. Y todo está en vivo. Para ser justos, el gran texto, parece que sigue ahí. No estoy seguro de por qué la modelo se olvidó de ello. Pero sí, tomemos otra captura de pantalla. Pero en esta ocasión voy a ser más directo. Voy a decir lo siguiente. Haz este texto 22, dos, y ese es un código de color muy oscuro que conozco de memoria. Esto garantiza un resultado sólido. Por supuesto. Aunque sea un pequeño cambio, aquí está la cosa. Todavía tenemos que empujar a Github. Versil tiene que hacer otra implementación. Entonces, idealmente, harías muchos más cambios y luego empujarías a GitHub. Pero sí, por el momento, para propósitos de prueba, eso está totalmente bien. Así que no se preocupe. En general, estamos volando. Ya terminamos. El texto ahora es gris oscuro. Es fácil de leer, y tenemos un sitio web sólido de principio a fin. Y claro, puedes seguir actualizándolo de esta manera. Cuando estés contento con eso, empújalo a Github y eso es todo. No tienes que empujar después de cada cambio, realmente depende de ti. Sí, tomemos un descanso rápido. Enhorabuena de nuevo. Esta es una victoria sólida. 26. Nadar en el océano: Bienvenido de nuevo. Quiero señalar algo. Cuando estaba aprendiendo a vibra el código, intenté usar proyectos que mi forma de desarrolladores crearon. Estos tipos eran desarrolladores hábiles con mucho conocimiento, pero cometieron un gran error. No dejaron ninguna nota en absoluto. Ahora, en GitHub en mi propio GitHub, puedo acceder a 30, 40 proyectos que hicieron, pero aquí está la cosa. No sé nada de ellos. Entonces lo que hice fue cuando empecé, intenté actualizarlos y hacerlos correr. Se hicieron en 2018, 2019, así que obviamente bastante viejos. Y aquí está la cosa. En definitiva, fallé. Pasé mucho tiempo, muchos créditos, y fue muy molesto. Y luego traté de hacer mi primer toque. Entonces cambié mi enfoque y dije: Bien, hagamos mi primer toque por mi cuenta. Pero voy a usar un código existente, ¿verdad? Entonces voy a usar algo de Github. Recuerda, algunos proyectos son públicos. Eso significa que puedes copiarlos y puedes construir encima de ellos, ¿verdad? Y pensé que eso me ahorraría bastante tiempo y molestias y, por supuesto, desperdiciaría créditos. Pero aquí está la cosa. Fallé una vez más. Y no es el fracaso ese es el problema, es como me sentí, y eso es lo que quiero compartir. Aquí está la cosa. Estaba trabajando con modelos de IA abierta, modelos que eran gratuitos en ese momento, cuatro y 4.1. Y constantemente estaba destrozando bichos, arreglando piezas, después de partes, después de partes Ahora bien, el tema era, no tenía idea de si estaba en BG cinco de 50 o cinco de 50 mil. No tenía punto de referencia. Era como nadar en el océano con mucha niebla a mi alrededor. No pude ver la orilla. No pude ver la playa. No sabía si estaba nadando en la dirección correcta. A lo mejor estaba a unos remos de la playa. A lo mejor estaba a kilómetros de distancia. Y fue súper agotador, usando prompt tras prompt, probando varias cosas Y ese es el tema. No sabía si me acercaba más, si estaba más cerca del objetivo final de hacer correr el proyecto. No tenía idea. Y aquí está la cosa. Si te quedas atascado y no estás seguro al respecto, siempre puedes iniciar una nueva conversación. Simplemente puede hacer clic aquí. Un modelo fresco va a ser mucho más útil. Por ejemplo, si tuviera que agregar la sección de galería al sitio web del dentista, iniciaría una nueva conversación dando clic aquí. Este es el método recomendado. Divides el proyecto en partes. Ahora tenemos una fundación. Lo publicamos. Fresco. Entonces tal vez queramos agregar lo que sea, una galería, luego el seguimiento de Google Analytics, luego tal vez una forma más complicada. Bien, bueno, esas cosas pueden ser tres conversaciones distintas. Ten en cuenta que estás usando la misma cantidad de créditos. No hay inconvenientes, pero una conversación fresca significa un modelo fresco No se cansa de las indicaciones anteriores. Pero para volver a mi punto, si sientes que estás nadando en un océano y no tienes idea de dónde estás, necesitas tomarte un descanso y reevaluar Necesitas cambiar de modelo o iniciar una nueva conversación. Yo, hasta ahora, tiendo a pensar que empezar de cero es mucho mejor. Ten el modelo, crea todo desde cero por tu cuenta. Pero claro, puedes hacer referencia a un proyecto. Nuevamente, por inspiración, úsalo como inspiración, y el modelo tomará nota de eso. Pero no importes un código, y ojalá se vaya a ejecutar. Ojalá puedas construir encima de eso. Por lo general, eso no va a funcionar, sobre todo al inicio de tu carrera. Entonces mi consejo comienza con pequeños proyectos divertidos, luego construye tu camino hacia arriba. No te canses nadando en lo desconocido por el camino demasiado. Sí, ten paciencia. Pero si sientes que no estás progresando bien, debes hacer una pausa y buscar la otra manera. 27. ¿Qué sigue? : Bienvenido de nuevo. Enhorabuena. Llegaste hasta el final, y eso es un gran problema. No solo construías algunos sitios web. De hecho construías las habilidades detrás de ellos. Aprendiste a guiar a la IA con indicaciones claras, a diseñar con propósito, a hacer que las cosas se vean mejor y se sientan mejor Y eso es sin sumergirse en código complejo, sin ningún tipo de codificación. Lo más importante es que practicas un poco cada vez, algunas indicaciones aquí y allá, algunos retoques aquí y Y así es como te pones bueno. No viendo sino practicando. Entonces, ¿y ahora qué? Bueno, tienes que seguir adelante. Tienes que elegir una idea completamente nueva. Puedes crear una marca, un proyecto personal. Empiezas una nueva carpeta, y simplemente trabajas. Prueba el prompt, lo pegas, lo pullas, lo publicas, lo haces tuyo. Básicamente, estás listo para construir cosas de verdad para ti mismo, luego para los clientes, tal vez solo por diversión de. Pero hagas lo que hagas, recuerda esto, tienes que tener fe. Hay que tener paciencia. Y sí, realmente no necesitas un desarrollador para construir cosas hermosas. Solo necesitas saber platicar con estas herramientas. Gracias por pasar este tiempo conmigo. Ve a crear algo de lo que estés orgulloso. A medida que las cosas cambien, voy a seguir actualizando el curso. Voy a agregar nuevos proyectos, voy a agregar nuevas características, más ejercicios. Pero, sí, por ahora, tienes que seguir practicando. Tienes esto. Se trata Chris Barron firmando la sesión. Muchas gracias.