Muy buenas tardes, ¿qué tal? Bienvenido, bienvenida, espero que tengas muchas ganas de mover las manitas y que te vuele la cabeza
porque hoy vamos a hacer la landing de La Velada. Tiene ya una página que es esta de aquí, que no está mal, está bastante chula, o sea, es sencilla
pero hay algunas cosas que a mí no me terminan de gustar, ¿vale? No pasa nada y yo voy a intentar cambiarlas.
Le voy a dar un toque de una cosa, le vamos a dar interactividad, porque una cosa que yo he hecho en falta de la página
es que me encanta lo que es la imagen, cómo están los luchadores y tal, está muy chulo, pero me gustaría, no sé, como que le echo en falta un hover, alguna cosita, alguna caseta le echo en falta.
Hay otra cosa que no me gusta mucho, que es que han modificado el scroll, dejad el scroll tranquilo, el scroll no lo modifiquéis por JavaScript,
da una muy mala experiencia al usuario, funciona un poco raro el scroll, el scroll es el nativo, pero este que hace una cosa rara, no lo hagáis, no lo hagáis,
porque en serio, esto es una experiencia de usuario muy rara, cosas que vamos a hacer, vamos a rehacer la landing, pero ¿qué vamos a cambiar?
Pues yo, por ejemplo, este header lo quitaré, vamos a hacer que solo sea un color, vamos a quitarle el fondo este, a mí no me termina de encajar,
no sé, porque como que se ve de poca calidad. También tarda mucho en cargar ahora porque ya está cacheado, pero fijaos que tarda bastante en cargar.
Vamos a intentar que vaya bastante rápido, porque fijaos en las imágenes lo que ocupan, las imágenes hay algunas de 3 megas, 2,8 megas, o sea, ocupa demasiado.
Vamos a intentar mejorar el rendimiento de la página, optimizar las imágenes, hacer otro tipo de interactividad que tenga un efecto wow.
Vamos a hacer la misma animación, porque fijaos, esta animación está muy bonita y la vamos a hacer también desde cero.
Vamos a tener paciencia, porque es un trabajo muy bestia, va a valer la pena, porque lo que tengo en la cabeza va a ser espectacular.
Pues venga, vamos a empezar con npm create astro latest. Voy a utilizar astro, que es un framework muy, muy simple, que ya verás que vamos a hacer HTML, CSS y JavaScript.
Le vamos a añadir un poquito de JavaScript para cierta interactividad, para que esté bien.
Y porque así vamos a poder añadirte el win muy fácil. Y porque tendremos un entorno de desarrollo, fácil de desplegar y tal.
Pero no hace falta que sepa astro, es que es muy fácil.
¿Qué pasa? Que estáis todos preocupados si es ilegal. Que no es ilegal. A ver, ¿cómo va a ser ilegal?
¿Cómo me vais a hablar de ilegalidad cuando la mitad de vosotros tenéis en vuestros porfolios el típico proyecto que se hace pasar por Netflix?
A ver, nosotros lo que vamos a hacer desde cero, básicamente, es una idea de cómo podría quedar la landing para aprender.
Pero no la vamos a publicar para hacernos pasar, para que la gente compre ni nada.
De hecho, no voy a comprar un dominio, no voy a hacer nada. Simplemente lo vamos a hacer con fines educativos. Punto. Ya está.
Entonces, no me vengáis aquí de que es ilegal y tal. Y luego, entre que me ponéis en el copyright, en vuestros porfolios,
y estáis pillando logos, imágenes, iconos, ilustraciones, y que luego hacéis el proyecto de Netflix. O sea, que no me contéis historias.
Ah, que le cambiéis el nombre a Peliflix. Peliflix. Vale, yo lo voy a cambiar. En lugar de la velada, le voy a llamar, yo que sé, la lelada.
Muy bien. Entonces, ya he ejecutado npmcreateastro.latest para utilizar la última versión. Dice, ¿dónde quieres crear este proyecto?
Lo vamos a crear en la velada del ano. Le puedo llamar la velada del ano. Entonces, ya no me pueden denunciar, amigos.
Ya no me pueden denunciar porque estoy hablando de una cosa totalmente diferente. ¿Ok? Bueno.
Entonces, vamos a dejarlo que sea vacío porque ya veis que va a ser súper sencillo, la velada del ano.
Va a ser un poco raro esto. ¿Que instale la dependencia? Le voy a decir que no, no voy a hacer nada de TypeScript, la verdad.
Ahora, inicializamos el repositorio. ¿Vale? Buena suerte, me dice. Buena suerte.
Venga, vamos a la velada del ano. Pnpminstall. Va a ir que instalamos las dependencias.
Sí, la terminal es warp, pero sí, no he cambiado de terminal desde hace mil años, amigos.
Amigos, que os habéis caído en un seto. Es la misma terminal de toda la vida que utilizo siempre.
No sé si habéis perdido la vista o algo, que no sé primero que me pregunta ya, por la terminal.
Que es la misma terminal que estoy utilizando de hace diez mil millones de años.
¿Vale? Vamos a ejecutar pnpm, que es como una alternativa de npm.
Astro, add, telwin. ¿Vale? Para instalar telwin.
Y no siempre se necesita utilizar este tipo de cosas, de utilizar que si React y todo esto.
O sea, es interesante utilizar React muchas veces, ¿eh?
Pero en este caso, pues no lo necesitamos.
Y va a quedar, vamos a añadirle incluso interactividad.
Vamos a hacer un efecto muy chulo de hover con las imágenes.
Mira, ya tengo aquí Astro. ¿Vale? Ya tenemos aquí nuestra página.
Vamos a poner en el page, en el index, perdón.
Index. Vamos a poner que esto sea en español.
No le voy a instalar ni el linter, fíjate.
Ni el linter le voy a instalar.
Por ahora quitamos esto.
Vale, esto del generator lo quitamos.
Aquí le vamos a poner la velada del ano, no, del año.
Un proyecto de Ibai Llanos. ¿Vale?
Esto solo para que se vea bien el título.
La velada del año.
Como lo más interesante, al menos para empezar, es el tema de las imágenes.
Para guardar las imágenes, claro, necesito guardar todas las imágenes.
Fijaos que esta es una imagen, la de Coscu.
Tendría que guardarlas todas.
Voy a hacer un truquillo.
Pero yo voy a hacer un truco un poco guarro que voy a ver si funciona.
Igual no funciona, quién sabe.
Mira, nos vamos a ir a la consola.
Nos vamos a ir a la consola y vamos a detectar todas las imágenes.
Mira, 23 imágenes.
Y para cada imagen vamos a sacar de forma...
No hace falta que sea asíncrono.
Así que vamos a tener aquí cada una de las...
Ajá, aquí.
Y vamos a poner un console.log del image.
Esto que voy a hacer es muy pirata, ¿eh?
Pero aquí aprendéis de todo.
Aquí aprendéis de todo, ¿vale?
Aquí aprendéis de todo.
Bueno, vamos a utilizar...
Vamos a utilizar...
Fijaos, ¿ves?
Con esto podemos recuperar bastantes imágenes.
La velada...
No sé si las podremos recuperar todas.
No sé si me dará algún problema.
Yo creo que...
Quiero pensar que sí.
Para descargarlas, lo que vamos a hacer es...
Primero, de cada imagen vamos a recuperar el source.
Entonces ponemos image.source.
Vamos a ver si pongo aquí un console.log de source.
Vale.
Venga, aquí tendríamos ya todos los source de todas las imágenes.
Perfecto.
Es muy pirata lo que voy a hacer, ¿eh?
Es muy pirata, amigos.
Pero es que no puedo ir una a una.
Entonces, como buen programador, automatizamos las cosas.
Voy a crear para cada imagen un elemento anchor.
Y de cada elemento anchor le voy a poner un atributo.
Primero, que sea el href con el source, que es la imagen.
Y luego un a.setAttribute.
Y le vamos a poner que tenga el download.
Y el download le ponemos...
Le deberíamos poner el nombre de la imagen.
Pero claro, el nombre de la imagen...
Piensa.
Vale.
Vamos a hacer source.split.
¿Por qué hago el punto?
Porque el punto...
El punto me va a dejar la extensión por un lado.
Y por otro lado...
Ah, es que estoy pensando...
No.
Que tendría que ser con la barra.
Y quedarnos con la última, ¿no?
O sea, que tendríamos que hacer .split.reverse.
Y quedarnos con la primera.
Que sería el filename, ¿no?
El filename.
Y voy a ver si esto ha funcionado.
¿Vale?
Vale.
Entonces, ya tengo aquí...
Con todo esto ya tengo los archivos.
¿Veis?
Entonces, ahora el filename...
Del filename hago el split.
Es muy pirata.
Pero es que filename.split con el punto.
Y con esto nos quedamos con la primera parte, que es el name.
Y ahora sí que podemos hacer esto para crear cada uno de los elementos.
Que aquí utilicemos el name.
Y a cada anchor que voy a crear le vamos a poner...
Vamos a hacer un click.
Esto puede salir bien o mal.
Vamos a ver.
¡Ya está!
Ya está.
Mira, descargar varios archivos.
Vamos a darle permitir.
Vamos a crear aquí la velada images.
¿Vale?
Aquí la velada images.
¿Vale?
¿Guardar?
¡Hostia!
Este me lo está volviendo.
Vale.
Shell out en la velada images.
Seguro que hay otra forma.
Seguro que hay páginas que lo hacen.
Seguro que hay extensiones.
Pero soy programador y quería programármelo yo.
¿Vale?
Entonces.
Pero...
¡Ay, no!
¿Qué pasó?
¿Qué pasó?
¿Qué pasó?
No.
Cambié el foco y se me quitó.
Cago en la leche.
Ah, bueno.
Mira, al menos.
Al menos ahora son...
Bueno.
Pues voy a darle aquí todo el rato.
¿Dónde?
Ah, no.
Es que lo tengo en el escritorio.
Bueno.
Aquí tengo algunas imágenes.
O sea, llega un momento que para.
Ahumoranz.
Vale.
Quitamos la de Coscu.
Encima voy a ir arreglándole Germán.
Y velada dal.
¿Esto qué es?
Esta es como el logo.
¿Veis?
No me los ha pillado todos, ¿verdad?
Mira, vamos a poner aquí una carpeta.
Le vamos a llamar boxers.
Y vamos a mover esto por aquí.
¿Falta alguno?
Ya nos iremos dando cuenta cuáles son los que nos faltan.
No pasa nada.
Por un lado, vamos a tener un header, un main y un footer.
¿Vale?
O sea, esto va a ser la estructura básica.
Yo voy a empezar por el main porque en el main es donde vamos a ver todas las imágenes de los luchadores, ¿vale?
Dentro del main tendremos una sección.
Vamos a poner aquí una sección.
Y esta sección será el pedazo de slider de los luchadores que a ver cómo nos queda.
A ver cómo nos queda.
¿Qué tenemos que hacer?
Primero todas las imágenes.
Las imágenes, como lo tengo pensado, quiero copiarme este diseño.
O sea, este diseño está muy chulo, la verdad.
Vamos a intentar hacer algo similar.
Vamos a poner aquí un style is global para tener unos estilos globales.
Y le vamos a poner algún, no sé, algún color, ¿vale?
Vamos a poner body, background y vamos a poner 1, 3, 1, 3, 1, 3, 1, 3.
¿Eh? ¿Eh? ¿Eh? ¿Hola?
Ahora.
Vale.
Entonces ya tendremos el color oscuro.
Dentro de la sección vamos a tener dos dips porque uno irá a la izquierda y otro irá a la derecha.
Y dentro pondremos las imágenes.
Vamos a hacer seis imágenes por seis.
¡Qué rabia esto!
Que no me hace el salto de línea automáticamente.
Y de cada luchador, pues vamos a ver este...
No sé quién son.
No me sé los nombres.
Vale, este es coscu.
coscu.png.
Vamos a hacer que vaya de arriba a abajo, ¿no?
O sea, que el primero quede más a la izquierda.
Vamos a poner aquí una clase.
Por ahora le voy a poner un z index 0, pero ya veis que este tiene más z index que el siguiente y que el siguiente, ¿sabéis?
Entonces esto tendrá que ser como coscu es el que más tiene, luego mayichi, creo que se llama, va así.
O sea, debería ser así para que quede como uno encima del otro, para que quede así perfectamente.
Vale, a ver, a ver.
Entonces tenemos mayichi, creo que es, mayichi.png.
Luego tenemos a luzu, uy, coscu.
No, joder, ¿quién es este chico?
Mira que me suena el nombre, ¿eh?
Espero que me perdone si alguna vez, si alguna vez me lo encuentro, que me perdone.
A ver, vamos a...
Germán no es, papi Gaby.
Viruz, eso, Viruz.
Pero veis, Viruz no me lo ha pillado.
El Viruz este no me lo ha descargado.
No sé por qué, no sé por qué, la verdad.
Vale, tenemos viruz.png.
¿Cuál es el siguiente?
El siguiente...
Hostia, no sé quién es este chico.
Fernan Flo, Fernan Flo.
Este tampoco lo hemos pillado.
A ver.
Ojo, ojalá pudiera hacer eso.
No puedo.
Fernan Flo.
Vamos a tener que pillar todas las imágenes.
Fernan Flo.
Una vez que pillemos las imágenes ya, flo.png.
Habrá pasado lo menos, lo más mecánico.
La otra es la Rivers, ¿no?
Esta Rivers, pero luego está la otra que también se llama Rivers.
¿Por qué se llama?
Ah, mira, la Rivers.
O sea, hay una que se llama Rivers y otra la Rivers.
La Rivers.png.
Voy a poner aquí los salt, que lo vamos a utilizar después, cuando hagamos el efecto del hover,
que va a estar súper chulo.
No sé si Fernan Flo es todo seguido.
Me lo voy a imaginar.
Si no, luego me lo decís, ¿vale?
La Rivers, ¿vale?
Y aquí, ¿quién es la última persona?
La última persona es este chico, Papi Gaby.
Ah, mira, Papi Gaby sí que lo tenemos.
Papi Gaby.
¿Vosotros conocéis a toda esta gente?
Es que mucha gente.
Papi Gaby.
No lo digo con acritud, sino que me sabe mal, que es que no los conozco porque son un montón.
Son un montón.
O sea, hay algunos que sí que me suena, pero hay algunos que no tengo ni puñetera idea.
Ahora, el lado derecho.
Entonces, aquí, vamos a ver quién es este chico.
Luzu, Rivers, Germán.
O sea, este Germán.
Vale, el primero es Germán.
Germán.
Vale.
¿Esta chica quién es?
Amouranz.
Joder.
Amouranz.
Menudo nombres también.
Amouranz sí que lo tenemos aquí.
Amouranz.
Shelao.
Shelao.
Shelao.
Vale.
Shelao.
¿Quién más tenemos por aquí?
Este, ¿quién era?
¿Este era Viruz?
No.
Es que se parecen.
Es Coscu.
No, Dios.
Es que no los reconozco.
No sé quién es eso.
Luzu, eso.
Luzu.
Es que son muchos.
Luzu.
Pero, ¿cuántos streamers?
¿Cuántos streamers hay?
Luego, Rivers.
Esta sí que la conozco.
Y la última persona, este es el Coscu, porque lo he visto ya por descarte, porque creo
que lo he visto unas cuantas veces ya.
Ah, no.
Coscu no es.
Me cago en la leche.
Coscu era el otro.
A ver.
A ver.
Decidme el nombre.
Ampeter.
¿En serio?
Ese chico es Ampeter.
Vale.
Gracias.
Gracias.
Gracias.
Vale.
Ya está.
Ya está.
Ampeter.
Ampeter.
Venga.
Ampeter y Ampeter.
¿Ok?
Lo hemos conseguido, amigos.
Lo hemos conseguido.
Parecía que no, pero lo hemos conseguido.
¿Ok?
Lo hemos conseguido.
Obviamente, esto ahora se debe ver horrible.
Ah, vale.
Porque, además, todo esto está dentro de la carpeta Boxers.
¿Vale?
Boxers.
Venga.
Ya tenemos ahí nuestra pedazo de imagen de nuestros boxeadores.
Unos a la izquierda, otros a la derecha.
Perfecto.
Pues, lo que queremos hacer ahora es, a ver, la sección.
Ya le voy a poner una idea para saber que esto es de boxeadores.
Esto lo usaremos después en el JavaScript.
Ahora no nos vamos a preocupar.
Y en el CSS, primero, vamos a ver.
Primero, vamos a utilizar un flex y justify between para separarlos cada uno a un lado.
Voy a utilizar un relative porque dentro vamos a utilizar positions absolute.
O sea, seguro.
Y desde aquí voy a estilar las imágenes ya.
Voy a decirle deep image.
Y que las imágenes sean absolute.
Porque las imágenes, claro, para poder ajustarlas un poquito a la izquierda y tal,
esto lo vamos a tener que hacer.
Y como todas queremos que se queden abajo, pues, pondremos que todas tengan el botón 0, ¿vale?
Para que se queden abajo.
¿Qué más necesitamos?
Aparte de las animaciones.
Las animaciones las haremos después.
Necesitamos que todas las imágenes también tengan, se ajusten al ancho que le pongamos.
O sea, le vamos a poner la altura.
Porque si os fijáis, la altura de cada uno es diferente justamente para hacer como este efecto.
Vale, pues, vamos a hacer que tengan un ancho automático.
Y dependiendo de la altura, cada uno se ajustará a una forma diferente.
Y ahora vamos a poner aquí que tenga un H screen para que se ajuste a todo el alto.
Para que esta sección ocupe todo el alto.
Porque me gustaría que ocupe todo el alto.
Y nos vamos a quitar este header que a mí me molesta un poco.
O sea, ahí todo, no sé, es un poco raro.
Pero sí que dejaremos la separación, ¿vale?
Debajo le pondremos un borde que casi no se vea para separar con la siguiente sección.
Y ya está, ¿vale?
Ahora seguimos estilando.
Pero al menos esto, bueno, al menos ahora se quedan todos en el mismo sitio.
Algo es algo.
Ahora vamos a movernos al DIP y a todas las imágenes.
El DIP.
A ver, el tema del DIP.
El DIP es...
Todos tienen que ser relativos.
O sea, estos dos yo creo que tengan relativos.
Vamos a decir que ocupen todo el ancho.
¿Vale? Todo el ancho.
Y la gracia va a estar en cada una de las imágenes.
O sea, cada una de las imágenes, por ejemplo, el cosco está a la izquierda del todo.
Y vamos a poner que tenga todo a la altura.
Pero a partir de aquí vamos a tener que hacer que cada uno se vaya ajustando.
Por ejemplo, este...
Ahora lo hacemos a ojo, ¿eh?
Luego lo arregla.
Mayichi, que esté a 5% de la izquierda y que la altura sea un 80%.
Y a partir de aquí jugamos con todos los valores.
De hecho, voy a poner por ahora esto así en todos para que me sirvan de guía.
¿Vale? Vamos a hacer algo así.
Mira, ya me lo está formateando esto.
Pero para que me sirva de guía.
¿Vale? Vamos a ver cómo va quedando.
Vale, ya veis.
Obviamente todavía queda, pero ya veis que aquí tenemos un poco el estilillo.
Ahora solo falta que todos estos también hagamos un poco esa caída hacia abajo.
Ahora a partir de aquí podríamos probar 15, 25, Mayichi 5, 15, 25, 30, 35.
Yo qué sé.
Ahora lo probamos, ¿eh?
Ahora lo probamos.
Bueno, ahora veis que ya está como el estilillo este de un poquito más salido y tal.
A ver, ya veis que no queda del todo bien.
Yo creo que del 15, o sea, 5, 15 y 25, aquí hasta aquí lo veo más o menos bien, ¿no?
5, 15, igual incluso un poco, no, 5, 15, este me parece que tendría que estar, que creo que es el chico este.
Vale, es la chica, ¿no?
35 y 45.
No, esto sale demasiado, pues 40.
Yo qué sé, algo así.
Y ahora cada uno, pues tendremos que ir bajando, yo qué sé, 80, 75, 80.
Vamos a probar, 75, 70.
Y ahora probamos de que vayan quedando bien.
Si no quedan bien, pues yo qué sé, ya iremos ajustando, 70, a ver, 70, vale, 75.
Este es 80, pues este es 75.
Este es 70.
Este es 68, porque los últimos no bajan tanto.
Y este es 65.
Ya está, ¿no?
O sea, ¿bien o qué?
¿Qué os parece?
¿Está bien o no?
A mí me gusta, ¿eh?
O sea, además yo quiero que se vea más el cuerpo, ¿ok?
Me gusta que, porque aquí fijaos que, no sé, me gusta más que ocupen más espacio porque vamos a poder seleccionar cada uno.
Entonces, pensad que queremos que seleccione y que el espacio que quede sea menos.
Entonces, yo creo que más o menos lo podemos ajustar.
Por ejemplo, este ha quedado un poquito alto.
Bueno, pues podemos ir ajustando para que no quede tan alto.
Por ejemplo, este, pues un poquito más pequeño, ¿vale?
Este queda un poco más pequeño.
Pues así quedaría un poco la cosa.
Podríamos sacar un poquito...
El chico este, por ejemplo, ha quedado un poco ahí el Fernanfloo.
Tendría que salir un poco más, ¿sabéis?
O sea, se puede ir ajustando, ir jugando...
Ay, perdón, este no es.
Este no es.
¿Este quién era?
Vale, este era este.
O sea, el siguiente.
Claro, esto debería ser 28.
O sea, ir jugando lo podríamos hacer.
Pero bueno, tampoco quiero llegar al pixel perfect.
¿Con qué funciona así?
Lo bueno es que ahora que tenemos esto, ahora que tenemos estos,
estos nos podrían servir para los otros.
Porque nos lo podríamos copiar.
Por ejemplo, bueno, este es muy fácil porque este sería write 0 y h full.
O sea, este es el más fácil.
¿Veis?
Ya tenemos este aquí.
Y esto lo podríamos copiar, por ejemplo, el segundo.
Yo me imagino que las alturas serán muy similares.
Lo único es que uno serán a la izquierda y otro, pues, a la derecha.
Mira, ya tenemos ahí a un moranz.
Así todo el rato.
O sea, copiamos lo mismo.
Una vez que tengamos bien los valores, podríamos hacer esto que sea un array
que automáticamente...
Mirad, qué bien.
Que va quedando esto maravilloso, joder.
Pensaba que nos iba a costar más esto y no nos está costando tanto.
Seguro que luego nos encontramos otro problema que nos va a costar más.
Pero bueno, este creo que hemos superado aquí rápidamente el tema de demostrar los luchadores.
¿Vale?
Este, ves, este sobresale demasiado, me parece.
Bueno, vamos a ver cómo queda el último, ¿no?
Que es este, si no me equivoco.
Ah, nos quedaban dos.
O sea, que este era el último.
Ponemos aquí write 40, h63.
¿Vale?
Y se ha quedado aquí la reverse, se ha quedado aquí a saco, ¿sabes?
Ay, qué risa.
Se ha quedado aquí que os revienta a todos.
La reverse los revienta a todos como una...
Qué risa.
Ay, qué risa.
Bueno.
Vale, ¿dónde está la reverse?
O sea, es esta, ¿no?
La reverse y reverse.
Vale.
Bueno, pues con esto ya tendríamos, ya tendríamos esto.
Ojo, que ha quedado bastante bien, ¿eh?
Ojo, que ha quedado bastante bien.
Que esto pinta, esto pinta chulo.
Este pinta chulo.
Como sé que una de las cosas que os gustan mucho son las animaciones, vamos a hacer rápidamente las animaciones.
Porque esta animación, sinceramente, está muy chula.
Está muy chula.
Me gusta mucho.
Y la vamos a hacer.
Así que vamos a añadir, os voy a enseñar una biblioteca de Tailwind.
Que os juro que es la hostia.
Es la hostia para esta.
Bueno, el responsive, fijaos en una cosa.
Para hacer el responsive rápidamente, el truquillo que podríamos hacer aquí sería hacer algo así.
¿Sabes?
Decirle, ocupa solo la mitad de la pantalla.
Porque así llegará un punto que da un salto.
¿Veis?
Y ya está.
Y esto es muy parecido.
O sea, alguien me dirá, ay, no sé qué.
Esto es muy parecido a lo que tienen.
A ver, habría que ajustar alguna cosa.
Por ejemplo, esta gente casi no se le ve.
Se le podría poner la altura fija.
O que tenga un aspect ratio.
Se le podría poner un aspect ratio.
Pero que no es muy diferente a lo que ya tienen aquí.
Por ejemplo, ya veis que se quedan bastante pegados y tal.
Que podremos, mira, lo hacemos así.
Y ya más o menos, ya lo tenemos.
O sea, podríamos ajustar la altura para que quede el aspect ratio más o menos normal.
Bueno, os voy a enseñar una librería de Tailwind que os va a cambiar la vida.
Os va a cambiar la vida, os lo aseguro.
Pero mirad, vamos a utilizar Tailwind Animated.
Ojo, que lo que estamos haciendo hasta ahora solo hemos hecho...
Es esta, ¿no?
Sí.
Es esta.
Guau, chaval.
Guau, chaval.
Está muy chula esta biblioteca de Tailwind.
Está muy chula.
Y vamos a hacer la animación que tienen ellos con CSS.
Y tan fácil que vais a decir, madre mía.
Primero, ¿cómo se instalaba esto?
Que no me acuerdo cómo se instalaba.
Tenemos que instalarlo, eso seguro.
¿Vale?
En PM Install.
Vamos a instalar esto por aquí.
PNP me install.
Ajá.
Tailwind Animated.
Y esto es de desarrollo.
Es una dependencia de desarrollo, por eso le ponemos la D mayúscula.
Esto es un plugin.
Vámonos aquí.
Tailwind Config.
Plugins.
Ponemos esto por aquí.
¿Vale?
Y ya con esto lo único que tenemos que hacer es reiniciar, por si acaso.
Tailwind CSS Animated es un plugin que te permite hacer animaciones súper chulas y súper rápidas con Tailwind.
Y tienes diferentes, pero lo mejor es que tienen este Playground donde las puedes ver y donde te ponen aquí a la derecha.
¿Veis?
Aquí a la derecha tenéis los estilos que os tenéis que copiar.
Por ejemplo, si le cambiáis la duración y le ponéis un delay de 500 y le cambiáis el ISA, ¿ves?
Va cambiando las cosas.
Si le dices que tiene que ser infinita, pues cambia aquí también la cosa.
O sea que súper chula, súper fácil de utilizar.
Y fijaos, mira, la animación que hace esto, que está muy chula, que va de izquierda a derecha con Fading, la tenemos aquí.
Es que es esta.
Es esta.
Pero tiene más duración y el delay lo usaremos, pero para otra cosa.
Sería algo así.
Es esta.
Es esta.
Así que ahora que tenemos esta animación, podemos copiarnos todo esto.
Nos vamos aquí.
Y claro, esto tiene que ser en todas.
Así que vamos a utilizar esta técnica para que sean todas las imágenes.
Y vamos a decir...
Porque yo creo que esto funcionará.
Yo creo que sí.
Si no, ahora lo miramos.
Si no, ahora lo miramos.
Vamos a hacer que sean todas las imágenes.
El tema es que vamos a tener que cambiar el delay.
Y eso es lo que me preocupa un poco.
A ver, ¿esto qué hace?
Esto yo creo que no lo necesitamos.
Me parece a mí que no lo necesitamos.
Esta es la duración de la animación.
Este es el delay.
El delay...
Yo no sé si el delay nos va a dar problemas si lo pongo.
Yo creo que me va a dar problemas.
Por ahora lo voy a quitar.
No lo voy a poner.
Porque va a entrar en conflicto, ¿sabes?
Si cada uno tiene que tener un delay diferente.
¿Vale?
Vamos a dejar esto así y vamos a ver cómo queda esto.
A ver...
Ah, he cerrado esto.
Ah, mira, ya está.
Vale.
Obviamente hace la animación, pero no es exactamente como la queremos.
¿Por qué?
Claro, porque este hace fade right.
Claro, cada uno va a tener que...
Vamos a tener que poner esto a nivel de cada uno de los dips.
O sea, aquí tendríamos que ponerlo aquí.
Y esto serían todas las imágenes de este dip.
Hace el fade right.
Y estas de aquí hace el fade left.
Va para la izquierda.
Vale.
Vamos a...
Nos vamos poco a poco.
Ahora el tema sería evitar, ¿no?
O sea, que haga un delay.
Porque fijaos que es uno, tal, tal.
Entonces vamos a hacer...
Ahora aquí está el tema.
El tema está.
Cada uno tiene que tener un delay diferente.
Por ejemplo, este tendría que ser animate delay.
Y este sería después de 300 milisegundos.
Este después de...
A ver qué...
Este después de 500.
A ver qué sale.
Autocomplete a veces no le gusta.
Delay.
500, ¿vale?
Vamos a poner el siguiente de 700.
¿Vale?
700.
El siguiente de 1000.
Y el siguiente de 1300 milisegundos.
Por ejemplo.
Vale.
Pero vamos a ver por qué ha sudado de mí.
Porque seguramente entra en conflicto con alguna cosa.
O sea, el animate delay...
¿Lo veis que está ahí?
Está ahí.
Pero, pero...
Está tachado, tío.
Está tachado.
¿Y por qué está tachado?
Animate delay.
Está tachado por culpa, me parece, de este.
De este.
Porque el animation...
Claro, aquí ya está el delay también.
Podemos hacer dos cosas.
¿Vale?
Podemos hacer dos cosas.
Una.
No hacer esto aquí.
Y hacerlo en cada imagen.
Puede ser que esto lo arregle.
¿Sabes?
Si yo hago esto y le pongo el animate delay antes.
¿Veis?
Sí que lo hace.
Entonces, podríamos hacer eso.
Ponerle el delay a nivel de cada una de las imágenes.
A ver.
No es mi favorito, pero...
¡Qué chulo!
¡Qué chulo!
En mi caso, ¿por qué lo voy a hacer un poquito más rápido?
Porque esto también tiene que ver con la experiencia del usuario.
Si tardan mucho en aparecer los luchadores, esto le da la sensación al usuario de que está tardando en cargar.
Entonces, vamos a intentar que vaya lo más rápido posible, ¿vale?
Para que vea a los usuarios ahí a saco, pam, pam, pam, pam, y ya está.
Y luego, aquí también vamos a tener esto mismo que hemos hecho aquí, pues lo vamos a hacer, pero con la izquierda.
Esto lo quitamos de aquí, ¿vale?
Esto lo quitamos de aquí, ponemos esto por aquí.
Aquí tenemos la imagen, a la izquierda, a la izquierda, a la izquierda.
Y ahora le ponemos el delay a cada uno, ¿vale?
Vale, entonces, este no tiene delay.
El último, de 1300.
1300, este animate delay, este era de 1000.
Este era de 700.
700.
Y así, ahora tendremos el animate delay de cada uno.
500.
Animate delay de 300.
Y creo que ya está.
A ver ahora.
Qué chulo, ¿no?
Así que, bueno, al menos ya tenemos esta parte, ¿vale?
Esto sería más de cuerpo completo.
Podríamos cambiarlo, pero a mí me gusta bastante porque justamente ahora aquí nos deja como un espacio en el que podamos...
A ver, los podemos separar un poco más, ¿eh?
Que a lo mejor los hemos dejado un poquito juntos.
Yo creo que está estos...
No sé si...
A ver...
No sé si separarlos un poco más.
20.
Voy a probar, ¿vale?
30.
38, porque cada vez están como un poquito más pegados.
45.
Vale.
Espérate.
Hay alguno que aquí...
Claro, es que esto debería ser 10.
Bueno, 10 no.
Es que esta no está...
Es que esta chica está bastante junta.
Y este también me da la sensación que está bastante junto también.
O sea, que tiene que dejar...
A lo mejor la chica esta sería la que...
Que es la reverse.
La que tenga que tener un poquito más de separación con el otro.
Un poquito más.
Algo así, ¿no?
A ver, que más o menos, ¿eh?
Tampoco...
Vale.
5, 15, 30, 42.
5, 15...
30...
42...
45...
45...
45...
Bueno, más o menos.
Ahora están un poquito más separados, ¿vale?
Vale, vamos a hacer lo del logo, que es un momento.
Y luego hago lo del hover, ¿vale?
Que lo del hover también es interesante.
De hecho, este logo voy a descargármelo.
Porque este creo que no se ha descargado.
Vale.
Este logo...
Vamos a ponerlo aquí.
Logo.
Y lo vamos a poner...
Logo.
Vale.
Que está mal cortado esto.
¿Qué ha pasado aquí?
Bueno, no sé por qué harían esto, ¿eh?
No tengo ni idea por qué harían esto.
Vamos a intentar recortarlo un poco.
Bueno, tiene mucho sentido, ¿no?
Es que, claro, como no se ve mucho hasta dónde llega la sombra,
tampoco me la quiero jugar.
Pero, hombre, al menos recortarlo un poquito.
Mientras...
Bueno, la he liado porque no lo he hecho...
No lo he centrado, tío.
No lo he centrado.
No lo he centrado.
A ver.
A ver.
A ver.
No lo he centrado.
Ahora sí, ¿no?
¿Así?
Más o menos.
Tampoco pasa nada.
Tampoco hace falta que sea perfecto.
Vale.
Pues venga, vamos con el logo.
Para el logo, lo vamos a hacer en el header.
Y a ver.
En el header, pues, otra vez la misma técnica, ¿no?
Un relative.
Porque, claro, vamos a tener que poner el logo ahí en medio.
Podríamos hacerlo de diferentes formas.
Pero yo voy a ir a hacer una absoluta ahí en medio.
Pegarlo.
Primero lo voy a centrar con el left al medio.
Con el translate también para que quede justamente en medio.
Seguramente lo podríamos llegar a hacer de otra forma.
¿Vale?
Pero así me aseguro que queda ahí y luego ya buscaremos alternativas.
Porque mi idea es que veamos la landing entera hecha hoy.
Le pongo un z-index para que quede encima de...
Porque yo creo que a lo mejor da problemas esto.
Flex.
Flex call.
Porque vamos a poner el logo y el título.
¿Vale?
Entonces ponemos primero el logo, luego el título.
Que tenga una separación entre los dos elementos.
Justificamos al centro.
Y centramos.
¿Vale?
Y ahora aquí ponemos el logo con el source.
Que vamos a tener el logo .png.
Que es el que me acabo de descargar.
Aquí podríamos poner el logo de la velada del año.
Tercera edición.
Algo así.
Tenemos el source.
Aquí vamos a poner un class.
¿Vale?
No tengo claro si le vamos a tener que poner el tamaño.
Con el absolute y todo esto.
Bueno, ahora veremos.
Si no, lo pondremos aquí.
Le ponemos aquí un tamaño.
Con la anchura del logo que tiene que ser 64.
¿Cuánto es?
256.
Tenemos que ajustarlo.
Pues seguramente quedará muy grande.
Vamos a poner así.
Ya le ponemos un medio responsive.
No va a quedar bien, ¿eh?
Pero es solo para que ya tengamos unas cuantas cosas.
Y aquí vamos a poner la velada del año 3.
Ah, tengo una fuente que os va a encantar.
Tengo una fuente que he preparado.
Que está buscando, está buscando.
Tengo una fuente que le va a quedar a esto.
Chulísimo.
Ya veréis.
Entonces, centramos esto.
Por ahora voy a poner así, pero ahora le pondremos un gradiente para ver cómo queda esto.
¿Vale?
La velada del año.
Bueno, esto ya vamos a poner el text white.
Vamos a ponerle un font bold.
Vamos a poner...
Es que esta fuente es muy aburrida.
Es que esta fuente es muy aburrida.
Muy, muy aburrida.
A ver si esto lo podemos separar un poco.
Porque yo supongo que esto tenemos que separarlo a lo mejor un poquito más.
Vale.
Vamos a hacer algo chuli.
Mirad, amigos.
Os voy a enseñar la fuente.
La fuente.
Boxing font.
O sea, es que es una fuente de boxeo, tío.
Es una fuente pensada para boxeo.
Pues vamos a utilizar esta fuente.
Y yo creo que vais a ver que queda bastante chuli.
Porque tiene este efecto que está muy chulo.
Está muy chula.
Entonces, es gratuita.
¿Ves?
Licencia personal commercial use.
He estado mirando por ahí.
Se ve que es gratuita.
Pero no está en Google Fonts.
Pero bueno, la he estado buscando por aquí.
Así que vamos a darle y ahora le añadiremos un gradiente.
Me la he descargado por aquí.
A ver si la encuentro.
Que la tenía por aquí preparada.
Mira, sí.
Aquí en Fonts.
Voy a poner aquí Fonts.
¿Veis?
Y ya tengo aquí Boxing Stripe.
Tengo como tres.
Lo malo es que no me ha dado tiempo a optimizarlas.
Pero bueno, luego lo hacemos.
Porque tampoco es muy difícil optimizarlas.
Y vamos a ir aquí a cargar el Fontface.
En los estilos.
Vamos a poner el Fontface.
Y vamos a tener dos fuentes.
¿Vale?
Fontface.
Tenemos, por un lado, FontFamily.
Y tenemos la Boxing normal.
Sí, le vamos a dar Boxing.
Boxing.
Porque luego está la de tiras.
¿Vale?
Fonts.ttf.
¿Vale?
Esto es en minúscula.
¿Ok?
Y le vamos a decir que está en negrita.
¿Vale?
Fontface.
FontFamily.
Y esta es Boxing Striped.
Creo que Striped es con una P.
Sí, creo que rayado es con una P.
¿Vale?
Yorel.
FontBoxStriped.
FontHighVault.
Y ahora tenemos que utilizar en Tailwind.
Le tenemos que indicar cómo cargar esto.
¿Vale?
Así que extendemos FontFamily.
Y vamos a tener aquí la Boxing.
Que va a ser la Boxing Sans Serif, por si no la encuentra.
Boxing Slap.
Slap te voy a dar yo a ti.
Boxing Striped.
Boxing Striped.
Vale.
Así podremos utilizar una u otra de forma diferente.
Y con esto yo creo que tenemos que reiniciar.
Creo.
Y si no, pues así.
La velada.
Vamos a poner aquí FontBoxing.
A ver si ya la ha cargado.
Vale.
Ya la ha cargado.
Y fíjate que tiene este estilo.
Este estilillo así como rayado por dentro.
A ver, pero esta FontBoxing.
Y si le pongo Boxing Striped, ¿cómo es esto?
Pues es igual, ¿no?
La misma.
O me lo estoy imaginando yo.
A ver un momento esto.
Me da a mí la sensación que es la misma.
Me han engañado, ¿eh?
Me han engañado con las fuentes.
Boxers.
No, Boxers no.
Font.
Joder.
Fonts.
Esto.
Striped.
Ah, bueno.
Hostia.
Se ha abierto el...
A ver.
Striped.
Menos la ñ.
Pero la Boxing...
¿Será porque esto...
O sea, esto es minúscula y esto es mayúscula?
Puede ser.
¿Sabes?
O sea, ¿cuál es la diferencia?
Porque aquí entiendo que las de arriba son mayúsculas.
Entonces, si yo...
Ah, porque he puesto uppercase, ¿no?
Claro.
Amigo.
Ahora, tampoco.
No, no entiendo.
La velada del año.
O sea, todas me parecen que tienen las rayitas esas.
Y si lo pongo...
Si le quito y le pongo la velada del año, la velada del año, también me parece que...
A ver si lo he puesto mal abajo, ¿no?
No, no.
Lo he hecho bien, lo he hecho bien.
¿A ver, eso os ocurre?
¿Estás con la striped ahorita?
Ah, ahora estoy con la striped.
Vale, tenéis razón, tenéis razón.
Menos mal que me habéis avisado.
Vale, que le he puesto aquí striped.
Vale, vale, vale.
O sea, que ahora lo veremos, ¿no?
Vale, ahora sí, tenéis razón, ¿vale?
La velada del año.
Y ahí vemos que no tiene las rayitas, ¿vale?
Y si le ponemos el 3, creo que los números.
Puede ser que los números...
¿Ves?
Los números sí que lo tiene.
Vale, pues ya tendríamos esto más o menos así.
Podríamos ponerle, yo qué sé, un span al menos.
Aquí, por si queremos ponerle otro color o yo qué sé.
Bueno, esto ya no nos preocuparemos.
La velada del año 3.
Y el resto a esto vamos a ponerle un gradiente.
Que no se note mucho, no hace falta.
Hypercolors.
¿Hypercolors?
Gradients.
Ah, no me acuerdo si era hypercolors.
Hypercolor, joder, sí.
¿Ves que me sonaba?
Vamos a ponerle uno que sea de abajo a arriba.
A ver, uno como plateado, metálico.
Aquí este dice que es soft metal.
No me queda muy claro que esto sea soft metal, ¿eh?
To bottom.
Algo así.
Bueno, al menos que nos sirva de class, ¿vale?
Vale.
Entonces, si miramos esto, esto, ¿veis?
Está mal.
Porque aquí lo que tenemos que hacer es utilizar, ahora que tenemos el gradiente,
dices, un background, un gradiente que va hacia abajo.
Que va desde este color, vía a este color, hasta este color.
Ahora lo que tenemos que hacer para que se vea bien, porque ves que se ve mal,
tenemos que decirle vg clip text y el texto ponerlo transparente.
Y entonces así sí que se vería así.
Se ve cortado y esto tiene que ver con el line height.
Me parece que tendría que ser relajado, por ejemplo.
No parece que funcione por el relajado.
Pero algo es del leading porque me da la sensación que la altura que tiene no está bien.
Vamos a ver qué pasa con esto.
Vamos a ver la velada del año.
Claro, que están ahí los dos estilillos.
Vale.
No me deja.
¡Quítate!
Quítate en medio momento.
Bueno, aquí está.
Header, tal, la velada del año.
Vale.
¿Qué te pasa?
¿Qué te pasa este span?
¿Qué le pasa?
Ah.
Ah.
Vale.
Yo creo que será el inline block y entonces sí que se verá bien.
Lo raro es que se ve como más muertecilla, ¿no?
Vamos a ver esto.
Vamos a ponerle inline block.
Vale.
Y vamos a ver que yo creo que aquí en lugar de que sea índigo y tal, igual debería ir por blanco para que se note más.
Y aquí a lo mejor tampoco ser tan bestia.
No sé, un gray o algo así.
O sea, lo que quiero es que quede como un rollo metálico o algo así.
Algo así.
Hostia.
¿He puesto ano sin querer o no se ve la ñ?
No se ve la ñ.
No se ve la ñ, pero antes sí que se veía la ñ.
A ver.
A ver.
Un momento, ¿eh?
Que nada quiero liar.
Ahora.
Vale, vale.
Ahora sí.
Ah, mira.
Encima se ve ahí ese stripe.
Bueno, le da un toque.
Bueno, me gusta.
Me gusta, ¿eh?
Me gusta.
Va bien, va bien.
La velada del ano.
Ha sido sin querer, ¿eh?
Es verdad que le faltaría como el fondo es muy plano.
Entonces, vamos a arreglar un momento el fondo.
Y para arreglar el fondo, vamos a hacer algo.
Vamos a ver aquí.
Creo que hay un radial, un radial right top center.
Algo así, ¿vale?
No vamos a hacer este, pero que me sirva de referencia.
Y le vamos a poner aquí.
No sé si en el main.
Sí, le vamos a poner dentro del main o dentro del section.
Es que no sé si ponerlo en...
Creo que lo voy a poner aquí.
¿Vale?
Vamos a utilizar ese de referencia para hacerle un efectillo.
Algo así, ¿vale?
Y ahora miramos a ver cómo queda y lo ajustamos.
Tú, tú, tú.
Vale.
No se ve.
¿Por qué no se ve?
Porque obviamente necesitamos ajustarlo.
Así que le ponemos aquí un relative, aquí un absolute, inset 0.
¿Vale?
¿Vale?
Está feo.
No se preocupen.
Vamos a arreglar esto.
Vamos a utilizar el color que le hemos puesto aquí de fondo para que sea el inicial.
Para que se mezcle mejor con nuestro fondo.
Entonces, el from.
¿Veis?
El from que pone índigo o no sé qué.
Aquí le ponemos nuestro colorcillo.
El via.
Vamos a utilizar algo como más oscuro.
Que es que el oscuro le da como más...
Un buen toque.
Porque es como quedan mejor los gradientes estos.
Como un toque más oscurillo.
¿Vale?
Ahora sí que se nota.
Ahora sí que se nota, ¿no?
¿Veis que aquí como que está más oscuro?
A ver, lo podríamos ajustar un poco para que se note más.
¿Veis?
Ahora se nota más, ¿no?
Yo creo que así le da un toque.
Porque es que si no, queda como un poco raro.
El ID del section está mal escrito.
El ID...
Ah, bueno, boxeadores.
Bueno, no os preocupéis.
Y al final...
Sí, me encanta...
Vale, pues algo así, ¿no?
Que quede más...
Un toquecito.
Porque fijaos la diferencia.
Que si quitamos esto, queda como más aburrido.
¿Veis?
Que queda muy aburrido.
Queda como muy plano.
Entonces, le ponemos esto.
¿Veis que queda como más...
¡Ey!
Le da un toque.
Es que...
Joder, las animaciones estas.
Ah, pero fíjate.
¿Veis que ahora no aparece el logo?
Esto es porque...
Si le ponemos esto como hemos puesto, que sea absolute...
Vale, pues ya está.
Vale.
Venga, que vamos adelantando, amigos.
A ver, que no le gusta Ragnarok.
Vamos a ponerlo un poco más oscuro.
Que no le gusta Ragnarok.
Bueno, pues ya lo tienen más oscuro.
Pero es que oscuro, tan oscuro no se nota, ¿no?
Tanto.
Bueno, pues amigos.
Venga, continuamos.
Que...
Es que quiero hacer una cosa.
Quiero hacer una cosa que va a quedar muy chula.
Y es el hecho de poder seleccionar cada boxeador.
¿Vale?
Y lo vamos a hacer con un hover para que cada vez que selecciones un boxeador, pues haga
como una animación.
Vamos a poner la información en un momento del 1 de julio y todo esto.
Vamos a ponerlo por aquí.
A ver, lo vamos a tener que poner justo debajo de...
En esta sección mismo.
Vamos a poner aquí una idea.
Que aquí vamos a tener la info.
Porque la info luego la quitaremos.
Ya veréis lo que vamos a hacer con esto.
Vamos a jugar otra vez con lo mismo.
Info.
Vamos a poner aquí...
A ver.
Es que...
Podría...
Podría hacerlo bien.
Pero es que sé que me va a llevar muchísimo tiempo.
Entonces, voy a tirar otra vez de absolute.
Me sabe fatal.
Pero es que, claro, como quiero que quede ahí...
Lo siento.
Perdonadme.
No lo hagáis en vuestras casas.
Quiero poner una caja y la quiero centrar y tal.
Como, a ver, tampoco es nuestro proyecto...
A ver, que funcionar, que tampoco está mal.
Que muchas de las cosas que se ven tienen que estar hechas así.
Porque si tenemos las imágenes ahí, que nos ponen una caja ahí en medio.
Claro, para que quede encima, pues algo tenemos que hacer.
Ojo.
La vela de años es un evento de boxeo que se celebra en Argentina.
En el que se enfrentan los mejores claudores de contenido de habla hispana.
Hostia, hija Copilot.
Casi, casi.
No está mal.
No está mal.
Bueno, vamos a ver.
Vamos a poner aquí el 1 de julio.
¿Vale?
Y vamos a poner aquí...
Bueno, ahora no hace falta.
Vamos a poner el Twitch de Ibai.
HTTPS, Twitch.tv, Ibai.
Target, Blank, Rel, No Opener, No Referer.
¿Vale?
Referer, lo he escrito mal.
No, Referer, ¿vale?
Twitch, Ibai.
¿Vale?
¿Vale?
Y podríamos poner lo de comprar entradas también, ¿no?
Comprar entradas.
Yo qué sé.
Que me imagino que es importante.
Así que, comprar entradas.
Comprar entradas.
Que creo que ya se han agotado.
O sea, es que es una cosa loca lo de esta gente.
Es una cosa salvaje.
¿Vale?
1 de julio, no sé qué, no sé cuánto.
Vale.
Está aquí abajo, pero ahora lo iremos arreglando.
Lo iremos arreglando.
Porque he puesto aquí el Absolute.
Que he puesto Absolute...
Vamos a poner Bottom 8 para ajustar esto.
Vale.
Ahora sí que está aquí abajo.
Vamos a decir que esto tenga el Font Boxing.
¿Vale?
Vamos a poner aquí Class Font Boxing.
Y vamos a...
Vamos a ponerlos en una caja.
Porque queda muy pequeño.
Entonces, vamos a poner aquí una caja.
Y de cada uno le pondremos como un colorcito para que quede como separado unos de otros.
¿Vale?
Vamos a poner la caja.
Y esta caja de la Info es la que cuando hagamos hover en los boxeadores vamos a enseñar la información.
¿Vale?
Y así yo creo que va a quedar bastante chulo.
Vale.
Ahora lo vamos ajustando.
No se asusten, ¿eh?
No se asusten que ahora lo vamos arreglando.
Vale.
Vamos con las cajas.
Vamos a hacer la caja aquí y...
Ah, le he puesto el Class.
Que sea px5 y bgblack.
Vamos a ver cómo queda esto.
Esto sería text white, por ejemplo.
Vale.
Vamos a hacer la más grande.
Con text5xl.
Vale.
1 de julio.
Vale.
Bueno, veo que hay algo raro porque...
O sea, esto creo que es algo de la fuente porque veis que deja como más separación.
A ver, vamos a tener que hacer...
Vamos a tener que ajustar.
Esto debe ser algo de la fuente o de la que me he bajado que está mal o algo.
Vamos a tener que hacerlo manualmente que creo que sería algo así, ¿vale?
Incluso lo podemos hacer un poco más grande porque yo creo que se me da el éxito, ¿no?
Claro, cuanto más ajustamos esto...
Vale.
Pues tendría que ser algo así.
Igual ponle un display flex.
Bueno, el display flex ya se lo he puesto, ¿no?
No es el line height porque tiene que ser...
Ah, no se lo he puesto.
No se lo he puesto.
Class flex flex call.
Vale.
Vale.
Ahora lo ajustamos.
Vamos a ajustar el...
Vamos a centrar el texto aquí.
Y esto me lo voy a copiar para este.
Y me lo voy a copiar para este.
Lo que pasa es que este lo vamos a hacer white.
O vamos a hacerlo al revés, ¿no?
O sea, que este sea white, black.
Este que sea black, white.
Y este que sea white y black.
Aunque ahora cambiaremos los colores, ¿vale?
Pero al menos para ver cómo quedaría más o menos.
Vale.
Y ahora vamos a ajustar el de Ibai, ¿vale?
Para que sea más grandecito.
Vamos a tener que hacerlo más pequeño para que quede como más justo.
Porque no hace falta...
Eso, eso, eso.
A ver.
48, 48, 46 píxeles.
A ver, 46 píxeles.
Vale.
Para que quede un poco alineado.
Y no hace falta que esto sea tanto.
Así que vamos a poner un poquito menos.
Vale.
Twitch.
Joder, qué bien queda.
O sea, es que me gusta.
Me gusta cómo va quedando.
Me gusta cómo va quedando.
Vamos a darle un toquecito aquí al Twitch y no sé qué.
Para que esté contento Ibai.
Vamos a poner que su nombre destaque más, ¿vale?
Vamos a poner que su nombre destaque más.
Vamos a poner esto así.
Pam, pam, pam.
Esto lo podríamos poner aquí.
Y como es Twitch, vamos a poner como un text purple.
Purple.
Y ponemos, yo que sé, que quede bastante oscuro este.
Y este un poquito más claro, ¿vale?
Text purple, 300.
Ay, no sé.
No sé si me gusta si hacer esto blanco, entonces, más bien.
O que casi no sea algo así.
Igual algo así, ¿eh?
Para que el Ibai se...
Porque a ver que el par, pero si lo ponemos 400...
Algo así, puede estar bien.
Y a ver qué más.
Bueno, pues ahora con este vamos a hacer las entradas también más grandes, ¿vale?
Text.
Vamos probando otra vez para que quede más o menos, ¿vale?
Algo así, comprar entradas.
Esto no hace falta que sea tanto tampoco.
O sea que esto lo hacemos más pequeño.
Algo, podríamos hacer algo así.
Vale, como estos son enlaces, vamos a hacerle un efectillo...
A ver, tampoco hace falta hagamos el efecto de la vida, ¿vale?
Pero vamos a hacer aquí que tenga un hover y le vamos a poner como un contraste,
como para que se note que...
Scale, 105, Transition.
Y esto también se lo vamos a poner a este de Twitch de Ibai.
Vale.
Veo que no me está haciendo el Scale.
Vale.
Ojo.
Vale.
El InlineBlock.
InlineBlock.
Guau, guau, guau, guau.
Bueno, ya tenemos al menos la información, ¿vale?
Ya tengo la información.
Igual quitamos que se destaque el de Ibai, ¿eh?
Igual sí que hacemos que se quite el de Ibai.
Quería hacer algo diferente con el enlace.
Podríamos volver a probar el amarillo, ¿no?
Que habíamos puesto antes.
Y a lo mejor aquí lo dejamos blanco.
Ya está, no pasa nada.
No hace falta hagamos dos colores.
Y podremos hacer así que vuelva a ajustar otra vez con el amarillo que teníamos aquí.
Y yo creo que aquí sí que puede ser que quede como mejor, ¿no?
Y el comprar entradas, ya que estamos, también lo podríamos o con el amarillo o ponerle otro color o un azul.
Es que el amarillo va a quedar polémico ahí.
Sí, sí.
¿800?
Comprar entradas.
Bueno, no está mal, ¿no?
Es mi color favorito, pero bueno, al menos.
Podríamos cambiar el color de fondo.
También es verdad.
O sea, una cosa que podríamos hacer para que esto, para cambiar más.
A ver, pensad que es que a veces me hace gracia, cabrones, que parece que habéis nacido diseñadores, que estoy haciendo, mucho del diseño estoy haciendo aquí a salto de mata.
A ver, VG Sky 400 y aquí a lo mejor podemos utilizar el black.
Podemos ir probando, pero esto podría ser uno.
Utilizar más un verde.
A ver, si el azul es lo suficientemente oscuro, podríamos utilizar el blanco.
Como este.
Y ya está.
Podría ser uno.
El color del logo.
También lo he pensado, ¿eh?
Que podríamos hacer...
Lo que pasa es que el logo tiene un color muy aburrido, tío.
Podríamos intentar ponerle el fondo este con el logo.
Lo que pasa es que se parece mucho también al fondo.
Es un poco...
Pero bueno, ¿ves?
Es que es muy aburrido.
Muy aburrido, casi no se ve.
Lo podríamos intentar hacer al revés también.
O sea, que esto fuese el white.
Y aquí ponerle el color de este...
De las entradas.
Pero también muy aburrido.
Es que es básicamente lo mismo, ¿no?
Así que...
Lo voy a dejar con...
Creo que me ha gustado más este.
Creo que el que más me ha gustado por ahora sería este.
El que más me ha gustado.
Bueno, ya.
Último intento.
No sé.
No sé.
Algo así.
No sé.
No sé.
No sé.
Bueno.
Mira, lo voy a dejar así y ya está.
¿Veis que me gusta más con el azul y el blanco?
River derecha está muy grande a mi parecer.
Es verdad que está como casi más arriba.
A ver.
Ya os he dicho que podemos estar ajustando las imágenes de la gente.
Infinito.
Último mi ajuste.
Perdón, ¿eh?
Perdón.
Ya está.
La velada del año.
Para que...
Incluso un poquito más.
La velada del año.
Vale.
Vamos a hacer el hover.
Que esto va a estar muy chulo.
Porque vamos a ponernos encima de uno.
Vamos a ponernos encima de uno.
Y cada vez que nos pongamos encima de uno, pues veremos la información de cada uno.
Sí, podríamos poner la caja más arriba.
También es verdad, ¿eh?
Que la he puesto abajo a saco.
Y 48.
Podríamos hacer algo así, más o menos.
Podríamos hacer algo así.
De hecho, estaría bien porque aquí podríamos arreglar algo, ¿no?
Por favor, mito que esté más al medio de la caja.
¡Joder!
¡Qué quejicas sois, Dios mío!
¡Qué quejicas!
¡Qué quejitas!
¡Qué quejicas!
Bueno, vamos a hacer hover y vamos a hacer que se haga un blur de cada uno.
Bueno, es que en mi cabeza suena espectacular.
Vamos a hacerlo.
Vamos a hacerlo.
Vamos a recuperar todos los boxeadores.
Boxers.
Utilizamos document.querySelector.
QuerySelector.
Boxeadores.
¿Vale?
Le podría haber llamado en inglés, ¿eh?
Yo también.
Boxeadores.
Ah, boxers.
Vamos a mover boxers.
Yo creo que boxers significa lo que creo que significa, ¿no?
A ver si me estoy inventando aquí cómo llamar a esto.
Bueno, vamos a recuperar las imágenes boxers images.
Las imágenes de los boxeadores.
Exacto.
Desde los boxers vamos a hacer un querySelectorAll de la imagen.
¿Vale?
Entonces, con esto tenemos todas las imágenes.
Todas las imágenes.
Y ahora vamos a añadir un evento que cuando entre el mouse, ¿vale?
En todas las imágenes, para cada uno, for each.
Vamos a quitar esto.
Vamos a tener la imagen.
Y para cada imagen, addEvaluation.
Listener, mouseEnter o mouseOver.
A ver, puede...
No, no, no.
MouseEnter.
MouseEnter.
O sea, cuando entra el mouse, ¿vale?
Vamos a hacer aquí cosas.
¿Vale?
Ok.
Vamos a ver si esto funciona, más o menos.
Vamos a ver.
Cosas.
Vale.
Estamos haciendo cosas.
Estamos haciendo cosas.
¿Qué tenemos que hacer primero?
Primero, lo que voy a recuperar es la posición.
Porque, claro, cuando señale a...
¿Coscu se llama?
No, no recuerdo cómo se llama.
Xelao.
No, Coscu.
No sé.
Cuando señale a Mayichi, que la conozco, a la chica esta de Mayichi, quiero que también
la chica esta pelirroja también se ilumine.
O sea, quiero que se iluminen la persona y el contrincante.
¿Sabéis?
O sea, quiero que estén como alineados.
Boxers igual calzoncillos XD.
A ver, boxe...
Boxer...
Boxeador.
Hostia.
Boxeador.
¿En inglés cómo es?
Fighter.
Boxer.
¿Por qué me engañáis?
Aquí pone boxer.
¿Cómo se dice boxeador?
Boxer.
Que esto...
Lo suficiente...
Que tengo que pensar, joder.
Que tengo que pensar.
Que esto es complicado, ¿eh?
Primero vamos a recuperar todas las imágenes que me acompañan.
Las imágenes de donde estoy.
Porque es que, claro, aquí he recuperado todas las imágenes.
Dentro de este div tenemos seis imágenes.
Y dentro de este div tenemos otras seis imágenes.
Entonces, yo estoy recuperando todas las imágenes.
Las dos imágenes.
Entonces, quiero saber en qué posición está la imagen que acabo de recuperar.
Entonces, voy a recuperar todas las imágenes de esa sección.
¿Vale?
Section Images.
Y esto será image.parentNode.children.
¿Vale?
No sé por qué esto me ha hecho esta cosa rara.
Pero esto debería tener, ¿vale?
Todos los childElements.
Y tenemos todas las imágenes.
Estos son todos los sectionImages.
Esto lo vamos a convertir en un array.
Y del sectionImage voy a buscar el indexOf de la imagen.
Entonces, con esto ya tendría la posición.
Y ahora podríamos recuperar las dos imágenes.
GetImage.
For the left side and the right side.
¿Vale?
Porque aquí en la posición tendría, por ejemplo, si me pongo aquí, pues tendré cero.
Si me pongo aquí, tendré cero, uno, dos.
Y lo bueno es que una vez que tengo la posición, ya puedo recuperar este y este.
¿Por qué?
Porque vamos a tener aquí el first y el second, o leftImage.
Vamos a poner leftBoxer y rightBoxer.
¿Vale?
Y para hacer esto, vamos a crear aquí un array.
No es así, para nada.
De los boxersImages vamos a acceder a la posición.
Y en el boxersImages vamos a acceder a la posición más todos los boxersImages que tenemos dividido entre dos.
¿Vale?
Entonces, este será el de la izquierda, de la izquierda, porque si, por ejemplo, yo me pongo encima de la chica perroja esta, será la posición uno.
Por lo tanto, de la derecha tendré que acceder, de todas las imágenes que tengo, que son doce imágenes, tendrá que ser la mitad de la longitud.
Será cero, o sea, un, dos, tres, cuatro, cinco, seis, más uno.
Y esa será la posición en la que está la chica esta.
Y así puedo recuperar tanto la de la izquierda como la de la derecha.
No sé si se podría hacer de otra forma, pero se me ocurre esto.
Porque es que así recupero, sin importarme si he hecho izquierda o derecha, estoy recuperando los dos boxes a la vez y ya está.
No sé, ¿eh?
Ahora miramos a ver si esto está funcionando.
¿Te duele la cabeza?
A ver, le puedo intentar volver a explicar.
A ver, que igual me he equivocado, ¿eh?
Igual me he equivocado.
Pero básicamente, mira, os voy a hacer un croquis, tíos.
Esta es la imagen, ¿vale?
Entonces, imaginad que yo selecciono a este chico.
Esto significa que también quiero seleccionar a este chico, ¿vale?
Entonces, ¿cuál es la posición de este chico?
Cero, uno, dos.
Por lo tanto, ¿cuántas imágenes tengo?
Tengo un, dos, tres, cuatro, cinco, seis, siete, ocho, nueve, diez, once, doce.
Si yo tengo las doce imágenes en un array, o sea, tengo, por ejemplo, esto sería la imagen.
Imaginad que, claro, lo tenemos así.
Cero, uno, uno, dos, tres, cuatro, cinco.
Esto será, claro, esto no será las posiciones.
Este en realidad será el seis, siete, ocho, nueve, diez, once.
O sea, este sería once, diez, nueve, ocho, siete, seis, ¿vale?
Este será el seis.
Esta chica es la siete.
Entonces, lo que estoy haciendo es un poco, ¿vale?
Esto sería un poco así, para que entendáis, ¿no?
Tenemos el array donde tendríamos cero, un, dos, tres, cuatro, cinco, seis, siete, ocho, nueve, diez, once, ¿no?
Entonces, lo único que tengo que hacer es, vale, si tengo el dos, quiero recuperar también este.
Por lo tanto, sumo todos los elementos, que son doce elementos, y sacando la mitad...
A ver, lo podríamos hacer de otra forma, pero ahora mismo se me ha ocurrido, la más fácil se me ha ocurrido esa.
Por lo tanto, este chico, este, será la posición ocho, ¿no?
Y ocho es la posición dos más la mitad de todas las imágenes, las imágenes, que es seis, que es seis.
Y ya está, ya lo tendríamos.
Con esto ya lo tendríamos.
Dos más la mitad de todas las imágenes, que es seis.
Y así los podemos recuperar todos.
Ya está.
Ya está.
Un HashMap no es más fácil.
¿Qué HashMap?
¿Para qué quieres un HashMap?
Ya está.
O sea, consumar seis sobre...
Claro, consumar seis.
Claro, consumar seis, porque Boxer Images, porque tenemos doce, pero no es sumar seis.
Tenemos que poner, utilizar justamente el que tengamos.
A ver, otra cosa que podríamos hacer, para que lo entendamos más fácil, podríamos hacerlo al revés.
Mira, podríamos utilizar, o hacemos esto, que esto seguro que funciona, o podríamos hacer, utilizar el punto add.
Boxers Images punto add.
O sea, podríamos hacer esto al revés.
Y claro, no sería menos dos.
Sería la posición...
Claro, lo malo es que Boxer Images no es un array exactamente.
Y no tiene el punto add.
Nada, olvidad esto.
Que con esto funciona.
Con esto recuperamos el de izquierda, porque es la posición que tenemos.
O sea, la posición dos.
Y con este recuperamos el de la derecha, porque es la mitad de todas las imágenes.
Y ya está.
O sea, este sería el ocho.
¿Veis?
Este es el ocho.
Porque es dos más la mitad de todas las imágenes.
Y entonces teníamos el ocho.
Si pasamos este, que este sería el tres, pues ¿cómo tendríamos que recuperar a este chico?
Que sería el nueve.
El nueve.
Este sería el nueve.
Por lo mismo, tres más la mitad de todas las imágenes, que es nueve.
Ya está.
Punto pelota.
Así de fácil.
Así de fácil.
¿Vale?
¿Por qué no usas array from?
A ver, porque ya estoy utilizando aquí array from cuando tiene sentido utilizar array from.
No tiene sentido que me ponga aquí array from otra vez para generar otra vez la imagen.
Es que no tiene mucho sentido.
Es que esto ya funciona.
¿Sabes?
Es que no tiene sentido volver a convertirlo en un array cuando sé que este cálculo funciona.
Y si seleccionas el de la derecha, no pasa nada.
Porque, mira, vale.
Muy buena pregunta, ¿no?
Mira, si yo soluciono el de la derecha, por ejemplo, imagina que voy a poner,
voy a seleccionar a reverse, ¿vale?
A reverse es, empezamos al revés.
Esto es 0, 1, 2, 3, 4.
Esta es la posición 4, ¿vale?
La posición 4 dentro de, porque ya sabéis que aunque se vean visualmente izquierda a derecha,
nosotros lo tenemos de arriba a abajo, el primero es este chico.
Entonces, este es el 0, 1, 2, 3, 4.
Entonces, yo tengo la posición 4, por lo tanto, 4 más la mitad me daría la propia reverse.
Porque la posición 4 esta la voy a utilizar para recuperarle a la izquierda,
porque ya sé que la 4 esta es esta chica de aquí.
Y para recuperar la reverse tendría que hacer 4 más la mitad de las imágenes, que es 6, igual 10.
Y ya está, ya lo tendría.
O sea, sería lo mismo tanto izquierda como derecha.
Claro como el agua, ¿no?
¿Sí?
¿Sí?
Vale, buenísimo.
Pues ya está.
Ya está.
Entonces, ahora que ya tenemos esto, bueno, voy a ver si esto funciona, porque os conozco,
me vais a decir, no, es que esto no funciona.
Voy a ver si este left boxer y right boxer, hacemos un console lock, a ver si funciona.
Vale, yo menuda pedazo de explicación os he metido aquí.
Yo que sé, en mi cabeza suena espectacular.
¿Vale?
Voy a ponerme encima de la magici esta.
¿Vale?
Mira, magici y amorán.
¿Ya está?
Ya tenemos las dos imágenes.
¿Habéis visto?
Magici y amorán.
Buah.
Pues ahora que tenemos esto.
Ya tenemos las dos imágenes.
Es que es una maravilla, JavaScript.
Es una maravilla.
Maravilla, JavaScript.
Que me lo como.
Primero, vamos a ocultar los boxeadores que no interesan.
Para eso, vamos a hacer otra vez.
Vale, casi.
No es exactamente, pero os lo explico.
Vamos a iterar entre todos los boxer images.
Boxers, imágenes.
¿Vale?
Y para cada uno.
Para cada uno.
Para cada imagen de estos.
Vamos a image punto.
A ver, la opacidad no, porque no tiene mucho sentido.
Lo que vamos a hacer es añadirle un atributo con un estilo en línea.
¿Vale?
No va a ser solo el opacity.
Vamos a hacer un poco más.
Podríamos, por ejemplo, ponerle un efecto blur.
Que va a quedar muy chulo.
El efecto blur.
Lo podemos poner como blanco y negro.
También.
Vamos a poner a la mitad de blanco y negro.
Y tenemos que añadirle una transición para que se vea esto bien.
Vamos a poner de un segundo.
Is in out.
¿Vale?
Entonces, ahora, cuando yo me ponga encima de una imagen, se van a ocultar todos.
Pero bueno, no os preocupéis.
Pero al menos para que veamos que esto funciona.
¿Veis?
¿Veis?
Cuando me ponga encima de uno, todos se van a ocultar.
¿Veis?
Haría este efecto.
De hecho, incluso podemos ponerle un poco más de...
A ver, creo que es algo así.
Vale.
Ahora, lo que queremos es que las dos imágenes que hemos seleccionado...
O sea, por ejemplo, ahora estaría encima de este chico.
Por lo tanto, este chico y este chico deberían iluminarse.
¿Vale?
Y los demás se deberían quedar así.
Como para que quede que realmente estamos haciendo lo que estamos haciendo.
Entonces, una vez que hemos ocultado todos...
Y esto lo hemos añadido en todos los...
Todos, incluso los que tenemos seleccionado.
Ahora vamos a poner que el Left Boxer...
Vamos a poner un Set Attribute.
Y vamos a ponerle un estilo.
¿Vale?
Un Style.
Y vamos a poner aquí...
¿Qué podríamos poner?
Lo podríamos...
Primero hacer los más grandes.
Que eso siempre queda súper chulo y le da un montón de...
No sé, parece súper potente.
Vamos a ponerle un poquito de contraste.
Que estas cosas también están chulas.
¿Vale?
Filter.
Ah, es que esto de contraste creo que se puede animar así directamente.
O sea, ya se puede poner así creo.
Contraste.
Escalamos.
Contraste y la transición también.
Por ahora lo pongo con el All para que quede bien.
¿Vale?
Y esto también lo hacemos con el de la derecha.
Bright Boxer.
¿Vale?
¿Vale?
Lo malo es...
¿Veis que hay algunos que no...?
Es que además se hacen demasiado grandes.
Se hacen demasiado grandes.
Eso para empezar.
Y el contraste...
Y esto también está demasiado lento.
Así que esto lo vamos a poner un poquito más grande.
A 300, 300, no sé qué.
¿Vale?
Vale.
El problema está con las imágenes.
O sea, no está mal.
Pero fijaos que, claro, las imágenes las tendríamos que ajustar un poco.
Porque, claro, el tema que veo con las imágenes es que ves esta parte de la imagen.
O sea, tendríamos que hacer que tenga un clip path.
Porque si no, lo que pasa es que la imagen, aunque aquí esto está transparente, claro, no podemos pillar a la chica tan fácilmente.
Pero aún así, ya tendríamos este efecto para que cada uno, cuando tenemos uno u otro, pues fíjate que ya se quedaría uno u otro.
¿Qué os ha parecido?
Oye, está chulo, ¿no?
O sea, ha quedado bastante bien.
No se ven bien las imágenes.
Bueno, pero ¿cómo que no se ven bien las imágenes?
Lo que estamos haciendo es que se haga un efecto blur para que se ajuste en la que estás en el hover.
No es que no se vean bien las imágenes.
Obviamente ahora, cuando salgamos, se debería quitar.
Mira, lo vamos a hacer para que no te puedas nervioso porque la gente tiene unas cosas, no se ven bien las imágenes.
Ay, señor.
¿Qué podemos hacer?
Vale, cuando estamos haciendo aquí esto del ATVListener, podemos hacer image.atvListenerMouseLeave, que cuando salga el mouse, lo podemos resetear.
Podemos decirle, vale, bueno, le podemos quitar la animación.
Remove, attribute, le podemos quitar el estilo directamente.
Quitamos todos los estilos que le hemos puesto en línea y ya está.
Entonces, así.
Ah, bueno, claro, no le podemos quitar todos los estilos que le hemos puesto en línea.
Porque necesitamos que haga la transición para quitarse.
¿Vale?
O sea que in, out.
Tenemos que quitar, ponerle la set attribute.
Claro, no le podemos quitar la transición.
¿Ves?
O sea, esto sería un poco la idea.
¿No?
Que tú cuando estás...
Ahora lo que vamos a hacer es que podremos poner el nombre de cada uno de los luchadores para que aparezca aquí en medio, ¿sabes?
Y aparezca el versus.
Transición más corta.
Claro, la transición más corta sería de esta, ¿no?
Que yo creo que esa es la que a lo mejor queda un poco bestia.
Pero ya lo tendríamos.
¿No?
Ya lo tendríamos así.
Ahora sí que tendríamos la transición sería mucho más corta.
Y lo que estamos haciendo básicamente es que los demás pues no se vean para que justamente el que está seleccionado es el que llame más la atención, ¿no?
Y ya está.
Y ya lo tendríamos.
Pum, pum, pum.
Está muy bueno.
Puedes hacer que se peguen por CSS.
¿Que se peguen?
Es como si le muevo el brazo, ¿no?
Y que se pegue.
Eso es full JavaScript.
Esto es JavaScript puro y duro.
Lo hemos hecho con JavaScript puro y duro desde cero.
Que ya ves tú, nos hemos hecho muchas líneas.
Y estas son las maravillas de saber JavaScript también, ¿eh?
Que para estas cosas son.
La verdad es que queda muy chulo el efecto, ¿eh?
Habría que arreglar un poco con el clip pass lo que podríamos hacer.
A ver, lo voy a intentar.
Clip pass.
Lo que pasa es que esto sí que puede ser un poco más complicado.
A ver, clip pass.
Claro.
Aquí deberíamos, a ver, la vela del año.
Por ejemplo, voy a pillar una de las imágenes.
A ver, uno que sea este chico.
Este chico es bastante problemático, ¿no?
Porque ese chico tiene mucha imagen que es transparente.
Pues una cosa que podríamos hacer con, a ver, ¿quién era ese?
Papi Gaby Ferning Flo.
Este, vamos a recuperar la URL.
Una cosa que podemos hacer aquí.
A ver.
Ahora.
Tendríamos a este chico.
Vamos a ponerle que esto es un polígono, custom polígono.
Y vamos a, claro, necesitamos saber también la...
Claro, necesitamos saber un poco esto, que yo creo que con esto ya estaría.
Claro.
Podríamos hacer esto, esto aquí, esto aquí.
Ah, ¿por qué no se puede...?
Ay, que no se puede mover.
No me digas que no se puede mover.
Ah, ahora.
Vale, vale.
Que digo, coño, que no se puede mover.
Vale.
Podríamos hacer algo así, ¿no?
De decir, ostras, este chico llega...
Sería algo así, ¿no?
Y esto, pues así.
Esto así.
Esto aquí.
Ahora no sé por qué, como no...
¿Por qué no me deja...?
No, ¿por qué no me deja añadir más puntos?
Antes me ha dejado y ahora no me deja añadir otro punto.
¿Qué ha pasado?
¿Qué ha pasado?
Bueno, no sé por qué no me deja añadir más puntos.
Pero bueno, imaginemos que puedo hacer algo así.
Entonces, esto se lo podríamos poner en la imagen.
No sé cómo quedará, pero lo podemos intentar.
¿Cómo se llamaba este chico?
Este chico era...
Es que nunca me acuerdo.
Este chico era...
Vamos a ponerlo aquí.
Coscu no, Mayichi...
Fernanfloo.
Era Fernanfloo, ¿no?
Sí, creo que era Fernanfloo.
Claro, lo malo es que esto deberíamos ponerlo como clase.
O sea, deberíamos poner aquí clip path...
Polígon...
Teníamos que hacer algo así.
O sea, lo que estamos haciendo...
Esto es muy, muy, muy interesante.
Bastante laborioso.
Pero lo que estaríamos haciendo en este caso...
¿Vale?
Sería...
Sería...
Como...
Cortando la imagen.
Para que...
A ver si esto ha funcionado.
No.
No ha funcionado porque todavía me está dando aquí el problemilla ese.
A ver.
Vamos a ver si es que no he puesto bien la clase.
Que también puede ser, ¿eh?
A ver, Fernanfloo.
¿Qué es este?
Vale.
Fernanfloo.
Ya veis que el clip path...
No.
No está aquí.
El clip path.
A ver, lo puedo intentar meter a mano.
Pero esto es porque lo he escrito mal, ¿eh?
Alguna cosa ha hecho aquí que no la ha hecho bien del todo.
No sé si es que tendría que ponerlo todo aquí.
¿Sabes?
Así directamente.
A lo mejor tiene sentido.
¿Vale?
No.
Clip path.
Yo creo que lo he pegado bien.
El clip path.
Y esto, la verdad, es que está muy chulo justamente para este caso.
O sea, es que en este caso iría perfecto.
Pero es que no veo que me esté añadiendo aquí el clip path.
Clip path, clip path, no sé qué.
A ver, si lo pongo aquí a mano.
Si pongo aquí el clip path a mano.
Clip path, polígono.
Igual ahora me decís si no qué es lo que he puesto mal, ¿eh?
Que igual es que estoy poniendo mal el estilo.
Como es un poco problemático el estilillo ese.
Vale.
A ver ahora.
No.
Aunque tengo el clip path ahí.
No me lo está pillando.
Claro, también.
Ay, ¿por qué he desaparecido?
Ah, porque claro, es que esto es el estilo que le hemos puesto ahí.
Y cada vez que le pongo, desaparece.
La madre que lo trajo.
A ver, lo voy a poner aquí mismo.
Ah, vale.
Sí que funciona.
Sí que está funcionando.
Vale, ¿veis que ahora sí que funciona?
Está mal la imagen porque se lo he puesto a todos.
No debería ser así.
Pero fijaos que ahora sí que pillaría exactamente la imagen.
Esto habría que trabajárselo mejor.
Pero fijaos que ahora sí que pilla exactamente todo esto, ¿sabes?
O sea, está detectando.
Si se lo llevase al detalle de hacerlo bien, lo podríamos hacer súper bien, ¿eh?
¿Lo podríamos hacer?
Sí, lo están todos rotos porque lo he hecho a saco, ¿eh?
Lo he hecho a saco.
Es que no sé por qué no me deja, no me deja en el custom polígono este.
Claro, me dice, añade todos los...
Claro, es que no me deja...
A ver, vamos a poner todos los...
Vamos a poner un montón.
Porque es que una vez que seleccionas, ya no te deja...
¿Sabes?
Ya no te deja...
Pero habría que hacer algo así.
Algo así.
¿Sabes?
Tendríamos que hacerlo bien.
Tendríamos que hacerlo bien.
Tendríamos que hacerlo bien.
A ver...
Tendríamos que tener esto aquí, esto aquí, esto aquí, este aquí, este...
Esto aquí, esto aquí, esto aquí...
¿Ves?
Al final me voy a quedar sin puntos otra vez.
Me voy a quedar sin puntos.
Uf, me ha ido justo, ¿eh?
Joder, qué bien lo he hecho, tío.
Lo he calculado, me ha faltado uno.
Me ha faltado uno.
Pero bueno, esta sería la idea.
Esta sería la idea.
Esta sería un poco la idea, ¿vale?
A ver ahora.
A ver ahora.
Para que veáis cómo quedaría esto.
Lo bueno es que como son tantos por ciento, pues lo podemos hacer sin ningún problema.
A ver, vamos a hacer esto.
Vamos a poner este...
¿Quién es este?
Este es virus, este es Fernanfloo, que es el que nos interesa justamente.
Vamos a poner aquí Fernan, ¿vale?
Para que eso lo hagamos aquí, ¿vale?
Punto...
Vamos a poner...
Un momento.
Vamos a poner este estilo aquí.
Y ahora vais a ver que esto queda...
Queda bien.
Vamos a poner aquí punto Fernan.
Y le decimos que Fernan tiene este estilo.
¿Ves?
Ahora no se ve que tenga ningún problema.
Y ahora se puede ajustar bastante más.
Ah, espérate.
¿Qué ha pasado con mi Fernan?
Fernan me ha desaparecido.
Había puesto aquí punto Fernan.
¿Me ha copiado mal esto o qué?
Es que...
Ay, es porque me lo está...
Me está eliminando el estilo.
Cabrón.
A ver, aquí.
Vale.
Ahora sí.
Ahora sí.
Ahora ni siquiera algo he hecho regulinchis, ¿eh?
Porque no me lo está pillando.
Vale.
¿Ves?
Que me lo he cargado...
Me lo he cargado de más.
Me lo he cargado de más.
Me lo he cargado de más.
Pero verse se le ve.
O sea...
Claro, es que habría que hacerlo con todos.
Es que ese es el problema, claro.
El problema es que también tengo que hacerlo con este chico.
Con esta chica.
Habría que hacerlo con todos para que quedase justamente perfecto.
Pero el verlo con esta chica...
¿Veis que ahora puedo ajustar casi exactamente...
Que puedo entrar en el cuello.
Que cuando salgo y tal...
Sí que lo está pillando correctamente.
Pues eso es lo que habría que hacer.
Eso es...
Bueno, eso sería ya de nota, ¿eh?
Sería experiencia del usuario increíble ya.
Sería increíble.
O sea, sería increíble la cosa.
Sería increíble.
Pero esta sería la idea.
Es que fijaos que estoy en el cuello.
Y está haciendo el hover sobre la chica.
O sea que...
Está...
Está brutal.
¿Veis?
Incluso aquí.
Aunque esté encima de la nariz.
Está haciendo el...
A ver, que si queréis...
Yo voy a hacer...
Esto va a ser de código abierto.
Podéis hacer todas las PRs que queráis, ¿eh?
O sea que...
Así lo llevaremos al siguiente nivel.
Lo llevaremos al siguiente nivel si os lo jugáis.
Yo creo que...
O sea, puede hacer un efecto guau brutal, ¿eh?
Brutal.
Un efecto cool que luego se cambia a versus cuando se seleccione un luchador.
Ah, pues sí.
Estaría guapo, ¿eh?
Lo que pasa es que...
Claro.
Molaría que esto diese la vuelta.
Diese la vuelta y fuese un versus, ¿no?
A ver.
Vamos a hacer eso.
Porque eso está bastante chulo.
Esto que has comentado.
A ver.
Al menos podemos cambiar esto para que cada vez que seleccionemos uno, pues tengamos como una...
Que aparezca, ¿no?
De quién es el versus.
Podemos decir ahí versus, no sé qué.
Entonces, vamos a buscar.
Vamos a poner por aquí.
Para anunciar el combate.
ID.
Info.
Vale.
Tenemos aquí el info.
Info.
Esta es la info.
Vale.
Aparte de la info, vamos a poner aquí otro.
Vamos a poner otro.
Que le vamos a llamar combate.
Yo qué sé.
¿Combat?
¿Combat?
Sí.
Combat tiene que estar bien, ¿eh?
Vale.
Combat.
Vamos a hacer los mismos estilos que hemos hecho aquí.
Vamos a copiarle los estilos.
Que igual los podríamos reutilizar, pero es que esto lo quiero ocultar.
Cuando esté el combate, lo ocultaremos.
Así que pondremos esto.
Y aquí dentro vamos a hacer igual que este.
Esto lo tendríamos que hacer en componentes.
Pero como os he dicho que íbamos a hacer HTML y CSS y tal, pues tampoco la quiero liar.
No la quiero liar mucho.
Vale.
Pues pongamos que pongamos esto aquí.
Que esto es Mayichi, por ejemplo.
Mayichi.
Y la otra era...
¿Cómo se llama la peli roja?
Que nunca me acuerdo.
¿Cómo se llama esta chica?
Amoranz.
Esto.
Amoranz.
Amoranz.
¿Vale?
Pues Amoranz.
Amoranz.
¿Vale?
Le vamos a poner un versus.
También aquí en medio.
No sé.
Tampoco hace falta...
Vamos a poner versus.
Y ponemos aquí un class.
Vamos a ponerlo en medio.
Vamos a poner en medio el versus.
Y le vamos a poner un textado.
Vamos a darle un efecto interesante.
Vamos a darle un efectillo interesante.
A ver.
Más que nada para darle un toque.
Para darle un toque.
Esto aquí en medio.
El también.
Translate.
Del medio.
¿Vale?
Y vamos a poner text que sea bastante grande.
No sé.
Ah.
Vamos a poner el phoneboxing este.
Que el phoneboxing es la clave.
Vamos a ponerlo de color amarillo.
Ya que lo hemos hecho.
Que sea bastante grande.
El versus.
Vamos a ponerle absolute.
Porque lo vamos a poner justo en medio.
Y vamos a ponerlo del textado.
El textado.
Estoy bastante seguro que se puede hacer así.
Vamos a ver.
Bueno.
Voy a enseñar primero sin textado.
Y luego hacemos el textado.
Para enseñaros la diferencia.
Estos h2.
Lo vamos a poner h3.
Que tiene sentido.
Vamos a ver como esto queda.
Ahora se verá mal.
¿Vale?
Porque estará encima.
Vale.
No está mal.
Solo que.
Vamos a hacer que este sea black.
Con este white.
¿Vale?
Vale.
Y vamos a separarlos un poco más.
O sea.
Esto se tendría que separar.
No sé si separar con un margen.
¿Sabes?
No sé si poner margen en medio.
Igual sí, ¿no?
Vale.
Vamos a poner un margen en medio.
O sea.
Vamos a poner que esto.
Vamos a poner flex call.
Flex call.
Gap y 4.
¿Vale?
Para que se separen.
Vale.
¿Veis que se separa un poquito?
Vamos a separarlo un poco más.
No os preocupéis con lo del fondo.
Eso lo vamos a arreglar.
O sea.
Ahora estoy haciendo lo visual.
Un poquito del tema.
Vale.
Incluso un poco más.
16.
Yo qué sé.
O 20.
O 24.
Joder.
Con la separación.
Vale.
Algo así.
Esta sería un poco la idea.
Vale.
Entonces.
¿Qué vamos a hacer?
Que cuando aquí vamos a recuperar tanto el info.
Document.queryselector del info y el combat.
Combat.
Ahora tenemos estos dos elementos.
Cuando estemos encima de los luchadores.
Cuando estemos encima de los luchadores.
¿Vale?
Ocultamos la información.
Ocultamos la información.
Entonces.
Info.
Punto.
Set.
Atribute.
Style.
Sí.
Porque hay que hacerlo con una animación.
O sea que perfecto.
Y el combat.
Lo mostramos.
Así que le ponemos aquí.
Uno.
Combat.
Set.
Atribute.
Animación.
No sé cómo se cuenta.
Lo podríamos hacer con clases.
Lo podríamos hacer con clases de Tailwind.
Lo podríamos hacer con clase de Tailwind.
La verdad.
Claro.
Es que con el hecho de no poder utilizar React.
De que lo detecte y tal.
Es un poco más rollo.
Pero bueno.
Por ahora lo vamos a hacer así.
Luego le podríamos dar una vuelta.
¿Vale?
Ahora mismo.
Lo único que me interesa.
Es ver que el combat este.
Que le vamos a poner aquí.
Opacity 0.
Bueno.
Más que Opacity 0.
También tenemos que ponerle Visible.
O sea.
No sé si Hidden.
O algo así.
Porque claro.
Si no.
Claro.
Hidden no lo podemos poner.
Bueno.
Lo voy a dejar como Opacity.
Lo que pasa es que.
¿Vale?
Uno de julio.
Entonces nos ponemos encima.
Vale.
Obviamente también tiene que cambiar el nombre de cada luchador.
¿Eh?
Tiene que cambiar el nombre de cada luchador.
Entonces.
Más cosas que tenemos que hacer.
Aquí tenemos cada una de las imágenes.
Aparte de mostrar cada uno de los luchadores.
Tenemos que poner el nombre correcto.
Cuando ocultamos la información.
Vamos a buscar.
Dentro del combate.
Vamos a buscar.
Combat.querySelectorAll.
Todos los H3.
Todos los títulos H3.
Y.
Vamos a tener.
En la primera posición.
Vamos a tener.
First.
Boxername.
Second.
Boxername.
¿Vale?
Hola.
Mi ídolo de los dólares en las variables es por el recuerdo de Jkery.
A veces me pasa también jaja.
Saludos desde Perú.
Sí.
Yo lo que hago es que las variables con dólar lo hago por Jkery.
Pero también lo hago siempre con los elementos del DOM.
Siempre que recupero un elemento del DOM lo que hago es ponerle un dólar.
Pues si pone en el chat en modo sub pues me suscribo.
¿Ah, sí?
Bueno, pues lo vamos a poner.
Miduo, el verso superpuesto molaba mucho.
Bueno, ahora lo ajustamos.
Ahora lo ajustamos.
Lo que pasa es que necesitamos un poco de espacio ahí.
Pero ahora lo ajustamos.
Solo vamos primero a hacer la funcionalidad.
Y ajustamos ahora un poquito visualmente.
Y así os podré leer.
Que seguro que me vais diciendo por aquí las cosas que...
No va a haber problemas como la Kingsley.
Que no os preocupéis.
Que no va a pasar nada.
Venga.
FirstBoxername.
Entonces, lo que tenemos que hacer es cambiar el FirstBoxername.InnerText.
Y esto lo cambiamos por el LeftBoxerAlt.
Porque aquí ya habíamos recuperado la imagen.
Y en cada imagen le habíamos puesto un Alt.
Que es el nombre del luchador.
Así que mira.
Perfecto.
Porque ahora le vamos a cambiar a cada uno por el boxeador correcto.
¿Ok?
Y ahora, pues mira.
Mira esto.
Está chulo.
Está chulo.
Solo nos falta...
Claro, lo del Clip Path sería de nota.
Pero ya tendríamos esto.
Ya tendríamos esto donde vas viendo cada uno de los luchadores.
También otra cosa que podríamos hacer en lugar de hacerlo así.
O sea, es que hay diferentes formas.
Pero podríamos poner el nombre aquí abajo en grande.
¿Sabes?
Eso también estaría chulísimo.
El hecho de poner el nombre aquí abajo.
Como seleccionándolo como en Street Fighter.
El hecho de seleccionar cada uno.
Y aquí el nombre.
O sea, es que claro.
Yo señalando.
Bueno, aquí abajo.
Aquí abajo.
Aquí abajo el nombre en grande.
Un versus gigante aquí.
¿Sabes?
Un versus gigante.
Y aquí otra vez el nombre del otro luchador.
Es que hay diferentes formas de que lo podríamos hacer.
¿Vale?
Vamos a hacer que sean...
Porque veis que sale el strip solo en algunas.
Vamos a hacer que sean todas strip.
Aquí vamos a poner strip.
Y aquí strip.
Para que queden como si fuesen de boxeo.
¿Vale?
Uno de julio.
¿Vale?
Y así.
¡Guau!
¡Guau!
Vale.
Vamos a mejorar un poco el versus este.
Por si cambio el diseño este.
Lo podríamos intentar.
O sea, son ideas que se me van ocurriendo.
O sea, que...
Vamos a ver.
Vamos a hacer el text shadow primero para ver cómo queda.
Porque creo que le va a dar el toque.
Con mis recuerdos de strip fighter de la época.
Vamos a hacer el text shadow.
Y vas a ver una técnica muy chula que se puede hacer con el text shadow.
Para darle como un relieve con colores además.
Mira.
Tú haces text shadow.
Entonces le dices.
Oye.
Quiero...
Mira.
Algo así, ¿no?
Pero si no me acuerdo mal.
Esto es arriba.
A derecha.
Y esto es la posición.
A ver.
No me acuerdo.
Me he dejado el text shadow.
Ah, no me acuerdo.
Si es arriba a derecha.
A ver.
El offset.
O sea, es horizontal.
O sea, no es arriba el primero.
El primero es el horizontal.
Claro.
Porque si es positivo es derecha.
Pero si es negativo es izquierda.
O sea, horizontal.
Vertical.
Luego el blue radius.
Importante también.
Y luego el color.
El blue radius vamos a tener que ponerlo en cero.
Porque no queremos que se difumine la sombra.
Como le queremos dar un relieve.
Pues queremos que se difumine.
O sea, que no queremos que se difumine.
Entonces, hacemos algo así.
Como dos píxeles.
Dos píxeles.
Y luego el color que queramos.
Se me ocurre un red.
Y lo bueno.
Ah, mira.
Vamos a probar este.
Que se ve muy loco.
A ver qué ha hecho IHackoPilot.
A ver qué ha hecho IHackoPilot.
A lo mejor es una fumada.
Pero un event scroll que seleccione las parejas.
Y las que estén seleccionadas se junten en el centro de la pantalla.
Mucho curro, ¿no?
Hombre, sí.
Mucho curro.
A ver.
Se podría hacer lo del scroll.
Lo que pasa es que no me gusta cambiar el scroll.
Bueno, aquí se han pasado con los colores.
Se han pasado un poco los colores.
Yo, por ejemplo, el red sí que tiene sentido.
A lo mejor el orange.
Pero yo aquí ya pasaría al black.
A lo mejor.
Y algo así.
Algo así ya como mucho.
¿Ves?
Esto me recuerda mucho al versus de Street Fighter.
De hecho, no ha puesto.
Ah, sí.
Sí que ha puesto el black.
Esto me recuerda.
Me recuerda un poco, ¿eh?
Fighter versus.
Me recuerda un poco.
Ah, mira.
Es más rojo.
Es más rojo que amarillo.
No sé por qué lo recordaba más amarillo que rojo.
Pero antiguamente, ¿sabes?
Cuando luchaban y ponía versus, no sé qué.
Bueno, este es azul.
Este es un poco timo.
Pero normalmente es amarillo, naranja.
Ese rollito.
Mira, ¿ves?
Así como amarillo.
Bueno, en este, ¿ves?
Tiene como un relieve mucho más.
¿Ves?
Este será un textado como más movido todavía.
Que se podría mirar también, ¿eh?
Y esto se puede hacer justamente con CSS.
Si lo movemos lo suficiente.
Pero bueno, le da un toquecito.
¿No?
Es un poco diferente.
Un toque diferente.
Quítale el punto al versus.
No sé por qué recordaba que le ponían...
Vale, le quitamos el punto.
Quitamos el punto.
Quitamos el punto al versus.
Versus.
Vale.
Vale.
Añadir ese nudo al versus.
Sí, eso sería ya buenísimo.
Vale.
Claro.
Lo que no sabría cómo podríamos hacer que quede...
O sea, me molaría que las letras del versus sean más grandes.
A lo mejor, porque veo aquí, ¿ves?
Que el versus es bastante tocho.
Molaría a lo mejor...
Creo que no se puede hacer más grande.
Creo que no se puede hacer más grande.
¿Vale?
Bueno, sí que se puede.
O sea, podría quedar así.
Podría quedar algo así.
¿Ves?
Como más bestia.
Versus.
Y así ya.
Teníamos cada uno con Magici versus no sé qué, no sé qué.
Versus.
Tendríamos que trabajar el responsive, ¿eh?
Claramente.
Y los otros de Steve Fighters sí lo tenía.
¿Veis?
Es que me...
Sí lleva a punto.
Es que me suena el punto.
Me suena de que...
Me imagino que dependiendo de cada uno del juego, pues lo tendría o no lo tendría.
Bueno, yo creo que queda mejor sin el punto, ¿eh?
El fondo negro del primer participante se pierde demasiado a comparación del segundo.
El fondo negro del primer participante.
No entiendo eso.
El fondo negro del primer participante.
No entiendo qué quieres decir.
Con el versus tan grande queda mejor con los nombres laterales.
Entonces, bueno, claro, ¿queréis que lo intentemos?
¿Queréis que intentemos haciendo por probarlo en un momento, eh?
Podríamos hacer que aparezca aquí el nombre en grande para que cada uno, ¿sabes?
O sea, el Coscu aparezca aquí abajo en grande y el Ampeter aparezca aquí en grande, ¿sabes?
Que cada uno aparezca como súper en grande.
Ah, espérate, que tengo que quitarlo.
Espérate, cuando hacemos un out, most leave, tendríamos que hacer aquí el info.
Teníamos que set, set attribute, opacity 1 y el combat pasarlo a cero.
Vale, tendría que ser algo así.
Que igualmente...
Vale, ¿veis?
Hay un problema.
Hay un problemilla.
Y es que...
Esto tendría que ser también visibility hidden o display none o algo así.
Vale, ahora sí, ahora sí.
Vamos a poner visibility hidden en el combate.
Lo que pasa es que no sé si esto le quitará el visibility o invisible.
Será invisible.
No sé si le quitará.
Vale, vale, visibility.
Y aquí, en el combat, le ponemos que visibility visible.
Claro, es que lo malo es que creo que le quita el efecto.
Bueno, eso lo podríamos mejorar.
Una cosa que teníamos que arreglar, obviamente, sería el responsive.
Porque ya veis que el responsive no ajusta mucho.
Entonces, a ver, lo voy a ajustar un poco porque me parece que tiene sentido.
Bueno, ¿qué podríamos hacer?
A ver, lo primero, como tenemos ahí absolutes y tal, que esto puede tener sentido...
Vamos a poner aquí esto, que solo sea así.
Claro, justify center, flex call...
Del año.
Claro, todo esto, todo esto de hacerlo así, todo esto tendríamos que hacerlo solo en el caso de...
Algo así, ¿no?
O sea, para empezar.
Para empezar, al menos, para empezar a ajustar esto un poco.
Vamos a poner LG...
LG...
O sea, margin.
Aquí vamos a ponerle un poco de margen.
MT0.
Esto sería cuestión de ir...
Chino-chano.
Chino-chano.
Ir arreglando cada cosa.
Vale.
Luego, esto también tenemos que quitarlo.
Porque, obviamente, esto molesta.
Así que vamos a ver...
Esto lo bueno de esto es que esto puede ser un...
Vale.
Vamos a ver esto un momento.
Vale.
Esto es el combate.
Esto es el combate.
Esta es la info.
Y esto...
Esto es lo que...
Esto es un luchador.
Luchador.
Otro luchador.
Vale.
Claro, como habíamos puesto aquí el border wide, no sé qué...
Esto ya no tiene...
Es que no se ve...
Bueno, sí que se ve un poco.
Pero esto tendríamos que hacer que no tenga absolute tampoco.
¿Sabes?
O sea, esto tendríamos que estar aquí.
El info.
Esto que solo sea cuando es el eje.
Cuando es el eje.
Cuando es el eje.
Cuando es el eje.
Vale.
Para ir ajustando.
Y, además, todo esto...
Claro, esto...
Tendría que estar...
Porque fíjate que se queda aquí pegado.
Esto se queda aquí pegado.
Pero esto puede ser porque...
Porque no está dentro de un div.
O sea, esto deberíamos meterlo en un div.
Vamos a probar en un momento.
¿Vale?
Esto lo movemos a un div.
Para que tenga un bloque.
¿Vale?
Ah, esto es porque tiene un flex.
Claro.
Y el flex, además, tendría que ser flex call.
En todo caso.
¿Vale?
Pues lo hemos roto.
Tenemos el flex call.
Lo rompemos.
A ver.
Esto porque es un flex.
Si lo sacamos...
El tema es que este relative...
A ver.
Vamos a poner aquí el relative.
Y esto lo vamos a sacar de aquí.
Estoy probando, ¿eh?
Para ajustarlo un momento.
Porque si no...
Porque si no queda un poco...
Regulinchis.
¿Vale?
Esta sería un poco la idea.
¿Vale?
Y esto sería aquí.
¿Vale?
Esto todavía nos quedaría ajustar por el medio.
Pero al menos para que no se rompa.
¿Sabes?
Y...
Por ejemplo.
Esto que pasa de esta altura.
Que esto es una altura...
De 40.
¿Vale?
Pues cuando está en MD.
Ponemos la altura.
A lo mejor que sea de 65.
Y para que así...
Pues se vaya ajustando un poco más.
¿Vale?
Así pega este salto aquí.
Que todavía se ve bastante bien.
¿Sabéis?
A ver.
Que lo estamos haciendo un momento.
Pero...
Esta sería un poco la idea.
Luego además hay un padding top por aquí.
Padding top.
Esto también solo debería ser cuando es...
Vamos a poner aquí 4.
Por ejemplo.
Y esto pues ya empezaría a ser un poco más...
Un poquito mejor.
Podríamos todavía ajustar esto para que quede abajo.
O sea que no tiene por qué ser cuando llega aquí.
Todavía.
A ver.
¿Qué habíamos puesto?
LG.
Vamos a poner MD.
MD.
Por ejemplo.
¿Vale?
Pues por aquí podría ir todavía la cosa.
El hecho de que esto se ajuste aquí.
Un poquito aquí.
Y no queda mal que quede un poquito por detrás.
O sea.
Yo entraría en esta página y me gustaría.
¿Sabes?
El hecho.
Y nada.
O sea que ya empieza un poco a ajustarse un poco mejor.
Todavía quedan cosas.
¿Vale?
Pero pensad que lo hemos hecho menos de dos horas.
¿Vale?
O sea.
Que luego hay gente que me dirán.
Eh.
Pero es que no sé qué.
Hombre.
Joder.
Lo hemos hecho menos de dos horas.
A ver.
Esto me gusta que quede así.
¿Sabes?
Como todo a saco.
Y más que se vea directamente lo que...
¿Sabes?
Uno de julio.
No sé qué.
Ahí utilizando todo el ancho.
Me parece como muy bestia.
Pero es que le da un toque muy de boxeo.
Y eso me gusta.
Nos faltarían por hacer cosas.
¿Creéis que continuemos...?
Porque todavía nos faltan cosas de la landing.
Teníamos que hacer la parte esta de aquí abajo.
Por ejemplo.
Lo de abre tu cuenta.
Esto lo podríamos hacer.
Esto.
A mí me gustaría mejorarlo.
Hacer todo esto.
Hacemos toda la landing.
Está súper.
Ya tengo que ya en dos horas no hago todo eso.
Hombre.
Ya.
Hombre.
Es que es bastante cosita.
Lo que hemos hecho.
A ver.
Vamos a hacer rápidamente más cosas.
Va.
A ver.
Ya tengo eso.
Ah.
Os voy a subir esto para que, por si lo queréis hacer, por si queréis continuarla y tal.
Solo que, por favor, no la publiquéis por ahí y no me hagáis una cosa que últimamente
me está haciendo mucha gente, que hay gente que dice, he hecho esto y es lo que hemos
hecho aquí en directo tal cual.
El otro día alguien subió que había hecho la landing de Tesla que dices, pero cabrón,
que te has copiado la, o sea, es la misma landing que hicimos.
Es la misma landing.
O sea, que es que es el mismo código, la leche.
Vamos a, os voy a poner el, por si queréis hacer la PR del clip path, que seguro que lo
podéis pasar súper bien.
Y mientras ahora continuaremos y esto.
La velada landing.
Vale.
La velada landing.
La velada del año landing.
Para fines educativos.
Ok.
Vamos a crear repositorio.
¿Conseguiremos que Ibai la vea?
Yo qué sé.
Que a lo mejor no le gusta, ¿eh?
A lo mejor no le gusta lo que hemos hecho.
Pero bueno, lo hemos hecho con cariño y con amor y al menos el efectillo este.
Está bien, joder.
Está bien.
Está bien.
Ibai.
Echale un vistazo y me dices.
Ah, vamos.
Optimizamos las imágenes.
Optimizamos las imágenes.
Que es súper importante, amigos.
Y no lo hacéis nunca.
Optimizamos las imágenes, ¿vale?
Voy a hacer esto y os enseño a mejorar el rendimiento, que es súper importante.
Get remote at origin.
Aquí, ¿vale?
Branch, ya estamos aquí.
Vamos a utilizar las imágenes, que sé que no lo hacéis nunca y es súper importante.
First commit.
Y si queréis mejorar cosas del responsive y tal.
Le faltan las tres líneas de fondo para darle un plus.
Vamos a mejorar el fondo que tienen ellos.
Son tres líneas.
¿Creéis que quedarían bien las tres líneas?
Es que lo podemos hacer, ¿eh?
O sea...
A ver.
Index, astro...
Son tres líneas que deberían ir...
Yo entiendo que en todo el body...
Podemos hacer aquí tres líneas.
Podemos hacer aquí una línea.
Que...
¿Cuánto debe ser esto?
Más o menos.
Más o menos.
¿Cuánto debe ser esto?
Vale.
Unos 15, 14...
Yo creo que...
Si aquí ponemos...
Dos...
No.
Debe ser más.
Joder.
Es que no sé.
Ahora.
Cuatro.
Screen.
Claro, no.
Esto más que screen.
Vamos a poner full.
Vamos a poner...
Bueno, claro.
Esto tiene que ser más bien...
Que estoy pensando, ¿eh?
Mientras lo hacemos.
El header este da igual.
Porque lo importante está aquí.
O sea, que aquí...
Si le ponemos aquí...
Absolute inset 0...
Bueno, inset 0 ya está aquí.
Y aquí lo que es interesante...
Es que le pongamos un gradiente...
Que tiene que ser como un lililla.
Podría ser algo así, pero al revés.
¿No?
Sería como algo así...
Obviamente...
Habría que ver alguno más oscuro.
No sé.
Vamos a probar este.
No sé si se podría hacer un center.
Vale.
Vamos a ver este que...
Cómo queda.
¿Vale?
Vamos a poner esto por aquí.
Gradia.
No sé qué.
No sé cuánto.
Pa, pa, pa.
Vamos a ver esto.
Vale.
Mira dónde está la línea.
La madre que la parió.
La línea está ahí pegada.
Flex.
Gap X 2.
¿Vale?
Esto yo creo que debería ser menos.
Vamos a poner 2.
Vamos a poner además...
Blur.
Un poquito de blur.
Y vamos a poner...
A lo mejor es que es demasiado fuerte.
Y a lo mejor debería estar un poco más...
Más blanco.
No sé si hacer la...
A lo mejor la hacemos sin blur, ¿no?
Algo así.
Y aquí...
Claro, es que otra vez lo mismo.
Para centrar así.
Ah, qué cabrón.
Esto es porque la imagen no está...
Ah, sí.
No, no.
No es por esto.
Es porque todavía no...
No he hecho esto.
Uy.
A ver.
Uy.
A ver.
La mitad...
Menos la mitad.
Flex.
Vale.
¿Por qué este cabrón?
Se me ha quedado aquí y no centrado.
¿Qué haces?
¿Qué haces tú?
A ver.
Se me ha escapado algo.
Bueno, esto habría que arreglarlo luego en los otros.
Pero primero vamos a mirar esto.
Vamos a poner esto aquí abajo.
Vale.
Vamos a poner esto.
Ta-ta-ta-ta.
Ta-ta-ta-ta.
A ver.
Voy a abrir esto en otra ventana porque si no me va a costar.
Bueno.
¿Qué te pasa?
Vale.
Ah.
Joder.
Ahí estás.
Ahí estás.
Y ahora le quito un poco la opacidad.
Claro.
Es el Justify Center que se me había olvidado.
Center.
Porque esto está aquí centrado pero no está.
Vale.
Y ahora le tocamos un poco la opacidad.
O un poquito más de opacidad.
Un poquito más de opacidad.
Lo que pasa es que no sé si se ven demasiado.
No sé si se ven demasiado.
No sé si se ven demasiado.
Y a lo mejor.
No sé.
Podría ser algo así.
Es que si no se ve demasiado encima del título y todo esto.
No sé.
¿Qué os parece?
Al menos por hacer algo.
El Blur.
¿Le añadimos el Blur?
Vale.
Le ponemos el Blur.
Lo que pasa es que el Blur...
Claro.
Ya se difuminan un poco las Blur...
Blur...
SM.
Que sea muy poquito.
¿Vale?
Muy poquito.
Igual lo podríamos...
¡Ay!
Espérate.
Es que no se lo he puesto al del medio.
Lo podríamos separar un poco más.
Que a lo mejor eso también ayuda.
Y ya está.
O sea.
Podría ser algo así.
Bastante separado.
Y ahí tendríamos las tres rayitas.
Claro.
Ahora que ya tenemos esto.
Igual molaría que fuesen un poco más claritos.
Y a lo mejor podríamos darle un poco más de opacidad.
Para que se vean un poco más.
O igual no.
Igual ya está bien así.
Bueno.
Al menos tenemos las atrás.
Ya.
Yo creo que queda un poco raro.
¿No?
Sinceramente.
No sé.
No sé.
No sé.
Queda un poco raro.
¿Podría meter toda esa programación en WordPress?
Hombre.
Sí.
Todo lo que hemos hecho.
¿Cómo le pones por detrás?
Sin Zindex.
Porque ya está por detrás.
¿No?
Porque hemos puesto los otros.
Y ya está.
Quita el 3 del título de la velada.
Y ponlo en amarillo las rayas.
Pero va a quedar muy bestia.
Con el amarillo.
Va a quedar muy bestia.
Hacer el deploy.
Pero es que hacer el deploy es muy fácil.
Lo hemos hecho tantas veces.
Si yo lo sacaría.
Jugaría con más estilos en las líneas.
Si te doy los créditos.
No hay problema con que haga un fork.
Con mis propias ideas.
No.
No pasa nada.
Pero hombre.
Ya que estás.
Puedes utilizar.
Sin blur y con sombra.
Venga.
Sin blur y con sombra.
Podemos probar.
Drop.
Shadow.
LG.
¿Vale?
Es que el problema.
El problema de las rayas.
Que a ver.
Está.
El problema es.
Que se ve.
¿Ves?
Aquí como que molesta un poco.
Aquí a la vista.
A ver.
Otra cosa.
Podemos hacer la velada del año.
Que también tenga un shadow.
Que haga que se difumine mejor lo del fondo.
Podríamos ponerle alguna cosa así.
Drop shadow.
A lo mejor aquí la opacidad un poquito menos.
Yo que sé.
Algo así.
Y ya está.
Esa podría ser una opción.
Bueno.
Le hemos puesto las rayitas.
Y si no nos gusta.
Luego las quitamos.
Y ya está.
¿Vale?
Ah.
Bueno.
Esto no lo necesitamos.
Oye.
¿Por qué no se han añadido?
Ah.
Sí.
Add rayitas.
Add rayitas.
Vamos a poner.
Add rayitas.
Venga.
Alguien me ha dicho de hacer el deploy.
Y luego me pongo a mejorar las imágenes.
¿Vale?
Que hay que optimizarlas.
Entonces.
Aumentale el blur y bájale la velocidad para que sea como una luz.
Y queda ya.
Genial.
Es que cada uno me dice una cosa.
¿Sabes?
Uno me dice.
Quítale el blur.
Otro.
Añádele el blur.
Eh.
No.
Hace el.
Es como bajo demanda.
¿Sabes?
Cada uno bajo demanda.
Mira.
Le puedo poner el blur aquí.
Básicamente.
Para no poner eso a todas.
Claro.
Si lo hago así.
No se ven las rayas.
Y sería como un.
¿Sabes?
Le subo la opacidad.
Le pongo el blur.
Podría ser algo así.
Lo que pasa es que entonces ya no se ven.
Ya no se ven las rayas.
Nada.
No se ven nada.
Nada de nada.
Podríamos hacerlo así también.
Bueno.
Podría ser.
Podría ser.
Con el blur y la opacidad.
Y ya está.
Vale.
Vamos a hacer el tema de las imágenes.
Hazlo desde cero.
¿Sí?
Lo empiezo a hacer cada uno así hasta el infinito.
Venga.
Vamos a hacer lo de las imágenes.
Que lo de las imágenes es súper interesante.
Es súper, súper importante y súper interesante.
Entonces.
¿Qué pasa?
Que si miramos nuestra página.
Si miramos nuestra página.
Le miramos aquí.
Tú, tú, tú, tú.
Y miramos red.
Y miramos nuestra página.
Fijaos.
Que en nuestras imágenes.
3,4 megas, tío.
3,4 megas.
Que sí.
Que el chico será muy guapo.
Y que.
Y que tiene que verse.
Pero 3,4 megas es una salvajada.
Eso es lo que es.
Una salvajada.
Vamos a optimizarlas.
Podríamos hacer diferentes cosas para optimizarlas.
Una.
Podríamos utilizar webp.
NPM.
No sé si hay webp.
Converter.
Imagining.
Webp.
A ver.
Os voy a enseñar diferentes formas de hacerlo.
Por ejemplo.
Una.
Hay una aplicación para macos.
Lo que pasa es que, claro.
A lo mejor no tenéis macos.
Hostia.
¿Cómo era?
Imagine.
No.
Image.
Optim.
App.
Esta es una aplicación súper chula.
Que la verdad es que se ve súper antigua.
La verdad es que no sé si sigue funcionando.
Porque hace mucho tiempo que no la utilizo.
Pero está muy guapa.
Porque básicamente es arrastrar.
Tú arrastras un.
Un fichero.
Arrastras un fichero.
Y te lo optimiza.
¿Vale?
Que está bastante bien.
Está bastante.
Os lo voy a enseñar solo para que lo veáis.
De cómo funcionaría esto.
¿Vale?
¿Dónde me ha dejado esto?
A ver.
¿En el escritorio?
¿Puede ser?
Sí.
Vale.
Aplicaciones.
Pongo esto.
Aplicaciones.
Image.
Optim.
Image.
Optim.
Para que veáis.
Y a ver que.
Si nos lo optimiza.
A ver si sigue funcionando o no sigue funcionando.
Esta es la aplicación.
Y lo que tendríamos que hacer es decirle.
Oye.
Pues quiero que me optimices esta de virus.
Y la.
Bueno.
No funciona así al parecer.
Tendríamos que arrastrarla de aquí.
Mira.
Voy a ponerle todas.
Igual peta.
¿Ves?
La arrastras.
Y entonces empieza aquí a pensar.
Y aquí te dice cuánto lo ha reducido.
Que está bastante chulo.
Si al menos quieres hacer algo mínimo.
Esto sería lo mínimo.
¿Vale?
Esto sería lo mínimo.
Esto lo que hace es optimizarte.
El mismo formato.
Esto no te lo va a transformar a otro formato.
Aunque.
Creo.
Que se puede llegar.
Creo que se podría.
Ah no.
¿Ves?
Podríamos activar la minificación con pérdidas.
Y que empiece a optimizarnos de diferentes.
Y tal.
Así que esta podría ser una.
Y esta sería la mínima.
Fíjate que al menos.
Oye.
Pues un 10% de un mega.
Pues son 100k.
O sea.
Algo.
Algo es algo.
¿Vale?
Algo es algo.
Luego.
Si no.
También podríamos utilizar diferentes herramientas de Astro.
Astro tiene un montón.
Mira.
Van der Hamme pasar esta de Image Tools.
Y tal.
Que está muy chula.
Aunque yo no soy muy fan.
De el hecho de que te optimice las cosas.
O sea.
Que tengas que utilizar algo para que te optimice.
No sé qué.
No sé cuánto.
O sea.
Me gustaría más tener la imagen ya optimizada.
Que no que te haga siempre el proceso de que te las optimice.
Y todo esto.
Porque si no.
Es un poco rollo.
¿Sabes?
De que cuando te lo bundeliza.
Que te lo optimice.
Es un poco rollo.
A ver.
No está mal.
Pero al final el paso que tiene que hacer.
Es cada vez que haces la build.
Te lo va a optimizar.
Algo es algo.
Está bien.
Pero yo lo evitaría.
Luego.
Para hacerlo muy a mano.
Tenemos Squash.
Que es genial.
Mi favorita.
Seguramente.
Por lo potente que es.
Y vamos a poner a otra persona.
Porque si no.
Bueno.
Puede estar reverse.
Es que.
¿Qué más da?
Al final son las imágenes que hay.
O sea.
Yo no estoy haciendo nada.
No ha sido aposta.
El tema.
Aquí podéis ver el antes y el después.
Por ejemplo.
A la izquierda tenéis la imagen original.
Al derecho.
Tenéis la imagen.
optimizada.
Fijaos que no se nota casi la diferencia.
Teníamos que hacer mucho zoom.
Para.
Bueno.
Es que ni con mucho zoom.
Pero.
Se ve.
Una ligera diferencia.
Una ligera diferencia.
De color.
De píxeles.
Y tal.
Y fijaos.
Cuánto ocupa menos.
O sea.
Fijaos en esto.
O sea.
Bajado un 90% la imagen.
Un 90% que te estás ahorrando.
Tío.
O sea.
Un 90%.
Por favor.
Optimizad las imágenes.
O sea.
Es increíble.
Porque.
Si es que no hay diferencia.
Es que no se ve la diferencia.
O sea.
Es tremendo.
Y web P.
Porque alguien me dirá.
Ah.
Y web P.
¿Qué pasa?
Mira.
Can I use.
Web P.
Ahora mismo.
Yo creo que lo puedo utilizar.
Si no es todo el mundo.
Menos internet.
Pero ver 11.
97,66% de compatibilidad.
O sea.
Yo.
La verdad es que ahora mismo.
Casi que lo haría con todas.
La única que es un poco problemática.
Es Safari.
Porque fijaos.
Safari.
Tiene soporte.
Pero tiene un soporte.
Un soporte un poco raro.
Porque es soporte.
Solo si tienes la última versión del sistema operativo.
Las últimas versiones.
A partir de la Big Sur.
Y creo que ya estamos por la siguiente.
Así que esa sería una.
Y si no.
Aparte de web P.
También podéis utilizar a BIF.
Que tiene menos soporte.
Pero también lo podéis utilizar aquí.
A BIF es un nuevo formato de imagen.
Todavía más potente.
Que mira.
Lo tenéis aquí.
A BIF.
Pum.
Y fijaos que A BIF.
Lo que.
Fijaos que tampoco se ve la diferencia.
O sea.
A ver.
Sí que se nota un poco.
Pero podríamos mejorar.
Porque fijaos que la calidad está en 30.
O sea.
Pero fijaos cuánto ocupa ahora.
39K.
O sea.
Ha bajado un 94%.
Es que es increíble.
O sea.
La diferencia.
La diferencia.
De tamaño de la imagen.
Es tremenda.
Y se ve casi lo mismo.
Casi lo mismo.
Que a las malas podéis subir.
Bastante la calidad.
Y aunque sea.
Pues vale.
Lo ha bajado.
Pues es que ahora.
Ahora no hay diferencia ninguna.
Es que no.
No se ve la diferencia.
Así que es muy importante.
Optimizar las imágenes.
Además podéis hacer un resize.
Si fuese suficiente.
Si fuese necesario.
Lo que sea.
Es que.
Aunque optimicéis directamente con PNG.
Vamos a optimizar el PNG.
Pues quieras o no.
Pues un 10%.
Pues un 10%.
Es un 10%.
Pero bueno.
Yo creo que un web P.
Sería lo mínimo.
Yo creo que sería lo mínimo.
Web P.
Web P.
Porque es que.
Se ve muy bien.
Podríamos subir un poquito la calidad.
Como para apurar.
Porque total.
Por 15K.
No nos vamos a cabrear.
Mira.
Bajamos la imagen.
Y aquí.
Pues tenemos la reverse web P.
Pero ahora.
Voy a explicar otra forma.
De que podáis hacer esto.
De una forma un poco más automática.
¿Vale?
Porque si no.
Sí.
Web P.
Es razonable.
Porque tenéis.
Tanto por un lado.
El soporte.
Y por otro lado.
El tamaño.
O sea que.
Mirad la diferencia.
Reverse.
Antes era 670K.
Y ahora 80.
De hecho.
Vamos a ver una cosa.
Vamos a ver una cosa.
Si vamos a la página.
Vamos a ver nuestra velada.
Vamos a ver cuánto ocupa la página ahora mismo.
Nuestra página.
Ahora mismo.
Ocupa 17 megas.
Es una salvajada.
17 megas.
Es una salvajada.
Es un montón.
Vamos a.
Vamos a optimizar todas las imágenes.
Y vamos a ver cómo lo tiene.
Mirad.
Vamos a hacer una cosa.
Vamos a utilizar otro método más.
Otro método más.
Hay diferentes binarios para poder utilizar Web P.
En Brew.
Que es como una forma de instalar fórmulas en macos.
Y líneas de comandos.
Programas de la terminal.
También funciona.
Si no me equivoco.
En Linux.
Creo que en Linux también funciona.
Bueno.
No lo sé.
Pero en Linux.
Si no funciona este.
Tendréis otro.
Entonces.
Con Brew puedes instalar líneas de comandos.
Y uno de ellos es justamente este de Web P.
Que es la herramienta oficial de Google.
Porque Web P.
Si no lo sabíais.
Era de Google.
Entonces.
Muchas veces.
Pues no queréis soportar manualmente.
Hacer las imágenes y tal.
Y lo entiendo perfectamente.
Pues os podéis instalar Web P.
Yo lo voy a hacer con Brew install.
Si no.
Lo podéis hacer.
Web P.
Tiene binarios para todos sistemas.
O sea.
Lo podéis mirar por aquí.
Descarga tu convertidor.
Lo ves.
Lo tenéis en Linux.
Windows.
Y Mac OS.
Y entonces.
Estoy instalando.
Brew install Web P.
Que esto puede tardar en un rato.
O sea.
Que lo vamos a probar.
Pero si tenéis Windows.
Lo vais a poder utilizar sin ningún problema.
Así que no os preocupéis.
Porque veis que tenéis binario para Windows.
Lo tenéis para todos.
Windows.
Linux.
Mac.
Pero mirad cómo instalarlo.
Porque ya os digo que según el sistema operativo.
Os será más cómodo hacerlo de una forma u otra.
Sí.
En Windows también funciona.
Ya os lo digo yo.
Seguro que funciona.
Seguro.
Porque esto es de Google.
Bueno.
Ahora que ya tenemos esto.
Ya tenemos instalado Web P.
Pues vamos a Public.
Vamos a Boxers.
Y si no me equivoco mal.
Era C Web P.
¿Vale?
Aquí podremos.
Todas los PNG.
Y vamos a poner.
No acuerdo.
No acuerdo.
Como se utilizaba el C Web P.
A ver.
Vamos a poner.
Use.
Mira.
Voy a utilizar.
GeekHackoPilot en la terminal.
No sé si sabéis que existe.
GeekHackoPilot en la terminal.
Pero puedes utilizar el interrogante interrogante.
¿Vale?
Le pones.
Usar C Web P.
To optimize all.pngfiles.
Vamos a hacer esto.
¿Ves?
Ahora le estoy preguntando.
GeekHackoPilot.
Y aquí me dice cómo lo tienes que hacer.
Ah.
O sea.
Que es un for.
O sea.
Que hay que hacer un for.
Ah.
Pues mira.
For.
Para cada imagen.
Que termina con PNG.
Entonces ejecuta esto con la calidad de 80.
Y te lo conviertes en el archivo.
El nombre del archivo.
Don.
No sé qué.
Vale.
Pues mira.
Encima te lo explica.
Está súper chulo.
Porque GeekHackoPilot en la terminal.
Te lo explica.
Y te dice.
Mira.
Esto hace esto.
Esto hace lo otro.
Y luego tú le dices.
Si va bien.
Si no sé qué.
Pues le vamos a decir que sí.
Vamos a decir que lo ejecute.
A ver.
¿Qué?
Y no funciona.
Dice que opción ilegal.
Bueno.
Esto es porque seguramente.
Esto debería ser un bash.
Y yo me imagino que esto aquí no le gusta.
¿Ves?
Esto no le gustará.
Por beta se ha cometido.
Me extraña que CWP no tenga una forma de optimizarlas todas.
Vamos a poner CWP.
Help.
Vamos a ver.
Me extraña que no haya una forma de decir todas las imágenes.
Que no sé qué.
No sé cuánto.
Vamos a ver.
A ver.
CWP.
A ver.
Si no.
Esto lo podríamos.
Esto que me había dicho por aquí.
CWP.
No sé qué.
No sé cuánto.
Si lo ponemos en un archivo de.
Si no lo podemos optimizar.
A ver si no lo podemos hacer en un momento.
Podemos meterlo en cada fichero y ya está.
Es que no sé qué voy a tardar más.
Esto debería funcionar.
A ver.
A ver.
A ver.
Ilegal option menos n.
N.
Fine.
O sea, es este.
Es el name.
O sea, es que me parece que esto no funciona.
Qué cabrón.
Es que este es el problema.
Ese es el problema.
It has to work on macos.
Es que macos no funciona ese.
¿Ves?
Este.
Es que no funciona.
El name este no funciona.
Es una rata.
Ah, pues sí.
Sí que funciona.
¿Sabéis lo que faltaba?
El punto.
Eso es lo que faltaba.
Lo que faltaba era el punto.
O sea, estaba todo bien porque ya decía yo que no funcionaba.
Lo que faltaba era el punto.
Fijaos.
Fijaos.
¿Ves que ponía aquí?
A ver.
Esto.
Aquí le falta el punto para indicarle en qué carpeta es la que tenía que buscar.
Ese era el problema.
Por eso no encontraba la expresión.
O sea, ahí Jacob Pilot me la ha timado.
WebP no es ni superior ni inferior a SVG.
SVG es un formato vectorial.
Que para hacer vectores es insuperable.
No hay nada mejor.
Porque los vectores escalan infinito.
Pero tú no puedes hacer una imagen en base a vectores.
Tú no puedes hacer una imagen en base a vectores.
Es imposible.
Imposible no.
Pero ocuparía un montón.
Entonces, para un icono, SVG es insuperable.
¿Por qué?
Porque tú puedes tener un SVG de un icono y eso hacerlo así de grande y se ve perfecto y ocupa muy poco.
Pero WebP, para una foto, por ejemplo, con SVG no tendría ningún tipo de sentido porque no es vectorial.
O sea, son dos formatos que son diferentes.
Mirad.
Si lo queréis hacer en la build, una cosa que podéis hacer es tener en el package.json hacer algo así.
Pre build.
Tú haces esto y esto se ejecuta antes de la build.
Ya está.
Una vez que tú tienes algo antes de la build, pues puedes hacer aquí lo que te dé la gana.
No necesitas gulp.
No necesitas nada.
Con esto podrías optimizar ya las imágenes estas.
A ver.
Vamos a ver.
No sé si se puede poner esto, que yo me imagino que no.
Pero vamos a intentar ponerlo en un solo...
¿Vale?
Vamos a intentarlo.
A ver si se puede poner en un...
Ah, es que no se va a poder.
No se va a poder hacer esto.
Lo voy a intentar igual.
Lo voy a intentar.
Punto WebP con el don.
A ver.
A ver si cuela.
Pero es que muchas veces pre build.
Vamos a poner pnpm run images.
Ay, coño.
Que no estoy en el sitio correcto.
Pnpm run images.
¿Vale?
Ya está.
Entonces, lo que podemos hacer aquí...
Pre build.
Si haces pnpm run build...
¿Vale?
Hostia, me está ignorando.
¿Por qué me está ignorando esto?
Si le he puesto pre...
A ver.
Npm prepackage.
Ah, ¿no será que pnpm no...
Tú creíte...
Ah, no.
Es que no es con dos puntos.
Perdón.
Es así.
¿Vale?
Entonces, tú ahora, si haces pnpm run build,
primero te va a ejecutar...
Bueno, me está ignorando.
Pero me está ignorando por culpa de pnpm.
Pero con npm funciona.
¿Ves que lo ha hecho?
Primero ha hecho una cosa y luego la otra.
Y ya no necesitas utilizar nada.
O sea, para este tipo de cosas.
Hay veces que sí, que es necesario.
Pero puedes hacer cosas antes, lo que sea, y después.
Y esto está bastante chulo.
No sé por qué pre-scripts.
¿Por qué no funcionan los scripts en pnpm?
Mira, no ejecuta...
A ver qué dice.
Ah, es que no lo ejecuta.
Dice, no ejecuta pre en post.
Este comportamiento causado por el script, no sé qué.
Vale, dice, si por cualquier razón necesitas hacerlo,
tienes que añadir esta opción.
Bueno, pues imagínate que o añades esta opción o haces npm.
O directamente con catenas, por ejemplo.
Tú podrías hacer aquí images.
O sea, otra opción sería hacer images.
Y aquí pues tú hacer pnpm run images.
Y entonces hacer astro build.
Y ya con esto, pues haces pnpm run build.
O sea, muchas veces...
¿Ves?
Ahora está optimizando las imágenes.
Optimiza las imágenes y luego hace la build.
Sea lo que sea, muchas veces se pueden hacer con package.json.
Puedes hacer cada cosa, ¿sabes?
Te puedes volver loco muchas veces.
O sea, con la de cosas que puedes hacer aquí.
La de Skitty.
Por ejemplo, puedes tener aquí optimization.
Optimize images, ¿vale?
Entonces haces todas las optimizaciones aquí.
Y aquí puedes ejecutar optimize all, ¿no?
Aquí vamos a tener por ahora, pues nada.
Solo la de optimize images.
Aquí vamos a optimizar todas las imágenes.
Pero podrías tener, por ejemplo, también convertir las fuentes, lo que tú quieras.
Y cuando hagan la build, dice, vale, primero hago las optimizaciones, luego hago la build.
Y, oye, ya está, ¿sabes?
Pim, pam, pum.
Ya está.
Eso para continuous integration está guapi.
Sí, esto está súper chulo.
Bueno, con esto, fijaos que ya hemos optimizado las imágenes.
Nos vamos al index.astro.
Vamos a darle .png.
Y todos los .png que tenemos por aquí.
.webp.
Bueno, vámonos a nuestro proyecto.
Nos vamos a nuestro proyecto.
Y peta.
¿Vale?
¿Por qué peta?
¿Qué hemos hecho aquí?
Boxers.
Pero si están aquí bien.
Ay.
Que me ha dejado .png.webp.
Ay.
La madre que lo parí.
La madre que lo parí.
Public, boxers, remove, todos, .png.webp.
¿Vale?
Y vamos un momento al .png.json.
¿Por qué ha pasado esto?
Ah, porque claro, pone aquí .webp y es el .file, pero no le está quitando la extensión.
Ah, qué rata.
Bueno, a ver, no pasa nada.
Vamos a hacerlo y lo cambio a mano.
Aunque lo ideal sería poder...
Ahí seguro que se puede hacer alguna historia de...
Se puede hacer alguna historia.
A ver.
Si yo hago esto...
No sé si esto va a colar.
Que me mueva todas las imágenes con no sé qué y haga .webp.
Yo creo que esto no va a colar.
No va a colar.
¿Qué va a colar?
¿Qué va a colar?
¿Qué va a colar?
Es que no...
¿Qué va a colar?
No se lo cree ni el tato de streamear.
Bueno, pues fijaos.
Estas son las imágenes de webp.
Que se ven increíblemente bien.
O sea, se ven súper, súper, súper bien.
¿Vale?
Ah, y el logo.
El logo no lo he arreglado.
El logo no lo he arreglado.
El logo es verdad que no lo he arreglado.
Así que ahora sí.
Vale.
Se ve exactamente igual.
¿Vale?
Se ve exactamente igual o no.
La diferencia...
La diferencia de 17 megas.
17 megas que eran antes a 1.7.
O sea, ya me diréis.
O sea, la diferencia es bastante bestia.
Bastante bestia.
De hecho, vamos a ver si le ponemos aquí...
Vamos a ver Lighthouse.
Por ver, ¿eh?
A ver, son muchas imágenes.
Tiene un...
No, 57.
Qué mal, qué mal.
Vamos a ver.
¿Cuál es?
Hostia, First Contentful 4.4.
Esto es un poco raro, ¿eh?
Esto sí que me lo puedo creer.
Porque un problema que vamos a tener es el tema de las imágenes, ¿eh?
Vamos a ver.
¿No queda más pequeño?
Tongo.
No, hombre.
Tongo no.
Lo que pasa...
Primero es...
Usa un tamaño...
Bueno, esto no.
Esto lo podemos arreglar.
Porque, obviamente, el tamaño de las imágenes son demasiado grandes.
Pero una cosa que vamos a encontrarnos que es un problema es el tema del rendizado del mayor elemento con contenido.
Que también es raro lo que ha tardado.
De hecho, lo podríamos...
Vamos a hacer una cosa.
Que antes me ha dicho alguien.
Públicala.
Venga.
Vamos a hacer la build y la vamos a publicar.
Y publicada la veremos mejor que no en desarrollo.
Porque en desarrollo no tiene mucha historia, ¿vale?
Vamos a abrir la pestaña esta.
Vale.
Ya la tengo por aquí.
La velada del ano.
Dist.
Subimos esto.
Y esto la debería desplegar.
Y ahora sí veremos realmente cómo funciona, ¿vale?
Cuidado con las extensiones de las imágenes.
¿Sí?
¿Por qué?
Hostia, ¿cuánto está tardando esto, no?
Me sorprende.
Claro.
Es que...
Los PNGs estos ocupan un montón.
O sea que esto...
Esto lo tengo que arreglar para que no me genere...
No me genere eso.
Claro.
Esto...
Estas imágenes, claro, son 17 megas.
Estamos subiendo 17 megas.
Y ya no las necesitamos.
Así que esto...
Este, este, este, este...
Voy a quitar los que están repetidos.
Vale.
Quitamos estos.
Este también está repetido.
Y creo que ahora ya sí que está.
Voy a quitar lo de optimizar porque no...
Ahora mismo no las optimizamos.
Así que lo vamos a dejar así.
Pam, pam, pam.
Voy a subir todos estos ficheros.
¿Vale?
Upload.
Upload.
Images Optimized.
¿Vale?
Mira, ya está aquí la velada.
¿Vale?
Hombre.
Va bastante fino, ¿eh?
Vamos a ver ahora qué nos cuenta el Lighthouse.
Un overflow que...
Vale.
Renderizado del mayor elemento, 11.6.
¿Cuál es el problema por el que...?
Bueno, este 11.6.
Esto es que está pillando el elemento que no es.
De hecho, vamos a ver cuál es el que dice que es el más grande.
Pero debe estar...
Los elementos de imagen...
Mira, este no tiene width y height.
¿Qué es el que podríamos hacer?
Claro.
Tendríamos que ver cuál es el elemento de mayor tamaño que es el que está detectando.
Nos está dando súper mala puntuación realmente porque está detectando...
¿Ves este 11.6?
Porque está detectando que hay un elemento que es el de mayor tamaño.
Entonces, vamos a ver...
Esto lo podríamos arreglar.
Esto no hay ningún problema.
¿Vale?
Si miramos...
Hay aquí una pestaña que estaba muy chula.
Que creo que estaba todavía...
A ver.
Más herramientas.
A ver si la encontramos.
Web Auth.
Recursos para desarrolladores.
Había una nueva.
Que a ver si la encontramos.
Animaciones.
Inspeccionar.
Origen Rápido.
No.
Origen Rápido no será.
No.
Origen Rápido no es.
Pero había una.
Rendimiento.
No.
Esta no es.
Aunque bueno.
Esta nos puede servir al menos para detectar cuál es el elemento más grande.
Hostia.
Que he hecho scroll y la vamos a liar con eso.
Seguramente es que está detectando como elemento más grande el logo.
Y a lo mejor el logo es lo último que sale.
O una de las imágenes es lo último que sale.
¿Ves?
Aquí.
LS.
¿Ves?
Esto es que ha dado un salto.
Pero aquí nos está diciendo otra cosa.
Que el elemento más grande no es...
Mira.
¿Veis?
Las animaciones.
Claro.
Aquí el elemento más grande es otro.
Está detectando otro.
¿Veis?
Esto es que está dando un salto.
Esto lo tendríamos que arreglar, por ejemplo.
Este salto de aquí.
Y esto puede ser por la fuente.
Tenemos que mejorar la carga de la fuente.
De hecho, la fuente también la podemos optimizar.
¿Veis?
Porque fijaos que la fuente...
252.
TTF to...
Wof to.
Vamos a optimizar la fuente en un momento.
Que también esto nos ayudará.
public...
Fonts...
Vamos a poner estas dos.
Public...
Fonts...
Siempre que podáis, tenéis que utilizar web2.
Wof2.
Que también la soportan un montón de gente.
Sería como el webP de las fuentes.
Ocupa mucho menos.
Mira, tiene un 97%.
Y se ve igual.
O sea, que es una forma de optimizar también la carga de la página.
Y vais a ver también la diferencia.
Porque aquí tenemos TTF 252 y 186.
Vamos a ver cuánto...
Mira, 56.
Esta es 56.
Y esta es 45.
O sea, también un quinto.
Se ha quedado en un quinto.
Directamente.
Viruz.
Bueno, quitamos.
Viruz.
Adiós.
Que estaba repetido.
Remove repeated image.
Vale.
Sincronizamos aquí.
Vale.
Estas fuentes las vamos a traer aquí en fonts.
Vamos a traerlas aquí.
Esta la ponemos...
¡Oy!
Ahora.
Esta la ponemos aquí.
Esta la ponemos aquí.
Y esta y esta la podemos eliminar.
¿Vale?
Y luego en nuestro index vamos a poner que utilice el web2.
Web2 este.
Web2.
Web2.
Web2.
Web2.
Y no me acuerdo si aquí...
Yo creo que hay que poner esto.
Formato Web2.
Creo que hay que hacer esto.
¿Vale?
Formato Web2.
Ah, vale.
Se me ha olvidado aquí el Web2.
Vamos a ver si esto sigue funcionando.
Y la fuente se sigue viendo.
Ah.
Syntax error.
Syntax error.
Vale.
¿Veis?
Se sigue viendo la fuente.
Funciona perfectamente.
Pero la diferencia ahora es que si vamos a la red y miramos cuánto ocupa la fuente.
Fijaos la diferencia.
57 y 46.
Y aquí 252, 186.
O sea, una diferencia brutal.
Esto ya está mal de rendimiento.
Pero cuando estamos recargando aquí y está pillando aquí el HTML y aquí es el CSS, claro, el PhoneFace está en el CSS.
Y hasta que no se descarga el CSS, ¿veis dónde está cargando la fuente?
Claro.
Buah, esto es súper importante.
Esto es súper interesante.
A ver, el tema es que estamos cargando la fuente es algo crítico para que se vea nuestra página.
Y fijaos que se está cargando en este punto de aquí.
¿Por qué se carga en este punto de aquí?
Porque se está cargando una vez que se ha descargado el CSS.
Y necesitamos que se carguen antes.
Porque no podemos esperar a que se cargue el CSS.
Así que lo que podríamos hacer aquí, ya que tenemos el head por aquí, podríamos hacer un preload.
Hacemos un link, rel, preload.
Y vamos a precargar las fuentes.
No me acuerdo, es href.
¿Vale?
Y aquí podemos poner fonts, boxing 2.
Vale, perfecto.
Le decimos, oye, precárgame la fuente de boxing, porque es que la voy a necesitar seguro.
Como si fuese una fuente, le tenemos que decir el tipo de este archivo, de este recurso, que es Word 2.
Y el cross origin como anonymous, porque si no, no funciona.
Y va a dar un problema de course.
Tenemos que decirle que nos tiene...
Sí, parece mentira, pero es un problema de course.
Y tenemos que decir que lo cargue de forma anónima, ¿vale?
Que no se tiene que preocupar.
¿Ves?
Course enable.
O sea, que nos da un problema de course de verdad.
Porque, claro, como lo haces el preload, no es como una petición normal.
Y lo que tenemos que decir es, oye, hazlo como si fuese de forma anónima.
No te preocupes ahora mismo por hacer el chequeo este de la cabecera.
Al final lo que está haciendo es precargar, es como calentar ese recurso, para que no
tengas que esperar antes de que lo descubra la web.
Entonces, lo estamos como precargando y cuando lo descubra, ya lo tendrá cargado, ¿sabes?
Así que ya lo tenemos.
Y ahora vais a ver la diferencia.
Vamos a ver la diferencia.
Mirad, esto es como está ahora.
Si ahora vamos aquí, mirad, esto es como estaba ahora.
Claro, aquí, claro, en la que no está desplegada es un poco trampa porque se utiliza de otra forma, ¿eh?
Pero bueno, vamos a hacer esto en PNRAMBuild.
Vamos a hacer la build, la desplegamos y vemos la diferencia entre uno y otro.
Vale, NellifyDrop otra vez.
Aquí, nos vamos para acá.
Vamos para atrás.
Vamos al dist.
Y este dist, ahora debe ocupar menos el dist, entiendo.
A ver, debería ocupar...
Ah, mira, sí.
¿Veis que ahora ha ido mucho más rápido?
Ha ido mucho, mucho, mucho, mucho más rápido.
Entonces, al menos lo de la fuente lo habremos mejorado.
Lo habremos mejorado, ¿vale?
Lo habremos mejorado.
A ver cómo está la fuente.
Vale.
¿Veis la diferencia?
Fijad la diferencia.
Estos antes, antes teníamos la carga de la fuente.
Bueno, que me decíais que no lo veíais.
Ahora aquí lo vais a ver.
¿Vale?
La carga de la fuente antes, fijaos.
Y ahora me ha roto la cascada.
Qué cabrón.
Bueno, pues ahora no os lo puedo enseñar.
¿Por qué?
¿Por qué?
Ahora me lo está haciendo bien.
Es que me está haciendo el mismo.
Me lo ha desplegado ya bien.
¿Vale?
Las fuentes están ahora aquí y se cargan lo primero.
Y esto lo que hace es que se cargue mucho antes.
Porque lo que está pasando aquí, o lo que estaba pasando,
que no lo podemos ver, es que se cargaba el CSS.
Y una vez que se cargaba el CSS...
Ah, sí, sí, sí que se ve aquí.
Sí que se ve.
Mira.
Sí, sí, sí que está bien.
Mirad.
Aquí está el CSS, ¿vale?
Cuando se carga el CSS...
Joder, con ese hover.
Cuando se carga el CSS, entonces es que las fuentes se cargan.
Pero claro, esto hace que haya un efecto cascada.
Hasta que no carga el CSS, no carga la fuente.
Y hasta que no carga la fuente, pues no se ve bien la página.
En cambio, ahora, lo que hemos hecho es hacer un preload.
Lo primero que hacemos es ir cargando las fuentes.
Fíjate que se cargan en paralelo con el CSS.
Y entonces ya están las fuentes.
¿Sabes?
Ya no hay ningún tipo de problema.
Está ordenado por tamaño y no por cascada.
Tienes razón.
Ahora.
Ya está.
Mira, ahora se...
Gracias, ¿eh?
No, ya fijaos.
Pues ahí lo tenéis ahora la diferencia.
¿Ves?
Aquí está el CSS.
Y ahora, cuando estaba el CSS, se cargan las fuentes.
Y ahora lo que hacemos es que las fuentes las precargamos.
Y ya está.
Se puede hacer con cualquier asset.
Se puede hacer con imágenes.
Se puede hacer con lo que necesitéis.
Eso sí, no hay que precargarlo todo, que os conozco.
No hay que precargarlo todo.
Lo que hay que hacer es precargar aquello que es crítico.
Por ejemplo, de las imágenes, no hay que precargarlas todas.
Hay que precargar aquellas que estén bien arriba.
Y ya está, ¿no?
Y con esto, algo habremos mejorado.
Todavía nos faltaría mirar cuál es el elemento más grande, según Lighthouse.
¿Vale?
Pero mirad que hemos mejorado ya bastante el tema del rendimiento, ¿eh?
Estábamos en 45, ya vamos por 71.
Ahora habría que ver por qué, cuál es el más grande.
Aquí es que hay un tema raro, porque no sé por qué pasa esto.
Pero esto puede ser que sea culpa mía de alguna cosa que hemos hecho ahí.
Seguramente o será el logo, pero algo será.
O será culpa de la fuente, no lo sé.
Pero hay, ves que pone renderizado de mayor tamaño.
Pues eso es lo único que nos está jodiendo.
Que el de mayor tamaño es el que nos está indicando ahí.
Lo que pasa es que antes, bueno, esto también lo podríamos seguir arreglando,
que las imágenes son demasiado grandes y tal, hacerlas más pequeñas.
Pero es que antes, estoy bastante seguro que te decía,
este es el, asegúrate que el texto permanece visible mientras se carga la fuente.
Esto también tendríamos que hacer un font display swap,
para que el texto esté visible mientras se carga la fuente.
También tendríamos que poner aquí el, para que al menos que tenga el aspect ratio.
Porque ves que si no está el logo, pues hace un salto.
Esto lo podríamos arreglar.
Pero ¿por qué no aparece?
Antes aparecía este.
Ah, mira, es este, ¿ves?
Renderizado del mayor elemento con contenido.
Este es el mayor elemento con contenido renderizado en el viewport.
O sea, dice que este es el elemento, el coscu este, es el elemento más grande.
Ese es el elemento más grande.
Y nos está comentando que este elemento es el que está tardando, según esto,
9,6 segundos en cargarse.
Fíjate que Germán son 350K.
Seguro que podríamos hacer algo para que todavía siga cargando o que tarde menos.
Incluso podríamos intentar hacer un preload del bono de Germán.
A ver si con esto nos ayuda.
La podríamos hacer más pequeña.
Podríamos llegar a Squash otra vez.
Y esto aquí, Squash es perfecto porque justamente vamos a poder hacer optimizaciones muy al detalle.
Mucho menos generales que la que hemos hecho antes.
Entonces, vamos a pillar a Germán.
Lo siento, Germán, pero te vamos a poner, a hacer más pequeño, ¿vale?
No te enfades, Germán.
No te enfades.
Es que es enorme.
La imagen está muy grande.
Es muy grande y seguramente, a ver, 2.600, yo es que creo que con 1.980, o sea, 1.080.
Yo creo que con la mitad, seguramente, con WebP, webP, claro, ya serían 60K.
Y la diferencia, sí que se puede notar un poco la diferencia todavía.
O sea, vamos a poner 1.600, vale, 1.600, pero es que al menos ya ocuparía la mitad.
Y esa es la clave, ir ocupando, que ocupe la mitad, al menos.
Bueno, un 70%, o sea, es que esto ya es una buena diferencia.
Y aquí ya sí que, hombre, se nota un poco de definición, pero aún así yo creo que vale la pena.
O sea, que esto ya sería 1.86, pero bueno, al menos para ver si esto tiene un impacto positivo,
para que veáis la diferencia y cómo importante es el tema de las imágenes.
Tampoco ayuda el tema de la animación, también os digo, tampoco ayuda.
De hecho, una cosa que podríamos hacer es que los primeros, que además son los más grandes,
no tengan animación, ¿sabes?
Que los primeros aparezcan de una.
Porque esto le da una sensación, se arregla un poquito del tiempo, ¿sabes?
Se aguanta un poco de tiempo y se aprovecha para dar mejor sensación, ¿sabes?
O sea, que ese tipo de cosas te dan puntos.
Vale, gracias por lo del logo, que no lo había visto.
Y este también lo vamos a quitar por aquí.
Vale.
El font display, podríamos hacer aquí.
Font display swap.
O sea, no me acuerdo si el font display se ponía en el font face.
Ah, no me acuerdo.
¿Dónde se ponía el font display?
Font display mdn.
Vale, font display, font display.
¿Dónde se ponía el font display?
Sí, se ponía aquí, en el... aquí.
Vale.
Y podríamos hacer para que esto se...
A ver, font display swap generator.
OnlyFace generator.
No.
Es que había una...
Ah, es que no lo voy a encontrar.
Pero para que el font display, que el parpadeo que haga no sea tan bestia, se podría mejorar.
Pero bueno, no pasa nada.
Por ahora vamos a mejorar al bueno de Germán.
Y vamos a hacer eso de la animación que he dicho.
Animation is out duration 1000.
Claro, es que también la duración es bastante bestia.
Y el delay...
Claro, es verdad que el primero no tiene delay.
Fade right.
Claro.
El primero...
Vamos a quitar esto, ¿eh?
Y vamos a poner que este sea 300.
Claro, vamos a hacerlo más bien que esto lo quitamos.
Vamos a probar un momento esto, ¿eh?
300, 500, 700 y 1000.
Vamos a hacer 700 y 1000.
Vamos a hacerlo así.
Vamos a probarlo.
A ver si esto mejora realmente un poquito, ¿vale?
Animate left.
Este sí, pero este le quitamos el fade.
Este ponemos 300.
500, vale, 500, 700 y vamos a poner 1000.
Son 300 milisegundos, pero yo creo que 300 milisegundos algo ayudará.
Vale, vamos a remove images and improve perf.
Vale, venga, vamos a ver cómo mejora esto, ¿eh?
Has puesto 7000, no jodas.
Hostia, has puesto 7000.
Madre mía, gracias por avisar.
Menos mal, menos mal que estáis ahí.
Nunca sabes lo que te va a salir.
¿Qué te parece?
¿Ibai te ha dado ok de la velada?
Pero a ver, el ok.
Estamos haciéndolo por fines educativos.
Que no lo vamos a desplegar a un dominio,
que es lo que más le molestó a la gente de la Kings League.
Lo que le molestó a la gente de la Kings League lo desplegamos en un dominio.
Un dominio que encima en Google ya salía a veces por encima del otro.
Que entiendo el cabreo, es que lo puedo entender, ¿sabes?
Pero que, o sea, es por fines educativos y ya está.
Ya está.
No vamos a hacer nada.
No vamos a hacer nada con esto.
Hostia.
Ah, vale.
Ha pasado ahí algo raro.
Vale, pero veis, todavía hay cositas ahí.
Ese salto.
Vale.
Hay un salto aquí que también vamos a intentar mejorar.
Es el logo.
El logo de la velada, no sé qué.
El logo de la velada, vamos a ver qué tamaño tiene este logo.
Vamos a poner el logo.
El logo son 128 por...
137.
385 por...
Uy, Wizz.
Wizz.
Joder, la madre que parió al Wizz.
Por 412.
Vale.
Vamos a arreglar también esto.
Que, bueno, ahora no lo voy a volver a desplegar, pero bueno, al menos.
Y ahora veréis, bueno, aparte del salto ese que hace el logo, bueno, veréis que la fuente
hace un salto un poco raro y tal, pero bueno, al menos veremos si eso no nos penaliza mucho.
¿Vale?
Venga, analiza.
Mirad, ya hemos mejorado un pelín más.
Un pelín más.
Y ahora es por los cambios de diseño.
Fijaos que ya el renderizado el mayor elemento ya lo tenemos arreglado.
Ahora el problema lo tenemos en los cambios de diseño acumulados.
Y esto es por culpa, aunque me extraña, ¿no?
Porque no veo que dé mucho salto esto.
Según esto, claro.
Según esto.
Ver rastro original, ta, ta, ta.
Vale.
Aquí podríamos ver los cambios de diseño que hemos tenido, ¿no?
O sea, aquí vemos.
Pero no vemos.
Ah, mira.
¿Ves?
Aquí lo tenemos.
Fijaos.
Fijaos.
Claro, estamos en blanco.
La velada del año.
Y fijaos cómo se ve ese texto y tal.
Claro, esto tarda, da un salto aquí, que esto también lo tenemos que ver porque esto no tiene mucho sentido.
Y luego cuando carga la fuente, cambia otra vez.
Luego sale el logo por aquí.
Y luego van apareciendo ahí las imágenes.
Que encima, encima, sale primero la del fondo, que no sé por qué.
Porque empieza la animación antes de que se carguen los de delante.
Esto también lo podríamos arreglar.
Podríamos decir, oye, no.
Primero carga.
Y de hecho lo podemos hacer.
Podemos poner imágenes que tengan prioridad.
Mira, image, image.
Podríamos poner, ¿cuál es el primero que queremos que salga?
Este es el primero.
Coscu, ¿no?
Pues podemos ponerle priority, si no me equivoco.
A ver, fetch priority.
Fetch priority.
Dice hi, no sé qué.
O sea, que le podríamos utilizar aquí.
Fetch priority hi.
Y esto mismo, aunque veo que TypeScript no lo detecta, o sea, que no lo encuentra.
También es verdad que esto, por lo que veo, si lo buscamos aquí, a lo mejor no tiene el mismo soporte,
pero aún así podemos mejorarle a un 70% solo.
O sea, lo...
Ah, encima es en todo en minúscula, ¿eh?
Fetch priority.
Vale, vale.
Fetch priority.
Y lo mismo podemos hacer con este, con el de Germán, que como que son los más importantes.
¿Vale?
Esto no lo soportan todos los navegadores, pero da igual, porque el navegador que no lo soporte lo ignorará y ya está.
Y nos tenéis que preocupar, ¿sabes?
También podríamos hacer el preload.
O sea, que también podríamos hacer esto del preload.
Le pondríamos aquí la imagen, que sería de Boxers.
Uno era...
¿Quiénes eran?
Mira que lo acabo de hacer.
Coscu, ¿no?
Uno es Coscu, Coscu Germán.
Vale, pues teníamos a coscu.wp.
Vale, esto no sería como...
Esto sería una imagen, el tipo de WebPay.
Con el Cross Origin también lo ponemos Anonymous.
Aunque creo que en imágenes no...
Creo que no es necesario como imágenes.
Creo.
Creo.
Lo vamos a mirar ahora.
Germán, ¿vale?
Ahora lo miramos.
A ver si vamos a localhost 3000, que es donde teníamos el proyectito.
¿Vale?
Y lo mejor es que en la red deberíamos ver...
Aquí, si le pones priority...
¿Ves que hay uno que pone prioridad?
Le puedes dar aquí, prioridad.
Y aquí deberíamos ver que...
Coscu...
Coscu y Germán la tienen baja.
La madre que lo parió.
¿Por qué Coscu...?
O sea, me ha hecho todo lo contrario.
¿Ves?
Todo lo de más alta y Coscu y Germán me la pone baja.
La madre que te trajo.
¿Por qué me la pone baja?
¿Sabes?
Porque le he puesto aquí que justamente los dos que me interesan...
Al Coscu también lo podríamos mejorar.
Pero fijaos que encima me pone aquí baja.
Justo los dos que hemos puesto que sea alta.
A ver...
Si le ponemos priority o fetch priority...
Es raro porque justamente nos ha jodido los dos que queríamos.
Ahora sí que me lo ha puesto en alta.
Ahora sí que lo ha puesto en alta.
Y ves que están más arriba que el resto.
¿Ves estos dos que están arriba del logo, de todo lo demás?
Eso es porque obviamente los ha descubierto antes.
Desde el preload ya los ha visto y ya los tiene.
También el logo lo deberíamos hacer a lo mejor.
También lo deberíamos precargar.
Vamos a poner aquí el logo.
¿Vale?
Y también lo veremos ahora más arriba.
¿Ves?
El logo aquí.
Que también lo podríamos optimizar.
45Ks el logo me parece un poco polémico.
Pero bueno.
Entonces, aparte de esto, voy a mirar una cosa porque hay algún tipo de error aquí.
Ah, pues no.
No es un error.
Es que hay algo que pasa aquí que pega un salto por beta saber qué.
No sé si son los estilos.
Pero no.
Aquí no parece que esté mal cargado el tema de la velada.
Pero bueno.
No sé por qué en Lighthouse da como un salto que no lo tenemos en la página.
No sé por qué.
A la hora de que cambia el responsive cuando carga muy al principio.
Cuando carga muy al principio.
Puede ser la fuente.
Podría ser la fuente.
Bueno, no sé.
Mira, podemos poner aquí 3G y lo recargamos.
Y vamos a ver.
¿Ves?
La velada del año.
La fuente es la más cabrona.
Fíjate la diferencia de cómo tarda el tío este en cargarse.
Cómo tarda justo por culpa de lo que ocupa.
El que más tarda es el primero de la izquierda.
¿Veis la prioridad ahora?
¿Veis que los que se han empezado a cargar primero son los luchadores que tenemos más al frente?
Justo por la prioridad.
Los primeros que empiezan a aparecer, aunque son los que más ocupan, son los que le hemos puesto la prioridad alta.
Porque le hemos dicho, oye, no, estos son los más importantes.
Empieza a cargar estos y luego ya te preocuparás del resto.
Pero antes se podía poner prioridad baja.
Le podrías decir, no, es que por ejemplo, los que están al fondo, los que están al fondo, por ejemplo, el Ampeter este.
Podemos decir Fetch Priority.
Y al menos antes se le podía decir Low.
Creo que esto ahora no se puede.
Y ahora te lo dejan en auto.
Ah, pero mira, fijaos que ahora pone baja, baja, baja.
Y hasta que no los empieza a cargar, no los...
Mira, Ampeter.
Mira, Ampeter la deja al último.
Sí, sí, sí.
Sí que funciona el de baja.
Pues mira, esto lo mismo podemos hacerlo con Ampeter y con Papi Gaby.
Porque como están en el fondo, lo que le estamos diciendo es, oye, mete los recursos.
Los más importantes los metes en los que se ven antes, ¿vale?
Y entonces ahora veremos que tanto Papi Gaby como el Ampeter, cuando lo recargamos con el móvil, se verán los últimos.
Porque están al fondo, ¿vale?
Fijaos cómo se van a cargar los últimos.
Porque están poniendo los recursos para empezar en el resto.
¿Lo habéis visto?
O sea, es que esto es súper importante también, ¿eh?
Hay una forma en la que podemos empezar a hacer este...
ViewTest...
No, este no es...
De hacer pasar una fuente por otra, ¿sabes?
Un face de escrito Playground.
¡Ajá!
¡Ajá!
Esto sería un poco la idea.
Esta sería la idea.
O sea, el hacer que se pase una fuente por otra, ¿sabéis?
Vale, lo voy a hacer un momento.
Lo vamos a hacer en un momento.
Porque es que me parece que es súper chulo.
Mira, esta es la herramienta.
Esta es la herramienta.
Aquí está.
Aquí está bien.
Esta creo que es la herramienta.
Entonces, si ponemos esta aquí, ¿vale?
¿Veis que ahora aparece esto aquí?
¿Ves?
Aquí tengo phone face, no sé qué.
Adjust Arial Fallback.
Adjusted Arial Fallback.
Claro.
Entonces, aquí lo que puedes hacer es...
Esta es mi fuente y atrás es la que tenemos el fallback.
Que, por ejemplo, utilizamos la Arial.
Y aquí lo que podríamos hacer es empezar a ir ajustando como ir ajustando la fuente para que se parezca lo más posible a la otra.
Pero, claro, es complicado porque, obviamente, hacer que se parezca es difícil, ¿sabes?
Pero podemos ir ajustando para evitar el line of shift lo máximo posible.
Por ejemplo, así, al menos de ancho, no nos daría el problema, ¿sabes?
Con esto de ancho, no nos daría el problema.
Otra cosa que podríamos hacer...
A ver, porque aquí el text podríamos hacerlo así.
Es una pena que no se podría...
El line gap...
O sea, tendría que quedar aquí.
Lo voy a probar, ¿vale?
A ver si más o menos, al menos para que no dé saltos.
Para que no dé saltos.
A ver...
Así que ahora este phone face lo vamos a añadir aquí.
Esto es súper avanzado ya, ¿eh?
Esto ya es llevarlo al siguiente nivel.
Vamos a poner aquí adjusted Arial fallback, ¿vale?
Y esto lo vamos a hacer como en Tailwind.
¿Veis que aquí tenemos la sans serif?
Lo que podemos poner aquí es la adjusted Arial fallback para que sea la fallback.
Y al menos, a ver, no es perfecto porque faltarían un montón de cosas.
O sea, sí, es una pena porque creo que aquí no se pueden poner mierdas así, ¿sabes?
No le podemos poner que sea uppercase porque en nuestro caso es uppercase todo el rato.
Y claro, es una pena.
Aquí esto se puede...
Ah, sí.
The Lion...
Ah, mira.
The Lion...
Vamos a poner cómo sería la velada del año 3, ¿no?
Claro.
At your size...
Es que claro, si se pudiese estirar, que creo que se pueden estirar, ¿eh?
Se pueden estirar, se pueden hacer un montón de cosas, pero en esta veo que no se puede.
Pues esta sería una idea.
Lo que pasa es que el text transform yo creo que esto no funciona.
No funciona aquí.
Entonces no va a hacer bien el ajuste.
Pero al menos esta sería la idea.
Lo que pasa es que es una fuente muy especial.
Podríamos, si fuese tan, tan importante, podríamos ponerla en línea.
Podríamos hacer un montón de cosas justo para evitar esto, ¿eh?
Pero bueno, vamos a intentar add fallback.
Y al menos cuando vayamos aquí al localhost 3000, cuando miremos esto...
Obviamente tendríamos que mirar el fallback en todas, pero bueno.
A ver.
Sin limitaciones.
3G rápido.
Esto ha hecho una caca.
O sea, no ha hecho...
No sé si es porque no soporta.
Porque fijaos que pega un cambio muy bestia.
Base 64, work 2.
Vamos a hacer esto.
Un momento.
Change font.
Vamos a hacer esto.
Porque esto me parece también interesante.
Me parece interesante que intentemos hacer esto, aunque mete un tocho ahí,
pero esto hace que se cargue seguro la imagen, la fuente.
Antes de que la...
Vamos a quitar esto, que no le ha molado.
Vamos a poner esto.
Un momento.
Y a ver.
Other properties as needed.
Vale.
Y esto era boxing, ¿no?
La fuente era boxing.
Vamos a ver si esto funciona.
También.
Para descartar que podamos mejorarla.
Vamos a ver.
Vale.
¿Veis que ahora no ha pegado?
Hay otro tipo de salto, pero no un salto de la fuente.
Al menos esa fuente no...
A ver si le ponemos lento.
Claro.
Ahora no hace falta que pongamos el preload, por ejemplo.
O sea, que podemos quitar el preload.
Este.
Que habíamos hecho este.
Y podríamos utilizar solo una de las fuentes.
Es que ahora que lo pienso, no tiene mucho sentido utilizar las dos.
Porque la Stripe...
¿Dónde la hemos usado, la Stripe?
La Stripe.
Esta.
La Stripe, en realidad, utilizando la boxing, si lo ponemos supercase, yo creo que ya funcionaría.
Y así nos quitamos una fuente.
Y bueno, eso que mejoramos, ¿no?
Quitamos.
Vamos a quitar la Stripe.
Esta la quitamos.
Y ya está.
Y a ver ahora.
Vamos a ver ahora.
Yo creo que esto tiene buena pinta, ¿eh?
Esto tiene buena pinta.
Esto tiene buena pinta.
Esto tiene buena pinta.
Vale.
A este paso te vas a 2G.
Bueno, pero porque es importante.
La diferencia esta...
Ya habéis visto que el Lighthouse le da bastante caña, ¿eh?
Vale.
Vamos a ver ahora cómo queda.
El drop este.
Hacemos la build.
Y vemos cómo ha quedado.
Quiero ver si somos capaces de conseguir, pese a utilizar una fuente, porque, hombre, estamos utilizando una fuente y quieras o no, las fuentes y esta fuente en concreto tiene un impacto muy negativo.
Quiero ver si somos capaces de optimizarlo al menos.
Ay, no.
Qué cabrón.
No pasa nada, no pasa nada.
Me tengo que registrar y ya está.
Estoy registrado.
Optimization Perfect.
No es Optimization Perfect.
Es que es súper importante el hecho de la experiencia del usuario.
Que des saltos tu página y todo esto.
Joder.
Es jodido, ¿eh?
Y sobre todo en móvil.
Entonces, es importante.
Por eso lo estamos haciendo también.
Vale.
He generado dos imágenes.
Esto se está desplegando.
Pues, bueno, pero si ya se ha desplegado, ¿no?
Bueno, yo creo que todavía hay alguna cosa ahí que podríamos arreglar.
Hemos empezado con 45 puntos.
O sea, que vamos a ver si al menos algo hemos mejorado o qué.
A ver qué.
Ya casi.
Uy, 75.
Hostia, todavía esto el renderizado este, ¿eh?
Ahora ese tiene que ser otro tema.
O sea, bueno, es que todavía nos falta lo de optimizar las imágenes, ¿eh?
El tamaño de solicitudes, tamaño de las imágenes.
Evitar.
A ver cuál es lo que ha detectado como...
Renderizado el mayor elemento.
Todavía es este.
Bueno, ahora fíjate que me pone que es la humoranz.
Hostia, pero esto es porque se le ha ido la olla, ¿eh?
Esto me parece que es porque se le ha ido la olla, porque es obvio que la humoranz no es la más grande.
O sea, el más grande de sus hermanos, Koku.
Ahora es ella.
Había dado 80.
¿Dónde había dado 80?
Ah, que antes había dado 80.
Ha bajado.
No, pero creo que ha bajado porque ahora está detectando.
A moranz como la que es la más grande.
Y antes nos lo había hecho bien.
Yo creo que si a todas las imágenes siguiéramos optimizándolo, lo haré después.
Lo haré después.
Si las seguimos optimizando, yo creo que subirá bastante, ¿eh?
Yo creo que subirá bastante.
Porque es que todavía las imágenes son bastante tochas.
O sea, si las pudiéramos bajar, pues yo creo que marcaríamos ahí un poco la diferencia.
La hemos optimizado, imaginar que las hemos optimizado bastante, pero es que esta imagen, esta imagen es bastante grande todavía.
Son 180K, entonces ocupa un montón, son un montón de imágenes y tendríamos que hacer, optimizarlas un montón.
No podríamos tener ninguna que sea más de 100.
Tendríamos que bajarlas bastante.
Y yo creo que se puede conseguir, ¿eh?
Así que lo haremos.
Bueno, voy a subir esto para que lo tengáis en el GitHub, que creo que ya había gente que había hecho alguna PR y todo.
Vamos a verlo.
Mira, aquí hay alguien.
Clip path.
Hostia, alguien ha hecho el clip path.
Añadido Jason con el clip path.
Joder, no jodas.
Mira, el de Cosco, en Peter.
Hostia, hostia.
Qué bueno esto.
Oye, muy bien, ¿eh?
Pues lo miraremos.
Que esto está súper interesante.
Pues muchas gracias.
Bueno, pero no ha estado mal, ¿eh?
O sea, hemos hecho al final, porque hemos estado ahí con la optimización, pero creo que le podremos dar caña.
Adiós, pongo por testigo, que vamos a conseguir, vamos a conseguir llegar a 100.
Bueno, amigos, que me voy.
Me voy, que es la Champions y ya es hora de que...
A mí, yo no lo voy a ver.
Yo me voy a hacer algo.