Fokus: 5 Schritte
Fokus: 5 Schritte

Inhaltsverzeichnis:

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 intervallos (haciendo uso de la técnica Pomodoro) und escuchar una mezcla de ruido con sonidos ambientales.

Este proyecto surgió gracias al planteamiento de un problema propuesto por el docente y PhD Juan Vicente Pradilla Cerón para asignatura Arquitectura de Sistemas Multimedia del programa academico 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 Principal

2. Objetivos Secundarios

3. Aktivitäten

4. Cronogramme

5. Definición de usuarios

6. Trabajos relacionados

7. Requerimientos funcionales

8. Requerimientos no funcionales

9. Telekommunikation

10. Hardware

11. Software

Schritt 1: Rekursionen

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

  • Un Computador
  • Sonidos CC0
  • Visual Studio-Code
  • Skripte.js

Los sonidos ambientales que se utilizarán son:

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

Schritt 2: Visual Studio-Code

Visual Studio-Code
Visual Studio-Code

Um die Anwendung für die Anwendung von Visual Studio Code zu verwenden, können Sie die erforderliche Lizenz für Bootstrap- und JavaScript-Bibliotheken verwenden.

Schritt 3: Importación De Medios

Importación De Medios
Importación De Medios
Importación De Medios
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 in dieser Version:

  1. En el explorador de VS Code, en la Carpeta del Proyecto le Damos klicken Sie auf den Botón "New Folder" und creamos 2 Carpetas: una para los audios y otra para las imágenes
  2. Arrastramos los audios y fotos en sus respektivas carpetas

Schritt 4: Pantalla Principal

Pantalla-Direktor
Pantalla-Direktor

Para el desarrollo de la pantalla Principal se optó por usar el temporizador Pomodoro, así como una Beschreibung 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 minutos de

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

25:00

Iniciar

Estudio

Sonidos

Lluvia

50

Pajaros

CSS

Das CSS ist die Verschlüsselung des HTML-Codes, erlaubt die Definition der Farbe des Fondos, 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 libreía que utiliza

h1 { Farbe: #F45B69; }.logo-img { Höhe: 35px; }.main { padding-top: 20px; }.tempo { Höhe: auto; Breite: automatisch; Randradius: 25px; Textausrichtung: Mitte; Hintergrundfarbe: #F45B69; }.tempo h2{ Schriftgröße: 60px; Polsterung: 30px; Farbe weiß; }. Tempo-Schaltfläche{ Margin-Bottom: 30px; } #est { Farbe: weiß; Rand-unten: 30px; Hintergrundfarbe: #df4e5a; Randradius: 10px; } #sounds { Höhe: 400px; Breite: 100 %; Hintergrundbild: url("https://i.ibb.co/997L37C/bg.jpg"); Hintergrundwiederholung: keine Wiederholung; Hintergrundposition: links; Rand oben: 20px; Rand-unten: 20px; Randradius: 50px; Polsterung: 20px; } h3{ Farbe: weiß; }.rn{ Breite: 100%; }.sld_val { Farbe: weiß; } #aud_lluvia { Breite: 100%; }

Schritt 5: Temporizador

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

var counterMinutos = 25; var counterSegundos = 0; var descanso = wahr; 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 = falsch; 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-Ausgabe = document.getElementById("Demo"); var aud_lluvia = document.getElementById("aud_lluvia"); aud_lluvia.onplay(); output.innerHTML = slider.value; // Zeigen Sie den Standardwert des Schiebereglers an // Aktualisieren Sie den aktuellen Schiebereglerwert (jedes Mal, wenn Sie den Schieberegler ziehen) slider.oninput = function () { output.innerHTML = this.value; aud_lluvia.volume (dieser. Wert / 100); }