Focus: 5 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:10

En aquest instructible et guiarem pas a pas per al desenvolupament d’una aplicació web adaptativa, que permetrà organitzar un estudi per intervals (fent ús de la tècnica Pomodoro) i escollir una mescla de ruïdós amb sons ambientals.

Aquest projecte va sorgir gràcies a un plantejament d’un problema propòsit pel docent i doctorat Juan Vicente Pradilla Ceró per a l’assignatura Arquitectura de Sistemes Multimedia del programa acadèmic Ingeniería Multimedia de la Universitat Autònoma d’Occident.

Per a la realització d’aquest projecte es va tenir en compte en els següents punts:

1. Principal objectiu

2. Objetivos Secundarios

3. Actividades

4. Cronograma

5. Definició d'usuaris

6. Treballs relacionats

7. Requeriments funcionals

8. Requeriments no funcionales

9. Telecomunicacions

10. Maquinari

11. Programari

Pas 1: Recursos

Per realitzar l'aplicació web es farà servir els següents recursos:

• Un Computador
• Sonidos CC0
• Visual Studio Code
• Scripts.js

Els sons ambientals que es faran servir:

• Lluvia
• Olas
• Viento
• Rayos
• Foc
• Pájaros

Pas 2: codi de Visual Studio

Per desenvolupar l'aplicatiu s'utilitzarà l'aplicació Visual Studio Code, el que permet fer l'ús de la biblioteca bootstrap i JavaScript.

Pas 3: Importació de mitjans

S’ha descarregat les imatges i els sons amb llicència CC0 (Creative Commons Zero) prèviament per importar els mitjans al Visual Studio Code:

1. A l’explorador de VS Code, a la carpeta del projecte, fem clic al botó "New Folder" i creamos 2 catifes: una per als àudios i una altra per a les imatges
2. Arrastramos los audios y fotos en sus respectivas carpetas

Pas 4: Pantalla Principal

Per al desenvolupament de la pantalla principal es va optar per utilitzar el temporitzador Pomodoro, així com una descripció del seu funcionament i els controls per als sons.

El codi per al seu desenvolupament és el següent:

ASM

Enfocament

Temporitzador

En aquest temporitzador s’utilitza la Tècnica Pomodoro de Francesco Cirillo. La qual divideix l’estudi en 25 minuts d’activitat, seguits de 5 minuts de

descanso, y cada cuatro pomodoros 15 minutos de descanso en lugar de 5.

25:00

Iniciar

Estudio

Sonidos

Lluvia

50

Pajaros

CSS

El CSS és l’encarregat de l’estructura estètica del codi HTML, permet definir color de fons, mida de lletra, mida de fons, entre altres. En el codi anterior es va definir la ubicació de l’arxiu CSS, així com la biblioteca que utilitza

h1 {color: # F45B69; }.logo-img {height: 35px; }.main {padding-top: 20 px; }.tempo {height: auto; ample: automàtic; radi de la vora: 25 px; text-align: centre; color de fons: # F45B69; }.tempo h2 {font-size: 60px; encoixinat: 30 px; color: blanc; } botó.tempo {margin-bottom: 30px; } #est {color: white; marge-fons: 30 px; color de fons: # df4e5a; radi de la vora: 10 px; } # sons {altura: 400px; amplada: 100%; imatge de fons: url ("https://i.ibb.co/997L37C/bg.jpg"); background-repeat: no-repeat; posició de fons: esquerra; marge superior: 20 px; marge-fons: 20 px; radi de la vora: 50 px; encoixinat: 20 px; } h3 {color: blanc; }.rn {ample: 100%; }.sld_val {color: blanc; } #aud_lluvia {width: 100%; }

Pas 5: Temporitzador

Per lograr la funcionalitat del temporitzador en l'aplicació, així com el control del volum dels sons s'ha utilitzat un script.js. El seu codi és el següent:

var counterMinutos = 25; var counterSegundos = 0; var descanso = true; var descansos = 1; function iniciarContador () {setInterval (function () {// Mostrar texto document.getElementById ("est"). style.display = "block"; // Iniciar Contador if (counterSegundos == 0 && counterMinutos> 0) {counterSegundos = 60; counterMinutos--;} // Descansos if (counterSegundos == 0 && counterMinutos == 0) {if (descansos! = 4) {if (descanso) {document.getElementById ("temp-bg"). Style.backgroundColor = "# 2bb91e"; document.getElementById ("est"). Style.backgroundColor = "# 239419"; document.getElementById ("est"). InnerHTML = "Descanso"; counterMinutos = 5; descanso =! Descanso; consola. log (descansos);} else {document.getElementById ("temp-bg"). style.backgroundColor = "# F45B69"; document.getElementById ("est"). style.backgroundColor = "# df4e5a"; counterMinutos = 25; document.getElementById ("est"). innerHTML = "Estudi"; descanso =! descanso; descansos ++; console.log (descansos);}} else {counterMinutos = 15; document.getElementById ("temp-bg"). style. backgroundColor = "# 2bb91e"; document.getElementById ("est ").style.backgroundColor =" # 239419 "; document.getElementById ("est"). innerHTML = "Descans Largo"; descanso = false; descansos = 0; }} else {counterSegundos--; } // Cambiar text if (counterSegundos> 9) {id = document.getElementById ("count"); id.innerHTML = counterMinutos + ":" + counterSegundos; } if (counterSegundos <= 9) {id = document.getElementById ("count"); id.innerHTML = counterMinutos + ": 0" + counterSegundos; }}, 1); } // Lliscador - Lliscador var d'àudio = document.getElementById ("myRange"); var output = document.getElementById ("demostració"); var aud_lluvia = document.getElementById ("aud_lluvia"); aud_lluvia.onplay (); output.innerHTML = slider.value; // Mostra el valor del control lliscant per defecte // Actualitzeu el valor actual del control lliscant (cada vegada que arrossegueu el control del control lliscant) slider.oninput = function () {output.innerHTML = this.value; aud_lluvia.volume (this.value / 100); }