वेब डिजाइन: Difference between revisions

From Vigyanwiki
Line 26: Line 26:
   |page=[https://archive.org/details/buildinginternet00zwic/page/804 804]
   |page=[https://archive.org/details/buildinginternet00zwic/page/804 804]
   |url=https://archive.org/details/buildinginternet00zwic/page/804
   |url=https://archive.org/details/buildinginternet00zwic/page/804
   }}</ref> इसने किसी एक कंपनी को एक स्वामित्व वाले ब्राउज़र और [[ प्रोग्रामिंग भाषा ]] पर एकाधिकार करने से हतोत्साहित किया, जो पूरी तरह से वर्ल्ड वाइड वेब के प्रभाव को बदल सकता था। W3C मानक निर्धारित करना जारी रखता है, जिसे आज [[ जावास्क्रिप्ट ]] और अन्य भाषाओं के साथ देखा जा सकता है। 1994 में आंद्रेसेन ने मोज़ेक कम्युनिकेशंस कॉर्प का गठन किया जो बाद में [[ [[ नेटस्केप ]] संचार ]], नेटस्केप (वेब ​​​​ब्राउज़र) | नेटस्केप 0.9 ब्राउज़र के रूप में जाना जाने लगा। नेटस्केप ने पारंपरिक मानकों की प्रक्रिया पर ध्यान दिए बिना अपने स्वयं के एचटीएमएल टैग बनाए। उदाहरण के लिए, नेटस्केप 1.1 में पृष्ठभूमि के रंग बदलने और वेब पेजों पर एचटीएमएल तत्व#तालिकाओं के साथ पाठ को स्वरूपित करने के लिए टैग सम्मिलित  थे। 1996 से 1999 तक [[ ब्राउज़र युद्ध ]] शुरू हुआ, क्योंकि [[ Microsoft |माइक्रोसॉफ्ट]] और नेटस्केप ने अंतिम ब्राउज़र प्रभुत्व के लिए संघर्ष किया। इस समय के दौरान क्षेत्र में कई नई प्रौद्योगिकियां थीं, विशेष रूप से[[ व्यापक शैली पत्रक | व्यापक शैली पत्रक,]] जावास्क्रिप्ट और[[ गतिशील एचटीएमएल ]]कुल मिलाकर, ब्राउज़र प्रतियोगिता ने कई सकारात्मक कृतियों को जन्म दिया और वेब डिज़ाइन को तीव्र गति से विकसित करने में मदद की।<ref name=Browsers >{{cite book
   }}</ref> इसने किसी एक कंपनी को एक स्वामित्व वाले ब्राउज़र और [[ प्रोग्रामिंग भाषा ]] पर एकाधिकार करने से हतोत्साहित किया, जो पूरी तरह से वर्ल्ड वाइड वेब के प्रभाव को बदल सकता था। डब्ल्यू 3 सी मानक निर्धारित करना जारी रखता है, जिसे आज [[ जावास्क्रिप्ट ]] और अन्य भाषाओं के साथ देखा जा सकता है। 1994 में आंद्रेसेन ने मोज़ेक कम्युनिकेशंस कॉर्प का गठन किया जो बाद में [[ [[ नेटस्केप ]] संचार ]], नेटस्केप (वेब ​​​​ब्राउज़र) | नेटस्केप 0.9 ब्राउज़र के रूप में जाना जाने लगा। नेटस्केप ने पारंपरिक मानकों की प्रक्रिया पर ध्यान दिए बिना अपने स्वयं के एचटीएमएल टैग बनाए। उदाहरण के लिए, नेटस्केप 1.1 में पृष्ठभूमि के रंग बदलने और वेब पेजों पर एचटीएमएल तत्व#तालिकाओं के साथ पाठ को स्वरूपित करने के लिए टैग सम्मिलित  थे। 1996 से 1999 तक [[ ब्राउज़र युद्ध ]] शुरू हुआ, क्योंकि [[ Microsoft |माइक्रोसॉफ्ट]] और नेटस्केप ने अंतिम ब्राउज़र प्रभुत्व के लिए संघर्ष किया। इस समय के दौरान क्षेत्र में कई नई प्रौद्योगिकियां थीं, विशेष रूप से[[ व्यापक शैली पत्रक | व्यापक शैली पत्रक,]] जावास्क्रिप्ट और[[ गतिशील एचटीएमएल ]]कुल मिलाकर, ब्राउज़र प्रतियोगिता ने कई सकारात्मक कृतियों को जन्म दिया और वेब डिज़ाइन को तीव्र गति से विकसित करने में मदद की।<ref name=Browsers >{{cite book
   |last=Niederst  |first=Jennifer
   |last=Niederst  |first=Jennifer
   |title=वेब डिजाइन संक्षेप में|year=2006|publisher=O'Reilly Media
   |title=वेब डिजाइन संक्षेप में|year=2006|publisher=O'Reilly Media
Line 42: Line 42:


==== पहले ब्राउज़र युद्धों का अंत ====
==== पहले ब्राउज़र युद्धों का अंत ====
{{Further|Browser wars#First Browser War (1995–2001)}}
{{Further|ब्राउज़र युद्ध,पहला ब्राउज़र युद्ध (1995–2001)}}
1998 में, नेटस्केप ने [[ ओपन-सोर्स लाइसेंस ]] के तहत नेटस्केप कम्युनिकेटर कोड जारी किया ओपन-सोर्स लाइसेंस, हजारों डेवलपर्स को सॉफ्टवेयर में सुधार करने में भाग लेने में सक्षम बनाता है। यदपि , इन डेवलपर्स ने वेब के लिए स्क्रैच से एक मानक शुरू करने का फैसला किया, जिसने ओपन-सोर्स ब्राउज़र के विकास को निर्देशित किया और जल्द ही एक पूर्ण एप्लिकेशन प्लेटफॉर्म तक विस्तारित हो गया।<ref name="Browsers" />  [[ वेब मानक परियोजना ]] बनाई गई थी और लेआउट इंजनों की तुलना (एचटीएमएल) और लेआउट इंजनों की तुलना (कैस्केडिंग स्टाइल शीट्स) मानकों के साथ ब्राउज़र अनुपालन को बढ़ावा दिया गया था। वेब मानकों के अनुपालन के लिए ब्राउज़रों का परीक्षण करने के लिए [[ अम्ल1 ]], [[ निश्चित ]] और [[ रखूंगा ]] जैसे प्रोग्राम बनाए गए थे। 2000 में, मैक के लिए इंटरनेट एक्सप्लोरर जारी किया गया था, जो पहला ब्राउज़र था जो एचटीएमएल 4.01 और सीएसएस 1 का पूरी तरह से समर्थन करता था। यह [[ पोर्टेबल नेटवर्क ग्राफ़िक्स ]] छवि प्रारूप का पूरी तरह से समर्थन करने वाला पहला ब्राउज़र भी था।<ref name="Browsers" />2001 तक, माइक्रोसॉफ्ट द्वारा इंटरनेट एक्सप्लोरर को लोकप्रिय बनाने के एक अभियान के बाद, इंटरनेट एक्सप्लोरर वेब ब्राउज़रों के 96% उपयोग हिस्से तक पहुंच गया था, जिसने पहले ब्राउज़र युद्धों के अंत का संकेत दिया क्योंकि इंटरनेट एक्सप्लोरर में कोई वास्तविक प्रतिस्पर्धा नहीं थी।<ref>{{Cite web|title=AMO.NET अमेरिका का मल्टीमीडिया ऑनलाइन (इंटरनेट एक्सप्लोरर 6 पूर्वावलोकन)|url=http://amo.net/NT/01-30-01MSFTIE6.html|website=amo.net|access-date=2020-05-27}}</ref>
1998 में, नेटस्केप ने [[ ओपन-सोर्स लाइसेंस ]] के तहत नेटस्केप कम्युनिकेटर कोड जारी किया ओपन-सोर्स लाइसेंस, हजारों डेवलपर्स को सॉफ्टवेयर में सुधार करने में भाग लेने में सक्षम बनाता है। यदपि , इन डेवलपर्स ने वेब के लिए स्क्रैच से एक मानक शुरू करने का फैसला किया, जिसने ओपन-सोर्स ब्राउज़र के विकास को निर्देशित किया और जल्द ही एक पूर्ण एप्लिकेशन प्लेटफॉर्म तक विस्तारित हो गया।<ref name="Browsers" />  [[ वेब मानक परियोजना ]] बनाई गई थी और लेआउट इंजनों की तुलना (एचटीएमएल) और लेआउट इंजनों की तुलना (कैस्केडिंग स्टाइल शीट्स) मानकों के साथ ब्राउज़र अनुपालन को बढ़ावा दिया गया था। वेब मानकों के अनुपालन के लिए ब्राउज़रों का परीक्षण करने के लिए[[ अम्ल1 | अम्ल1]],[[ निश्चित | निश्चित]] और [[ रखूंगा ]] जैसे प्रोग्राम बनाए गए थे। 2000 में, मैक के लिए इंटरनेट एक्सप्लोरर जारी किया गया था, जो पहला ब्राउज़र था जो एचटीएमएल 4.01 और सीएसएस 1 का पूरी तरह से समर्थन करता था। यह [[ पोर्टेबल नेटवर्क ग्राफ़िक्स ]] छवि प्रारूप का पूरी तरह से समर्थन करने वाला पहला ब्राउज़र भी था।<ref name="Browsers" />2001 तक, माइक्रोसॉफ्ट द्वारा इंटरनेट एक्सप्लोरर को लोकप्रिय बनाने के एक अभियान के बाद, इंटरनेट एक्सप्लोरर वेब ब्राउज़रों के 96% उपयोग हिस्से तक पहुंच गया था, जिसने पहले ब्राउज़र युद्धों के अंत का संकेत दिया क्योंकि इंटरनेट एक्सप्लोरर में कोई वास्तविक प्रतिस्पर्धा नहीं थी।<ref>{{Cite web|title=AMO.NET अमेरिका का मल्टीमीडिया ऑनलाइन (इंटरनेट एक्सप्लोरर 6 पूर्वावलोकन)|url=http://amo.net/NT/01-30-01MSFTIE6.html|website=amo.net|access-date=2020-05-27}}</ref>




Line 51: Line 51:
ब्राउज़र युद्धों के अंत के बाद से{{when|date=May 2016}} नए ब्राउज़र जारी किए गए हैं। इनमें से कई [[ खुला स्रोत सॉफ्टवेयर ]] हैं, जिसका अर्थ है कि वे तेजी से विकास करते हैं और नए मानकों के अधिक समर्थक हैं। नए विकल्पों पर कई लोगों ने विचार किया है{{Weasel inline|date=May 2016}} माइक्रोसॉफ्ट के [[ इंटरनेट एक्स्प्लोरर ]] से बेहतर होने के लिए।
ब्राउज़र युद्धों के अंत के बाद से{{when|date=May 2016}} नए ब्राउज़र जारी किए गए हैं। इनमें से कई [[ खुला स्रोत सॉफ्टवेयर ]] हैं, जिसका अर्थ है कि वे तेजी से विकास करते हैं और नए मानकों के अधिक समर्थक हैं। नए विकल्पों पर कई लोगों ने विचार किया है{{Weasel inline|date=May 2016}} माइक्रोसॉफ्ट के [[ इंटरनेट एक्स्प्लोरर ]] से बेहतर होने के लिए।


[[ विश्वव्यापी वेब संकाय ]] ने एचटीएमएल ([[ HTML5 | एचटीएमएल5]] ) और CSS ([[ CSS3 ]]) के लिए नए मानक जारी किए हैं, साथ ही नए जावास्क्रिप्ट एप्लिकेशन प्रोग्रामिंग इंटरफ़ेस | एपीआई, प्रत्येक एक नए लेकिन व्यक्तिगत मानक के रूप में।{{when|date=May 2016}} जबकि एचटीएमएल5 शब्द का उपयोग केवल एचटीएमएल के नए संस्करण और कुछ जावास्क्रिप्ट एपीआई को संदर्भित करने के लिए किया जाता है, नए मानकों (एचटीएमएल5, CSS3 और जावास्क्रिप्ट) के पूरे सूट को संदर्भित करने के लिए इसका उपयोग करना आम हो गया है।
[[ विश्वव्यापी वेब संकाय ]] ने एचटीएमएल ([[ HTML5 | एचटीएमएल5]] ) और सीएसएस ([[ CSS3 |सी एसएस3SS3]]) के लिए नए मानक जारी किए हैं, साथ ही नए जावास्क्रिप्ट एप्लिकेशन प्रोग्रामिंग इंटरफ़ेस | एपीआई, प्रत्येक एक नए लेकिन व्यक्तिगत मानक के रूप में।{{when|date=May 2016}} जबकि एचटीएमएल5 शब्द का उपयोग केवल एचटीएमएल के नए संस्करण और कुछ जावास्क्रिप्ट एपीआई को संदर्भित करने के लिए किया जाता है, नए मानकों (एचटीएमएल5, सी एसएस3 और जावास्क्रिप्ट) के पूरे सूट को संदर्भित करने के लिए इसका उपयोग करना आम हो गया है।


=== 2012 और बाद में ===
=== 2012 और बाद में ===
Line 76: Line 76:
=== प्रगतिशील वृद्धि ===
=== प्रगतिशील वृद्धि ===
[[File:Progressive enhancement web design pyramid (HTML, CSS, JS).svg|thumb|प्रगतिशील वृद्धि का क्रम]]
[[File:Progressive enhancement web design pyramid (HTML, CSS, JS).svg|thumb|प्रगतिशील वृद्धि का क्रम]]
{{main article|Progressive enhancement}}
{{main article|प्रगतिशील वृद्धि}}
प्रोग्रेसिव एन्हांसमेंट वेब डिज़ाइन में एक रणनीति है जो पहले [[ वेब सामग्री ]] पर जोर देती है, जिससे [[ यूनिवर्सल डिजाइन ]] को वेब पेज की मूल सामग्री और कार्यक्षमता की अनुमति मिलती है, जबकि [[ उपयोगकर्ता (कंप्यूटिंग) ]] अतिरिक्त ब्राउज़र सुविधाओं या तेज़ इंटरनेट एक्सेस के साथ उन्नत संस्करण प्राप्त करते हैं।
प्रोग्रेसिव एन्हांसमेंट वेब डिज़ाइन में एक रणनीति है जो पहले [[ वेब सामग्री ]] पर जोर देती है, जिससे [[ यूनिवर्सल डिजाइन ]] को वेब पेज की मूल सामग्री और कार्यक्षमता की अनुमति मिलती है, जबकि [[ उपयोगकर्ता (कंप्यूटिंग) ]] अतिरिक्त ब्राउज़र सुविधाओं या तेज़ इंटरनेट एक्सेस के साथ उन्नत संस्करण प्राप्त करते हैं।


व्यवहार में, इसका अर्थ है एचटीएमएल के माध्यम से सामग्री परोसना और CSS के माध्यम से स्टाइलिंग और एनीमेशन को तकनीकी रूप से संभव सीमा तक लागू करना, फिर जावास्क्रिप्ट के माध्यम से और संवर्द्धन लागू करना। पृष्ठों के पाठ को तुरंत एचटीएमएल स्रोत कोड के माध्यम से लोड किया जाता है, इसके बजाय सामग्री को आरंभ करने और सामग्री को लोड करने के लिए जावास्क्रिप्ट की प्रतीक्षा करने के बजाय, जो सामग्री को न्यूनतम लोडिंग समय और बैंडविड्थ के साथ और पाठ-आधारित ब्राउज़र के माध्यम से पढ़ने योग्य होने की अनुमति देता है, और पश्चगामी संगतता को अधिकतम करता है। .<ref>{{cite web |title=प्रगतिशील संवर्द्धन का उपयोग करके एक लचीला दृश्यपटल का निर्माण|url=https://www.gov.uk/service-manual/technology/using-progressive-enhancement |website=GOV.UK |access-date=27 October 2021 |language=en}}</ref> एक उदाहरण के रूप में, विकिपीडिया सहित [[ मीडियाविकि ]]-आधारित साइटें प्रगतिशील संवर्द्धन का उपयोग करती हैं, क्योंकि जावास्क्रिप्ट और यहां तक ​​कि सीएसएस के निष्क्रिय होने पर भी वे प्रयोग करने योग्य रहते हैं, क्योंकि पृष्ठों की सामग्री पृष्ठ के एचटीएमएल स्रोत कोड में सम्मिलित  होती है, जबकि प्रति-उदाहरण एवरपीडिया पृष्ठों को लोड करने के लिए जावास्क्रिप्ट पर निर्भर करता है। ' सामग्री बाद में; जावास्क्रिप्ट निष्क्रिय के साथ एक खाली पृष्ठ दिखाई देता है।
व्यवहार में, इसका अर्थ है एचटीएमएल के माध्यम से सामग्री परोसना और सीएसएस के माध्यम से स्टाइलिंग और एनीमेशन को तकनीकी रूप से संभव सीमा तक लागू करना, फिर जावास्क्रिप्ट के माध्यम से और संवर्द्धन लागू करना। पृष्ठों के पाठ को तुरंत एचटीएमएल स्रोत कोड के माध्यम से लोड किया जाता है, इसके बजाय सामग्री को आरंभ करने और सामग्री को लोड करने के लिए जावास्क्रिप्ट की प्रतीक्षा करने के बजाय, जो सामग्री को न्यूनतम लोडिंग समय और बैंडविड्थ के साथ और पाठ-आधारित ब्राउज़र के माध्यम से पढ़ने योग्य होने की अनुमति देता है, और पश्चगामी संगतता को अधिकतम करता है। .<ref>{{cite web |title=प्रगतिशील संवर्द्धन का उपयोग करके एक लचीला दृश्यपटल का निर्माण|url=https://www.gov.uk/service-manual/technology/using-progressive-enhancement |website=GOV.UK |access-date=27 October 2021 |language=en}}</ref> एक उदाहरण के रूप में, विकिपीडिया सहित [[ मीडियाविकि |मीडियाविकि]] आधारित साइटें प्रगतिशील संवर्द्धन का उपयोग करती हैं, क्योंकि जावास्क्रिप्ट और यहां तक ​​कि सीएसएस के निष्क्रिय होने पर भी वे प्रयोग करने योग्य रहते हैं, क्योंकि पृष्ठों की सामग्री पृष्ठ के एचटीएमएल स्रोत कोड में सम्मिलित  होती है, जबकि प्रति-उदाहरण एवरपीडिया पृष्ठों को लोड करने के लिए जावास्क्रिप्ट पर निर्भर करता है। ' सामग्री बाद में; जावास्क्रिप्ट निष्क्रिय के साथ एक खाली पृष्ठ दिखाई देता है।


=== [[ पेज लेआउट ]] ===
=== [[ पेज लेआउट ]] ===
Line 86: Line 86:
पाठक की स्क्रीन (खिड़की का आकार, खिड़की के सापेक्ष फ़ॉन्ट आकार, आदि) के विवरण के आधार पर द्रव लेआउट के लिए ब्राउज़र को उपयोगकर्ता-विशिष्ट लेआउट समायोजन करने की अनुमति देने के लिए 2000 के आसपास द्रव लेआउट की लोकप्रियता में वृद्धि हुई। वे एचटीएमएल-टेबल-आधारित लेआउट और [[ ग्रिड (पेज लेआउट) ]] के विकल्प के रूप में विकसित हुए। पेज लेआउट डिजाइन सिद्धांतों और कोडिंग तकनीक दोनों में ग्रिड-आधारित डिज़ाइन लेकिन अपनाने में बहुत धीमी थी।<ref group="note" ><code>&lt;table&gt;</code>-based markup and [[spacer .GIF]] images</ref> यह [[ स्क्रीन रीडर ]] और अलग-अलग खिड़कियों के आकार के कारण था, जिस पर डिजाइनरों का कोई नियंत्रण नहीं है। तदनुसार, एक डिज़ाइन को इकाइयों (साइडबार, सामग्री ब्लॉक, [[ वेब बैनर ]] क्षेत्र, नेविगेशन क्षेत्र) में विभाजित किया जा सकता है जो कि ब्राउज़र को भेजे जाते हैं और जो ब्राउज़र द्वारा डिस्प्ले विंडो में फिट किया जाएगा, जितना अच्छा हो सकता है। यदपि  इस तरह का प्रदर्शन अक्सर प्रमुख सामग्री इकाइयों की सापेक्ष स्थिति को बदल सकता है, साइडबार इसके किनारे की बजाय [[ मुख्य भाग ]] के नीचे विस्थापित हो सकते हैं। यह हार्ड-कोडेड ग्रिड-आधारित लेआउट की तुलना में अधिक लचीला प्रदर्शन है जो डिवाइस विंडो में फिट नहीं होता है। विशेष रूप से, ब्लॉक के भीतर सामग्री को अप्रभावित रखते हुए सामग्री ब्लॉक की सापेक्ष स्थिति बदल सकती है। यह पृष्ठ को क्षैतिज रूप से स्क्रॉल करने के लिए उपयोगकर्ता की आवश्यकता को भी कम करता है।
पाठक की स्क्रीन (खिड़की का आकार, खिड़की के सापेक्ष फ़ॉन्ट आकार, आदि) के विवरण के आधार पर द्रव लेआउट के लिए ब्राउज़र को उपयोगकर्ता-विशिष्ट लेआउट समायोजन करने की अनुमति देने के लिए 2000 के आसपास द्रव लेआउट की लोकप्रियता में वृद्धि हुई। वे एचटीएमएल-टेबल-आधारित लेआउट और [[ ग्रिड (पेज लेआउट) ]] के विकल्प के रूप में विकसित हुए। पेज लेआउट डिजाइन सिद्धांतों और कोडिंग तकनीक दोनों में ग्रिड-आधारित डिज़ाइन लेकिन अपनाने में बहुत धीमी थी।<ref group="note" ><code>&lt;table&gt;</code>-based markup and [[spacer .GIF]] images</ref> यह [[ स्क्रीन रीडर ]] और अलग-अलग खिड़कियों के आकार के कारण था, जिस पर डिजाइनरों का कोई नियंत्रण नहीं है। तदनुसार, एक डिज़ाइन को इकाइयों (साइडबार, सामग्री ब्लॉक, [[ वेब बैनर ]] क्षेत्र, नेविगेशन क्षेत्र) में विभाजित किया जा सकता है जो कि ब्राउज़र को भेजे जाते हैं और जो ब्राउज़र द्वारा डिस्प्ले विंडो में फिट किया जाएगा, जितना अच्छा हो सकता है। यदपि  इस तरह का प्रदर्शन अक्सर प्रमुख सामग्री इकाइयों की सापेक्ष स्थिति को बदल सकता है, साइडबार इसके किनारे की बजाय [[ मुख्य भाग ]] के नीचे विस्थापित हो सकते हैं। यह हार्ड-कोडेड ग्रिड-आधारित लेआउट की तुलना में अधिक लचीला प्रदर्शन है जो डिवाइस विंडो में फिट नहीं होता है। विशेष रूप से, ब्लॉक के भीतर सामग्री को अप्रभावित रखते हुए सामग्री ब्लॉक की सापेक्ष स्थिति बदल सकती है। यह पृष्ठ को क्षैतिज रूप से स्क्रॉल करने के लिए उपयोगकर्ता की आवश्यकता को भी कम करता है।


उत्तरदायी वेब डिज़ाइन CSS3 पर आधारित एक नया दृष्टिकोण है, और CSS के उन्नत उपयोग के माध्यम से पृष्ठ की स्टाइल शीट के भीतर प्रति-उपकरण विनिर्देश का एक गहरा स्तर है। <code>@media</code> नियम। मार्च 2018 में Google ने घोषणा की कि वे मोबाइल-फर्स्ट इंडेक्सिंग शुरू करेंगे।<ref>{{Cite news|url=https://webmasters.googleblog.com/2018/03/rolling-out-mobile-first-indexing.html|title=मोबाइल-फर्स्ट इंडेक्सिंग को रोल आउट किया जा रहा है|work=Official Google Webmaster Central Blog|access-date=2018-06-09|language=en-US}}</ref> उत्तरदायी डिज़ाइन का उपयोग करने वाली साइटें यह सुनिश्चित करने के लिए अच्छी स्थिति में हैं कि वे इस नए दृष्टिकोण को पूरा करती हैं।
उत्तरदायी वेब डिज़ाइन सी एसएस3 पर आधारित एक नया दृष्टिकोण है, और सीएसएस के उन्नत उपयोग के माध्यम से पृष्ठ की स्टाइल शीट के भीतर प्रति-उपकरण विनिर्देश का एक गहरा स्तर है। <code>@media</code> नियम। मार्च 2018 में Google ने घोषणा की कि वे मोबाइल-फर्स्ट इंडेक्सिंग शुरू करेंगे।<ref>{{Cite news|url=https://webmasters.googleblog.com/2018/03/rolling-out-mobile-first-indexing.html|title=मोबाइल-फर्स्ट इंडेक्सिंग को रोल आउट किया जा रहा है|work=Official Google Webmaster Central Blog|access-date=2018-06-09|language=en-US}}</ref> उत्तरदायी डिज़ाइन का उपयोग करने वाली साइटें यह सुनिश्चित करने के लिए अच्छी स्थिति में हैं कि वे इस नए दृष्टिकोण को पूरा करती हैं।


=== टाइपोग्राफी ===
=== टाइपोग्राफी ===
Line 92: Line 92:
वेब डिज़ाइनर [[ टाइपफ़ेस ]] की एक विस्तृत श्रृंखला या टाइपफेस # टाइपफेस की शैली का उपयोग करने के बजाय वेबसाइट टाइपफेस की विविधता को केवल कुछ समान शैली तक सीमित करना चुन सकते हैं। अधिकांश ब्राउज़र एक विशिष्ट संख्या में सुरक्षित फोंट को पहचानते हैं, जो डिजाइनर मुख्य रूप से जटिलताओं से बचने के लिए उपयोग करते हैं।
वेब डिज़ाइनर [[ टाइपफ़ेस ]] की एक विस्तृत श्रृंखला या टाइपफेस # टाइपफेस की शैली का उपयोग करने के बजाय वेबसाइट टाइपफेस की विविधता को केवल कुछ समान शैली तक सीमित करना चुन सकते हैं। अधिकांश ब्राउज़र एक विशिष्ट संख्या में सुरक्षित फोंट को पहचानते हैं, जो डिजाइनर मुख्य रूप से जटिलताओं से बचने के लिए उपयोग करते हैं।


फ़ॉन्ट डाउनलोडिंग को बाद में CSS3 के फोंट मॉड्यूल में सम्मिलित  किया गया था और तब से इसे सफारी 3.1, ओपेरा 10 और मोज़िला फ़ायरफ़ॉक्स 3.5 में लागू किया गया है। इसने बाद में [[ वेब टाइपोग्राफी ]] के साथ-साथ फ़ॉन्ट डाउनलोडिंग के उपयोग में रुचि बढ़ाई है।
फ़ॉन्ट डाउनलोडिंग को बाद में सी एसएस3 के फोंट मॉड्यूल में सम्मिलित  किया गया था और तब से इसे सफारी 3.1, ओपेरा 10 और मोज़िला फ़ायरफ़ॉक्स 3.5 में लागू किया गया है। इसने बाद में [[ वेब टाइपोग्राफी ]] के साथ-साथ फ़ॉन्ट डाउनलोडिंग के उपयोग में रुचि बढ़ाई है।


अधिकांश साइट लेआउट पाठ को पैराग्राफ में विभाजित करने के लिए नकारात्मक स्थान सम्मिलित  करते हैं और केंद्र-संरेखित पाठ से भी बचते हैं।<ref>{{cite web|last=Stone|first=John|title=प्रभावी वेब टाइपोग्राफी के 20 क्या करें और क्या न करें| url=http://webdesignledger.com/tips/20-dos-and-donts-of-effective-web-typography|access-date=2012-03-19|date=2009-11-16}}</ref>
अधिकांश साइट लेआउट पाठ को पैराग्राफ में विभाजित करने के लिए नकारात्मक स्थान सम्मिलित  करते हैं और केंद्र-संरेखित पाठ से भी बचते हैं।<ref>{{cite web|last=Stone|first=John|title=प्रभावी वेब टाइपोग्राफी के 20 क्या करें और क्या न करें| url=http://webdesignledger.com/tips/20-dos-and-donts-of-effective-web-typography|access-date=2012-03-19|date=2009-11-16}}</ref>
Line 104: Line 104:


=== कोड की गुणवत्ता ===
=== कोड की गुणवत्ता ===
वेबसाइट डिजाइनर इसे मानकों के अनुरूप होना अच्छा अभ्यास मान सकते हैं। यह आमतौर पर विवरण के माध्यम से किया जाता है जो निर्दिष्ट करता है कि तत्व क्या कर रहा है। मानकों के अनुरूप होने में विफलता एक वेबसाइट को अनुपयोगी या त्रुटि-प्रवण नहीं बना सकती है, लेकिन मानक पठनीयता के लिए पृष्ठों के सही लेआउट से संबंधित हो सकते हैं और साथ ही यह सुनिश्चित कर सकते हैं कि कोडित तत्व उचित रूप से बंद हैं। इसमें कोड में त्रुटियां, कोड के लिए एक अधिक संगठित लेआउट, और यह सुनिश्चित करना सम्मिलित  है कि आईडी और कक्षाएं ठीक से पहचानी गई हैं। खराब कोडित पृष्ठों को कभी-कभी बोलचाल की भाषा में [[ टैग सूप ]] कहा जाता है। [[ W3C मार्कअप सत्यापन सेवा ]]<ref name="W3C_validator" />केवल तभी किया जा सकता है जब एक सही DOCTYPE घोषणा की जाती है, जिसका उपयोग कोड में त्रुटियों को उजागर करने के लिए किया जाता है। सिस्टम उन त्रुटियों और क्षेत्रों की पहचान करता है जो वेब डिज़ाइन मानकों के अनुरूप नहीं हैं। इस जानकारी को तब उपयोगकर्ता द्वारा ठीक किया जा सकता है।<ref>{{cite web|last=W3C QA|title=मेरी वेब साइट मानक है! और तुम्हारा?| url=http://www.w3.org/QA/2002/04/Web-Quality|access-date=2012-03-21}}</ref>
वेबसाइट डिजाइनर इसे मानकों के अनुरूप होना अच्छा अभ्यास मान सकते हैं। यह आमतौर पर विवरण के माध्यम से किया जाता है जो निर्दिष्ट करता है कि तत्व क्या कर रहा है। मानकों के अनुरूप होने में विफलता एक वेबसाइट को अनुपयोगी या त्रुटि-प्रवण नहीं बना सकती है, लेकिन मानक पठनीयता के लिए पृष्ठों के सही लेआउट से संबंधित हो सकते हैं और साथ ही यह सुनिश्चित कर सकते हैं कि कोडित तत्व उचित रूप से बंद हैं। इसमें कोड में त्रुटियां, कोड के लिए एक अधिक संगठित लेआउट, और यह सुनिश्चित करना सम्मिलित  है कि आईडी और कक्षाएं ठीक से पहचानी गई हैं। खराब कोडित पृष्ठों को कभी-कभी बोलचाल की भाषा में [[ टैग सूप ]] कहा जाता है। [[ W3C मार्कअप सत्यापन सेवा | डब्ल्यू 3 सी मार्कअप सत्यापन सेवा]] <ref name="W3C_validator" />केवल तभी किया जा सकता है जब एक सही डॉक्टयपे घोषणा की जाती है, जिसका उपयोग कोड में त्रुटियों को उजागर करने के लिए किया जाता है। सिस्टम उन त्रुटियों और क्षेत्रों की पहचान करता है जो वेब डिज़ाइन मानकों के अनुरूप नहीं हैं। इस जानकारी को तब उपयोगकर्ता द्वारा ठीक किया जा सकता है।<ref>{{cite web|last=W3C QA|title=मेरी वेब साइट मानक है! और तुम्हारा?| url=http://www.w3.org/QA/2002/04/Web-Quality|access-date=2012-03-21}}</ref>




Line 111: Line 111:


==== स्थिर वेबसाइटें ====
==== स्थिर वेबसाइटें ====
{{Main|Static web page}}
{{Main|स्टेटिक वेब पेज}}
एक स्थिर वेबसाइट एक स्थिर वेबसाइट के प्रत्येक पृष्ठ के लिए एक अद्वितीय फ़ाइल संग्रहीत करती है। हर बार जब उस पृष्ठ का अनुरोध किया जाता है, वही सामग्री लौटा दी जाती है। यह सामग्री वेबसाइट के डिजाइन के दौरान एक बार बनाई गई है। यह आमतौर पर मैन्युअल रूप से लिखा जाता है, यदपि  कुछ साइटें एक गतिशील वेबसाइट के समान एक स्वचालित निर्माण प्रक्रिया का उपयोग करती हैं, जिसके परिणाम लंबे समय तक पूर्ण पृष्ठों के रूप में संग्रहीत किए जाते हैं। ये स्वचालित रूप से बनाई गई स्थैतिक साइटें 2015 के आसपास [[ जेकिल (सॉफ्टवेयर) ]] और [[ एडोब सरस्वती ]] जैसे जनरेटर के साथ अधिक लोकप्रिय हो गईं।<ref>{{Cite web
एक स्थिर वेबसाइट एक स्थिर वेबसाइट के प्रत्येक पृष्ठ के लिए एक अद्वितीय फ़ाइल संग्रहीत करती है। हर बार जब उस पृष्ठ का अनुरोध किया जाता है, वही सामग्री लौटा दी जाती है। यह सामग्री वेबसाइट के डिजाइन के दौरान एक बार बनाई गई है। यह आमतौर पर मैन्युअल रूप से लिखा जाता है, यदपि  कुछ साइटें एक गतिशील वेबसाइट के समान एक स्वचालित निर्माण प्रक्रिया का उपयोग करती हैं, जिसके परिणाम लंबे समय तक पूर्ण पृष्ठों के रूप में संग्रहीत किए जाते हैं। ये स्वचालित रूप से बनाई गई स्थैतिक साइटें 2015 के आसपास [[ जेकिल (सॉफ्टवेयर) ]] और [[ एडोब सरस्वती ]] जैसे जनरेटर के साथ अधिक लोकप्रिय हो गईं।<ref>{{Cite web
   | last = Christensen| first = Mathias Biilmann
   | last = Christensen| first = Mathias Biilmann
Line 117: Line 117:
   | url = https://www.smashingmagazine.com/2015/11/static-website-generators-jekyll-middleman-roots-hugo-review/
   | url = https://www.smashingmagazine.com/2015/11/static-website-generators-jekyll-middleman-roots-hugo-review/
}}</ref>
}}</ref>
एक स्थिर वेबसाइट के लाभ यह हैं कि वे होस्ट करने के लिए सरल थे, क्योंकि उनके सर्वर को केवल स्थिर सामग्री परोसने की आवश्यकता थी, न कि सर्वर-साइड स्क्रिप्ट को निष्पादित करने की। इसके लिए कम सर्वर प्रशासन की आवश्यकता थी और सुरक्षा छेदों को उजागर करने की संभावना कम थी। वे कम लागत वाले सर्वर हार्डवेयर पर पेजों को अधिक तेजी से सर्व कर सकते हैं। यह लाभ कम महत्वपूर्ण हो गया क्योंकि सस्ती वेब होस्टिंग भी गतिशील सुविधाओं की पेशकश करने के लिए विस्तारित हुई, और [[ आभासी मशीन ]]ों ने कम लागत पर कम अंतराल के लिए उच्च प्रदर्शन की पेशकश की।
एक स्थिर वेबसाइट के लाभ यह हैं कि वे होस्ट करने के लिए सरल थे, क्योंकि उनके सर्वर को केवल स्थिर सामग्री परोसने की आवश्यकता थी, न कि सर्वर-साइड स्क्रिप्ट को निष्पादित करने की। इसके लिए कम सर्वर प्रशासन की आवश्यकता थी और सुरक्षा छेदों को उजागर करने की संभावना कम थी। वे कम लागत वाले सर्वर हार्डवेयर पर पेजों को अधिक तेजी से सर्व कर सकते हैं। यह लाभ कम महत्वपूर्ण हो गया क्योंकि सस्ती वेब होस्टिंग भी गतिशील सुविधाओं की पेशकश करने के लिए विस्तारित हुई, और [[ आभासी मशीन ]] ने कम लागत पर कम अंतराल के लिए उच्च प्रदर्शन की पेशकश की।


लगभग सभी वेबसाइटों में कुछ स्थिर सामग्री होती है, क्योंकि सहायक संपत्ति जैसे चित्र और स्टाइल शीट आमतौर पर स्थिर होती हैं, यहां तक ​​कि अत्यधिक गतिशील पृष्ठों वाली वेबसाइट पर भी।
लगभग सभी वेबसाइटों में कुछ स्थिर सामग्री होती है, क्योंकि सहायक संपत्ति जैसे चित्र और स्टाइल शीट आमतौर पर स्थिर होती हैं, यहां तक ​​कि अत्यधिक गतिशील पृष्ठों वाली वेबसाइट पर भी।
Line 139: Line 139:


== व्यवसाय ==
== व्यवसाय ==
वेबसाइट बनाने में दो प्राथमिक कार्य सम्मिलित  होते हैं: वेब डिज़ाइनर और [[ वेब डेवलपर ]], जो अक्सर एक वेबसाइट पर एक साथ मिलकर काम करते हैं।<ref name ="careersinwebdesign">{{cite book|last=Oleksy|first=Walter|title=वेब डिजाइन में करियर| year=2001|publisher=The Rosen Publishing Group, Inc.|location=New York|isbn=9780823931910 |pages=[https://archive.org/details/careersinwebdesi0000olek/page/9 9]–11|url=https://archive.org/details/careersinwebdesi0000olek|url-access=registration}}</ref> वेब डिज़ाइनर विज़ुअल पहलू के लिए ज़िम्मेदार होते हैं, जिसमें वेब पेज का लेआउट, रंग और टाइपोग्राफी सम्मिलित  है। वेब डिज़ाइनरों को एचटीएमएल और CSS जैसी मार्कअप भाषाओं का कार्यसाधक ज्ञान भी होगा, हालाँकि उनके ज्ञान की सीमा एक वेब डिज़ाइनर से दूसरे में भिन्न होगी। विशेष रूप से छोटे संगठनों में, एक व्यक्ति को पूरे वेब पेज को डिजाइन और प्रोग्रामिंग करने के लिए आवश्यक कौशल की आवश्यकता होगी, जबकि बड़े संगठनों के पास केवल दृश्य पहलू के लिए जिम्मेदार वेब डिजाइनर हो सकता है।
वेबसाइट बनाने में दो प्राथमिक कार्य सम्मिलित  होते हैं: वेब डिज़ाइनर और [[ वेब डेवलपर ]], जो अक्सर एक वेबसाइट पर एक साथ मिलकर काम करते हैं।<ref name ="careersinwebdesign">{{cite book|last=Oleksy|first=Walter|title=वेब डिजाइन में करियर| year=2001|publisher=The Rosen Publishing Group, Inc.|location=New York|isbn=9780823931910 |pages=[https://archive.org/details/careersinwebdesi0000olek/page/9 9]–11|url=https://archive.org/details/careersinwebdesi0000olek|url-access=registration}}</ref> वेब डिज़ाइनर विज़ुअल पहलू के लिए ज़िम्मेदार होते हैं, जिसमें वेब पेज का लेआउट, रंग और टाइपोग्राफी सम्मिलित  है। वेब डिज़ाइनरों को एचटीएमएल और सीएसएस जैसी मार्कअप भाषाओं का कार्यसाधक ज्ञान भी होगा, हालाँकि उनके ज्ञान की सीमा एक वेब डिज़ाइनर से दूसरे में भिन्न होगी। विशेष रूप से छोटे संगठनों में, एक व्यक्ति को पूरे वेब पेज को डिजाइन और प्रोग्रामिंग करने के लिए आवश्यक कौशल की आवश्यकता होगी, जबकि बड़े संगठनों के पास केवल दृश्य पहलू के लिए जिम्मेदार वेब डिजाइनर हो सकता है।


आगे की नौकरियां जो एक वेबसाइट के निर्माण में सम्मिलित  हो सकती हैं उनमें सम्मिलित  हैं:
आगे की नौकरियां जो एक वेबसाइट के निर्माण में सम्मिलित  हो सकती हैं उनमें सम्मिलित  हैं:
Line 219: Line 219:


== बाहरी कड़ियाँ ==
== बाहरी कड़ियाँ ==
* [http://www.w3.org/standards/webdesign/ W3C consortium for वेब standards]
* [http://www.w3.org/standards/webdesign/ डब्ल्यू 3 सी consortium for वेब standards]
* {{curlie|Computers/Internet/Web_Design_and_Development|Web design and development}}
* {{curlie|Computers/Internet/Web_Design_and_Development|Web design and development}}
<!--
<!--

Revision as of 15:09, 4 March 2023

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

इतिहास

एक स्टोर में वेब डिज़ाइन पुस्तकें

1988–2001

यदपि वेब डिज़ाइन का हाल ही का इतिहास है, इसे ग्राफिक डिज़ाइन, उपयोगकर्ता अनुभव और मल्टीमीडिया कला जैसे अन्य क्षेत्रों से जोड़ा जा सकता है, लेकिन इसे तकनीकी दृष्टिकोण से अधिक उपयुक्त रूप से देखा जाता है। यह लोगों के रोजमर्रा के जीवन का एक बड़ा हिस्सा बन गया है। एनिमेटेड ग्राफिक्स, टाइपोग्राफी की विभिन्न शैलियों, पृष्ठभूमि, वीडियो और संगीत के बिना इंटरनेट की कल्पना करना कठिन है। नवंबर 1992 में सर्न लाइव होने वाली पहली वेबसाइट थी। वेब की घोषणा 6 अगस्त, 1991 को की गई थी और सी ईआरएन वर्ल्ड वाइड वेब पर लाइव होने वाली पहली वेबसाइट थी। इस अवधि के दौरान, वेबसाइटों को <टेबल> टैग का उपयोग करके संरचित किया गया था, जिसने वेबसाइट पर नंबर बनाए। आखिरकार, वेब डिज़ाइनर अधिक संरचनाएँ और प्रारूप बनाने के लिए इसके चारों ओर अपना रास्ता खोजने में सक्षम थे। प्रारंभिक इतिहास में, वेबसाइटों की संरचना नाजुक और कठिन थी, इसलिए उनका उपयोग करना बहुत कठिन हो गया। नवंबर 1993 में अलीवेब बनाया जाने वाला पहला सर्च इंजन था (वेब के लिए आर्ची लाइक इंडेक्सिंग)।[2]

वेब और वेब डिजाइन की शुरुआत

1989 में, सी ईआरएन में काम करते हुए,टिक बैरनर्स - ली ने एक वैश्विक हाइपरटेक्स्ट प्रोजेक्ट बनाने का प्रस्ताव रखा, जिसे बाद में वर्ल्ड वाइड वेब के रूप में जाना जाने लगा। 1991 से 1993 तक वर्ल्ड वाइड वेब का जन्म हुआ। [[ टेक्स्ट-आधारितवेब ब्राउज़र ]] | टेक्स्ट-ओनली एचटीएमएल पेजों को एक साधारण लाइन-मोड वेब ब्राउज़र का उपयोग करके देखा जा सकता है।[3] 1993 में मार्क आंद्रेसेन और एरिक बीना ने मोज़ेक ब्राउज़र बनाया। उस समय कई ब्राउज़र थे, हालाँकि उनमें से अधिकांश यूनिक्स-आधारित और स्वाभाविक रूप से पाठ-भारी थे। ग्राफ़िक डिज़ाइन तत्वों जैसे डिजिटल चित्र या डिजिटल ऑडियो के लिए कोई एकीकृत दृष्टिकोण नहीं था। मोज़ेक (वेब ​​ब्राउज़र) ने इस साँचे को तोड़ दिया।[4] डब्ल्यू 3 सी को अक्टूबर 1994 में बनाया गया था ताकि वर्ल्ड वाइड वेब को सामान्य HTTP विकसित करके इसकी पूरी क्षमता का नेतृत्व किया जा सके जो इसके विकास को बढ़ावा देता है और इसकी इंटरऑपरेबिलिटी # सॉफ्टवेयर सुनिश्चित करता है।[5] इसने किसी एक कंपनी को एक स्वामित्व वाले ब्राउज़र और प्रोग्रामिंग भाषा पर एकाधिकार करने से हतोत्साहित किया, जो पूरी तरह से वर्ल्ड वाइड वेब के प्रभाव को बदल सकता था। डब्ल्यू 3 सी मानक निर्धारित करना जारी रखता है, जिसे आज जावास्क्रिप्ट और अन्य भाषाओं के साथ देखा जा सकता है। 1994 में आंद्रेसेन ने मोज़ेक कम्युनिकेशंस कॉर्प का गठन किया जो बाद में [[ नेटस्केप संचार ]], नेटस्केप (वेब ​​​​ब्राउज़र) | नेटस्केप 0.9 ब्राउज़र के रूप में जाना जाने लगा। नेटस्केप ने पारंपरिक मानकों की प्रक्रिया पर ध्यान दिए बिना अपने स्वयं के एचटीएमएल टैग बनाए। उदाहरण के लिए, नेटस्केप 1.1 में पृष्ठभूमि के रंग बदलने और वेब पेजों पर एचटीएमएल तत्व#तालिकाओं के साथ पाठ को स्वरूपित करने के लिए टैग सम्मिलित थे। 1996 से 1999 तक ब्राउज़र युद्ध शुरू हुआ, क्योंकि माइक्रोसॉफ्ट और नेटस्केप ने अंतिम ब्राउज़र प्रभुत्व के लिए संघर्ष किया। इस समय के दौरान क्षेत्र में कई नई प्रौद्योगिकियां थीं, विशेष रूप से व्यापक शैली पत्रक, जावास्क्रिप्ट औरगतिशील एचटीएमएल कुल मिलाकर, ब्राउज़र प्रतियोगिता ने कई सकारात्मक कृतियों को जन्म दिया और वेब डिज़ाइन को तीव्र गति से विकसित करने में मदद की।[6]

वेब डिजाइन का विकास

1996 में, Microsoft ने अपना पहला प्रतिस्पर्धी ब्राउज़र जारी किया, जो अपनी विशेषताओं और एचटीएमएल टैग्स के साथ पूर्ण था। यह स्टाइल शीट का समर्थन करने वाला पहला ब्राउज़र भी था, जिसे उस समय एक अस्पष्ट संलेखन तकनीक के रूप में देखा गया था और आज यह वेब डिज़ाइन का एक महत्वपूर्ण पहलू है।[6] एचटीएमएल एलिमेंट # टेबल्स के लिए एचटीएमएल मार्कअप मूल रूप से सारणीबद्ध डेटा प्रदर्शित करने के लिए था। यदपि , डिजाइनरों ने जटिल, बहु-स्तंभ लेआउट बनाने के लिए एचटीएमएल तालिकाओं का उपयोग करने की क्षमता को जल्दी से महसूस किया जो अन्यथा संभव नहीं था। इस समय, जैसा कि डिजाइन और अच्छे सौंदर्यशास्त्र को अच्छी मार्कअप संरचना पर प्राथमिकता दी गई थी, सिमेंटिक्स और वेब एक्सेसिबिलिटी पर थोड़ा ध्यान दिया गया था. एचटीएमएल साइटें अपने डिज़ाइन विकल्पों में सीमित थीं, एचटीएमएल. जटिल डिज़ाइन बनाने के लिए, कई वेब डिज़ाइनरों को जटिल टेबल संरचनाओं का उपयोग करना पड़ा या यहाँ तक कि रिक्त [[स्पेसर .GIF] का भी उपयोग करना पड़ा रिक्त तालिका कक्षों को ढहने से रोकने के लिए चित्र।[7] सीएसएस को दिसंबर 1996 में डब्ल्यू 3 सी द्वारा प्रस्तुति और लेआउट का समर्थन करने के लिए पेश किया गया था। इसने एचटीएमएल कोड को सिमेंटिक और प्रेजेंटेशनल और बेहतर वेब एक्सेसिबिलिटी दोनों के बजाय सिमेंटिक होने की अनुमति दी, टेबललेस वेब डिज़ाइन देखें।

1996 में, एडोब फ्लैश (मूल रूप से फ्यूचरस्प्लैश के रूप में जाना जाता था) विकसित किया गया था। उस समय, फ्लैश कंटेंट डेवलपमेंट टूल अब की तुलना में अपेक्षाकृत सरल था, जिसमें बेसिक लेआउट और ड्राइंग टूल्स, एक्शन स्क्रिप्ट के लिए एक सीमित अग्रदूत और एक टाइमलाइन का उपयोग किया गया था, लेकिन इसने वेब डिजाइनरों को एचटीएमएल, ग्राफिक्स इंटरचेंज फॉर्मेट के बिंदु से आगे जाने में सक्षम बनाया। एनिमेटेड जीआईएफ और जावास्क्रिप्ट। यदपि , क्योंकि फ्लैश को एक प्लग-इन (कंप्यूटिंग) |प्लग-इन की आवश्यकता थी, इसलिए कई वेब डेवलपर्स अनुकूलता की कमी के कारण अपनी बाजार हिस्सेदारी को सीमित करने के डर से इसका उपयोग करने से बचते रहे। इसके बजाय, डिजाइनरों ने जीआईएफ एनिमेशन (यदि वे गति ग्राफिक्स का पूरी तरह से उपयोग नहीं करते हैं) और सॉफ्टवेयर विजेट के लिए जावास्क्रिप्ट पर वापस लौट आए। लेकिन फ्लैश के लाभों ने इसे विशिष्ट लक्षित बाजारों के बीच काफी लोकप्रिय बना दिया, जो अंततः ब्राउज़रों के विशाल बहुमत के लिए अपना काम करता है, और पूरी साइटों को विकसित करने के लिए पर्याप्त शक्तिशाली है।[7]


पहले ब्राउज़र युद्धों का अंत

1998 में, नेटस्केप ने ओपन-सोर्स लाइसेंस के तहत नेटस्केप कम्युनिकेटर कोड जारी किया ओपन-सोर्स लाइसेंस, हजारों डेवलपर्स को सॉफ्टवेयर में सुधार करने में भाग लेने में सक्षम बनाता है। यदपि , इन डेवलपर्स ने वेब के लिए स्क्रैच से एक मानक शुरू करने का फैसला किया, जिसने ओपन-सोर्स ब्राउज़र के विकास को निर्देशित किया और जल्द ही एक पूर्ण एप्लिकेशन प्लेटफॉर्म तक विस्तारित हो गया।[6] वेब मानक परियोजना बनाई गई थी और लेआउट इंजनों की तुलना (एचटीएमएल) और लेआउट इंजनों की तुलना (कैस्केडिंग स्टाइल शीट्स) मानकों के साथ ब्राउज़र अनुपालन को बढ़ावा दिया गया था। वेब मानकों के अनुपालन के लिए ब्राउज़रों का परीक्षण करने के लिए अम्ल1, निश्चित और रखूंगा जैसे प्रोग्राम बनाए गए थे। 2000 में, मैक के लिए इंटरनेट एक्सप्लोरर जारी किया गया था, जो पहला ब्राउज़र था जो एचटीएमएल 4.01 और सीएसएस 1 का पूरी तरह से समर्थन करता था। यह पोर्टेबल नेटवर्क ग्राफ़िक्स छवि प्रारूप का पूरी तरह से समर्थन करने वाला पहला ब्राउज़र भी था।[6]2001 तक, माइक्रोसॉफ्ट द्वारा इंटरनेट एक्सप्लोरर को लोकप्रिय बनाने के एक अभियान के बाद, इंटरनेट एक्सप्लोरर वेब ब्राउज़रों के 96% उपयोग हिस्से तक पहुंच गया था, जिसने पहले ब्राउज़र युद्धों के अंत का संकेत दिया क्योंकि इंटरनेट एक्सप्लोरर में कोई वास्तविक प्रतिस्पर्धा नहीं थी।[8]


2001–2012

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

ब्राउज़र युद्धों के अंत के बाद से[when?] नए ब्राउज़र जारी किए गए हैं। इनमें से कई खुला स्रोत सॉफ्टवेयर हैं, जिसका अर्थ है कि वे तेजी से विकास करते हैं और नए मानकों के अधिक समर्थक हैं। नए विकल्पों पर कई लोगों ने विचार किया है[weasel words] माइक्रोसॉफ्ट के इंटरनेट एक्स्प्लोरर से बेहतर होने के लिए।

विश्वव्यापी वेब संकाय ने एचटीएमएल ( एचटीएमएल5 ) और सीएसएस (सी एसएस3SS3) के लिए नए मानक जारी किए हैं, साथ ही नए जावास्क्रिप्ट एप्लिकेशन प्रोग्रामिंग इंटरफ़ेस | एपीआई, प्रत्येक एक नए लेकिन व्यक्तिगत मानक के रूप में।[when?] जबकि एचटीएमएल5 शब्द का उपयोग केवल एचटीएमएल के नए संस्करण और कुछ जावास्क्रिप्ट एपीआई को संदर्भित करने के लिए किया जाता है, नए मानकों (एचटीएमएल5, सी एसएस3 और जावास्क्रिप्ट) के पूरे सूट को संदर्भित करने के लिए इसका उपयोग करना आम हो गया है।

2012 और बाद में

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

उपकरण और प्रौद्योगिकियां

वेब डिज़ाइनर उत्पादन प्रक्रिया के किस हिस्से में सम्मिलित हैं, इसके आधार पर विभिन्न प्रकार के विभिन्न उपकरणों का उपयोग करते हैं। ये उपकरण नए मानकों और सॉफ़्टवेयर द्वारा समय के साथ अद्यतन किए जाते हैं लेकिन उनके पीछे के सिद्धांत समान रहते हैं। वेब डिज़ाइनर वेब-स्वरूपित इमेजरी या डिज़ाइन प्रोटोटाइप बनाने के वेक्टर ग्राफिक्स संपादक संपादक और रेखापुंज ग्राफ़िक्स संपादक ग्राफ़िक्स संपादक दोनों का उपयोग करते हैं। WYSIWYG वेबसाइट निर्माता सॉफ़्टवेयर या सामग्री प्रबंधन प्रणाली का उपयोग करके एक वेबसाइट बनाई जा सकती है, या अलग-अलग वेब पेजों को मार्कअप भाषा | हाथ से कोडित किया जा सकता है, जैसे कि पहले वेब पेज बनाए गए थे। अन्य उपकरण जो वेब डिज़ाइनर उपयोग कर सकते हैं उनमें मार्कअप एचटीएमएल सत्यापनकर्ता सम्मिलित हैं[9] और उपयोगिता और पहुंच के लिए अन्य परीक्षण उपकरण यह सुनिश्चित करने के लिए कि उनकी वेबसाइटें वेब पहुंच-योग्यता दिशानिर्देशों को पूरा करती हैं। रेफरी>W3C. "वेब एक्सेसिबिलिटी इनिशिएटिव (WAI)".</रेफरी>

यूएक्स डिजाइन

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


कौशल और तकनीक

विपणन और संचार डिजाइन

किसी वेबसाइट पर मार्केटिंग और संचार डिज़ाइन यह पहचान सकता है कि उसके लक्षित बाज़ार के लिए क्या काम करता है। यह एक आयु वर्ग या संस्कृति की विशेष धारा हो सकती है; इस प्रकार डिजाइनर अपने दर्शकों के रुझान को समझ सकता है। डिज़ाइनर यह भी समझ सकते हैं कि वे किस प्रकार की वेबसाइट डिज़ाइन कर रहे हैं, उदाहरण के लिए, (बी2बी) व्यवसाय-से-व्यवसाय वेबसाइट डिज़ाइन विचार उपभोक्ता-लक्षित वेबसाइट जैसे खुदरा या मनोरंजन वेबसाइट से बहुत भिन्न हो सकते हैं। यह सुनिश्चित करने के लिए सावधानीपूर्वक विचार किया जा सकता है कि किसी साइट का सौंदर्यशास्त्र या समग्र डिजाइन सामग्री की स्पष्टता और सटीकता या वेब नेविगेशन की आसानी से टकराता नहीं है,[11] विशेष रूप से B2B वेबसाइट पर। डिजाइनर उस मालिक या व्यवसाय की प्रतिष्ठा पर भी विचार कर सकते हैं जो साइट यह सुनिश्चित करने के लिए प्रतिनिधित्व कर रही है कि उन्हें अनुकूल रूप से चित्रित किया गया है। वेब डिज़ाइनर आमतौर पर उन सभी वेबसाइटों की देखरेख करते हैं जो इस आधार पर बनाई जाती हैं कि वे कैसे काम करती हैं या चीजों पर काम करती हैं। वे पर्दे के पीछे से वेबसाइटों पर लगातार सब कुछ अपडेट और बदल रहे हैं। उनके द्वारा किए जाने वाले सभी तत्व टेक्स्ट, फोटो, ग्राफिक्स और वेब का लेआउट हैं। वेबसाइट पर काम शुरू करने से पहले, वेब डिज़ाइनर आमतौर पर लेआउट, रंग, ग्राफिक्स और डिज़ाइन पर चर्चा करने के लिए अपने क्लाइंट के साथ अपॉइंटमेंट सेट करते हैं। वेब डिज़ाइनर अपना अधिकांश समय वेबसाइटों को डिज़ाइन करने और यह सुनिश्चित करने में लगाते हैं कि गति सही है। वेब डिज़ाइनर आमतौर पर वेबसाइटों को बनाने और वेबसाइटों के लिए सही तत्वों को खोजने के बारे में अन्य डिजाइनरों के साथ परीक्षण और कार्य, विपणन और संचार में संलग्न होते हैं।[12]


उपयोगकर्ता अनुभव डिजाइन और इंटरैक्टिव डिजाइन

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

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

प्रगतिशील वृद्धि

प्रगतिशील वृद्धि का क्रम

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

व्यवहार में, इसका अर्थ है एचटीएमएल के माध्यम से सामग्री परोसना और सीएसएस के माध्यम से स्टाइलिंग और एनीमेशन को तकनीकी रूप से संभव सीमा तक लागू करना, फिर जावास्क्रिप्ट के माध्यम से और संवर्द्धन लागू करना। पृष्ठों के पाठ को तुरंत एचटीएमएल स्रोत कोड के माध्यम से लोड किया जाता है, इसके बजाय सामग्री को आरंभ करने और सामग्री को लोड करने के लिए जावास्क्रिप्ट की प्रतीक्षा करने के बजाय, जो सामग्री को न्यूनतम लोडिंग समय और बैंडविड्थ के साथ और पाठ-आधारित ब्राउज़र के माध्यम से पढ़ने योग्य होने की अनुमति देता है, और पश्चगामी संगतता को अधिकतम करता है। .[14] एक उदाहरण के रूप में, विकिपीडिया सहित मीडियाविकि आधारित साइटें प्रगतिशील संवर्द्धन का उपयोग करती हैं, क्योंकि जावास्क्रिप्ट और यहां तक ​​कि सीएसएस के निष्क्रिय होने पर भी वे प्रयोग करने योग्य रहते हैं, क्योंकि पृष्ठों की सामग्री पृष्ठ के एचटीएमएल स्रोत कोड में सम्मिलित होती है, जबकि प्रति-उदाहरण एवरपीडिया पृष्ठों को लोड करने के लिए जावास्क्रिप्ट पर निर्भर करता है। ' सामग्री बाद में; जावास्क्रिप्ट निष्क्रिय के साथ एक खाली पृष्ठ दिखाई देता है।

पेज लेआउट

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

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

उत्तरदायी वेब डिज़ाइन सी एसएस3 पर आधारित एक नया दृष्टिकोण है, और सीएसएस के उन्नत उपयोग के माध्यम से पृष्ठ की स्टाइल शीट के भीतर प्रति-उपकरण विनिर्देश का एक गहरा स्तर है। @media नियम। मार्च 2018 में Google ने घोषणा की कि वे मोबाइल-फर्स्ट इंडेक्सिंग शुरू करेंगे।[15] उत्तरदायी डिज़ाइन का उपयोग करने वाली साइटें यह सुनिश्चित करने के लिए अच्छी स्थिति में हैं कि वे इस नए दृष्टिकोण को पूरा करती हैं।

टाइपोग्राफी

वेब डिज़ाइनर टाइपफ़ेस की एक विस्तृत श्रृंखला या टाइपफेस # टाइपफेस की शैली का उपयोग करने के बजाय वेबसाइट टाइपफेस की विविधता को केवल कुछ समान शैली तक सीमित करना चुन सकते हैं। अधिकांश ब्राउज़र एक विशिष्ट संख्या में सुरक्षित फोंट को पहचानते हैं, जो डिजाइनर मुख्य रूप से जटिलताओं से बचने के लिए उपयोग करते हैं।

फ़ॉन्ट डाउनलोडिंग को बाद में सी एसएस3 के फोंट मॉड्यूल में सम्मिलित किया गया था और तब से इसे सफारी 3.1, ओपेरा 10 और मोज़िला फ़ायरफ़ॉक्स 3.5 में लागू किया गया है। इसने बाद में वेब टाइपोग्राफी के साथ-साथ फ़ॉन्ट डाउनलोडिंग के उपयोग में रुचि बढ़ाई है।

अधिकांश साइट लेआउट पाठ को पैराग्राफ में विभाजित करने के लिए नकारात्मक स्थान सम्मिलित करते हैं और केंद्र-संरेखित पाठ से भी बचते हैं।[16]


मोशन ग्राफिक्स

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

मोशन ग्राफिक्स जो साइट विज़िटर द्वारा शुरू नहीं किए गए हैं, वे एक्सेसिबिलिटी के मुद्दे पैदा कर सकते हैं। वर्ल्ड वाइड वेब कंसोर्टियम एक्सेसिबिलिटी मानकों के लिए आवश्यक है कि साइट विज़िटर एनिमेशन को अक्षम करने में सक्षम हों।[17]


कोड की गुणवत्ता

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


उत्पन्न सामग्री

वेबसाइटें दो तरह से उत्पन्न होती हैं: स्थिर या गतिशील।

स्थिर वेबसाइटें

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

लगभग सभी वेबसाइटों में कुछ स्थिर सामग्री होती है, क्योंकि सहायक संपत्ति जैसे चित्र और स्टाइल शीट आमतौर पर स्थिर होती हैं, यहां तक ​​कि अत्यधिक गतिशील पृष्ठों वाली वेबसाइट पर भी।

डायनेमिक वेबसाइट्स

डायनेमिक वेबसाइट्स फ्लाई पर उत्पन्न होती हैं और वेब पेज बनाने के लिए सर्वर-साइड तकनीक का उपयोग करती हैं। वे आम तौर पर एक या एक से अधिक बैक-एंड डेटाबेस से अपनी सामग्री निकालते हैं: कुछ एक कैटलॉग को क्वेरी करने या संख्यात्मक जानकारी को सारांशित करने के लिए रिलेशनल डेटाबेस में डेटाबेस क्वेरीज़ हैं, और अन्य सामग्री की बड़ी इकाइयों को स्टोर करने के लिए MongoDB या NoSQL जैसे दस्तावेज़ डेटाबेस का उपयोग कर सकते हैं। , जैसे ब्लॉग पोस्ट या विकी लेख।

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

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

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

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

होमपेज डिजाइन

जैकब नीलसन (उपयोगिता सलाहकार) और काइल सौसी सहित उपयोगिता विशेषज्ञों ने अक्सर वेबसाइट की सफलता के लिए होमपेज डिजाइन पर जोर दिया है और दावा किया है कि वेबसाइट पर होमपेज सबसे महत्वपूर्ण पेज है।[20]Nielsen, Jakob; Tahir, Marie (October 2001), Homepage Usability: 50 Websites Deconstructed, New Riders Publishing, ISBN 978-0735711020[21][22] हालाँकि, 2000 के दशक में चिकित्सकों ने यह देखना शुरू कर दिया था कि वेबसाइट ट्रैफ़िक की बढ़ती संख्या मुखपृष्ठ को बायपास कर रही थी, सीधे खोज इंजन, ई-न्यूज़लेटर्स और RSS फ़ीड्स के माध्यम से आंतरिक सामग्री पृष्ठों पर जा रही थी।[23] कई चिकित्सकों को यह तर्क देने के लिए प्रेरित करते हुए कि अधिकांश लोगों की सोच से होमपेज़ कम महत्वपूर्ण हैं।[24][25][26][27] जेरेड स्पूल ने 2007 में तर्क दिया कि किसी साइट का होमपेज वास्तव में किसी वेबसाइट का सबसे कम महत्वपूर्ण पेज होता है।[28] 2012 और 2013 में, हिंडोला (जिसे 'स्लाइडर्स' और 'रोटेटिंग बैनर' भी कहा जाता है) मुखपृष्ठों पर एक अत्यंत लोकप्रिय डिज़ाइन तत्व बन गया है, जिसका उपयोग अक्सर एक सीमित स्थान में विशेष रुप से प्रदर्शित या हाल की सामग्री को प्रदर्शित करने के लिए किया जाता है।[29][30] कई चिकित्सकों का तर्क है कि हिंडोला एक अप्रभावी डिजाइन तत्व है और एक वेबसाइट के खोज इंजन अनुकूलन और उपयोगिता को नुकसान पहुंचाता है।[30][31][32]


व्यवसाय

वेबसाइट बनाने में दो प्राथमिक कार्य सम्मिलित होते हैं: वेब डिज़ाइनर और वेब डेवलपर , जो अक्सर एक वेबसाइट पर एक साथ मिलकर काम करते हैं।[33] वेब डिज़ाइनर विज़ुअल पहलू के लिए ज़िम्मेदार होते हैं, जिसमें वेब पेज का लेआउट, रंग और टाइपोग्राफी सम्मिलित है। वेब डिज़ाइनरों को एचटीएमएल और सीएसएस जैसी मार्कअप भाषाओं का कार्यसाधक ज्ञान भी होगा, हालाँकि उनके ज्ञान की सीमा एक वेब डिज़ाइनर से दूसरे में भिन्न होगी। विशेष रूप से छोटे संगठनों में, एक व्यक्ति को पूरे वेब पेज को डिजाइन और प्रोग्रामिंग करने के लिए आवश्यक कौशल की आवश्यकता होगी, जबकि बड़े संगठनों के पास केवल दृश्य पहलू के लिए जिम्मेदार वेब डिजाइनर हो सकता है।

आगे की नौकरियां जो एक वेबसाइट के निर्माण में सम्मिलित हो सकती हैं उनमें सम्मिलित हैं:

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

यह भी देखें

यह भी देखें


संबंधित अनुशासन


टिप्पणियाँ

  1. <table>-based markup and spacer .GIF images
  1. 1.0 1.1 Lester, Georgina. "वेबसाइट बनाने में शामिल विभिन्न लोगों की विभिन्न नौकरियां और जिम्मेदारियां". Arts Wales UK. Retrieved 2012-03-17.
  2. CPBI, Ryan Shelley. "वेबसाइट डिज़ाइन का इतिहास: वेब के निर्माण के 30 साल [2022 अपडेट]". www.smamarketing.net (in English). Retrieved 2022-10-12.
  3. "लंबी जीवनी". Retrieved 2012-03-16.
  4. "मोज़ेक ब्राउज़र" (PDF). Archived from the original (PDF) on 2013-09-02. Retrieved 2012-03-16.
  5. Zwicky, E.D, Cooper, S and Chapman, D.B. (2000). इंटरनेट फ़ायरवॉल का निर्माण. United States: O’Reily & Associates. p. 804. ISBN 1-56592-871-7.{{cite book}}: CS1 maint: uses authors parameter (link)
  6. 6.0 6.1 6.2 6.3 Niederst, Jennifer (2006). वेब डिजाइन संक्षेप में. United States of America: O'Reilly Media. pp. 12–14. ISBN 0-596-00987-9.
  7. 7.0 7.1 Chapman, Cameron, The Evolution of Web Design, Six Revisions, archived from the original on 30 October 2013
  8. "AMO.NET अमेरिका का मल्टीमीडिया ऑनलाइन (इंटरनेट एक्सप्लोरर 6 पूर्वावलोकन)". amo.net. Retrieved 2020-05-27.
  9. 9.0 9.1 "W3C मार्कअप सत्यापन सेवा".
  10. "वेब डिज़ाइन क्या है?". The Interaction Design Foundation (in English). Retrieved 2022-10-12.
  11. THORLACIUS, LISBETH (2007). "वेब डिजाइन में सौंदर्यशास्त्र की भूमिका". Nordicom Review. 28 (28): 63–76. doi:10.1515/nor-2017-0201. S2CID 146649056.
  12. "वेब डिज़ाइनर क्या है? (2022 गाइड)". BrainStation® (in English). Retrieved 2022-10-28.
  13. Castañeda, J.A Francisco; Muñoz-Leiva, Teodoro Luque (2007). "वेब स्वीकृति मॉडल (डब्ल्यूएएम): उपयोगकर्ता अनुभव के मॉडरेटिंग प्रभाव". Information & Management. 44 (4): 384–396. doi:10.1016/j.im.2007.02.003.
  14. "प्रगतिशील संवर्द्धन का उपयोग करके एक लचीला दृश्यपटल का निर्माण". GOV.UK (in English). Retrieved 27 October 2021.
  15. "मोबाइल-फर्स्ट इंडेक्सिंग को रोल आउट किया जा रहा है". Official Google Webmaster Central Blog (in English). Retrieved 2018-06-09.
  16. Stone, John (2009-11-16). "प्रभावी वेब टाइपोग्राफी के 20 क्या करें और क्या न करें". Retrieved 2012-03-19.
  17. World Wide Web Consortium: Understanding Web Content Accessibility Guidelines 2.2.2: Pause, Stop, Hide
  18. W3C QA. "मेरी वेब साइट मानक है! और तुम्हारा?". Retrieved 2012-03-21.
  19. Christensen, Mathias Biilmann (2015-11-16). "स्टेटिक वेबसाइट जेनरेटर की समीक्षा की गई: जेकेल, मिडिलमैन, रूट्स, ह्यूगो". Smashing Magazine. Retrieved 2016-10-26.
  20. Soucy, Kyle, Is Your Homepage Doing What It Should?, Usable Interface, archived from the original on 8 June 2012
  21. Nielsen, Jakob (10 November 2003), The Ten Most Violated Homepage Design Guidelines, Nielsen Norman Group, archived from the original on 5 October 2013
  22. Knight, Kayla (20 August 2009), Essential Tips for Designing an Effective Homepage, Six Revisions, archived from the original on 21 August 2013
  23. Spool, Jared (29 September 2005), Is Home Page Design Relevant Anymore?, User Interface Engineering, archived from the original on 16 September 2013
  24. Chapman, Cameron (15 September 2010), 10 Usability Tips Based on Research Studies, Six Revisions, archived from the original on 2 September 2013
  25. Gócza, Zoltán, Myth #17: The homepage is your most important page, archived from the original on 2 June 2013
  26. McGovern, Gerry (18 April 2010), The decline of the homepage, archived from the original on 24 May 2013
  27. Porter, Joshua (24 April 2006), Prioritizing Design Time: A Long Tail Approach, User Interface Engineering, archived from the original on 14 May 2013
  28. Spool, Jared (6 August 2007), Usability Tools Podcast: Home Page Design, archived from the original on 29 April 2013
  29. Bates, Chris (9 October 2012), Best practices in carousel design for effective web marketing, Smart Insights, archived from the original on 3 April 2013
  30. 30.0 30.1 Messner, Katie (22 April 2013), Image Carousels: Getting Control of the Merry-Go-Round, Usability.gov, archived from the original on 10 October 2013
  31. Jones, Harrison (19 June 2013), Homepage Sliders: Bad For SEO, Bad For Usability, archived from the original on 22 November 2013
  32. Laja, Peep (8 June 2019), Image Carousels and Sliders? Don't Use Them. (Here's why.), CXL, archived from the original on 10 December 2019
  33. Oleksy, Walter (2001). वेब डिजाइन में करियर. New York: The Rosen Publishing Group, Inc. pp. 9–11. ISBN 9780823931910.


बाहरी कड़ियाँ