Focus : 5 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:05

En este instructables 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) y escuchar una mezcla de ruido con sonidos ambientales.

Este proyecto surgió gracias al plantamiento 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. Objectif Principal

2. Objetivos Secundarios

3. Activités

4. Chronogramme

5. Definición de usuarios

6. Trabajos relacionados

7. Fonctionnalités requises

8. Requerimientos no funcionales

9. Télécommunications

10. Matériel

11. Logiciel

Étape 1: Recursos

Pour réaliser l'application web se hará uso de los siguientes recursos:

• Un ordinateur
• Sonidos CC0
• Code Visual Studio
• Scripts.js

Los sonidos ambientales que se utilizarán fils:

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

Étape 2: Code Visual Studio

Pour télécharger l'application et l'utilisation de l'application Visual Studio Code, qui autorise l'utilisation de la libre amorce et de JavaScript.

Étape 3: Importación De Medios

Habiendo descargado las imágenes y sonidos con licencia CC0 (Creative Commons Zero) previamente para importar los medias 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

Étape 4: Pantalla Principal

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

El código para su desarrollo es el siguiente:

ASM

Se concentrer

Temporisateur

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

25:00

Iniciar

Studio

Sonidos

Lluvia

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 se definió la ubicación del archivo CSS, así como la librería que utiliza

h1 { couleur: #F45B69; }.logo-img { hauteur: 35px; }.main { padding-top: 20px; }.tempo { hauteur: auto; largeur: automatique; rayon de bordure: 25px; text-align: centre; couleur d'arrière-plan: #F45B69; }.tempo h2{ font-size: 60px; rembourrage: 30px; Couleur blanche; }.tempo button{ margin-bottom: 30px; } #est { couleur: blanc; marge inférieure: 30 px; couleur d'arrière-plan: #df4e5a; rayon de bordure: 10px; } #sons { hauteur: 400px; largeur: 100 %; image d'arrière-plan: url ("https://i.ibb.co/997L37C/bg.jpg"); background-repeat: pas de répétition; position d'arrière-plan: gauche; marge supérieure: 20 px; marge inférieure: 20 px; rayon de bordure: 50px; rembourrage: 20px; } h3{ couleur: blanc; }.rn{ largeur: 100 %; }.sld_val { couleur: blanc; } #aud_lluvia { largeur: 100 %; }

Étape 5: Temporisateur

Pour loger la fonctionnalité du temps et de l'application, ainsi que le contrôle du volume de los sonidos se utiliza un script.js. Su código es el siguiente:

var counterMinutos = 25; var counterSegundos = 0; var descanso = vrai; 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 = faux; 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 = slider.value; // Affiche la valeur par défaut du curseur // Met à jour la valeur actuelle du curseur (à chaque fois que vous faites glisser la poignée du curseur) slider.oninput = function () { output.innerHTML = this.value; aud_lluvia.volume(this.value / 100); }