Esto cambiará Internet… Creo APPs sin Código en SEGUNDOS por IA ILIMITADA 🛜 Tutorial con Websim

WebSync is an AI tool that generates full web apps, games, and tools without coding. The presenter builds a Pokémon-style multiplayer game, a Word clone, a Windows XP simulator, and a car-themed social network, each in seconds. Every app gets a public URL and downloadable HTML code to keep developing.
Chapters
La inteligencia artificial está avanzando a tal ritmo que surgen nuevas de forma diaria. Tanto es así que te aseguro que tras este vídeo crearás la tuya propia, y te aseguro otra cosa: lo harás en menos de 15 segundos. La inteligencia artificial que estaremos viendo hoy es de las más divertidas y útiles que he utilizado nunca, ya que permite crear cualquier cosa, ya sea una app o una web funcional, a golpe de un clic. La gran novedad es que también la podemos publicar de una forma muy sencilla, haciendo posible que podamos crear cosas como apps funcionales, juegos interactivos sencillos, otros más complejos en 3D, tu propia instrumentos musicales o incluso crear tu propia inteligencia artificial, entre otros ejemplos. Todo esto lo podrás hacer sin tener conocimiento de programación, pero lo mejor de todo es que se hace desde una sola plataforma y, al menos a día de hoy, es totalmente gratuita e ilimitada. ¿Suena bien? Pues vamos a conocerla. La nueva inteligencia artificial que estaremos viendo es algo similar a un navegador de internet, solo que en lugar de buscar páginas existentes, lo que hace es crear a tiempo real lo que le pones. Y esto es posible gracias a la plataforma de WebSync, que es esta plataforma de aquí. Antes de continuar, te recuerdo que todos los enlaces e información lo vas a tener abajo en la descripción. Y cuando cliques sobre WebSync, aterrizarás a esta página de aquí, desde donde nos encontraremos diferentes opciones. Pero lo primero que tenemos que hacer para poder utilizarla sería clicar en el apartado de login y utilizar cualquiera de estas dos opciones, tanto Google como Discord, aunque yo utilizaré Google con el email de todos los tutoriales. Y ya con esto la vamos a poder utilizar al 100%, ya que ni siquiera tenemos la opción de poder pagar si quisiéramos hacerlo. De aquí lo que estarás viendo es que tenemos una visual muy similar a la de un navegador, pero realmente esto es simulado, ya que como estás viendo yo tengo por aquí arriba mi navegador y aquí abajo una especie de navegador paralelo que va a poder hacer todo lo que vamos a estar viendo en el vídeo. Antes de nada, lo que nos aparece son aplicaciones y páginas web que otros usuarios ya han hecho. Desde aquí nosotros lo que vamos a poder hacer va a ser filtrar por lo más usado en el día de hoy, lo que fue más usado en la última semana y durante el último mes. Así que antes de nada veamos algunos de los mejores ejemplos. Aquí nos podemos encontrar un juego multijugador en 2D. Así que si le doy un clic, pues automáticamente se nos habría cargado en cuestión de un segundo. Así que voy a poner un nombre a modo de ejemplo como Alejavi, y cuando le doy al play, pues automáticamente ya aparecería por aquí en este mundo que es muy similar al juego de Pokémon. Y desde aquí pues puedo ver que hay otros jugadores en esta parte, e incluso tenemos algún chat. Y realmente pues tendríamos un juego totalmente funcional con opciones como los diferentes objetivos que podríamos conseguir, el inventario de objetos que entiendo que se podrá encontrar en este juego, entre otros ejemplos. Y de hecho, si clico sobre algún objeto pues podemos ver que podemos también interactuar perfectamente. Pero como esto no es un tutorial de jugar, vamos a ver la parte más funcional. Así que volviéndome sobre el apartado de la home, voy a mostrar otro ejemplo rápido, como más allá de juegos sencillos en 2D vamos a poder hacer incluso unos en 3D, como este de aquí, que cuando yo le doy un clic pues automáticamente parece que entramos en un edificio. Y aquí ya podemos ir moviendo en esta habitación que parece que es un juego de miedo, y realmente con unos gráficos que están genial. Pero más allá de juegos, y volviendo para atrás, también vamos a poder encontrarnos plataformas funcionales como generar imágenes por inteligencia artificial, como es el caso de AI Image Generation versión 2, que si yo le doy un clic pues vamos a tener un generador de imágenes que alguna persona habrá hecho de forma rápida. Y para ponerlo a prueba yo voy a poner aquí, por ejemplo, coche. De aquí estoy viendo que podemos seleccionar tanto el estilo, puntos de vista, opciones de luz y otros ajustes como el ratio de aspecto, aunque yo lo voy a estar dejando tal y como está y le voy a dar a generar. Perfecto. Y ya por aquí pues tenemos 10 imágenes de coches, ya que aquí tenemos especificado el número 10, que estamos pudiendo hacer de una forma totalmente gratuita e ilimitada a través de una de inteligencia artificial que cualquier persona haya creado, como las plataformas que nosotros crearemos a lo largo de este tutorial. Incluso esto es totalmente funcional, ya que si a mí me gustase un coche como podría ser este de aquí, yo voy a poder clicar en este botón de descargar y automáticamente ya tendría la imagen en mi dispositivo. De aquí realmente no me quiero parar en todos los ejemplos, porque si me voy a la home vamos a ver que tenemos cientos de opciones. Así que yo aquí te recomiendo que le eches un ojo por ti mismo, porque hay aplicaciones que están súper interesantes. E incluso si estás indeciso, vas a poder clicar a este botón de arriba a la derecha donde pone random, y automáticamente vas a entrar en plataforma que haya creado cualquier persona de una forma aleatoria, como esta de aquí en donde tengo este monigote, que yo puedo coger por cualquier parte. Y realmente por aquí veo algunas opciones que si le clico, pues realmente voy a poder lanzarle diferentes objetos, y parece que es un poco de tortura. Una vez hemos visto las plataformas que hay, ahora vamos a poder crear las nuestras propias, y realmente vamos a poder hacer cosas incluso más complejas de una forma tan sencilla como te voy a mostrar ahora. Y para crear la nuestra, lo que tenemos que hacer sería clicar en esta barra superior que nos pregunta por qué queremos crear hoy, así que le vamos a dar un clic. Y ahora desde aquí vamos a tener diferentes opciones. La primera sería en esta parte de aquí abajo, desde donde si nosotros clicamos vamos a poder cambiar el modelo, tanto el de GPT-4o de OpenAI como otros modelos de la plataforma Anthropic de Claude. Aunque por defecto nos aparece el mejor modelo, que sería el de Sonnet 3.5, que de hecho ya estuvimos utilizando en este vídeo de aquí para poder crear aplicaciones como juegos interactivos, modelos en 3D, o incluso un sistema que reconoce los objetos que pasan por la webcam. Aunque una de las principales diferencias respecto a ese vídeo es que aquí, como estás viendo, todas estas herramientas las están utilizando otros usuarios de una forma gratuita. Y es que desde aquí vamos a poder lanzar nuestra idea de forma ágil. De hecho, como primer ejemplo, voy a crear una aplicación como la de Word de Microsoft que sea totalmente funcional. Así que esto sería tan fácil como escribírselo tal y como yo se lo he especificado, le doy a enviar, y de forma automática ya nos habría aquí generado una URL llamada Microsoft Word Clone, desde donde yo si le doy un clic y voy a escribir algo raro, pues puedo ver que realmente funciona. Incluso me ha añadido aquí algunas otras opciones como fuentes o poder cambiar el tamaño. Aquí también podría ponerla en negrita y realmente pues funciona bastante bien. Aunque te he dicho antes que esto lo puede utilizar cualquier usuario, por defecto está en privado, pero si clicas en este botón para guardar en un marcador, automáticamente te va a aparecer por aquí, desde donde tú le vas a poder poner cualquier nombre, como por ejemplo el de Microsoft Word Clone, y también lo vas a poder publicar. Simplemente marcando esta opción. Ya con esto, cualquier usuario que entra a través de esta plataforma va a poder entrar a esta herramienta que acabamos de crear. E incluso nosotros vamos a poder modificar la URL para que puedan acceder, por ejemplo simplificándola con la palabra word. Así que ya con esto cualquier persona podría acceder a esta URL y utilizar la herramienta que acabamos de hacer. Y esto realmente es clave para que podamos crear de forma ágil un producto mínimo viable que podamos testar en esta plataforma, ya que simplemente clicando en que queremos hacerla pública vamos a poder ver cuánta gente interactúa. Y aparte, estas personas van a poder darle me gusta si esta plataforma que hemos hecho es de su agrado. Y así, pues, si tenemos una buena aceptación, lo que podemos hacer es invertir más tiempo e incluso dinero para poder escalar ese proyecto que empezó con una idea. Sabiendo esto, volvamos a la plataforma porque ahora vamos a ir subiendo de nivel haciendo cosas cada vez más complejas de forma sencilla. Y para ello ahora vamos a crear otra herramienta que consiste en hacer algo similar al Paint para que podamos dibujar cualquier cosa. Para ello, simplemente volviendo a clicar en la barra de arriba y borrando lo que teníamos Si le pedimos otra cosa totalmente distinta, como crear una app interactiva para pintar, si nosotros le damos un intro, pues automáticamente nos está empezando a crear esto a tiempo real. Y también veo por aquí que se ha inventado una URL llamada Paint App. Así que aquí voy a dibujar algo parecido a mi logo, y realmente pues veo que funciona bastante bien. Desde aquí veo que también nos ha añadido algunas opciones como poner mayor grosor, así que realmente lo hace bien. Y lo más interesante es que nosotros vamos a poder interactuar con la inteligencia artificial para hacer todas las modificaciones que queremos. De aquí, como estás viendo, realmente es muy sencillo. Solamente podemos cambiar el grosor y realmente lo que dibujemos. También, si clico en borrador, pues veo que tenemos una herramienta para poder borrar e incluso hemos podido limpiar todo. Pero también le podremos añadir funcionalidades adicionales simplemente escribiendo aquí lo que nosotros queramos. Así que borro la URL y ahora le voy a poner que añada la opción de poder cambiar el color y la textura de los dibujos. Así que le voy a dar a enviar y automáticamente se está empezando a recargar exactamente la misma página, pero estamos viendo por aquí un par de opciones adicionales, como es esta que pone sólido, que si yo la pues ya estamos viendo diferentes texturas. Y también veo por aquí este apartado de color. Así que para probar la textura le voy a dar un poquito más de grosor, y manteniendo sólido voy a hacer un trazo así. Ahora voy a utilizar el de rugoso, y podemos ver que realmente cambia el trazo. El de boceto se vería así, y el de pelaje pues se vería de esta otra forma. Una vez tenemos todos estos cambios, pues nuevamente vamos a poder clicar en guardar, le damos un nombre, y si clicamos en publicar, pues nuevamente podremos simplificar la URL Vale, sabiendo esto, ahora vamos a hacer algo un poco más complejo, como es crear un instrumento musical, como es un piano. Así que aquí nuevamente le voy a poner simplemente una descripción muy escueta, que realmente, como estás viendo, no hace falta ni siquiera aplicar una ingeniería de prompt. Así que le voy a dar a enviar con estas pocas palabras, y ya estoy viendo por aquí que nos está apareciendo este piano con esta URL llamada interactivepiano.com. Y si yo clico sobre una de las teclas, pues aquí parece que ahora no está sonando. Así que clico sobre la URL y le voy a pedir que suene una nota musical cada vez que clique una tecla. Así que lo envío, y al enviarlo nuevamente nos empieza aquí a recargar. Y ahora si clico una tecla, como por ejemplo en esta, pues podemos ver que suena bien. Y de hecho veo que ha añadido algunas letras, así que voy a tocar las teclas de mi ordenador a ver si suena. Pues realmente funciona bastante bien, vale. Aunque esto es bastante sorprendente y parece que he hecho 3 aplicaciones bastante aleatorias, realmente no es así, ya que me he preparado algo que te va a volar la cabeza. Y es que volviendo sobre la plataforma, ahora voy a estar creando mi propio sistema operativo de Windows y le voy a vincular todas las aplicaciones que estamos haciendo. Vamos a ver esto, pero antes de nada voy a guardar esta aplicación, la nombro Piano. Y ahora sí, desde el apartado de la barra de arriba simplemente voy a escribir el sistema operativo de Windows, lo envío, y unos segundos más tarde pues ya me aparece aquí lo que parece un sistema operativo ordenador, que si clico aquí en estas opciones me aparecen algunas ventanas. Desde esta opción veo que me aparece este desplegable con estas opciones. Aunque realmente no se parece al sistema operativo de Windows que le he pedido, por lo que me voy a venir aquí y le voy a pedir que la interfaz sea igual que Windows XP. Así que lo envío y ya por aquí estoy viendo que me ha cambiado la URL a Windows XP Simulation y ya tenemos algo bastante más similar. Aquí veo que tenemos una opción de Start que si la clico pues ya tenemos unas opciones mucho más similares a la que nos encontrábamos en ese Windows, aunque el fondo de pantalla no me convence. Así que lo acabo de buscar en Google, voy a clicar en uno cualquiera y desde aquí voy a copiar la dirección de la imagen y le voy a pedir que ponga de fondo de pantalla la que aparece en esta URL. Así que le voy a dar a enviar y a ver si nos lo hace. Perfecto, ya nos estaría cargando por aquí y efectivamente nos ha puesto el fondo de pantalla que le hemos pedido. Así que fíjate qué forma tan rápida vamos a poder hacer estas modificaciones. Ahora lo que voy a querer hacer va a ser añadir todas las aplicaciones que me he estado guardando por aquí, pero que estén en mi propio sistema operativo. Y para ello sería tan fácil como clicar aquí y poner este prompt que te voy a dejar por la descripción, desde donde yo le voy a poner que añada el Word y donde pone el lo que tendríamos que hacer sería borrar aquí y desplegando sobre las aplicaciones que no hemos guardado, si clicamos en el lápiz vamos a poder clicar en copiar link. Y ahora desde aquí lo pegaríamos. Una vez tenemos esto, le damos a enviar y ya nos estaría cargando por aquí nuestro Windows. Pero ahora nos aparece esta aplicación llamada Word, así que le voy a dar un doble clic. Y como podemos ver, se abre perfectamente como si fuera la pantalla de un ordenador que de hecho nosotros hemos simulado. Y si yo clico aquí, pues realmente es totalmente funcional como estamos viendo por aquí. Más allá de esto, pues podremos añadir cualquier aplicación que nosotros quisiéramos, e incluso podríamos editarlo pidiéndole que cambien los iconos por cualquier imagen que nosotros encontremos. Aunque teniendo esto claro, vamos a crear ahora algo incluso más complejo, como es nuestra propia red social. Y aquí de hecho vamos a hacer diferentes páginas dentro de nuestra red social, pero empecemos por la primera. Para ello me vengo nuevamente aquí y le voy a pedir algo tan directo como que cree una red social de coches similar a Facebook llamada SociAuto. Así que le voy a dar a enviar. Ya por aquí me pone la URL de Sociauto y estamos viendo cómo nos está construyendo toda la página web a tiempo real. De hecho, por aquí parece que nos está añadiendo algunas personas como si ya hubiesen interactuado. Y realmente, si vemos sus conversaciones, pues está muy relacionado con temas de coche, mostrando aquí Juan el nuevo Mustang que tiene. Y realmente por aquí pues podemos ver un montón de publicaciones, que de hecho he visto que ha creado muchísimas y todas relacionadas con el tema de coche. Y aunque como primer resultado no está nada mal, realmente nosotros le vamos a poder guiar simplemente con una captura del diseño que nos guste. Así que he buscado por internet una fotografía de la interfaz de esta red social, por lo que le voy a hacer una captura de pantalla. Y volviendo a nuestra aplicación, ahora voy a clicar en este botón de la cámara, ya que si seleccionamos nuestra imagen nos aparecerá por aquí adjunta. Y ahora le vamos a poder pedir algo como lo que yo le acabo de escribir, en donde le estoy diciendo que debe tener una interfaz inspirada en la foto adjunta, pero manteniendo que debe de ser una red social para coches. Así que le voy a dar a enviar, y ya por aquí parece que nos está volviendo a cargar y la interfaz nos está cambiando todo por completo. En donde ahora sí que tenemos una interfaz mucho mejor y muy similar a la que tenemos en Facebook. Y una vez ya cargado, pues puedo ver muchas publicaciones de personas que están mostrando su coche, que realmente son imágenes generadas por inteligencia artificial. Y realmente todas estas están genial y ha cogido perfectamente la idea. ¿Quién diría que esta red social la hemos hecho en cuestión de segundos a través de esta inteligencia artificial? Una vez tenemos nuestra página principal, ahora vamos a poder crear otras subpáginas de esta red social. Para ello, teniendo aquí escrita la URL de nuestra página web, web. Y ahora voy a poder poner algo como, por ejemplo, perfil, ya que voy a querer crear la página de perfil de cualquier persona de esta red social. Y aquí yo, cuando le doy un intro sin haberle especificado nada, pues ya aparece que me está creando una página de perfil de esta red social desde donde tenemos toda esta información y publicaciones, que imagino que será de sus amigos, con todas estas imágenes creadas por inteligencia artificial, que nuevamente están genial. Y desde aquí pues ya sería simplemente pedir los detalles que nosotros queramos. Y por terminar, le voy a pedir, por ejemplo, que tengamos la opción de poner modo oscuro. Así que para ello, desde esta página, ya que ten en cuenta que realmente si borramos perfil volveríamos a la página anterior, ya que estamos construyendo una web con todas las páginas que estas realmente conforman. Pero yo sobre la página de perfil, como estoy en esta, lo voy a borrar y le voy a decir que añada un selector para poder cambiarlo a modo noche. Lo envío y ya por aquí pues estoy viendo que manteniendo la consistencia del diseño que ya teníamos antes, pues realmente aquí sí que es verdad que tenemos diferentes publicaciones a las que ya teníamos antes, pero ahora nos aparece este selector arriba a la derecha que si le le dé un clic, automáticamente tendríamos el modo noche tal y como se lo hemos pedido. Si volvemos a clicar, pues volveríamos al modo más clarito, vale. Yo creo que con esto ya tienes la idea de todo lo que puedes llegar a hacer. Y en el caso de que hayas montado algo que te guste lo suficiente como para poder escalarlo y profesionalizarlo en algún otro entorno para poder generar con tu aplicación un ingreso, que por cierto de esto ya hablábamos en este otro vídeo de aquí, lo que vas a poder hacer va a ser clicar en estos tres puntitos. Y ahora, si clicas sobre el apartado de Download, automáticamente vas a tener el código HTML en tu ordenador desde donde podrás seguir trabajando en él para mejorar ese producto, subirlo a algún servidor y escalar tu proyecto. Y bueno, ¿qué te ha parecido que hayamos hecho todo esto de una forma gratuita? Déjamelo por los comentarios y comparte si te gustó. Como estamos viendo, cada vez es más fácil tangibilizar nuestras ideas y proyectos que tenemos en mente. De hecho, hoy hemos visto cómo podríamos hacerlo en cuestión de segundos e incluso publicarlo para que otras personas puedan validarlo. Esto abre una oportunidad para poder construir y estar sin apenas inversión de tiempo ni dinero, algo que servirá de ayuda para que nuestro proyecto empiece a caminar, intentándolo, cayéndonos y levantándonos.
More from Alejavi

¡FreeLLMAPI acaba de Romper las Suscripciones de IA! TODO GRATIS y SIN límites









