डेवलपर की आंखों के माध्यम से परियोजना की शुरुआत

इस पोस्ट में, मैं, वेब डिज़ाइन, प्रोग्रामिंग और लेआउट के क्षेत्र में एक शुरुआतकर्ता के रूप में, उन कठिनाइयों के बारे में बात करना चाहूंगा, जो मुझे आई थीं।

बवंडर एक लोगो के साथ शुरू नहीं हुआ। मॉडलों के साथ नहीं ... बवंडर एक गति वेक्टर के साथ शुरू हुआ। विचारों और जलती आँखों से। लोगों के संकीर्ण दायरे के लिए नहीं, बल्कि हर किसी के लिए जीवन को आसान बनाने के लिए एक परियोजना तैयार की गई है।
यह सब एक साधारण से शुरू हुआ ... टेबल, इनपुट फील्ड ...

मुझे एक लोगो और एक अनुमानित छवि दी गई।
और कार्यान्वयन के लिए एक अंतहीन क्षेत्र। रोमा कोड में नहीं गया, मैंने उसके विचार को महसूस करने की कोशिश की।
पहला पंचर उस समय हुआ जब यह मुझ पर गिरा: लोगो टोपी में बहुत जगह घेरेगा, यदि मॉडल खुला है, तो उसे छिपाया जाना चाहिए। संयोग से एक उपयुक्त समाधान आया। मैंने इसके बजाय "logo.jpg", "logo.png" सेट किया। और केवल एक नाम था, कोई लोगो नहीं था। और टोपी एक तार में ढह गई। मुझे एहसास हुआ कि इसे लागू करने की आवश्यकता है, और आप जेएस के बिना नहीं कर सकते हैं (वैसे, आप कोशिश कर सकते हैं। लोगो पर क्लिक करें और देखें)।
ईमानदारी से, सभी प्रकार के पुस्तकालयों और रूपरेखाओं के बारे में मेरी राय पक्षपाती है। मैं उनके संबंध को अतिश्योक्तिपूर्ण मानता हूं। वे "मोटे" हैं। एकल समस्याओं के लिए, यह एक बड़ी लाइब्रेरी को जोड़ने के लिए कोई मतलब नहीं है। अपनी छोटी और तार्किक स्क्रिप्ट लिखना आसान है। कई दर्जन मंचों को कवर करना बेहतर है, लेकिन साइट पर सबसे मूल्यवान चीज डाल दी गई है, जो तृतीय-पक्ष फ़ंक्शन के संग्रह को डाउनलोड करने में उसी jQuery के मानक फ़ंक्शन को लेने के लिए है जिसका उपयोग ब्राउज़र में नहीं किया जाएगा।
इसलिए मैंने जावास्क्रिप्ट सीखना शुरू किया। लगभग खरोंच से।
आधे घंटे से अधिक समय तक मंचों को पढ़ने के बाद, लोगो के विस्तार और प्रत्यावर्तन के पुनरावर्ती कार्यों का जन्म हुआ। मैंने लैंग प्रॉपर्टी की भी खोज की। यह पता चलता है कि यह संपत्ति शैली की तरह सभी तत्वों में है। और, आधिकारिक तौर पर, यह उस भाषा को निर्दिष्ट करना चाहिए जिसमें तत्व की सामग्री लिखी गई है। हालांकि, व्यवहार में इसका उपयोग अपने इच्छित उद्देश्य के लिए नहीं, बल्कि डेटा भंडारण के लिए एक वस्तु के रूप में किया जाता है।
वैसे, मैं यह कहना चाहता हूं कि सभी नवागंतुकों, सबसे पहले, कार्यान्वयन के संभावित संस्करणों को समझने की आवश्यकता नहीं है, लेकिन इन संस्करणों के तर्क। तो, और केवल इतना ही, आप समझेंगे कि आपके मामले में कौन से तरीके उपयुक्त हैं, और जो न केवल अनुपयुक्त हैं, बल्कि वे भी चोट पहुंचाएंगे।
दिन के अंत तक, टोपी को बनाया गया था और एक सुंदर और यहां तक ​​कि काम के लिए तैयार किया गया था। लेकिन यह मेरे लिए पर्याप्त नहीं था ... इससे पहले कि मैं एक नंगे टेबल और एक बड़ा मेनू था, जो पेज की चौड़ाई के 260 पिक्सेल के एक छोटे, बहुत से कब्जे में था। बेशक, दृश्य खराब हो गया। जेएस में पहले से ही अनुभव प्राप्त करने के साथ थोड़ा शर्मिंदगी होने के बाद, मैंने उसे आगे और पीछे किया। हालाँकि शिलालेख
ओह
पी
सी
और
और
, जो एक बहुत उन्नत स्टोर के विज्ञापन के संकेत की तरह लग रहा था, मुझे पसंद नहीं आया। और मैं सीएसएस में गहराई से गया, ताकि पाठ, या प्रत्येक पत्र का विस्तार करने के लिए 90 डिग्री पर एक रास्ता मिल सके।
और मुझे एहसास हुआ कि मेरा ज्ञान महत्वहीन है, और घुमाए गए पाठ का क्रॉस-ब्राउज़र प्रकृति वांछित होने के लिए बहुत कुछ छोड़ देता है। एकमात्र उपयुक्त उपाय एसवीजी था। लेकिन यह w3 के साथ xmlns के माध्यम से लोडिंग नियमों की आवश्यकता थी। मानक अच्छे हैं। लेकिन यह मत भूलो कि साइट की आसानी की इच्छा अब प्राथमिकता है, खासकर सूचकांक नीति के कारण। इसकी वजह यह है कि दृश्य संपादकों में एकत्रित साइटों को उद्धृत नहीं किया जाता है।
लेख और मंचों के माध्यम से चढ़ते हुए, मुझे एसवीजी के बिना पाठ का विस्तार करने का एक तरीका मिला। दुर्भाग्य से, IE (7 और नीचे) के पुराने संस्करणों को बलिदान करना पड़ा।

विकल्पों ने शुरू में मॉडल के साथ काम करने के लिए छोटे कार्यों का सुझाव दिया। सामान्य तौर पर, विकल्पों की ऊंचाई निर्धारित करने से कोई विशेष समस्या नहीं हुई। मैं लगभग (अज्ञानता से) ऊपरी सीमा से स्थान का प्रतिशत निर्धारित करता हूं - और एक सुलझी हुई समस्या के रूप में इस बारे में भूल गया। वह बाद में सामने आया।
मॉडल के साथ काम करने के लिए कार्य तीन अलग-अलग प्रकारों का सुझाव दिया।
जहां कॉलम प्लस और माइनस हैं, और पंक्तियाँ उपयोगकर्ता द्वारा परिभाषित पाठ हैं। रिवर्स विकल्प। और - जहां कॉलम और पंक्तियों के नाम उपयोगकर्ता द्वारा निर्धारित किए गए हैं।
बेशक, प्रत्येक विकल्प के लिए, पंक्तियों / स्तंभों की संख्या में बदलाव लागू किया जाना चाहिए था।
एक शुरुआत के दृष्टिकोण से, सब कुछ सरल है। टेबल में टीबीओडीवाई है। शरीर में एक तार होता है। उसका और बदला। एक सरणी एक संग्रह है। और, जैसा कि मैंने इसे समझा, मंचों पर चढ़ना, मैं केवल एक ही व्यक्ति नहीं था जिसने इसे एक सरणी के रूप में माना था। लेकिन वहाँ यह था।
दुर्भाग्य से, एक गीतात्मक विषयांतर के रूप में, मैं यह बताना चाहूंगा कि तालिकाओं द्वारा साइट लेआउट को पिछली शताब्दी माना जाता है और लगभग सभी वेब-पेज टाइपसेट लगभग समाप्त हो जाते हैं। यह सही नहीं है। हर चीज की अपनी जगह है। और हर चीज का समझदारी से इस्तेमाल करने की जरूरत है।
अधिकांश फोरम उत्तर में appendChild (obj) और removeChild (index) विधियों का उपयोग करने का सुझाव दिया गया है। लेकिन (जंगल में किसी के रोने की आवाज) यह गलत है! डिबगिंग से पता चलता है कि आप TBODY में "बच्चे" जोड़ रहे हैं। और, इस तथ्य के बावजूद कि जब तार फंसते हैं, तो एक स्ट्रिंग मौजूद होगी, यह स्ट्रिंग संग्रह से अनुपस्थित होगी। और इसका मतलब है कि यह एक जाम है।
एक और गीतात्मक विषयांतर: विभिन्न ब्राउज़रों में लेआउट का परीक्षण करते समय, मैं, निश्चित रूप से, डेवलपर्स पर कसम खाता हूं जो विभिन्न तरीकों से अपरिभाषित व्यवहार के मुद्दे को हल करते हैं। ये वे मामले हैं, उदाहरण के लिए, जब सख्ती से सेट की गई चौड़ाई या ऊंचाई बहुत बड़ी है। और फिर ब्राउज़रों (मैं अपनी उंगली को प्रहार नहीं करूंगा) को बाहर करना शुरू कर देता है। उनमें से कौन सा अजीब है आप पर निर्भर है। लेकिन विभिन्न दुभाषिया आपके डिजाइन को अलग-अलग तरीकों से चित्रित करेंगे।
एक पंक्ति को जोड़ने और इसे हटाने के मानक कार्यों का उपयोग करने का निर्णय लिया गया। ये InsertRow (इंडेक्स) और डिलीटRow (इंडेक्स) हैं।
उस रोमांच पर, हमेशा की तरह, वहाँ समाप्त नहीं हुआ। तार हटाना मुश्किल है। यदि पंक्ति को शुरुआत में हटा दिया गया है और अंत में नहीं, तो तालिका में सभी आईडी को फिर से सेट करना होगा (तत्व परस्पर जुड़े हुए हैं), और उनमें से कई थे। प्रत्येक सेल में एक छिपी हुई फ़ील्ड होती है जो चयनित बिंदुओं का मान संग्रहीत करती है, अंक (अंक) के साथ एक तालिका, जिसमें से प्रत्येक में एक ऑनहॉवर घटना होती है, और वास्तव में, पाठ के लिए एक इनपुट फ़ील्ड। इस उद्देश्य के लिए मुश्किल IDreborn फ़ंक्शन बनाया गया था। और इसलिए, जब हटाने का डिबगिंग पूरा हो गया, तो कॉस्मेटिक सवाल उठे।
एक नेटबुक पर साइट खोलने के बाद, मुझे एहसास हुआ: विकल्प नीचे स्थानांतरित कर दिए गए हैं; छोटे स्क्रीन पर, फ़ंक्शंस का हिस्सा अदृश्य है, लेकिन अंतरिक्ष शीर्ष पर बना हुआ है ... यह एक अस्वीकार्य निरीक्षण था।
और मैंने विकल्पों को ऊंचाई में संरेखित करने की कोशिश शुरू कर दी। Google में पहली या दूसरी कड़ी मुझे लंबवत संरेखित करने के लिए कम से कम छह तरीके मिली। उनमें से प्रत्येक ने एक विशिष्ट मामले और संरेखित वस्तु और उसके माता-पिता की विशिष्ट स्थितियों के तहत एक परिणाम दिया। कुछ क्रॉस-ब्राउज़र थे, कुछ नहीं थे। मैंने कमोबेश सार्वभौमिक तरीका चुना। पृष्ठ पर तय की गई मूल वस्तु (स्थिति: निश्चित;) बनाई गई है और दाहिने किनारे पर ऊँचाई में फैली हुई है (ऊपर: 0; नीचे; 0: सही; 0;); मैंने नीचे एक नकारात्मक क्षेत्र के साथ आधी ऊंचाई पर इसमें एक ब्लॉक रखा (मार्जिन - नीचे: -247px;), विकल्पों की ऊँचाई के आधे के बराबर (ब्राउज़रों में उपलब्ध डेवलपर टूल के लिए धन्यवाद, उन्होंने खोजने में मदद की)। खैर, और, ज़ाहिर है, विकल्प स्वयं, पहले से चौड़ाई में शून्य तक ढह गए, ताकि वे उन्नत हो सकें।
तब मुझे एहसास हुआ: 50% मामलों में अतिप्रवाह के साथ रसायन विज्ञान आपके खिलाफ है। ब्राउज़रों को समझ में नहीं आता कि वे किस तरह से चाहते हैं। और फायरलिस (फ़ायरफ़ॉक्स (मोज़िला)), एक ही समय में अतिप्रवाह-एक्स और अतिप्रवाह-वाई सेटिंग्स का उपयोग करते समय, एक तत्व को बिल्कुल भी प्रदर्शित नहीं करता है (हालांकि क्रोम इस संयोजन को समझता है)।
ओवरफ्लो होने के बाद, उन्होंने अपने लिए एक और महत्वपूर्ण टिप्पणी की।
उदाहरण के लिए, 10px पर पैडिंग-लेफ्ट सेट करें। चौड़ाई को 0px पर सेट करें। लाभ! चौड़ाई शून्य है! अब वही पेडिंग-राइट सेट करें। और चौड़ाई इसके बराबर होगी। और यह एक से अधिक ब्राउज़र का अजीब तर्क है!
जब विकल्पों के साथ नौटंकी समाप्त हो गई थी, तो मेरे बॉस और मैंने मॉडल को देखा और महसूस किया कि तालिका में पाठ की कल्पना नहीं की गई थी - एक पंक्ति में नहीं। और, इसलिए, पाठ फ़ील्ड का बहुत कम उपयोग होता है, टेक्सारिया की आवश्यकता होती है। और मैं फिर से लिखना शुरू कर दिया।
सामान्य तौर पर, कोई समस्या नहीं थी ... जब तक आप सामग्री के आधार पर पाठ क्षेत्र की ऊंचाई में स्वत: वृद्धि को नोट कर सकते हैं।
मंचों पर, मुझे एक रास्ता मिला: पाठ, हर बार जब आप टेक्स्टारिया के अंदर बटन पर क्लिक करते हैं, तो हम इसे उसी चौड़ाई के एक अदृश्य डिव ब्लॉक में लिखते हैं और टेक्स्टारिया के समान फ़ॉन्ट के साथ। हम इसकी ऊंचाई प्राप्त करते हैं, और न्यूनतम ऊंचाई के अधीन, पाठ क्षेत्र के लिए समान ऊंचाई निर्धारित करते हैं। थोड़ी शर्मिंदगी के बाद, मुझे एहसास हुआ कि स्क्रिप्ट में चौड़ाई निर्दिष्ट करना असुविधाजनक है।
आपको CSS के माध्यम से अनुकूलन की पहुँच की आवश्यकता है। सामान्य तौर पर, तालिका की उपस्थिति को समायोजित करने के लिए, उन्हें बनाया गया था। सरलता के लिए (!) सेटिंग्स। इसलिए मैंने कक्षाओं में जाना सीखा।
अगर किसी को इसकी आवश्यकता है, तो यहां एक सरल और मजेदार सुविधा है:

function getStyle(className) { var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules for(var x=1;x<classes.length;x++) if(classes[x].selectorText.indexOf('.'+className)+1) return classes[x].style; return null; } 

जिसने एक पुल बनाया, जिससे कोड में मान नहीं बदले जा सकते, लेकिन उन्हें एक बाहरी फ़ाइल में बदलना होगा।
सामान्य तौर पर, मैं हमेशा एक ऐसी साइट बनाने का लक्ष्य रखता हूं जिसे टुकड़ों से विच्छेदित और इकट्ठा किया जा सके। यह सुविधाजनक है। उदाहरण के लिए, निष्पादन प्रक्रिया के दौरान, आप महसूस करेंगे कि ग्राहक एक प्रसिद्ध सीएमएस का उपयोग करना चाहता है। तब आपको बस साइट को अलग करना होगा और इसे सीएमएस-के पर न्यूनतम बदलाव के साथ इकट्ठा करना होगा।
अभी के लिए बस इतना ही, क्योंकि मेरे पास अभी भी अनसुलझे मुद्दों और अवास्तविक अवसरों का एक समूह है। हमेशा की तरह और भी विचार हैं।
उम्मीद है, शुरुआती लोगों के लिए, मेरी तरह, लेख उपयोगी था। बढ़ने, विकसित करने, प्रयास करने और आपको प्रयास की कीमत पर उच्च गुणों से पुरस्कृत किया जा सकता है! सौभाग्य है।