Documentació Tècnica: Enllaços
Implementació de seguretat i usabilitat per a l’estat PRO+
1. Disseny i Estructura Inicial
El primer pas va ser la creació d’una interfície neta i funcional amb 8 botons que representen els diferents reptes del projecte. L’objectiu és oferir una navegació intuïtiva per a l’usuari.
Imatge 1: Vista general del menú de navegació.
2. Selecció d’Elements
Imatge 2: Selecció del botó per editar l’enllaç.
Imatge 3: Edició del contingut i preparació de l’URL.
3. Ús de Blocs de WordPress
Utilitzem les eines natives de l’editor de blocs per assegurar una estructura HTML correcta (List blocks i Button blocks).
Imatge 4: Menú de selecció de blocs per a l’organització del contingut.
4. Configuració Avançada (Usabilitat)
Per complir el requisit PRO+, s’ha entrat al menú “Advanced” de cada enllaç per activar l’obertura en finestra nova.
✓ “Open in new tab” activat per a la millora de l’experiència d’usuari (UX).
5. Evidència de Codi i Seguretat
Finalment, verifiquem des de l’editor de codi que s’ha inclòs l’atribut rel=”noopener”, essencial per protegir el lloc contra vulnerabilitats de seguretat en obrir enllaços externs.
Imatge 7: Vista del codi font on es confirma la presència dels atributs de seguretat.
Justificació Tècnica
S’ha triat l’ús de target="_blank" per mantenir la retenció de l’usuari al portafolis principal. Per contrarestar el risc de seguretat, s’ha aplicat rel="noopener", seguint les bones pràctiques de desenvolupament web i els estàndards d’accessibilitat WCAG.
