En este tutorial les enseñaremos a como realizar un modelo prototipo de aplicación de web con un sistema de diseño Material Design, en donde se debe de iniciar el conteo para realizar la técnica de estudio Pomodoro, además de poder personalizar el resultado final de una mezcla de ruidos y sonidos ambientales, que se estará reproduciendo de fondo. Todo programado en p5.js.

En nuestro caso, se hizo uso del editor de código online CodeSandbox (https://codesandbox.io/) para la programación de nuestro modelo prototipo.

Introducción

El proyecto nace y se fundamenta en resolver una problemática, la cual consiste en que se ha detectado que el tiempo que dedican la mayoria de los jovenes para estudiar, no es de la mayor calidad posible, y la situación se ha convertido en algo mas relevante y critico, con la modalidad de estudio virtual que se ha implementado a causa del COVID-19, por lo tanto lo jovenes estudiantes son mas suceptibles a distracciones y a un cansancio mas extenso.

Se realizaron investigaciones de antecedentes , o paginas web similares que utilizarán la técnica Pomodoro, pero en su mayoría , no presentaban la opción de poder personalizar un sonido final (Mezcla de ruidos y sonidos ambientales), por lo que no generaba un ambiente mas relajante , y menos distractor para el usuario.

A su vez , se tuvo en cuenta, que no simplemente importaba un buen diseño , o una buena funcionalidad, o quizas solo la personalización de sonido, sino que lo mas relevante era entregar una gran experiencia al usuario , haciendo una integración de un diseño moderno, una buena funcionalidad de la técnica Pomodoro , y una buena mezcla de sonidos y ruidos para que el usuario se sienta inmerso en un ambiente adecuado para fomentar el estudio sin distracciones.

Step 1: Creación De Cuenta Y Proyecto En CodeSandbox

Para iniciar con el proceso de desarrollo , nos crearemos una cuenta en CodeSandbox
(https://codesandbox.io/signin), un editor de código en linea.

Al hacer uso del link anteriormente dado, nos deberá desplegar una ventana como se muestra en este paso, escogeremos la forma de creación de cuenta que queramos (Google Account o GitHub), y procederemos a iniciar sesión.

Una vez iniciemos sesión nos dirigiremos a donde dice "New Sandbox", y buscamos "JS Vanilla" dentro de las plantillas que se nos muestran.

Step 2: Importar Librerias Necesarias

Una vez creado nuestro proyecto empezaremos importando la libreria, esta libreria es Material Designs Lite (MDL) (Material Design Lite references) , la cual nos posibilita una gran variedad de material o un gran conjunto de componentes (botones,menus...) y plantillas para ser usado en nuestro proyecto.

Step 3: Subir Sonidos Ambientales Y Ruidos (Recursos )

Una vez hemos importado la libreria , estamos listos para subir nuestros audios a utilizar , para esto podemos crear una carpeta (ver imagenes asociadas a este paso ) desde la esquina superior izquierda de nuestro proyecto, la nombraremos en nuestro caso "archivos", una vez la carpeta está creada , podemos empezar a arrastrar audios desde nuestra computadora a la carpeta , y esperaremos a que sean subidas a nuestro proyecto.

Step 4: Cargar Los Sonidos Ambientales Y Los Ruidos

Una vez todos nuestros archivos están en nuestra carpeta, están listos para ser utilizados en nuestro proyecto , por lo que ahora , nos debemos de dirigir a la esquina superior derecha , y veremos un icono de tres (3) puntos, daremos clic ahí ,y después clic en storage management , veremos nuestros archivos subidos; simplemente daremos un clic sobre cada archivo que hemos subido , lo cual nos abrirá una nueva ventana por cada archivo subido, nos interesa el link de esa nueva ventana , por lo que copiaremos el link de cada una de las ventanas.