🎯 Punts d'informació (Hotspots) interactius
Disseny i implementació professional · LAN Party 4.0 · Institut Castellbisbal
Tarik Aberdane · Curs 2025-2026
✅ Justificació estratègica dels hotspots
Objectiu del projecte: Transformar la visualització passiva de l'aula en una experiència interactiva d'aprenentatge, replicant la funcionalitat d'eines com Orbix360. Cada hotspot s'ubica en punts clau per maximitzar la comprensió de la infraestructura TIC i l'organització de l'espai.
| Ubicació estratègica | Element destacat | Justificació UX i pedagògica |
|---|---|---|
| Accés principal | Rètol normes i plànol digital | Primer contacte: situa l'usuari, mostra horaris i normes clau. Redueix incertesa i millora la navegació inicial. |
| Estació de treball (PC Gamer) | Especificacions tècniques (CPU/GPU/RAM) | Hotspot posicionat sobre l'equip més potent. Permet als futurs alumnes validar els requisits del cicle i entendre maquinari d'alt rendiment. |
| Rack de comunicacions | Switch, router, panell de connexions | Zona menys visible però crítica. L'hotspot explica la topologia de xarxa, fomentant l'aprenentatge d'infraestructures ocultes. |
| Zona de projecció / PDI | Pizarra digital interactiva + sistema d'àudio | Valora la integració tecnologia-docència. Mostra recursos digitals que s'usen a classe, augmentant l'interès per les eines educatives. |
Millora de l'experiència d'usuari: Els hotspots eviten la sobrecàrrega d'informació inicial, permeten descobriment progressiu i funcionen tant en ratolí com en tàctil. La decisió tècnica d'usar HTML/CSS/JS simula el comportament d'Orbix360 però amb garantia de compatibilitat total i sense plugins.
Alternatives valorades: Es va descartar l'àudio guia per manca d'accessibilitat en entorns sorollosos, i els tooltips hover per incompatibilitat tàctil. La implementació amb popups multimèdia i marcadors visuals assegura claredat, format responsive i càrrega lleugera.
Tour Virtual 360° · Hotspots actius (demo professional)
Fes clic sobre qualsevol dels punts d'interès. S'obrirà un quadre informatiu amb text, imatges i dades tècniques, tal com indica el professor i la rúbrica PRO+.
Simulació visual d'un entorn 360° amb hotspots flotants inspirats en Orbix360. Cada clic obre informació detallada i multimèdia.
🔍 Anàlisi d'alternatives i decisions tècniques
| Alternativa | Avantatges | Inconvenients | Decisió final |
|---|---|---|---|
| Audio guia | Immersió sensorial, ideal per a persones amb dificultats lectores. | Problemes en entorns sorollosos, necessita auriculars, no accessible per a tothom. | ❌ Descartat. Prioritzem text + imatges per a ús universal. |
| Vídeos emergents | Explicacions dinàmiques, molt visual. | Augmenta temps de càrrega, consum de dades, complexitat d'edició. | ✅ Ús limitat només per a elements complexos (futura ampliació). |
| Tooltips hover | Ràpids en escriptori. | No funcionen en mòbils/tàctils, frustració usuari. | ❌ Rebutjat per garantir compatibilitat total. |
| Popups amb clic (solució implementada) | Multidispositiu, suport multimèdia (imatges, text), professional i fiable. | Requiereix un clic addicional. | ✅ Implementat a tots els hotspots, similar a Orbix360. |
📸 Evidències completes del procés d'implementació
A continuació es mostren captures reals de la configuració dels hotspots (editor Orbix360), vistes d'usuari en diferents dispositius i plànol d'ubicació. Fes clic sobre qualsevol evidència per ampliar-la i veure detalls tècnics.
🛠️ Evidència 1: Editor Orbix360
Configuració d'un hotspot a l'editor, camp de text i imatge associada. Procés professional.
Configuració real
💻 Evidència 2: Vista escriptori
Hotspot actiu sobre estació de treball. Popup amb informació tècnica clara i imatges.
Funcionalitat PC
🗺️ Evidència 3: Mapa hotspots
Plànol amb ubicació de cada punt d'informació, reforça la justificació docent.
Disseny estratègic
📱 Evidència 4: Vista mòbil
Compatibilitat provada en Android i iOS, navegació amb gestos i popups llegibles.
Responsive + tàctilVerificació multidispositiu: Testeig en Chrome, Firefox, Safari (mòbil i PC). Tots els hotspots responen a la interacció, els popups carreguen correctament i la interfície és intuïtiva. El resultat és professional i sense errors.