Iman Noor – Disseny Responsive PRO+
Menú professional i adaptació avançada a tots els dispositius
1 Justificació: Disseny Responsive Avançat
Aquest projecte implementa un sistema fluid utilitzant tecnologia de contenidors Flexbox per garantir una experiència d’usuari òptima[cite: 1, 7, 19].
Media Queries Estratègiques
- 480px (Mòbil): Reorganització vertical, tipografia escalada i menú d’hamburguesa[cite: 1, 9, 30].
- 768px (Tauletes): Transició a graella de 2 columnes i navegació adaptada[cite: 1, 10, 34].
- 1024px (Escriptori): Configuració de graella de 3 columnes amb amplada màxima[cite: 1, 11, 34].
Unitats Relatives i Flexbox
- Ús de rem, % i vw per a una tipografia i espaiats totalment escalables[cite: 1, 13, 14, 15].
- Implementació de Flexbox en el menú i footer per a la reorganització automàtica d’elements[cite: 1, 17, 19].
2 Implementació: Menú Professional
Navegació completament funcional amb una estructura jeràrquica clara[cite: 2, 25, 26]:
- Estructura: Inici, Reptes (amb submenú de 5 elements), Sobre mi i Contacte[cite: 2, 28].
- Comportament: Menú hamburguesa automàtic en dispositius mòbils ($\le768px$)[cite: 2, 30].
- Connectivitat: El 100% dels enllaços estan verificats i són funcionals[cite: 2, 31].
3 Configuració Tècnica (Elementor Backend)
Evidència de l’ús d’eines avançades per a la configuració del sistema[cite: 5, 103]:
ACTIVACIÓ DE FEATURES
Activació dels contenidors Flexbox per a un disseny modern[cite: 1, 17].
EDITOR RESPONSIVE
Ajustos manuals de tipografia i espaiats per a cada breakpoint[cite: 1, 8, 108].
4 Evidències del Disseny Final
Resultat visual de l’adaptació en diferents dispositius[cite: 5, 86, 115]:
VISTA MÒBIL
Tipografia ajustada i menú col·lapsat per a pantalles petites[cite: 5, 87, 89, 90].
VISTA TAULETA
Adaptació de la graella a 2 columnes per a una millor lectura[cite: 5, 88, 91, 92].
Especificacions Tècniques (Mètriques)
| Concepte | Tecnologia Utilitzada [cite: 5, 98] |
|---|---|
| Layout | Flexbox + CSS Grid combinats [cite: 5, 101] |
| Unitats | rem, %, vw [cite: 5, 100] |
| Breakpoints | 4 media queries (480, 768, 1024, 1600px) [cite: 5, 99] |
| Navegació | Submenú amb 5 subelements [cite: 5, 102] |
5 Compliment de la Rúbrica PRO+
- Media Queries avançades i configurades correctament[cite: 6, 108].
- Ús exhaustiu d’unitats relatives per a un disseny fluid[cite: 6, 109].
- Adaptació perfecta provada en 3 tipus de dispositius[cite: 6, 115].
- Totes les evidències documentades segons els requisits de l’assignatura[cite: 6, 123].