Como crear una Galería + View Transitions con HTML, CSS, Astro y TailwindCSS
HTML-код
- Опубликовано: 25 июл 2024
- En este video seguiremos creando la web de los Esland incorporando nuevas páginas con sus transiciones, galería y más detalles
👉 Repositorio : github.com/midudev/esland-web
▶ No te pierdas más directos en: / midudev
▶ Comunidad chula: / discord
▶ Instagram: / midu.dev
▶ Twitter / midudev
▶ Tiktok: / midudev
00:00:00 - intro
00:00:55 - Cositas que hemos mejorado
00:02:25 - Que hemos hecho y mejorado?
00:03:21 - Qué haremos?
00:04:07 - Vistazo a las PR
00:06:56 - Corrigiendo detalles de las PR’s
00:09:26 - Creando páginas
00:11:37 - Creando la página de archivo
00:14:09 - Creando y añadiendo el HERO-CONTAINER
00:15:41 - Estilando
00:16:47 - pidiendo imagen 🤑
00:20:25 - Animación entre páginas
00:21:11 - Copiando estructura de “Archivo.astro” a Info.astro
00:23:11 - Actualizando a astro 4.1
00:24:27 - Construyendo la pagina de Archivo
00:26:08 - Sección Hero
00:28:00 - Colocando la misma fuente a la página archivo
00:31:40 - Re-creando animación de los números
00:33:44 - Qué es Preact
00:35:45 - Integrando el Hook
00:36:05 - Instalando Preact
00:38:59 - Componente del contador
00:41:29 - Importando el Contador
00:43:03 - Añadiendo estilos y semantica a los números
00:45:54 - Solucionando el error de los contadores
00:50:27 - Arreglando los saltos de los contadores
00:51:25 - Estilando los números
00:53:54 - Efecto glow
00:54:05 - Corrigiendo los espacios y cálculos al centrado
00:55:10 - eliminando el signo + y listo
00:55:56 - Creando el responsive de los contadores
00:56:58 - xd
00:57:11 - lg y md
00:57:36 - cambiando orden de los span
00:57:57 - Efecto Glow
01:00:43 - Galería
01:04:06 - Instalando y usando photoswipe
01:05:54 - Tratando de usar la galería
01:07:43 - Probando nuestra galería + explicación
01:08:54 - Cargando todas las imagenes
01:09:44 - Trucazo con MacOS
01:11:05 - Cargando todas las imagenes
01:12:58 - Demostración
01:13:10 - Creando el BentoGrid
01:16:48 - Subiendo los cambios al repo
01:17:05 - Mejorando un poco la galería
01:17:18 - Creando El glow conforme al color de la imagen
01:20:32 - Explicación del efecto
01:22:00 - Esto como afecta??
01:22:50 - Recuperar las imagenes al hacer click
01:25:01 - Arreglando la Transición
01:26:58 - Optimizando las imagenes y usandolas
01:28:41 - demostración
01:29:04 - Más cambios en la galería
01:34:20 - Subiendo los cambios al repo
01:35:45 - Últimas palabras 
Наука
Con este video aprendí a integrar con Astro una galería! Mil gracias! realmente el conocimiento no tiene precio!
eres muy comico, no te has vuelto loco porque tienes buen humor gggg. abrazos.
Ahora mismo estaba estudiando esa parte para implementarla en la empresa y llega este video midu
Silencio, comenzó mi serie ❤
me encantaaaaaaaaaaaaaaaaaaaa ... gracias maestro
Que grande Midu me parece super barato 3000 euros. Por el simple hecho de ser tú uff $9000 pagaría como sé que será un trabajo excelente.
Para optimizar las imágenes estaría bien usar directamente el componente Image que te da astro de 'astro:assets' o manualmente esta mejor?
El tema es que el componente Image optimiza las imágenes cada vez que hace la build. No está mal, pero es innecesario si te puedes permitir hacerlo antes (y así tus builds serán más rápidas).
Gracias Midu por todo este contenido de calidad. Estoy aprendiendo mucho de Astro. Por otro lado hay mucha gente que no le importa la falta de respeto.
Holaaaa 🎉, tengo una duda que no me deja dormir xd, a día de hoy que ya terminaste el proyecto de los Esland, hay una cosa que no se como lo habrás hecho pero, cuando estás en la página de Info o de Archivo por ejemplo, se agrega un border bottom en el anchor de Info o de Archivo, dependiendo de la página en la que estés, pero se supone que ese borde es dinámico, porque si estás en la página principal no se muestra. Mi duda es como hiciste eso, porque ya he visto todos los videos y directos del proyecto de los Esland y no está como lograste eso, ayuda porfi 😢😢
Hola Midu. Estoy siguiendo la réplica de esta página para hacer mi propia página web. Te agradezco mucho la currada que te estás pegando para explicarnos cómo hacerlo con Astro y Tailwind. Ahora mismo, yo tengo mi propia página web generada siguiendo tu minicurso, pero a la hora de hacer el deploy, me encuentro que mi dominio está hosteado por Hostinger, que no acepta sitios web tipo serverless, sino que sólo acepta sitios estáticos y con un index.html. Y la verdad es que no se que hacer, porque he intentado hacer el build cambiando el config.astro.jsm a estático, pero me peta por todos los lados. Incluso me recomienda que quite el auth-astro.
Que me recomiendas? Que cambie de host? Que intente quitar el auth? O bien que cambie de Astro a otro framework?
Muchas gracias por adelantado. Un cordial saludo
Intenta con netlify. Es súper fácil y es gratis para varios sitios estáticos
se puede usar view transitions api con nextJS?
Sí, al final es JavaScript. Pero lo que no ofrece Next.js es una forma de usarlo de forma tan sencilla como Astro.
@@midulive muchas gracias midu , estuve viendo es u muy dificl con next hasta tenes que modificar el componente LINK, estaría bueno que lo veas a ver si nos podes solucionar la vida con tu conocimiento jsjsj
Primero
¿Antes de aprender Astro que debo aprender antes?
HTML, CSS, y buenas nociones de JavaScript.
También es deseable que sepas React.
muy bueno el primer video pero en este dejaste de explicar muchas cosas que se modificaron en el repositorio que no se entienden de donde salen ni como es su funcionamiento y tu las degastes de lado
😭😭😭😭 me cuesta mucho entender quiero mejorar maaas
y al final de todo ¿the grefg te pago?
Según Forbes y NYT la adquisición fue de 500000000000 dolarucos😅