जावास्क्रिप्ट स्थिति के साथ लेआउट पर विचार

शुभ दोपहर, हब्र!

मैं सहित आधुनिक साइटों के लेआउट के बारे में हाल ही में गठित विचार प्रकाशित करने के लिए उद्यम करूंगा तथाकथित "टाइल" शैली में। लेकिन इससे पहले कि मैं अपने विचार बताता हूं मैं दो "चेतावनी" देना चाहता हूं:

1. मैं एक शौकिया हूं। यद्यपि मेरा जीवन 10 वर्षों से अधिक समय तक प्रोग्रामिंग से सीधे जुड़ा रहा है, मैं उन लोगों से संबंधित हूं जो 3 डी मॉडलिंग से रोबोटिक्स तक बहुत सारे आईटी में रुचि रखते हैं। और इसलिए ऐसा होता है, मैं उन चीजों को नहीं जानता जो एक विशेषज्ञ के लिए प्राथमिक हैं। कभी-कभी यह मदद करता है, कभी-कभी यह हस्तक्षेप करता है, लेकिन जो है, वह है।
2. यदि आप व्यवसाय में प्रौद्योगिकी को "महसूस" करना चाहते हैं, तो आपको निराश होना पड़ेगा। आगे सब केवल विचारों और विचारों का एक प्रदर्शनी है। एक अच्छे स्तर पर तैयार इंजन बनाने के लिए, मेरे पास पर्याप्त समय या कौशल नहीं है। हालांकि, अगर किसी को उपरोक्त में दिलचस्पी है, तो मैं विकास के लिए हर तरह से योगदान करने के लिए तैयार हूं।

विचार का सार।

वेबसाइट डिजाइन में रुझान देखना, जो कि इंटरफ़ेस के संदर्भ में अनुप्रयोगों के करीब हो रहा है, साथ ही साथ ऐसी परियोजनाओं के लेआउट में समस्याओं का सामना करना पड़ रहा है, मैं असामान्य साइटों के लेआउट को सरल बनाने के दृष्टिकोण के साथ आना चाहता था (जो धीरे-धीरे काफी आम हो रहे हैं)।

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

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

अंकन

उपयोगकर्ता की स्क्रीन के लिए अनुकूल होने पर, किसी भी लेआउट को एक शुरुआत के लिए अलग नहीं होना चाहिए, इसलिए यह मेरी राय में, सबसे तर्कसंगत है, गाइड के साथ अंकन शुरू करने के लिए।

उदाहरण के लिए, इस तरह:

guideX.left = '20%'; guideX.sidebar = '10%+20'; guideX.right = '10%+420'; 

इस तरह, गाइड कस्टम नामों के साथ गाइडएक्स ऑब्जेक्ट के गुण बन जाते हैं।

अब क्षैतिज गाइड जोड़ें:

 guideY.top = '20'; guideY.content = 170'; guideY.footer = '100%-120'; guideY.bottom = '100%-20'; 

अब आप परिणामी ग्रिड को ब्लॉक कर सकते हैं।
ब्लॉक ऊपरी बाएं और निचले दाएं कोनों के निर्देशांक द्वारा निर्धारित किया जाता है।

block.name = 'बाएँ, ऊपर, दाएँ, नीचे';

उदाहरण के लिए, हमारे मामले में:

 block.logo = 'guideX.left, guideY.top, guideX.left + 300, guideY.content'; block.content = 'guideX.left, guideY.content, guideX.sidebar - 10, guideY.footer'; block.sidebar = 'guideX.content, guideY.content, guideX.right, guideY.footer'; block.footer = 'guideX.left, guideY.content, guideX.right, guideY.footer'; 

(बेशक, ब्लॉक को सीधे गाइड के बिना भी परिभाषित किया जा सकता है, लेकिन इससे लेआउट संरचना को समझना मुश्किल हो जाएगा)

इसके अलावा, मूल ब्लॉक के अंदर के स्थान को इंगित करके एक ब्लॉक का निर्धारण किया जा सकता है:

block.name = 'position_by_x चौड़ाई, position_by_y, hieght';

उदाहरण के लिए, इस तरह:

 block.name = 'center 1000, top 50%'; 

ब्लॉक के स्थान का तीसरा प्रकार संकेत इसके केंद्र की स्थिति, साथ ही चौड़ाई और ऊंचाई को इंगित करना है। इस मामले में डिजाइन इस तरह दिखेगा:
block.name = 'pos_center center_by_x, center_by_y, width, hieght';

एक ब्लॉक को परिभाषित करते समय, आप इसकी स्थिति के लिए और अधिक पैरामीटर निर्दिष्ट कर सकते हैं, बस उन्हें एक स्थान के माध्यम से जोड़ सकते हैं। इन मापदंडों पर बाद में चर्चा की जाएगी।

सभी परिभाषाओं के बाद, रन () फ़ंक्शन निष्पादित होता है ; ब्राउज़र विंडो के वास्तविक आकार, ब्लॉक और पृष्ठ आकारों के आधार पर, ब्लॉक के आकार और निर्देशांक की गणना करता है और संबंधित div ब्लॉकों के लिए शैलियों को सेट करता है।

स्थिति में संगत परिवर्तन के लिए पृष्ठ पर परिवर्तनों को ट्रैक किया जाता है। उदाहरण के लिए, इस मामले में, साइडबार ब्लॉक की सामग्री स्क्रीन पर फिट नहीं हो सकती है, जिससे संरचनात्मक व्यवधान हो सकता है। इसलिए, ब्लॉक आकार में परिवर्तन की निगरानी की जाती है, और इस मामले में, जब साइडबार ब्लॉक की ऊंचाई बढ़ जाती है, तो guideY.footer गाइड तदनुसार चलती है , और सामग्री ब्लॉक आकार और पाद ब्लॉक ब्लॉक स्थिति के अनुसार बदल जाती है।

इस प्रकार, एक पृष्ठ भरते समय, कई नेस्टेड डिव ब्लॉकों की आवश्यकता नहीं होती है। यह केवल वर्णन करने के लिए पर्याप्त है:

 <div id=”logo”>  </div> 

पृष्ठ पर कहीं भी और लोगो जगह में स्नैप करेगा। इस मामले में, डिव-ब्लॉक के अंदर - बेशक आप सभी मानक एचटीएमएल + सीएसएस मार्कअप का उपयोग कर सकते हैं।

विस्तार

बेशक, इस रूप में, यह ऐड-ऑन शायद ही किसी के लिए उपयोगी हो सकता है। कुछ ऐड-ऑन का उपयोग करते समय एक दिलचस्प कार्यक्षमता दिखाई देती है।

नेस्टेड ब्लॉक।

उदाहरण के लिए, हेडर में साइट स्लोगन को ऊपर के उदाहरण का उपयोग करके सम्मिलित करने के लिए, नेस्टेड ब्लॉक का उपयोग करना सुविधाजनक है।

block.tel = 'block.logo 10, 100% -50, 100%, 100%' में;


या डॉकिंग के किनारे वाले संस्करण में

block.tel = 'block.logo में सही 100% -10, निचला 50';

नेस्टेड ब्लॉक हमेशा माता-पिता की तुलना में उच्च स्तर पर होता है, इसलिए अतिव्यापी वस्तुओं के साथ कोई कठिनाई नहीं होती है।

निर्भरता।

मान लें कि हमें विंडो पर केंद्रित 1000px पर एक स्थिर डिजाइन की आवश्यकता है। ऐसा करने का सबसे आसान तरीका निम्नलिखित कोड का उपयोग करना है:

 block.name = 'center 1000, top 100%'; 

लेकिन कुछ मामलों में, अधिक जटिल निर्भरता की आवश्यकता हो सकती है, उदाहरण के लिए, जब सामग्री को बाईं ओर थोड़ा स्थानांतरित किया जाना चाहिए, ताकि बाईं तरफ मुक्त स्थान दाईं ओर से दो गुना कम हो ... इसे नियमों को जोड़कर प्राप्त किया जा सकता है।

 guideX.left = ''; guideX.right = ''; rule.my1 = 'guideX.left * 2 = 100% - guideX.right'; rule.my2 = 'guideX.right - guideX.left = 1000'; 

पहली दो पंक्तियाँ केवल मार्गदर्शिकाएँ घोषित करती हैं, लेकिन उनके मूल्यों को परिभाषित नहीं करती हैं। दूसरे दो - उन नियमों को निर्धारित करते हैं जिनके द्वारा गाइड के निर्देशांक की गणना की जाती है।

वैसे, वैरिएबल ब्लॉक चौड़ाई के लिए, आप अंतिम पंक्ति को निम्न से बदल सकते हैं:

 rule.my2 = 'guideX.right - guideX.left = 1000 to 1300'; 

ऑपरेटर "से" - इसका मतलब है कि अंतर बाद की प्राथमिकता के साथ 1000 से 1300 तक होगा।

वास्तव में, ऐसे पृष्ठ का विश्लेषण करते समय, रैखिक समीकरणों की एक प्रणाली को हल किया जाता है (या जटिल मामलों में, अनुकूलन समस्या, उदाहरण के लिए, सरल विधि, हल की जाती है), और आवश्यक मानों की गणना की जाती है। यह इंजन के आगे विस्तार के मामले में नियमों का उपयोग है जो आपको कम से कम कोड लिखकर जटिल चीजों को लागू करने की अनुमति दे सकता है।

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

गुण

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

1. आम गुण

किसी भी विशिष्ट ब्लॉक संपत्ति को सीधे एक्सेस किया जा सकता है।
समर्थित: block.name.left, block.name.top, block.name.right, block.name.bottom, block.name.width, block.name.height, संभवतः अन्य।

उदाहरण के लिए, परिभाषित करने के बाद: block.logo = '0, 0,' 100, 50 '; आप block.logo.left या block.logo.bottom का संदर्भ ले सकते हैं ।

इसके अलावा, मैं सामान्य गुणों के लिए ब्लॉक फिलिंग पैरामीटर को विशेषता देता हूं। डिफ़ॉल्ट रूप से, किसी भी ब्लॉक को सामग्री की मात्रा में वृद्धि के साथ नीचे खींच लिया जाता है। लेकिन block.name.fix = true लिखकर। आप ब्लॉक आकार को ठीक कर सकते हैं।
यदि गुणात्मक रूप से इसे लागू करना संभव है, तो फिट सिस्टम को जोड़ना संभव होगा, जो स्वचालित रूप से ब्लॉक आकार के अनुसार सामग्री स्केल को संरेखित करता है, प्रकाशन प्रणालियों में संबंधित फ़ंक्शन के अनुरूप।

2. फ़ॉन्ट फिट

block.name.fontsize = 'n%'; - यह पैरामीटर ब्लॉक ऊंचाई के अनुपात में फ़ॉन्ट आकार सेट करता है। यह दृष्टिकोण आपको एक फ़ॉन्ट के साथ लेबल प्रदर्शित करने की अनुमति देता है जो आकार के लिए आदर्श रूप से अनुकूल है। उदाहरण के लिए, किसी भी रिज़ॉल्यूशन पर टेक्स्ट हेडर को साइट के हेडर के बराबर ऊँचाई के साथ प्रदर्शित करें।

3. छवि समायोजन

block.name.image_fit = '[path /] file_name [बायाँ | ऊपर | ऊपर | दाएँ | नीचे]'; - आप एक छवि के साथ ब्लॉक को भरने के लिए अनुमति देता है, और पूरे ब्लॉक को भरने के लिए छवि को बढ़ाया जाता है। यदि दूसरा पैरामीटर निर्दिष्ट किया जाता है, तो इस तरफ फिटिंग करते समय, छवि को क्रॉप नहीं किया जाता है।

4. ब्लॉक खींचना और गिराना

block.name.dragX = 'सही | गलत [शुरू [, अंत]]]; - वर्तमान स्थिति से, एक्स अक्ष के साथ ब्लॉक को शुरू से अंत तक खींचने की क्षमता निर्धारित करता है। उदाहरण: block.tel.dragX = 'true -10, 80%';
block.name.dragY = 'सच | गलत [शुरू [, अंत]]'; - इसी तरह।

खींचने वाले ब्लॉक आपको सरल ब्लॉक एनिमेशन बनाने की अनुमति देते हैं। उदाहरण के लिए, ऐसा डिज़ाइन।

 block.header = '10%, 20, 90%, 300'; //  . block.slider = 'in block.header 0, 0, 100%, 270'; //   –   . block.scroll = ' in block.header 0, 270, 33.33%, 100%'; //  . block.slider_content = 'in block.slider 0, 0, 300%, 100%'; //   – . block.slide_1 = 'in block.block.slider_content 0, 0, block.slider.right, 100%'; //  1. block.slide_2 = 'in block.block.slider_content block.slider.right, 0, block.slider.right*2, 100%'; //  2. block.slide_3 = 'in block.block.slider_content block.slider.right*2, 0, block.slider.right*3, 100%'; //  3. 

ऐसा रिकॉर्ड आपको शीर्ष लेख में तीन स्लाइड के लिए स्लाइडर के साथ ब्लॉकों की संरचना को पूरी तरह से निर्धारित करने की अनुमति देगा, यह केवल संबंधित ब्लॉक में भरने के लिए बनी हुई है।



रिकॉर्ड जोड़ना:

 block.scroll.dragX = 'true 0, 100% - block.scroll.width'; rule.my1 = block.slider_content.left = - block.scroll.left*3'; 

स्क्रॉल ब्लॉक को खींचकर, आप स्लाइडर को ब्लॉक के अंदर रिवाइंड कर सकते हैं। स्लाइडर ब्लॉक।

एक रिकॉर्ड:

 block.slider_content.dragX = 'true'; 

आपको सीधे स्लाइडर को इसे फिर से चालू करने की अनुमति देता है (उदाहरण के लिए, टच स्क्रीन पर)

औपचारिक विवरण

औपचारिक रूप से, सभी ऑपरेटर इस तरह दिखते हैं:
गाइड:

 guideX.< > = '<>'; guideY.< > = '<>'; 

ब्लॉक:

 block.< > = '[in <  >] {<>,<>,<>,<> | {left|center|right} <>, {top|midle|bottom} <> | pos_center <>, <>, <>, <>} [fix] [fit] [font_size <>] [image_fit [/] ] [dragX [<> [,<>]]] [dragY [<> [,<>]]]'; 

नियम:

 rule.< > = '<> = <>'; 

जहाँ <संख्या> कोई जावास्क्रिप्ट अभिव्यक्ति है, या किसी भी प्रतिशत (मूल ब्लॉक के आकार के आधार पर गणना की जाएगी), या '' नंबर नंबर > से < नंबर 2> ' के प्रकार की एक जोड़ी का अर्थ है - जिसका अर्थ है <संख्या 1 से रेंज में < नंबर 2 का चयन किया जाएगा। > , संभवतः <नंबर 2> के करीब। आरक्षित शब्दों का उपयोग अभिव्यक्ति में नहीं किया जा सकता है: फिट, फिक्स, इमेज_फिट, लेफ्ट, सेंटर, राइट, टॉप, मिडल, बॉटम, पॉस_सेंटर, इन, गाइडएक्स, गाइड, ब्लॉक, रूल

मार्कअप के विवरण के बाद, फ़ंक्शन रन () कहा जाता है ;

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

उदाहरण

एक उदाहरण के रूप में, मैं व्यवसाय कार्ड पृष्ठ बनाने के लिए एक कोड दूंगा। पृष्ठभूमि पर, एक छवि प्रदर्शित की जानी चाहिए, स्क्रीन आकार के लिए समायोजित, सबसे ऊपर बाईं ओर - लोगो और नारा, नीचे - संपर्क। केंद्र में एक स्लाइडर या एक निश्चित आकार की अन्य सामग्री के साथ एक ब्लॉक है।

कोड

 <html> <head> <script src="js.js"></script> <script language = 'javascript'> guideX.left = '10%'; block.content = '0,0,100%,100% image_fit background.jpg'; block.logo = 'guideX.left,12%,100%,23% font_size 100%'; block.slogan = 'guideX.left,23%,100%,26% font_size 70%'; block.slider = 'pos_center 50%, 55%, 700, 270'; block.footer = 'right 100%-guideX.left, bootom 12.6% font_size 15%'; </script> <style type="text/css"> * { font-family:"Times New Roman",Georgia,Serif; color:#fff; } </style> </head> <body> <div id="logo">Logo</div> <div id="slogan">C  </div> <div id="slider"> <!--   --> </div> <div id="footer">      ...<br />  () CopyRight</div> </body> </html> 

अलग-अलग स्क्रीन पर साइट का प्रदर्शन आंकड़ों में दिखाया गया है।

निष्कर्ष

दृष्टिकोण के फायदों में शामिल हैं: अतिरिक्त शैलियों और "बैसाखी" के रूप में सीएसएस में कचरे की अनुपस्थिति, किसी भी अनुमतियों के लिए एक अनुकूली लेआउट विकसित करने की सादगी, सरल "नियमों" का उपयोग करके स्थिति तर्क का समायोजन, दस्तावेज़ के डिजाइन और सामग्री से स्थिति के नियमों की जुदाई, आंशिक लेआउट स्वचालन की संभावना। एक अतिरिक्त स्क्रिप्ट का उपयोग करके psd फ़ाइल से निर्यात गाइड और सामान्य मार्कअप तर्क का उपयोग करना। इसके अलावा, प्लसस में यह तथ्य शामिल होता है कि इंजन को js-file को जोड़ने के अलावा किसी अन्य क्रिया की आवश्यकता नहीं है। और पूरे "मार्कअप भाषा" में कई विशिष्ट अभिव्यक्तियाँ शामिल हैं जो सीखना और लागू करना आसान है।

आप यह भी जोड़ सकते हैं कि आज जावास्क्रिप्ट अक्सर समस्याओं को हल करने या कस्टम तत्वों को विकसित करने के लिए साइटों के लेआउट में उपयोग किया जाता है। वर्णित दृष्टिकोण एक जोड़ी लाइनों में कई चीजों को लागू करने में मदद कर सकता है, भले ही कोई व्यक्ति पृष्ठ के मुख्य ढांचे को टाइप करने के लिए इंजन का उपयोग नहीं करना चाहता हो।
उदाहरण के लिए, एक छवि के साथ एक डिव ब्लॉक को भरने के लिए, स्वचालित रूप से ब्लॉक आकार में समायोजित करना, एक पंक्ति पर्याप्त है।

 block.name = 'image_fit background.jpg'; //    ,     

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

बेशक, लेख के ढांचे के भीतर इस दृष्टिकोण को लागू करने की सभी संभावनाओं को दिखाना असंभव है। साथ ही वर्णित कार्यक्षमता के कार्यान्वयन के बारे में विचार। हालाँकि, यह विचार दो दिन पुराना भी नहीं है, इसलिए समय के साथ-साथ इसके विस्तार के लिए कई विकल्प होंगे। मुझे आशा है कि कोई इस दृष्टिकोण में रुचि रखता है।