Focus: 5 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:41

Î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ă:

1. Î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
2. 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); }