Tarkennus: 5 vaihetta
Tarkennus: 5 vaihetta

Sisällysluettelo:

Anonim
Keskity
Keskity

En este instructables te guiaremos paso a paso para el desarrollo de una aplicación web adaptativa, que lupakirjan organisointi ja 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 problem propuesto for an docente y PhD Juan Vicente Pradilla Cerón para la asignatura Arquitectura de Sistemas Multimedia in program 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. Objetivon rehtori

2. Objetivos Secundarios

3. Aktiviteetit

4. Kronograama

5. Määritelmä käyttö

6. Trabajos relacionados

7. Requerimientos funcionales

8. Requerimientos no funcionales

9. Telecomunicaciones

10. Laitteisto

11. Ohjelmisto

Vaihe 1: Toistoja

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

  • Tietokoneeton
  • Sonidos CC0
  • Visual Studio -koodi
  • Skriptit.js

Los sonidos ambientales que se utilizarán son:

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

Vaihe 2: Visual Studio Code

Visual Studio -koodi
Visual Studio -koodi

Desarrollar el aplicativo se utilizará la applicación Visual Studio Code, el cual permite hacer uso de la libreria bootstrap y JavaScript.

Vaihe 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) on ennaltaehkäisevä Visual Studio Code -tuotteiden tuonti:

  1. VS -koodin etsijä, napsauta "New Folder" ja creamos 2 carpetas -kirjastoa: una para los audios y otra para las imágenes
  2. Arrastramos los audios y fotos en sus respectivas carpetas

Vaihe 4: Pantalla Principal

Pantalla Rehtori
Pantalla Rehtori

Para el desarrollo de la pantalla pääasiallinen valintamenettely, joka on tarkoitettu käytettäväksi 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

Keskity

Temporizador

En este temporizador utilizamos la Técnica Pomodoro de Francesco Cirillo. La cual divide el estudio ja 25 minuutin aktiviteetit, 5 minuutin sekvenssit

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

25:00

Iniciar

Estudio

Sonidos

Lluvia

50

Pajaros

CSS

CSS: ssä, joka on koodattu HTML -koodiin, estimoitu HTML -koodi, täydellinen värivaihtoehto fondolle, 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 {väri: #F45B69; }.logo-img {korkeus: 35 kuvapistettä; }.pää {padding-top: 20px; }.tempo {korkeus: auto; leveys: auto; raja-säde: 25 kuvapistettä; text-align: center; taustaväri: #F45B69; }.tempo h2 {font-size: 60px; pehmuste: 30px; väri valkoinen; }.tempo-painike {margin-bottom: 30px; } #est {väri: valkoinen; marginaali-pohja: 30 kuvapistettä; taustaväri: #df4e5a; raja-säde: 10 kuvapistettä; } #sounds {height: 400px; leveys: 100%; taustakuva: url ("https://i.ibb.co/997L37C/bg.jpg"); tausta-toisto: ei toista; tausta-asema: vasen; marginaali-20px; marginaali-pohja: 20 kuvapistettä; raja-säde: 50 kuvapistettä; pehmuste: 20px; } h3 {väri: valkoinen; }.rn {leveys: 100%; }.sld_val {väri: valkoinen; } #aud_lluvia {leveys: 100%; }

Vaihe 5: Temporizador

Lokitoimintojen toiminnallisuusohjelmisto on sovellus, jossa voit hallita äänenvoimakkuutta ja käyttää skriptiä.js. Su código es el siguiente:

var counterMinutos = 25; var counterSegundos = 0; var descanso = totta; 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"). InternalHTML = "Descanso"; counterMinutos = 5; descanso =! Descanso; konsoli. log (descansos);} else {document.getElementById ("temp-bg"). style.backgroundColor = "#F45B69"; document.getElementById ("est"). style.backgroundColor = "#df4e5a"; counterMinutos = 25; document.getElementById ("est"). internalHTML = "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"). internalHTML = "Descanso Largo"; descanso = epätosi; 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 = liukusäädin.arvo; // Näytä liukusäätimen oletusarvo // Päivitä nykyinen liukusäätimen arvo (aina, kun vedät liukusäätimen kahvaa) slider.oninput = function () {output.innerHTML = this.value; aud_lluvia.volume (tämä.arvo / 100); }