Introducció i context del projecte

DropApp representa l’evolució natural i escalada del projecte desenvolupat durant l’assignatura Desenvolupament d’aplicacions interactives del Grau en Multimèdia de la UOC (curs 2025-26). Aquest treball inicial consistia en un prototip bàsic d’aplicació mòbil hibrida desenvolupada amb les tecnologies Capacitor (per funcions natives mòbils) i p5.js (per components visuals interactius), pensada específicament per resoldre un problema clínic crític: el baix compliment dels tractaments oftalmològics basats en gotes oculars.

Estadístiques clau que justifiquen el projecte: aproximadament el 50-70% dels pacients amb malalties cròniques com glaucoma no compleixen adequadament els tractaments de gotes, segons múltiples estudis clínic revisats durant la fase d’investigació. Aquest no compliment deriva en progressió ràpida de la malaltia, necessitat d’intervencions quirúrgiques més invasives i costos sanitaries elevats. DropApp proposa solucions innovadores centrades en tres actors principals: pacient (recordatoris intel·ligents i visuals motivadores), metge (dashboard temps real amb alertes proactives) i família (compartició opcional progrés).

Procés creatiu: LogBook digital + Metodologia Design Toolkit UOC

He mantingut un LogBook digital exhaustiu com a eina central del procés creatiu, tal com recomana l’enunciat. A partir d’aquest, he aplicat sistemàticament les metodologies del Design Toolkit UOC:

• Pluja d’idees lliure sense restriccions inicials: generades 20 idees realistes i tècnicament viables amb Capacitor/p5.js

• Selecció i taula 8 idees principals prioritzant originalitat multimèdia i impacte clínic

• Investigació de 4 aplicacions competidores del mercat 2026 amb anàlisi screenshots i comparativa taula

• Aplicació SCAMPER completa sobre 10 idees base resultant 70+ variants documentades taula

• Selecció 5 variants principals més prometedores amb esbossos visuals realistes generats assistència IA

• Mapa conceptual visualitzant evolució completa del procés creatiu

• Validació externa amb opinions professionals (oftalmòloga especialista glaucoma)

• Consideracions especials usuaris edat avançada (públic principal baixa visió)

Idees inicials generades i taula principals seleccionades

La pluja d’idees inicial va produir 20 conceptes viables que responen tant necessitats clíniques com capacitats multimèdia. D’aquestes, he prioritzat les següents 8 idees principals per la seva combinació d’originalitat, viabilitat tècnica immediata (Capacitor per natives, p5.js visuals) i potencial impacte en adherència pacient:

Taula idees principals:

• DropApp Bàsica: Timer checks pacient + dashboard metge cloud – Tracking real-time
• AR Drops: Realitat augmentada simula aplicació – Visualització immersiva
• Haptics + Audio: Vibració + so guiat aplicació – Multisensorial
• IA Predictiva: Prediu necessitat analitzant humitat sensors – Preventiva
• Social Share: Comparteix progrés familiars/metge grup – Suport comunitari
• Gamified: Punts badges realitat virtual motivar nens – Educativa
• Especulativa: Ulleres AR autoadministradores nano-impresses – Futurista sense límits
• Multimèdia Avançada: p5.js efectes gotes ull 3D interactiu – Visual interactiva

Aquestes 8 han servit base per SCAMPER generant 70+ variants.

Anàlisi detallada estat mercat i referències principals investigades

Per contextualitzar DropApp i validar originalitat, he investigat t les 4 aplicacions competidores principals disponibles mercat 2026, totes amb screenshots i anàlisi comparativa:

• EyeDropAlarm (Google Play): Característiques recordatoris horaris, base dades gotes, gaps automàtics. Limitacions dashboard metge absent, visuals motivadors inexistents, mode nens no contemplat. Contribució DropApp suposa dashboard temps real + p5.js visuals.
• Eye Drop Reminder (App Store): Multi-gotes gratuïta limitada, widget, logging one-tap. Limitacions connexió professional absent, gamificació zero. DropApp aporta connexió metge-pacient activa + modes lúdics.
• Medisafe Eye-Med Tracker: Tracking general medicació, alertes família, interaccions. Limitacions no especialització oftalmologia, verificació visual absent. DropApp 100% focus oftalmologia + foto evidència.
• GlaShield: Tracking pressió, visites, drops glaucoma. Limitacions exclusivament glaucoma, multimèdia absent. DropApp multitractament + gràfics animats.

Conclusions investigació mercat: 80% apps limitades recordatori pur. DropApp resol buits estratègics amb dashboard proactiu metges, visuals interactius p5.js, modes especialitzats nens/usuaris avançats.

SCAMPER – Taula transformació completa idees

He seleccionat 10 idees base pluja i aplicat SCAMPER exhaustiu (S Substituir, C Combinar, A Adaptar, M Modificar, P Altres usos, E Eliminar, R Reordenar) generant 70+ variants taula documentada:

Taula SCAMPER completa adjuntada al document PDF.

5 Variants principals seleccionades i esbossos visuals concrets

De 70 variants SCAMPER, 5 més prometedores viables impacte:

• Dashboard metge + alertes push (3-C)

• Timer veu sintètica baixa visió (1-S)

• Gràfics p5.js animats compliment (4-M)

• Check + foto automàtica verificació (6-C)

• Mode nens jocs interactius p5.js (5-M)

5 wireframes realistes IA generats mostren pantalles exactes cada variant

Consideracions especials usuaris edat avançada baixa visió

Públic objectiu principal: 65+ anys (70% pacients oftalmològics). Solucions incorporades:
Lletres 24pt+ espaiat WCAG AA, veu sintètica completa guies, hàptics diferencials esquerre/dreta, mode ultra-simplificat, feedback verbal confetti visual.

Mapa conceptual evolució completa procés creatiu

Referències consultades justificació investigació

• Design Toolkit UOC (2026). Metodologies creatives PAC1 TFG.: Disponible a: https://design-toolkit.recursos.uoc.edu/ [Consulta: 01/03/2026]
• EyeDropAlarm (2026). Aplicació recordatoris gotes oftalmològiques: Disponible a: https://play.google.com/store/apps/details?id=com.aviyallc.eyedropalarm
• Eye Drop Reminder – EyeDrop (2026). App Store: Disponible a: https://apps.apple.com/app/eye-drop-reminder/id6757758987
• Medisafe Eye-Med Tracker (2026). Gestor medicació oftalmològica: Disponible a: https://medisafeapp.com/es/eye-med-tracker/
• Review of Ophthalmology (2023). “Smartphone Apps: Aiding Compliance”: Disponible a: https://www.reviewofophthalmology.com/article/smartphone-apps-aiding-compliance
• DropApp – Projecte original (2025): Desenvolupament assignatura “Desenvolupament d’aplicacions interactives”, UOC.

Resum del Projecte (Abstract)

Adarró 360 és una experiència de Realitat Augmentada (RA) geolocalitzada basada en tecnologia WebXR. L’objectiu és que l’usuari, situat físicament sobre les ruïnes del jaciment d’Adarró (Vilanova i la Geltrú), pugui utilitzar el seu dispositiu mòbil com una finestra temporal. En mirar a través de la càmera, les estructures ibèriques i romanes es reconstrueixen en 3D d’alta fidelitat exactament sobre el terreny real, transformant el jaciment en una interfície espacial on el moviment de l’usuari és l’element de navegació.

Justificació i Rellevància

• Patrimoni Invisible: Permet visualitzar volums allà on avui només hi ha fonaments, facilitant la comprensió al públic no expert.

• Smart City: Alinea Vilanova i la Geltrú amb les tendències de turisme intel·ligent, oferint una activitat cultural autònoma 24/7.

• Democratització (WebXR): L’ús de tecnologia web elimina la barrera de descàrrega d’aplicacions, fent la cultura accessible per a tothom.

Punts clau de la proposta:

• Tecnologia Accessible: Desenvolupament com a PWA (Progressive Web App), eliminant la barrera de descàrrega d’aplicacions natives i garantint l’accés universal des de qualsevol smartphone modern.

• Ancoratge Híbrid: Combinació de Geolocalització (GPS) per a l’aproximació i Visió Artificial (Image Tracking) per a una fixació mil·limètrica dels models 3D sobre els fonaments reals.

• Patrimoni Invisible: Recuperació visual de volums desapareguts (vil·la romana, tallers i muralla) per facilitar la comprensió històrica al públic no expert i potenciar el turisme intel·ligent (Smart City) a la ciutat.

• Rigor i Emoció: Fusió de dades arqueològiques validades pel MAC amb una narrativa immersiva que inclou àudios i paisatges sonors de la vida quotidiana.

Mapa Conceptual del Projecte

Metodologia creativa

El projecte ha estat definit mitjançant un procés de disseny centrat en l’usuari, utilitzant eines com el SCAMPER per evolucionar la idea inicial i el Disseny Especulatiu per fixar un horitzó tecnològic d’alta fidelitat.

LogBook

• 19/02 – Inici de la PAC1: Lectura de l’enunciat i reflexió sobre el projecte anterior “Darró Digital“ treballat a l’assignatura de Projecte3. Tinc clar que vull fer un salt tecnològic, passant del visor d’objectes a la reconstrucció d’espais.
• 20/02 – Idea Inicial (L’escàner temporal): “Què passaria si el mòbil fos un escàner temporal? En girar 360°, la vil·la romana hauria d’aparèixer superposada a la platja actual.” Comença a prendre forma el concepte de “finestra al passat”.
• 21/02 – Pluja d’Idees: Exploro tres rutes possibles:
  • Ruta A – Educació: Laboratori d’excavació virtual per a escoles.
  • Ruta B – Gamificació: Escape Room digital al Museu Víctor Balaguer.
  • Ruta C – Immersió in situ: Reconstrucció arquitectònica amb AR geolocalitzada.
  • Decisió: Tinc la certesa que la Ruta C és la més potent a nivell d’interacció, innovació i impacte cultural per a Vilanova.
• 23/02 – Problema Tècnic: Detecto un repte crític: “La geolocalització pot tenir errors de metres. Necessitaré punts d’ancoratge visuals per estabilitzar els models.” Comença la idea de l’ancoratge híbrid. Definició de POI (Punts d’Interès): Defineixo les coordenades GPS reals per als tres punts clau del jaciment: La Vil·la Romana, Els Tallers Ibèrics (sitges i pous) i Muralla i Accés. Disseny de la interacció per proximitat (vibració + botó “Mira a través del temps”).
• 24/02 – Necessitat Narrativa: No vull només mostrar edificis. Vull explicar el “perquè”. Decideixo que cada punt ha de tenir una capa de so i text que humanitzi les dades arqueològiques. Començo a esbossar el Mapa Conceptual. Aquesta tasca m’ajuda a veure que el projecte té tres capes: històrica, tecnològica i d’usuari i a definir l’arquitectura de la futura aplicació.Mentre maquetava el mapa conceptual en Figma, m’he adonat que els eixos per si sols no explicaven el projecte. He decidit crear tres nodes de connexió estratègics: Rigor Digital, Sincronia Espacial i Humanització. Aquesta decisió m’ha ajudat a justificar per què la tria de models .GLB (tecnologia) és inseparable de la validació del MAC (història), i com els àudios (interacció) són el vehicle per explicar l’economia de l’Adarró. Ara el mapa no és una llista, és un sistema.
• 25/02 – Investigació Tecnològica: Analitzo les eines per mantenir l’accessibilitat universal. Three.js + WebXR funciona bé a Android. Per a iOS, contemplo solucions com 8thWall o Zappar si calgués, tot i que m’inclino per l’estàndard obert de WebXR.
• 26/02 – Aplicació del mètode SCAMPER: Passo la idea pel filtre creatiu per potenciar-ne l’originalitat:
  • Substituir: QR per triggers geogràfics invisibles.
  • Combinar: GPS amb el visor 3D per crear la finestra temporal.
  • Adaptar: El model gira segons la direcció real (brúixola).
  • Magnificar: Passo de petites peces 3D a edificis a escala real 1:1.
  • Proposar altres usos: Ús de l’app per a arqueologia experimental i test d’hipòtesis científiques.
• 27/02 – Finalització de la PAC1: Començo a redactar i maquetar la memòria de la PAC1, estructurant tota la informació recollida en els dies anteriors, redacció de la factibilitat i autoavaluació. El projecte ja té una base sòlida.

PDF complet del projecte

De l’MVP del Projecte 3 al TFG: Evolució de Beka DCP 

Tot i que el Projecte 3 va establir una base sòlida i funcional (l’esquelet del SaaS), el desenvolupament del TFG suposa un salt qualitatiu per transformar un prototip en una eina que realment sigui d’utilitat per als usuaris per als qui està pensada. Bàsicament usuaris del sector audiovisual/cinematogràfic que no tinguin un perfil tècnic avançat o que no disposin de les eines ni el hardware necessari per a fer una conversió d’arxius de vídeo a DCP que és el format estàndard de visionat per als projectors digitals dels cinemes.

Aquest projecte es divideix en les següents seccions:

1. Activació de les funcionalitats “pendents” del Projecte 3

El primer objectiu del TFG és fer que l’app sigui plenament operativa. A la memòria del Projecte 3 es va admetre que moltes opcions de la interfície eren només visuals; ara s’implementarà la seva lògica real al backend:

Processament de dades reals: S’activarà el control del bitrate J2K (permetent valors entre 50 i 250 Mbit/s segons el manual oficial), la conversió real d’espais de color (DCI-P3, Rec.709) i la configuració d’àudio multicanal.

Gestió de subtítols: S’integrarà Subtitle Edit CLI per convertir fitxers SRT a l’estàndard XML del cinema, permetent tant el “burn-in” (cremat a imatge) com el “timed text” (pista separada).

Resultats i Verificació: L’usuari ja no només veurà el resultat en text a la pròpia app; es podrà exportar l’informe exhaustiu de dcp-inspect a PDF i visualitzar una previsualització real del DCP mitjançant un fitxer MP4/HLS generat en segon pla i reproduït en una finestra modal mitjançant un player per a HLS com pot ser videoJS.

2. Novetats Tècniques: 

Per “democratitzar” realment la creació de DCPs, cal oferir eines que fins ara només estaven en programari de sobretaula car:

Mapatge i suport d’àudio multicanal 5.1/7.1: S’implementarà una matriu de mapatge visual per assignar correctament els canals (L, R, C, Lfe, Ls, Rs) per adaptar l’ordre dels arxius d’entrada a l’especificació del DCP

Encriptació i creació de KDM: Es donarà suport natiu a l’encriptació, incloent-hi la generació de claus KDM per a poder donar accés a la DCP només a aquells cinemes que estiguin autoritzats.

Estructures avançades: El sistema permetrà crear Version Files (VF), una funcionalitat vital per estalviar espai i temps quan es volen afegir subtítols o idiomes a un vídeo ja existent (OV).

Anàlisi de Loudness: S’inclourà un informe de nivells LUFS i True Peak, garantint que l’àudio compleix les normatives de les sales de projecció.

3. UX i Lògica de Negoci: 

Finalment, l’aplicació s’adaptarà per ser un producte comercial usable:

Gestió d’Usuaris: S’implementarà un sistema de Registre i Login amb un Backoffice personalitzat on cada usuari podrà gestionar el seu historial de projectes i descàrregues.

UI adaptada als canvis: La UI s’adaptarà a totes aquestes funcions noves i s’enriquirà amb un sistema de Tooltips d’ajuda en cada paràmetre tècnic (explicant els conceptes bàsics per a entendre la creació del DCP), eliminant la barrera d’entrada per a usuaris no tècnics.

Amb aquest full de ruta, el projecte passa de ser una prova de concepte a convertir-se en una plataforma de creació de DCP’s online amb utilitat real.

Què seria la versió “Perfecte” de Beka DCP?

Aquesta proposta d’evolució ja seria una versió amb tots els estàndards que esperen els professionals de l’indústria de la postproducció cinematogràfica i les funcionalitats de qualsevol SaaS que realment funcioni. Per aconseguir això s’haurien d’integrar totes aquestes millores.

1. Ingesta: De HTTP a FTP o UDP

La idea és que pujar un fitxer pesat sigui tan fàcil com moure una carpeta a l’escriptori.

• Connexió directa: Implementaríem un client SFTP dins la mateixa web per moure dades de servidor a servidor.
• Velocitat màxima: Integraríem protocols UDP com els que fan servir Aspera o Signiant per aprofitar tot l’amplada de banda possible.
• Seguretat total: Les pujades es farien mitjançant claus temporals encriptades, protegint els màsters durant tota la cadena.

2. Codificació accelerada amb GPUs (Motor Grok)

En aquesta hipotètica versió, la velocitat de creació d’un DCP ja no dependria només de la potència de processament “normal” del servidor, sinó que faria un salt gegant:

• Velocitat de gpu: S’implementaria el codificador Grok, que és el que recomana oficialment DCP-o-matic. Això permetria aprofitar tota la potència de les targetes gràfiques NVIDIA (tecnologia CUDA).
• Rendiment real: Es podria arribar a codificar a uns 200 fotogrames per segon. Això significaria que una pel·lícula sencera es processaria en una fracció del temps actual, quasi 10 vegades més ràpid que a temps real.

3. Infraestructura elàstica: Un sistema que creix a demanda.

L’objectiu seria que la plataforma no es quedés mai penjada, sense importar el volum de feina que entrés de cop.

• Malla de contenidors: El sistema no dependria d’un sol ordinador fix, sinó d’una xarxa d’unitats de treball (contenidors) que s’activarien segons la demanda de cada moment. Diverses empreses cloud ofereixen sistemes elàstics on pujar els contenidors que faci falta segons demanda.
• Escalabilitat : Si un matí entressin 50 pel·lícules de cop, el servidor seria capaç de “créixer” automàticament per processar-ho tot en paral·lel. Un cop acabada la feina, el sistema tornaria a la seva mida normal per ser més eficient.

3. Interfície: Informació en viu i al moment

Tot i que el sistema de polling que ara té implementat ja va actualitzant la pantalla de logs es podria convertir l’app sencera no solament la part dels logs.

• Feedback instantani: Gràcies als websockets, podríem veure qualsevol actualització en temps real.
• Notificacions: Rebria avisos immediats de validació o errors directament a la pantalla.

4. Distribució: Lliurament automàtic a tot el món

Un cop el DCP estigui llest, el sistema hauria de saber on enviar-lo sense que ningú hagi de prémer gaires botons.

• Enviament als cinemes: Connexió directa amb els servidors de les sales (TMS) via protocols segurs via SFT.
• Descàrrega ràpida i fiable: De la mateixa manera que s’implementaria per les pujades també es podria integrar per les baixades des de l’app mitjançant les API de Aspera, Signiant o Filemail.

5. Negoci: Un procés de venda tancat.

Finalment, s’automatitzaria la part més administrativa.

• Integrar subscripció o pagament per ús: Es podrien oferir diferents models de subscripció, de paquets de codificació  o  per una única codificació.
• Pagament i descàrrega: Integrar Stripe o qualsevol altre passarel·la de pagament perquè, un cop el client pagui, se li activi la descàrrega automàticament.

Avisos de finalització: Quan tot estigui llest, el client rebrà un SMS o un correu electrònic perquè no hagi d’estar pendent de la web.

Autoavaluació: B

​​Has tingut en compte opinions de tercers? De quina manera han afectat en la definició del projecte?

Ja des d’abans de l’inici del Projecte 3 aquest projecte era una idea que em rondava pel cap i que havia parlat amb altres companys de feina. Poder oferir una solució com la de Beka DCP és quelcom que és inèdit a la indústria, ja que no hi ha cap programari per crear DCP’s directament en línia i després de debatre amb companys tècnics i possibles usuaris vaig acabar convencent-me de què podria ser una app que sí que tingués recorregut com a SaaS. Una de les premisses que he intentat aplicar ja des que vaig començar-lo ha sigut – després de rebre els suggeriments dels qui l’han provat – és intentar que sigui una app que funcioni tant per usuaris no tècnics, amb una interfície fàcil d’entendre i el més automatitzada possible, com per a usuaris tècnics oferint accés a la majoria dels controls que ofereix dcp-o-matic per ajustar la sortida segons les necessitats tècniques de l’usuari.

Has analitzat projectes relacionats amb la temàtica d’aquest treball que t’hagin aportat idees?

Sí, una de les parts del Projecte 3 va ser fer un benchmark de l’estat del mercat i això em va permetre saber que com la solució que proposo no hi ha cap d’igual. Hi ha estudis de postpo que ofereixen el servei, hi ha programari com l’ EasyDCP que depèn de hardware relativament car, però no hi ha cap solució 100% en línia.

Has utilitzat algunes de les metodologies creatives que es comenten a l’enunciat? N’has utilitzat d’altres?

Per la pluja d’idees per la millora de funcionalitats he fet servir l’Scamper tot i el que més m’ha servit és la meva pròpia experiència en el camp audiovisual/cinematogràfic i la recerca tant de solucions de programari com d’arquitectura.

Podries destacar 3 o 4 punts clau que hagin variat després d’haver realitzat aquest procés d’estudi inicial, en referència a la idea original que poguessis tenir en ment?

Sobretot el que ha variat és ser conscient de quines millores eren factibles per al TFG i quines haurien d’esperar a fer-se a mesura que el projecte es converteixi en realitat.

Per exemple, la integració de la passarel·la de pagament, l’arquitectura escalable o l’acceleració per GPU o la integració d’UDP i SFTP són millores que hauré d’anar integrant un cop l’app estigui ben testada i tingui totes les opcions a nivell de programari ben implementades.