Amigos, hoy arrancamos una hackathon. No explicamos todavía lo de la hackathon. Vamos a estar hablando de la hackathon dos horas, o sea, todo el directo.
No os preocupéis que no se lo va a perder nadie lo de la hackathon. Vamos a estar codeando, vamos a estar explicando los premios, ideas, os voy a dar consejos y todo.
Os lo voy a comentar todo, ¿vale?
Entonces, la hackathon ya sabéis que es una competición de programación en la que tenéis que hacer un proyecto en un tiempo limitado.
Tenéis dos semanas. Empezamos hoy y tenéis hasta el 22 de octubre. ¿Y con quién hacemos esta querida y maravillosa hackathon?
La hacemos con la gente de Cloudinary. Cloudinary es, yo creo que, uno de mis proyectos favoritos que he utilizado durante mucho tiempo.
Hoy, justamente, he eliminado todas las imágenes que tenía. Luego os explico por qué. Ha sido por un tema un poco creepy, pero luego os lo cuento.
Luego os lo cuento. El tema es que Cloudinary es, digamos, una plataforma que está pensada para que subas tus imágenes y tus vídeos y, además, las puedas no solo distribuir a través de un CDN que va a tener muy buen rendimiento,
sí que no que las puedas transformar. Y es espectacular porque puedes transformar una imagen de mil millones de formas.
Y no os preocupéis que vamos a ver un montón de ejemplos para que lo entendáis.
Es que tenemos aquí una de demos, una de demos, por ejemplo, aquí en demos, por ejemplo, solo con imágenes, porque luego tenemos vídeos también.
Y ya lo de los vídeos me parece. Y han añadido ahora hace poco todo el tema de inteligencia artificial, que lo de inteligencia artificial es lo que nos va a interesar a nosotros para nuestro proyecto.
Por ejemplo, aquí tenemos, vamos a empezar con viajes, ¿no? Pues esto que veis aquí, lo de la izquierda sería la imagen original y lo de la derecha, ¿vale?
La imagen de la derecha es una imagen que le han subido a la resolución utilizando Cloudinary.
Para que lo veáis mejor, fijaos, esta es la imagen original, ¿vale?
Y la imagen de Cloudinary es esta de aquí. O sea, que puedes con inteligencia artificial mejorar la resolución.
Obviamente, con inteligencia artificial no vas a ir perfecto, pero se ve mejor. Se ve mejor y con una mejor resolución.
Y esto lo puedes hacer fácilmente desde la URL. O sea, tú lo que tienes aquí en esta imagen, fijaos, esta URL, esta URL, y esto es lo que más me gusta, lo que más me gusta de Cloudinary.
Y es el hecho de que, si os fijáis, lo único que hay que hacer por aquí es añadir un path, ¿vale?
O sea, la diferencia entre... A ver, os lo voy a poner por aquí para que lo veáis más claro, ¿vale?
Que os fijéis que la original, esta es la URL, y la como reescalada con IA, ¿vale? Sería esta de aquí.
Por eso lo utilizan tantas empresas. ¿Cuál es la diferencia?
La única diferencia es que ha añadido aquí este path de aquí.
Solo añadiendo ese path ya modifica la imagen estos dos paths.
Ah, no, el PM no. Este, eAppScale.
Y puedes hacer esto con un millón de cosas, con un millón de filtros, y le puedes decir cuánto lo tiene que subir.
Le tienes que decir, vale, quiero que lo subas 2024.
O sea, cada vez lo puedes hacer todavía más y mejor.
Le puedes ir cambiando la calidad a un montón de cosas, ¿vale?
Pero es que esto es la punta del iceberg, porque es que hay un montón de cosas.
Mira, puedes cambiarle el background también utilizando solo y simplemente un prompt.
Imagínate que tienes esto, ¿vale? Y queremos utilizar aquí un prompt que sea, yo qué sé, un bosque.
Añade o pon un bosque de fondo.
Y esto, en realidad, aunque parece muy complicado y que es lo típico de una inteligencia artificial,
al final, ahora os vais a dar cuenta con la URL.
Porque aquí tendríamos la URL original.
Es que lo hacemos todas las transformaciones, lo hacemos con la URL.
Esta sería la original, ¿vale? Con el fondo este original, ¿vale?
Que parece que es una URL y tal.
Y cuando se genera transformación, lo bueno es que esto, una vez que se guarda, ya no os tenéis que preocupar, ¿eh?
O sea, una vez que la guardáis, lo podéis hacer.
Eso sí, todo el tema de inteligencia artificial, aunque está todavía en beta, funciona bastante bien.
Bueno, vale, transformado.
Pues fijaos en una cosa.
Esta es la URL.
Y esta URL, vosotros en cualquier programa, podríais cambiar lo que quieras.
Por ejemplo, aquí ponéis el prompt y aquí en el prompt lo podéis cambiar y poner, pon que está debajo del mar.
Y tú entras directamente a esta URL, podrías entrar.
Lo que pasa es que los espacios no me los ha puesto, ¿vale?
Los espacios me los debería poner, a ver si los puedo poner un momento.
Debajo del mar.
Y es que esto es súper, súper potente.
Porque entrando y cambiando la URL, ya tendría la nueva imagen.
Obviamente, tarda un poquito en generarla, pero una vez que la tiene, la verdad es que queda bastante bien.
O sea, en un momentito, queda bastante bien.
Tarda unos segundos, pero una vez que la tenéis, ya la podéis guardar para siempre, la podéis descargar, podéis hacer lo que queráis, ¿vale?
Mientras sigue esta demo, vamos a ver otras cosas.
Mira, podéis tener inteligencia artificial para hacer más grande una imagen.
Por ejemplo, tenéis este trozo, la transformas con esto.
También con un trozo de una URL.
También para arreglar una imagen que esté rota por lo que sea.
Mira, en este caso, bueno, esto es como un rescalado, parece, ¿no?
Este es simplemente para hacer un rescalado.
Bueno, esta es que no está bien enfocada.
Esta también que no está bien enfocada, pues también lo puedes hacer, ¿vale?
A ver, que esto dice 423.
El 400, este error, el 423, a veces he visto que lo da con el tema de inteligencia artificial, pero es un tema temporal.
O sea, que cuando vuelves a darle y tal, lo hace correctamente.
Es verdad que la inteligencia artificial todavía está en experimental, ¿eh?
Vale, se puede, es que esto es tremendo.
Para tiendas, imagínate, cambiar la camiseta, puedes eliminar cosas de una imagen.
Eliminar cosas de una imagen, por ejemplo.
Elimina el café de la derecha, pues te lo elimina.
Pues vamos a decir, ¿qué queremos eliminar?
Remove spoons, ¿vale?
Vamos a, y que detecte múltiples imágenes.
Venga, le damos aquí, ¡pum!
¿Esto qué? ¿Esto qué os parece?
Es que esto es tremendo.
Y aquí tenéis de nuevo otra vez esto, la URL original y la transformada.
Y con la transformada, aunque todo lo que estamos viendo ahora de inteligencia artificial, también se pueden hacer otras cosas, ¿eh?
Se puede hacer, por ejemplo, todo más que no sean de inteligencia artificial.
Se puede hacer, por ejemplo, de optimización de la performance.
De hecho, tenéis el proyecto este.
A ver si os lo encuentro.
Optimize Images, que os he comentado alguna vez.
Este.
Este proyecto, que está muy chulo, es de la gente de Cloudinary.
Es totalmente gratuito, ¿eh?
Este proyecto.
Y tiene incluso un...
Ah, mira.
A ver, es que he puesto pricing y digo, hostia, le han puesto pricing, pero no, ¿eh?
Mira, es totalmente gratuito.
Me parece tremendo esto.
Porque al final aquí podéis subir 20 imágenes.
Y lo que hace, a ver si os encuentro aquí unas imágenes mías.
Tú, tú, tú, pictures.
Mira, vamos a usar bastante esta imagen para que me veáis en mallas.
Pero podéis subir tantas imágenes como queráis.
Las optimiza y luego las podéis descargar aquí con AVIF, con WebPay y con otras cosas.
Y fijaos que esta imagen estaba ocupando, a ver si lo encuentro por aquí, estaba ocupando 293K, que no está más, 293K.
Y aquí ya la ha optimizado el JPEG a 108 y además te ha dejado tres formatos para que lo descargues y que ocupe menos.
En AVIF 57K, o sea, y eso sin quitarle ningún tipo de calidad.
Por cierto, esta es la imagen que le hemos puesto antes, que he puesto...
Ah, que esté debajo del mar, le he puesto.
Y me ha puesto en la playa.
Bueno, no está mal, no está mal.
Pero como veis, se supone que si yo entro tal vez en la URL, ya está generado y ya no tarda en generarlo.
Eso es la primera vez que lo hace.
Bueno, pues que se pueden hacer un montón de cosas.
Optimización de imágenes.
Se puede hacer el rellenar una imagen.
Se puede eliminar cosas.
Se pueden reemplazar objetos.
Se puede recolorizar para hacer algo en blanco y negro, para cambiarle los colores.
Por ejemplo, es una chaqueta.
Esto para una tienda online es increíble.
Imaginad que tenéis una camiseta de cuatro colores diferentes y tenéis la misma imagen.
Y simplemente utilizando esto, pues hacéis un recolor y ya lo tenéis, con unos guantes, por lo mismo.
Le podéis decir, vale, pues quiero que me lo pongas de color rojo, de color no sé qué.
Podéis utilizar captions también.
Le pasas una imagen y te dice qué es lo que aparece ahí.
O sea, es que tiene un montón...
También tiene una API, o sea, no solo el tema de la URL.
¿Hay que tener una cuenta para usar Cloudinary?
Sí, necesitáis una cuenta.
La cuenta.
Hablemos de la cuenta.
La cuenta, obviamente, Cloudinary, si lo utilizáis mucho, es un producto de pago, especialmente para empresas grandes.
Pero tiene una capa gratuita que está bastante bien.
¿Veis aquí? Free.
Yo, de hecho, y lo siento por la gente de Cloudinary, yo llevo usando Cloudinary 10 años.
Y no he pagado nunca, durante 10 años.
Y mira que he transformado cosas.
¿Para qué lo utilizaba yo?
Yo lo que utilizaba es que tenía un script, ahora porque he eliminado mi blog antiguo.
Pero antiguamente, claro, es que ahora no puedo entrar.
Porque como he eliminado el blog y ahora tengo la academia, pues no lo podéis ver.
Pero ¿para qué lo usaba yo?
Descargar todos los últimos vídeos de YouTube y subía los thumbnails a Cloudinary.
Y los optimizaba para poder mostrarlos en WebPay.
Y así tenía mejor experiencia de usuario y tal.
Y tenía ya 500 imágenes.
Yo qué sé, tenía un montón de imágenes.
El tema es que siempre ha sido gratuito.
De hecho, nunca he tenido ningún problema.
Fijaos, para que veáis que no es mentira.
Fijaos, Image Impression se ha tenido 1.300 en los últimos 30 días.
Y solo había gastado 0,5% usado.
¿Ves?
Gratuito.
Y en los últimos 12 meses, pues ya veis.
Ah, no tengo datos.
Pero os juro que lo está utilizando todos estos datos.
Ah, bueno.
Ahora se ha roto.
Lo he roto.
Lo he roto porque me dicen que no tengo datos.
Pero os juro que tengo datos, ¿eh?
Os juro que tengo datos.
De que esto lo he estado utilizando yo toda la vida.
Qué lástima, ¿no?
Que no...
A ver ahora.
A ver ahora.
Si aparece.
Ah, los últimos 12 meses.
Pero que nunca he tenido que pagar.
Nunca he tenido que pagar.
Obviamente.
Mira, antes incluso lo usaba mucho más.
Porque claro, cuando llegué y quité el tema del blog y esto, pues igual bajó.
Pero fijaos que tenía un montón de imágenes, impresiones, no sé qué.
Y esto era el día, 900.
Y nunca he tenido que pagar.
Nunca he tenido que pagar.
O sea que...
¿Qué es lo malo, amigos?
Lo malo es que de la última hackathon dejé el servicio abierto y os voy a decir una cosa de por qué he tenido que eliminar todas las imágenes.
El tema es que tengo que eliminar todas las imágenes porque había gente que había subido imágenes suyas como para trolearme en la media library, ¿vale?
Y como hice un servicio ahí abierto y tal para que cualquiera pudiera subir como lo voy a hacer ahora para no complicarnos y tal, pues mucha gente se puso a trolearme y a subir cosas muy raras, ¿vale?
No pasa nada, no pasa nada.
No había nada porno, pero sí que había cosas un poco extrañas que no hacía falta.
Entonces, el subir imágenes como tal no suele ser muy caro.
Sí que es verdad que lo más problemático normalmente son las transformaciones.
Cuanto más transformas, hay que tener en cuenta que eso cuesta más dinerito porque, ¿ves?
El storage, yo tenía 250 megas, nunca me he estado ni cerca de pagar, pero las transformaciones sí que suelen ser un poco más polémicas.
Lo bueno es que puedes hacer ciertas transformaciones que persistan.
O sea que tú haces la transformación y una vez que tienes la transformación, la guardas.
Y para evitar que la gente te ataque, puedes evitar que se hagan ciertas transformaciones por la URL, ¿vale?
O sea que esto para que lo tengas en cuenta por si quieres tener cuidado con estas cosas.
Pero por lo demás, la capa gratuita está bastante bien.
Además, os voy a comentar algo importante.
La gente de Cloudinary, solo porque participéis en la hackathon, os van a dar un montón de créditos totalmente gratuitos.
Esto lo explican, y ahora os diré en la URL.
Si por lo que sea tenéis algún problema de os habéis quedado sin créditos y os pide pagar y tal,
que sepáis que en el Discord tenemos el canal de Cloudinary Hackathon.
Y fijaos que tenemos a Colby Fayok, que está aquí ya y os está dando soporte encima en español, ¿vale?
Entonces, aquí si tenéis cualquier duda de Cloudinary, que no sabéis cómo funciona algo,
que hay algún problema, lo que sea, Colby aquí os ayuda y os dice,
oye, pues lo tienes que hacer así, lo tienes que hacer así, bla, bla, bla, bla.
Entonces, si necesitáis créditos, que sepáis que aquí, solo por el mero hecho ya de registraros, os va a dar algunos créditos.
¿Ves? Dice, si quieres algunos créditos bonus para empezar, regístrate usando este formulario.
Este formulario que hay aquí, que os lo voy a pasar ahora mismo, este formulario es solo para conseguir créditos gratuitos, ¿vale?
Créditos gratuitos. Toda esta información, crédito, regístrate para tener créditos gratuitos, ¿vale?
Esta información os la voy a ir dejando por aquí, así que no os preocupéis.
Toda la información del 8 al 22 de octubre.
Voy a ir dejando por aquí.
Claudinary Hackathon.
Toda la información, ¿vale?
Toda la información.
Vale, pues todo esto lo dejaré por aquí.
Entonces, para tener créditos gratuitos, ahí en el chat lo tenéis, y si no, si es el vídeo de YouTube, pues lo dejaré en la descripción.
Os registráis con esto, que le tenéis que decir el email con el que os habéis registrado.
Yo en este caso voy a poner miduga.gmail.com, a ver si me dan a mí también créditos.
Y ya está. Solo tenéis que hacer esto. Solo tenéis que decir exactamente el email que habéis utilizado y ya está.
¿Eso utilizas para subir imágenes como un CDN para optimizarlas?
¿O las subes en Cloudflare?
¿Vale? Sé que es para evitar que alguien use los assets para descargarlo o para algo más.
Yo, si tuviera que tener imágenes 100% estáticas, seguramente no utilizaría Cloudinary, ¿vale?
Y utilizaría Cloudflare con R2 o con lo que sea.
Porque creo que se pierde la gracia.
Cloudinary puede estar muy bien, por ejemplo, para una tienda online, un e-commerce,
para blogs que necesitan mostrar la misma imagen en diferentes tamaños, para optimizarlas,
para cosas que suba al usuario.
¿Dónde las subes? Y eso lo vamos a ver hoy.
Hoy voy a enseñaros cómo subir muy fácilmente imágenes desde una página web,
un proyecto con Astro, a Cloudinary, ¿vale?
Y ahí sí que tiene sentido.
Encima los puedes optimizar con Cloudinary, los puedes transformar, los guardas,
y luego lo puedes subir a cualquier CDN o lo que haga falta.
Entonces, yo usaría para eso.
Como solo para CDN, lo puedes usar, pero a lo mejor no vale tanto la pena.
¿Hay alguna idea que arregle las fotos que salen desenfocadas?
Justamente antes hemos enseñado una aquí.
Hemos enseñado esta.
Aquí, aquí, a ver si lo enseño, la demo.
Hemos enseñado una demo de estas.
Ahora justo no encontré la demo.
Pero antes hemos encontrado aquí una demo.
Aquí, en Images, Generative, creo que esta, la Restore.
Fíjate, en esta lo hace.
Esta imagen está desenfocada y te la transforma y te la enfoca.
O sea que, y en esta, esta también está desenfocada y también te la enfoca.
Os voy a contar un poco cómo hay que participar en la hackathon de Cloudinary.
Es una hackathon que la idea es que tenga algo que ver con Halloween, ¿ok?
Es una hackathon especial de Halloween.
Vamos allá justitos, ¿no?
Del 8 al 22.
Pero tiene que ver con Halloween.
¿Tenéis del 8 al 22?
Hoy empieza.
El 22 tenéis que entregar los proyectos.
¿Qué es lo que se espera que hagáis?
Se espera que, sea lo que sea, tenga que utilizar de alguna forma,
utilice Cloudinary, ¿vale?
Y el tema, la temática, es Halloween.
Puedes hacer, por ejemplo, imágenes que tengan efectos así como de miedo,
overlays en los vídeos que sean creepys.
Puedes transformar el fondo.
Eso lo vamos a hacer ahora, ¿vale?
Hoy os voy a enseñar cómo podéis hacer uno de estos ejemplos.
Podéis hacer con inteligencia artificial que genere un fondo a las fotos
y que de miedo crear postales que tengáis que enviar,
que aparezcan fantasmas en una foto.
Lo que queráis que tenga que ver, ¿no?
¿Ves?
Transformar una imagen de una persona en un fantasma.
Añadir, por ejemplo, podéis hacer una idea que he tenido yo,
ya que acaba de salir Silent Hill 2, que a mí es un juego que me encanta.
Podéis hacer Silent Hillizar las fotos, ¿vale?
El hecho de que aparezca con una niebla, que no sé qué, cosas así.
Bueno, son ideas.
Luego, si tenéis alguna idea o si tenéis alguna pregunta en mi Discord
o en el de Cloudinary, lo podéis tener.
Requerimientos, de nuevo, tenéis que utilizar la tecnología de Cloudinary
para crear este efecto, la página web, lo que sea.
Es importante también que sea de código abierto.
Tenéis que dejar el repositorio, de hecho lo vais a tener que enviar,
y que esté desplegada en algún sitio para que lo podamos ver.
Podéis utilizar Node.js, Python, Go, React Native, más, PHP.
Mira, todo lo que aparece aquí lo podéis utilizar.
Lo importante es que se pueda utilizar desde la página web,
que yo pueda entrar a una página web y lo pueda ver.
Pero si lo queréis hacer con Node, con Python, PHP, Java, Ruby, .NET, Go, Dart,
React, Vue, Angular, JavaScript, jQuery, iOS, Android, Flutter, React Native, Kotlin,
todo esto lo podéis hacer sin ningún problema, ¿vale?
Con lo que os dé la gana, con Angular también, con Angular también.
Aquí, todos los SDKs que tenéis aquí, de hecho, hoy os enseñaré algunos
para que los veáis rápidamente, ¿vale?
Con cualquiera de estos lo podéis hacer.
Los participantes, obviamente, tienen que estar registrados en Cloudinary con una cuenta.
No hace falta pagar, ¿eh?
Tiene que ser en la capa gratuita.
La aplicación tiene que estar desplegada, tiene que estar en un repositorio público,
e importante, se tiene que entregar antes del 22 de octubre a las 11.59 PT.
11.59 PT en España, para que lo sepáis, son las 9 de la mañana.
Tened cuidado con esto porque PT es Pacific Time, es el tiempo en el que están las oficinas de Cloudinary
y dependiendo de donde sea en vuestro sitio, pues aparecerá en un sitio u otro la hora.
O sea, en España es una, pero en México pues será un poco más parecida.
Tened cuidado con esto, ¿vale?
Tened cuidado con esto.
Los premios.
Vamos a tener 10 camisetas totalmente exclusivas para los mejores premios.
O sea, no solo van a tener un kit de Cloudinary con stickers, con un peluche y tal,
sino que van a tener una camiseta que es una edición limitada que es esta de aquí,
donde aparece Cloudinary, Midudep, ¿vale?
Aparece este bicho de aquí, este mono.
Esta camiseta exclusiva para los 10 mejores proyectos.
Además de esto, los 3 mejores proyectos van a tener el tercero, 100 dólares y una cuenta pro de Cloudinary por un año.
La segunda va a tener 250 dólares y una cuenta pro de un año.
Y el primero va a tener 500 dólares y una cuenta pro de un año, ¿vale?
Así que ahí lo tenéis.
Y además de esto, solo por el hecho de participar, vais a tener créditos gratis en la cuenta de Cloudinary.
¿Cómo os tenéis que hacer el Summit final, ¿vale?
El Summit final lo tenéis que hacer en este de aquí.
Esto es el formulario donde tendréis, antes de que sea el límite, tenéis que poner vuestro nombre,
vuestro email, vuestra cuenta de Cloudinary, el nombre del proyecto, la descripción.
Aquí, esto no es obligatorio, pero yo lo recomiendo.
El hecho de poner un tuit en el que hayas compartido el proyecto o el LinkedIn o donde lo hayas puesto,
el link al repositorio de DigiHub, la URL del proyecto desplegado y si quieres compartir cualquier cosa del proyecto, ¿vale?
Obviamente, después de entregarlo podéis seguir haciendo cambios, no hay ningún problema, ¿vale?
Pero aquí lo tenéis.
Aquí tenéis el formulario.
Esto lo dejaré también.
Ahora, ¿quién puede participar?
¿Esto es solo para gente que esté en España?
No, esto es para gente de todo el mundo.
No importa si estás en las Islas Bahamas, en El Salvador, en Perú o lo que sea.
Toda la gente puede participar.
No importa de dónde seas, no te preocupes por el premio porque se te va a hacer llegar.
Seguramente los dólares, según como sea, es posible que se te dé como una tarjeta que tú puedas gastarla donde quieras, ¿vale?
O sea, porque a lo mejor el hacer una transferencia no se puede hacer y entonces lo que te hacen es darte una visa que tiene ese dinero y ya está.
Y tú lo usas como tú quieres.
Pero dependerá un poco del país y cómo será.
Es posible que Cloudinary no pueda registrar desde algunos países, ¿vale?
Por temas de...
Bueno, porque en Estados Unidos algunas empresas no te dejan registrarte si eres de ciertos países.
Entonces, pues vas a necesitar utilizar una VPN porque no hay otra.
Pero no van a tener ningún tipo de control sobre eso que yo sepa, solo para que lo sepas, ¿vale?
Se puede hacer por equipos, ¿vale?
Los equipos, pues obviamente, solo recibirán un premio y lo tendrán que compartir.
Así que es importante que si haces equipo, esto lo tengáis claro.
Podéis ser en el equipo de 1 a 800.000 personas.
Pero la única persona que se lleva el premio es la que se ha registrado en el formulario.
Luego esa persona es la persona que tendréis que perseguir para que comparta el premio con los demás.
¿Cómo se van a decidir los ganadores?
Se van a decidir.
Se van a preseleccionar primero, ¿vale?
Los voy a seleccionar yo y miembros del equipo de Developer Experience de Cloudinary.
Y después de eso seréis vosotros el mismo, no sé si el 22 de octubre o más adelante, que decidiréis los ganadores, ¿vale?
Ustedes decidirán los ganadores.
Haremos aquí un top 10 seguramente, un top 12, un top 8, no lo sé, ¿vale?
Pero lo que haremos es que vosotros, la comunidad, decidan los ganadores, ¿vale?
Y eso será, que lo decidiréis vosotros con vuestros votos.
Y ya está, eso es un poco todo lo que hay que saber.
No sé si hay algún tema importante que queráis comentar.
Una cosa que os puedo decir es, ¿qué es lo que se va a tener en cuenta a la hora de que sea el ganador?
¿Quién va a ganar?
El que tenga mejor código, el que tenga...
Se puede participar con más de un proyecto sin ningún problema.
¿Quién va a ganar?
El que tenga mejor código, el que sea más bonito, el tal.
Lo que se va a tener en cuenta especialmente va a ser el efecto wow.
Que sea un proyecto que sea lo más único posible, ¿no?
O sea, algo que realmente sorprenda por la exclusividad que tiene ese proyecto.
Que utilice lo mejor posible los servicios de Cloudinary y que tenga una buena experiencia de usuario.
No se va a revisar el código.
No se va a revisar el código.
Repito.
¿Vale?
Porque luego yo entiendo que hacéis un código que está para lamerlo.
Y por desgracia, pues no nos da tiempo.
Es que es imposible, ¿vale?
Es imposible poder revisar el código de todos los proyectos.
Ya nos pasó en el de Vercel y lo mejor es que digamos que no tiene nada que ver.
O sea, que podéis utilizar y lo podéis hacer como queráis.
Siempre y cuando la experiencia de usuarios sí que es importante que no pete el proyecto.
¿Vale?
Entonces, eso sí, súper importante que las URLs estén funcionando, que no den problemas y que todo funcione como se espera.
Por favor.
Pero código espagueti, lo que queráis.
Me lo voy a comer con tomate, si hace falta.
Muy bien.
Dicho esto, la pregunta del millón luego.
Bueno, ¿y cómo hago yo esto tal?
Mira, lo mejor que podéis hacer, de hecho lo vamos a hacer ahora.
¿Vale?
Voy a cerrar por aquí.
Voy a cerrar todo esto que tengo por aquí.
Porque quiero que os sirva de ejemplo y porque me parece interesante que también le demos cañita.
¿Vale?
Hay un montón de SDKs que ya tenéis para practicar.
Bibliotecas ya preparadas para que según la tecnología o lenguaje que vayáis a utilizar, os va a facilitar mucho la vida.
Y quiero hacer un mini proyecto ahora, en vivo y en directo, con Astro para que veáis.
Por ejemplo, si queréis utilizar Nex, el de Nex está tremendo.
El de Astro está súper bien, pero tenéis Snacks, tenéis Svelte, tenéis mil millones de historias.
De cada uno tenéis una documentación específica.
¿Cómo que no está Astro?
Si es este.
Tenéis una documentación específica con ejemplos de todos y cada uno.
Este sería el de Nex.js, por ejemplo.
Le dais a Get Started y fijaos, tenéis componentes para utilizar.
Tenéis el ejemplo, el uso básico, la configuración que podéis utilizar y algunos ejemplos de cada uno de ellos.
Lo mismo a la hora de tener un botón para subir los archivos.
O sea, están todos súper, súper bien explicados.
Luego tendríais el de Astro, que lo vamos a utilizar ahora.
Tendríais el de Nex también, muy completo.
Si queréis hacer el proyecto con Vue o con Nex, en este caso, pues lo mismo.
Como los mismos componentes, la galería de productos, también lo tenéis con Svelte y lo tenéis con otros lenguajes.
No solo tenéis con React, que también es interesante que tenéis una biblioteca también de React con SDK completo y todo esto.
Sino que también tenéis la posibilidad de hacerlo con Node.js, si vais a hacer algo que tenga que ver con la API, con Python, con PHP, con Java.
O sea, tenéis un montón de opciones.
Entonces, yo voy a hacer un proyectito con Astro.
Quiero hacer un proyecto, lo vamos a hacer rápido, donde veáis cómo podéis subir un archivo,
cómo podríais hacer con una imagen de un poquito de miedo y además darle un poquito de cariño.
Y todo utilizando en un momento Astro y el SDK de Cloudinary, para que os sirva de base.
Que no hace falta que hagáis este proyecto, pero sí os puede servir un poco de idea.
Lo primero que vamos a hacer por aquí, vamos a eliminar esto por aquí.
Vamos a crear el proyecto de Astro y le vamos a llamar...
Mira, han puesto...
Y esta cosa de aquí que ha puesto, qué raro, qué raro eso, ¿no?
Que ha puesto ahí como un esqueleto, qué raro.
Bueno, vamos a poner Cloudinary, Hackathon, Example, Hackathon...
Bueno, Example, Astro, Astro SDK.
Astro Halloween.
Halloween, Halloween, venga.
Vamos a utilizar los archivos por defecto.
Venga, le decimos que sí, de TypeScript, total, no vamos a utilizar TypeScript nada.
Le decimos que sí a todo y ya está.
Yo, la verdad es que Astro está bastante bien porque para hacer la API es muy rápido.
O sea, cualquier framework que quieras utilizar, como en Exit, también puede ser buena idea.
Porque así, si queréis utilizar la API, también de Cloudinary, que también tiene API,
pues lo podéis hacer en un momento y sin tener ningún tipo de problema.
Mira, dice, no voy a ganar y posiblemente haré el ridículo, pero estoy ansioso por participar.
César, eso es lo importante.
De verdad, no penséis solo en ganar, porque, bueno, pues ganar a lo mejor, pues es interesante.
Pero no tenéis por qué ganar y pueden pasar mil millones de cosas.
A ver, os voy a contar una historia.
Yo a Madeval, para que veáis, Madeval lo fiché para que trabajase conmigo
y me ha ayudado con la MiduConf, con la academia de Midudep,
en la que estamos trabajando y estamos añadiendo contenido.
Y yo a Madeval lo he fichado por sus participaciones en las hackatones.
Y tengo más gente en la lista por sus participaciones en las hackatones.
Porque sé cómo programan y sé que me gusta cómo programan.
Y no han ganado.
Y no han ganado.
Así que...
Y es que creo que es importante el participar.
Porque creo que lo más interesante es el hecho de participar, aprender
y además que compartáis los proyectos.
O que hagáis equipo y todo este tipo de cosas.
Yo creo que es súper importante.
Así que es una forma de destacar sin necesidad de ganar.
Claro, que si ganáis...
Mira, por ejemplo, otro proyecto.
Tinte Midudep Theme Visual Studio.
Otro proyecto que yo he compartido.
A ver si lo encuentro.
No lo voy a encontrar.
Tinte.dev.
Tinte.dev.
El de Tinte.
Que a mí es un proyecto que me encanta.
Este.
Este proyecto.
Es una pena.
Twitter.
A ver si...
Porque yo lo compartí también.
No lo voy a encontrar.
El diseño de tu web.
Bueno, ahora no lo voy a encontrar.
Pero esta web.
Que mira, que ganó el tercer...
La tercera posición.
Pero no ganó.
Lo está mejorando un montón.
Mira, ahora ya lo ha puesto por chat CDN y tal.
Que es para utilizar temas de Visual Studio Code.
Pues fijaos en una cosa.
Que este proyecto no solo me parece espectacular.
Porque es increíble lo que hizo.
Que quedó tercero.
No ganó.
Lo hemos utilizado.
En la academia.
La...
Cuando vais a un curso.
¿Vale?
Y veis código.
¿Vale?
Que tenemos aquí el código.
Esto que veis aquí.
Lo hemos hecho con tinte.
Porque pedimos aquí.
Pues oye, me gustaría alguna cosa con los colores de mi DUDEP y tal.
Luego lo modificamos un poco.
Pero los colores que veis en los ejemplos de la academia.
Todos los ejemplos que hemos hecho.
Están basados en un tema que hemos hecho con tinte.
Así que mira.
Este tipo de cosas...
Y yo lo he compartido.
Este proyecto lo compartí en...
Lo he compartido en Twitter.
Y tuvo un montón de relevancia.
Y me alegro un montón porque se lo merece.
Son estas cosas, ¿no?
El hecho de que creas un proyecto que tú no tienes ni idea.
Que al final puede tener esta relevancia.
Y de repente, pues mira.
Luego tiene un uso real.
Que está súper bien, ¿no?
Bueno, pues venga.
Continuamos.
Estaba buscando a ver si lo encontraba.
Pero no soy capaz de encontrarlo.
Me da mucha vergüenza compartir mis proyectos.
Porque a comparación de estos que estamos viendo.
Son súper mínimos.
Y me siento mal programando.
Pero hay de todo.
No pasa nada.
Lo importante yo creo...
O sea, ya los harán mejor también.
Se tiene que empezar por algo al final.
Bueno, pues ya hemos empezado aquí el proyectito.
Voy a utilizar PNPM.
Más que nada porque sé que está utilizando NPM.
Y me da mucha rabia.
A ver si desaparece en PN.
Que es tan lento que me da cosita.
¿Vale?
Voy a abrir aquí el proyectito.
¿Vale?
Y aquí ya tenemos nuestros proyectos.
Obviamente hoy no me va a dar tiempo a explicarte todo Astro.
¿Vale?
Te voy a hacer aquí un curso de Astro.
Pero la verdad es que Astro lo bueno que tiene es que se parece tanto a HTML.
Y vamos a escribir casi todo va a ser HTML y CSS.
Que no creo que te haga mucho por saber.
Fíjate que tenemos aquí como el JavaScript que queremos que se ejecute como en el servidor.
Entre comillas.
Luego teníamos aquí el layout y lo que va a renderizar.
Y aquí los estilos.
Y cuando queramos el JavaScript del cliente lo tenemos aquí.
Así que bueno para que veas que tampoco es que tiene que ser muy muy muy difícil.
Tampoco voy a hacer muchos estilos.
Solo para que lo tengáis en cuenta.
Bueno lo primero es ir a la documentación del SDK de Astro para Cloudinary.
Que me parece espectacular que tenga un SDK.
Y vamos a instalar el SDK.
Así que nos vamos por aquí.
PNP install Astro Cloudinary.
Y en un momentito ya lo tendremos.
Ya nos pide una cosa importante.
Y es un archivo .env con una variable de entorno.
Un public Cloudinary Cloud name.
Así que vamos a ir quedando por aquí en nuestro archivo con la variable de entorno.
.env.
Esto puede ser público.
No hay ningún problema.
En mi caso el nombre de la nube pública es midudev.
Pero si tenéis alguna duda.
De cuál es.
Bueno lo tenéis aquí.
Es este nombre.
Y si no también.
Por cierto esta piqui no pasa nada.
La que es complicada es esta.
La secret.
Si tenéis alguna duda.
Que sepáis que aparece.
A ver si lo encuentro.
En ajustes puede ser.
Que a ver.
Ya os digo yo que es ese nombre.
Pero bueno.
Por si no fiáis.
Que sepáis que en algún sitio.
Ah no me acuerdo dónde.
Mi perfil.
Configuración.
En API keys.
No me acuerdo dónde sale.
API para gestión.
Puede ser aquí.
En algún sitio pone Cloud name.
Y pone midudev.
Ah mira.
Bueno aquí también sale otra vez.
¿Ves?
Arroba midudev.
Bueno pues ese es el nombre que tenéis que utilizar.
¿Vale?
Y aquí.
Cloud name midudev.
Lo podéis copiar de aquí si queréis.
En el dashboard.
Que es como en este programmable media.
Ahí lo tenéis.
¿Vale?
Midudev.
Así que es esto.
Midudev.
Con eso ya lo tenéis configurado.
Esto es lo que nos pide para configurar aquí en SDK.
Nos dice la variable entorno.
Más adelante.
Vamos a necesitar otros.
Ya os diré dónde hay que sacarlo.
Por ahora no hace falta.
No necesitamos nada más.
Vamos a empezar con lo más básico.
Que es tener un widget para subir archivos.
Y fijaos que tiene uno ya preparado.
Cloudinary.
Que ya es bastante feo.
Las cosas como son.
Se puede personalizar bastante.
Que lo haremos.
Y se le pueden quitar muchas opciones.
Para que quede lo suficientemente limpio.
Yo os recomiendo que empecéis con esto.
Y si tenéis tiempo.
Entonces añadís otro tipo de experiencia de usuario.
Porque así no perdéis tiempo.
Con lo que a lo mejor no es tan importante.
Ahora.
Nos vamos aquí al index.
Y vamos a importar este layout.
Este widget.
Perdón.
CLD.
Cloud.
No.
Widget.
Upload widget.
¿Vale?
De Astro Cloudinary.
Esto lo vamos a traer para aquí.
Lo ponemos aquí mismo.
Y aquí habría que poner un botón de upload.
Guardamos los cambios.
Vamos a estilar aquí esto un poquito.
Vamos a ponerle un width máximo.
No sé.
800 píxeles.
Esto más que nada es para que no quede mal.
Vamos a ver nuestro proyecto.
Local host 4.3.2.1.
No lo he iniciado.
Importante.
Así que vamos a levantarlo.
Con pnpm run dev.
Vale.
Ya tenemos el entorno de desarrollo.
Vamos a ver por aquí.
Vale.
Primero error.
Nos dice.
Un upload preset es requerido para las subidas que no son firmadas.
Vale.
¿Qué quiere decir upload preset?
Y quiere decir subidas no firmadas.
El tema es que cuando.
Claro.
Por temas de seguridad.
En Cloudinary.
Lo que podríais hacer es firmar los recursos que subís.
Para evitar.
O para aseguraros.
Que la persona que lo está subiendo.
Tiene.
Pues.
Los permisos necesarios.
Para poder subir ese asset.
Entonces.
No lo vamos a hacer.
Pero que sepáis.
Que esto está totalmente.
Súper bien documentado.
Y muy fácil de seguir.
Que tendríais que crear un endpoint.
Y tal.
Y lo tenéis por aquí.
¿Ves?
Pones sync.
Y aquí te dice.
Vale.
Pues tienes que utilizar este endpoint.
Configuras todo esto.
Y así ya tienes una API.
Donde vas a poder firmarlo.
Pero bueno.
Tampoco es.
Que sea muy importante.
Sinceramente.
Y en este caso.
Pues tampoco ocurre nada.
Si no lo firmáis.
Ahora bien.
Sí que es importante.
Lo del upload preset.
¿Esto qué es?
Esto.
Si os vais a ajustes.
Veréis aquí.
El upload preset.
Le dais un clic.
Y aquí tenéis.
Como las configuraciones.
Preestablecidas.
Para las cargas.
De vuestras imágenes.
Podéis añadir aquí.
Add upload preset.
O podéis.
Manage default.
Para que tenéis unas por defecto.
¿Vale?
Que sea.
Pues como se tiene que descargar por defecto.
No sé qué.
No sé cuánto.
Pero bueno.
Esto lo podéis olvidar.
Lo más fácil.
Que añadáis aquí un preset.
Este aviso.
Es porque han cambiado la interfaz.
Que ahora está mucho más bonita.
Vamos a poner aquí.
Upload unsigned images.
Por ejemplo.
¿Vale?
Le tenemos que decir.
Que estas no las vamos a firmar.
Le podemos decir.
La carpeta.
Le vamos a decir.
Midu images.
Y ya está.
Con esto.
Ya lo tendríamos.
Podéis configurar lo demás.
Pero por ahora no es importante.
Y este preset.
Es el que vamos a utilizar.
Justamente aquí.
Ya con esto.
Solo.
Simplemente.
Con esto.
Ya deberíamos ser capaces.
De ir a nuestro proyecto.
Bueno.
Este upload es un poco feo.
Le damos un clic.
Y ya tenemos.
Una forma.
De subir imágenes.
Si yo.
Esta imagen.
Que tengo por aquí.
Esta imagen.
Que salgo yo aquí.
Corriendo.
Y bien sudado.
La arrastro.
¿Vale?
Fíjate.
La ha subido.
Y ya le podemos decir.
Que he terminado.
Y me la ha subido.
Y tal.
Si quiero ver esta imagen.
Debería ir.
A mi Cloudinary.
Y si vamos a assets.
Deberíamos ver.
La carpeta.
Midu images.
La mediateca.
El estudio.
Mira.
Subidas recientes.
¿Vale?
Mira.
Todas las imágenes recientes.
Que había subido por ahí.
¿Vale?
Y aquí está.
Aquí ya la tenemos.
¿Es esta la que he subido?
No sé si es la que he subido.
¿La he subido antes?
Sí.
Es esta.
¿Vale?
Pues ves.
La tengo aquí subida.
Y perfecto.
Fijaos que ya aquí.
Cuando hemos subido la imagen.
Ya aquí.
Tenéis un montón.
De transformaciones.
Preestablecidas.
Que os dice.
Por ejemplo.
Si queréis.
Esta sería la imagen original.
Pero podéis ponerle.
Un banner.
Y ponerle.
Texto encima.
¿Ves?
Shop now.
Qué bueno.
Y además.
Detecta.
Con inteligencia artificial.
Qué es lo más importante.
De la imagen.
Que esto está muy chulo.
Podéis convertirla.
En un círculo.
Por ejemplo.
¿Vale?
Aquí tendríais.
Para transformarla.
En un círculo.
Y que además.
Deje el sujeto.
Lo más importante.
En el centro de la imagen.
Podéis.
El borde.
Lo podéis cambiar de color.
Le podéis quitar el borde.
Le podéis hacer mil millones de historia.
Podéis tener.
Marcas de agua.
Que esto también se puede utilizar bastante.
El tener marcas de agua.
Para que siempre aparezca un logo.
Lo que sea.
Bueno.
Estos son algunas de las transformaciones que hay.
Que están bastante bien.
Mira.
Fijaos que.
Si hago la.
Si hace el thumbnail.
El thumbnail lo está haciendo de mi cara.
De sufrimiento.
Cuando estoy corriendo.
Pero como ha detectado.
Que eso es lo importante de la imagen.
Sabes.
Que no me ha hecho un thumbnail cualquiera.
De.
Ah.
Pues voy a hacer el thumbnail de esto mismo.
No.
Lo ha hecho de eso.
Vale.
Ya tendríamos la imagen.
Ya la hemos subido.
Vamos a mejorar un poquito el tema de.
La UI.
Porque obviamente.
No voy a utilizar Tailwind.
Porque no tenemos tiempo de utilizar Tailwind.
Pero voy a utilizar un catálogo de componentes.
Que tampoco es nada del otro mundo.
Pero.
Es de Astro.
Y no está mal.
Vale.
Que se llama Full Depth UI.
Y.
Ya tiene algunos componentes.
Que se ven bastante bien.
Así que vamos a utilizarlos.
Y así.
Eso que nos ahorramos.
Instalamos la dependencia.
Y una cosa importante.
Que tiene.
Este catálogo de componentes.
Es que hay que indicarle aquí.
La configuración.
Vamos a importar.
Full Depth.
De.
Full Depth UI.
Barra.
Integration.
Integration.
Y esto aquí.
Le tenemos que decir.
Que las integraciones.
Que queremos cargar.
Está la de Full Depth.
Y aquí.
Le pasaríamos.
Los colores.
Le voy a decir.
Que el theme.
Es Dark.
Y el Dark.
Vamos a decirle.
Que el background.
Es más o menos.
1F.
1F.
1F.
El color base.
Vamos a poner.
6.
F.
6.
D.
T.
T.
T.
Y el brand.
Pues podéis poner el que queráis.
Voy a utilizar el.
Por defecto.
Que utilizan.
Pero esto lo tenéis que hacer.
Para que se vean los colores.
Porque si no.
No se ven los colores.
¿Vale?
Y ahora que ya tenemos esto.
Fijaos que tiene un montón de componentes.
Por ejemplo.
El del botón.
Este.
A ver.
No está mal.
Pero al menos eso que te evitas.
Por ejemplo.
Tener.
Tienes variantes.
Tienes iconos.
Ya tienes algunas cosas.
Que así no las tenemos que hacer nosotros.
Y ya podemos importar.
El botón.
From.
Full.
Ah.
Full Depth.
UI.
Mira.
No.
El botón no me lo estaba.
No me lo está trayendo.
Ah.
Igual lo he escrito mal.
No.
Lo he puesto bien.
A ver si lo pilla.
Vale.
Aquí teníamos el botón.
Lo vamos a renderizar esto como un botón.
Y le podemos decir además.
Cuáles son los colores que queremos que utilice.
Por ejemplo.
Decirle.
Que sea el color como.
La marca.
Vale.
Y ahí lo tenemos.
¿Vale?
Al menos.
Ya tenemos un poquito mejor el.
El color.
Vamos a poner por aquí un heading.
Con el color de la marca.
También.
Vamos a poner que no tenga contraste.
False.
Para que se vea un poquito mejor.
Hackazón.
Claudinari.
¿Vale?
Y el heading.
Pues también.
Hay que sacarlo.
De aquí.
¿Vale?
Y con esto.
Bueno.
Pues ya empieza a tener un poquito de historia.
Vamos a centrar todo esto.
Y ya está.
Uy.
Este no me lo ha.
Uno de los dos no me lo ha.
No me lo ha centrado.
Este de aquí.
Este H2.
Este H2.
No me lo ha centrado.
H2.
H2.
Text.
Align.
Center.
Pues no me lo está.
Ah.
Sí que lo está centrando.
Lo que es el upload este.
O sea.
A ver.
Una de las dos cosas.
No me lo está.
Esto sí que lo está centrando.
Log.
Text.
Align.
Center.
Background.
Red.
No.
Esto sí que me lo está pillando.
Pero.
Entonces.
¿Qué le pasa a esto?
Una de las dos cosas está limitada.
¿Ves?
Porque tiene este más.
Y este tiene solo.
Si le digo que tenga todo.
Bueno.
Vale.
No pasa nada.
Le den por saco.
Display flag.
Mira.
Ahora ya me estoy arrepintiendo de no utilizar Tailwind.
Ya me estoy arrepintiendo de no utilizar Tailwind.
La cago en la leche.
Bueno.
No pasa nada.
Mira.
Que le den por saco.
Tampoco es muy importante que eso quede.
Prefiero que quede así.
Que tenga el upload.
Vale.
Vamos a modificar todo el tema este de cómo queda el widget.
Que esto sí que creo que es bastante importante.
Porque obviamente tiene un montón de opciones que no vais a necesitar.
Esto sería para subir archivos o arrastrarlo desde vuestro ordenador.
Pero también tenéis para subir desde una imagen remota.
Desde la cámara.
No sé si me permitirá.
Me aparecerá.
No sé si apareceré yo.
No.
Ah.
Mira aquí.
Apareceré yo aquí.
Ahí está.
Desde la cámara del móvil.
Google Drive.
Dropbox y tal.
Pero esto no tiene mucho sentido.
¿Vale?
Todo esto se puede, por suerte, se puede desactivar.
Y lo vamos a hacer.
Para eso, en el widget este, que tenemos aquí un montón de opciones, pues podemos desactivar,
por ejemplo, vamos a decirle Options.
Y las opciones serían, por ejemplo, Sources.
Y aquí solo decir que las aceptamos desde local.
¿Que se pueden subir múltiples imágenes?
Le vamos a decir que no.
Así que Max Files, que sea solo una.
Y por desgracia, podríamos intentar decirle que el idioma fuese en español, pero esto no funciona.
Pero fíjate ahora cómo ha cambiado.
Ahora ya solo aparece el My Files.
Ahora tiene mejor pinta.
No da tanto miedo.
Y además, los estilos se pueden cambiar.
Que lo sepáis que esto también aquí en los Styles.
No sé si aquí Styles.
¿Ves?
Styles.
Y aquí se puede empezar como a estilar todo, todo lo que veis.
Que eso es una opción que podéis hacer para no tener que crear vuestro propio widget y simplificar este.
Pero, como veis, no ha funcionado lo del lenguaje.
Por suerte, hay un archivo JSON, que es este de aquí, que veis que por defecto en inglés todas estas traducciones son las que tienen.
Bueno, pues lo que podéis hacer es poner esas mismas traducciones vosotros a mano aquí con el text.
No todas, porque no las necesitáis todas.
Pero podéis decir que el texto en español, por ejemplo, podéis buscar local, ¿vale?
¿Ves?
Browse o browse o ddtitle single.
Pues el ddtitle single podéis poner aquí.
Arrastra tu imagen aquí, ¿vale?
Solo con este cambio.
Fíjate que ya, ¿ves?
Esto ya lo tenéis traducido.
Podéis buscar esas partes que por lo que sea, pues el My Files, ¿no?
Pues aquí buscáis My Files.
Y aquí veis que está dentro de menú de Files.
Pues esto lo copiáis, lo ponéis aquí dentro de menú de Files y podéis poner subir desde tu ordenador o desde tu dispositivo.
Tiene más sentido dispositivo porque puede ser...
Y solo con esto, pues ya podéis empezar poco a poco.
Vais, ¿ves?
Subir desde tu dispositivo.
Lo mismo con el OR este o luego con el Browse este.
Browse.
Browse.
Browse.
Tú, tú, tú.
Menú.
No, este no es.
Local.
Vale, pues este local.
Buscar o seleccionar.
Seleccionar creo que tiene más sentido.
Seleccionar.
Y yo creo que con esto más o menos ya estaría, ¿no?
No sé si el...
A ver.
Pues ya está.
O sea, ya lo tenéis en español.
Ahora, esto de aquí no se puede quitar en los que son usuarios gratuitos.
En los de pago sí que se puede eliminar.
De hecho, es una prop.
Lo podéis eliminar de aquí.
Power by.
Lo ponéis en false y ya se podría eliminar.
El problema es que si sois de la capa gratuita, no lo vais a poder eliminar.
Pero si sois de pago, se puede quitar.
Para que lo sepáis, ¿eh?
Que a lo mejor.
Bueno, ahora el problema es que sí, que tenemos lo de subir las imágenes.
Esto está muy bien.
No se puede esconder ni con CSS.
Por desgracia.
No hay problema en dejarlo en inglés.
Hombre, no.
Pero os explico cómo traducirlo, ¿no?
Por si por lo que sé hacéis la página en español es un momento.
Creo que es un momento hacerlo en español.
Ya ves tú cuánto he tardado.
He tardado 20 segundos.
Y sin chaje, pete.
Vale.
Pues el tema es que todo esto está muy bien.
Pero ahora quiero que cuando suba la imagen, que fijaos además que cuando solo es una,
cuando sube la imagen, se cierra automáticamente.
Pero claro, ¿qué hago yo aquí?
O sea, ¿ahora qué pasa?
Pues no ha pasado absolutamente nada.
Pero fijaos que sí que se ha subido la imagen.
Si me voy aquí a los assets.
O, bueno, este no.
Que este es el que hemos subido antes.
Lo malo es que vais a ver que se ha subido la misma otra vez, ¿vale?
¿Veis que se ha subido dos veces?
Esto va a pasar porque voy a estar subiendo todo el rato la misma.
Pero fijaos que se ha subido, pero yo no me he enterado aquí.
Bueno, no os preocupéis porque resulta, voy a poner por aquí Cloudinary Hackathon, ¿vale?
Cloudinary Hackathon.
Pues que resulta que tenemos un evento que podemos escuchar.
Podemos crear aquí un script.
Podemos ponerle al widget una ID.
Vamos a poner aquí Upload Widget.
Me parece perfecto.
Así que nos vamos por aquí.
Vamos a recuperar el widget con un GetElementById.
Y aquí podéis decir que si tenemos el widget, entonces vamos a escuchar el evento.
Este evento no es el correcto.
Me estás engañando.
Me estás engañando y me hace daño.
Me hace daño inteligencia artificial.
Porque me dices que ese es el evento.
Luego no me funciona y me vuelvo loco.
¿Vale?
Vale.
Este tampoco es.
Este tampoco es.
Pero lo vamos a ver ahora.
Eventos.
A ver si encuentro el evento.
Events.
Aquí está.
Este es.
Ah.
No.
Es este.
El success.
Este es.
¿Vale?
De hecho, es que es el código justamente el que necesitamos.
O sea, que lo vamos a poner.
Vamos a copiárnoslo totalmente.
Porque es exactamente el que necesitamos.
Vale.
Pues aquí podéis escuchar el evento de que cuando el widget se ha subido la imagen.
¿Vale?
Pues tenéis aquí un evento.
No sé qué.
Lo vamos a probar para ver ahí el console.log.
A ver qué es lo que hace.
Fijaos que sube la imagen.
Y aquí en el console.log tenemos ya el objeto donde nos ha dicho que ha ido todo bien.
Donde se ha subido.
Aquí tenemos la URL que ya la podemos utilizar.
Bueno, no sé por qué aquí.
Ah.
Porque me ha copiado esto.
Pero tendríamos la URL que ya la podemos utilizar.
Y además esta imagen ya la podríamos empezar a transformar a través del path.
O sea, esto ya podríamos ir cambiando path aquí.
Y la podríamos empezar a transformar porque para eso ya la tenemos ahí.
Bueno, lo importante de esta imagen.
También hay un montón de campos importantes porque tenemos aquí el cuándo se ha creado,
en qué carpeta se ha creado, el formato, la altura, el ancho.
Tenemos ya un thumbnail y todo.
Esto también es bastante útil porque fijaos que también si por lo que sea queréis mostrar
alguna cosa en pequeñita, pues tendríais este thumbnail.
Pero este no es el thumbnail inteligente.
Es un thumbnail pequeñito y ya está.
Pero bueno, al menos algo es algo porque no tenéis que esperar nada.
Pero lo más interesante realmente es el public ID.
Porque con este public ID vamos a poder hacer un montón de cosas y transformaciones interesantes
utilizando un método para simplificar todo.
Entonces, voy a este detail object y tal, lo podemos dejar así.
Por ahora vamos a dejar esto así, pero me voy a apuntar que esto en el .info,
en el edetail.info public ID es donde tenemos la información.
Por ahora, ¿qué vamos a querer hacer?
Ya tengo el evento.
Ya sé cuándo debería viajar a otra página o si fuese con un componente podríamos ver ahí la imagen.
Por ahora yo lo que voy a hacer es tener aquí otra página.
Le voy a llamar foto y vamos a importar el layout de la página.
Y vamos a importar un método que se llama get CLD de Cloudinary image URL.
Y esto viene de Astro Cloudinary barra helpers.
Porque tenemos una serie de helpers o de utilidades por el SDK de Cloudinary
que nos va a facilitar un montón la vida a la hora de tratar con las URLs utilizando la public ID.
Para no tener que tener la URL entera, solo tenemos esa parte.
Y ahí podemos utilizar y añadir transformaciones súper fácil.
Vamos a recuperar de aquí los search params de la URL de Astro.
Esto sería como la parte en el servidor que podemos recuperar la petición.
Vamos a recuperar la idea.
Searchparams.getID
Esto es de la plataforma web.
Esto no es de Astro.
Si la idea es null, pues nada, hacemos un redirect a la página principal.
Y si no, vamos a transformar.
Vamos a recuperar la URL con get CLD image URL.
Le decimos que el source es la idea que le pasamos por la URL.
Así lo que vamos a hacer es que cuando subamos una imagen, vamos a ir a foto, ID y vamos a tener aquí la ID que sería...
Bueno, ahora se me ha olvidado...
Claro, me lo tenía que haber copiado.
Me lo tenía que haber copiado.
Mira, me lo voy a copiar ahora para tener un public ID.
¿Vale?
Aquí.
Este public ID...
Este public ID me lo voy a copiar.
Y así ya tendremos un public ID.
¿Vale?
Aquí.
Y así iremos probando la página web esta.
Así que vamos a poner aquí el layout, title, cloudinary, foto.
Vamos a poner aquí el main.
Tenemos aquí un style.
Y lo más importante es que aquí vamos a mostrar nuestra imagen con la URL.
¿Vale?
Y ahí lo tendríamos.
Y vamos a ver si esto...
Pongo un console.log con la URL también para ver cómo lo está tratando.
Vamos a ver la ID y la URL para que veáis la magia que hace.
Vale.
Estoy aquí.
Si me voy a barra foto ID...
Hostia.
Me lo ha...
Me lo ha quitado.
Me ha quitado esto.
A ver si es porque hay algún error.
Sí, hay algún error aquí.
Si la ID es null...
¡Ah!
Interesante.
Hostia.
Esto es una cosa interesante de Astro.
El tema es que Astro por defecto funciona en estático.
Y como funciona en estático no tiene servidor.
Y si no tiene servidor no podéis leer el Astro URL.
Entonces en la configuración de Astro le tenéis que decir que el output tiene que ser servidor.
¿Vale?
Para que él pueda acceder a la URL aquí porque si es en estático no puede acceder a esto.
Y ahora sí debería poder leer.
¿Vale?
Ahora sí.
Y aquí tenemos nuestra imagen.
Obviamente la imagen está muy pasada de vueltas.
Me voy a copiar el main.
El estilo este.
Esto lo podríamos poner global.
Pero bueno.
Solo para que...
Total.
Solo necesitamos dos páginas.
Lo ponemos por aquí.
Y la imagen para que ocupe menos.
Vamos a poner max width 100%.
Auto.
Y un border radius 12 pixels.
Para que aparezca por acá.
Y aquí la tenemos.
¿Vale?
Aquí tenemos nuestra imagen.
Que ahora le vamos a hacer las transformaciones.
Pero antes.
Fijaos que yo he puesto este console.log de la id y la url.
Y aquí podéis ver lo que está ocurriendo.
La id es midu-images bla bla bla.
Y la url que es lo que me devuelve este helper.
Sería toda la url completa.
¿Vale?
Y fijaos que además le añade el f auto.
Y el q auto.
Q auto es como calidad automática.
Y esta imagen ya está optimizada.
Solo por el hecho de que tiene ese q auto.
Solo con un pad.
Y eso es muy interesante.
Porque fijaos la diferencia.
Entre la imagen que tendríamos aquí.
Que es esta imagen.
La imagen original.
A ver si soy capaz de poner esta imagen original.
Bueno.
Esta imagen no sé si es la original.
Pero vamos a mirarlo en la network.
A ver si es o no es.
No es la original.
Pero se puede.
En algún sitio se tiene que poder.
Se tiene que poder conseguir la imagen original.
Esta.
Aquí pone que es la original.
Copiar y ver.
Vale.
Esta es la original.
¿Vale?
Y si miramos la original.
Si os fijáis aquí.
Ocupa 317k.
Aquí ya.
Solo por el hecho de estar utilizando el helper y tal.
Fijaos.
Que.
Realmente se ve.
Igual.
Se ve igual.
Pero fijaos que la url es un poco distinta.
Porque tiene aquí algunos pads.
Como el q auto.
Que lo que hace ya automáticamente.
Cloudinary.
Es que.
Te transforma la imagen.
Yo había subido un jpeg.
¿No?
O sea.
Un jpg.
Y aquí.
Ya me está devolviendo.
Otro formato de imagen.
Si lo vemos aquí.
Me estaría devolviendo.
A ver si lo vemos.
Tu tu tu.
Protocolo.
Ah.
Content.
No.
Pensaba que en el content type.
Si no.
A ver si aquí.
Content type.
Me está devolviendo un webp.
¿Vale?
Automáticamente.
Ha hecho la transformación.
De forma que tú no te tienes que preocupar.
Tenía un jpeg.
Lo ha transformado.
Y solo con esto.
Ya ha recortado.
Un 50% del tamaño de la imagen.
Sin hacer nada más que eso.
Y fijaos que.
Se ve.
Casi que igual.
O sea.
No se nota absolutamente nada.
¿Vale?
Bueno.
Eso solo para que sepáis.
Por qué es interesante.
Utilizar Cloudinary.
Y sobre todo los helpers.
Que tienen ya este tipo de cosas.
Bueno.
Ya estamos viendo la imagen.
Esto está bastante bien.
Voy a poner aquí.
En pequeño.
Como la URL.
Para que la podamos ver fácilmente.
Y.
Aquí.
Ahora.
Lo que quiero es.
Mejorar el evento.
De forma que cuando subamos la imagen.
Este evento que hemos hecho aquí.
Naveguemos.
A la otra página.
Así que aquí podemos importar.
Una utilidad.
De Astro.
Que se llama.
Navigate.
Que nunca me acuerdo.
Como es.
Astro.
Barra.
Transitions Client.
Ah.
No sé.
Si era.
Ah.
Dos puntos.
Puede ser que fuese.
Si.
Transitions Client.
Vale.
Y lo que vamos a hacer aquí.
Es.
Recuperar.
El Public ID.
Public ID.
De todo esto.
Vale.
Aquí dice que esto no existe.
Porque bla bla bla.
Info.
Public ID.
String.
Suéltame del brazo ya.
Suéltame del brazo.
Este Custom Event.
Esto está mal.
O sea.
Creo que lo está tipando mal.
El ejemplo.
Ahora está bien.
Porque si le pones Custom Event.
No necesitas ponerlo de Detail.
Eso se puede arreglar en la documentación.
Bueno.
Ya tenemos aquí el Public ID.
Public ID.
Y ya aquí.
Pues podríamos hacer.
Navigate.
A barra foto.
ID.
Public ID.
Y ya todo esto lo podemos quitar.
Y así.
Cuando por lo que sea.
Subamos una imagen.
Si nos vamos.
Aquí.
Vale.
Y aquí.
Subimos una imagen.
Vamos a subir otra imagen.
Esta por ejemplo.
Que me parece que.
Que está bastante bien.
Subimos esta imagen.
Cuando termina.
Ya nos lleva a la página web.
Con esta imagen.
¿No?
Ya lo hemos automatizado automáticamente.
Gracias al evento.
Navegamos.
Y tal.
Ahora vamos a hacer que esta imagen.
Le podamos cambiar cositas.
Que le demos ese toque Halloween.
Que es lo que estábamos buscando.
Así que.
Vamos a importar aquí.
Teníamos aquí el Boot on the Heading.
Vale.
Estos dos componentes.
Lo vamos a utilizar aquí también.
Así que.
Vamos a traer esto para acá.
Esto lo ponemos por aquí.
¿Por qué me dice que no lo encuentra?
Dice.
No encuentra el módulo.
Ni sus declaraciones de tipos.
Esto a veces es porque a esto se le va un poco la olla.
Pero.
Estar.
Están.
Porque los acabamos de utilizar.
O sea que no me.
No me.
No me asustes.
Vale.
Vamos a poner un header.
Vamos a poner el header.
Aquí.
Con.
Contrast.
False.
Otra vez.
Y aquí.
Vamos a poner.
Selecciona.
El tema.
El tema.
Lo que voy a querer poner aquí.
Básicamente.
Son tres botones.
Es que.
Puedas elegir.
Qué es lo que tiene que crear la imagen de fondo.
Vale.
Vamos a poner.
Que.
Una clase.
Para poder añadirle luego un evento.
Vamos a ponerle que topic.
Por ejemplo.
Un fantasma.
Vamos a utilizar el icono del fantasma.
Esto se tiene que renderizar.
Como un botón.
Porque por defecto.
Se renderiza como un anchor.
Esto es una cosa de la catálogo de componentes.
Y el color del botón.
Va a ser brand.
Y vamos a añadir aquí.
Por ejemplo.
Añade fantasmas.
Vale.
Añade fantasmas.
Lateral de la cadena.
Aquí.
Esto.
Me la ha liado parda aquí.
Aquí.
Vale.
Añade fantasmas.
Lo mismo vamos a hacer también con zombies.
Y con diablos.
O demonios.
Vale.
Vamos a poner.
Raw zombies.
Vale.
Y esto va a ser zombies.
El ghost.
Esto está utilizando tabler icons.
Este catálogo de componentes utiliza tabler icons.
Así que podemos buscar aquí.
Por ejemplo.
Grave.
A ver si tiene una.
Este.
Este tiene buena pinta.
Este me gusta más.
Grave 2.
Así que utilizáis este nombre.
Se lo pasáis en el icono.
Y ya aparece el icono automáticamente.
Lo cual está bastante bien.
Y aquí el último vamos a poner.
Que sea débil.
Vale.
Vamos a buscar.
Creo que hay débil.
Creo que no hay.
Inferno.
666.
Pentagram.
Ojo.
Pentagram.
Mira.
Perfecto.
Pues vamos a poner el pentagrama.
Vale.
Obviamente esto es porque Halloween.
Vale.
No es que estemos llamando a nadie.
El diablo.
Vale.
El diablo.
Muy bien.
Estos tres botones.
Vamos a hacer que tengan su funcionalidad.
Vale.
Aquí tenemos el header.
El header.
Voy a ir comparando esto.
Luego compararemos.
Añadimos una cosa para comparar la imagen esta.
En dos sitios.
Por ahora voy a ponerle una idea que sea image.
Y ahora simplemente vamos a poner un script.
Donde va a ocurrir un poco la magia.
Vamos a añadir también los botones.
Document.
Query.
Selector.
All.
Todos los botones.
Const.
Buttons.
Y vamos a iterar todos los botones.
De forma que cada vez que se da un clic.
A cada botón.
Vale.
Vamos a hacer cositas.
Voy a crear aquí una constante.
Topics.
Que va a ser un récord de strings.
Que devuelve strings.
Y por ejemplo vamos a tener todos los temas.
Por ejemplo el tema.
Hemos dicho aquí.
El de los fantasmas.
Bueno.
Por los fantasmas.
Vamos a tener fantasmas.
Pues aquí le ponemos.
El prompt sería add ghost to the background.
¿Vale?
O scary.
Vamos a poner scary ghost.
Scary ghost.
¿Vale?
Vamos a poner zombies.
Add zombies to the background.
Yo esto lo estoy haciendo por hacerlo en un botón.
Pero la idea mejor es que fuese más libre.
Podéis hacer que tenga una historia.
¿Vale?
Podéis generar imágenes de alguna historia.
También.
Eso puede estar bastante bien.
Que la persona tenga que subir una imagen suya.
Y a partir de esa imagen.
Utilizando.
Podéis utilizar otras inteligencias artificiales.
También otras APIs.
Siempre y cuando utilicéis la de Cloudinary.
De alguna forma.
¿Vale?
Lo digo porque.
No os limitéis.
Y penséis.
No.
Solo tengo que utilizar Cloudinary.
Podríais utilizar chat GPT.
Para algunas partes.
Y utilizar Cloudinary para otras.
Podéis generar hasta vídeo.
¿Vale?
Para que lo sepáis.
Porque esto también es interesante.
Entonces podéis subir una imagen.
Que sea vuestra.
Cambiarle el fondo.
Empezar una historia.
O sea.
Podéis hacer un millón de cosas.
¿Vale?
Bueno.
Estos serían como los topics.
Que quiero hacer yo.
Vamos a tener aquí.
Que cada botón.
Pues vamos a recuperar.
El topic del botón.
Get Attribute Data Topic.
Y vamos a tener.
Que si topic es nul.
Esto.
Y ahora.
La URL.
Va a ser.
La que vamos a generar.
A través.
Del source.
Que es.
La idea original.
Claro.
Que esta idea original.
¿Cómo la podemos sacar?
Bueno.
La podemos poner en el main.
Directamente.
Aquí podemos poner Data ID.
Que si no.
Hay que inyectarla y tal.
Es un poco rollo.
Entonces.
Vamos a recuperar aquí la ID.
Con document.
A ver si me lo pone.
Perfecto.
Perfecto.
Y esto como puede ser nul.
Le ponemos el optional chaining.
Y ya está.
Y esto le vamos a poner.
Que por defecto.
Sea vacío.
Y ya está.
¿Vale?
Entonces.
Vamos a tener la ID.
Para generar la URL.
Este método.
Lo tenemos que importar.
Que es el helper.
Que hemos utilizado.
Justamente antes.
Con.
Astro.
Claudinari.
Barra.
Helpers.
Y ahora.
Fijaos.
Que esto es lo más interesante.
Este helper.
Podéis hacer un millón de cosas.
Aquí.
Si le dais a.
Control.
Espacio.
Tenéis.
Que le podéis cambiar.
El aspect ratio.
El contraste.
El color.
El background.
Black white.
Podéis hacer aquí.
Lo que os dé la gana.
Añadir borde.
Podéis distorsionar.
Efectos.
El gradiente.
La gravedad.
Mejorar la imagen.
Pixelar la imagen.
Podéis hacer lo que queráis.
Que os lo va a generar.
Y os va a dar la URL.
Directamente.
¿Vale?
Pero hay una cosa.
Que está muy chula.
Que es la de.
Replace background.
Replace background.
Le podéis pasar.
El prompt.
Que queráis utilizar.
Y os reemplaza.
El background.
Sin ningún problema.
En este caso.
Vamos a recuperar.
De topics.
El topic.
Que hemos seleccionado.
Vamos a hacer.
Que la imagen.
Para que se note.
Que está cargando.
De alguna forma.
Porque la verdad.
Es que tarda bastante.
Vamos a poner.
Que le cambie.
La opacidad.
Un poquito.
Vale.
Esto.
En el caso.
De que no tenga image.
Que a ver.
Esto debería tener.
Ah.
Espérate.
La imagen.
Vale.
He puesto image.
Vamos a poner aquí.
También.
Que si no tiene image.
O si image.
En null.
Entonces reto.
Básicamente.
Para que no me esté dando problemas.
Con esto.
Y quitamos.
La opción de chenny.
Y aquí.
Podemos decir.
Vale.
Si.
La imagen debo tener.
Así que.
Vamos a hacer que.
Image.
Punto source.
Sea la nueva url.
Que hemos generado.
Que nos está generando.
Cloudinary.
Vale.
Hostia.
Mira más fácil.
Image.
Element.
Porque si no.
También se me quejará con esto.
Y esto ya no hace falta.
Que lo hagamos.
Vale.
Vamos a utilizar.
La nueva url.
Además.
Podemos decirle.
Que cuando.
Cargue la imagen.
Y esto es interesante.
Esto.
Es.
HTML.
O sea.
Web API.
Pura y dura.
Vale.
Pero podéis hacer.
Que cuando detecte.
Cargue la imagen.
Pues cambiarle la opacidad.
Vamos a ver si funciona bien.
Porque ya os digo.
Que está un poco experimental.
Y hay un momento.
Que da un error 429.
A veces.
Que es un poco raro.
Pero bueno.
Vamos a ver si.
Si cuela.
Y como estamos haciendo esto.
Para que.
Todo esto.
Funcione.
Correctamente.
A ver.
Aquí.
Esto cierra aquí.
Vale.
Cerramos aquí el script.
Y en los estilos.
Vamos a hacer que esto tenga.
Un transition.
De la opacidad.
3S.
Y tal.
Vale.
Vale.
Vamos a ver como está quedando esto.
Venga.
Tenemos aquí.
Selecciona el tema.
Añade fantasmas.
Grar zombies.
O el diablo.
Vale.
Yo.
Esta imagen.
Es que va a quedar un poco rara.
Creo que esta imagen.
Puede quedar mejor.
Si.
A ver si soy capaz.
De encontrar.
El.
Ta ta ta ta.
La.
La URL.
Vale.
Que entiendo que el public image.
Sería esta parte de aquí.
Puede ser.
Creo que sí.
Vamos a ver si funciona.
Puede ser.
No.
Sí.
Vale.
Pues vamos a añadir zombies.
A ver qué.
Vale.
Le he dado.
Ahora está cargando.
Si no he roto nada.
Pues ahora se supone que está pensando.
Claro.
Lo malo de esto es que.
El problema.
Claro.
Ahora como he cerrado la herramienta de desarrollo.
Pero ahora se supone que está pensando.
Porque está con la inteligencia artificial.
Y tal.
Está generando la imagen.
Y puede tardar un rato en generarla.
Pero eventualmente nos debería dar aquí la URL.
Que esto con la UI habría que mejorarlo un poquito para que mientras se está generando esto.
Pero mira.
La URL se ve.
Mira.
¿Veis?
Ha dado el error este del 429.
Me da la sensación.
423.
Perdón.
Sí.
423.
Igualmente.
Yo creo que es un error.
¿Veis?
Está guapísimo.
Claro.
Yo creo que si entramos otra vez.
Y le doy a agrar zombies.
Ya se ve.
Hay un momento que da ese error 423.
Que igual lo que se podría hacer es.
Oye.
Si el error es 423 y tal.
Reinténtalo otra vez.
Y no muestres el error.
Porque no tienes que reventarlo.
Pero bueno.
Aquí tenemos lo que he hecho.
Con el me do this is fine.
Donde sale el zombie.
Me ha puesto más culo.
Me ha puesto más culo.
Pero bueno.
Aquí tendríamos esto.
Lo mejor de esto.
Otra idea que podéis hacer.
Que además se hace muy fácil.
Que es una cosa que se suele utilizar mucho.
Un componente para comparar.
Por ejemplo.
Me hace mucha gracia esta.
Me gusta un montón.
Hay un web component.
Que lo podéis utilizar también con Ria.
Con lo que sea.
Y que queda muy muy bien.
Lo digo por si tenéis una idea.
Para que lo hagáis.
Este web component.
Se llama 2AppElement.
Y os voy a enseñar como utilizarlo.
Lo vamos a utilizar aquí en un momentito.
¿Vale?
Porque lo que podéis hacer es comparar dos imágenes.
De forma súper sencilla.
Ahora solo tenemos una imagen.
Pero vamos a utilizar este.
Este web component.
Que además lo podéis utilizar en cualquier framework.
Vamos a poner esto dos veces.
Y vamos a poner que este sea el original.
Y esta sea la preview.
Claro.
Ahora nada más entrar.
Pues será la misma.
Pero aquí.
Vamos a generar.
La URL.
Con el getTLD.
Image.
URL.
¿Vale?
Que teníamos esta URL.
Y aquí.
Lo que deberíamos hacer.
Es que.
En lugar de recuperar el image.
Vamos a recuperar la preview.
Y vamos a actualizar siempre.
La previsualización.
Como para comparar.
El antes y el después.
Preview.
¿Vale?
Y tendremos que importar.
Que no se nos olvide.
Importante.
Importar el componente.
El web component.
Hay que importarlo.
Porque eso no se puede utilizar.
Import.
To app element.
¿Vale?
Y así tendrá los estilos y todo.
Entonces ahora.
Si recargamos.
¿Vale?
Ahora los dos son el mismo.
Porque original y preview todavía no he dado.
Pero si le damos aquí.
Fijaos.
Que tenemos este efecto.
Que queda súper súper chulo.
Para que se pueda ver.
Cómo queda el antes y el después.
No me ha hecho más culo.
Sino que yo soy bastante culón.
Por lo que veo.
Pero fijaos.
Que en un momento.
Añadiendo un web component.
Tenemos esta comparación.
Para ver cómo queda el antes y el después.
Podemos ver exactamente.
Cómo.
Sí.
Sí.
Las nalgas son mías.
Las cosas como son.
Soy bastante culón.
Me gusta mi culo latino que tengo.
Pero bueno.
Está brutal.
Porque fijaos.
Qué bien queda.
Que podáis ver la diferencia.
Para que veáis bien el recorte.
Fijaos.
Aquí ha habido un pequeño error.
Pero bueno.
Ha quedado bastante bien.
Aquí a partir de esto.
La idea es un poco lo que vosotros queráis.
Porque podéis hacer lo que os dé la gana.
Podéis darle otra vez a añadir fantasmas.
En este caso.
Pues fijaos.
Que podéis ir guardando.
Por ejemplo.
En la audiencia mexicana.
No digas que eres bastante culón.
Pero ¿por qué?
Pues culón no quiere decir nada malo.
¿No?
Que tiene mucho culo.
Yo soy de mucho culo.
Bueno.
Pues fijaos que ahora.
Este será el original.
Estoy el de añadiendo fantasmas.
Que de nuevo.
Yo creo que aquí.
Vuelve a ocurrir.
Tarda bastante.
Esto es normal.
Pero bueno.
¿Qué le vamos a hacer?
Es que si tiene que quitar el fondo.
Y además.
Tiene que generar la imagen.
Pues es que es normal.
Y veis.
Y da el 423 con este locked.
Yo esto.
Estoy seguro que.
Otra vez.
Reiniciamos.
Le damos.
Es que tarda un rato.
Como que se queda el locked.
Por eso yo creo que aquí.
Habría que como que reintentarlo.
No sé si es un tema de permisos.
No sé si es por el tema.
Que está experimental.
Pero mirad.
Ahora ya.
Ya funciona.
Y ya lo tendríamos así.
Ya tenemos este.
Con el fondo de los fantasmas.
En un momento.
Una vez que ya está generado.
Ya no tarda nada.
Ya es súper rápido.
Y tal.
Oye.
Me encanta.
Que me ha dejado el árbol este.
Más o menos ahí.
Pero que me lo ha.
Me lo ha transformado.
Como en unos zombies.
Y aquí con los fantasmas.
Como.
Bueno.
Tremendo.
El tema.
Cosas que también pueden ser interesantes.
Pensad que tiene que ver con Halloween.
Que tiene que ser algo que de miedo y tal.
Pero también tenéis que utilizar.
O pensar en.
Por ejemplo.
Descargar la imagen.
Compartir la imagen.
Lo que sea.
Podéis añadir.
Una forma.
De descargar aquí.
Deep.
Otro botón.
Me lo voy a copiar de aquí.
Para descargar la imagen.
En otro formato.
Que no era.
El que.
El que se tenía.
¿No?
Pues añadimos aquí un botón.
Vamos a poner el download.
Esto no hace falta.
El icono.
Seguro que hay un botón download.
Lo vamos a utilizar aquí.
Vamos a poner descargar.
En web.
Por decir algo.
¿Vale?
Y este botón.
Lo podéis escuchar.
Download button.
Lo he quitado mal.
Download button.
Document query selector.
Download.
¿Vale?
Esto.
Nos vamos por aquí.
Este URL.
Al final.
No he utilizado para nada.
Pero.
Bueno.
O sea.
Lo vamos a quitar por aquí.
Download button.
Punto.
Atm listener.
Click.
Fijaos.
Que aquí.
Solo con esto.
Ya podríamos hacerlo de la descarga.
Bueno.
Es que claro.
Esto.
Estoy pensando que incluso.
Podríamos hacer de otra forma.
Con la URL directamente.
Pero bueno.
Esta sería una forma.
¿No?
Decir.
Vale.
Pues.
Vamos a cambiarle.
Más que hacer esto.
¿Cómo se puede descargar una imagen?
Tendríamos que crear.
Un document.
Punto.
Create.
Element.
Anchor.
Punto.
HRF URL.
Ad download.
Image.
Web.
Y hacer un click.
Con esto.
Se supone.
Se podría hacer de otra forma.
Porque esto al final.
Lo podríais gestionar.
Que este botón.
Realmente sea un anchor.
Y lo haga.
Pero.
En lugar de WebP.
Vamos a poner AVIF.
¿Vale?
Que es un formato.
Menos conocido.
Y para que veáis.
¿No?
Pues.
Navif.
Le vamos a decir.
Formato.
AVIF.
Y esto.
Pues una vez que lo tenemos por aquí.
Tenemos aquí.
Lo de los zombies.
Le vamos a descargar en AVIF.
Que rabia.
Que se ha puesto la.
Se ha puesto justamente la.
La barra esa.
Padding.
Bottom.
100 pixels.
¿Vale?
Descargar en AVIF.
Y esto.
Pues.
Ah mira.
No me ha hecho lo del download.
Ah.
No funciona el download.
Claro.
No funciona el download.
Porque.
El download.
Solo funciona.
Con URLs.
Que son de tu propio dominio.
Es verdad.
Pero bueno.
Se puede.
Se podría llegar a conseguir de otra forma.
Pero bueno.
Esta sería una idea.
Aquí al final.
Lo que deberíamos tener.
Fijaos.
Que el formato de esta imagen.
Si miramos el formato de esta imagen.
En all.
Vamos a ver.
Que el content type.
Fijaos.
Que es AVIF.
Y solo ocupa 86k.
O sea.
Menos incluso.
De.
Que lo que ocupaba antes.
Y esto lo ha hecho.
Cambiando.
Este parámetro de aquí.
De AVIF.
Más cositas.
Para que tengáis.
Más.
Más contenido.
Interesante.
También tenéis.
Fijaos que el helper.
Lo tenéis de la imagen.
Y también de los vídeos.
Que.
Que está súper bien.
Que también tenéis de vídeos.
Lo malo es que no tiene ejemplos.
Pero los ejemplos.
Solo de la imagen.
Del helper.
De la imagen.
Tenéis un montón.
Eliminar el background.
Cambiar el color del background.
Poner una imagen en el background.
Hacer un crop de la imagen.
Y además.
De forma inteligente.
Veis.
En este caso.
Que está haciendo un crop.
De una parte.
Que es la que tiene sentido.
De la imagen.
En lugar de cualquier cosa.
Generar.
Como.
Hacer que la imagen.
En este caso.
Lo está haciendo.
Como más grande.
Por los lados.
Y se está dibujando.
Con IA generativa.
Esto también lo podéis hacer.
También.
Poner otra vez.
Nuevos colores.
Y le podéis decir vosotros.
Qué colores son los que tenéis que utilizar.
Eliminar cosas.
Por ejemplo.
Si queréis hacer algo fantasmal.
Podríais eliminar cosas.
Y lo podéis utilizar.
Reemplazar.
Por ejemplo.
Pues en lugar de que aparezcáis vosotros.
Que aparezca un fantasma.
O no sé.
Lo que sea.
Lo podéis reemplazar.
También le podéis decir.
Qué objeto lo podéis hacer.
¿Vale?
Cambiar el background.
Que esto es lo que estoy haciendo yo.
Con el replace background.
Podéis hacer filtros.
Por ejemplo.
Si queréis hacer un efecto.
Que sea.
Pues a los Silent Hill.
Que comentábamos.
Aparte de ponerle niebla.
Igual lo podéis hacer.
Con que tenga un poco más.
El grayscale.
Que sea más alto.
O sea.
Podéis utilizar más de uno.
Pixelar.
Tintar.
Podéis.
¿Veis?
Podéis poner más de un efecto.
Sin ningún tipo de problema.
Overlays encima.
Podéis poner hasta texto también.
Veréis aquí.
Text overlay.
Por ejemplo.
Podéis poner.
Touching grass.
Pues esto puede ser.
Buuu.
Lo que sea.
O sea.
Podéis hacer un montón de cosas.
Hay un montón de ejemplos.
Y ahí os podéis volver locos.
Pero lo que os quería enseñar.
Que puede ser muy interesante.
Porque seguramente.
Que queréis que vuestro proyecto.
Se puedan ver.
Todas las imágenes.
Que ha subido el usuario.
Es el hecho de tener.
Esto es una cosa.
Más de astro.
Pero también en Next.
Ideas sería parecido.
Con algún componente y tal.
Es tener una colección.
Que podáis renderizar.
Con todas las imágenes.
Que hemos subido hasta ahora.
Entonces.
Vamos a crear aquí.
Una carpeta.
¿Cómo era?
Collections.
La carpeta.
Hostia.
No me acuerdo si era.
Yo creo que era collections.
Hostia.
No me acuerdo cómo era.
No.
Content.
Perdón.
Que sabía yo.
Content.
Es content.
Config.ts.
¿Vale?
Y ahora aquí.
Lo que podemos es indicar.
La colección.
Que queremos definir.
Definir collection.
Bueno.
Pues la gente de Cloudinary.
En su SDK.
Tiene un.
Assets.
A ver.
¿Qué Cloudy?
¿Cómo es?
CLD.
Assets loader.
Este assets loader.
Que solo indicándole.
Cuál es tu cuenta.
Puedes definir una colección.
Le dices.
Vale.
Voy a utilizar el loader.
De assets loader.
Y aquí le vamos a pasar.
Le podéis pasar.
Opciones.
Por ejemplo.
El límite de imágenes.
Que queréis mostrar.
Voy a poner cuatro.
De qué carpeta queréis mostrar.
Por si no.
Habéis querido mostrar todas.
De vuestra cuenta.
Y solo de una carpeta.
Hemos llamado.
Midu Images.
¿No?
Me parece.
Midu Images.
O Midu Image.
Midu.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Tú.
Dumbu Images.
Aquí exportamos.
Las colecciones.
Que en este caso.
Solo tenemos esta.
Que es.
Images.
O assets.
Bueno.
Vamos a poner images.
He puesto assets aquí.
Pero vamos a poner images.
Y ahora ya que tener la colección.
En la configuración de Astro.
Esto por desgracia.
En la versión cuatro.
Que es la estable hasta ahora.
Está en experimental.
Se llama Content Ledger.
Pero bueno.
Si no.
Dentro de poco.
Le quitaréis esto.
La versión cinco.
pero todavía está en Release Candidate, seguro que nos
falta mucho para que esté ya disponible
ahora ya, con sólo esto
la configuración
os vais al índice
importáis el Get Collection
de Astro y le decís que
queréis recuperar la colección
de Images
y ya tenéis las imágenes
ya tenéis las imágenes, bueno puede ser
que nos falle por la variable de entorno
ahora lo miramos, pero
si ponemos aquí un ul
Images.map
donde tenemos una imagen
vamos a devolver un lead
y aquí podéis utilizar la imagen
con el Image, Source
Image URL, esto es lo típico
pero el SDK
también de Astro
fijaos que tiene un
componente que se llama
CLD Image, de Cloudinary Image
que lo que podéis hacer es
utilizarlo para cambiar
y ponerle transformaciones
o lo que sea, por ejemplo esto
y aquí veáis
reemplazar el background
ponerle overlays
hacer un crop
cambiar lo que sea
mira, vamos a hacerlo con un crop
para que lo veamos rápido
y así podamos utilizar este
este componente
que es un componente
para no tener que utilizar
el helper
que es como más declarativo
a la hora de
utilizar las imágenes de Cloudinary
entonces aquí
claro, aquí lo que tenemos que hacer es
de cada imagen
tendríamos el image.data.publicid
y esto mismo
podemos sacar
tanto el ancho
width
como la altura
image.data.hide
vamos a hacer el crop
con source true
y ya está
esto
vale, el parámetro
de image
tiene un tipo
any
yo creo que eso
es porque no me está poniendo
los tipos de TypeScript
y seguramente
debería ponerlos
a ver si lo genera
debería generarlos
el SDK
o sea, no es cosa nuestra
sino que es el SDK
que este image
nos lo debería tipar
automáticamente
a ver si lo tipa
no lo tipa
tiene un any
debería tiparlo
este config
aquí
cuando hacemos el loader
y tal
ves que pone
ah, collection config any
hostia
me sorprende
porque entiendo
que este debería
nos lo debería tipar
igual no lo tienen
no lo tienen hecho
en el SDK
pero deberían hacerlo
si no lo deberíamos hacer
nosotros a mano
pero es un poco más rollo
porque si lo tienen
tipado internamente
pues ya funcionaría
bueno, pues el tema este
con estas imágenes
si volvemos a nuestro proyecto
vale
nos está petando
porque nos dice
ves
nos dice que no
nos falta la API key
que lo vamos a hacer ahora
nos falta
en el environment
nos falta la API key
que ahora lo ponemos
y también
a ver si
va a petar también
porque nos debe faltar
el secret también
seguramente
y el
ah, bueno
como no he puesto nada
de API key
no le gusta
el API key
lo único que tenéis que hacer
os vais a la consola
de Cloudinary
vale
os logueáis aquí
iniciáis aquí
esto
y ahora os enseñaré
un proyecto
que podéis intentar hacer
que está muy chulo
y que creo que se puede hacer
sin problemas
con Cloudinary
vale
en ajustes
tenéis aquí la parte
de API key
la API no solo funciona
para esto
lo podéis utilizar
para un montón de cosas
voy a pegar esta mismo
vale
ponemos esta
y todavía me faltará
seguramente utilizar
el secret
así que vamos a ver
vale
Cloudinary
API secret
el API secret
importante
fijaos la diferencia
entre public
Cloudinary
y public
porque puede ser público
no hace falta
que sea secreto
pero este
sí que tiene que ser secreto
entonces
esto
no voy a dejar
que vuestros ojos
lo vean
aunque os agradezco
mucho vuestro interés
de hecho
te envía un email
te envía un email
para verlo
la madre que lo parió
te envía un email
para verlo
la leche
increíble
a ver
si puedo probarlo
con esto
vale
hostia
no está mal
de esto
no lo había visto yo
que te llegue a enviar
un email
para ver el secret
no está mal
vale
pues
esto ya lo tengo
lo puedo quitar
por aquí
a ver
en la variable
en torno
ya la he quitado
también
que no la liamos
la habéis visto
en mis ojos
la habéis visto
en mis ojos
vale
vamos a levantar
ahora
vale
ahora parece
que sí que funciona
volvemos
al localhost
image.map
is not a function
vale
pues nos falla
¿por qué nos falla
esto?
¿por qué nos falla
image.map?
o sea este
ah
porque getCollection
es asíncrono
ojo
que esto es asíncrono
hostia
¿por qué se queda
azul?
no sé por qué
hostia
se ha quedado penchado
se ha quedado penchado
mi
Visual Studio Code
vale
a ver
es que no me está haciendo
no me está haciendo el cambio
ahora sí
ahora sí
pero no
ah sí
ahora sí que me lo está mostrando
vale
y aquí tendríamos
todas las imágenes
que ya he hecho
que he creado
pues ya las teníamos por aquí
podríamos
claro
he puesto aquí
el crop
y tal
pero esto
me imagino que no debe funcionar
porque le he puesto el crop
pero le he puesto exactamente
como lo mismo
¿no?
o sea le he puesto
la misma
la misma
alto
y todo esto
entonces vamos a poner un display grid
aquí
para que quede con las
bueno
así está bien
con un gap
¿vale?
y ya lo tendríamos
ahora sí
ahora sí que está haciendo
el crop
¿vale?
ahora sí que lo está haciendo
vamos a poner esto menos
que tampoco hace falta
que sea tan bestia
esto por aquí
bueno
vamos a poner que sea
un fr
para que sean dos
y esto
vamos a poner así
pues aquí lo tendríamos
¿vale?
estas son las imágenes
que hemos subido
lo más fácil incluso
ahora que ya tenemos
las imágenes
podríamos añadirle
un enlace
para entrar
a cada una
de las imágenes
que hemos subido
y poder cambiarlas
por ejemplo
pues otra vez
volver a esta imagen
¿vale?
aquí carga la imagen
tendríamos que hacer
un aspect ratio ahí
darle al grower zombies
para que genere otra vez
pues una imagen
con mis zombies
y yo corriendo
¿vale?
mira que me ha generado
como bueno
me imagino que era
la que ya estaba generada
y o sea
que esta es la que ya
hemos hecho antes
¿no?
con la de los fantasmas
y el grower zombies
sí esta es exactamente
la misma que hemos hecho antes
pero podríamos volver
para atrás
pillar esta
que esta
entiendo que la url
es diferente
y me debería generar
algo distinto
no sé si siempre
genera lo mismo
sería muy raro
sería increíble
ah sí
siempre genera lo mismo
porque la idea
es diferente
a ver
vamos a subir otra imagen
porque aquí tengo esta
mira esta
esta que parece
que me estoy peleando
de verdad
¿vale?
esto obviamente
tiene que generar otra imagen
o igual es porque
el prompt
es el mismo
vale vamos a ver
vamos a ver
que me genera ahí
¿vale?
se arregló el tipado
sí
se arregló el tipado
¿por qué?
¿por qué se arregló el tipado?
se arregló el tipado
porque estaba
devolviendo yo mal
no tenía la wait
no estaba esperando
la promesa
y ahora el tipado
está correcto
¿ves?
data
con toda la información
que te devuelve
esto es lo que tiene sentido
no tenía sentido lo otro
eso era porque
era un error mío
pero fijaos que ahora sí
tenéis perfectamente tipado
cada una de las imágenes
qué información
va a devolver
mira aquí tenemos ahora
corriendo de otros
de otros zombies
¿vale?
bueno pues aquí tendríais
un ejemplo
de un proyecto
que podríais hacer
pero hay más ideas
¿vale?
por ejemplo
una idea muy chula
es un
Scary Story Generator
como este
que utiliza inteligencia artificial
me gusta hasta
este efectillo
y que podéis crear
como un cuento
o vídeos
para YouTube
para TikTok
para la social media
en la que al final
podéis
no tanto
no hace falta
que sea un vídeo
completo y tal
sino que sea como
hacer transiciones
entre vídeos
ya os digo
que entre las demos
que hay
yo me he enfocado
mucho en las imágenes
porque los vídeos
tardan demasiado
pero fijaos que los vídeos
hay un montón de cosas
que podéis hacer
¿vale?
que es tremendo
¿eh?
o sea
podéis hacer
bueno aparte de hacer
croppings
y cosas así
podéis hacer generación
de vídeos también
o sea
podéis generar vídeos
que esto es una cosa
que normalmente
pues no se ve tanto
lo malo
que puede tardar minutos
¿qué es lo que os recomiendo yo?
lo que os recomiendo
es que si vais a utilizar
el tema de los vídeos
¿vale?
que os recomiendo
que
que tardéis
o sea
que hagáis vídeos
muy cortos
que no intentéis
hacer vídeos
muy largos
y cosas muy complicadas
que no abuséis
de ello
o más bien
que intentéis
hacer animaciones
entre tres imágenes
por ejemplo
el Sky Story Generator
este
una cosa que podéis hacer
si os fijáis
son imágenes
estáticas
que al final
lo que tienes
es un audio
encima
que tienes
una transcripción
transcripciones
y tal
también lo podéis
hacer aquí
incluso podéis
hacer capítulos
pero transcripciones
¿veis?
esto de introduction
podéis hacerlo
también lo podéis hacer
con Cloudinary
así que
todo este tipo de cosas
¿ves?
transcripciones
este tipo de cosas
lo podéis hacer
con vídeos
pero cuidado
porque los vídeos
tardan muchísimo
en generarse
y puede
puede ser un poco
bluff
el hecho de tardar ahí
que te dé un time out
que tarde demasiado
que no se vea
la información
así que
bueno
le podéis echar un vistazo
o
una imagen estática
esto
esto es lo que yo creo
que es súper interesante
el hecho de
tenéis una imagen estática
y hacéis
este tipo de animación
que es algo parecido
a lo que hace este
fijaos que hace
una animación muy lenta
de unas cuantas imágenes
y hace esta animación
entonces
a lo mejor
generáis la imagen
con la inteligencia artificial
y el vídeo
con esta animación
con Cloudinary
¿vale?
no hace falta
que utilicéis Cloudinary
para todo
¿ok?
es súper importante
pero
podéis utilizar
una ya
para generar la imagen
y Cloudinary
para generar el vídeo
un poquito
¿ok?
pues este tipo de cosas
que lo tengáis en cuenta
para mezclar
y que no
no estéis tirando
vais a poder ir viendo
qué es lo que funciona mejor
en cada una de vuestras cosas
si no
pues podéis hacer
imágenes
que sean
como felicitaciones
de Halloween
de
sube tu foto
y te creo
una postal creepy
para que puedas enviar
a tus amigos
o puedes hacer
algo que sea
sube la foto
o elige
la mascota
y te lo transformo
en un monstruo
yo que sé
todo lo que
se os pueda ocurrir
que tenga que ver
con Halloween
que sea algo de miedo
o lo que sea
le podéis
echar un vistazo
si necesitáis ideas
si queréis
participar
con más gente
o lo que sea
lo que os recomiendo
también
es que vayáis
al Discord
y que ahí
pues busquéis
compañeros o compañeras
que habléis de ideas
que habéis tenido
por ejemplo
el Midugato
transformado
en fantasma
es que lo podéis hacer
porque podéis
detectar
cosas
eliminarlas
de una imagen
con imágenes
con inteligencia artificial
podéis detectar
cosas
e eliminarlas
de la imagen
o cambiarlas
y podéis detectar
que una cosa
que esté ahí
podéis decir
vale pues
quiero que esto
lo elimines
pero luego te lo voy a añadir
con más opacidad
entonces puedes
fantasmizar
imágenes
o sea
podéis hacer un montón
de cosas
que se os ocurra
de nuevo
podéis mezclar
inteligencias artificiales
yo creo que ahí
donde tenéis
un montón de poder
el cómo podéis utilizar
Cloudinary
con otras
inteligencias artificiales
pues generar
una historia
con ChagPT
y luego hacer
algo así
para darle
ese momento
que sea
más
impresionante
pero ves
lo de generar vídeos
es que tarda demasiado
es que puede tardar
unos cuantos minutos
yo es que creo
que esto de slide duration
3 segundos
es que tendría
que haber sido menos
cuanto menos tarde
cuanto menos tiempo
generes
mejor
porque cuanto más
le pones
obviamente más tarda
así que
os voy a dejar
toda la información
para que participéis
en el Discord
¿vale?
todas las URLs
todos los premios
más de mil dólares
en premios
si queréis créditos
si necesitáis créditos
tenéis esta URL
¿vale?
Cloud Create Register
y si por lo que sea
os habéis pasado
con los créditos
y necesitáis más
y tal
yo estoy seguro
que Colby
que está en Discord
y os va a dar apoyo
estoy convencidísimo
que os puede ayudar
¿vale?
para que os lo desbloquee
y tal
tened cuidado
obviamente
que no se os pase
pero
pero ahí lo tenéis
yo voy a subir
este proyecto
a GitHub
para que lo tengáis
por si le queréis revisar
pero no hace falta
que utilicéis Astro
¿vale?
podéis utilizar
Cloudinary
Hackathon
Astro
Example
podéis utilizar
Next.js
ejemplo
para Astro
Hackathon
2024
podéis utilizar
Vue
podéis utilizar
otros lenguajes
de programación
podéis utilizar
un montón de cosas
¿vale?
podéis utilizar
lo que os dé la gana
pero
siempre con los requisitos
que esté publicado
que se pueda visitar
la URL
y que utilice
Cloudinary
de alguna forma
tenéis que estar
registrados en Cloudinary
obviamente
obviamente
así que
nada
que no se os pase
la oportunidad
me parece que es un proyecto
muy bonito
que se puede
o sea
claro
tengo que poner
en el gitignore
gitignore
el .env
.local
no sé si
.env
ah no
vale
no está el .env
vale
add example
vale
publicamos la rama
y aquí
ya deberías tener
el proyectito
vamos a poner aquí
Cloudinary
hackathon
vale
para que
no aparezca
todo el ritmo
y tal
ya tenéis aquí
vuestro código
de ejemplo
pero de nuevo
tenéis un montón
de SDKs
el de Next.js
el de Astro
PHP
Node.js
lo que queráis
empezad a mover
las manitas
tenéis hasta el 22
de octubre
para rellenar
vuestra participación
no lo dejéis
para el último día
lo que podéis hacer
si tenéis claro
ya el repositorio
y la URL
podéis
hacer el formulario
lo enviáis
y luego lo podéis iterar
no lo dejéis
para el último momento
que luego
hay mucha gente
que me escribe
que se queda afuera
que no sé qué
que no sé cuánto
y me sabe muy mal
así que por favor
no lo dejéis
para el último momento
estoy haciendo
el .env.example
para que
tengáis aquí
el ejemplo
de lo que hay que poner
que si no
add
enf
example
vale
y ahí lo tendréis
y ya está
exploration
no lo necesitamos
ahí
todo
espacio
para que
puta
10
que
abaj
y
eso
nar privilegi
se
碰
y
se
agu ze
se
p
lo
simplemente
s
p
ya
o
onder
going