Fókusz: 5 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:39

En este instructables te guiaremos paso a paso para el desarrollo de una aplicación web adaptativa, que engedélyes szervezés és 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 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. Objetivo igazgató

2. Objetivos Secundarios

3. Actividades

4. Kronográma

5. Definición de usuarios

6. Trabajos relacionados

7. Requerimientos funcionales

8. Requerimientos no funcionales

9. Telecomunicaciones

10. Hardver

11. Szoftver

1. lépés: Rekurzusok

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

• Computador
• Sonidos CC0
• Visual Studio kód
• Szkriptek.js

Los sonidos ambientales que se utilizarán son:

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

2. lépés: Visual Studio kód

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

3. lépés: Importación De Medios

Habiendo descargado las imágenes y sonidos con licencia CC0 (Creative Commons Zero) previsionate import import 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" 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. lépés: Pantalla Principal

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:

ASM

Fókusz

Temporizador

En este temporizador utilizamos la Técnica Pomodoro de Francesco Cirillo. La cual divide el estudio és 25 perces aktivitás, 5 perces kombinációk

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

25:00

Iniciar

Estudio

Sonidos

Lluvia

50

Pajaros

CSS

A CSS és a HTML kód, az estructura estética del código HTML, mindenféle színű 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 {szín: #F45B69; }.logo-img {magasság: 35 képpont; }.main {padding-top: 20px; }.tempo {magasság: auto; szélesség: automatikus; határsugár: 25 képpont; text-align: center; háttérszín: #F45B69; }.tempo h2 {font-size: 60px; párnázás: 30 képpont; fehér szín; }.tempo gomb {margin-bottom: 30px; } #est {szín: fehér; alsó margó: 30 képpont; háttérszín: #df4e5a; határ-sugár: 10 képpont; } #hangok {magasság: 400 képpont; szélesség: 100%; háttérkép: url ("https://i.ibb.co/997L37C/bg.jpg"); háttér-ismétlés: nincs ismétlés; háttér-helyzet: bal; margin-top: 20 képpont; margin-bottom: 20 képpont; határ-sugár: 50 képpont; párnázás: 20 képpont; } h3 {szín: fehér; }.rn {szélesség: 100%; }.sld_val {szín: fehér; } #aud_lluvia {szélesség: 100%; }

5. lépés: Temporizador

A naplózás funkciók temporizador en app, asio 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 = igaz; 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"). InternalHTML = "Descanso"; counterMinutos = 5; descanso =! Descanso; konzol. log (descansos);} else {document.getElementById ("temp-bg"). style.backgroundColor = "#F45B69"; document.getElementById ("est"). style.backgroundColor = "#df4e5a"; counterMinutos = 25; document.getElementById ("est"). internalHTML = "Estudio"; descanso =! descanso; descansos ++; console.log (descansos);}} else {counterMinutos = 15; document.getElementById ("temp-bg"). backgroundColor = "#2bb91e"; document.getElementById ("est ").style.backgroundColor ="#239419 "; document.getElementById ("est"). internalHTML = "Descanso Largo"; descanso = hamis; 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 output = document.getElementById ("demo"); var aud_lluvia = document.getElementById ("aud_lluvia"); aud_lluvia.onplay (); output.innerHTML = csúszka.érték; // Az alapértelmezett csúszkaérték megjelenítése // Frissítse az aktuális csúszkaértéket (minden alkalommal, amikor meghúzza a csúszka fogantyúját) slider.oninput = function () {output.innerHTML = this.value; aud_lluvia.volumen (this.value / 100); }