Fokus: 5 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:25

En este instructables te guiaremos paso a paso para el desarrollo de una aplicación web adaptativa, que permitirá organisar 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 problema propuesto por el docente y PhD Juan Vicente Pradilla Cerón para la asignatura Arquitectura de Sistemas Multimedia del programa académico Ingeniería Multimedia de la Universidad Autónoma de Occidente.

Para la realización de este proyecto se tuvieron og cuenta los siguientes puntos:

1. Objetivo -rektor

2. Objetivos Secundarios

3. Aktiveringer

4. Cronograma

5. Definición de usuarios

6. Trabajos relacionados

7. Requerimientos funcionales

8. Requerimientos no funcionales

9. Telecomicaciones

10. Hardware

11. Software

Trin 1: Recursos

Til realisering af webstedets anvendelse kan vi bruge de følgende signaturer:

• En Computador
• Sonidos CC0
• Visual Studio -kode
• Scripts.js

Los sonidos ambientales que se utilizarán son:

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

Trin 2: Visual Studio -kode

For at anvende en anvendelig Visual Studio -kode, kan den almindelige tilladelse bruges til at bruge bootstrap og JavaScript.

Trin 3: Importación De Medios

Habiendo descargado las imágenes and sonidos with licencia CC0 (Creative Commons Zero) previamente para importar los media of Visual Studio Code se hace lo sigient:

1. En udforskning af VS Code, en la carpeta del proyecto le damos klik på bot "Ny mappe" og creamos 2 gulvtæpper: una para los audios og andre til billeder
2. Arrastramos los audios y fotos and sus respectivas carpetas

Trin 4: Pantalla Principal

Para el desarrollo de la pantalla principal se optó por usar el temporizador Pomodoro, así como una descripción de su funcionamiento and los controles para los sonidos.

El código para su desarrollo es el siguiente:

ASM

Fokus

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

5 minutter.

25:00

Iniciar

Estudio

Sonidos

Lluvia

50

Pajaros

CSS

El CSS er et element til opbygning af HTML -koder, som tillader en bestemt farve til fond, tamaño de letra, tamaño de fondo, entre otros. En el código anterior se definition of the ubicación del archivo CSS, así como la librería que utiliza

h1 {farve: #F45B69; }.logo-img {højde: 35px; }.main {padding-top: 20px; }.tempo {højde: auto; bredde: auto; grænse-radius: 25px; tekstjustering: center; baggrundsfarve: #F45B69; }.tempo h2 {font-size: 60px; polstring: 30px; farve: hvid; }.tempo-knap {margin-bottom: 30px; } #est {farve: hvid; margin-bund: 30px; baggrundsfarve: #df4e5a; grænse-radius: 10px; } #lyde {højde: 400px; bredde: 100%; baggrundsbillede: url ("https://i.ibb.co/997L37C/bg.jpg"); baggrund-gentag: ingen-gentagelse; baggrundsstilling: venstre; margin-top: 20px; margin-bund: 20px; grænse-radius: 50px; polstring: 20px; } h3 {farve: hvid; }.rn {bredde: 100%; }.sld_val {farve: hvid; } #aud_lluvia {bredde: 100%; }

Trin 5: Temporizador

Para lograr la funcionalidad del temporizador en la app, así como el control of volumen de los sonidos se utiliza un script.js. Su código es el siguiente:

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; konsol. 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"). backgroundColor = "#2bb91e"; document.getElementById ("est ").style.backgroundColor ="#239419 "; document.getElementById ("est"). innerHTML = "Descanso Largo"; descanso = falsk; descansos = 0; }} andet {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.value; // Vis standard skyderværdi // Opdater den aktuelle skyderværdi (hver gang du trækker i skyderhåndtaget) slider.oninput = function () {output.innerHTML = this.value; aud_lluvia.volumen (denne.værdi / 100); }