HTML लेआउट आवश्यकताओं

1. लेआउट, आउटसोर्सिंग और तकनीकी विनिर्देश

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

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



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



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



फिर भी, फेकैप्स की संभावना, जैसा कि अभ्यास से पता चलता है, इतना छोटा नहीं है कि इसे उपेक्षित किया जा सके।



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

2. ओह, मेरी व्यथा महान है!

मुझे हाल ही में एक लेआउट मिला है जिसे प्रबंधकों ने आउटसोर्स किया है और अभी यह नहीं पता है कि हंसना है या रोना है। यदि यह मेरे लिए इस लेआउट को CMS टेम्पलेट सिस्टम में एकीकृत नहीं करता, तो मैं शायद हँसता भी।



तबले टाइपसेटिंग और शैलियों को सीएसएस फ़ाइल में नहीं रखा गया है और हाइलाइटिंग बटन के लिए मानक ड्रीमविवर स्क्रिप्ट को नरक के बाद के दोषों के रूप में भी नहीं देखा जाता है। सभी इनपुट फ़ील्ड्स को लेबल टैग के अंदर डाला गया, अलग-अलग रूपों में डाला गया, और जब किसी तरह इसे मानव रूप में लाने की कोशिश की गई, तो पूरा लेआउट अलग हो गया। सीएसएस कक्षाओं में सिरिलिक नाम थे, सार्थक नहीं, लेकिन ".स्टाइल 1, .स्टाइल 2" के रूप में। अधिकांश फॉर्म तत्वों को कुछ अल्पज्ञात और बहुत ही टेढ़े-मेढ़े jQuery स्क्रिप्ट द्वारा स्टाइल किया गया था, कुछ तत्वों की आईडी समान थी और उनके बीच JS कोड था जो इन तत्वों को संचालित करता है और उन्हें ID द्वारा प्राप्त करता है, और पागलपन का शीर्ष दस्तावेज़ के अंत में विधि का अनुप्रयोग है शैलियों को सेट करने के लिए jQuery.cs, ठीक है, बिल्कुल कुछ भी नहीं हमें बस एक सीएसएस फ़ाइल में उन्हें रजिस्टर करने से रोका। और साइट हेडर, लिंक का एक गुच्छा (तहोमा फ़ॉन्ट में और एंटी-अलियासिंग के बिना) एक चित्र के रूप में बनाया गया था, जिस पर एमएपी और एएएए तत्व सुपरिम्पोज किए गए हैं। मैं अब इस अद्भुत लेआउट में विफलताओं के वर्णन के साथ आपके मानस को घायल नहीं करूंगा, क्योंकि वहां उनके अनगिनत और अधिक थे।



सामान्य तौर पर, मेरा विश्वास करो, कामरेड, यह एक पीपीसी था, जो समय सीमा से पहले भी लगभग खत्म हो गया था।



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



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

3. आवश्यकताएँ और सिफारिशें

१ । क्रॉस-ब्राउज़र संगतता

साइट को IE7 +, FF3 +, Opera9 +, Safari4 +, नवीनतम प्रमुख संस्करण के क्रोम (या क्लाइंट के साथ अनुबंध की शर्तों पर निर्भर करता है और उस वर्ष जिसमें आप यह लेख पढ़ते हैं) में ठीक काम करना चाहिए।



२ । हमेशा शरीर के लिए पृष्ठभूमि रंग का वर्णन करें, भले ही वह सफेद हो।



३ । यदि आप CSS हैक्स का उपयोग करते हैं, तो टिप्पणी करें कि यह क्या है और किस ब्राउज़र के लिए है, बल्कि css_browser_selector.js का उपयोग करें । लेआउट डिजाइनरों का ख्याल रखें जिन्हें आपके बाद इस लेआउट के साथ काम करना होगा।



४ । कक्षा के नाम और आईडी को आवेदन के अनुरूप होना चाहिए

जैसे हेडर, मेनू, पाद, समाचार



५ । कृपया टिप्पणियों के साथ मुख्य HTML ब्लॉक अलग करें। कुछ इस तरह:

<! - - BEGIN FOOTER ->

<! - END ENDOTER ->



Html लेआउट से CMS के लिए टेम्प्लेट बनाना आवश्यक है, जिसके बाद टिप्पणियों को हटा दिया जाएगा।



६ । जहां संभव हो, पीएनजी -24 के बजाय 8-बिट अल्फा चैनल के साथ जीआईएफ / पीएनजी का उपयोग करने की क्षमता की उपेक्षा न करें।



।। यह सब जावास्क्रिप्ट के बिना किया जा सकता है, इसके बिना करें।



।। यदि बहुत से जावास्क्रिप्ट कोड हैं, तो आपको इसे एक अलग फाइल में रखना होगा। इवेंट हैंडलर को अलग करना और एक अलग फ़ाइल में घोषित करना भी बेहतर है।



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



१० । रबर मॉक-अप के लिए, न्यूनतम और अधिकतम चौड़ाई निर्दिष्ट की जानी चाहिए।



११ । यदि टी.जेड। और कुछ नहीं कहा गया है, लेआउट को ब्राउज़र विंडो में क्षैतिज स्क्रॉलबार के बिना रखा जाना चाहिए, जो 1024px के स्क्रीन रिज़ॉल्यूशन के क्षैतिज घटक के साथ पूर्ण स्क्रीन तक विस्तारित है, और यदि लेआउट आकार की अनुमति देता है, तो 800px।



१२ । छवियों वाले फ़ोल्डर में ऐसे चित्र नहीं होने चाहिए जो लेआउट में उपयोग नहीं किए जाते हैं। यदि कुछ को लेआउट या फिर से बाहर रखा गया है - तो पहले से ही अनावश्यक चित्रों को हटाना न भूलें।



१३ । उन सभी तत्वों के लिए जिनमें अलग-अलग लंबाई के पाठ हो सकते हैं जिन्हें एक पंक्ति में दर्ज किया जाना चाहिए (उदाहरण के लिए, बटन या हेडर के लिए, यदि डिज़ाइन यह प्रदान नहीं करता है कि वे एक से अधिक रेखाओं पर कब्जा कर सकते हैं), CSS गुण को सफेद-स्थान पर सेट करना सुनिश्चित करें: Nowrap ।



१४ । सीएसएस फ़ाइल को उनके इच्छित उद्देश्य के लिए ब्लॉक में टिप्पणियों के साथ लाइनों का उपयोग करके तोड़ दिया जाना चाहिए, उदाहरण के लिए:

/ * ___________1 सीएसएस रीसेट ____________________ * /

/ * ___________2 विशिष्ट तत्व ____________ * /

/ * _______________ 2.1। सूची ______________ * /

/ * _______________ 2.2। संदर्भ ________________ * /

/ * _______________ 2.3। फार्म तत्व _________ * /

/ * ___________ 3। हेडर (साइट हेडर) __________ * /

/ * ___________ 4। जूते (तहखाने) _______________ * /

/ * ___________ 5। SIDEBAR (दाएं) _______________ * /

शैलियों की संरचना के लिए वास्तव में कितना सटीक है, लेकिन मुख्य बात यह है कि इसे किसी तरह से करना है।



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

• नए चित्रों को img फ़ोल्डर में जोड़ा गया,
• चित्र btnHome.jpg और btnFeedback.jpg की अब आवश्यकता नहीं है, आप हटा सकते हैं
• Aketa.html फ़ाइल के अनुभाग में HTML कोड परिवर्तित किया गया
• Main.css फ़ाइल के अंत में नई शैलियाँ जोड़ी गईं (.form_row और नीचे से शुरू)।

१६ । निर्दिष्ट करें कि HTML लेआउट को किस एन्कोडिंग में होना चाहिए। CSS और JS फाइलें लेआउट के समान एन्कोडिंग में होनी चाहिए, अन्यथा एक लंबे और थकाऊ बग शिकार की संभावना गंभीर रूप से बढ़ जाती है।



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



१ ।। कर्सर को रखना याद रखें: इनपुट के साथ नहीं बने बटन के लिए सूचक। यदि आपको नहीं पता है कि जेएस के साथ एक घटना हैंडलर को इस बटन पर लटका दिया जाएगा या यह एक लिंक होगा, तो किसी भी मामले में <a> टैग का उपयोग करना बेहतर होगा।



१ ९ । यदि आप लिंक पर क्लिक करते समय ईवेंट प्रोसेसिंग करते हैं, तो सुनिश्चित करें कि ईवेंट हैंडलर झूठा वापस आए, या लोकप्रिय href = '#' के बजाय href = 'जावास्क्रिप्ट: void (0)' का उपयोग करें ताकि पेज स्क्रॉल न हो।



२० । प्रपत्रों को सही तरीके से लेआउट करें: फ़ील्ड लेबल उन लेबल टैगों में होने चाहिए जो सही ढंग से विशेषता में भरे हुए हैं। प्रपत्रों को डिज़ाइन करते समय, गलत तरीके से भरे गए फ़ील्ड के लिए सत्यापन त्रुटियों और शैलियों को प्रदर्शित करने के लिए तत्व प्रदान करते हैं। यदि यह t.z. और डिजाइन, ग्राहक के साथ इस पर चर्चा करना सुनिश्चित करें।



२१ । यदि लेआउट गैर-मानक फ़ॉन्ट का उपयोग करता है, तो यह सुनिश्चित करना सुनिश्चित करें कि क्या गैर-मानक फ़ॉन्ट के साथ चित्र बनाना संभव है, यदि नहीं, तो चर्चा करें कि उन्हें प्रदर्शित करने के लिए किस तकनीक का उपयोग किया जाएगा (sIfr, Cufon, आदि)



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



२३ । लेआउट में जहां पृष्ठ की ऊंचाई सामग्री पर निर्भर करती है (और इस तरह, एक नियम के रूप में, बहुमत), यह प्रदान करें कि अनुपस्थिति / कम मात्रा में सामग्री में ब्राउज़र को नीचे तक दबाया जाता है, जब तक कि अन्यथा निर्दिष्ट न हो।



२४ । यदि लेआउट 100% html सत्यापन पास नहीं करता है, तो कम से कम यह सुनिश्चित करने का प्रयास करें कि अमान्य कोड का उपयोग उचित है। केवल "मुझे यह पसंद है" या "यह कम निकलता है" लेआउट की वैकिटिटी वैधता न करें

पुनश्च

मुझे आशा है कि आवश्यकताओं और सिफारिशों की यह सूची आपके लिए उपयोगी होगी! यदि आपके पास रचनात्मक विचार हैं, तो टिप्पणियों में सुझाव दें कि इसे कैसे पूरक किया जाए।