Focus: 5 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 09:59

En este instructables te guiaremos paso a paso para el desarrollo de una aplicación web Adaptativa, que permitirá organizar un estudio por intervalos (haciendo uso de la técnica Pomodoro) y escuchar una mezcla de ruido con sonidos ambientales.

Juan Vicente Pradilla Cerón para l'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 en cuenta los siguientes puntos:

1. Obiettivo principale

2. Obiettivi secondari

3. Attività

4. Cronogramma

5. Definición de usuarios

6. Trabajos relacionados

7. Requisiti funzionali

8. Richieste non funzionali

9. Telecomunicazioni

10. Hardware

11. Software

Passaggio 1: ricorsi

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

• Un calcolatore
• Sonidos CC0
• Codice di Visual Studio
• Script.js

Los sonidos ambientalis que se utilizarán son:

• Lluvia
• ola
• Viento
• Rayos
• fuoco
• Pájaros

Passaggio 2: codice di Visual Studio

Per desarrollar l'applicazione se utilizará l'applicazione Visual Studio Code, e come consentire l'uso della libreria bootstrap e JavaScript.

Passaggio 3: Importazione De Medios

Habiendo descargado les immagini e suoni con licenza CC0 (Creative Commons Zero) previamente per importare i medios al codice di Visual Studio se hace lo siguiente:

1. En el explorador de VS Code, en la moquette del progetto le damos fare clic sul pulsante "Nuova cartella" e creiamo 2 tappeti: una per gli audio e altre per le immagini
2. Arrastramos los audios y fotos en sus rispettivas carpetas

Fase 4: Preside Pantalla

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

El código para su desarrollo es el siguiente:

ASM

Messa a fuoco

Temporizzatore

En este temporizador utilizamos la Técnica Pomodoro de Francesco Cirillo. La cual divide el estudio in 25 minuti di attività, seguiti di 5 minuti in

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

25:00

Iniziare

Estudio

Sonidos

Lluvia

50

Pajaros

CSS

El CSS es el encargado de la struttura estetica del codice HTML, permite definir color de fondo, tamaño de letra, tamaño de fondo, entre otros. En el código anterior se definió la ubicación dell'archivo CSS, así como la librería que utiliza

h1 { colore: #F45B69; }.logo-img { altezza: 35px; }.main { padding-top: 20px; }.tempo { altezza: auto; larghezza: automatico; bordo-raggio: 25px; allineamento del testo: centro; colore di sfondo: # F45B69; }.tempo h2{ dimensione del carattere: 60px; imbottitura: 30px; colore bianco; } Pulsante.tempo{ margin-bottom: 30px; } #est { colore: bianco; margine inferiore: 30px; colore di sfondo: #df4e5a; raggio di confine: 10px; } #suoni { altezza: 400 px; larghezza: 100%; immagine di sfondo: url("https://i.ibb.co/997L37C/bg.jpg"); background-repeat: no-repeat; posizione sullo sfondo: sinistra; margine superiore: 20 px; margine inferiore: 20px; bordo-raggio: 50px; imbottitura: 20px; } h3{ colore: bianco; }.rn{ larghezza: 100%; }.sld_val { colore: bianco; } #aud_lluvia { larghezza: 100%; }

Passaggio 5: Temporizzatore

Per registrare la funzione del temporizzatore nell'app, come anche il controllo del volume dei suoni se utiliza un script.js. Su código es el siguiente:

var contatoreMinuti = 25; var counterSegundos = 0; var descanso = vero; 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 = falso; 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 = contatoreMinuti + ":0" + contatoreSegundo; } }, 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; // Visualizza il valore del dispositivo di scorrimento predefinito // Aggiorna il valore del dispositivo di scorrimento corrente (ogni volta che trascini la maniglia del dispositivo di scorrimento) slider.oninput = function () { output.innerHTML = this.value; aud_lluvia.volume(this.value/100); }