Desarrollo la web de SPIDERMAN: Brand New Day

midudev

Resumen

El vídeo detalla el proceso de desarrollo de la página web oficial de 'Spider-Man: Brand New Day' utilizando Astro, Tailwind CSS y GSAP. El creador guía a través de la configuración del entorno, la optimización de recursos como fuentes y videos, y la implementación de una pantalla de carga interactiva. Posteriormente, se enfoca en la sección 'Hero', donde se anima un video de fondo, la fecha de lanzamiento y frases clave con efectos de desenfoque y aparición letra por letra. Durante el proceso, el autor resuelve desafíos de JavaScript y utiliza herramientas de IA (Cursor/Grock) para generar y refactorizar código, demostrando la coordinación de animaciones complejas con el scroll.

Capítulos

  1. 0:00Introducción al Proyecto y Alcance
  2. 0:08Visión General del Proyecto y Figma
  3. 0:17Elementos a Desarrollar (Loading, Hero, Scroll)
  4. 0:32Alcance Inicial del Desarrollo (solo mimbres, sin responsive/accesibilidad)
  5. 1:54Proyecto Open Source y Creación de Repositorio
  6. 2:33Configuración del Entorno de Desarrollo
  7. 2:41Creación del Proyecto Astro con PNPM
  8. 3:29Configuración del Repositorio Git
  9. 4:04Instalación y Configuración de Tailwind CSS
  10. 5:30Preparación para Animaciones con GSAP
  11. 7:11Gestión de Recursos y Optimización
  12. 8:08Extracción y Optimización de Assets (imágenes, fuentes, iconos)
  13. 13:14Optimización de Fuentes (Latin vs. Latin Extended, `unicode-range`)
  14. 15:42Definición de Estilos Globales y Variables CSS
  15. 18:32Configuración SEO Inicial y Preload de Fuentes
  16. 19:52Estructura Inicial de Componentes (vacíos)
  17. 20:00Configuración de Astro y `tsconfig.json`
  18. 23:09Desarrollo de la Pantalla de Carga (Loading)
  19. 23:26Lógica JavaScript para Carga y Animaciones
  20. 23:31Estructura HTML y Estilos del Loading Overlay
  21. 24:35Video de Carga Optimizado (WEBM/MP4)
  22. 26:48Animación de la Araña con Relleno Progresivo
  23. 33:47Contador de Porcentaje de Carga
  24. 36:17Creación de Utilidades para el DOM (`dom.ts`)
  25. 37:32Configuración Global de GSAP y ScrollTrigger
  26. 38:22Gestión de Eventos de Carga (`loadingReady`, `loadingDone`)
  27. 42:06Integración de Utilidades en `loading.astro`
  28. 44:16Animación del Contador y Eliminación del Scroll
  29. 50:25Depuración con `console.log` y Herramientas del Navegador
  30. 50:39Identificación de Problemas de Ejecución de JavaScript

Temas tratados

  • Desarrollo Web con Astro
  • Animaciones con GSAP y ScrollTrigger
  • Optimización de Rendimiento Web
  • Gestión de Assets y Recursos
  • Diseño y Prototipado con Figma
  • Metodologías de Desarrollo
  • Accesibilidad Web Básica
  • Uso de Inteligencia Artificial en Desarrollo
  • CSS y Estilización (Tailwind)
  • Debugging y Solución de Problemas

Extracto de la transcripción

que este es el Figma. Vale, lo tenemos por aquí y vamos a empezar desde el principio porque tenemos que hacer muy muchas cosas. Vamos a ver hasta dónde nos va a dar tiempo. Yo creo que voy a empezar como de arriba a abajo, ¿sabes? Vamos a empezar directamente. Lo que vamos a hacer es simplemente eh voy a poner eh voy a empezar con el loading, luego vamos a tener el giro, vamos a hacer lo de lo del scroll este con la fecha, vamos a ir de arriba a abajo, ¿vale? Hay cosas que me las saltaré porque tengo que dejarle trabajo a la gente que vamos a fichar, pero para que la idea esté ahí. Por ejemplo, no me va a dar tiempo a hacer temas de responsive, no me va a dar tiempo a hacer todos los temas de accesibilidad, no me va a dar tiempo a, yo que sé, pues a que todo funcione exactamente igual como hemos puesto en el Figma. Vamos a poner lo que serían los mimbres, ¿vale? Los mimbres para que poda…