Fokus: 5 steg
Fokus: 5 steg

Innehållsförteckning:

Anonim
Fokus
Fokus

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 planteamiento de un problema propuesto por el docente and 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 och cuenta los siguientes puntos:

1. Objetivo -rektor

2. Objetivos Secundarios

3. Aktiveringar

4. Kronogram

5. Definición de usuarios

6. Trabajos relacionados

7. Requerimientos funcionales

8. Requerimientos no funcionales

9. Telecomunicaciones

10. Hårdvara

11. Programvara

Steg 1: Recursos

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

  • Un Computador
  • Sonidos CC0
  • Visual Studio -kod
  • Scripts.js

Los sonidos ambientales que se utilizarán son:

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

Steg 2: Visual Studio -kod

Visual Studio -kod
Visual Studio -kod

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

Steg 3: Importación De Medios

Importación De Medios
Importación De Medios
Importación De Medios
Importación De Medios

Här kan du ladda ner bilder och bilder med licensen CC0 (Creative Commons Zero) för att importera media till Visual Studio -koden:

  1. En el explorador de VS Code, en la carpeta del proyecto le damos click al botón "New Folder" and creamos 2 carpetas: una para los audios y otra para las imágenes
  2. Arrastramos los audios y fotos en sus respectivas carpetas

Steg 4: Pantalla Principal

Pantalla rektor
Pantalla rektor

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

Fokus

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 minutesos de

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

25:00

Iniciar

Estudio

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

h1 {färg: #F45B69; }.logo-img {höjd: 35px; }.main {padding-top: 20px; }.tempo {höjd: auto; bredd: auto; gränsradie: 25px; text-align: center; bakgrundsfärg: #F45B69; }.tempo h2 {font-size: 60px; vaddering: 30px; färg vit; }.tempo-knapp {marginal-botten: 30px; } #est {färg: vit; marginal-botten: 30px; bakgrundsfärg: #df4e5a; gränsradie: 10px; } #ljud {höjd: 400px; bredd: 100%; bakgrundsbild: url ("https://i.ibb.co/997L37C/bg.jpg"); bakgrund-upprepa: ingen upprepning; bakgrundsposition: vänster; marginal-topp: 20px; marginal-botten: 20px; gränsradie: 50px; vaddering: 20px; } h3 {färg: vit; }.rn {bredd: 100%; }.sld_val {färg: vit; } #aud_lluvia {bredd: 100%; }

Steg 5: Temporizador

Para lograr la funcionalidad del temporizador en la app, así 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 = 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; konsol. 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"). backgroundColor = "#2bb91e"; document.getElementById ("est ").style.backgroundColor ="#239419 "; document.getElementById ("est"). innerHTML = "Descanso Largo"; descanso = falskt; descansos = 0; }} annat {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; // Visa standardreglervärdet // Uppdatera det aktuella skjutreglaget (varje gång du drar i reglaget) slider.oninput = function () {output.innerHTML = this.value; aud_lluvia.volym (this.value / 100); }