Фокус: 5 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:49

En este instructables te guiaremos paso a paso para el desarrollo de una applicació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 problem propuesto por el docente y PhD Juan Vicente Pradilla Cerón para la asignatura Arquitectura de Sistemas Multimedia del program 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. Общиво Директор

2. Objetivos Secundarios

3. Активидади

4. Кронограма

5. Определяне на потребителите

6. Trabajos relacionados

7. Requerimientos funcionales

8. Requerimientos no funcionales

9. Телекомуникации

10. Хардуер

11. Софтуер

Стъпка 1: Рекурсос

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

• Un Computador
• Sonidos CC0
• Код на Visual Studio
• Скриптове.js

Los sonidos ambientales que se utilizarán son:

• Лувия
• Уви
• Виенто
• Райоси
• Фуего
• Пахарос

Стъпка 2: Код на Visual Studio

За да дезарлизирате приложението, използвайте приложението за Visual Studio Code, безплатно разрешаване на хакер, използвайки de la libreria bootstrap и JavaScript.

Стъпка 3: Importación De Medios

Habiendo descargado las imágenes y sonidos con licciacia CC0 (Creative Commons Zero) предварително за импортиране на los medios във Visual Studio Code се вижда като lo siguiente:

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

Стъпка 4: Pantalla Principal

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

El código para su desarrollo es el siguiente:

ASM

Съсредоточете се

Temporizador

En este temporizador utilizamos la Técnica Pomodoro de Francesco Cirillo. La cual divide el estudio на 25 минути с активиране, на 5 минути с депозит

descanso, y cada cuatro pomodoros 15 минути de descanso en lugar de 5.

25:00

Iniciar

Естудио

Сонидос

Лувия

50

Пахарос

CSS

El CSS е 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 се определя като ubicación del archivo CSS, като como la librería que utiliza

h1 {цвят: #F45B69; }.logo-img {височина: 35px; }.main {padding-top: 20px; }.tempo {височина: автоматично; ширина: авто; рамка-радиус: 25px; подравняване на текст: център; цвят на фона: #F45B69; }.tempo h2 {font-size: 60px; подложка: 30px; цвят: бял; }.tempo бутон {margin-bottom: 30px; } #est {цвят: бял; margin-bottom: 30px; background-color: #df4e5a; рамка-радиус: 10px; } #звуци {височина: 400px; ширина: 100%; background-image: url ("https://i.ibb.co/997L37C/bg.jpg"); фон-повторение: без повторение; фон-позиция: вляво; margin-top: 20px; margin-bottom: 20px; рамка-радиус: 50px; подложка: 20px; } h3 {цвят: бял; }.rn {ширина: 100%; }.sld_val {цвят: бял; } #aud_lluvia {ширина: 100%; }

Стъпка 5: Temporizador

Para lograr la funcionalidad del temporizador en la app, като como el control del volumen de los sonidos се използва un script.js. Su código es el siguiente:

var counterMinutos = 25; var counterSegundos = 0; var descanso = вярно; var descansos = 1; функция 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; конзола. 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 = невярно; descansos = 0; }} else {counterSegundos--; } // Cambiar texto if (counterSegundos> 9) {id = document.getElementById ("count"); id.innerHTML = counterMinutos + ":" + counterSegundos; } if (counterSegundos <= 9) {id = document.getElementById ("брой"); id.innerHTML = counterMinutos + ": 0" + counterSegundos; }}, 1); } // Плъзгач - 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); }