Fokus: 5 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:32

En este instructables te guiaremos paso a paso para el desarrollo de una aplicació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 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 Načelnik

2. Objetivos Secundarios

3. Actividades

4. Cronograma

5. Definición de usuarios

6. Trabajos relacionados

7. Requerimientos funcionales

8. Requerimientos no funcionales

9. Telekomunikacije

10. Hardver

11. Softver

Korak 1: Rekursos

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

• Un Computador
• Sonidos CC0
• Kôd Visual Studija
• Skripte.js

Los sonidos ambientales que se utilizarán son:

• Lluvija
• Jao
• Viento
• Rayos
• Fuego
• Pájaros

Korak 2: Kôd Visual Studija

Za desarrollar el aplikaciju morate koristiti Visual Studio Code za primjenu, besplatni ovlašteni korisnik koristiti bootstrap y JavaScript.

Korak 3: Importación De Medios

Habiendo descargado las imágenes y sonidos con licence CC0 (Creative Commons Zero) potrebno je unaprijed unijeti za uvoz medija u Visual Studio Code:

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

Korak 4: Direktor Pantalla

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

El código para su desarrollo es el siguiente:

ASM

Usredotočenost

Temporizador

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 minuta de descanso en lugar de 5.

25:00

Početni

Estudio

Sonidos

Lluvija

50

Pajaros

CSS

El CSS es el encargado de la estructura estética del código HTML, permite definir color de fondo, tamaño de letra, tamaño de fondo, entre otros. En el código anterior definira ubicación del archivo CSS, kao la librería que iskorištavanje

h1 {boja: #F45B69; }.logo-img {visina: 35px; }.main {padding-top: 20px; }.tempo {visina: auto; širina: auto; obrub-radijus: 25px; poravnavanje teksta: središte; boja pozadine: #F45B69; }.tempo h2 {font-size: 60px; punjenje: 30px; boja: bijela; }.tempo gumb {margin-bottom: 30px; } #est {boja: bijela; margin-bottom: 30px; boja pozadine: #df4e5a; border-radius: 10px; } #zvukovi {visina: 400px; širina: 100%; background-image: url ("https://i.ibb.co/997L37C/bg.jpg"); pozadinsko ponavljanje: bez ponavljanja; background-position: lijevo; margin-top: 20px; margin-bottom: 20px; obrub-radijus: 50px; punjenje: 20px; } h3 {boja: bijela; }.rn {širina: 100%; }.sld_val {boja: bijela; } #aud_lluvia {širina: 100%; }

Korak 5: Temporizador

Para lograr la funcionalidad del temporizador en la app, así como el control del volumen de los sonidos se useliza un script.js. Su código es el siguiente:

var counterMinutos = 25; var counterSegundos = 0; var descanso = istina; var descansos = 1; funkcija 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; konzola. 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"). stil. backgroundColor = "#2bb91e"; document.getElementById ("procj ").style.backgroundColor ="#239419 "; document.getElementById ("est"). innerHTML = "Descanso Largo"; descanso = lažno; descansos = 0; }} else {counterSegundos--; } // Cambiar texto if (counterSegundos> 9) {id = document.getElementById ("count"); id.innerHTML = counterMinutos + ":" + counterSegundos; } if (counterSegundos <= 9) {id = document.getElementById ("broj"); id.innerHTML = counterMinutos + ": 0" + counterSegundos; }}, 1); } // Klizač - Audio var slider = document.getElementById ("myRange"); var output = document.getElementById ("demo"); var aud_lluvia = document.getElementById ("aud_lluvia"); aud_lluvia.onplay (); output.innerHTML = slider.value; // Prikaz zadane vrijednosti klizača // Ažuriranje trenutne vrijednosti klizača (svaki put kad povučete ručicu klizača) slider.oninput = function () {output.innerHTML = this.value; aud_lluvia.volume (this.value / 100); }