Autora: Nathalia Carolina Padrón

Proyecto: Desarrollo de una extensión para Firefox que registra y muestra el tiempo que le dedicas a cada sitio web

Introducción

En este proyecto se ha desarrollado una extensión para el navegador Mozilla Firefox con el objetivo de mejorar la experiencia de navegación del usuario. A lo largo del trabajo se han abordado distintas fases, desde la idea inicial hasta la implementación y pruebas finales.

Concepto

Una extensión de navegador es un pequeño software que añade funcionalidades adicionales a un navegador web. En este caso, la extensión desarrollada permite ampliar las capacidades de Firefox, adaptándolo a necesidades específicas del usuario.

Finalidad y uso

La aplicación tiene como finalidad principal ayudar al usuario a tomar conciencia del tiempo que dedica a distintas páginas web durante su navegación diaria.

A diferencia de otras herramientas de control, esta extensión no limita el uso ni interrumpe la experiencia, sino que ofrece una visualización constante y accesible del tiempo transcurrido.

Entre sus principales casos de uso se encuentran:

• Controlar el tiempo dedicado a tareas de trabajo o estudio
• Detectar el uso excesivo de páginas de entretenimiento o redes sociales
• Analizar hábitos de navegación a lo largo del día
• Consultar de forma rápida el tiempo acumulado mediante el registro diario

Estructura técnica del proyecto

La extensión ha sido desarrollada utilizando tecnologías web como HTML, CSS y JavaScript, creando una interfaz sencilla e interactiva dentro del navegador Mozilla Firefox.

El popup de la extensión está diseñado con HTML y CSS, mientras que JavaScript se encarga de actualizar dinámicamente los elementos del DOM para mostrar información en tiempo real. La interacción con el usuario se realiza mediante botones que permiten reiniciar el tiempo registrado y consultar el historial de actividad diaria.

Para la gestión de datos, se utiliza el sistema de almacenamiento local del navegador (browser.storage.local), donde se guarda el tiempo de uso organizado por día y dominio. Esto permite mantener la información incluso después de cerrar el navegador, facilitando su recuperación y visualización en cualquier momento.

A nivel técnico, el proyecto se estructura en varios archivos con funciones específicas:

• manifest.json, que define la configuración y permisos de la extensión
• background.js, encargado del seguimiento del tiempo y la lógica principal
• popup.html / popup-v2.html, que contiene la interfaz visible para el usuario
• style.css, que define el diseño visual
• popup.js, que gestiona la interacción y actualización de datos
• popup-sketch.js, que implementa la visualización gráfica mediante la librería p5.js

Esta organización modular permite separar la lógica, la interfaz y la visualización, facilitando el mantenimiento y la escalabilidad del proyecto.

Enlace al repositorio de Github

https://github.com/NattyDCI/firefox_extension_app

Pdf del proyecto

El Dentista Oveja

Autora: Nathalia Carolina Padrón Bavutti
Titulo: Aplicación Odontológica, «El dentista Oveja»

Preview

Página en vivo

Click para acceder a la Versión Live

Github:https://github.com/NattyDCI/ml5-facemesh-project

Sobre el proyecto

Este proyecto explora experiencias interactivas para la primera infancia utilizando detección facial en tiempo real para fomentar hábitos de higiene a través del juego.

En el laboratorio HealthySmile, nos enfocamos en diseñar experiencias digitales que combinan aprendizaje, emoción e interacción.

Concepto y diseño del personaje

– La oveja se percibe como un animal suave, tranquilo y amigable, ideal para niños de 2 a 4 años.
– Sus formas simples funcionan bien en filtros faciales.
– Evoca ideas de limpieza y cuidado (lana blanca, suavidad).
– La estética de Halloween se plantea como un “terror seguro”, evitando generar miedo.
– Su diseño ligeramente extraño (cicatriz, herida) genera curiosidad sin rechazo.

La oveja funciona como un puente entre la fantasía y el aprendizaje.

Bocetos
Este fue mi boceto inicial

⚙️¿Cómo funciona?

1.Pantalla de carga

Una barra de progreso se completa mientras se cargan los recursos.

2. Activación de cámara

El usuario debe activar la cámara para comenzar la experiencia.

3. Interacción facial

– Aparece un filtro facial de oveja con temática de Halloween.

Cuando el niño/a abre la boca:

– Aparecen partículas similares al jabón
– Elementos decorativos se animan (dientes y calabazas)
– Salen burbujas de la boca

4.Sistéma de feedback

Cada 5 segundos de interacción correcta:

– Aparece un mensaje motivador
– Un temporizador visual se llena y se vuelve verde
– Un icono de “pulgar arriba” refuerza el logro
– Esta burbuja fue pensaba principalmente como feedback visual, ya que los niños aún no leen.

5.Fin de interacción

Cuando se cierra la boca:

– Las animaciones se detienen y las burbujas desaparecen.

Acerca de la implementación
He desarrollado este proyecto utilizando p5.js y ml5.js.
Con p5.js gestiono toda la parte visual e interactiva, incluyendo el renderizado, la interfaz, las animaciones y el uso de WEBGL para trabajar con una malla facial.

Para la detección facial en tiempo real utilizo FaceMesh de ml5.js, que me permite identificar puntos clave del rostro. A partir de estos datos, detecto cuándo la boca está abierta y activo una lógica interactiva basada en tiempo, generando feedback visual como mensajes, contador y animaciones de burbujas.

Además, utilizo una malla facial triangulada con coordenadas UV para aplicar una textura que se adapta al movimiento y orientación de la cara en tiempo real.

En conjunto, combino visión por computador y gráficos interactivos para crear una experiencia educativa y gamificada.

Tecnología

– ml5.js (FaceMesh) – para reconocimiento facial en tiempo real
– p5.js – for visualizaciiones creativas y sketches
– Electron – para empacar el proyecto como una plataforma para uso en Desktop y Mobile

Recursos

FaceMesh (ml5.js)

– https://learn.ml5js.org/#/reference/facemesh

Utilizado para la detección de puntos faciales en tiempo real.

Learning Resource (Coding Train)

– Daniel Shiffman – The Coding Train

Este tutorial fue fundamental para implementar FaceMesh.

—

Technologies Used Tecnologías utilizadas

– p5.js 1.9.x
– ml5.js 1.2.2

– https://beta.p5js.org/
– https://p5js.org/reference/

—

Para el desarrollo de este reloj me inspiré en la escuela de la Bauhaus, tanto en sus elementos gráficos geométricos como en su paleta de colores primarios. Me interesa cómo este movimiento combina arte y funcionalidad, utilizando formas simples y colores contundentes no solo como recurso estético, sino como herramienta de comunicación.
La geometría y la paleta cromática aportan un fuerte atractivo visual, pero también favorecen una lectura clara e intuitiva del tiempo. Cada elemento cumple una función concreta dentro del sistema.

Sistema visual del tiempo
El reloj representa cada unidad temporal mediante capas circulares que interactúan entre sí.

Segundos
Los segundos están representados por una circunferencia roja que crece progresivamente hasta completar el perímetro del reloj. Una vez finaliza el ciclo, comienza el siguiente minuto.

Minutos
El minuto se visualiza como un círculo interior que se va reduciendo gradualmente, como si se consumiera. Cuando transcurre una hora completa, el fondo se reinicia. Esta representación funciona casi como un “pastel” temporal que se agota visualmente, facilitando la percepción de cuánto tiempo queda.

Horas
La hora se distingue con claridad, ya que apunta a su posición como en un reloj tradicional de agujas. Sin embargo, introduce una variación cromática: el color cambia según la hora del día, reforzando la dimensión visual y expresiva del diseño.

Interacción y experimentación visual
Existe un segundo elemento circular que acompaña el movimiento de los segundos. Para este recurso utilicé blend mode, generando superposiciones cromáticas cuando se cruza con la capa de los minutos. El resultado produce combinaciones de color inesperadas que evocan pequeñas composiciones pictóricas, casi como micro-cuadros inspirados en la Bauhaus. Esta decisión introduce una dimensión más artística sin perder funcionalidad.

Diseño y conciencia del tiempo
Más allá de su valor estético, el reloj plantea una reflexión sobre la percepción temporal.
Se ha estudiado que a muchas personas con TDAH (ADHD) les resulta complejo estimar la duración de las tareas o mantener conciencia del paso del tiempo. La representación visual progresiva —especialmente el minuto como elemento que se “consume”— puede servir como guía intuitiva para comprender cuánto falta para completar una hora.
En este sentido, el proyecto está concebido como una obra artística, pero también podría adaptarse como reloj de muñeca funcional.

Proceso

Mi boceto inicial:

Ver Enlance al proyecto