Skupienie: 5 kroków
Skupienie: 5 kroków

Spisu treści:

Anonim
Centrum
Centrum

En este instructables te guiaremos paso a paso para el desarrollo de una aplicación web adaptativa, que allowirá 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 problema propuesto pod el docente i PhD Juan Vicente Pradilla Cerón para la signatura Arquitectura de Sistemas Multimedia of academico 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. Zleceniodawca obiektu

2. Objetivos Secundarios

3. Actividades

4. Kronograma

5. Definición de usuarios

6. Trabajos relacionados

7. Requerimientos funcionales

8. Requerimientos no funcionales

9. Telekomunikacja

10. Sprzęt

11. Oprogramowanie

Krok 1: Rekursy

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

  • Komputerowy
  • Sonidos CC0
  • Kod programu Visual Studio
  • Skrypty.js

Los sonidos ambientales que se utilizarán son:

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

Krok 2: Kod programu Visual Studio

Kod programu Visual Studio
Kod programu Visual Studio

Para desarrollar el aplicativo se utilizará la aplicación Visual Studio Code, el cual allowe hacer uso de la libreria bootstrap y JavaScript.

Krok 3: Importowanie De Medios

Importowanie z mediów
Importowanie z mediów
Importowanie z mediów
Importowanie z mediów

Habiendo descargado las imágenes y sonidos con licencia CC0 (Creative Commons Zero) previamente para importar los medios al Visual Studio Code se hace lo siguiente:

  1. En el explorador de VS Code, en la carpeta del proyecto le damos kliknij al botón „New Folder” y creamos 2 carpetas: una para los audios y otra para las obrazów
  2. Arrastramos los audios y fotos en sus spectivas carpetas

Krok 4: Dyrektor Pantalli

Dyrektor Pantalli
Dyrektor Pantalli

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

El código para su desarrollo es el siguiente:

JAKO M

Centrum

Temporizador

Jest to tymczasowe narzędzie do 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

Początkowy

Studio

Sonidos

Lluvia

50

Pajaros

CSS

El CSS es el encargado de la estructura estética de código HTML, pozwala na zdefiniowanie koloru fondo, tamaño de letra, tamaño de fondo, entre otros. En el código anterior se definió la ubicación del archivo CSS, así como la librería que utiliza

h1 { kolor: #F45B69; }.logo-img { wysokość: 35px; }.main { padding-top: 20px; }.tempo { wysokość: auto; szerokość: auto; promień obramowania: 25px; wyrównanie tekstu: środek; kolor tła: #F45B69; }.tempo h2{ rozmiar czcionki: 60px; wypełnienie: 30px; kolor biały; }.tempo button{ margin-bottom: 30px; } #est { kolor: biały; margines-dolny: 30px; kolor tła: #df4e5a; promień obramowania: 10px; } #dźwięki { wysokość: 400px; szerokość: 100%; obraz w tle: url("https://i.ibb.co/997L37C/bg.jpg"); powtarzanie w tle: bez powtórzeń; pozycja tła: lewa; margines górny: 20px; margines-dolny: 20px; promień obramowania: 50px; wypełnienie: 20px; } h3{ kolor: biały; }.rn{ szerokość: 100%; }.sld_val { kolor: biały; } #aud_lluvia { szerokość: 100%; }

Krok 5: Temporizador

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

var counterMinutos = 25; var licznikSegundos = 0; var descanso = prawda; 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; konsola. 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 = fałsz; descansos =0; } } else { counterSegundos--; } //Cambiar texto if (counterSegundos > 9) { id = document.getElementById("count"); id.innerHTML = counterMinutos + ":" + counterSegundos; } if (counterSegundos <= 9) { id = document.getElementById("liczba"); id.innerHTML = counterMinutos + ":0" + counterSegundos; } }, 1); } //Suwak - suwak dźwięku var = document.getElementById("myRange"); var output = document.getElementById("demo"); var aud_lluvia = document.getElementById("aud_lluvia"); aud_lluvia.onplay(); output.innerHTML = suwak.wartość; // Wyświetl domyślną wartość suwaka // Zaktualizuj bieżącą wartość suwaka (za każdym razem, gdy przeciągniesz uchwyt suwaka) slider.oninput = function () { output.innerHTML = this.value; aud_lluvia.volume(ta.wartość / 100); }