¡Hola, Bienvenido!

En el presente Instructable les explicaremos como desarrollamos un modelo prototipo de aplicación web, el cual contará con un cronometro para aplicar la técnica de Pomodoro y sonidos los cuales se podrán mezclar a gusto del usuario. Este proyecto fue desarrollado en Codesandbox.io con HTML, CSS y JavaScript.

Para este proyecto nos plantean un problema que sufren muchos estudiantes de Ingeniería Multimedia en la Universidad Autónoma de Occidente con la nueva modalidad de presencialidad virtual que se ha adaptado a raíz de la emergencia sanitaria provocada por el actual coronavirus SARS-CoV-2 (COVID- 19), el cual consiste en que el tiempo de estudio de los estudiantes no se desarrolla con la mayor calidad posible a causa de las actividades competitivas que se desarrollan mientras se estudia y el cansancio por sesiones de estudio demasiado extensas.

Es por esto, que nos solicitan desarrollar un modelo prototipo de aplicación web para que los estudiantes puedan aplicar la técnica de Pomodoro y así optimizar sus tiempos .

Antes de comenzar, debemos tener muy claro en qué consiste dicha técnica: A finales de los años 1980, el italiano Francesco Cirillo cuando era estudiante universitario inventó un método de estudio a cual divide el estudio en 25 minutos de actividad, seguidos de 5 minutos de descanso, y cada cuatro pomodoros 15 minutos de descanso en el lugar de 5. Esta división del tiempo de estudio permite que los tiempos de descanso se utilicen para: (i) atender las actividades competitivas, (ii) mover el cuerpo y (iii) tomar la distancia por un momento de los temas de estudio. Es importante que el estudiante retome la actividad cuando se acaba el tiempo de descanso; además de eliminar las actividades competitivas mientras se encuentra estudiando (desactivando las notificaciones por ejemplo).

Franchesco aplicaba esta técnica usando un cronómetro de cocina en forma de tomate, es por esto que nombra Pomodoro a este método (siendo Pomodoro, Tomate en italiano).

Referencias:

Para este desarrollar el modelo, tomamos referencias de trabajos relacionados y tutoriales como https://pomodoro-tracker.com/?lang=es , https://tomato-timer.com/ , https://pomofocus.io/ y https: / /www.youtube.com/watch?v=5Fo_mWd1h-Q los cuales nos permitieron desarrollar el reloj de Pomodoro de una manera más optima y para la mezcla de sonidos ambientales tomamos como referencia https://www.noisli.com/

Step 1: Crea Una Cuenta En CodeSandbox

Desde el navegador Web acceda a la página de Codesandbox (https://codesandbox.io/)
Iniciar sesión en el botón Iniciar sesión en la parte superior izquierda.
Autoriza el uso de CodeSandbox desde GitHub mediante la ventana emergente.
Crea un nombre de usuario y termina de completar la información

Step 2: Crea Un Nuevo Proyecto

Dentro de CodeSandbox crea un nuevo proyecto, presionando en el botón + New Sandbox
Escoge la plantilla de Vanilla

Step 3: Importe Los Audios a Utilizar

Haz click en el folder llamado New directory que se encuentra ubicado en la barra izquierda.
Asígnele un nombre relacionado con el material que subirá (en este caso "aud")
Dirígete a la barra superior izquierda y seleccione la flecha apuntando hacia arriba con el nombre de Upload files
Cargue el archivo de deseado en la carpeta creada

Extra tip: Si se necesita el URL del archivo puede realizar lo siguiente:

Haga click en el menú desplegable de la esquina superior derecha.
Presione doble click sobre la imagen que subió anteriormente. Esta acción abrirá una nueva pestaña con la imagen cargada.
Copie la URL de la imagen presente en la pestaña nueva que se abrió, desde la barra de direcciones de su navegador Web

Step 4: Modificar El Documento HTML

Modifique el documento HTML que trae por defecto por el siguiente con el nombre de Index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />

    <!-- Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <!-- My JS -->
    <script src="main2.js"></script>

    <!-- My CSS -->
    <link rel="stylesheet" href="style.css" />

    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/996973c893.js"></script>

    <!-- Google Font -->
    <!-- <link
      href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap"
      rel="stylesheet"
    /> -->

    <link
      href="https://fonts.googleapis.com/css2?family=Tangerine:wght@700&display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" type="text/css" href="styleAudio.css" />

    <title>Pomodoro App</title>
  </head>
  <body onload="template()">
    <div class="container">
      <!-- Heading -->
      <h1 class="text-center my-5 heading">Pomodoro Grupo-3</h1>
      <!-- Main Timer -->
      <div class="container timer">
        <div class="row">
          <div class="col-5">
            <h4 id="minutos"></h4>
          </div>
          <div class="col-2">
            <h4>:</h4>
          </div>
          <div class="col-5">
            <h4 id="segundos"></h4>
          </div>
        </div>
      </div>

      <!-- Finished Message -->
      <div class="my-5"></div>

      <!-- Start Button and reset button-->
      <div class="conatiner d-flex justify-content-center my-5">
        <button id="play-btn" class="btn" onclick="accionarBoton()">
          <i id="play-btn-icon" class="fas fa-play fa-2x"></i>
        </button>
        <a href="index.html"><i class="fas fa-redo-alt fa-2x"></i></a>
      </div>
      <h3 id="done" class="text-center heading"></h3>
    </div>

    <p>RUIDOS</p>

    <div class="itemA">
      <div class="contenedor-principal">
        <button
          class="bAudio"
          alt=" "
          id="reproductor1"
          onclick="PlayMusic('audio1','reproductor1')"
        ></button>
        <audio src="audio/far.mp3" id="audio1" loop></audio>
        <div class="middle">
          <div class="slider-container">
            <span class="bar"><span class="fill"></span></span>
            <input
              id="slider1"
              class="slider"
              type="range"
              min="0"
              max="100"
              value="0"
            />
          </div>
        </div>
        <div class="titulo-audio">TITULO AUDIO</div>
      </div>
    </div>

    <p>SONIDOS AMBIENTALES</p>

    <script>
      window.onload(actualizarUI());
    </script>
  </body>
  <script src="control.js"></script>
</html>

Step 5: Modificar El Documento JavaScript

Haz click sobre el lapiz en el documento JS
Renombralo con "Main2.js"
Pon el siguiente código:

//Duración de tiempo de trabajo y descanso
var minutosDescansoSimple = 5;
var minutosDescansoLargo = 10;
var minutosTrabajo = 20;
var pomodorosParaDescansoLargo = 3;

//Varibles que guardan el tiempo
var segundosRestantes = 0;
var minutosRestantes = minutosTrabajo;
var pomodorosRestantes = pomodorosParaDescansoLargo;
var tiempoPermanenciaMensaje = 10000;

/**
 * Altera el factor de velocidad de ejecución del reloj
 * 1 = es la velocidad normal
 * 0.5 = es mas lento
 * 2 = es el doble de velocidad
 * 50 = es rapido como se venia trabajando para pruebas.
 */
var velocidad = 50;

//Guarda el estado del reloj
var estaCorriendo = false;
var estaTrabajando = true;
var primeraEjecucion = true;

//Variables que guardar el sonido
var sonidoClick = new Audio("./aud/click.mp3");
var sonidoCampana = new Audio("./aud/bell.mp3");
var sonidoSalida = new Audio("./aud/buzzer.mp3");

//Variable que usa setTimeout para identificar que proceso repetitivo
var setTimeoutVariable;

//Pinta el tiempo restante actual en la UI
function actualizarUI() {
  //Esta condicion corrige el problema de mostrar un solo dígito (ej: 09 por 9)
  if (segundosRestantes < 10) {
    document.getElementById("segundos").innerHTML = "0" + segundosRestantes;
  } else {
    document.getElementById("segundos").innerHTML = segundosRestantes;
  }

  if (minutosRestantes < 10) {
    document.getElementById("minutos").innerHTML = "0" + minutosRestantes;
  } else {
    document.getElementById("minutos").innerHTML = minutosRestantes;
  }
}

//Iniciar o pausar el reloj pomodoro
function accionarBoton() {
  //Se cambia el estado del botón
  actualizarBoton();
  //Suena el click
  sonidoClick.play();

  //Muestra el mensaje pertinente solo en la primera ejecución
  if (primeraEjecucion) {
    actualizarMensaje();
    primeraEjecucion = false;
  }

  //Continua o interrupe el reloj
  if (estaCorriendo) {
    //Detiene la ejecución repetitiva de decrementarTiempo()
    window.clearInterval(setTimeoutVariable);
    estaCorriendo = false;
  } else {
    /**
     * Ejecuta de manera repetitiva decrementarTiempo() según la velocidad del reloj
     * La velocidad es inversamente proporcional al tiempo de ejecución
     */
    setTimeoutVariable = window.setInterval(
      decrementarTiempo,
      1000 / velocidad
    );
    estaCorriendo = true;
  }
}

/**
 * Declaración de funciones auxiliares de accionarBoton()
 *  */

//Cambia el ícono del botón segun su estado cuando es presionado
function actualizarBoton() {
  if (!estaCorriendo) {
    document.getElementById("play-btn-icon").className = "fas fa-pause fa-2x";
    document.getElementById("play-btn-icon").style = "color: white;";
  } else {
    document.getElementById("play-btn-icon").className = "fas fa-play fa-2x";
    document.getElementById("play-btn-icon").style = null;
  }
}

/**
 * Para entender la función decrementarTiempo()se recomienda hacer una
 * prueba de escritorio llevando las variables de estado  y
 * los contadores de tiempo
 * * */

//Decrementa y restaura las unidades de tiempo y los contadores
function decrementarTiempo() {
  //Primero se verifican los segundos restantes
  if (segundosRestantes === 0) {
    //segundos ha llegado a cero entonces

    if (minutosRestantes === 0) {
      //segundos y minutos ha llegado a cero entonces

      //-------[Se modifican los contadores]-------
      //Se decrementan los pomodos restantes solo al final del descanso
      if (!estaTrabajando) {
        pomodorosRestantes -= 1;
      }
      //se reinicia el contador con los tiempos de descanso
      restablecerTiempo();
      //Se restablece el conteo de los pomodoros restantes
      if (pomodorosRestantes === 0 && !estaTrabajando) {
        pomodorosRestantes = pomodorosParaDescansoLargo;
      }

      //-------[Se actualizarn los estados]-------
      //se invierte el estado actual
      estaTrabajando = !estaTrabajando;

      //-------[Se accionan los eventos de la UI]-------
      //1. Suena el sonido pertinente
      reproducirSonido();
      //Se muestra el mensaje pertinente
      actualizarMensaje();
    } else {
      //se descuenta un minuto
      minutosRestantes -= 1;
      segundosRestantes = 59;
    }
  } else {
    //segundos NO ha llego a cero entonces
    segundosRestantes -= 1;
  }

  //Al finar es necesario reflejar los cambios de tiempo en la UI
  actualizarUI();
}

//Reproduce un sonido según el estado del reloj
function reproducirSonido() {
  if (estaTrabajando) {
    //Suena la campana como cuando salias al recreo en el colegio
    sonidoSalida.play();
  } else {
    sonidoCampana.play();
  }
}

//Reinicia el contador dependiendo del estado en que finalizó y los pomodoros restantes
function restablecerTiempo() {
  if (estaTrabajando) {
    if (pomodorosRestantes === 1) {
      //Se inicia el descanso largo
      minutosRestantes = minutosDescansoLargo;
    } else {
      //Se inicia el descanso normal
      minutosRestantes = minutosDescansoSimple;
    }
  } else {
    //Aquí restablece el tiempo de trabajo
    minutosRestantes = minutosTrabajo;
  }
}

//Muestra un mensaje al terminar un estado del reloj
function actualizarMensaje() {
  if (!estaTrabajando) {
    document.getElementById("done").innerHTML =
      "¡Tienes " + minutosRestantes + " minuto(s) para descansar! ";
    limpiarMensaje();
  } else {
    document.getElementById("done").innerHTML = "Ahora concentrate en trabajar";
    limpiarMensaje();
  }
}

//Limpia el mensaje instructivo de la UI
function limpiarMensaje() {
  window.setTimeout(function () {
    document.getElementById("done").innerHTML = "";
  }, tiempoPermanenciaMensaje);
}

Step 6: Escribir El Siguiente Código En El Style.css

Sobrescribe el style.css por:

/* Body background and font */
body {
  background: #272343;
  font-family: "Montserrat", cursive;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* font-style: italic; */
}

/* Main heading */
.heading {
  color: #bae8e8;
}

/* Countdown timer */
.timer {
  color: #ffffff;
  text-align: center;
  width: 20rem;
  height: 20rem;
  border: 5px solid #fff;
  border-radius: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.row {
  width: 100%;
}

/* remove the padding on the play button */
.btn {
  padding: 0;
}

/* play and reset icons */
.fa-play,
.fa-redo-alt {
  color: #e3f6f5;
  border: 2px solid transparent;
  padding: 1rem;
  border-radius: 2rem;
}

.fa-play:hover,
.fa-redo-alt:hover {
  color: #bae8e8;
  border: 2px solid #bae8e8;
  transition: 0.3s ease;
}

/* Dynamic class */
/* Make the message visible */
.show_message {
  display: block;
  padding: 1rem 0;
  color: #272343;
  background: #e3f6f5;
  border-radius: 0.5rem;
  transition: 0.5s ease;
}

Step 7: Crear Otra Hoja De Estilos .CSS

Haz click en la esquina superior izquierda sobre "New file"
Crea documento CSS con el nombre "styleAudio.css"
Pon el siguiente código:

.middle {
  width: 50%;
  max-width: 500px;
}
.slider-container {
  position: relative;
}
.slider-container .bar {
  position: absolute;
  z-index: 1;
  left: 2px;
  top: 7px;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background-color: #c6aee7;
  overflow: hidden;
}
.slider-container .bar .fill {
  display: block;
  width: 0;
  height: 100%;
  background-color: #6200ee;
}
.slider-container .slider {
  position: relative;
  z-index: 2;
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  outline: none;
  background-color: transparent;
}
.slider-container .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  background-color: #6200ee;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  box-shadow: 0 0 0 0 rgba(98, 0, 238, 0.1);
  transition: 0.3s ease-in-out;
}
.slider-container .slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 10px rgba(98, 0, 238, 0.1);
}
.slider-container .slider:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 10px rgba(98, 0, 238, 0.2);
}

.bAudio {
  background-color: #fff;
  border: none;
  width: 48px;
  height: 48px;
  cursor: pointer;
  outline: none;
  background-image: url("image/play.png");
}

.contenedor-principal {
  display: flex;
  align-items: center;
  width: 100%;
}

.titulo-audio {
  color: white;
  padding-left: 20px;
}

body {
  display: flex;
  justify-content: center;
}

Step 8: Crear Un Archivo JavaScript

Haz click en la esquina superior izquierda sobre "New file"
Crea documento JavaScript con el nombre "Control.js"
Pon el siguiente código:

var first = true;

function PlayMusic(id, playb) {
  var au = document.getElementById(id);
  var play = document.getElementById(playb);

  if (first) {
    au.volume = 0;
    if (au.paused) {
      au.play();
      play.style.background = "url(image/pause.png)";
    } else {
      au.pause();
      play.style.background = "url(image/play.png)";
    }

    first = false;
  } else {
    if (au.paused) {
      au.play();
      play.style.background = "url(image/pause.png)";
    } else {
      au.pause();
      play.style.background = "url(image/play.png)";
    }
  }
}

function ajustarVolumen(idaudio, slid) {
  audio = document.querySelector(idaudio);
  audio.volume = slid.value / 100;
  console.log(slid);
}

var volume1 = document.querySelector("#slider1");
volume1.addEventListener("input", function () {
  ajustarVolumen("#audio1", volume1);
});

var volume2 = document.querySelector("#slider2");
volume1.addEventListener("input", function () {
  ajustarVolumen("#audio1", volume2);
});

var volume3 = document.querySelector("#slider3");
volume1.addEventListener("input", function () {
  ajustarVolumen("#audio1", volume3);
});

var volume4 = document.querySelector("#slider4");
volume1.addEventListener("input", function () {
  ajustarVolumen("#audio1", volume4);
});

var volume5 = document.querySelector("#slider5");
volume1.addEventListener("input", function () {
  ajustarVolumen("#audio1", volume5);
});

var volume6 = document.querySelector("#slider6");
volume1.addEventListener("input", function () {
  ajustarVolumen("#audio1", volume6);
});

var volume7 = document.querySelector("#slider7");
volume1.addEventListener("input", function () {
  ajustarVolumen("#audio1", volume7);
});

var volume8 = document.querySelector("#slider8");
volume1.addEventListener("input", function () {
  ajustarVolumen("#audio1", volume8);
});

var volume9 = document.querySelector("#slider9");
volume1.addEventListener("input", function () {
  ajustarVolumen("#audio1", volume9);
});

Step 9: Probar El Funcionamiento Del Modelo Prototipo Web

Dirígete a la barra superior izquierda de CodeSandbox
Selecciona la opción "File"
Haz click en "Save all"
Oprime el icono del cuadrado con una flecha que lleva por nombre Open in new window (como se muestra en la imagen). Esto le abrirá una nueva pestaña la cual le mostrará el modelo prototipo web desarrollado.

Te quedará así:

https://l1u6o.csb.app/index.html