Pokus: 5 Hakbang
Pokus: 5 Hakbang

Talaan ng mga Nilalaman:

Anonim
Pokus
Pokus

Ang mga itinuturo na ito ay ang mga paso para sa isang desarrollo de una aplicación web adaptativa, que permitirá organisador 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 y PhD Juan Vicente Pradilla Cerón para sa asignatura Arquitectura de Sistemas Multimedia del programa académico Ingeniería Multimedia de la Universidad Autónoma de Occidente.

Para sa realización de este proyecto se tuvieron en cuenta los siguientes puntos:

1. Principal ng Objetivo

2. Objetivos Secundarios

3. Actividades

4. Cronograma

5. Definición de usuarios

6. Trabajos relacionados

7. Requerimientos funcionales

8. Requerimientos walang funcionales

9. Telecomunicaciones

10. Hardware

11. Software

Hakbang 1: Mga Recursos

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

  • Un Computador
  • Sonidos CC0
  • Code ng Visual Studio
  • Mga script.js

Los sonidos ambientales que se utilizarán son:

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

Hakbang 2: Visual Studio Code

Code ng Visual Studio
Code ng Visual Studio

Para sa pagtatasa ng mga aplikasyon sa paggamit ng Visual Studio Code, maaari mong pahintulutan ang mga ito sa pamamagitan ng library ng bootstrap at JavaScript.

Hakbang 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 sa pag-import ng mga talata sa Visual Studio Code kung saan mo makikita:

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

Hakbang 4: Pantalla Principal

Pantalla Principal
Pantalla Principal

Para sa desarrollo de la pantalla na punong-guro upang mag-iwan ng pansamantalang Pomodoro, bilang isang kompromiso para sa mga kontrol ng mga anak.

El código para su desarrollo es el siguiente:

ASM

Pokus

Temporizador

En este temporizador utilizamos la Técnica Pomodoro de Francesco Cirillo. Maghati-hatiin ito sa 25 minuto sa actividad, seguidos de 5 minuto

descanso, y cada cuatro pomodoros 15 minuto mula sa descanso en lugar de 5.

25:00

Iniciar

Estudio

Sonidos

Lluvia

50

Pajaros

CSS

El CSS es el encargado de la es konstrura 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, bilang como la librería que utiliza

h1 {kulay: # F45B69; }.logo-img {taas: 35px; }. pangunahing {padding-top: 20px; }.tempo {taas: auto; lapad: auto; border-radius: 25px; text-align: gitna; kulay sa background: # F45B69; }.tempo h2 {font-size: 60px; padding: 30px; kulay puti; }.tempo button {margin-ilalim: 30px; } #est {color: puti; margin-ilalim: 30px; background-color: # df4e5a; border-radius: 10px; } #sounds {taas: 400px; lapad: 100%; background-image: url ("https://i.ibb.co/997L37C/bg.jpg"); paulit-ulit: hindi ulitin; background-posisyon: kaliwa; tuktok ng margin: 20px; margin-ilalim: 20px; border-radius: 50px; padding: 20px; } h3 {kulay: puti; }.rn {lapad: 100%; }.sld_val {kulay: puti; } #aud_lluvia {lapad: 100%; }

Hakbang 5: Temporizador

Para sa lograr la funcionalidad del temporizador en la app, bilang kontrol para sa volumen de los sonidos se utiliza un script.js. Su código es el siguiente:

var counterMinutos = 25; var counterSegundos = 0; var descanso = totoo; var descansos = 1; function iniciarContador () {setInterval (function () {// Mostrar texto document.getElementById ("est"). style.display = "block"; // Iniciar Contador kung (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. mag-log (descansos);} iba pa {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);}} iba pa {counterMinutos = 15; document.getElementById ("temp-bg"). style. backgroundColor = "# 2bb91e"; document.getElementById ("est ").style.backgroundColor =" # 239419 "; document.getElementById ("est"). panloobHTML = "Descanso Largo"; descanso = false; descansos = 0; }} iba pa {counterSegundos--; } // Cambiar texto if (counterSegundos> 9) {id = document.getElementById ("count"); id.innerHTML = counterMinutos + ":" + counterSegundos; } kung (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; // Ipakita ang default na halaga ng slider // I-update ang kasalukuyang halaga ng slider (sa tuwing i-drag mo ang hawakan ng slider) slider.oninput = function () {output.innerHTML = this.value; aud_lluvia.volume (this.value / 100); }