فهرست مطالب:

تمرکز: 5 مرحله
تمرکز: 5 مرحله

تصویری: تمرکز: 5 مرحله

تصویری: تمرکز: 5 مرحله
تصویری: مغزتو توی 30 ثانیه ریست کن | حال بهتر افزایش تمرکز و کنترل ذهن 2024, دسامبر
Anonim
تمرکز
تمرکز

از این رو می توانید دستورالعمل های لازم را برای پیاده سازی وب سایت سازگار کنید ، این اجازه را به شما می دهد تا از فاصله زمانی (با استفاده از روش های فنی Pomodoro) و با استفاده از سیستم های مختلف محیطی استفاده کنید.

برای پیشگیری از بیماریهای پیشین در زمینه کمک به دکترا و خوان دکتر ویکسنته پرادیلا سرون در زمینه برنامه های چند رسانه ای سیستم برنامه نویسی دانشگاه علوم پزشکی Occidente

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

1. Objetivo اصلی

2. Objetivos Secundarios

3. Actividades

4. Cronograma

5. Definición de usuarios

6. Trabajos relacionados

7. Requerimientos funcionales

8. Requerimientos no funcionales

9. Telecomunicaciones

10. سخت افزار

11. نرم افزار

مرحله 1: Recursos

برای پیاده سازی وب سایت خود در مورد استفاده از روشهای زیر استفاده کنید:

  • Un Computador
  • Sonidos CC0
  • کد ویژوال استودیو
  • اسکریپت.js

Los sonidos ambientales que se utilizarán son:

  • لولویا
  • اولاس
  • وینتو
  • رایوس
  • فوئگو
  • پاجاروس

مرحله 2: کد ویژوال استودیو

کد ویژوال استودیو
کد ویژوال استودیو

برای استفاده از نرم افزار ویژوال استودیو کد ، می توانید از راه اندازی بوت استرپ رایگان در JavaScript استفاده کنید.

مرحله 3: Import Decios

Import Decios
Import Decios
Import Decios
Import Decios

Habiendo descargado las imágenes y sonidos con licencia CC0 (Creative Commons Zero) برای واردات از طریق رسانه های Visual Studio Code به این ترتیب می توانید:

  1. En el explorerador de VS Code، en la carpeta del proyecto le damos click al botón "New Folder" y creamos 2 carpetas: una para los audios y otra para las imágenes
  2. Arrastramos los audios y fotos en sus respectivas carpetas

مرحله 4: مدیر Pantalla

مدیر Pantalla
مدیر Pantalla

Para el desarrollo de la pantalla principal se optó por usar el temporizador Pomodoro ، aso 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

اینیسیار

استودیو

سونیدوس

لولویا

50

پاجاروس

CSS

El CSS es encargado de la estructura 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، así como la librería que utiliza

h1 {رنگ: #F45B69؛ }.logo-img {ارتفاع: 35 پیکسل؛ }.main {padding-top: 20px؛ }.tempo {ارتفاع: خودکار؛ عرض: خودکار؛ border-radius: 25px؛ text-align: center؛ background-color: #F45B69؛ }.tempo h2 {font-size: 60px؛ بالشتک: 30 پیکسل ؛ رنگ سفید؛ }.tempo button {margin-bottom: 30px؛ } #est {رنگ: سفید ؛ margin-bottom: 30px؛ background-color: #df4e5a؛ مرز شعاع: 10 پیکسل؛ } #sounds {height: 400px؛ عرض: 100؛ ؛ background-image: url ("https://i.ibb.co/997L37C/bg.jpg")؛ background-repeat: بدون تکرار؛ background-position: left؛ margin-top: 20px؛ margin-bottom: 20px؛ مرز شعاع: 50 پیکسل؛ بالشتک: 20 پیکسل ؛ } h3 {رنگ: سفید ؛ }.rn {عرض: 100٪؛ }.sld_val {رنگ: سفید ؛ } #aud_lluvia {عرض: 100٪؛ }

مرحله 5: Temporizador

Para lograr la funcionalidad del temporizador en la app، así como el 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 = true؛ var descansos = 1؛ function 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 = false؛ descansos = 0؛ }} else {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؛ // نمایش مقدار پیش فرض لغزنده // به روز رسانی مقدار نوار لغزنده فعلی (هربار دسته کشویی را بکشید) slider.oninput = function () {output.innerHTML = this.value؛ aud_lluvia.volume (this.value / 100) ؛ }

توصیه شده: