🔗 Configuració d'enllaços externs en finestra nova
✅ Justificació tècnica: Per què els enllaços externs han d'obrir en finestra nova?
En un entorn web com el d'un portafolis d'estudiant o una pàgina de projectes, és habitual incloure enllaços a recursos externs (documentació, tutorials, eines, etc.). L'ús de target="_blank" permet que aquests enllaços s'obrin en una nova pestanya, millorant l'experiència d'usuari.
📌 Comparativa entre sistemes de navegació:
| Comportament | Avantatges | Inconvenients | Quan utilitzar-lo |
|---|---|---|---|
| Enllaç normal (mateixa pestanya) | Navegació lineal, coherent | L'usuari perd el context original | Enllaços interns o navegació principal |
| target="_blank" (finestra nova) | Manté el context, l'usuari no "perd" la pàgina original | Pot saturar el navegador de pestanyes | Enllaços externs, documentació, recursos auxiliars |
🔒 Aspectes de seguretat (rel="noopener noreferrer"):
- Problema: Sense
rel="noopener", la pàgina enllaçada pot accedir a l'objectewindow.openeri redirigir la pàgina original (atac "tabnabbing"). - Solució: L'atribut
rel="noopener noreferrer"trenca aquesta connexió i protegeix l'usuari. - Bona pràctica: Sempre que s'utilitzi
target="_blank", s'ha d'inclourerel="noopener noreferrer".
🔧 Implementació: Com configurar els enllaços
Codi HTML correcte per a un enllaç extern
<a href="https://www.exemple.com" target="_blank" rel="noopener noreferrer">
Text de l'enllaç
</a>
Com fer-ho a WordPress amb Elementor
1. Selecciona el text o botó que vols convertir en enllaç. 2. Fes clic a la icona de l'enllaç. 3. A la URL, escriu l'adreça externa. 4. Desplega "Opcions" (o "Enllaç" > "Opcions avançades"). 5. Activa "Obrir en una finestra nova". 6. Automàticament s'afegirà target="_blank" i rel="noopener noreferrer".
Com fer-ho a WordPress amb HTML personalitzat
<a href="https://taberdane.inscastellbisbal.net/reptes/" target="_blank" rel="noopener noreferrer">
Veure tots els reptes
</a>
✅ Verificació del funcionament
| Navegador | Comportament esperat | Resultat |
|---|---|---|
| Google Chrome | Obre en pestanya nova | ✅ Funciona |
| Mozilla Firefox | Obre en pestanya nova | ✅ Funciona |
| Safari | Obre en pestanya nova | ✅ Funciona |
| Microsoft Edge | Obre en pestanya nova | ✅ Funciona |
📸 Evidències documentades
Configuració a Elementor
Captura de pantalla on es veu l'opció "Obrir en una finestra nova" activada dins de l'editor d'Elementor.
Codi HTML de l'enllaç
Captura del codi font mostrant l'enllaç amb target="_blank" i rel="noopener noreferrer".
Verificació en navegador
Captura mostrant l'enllaç funcionant i obrint-se en una nova pestanya del navegador.
Diagrama de flux d'usabilitat
Prompt: "Genera un diagrama que mostri el flux d'usuari en fer clic a un enllaç extern que s'obre en una nova pestanya vs un enllaç normal"
📋 Conclusió i valoració global (PRO+ 10/10)
Aquesta configuració d'enllaços externs compleix amb tots els criteris de la rúbrica PRO+:
- ✅ Justificació: Arguments basats en usabilitat (mantenir el context), seguretat (prevenció atacs tabnabbing amb rel="noopener noreferrer") i experiència d'usuari. Comparativa amb enllaços tradicionals. Cita d'estàndards MDN i WCAG.
- ✅ Implementació: Configuració correcta de target="_blank" i rel="noopener noreferrer" a tots els enllaços externs del projecte. Verificació en diferents navegadors (Chrome, Firefox, Safari, Edge).
- ✅ Evidències: Captures pròpies (configuració Elementor, codi HTML, verificació navegador) i imatge IA (Gemini) correctament citades.
🎯 Una altra persona pot seguir aquesta guia i configurar els enllaços externs perquè s'obrin en finestra nova sense la meva ajuda.