El projecte METEOQUARS s’ha desenvolupat per al Repte 3, que plantejava la creació d’una extensió per a Firefox basada en l’ús del temps, en la reutilització del Rellotge Creatiu del Repte 1 i en la incorporació d’una interfície construïda amb el DOM i amb persistència de dades.

En el marc d’aquest enunciat, es va adaptar el rellotge original programat amb p5.js a un format més reduït i coherent amb l’espai disponible a la barra superior del navegador, i es va sincronitzar automàticament amb l’hora real del sistema (a diferencia del Repte 1, que es podía programar manualment), assegurant que continués representant el pas del temps tal com s’exigia en l’activitat. Aquesta adaptació es va integrar al fitxer clock.js, carregat des del content-script.

Es van realizar alguns petits esboixos per decidir-ne l’aspecte, ja que el rellotge creatiu tenia una forma més aviat rectangular. Així doncs, es va decidir que l’extensió ocuparia l’ample de la pàgina, mantenint l’alçada de 150px.

També es va treballar en la creació de l’extensió amb Manifest V3. El manifest.json inclou els permisos necessaris, com storage, i els host_permissions per poder connectar amb l’API d’Open-Meteo. A més, s’hi defineixen tots els recursos externs de l’extensió —p5.js, icones GIF, scripts principals— que estructuren la base del projecte i en garanteixen el funcionament dins del navegador Firefox.

La construcció de la interfície amb el DOM es va fer completament des del content-script.js. Aquesta interfície incorpora elements de UI com el cercador de localització, els botons de desament i previsió, les etiquetes informatives i els contenidors visuals per a la icona meteorològica i el rellotge. Es van distribuir en tres blocs principals (esquerra, centre i dreta) per aconseguir una presentació clara i organitzada. Els estils visuals, es van aplicar amb CSS, injectat des del mateix script, però adaptable a un fitxer style.css extern si cal.

Quant a la persistència de dades, un altre punt clau del repte, es va optar per utilitzar localStorage, que funciona com a equivalent als mètodes storeItem() i getItem() de p5.js. En aquest espai s’hi desa la localització escrita per l’usuari i les seves coordenades corresponents. Quan l’extensió es torna a activar, el content-script recupera automàticament aquesta informació i actualitza la meteorologia, garantint que l’usuari mantingui el seu estat sense necessitat de repetir cap acció.

Amb l’objectiu d’“anar més enllà”, es van integrar fonts externes i funcionalitats ampliades. Concretament, es va utilitzar l’API pública d’Open-Meteo per obtenir temperatura, precipitació i codis meteorològics sense necessitat de clau d’accés. A partir d’aquestes dades, es va implementar una previsió de 48 hores analitzant la variació de precipitació, l’estat del cel i les temperatures.

L’ experiència visual es va reforçar amb cinc icones meteorològiques animades (amb After Effects) en format GIF, creades especialment per representar els 5 estats posibles d’aquesta primera versió: sol, sol i núvol, núvol, pluja i tempesta. També es va incorporar un sistema de color de fons dinàmic que canvia automàticament segons l’estat meteorològic detectat, aportant una lectura immediata i enriquint la percepció final de la interfície.

Com a possibles millores futures es podria incloure una webcam en directe mostrant una camera meteo del lloc buscat, però després d’investigar una mica, no hi ha cap servei que permeti mostrar qualsevol webcam de qualsevol lloc del mon, així que es varia la idea, i per tal d’aprofitar aquell espai, la següent iteració podria incloure una imatge omplint aquell espai (amb un degradat al final de l’esquerra) relacionada amb el resultat del temps de la ubicació cercada.

En el següent exemple es mostra la opció de “Ennuvolat”:

També es podria generar una versió “Mini” de la barra, i readaptar els elements per a un display més reduït.

CONCLUSIÓ

En conjunt, METEOQUARS (que podem variar el nom a METEOQUARTS, tot i què per algun motiu sonava millor sense la T) es presenta com una extensió que integra l’ús del temps, p5.js i una interfície construïda amb el DOM. Manté les dades entre sessions, mostra informació meteorològica actual i incorpora elements visuals i funcionals que en milloren l’experiència. El resultat és una eina clara i pràctica que et permetrà dir: “Abans de dos quarts de 6 estava plovent a Quito”.

————————————-

ENLLAÇ A GITHUB

https://github.com/JosepMSole/-R3-_METEOQUARS

Documentació de l’Extensió Rellotge Binari

Concepte del projecte

Aquesta extensió és una aplicació de tipus WebExtension per al navegador Firefox. Mostra un rellotge binari minimalista dins d’un popup, permetent personalitzar el color dels bits i la visualització de l’hora digital. L’objectiu és oferir una eina visual i estètica que representi el temps d’una manera alternativa.

Esbossos del disseny

Les tres columnes representen l’hora (columna esquerra), els minuts (columna central) i els segons (columna dreta). Cada columna té sis quadrats que representen els bits d’un nombre binàri.

Hi ha nombres que, en convertir-los a binari, no necessiten 6 dígits per ser representats. Per exemple, el número 23 es converteix en 10111, que només té 5 dígits. Per mantenir totes les columnes del rellotge amb la mateixa alçada i el mateix nombre de quadrats, he afegit zeros a l’esquerra fins a completar els 6 dígits. D’aquesta manera, hores, minuts i segons sempre formen columnes uniformes i visualment alineades.

Alhora de representar aquest números binaris en les columnes, el primer dígit de l’esquerra es representa a dalt de tot en la seva colummna corresponent i els digits següents és van dibuixant en la columna en ordre descendent. Els quadrats grisos equivalen a 0 i els quadrats blaus equivalen a 1.

Casos d’ús principals

• Consultar l’hora en format binari.
• Personalitzar el color dels bits per adaptar-lo al gust o al tema del navegador.
• Activar o desactivar la visualització de l’hora digital.

Interacció amb els elements

La icona de configuració en el popup redirecciona a la secció de configuració on es pot decidir:

• Mostrar o no l’hora en format digital
• Canviar el color dels cuadrats que representen bits actius.

Ús de storeItem() i getItem()

L’extensió utilitza localStorage per recordar les preferències de l’usuari. Quan l’usuari canvia el color dels bits o la configuració de l’hora digital, la informació s’emmagatzema amb storeItem(). Quan el popup es torna a obrir, getItem() recupera les preferències guardades, permetent mantenir la configuració personalitzada sempre activa.

Millora proposada
Fixar el popup perquè es pugui mantenir obert (“pin popup”).

Normalment, el popup d’una extensió es tanca automàticament quan l’usuari fa clic fora o canvia de pestanya. Això és una limitació de totes les extensions: un popup no pot quedar-se obert per si mateix. La millora consisteix a simular un “popup fix” obrint una finestra pròpia de l’extensió que actua com una mini-aplicació flotant.

Això permetria:

• Mantenir el rellotge sempre visible.
• Posicionar-lo lliurement.
• Tancar-lo manualment quan l’usuari vulgui.
• Obrir múltiples “rellotges” si es permet.

Procediment proposat:

• Afegir una icona estil “xinxeta” al popup

Quan l’usuari prem el botó, sobre una petita finestra independent que no es tanca sola, es pot moure, i té el mateix contingut que el popup.

• Diferenciar el popup real de la finestra flotant

El codi podria detectar si està dins una finestra flotant:

• 3. Desactivar elements innecessaris en la versió fixada.

• Amagar el botó “Opcions”
• amagar la icona “xinxeta” (per no obrir infinites finestres)

Enllaç Git

https://github.com/magulloc/rellotge-binari.git

1. Introducció

En aquest repte he desenvolupat una extensió per al navegador Firefox anomenada Rellotge Orbital Pomodoro. L’objectiu principal és combinar un rellotge orbital abstracte amb un temporitzador Pomodoro clàssic, de manera que l’usuari pugui controlar els seus cicles de treball i descans directament des de la barra del navegador.

L’extensió mostra un rellotge amb tres òrbites (hores, minuts i segons), un arc exterior que indica el progrés del Pomodoro i tres fases principals: treball, descans curt i descans llarg. A més, les dades de la sessió es guarden perquè, encara que es tanqui la popup, en reobrir-la es pugui continuar exactament on s’havia deixat.

2. Ideació i esbossos

La idea de partida va ser reutilitzar el “Rellotge Creatiu” del repte anterior i portar-lo a un context més funcional: una extensió que ajudi a aplicar la tècnica Pomodoro. Volia mantenir el caràcter visual i experimental del rellotge orbital, però afegint-hi botons, fases i sons que el convertissin en una eina real de productivitat.

Figura 1. Esbós inicial de la interfície del rellotge orbital Pomodoro.

En aquest esbós es pot veure la idea general: tres òrbites de colors amb punts en moviment, un arc exterior per indicar el progrés i una imatge central per diferenciar la fase. A la part inferior hi apareixen les icones de play, pausa i reinici, que més endavant es van substituir per botons amb text per millorar la claredat.

3. Disseny de la interfície

La interfície està pensada per encaixar en un popup de 300 × 150 píxels. La part superior està ocupada pel canvas de p5.js, on es dibuixen el rellotge orbital i l’arc de progrés. Just a sota hi ha el text amb la fase actual (Treball, Descans curt, Descans llarg) i a la part inferior hi ha tres botons: Iniciar, Pausa i Reinicia.

Els colors de les òrbites i de l’arc canvien segons la fase per donar un feedback visual ràpid. Quan canvia la fase també es mostra una imatge diferent al centre del rellotge (icona de treball, descans curt o descans llarg) i es reprodueix un so curt.

Figura 2. Vista del popup en fase de treball, amb el rellotge orbital, la imatge de fase i els botons “Iniciar”, “Pausa” i “Reinicia”.

4. Funcionament intern i lògica

El temporitzador segueix l’estructura clàssica de la tècnica Pomodoro: 25 minuts de treball, 5 de descans curt i 15 de descans llarg cada quatre cicles. La funció setPomPhase(newPhase) s’encarrega de configurar cada fase (durada, colors, so i imatge central) i de posar en marxa el comptador.

En cada fotograma de p5.js, la funció updatePomodoro() calcula el temps transcorregut i obté un percentatge de progrés entre 0 i 1. Aquest valor s’utilitza per dibuixar l’arc exterior del rellotge i, quan arriba a 1, es crida nextPomPhase() per passar automàticament a la fase següent. Paral·lelament, els punts orbitals continuen mostrant l’hora real del sistema, de manera que el rellotge combina informació funcional i estètica.

Un dels punts més delicats va ser la gestió de la pausa i la represa. Per resoldre-ho, vaig introduir la variable pomPausedElapsed, que acumula el temps ja consumit de la fase. Quan es reprèn el temporitzador, aquest valor es té en compte per no tornar a començar des de zero.

5. Persistència d’estat amb storeItem() i getItem()

Com que les popups d’extensions Manifest V3 es destrueixen quan es tanquen, era necessari guardar l’estat del Pomodoro per no perdre el progrés. Per això he utilitzat storeItem() i getItem() de p5.js, que internament fan servir localStorage.

• savePomodoroState() desa un objecte amb la fase actual, la durada de la fase, el temps acumulat, el nombre de cicles i si el temporitzador està en marxa o no. També guarda un lastUpdate per saber quan es va fer l’últim guardat.

• loadPomodoroState() es crida al setup() i recupera aquest objecte. Si el temporitzador estava actiu, calcula quant de temps real ha passat des de llavors i ajusta el comptador perquè continuï on tocaria.

Gràcies a aquest mecanisme, si tanco la popup en mig d’una sessió i la torno a obrir al cap d’uns minuts, el temps està actualitzat i la fase continua sense haver-se de reiniciar manualment.

6. Problemes trobats i solucions

Al llarg del desenvolupament han aparegut diversos problemes interessants:

• Compatibilitat d’àudio amb Manifest V3:
  Inicialment vaig provar d’utilitzar la biblioteca p5.sound, però dins d’una extensió Firefox amb Manifest V3 no es carregava correctament. La solució va ser substituir-la per l’API nativa d’HTML5 (new Audio()), que funciona bé en el context del popup.

• Pausa i represa del temporitzador:
  A les primeres versions, en pausar i tornar a iniciar, el temporitzador es desquadrava o es reiniciava. Ho vaig solucionar desant el temps acumulat en pomPausedElapsed i recalculant el temps transcorregut a cada represa.

• Sincronització del temps en reobrir la popup:
  Com que millis() es reinicia cada vegada que es carrega el canvas, calia saber quant temps real havia passat des de l’últim guardat. Per això guardo també lastUpdate i, en carregar l’estat, calculo la diferència amb el millis() actual.

• Espai limitat al popup:
  Treballar amb 300 × 150 píxels obliga a simplificar molt el disseny. He ajustat la mida de les òrbites i dels botons per evitar solapaments i mantenir una jerarquia visual clara.

7. Reflexió i aprenentatges

Aquest repte m’ha ajudat a entendre millor com funcionen les extensions de navegador i quines són les diferències entre una pàgina web normal i un popup d’extensió. També he après a treballar amb l’API de localStorage a través de p5.js, i a pensar en termes d’estat persistent, no només de variables en memòria.

A nivell de disseny, m’ha servit per veure com un projecte més “artístic” (el rellotge creatiu) es pot convertir en una eina funcional afegint-hi controls, fases i persistència. El procés d’anar ajustant colors, sons i animacions fins que el feedback fos coherent ha estat molt útil per entendre la importància de la UX, fins i tot en interfícies tan petites com una popup.

De cara al futur, m’agradaria afegir funcionalitats com ara estadístiques de sessions completades, notificacions del navegador quan s’acaba una fase, i la possibilitat de personalitzar les durades dels intervals. Tot i això, considero que la versió actual compleix els objectius del repte i proporciona una bona base per seguir evolucionant el projecte.

• Repositori GitHub:
  https://github.com/Javime85/rellotge-orbital-pomodoro

Introducció i context

Aquest projecte forma part de l’activitat R3 on es proposa transformar el rellotge creatiu de la R1 en una extensió funcional del navegador Firefox.

L’objectiu era aprofitar l’animació creada i convertir-la en una eina útil relacionada amb el temps mentre es mantenia la coherència visual i aportant funcionalitat real.

Per aquest motiu he desenvolupat un temporitzador de treball i descans (tipus pommodoro) integrat dins la extensió web feta amb Manifest V3.

Concepte de l’extensió

L’extensió és una combinació entre temporitzador Pomodoro i rellotge visual abstracte, on l’usuari pot iniciar períodes de treball i descans. I una vegada iniciat pot pausar, aturar o reiniciar. També es pot veure el temps restant o el temps excedit en el cas que finalitzi la sessió i no s’aturi el temporitzador. L’estat del temps es manté tot i que es tanqui el popup gràcias a localStorage.

Esbossos del procés i wireframes

Aquí veiem la idea inicial abans de començar el codi.

Aquí les proves de color quan els botons estan actius, tant en mode dia com en mode nit.

També era important la mida i la posició del temps excedit una vegada acabat el timer.

I finalment, es va desenvolupar l’opció de que l’usuari pogués editar el temps que volia en cada sessió en el panell lateral del navegador.

La interfície

La interfície del popup está formada pel rellotge abstracte, sis botons SVG (WORK, REST, PLAY, PAUSE, STOP i RELOAD), un text digital que mostra el temps de sessió i un secundari que mostra el temps excedit (si cal). S’ha estilitzat tot fent un CSS extern.

Funcionament tècnic

L’extensió utilitza p5.js per al dibuix del rellotge i les animacions, el càlcul del temps  i l’ús de storeItem() i getItem() per guardar l’estat en el storage. Es fa servir Vanilla JavaScript per gestionar els botons i l’àudio (donat que p5.sound era bloquejat per l’extensió) i es fa servir el localStorage perquè l’usuari pugui editar els temps del timer. I finalment Manifest V3 per gestionar l’extensió.

Documentació del procés i dificultats

Es van trobar problemes amb Content Security Policy, incompatibilitat de p5.sound CDN amb manifest, la substitució de millis() pel temps absolut del sistema, la col·locació dels botons a sobre del canvas i la consistència del temps excedit.

De tot aixó es van extreure aprenentatges com: com funciona realment una extensió de navegador, com persisteix l’estat a localStorage i organitzar un projecte amb canvas p5.js i DOM alhora.

La proposta de millora

Com a proposta de millora en poso dos:

Registre d’activitats

Crear un historial de treball i descans, guardant cada sessió en un array a localStorage, amb la possibilitat de visualitzar estadístiques.

Icona dinàmica

Fer una icona de l’extensió que canvïi segons l’estat del temporitzador.

Enllaç a Github

https://github.com/elecinas/time-rings-clock-extension