Descripción general del proyecto y roles

Este es el sitio oficial de portafolio que presenta las obras de los estudiantes creadores de Human Academy y promueve su emparejamiento con empresas. Este sitio no está diseñado para finalizar en un solo año, sino como una plataforma altamente escalable con la premisa de ser operada continuamente en 2023, 2024 y 2025.

En este proyecto, participé desde la selección de tecnología, encargándome del diseño de la base de un tema personalizado de WordPress considerando la escalabilidad, la construcción de un entorno de desarrollo moderno con Webpack y TypeScript, y el desarrollo front-end en general.

Pila tecnológica adoptada

• CMS: WordPress (6.8.2)
• Servidor: PHP (7.4.33)
• Front-end: TypeScript (compatible con ES2020), JavaScript (ES6+), jQuery
• Herramientas de construcción: Webpack 5, imagemin-webpack-plugin
• Estilismo: CSS3 (Gestión por año)
• Biblioteca: Lity (función de lightbox)
• Infraestructura: Docker (Entorno de desarrollo)
• Otros: AJAX, WordPress Nonce, Contact Form 7, Google reCAPTCHA

Seleccioné estas tecnologías y construí un entorno de desarrollo desde cero que cumple con altos niveles de eficiencia de desarrollo, mantenibilidad y rendimiento del sitio.

Diseño e implementación en los que me enfoqué

Diseño del 'Sistema de gestión de activos por año' que soporta la escalabilidad

El mayor desafío de este proyecto fue el crecimiento de los activos (CSS, JS, imágenes) y la complejidad de la gestión a medida que el sitio envejecía (versiones 2023, 2024, 2025...).

Para resolver este problema, diseñé e implementé un 'Sistema de gestión de activos por año' único, donde el back-end de WordPress (PHP) y el proceso de construcción del front-end (Webpack) trabajan en conjunto.

1. Diseño de la estructura de directorios: Definí una estructura de directorios estricta para gestionar todos los activos por año, como src/css/2023/, src/css/2024/.
2. Detección automática de plantillas: Cuando se cargan plantillas de página anuales como page-archive2023.php o page-archive2024.php, WordPress las detecta automáticamente.
3. Carga dinámica de activos: Concentré la lógica en inc/asset-loader.php y construí un mecanismo para cargar dinámicamente solo el CSS necesario para ese año (ejemplo: /assets/css/2024/style.css) basándose en el año detectado.

Gracias a este diseño, incluso al agregar funciones en el futuro (ejemplo: versión 2026), es posible desarrollar y mantener de manera segura y eficiente sin afectar las versiones anteriores.

Construcción de un entorno de desarrollo moderno con Webpack y TypeScript

Para maximizar la productividad del desarrollo de WordPress, construí un entorno de desarrollo moderno que incorpora Webpack 5 y TypeScript.

• Experiencia de desarrollador rápida (DX): Organicé el comando npm run dev:fast y logré un entorno de desarrollo rápido con hot reload (recarga en vivo) habilitado, completando la compilación de TypeScript y CSS en solo 1.7 segundos.
• Separación de modo de desarrollo y producción: Implementé una función en inc/asset-loader.php para cambiar automáticamente la ruta, de modo que cuando se ejecuta npm run dev, se refiere al directorio src/ y cuando se construye para producción, al directorio assets/. Esto permite a los desarrolladores concentrarse en la codificación sin preocuparse por el proceso de construcción.
• Optimización automática mediante el proceso de construcción: Integré imagemin-webpack-plugin en Webpack e introduje un proceso que comprime automáticamente los recursos de imagen en un 66% al ejecutar npm run build. Esto previene errores de optimización manual por parte de los desarrolladores y garantiza el rendimiento constante del sitio.
• Garantía de calidad del código: Adopté TypeScript para garantizar la seguridad de tipos, logrando así la reducción de errores en tiempo de ejecución y una base de código de alta mantenibilidad.

UI/UX e interacciones que mejoran la experiencia del usuario

Para lograr el objetivo del sitio de 'emparejar con creadores', me enfoqué en una implementación intuitiva de UI/UX.

• Equilibrio entre rendimiento y UI: Para mostrar una lista de muchos videos, adopté el 'Lity lightbox' que muestra solo la miniatura de YouTube inicialmente y carga el video completo solo al hacer clic. Esto mejoró drásticamente la velocidad de carga inicial (LCP).
• Implementación de funciones asíncronas (AJAX): Para que los representantes de la empresa puedan evaluar a los creadores más fácilmente, implementé una 'función de me gusta' mediante AJAX utilizando WordPress Nonce (token de seguridad). Además, la 'función de filtro por categoría' también funciona rápidamente en el lado del cliente, ofreciendo una cómoda experiencia de búsqueda de obras.
• Marcado semántico: Utilicé correctamente etiquetas HTML5 como main, nav, section y apliqué estrictamente el marcado estructurado teniendo en cuenta la accesibilidad (a11y) y el SEO.