फोकस: 5 कदम

2024 लेखक: John Day | [email protected]. अंतिम बार संशोधित: 2024-01-30 09:18

एन एस्टे इंस्ट्रक्टेबल्स ते गुइरेमोस पासो ए पासो पैरा एल डेसरोलो डी उना एप्लिकेशंस वेब एडेप्टेटिवा, क्यू परमिटिरा ऑर्गेनाइजर अन एस्टुडियो पोर इंटरवलोस (हैसिएन्डो यूसो डे ला टेक्निका पोमोडोरो) और एस्कुचर उना मेज़्क्ला डे रुइडो कॉन सोनिडोस एम्बिएंटेल्स।

एस्टे प्रोयेक्टो सर्जियो ग्रासियास अल प्लांटेमिएंटो डी अन प्रॉब्लमिया प्रोप्यूस्टो पोर एल डॉसेंटे और पीएचडी जुआन विसेंटे प्रेडिला सेरोन पैरा ला असिग्नतुरा आर्किटेक्टुरा डी सिस्टेमास मल्टीमीडिया डेल प्रोग्रामा एकेडेमिको इंजेनिरिया मल्टीमीडिया डे ला यूनिवर्सिडेड ऑटोनोमा डी ऑक्सिडेंट।

पैरा ला रियलिज़ेसिओन डे एस्टे प्रॉयक्टो से टुविएरोन एन कुएंता लॉस सिगुएंटेस पंटोस:

1.ऑब्जेटिवो प्रिंसिपल

2. Objetivos Secundarios

3. एक्टीविडेज

4. क्रोनोग्राम

5. परिभाषा डी usuarios

6. Trabajos relacionados

7. Requerimientos funcionales

8. आवश्यकताएँ नहीं funcionales

9. दूरसंचार संचार

10. हार्डवेयर

11. सॉफ्टवेयर

चरण 1: रिकर्सोस

पैरा रियलिज़र ला एप्लिकेशन वेब से हर उसो डे लॉस सिगुएंटेस रिकर्सोस:

• अन कंप्यूटाडोर
• सोनिडोस सीसी0
• विजुअल स्टूडियो कोड
• स्क्रिप्ट.js

लॉस सोनिडोस एम्बिएंटेलस क्यू से यूटिलिज़रन बेटा:

• लुविया
• ओलासी
• विएंतो
• रेयोस
• Fuego
• Pajaros

चरण 2: विजुअल स्टूडियो कोड

इसके लिए आवश्यक है कि इसका उपयोग करें विजुअल स्टूडियो कोड, एल क्यूएल परमिट हैसर यूसो डे ला लाइब्रेरिया बूटस्ट्रैप और जावास्क्रिप्ट।

चरण 3: इम्पोर्टैसिओन डी मेडिओस

हैबिएन्डो डिस्केरगाडो लास इमेजेज और सोनिडोस कॉन लाइसेंसिया सीसी0 (क्रिएटिव कॉमन्स ज़ीरो) प्रीवियामेंट पैरा इम्पोर्टर लॉस मेडिओस अल विजुअल स्टूडियो कोड से हैस लो सिगुएंटे:

1. एन एल एक्सप्लोरर डी वीएस कोड, एन ला कारपेटा डेल प्रोयेक्टो ले दामोस क्लिक अल बॉटन "न्यू फोल्डर" और क्रीमोस 2 कारपेटस: उना पैरा लॉस ऑडिओस और ओट्रा पैरा लास इमेजेज
2. Arrastramos los audios y तस्वीरें और उनके संबंध में कार्पेटस

चरण 4: पंतल्ला प्रिंसिपल

पैरा एल डेसरोलो डे ला पेंटाला प्रिंसिपल से ऑप्टो पोर यूसर एल टेम्पोरिज़ाडोर पोमोडोरो, एएसआई कोमो उना विवरण डी सु फंकियोनामिएन्टो वाई लॉस कंट्रोल पैरा लॉस सोनिडोस।

एल कोडिगो पैरा सु डेसरोलो एस एल सिगुएंटे:

एएसएम

केंद्र

temporizador

एन एस्टे टेम्पोरिज़ाडोर यूटिलिज़ामोस ला टेक्निका पोमोडोरो डी फ्रांसेस्को सिरिलो। ला क्यूल डिवाइड एल एस्टुडियो एन 25 मिनट डे एक्टिवाड, सेगुइडोस डे 5 मिनट डे

डेस्कैन्सो, वाई कैडा कुआत्रो पोमोडोरोस 15 मिनट डी डेस्कानसो एन लुगर डे 5.

25:00

इनीसियार

एस्टुडियो

सोनिडोस

लुविया

50

पजारो

सीएसएस

El CSS es el encargado de la estructura estética del código HTML, permete definir color de fondo, tamano de letra, tamaño de fondo, entre otros. एन एल कोडिगो एंटेरियर से डेफिनिओ ला उबिकैसिओन डेल आर्किवो सीएसएस, एएसआई कोमो ला लाइब्रेरिया क्यू यूटिलिजा

h1 {रंग: #F45B69; }.logo-img {ऊंचाई: 35px; }.मुख्य { पैडिंग-टॉप: 20px; }.टेम्पो {ऊंचाई: ऑटो; चौड़ाई: ऑटो; सीमा-त्रिज्या: 25px; पाठ-संरेखण: केंद्र; पृष्ठभूमि-रंग: #F45B69; }.tempo h2{ फ़ॉन्ट-आकार: 60px; पैडिंग: 30 पीएक्स; रंग सफेद; }.टेम्पो बटन{ मार्जिन-बॉटम: 30px; } #est {रंग: सफ़ेद; मार्जिन-बॉटम: 30px; पृष्ठभूमि-रंग: #df4e5a; सीमा-त्रिज्या: 10px; } #ध्वनि {ऊंचाई: 400px; चौड़ाई: 100%; पृष्ठभूमि-छवि: url ("https://i.ibb.co/997L37C/bg.jpg"); बैकग्राउंड-रिपीट: नो-रिपीट; पृष्ठभूमि-स्थिति: बाएं; मार्जिन-टॉप: 20px; मार्जिन-बॉटम: 20px; सीमा-त्रिज्या: 50px; पैडिंग: 20 पीएक्स; } h3{ रंग: सफ़ेद; }.rn{चौड़ाई: १००%; }.sld_val {रंग: सफ़ेद; } #aud_lluvia {चौड़ाई: १००%; }

चरण 5: टेम्पोरिज़ाडोर

पैरा लॉगर ला फंक्शनलिडैड डेल टेम्पोरिज़ाडोर एन ला ऐप, एएसआई कोमो एल कंट्रोल डेल वॉल्यूम डे लॉस सोनिडोस से यूटिलिजा अन स्क्रिप्ट.जेएस। सु कोडिगो एस एल सिगुएंटे:

वर काउंटरमिनुटोस = 25; वर काउंटरसेगुंडोस = 0; वर descanso = सच; वर descansos = 1; function iniciarContador(){ setInterval(function () {//Mostrar texto document.getElementById("est").style.display = "block"; // Iniciar Contador if (काउंटरसेगुंडोस == 0 && काउंटरमिनुटोस> 0) { काउंटरसेगुंडोस = ६०; काउंटरमिनुटोस--; } // 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").style। बैकग्राउंड कलर = "#2bb91e"; document.getElementById("est ").style.backgroundColor = "#239419"; document.getElementById("est").innerHTML = "Descanso Largo"; descanso = झूठा; डिस्कैन्सोस = 0; }} और {काउंटरसेगुंडोस--; } // कैंबियार टेक्स्टो अगर (काउंटरसेगुंडोस> 9) {आईडी = document.getElementById ("गिनती"); id.innerHTML = काउंटरमिनुटोस + ":" + काउंटरसेगुंडोस; } अगर (काउंटरसेगुंडोस <= 9) {आईडी = document.getElementById ("गिनती"); id.innerHTML = काउंटरमिनुटोस + ":0" + काउंटरसेगुंडोस; }}, 1); }//स्लाइडर - ऑडियो संस्करण स्लाइडर = document.getElementById("myRange"); वर आउटपुट = document.getElementById ("डेमो"); var aud_lluvia = document.getElementById("aud_lluvia"); aud_lluvia.onplay (); आउटपुट.इनरएचटीएमएल = स्लाइडर.वैल्यू; // डिफॉल्ट स्लाइडर वैल्यू प्रदर्शित करें aud_lluvia.volume(this.value / 100); }