Hoy vamos a desarrollar desde cero la landing de Tesla.
Parece una landing sencilla, y lo es, o sea, es una landing que tú la ves y es sencilla.
A ver si os la puedo enseñar. Es esta, ¿vale?
Es una landing sencilla y la vamos a hacer con HTML, CSS, JavaScript y vamos a utilizar Astro.
Y entonces, ¿por qué no lo hacemos con Next.js?
Vale, Next.js lo utilizamos normalmente mucho, ¿no?
¿Y por qué con Astro? Porque Astro es lo más básico y lo más cercano a la plataforma.
Entonces, no vamos a hacer nada de React.
Astro es muy sencillo, es una fina capa y voy a intentar hacerlo lo más cerca del HTML, el CSS y el JavaScript
para que todo el mundo lo pueda seguir.
Y vais a ver que, o sea, que es una maravilla, o sea, se entiende muy bien.
Y es que es el que nos da mejor rendimiento y tiene todo el sentido para esto utilizar Astro.
Con el vídeo de fondo, ¿vale? Lo vamos a hacer con este vídeo tan maravilloso.
Esta web, esta es la que vamos a hacer.
Con el vídeo, con... Fijaos, esto también lo vamos a hacer.
Esto os va... Es que creo que vais a aprender mucho hoy porque parece una landing sencilla.
Pues fijaos en el menú. Mira, tiene una cosa muy chula que conforme...
Primero, el slider. Que tú haces un poquito de scroll y pasa al siguiente.
¿Veis que pasa como al siguiente? O sea, que tiene como un scroll un poco especial.
Y esto es bastante fácil de hacer y lo vamos a hacer desde cero también para que lo veáis, ¿vale?
Lo segundo, el menú. Fijaos que el menú, conforme tú vas pasando de slide o de sección, cambia el color.
Porque hay en algunas que queda bien en blanco y otras que queda mejor en negro.
De hecho, el primero es el único que es en blanco, ¿no?
Y el segundo ya se pone en negro y hay como un efecto CSS ahí.
Pues eso también lo vamos a ver.
Y hay una tercera cosa muy chula que casi no se nota, pero que llama mucho la atención.
Que es este efecto. ¿Veis este efecto? Este hover. Parece un hover sencillo, ¿verdad?
Pero fíjate, cuando vas a la derecha, ¿qué hace? ¡Ojo! ¡Ojo! Pues esto, esto también lo vamos a hacer.
Esto también lo vamos a hacer. ¿Por qué? Porque está chulo.
Está chulo, son pocas líneas, parece una cosa muy complicada.
Es una cosa que mucha gente diría, ostras, pues yo no sé ni por dónde empezar.
Y lo vamos a hacer, ¿vale? Lo vamos a hacer.
Entonces, vamos a utilizar HTML, CSS, JavaScript, vamos a utilizar Astro y utilizaremos Tailwind también.
Si no conoces Tailwind, pues esto igual te atasasas tampoco.
Pero es que se entiende tan fácil Tailwind que es que aprenderlo son 5 o 10 minutos.
Entonces, no vamos a intentar hacer un clon pixel perfect, ¿vale?
No haremos un pixel perfect porque hay cosas que a lo mejor no tienen mucho sentido que sean pixel perfect.
Vamos a intentar que se parezca lo máximo posible, que yo creo que igualmente va a quedar súper bien, ¿eh?
Ya veis que tiene algunas cositas que vamos a tener que sacar, por ejemplo, el vídeo.
Lo iremos sacando sobre la marcha, ¿vale? Los vídeos, imágenes, logos y todo esto.
Pero lo primero que vamos a hacer es utilizar Astro.
Astro Build es un framework que es agnóstico a la biblioteca.
¿Qué quiere decir esto?
Que tú lo puedes utilizar con React, con Svelte, con Vue, con Solid.js, con un montón de cosas.
O no utilizar ninguno, que de hecho es lo que vamos a hacer.
No vamos a utilizar nada, ¿eh?
Lo vamos a hacer con Vanilla.js y con un poquito de Astro.
Pero va a ser un framework que nos va a permitir construir nuestra página,
tener un entorno de desarrollo y que además nos haga hot reloading y todo este tipo de cosas, ¿vale?
Entonces, nada. NPM Create Astro arroba latest, ¿vale?
Nos hace preguntitas aquí. Está súper bonito. Me encanta la iniciación. Me encanta.
¿Dónde deberíamos crear el proyecto? Pues vamos a poner que nos debería crear, por ejemplo,
vamos a poner Tesla Landing, ¿vale? Tesla Landing.
Aquí nos dice si queremos que nos incluya los archivos de ejemplo, el blog template o vacío.
Le vamos a decir que nos ponga los archivos de ejemplo para tener algo por aquí, ¿vale?
Ahora que nos instale las dependencias, le decimos que sí.
Mira, ¿quieres escribir Tactics? Hoy no, ¿vale? Hoy no vamos a hacer porque siempre hacemos muchas cosas con Tactics.
Vamos a ir cambiando.
¿Inicializar un repositorio? Sí, porque luego lo subiré a GitHub, ¿ok? Vale.
Y ya podemos entrar a Tesla Landing.
Y aquí, pues nada, NPM Run Dev.
Y esto nos debería levantar nuestro entorno de desarrollo en el puerto 3000.
Que ahora mismo ya veis que nos aparece aquí.
Welcome to Astro. Ahora es como la página vacía total.
Vamos a abrir esto en Visual Studio Code, ¿ok?
Aquí podéis utilizar vuestro editor favorito, ¿eh? No hace falta que sea Visual Studio Code, pero a mí es el que me gusta.
Muy bien. Vale.
Pues lo que tenemos ahora mismo que es esto, obviamente esto no lo vamos a querer utilizar,
pero si vamos aquí a nuestro Source, a Pages Index,
esta página, ¿ves que aparece todo gris y aburrido?
Vamos a hacer una cosa para arreglar esto.
Lo que vamos a hacer es, en las extensiones, tenéis que instalar la extensión de Astro.
Yo la tengo instalada, pero la tengo desactivada por defecto.
Cosa que os recomiendo que hagáis siempre.
Por ejemplo, Astro, seguro que no la utilizáis en todos los proyectos.
Es bastante interesante que desactivéis estas extensiones que no se utilizan en todos los proyectos
y solo activarla allí donde la vais a utilizar.
Por ejemplo, le dais aquí, Enable Workspace.
Y ahora esta extensión solo se utiliza en este proyecto, ¿vale?
Así que es buena idea que hagáis este tipo de cositas.
Bueno, pues ya tenemos esto, Import, Layout.
Esto que veis aquí es lo que vemos aquí, ¿vale?
El Welcome to Astro, ¿ves? Welcome to...
Aquí viene todo esto.
De hecho, si yo quito esto y vamos a poner aquí Tesla Landing, ¿vale?
Guardamos.
Y cuando vuelvo, ¿ves? Tesla Landing.
Vamos a quitarle todos los estilos porque no tiene mucho sentido.
Nosotros vamos a empezar desde cero, ¿vale?
Quitamos esto, Tesla Landing, quitamos la Car también, ¿vale?
Vale, y ya lo tenemos limpito.
Vamos a instalar también Tailwind, que si no sabéis lo que es Tailwind,
pues eso ya tampoco lo voy a poder explicar desde cero,
pero es una utilidad de CSS, ¿eh?
Donde tú escribes un classname así, un nombre de clase así,
y ya le pone los estilos sin necesidad de escribir el CSS directamente.
Para instalar Tailwind con Astro, para...
Mira, ¿por qué Astro?
Por cosas como esta.
Ahora, si quiero utilizar Tailwind, por ejemplo,
tú solo haces npx, astro, add, y aquí pones Tailwind, ¿ves?
Tú ejecutas este comando y ya te añade Tailwind.
Y esto, esto es una experiencia de desarrollo que te da que es brutal
porque ya no te tienes que preocupar de hacer la configuración,
de no sé qué.
Directamente ejecutas un comando y esto te crea toda la configuración
que necesitas, ¿ves?
Le dice, voy a ejecutar esto, ¿vale?
Voy a añadir esto, ¿vale?
Y ya está.
Ahora ya tenemos Tailwind.
Pim, pam.
¿Sabes?
En un momento ya tenemos Tailwind.
Y, de hecho, ya se ve que me ha hecho un CSS reset por aquí.
Para saber si tenemos Tailwind, lo que podemos hacer aquí,
vamos a poner un h1, por ejemplo.
H1, ponemos esto aquí.
Y Tailwind, ya sabéis que es un utility class classes.
Por lo tanto, súper importante utilizar la extensión también de Tailwind.
Tailwind, ¿vale?
Ponéis Tailwind aquí y ya la tengo.
Esta se queda activada siempre porque la estoy usando todo el día.
Entonces, ahora tenemos autocomplete.
Vamos escribiendo y nos va apareciendo por aquí, ¿veis?
T, S, X, L.
Y esto hace que la fuente del texto sea súper grande.
Importante, tenemos que utilizar class, no class name.
Class name es para React.
¿Ves?
Y ya la tenemos aquí, súper grande.
Bueno, ya tenemos la configuración, ¿vale?
Ya tenemos lo que necesitaríamos para iniciar esto.
Vamos a ver.
Lo primero, primero que yo creo que vamos a hacer es el header.
El header es la parte esta de aquí arriba, ¿vale?
Es lo primero que vamos a hacer.
Luego haremos el video.
Luego haremos la landing, o sea, este título y esto.
Y luego haremos las secciones.
O sea, que iremos como de arriba va.
Entonces, lo primero, vamos a copiarnos este Tesla, que esto debe ser un logo SVG.
Mira, lo tengo por aquí.
Este logo SVG, ¿veis?
SVG.
Este SVG me lo voy a copiar.
El HTML me lo copio y ya me lo traigo por aquí.
Lo voy a hacer primero mal.
O sea, mal.
Lo voy a hacer todo aquí a saco.
Más que nada para que veáis cómo extraerlo después.
Pero por ahora lo voy a hacer aquí y luego ya lo separaremos en componentes, que es súper sencillo y súper fácil.
Pero que, bueno, para que veáis cómo lo hacemos, ¿vale?
Entonces, aquí en esta clase vamos a hacer H6, W, no sé si poner W32.
Ya veremos cómo queda.
El fill importante, que se quede en el current color, porque luego tendremos que pasarlo a negro o blanco, dependiendo de la sección, ¿vale?
Aquí tendríamos el logo.
Pues ahora el logo lo vamos a envolver en un dip.
No pasa nada que sea un dip, ¿eh?
Que los dips se pueden utilizar.
Y aquí ya vemos que tienen dos navegaciones, yo diría que son, ¿no?
O sea, que vamos a poner aquí un nav, que sería el que está en medio.
Y aquí otro nav, que sería el que está en medio.
Dentro, mira, y así vais a ver una cosa que está bastante chula, que es lo de poner UL.
A ver si me acuerdo.
UL.
LI por, a ver cuántas son.
3, 4, 5, 6.
O sea, que por 6.
Por 6.
Y dentro una A.
A ver si esto funciona.
¡Ojo!
¿Qué ha pasado, eh?
Esto es para generar la estructura de HTML.
Esto se le llama EMET.
No sé si, me imagino que todos lo sabíais, ¿verdad?
Lo sabíais todos, ¿verdad?
Pero bueno, está bastante bien.
Sobre todo el hecho de multiplicar está súper chulo.
Me gusta.
Me gusta.
Y esto lo podéis utilizar para un montón de cosas.
Yo no lo uso mucho, pero bueno, en este caso creo que tenía todo el sentido del mundo, ¿vale?
Creo que tenía todo el sentido del mundo.
Bueno, a ver.
Los HRF no nos vamos a preocupar porque nos vamos a querer hacer el tema de la landing, ¿vale?
Por ahora vamos a dejar esto aquí.
Va a ver.
Model S.
S3XY.
S3X Model S.
¿Vale?
El 3, el X y el Y.
¿Vale?
Este era carga y este no me acuerdo cómo era.
Era Powerwall.
Al menos tendremos ya aquí los...
¿Vale?
Ya empezamos a tener eso ahí.
Y luego tendríamos aquí soporte, tienda, cuenta, menú.
¿Vale?
O sea que esto...
Mira, pues me puedo copiar tienda, cuenta, menú.
Me puedo copiar esto.
Y aquí cambiamos cada uno.
Y aquí...
Soporte, cuenta, tienda, cuenta y menú.
Es importante que pongamos los elementos para que sean los mismos porque si no luego va a ser un poco...
Ah, se me ha olvidado el O'Lul, ¿eh?
Importante, ¿vale?
Una lista desordenada.
A ver, esto es una cosa que aunque parece muy básica, mucha gente no hace bien esto.
Muchas gracias tu romántico que me había avisado, ¿vale?
Mucha gente...
Si quieres poner un app, lo normal es que pongas una lista desordenada.
Aquí tiene bastante sentido que sea una lista desordenada, ¿vale?
Porque no está numerada.
Aunque tampoco pasaría nada que sea ordenada, ¿eh?
Pero esta sería una estructura básica a la hora de hacer unos menuses, ¿vale?
Entonces, ya tendríamos esto.
Ahora vamos a tener que poner los estilos.
A ver, no nos diría que costar mucho, pero es un poco tricky y ahora verás por qué.
Porque tiene un poco de truquillo, ¿eh?
El menú tiene un poquito de truquillo.
A ver, en el class lo que vamos a hacer es...
Por ahora no es muy importante.
Yo qué sé.
Vamos a poner por ahora algo así.
Para tener separación.
Esto sería el padding por arriba, por los lados.
Vamos a ver cómo nos queda esto.
Vamos a ponerle un flex, por supuesto.
Vamos a centrar los elementos.
Vamos a dejar que se quede fijado arriba.
Top 0, para que siempre esté arriba del todo.
Que utilice todo el ancho.
Y vamos a justificarlos.
Y fíjate que tiene que ser un justify between.
O sea, que deje los espacios entre los elementos.
Es como lo tiene aquí.
O sea, el espacio este.
Estos espacios.
O sea, no está centrado.
Sino que ha separado los tres elementos.
Y ha dejado espacio entre los elementos.
Así que lo vamos a hacer así.
Pero vas a ver que esto no funciona.
No funciona.
Yo creo que esto...
O sea, funciona.
Pero no funcionará.
Ya es algo.
Obviamente, ahora nos faltaría que cada uno de estos también fuese un flex.
Y que fuese en...
O sea, solo con poner flex debería funcionar.
O sea, aquí vamos a poner flex.
Y aquí vamos a poner flex.
Y con esto ya deberíamos tenerlo...
Vale.
Ya empieza a tener un poquito mejor de pinta.
¿Vale?
Nos queda un poquito de separación.
Y la fuente...
Hostia, interesante la fuente.
¿Verdad?
No había pensado la fuente.
La separación...
Bueno, también la letra es un poquito más pequeña.
Vale.
Vamos a hacer una.
Y luego nos enfocamos en la otra.
Vamos a hacer que la letra sea más pequeña.
Y ahora tendríamos que estilar cada uno de los anchors.
Podríamos utilizar aquí un class en cada uno.
Pero voy a utilizar esto que tienes en Tailwind.
Que tú le puedes decir.
Oye, de este elemento, los Lee, los A.
Quiero que me estiles y que me hagas algo en todos.
Por ejemplo, voy a hacer que tengan inline block.
Para que luego pueda ponerle el padding.
Vamos a copiar esto.
Vamos a poner que todos tengan un padding.
El padding, yo creo que el horizontal al menos.
Debe ser más que el vertical.
Debe ser algo así.
Vamos a ver cómo queda.
Bueno, ya no queda mal.
A ver, le falta ajustar alguna cosita.
Veo que está como muy arriba.
O sea, creo que está como más separado.
Pero bueno, eso lo iremos ajustando.
Yo creo que así ya la separación está bien y tal.
Así que esto nos lo vamos a copiar aquí también.
Y aquí vienen los problemas.
Porque es que, claro, una landing como la de Tesla parece muy sencilla.
No sería mejor un gap.
No sería mejor un gap en este caso, Garu.
Y te voy a explicar por qué.
Yo sé el primero que muchas veces utilizo gap y todo esto.
Pero fíjate, no deberíamos utilizar gap porque...
A ver, te voy a enseñar aquí mejor.
Fíjate, cuando estoy aquí encima, ves todo el hover y ahora cuando ve al otro, ves que no hay una separación entre elementos.
¿Te fijas?
O sea, no hay un gap entre elementos.
Aunque lo parezca visualmente, en realidad lo que hay...
De hecho, te lo puedo enseñar en...
O sea, no quiero entrar en el CSS y todo esto.
Pero si mirásemos el CSS, aquí, veríamos aquí que no hay ningún gap.
Aquí no han puesto un gap.
De hecho, ves, es que no hay un gap.
Lo que hay es un padding.
¿Ves?
Aquí lo tenemos.
Padding left, padding right.
Visualmente parece un gap, pero están juntos.
Y como está vacío, claro, si pongo un gap, va a haber una separación que no vamos a querer.
¿Vale?
Entonces, por eso, lo vamos a poner así.
Pero hay un problema todavía más interesante con esto.
Hay un problema más interesante.
Veo que...
A ver, igual nos hemos pasado con los padding, ¿no?
Aquí arriba.
A ver, no quiero tampoco que sea pixel perfect.
No voy a hacer que sea pixel perfect porque tardaría demasiado.
Estaría ajustando un montón de cosas y tampoco quiero que perdamos mucho tiempo con esto.
¿Vale?
Y podríamos mirar, a ver, por qué esto.
¿Por qué?
¿Por qué?
Vamos a poner aquí.
¿Vale?
Pero aquí le hemos puesto un poquito de más.
Que ves, esto está más arriba y este está más abajo.
A ver, vamos a poner 5, por ejemplo.
Yo qué sé.
Solo para...
¡Oh!
¿Qué ha pasado?
No sé si es que va tan rápido.
Va tan rápido.
Que no lo veo.
A ver, vamos a hacer este un pequeño...
Este es 32, se lo había puesto, ¿no?
28, 30...
Es que, claro, del 32 al 20...
Es que el 28 me parece que irá muy pequeño.
¿Vale?
Bueno, igualmente vamos a arreglar primero una cosa.
Vamos a arreglar primero una cosa.
Porque lo peor no es el padding este que se ha movido un poco.
Lo peor es que no está centrado.
Y esto, esto es jodido.
Fijaos bien.
A ver, esto no es para que sea pixel perfect, sino para que...
Porque esto va bastante la cosa, ¿vale?
Si os fijáis, el menú de arriba no está centrado.
Y este sí que está centrado.
Entonces, para conseguir que esto se centre, necesitamos que este y este ocupen todo el espacio disponible y que este se quede en medio, ¿sabes?
O sea, el problema es que ahora no está centrado y para ello tenemos que decirle...
A ver, por ejemplo, aquí en este div le vamos a decir que esto es flex, flex grow, ¿vale?
Y basis 0.
Y ves ahora qué es lo que ha pasado aquí.
Lo que está pasando es que este Tesla, que es este del logo, este que estoy haciendo aquí, con el flex grow, lo que está pasando es que está ocupando todo el espacio.
Mira, fijaos.
¿Veis?
Ahora ocupa todo el espacio.
Si le quitásemos esto, ¿vale?
¿Veis otra vez?
¿Qué pasa?
Que aquí está ocupando lo mínimo.
Al utilizar el flex grow, ¿vale?
¿Veis?
Está ocupando lo todo.
Igual no necesitamos el basis 0.
Ahora lo miro.
Pero yo creo que sí lo vamos a editar después porque si no esto seguramente saltará.
Y esto mismo lo deberíamos hacer con esta parte de aquí.
O sea, este flex grow lo vamos a hacer aquí.
En este nav hacemos flex, flex grow y, y, y, y, y, y, y, y, claro.
Fijaos.
Ahora sí que lo está haciendo bien, pero esta parte de soporte la está dejando a la izquierda.
O sea, que este flex grow además tenemos que ponerle justify end para que vaya al final.
Y esto ahora sí está centrado.
Ah, tengo dudas.
Ah, no sé si vamos a tener que ponerlo el basis 0.
No está centrado, ¿no?
Vamos a poner el basis.
A ver si...
Uy, digo, joder, que bien me ha quedado.
Sí, ahora sí.
Ahora, ahora, ahora sí.
Y aquí también el basis 0.
Vale, 0.
Y yo creo que ahora, ahora sí que está centrado, ¿vale?
Y ahora sí que lo teníamos centrado.
O sea, lo que hemos hecho es que tanto esta caja, esta de Tesla y esta lo ocupen todo
y así se quede justo en medio lo que necesitamos.
Vamos a arreglar una cosa porque veo que nos falta el, la phone family.
Antes he encontrado esto porque he estado mirando, digo, hostia, a ver la fuente y tal.
He encontrado esto.
Lo ideal sería ver de dónde ha sacado la fuente esta, la de Gotham, que es la que utilizan.
Si le dais al botón derecho y os vais por aquí y buscáis aquí el phone family,
phone family, veis, utiliza esta de Gotham SSM.
Yo creo que esta fuente seguramente sea de pago.
La ha encontrado pirata.
Entonces, quien quiera utilizar la pirata, pues utiliza la pirata.
Yo la voy a poner en línea.
No debería ser lo correcto, ¿vale?
No debería ser lo correcto.
Lo correcto debería ser utilizarla bien hecha.
Pero bueno, en nuestro caso, como lo vamos a utilizar solo para verlo y para no perder tiempo,
pues le vamos a ver que a por aquí, ¿vale?
Lo voy a poner en los estilos globales, que fijaos cómo son los estilos globales en Astro.
Aquí los estilos globales tendríamos nuestro HTML y aquí es donde pondríamos los estilos globales
porque tiene una etiqueta isGlobal.
Y estos estilos van a ser globales para toda nuestra aplicación, ¿vale?
Así que vamos a poner, vamos a dejar ahí los estilos.
Y para cargar esta fuente en Tailwind, para que Tailwind entienda que esta es la fuente que queremos tener
y la que queremos utilizar en todos los sitios, aquí en el theme vamos a poner PhoneFamily
y vamos a indicarle que la, no me acuerdo si es Sans, sí, la Sans, vamos a poner la Gotham SSMA, ¿vale?
Y si no tiene esta, que cargue la Sans Serif, ya podríamos poner otro fallback,
pero bueno, con esta deberíamos tener su...
Y con esto, mira, ya tenemos la fuente y ya tenemos esto.
No sé, obviamente no va a quedar exactamente igual,
porque a lo mejor la fuente no es la misma o la estamos renderizando diferente o lo que sea,
porque fijaos que aquí queda como un poquito más negrita que como queda aquí.
Igual también es que puede ser que sea semi-volt, lo podríamos mirar.
Podríamos intentar hacer esto y sería medium en todo caso.
Yo supongo que sería medium, ¿vale?
Para hacer que la fuente sea medium, que sea un poquito más gordita.
Tampoco me parece exactamente que sea, pero se parece más.
Así que le vamos a dejar así porque entre 400...
Esta sería la de 500, ¿veis?
Y la otra era la de 400, o sea que debe ser algo intermedio y tal.
Podríamos mirar si es por tema de renderizado, por ahora la vamos a dejar así
y luego ya no nos preocuparemos.
No parece que sea exactamente negro, o sea que igual eso también tiene algo que ver.
Podríamos mirar de ponerle el text gray 900,
a ver si eso también le ayuda a que se parezca un poco, ¿vale?
Pero bueno, por aquí irían un poquito los tiros, ¿vale?
Bueno, ya tenemos el menú.
Por ahora vamos a dejar ahí el menú.
Luego volveremos al menú porque necesitaremos hacer un montón de cosas.
Sí, un poquito menos de padding top, es cierto.
Y de hecho hay más cositas.
Por ejemplo, yo aquí en Tesla...
A ver, no quiero hacer mucho Pixel Perfect porque si no puede ser que perdamos mucho tiempo
en cosas como muy sencillas y tal.
Pero sí que...
Es que ¿sabes qué pasa?
Que quiero redondearlo a los valores de...
¿Sabes? No quiero hacer Pixel Perfect porque si no tendríamos que estar todo el rato mirando,
no sé qué, y será un poquito más rollo.
Bueno, bueno, lo hemos quitado un poquito esto.
La X yo creo que sí que lo vamos a dejar como estaba.
Y bueno, más o menos.
Si lo queréis hacer Pixel Perfect ya os podéis poner por eso.
Vamos con el vídeo, que el vídeo realmente es una de las cosas más interesantes que hay.
Porque, bueno, ya os podéis imaginar que este vídeo que hay aquí detrás,
el de arriba, tiene que quedar detrás del todo,
tiene que ocupar todo el espacio,
y es bastante divertido porque, claro, ¿cómo hacemos esto?
Así que lo primero, vamos a descargar, vamos a robar el vídeo,
vamos a robarlo, vamos a prestarlo,
que debe ser este enlace de aquí.
Así que vamos a abrir una nueva pestaña,
aquí tenemos ya el vídeo,
lo voy a guardar, ¿vale?
Guardamos el vídeo aquí en el escritorio,
y me lo voy a copiar aquí, ¿vale?
Nos vamos aquí a Public,
y esto que lo tengo aquí,
lo meto aquí,
y ya tenemos aquí nuestro querido vídeo.
De hecho, lo voy a llamar vídeo,
para que sea más fácil.
Nos lo ha descargado en WebM,
que tiene sentido para que ocupe menos,
importante, obviamente.
Y, a ver, aquí es donde está un poco el asunto,
porque el header tiene que quedar arriba de todo.
Por eso hemos puesto el fix top 0, ¿vale?
Hasta aquí bien.
Ahora vamos a crear una section, ¿vale?
Como una sección.
Ahí vamos a tener nuestras secciones,
y cada slide, cada sección,
debería tener una imagen, un vídeo, o lo que sea.
Entonces, claro, las secciones tienen que ocuparlo todo.
Mira, voy a poner un VG Black para que lo vea más claro,
y vamos a volver aquí a nuestro...
Vale, ahora no se ve la sección,
porque no tiene nada.
A ver, si ponemos no tiene nada...
¿Ves? Esa es la sección.
Tenemos que hacer que ocupe todo el espacio disponible.
Así que ponemos un H screen, ¿vale?
H screen y W screen, ¿vale?
Para que el alto y el ancho sean el de la pantalla.
Ahora esto ya tiene mejor pinta.
Obviamente, ahora el header no se ve,
igual que pasa aquí, que está en blanco.
Eso lo tenemos que arreglar, luego lo arreglamos.
Por ahora pillamos todo el espacio.
Creo que todo el texto o todo está centrado.
Yo lo voy a dejar centrado, y luego ya veremos.
Vamos a poner que sea Relative,
porque obviamente vamos a poner dentro cosas que son absolutas,
y ponemos un Overflow Hidden para que no se nos escapen cositas por ahí.
Con esto, en principio, ya tendríamos...
Vale, y encima se ha quedado esto por encima.
Vamos a poner en el header, vamos a poner aquí C40, ¿vale?
Y a ver, por ahora vamos a arreglar esto.
Con text white aquí no nos va a funcionar,
porque esto...
¿Dónde podríamos poner que sea todo el current?
A ver, podríamos poner aquí el text white,
o mejor, vamos a poner aquí Style.
A ver, es que no lo quiero hacer así,
porque luego lo vamos a tener que cambiar.
Esto, text white...
Y el tema son los enlaces,
porque veis, ahora lo de Terla sí que se ve,
pero los enlaces nos joden, ¿no?
Entonces...
Ah, es que le hemos puesto aquí además esto.
Vale, vale, o sea, que encima ya le habíamos puesto aquí...
Vale, vamos a ponerle el white solo para que lo veamos,
mientras, para que se vea bien el vídeo y todo esto, ¿vale?
Vale.
Entonces, volvemos a nuestra sección,
para el tema del vídeo.
La sección tiene un H2, un párrafo, un botón aquí y el vídeo de fondo.
Por ahora vamos a hacer el H2.
Vamos a ponerlo a mano,
más que nada para que nos sirva un poco de guía, ¿vale?
Disfrute de Tesla.
Vamos a poner aquí un AP,
que sea programe una prueba de conducción hoy mismo.
Vamos a poner el botón,
que también quedará mal ahora,
pero bueno, para que lo veamos.
Prueba de conducción,
que en realidad no es un botón.
Esto es un enlace, ya os lo digo yo,
que esto es un enlace,
porque esto lleva una página,
aunque visualmente parezca un botón,
es un enlace, ¿vale?
Ok.
Ah, encima tiene animaciones esto,
no había fijado.
Bueno, luego eso lo podemos dejar para final,
porque igual hay una librería de Tailwind
que nos pueda ayudar.
Vale.
Y el vídeo.
Ahí está.
El tema es el vídeo.
Vamos a enfocarnos en el vídeo,
que es lo más jodido.
Entonces, vamos a poner aquí el vídeo,
source,
video,
punto,
webm,
¿vale?
Creo que esto debería funcionar.
¿Vale?
Vale.
Ahí tenemos el vídeo.
Obviamente el vídeo no se ve,
está ahí,
pero no tiene play,
o sea que tenemos que poner esto que haga
autoplay,
muted,
¿vale?
Venga.
Ahora ya funciona el vídeo.
Ese hombre es súper feliz,
joder.
El problema es que cuando termine el vídeo,
pues terminará y tendremos que,
claro,
se quedará quieto.
¿Ves?
Bueno,
pues tenemos que poner loop,
perfecto.
Y ahora tenemos que arreglar el hecho
de que no está,
o sea,
el menú tiene que quedar por encima,
¿veis?
Aquí queda por encima,
o sea que tenemos que arreglar eso.
Vamos a envolver el vídeo
con un dip,
para que veáis que los dips
se siguen usando,
¿vale?
Y vamos a poner aquí una clase.
Le vamos a poner que sea absolute,
que quede top 0,
para que se posicione arriba del todo,
pero también vamos a poner un botón 0,
para que se posicione abajo del todo.
Y esto lo que hará será ajustar el espacio,
para que esto,
aunque esté en absolute,
vaya a pillar y a decir,
bueno,
en el hueco este voy a estirar el contenido,
para que esté arriba y abajo,
pegado,
¿vale?
Y podemos ver la diferencia,
¿vale?
Esto sería con el top 0,
bueno,
no sé si se verá la diferencia,
no se va a ver una mierda la diferencia,
no se ve la diferencia,
creo que no se ve la diferencia,
porque a lo mejor la resolución es justo,
o sea,
nos queda perfecta,
o a lo mejor un poco,
a ver,
no,
no se ve la diferencia,
o sea que la resolución nos queda perfecta ahí.
Y con esto,
yo creo que ya lo deberíamos tener,
o sea,
no sé si necesitaríamos,
por ejemplo,
hacer que haga un fit y tal,
pero yo veo que no.
A ver,
si por ejemplo entro aquí,
vale,
sí que se ve un poco de diferencia,
no sé si lo notáis,
pero el mío está como más abajo,
¿habéis visto que está como un poquito más abajo?
y el suyo está como mejor centrado,
a ver,
más centrado,
no sé,
pero queda como un pelín abajo,
o sea,
como que la imagen está un poquito más bajada,
a ver,
cosas que yo me imagino que podríamos hacer,
porque obviamente esto tiene historia,
a ver,
no sé,
o no sé si lo han ajustado a mano,
es que claro,
vete a saber,
igual lo han ajustado a mano,
y nosotros estamos aquí preocupados,
a ver cómo lo ajustamos.
El tuyo se ve más completo,
el de ellos tiene un poco de recorte arriba,
sí,
claro,
pero puede ser por alguna cosa,
a ver,
ya os he dicho que no voy a intentar hacer pixel perfect,
pero lo importante,
lo importante es que quede bien,
o sea,
que no haya un hueco que no se vea,
puede ser que sea el object fit,
¿sabes?
o sea,
puede ser que tenga el object position,
el object center me parece,
a ver,
object contain,
object center,
puede ser que sea esto simplemente,
¿vale?
que está,
no sé,
algo queda ahí,
no sé si lo han ajustado un poquito a mano,
puede ser que lo ajusten a mano,
puede ser que le hagan una poca separación a mano,
pero bueno,
lo importante es que ya tenemos esto,
y ya está,
lo malo es que fijaos que debería aparecer el título este,
este título que hemos puesto aquí,
este nos debería aparecer y no aparece,
¿cómo tenemos que arreglar esto?
bueno,
vamos a poner primero como los estilos,
que sea un text white,
que tenga aquí bastante separación con la parte de arriba,
vamos a ponerle 5XL,
para que se vea bastante grande,
font medium,
vamos a poner la P también por aquí,
text white,
porque eso no nos serviría,
text,
vamos a poner base por ahora,
pero fijaos que el texto no se ve,
¿dónde está este texto?
está detrás del vídeo,
bueno,
no pasa nada,
pero veis,
está aquí,
que es justamente lo que queremos que se muestre,
como se muestra aquí,
lo queremos mostrar aquí,
pero esto,
el tema es que esto nos lo ha dejado detrás,
a ver,
podemos hacer,
a este le damos un z index de 10,
luego,
a la sección nuestra,
que queremos que se vea por encima,
o sea,
la parte esta del header,
a esto lo podríamos llamar header,
por ejemplo,
este header,
a ponerlo por aquí,
vale,
este header lo ponemos aquí,
esto vamos a llamarle footer,
donde está el botón,
porque está en la parte de abajo,
y sí,
tiene sentido utilizar un header y un footer,
no pasa absolutamente nada,
vale,
y lo que podemos hacer es que esta sección,
es la que tiene que quedar por encima,
así que le ponemos un z 30,
vale,
me deja fatal,
ah,
porque no falta el relativo,
y entonces me deja fatal otra vez,
ah,
porque el relativo ya lo habíamos puesto,
section relative,
será este el relativo,
z 30 relative,
no,
este no es,
a este sí que es,
pues mira,
ahí lo tenemos,
o sea,
que no hace falta en este,
no,
claro,
es que tiene que ser a este nivel,
claro,
claro,
o sea,
tiene que ser a este nivel,
ah,
tiene sentido,
si es que lo tenemos dentro,
ahí está,
vale,
vale,
ya tenemos entonces esta parte de aquí,
nos ha quedado un poquito grande,
igual lo bajamos esto un poquito,
disfrute de Tesla,
a ver,
¿cuántos píxeles es esto?
36,
yo creo que esto debe ser 40 píxeles,
más o menos,
y esto es más pequeño,
o sea,
esto tiene que ser SM,
sería algo así,
bueno,
queda casi,
o sea,
no queda justo,
pero queda casi,
¿cómo lo lleváis?
¿Alguna pregunta?
Mira,
no era mejor un z index negativo en el vídeo,
el z index negativo a veces es un poco polémico,
a ver,
lo podemos intentar,
lo podemos intentar,
lo que pasa es que,
a ver,
si ponemos un z 10,
o sea,
menos z 10,
funcionaría igual,
lo que pasa es que muchas veces,
a veces,
es un poco más difícil de pensar en ello,
¿sabes?
A mí me gusta más pasar,
ah,
mira,
claro,
ves,
en este caso,
al utilizar uno negativo,
fíjate,
al utilizar un negativo,
como en la sección tiene fondo,
no se ve,
porque queda detrás del fondo,
¿ves?
he puesto el negativo,
menos 10,
y queda por detrás del fondo,
yo la verdad,
si podéis evitarlo,
yo evitaría,
porque puedes tener bastantes problemas,
el relative del section quedó de más,
el del section puede ser,
porque creo que he puesto uno de más,
por ejemplo,
este,
no,
el del section no queda de más,
a ver,
va a parecer que quede de más,
ah,
mira,
tiene un poquito de scroll,
pues mira,
ya tenemos,
ya tenemos el problema detectado,
ya tenemos el problema detectado,
¿no?
A ver si ponemos el relative aquí,
vale,
no,
ves,
el relative es necesario,
porque si no queda el scroll,
si le quito el relative queda el scroll,
¿es correcto tener dos headers?
Sí,
es correcto,
porque este header es el de la página web,
y de esta sección tenemos un header,
el header no pasa absolutamente nada,
tener más de uno,
fijaos que si veáis,
el elemento header representa contenido introductorio,
¿vale?
O sea,
no hace falta poner solo un header en la página,
que esto es una duda muy típica,
vamos a cambiar el title,
porque fijaos el title,
vamos a poner Tesla,
el coche de tu sueño,
y de Elon,
¿vale?
Para cambiarle el título,
vale,
vamos con el botoncito,
a ver,
que el botoncito es un momento,
pero lo que es interesante del botoncito,
lo que es interesante del botoncito,
es cómo lo ponemos debajo,
¿sabes?
Cómo ponemos que el botón nos quede aquí abajo,
que esto es otro error muy común,
es que por eso es súper interesante la landing de Tesla,
y por eso muchas veces os digo,
haced páginas web que sean famosas,
porque aquí mucha gente lo que hace es hacer un padding top,
o hacer con el absolute,
hacer cosas muy raras,
aquí lo mejor normalmente es decir,
oye,
vamos a hacer algo,
vamos a hacer que el footer,
vamos a hacer que el footer,
este footer de aquí,
sea flex,
que sea también,
o sea,
que también como hemos hecho antes,
o sea,
flex,
flex,
grow,
¿vale?
Para que ocupe todo el espacio,
vamos a poner un flex no grab,
para que no dé un salto por si no cabe,
que sí que va a acabar,
y ponemos un justify end,
para que lo ponga al final del espacio,
¿vale?
Y con esto,
vale,
en esto ha desaparecido,
¿por qué ha desaparecido este?
¿por qué ha desaparecido?
No sé qué ha pasado,
que ha desaparecido del todo,
¿no?
Deberías salir aquí abajo,
y ahora no apareces,
¿qué ha pasado?
A ver,
vamos a ver si es que nos está liando el,
el,
¿vale?
Está ahí,
flex,
¿hasta aquí bien?
¿vale?
Ah,
está aquí,
es que está aquí,
fíjate,
es que está aquí,
claro,
que como no,
no lo veo,
vale,
flex ya nos lo deja aquí,
vale,
flex grow,
nos lo dejan en el mismo sitio,
pero si hacemos un flex,
ahí,
justify end,
nos lo debería dejar,
no sé dónde,
pero,
ah,
nos lo está dejando aquí,
¿vale?
Porque ahora están filas,
y tenemos que decirle,
flex call,
para que sea una columna,
¿vale?
Y esto,
igualmente,
nos lo ha dejado aquí,
o sea,
no está ocupando el espacio
que esperamos que ocupe,
vamos a ver qué es lo que le está,
vamos a ver por qué no ocupa el espacio
que debería,
vale,
el footer,
ah,
fijaos,
cuando se hace un poco más pequeño,
¿veis que no está ocupando bien el espacio esto?
Polémico,
¿eh?
Ahora esto lo arreglamos también,
porque fijaos que esto debería,
esto debería pillar todo el espacio,
¿veis?
Claro,
este es el problema que me,
que,
eh,
cover,
vale,
ahora,
ahora miramos esto,
porque seguramente esto,
¿veis?
Tendría que ser algo así,
tendría que ser así,
y a esto ahora tendría sentido,
o sea,
importante,
voy a ponerlo ya,
en el vídeo,
que haga el object,
el cover,
y hfull,
yo creo que con esto será suficiente,
¿vale?
Lo vamos a ir arreglando un poquito,
y ahora esto,
vamos a ver cuál es el problema de esto,
¿vale?
El problema de esto,
del footer,
el header,
el que este,
no es flex,
este es el problema,
me parece que,
el section,
el header,
yo creo que este section,
deberíamos hacer que sea flex,
también,
¿vale?
Y vamos a poner,
justify center,
items,
bueno,
espérate,
espérate,
porque esto,
esto,
esto me parece que está pillando demasiado,
vamos a ver,
vamos a ver,
tenemos,
el section,
a ver,
me voy a poner la página de Tesla aquí,
también,
además,
porque si no,
me cuesta ir mirando y tal,
tenemos el header con el relative y tal,
a ver,
este está bien,
en este flex,
yo creo que flex,
podrían ser los dos,
flex call,
y este,
el flex call también lo he puesto aquí,
vamos a moverlo un momento,
¿vale?
y esto,
y este tiene que hacer flex grow,
¿vale?
Vamos a,
este ya,
como lo tengo ahí abierto,
vale,
este flex por ahora,
lo vamos a key,
y en este,
la prueba de conducción,
lo que necesitamos es que este,
hscreen,
igual,
vamos a poner,
en el dentro del section,
vamos a poner un dip,
vamos a poner aquí un dip,
y de hecho así,
vamos a sacar también lo del zx,
¿veis esto del zx relative?
Lo vamos a sacar dentro del dip,
¿vale?
Para que,
en lugar de tenerlo dos veces,
estos dos,
los metemos aquí dentro,
¿vale?
Que creo que esto,
tiene un poquito más de seno,
ahora está funcionando como,
esto es lo que vamos a hacer,
que sea,
que ocupe todo el alto,
que tenga flex y que sea en columna,
porque yo no creo,
a ver,
en este caso puede ser que lo necesitemos,
pero por ahora lo vamos a quitar,
¿vale?
Vale,
y ahora sí que lo tenemos,
¿vale?
Ahora no lo veis,
pero está aquí debajo,
¿ves?
Que pone prueba de conducción,
no se ve,
pero ahora lo arregla.
O sea,
hemos hecho que la caja flexible,
envuelva tanto el header como el footer,
y que esto ocupe todo el espacio,
y el footer,
lo hemos puesto,
voy a ponerle que esto salga con el color que queremos que salga,
y además vamos a ponerle un padding bottom de 24,
¿vale?
Y ves,
aquí lo tenemos,
¿vale?
Ahora sí,
ahora hemos hecho que este dip que tenemos dentro,
por un lado tengamos esta parte de aquí,
¿vale?
Esta parte de aquí,
que oye,
pues perfecto,
y por otro lado,
ahora tenemos esto,
que fíjate todo lo que ocupa,
la parte de abajo.
El footer ocupa todo esto,
¿por qué?
Porque con el FlexGrow le hemos dicho,
ocupa todo el espacio que puedas,
¿vale?
Tú crece todo el espacio disponible,
y además el botón lo dejas abajo,
y abajo hemos puesto un padding bottom para que no quede abajo del todo.
No sé si se entiende un poco la técnica de lo que hemos hecho,
pero es súper interesante,
porque muchas veces,
aquí para hacer este tipo de cosas,
como que hacéis cosas muy,
muy,
muy,
muy raras,
¿sabes?
Pero es mucho mejor el hecho de decir,
mira,
tengo un header y tengo un footer,
¿vale?
El header ocupa lo que ocupa el contenido,
pero el footer ocupa el resto del espacio disponible,
¿vale?
El FlexGrow aquí en la clave,
porque el FlexGrow lo que le está diciendo es,
ocupa todo el espacio que pueda.
Luego dentro,
además le estamos diciendo,
y lo que hay dentro lo mueves al final.
Con el JustifyEn lo hemos movido aquí al final.
Y fíjate que el toque final,
porque con el JustifyEn pues sale ahí pegado,
pero le decimos,
bueno,
y ahora con el padding button lo que vamos a hacer es darle,
pum,
una separación.
Y con esto tendríamos lo que hace Tesla,
¿vale?
Que es básicamente,
bueno,
con un efecto que solo lo arreglaremos,
pero veis esta prueba,
yo creo que debe hacer algo bastante parecido,
¿vale?
Pero fijaos que ahora ya sí tenemos algo bastante similar,
nos falta ahí un detallito,
pero bueno,
bastante similar.
Ah,
mira,
me he cargado algo aquí con el,
vale,
el vídeo todavía le falta algo,
porque fijaos que ahora hay un hueco ahí,
vale,
pues ahora,
ahora sí que sí.
Y ahora me parece que ahora sí que está pillando exactamente igual el,
el vídeo,
¿eh?
Ahora,
a ver si sale el,
sí,
ahora sí que está bien,
ahora sí que está bien,
vale,
pues nada,
ahora nos faltaría este botoncito,
y ahora podemos hacer los sliders que están bastante,
la verdad es que veis que parece sencilla,
pero se van aprendiendo un montón de cositas,
¿eh?
Vamos con el botón,
vamos con el botón,
que lo tenemos por aquí,
tú,
tú,
tú,
este botón,
vamos con el botón,
a ver,
a ver,
tiene,
por lo que veo,
un borde,
vamos a poner un borde,
no sé si poner de dos,
es que me parece que es de tres píxeles,
yo creo que es de tres,
pero bueno,
rounded,
yo creo que la fuente es un poquito así,
tenemos que hacer,
vale,
el text white,
este que ya lo tenemos por aquí,
vamos a ponerle seis,
¿vale?
para que parezca un botón,
¿vale?
Ya vemos que el botón me la ha puesto un poco regunichis,
¿por qué me está haciendo esto?
Bueno,
a ver,
no pasa nada,
podemos ponerle un inline block,
y ya esto nos lo arreglará,
no nos lo arregla,
¿por qué?
Porque tenemos,
vale,
a ver,
no pasa nada,
envolvemos esto con un dip,
y ya,
ahora sí que lo tenemos,
bueno,
no es exactamente igual,
porque me da la sensación que tiene,
primero que es más pequeño,
¿no?
No parece que,
bueno,
es que no lo veis,
¿vale?
Porque tengo esto en esta pantalla,
porque si no,
estaría todo el rato cambiando,
para ir ajustándolo,
¿vale?
Y para no tardar,
pues me he puesto la página de esta aquí,
y así,
pues lo veis,
pero bueno,
que ya va pillando un poquito de estilillo,
¿vale?
Este es el de Tesla,
y este es el nuestro,
ya veis que es un poco más pequeño,
no sé,
me parece,
yo diría que,
bueno,
y el borde también,
es un poquito más grande,
yo creo que es de tres píxeles,
pero es que Tailwind no tiene tres píxeles,
es un poco rayada,
y,
y no sé,
yo creo que la fuente,
sería la SM quizás,
también el espacio este,
parece que es más grande,
más grande,
más grande,
más grande,
yo creo que ahora sí,
y,
me faltaría un poco,
el padding bottom este,
me parece que nos hemos pasado un poco,
o sea,
que estaría un poco por aquí,
fijaos,
ahora sí,
ahora sí,
no es exactamente igual,
de nuevo,
o sea,
no es pixel perfect,
pero ya empieza a ser difícil diferenciar entre uno y otro,
¿eh?
No está mal,
¿eh?
¿Qué os parece?
¿Está quedando bien o no?
O sea,
no está mal,
no está mal,
ya empezamos a ver cositas,
ya empezamos a ver,
bueno,
bueno,
eh,
veo que no tiene un hover,
fijaos,
no tiene hover,
el botón,
a mí me parece un poco raro,
la verdad,
me parece un poco raro,
así que yo le voy a añadir un hover,
porque me parece demasiado fácil no hacerlo,
y entonces vamos a poner hover,
text black,
y vamos a poner transition,
solo de los colores,
y la duración de 300,
que creo que es el defecto,
o sea,
lo vamos a hacer así,
ah,
este es el de Tesla,
y este es el nuestro,
el borde,
¿por qué sale?
Ah,
porque no lo hemos puesto border white,
border white,
y este es el nuestro,
¿vale?
Ahora con un,
con un pequeño aquí,
de hecho,
a ver,
esto,
esto soy yo,
que no sé por qué hago esto,
pero es que me da un poco de coraje,
porque creo que le quedaría súper bien,
esto no,
esto ya son puntos extras,
pero creo que le quedaría súper bien,
el hecho de hacer un backdrop,
a lo mejor no tan bestia,
pero fijaos,
que ahora con un blur,
queda súper bien el botón,
porque se nota que es un botón,
es que aquí no tienen,
aquí es totalmente transparente,
yo creo que quedaría mejor así,
no sé,
como que haga un blur,
y que haga esto,
no sé,
esto ya son puntos,
aquí cada uno lo que queráis,
pero bueno,
que al menos,
cuando me muda a Barcelona,
te invito a un par de arepas,
gracias hombre,
bueno,
lo hemos mejorado un poquito,
yo creo que queda mejor con el blur,
más que con el transparente,
queda,
te gusta más transparente,
bueno,
no sé,
igual a lo mejor no tan bestia,
el blur,
pero yo es que creo que a veces,
aunque sea un poco para que haga una diferenciación,
yo creo que algo así,
a mí me gusta más así,
la verdad,
que se note,
pero no tanto,
es que creo que el transparente a lo mejor puede molestar,
a que la gente lo note mejor,
vale,
sí tiene hover el de Tesla,
pero tiene una transición,
sí,
coño,
pues a mí no me sale la transición,
joder,
macho,
la transición de,
la transición de 5 segundos,
qué es eso,
mira,
le doy,
pero qué es esa transición,
o sea,
es el hover borracho,
es el hover que después de unas cuantas horas,
aparece,
hostia,
te juro que pensaba que no tenía,
pero qué es esto,
tío,
no tiene sentido,
este hover,
el hover con lag,
espero que los,
que sus coches vayan mejor que esto,
hombre,
vaya delay,
no tiene sentido,
pues mira,
no tenía ni idea,
te lo juro que no lo sabía,
yo creo que es mucho mejor algo así,
no,
es que no sé,
no sé,
bueno,
vamos con lo siguiente,
bueno,
antes de,
antes de,
voy a hacer el slider ahora,
vale,
veis este slider,
vamos a hacer este slider,
que yo creo que nos saldrá fácil,
y antes de hacerlo,
como se nos está complicando un poquito todo,
veis que se nos está complicando esto ya,
cosa mala,
vamos a separar un poco esto,
vale,
en componentes,
lo mejor del astro,
es que astro no utiliza React,
pero puedes crear componentes,
que al final son como trozos de HTML,
reutilizables en tu página web,
entonces podríamos tener,
por ejemplo,
logo,
y ponemos punto astro,
ya podemos extraer de aquí,
este pedazo de logo,
que teníamos aquí,
vale,
lo ponemos aquí,
lo pegamos,
ok,
y ahora aquí,
utilizamos logo,
ahora todo este header,
pues este header,
vamos a poner componentes,
y vamos a poner,
yo que sé,
header punto astro,
bueno,
es que header en general,
landing,
landing header,
vale,
punto astro,
le ponemos aquí,
vale,
ya teníamos separado esto,
el logo no lo encuentra,
tenemos que importar aquí,
vale,
aquí en astro para importar algo,
fijaos,
hay que poner las tres guiones,
el import,
tres guiones,
vale,
y ahora aquí,
pues vamos a poner el header,
landing header,
quitamos el logo que ya no lo necesitamos,
guardamos,
y todo debería seguir funcionando exactamente,
y esto,
esto por ahora,
vamos a hacerlo mal,
en el sentido de que,
voy a copiar esto,
vamos a poner aquí,
vamos a poner,
giro section,
punto astro,
pero luego te enseñaré como utilizar,
como reutilizar,
para poder pasarle,
como parámetros,
para poder cambiar el título,
y todo esto,
y será interesante,
porque así podremos utilizar,
todo este bloque,
como si fuese un componente,
pero bueno,
por ahora vamos a dejar esto,
y aquí ponemos,
giro section,
y esto,
pues funciona exactamente,
de hecho ya podemos hacer esto,
esto es lo bueno de utilizar componente,
y ya tendríamos el giro section,
unas cuantas veces,
ves,
ya lo tenemos repetido,
obviamente no es lo que queremos,
que todos tengan el vídeo ahí a saco,
pero lo interesante es ver,
que realmente,
podamos dar el salto,
y que quede exactamente,
vale,
queda exactamente perfecto,
la altura,
y se ve todo bien,
muy bien,
así que ya tenemos como,
este estilo de tener,
más de una vez,
los slides,
vale,
ok,
atentos con esto,
que esto es,
chef kiss,
pero tanto,
como mi camiseta de la Kingsley,
no me digáis que no os gusta,
es que me encanta la camiseta,
es que me encanta la camiseta,
de verdad,
ay dios mío,
me encanta la camiseta,
oye Matías,
gracias por la raid,
hombre,
muchísimas gracias,
bueno,
pues,
es que qué bonito el logo,
los que casi,
at,
no es at,
es que me han enviado la camiseta,
no es at,
no me han pagado por enseñaros la camiseta,
es que me gusta la camiseta,
que me gusta de verdad,
de qué equipo es,
esta es la general,
hay una que es como general,
que es esta,
la de la Kingsley,
no es promo,
ojalá,
o sea,
os imagináis que fuese una promo de la Kingsley,
sería increíble,
sería increíble,
pero no lo es,
os lo juro que no,
tampoco me han amenazado,
tampoco me han amenazado,
como soy,
soy la hostia,
en fin,
fijaos,
ahora vamos a hacer lo del slider,
fijaos que cuando tú haces un pequeño scroll,
vas a una siguiente sección,
¿vale?
¿veis lo que hace?
que vas a una siguiente sección,
y aquí yo hago un pequeño scroll,
y obviamente no va a la siguiente sección,
¿vale?
pues,
a ver,
vamos a arreglar,
seguro que su contrato dice que no diga que es una publicidad,
que no hombre,
que no,
como sois,
sois la leche,
tenéis unas invenciones a veces que yo alucino,
de verdad,
alucino,
vale,
a ver,
vamos por par,
lo primero que vamos a hacer es,
todas las secciones que vamos a hacer,
las vamos a envolver en,
no,
no las vamos a envolver,
mira,
vamos a utilizar el main,
que tiene sentido,
en lugar del header,
ponerlo dentro del main,
que no tiene sentido,
porque el header no es el contenido principal,
el contenido principal son las secciones,
vamos a utilizar el main,
así no creamos un main,
un deep,
y vamos a ponerle aquí,
vamos a poner que esto es relative,
que ocupe todo el espacio,
lo mismo que antes,
que ocupe hscreen,
¿vale?
hscreen es que ocupe el alto,
el de la pantalla,
y vamos a ponerle que tenga un overflow auto,
¿vale?
¿Por qué es esto?
Bueno,
porque si volvemos aquí,
fíjate que funciona exactamente igual,
pero hemos hecho algo un poco diferente,
porque lo que he hecho aquí con este main,
es que este main ocupe el alto,
exactamente lo mismo que la pantalla,
y con el overflow auto,
lo que estamos haciendo,
es que scrolle este contenedor,
no la página,
este contenedor,
y así este contenedor,
lo que vamos a hacer,
es un slider,
con CSS,
que vas a flipar,
que es muy fácil,
es que es tan fácil,
que me da hasta vergüenza,
pero a ver,
lo que vamos a hacer,
primero vamos a decirle,
snap i,
¿qué es esto de snap i?
Mira,
pues muy fácil,
tú buscas scroll snap,
y en Google ya,
mira quién sale aquí primero,
midudev,
donde hace,
en 2018,
ya utilizamos esta propiedad,
de CSS,
es una propiedad,
que puedes utilizar,
para hacer sliders,
con CSS,
y de qué sirve esto,
mira,
a ver si sale un ejemplo,
por aquí,
aquí lo tenemos,
mira,
utilizando la propiedad,
scroll snap type y,
que significaría en el eje i,
o sea vertical,
y mandatory,
sería que obligatoriamente,
tiene que terminar,
mira,
mandatory,
ah,
ahora,
que cuando hace scroll,
pues en cuanto aparece,
tiene que acabar,
en uno de ellos,
¿vale?
en cuanto aparece,
por ejemplo,
en cuanto aparece,
es que hace un scroll,
un poco raro esto,
porque se está equivocando,
con el mío,
y con el,
a ver si puedo,
a ver,
que aquí lo veremos,
un poquito mejor,
¿vale?
Bueno,
pues fíjate,
que en cuanto aparece,
pues ya,
va al siguiente,
de hecho,
esto es lo que está utilizando,
la página de Tesla,
bueno,
no sé si usa esto,
pero lo aparece,
y en cambio,
el de proximidad,
es que cuando está cerca,
pues ya,
también pega el salto,
a ver si,
ves,
este,
o sea,
hasta que no está todo,
ves,
hasta que no está,
casi todo el bloque,
no se pone,
por ejemplo,
si tú lo dejas en medio,
ves,
aquí lo puedes ver en medio,
pero aquí no,
aquí siempre,
ves,
aquí siempre,
está en uno,
no puedes estar en medio,
en mandatoria es,
no,
tengo que terminar en uno,
no te voy a dejar a media,
y el proximity,
lo que puedes decir es,
bueno,
hasta que realmente,
del siguiente,
no se vea todo el bloque,
o sea,
todo el bloque no,
cuando no se vea la mayoría,
entonces no voy a ir,
ves,
entonces tú vas haciendo scroll,
y hasta que no se vea,
casi,
casi todo,
ves,
no da el salto,
¿vale?
Y el que esté más próximo a ese punto,
es el que se va a ver,
muy bien,
pues esa sería un poco la diferencia,
ya sabes,
vamos a utilizar mandatoria,
ya te digo,
y además de esto,
también puedes centrar al centro,
o al principio de la slide,
o sea,
vamos a utilizar center,
ya lo digo también,
pero podrías decir,
bueno,
quiero que quede en el centro,
o quiero que quede en el principio,
en este caso,
pues podremos ver cómo funcionaría,
con el,
a ver si lo encontramos,
con el start,
por eso,
en este,
fijaos,
que ves aquí que acaba al principio,
o sea,
yo hago scroll,
y cuando hago un poquito de scroll,
va al siguiente y lo deja al principio,
pero si tú lo pones en el center,
quedaría en mitad del texto,
o sea,
hay veces que te puede interesar el center,
y otras veces que te puede interesar el start,
a nosotros no nos va a interesar el center,
aunque la diferencia va a ser la misma,
o sea,
no va a tener un impacto,
así que le vamos a decir,
snap i,
o sea,
eso lo tenemos que utilizar en el contenedor,
donde estamos conteniendo nuestras slides,
le decimos,
queremos hacer un slider,
que sea vertical,
y vamos a decirle además,
que sea snap mandatory,
porque siempre queremos acabar en una,
no que se vea la mitad y tal,
no,
queremos siempre que acabe en una,
que sea la primera o la segunda,
pero no la del medio,
porque no queremos,
o sea,
siempre,
fijaos que es lo que hacen ellos,
o sea,
yo intento bajar un poquito,
intento bajar un poquito,
y ya dice,
no,
la siguiente,
¿sabes?
A por todas,
punto,
pues esto es lo que vamos a hacer nosotros también,
¿ok?
Entonces,
ahora,
para que esto funcione,
cada una de las secciones,
también la tenemos que envolver,
no,
no,
no van a funcionar así por así,
así que vamos a utilizar un div,
aquí sí,
un div,
y le vamos a poner aquí el snap,
y le decimos donde quede,
pues le decimos que en el centro,
¿ok?
Podría ser start,
yo creo que en nuestro caso,
tanto center como start,
sería lo mismo,
y,
vamos a quitar estas,
vamos a poner,
vamos a copiar estas,
¿vale?
Guardamos estos cambios,
y vamos a nuestra página,
y ya lo tenemos,
ya está,
ya lo tenemos hecho,
ya está,
así de fácil,
así de fácil y rápido,
exactamente lo mismo,
obviamente ahora mismo,
no se nota,
no se nota porque es siempre el mismo,
¿vale?
No sé si lo notáis,
porque es siempre el mismo,
ahora eso lo arreglamos,
pero ya tenemos el slider,
con magia potagia,
¿habéis visto?
Para que veamos bien que esto está funcionando,
si os parece,
vamos a crear otra sección,
vamos a crear la,
¿cómo se llama?
la charge section punto astro,
¿vale?
Vamos a crear una sección más,
basada en la de giro,
que sea,
y además así,
veremos,
no solo el contraste,
sino que tenemos que cambiar el header,
así que,
vamos con el charge,
es que no sé cómo se llama charge,
sí,
pone aquí que es charge,
vale,
vamos al charge,
y vamos a descargarnos,
el de carga es este,
ese,
ay perdón,
es este último,
¿veis este?
que es muy blanquito y tal,
vamos a hacer este,
que es bastante fácil,
y que crea mucho contraste con el vídeo,
y luego,
si tenemos tiempo,
haremos los otros,
que es exactamente lo mismo,
¿vale?
Pero vamos a hacer,
bueno,
o hacemos,
hacemos esto,
cualquier disca,
que al final son lo mismo,
a lo mejor esto os parece más bonito,
¿no?
Vamos a hacer este,
vamos a hacer este,
nos vamos a guardar la imagen,
vamos a,
vamos a hacer el del coche,
que nos gustaría tener,
pero jamás vamos a comprar,
¿vale?
Este cual era,
el model Y,
¿vale?
Model Y,
Model Y,
¿vale?
Vamos a hacer este,
que es más bonito,
¿vale?
Y además este también cambia el header,
o sea,
que nos va a servir exactamente,
vale,
vamos a cambiar,
aquí vamos a poner que esto sea model Y,
vamos a cambiar también este text white,
esto es text black,
esto también es text black,
aunque aquí esto sería concertar una prueba de conducción,
por ahora voy a poner aquí un underline,
solo para que se vea exactamente igual,
obviamente aquí en los botones también cambia,
porque son dos y además esto debería tener un flex,
flex call y además un gap de cuatro,
por decir algo,
también veo que aquí este es explorar inventario,
explorar inventario y pedido personalizado,
pedido personalizado,
y nos falta la imagen,
claro,
ahora estamos utilizando el video,
aquí tenemos el video y tal,
que a ver,
no está mal,
pero esto lo vamos a cambiar y vamos a poner aquí un picture,
podríamos poner la imagen directamente,
vamos a poner la imagen directamente,
vale,
image source y aquí teníamos model Y.aviv,
aviv,
por si no lo conoces,
es un formato súper nuevo,
más nuevo que webp,
que ofrece una mejora en cuanto a cuánto ocupa una imagen
y cómo de bien se ve,
espectacular,
vale,
esto ocupa todo el espacio,
le ponemos object cover,
que quede en el centro,
esto lo utilizamos exactamente igual,
veremos ahora si esto es suficiente,
si nos da algún problema,
vale,
pero entiendo que con estos cambios ya tendríamos la sección de charge section,
ahora lo arreglaremos para reutilizarlo,
vale,
pero charge section,
por ahora lo hacemos así,
a mano,
nos aseguramos que funcione,
y luego veremos,
vamos a copiar,
para tener como más,
vamos a utilizar giro,
charge,
giro,
charge,
vale,
y nos vamos aquí,
tiene algunos problemas,
no pasa nada,
los arreglamos ahora,
fijaos,
aquí hay un problemita,
que en el charge,
como hemos puesto que esto sea flex,
que está pasando,
a ver,
no sé si es,
entiendo que esto no,
no,
porque esto lo hemos puesto en line block,
no sé por qué nos hace esta,
sabes que me está metiendo aquí esto,
me lo está metiendo como que sea todo el espacio,
y no sé si lo hace por el flex grow,
sabes,
no sé por qué,
no sé por qué lo hace,
porque claro,
el problema es que si quitamos esto,
vale,
no hay problema,
si quitamos eso,
perfecto,
es lo que queremos,
lo único es,
lo único malo es la separación,
claro,
lo que pasa es que la separación,
entonces aquí no la podemos hacer,
porque no,
no,
como no flex,
pues no la entiende,
pero claro,
es que pongo flex,
y entonces me hace esta cosa rara,
ah no,
ahora sí que me la he hecho,
vale,
pues ya está,
ahora sí que lo tenemos,
lo tenemos fino,
vale,
ahora sí que lo tenemos fino,
obviamente no están los estilos,
a ver,
vamos a poner esto,
para que vea los colorcillos,
este sí que sería totalmente,
bueno,
es un poco diferente,
porque este es totalmente blanco,
este no podríamos tener black backdrop blur,
no tiene border white,
ni nada,
tampoco tiene hover,
vale,
este sí que no tiene hover,
no es que tarde,
no,
es que no tiene hover,
vale,
un poco raro también,
no sé,
podríamos ponerle,
aunque sea,
aunque sea,
hacerlo al revés,
no sé,
es que me parece un poco extraño que no tenga hover,
me parece un poco,
un poco extraño,
vamos a hacer que haga un cambio de colores,
vale,
cambio de colores,
este sería,
pam,
pam,
pam,
vale,
además veo que,
no,
no me está centrando aquí el flex,
justify,
sense,
enter,
quitamos el line block,
a ver un momento,
vale,
ahora sí,
solo que esto tiene que ser text black,
y este color,
que este color es un poco polémico,
parece como un gris,
bueno,
me voy a fiar de,
un poquito de cómo lo hace,
cómo lo hace aquí,
vamos a hacer el color,
sería un poco esto,
todo esto fuera,
BG grey,
no sé,
sería algo así,
no sé exactamente cuál,
qué color sería,
vale,
BG black,
hover,
text white,
vale,
esto ya está repetido,
y con esto,
ah,
mira,
de hecho,
este también,
la hemos liado aquí,
esto aquí,
vale,
pues,
a ver,
más o menos,
no es que se podría mejorar,
o se podría,
de hecho,
este,
podríamos hacer que tenga un color más,
grey 300,
vamos a hacerlo al revés,
para que quede un poquito más,
color polémico,
también un color un poco polémico,
no sé,
no sé,
no me he terminado,
no me he terminado,
vamos a dejarlo como está,
vamos a dejarlo,
al menos,
ya está,
más o menos,
Slade,
bueno,
más o menos,
más o menos,
el tema,
el tema,
el tema,
ahora,
que ya tenemos esto,
ya tenemos el tema del slide,
que la verdad es que queda súper bien,
sí que hay un tema,
que estos botones son un poco más pequeños,
por culpa de que le falta el borde,
claro,
como el borde ocupa un espacio,
¿veis?
el color parece un poquito pequeñito,
¿sabes?
como que quedan más pequeños,
o sea,
tener el borde de tres píxeles,
borde grey 600,
o sea,
que tiene el mismo color,
y que además,
cuando cambia,
pues el borde también cambie,
y sea justamente del mismo color,
o sea,
podría ser una,
para ver,
ahora,
ahora sí que parece que tienen más espacio,
entonces,
esto sería esta de aquí,
que se parece bastante,
pero,
aquí tenemos el problema,
¿vale?
hay un problemilla,
hay un problemilla,
el problemilla que tenemos,
es el header,
y este,
este está bastante interesante,
¿vale?
porque cómo hacemos,
fijaos que aquí,
cuando cambia,
cambia el header,
que además lo hace con una transición bastante bonita,
entonces,
¿cómo hacemos esto de cambiar de este,
a este,
cuando cambiamos de slide?
esto,
esto es bastante interesante,
¿eh?
y vais a alucinar,
¿ya tiene el efecto scroll?
no,
no lo tiene,
pero porque todavía no lo habíamos necesitado,
lo podemos poner,
sería scroll,
y esto,
pum,
pum,
pum,
vale,
entonces,
¿cómo hacemos,
que detecte,
cuando el header,
pasa a este,
y entonces,
le cambie el color,
¿tenéis alguna idea o qué?
javascript event,
bueno,
no es mala idea,
mi tú,
entre border y outline,
¿qué diferencia hay?
pues que el border,
es el border y el outline,
es lo que iría por fuera,
del outline,
parece que edge,
no soporta a bif,
sí,
todavía hay algunos que no soportan a bif,
la verdad es que lo de edge,
no entiendo por qué no soporta a bif,
cuando safari incluso lo hace,
y edge,
está basado en chromium,
no lo entiendo la verdad,
eh,
dos headers y uno está display non,
no,
no,
no,
así no,
así no,
filter inverse 100%,
podríamos,
la verdad es que eso se podría hacer,
pero no es tanto,
no es tanto el hecho de,
de cómo hacemos lo del color,
sino cómo hacemos la detección,
de pronto lo hicieron fijo,
cambia de black a white,
hombre,
ya,
pero ahí está el tema,
¿cómo cambia de black a white?
a ver,
a mí se me ocurre una forma,
hay un montón,
que no es que,
una TV listener,
con un hash,
un observer,
medio,
¿cómo hace para que no aparezca la barra del scroll?
eso es un tema de,
de,
de macos,
¿vale?
macos tiene,
tiene este scroll,
y que lo puedes configurar y ponerlo,
con inteligencia artificial,
ojalá,
¿sabes?
ojalá lo hiciera automáticamente,
un scroll spy,
bueno,
sí,
un scroll spy,
básicamente,
a ver,
a mí se me ocurre una,
que además no estaría mal,
cuando baje x pixels,
que cambia a black,
ya,
pero imagínate,
que por lo que sea,
tiene que cambiar de blanco a negro,
y de negro a blanco,
¿sabes?
no tendría sentido,
con una media query no se puede,
y se podría hacer detectando el fondo claro,
se podría,
pero sería muy costoso,
e innecesario seguramente,
porque,
fíjate que detectar,
que el fondo es clarito y tal,
tendrías que saber qué imagen hay detrás,
tendrías que cargar la imagen,
y una vez habida la imagen,
¿sabes?
bueno,
yo lo voy a hacer de una forma,
y,
y además creo que es,
no,
no voy a decir que es la forma perfecta,
porque seguro que hay mejores formas,
pero a mí me parece una forma interesante,
porque así además vamos a aprender,
a utilizar Intersection Observer,
y os voy a explicar mi estrategia,
que yo voy a utilizar aquí,
y luego seguro que hay otras formas,
y a lo mejor incluso mejores,
pero yo creo que puede ser una,
una como bastante fácil declarativa,
que la pones en un sitio y te olvidas,
a ver,
por ejemplo,
el giro section este,
el giro,
que es el de arriba,
el que tiene el vídeo,
yo aquí le podría,
podríamos utilizar o datas,
podríamos poner por ejemplo data,
scroll section no,
pero header color,
por ejemplo,
y decir que esta sección,
tiene que color,
tener el color white,
el primero,
o es black,
¿no?
¿Cuál es el primero?
El primero es,
vale,
en cada sección,
podríamos tener el color que tiene que mostrar,
y este sería el black,
entonces,
si el día de mañana hay una que es 09F,
por ejemplo,
o que es blue,
o lo que sea,
lo podríamos tener,
y de hecho incluso,
y luego verás,
esto lo podríamos tener en un array,
para que cada vez que se,
se renderice una sección,
pues realmente tener el color que le corresponde,
la de carga,
se supone que es black,
esta sería,
o sea,
cada sección que tenga su color,
y esto al final es HTML,
o sea,
ahora mismo,
eso lo ha hecho,
ahora,
¿cómo realmente utilizamos ese valor?
¿Cómo utilizamos ese valor?
Lo que podríamos hacer es,
en la landing header,
header,
podríamos añadir un script,
y vamos a utilizar una tecnología que se llama intersection observer,
¿vale?
el intersection observer,
lo que nos permite,
es detectar cuando un elemento está en el viewport,
cuál es su posición,
cuánto trozo de ese elemento hay en el viewport,
y detectarlo,
o sea,
es decir,
ostras,
pues es este elemento el que acaba de entrar en el viewport,
y para eso,
necesitamos utilizar primero,
crear las opciones de intersection observer,
así que vamos a tener las observer options,
y hay que pasarle tres opciones,
¿no?
Tenemos la del root,
que le vamos a decir null,
¿el root qué es?
Pues sería básicamente default to viewport,
o sea,
ahora mismo estaríamos refiriéndonos a cuando entra el viewport,
pero tú podrías utilizar intersection server para un elemento en concreto,
por ejemplo,
para una card,
¿sabes?
Imagínate el card element,
una card,
pues quiero saber cuando dentro de esa card se ve cierta cosa,
¿no?
En nuestro caso vamos a utilizar el viewport,
porque es solo cuando esté en pantalla,
¿vale?
Luego el margen,
vamos a utilizar cero píxeles,
¿por qué?
Porque queremos que en cuanto se vea el elemento,
o sea,
en cuanto empieza a asomar,
ya queremos saber si se ve o no se ve,
y luego tendríamos el threshold,
el threshold sería el porcentaje de visibilidad,
efectivamente,
¿qué porcentaje de visibilidad queremos que tenga ese elemento para detectarlo?
Por ejemplo,
imagínate,
aquí cuando hacemos scrolls,
ahora el elemento este tendría un 100%,
pero si seguimos bajando,
podríamos decir que el de arriba tiene una sección de,
se estaría viendo un,
mira,
aquí sería un 70% el de arriba y el de abajo un 30%.
Si ponemos un 0.5,
significa que el de abajo no lo detectaría.
¿Por qué?
Porque el de abajo diría,
ostras,
es que el de abajo está por debajo del threshold,
me has dicho que te avise cuando la visibilidad es del 0.3,
o sea,
del 0.5,
del 50%,
y ahora mismo solo se ve un 30%.
Entonces,
hasta que tú no hagas así,
y ya haya más del 50%,
no va a detectar el elemento ese de la sección.
Y esto a nosotros nos viene perfecto,
porque justamente nunca vamos a tener dos secciones que se vean más del 50%.
Siempre vamos a querer que la que más se vea,
es la que determine cómo es el color del header.
Así que podríamos poner aquí,
por ejemplo,
podríamos poner 90%,
porque siempre vamos a tener una sola sección,
gracias al scroll snap que hemos hecho antes,
solo se ve siempre una sección.
O sea,
nunca vamos a tener el caso este que se vea medias y tal.
O sea,
siempre vamos a querer que la que más se vea,
es la que determine cómo se ve el header.
¿Vale?
Muy bien.
Entonces,
estas serían las opciones que tenemos que pasarle.
Y ahora tenemos que crear el observador,
el que va a observar los elementos.
Así que joder,
como aquí Jacobo.
Observer,
new intersectional server,
bueno,
casi,
casi,
no está mal,
pero utilizamos new intersectional server.
¿Ok?
Esto,
lo que va a recibir
es un callback
que va a llamarse
cada vez que el observer,
con los elementos que observe,
tenga que dispararse.
Y diga,
vale,
estos son los elementos
que estoy viendo
que están cumpliendo
las opciones que me has comentado.
Y esto es lo que se ejecutará siempre.
Un callback aquí,
donde tendrás aquí
todos los elementos
que han superado
las opciones,
o sea,
que el server joder está por encima de 0.90
y que está visible en el view.
Entonces,
aquí tenemos diferentes opciones.
Dentro del entries,
podríamos decir,
para cada entry,
que nosotros normalmente
solo vamos a tener una,
¿no?
Podríamos sacar
el is intersecting,
¿vale?
Que es la opción esta
que tenemos en el entry.
Y decimos,
podríamos decir,
si está interseccionando,
entonces,
¿qué es lo que está diciendo
el jacopilot?
Nosotros vamos a hacer otra cosa.
Nosotros vamos a decir,
oye,
vamos a decir
que si está interseccionando,
vamos a recuperar
el elemento
que está interseccionando,
vamos a decir,
vamos a recuperar
el color
del entry.target
del elemento
que está interseccionando.
Y vamos a recuperar
el color.
Get attribute
y vamos a recuperar
el atributo
que teníamos aquí
en el landing,
en el header section.
¿Ves?
Este atributo
que habíamos hecho aquí
y recuperamos el atributo.
Así sabemos
que esa sección
que está entrando
y se está interseccionando,
vamos a recuperar el color
y este color
lo que vamos a hacer es,
bueno,
vamos a recuperar el header,
que el header este
lo podríamos recuperar fuera,
no hace falta que lo recuperamos
dentro del observer.
El header,
document.querySelector
y nos vamos al header
que lo tenemos aquí.
Fijaos que ahora
no tenemos ninguna idea,
podríamos poner una idea,
vamos a ponerle,
bueno,
header me parece un poco
demasiado general.
Web header,
¿cómo le hemos llamado aquí?
Landing header.
Vamos a llamarle
landing header,
¿vale?
Landing header,
recuperamos aquí
el landing header,
¿vale?
Tenemos aquí
el landing header.
Le voy a poner esto,
esto lo que quiere indicar
es que es un elemento
del DOM,
es una cosa que utilizo
desde hace mil años
y se me ha quedado,
¿vale?
Entonces tendríamos el header
y hacemos el,
bueno,
voy a utilizar,
porque creo que esto tiene,
no sé si utiliza,
yo creo que sí que utiliza,
o sea,
puedes utilizar TypeScript,
es que no sé si se me quejará,
a ver,
voy a dejarlo sin utilizar,
¿vale?
Vale,
header y ahora
lo vamos a cambiar de style,
style.color
y le indicamos el color,
¿vale?
¿Por qué se me pone así?
Header,
joder,
la madre lo trajo,
¿vale?
Did you mean header?
¿Ves?
Dice,
property style no existe
en el tipo de elemento,
¿ves?
Es que me parece que utiliza
TypeScript,
esto sería TypeScript,
ya está,
como un elemento HTML,
le cambiamos el color
y ya está,
con esto ya tendríamos.
Ahora,
segundo parámetro que necesita
IntersectionObserver,
¿vale?
Este sería el primer parámetro
y el segundo parámetro
son las opciones
que hemos creado,
¿vale?
Entonces ya tendríamos aquí
el observador,
creamos un observador,
¿vale?
Un nuevo IntersectionObserver
que tiene que hacer esto
cada vez que se cumplan
estas opciones de aquí,
¿vale?
Vale,
y ahora este observador
tenemos que utilizarlo,
¿qué es lo que queremos observar?
¿no?
¿Dónde,
dónde realmente,
cuáles son los elementos
que queremos ver?
Pues ahora le vamos a decir,
oye,
recupérame,
¿ves?
Aquí dice el header,
no,
esto no es lo que es.
Vamos a recuperar las secciones,
como el Section,
obviamente esto no debería ser así,
pero aquí deberíamos poner,
por ejemplo,
poner Landing,
Landing Section,
Charge Section,
vamos a poner aquí
Landing Section,
tenemos que utilizar clases
porque hay más de una sección,
¿vale?
Landing Section,
pues aquí vamos a hacer
un Document Query Selector,
pero no de Section,
sino de Landing Section,
aquí tendríamos las secciones
y ahora lo único que tengo que hacer
pues es un For Each,
Sections,
para cada sección,
no sé por qué me pone esto gratis,
para cada sección,
pues quiero que me hagas
un Observer,
punto,
Observe,
de la sección,
y con esto,
si no me he equivocado,
ya lo tendríamos,
¿qué tal?
¿Alguna pregunta?
¿Es preferencia personal
usar Getatube
versus el objeto Dataset
o algún beneficio?
Había beneficio
en temas de velocidad,
pero a mí me gusta,
por ejemplo,
del Query Selector,
¿qué pasa?
En el Document Query Selector
está el GetElementById,
el GetElementByTag,
yo que sé,
hay un montón,
entonces lo que me gusta
es intentar utilizar
el mínimo número
de métodos del DOM,
por ejemplo,
del Document.QuerySelector
y del Target,
el GetAtrib,
y me gusta que sean métodos
en lugar de intentar utilizar
propiedades
como sería la del Datas,
pero esto soy yo
y si te gustaba más,
pues ya.
Vale,
¿por qué utilizo el dólar?
El dólar es una cosa
que utilizábamos antiguamente,
¿vale?
Mira,
lo voy a quitar
porque sé que va a volar
la cabeza
y al final es una tontería,
pero es una forma visual
de ver que es un elemento
del DOM,
porque antiguamente
con jQuery
y todo esto,
cuando recuperábamos
un elemento del DOM,
le poníamos el dólar
y así sabíamos
que era un elemento del DOM
y así podríamos diferenciar
fácilmente
si era un elemento del DOM
o era una variable normal,
pero bueno,
lo puedo quitar
y ya está,
le podemos poner
header element
para que lo veáis más claro,
a mí no me importa,
solo que sections,
section element
y ya está,
le puedo llamar
como quiera,
sí,
en PHP también se utilizaba,
a ver,
que todavía no hemos probado
que funciona,
voy a tomar agua
y os leo bien.
en Angular se utiliza el dólar
para los observables,
es verdad,
agüita mi amor,
gracias.
Yo todavía he sido usando el dólar,
¿has visto?
Nunca pasa de moda.
Vale,
pues con esto,
vamos a ver,
estamos aquí,
esto está en blanco
y se queda en blanco,
la madre que lo parió.
Vale,
se queda en blanco,
¿por qué se queda en blanco?
Se queda en blanco
porque obviamente
esto no lo hemos cambiado.
Vale,
cuando hacemos el get attribute
y ponemos el color al header,
fijaos que el header
no es el que tiene,
tiene un text white aquí,
pero como tal,
aquí le estamos poniendo
el color a saco.
Aquí tenemos que poner
text current color,
text current en todo caso,
para que recupere el color,
el current color,
text current.
El current color
es súper interesante,
el current color
es la primera variable
que existió en CSS,
si no es la primera
de las primeras,
y lo que hace
es que recupera,
mira,
ahora sí que funciona,
que recupera el color
de herencia,
o sea,
dice,
bueno,
yo,
lo que me está diciendo
es que este es el current color,
¿ves?
O sea,
aquí,
si miramos,
¿ves?
Dice,
esto es el current color,
este enlace es el current color.
¿Qué es lo que hace
el elemento A?
Dice,
bueno,
como es el current color,
voy a ver cuál es el color de Lee.
Lee no tiene color.
Vale,
pues voy a ver el elemento de UL.
UL no tiene color.
Voy a ver el elemento de NAP.
NAP no tiene color.
Voy a ver el elemento de header,
¿sabes?
Va en herencia,
hacia arriba.
Y en el header
se encuentra que el style
tiene un color de black.
Dice,
ah,
pues mi current color,
mi color es el black
y por eso lo hereda.
Y ahora sí,
fijaos,
qué bonito,
qué bonito,
qué bonito.
No me digáis que no está bonito.
Vamos,
no me digáis que no está bonito
porque a mí me parece
que estamos haciendo
la landing de Tesla.
A ver,
lo que podríamos hacer también,
fijaos,
que una cosa que le falta
sería
la transición de los colores.
Entonces,
podríamos,
para empezar,
el logo.
El logo vamos a ponerle aquí
también un transition colors,
transition,
porque le falta un poquito
de transición.
Vamos a hacer esto,
de 500.
Y lo mismo aquí,
cuando habíamos hecho todo esto,
esto tendríamos que poner aquí
transition,
a ver si esto lo arreglan
en Tailwind.
Esto es una de las cosas
que no me gustan de Tailwind,
el hecho de tener que repetir
constantemente
una y otra vez
cuando quieres ir a un elemento.
Esto lo odio
y ojalá lo arreglen
porque me parece
muy mal
que todavía no lo tengan arreglado.
Pero bueno,
vamos a tener que sobrevivir.
Vale,
ahora le hemos puesto esto,
¿vale?
Ahora ya tenemos la transición.
Igual es un poco exagerada,
pero bueno,
era para que veáis que
aquí tienen la transición
mucho más corta,
ya lo digo yo,
que la tienen mucho,
mucho,
mucho más corta.
De hecho,
es interesante porque
este sí que parece black,
pero cuando llega aquí
esto no parece black,
o sí que parece black,
no lo sé,
pero bueno.
Con paréntesis
para hacer conjuntos.
No se puede,
¿no?
Su Luis Arrieta,
que yo sepa.
Tailwind,
Reuse,
Selector,
yo creo que no se puede todavía.
Reuse en Styles,
no, Styles no.
Styles no.
Yo creo que no se puede.
Loop,
¿se puede?
O sea,
algo nuevo,
porque yo creo que siempre dicen
extrairlo en un componente.
No,
el group,
para eso no es el group.
El group no es para eso.
No se puede.
Vale,
vale,
pues nada.
Vale,
entonces al menos ya tenemos esto
y ya empieza,
hombre,
ya se parece bastante,
parece bastante,
hemos hecho cosas muy chulas,
pero vamos a ponerle la guinda,
vamos a ponerle la guinda,
porque hay una guinda
que a mí me parece espectacular,
que hay que,
os voy a poner la guinda,
está escribiendo por aquí,
para ver,
hay una guinda que es tremenda
y es el detalle este,
fijaos en este detalle del menú,
¿veis esto que hace este hover?
Y tú te vas a la derecha,
¿veis lo que hace?
Hay aquí como una cajita que le sigue,
está súper chulo ese efecto,
¿lo hacemos o qué?
No es difícil,
pero tiene truco,
¿vale?
No,
no creo que sea difícil,
pero yo voy a hacer,
de nuevo,
a ver,
yo no sé cómo lo ha hecho Tesla,
no me he puesto a mirar,
yo que sé,
cómo lo ha hecho y tal,
me lo puedo imaginar,
pero bueno,
yo lo voy a hacer de una forma
o voy a intentar hacerlo de una forma
y vamos a ver cómo sale
y si sale
y si no sale,
pues nada,
seguiremos,
dejaré la programación
y ya está.
Nada,
si no sale no pasa nada,
así que yo voy a crear aquí,
dentro del header,
voy a crear la cajita,
la cajita que no va a tener
una posición como tal,
o sea,
voy a crear la cajita esta que se ve,
esa cajita que se ve de fondo,
¿ves?
Yo la voy a crear ahí,
que esté ahí,
pero no va a saber
dónde posicionarse,
digamos,
¿no?
Entonces,
vamos a crear aquí,
le voy a poner una idea,
porque obviamente vamos a tener
que moverla,
así que le llamamos
menú back drop,
¿vale?
Y vamos a estilarla,
vamos a estilarla
y vamos a ponerle,
obviamente,
todos los estilos que necesitan.
Va a necesitar un valor absoluto,
¿por qué?
Porque va a estar relativo
a este de aquí,
que de hecho,
vamos a tener que poner
que el header esté relativo,
porque si no,
no,
ah,
mira,
fix,
ah,
porque cuando fix ya es relativo,
o sea que no hace falta ponerlo.
Entonces,
será absoluto,
porque ya ves que tenemos
que moverlo a izquierda,
a derecha y todo esto,
¿vale?
Así que ponemos el absoluto.
Luego,
yo primero voy a intentar
con top left,
con left y tal,
y luego intentaré hacerlo
con translate,
que debería funcionar mejor incluso,
pero bueno,
para ver.
Esto no lo es.
Vamos a hacer background black,
la vamos a poner
con solo un 5% de opacidad,
porque creo que tiene,
¿ves?
Que se ve un poquito más oscurito,
o sea que yo entiendo
que tiene un poquito de opacidad.
Lo que seguro que tiene
es un backdrop,
pero tiene un backdrop seguro,
no sé cuánto,
vamos a poner el eje
y luego ya iremos viendo.
Y sí que tiene un rounded,
porque el borde de radius
se ve un poquito ahí
como redondeado.
Mira,
para que lo veáis más claro,
voy a hacer esto en multilínea,
¿vale?
Y así lo leeremos.
Esto ya os digo que igual
luego lo toco,
pero por ahora
vamos a utilizar aquí un left,
seguramente luego lo toco,
pero bueno,
vamos a hacer un left
para moverlo de izquierda a derecha.
Y aquí,
lo que vamos a hacer en Tailwind
es utilizar una variable,
vamos a utilizar una variable
que le vamos a llamar left,
ya sé que no es muy original.
Y lo mismo con el top,
mucha historia,
pero vamos a,
porque podríamos intentar ajustarlo,
pero claro,
vamos a moverlo igualmente,
¿vale?
Le pondremos el top que esperamos.
Y esto mismo lo hacemos
con el ancho.
¿Por qué?
Porque si te fijas,
cada elemento es más largo.
Entonces, claro,
aquí la caja es más pequeña
que aquí.
Aquí es más grande la caja.
No se ve ahora,
a ver si se pone clarito.
Aquí es más grande la caja
y aquí es más pequeña,
¿sabes?
Se va ajustando un poco
al tamaño que tenemos
en cada uno de los elementos.
Si el texto es más grande,
pues se hace más.
Así que vamos a utilizar
la misma estrategia.
El ancho dependerá
de la variable width
y la altura
de la variable height.
Y obviamente necesitamos
la transición.
Vamos a poner transition.
Le voy a poner transition all
y luego intentaremos
utilizar la de transform.
Por ahora vamos a hacerlo
con el left y todo esto
y luego veremos a ver
si no funciona con otra cosa.
Vamos a poner una duración
de 300,
que creo que es la por defecto.
Y yo creo que mirando
cómo funciona un poco
la animación,
a ver,
lo voy a poner aquí,
viendo cómo funciona
un poco la animación,
¿veis que tiene como un retardo
al principio,
luego se mueve de golpe
y luego va lento.
Yo creo que este tipo
de animación
es la de ease in out.
Igual no lo es, ¿eh?
Esto soy yo.
O sea, luego no me digáis
no, en realidad es,
pues no tengo ni idea.
No lo sé,
no he inventado yo,
entonces no lo sé.
Pero yo creo que es esta.
Yo creo que es esta
por la sensación que tiene.
Joder, Dartiles, tío.
Muchas gracias
por regalar 10 subs.
Muchísimas gracias, amigo.
Muchas gracias.
Gracias, Dartiles.
Y gracias, Jarvis,
Mike Kovas, Jakovsky.
Muchas gracias a todos.
Muchas, muchas, muchas gracias.
Me pago la hidratación, ¿eh?
Fresquito.
Vale, gracias.
Oye, muchas gracias, ¿eh?
El VG Black podría ser
White sobre el fondo oscuro.
Es que me da la sensación,
luego lo vemos, ¿eh?
Pero me da la sensación
que no es White.
Mi sensación es que siempre es Black.
Pero bueno,
primero vamos por partes, ¿no?
Vamos por partes.
Pues eso, yo creo que es la de
ease in out.
Ease in out significa
primero, bueno, de hecho,
a ver, ease in out.
Seguro que hay una imagen.
A ver si,
a ver si hay algún...
Había una página,
lo que pasa es que ahora no me acuerdo.
Pero hay una página...
Animaciones, animations.
A ver si...
Animations...
Example.
A ver.
Así, a ver.
Mira, aquí se vería un ejemplo.
Aquí se vería un ejemplo.
¿Ves?
Esta es la de ease versus ease in out.
¿Ves?
La de esta.
¿Ves que estaba al principio lento,
luego rápido,
luego lento?
Esa es la que yo creo
que estamos utilizando.
Creo que...
Vale.
Con esto ya tendríamos
como las variables de CSS
que queremos utilizar.
Ahora,
¿qué tenemos que hacer?
Pues vamos a crear aquí
otro script, ¿vale?
Para que veáis que no todo es React.
Con JavaScript se puede hacer...
Vamos a recuperar primero
los elementos de los ítems, ¿vale?
Muy bien, ¿vale?
Document query selector,
the landing header,
nav,
UL,
li.
No.
Vamos a recuperar...
Sí, podríamos recuperar el li,
pero se puede hacer así directamente.
No hace falta poner todo eso.
Y esto vamos a recuperarlos todos, ¿vale?
O sea, no query selector y as,
sino todos los elementos de la lista.
Estoy pensando si no utilizar el anchor.
Vamos a probar el li.
Si no funciona,
utilizamos el anchor, ¿vale?
Y lo mismo con el...
Vamos a recuperar este elemento
que he creado aquí,
el menú backdrop.
Así que menú back document,
query selector...
Vale, menú backdrop, ¿vale?
¿Qué hacemos?
Que para cada uno de los elementos
vamos a tener que suscribirnos
al evento de cuando el mouse entra
y cuando sale.
Así que esto es una cosa
que era bastante antigua.
Es un efecto que se hacía mucho
antiguamente.
Hoy en día no se hace tanto,
pero bueno,
está interesante todavía
pues entender cómo se haría.
Ah, mira, esto está interesante.
Joder, es que me lo ha hecho.
Es que me lo ha hecho.
Ya está, me lo ha hecho.
Ya está.
Me lo ha hecho.
Me lo ha hecho tal cual.
Me lo ha hecho tal cual.
Para cada item,
escuchamos el HTML listener
cuando entra el mouse, ¿vale?
Aquí tendríamos el evento.
Del evento tendríamos que sacar el target.
De hecho, lo podemos hacer aquí directamente.
Target, ¿vale?
Quitamos aquí el target.
Y de get bounding claim reg,
que esto debería ser...
Claro, es que esto...
¿Ves que me dice
no existen event target?
¿Por qué dice que no existen event target?
Set got bounding client.
No tiene ningún tipo de...
O sea, no tiene ninguna historia.
Target...
¿Cuándo lo he puesto así?
O sea, sí.
O sea, no sé por qué se queja.
Pero bueno.
El get bounding client
es...
Client reg es un método
que tú puedes ejecutar
sobre cada elemento.
Fijaos.
Me voy a mi página, ¿vale?
Y vamos a recuperar este elemento de aquí.
Por ejemplo, ¿vale?
Tú te pones aquí este h2
y aquí dices la consola.
Pues decimos la consola.
Punto...
A ver.
Get bounding...
No.
¿Cómo era?
¿Cómo era el...?
Porque si hacías así...
Query selector...
¿Cómo era...?
Ah, cero.
Esto.
Con el dólar cero
era el elemento que había seleccionado.
Que es el 2.
¿Ves?
Este elemento es el que selecciona.
O sea, es como si lo tuvieran una variable.
Y ahora puedes hacer punto...
Get bound...
Ah, pues me ha dejado fatal.
Pensaba que podríamos hacer puntos.
Pues nada.
Document...
Punto...
O sea, que podríamos hacer...
Esto sí, ¿no?
Bounding...
Client...
Rect...
A ver.
¿Os lo he escrito mal?
Al final lo voy a tener que pillar a mano.
Ahora sí.
Vale.
Pues fijaos.
Lo que te da esto es
su posición de X,
su posición de Y,
el tamaño del elemento,
la altura y el top.
Entonces, con estas coordenadas
digamos que sabes
que este elemento ocupa esto,
que tiene esa posición,
que está aquí, que tal.
Está bastante chulo,
pero es bastante costoso.
Es una cosa que hay que tener a veces
un poquito de cuidado
de utilizar
porque esto puede causar repintados
y tal
y su rendimiento no es el mejor del mundo.
¿Vale?
Pero bueno,
al menos para que funcione
nos va a hacer el arreglo.
¿Vale?
Esto nos va a recuperar bastante el tema.
Así que ya lo teníamos por aquí.
Vale.
Entonces,
el menú Backdrop,
esto lo voy a poner
ashtml element
para que no se me queje
del punto style.
¿Vale?
Lo que vamos a hacer
es cambiarle las variables
que habíamos puesto aquí.
Le he cambiado la variable del left,
la del top,
la del width,
la del height
y esto lo que debería hacer
es ir cambiando las variables,
las custom properties
en tiempo real
cada vez que hacemos el mouse enter
en uno de estos elementos
y así veremos ese cambio.
Como tiene ya una transición,
como esto ya tiene una transición,
deberíamos ver
cómo se mueve a un sitio y otro.
De hecho,
de hecho estoy pensando en otra cosa.
Esto,
esto deberíamos evitar que se vea.
O sea,
deberíamos poner hidden
e incluso opacity cero
y esto lo podemos arreglar.
O sea,
ahora aquí,
cuando hagamos el mouse enter,
podríamos cambiarle la opacidad.
O sea,
podríamos decirle,
también además,
le ponemos que tenga
style.passit,
decimos que es uno,
menú Backdrop,
punto style,
punto visible,
visibility,
y le ponemos que sea visible.
¿Vale?
Porque así,
pues evitamos que esto se vea
sin ninguna necesidad.
Supongamos que sea hidden
con opacity a cero
y ya está.
Ahora bien,
esto sería cuando entra,
pero también necesitamos cuando sale.
O sea,
tenemos que poner
item.addEvelListener,
el mouse leave,
justamente para cambiar estas dos.
Ah,
joder,
y jacoparlo.
Para cambiar estas dos,
para cambiar la opacidad
y cambiar la visibilidad,
¿no?
Para darle a la vuelta.
Y yo creo que con esto,
creo que con esto,
a lo mejor el get,
vamos a ver si el get bounding client reg
nos va,
nos da bien todos los datos.
Si no,
pues intentaremos utilizar
el client width y tal,
pero yo creo que con esto
deberíamos ver,
deberíamos ver que no funciona.
Vale.
¿Por qué no funciona?
Vamos a ver por partes.
Vamos a poner aquí el left,
el top,
el width,
el height,
¿vale?
Y también,
ya que estamos,
vamos a sacar el,
del item,
del item.
Ostras,
estoy pensando en una cosa.
En lugar del target,
podríamos sacar del item.
Y así seguro que no se me queja.
¿Ves?
Ahora no se me queja.
Y de hecho,
también podríamos sacar del item,
ahora es más fácil,
porque podemos sacar el client height.
Así me aseguro que el,
que el,
el ancho y el alto que estamos recuperando,
que sea el correcto.
Vamos a poner esto,
client height,
client width.
Vamos a mirar si esto funciona bien.
Vale.
Y vamos a abrir aquí la consola.
Vale,
56,
77.
Vale.
O sea,
que sí que,
sí que está bien eso.
Eso sí que está bien.
Eso sí que está bien.
Ahora lo que nos faltaría,
o sea,
esto está recuperándolo bien,
pero el opacity,
a ver,
ah,
el hidden es que es el none.
Me cago en la leche.
Ya está,
ya está.
Vale.
Hemos avanzado,
amigos,
hemos avanzado.
Es que le he puesto hidden
y no era hidden lo que quería poner.
Opacity 0
y le ponemos el visibility
y con eso ya tenemos.
Funcionar,
funciona,
más o menos.
¿Qué es lo que está pasando?
Vale,
¿veis que más o menos funciona?
Lo que está pasando es que está quedando por encima.
Tenemos que hacer una forma
en la que esto quede por debajo.
Y mira,
antes me estaba preguntando a alguien
de utilizar el z index en negativo
y aquí tiene todo el sentido del mundo.
Creo que aquí,
si ponemos un menos 10,
por ejemplo,
aquí es que nos aseguramos
que quede por debajo.
Y ahora,
qué chulo.
¿Dónde está vuestro dios ahora?
¿Dónde está vuestro dios ahora?
Que parece,
que parece el de Tesla,
vamos.
O sea,
es que es el mismo.
Bueno,
un poquito más rápido el nuestro,
¿no?
Un poquito más gordito,
pero...
¿Qué te parece?
¿Qué te parece con las pocas líneas
que lo hemos hecho?
Con las pocas líneas...
La verdad es que no pensaba
que iba a funcionar tan bien.
La verdad.
Pensaba que no iba a funcionar tan bien,
pero es que funciona de lujo.
De hecho,
iba a cambiar,
iba a cambiar aquí
de utilizar el translate.
Translate X.
¿Qué pasa es que el translate...
A ver,
¿lo podemos probar?
Pero tengo dudas si esto...
A ver,
vamos a probar.
Translate...
A ver si esto funciona
con el translate.
No,
¿veis?
Es que con el translate...
Habría...
A ver,
podría llegar a funcionar,
pero tendríamos que ajustar
algunas cosas.
Por ejemplo,
yo creo que a lo mejor esto
debería ser a partir de esto,
pues.
Con el translate,
lo ideal es utilizar el translate,
porque el translate
tiene mejor rendimiento
que no el otro,
¿vale?
Con esto ya hemos hecho
que funcione.
Y fijaos el detallazo,
porque aquí es súper gordito,
o sea,
es más gordito la cajita
y cuando vamos a la derecha
se hace más pequeña,
pero queda súper bonita
la animación
que no se nota ni siquiera,
¿sabes?
Que hace eso,
pero se hace más pequeñita
y ya está.
Y poder,
ha quedado de lujo,
tío,
ha quedado súper bien.
A ver,
creo que aquí tiene como
un poquito,
o sea,
podríamos intentar ajustar
porque me parece,
uno,
que tiene más duración
y a lo mejor que tiene
incluso un poco de delay,
me da la sensación,
¿eh?
Y a ver,
a ver ahora,
sí,
no sé,
a ver,
sería cuestión de ir jugando,
sería cuestión de ir jugando,
sería cuestión de ir jugando,
igual no tiene delay,
¿eh?
Igual no tiene delay,
pero sí que tiene un poco
más de duración.
Sería cuestión de ir jugando
y...
Pero...
Pero bueno,
que funcionar funciona,
¿eh?
Mucho delay,
es parte de mi vida,
se llama felicidad,
sí.
¿Será por la sincronidad de Astro?
No,
hombre,
no.
¿Para cuándo el CSS Battle
versus Kyle?
A ver,
la verdad es que yo no soy,
yo me defiendo de CSS,
pero no soy un crack,
¿eh?
A mí en Linux Firewall
se me ve así de smooth
en el Tesla original.
Así,
todo se puede hacer con Tailwind,
no me sale el Intel
en los ClassName.
Hombre,
casi todo se puede hacer.
Lo que tiene es una curva,
claro,
puede ser que sea una curva,
como os he dicho,
tampoco voy a entrar al detalle,
¿no?
Pero,
¿esto hay como hacerlo
solo con Tailwind?
No,
no hay forma de hacerlo
solo con Tailwind.
A ver,
hemos llevado a Tailwind
al límite
utilizando Custom Properties,
hemos utilizado esto,
quieras o no,
necesitas saber la posición
y necesitas saber
también el ancho del elemento.
Sí que sé,
o sea,
podrías llegar a hacer,
podrías llegar a hacer
que,
podrías llegar a hacer
el hover de la caja,
pero que vaya a la izquierda
y a la derecha
y que cada uno,
a ver,
se podría intentar,
pero ahora mismo
no se me ocurre,
pero poder se podría,
seguramente.
Mido,
está absolutamente loco,
nunca podría haber llegado
a esa solución.
Bueno,
pero es que es bastante antiguo.
A ver,
ya os digo que igual
hay otra solución mejor,
pero a mí en este caso
se me ocurre esta,
¿sabes?
Se me ocurre esta.
Si a alguien se le ocurre una mejor,
oye,
pues también pensad
que no me lo he podido preparar,
¿sabes?
Que he intentado hacerla
un poco de cabeza.
Bueno,
pues con esto,
fijaos la cosa más bonita
que hemos hecho,
tenemos aquí ya la transición,
hemos hecho la transición,
hemos hecho,
o sea,
cambia el header de color,
hemos hecho el slide,
o sea,
que tienes el vídeo,
tienes cada uno de los modelos,
bueno,
solo hemos puesto un modelo,
hemos puesto más modelos.
De hecho,
lo que podríamos llegar a hacer también
es crear más componentes
y todo esto.
¿Con hover y padding X
no se puede lograr?
No,
porque a ver,
a ver,
es que lo complicado de esto
no es hacer la caja esta.
La caja esta está tirada.
Esto lo haces en CSS súper fácil.
Lo complicado es moverlo a la derecha
y que te siga
y que haga eso,
¿sabes?
Que tú haces esto,
que cambia el ancho en medio,
cambia el ancho en medio,
no es que cambia el ancho,
¿sabes?
Ese es el problema.
Ahí estaba complicado.
Fíjate de dónde viene la caja
de lado a lado,
que esto también lo hace aquí,
si no me equivoco.
Tú vas aquí,
ves que la caja,
esto es Tesla,
¿no?
Y ves la caja que va de lado a lado.
No sé,
¿prefieres Boostra,
Tailwind?
Yo prefiero Tailwind,
a tope,
¿pondrás el código en GitHub?
Sí.
Venga,
vamos a crear,
vamos a poner el código en GitHub,
vamos a poner el código en GitHub,
vamos a poner Tesla Landing,
Landing Tesla,
Landing Tesla,
¿vale?
Ejemplo de Landing de Tesla
con HCS,
Javas,
Astro y Tailwind.
La verdad es que estoy sorprendido.
Otro día,
pues podemos hacer incluso el Responsive,
que no es muy difícil el Responsive.
Claro,
nosotros no hemos hecho Responsive,
aquí sí que tiene Responsive.
No es muy difícil,
es que solo tiene,
o sea,
tiene esto,
tiene esto y ya está.
O sea,
tiene un menú al lado,
esto se hace,
no es muy difícil.
Vale,
público,
Create Repository.
Desde que uso Tailwind
y he dejado Booster,
me ha crecido pelo.
Me ha crecido pelo,
hostia puta.
Eso puede ser,
quién sabe,
quién sabe.
Igual,
yo también estoy perdiendo peso
desde que estoy utilizando.
Qué risa,
qué risa.
Bueno,
si alguien se quiere animar,
Add Code of the Landing.
Si alguien se quiere animar,
mirad,
cosas que podéis hacer.
A ver,
claro,
es que una cosa que podríamos hacer rápidamente
para que os animéis a contribuir
es,
una cosa que podemos mejorar
que no me ha terminado mucho de gustar
como lo hemos hecho
y además aprendéis un poco de Astro,
es que fijaos que aquí tenemos una sección,
aquí tenemos otra sección
y es que se parece mucho,
pero en cambio nosotros aquí
estamos repitiendo todo el código.
Lo que deberíamos hacer aquí
en los componentes
es tener una section,
punto Astro,
¿no?
Y esto,
aquí tenemos el hero section,
vamos al section este,
vamos a hacer esto
y aquí podríamos pasarle por props
toda esta información.
O sea,
podríamos tener,
por ejemplo,
el header,
el color,
vamos a ponerle color
y esto vendría de Astro.proc.
Este color sería el que recibe aquí,
color,
y este también sería el que tendríamos aquí
en la clase.
Así que vamos a poner text color,
vamos a poner text,
este sería el class name
y este class name
es el que utilizaríamos aquí
en lugar de utilizar los que estamos utilizando ahora.
Esto aquí,
esto aquí,
claro,
tenemos que cambiar esto
y esto por acá,
esto por aquí,
esto por aquí,
es que lo bueno,
qué experiencia de desarrollo más chula que tiene Astro,
de verdad,
es tremendo,
es tremendo.
Esto sería el title,
title,
esto podría ser el subtitle,
por ejemplo,
title,
title,
y el title,
el subtitle,
lo podríamos sacar de aquí,
title.
Ahora,
para cada una de las secciones,
aquí es donde entra lo más interesante que tendríamos.
Por ejemplo,
aquí en este vídeo,
este vídeo,
claro,
uno tiene una imagen,
otro tiene un vídeo,
aquí podemos utilizar lo que le llaman slots,
que es muy,
esto,
si conoces view,
lo entenderás súper fácil
y hay un montón que lo utilizan en React,
los más parecidos son children,
pero el tema es que aquí podemos tener slots nombrados.
Entonces,
aquí tendríamos este del background,
lo meteríamos aquí
y aquí podríamos tener el vídeo o la imagen
o depende de cada uno
y esto se lo podríamos pasar en el index,
se lo podríamos pasar
y esto igual,
esto en lugar de poner esto aquí,
podríamos tener aquí otro slot,
slot,
name,
que sea el footer,
por ejemplo,
vamos a llamar footer como que le puedes llamar como tú
y solo con esto,
con esto que hemos hecho,
súper sencillo en un momento,
ahora en lugar de tener aquí el hero section,
hacemos section
y aquí lo importamos,
ponemos title,
vale,
pues cuál es el title de hero,
disfrute de test,
disfrute de test,
es subtitle,
vale,
subtitle es,
programa una prueba de conducción hoy mismo,
programa una prueba de conducción hoy mismo,
y lo que vas a ver de interesante
es el tema de los slots,
porque vamos a poner aquí el vídeo
y aquí,
hostia,
no me acuerdo cómo es esto del vídeo,
el tema de slot,
no me acuerdo si es name,
creo que es,
ah,
creo que es slot,
¿no?
o sea,
aquí le pones slot
y le pondríamos aquí el nombre del slot,
que es,
¿vale?
y la parte de arriba del hero section,
por ejemplo,
es esta,
esta será la del footer,
¿no?
pues pondríamos aquí,
ah,
bueno,
tendríamos que pasarle todo el dip,
¿vale?
pasaríamos todo el dip,
porque es el que podemos nombrar slot,
¿vale?
y así tendríamos como los children's
que metemos en esta sección
y ya está,
o sea,
esto,
hemos quitado el hero ex,
vale,
vale,
cosas que,
a ver,
cosas que no hemos hecho bien,
vamos al section,
un momento,
cosas que todavía faltan cosas,
vale,
esto sobra,
para empezar,
¿vale?
esto sobra,
vale,
luego el color,
vale,
no le he puesto el color,
o sea,
que en el section también habría que pasarle aquí el color,
decir que este es white,
¿vale?
y con esto ahora ya tendríamos,
esta sección está utilizando el componente,
entonces,
este section que hemos utilizado aquí,
ahora lo creamos aquí,
es mucho mejor,
importamos este section,
¿vale?
section,
section,
vale,
y aquí ahora importamos el hero section,
o sea,
lo que estamos haciendo es básicamente utilizar componentes,
la componentización,
¿vale?
esto queda igual,
este char section tendríamos que hacer lo mismo,
utilizando el hero section este que tenemos aquí,
nos lo copiamos en el char section este,
y en lugar de tener todo esto aquí,
pues total,
¿para qué vamos a utilizar todo eso repetido?
lo que hacemos es,
vale,
esto tiene aquí el model y,
vale,
el title model y,
el programa una prueba de conducción hoy mismo,
esto concertado una prueba,
vale,
esto deberían ser enlaces,
que igual esto debería ser otro slot,
vale,
pero bueno,
prueba de conducción,
vale,
explorar inventario,
vale,
pues esto,
esto por ejemplo,
esto es lo que debería ir en el footer,
así que en lugar de prueba de conducción,
no sé qué,
esto será el footer,
y entonces ponemos aquí slot footer,
y en el vídeo,
en lugar de utilizar el vídeo para background,
lo que utilizamos es esta imagen,
así que quitamos todo esto,
fijaos todo el código que nos quitamos,
pam,
pam,
pam,
pam,
y solo vamos a poner lo que realmente cambie,
slot back,
le ponemos que el color en este caso es black,
vale,
esto,
ahora ponemos aquí,
y bueno,
me ha fallado esto,
que vamos a ver qué le pasa,
mxauto,
bueno,
me ha fallado la parte esta de aquí,
que tendríamos que mirar en el section,
que nos aseguremos,
claro,
es que aquí hemos puesto,
ah,
es que he puesto aquí un dip,
y yo creo que ese dip no es necesario,
a ver que,
ujo,
que ha pasado,
algo me cargaba ahí,
esto fuera,
y esto fuera,
que es lo que no encuentra,
dice header,
hostia,
es que me ha quitado este,
y esto que era,
es que si quito este dip,
me entiende que es este,
ah,
porque aquí,
vale,
aquí bien,
y ahora sí,
vale,
vale,
ahora sí,
veis,
ahora sí que está bien en las secciones,
y lo que estamos haciendo es tener un componente reutilizable,
súper fácil de utilizar para crear cada una de las secciones,
y en cada sección,
pues como cambian los botones,
porque aquí por ejemplo hay dos botones,
aquí hay un botón,
en cada uno cambia,
o sea que de esta forma podemos tener botones diferentes,
podríamos incluso cambiar,
he visto por aquí,
que veis aquí le pone disponible con moves,
pues es que cada uno,
pues a lo mejor se le quiere poner una cosa diferente,
pues mira aquí el footer,
pues lo bueno es que ahora con este slot,
aquí podéis poner el footer perfectamente,
no hace falta hacer nada raro,
y aquí el vídeo,
uno tendrá en vídeo,
otro tendrá en el background,
tendrá una imagen,
pueden tener vídeos diferentes,
está bien porque es súper extensible,
estamos componiendo nuestra UI,
tenemos un section,
con el que podemos generar cada una de las secciones,
y ya está,
fácil y rápido,
hacemos aquí refactor,
use components for sections,
y publicamos la rama,
y pim pam pum,
pum pum pum,
yo tumbo producción,
que bueno,
depende cuánto tiempo,
te falta un div,
ya,
ya está,
la segunda parte del desarrollo,
por 500 likes en el último vídeo,
en mi youtube,
bueno,
lo subiremos,
bueno pues nada,
aquí tenéis,
aquí os dejo en el github,
la tesla,
tesla landing,
tesla landing,
a landing tesla era,
landing tesla,
os lo dejo por aquí,
vale,
por si quieren continuarlos,
por si quieren darle una estrellita,
una estrellita,
y bueno,
lo podríamos desplegar,
lo que queréis que lo despleguemos un momento,
es que es tan fácil desplegarlo,
que me da hasta vergüenza,
pero mira,
mpn run build,
vale,
hacemos una build,
netlify drop,
vale,
netlify drop,
nos vamos a ir aquí,
abrimos nuestra carpeta,
tenemos aquí nuestra carpeta,
tenemos aquí dist,
pues esta carpeta dist,
la movemos aquí,
y lo vamos a tener desplegada en producción,
súper fácil,
hola bif,
nueva seguidora,
pues bienvenida,
espero que te,
no sé si acabas de llegar,
pero si no,
mira,
ya lo tenemos aquí,
ya tenéis la landing,
que hemos hecho juntos,
en un momentito,
vale,
le faltan secciones,
si os animáis,
porque no os animáis,
y en las secciones,
hacéis las secciones,
vale,
hacéis las secciones,
hacéis pull request,
y las que vea que tienen mejor pinta,
que haga las secciones,
lo mergeo,
ok,
bueno,
pero súper fácil desplegarlo,
vais a netlify drop,
netlify drop,
es totalmente gratis,
arrastramos la carpeta dist,
y lo hemos desplegado,
nada,
aquí lo tenéis desplegado en producción,
si queréis,
esto dura por defecto una hora,
sin registraros,
si os registráis,
dura ya para toda la vida,
pero veis que dura una hora,
pues si,
si iniciáis sesión,
por ejemplo,
lo que voy a hacer yo ahora,
pues entonces esto,
de repente,
te lo pone en tu,
bueno,
no sé qué ha pasado aquí,
el claim este,
estaba roto,
se ha roto,
se ha roto,
esto normalmente no sale así,
normalmente aquí sale,
sale otra cosa,
y te dice,
te lo quieres quedar,
y la idea es que te lo puedas quedar,
pero no sé por qué,
no sé por qué sale esto,
bueno,
no pasa nada,
lo puedo desplegar otra vez,
en otro sitio y ya,
pero bueno,
ahora sí que tengo la sesión iniciada,
pero es que fijaos que está muy fácil,
es arrastrar la carpeta aquí,
ya lo tenéis desplegado,
ves,
open,
no sé cuánto tarde,
mira,
site is live,
o sea,
hemos tardado,
no hay menos,
aquí lo tenéis,
otra vez,
otra URL,
de producción,
y esto va a estar aquí toda la vida,
así que,
mira,
lo puedo poner aquí,
para que la gente que quiera ver una URL,
lo vea aquí,
espero que os haya gustado el directo,