Muy buenas tardes, ¿qué tal? Bienvenido, bienvenida, gracias por estar aquí, espero que estés preparado, preparada, porque hoy empezamos a mover las manitas con la web de La Velada 4, ya sabes, el eventazo del año de boxeo entre creadores de contenido que serán ahí una de más caos, una de más caos, creadores de contenido de YouTube y de Twitch, un evento organizado por el bueno de Ibai Llanos, que siempre lo revienta, siempre lo revienta, que a mí personalmente me encanta.
Y mirad, ojo, ojo, ojo, spoiler, gracias a mi amigo y compañero David, que siempre me ayuda con los diseños, porque ya sabéis que yo no tengo, o sea, el diseño hago lo que puedo, hago lo que puedo, él es mucho mejor que yo diseñando, y me ha preparado un Figma donde vamos a poder estar basándonos para hacer esta primera landing.
Lo bueno que vamos a poder hacer es que vamos a hacer el contador desde cero y lo vamos a hacer con JavaScript, no vamos a utilizar ninguna biblioteca, no vamos a utilizar ni React, ni Vue, ni nada de eso, porque me gustaría intentar que vaya lo mejor posible y además lo podremos reutilizar, porque el contador del tiempo atrás lo utilizamos un montón de veces.
Así que este contador lo vamos a hacer con JavaScript puro y duro, ¿vale? Para que no se lo pierdan. Creo que no tiene redes, David. David, si estás ahí en el chat, cuéntame si tienes redes y las compartimos, ¿vale?
Bueno, pues eso, el contador este lo vamos a hacer con JavaScript puro y duro, porque creo que tiene sentido. También os quiero comentar un poquito, tengo aquí como dos colores, ¿vale?
Tengo como dos colores, ya veis que tenemos como en la sanguinaria esta, presentación así en rojo, y tenemos esta que es más estilo como la oficial.
Vamos a utilizar seguramente la oficial, ¿vale? La oficial.
¿Os puede gustar más la rojita? A lo mejor la rojita la haremos más adelante, la utilizaremos para el diseño más final, pero ahora mismo, como todo lo que ha aparecido de la velada, en las redes, todo lo que sería lo que se ha ido publicando, es más con estos colorcillos, ¿vale?
Entonces, vamos a aprovechar y vamos a utilizar más este colorcillo para que vaya siguiendo el mismo estilo que está compartiendo en redes sociales la organización de la velada y todo esto, ¿vale?
Así que vamos a intentar utilizar los colores oficiales. Ya le daremos una vuelta, no os preocupéis, esta no es la página definitiva, esta es la landing page que vamos a estar desarrollando para anunciar primero lo del 4 de marzo, que a las 7 de la tarde hora peninsular española, vamos a tener este evento aquí en Barcelona, en el Teatro Victoria, donde van a anunciar la fecha oficial, los boxeadores, el lugar donde se va a hacer.
Así que vamos a ponerle ya una página para básicamente quitar esta que tenemos a día de hoy, ahora mismo tenemos esta que es la de la velada 3, quitaremos esta, ¿vale?
Que ahora mismo ya no tiene tanto sentido y pondremos la nueva landing para que la gente que vaya entrando justamente aquí a la velada, pues al menos vaya diciendo, ostras, pues se vienen cositas, se vienen cositas, ¿vale?
Para que tengamos ya una primera landing y a partir de ahí, cuando tengamos más información, tengamos los boxeadores y tal, los iremos añadiendo, ¿vale?
¿Cuándo dicen los combates? Los combates los dicen, amigos, el próximo 4 de marzo. El 4 de marzo a las 7 de la tarde se presentan en directo, justamente en la página de Ibai, se presentan los combates.
Así que tenéis que tener. Tenemos primicias, no podemos hablar de primicias. La única primicia que tengo para todos ustedes es que todavía estamos buscando, gracias a Infojobs,
a dos programadores que nos ayuden a programar la web de la velada. Hoy vamos a hacer la landing page, pero todavía tenemos que programar la página donde vamos a mostrar
todos los boxeadores, con datos de los boxeadores, los pronósticos de los boxeadores. Bueno, un montón de cosas, ¿vale?
Tenéis la oferta que la está poniendo ahí TemeChain, tenéis la oferta donde podéis ir y aplicar a la oferta, os inscribís y si tenéis suerte, pues son 1200 euros netos,
lo pone aquí el salario, ¿vale? 1200 euros netos por dos semanas de trabajo, dos semanas de trabajo parcial, ¿ok? No es ni un mes entero, ni son 40 horas a la semana, ni nada.
Lo digo más que nada para que lo sepáis, que aquí tenéis toda la información, que os leáis un poquito la descripción, que mucha gente se queda aquí con esto, que dice
me parece fatal que no ponga el salario, que te leas la oferta, que te leas la oferta que lo pone aquí, que lo pone aquí, lo pone aquí, lo pone aquí.
Lo que pasa es que aquí antes ponía el salario y la gente pensaba que sea el salario mensual y no lo es.
Es solo para España, se puede apuntar todo el mundo, todo el mundo se puede apuntar y es una oferta para juniors porque no necesitas experiencia previa, ¿vale?
Lo que sí que se necesita, no se necesita experiencia previa en un trabajo, pero necesitamos que sepáis HTML, CSS, JavaScript, Git, GitHub, ¿vale?
Si sabéis de React, de Astro, de Next.js o tal, pues se agradece también, pero no es obligatorio que sepáis de todos los frameworks del mundo.
Aunque sepáis de uno, seguro que vais a poder colaborar perfectamente.
El proyecto lo hacemos de código abierto, ¿vale?
Eso significa que, aunque no os contraten, vais a poder colaborar sin ningún tipo de problema.
De hecho, lo vamos a hacer ahora mismo.
Ahora mismo vamos a hacer ya el repositorio para que lo tengamos.
Ya teníamos uno, ya teníamos uno de la velada, ¿ves?
La velada landing del año pasado.
Bueno, total, tampoco había tanta gente.
Esta es la página que hicimos el año pasado de la velada 3, que no es la oficial.
Este año sí que vamos a hacer la oficial.
Esta es la que hicimos el año pasado, que la verdad es que quedó bastante bonita.
Era bastante sencillita, pero bueno, yo creo que llamó bastante la atención porque al final, mira, nos han pillado.
Nos han pillado para hacer la web oficial.
Así que bueno, esta fue como la que hicimos.
Vale, pues voy a hacer un nuevo repositorio que le voy a llamar la velada directamente.
La velada web, ¿ok?
Web oficial de la velada 4 de Ibai Llanos.
Por aquí creamos el repositorio.
Y por ahora, como no tengo URL, lo que voy a hacer...
Vale, vamos a inicializar aquí este proyectito.
¿Qué es lo que voy a utilizar?
Mucha gente me pregunta, ponle oficial en lugar de web.
Vale, venga, va.
Venga, ponemos ahí oficial.
La velada web oficial.
Venga, ahí está.
No me digáis que no está chulo el hecho de que podamos hacer que sea de código abierto.
O sea, le quiero dar las gracias primero a todo el equipo de la velada por creer en este proyecto
y también a la gente de Infojobs porque nos han ayudado un montón
y además están contratando a dos personas para que nos ayuden con la web.
Así que muchas gracias a los dos por creer en nosotros y por hacerlo.
Me parece muy bonito que podamos hacer la web en directo en Twitch
y que ahí se cierra un poquito el círculo, ¿vale?
Pues, vale.
¿Qué vamos a utilizar?
Vamos a hablar un poco del stack.
Lo siento mucho, lo siento porque a lo mejor hay mucha gente que está decepcionada.
No lo sé.
Pero ya os podéis imaginar que vamos a utilizar como stack.
Vamos a utilizar, porque para eso me pagan.
No, es mentira, no me pagan, pero lo vamos a utilizar.
Vamos a utilizar Astro.
Vamos a utilizar Astro porque para mí tiene todo el sentido del mundo.
Vamos a querer que tengamos el mínimo JavaScript que llegue al cliente,
que tenga el mejor rendimiento posible
y que además esté lo más cerca de la plataforma.
Sin necesidad de utilizar frameworks.
Ya veremos si más adelante seguramente vamos a utilizar algún framework.
Seguro que utilizamos alguna parte que sean con frameworks.
Pero ahora mismo a mí me parece que Astro es la mejor opción.
Si no, dime una opción mejor.
Dime una opción mejor.
No lo hay, sinceramente, para esta página.
Para esta página, ¿eh?
Yo creo que tiene todo el sentido del mundo.
PHP, pero es que PHP por sí solo no se puede utilizar
porque al final tendrías que utilizar PHP con un montón de cosas más.
Tendrías que utilizar HTML, CSS, no sé qué, no sé cuánto sea.
Que no, que no tiene sentido.
Amigos, Astro.
Vamos a utilizar Astro.
Ya sabéis, para el que no sepa que es Astro,
que no sé dónde te has metido,
pero Astro es lo mejor que le ha pasado al mundo del desarrollo web.
¡Hostia!
¿Qué ha pasado?
Se me ha roto ahí el NPM.
¿Qué ha pasado?
¡Hostia!
No sé.
A ver, con PNPM.
¡Ostras!
Pues es NPM, que no me funciona.
Puede ser que sea NPM que no funciona.
¡Qué fuerte, ¿no?
Bueno, empezamos regular con NPM.
¡Ay, NPM!
Que ha escuchado que lo van a quitar de Node y ya se está poniendo nervioso.
Vale, pues venga, vamos con la...
¿Por qué Laravel no?
¿Por qué Laravel no?
Pero si eso es un framework y al final tendrías que mezclar un montón de cosas.
Y Laravel sobre todo...
Ay, tenéis unas cosas de verdad.
Entiendo que es porque sabéis de Laravel y seguramente diréis,
ah, pues yo lo haría con Laravel porque es lo que sabes.
Y está bien.
O sea, pero yo hacer una web con Laravel me parecería como muy raro.
Sería como si alguien me dijese, haz la web con Express.
Es muy extraño, sinceramente, hablar de eso, ¿no?
O con Spring Boot o cosas así.
Es muy extraño.
Yo, en mi opinión, ¿eh?
Que lo digo con todo mi cariño.
Pero hacer una landing page con Laravel, no sé, me parece innecesario, sinceramente.
Con Blazor también, sí, con WebAssembly y todo esto.
Es que, no sé, creo que hay veces que tiene sentido si va a tener un backend
o si realmente la gente solo sabe de PHP, pues claro, al final, pues que quieras utilizar Laravel.
Pero hacer una landing, al final, si lo más cercano de HTML y CSS y JavaScript
lo vamos a tener aquí, ¿no?
Con NextGIS no porque al final está muy atado a React y además el problema que tendríamos
es que lanzaría, enviaría JavaScript por defecto.
Y eso lo hemos explicado que para tema de rendimiento yo creo que es mejor opción Astro, justamente.
¿Vale?
Muy bien.
Pues nada, ya han instalado las dependencias, ya ha inicializado Git, la velada 4, web oficial.
Abrimos aquí Code, ¿vale?
¿Y qué quería hacer?
Ah, sí, quería hacer lo de Git, ¿vale?
Para que lo tengáis aquí bien.
Vamos a añadir esto.
Lo que voy a hacer es enviar el código, el principio del código, básicamente para que
tengamos algo.
Init repo.
Y pusheamos esto al repositorio.
Y aquí es donde vamos a tener todo el código, ¿vale?
Todo el código disponible.
Por ahora no tenemos Rhythm y tal.
Se aceptan contribuciones, que lo sepáis.
Y os voy a dejar la oferta de Infojobs.
Os la voy a dejar por aquí mientras, ¿vale?
Para que lo tengáis.
Por aquí vamos a poner la velada, velada del año, ¿vale?
La velada 4.
Hola, Midu.
Hola.
Buenas tardes.
Buenas tardes.
¿Cómo es que aceptaron que fuera de código abierto?
¿Por qué la aceptaron?
Bueno, porque al final es bonito la idea que participe la comunidad.
Y eso lo entendieron bastante bien.
La velada es más para aplicaciones web.
Viva PHP, MiduFu.
Viva.
Viva PHP.
Se está bien, pero es para aplicaciones.
Tú lo has dicho.
Si es que tú lo has dicho.
Vale, pues os dejo por ahora eso.
Venga, vamos por Faena.
Tienes...
Mira, qué bueno esto.
Tienes extensiones en desuso.
Le recomendamos que las revise y migre alternativas.
Ojo.
Ojo mi test.
Yo venía a ver Home Live Flash.
Cara triste.
Ah, mira.
Migrar.
Hostia, es la primera vez que veo algo así.
Es la primera vez que veo un aviso de...
Tienes una extensión deprecada.
No la había visto en mi vida.
Qué bueno, ¿no?
O sea, primera noticia.
Primera vez que me sale un anuncio así.
Vale.
Pues ya tendríamos esto.
Vámonos por aquí.
Y vamos a poner PNP Man Rep.
Vale.
Inicializamos el entorno de desarrollo.
Esto es lo que nos sale por defecto.
Todo esto lo vamos a eliminar.
Así que vamos a mirar un poquito el proyectito.
Lo típico.
Aquí en Index todo esto nos sobra.
Así que esto lo quitamos.
Todo esto del Main lo quitamos.
Todos los estilos estos los quitamos.
Y aquí por ahora vamos a poner algo sencillo.
Luego lo cambiamos.
La velada 4.
¿Vale?
Luego vamos a ver más cositas.
Esto ahora está vacío.
Perfecto.
¿Qué otras cosas?
En componentes.
El componente Car lo eliminamos.
Que es el que viene por defecto y no utilizamos.
Y aquí en el Layout vamos a ponerlo.
Aquí.
Que está en español el contenido.
El Generator lo vamos a quitar.
Porque no lo uso.
O sea.
Me da igual que la gente sepa que lo hemos hecho con Astro.
Y esta descripción.
Vamos a ponerle un todo.
Vamos a quitar estos estilos que vienen por defecto.
Que tampoco los vamos a utilizar.
¿Vale?
Y estos de aquí.
También los vamos a quitar.
Porque tampoco nos interesa.
Esto tampoco.
Por ahora lo dejamos así.
Y ya tendríamos.
Aquí es donde vamos a empezar.
Aquí en este index.
Que sería la página principal.
Es donde vamos a empezar a programar.
¿Vale?
La velada 4.
Es un evento de arte y música.
Que se llevara a cabo en el Centro Cultural La Velada.
En la ciudad de Puebla.
México.
No exactamente.
Guijaco Pilot.
Creo que estás un poco perdido.
La velada 4.
Es un evento de boxeo.
Que se llevará a cabo.
En...
Broma.
No lo sé.
No lo sé.
No lo sé.
No lo sé.
Vale.
Ya tenemos ahí.
Pero se ve todavía mal.
Pues vamos a añadir.
Por supuesto.
Vamos a tener que hacer los estilos.
En este caso.
Vamos a utilizar los estilos.
Porque vamos a querer hacerlo.
Lo más rápido posible.
Vamos a utilizar Tailwind.
Yo lo siento si lo odiáis.
Pero es que para mí.
Para hacer cosas lo más rápido posible.
Y poder terminar landings en dos horas.
Tenemos que hacerlo así.
Si no.
Ya la última vez hicimos CSS plano.
Y que me gustó bastante.
Pero no me da la vida.
No me da la vida.
Ayer hicimos CSS plano también.
Yo creo que tiene sentido que utilicemos Tailwind.
Por dos motivos.
Uno.
Porque Tailwind me va a acelerar.
A que me dé tiempo a terminar la landing que vamos a hacer.
Que es esta que tenemos en el Figma.
Y lo segundo.
Porque vamos a poder utilizar una maravillosa extensión.
Que creamos aquí juntos.
¿Vale?
Que es la de Midudev Tailwind Animations.
A ver si la encuentro por aquí.
Esta.
Esta que hicimos juntos.
Y que te permite añadirle animaciones.
Un montón de animaciones.
Por la vamos a utilizar.
Que para algo la hicimos.
¿Vale?
Para algo la hicimos.
Pues fijaos.
Para algo la hicimos.
Con todas estas animaciones.
Alguna pondremos.
Así que es importante que utilicemos justo lo que hemos creado.
Así que ahora que hemos configurado Tailwind.
Esta sería la configuración de Tailwind.
Lo siguiente que vamos a hacer.
Es instalar la extensión que hicimos juntos.
¿Vale?
La de las animaciones.
¡Ay no!
Que la he liado.
La he liado.
Que he dejado el RPM aquí.
Así.
Así sí.
Y vas a ver que es súper increíblemente fácil ponerlo en las animaciones.
Porque es instalarla.
Importamos la dependencia.
En la configuración de Tailwind.
Nos vamos aquí.
Importamos la dependencia.
¿Vale?
Y aquí en plugins.
Animations.
Y con esto ya podemos utilizar.
Tanto Tailwind.
Porque hemos añadido toda la configuración.
Y las animaciones.
¿Vale?
Así que ahora ya aquí.
Si esto por ejemplo.
Le pongo un text white.
Y le digo que.
Animated.
Flay.
Blah.
Blah.
¿Vale?
Ahora sí.
Bueno.
Ya veis que ha funcionado.
¿Eh?
Con animaciones.
Perfecto.
Muy bien.
Pues venga.
Vamos a ir cerrando cositas.
Vamos a ir cerrando por aquí cositas.
Y vamos a ver.
Esto no lo necesitamos.
Por ahora ya tenemos esto.
Es increíble muchas veces como uno ve toda esta parte vacía de la página web.
Y no te lo vas a creer cuando dentro de dos horas veas todo esto hecho.
Va a ser como increíble.
Va a ser como magia.
Es tremendo.
Va a ser tremendo.
Dice.
Increíble que cuando salió Tailwind.
Mido decía que no le convencía tanto.
Y ahora lo usa como el agua.
Pues que Timedep.
Te voy a explicar una cosa.
Tienes toda la razón.
Tienes toda la razón.
Pero es que pasa una cosa.
Hay una.
Esa.
Hay algo muy importante en el mundo de la programación y el desarrollo.
Y yo soy el primero que lo hace.
Y es el hecho de que nunca te tiene que dar miedo cambiar de opinión.
Porque cambiar de opinión es aprendizaje.
Y no se me caen los anillos para nada.
Decir que es verdad que opiné eso de Tailwind.
Aunque siempre tuve la mente abierta para que me gustase.
Sigo pensando obviamente que tiene su coste de oportunidad.
En el sentido de que a la hora de mantenerlo el HTML que te está creando.
Pues puede ser un poco jodido.
Pero creo que para hacer cosas lo más rápido posible.
Landings y tal.
Es que me parece que mejora un montón la experiencia de desarrollo.
O sea.
No tengo ningún tipo de problema en admitirlo.
Y he cambiado de opinión muchas veces en mi vida.
Así que.
Muy bien.
Pues esta va a ser la página.
¿Vale?
Yo vamos a intentar cambiar alguna cosita.
Ya os digo.
Ya os voy diciendo.
Esta va a ser la primera landing que vamos a hacer.
Más adelante haremos la página otra vez.
Haremos más páginas.
Y aquí.
Ya lo primero que tenemos aquí.
Voy a extraer algunos SVGs.
Por ejemplo este de la velada del año.
Voy a extraerlo.
Para eso nos vamos a ir.
No sé si lo veis.
Pero voy a poner por aquí.
¿Vale?
Voy a extraer cositas.
Por ejemplo aquí.
Vamos a exportar con SVG.
¿Vale?
Exportamos esto de la velada.
Le voy a llamar Hero Logo.
¿Vale?
Y también voy a exportar este logo.
Que este logo.
Lo voy a utilizar como SVG.
De hecho.
Podría ser lo primero que haga.
Así que.
Fabicon.
¿Vale?
Voy a irme a SVG.
Oh my god.
O img.
Esto es una página.
Que lo que te permite es optimizar los SVG.
Tú lo pegas.
Y aquí te dice básicamente.
Cuánto lo está optimizando.
Así lo ha optimizado.
Pues un 13%.
Lo cual está bastante bien.
Se ve exactamente igual.
Pero tiene un poquito de diferencia.
Para que lo veáis.
Mira.
Si nos vamos.
Aquí en Public.
Mira.
El Fabicon.
Que es este.
Voy a poner este.
Para que veáis la diferencia.
Entre el que es optimizado.
Y no optimizado.
¿Vale?
Aquí la tendríais un poco.
Este sería el que no está optimizado.
Y este sería el optimizado.
Que le ha quitado algunas cosas.
Ha optimizado algunos.
Algunos paths.
Para que sean un poquito más cortos.
Bueno.
Y ahí.
Pues aunque sea poco.
Pues algo salgo.
Algo salgo.
¿Vale?
Muy bien.
A ver.
Voy a quitar esto.
Y aquí.
Voy a hacer una cosa con el Fabicon.
Con esto.
Voy a quitar esto.
Esto por aquí.
Vale.
Ya he puesto como SVG el Fabicon.
O sea.
Que si vamos a nuestra página aquí.
Vale.
Fíjate que debería aparecer ahí.
Pero no aparece.
Bueno.
Sí que aparece.
Pero casi no se ve.
Eso es porque no se ve en efecto.
O sea.
En modo oscuro.
Entonces le podríamos cambiar el color.
Y ahora.
Ya sí que aparece.
Pero como también queremos que se vea en el modo claro.
Porque si en el modo claro.
Entonces se vea blanco.
Vamos a hacer este truco.
Que es ponerle un pequeño CSS.
Con una media query.
Y le vamos a decir.
Oye.
Vamos a hacer que por defecto sea de color oscuro.
Pero si el color del sistema es oscuro.
Entonces lo dibujamos blanco.
Y con este truquillo.
Ya vamos a ver que esto.
Se va a cambiar el color perfectamente.
Vale.
Esto lo hicimos el otro día.
Y es un trucazo la verdad.
Para que te ayude.
Te ayude a tener los Fabicons en los dos colores.
Y así ya lo tenemos.
Lo tenemos perfectamente el Fabicon.
Vale.
Así que ya tendríamos esta parte.
De lo primero.
Ya tenemos los dos SVGs.
Vale.
Lo primero sería también cambiar el layout.
El color y todo esto.
Porque ahora mismo el color no tiene ningún tipo de sentido.
Vale.
Vamos a ver.
El color.
El color que vamos a poner aquí.
Vamos a poner el background.
Ya lo tenemos por aquí.
Por ahora le vamos a poner algo así.
Y la fuente.
Vale.
Este sería más o menos el color.
Luego le ponemos ese efecto raro que tiene de fondo.
Y luego tendríamos la fuente.
Fijaos que la fuente es un poquito especial.
Esta fuente se llama Just.
Así que vamos a instalar la fuente.
Para que todo se vaya viendo mejor.
Vamos a font-scurrel.
Nunca me acuerdo cómo se escribe.
Font-scurrel.
No.
Font-scurrel no.
¿Cómo es esta?
Joder.
Font-source.
Eso.
Font-source.
Font-source.
Si necesitáis alguna vez instalar una fuente.
No vayáis a Google Fonts.
Que está bien.
¿Vale?
Pero es que lo más cómodo muchas veces es utilizar font-source.
¿Por qué?
Lo instalas como si fuese un paquete.
¿Ves?
Aquí lo instalamos como si fuese un paquete.
Una dependencia.
Lo ponemos aquí.
Ya lo tenemos como una dependencia.
Y ahora lo único que tenemos que hacer es simplemente importar la dependencia.
¿Ves?
Con un fichero.
Nos vamos aquí al nivel de layout.
Porque esto aplica a toda la página.
Entonces lo importamos aquí.
Y ahora simplemente aquí lo que tendríamos que hacer es decirle que queremos utilizarla de just.
Que es el nombre de la...
Ah, just-variable.
Perdón.
Just-variable.
Ah, es variable.
Hostia, está chulo eso, ¿eh?
Variable está chulo porque así vamos a tener todas las negritas.
O sea, todos los diferentes grosores súper fácil.
En una sola fuente.
¿Veis?
Todo esto que veis aquí lo vamos a tener en una sola fuente.
Suelen ocupar un pelín más, un poquito más.
Pero ¿ves?
Son...
Es una fuente variable.
Que tú puedes hacer que tenga el grosor que te dé la gana.
Esto está bastante chulo.
Me encanta porque así solo lo cargaremos una fuente.
Y ya nos olvidamos y no tenemos que preocuparnos de diferentes fuentes y tal.
¿Vale?
Vale.
Pues ya tenemos la fuente de nuestro querido Figma.
Vale.
Voy a empezar con esta parte de aquí.
Si os parece.
Más que nada para tener algo ahí al principio.
Luego a lo mejor vamos a hacer...
Haremos el footer.
Porque es fácil.
Luego haremos esta parte.
Y terminaremos con el contador.
Porque me parece que esta parte es visual.
Luego el footer.
Pues para que tengamos la parte de abajo.
Y luego el contador lo dejaremos para el final.
Que a lo mejor es lo que tiene un poquito más de JavaScript.
Es un poquito así...
Mido mientras más negra más gruesa.
¿Qué?
Yo no he dicho eso.
Mientras menos he dicho eso.
El VG será una imagen.
A ver.
A mí este VG no me termina mucho de convencer.
No sé si lo llegaremos a utilizar.
Pero haremos un efecto ruido fácil.
Ya veréis.
Haremos un efecto ruido bastante fácil.
Pues venga.
Vamos por partes.
Voy a hacer aquí otra carpeta.
Que le voy a llamar Icons.
Y otra carpeta que le voy a llamar Sections.
¿Vale?
Y voy a pensar...
A mí es una cosa que me ayuda bastante.
El hecho de pensar cómo quiero estructurar un poco la página.
Yo veo esta landing y lo que voy a pensar es...
Primero vamos a hacer esta parte.
Que le vamos a llamar en las secciones.
Le voy a llamar Giro.
¿Vale?
Giro.astro.
Luego las otras secciones que podemos tener.
Por ejemplo el footer.
Eso seguro.
El footer.
El footer.astro.
Vamos a tener la parte esa del countdown.
Podemos llamarle countdown.astro.
¿Vale?
¿Qué más?
Vamos a tener la info.
La información.
Info.astro.
Y la date.astro.
O principal date.astro.
¿Vale?
Principal date será esta parte.
Esta será el principal date.
Esta será la info.
El countdown.
Y el footer.
Y así ya tenemos como todo lo que vamos a tener que crear.
Y lo vamos creando poco a poco.
Y ya en el index.
Pues nos olvidamos.
Para ir tirando.
Importamos todas estas secciones.
¿Vale?
Así que countdown.
¿No?
From punto punto barra.
Sections.
Countdown.astro.
Esto lo duplicamos unas cuantas veces.
Importamos el footer.
Importamos el giro.
Importamos el principal date.
E importamos el info.
¿Vale?
Ya tenemos aquí todos los componentes.
Y así ahora aquí.
Ya lo que podemos hacer es simplemente.
Pues ir utilizándolos.
Aquí tendríamos el giro.
Dentro del main.
Vamos a poner el principal date.
Vamos a poner la info.
El countdown.
Y aquí vamos a poner el footer.
¿Vale?
Y así nos ayuda también un poquito a.
Como a pensarlos.
De forma separada.
¿Vale?
Y no nos liamos tanto de cómo va a quedar cada uno y tal.
¿Vale?
Así lo tenemos mucho más fácil.
Y luego.
Por otra parte.
Para no tener que hacer los punto punto barra y tal.
Hacemos lo mismo de siempre.
Nos vamos a la configuración de TypeScript.
Y lo que hacemos aquí es añadir el build.
Compiler options.
Siempre me confundo.
Entre compiler options y build options.
Bueno.
Es una opción que nos va a permitir crear un alias.
Así que cuando nosotros pongamos arroba barra lo que sea.
Esto en realidad por dentro irá a punto barra source barra lo que sea.
Y así en lugar de utilizar el punto punto.
Vamos a utilizar aquí esto.
Y ya nos olvidaremos de todos los relativos.
Y creo que además se ve mucho mejor.
Es mucho más fácil de pensar.
Yo voy a ordenar de forma ascendente esto.
Y ya tendríamos esto.
Vamos al giro.
Vamos al section.
Aquí.
Hacemos aquí un section.
Lo primero que necesitaríamos para el giro.
Es que claro.
Que ocupe.
Voy a importar primero el logo.
Esta parte del logo.
El tema de la presentación.
Y lo que vamos a hacer.
Es que luego tendremos que ajustar el ancho.
O sea que se tiene que centrar.
Porque si no no va a quedar muy bien.
Vamos a crear en components.
El giro logo punto astro.
Y creo que lo había optimizado.
A ver si.
No sé si lo he guardado.
No lo he guardado.
No lo he guardado.
Vale.
Pues aquí el giro logo.
Este logo de aquí.
Lo vamos a copiar.
No.
Lo vamos a descargar.
Lo voy a descargar por aquí.
Lo descargo por acá.
Y me lo voy a traer por aquí.
Por ejemplo.
¿Vale?
Vale.
Por ahora.
Aunque lo podamos utilizar como un SVG.
Yo lo voy a convertir en un componente.
¿Vale?
Porque puede ser interesante.
Que se le pueda pasar.
Las props.
Entonces vamos a poner.
Punto.
Astro punto props punto class.
Así desde fuera.
Aquí podríamos utilizar el giro logo.
Hay que importarlo.
Para poder utilizarlo.
¿Vale?
Así que importamos aquí.
Import.
Giro logo.
From.
Y aquí.
Pues compones.
Barra.
Giro logo.
Punto astro.
Y aquí lo bueno.
Es que ya le podríamos pasar como class.
Lo que nos dé la gana.
Y lo podríamos personalizar.
Lo que queramos.
Y ya está.
Hostia.
Puesto giro.
Logro.
No.
Logro no.
Logro.
¿Vale?
Entonces tendríamos esto.
Y aquí tendríamos un span.
Que se supone que tiene que poner.
Presentación de la.
Que esto.
Va a ser.
Uppercase.
Voy a poner un text black.
Por ahora.
Aunque no es lo correcto.
Y un VG.
Voy a hacer esto.
Luego.
Luego lo haré bien.
¿Vale?
Luego lo haré bien.
Solo para que veamos un poquito.
Como va quedando.
El tema.
Y si vamos a la página.
Vale.
Pues ya tenemos un poco esto.
Queda bastante grande.
Ahora ya lo ajustaremos después.
Un poquito los tamaños.
Pero esta sería un poco la idea.
Con lo de la presentación de la.
Tiene que estar arriba.
Que lo tenemos ahí arriba.
Aunque hay que ajustarlo.
Y ahora lo centramos.
Lo que vamos a hacer para centrar la página.
Vamos a centrar todo el index.
Porque no tiene mucho sentido.
Si miramos un poco.
Cuánto es lo que se supone que ocupa esto.
A ver.
Si vamos al footer.
1088.
Vale.
Pues vamos.
Vamos a ir.
Voy a cerrar.
Voy a cerrar cosas que no voy a necesitar.
¿Vale?
Me voy al index.
En el index.
Lo que voy a hacer es.
Envolver todo.
Lo podría hacer en el layout.
Lo cierto es que lo podría hacer en el layout.
Lo podría hacer aquí.
¿Sabes?
Podría poner aquí un dip.
Que al final.
Pues todos los slots.
Lo tendría.
Y así.
Si tenemos diferentes páginas.
También iría.
Tiene sentido.
Bueno.
Por ahora vamos a hacer esto.
Lo vamos a hacer aquí en el layout.
Porque esto aplicaría a todas las páginas.
Y así lo tendría mucho más fácil.
Y lo que hacemos aquí es.
Max.
W.
Que es el ancho.
Y le vamos a decir.
6XL.
Vale.
6XL son 1152.
Habíamos dicho.
Que eran 1080.
Lo que tenía en el Figma.
Pero si ponemos.
Que también tenga un padding.
Que lo vamos a necesitar.
De 36.
1156.
Menos.
62.
Pues ya lo tendríamos.
Más o menos.
Más o menos.
¿No?
1152.
Lo podríamos poner un poquito más.
Que sería 40.
1052 menos 80.
Sería 1072.
Bueno.
Ya estaría más o menos.
Así que vamos a hacer esto.
Hacemos que tenga un poquito de espacio por arriba.
Lo centramos.
Y ya.
Vamos a ver cómo va quedando esto.
Vale.
Entonces.
Lo que nos falta ahora es centrarlo de dentro.
¿Vale?
Nos ha centrado esto.
Pero esta parte de aquí dentro.
Lo que sería la sección.
No la tenemos centrada.
Ahora la centramos.
Aquí.
En el giro.
Que teníamos en la sección.
Pues aquí lo que tenemos que hacer es.
El class.
Flex.
Flex call.
Justify center.
Item center.
¿Vale?
Y ya lo tenemos centrado.
Ahora lo que nos faltaría.
La separación.
De la span este.
Que tampoco tiene que ser una separación muy bestia.
Vamos a ver.
MB9.
Me voy a poner.
Me voy a poner esto.
Por aquí.
Porque si no voy a estar aquí todo el rato.
Mirando.
Cambiando de pestaña.
Y tampoco os quiero marear.
¿Vale?
No os quiero marear.
Y estar todo el rato mirando.
Me voy a ajustar esto un poquito por aquí.
¿Vale?
Perfecto.
Y ya lo tendríamos.
Vale.
Pues entonces.
Presentación.
Text white.
Bla bla bla.
Vamos a poner esto un poquito separado.
Y al final.
También lo que vamos a editar.
Serían los colores.
Porque fijaos aquí.
Que el color.
Le he puesto que sea negro.
Y no en negro.
Y además también.
Parece que es medium.
Que es un poquito así como negrita.
Vamos a añadir los dos colores.
Que tenemos.
Que tenemos aquí en el firma.
Los dos colores que realmente hay en el firma.
O que parece que hay.
Sería.
Por un lado.
Este color.
Que sería como el primario.
Es bastante.
Es bastante plano.
Pero al final sería.
Como el color primario.
Que es este.
Como el oscuro.
Y el clarito.
Que sería como el que tenemos de fondo.
Así que.
Nos vamos a ir a Tailwind.
Y aquí en Extend.
Vamos a poner otros colores.
Y vamos a poner aquí.
El primary.
Que básicamente.
No sé qué color.
O sea.
El color que tenemos aquí.
Es el 333.
333.
Y el secondary.
Que debe ser el ddd.
Que es el del fondo.
También.
¿Vale?
Y así.
Pues ya.
En lugar de utilizar aquí.
El white.
Que habíamos utilizado antes.
Utilizaríamos aquí.
El secondary.
Y aquí.
El primary.
Y ya empezaríamos a tener un poquito.
Esta cosita de aquí.
¿Vale?
Ya empezamos a tener.
Esta cosita de aquí.
¿Vale?
A ver si más o menos.
Vale.
Yo creo que.
Yo creo que.
La.
El logo.
Aquí.
Es un poquito más pequeño.
De hecho.
El tamaño es 800.
Y mi sensación es que aquí.
Es bastante más.
Una de dos.
O la letra es más grande.
Que también puede ser.
Porque no me he fijado.
De la presentación.
A ver.
Esta letra.
Es de.
20.
Vale.
Vale.
O sea.
Que la letra esta.
Es bastante más grande.
Así que.
Esto también tendríamos que ponerlo.
Que sean 20 píxeles.
La XL es 20 píxeles.
Perfecto.
Y igualmente.
Mi sensación es que el logo.
Se ve un poquito.
No sé si es que le falta un poquito más de separación.
No.
Es 800.
O sea.
Que eso está bien.
Lo que sí que parece que tiene por aquí.
Claro.
Más.
Más X.
O sea.
Esto sería un poco de 20.
Y ya está.
Ahora sí que.
Ahora sí.
Incluso un poquito más.
Incluso tiene un poquito más.
Vale.
Lo que estoy haciendo.
Tampoco quiero hacerlo pixel perfect.
Pero básicamente.
Para que esto esté alineado.
Como lo tenemos ahí en el Figma.
Pues que aparezca.
¿Vale?
Vale.
Pues más o menos aquí empezaríamos con el tema.
Por ahora lo voy a hacer un poquito más pequeño.
Usa gap en vez de margin bottom.
Podría utilizar el gap.
A ver.
No pasa nada.
Podría utilizar el gap.
Pero en este caso.
El gap es porque siempre quieres que todos los elementos tengan la misma separación.
O sea.
En este caso.
Nos va a funcionar visualmente exactamente igual.
Pero imagínate que pongo un elemento justo debajo.
Entonces.
Me lo va a separar exactamente por lo mismo.
Entonces.
Es un poco subjetivo.
Y estaríamos adelantándonos un poco al tema.
Y Mobile First.
A ver.
Es que ahora mismo.
Está siendo Mobile First.
Si tenemos el Mobile First.
Lo tenemos justamente aquí.
Lo vamos a hacer más o menos a la vez.
O sea.
Que no va a haber ningún tipo de problema.
Lo vamos a hacer más o menos a la vez.
Cada sección.
Para que sea Mobile y no Mobile.
Pero.
Que sea Mobile First.
En realidad.
Que sea Mobile First.
Lo hacemos también por el CSS.
Y va a ser totalmente Mobile First.
En ese sentido.
O sea.
Que no te preocupes por eso.
¿Cuál es la ventaja de Mobile First?
Bueno.
Normalmente.
Cuando tus desarrollados.
O sea.
Cuando tus usuarios.
Lo primero.
Que.
Lo que más utilizan en Mobile.
Pues está bien.
Que la experiencia.
La mejor experiencia que hagas.
Y desarrolles.
Sea la Mobile.
Y luego.
Pienses en la Desktop.
Hay un error muy común.
Que todo el mundo se cree.
Que todo hay que desarrollarlo Mobile First.
Y eso no es así.
Porque eso depende de cada página web.
Y de los datos que tengas de las páginas web.
Hay páginas web.
Por ejemplo.
En Back Office.
Que no tiene sentido.
Hacerlo Mobile First.
Cuando a lo mejor.
El 80% de los usuarios.
Funciona en Desktop.
Entonces.
Hay que tener un poquito de cuidado con esto.
¿Por qué siempre utilizas los SVG en componentes?
Justamente lo he comentado.
Primero.
¿Por qué no envuelvo en una etiqueta.
En una etiqueta imagen?
Pues porque no se puede customizar el color.
Si yo ahora mismo.
Por ejemplo.
Este Giro Logo.
Lo quiero cambiar.
Y lo quiero poner de color.
Yo que sé.
Green.
Vamos a poner verde.
Y en Giro Logo.
Lo que hago aquí.
Por ejemplo.
Esto podríamos hacer.
Que esto sea.
Que es lo correcto.
Debería ser.
Hacer esto.
Curre en color.
Esto no lo puedes hacer con una etiqueta imagen.
¿Vale?
Eso es lo primero.
¿Ves?
Le puedo cambiar el color súper fácil.
Lo cual tiene bastante sentido.
¿Vale?
Le puedo poner el color que yo quiera.
Y esto no lo puedes hacer con la imagen.
No lo puedes hacer.
No puedes customizarlo así.
Eso es lo primero.
Y lo segundo.
Y esto puede ser muy interesante.
Es que puede ser un error poner esto como una imagen cuando está tan arriba.
Una imagen es un recurso que por lo tanto necesitará hacer una petición.
Y por lo tanto haríamos que tarde un poquito más en ver la imagen.
Porque se tendría que descargar y luego la mostraría.
Al añadirlo en el HTML, sobre todo siendo un recurso crítico.
Cuando descargue el HTML, la persona, el usuario, verá directamente ese SVG.
Entonces, a veces tiene sentido utilizar la etiqueta imagen para los SVGs.
Pero en este caso creo que no tiene sentido.
Y además porque vamos a querer muchas veces poder customizarlo y personalizarlo.
¿Vale?
El diseño no lo he hecho yo.
El diseño lo ha hecho mi amigo David.
Que le doy un abrazo desde aquí.
Que es también la persona que hizo el diseño de la MiduFest.
Que hicimos aquí también en vivo e indirecto.
Y que quedó súper bien.
Y que a mí personalmente me gustó un montón el estilo y tal.
Y de vez en cuando, pues nada.
Me he echado una mano con los diseños porque es muy crack.
Venga, continuamos.
Por ahora voy a hacerle el footer porque es bastante fácil.
Y así, pues es una cosa que nos quitamos de encima.
Y vamos avanzando poco a poco.
Vale.
Vale.
Es que estaba pensando en el SEO.
Estaba pensando en el SEO.
Vamos a poner el footer.
El footer.
El footer.
Lo vamos a redondear aquí con el footer.
Esto tiene que ocupar todo el espacio.
Tenía un borde, ¿no?
Por lo que veo aquí, sí.
Tiene un borde de color primario.
¿Vale?
Vamos a hacer que tenga un flex.
Y dentro tiene dos cositas, ¿vale?
Un span.
Que aquí por lo que pone es...
No sé cómo se hace este simbolito.
Me lo voy a copiar.
Este simbolito, ¿vale?
2024.
La velada.
La velada del año, ¿vale?
Pero fijaos que aquí tiene una historia un poco extraña.
¿Veis?
Ahí hay una raya.
Ahí hay una raya.
Y aquí no hay raya.
Para hacer feliz a mi diseñador, como ha puesto ahí una raya de separación.
No sé si la veis.
A ver.
Ajá.
Ajá.
Ajá.
Ajá.
Ahí.
¿Veis que hay una raya?
Pero en el modo móvil no hay una raya.
Lo que hay es un salto.
A ver.
No lo...
No suelo hacerlo.
Pero vamos a hacer un pixel...
No un pixel perfect.
Pero un truquillo de cómo hacer esto para que funcione bien.
Tanto en esto como en móvil.
Y que se vea eso.
Aquí en lo de la velada del año no va a un punto.
Va a la barrita esta.
Esta barrita lo vamos a poner con un span.
Y en el span lo que vamos a hacer básicamente es...
Primero lo vamos a ocultar para que no estén en los screen readers.
Porque no añade ningún tipo de información.
En móvil.
Mobile first.
Vamos a hacer que esté oculto.
Pero luego vamos a hacer que aparezca.
A partir de la media query de MD a mayor de 768.
Vamos a hacer que aparezca en línea.
Para que se quede junto con el texto.
¿Vale?
Y aquí voy a hacer una cosa bastante polémica.
Porque yo os digo muchas veces que no te dices un break.
Pero es que aquí creo que puede tener bastante sentido.
Y vamos a hacer un poquito lo mismo.
Le ponemos que está oculto.
Y lo hacemos al revés.
Vamos a hacer que esté en bloque para móvil.
Pero que esté oculto.
Para desktop.
Y así esto lo que nos va a permitir justamente sería hacer el truquillo este.
Ajá.
Y este span.
Dice span.
¿No se encuentra el nombre span?
¿Cómo?
¿Por qué no se encuentra el nombre span si está aquí?
No sé.
A ver.
¿Veis ese error?
No sé si es que no he cerrado algo bien.
No.
Está bien.
O sea, se le ha ido la olla.
¿Vale?
Entonces, por ahí tendríamos eso.
Y aquí tendríamos lo que son las redes sociales.
¿Vale?
Las redes sociales las tendríamos.
Va.
Hostia.
Y encima aquí hay un borde.
La madre que lo parió.
¿Vale?
No pasa nada.
Porque claro, en el otro no hay borde.
Bueno, el borde tampoco me parece tan importante.
Bueno, aquí tenemos las redes sociales.
¿Vale?
Tenemos que hacer un poquito otra vez lo mismo.
Bueno, a ver.
Claro, es que están bastante bonitos.
Este está bonito.
¿Vale?
A ver.
Me voy a exportar esto.
Me lo exporto.
Exportar.
Instagram.
¿Vale?
Y esto también.
Y lo exportamos.
SVG.
¿Vale?
Twitter.
Ha puesto el logo de Twitter.
Polémico.
Habrá gente que no estará muy de acuerdo.
Pero bueno, vamos a dejarlo por ahí.
Vamos a poner aquí Twitter.svg.
Mira, aquí, por ejemplo, podríamos ponerlo con imagen.
Porque, en total, no creo que vayamos a utilizar diferentes colores.
Y mira, como es algo que no es tan crítico, que aparece abajo del todo.
Además, lo podemos poner con Lazy.
Podría ser una opción.
En lugar de poner aquí el SVG a mano y tal, pues aquí podríamos hacer lo que comentaba la persona esta del chat antes.
Podríamos hacer barra.
Y aquí, pues el primero que es lo que sale.
El Instagram.
Ay, si lo tengo ahí.
¿Vale?
Instagram.
Logo de Instagram.
Logo de Instagram.
Claro, entonces esto ya no tiene tanto sentido.
¿Ok?
Este sería el logo de Instagram.
Y este sería el logo de Twitter.
Así que Twitter.
Y aquí, Twitter.
Aquí tengo, por aquí tengo las redes sociales.
Así que me las voy a copiar por aquí.
Esta sería la de Instagram.
Instagram de la velada.
Y este sería el Twitter de la velada.
Así que, href.
Ponemos esto por aquí.
Esto por acá.
Vale.
Ya tenemos el enlace.
Ya tenemos el enlace.
Nos copiamos aquí un target blank para que la gente no se vaya de nuestra querida página.
No opener.
Esto nos lo copiamos por aquí.
Y aquí ahora lo que tendríamos que hacer es algún efectillo.
Vamos a ver cómo está quedando esto.
Vale.
El borde solo arriba.
Yo también.
El borde solo arriba.
Y además esto tiene que tener algún tipo de separación.
Vamos a hacer.
A ver.
Más o menos que vea yo por aquí.
Vale.
Veo que tiene bastante padding button.
Esto por aquí.
Luego vamos a hacer que esto sea flex.
En móvil está uno debajo del otro.
Pero luego se pone uno al lado del otro.
Y además tiene como una separación.
O sea, en móvil está todo centrado.
Está todo centrado.
Pero cuando se hace grande, deja una justificación.
Hace una separación.
Bueno, os lo enseño aquí.
Hace esto.
Separa.
Están separados.
Hay un justify between.
Donde está cada uno en una punta.
Por eso ponemos este.
O sea, en móvil se tendrían que poner uno debajo del otro.
Vale.
Demasiado.
Demasiado grande.
A ver.
Vale.
¿Veis?
Uno debajo del otro.
Falta algunas separaciones y tal.
Pero al menos ya tendríamos esto.
Y ahora lo que nos faltaría es que lo social va uno al lado del otro.
O sea, aquí esto tendríamos que poner que es flex.
Flex row.
Le ponemos una separación.
Y centramos un poquito esto.
Vamos a ponerle un poquito de estilo aquí.
Pues, por ejemplo.
A mí me gusta mucho que las cosas como los iconos y tal.
Ponerle más que una iluminación.
Porque se hagan grandes.
¿Vale?
Pero bueno.
Aquí cada uno.
Cada uno que haga lo que quiera.
Como en el diseño no lo pone.
Yo me lo voy a inventar.
¿Vale?
Me lo voy a inventar un poquito así.
Pensando en esto.
Le pongo inline block.
Porque si no seguramente como está en una línea.
No se va a ver el efecto.
Ya veréis.
¿Veis?
Este efecto.
Le he puesto un hover.
Que cuando el ratón esté encima.
Se haga grande.
Pero ¿veis?
Que no aparece.
Eso es porque está en línea por defecto.
Y por lo tanto no sabe de lo que tiene que hacer en la escala.
Por eso hay que utilizar inline block.
No siempre es necesario esto.
Pero en el anchor sí que es necesario.
Y ahora.
¿Veis?
Ahora sí que hace ese efectillo.
Vale.
Yo creo que me he pasado un poco con el padding.
No sé si ponerle 6.
Vale.
Más o menos.
Y ahí veo que también lo que le faltaría.
Es que eso es negro.
O sea.
Esto lo he puesto negro.
Esto tendría que ser del text primary.
Vale.
Y ya estaría.
Vale.
Fijaos lo que os decía de.
Ah mira.
Me falta otra cosa.
Esto tendría que ser text center.
Para que se centre siempre el texto.
Vale.
Y también además aquí deberíamos tener un gap de 10.
No sé.
Algo así.
Ok.
Y luego el footer.
Que esto a lo mejor lo hacemos después.
¿No?
El footer que tenga una separación con la parte de arriba.
Porque ahora queda raro.
Porque está pegado.
Pero eso es por culpa de que le faltan secciones.
Pero bueno.
Fijaos en esta barrita.
¿Veis ahí que sale la barrita?
Claro.
Pues lo que hago es que en móvil desaparece la barrita.
Y encima pega un salto.
Y lo hacemos que el salto quede exactamente donde queremos.
A ver.
Normalmente.
Os digo una cosa.
Ese all right reserved es porque lo que me ha puesto en el diseño.
Y además viendo la página web de la velada lo ponía.
Entonces yo lo voy a dejar.
Aunque ya sabéis que yo estas cosas no las pongo.
¿Por qué he utilizado el break?
He utilizado el break porque es algo muy específico.
Que sí que sí o sí tiene que romperse ahí.
Pero normalmente no hace falta utilizar el break.
¿Vale?
No hace falta utilizar el break porque realmente el break está pensado para hacer un salto pero muy específico.
No lo utilicéis en cualquier texto por el otro sentido.
Solo en cosas muy concretitas.
Es daño del logo de Twitch.
No me quiten los chistes.
Hugo.
No me quiten los chistes.
Que esos son míos.
Qué bueno.
Vale.
Pues ya tendríamos esto por aquí.
¿Vale?
Lo tenemos por acá.
Pi, pi, pi.
Y así queda perfecto.
Muy bien.
Pues venga.
Vamos con más cositas.
Esta sección ya la tenemos lista.
A ver.
¿Esto es muy oscuro?
No.
Está bien.
Pues vamos a hacer esta parte.
Que esta parte no parece tampoco muy...
Ah, mira.
De esta parte vamos a hacer una cosa muy chula.
Si os parece.
Vamos a hacer una cosa muy chula.
Y es que aparezca la fecha para el usuario.
¿Vale?
La fecha para cada uno de los usuarios.
Porque claro.
Esto aquí.
Mira.
Lo voy a hacer mal.
Bueno, mal no.
Pero lo voy a hacer de primeras.
Y luego lo vamos a hacer.
El midu de tu web a juicio no hubiera aceptado el br.
Tienes toda la razón.
Tienes toda la razón.
Entonces.
Vamos a utilizar principal date.
En el principal date.
Pues nada.
Hacemos otra sección.
Y un poquito lo mismo de antes.
A ver.
Que vea yo por aquí.
Vale.
Vamos a necesitar aquí ponerlo de 4 de marzo.
Bueno.
Puedo ponerlo así.
4 de marzo.
Otra vez.
Otra vez aquí.
Otra vez tiene el mismo truco.
Fijaos que aquí el 4 de marzo.
Aquí se separa con un puntito.
Y aquí no hay puntito.
Lo mismo.
O sea.
El mismo truquito que hemos hecho aquí.
Este mismo truquito.
Lo vamos a hacer.
Lo vamos a hacer.
Exactamente igual.
Porque es que es exactamente lo mismo.
Solo que la diferencia es que esto es un puntito.
Es un puntito y además tendría que tener un poquito de separación aquí.
¿Vale?
Y en el otro pues el salto de línea este.
Y ya está.
Esto es para que quede exactamente igual que el estilo este que tenemos aquí.
Y luego lo que vendría es el 19.
No sé qué.
No sé cuánto.
O sea.
19.
19.
0.
0.
0.
¿Vale?
Luego tendríamos aquí que podríamos poner que es un H3 o lo que sea.
¿Vale?
H3.
Y aquí pues evento de presentación.
Y span.
Vamos a poner aquí teatro Victoria Barcelona.
¿Vale?
Esto sería el H3.
Y luego directamente.
A ver.
Aquí se supone que es como un anchor.
No sé si es un botón.
Que son las entradas.
Que pone entradas agotadas.
¿Vale?
Esto ahora.
Esto va a ser largo.
Porque tiene alguna cosita.
Así que lo voy a poner así.
Y el H3.
Target.
Blank.
¿Vale?
Esto para que se abra en otra línea.
O sea.
En otra ventana.
Y el H3.
Vamos a buscarlo.
Entradas.
Teatro Victoria Barcelona.
La velada.
Vamos a ver.
Entradas.
Entradas.
Teatro Victoria.
Organización de ventas.
Joder.
Entradas para presentación.
Entradas.
Joder.
No me puedo creer.
Pinchando aquí.
Vale.
Bueno.
O sea.
Ahora se encuentra en cola.
Ya, ya.
O sea.
Pincha.
Teatro Victoria.
La velada.
Tiene que haber otra.
Esto.
Este.
Este tiene mejor pinta.
Este tiene mejor pinta.
Vamos a utilizar ese.
¿Vale?
Vale.
Ojo aquí.
Tiene historia.
Vamos por partes.
Vale.
Esto es un borde.
Border 2.
A ver.
Voy a dejar esto aquí.
Para que.
Para que al menos veáis.
Más o menos.
Donde estoy sacando esto.
Esto lo puedo hacer.
Esto no lo puedo quitar.
¿Por qué no puedo quitar esto?
Ah.
No sé cómo se quita esto.
¿Será que no se puede?
Oh.
Alguien lo ha dicho.
Alguien.
Alguien por fin ha dicho.
El comentario útil.
Que es comando punto.
Clic derecho al lado del frame.
Comando punto.
Ese era el que quería.
Comando punto.
Gracias.
Dios mío.
Gracias.
Gracias.
Y además.
Se puede seguir tocando y tal.
Perfecto.
Muy bien.
Gracias.
Gracias.
Pues eso.
Vale.
Pues así.
Lo vamos a tener los dos.
Más o menos.
Vamos a dejarlo esto así.
Vale.
Lo movemos aquí.
Y este aquí.
Y esto aquí.
Y esto acá.
Y así podemos ir poniendo.
Vale.
Cada cosa.
Entonces.
En las entradas agotadas.
Este.
Font.
Medium.
PX6.
PI2.
El hover.
Me lo voy a inventar un poco.
Vale.
Vamos a hacer que tenga el VG Secondary.
Que se haga un poquito grande.
Vale.
¿Qué más podría tener esto?
La separación ya la hemos hecho.
Podríamos separar esto con lo de abajo.
Con lo de arriba.
Vale.
Porque esté un poquito separado.
Y tiene un poquito de separación más que la otra.
Tiene que estar todo en mayúscula.
Y la letra.
18 píxeles.
Vale.
Muy bien.
Vamos a irnos aquí.
Y esto lo voy a poner también aquí.
Para que justamente.
Podamos ver también en tiempo real.
Todas las cositas.
Vale.
Voy a cerrar todo esto.
Y así podremos cambiar entre uno y otro.
Vale.
Entradas agotadas.
Entradas agotadas.
Vale.
Me he pasado un poquito con los paddings.
Pero bueno.
No pasa nada.
Esto sería un poquito más pequeño.
Y eso sería un poquito menos.
Menos bestia.
Y ahora que ya tenemos todo esto.
Pues lo que podemos hacer es.
Esta sección.
La vamos a arreglar también.
La section.
Vale.
La section es un.
Le damos un poquito de separación por aquí.
Lo vamos a centrar.
Vamos a hacer que esté orientado de arriba a abajo.
Lo vamos a centrar todo.
Todo.
Y el texto.
Yo creo que lo vamos a centrar todo también.
Vale.
Obviamente se ve muy pequeñito.
Porque esto tiene que ser upper case.
Esto tiene que ser bastante grande.
Le vamos a añadir.
Vamos a hacer que todo tenga text primary.
Vamos a ponerlo aquí.
Vale.
Y esto.
Vamos a poner que sea semi volt.
Vale.
Perfecto.
Eso ha quedado finísimo.
Y este.
Pues un poquito lo mismo.
No sé si semi volt o un poquito menos.
Este a lo mejor no tiene que ser tan grande.
No sé si 3XL puede ser.
Más o menos.
No.
Menos.
Y esto.
Menos también.
Vale.
Y esto tiene que quedar uno encima del otro.
Y además.
Flexcall.
Vale.
Esto lo ponemos por aquí.
Y también le vamos a poner un poquito de separación.
Con el 6.
Más o menos.
Vale.
Me falta el upper case.
Upper case.
Y ya tendríamos esta parte.
Vale.
Ya tenemos esta parte.
Vale.
Entonces.
Lo que vamos a querer hacer aquí.
Esto está interesante.
Esto está interesante.
Es el hecho de mostrar la fecha esta.
Esta fecha que tenemos aquí.
Esta es la fecha mía.
Porque yo soy de España.
Pero si tú entras a la página.
Lo que sería genial.
Es que tú vieses también tu fecha.
O sea.
Que vieses tu hora.
Exactamente.
Se puede hacer una cosa.
Que esto lo hicimos con la midu conf.
Si no me equivoco.
Se puede hacer una cosa bastante chula.
Para mostrar tu fecha.
Y directamente que aparezca aquí.
O sea.
Intercambiar el propio elemento este.
Del 19 este.
Por la hora que sea la correcta.
Lo que podemos hacer.
Es que aquí.
En este span.
Aquí.
Podemos poner directamente.
Un script.
¿Vale?
Vamos a poner aquí un script.
Y aquí.
Dentro del script.
Lo que puedes decir es.
Este propio script.
Self script.
Document.
Current script.
Me lo vas a cambiar.
Self script.
El padre.
Parent note.
El html.
Me lo vas a cambiar.
Por lo que tú quieras.
Por ejemplo.
Pues este string.
O mira.
Vamos a poner.
Hola.
¿Vale?
¿Vale?
Algo he hecho mal.
Document.
Current string.
Parent note.
Self script.
¿Qué he hecho?
¡Ah!
Vale.
Espérate.
Es que Astro.
No funciona esto exactamente.
Esto tendríamos que ponerlo.
Que es inline.
Me parece.
Vale.
Ya está.
Entonces.
¿Vale?
Pero ha pasado de mí.
Y este.
¡Ah!
Porque tenemos que hacer que esto esté dentro de un span también.
Porque si no va a cambiar.
Lo que no es.
¿No?
Ah.
Pues no.
Document.
Current script.
Vale.
A ver.
Algo he hecho mal.
¿Qué he hecho mal, amigos?
Que lo he puesto dentro del br.
No.
¿Qué he hecho mal aquí?
Span.
El h2.
A ver.
Me está cambiando etiquetas esto.
Como si hubiera mañana.
La madre que lo parió.
Y esto por hacerlo.
Porque era hacerlo en la línea.
Me cago en la leche.
A ver.
Momento, ¿eh?
Vale.
Tenemos aquí el span.
El span.
Aquí tenemos el br.
Vale.
Pues aquí tendríamos esto.
Y no debería haber ningún tipo de problema.
Pero no me lo está cambiando.
Parent note.
Punto.
A ver.
Self script.
Seguro que está aquí.
Self script.
Seguro que esto está aquí.
El span.
Este del punto está aquí.
El br está aquí.
Y este debería cambiarlo por exactamente lo que necesitamos.
Pero.
Voy a ver si me está.
Me está dando undefined.
A lo mejor es que este self script me está pidiendo ahí un undefined.
Por ver.
Para saber qué motivo.
Vale.
Self site assignment.
Bueno, claro.
Es que esto.
Es que esto no sé por qué me lo ha puesto.
Es que el problema es eso.
Que me lo ha puesto eso.
Me ha puesto ahí el optional chaining.
Y eso no tenía sentido.
Vale.
Ahora.
Ahora sí que tiene sentido.
Vale.
Ahora esto así.
Vale.
Ahora sí.
Ahora sí.
Entonces lo que vamos a poder hacer aquí.
Ahora sí.
Me ha costado.
Lo que podemos hacer aquí es.
No.
El zhtml no.
Lo que vamos a querer es básicamente calcular la fecha del usuario.
Vale.
Para calcular la fecha del usuario necesitamos primero el timestamp de la velada.
Entonces vamos a ir a aquí.
Esta página me encanta.
Y vamos a decirle a qué hora es lo de la velada.
Por ejemplo.
Era el 3 de marzo.
4 de marzo.
4 de marzo.
A las 7.
Y aquí le decimos que es nuestra hora.
Y aquí nos da el timestamp que esta sería la hora de timestamp, timestamp, yo qué sé.
Finish.
End date.
End date.
¿Vale?
La fecha final es esa.
Esa es la fecha que vamos a tener que transformar según el time zone del usuario.
Para recuperar el time zone.
Vale.
Lo que tenemos que hacer primero es crear la fecha.
Entonces de new date.
Vamos a poner el end date.
Esta sería la fecha.
Vale.
Ahora que tenemos la fecha podemos recuperar la hora.
La hora para transformarla con el de tu local.
¿Vale?
Algo así.
Tu local date string.
Aquí le podemos poner el lenguaje que en nuestro caso es español.
Pero no necesitamos el año y todo esto.
Si lo que necesitamos es la hora.
Utilizando los dos dígitos de la hora.
Y los dos dígitos de los minutos.
¿Vale?
Voy a poner aquí una D.
Esto es el date.
Y por ahora vamos a poner ya el date aquí.
¿Vale?
Esto me debería poner la hora.
¿Por qué no me está poniendo el date?
El tu local string este.
Console log date.
Es que me está devolviendo todo.
Yo solo quiero que me devuelvan aparte.
Es time.
Ah.
Hostia.
Puede ser.
Tienes toda razón.
Hostia.
Tu local time string.
Como me lo ha hecho Guija.
Hostia.
Mira que lo he pensado.
Pero como me lo ha puesto Guija Copilot.
Gracias.
Menos mal.
Para eso.
Esto sí que es un Copilot en condiciones.
Vale.
Entonces.
Ahora la hora que tenemos es la hora del usuario.
Pero todavía nos falta una cosa.
Que es recuperar la zona horaria.
La zona horaria.
Esto es un percal.
Get current time zone.
Porque no hay una forma de decirle a JavaScript.
Dame la diferencia horaria.
O sea.
GMT más 2.
GMT más 1.
Lo que sí que se puede hacer.
Es recuperar el offset.
O sea.
Le puedes decir esto.
Get time zone offset.
Pero esto es una basura.
Porque esto.
Esto en realidad.
Te dice la diferencia en minutos.
Es una cosa muy bizarra.
Tío.
Las fechas.
Es una cosa muy loca.
¿Ves?
Menos 60.
¿Cómo que menos 60?
La madre que te parió.
¿Cómo que menos 60?
Eso lo que significa.
Es que hay una diferencia.
Con GMT.
De 60 minutos.
Una locura.
Entonces.
¿Qué tenemos que hacer?
Primero.
Tendríamos que dividir entre 60.
Porque son los minutos.
Ahora ya sabemos que la diferencia es de 1.
Pero claro.
La diferencia nos la da al revés.
Porque en realidad yo estoy en GMT más 1.
Pero me dice que es menos 1.
Por lo tanto le tenemos que dar la vuelta.
¿Vale?
Por menos 1.
Para darle la vuelta.
Y ahora lo que podemos hacer es.
Si la diferencia.
GMT.
Si la diferencia es mayor a 0.
Entonces.
Más.
Si es mayor a 0.
Claro.
Si es mayor a 0 más.
Y si no.
Pues le ponemos aquí un menos.
Y aquí un más.
Absolute.
A ver.
Que es que no sé cómo esto saldrá.
Luego cuando entres en la página me lo decís.
Y ya está.
Con esto ya tendríamos el GMT.
Es un poco pirata.
Pero al menos.
Ya parecería así.
Ahora.
Lo que podemos hacer.
Que como en el diseño tenía.
Lo de Central European Time.
Que pone Z.
Que tiene sentido.
Lo que podemos hacer.
Vamos a poner aquí.
La H.
Que nos faltaba.
Y podemos hacer aquí un diccionario.
Que.
Y luego me podéis decir.
Si también en Latinoamérica se utiliza.
Porque aquí.
Por ejemplo.
Actualmente.
El GMT más 1.
Es Central European Time.
Y lo que podemos hacer es.
Decir que.
En lugar de GMT.
Le llamamos TC.
Si está en el diccionario.
Lo cambiamos.
Por lo que aparezca aquí.
Y si no.
Utilizamos el que sea por defecto.
Pero el día también puede cambiar.
Por la diferencia horaria.
No solo la hora.
Puede que para otros usuarios.
No sea el 4 de marzo.
Tienes toda la razón.
Pero en este caso.
¿Qué vamos a hacer?
Pues.
Para otros usuarios.
Pero voy a pensar solo en Latinoamérica.
Básicamente.
Voy a pensar simplemente en Latinoamérica.
Para.
Para simplificarlo.
Porque a ver.
En Latinoamérica.
No habrá nadie en el futuro.
Y total.
Va a estar en España.
O sea que.
A no ser que entre un chino.
Básicamente.
No lo va a ver.
En otra fecha.
Porque no.
Hay 19 horas de diferencia.
De Nueva Zelanda.
Bueno.
Pues.
Lo siento por ellos.
Creo que ya.
Hemos tenido suficiente.
Hemos tenido.
Vivo en China.
No me lo creo.
No me lo creo.
Bueno.
Si no.
Me hacéis una PR.
Es que si no.
Vamos a estar ahí todo el día.
Pero al menos.
Y así me confirmáis si funciona.
Porque yo.
Lo veo bien.
Pero no sé si funcionará.
Así que me lo comentáis.
¿Vale?
Y me podéis hacer la PR.
Para arreglar.
Lo del día también.
Venga.
Que ya tenemos al menos este.
¿Vale?
Ya tenemos una sección más.
Vamos con otra sección.
Tenemos el principal date.
Nos falta info.
Y countdown.
Venga.
El info es un momento.
Así que vamos a hacer el info.
Vamos a hacer.
Esta parte de aquí.
¿Vale?
Esta parte de aquí.
Presentación.
Síguelo en directo.
No sé qué.
Yo le voy a añadir unos icónicos.
También os digo.
Así que.
Vale.
Primero hay que poner.
La cosa esta de Twitch.
Que la vamos a poner.
Creo que tengo un SVG de Twitch.
Así que este.
Me lo voy a copiar.
Directamente.
No hace falta ni siquiera que lo.
Vamos a poner por aquí.
Twitch.svg.
Me lo copio por aquí.
¿Vale?
Aunque.
Claro.
Esto.
Esto está bien.
Porque veo que no me lo está formateando.
No sé si es porque no está bien.
O porque.
Le da rabia.
Vale.
Pues.
Por ahí tendré.
El de Twitch.
Y por otro lado.
Aquí tenemos.
Una grid.
¿Vale?
Que aquí son tres.
Y en móvil.
Es una detrás de otra.
Una debajo de otra.
Vale.
Pues vamos a hacer la grid.
Que es un momento.
Grid.
Grid calls.
Uno.
Mobile first.
Y luego.
Grid calls.
Tres.
¿Vale?
Para.
Para desktop.
Y dentro.
Vamos a tener los articles.
Vamos a tener un article.
Tres articles.
¿Vale?
Tres artículos.
En uno.
Pues ya vemos aquí.
Que pone.
Vamos a poner un H5.
H5.
Que sea.
Presentación.
Pesaje.
Entrevista.
Y cara a cara.
Que bueno.
Esto en realidad.
Como tiene que ser todo uppercase.
Que también lo podríamos poner.
A este nivel.
Porque total.
Como es todo.
Este.
Lo vamos a poner un poquito más grande.
Así que vamos a poner.
Un H4.
Que sea.
Síguelo.
Síguelo.
En directo.
Twitch.tv.
Twitch.
Twitch.tv.
Barra.
Ibai.
¿Vale?
Que es el de Ibai.
Y aquí.
Vamos a poner un H5.
Con la presencia.
De.
Los boxeadores.
Y boxeadoras.
¿Vale?
Entonces.
Yo.
Tengo por aquí.
Unos icónicos.
Que ahora os enseñaré.
Ya me he preparado antes.
Que son de.
De boxeo.
Ahora.
Cuando los carguemos.
Os lo enseño.
Entonces.
Los voy a dejar por ahí.
Más que nada.
Para tenerlos listos.
Y luego.
Os pregunto.
Si os gusta.
O no os gusta.
Porque a lo mejor no os gusta.
Entonces los quitamos.
Porque en el diseño no están.
Pero.
Le quería dar un toquecillo.
Entonces.
Bueno.
Pues vamos.
Luego me comentáis.
Venga.
Seguimos aquí con la info.
En la info.
Venga.
Más cositas de la info.
Necesitamos aquí.
El enlace.
A ver.
Aquí tiene que ir.
El enlace.
De Twitch.
También.
El enlace de Twitch.
Y aquí podemos poner.
La imagen esta.
De.
.twitch.svg.
Alt.
Logo de Twitch.
Vale.
Esto sería por aquí.
Y esto va a ir al Twitch.
De Ibai.
Ibai.
Target.
Blank.
Rel.
No opener.
Joder.
No opener.
No referer.
Vale.
Vale.
Voy a ver cómo va quedando.
Bueno.
Va quedando más o menos.
Tampoco todavía está del todo.
Lo que sí que veo.
Es que esto.
Vamos a tener que centrarlo.
Vale.
Item center.
Y el section.
Vamos a tener que poner un flex.
Vamos a hacer que todo sea medium.
Porque me parece que todas son medium.
Vale.
Y vamos a poner aquí también.
Que todo el texto tenga el mismo color.
Y le vamos a poner una separación.
Arriba y abajo.
Y vamos a ponerle también un.
Una separación.
Aquí hay una separación bastante grande.
Algo así.
Vale.
Vale.
Ahora lo que nos falta es que esto tiene que ser flex call.
Vale.
Esto mejor.
Vale.
Grid calls.
Grid calls.
Aquí necesitaríamos que todo esté centrado.
Text center.
Vale.
Y de cada una.
Voy a hacer esto un poquito más grande.
De cada una.
Lo que necesitamos es que arriba y abajo tengan borde.
Así que.
¿Ves?
Arriba y abajo tengan borde.
Este es un poquito más grande.
Y estos son más pequeños.
Y además aquí hay un padding.
Vale.
Yo creo que esto.
Voy a poner un ancho mínimo.
Hay una altura mínima por ahora.
Vamos a poner también.
O no hace falta.
Podemos poner.
Podemos poner que sea más bien como padding.
Vale.
Vamos a poner padding.
Vamos a poner padding también por los lados.
Vamos a poner.
Los bordes.
Border.
Dos.
Borde.
Y dos.
Border.
Primary.
Vale.
Luego también esto tiene un gap.
Para que no estén juntos.
Vamos a poner un gap de cuatro.
Vale.
Vale.
Y también las letras son bastante más grandes.
Esta.
Me parece.
A ver el figma.
Un momento.
Que voy a mirar aquí.
Figma.
Tú, tú, tú, tú.
Hostia.
Lo he bloqueado.
La madre que me parió.
Ahora.
Vale.
Esto es 30.
Y esta es 40.
Vale.
30 y 40.
Perfecto.
30 y 40.
Vale.
30 es la XL.
Ya me la sé de memoria.
¿Ves?
20.
O sea, 20 es la esa.
Que esto lo podría poner aquí.
Pero bueno.
No importa.
Así lo simplificamos.
Entonces, todo esto ya nos va quedando un poquito así.
Yo creo que aquí habrá que ponerle bastante padding.
Porque tiene que tener bastante separación.
Disculpa, Midu.
Disculpa.
Pero no comprendo lo del no opener y no referer.
¿Lo de qué?
No entendió.
Lo de no opener.
Ah, vale.
Lo de no opener y no referer.
Vale.
Te explico.
Lo de no opener y no referer es que ya lo hago automático.
Pero básicamente cuando abrimos en una nueva pestaña.
Realmente el no referer ya no es obligatorio.
¿Vale?
Es totalmente.
Es opcional.
El importante es el no opener.
Que el no opener lo que quiere decir es que no le pasa cierta información a los usuarios.
Para que no.
A los usuarios no.
A la otra página.
¿No?
Dice cuando podemos añadir distintos atributos.
Vale.
No opener.
¿Qué es lo que hacía?
¿Vale?
Se crean los links para solucionar temas de vulneración de seguridad.
¿Por qué?
Porque cuando hacías el no opener.
Lo que estaba pasando.
Que es que le estaba enviando cierta información.
¿Sirve para mejorar la seguridad?
Ya sirve para mejorar la información.
Pero qué seguridad.
Pero dime qué es lo que le hacía.
Creo que lo que es.
No me acuerdo.
¿Será el header?
Que le decía quién lo que había hecho.
Por el no referer tengo seguro que es el header.
Pero el no opener es de qué página ha venido básicamente.
Es como para no tener acceso a quién ha abierto la página que le está enlazando.
Porque si no la persona que le está llevando al usuario podría decir.
Ostras.
Pues la página que ha abierto esta página voy a intentar cambiarle el contenido.
Inyectar lo que sea.
¿Vale?
Pues por eso se hace justamente esto.
De poner el enlace para que evitar que la página que estás abriendo tenga acceso a la que viene.
¿Vale?
O sea.
¿Qué es lo que podrías hacer?
Podría intentar la página de destino modificar la página de origen.
Ahí es lo que extendíamos.
¿Vale?
Pero si son fiables las páginas no importan.
Ya.
Pero ya lo hago.
Básicamente lo hago automáticamente.
Y el no referer lo que pasa es que es un tema más de privacidad.
Porque el no referer lo que hace es enviar la información de dónde vienes.
Entonces Twitch podría recuperar información de.
Imagínate que tú estás en una URL que por lo que sea tienes password o información confidencial o sensible en la URL.
Y vas a Twitch.
Pues Twitch podría tener acceso a la URL y podría ver toda esa información.
Entonces el no referer sería para eso.
Y el no opener sería para que no tenga acceso a la página en sí que es la que está abriendo.
¿Vale?
El no follow sería más para un tema de SEO.
Pero bueno, eso no hace falta.
Tampoco pasa nada.
Pero si queréis lo ponemos.
No sigas esto.
Esto sería más para el crawler de Google.
¿Vale?
Presentación, pesaje y cara a cara.
Yo creo que aquí todavía nos falta.
Pesaje y cara.
Presentación, pesaje.
Aquí nos falta un poquito más.
Nos falta un poquito más.
Presentación, pesaje.
Presentación, pesaje.
Un poquito más.
A ver si lo afinamos.
Un poco.
Presentación.
Me he pasado.
¿Vale?
16.
Presentación, pesaje y cara a cara.
Vale.
Ahora sí que tiene mejor pinta.
Y yo creo que ahora sí que tiene pinta esto que nos lo vamos a poder copiar para este y este.
Para que queden los tres iguales.
¿Vale?
Solo que este también.
Claro.
Aquí tendríamos que poner flex, justify, center, center.
Y esto también lo tendríamos que copiar en todos.
Para básicamente que quede justo en el centro.
Y la diferencia sería que este realmente no es un XL.
Sino que sería bastante más grande porque es de 40 píxeles.
O sea que sería más este.
¿Vale?
Sería algo así.
La que tenemos aquí sería algo así.
Yo la diferencia que vamos a hacer.
Que no aparece en el diseño.
Es que aquí vamos a poner obviamente.
Justamente lo mismo que hemos hecho aquí.
Mira.
Como ya tiene el no follow, el no referer.
Pues mira.
Lo utilizamos aquí.
Y así pues ya tenemos esto.
Le vamos a poner un pequeño detallito.
De que pues para que básicamente se sepa que es un enlace.
Porque si no la gente a lo mejor ni se entera.
Vamos a poner aquí un transition.
Y básicamente.
¿Vale?
Para que tendríamos.
Voy a poner una pequeña.
Un pequeño scale.
Tampoco nada grave.
Y este mismo hover.
Aquí que teníamos la imagen.
Pues vamos a poner también aquí.
Que esto también haga un poquito de hover.
Le vamos a poner aquí.
Aquí sí que sea la escala.
El hover.
Le cambiamos un poquito la opacidad.
Y le ponemos el transition.
Con el inline block.
Y ya tendríamos.
Ya tendríamos un poquito esto.
Hostia.
Aquí el scale no lo he puesto bien.
Scale 110.
Ah.
Porque me pasa otra vez esto.
¿Vale?
Vale.
Pues ya tendríamos un poquito esto.
¿Vale?
Ya tendríamos la parte esta.
Ah mira.
Este.
Este hover.
De entradas agotadas.
Entradas agotadas.
Se nos ha olvidado.
El transition.
Transition.
Inline block.
¿Vale?
Para que tengamos esto.
Yo creo que también.
VG secondary.
VG primary.
Creo que tendría que ser esto.
En todo caso.
Bueno.
A ver.
Tampoco pasa nada.
No sé.
¿Sabes?
O sea.
Podría ser.
Algo un poquito más oscuro.
Yo que sé.
Tampoco mucho más.
Para que.
Coño.
Qué complicado.
Complicado.
Algo así.
Más que napa.
Que se vea ahí.
Que es el enlace.
¿Vale?
Y ya estaría.
Vale.
Pues ahora tenemos el contador.
Faltaría más ancha la columna central.
Hostia.
¿Es más ancha la columna central?
Tienes razón.
Es más ancha la columna central.
No me había dado cuenta.
Vale.
Pues esto nos lo complica un poquito.
A ver.
Tampoco pasa nada.
Pero.
Bueno.
Vamos a hacerlo un momento.
Porque había puesto aquí.
Que tenía cinco columnas.
Aquí lo que vamos a poder hacer.
Es que esta.
Grit.
Ay.
Me equivoqué.
Esto es spam.
Call.
Spam.
3.
Pero no tanto.
O sea.
Que igual.
Sería algo así.
Más bien.
Tiene pinta.
Más separación.
Tu tu tu.
Bastante más separación.
Bastante más separación.
Y claro.
Ahora lo que nos fastidia.
Además de que.
No tiene.
No necesita tanta subida.
Hostia.
Es que tampoco es tanto.
Si no lo podemos hacer a mano.
448.
Claro.
Aquí es que sí que tendríamos que afinar entonces un poquito esto.
El texto lo tenemos bien.
El texto lo tenemos bien.
Lo que podemos hacer es.
Si no.
Utilizar.
En lugar de grid.
Porque pensaba que eran exactamente igual.
Podemos utilizar flex.
Decir.
Que tenga el tamaño.
El tamaño.
Que uno tenga el grow.
¿Sabes?
Es que claro.
Esto es porque pensaba.
Si no lo podemos hacer.
Vamos a hacerlo así.
Vamos a hacerlo así.
¿Vale?
Vamos a hacerlo así.
Que mira.
Básicamente aquí.
No queda mal.
La verdad.
No queda mal.
Lo malo es.
Que vamos a tener que cambiar.
Algunas cositas de los paddings.
Y todo esto.
Porque.
Ahora queda mejor.
Ahora queda mejor.
Pero tenemos que.
Dejar menos separación.
Aquí con el padding.
Este que habíamos puesto antes.
No hace falta que tenga tanta.
A lo mejor.
Algo así.
A 20.
¿Vale?
Porque está un poquito más chafado.
Y también esta separación de aquí.
Tiene que ser un poquito menor.
¿Vale?
Tendría que ser algo así.
Y en este.
Nos faltaría el justify center.
Item center.
¿Vale?
Y ya lo tendríamos así.
Cuando se hace esto más pequeño.
Se tiene que poner uno encima del otro.
O sea.
Esto.
Se tendría que poner.
Este de aquí.
Que.
Por defecto.
Sea flex call.
Y en el MD.
Sea flex row.
Y ahora sí.
Si lo hacemos más pequeño.
¿Vale?
Vale.
Ahora el tema.
Está.
En que hay que quitar.
Algún borde.
Porque fijaos aquí.
Que.
Hay más bordes.
De los que necesita.
En cambio.
En este efecto.
Podemos ver que los bordes.
Están correctamente.
¿Qué es lo que pasa?
Que el borde.
Se duplica.
Los bordes aquí.
Claro.
Aquí hay un borde.
Pero aquí también hay otro.
Y aquí.
Vemos que.
No debería tener tantos.
Claro.
Es que este es un ejemplo.
Muy exagerado.
De.
Del.
Del mobile.
Y por eso.
Esto queda una sola línea.
Lo que podríamos hacer.
Es ponerle un ancho máximo.
A todos los articles.
Lo primero que tendríamos que hacer.
En el.
Síguelo.
Este.
Síguelo en directo.
No sé qué.
No sé cuánto.
Es que este borde.
Si yo lo quito.
Pium.
Pues.
Ya aparecería.
¿Qué es lo que significa?
Pues.
Que.
Esto en realidad.
Tendría que ser aquí.
Así.
Y.
Ya está.
Con este ya lo tendríamos.
Eso es lo primero.
Luego.
Aquí hay de más.
¿No?
Porque también.
Además aparece.
Parece que está.
Ah.
Bueno.
No.
No sé si parece más grande.
No.
Lo que pasa es.
Que.
El ancho.
Es más pequeño.
Y claro.
No lo puedo hacer.
No lo puedo hacer más pequeño.
Entonces.
Lo que sí que podemos hacer.
Es.
Hacer un máximo.
De la.
Del tamaño.
De cada cosa.
Por ejemplo.
Aquí.
Podemos decirle.
Que el máximo sea.
A ver.
Max.
Max.
Max.
Vamos a ponerlo aquí.
Tu tu tu tu.
Tu tu tu.
Vamos a poner.
Max.
O que el tamaño.
Podemos ponerle el tamaño.
Directamente.
Por ejemplo.
Text center.
Obviamente.
Esto es muy poco.
Pero si le ponemos un tamaño.
Que sea lo suficiente.
Algo así.
Que es más o menos.
288.
Esto más o menos.
Debe ser.
200 píxeles.
Entonces le podemos poner un tamaño máximo.
A lo mejor un poquito más.
Tu tu tu tu.
A ver.
60.
Algo así.
Y además.
Lo podríamos hacer un pelín más grande.
¿No?
Le podemos hacer aquí que.
En móvil.
Que es un poco raro.
Porque.
Ah.
El orden cambia también.
No me digas.
Es verdad.
El orden cambia.
Primero.
No pasa nada.
También arreglamos el orden.
No os preocupéis.
No os preocupéis.
Vamos a poner el orden primero.
Primero.
El orden.
Aquí aparece.
Order 1.
Este sería.
Order 2.
Y este sería.
Al final.
Order 3.
Vale.
Cambia el orden.
Vale.
Ya está.
Eso es lo primero.
El tamaño debe ser el mismo de la caja.
No.
No es el mismo de la caja.
Lo que pasa es que aquí.
Da esa sensación.
Justamente.
¿No?
Da esa sensación.
Pero no es el mismo de la caja.
Porque aquí podemos ver que esto.
Aparece aquí.
O sea.
Que hay un espacio de la caja.
Lo que pasa es que no hay más espacio.
Y este es el padding que tenemos hacia afuera.
¿Vale?
Eso por un lado.
Luego.
Aquí ahora el padding.
Tiene que ser mucho menor.
Porque aquí el padding es súper grande.
Bueno.
El orden ha cambiado.
El orden ahora es el correcto.
Pero.
¿Qué pasa?
Que este.
Tiene que tener un borde.
Arriba.
Tiene que tener el border top 2.
¿Vale?
Eso tiene que estar así.
Según esto.
¿Eh?
Según esto.
Ese borde tiene que estar.
A ver.
Para que lo veamos más parecido.
Lo que puedo hacer.
Porque claro.
Es que.
Es que.
Estamos viendo ahí cosillas.
Que no son exactamente como son.
Por culpa de.
Vamos a hacer esto así.
Esto así.
Esto así.
¿Vale?
Hostia.
Hay aquí.
Claro.
La velada ha dañado esta.
Vamos a cambiar el giro.
Oeste.
Vamos a poner.
Que el giro.
Que por defecto.
Auto.
No sé si lo hemos.
Vale.
Al menos.
Para que tengamos.
Vale.
Vamos a poner esto.
Para que cargue rápido.
Vale.
Ta ta ta ta ta.
Vale.
Entonces.
Así se vería bastante más parecido.
Lo que necesitamos.
Uno.
Cambiar los bordes.
Cambiar los paddings.
Vamos con los paddings.
Los paddings son demasiado exagerados.
Esto.
Este padding 20.
Solo tiene que ser 20.
Cuando sea medium.
Pero antes.
Tiene que ser mucho más pequeño.
No sé.
6.
¿Vale?
Y así.
O más.
Un poquito más.
10.
La mitad.
¿Vale?
Luego los bordes.
Con la presencia.
Este borde.
Esto solo tiene que pasar aquí.
¿Vale?
Y ya lo tendríamos.
Y este borde.
Lo que sí que tiene que tener.
Es un borde abajo.
Lo que tenemos que poner.
Es un borde abajo.
¿Vale?
Y ya lo tendríamos.
Aquí es normal.
Porque nos falta el countdown.
Que lo vamos a hacer ahora.
¿Vale?
Y ya lo tendríamos.
El síguelo en directo.
Ni buy.
Síguelo en directo.
Ni buy.
Ni buy.
Eso parece que.
Es exactamente igual.
Presentación.
Ahora sí que me parece a mí.
Que sí que está.
Bastante bien.
Ahora lo que tenemos que hacer.
Es cambiar el orden.
¿Vale?
Cuando es tal.
Tendríamos que poner order.
Order none.
¿No?
Orden none.
¿Vale?
Lo vamos a poner con el orden.
Que vienen por defecto.
Y ahora sí.
Ahora sí.
Si esto lo abrimos aquí en otro sitio.
¿Vale?
Hostia.
Aquí ha quedado.
¿Vale?
Porque esto.
Claro.
Como se están ajustando.
Se está ajustando.
Venga.
Pues otra cosa que tenemos que arreglar.
Venga.
Vamos arreglando.
Vamos arreglando.
No pasa nada.
Vamos arreglando.
Lo que nos falta.
Ahora en móvil.
Está bien.
¿Verdad?
Ahora en móvil está bien.
El VG vamos a utilizar otro.
Este.
El que tiene el Figma.
Es que es como que está.
Que no se ve del todo bien.
¿No?
Así que.
Vamos a hacer otro.
Esto sería por aquí.
Hostia.
La velada.
Pero sale enorme.
¿No?
No sé por qué se ve tan grande.
Si pone que es 800 píxeles.
A ver.
Un momento esto.
Tu tu tu tu tu tu tu.
Aquí.
Si esto es de 800.
A 1072.
1072.
Vale.
Vamos a ajustar esto también.
Para que no salga tan grande.
Vamos a hacer que esto sea de 800 píxeles.
Y esto solo va a aparecer en MD.
¿Vale?
Así que esto lo vamos a poner por aquí.
Esto por acá.
Vamos a ir ajustando el.
Vale.
Que sea como máximo 800 píxeles.
¿Vale?
Perfecto.
Luego.
Ahora tendríamos esto.
Síguelo en directo.
No sé qué.
No sé cuánto.
Vale.
Entonces.
En móvil.
Hostia.
Aquí todavía.
¿Ves?
Que ahí salta esto todavía.
Demasiado.
Tendríamos que quitar lo del flex.
Tendríamos que quitarlo antes.
Aquí lo estoy quitando.
O sea.
En MD.
Pero yo creo que tendría que ser.
Más tarde.
¿No?
Claro.
Lo que pasa es que aquí.
Queda bastante regulinchis.
Queda bastante regulinchis.
A ver.
Que no pasa nada.
Porque este normalmente es como un paso intermedio un poco raro.
Y aquí.
Otra cosa que tendríamos que hacer.
Es que cada article.
Claro.
Aquí.
Para que cada uno tenga su tamaño ideal.
En el Figma.
Este es 448.
¿Qué podríamos hacer?
No sé si hacer.
Porque este 288.
Y este 288.
Podríamos hacer que el del medio sea 448.
¿Vale?
O sea.
Este.
A partir de MD.
Sea 450.
Tampoco hace falta que sea pixel perfect.
Y aquí tendríamos que poner flex 1.
Y flex 1.
¿No?
O sea.
Con esto debería pillar los dos.
El espacio que necesita.
Y ya estaría.
Claro.
Pero queda muy poco espacio para este.
Por ejemplo.
Que no sé si es.
Que yo creo que es.
A lo mejor.
Porque.
Le he puesto demasiado padding.
¿No?
A lo mejor.
Con la presencia.
A ver.
Vamos a mirar un momento esto.
Y ya lo.
Ya lo tenemos.
¿Ves?
Yo creo que es que le he puesto entonces ya demasiado padding.
Que a lo mejor esto ya.
Moviendo un poquito el padding de los lados.
¿Vale?
Padding.
Padding.
Padding block 2 rem.
Ah.
Padding in line.
Perdón.
Padding in line 2 rem.
¿Vale?
Tú tú.
Ya lo tendríamos un poquito así.
Y ya tendría menos padding.
Y ya cabría como se espera.
O.
O este.
Ah.
Coño.
Es que este también está.
Bueno.
A ver.
También.
450.
Es que tiene el tamaño que tenemos ahí.
Lo que pasa es que este no me está cabiendo.
No cabe del todo.
Ah.
Porque claro.
Es que me está haciendo uno más pequeño que el otro.
La madre que lo parió.
La madre que lo parió.
Que la madre que lo parió.
Está haciendo uno más pequeño que el otro.
Por el contenido.
¿Vale?
Básicamente.
Ese es el problema.
Que por el contenido está dejando más espacio uno del otro.
Vale.
Eso es porque el flex.
Claro.
Si le decimos que ocupe cada uno lo suyo.
El tema.
Es que tendría que ser.
Este es 304.
Es 304.
Pero claro.
Entonces este no pilla.
No pilla lo suyo.
Pero si le digo entonces que este.
Pille.
Haga.
MD flex 1.
Entonces tampoco me va a pillar.
Porque necesitamos que sí que haga el grow.
¿No?
Que los dos hagan grow.
Y este.
Claro.
Es que si no.
¿Cómo haríamos?
Con el basis.
¿No?
No.
Pero si lo hago con grid.
Que lo hemos hecho antes.
Con tanto por ciento.
Tampoco quedaría bien.
Tampoco.
Que no con grid.
No quiero hacerlo con grid.
Porque al final lo que me gustaría es que tuviese justamente uno y ya está.
Y al final con el grid.
A ver.
Que lo podríamos hacer con grid.
Lo que pasa.
Claro.
Como he pensado en el ancho.
Los dos pequeños fijos.
Y el del medio en full.
No.
Con grid no.
Bueno.
La que han liado las columnas.
Sí.
Sí.
Sí.
La que han liado en un momento.
A ver.
No pasa nada.
Si es que pensando en esto.
Lo que pasa es que.
¿Cuál es la relación que tiene?
Más o menos.
Aquí.
Si este es 288.
Y este es 448.
Debe ser 448 entre 288.
Uno y medio.
Vale.
Pues ya está.
Lo vamos a hacer así.
No pasa nada.
Grid.
Lo vamos a hacer con grid.
Grid calls.
Vamos a hacerlo con grid.
En un momento.
Es que al final creo que tiene más sentido.
Porque nos lo va a simplificar.
Y al final lo que necesitamos de cada uno.
El Lorde va a funcionar.
Va a seguir funcionando.
No va a haber ningún problema con esto.
Vale.
Vamos a poner aquí por ahora.
Que sean grid.
El call.
Span.
No sé si se puede poner aquí.
Por ejemplo.
Uno FR.
Creo que no.
No sé si esto funciona.
Vamos a probarlo.
Vale.
Y esto aquí.
Vale.
Vale.
Ya veo que esto no funciona así.
Con el call.
Span.
No sé cómo se cuánto.
No pasa nada.
Si no lo que podemos hacer.
Es ponerlo directamente en el padre.
Aquí.
Grid.
Template.
Columns.
Columns.
Sí.
Y podemos poner un FR.
Dos FR.
Claro.
Es que.
No sé si se pueden poner.
No sé si se pueden poner.
Así.
Hostia.
Ahora estoy pensando.
Ahora estoy pensando en esto.
¿Se pueden poner puntos?
La primera vez que utilizo.
Vale.
450, 304 y 304 y 304.
Ahora el único problema es que esto lo tenemos que quitar de aquí.
Esto sería solo en MD.
Vale.
Vale.
Y ahora lo que me faltaría es que quepa.
Claro.
No sé por qué no cabe.
Pero es porque hemos podido hacer, por ejemplo, esto.
Que esto fuera.
Esto lo tenemos que quitar.
Y también tenemos que quitar.
Colespan.
Esto tenemos que quitarlo.
El flex también tenemos que quitarlo.
Todo lo que es flex lo quitaríamos.
Vale.
Flex.
Flex.
Flex.
Flex.
Flex row.
Esto fuera.
Por defecto.
Vamos a hacer grid.
Template.
Columns.
1fr.
Vale.
Al menos en móvil ahora.
No se ve.
O sea, me está ignorando.
Te queda un colespan.
Vale.
Pero creo que no me está pillando el template columns.
Igualmente.
No me lo está pillando.
Yo creo que tiene que tener alguna cosa aquí.
Esto que no lo está pillando.
A ver.
Ah, sí, sí que lo está pillando este.
Vale.
Ahora sí que está.
Hostia, no sé por qué antes no lo ha pillado.
Y aquí también lo está pillando.
No sé por qué se ha quedado pinchado antes alguna cosa.
Vale.
Pues ahora sí que estaría esto bien.
Faltaría todavía ajustar cuando pega el salto.
Porque fijaos aquí que pega esto.
Le falta todavía aquí que este tamaño.
Hay un tamaño ahí que está como a mano o algo.
Que no está centrado esta parte de aquí.
Aquí hay alguna cosa que todavía no está del todo bien.
Pero al menos cuando teníamos que hacer el salto un poquito antes.
Porque si no, no cabe.
O hacerlo más pequeño.
También podría ser.
O sea, podríamos hacer.
Aquí se ve así.
Vale.
Luego aquí.
Cuando ya se hace grande.
Aquí podríamos hacerlo más pequeño.
O sea, podríamos hacer que el P1 o no sé qué.
Este P1.
SM, P1.
Vamos a poner 12.
Esto lo vamos a ajustar un poco.
Vale.
Más o menos lo voy a dejar.
Porque si no, podría estar aquí todo el día ajustando cosillas.
Vale.
Claro.
Esto tiene que ser en el MD.
O sea, esto lo quitamos.
Y en el MD.
Tu, tu, tu, tu, tu, tu.
Vamos a ajustarlo un poco más.
Y LG, 20.
Vale.
Ahora, un poquito menos de padding.
Vale.
Vale.
Y lo que nos faltaría es ajustarlo un poco.
Bueno.
Os lo dejo para que lo hagáis en la PR.
Y ya está.
Lo de la flex.
Lo de que queda flex también.
Esto.
Hay algún.
A ver.
Hay algún flex que tiene sentido que todavía esté.
Porque este tiene sentido que esté.
Porque es interior.
Pero el problema es del otro.
El que nos está dando la murga.
Pero bueno.
Ahí ya tendríamos esto.
Vamos a hacer el countdown.
Para avanzar.
Y tenerlo.
Para poder enviarlo.
Vale.
Que por cierto.
Que por cierto.
Me he comprado un dominio.
Amigos.
Me he comprado un dominio.
En Don Dominio.
Está desentrado el logo de Twitch.
Ah, ¿sí?
Hostia.
Vamos a verlo.
Vamos a verlo.
De hecho aquí.
También esto.
Claro.
Aquí esto.
Le hemos puesto demasiado padding.
Le hemos puesto demasiado padding.
Vamos a poner.
Que esto sea.
NLG.
PX2.
Vale.
Vamos a dejarlo así.
Que tenga un poquito.
Menos de padding.
Vale.
Vale.
Vamos a dejarlo en dos.
Que esté más cerquita.
Esto por aquí.
Aquí sí que está centrado.
Y aquí.
Que está descentrado.
Yo lo veo centrado.
Yo lo veo centrado.
Claro.
Me imagino que dices aquí.
Aquí no es que esté descentrado.
Es que esto faltaría arreglarlo para que se haga más pequeño y que no se rompa.
Porque si no, no cabe.
¿Vale?
Eso es lo que habría que hacer.
Pero es que tendríamos que estar ahí toqueteando un buen rato y creo que vale más la pena.
Que nos pongamos con el countdown que no con el...
Que podemos ajustar porque es una cosa que podéis hacer en un momento en una PR y ya lo tendríamos.
Vamos con el countdown.
Que el countdown básicamente es esta parte de aquí donde es la cuenta atrás mientras estamos haciendo...
Mientras contamos los días para que llegue el 4 de marzo.
¿Vale?
Vamos otra vez.
En este caso vamos a importar el logo que es el Fabicon.
Podemos utilizar el Fabicon.
Si queréis utilizamos el Fabicon.
Que antes me habéis preguntado ¿Por qué no utilizarlo en la imagen?
La vamos a utilizar.
Y utilizamos el Fabicon y así es una cosa que cargamos una sola vez.
Lo cual es interesante.
Logo de la velada.
Porque total, como se tiene que cargar seguro sí o sí al Fabicon, pues ya lo tendríamos por aquí.
¡Ah!
Pero es blanco.
Entonces, ¿ves?
Este es el problema.
Este es el problema de los Fabicons.
Que es que tienen sus cositas.
Vale.
Pues no pasa nada.
Lo vamos a poner aquí.
Vamos a poner la velada.astro.
Y esto lo vamos a poner por acá.
Y le cambiaremos...
Le vamos a quitar este estilo que no tiene mucho sentido.
Y aquí en la clase vamos a utilizar lo que le pasaremos.
Tenemos astro.pro.class.
Y en el fill este vamos a poner el current color.
¿Vale?
Para que recupere el color del texto.
Así que esto, nada.
Nos lo quitamos.
Vamos a importar aquí el logo.
Import.
La velada.
Logo.
From.
Y aquí, pues importamos icons.
La velada.astro.
Y ahora esto.
La velada.
Logo.
Le vamos a poner una clase que sea con el fill del primary.
Y al menos ahora deberíamos ver...
Que me ha ignorado.
Ah, no.
El fill no.
Es el text.
Ahora sí.
Ahora sí.
¿Vale?
Aquí vamos a poner también separación para arriba.
Vamos a poner que sea flex call.
Separaciones por aquí.
Justify center.
¿Vale?
Pues no.
Justify center.
Item center.
Y ahora sí lo tenemos ahí.
Ya tenemos el logo de la velada.
Y aquí vamos a poner el contador.
¿Vale?
El contador que básicamente es la parte de aquí.
Con el 12.01.
A ver.
Para no repetir.
Porque si no vamos a estar repitiendo aquí un montón de contenido.
¿Qué es lo que necesitamos?
Dentro del div vamos a tener aquí un span 0, 0.
Y aquí un span con los días.
¿Vale?
Y aquí de cada uno...
Vale.
Me parece bien que me haga todo el estilo...
Todo el bloque.
Las horas.
Los minutos.
Y los segundos.
Y esto va a ser nuestro contador.
Vamos a estilar un poquito los números.
Esto lo podríamos sacar a un componente.
De hecho, eso os lo dejo por si tenéis tiempo.
Y hacéis una PR para sacarlo todo en componentes.
Vamos a ver.
Esto ahora mismo se verá un poco regulinchis.
Pero bueno.
Al menos.
Más o menos.
¿Qué hacemos primero?
¿La funcionalidad o los estilos?
¿Qué queréis?
A Don Dominio me gustan estas promas a medias.
Bueno.
Pasa nada.
A Don Dominio me gustan estas promas.
Si ya lo hemos puesto...
Mira.
Pues mientras votáis y vais diciendo la funcionalidad.
La funcionalidad.
Vale.
Pues eso.
Que Don Dominio.
Es que tengo un cupón para que lo utilicéis si queréis.
Si no, pues no lo uséis.
No lo queréis.
Pero el tema es que he comprado un dominio para que podamos desbloquear.
Desplegar la web de La Velada.
La web de La Velada la vamos a desplegar en lavelada.dev mientras me dan acceso al dominio.
Porque todavía no me han dado acceso.
Entonces, mientras me dan acceso, vamos a tener un dominio para la versión de previsualización.
Cuando hagamos cambios y tal y todavía no lo queramos que esté directamente en producción.
Y luego tendremos lavelada.es que será el dominio de producción.
¿Vale?
Entonces lo vamos a tener ahí.
Vamos a tener los dos dominios.
Y ese es el dominio que me he comprado.
Lavelada.dev.
Por suerte estaba.
O sea que me lo he podido quedar yo.
Lavelada.dev.
Y el tema que le habréis visto justamente por los comentarios es que si queréis, tenéis la oportunidad con un cupón de conseguir dominio.com o .dev a 7.95.
Y el cupón es midudev24.
Entonces, como siempre, no sé por qué, lavelada dominio.dev.
Siempre que digo cupones, la gente dice, es que a mí no me funciona porque no sé qué, no sé cuánto.
Voy a enseñar cómo funciona el cupón para que veáis que sí que funciona.
Porque es que si no, luego me decís, no funciona.
A ver, cuando ponéis en el carrito un dominio, os aparece ya esta página.
Aquí no tenéis que poner el cupón.
¿Vale?
Porque fijaos que aquí pone añadir código de promoción de Google Registry.
Aquí no es.
Aquí no es.
¿Vale?
Hay que darle a pagar compra.
Y ahí, en pagar compra, voy a hacer el paso porque salen mis datos.
Es que sale mi DNI y todo.
O sea, es bastante bestia esto.
¿Vale?
¿Vale?
Vale.
Creo que ahora no salen mis datos.
Vale.
Creo.
Ok.
Entonces, aquí, hay que ponerlo aquí, código de promoción.
Y ponéis aquí, midudev24.
¿Veis?
Y os hace la oferta.
Tanto para .com como para .dep.
Ahí lo tenéis.
Lo tenéis que hacer ahí.
Os hacen 5 euros de descuentos.
Lo cual no está nada mal.
Se mira el reflejo de tus ojos.
Qué que ver.
Lo podéis hacer con los .com y con los .dep.
Y lo tenéis que hacer en ese punto.
No en el anterior.
En ese punto.
Que mucha gente luego me dice, no es que no me funciona el cupón.
No me funciona el cupón.
Y luego me pasan la imagen y ves ahí.
Y ya me he pillado yo del de...
En Screamcase sí o sí.
Puede ser con el que...
Lo que queráis.
Eres guapo, midudev.
Te quiero.
Gracias, hombre.
Yo también te quiero.
Bueno.
Vamos a ir continuando.
¿Vale?
Vamos a ver si ponemos esto.
Habéis votado la funcionalidad.
Vale.
Pues venga.
La funcionalidad.
Total.
Como ya tenemos todo esto.
Pues lo único que tenemos que hacer es una cuenta atrás con JavaScript.
Para hacer una cuenta atrás.
Primero vamos a hacer.
Vamos a recuperar los segundos.
Y vamos a decir.
¿Cuánto es un minuto?
Pues segundo por 60.
¿Cuánto es una hora?
Pues minuto por 60.
¿Cuánto es un día?
Pues hora por 24.
O sea, estas son las constantes que necesitamos.
Voy a crear una función para inicializar el contador.
Que vamos a llamar justamente aquí abajo.
Y vamos a recuperar el contador.
¿Vale?
El contador lo vamos a poner aquí.
Y lo vamos a poner...
Vamos a ponerle un data date.
¿Vale?
En el date este vamos a tener la fecha que teníamos...
¿Dónde lo hemos utilizado?
En el principal date este.
Aquí.
¿Vale?
Esto lo podríamos sacar en otro sitio.
Pero bueno.
Por ahora vamos a poner aquí.
Lo vamos a poner así.
O lo podemos poner aquí.
Tu, tu, tu.
Timestamp end.
¿Vale?
Esta sería la fecha final.
La fecha final.
¿Vale?
Entonces, ahora que ya tenemos un sitio donde pone data date y ya sabemos dónde tenemos que mostrar cada cosa.
De hecho, otra cosa que vamos a hacer aquí.
Vamos a poner aquí class.
No sé si utilizar class.
Data.
Data hours.
Bueno.
Vamos a poner data hours.
Data hours.
Data.
Estos son hours.
Estos son días.
¿Vale?
Estos serían data minutes.
Y estos serían data seconds.
¿Vale?
Vale.
Entonces, lo primero que tengo que hacer es recuperar el countdown.
El countdown.
Exacto.
Lo vamos a recuperar así.
Del que tenga el data date.
Pues ese es el que vamos a hacer.
Data.
Date.
¿Vale?
Data date.
Bueno.
Es un poco raro.
Si no lo encuentra, pues no hacemos nada.
Punto.
Ya está.
Y vamos a recuperar todo.
Lo de los días.
Que para eso.
Exacto.
Tiramos del countdown.
Y hacemos un query selector.
Y recuperamos.
Data days.
Bueno.
Esto del span lo podemos hacer después.
Bueno.
Lo vamos a hacer.
Aquí.
Directamente.
Ya si recuperamos tanto el primer span.
Vamos a recuperar el primer span.
Esto.
Recuperar el primer span.
O sea, no hay problema.
Vale.
Esto.
Sería hours.
Vamos a recuperar las horas.
Los minutos.
Esto es porque cada segundo lo vamos a tener que ir actualizando.
¿Vale?
Vale.
Pues ya tendríamos todo esto.
Ahora.
Vamos a recuperar la fecha que hemos recuperado de aquí.
Del data date.
Vamos a transformarlo en una fecha.
Date.
Countdown.
Countdown.
Data set.
Date.
Vale.
Bueno.
A ver.
Más que esto.
Vamos a pillar.
Timestamp.
Yo voy a utilizar get attribute.
No sé por qué.
A mí me gusta un poquito más el date attribute.
Data.
Date.
¿Vale?
Y si no tenemos timestamp, nos vamos.
Y si tenemos timestamp, lo vamos a transformar en un número porque el get attribute nos devuelve
una cadena de texto.
Lo transformamos en un número.
Y ahora podemos hacer el get time para que nos devuelva justamente los milisegundos.
¿Vale?
Y ya tendríamos los milisegundos para poder hacer la diferencia.
Así que ahora ya tendríamos la fecha y ya nos faltarían solo los milisegundos.
¿Vale?
Para los milisegundos vamos a tener que crear un intervalo que se ejecute justamente cada
segundo.
Entonces vamos a hacer setInterval y cada segundo que pase, cada second, vamos a ejecutar update
countdown, ¿vale?
El countdown lo vamos a update countdown.
Es una función que cada segundo se va a estar llamando para justamente actualizar nuestro
contador.
Es que esto siempre lo hago con React y me da un poco de rabia porque pienso, bueno, pero
¿para qué lo hago con React?
Si es que al final esto es una tontería y es un momento, son 20 líneas de código.
Entonces, vamos a decir el momento actual.
Y ahora pues hacemos la diferencia.
La diferencia entre la fecha y el ahora.
Ahora con esto ya tenemos básicamente la diferencia de milisegundos entre el momento
actual y la fecha futura.
Pues ahora lo único que necesitamos es en cada uno, en el days inner text, ¿vale?
Esto ha recuperado el span.
Bueno, claro, estoy pensando que también podría esto hacerlo directamente en el span.
Que yo lo he hecho ahí porque no sé por qué lo he hecho, pero total, ¿qué más da?
Y así nos simplifica también el tener que recuperar un span y no se ve el span, ¿no?
Tiene más sentido.
Entonces, soy yo pensando mientras programo.
Así nos quitamos todo esto.
Pum, pum, pum.
Fuera.
Y así ya podríamos hacer inner text.
¿Vale?
¿Qué dice?
Inner text no existe en el tipo element.
Maldito.
TypeScript.
Bueno, a ver.
Si days, si...
¿Cómo es esto?
Days es una instancia de HTML element.
¿Vale?
Ahora sí que...
Vale.
Y ya está.
Y aquí lo que tenemos que hacer es formatear.
A ver, podríamos hacer el mathflor este, que no está mal, y hacer un toString.
Y ahora con esto nos debería decir los días al menos.
¿Ves?
11 días.
Y esto lo tendríamos que repetir con todas las cosas.
Pues, por ejemplo, esto me lo va a hacer Gijacopilot.
Las horas.
Vale.
Pues ya tendríamos las horas.
Y luego tendríamos aquí también, pues podríamos poner los minutos y los segundos.
¿Vale?
Yo este código no me gusta.
Ahora lo voy a cambiar.
Pero ¿veis?
Ya lo tendríamos.
11 días, 23 horas, 8 minutos, 36, 35.
Y cada segundo se va a ir actualizando.
Yo esto lo voy a arreglar un poco.
Voy a poner format time, donde le pasemos el tiempo.
Y esto lo que haga es un mathflor del time, lo convierta en un string y le ponga un path start para que le ponga el 0.
Porque ¿veis el 8 minutos ese que ha quedado un poco raro?
Este format time lo vamos a llamar para todos estos y podemos quitar tu string.
Y así lo formateamos.
Devolvemos esto y ya está.
Y esto tiene que ser un número y ya lo tendríamos.
Y ahora ya quedará justamente con el 0 perfectamente.
Y ahora pues esa es la funcionalidad.
¿Qué os ha parecido?
O sea, tampoco tiene mucha historia, ¿no?
O sea, es básicamente que se ejecute cada segundo.
Es verdad que aquí hay un cálculo que básicamente primero es la diferencia.
La diferencia de tiempo entre los días en milisegundos, que esto lo hemos hecho aquí.
Un segundo son milisegundos.
Son mil milisegundos.
Luego un minuto son 60 segundos, que son 60 mil milisegundos.
Una hora pues son 60 minutos, que son 3.600 segundos.
Segundos, perdón.
Y son tal, ¿no?
Pues esto sería un poco...
Como tenemos el número de milisegundos, que es cada cosa, somos capaces justamente de saber cuántos días faltan justo con la diferencia de milisegundos.
Y el math floor que hemos hecho aquí es para redondear a la baja, ¿vale?
Porque no tiene sentido redondear a la alta.
Lo que estamos haciendo es redondear a la baja.
Así sabemos que la diferencia en milisegundos lo dividimos entre cuántos milisegundos es un día y ya sabemos cuántos días faltan.
Lo redondeamos a la baja y ya lo tenemos.
A ver, es un contador fácil y con JavaScript.
No tiene mucha historia, pero la verdad es que nos salva un poco la vida para hacer esto.
Lo acabo de robar hasta la billetera.
Bueno, la verdad es que queda bonito.
Tampoco es muy complicado.
Y así pues no tenemos que hacer ningún tipo de...
No sé, de utilizar nada.
Nos falta, obviamente, pues todavía esto.
Veo que aquí tiene unos estilos aquí.
Vale, vale, vale.
Pues lo que necesitamos aquí...
A ver, viendo un poco esto, tendríamos que estilar un poco esto.
Esto tiene que ser row.
Tiene un poquito de separación.
Todo es color primario.
Todo lo hace en mayúsculas.
Y todo tiene el semivolt este.
El texto primario ya lo he puesto.
Todo en uppercase.
Esto me da un poco de pena que lo tenemos que repetir, pero bueno, no pasa nada.
A ver, esto tiene que ser un flex call porque es uno encima del otro.
Los números es uno encima del otro.
Entonces pondremos uno arriba y el otro abajo.
Vale, flex call.
Vamos a centrarlo todo para que quede fino.
Y lo que tenemos aquí es una separación.
Yo creo que con dos tendremos suficiente.
Vale, una separación.
Y lo que...
¿Lo que?
64, 64.
Es que todo ocupa 64.
Todo ocupa 64.
64, ¿cuánto es?
15, este.
16.
Ahora veremos si esto cuela.
Y luego, el 00.
O sea, los días, digamos, son bastante grandes.
Yo diría que quizás algo así.
Y vamos a poner que tenga tabular nums.
Para que los números siempre ocupen lo mismo y no de saltos, ¿vale?
Y los días, esto se ve un poquito más pequeño.
Yo diría que es un XS.
Y esto habría que centrarlo.
Y ya lo tendríamos más o menos.
Esto es como quedaría uno de los días.
Ahora, esto...
Claro, esto hay que copiarlo para todos.
Lo podríamos componetizar y tal, pero bueno.
¿Vale?
Y ahora lo que nos faltaría de esto sería copiar al menos esta parte de aquí.
Esto aquí, esto aquí y esto aquí.
Y vale.
Y me falta la parte esta de aquí abajo.
Esta parte de aquí abajo, que sería esta de aquí.
Y más o menos ya lo tendríamos.
Me falta, por lo que veo, hay aquí como unos puntitos.
A ver, que lo veáis.
Me faltan esos puntitos.
A ver, los puntitos los podemos meter en medio, ¿vale?
Básicamente, ponemos aquí el span.
Vamos a poner aquí el puntito.
Podríamos ponerlo como un after,
pero teníamos que jugar con el absolute, seguramente.
Yo creo que con un...
O sea, que aquí ya puede estar bien.
No pasa nada.
Lo que sí que podemos hacer es que no tenga...
O sea, que esto esté oculto para que no se lea,
porque no tiene sentido que esto se lea.
Vamos a poner que esto sea true.
Para que no ponga dos puntos.
Sería un poco raro que el lector dijese estas cosas.
No sé si poner una separación...
Es que, claro, el gap...
Bueno, a ver.
Voy a probarlo y ahora miramos a ver qué hacemos.
Y vamos a poner un XL.
No sé si poner...
Voy a poner esto así.
A ver qué tal.
¿Ves la separación?
Claro, separación entonces tiene que ser más pequeña.
Y esto habría que ponerlo aquí.
Y esto habría que ponerlo aquí.
Y creo que más o menos, ¿no?
No sé si...
Debería ser más pequeño, más grande y tal.
Vale.
Vale.
Pues por ahí va el tema.
¿Vale?
Por ahí va el tema.
Más o menos.
Vale.
Más cositas.
No está mal el fondo.
Pero el fondo es raro porque parece que le falta un poco de definición.
Entonces, he pensado que podríamos hacer una cosa que está muy de moda.
Que es el hecho este de poner y utilizar como un noise.
¿Vale?
Como un ruido así como raro.
Me he pillado esta imagen.
Esta imagen de noise.
Que no sé si se ve.
Pero es como ruido de este que se pone de fondo.
Y como esto se hace en muchos sitios.
Pues he pensado, ostras.
Pues podemos hacer un componente aquí.
Que sea noise.astro.
Le damos una animación para que le dé como un estilo así curioso.
Voy a poner aquí el class.
Esto por aquí.
Y aquí vamos a poner el style.
Y el background image.
Vamos a pillar este noise.
Noise.
Noise.png.
No hace falta aquí que hagamos.
Vamos a poner la animación también.
Keyframes.
Animation.
Animation.
Le he hecho animation, pero voy a llamarle noise.
Que tiene más sentido.
¿Vale?
Noise.2s.infinito.
Para que esto lo haga constantemente.
Entonces.
Por ahora.
Ahora hacemos la animación.
Por ahora lo que quiero.
Es que esto tiene que estar fijo.
Y que esté centrado.
En todos los sitios.
Tiene que estar.
Centrado.
Tiene que estar.
O sea.
Tiene que ocupar todo el espacio.
Más de lo que.
Lo que realmente.
Tenemos ahora mismo en la pantalla.
O sea.
Tiene que ser más grande que la pantalla.
Tiene que ser bastante grande.
¿Vale?
Y luego.
Además.
Tendría que estar.
Voy a ponerlo en el cero.
A ver.
¿Cómo queda esto?
Ah.
Bueno.
Espérate.
Que lo tenemos que utilizar.
Claro.
Si no lo utilizamos.
Si no lo utilizamos.
No.
A ver.
Noise.
Vamos a importar esto.
Import.
Noise.
From.
Barra.
Components.
Pages.
Components.
Noise.
Punto.
Astro.
¿Qué es Bell?
¿Qué es Bell?
Me estás contando.
Vale.
Esto sería un poco la idea.
Pero la idea ahora.
Además.
No sé.
A mí me gusta más este efectillo.
Es un efecto así como un poco.
Una cosita.
Oye.
Gracias Harrison Cano.
Por regalar una sub.
Pues eso.
Ay.
Que he puesto Infinity.
Que lo he puesto mal.
Gracias amigo.
Infinity.
Es en todas.
Es como papel rasgado.
Sí.
Es un poco esa la idea.
De poner un poquito eso.
Y ya está.
Hay que revisar el contador de la fecha regresiva.
A ver.
Tienes razón.
También es una cosa que se puede revisar.
Y ya está.
Ponle Multiply al Mix Blend Mode.
Multiply.
Ah.
Importante.
Esto además tiene que quedar por encima de todo.
También.
Y tenemos que ponerle que no tenga.
Que no.
Que no tenga puntero ni nada.
Pero.
Ahí.
No sé si se ha perdido un poco.
Vale.
Como no se ve mucho.
Voy a darle aquí un poco de contraste.
Un poco bestia.
Vale.
Brightness.
También.
Cuatro.
Igual un poco menos.
Igual no tanto.
Vale.
Hostia.
Que se ve un montón.
Claro.
Yo creo que es por culpa de esto.
O a lo mejor.
Es que me he pasado con esto.
Igual es que me he pasado un poco con esto.
A ver.
Contraste.
O sea.
Se tiene que ver.
Pero tampoco se tiene que ver tanto.
A ver.
Brightness.
150.
Hostia.
Hostia.
Se ve un montón ahora.
A ver.
Vamos a darle ahora el toque este de la animación.
Yo creo que con la animación seguramente veremos.
Y luego lo ajustamos.
No pasa nada.
Lo único que tengo que hacer con la animación.
Básicamente.
Me gusta igual.
Buenísimo.
Estoy ciego.
A ver.
Casi no se ve.
Es casi imperceptible.
La idea es que sea casi imperceptible.
Pero ahí está.
La gracia ahora está en hacer el efectillo de justamente de ruido visual.
¿Vale?
O sea.
Vamos a tener aquí transformar y lo vamos a mover un poquito para un lado o para el otro.
¿Vale?
Empieza en el 0, 0.
Pero cada 10% pues puedes hacer que ahora se mueva un poquito para eso.
5%.
Luego 10% y 5%.
Perfecto.
¿Vale?
Luego.
Esta es la idea.
Me voy a fiar hasta el Hacker Copilot.
A ver los valores que me da.
Pero yo creo que tiene sentido porque básicamente tienen que ser movimientos muy pequeñitos.
¿Vale?
Vale.
Esos son los efectos pequeñitos.
¿Qué parece?
Perfecto.
Perfecto.
Me encanta.
Es justo lo que quería.
Justo lo que quería.
Vale.
No nos preocupemos.
No nos asustemos.
Primero yo creo que tenemos que poner aquí que esto sea repeat.
¿Vale?
Y le voy a poner que el color sea transparente.
A ver un momento.
Vale.
Esto sigue exactamente igual.
Puede ser...
Es que no sé si la hemos liado con alguna cosa.
A ver.
El background image lo he puesto bien.
No sé si el Vixblen este...
No.
A ver.
A ver.
Puede ser que lo esté...
Claro.
Es que el inset cero...
A ver.
Un momento.
Igual lo vamos a tener que mover a otro sitio.
Sí, sí, sí.
Espérate.
Espérate.
Vamos a mover esto.
Yo creo que el problema es donde lo hemos colocado.
O se me está escapando algo.
Primero voy a probar esto.
Vamos a moverlo al top menos un medio.
Vale.
Esto fuera.
El bottom...
Esto fuera.
Ahora.
Ahora sí.
Claro.
O sea, el problema era la posición.
Porque claro.
Se veían trozos.
Claro.
Tiene sentido.
Ahora.
Ahora.
Esta sería un poco la idea.
Yo creo que a lo mejor tendría que ser un poquito más lento.
Que igual es un poquito rápido.
¿No?
Un poco se le va...
Pero esta sería un poco la idea.
Buah.
Claro.
Pero es que si...
Si se hace demasiado lento se ve un poco el patrón.
Pues eso sería un poco la idea.
Ponlo en step.
Es que en step no nota nada ahora.
No.
Pero sí que se ve.
Mirad.
Es como que está hormigueando.
Normal.
Me imagino que no se ve.
Solo tú lo ves en la pantalla.
Claro.
Me imagino que a lo mejor no lo veis.
Sí.
Cuando lo veis en el stream.
Pensad que se puede ver bastante mal.
¿No?
Pero básicamente hay como un hormigueo ahí.
Que se ve un poquito...
Un poco así.
Está bien.
O sea.
La idea es justamente que sea imperceptible.
No que se vea mucho.
Porque si se ve mucho o molesta.
La idea es que sea un poco imperceptible.
¿Sabes?
Que se vea como algo así un poco visual.
Igualmente una idea que tengo que quiero hacer es la semana que viene añadir el tema de añadir de fondo 3GS.
Añadir una cosa que sea como humo, que sea polvo y cosas así.
Eso es lo que me gustaría.
Pero básicamente la idea es que sea como un efecto tele.
Algo así.
Un ring.
Joder.
Un ring.
No veas.
En pantalla grande sí que se ve.
Claro.
Pues algo así.
Pero me gustaría añadir como un efecto humo.
Y que dé un foco y tal.
Eso es lo que me gustaría.
Me lo imaginaba más como el efecto de Cuphead en el inicio.
Bueno.
Era un poco la idea.
Lo que pasa es que casi no se ve por el fondo.
No sé si a lo mejor quitándole el Mix Blend.
A ver.
A ver si así.
No.
Es que más o menos.
O sea.
Es que se ve más o menos igual.
Se ve más o menos igual.
Pero bueno.
Es que era un poco la idea.
Si no.
Igualmente.
A ver.
Podemos intentar añadir el fondo.
Es que el fondo es que lo veo.
El fondo este es que lo veo un poco como poco definido.
Y no sé.
¿Sabéis?
Creo que puede quedar un poco raro.
Claro.
El fondo.
La idea del fondo.
Era justamente lo de la velada del año.
de cómo habían hecho la imagen esta.
La velada del año 4.
La imagen esta.
Esta de aquí.
Pero claro.
En esta imagen veis que el fondo y tal.
Es un poco raro.
Porque al final.
Claro.
No queda muy para allá.
No se ve muy bien.
Y al final puede ser más bien.
¿Veis?
Aquí se ve también este efecto así como granular.
Pero tiene como un efecto también como de polvillo.
Con una iluminación.
Y a lo mejor por ahí es por donde pueden ir los tiros.
Yo creo.
Más que a lo mejor hacer el degradado ese.
¿Se podría poner el reduce motion?
¿No?
Para que no moleste a las personas.
Pues tienes razón.
Hombre.
Tienes razón.
Media.
Reduce motion.
Le quitamos la animación.
Y ya está.
Muy buena idea.
Gracias por comentarlo.
Así que bueno.
Pues ahí tendríamos la primera pre-landing.
Pero bueno.
Todavía nos quedarían cositas.
Cuando te sepamos los boxeadores.
A ver.
Muy pronto vamos a saber más información y tal.
Iremos añadiendo.
Iremos poniendo cosas.
Vamos a desplegarlo a producción.
Obviamente.
Para que lo tengamos.
Es como un tipo mármol.
Sí.
Esa es un poco la idea.
Que sea como un tipo mármol.
Entonces.
Vamos a añadir el proyecto.
Que alguien me decía hoy.
Pero vas a hacer el despliegue y todo a producción.
Lo podemos hacer.
Lo podemos hacer.
Mira.
La web oficial.
Voy a desplegar todo esto.
Tú, tú, tú.
Vale.
Boxeo.
Vamos.
Venga.
Vamos.
Y vamos a poner esto por aquí.
Oye.
Muchas gracias a David.
Que ha hecho todo el diseño.
Y que se lo ha trabajado un montón.
Y que me parece increíble.
Cuando se refleja el navegador.
Se visualizan momentáneamente los playholders.
¿Hay alguna forma de evitar que esto ocurra?
A ver.
Esto se podría evitar.
Lo que comenta.
Es que durante un momento se ve el cero.
Aquí hay dos cosas.
Una.
Se ve el cero.
Porque lo cierto.
Por dos cosas.
Una.
Que nos ha faltado una cosa.
Y es que en el countdown.
Tendríamos que llamar por primera vez a la función.
No solo en el setInterval.
Sino que tendríamos que llamarle por primera vez.
Así va a tardar mucho menos.
¿Ves?
Va a ser instantáneo.
Nada más entrar.
Ya lo va a tener.
Entonces.
Lo primero que podríamos hacer es esto.
Llamarlo por primera vez.
Porque el hecho de que aparezca el cero.
La curly.
Es porque estamos esperando un segundo.
Entonces ahora.
Llamamos primero.
Y luego cada segundo lo vamos haciendo.
¿Vale?
Que eso ha sido error mío.
Que se me ha olvidado hacerlo.
Pero además.
Otras cosas que podríamos hacer es.
Tener la lógica también en el servidor.
Y hacerlo otra vez en cliente.
Cosa que no recomiendo.
Porque no me parece que sea algo tan crítico.
Si no.
Lo que se podría hacer es.
Pues un fade in.
De hecho.
Aquí nada más entrar.
Con la velada del año.
En el giro este.
Por ejemplo.
Lo bueno de tener aquí las clases.
Es que podemos empezar a hacer aquí un fade in.
O un fade in app.
Para que nada más entrar.
Pues vaya haciendo esto.
Que nada más entrar.
Hagamos esto.
Y luego.
Pues jugando un poco más.
Podemos hacer aquí.
Animate fade in.
Con un animate delay.
Esto porque a vosotros os encanta.
Estas cosas.
A mí.
¿Ves?
Presentación.
Y esto mismo.
Lo podemos hacer.
También con la parte del.
De la principal date.
4 de marzo.
No sé qué.
Y ya tendríamos algo así.
¿Vale?
Todavía podríamos hacer alguna cosa más.
Pero bueno.
Está chulo.
Porque así tenemos justamente.
Estamos utilizando la biblioteca.
Que para eso queríamos justamente las animaciones.
No, no.
Esta biblioteca es nuestra.
La hemos hecho nosotros.
La biblioteca de las animaciones.
¿Vale?
Luego le falta la de la velada.
Presentación de la velada del año.
Hostia.
Es verdad.
No sé si.
Bueno.
A ver.
Pone presentación de la velada del año.
O sea.
Realmente lo pone aquí.
Pero se podría poner.
Le comentaré al diseñador.
A ver.
Le comentaré al equipo de la velada igualmente.
Las animaciones.
Las hemos hecho nosotros.
Es un paquete.
Es un plugin que podéis hacer.
Y ahí lo tenéis.
Y hombre.
No ha quedado mal.
¿No?
El hecho de tener esto así.
Le podemos poner un poquito más de delay a este.
Para que aparezca justamente después del otro.
¿No?
Y así aparecerá un poquito más así.
¿Vale?
De que sea uno.
El otro y tal.
Y queda un poquito más.
Más.
Fachero.
Más bonito.
¿Vale?
De que vaya como por partes.
Vamos a hacer el despliegue.
En GitHub.
La velada.
La velada del año landing.
¿Vale?
Hemos hecho ya el repositorio.
A ver si lo encuentro.
Tenemos aquí todo el repositorio con todo el código.
Recordad.
Le podéis dar estrellita.
Ah.
Mira.
Una PR.
Read me para el proyecto.
Joder.
Francisco.
Qué rápido, tío.
Qué rápido.
Muy bien.
Francisco.
Buen trabajo.
Muchas gracias, amigo.
Gracias.
Mira.
Ya ha hecho.
Bueno.
La captura de pantalla.
Ya no ha quedado muy fina.
Pero bueno.
Poco a poco.
Poco a poco.
Ya iremos ajustando.
¿Vale?
Y yo lo que voy a hacer esto.
Vamos a añadir fixes del countdown y animaciones.
¿Vale?
Sincronizamos los cambios.
Seguramente se me va a quejar de que no he hecho el pull.
Vamos a hacer el pull.
¿Vale?
Vamos a hacer con el merge.
No pasa nada.
Hacemos el pull para traernos los cambios.
¿Vale?
Hacemos el merge.
Pusheamos.
P-P-P-P.
Y ya teníamos aquí los cambios.
Y lo que vamos a hacer aquí es...
¿Dónde está Vercel?
¿Dónde está Vercel?
Aquí está el Figma.
Ah, porque lo tenemos por aquí.
Vale.
Venga.
Vamos a desplegar esto a producción.
Y además, vamos a ver si podemos utilizar ya nuestro dominio para ir preparando y que lo podáis probar y verlo en la página y tal.
La velada web oficial, importamos el proyecto, le vamos a dar directamente a Deploy porque ya ha detectado que es un proyecto de astro.
O sea, sin ningún tipo de problema, ningún asunto.
Ya lo sabe.
¿Vale?
Mientras esto, que debe tardar muy poco, voy a arreglar una cosa porque básicamente me gustaría que le diésemos cariño también a todo el tema del SEO.
Entonces, en el índex que había puesto la velada el año 4, no sé qué, vamos a poner evento de boxeo de Ibai Llanos.
¿Vale?
Luego, en el layout, vamos a poner también la canonical.
Importante.
La canonical, lo que le va a decir es cuál es la página web original a la que tiene que ir.
Y vamos a poner que sea lavelada.es.
Voy a mirar si lavelada.es utiliza los tres puntos.
Vale, perfecto.
Vale, pues lavelada.es.
Y además, además de esto, también vamos a añadirle la descripción.
¿Vale?
Porque le he puesto un to-do ahí que es un poquito horrible.
Vamos a poner aquí evento de boxeo aficionado.
Bueno, de boxeo entre streamers y creadores de contenido y contenido.
Organizado por Ibai Llanos.
Ya le daremos más cañita, pero al menos improve SEO.
Al menos tenemos esto.
Tendríamos que hacer el open graph y todo esto.
También lo haremos para que cuando se comparta la URL y tal, pues lo tengamos.
Vale, ya tendríamos esto desplegado.
Nos vamos aquí a settings, domains y vamos a añadir el dominio.
Lavelada.dep.
Por ahora vamos a poner la boleada.dep, que no es la de producción.
Luego la quitaremos porque, bueno, pero al menos la vamos a añadir por ahora.
Y vamos a hacer que sea add lavelada.dep y redireccionar lavelada.dep a 3w.lavelada.dep.
Vale, vamos a hacer este, que es el recomendado total que más da.
Sí, se va a redireccionar.
O sea que ya estaría.
Y una vez que añadimos esto, yo ya tengo configurados los DNS.
Ah, pero todavía esto no está funcando.
Vale, vamos a arreglar esto en un momento.
A ver si nos da tiempo, porque al final esto puede tardar un tiempo en que se cambie totalmente esto.
Vale, vamos a entrar en don dominio.
Voy a mirar un momento esto porque a veces salen datos que no se deberían ver.
Vale, veo que no hay ningún dato raro.
Vale, estoy en el lugar este de don dominio.
Me voy a la zona DNS, ¿vale?
Y aquí en la zona DNS vamos a tener que cambiar la A.
O ponerle una nueva.
A name, ¿vale?
Pues este lo vamos a cambiar.
El A name, vamos a poner este.
Que entiendo que sería este.
No sé si es este.
Es que es A name.
No sé si se puede...
No es válido.
¿Desea eliminar el A name?
Es que no sé el A name este.
Si no, lo añadimos, ¿vale?
Y ya está.
Aquí le ponen la arroba.
Tiene que ir a este.
Le damos a guardar.
Y luego para este, que es el CNAME, no sé qué.
Vamos a ver.
CNAME, CNAME, CNAME, CNAME.
Tres W.
Vale, lo tenemos aquí.
Lo modificamos.
Bueno, lo voy a quitar porque veo que no lo puedo modificar.
Así que lo añadimos.
Lo borramos.
Añadimos una nueva.
El CNAME.
Vale.
Tres W.
Host de destino.
Este de aquí.
No sé si es este punto.
Siempre veo este punto y siempre tengo la duda de si realmente se necesita el punto o no.
Lo voy a poner.
A ver qué tal.
Vale.
Lo malo es que, claro, yo he cambiado...
No sé si esto funcionará porque yo he cambiado...
Antes he cambiado las DNS.
Y a veces tarda...
Como estoy cambiando las DNS, igual a igual no lo pilla.
Entonces, no sé si llevará a pillarlo porque...
No sé si lo cambiará.
Si no, tardará más, pero cambiará.
Eventualmente cambiará.
¿Vale?
Tarda un...
Claro, tarda un rato y tardará un rato en pillarlo y todo esto.
Pero si lo hubiera hecho de otra forma, igual hubiera tardado menos.
Oye, gracias por la RAI, TodoCode.
Muchas gracias, amiga.
Espero que estés súper bien.
Que la hayáis pasado súper bien, hombre, con TodoCode.
Estábamos justamente haciendo la página web de la velada del año.
Y nada, ya hemos dejado aquí.
Lo que hemos hecho algunos cambios lo hemos subido porque estábamos haciendo totalmente de código abierto.
Si queréis contribuir, ya sabéis, podéis dejar una PR.
Aquí, por ahora voy a dejar la URL.
Hemos configurado el dominio, pero puede tardar un ratito todavía en aparecer.
Nada, ya aparecerá y cuando aparezca, pues lo añadiré.
Por ahora podéis ver la página aquí, en lavelada.web.
Lavelada web oficial, Vercel.
¿Vale?
Y entrar por acá.
Y aquí la tenéis.
Seguramente, una cosa que veo es que ha quedado muy grande, ¿no?
Quizás por culpa del zoom, pero me he estado fiándome un poco de los tamaños del Figma.
Puede ser que ajuste un poco los tamaños para que no se vea tan grande.
Que a lo mejor hemos pecado un poco de seguir el Figma exactamente y a lo mejor se ve demasiado grande.
Y creo que en 1920 a lo mejor esto podría ser un poquito más pequeño.
Para que no se vea tan grande nada más entrar.
Que se vea más bien así.
Me gusta más este estilo que no el otro.
Y claro, eso es por culpa de que esto en realidad tiene zoom.
O sea, esto sería así al 100%.
Por lo tanto, claro, tendríamos el logo este.
En lugar de ser full, pues tendría que tener más bien, por ejemplo, pues dependiendo de cada uno de los pasos, pues tendríamos que tener algo así, ¿no?
Yo qué sé.
Algo así.
Luego esto se hará más pequeño.
Algo así.
Más bien algo así.
Algo así me gusta un poquito más.
No sé a vosotros qué os parece.
El monitor 4K se ve bien, ya, pero puede ser demasiado grande, ¿no?
Ahora yo lo veo un poquito mejor.
A lo mejor lo podría hacer un pelín más grande, ¿no?
A 600 píxeles quizá.
Pero yo creo que ya con esto estaría mejor.
Que no tan grande que a lo mejor hace que sea un poquito bola, ¿no?
A ver, 30 píxeles.
No, 30 píxeles que no existe.
¿32?
Vale.
No, 32 tampoco existe.
¡Me cago en la leche!
¡No te lo pegues ahí!
A ver, ¿cuál es el que existe de número?
32 sí que existe.
¿Por qué me engañas?
Sí que existe 32.
¿Por qué no me está haciendo este...?
¿Por qué no me está separando este 32?
A ver, 20, 32...
Esto me está vacilando.
A ver, 48.
A ver, si hace un momento estaba funcionando.
Si esto hace un momento estaba funcionando, ¿por qué ahora no lo está separando?
¿Por qué esto ahora no lo está separando?
Ahora estoy flipando.
Creo que se ha quedado penchado.
Creo que se ha ido...
Porque esto es locajos.
O sea, estoy mirando...
El noise.
No está cargando el noise.
Vale.
Vamos a ver dónde está el noise.
El noise...
Puede ser que no lo haya cargado.
Es verdad que no está cargando el noise en la página web, ¿no?
Vale.
Vamos a ver por qué.
Aquí.
Es verdad, no está cargando el noise.
Vamos a ver por qué.
Y dice que no ha encontrado la página.
Claro, es que encima...
Ojo.
Ah, punto, barra...
Vale, no pasa nada.
No pasa...
Ah, es que he puesto un punto.
La madre que me parió.
Vale, gracias por avisar.
Punto, barra, noise.
Vale.
Pues esto lo arreglamos ahora.
Es que no debería ser con un punto.
Debería ser con una barra.
Justamente.
Entonces...
Vale.
Y el layout este, ¿por qué no me está pillando?
¿Por qué no me está pillando la separación?
Aquí en local.
¿Sabes?
¿Por qué no?
Porque el scroll me estaba jodiendo.
La madre que lo parió.
La madre que lo parió, tío.
La madre que lo parió, tío.
La madre que lo parió.
La madre que lo parió.
Ya me estaba volviendo loco.
Y es que el scroll estaba justo.
Justo.
En el sitio, tío.
No me lo puedo creer.
No me lo puedo creer.
¿Cómo me ha...
La madre que lo parió, tío.
Vale.
Subo estos fixes y a ver si encuentro alguna cosita más, ¿vale?
La madre que me parió.
Pasan las películas, pasan la vida real.
¿Quedó grande ese span?
¿Qué span?
¿Este?
En la presentación de la velada quedó demasiado grande.
Yo creo que está bien, ¿no?
Bueno, ¿cómo lo veis?
El astro deftolvarez te molesta un poquito.
Pero bueno.
Hostia, una cosa estaría guay.
Claro, del Twitch que alguien me ha dicho.
Alguien me ha dicho por ahí.
A ver.
¿Dónde está lo del Twitch?
En principal date.
El Twitch...
No, en principal date.
Está en la info.
El Twitch...
Claro, hemos hecho que sea una imagen.
Esto es lo malo de hacer que sean imágenes.
Pero una cosa que habéis dicho que me parecía muy buena idea
era el hecho de que se podría hacer que cambiase el color.
Que cuando bajes, cambie el color de Twitch.
Y la verdad es que estaría bonito.
Estaría bonito.
Estaría interesante.
Y no es muy difícil.
O sea, que si tenemos aquí los estilos
y aquí vamos a poner que este class sea de Twitch.
Si no recuerdo mal, porque siempre se me olvida,
lo que podríamos hacer con el scroll...
Bueno, lo podemos mirar aquí.
¿Cómo era?
¿Cómo era?
A ver.
Scroll.
Animations.
Midudep.
A ver si me lo explican Midudep.
Gracias, Midudep.
Me parece muy bien.
Buena idea.
Dime que tienes la demo aquí.
No tienes la demo aquí.
Bueno, no pasa nada.
Vale.
Keyframes.
Porque estoy pensando.
¿Se podría hacer con keyframes?
Yo creo que sí.
Con keyframes podríamos hacer show y que el color,
el color, por ejemplo, sea purple.
Claro.
Aquí el tema es...
¿Cómo es el logo de Twitch?
Twitch logo.
Claro, el logo de Twitch es que tendría que ser los bordes.
Entonces, los bordes aquí...
Tan, tan, tan, tan.
Los bordes son 3, 3, 3, 3.
Vale.
Vamos a poner aquí currentColor.
Y aquí vamos a poner también currentColor.
Y vamos a hacer que esto sea del color TextPrimary.
Lo que podríamos hacer aquí es que el color sea del SVG.
El color cambie cuando llegue al 100%.
¿Vale?
Al 100%.
Y esto, yo entiendo que esto ya lo tendríamos así.
O sea, que cambie el color al 100%.
Y solo cambiarían la parte de...
La parte de los bordes.
Entonces.
Entiendo aquí con view...
View Timeline.
No sé si todo esto es necesario.
Pero bueno.
View Timeline.
Timeline.
Le podemos poner el nombre.
TimelineName.
Que este sería...
Image.
A ver.
¿Pero dónde ha pillado ese Image?
Yo, viendo un tutorial mío.
¿Qué os parece esto?
¿Qué os parece esto de hacer un tutorial mío?
Vale.
Esto sería el nombre, básicamente, de Twitch.
El Twitch logo.
¿Vale?
View Timeline.
Aquí le decíamos el axis.
Que básicamente sería el bloque.
Porque en bloque es de arriba abajo.
¿Vale?
Luego, el Animation Timeline es porque la línea del tiempo normalmente de las animaciones es el tiempo.
Pero en este caso lo que queremos es utilizar la línea del tiempo de el scroll.
Así que le tenemos que decir que la línea del tiempo que va a utilizar es la que vamos a utilizar con el View Timeline que hemos creado justamente aquí.
O sea, que este nombre está enlazando con este.
Y ahora, básicamente, le decimos el nombre de la animación que tendría que utilizar.
Que Animation Name sería el de Show.
Podríamos todavía configurarlo un poquito más.
Pero entiendo que con esto, ¿veis?
Podríamos hacer esto.
Que conforme vamos bajando, aparezca y cambie un poquito el color.
Bueno, es un detalle.
¿Vale?
Es un detalle.
Cuando vas haciendo esto, pues aparece esto.
Los servidores DNS que estás usando en el dominio no son los de dominio.
Claro, son los de Vercell.
Son los de Vercell.
Es que he cambiado las DNS antes a las de Vercell.
Lo que pasa es que no se están propagando todavía del todo.
Puede ser que en algunos sitios estén propagadas y en otros no.
Pero estoy utilizando las DNS de Vercell.
Ese es el tema.
Por eso en muchos sitios, pues seguramente lo estará viendo de una forma y en otras en otras.
Por eso he dicho que iba a tardar más y que seguramente a lo mejor no funcionará del todo.
¿Vale?
Pero eventualmente funcionará.
El color es...
Vale, gracias.
Vamos a utilizar el color.
Pero bueno, está interesante.
Ah, mira.
Pues está chulo esto.
Y lo podemos hacer esto, que sea el color blanco.
Que creo que quedará un poquito mejor porque así queda como demasiado apagado.
Pero así.
Ahí quedará así.
Está chulo.
Le da un toque.
Le da un toque.
Podemos hacerlo con algunas cosillas así para que básicamente, pues, llame un poquito la atención.
Y hombre, con el loguito, pues, es un detalle.
¿Vale?
Pues venga.
Vamos allá.
Uy.
Casi.
Add animation for twitch color with scroll.
Y bueno, el usuario que no tenga soporte porque todavía no está soportado en todos los sitios, pues, lo verá parecido.
No lo verá con la imagen.
No lo verá con el color.
Pero lo verá.
O sea, que eso es lo importante.
Así que, ahí lo tenemos.
El reduce motion hace que el noise no tenga animación, al menos en Vivaldi.
Hostia, aparte de la animación, claro, buena idea.
Aparte de la animación es que tendríamos que quitar el background, ¿no?
Aparte de la animación tenemos que poner background image none.
Bueno, a ver.
Tiene sentido, ¿no?
O sea, a lo mejor, si quito la animación, ¿cómo se ve?
No pasa nada que se vea granulado.
No pasa nada, ¿no?
Claro, se ve un poco así demasiado granulado.
Que a lo mejor debería de haberse...
A lo mejor tendríamos que cambiarle un poco más.
Por ahora lo podríamos quitar o podríamos ponerle...
No sé si poner que el contraste del dip...
O la opacidad, a lo mejor, ¿no?
Que sea mucho menor.
Que sea mucho menor la opacidad.
Para que básicamente no moleste tanto.
A ver.
Algo así.
Para que esté más quieto y ya está.
Y no tenga tanta opacidad porque a lo mejor es molesto.
Si está...
Vale.
Pues lo vamos a hacer así.
Le vamos a poner la opacidad.
Y así quedará un poquito sin animación.
Se verá el fondo.
Fix noise when not animated.
¿Vale?
Y así aparecerá un poquito mejor y no se verá tanto, ¿no?
¿Estás colocando el noise o todo?
¿Sual background o no?
Quiero que todos se vean noise.
Creo que todos se vean noise, ¿eh?
Básicamente.
Quiero que todos se vean noise.
Cambiar también el color para que coincida con el logo de Twitch en el hover de síguelo en directo.
Vaya, por Dios.
Vaya, por Dios.
A ver.
El color.
Los puntos.
Síguelo en directo.
¡Ay!
Me ha copiado lo que no es.
Me ha copiado lo que no es.
Venga.
Lo vamos a poner aquí.
De hecho...
Lo vamos a poner ahí, pero lo deberíamos poner aquí también, ¿eh?
Twitch.
Y ponemos el colorcillo este.
Y así podemos añadir aquí el color Twitch.
Twitch.
Y aquí podemos hacer un apply.
Text Twitch.
Y ya está.
Y así nos olvidamos de todo.
Y ya tendrían el mismo color, ¿vale?
Fixed use same color.
¡Hala!
Bueno, amigos.
Lo dejamos por aquí, ¿vale?
Que yo creo que no ha estado mal.
Dos horas y media.
Al final hemos hecho alguna cosita, ¿no?
Podría sacarle un delay para que sea notable el efecto.
Bueno, a ver.
Cualquier cosita...
Hay que arreglar algunas cosas todavía.
No la hemos hecho todavía perfecta.
¿Qué le vamos a hacer?
Pero podéis hacer...
Hostia.
Cuatro PR ya.
La madre.
Mi primera PR...
¡Jo, jo!
El align está deprecado.
No, pero esto...
Esto es del Ritmi y eso yo no sé.
No tengo muy claro.
Ese align está deprecado, pero se utiliza todavía para Ritmi.
Ritmi for Deps.
Tiene la aplicación para...
De los proyectos.
¡Madre mía!
Ritmi punto Deps.
Codebase, no sé qué.
¡Madre mía, madre mía!
¡Madre mía!
Y espero que no me hagáis todo...
Un montón de proyectos...
O sea, PR del Ritmi.
No me hagáis ahí cambios de una frase.
Ese me verá más de una frase.
¡Ah, mira!
Harrison Deps.
Contribuyentes.
Vale.
Con el stack.
Vale.
Venga, vamos a añadirlo.
A ver, ¿qué más?
Siguiente.
Show Date Time according to the user.
En esta PR he usado la maravilla para obtener la zona horaria de usuario
y mostrar la fecha y hora que corresponda.
O sea, que también ha hecho la fecha y hora.
Vale.
Vale.
Bueno, al final además la ha movido abajo,
lo cual es una putada para esto.
Esto lo que molaría también es que pongáis algún...
No sé, que se vea un poquito...
Si se pudiera ver.
Vale.
O sea, veo que es un poco lo mismo.
Para que se vea la fecha y hora.
Hostia, no entiendo muy bien el cambio.
Y mostrar la fecha y hora según el usuario.
Porque para qué está utilizando aquí...
¿Ves?
Aquí el time.
Básicamente lo ha sacado en otro sitio.
El time zone.
GMT.
Date Time Format.
Se usa configuración regional para mostrar la abreviatura de la zona
y no su valor en GMT.
Ah, vale.
A ver.
Vale.
Está interesante esto.
Vale, vale.
Ahora lo entiendo.
Vale.
InnerD y InnerHTML.
Vale.
Bueno, pues mira.
Me parece que está bien resuelta la historia.
Vamos a ver más cositas.
A ver la siguiente.
Add Konami Code.
Vale.
¿Pero qué hace el Konami Code?
Está muy bien el Konami Code, pero...
¿Ves?
Pero este es en las típicas cosas que os digo en las PRs que no tienen sentido, amigos.
Si vais a meter el Konami Code, ¿por qué tenéis que meter una clase container?
Que además la clase container cambia.
Puede cambiar esto.
Y entonces esto es lo que me obliga justamente es a revisar.
Oye, realmente se va a seguir viendo exactamente igual.
Porque container es una clase que es justo de Tailwind que puede tener cambios en el tema de cómo se ve la página.
Entonces, si vas a añadir el Konami Code, ¿por qué tendrías que añadir el container también?
Vale, pero ¿para qué es el Konami Code?
O sea, ¿qué hace?
Una vez que haces el Konami Code, ¿qué aparece?
No aparece nada, ¿no?
Ah, que lo rota.
Vale, vale.
Lo rota.
Lo rota y tal.
Bueno, vale.
Ok, una sorpresa.
Lo rota, lo rota.
Bueno, lo malo es que tienes conflictos.
Y, ¿ves?
Conflictos por tocar el container.
Bueno, está bien.
Está bien.
¡Hostia, otras tres!
Main.
Ring me for depths.
Claro, pero ese...
Ah, eso es que lo he añadido ahora.
Areas hidden true, hidden true.
Claro, aquí faltaría poner el nombre de la PR.
No hace falta...
Ah, lo ha cerrado.
Joder, Facundo.
Facundo.
Bueno, ya iré añadiendo cositas.
Iremos añadiendo más cosas, ¿vale?
Igual hacemos algún efecto con 3GS.
Vamos haciendo más cosas.
Y cuando tengamos los boxeadores, cuando tengamos la información que justamente el 4 de marzo Ibai va a presentar el Teatro Victoria, pues no os preocupéis que haremos la landing definitiva, la página web, donde además vais a poder hacer pronósticos de los boxeadores que creéis que van a ganar, de las boxeadoras también.
Y iremos iterando la página, ¿vale?
Esta es la primera landing que le vamos a hacer justamente para anunciar que la gente sepa qué día se presenta todo lo de la velada para que podamos cambiar.
Y también tendremos que añadir aquí, por supuesto, los patrocinadores, porque tenemos que poner los patrocinadores.
Entonces, mañana tengo una reunión que me van a decir y les voy a pedir, oye, me tienes que decir la lista de patrocinadores, quién va a estar en el evento y todo esto.