1. ¿Qué es DEMO?
Primero, quiero contarles de qué trata este proyecto. DEMO es una página web que diseñé para mostrar contenido multimedia, como videos de YouTube y episodios de Spotify. Tiene dos secciones principales: "Vistos Recientemente", donde presento videos destacados en un carrusel, y "Últimos Episodios", con una lista de episodios que se pueden cargar dinámicamente. Mi objetivo era crear un diseño moderno, adaptable y fácil de navegar, tanto en dispositivos móviles como en computadoras. Para lograrlo, utilicé tecnologías como Vite, TypeScript, TailwindCSS y un poco de JavaScript puro para las animaciones.
2. Las Herramientas que Utilicé
Para este proyecto, elegí herramientas que me permitieran trabajar de manera eficiente y con un código limpio. Aquí está el stack tecnológico que usé: Vite: Es una herramienta de construcción muy rápida que me permitió crear el proyecto y tener un entorno de desarrollo eficiente. Su capacidad para manejar múltiples páginas HTML fue clave para organizar las diferentes secciones del sitio.
TypeScript: Quería que el código fuera más seguro y estructurado, así que usé TypeScript para tener tipado y evitar errores comunes.
TailwindCSS: Para los estilos, opté por TailwindCSS porque me permitió diseñar rápidamente con clases utilitarias. Además, con el plugin @tailwindcss/vite, la integración fue muy sencilla.
JavaScript Puro:
Para las animaciones y la lógica del carrusel, usé JavaScript sin frameworks, para mantener el proyecto ligero y optimizado.3. La Estructura del Proyecto Comencé configurando el proyecto con Vite y TypeScript. Aquí está cómo quedó mi archivo vite.config.ts:
import { defineConfig } from 'vite';
import { resolve } from 'path';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [tailwindcss()],
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
archive: resolve(__dirname, 'public/archive.html'),
donate: resolve(__dirname, 'public/donate.html'),
subscribe: resolve(__dirname, 'public/subscribe.html'),
requests: resolve(__dirname, 'public/requests.html'),
notfound: resolve(__dirname, 'public/404.html'),
},
},
},
base: '/',
publicDir: 'public',
});
Esta configuración me permitió manejar varias páginas HTML (como index.html, archive.html, etc.) como entradas separadas en la construcción del proyecto. También ajusté mi tsconfig.json para que TypeScript funcionara bien con Vite, usando "module": "ESNext" y "noEmit": true, ya que Vite se encarga de la compilación.
4. El Diseño con TailwindCSS
Para el diseño, utilicé TailwindCSS con un tema personalizado. Definí dos colores principales: qrm-primary (un azul oscuro) y qrm-secondary (un rosa vibrante). Aquí está cómo lo configuré en el HTML:
tailwind.config = {
theme: {
extend: {
colors: {
'qrm-primary': '#1E40AF',
'qrm-secondary': '#DB2777',
},
},
},
};
Con TailwindCSS, creé un diseño adaptable con un menú de navegación que funciona tanto en dispositivos móviles como en computadoras, y secciones bien organizadas para los videos y episodios. Por ejemplo, el menú móvil tiene un botón hamburguesa que despliega las opciones, mientras que en computadoras se muestra como una barra horizontal.
5. El Desafío: Problemas con la Construcción
Todo funcionaba perfectamente en el entorno de desarrollo (npm run dev), pero cuando ejecuté npm run build y npm run preview, noté que el JavaScript no se cargaba. ¡Fue un momento de mucho estrés! Después de investigar, descubrí que el problema estaba en las rutas. En la carpeta dist/, los archivos generados apuntaban a src/pages/archive.ts, pero deberían apuntar a assets/archivexxx.js. Ajusté las rutas en los archivos HTML, asegurándome de que los
Con este cambio, el JavaScript se cargó correctamente y el contenido comenzó a mostrarse sin problemas.
6. Animando el Carrusel
Una de las partes más interesantes del proyecto es el carrusel de "Vistos Recientemente". Quería que tuviera un desplazamiento automático y que fuera interactivo para los usuarios. Para lograrlo, añadí botones de "siguiente" y "anterior", y usé JavaScript para crear una animación fluida. Aquí está el código principal:
function moveCarousel() {
const itemWidth = videoList.children[0].offsetWidth + 16;
videoList.style.transform = `translateX(-${(currentIndex + 1) * itemWidth}px)`;
// Lógica para carrusel infinito
if (currentIndex >= videoList.children.length - 2) {
setTimeout(() => {
videoList.style.transition = 'none';
currentIndex = 0;
videoList.style.transform = `translateX(-${(currentIndex + 1) * itemWidth}px)`;
videoList.style.transition = 'transform 0.5s ease-in-out';
}, 500);
}
}
function startAutoSlide() {
autoSlideInterval = setInterval(() => {
currentIndex++;
moveCarousel();
}, 3000);
}
También añadí un efecto de transición suave con CSS:
#video-list {
display: flex;
transition: transform 0.5s ease-in-out;
}
El carrusel ahora se mueve automáticamente cada 3 segundos, pero los usuarios pueden controlarlo con los botones. ¡Quedó muy dinámico y profesional!
Lecciones Aprendidas
Este proyecto me dejó varias lecciones importantes:
- Rutas en la Construcción: Siempre revisa las rutas de los archivos generados después de hacer npm run build. Un pequeño error en las rutas puede causar problemas grandes.
- TailwindCSS es Muy Útil: Me permitió diseñar rápidamente y mantener el código limpio y organizado.
- Animaciones con JavaScript: Crear un carrusel infinito no es tan complicado si entiendes cómo clonar elementos y manejar transiciones.
Comments