Фокус: 5 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:48

En este Instructables te guiaremos paso a paso para el desarrollo de una aplicación web adaptativa, que Разрешение организации 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 проблема 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. Объективный директор

2. Objetivos Secundarios

3. Actividades

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

5. Definición de usuarios

6. Trabajos relacionados

7. Requerimientos funcionales

8. Requerimientos no funcionales

9. Telecomunicaciones

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:

• Lluvia
• Olas
• Вьенто
• Rayos
• Fuego
• Пахарош

Шаг 2: код Visual Studio

Для того, чтобы получить приложение, которое использует приложение Visual Studio Code, можно автоматически использовать загрузочную библиотеку JavaScript.

Шаг 3: Importación De Medios

Habiendo Descargado las imágenes y sonidos con licencia CC0 (Creative Commons Zero) previamente for 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 click al botón «New Folder» и creamos 2 ковра: una para los audio 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 primary 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:

КАК М

Фокус

Temporizador

En este temporizador utilizamos la Técnica Pomodoro de Francesco Cirillo. La cual Разделите Эстудию в 25 minutos de actividad, seguidos de 5 minutos de

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

25:00

Инициар

Студия

Sonidos

Lluvia

50

Пахарош

CSS

Эль-CSS - это атрибут эстетической структуры кода HTML, разрешить определенный цвет фонда, таманьо-де-летра, таманьо-де-фондо, антре отрос. En el código anterior se Definió la ubicación del archivo CSS, así como la librería que utiliza

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

Шаг 5: Temporizador

Для управления временным функционалом в приложении, как для управления громкостью звука, используемого в script.js. Su código es el siguiente:

var counterMinutos = 25; var counterSegundos = 0; var descanso = true; 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 = ложь; descansos = 0; }} else {counterSegundos--; } // Cambiar texto if (counterSegundos> 9) {id = document.getElementById ("count"); id.innerHTML = counterMinutos + ":" + counterSegundos; } если (counterSegundos <= 9) {id = document.getElementById ("счетчик"); id.innerHTML = counterMinutos + ": 0" + counterSegundos; }}, 1); } // Слайдер - Аудио 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); }