Focus: 5 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:14

Er zijn instructies voor het aanpassen van de instructies voor het gebruik van web-adaptatie, het organiseren van een e-studio voor intervalos (gebruik van de technische Pomodoro) en het maken van een mezcla de ruido met sonidos ambientales.

Dit is een goed ontwikkeld plan om een probleem te verhelpen door een docente en doctoraat Juan Vicente Pradilla Cert voor de toegekende architectuur van de Sistemas Multimedia van het programma van de academische wereld Multimedia van de Universidad Autónoma de Occidente.

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

1. Objetivo-hoofd

2. Objetivos Secundario's

3. Activiteiten

4. Cronogram

5. Definición de usuarios

6. Trabajos-relacionados

7. Functionele vereisten

8. Requerimientos no funcionales

9. Telecommunicatie

10. Hardware

11. Software

Stap 1: Middelen

Voor het uitvoeren van webapplicaties kunt u gebruik maken van de volgende bronnen:

• Un Computador
• Sonidos CC0
• Visual Studio-code
• Scripts.js

Los sonidos ambientales que se utilizarán zoon:

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

Stap 2: Visual Studio-code

Het is mogelijk om gebruik te maken van de toepassing van Visual Studio Code, en om het gebruik van JavaScript-bootstrap te gebruiken.

Stap 3: Importación De Medios

Gebruikte afbeeldingen en geluiden met CC0 (Creative Commons Zero) voorafgaand aan het importeren van het middelmatige Visual Studio Code volgt:

1. En el explorador de VS Code, en la carpeta del proyecto le damos klik op de botón "New Folder" en creamos 2 tapijten: een para los audio en otra para las imagenes
2. Arrastramos los audios y fotos en sus respectivas carpetas

Stap 4: Pantalla-baas

Para el desarrollo de la pantalla principal se optó el usar el temporizador Pomodoro, zoals een beschrijving van de funcionamiento y los controles para los sonidos.

El codigo para su desarrollo es el siguiente:

ASM

Focus

Temporizador

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

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

25:00

Iniciar

Estudio

Sonidos

Lluvia

50

Pajaros

CSS

El CSS is een afbeelding van de estructura estética del código HTML, definieer de kleur van de fondo, tamaño de letra, tamaño de fondo, entre otros. En el codigo anterior se definió la ubicación del archivo CSS, así como la librería que utiliza

h1 { kleur: #F45B69; }.logo-img { hoogte: 35px; }.main { padding-top: 20px; }.tempo { hoogte: auto; breedte: automatisch; grens-radius: 25px; tekst uitlijnen: midden; achtergrondkleur: #F45B69; }.tempo h2{ lettergrootte: 60px; opvulling: 30px; kleur wit; }.tempo-knop{ margin-bottom: 30px; } #est { kleur: wit; marge-onder: 30px; achtergrondkleur: #df4e5a; grens-radius: 10px; } #sounds { hoogte: 400px; breedte: 100%; achtergrondafbeelding: url("https://i.ibb.co/997L37C/bg.jpg"); achtergrondherhaling: geen herhaling; achtergrondpositie: links; marge-top: 20px; marge-onder: 20px; grens-radius: 50px; opvulling: 20px; } h3{ kleur: wit; }.rn{ breedte: 100%; }.sld_val { kleur: wit; } #aud_lluvia { breedte: 100%; }

Stap 5: Temporizador

Voor de functie van de functie van de app, zoals de controle van het volume van het geluid en het gebruik van script.js. Hieronder volgt:

var counterMinutos = 25; var counterSegundos = 0; var descanso = waar; 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; 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").style. backgroundColor = "#2bb91e"; document.getElementById("est ").style.backgroundColor = "#239419"; document.getElementById("est").innerHTML = "Descanso Largo"; descanso = vals; 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 ("myRange"); var output = document.getElementById("demo"); var aud_lluvia = document.getElementById("aud_lluvia"); aud_lluvia.onplay(); output.innerHTML = slider.waarde; // Geef de standaard schuifregelaarwaarde weer // Werk de huidige schuifregelaarwaarde bij (elke keer dat u de schuifregelaar sleept) slider.oninput = function () { output.innerHTML = this.value; aud_lluvia.volume(deze.waarde / 100); }