Transcript for:
Herramientas de IA y WebSync

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 red social, 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 Alex Javi 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 la parte 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 rato y aspecto. Aunque yo lo voy a estar dejando tal y como está y lo 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 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 gusta 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 cualquier 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 Antropic de Clon, aunque por defecto nos aparece el mejor modelo que sería el de GPT-4O.

de Sonet 3.5 que de hecho ya estuvimos utilizando en este vídeo 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 la 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 Clon, 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 Clon 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. 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. 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, volvemos 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 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 PaintUp. 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 el 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 clico 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í.

Haré utilizar el de rugoso y podemos ver que realmente cambia el trazo. El de boceto se vería así y el de pelaje 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á 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 la tecla de mi ordenador a ver si suena. Pues realmente funciona bastante bien.

Vale, aunque esto es bastante sorprendente y parece que he hecho tres 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 El 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 link, 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 cambie 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 han añadido 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í 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 nosotros 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 puede 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, yo 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 parece 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 pedirle los detalles que nosotros queramos. Y por terminar le voy a pedir, por ejemplo, que tengamos la opción de poner el 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 doy un clic automáticamente tendremos el modo noche tal y como se lo hemos pedido si volvemos a aplicar pues volveríamos al modo más clarito vale yo creo que con esto ya tiene 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 que hablábamos en este vídeo 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 testar 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.