Fokus: 5 Langkah
Fokus: 5 Langkah

Daftar Isi:

Anonim
Fokus
Fokus

En este instruksional 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.

Terima kasih atas bantuan Anda untuk menyelesaikan masalah 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 set tuvieron en cuenta los siguientes puntos:

1. Objetivo Kepala Sekolah

2. Objetivos Secundarios

3. Actividades

4. Kronogram

5. Definisi dari usuarios

6. Trabajos relacionados

7. Persyaratan fungsi

8. Perlu tidak ada fungsi

9. Telekomunikasi

10. Perangkat Keras

11. Perangkat Lunak

Langkah 1: Rekursif

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

  • Un Computador
  • Sonidos CC0
  • Kode Visual Studio
  • Skrip.js

Los sonidos ambientales que se utilizarán anak:

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

Langkah 2: Kode Visual Studio

Kode Visual Studio
Kode Visual Studio

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

Langkah 3: Pentingnya Medios

Importasi De Medios
Importasi De Medios
Importasi De Medios
Importasi De Medios

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

  1. En el explorador de VS Code, en la carpeta del proyecto le damos klik al botón "Folder Baru" dan krim 2 karpet: una para los audios y otra para las imágenes
  2. Arrastramos los audios y fotos en sus respectivas carpetas

Langkah 4: Kepala Sekolah Pantalla

Kepala Sekolah Pantalla
Kepala Sekolah Pantalla

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

El código para su desarrollo es el siguiente:

ASM

Fokus

pengatur waktu

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

inisiar

Estudio

sonidos

luvia

50

Pajaros

CSS

El CSS es el encargado de la estética del código HTML, izinkan warna yang pasti untuk 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 libreria que utiliza

h1 { warna: #F45B69; }.logo-img { tinggi: 35px; }.main { padding-top: 20px; }.tempo { tinggi: otomatis; lebar: otomatis; batas-radius: 25px; perataan teks: tengah; warna latar: #F45B69; }.tempo h2{ ukuran font: 60px; bantalan: 30px; warna putih; }.tombol tempo{ margin-bottom: 30px; } #est { warna: putih; margin-bawah: 30px; warna latar: #df4e5a; batas-radius: 10px; } #suara { tinggi: 400px; lebar: 100%; background-image: url("https://i.ibb.co/997L37C/bg.jpg"); background-repeat: tidak-ulangi; latar belakang-posisi: kiri; margin-atas: 20px; margin-bawah: 20px; batas-radius: 50px; bantalan: 20 piksel; } h3{ warna: putih; }.rn{ lebar: 100%; }.sld_val { warna: putih; } #aud_lluvia { lebar: 100%; }

Langkah 5: Temporizador

Untuk lograr la funcionalidad del temporizador en 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 counterSegundos = 0; var descanso = benar; 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").style. backgroundColor = "#2bb91e"; document.getElementById("est ").style.backgroundColor = "#239419"; document.getElementById("est").innerHTML = "Descanso Largo"; descanso = salah; 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 keluaran = document.getElementById("demo"); var aud_lluvia = document.getElementById("aud_lluvia"); aud_lluvia.onplay(); output.innerHTML = penggeser.nilai; // Menampilkan nilai slider default // Memperbarui nilai slider saat ini (setiap kali Anda menyeret gagang slider) slider.oninput = function () { output.innerHTML = this.value; aud_lluvia.volume(ini.nilai / 100); }