Cuprins:
2025 Autor: John Day | [email protected]. Modificat ultima dată: 2025-01-13 06:58
În acest lucru este instructiv te guiarem pas la pas pentru dezvoltarea unei aplicații web adaptative, care să permită să organizeze un studiu pentru intervale (făcând uz de tehnica Pomodoro) și să scuture o mezcla de ruido cu sonore ambientale.
Acest proiect a apărut grații unui plantament al unei probleme propuse de doctorat și doctorat Juan Vicente Pradilla Cerón pentru asignatura Arhitectură de Sisteme Multimedia a programului académic Ingeniería Multimedia de la Universidad Autónoma de Occidente.
Pentru realizarea acestui proiect se tuvieron în contul următoarelor puncte:
1. Obiectiv Principal
2. Objetivos Secundarios
3. Actividades
4. Cronograma
5. Definiția utilizatorilor
6. Trabajos related
7. Requerimientos funcionales
8. Requerimientos no functionales
9. Telecomunicări
10. Hardware
11. Software
Pasul 1: Recursuri
Pentru realizarea aplicației web se utilizează următoarele resurse:
- Un Computador
- Sonidos CC0
- Cod Visual Studio
- Scripturi.js
Los sonidos ambientales que se utilizarán son:
- Lluvia
- Olas
- Viento
- Rayos
- Fuego
- Pájaros
Pasul 2: Cod Visual Studio
Pentru a dezvolta aplicația se va folosi aplicația Visual Studio Code, care poate face uz de librărie bootstrap și JavaScript.
Pasul 3: Importarea de medii
Ați descărcat imaginile și sunetele cu licență CC0 (Creative Commons Zero) anterior pentru a importa mijloacele în Visual Studio Code după cum urmează:
- În exploratorul de VS Code, în carpeta proiectului le damos click pe butonul "New Folder" și creem 2 covoare: una pentru audio și alta pentru imagini
- Arrastrăm audio și fotografii în cadrul cărora respectăm
Pasul 4: Pantalla Principal
Pentru dezvoltarea dezvoltării ecranului principal se optează pentru utilizarea temporizatorului Pomodoro, așa cum o descriere a funcționării și a controlului pentru sonori.
Codul pentru dezvoltarea este următorul:
AȘM
Concentrați-vă
Temporizador
În acest timp utilizăm tehnica Pomodoro de Francesco Cirillo. La cual divide el estudio en 25 minute de activitate, urmate de 5 minute 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 este încarcat de structura estetică a codului HTML, permite definirea culorii de fond, dimensiune de literă, dimensiune de fond, între alții. În codul anterior se definește locația arhivului CSS, așa cum este biblioteca care utilizează
h1 {culoare: # F45B69; }.logo-img {înălțime: 35px; }.main {padding-top: 20px; }.tempo {înălțime: auto; lățime: auto; raza chenarului: 25px; text-align: centru; culoare de fundal: # F45B69; }.tempo h2 {font-size: 60px; umplutură: 30 px; culoare albă; }.tempo button {margin-bottom: 30px; } #est {color: white; marginea de jos: 30 px; culoare de fundal: # df4e5a; raza chenarului: 10px; } # sunete {înălțime: 400px; lățime: 100%; imagine de fundal: url ("https://i.ibb.co/997L37C/bg.jpg"); background-repeat: no-repeat; fundal-poziție: stânga; marginea de sus: 20 px; marginea de jos: 20 px; raza chenarului: 50px; umplutură: 20 px; } h3 {culoare: alb; }.rn {lățime: 100%; }.sld_val {color: white; } #aud_lluvia {width: 100%; }
Pasul 5: Temporizador
Pentru logarizarea funcționalității temporizatorului în aplicație, astfel cum se controlează volumul de sonori se utilizează un script.js. Acesta este următorul cod:
var counterMinutos = 25; var counterSegundos = 0; var descanso = true; var descansos = 1; function initContador () {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; console. log (descansos);} else {document.getElementById ("temp-bg"). style.backgroundColor = "# F45B69"; document.getElementById ("est"). style.backgroundColor = "# df4e5a"; counterMinutos = 25; document.getElementById ("est"). innerHTML = "Estudio"; descanso =! descanso; descansos ++; console.log (descansos);}} else {counterMinutos = 15; document.getElementById ("temp-bg"). stil. backgroundColor = "# 2bb91e"; document.getElementById ("est ").style.backgroundColor =" # 239419 "; document.getElementById ("est"). innerHTML = "Descanso Largo"; descanso = false; descansos = 0; }} else {counterSegundos--; } // Cambiar texto if (counterSegundos> 9) {id = document.getElementById ("count"); id.innerHTML = counterMinutos + ":" + counterSegundos; } if (counterSegundos <= 9) {id = document.getElementById ("count"); id.innerHTML = counterMinutos + ": 0" + counterSegundos; }}, 1); } // Slider - Audio var slider = document.getElementById ("gama mea"); var output = document.getElementById ("demo"); var aud_lluvia = document.getElementById ("aud_lluvia"); aud_lluvia.onplay (); output.innerHTML = slider.value; // Afișați valoarea implicită a glisorului // Actualizați valoarea curentă a glisorului (de fiecare dată când trageți mânerul glisorului) slider.oninput = function () {output.innerHTML = this.value; aud_lluvia.volume (this.value / 100); }