Quería ver las analíticas.
Bueno, la web de La Velada ha tenido hasta la fecha, en los últimos 30 días, 160.000 visitas.
Y el boxeador con más visitas ha sido Xelao.
Bastante sorprendente.
Más que el Mariana, que el Mariana es el que es por defecto.
Pues Xelao el primero, el Mariano el segundo, Plex, Alana, Nisakster.
Estos serían los boxeadores más visitados.
El que menos, Skyn, por ahora.
Por ahora, que le acabo de poner, también es verdad.
Y tenemos que los que más visitan son desde España.
Segundo, Colombia y México.
Y el que menos, ¿qué? Sudáfrica.
El que menos, Sudáfrica.
Bueno, pero me ha sorprendido un montón que sea Xelao, el más visitado.
160.000 visitas tenemos por ahora.
No está mal.
Vale, vamos a arreglar los versus.
Porque aquí el problema es que ahora, cuando tú lo pones, te pone quién es el que se enfrenta.
Pero en los del rey de la pista, ahora mismo no aparece.
¿Veis que no salen los versus?
Lo que podemos hacer para arreglar esto, nos vamos a ir al Select Your Boxer.
Y aquí tendríamos que tener en algún sitio los oponentes.
Oponents, oponents.
Aquí.
¿Vale?
Aquí tendríamos los aliados.
Y aquí tendríamos los oponentes.
Vale.
Lo que vamos a hacer aquí, vamos a simplificar esto un poco.
Voy a sacar lo que necesitamos el ID.
Bueno, y esto sería el link ID.
Lo sacamos de link.dataset.
¿Vale?
Y entonces, si el link ID es igual al oponente, le añadimos que es un oponente.
Esto funciona bien en el caso que tengamos los oponentes directamente en los nombres.
Porque fijaos una cosa.
Aquí tenemos, por ejemplo, el Mariana versus Plex.
Claro, aquí, bien.
Zelling, pues pondrá versus a Lana y a Mablitz.
Pero, ¿qué pasa?
Que en el rey de la pista es un todos contra todos.
Y aquí podríamos haber puesto versus y haber puesto un array con todos los luchadores.
Lo podríamos haber hecho, ¿eh?
Pero es un poco rollo poner todo el rato la misma información una y otra vez repetida.
Entonces, para simplificar, lo que hicimos es versus, rey de la pista.
Como uno especial, el rey de la pista.
Y lo bueno de esto es que ya aquí lo que podríamos hacer es decir, vale, pues vamos a sacar del dataset.
Si miramos aquí, del dataset, data, no sé qué.
¿Veis?
Por aquí, a ver, ¿dónde tengo?
Ah, aquí no lo tengo.
¿Dónde está?
Ah, estaba en el column, ¿vale?
Column boxes.
Aquí debería estar los, ¿ves?
Data ID, data name, country, country.
Y aquí tendríamos los oponentes.
Y aquí aparece el versus.
O sea, que aquí pondrá, para algunos, pondrá el rey de la pista.
Por ejemplo, aquí, si miramos el HTML, deberíamos ver que en este caso...
Ah, y ahora os explico una cosa de rendimiento muy interesante.
Data opponents, rey de la pista, ¿vale?
Pues ahí tenemos una pista, nunca mejor dicho.
O sea, ya tenemos que este oponente es el rey de la pista.
Bueno, pues lo que vamos a hacer aquí, como esa información la tenemos en el data opponents,
vámonos aquí en opponents.
Y lo que vamos a decir es, vale, vamos a sacar también el...
Vamos a sacar también el opponents, que es el link opponents, ¿vale?
Para tener básicamente esa información.
¿Es con dos P's?
Creo que sí, ¿no?
Sí, vale.
Vale, pues vamos a leer este atributo.
Nos lo vamos a traer aquí, ¿vale?
A este link opponents.
Y así le vamos a decir, vale, si ese enlace, la ID que tiene es igual al oponente, ¿vale?
Pues lo ponemos.
Y si no, lo que vamos a hacer también es revisar.
Podríamos decirle que link opponents sea igual al oponente, ¿vale?
Porque el rey de la pista, como todos tienen el mismo oponente, todos son el mismo.
Ahora, el problema que va a tener con esto, si lo dejamos así, me imagino,
es que, a ver, pondrá todos versus, incluso a él mismo, ¿ves?
Pero ahora ya todos lo ponen.
Lo que pasa es que tenemos que revisar que no se ponga a sí mismo.
Pero lo bueno es que ahora todos van a tener exactamente el mismo.
Porque son los únicos que están compartiendo oponente,
que tienen exactamente el mismo oponente.
Podríamos hacerlo también si quisiéramos que tuviese más sentido,
pues pone aquí el rey de la pista, ¿vale?
Y debería ser exactamente lo mismo, ¿vale?
¿Veis?
Sería exactamente lo mismo.
Pero como son los únicos boxeadores que comparten oponente,
pues ya haciendo así, ya tendríamos suficiente.
Esto, si el día de mañana lo quisiéramos cambiar,
pues lo tenemos que tener en cuenta.
Pero otra cosa que tendríamos que mirar es que no solo tendrían que ser el mismo oponente,
sino que además tendríamos que ver que el enlace de la ID
sea diferente a la ID que estamos revisando aquí cuando estamos activando el boxer.
Que esto haces cuando haces el hover.
Entonces, si el oponente, el enlace que estamos mirando, no eres tú mismo,
entonces vamos a añadir que eres ese oponente.
Y ahora con esto, ahora sí que lo tenemos, ¿veis?
Ahora, así mismo, ya no se pone que está versus, porque no tiene sentido,
y solo salen los demás.
Y ya tenemos ahí el rey de la pista y todos los versus.
¿Os parece bien que aparezcan todos los versus por ahí?
¿Cómo sería el rey de la pista?
¿Son peleas aleatorias?
El rey de la pista, en realidad, es que pelean todos contra todos.
Lo que pasa es que van uno contra uno.
Y lo que hacen es que el que gana más combates es el que será el vencedor, digamos.
Y si en vez de marcar todos, marca solo cinco oponentes y no los del mismo equipo.
Es que no son del mismo equipo.
Es que yo creo que no son del mismo equipo.
O sea, es un todos contra todos, en realidad.
Es un todos contra todos.
No son de otro equipo, ¿sabes?
O sea, no es un equipo contra otro equipo.
El rey de la pista son un todo contra todos.
O sea, lo que pasa es que no se sabe exactamente quién te va a tocar.
Mucha gente se creía que era un España versus Latam, pero no es así.
El rey de la pista es un todo contra todos, ¿eh?
No es un cinco contra cinco, sino que es todos contra todos.
Y el que gane más combates es el que ganará, ya está.
Son 20 combates de un minuto donde el que gana se queda.
Ahí está, exacto.
Muy bien, pues ya lo tendríamos por aquí el versus.
Venga, ¿qué más cositas?
A ver, os voy a pedir ayuda.
Os voy a pedir ayuda porque, amigos, a ver, os voy a pedir ayuda porque, fijaos, por ejemplo,
a Lana ya le hemos puesto aquí su entrenamiento.
Todos los luchadores están subiendo en sus redes sociales.
Primero, sus redes sociales, que esto también os voy a pedir ayuda, sus redes sociales.
Si queréis conocer más a Lana, pues podéis ir aquí a su Instagram, ¿vale?
Y veis a Lana la rana, ¿vale?
Y podéis ver si está entrenando, si no está entrenando o lo que sea.
Por YouTube Twitch.
Pues lo que os quería pedir es que, si os apetece, fijaos que no tenemos las redes sociales todavía de todos los luchadores.
Por ejemplo, si vamos a Peldaños, pues Peldaños todavía no tenemos las redes sociales.
No tenemos aquí nada de nada.
Bueno, pues si os animáis, podéis hacer PRs para añadir las redes sociales de toda la gente que le falta.
Por ejemplo, a Mablitz sí que tengo todas las redes sociales, pero de Karchez, pues no las tengo.
Pues sería genial que me ayudéis si hagáis una PR y añadáis las redes sociales.
Lo mismo también con los entrenamientos.
Ya os digo que a Lana, pues le hemos añadido ya el entrenamiento, porque lo vimos ahí en YouTube,
y ya tenemos aquí, entrenamiento, preparación para el combate, y le puedes dar clic aquí.
Bienvenidos, el día de hoy vamos a estar entrenando con...
Y ves el entrenamiento de Alana, ¿vale?
De cómo está entrenando y tal.
Y está bastante chulo el entrenamiento de Alana, ¿eh?
Que pone ahí bastante como todo lo que está haciendo y tal.
No sé si le va a dar pistas justamente a la competencia.
Pero bueno, que está bastante bien.
Pues de todos, si podéis poner un primer entrenamiento, lo tenéis aquí, mira, Alana.
Si vais aquí al de Alana, veréis que está Workout, y lo que tenéis que hacer es poner el VideoID,
y lo interesante también es que subáis el póster en formato WebP, y así pues queda así de chulo.
Que podéis hacer esto, y mira, la verdad es que la portada de Alana está bastante chula, está bastante bonita, ¿eh?
Esa sería otra, ¿vale?
Y luego, finalmente, otra cosa que esta es un poquito más complicada, por si no os queréis echar una mano,
es los clips.
Y es que fijaos que el Mariana aquí, el Mariana, este el Mariana sí que lo tiene, las declaraciones.
Por ejemplo, el combate lo verá mi madre, voy a ir con todo, voy a ganar.
Cuanto más alto, más fácil va a ser que le entre un gancho.
Pues estas son declaraciones que hizo el Mariana en el cara a cara, fíjate que le das un clic,
y al darle un clic, es una pena, porque como que cuesta que salga el clip,
me gustaría que fuese más, que se pueda hacer mejor.
A lo mejor lo que hacemos es sacar el vídeo.
Como el combate lo va a estar viendo mi madre, lo más probable, yo voy a con todo.
Yo voy súper competitivo y realmente voy a ganar.
Voy a ganar.
El mejor es el de Plex, fijaos el de Plex, que Plex le dijo, soy un psicópata.
No hay chance de que pierda, soy un psicópata, fijaos.
No hay chance de que pierda.
¿Por qué?
Porque soy un psicópata.
Soy un psicópata.
Bueno, pues eso, que estaría bien tener clips.
Lo genial, lo mejor, que se lo pedía Joel, pero me dijo que los clips no se pueden embeder.
Lo genial sería abrir una modal y que la modal saliese el vídeo para no salir de la página.
Pero al menos si por ahora pudiéramos tener los enlaces de los clips y las declaraciones aquí,
para que todos tengan, pues ya sería genial, la verdad.
Y otra cosa, en la fuente de Atomic quitamos las comillas.
Las comillas quedan un poco raras.
Habría que volver a ponerlas, ¿eh?
Pues eso, esos serían los deberes que os mando por si queréis aportar alguna cosa
y queréis ahí dejar en el repositorio, queréis hacer una PR, pues me ayudaría.
Una cosa interesante, no hagáis, por ejemplo, de añadir las redes sociales,
no añadáis las redes sociales de todos los luchadores.
Añadir las redes sociales de un luchador, hacéis la PR.
O sea, que no hagáis PR muy grandes porque será más difícil poder mergearla.
Si hacéis una PR muy chiquitita, además de que llegará antes y la gente podrá ver si ya está hecho,
será mucho más fácil de mergearla, ¿vale?
Para que lo tengáis.
Estaría bastante bien con una modal, pero no sé cómo se hace porque solo hago páginas con Wordpress.
Sería genial con una modal, pero el problema está en lo que he comentado.
El tema de los clips, al menos los de YouTube, porque en Twitch resulta que no...
En Twitch no se pueden hacer clips porque Ibai no tiene...
Twitch, Ibai.
No tenía la velada del año.
Está jugando este tío a Planta vs. Zombies y tiene 35.000 personas.
Menudo crack, menudo crack.
Bueno, pues estuve viendo y no está el vídeo de la velada.
No está el vídeo de la velada.
Ah, sí que está.
Ah, igual sí que está.
Sí que está, presentación de la velada.
Hostia, pues podríamos sacar los clips de Twitch.
Podríamos sacar los clips de Twitch.
Y ya, entonces sería más fácil porque los clips de Twitch sí que se pueden embeder.
Sí que se pueden embeder.
Ostras, pues mira, no sé por qué lo estuve buscando el otro día y pensaba que no se podía...
No se podía...
No podía estar.
Seguro que hay un montón de clips por ahí que se pueden reutilizar.
Lo que pasa es que ahora no sé dónde...
O es que no se pueden hacer clips.
En fin, lo que veáis, ¿eh?
Pero cuidado que no cumple y se borre el vídeo, ¿no?
No, porque tanto los clips...
Los clips tienen que ser del vídeo original.
Por ejemplo, yo los clips que he hecho son del vídeo original de la velada, ¿vale?
Son de la velada.
Así que no os tenéis que preocupar de eso, ¿vale?
O sea, debería funcionar perfectamente.
Pues ya que tenemos eso, vamos con más cositas porque todavía quedan cosas por hacer.
Ya os digo que si me ayudáis con redes sociales, clips de luchadores y los entrenos, pues súper genial.
Pues vamos con la página de combates.
Fijaos que tenemos aquí combates y pone próximamente.
Voy a desbloquear esto.
Vamos a ir al header y aquí en combates tendríamos disable true próximamente.
Y vamos a darle cañita a los combates.
¡Ostras!
Tengo...
Es que me habían pasado unas imágenes.
Vale.
Por ahora la lista de combates tenemos ahí la información de cualquier forma.
Pero, pero, voy a sacar las imágenes, las imágenes que están bastante chulas, de hecho.
Pues voy a subir las imágenes de los combates y vamos a hacer que eso quede un poquito más bonito.
Boxers, vamos a poner carpeta, matches y vamos a mover todas las imágenes que tengo por aquí.
Y tengo las imágenes como de los combates con transparencia.
Habría que mejorar el formato porque este PNG tiene que ocupar un montón.
¿Veis? Aquí está el rey de la pista.
Que el rey de la pista veo que 1, 2, 3, 4, 5, 6, 7, 8, 9, 10.
Solo saben 10.
Ah, bueno, no. Son 10.
No, no. Está bien, está bien, ¿no? Son 10. Es verdad, verdad.
Digo, hostia, solo saben 10. Pensaba que eran 20.
No, no, son 10. Son 5 contra... O sea, son 5 y 5, pero son 10.
Que es un todos contra todos.
Pues, hostia, podría haber sacado esta fotillo ahora que estoy viendo.
Podría haber sacado esto.
En fin, vale. El rey de la pista.
El tema, que estas imágenes vamos a tener que optimizarlas en un momento, ¿vale?
Porque si no ocupan un montón.
Así que nada, vamos a hacer lo mismo que hicimos el otro día.
Vamos a sacar esto por aquí.
Vamos a pillar todas estas imágenes.
Las optimizamos.
¿Vale?
No sé si valdrá la pena optimizarlas en WebP.
Tengo dudas.
Y no sé tampoco cómo de grande deberíamos hacerlas.
Por ahora vamos a darle una primera tirada.
¿Vale? WebP239.
Y Aviv está en ello.
Es que Aviv tarda bastante más.
¿Veis?
El 50% del trabajo ya lo ha hecho.
Que ha sido generar el WebP.
Pero el Aviv es mucho, mucho, mucho más lento.
Tarda un montón más.
Obviamente, porque se supone que normalmente lo optimiza mucho mejor.
Pero hay veces que tampoco...
Fijaos aquí, en la primera.
239 WebP.
Aviv 253.
Aquí, un poquito más.
O sea, no siempre Aviv es mejor opción.
Especialmente cuando tiene transparencias.
Así que en este caso, como tiene transparencias, lo que vamos a hacer es que todos los que son Aviv,
me los voy a cargar porque ya veis que no sirven como para mucha cosa.
Así que los vamos a quitar.
Y vamos a utilizar solo el que sería WebP.
¿Vale?
Vamos a ir también aquí a combates.
Y en combates, ahora mismo teníamos la ID.
ID 1, 2, 3, 4.
Lo que vamos a hacer con la ID para que los combates sean barra.
Y ponga 1 Agustín 51 versus...
¿Cómo era?
Carrera.
Con 3 As.
¿Vale?
Para que quede así, esto va a ser la ID.
Porque si no, la ID quedaría un poco aburrida de utilizar el 1 y tal.
Y además es que mirando las imágenes, las imágenes ya tienen justamente estas IDs.
Entonces, hostia, me ha puesto el barra Vic.
Ah, ya.
Espérate, tengo que arreglar esto porque me ha puesto el sufijo del barra Vic.
Eso debe ser de la optimización que hicimos el otro día.
¡Ay!
Vale.
Ya está.
Ok.
Vale.
Entonces, lo que vamos a hacer es...
Vamos a tener un number que sería el número de combate que es.
Porque ya sabéis que los combates, pues el primero es el de Agustín contra Carrera.
Y el último es el de Mariana contra YoSoyPlex.
Entonces, vamos a poner el number como la posición en la que van a combatir.
Y en la ID, pues sería ID Agustín 51 versus Carrera.
¿Vale?
Y esto un poquito, pues con todos, ¿no?
2 Guañá versus la Cobra.
Number 2.
Me encanta Gijaco Pilot cuando tienes que hacer este tipo de cosas repetitivas.
Además, esto es creo que lo mejor.
Ahora, a veces se le va la olla, como aquí en este caso.
¿Veis?
Se ha puesto ahí con Alana y no es así.
Es Alana versus Nisakster y Amablitz.
¿Vale?
Pues aquí un poquito lo mismo.
Vamos a poner Viruz versus Shelao.
Ahora veremos si todas las imágenes se ven.
Así que no habría ningún problema.
Y aquí number 5.
Y aquí Rey de la Pista.
¿Vale?
Vamos a utilizar Rey de la Pista.
Bueno, no tiene sentido que salgan todos los nombres.
Sería un poco rollo.
De hecho, Rey de la Pista.
¿Vale?
Me voy a asegurar que es exactamente como esperábamos.
Y la idea.
6.
Lesoxi.
¿Quién es Lesoxi?
¿Quién es ese Guijaco Pilot?
¿Qué te está fumando ya?
¿Qué te está fumando?
Vale.
Pues ya tendríamos aquí los combates.
¿Vale?
Al menos ya tendríamos los combates.
Vámonos a ver si esto sigue funcionando.
Porque creo que a lo mejor hemos roto alguna cosa.
Aquí no.
Aquí no habremos roto nada.
Pero aquí...
Aquí sí.
Fijaos aquí que ahora de fondo aparece ahí a lo bestia esto.
Esto lo tenemos que arreglar.
Porque como hemos cambiado la idea, pues aquí en el...
Aquí...
Forecast.
Combat Number.
¿Vale?
Combat Number.
Aquí en Combat Number, este sería el number.
Esto sería un number.
Claro.
Y ahora se queja porque se esperaba de tipo string.
Pues esto vamos a poner que sea un number.
Esto podemos poner que sea un number también.
Y esto en realidad podemos...
Pues no hace falta que sea un string.
Y ya lo tendríamos así.
¿Vale?
Y esto al menos debería funcionar bien.
Aquí, ver combate.
Claro.
Aquí debería ser combates.
Y aquí deberíamos poner la ID del combate.
Que no sé si aquí tenemos la información Combat Number.
Claro.
No sé si utilizar el Combat Number o Combat ID.
Podría...
Bueno.
Podríamos utilizar las dos cosas.
Combat ID.
Y aquí, pues ponerle un string.
Y el Combat ID lo podríamos utilizar aquí.
¿Vale?
Combat ID.
Entonces, vamos a ir poniendo ya esto para que tengan los enlaces sentido.
¿Vale?
Este Combat ID lo sacamos de aquí.
Combat ID.
Y este Combat Section, pues tenemos que sacar Combat ID.
Combat ID.
¿Vale?
Y también aquí, que aquí pone Forecast Combat Number.
Este Combat Number, ¿para qué se está utilizando realmente?
¿Para qué se está utilizando este Combat Number?
No se está utilizando.
Este Combat Number no se está utilizando.
O sea que esto, en realidad, no es necesario.
Igual más adelante sí que lo necesitamos, pero ahora mismo no se está utilizando.
O sea que por ahora lo quitamos y eso que nos simplifica un poquito.
Y ahora, vale.
Esto igualmente hay que arreglarlo.
El de rey de la pista aquí no tendría que salir todo esto, sino que tendría que salir el rey de la pista.
¿Vale?
Pero bueno, esto por ahora lo estamos dejando al menos como se veía antes.
Que antes se veía así.
No se veía roto.
Se veía el Mariana versus Joseph Plex.
No sé cuánto.
Vale.
Y esto de ver combate próximamente.
Ver combate próximamente.
Ver combate.
Vale.
Esto próximamente.
Es porque este Point of Events None hay que quitarlo.
Esto es porque estaba como desactivado lo que estábamos haciendo.
Este próximamente, pues lo vamos a quitar también.
Vale.
Y ahora ya lo tendríamos así.
¿Vale?
Y al menos ya tendríamos esto.
Vale.
Todavía no existe la página.
Luego la creamos.
Ver combate próximamente.
A ver, voy a poner esto que se formate bien.
Que me tiene un poco nervioso.
Ahora.
Entonces.
Una cosa es esto de la opacidad.
Yo la pondríamos bien.
Y le faltaría el hover, pero eso os lo dejo a vosotros.
Vale.
Ya tendríamos arreglado todo lo que sería el funcionamiento.
Combates.
Index.
Vale.
Vamos a cambiar ahora.
Está mal el ID de las chicas.
Midu.
Vale.
Vamos a verlo.
Como esto.
Boxers.
A ver.
El ID de las chicas en combates.
Vamos a verlo aquí en el public.
Zeling y Alana versus...
Bueno, a ver, me puedo copiar este.
Que este se supone que es el correcto.
A ver si es diferente.
Es igual, ¿no?
Pues exactamente lo mismo.
Tchum, tchum, tchum.
O sea, no sé.
¿A qué te refieres que está mal?
Porque ahí lo veo que estaba bien.
Ahora esto lo arreglaremos para que salgan las imágenes.
De hecho, lo vamos a hacer ya.
¿Vale?
Vamos a hacer que aparezcan las imágenes.
Porque así hecho, así es un poco como que no muy visual, ¿no?
Entonces voy a quitarle el fondo.
Esto lo ha hecho Alejandra, que se lo dije yo, para que nos ayudase como a añadir toda la información y tenerla en la página.
Pero lo que vamos a hacer es mostrar básicamente los combates.
¿Vale?
Entonces, Boxer Names.
Una pregunta, Midu.
El firma y funcionalidad lo propone cliente, Ibai.
O ustedes y ya ellos dan visto bueno.
O da igual y confían en tu trabajo.
Pues están confiando en mi trabajo, básicamente.
Sí que me han pedido algunas cosas que teníamos que cumplir, ¿no?
De hoy hay que poner los patrocinadores.
Hay que hacer esto de esta forma y tal.
Pero en general no me han pedido, no están como encima mío como para ver si están hechas ciertas cosas o tal, ¿eh?
Así que eso es lo que te diría.
El diseño, pues no me han dicho en ningún momento, oye, cambia esto y tal.
Sí que den los patrocinadores.
Me dijo, hay que ordenar esto.
Tiene que salir esto así.
Pero poca cosa, la verdad.
O sea, han sido bastante que se han fiao.
Se han fiao bastante de, vale, pues hazlo como tú quieras y que vaya saliendo lo que veas y ya está.
Y yo la verdad es que contento, ¿no?
Porque al final también es bastante vivo lo que vamos haciendo porque dependiendo de las PR que vaya haciendo la comunidad y todo esto,
pues lo vamos haciendo de una forma o lo vamos haciendo de otra, ¿vale?
Voy a poner aquí la altura y la anchura, que básicamente es 1920x1980.
O sea, esto es el Asperation.
No es que sea esa.
Lo podemos mirar aquí.
A ver, tú, tú, tú, tú, tú.
Es 1500x843.
1500x843.
Pero eso, el Wifi, el ancho y el alto, es más interesante por el tema de guardar la relación de aspecto
para que sepa dónde tiene que encontrar la información.
O sea, va a dejar el hueco perfecto, aunque tú en CSS cambies la imagen.
Y así no te va a dar saltos ni nada, ¿no?
Entonces, vamos a tener aquí, tú, tú, tú, tú.
Vamos a ver, lo hemos publicado en matches, imagen, matches.
Y aquí tendríamos la ID, que sería Combat ID.
¿Vale?
Pues el Combat ID.
Combat ID.
Bueno, Combat ID.
Combat ID.
Aquí tenemos los combates.
Y de cada combate, Combat ID.
Claro, tiene sentido, ¿no?
Combat ID, a mí con combates.
Esto sea la imagen.
Y esta sea la fotografía del combate.
No, claro.
Aquí debería ser del combate.
Tendríamos que poner entre.
Y aquí poner Boxer Names, Join, Join, J.
Hostia, esto es que estoy pensando que hay una forma muy chula de hacer esto,
pero ahora mismo tendría que mirar cómo se hace.
El hecho de poder hacer el Boxer Names, dice Boxer Names, Boxer Names.
No se puede llamar esta manera.
¿No tiene asignaturas de llamada?
¿Tipo String no tiene asignaturas de llamada?
¿Qué dices?
A ver.
Esto es así.
Vale, ahora.
Ya decía yo.
Vale, vamos a ver esto como están mostrando los combates.
Vale, me lo he cargado porque me falta aquí punto web.
Vamos a poner aquí que esto lo decodifique de forma síncrona.
Y ahora os enseñaré esto.
Vale, ahí tenemos un poquito ya los combates.
Esto lo vamos a centrar.
El class, text center, text grab.
Vale, todos los combates.
Vamos a ponerle el skew.
Y 6.
Para hacerlo un poquito así.
Todos los combates.
Vale.
Para darle un toque, para que no esté ahí cortadísimo.
De hecho, ¿por qué aparece ahí una sombrita?
O es cosa mía.
Pero hay una sombrita ahí, ¿eh?
¿De dónde aparece esta sombrita?
Si ahí no...
Imagen.
Ah, está aquí.
Hostia, digo, ¿de dónde sale esta sombrita?
Vale, pues esto fuera, esto fuera, esto fuera.
Esto tampoco lo vamos a necesitar más.
Esto lo podemos limpiar así.
Esto también lo podemos limpiar.
Podemos ir a ir, ir al combate, combatdata.number de la velada 4.
¿Vale?
Para mejorar un poco el título.
Y ahora le damos un poquillo de cosita.
Es posiblemente undefined.
¿Vale?
Pues sí.
Combatdata.
Y así no nos da problemas.
¿Vale?
Ir al combate 2 de la velada.
Vale.
Tendríamos que mejorar el title para que también aparezcan todos los boxeadores.
Pero bueno, así lo tendríamos, ¿no?
Están súper claras esas fotos.
Las fotos, o sea, son como salen en la portada.
O sea, no he querido retocarlas ni nada.
Luego, si en algún momento, por lo que sea, pues lo tenemos que arreglar, lo arreglamos.
Pero al menos tenemos las imágenes y luego las toqueteamos.
A ver, que decís que la ID de...
A ver, ID de los combates.
Zeling y Alana.
O sea, que decís que...
Es Zeling y Nisakster.
Ah, que las he mezclado.
Las he mezclado, ¿no?
O sea, que no es tan bien como los...
A ver, Zeling...
O sea, es...
Es Zeling y Nisakster.
Zeling y Nisakster.
Tenéis razón.
Nisakster.
Vale.
Zeling y Nisakster.
Y sería Alana.
Alana con Amabliz.
Y Alana y Amabliz.
Vale, vale.
Vale.
Ahora lo he entendido.
Ahora lo he entendido.
Es que por los nombres es bastante complicado.
Bastante, bastante complicado.
Vale.
Pues lo arreglamos aquí.
PNG y aquí punto web.
Gracias.
Gracias por estar tan atentos, eh.
Os quiero.
¿Qué es el de Coding Async?
Pues mira, muy interesante, amigos.
Os lo voy a explicar porque está muy chulo.
El caso es que fijaos que aquí hay un montón de imágenes.
¿Vale?
Hay un montón de imágenes.
Y el tema es que estuve mirando...
Hostia, ahora no sé por qué se ha roto...
Ah, no, no.
Vale.
El tema es que estuve viendo que había unos problemas de rendimiento a la hora de cargar todas estas imágenes.
De hecho, cuando bajabas, como que hacía un parpadeo muy raro, ¿vale?
O sea, hacía un parpadeo raro las imágenes.
Y yo decía, ¿pero por qué pasa esto?
Era muy raro.
Bueno, pues el tema es que mirando por qué ocurría era por renderizar las imágenes.
Era por el coste de renderizar las imágenes.
Y me di cuenta, dándole a inspeccionar, aquí en Performance, estuve viendo aquí, estuve grabando, ¿no?
Y hacía así, bajaba y miraba todo el tema este de renderizado.
Y aquí, pues obviamente, todavía hay cosillas que habría que mejorar.
Pero aquí, justamente por aquí, cuando bajaba aquí, pues había ahí un petardeo.
Bueno, pues el tema, el tema es que mirando se mejora bastante gracias a este decoding async.
Si lo he puesto aquí, ¿veis? Este decoding async.
Y esto lo que hace es decodificar la imagen de forma asíncrona.
Y por lo tanto, no bloquea el renderizado del documento.
Porque si está en síncrono, que es por defecto, ¿vale?
Que sería asíncrono, lo que hace es que bloquea el renderizado de la página para renderizar la imagen.
Y por eso muchas veces, pues pega como ese botek, sobre todo cuando hay muchas imágenes.
Pero le puse el decoding async y se mejoraba un montón.
Y la verdad, yo sí que me lo sabía, me lo conocía, porque hace mucho tiempo lo había utilizado.
Pero no me acordaba, ni siquiera tenía en cuenta de que esto realmente tenía un impacto tan bestia.
De hecho, fijaos que hay aquí, auto. Auto sería el por defecto.
Que es que el navegador decide por el usuario.
Pero el problema aquí, en este caso, es que lo que decidía por el usuario tenía el peor impacto posible.
Porque cuando, claro, seguramente aquí lo tendría como bloqueado y cuando hacías scroll, entonces aparecía.
Y, a ver, no os digo que lo uséis en todas las imágenes, pero si tenéis muchas imágenes juntas y por lo que sea notáis que pasa eso de que petardea cuando van a aparecer todas las imágenes,
pues echadle un vistazo porque ya os digo que entre bajar el peso de las imágenes, porque he bajado bastante el peso de las imágenes,
estaban a 150K o 100K cada una, y lo he bajado casi a la mitad.
Y poner el decoding async, pues ha mejorado bastante.
Que esto, justamente, y ahora lo veréis, aquí lo voy a quitar y ahora os voy a explicar una cosa.
Porque en estas imágenes voy a hacer lo de los combates y os explico cómo vamos a hacer esto.
Todos los combates.
Vamos a hacer esto un poquito más grande.
Aquí, text 6XL.
Vale, todos los combates.
Y 12.
Vale.
Pues, para que esto no quede tan cuadrado ahí, que se queda muy pegado,
lo que podemos hacer, que esto ya lo estamos haciendo en todos los sitios,
es en lo del mask image.
Así que vamos a poner el mask image con el linear gradient
y le ponemos que llega a black 85% y transparente.
Vale, transparente 100% o lo que sea.
Y así, vale, hace este efectillo que al menos le da un toque.
Podemos hacer que apure más para que llegue más hasta el final,
pero al menos que no se rompa de golpe.
Porque si no se ve el corte ahí que queda muy raro.
Y para darle un poquito de vidilla, aquí vamos a ponerle la clase,
pues lo típico, ¿no?
Que sea hover con un poquito de scale, con el transition transform.
También vamos a ponerle un poquito de saturación
para que llame bastante mal la atención.
Vamos a ver si esto funciona.
Vale, no funciona el scale, pero ahora sí que va a funcionar.
Vale, y ya está.
Al menos ya tendríamos aquí un poco que se detente.
¿Podríamos hacer algo más?
¿Podríamos hacer algo más para que destaque todo ya más?
Porque igual no he destacado suficiente.
Porque, bueno, a ver, yo creo que sí que se ve.
Bueno, si hacéis algo, haced un APR y lo miramos.
El tema.
Otra cosa.
Esto tendría que tener el aspect video
para guardar la relación de aspecto.
Vale, aunque realmente con el width,
con esto ya lo tendríamos.
Pero así, cuando se cargue, ¿ves?
No pega.
Fijaos la diferencia de si no lo pongo.
Si no lo pongo.
Bueno, claro, aquí no se va a ver.
Aquí no se va a ver.
Os quería enseñar, pero claro, no se va a ver
porque no hay contenido debajo.
Pero si pusiéramos aquí hola, por ejemplo.
Vale, ¿veis el hola que aparece por ahí?
Ojo, que cuando está cacheada no aparece mucho tiempo.
Pero si lo descacheamos,
lo ponemos un poquito más lento,
debería aparecer por ahí el hola
y luego pegará un salto.
¿Ves?
El hola y luego pega un salto.
En cambio, si le ponemos aquí directamente
y le decimos, oye,
la relación de aspecto de esta imagen es tal
y aquí ponemos el hola también, igualmente,
lo que deberíamos ver,
que me ha dejado fatal,
porque...
A ver.
Porque debería guardar la relación de aspecto
y no lo ha hecho.
A ver.
A ver si es porque estaba cargando la anterior
porque iba muy lento.
¡No!
¿Puede ser que no estuviese cargando el CSS igualmente?
Porque veo que sí,
que cuando lo ha cargado...
¿Veis?
Ahí.
No sé si es que no me está cargando el CSS.
A ver.
Porque justamente la idea es que no dé el salto
con el aspect video.
Aspiration...
No sé si...
A ver, aquí estaría bien.
Aquí estaría bien, pero...
Y de hecho, aunque cuando empiece a cargarlo,
como que no aparece.
Pero es que no debería aparecer en ningún momento,
porque si le estoy diciendo
que tiene una relación de aspecto,
como si fuese un vídeo,
y luego al final, encima,
le estoy diciendo que tiene que ocupar todo el ancho,
esto debería ocupar todo el ancho
y ya dejarle el espacio concreto que necesita.
Y no debería salir el hola este.
Entonces, ¿por qué aparece?
¿Sabes?
Aquí sí que ya lo arregla.
O sea, ahí está bien,
pero como que tarda demasiado.
¿Por qué creéis que puede ser?
¿Por qué creéis que puede ser?
¿Crees que funciona con valores específicos?
Algo raro hay ahí.
Siempre es mejor entonces poner ancho y alto
y no solo el ancho.
Totalmente.
Si tú pones...
A ver, tienes dos opciones, ¿vale?
Una es poner el ancho y el alto.
Esto es una opción.
Y la otra opción es poner la relación de aspecto.
Porque así siempre vas a ver cuánto hueco debe dejar.
En este caso, no sé por qué está pasando.
Me sorprende porque le estoy diciendo
ocupa todo el espacio
y pon automáticamente la altura
y guarda esta relación de aspecto.
Debería tenerlo.
Y esto debería funcionar seguro.
Seguro.
Pero no sé por qué no está dejando ahí
y tarda como para hacerlo.
No sé si es por...
Porque...
No sé.
No sé por qué es.
Porque aunque esta imagen
no la está cargando después.
Está desde el principio ahí.
Y esto lo debería poner.
A ver...
Aspect Video...
No, no.
Es que está bien.
La altura, la anchura...
Que está perfecto.
No sé.
No sé por qué tarda
y por qué no lo hace bien.
Curioso.
Curioso.
Porque esto alguna vez os lo he enseñado
justamente de cómo puede mejorar el rendimiento y tal.
Pero bueno.
Pues nada.
No sé por qué no pasa.
Venga, vamos con la página del combate.
¡Ah!
Os quiero enseñar el componente Image.
Vale.
Componente Image de Astro.
Porque muchas veces
me lo habéis comentado
y nunca lo hemos usado
y no lo hemos usado más que nada
no porque no me guste
sino porque por tiempos
por ir rápido
y todo esto.
Entonces,
vamos a utilizar el componente Image
y el componente Image
tiene algunas cosas interesantes.
El componente Image
te obliga
de hecho si le quitas esto
si le quitas algunas cosas
se va a quejar.
¿Ves?
Que dice
¡Oye!
Me tienes que decir
la altura y la anchura.
Puedes hacer eso
o puedes hacer que lo infiera.
Lo mejor por temas de rendimiento
es que le digas
cuál es la altura y la anchura.
Si no,
lo que va a hacer
es que va a tener que descargarse la imagen
para saber cuál es la altura y la anchura
para justamente optimizarlo.
Además,
el componente Image de Astro
te trae cositas bastante chulas
como por ejemplo
que te añade
el decoding por defecto.
Si le dais botón derecho
vais a ver aquí
qué debería.
¿Ves?
El decoding Async
y el loading Lazy.
Esto lo está añadiendo por defecto.
O sea,
es porque está intentando optimizar
al máximo la imagen.
A veces eso
loading Lazy
no siempre es positivo.
porque por ejemplo
aquí
fijaos que pega
como que hace un parpadeo
y es que
no debería ser necesario
aquí hacer un loading Lazy
porque justamente
queremos que
aparezca
lo más arriba posible
y eso puede causar
como un pequeño retardo
a que se cargue la imagen
y las imágenes
que van muy arriba
no debería tener
este tipo de retardo.
Entonces,
¿qué puedes hacer?
Pues aquí lo que puedes hacer
por ejemplo
las que están muy arriba
puedes hacer que se carguen así
y las que están más abajo
puedes hacer que se carguen
con un Lazy.
Así que aquí con el índex
podrías decirle
vale,
pues si el índice
es menor a 2
¿Ves?
Pues hago que se carguen
lo antes posible
y si son mayor a 2
significa
pues que están más abajo
que todavía no las está viendo
el usuario
y que se carguen de un Lazy.
Esto puede ser buena idea.
Ya os digo,
no siempre pongáis
las imágenes
que se carguen en Lazy.
Las imágenes que ve el usuario
nada más entrar en la página
hay que hacer que se carguen
cuanto antes.
No le pongáis en Lazy
porque si no va a tener un retardo
entre que el navegador
lo detecta
que tal, ¿no?
Mi pana es menos perfeccionista.
Bueno, lo siento.
Lo siento.
¿Vale?
Lo siento.
Y un playholder para la imagen
tampoco tiene sentido
porque en este caso
quieres que sea una imagen
que cuanto antes se vea.
Entonces si le pones un playholder
va a haber como un cambio.
Entonces no tiene ningún tipo
de sentido
ponerle un playholder a esta.
A las de abajo
a lo mejor sí
pero es que tampoco va a notar
que se está cargando
con Lazy.
¿Vale?
Vale.
Entonces ya tendríamos
estas imágenes.
Esto habría que subirlo
para arriba.
¿Vale?
Ya tenemos aquí
los combates.
Vamos a activar
la de combates.
Vamos a crear
la página de combates.
Combates
y aquí vamos a poner
id.astro.
Venga.
Vamos a cargar
la página de los combates.
Vamos a traernos aquí...
Me voy a copiar esto
aunque esto lo ideal
sería mejorarlo.
¿Vale?
Pero por ahora
me lo voy a copiar tal cual.
Y aquí en el layout
deberíamos poner
layout, layout
con un main.
¿Vale?
Y por ahora
por ahora me voy a copiar
también la imagen.
Esta imagen que habíamos
hecho aquí
rechulona
la voy a copiar tal cual
solo que
aquí vamos a poner
que sea eager
seguro
para que evite
hacer el lazy.
¿Veis?
Esta es la imagen principal
no tiene sentido.
Y aquí
vamos a sacar
la id
const
la id
de astro params.
¿De dónde sale esta id?
De esta url.
¿Por qué?
Porque cuando nosotros
naveguemos
Ah, vale.
Dice que esta tipaz
es requerida
Vale.
Necesitamos indicarle
Vale.
Vamos por partes.
¿Por qué me está dando
este error?
Me está dando este error
porque la url
que queremos utilizar
esta url
es dinámica.
Cada luchador
bueno, cada combate
tiene una url única.
¿Qué es lo que pasa?
Que como lo que queremos
es generar las páginas
de forma estática
Astro me está diciendo
oye, no sé
esto es una página
una ruta dinámica
y no tengo ni idea
antes de empezar
cuáles son las rutas
que tú quieres que funcionen.
Hay dos formas
de solucionarlo.
Uno
poner que el output
sea server
y así las
las detectaría todas
o poner
decirle
con el método
getStaticPath
cuáles son las id
que tiene que detectar.
En este caso
vamos a exportar
exportar
const
getStaticPath
y lo que vamos
a utilizar aquí
sería
esto fuera
esto fuera
vamos a utilizar
los combates
vamos a decirle
vamos a devolver
directamente
que de todos los combates
cada uno
tiene un id
y le vamos a decir
que los parámetros
que aceptamos
en esta id
es la misma id
de cada uno
de los combates.
¿Vale?
Entonces tenemos
esta id
esta id
esta id
entonces cuando intentemos
entrar a esas id
va a funcionar correctamente
o debería funcionar correctamente
vamos a verlo
si entramos a
vale
ahora me dice que combate
no está definido
pero ahora no me está dando
el mismo problema
¿Vale?
Si entramos aquí
vale
tenemos que arreglar aquí
alguna cosita
vamos a sacar
el combate
el combate
sería
combat
find
y a través de la id
traemos el combate
y a cuando entremos
en el detalle
de un combate
pues ahora
tenemos la id
y saquemos
toda la información
¿Vale?
aquí tenemos el combate
find
ya tendríamos aquí
el combate
luego
boxers
boxer names
¿Vale?
el boxer names
que de aquí
lo sacamos
boxer names
de aquí
boxer names
¿Vale?
voy a traer también esto
boxer names
vamos a poner aquí
combat data
combat data
y aquí esta id
sería esta
¿Vale?
y al menos ahora
vale
ya tendríamos el detalle
al menos con esto
¿Vale?
el detalle
y ahora
para hacer la animación
entre una página
y otra
vamos a ponerle
que esta imagen
tenga una transición
con el nombre
de
combat image
y le vamos a poner
aquí la id
¿Vale?
combat image
y combat
punto id
y esto mismo
se lo vamos a poner aquí
y vamos a decir
que esto sea
la id
como la id
va a ser exactamente
la misma
entre esta y esta
pues va a hacer
esa animación
rechulona
¿Vale?
y entonces va
entre una y otra
ok
vale
perfecto
bueno
estamos ahí avanzando
con el combate
¿Qué pasaría si una combatiente
si una combatiente
usa un carácter
no permitido para url?
pues hay que evitarlo
obviamente
en este caso
nosotros por ejemplo
creo que
no sé si peldaños
ah no
peldaños
es con ny
pero hay algunos
a lo mejor que tienen acento
o lo que sea
nosotros
lo que tenemos que hacer
en la id
en la id
nosotros
es ponerle
lo que queremos
que aparezca en la url
puedes explicar
lo de transition
las transition
que hemos hecho
es una cosa
que se llama
view transitions
que muchas veces
lo que hemos hecho
lo hemos hecho ya
y tienes en vídeos
de youtube
donde lo explicamos
mira el futuro
de la web
de la programación web
mira aquí lo explicamos
el futuro de la programación web
view transitions api
las view transitions api
lo que te permite
justamente
es hacer una transición
entre una página
y otra
estas son dos páginas
totalmente distintas
como puedes ver
pero le estamos indicando
que este elemento
tiene que hacer una transición
de esta página
a la siguiente
a través de una animación
eso la animación
la hace automáticamente
pero para saber
identificar
el elemento
que tiene que animarse
de una página a la otra
utilizamos el transition name
lo importante es que la transición
tiene que tener un nombre único
por eso estamos utilizando la id
y así sabe perfectamente
que esta imagen
es la que tiene que viajar
a esta página
a esta
porque
lo que hace es detectar
esta imagen
con este transition name
y esta imagen
con este transition name
obviamente
las transiciones
las tienes que hacer
con elementos
que se parezcan
no puedes hacerlo
con un elemento
que no se parezca
absolutamente nada
porque si no
pues puedes reventar
pero lo puedes hacer
con textos
puedes hacer que sea
más grande
más pequeño
o sea no hace falta
que sea exactamente igual
porque justamente
es una transición
Mido
¿me muestras
cómo haces el difundado
para que no sea
cada combate
todo recto?
pues lo tienes
aquí en esta línea
lo hacemos con el
mask image
el mask image
lo que nos permite
ves aquí que aparece
que termina así
de esta forma
el mask image
lo que te permite
es poner una máscara
encima de la imagen
y aunque parece
que hacemos un gradiente
lo que quiere decir aquí
lo que tienes que leer
es que
cuando utilizamos el black
le estamos diciendo
que
del punto cero
que sería en este caso
el de más arriba
hasta el punto
90%
cuando decimos black
lo que queremos decir
es que pinte la imagen
y del punto
del 90%
hasta el final
de la imagen
queremos que sea transparente
y del 90%
al 100%
va a hacer ese degradado
a transparente
que puedes ver aquí
y lo puedes ver más claro
si lo pones a 50%
bueno
en esta página no
tendría que ser en esta
si lo pones a 50%
¿vale?
pues ves
el degradado empieza antes
pero claro
puedes decirle que
empiece
o sea que
sea hasta el 50%
pero que el transparente
sea el 60%
entonces ves
se corta mucho antes
o puedes hacer que empiece
el degradado
desde el principio
y ya está
puedes hacer ahí
un montón de cosas
y no solo puedes hacer
que sea de abajo arriba
¿vale?
puedes hacer
tu right
le puedes decir
que sea de izquierda a derecha
ves que ahora es aquí
o puedes hacer que sea
a la izquierda
ves
y ahora el degradado
lo tienes aquí
tu bottom sería
por defecto
¿vale?
tu bottom sería
para abajo
sería por defecto
puedes hacer tu up
también
o tu
¿cómo es tu up?
tu above?
ah no, acuerdo
no acuerdo como es
tu up
no sé
no me sale
linear
gradient
tu up
no, no me acuerdo
como es
¿cómo es?
top
tu top
tienes toda la razón
tu top
tu up
anda yo también
no me salía la palabra
tu up
ya me salió nada raro
pues eso
ahí lo tienes
puedes hacerlo también
de hecho lo hicimos
el otro día
por defecto
para abajo
por si te lo preguntas
por defecto
para abajo
y lo habíamos dejado
a 90%
vamos a hacer que sea igual
¿vale?
y ya está
vale
ahora podemos hacer una cosa polémica
a ver que os parece
una idea así un poco polémica
que he tenido
¿qué pasa si usas múltiples gradientes?
pues que se van a ir añadiendo uno con otro
las máscaras no se pueden animar
porque los gradientes no se pueden animar en CSS
los gradientes a día de hoy
esto pues es una cosa que puede cambiar
los gradientes no se pueden animar
por desgracia
entonces lo que sí que puedes hacer es cambiar los elementos
que hay detrás
y todo esto
eso sí
pero por ahora
no se puede
no se puede animar
agregar las redes sociales
para Carchez
vale Carchez
vamos a ir mirando las PRs
sociales Carchez
ah pero también has puesto a Perlaños
tío
dice he puesto Carchez
bueno pero también Perlaños
ya que estaba
pues Perlaños también
ahí está
vale
vamos por aquí
tu tu tu
pull request
de todos
ves
todos los bolsadores
que eso lo complica
mira Carchez también
Scane
venga alguien ha puesto Carchez
que aquí al final
pues será un poco lo mismo
no
es un poco lo mismo
TikTok
a ver veo que en este caso
Instagram
estoy viendo si hay más
por si ha añadido alguna más
vale
vamos a añadir esta también
Carchez
te hice la de todos
ya
pero es que es lo que hemos dicho
que si hacéis la de todos
es más difícil de emergear
porque
va a crear más conflictos
a lo mejor alguien ya había hecho una antes
entonces vamos de abajo arriba
y ahora veremos
agregado los índices
de Scane
vamos a ver
Scane
social
vale perfecto
hay una cosa
que me da un poco de rabia
de Github
cuando revisamos pull request
y tal
que básicamente
como que
tienes que
dar muchos clics
y como que tiene un poquito
como que tarda
la latencia
me gustaría que se pudiese ver
nada más entrar
que ya se pudiese ver
algo de código
a lo mejor no todo el código
pero al menos
a mí toda esta parte
como que me raya un poco
lo haría como más pequeño
y que quepa más información
no sé
a lo mejor
es mi opinión
pero es como que me da un poco de rabia
tener que estar dando click
y además que tarde tanto
Scane
ah mira
ha añadido el workout
hostia que bueno
muchas gracias
que bien que bien
vale gracias Giovanni
ha añadido el workout y todo
vamos a ver aquí
porque esto también estaba ya
Scane
training
Scane
vale es que ha añadido este
aunque voy a preferir
a ver si este es el de Scane
no vayamos a liar
si este es Scane
este quien era
ah digo hostia
pensaba que
vale Scane
ta ta ta
el TikTok
esto ya parece que está así
vale perfecto
marca resolve
y vamos con la siguiente
Midwood
haz tu propio GitHub
si hombre
como si fuese así
tan fácil
tan fácil
haz tu propio GitHub
anda que si cada vez
que a un programador
no le gusta algo
crease su propio GitHub
sabes
su propio producto
su propia cosa
sería una cosa loca
estaríamos ahí todo el día
estaríamos todo el día
haciendo cosas
venga
a ver voy a añadirlo
voy a abrirlos todos
y social
vale
venga
Folagor
Folagor
ta ta ta
lo malo es esto
todos los conflictos que
YouTube
Folagor
vale
me gusta más este
así que quitamos este
TikTok
vale
venga
mergeamos
haz tu propio Twitch
el Twitch
si que lo he pensado
de hacer al menos
una versión
sencilla de Twitch
para probar algunas cositas
eso estaría bien
Linus Torval lo hizo
no
Linus Torval
se hizo un Git
que es algo
que está muy bien
la verdad
pero no es
no hizo GitHub
hizo un Git
Pelixkanger
vale
buenísimo
es impresionante
la de
nicks raros
que tiene esta gente
la verdad
tiene un montón
de cosas raras
Peldaños
vale
bueno
Peldaños
la verdad es que lo tiene
súper bien
bien por él
que ha conseguido
tener el mismo nombre
en todos los sitios
bien por él
vale
a ver aquí
que no la liremos
Instagram ya está
YouTube
ya está
este me gusta
que es un poquito más corto
Twitch
ta ta ta
vale
no conozco a ninguno
bueno es normal
yo tampoco conozco muchos
las cosas como son
pero alguno
te irá sonando
también hay muchas veces
que cuando participan
en la velada
justamente
pues tienen esto
sería raro
que te rame el nombre
llevándote escalones
hostia es verdad
ahí tienes toda
toda la razón
tienes toda la razón
a tu unicornio
ah mira
Alejandra había puesto
por aquí
el detalle
y todo
que bueno
unicornio links
a ver si este
no da
no da problemas
vale
envergeamos
ah mira
otro que ha hecho
el unicornio también
a ver
así lo mezclamos
Twitch
vale
me voy a quedar
con este
el de Instagram
también me voy a quedar
con este
Twitter
YouTube
bueno
pues nada
y TikTok
que este
no lo teníamos
pues ya está
resolvemos
venga
solo quedan 3
¿cuánto medís?
así te buscamos pelea
1.70
mido 1.70
por si me queréis
buscar pelea
vale
se volvieron a agregar
el carácter comillas
oye muy bien
gracias
gracias porque habíamos
quitado las comillas
hostia
menos 24 bytes
o sea
y lo has hecho
un poquito más pequeño
¿cómo puede ser eso?
a ver cómo queda esto
a ver cómo queda esto
vamos a ver
lo de las comillas
a ver lo de las comillas
localhost
básicamente
quitamos las comillas
de la fuente
ah pues sí
ahora sí
vale
perfecto
perfecto
vale
agregué las redes sociales
el vídeo de entrenamiento
de peldaños
vale
nos vamos a quedar
con la
con la
con el
con el vídeo de entrenamiento
de peldaños
vale
y así ya lo tendremos
vale
todo esto
lo podemos quitar
no
esto es lo que vamos a quitar
el workout
sí que lo vamos a dejar
vale
así
vale
y sociales
lo tenemos ahí
y así ya tenemos
el workout
falta el github
de cada streamer
¿os imagináis?
eso sería ya tremendo
que tú usen
geekcap y todo
a ver
entrenamiento
vale
venga pues otro
¿cómo hago con el tema
de las cookies
ahora que las quita
el siguiente mes?
de google analytics
hombre te han tenido
la gente de google
seguro que tenía una
como
no un tutorial
pero sí alguna forma
de
de
de emigrar
¿no?
de hecho
la nueva versión
de google analytics
si no me equivoco
si no me equivoco
estaba
estaba arreglado
vale
y a ver aquí
aldo
aldo también
tenemos aquí
twitch
instagram
instagram ya lo tenemos
o sea
ojo
aquí se ha mezclado
algo
este no está
este no es tan fácil
de
aquí hay algo
raro
raro
este está raro
este está raro
vale
pues bueno
ya hemos mezclado esto
vamos a hacer una cosa
porque tengo los vídeos
de presentación
voy a
tengo los vídeos
de presentación
entonces
si no me equivoco
en cloudflare
he subido los vídeos
de presentación
tengo una idea
un poco
pirata
de una cosa
que a ver
puede ser un poco
polémico
pero
a ver que os parece
a ver
vamos a quitar
cositas por aquí
a ver que pone
por aquí
no se encuentra el módulo
porque no se encuentra el módulo
esto de astro
de la extensión esta
es que se vuelve loca
que no encuentra módulos
y tal
me dan ganas
de darle un bocado
a veces
vale
cosas que faltarían aquí
los títulos
por ejemplo
el título SEO
esto habría que arreglarlo
no está del todo
todavía
best titles
combates de la velada
claro este sería
combate
esto es un número
de combate
en concreto
pero molaría
poner los nombres
también
de la gente que participa
y todo esto
entonces
combate
número
de la velada
entre
bueno
podemos poner eso
con el boxer names
un poco
a no ser que sea
el rey de la pista
que será muy largo
pero bueno
al menos para tener algo
combat data
punto number
combat data
vale
si no encuentras
el combat data
es vacío
vamos a devolver aquí
status 404
que esto no debería pasar
pero por si acaso
y aquí
podríamos decir
esto lo podríamos poner aquí
más que nada
para que no sea muy bestia
se podría mejorar
pero
combate
entre
vale
esto así
esto así
vale
a ver
os voy a explicar una cosa
que está muy chula
de
de las comas
que esto está muy chulo
porque
si vamos a los combates
seguramente
y vamos a
yo que sé
a estos
selling
no sé qué
no sé cuánto
vale
y nos vamos a la descripción
description
vale
aquí vemos
que pone combate
entre boxeador
bueno
esto no sé por qué
entre
ah
es porque aquí
el boxer names
este
get boxer names
ves pone boxeador
esto no hace falta
boxer id
alana
no pero esto claro
lo que tendríamos que hacer aquí
es sacar bien los nombres
o sea no sería sacar el boxer id
pero bueno
por ahora lo vamos a
lo vamos a dejar así
vale
más que nada para arreglar esto
entre
y esto lo quitamos
este
estas comillas
vale
entonces veis pone combate
entre
zeling
alana
y zaxter
amablitz
y aquí pone una coma
porque le hemos hecho un join
y entonces cuando tú haces un join
aquí en run.js
haces por ejemplo
names
y pones
es que esto está muy chulo
ya verás
alana
zeling
y yo que sé
virus
por decir algo
¿no?
y muchas veces
hacemos esto
que no está mal
pero no es correcto del todo
¿por qué no es correcto del todo?
porque nosotros en nuestro idioma
lo que hacemos es utilizar
el
la coma
y luego
ponemos la i
¿vale?
y eso dependiendo del idioma
cambia
porque hay sitios que utilizas la coma
y en otras que utilizas otras cosas
¿no?
entonces
esto realmente tiene un arreglo
un arreglo que está bastante chulo
y
para hacerlo
a ver
cerramos esto
vamos por aquí
lo que tenemos que utilizar
sería
a ver si lo encontramos
voy a
buscarlo por aquí
intel
coma separator
no me acuerdo con esos comas
no
coma separator
es que no sé por qué me sale
collator
collator
collator
¿puede ser?
collator
no esto es compare
o sea no me acuerdo cuál es el
es que intel tiene tantas
esta no es
no esta no es
a ver
plural rules
esa
plural rules
¿puede ser?
no plural rules no es
list format
ahora
no me salía el nombre
esta
list format
bueno pues
list format
joder
que hay tantas ya
que las mezclo en mi cabeza
entonces
lo que puedes hacer con el list format
es formatear una lista
y que te funcione
dependiendo del idioma
puede ser en español
por ejemplo
le puedes decir el estilo
que sea corto
o que sea largo
esto depende
porque en inglés
por ejemplo
puedes utilizar el and
o puedes utilizar el símbolo
de ampersand
que está bastante interesante
entonces ya
podríamos utilizar el formatter
punto format
y le pasas names
y con esto
fíjate la diferencia
nos ha formateado
en lugar de poner el join
que es el típico
que utiliza todo el mundo
nos ha puesto
alana, ceilín y viruz
y nos lo ha puesto con la i
y le puedes cambiar el idioma
decirlo en inglés
¿ves?
y te lo pone correctamente en inglés
además en los tipos
podría ser
puede ser o
también
¿ves?
no solo es con la i
sino que también es con la o
puede ser conjunción
o disjunción
y puede ser la corta
también
y ves
que será con el and
con el símbolo
en el caso del español
la corta y la larga
yo creo que es la misma
¿ves?
porque es total
es una letra
pero bueno
que es interesante
porque muchas veces
veo que el tema
de que la gente utiliza el join
que no está mal
pero
en cuatro líneas
además
esto es
está soportado
por todos los navegadores
básicamente
o sea
esto lo podéis mirar aquí
can i use
vais aquí
y vais a ver
que está soportado
por todos los navegadores
bueno
94,75%
si hay alguno
que no lo soporta
lo podéis mirar
y entonces
pues hacer una alternativa
puedes decir
si intel.listformat
es diferente
undefined
¿vale?
pues entonces
lo hacéis así
si no hacéis el join
ya está
ya tenéis
ya tendríais las dos formas
de hacerlo
y ya tenéis un soporte
del 100%
pero cuando se puede
pues yo creo que queda súper bien
y justamente
pues es que
me ha acordado
porque esto me parece
un caso de uso
bastante
bastante bueno
¿no?
all boxernames
podemos utilizar esto
aquí
con el español
all boxernames
podemos utilizar
o formatted
vamos a poner
formatted
boxernames
formatted.format
boxernames
y ya
evitamos utilizar el join
y
saldrá de forma
más natural
con los nombres correctos
¿vale?
así cuando vayamos
a nuestra página
aquí
y miremos
en el código
a ver si soy capaz
¿por qué no me deja?
le doy al botón derecho
y solo me sale
guardar imagen
bueno
herramienta de desarrollo
elementos
en el head
¿vale?
¿veis?
y ahora salí con la i
que todavía habrá que mejorar esto
porque obviamente
no queremos las id
sino que queremos los nombres
y queda un poco raro
ahí con el guión
pero que
bueno
me parece
un detalle importante
para que lo tengáis en cuenta
¿os lo sabíais o qué?
se puede hacer
con los plurales
también
en inglés
continúa con la coma
es que está bien
Gochi
eso es un error
muy común
que mucha gente comete
que sea con la coma
es porque el inglés
a diferencia del español
cuando se pone
cuando tú
haces una lista
el último elemento
también va con coma
también va con coma
¿sabes?
o sea
es Alana
Ceylin
coma
and
Viruz
esto es correcto
esto es como
funciona en inglés
cuando se hace una lista
la última tiene coma
en español
no va con coma
es la diferencia
pero es un error
que muchas veces
de hecho esto me lo han corregido
mil millones de personas
mil millones de veces
y en inglés
va con coma
por más que a la gente
sea rara
gramaticalmente es correcta
claro por eso
pero en español no va
por ejemplo
en español ¿veis?
no hay coma
entonces
se ve que no sabe inglés
y yo tampoco
bueno puede ser
para arreglar
le pones un etcétera
al final y ya está
no hombre
pero es innecesario
poner justamente
el etcétera
si es innecesario
son cuatro líneas de código
va a hacer cosas tan raras
es muy rara
si los dos últimos cuentan
como una cosa
aunque lleva
and
vale
Alana etcétera
si pone poseadores
Alana etcétera
y así ya lo tenéis arreglado
bueno
vamos con los vídeos
vamos con los vídeos
el tema
tengo aquí
puesto
tengo aquí
por aquí
ah por cierto
queréis ver algo interesante
tengo aquí el libro
de Eloquen JavaScript
y podemos ver
cuántas veces
se ha descargado
30.000 veces
30.000
bueno
se ha descargado
en sus diferentes formatos
30.000 veces
se ha descargado
el PDF
o el APAP
y tal
del libro
de Eloquen JavaScript
30.000 veces
no está mal
no está mal
30.000 veces
se han descargado
que puede ser
la misma persona
más de una vez
pero bueno
al menos ya lo sabemos
pues tengo por aquí
la velada 4
y aquí
tengo
los videitos
en WPM
y en MP4
que vamos a intentar
que se carguen siempre
en WPM
que es lo
lo bueno
que raro
ese del 403
que sale ahí al principio
esta es la presentación
que se hizo
entonces
he pensado
que podríamos intentar
hacer una cosa muy loca
vosotros me decís
a ver cómo queda
¿vale?
vosotros me decís
a ver cómo queda
pero la idea
la idea que tengo
es la siguiente
básicamente
a ver
vamos a poner
la musiquita
otra vez
mientras
la idea que tengo
muy
muy loca
es que se ponga
de fondo
entonces
vamos a poner aquí
una absolute
vamos a poner
que ocupe todo el espacio
right 0
que esté por detrás
¿vale?
ahora arreglaremos
un poco los estilos
¿vale?
pero por ahora
para que aparezca ya
y aquí vamos a cargar
el vídeo
y vamos a tener
dos source
source
y vamos a cargar
source
a ver
source source source
y tendríamos por aquí
este
el mp4
¿vale?
lo ponemos
en un
en un cdn
porque
para que
para evitar problemas
de que
nos gastemos mucho
el ancho de banda
rápidamente en vercel
¿vale?
y este cdn
además es gratuito
casi
es increíblemente
barato
entonces
como no
no cobra
por el ancho de banda
pues tiene todo el sentido
del mundo
que lo pongamos aquí
¿vale?
entonces le ponemos
los dos source
y le ponemos uno
que sea el mp4
y otro el wpm
y para que el navegador
sepa
cual de los dos vídeos
tiene que cargar
le tenemos que decir
que este es del tipo
pues
vídeo mp4
¿vale?
y este es del tipo
wpm
y así
lo bueno es que el navegador
dirá
vale
voy a intentar cargar
el que
el que
soporte
si soporta el de wpm
lo cargará
y si no
el de mp4
el de wpm
tiene mejor rendimiento
y ocupa mucho menos
pero si no tienes soporte
pues nada
tirará el de mp4
que tiene peor
peor rendimiento
pero bueno
¿qué le vamos a hacer?
vamos a poner autoplay
mood
que esté en loop
no sé si será
no sé si se verá demasiado
pero creo que puede quedar
bastante
bastante chulo
la verdad
entonces
ahora
vamos
por ahora vamos a poner esto
absolute right
no sé si poner
o esto lo podemos poner
en el vídeo
¿no?
podemos poner aquí
que esto tenga un
estoy pensando
vamos a poner esto
es que no sé
si necesitaremos
object
object
contain
algo así
a ver
vamos a ver esto
a ver cómo queda
si es que queda
vale
esto también
tiene que ir arriba
del todo
y
el problema
es que esto
tiene que ser
cover
y el problema
es que esta opacidad
tendría que ser
mucho
mucho menos
pues esta podría ser
una idea
ponerlo de fondo
¿qué os parece
ponerlo de fondo?
ponerlo de fondo
todavía no faltaría
abajo
ah y espérate
para que no se note
el corte
porque fijaos
que aquí se note
se nota el corte
tenemos dos opciones
una ponerla de fondo
y otra
espérate
primero voy a arreglar
el corte
para arreglar el corte
lo que podemos hacer
aquí
vamos a poner un estilo
con el mask
image
linear gradient
mira si ya se lo sabe
se lo sabe
de memoria y todo
de hecho podemos hacer
que sea menos exagerado
o sea más exagerado
el gradiente y tal
algo así
queda raro
ya la verdad
es que tenía
en mi cabeza
en mi cabeza
sonaba espectacular
no sé si ponerle
todavía menos
y jugar con la opacidad
o simplemente sacarlo
o sea lo podríamos sacar
abajo
y ya está
algo más parecido
a las presentaciones
pero esta
algo así
que no se note tanto
y que sea algo que está
está guapo
pero la espalda de virus
queda rara ahí
ya lo malo
de la espalda de virus
es que queda cortada
entonces no sé si
también deberíamos
intentar hacer el
pero claro
el virus cortado
es porque la imagen
es así
y no tiene mucha historia
una cosa que puedo mirar
es a ver
si la imagen
la puedo modificar
para mover al virus
un poquito
y que no queden cortados
que yo creo que puede quedar bien
porque podríamos meter
los gradientes
también a la izquierda
yo creo que aquí
en linear gradient
yo creo que si no me equivoco
con una
algo así
to left
a ver
vamos a probar
yo creo que se pueden poner
no
no es con coma
es sin coma
no sé si es con coma
o sin coma
o si no se puede
igual no se puede
pero yo creo que sí se puede
a ver
mask image
to
to
gradients
yo diría que sí que se puede
create a rectangle
masking image
o si no
claro
lo que se podría hacer
es crear un rectángulo
o crearlo con la radial
eso también lo podríamos hacer
también lo podríamos hacer
es que lo bueno del mask image
es que además
se puede utilizar una imagen
ves
se puede hacer algo así
se puede utilizar una imagen
para hacer la máscara
lo cual hace que
sea mucho más
más potente
la posibilidad
es porque al final
tienes una imagen
le creas la máscara con ella
y así no hace falta
que tú crees el gradiente
ni nada
sino que simplemente
con la forma de la imagen
ya lo tendrías
pero es raro
yo pensaba que sí que se podría
aplicar más de un gradiente
pero veo que no
a ver línea gradient
ah pues
coma
no claro
aquí no se podría
porque este es el mismo
pensaba que se podría
más de uno
que se podían
separar por comas
y que los aplicarían y tal
si no a las malas
se podría hacer
que sea circular
eso lo podríamos hacer
a ver
generate
o playground
gradient
css
línea gradient
playground
no
línea gradient
no
queremos este
tampoco
ah sí
bueno este tiene buena pinta
a ver
si este tiene mejor pinta
podría ser radial
esto lo podríamos poner
aquí en medio
pero que esto sea
de color
negro
a los extremos
tendría que ser
transparente
tendría que ser algo así
claro
el problema es que
desde el
circle
tendríamos que ver esto
más grande como queda
pues claro
esto
o que fuese más
como
creo que también existe
la elipse
creo que también existe
la elipse
y también lo podríamos
hacer así
lo podríamos hacer así
pues claro
es que así
queda un poco
raro ¿no?
habría que ver
con una elipse
si se puede hacer horizontal
bueno por ahora lo voy a dejar
pero el tema del vídeo
de fondo
aunque sea con la opacidad baja
¿qué os parece?
¿qué os parece?
abajo estaría guay
poner el vídeo difuminado
y recortarlo con clip pass
bueno con clip pass
yo creo que más que image
ya quedaría bien
si no
una de fondo
una serie de fondo
se ve bien
pero habría que sacar
la imagen de operadores
o dejar
a los virus
dejar lo de virus
echalado
esa sería otra opción
o sea
creéis
esa es una buena opción
por encima del virus
echalado
hostia
esa es una buena opción
esa es una buena opción
lo podría
lo podría arreglar
lo que pasa es que
tendría que editar la imagen
o sea
creéis que
si sacamos esto
y lo ponemos en el centro
o sea
centrar esto
os referís
a las fotos
o os referís
a esto de aquí
porque yo creo
que quitaría
a los luchadores
yo quitaría
a los luchadores
y pondría
esto de aquí
que esto queda
bastante chulo
el texto
dejaríamos el texto
vale
lo voy a hacer
lo voy a hacer
lo que pasa es que
tengo que editar la imagen
y tal
es un poco rollo
entonces podríamos
editar
dejar eso ahí
en el medio
y ponerla
en el vídeo
me parece
se pierden las transiciones
bueno
no pasa nada
de hecho
podríamos hacer
alguna cosa
porque una vez
que esta imagen
la tenga separada
lo voy a hacer
lo voy a hacer
voy a hacer
voy a hacer algo aquí
voy a hacer algo
si si si
ya está
ya sé lo que voy a hacer
dejas el texto
en la parte de abajo
centrado y quitas
a los luchadores
si si
pues lo vamos a hacer así
recuperar esto
aparte
lo voy a centrar
para que salga ahí
con lo del vídeo
y los luchadores
los vamos a sacar
y lo que podemos hacer
es que a lo mejor
los luchadores
aparezcan
cuando se hace scroll
que aparezca
y se se
bueno
ya lo tengo
lo tengo clarísimo
lo tengo clarísimo
y el tema
de cómo quedará
en móvil
en móvil
no habrá ningún problema
porque ves que aparece ahí
de fondo y tal
es que aparece como de fondo
el vídeo
entonces
obviamente
nos falta más información
que aparecerá abajo
eso no
no aparece tan rápido
el footer
y ya está
y ya está
si a ver
las imágenes
yo no puedo hacer nada
las fotos son las que son
y ya está
son las que hay
pero creo que alguna cosa
podremos
podremos
podremos mejorar en esto
pero me parece muy chulo
esto de la idea que comentáis
de que esto lo dejemos en medio
eso me parece
me parece bien
lo malo es eso
que voy a tener que sacarlo
y ya está
el vídeo se reproduce solo
claro claro
se reproduce solo totalmente
y lo que vamos a poder hacer
en este caso
es que aquí
vamos a poder tener
las dos imágenes
que de hecho
creo que tiene sentido
porque si os fijáis
todos tienen
todos más o menos
tienen esto
en el mismo sitio
entonces
yo creo que vamos a poder
generar todos
vamos a poder generar
vamos a separar las imágenes
tanto esta parte
y además me voy a asegurar
que no se corten
eso lo primero
y por otro lado
voy a sacar esto
lo voy a hacer
lo que pasa es que
es un
es un trabajón
es un trabajón
pero bueno
vale
lo voy a hacer así
os voy a hacer caso
pero mientras
vamos a
esto lo voy a arreglar
por ahora
lo voy a arreglar
y vamos a añadir
las imágenes
de los combates
add
matches
images
vale
header
vamos a
enable
matches
page
por ahora
esto
los combates
add
new
id
for combats
que en algún sitio
lo llamamos matches
en otros combates
en otros combats
tenemos ahí una mezcla
use new id
vale
vale
vale
vale
pues vamos a hacer
vamos a hacer eso
vamos a hacer eso
y mañana
haremos la autentificación
mañana hacemos la autentificación
a tope
este radial te sirve
vale
radial gradient
para el mask image
gracias
brisen
muchas gracias amigo
donde lo hemos dejado
aquí
lo vamos a poner aquí
vamos a poner acá
mask image
lo ponemos aquí
a ver como queda
que a ver
igualmente
vamos a cambiar la imagen
ves
pero es que
si que lo hace
pero no lo hace
lo suficiente
tendría que ser
bastante más
o sea
tendría que ir
no se si
esto
a lo mejor
tendría que estar
en 90%
esto
a lo mejor
tendría que estar
en 80%
tendría que ser
algo más así
y aun así
la eclipse
es que
no hay eclipse
yo pensaba que habría eclipse
pero no
a lo mejor
me lo he imaginado
pero ves
aquí queda cortado
entonces
o sea
no hace del todo
bien la redonda
porque la redonda
la hace
habría que utilizar
una máscara de imagen
y ya está
no pasa nada
si que hay eclipse
hostia pues es que
yo pensaba que era eclipse
pero no
o elipsis
elipsis
puede ser elipsis
no
no sé
no acuerdo como es
no pasa nada
lo vamos a
como lo vamos a hacer
con el otro estilo
lo vamos a cortar
o sea
vamos a evitar
que pase esto
para que justamente
los dos aparezcan
enteros
y voy a sacar la imagen
esta parte
y ya está
no hay ningún problema
ya está
no hay problema
add
detail combat
vale
y aquí
tipografía
todos los combates
vale
list
all combats
images
aquí
adaptamos
adapt
new ids
and use numbers
instead
strings
vale
el forecast
esto
remove
not needed
prop
for now
vale
y el select
your boxer
boxer
boxer
perdón
bowser
anda que bowser
estoy pensando en super mario
vamos a poner aquí
show all opponents
when selecting player
vale
vale
vale
vamos a sincronizar los cambios
por ahora
tu tu tu tu tu tu tu
pushamos
la verdad es que no me desagrada
lo del fondo
pero es verdad
lo que decís de esto
que esto se ve como demasiado molesto
entonces yo creo que esto va a quedar ahí
muy bien si lo ponemos ahí en el centro
y abajo ponemos los detalles de los boxeadores
yo creo que está bien
mi dulé por amor a cristo es elipse
vale vale
pero bueno que da igual
vale es elipse
no no acordaba
elipse a top o elipse a button
vale vale
a ver
vamos a probarlo
a ver
nos cabréis
nos cabréis
elipse
sabía que era de alguna forma
ves
pero esto ahora queda demasiado
demasiado fuerte
demasiado fuerte
80%
o sea demasiado flojo
de hecho
add center
entiendo que esto debería ser
add center
y no sé si aquí
habría que poner 80%
pero es que
tampoco
que es que vamos a cambiar la imagen
que no os preocupéis
por el gradiente
porque vamos a hacer la imagen
de la otra forma
que creo que va a quedar mucho mejor
y que tiene mucho más sentido
lo vamos a sacar
vamos a sacar
las dos imágenes
y ya está
se puede hacer el view transition
aunque las imágenes sean distintas
la del menú con luchadores
se puede hacer
se puede hacer
pero queda raro
queda muy muy muy raro
queda muy raro
así que
yo no lo recomendaría
queda muy extraño
poner los luchadores a los lados
y el texto en el medio
podría ser una opción
los luchadores al lado
podría ser otra opción
pero claro
tengo que mirar
primero que pueda sacar bien
la imagen esta
lo tengo que mirar
lo tengo que mirar
pero bueno
lo veremos
ojo
162.000
muy bien
a ver
vamos a mirar en un momento esto
mañana hacemos la autentificación
y ya con las imágenes
os enseñaré
como he hecho el tema de las imágenes
vale
ojo
convert colors to hsl
and fix vg color
hostia
en el diseño el color
es más oscuro
pero no verdoso
como estaba ahora
también he convertido los colores
hostia
captura de pantalla
hostia
lo que pasa es que el verdecillo
me gustaba
yo sé que no estaba bien el color
pero como que me gustaba
el verdecillo
no sé
a ver
si queréis
lo adaptamos al
al color
del diseño
como lo veis
os gusta en verde
o como el diseño
vas a dejar este rex
hay un montón
solo deja el verde
hay un detalle
con poner el vídeo de fondo
y es que se ven los nombres
de boxeader en un momento
con otra tipografía
eso lo podemos recortar
no pasa nada
no me gustaba el verde
la verdad
verde
el diseño
como el diseño
me gusta el verde
bueno aquí cada uno
cada uno de una forma
a ver
os lo enseño uno al lado del otro
lavelada.es
este era el verde
y este es el de ahora
el verde
y el de ahora
que de hecho veo
que le ha quitado también
como el efecto ruido
entiendo que le ha quitado
el efecto ruido
y efecto ruido
sí que tiene el diseño
no le ha quitado
el efecto ruido
pero no se ve
pero sí que ahí
tiene efecto ruido
y aquí no sé por qué
como que ha desaparecido
el efecto ruido
súper raro
y aquí sí que lo tiene
efecto ruido
no sé si es porque
no se nota
verde nomás
el de ahora
el de ahora
está mejor parece
se siente mejor
el de ahora
bueno por ahora
voy a dejar el de ahora
lo comentaré con David
lo que me diga David
que para eso es el diseñador
a ver que me dice
update Plex
detalle
vale me habéis añadido
aquí algunas cositas más
perfecto
vale
agregué el vídeo de Plex
entrenando
hostia
estaba con el chico este
con el hombre este
no tenía ni idea
que había entrenado
con el tío este
Aldo Geo
vale
las redes de Aldo Geo
a ver que
no tenga ningún
vale
agregado country name
a todos los luchadores
para que se muestre bien
atributo alt
en las banderas
perfecto
hostia
y esto
que porque ha tocado boxes
ah porque
claro pero el country name
esta información
realmente la puedes sacar
sin necesidad
de ponerla
en los boxeadores
¿no?
porque si ya tienes el country
debería ser capaz
de sacar el country name
también
o sea ya tenemos
un objeto countries
por ahí
entonces no necesita
ya hacer esto
vale
Cesar Blue
y Roberto Zain
a ver que no hay ningún problema
para mergear
y la mergeo
y ya
lo dejamos para mañana
darle más cañita
¿vale?
le está entrando en el arte
aguantar cornadas
vale
la velada
y
vamos a traernos
todos los cambios
que habéis hecho
que no hay ningún tipo
de problema
piu piu piu
vale
versus
y por ejemplo
habéis puesto el de Plex
entrenamiento
preparación para el combate
5 meses para ser boxeador
la verdad que está
hostia digo
joder como ha cambiado Plex
y es que no es él
es otro
es otro
vale vale
es alto
tú estás fuerte
vale vale
pues perfecto
muy bien
ahí podemos ir añadiendo
y está
está genial
le estoy probando
pero las imágenes
tienen un comportamiento raro
es decir
el momento que se coloca el mouse
pero demoran a aparecer la imagen correcta
aquí
puede ser porque
si te tarda mucho
no sé si te refieres aquí
que te tarda en aparecer la imagen
puede ser que tarde mucho
en cargar la imagen
si tienes una mala conexión
no sé si lo que podríamos hacer
es que desaparezca
la anterior a antes y tal
pero podría ser
podría
lo podríamos mirar
la web se rompe en el responsable
de un ZFall
bueno
eso lo mejor que puedes hacer
es una ISU
porque al final
ahora mismo me dices eso
y me voy a quedar más o menos igual
no sé exactamente
cómo es el ZFall
ni nada
en las ISU
las puedes crear
con una captura de pantalla
y creo que estaría bastante bien
este proyecto es algo
que te ordena a Ibai
o solo es contenido personal
esta es la web oficial
de la velada
lo pueden mirar
porque puedes entrar
a lavelada.es
es una cosa que hemos conseguido
gracias a la gente de Infojobs
la gente de Infojobs
nos ayudó
tanto para conseguir talento
que nos ayudase
tenemos a Alejandra
y a Joel
que nos están ayudando
y han hecho un montón de cosas
y es la web oficial
de la velada
y la vamos a estar haciendo
entonces