Կենտրոնացում ՝ 5 քայլ

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:45

Ուշադրություն դարձրեք այն ուղեցույցներին, որոնք կօգնեն ձեզ կատարելագործել վեբ հարմարվողականությունը, որը թույլ է տալիս կազմակերպել միջերեսների ուսումնասիրություն (որն օգտագործվում է որպես Pomodoro) և escuchar una mezcla de ruido con sonidos ambientales:

Գոյություն ունի պրոբլեմներ, որոնք ուղղված են եղել խնդրահարույց խնդրին և դոկտորանտուրայի դոկտորի կոչմանը:

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

1. Objetivo տնօրեն

2. Objetivos Secundarios

3. Ակտիվիվադադներ

4. ronամանակագրություն

5. Օգտագործողների սահմանում

6. Trabajos relacionados

7. Requerimientos funcionales

8. Requerimientos no funcionales

9. Հեռահաղորդակցման միջոցներ

10. Սարքավորումներ

11. Softwareրագրային ապահովում

Քայլ 1: Recursos

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

• Un Computador
• Sonidos CC0
• Visual Studio կոդ
• Scripts.js

Los sonidos ambientales que se utilizarán son:

• Լլուվիա
• Օլաս
• Վիենտո
• Ռայոս
• Ֆուեգո
• Պաջարոս

Քայլ 2: Visual Studio կոդ

Օգտագործելով Visual Studio Code- ի կիրառումը, օգտագործեք թույլտվություն ՝ օգտագործելով անվճար bootstrap և JavaScript:

Քայլ 3: Ներածություն Medios- ին

Haciendo descargado las imágenes y sonidos con licencia CC0 (Creative Commons Zero) կանխարգելման համար մեդիա մեդիա տեսողական ստուդիայի կոդի միջոցով անհրաժեշտ է.

1. VS Code, en carpeta del proyecto le damos կտտացրեք «Նոր թղթապանակ» և 2 գորգերի գորգերի վրա.
2. Arrastramos los audios y fotos en sus respectivas carpetas

Քայլ 4: Pantalla Principal

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

Ֆոկուս

Տեմպորիզադոր

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 minutos de descanso en lugar de 5:

25:00

Iniciar

Estudio

Սոնիդոս

Լլուվիա

50

Պաջարոս

CSS

El CSS- ը el encargado de la estructura estética del código HTML- ի, թույլատրելի գույնի որոշման, թույլտվության թույլտվության, ժամանակի սիրո, մուտքի թույլտվության համար: En el código anterior se definió la ubicación del archivo CSS, así como la librería que utiliza

h1 {գույնը ՝ #F45B69; }.logo-img {բարձրությունը `35px; }.հիմնական {padding-top: 20px; }.tempo {բարձրությունը ՝ ավտո; լայնությունը `ավտոմատ; սահման-շառավիղ `25px; text-align: կենտրոն; ֆոնի գույնը ՝ #F45B69; }.tempo h2 {տառատեսակի չափը `60px; լիցքավորում `30px; գույնը `սպիտակ; }.tempo կոճակը {margin-bottom: 30px; } #est {գույնը ՝ սպիտակ; լուսանցք-ներքև ՝ 30 պիքսել; ֆոնի գույնը ՝ #df4e5a; սահմանային շառավիղ `10 պիքսել; } #sounds {բարձրությունը ՝ 400px; լայնությունը `100%; ֆոնային պատկեր ՝ url ("https://i.ibb.co/997L37C/bg.jpg"); ֆոն-կրկնել. ոչ-կրկնել; ֆոնային դիրքը `ձախ; margin-top: 20px; լուսանցք-ներքև ՝ 20 պիքսել; սահմանային շառավիղ `50px; լիցքավորում `20px; } h3 {գույնը `սպիտակ; }.rn {լայնությունը `100%; }.sld_val {գույնը `սպիտակ; } #aud_lluvia {լայնությունը `100%; }

Քայլ 5: Տեմպորիզադոր

Para lograr la funcionalidad del temporizador en la app, así como elo 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 = ճշմարիտ; var descansos = 1; գործառույթը iniciarContador () {setInterval (գործառույթը () {// 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; մխիթարել: 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 = կեղծ; descansos = 0; }} այլ {counterSegundos--; } // Cambiar texto if (counterSegundos> 9) {id = document.getElementById («հաշվել»); id.innerHTML = counterMinutos + ":" + counterSegundos; } if (counterSegundos <= 9) {id = document.getElementById («հաշվել»); id.innerHTML = counterMinutos + ": 0" + counterSegundos; }}, 1); } // Slider - Audio var slider = document.getElementById ("myRange"); var ելք = document.getElementById («դեմո»); var aud_lluvia = document.getElementById ("aud_lluvia"); aud_lluvia.onplay (); output.innerHTML = slider.value; // Displayուցադրել կանխադրված սահիչի արժեքը // Թարմացրեք ընթացիկ սահիչի արժեքը (ամեն անգամ, երբ սահեցրեք բռնիչը) slider.oninput = գործառույթը () {output.innerHTML = this.value; aud_lluvia.volume (this.value / 100); }