โฟกัส: 5 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:02

En este Instrucables 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) และ 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 en cuenta los siguientes puntos: ความจริงแล้ว

1. Objetivo Principal

2. Objetivos Secundarios

3. แอคติวิดาดส์

4. โครโนแกรม

5. Definición de usuarios

6. Trabajos relacionados

7. Requerimientos funcionales

8. ข้อกำหนดไม่มี funcionales

9. การสื่อสารโทรคมนาคม

10. ฮาร์ดแวร์

11. ซอฟต์แวร์

ขั้นตอนที่ 1: เรียกซ้ำ

Para realizar la aplicación web se hará uso de los siguientes เรียกซ้ำ:

• Un Computador
• Sonidos CC0
• รหัส Visual Studio
• สคริปต์.js

Los sonidos ambientales que se utilizarán ลูกชาย:

• ลูเวีย
• Olas
• เวียงโต
• Rayos
• ฟูเอโก
• ปาจารอส

ขั้นตอนที่ 2: รหัส Visual Studio

สำหรับโปรแกรมที่ใช้ Visual Studio Code, อนุญาติให้ผู้ใช้ใช้โปรแกรมบูตสแตรปและจาวาสคริปต์

ขั้นตอนที่ 3: Importación De Medios

ที่อยู่อาศัย descargado las imágenes y sonidos con licencia CC0 (Creative Commons Zero) previamente para importar los medios al Visual Studio Code se lo siguiente:

1. สำรวจ VS Code, บนพื้นพรม del proyecto le damos คลิก al botón "New Folder" และ creamos 2 พรม: una para los audios และ otra para las รูปภาพ
2. Arrastramos los audios y fotos en sus comparisonivas carpetas

ขั้นตอนที่ 4: Pantalla Principal

Para el desarrollo de la pantalla หลัก se optó por usar el temporizador Pomodoro, así como una descripción de su funcionamiento และ los controles para los sonidos.

เอล código para su desarrollo es el siguiente:

ASM

จุดสนใจ

ชั่วคราว

การใช้งานชั่วคราว utilizamos la Técnica Pomodoro de Francesco Cirillo La cual divide el estudio en 25 นาที de actividad, seguidos de 5 minutos de

descanso, y cada cuatro pomodoros 15 นาที de descanso en lugar de 5.

25:00

เริ่มต้น

Estudio

Sonidos

ลูเวีย

50

ปาจารอส

CSS

CSS es el encargado de la estructura estética del código HTML, อนุญาตการกำหนดสี de 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 { สี: #F45B69; }.logo-img { ความสูง: 35px; }.main { padding-top: 20px; }.tempo { ความสูง: อัตโนมัติ; ความกว้าง: อัตโนมัติ; รัศมีเส้นขอบ: 25px; จัดข้อความ: ศูนย์; สีพื้นหลัง: #F45B69; }.tempo h2{ ขนาดตัวอักษร: 60px; ช่องว่างภายใน: 30px; สี: ขาว; } ปุ่ม.tempo { margin-bottom: 30px; } #est { สี: ขาว; ระยะขอบล่าง: 30px; สีพื้นหลัง: #df4e5a; รัศมีเส้นขอบ: 10px; } #sounds { ความสูง: 400px; ความกว้าง: 100%; ภาพพื้นหลัง: url("https://i.ibb.co/997L37C/bg.jpg"); พื้นหลังซ้ำ: ไม่ซ้ำ; พื้นหลังตำแหน่ง: ซ้าย; ขอบบน: 20px; ระยะขอบล่าง: 20px; รัศมีเส้นขอบ: 50px; ช่องว่างภายใน: 20px; } h3{ สี: ขาว; }.rn{ ความกว้าง: 100%; }.sld_val { สี: ขาว; } #aud_lluvia { ความกว้าง: 100%; }

ขั้นตอนที่ 5: Temporizador

Para lograr la funcionalidad del temporizador en la app, así como el control del volumen de los sonidos se utiliza un script.js. ซู codigo es el siguiente:

var counterMinutos = 25; วาร์เคาน์เตอร์Segundos = 0; var descanso = จริง; วาร์ descansos = 1; ฟังก์ชัน iniciarContador () { setInterval (ฟังก์ชัน () { //Mostrar texto document.getElementById ("est").style.display = "block"; // เริ่มต้น Contador ถ้า (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. บันทึก (descansos); } อื่น { 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 = เท็จ; descansos =0; } } อื่น { counterSegundos--; } // Cambiar texto if (counterSegundos > 9) { id = document.getElementById ("นับ"); id.innerHTML = counterMinutos + ":" + counterSegundos; } if (เคาน์เตอร์Segundos <= 9) { id = document.getElementById ("นับ"); id.innerHTML = counterMinutos + ":0" + ตัวนับ Segundos; } }, 1); } //Slider - Audio var slider = document.getElementById("myRange"); var output = document.getElementById("สาธิต"); var aud_lluvia = document.getElementById("aud_lluvia"); aud_lluvia.onplay(); output.innerHTML = slider.value; // แสดงค่าตัวเลื่อนเริ่มต้น // อัปเดตค่าตัวเลื่อนปัจจุบัน (ทุกครั้งที่คุณลากตัวเลื่อนตัวเลื่อน) slider.oninput = function () { output.innerHTML = this.value; aud_lluvia.volume(this.value / 100); }