Add on Firefox. Reloj creativo

Asignatura 20.671 - Desarrollo de aplicaciones interactivas - Aula 1
Pública

Creación de un add-on de reloj animado para Firefox

He desarrollado un add-on para Firefox que muestra un reloj animado basado en visualizaciones de datos temporales. El proyecto utiliza p5.js v2 y está construido siguiendo los requisitos de Manifest V3. Esta versión es una adaptación refinada de la propuesta presentada en la primera entrega de la asignatura, originalmente diseñada para pantalla completa.

En la versión actual he mejorado el contador de tiempo, incorporando la visualización de milésimas y permitiendo su modificación mediante un slider que altera la velocidad temporal. También he añadido una ventana modal que ofrece información contextual sobre el proyecto, ampliando así la claridad y la accesibilidad de la interfaz.

Concepto inicial

La idea central del proyecto era aplicar las Leyes de la Simplicidad de John Maeda. En particular, resultaban fundamentales dos principios: “restar lo obvio y añadir lo significativo” y “organizar, agrupar y jerarquizar” para reducir la sensación de complejidad (1). Aunque estos criterios ya se habían trabajado en la primera entrega, la reducción del lienzo a 300 × 150 píxeles obligaba a reconsiderar cuidadosamente qué elementos mantener, cuáles eliminar y cómo reorganizar la interfaz sin perder legibilidad ni intención comunicativa.

Para ello realicé una serie de bocetos exploratorios que me permitieron limpiar la composición, definir la jerarquía visual y asegurar que cada componente aportaba significado dentro del espacio extremadamente limitado.

Estructura técnica

El proyecto cuenta con un manifest.json en V3 y un sketch.js que son documentos imprescindibles para la creación de un addon. Además, utiliza la librería P5 y una fuente externa y un index.html con elementos DOM aparte del canvas.

reloj/
├── manifest.json          # Configuración del add-on
├── index.html             # Popup de la extensión
├── sketch.js              # Lógica del reloj con p5.js
├── style.css              # Estilos y variables CSS
├── assets/
│   ├── icon.png
│   └── Barlow/            # Fuentes custom
└── libraries/
    └── p5.min.js          # Librería p5.js

Destacables técnicos

Cargas asíncronas en p5.js v2

La versión 2 de p5.js cambió cómo se cargan recursos. En vez de usar  preload(), utilicé async/await en el setup():

async function setup() {
  try {
    f = await loadFont("assets/Barlow/Barlow-Regular.ttf");
    f_bold = await loadFont("assets/Barlow/Barlow-Bold.ttf");
  } catch (err) {
    console.error("Error cargando fuentes:", err);
  }
}

Manifest V3 y CSP estricta

Firefox con Manifest V3 requiere una Content Security Policy muy restrictiva. Todo el código JavaScript debe estar en archivos externos, sin inline scripts:

"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'"
}

Duda relacionada al manifest:
¿no es redundante conceder permisos explícitos en el manifest al utilizar la función nativa de P5?
"permissions": [
"storage"
],

Funcionalidades añadidas

Modo oscuro persistente

Implementé un botón con forma de luna en la esquina inferior derecha. El estado se guarda usando las funciones nativas de p5.js:

storeItem("modoOscuro", modoOscuro);
modoOscuro = getItem("modoOscuro") ?? false;

Esto usa localStorage internamente, así que la preferencia se mantiene al cerrar y reabrir el popup.

Control manual de la hora

Añadí un botón de reloj que despliega dos sliders: uno para las horas y otro para los minutos. Esto permite «viajar en el tiempo» y ver cómo se vería el reloj en cualquier momento del día. El botón de reset (↻) vuelve a la hora actual del sistema.

Modal informativo

Un botón «?» abre un modal con contexto histórico sobre la Declaración Balfour. Quería que el reloj no fuera solo decorativo, sino que invitara a reflexionar sobre la usurpación de la identidad Palestina.

Detalles visuales

Paleta de colores: Definida en variables CSS (:root) y leída desde JavaScript con getComputedStyle().

Instalación en modo desarrollo

  1. Abrir Firefox y navegar a about:debugging
  2. Clic en «This Firefox»
  3. Clic en «Load Temporary Add-on…»
  4. Seleccionar el archivo manifest.json

El add-on aparece en la barra de herramientas. Al hacer clic, se abre el popup con el reloj animado.

Propuesta de mejoras

Geolocalización del dispositivo

Integrar la geolocalización del dispositivo para poder aplicar, mediante una API como SunCalc.js, o la API del navegador, la hora exacta de la puesta de sol en la ubicación real del usuario. De esta manera, la altura de la zona verde del reloj se ajustaría automáticamente según la luz solar disponible en cada momento. Además, podría añadir un botón adicional para cambiar la visualización a la hora local de Palestina y recalcular la puesta de sol utilizando las coordenadas obtenidas a través de la misma API, adaptando así el comportamiento del reloj a la hora real de Palestina.

Modo oscuro o claro automático

Cambio automático entre modo claro y modo oscuro según la hora del día, aunque se siga manteniendo la funcionalidad manual.

Addon fijo

Actualmente, se cierra el addon cuando clicas fuera de él. Sería interesante poder configurarlo para que se mantenga fijo. Según investigación, se podría hacer una ventana flotante fuera del addon porque por defecto no dejaría que el addon permaneciera abierto.

Conclusiones

Este proyecto me permitió explorar:

  • Las restricciones de seguridad de Manifest V3
  • Persistencia de datos con p5.storage
  • Integración de p5.js con elementos del DOM (sliders, modales)

El resultado es un reloj funcional pero también conceptual: cada vez que lo abro, me recuerda que el pueblo palestino lleva más de 39.000 días sin el reconocimiento de la identidad robada.

Repositorio: https://github.com/dimecris/addon-reloj

Licencia: CC BY 4.0

Screenshot

(1) Maeda J. The Laws of Simplicity. Cambridge: MIT Press; 2006.

Bibliografía

Entrega de la actividad R3

Publicaciones Similares

Reloj Anagnórisis — proceso de trabajo

Reloj Anagnórisis — proceso de trabajo

20.671 – Desarrollo de aplicaciones interactivas – Aula 1
Pública

Proyecto: Visualización del tiempo con p5.js para una fachada digital.
Obra: https://editor.p5js.org/dimecris/full/xaN7oUCzb
Planteamiento
El reto consistía en representar el paso del tiempo sin usar un reloj convencional, transformando la medición en una experiencia visual y simbólica capaz de generar atención y reflexión en el espacio público….

Detectar rostros y expresiones en p5.js

Detectar rostros y expresiones en p5.js

20.671 – Desarrollo de aplicaciones interactivas – Aula 1
Pública

Ver en p5.js
https://editor.p5js.org/dimecris/full/1cvO0N9kT
Repositorio Github

https://github.com/dimecris/halloween
[Ver proyecto en vivo](https://dimecris.github.io/halloween/)

Estudio comparativo de librerías de detección de rostro: del cálculo manual al poder de los Blendshapes
¿Qué conviene usar para detectar gestos faciales,…

Deja una respuesta