Cosas que vamos a hacer. Bueno, una cosa que está bastante chula y que es que no os lo he dicho.
¡Ay, cago en la leche! Que ahora me he acordado de algo. Es que tenemos que hacer cosas. Tenemos que hacer cosas.
A ver, voy a bajar primero una aplicación que me va a ayudar. Image Tool Plus, creo que se llama. Image Tool Plus.
Creo que es esta. Image Tool... Esta. Vale, vamos a descargar cosas.
¡Las imágenes! ¡Las imágenes, amigos! ¡Las imágenes! Vamos a poner los luchadores.
Vamos a poner los luchadores porque si no, no avanzamos con el proyecto y solo tengo dos luchadores y eso no puede ser.
Entonces, esto lo voy a poner pequeñito. Vamos a decir que las imágenes las transforme webp y aviv.
¿Vale? Quitamos esto. Y aquí tenemos imágenes de luchadores. Imágenes de luchadores.
No os preocupéis por el fondo porque el fondo lo vamos a hacer transparente.
Pero lo importante es que tenemos las imágenes tanto de los luchadores como también cuando están en pequeñito.
Así que vamos a hacer estas cosas que las vamos a descargar. Vamos a descargar las imágenes.
Voy a ponerle 2x. No, 1, 5. 1, 5 ya está bien. Vamos a descargar estas.
Todavía no tengo los que luchan en el Rey de la Pista, que son 10.
Entonces, por ahora vamos a poner a estos y luego pondremos los siguientes cuando los tengamos.
Mira, estos son como los pequeñitos para los pequeñitos.
Me faltarían los de Rey de la Pista, pero todo se vendrá. Todo se vendrá. Poco a poco.
Así que vamos a poner esto. Vamos a descargar también con fondo transparente. Importante.
Voy a poner 2x. Vamos a poner 2x. Descargar.
Y este está tardando lo suyo. Está tardando, ¿eh? Los avatares. Exacto.
Para seleccionar el tamaño al descargar es cosa de Canva. En este caso, sí.
En ese caso, sí. Lo que puedes hacer ahí es decirle que te lo haga 2x para que lo haga más grande.
Básicamente para que te lo suba a la máxima calidad. Y tu foto, yo no participo. Todavía.
A no ser que se caiga alguno. Y entonces pueda pasar alguna cosa que no puedo comentar.
No, es broma. Ojalá, ¿eh? Estaría chulísimo. Sería tremendo.
Y aquí, diseño sin título y diseño sin título 1. Me encantan estos nombres muy indicativos de todo.
Vale. La he cagado. La he cagado porque estos los he hecho con fondo.
Y estos, estos los he hecho bien. Vale. Perfecto.
Bueno. Pues estos tengo que sacarlos otra vez. Así que estos tengo que sacarlos sin fondo.
Sabía que se me olvidaba algo. Fondo transparente. 2x. Descargar. Venga. Vamos otra vez. Vamos otra vez.
Bueno. Mientras, vamos a hacer una cosa. Mientras, aquí tengo estas imágenes.
Tú, tú, tú. Que serían los avatares de cada uno de los boxeadores.
Lo que puedo hacer es optimizarlas ya.
Tengo esta herramienta que está bastante chula para no ir uno a uno, que es un poco rollo.
Entonces, podemos arrastrar aquí.
Y esto ya pilla las imágenes. Es de pago esta herramienta. No sé si son 7 o 8 euros o dólares.
Pero al menos así te los optimizas súper rápido y no tienes que ir a la línea de comandos y tal.
Y además puedes hacer una preview para ver cómo queda. Está bastante chulo.
Lo que pasa es que no sé por qué nunca lo utilizo porque así os enseño Squash, que me gusta mucho.
Pero así lo podéis decir a todo lo que queréis codificarlo.
En este caso, webp y aviv. Voy a poner aquí más calidad. Voy a poner que aviv 85 y 85.
¿Vale? Y lo que podemos decir aquí también el máximo de ancho.
Como son de 2.000, yo creo que con 1.500. Yo creo que ya irá. Yo creo que ya irá. 1.500.
Entonces, te dice aquí cuánto lo va a transformar. De 2.160 a 1.500.
¿A qué carpeta la tenemos que poner? Le voy a decir en la original, justamente la misma donde tenemos esto.
¿Le tenemos que dar acceso? Le digo que sí.
Y luego aquí nos dice solo guardar en el caso de que el archivo sea reducido.
Le voy a dar porque hay veces que te puede sorprender que a lo mejor cambias algo y no estás reduciendo el tamaño y sin la calidad y cosas así.
Entonces, le voy a poner esto y le voy a hacer un overwrite.
Y aquí que dice que modifique el nombre, le voy a decir que añada un sufijo porque...
¿Vale? Vale, que tengo que darle acceso.
¿Vale? Que añada un sufijo porque estas imágenes que teníamos por aquí, que habíamos hecho, tienen el sufijo de small, me parece.
Aquí, si vamos a Boxer, ¿veis que pone aquí small?
Pues claro, a estas, que son como los avatares, digamos, vamos a poner guión small.
Y está muy chulo porque ya ves aquí cómo te va a quedar. Guañar guión small.extension.
Y ahora, con esto, voy a hacer un play sound.
Podríamos darle una preview, pero le damos a start ya, que lo vaya haciendo.
Y ahora va transformando todas, ¿ves? Y ya ha terminado.
Bueno, ya ha terminado porque solo me ha hecho una.
¿Por qué me has hecho solo una?
Es como que solo ha seleccionado una.
Espérate, pero si tienes que hacerlas todas.
Solo me ha hecho una.
La madre que lo parió.
La madre que lo parió.
¿Y cómo? ¿Por qué no me las selecciona?
¿Por qué no me las selecciona?
¿Por qué no puedo seleccionarlas todas?
Las tengo que seleccionar una a una.
Cago en la leche.
Bueno, a ver, pues ya está.
Venga, start.
Vale, ahora sí que las está haciendo todas, ¿eh?
Vale.
Vale, con esto ya tendríamos esto.
Ahora lo pasamos aquí, lo movemos para acá.
Hostia, no, el replace este no.
Odio.
Ah, bueno, menos mal.
Es que el replace de Visual Studio Code es una mierda porque te va uno a uno.
Te va preguntando cada uno de los archivos, sea para aceptar o para cancelar.
Si tú haces un replace de 50 archivos, te va preguntando uno a uno.
Espero que eso lo arreglen algún día porque me da una rabia, pero horrible, ¿eh?
Horrible.
Vale, pues aquí tenemos a Lana en PNG también.
Y no me la ha hecho en...
No me la ha hecho en Aviv.
Hostia.
Es que no los había terminado todavía.
No pasa nada.
No pasa nada.
Vale.
Lo voy a hacer desde el editor este porque si no, ya os digo que es un poco rollo.
Voy a fusionar aquí todas las ventanas.
Vamos a copiar aquí esto.
Todas estas.
Inboxers.
Y aquí mucho mejor porque te lo dice de una.
Te dice, ¿lo quieres reemplazar todo?
Sí, reemplazar.
Vale.
Pues ya tendríamos esto.
Bueno, vámonos a la web, al menos a ver si nos están saliendo los pequeñitos.
A ver si nos salen.
Ah, claro.
Tenemos que poner select en el index.
Tenemos que descomentar.
Vamos a poner select your boxer.
Creo que era.
Select your boxer.
Tú, tú, tú.
Vale.
Select your boxer.
Y esto está por aquí.
Vale.
Ahora mismo es que en boxers.ts tenemos el Mariana Plex, el Mariana Plex, el Mariana Plex.
¿Vale?
¿Cómo?
Vale, vale.
Están aquí comentados.
Vale.
Pues vamos a quitar todos estos.
Los vamos a quitar.
Los vamos a poner aquí.
Tú, tú, tú.
Y todos estos.
Vale.
Will, Peldaños.
Estos son del Rey de la Pista.
Unicornio, Karches, Skain, Folagor.
Vale.
Xelao ya.
Este ya es.
Todos estos.
Alana, Zeling, Nisaxter, La Cobra, Guanyar, Agustín.
Vale.
Estos ya.
Los de Rey de la Pista lo añadiremos.
Pero los tenemos que hacer un poco más tarde porque todavía no hemos podido sacar las imágenes.
Pero las sacaremos.
¿Vale?
Entonces, a ver si con esto, Mariana Plex.
Vale.
Yo creo.
Vale.
Pues ahí tenemos al menos.
Ahora arreglaremos luego los estilos porque creo que podemos arreglar algunas cositas.
De hacerlos más grandes.
Y aquí.
Ah, carrera.
Carrera es que creo que esto está mal escrito.
Porque creo que es con tres As.
Vale.
Ahí está.
Vale.
Luego lo hacemos más grande.
Y lo que nos faltaría aquí es cambiar algunas cosas.
Porque además aquí ahora no sé qué ha pasado.
Que hace este efecto raro y tal.
Que creo que lo hizo Joel.
Que se animó de intentar hacer una cosa que está curioso.
Pero claro, queda raro porque se va aquí arriba.
Y creo que con el nuevo diseño de izquierda y derecha ya no necesitaremos hacer esto.
De subirlo para arriba y hacer el blur ese.
Así que lo haremos así.
Luego, ¿qué más?
Tenemos las imágenes.
Ah, me faltan las otras imágenes.
Claro.
Así que cuando...
Aquí creo que estaba puesto que cuando hacíamos el click.
Select Job Boxer.
¿Ves?
Cuando hacemos el click.
Vamos a hacer el mouse Enter.
¿Vale?
Que cuando hagamos el mouse Enter que cambie la imagen.
Pero claro, nos faltan las imágenes grandes.
¿Veis?
Que nos faltan las imágenes grandes.
Así que al menos tenemos las banderitas, si no me equivoco.
Las banderitas, por ejemplo, Shelao es de Chile y ya aparece ahí.
Así que vamos a hacer las imágenes grandes para que al menos veamos a los cracks en grande.
¿Vale?
Esto lo vamos a poner por acá.
Diseño título 1.
Tú, tú, tú.
¿Por qué esto?
Ah, eliminado.
Si la descarga no ha empezado.
Joder.
Ahora no sé.
Es que no sé si ha empezado o si no ha empezado.
Fondo transparente.
Otra vez.
Falta el nombre en grande.
Claro, claro.
Falta el nombre en grande.
Lo vamos a hacer a mano el nombre en grande.
Lo vamos a hacer el nombre en grande.
Lo vamos a hacer a mano.
Que creo que está interesante.
Que pase sobre Shelao y que se cambie el idioma.
No, ¿por qué?
¿Por qué vamos a hacer eso, hombre?
¿Cómo abres el buscador de Visual Studio Code para moverte entre archivos?
Comando P.
Comando P.
Dibujado no, utilizando la fuente de Atomic, que para eso la tenemos.
¿Veis?
No está descargando.
Si la descarga no ha empezado, haz clic aquí.
Vale, pues hago clic aquí.
Vale, diseñar título.
Ahora sí que ha empezado.
68 megas las imágenes.
Luego las arreglamos.
Vale, vamos a poner aquí avatares y grande.
Y en grande, pues aquí tenemos todas estas imágenes.
A ver si Image Tool.
El Image Tool.
Todas estas imágenes.
Pues hacemos un poco lo mismo de antes.
Las ponemos aquí.
Le damos acceso a la carpeta.
Yo creo que 1500 también será suficiente.
Y aquí en el sufijo, que habíamos puesto Small, aquí tenemos que hacer Big.
Y le vamos a dar...
A ver, yo creo que ya con esto no se me escapa nada, ¿no?
Pues Start.
Y vamos a optimizarlas a WebP y a Aviv.
Está chulo porque también se puede ver...
Mira, si lo hacemos grande.
Está bien porque puedes ver cuánto ocupa cada una.
Lo malo es que, mira, estamos aquí optimizando a Aviv.
Y fijaos que WebP en algunos casos tiene mejor rendimiento que Aviv.
Que Aviv se supone que es más moderna.
Entonces, podríamos intentar por aquí, pues a lo mejor optimizar o probar cosillas.
A ver, por el Lossless.
Bueno, pero el Lossless sería peor incluso.
Podríamos ir probando a ver si alguna la optimiza realmente.
Pero es que me parece que en este caso...
Mira, Lossless sería más.
Es que claro, Lossless es sin pérdida de calidad.
Tendríamos que bajarle un poco aquí a la calidad de Aviv.
Que a lo mejor, aunque la bajemos, no se va a notar.
Y una cosa muy chula es que podríamos ir aquí a Nixster.
Y darle aquí a Preview para ver cómo quedaría la Aviv.
Y ves, podemos hacer la diferencia.
Esta sería la original y esta sería la de Aviv.
Fijaos que, o sea, incluso te dice, bajándole un 61%, quedaría así la calidad.
Lo cual está bastante bien.
Lo que...
Esto lo vamos a poner en Disable, porque no tiene sentido que lo dejemos así.
Y a ver ahora.
A ver si hacemos la Preview.
Y podemos mirar el antes y el después.
Esta herramienta, la verdad, es que está muy chula.
Mirad ahora, 150K.
Y nada, es que no ha cambiado casi nada.
No ha cambiado casi nada.
Y esto sería 150...
Bueno, pues vamos a darle otra vez y ya está.
¿Cómo se llama esta herramienta?
Se llama Image Tool Plus.
Es de pago, ¿eh?
Por eso.
Pero la verdad es que me gusta bastante.
Me gusta mucho el cómo es la...
Hostia, ¿y por qué Plex?
Ah.
¿Por qué?
Porque se han quedado las de antes.
Ahora lo arreglo.
Eso no me gusta.
Eso no me gusta de la UI.
No me gusta.
¿Por qué me selecciona de vez en cuando uno?
Porque le doy un clic.
Pero, joder.
¿Y por qué no puedo hacer así, comando así que lo hace?
Pensaba que no lo hacía.
Vale.
Ya tenemos optimizadas las imágenes.
Nos vamos aquí a Boxers.
Y nos vamos aquí al editor.
Vamos a pillar todas las imágenes grandes.
Todas las imágenes grandes.
Las vamos a poner por aquí.
Las vamos a reemplazar.
Las vamos a reemplazar.
No.
Lo que os decía de reemplazar.
Y va uno a uno.
Y no la puedes cancelar.
Si le das a cancelar, da igual.
Te pregunta el siguiente, ¿sabes?
Bueno, menos mal que no lo tenemos muchos.
Lo odio eso.
Lo odio con toda mi fuerza de Visual Studio Code.
No entiendo por qué.
No entiendo por qué lo hacen.
Pero bueno.
Vale.
Pues vamos a ver cómo va quedando esto.
Vale.
¿Por qué Shelao no sales?
¿Por qué no sales, Shelao?
Shelao.bic.avis.web.
Ay.
Se ha quedado el nombre de Blitz.
Ahí.
Se ha quedado el nombre de Blitz.
O sea, que hay otros que sí que aparecen.
¡Ojo!
Ahí sí que aparecen.
Vale, vale.
Lo que nos falta son los títulos, justamente.
Nos faltan los títulos.
Vale, vale, vale.
Bueno, pues no sé por qué aquí se me ha colado el nombre de Blitz.
Que debe ser de alguien que tiene el nombre de Blitz.
Sí, Amaya Blitz o algo así.
Pues claro, se me ha colado.
Shelao.
Bueno, este da igual.
Este no importa.
Este es que de hecho lo podemos eliminar.
Ese archivo no es importante.
Y qué más.
Virus.
También se me ha colado el Blitz.
¿Qué?
¿Vosotros sois muy del boxeo este de la velada que estáis ahí?
Es que he visto mucho, mucho hate últimamente.
Unos piques.
Yo no sé la gente por qué se pica tanto, tío.
¿Por qué la gente no es feliz y ya está?
¿En todos aparece la imagen rota?
No, en todos no.
Am a Blitz.
Eso, perdón.
Perdonadme.
Am a Blitz.
Vale.
Pues ahora sí que aparece en todos.
Pero veis, es que este efecto es un poco raro.
Que sube para arriba, para abajo.
Déjame.
Sube para arriba, para abajo.
Esto lo voy a quitar.
¿Vale?
Porque lo primero es que no lo vamos a utilizar.
Y no tiene mucho sentido.
Entonces, vamos a arreglar cositas.
A ver.
Lo primero, he visto una cosa de los AVIF.
Que alguien estaba utilizando la etiqueta Picture y dentro de los Source.
Y esto está muy chulo, la verdad.
Porque esto no nos permite cargar WebP o AVIF.
Dependiendo del soporte que tenga el navegador.
Pero no es exactamente así como tendríamos que hacer.
O sea, el image este sería el fallback.
Por lo tanto, este elemento sobra.
Solo tendríamos que poner Source, AVIF.
Y el image siempre sería el fallback.
Así no repetimos todo el rato, ¿sabes?
Es innecesario ponerlo dos veces.
¿Qué más?
Este es Mariana Title.
Esto lo vamos a hacer ahora a mano.
Que os dije que lo haríamos a mano.
Y luego aquí, pues lo mismo.
Este WebP ya sería directamente el fallback.
Por lo tanto, aquí se pone el fallback.
Y ya está.
Así que esto sería para el tema del Source.
Ahora, claro, aquí también pasa un poco lo mismo, ¿no?
Que hay que cambiar.
¿Ves?
El Source y Source 1.
Bueno, lo único que habría que cambiar.
Este lo podríamos quitar.
Esto es el JavaScript que actualizaba las imágenes.
Esto ya no lo necesitamos.
Y el AVIF.
Este sí que cambiaría.
El image.
Claro, este sería WebP.
No sería el AVIF.
Porque el image es el fallback.
No me gusta mucho tampoco este GetElementsByTagName.
Pero bueno, solo ya lo cambiaremos.
Y aquí, este ConsoleLog.
Yo entiendo que se habrá cambiado.
El AsideAnimation entiendo que es el efecto ese que hace tal.
Que me parece que es una idea buena.
Pero creo que vamos a ir a por otro.
Como vamos a ponerlo son los lados.
Yo creo que es demasiado complicado.
Demasiado complicado el tema este, ¿no?
Vale.
Bueno.
Ya cuando os tengamos a los lados, yo creo que ya quedará mejor.
Ahora haremos unos arreglos en las imágenes.
Porque veis que se caortan directamente y todo esto.
Eso lo vamos a arreglar.
No os preocupéis.
Lo primero que voy a hacer es que aquí que pone Elige tu luchador.
Vamos a poner justo abajo.
Aquí.
Vamos a ponerle un...
Es que lo teníamos en el diseño.
Vamos a poner un Typography.
Como P.
¿Vale?
Vamos a poner un subtítulo en un momento.
Variante.
Body.
Color.
Neutral.
Class.
No sé si puede utilizar el Class.
Text Center.
Y vamos a poner aquí que esto viene del diseño.
Conoce los detalles de cada boxeador.
¿Vale?
Vale.
Vale.
Entonces ya tendríamos esto.
Vamos por más casitas.
Vamos a quitar primero la imagen del título.
Porque la imagen del título...
Claro, Mariana sí que tiene la imagen que queda bien.
Pero claro, son imágenes.
Entonces vamos a hacerlo mejor.
Vamos a hacer que en lugar de que sean imágenes...
Estos title, este boxer title, esto que tenemos aquí...
Claro, no podemos sacar todas las imágenes.
Es que no nos va a dar la vida.
Sacar todas las imágenes y que todas quedan bien.
Y es verdad que se pierde ese efecto wow de que yo soy Plex.
Aparezca a la izquierda y a la derecha.
Porque fijaos aquí.
Yo soy Plex.
Aparece así, ¿no?
Yo soy Plex.
Entonces, al menos vamos a hacer que primero que se vean en todos los sitios con el texto de la fuente que la tenemos.
Y luego ya nos preocuparemos de ajustarlo o todo esto.
Vamos a poner aquí boxer title.
Vamos a poner text 6XL font atomic.
Y por ahora...
No sé si ponerlo aquí o fuera.
Bueno, no sé.
Luego lo pienso.
Vale.
Esta imagen la quitamos y vamos a utilizar...
Vamos a utilizar un DIP.
Un DIP, sí.
Un DIP.
Luego ya nos preocuparemos también de todo lo demás.
Atomic title.
Vale.
Y aquí es donde vamos a poner...
Por ahora voy a poner Mariana.
Bueno, es que al principio tiene que ser Mariana.
Utilizamos atomic title.
Primary text center.
Vale.
Vale.
Queda bastante pequeño.
Ahora tendríamos que hacerlo más grande.
Yo creo que esto debe ser bastante bestia.
Algo...
Eh.
Eh.
¿Qué ha pasado?
¿Será que no existe?
¿Hola?
¿Por qué no...?
Ah, porque es atomic title.
Y esto es boxer title.
Ahora sí.
Vale.
Lo que...
A ver.
Cosas que tenemos que hacer.
Esto tiene que tener...
Esto, de hecho, antes tenía el absolute, ¿no?
Que tenía el botón 14 este.
¿Vale?
Allá sería así.
Podríamos tener el text grab max XL.
Bueno, más o menos, quedaría más o menos igual.
O sea, no exactamente igual.
Vale.
Podríamos hacerlo un poquito más pequeño, a lo mejor.
Pero al menos así.
Hostia.
Más pequeño.
A ver, ¿cómo puede ser esto?
¿Cómo puede ser esto?
MD, LG, este.
Bueno, pues quedaría así.
Este corte ahora lo vamos a arreglar de la imagen.
No os preocupéis.
Y lo bueno de esto es que ahora ya, si aquí el title que tenemos por aquí abajo, el boxer title, que teníamos...
¿Ves?
Aquí antes se cambiaba el source.
Este title source, que antes cambiábamos la imagen del boxeador, en lugar de esto, lo que vamos a hacer es que esto cambie el nombre del boxeador.
¿Vale?
¿Esto es necesario?
Puede ser undefined, no sé qué.
Vale, pues sí, es necesario.
¿Vale?
Hostia.
Espérate.
¿Por qué este boxer title?
Ah, este alt fuera también.
Y espérate que aquí me he cargado algo de JavaScript.
No puede leer propiedad de null leyendo estilos.
El boxer title...
Ah, porque me lo he cargado.
Joder.
Claro, estoy pensando, ¿por qué no me parece?
Y es que me lo he cargado.
Y esto es porque aquí debería ser este, ¿no?
Entiendo.
Yo creo que sí.
A ver ahora.
Vale.
Vale, ahora veo que...
¿Veis que salen raras las letras?
O sea, salen, pero raras.
Salen como a mitad.
Vale, no pasa nada.
Eso es porque para optimizar la fuente quitamos las minúsculas.
No, las mayúsculas.
Entonces, lo que vamos a tener que hacer es que este nombre vamos a tener que pasarlo a tu lowercase.
¿Vale?
Y ya está.
Y esto ya no haría falta.
A ver, string and define is operational tipo string.
Bueno, pues nada.
Hace esto.
No es caso.
Y yo soy Plex.
Claro, ¿veis?
Yo soy Plex.
Como veis, sale en una sola línea porque es muy difícil.
Pero bueno, yo creo que aún así, pues ya está bien, ¿no?
¿Qué os parece?
¿Qué os parece que van apareciendo así los títulos?
Amablitz va junto.
Vale, pues ahora lo arreglamos.
Amablitz va todo junto.
Amablitz.
Sí que hay un tema raro que ahora lo vamos a arreglar porque todo este tema de opacidad también me lo voy a cargar
para que sea más directo porque es como funcionan más en los videojuegos.
A ver, decís que Amablitz va todo junto.
Pues esto, no sé si lo hice yo.
Ah, es Amairani.
Eso, Amairani.
Amairani.
Amablitz.
Vale, pues Amablitz.
Vale.
Vale, yo creo que mejor.
Es que en los videojuegos normalmente esto va más a saco.
Sabes que lo cambia directamente.
Nos ayudaría, nos faltaría el skew este.
O sea, como para ese toque que hace el Boxer Title.
Vale.
Y aquí podríamos hacer skew y 6.
Yo creo que con esto...
Rechulón, ¿vale?
Yo creo que con esto nos queda el título mucho mejor.
Yo creo que podríamos intentar arreglar también un poco el hover.
A ver, nos faltarían cosas todavía, ¿eh?
No os preocupéis.
Vamos poco a poco.
Pero ya van apareciendo un poco los...
El corte bruto de la foto abajo cuando se suena no se ve muy bien.
A ver.
Y es sí.
Lo he dicho cuatro veces antes.
Y eso que nadie me lo ha dicho.
Pero que iba a corregir la imagen.
No puedo hacer las cosas a la vez.
No puedo arreglar el texto y de repente...
¡No puedo!
No soy todavía la inteligencia artificial Devin, que funciona de forma autónoma.
O sea, que no te preocupes.
Que lo vamos a arreglar.
Sí.
Este corte lo vamos a arreglar ahora.
No os preocupéis.
Se calentó.
Anda.
No te enojes.
¿Cómo me voy a enojar?
Me encanta que hago estas cosas y ya no te enojes, no te enojes.
Pero joder.
Entonces al shock es que...
¿Qué hacéis?
¿Le llamáis a la policía directamente?
¿Qué me voy a enojar?
No me enojo.
Es para darle un poquito de salseo.
Hombre.
Qué broma.
Venga.
Vamos a arreglar...
Venga.
Vamos a arreglar lo de la imagen.
Que veo que os preocupa bastante.
Vamos a arreglar lo de la imagen.
Y para eso vamos a utilizar una cosa muy chula.
Porque una cosa que pasó el otro día es que fijaos que...
En el diseño, aquí, justamente...
¿Veis el diseño del Mariana?
La imagen.
Ya tenía como un efecto opacidad que me puso el diseñador.
Y yo me descargué la imagen y ya con efecto opacidad quedaba muy bien y tal.
Pero ¿qué pasa?
Que normalmente...
Te voy a decir una cosa muy interesante.
En el desarrollo web suele ser mala idea que este tipo de efectos lo tenga la imagen ya aplicada.
¿Por qué?
Porque normalmente eso hace que la imagen ocupe más porque la opacidad en imágenes como PNGs, webpads y tal son muy costosas.
El hecho de hacer una opacidad que encima va poco a poco va a hacer que tu imagen sea bastante tocha.
Que ocupe un montón.
Entonces, ¿qué es lo que puedes hacer?
Lo que puedes hacer en realidad es utilizar un mask.
¿Qué es un mask?
Pues un mask image es que le vamos a decir que cree una máscara encima de la imagen.
En este caso, si vamos aquí en el BIC, que sería...
A ver, en esta imagen.
Esta imagen de aquí.
Vale, ya teníamos un drop shadow.
Que yo creo que este drop shadow, de hecho, podríamos también un poco hacerlo más...
Mero bestia, ¿no?
Que a lo mejor es un poco bestia.
Tendríamos que arreglar alguna cosa, pero bueno, da igual.
El tema.
Aquí tenemos el filtro del drop shadow, ¿vale?
Y también podríamos poner el mask image.
Y esta sería un poco la idea.
Lo que podemos hacer es decirle, oye, queremos que hagas una máscara de la imagen, que esto es una cosa que se suele utilizar mucho en Photoshop,
en el que hagas un gradiente que vaya hacia abajo, porque justamente queremos que nuestro fade a transparente sea de arriba a abajo.
Y le decimos que al principio sea transparente totalmente.
Bueno, no, no.
Tiene que ser al revés.
O sea, tendríamos que decirle que al principio sí que tenga color.
Yo utilizo el black.
No sé, porque estoy más habituado a esto.
Y luego que pase a transparente.
Y cuando es transparente, dejará de haber imagen.
Esta es la clave de lo que queremos hacer.
Ahora lo ajustaremos un poco.
A ver cuál es el que queda mejor.
Pero, ¿ves?
Con esto ya estamos consiguiendo este efectillo.
Como veis, es muy bestia.
Pero ahora lo arreglamos.
No os preocupéis.
Podemos ir pillando la imagen y aquí, fijaos, que si yo le voy subiendo esto, ¿ves?
Conforme lo vas subiendo, pues va diciendo, vale, pues, bueno, tiene que ser menos de 75 para que haga la transición.
Podemos llevarlo al 80 y que el ser transparente sea al 100.
Y así ya hace esto.
Fíjate qué maravilla.
¿Ves?
Que es justamente lo que estaba diciendo.
Para que no pegue el corte, pues hacemos esta transición en la que con el mask image queda súper bien.
Está muy chulo.
Esto no sé por qué mucha gente no lo utiliza, porque realmente te va a sorprender.
Es una cosa que está bastante con prefijos.
Se utiliza mucho.
96%.
96,19.
O sea, tiene un soporte bastante tremendo.
96% es que es casi todo.
O sea, ¿qué es lo que no lo usará?
Safari 15.3 es el peor y es con prefijos.
O sea, navegadores modernos lo puedes utilizar en cualquiera.
Y fíjate la diferencia.
Esto sería con el corte y el mask image.
Le estamos diciendo.
Imagina, entiende que el black sería como decirle, quiero que me pintes la imagen hasta el 80%.
Y del 80% al 100% quiero que me hagas el degradado transparente.
Y ya está.
Y ahí lo tendías.
No se puede animar el mask image.
Por desgracia, no se puede.
Todo lo que es linear gradient no se puede animar.
O no se puede animar fácil, por desgracia.
Y esto ya tendríamos ese efectillo que es lo que hace que quede de esta forma.
Que creo que queda bastante bien.
Así que estos valores son los que vamos a utilizar por aquí.
Y ya tendríamos este por aquí.
Mask image, linear gradient.
Lo ponemos aquí.
Y ya lo tenemos.
Y esto lo podéis hacer con cualquiera.
Veis aquí que también hay un corte.
Esto también lo vamos a hacer aquí.
Y hombre, ahora queda mucho mejor.
Al que estaba agobiado, ahora queda bastante mejor.
De hecho, fijaos que ahora hay un problema.
Porque aquí, veis que aquí esto, como que lo de atrás llama bastante la atención.
Lo mismo podríamos hacer.
Y bueno, esto sí que me suele costar y yo tendría que mirar.
Pero lo podríamos hacer incluso que fuese no solo lineal, sino que se puede hacer también radial.
Que ese no me va a salir de memoria, ya os digo.
Porque, ah, bueno, es que lo tengo aquí en el fondo.
Bueno, lo puedo quitar del fondo.
O sea, puedo poner aquí un deep.
Deep, deep, deep, deep, deep, deep, deep, deep, deep, deep, deep.
Básicamente, sacar esta imagen de aquí.
Esto, lo vamos a poner aquí.
Es que así vamos a poder hacer que este deep tenga también un mask image.
Como fondo, que yo recuerde, no se puede hacer un mask image.
Le vamos a poner aquí un absolute, insert 0.
Vamos a hacer que quede por debajo.
Lo vamos a centrar.
Creo que flex y todo esto no hace falta.
Pero estos de aquí, de VG Center y todo esto, esto sí que lo vamos a necesitar.
¿Vale?
Y ahora lo que sí que podemos hacer aquí, pues es lo del mask image que habíamos hecho antes.
O sea, aquí tendríamos el background image.
El background size.
Y aquí vamos a poner el mask image.
Y a ver, ahora para empezar, pues vamos a hacer algo así.
Luego veraré cómo queda y lo podemos ir ajustando.
Y al menos, ¿vale?
Veo que ha sudado, ha sudado completamente de mí.
Ha sudado completamente de mí.
¿Por qué ha sudado de mí?
Vamos a verlo.
Absolute.
Ah, no.
Sí que se hace, pero se ve muy poco.
Esto porque vamos a tener que subirlo más.
Y esto vamos a tener que hacer algo así.
Algo así.
Queda bien.
Bueno, creo yo que queda mejor, ¿no?
No sé, ¿qué opináis?
A ver, creo que lo ideal sería hacer un radial gradient.
¿Sabes?
O sea, lo que pasa es que me va a costar la vida.
Me va a costar.
No tengo ni idea, sinceramente.
Tendría que ponerme a buscar un buen rato y tampoco quiero aburrir.
Haz una PR.
Pero con un radial gradient también podríamos hacer que, ¿sabes?
Que sea redondo.
Entonces, en lugar de ser lineal, podríamos hacer que sea redondo y podría quedar incluso mejor.
Porque así lo que haría es que aquí no afectaría y esta parte sí que se vería más.
Y podría quedar muy chulo.
A ver, 60.
70.
Claro, veis que ahí ya 50.
Yo creo que sobre 50.
Pero creo que con el radial quedaría mucho mejor.
Quedaría mucho mejor.
Para que luego veáis que no hay que saber sobre todo de memoria porque es que es imposible.
Así que yo creo que con estos valores bien.
Y nos faltaría también los de las imágenes pequeñitas, ¿no?
Boxer image.
Boxer image.
Boxer image.
Este de aquí.
Vale, pues este igual.
Mask image.
Linear gradient.
To bottom.
Black.
85%.
Transparent.
100%.
Esto del transparente al 100% significa que del 85% al 100% va a ser como ese fade out en el que va a ir desapareciendo la imagen.
Pero hay veces que a lo mejor queréis como que vaya más rápido.
Pues podéis decirle 90%.
Entonces solo la transición de imagen a transparencia va a ser un 5% y del 90% al 100% va a ser 100% transparente.
Lo digo por si queréis apurar en algún momento por alguna cosa, ¿vale?
Vale, ¿veis que ahora ha quedado así?
Mucho mejor, ¿verdad?
Creo que queda mucho mejor.
Y ahora ya, pues ya tenemos este efectillo mucho más integrado.
Me gusta, me gusta.
Vale, pues venga.
Más cositas, más cositas.
Vamos a intentar arreglar el hover.
A ver qué tal.
Radial gradient.
Ah, mira, alguien me ha puesto...
¿Sí?
Tan fácil como eso.
Elipsa...
Joder.
¿Alguien me ha puesto ahí un radial gradient?
No sé.
Tan fácil como eso.
A ver si me dices...
Lo voy a probar.
Lo voy a probar.
Si no funciona, te llevas el ban.
Es broma.
Este.
No, en este no era.
Era en este.
Dice que es radial gradient.
Es que yo me imagino que...
Bueno, a ver.
Si tú me dices que sí, pues será que sí.
Mástimo.
Más timado.
Me ha estimado.
Sabía que me había estimado.
Baneado.
Vamos a ajustar un poquito el hover.
Que el hover todavía le queda...
Le queda alguna cosa ahí que yo creo que podemos arreglar.
De hecho, como que se ven muy pequeñas las imágenes.
Esto lo arreglamos ahora porque yo creo que esto no tiene mucho sentido.
Hay un efecto ahí súper rarísimo.
Cuando se hace el...
¿Sabes?
Cuando se hace el resize.
Que queda una cosa muy rara.
A ver.
¿Qué le pasa a esto?
¿Por qué sale tan pequeño?
¿Y cómo lo vamos a arreglar?
Porque no me da la gana que se vea tan pequeño con lo bonito que es todo esto.
Bueno.
Vamos a ver.
Al Boxer Snap.
Por ahora, vamos a hacer que esto sea más grande.
Display Flex.
Y Flex.
Hostia, es que hay dos Boxer Snaps.
Ah, claro.
Porque uno es de la media query y tal.
Vale.
Bueno, pues vamos con este.
Overflow Hidden Display Grid.
A ver.
Hostia, es que esto es una mezcla de entre Apply y No Apply.
Esto tenemos que arreglarlo.
No puede ser que tengamos una mezcla de Tailwind con CSS en unos sitios.
Porque entonces ya sí que esto nos vuelve locos.
Si mezclamos Tailwind con CSS, locurón.
Locurón.
O sea, locurón.
Total.
Vale.
Todo esto tenía sentido en su momento.
Por ahora, vamos a petárnoslo.
Grid Column Span.
Todo esto fuera.
Boxer Snap.
Vale.
En este caso, tenemos el Overflow Hidden.
El Padding.
Yo no sé si el Padding este tiene sentido.
Yo por ahora lo voy a quitar.
Y aquí vamos a hacer que por ahora sean seis.
Y al menos así deberían salir en dos líneas.
¿Vale?
Vale.
Al menos un poquito mejor.
¿Vale?
Creo que se cortan por arriba.
No sé si me ha dado la sensación que se corta.
O el Mariana creo que se corta un poco.
Bueno, eso habría que quitar un Overflow que debe haber por ahí.
Vale.
Luego, Boxer Link.
El Boxer Link que tenemos Flex H20.
Vamos a darle bastante más caña a esto.
Size 40 o algo así.
Espérate.
Espérate.
Que este Boxer Link...
A ver, ¿cuánto va a haber aquí?
20.
Es que, claro, como hay una media query, no vaya a ser max width, no sé qué.
Vale.
Vamos a hacer esto aquí.
Apply.
Size.
No sé si he puesto 40 antes.
Transition.
Claro, todo.
Todo hace transición.
Aquí lo que habría que ver es lo que necesitamos hacer transición.
Esto es una cosa que a veces tenemos un poquito de peligro.
Vale.
Aquí veo que no me está, no está afectando y no está afectando seguramente por culpa de esto.
Vale.
Ahora está rota la imagen.
¡Uy!
¿Qué ha pasado?
Hostia, me ha petado el...
Me ha petado el navegador.
A tomar por culo navegador.
La madre que me trajo.
Vale.
¿Por qué esto sale regulinchis?
Bueno, vamos a verlo.
Yo me imagino...
Pero veis que se anima.
Eso es porque hay un transition all.
Están prohibidos.
Los transitions all están prohibidos.
Están prohibidos porque no se tiene que transicionar todo.
Si se transiciona todo...
Vale.
Todo este tema del blur, esto creo que lo podemos quitar porque ya no lo estamos utilizando.
Esto del app...
El transitional es la muerte.
Es la muerte porque al final cualquier cosa que se hace una transición...
Por ejemplo, si aquí lo que se tiene que hacer es la transición...
A ver, vamos a buscar el BoxerLink.
El BoxerLink.
Vale.
Este es el background.
BoxerLink hover.
Esta es la opacidad.
¿Vale?
Y luego aquí sería el BoxerImage.
Vale.
Pues si es la opacidad, pues le ponemos la opacidad.
Y ya está.
Ponemos opacity.
Opacity.
A mí parece que eso es demasiado, pero bueno.
Eso por un lado.
¿Vale?
Vale.
Luego, ¿por qué salen así regulinchis?
En algún...
Hostia, es que en este transition all y sin all la altura.
Vale.
Pues otra vez lo mismo.
¿Qué está pasando aquí?
Pues que aquí cambia el opacity.
Parece ser.
Este tampoco lo necesitamos ya.
Vale.
Background.
Ni siquiera me queda claro que este background necesite realmente...
El background este...
Transition.
Es que no veo que este background con un hover se esté afectando.
Es que no me está afectando.
Es que esta transición o se ha quitado en algún momento por alguna cosa o lo que sea.
Vale.
Venga.
Vamos a ver ahora aquí.
La imagen.
Claro.
Este 100%.
With 100%.
Nos faltaría aquí un object.
Fit.
Cover.
¿Vale?
No sé si un cover o un contain.
Cualquiera de los dos ya nos serviría.
Para que al menos...
Al menos quedase un poquito mejor.
¿Vale?
Entonces, vámonos con las imágenes.
Boxer image.
Y aquí vamos a poner...
Object.
Fit.
No sé si he puesto al final el cover o el contain.
Vale.
Pero creo que mucho mejor.
Vale.
Y ahora el problema está en el overflow.
Hay un overflow por ahí que nos está...
El aside.
Este sí que tiene sentido.
Y este creo que también.
Entonces, ¿cuál es el que nos está...?
Hay por ahí un overflow que está cortando las imágenes.
¿Ves?
Que las está cortando.
En su momento está más corrupto.
Es lo que no me gusta de Tailwind.
No, ya.
Pero hay veces que ya no se trata tanto de Tailwind.
Sino que se trata también de evitar mezclar.
O sea, si mezclamos CSS con Tailwind, se vuelve loco esto.
¿Sabes?
Se nos va de las manos.
Margin bottom 5.
Este margin bottom al hacer hover...
Yo creo que tampoco tiene mucho sentido.
¿Vale?
Y a mí lo que me gustaría es acabar con ese overflow.
Lo que pasa es que este overflow no sé si es culpa de este.
Que no parece.
Vale.
Vamos a mirarlo así con el inspeccionar.
Vale.
Tú, tú, tú, tú, tú.
Y aquí este image.
Overflow visible.
A ver si es este.
A ver si es este.
Ahora lo miramos.
Overflow visible.
Este no es.
¿Vale?
Será el picture.
Overflow.
Claro, si no podemos poner contain.
Que lo debería dejar un poquito más pequeño.
Pero es que...
Cover.
Overflow visible.
Si no...
Es este.
Vale.
Display.
Align.
Position relative.
Hostia.
Y es que también este...
Esto está bien.
No.
Botón.
Pues no sé por qué.
En algún sitio estamos ahí como ocultando que se corte y tal.
Por ahora lo voy a dejar en container.
En contain.
Para que no la liemos mucho.
Contain.
Y ya está.
Que tampoco se corta y se ven bastante bien también.
Y ya está.
Lo que también nos faltaría es la...
Tiene como demasiada separación.
Como demasiada separación.
De hecho.
Es que...
Como demasiada, demasiada.
Yo creo que con algo así ya estaría bastante bien.
Y ya tendríamos al menos aquí nuestros personajes.
¿Vale?
A ver.
Más cositas que podríamos hacer.
Al menos para...
Porque el hover...
Si es verdad que hace este scale.
Que bueno.
No está mal.
Pero a ver.
El scale.
El opacity.
Boxer image.
Transform scale 1.
Vamos a hacerlo un poquito más pequeño.
Y vamos a añadir si eso...
Como no se está animando el background este.
Que tiene una transición ahí se supone.
Vamos a hacer aquí.
Boxer.
Que cuando hagamos esto.
Que tenga una transición.
Al menos del brillo.
Yo que sé.
Que al menos se notará un poco.
Y esto ya no hace falta.
O sea.
Tenemos que poner aquí filter.
Creo que con el filter.
A ver.
Vale.
Al menos para que se note ahí un poquito más el...
El que tenemos seleccionado.
Vale.
Pues eso para la selección.
Al menos por ahora.
Porque tenemos que hacer muchas más cosas.
Pero es que si no, no nos da la vida.
¿Vale?
Vale.
Más cositas.
Mover el...
Mover.
Tenemos que hacer las páginas.
¿Vale?
Ha quedado un poquito mejor.
Que como estaba antes.
¿No?
¿Lo hemos mejorado o no hemos mejorado?
¿No sería buena idea poner un versus en medio de las imágenes correspondiendo a los combates?
No.
Porque estos son la selección de los boxeadores.
Si ponemos un versus ahí en medio sería raro.
Pero como lo tenemos en el diseño.
Es que sí que veremos los combates.
Vamos a tener una página para cada combate.
O sea, lo vamos a tener ahí en cualquier sitio.
No te preocupes.
De hecho, lo puedes ver aquí.
Tenemos...
Bueno, todavía no está el detalle del combate.
Pero lo tendremos.
Lo del país y el peso no funciona aún.
El peso...
El país sí que funciona.
Pero ¿ves?
Tenemos aquí el combate, pronóstico, no sé qué.
Esto todavía tenemos que mejorarlo un poco.
Pero sí, ahí pondremos un versus.
Y tendremos una página para cada combate.
¿Vale?
Y...
Hostia, ¿verdad que Zlink?
¿De dónde es?
Ah, esto es lo que no funciona.
Esto es lo que habría que cambiar.
O sea, sí que funciona la bandera.
Pero lo que no funciona es la información que aparece aquí.
Y el peso y todo esto es verdad que habría que arreglarlo.
Creo, si no me equivoco, que Alejandra...
Pues eso, que Alejandra, que está trabajando gracias a lo de Infojobs,
pues creo que ha hecho justamente la...
Había PR, ¿ves?
Joel me lo está comentando.
Pues sí, creo que Alejandra justamente lo ha añadido.
Así que le echaré un vistazo para que lo podamos añadir y lo tengamos, ¿eh?
Vale.
Vale, pues vamos a hacer una cosa para tenerla ya preparada al menos
y que ahí podamos empezar a pensar en...
Porque mañana empezaremos ya con el diseño este.
Vamos a tener que hacer la parte de arriba.
Pero vamos a empezar un poco con el detalle.
Entonces lo que podríamos hacer ya es pensar aquí en Boxers o Boxer
barra id punto astro.
¿Vale?
Creamos aquí esta página de Boxer y aquí, pues nada,
vamos a importar layout from barra...
¿Layouts?
Hostia.
A ver, ¿por qué no me sale?
Es que me da bastante rabia que no aparezca el autocomplete.
¿Vale?
Vamos a empezar a hacer ya páginas.
Vamos a tener más páginas de cada uno de los boxeadores.
Cuando le demos clic, pues ahí aparecerá cada una de las páginas.
¿Qué pasa con esto?
Pues que claro, este giro fuera, este main,
aquí sí que vamos a tener que poner información del luchador.
Este footer, esto lo vamos a tener que mover.
Aquí vamos a tener que poner información del luchador X.
Y aquí la velada del año 4, pues vamos a poner el Mariana.
Información del luchador, del boxeador de la velada 4, ¿vale?
Algo así.
Información del luchador, bla, bla, bla, bla, bla.
Esto vamos a tener que importar todos los import boxers from const boxers.ts.
Vamos a tener ahí los boxeadores.
Ahí sacaremos la información.
Hostia, que me lo quita, que me lo quita.
Vale, vamos a ver esto en el select your boxer.
Aquí que teníamos antes, se han puesto aquí tipo botón.
Esto ya lo vamos a quitar.
Vamos a poner que sean enlaces, que esto va a ir a boxers.
Y aquí pues la ID, que la ID pues será el Mariana, no sé qué.
Y con esto, cuando le demos un clic, por ejemplo a yo soy Plex o todo esto, a yo soy Shelao.
Vale, harás 404.
Ah, porque he puesto boxers, no boxers.
Boxers.
¿Qué pongo, boxer o boxers?
A ver, ¿qué pensáis?
Ya se me han ido a dos horas.
Es verdad.
Bueno, no pasa nada.
Hoy estoy de Rodríguez.
Mi pareja no está.
Porque me ha dicho que se dice cielo o ceno aquí.
O sea que no pasa nada.
¿Plural?
Vale, pues plural.
Pues si vosotros lo queréis en plural, pues plural.
Vale, y luego van dos personas y me dicen que no lo quito en plural, que lo quito en singular.
La madre que os parió.
Bueno, demasiado tarde.
Ya lo dejamos así, ¿eh?
¿Qué significa estar de Rodríguez?
Estar de Rodríguez es una expresión muy española que lo que quiere decir básicamente es quedarte solo en casa.
Que a lo mejor, pues tu pareja o lo que sea, se ha ido de viaje y te quedas solo y puedes hacer lo que quieras, ¿vale?
Eso sería un poquito.
Unas cinco horitas de chill podemos quedarnos, no te preocupes.
Vale, pues nos quedamos ahora cinco horas.
Hasta que no terminemos esto, buah, no nos vamos.
No, vamos a...
Ah, mira, GetStaticPath.
Claro, como estamos generando las páginas de forma estática, le tenemos que decir a Astro qué páginas son las que tiene que generar.
Porque no lo sabe, como no tiene servidor ahora mismo, no sabe, como esto es dinámico, no tiene ni idea si realmente esto tiene que generarlo o no.
No sabe cuáles son los valores antes de que lo compile.
O sea, no tiene un servidor porque esto al compilar va a crear las páginas.
Así que le tenemos que crear aquí una función, export function get static path, donde básicamente le vamos a tener que devolver algo así.
Bueno, no es así exactamente.
Vamos a devolver.
Utilizando los boxeadores, vamos a decirle que vamos a crear un array.
Hostia, he hecho aquí una mezcla.
He hecho aquí una mezcla de arrow function con otra cosa.
Vale, así.
Vamos a decirle que cada boxeador, el parámetro id es lo que va a tener que hacer.
Y esto lo que va a devolver es un array con id del Mariana, id del Plex, yo soy Plex y todo esto.
Y así sabrá cuáles son los paths que va a poder aceptar.
¿Vale?
No se encuentra el módulo.
Esto es una cosa.
Lo de Astro que de vez en cuando hay que reiniciar.
Porque, uy, Visual Studio tiene una nueva actualización.
Bueno, da igual.
Entonces, vamos a utilizar la constante boxers que tenemos aquí, donde tenemos todas las id.
Vamos a mapearlas y creamos un array donde vamos a tener objetos que tienen parámetros id.
Y aquí tendríamos uno, el Mariana, siguiente elemento.
Yo soy Plex y así.
Y ahora sí debería saber, ¿ves?
Información del luchador.
Ahora sí que sabe que el Mariana o el Selao sí que tiene, pero si intento otro, ¿ves?
No la encuentra.
¿Por qué?
Porque no está entre los boxeadores.
No está en este array.
¿Vale?
Así que al menos, pues ya hemos avanzado un poquito aquí.
Luego, el problema es que la página de footer, este footer debería estar en todas las páginas.
Siempre.
Así que el footer...
Hostia, yo no sé este por qué.
¿Esto por qué se ha mencionado?
O sea, ¿por qué se ha comentado?
No recuerdo una PR que se hiciera esto, pero bueno, lo voy a dejar así.
Si no, alguien ya me dará en una ISO y ya me contará.
Vale.
Lo que vamos a hacer aquí es que en el index, como antes solo teníamos una página, pues aquí tenemos el footer y el Konami Code.
Ahí he puesto a Cholón.
Pues esto, vamos a ir al layout y vamos a ponerlo justo debajo del slot, que es donde se renderiza nuestra página.
Y estas dos las importamos en el layout para que todas las páginas tengan esto.
Nos vamos por aquí.
Importamos aquí.
Y ahora en el 404, que antes se ponía a mano, ¿ves?
Footer.
Lo quitamos aquí.
Ahora lo tenemos aquí una vez.
Nos vamos a inicio.
Aquí debería aparecer una vez.
Y si nos vamos a la página del Mariana, pues aparece también una vez.
O sea, que al menos ya lo tenemos en todos los sitios.
Lo mismo tenemos que hacer con el header cuando lo tengamos hecho.
¿Vale?
Y en el index, pues ya lo tendríamos.
Ahora vamos a seguir con nuestra página del boxeador, que al menos para tener algo.
Tampoco es que nos da mucho a la vida.
Pero vamos a poner aquí una imagen.
La imagen del boxeador, que es esta.
¿Vale?
La vamos a poner aquí.
¿Vale?
Este fading.
Vamos a poner por ahora 300.
Esto habría que sacarlo seguramente a un componente.
La idea de la vida, la idea es que cuando vayamos de una página a otra, cuando tenga sentido, por ejemplo aquí.
Aquí vamos a tener transition, transition name.
Vamos a ponerle boxeador o boxer.
Boxer image.
Boxer big image.
¿Vale?
Esto vamos a hacer que entre una página y otra tengan una animación de transición.
Para eso vamos a importar los view transitions.
¿Vale?
Y este componente lo tenemos que utilizar aquí.
Y esto lo que va a activar es que cuando vayamos de una página a otra, va a detectar este elemento y este elemento y va a hacer una transición entre las dos páginas.
O sea, que se supone que cuando tú estés aquí, si dices, hostia, pues mira, Shelao, le doy click y me deja fatal.
Vamos a ver con qué la he liado.
Claro, la he liado porque, uno, la imagen no es la misma.
O sea, ¿con el Mariana funciona?
Tampoco.
¿Vale?
¿El view transitions lo he puesto?
Sí.
¿El transition name lo he puesto?
Sí.
Sí.
¿Qué se me ha escapado?
¿Transition name?
¿El ID único?
No, porque no hace falta porque ahora solo es, ya es único.
Por sí ya es único, ¿eh?
No están activadas.
View transitions.
A ver qué me ha importado.
Me cago en su madre.
Es que me ha importado aquí lo que le ha salido de...
Es que me ha importado, yo que sé que me ha importado ahí.
Me ha importado la dependencia de otro sitio.
Astro transitions.
Vale.
Me ha importado de...
Yo que sé que me ha importado.
Me ha importado algo súper raro.
Import, astro transitions, transitions.
¿Vale?
Y ahora, ¿por qué me dice esto?
Ah, que tiene que estar antes de esto.
¿Vale?
Y ahora, ahora se supone que tampoco.
¿Vale?
Al menos sí que hace la transición.
O sea, ha hecho un fade in, fade out.
Pero es verdad que la imagen no me la está moviendo.
Bueno.
A ver.
Transition name.
Transition.
¿Y esto está bien?
¿Es transition name?
¿O no es así?
Transition.
A ver.
Yo creo que era transition.
View transition name.
Esto pasa...
Ah, no.
Use optional.
No.
Ah, es que es transition dos puntos name.
Ay.
Boxer.
Big image.
¿Vale?
Ahora sí.
Ahora sí.
Esto pasa, amigos, porque la vida es así.
Pero bueno, hay que aceptarlo tal y como es.
Entonces, estamos aquí.
Estamos con el bueno de Mariana.
Ahora sí.
Ahora sí.
Pero no tiene que ser único.
A ver.
Tiene que ser único.
Pero es que ahora es único ya.
Ya es único.
Ya es único.
Igualmente, hace un salto.
Y yo creo que el salto es...
¿Ves que hace un salto?
Debería ser mejor.
¿Ves que hace esto?
Que hace como que se hace grande y luego se hace pequeño.
Ahí hay algo que tendríamos que mejorar todavía.
Ahí hay algo raro.
Hay algo raro.
¿Por qué?
Eso puede ser...
Puede ser que en realidad tengamos que utilizar el picture.
Claro, es que aquí que tenemos el source y tal.
O sea, eso podría ser una cosa.
Que en realidad tengamos que mover esto.
Porque, claro, al final necesitamos toda esta parte.
Eso para empezar.
Y luego que hay una cosa rara que tenemos que mirar de los estilos.
Aquí el boxer photo está repetido dos veces.
Y aquí hay estilos que están repetidos dos veces.
Que me da la sensación que no son necesarios.
Hay uno de los dos que no es necesario.
¿Sabes?
O sea, es raro.
Esto es raro.
No sé si el de la...
Me imagino que el de Dimash.
Sobre todo.
Pero hay algo ahí que no haría falta.
Hay algo raro ahí.
¿Ves?
Tampoco está funcionando aquí bien del todo.
Transition name.
Transition name.
Pero uno de los dos no tiene mucho sentido.
Además que tiene aquí como unas transiciones.
Cuando el picture este tampoco hace falta ya.
Esto lo podríamos simplificar.
Esto también lo podríamos simplificar.
Pero ¿veis que están repetidos?
Eso lo tendríamos que arreglar.
Porque no tiene sentido que estén repetidos.
Esos estilos.
Es que no...
Solo deberían aplicar una vez.
No más veces.
¿Ves?
Si todavía no funciona del todo bien.
Tendríamos que mirar a ver ahí qué le pasa.
Pero al menos ya tenemos la transición.
Sería cuestión de ir arreglando.
Sería cuestión de ir probando y tal.
Y yo estoy bastante seguro que muchos de estos estilos no deberían estar.
Lo miraremos.
¿Por qué no usas el picture nativo de Astro?
Bueno, porque lo estamos optimizando nosotros a mano.
Básicamente para evitar el hecho de que lo tenga que transformar.
Pero seguramente lo utilizaremos más adelante.
Pero primero vamos a terminar todo el tema de diseño.
Todo este tipo de cosas.
Y luego ya nos preocuparemos de la optimización.
La optimización prematura es la raíz de muchos males.
El intentar utilizar el picture cuando todavía no hemos hecho del todo bien el modo mobile.
No tengo muy claro todavía las imágenes.
Fíjate en lo que estamos trabajando.
Yo creo que vamos a intentar primero hacer una cosa.
Y luego ya haremos todas las optimizaciones que hagan falta.
Al final es una optimización muy interesante.
Pero no deja de ser una optimización.
Por ahora, mira, voy a poner subir todas las imágenes.
Que no están mal.
Solo un montón.
Pa, pa, pa, pa, pa.
Y vamos a añadir...
Add Boxer Images.
Tu, tu, tu.
Typography.
Vale.
Aquí el rollo.
Voy a ponerlo aquí.
Add New Variant for Typography.
Voy a poner No Verify para ir más rápido.
Porque si no, se me pone a lintar y me quedo aquí toda la vida.
Vale.
Use all boxers but comment some of them.
Some of them.
Vale.
No Verify.
Vale.
El layout.
Vamos a decirle...
Add View Transitions.
No Verify.
Vale.
El 400, este y este.
Va a ser básicamente lo del Remove Footer.
Add Move to Layout.
No Verify.
No hagáis el No Verify en vuestras casas.
Que os conozco, eh.
No hagáis esto en vuestros trabajos.
Add New Page for Boxers.
Whip.
No Verify.
Básicamente se salta todos los pre-commits y todos los checks y tal.
Work on the new Select Boxer page.
Selection.
Select Boxers.
Bueno.
No Verify.
Y se puede saltar hasta los tests y tal.
Bueno.
A veces puede tener sentido utilizarlo.
Y ya está.
Así que con esto lo pusheamos.
Ya tenéis ahí lo de la web de la velada.
Al menos con algunos cambios.
Luego miraré información dinámica.
Mira esto es lo que había hecho Alejandra.
Que le echaré un vistazo.
Aunque igual ahora tiene la pobre algún...
Ah, pues no.
Joder, qué rápida.
Para seleccionar elementos del DOM ya existe una forma de hacerlo.
Sí.
Alguien ha hecho una utilidad para añadir...
Para extraer o pillar elementos del DOM.
Que me parece que es muy bien.
Porque es la API esa que hacemos muchas veces.
Así que...
Pero bueno.
Al final ya Alejandra lo había hecho así.
Lo podemos mergear.
Y luego volver a refactorizarlo y ya estaría.
Así que ya está.
SourceSet.
Image.
¿Ves?
Claro.
Esto...
Hostia.
Esto un poco peligroso.
Porque hay cosas que hemos cambiado.
Pero...
Pero bueno.
Vale.
Luego lo miraremos.
Pues nada amigos.
Mañana continuamos con la web de la velada.
Oye, me ha gustado mucho el nuevo ratón este de Logitech.
Me gusta que no hace...
Que es súper calladito.
Es un alias que puedes poner en tu git config.
Haz lo que yo te diga, no lo que yo haga.
Eso totalmente.
Está interesante y estoy cansado de escribir siempre el mismo comando.
Total.
En vez de Agustín pon el bigotes.
Qué malo soy.
Cómo os metáis con la cosa.
Ay, yo tengo el mismo pero en negro.
Es lo más ese mouse.
Sí, yo ahora tengo dos.
Porque Logitech me la han enviado también en gris pálido.
Y me encanta.
Además que sea silencioso.
Los acaban de sacar.
Tanto el ratón como el teclado.
Y como la nueva webcam esta.
Que he alucinado con la webcam.
Me ha parecido muy interesante.
La colocaré bien para cuando os quiera enseñar cositas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosmas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.
Cosas.