CECO Les Pedreres | Web y campus formativo

Resumen

Web institucional y plataforma formativa de CECO Les Pedreres. Combina Astro SSR con Node.js, Express y MySQL para servir la web pública, cursos, matriculación, área privada, progreso de lecciones, evaluaciones y administración formativa.

Objetivo

Construir una web institucional que también funcione como campus formativo, sin separar la comunicación pública de la gestión de cursos y usuarios.

Contexto

La web debía ordenar en una misma estructura la presentación de la cooperativa, los cursos, los proyectos, la actividad territorial y el contacto, con navegación adaptada a móvil.

Implementación

La plataforma utiliza Astro SSR para la interfaz pública y el campus, con Node.js, Express y MySQL en el mismo servicio de producción. La arquitectura cubre cursos y fichas de curso, autenticación, matriculación, progreso de lecciones, evaluaciones, área privada y pantallas de administración de cursos, módulos, lecciones, medios y usuarios. La web pública, el campus y la administración comparten la misma base técnica y de datos.

Objetivos

Ordenar inicio, cursos, proyectos, nosotros y contacto con una jerarquía común.
Dar rutas propias a los cursos, las fichas de curso y los proyectos.
Mantener una jerarquía visual común entre las páginas públicas.
Integrar contacto, acceso, registro y navegación responsive.
Separar las páginas públicas de las pantallas de acceso y gestión de formación.

Estado actual

Inicio, cursos, proyectos, nosotros y contacto reunidos en una misma estructura visual.
Rutas de cursos, fichas de curso y contenido de proyectos.
Componentes y estilos reutilizables para añadir nuevas secciones sin reconstruir la base.

Trabajo realizado

Astro SSR y aplicación pública

Interfaz construida con Astro SSR, componentes reutilizables y rutas públicas servidas en el mismo entorno que la API.

Sistema visual agro-editorial

Paleta oscura con verde lima, tipografía editorial, fondos con grid sutil y componentes reutilizables.

Interacciones y animación

Implementación de cursor personalizado, transiciones de página, efectos de scroll, cambios de imagen por interacción y microinteracciones en botones y navegación.

Páginas principales

Desarrollo y refinamiento de las páginas de inicio, cursos, proyectos, nosotros y contacto.

Campus, datos y backoffice

Node.js, Express y MySQL sostienen autenticación, matriculación, progreso, evaluaciones, área privada y pantallas de gestión de cursos, módulos, lecciones, medios y usuarios.

Responsive y menú móvil

Revisión de la experiencia móvil, ajuste de bloques que se solapaban y creación de un menú móvil opaco que aparece desde arriba.