Desenvolupament de Plantilles Base
El desenvolupament de les plantilles base consisteix a crear l’esquelet modular de la pàgina web. Aquesta plantilla conté els elements estructurals comuns que es repetiran a tot el lloc web de l’INS Castellbisbal (com la capçalera, el menú de navegació i el peu de pàgina), assegurant la consistència visual i facilitant el manteniment tècnic.
A continuació, es detalla com s’ha estructurat aquest procés passant del disseny estàtic al codi real:
A. La Base en Figma (Fase de Prototipatge)
Abans d’escriure codi, s’ha utilitzat Figma com a eina de disseny per definir l’arquitectura visual de la plantilla base.
Components Mestres: Es van dissenyar els elements globals (el logotip de l’institut, els botons d’acció ràpida com “Secretaria” o “Moodle” i el menú de navegació).
Sistema de Graella (Grid): Es va establir una graella de 12 columnes per a escriptori i 1 columna per a dispositius mòbils (Mobile First), definint exactament els espaiats (marges i paddings).
Guia d’Estil Digital: Es van fixar els colors institucionals (Blau
#005596i Taronja#E67E22) i la tipografia (Urbanist).
B. Traducció a Codi a Visual Studio Code (Fase de Maquetació)
Un cop validat el disseny a Figma, s’ha utilitzat Visual Studio Code per traduir els elements visuals en codi font real utilitzant HTML5 semàntic i CSS3:
Estructura Semàntica (HTML5): Es divideix el document en blocs lògics nets:
<header>: Per a la identitat del centre i accessos directes.<nav>: Per al menú de navegació dinàmic.<main>: L’àrea on es carregarà el contingut variable de cada secció (notícies, calendaris, preinscripció).<footer>: Per a les dades de contacte, xarxes socials i mapa de situació.
Estils i Maquetació (CSS3): * S’implementa Flexbox per alinear els elements de la barra de navegació de manera fluida.
S’utilitza CSS Grid per maquetar la graella de continguts i assegurar que el disseny sigui 100% responsive (adaptable a mòbils, tauletes i ordinadors).
Es declaren variables CSS (
:root) amb els codis de color exactes de Figma per garantir un traspàs fidel i un codi net.
C. Mapeig de Components (Disseny vs. Codi)
Per a la implementació de la plantilla base, l’equivalència entre el disseny i els fitxers de codi es distribueix de la següent manera:
| Element a Figma | Component Tècnic (Codi) | Funció en la Web |
| Capçalera i Logos | header.php / header.html | Identitat de l’institut i barra superior. |
| Menú Principal | nav.css / Menú del CMS | Navegació estructurada per l’usuari. |
| Cos de la Pàgina | index.php / main | Zona dinàmica per a tràmits i notícies. |
| Peu de Pàgina | footer.php / footer.html | Contacte, xarxes socials i informació legal. |
D. Avantatges de la Plantilla Base per al Projecte
Eficiència: En tenir una base programada, crear una nova secció per a l’institut (per exemple, la secció de “Beques”) triga un 40% menys de temps, ja que només s’ha de programar el contingut central.
Manteniment Fàcil: Si l’institut canvia el número de telèfon o el menú, només cal modificar el fitxer de la plantilla base una vegada perquè es repliqui automàticament a tota la web.