टेबललेस वेब डिज़ाइन: Difference between revisions
m (added Category:Vigyan Ready using HotCat) |
No edit summary |
||
| (One intermediate revision by one other user not shown) | |||
| Line 123: | Line 123: | ||
* [https://web.archive.org/web/20090216193839/http://www.chromaticsites.com/blog/13-reasons-why-css-is-superior-to-tables-in-website-design/ 13 Reasons Why सीएसएस Is Superior to Tables in Website Design] | * [https://web.archive.org/web/20090216193839/http://www.chromaticsites.com/blog/13-reasons-why-css-is-superior-to-tables-in-website-design/ 13 Reasons Why सीएसएस Is Superior to Tables in Website Design] | ||
* [http://www.opendesigns.org/website-templates/ Open Designs] (A collection of W3C-compliant tableless web templates) | * [http://www.opendesigns.org/website-templates/ Open Designs] (A collection of W3C-compliant tableless web templates) | ||
[[Category:Articles with hatnote templates targeting a nonexistent page]] | |||
[[Category: | |||
[[Category:Created On 25/02/2023]] | [[Category:Created On 25/02/2023]] | ||
[[Category:Vigyan Ready]] | [[Category:Lua-based templates]] | ||
[[Category:Machine Translated Page]] | |||
[[Category:Pages with script errors]] | |||
[[Category:Short description with empty Wikidata description]] | |||
[[Category:Templates Vigyan Ready]] | |||
[[Category:Templates that add a tracking category]] | |||
[[Category:Templates that generate short descriptions]] | |||
[[Category:Templates using TemplateData]] | |||
[[Category:कैस्केडिंग स्टाइल शीट्स| कैस्केडिंग स्टाइल शीट्स ]] | |||
[[Category:प्रतिक्रियात्मक वेब डिज़ाइन]] | |||
[[Category:वेब डिजाइन]] | |||
[[Category:वेब पहुंच]] | |||
Latest revision as of 18:02, 3 March 2023
| Cascading Style Sheets |
|---|
| Concepts |
| Philosophies |
| Tools |
| Comparisons |
टेबललेस वेब डिजाइन (या टेबललेस पृष्ठ लेआउट) वेब डिज़ाइन विधि है। जो पृष्ठ लेआउट नियंत्रण उद्देश्यों के लिए एचटीएमएल तालिकाओं के उपयोग से बचाती है। एचटीएमएल तालिकाओं के अतिरिक्त, स्टाइल शीट (वेब विकास) भाषाओं जैसे व्यापक शैली पत्रक (सीएसएस) का उपयोग वेब पृष्ठ पर तत्वों और पाठ को व्यवस्थित करने के लिए किया जाता है।
इतिहास
एचटीएमएल पाठ के प्रस्तुतिकरण के लिए प्रयुक्त भाषा है। जिसका वैकल्पिक प्रस्तुति प्रारंभ में उपयोगकर्ता पर छोड़ दिया गया था। चूँकि सन् 1990 के दशक के मध्य में जैसे-जैसे अकादमिक और शोध की दुनिया से इंटरनेट का विस्तार हुआ था और अधिक मीडिया उन्मुख हो गया था। जिससे कि ग्राफिक डिजाइनरों ने अपने वेब पेजों के दृश्य स्वरूप को नियंत्रित करने के विधियों की तलाश की थी। जैसा कि विशेष रूप से डिजाइनर डेविड सीगल (उद्यमी) ने अपनी पुस्तक क्रिएटिंग किलर वेब साइट्स में लोकप्रिय किया गया था। सामान्यतः पृष्ठ लेआउट बनाने और बनाए रखने के लिए टेबल और स्पेसर जीआईएफ (सामान्यतः स्पष्ट रूप से निर्दिष्ट चौड़ाई, ऊंचाई या मार्जिन के साथ पारदर्शी एकल पिक्सेल जीआईएफ चित्र) का उपयोग किया गया था।[1]
सन् 1990 के दशक के अंत में पहले उचित रूप से शक्तिशाली WYSIWYG (विसीविग) संपादक बाजार में आए थे। जिसका अर्थ यह था कि वेब डिजाइनरों को अब वेब पृष्ठ बनाने के लिए एचटीएमएल की तकनीकी समझ की आवश्यकता नहीं है।[2] चूँकि ऐसे संपादकों ने अप्रत्यक्ष रूप से डिजाइन तत्वों को स्थान देने के लिए नेस्टेड तालिकाओं के व्यापक उपयोग को प्रोत्साहित किया गया था। जैसा कि डिजाइनरों ने इन संपादकों में अपने दस्तावेज़ संपादित किए है और दस्तावेज़ में अनावश्यक कोड और खाली तत्व जोड़े गए है। इसके अतिरिक्त WYSIWYG (विसीविग) संपादक का उपयोग करते समय अकुशल डिजाइनरों द्वारा आवश्यकता से अधिक तालिकाओं का उपयोग करने की संभावना थी। इस अभ्यास ने अधिकांशतः तालिकाओं के अंदर नेस्टेड कई तालिकाओं के साथ-साथ अनावश्यक पंक्तियों और स्तंभों वाली तालिकाओं का नेतृत्व किया गया था। चूँकि स्लाइसिंग टूल के साथ ग्राफ़िक संपादकों का उपयोग जो एचटीएमएल और छवियों को सीधे आउटपुट करता है और अधिकांशतः 1 पिक्सेल ऊंचाई या चौड़ाई की कई पंक्तियों वाली तालिकाओं के साथ खराब कोड को भी बढ़ावा देता है। अतः कभी-कभी वास्तविक सामग्री की तुलना में सामग्री को प्रस्तुत करने के लिए कोड की कई पंक्तियों का उपयोग किया जाता था।
सामान्यतः लेआउट उद्देश्यों के लिए तालिकाओं पर निर्भरता के कारण कई समस्याएं उत्पन्न हुई हैं। जो कई वेब पेजों को तालिकाओं के अंदर नेस्टेड तालिकाओं के साथ डिज़ाइन किया गया था। जिसके परिणामस्वरूप बड़े एचटीएमएल दस्तावेज़ सरल स्वरूप वाले दस्तावेज़ों की तुलना में अधिक बैंडविड्थ का उपयोग करते हैं। इसके अतिरिक्त जब तालिका-आधारित लेआउट को रेखीयकृत किया जाता है। उदाहरण के लिए जब स्क्रीन रीडर या खोज इंजन द्वारा पार्स किया जा रहा होता है। तो सामग्री का परिणामी क्रम कुछ अव्यवस्था और भ्रामक हो सकता है।
कैस्केडिंग स्टाइल शीट्स (सीएसएस) को प्रस्तुतिकरण और सामग्री के पृथक्करण में सुधार करने और वेब पर सामग्री के शब्दार्थ संगठन की ओर वापस जाने के लिए विकसित किया गया था। चूँकि "टेबललेस डिज़ाइन" शब्द का तात्पर्य पृष्ठ पर एचटीएमएल तत्वों को रखने के लिए लेआउट टेबल के अतिरिक्त सीएसएस के उपयोग से है। अतः वेब पृष्ठों के अंदर सारणीबद्ध जानकारी प्रस्तुत करते समय एचटीएमएल तालिकाओं का अभी भी अपना वैध स्थान है[3]और कभी-कभी अभी भी उन स्थितियों में लेआउट डिवाइस के रूप में उपयोग किया जाता है। जिनके लिए सीएसएस समर्थन खराब या समस्याग्रस्त होता है। जैसे किसी तत्व को लंबवत रूप से केंद्रित करना इत्यादि। सामान्यतः अन्य क्षेत्र जहां अभी भी तालिकाओं का उपयोग किया जाता है। वह ई-मेलर है, जिससे कि कई लोकप्रिय ईमेल ग्राहक आधुनिक एचटीएमएल और सीएसएस प्रतिपादन के साथ आपसी मेल नहीं बना पाता हैं। अतः ऐसे परिदृश्य में, जटिल ई-मेलर्स अपने कुछ संरचनात्मक और रचनात्मक संरेखण खो देते हैं।
स्वीकृति
सीएसएस1 (CSS1) विनिर्देश दिसंबर सन् 1996 में विश्वव्यापी वेब संकाय द्वारा प्रकाशित किया गया था।[4]जिसका उद्देश्य वेब पहुंच में सुधार करना और एचटीएमएल दस्तावेज़ों में शब्दार्थ कंप्यूटर विज्ञान सामग्री से स्टाइल शीट में प्रस्तुतिकरण विवरण को प्रथक करने पर बल देना था। अतः मई 1998 में सीएसएस2 (बाद में सीएसएस 2.1 और सीएसएस 2.2 में संशोधित) ने स्थिति और टेबल लेआउट के लिए सुविधाओं के साथ सीएसएस1 का विस्तार किया गया था।
संपूर्ण वेब पेजों के लेआउट को नियंत्रित करने के लिए सीएसएस के अतिरिक्त एचटीएमएल तालिकाओं का उपयोग करने की प्राथमिकता कई कारणों से थी।
- सामग्री प्रकाशकों की अपनी वेब साइट पर अपने उपस्तिथ कॉर्पोरेट डिजाइन तत्वों को पुनः दोहराने की इच्छा होती है।
- ब्राउज़रों में सीएसएस समर्थन के समय की सीमाएँ होती है।
- उन ब्राउज़रों का स्थापित आधार जो सीएसएस का समर्थन नहीं करते है।
- नए वेब डिजाइनरों को सीएसएस मानकों की जानकारी नहीं है।
- सीएसएस का उपयोग करने के कारणों (एचटीएमएल सेमांटिक वेब और वेब अभिगम्यता सहित) के बारे में ज्ञान की कमी या चिंताओं के लिए सीएसएस का उपयोग करने के अतिरिक्त इच्छित लेआउट को जल्दी से प्राप्त करने के लिए आसान विधि माना जाता था।
- WYSIWYG (विसीविग) वेब डिज़ाइन टूल का नया समुदाय जिसने इस अभ्यास को प्रोत्साहित किया है।
सामान्यतः सीएसएस-आधारित लेआउट को अपनाने में लैंडमार्क में फरवरी सन् 2001 का वेब मानक प्रोजेक्ट का ब्राउज़र अपग्रेड अभियान और वेब डिज़ाइन पत्रिका सूची के अलावा का साथ नया डिज़ाइन सम्मिलित है। जिसके पश्चात् सन् 2002 में वायर्ड (पत्रिका) का नया स्वरूप सम्मिलित है।[5] अतः सन् 2003 में प्रारंभ की गई सीएसएस ज़ेन गार्डन वेबसाइट को टेबललेस लेआउट को लोकप्रिय बनाने का श्रेय दिया जाता है।[6]
औचित्य
एचटीएमएल तालिकाओं का अभीष्ट और शब्दार्थ उद्देश्य पृष्ठ डालने के अतिरिक्त[7] प्रस्तुत करने वाली तालिका (सूचना) में निहित है।[3][8]
पृष्ठ लेआउट के लिए सीएसएस का उपयोग करने के लाभों में विभिन्न प्रकार के उपयोगकर्ता एजेंट का उपयोग करके उपयोगकर्ताओं की व्यापक विविधता के लिए सूचना की उत्तम पहुंच सम्मिलित है। चूँकि बैंडविड्थ की बचत होती है जिससे कि बड़ी संख्या में शब्दार्थ अर्थहीन <table>, <tr> और <td> टैग अंकितनों पृष्ठों से हटा दिए जाते हैं। किन्तु अधिक अर्थपूर्ण शीर्षक, पैराग्राफ और सूचियां छोड़ दी जाती हैं। लेआउट निर्देश साइट-व्यापी सीएसएस स्टाइलशीट में स्थानांतरित किए जाते हैं, जिन्हें एक बार डाउनलोड किया जा सकता है और प्रत्येक आगंतुक द्वारा साइट पर नेविगेट करने के दौरान पुन: उपयोग के लिए कैश किया जा सकता है। साइटें अधिक रख-रखाव योग्य हो सकती हैं जिससे कि विशिष्ट सीएसएस के मार्क-अप को परिवर्तित करके उस स्टाइलशीट पर निर्भर प्रत्येक पृष्ठ को प्रभावित करके प्रत्येक साइट को केवल ही पास में रीस्टाइल या री-ब्रांड किया जा सकता है। अतः नई एचटीएमएल सामग्री को इस प्रकार से जोड़ा जा सकता है कि बिना किसी और प्रयास के उपस्तिथ सीएसएस द्वारा लगातार लेआउट नियम तुरंत प्रयुक्त किए जाते हैं।
लाभ
अभिगम्यता
इंटरनेट के तीव्र वृद्धि, अक्षमता भेदभाव कानून का विस्तार और मोबाइल फोन और पीडीए के बढ़ते उपयोग के कारण, यह आवश्यक है कि वेब सामग्री को अपेक्षाकृत समान डेस्कटॉप कंप्यूटर और सीआरटी से ऊपर विभिन्न प्रकार के उपकरणों को संचालित करने वाले उपयोगकर्ताओं के लिए सुलभ बनाना आवश्यक है। अतः मॉनिटर इकोसिस्टम वेब सबसे पहले लोकप्रिय हुआ था। सामान्यतः टेबललेस वेब डिज़ाइन इस संबंध में वेब अभिगम्यता में अधिक सुधार करता है। जिससे कि स्क्रीन के लिए बहुत चौड़ी टेबल को पूरे प्रकार से पढ़ने के लिए साइड में स्क्रॉल करने की आवश्यकता होती है जबकि टेक्स्ट चारों ओर लपेटा जा सकता है।
स्क्रीन रीडर और ब्रेल उपकरणों को टेबललेस डिज़ाइन के साथ कम समस्याएँ होती हैं। जिससे कि वे तार्किक संरचना का पालन करते हैं। वेब सर्च इंजन वेब क्रॉलर के लिए भी यही सत्य है। अतः सॉफ्टवेयर एजेंट जो कि अधिकांश वेब साइट प्रकाशकों को उम्मीद है कि वह अपने पृष्ठ खोज लेते है और उन्हें त्रुटिहीन रूप से वर्गीकृत करते है। जिससे कि संभावित उपयोगकर्ताओं को उचित खोजों में उन्हें सरलता से खोजने में सक्षम बनाया जाता है।
डिजाइन (सीएसएस) और संरचना (एचटीएमएल) के पृथक्करण के परिणामस्वरूप विभिन्न उपकरणों के लिए भिन्न-भिन्न लेआउट प्रदान करना भी संभव है। उदाहरण के लिये, तरकीब अपने हाथ में है , मोबाइल फोन इत्यादि। चूँकि प्रिंट के लिए भिन्न स्टाइल शीट निर्दिष्ट करना भी संभव है। उदाहरण के लिये, उन विज्ञापनों या नेविगेशन तत्वों की उपस्थिति को छिपाने या संशोधित करने के लिए जो अप्रासंगिक होता हैं और पृष्ठ के प्रिंट करने योग्य संस्करण में परेशानी उत्पन्न करते हैं।
डब्लू3सी (W3C's) के वेब सामग्री अभिगम्यता दिशानिर्देश के दिशानिर्देश संख्या 3 राज्य "मार्कअप और स्टाइल शीट का उपयोग करते हैं और ठीक से करते हैं"।[9]
दिशानिर्देश का चेकपॉइंट 3.3, प्राथमिकता-2 चेकपॉइंट, कहता है कि" लेआउट और प्रस्तुति को नियंत्रित करने के लिए स्टाइल शीट का उपयोग करें"।[10]
बैंडविड्थ बचत
सामान्यतः टेबललेस डिज़ाइन कम एचटीएमएल टैग वाले वेब पृष्ठ बनाता है। जो पूरे प्रकार से सामग्री की स्थिति के लिए उपयोग किए जाते हैं। इसका सामान्यतः मतलब है कि पृष्ठ डाउनलोड करने के लिए खुद छोटे हो जाते हैं। जंहा दर्शन का तात्पर्य है कि लेआउट और पोजिशनिंग के संबंध में सभी निर्देश बाहरी स्टाइल शीट्स में स्थानांतरित किए जाते है। चूँकि एचटीटीपी की मूलभूत क्षमताओं के अनुसार, जिससे कि ये संभवतः ही कभी परिवर्तित होते हैं और वे कई वेब पेजों पर सामान्यतः प्रयुक्त होते हैं। उन्हें कैश किया जाता है और प्रथम डाउनलोड के पश्चात् पुन: उपयोग किया जाता है। अतः यह साइट पर बैंडविड्थ और डाउनलोड समय को और कम करता है।[11][12]
रखरखाव
साइट के उद्देश्य के आधार पर वेबसाइट को बनाए रखने के लिए वेबसाइट की दृश्य शैली में छोटे और बड़े दोनों प्रकार के लगातार परिवर्तन की आवश्यकता हो सकती है। टेबल-आधारित लेआउट के अनुसार , लेआउट एचटीएमएल का ही भाग है। इस प्रकार, एचटीएमएल संपादक जैसे टेम्पलेट-आधारित विज़ुअल संपादकों की सहायता के बिना पूरी साइट पर तत्वों के स्थितीय लेआउट को परिवर्तित करने के लिए आवश्यक दोहराव वाले परिवर्तनों की मात्रा के आधार पर बहुत अधिक प्रयास की आवश्यकता हो सकती है। यहां तक कि एसईडी या इसी प्रकार की वैश्विक फाइंड-एंड-रिप्लेस यूटिलिटीज को नियोजित करना भी समस्या को पूरी प्रकार से कम नहीं कर सकता है।
सीएसएस का उपयोग करते हुए टेबललेस लेआउट में, लेआउट जानकारी सीएसएस दस्तावेज़ में रह सकती है। जिससे कि लेआउट जानकारी केंद्रीकृत हो सकती है। यह संभव है कि ये परिवर्तन डिफ़ॉल्ट रूप से जल्दी और विश्व स्तर पर किए जा सकते है। अतः लेआउट परिवर्तन करते समय एचटीएमएल फ़ाइलों को स्वयं समायोजित करने की आवश्यकता नहीं हो सकती है।
इसके अतिरिक्त, जिससे कि लेआउट जानकारी को एचटीएमएल में बाहरी रूप से संग्रहीत किया जा सकता है। टेबललेस डिज़ाइन में नई सामग्री जोड़ना अधिक आसान हो सकता है। जिसके कारण वह उपस्तिथ पृष्ठ को संशोधित कर रहा होता है या नया पृष्ठ जोड़ रहा होता है। इसके विपरीत, इस प्रकार के डिज़ाइन के बिना, प्रत्येक पृष्ठ के लिए लेआउट को प्रत्येक उदाहरण के मैन्युअल परिवर्तन या वैश्विक खोज-और-प्रतिस्थापन उपयोगिताओं के उपयोग के लिए अधिक समय लेने वाली मैन्युअल परिवर्तन की आवश्यकता हो सकती है। चूंकि, साइट के मालिक अधिकांशतः चाहते हैं कि विशेष पृष्ठ या तो छोटी अवधि या लंबी अवधि के लिए साइट पर उपस्तिथ अन्य पृष्ठों से भिन्न होंते है। इसके लिए अधिकांशतः उस पृष्ठ के लिए भिन्न स्टाइल शीट विकसित करने की आवश्यकता होती है। अतः पृष्ठ (या टेम्प्लेट) सामग्री सामान्यतः अपरिवर्तित रह सकती है। जो कि टेबल-आधारित डिज़ाइन में नहीं है।
यह भी देखें
- फ़्रेमिंग (वर्ल्ड वाइड वेब)
- प्रतिक्रियात्मक (रेस्पॉन्सिव) वेब डिज़ाइन
- वेब साक्षरता (डिजाइन और पहुंच)
- पवित्र कंघी बनानेवाले की रेती (वेब डिजाइन)
संदर्भ
- ↑ 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)
