तीन तहका वेब डिजाइन

किन सबै वेबसाइटहरू संरचना, शैली र व्यवहारको संयोजनको साथ बनाइन्छ

एक साधारण एनालॉग जसले अगाडि-अन्त वेबसाइट विकासको वर्णन गर्न प्रयोग गरिरहेको छ त्यो यो एक 3-लिङ्ग मल जस्तै छ। यी 3 खुट्टाहरू, जुन वेब विकासको 3 तहहरूको रूपमा पनि चिनिन्छन्, संरचना, शैली र व्यवहार हुन्।

वेब विकासको तीन तहहरू

• संरचना वा सामग्री तह
  • वेब पेजको संरचना वा सामग्री तह त्यो पृष्ठको आधारभूत HTML कोड हो। घरको फ्रेम जस्तै एक बलियो आधार सिर्जना गर्दछ जुन बाँकी घर निर्माण गरिएको छ, त्यसैले HTML को ठोस आधार एक प्लेटफर्म सिर्जना गर्दछ जुन वेबसाइटमा सिर्जना गर्न सकिन्छ। एचटीएमएल संरचनाले पाठ वा छविहरू समावेश गर्न सक्छ र यसमा हाइपरलिङ्कहरू समावेश गर्दछ जुन आगन्तुकले वेब साइट वरिपरि नेविगेट गर्न प्रयोग गर्नेछ।
• शैली वा प्रस्तुतीकरण तह
  • शैली वा प्रस्तुति तहले निर्धारित गर्दछ कसरी संरचित एचटीएमएल कागजात साइटका आगन्तुकहरू हेर्नेछन्। यो तह सीएसएस (क्यासिंगिङ स्टाइल पाना) द्वारा परिभाषित गरिएको छ। यी फाइलहरूमा शैलीहरू छन् जुन संकेत गर्दछ कि वेब ब्राउजरमा कागजात कसरी प्रदर्शन गर्नुपर्छ। आजको वेबमा, शैली परतले पनि मीडिया प्रश्नहरू समावेश गर्न सक्छ जुन फरक स्क्रिन आकार र यन्त्रहरूमा आधारित साइटको प्रदर्शन परिवर्तन गर्न सक्छ।
• व्यवहार
  • व्यवहार तह वेब पेजको तह हो जुन फरक प्रयोगकर्ता कार्यहरूको प्रतिक्रिया वा पृष्ठमा परिवर्तनहरू शर्तहरूको सेटमा आधारित हुन सक्छ। धेरै वेब पृष्ठहरूको लागि, व्यवहार स्तर पृष्ठमा जावास्क्रिप्ट अन्तर्क्रिया हुनेछ।

तपाइँ किन तहहरू अलग गर्नुपर्छ?

जब तपाइँ वेब पृष्ठ सिर्जना गर्दै हुनुहुन्छ, यो तहहरूलाई सम्भव राख्न को लागी वांछनीय छ। संरचना तपाईंको एचटीएमएल, भिजुअल स्ट्रीमहरू सीएसएस, र साइट प्रयोग गर्दछ जुन कुनै पनि स्क्रिप्टमा व्यवहार हुनुपर्छ।

तहहरू विभाजन गर्ने केही लाभहरू:

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

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

एचटीएमएल - संरचना लेयर

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

सीएसएस - शैली शैली

तपाइँले तपाइँको वेब साइटको लागि बाह्य शैली पानामा भएका सबै भिजुअल शैलीहरू सिर्जना गर्नुहुनेछ। तपाइँ बहुविध शैली पानाहरू प्रयोग गर्न सक्नुहुनेछ, तर याद गर्नुहोस् कि हरेक फरक सीएसएस फाइलले ल्याउनको लागि HTTP अनुरोध आवश्यक छ, साइट प्रदर्शनलाई प्रभाव पार्छ।

जाभास्क्रिप्ट - व्यवहार तह

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

जब तपाइँ व्यवहार तहमा निर्माण गर्नुहुन्छ, तपाईले सिडी स्क्रिप्ट फाईलहरू जस्तै CSS को साथ प्रयोग गर्नुपर्दछ। तपाईं बाह्य शैली पाना प्रयोग गरी सबै फ्याक्स प्राप्त गर्नुहुन्छ।