التركيز: 5 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:36

En este Instructables te guiaremos paso a paso para el desarrollo de una aplicación web adaptativa، que allowirá organisar un estudio por interalos (haciendo uso de la técnica Pomodoro) y escuchar una mezidoscla de ruido con son ambientales.

Este proyecto Surgió gracias al planteamiento de un problema Propuesto por el docente y PhD Juan Vicente Pradilla Cerón para la asignatura Arquitectura de Sistemas Multimedia del 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 siguientes puntos:

1. Objetivo الرئيسي

2. Objetivos Secundarios

3. تنشيطات

4. كرونوجراما

5. تعريف usuarios

6. Trabajos relacionados

7. Requerimientos funcionales

8. Requerimientos no funcionales

9. الاتصالات عن بعد

10. الأجهزة

11. البرمجيات

الخطوة 1: الموارد

Para realizar la aplicación web se hará uso de los siguientes الموارد:

• Un Computador
• Sonidos CC0.0
• كود الاستوديو المرئي
• البرامج النصية.js

Los sonidos ambientales que se utilizarán son:

• لوفيا
• أولاس
• فينتو
• رايوس
• فويغو
• باجاروس

الخطوة الثانية: كود الاستوديو المرئي

يجب استخدام رمز الاستوديو المرئي باستخدام برنامج Visual Studio Code باستخدام برنامج تشغيل الكمبيوتر وجافا سكريبت.

الخطوة 3: Importación De Medios

Habiendo descargado las imágenes y sonidos con licencia CC0 (Creative Commons Zero) previamente para importar los medios al Visual Studio Code se hace lo siguiente:

1. En el explorador 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

الفقرة الرئيسية للمكتب الرئيسي هي من أجل الاستخدام المؤقت لبومودورو ، كما هو الحال بالنسبة لوصف الوظائف وفقدان السيطرة على لوس سونيدوس.

El código para su desarrollo es el siguiente:

ASM

ركز

Temporizador

En este temporizador useizamos la Técnica Pomodoro de Francesco Cirillo. La cual divide el estudio en 25 minutos de activeidad، 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 el 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 {color: # F45B69؛ }.logo-img {height: 35px؛ }.main {padding-top: 20px؛ }.tempo {height: auto؛ العرض: تلقائي ؛ نصف قطر الحدود: 25 بكسل ؛ محاذاة النص: مركز ؛ لون الخلفية: # F45B69 ؛ }.tempo h2 {font-size: 60px؛ الحشو: 30 بكسل ؛ اللون الابيض؛ }.tempo button {margin-bottom: 30px؛ } #est {اللون: أبيض؛ الهامش السفلي: 30 بكسل ؛ لون الخلفية: # df4e5a ؛ نصف قطر الحدود: 10 بكسل ؛ } # الأصوات {الارتفاع: 400 بكسل؛ العرض: 100٪؛ صورة الخلفية: url ("https://i.ibb.co/997L37C/bg.jpg") ؛ تكرار الخلفية: لا تكرار ؛ موضع الخلفية: يسار ؛ أعلى الهامش: 20 بكسل ؛ الهامش السفلي: 20 بكسل ؛ نصف قطر الحدود: 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 = صحيح ؛ 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)؛} 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"). style. 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 ("count")؛ id.innerHTML = counterMinutos + ":" + counterSegundos ؛ } if (counterSegundos <= 9) {id = document.getElementById ("count")؛ id.innerHTML = counterMinutos + ": 0" + counterSegundos ؛ }} ، 1) ؛ } // Slider - شريط تمرير الصوت var = document.getElementById ("myRange") ؛ var output = document.getElementById ("demo") ؛ var aud_lluvia = document.getElementById ("aud_lluvia") ؛ aud_lluvia.onplay () ، output.innerHTML = slider.value ؛ // عرض قيمة شريط التمرير الافتراضية // تحديث قيمة شريط التمرير الحالية (في كل مرة تقوم فيها بسحب مقبض شريط التمرير) slider.oninput = function () {output.innerHTML = this.value؛ aud_lluvia.volume (هذه القيمة / 100) ؛ }