Fokus: 5 stappe
Fokus: 5 stappe

INHOUDSOPGAWE:

Anonim
Fokus
Fokus

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

Este proyecto surgió gracias al planteamiento of un problema propuesto por el docente and PhD Juan Vicente Pradilla Cerón para la asignatura Arquitectura of Sistemas Multimedia for programa académico Ingeniería Multimedia de la Universidad Autónoma de Occidente.

Para la realización de este proyecto se tuvieron en cuenta los sigunientes puntos:

1. Objetivo Skoolhoof

2. Objetivos Secundarios

3. Aktiwiteite

4. Cronograma

5. Definición de usuarios

6. Trabajos relacionados

7. Requerimientos funcionales

8. Requerimientos no funcionales

9. Telecomunicaciones

10. Hardeware

11. Sagteware

Stap 1: Recursos

Vir die verwesenliking van die web kan ons die volgende wenke herhaal:

  • Die rekenaar
  • Sonidos CC0
  • Visual Studio -kode
  • Scripts.js

Die beste aspekte wat ons kan gebruik, is:

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

Stap 2: Visual Studio -kode

Visual Studio -kode
Visual Studio -kode

Vir die gebruik van die gebruiklike Visual Studio -kode, kan die gebruik van die gebruik van die bootstrap en JavaScript gebruik word.

Stap 3: Invoer van media

Importation de medios
Importation de medios
Importation de medios
Importation de medios

Ons kan hierdie afbeeldings en sonde met die CC0 (Creative Commons Zero) gebruik vir die invoer van media in die Visual Studio -kode:

  1. Vir die ontdekking van die VS -kode, kan ons 'n nuwe lêergids met twee matte op die vloer klik:
  2. Daar is 'n goeie opname en foto's en 'n respekvolle tapyt

Stap 4: Pantalla -skoolhoof

Pantalla Skoolhoof
Pantalla Skoolhoof

As hoofbestuurder kan ons die tydelike gebruik van Pomodoro gebruik, sowel as 'n beskrywing van die funksionele funksies en die kontrole vir sonos.

Die volgende inligting kan as volg gebruik word:

ASM

Fokus

Temporizador

En este temporizador utilizamos la Técnica Pomodoro de Francesco Cirillo. La cual divide el estudio in 25 minutes of actividad, seguidos of 5 minutos de

beskrywing, en cada cuatro pomodoros 15 minute des descanso en lugar de 5.

25:00

Iniciar

Estudio

Sonidos

Lluvia

50

Pajaros

CSS

Die CSS is 'n unieke struktuur vir HTML, wat 'n spesifieke kleur, fondament, lettertipe, lettertipe, ens. Toelaat. En el código anterior se definió la la ubicación del archivo CSS, así como la librería que utiliza

h1 {kleur: #F45B69; }.logo-img {hoogte: 35px; }.main {padding-top: 20px; }.tempo {hoogte: motor; breedte: outomaties; grensradius: 25 px; teksbelyn: middel; agtergrond-kleur: #F45B69; }.tempo h2 {lettergrootte: 60px; opvulling: 30 px; kleur: wit; }.tempo-knoppie {marge-onderkant: 30px; } #est {kleur: wit; marge-onderkant: 30 px; agtergrond-kleur: #df4e5a; grensradius: 10 px; } #klanke {hoogte: 400px; breedte: 100%; agtergrond-beeld: url ("https://i.ibb.co/997L37C/bg.jpg"); background-repeat: no-repeat; agtergrond-posisie: links; marge-top: 20 px; marge-onderkant: 20 px; grensradius: 50 px; opvulling: 20 px; } h3 {kleur: wit; }.rn {breedte: 100%; }.sld_val {kleur: wit; } #aud_lluvia {breedte: 100%; }

Stap 5: Temporizador

Vir 'n tydelike funksie en 'n app, kan die beheer van die volume van die sagteware gebruik word in script.js. Soortgelyke inligting:

var counterMinutos = 25; var counterSegundos = 0; var descanso = waar; 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);} anders {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);}} anders {counterMinutos = 15; document.getElementById ("temp-bg"). styl. backgroundColor = "#2bb91e"; document.getElementById ("est ").style.backgroundColor ="#239419 "; document.getElementById ("est"). innerHTML = "Descanso Largo"; descanso = vals; descansos = 0; }} anders {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; // Wys die standaard skuifwaarde // Dateer die huidige skuifwaarde op (elke keer as u die skuifhandvatsel sleep) slider.oninput = function () {output.innerHTML = this.value; aud_lluvia.volume (hierdie.waarde / 100); }