Focus

by sebastian.lopez_duq in Circuits > Assistive Tech

250 Views, 0 Favorites, 0 Comments

Focus

En este instructables te guiaremos paso a paso para el desarrollo de una aplicación web adaptativa, que permitirá organizar un estudio por intervalos (haciendo uso de la técnica Pomodoro) y escuchar una mezcla de ruido con sonidos ambientales.

Este proyecto surgió gracias al planteamiento de un problema propuesto por el docente y PhD Juan Vicente Pradilla Cerón para la asignatura Arquitectura de Sistemas Multimedia del programa académico Ingeniería Multimedia de la Universidad Autónoma de Occidente.

Para la realización de este proyecto se tuvieron en cuenta los siguientes puntos:

1.Objetivo Principal

2. Objetivos Secundarios

3. Actividades

4. Cronograma

5. Definición de usuarios

6. Trabajos relacionados

7. Requerimientos funcionales

8. Requerimientos no funcionales

9. Telecomunicaciones

10. Hardware

11. Software

Recursos

Para realizar la aplicación web se hará uso de los siguientes recursos:

Un Computador
Sonidos CC0
Visual Studio Code
Scripts .js

Los sonidos ambientales que se utilizarán son:

Lluvia
Olas
Viento
Rayos
Fuego
Pájaros

Visual Studio Code

Para desarrollar el aplicativo se utilizará la aplicación Visual Studio Code, el cual permite hacer uso de la libreria bootstrap y JavaScript.

Importación De Medios

Habiendo descargado las imágenes y sonidos con licencia CC0 (Creative Commons Zero) previamente para importar los medios al Visual Studio Code se hace lo siguiente:

En el explorador de VS Code, en la carpeta del proyecto le damos click al botón "New Folder" y creamos 2 carpetas: una para los audios y otra para las imágenes
Arrastramos los audios y fotos en sus respectivas carpetas

Pantalla Principal

Para el desarrollo de la pantalla principal se optó por usar el temporizador Pomodoro, así como una descripción de su funcionamiento y los controles para los sonidos.

El código para su desarrollo es el siguiente:

<p><!DOCTYPE html></p><p><html lang="en"></p><p><head></p><p>    <meta charset="UTF-8"></p><p>    <meta name="viewport" content="width=device-width, initial-scale=1.0"></p><p>    <title>ASM</title></p><p>    <link rel="stylesheet" href="bootstrap/css/bootstrap.css"></p><p>    <link rel="stylesheet" href="css/style.css"></p><p>    <link rel="icon" href="img/logo.png"></p><br><p></head></p><p><body></p><p>    <nav class="navbar navbar-dark bg-dark"></p><p>        <!-- Navbar content --></p><p>        <div class="container"></p><p>            <img src="img/logo.png" alt="logo" class="logo-img"></p><p>            <a class="navbar-brand"  href="#">Focus</a></p><p>        </div></p><p>    </nav></p><br><p>    <div class="container main"></p><p>        <h1>Temporizador</h1></p><p>        <p>En este temporizador utilizamos la Técnica Pomodoro de Francesco Cirillo. La cual divide el estudio en 25 minutos de actividad, seguidos de 5 minutos de</p><p>        descanso, y cada cuatro pomodoros 15 minutos de descanso en lugar de 5.</p></p><br><p>        <div class="row"></p><p>            <div class="col-4"></p><div>                </div><p>            </div></p><p>            <div class="col-4 tempo" id="temp-bg"></p><p>                <h2 id="count">25:00</h2></p><p>                <button type="button" class="btn btn-primary" onclick="iniciarContador();">Iniciar</button></p><p>                <p style="display: none;" id="est">Estudio</p></p><p>            </div></p><p>            <div class="col-4"></p><div>            </div><p>            </div></p><p>        </div></p><p>        <h1>Sonidos</h1></p><p>        <div class="row"></p><p>            <div class="col-xs-1-12" id="sounds"></p><p>                <h3>Lluvia</h3></p><p>                <!--</p><p>                <input type="range" name="hoal" class="rn" id="myRange" min="0" max="100" value="50"> </p><p>                <p class="sld_val" id="demo">50</p>--></p><p>                <audio src="audios/la-lluvia_1.mp3" type="audio/mpeg" id="aud_lluvia" autoplay loop controls></audio></p><p>                <h3>Pajaros</h3></p><p>                <audio src="audios/pajaros.mp3" type="audio/mpeg" id="aud_lluvia" autoplay loop controls></audio></p><br><p>            </div></p><p>        </div></p><p>    </div></p><br><p>    <script src="scripts/script.js"></script></p><p></body></p><p></html></p>

CSS

El CSS es el encargado de la estructura estética del código HTML, permite definir color de fondo, tamaño de letra, tamaño de fondo, entre otros. En el código anterior se definió la ubicación del archivo CSS, así como la librería que utiliza

<div><div>h1 {</div><div>    color: #F45B69;</div><div>}</div><br><div>.logo-img {</div><div>    height: 35px;</div><div>}</div><br><div>.main {</div><div>    padding-top: 20px;</div><div>}</div><br><div>.tempo {</div><div>    height: auto;</div><div>    width: auto;</div><div>    border-radius: 25px;</div><div>    text-align: center;</div><div>    background-color: #F45B69;</div><div>}</div><br><div>.tempo h2{</div><div>    font-size: 60px;</div><br><div>    padding: 30px;</div><div>    color: white;</div><div>}</div><br><div>.tempo button{</div><div>    margin-bottom: 30px;</div><div>}</div><br><div>#est {</div><div>    color: white;</div><div>    margin-bottom: 30px;</div><div>    background-color: #df4e5a;</div><div>    border-radius: 10px;</div><div>}</div><br><div>#sounds {</div><div>    height: 400px;</div><div>    width: 100%;</div><div>    background-image: url("https://i.ibb.co/997L37C/bg.jpg");</div><div>    background-repeat: no-repeat;</div><div>    background-position: left;  </div><div>    margin-top: 20px;</div><div>    margin-bottom: 20px;</div><div>    border-radius: 50px;</div><div>    padding: 20px;</div><div>}</div><br><div>h3{</div><div>    color: white;</div><div>}</div><br><div>.rn{</div><div>    width: 100%;</div><div>}</div><br><div>.sld_val {</div><div>    color: white;</div><div>}</div><br><div>#aud_lluvia {</div><div>    width: 100%;</div><div>}</div></div>

Temporizador

Para lograr la funcionalidad del temporizador en la app, así como el control del volumen de los sonidos se utiliza un script.js. Su código es el siguiente:

<div><div>var counterMinutos = 25;</div><div>var counterSegundos = 0;</div><div>var descanso = true;</div><div>var descansos = 1;</div><br><div>function iniciarContador(){</div><div>    setInterval(function () {</div><div>        //Mostrar texto</div><br><div>        document.getElementById("est").style.display = "block";</div><div>        //Iniciar Contador</div><br><div>        if (counterSegundos == 0 && counterMinutos > 0) {</div><div>            counterSegundos = 60;</div><div>            counterMinutos--;</div><div>        }</div><br><div>        //Descansos    </div><br><div>        if (counterSegundos == 0 && counterMinutos == 0) {</div><div>            if(descansos != 4){</div><div>                if (descanso) {</div><div>                    document.getElementById("temp-bg").style.backgroundColor = "#2bb91e";</div><div>                    document.getElementById("est").style.backgroundColor = "#239419";</div><div>                    document.getElementById("est").innerHTML = "Descanso";</div><div>                    counterMinutos = 5;</div><div>                    descanso = !descanso;</div><div>                    console.log(descansos);</div><br><div>                } else {</div><div>                    document.getElementById("temp-bg").style.backgroundColor = "#F45B69";</div><div>                    document.getElementById("est").style.backgroundColor = "#df4e5a";</div><div>                    counterMinutos = 25;</div><div>                    document.getElementById("est").innerHTML = "Estudio";</div><div>                    descanso = !descanso;</div><div>                    descansos++;</div><div>                    console.log(descansos);</div><div>                }</div><div>            }else{</div><div>                counterMinutos = 15;</div><div>                document.getElementById("temp-bg").style.backgroundColor = "#2bb91e";</div><div>                document.getElementById("est").style.backgroundColor = "#239419";</div><div>                document.getElementById("est").innerHTML = "Descanso Largo";</div><div>                descanso = false;</div><div>                descansos =0;</div><div>            }</div><br><div>        } else {</div><div>            counterSegundos--;</div><div>        }</div><br><div>        //Cambiar texto</div><div>        if (counterSegundos > 9) {</div><div>            id = document.getElementById("count");</div><div>            id.innerHTML = counterMinutos + ":" + counterSegundos;</div><div>        }</div><div>        if (counterSegundos <= 9) {</div><div>            id = document.getElementById("count");</div><div>            id.innerHTML = counterMinutos + ":0" + counterSegundos;</div><div>        }</div><div>    }, 1);</div><div>}</div><br><div>//Slider - Audio</div><br><div>var slider = document.getElementById("myRange");</div><div>var output = document.getElementById("demo");</div><div>var aud_lluvia = document.getElementById("aud_lluvia");</div><div>aud_lluvia.onplay();</div><br><div>output.innerHTML = slider.value; // Display the default slider value</div><br><div>// Update the current slider value (each time you drag the slider handle)</div><div>slider.oninput = function () {</div><div>    output.innerHTML = this.value;</div><div>    aud_lluvia.volume(this.value / 100);</div><div>}</div><br><br></div>