CECO Les Pedreres | Web i campus formatiu

Resum

Web institucional i plataforma formativa de CECO Les Pedreres. Combina Astro SSR amb Node.js, Express i MySQL per servir la web pública, cursos, matrícula, àrea privada, progrés de lliçons, avaluacions i administració formativa.

Objectiu

Construir una web institucional que també funcioni com a campus formatiu, sense separar la comunicació pública de la gestió de cursos i usuaris.

Context

La web havia d’ordenar en una mateixa estructura la presentació de la cooperativa, els cursos, els projectes, l’activitat territorial i el contacte, amb navegació adaptada a mòbil.

Implementació

La plataforma utilitza Astro SSR per a la interfície pública i el campus, amb Node.js, Express i MySQL al mateix servei de producció. La mateixa arquitectura cobreix cursos i fitxes de curs, autenticació, matrícula, progrés de lliçons, avaluacions, àrea privada i pantalles d'administració de cursos, mòduls, lliçons, mitjans i usuaris. La web pública, el campus i l’administració comparteixen la mateixa base tècnica i de dades.

Objectius

Ordenar inici, cursos, projectes, nosaltres i contacte amb una jerarquia comuna.
Donar rutes pròpies als cursos, les fitxes de curs i els projectes.
Mantenir una jerarquia visual comuna entre les pàgines públiques.
Integrar contacte, accés, registre i navegació responsive.
Separar les pàgines públiques de les pantalles d'accés i gestió de formació.

Estat actual

Inici, cursos, projectes, nosaltres i contacte reunits en una mateixa estructura visual.
Rutes per a cursos, fitxes de curs i continguts de projectes.
Components i estils reutilitzables per afegir noves seccions sense reconstruir la base.

Treball realitzat

Astro SSR i aplicació pública

Interfície construïda amb Astro SSR, components reutilitzables i rutes públiques servides al mateix entorn que l'API.

Sistema visual agro-editorial

Paleta fosca amb verd llima, tipografia editorial, fons amb grid subtil i components reutilitzables.

Interaccions i animació

Implementació de cursor personalitzat, transicions de pàgina, efectes de scroll, canvis d’imatge per interacció i microinteraccions en botons i navegació.

Pàgines principals

Desenvolupament i refinament de les pàgines d’inici, cursos, projectes, nosaltres i contacte.

Campus, dades i backoffice

Node.js, Express i MySQL sostenen autenticació, matrícula, progrés, avaluacions, àrea privada i pantalles de gestió de cursos, mòduls, lliçons, mitjans i usuaris.

Responsive i menú mòbil

Revisió de l’experiència mòbil, ajust de blocs que se solapaven i creació d’un menú mòbil opac que apareix des de dalt.