टेबललेस वेब डिज़ाइन

From Vigyanwiki
Revision as of 18:01, 28 February 2023 by alpha>PreetiSingh
Cascading Style Sheets
Concepts
Philosophies
Tools
Comparisons

टेबललेस वेब डिजाइन (या टेबललेस पेज लेआउट) एक वेब डिज़ाइन विधि है जो पृष्ठ लेआउट नियंत्रण उद्देश्यों के लिए HTML तालिकाओं के उपयोग से बचाती है। एचटीएमएल तालिकाओं के अतिरिक्त, स्टाइल शीट (वेब ​​विकास) भाषाओं जैसे व्यापक शैली पत्रक (सीएसएस) का उपयोग वेब पृष्ठ पर तत्वों और पाठ को व्यवस्थित करने के लिए किया जाता है।

इतिहास

HTML एक पाठ के प्रस्तुतिकरण के लिए प्रयुक्त भाषा है जिसका विजुअल प्रेजेंटेशन शुरू में यूजर पर छोड़ दिया गया था। हालाँकि, 1990 के दशक के मध्य में जैसे-जैसे अकादमिक और शोध की दुनिया से इंटरनेट का विस्तार हुआ, और अधिक मीडिया उन्मुख हो गया, ग्राफिक डिजाइनरों ने अपने वेब पेजों के दृश्य स्वरूप को नियंत्रित करने के तरीकों की तलाश की। जैसा कि विशेष रूप से डिजाइनर डेविड सीगल (उद्यमी) ने अपनी पुस्तक क्रिएटिंग किलर वेब साइट्स में लोकप्रिय किया, पेज लेआउट बनाने और बनाए रखने के लिए टेबल और [[स्पेसर जीआईएफ]] (सामान्यतः स्पष्ट रूप से निर्दिष्ट चौड़ाई, ऊंचाई या मार्जिन के साथ पारदर्शी एकल पिक्सेल जीआईएफ चित्र) का उपयोग किया गया था।[1] 1990 के दशक के अंत में पहले उचित रूप से शक्तिशाली WYSIWYG संपादक बाजार में आए, जिसका अर्थ था कि वेब डिजाइनरों को अब वेब पेज बनाने के लिए HTML की तकनीकी समझ की आवश्यकता नहीं है।[2] ऐसे संपादकों ने अप्रत्यक्ष रूप से डिजाइन तत्वों को स्थान देने के लिए नेस्टेड तालिकाओं के व्यापक उपयोग को प्रोत्साहित किया। जैसा कि डिजाइनरों ने इन संपादकों में अपने दस्तावेज़ संपादित किए, दस्तावेज़ में अनावश्यक कोड और खाली तत्व जोड़े गए। इसके अतिरिक्त, WYSIWYG संपादक का उपयोग करते समय अकुशल डिजाइनरों द्वारा आवश्यकता से अधिक तालिकाओं का उपयोग करने की संभावना थी। इस अभ्यास ने अधिकांशतः तालिकाओं के भीतर नेस्टेड कई तालिकाओं के साथ-साथ अनावश्यक पंक्तियों और स्तंभों वाली तालिकाओं का नेतृत्व किया। स्लाइसिंग टूल के साथ ग्राफ़िक संपादकों का उपयोग जो HTML और छवियों को सीधे आउटपुट करता है, अधिकांशतः 1 पिक्सेल ऊंचाई या चौड़ाई की कई पंक्तियों वाली तालिकाओं के साथ खराब कोड को भी बढ़ावा देता है। कभी-कभी वास्तविक सामग्री की तुलना में सामग्री को प्रस्तुत करने के लिए कोड की कई और पंक्तियों का उपयोग किया जाता था।

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

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

दत्तक ग्रहण

CSS1 विनिर्देश दिसंबर 1996 में विश्वव्यापी वेब संकाय द्वारा प्रकाशित किया गया था[4] वेब पहुंच में सुधार के उद्देश्य से और HTML दस्तावेज़ों में शब्दार्थ#कंप्यूटर विज्ञान सामग्री से स्टाइल शीट में प्रस्तुतिकरण विवरण को अलग करने पर बल देना। मई 1998 में CSS2 (बाद में CSS 2.1 और CSS 2.2 में संशोधित) ने स्थिति और टेबल लेआउट के लिए सुविधाओं के साथ CSS1 का विस्तार किया।

संपूर्ण वेब पेजों के लेआउट को नियंत्रित करने के लिए CSS के अतिरिक्त HTML तालिकाओं का उपयोग करने की प्राथमिकता कई कारणों से थी:

  • सामग्री प्रकाशकों की अपनी वेब साइट पर अपने उपस्तिथ कॉर्पोरेट डिजाइन तत्वों को दोहराने की इच्छा;
  • ब्राउज़रों में CSS समर्थन के समय की सीमाएँ;
  • उन ब्राउज़रों का स्थापित आधार जो CSS का समर्थन नहीं करते;
  • नए वेब डिजाइनरों को सीएसएस मानकों की जानकारी नहीं है;
  • सीएसएस का उपयोग करने के कारणों (एचटीएमएल सेमांटिक वेब और वेब एक्सेसिबिलिटी सहित) के बारे में ज्ञान की कमी, या चिंताओं के लिए सीएसएस का उपयोग करने के अतिरिक्त इच्छित लेआउट को जल्दी से प्राप्त करने के लिए एक आसान तरीका माना जाता था, और
  • WYSIWYG वेब डिज़ाइन टूल की एक नई नस्ल जिसने इस अभ्यास को प्रोत्साहित किया।

सीएसएस-आधारित लेआउट को अपनाने में लैंडमार्क में फरवरी 2001 का वेब मानक प्रोजेक्ट का ब्राउज़र अपग्रेड अभियान और वेब डिज़ाइन पत्रिका एक सूची अलग का एक साथ नया डिज़ाइन सम्मिलित है, जिसके बाद 2002 में वायर्ड (पत्रिका) का नया स्वरूप सम्मिलित है।[5] 2003 में शुरू की गई सीएसएस ज़ेन गार्डन वेबसाइट को टेबललेस लेआउट को लोकप्रिय बनाने का श्रेय दिया जाता है।[6]


औचित्य

HTML तालिकाओं का अभीष्ट और शब्दार्थ उद्देश्य प्रस्तुत करने वाली तालिका (सूचना) में निहित है[3][7] पेज डालने के अतिरिक्त।[8] पृष्ठ लेआउट के लिए सीएसएस का उपयोग करने के लाभों में विभिन्न प्रकार के उपयोगकर्ता एजेंटों का उपयोग करके उपयोगकर्ताओं की व्यापक विविधता के लिए सूचना की बेहतर पहुंच सम्मिलित है। बड़ी संख्या में शब्दार्थ अर्थहीन के रूप में बैंडविड्थ बचत होती है ‎<table>, ‎<tr> और ‎<td> टैग दर्जनों पृष्ठों से हटा दिए जाते हैं, लेकिन कम, लेकिन अधिक अर्थपूर्ण शीर्षक, पैराग्राफ और सूचियां छोड़ दी जाती हैं। लेआउट निर्देश साइट-व्यापी CSS स्टाइलशीट में स्थानांतरित किए जाते हैं, जो एक बार HTTP हो सकते हैं और वेब कैश पुन: उपयोग के लिए हो सकते हैं, जबकि प्रत्येक आगंतुक साइट पर नेविगेट करता है। साइटें अधिक रख-रखाव योग्य हो सकती हैं क्योंकि विशिष्ट CSS के मार्क-अप को बदलकर, उस स्टाइलशीट पर निर्भर प्रत्येक पृष्ठ को प्रभावित करके पूरी साइट को केवल एक ही पास में रीस्टाइल या री-ब्रांड किया जा सकता है। नई HTML सामग्री को इस तरह से जोड़ा जा सकता है कि बिना किसी और प्रयास के उपस्तिथ सीएसएस द्वारा लगातार लेआउट नियम तुरंत प्रयुक्त किए जाते हैं।

लाभ

अभिगम्यता

Main articles: Web accessibility and Search engine optimization

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

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

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

W3C के वेब सामग्री अभिगम्यता दिशानिर्देश के दिशानिर्देश सं। 3 राज्य मार्कअप और स्टाइल शीट का उपयोग करते हैं और ठीक से करते हैं।[9] दिशानिर्देश का चेकपॉइंट 3.3, एक प्राथमिकता-2 चेकपॉइंट, कहता है कि लेआउट और प्रस्तुति को नियंत्रित करने के लिए स्टाइल शीट का उपयोग करें।[10]


बैंडविड्थ बचत

टेबललेस डिज़ाइन कम HTML टैग वाले वेब पेज बनाता है जो पूरी तरह से सामग्री की स्थिति के लिए उपयोग किए जाते हैं। इसका सामान्यतः मतलब है कि पेज डाउनलोड करने के लिए खुद छोटे हो जाते हैं। दर्शन का तात्पर्य है कि लेआउट और पोजिशनिंग के संबंध में सभी निर्देश बाहरी स्टाइल शीट्स में स्थानांतरित किए जाएं। एचटीटीपी की मूलभूत क्षमताओं के अनुसार, क्योंकि ये शायद ही कभी बदलते हैं और वे कई वेब पेजों पर सामान्यतः प्रयुक्त होते हैं, उन्हें कैश किया जाएगा और पहले डाउनलोड के बाद पुन: उपयोग किया जाएगा। यह साइट पर बैंडविड्थ और डाउनलोड समय को और कम करता है।[11][12]


रखरखाव

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

सीएसएस का उपयोग करते हुए टेबललेस लेआउट में, लेआउट जानकारी सीएसएस दस्तावेज़ में रह सकती है। क्योंकि लेआउट जानकारी केंद्रीकृत हो सकती है, यह संभव है कि ये परिवर्तन डिफ़ॉल्ट रूप से जल्दी और विश्व स्तर पर किए जा सकें। लेआउट परिवर्तन करते समय HTML फ़ाइलों को स्वयं समायोजित करने की आवश्यकता नहीं हो सकती है।

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

यह भी देखें

संदर्भ

  1. ↑ Gruber, Jordan S. (1997-02-01). "साइट से बाहर". Wired.
  2. ↑ 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. ↑ 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.
  4. ↑ 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.
  5. ↑ Zeldman, Jeffrey (2003-05-14). वेब मानकों के साथ डिजाइनिंग (1st ed.). Indianapolis: New Riders. pp. 120-134. ISBN 978-0-7357-1201-0.
  6. ↑ Zeldman, Jeffrey (2007). वेब मानकों के साथ डिजाइनिंग (2nd ed.). Berkeley: New Riders. p. 137. ISBN 978-0-321-38555-0.
  7. ↑ "17.2.1 Anonymous table objects". Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C. 2009. Retrieved 2009-10-23.
  8. ↑ Dominique Hazaël-Massieux (2005). "Tableless layout HOWTO". W3C. Retrieved 2007-09-08.
  9. ↑ "Web Content Accessibility Guidelines 1.0". W3C. 1999. Retrieved 2009-09-19. Guideline 3. Use markup and style sheets and do so properly.
  10. ↑ "Techniques for Web Content Accessibility Guidelines 1.0". W3C. 2000. Retrieved 2009-09-19. Use style sheets to control layout and presentation.
  11. ↑ Daniel M. Frommelt (2003). "Retooling Slashdot with Web Standards". A List Apart Magazine. Retrieved 2009-09-20.
  12. ↑ 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.


बाहरी संबंध

Retrieved from ‘https://www.vigyanwiki.in/index.php?title=टेबललेस_वेब_डिज़ाइन&oldid=99424’