Muy buenas noches a tod@s,

Os presento mi propuesta, se trata de una aplicación que gestiona el proceso de Batch Cooking (preparar comidas para toda una semana en una tarde). Os cuento un poco la historia:

La idea surgió a partir de un proyecto que empecé con una amiga, se que es un tema que tiene mucha utilidad y la verdad es que crear una aplicación móvil me parece una integración muy útil. Asi pues también estuve mirando las aplicaciones que ya existían en la Play Store y ninguna tenia todas las funcionalidades que buscaba.

Primeros bocetos de la idea:

Documentación de gran ayuda sobretodo el uso de integraciónes y plugins ya existentes:

• Capacitor Core — https://capacitorjs.com/docs
• @capacitor/haptics — https://capacitorjs.com/docs/apis/haptics
• @capacitor/camera — https://capacitorjs.com/docs/apis/camera
• @capacitor/motion — https://capacitorjs.com/docs/apis/motion

El github del proyecto es el siguiente lo podeis descargar y probar, unicamente necesitais los comandos de npm install y npm run dev para tener el proyecto listo.

Link github: https://github.com/Ramonet02/PR1_Batch_Cooking.git

Autor: Nathalia Padrón

Knit Tracker App

compilada con Capacitor, el web stack utilizado fue Javascript y Vite.js empaquetada en una aplicación Android con Capacitor.

Para el Reto 1 he configurado y compilado una Aplicación Android con Capacitor. Se llama KnitTracker y es una aplicación para gestionar proyectos de tejido. Cuando se tejen muchos proyectos a la vez, es difícil tener una estructura para llevar el tiempo invertido en cada proyecto y a su vez es difícil conseguir un lugar en común donde guardar información de dónde me encuentro en el proyecto. Esta App ayuda gestionar proyectos de tejido en paralelo. Una unidad usada para leer patrones es el número de la vuelta, en físico se utilizan contadores de punto, pero a menudo es fácil perderlos y ésta App te permite accesar esa información.

Knittracker habilita un contador de vueltas que la persona va incrementando a medida que avanza en la labor, el App guarda en Local Storage esta información. Otra función es la de cronometrar el tiempo invertido en el proyecto, permite que actives el cronómetro cada vez que te sientes a tejer en un proyecto específico. El App permite asignar milestones por cada proyecto que a lo largo del tiempo a medida que se cumplen suman a un porcentaje de progreso. Con cada milestone cumplida el usuario recibe un mensaje celebratorio.

Funcionamiento

Aqui encuentras el link a mi proyecto en Github: https://github.com/NattyDCI/capacitor_app

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/

—

Índice

1. Introducción y objetivo
2. Decisiones técnicas librería de reconocimiento
3. Arquitectura y estructura del código
4. Decisiones estéticas
5. Flujo de desarrollo

1.     Introducción y objetivo

En esta práctica, se ha desarrollado una aplicación de escritorio interactiva con el objetivo de fomentar buenos hábitos de salud dental en niños. La idea principal es la siguiente: el usuario debe mantener la boca abierta el máximo tiempo posible, simulando el gesto de tener la boca abierta mientras un dentista o mientras se realizan ejercicios de limpieza dental.

La aplicación se ha construido con p5.js para la parte visual y de partículas, MediaPipe FaceLandmarker para la detección facial en tiempo real, y Electron para empaquetar todo como una aplicación de escritorio.

2.     Decisiones técnicas

Dentro de las diferentes opciones se planteó utilizar las siguientes:

• js (la sugerida por el enunciado)
• MediaPipe Task Vision código abierto de Google

Finalmente se escogió MediPipe por dos razones de peso una de ellas abordando las capacidades tecnológicas del modelo y la otra de capacidad de trabajo. Y es que la primera son los 478 puntos de referencia que MediaPipe coge de la cara lo que da un grado mucho mayor de precisión y la segunda es la capacidad de delegar el trabajo a la CPU creando programas mucho más factibles a nivel de rendimiento.

3.     Arquitectura y estructura del código

Para no entrar en detalle muy técnico voy a indicar de forma general la estructura de este código:

• Tenemos el archivo man.js que es la entrada de Electron quien gestiona las ventanas, permisos y arranca el proyecto como tal.
• html carga la HUD es decir la parte visual y los diferentes scripts.
• css solicitado por el enunciado independiente y desarrollado por nosotros, con fuentes de Google fonts de Halloween, por ejemplo.
• js y particleSystem.js gestionan los estilos, timings y condicionales de las partículas
• js se encarga de definir las constantes globales, como por ejemplo el parámetro de obertura de boca.

4.     Decisiones estéticas

La paleta de colores y el estilo del proyecto se han establecido en base a diferentes referencias que he encontrado por internet, de todas estas he localizado los colores comunes que son los siguientes y los que se han utilizado finalmente en el proyecto.

1. Malva / Violeta (#6B2D7B, #4A1D5C) — color principal de fondo y elementos de la UI
2. Naranja dorado (#E8A030) — color secundario, presente en el HUD y en los elementos de calabaza.
3. Crema (#FFF5E6) — color base del texto y de los fantasmas, aporta calidez y contraste suave.
4. Coral (#E85D3A) — usado en botones y acentos, da vida y energía a la interfaz.
5. Amarillo (#F5C518) — para los detalles brillantes y las chispas.

5. Flujo de desarrollo

Durante la creación de este proyecto se ha ido iterando en diferentes ideas y conceptos para acabar teniendo una propuesta completa como la de ahora.

Por ejemplo, en un principio se propuso la idea de crear una serie de minijuegos llegados a un porcentaje de progreso, estos minijuegos estaban pensados para utilizar otras características de MediaPipe como son detectar el movimiento de los ojos o las diferentes formas que podía crear la boca. Esto en un inicio me pareció una buena idea, pero luego vi que rompía con el principio de la idea propuesta y la desestimé.

Otra idea que tuve y que si que esta en la propuesta final es el uso de recompensas visuales para tener al usuario activo y animarle a seguir con la actividad. A este recurso le llamo “anillos dinámicos” y funciona de la siguiente forma: se trata de un círculo que decrece alrededor de la boca del usuario y que al hacerse completamente pequeño explotan muchas partículas dando ese subidón para seguir jugando.

6. Enlaces

GitHub: https://github.com/Ramonet02/PEC-2.git

p5.js Editor: p5.js Web Editor | Halloween smiles

Este proyecto se ha desarrollado en local, FaceMesh y los archivos multimedia requieren servidor local para funcionar correctamente. Por este motivo, no se ha utilizado el editor online de p5.js.