Fookus: 5 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:45

En este instructables te guiaremos paso a paso para el desarrollo de una aplicación web adaptativa, que loadirá 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 problem propuesto for an docente y PhD Juan Vicente Pradilla Cerón para la asignatura Arquitectura de Sistemas Multimedia del program 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 direktor

2. Objetivos Secundarios

3. Tegevused

4. Kronograafia

5. Definición de usuarios

6. Trabajos relacionados

7. Requerimientos funcionales

8. Requerimientos no funcionales

9. Telekommunikatsioon

10. Riistvara

11. Tarkvara

Samm: kordused

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

• Arvutita
• Sonidos CC0
• Visual Studio kood
• Skriptid.js

Los sonidos ambientales que se utilizarán son:

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

2. samm: Visual Studio kood

Visual Studio Code'i desarrollar el aplicativo se appizará la aplicación, ecual permite hacer uso de la libreria bootstrap y JavaScript.

Samm: Importige Medios

Habiendo descargado las imágenes y sonidos con CCC (Creative Commons Zero) litsentsi eelisjärjekorras on oluline importida Visual Studio Code, mis on järgmine:

1. VS Code'i uurija, klõpsake nuppu "Uus kaust" ja kreemos 2 vaipa: una para los audios y otra para las imágenes
2. Arrastramos los audios y fotos en sus respectivas carpetas

4. samm: Pantalla Principal

Para el desarrollo de la pantalla põhimõte se optó por usar el temporizador Pomodoro, así como una description de su funcionamiento y los controles para los sonidos.

El Código para su desarrollo es el siguiente:

ASM

Keskendu

Temporizador

En este temporizador utilizamos la Técnica Pomodoro de Francesco Cirillo. La cual divide el estudio on 25 minutit aktiivsust, segu 5 minutit

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

25:00

Iniciar

Estudio

Sonidos

Lluvia

50

Pajaros

CSS

CSS, see on HTML -i kodeerimise estruktuur, kinnine värv, fondo, tamaño de letra, tamaño de fondo, entro otros. En el código anterior se definió la ubicación del archivo CSS, así como la librería que utiliza

h1 {värv: #F45B69; }.logo-img {kõrgus: 35 pikslit; }.main {padding-top: 20px; }.tempo {kõrgus: auto; laius: auto; piiri raadius: 25 pikslit; text-align: center; taustavärv: #F45B69; }.tempo h2 {font-size: 60px; polster: 30 pikslit; värv: valge; }.tempo nupp {margin-bottom: 30px; } #est {värv: valge; all-äär: 30 pikslit; taustavärv: #df4e5a; piiri raadius: 10 pikslit; } #sounds {kõrgus: 400px; laius: 100%; taustapilt: url ("https://i.ibb.co/997L37C/bg.jpg"); taust-kordus: ei korda; taustaasend: vasakul; ülemine äär: 20 pikslit; all-äär: 20 pikslit; piiri raadius: 50 pikslit; polster: 20 pikslit; } h3 {värv: valge; }.rn {laius: 100%; }.sld_val {värv: valge; } #aud_lluvia {laius: 100%; }

Samm 5: Temporizador

Rakenduse funktsionaalsuse loomiseks logige rakendusse, nii et saate kontrollida helitugevust ja kasutada skripti.js. Su código es el siguiente:

var counterMinutos = 25; var counterSegundos = 0; var descanso = tõsi; 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"). InternalHTML = "Descanso"; counterMinutos = 5; descanso =! Descanso; konsool. log (descansos);} else {document.getElementById ("temp-bg"). style.backgroundColor = "#F45B69"; document.getElementById ("est"). style.backgroundColor = "#df4e5a"; counterMinutos = 25; document.getElementById ("est"). internalHTML = "Estudio"; descanso =! descanso; descansos ++; console.log (descansos);}} else {counterMinutos = 15; document.getElementById ("temp-bg"). backgroundColor = "#2bb91e"; document.getElementById ("est ").style.backgroundColor ="#239419 "; document.getElementById ("est"). internalHTML = "Descanso Largo"; descanso = vale; 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); } // Liugur - heli var slider = document.getElementById ("myRange"); var väljund = document.getElementById ("demo"); var aud_lluvia = document.getElementById ("aud_lluvia"); aud_lluvia.onplay (); output.innerHTML = liugur.väärtus; // Kuva liuguri vaikeväärtus // Värskenda praegust liuguri väärtust (iga kord, kui lohistad liuguri käepidet) slider.oninput = function () {output.innerHTML = this.value; aud_lluvia.volume (see.väärtus / 100); }