Amigos, necesito que se involucréis un momento.
¿Cuál os gusta más?
¿Os explico un poco los problemas de cada uno?
Esta sería una de las elecciones.
Esta es con la que empezamos al principio.
¿Cuál es el problema que tenemos con este?
El problema que tenemos con este es que no se ve nada.
No se ve nada.
O sea, claro, están aquí todos los...
Ah, mira, es que espérate que está más grande.
Claro, se vería así.
¿Y qué pasa?
Que está cortado.
Como está cortado, no se ven todos los luchadores
y si tú le das a este luchador,
tendríamos que hacer que el scroll fuese hacia arriba
para que pudiera ver el luchador.
O, claro, cuando haces hover, quedaría totalmente...
O sea, cuando haces hover, no lo verías exactamente.
Entonces, este es uno.
Luego hemos estado explorando la posibilidad
de hacerlo más pequeño, como por ejemplo este.
Este, lo bueno que tenemos es que no hay ningún tipo de problema.
Se ve perfectamente, ¿vale?
Se ven todos, pero se ven demasiado chiquititos, ¿vale?
Se ven demasiado chiquititos.
Es una pena, pero se ven demasiado chiquititos.
Luego tenemos este.
Que este, lo malo es que a este a David no le gusta.
A este a David no le gusta porque este es el que he hecho yo a lo pirata.
David me va a matar, ¿vale?
Pero básicamente este lo que hemos hecho es que son tres filas
y hemos hecho que el ancho sea un poquito más pequeño.
Pero el problema que tiene este es que no sigue las guías verticales que tiene el diseño.
O sea, claro, por ejemplo, esto debería acabar por aquí,
pero para evitar que justamente llegue tan lejos,
lo que estamos haciendo es hacerlos más pequeños,
pero no siguen las guías visuales, ¿vale?
Luego tendríamos este, que este es el último que ha hecho David.
Este está bastante chulo, aunque me complica un poco la vida
cómo lo vamos a poder hacer realmente con diseño.
Porque, claro, cómo metemos ahí separaciones e historias, ¿vale?
Este está muy chulo, este está muy chulo,
pero nos complica un poquito, nos complica un poquito las cositas, ¿eh?
Nos complica un poquito las cositas,
porque nos complica el hecho de que aquí hay un huequito,
tendríamos que ver cómo metemos ahí un elemento fantasma o alguna cosa.
Tiene su historia, tiene su historia este.
No, pues a puro Position Absolute no, ¿eh?
A Position Absolute no, ¿eh?
Yo este lo veo muy pegado.
A ver, claro, es muy pegado, pero lo bueno es que te cabe todo.
Y al final, la idea es que cuando haces hover puedas aparecer esto, ¿no?
Podemos hacer un grid y till, un grid...
A ver, un grid...
La idea no sería hacer grid porque justamente todos acaban en el centro.
Y grid, para hacer esto que te acabe en el centro es un poco complicado, ¿eh?
Seguramente lo haríamos con flex, que será un poquito más sencillo, ¿eh?
Tenía que calcular la distancia, o sea, tener un width y dividirlo.
Bueno, ya miraremos, ¿eh?
Cómo lo hacemos.
Pero row con justify between y around y un margin negativo.
Bueno, no, ahora lo probaremos y ya está.
Bueno, os dejo la encuesta para que elijáis...
Vale, bueno, veo que está ganando el último, pero de lejos, ¿eh?
Bueno, vamos a empezar con el último y ya lo arreglaremos y ya está.
Claro, lo más fácil es lo que dice Bisholo.
Hacer rows y en una poner seis y en otra cinco.
Y los centras y ya está.
O sea, ese no es el problema, porque eso es fácil.
Lo metemos uno detrás de otro y tal.
El problema viene cuando lo hagamos en tablet y no quepan todos,
porque obviamente ahí vamos a tener que cambiar cómo se configura eso.
Y ahí es donde pueden venir los problemas, ¿vale?
Ahí es donde pueden venir los problemas.
¿Te quieren ver sufrir?
No, totalmente.
Pero bueno, algo saldrá y si no, poco a poco, ya lo iremos arreglando.
Pues, ¿os gusta este?
Claro, en tablet otro diseño, sí, sí.
Bueno, pues por ahora empezaremos con este.
Y luego lo que tiene este es que aquí funcionaría más rollo slider.
O sea, aquí tú tendrías un slider.
La verdad es que slider son los dos,
porque lo que vamos a hacer es tener la opción
tanto de darle al siguiente y anterior aquí,
como aquí poder hacer un slide y poder moverse entre uno y otro.
Que esto también lo complica por cómo lo queremos hacer aquí,
si lo queremos hacer, este no.
Por si lo queremos hacer con elementos rows y todo esto, ¿eh?
Así que veremos.
Si ponéis la mitad de los luchadores a la izquierda,
la mitad a la derecha y el seleccionador, el seleccionado en el medio,
bueno, eso es que, a ver, si ahora a David le digo,
no, hace esto y lo otro, no sé qué,
o diseñar sobre la marcha, eso no lo vamos a hacer.
Lo que sí que os puedo invitar, porque total, esto lo podemos cambiar,
es que, como es de código abierto la página, podéis hacer dos cosas.
Una, enviar un Figma a las Isus con el diseño que queráis,
que digáis, ostras, pues este está mucho mejor que no sé qué, no sé cuánto.
En lugar de explicármelo, podéis hacer un Figma, podéis hacer el diseño
y que aparezca, para que nos podamos basar en él y poder estudiarlo.
Y por otro lado, si por lo que sea, veis que lo podéis llegar a hacer con código fácilmente,
podéis hacer la PR, que también son súper agradecidas.
Por ahora, vamos a hacer esta para tenerlo así y ya está.
Porque si me explicáis, no, mejor cuatro, no sé qué, al final hablar es muy fácil,
pero lo complicado es tener el diseño y luego que, obviamente, lo podamos implementar.
¿Ok? Así que ahí lo tenéis.
Pues vamos a darle cañita a este, que me parece que, para empezar, puede estar bien
y si hace falta ya, lo iteraremos y ya está.
Vamos a tener aquí la sección que le vamos a llamar Boxer Selection,
o Select Your Boxer.
¿Vale? Suena un poco polémico lo del Boxer, porque sé que son calzoncillos en algún sitio,
pero es que se llama Boxer, boxeador, o sea que, typography.
Mira, nos vamos a copiar lo de Sponsors, como se parece bastante,
nos vamos a copiar totalmente lo de Sponsors, ¿vale?
Y ya está.
Y así me da bastante rabia que Astro tiene ese problema de vez en cuando,
que dice que no encuentra el import.
Me pone... ¡Ah! Me da mucha rabia.
Vale. ¿Qué vamos a hacer primero?
Lo primero es que tenemos que decidir cómo vamos a guardar los boxeadores.
No vamos a tener todos los boxeadores desde el principio,
o sea, porque no me da tiempo para hacerlos todos,
pero vamos a poner a constante.
Luego a Alejandra y a Joel le pediremos que lo añadan.
Vamos a empezar por ahora.
¿Qué información...?
Claro, boxers.
Vale. ¿Qué información debería tener?
Primero, la ID. Yo creo que la ID puede ser el nombre así más o menos.
Luego el name real, que sería el Mariana.
Luego la edad, si la sabéis, que no tengo ni idea cuál es la edad de Mariana.
El peso, que tampoco me lo sé.
Y la altura, que tampoco me la sé.
Creo que el Mariana debe ser 1,90 y algo, si no son 2 metros.
Y me imagino que debe pasar bastante más, o 90, no tengo ni idea.
No tengo ni idea. No te enfades, Mariana.
Lo siento, ¿no? Es que no tengo ni idea.
Si alguien me lo va chivando, los puedo ir arreglando.
Si alguien me va diciendo, los puedo ir arreglando.
¿Cómo va a pesar 61 kilos?
Eso no se lo cree nadie.
Eso no se lo cree nadie.
Sí, hombre, 40.
No, las fotos ahora las arreglamos.
No os preocupéis, que ahora arreglamos las fotos.
4 metros.
La madre que os pague.
Entonces, nos faltaría el país, que si no me equivoco, es de México.
Si me equivoco, me lo perdonáis también y ya está.
Y luego tendríamos aquí, pues también, Plex.
Tendríamos, yo soy Plex.
Creo que es el nombre así, artístico.
Tampoco sé qué edad tiene.
No sé, 19.
No tengo ni idea.
No tengo ni idea.
Esto ya lo podremos ir arreglando.
Vale, son, si no me equivoco, son 22 luchadores.
Entonces, aquí tendríamos 4, 6, 8, 10, 12, 14, 16, 18, 20, 22.
¿Vale?
Luego ya añadiremos, seguramente tendremos que añadir más información y tal.
No se llama Mariana, pero te perdonamos.
¿Cómo que se llama Mariana?
¿Cómo que el...
¿No pone el Mariana aquí?
Se llama el Mariana.
El Mariana.
Mira, como se llama el Mariana, te vas a llevar un van.
Te vas a llevar un van.
Mira, el Mariana.
Lo pone aquí.
Te vas a llevar el van.
Te lo vas a llevar.
O es con dos As.
A lo mejor es que es con dos As.
¿Es con dos As?
No me lo puedo creer.
¿En serio es con dos As?
El Mariana...
¿O es porque no estaba el...
No, con una A.
Ay, en fin.
En fin.
A ver, banear.
¿Creía que se rife?
No, pero no vamos a poner el nombre real.
Vamos a poner de nombre...
Tenemos que poner el nombre que aparece aquí, hombre.
No vamos a poner el nombre real.
Ni sus apellidos, ni dónde vive.
Esa información es confidencial.
Entonces, no vamos a poner Osvaldo Palacios.
A ver, si queréis, ponemos real name y ponemos Osvaldo Palacios...
¿Cómo se llama?
Osvaldo Palacios Flores.
¿Sí?
¿Se llama así?
Bueno, pues ponemos el nombre real para el detalle.
Para cuando tengamos la información del detalle.
Lo que pasa es que ahora...
Mira, de 1988.
O sea, que tiene...
¿Cuántos años tiene?
98...
13...
2024.
1998.
Bueno, 27...
28 años tiene.
¿Vale?
Mira, no me digas que en la wiki esta aparece...
Uy, por un momento pensaba que aparecería el peso y todo.
Y hubiera sido increíble.
1,95.
Sus pies miden casi 30 centímetros.
Perdón, ¿cómo sabes esta curiosidad?
Me da miedo.
Este tipo de cosas me dan un poco de miedo.
Es verdad que no pone el peso.
No sé si sabremos los pesos, la verdad.
No tengo ni idea.
Pero nos enteraremos.
Vale.
Entonces, Mariana...
¿Qué información?
No me sé el real name.
Real name.
Vale.
Real name.
No sé si sabéis el...
¿Alguien fue a su casa?
Yo soy Plex.
Wiki.
A ver si Wikipedia.
Yo soy Plex.
El YouTube...
Daniel.
Se llama Daniel.
¿Daniel qué?
¿Daniel qué más?
Dime la verdad.
¿Daniel?
¿Sancho?
¿Daniel Sancho?
¡Hostia!
No, este no es Daniel Sancho.
A ver.
Yo soy Plex.
Yo soy Plex.
Yo soy Plex.
Daniel.
Un joven procedente.
No sé qué.
No sé cuánto.
Nació.
Daniel.
Bueno.
Pues mira.
Le ponemos por ahora a Daniel.
Y ya está.
¿Vale?
Ahora el problema es que todo lo demás también está roto.
Pero bueno.
No pasa nada.
Por ahora.
Muy bien.
Pues venga.
Vamos por aquí.
Select your boxer.
Vamos a quitar esto.
Vamos a importar los boxeadores.
Boxers from...
Tu, tu, tu, tu, tu, tu...
Barra, constantes, barra, boxers, punto...
Ya está.
Vale.
Y vamos a poner list of boxers.
Vamos a hacer una cosa como también...
A ver.
Como están aquí los países...
Yo no sé si los países deberíamos tener otra...
Como esto también lo vamos a necesitar.
Vamos a poner aquí cons, countries...
Y vamos a tener toda la información.
Por ejemplo.
MX.
Vamos a poner que el name sea México.
ES.
Que el name...
Básicamente para tener toda la información.
España.
¿Vale?
Y aquí vamos a importar también...
Countries from...
Barra, cons...
Barra, countries.
¿Vale?
Y los countries los vamos a mapear.
Y de cada...
No.
Los countries no.
Los boxeadores los vamos a mapear.
Y de cada boxeador vamos a sacarle el país del boxeador.
Y aquí vamos a tener el country name.
El country name debería ser...
Vamos a buscar esto.
Y aquí tendríamos name.
Y si no le vamos a poner que es vacío.
Y ya devolvemos todo el boxeador con el country name.
Que a ver.
Lo podríamos poner a mano.
Y ya está, ¿eh?
Ah.
Que he puesto country...
Gracias.
Gracias por...
Por chivármelo.
¿Vale?
No coloques el real name, Midu.
Que hagan una PR después.
Que hagan una PR...
Vale.
Venga.
Quitamos el real name.
Que total no lo vamos a utilizar ahora.
Vale.
Lista de boxeadores.
Lista de boxeadores.
Esto por aquí.
Y aquí es donde empiezan las cosas.
A ver.
Vamos a ver.
Esto no es patrocinadores.
De hecho, yo creo...
Elige tu luchador.
Creo que aquí...
Me va a matar David otra vez.
Me va a matar David.
Pero en typography...
Yo creo que aquí...
Podríamos meter uno que fuese...
No sé.
Atomic title.
Voy a llamarle atomic title.
Luego ya...
A ver cómo le puedo llamar.
Font atomic.
¿Vale?
Y...
Así.
Y aquí...
Vamos a utilizar el...
Te, te, te, te, te, te, te, te, te.
Aquí.
Atomic title.
Title.
Y el color que sea el primario.
¿Vale?
Elige tu luchador.
Esto yo creo que no hará falta que lo utilicemos.
Y aquí...
Vamos a poner...
Licks boxers.
La URL.
Vale.
Esto de la URL todavía no lo tenemos.
Aquí lo ideal será...
Que tendremos algo así.
Boxers barra ID.
Por ahora lo voy a poner.
Aunque seguramente ahora no lo utilizaremos.
Visita la página del boxeador.
Tal.
Luego.
Aquí.
Logo del patrocinador.
En lugar del logo.
Esta sería...
Foto en pequeño del boxeador.
¿Vale?
Y ahí tendríamos el nombre.
Aquí en lugar de company link y company logo.
Vamos a tener...
Esto...
Lo ideal sería tener un componente para esto.
Pero bueno.
Por ahora vamos a tener boxer link y boxer logo.
Y ya adaptamos aquí en los styles.
Que seguramente vamos a tener que hacer algún cambio.
Por ahora lo reutilizamos así.
Pero ya os digo yo que esto lo vamos a tener que cambiar.
Más que boxer...
He puesto boxer logo.
Image.
¿Vale?
Porque logo...
De hecho sí que tiene el logo.
Los boxeadores...
Todos los boxeadores tienen un logo.
Pero me lo tienen que pasar todavía.
Es que no me los han pasado.
A ver si me los pasan.
A ver que se...
Se está quejando...
Vale.
Se está quejando de que esto...
Vamos a hacer dos cosas.
Una.
Que sea como constante.
Para que sea inmutable.
Y aquí vamos a poner que esto devuelve un string.
O sea que la key es un string.
Y tenemos el name.
Y así ya no debería dar ningún problema.
Y aquí porque este boxeadores...
También se está quejando.
Si estamos exportando como constante...
Dice...
¿Qué dice?
¿El nombre de archivo ya incluido solo en el uso?
Pero si no.
¿Pero qué dice?
¿Es que lo he puesto aquí en mayúscula?
No.
Pero fijaos que hago así.
Y me dice que está aquí en mayúscula.
Es mentira.
No existe ese archivo.
Se le ha ido la olla.
No sé por qué con Astro normalmente a Visual Studio Code se le va bastante la cabeza.
De que se pone a alucinar.
Parece ChagPT.
Bueno.
Vamos al index.
Y aquí donde teníamos la...
Lo vamos a poner bastante arriba.
Select your boxer.
¿Vale?
Bastante arriba.
Ahora obviamente esto va a petar.
Alguna cosita petará.
Vámonos a nuestro proyecto.
4321.
Vale.
Bueno.
Más o menos.
Más o menos.
Ahora ponemos cositas.
Primero tenemos que envolver todo esto.
Vamos a hacer todo esto.
Lo vamos a envolver.
Vamos a poner MT.
Oye.
¿Por qué no se ve?
Ah sí.
Elige tu lochador.
Sí que se ve.
Pero se ve muy pequeño.
Vamos a tener que hacerlo un poco más grande.
Ahí.
Ahí.
Se ve bastante re chulo.
Todo esto lo vamos a tener que meter en un dip.
¿Vale?
Esto de web patrocinada por Infojobs.
Esto lo podemos quitar porque esto no lo vamos a utilizar.
Y esto hay que meterlo así.
¿Vale?
Y tendremos por un lado.
No sé si ponerle article.
No sé qué pone aquí.
Podríamos poner el header.
Y aquí esto que sea el footer.
Porque uno estará.
Será la información.
O podría ser aside.
Incluso.
O sea.
Esto podría ser.
Podría ser aside.
Porque luego.
O sea.
Es información como.
O podría ser nap.
Bueno.
No sé.
Luego lo veremos.
Al menos lo dejamos así por ahora.
Básicamente.
Arriba.
Vamos a tener que mostrar en el header.
Vamos a tener que mostrar la imagen del luchador.
¿Vale?
Boxer Photo.
Que será en este caso.
Fotografía de.
El Mariana.
Que aquí.
Tendríamos que poner luego la.
La imagen que realmente queremos ver.
Vamos a sacar ahora todas las imágenes.
Pero para poder primero hacer el diseño.
Lo que voy a hacer es.
Pues básicamente.
Tener la imagen ahí.
¿Vale?
Vamos a poner big.png.
Luego las optimizamos.
Y abajo.
Deberíamos tener la del título.
El título lo podríamos hacer a mano.
Luego lo haremos a mano.
Para utilizar la fuente.
Pero.
¿Qué pasa con el título?
Que el título es un poco complejo.
Porque fijaos que aquí.
Tiene dos saltos de línea.
Este es un poquito más grande.
Y más pequeño.
O sea.
Tiene su historia.
Tiene su historia.
De hecho.
Ostras.
Estoy pensando.
Que me ha quitado.
Ah no.
Están aquí.
Vale.
Vale.
Está aquí.
Está aquí.
Está aquí.
Está aquí.
Claro.
Es que estoy viendo que me ha quitado la imagen de.
Yo soy Plex.
O sea.
Que solo tengo el del Mariana.
Sí que lo tengo aquí pequeño.
Pero bueno.
Habrá que ver.
Y el título.
El título.
Claro.
¿Veis?
Es que me ha cambiado aquí el título.
Y no tengo el título de.
Yo soy Plex.
El título este.
Yo soy Plex.
Lo tengo aquí.
Pero no lo tengo aquí.
Como se supone que debería quedar.
Que me imagino que quedará como este.
Pero más grande.
Ahora lo ajustamos.
Por ahora.
Lo importante.
Como nos vamos a basar en este.
Vamos a sacar.
Uy.
Qué bonito este.
Esto me gusta mucho.
Me gusta mucho el.
Este SVG que ha hecho aquí.
Vamos a quitar este SVG.
Vamos a ponerlo.
Export Asset.
Y vamos a poner aquí.
Player o Boxer.
Background.
¿Vale?
Vamos a poner esto por aquí.
Y aquí en las imágenes.
Teníamos.
Tu, tu, tu, tu, tu.
En Public.
Imágenes.
Tenemos efectos.
Es que alguien aquí.
Esto lo ha optimizado.
Y lo ha metido cada uno en un sitio.
Lo cual está bastante bien.
Pero claro.
Ahora me complica un poco.
Bueno.
Vamos a ponerlo en efectos.
A ver esto.
Hostia.
Ya.
¿Qué es una imagen?
Es una imagen.
Polémico.
No pasa nada.
No pasa nada.
Pero claro.
Yo lo he sacado como PNG.
Y es una imagen.
Boxer.
Background.
Claro.
Entonces tú lo intentas sacar como un SVG.
Y te dice que te acuestes.
Porque lo que pasa con eso.
Es que te mete y te mete ahí en línea.
Te mete en el SVG.
Te mete ahí como si nada.
Y no funciona así.
¿Vale?
Bueno.
Por ahora me lo voy a bajar así.
Al menos optimizado.
¿Vale?
Y así quitaré este.
Porque es bastante polémico eso.
Bueno.
Por ahora tendríamos la imagen del boxeador.
El título.
Y obviamente.
Pues tendremos en un lado una cosa.
Claro.
Aquí tendríamos el título.
Que debería ir también centrado.
Y luego tendríamos esta información de aquí.
Esto no me preocupa tanto.
Pero esta información.
Sí que deberíamos tener.
Como.
Igual incluso podríamos hacer que esto sea.
Un article.
Con un header.
Aquí yo inventando.
Un poco para.
Porque al final esto.
Podría ser reutilizado.
Entonces aquí.
Pues deberíamos tener.
Por un lado.
Este div de aquí.
Y luego.
Este div de aquí.
Esto sí que lo podemos meter también.
Justo debajo de este.
O sea.
Podemos tener tres.
Como si no eran mañana.
Y ya está.
Tendríamos aquí también.
El boxer flag.
Alt.
Bandera.
De México.
México.
Y aquí.
Source.
Barra.
Boxers.
Y.
Vamos a sacar la bandera de México.
Si soy capaz.
Porque.
Bueno.
He eliminado la imagen.
Básicamente.
He eliminado la imagen.
México.
O MX.
Vale.
Hostia.
Hostia.
A ver.
Vamos a hablar de una cosa.
Vamos a hablar de una cosa.
Tenemos dos opciones.
Hostia.
Es que a ver.
55K.
Tío.
Por el SVG.
A ver.
Hablemos de esto.
Tenemos dos posibilidades.
Amigos.
De hecho.
Yo tenía por aquí.
Algunas.
Algunas líneas.
Vale.
Teníamos por aquí.
Algunas.
Algunas cositas.
Podríamos.
Utilizar.
Una forma.
Una forma.
Que sea.
Un SVG.
Simplificado.
Hay diferentes cosas.
Vale.
Tendríamos.
La posibilidad.
A ver esta.
Que me dicen por aquí.
Esto que es.
Esto que es.
Menos mal.
Yo he entrado aquí como si hubiera una mañana.
Ya.
Pero.
Es que al final esto es más o menos lo mismo.
Podemos utilizar un SVG.
Podemos utilizar.
Un emoji no.
Porque los emojis se ven diferente dependiendo del sitio.
Podemos cargar la imagen.
Aunque la verdad es que la imagen.
O sea.
Podría descargar esto como PNG.
Pero.
Yo no sé hasta qué punto.
Entonces.
Hay SVGs como estos.
Que son simplificados.
O sea.
Se parece.
Pero.
Son simplificados.
¿Veis?
Es un.
Es.
Es simplificado.
Es simplificado.
Fijaos.
Un K y medio.
Y ya está.
Esto sería uno.
El hecho de utilizar uno simplificado.
Y ya está.
Porque es un K y medio.
O sea.
Fijaos.
De 55 K.
A esto.
Luego.
Claro.
Lo malo es que.
Es un poquito feíto.
La verdad.
Este es un poco feíto.
Y luego tendríamos este.
Que también sería simplificado.
Y que a lo mejor este le pega un poco más.
A ver.
Vamos a ver este.
Cómo.
Cómo quedaría.
A ver qué os parece.
Este sería otro.
Que yo creo que este le puede quedar un poco mejor.
Aunque.
Claro.
Veis.
Que tiene aquí.
Es que es tan simplificado.
Que es una cosa rara ahí.
¿Sabes?
Que es una cosa rara.
Pero claro.
Es que ocupa un K.
Que está súper bien.
Es que está súper bien.
Creo que es mejor comerse el PNG.
Y simplificarlo.
Pero es que eso son las dos cosas.
Pero no sé.
Yo creo que este puede estar bien.
Ese lo hizo mi primo en el Kinder.
A ver.
Es que si no lo que podemos hacer es eliminarlo.
Es eliminar esto y ya está.
A ver.
Por ahora voy a hacer este.
Voy a utilizar este.
Y ya veremos qué decidimos al respecto.
Porque claro.
Porque claro.
Los PNGs pueden ocupar demasiado.
Pueden ocupar demasiado.
De hecho este.
Que hemos visto.
Esto ocupa un K18.
Si sacamos la imagen.
El PNG.
Si sacamos el PNG.
Claro.
Habría que sacarlo además.
Uno 5X por lo menos.
Vamos a mirar en web.
P.
A ver cuánto ocupa.
Más o menos.
Bueno.
A ver.
Tampoco ocupa tanto.
Lo que pasa es que no se ve ya tan bien.
Pero tampoco ocupa tanto.
Al menos aquí.
Pues ojo.
Ojo que lo veo.
Porque total.
Esto se va a tener que ver así.
O sea.
Tampoco se ve mucho más grande.
No sé.
Ahora lo ponemos.
Y a ver cómo.
A ver cómo.
Cómo puede quedar el uno y el otro.
Y probamos los dos y ya está.
Si se ve así.
Son 710 bytes.
O sea.
Tampoco es tanto.
Así que.
Ahora los probamos.
Y el que veamos que os gusta más.
Claro.
Así se ve mal.
Pero a ver cuando estén chiquititos.
A ver cómo se ve.
¿Vale?
Entonces.
En lugar de boxers.
De a flags.
Y MX.
Punto.
Vamos a empezar con el SVG.
Y luego vemos.
A ver cómo queda cada uno.
Vale.
Y aquí el tema.
Es que esto tendría que tener un flex.
Justify.
Between.
Entre cada uno.
Y vamos a ver cómo va quedando esto.
Aquí.
Pues tendríamos.
Dos dips.
Mariana Juárez.
Bueno.
No exactamente.
Tendríamos.
El país.
¿Vale?
País.
El font vault.
En realidad sería más bien para el de abajo.
Que pone aquí.
México.
El texto sería exactamente el mismo.
Y luego aquí tendría a otra cosa.
Que sea href.
Que pone aquí.
Ver combate.
¿Vale?
Ver combate.
Aquí vamos a ponerle text accent.
Y luego ya nos preocuparemos un poco de cómo se ve.
Con semi vault.
Y sí que es verdad que esto tiene bastante separación.
Vamos a poner class.
Flex.
Flex call.
Porque es uno al lado del otro.
Con un poquito así.
¿Vale?
Esto no le gusta.
Pero bueno.
Ya se.
Ya luego lo arreglará.
Y este lo copiamos igual.
Pero en lugar de ver combate.
Es ver perfil.
Y en lugar de tal.
Aquí pone peso.
Y pone los kilos.
61 kilogramos.
¿Vale?
Con una separación.
Ok.
Yo soy Flex.
Hostia.
Me gusta ese nombre.
Me gusta.
Me gusta.
¿Por qué no usa el typography?
Lo usaremos.
No os preocupéis.
Lo usaremos.
Lo usaremos.
Lo que pasa es que ahora mismo.
¿Por qué se repite el país?
Yo creo que porque no tenemos más información.
Porque no tenemos más información.
Vale.
Vamos a ir viendo esto.
Bueno.
Ahí está el país.
Pequeñito.
Vamos a sacar la imagen del Mariana.
Hostia.
Espérate.
Que he eliminado aquí el título.
Me van a matar.
Ahora.
Vale.
Entonces.
Vamos a sacar la imagen del Mariana.
Lo vamos a sacar.
1,5.
El Mariana.
Big.
¿Vale?
Big.
Básicamente para diferenciar.
La.
Hostia.
Aquí no es.
Para diferenciar la imagen grande.
De la que luego habrá más pequeña abajo.
¿Vale?
Lo hacemos con WebP.
Optimizamos la imagen.
¿Vale?
Pues yo creo que se ve bastante bien.
240K.
No está mal.
No está mal.
A ver.
Esto ya lo optimizaremos también más adelante.
Mira.
Voy a crear aquí Boxers.
Vamos a tener el Mariana Big.
Luego.
Vamos a tener aquí este también.
De 1,5X.
Exportamos el Mariana Small.
¿Vale?
Y este.
Que esto debería ser el título.
Hostia.
Es que claro el título.
Pero el título.
A ver.
Missing Fonts.
Vale.
Esto es el título.
Pero el título este.
Es que veo que tiene una sombra.
A ver.
Yo podría exportarlo con la sombra.
Pero.
Va a hacer que ocupe más.
Solo por tener la sombra.
Lo voy a mirar.
A ver que.
143K.
Vale.
Y si intento hacer así.
Intento hacer así.
Y solo exportar el título.
A ver.
El Mariana.
Ah.
Me lo está haciendo como un zip.
Vale.
A ver.
Vamos a ver.
Este grupo.
Este grupo es el que tiene el Drop Shadow.
Vamos a quitarle el Drop Shadow un momento.
Es que el Shadow al final se lo puedo hacer yo.
Y no hay ningún problema.
El Mariana Title 2.
28.
Es que cabrón.
La diferencia es brutal.
La diferencia es brutal.
Fijaos.
Claro.
Entre uno y otro.
Solo por tener la sombra.
La sombra la podemos hacer nosotros sin ningún problema con el Drop Shadow.
Entonces.
Importante.
¿Vale?
Vale.
Pues voy a.
Meterle un 2X.
El Mariana Title.
Y lo optimizamos.
Tu tu tu.
Aquí.
El Mariana Title.
Y esto en WebPair.
Pues 35K.
A ver.
Yo creo que lo podríamos incluso.
Hacer un poquito más pequeño.
Porque tampoco se va a ver tan grande.
Se va a ver más o menos así.
Y así.
Pues 45K.
Bueno.
Me parece.
Vale.
Pues ya tenemos aquí esto.
El Mariana Small.
Es el único que no he optimizado.
WebP.
No sé qué.
Vale.
El Mariana Small.
Y con esto.
Voy a dejar todas las imágenes.
Para que.
Por si las queremos.
Optimizar.
Pues las tengamos por ahí.
No.
No he dejado el Big.
Pero bueno.
No pasa nada.
Ya la buscaremos.
Nos vamos aquí.
Y en imágenes.
Vale.
Me faltan los boxers.
Boxers.
Y aquí vamos a mover al Mariana.
Venga.
Para adentro Mariana.
Para adentro.
Vale.
Muy bien.
Ahora ya deberíamos tener las imágenes.
Vámonos para acá.
A ver si aparece alguna cosa.
No aparece todavía.
¿Por qué?
Porque esto está dentro de public.
Boxers.
Image.
Boxers.
Mariana guión.
Ah vale.
Porque hemos utilizado esto.
WebP.
Esto debería ser.
El Mariana.
Esto debería ser el title.
WebP.
Y aquí en el small.
Vale.
Esto es webP.
Y esto sería.
ID.
Barra.
Small.
Y aquí vamos a tener los boxeadores.
Y ya estaría.
Vale.
Pues no.
¿Por qué no?
Porque es el.
Ah.
Porque el ID que he puesto es Mariana.
¿No?
No el Mariana.
He puesto.
En los boxeadores.
La ID que le he puesto.
Es.
Mariana.
Rub.
Vale.
Vale.
Lo que me falta son los de Plex.
No pasa nada.
Vamos.
Para acá.
Este sí que me lo puedo traer.
Que al menos.
Lo tengamos por aquí.
Así que lo exportamos.
Tu tu tu.
Cinco y medio.
Exportar.
Plex.
Small.
Y me falta el grande.
Me falta el grande.
Me va a dar rabia.
Porque cuando hagamos todo.
El efecto de.
De que aparezca.
Cuando hagamos hover.
Claro.
Necesitamos tener otro.
Ejemplo.
Así que.
Ahora a ver cómo lo saco.
No sé si sacarlo.
De aquí arriba.
Aquí arriba.
También está.
Veis que está aquí.
Pero claro.
Este.
Igual es que está cortado.
Está cortado diferente.
Ah.
Bueno.
Veo que es bastante.
Este.
Ah.
Ah.
Ah.
Ah.
Hostia.
Vale.
Vale.
No.
Pero es que este está más cortado.
Es que está cortado.
Es que está.
Ah.
Qué rayo.
Qué rollo.
El grande está en el carrusel.
Sí.
Pero el problema es que.
Cuando se.
Tiene ya algunos efectos.
Como por ejemplo.
Como por ejemplo.
Ves que está cortado.
También tiene una sombra.
Que esto lo podríamos quitar.
Todo.
La verdad es que lo podríamos quitar todo.
O sea.
Podríamos quitar el hecho de que tenga la sombra y todo esto.
Para que ocupe menos.
Que tiene sentido.
La verdad.
Tiene sentido.
Lo malo.
Creo que yo tengo una imagen.
A ver si.
Dónde puedo.
Es que la tengo en el portátil.
La tengo en el portátil.
Bueno.
Por ahora vamos a hacer más o menos esto.
Y luego ya le daremos caña.
Porque es que si no.
Vale.
Al menos ya tenemos a este aquí.
Me falta que aparezca el grande.
Vamos a ver por qué no aparece el grande.
Boxers.
Mariana Big.
Vale.
Aquí la había puesto bien.
El Mariana Big.
El Mariana Big.
Vale.
Tampoco.
A ver.
El Mariana Big.
El Mariana Title.
¿Por qué no me está cargando este?
¿Por qué no me está cargando estos?
A ver.
¿Lo veis vosotros?
Te falta el barra image.
Menos mal.
Menos mal que vosotros si que lo veis.
Vale.
Barra image.
Barra image.
Gracias.
Gracias.
Vale.
Ahí ya tenemos al hombre este.
Perfecto.
Muy bien.
Por fin están saliendo cositas.
Es que no veas cuánto trabajo hay ahí.
Cago en la leche.
Vale.
Entonces.
El article.
Este de aquí.
Bueno.
Vamos a centrar todo esto.
Por ahora vamos a centrarlo todo al centro.
Aunque ya os digo yo que seguramente tendríamos que hacerlo un poquito diferente.
No todo en el centro realmente.
Pero al menos.
Vale.
Y además esto.
Esta sería una opción.
Tenerlo en un lateral.
Por ahora no lo voy a hacer.
Pero no lo vamos a descartar.
No lo vamos a descartar.
El tenerlo en un lateral.
No me desagrada.
Porque la verdad es que queda bastante bien.
Y se ve muy grande.
Y podemos tenerlo aquí súper cerca.
O sea.
Podemos evitar que estén tan separados.
Porque aquí si miramos la lista de boxeadores.
Pues a lo mejor podríamos que estén menos separados.
Y que aparezca algo así.
Lo que nos faltaría a lo mejor aquí.
Que las imágenes del boxeador.
Pues que tenga aquí un menos 10.
Porque tienen que salir más hacia arriba.
Primero tendríamos que quitar el overflow hidden este.
Esto fuera.
Vale.
Y tendríamos que.
Claro.
Este h24.
A ver.
Este h24.
Si miramos aquí.
Este h24.
H24.
Y este h24.
Esto lo podríamos quitar.
A ver.
Un momento.
¿Cómo se ve esto?
Tú, tú, tú.
Vale.
Obviamente tendríamos que hacerlo un poquito más grandes.
O sea.
Tendríamos que hacer que.
H20.
A ver.
¿Cómo queda?
Algo así.
Y tendría que tener un poquito más de separación hacia arriba.
O sea.
Algo así.
Ay.
He puesto 87.
Bueno.
Igual no tanto.
Igual no tanto.
Pero al menos ya tendríamos.
Obviamente no estarían repetidos.
Lo malo.
Que de 3.
Queda raro.
Queda raro que sea de 3.
Porque fijaos que se queda un personaje ahí tirado.
Tendría que ser.
Como son 22.
Si fuesen 4.
Pues.
Claro.
Si fuese de 4.
Aunque tendríamos que empujar a hacerlos un poco más pequeños.
Obviamente.
Podría quedar un poquito mejor.
Podría quedar un poquito mejor.
También podríamos jugar con la separación para que se junten un poco más.
Podríamos.
Podríamos ver.
Y esto centrarlos.
Más que con grid.
Podríamos hacerlo con flex grab.
Eliminen a uno de la velada.
Uno me sobra.
Hay uno que me sobra.
Sí.
David en este momento me debe estar matando.
Me debe estar matando directamente.
Me debe estar matando.
A ver.
Voy a mirar el disco.
A ver si me ha hablado David.
Del palo.
Te odio.
Ah.
Sí.
Sí.
Sí.
Sí.
Sí.
Sí.
Sí.
Sí.
Sí.
Sí.
Sí.
Sí.
Sí.
Sí.
Sí.
Sí.
Sí.
Sí.
Sí.
Sí.
Sí.
A ver qué veis.
A ver.
Bandera.
Ah, mira.
Que ha corregido a bandera.
No sé en qué momento me pareció buena idea hacer bandera solo con colores.
Buena.
Y buena idea.
A mí no me parecía mala idea.
Si prefieres las ilustraciones de su EG las puedo pagar en el vectorial de Figma para
que puedas exportarlas.
Pero igual no.
Vale, vale.
Bueno.
Por ahora nos ha enfadado.
Por ahora nos ha enfadado, amigos.
Por ahora nos ha enfadado.
A ver.
Esto podría ser una opción.
Y la verdad es que no me desagrada.
Es que me va a matar.
Me va a matar.
¿Por qué no me desagrada?
Porque es que es verdad que esto queda muy chulo.
David es el diseñador.
Esto queda muy chulo.
Pero es verdad que aquí va a quedar mejor el hecho de ponerte encima y esto.
Por cierto, aquí hay un error.
A ver.
Un momento.
Aquí hay como un box shadow.
Ah, mira.
Aquí el menos cuatro este está saliendo por arriba.
Ahora.
Bueno.
Que también está saliendo por abajo.
Está saliendo por abajo.
Pero bueno.
Ese no se nota tanto.
Vale.
Pues esto podría ser una idea.
Ahí lo dejo.
El de Figma queda mejor.
Sí, aquí queda mejor.
Lo que pasa es que el problema es la altura.
Venga.
Está mejor con el diseño.
Pues vamos a hacerle el diseño.
Ya está.
No os preocupéis.
Ponlo de tres.
Si se cae algún luchador lo tendrás que cambiar igual.
No, porque no se va a caer ningún luchador.
Y ya está.
Vale.
¿A qué te refieres con la altura?
A la altura es que en los diseños normalmente todo súper bonito, todo súper genial y tal.
Pero lo cierto es que si esto queda cortado, queda muy raro.
En cuanto esto queda cortado, ¿qué pasa?
Que tú bajas aquí y aquí te parecen los luchadores y por lo tanto ya queda cortado.
Ya no tiene sentido que trabajes con el hover porque entonces ya aparece mal.
Si tú haces el hover aquí, no vas a ver cómo cambia la parte de arriba.
O sea, ya te está inhabilitando y te está cargando la usabilidad de esa sección.
¿Lo entiendes?
Si tú lo haces con hover, te la has cargado.
¿Por qué?
Porque tú haces el hover aquí y cambias lo de arriba y no se ve.
Entonces, ¿de qué te sirve?
De nada.
Esto muchas veces pasa en muchas páginas que al final está desconectado el diseño de cómo se utiliza la página.
Y es muy fácil que pase esto porque realmente como va tan justo, tan justo,
pues va a ocurrir muy fácilmente.
Entonces, ¿qué podemos hacer para arreglarlo?
Podríamos que al darle clic haga el scroll automáticamente aquí para que te aparezca.
Eso podría ser una, ¿vale?
Podría ser una opción.
Luego, ¿qué más se podría hacer?
Bueno, pues hacerlo más pequeño, que es una de las opciones.
Hacerlo más pequeño y ya está.
Si lo pones alrededor, uno es en la izquierda y la derecha.
Que me lo habéis dicho 80 veces, pero básicamente que hagáis el diseño y ya está.
Porque ponerlos alrededor y decir, ponlos alrededor.
Se pueden poner de muchas formas alrededor.
Es como si alguien me dijese, ponlos abajo.
Es que abajo, ya habéis visto, se pueden poner de muchas formas.
Entonces, seguramente lo haremos aquí.
Si hacemos este diseño, lo haremos con el clic.
¿Para qué?
Al hacer el clic, entonces, al hacer el clic, te lleve arriba y se vea.
Porque si no, va a ser imposible, ¿vale?
Y ya lo teníamos.
En móvil lo vamos a tener que cambiar igualmente.
Eso no va a haber ningún problema.
Porque lo vamos a hacer como un slider, como un carrusel en móvil.
Y ya está.
Así es como lo vamos a hacer.
Y solo carrusel no tiene sentido por diferentes razones.
Una, porque si quieres ver al luchador 20, vas a tener que darle 20 veces.
¿Entendéis?
No tiene sentido tampoco.
Es muy raro tener que darle todo el rato a la derecha hasta que veas al siguiente.
Entonces, vamos a hacer este.
Yo entiendo que queréis y que tenéis muy buenas ideas en la cabeza.
Si tenéis ideas, de nuevo, lo mejor que podéis hacer es hacer un Figma y ponerlo en las Isus.
Porque si no, vamos a estar aquí todo el día y todo el mundo al final va a tener una idea de mejor aquí, mejor acá y tal.
Ver combate.
Vale.
Vamos a hacer el de David y luego ya veremos cómo lo hacemos.
No pasa nada.
Al final, la idea también es que lo podamos ir probando y lo podamos...
Este no me desagrada porque al final este, quieras o no, siempre vas a tener visible.
Si hace hover y tal, lo vas a tener ahí al lado.
Pero no importa.
Vamos a poner Flex Call aquí y así ya lo pasamos.
Así.
Vale.
Este, obviamente, el Mariana y tal.
Lo que tenemos por acá.
Vamos a hacer esto un poquito más grande.
Vale.
Esta parte tendríamos que esta parte, header, no sé qué.
Vale.
Entiendo que aquí vamos a necesitar hacer algunos absolutes interesantes, ¿no?
Porque tanto el title como todo esto, este tiene que quedar como por encima.
Así que absolute y podemos hacer aquí en Class Relative.
Vale.
Y vamos a ver cómo queda esto por acá.
¡Pum!
Vale.
Luego, ¿por qué esta imagen queda tan vaya?
Vale.
Vamos a poner que esto tenga el bottom 0.
A ver por aquí.
Y ya quedaría esto encima.
El problema también es que nos falta el fondo, ¿no?
O sea, aquí no sé si esta imagen debería tener la imagen de fondo.
O sea, una imagen con fondo.
El fondo que hemos visto este que teníamos, ¿no?
Background URL.
A background image.
Y aquí vamos a poner la imagen esta.
Tu, tu, tu.
Image boxers.
Boxers image.
¿Dónde tengo?
Ah, efectos.
Vale.
Image effects.
Boxer background.
WebP.
Vale.
Y le tenemos que poner aquí que tenga un no repeat.
VG no repeat.
Vale.
VG center.
Aunque más que center.
Ah, sí, sí que es en el centro.
Vale.
Sí que es en el centro.
Es verdad que es un poco polémico porque la calidad de esto es como que ha quedado un poco raro, ¿eh?
O sea, que ha perdido bastante calidad y aquí se ve mucho, mucho mejor.
O sea, que le dirá David a ver si lo podemos sacar en SVG porque creo que no debe ser muy costoso
y que nos puede ayudar bastante.
Entonces, también la imagen yo creo que es bastante más pequeña, ¿no?
porque como que está demasiado grande.
Vamos a ver si esta imagen...
Vamos a...
96, 320.
320 no.
Pero a ver si lo puedo mirar aquí.
480.
Vamos a poner aquí 480 píxeles.
Vale.
Lo que pasa es que ahí queda esto cortado.
Entonces, lo que podemos hacer es, en todo caso...
Claro, es que el problema es que le ponga el fondo a esto.
¿Dónde podemos poner si no el VG y todo esto?
Se lo podemos poner aquí y a ver cómo queda.
Y el ancho se lo podemos poner a la imagen.
Así le ponemos ahí el 480 píxeles.
¿Vale?
¿Por qué me sales cortado?
¿Por qué me sales cortado ahora?
Si no tiene sentido.
A ver.
¿Por qué sales cortado, amigo?
¿Por qué?
¿Por qué sales cortado?
El article...
Vale.
Es que el article también...
Este...
Claro.
Que entonces este también tenemos que...
Tendríamos que centrar.
Flex call.
¿Vale?
Item center.
¿Vale?
El header.
Esto.
Flex.
Justify.
Center.
Item center.
¿Vale?
Y ahí tendríamos este.
Pero este ahora tendría que ir bastante más abajo.
O sea, este de aquí...
La bandera de México tampoco me la está cargando.
¿Vale?
Porque esto es en flags.
Directamente lo he puesto.
Ah, porque uno lo he puesto en imágenes y otro en flags.
Vale.
Pues vamos a poner esto por aquí.
Image flags.
¿Vale?
Y...
La banderita de México es un poco pequeña, ¿eh?
Vamos a ponerla bastante más grande.
Size 10.
Vamos a ver cuánto...
Cómo de grande es aquí.
A ver si vemos...
96 por 55.
¿Vale?
96.
96.
Y la altura que sea automática.
Y ya tendríamos esta parte.
¿Vale?
Y luego...
Este...
Flex call.
Para que uno esté debajo del otro.
¿Vale?
Y también...
El título debe ser más pequeño.
Este título es demasiado grande.
463.
Este título...
463.
463.
Claro, en realidad también podría ser un poco lo mismo.
De 480.
O un pelín menos.
Vamos a poner aquí el auto también.
¿Vale?
Y...
Lo tenemos que subir un poco.
Y por aquí irían un poco los tiros.
También, claro.
Aquí tiene un efecto...
Eh...
Que aquí sí que lo tenemos.
Es que creo que la bandera...
O sea...
Me da la sensación como que el efecto que...
¡Ay!
Coño, me ha puesto el Plexit.
Hostia, David.
Qué bueno.
David me está escuchando.
David me está escuchando.
Me encanta.
David.
David.
Dice...
Si quieres, prueba una versión con la foto en el lateral.
Pero hoy creo que no llega...
No pasa nada, David.
No pasa nada.
Dice...
Vaya paciencia tienes.
No.
Qué grande, David.
David me está escuchando.
Está viendo el directo.
Y ha hecho...
Ha hecho al Plex.
Qué grande.
Qué grande.
Lo ha hecho ahí en vivo, en directo.
Me encanta, eh.
Me encanta.
Los rezos.
Gracias, David, eh.
Dice...
Dice que soy yo el que tiene paciencia.
Qué mal.
El que tienes paciencia eres tú, macho.
Eres tú.
Vale.
Entonces.
Vamos a...
Voy a hacer esto un poco pequeño para que vea un poquito esto.
Eh...
¿Qué pasa?
Hostia.
Ah, vale.
Digo, porque el SVG es diferente.
Este sería uno, ¿vale?
Este sería el SVG.
Y así en chiquitito no hay ningún problema.
No sé cómo lo veis.
Pero no lo veo mal.
Lo veo bastante vivo.
Está bien.
O sea, veo la bandera.
La veo bien.
Pero el nombre está por encima de la bandera de España.
Y España siempre está arriba.
¿Cómo?
A ver.
Claro, aquí el nombre como que está más abajo.
Sí, es como raro, ¿no?
Que uno está más abajo del otro y tal.
Es un poco raro.
Que alguien me diga...
Le falta la sombra a la imagen al Mariana.
Sí, la sombra la podemos poner ahora, eh.
La sombra, básicamente, lo que podemos hacer en la imagen del Mariana...
No sé si se puede utilizar directamente el Drop Shadow.
Sí, pues le podemos poner Drop Shadow.
O sea, XL, algo así.
Bueno, pero yo no veo la...
Drop Shadow.
Drop Shadow.
Yo diría que era Drop Shadow, ¿no?
Pero no la veo.
Drop Shadow.
No sé si es que hay que ponerle un color.
Drop Shadow Black.
No.
Pero yo diría...
Yo diría que no está.
Y debería ser así, con el Drop Shadow, ¿no?
Debería ser con el Drop Shadow.
A ver, Style...
No, Clip Pad, no.
¿Cómo era el Drop Shadow?
¿El Drop Shadow era un filter?
Drop Shadow PNG.
Mirad que el otro día...
El otro día hice...
De hecho, os lo vais a ver.
Midudep.
Transparencia.
No, Sombra PNG.
La madre...
Sombra PNG.
El otro día lo hice.
Justamente el otro día.
Crea imágenes bonitas.
Trucazo para añadir...
Creo que es esta.
No use Box Shadow.
Vaya, porque ha entrado aquí.
No, este no es.
Pero ves que pone trucazo para no sé qué.
No use Box Shadow.
Esto lo hice el otro día.
Creo que es con el Filter, me parece.
Filter, Drop Shadow...
Y aquí, básicamente, algo así.
Ahora sí que aparece.
Pero es que me da la sensación que con el otro no estaba apareciendo.
A ver si lo ponemos así.
Sí, ahora sí que se ve.
Ahora sí que se ve.
Podemos ponerle un poco más, así a lo bestia.
Pero veis que ahora sí que se ve.
50.
10.
Que se ve muy poquito.
Pero sí que se ve.
¿Veis ahí que si lo quito?
Sí que se nota la diferencia.
Sí que se nota.
Pues eso.
Ahí sí que estaría.
Vale.
Más rectangular la bandera.
Bueno, la bandera está así.
O sea, no se puede hacer más.
Lo que podemos hacer es utilizar, probar la otra.
Que es la oficial.
Que es esta.
¿Ves?
Ahora sí que está más rectangular.
Y con esto, al menos ya tendríamos toda esta parte.
Ahora lo que falta es que de separación, yo más o menos lo veo bien.
Lo que podríamos hacer aquí, claro.
Veo que esto también, por ahora vamos a poner esto así.
Para que no nos dé problemas.
Y se suba un poquito para arriba.
Ya tenemos ahí el perfil.
Todo esto lo vamos a poner de color blanco.
Para que tengamos eso separado.
¿Vale?
País, México.
Y esto tiene que estar centrado el texto.
¿Vale?
Luego, vale.
País, México.
Peso.
Ver perfil.
Ver combate.
Esto luego lo arreglaremos.
Porque esto, pues, le pondremos por ahora que haga una escala.
Inline, block.
Y transition.
¿Vale?
Y ya.
Vale.
Más o menos.
Entonces, ya tendríamos la parte esta de arriba.
El problema es ese, ¿no?
Que ocupan bastante.
Es que ocupan bastante.
Vamos a ver.
En el último, aquí había puesto 1, 2, 3, 4, 5, 6.
6 luchadores había puesto.
Vale.
Entonces, decía por aquí, Midu, para lo del grid, prueba poner un grid template columns,
no sé qué.
Y luego los items con nt child, no sé qué, no sé cuánto.
Madre mía.
Es que, claro, me ponéis los comentarios que en vuestra cabeza suena espectacular.
Pero luego, como falta tanto contexto y tal, es bastante complicado.
A ver, voy a intentarlo.
Dice, creo, si lo he entendido bien, que aquí ponga un style así.
¿Vale?
Hasta aquí bien.
Y luego dice, y luego los items con nt child más...
Es que no lo tengo muy claro.
Luego los items con...
A ver si lo he entendido.
Algo así, pero es que yo entiendo que con esto...
¿Y qué se supone que hay que hacer con esto?
¿Sabes qué es lo que se supone que habría que meter aquí dentro?
Según tú, u el Silva, porque es complicado.
O sea, dice, y luego los items con ntc child 11n más 7.
Saludos desde Valencia.
Magia.
O sea, claro, entiendo que es esto lo que dice.
No sé si lo que quiere es que ponga aquí un espacio,
pero lo veo un poco complejo, la verdad.
O sea, no veo muy bien...
Una...
Ah, mira, u el Silva me la ha puesto ahí.
Me la ha puesto.
Vale, gracias.
Gracias.
Vale.
Vamos a ver.
Dice que peguemos esto.
Ah.
Claro, que...
Claro, que empiece y termine antes.
11 más 7.
Pero es que aún así, esto no entiendo que tampoco.
Está bien.
Porque, a ver, esto debería ser cada 11.
Entonces, este sería la site, ntc child...
Bueno, claro, y encima esto no sería exactamente así.
Esto sería cada uno de los items que debería ser el anchor, ¿no?
O sea, esto debería ser así.
Vale.
Pero, claro, dices 3, 4...
Es que no...
No lo veo.
O sea, no lo veo en este sentido porque algo no está bien.
Porque si dices aquí que son 12 cuando en realidad no son 12...
O sea, ya empieza mal porque aquí en realidad son 3, 4, 5, 6.
O sea, no deberían ser 6 en este caso, para empezar.
Deberían ser 6.
3, 4, 5, 6.
Y luego, cuando tenemos este...
Claro, encima el problema es que esto lo que está haciendo es que cada uno tenga...
Entonces, tendríamos 4.
O sea, 3, 4, 5, 6.
Y luego aquí tendríamos 3, 4, 5.
Que no serían 4.
Entonces, el tema es que el terminar debería ser 3, 4, 5.
Pero, aún así, el problema es que no van a quedar centrados.
¿Sabes?
O sea, no van a quedar centrados.
No van a quedar ahí en medio centrados.
Que ese es el problema que justamente vamos a tener.
Que aunque yo le ponga aquí que esto me diga...
Play this content center, no los va a centrar.
No va a decir...
Ah, aquí cuando tengo hueco, pues te lo va a decir.
Porque no lo va a hacer.
Ese es el problema.
Vamos a ver.
Que ahora me ha pasado aquí todo el V Silva.
Me lo ha pasado todo.
Venga.
Venga, V Silva.
Vamos a darte una segunda oportunidad.
Me ha pasado aquí todo esto.
Esto sería la site.
Esto sería el anchor.
¿Vale?
Vamos a ver.
Casi.
Casi.
Vamos a quitar aquí el style este.
Que a lo mejor el problema es este.
A ver.
La ha clavado, ¿eh?
No he entendido lo del tomate.
No he entendido lo del tomate.
No lo he entendido este.
No sé si ha sido algo para ti.
Pero la has clavado.
La has clavado.
¡Ojo!
Bravo, V Silva, ¿eh?
Bravo.
Bravo.
Muy bien, ¿eh?
Ahora he entendido lo de los 12.
Y es porque querías hacer que tuviese...
O sea, las columnas que fuesen 12.
Pero, claro, ahora tiene sentido.
Pero, claro, es que...
Fijaos, amigos.
Fijaos en la primera explicación de V Silva.
Vamos a ver la explicación.
Midu para lo de grid.
Prueba a poner un grid template con un repeat 12.
Y luego los ítems.
Ncchild 11 más 7.
Saludos desde Valencia.
O sea...
Ojo que me ha puesto esto.
De esto hemos pasado, amigos, a esto.
O sea, para que entendáis lo fácil que se ve y se lee en el chat de...
No, es así.
Ya está.
Saludos desde Valencia.
Antes de los saludos desde Valencia, podrías haber aprovechado y poner un poco de código ahí.
Alguna pista o algo, ¿no?
O sea, saludos desde Valencia.
Saludos desde Valencia.
O sea, fijaos la diferencia.
La diferencia de...
En mi cabeza es un espectacular.
Saludos desde Valencia a todo este pedazo de código que lo hace perfectamente.
O sea, que felicidades.
Muchas gracias.
O sea, es que a veces soy la hostia.
Me encanta.
Está bien, ¿eh?
Que funcionar funciona.
Es verdad también que nos faltaría un poquito aquí de separación.
El grid gap igual lo voy a quitar de aquí para ponerlo aquí.
Muchas gracias, crack.
Vamos a poner más separación.
Más separación para acá.
Y 12.
24.
Hostia, ¿por qué ocupa tanto la separación?
¿Sabes por qué hay tanta separación?
Gap x 4.
Vale, vamos a ver.
La separación entre los bichillos.
Vale.
1332, ¿vale?
Y esto es...
Hostia, pues esto se supone que es menos.
No me lo puedo creer.
Como que es bastante, ¿eh?
Y luego quedan bastante más hacia arriba.
O sea, la separación queda bastante más hacia arriba.
O sea, es que queda casi a la mitad, tío.
Casi a la mitad.
O sea, algo así, más o menos.
Lo que pasa es que la parte esta del degradado es mucho menor.
Porque esto queda demasiado arriba, ¿no?
Entonces, lo que tendríamos que hacer aquí con el gradient este...
Que no sé si es...
No sé si es este.
A ver.
No.
¿Es este?
Sí.
Es este.
Claro, este va del cero al tanto por ciento.
No sé qué.
Pues a lo mejor tendríamos que poner que el tanto por ciento empezase ya directamente aquí.
O incluso antes.
O menos.
Para que no pise tanto el otro.
Esta sería un poco la idea que entiendo que hay aquí.
Que no es tan exagerada.
Y así no se pisan unos con otros.
Luego también aquí esto, pues pasaría algo similar con este nuevo...
Esta nueva transparencia.
Cuando, ¿vale?
Para cuando se ilumina.
Y hay todavía algo raro.
Que no sé si es este.
Este boxado.
Yo creo que es este boxado.
Que a lo mejor...
No.
No es el boxado.
Pero veis que abajo sale algo...
Sí.
Yo creo que es el boxado.
Yo creo que es el boxado.
O sea, es que es el boxado.
Sin ninguna duda.
Es el boxado.
Porque veis que pasa por abajo.
Es que es el boxado.
Sin ninguna duda.
Entonces, eso tendríamos que arreglarlo.
Luego, en las imágenes.
Aquí son 128 por 96.
Y aquí, ¿cuánto está ocupando esta imagen?
Porque mi sensación es que la imagen tendría que ser más grande.
O sea, como la imagen tendría que ser más grande.
Ciento...
Hostia, pues es que...
Ya está...
Claro, lo que pasa es que...
¿Cuál es mi sensación?
128.
Mi sensación es que está cortada diferente, ¿no?
Que esta imagen...
Claro, está cortada ahí diferente.
Claro, que está ahí el Mariana entero.
Está ahí Mariana entero escondido.
Y aquí se ve un poquito más pequeña.
3, 4, 5, 6.
Pero bueno, esta sería un poco la idea.
Esta sería un poco la idea.
Sí, el rectángulo debería ser más pequeño todavía, ¿no?
Es que no sé si es por la separación.
Que tendría que haber un poquito más de separación.
A ver, vamos a hacer...
Un poquito más de separación.
Aquí.
Un poquito más de separación.
El background va más abajo.
El gradiente empieza desde la mitad de la cabeza hacia arriba.
Sí.
Un poquito más.
Entonces aquí podríamos poner...
Si empieza un poco más tarde.
Pues así, más o menos.
Y la separación estaría así.
No sé.
No sé si...
Es que claro, aquí lo que veo es que estos son 128K.
O sea, 128.
Y a lo mejor aquí, ¿cuánto hemos puesto?
Si no, lo podríamos poner a mano, el 128.
Podríamos poner...
A ver aquí, en el anchor.
Este.
Este.
Que aquí le hemos puesto...
Claro, es que le hemos puesto una altura concreta.
A ver.
¿Cuánto ocupa ahora?
Ahora ocupa 138.
O sea que efectivamente debería ser un poquito menos.
No sé.
128, 128, 128, 32.
Por aquí irían los tiros.
Por aquí irían los tiros.
Pero ahora lo que pasa...
Pero claro, es que es la imagen, tío.
Es que claro, la imagen queda...
Por eso lo estábamos haciendo así.
Porque la imagen tiene un poco...
Tiene como que termina y aquí como que se ve más grande.
¿Y por qué se ve más grande?
Porque me da la sensación que la imagen aquí son 128.
Y como que es más grande, 128 por 96.
Si vamos a nuestra imagen...
A lo mejor como la ha exportado...
Igual es que he hecho algo mal ahí cuando la ha exportado.
El small son 192 por 144.
O sea, la relación de aspecto debería ser exactamente la misma.
O sea, que si yo por lo que sea...
Le ponemos aquí que sea 128 píxeles.
Y le pongo aquí que sea exactamente lo que tiene aquí.
Que son 96 píxeles.
96 píxeles.
Ya para que tenga la relación de aspecto justamente igual.
Y el tema este que sube...
A lo mejor es que sube un poquito más.
¡Coño!
La relación de aspecto se ha ido...
Es que me da la sensación que no me la ha exportado con la misma relación de aspecto.
Porque veis que se queda como más pequeña.
Esa es mi sensación.
Que la relación de aspecto ha quedado como más chafada.
Esa es mi sensación.
Por eso es que la tenemos que hacer como más grande.
Para que llame un poco más la atención.
Porque es que si no...
Se queda como muy pequeño el bicho.
¿Vale?
Y luego la cabeza además va más arriba.
Va más arriba.
Así puede ser que vaya.
A ver.
Vamos a utilizar aquí el...
Vamos a poner otra vez el 128 píxeles por 96 píxeles.
Object.
No, cover no.
Contain.
Hostia, qué rabia me da que se vaya para arriba.
Es que los veo como muy pequeños.
No sé si es mi imaginación que los veo muy pequeños.
No sé si es que los veo muy pequeños.
Aquí los veo como más...
Más grande.
Claro, también es porque me estoy acercando.
Es que también yo también...
Ay...
Así es como debería verse.
Están muy pequeños.
No, si no tengo zoom.
No tengo zoom.
El problema es...
El problema es...
A ver.
Vamos aquí.
Vale.
Así es como debería verse.
Y así es como los veo yo.
¿Y veis?
Es que está más grande.
Y tiene menos ancho.
O sea...
Es como que los veo más pequeños.
Cuando tiene exactamente el mismo...
La misma relación de aspecto y todo.
Y es eso.
Es porque la imagen se ve más pequeña.
Se ve más pequeña.
Tamaño promedio.
No, hombre, no.
No, no.
Las imágenes aquí están más grandes.
O sea, es que esto es más grande.
Vamos a hacerla más grande.
Vamos a hacer que esto tenga auto.
Y vamos a hacer que sea más grande directamente.
Claro, el problema es eso.
Que como la imagen entonces se...
Es que me estoy rayando básicamente por culpa de la imagen.
O sea, eso es culpa de la imagen.
A ver.
Puede ser...
Voy a hacer que sea 2X.
¿Vale?
Un momento.
Voy a poner el Mariana Small.
¿Vale?
Lo reemplazo.
Porque me da la sensación...
El Mariana Small.
Es que ahora no sé.
No sé por qué.
A ver.
Mariana Small.wp.png.
Es que me da la sensación.
Es eso que es.
Que es la imagen como me la ha sacado.
Pero no.
Claro, también aquí es que este.
Me está limitando ahí la altura.
Que a lo mejor tiene que ver.
No, no tiene que ver.
No tiene absolutamente nada que ver.
Ay, ¿qué está pasando?
PX4.
No, pero el PX4 me lo va a hacer.
Ah, que yo tengo el PX4.
Vale.
Bien visto.
Bien visto.
Menos mal que os tengo ahí.
Menos mal que os tengo ahí.
Ese era el problema.
Claro, con razón me lo estaba...
Me estaba volviendo loco, ¿eh?
Y eso ha sido por culpa de dejarlo...
Tenéis toda la razón.
Ha sido por culpa de pillarme lo de los sponsors.
Me he copiado lo de los sponsors y ahí ni me he preocupado.
Menos mal, menos mal que estáis ahí.
Es porque el rectángulo de abajo es más ancho.
Mira, y así ya quedan perfectos.
No, así, así.
Vale, ahora sí, ahora sí.
Ahora el problema es que tenemos mucho repetido, ¿eh?
Tenemos muchos repetidos.
Hostia, además, tenemos otro problema.
Vamos a ver.
Claro, al ser esta imagen...
Claro, tenemos que poner más pequeña porque si no esto ahora tiene sentido.
Vale.
Vale.
Porque, claro, si no, el problema es que el hover no funciona correctamente.
No funciona correctamente.
Entonces, si le ponemos que esto tenga full...
Vale.
Y bueno, esto ya no lo necesitamos.
Pues ya estaría.
Vale.
Vale.
Y esta es la idea, que puedas seleccionar correctamente a uno y otro.
¿Vale?
Vale.
Uf, ha costado, ¿eh?
Ha costado.
Ha costado.
Bueno, ya tenemos así la selección.
Obviamente no vamos a tener solo al Mariana Plex, pero lo que sí que vamos a querer es cambiar la información cada vez que movamos entre uno y otro, ¿vale?
Entonces, venga, vamos a hacer el script.
¿Sabéis, amigos?
A veces pienso, me tenía que haber hecho streamer de videojuegos, tío.
Tú te pones, te sientas, te pones a jugar a videojuegos y ya está.
Ya está, tío.
Ya está.
Más sencilla en la vida.
No te tienes que preocupar de los paddies.
No te tienes que preocupar de los scripts.
No te tienes que preocupar de nada.
Simplemente, tío, te pones ahí con tu mandito y ya, chao, chao.
Me he equivocado de carrera.
No, es mentira.
Es mentira.
Está bien, hombre.
Joder, si nos encanta.
Venga, vamos a hacer los scripts.
Vamos con los scripts y le daremos una cañita.
¿Será porque al exportarla?
No, no.
Ha sido culpa mía.
Las cosas como son.
Ha sido por el padding, que menos mal que alguien se ha dado cuenta, porque si no hubiéramos estado aquí todo el día, que no sabía por qué la imagen me salía más pequeña cuando estaba utilizando la misma relación de aspecto y tal.
Y era justamente por el padding que le estaba quitando espacio, obviamente.
Bueno, vamos a pillar los links de los boxers.
Vamos a ver si tengo aquí el boxer link.
Sí.
Luego vamos a pillar el boxer title.
Y vamos a hacer la animación también, que esto va a estar interesante.
Query selector, boxer title.
Vamos a pillar el boxer.
¿Qué más tenemos?
Boxer title.
El boxer.
Todavía no tenemos información.
Sí que tenemos los países.
Entonces, tendríamos aquí el boxer photo, el boxer title, vale, la foto, el title.
Al menos vamos a cambiar cierta información.
Luego ya la cambiaremos toda.
¿Qué más necesitamos?
El boxer country, country, vale, que el boxer flag.
Vale, vamos a ver.
Esto lo tenemos.
Que esto lo tendríamos que sacar de aquí porque la verdad es que hay demasiadas cositas.
Vale, pero boxer flag, vale, y bandera de México y el flag, vale.
Y con esto ya, pues deberíamos a boxer links punto para cada link, vale.
Vamos a hacer un link punto atblistener.
Por ahora vamos a hacerlo con el mouse enter, vale, cuando entre el ratón.
Y aquí, claro, ahora necesitamos sacar los data.
Aquí deberíamos tener, vale, data.
Esto no va a hacer falta hacer un target blank porque se supone que irá a la página del boxeador.
Aquí podríamos, como vamos a utilizar HTML y JavaScript plano, pues nada, data, boxer, name.
Vamos a poner aquí la información de una.
Podríamos también, bueno, da igual.
Estoy pensando que podríamos inyectar ahí el, vale.
Aquí deberíamos tener el country, country name, vale.
Y con esta información, country y el country name también, boxer country name, country name, country name.
Podríamos inyectar esta información en el script y entonces buscar la información normal y corriente.
Por ahora vamos a hacerlo así, que será más rápido y luego ya lo mejoraremos.
Vale, una vez que ya, cuando entremos, vamos a tener, vamos a crear el boxer source, que esto será barra image, barra up sources, la id, punto, wp.
Vamos a crear el boxer title.
Que esto, la verdad es que me gustaría que lo hiciéramos con la fuente para aprovechar, porque si no, vale.
Me falta sacar la id, esto, todo esto lo podemos sacar del dataset, que el dataset, esto vendría en el evento y del event, punto, current target, punto, dataset, vamos a sacar.
Y aquí, pues nos deberíamos copiar boxer.
Bueno, que al final podría poner aquí id, name, country y country name.
Porque si lo hago así, así lo podría sacar así tal cual.
Id, name, country y country name.
Que los datasets, cuando le ponéis un guión, si no recuerdo mal, cuando le intentas acceder al dataset, lo puedes sacar así, como un camel case.
Lo cual está bastante bien.
Y con esto ahora, pues nada, ya tendríamos que en el boxer photo, cambiarle el source.
Boxer source, boxer source.
Vale, a ver si me dice más.
Los salt.
Vale, lo que se me está quejando aquí básicamente es que en boxer title, ¿por qué me dice esto?
Que se declara, pero su valor no se lee nunca.
¿Y esto qué es?
Ahí se está leyendo.
Podríamos, para arreglar todo esto, una de dos.
Podríamos hacer los if para revisar que realmente no se encontraron los elementos necesarios y tal.
Pero igualmente aquí, ¿qué me dice?
Que la propiedad source no existe en el element.
Claro, porque esto lo que tenemos que decirle es que boxer photo, le tenemos que decir cuál es el elemento exactamente.
Así que creo que vamos a hacer esto para que no nos raye con todo el tema este.
Este no hace falta, este está bien.
Y este también.
Y así podemos quitar este.
Y, espérate, boxer title, ah, boxer title, me dice, boxer title no se lee, porque, ah, porque lo estoy utilizando aquí también, title source.
Menos mal, menos mal que me he dado cuenta ahí.
Menos mal que existe el linter.
Vale, aquí me dice que esto puede ser null, que ya os digo yo que no es null.
Y el dataset no existe en el event target.
Bueno, también lo teníamos que arreglar.
Bueno, no pasa nada.
Y el country name, fotografía de el boxer photo, boxer country punto alt, bandera T, tal.
A ver, con esto, si no hemos hecho nada raro, que ya veo que sí, ¿vale?
Porque veis que...
Vale.
Vale.
Alguna cosa se me ha escapado por aquí.
Vamos a ver si aquí tenemos la ID correctamente.
ID.
Ah, porque esto no es...
Esto es Vic, ¿no?
Esto era Vic.
Vale.
Pues, ojo.
Que la he liado.
La he liado...
Ah, no, no es que la he liado.
Es que Plex todavía no tengo la imagen de Plex.
En cambio, la de Mariana sí que la tengo, pero la de Plex no.
No pasa nada, porque David ha movido sus manitas en vivo y en directo aquí para...
Vamos a darnos primero su foto.
Así que vamos a traernos la fotito de Josip de Plex, que yo creo que este es el tema que...
A ver.
¿Ves?
Es que también tiene...
Tendría que conseguir las imágenes.
Es que nos faltan las imágenes todavía.
Plex Vic.
Nos faltan las imágenes.
Que podamos conseguir las imágenes con...
Sin la sombra y tal.
Joder.
A ver.
Yo soy Plex.
¿Qué me está?
No sé qué me está...
Aquí.
La leche.
Vale.
Le voy a quitar la sombra, que no la necesitamos.
Y exporto este título también.
Plex Title.
Y la banderita es...
Venga.
Optimizamos estas imágenes.
Web P.
Vamos a poner esto por aquí para que veáis cómo las vamos optimizando.
Web P.
Aquí también tenemos que optimizar al...
Al...
Al...
Plex Title.
Y también tenemos que optimizar...
A este...
¿Quién creéis que va a ganar?
¿Creéis que va a ganar?
¿Mariana o Plex?
¿Con quién estáis?
¿El texto no era con la fuente?
Sí.
Pero lo he explicado antes.
El texto es con la fuente.
Lo que pasa es que es bastante complicado.
Bastante, bastante complicado.
Porque tenemos que hacer la...
Los títulos los tenemos que hacer a mano.
Porque, como puedes ver, este título...
Este título...
A ver, que lo tiro para atrás.
Este título, yo soy Plex, fíjate que el tamaño cambia y tal.
Esto tenemos que hacerlo a mano.
Y tendremos que tener componentes para esto.
A Plex le va a costar mucho subir de peso.
Mariana, Mariana.
Bueno, bueno, bueno.
Yo la verdad es que vi a Plex muy confiado, ¿eh?
Lo vi muy confiado.
No le quité la sombra.
Es que no fui capaz de quitársela.
No fui capaz.
Ah.
Estaba aquí.
La madre que me parió.
Bueno, pues se lo quito ahora.
Gracias.
Plex, Vic.
A Plex lo vi muy confiado, ¿eh?
Lo vi muy sobrado, tío.
Y ya he visto que está ahí...
Está...
Hostia, pero si me...
Está haciendo...
Me lo ha dejado con la sombra.
Ya le diré a David que me lo pase sin sombra.
Porque veo que...
No sé por qué.
Le he quitado la sombra.
Y aún así me lo ha exportado con la sombra.
No entiendo.
Plex, Tide...
Plex, Vic.
Me sabe mal porque le estoy jodiendo ahí.
Y yo el...
Plex, Vic.
¿Ves?
Me lo está exportando la sombra.
No entiendo nada.
Bueno, da igual.
Plex, Vic.
Ayer saliste Midu en el directo grabando.
¿Cómo?
¿Grabando el qué?
Ah, ayer no.
En la presentación.
Sí, sí.
Lo sé, lo sé.
Lo sé.
Vale.
Plex, Mariana, no sé qué.
Aquí en Boxers.
Imaginaos aquí el trabajazo.
El trabajazo.
¿Qué vamos a tener que hacer?
Sí, reemplázalo todo.
Pero ¿por qué no me puedes preguntar que lo reemplaces todo y ya está?
Y me tienes que ir uno a uno para preguntarme.
¿Tiene sentido?
Plex.
Vale.
Qué bueno esto.
Eso ha sido maravilloso.
Eso ha sido maravilloso.
Bueno, va.
Vamos para atrás, vamos para atrás.
Yo soy Plex, no sé qué.
Y aquí...
Vale.
Vale.
¿Y por qué da un salto?
Seguramente pueda dar un salto porque la altura de los dos no es la misma.
¿Sabes?
O sea, en realidad, lo que está pasando ahí...
Vamos al Select, Your Boxer.
La imagen grande, por lo que sea, no tiene la misma relación de aspecto.
Lo cual esto sería una locura.
Pero es que tiene sentido.
Por eso pega ese saltito, porque está cambiando la altura.
Entonces, cosas que podemos hacer.
Quedarnos con una relación de aspecto para que siempre sea exactamente igual.
Y para eso, vamos, por ejemplo, Plex es 960 por 1346.
Bueno, no lo veis, pero está ahí abajo.
Y en cambio, el Mariana es 720 por 1.090.
1.100.
Entonces, indiferentemente, lo que podemos hacer es la relación de aspecto que tendría aquí.
Vamos a hacer Object, Contain, lo mismo que antes.
Y la altura...
Vamos a ponerle algo así.
Vamos a quitar esto.
Vale.
Obviamente, esta no es la altura correcta.
800.
¡Hostia!
¡Hostia!
¿Qué ha pasado aquí?
Que ahora se me está saliendo de...
¿Por qué esto se me ha movido para arriba?
¿Por qué se me ha movido para arriba un momento?
¿Por qué se me ha ido para arriba un momento?
Estás moviendo el Title.
¡Hostia!
Que estoy moviendo el Title.
Menos mal que me has dicho.
Fuera, fuera, fuera.
Este lo dejamos.
¿Vale?
Este lo dejamos.
Tu, tu, tu, tu, tu, tu.
Vale.
Y en la imagen...
Aquí.
Este.
Este es el que...
Es que como he visto, que tenía 480.
¿Vale?
No.
Pero igual...
Object, Contain...
Quitamos el Auto.
Foto.
IH...
800.
Me sigue pasando el salto, ¿eh?
¿Por qué me está pegando el salto este?
A ver.
480 por 800.
Y este...
480 por 800.
No será...
Es la bandera.
Es la bandera.
Es la bandera de los cojones, tío.
Es la bandera.
Es la bandera.
Es la bandera.
Que la bandera no es exactamente igual.
Es la bandera.
La diferencia es la bandera.
No me lo puedo creer.
No me lo puedo creer.
Sí, sí, sí.
Es la bandera, amigos.
Es la bandera.
Object, Contain...
Object, Center...
Vale.
Es la bandera.
Bueno, al menos sabemos que es la bandera.
Esto no es.
WebP...
Vamos a ver.
144 por 83.
Claro, el problema es que 144 por 83...
144 por 83...
Vamos a poner...
¿Dónde está la bandera?
Aquí.
144 por 83.
44 por 83...
A ver.
Ahora.
Ahora.
Ahora sí.
Ahora sí.
Pero veis, aquí está el problemilla que os comentaba, ¿no?
Que queda muy abajo.
Tú haces el hover y tal y queda...
Está como demasiado abajo.
Que está bien, pero está como demasiado abajo.
Como si tú bajas aquí y te pones a hacer hover, no lo ves.
Se queda como raro.
Se pone como raro.
Pero al menos...
Midu, David te puso el surge del background de los boxers de arriba de Plex en el Figma.
Hostia, ¿y tú cómo estás enterado, Freyly?
Porque te lo ha dicho David.
¿Te lo ha dicho David?
Joder.
Ah, mira.
Hostia, qué grande.
Qué risa, tío.
Qué grande es David.
La madre que lo parió.
En vivo y en directo.
En vivo y en directo, amigos.
Boxer background.
Qué crack.
Qué bueno.
Es increíble.
Hostia, 2,3 megas.
Hostia, pues igual no vamos a poder hacerlo así tampoco.
No vamos a poder hacerlo así.
No pasa nada.
Lo que vamos a poder hacer, que lo he pensado yo antes, para que no pierda tanta calidad,
Boxer background.
Es que lo vamos a tener que exportar en 2X para hacerlo el doble de grande.
Es que es demasiado tocho el SVG.
Vamos a hacerlo 2X para que pillemos más calidad.
Luego lo que haremos es tener diferentes tamaños de esto dependiendo de la resolución de la pantalla.
Y ya está.
Y esto es lo que vamos a hacer.
Lo vamos a dejar por ahora así.
Yo creo que así, pues, se va a ver bien.
Ahora sí que se verá mejor.
O debería.
La verdad.
También es verdad.
Hostia.
Ojo, ojo, ojo.
Mira, ojo, porque yo creo, yo creo que en este caso un PNG puede quedar bien.
Si utilizamos un PNG y limitamos el número de colores y le decimos, porque total, veo que tiene muy pocos colores,
podríamos bajar.
Yo creo que sí, eh.
Mira, ocupa menos.
No sé.
Ah, no me acuerdo que ocupa menos.
Si el que he hecho, a ver este.
32K.
Bueno, pero este se veía regulinchis.
Yo creo, claro, es que al final ¿cuántos colores tiene esto?
Si casi no tiene colores, tío.
O sea, que yo creo que, a ver.
Bueno, claro, aquí ya sí que pierde calidad.
Aquí ya pierde calidad.
52K.
A ver, 52K versus WP.
72K.
Y a ver, verse, yo creo que se ve bien el de 7 colores.
Eso es una cosa buena que tiene PNG.
Porque PNG, cuando le limitas el número de paleta de colores, puedes hacer que ocupe muy poco.
Es un muy poco...
O sea, no siempre funciona.
No siempre funciona.
Pero, claro, cuando son imágenes muy sencillas, normalmente en vectorial van muy bien.
Pero, claro, aquí no hay vectorial que valga.
Así que podemos simplificar el SVG.
Y fijaos que, claro, en el PNG se ve...
Bueno, le ha quitado unas rayitas.
Por lo que veo, le ha quitado rayitas.
Pero, bueno, no pasa nada.
El PNG este ocupa menos que el WP y, en cambio, se ve mejor.
Porque el número, la paleta de colores, está más limitada.
Así que vamos a utilizar el background este, que se verá mejor.
¿Vale?
Se verá mejor.
Hostia.
Lo que pasa es que ahora...
A ver, VG size o cover.
No sé si puedo poner cover.
Vale.
Vamos a tener que cambiarle el background, size, 50%.
75%.
Ahora sí que se ve refachero.
Ahora sí que se ve con calidad.
Lo mismo vamos a tener que hacer al otro.
Pero está chulo.
Midu, si eres tan claro, dibujalo con canvas.
Hombre, a ver, no tiene mucho sentido dibujarlo con canvas, la verdad.
Vale.
Al menos ya tenemos esto.
Una cosa muy chula que podríamos hacer en un momento, ¿vale?
Para que me dé de tiempo.
Yo soy Plex, va todo junto.
Compróbalo, pero diría que es todo junto.
¿Pero qué más da ahora mismo si no estamos por esto?
Ah, bueno, pues ya está.
Está todo junto.
Una cosa que podemos hacer para que quede esto chulo,
podríamos hacer una animación que haga un fade in, fade out súper fácil.
O sea, con pocas líneas de código.
A ver, vamos a poner aquí una constante update UI que al pasarle el boxer, bueno, al pasarle la id, el nombre, el country y el country name que haga todo esto, ¿vale?
Esto lo vamos a pasar a una función que haga todo esto.
Lo que vamos a hacer aquí, le decimos, oye, mira, si no tienes el document.starttransition, ¿vale?
Que esto es un método de las view transitions, entonces me actualizas la UI con todo esto y hacemos un return.
Pero si tienes, hostia, no sé, start transition, no sé, start view transition, start view transition, ¿vale?
¿Y por qué este return no le gusta?
Ah, porque no he puesto código todavía, ¿vale?
Pero si tenemos, ahí está, si tenemos view transition, lo que podemos hacer aquí es pasarle lo que tiene que hacer,
que básicamente es actualizar, actualizar esto.
Porque no me gusta start view transition, no existe el tipo, a ver, ahora estoy alucinando, estoy alucinando.
No sé si es que document.startviewtransition, basta ya, typescript, basta ya, espabila, macho, actualízate, que sí que existe.
Sí, o sea, sí que existe, es que hay que ver.
Bueno, esto de funcionar debería funcionar.
Lo único que, a ver, también deberíamos, para que esto funcione, deberíamos utilizar en algún sitio aquí,
debería cambiar, no sé si ponerlo aquí, style view, no, transition, no, view transition name,
view transition name, transition name y ponemos boxer, ¿vale?
No sé si esto funcionará.
Hostia, lo que pasa es que lo cambia todo.
¿Veis que cambia demasiado?
Eso se puede arreglar.
Porque veis que hace un efecto raro eso.
Eso es porque está animándolo todo por defecto.
Por defecto está animándolo todo y por eso hace esto.
Pero podríamos arreglarlo.
Al menos hacer esto para, a ver, esto lo vamos a tener que hacer de otra forma.
Porque si queremos que sea un slider, pues lo haremos de otra forma.
Pero bueno, esto al menos nos puede servir.
El problema es que si os fijáis, cuando hago el scroll, eso es porque lo que está haciendo el start view transition
es cambiar toda la página.
O sea, ve la diferencia entre lo anterior y lo nuevo.
Ese es el problema.
Y tendríamos que evitar que visualmente haga el cambio de las cosas que nos interesan.
Por ejemplo, en el view transition de lo que no queramos cambiar, que sería, por ejemplo, todo esto,
tendríamos que poner view transition.
No sé si esto funcionará, pero creo que si le pondríamos un non aquí, esto debería evitar.
No, pero igualmente lo está afectando todo.
Bueno, lo haremos de otra forma.
Pero bueno, es interesante que no hace falta hacer una navegación muchas veces para llevarte a otro sitio.
Lo que sí que haremos es que cuando entremos a la página, la imagen del boxeador se lleve a, navegue a la otra página.
Eso sí que lo haremos.
Cuando le demos a ver perfil, pues que ese boxeador, la imagen, viaje a la otra página con una transición.
Que ahí queda mucho mejor.
Porque las view transitions tienen bastante sentido, especialmente cuando son navegaciones entre páginas.
Claro, aquí va a ser muy complicado porque vamos a tener que decirle toda la parte de la UI que no tiene que cambiar.
Y total, como vamos a hacer un slider, seguramente, para que se mueva entre uno y otro, pues ya lo haremos igual.
Y ya está, ¿vale?
Muy bien.
Entonces, para que lo podáis ir viendo, voy a dejar el componente, pero lo voy a ocultar porque no queremos desplegarlo porque todavía está a medias.
Así que, vamos a añadir por aquí cositas.
Vamos a poner aquí upgrade dependencies.
Y la semana que viene lo ajustaremos ya ahí total.
Vale, me dice ahora que el inter, que no le gusta algo.
Vamos a ver qué problemas tiene del inter, porque si no, no me va a dejar.
Ah, mira, es que no soporta ni siquiera la versión.
Vale, me está diciendo que la YouTube, aquí, que hay un problema del inter.
Vale, esto es de typescript, tu, tu, tu, tu, tu.
Vale, vamos a ver qué dice ahora.
Tu, tu, tu.
Vale, ahora sí que funcionaría.
Así que upgrade dependencies.
Ah, es que me está dando otro error, un segmentation fault.
Me está dando un error totalmente distinto.
Bueno, voy a quitar husky por ahora, para que no, para que pueda hacer fácilmente esto.
Vale, esto, bueno.
Bueno, add empty space.
Vale, vamos a poner todas las imágenes.
También las de México.
A ver, he puesto los SVGs y los webp, aunque seguramente los quitaremos.
Add images.
Vale.
Esto no sé cuál era el problema.
Ah, vale, que tenía ahí un montón de semicolons.
Format correctly file.
No sé por qué tenía eso así.
El typography.
Add atomic title, que esto también lo ajustaremos.
Aquí tenemos la información de los boxers.
Info, boxers.
Los countries.
Add countries.
Info.
Vale.
Los index.
Vale.
Aquí, hide select boxers for now.
Y aquí, add new component select boxers.
Vale.
Y esto lo ponemos por aquí y os lo llevamos para acá y ya está.
Ah, creo que ya sé por qué está dando un problema.
Creo que es porque ha actualizado la versión de TypeScript.
Creo que es por eso.
Que a lo mejor no es compatible.
¿Pusiste mal transition?
Puse mal transition.
¿En el commit?
Bueno, no pasa nada.
No sé dónde lo puse mal, ¿eh?
¿Dónde lo puse mal?
¿Dónde lo puse mal?
Transiton.
¿Dónde lo puse mal?
Transiton.
¿Qué pasó?
Está en lo suyo.
Ah, que puse mal en el view.
No pasa nada.
No pasa nada porque, total, era para probarlo.
Ya está.
No pasa nada.
No os preocupéis.
No pasa nada.
No lo íbamos a dejar, seguramente.
No lo íbamos a dejar.
Así que no pasa nada, ¿eh?
Para cuando intenté lo de que no...
Yo creo que igualmente no lo hubiéramos arreglado, ¿eh?
No lo hubiéramos arreglado porque al final eso pasa en toda la página.
Tenemos que mirar cómo arreglarlo...
Sí, perdón.
No os ignoro.
Lo que pasa es que estábamos aquí con otras cositas.
No os ignoro, amigos.
Venga.
Fixed Package Versions.
No os ignoro.
No os ignoro.
Toca abriose.
Pon un to do.
Bueno.
Nunca me sentí tan ignorado.
No, pero no pasa nada.
Todo el chat en fuego por el transition.
Lo siento.
Lo siento, lo siento, lo siento, amigos.
Lo siento.
Bueno, pues hemos avanzado ahí con esto.
La semana que viene terminaremos la selección de los personajillos.
A lo mejor, seguramente, pues veréis que se avanza un poco,
que vamos a hacer cambios ahí o lo que sea,
pero seguramente terminarlo del todo la semana que viene, ¿vale?
Para que lo tengamos ahí.
Select your boss.
Ah, no, porque es sections, ¿vale?
Y lo teníamos por así.
Bueno, a ver.
Lo malo es lo que os decía, que en hover queda raro.
¿Tendríamos que cambiarlo en click?
Pues creo que sí, porque si no, ya os digo, nos ponemos aquí y tiene que ir para arriba
y es un poco raro, ¿no?
Pero, bueno, al menos la idea ya está bien.
Yo creo que haremos lo del fade in, fade out y haremos como el slider para poder ir moviéndote
entre uno y otro.
Y seguramente lo haremos con click, que al darle click, entonces es que cambie.
A mí me hubiera gustado que el click te llevase a la página, porque creo que tenía sentido,
pero ya veo que por ahora vamos a tener que...
A no ser que cambiamos el diseño, ¿eh?
Que puede ser, que puede ser que cambiamos el diseño.
Pero al menos para tener un diseño por ahora y haber avanzado, ya me parece bien.
Aquí otra cosa, por ahora voy a poner un prevent default para que no vaya a la página, ¿vale?
Porque si no, iré a la página y no tiene mucho sentido.
Prevent default event behavior, ¿vale?
Y ya está.
Bueno, amigos, pues, ¿por qué no se ha publicado los cambios?
Bueno, porque está a medias y la página tiene que funcionar, amigo.
No podemos publicar.
Sí que hemos publicado los cambios, los hemos desplegado, pero no está...
No los puedes ver aquí, pero el código sí que está, ¿eh?