Foco: 5 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:34

En este instructables te guiaremos paso a paso para el desarrollo de una aplicación web adaptativa, que permitirá un estudio por intervalos (haciendo uso de la técnica Pomodoro) y escuchar una mezcla de ruido con sonidos ambientales.

Este projeto cirúrgico gracias al planteamiento de um problema proposto para o docente e PhD Juan Vicente Pradilla Cerón para a assinatura Arquitectura de Sistemas Multimídia do programa acadêmico Ingeniería Multimedia da Universidad Autónoma de Occidente.

Para a realização deste projeto se tuvieron en cuenta los siguientes pontos:

1. Objetivo Principal

2. Objetivos Secundarios

3. Atividades

4. Cronograma

5. Definición de usuarios

6. Trabajos relacionados

7. Requerimientos funcionais

8. Requerimientos no funcionales

9. Telecomunicaciones

10. Hardware

11. Software

Etapa 1: Recursos

Para realizar la aplicación web se hará use de los siguientes resources:

• Un Computador
• Sonidos CC0
• Código Visual Studio
• Scripts.js

Los sonidos ambientales que se utilizarán son:

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

Etapa 2: Código do Visual Studio

Para desarrollar o aplicativo se utiliza a aplicação Visual Studio Code, el cual permite o uso da biblioteca de bootstrap y JavaScript.

Etapa 3: Importación De Medios

Acesse as imagens e os sons com licença CC0 (Creative Commons Zero) previamente para importar os meios de comunicação para o Visual Studio Code se hace lo siguiente:

1. No explorador de VS Code, na carpeta do projeto os damos, clique no botão "New Folder" e criamos 2 carpetas: um para os áudios e outra para as imagens
2. Arrastramos los áudios y fotos en sus encostas carpetas

Etapa 4: Pantalla Principal

Para o desarrollo de la pantalla principal se opta por usar o temporizador Pomodoro, assim como uma descrição de su funcionamiento e los controles para los sonidos.

El código para seu desarrollo es el siguiente:

ASM

Foco

Temporizador

En este temporizador utiliza a Técnica Pomodoro de Francesco Cirillo. La cual divide el estudio em 25 minutos de atividade, seguidos de 5 minutos de

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

25:00

Iniciar

Estudio

Sonidos

Lluvia

50

Pajaros

CSS

O CSS é o encarnado da estrutura estética do código HTML, permite definir a cor do fundo, o tamanho da letra, o tamanho do fundo, entre outros. No código anterior, você define a liberação do arquivo CSS, assim como a biblioteca que utiliza

h1 {cor: # F45B69; }.logo-img {altura: 35px; }.main {padding-top: 20px; }.tempo {altura: automático; largura: automático; raio da borda: 25px; alinhamento de texto: centro; cor de fundo: # F45B69; }.tempo h2 {tamanho da fonte: 60px; preenchimento: 30px; cor branca; } botão.tempo {margin-bottom: 30px; } #est {color: white; margin-bottom: 30px; cor de fundo: # df4e5a; raio da borda: 10px; } #sounds {height: 400px; largura: 100%; imagem de fundo: url ("https://i.ibb.co/997L37C/bg.jpg"); repetição de fundo: sem repetição; posição de fundo: esquerda; margem superior: 20px; margin-bottom: 20px; raio da borda: 50px; preenchimento: 20px; } h3 {cor: branco; }.rn {largura: 100%; }.sld_val {cor: branco; } #aud_lluvia {largura: 100%; }

Etapa 5: Temporizador

Para obter a funcionalidade do temporizador no aplicativo, assim como o controle do volume dos sons se utiliza o script.js. Su código é o siguiente:

var counterMinutos = 25; var counterSegundos = 0; var descanso = verdadeiro; 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 = falso; 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 - Áudio var slider = document.getElementById ("myRange"); var output = document.getElementById ("demo"); var aud_lluvia = document.getElementById ("aud_lluvia"); aud_lluvia.onplay (); output.innerHTML = slider.value; // Exibe o valor padrão do controle deslizante // Atualiza o valor atual do controle deslizante (cada vez que você arrasta a alça do controle deslizante) slider.oninput = function () {output.innerHTML = this.value; aud_lluvia.volume (this.value / 100); }