Amigos y amigas, ¿sabéis lo que son los premios ESLAND?
Los premios ESLAND son los premios que da The Grefg a los mejores creadores de contenido de habla hispana.
De hecho, ESLAND va de España, la de Latinoamérica, Ant, de Andorra, ¿no?
Bueno, total, que vamos a crear la página web de los ESLAND.
Ya empezamos el otro día a hacerla, la página web de los ESLAND, y la hemos empezado de código abierto.
¿Vale? La tenemos por aquí, y así es como...
¡Ojo! ¿Qué pasa? ¿Qué no funciona?
¡Hostia! ¿Cuánto ha tardado en cargar, no?
¡Ah, vale! Ahora mejor, ahora mejor.
Pero así ha tardado un montón, ¿no?
¡Uy, Vercel! ¡Uy, Vercel! ¿Qué está pasando con Vercel?
Sí, sí, está tardando un montón.
Y, hombre, no es culpa nuestra, porque es bastante...
De hecho, está aquí haciendo algo en el servidor, 281.
¡Curioso! Algo está pasando en Vercel, y no sabemos el que es, porque esto no es normal, la verdad.
Bueno, entonces, el caso es que ya estamos haciendo el tema de los ESLAND,
y hemos hecho un montón de mejoras, y te voy a explicar porque alguien se preguntará,
Bueno, pero ¿por qué haces esto? ¿Por qué haces esto? ¿Por qué te metes con esto?
¿Qué quieres? ¿Que te denuncien?
¡Sí! No, no, no, no quiero esto, no quiero esto, ¿eh?
Lo primero, la página original, que está muy bien hecha, ¿vale?
Que está muy bien hecha, pero tiene algunas cosas que yo creo que son mejorables.
Por ejemplo, pues que ocupa mucho espacio, 21 megas, que tiene algunos saltos, ¿no?
Aquí, ¿veis? Se queda, al principio está la página como en negro, y luego, ¿ves?
Página en negro y luego aparece el vídeo.
El diseño está súper bonito, pero a mí me gustaba más darle una vuelta a alguna cosa.
Los hovers, mira este hover, que te pones aquí, se hace el hover ahí, y luego en el texto,
y encima se hace sin animación.
Había unos detallitos, había unos detallitos que no nos terminaban de encajar, ¿vale?
Y nosotros, ¿qué hemos hecho?
Hemos hecho desde cero la misma página, pero le hemos dado una vuelta.
Por ejemplo, un problema...
Hola, Midu, ¿qué software usas para que tu puntero tenga un modo grilla y puedas ver el alineamiento de los objetos?
Es un software secreto que yo hackeé la NASA en su día, lo descargué sin que nadie me desee,
y no puedo hablarte porque es secreto, no te lo puedo decir.
¿Es eso o podría ser algo del sistema, básicamente?
Esto es algo que viene del sistema para hacer captura de pantallas,
aunque, aunque, es verdad que yo utilizo CleanShot.
Es una aplicación CleanShot, CleanShot, esta.
Pero es lo mismo, es exactamente lo mismo, ¿eh?
Para que aparezca esto, esto lo tiene nativo Mac sin ningún tipo de problema, para que lo sepas.
Bueno, dicho esto, ¿qué hemos hecho?
Pues, por ejemplo, cuando tú esto lo ibas haciendo pequeño,
fijaos que no se veía muy bien porque esto es un SVG,
y ya aquí, esta es nuestra página.
¿Cosas que hemos hecho?
¿Ves? Esto lo hemos hecho con fuentes,
para que cuando hagas pequeño se quede mejor.
Hemos cambiado un poco el diseño.
También hicimos este efecto, bueno, este efecto a mí me encanta, ¿eh?
Este efecto, ¿ves este efecto de aquí de atrás?
Eso es porque hicimos un difuminado del vídeo que se integraba, básicamente.
Hemos hecho algunas cositas, también la animación.
¿Ves que aquí se anima el hover?
Mira, mira, qué bonito.
Y todo esto con CSS.
Esto, un momento, o sea, todo esto, un momento.
Hemos hecho también, pues esto, el menú por aquí, para que se pueda ver.
Todavía hay cosas por mejorar, y de hecho, la idea,
la idea es que ayudéis.
La idea es que os animéis y me ayudéis a seguir haciendo mejor la página,
porque obviamente no me va a dar tiempo hacerlo todo aquí en directo,
pero que entre todos, entre todos y todas, pues podamos mejorar e ir haciendo las cositas, ¿vale?
¿Qué tenemos que hacer hoy?
Pues hoy vamos a hacer también las páginas, porque, ¿ves?
Tenemos info y tenemos archivo.
Vamos a hacer las páginas, y ¿has visto esta transición que se hace entre una página y otra?
Pues esto lo vamos a hacer, y lo vamos a hacer mejor.
Lo vamos a hacer mejor.
No, en serio, lo vamos a hacer mejor.
Porque ya veréis, está súper chulo.
Y también, ah, y también hemos hecho otra cosa súper interesante,
que es el problema que, bueno, el problema no.
El tema es que los SESLAN está solo en español,
y nosotros hemos empezado a traducirlo también en catalán.
Lo hemos puesto en catalán, que es el idioma oficial de Andorra.
Entonces, tendremos que poner aquí arriba, pues, para cambiar de idioma, lo haremos y tal.
Pero está quedando súper bonita, y muchas gracias a la gente que está contribuyendo.
Vamos a ver las PRs primero, ¿ok?
Para que no tengamos ningún problema.
Me voy a traer todos los cambios.
No sé si tenemos cambios por aquí.
Sí, tenemos cambios, perfecto.
Muchas gracias a todos los que habéis hecho.
Fijaos, ¿eh?
35 purrico eso.
Sois lo máximo, sois lo máximo.
Empezamos pillando las PRs.
Vamos a ver la de J. Padeo.
¿Vale?
Ha agregado a la página con información de Kukuis y sus traducciones.
Joder, qué bien, ¿eh?
Muy bien.
Está petando.
Veo que está petando.
Y está petando...
¿Por qué está petando?
Está petando por algo.
Por algún motivo estará petando.
Un error de TypeScript.
Creo que está utilizando una key que no existe.
Bueno, no pasa nada.
La vamos a mergear y lo arreglamos nosotros en local en un momentito, ¿vale?
Muy bien.
Vamos con la otra pull request.
Añadir soporte para inglés.
¿Creéis que te haya sentido añadir inglés?
Yo creo que no.
¿Qué creéis, eh?
¿Qué creéis?
¿Qué creéis?
¿Vale la pena que añadimos inglés?
A ver, los SESLAN es España, Latinoamérica y Andorra.
Yo creo que no, ¿no?
Por Amuranz.
Amuranz, si ni siquiera fue a la velada Amuranz.
¿Por qué le más le va a importar el hecho este?
No sé.
Yo creo que solo para la comunidad hispana, ¿no?
Lo de catalán me parece un detalle para Andorra.
Pero no sé.
Yo el inglés, lo malo...
O sea, le agradezco un montón el trabajazo que se ha pegado.
Pero es que me parece como demasiado...
No sé.
Es como que vamos a tener que estar pendientes también de todo el inglés y tal.
No, pero por agregar cosas.
Es para personas de habla hispana, así que no lo veo necesario.
Bueno, va.
Lo voy a añadir.
Va.
Lo voy a añadir.
También veo que peta.
Vamos a ver por qué peta.
Lo voy a añadir, pero claro, el problema es que entonces ahora vamos a tener que traducir
también...
¿Ves?
De hecho, aquí hay algunos.
No existen SEO title.
O sea, otra vez el problema.
Claro.
Va.
Venga, va.
No lo vamos a añadir.
Lo voy a dejar ahí.
Ya veremos.
Y aquí, arreglar las imágenes y el contenido en la gala en la afombra blanca.
¿Vale?
Que dice por aquí.
Ah, mira, porque...
Ah.
Porque la ha puesto...
La ha movido de un sitio al otro.
No entiendo.
Ah, porque las imágenes estaban mal.
La alfombra...
Ah, porque estaba mal la imagen.
Ah, ah.
Que era al revés.
Ah, ah.
Vale.
Bueno, perfecto.
Pues nada.
Venga.
Merge.
Ok.
Venga.
Pues ya tenemos esto.
Me traigo los cambios.
Y ahora, pues entiendo que tenemos un error por ahí de TypeScript.
Tu, tu, tu, tu.
Esto lo quitamos.
Se supone que deberíamos tener aquí en nuestro...
Vamos a mover esto.
Esto lo movemos.
Y vamos a ver en local ya cómo tenemos nuestro proyectito.
Vale.
Tu, tu, tu.
Ay.
Hay tanto.
Tanta...
Tanto log.
Aquí.
4, 3, 2, 1.
Perfecto.
Vale.
Aquí tenemos la página tal y como la tenemos hasta ahora.
Y entiendo que la política de Cookies es esta página.
Que esta es la página que ha hecho.
Vale.
Cookies utiliza este sitio.
Bueno, nosotros realmente no utilizamos esto.
Pero bueno.
Una cosa que ya voy a hacer.
Que veo que no...
Que a mí personalmente no me gusta mucho.
En el Cookies Page lo que vamos a hacer aquí es más bien que tenga un Max Width de 3XL o algo así.
¿Vale?
Porque...
¡Uh!
¿Qué ha pasado?
Hola.
¿Me lo he imaginado yo?
¿O me ha borrado...?
¿Por qué me borra...?
¿Habéis visto eso?
A ver, a ver.
¿Habéis visto eso?
¿Por qué me está borrando...?
¿Por qué me está borrando...?
He guardado y cuando guardo me lo borra.
A ver, voy a recargar que parece que hay unas cuantas extensiones que me están pidiendo.
¿Qué cosa más rara?
O sea, eso es un ataque directamente...
¿Alguien ha puesto ahí un...?
Ahora, ahora.
¿Qué raro ha sido eso?
¿Qué raro era eso?
Vale, vale.
Ahora parece que sí que lo ha arreglado.
¿Vale?
Mira, aquí está el error este que decíamos que estaba dando el problema.
¿Vale?
Quitamos...
Quitamos eso.
Damos para atrás.
¿Qué raro era eso que estábamos guardando?
Vale.
Lo vamos a hacer un poquito más grande.
Esta política...
No sé qué.
Yo creo que a este texto le pasa algo, tío.
No sé si es que es muy grande la letra.
No sé si es que es muy grande la letra.
Pero como que se lee un poco regulinchis, ¿eh?
Y creo que a lo mejor le faltaría un poquito de normal...
A ver, leading...
No sé si...
De separación.
Y entre los títulos, estos títulos, H1, el H1 Styles y todo esto...
Yo creo que le faltaría más bien la separación por arriba.
¿Sabes?
Algo así.
Que me da la sensación que está como demasiado pegado.
Entonces, algo así, ¿no?
Ahora un poquito mejor.
Vale, un poquito mejor.
Al menos para dejarlo más o menos bien.
¿Vale?
12 del 12 de 2023.
Fecha de última actualización.
Joder, menuda forma más rara de poner actualización.
Vale.
Al menos ya hemos hecho esta página.
La hemos arreglado.
¿Vale?
Fix layout cookies.
Y ya está.
Ya nos podemos olvidar de las cookies.
Venga.
Vamos a hacer ahora la página.
Tanto de info como de archivo.
Sí, demasiado texto.
Pero tened en cuenta...
Sí, yo creo que le falta grosor.
Es que de hecho no sé si parece la misma.
No sé si parece la misma.
Pero bueno, a ver.
No pasa nada.
Pensad que esto muchas veces...
Esto lo hacen todas las páginas y esto no se lo lee ni el tato.
No se lo lee nadie.
Pero bueno.
Entonces, aparte de eso, ahora vamos a hacer la de info y la de archivo.
¿Vale?
Que son páginas en blanco.
Lo primero que tenemos que hacer por aquí...
A ver.
En pages tendríamos que poner...
Vale.
Info.
Lo tengo por aquí.
Y archivo.
Pero vamos a poner components.
Vamos a crear aquí unas pages.
Lo vamos a llamar pages.
Y vamos a mover aquí tanto la app como...
¿Vale?
Y esto también.
Vamos a crear componentes pages para reutilizarlo tanto en catalán como en español.
¿Cuánto les cobrarías por hacer la página?
Nada.
No les cobraría nada porque estoy haciendo aquí totalmente código abierto y tal.
Entonces, nada.
Pero a ver.
Si me gustaría saber cuánto le han cobrado.
Eso sí que me gustaría saberlo.
Eso sí que me gustaría saberlo.
Pero no sé.
No sé.
A ver.
Si la tuviese que hacer completa, completa, pues a lo mejor, no sé.
3.000 euros.
3.000 euros.
Una cosa así.
Estaría algo así.
Pero depende.
Depende de qué me pidiesen y a qué nivel.
¿Vale?
Entonces tenemos la app que sería como la home.
Tendríamos aquí info.astro.
Y vamos a poner también la página de archivo.astro.
¿Vale?
Esto van a ser las tres páginas que vamos a hacer ahora.
En la de index que teníamos aquí la app.
Vale.
Vale.
Pues aquí en info, que ya tenemos aquí.
Me voy a copiar esto.
Y aquí vamos a utilizar info.component.
¿Vale?
Esto lo vamos a poner por aquí.
O info.page.
Lo voy a llamar.
Info.page.
Y en el archivo, pues un poco lo mismo.
¿Vale?
Archivo.page.
Y aquí cambiamos archivo.
Y así ya tenemos las páginas de info y de archivo.
Y ya podemos irnos aquí a, por ejemplo, ¿cuál vamos a hacer primero?
¿Cuál hacemos primero?
La de info.
Infos de información, ¿no?
Bueno, esta facilita.
¿Qué le pasa a la página esta?
Esta es la página de ellos.
No sé por qué no carga.
Qué raro, tío.
A ver si refresco.
Ahora sí.
Me da la sensación que a veces tiene algo raro en cuanto a detectar si has hecho scroll.
A veces esto no funciona del todo bien.
Y luego tendríamos la de archivo.
¿Vale?
Vale.
Pues no sé.
Podemos hacer cualquiera de las dos.
La de archivo es más complicada porque obviamente tiene más información.
Bueno, podemos hacer la de archivo si os parece.
¿Vale?
Vamos con la de archivo.
Al menos el giro, la parte de arriba, la vamos a tener que hacer por las dos.
Venga.
Vamos a hacer el archivo page.
Vámonos al archivo page.
Vamos a copiarnos esta parte del layout.
¿Vale?
Veo que aquí puso algo de preload.
Esto es interesante.
Pero esto igual se podría hacer, por ejemplo, el logo.
Esto tiene más sentido.
Que en lugar de hacerlo aquí, lo hagamos en el layout.
¿Sabes?
Que en el layout pongamos aquí el preload del logo.
Esto lo podría entender.
Aquí hace el preload de dos fuentes.
Y esto es interesante.
Si me da tiempo, intentaremos optimizarlo.
Porque la fuente de Tomaso y Jura es la fuente que estamos utilizando aquí.
Porque esto al final, en lugar de ser un SVG, lo ha hecho con fuente.
Pero una cosa muy chula que se puede hacer, como solo vamos a utilizar
unas letras en concreto, lo que podemos hacer es cargar de la fuente
solo las letras que necesitamos.
O sea, podemos optimizar la fuente al máximo.
Y eso está bastante curioso.
A ver si luego nos da tiempo y lo hacemos.
Vale.
Entonces, vamos a copiarnos el layout.
Archivo, layout, layout.
Vale.
Aquí vamos a importar import layout.
Desde el layout.
Obviamente aquí tendremos que hacer también el title.
Por ahora le llaman archivo.
Y descripción, archivo.
Luego ya haremos esto.
Y aquí voy a crear un giro container.
Y tú dirás, ¿esto qué es?
Vale.
¿Qué es lo que pasa?
Una cosa que tienen ellos es que las tres páginas,
la parte de arriba,
esta, por ejemplo, tiene esta forma así,
pero cuando vas a archivo no sigue la misma forma.
A mí me parece una oportunidad perdida.
No sé cómo lo veis vosotros.
Pero a mí me parece una oportunidad perdida.
A mí me parece que sería interesante que todos sean exactamente igual.
Así que lo que voy a hacer es,
me voy a ir al vídeo, al componente vídeo.
Y aquí teníamos esto.
Flix.
Es que no sé exactamente por qué este absolute.
¿Esto qué es?
Que estoy pensando.
Ah, vale.
Esto no es importante.
Esto tampoco.
Relative.
Vale.
Pero, ¿dónde está?
Ah, cpv.
Esto está aquí.
Es que estoy pensando de sacar este cpv.
Y de dónde lo podríamos poner.
Si yo este cpv,
es que estoy pensando, ¿eh?
Si lo ponemos aquí,
¿esto cómo queda?
¿En nuestra página?
Vale.
Queda igual.
Ah, no.
Perdón.
Esto no es local.
Aquí.
Vale.
¿Queda igual?
¿Queda igual?
No.
No queda igual.
Porque se ha perdido el...
Claro.
Se pierde.
Ya veo.
Que se pierde el efecto este.
Ah, caca.
Bueno, no pasa nada.
Lo podríamos hacer...
Lo podemos hacer igual a mano, ¿eh?
Vamos a crear el giro container
para reutilizarlo en todas las páginas
o al menos en el resto de páginas.
Hacemos esto aquí.
El cpv, vamos a ponerlo aquí.
Y aquí lo que podríamos hacer
son dos cosas.
Por un lado,
podríamos hacer que aquí
vamos a traernos...
Bueno, mira.
Como no vamos a poner...
Vamos a poner un estilo en línea
y lo sacamos de astro.astro.props.style, ¿vale?
Es del clase...
No se puede asignar la...
A ver.
A ver.
Interface.props.style.string.
¿Vale?
¿Por qué dice que no se puede?
Es de la clase style.classstring.
No se puede asignar el tipo...
La propiedad style no existe en HTML attributes.
¿Querías decir style?
Hostia, no entiendo por qué...
¿Sabes?
O sea, no entiendo...
Sí, estoy claro que quiero decir style.
¿Qué le pasa a esto?
Astro.props...
Quiero pillar los estilos en línea.
Eso es lo que quiero.
Style, style.
Style, style.
¿Vale?
El tipo style string...
¿Pusiste...?
Ah, y es que puse style.
Hostia.
Vale, vale.
Ya está.
Gracias.
Estoy ciego.
Estoy ciego.
Gracias.
Menos mal.
Vosotros sois mis ojos.
Menos mal.
Vale, entonces lo que voy a querer es reutilizar ese estilo y aquí en Hero Container vamos
a poner un style que sea el background image.
Ahí está.
Y también le podemos poner el class.
Y entonces en el class...
A ver, es que estoy pensando...
Estoy pensando diferentes cosas.
¿Vale?
Si lo hacemos siempre el giro que sea con una imagen, igual se la podríamos pasar.
¿Sabes?
O sea, podríamos ponerle aquí vg no repeat, ¿vale?
Para no repetir.
Aquí el vgCover para que cubra toda la imagen y aquí en el style, pues mira, podríamos
directamente pasarle la imagen.
Y aquí decir que esto es el background image, background image, url y aquí pues pasarle
la imagen directamente.
¿Vale?
Esto soy yo pensando mientras lo voy haciendo.
Entonces, esta clase ya no la necesitamos y lo que podríamos pasarle aquí es la imagen,
que sea image, giro, no sé qué, no sé cuánto.
¿Vale?
Y esto, este giro container, vamos a ver si agregar importación, esto lo vamos a hacer
así, components barra, giro container, y ya tendríamos esta parte de aquí.
Así que este giro container, me voy a asegurar que le estoy pasando el giro image, me voy
a la carpeta public, ¿vale?
¿Dónde está el giro?
Monta en laptop, no me digas que no tenemos...
Archivo page.
¿No tenemos la imagen?
No tenemos la imagen, tío.
No hemos pillado la imagen, pero robemos la imagen.
Esta imagen hay que robarla.
Expropiese.
Expropiese.
A ver, esta imagen, nos vamos aquí, ¿vale?
Ta, ta, ta, y la pillamos.
Y wallpaper, ¿cómo le llamamos a esto?
Archivo, archivo, background, ¿vale?
Obviamente, ya que estoy, me voy a squash, y lo metemos por aquí, lo hacemos webp, ¿vale?
No lo veis, pero yo os lo enseño, aquí.
Lo vamos a hacer estilo webp, vamos a bajar un poco y todo esto, no se ven casi diferencias,
no se ven diferencias, muy poquitas diferencias.
Y mira, hemos bajado un 95%, que es una locura.
Archivo, background, webp, ¿vale?
Volvemos para aquí, y nos pillamos el archivo webp, aquí.
Y esto, archivo, background, webp, ¿vale?
Y ya con esto, pues ya tendríamos nuestro archivo, que no se ve.
Vamos a ver por qué no se ve.
Ajá, ¿por qué no te ves?
Vamos a ver por qué no te ves.
El tema es que creo que aquí, en el giro, no he cargado bien esto, ¿vale?
Aquí la he liado parda.
Vamos a ver, esto es que no puede ser así, no puede ser así.
Esto tiene que ser un template string, ¿vale?
Y en el template string, aquí, tenemos que pasarle la imagen así.
Esto sí que es correcto.
Ahora, tampoco lo pilla, pero ahora es diferente.
Ahora la razón es diferente.
Y la razón es que no le estoy pasando el sitio correcto.
Porque esto es public, sin el image este, ¿no?
Sería archivo, background, webp, y ahora sí que lo tenemos, ¿vale?
Ahora sí que lo tenemos, ¿vale?
Es verdad que es como demasiado grande, ¿no?
Como demasiado, demasiado grande, demasiado.
Hostia, sí que se nota un poquito, ¿eh?
Sí que se nota un poquito la pérdida de calidad.
Igual le podríamos subir un poco, o sea, tampoco hace falta apurar tanto.
Voy a descargarla otra vez y luego ya miramos si tiene sentido optimizarla más, menos y tal.
Ya al menos, o sea, en lugar de un mega, al menos son 166.
Es mucho menos.
Lo que sí que voy a hacer es que el giro yo creo que ocupa como demasiado.
Yo lo voy a bajar un poco.
Tampoco hace falta que sea tan exagerado.
Vale, ¿por qué esto?
Es que está como...
A ver, es que no me está haciendo caso esto.
No me está haciendo caso porque el este, cuando estoy aquí, ¿ves que es demasiado?
¿Por qué es demasiado?
Es por el aspect.
Ah, es por el aspect video este.
Claro, porque antes estábamos cargando un video en realidad.
Entonces yo creo que esto ya no va a tener sentido.
Esto lo vamos a tener que poner más bien así.
Vale, vale.
Ahora sí que tiene más sentido, ¿vale?
El tema es esto.
El tema es esto.
Vale.
Lo dejamos más así, que no llegue tan abajo.
Porque no hace falta, como no es un video, no hace falta que tenga una relación de aspecto de video.
¿Ok?
La imagen queda rara ser cortada en tres esquinas, ¿no?
¿El qué?
¿Cortada en tres esquinas?
Por la imagen.
No sé.
Claro, la podríamos poner directamente como la tenían ellos, sin poner cortes.
Pero, no sé, a mí no me desagrada, ¿eh?
Con los cortes.
Al menos para que tenga el mismo estilo.
Bueno.
Vamos a hacer una cosa.
Para hacer la animación, porque fijaos que entre páginas, ahora lo que está pasando...
Uy, perdón.
Entre páginas, ahora hace esto, ¿no?
Vamos a arreglar esto.
Vamos a arreglar esto para que esto tenga un efecto buenísimo de transición entre las páginas, ¿vale?
Vamos a hacer...
Y esto es que es tan fácil que da esta cosa.
¡Ay!
Hay que actualizar a Astro 4.1.
Tienes razón.
Ha salido Astro.
Una nueva versión de Astro.
Pues lo voy a hacer ahora, ¿vale?
Vamos a hacer...
Es que acaba de salir la Astro 4.1.
Ahora la hacemos, ¿vale?
Entonces, vamos a hacer una cosa.
Uno.
Voy a añadir la transición entre páginas, porque veis que ahora no hace transición.
Y ellos sí que hacen, que es una transición que yo creo que es un poco mejorable.
Pero vais a ver lo fácil que es.
Es que es lo increíble.
Me parece que es increíble cómo lo hace Astro.
A ver.
Lo que tenemos que hacer es...
Nos vamos a ir al layout.
Vamos a importar aquí el View Transitions, ¿vale?
Y esto lo traemos de Astro 2.1 Transitions.
Y este View Transitions lo ponemos, este componente, lo cargamos aquí.
¿Vale?
Guardamos estos cambios.
Y con esto, si ahora vamos aquí...
¡Madre mía, chavos!
¡Madre mía!
¡No me digáis que no está para lamerlo!
¡No me digáis que no está para lamerlo!
Pero fijaos qué maravilla.
Es que, o sea, es...
Es, vamos, en un plis.
En un plis.
Para que esto se vea todavía mejor, vamos a hacer una cosa.
Que en el Info, vamos a aprovechar...
Y esto mismo lo vamos a hacer en el Info.
Para tener la página de Info también, ¿vale?
Info, Info.
Y ahí lo podremos rellenar, las dos páginas.
Me voy a copiar este también, el background de Info.
Ah, es que aquí sí que lo hacen.
Aquí sí que lo hacen.
Qué raro, ¿eh?
Que en uno sí que lo hacen, en otro no.
Vale, pues aquí voy a hacer una cosa.
Me voy a traer otra vez este Wallpaper.
Me lo descargo.
Nos vamos a Squash.
Un poquito lo mismo.
A Squash.
Optimizar.
¡Optimizar las imágenes!
¡Tú!
¡Optimizar tus imágenes!
Que es que sois la leche a veces, tío.
Que dejáis unas imágenes de un mega.
Que es que...
Esta tampoco lo tienen tan mal, ¿eh?
Que es de 750K.
Pero no está mal.
Pero, hombre, se puede mejorar.
Porque WebP, a día de hoy...
Si es que ya casi que todo el mundo lo puede utilizar.
Y la diferencia es muy, muy poquita.
Muy poquita.
Y fijaos, es que estamos bajando un 78% de tamaño.
Es que es increíble.
Es increíble.
Y la diferencia es nimia.
No se nota.
Entonces, esto sería el InfoBackground.
¿Vale?
InfoBackground.
Nos vamos por aquí.
Y lo vamos a poner en el Public.
Aquí.
El InfoBackground.
Aquí.
InfoBackground.
¿Vale?
Entonces, ya tendremos las dos páginas.
Y al menos así, vamos a ser capaces de hacer esto.
¡Hombre!
Pero es que mira qué transiciones, tío.
Mira qué transición más chula, tío.
Mira qué transición entre una página y otra, tío.
Es que está guapísimo.
Y son páginas diferentes.
Fijaos aquí, con todo mi cariño, pero fijaos la transición entre páginas.
No está mal.
No está mal.
Pero entre que pega un salto ahí raro, está bien.
Pero aquí es como que se integra mejor, ¿no?
Es como que no se queda algo negro ahí, sino que directamente ¡pam!
Bueno, venga, continuemos.
Vamos a aprovechar para actualizar a Astro 4.1, ¿vale?
Astro 4.1 acaba de salir.
O sea, está calentito.
Como tú, pues está calentito.
Está calentito y trae cositas nuevas.
Trae nuevas reglas de accesibilidad.
Una nueva configuración para el Client Visible, que esto puede ser interesante para después.
De una nueva forma de codificar y las cookies.
Pero sobre todo por esto, el Extended Client Visible, esto está interesante.
Lo más chulo, lo más chulo, es que lo podéis actualizar con un comando.
Y lo vamos a probar.
O sea, acaba de salir.
Así que vamos a intentarlo.
Ponemos el comando.
Sería en tu caso npx, si utilizas npm.
Yo utilizo pnpm, así que hacemos pnpx, ¿vale?
Pnpx, Astro.js.upgrade.
Y vamos a ver qué nos hace esto para actualizar.
A ver a qué se dedica, qué lo cambia.
Mira, Astro se ha actualizado.
Oye, qué chulo, qué chulo.
Esto es una cosa que me encanta.
Me encanta de Astro.
El hecho de que las actualizaciones son tanto, no sé, como las dependencias.
Si quieres instalar Tailwind, lo que sea.
Es que no te dejes que preocupar de tú ir cambiando ni nada.
Mira, ya está.
Se supone que ya lo ha hecho.
Ha instalado las dependencias.
¿Vale?
Vamos a volver a reiniciar aquí.
A ver qué tal.
Y se supone que aquí deberíamos ver que todo funciona perfectamente.
Vamos a continuar con la página.
¿Qué página nos podemos poner?
La de archivo.
Me habéis dicho que quería ir la de archivo, ¿no?
Ediciones anteriores, review de la última gala.
Vale.
Vamos a archivo.
Vale.
En giro container vamos a ponerle aquí un slot.
Porque aquí entiendo que vamos a tener que poner esto de ediciones anteriores.
En ediciones anteriores.
Vamos a copiarnos el botón.
Ajá.
Aquí hay un main.
Vale.
El main yo creo que lo tendríamos que tener debajo.
¿Vale?
Y tendríamos aquí intro con el logo, descripción.
Vale.
Esto no es.
En el vídeo.
Aquí deberíamos tener algún sitio.
Deberíamos tener un botón.
¿Dónde tenemos el botón?
Ah.
Aquí dentro.
Vale.
Aquí dentro debe haber un botón.
Este botón lo vamos a necesitar.
Nos lo vamos a llevar aquí.
¿Vale?
Y esto lo vamos a poner aquí dentro.
Este botón va a ser más que nada todas las importaciones que faltan.
Vale.
Y nos falta el i18n.
Así que nada.
Tenemos que hacer toda esta magia.
Y nos lo traemos por aquí.
Pi, pi, pi.
Y ya teníamos el i18n.
Aquí también tenemos que poner i18n.
Tenemos que hacer i18n en diferentes sitios.
Revive la última gala.
¿Vale?
De esto es interesante porque revive la última gala.
Esto lo podemos cambiar.
Claro.
¿Qué es lo que hacen ellos?
Ellos lo que hacen es llevarte a YouTube.
No está mal.
Esto es una pena en realidad.
Esto es una pena porque...
¿Qué estoy viendo?
¿Qué es esto?
¿Qué es esto?
Por un momento he dicho, ¿dónde me he metido?
¿Dónde me he metido?
El tema.
El problema es, ¿creéis que está bien el hecho de darle y que te lleve a YouTube?
A ver, no está mal porque te lo abré en otro sitio.
Pero sería más interesante el hecho de que te lo cargase aquí directamente.
¿Sabes?
O sea, lo podemos mirar después si hacemos un dialog o algo.
Un modo cine.
Exacto.
Un modo cine.
Sería increíble.
Vale, por ahora lo vamos a hacer así, ¿vale?
Lo vamos a hacer que te lleve, pero lo vamos a pensar, ¿eh?
Lo vamos a pensar porque a mí me parece interesante que podamos hacer ahí una modal que directamente
te lleve y te diga, vale, vale, aquí, archivo, ¿vale?
Y esto en el giro container tenemos que poner aquí el slot.
Ponemos un slot que sea como el children, ¿vale?
¿Veis?
Ahí está ahí en medio.
Aquí me lo ha puesto.
No es donde debería estar.
Aquí tenemos que poner un...
Vale, relative ya lo tenemos.
Vamos a poner class, absolute, inset 0, margin auto.
El slot lo metemos dentro, ¿vale?
Me ha pasado de mí totalmente.
Flex, justify center, ¿vale?
¡Ojo!
Flex call, ¿vale?
Item center, ¿vale?
Vale.
Ya está esto pillando forma, ¿vale?
Y el tema del título, bueno, el título no parece nada interesante, o sea, parece como
algo grande, básicamente, con un margen ahí grandecito y ya está.
No sé, ah, bueno, sí que parece que es un poquito más negro y tal, pero bueno, no sé.
Tampoco tan negro.
Ah, sí, ¿no?
Tampoco parece tan negro.
Pero si no es semi, ¿cómo es?
Medium, eso, medium.
Sería algo así, ¿vale?
Review la última gala.
Vale, pues sería un poco esa la idea.
Quizás un poquito más de separación para que se parezca un poco y ya estaría, ¿vale?
Yo el botón lo voy a dejar así porque veo que aquí lo han hecho un poquito más pequeño,
pero no sé.
Y bueno, fijaos, fijaos qué maravilla.
Fijaos, fijaos, vale.
Ya tenemos la parte de arriba, ¿eh?
Podemos usar una fuente distinta para que resalte más y se nos integre el título de la home.
Es que la home, claro, la home utiliza esta fuente.
No sé, ¿creéis interesante que utilicemos siempre la fuente de los SESLAN?
Podría ser una idea.
Utilizar esta fuente de los SESLAN para los títulos, en lugar de utilizar esta que es un poco más aburrida.
No sé.
Si lo queréis, lo hacemos.
Más que nada para cambiar también un poco, ¿vale?
Y hacemos, utilizamos siempre la de los SESLAN.
Sí, para que quede más consistente.
Venga, lo podemos intentar.
El tema es que no sé si habrá puesto...
Vale, están aquí.
Tomaso, Jura...
Tomaso.
Perdón, hombre, de letra.
Tomaso.
Vale.
¿Cuál es el problema?
El problema es que aquí solo la había cargado aquí.
Vale, veo aquí algunas cosas.
Vale, las había cargado aquí.
Esto lo vamos a sacar.
Al menos la Tomaso.
¿Cuál es esta?
¿La Tomaso o la...?
Esta debe ser la Tomaso, ¿no?
Tu, tu, tu, tu, tu...
Tomaso.
Tomaso, vale, la Tomaso.
Pues venga, vamos a traer la Tomaso.
Esta la traemos y la extraemos para llevarlo al layout.
El layout es algo que se carga en toda la página y, por lo tanto, lo podríamos poner aquí.
Y así la vamos a tener disponible en todos los sitios, ¿vale?
La Tomaso.
Y esta la podríamos quitar de aquí.
Y lo mismo lo que habíamos hecho con el preload en el index, index.astro, la app.
¿Ves que teníamos aquí un preload de la Tomaso?
Esto nos lo vamos a llevar al layout.
Al layout.
Porque, total, es que esto lo vamos a querer entonces ya en todos los sitios.
No tiene mucho sentido sacarlo y tal.
De hecho, este slot no hace falta, ¿vale?
Sé porque había hecho lo de slot para tenerlo aquí.
Pero, bueno, esta la vamos a cargar siempre y ya está.
Entonces, ahora que tenemos esto, vámonos al archivo.
Y aquí vamos a poner font-tomaso.
Vamos a ver cómo queda, ¿eh?
También.
Bueno, no me desagrada, ¿eh?
Sí que es verdad que creo que el tracking tiene que ser un poquito más ancho.
Ancho.
Algo así.
No me desagrada, ¿eh?
No me desagrada, tíos.
Muy bien, ¿eh?
Es que para eso os tengo.
Yo la haría así, ¿sabes?
Algo como separar.
Como separadas, porque creo que estábamos juntas.
Pero así la veo bien, ¿eh?
Me gusta, me gusta, ¿eh?
Esto ya no lo necesitamos porque creo que solo tiene un estilo.
Así que ya la teníamos así.
Yo lo pondría un poco más grande.
¿Más grande?
Joder, cuántas cosas queréis, ¿eh?
Bueno, pues ya está.
Ediciones anteriores.
Así, ¿eh?
¿Os parece?
Por accesibilidad no deben ser los textos en minúsculas.
¿Por accesibilidad los textos en minúsculas?
A ver, en este caso podemos poner ediciones anteriores.
Y esto ponerlo aquí en uppercase, ¿eh?
Que supongo que es a lo que te refieres.
¿Oy?
¿Eh?
¿Por qué no...?
Ay, porque le he puesto...
Ahora.
Ahora, así, ¿vale?
Entonces, ¿qué más tendríamos aquí en el archivo?
Una vez tenemos aquí...
Vale, aquí se viene algo interesante.
Y esto lo puede complicar todo.
Porque fijaos que tiene primera edición, segunda edición, ¿no?
Y hay aquí como dos botones, bueno, dos pestañas,
en las que en una carga una cosa y en otra en otra.
Bueno, aquí se vienen cosas.
La galería, la galería, los serlan en números.
O sea, que aquí hay cosas.
El tab lo voy a dejar lo último, ¿vale?
Porque el tab lo podemos hacer con un query string,
pero me parece lo menos importante.
Porque me parece más importante todo lo demás.
La galería o...
Bueno, este va a ser el más complicado, ¿eh?
Los ganadores va a ser el más complicado.
Y no sé si nos va a dar tiempo a hacer las animaciones.
Los números sí que lo podríamos hacer.
Los números es un momento.
E incluso podemos mirar de hacer el efecto.
El efectillo este.
¿Veis el efecto?
Esto lo podríamos hacer.
Yo creo que empezamos con los números.
Va.
¿Cómo se llamaría esta?
Los números o...
No sé, ¿cómo le llamamos al componente los números?
Contadores.
Los contadores.
Numeritos.
Los números.
Vale.
Números.
Números punto astro, ¿vale?
Vamos a hacer algo.
Esto es muy interesante porque vamos a utilizar también PRIAC.
Y vamos a utilizar...
Vamos a utilizar...
Mira, voy a hacer una cosa rápida para tener esto por aquí.
Me voy a copiar todo este HTML.
Aunque a ver, ¿qué hace?
Noticia de prensa.
Me voy a copiar el HTML, más que nada para tener toda la información.
Y ahora la adapto un poquito, ¿vale?
Porque, por ejemplo, todos estos data, no sé qué, no sé cuánto,
todo esto no lo necesitamos.
Todo esto fuera.
Todo esto también.
Fuera, fuera, fuera, fuera.
Vale.
Ok.
Luego, los SELAN en números.
Esto es interesante porque aquí nos da la oportunidad de hacer una cosa muy chula.
¿Por qué?
No solo por la animación, que lo podríamos hacer en JavaScript y tal.
Pero una cosa que es interesante es el hecho de, a veces...
Sí, son muy grandes, ¿verdad?
Yo también opino lo mismo.
Son como enormes, tío.
Son como demasiado grandes los números.
Además, creo que podría ser horizontal.
Tampoco podría ser tan pequeño.
O sea, tan grande.
Creo que se quedaría mejor incluso.
Vale.
Los SELAN en números.
Vale.
Está claro que los SELAN en números, esto sí que entiendo que debería ser un 5XL.
Podríamos utilizar la Tomaso aquí otra vez.
Juan Tomaso.
Los SELAN en números.
Este SECTION no vamos a necesitar que tenga una clase.
De hecho, las clases.
Estas clases de CONTAINER y tal.
Esto fuera.
Aquí salto de línea.
Salto de línea.
Todas estas clases.
Esto fuera.
Fuera.
Este ID.
Esta clase también.
Todo esto fuera.
Fuera.
Fuera.
Vale.
Esto lo vamos a hacer de otra forma.
Sin esas clases.
Para que quede más limpio.
Vale.
Lo que es interesante es esta parte de aquí.
Que necesitamos que de alguna forma reaccione y se anime.
¿Vale?
Entonces, lo que vamos a hacer es utilizar PRIAC solo cuando tenga sentido.
¿Vale?
¿Qué es PRIAC?
Vamos por partes.
Uno.
PRIAC es una alternativa liviana de RIAC.
¿Vale?
Que ocupa muy poco.
Lo segundo.
Vamos a hacer que solo se cargue el componente cuando tiene sentido.
¿Y qué componente vamos a utilizar?
A ver.
Podríamos use progressive number.
Hay un montón de componente.
Hook.
RIAC.
A ver si lo encuentro.
Yo creo que...
Bueno.
No pasa.
Use progressive count.
Es que hay un montón de...
Pues ahora no voy a encontrar.
Bueno.
No pasa nada.
Porque en la midu first, si no me equivoco, alguien...
Y si alguien se sale de una biblioteca, que me lo cuenta.
Tendríamos aquí en hooks...
Tu, tu, tu.
Aquí hay un countdown.
Ticket count.
Creo que este, el ticket count, utilizaba el progressive number.
¿Vale?
Tenemos un hook que es use progressive number.
¿Vale?
Que este hace ya toda la parafernalia esa de mover los números para arriba y para abajo y tal.
Que ahora estoy dudando si este realmente hace la animación.
¿Sabes?
¿Esto realmente hace una animación?
¿Esto hará una animación o no?
Este...
Ah, tengo dudas de que si esto haga una animación.
Porque creo que este hace una animación, ¿no?
¿Este?
¿Este hace una animación o no hace una animación?
Sí que hace una animación, ¿no?
De...
Ah, no.
No hace...
Vale.
No hace la animación.
Lo que hace es contar.
Vale.
Como es contar, es más fácil.
Y de hecho, lo vamos a hacer con esto porque es bastante fácil.
¿Vale?
Es React Animated Counter, me dice en el chat.
Este está bastante chulo.
A ver.
¿Me suena?
Lo que pasa es que este es un poco aburrido, ¿no?
Porque como que va de uno a otro y hace como un movimiento doble.
Claro.
La idea es como que haga un counter para arriba.
Y esto se puede hacer con un efecto bastante fácil.
En lugar de mover así, que queda un poco raro.
Yo creo que me gusta más el hecho de que sea como progresivo, ¿sabes?
Entonces, a ver, vamos a probar esta.
A ver cómo queda.
Y lo más interesante es que solo va a cargar.
Y esto vais a ver que es muy interesante porque vamos a hacer que solo cargue cuando realmente lo necesitamos.
¿Vale?
Entonces, vámonos por aquí.
Components.
Podríamos poner aquí una parte que sea hooks.
Y aquí, pues, el use progressive number.ts.
Podemos utilizar TypeScript.
Me lo voy a copiar tal cual.
Vale.
Veo que aquí tenemos cositas que falta.
Ahora la arreglamos.
¿Veis aquí que me dice que no tenemos PRIAC?
Lo bueno que podemos tener aquí es que le podemos decir, oye, Astro, quiero añadir PRIAC.
¿Vale?
Y te lo configura ya todo sin ningún tipo de problema.
El contador va a estar contento con esta feature.
Qué bueno.
Pues sí, sí.
Desacelera la cuenta cuando se acerca al total.
Yo creo que la que tenemos también lo hace.
Si no, ahora lo veremos.
RIAC count up.
Esa también me suena.
Count up.
Lo malo es que necesitaríamos RIAC.
Y me da un poco de ladilla tener que utilizar RIAC.
¿Sabes?
Mira, esta está buena.
Esta está buena.
Este está bastante chulo.
Este está bastante chulo.
Ay, vaya.
Este está chulo, pero joder, es antiquísimo.
Súper antiguo.
A ver.
Me estaba mirando a ver si no lo podíamos copiar.
Sin necesidad de hacer nada más.
Yo creo...
Vamos a intentar con el...
Mira, este está muy chulo.
Use count up.
Este está muy chulo, ¿eh?
¿Ves?
Esta es un poco la idea.
Esta sería un poco la idea.
Hacer algo así.
Sin necesidad de...
Lo malo es que, como siempre, y esto es lo malo que a veces tenemos con estas cosas,
que todas estas bibliotecas están pensadas para RIAC.
Pero bueno, muy a las malas, la adaptamos en un momento para RIAC.
Es que RIAC, ¿sabéis lo que pasa?
Que es una biblioteca demasiado grande, tío, RIAC, para una cosa tan pequeña que queremos hacer.
A veces tiene sentido, pero es que a veces, otras veces, como en este caso, no tiene tanto sentido.
Vamos a probar el que yo me he robado.
Y luego miramos si no lo que tenemos, ¿eh?
Vale.
Vamos a ver aquí.
Hemos añadido PRIAC.
Nos dice que necesita instalar eso.
Le decimos que sí.
PRIAC, al final, lo bueno que tiene es que tiene una API que se parece muy, muy mucho a RIAC,
pero es que ocupa muy poco.
Y está genial.
¿Cómo lo haces con Vanilla?
Se podría hacer con Vanilla, pero es un poco más rollo.
Porque tienes que estar actualizando ahí el DOM, te quedaría un poquito más de rollo.
Si hace falta, mira, Barolt me está pasando uno hecho en Vanilla.
O sea que igual no lo podemos copiar también.
Joño, esto está súper bien, pero si es súper fácil.
Pero si está súper bien esto.
Tiene súper poco de JavaScript.
Madre mía.
Mira, vamos a utilizar el de PRIAC solo para que podamos ver cómo se cargaría el framework.
Y lo que tiene interesante el Client Visible, que eso está súper chulo.
Y luego, pues, si hace falta lo movemos otra vez al de Vanilla, ¿vale?
Pero es que me parece muy interesante porque mucha gente a veces se pregunta esto.
De cómo cargar una biblioteca y de lo que sea, ¿vale?
Entonces, fijaos que ejecutas un comando y le dices, oye, quiero añadir PRIAC, que podría ser RIAC, puede ser VIEW, puede ser lo que sea.
Y luego te dice, vale, pues voy a estar en las dependencias, voy a añadir esto en la configuración.
Esto te lo añade en el astro.config.
Y ahora aquí, pues ya te hace los ajustes necesarios para que lo puedas utilizar.
Y ahora ya podemos utilizar un componente de PRIAC.
Ahora, si bien components, pues pongo aquí el, yo que sé, no sé si hay que llamarle count o progressive, progressive o countup.
Lo voy a llamar countup para copiarme encima de todo lo que hemos visto.
En el countup lo que podemos hacer es utilizar el use progressive number este, que es el que, es un custom hook que hace básicamente esto.
Que te pone la duración, el valor inicial y el valor, y al final le dices hasta dónde quieres llegar y todo esto, ¿vale?
Entonces, lo que vamos a hacer con esto, lo cargamos de barra hooks, no sé si esto, sí, creo que sí que funciona.
Export const countup y aquí le vamos a poner el initial, initial, final, duration.
Vale, vamos a traernos aquí, a ver qué es lo que devuelve esto, el current y el set value, ¿vale?
Entonces, tendríamos aquí count y set count, o, bueno, count y set count, sí, vamos a hacerlo así, ¿vale?
Y aquí ya podríamos poner el count y aquí vamos a ponerle los tipos.
Le decimos que initial es un number, final un number, duration un number y esto yo me estoy inventando aquí ahora, ya está.
Entonces, estas van a ser las props, initial, final y duración.
Y lo que vamos a hacer por ahora, vamos a hacer esto, obviamente aquí lo que tendríamos que hacer en el set count, que no sé por qué, a ver, use progressive number, initial value, duration y delay.
Sí, pero no se le puede, ¿sabes? O sea, no se le dice, no se le puede decir directamente cuál va a ser el final, sino que eso tiene que pasar desde fuera.
O sea, es un poco set current, set value, ¿qué hace set value? Llama el callback, hace la diferencia y set target, ¿vale?
O sea, es un poco raro que eso tienes que pasar desde fuera, molaría que fuese un componente que ya se lo puedas hacer y ya está.
Pero bueno, este será el componente y ya está, no importa.
Entonces, cuando hacemos el efecto, cuando se cargue por primera vez este componente, haremos el set count del final y ya está.
Esto es simplemente lo que tenemos que hacer, ¿vale? Un componente que utiliza el custom hook, pensándolo bien, era mejor vanilla por tema de rendimiento.
Bueno, no pasa nada. El tema es que vamos a utilizar este componente donde le decimos el número inicial, el número final, la duración que debe tener, ¿vale?
Vamos a pasarle a esto, initial value, duration y delay. Aquí tenemos initial value y duration. Es así, ¿vale?
Y el delay es lo último, pero le vamos a dejar el original, ¿ok?
Y aquí, cuando se cargue esto, en el efecto, hacemos el set count.
Lo que es muy interesante de esto, vais a ver, es que vamos a conseguir algo muy chulo.
Y es que fijaos que aquí, la gente esta, cuando cargas, cuando llegas a los números, cuando llegas a los números es que se pone a moverse, que tiene sentido.
Pero, esto seguramente lo habrán hecho detectando cuando está cargando esto, no sé cuánto JavaScript están utilizando aquí, no tengo ni idea, ¿vale?
Si está detectando con un intersection observer, pero esto, por suerte, Astro lo hace por nosotros de forma automática, que es increíble.
A ver, imaginemos que estamos en el números, ¿vale? Este componente números es el que vamos a cargar en archivo.
Así que vamos a poner dentro del main, vamos a cargar nuestro componente números, ¿vale?
Dentro de números, aquí que tenemos el 227, lo que vamos a hacer es utilizar el count up, este, que es el componente que he creado, y le vamos a poner que el número inicial podemos empezar con lo que creamos.
Con el 1, con el 0, puede ser lo que creamos.
El final, vamos a decir que sea justamente el número final que queremos que tenga, que era 227, si no me equivoco, ¿no?
227 noticias en prensa.
Hostia, joder, la verdad es que no veas, ¿eh?
Tela marinera, cómo mueven.
Y luego tendríamos la duración, que bueno, la duración podemos hacer que sea opcional, ¿no?
Porque la duración, si no se le pasa, pues tampoco pasa nada, ¿vale?
Y no se puede asignar el tipo, vale, ya está.
Y con esto, si vamos aquí a nuestra página ahora, ¿vale?
Bueno, esto obviamente hay que mejorar los estilos, se ha quedado ahí en el 0, vamos a arreglarle los estilos, y ahora le damos un poquito de vida al asunto, ¿vale?
Vamos aquí, los Erlan en números, vamos a poner aquí Max, no sé, 5XL, esto lo hacemos un poquito más grande, los Erlan en números, MXAuto, le vamos a poner bastante separación por los lados y tal.
Bueno, igual no tanto, porque si no, no hace esto bien.
Vamos a poner aquí un TextCenter, que tenga un TextBalance, ¿vale?
Vale, ahora los números, vamos a ver.
Aquí tendríamos el CountUp, ¿vale?
CountUp, esto sí que tiene que ser un poquito más grande, obviamente.
Así que lo hacemos un poquito más grande, 3XL, FontVault, ¿vale?
Incluso más, vamos a hacer que sea bastante grande.
¿Cómo lo hacen ellos?
Claro, es que lo hacen muy grande, ¿eh?
Hostia, es que yo creo que ahí se les ha ido un poco, pero bueno, pasa nada.
Vamos a hacer lo primero que se vea, luego ya nos preocuparemos.
Yo creo que en estos casos no tiene mucho sentido utilizar párrafos, ¿eh?
Voy a ver, a ver si esto funciona, ¿vale?
Noticia de prensa.
Vamos a hacer más grande los números.
Vamos por aquí, en números, ¿dónde hemos dejado números?
Aquí, ¿vale?
Span, este span me lo voy a copiar aquí unas cuantas veces.
Con este, aquí, este, por ejemplo.
Y luego os voy a enseñar una cosa muy chula para que quede todavía mejor.
¿Vale?
Aquí tendríamos los números.
Yo creo que esto debería ser span.
O sea, no creo que esto tenga sentido que sea...
Yo creo que no deberían ser párrafos.
Yo creo que deberían ser span, la verdad.
No tiene...
Es que me da la sensación que no tiene sentido.
No tiene sentido sean párrafos.
Pero bueno, ahora lo comentaremos.
Y de hecho, esto tampoco.
Es que no es necesario.
O sea, cuando tienes texto, no siempre, ¿sabes?
No siempre tiene que ser de forma obligatoria un párrafo.
Un párrafo es para lo que es, ¿sabes?
¿Vale?
Vamos a poner aquí el count up también.
Hostia, este tiene decimales.
Yo no sé si con decimales.
Ah, tengo dudas.
Vamos a ponerlo, a ver.
Si no, ya buscaremos uno mejor.
El count up y...
3,2.
Pues no tengo ni idea, sinceramente.
Si esto...
Vale, count up.
¿Cuánto era?
3,2.
Vale, 3,2.
Y el más lo metemos dentro también.
Quitamos el párrafo.
Yo es que creo que el párrafo no debería ser necesario.
Me parece raro, sinceramente.
Y esto también debería estar dentro, ¿no?
Vamos a poner esto por aquí, esto por aquí.
Vale, span, span.
Creo que he quitado todos los spams, ¿verdad?
Sí, sí, he quitado todos los spams.
Bueno, obviamente ahora no está del todo bien todavía, pero vamos a hacer algo.
Como podéis ver, todavía no está funcionando.
Y eso es por...
Y esto es muy interesante.
Abre las orejas.
Abre las orejas, ¿eh?
El tema es que lo que pasa aquí es que ahora mismo se está renderizando esto.
Se está renderizando de forma que podéis ver que sí que se renderiza el componente de Priak, pero no está vivo, ¿sabes?
O sea, no se está ejecutando en el cliente.
Esto es como funciona Astro por defecto.
¿Por qué?
Porque lo que hace justamente es decir, vale, tú quieres renderizar este componente de Priak, de React, de Vue, de lo que sea, pero lo que voy a hacer es renderizarlo de forma estática, ¿vale?
O sea, no voy a ejecutarlo en el cliente.
Esto es una de las razones por las que Astro es tan increíblemente bueno en rendimiento.
Pero obviamente aquí tenemos una excepción porque sí que quiero que se ejecute también en el cliente.
Para decirle que se ejecute en el cliente tenemos unas cosas que se llaman directivas que es decirle client y le dices cuándo se tiene que cargar.
Le puedes decir cuando está en idl, cuando se carga la página, según la media query, solo se carga en el cliente y no se carga en el servidor.
O cuando está visible, y esto está muy chulo porque cuando le decimos cuando está visible, va a detectar que cuando ese componente esté visible, entonces es que va a descargar el JavaScript y va a hacer que se ejecute.
Y bueno, ya podéis ver que queda un poco raro, pero funcionar funciona.
Bueno, tenemos que arreglarlo en diferentes motivos, ¿vale?
Porque, pero ahora funcionar funciona.
Fijaos, mira, si hacemos esto, me voy para arriba, claro, es que me tengo que, me quiero ir para arriba ahora, y bajas, ¿ves?
Lo está haciendo justo cuando lo necesita.
A ver, ahora podemos arreglar el tema, por ejemplo, la duración me parece demasiado rápida, ¿vale?
El delay le podemos poner 50 milisegundos, eso por un lado.
Y luego cuando bajamos, ¿veis que justo cuando bajo, justo cuando bajo es cuando empieza realmente a hacerlo?
¿Veis que es solo justo cuando bajo?
No lo hace antes, no lo hace antes, sino que ha detectado automáticamente cuando tiene que hacer.
Ahora el problemilla es que no sé por qué se pone a hacer aquí, no sé por qué se pone a hacer, te, te, te.
Podríamos ponerle uno más que sea decimales o algo, porque veo diferencia.
Next step, set step, set target, next target, si no el valor target, uff, ahora entender esto es un poco complicado.
A ver, set current, si no sé qué, no sé cuánto, si no sé qué, no sé cuánto, ¿dónde está el tema?
Porque veo aquí que hay más max, hay un absolute, el absolute daría igual.
Ah, porque justamente lo que tendríamos que hacer, claro, en alguno, por ejemplo, en este sí que estaría bien que tuviésemos un decimal,
pero en este molaría no tener ningún decimal.
Si yo le quito, por ejemplo, en el current, que debería ser lo que tenemos por aquí, current, tu, tu, tu.
Si aquí, al final del todo, ponemos current.toFix0, claro, es que si le pongo tuFix0, igualmente va a aparecer un, no sé por asignar el tipo number, vale, tu string.
Qué raro esto.
Ah, al tipo number.
Vale, si le pongo que sea fix0, le quita el, sí, vale, vale, vale.
Entonces, podemos hacer una cosa, podemos hacer que le podamos pasar el número de decimales que queramos que tenga.
¿Sabes? O sea, le podemos decir que por defecto, aquí podemos ponerle, vamos a quitar este, decimals.
Le podemos decir que por defecto sean cero, ¿vale?
No queremos que tenga decimales, le ponemos aquí decimals.
Y si por lo que sea, aquí vamos a poner también decimals, vale, y aquí la duración, decimals, decimals, vale, la decimals, decimals.
Vamos a poner que esto, number, vale, ponemos que por defecto sea cero, sí, vale.
Entonces, que por defecto sea cero y cuando nos vamos a los números, lo que podemos decirle es, claro, en este, por ejemplo, podemos decir que los decimales, que tenga solo uno.
Bueno, que este decimal sea solo uno, ¿vale?
Y ahora ya queda bien, tin, tin, tin, vale, y ya está.
Al menos para que quede bien.
Vale, una cosa que, claro, aquí tiene sentido, pero ¿veis que pega muchos saltos?
Una cosa que se podría hacer, faltaría más velocidad, más velocidad.
A ver, lo que molaría es que tuviese un efecto ease, ¿sabes?
Que fuese como más, que empezase rápido, pero luego cada vez fuese más lento.
Eso se podría hacer también y quedaría bastante chulo.
Pero bueno, ya lo veremos más adelante.
Hay un error muy común que, fijaos que pega como muchos saltos.
A ver, hasta cierto punto tiene sentido, pero se puede mejorar bastante.
De hecho, aquí se ve el error este.
Bueno, error, como lo queráis cometer, ¿eh?
Pero ¿veis que cuando estás aquí, como que los números no se están quietos?
Bueno, tendríamos que utilizar los números tabular numbers.
Justamente, yo creo que aquí tabular nums.
Tabular nums.
Y esto lo que va a hacer es que los números ocupen todos lo mismo.
¿Ves? Ahora queda como más quieto.
Y aquí aprovechamos, lo juntamos un poquito, le hacemos que el tracking sea tighter.
¿Vale? Y ya está.
Y ahora sí que hace el efecto, ¿sabes? Ese efecto mucho más.
Obviamente, lo de noticias, esto habría que mejorarlo.
Lo vamos a tirar abajo.
Pero está chulo porque ahora no pega ese salto.
Solo pega el salto, obviamente, cuando no tiene que enseñar nada y no sé qué.
Pero se ve mucho mejor que no que los números estén bailando.
Eso es básicamente la idea.
Entonces, vamos a poner aquí flex, flex call, justify center, item center.
¿Vale?
Esta va a ser un poco la idea.
Vamos a poner aquí, yo creo que si ponemos aquí otro div, esto lo ponemos así.
Y esto, class, flex.
Bueno, esto va a ser row, gap2.
Justify start.
Hostia, no, justify start.
Es que claro, igual son demasiado grandes también.
Es que no caben.
Entonces, vamos a hacer los números un poquito más pequeños también, que es lo que estábamos comentando antes.
¿Vale?
Y aquí esto lo vamos a poner aquí, esto aquí y esto aquí.
¿Vale?
Vale.
Ya más o menos.
Y ahora lo que tendríamos que hacer a lo mejor...
Bueno, podríamos hacer que sea grid, grid calls 3, ¿no?
Y que cada uno sea la separación.
¿Vale?
Margin...
10...
20...
Vale.
Pues así sería un poco la idea.
¿Vale?
Así sería un poco la idea para el tema.
Los serlan en números.
Y ya está, ya lo tendríamos.
En un momento, ¿eh?
No lo esperabais que en un momento iba a aparecer esto así.
Pues esto sería un poco la idea.
No sé si el de visualizaciones...
La verdad es que es bastante bestia aquí, pero yo creo que se podría quedar mejor así, ¿no?
Básicamente para evitar noticias en prensa.
A ver, lo que sí que podríamos es mejorar noticias en prensa.
Bueno, no sé, lo podríamos poner así.
¿Ellos lo hacen en mayúscula?
Podríamos poner en mayúscula.
No pasaría nada.
A ver, aquí, aquí, tatatac, class, uppercase, ¿vale?
Noticias de prensa.
Lo que sí que a lo mejor tendría sentido hacer...
No hace falta que sea tan, tan, tan...
Algo así, ¿no?
Para darle un poquito de toquecito, ¿no?
Pero es verdad que como este parece...
El tema es que creo que todos ocupan lo mismo, pero no sé si es porque no está centrado.
A ver, yo creo que sí que está centrado.
Lo que pasa es que visualmente parece...
Habría que arreglar el responsive, ¿eh?
Que todavía no nos ha dado tiempo, ¿eh?
Pero, a ver, estos ocupan los tres lo mismo, ¿verdad?
Sí que ocupan los tres lo mismo.
Lo que pasa es que visualmente parece, parece que no ocupen lo mismo por culpa de que este ocupa como más espacio.
No sé si creéis que eso es una cosa que puede ser molesto o no, ¿no?
El shadow.
¿Queréis el shadow este?
Esto es un texado, básicamente, ¿no?
Esto es un texado.
El símbolo más.
Sí, el símbolo más.
Claro, también se podría quitar un poco de espacio del símbolo más y ya está.
Falta el espacio entre el 9 y la M.
No falta espacio.
Ah, falta, sobra.
Sobra de espacio, dirás, ¿no?
En todo caso.
Claro, es que aquí...
¿Ves?
Aquí no tienen espacios.
Lo podemos hacer...
Claro, es que está todo centrado.
Lo que pasa es que ya os digo que es un tema visual de cómo queda, ¿eh?
¿Dónde está la M?
Aquí y este tendría que estar pegado también.
O sea, tendrían que ser todos pegados.
Lo que pasa es que ya os digo...
El texto yo creo que está centrado, ¿no?
Text, enter.
Sí, sí que está centrado.
Lo que pasa es que es por cómo quedan la...
Otra cosa que se podría hacer, que podría ser interesante...
Claro, esto está centrado.
Bueno, pero es que...
Es que estoy pensando, ¿eh?
Pero veis, esto queda aquí.
Esto queda aquí.
Ah, pero dentro no están centrados, ¿no?
O sí.
Es que estoy pensando.
¿Esto está centrado?
Justify...
Sí, sí que está centrado.
Pero esto aquí también.
Y esto también, ¿no?
Sí, sí, sí que está centrado, ¿eh?
Sí que está centrado.
No falta el más.
Aquí no falta el más.
Es que va sin más, ¿eh?
No es más 227, que suena raro.
Es más 69.
Que sí que es raro.
Yo el más, la verdad, es un poco extraño.
Sí que es verdad.
Yo le quitaría el más porque si intentas ir muy justo, como que es un poco raro.
Porque más...
O sea, no sé.
Yo lo dejaría así.
El texto dentro de la caja no está centrado.
¿Cuál?
¿Este?
Yo sí que creo que sí que está, ¿eh?
Se ve raro en comparación con lo de Redland en números.
¿El qué?
Lo sé.
Sí, es que es raro.
O sea, sí que es verdad que como...
Pero es porque ocupa más espacio.
¿Qué es lo que pasa?
Esta caja está centrada.
Esta caja está centrada.
Esta caja está centrada.
Entonces, ¿qué pasa?
Que esta caja está centrada, pero ocupa más.
Y por eso llega más a la derecha que esta que está centrada y ocupa menos.
Y al final está a la izquierda.
O sea, tiene espacio a la izquierda, ¿eh?
Ya está.
Lo que pasa es que hay textos, son más grandes unos que otros.
Y visualmente parece eso, ¿ok?
Vale.
Pues venga.
Yo creo que con esto ya al menos tendríamos esta parte.
En responsive, ¿qué podríamos hacer?
A ver.
Es un momento, ¿eh?
Por ejemplo, el tema...
Aquí tendríamos que hacer grid calls 1.
Y esto que fuese a partir de un tamaño.
Entonces, vale.
Grid calls LG.
Vamos a ponerle.
Y vamos a poner que la separación...
Vamos a hacer que sea de 4.
¿Vale?
Pues podría quedar algo así.
¿Vale?
Sería algo así.
Más bien.
También podríamos cambiar un poco.
Esto es demasiado grande.
Pues a lo mejor lo podríamos hacer LG, text, 4XL.
¿Ok?
Ay, no.
Perdón.
Esto sería 4XL, 6XL.
Y sería un poco así.
El margen este solo en LG.
Y algo así.
¿Vale?
Entonces ya empezaríamos a tener algo así.
Y cuando caben, pues ya estarían así.
Y así al menos lo tendríamos ya que en Responsive.
Pim, pam.
Hablé con el diablo para poder conocerte algún día y que programemos juntos durante 78 horas sin parar.
Hasta crear un nuevo sistema para que todos vivamos en la pradera sin maldad en el mundo.
What?
LG y MD.
LG es una marca de televisores muy chula.
Y aparte es como se hacen las media queries en Tailwind.
Mira.
Lo que estamos diciéndole aquí es, esta text, 4XL, es el tamaño de la fuente que queremos como por defecto.
Pero cuando la media query, nuestra resolución sea mayor a 1024, lo que queremos es entonces que aplique esta clase de aquí.
¿Vale?
Ads.
Ojalá.
Os imagináis que me apaga LG.
Joder.
Sería increíble.
Midu, cambia el orden de los tres spam.
Primero el número de visualizaciones.
Venga, vale.
Primero el número de visualizaciones.
Venga.
Vamos a mover el primero y el número de visualizaciones.
El segundo las noticias.
¿Vale?
Y así se verá más simétrico.
A ver.
Venga.
Perfecto.
Perfecto.
Ya está.
Ha quedado bonito, ¿no?
¿Queréis que hagamos lo del text shadow?
Es un momento.
A ver, lo del text shadow, ¿qué podríamos hacer?
Podríamos hacer aquí, class, tu, tu, tu, tu, tu, tu.
Ponemos aquí number, number, number.
Esto lo ponemos aquí.
Esto aquí.
Number, number, number.
Punto.
Number.
Y vamos a buscar aquí el text shadow que debemos tener por algún lado.
Madre mía.
Es que este text shadow es una cosa loca, ¿eh?
Los text shadows que tenemos por aquí.
Pero bueno, podemos probar.
¡Hostia, hostia!
¡Mis ojos!
¡Mis ojos!
Igual se han pasado, ¿no?
Aquí un poco con los text shadow.
A ver aquí.
Yo creo que con algo así ya está, ¿eh?
Yo creo que con algo así ya está.
Y ya me parece mucho.
No sé.
Igual otra cosa que podríamos intentar sería...
Un, cuatro, dos, uno.
Bueno, se ve más o menos igual.
¿Sabes?
El hecho de ir bajándole un poco.
Ir bajándole un poco.
Ya está, ¿eh?
Me chingaste la vista.
Perdón, perdón.
Perdón.
Pero esa sería un poco la idea.
Sería un poquito así la idea.
Yo la verdad es que lo prefiero sin shadow, ¿eh?
A mí yo lo quitaría el text shadow.
Es un efecto drama el hecho de que vaya haciendo el incremento de los números.
Es diferente.
Yo, no sé.
Igual solo con este.
Incluso menos.
Es que...
Oye, ¿qué pasa?
Que se ve...
Ah, vale.
Joder, es que se ve un montón, tío.
0,05.
Que se ve mucho.
0,1.
Oye, ¿por qué ahora no se ve?
Es como...
Ahora.
Yo creo que lo dejaría algo así.
Muy poco.
Muy poco.
LG, tu directo está patrocinado por nosotros.
Hemos visto la gráfica de la página de contadores y la página del marca.
Es más eficiente.
Creo que no usan text shadow.
Esto, no sé si utilizan text shadow.
Puede ser que no.
Pero al final es bastante...
Un poco de azul.
¿Le pondrías un poco de azul?
Así.
Un poco de azul.
Un poco de azul.
Mira, ya está.
Un poco de azul, ¿eh?
Cambio los 10x4 en el text shadow.
Lo que pasa es que va a quedar...
Demasiado bordecillo, ¿eh?
Bueno, que os gusta más bordecillo, pues ya está, ¿eh?
Ya lo tendríais.
No sé.
Yo lo voy a dejar en 10 porque es como un poco más la idea y ya está.
Vale.
Venga, vamos con más cositas.
Vamos con más...
Es un background blur.
Pero es que no es muy necesario hacer un background blur con esto, ¿eh?
Tampoco me parece tan necesario.
En fin.
Venga, pasamos de esto que si no vamos a estar todo el día porque no va a convencer a nadie.
Adapt text shadow.
Vamos con la galería que está interesante.
Os voy a enseñar diferentes galerías porque vamos a tener que elegir una.
Ajuste de colores enjobre en el footer.
Ah, coño.
Este es el que no he pillado porque no me ha enseñado el color.
No me ha enseñado una captura de pantalla.
Vale.
Todo esto ya lo hemos hecho.
Vamos con la galería.
Aquí tenemos una galería que está muy interesante, ¿vale?
Entonces, veis aquí que tenemos esto que son imágenes y le das y te enseña esto.
A ver.
Está bastante bien.
Está bonita la galería.
Tiene cosas un poco mejorables.
Por ejemplo, a mí esta imagen me da en la vida, tío.
Mira este borde.
Este borde.
Y hay una cosa que me da bastante rabia y es que no se puede utilizar el teclado.
Tampoco puedes hacer clic fuera para salir.
Y no sé.
Es bastante mejorable.
Y la verdad, no hace falta perder tiempo en una galería.
Yo me he apuntado por aquí unas galerías que he visto que he dicho, pues esta galería está bien.
Y las podemos utilizar en un momento.
Entonces, mirad.
Os voy a decir cuál preferís porque habría un montón.
Yo he elegido estas dos.
Y si alguien conoce otra, pues nada que nos la diga.
Pero esta, por ejemplo.
Esta.
O esta.
Esta está bonita.
A mí esta me gusta.
Se puede mover por...
Te puedes mover básicamente con el teclado, ¿vale?
Sin utilizar el ratón.
Le puedes dar clic y hace una animación bastante chula.
Y el rendimiento es perfecto.
O sea, no sé.
Fíjate cómo se carga.
Se carga en un momento.
Fácil y rápido.
¿Qué os parece esta?
¿Os parece interesante?
¿Por qué no usas la que enseñaste otro día que estaba hecha solo con CSS?
Eso era un slider.
No era una galería.
Que es diferente.
Y al final, lo bueno de esta es que ya está hecha.
Que ya tiene animaciones.
Y que está bastante bien.
O sea, que yo haría esta.
Y si no tenéis esta, que esta me parece un poco más compleja.
A ver, hay demos que te simplifican algunas cosas, ¿vale?
Pero tienes una galería aquí.
Me parece un poco ñe.
Yo la fotos wipe esta me parece que está bastante bien.
Así que, es que fijaos.
Ya tienes una animación ahí buenísima.
Que no hace falta que haga eso.
Y que además te carga solo lo que necesitas.
O sea, perfecto.
Vamos a utilizar esta.
Y ya está.
Vamos a ver...
A ver qué dice aquí.
Ah, mira, es gratis hasta para proyectos comerciales.
Perfecto.
Me encanta.
Vamos a ver qué dice aquí.
iCore, Lightbox y CSS.
Hay que agregar las tres cosas.
Y dónde, cómo se instala.
For Ria, For View, For Svelte.
No, yo la quiero para JavaScript.
¿Y cómo se llama?
¿Sabes?
Es que, ¿dónde está el NPM?
NPM install.
Aquí, vale.
Esto es lo que queremos.
Esto es lo que queremos.
Pues nada, hacemos P, NPM y fotoswipe.
Y la cargamos, ¿eh?
Creo que fotoswipe necesita props en el HTML.
Bueno, la veremos.
A ver, ¿eh?
¿Es necesario darle zoom a las imágenes a galería?
Si solo viera la foto de los streamers que ya se ven en la cuadrícula.
Sí que se requiere porque fíjate que están cortadas las imágenes.
O sea, esta imagen está cortada.
O sea, hay imágenes que están cortadas y que al final yo creo que sí que puede ser interesante
el hecho de hacerlas más grandes.
Porque si no, te puedes perder información.
Es verdad que luego tiene esta parte en la que...
Pero es verdad que no se ve casi nada.
O sea, no sé.
Yo era más que nada para cargar JavaScript y que lo viésemos, ¿no?
Pero no sé.
Puede ser una pérdida de...
Pero igual hay gente que le hace gracia verlo grande.
Yo qué sé.
Hay gente para todo, ¿eh?
¿Vale?
Fotoswipe.
Lo hemos instalado.
Nos vamos por aquí.
Y ahora vamos a poner aquí en componentes.
Creamos la galería.
Galería.astro.
A ver, igual deberíamos llamarlo en español y ya está, ¿eh?
¿Qué hacemos aquí?
Vamos a hacer script.
Ahora estoy pensando cómo se importaban las...
Estoy pensando si para importar...
¿Cómo se importaba?
En Astro...
Es que a veces tengo estas cosas.
Astro import npm o no modules.
Modules script.
A ver, ¿cómo era esto?
Ta, ta, ta, ta, ta.
Es que estoy pensando si se hacía...
Se hace dentro el script.
Estoy bastante seguro.
¿Sabes?
Se hacía dentro el script.
Pero ahora...
How to...
ClientSignAstro.js.
Esto.
Vale.
Script.
Source.
Ta, ta, ta.
Type.
Module.
Bueno, no sé.
Ahora lo veremos, ¿eh?
Porque no me acuerdo cómo se hacía.
Porque veis que pone aquí script.
Module.
No sé qué.
No sé cuánto.
A ver.
Si hacemos algo así.
Fotoswipe.
No sé qué.
Galería.
Vale.
Aquí vamos a tener la galería que ya la teníamos antes por aquí.
A ver.
Getting Started.
Vale.
Basic Vanilla.
Y aquí tendríamos lo que sería el...
El...
El...
Bueno.
Without Thumbnail.
Ta, ta, ta.
Without Dynamic Import.
El HTML.
Eso.
El HTML que necesitamos.
Eh...
Image HTML.
Ta, ta, ta.
Con el width y no sé qué.
Vale.
O sea, necesitamos Image URL en HRF.
Con más prioridad.
Opcionalmente.
Image con no sé qué.
No sé cuánto.
Por ejemplo.
Aquí tenemos un ejemplo.
Vamos a copiarnos esta.
Y ya está.
Aquí tendríamos...
A ver.
Tendríamos aquí la galería.
Vamos a copiarnos esto.
Me lo voy a copiar aquí directamente.
Solo porque quiero ver si esto funciona y ya está.
Vale.
Aquí se supone que hemos importado todo esto.
En lugar de My Gallery y todo esto que estamos haciendo aquí con una ID.
Bueno, podemos poner una ID.
Que sea Gallery.
Total.
Y aquí vamos a poner el Gallery.
Vale.
La clase.
Yo entiendo que el CSS también habrá que importarlo.
Aunque aquí no aparezca.
Vamos a ver si ahora funciona.
Y vamos a el info.astro.
No.
El archivo.astro.
Y vamos a poner aquí la galería.
Vale.
Y vamos a ver qué problema nos encontramos.
Vale.
Vale.
Ya nos encontramos problemas.
Porque no está haciendo...
Obviamente los estilos no los está cargando.
Vale.
Fire to Resolve.
No sé qué.
No sé cuánto.
Vale.
Es que ves.
No se carga así.
Pero es que ahora tengo la duda de cómo se cargaba realmente.
De cómo se cargaba esto.
Vale.
¿No se encuentra el módulo Photoswipe?
¿Y lo hemos cargado?
Sí.
Photoswipe.
Lightbox.
No sé qué.
No sé cuánto.
Es que claro.
Si quiero cargar directamente.
Esta es la pregunta del millón.
Si quiero cargar una biblioteca de terceros con NPM.
Que esto es lo que quiero hacer aquí.
Vale.
Con NPM.
¿Cómo?
Porque aquí lo que estamos haciendo es básicamente cargarlo como si fuese JavaScript puro.
Pero no es lo que queremos en este caso.
Entonces.
Yo veo aquí que con NPM sería de esta forma.
Vale.
O sea que tenemos que cargar.
Pon esto.
Esto.
Esto yo creo que deberíamos cargarlo dentro.
O sea aquí.
Porque esto es HTML.
Esto lo cargaríamos aquí.
¿Vale?
Y aquí.
Todo este Photoswipe.
Esto lo quitaríamos de aquí.
¿Vale?
Y aquí.
Lo importar de forma dinámica.
Lo importaría.
Esto está chulo porque así carga solo lo que necesita.
Y yo creo que con esto.
Mucho más sencillo.
Ahora.
Ahora sí.
Ahora ya funciona.
¿Vale?
Y ya podemos hacer esto y tal.
Ahora lo que necesitamos es estilar.
Bueno.
Y fíjate que al menos tienes una animación ahí rechulona.
Que además puedes fácilmente navegar con los botones.
¿Vale?
Y ya está.
Vale.
Pues esta sería la forma correcta de importar.
Fijaos que lo único que hay que hacer es el import de directamente un node module.
Y ya está.
Aquí tenemos que importar el CSS.
Y ya está.
O sea así de fácil.
Le decimos la galería que queremos.
Que lo tenemos aquí en este div.
Pues le he puesto esta ID que podrías poner la que queráis.
Y los children que son anchors.
Porque en el anchor lo que necesitamos aquí es decirle.
Hostia.
Esto sí que es jodido.
Lo de la relación de aspecto.
Esto sí que es un poco jodido.
Porque aquí.
Claro.
Aquí viene un poco lo jodido.
A ver.
Aquí vamos a poner grid calls 3.
¿Vale?
Para que sean.
Hostia.
Grid calls 3.
¿Por qué no me está poniendo?
Ah.
¿Por qué?
Porque no he puesto que sea grid.
¿Vale?
Ahí está.
1, 2, 3.
¿Vale?
¿Cuántas imágenes tenemos?
1, 2 y 3.
Ok.
Lo que vamos a necesitar aquí es poner gallery images.
Vamos a necesitar cargar todas las imágenes.
¿Vale?
Gracias, Madeval.
Que no lo había visto lo de las...
Archivo.
Gallery.
Buah.
Buah, chaval.
Aquí lo que tenemos montado aquí.
Lo que tenemos montado aquí.
Claro, lo malo de esto es que fijaos que primero tiene un hash.
Que eso lo tendríamos que haber quitado.
Habría que quitar el hash.
Y luego por otro lado que no es la imagen.
O sea, esta es otra imagen.
Esta es la de buena calidad.
¿Sabes?
Digamos que tiene la imagen, la pequeña.
Que esto tiene sentido.
Hostia, pero fíjate para...
Utilizamos chas GPT.
Utilizamos chas GPT para esto.
A ver, vamos a utilizar chas GPT.
Chas GPT.
Sí, es que...
A ver.
Espérate.
Espérate.
Ojo truco.
Espérate.
Ojo truco.
No sé si va a funcionar esto.
Espérate.
Voy a ver.
Porque hay un...
Hace mucho tiempo que no lo utilizo.
Hay un trucazo.
A ver si lo soy capaz.
Hay un trucazo.
¿Cómo es esto?
Renombrar.
Reemplazar texto.
Añadir formato.
¿Cómo es esto?
Formato personalizado.
Iniciar números en el 1.
Madre mía.
Formato personalizado.
Quitamos esto.
Hostia.
Ubicación después del nombre.
Ahí está.
Ahí está.
Ahí está.
Image 1.
Es que lo ideal sería no poner nada.
Pero veo que me deja un espacio.
Y no quiero que me deje un espacio.
Nombre índice.
Nombre y contador.
Nombre y contador.
Ajá.
No.
No, no.
Nombre índice.
Qué pena.
Qué pena que no me deja hacerlo con bash.
Sí, pero no tengo ganas.
Ojo.
Y punto.
Y ya está.
Y ya está.
O sea, trucazo, trucazo absoluto.
Al menos ya estuvo.
Hemos puesto image 1, no sé qué.
Y ya está.
Ay, ¿qué pasa?
¿Dónde está vuestro dios ahí?
¿Dónde está vuestro dios?
Y lo bueno es que no necesitamos hacer gallery images y tal.
Sino que lo que tenemos que decir es cuántas veces tiene que hacer esto.
¿Sabes?
¿Cuántas veces tiene que hacer esto?
Entonces, array from.
Nunca me acuerdo cómo se hace esto.
Length.
Ahí.
Está.
Muy bien.
Gracias.
Gracias.
En lugar de hacer esto de href, no sé qué, aquí lo que vamos a hacer es barra.
Bueno, se me ha olvidado poner la barra porque ves que aquí pone guión.
Lo podemos haber hecho.
Lo podemos haber hecho.
Renombrar.
Lo hacemos otra vez.
No pasa nada.
Ahora que ya sabemos cómo es esto.
Renombrar.
Pim.
Ya está.
Qué trucazo, ¿eh?
Es increíble.
Entonces, en el href lo que estaría chulo, bueno, total, esto no es muy importante.
Podríamos poner image y i más uno punto jpeg.
Esta sería la de calidad grande, ¿vale?
La jpeg es la de calidad grande.
Lo malo es esta parte que no sé muy bien para qué utiliza, pero es un poco rollo, sinceramente,
porque no vamos a saber.
Lo podríamos extraer, ¿vale?
Por ahora lo voy a dejar vacío, aunque me imagino que esto nos va a dar algún problema
de cómo se va a ver luego.
Y luego aquí en la imagen, este sería el source, pues aquí directamente, esto sería
barra, a ver, barra, public, no, barra, archivo, page, barra, first edition, barra, gallery.
Claro, porque hay que hacer la segunda edición también, ¿eh?
Pero bueno, lo haremos después.
Luego, en el source, esto sería lo mismo.
Vale, esto sería lo mismo.
Pero, bueno, esto también, punto webp.
¿Vale?
La webp sería la pequeña, ¿no?
Y aquí tendríamos que poner cada una de las imágenes y no sé qué o cuánto.
Pero bueno, al menos.
Y es una pena esto del data porque podríamos hacer un script que lo sacase toda esta información, ¿eh?
Podríamos sacarla.
Y por ahora, bueno, vamos a dejar nueve por ahora.
Ahora veremos qué nos saca.
Pero bueno, bueno, bueno, bueno.
Algo es algo, ¿no?
Esta imagen no puede ser cargada.
Bueno, normal porque no sabe exactamente cuál es.
Pero bueno, al menos ya vemos aquí que hemos conseguido, en un momentito, cargar ahí las imágenes.
¿Vale?
Y ya tenemos aquí un poco las imágenes.
Además de cada una, podríamos poner el shadow este que tiene.
Aquí tiene como un shadow que me da un poco de rabia porque a mí es que estas cosas, los shadows estos, que no tienen una animación, es como...
Como que me da un poco de cosita.
De hecho, voy a hacer una cosa.
Primero, cuando estamos aquí, este que era...
A mí me gusta bastante esta parte, o sea, el border radius.
Vamos a intentar ponerle más o menos el mismo.
Border, border radius.
¿Dónde está el rounded?
XL.
Vale.
Entonces vamos a ponerle el mismo.
Class, rounded, XL.
Y luego vamos a ponerle el shadow.
Shadow, blur.
¿Blur?
¿No?
¿Blur?
¿Cómo era el blur este?
Blur, shadow.
No.
No había...
Ay, no, no se podía hacer.
Estaba flipando ahora.
Estaba yo aquí ya flipando.
Sky 10.
¿Vale?
Lo que sí que vamos a poder hacer aquí...
Porque no hay más shadow, ¿no?
El 2XL creo que es el máximo.
Bueno, podemos hacer esto.
Y cuando hacemos esto, hacemos esto.
Hover, shadow, sky, 300.
Y lo ponemos un poco más.
75, por decir algo.
¿Vale?
Al menos probamos y vamos viendo cómo está quedando la cosa.
Nos vamos aquí.
Mira, mira qué transición.
¡Ué!
Está chuli, ¿eh?
Mira, mira.
¡Ué!
¡Ué!
¡Ué!
¡Ué!
Vale.
Vale.
Y aquí ponemos la transition.
Transition del shadow.
Y aquí tenemos que poner el overflow.
Overflow hidden.
Para que quede con él.
Podríamos ponerle un poquito de scale.
Scale 110.
Lo que pasa es que en todas las transiciones.
Transition.
Transform.
Ah, solo se puede poner uno.
¡Ah!
¡Ah!
Vale.
Vamos a ponerle un poquito menos.
0.5.
Vamos a ponerle un poquito más de separación.
Y no sé si me ha hecho mucho caso.
Pero bueno, por ahí llegan un poco los tiros.
¡Uf!
¡Uf!
Al menos, ¿no?
Más que nada...
Sí, está como caída la sombra.
A ver, lo que pasa es que se juntan...
No es que esté caída.
Es que se juntan las dos sombras.
Ese es el tema, ¿no?
Ese es el tema.
Es que se juntan las dos sombras.
La de atrás y la de adelante.
Se juntan las dos sombras.
Ese es lo que le pasa.
Y por eso parece que abajo hay más.
Blue.
500.
¿Sabes?
Se juntan las de abajo y las de arriba.
Pero así al menos teníamos, ¿eh?
¿No te sería mejor crear un array con la data de cada imagen?
Alt.
URL.
¿Me lo escribes tú?
Arsistile.
¿Me lo escribes tú, por favor?
Si me lo escribes, claro que sí.
El alt de cada imagen.
¿Dónde está el alt de cada imagen?
No lo tenemos.
Lo único que tenemos es la lista de imágenes.
Entonces, no me creará...
O sea, no puedo crear de nada tener el alt de cada imagen si no lo escribo yo.
Si tú quieres, me puedes ayudar porque es de código abierto.
Miras cada imagen, me escribes el alt.
De hecho, me puedes hacer aquí...
Me puedes hacer aquí el array con los alt y tal.
Y si ya me pones el ancho y el alto, entonces lo recorro y ya está.
Yo encantado de la vida.
O sea, lo que pasa es que hay que entender que no tengo esa información ahora mismo y que, por lo tanto, pues costaría lo suyo.
A que lo haga aquí en directo, digo.
O si va a aburrir, básicamente.
Add gallery of images.
¿Vale?
Que al menos teníamos esto.
¿Ok?
Ahora, ojo cuidado, porque esto es un poco trampa.
Porque es verdad, o sea, hemos puesto aquí tres, un, dos, tres...
Vale, vamos a hacer una cosa.
La galería, para mejorar un poco el rendimiento...
¿Midu cómo harías para que la sombra sea según el color de la imagen?
Según el color de la imagen.
Buah, chaval.
Madre mía.
¿Cómo me lías?
¿Cómo me lías?
¿Cómo me lías, chaval?
¿Cómo me lías?
¿Cómo me lías?
¿Me lías?
¿Me lías?
A ver.
Vamos a ver.
Vamos a ver.
Vamos a ver cómo haríamos esto.
Vamos a ver.
Quitaríamos este hover.
Quitaríamos este shadow, porque ya no nos sirve.
Entonces, group hover.
Podríamos poner aquí...
Y aquí el blur.
¿No se puede hacer más blur?
Bueno, pues más o menos.
Y lo que podríamos hacer...
Vale.
Claro, el problema es que este scale tiene que ser bastante más, porque si no se queda un poco...
¡Qué cabrón!
A ver, ¿dónde estás?
¿Dónde estás?
Vamos a ver un momento esto.
Claro, es que tiene que ser bastante más.
Tiene que ser bastante más.
1.5.
Y si le ponemos aquí 2, por ejemplo.
Ah, lo que pasa...
No es que no funcione.
Es que es culpa de esto.
¿Vale?
Vale.
Ahora entiendo.
Ahora entiendo el tema.
Vale.
Entonces, ahora sí.
Ponemos esto.
Y lo que tendríamos que hacer en todo caso...
Lo que tendríamos que hacer en todo caso, aquí, el rounded xl y...
Vale.
Pues esta sería un poco la idea.
Esta sería un poco la idea.
El scale, al final no va a hacer falta.
Y ahora que ya veo un poquito esto, pues lo que podríamos hacer sería más o menos esto.
Bueno, podríamos hacer esto.
De hecho, para que encima quedase como más...
Group hover...
Contrast...
Sería incluso menos.
Es que es muy exagerado.
No tiene que ser tan exagerado.
El group hover...
A lo mejor no haría falta ya esto.
Y a ver, tenemos algún...
Group hover...
No sé si quitarle opacidad...
Contraste...
Para que no sea tan bestia.
Pues esa sería la idea.
Uf, casi nada, ¿eh?
Pero sería un poco la idea, ¿no?
Lo que molaría...
Sería, como tenemos tanta cosa con esto, es que tuviesen más separación, ¿sabes?
Y incluso...
Yo igual lo que pondríamos...
No sé si menos blur...
Es que el blur está bien, pero...
Porque hace que se vean más o menos de los colores.
Lo que pasa es que casi no se notan los colores.
Casi no se notan.
Pero bueno, sí que le da un toquecito, ¿no?
Sí que le da un toquecito.
Sobre todo cuando te pones encima, pues sí que se nota ahí un poco...
Que cada uno tiene un estilo.
De hecho, aquí se ve claramente que es el estilo y tal, ¿no?
Solo falta crear tu propio lenguaje.
Bueno, está bonito, ¿eh?
Ahora tendríamos que pillar las imágenes, ¿eh?
Que ves que este error es porque no tengo las imágenes, justamente.
No tenemos las imágenes.
Pero...
La verdad es que ha quedado bastante chulo.
Ha quedado bien.
Puedo explicar cómo funciona eso.
A ver, es muy sencillo.
¿Qué es lo que he hecho?
Lo que he hecho es cargar la misma imagen dos veces, ¿vale?
Y lo que he hecho...
Fijaos.
Lo que he hecho es...
Quitamos esta imagen.
Lo que he hecho es...
He puesto una imagen...
Que ahí la tenéis, ¿no?
La he puesto con blur.
He puesto la imagen con blur y la he puesto justo por detrás de la imagen normal.
Para hacer eso, le he puesto un z-index menor, ¿vale?
Y ahora queda por detrás de la imagen.
Esto es lo que nos permite, justamente...
Es el hecho de que pilla los colores, justamente, que necesitamos de la imagen.
Pilla esos colores y los deja como si fuese una sombra.
Obviamente por detrás tenemos la imagen real.
O sea, es la imagen real.
Lo que pasa es que con un efecto blur.
Y lo que hacemos con el hover es que tenga un efecto contraste para que llame más la atención todavía el color que se supone que tiene.
No es perfecto ni mucho menos, ¿vale?
No es perfecto ni mucho menos.
Pero sí que da bastante el pego porque sí que se nota que el color que pilla es exactamente el mismo.
Es algo parecido a la técnica que hicimos aquí para hacer este efectillo que creo que le queda brutal, ¿vale?
Que queda brutal.
Y aquí sería un poco la misma idea.
Podríamos hacer que tuvieran más separación para que se note más, pero le queda bastante bien.
Porque le da un efecto ahí dramático muy, muy, muy chulo.
Pues no afecta a los kilobytes.
Es verdad, es verdad que sí que afecta al rendimiento.
Pero no a los kilobytes.
Y te explico por qué.
Porque es la misma imagen dos veces.
Es la misma imagen dos veces.
Por lo tanto, no se carga la misma imagen dos veces.
Solo la cargamos una vez.
Y como es la misma imagen justo detrás, pues tú cargas, haces la petición una vez y reutilizas el mismo recurso otra vez justo detrás.
El problema es que cargas es una imagen distinta, ya distorsionada, pero ya no tiene sentido.
No tiene ningún tipo de sentido.
La gracia es que utilices justo la misma imagen, solo que le cambias el borde radius y ya está.
Y así ya lo tienes de esta forma.
Así que con esto tendríamos la galería.
Lo que podríamos hacer, obviamente no puedo bajarme todas las imágenes, pero voy a descargarme algunas imágenes.
Esta, la uno.
Tendríamos aquí la dos, imagen dos.
Esta sería la imagen tres.
Imagen tres.
Vale.
Me voy a bajar estas.
Imagen cuatro.
Porque quiero ver cómo funciona la galería, que no hemos visto.
Imagen cinco.
Ta ta ta.
Imagen seis.
Ponemos imagen siete.
Termino hasta la nueve.
Imagen siete.
Imagen ocho.
Y así cargamos estas, ¿vale?
Imagen nueve.
Imagen nueve.
¿Vale?
Y ahora nos vamos a ver dónde las he descargado.
Aquí.
En escritorio.
Aquí.
¿Vale?
Esto por aquí.
Esto por acá.
Pam, pam, pam.
Lo ponemos en public.
A ver si...
Hostia, cuántas cosas tengo abiertas.
Dios.
¿Cuántas cosas tengo abiertas?
Vale.
En gallery.
La dejamos aquí en gallery.
Por ahora con jpeg.
Simplemente lo que quiero ver es que si doy aquí...
Vale.
¿Cuál es el problema de esto, amigos?
El problema de esto, por lo que veo, es que las imágenes cargan todo el...
¿Sabes?
O sea, está pillando todo el ancho y el alto y tal.
O sea, es que como que necesita...
Lo cual es un poco raro.
¿Vale?
Como que necesita saber el tema de la imagen.
Claro.
¿Por qué?
Porque necesita hacer la animación.
Necesita hacer la animación.
O sea, por ejemplo.
Que no pasa nada.
Esto lo podemos sacar y hacer la lista que comentábamos.
Esto con un script lo que podemos hacer es detectar cuál es la relación de aspecto de esta imagen.
¿Vale?
Y podríamos hacer lo que decía nuestro amigo que justamente comentaba antes.
¿No?
Ahora no me acuerdo cómo eran...
Un momento.
Madre mía.
Ajá.
Aquí está.
Claro.
Lo que tendríamos que hacer...
No.
Con el aspect ratio no funciona porque no todas las imágenes tienen el mismo aspect ratio.
Lo que necesita aquí es saber cuál es la relación de aspecto de cada una de las imágenes.
Que son diferentes, claro.
No es tan fácil.
Y esto lo hace porque hace una animación.
O sea, por ejemplo, si nosotros estamos aquí y le damos...
¿Veis?
Hace esa animación así un poco rara.
¿Por qué hace ese salto?
¿Veis que hace un salto?
Ah, ya sé por qué hace este salto
Al final tenía razón con mi array
Yo no te he dicho que no tuviese razón
Lo que te he dicho es que no me daba tiempo a hacerlo
Porque son dos imágenes
Son dos imágenes diferentes
Entonces como son dos imágenes, no queda bien
Son dos imágenes que tienen dos relaciones
De aspectos distintas
Ah, que rabia
Que lástima, claro, porque hubiera molado
Que hubiera sido la misma imagen
¿Sabes? La misma imagen con dos
Calidades distintas
Lo podemos hacer, o sea, no es difícil
Al final la idea sería
Lo que pasa es que entiendo que lo han hecho para centrar
La imagen exactamente en lo interesante
Tampoco
O sea, a ver
Si aquí debe haber diferentes animaciones
O que haga otro tipo de
Opening o closing animations
¿Veis? Que tiene zoom
Lo podemos pasar a fade para que no dé este salto
¿Vale? Podemos decirle
Show height
Que esto es demasiado típico como para que no lo tenga
Y aquí
Ahora haría el fade
Bueno, ah, pues el fade también queda mal
La madre que lo parió
Claro, ¿por qué queda mal también?
Queda mal
Porque
Lo que hace con el fade
Aunque no lo lleva
Te enseña la imagen antigua antes
Te enseña la imagen antigua antes
Claro
Es un poco
Un poco rollo, ¿eh?
Porque mola
Animated from cropped thumbnails
Hide the elements that overload
Through nails
Claro, qué rollo
Sería mejor un vento y no recortar las imágenes
Como se te cante el tuje
Queda horrible
Se te cante el tuje
Hostia, no he entendido eso
Es por la imagen que está detrás
No, no es por la imagen que está detrás
Mirad, es por...
Es justamente
Es justamente porque esta imagen
Y la que carga después
No es la misma
O sea
Si la imagen esta
Fuese la misma que tendríamos aquí
¿Ves?
Pero son dos imágenes distintas
¿Qué es lo que tendríamos que hacer?
Lo que tendríamos que hacer es
Cargar la misma imagen
Os voy a enseñar para que veáis que
Que ahí quedaría bien
Esta imagen la tendríamos que optimizar
Que lo podemos hacer también en un momento
Tampoco es...
Tampoco es tan difícil
Ay, ¿por qué se me pone aquí?
Dame la imagen
A ver
Ahora
La tendríamos que poner en WebP
Tendríamos que ponerle una calidad mucho menor
¿Sabes?
O sea
La idea es
Bueno, esta imagen la tenemos que hacer mucho más pequeña
Porque no hace falta ponerla en pantalla completa
Por lo tanto lo haríamos así
O algo así
700
La mitad
Que ocuparía mucho menos espacio
¿Vale?
Esta imagen que ocuparía mucho menos espacio
Podríamos ponerle zoom
Por decir algo
¿Vale?
Todas las que sean así que sean zoom
Esta la moveríamos aquí
¡Pum!
Y aquí lo que tendríamos que hacer es decirle
Vale, pues
Estas...
Voy a hacer que todas sean zoom
Y solo veremos una
Pero solo para que veamos la diferencia
¿Vale?
Aquí vamos a poner el zoom
Esto con un script
Lo hago en un momento
Esto con un script
Lo hago en un momento
De hecho
Hay scripts que detectan lo interesante de una imagen
Y te la recortan
Eso está chulo
Igual Claudinari tiene algo
Lo podría mirar
Para hacerlo en un momento
Entonces
Si aquí le ponemos el zoom
Que es esta
Y esta es esta
Y para que no quede cortado
Porque si no
Si vamos aquí
Vamos a ver
Que
A ver
Esta imagen
Ah, vale
Porque esta también tenemos que cambiarla
Hay que cambiarla dos veces
Zoom, zoom
Las demás no se van a ver
Aquí ahora va a quedar así
Aquí sí que ahora podríamos
Obviamente hacer
¿Ves?
Ahora sí que queda bien
Y de hecho va a quedar mejor
Con la animación esta
Con esta animación queda
Brutal
Queda brutal
Porque utiliza la antigua
Y luego pasa la nueva
Y esta animación está muy chula
Igualmente
Lo que podríamos intentar
Que no sé si
Si quedaría bien
Y si no utilizaríamos otra galería
No pasa nada
Es el hecho de decir
Vale
Y si
Yo creo que esto tenga una relación
De aspecto
Por ejemplo
Cuadrada
¿Vale?
No me deja que sea cuadrada
¿Por qué no me deja que esto sea cuadrado?
Si le ponemos que esta sea cuadrado
A ver
Si le digo que esta sea cuadrada
No sé si le vamos a tener que poner
¿Vale?
Y le decimos
Object Cover
¿Vale?
Vale
Tampoco
No queda bien
Porque hace el salto
¿Veis?
Que hace el salto ese
Una pena
Porque entonces
Necesitamos que haga
No recortar las imágenes
Y que todas tengan el mismo
La misma relación de aspecto
Podríamos hacer un
Masonry
Podríamos hacer un Masonry
Que tampoco sería
Muy complicado
La podríamos liar parda
Con el Masonry
Podríamos hacer un Masonry
En el sentido de
En lugar de utilizar
La relación de aspecto
Y para hacer
O sea
Quitaríamos el aspecto de Square
Quitaríamos todo esto
Todo esto y tal
Dejaríamos
Las imágenes
Que serían originales
Faltó el Object Cover en una
Bueno
Pero yo creo que
Da igual
El Object Cover al final
Object Cover
Lo puedo intentar
Pero yo creo que no
Yo creo que al final
¿Ves?
El tema es que la imagen original
Es de una forma diferente
Podríamos o cambiar la animación
Que hace
Para evitar que haga esta animación
Y que la haga solo con Fate
Si os fijáis
Ellos lo hacen
Con Fate
¿Ves?
Es que dice
Use the thumbnail image
¿Ves?
¿Ves?
Es que dice
Por esto
¿No?
Que justamente habría que hacer eso
Crop thumbnail
Via CSS
Ah
From cropped thumbnail
Ah mira
Interesante
Vale, vale
O sea que ahí lo que tenemos
Es lo del cropped thumbnail
Que decíais
Vale, vale
O sea que ahí
Sí que lo podríamos hacer
O sea ahí podríamos hacer
A ver
Este que queda regular
A ver
Aquí pone
Vale
Dice
Crop thumbnail
Via object fit
Si te ha obtenido
Object fit cover
Eso lo estoy haciendo
Y dice que hagas
Utilices data crop true
En el link
Mmm
A ver
O sea se supone que
Si utilizas esto
Y lo ponemos aquí
A ver
A ver, a ver, a ver
No
Hace lo mismo
Hace lo mismo
Y yo creo que el object fit cover
Lo tenemos aquí
Y lo tenemos aquí
O sea que
Nah, nos ha engañado aquí
If you're in a different object position
A ver
La verdad es que aquí sí que queda bien
Pero en la mía no lo hace
Aquí no lo hace
Si estás utilizando un diferente
Diferente object position
Que no lo estoy utilizando
Y aquí entiendo
Que por lo que veo aquí
No dice nada raro
Utiliza un thumbnail
Que machea el spread ratio
De la imagen grande
Pero eso sí que lo estamos haciendo
Y esto
Yo veo que sí que lo estamos haciendo igual
A ver, quito un momento
El blur
Un momento
Solo para asegurarme
Que esto no tiene nada que ver
Ja ja
Ja ja
Sí que tiene que ver
Sí que tiene que ver
Pero algo me dice a mí
Que ya está arreglado
Porque ya sé lo que pasa
Ya sé lo que pasa
Lo que pasa es que está utilizando
La primera imagen que detecta
Bueno, pero joder
La verdad es que queda bastante bien
¿No?
Queda bastante bien
Obviamente
Tiene que ser igual
Tiene que ser exactamente el mismo
O sea
El thumbnail
Y el otro
Tiene que ser el mismo
Queda bastante bien el efecto
Uy, ahí la he liado
Perdón
Pero ¿Veis?
Queda bastante
Bastante increíble
O sea
Esto es como
Está aquí
Que está bien
Que sale de golpe
Y que luego
Hace un fade in
Que tampoco está mal
Pero aquí
Es que esto quedaría muy chulo
Queda muy chulo
Porque queda muy
Mira
Y luego aquí sí que puedes hacer esto
Lo que pasa es que no están
No están bien del todo todavía
Por reacciones de aspecto y tal
¿Vale?
O sea
Las que sí que son como las de Ibai
Queda bien
Pero las que no
Quedan regular
Pero
Hostia
La animación esta está muy chula
Es otro nivel
Está
Queda como muy
Y además esto tiene pinta
De que en móvil
Se puede hacer el swipe
O sea
Tremendo
Bueno
Voy a mirarme el tema este
Porque yo creo que
Vamos a poder hacer
Un script
Para
Hacer
Las thumbnails pequeñas
Es que estoy por intentar utilizar
El mini masonry
Tío
Estoy
De intentar utilizar
El mini masonry
Mini masonry
Básicamente
Es para hacer una galería
De masonry
¿Sabes?
O sea
Que si tienes diferentes imágenes
Lo que pasa es que aquí hay
Algunas imágenes que sí que son iguales
Otras que son verticales
Y tal
Hacer un vento
Que es lo que me decía la gente
Hacer un vento es muy difícil
Porque tendría que yo hacerlo manualmente
Y es un poco rollo
Porque aquí hay imágenes
Aunque a lo mejor
También podríamos ver
Que a lo mejor
Hay dos estilos de imágenes
¿Sabes?
Que no hay
Muchos más estilos de imágenes
Habría que hacer un cálculo
O sea
A lo mejor solo hay dos resoluciones
Y lo podríamos mirar
Las verticales
Y las horizontales
Lo podríamos mirar
Y solo pensar
Vale
Son horizontales
Son verticales
O lo que sea
Pero si no
Se podría hacer un masonry
De este estilo
Que
Lo que tendríamos que mirar
¿Ves?
Aquí
Sí
¿Ves?
Sí que tiene buena pinta
Podríamos hacerlo con masonry
La galería
Lo que pasa es que aún así
Tengo que hacer el script
Para que me pille todas las imágenes
Me cree todos los thumbnails
Y todo esto
No es difícil
Pero bueno
Tenemos que trabajar en ello
Así que
Add images gallery
Y lo vamos a hacer
Para la semana que viene
¿Vale?
Lo vamos a hacer para la semana que viene
Mientras
Si queréis
Si hay alguna cosa
Que veis que podemos ir avanzando
Arreglar alguna cosa
Mira que veo por aquí
Complete information page
¿Esto qué es?
Los premios Slan
Reconocimiento
No sé qué
Ah bueno
Joder que ha puesto aquí ya
Bueno como esta página
No es tan
Tan importante
Esta ahora la
La voy a poner
Creación de la página info
Con título de descripción
Refactorizado en hero container
Se le dio el mismo efecto
Que inicio en el vídeo
Ajá
Vale
Lo que pasa
Ah que
Creación de la página inicio
Es que como que está haciendo
Muchas cosas esto ¿No?
Canción de inicio
Hero container
Ta ta ta
Info
Ah porque también
Está haciendo
Pero esto ya estaba
Ah vale
Porque ha hecho
Con el título
Los premios
No sé qué
Vale
Voy a agregar esta
Vale
¿Por qué están fallando
Los deploys?
¿Algo hay ahí?
O igual soy yo
Que no he arreglado
Algo
De typescript
Ah porque
Está
No
O no se ha actualizado
El
El log file
Ah
Tiene pinta
Fix log file
Log file
Vale
Vale
Sincronizamos los cambios
Y ya está
Vale
Muy bien amigos
Pues os dejo
Os dejo
Vale
Ahora
Mergeo
Miro las cositas
Que habéis hecho por aquí
Creo que alguno
A lo mejor
Ahora tendrá conflictos
Que a lo mejor
Lo tienes que mirar
Si
Vas a tener que mirarlo
A Velasquez
Pero le echaré un vistazo
Y la semana que viene
Vamos a hacer la galería
Y vamos a hacer la parte
Del backend
Vamos a hacer la parte
Del backend
Porque vamos a necesitar backend
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
Vida
La