टेबललेस वेब डिज़ाइन: Difference between revisions
No edit summary |
No edit summary |
||
| Line 51: | Line 51: | ||
}}</ref> | }}</ref> | ||
पृष्ठ लेआउट के लिए सीएसएस का उपयोग करने के लाभों में विभिन्न प्रकार के [[उपयोगकर्ता एजेंट]] का उपयोग करके उपयोगकर्ताओं की व्यापक विविधता के लिए सूचना की उत्तम पहुंच सम्मिलित है। बड़ी संख्या में शब्दार्थ अर्थहीन | पृष्ठ लेआउट के लिए सीएसएस का उपयोग करने के लाभों में विभिन्न प्रकार के [[उपयोगकर्ता एजेंट]] का उपयोग करके उपयोगकर्ताओं की व्यापक विविधता के लिए सूचना की उत्तम पहुंच सम्मिलित है। चूँकि बैंडविड्थ की बचत होती है जिससे कि बड़ी संख्या में शब्दार्थ अर्थहीन {{tag|table|o}}, {{tag|tr|o}} और {{tag|td|o}} टैग अंकितनों पृष्ठों से हटा दिए जाते हैं। किन्तु अधिक अर्थपूर्ण शीर्षक, पैराग्राफ और सूचियां छोड़ दी जाती हैं। लेआउट निर्देश साइट-व्यापी सीएसएस स्टाइलशीट में स्थानांतरित किए जाते हैं, जिन्हें प्रत्येक बार [[HTTP]] हो सकते हैं और वेब [[कैश]] पुन: उपयोग के लिए हो सकते हैं, जबकि प्रत्येक आगंतुक साइट पर नेविगेट करता है। साइटें अधिक रख-रखाव योग्य हो सकती हैं क्योंकि विशिष्ट सीएसएस के मार्क-अप को बदलकर, उस स्टाइलशीट पर निर्भर प्रत्येक पृष्ठ को प्रभावित करके पूरी साइट को केवल ही पास में रीस्टाइल या री-ब्रांड किया जा सकता है। नई एचटीएमएल सामग्री को इस तरह से जोड़ा जा सकता है कि बिना किसी और प्रयास के उपस्तिथ सीएसएस द्वारा लगातार लेआउट नियम तुरंत प्रयुक्त किए जाते हैं। | ||
== लाभ == | == लाभ == | ||
Revision as of 21:53, 28 February 2023
| Cascading Style Sheets |
|---|
| Concepts |
| Philosophies |
| Tools |
| Comparisons |
टेबललेस वेब डिजाइन (या टेबललेस पृष्ठ लेआउट) वेब डिज़ाइन विधि है। जो पृष्ठ लेआउट नियंत्रण उद्देश्यों के लिए एचटीएमएल तालिकाओं के उपयोग से बचाती है। एचटीएमएल तालिकाओं के अतिरिक्त, स्टाइल शीट (वेब विकास) भाषाओं जैसे व्यापक शैली पत्रक (सीएसएस) का उपयोग वेब पृष्ठ पर तत्वों और पाठ को व्यवस्थित करने के लिए किया जाता है।
इतिहास
एचटीएमएल पाठ के प्रस्तुतिकरण के लिए प्रयुक्त भाषा है। जिसका वैकल्पिक प्रस्तुति प्रारंभ में उपयोगकर्ता पर छोड़ दिया गया था। चूँकि सन् 1990 के दशक के मध्य में जैसे-जैसे अकादमिक और शोध की दुनिया से इंटरनेट का विस्तार हुआ था और अधिक मीडिया उन्मुख हो गया था। जिससे कि ग्राफिक डिजाइनरों ने अपने वेब पेजों के दृश्य स्वरूप को नियंत्रित करने के विधियों की तलाश की थी। जैसा कि विशेष रूप से डिजाइनर डेविड सीगल (उद्यमी) ने अपनी पुस्तक क्रिएटिंग किलर वेब साइट्स में लोकप्रिय किया गया था। सामान्यतः पृष्ठ लेआउट बनाने और बनाए रखने के लिए टेबल और स्पेसर जीआईएफ (सामान्यतः स्पष्ट रूप से निर्दिष्ट चौड़ाई, ऊंचाई या मार्जिन के साथ पारदर्शी एकल पिक्सेल जीआईएफ चित्र) का उपयोग किया गया था।[1]
सन् 1990 के दशक के अंत में पहले उचित रूप से शक्तिशाली WYSIWYG (विसीविग) संपादक बाजार में आए थे। जिसका अर्थ यह था कि वेब डिजाइनरों को अब वेब पृष्ठ बनाने के लिए एचटीएमएल की तकनीकी समझ की आवश्यकता नहीं है।[2] चूँकि ऐसे संपादकों ने अप्रत्यक्ष रूप से डिजाइन तत्वों को स्थान देने के लिए नेस्टेड तालिकाओं के व्यापक उपयोग को प्रोत्साहित किया गया था। जैसा कि डिजाइनरों ने इन संपादकों में अपने दस्तावेज़ संपादित किए है और दस्तावेज़ में अनावश्यक कोड और खाली तत्व जोड़े गए है। इसके अतिरिक्त WYSIWYG (विसीविग) संपादक का उपयोग करते समय अकुशल डिजाइनरों द्वारा आवश्यकता से अधिक तालिकाओं का उपयोग करने की संभावना थी। इस अभ्यास ने अधिकांशतः तालिकाओं के अंदर नेस्टेड कई तालिकाओं के साथ-साथ अनावश्यक पंक्तियों और स्तंभों वाली तालिकाओं का नेतृत्व किया गया था। चूँकि स्लाइसिंग टूल के साथ ग्राफ़िक संपादकों का उपयोग जो एचटीएमएल और छवियों को सीधे आउटपुट करता है और अधिकांशतः 1 पिक्सेल ऊंचाई या चौड़ाई की कई पंक्तियों वाली तालिकाओं के साथ खराब कोड को भी बढ़ावा देता है। अतः कभी-कभी वास्तविक सामग्री की तुलना में सामग्री को प्रस्तुत करने के लिए कोड की कई पंक्तियों का उपयोग किया जाता था।
सामान्यतः लेआउट उद्देश्यों के लिए तालिकाओं पर निर्भरता के कारण कई समस्याएं उत्पन्न हुई हैं। जो कई वेब पेजों को तालिकाओं के अंदर नेस्टेड तालिकाओं के साथ डिज़ाइन किया गया था। जिसके परिणामस्वरूप बड़े एचटीएमएल दस्तावेज़ सरल स्वरूप वाले दस्तावेज़ों की तुलना में अधिक बैंडविड्थ का उपयोग करते हैं। इसके अतिरिक्त जब तालिका-आधारित लेआउट को रेखीयकृत किया जाता है। उदाहरण के लिए जब स्क्रीन रीडर या खोज इंजन द्वारा पार्स किया जा रहा होता है। तो सामग्री का परिणामी क्रम कुछ अव्यवस्था और भ्रामक हो सकता है।
कैस्केडिंग स्टाइल शीट्स (सीएसएस) को प्रस्तुतिकरण और सामग्री के पृथक्करण में सुधार करने और वेब पर सामग्री के शब्दार्थ संगठन की ओर वापस जाने के लिए विकसित किया गया था। चूँकि "टेबललेस डिज़ाइन" शब्द का तात्पर्य पृष्ठ पर एचटीएमएल तत्वों को रखने के लिए लेआउट टेबल के अतिरिक्त सीएसएस के उपयोग से है। अतः वेब पृष्ठों के अंदर सारणीबद्ध जानकारी प्रस्तुत करते समय एचटीएमएल तालिकाओं का अभी भी अपना वैध स्थान है[3]और कभी-कभी अभी भी उन स्थितियों में लेआउट डिवाइस के रूप में उपयोग किया जाता है। जिनके लिए सीएसएस समर्थन खराब या समस्याग्रस्त होता है। जैसे किसी तत्व को लंबवत रूप से केंद्रित करना इत्यादि। सामान्यतः अन्य क्षेत्र जहां अभी भी तालिकाओं का उपयोग किया जाता है। वह ई-मेलर है, जिससे कि कई लोकप्रिय ईमेल ग्राहक आधुनिक एचटीएमएल और सीएसएस प्रतिपादन के साथ आपसी मेल नहीं बना पाता हैं। अतः ऐसे परिदृश्य में, जटिल ई-मेलर्स अपने कुछ संरचनात्मक और रचनात्मक संरेखण खो देते हैं।
दत्तक ग्रहण
सीएसएस1 विनिर्देश दिसंबर सन् 1996 में विश्वव्यापी वेब संकाय द्वारा प्रकाशित किया गया था।[4]जिसका उद्देश्य वेब पहुंच में सुधार करना और एचटीएमएल दस्तावेज़ों में शब्दार्थ कंप्यूटर विज्ञान सामग्री से स्टाइल शीट में प्रस्तुतिकरण विवरण को प्रथक करने पर बल देना था। अतः मई 1998 में सीएसएस2 (बाद में सीएसएस 2.1 और सीएसएस 2.2 में संशोधित) ने स्थिति और टेबल लेआउट के लिए सुविधाओं के साथ सीएसएस1 का विस्तार किया गया था।
संपूर्ण वेब पेजों के लेआउट को नियंत्रित करने के लिए सीएसएस के अतिरिक्त एचटीएमएल तालिकाओं का उपयोग करने की प्राथमिकता कई कारणों से थी।
- सामग्री प्रकाशकों की अपनी वेब साइट पर अपने उपस्तिथ कॉर्पोरेट डिजाइन तत्वों को पुनः दोहराने की इच्छा होती है।
- ब्राउज़रों में सीएसएस समर्थन के समय की सीमाएँ होती है।
- उन ब्राउज़रों का स्थापित आधार जो सीएसएस का समर्थन नहीं करते है।
- नए वेब डिजाइनरों को सीएसएस मानकों की जानकारी नहीं है।
- सीएसएस का उपयोग करने के कारणों (एचटीएमएल सेमांटिक वेब और वेब एक्सेसिबिलिटी सहित) के बारे में ज्ञान की कमी या चिंताओं के लिए सीएसएस का उपयोग करने के अतिरिक्त इच्छित लेआउट को जल्दी से प्राप्त करने के लिए आसान विधि माना जाता था।
- WYSIWYG (विसीविग) वेब डिज़ाइन टूल का नया समुदाय जिसने इस अभ्यास को प्रोत्साहित किया है।
सामान्यतः सीएसएस-आधारित लेआउट को अपनाने में लैंडमार्क में फरवरी सन् 2001 का वेब मानक प्रोजेक्ट का ब्राउज़र अपग्रेड अभियान और वेब डिज़ाइन पत्रिका सूची के अलावा का साथ नया डिज़ाइन सम्मिलित है। जिसके पश्चात् सन् 2002 में वायर्ड (पत्रिका) का नया स्वरूप सम्मिलित है।[5] अतः सन् 2003 में प्रारंभ की गई सीएसएस ज़ेन गार्डन वेबसाइट को टेबललेस लेआउट को लोकप्रिय बनाने का श्रेय दिया जाता है।[6]
औचित्य
एचटीएमएल तालिकाओं का अभीष्ट और शब्दार्थ उद्देश्य पृष्ठ डालने के अतिरिक्त[7] प्रस्तुत करने वाली तालिका (सूचना) में निहित है।[3][8]
पृष्ठ लेआउट के लिए सीएसएस का उपयोग करने के लाभों में विभिन्न प्रकार के उपयोगकर्ता एजेंट का उपयोग करके उपयोगकर्ताओं की व्यापक विविधता के लिए सूचना की उत्तम पहुंच सम्मिलित है। चूँकि बैंडविड्थ की बचत होती है जिससे कि बड़ी संख्या में शब्दार्थ अर्थहीन <table>, <tr> और <td> टैग अंकितनों पृष्ठों से हटा दिए जाते हैं। किन्तु अधिक अर्थपूर्ण शीर्षक, पैराग्राफ और सूचियां छोड़ दी जाती हैं। लेआउट निर्देश साइट-व्यापी सीएसएस स्टाइलशीट में स्थानांतरित किए जाते हैं, जिन्हें प्रत्येक बार HTTP हो सकते हैं और वेब कैश पुन: उपयोग के लिए हो सकते हैं, जबकि प्रत्येक आगंतुक साइट पर नेविगेट करता है। साइटें अधिक रख-रखाव योग्य हो सकती हैं क्योंकि विशिष्ट सीएसएस के मार्क-अप को बदलकर, उस स्टाइलशीट पर निर्भर प्रत्येक पृष्ठ को प्रभावित करके पूरी साइट को केवल ही पास में रीस्टाइल या री-ब्रांड किया जा सकता है। नई एचटीएमएल सामग्री को इस तरह से जोड़ा जा सकता है कि बिना किसी और प्रयास के उपस्तिथ सीएसएस द्वारा लगातार लेआउट नियम तुरंत प्रयुक्त किए जाते हैं।
लाभ
अभिगम्यता
इंटरनेट के तेजी से विकास, विकलांग भेदभाव अधिनियम के विस्तार, और चल दूरभाष और व्यक्तिगत डिजिटल सहायक के बढ़ते उपयोग के कारण, वेब सामग्री को अपेक्षाकृत समान डेस्कटॉप कंप्यूटर और सीआरटी से परे विभिन्न प्रकार के उपकरणों को संचालित करने वाले उपयोगकर्ताओं के लिए सुलभ बनाना आवश्यक है। मॉनिटर इकोसिस्टम वेब सबसे पहले लोकप्रिय हुआ। टेबललेस वेब डिज़ाइन इस संबंध में वेब एक्सेसिबिलिटी में अधिक सुधार करता है, क्योंकि स्क्रीन के लिए बहुत चौड़ी टेबल को पूरी तरह से पढ़ने के लिए साइड में स्क्रॉल करने की आवश्यकता होती है, जबकि टेक्स्ट चारों ओर लपेटा जा सकता है।
स्क्रीन रीडर और ब्रेल उपकरणों को टेबललेस डिज़ाइन के साथ कम समस्याएँ होती हैं क्योंकि वे तार्किक संरचना का पालन करते हैं। वेब सर्च इंजन वेब क्रॉलर्स के लिए भी यही सच है, सॉफ्टवेयर एजेंट जो कि अधिकांश वेब साइट प्रकाशकों को उम्मीद है कि वे अपने पृष्ठ ढूंढ लेंगे, उन्हें त्रुटिहीन रूप से वर्गीकृत करेंगे और संभावित उपयोगकर्ताओं को उचित खोजों में उन्हें आसानी से ढूंढने में सक्षम बनाएंगे।
डिजाइन (सीएसएस) और संरचना (एचटीएमएल) के पृथक्करण के परिणामस्वरूप, विभिन्न उपकरणों के लिए अलग-अलग लेआउट प्रदान करना भी संभव है, उदा। तरकीब अपने हाथ में है , मोबाइल फोन इत्यादि। प्रिंट के लिए अलग स्टाइल शीट निर्दिष्ट करना भी संभव है, उदा। उन विज्ञापनों या नेविगेशन तत्वों की उपस्थिति को छिपाने या संशोधित करने के लिए जो अप्रासंगिक हैं और पृष्ठ के प्रिंट करने योग्य संस्करण में परेशानी उत्पन्न करते हैं।
W3C के वेब सामग्री अभिगम्यता दिशानिर्देश के दिशानिर्देश सं। 3 राज्य मार्कअप और स्टाइल शीट का उपयोग करते हैं और ठीक से करते हैं।[9] दिशानिर्देश का चेकपॉइंट 3.3, प्राथमिकता-2 चेकपॉइंट, कहता है कि लेआउट और प्रस्तुति को नियंत्रित करने के लिए स्टाइल शीट का उपयोग करें।[10]
बैंडविड्थ बचत
टेबललेस डिज़ाइन कम एचटीएमएल टैग वाले वेब पृष्ठ बनाता है जो पूरी तरह से सामग्री की स्थिति के लिए उपयोग किए जाते हैं। इसका सामान्यतः मतलब है कि पृष्ठ डाउनलोड करने के लिए खुद छोटे हो जाते हैं। दर्शन का तात्पर्य है कि लेआउट और पोजिशनिंग के संबंध में सभी निर्देश बाहरी स्टाइल शीट्स में स्थानांतरित किए जाएं। एचटीटीपी की मूलभूत क्षमताओं के अनुसार, क्योंकि ये संभवतः ही कभी बदलते हैं और वे कई वेब पेजों पर सामान्यतः प्रयुक्त होते हैं, उन्हें कैश किया जाएगा और पहले डाउनलोड के बाद पुन: उपयोग किया जाएगा। यह साइट पर बैंडविड्थ और डाउनलोड समय को और कम करता है।[11][12]
रखरखाव
साइट के उद्देश्य के आधार पर वेबसाइट को बनाए रखने के लिए वेबसाइट की दृश्य शैली में छोटे और बड़े दोनों तरह के लगातार बदलाव की आवश्यकता हो सकती है। टेबल-आधारित लेआउट के अनुसार , लेआउट एचटीएमएल का ही हिस्सा है। इस प्रकार, एचटीएमएल संपादकों जैसे टेम्पलेट-आधारित विज़ुअल संपादकों की सहायता के बिना, पूरी साइट पर तत्वों के स्थितीय लेआउट को बदलने के लिए आवश्यक दोहराव वाले परिवर्तनों की मात्रा के आधार पर बहुत अधिक प्रयास की आवश्यकता हो सकती है। यहां तक कि sed या इसी तरह की वैश्विक फाइंड-एंड-रिप्लेस यूटिलिटीज को नियोजित करना भी समस्या को पूरी तरह से कम नहीं कर सकता है।
सीएसएस का उपयोग करते हुए टेबललेस लेआउट में, लेआउट जानकारी सीएसएस दस्तावेज़ में रह सकती है। क्योंकि लेआउट जानकारी केंद्रीकृत हो सकती है, यह संभव है कि ये परिवर्तन डिफ़ॉल्ट रूप से जल्दी और विश्व स्तर पर किए जा सकें। लेआउट परिवर्तन करते समय एचटीएमएल फ़ाइलों को स्वयं समायोजित करने की आवश्यकता नहीं हो सकती है।
इसके अतिरिक्त, क्योंकि लेआउट जानकारी को एचटीएमएल में बाहरी रूप से संग्रहीत किया जा सकता है, टेबललेस डिज़ाइन में नई सामग्री जोड़ना अधिक आसान हो सकता है, चाहे वह उपस्तिथ पृष्ठ को संशोधित कर रहा हो या नया पृष्ठ जोड़ रहा हो। इसके विपरीत, इस तरह के डिज़ाइन के बिना, प्रत्येक पृष्ठ के लिए लेआउट को प्रत्येक उदाहरण के मैन्युअल परिवर्तन या वैश्विक खोज-और-प्रतिस्थापन उपयोगिताओं के उपयोग के लिए अधिक समय लेने वाली मैन्युअल परिवर्तन की आवश्यकता हो सकती है। चूंकि, साइट के मालिक अधिकांशतः चाहते हैं कि विशेष पृष्ठ या तो छोटी अवधि या लंबी अवधि के लिए साइट पर उपस्तिथ अन्य पेजों से अलग हों। इसके लिए अधिकांशतः उस पृष्ठ के लिए अलग स्टाइल शीट विकसित करने की आवश्यकता होगी। पृष्ठ (या टेम्प्लेट) सामग्री सामान्यतः अपरिवर्तित रह सकती है, जो कि टेबल-आधारित डिज़ाइन में नहीं है।
यह भी देखें
- फ़्रेमिंग (वर्ल्ड वाइड वेब)
- प्रतिक्रियात्मक वेब डिज़ाइन
- वेब साक्षरता|वेब साक्षरता (डिजाइन और पहुंच)
- पवित्र कंघी बनानेवाले की रेती (वेब डिजाइन)
संदर्भ
- ↑ Gruber, Jordan S. (1997-02-01). "साइट से बाहर". Wired.
- ↑ Maas, Benard. "WYSIWYG संपादकों का संक्षिप्त इतिहास". 1PMWD. Retrieved 10 February 2015.
Microsoft Office FrontPage was released as a bundle of the 1997 version of the Microsoft Office, it was the first time that a robust, commercial HTML WYSIWYG editor-and-publisher was available for every person to use... When a webpage built out of the WYSIWYG MS FrontPage software would run with a backend FPSE in place it would enjoy the full strength that a technologist could possibly build by writing HTML code from scratch. Web designers no longer needed a technical understanding of HTML to build web pages.
- ↑ 3.0 3.1 Jennifer Kyrnin. "Tables for Tabular Data — What is Tabular Data? When to Use Tables in a Standards-Based XHTML Document". About.com, a part of The New York Times Company. Retrieved 2009-10-22.
- ↑ Lie, Håkon Wium; Bos, Bert (1996-12-17). "W3C Recommendation: Cascading Style Sheets, Level 1". W3C. Archived from the original on 1997-06-05. Retrieved 2019-04-19.
- ↑ Zeldman, Jeffrey (2003-05-14). वेब मानकों के साथ डिजाइनिंग (1st ed.). Indianapolis: New Riders. pp. 120-134. ISBN 978-0-7357-1201-0.
- ↑ Zeldman, Jeffrey (2007). वेब मानकों के साथ डिजाइनिंग (2nd ed.). Berkeley: New Riders. p. 137. ISBN 978-0-321-38555-0.
- ↑ Dominique Hazaël-Massieux (2005). "Tableless layout HOWTO". W3C. Retrieved 2007-09-08.
- ↑ "17.2.1 Anonymous table objects". Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C. 2009. Retrieved 2009-10-23.
- ↑
"Web Content Accessibility Guidelines 1.0". W3C. 1999. Retrieved 2009-09-19.
Guideline 3. Use markup and style sheets and do so properly.
- ↑
"Techniques for Web Content Accessibility Guidelines 1.0". W3C. 2000. Retrieved 2009-09-19.
Use style sheets to control layout and presentation.
- ↑ Daniel M. Frommelt (2003). "Retooling Slashdot with Web Standards". A List Apart Magazine. Retrieved 2009-09-20.
- ↑
Dan Shafer (2003). "HTML Utopia: Designing Without Tables Using CSS, Chapter 4: CSS Website Design". SitePoint Pty. Retrieved 2009-09-20.
...on top of the organizational advantages described above, the browser has less code to download. On heavily designed sites, or sites with hundreds of pages or more, this reduced download time can have a significant impact both on the user experience, and on your bandwidth costs.
बाहरी संबंध
- W3C Tableless layout HOWTO
- 13 Reasons Why सीएसएस Is Superior to Tables in Website Design
- Open Designs (A collection of W3C-compliant tableless web templates)
