¿Qué tal? Bienvenido, bienvenida, espero que estés con tantas ganas como yo.
Ya ves, hoy vengo con la camiseta, ¿eh?
Bueno, es la camiseta de la Kingsleague, pero en realidad sale Infojobs,
que gracias a Infojobs estamos desarrollando la página web.
Entonces, lo primero que os quiero decir, porque seguro que mucha gente ya se lo está preguntando, ¿vale?
Mucha gente me estará diciendo, bueno, ¿qué ha pasado, qué ha pasado con la gente que ibas a contratar?
Bueno, pues a ver, spoiler, ya tenemos a las dos personas.
No se aceptan más candidaturas para esta oferta.
Ya está terminada completamente el proceso de selección de las dos personas.
Y estas dos personas van a ser anunciadas mañana a la una de la tarde, hora peninsular española.
Entonces, ha sido un proceso muy largo, hemos visto miles, miles de perfiles.
Hemos hablado con bastantes, es que no sé si cientos, pero docenas, vamos a decir, ¿vale?
Con docenas de gentes y nos hemos tenido que quedar con dos.
Estas personas ya saben quiénes son y mañana se anuncia a la una del mediodía justamente quiénes son estas dos personas.
Lo siento porque estoy seguro que a todo el mundo, a mucha gente le hacía ilusión,
pero estas dos personas, al final hemos elegido a estas dos personas que creo que la han hecho muy bien, se han defendido fantásticamente y son dos perfiles muy interesantes.
Así que, nada, ya los conoceréis, por supuesto, no se preocupen.
Gracias a todos y a todas los que habéis participado en la pedazo de oferta que ha hecho Infojobs.
Y os voy a decir algo, un spoiler, va, un spoiler para que nadie, para que nadie, nadie, nadie se tenga que sentir mal, ni mucho menos.
Les voy a comentar una cosa.
Mañana, no, mañana no, pero muy pronto, muy pronto, mañana no, mañana no, mañana vamos a estar justamente con la velada.
No, muy pronto vamos a tener más ofertas para trabajar en otros proyectos, ¿vale?
Muy, muy, muy, muy pronto.
Así que, estén atentos, atentas, si ya se han registrado en Infojobs, ya eso lo van a tener bastante trabajado.
Son juniors, las dos personas que hemos pillado son juniors.
Una persona tiene algo de experiencia, un año, no llega mejor a un año, un año o año y poco.
Y la otra persona está estudiando.
O sea, son dos personas que son juniors, ¿eh?
Muy, muy, muy significa mañana no, muy pronto, muy pronto.
Cuando terminemos la velada, se vienen cositas, ¿vale?
Vamos a tener más anuncios de más ofertas, que vamos a estar contratando gente de nuevos proyectos con grandes streamers y creadores de contenidos de grandes eventos que van más allá, ¿vale?
Que esto es solo el principio y que espero y deseo que me acompañéis en este pedazo de camino que va a ser brutal.
Esta semana vamos a estar toda la semana trabajando en la web oficial de La Velada 4.
La Velada 4, que ayer fue la presentación oficial en el Teatro Victoria de Barcelona y se anunciaron cosas brutales, brutales, ¿vale?
Primero, todos los combates, combates de todos los tipos.
Un estilo gráfico muy chulo que, bueno, vamos a intentar a ver hasta dónde llegamos de llevarlo a la web.
Ya os digo que vamos a ir de forma iterativa.
No os asustéis de...
Es que esta es muy sencilla al principio.
Bueno, ya sabéis que lo que vamos a hacer es ir construyéndola y le iremos añadiendo nuevas cosas y nuevos efectos.
Y todo esto ya habéis visto, ¿no?
Con la web que hicimos, la prelanding de La Velada que hicimos, que le fuimos añadiendo pequeñas cositas, que se dibujase el efecto del polvo y todo esto, ¿no?
Poco a poco hemos ido añadiendo cositas.
Pues esto va a ser lo mismo, pero vamos a ir más allá.
Porque esta vez, y luego os comentaré al detalle, vamos a hacer más cosas.
¿Qué más cosas vamos a hacer?
Un sistema de pronósticos, donde la gente va a poder votar sus ganadores favoritos, ¿vale?
Sus favoritos para los combates.
Y va a poder compartir sus votos en Twitter, en las redes sociales.
Y espero que eso va a ser bastante importante, bastante interesante.
Y espero que nos salga bien.
También vamos a tener los detalles de los boxeadores.
También estoy pensando en una selección de los boxeadores como si fuese Street Fighter.
Ya lo veréis, ¿vale?
Ya lo veréis porque va a estar muy chulo.
Pero tenemos que empezar por algo.
Tenemos que empezar por el principio.
Vamos a ir creando la nueva página para que tenga el nuevo logo, el nuevo diseño, los nuevos colores.
Y luego poco a poco iremos moviéndonos.
Y, como sé que le tenéis ganas, también estamos trabajando en el nuevo diseño.
El nuevo diseño...
Van por aquí los tiros.
Todavía no está terminada.
Todavía no está terminada, ¿vale?
Porque, fijaos, esta mañana, esta mañana, me han pasado, nos han pasado los recursos.
Y mi colega David, que ha estado ya trabajando en esto, no le ha dado tiempo casi de nada, ¿eh?
No le ha dado casi tiempo de nada.
Pero, bueno, por aquí van un poco los tiros.
Vamos, se irán cambiando cosas.
Vamos a tener aquí una parte...
Se va a quedar, se queda.
El humillo se queda, se queda porque nos ha gustado, ¿vale?
Nos ha gustado el humillo.
Vamos a poner aquí como un menú arriba, la velada del año.
Aquí vamos a tener un slider para que se aparezcan los combates.
Fijaos aquí que en el slider, pues, aparecerá cada uno de los combates, ¿vale?
Vamos a...
Aquí todavía quedan cosas por trabajar.
Lo iremos añadiendo.
El tema de la presentación.
Este vídeo, esta parte, creo que...
A ver si puede ser.
Hoy la vamos a tener.
La parte de los sponsors.
Seguro que le vamos a intentar dar caña hoy.
Porque, obviamente, es muy importante que los sponsors aparezcan cuanto antes, ¿ok?
Así que lo vamos a poner.
Y el contador, pues, nada, todavía está trabajando con ello, ¿eh?
Así que, nada.
Dark Mode.
Solo va a tener Dark Mode.
Vamos a basarnos solo a tener los colores originales.
¿La fuente de los nombres de los boxeadores es una fuente o un SVG?
Es una fuente.
Es una fuente y la vamos a usar.
Vamos a usar la fuente.
De hecho, aquí lo podéis ver.
¿Veis la fuente aquí, en directo?
Esta fuente la vamos a utilizar.
Así que no os preocupéis, ¿eh?
¿Cuándo compartirás el diseño de Figma?
Bueno, todavía está muy verde.
Está trabajando todavía David en ello.
Y seguramente vamos a pillar algunas ideas para ir avanzando, ¿vale?
Porque los nuevos colores y tal.
El efecto ruido que justamente tiene en muchas cositas.
También lo vamos a añadir.
Vamos a ir viendo, ¿vale?
Está para que se partan la madre con Gozzi.
Sí, hombre.
Sí, a Gozzi.
Me va a costar horrores pegar a Gozzi.
Me costaría horrores, ¿vale?
Bueno, pues, estos son todos los combates que justamente estuvieron anunciando ayer.
El rey de la pista.
Ya sabéis, hay 20 personas.
No sé si eran 20.
10.
10 boxeadores pegándose de hostias.
Es un 1 contra 1.
Van turnando.
Pero bueno, igualmente.
El combate de Viruz vs. Xelao.
Teníamos el 2 contra 2 de mujeres también.
Aquí Guañar vs. La Cobra.
Y empezaron con Carrera vs. Agustín 51.
Bueno, la verdad es que la cosa se puso bastante, bastante tensa.
Especialmente en el 2 contra 2.
Este fue, que estaba la cosa ahí muy, muy chunga.
Viruz vs. Xelao, porque ya desde el año pasado que se tienen ganas.
Y luego yo creo que Joplex y el Mariana a mí me sorprendió mucho cuando al final...
Yo no conozco a nadie, solo a ti y no luchas.
Bueno, no te preocupes.
Si no conocéis a nadie, no os preocupéis.
Yo no lo digo a malas.
Pero yo tampoco conocía casi a nadie.
Estoy muy desconectado y tal.
Y entonces poco a poco, pues sí que es verdad que me tuvieron que ir explicando.
Oye, pues esto, lo otro y tal.
Y la verdad es que se lo agradezco a la gente que me fue explicando.
Ya sí que es verdad que hay gente que empieza a conocer.
Porque ya lo he estado viendo en diferentes eventos y ahora sí que me suenan.
Y yo soy Plex, por ejemplo.
Sí que me sonaba de que era la persona que le había colado en la velada un...
Le había colado un Bad Bunny.
No, es que no me acuerdo ni cómo se llama el cantante.
En la velada.
Y el Mariana, sé que es un streamer también latinoamericano bastante importante.
De estos, algunos creadores son de TikTok que me suenan.
No sé.
Sí, sinceramente hay algunos que entiendo que serán creadores de contenido de mucho tiempo.
Pero a mí me cuesta, a mí me cuesta.
Igualmente.
¿En qué tecnología se va a construir la página?
Bueno, la página obviamente vamos a partir de la base que ya teníamos de la velada de la prelanding.
Porque vamos a querer hacer lo mínimo posible.
Vamos a querer cambiar el estilo y cambiarle al nuevo estilo lo antes posible.
Entonces, vamos a partir de la base.
Ya es de código abierto.
Ya la empezamos el otro día.
Hace un tiempecito.
Y la tenéis aquí.
Tenéis el código totalmente abierto.
¿Cuáles van a ser las tecnologías?
Las tecnologías...
Vamos a seguir con Astro.
Yo lo veo clarísimo.
Creo que tiene todo el sentido del mundo.
Vamos a utilizar, de base de datos, todo lo que es el backend.
Lo vamos a hacer también con Astro porque también se pueden hacer endpoints.
O sea, vamos a hacer la API también ahí.
Para el tema de login, seguramente vamos a utilizar Lucía.
Lucía Auth.
Porque ya lo utilizamos para la página web de los SLAN y nos funcionó bastante bien con Astro.
Así que maravilloso.
Y para el tema de la base de datos, seguramente vamos a utilizar Turso.
¿Por qué?
Uno, porque es el que tiene mejor de calidad-precio replicación en todo el mundo.
Entonces, seguramente vamos a utilizar Turso.
Que al final es SQL.
O sea, no os preocupéis.
Si...
Oh, no, es Turso.
Bueno, es un servicio que vamos a tener SQLite desplegado en diferentes regiones de todo el mundo.
Y esto nos va a permitir, si por lo que sea la gente hace muchos pronósticos,
pues que se va a poder replicar fácilmente y que va a funcionar perfectamente.
¿Vale?
Vamos a seguir con Tailwind.
Eso ya no lo podíamos imaginar para seguir yendo bastante rápido.
Mirad, amigos.
Esto que alguien me dijo, mira, es que ha salido ayer justamente.
Aquí, no sé.
Fijaos, estaba ahí yo en el público.
A ver si se ve.
A ver si se ve.
Creo que sí.
¡Ojo!
¡Ojo!
Ahí estoy, feliz.
Yo me estaba partiendo la caja, ¿eh?
Yo me estaba ahí partiendo la caja.
¡Hostia!
Estaba ahí al lado de los X-Buyers estos.
¡Qué cracks!
¡Qué cracks!
Bueno, pues estaba ahí.
Yo contento ahí grabando un vídeo tranquilamente, ¿eh?
Estaba en la segunda fila.
Yo estaba en la segunda fila ahí súper calladito.
A mí no me conocía nadie.
Era el infiltrado, tío.
Yo era el infiltrado, básicamente.
A mí no me conocía nadie.
Alguna persona sí quiere saludarme, pero estaba bastante bien.
Al lado del champi.
Me de un modo, no sé quiénes son, pero voy a grabar.
No, hombre, pero obviamente no sabía quiénes son, pero sí que entiendo que son grandes de contenido.
Y me gustó bastante la escena que estaba.
Había bastante tensión en el ambiente.
Bueno, de lo que vamos a partir, lo que os decía, del GitHub de la velada, ¿vale?
Lo que tenemos aquí de código abierto totalmente, que es esta web que ya la tenemos justamente desplegada a producción, lavelada.es.
Y esto lo primero que vamos a necesitar es cambiarle los estilos, porque hay que cambiarle las fechas, hay que añadir a los patrocinadores, hay que cambiar el estilo, todo el estilo que tiene.
Vamos a intentar reaprovechar lo máximo posible, pero hay cosas que se van y que vamos a quitar.
Por ejemplo, el cambio este de tema, de oscuro o de claro.
¿Por qué?
Porque, sinceramente, lo que vamos a hacer en este caso es simplemente ofrecer uno.
Vamos a intentar utilizar el estilo que tenemos aquí en la página.
Fijaos, con este verde fosforito, más graffiti y todo esto.
Y vamos a quitar el modo claro.
Lo siento, se os gustaba mucho el modo claro.
Pero creo que tiene sentido porque si todo lo de la velada que están poniendo es claramente oscuro, verde fosforito y tal, pues lo que vamos a hacer es intentar seguir al máximo esto, ¿vale?
Y así pues no tendremos ni que pensar en dos cosas, de que sea claro y tal.
Y además creo que es un estilo que puede quedar regulinchis con el estilo clarito.
Yo creo que en oscuro gana mucho, pero en clarito pues puede no funcionar mucho, ¿vale?
Así que esto va a ser un poco el estilo que vamos a intentar con el nuevo logo este verde fosforito dibujado.
Todo esto lo vamos a hacer hoy poniendo las nuevas fechas y luego aquí tenemos el diseño en el que estamos trabajando justamente ahora.
El diseñador está moviendo las manitas y va haciendo cambios en vivo y en directo, ¿vale?
Vamos a añadirle algunas cositas como por ejemplo esto, lo del vídeo de la presentación, los patrocinadores y poco a poco pues vamos a ir creando.
Y al final, esta semana la idea es tener los detalles de los boxeadores, donde tendréis detalles como su estatura, su peso y todo esto.
Y también los pronósticos, vamos a ver si nos da tiempo este jueves y si no seguiremos la semana que viene, no pasa nada.
Cosas interesantes, ya sea si eres programador o no eres programador, si eres programador vamos a ver una cosa muy interesante que vamos a implementar en la web de la velada,
que son los feature flags. Igual no sabes lo que es, ¿vale? Pero ¿qué es esto?
Los feature flags básicamente es tener una funcionalidad, una funcionalidad que está escondida aunque está desplegada.
¿Esto qué quiere decir? Que vamos a poder hacer despliegues a producción pero teniendo desactivadas partes de la web.
Por ejemplo, el sistema de pronósticos. Efectivamente, son como if.
Pues esto es muy interesante porque este fin de semana, por si no te has enterado, me han intentado funar este fin de semana porque dije el viernes que estaba desplegando a producción en un viernes
y bueno, la gente se ha vuelto loca y no sé qué, no sé cuánto.
Bueno, pues esto es muy interesante porque es uno de los sistemas que se pueden utilizar para desplegar un lunes, un martes, un miércoles o hasta un viernes,
desplegar código sin necesidad de que esté activado y solo activarlo bajo demanda, de forma que lo puedas activar o desactivar fácilmente.
Esto es una de las cosas que queremos hacer porque justamente me parece que tiene súper sentido.
Así podremos desplegar mientras lo tengamos desactivado o lo podríamos activar para ciertos usuarios, que también puede ser bastante interesante, ¿vale?
Solo gente sin test no despliega los viernes. Bueno, a ver, yo entiendo que haya gente que no despliegue los viernes.
Es normal, ¿eh? Que haya gente que no despliegue los viernes, pero que al final también hay empresas que despliegan los viernes y es bastante interesante.
¿Cómo se llama el servicio? Bueno, no sé el servicio que vamos a utilizar todavía, pero hay diferentes servicios.
Está el de Optimizely Darkly, creo que se llama, Launched Darkly, puede ser este. Este, este está muy chulo.
La verdad, hay otro que es Optimizely o Progressive Rollout. Este está muy interesante porque justamente lo que puedes hacer es indicarle el tanto por ciento que quieres que vean los usuarios,
o sea, ¿cuántos usuarios tienen que ver la funcionalidad? ¿Veis? Puedes decir, bueno, el 62% de los usuarios quiero que lo tengan desactivado y el otro que lo tengan tal.
Y eso está bastante chulo porque justamente lo que hace es que tú puedas desplegar un código, pero activarlo o desactivarlo según lo que tú quieras.
Entonces, es bastante interesante. Vamos a hacer cositas.
Primero, os voy a crear un poquito todo lo que queremos hacer y todo a lo mejor lo que iremos añadiendo.
Voy a crear un archivo todo donde vamos a poner el desarrollo de la web oficial de la velada 4.
Amigos, todavía no me lo creo. Se me pone la piel como escarpias el hecho de pensar que realmente lo hemos logrado.
Me parece increíble. Me parece increíble que estemos haciendo esto aquí en vivo en directo.
Pues desarrollo de la web oficial de la velada. Lo primero que vamos a hacer es adaptar al nuevo diseño y los nuevos colores.
Actualizar las fechas y la información más básica. Luego vamos a añadir el apartado de los sponsors.
Importante. Añadir el apartado de el vídeo de presentación.
¿Vale? Ahora, para los nuevos colores, lo primero que vamos a hacer aquí es quitar la posibilidad de cambiar el theme.
El dark light. ¿Vale? Eso es lo primero.
Usar el nuevo logo grande y quitar algunos efectillos.
¿Vale? Y eso es por donde vamos a empezar.
Así que lo primero que vamos a necesitar es quitar todo el tema del theme, el toggle este que teníamos.
Para que básicamente nos podamos olvidar de ello.
Y así no nos tenemos que preocupar.
Vamos a tener que cambiar algunas cosas, ¿vale? Que ya habíamos hecho.
Pero bueno. Primero en el footer.
En el footer voy a levantar el entorno de desarrollo.
¿Vale?
npm run dev y levantamos el entorno de desarrollo.
Se pone en el puerto 4.3.2.1 y así despliegue.
Vale. Aquí tenemos esto. ¿Veis este botoncito? Esto lo que hace es que podamos cambiar modo claro, modo oscuro.
Esto definitivamente se va, ¿vale? Se va.
Así que lo vamos a petar.
El theme toggle lo vamos a quitar.
Y bueno, también podemos eliminar el componente porque sinceramente no es muy útil tener el componente por ahí tirado.
Y al final nos va a generar ruido.
Lo vamos a quitar en este caso.
Así que fuera.
Y también todos los iconitos estos que teníamos del sol y la luna.
Así que en icons, que tenemos por aquí, icons, vamos a eliminar tanto el sol como la luna.
¿Vale?
Por ahora vamos a ver que esto no haya petado nada.
Perfecto.
Ahora tenemos que quitar más cosas.
Por ejemplo, en el layout teníamos aquí un pequeño script.
Este que nos detectaba si era modo claro o oscuro.
Pues esto fuera.
No lo vamos a necesitar, ¿vale?
Y también en la configuración de Tailwind teníamos el dark mode que era con una clase.
Así que esto fuera.
Y ahora, si entramos otra vez, ya nos está saliendo el modo claro.
Ya no nos sale el oscuro, ni lo está detectando, ni nada.
Ahora bien, aquí en el layout teníamos ya algunos colores.
¿Veis que ponía color primary?
Y aquí tenemos el modo dark.
El modo dark, pues como veis, será más curito y tal.
Pues esto es el que vamos a utilizar ahora por defecto, ¿vale?
Y así quitamos este, este, este y este.
Y así solo utilizamos el dark que tenemos por aquí.
¿Vale?
Nos vamos a enfocar solo en el dark.
Y así, desde esto, será mucho más fácil que vayamos tirando.
¿Vale?
Muy bien.
Pues al menos ya solo tenemos el modo dark.
Nos podemos olvidar un poco del modo claro.
Como tal, voy a buscar...
Vale, que no tengamos ningún punto dark por ahí.
Así que ya tenemos nuestra primera tarea hecha.
¿Vale?
Vamos a ir haciendo por tareas.
Que si no, hay que hacer muchas cositas.
Así que, primera tarea.
Remove theme toggle as we are not going to use it.
¿Ok?
Mira, antes de hacer esto, voy a hacer una cosa.
Voy a crear una...
Voy a crear una rama.
Para eso utilizamos git switch.
Y con el menos c, vamos a crear la rama y nos va a cambiar a la rama.
Lo cual, dos por uno.
Bueno, pues vamos a crear new colors and style.
¿Vale?
And info.
New colors, style and info.
¿Vale?
Ahí lo tenemos.
Y ahora sí, vamos a hacer el remove.
Ta, ta, ta.
Vale.
Pues ya teníamos este.
Vamos a pushear.
Y al menos así, pues iremos teniendo una PR.
Por aquí.
Voy a crear la PR.
Hoy, hoy, ahora.
Mirad.
¿Alguna vez os he explicado sobre el layout shift?
¿Verdad?
¿Alguna vez os he dicho, hay un layout shift no sé qué, no sé cuánto?
Pues mirad, aquí tenéis un layout shift bastante claro.
Mirad, este layout shift.
¿Veis que aquí, pum, veis que cambia todo el layout?
Pues ahí lo tenéis, ¿eh?
Hace lo mismo que git checkout menos B.
Eso es que no me sigues, ToolCasby, por Twitter, ¿eh?
El otro día, justamente en Twitter, lo explicaba.
Que tenéis ahora el git checkout, el comando git checkout sigue funcionando sin problema,
pero tenéis desde la versión 2.23, dos comandos nuevos, que la idea es que hagas solo una cosa en concreto.
Es que el problema de git checkout es que hace demasiadas cosas y la puedes liar muy parda.
La puedes liar bastante.
Bueno, pues lo que tienes con el git switch es que es para cambiar de rama o para crear una nueva rama y cambiar a ella.
Y luego tendrías el git restore para restaurar el archivo.
Entonces, git checkout es el comando más antiguo que sigue funcionando, pero que no cumplía con la filosofía Unix,
que es que un comando hace una cosa muy bien y el git checkout hacía demasiadas cosas.
Entonces, por eso en git lo han añadido justamente, ¿vale?
Hola, Amidu.
Hola.
Quería saber si ya habías hablado del tema de que vas a venir a Colombia, Medellín.
Y si no, ¿me podrías dar un poco de información?
Sí, te puedo dar.
¿Cómo te va a ser?
¿Si toca comprar las entradas o es algún evento open?
Oye, pues mira, aquí es...
No sé si...
Ah, pensaba por un momento que ya está.
Mira, estoy por aquí.
El 25 y 26 de octubre en la ciudad de Medellín.
En CityGS.
Todavía no han salido las entradas.
Saldrán pronto, espero.
Y ahí voy a estar.
No sé la hora, no sé exactamente el día.
Me imagino que sea el 25 a las 9 porque me dijeron que iba a ser la keynote.
Así que eso es todo lo que te puedo decir.
No sé más.
No sé ni cuánto va a costar, ni cuándo salen las entradas y tal.
Pero si estás atento, pues seguro que te vas a enterar.
Y yo os avisaré cuando tenga más información.
Así que no os preocupéis, ¿vale?
Venga, más cositas.
Guau, qué bonito.
Este, me gusta mucho el logo este dibujado de la velada.
Me encanta.
De hecho, lo voy a descargar ya.
Lo voy a descargar ya.
Y os voy a explicar un poco, a ver si soy capaz de lo que quiero hacer.
A ver, cositas que quiero hacer.
Obviamente, vamos a tener que quitar,
como lo que queremos es actualizar la página web ahora lo antes posible
para tener la nueva información, porque esta información es antigua,
lo que vamos a hacer también es quitar,
actualizar fecha, información básica,
a tal no enseño.
Vale, esto vamos a hacer, voy a hacerlo así.
Hecho, ¿vale?
Vamos a hacerlo así.
Hecho.
Usar nuevo logo.
Vale, esto no lo hemos hecho.
Vamos a ocultar secciones que por ahora no necesitamos.
Nos vamos al index.
Secciones que por ahora no necesitamos o que no son tan interesantes.
El countdown, que lo adaptaremos.
¿Vale?
El footer sí que necesitamos.
El Konami Code lo podemos dejar.
Si le das, por si no lo sabíais, arriba, arriba, abajo, abajo,
derecha, izquierda, derecha, izquierda, BA.
Ah, no.
Arriba, arriba, abajo, abajo.
Izquierda, derecha, izquierda, derecha, BA.
Ahora.
Es un truquito.
Es un truquito.
Ya pondremos algo más chulo.
Ya veréis.
Entonces, el principal date, que es esto.
Esto sí que lo vamos a querer porque lo vamos a modificar.
La info tampoco la necesitamos por ahora.
Y al menos así vamos a ir partiendo de esto.
¿Vale?
Vale.
Entonces, vamos a mejorar el giro porque el giro es, digamos,
el que tenemos la parte de arriba.
En la parte de arriba ya no necesitamos lo de la presentación
porque no es la presentación.
Así que vamos a quitar esto de presentación.
Ya se acabó la presentación.
¿Ok?
Y en el giro logo vamos a actualizarlo por uno nuevo.
Pero vamos a hacer además, porque es un poquito diferente.
Es un poquito diferente.
No es exactamente el mismo, aunque lo parezca.
Es muy parecido.
Es muy parecido.
Pero no es exactamente el mismo.
Y además, como tiene un efecto...
A ver, yo creo que se podría dejar.
Porque no sé si es exactamente el mismo.
Igual sé que es el mismo.
No sé.
No sé si está más doblada el 4.
No lo sé.
Vamos a dejarlo por ahora y a ver cómo va quedando.
A ver.
Vamos a quitar también por ahora el smoke que habíamos puesto por aquí,
el efecto humo, para que se note más cómo está quedando.
¿Vale?
Ok.
Ok.
Luego le pondremos el efecto humillo ese.
Vale.
Entonces, el logo todavía no lo vamos a hacer así con todos los menús y tal,
porque no tenemos las páginas.
Ahora mismo lo único que queremos es hacer un poco el efectillo que tiene.
Entonces, nos vamos a fijar en esta parte que tiene por aquí.
¿Veis esta parte que tiene aquí?
Que tiene Twitch, la velada, no sé qué.
Y la parte de arriba le vamos a pegar un poco esta parte de aquí.
¿Por qué?
Porque creo que tiene sentido.
Además, así ya nos ponemos a configurar la fuente también,
que está bastante chula.
Y la fuente se llama Atomic Font.
Ah, no me acuerdo.
Atomic, no, Atomic qué.
Vaya.
Ah, es esta.
Es esta.
Atomic Font.
Esta es la fuente.
Es una fuente que mucha gente decía,
¿Es una fuente?
¿Es un SVG?
¿Son imágenes?
Bueno, pues es una fuente.
De hecho, lo podemos mirar aquí.
Si aquí, pues por lo que sea, ponéis Twitch.tv.ivai, ¿vale?
Pues aquí veréis que esta fuente que veis aquí es justamente la misma fuente que tenemos aquí,
solo que está con un poquito de rotación o de skew.
Luego lo miraremos a ver qué es exactamente.
Así que esta fuente la vamos a necesitar.
Ahora bien, esta fuente, amigos, es de pago.
Esta fuente cuesta dinero.
Cuesta dinero, tiene sentido.
Obviamente nosotros tenemos, sin ningún problema,
tenemos ya la licencia para utilizarla en la web y obviamente también la tenemos en diferente cartelería.
Así que si la queréis utilizar, pues que penséis que la tenéis que pagar, ¿vale?
Si no, pues buscáis donde vosotros queráis.
Pero si no, ahí la tenéis, ¿vale?
Es de pago en diferentes sitios.
A lo mejor en algún sitio suena un poquito más barato.
Ojo.
Reciente me cambié a mi primer trabajo full remote.
Y por fin tengo tiempo para practicar deporte.
Box.
Pasar más tiempo con mi familia.
Y hasta ahora me toca verte en un live.
Besito, besito para Midu.
Menor que tres, menor que tres, menor que tres.
Besito para ti, Ángele.
Muchas gracias, amigo.
Muchas gracias.
Vale, pues vamos a continuar y a darle cañita por aquí.
Vale, me dicen por aquí que...
Bueno, a ver, se parece mucho.
Tampoco va a pasar nada.
Una cosa, para hacer el efecto, para hacer el efecto este, porque si os fijáis tiene un efecto como brillo por detrás, el tema de la velada.
Y además por detrás está la imagen esta.
Entonces vamos a descargar la imagen, ¿vale?
Vamos a descargar la imagen que aquí sí que la tenemos.
Esta de aquí.
Voy a ver si soy capaz de exportarla.
Oye, esto está interesante que tengamos aquí el colorcillo este.
Este colorcillo me lo voy a copiar ya.
Porque luego seguramente lo vamos a necesitar.
Y así ya color verde fosforito.
Seguramente luego lo vamos a necesitar, ¿vale?
Entonces voy a descargar, vamos a exportar por aquí.
No sé si lo veréis.
Pero se pueden exportar aquí.
Mira, aquí.
Le podéis dar a exportar.
Y podéis exportar una imagen.
Quiero pensar que ahora esta imagen pues quedará bien, ¿vale?
Porque hay veces que las imágenes quedan un poco...
Vale, yo creo que sí, que queda bien, ¿sabes?
No creo que...
Y que me lo haya...
Creo, creo, quiero pensar que es transparente.
Ahora lo veremos, ¿vale?
Si no ahora lo arreglaremos, ¿vale?
Vamos a poner aquí en public.
Me voy a copiar esto por aquí.
Y vamos a poner...
Sí, es transparente.
Y ahí ya tiene el brillito.
O sea, ya tiene el brillo.
O sea, buenísimo.
Drone X o...
Drone X logo, ¿vale?
Vamos a poner el logo este.
Y aquí ya vamos a hacer una cosa.
Vamos a poner un div con una clase relativa.
Y vamos a tener que hacer algunas cositas aquí por detrás.
Vamos a poner aquí una imagen que sea absoluta, que esté centrada, que esté por detrás, ¿vale?
Y lo centramos todo.
Vamos a ponerle...
Ahora esto lo ajustaremos.
El source.
Vamos a decir que esto sea barra...
¿Dónde lo hemos puesto?
En public.
No sé si poner aquí una image.
Vamos a poner image.
Porque veo que se nos están mezclando aquí un montón de cosas ya.
Y seguramente sería buena idea que lo tengamos mejor puesto.
¿Vale?
Así que vamos a poner image barra.
Y aquí sí.
Vamos a poner el drone.
Drone X logo.png.
Y aquí puede ser logo dibujado a mano de la velada del año 4.
¿Vale?
Esto por aquí.
Esto por acá.
Vale.
El giro logo.
El giro logo.
Vale.
Vamos a tener dos.
Como veis tenemos dos.
Uno va a ser el que quede por delante.
Y el otro lo que vamos a hacer es que sea un absolute.
Que también tenga un inset 0.
Que quede por detrás.
Y lo que vamos a hacerle para que quede como...
Como si fuese el brillo.
Porque claro.
Pensad que esto es un SVG.
No le podemos poner un text shadow.
Le podríamos poner un box shadow.
Pero el box shadow no queda exactamente por donde va el trazo del SVG.
Por lo tanto una cosa que podemos hacer.
Que es un poco pirata.
¿Vale?
Pero una cosa que podemos hacer es.
Aprovechando que podemos ponerle el color que queramos al SVG.
Podemos ponerle el color este del foforito.
Que ahora veremos como queda.
¿Vale?
Y le podemos poner un blur.
Entonces como quedará por detrás.
Lo que deberíamos conseguir.
Sería una cosa así.
¿Vale?
Ahora le cambiaremos.
Le quitaremos a lo mejor un poquito de esto.
¿No?
Porque a lo mejor es demasiado fuerte.
Pero lo interesante.
De hecho podremos quitar un poco así.
¿Vale?
Le vamos a quitar también esa animación.
Esa animación ya no la vamos a tener.
Así que vamos al giro loco.
Tu, tu, tu, tu, tu.
Y vamos a quitar todo este tema de la animación esta.
Ta, ta, ta.
Y aquí este draft stroke.
Todo esto tampoco lo vamos a necesitar.
Porque total.
Esto tampoco lo vamos a necesitar.
Porque total.
¿Vale?
Y ahora vámonos aquí.
Ah, hostia.
Me ha añadido aquí un primary.
No sé por qué.
Vamos a poner 20.
¿Vale?
Vale.
Y no sé si lo notáis.
Pero ¿veis que se ve ahí como un efecto halo?
¿Veis ahí esa cosa?
Pues el tema.
¿Cómo lo hemos podido hacer?
Lo que hemos hecho es como poner el mismo SVG dos veces.
Esto se podría hacer de otra forma.
¿No?
Para reutilizar el SVG.
Porque a lo mejor es un SVG muy tocho.
Lo que podríamos hacer es utilizar el sprite.
¿Vale?
Para que lo veáis en vuestras casas.
Que a lo mejor en vídeo no se ve mucho.
¿Veis que aquí se nota?
Porque lo he puesto al 100%.
Es bastante bestia.
Pero claro.
No es al 100%.
Si lo veis aquí.
Se nota más bien poquito.
Por no decir que no se nota nada.
O sea.
Se nota en el A.
Sí que se nota un poco.
De hecho se nota como más blanco que verde.
O sea.
Que a lo mejor tendríamos que ponerlo más blanco que verde.
Porque aquí está como muy verde.
Así que lo que podemos hacer también sería más bien...
Hostia.
Qué rabia.
Ah, sí.
Sí que se puede.
Vale, vale.
Que pensaba que no se podía...
Vale.
No sé.
A lo mejor podríamos hacer algo más bien así.
Porque parece que es más blanco que verde.
Y a lo mejor ponerle un poquito así.
Un poquito menos...
Menos bestia.
¿Veis?
Ahora se nota ese alillo.
Que es un poco lo que tiene aquí.
Que tiene como un halo.
Pero que no es tan bestia.
Y es el verde este lo que lo está sosteniendo.
Ahora.
La X esa que queda por detrás.
Lo que podemos hacer es hacerla como más grande.
A ver.
Si pongo aquí un size 300.
O no sé si ponerlo más grande.
350.
No.
Size.
No.
Porque...
Vale.
Yo creo que más grande.
Porque si os fijáis...
Si os fijáis...
Si nos fijamos un poquito aquí en el estilo.
La X supera el A.
Así que...
Tiene que ser más grande.
Tiene que ser más grande.
¡Joño!
Más grande.
Más grande o hay un...
Espérate.
Porque aquí...
Aquí hay algo ya que no...
¿No?
O sea, aquí ya...
Esto...
Ya le hemos puesto...
Me imagino que hay un límite.
¿No?
Me imagino que hay un límite.
Por algún lado.
Este es VG.
¡Oh!
Que no me lo está pillando.
¡Ah!
¡Coño!
Es que he puesto width y es con W.
Perdón, ¿eh?
Ah, pues tampoco.
Me ha dejado...
Me ha dejado tirado.
Vale.
¡Tatatá!
Wid...
600 píxeles.
¡Coño!
¡Coño!
Porque no me lo está pillando.
¡Coño!
¡Coño!
A ver...
¡Coño!
¡Coño!
Porque veis que...
¡Ah!
Aquí sí que lo está pillando.
No, pero no me lo está...
No me está pillando más.
¿Por qué?
Porque esto tiene un max width.
Esto tiene un max width.
Esto, esta image, ya tiene esto aquí.
A ver, vamos a poner que sea 500 con el width auto.
500 píxeles.
¡Tututututututu!
Claro, pero llega un momento que como es más grande que el...
¿Ves?
Que se estira.
No, eso no lo queremos.
Eso no lo queremos.
De hecho, vamos a ver el aspect ratio que tiene esto.
Lo que vamos a tener que hacer es que este seguramente tenía en algún sitio un max width.
A ver, lo tendríamos...
¿Dónde tenemos el max width?
Aquí no.
Aquí no.
Vale.
En este div parece como que tiene el max width.
No lo sé.
No sé por qué tiene aquí.
En el div de arriba.
No se podría hacer un transform scale.
Se podría hacer, pero lo tendríamos...
Sería un poco más pirata.
A ver, si a las malas lo hacemos, ¿eh?
A las malas lo hacemos y no pasa nada.
Lo que pasa es que sería un poco más pirata.
Me hubiera gustado más hacerlo exactamente...
Ay, mira, de hecho...
De hecho...
Ah, he quitado el inset cero.
Vale.
De hecho, tampoco me lo está haciendo, ¿verdad?
Ahora sí.
Bueno, sería algo así.
Ahora, el tema es que obviamente así queda como demasiado.
Como que se ve demasiado.
Y es que si os fijáis aquí, hay dos cositas.
Uno, que ahí en el medio tiene como una sombra que hace que se vea mejor.
Porque es que así queda raro.
Queda como muy, muy raro.
Entonces, cositas que he tenido que cambiar.
Uno, el fondo es demasiado claro y es mucho más oscuro.
Así que el fondo, por ahora, vamos a ponerle una cosa así muy bestia.
Luego lo arreglaremos un poco con el ruido.
Y luego aquí en medio, que se ve demasiado la rayita esta.
Lo que vamos a hacer en el giro logo es...
No, en el giro.
Es que...
A ver, podríamos cambiarle a este un poco, un poco la opacidad.
Pero creo que vamos a probar primero en ponerle esa sombra.
Para la sombra, a ver, podríamos hacer diferentes cosas.
Pero yo creo que lo más fácil es que directamente pongamos ahí en medio.
Porque aquí es lo que parece que tiene como una bola que hace sombra y que simula que es la sombra de la velada.
Entonces, así hace ese efecto como que queda por detrás.
Así que vamos a hacer lo mismo.
Vamos a intentar poner aquí una sombra que esté aquí centrada.
Le ponemos que sean 400 píxeles.
Y con esto lo podríamos redondear todavía.
Claro, redondeamos con el full.
Lo redondeamos con el full.
Y hacemos el blur.
Le hacemos que tenga un blur XL con un poquito de opacidad.
Y así vamos a ver cómo quedaría un poquito el asunto.
Esta sería un poco la idea.
Igual un poquito menos de blur.
O sea, un poco más de...
Menos de opacidad.
O no.
Algo así.
Y esta sería un poco la idea como la tienen justamente ellos aquí.
Esta sería un poco la idea de cómo la tienen.
Nos faltaría el Twitch Ibai este.
Y así vamos a cargar la fuente que vamos a necesitar nosotros también.
De hecho, esta fuente la podemos poner aquí.
Podemos poner aquí Twitch barra Ibai.
Y aquí vamos a cargar la nueva fuente, que es la fuente esta de...
No sé si llamarle Atomic o le llamamos de alguna forma la fuente.
¿Qué os parece?
La X es un toque más grande.
Fíjate que colisiona con la V.
Bueno, a ver.
No lo quiero hacer tampoco Pixel Perfect ahora.
¿Vale?
Porque si no, vamos a estar ahí todo el día.
Y al final vamos a tener tiempo.
¿Vale?
Es un poco más grande.
Y la D, esto lo atraviesa...
Bueno, tampoco mucho más grande, ¿eh?
Es un pelín más grande, pero tampoco mucho más, ¿eh?
Así que...
A ver, vamos a poner esto un poquito más.
No sé si pone aquí esto el blur un poco más.
¿Vale?
Y decías que era un pelín más grande.
¿Vale?
160.
Creo que de 150 ya salta.
O sea, que no hay.
Así que podríamos poner a lo mejor 175.
No sé si...
175.
¡Hostia!
175, pero creo que se le ha ido ahí.
Vale.
Ahora sí que estaría, ¿no?
Tocando la V.
¿Sí?
Ahora.
Ahí lo tienes.
Bueno, pues la Atomic.
Yo ya tengo la fuente de la Atomic.
Ya me la he descargado con todo el tema de licencias y tal.
Y la tengo por aquí descargada.
Así que me la voy a traer a una carpeta llamada Fonts.
Y me voy a traer la Atomic.
Así que vamos a darle aquí.
Atomic, Fonts.
¿Vale?
Perfecto.
Ya la tenemos ahí, pero necesitamos todavía cargarla.
Para cargar una fuente, claro, en este caso es un caso especial.
Si fuese una fuente de estas que hay en Google Fonts, que hay en diferentes sitios,
entonces lo que habríamos hecho es lo que hicimos el otro día.
¿Vale?
El otro día lo que hicimos es importarla de Font Source,
que es básicamente una dependencia muy chula, que tienes todas las fuentes disponibles,
la importas y ya puedes utilizar la fuente.
Súper fácil, súper práctico, súper rápido y maravilloso.
Pero en este caso no la tenemos así.
No podemos importarla y ya está.
Sino que la hemos tenido que descargar y la vamos a tener que utilizar así.
Y aquí la tenemos.
¿Vale?
Para hacerlo así lo tenemos que hacer a mano con CSS, que tampoco pasa nada,
que así pues practicamos también.
Y tenemos que utilizar el Font Face.
Así que en los estilos que sean globales y que afecten a toda nuestra página,
vamos a añadir aquí el Font Face y le decimos que queremos el Font Family Atomic.
Y le decimos dónde está nuestra fuente.
Pues nada, en barra fonts, barra atomic punto...
Uf, uf.
Me encanta el formato guf porque parece que te lo está diciendo un perro.
Format, ¿vale?
Y aquí le ponemos el WAPTOS.
Con esto ya, a partir de ahora, vamos a poder utilizarla.
Al menos en CSS.
Podríamos poner aquí Atomic.
Y fíjate cómo quedaría nuestra página ahora de repente.
Ya está cargando ahí la fuente por todos lados.
Es una fuente que obviamente no es muy legible.
O sea que hay que tener cuidado porque si utilizáis esta fuente en demasiados sitios,
va a ser muy cargado.
De hecho, y creo que David lo está haciendo bastante bien,
si os fijáis, aquí sí que la está utilizando en algunos sitios,
pero no la está utilizando todo el rato.
¿Por qué?
Porque es un rollo, porque es muy, muy cansina de leer.
Se puede utilizar para algunos casos, claro, en cartelería puede quedar mejor.
En cartelería queda muy bien.
Y de hecho, el cartel de la velada me parece espectacular.
O sea, está muy chulo.
Me encanta.
Pero claro, en página web puede ser muy cansina.
Muy, muy cansina todo el rato leer con esta fuente.
Entonces, vamos a intentar, en lugar de ponerla en todos los sitios,
la vamos a cargar y la vamos a utilizar en sitios en concreto.
Cuando tengamos el diseño definitivo, pues ya veis, aquí creo que queda súper bien.
Yo creo que cuanto más grande y más corto es el texto, mejor queda.
Por ejemplo, aquí creo que puede quedar muy, muy bien.
Pero creo que, por ejemplo, este texto de la velada puede llevarse.
Esto sería ilegible.
Así que lo vamos a evitar, ¿vale?
Bueno, entonces, no la vamos a utilizar en todos los sitios,
pero para seguir ahí ese estilillo que tenemos por acá, ¿veis?
Y para que quede como el primer detallito, la vamos a poner ahí arriba.
Para utilizarla, pues obviamente tenemos que ir a nuestra configuración de Tailwind
o la podríamos utilizar a mano.
Pero en este caso, mejor si la tenemos en Tailwind, que nos va a ayudar un montón.
Ponemos aquí PhoneFamily y le decimos que cada vez que pongamos Atomic, ¿vale?
Atomic, ponemos aquí Atomic y ponemos aquí...
Aquí es un poco raro yo porque no es una fuente que pueda tener un fallback fácil.
Fallback es qué fuente se va a cargar cuando la Atomic no está cargada.
Vamos a poner cursiva por poner algo,
pero no hay nada que se le parezca en el sistema a esta pedazo de fuente.
Así que nada, vamos a poner cursiva y a ver qué es lo que decide.
Y ya está, utilizaremos la Atomic siempre que podamos.
¿Vale?
Ahora nos vamos a ir al giro, al giro por aquí.
Y aquí pues le vamos a decir que utilizamos la Fonda Atomic con el Text White.
Y aquí, que esto debería quedar arriba, ¿veis?
Queda muy pequeñito.
Ya os digo, es una fuente que creo que queda mucho mejor
cuanto más grande es el texto y corto.
Si lo hacemos muy grande el texto o es un párrafo, va a quedar horrible.
Aquí quedaría bastante finito.
Creo que queda guay el hecho que aparezca ahí como el graffiti de Twitch y va y no sé qué, no sé cuánto.
Que es un poco parecido a esto.
Aunque si os fijáis, aquí tiene como una rotación, ¿no?
Un poco rara.
Hay una cosa, claro.
Aquí, si rotáis, por ejemplo, si hacemos así o así, quedaría así.
Que no queda mal y me da la sensación que puede ser que sea esto.
Pero claro, podríamos utilizar también lo que sería el Skew.
Y no me queda muy claro, vosotros me lo decís, ¿vale?
Que estáis en vuestras casas.
¿Cuál es de los dos el que se supone?
Es muy similar.
Es muy parecido.
Es muy difícil.
En este caso ver la diferencia.
Pero sería un poco la idea, ¿no?
Teníamos el Rotate, que sería, no sé cuánto era el Rotate, el de 6, ¿cuánto es?
6 grados, ¿no?
Pues sería un Rotate de menos 6 grados, ¿vale?
O el Skew de Skew...
Claro, el Skew, ¿cómo es el Skew que hace el Skew?
El Skew es la rotación con el Skew I.
O sea, no solo hace...
Ah, no, no.
Es que hace la transformación del Skew I.
Y el Skew I solo se puede hacer con transformación.
¿No se puede hacer Skew I?
¡Hostia!
¡Curioso!
¡Qué raro, ¿no?
Como habían movido todas las propiedades de CSS, de transform, para que se pudieran hacer aparte,
pensaba que se podría hacer el Skew también.
Pero no, no se puede.
Interesante.
Bueno, pues ahí tenéis un poquito la cosita.
A ver, le voy a quitar este.
Le voy a quitar este, básicamente.
Y este sería con la rotación y este sería con el Skew.
A ver, la diferencia ya os digo que es muy, muy poquita.
La diferencia, básicamente, es que también está chafando un poco la letra.
La está chafando.
Si os fijáis, no solo la está rotando, sino que la está chafando un poquito.
Yo no noto la diferencia.
Si me decís la verdad, yo no la noto.
Así que, porque quede un poco más fácil, vamos a poner el Rotate.
Pero si me decís, no, es que es el Skew que no...
Pues el Skew mejor.
¿Lo veis mejor el Skew?
Yo no lo noto, en este caso.
Si fuese mucho más bestia, igual sí que se nota.
¿Vale?
O sea, ¿veis que con el Skew se estira?
Claro, como es tan poco, pues tampoco se nota mucho la estirada.
Si fuese mucho más, pues sí que veríamos que se estira bastante.
El Rotate...
A ver, sea o no, al menos habéis notado...
¿Veis?
El Rotate solo rota.
Al menos has aprendido algo nuevo, porque a lo mejor no tenías ni idea de qué es lo que
hacía el Skew y tal.
Bueno, pues ya lo sabes.
Yo elegiría Rotate por no desvirtuar esa fuente.
Vale, pues nada.
Lo dejamos en el Rotate y ya está.
Luego no me hagáis una PR.
No, aquí tienes.
Creo que queda mejor el Skew y tal.
Bueno, pues esto sería un poco la idea.
Ahora que ya tenemos todo esto, nos vamos a nuestro To Do.
Luego, ocultar secciones que por ahora no necesitamos, usar el nuevo logo, ¿vale?
Y vamos a poner el efecto ruido.
El efecto ruido ya lo hicimos, ¿vale?
Para no estar aquí todo el rato y tal, lo que voy a hacer con el efecto ruido es copiar
el ruido que hicimos.
Hicimos un efecto ruido que se basa básicamente en dos cosas.
Uno, una imagen, que a ver si soy capaz de copiarla.
Una imagen, que la tenemos por aquí.
Y luego un componente.
A ver, ¿queréis que haga el efecto ruido desde cero?
Lo puedo hacer en un momento, ¿eh?
Lo puedo hacer si queréis en un momento.
No me importa.
O lo puedo copiar.
Lo que prefiráis.
¿Qué queréis que hagamos?
Lo copio y os lo explico.
Explicar lo voy a explicar seguro, ¿eh?
Pero puedo copiarlo directamente, que ya lo hicimos el otro día.
Y os lo explico, más o menos por encima.
O lo puedo hacer desde cero y ya está, ¿eh?
Vale, copiar, copiar, copiar.
Desde cero.
Copia y explica.
Vale, lo copio y lo explico.
Porque yo creo que, total, es que lo hicimos el otro día.
Y ya es un poco lo mismo.
Entonces, no os preocupéis si no estuviste, que os lo explico y ya está, ¿eh?
Entonces, lo voy a explicar.
O sea, eso no os preocupéis.
Utilizamos un div.
Un div que le llamamos noise.
Aunque esto no es necesario.
Porque este div, al final, como es un div y está en este mismo componente.
Aquí lo que podríamos hacer es poner div.
Y los estilos, ya sabéis, en astro tienen un scope.
Esto quiere decir, tienen el ámbito.
Es que este div solo se refiere a este que ve aquí, ¿vale?
El z-index le podría haber puesto más.
Para ver si revienta.
Pero bueno, es que queremos que quede bien arriba del todo.
Cosas importantes.
Queremos que tenga la posición fija.
Para que siempre quede por arriba, ¿vale?
El background le hemos dado un toque así verdoso.
Porque se supone que la página tiene un poquito de toque verdoso.
Ya lo ajustaremos, ¿vale?
Importante la animación.
Que luego la explicaremos.
Lo dejamos para el final.
El background.
Tenemos el color.
Que sería este que hemos puesto por aquí.
Lo interesante, aquí le podemos poner barra color.
Básicamente para referir no solo al color.
Tendríamos una imagen que sería este noise que he creado aquí.
Que esto es el fondo que se va a estar repitiendo constantemente.
Y lo que va a dar este efecto granular, ¿vale?
Que se repita.
Esto es importante para el fondo.
Se repita constantemente.
El inset le ponemos el menos 50%.
Porque tanto la altura como la anchura.
Fijaos que le estamos poniendo el doble.
¿Vale?
Esto es para que no haya ningún sitio en el que quede cortado.
Especialmente si utilizas iPad, iPhone y tal.
Que tienen a veces alturas dinámicas.
Pues puede haber algún tipo de problema.
Para evitar este tipo de cosas.
Lo que hacemos es.
Oye, vamos a hacer que ocupe el doble.
¿Vale?
Y así nos aseguramos que por ningún sitio se nos escape una parte.
Que aparezca sin este fondo.
Sin este ruido, ¿vale?
Sobre todo con alturas dinámicas.
Luego el pointer events known.
El inset es la forma corta.
Esta es la forma corta de poner top, left, bottom, right.
¿Vale?
Es la forma corta.
Imagínate.
Top menos 50%.
No sé qué, no sé cuánto.
Todo el rato.
Esto sería básicamente la forma corta de hacer esto.
Luego el pointer events known.
Lo que estamos haciendo es que.
Aunque nosotros le demos click.
Pues que deje pasar el click.
¿Vale?
Que lo ignore totalmente.
Y esto es importante.
Porque si tenemos un botón detrás del efecto ruido.
Queremos que el click se lo lleve el botón.
No el noise.
Entonces al noise, al ruido.
Le estamos diciendo.
Oye, ignora cualquier evento del pointer.
Si le estás dando click.
Tú ignora.
Que para ti esto no es.
Luego el z-index.
Porque queremos que esté justamente bien arriba.
Interesante.
Podríamos poner 99999 hasta el infinito.
¿Vale?
Pero lo cierto es que z-index tiene un límite.
No sé si lo sabíais.
¿Vale?
Limit number.
Gracias, Steven.
Tiene un límite que es 2147483647.
¿Vale?
Bastante interesante.
De hecho, hice hace tiempo un tuit muy interesante.
Ahora no aparecerá.
Qué lástima.
Euler.
Además de entretenerse.
Este, este.
Del 2021.
Mira que hace tiempo.
Pero está bastante chulo.
Que explico por qué.
Qué tiene que ver el Gangnam Style con el z-index.
Con Leonard Euler.
Y el origen de las funciones de promoción.
¿Cómo es la configuración del subrayado ondulado que sale en el código para quitar la extensión de error lens?
Gracias.
No lo sé.
No lo sé.
No sé.
No sé si lo tengo puesto.
Pero es el ondulado que aparece en el código.
Es el que viene por defecto por Visual Studio Code.
Bueno.
Luego.
Y aquí es donde está un poco la magia.
¿Vale?
La animación.
La animación.
Queremos que utilice estos keyframes que hemos utilizado aquí durante 0,2 segundos.
Y que esté en infinito.
Para que sea constante el efecto ruido.
Y aquí lo que hacemos es decirle.
Cuando la animación lleve el 0% del tiempo.
Queremos que la transformación lo traslade todo al 0.
O sea.
La posición original.
Y cada 10% vamos a estar moviéndolo.
Pero si te fijas.
Lo movemos como muy poquito.
Un 5% para arriba.
Para abajo.
No sé qué.
No sé cuánto.
Y esto lo hacemos justamente para que haga este efecto ruido.
En el que el ruido al final no se mueve tanto.
Sino que es como.
Como un efecto así muy cercano.
Pues eso es lo que lo haría.
Y sí.
Podríamos utilizar también el prefers media.
Preferreduce motion.
Y así le quitamos la animación.
Esto lo que haría es que si el usuario por lo que sea.
Se marea con las animaciones.
Pues lo podríamos hacer así.
Vale.
Sí.
Podríamos utilizar el translate 3D.
Que alguien me ha dicho.
¿Podríamos utilizar el translate 3D?
Pues sí.
Podríamos utilizar el translate 3D.
Y aquí.
Yo creo que esto debería ser el 15%.
Creo que con esto debería funcionar.
Y que el segundo es opcional.
O sea.
El otro es opcional.
Puede ser.
Ahora lo veremos.
Vale.
Y ya está.
Esa es toda la magia que tenemos.
Vamos a ver si funciona.
Para eso nos vamos a ir al layout.
Y aquí que por ahora teníamos el smokebox background.
Vamos a utilizar el noise background.
Que es el que hemos creado.
Vale.
Importamos el noise background.
From.
Barra.
Components.
Components.
Joder.
Dios mío.
Noise background.
Punto astro.
Y import.
From.
Madre mía.
Ahora.
¿Vale?
Y no aparece.
O sea aparece.
No lo veo ni yo.
No.
No aparece porque creo que la he liado.
A ver.
Voy a asegurarme primero.
Antes de cambiar esto del noise que he hecho.
Esto.
Tirurup.
Vale.
Y aquí.
¿Cuál era el segundo que había puesto?
Este.
Voy a asegurarme primero que funciona.
Vale.
No lo veo.
Vale.
Algo he hecho.
Algo.
Algo.
Algo he colado ya.
Bloqueado.
Ah.
Que no me está encontrando la imagen.
Porque esto lo he puesto en image.
Barra.
Es que claro.
Lo hemos puesto en image.
Vale.
Vale.
Ahora sí.
Vale.
Ahora sí.
Ahora sí.
Ahora sí.
Vale.
Ahora sí que tenemos el efecto ese ruidoso.
¿Vale?
Ahí lo tenemos.
El efecto ruido.
Vale.
Ahora vamos a hacer.
Primero vamos a hacer que funcione.
Y luego ya lo optimizamos.
Utilizamos el Translate 3D.
¿Vale?
Que tiene mejor rendimiento porque utiliza básicamente la GPU.
Lo que pasa es que...
A ver.
Esto para empezar creo que debería ser así.
¿No?
Y luego...
No sé si el Translate 3D que necesita utilizar otros...
A ver.
Vamos a verlo.
Translate 3D.
Translate 3D.
No.
0.
0.
No sé si necesita el tercero o es opcional.
Isalens.
Y cambio.
Y cambio de T.
¿Es opcional o no?
¿Vosotros qué pensáis?
Parece mi televisión.
Se ve buenísimo.
No, hombre.
Ahora no que no está funcionando.
Pero ahora lo hacemos.
O sea que hay que ponerle 0.
Yo creo que no.
Es que me suena que el tercero...
A ver.
Yo creo que el tercero...
Si le doy aquí me lo va a decir.
Este sería tal.
Y aquí en las animaciones...
Debería aparecer la animación por ahí en algún sitio.
¿Veis?
El otro día ponía...
¿Veis?
¿Veis que se está quejando?
Se está quejando y me dice...
Invalid Property Value.
Translate 3D.
Claro.
Y si ponemos 0.
Entonces ahora sí que funciona.
O sea que no es opcional.
Una pena.
Pero bueno.
Es lo que hay.
Claro.
Como el otro...
El otro sí que...
Hostia.
¿Qué es esto?
Vale.
0, 0.
Es que veía un puntito.
Y era el punto y coma...
Vale.
Pues esto...
Vamos a hacer una cosa.
Hacemos así.
Pam, pam, pam.
Pam, pam.
Coma 0.
Y ahora...
Aquí también otro 0.
Y aquí...
Otro 0.
Claro.
Es que en 3D tenemos tres ejes.
Tenemos el de la X.
El de la Y.
Y también tenemos la profundidad.
Y entonces por eso necesitas los tres.
Y ahora sí.
Que ahora sí que se ve.
¿Vale?
Ahora sí que lo tenemos.
Vamos al to do.
Venga.
Actualizar.
Efecto ruido.
Ya lo tenemos.
Actualizar las fechas.
Las fechas además...
Aquí sí que vamos a intentar ya continuar con lo que nos ha hecho el bueno de David.
Fijaos que aquí pone 13 de julio.
Primero.
Timestamp converter.
¿Vale?
Vamos a mirar en qué cae el 13 de julio.
¿Vale?
El mes es el 7.
El 13.
18.
0.
0.
0.
No sabemos la hora exactamente.
Por ahora vamos a poner esta hora.
Al menos para tener una cuenta atrás sobre algo.
Porque si no va a ser muy raro.
Y aquí tendríamos cuando se supone que es ese día.
¿Vale?
Así que vámonos.
Voy a cerrar aquí los giros.
Aquí en el principal date.
Evento de presentación.
Esto ahora va a ser en el Santiago Bernabéu.
¿Vale?
Estadio Santiago Bernabéu.
Espectacular.
Ubicación del campo Santiago Bernabéu en Google+.
Se abrirá en una nueva pestaña.
Hostia.
Esto.
Esto ¿por qué lo añadió alguien?
Style Display WebKit Box.
Hostia.
Esto es de una PR que se me coló.
Y no sé para qué puso estilo en línea.
Me gustaría saberlo.
A lo mejor tiene un sentido.
Pero no lo sé.
Google Maps.
Santiago Bernabéu.
¿Vale?
Aquí tenemos Santiago Bernabéu.
Estadio Santiago Bernabéu.
Hostia.
Qué rabia, macho.
A ver.
Santiago Bernabéu.
Y lo vamos a compartir.
Para pillar el enlace.
Y aquí ya le pondremos este.
Y así nos olvidamos.
Evento de presentación fuera.
Esto no necesitamos.
Entradas agotadas.
Esto ahora luego veremos lo que hacemos.
Lo de aguardar en el calendario.
Pues puede ser interesante.
Pero lo que me interesa.
Es el hecho.
A ver todo esto.
¿De dónde saca?
¿Ves?
Genera un Date Time.
¿Vale?
De dónde sacábamos el Event Timestamp.
De Events Date.
¿Vale?
Pues mira qué bonito ahí.
Que tenemos esto aquí.
Súper fácil.
Y ahí cambiando solo esto en un sitio.
En el momento que es el evento.
Ya al menos deberíamos ver que esto está actualizado.
Vale.
Veo que para esto era el Flex.
Pero claro.
El Style en línea.
Un poco polémico.
Un poco polémico.
Más teniendo en cuenta que podemos hacerlo bien.
¿No?
Podemos tener aquí el Flex.
Que entiendo que es la razón por la que...
Ay, perdón.
¿Por qué ese Clash se ha cargado?
A ver.
Un momento.
¿Hola?
¿Por qué?
Ah, porque...
Ah, porque tarda mucho en aparecer.
Vale, vale.
Porque tarda mucho en aparecer.
Eso es por culpa del Delay este que le habíamos puesto aquí.
Vale.
No pasa nada.
Claro.
Tiene sentido porque ahora el Delay tiene que ser mucho menos.
Mucho menos.
¿Vale?
Tiene que ser mucho menos porque tiene que ser más rápido.
Más ligero.
Vale.
Por aquí me van los tiros.
No sabemos la hora.
Por lo tanto, la hora la vamos a ocultar.
Para ocultar la hora podríamos hacer diferentes cosas.
Me podría cargar esto directamente.
Podría hacer un montón de cosas.
Por ahora la separación sí que es verdad que la voy a comentar porque no la necesitamos.
Yo voy a dejar un comentario que tampoco hace daño.
Y seguramente más adelante lo vamos a querer recuperar.
Esta es la separación de la fecha.
Y la hora.
Quizá más adelante la utilizamos.
Quién sabe.
Si no, lo podría quitar porque podría recuperarlo del commit.
Pero bueno, no pasa nada.
Lo interesante aquí, pues que esta hora la queremos fuera.
Esta hora la estamos dibujando con JavaScript.
Así que aquí tendríamos Format Event Time with Tom.
Esta parte es la que estamos utilizando.
Aquí, este Formatted Time.
¿Veis aquí que pone Update UI?
Pues este método debe ser el que.
Mira la fecha y el tiempo.
Y entonces pone, esta sería la fecha y este pone el tiempo.
Y eso estaba muy chulo porque lo que hace es detectar la zona horaria del usuario y le pone su horario.
Lo cual está bastante chulo.
Pero no lo vamos a utilizar ahora.
Entonces vamos a hacer dos cosas.
Uno, vamos a separar este if de forma que solo revise la fecha, el elemento fecha.
Y aquí solo revise el elemento del tiempo.
Y además vamos a tener un nuevo parámetro aquí que sea Showtime.
Que vamos a poner que por defecto sea True.
Porque es como funcionaba antes.
Y vamos a ponerle aquí los estilos.
¿Vale?
Esto fuera, esto fuera.
¿Vale?
Esto por aquí.
Showtime.
Showtime que si esto es null y además tenemos el Showtime, entonces lo va a mostrar.
Y cuando utilicemos esta función vamos a quitar el Showtime y le vamos a poner False.
Y al menos con esto ya evitamos esto.
Que en un momento dado queremos tal.
Pues nada, le ponemos el True y ya está.
Podríamos hacer que cuando aparezca el True también además pues aparezca esta parte de aquí.
Podría ser, ¿sabes?
O sea, podríamos poner esto aquí en un div.
No podría ser.
Tendría que ser un span.
¿Podríamos ponerle un span?
¿Lo hago o no lo hago?
A ver, esto ya mirando al futuro, ¿eh?
Estoy mirando al futuro.
Pero podría ser, ¿no?
Podríamos poner aquí un span que básicamente pues esté en non por defecto.
Y que le podríamos poner aquí...
DateTimeSeparator.
Podríamos poner esto.
DateTimeSeparator.
Y ponerle el non, básicamente.
Sería una feature.
Bueno, o sea, a ver, esto es para el futuro, ¿eh?
Lo que tu corazón diga.
A ver, podríamos hacer algo así.
Básicamente para no quitar la funcionalidad y esto que funcione ya de gratis, ¿sabes?
De decir, vale, pues si tienes el DateTime, pues entonces lo arreglas.
A ver, ¿dónde podríamos poner la carga del elemento?
Aquí, ¿vale?
Con...
Mira, DateSeparator.
Pillamos el DateSeparator.
Y una vez que estamos aquí, pues ya le podríamos poner...
Vale, pues si hay que enseñar esto, pues entonces quitamos el non y así lo mostraríamos.
Y a ver ahora cómo queda.
¿Vale?
Ahora lo aparece, porque lo necesitamos para la separación, pero si le ponemos el false, pues no debería aparecer.
Pero sí que aparece, sí que aparece.
No sé por qué aparece.
Ah, miramos por qué.
Ah, y por qué he puesto non.
Y non no existe.
Siempre me equivoco con esto.
Es hidden.
Hidden no, hidden.
Es hidden.
No sé por qué siempre le pongo non.
Es que me encantaría.
Estoy acostumbrado al non.
No es non.
Es hidden, ¿vale?
Hidden.
Anda, que yo también.
¿Veis?
Ahora sí que funciona bien.
Perdonad a los amantes de Tailwind que se han echado las manos a la cabeza.
¿Vale?
¿Veis?
Ahora aparece y aparece y desaparece cuando necesitamos.
Vale.
Bueno, al menos ya tenemos esto por aquí.
Entradas agotadas.
Yo lo de las entradas, que ya aquí David ha puesto esto, yo creo que está bastante chulo como lo ha hecho.
Y que pone aquí el próximamente.
Yo creo que lo vamos a hacer.
Vamos a hacer esto del próximamente.
¿Vale?
Porque hay mucha gente que se vuelve loca, ¿eh?
Con esto.
Y además tenemos que quitar el tema de las entradas, porque también ahora mismo va al Teatro Victoria.
Entonces, vamos a quitar esto.
Vamos a quitar esto.
Vamos a por ahora.
Hostia, fíjate.
Aquí pone Ano.
¡Pone Ano!
Tengo ocho años mentales.
Efectivamente.
Tengo ocho años mentales.
¿Vale?
Vamos a quitar esto.
A ver qué pone aquí.
Ah, recursa.
Pruebe valid navigals.
If you can...
Este...
Claro.
Tiene todo el sentido del mundo lo que me está diciendo esto.
Lo que me está diciendo básicamente es, oye, no me pongas esto, porque si lo que quieres es una cosa que pueda aparecer un enlace, pero que no te lleva a ningún sitio, pues utiliza un botón, desgraciado.
Eso es lo que me está diciendo en la cara.
Y tiene razón.
¿Para qué nos vamos a engañar si tiene razón?
Lo malo es esto.
Lo malo es que los estilos ya vienen...
Ya deben estar en algún sitio y son para el Anchor.
Tiene razón, pero no me da tiempo ahora de hacer todo este tipo de cosas.
Entonces, lo que vamos a hacer es...
Voy a mirar dónde está este Anchor, que me imagino a lo mejor en el layout.
En algún sitio deben estar estos estilos globales.
No sé dónde.
Aquí...
Ah, porque fíjate que pone is global.
Y aquí están los estilos, justamente, ¿no?
Menos a...
Claro, estos son los estilos.
Estos son los estilos.
Claro, al final lo que podríamos hacer es...
Lo que pasa es que es bastante complicado.
Esto es lo malo.
Muchas veces decimos, no, es que Tailwind tiene problemas, que no sé qué.
Pero esto, si hubiera sido un componente, hubiera sido más fácil de mantener.
Que no todo esto que tenemos aquí, que ahora tengo que cambiar, que sean botones, que no sé qué.
O sea, es un poco más rollo.
Bueno, entonces, para no liarla, voy a dejar que sea un Anchor.
Y ya está, lo dejaremos así.
Vamos a poner aquí lo de comprar entradas.
¿Vale?
Comprar entradas.
Lo que sí que es verdad es que vamos a poner que tenga el ARIA disabled.
Y así lo que vamos a hacer es que el scroll horizontal a...
Y si esto tiene el ARIA disabled a true, vamos a ponerle alguna cosita así.
A ver cómo queda.
¿Vale?
Ahora no tiene esto, pero lo que tenemos que hacer para que se parezca un poco sería cambiarle un poco los estilos.
O sea, que el background sea...
A ver, ¿cuál es el color del background que teníamos por aquí?
Tu, tu, tu, tu, tu.
6, 6, 6, 6.
¿Vale? 6, 6, 6, 6.
Color polémico.
Color polémico.
Y este que sería el 1, 1, 1, 1, 1.
¿Vale?
Y al menos ya lo teníamos por aquí.
Este color disabled no existe.
Estaría bien que existiese, pero no existe.
Y ya tendríamos algo así.
Tendríamos también a lo mejor el borde...
A lo mejor tendríamos que ponerlo en el mismo color.
Y ya está.
¿Por qué el borde...?
A ver, ¿esto es un efecto?
¿Es un efecto?
¿Puede ser que sea un efecto?
Es que estaba mirando que no fuese...
Sí que parece que es más corto que el otro.
Pero el borde se lo he puesto.
Ah, ¿y por qué es border color?
Vale, ahora, ahora.
Ya decía yo.
Hostia, ¿eh?
Dos píxeles.
Yo estoy mirando los píxeles.
Lo estoy contando.
Entonces, lo que sí que vamos a hacer es que justo debajo,
que creo que puede tener sentido,
vamos a poner aquí un próximamente.
¿Vale?
Próximamente.
Como sí que lo ha puesto David.
¡Hostia!
Porque esto de repente ahora...
¡Ah!
Otro problema.
Class.
Voy a poner aquí link.
Porque veis que pone aquí scroll horizontal,
no sé qué, no sé cuánto.
Es que es muy raro.
Y esto vamos a poner...
Voy a ponerlo también aquí.
Esto habría que arreglarlo.
Si quieres hacer una PR, hazla.
¿Vale?
Por ahora voy a poner aquí...
Button link o button style o button...
Voy a poner button style por ahora.
No es mi nombre favorito,
pero así lo dejamos...
Luego ya lo arreglaremos.
¿Vale?
Pero esto estaría chulo que esté mejor.
Que sea un componente,
que no se tenga que preocupar.
Luego veis es que esto de además atarlo a una idea...
Es que también tiene sus desventajas a veces.
Este tipo de cosas.
Que pensamos que siempre el cese senativo y con las clases y tal...
Que es que esto tampoco...
Que muchas gracias a quien lo hizo, ¿eh?
Pero que a veces también el problema es que tiene un trabajo
que no se ve mantener el tema de las clases,
asegurarnos que las clases tienen sentido.
Y no es tan fácil, la verdad.
No es tan fácil.
Vale, aquí la he liado, ¿no?
Un poco porque aquí he copiado...
No sé el que he copiado.
Vale.
Este before tendría que ser así.
Claro, es que aquí veo que es en el span del before.
Que encima...
Encima la vamos a liar.
A ver, esto es...
Esta parte...
Y esta parte...
Ya estaría, ¿no?
Vale.
Vale.
A ver si más o menos...
Vale.
Voy bien.
Voy bien.
Por ahora voy bien.
Es que claro, para...
Uf, fíjate encima que tiene un montón.
Que tiene un montón.
Vale.
Esto...
Entiendo que sí que sería esto.
Esto sería este.
Este aquí.
Es que no la quiero liar.
Por eso voy con miedo de que no se me escape una y que la liemos pardísima.
Esta fuera.
Vale.
Esta sí.
Esta fácil.
Esta también.
Esta fuera.
Al menos así ya vamos simplificando.
¿Ves?
¿Ves cómo la podía liar con una?
A ver.
¿Con cuál se me ha escapado?
Que la he liado.
Por no usar la técnica del tío BEM.
Efectivamente, ¿no?
Yo creo que lo mejor que se podría haber hecho con esto es un componente.
Un componente que visualmente...
Igual lo podríamos hacer, ¿eh?
Y eso que Astro creo...
Exacto.
Lo que pasa es que ya alguien aquí puso un is global.
¿Sabes?
O sea, alguien dijo, ah, voy a hacer que esto sea global.
Entonces, lo primero que voy a hacer es intentar esto.
Luego lo podríamos extraer en un componente.
Si no, lo podéis hacer vosotros y ya está.
O sea, que alguien pueda hacer la PR y ya está.
Entonces, esto entiendo que esto estaría bien.
Vamos a ir uno a uno para asegurarnos, ¿vale?
Luego, esto es para el hover, así que esto sería aquí y tal.
Así ya no nos agobiamos de que sean los estilos en concreto, en un sitio y tal.
¿Vale?
Este ya estaría.
¿Vale?
Pues creo que...
Vale, ya lo tenemos.
A partir de aquí, ahora que al menos tenemos una clase, lo ideal sería tener un componente
que pueda ser un anchor o un botón y que tenga estos estilos y que estén totalmente
separados de este componente.
Porque, claro, ya veis que lo complica bastante.
Ya he hecho un pequeño cambio y madre mía la que hemos liado.
¿Vale?
Ahora, esto ahora tiene más sentido porque es que esto de utilizar el padre para ir al hijo
o que no sé qué, pues va a dar problema seguro.
Item center, ¿vale?
Y el flex call, gap y 2.
El problema, claro, este es el problema.
Bueno, no pasa nada porque lo que vamos a hacer es que esto sea app relative y vamos a poner que esto sea...
Vamos a ponerle el absolute y ya está.
O también lo que podríamos hacer es alinear...
Vale.
Vamos a hacerlo bien.
Porque si no, utilizar un absolute ahí me parece un poco pirata.
Podríamos poner más que items center...
¡Hostia, la madre que lo parió!
La madre que lo parió, parió.
Madre que lo parió.
Vale.
Ahora sí que lo tendríamos.
Tendríamos ayer próximamente.
Y ahora aquí le vamos a poner este color rechulón que deberíamos ya poner por aquí.
Tenemos el primary, secondary.
Si ahora me pongo a tocar el primary, la puedo liar muy parda.
Entonces, lo que vamos a hacer es llamarle accent.
Que me parece un buen color, un buen nombre.
Porque justamente lo que no es el primario, la verdad, por el primario sería este.
Y sí que es verdad que acentúa.
Entonces vamos a utilizarlo como accent.
Vamos a poner color, accent.
Y este lo vamos a sacar del to-do, que ya me lo había traído por aquí, el foforito.
Vale.
Vamos aquí.
Y aquí tenemos el foforito.
Vale.
Muy bien.
¿Dónde tenemos nuestra página?
Por aquí.
Lo vamos a poner en el próximamente.
Así que aquí.
Próximamente.
Próximamente.
Próximamente.
Aquí.
Span.
Con el class.
Text.
Accent.
Próximamente.
Quitamos esto aquí.
Vale.
Y ahí lo tenemos.
Y al menos así ya no se puede ejecutar y tal.
Yo creo que al menos para tener ya algo.
Lo has borrado del todo.
No, lo he borrado del todo.
Al menos, al menos para tener algo ya, lo podríamos tener.
Ahora, aquí lo que podríamos mirar un poco, ahora que ya tenemos esto, es mirar lo que podríamos empezar a separar.
Yo, por ejemplo, dentro del section, que veo que aquí tenemos este deep y tal, time, vale, time, span, no sé qué.
Aquí un h2.
El h2 es un poco raro que esto sea un h2, la verdad.
Y luego aquí tendríamos como los botones.
Yo creo que mirando un poco cómo es la sección, que aquí tenemos el tiempo y tal, yo creo que esto debería ser el header de la sección.
Uy, perdón.
Le he hecho aquí una cosa.
Esto podría ser el header.
Y en todo caso, esto sería el footer, vale.
Aquí el footer, ta, ta, ta.
Vale.
Aquí no pasa nada que esto sean dos deeps.
Al final tiene sentido que tengamos separación.
Y deep viene de dividir el contenido.
No os agobiéis de poner deeps, vale, que luego os ponéis, no, es que todos son deeps.
A ver, el tema es que un main, footers, headers, articles, que los uséis, pero si ponéis tres deeps seguidos no pasa nada, siempre que sea para dividir el contenido.
Por ejemplo, aquí este calendar button, pues lo que estamos haciendo, este deep, es justamente para dividir el contenido.
Pues no pasa nada.
Podríamos con el flex seguramente arreglarlo, pero bueno, tampoco queda mal.
Como ya tenemos esto y al menos tiene el efecto que queremos, o sea, el nuevo diseño con la nueva información, vamos a subir esta página y luego vamos a seguir con los patrocinadores, vale, que son los que dan el dinerito.
¿Qué más habíamos puesto?
Las fechas, vale, esto ya lo hemos actualizado.
Vamos a poner aquí, actualizar, actualizar, fechas y estadio y botones, vale.
Añadir esto es lo que vamos a hacer ahora, así que esto es lo que vamos a hacer, pipipipi.
Añadir los sponsors y luego añadir el apartado de la presentación.
Usar el vídeo de presentación para que cualquiera lo pueda ver y luego usar Lite YouTube para no cargar demasiadas cosas.
Y esto es súper importante.
Añadir apartado de sponsors, ahora lo hacemos.
Primero de todo, vamos a añadir aquí la configuración de Tailwind.
Vale, pues nada, echarle un vistazo, darle unos deditos y en toda la agenda.
Lavelada.dev tiene confetis.
Lavelada.es también.
Ahora los quitamos.
Ahora los quitamos.
¿Cómo haces para que el screenshot aparezca a la izquierda?
Eso es una aplicación que se llama CleanShot, que lo hace y ya está.
Esto ahora va a desaparecer porque vamos a utilizar la nueva página.
Así que, bueno, no veo que no hay deditos, pero le voy a dar directamente.
Vale.
Confirm merge y ya está.
Vale, delete branch y ahora en un ratito debería hacernos la PR.
Una cosa que me gusta mucho y que es muy importante y muy interesante,
mira, hablando de la funada de los despliegues a viernes, ¿vale?
Que sé que mucha gente le escuece esto y no sé por qué se lo toma tan personal.
Pero yo entiendo totalmente que hay mucha gente que no haga despliegue el viernes
ni que lo haga el lunes a cierta hora, ni el martes a cierta hora, ni el miércoles, ni el jueves,
y que sea como una ceremonia, ¿vale?
¿Por qué?
Porque hay un montón de despliegues que tardan horas.
Hay gente que vive ahí fuera y hace despliegues sin test,
sin un sistema que sea automatizado,
que tienen que pedirle permisos a una persona para hacer despliegue,
que hay un millón de cosas.
Entonces es normal que no lo hagan.
Si es que el nivel de ingeniería es bastante bajito en muchos sitios.
Es normal, es normal.
Pero la gente se cabrea, hostia, pero no sé qué, no sé cuánto.
O que te pidan un zip.
Es una locura.
Entonces, mirad, yo cuando entré, os voy a explicar una historia rápidamente.
Gente, yo cuando entré a la empresa en la que yo estoy, en la que estuve, en Fotocasa,
que es de buscar viviendas y tal,
yo cuando entré, los despliegues a producción tardaban una hora y media.
Una hora y media, ¿vale?
Entonces, es normal que no despliegues, no el viernes,
tampoco el lunes a última hora.
Porque si te tarda una hora y media, ¿qué te vas a quedar?
A ver cómo se hace el despliegue.
Es que no tiene sentido.
Y si hay un error, y tardas una hora y media para arreglar el error,
es una locura.
Es que no tiene sentido.
Entonces, claro que tiene sentido.
Pero si tuvieses un despliegue de 24 segundos,
24 segundos,
que ahora alguien me dirá, no sé qué.
Pues es diferente.
24 segundos, pongamos un minuto.
Un minuto.
Pues mi objetivo cuando estuve en Fotocasa era,
vamos, lo tenía clarísimo,
es que si tarda una hora y media, la gente va a tener miedo a desplegar.
Da igual la hora.
No importa que sea viernes.
No importa.
O sea, un martes, antes de ir a comer,
la gente tendría miedo igual.
¿Qué va a hacer, sabes?
O sea, ¿qué va a hacer?
Que antes de ir a comer va a hacer el despliegue.
Es que tendrían miedo también.
O un martes a última hora.
Es que es normal.
Entonces, la idea también es tener despliegues rápidos.
En este caso es demasiado rápido,
porque 24 segundos es una brutalidad.
Pero, para que alguien diga,
no, pero es que claro,
una aplicación con millones de usuarios,
que sean bastante tochas y no sé qué, no sé cuánto.
Pero, pues, mirad, yo cuando estuve, ya os digo,
que empezamos con una hora y media, una hora cuarenta, los despliegues,
y cuando yo me fui, esto es lo que tardaban los despliegues.
Un minuto, ¿vale?
Y luego replicarlo en diferentes sitios.
No sé, eran cuatro minutos, ocho minutos.
O sea, es totalmente diferente.
Así claro que te fías.
Y esto, amigos, esto hacía test end-to-end,
test normales, releases, hacía un montón de cosas, ¿eh?
Así que el de una hora, eso es porque este, que ves de una hora,
esto es porque realmente se queda el job ahí,
directamente parado, porque hay otro que lo está empujando.
Entonces se queda ahí como que tú tienes que decir,
oye, ¿cuál es el que quieres?
Uno u otro.
Entonces se queda en stand-by.
No es que tarde una hora y que luego pete,
sino que se queda en stand-by porque ha empezado otro
y entonces están los dos a la vez y dices,
bueno, pero este entonces ya no tiene sentido que funcione,
a no ser que tú me digas que quieres que tire para adelante, ¿no?
Entonces, es normal que no despliegue la gente
si le tarda una hora un despliegue,
o si no tienen un rollback fácil.
Es que es normal.
Pero ya no digo un viernes,
es que es normal a muchas horas que no desplieguen.
Bueno, lo digo porque este tipo de cosas,
justamente la infantilización de la ingeniería de software,
es que la gente se queja y dice,
es que no lo haría, no lo haría.
Y no se trata de hacerlo, no,
porque a lo mejor no lo hacen nunca.
Se trata de cómo minimizar este tipo de cosas,
justamente para que en el caso que lo tuvieses que hacer,
en cualquier momento,
te dé menos problemas.
Así que, mirad, sobre esto,
por si os interesa el tema que me parece muy chulo,
AWS tiene un artículo muy bueno,
que os recomiendo mucho,
que aunque mucha gente dice que desplegar en viernes es de junior y todo esto,
pues la gente de AWS tiene un artículo brutal,
que os recomiendo un montón,
que habla de buenas prácticas DevOps
para hacer que desplegar en viernes te dé menos miedo.
Y está muy chulo porque tienen ejemplos.
Hay uno que me gusta mucho,
que también es un error, este me encanta,
aunque bueno, esto tampoco estamos preparados para hablar de esto en muchos casos,
pero hay uno que está muy chulo,
que es este error brutal de pensar que un despliegue es una release,
y esto lo hablan y está muy bien.
Y es gente de Amazon,
y os explican justamente cómo Amazon despliega producción
cada 80 veces al día y cosas así,
y está bastante bien.
Os recomiendo un montón.
Vale, pues continuemos.
Vamos a continuar, ¿vale?
Es que tenemos que ponerle telita aquí a...
Vale, bueno, a ver, pues vamos con la sección.
Esta sección yo creo que sí la podríamos hacer.
Vamos a hacer los patrocinadores y luego haremos la presentación.
¿Os parece?
Falta agregarle...
No, tiene Tailwind Animations.
Sí que tiene.
Desplegar con error cuesta dinero.
Hombre, claro,
pero desplegar con error cuesta dinero cualquier día de la semana, ¿no?
O sea, que sí, estoy totalmente de acuerdo.
Pero claro, es que podría hablar del tema todo el día, ¿eh?
Pero no, no os quiero agobiar.
No os quiero agobiar,
que luego se me enfada la gente
y se me ponen ahí a...
Is not a symbol...
Ah, coño.
Git, switch, main.
Vale, pillamos el pull y ya está.
Muy bien.
¿Puedes hacer un directo sobre desplegar y explicar el artículo de AWS?
Bueno, es que podría estar todo el día, ¿eh?
Os recomiendo que lo veáis y ya está, ¿eh?
Vamos con los sponsors.
Para los sponsors, vamos a hacerlo fácil,
section...
Ay, sponsors.astro.
La idea es básicamente la que vemos aquí.
Esto sí que es un componente que vamos a poder reutilizar fácil.
Así que nada, patrocinadores,
la velada puede llevarse a cabo gracias a...
Vale, pues eso lo vamos a hacer exactamente igual.
Voy a ir dejando por aquí las...
Como una constante para los sponsors.
Podemos ver que los sponsors, pues, tienen una idea.
Alza, el nombre, alza.
Y una URL, que esto...
Ya les pediré, ¿no?
Porque me imagino que cada una, pues, tendrá que tener una cosa u otra.
Y luego añadimos los siguientes sponsors.
Pero para el tema más visual,
vamos a poner que esto tengamos aquí un section, una clase,
con una separación vertical.
No hace falta en container.
Vamos a poner aquí los patrocinadores.
Y vamos a poner aquí una P que pone...
La velada puede llevarse a cabo gracias a la colaboración de...
Y aquí los patrocinadores.
A ver, podríamos hacer...
Es polémico porque sé que aquí me ha puesto esto.
Bueno, lo vamos a hacer igual.
Pero luego os pregunto a ver cuál os gusta más, ¿vale?
Si hacerla con la font Atomic o con la otra.
Porque una opción sería hacerla con la font Atomic,
que me va a matar.
Ya os lo digo yo.
Que me va a asesinar David cuando vea que lo he hecho.
Me va a decir, bueno, pero tú en el diseño,
¿acaso has visto esto?
Bueno, a lo mejor no me dice eso.
A lo mejor no me dice eso.
Pero alguna cosa me dirá.
Luego vosotros me decís cuál os gusta más y tal.
Y aquí, pues, nada.
Vamos a poner un poquito de separación.
Esto también tiene que ser...
Bueno, esto es CCC.
Claro, CCC...
A ver, layout...
CCC...
¿Cuál sería el color CCC?
¿Sabes?
O sea, Slate...
Es que los Slate creo que no son CCC.
Claro, no sé.
Es bastante parecido.
O...
¿Cómo se llama el...?
Es que hay uno...
¿Cómo es el...?
No, el secundaria de la CCC.
No, pero...
CCC...
No, secundaria es 3333.
No, CCC.
Neutral.
Eso.
Neutral.
Gracias.
Gracias.
Pues este sería el más parecido al CCC, si no me equivoco, ¿no?
De hecho, sí.
Creo que esto sería CCC.
Creo.
En mi cabeza es CCC.
No sé si es CCC, pero en mi cabeza...
A ver.
Es que estoy por mirarlo en un momento.
Tu hexadecimal.
A ver.
¡Yiii!
No lo es.
No lo es.
La madre lo parió.
2, 9, 2, 9, 2, 9.
Puede ser.
A ver.
No sé a CCC exactamente, pero tampoco pasa nada.
El tema es que se parezca...
Hostia, es que esto es demasiado, ¿no?
Esto es demasiado.
Pues va a ser que se va a quedar con el otro, ¿eh?
Espero que no le importe a David.
Porque...
Este es 9, 9, 9.
Bueno.
Pues el 300.
La velada puede llevarse.
No sé qué.
Vale.
Dejamos esta separación.
El textXL y tal.
Bueno.
Aquí vamos a poner un...
Un div, ¿vale?
Un div con el class grid.
Una columna de 2.
Yo creo que con 2 habrá suficiente.
Y que cuando crezca, la haremos de 3 columnas.
La separación de 8.
Y aquí, pues nada.
Ya los sponsors, punto map.
De cada sponsor vamos a tener la ID, el nombre, la URL.
Y lo que hacemos es dibujar.
Podríamos dibujar directamente un anchor.
La verdad es que tiene sentido.
Así, menos HTML.
Y aquí, pues URL, ¿vale?
Y así es todo clicable, que también puede tener sentido.
¿Vale?
El title sería...
Visita la página del patrocinador.
Name.
¿Vale?
Esto básicamente para que todos tengan un title.
Cositas que nos hacen falta.
Cositas que nos hacen falta.
Lo primero, las imágenes.
Entonces, vamos a ir aquí.
Y por suerte aquí, David ya ha hecho...
Hostia, a ver si la lío.
¿Vale?
A ver si soy capaz de pillar todos los SVGs de golpe.
Uy, la lío.
Vale.
Aquí le vamos a dar...
Los he ido seleccionando con la mayúscula, cada uno de ellos.
Y así le puedo dar al export.
Y si no lo he hecho mal, puedo exportarlos todos en SVG.
Esto me da un zip.
¿Vale?
Y se supone...
Que aquí deberíamos tener...
Vale.
Está en blanco.
No pasa nada.
No pasa nada.
Esto es porque los nombres no están muy bien.
Pero no pasa nada.
Porque pongo esto aquí.
¿Vale?
Lo quito.
Y ya sé que este es el máximo.
Venga.
Es que claro, como no se ven, este es el pozo.
Esto, Grefusa.
Grefusa.
Es una pena que no se vean los nombres.
A ver, si los nombres de las capas estuviesen, ya os tendríamos.
Pero como no están y están con grupos, no pasa nada.
Porque pobre David se ha pegado un currazo increíble.
Así que un aplauso para él en el chat, que ahora lo veré, que se le ha trabajado increíble.
Ya os digo, hoy mismo es que nos han llegado todo.
Yo no tenía ni idea de quién eran los luchadores ni nada.
Lo único que tenía claro es que yo no luchaba.
Eso es lo único que yo sabía.
Y nada, que es increíble el trabajazo que se ha pegado.
Porque en cuanto ha tenido lo más mínimo, se ha puesto a trabajar y tal.
Esto también es interesante porque, fijaos, este SVG, una vez que lo tenemos aquí optimizado, ocupa la mitad.
Yo creo que marca bastante la diferencia.
De hecho, me voy a asegurar que alza...
Sí, sí, es que es exactamente el mismo.
Así que nada, vamos a intentar aquí...
Mira, voy a hacerlo más fácil.
Vamos a ir aquí.
Nos vamos a ir a Public.
Y aquí en Public teníamos imágenes.
Bueno, podríamos ponerlas aquí, ¿no?
Vale, pues vamos a ponerlas en Image.
Total, ¿qué más da?
Vale, aquí tenemos estas.
Ahora lo que podríamos hacer es cada uno de estos, pues nada, lo vamos optimizando y lo que hacemos aquí, alza.
Pues lo copiamos.
¿Vale?
Y ya lo tendríamos optimizado.
Cerave, pues nada, lo copiamos aquí.
Nos lo optimiza, 64%.
Y ya está, cerave.
El pozo.
A ver, ¿podríamos automatizar esto?
Sí, pero con lo poco que voy a tardar, pues no me va a salir a cuenta a automatizarlo.
Entonces paso a automatizar algo que ahora lo voy a hacer en un momento.
Pero bueno, quién sabe.
Igual día de mañana estaría interesante que esto lo tuviésemos automatizado para...
Mira, fijaos la diferencia, ¿eh?
Esto es sin optimizar y esto es optimizado.
Habéis visto que utiliza menos elementos, utiliza menos trazos y se ve exactamente igual.
Es que estas cosas a veces pueden marcar bastante la diferencia.
A ver, no en este caso porque al final son muy pequeños estos logos.
Pero hay algunos logos complicaetes que dices, ostras, que a lo mejor de 20k pasas a 7.
Y que bueno, pues todo suma, amigos, todo suma.
Vale, pues ya tendríamos ahí todos los logos.
Cierro aquí y además todos optimizados.
Cerramos por acá y ya tenemos aquí todos nuestros logitos.
Nos vamos a la página de sponsors.
Y ahora que ya tengo aquí una lista con todos los logos, al menos voy a poder ir aquí e ir diciendo, vale.
Idc, cerave.
Name, cerave.
URL, cerave.
¿Cerave?
¿Qué es cerave?
Estoy flipando.
¡Hostia!
Interesante.
Interesante sponsor, ¿eh?
Me encanta, me encanta.
O sea, además para streamers me parece muy interesante el hecho de tener...
Yo tengo...
Es que, perdonad, ¿eh?
Es que no tenía ni idea, no sabía que era cerave.
O sea, esto no está patrocinado ni mucho menos.
Y al final es normal.
Pero que me ha parecido...
Es que digo, ¿qué es cerave?
Es que estaba alucinando, ¿eh?
Skincare.
No sé, me encanta.
De verdad os lo digo, en serio.
No es ninguna broma.
Además, yo tengo muchos problemas de la piel.
Os lo digo en serio, por desgracia, ¿eh?
Pero tengo un montón, un montón de problemas de la piel.
A veces me veréis que me afeito o no me afeito y tal.
Y lo hago por eso.
Yo no he utilizado nunca esos servicios.
También os digo, ¿eh?
Nunca he utilizado ese skin care.
No tengo ni idea.
Solo digo...
Solo digo lo que me pasa a mí, ¿eh?
Que no es un ad, cabrones.
Qué ratas que sois.
Qué ratas.
Qué ratas, de verdad, que sois.
O sea, no os digo nada.
Que era curiosidad.
Que de verdad no tenía ni idea qué era.
Os lo juro.
Os lo juro.
El pozo, ¿ves?
El pozo sí que sé qué es.
Y tiene buenos embutidos.
Grefusa.
De Grefusa ayer me comí en la sala VIP de la velada.
Me comí una bolsa...
No me acuerdo cómo se llama.
De tronquitos o yo qué sé.
Que no veas.
Y de Maxibon me quedé con unas ganas de meterme entre pecho y espalda.
Un Maxibon.
Es que había de todo ahí.
Estaban como todos los...
Ni...
Ni Bea.
O Naivea, como le queráis pronunciar.
Qué bueno.
Ha detectado a los próximos patrocinadores de la velada 5.
Vale.
Prime.
Que esta es la bebida.
No la he probado nunca.
No la he probado nunca.
No sé si...
No sé cómo estará.
¿Se llamaba Prime?
No creo.
A ver.
No.
Menos mal que no ha entrado en una página random.
Menos mal, eh.
La bebida de moda de los influencers.
No la he probado.
No tengo ni idea, eh.
Pero sí que sé que ahora está muy de moda.
Bebida Prime.
Web oficial.
No tiene una web oficial esto, ¿qué?
Drink Prime.
Ojo.
Hacemos un tu web a juicio.
Está chula.
Me gusta la página.
Me gusta, me gusta.
Me gustan las animaciones.
Muy bien las animaciones, eh.
Fijaos que las animaciones va de izquierda a derecha y cada una va saliendo.
Eso está muy bien, eh.
Eso, la persona que ha hecho esto sabe.
Sabe.
Porque muchas veces os he dicho que las animaciones, si las hacéis de golpe, quedan un poco raras.
Cuando son elementos, quiero decir.
Si hacéis todos los elementos de golpe, queda raro.
Pero ha quedado chulo.
Vale.
Revolut.
Que este sí que lo utilizo yo.
Mi banco favorito.
Me salva la vida.
Spotify, Spotify, Name, Spotify.
Y Vicio.
Pues mirad.
De Vicio es una hamburguesería.
Bueno, no sé si es una hamburguesería.
No sé si hacen algo más que hamburguesas.
Hostia, Vicio.com.
Voy a asegurarme que es la página web oficial.
Ganas de Vicio, vale, vale.
Tampoco suena bien.
Ganas de Vicio.
Pues no había probado las hamburguesas.
Las probé ayer por primera vez.
Y a ver, me gustó porque también es verdad que tenía más hambre que el tamagotchi de un sordo, ¿vale?
O sea, tenía más hambre que el tamagotchi de un sordo.
Y me estaba que me podía comer una columna perfectamente.
No es sad.
Que no me han pagado nada, amigos.
Que no me han pagado nada.
Que soy un pobre diablo.
Que no me han pagado nada.
No me han pagado nada.
Ojalá, eh.
Ojalá.
Si me quieres...
Vicio.
Ganas.
Tengo ganas de Vicio.
Patrocíname.
Patrocíname.
Me como ahora mismo una hamburguesa.
Se da de falta.
Que no, que no me patrocinan.
Solo os lo estoy comentando.
Que ayer estaban allí y me comí una.
Que es la primera que me había comido en mi vida.
Vale.
Sponsors, ta, ta, ta.
Y aquí, dentro del Anchor, lo que vamos a hacer es la imagen del sponsor.
Vale.
Vamos a tener la imagen del sponsor.
Vale.
Las imágenes no van a ser en Sponsors.
Porque yo básicamente no me he puesto.
Esto tiene que ser SVG.
Esto vamos a poner aquí que es el logo.
Logo del patrocinador tal.
Vale.
Esto, el Alt.
Importante.
Y aquí, esto, aquí se ha escapado algo.
Vale.
Vale, más cositas.
Porque, ojo, cuidado aquí.
Bueno, vamos a ver cómo queda primero.
Y ahora nos preocupamos de cosas.
Vamos a ver.
Vamos a ver por aquí.
Vamos a ver por acá.
Pam, pam, pam, pam.
Vale.
¿Esto es localhost?
Sí.
Pero claro, tengo que cargar en el index nuestra nueva Sponsors.
Nuestra nueva sección de Sponsors.
Esto por aquí.
Tu, tu, tu, tu, tu, tu, tu, tu.
Sponsors.
Vale.
Y ya tenemos.
Vale.
Uy, ¿por qué se me ha escapado ese...?
Ah, este name que he puesto por aquí.
Esto va afuera.
Vale.
Ahora lo arreglamos, ¿eh?
Que está un poco de aquella manera.
Bueno, primero, cosa que voy a hacer.
Vamos a optimizar esto porque esto quedará bastante abajo.
No hace falta de cargar la imagen de primeras.
Es innecesario.
Aquí vamos a hacer que el anchor este, pues, tenga un flex, justify center, item center,
para que se centren, ¿vale?
Pero quedan demasiado grandes.
Normal.
Vamos a ponerle un máximo.
Yo qué sé.
20.
20 menos, ¿no?
O sea, es que demasiado.
No sé si a lo mejor creo que aquí todos tienen como el mismo 128 de altura.
Todas tienen la misma altura.
Pues igual lo que podríamos hacer es que todos tengan la misma altura.
Yo qué sé.
H20.
H20.
¿Cuánto es H20?
No.
H24.
H24.
¿Cuánto es?
96.
Hostia.
96.
Pues todavía queda, ¿eh?
¿Cuánto veo?
28.
128.
No.
30.
Joder.
32.
128.
Sí.
Vale.
Pues H32.
Y a lo mejor...
Ah, bueno.
Lo que podríamos hacer es esto.
Que sean más pequeños para esto.
Vale.
Y aquí puedes tener un gradiente.
Vamos a hacerle el gradiente.
Vamos a hacer un VG gradient to bottom que vaya desde...
Yo me imagino...
No sé si será un white.
VIA transparent to transparent.
A ver.
Uy.
Casi.
Más o menos, ¿eh?
Vale.
Aquí hay alguna separación que también hace falta.
Igual no tanta.
Titi, titi, titi, titi, titi, titi.
Vale.
Y estos textos tienen que estar centrados.
Text center.
Vale.
Text center.
Vale.
Y por aquí...
Por aquí...
Por aquí ya van un poco más los tiros.
Creo que va es...
Hostia.
Claro.
Lo pasaje aquí...
Hostia, claro.
Es que a lo mejor aquí...
Es que los veo muy blancos.
Y por acá aquí no me parecen tan blancos.
Por el efecto ruido de delante.
Hmm.
Creo que tienen que ser un poquito más pequeños.
Como que me parecen demasiado grandes.
A ver.
Vamos a poner aquí 24.
24.
Hostia, pero todavía son muy grandes, ¿no?
24, ¿cuánto es?
Hostia, es que es bastante.
A ver.
12.
Ay, pero...
Ay, que es que esto no va aquí.
Esto está bien.
Esto está bien.
Me he equivocado.
Perdón.
Aquí.
Esto que...
A ver.
Más pequeño.
Vale.
Yo creo que por ahí más o menos.
Aunque es que todavía me parecen como muy...
Hay algunos como muy grandes y otros más pequeños.
Hmm...
Hmm, hmm, hmm.
¿Sabes?
O sea, por ejemplo, claro, Grefusa.
No sé si es por cómo son los SUVG.
O si tendríamos que tirar más del...
¿Sabes?
O sea, poner H auto y...
A trabajar más con la...
Con el ancho.
Claro, porque dependerá seguramente más bien de cada uno de los...
De los patrocinadores, ¿no?
Pero bueno, yo creo que así se ven bastante bien.
Así se ven bastante bien.
O yo lo veo bastante bien.
Y creo que más o menos tienen más o menos el tamaño.
Luego podríamos hacer aquí un group.
Vamos a hacer que esto, cuando hacemos el hover en el grupo, lo escalamos.
Un poquito.
¿Vale?
Algo así, con un transition.
¿Vale?
Y a ver, podríamos hacer...
Aunque esto va a ser un poco más complicado.
No sé si tendríamos que cambiar el contraste.
Que cuando hacemos hover a todo el anchor, pues lo que hacemos es contraste...
150.
Claro, es que el contraste no va a cambiar.
Es que es muy difícil que cambie.
Es que, ¿sabes qué pasa?
Que los gradientes no se pueden animar.
Entonces, si yo por lo que sea le pongo que cambie el gradiente, no va a quedar mal.
¿Sabes?
Yo le podría decir, vale, from white 30.
Puedo hacer que cambie, pero no se va a animar.
No pasa nada.
O sea, da igual.
Porque al final, pues se nota, ¿no?
La...
Que se está...
Pero claro, es una pena que no...
No se va a animar.
No se va a animar.
¿Ves?
Transition.
Aunque le ponga sol.
Da igual.
Eso es una de las grandes cosas que todavía le faltan, por desgracia, a CSS.
Animar los gradientes de forma sencilla.
Sería increíble.
Pero bueno, al menos ya tendríamos un poquito la sección esta, que yo creo que ya estaría.
Estaría bueno que animen todo ya.
Sí, sí, no, estaría bueno, ¿no?
Lo que podríamos hacer es poner dos elementos que se cambiase la opacidad y no sé qué.
Pero es un poco...
Me parece un poco polémico, la verdad.
Me parece un poco innecesario.
O sea, tampoco me parece tan importante ese joder, entonces da igual, ¿no?
Entonces, vamos a poner aquí, como estos son...
Vamos a poner target blank, rel, no opener, no referer, ¿vale?
Por temas de seguridad.
Y ya tendríamos al menos los patrocinadores, ¿vale?
Así que ya estaría.
Y si los pones en el orden de firma...
Vale, buena cosa.
O sea, me tiene un poco rayado el tema del...
Claro.
El tema de...
Yo he puesto el...
He puesto...
Veo que él, lo que es el ruido, lo ha puesto por detrás.
A ver, no pasa nada, lo podemos hacer.
¿Tiene sentido?
Porque creo que se ve bastante mal limpio.
Entonces, vamos a hacerlo.
Y así vamos a ver cómo queda todo lo demás.
Y vosotros me decís, a lo mejor...
¿Veis?
¿Esto cómo lo ha hecho él?
Tiene sentido, yo creo.
Bien.
Ahora se ve como más blanco.
¿Vale?
En el otro se ve como un poquito...
Creo que se ve más limpio, sí.
Yo creo que se ve mejor.
Yo creo que se ve mejor.
Tiene sentido.
Pues ya tenemos patrocinadores.
Entonces, las opciones de los patrocinadores.
David, no me mates.
No me mates, David.
¿Tendríamos el título así?
¿O podríamos hacer el título con la fuente normal?
¿Vale?
El que digáis.
¿Cuál os gusta más?
Bueno, no sería así, que me va a matar si os lo enseño mal.
Vale.
Los patrocinadores serían patrocinadores, sería uppercase, creo que sería volt, si
no ahora lo miramos, patrocinadores, semivolt, según esto, semivolt, semivolt, ¿vale?
Y sería más pequeño.
Al menos de como estaba, sería más pequeño.
Sería algo así.
¿Vale?
Y estaría más cerca.
Patrocinadores.
Sería algo...
Más o menos sería algo así.
Más o menos.
¿Sería así o del otro?
¿Cómo haces para acomodar las clases automáticamente?
Lo hace Pritier.
Con la fuente Atomic, mucho mejor.
Atomic, Anatomic.
Me gusta más normal, normal.
Como el diseño.
Con la extensión anterior se ve mejor.
Madre mía.
Madre mía.
¡Qué complicado!
Dios mío, qué complicado.
David, no me odies.
La que hemos liado, David.
A ver, es verdad, David...
Menos mal que David no me está viendo ahora mismo en vivo o en directo.
Es verdad que...
Le voy a hacer caso por ahora, ¿vale?
Le voy a hacer caso porque creo que la Atomic la vamos a ir introduciendo poco a poco.
Yo creo.
Bueno, entonces, por ahora le voy a hacer caso y voy a hacer esto, ¿vale?
Voy a dejar como lo ha hecho y luego lo revisaremos un poquito.
Como el diseño.
Y luego lo revisamos.
Venga, vamos con esta de la presentación que se ve re chulón.
Y así yo creo que esto ya más adelante lo cambiaremos.
Mañana haremos la parte esta de aquí arriba.
Mañana haremos el slider este.
O sea, que importante.
Y entonces ahora hacemos esta de la presentación para que tenga el vídeo de la presentación.
Y así ya tenemos dos secciones.
¿Vale?
Vale, vamos por aquí.
Alza.
Vamos a añadir Add Sponsors.
El Noise Background este lo que hemos hecho es Put Noise Background Behind Text.
¿Vale?
Aquí hemos hecho Add Sponsors Section.
Y en los Sponsors, pues, Create Sponsors.
Ah, alguien me había dicho, ponlo en el orden de cómo está aquí.
No sé en qué se ha basado para hacer el orden.
Entonces, no tengo ni idea si realmente, o sea, no sé cuál es el orden correcto.
Voy a mirar una cosa.
Voy a hacer una cosa.
Tengo una foto de ayer, que ahora os enseñaré, que me hice con Ibai.
Pero no la he querido enseñar porque la verdad es que digo, bueno, ¿qué le importa que me ha hecho una foto con Ibai?
Muy buen chaval, ¿eh?
Por cierto.
Alza, vicio.
Vale.
Vicio parece que es la primera.
O sea, como que la más de arriba es vicio.
Bueno, pues ya sabemos.
Pues vicio.
Mira qué cerca estaba, ¿eh?
Del Mariana y de Plex.
Estaba ahí justo al lado.
Estaba al ladito.
Un poco más.
Le huele al sobaco y todo.
A ver.
Ta, ta, ta.
Esto.
La velada.
La velada.
No sé qué.
Tenía los X-Buyers.
Los tenía ahí justo delante.
Ah, mira.
La hamburguesa que me comí.
No sé si se ve.
Bueno, no se ve por el reflejo.
No se ve por el reflejo.
No se ve.
No se ve por el reflejo.
Lo siento.
Lo siento.
En mis stories las habréis visto.
Es que estoy mirando cuál es el orden.
Vale.
Me voy a dejar esto aquí.
Vale.
Voy a dejar esto aquí.
Y así voy a poner el orden que tenían en la cartelera ellos.
Según el orden que ellos tenían en la cartelera,
que yo entiendo que será como el que tiene sentido,
tenían primero vicio.
Luego tenían Revolut.
Luego tenían el pozo.
Luego tenían el pozo.
No sé si lo habrán hecho aleatorio, pero bueno.
El pozo.
Luego tenían Grefusa.
Ya les preguntaré, ¿eh?
Que seguramente, pues, a lo mejor tiene algún tipo de sentido.
Luego tenían Grefusa.
Luego tenían Spotify.
Spotify.
Vale.
Spotify.
Lo ponemos por aquí.
Ta, ta, ta.
Luego tenían Cerave.
Qué bueno lo de Cerave.
Me encanta.
O sea, es que me parece un patrocinio muy interesante.
Muy, muy, muy interesante.
Qué curioso, ¿eh?
Que cada vez más...
A mí también me ha pasado.
No sé si os he explicado.
Que me han llegado unos patrocinios más random de gente interesada muy raras.
Muy raras.
No sé si os expliqué ese del vibrador.
El vibrador de hombre con Bluetooth y con API.
No, no es SAT.
No os estoy diciendo la marca.
Pero era un vibrador, os lo juro, ¿eh?
Os lo juro, os lo juro.
Es que estoy por buscar el correo.
Os lo juro por lo más sagrado.
Me llegó uno que era un vibrador de hombre que tenía API.
Se podía programar.
Os lo juro, ¿eh?
Os lo juro.
Es que no lo quiero buscar porque...
Por muchas cosas.
Pero os lo juro.
Buscadlo que os juro que existe.
Os lo juro porque, o sea, me escribió, lo vi y lo estuve revisando y era todo cierto.
Todo cierto.
Y yo dije, vale.
Use sponsors order as la velada presentation.
Y justamente, o sea, lo mejor es que sabían que era programador.
Lo sabían porque me dijeron, no, no.
Es que estamos contactando contigo porque se puede programar con la API que tenemos disponible.
O sea, era increíble.
Me pareció espectacular.
Vale.
Hostia, soy en 55.
Pues no me da tiempo más.
Pues mañana hacemos más.
¿Vale?
Ya tenéis la web disponible.
Mañana vamos a hacer...
Mañana iremos más a saco.
Mañana vamos a hacer esta parte porque la tenemos que poner.
Vamos a hacer esta parte porque me parece muy interesante tener ya el principio arriba.
Y haremos el contador también seguro.
¿Vale?
Ah, mira, ya la gente poniendo Isus.
Me cago en la leche.
Corregir evento del calendario.
Hostia, hostia.
La velada del año.
Evento de presentación.
¿Vale?
Pues mira, evento de presentación.
Esto es carne de PR, joder.
Carne de PR.
El evento...
Mira.
El evento...
El evento del año.
El presentador está por comenzar.
¿Vale?
Arranca la velada del año.
Entra a Twitch y no te lo pierdas.
Ta, ta, ta.
Eso...
Y además esto también habría que cambiarlo.
¿Qué era?
¿Qué día es?
El 13 de julio.
Es el 07 del 13.
07 del 13.
Esto habrá que ver a qué hora empieza y a qué hora termina que no lo sabemos.
¿Vale?
El evento de presentación ha empezado.
Todo esto ya no tiene sentido.
Pero bueno, el countdown lo haremos mañana.
Obviamente no hagáis PRs de secciones que vamos a hacer mañana porque las vamos a hacer en vivo o en directo.
¿Vale?
Fix calendar.
Fix calendar.
Y ya está.