वेब विकास के बारे में जाने के दो तरीके हैं: टेक्स्ट एडिटर का तरीका और GUI एडिटर का तरीका। पहला तरीका मुख्य रूप से अधिक उन्नत डेवलपर्स के लिए है, जो कोड को समझते हैं, जानते हैं कि वे क्या चाहते हैं और अपने वेब पेज बनाने के लिए दृश्य सहायता की आवश्यकता नहीं रखते। वे vim, emacs, Notepad++, Kate, या अन्य टेक्स्ट एडिटर्स जैसे प्रोग्राम के साथ काम करते हैं और जब वे अपने काम के अंतिम परिणाम को देखने की आवश्यकता महसूस करते हैं तो केवल वेबपेज को ब्राउज़र में लोड करते हैं। यह दृष्टिकोण न्यूनतम, कुशल – और कठिन है।
दूसरा तरीका वही है जो ज्यादातर लोग करते हैं: किसी ऐसे प्रोग्राम का उपयोग करें जो आमतौर पर उपयोगकर्ताओं से कोड को छुपाता है और उन्हें सामग्री पर ध्यान केंद्रित करने देता है। इस उद्देश्य के लिए उपयोग किए जाने वाले प्रोग्राम वेब एडिटर्स के रूप में जाने जाते हैं। इसके अलावा, वे व्हाट यू सी इज़ व्हाट यू गेट (WYSIWYG) की श्रेणी में आते हैं, जिसका अर्थ है कि एडिटर के GUI के अंदर प्रदर्शित पेज अंतिम परिणाम से मेल खाएगा। कुछ अधिक लोकप्रिय शीर्षकों में KompoZer, Dreamweaver, Quanta, Bluefish, और अन्य अनुकूल वेब डेवलपमेंट सॉफ़्टवेयर शामिल हैं जो लोगों को लेगो बिल्डिंग की मानसिकता के साथ इस विषय से संपर्क करने देते हैं। WYSIWYG एडिटर्स टेक्स्ट एडिटर्स की तुलना में काम करने में कहीं अधिक आसान हैं, लेकिन वे आमतौर पर कम कुशल होते हैं।
और वे पीछे बहुत सारा कचरा छोड़ जाते हैं।
जब आप टेक्स्ट एडिटर्स के साथ काम करते हैं, तो वेब फाइलों में कोड का हर बाइट आपके द्वारा रखा गया होता है। दूसरी ओर, वेब एडिटर्स आमतौर पर ऑटो-जेनरेटेड मेटा फील्ड्स, सेल्फ-प्रोमोशनल कमेंट्स और बहुत सारे अनावश्यक ब्रेक और व्हाइटस्पेस के साथ कोड को उदारतापूर्वक छिड़कते हैं, जिससे कोड आपके इरादे से बहुत बड़ा हो जाता है।
अधिकांश लोग अधिशेष पर ध्यान नहीं देंगे या परवाह नहीं करेंगे, लेकिन अगर आप अपने वेब विकास को साफ, व्यवस्थित, स्पार्टन तरीके से करना पसंद करते हैं, लेकिन फिर भी GUI एडिटर्स का उपयोग करना चाहते हैं, तो कई टूल हैं जो आपको लीन और साफ कोड बनाए रखने में मदद कर सकते हैं।
इन टूल्स को लिंट/टिडी उपयोगिताओं के रूप में जाना जाता है और इनका उपयोग HTML और साथ की फाइलों के आउटपुट को छोटा, साफ और बेहतर लेआउट करने के लिए किया जाता है। इस ट्यूटोरियल में, मैं इन उपयोगिताओं का एक संग्रह प्रस्तुत करने जा रहा हूं, जिनमें से अधिकांश का मैं व्यक्तिगत रूप से उपयोग करता हूं, ताकि आप भी एक अधिक सुंदर और कोलेस्ट्रॉल-मुक्त वेब विकास का आनंद ले सकें। चलिए शुरू करते हैं।
HTML Tidy
HTML Tidy शायद सबसे लोकप्रिय HTML टिडिंग उपयोगिता उपलब्ध है। यह छोटा प्रोग्राम आपके कोड के साथ चमत्कार कर सकता है, अमान्य HTML को ठीक करने, अतिरिक्त व्हाइटस्पेस वर्णों को हटाने, अंतिम मार्कअप के लेआउट और इंडेंटेशन में सुधार करने में मदद करता है।
इसे सभी प्रमुख ऑपरेटिंग सिस्टम पर उपयोग किया जा सकता है। इसके अलावा, अधिकांश वेब एडिटर अपने स्वयं के GUI के भीतर से Tidy चलाने में सक्षम हैं, जिससे साफ कोड पर काम करना और बनाए रखना आसान हो जाता है।
यहां लिनक्स मिंट 6 फेलिसिया पर Bluefish में एक उदाहरण है:
विंडोज XP पर KompoZer में Tidy कॉन्फ़िगरेशन का एक उदाहरण यहां है:
इन दो उत्कृष्ट वेब एडिटर्स के बारे में अधिक जानकारी के लिए, कृपया इस लेख को देखें। एक लोकप्रिय विंडोज टेक्स्ट एडिटर Notepad++ Tidy प्लगइन के साथ पहले से इंस्टॉल आता है, इसलिए आप एडिटर छोड़े बिना कोड एडिट कर सकते हैं।
यहां एक उदाहरण है कि Tidy कैसे काम करता है। मैं एक खाली टेक्स्ट डॉक्यूमेंट में कुछ शब्द लिखने जा रहा हूं और फिर इसके खिलाफ Tidy चलाऊंगा। न केवल Tidy आउटपुट को सुंदर बनाएगा, यह लापता, आवश्यक HTML (XHTML) टैग जोड़ेगा और उचित इंडेंटेशन बनाएगा:
पहले:
बाद में:
या यह:
आप HTML को XHTML में भी बदल सकते हैं, XML में बदल सकते हैं या रीइंडेंट कर सकते हैं, रैप का उपयोग कर सकते हैं, और यहां तक कि माइक्रोसॉफ्ट वर्ड दस्तावेज़ों को भी साफ कर सकते हैं!
सामान्य तौर पर, Tidy एक कमांड लाइन उपयोगिता है। इसे चलाने के लिए बस इसे वांछित HTML फाइल के खिलाफ tidy filename.html चलाकर आमंत्रित करें। HTML फाइल में अपेक्षित एक्सटेंशन के अलावा कोई डॉट नहीं होना चाहिए, या इसके नाम में व्हाइटस्पेस नहीं होना चाहिए, क्योंकि ये उपयोगिता की कार्यक्षमता को तोड़ सकते हैं। जो उचित और सामान्य "अच्छे" कोडिंग दिशानिर्देशों के अनुरूप है।
इसी तरह, यदि आप Tidy को वेब एडिटर्स में से किसी एक के अंदर आमंत्रित करते हैं, तो इस पर निर्भर करता है कि वे कैसे कॉन्फ़िगर किए गए हैं, आपको पाई गई सभी विसंगतियों, त्रुटियों और चेतावनियों की एक लंबी रिपोर्ट मिल सकती है। Bluefish आपके लिए यह करेगा:
Tidy प्राप्त करें
Tidy कई आकार और रूपों में आता है। जानकारी का सबसे अच्छा स्रोत आधिकारिक पेज है। आप डेव रैगेट के पेज पर भी एक नज़र डालने के लिए स्वागत है, मूल डेवलपर, हालांकि परियोजना में विकास, सुधार और सुधार अब सभी SourceForge साइट पर समेकित हैं।
लिनक्स
Tidy अधिकांश लोकप्रिय डिस्ट्रो के रिपॉजिटरी में शामिल आता है, इसलिए इसे प्राप्त करना कोई समस्या नहीं होनी चाहिए।
विंडोज
विंडोज उपयोगकर्ताओं के पास कई विकल्प हैं: वे उदाहरण के लिए Notepad++ का उपयोग कर सकते हैं, या एक विंडोज एक्जीक्यूटेबल के लिए जा सकते हैं, जिसे तब HTML फाइलों के खिलाफ कमांड लाइन से आमंत्रित किया जा सकता है या KompoZer जैसे वेब एडिटर का उपयोग करके प्लगइन्स में से एक के माध्यम से कॉल किया जा सकता है।
यदि आप कमांड लाइन को नापसंद करते हैं, तो डिर्क पेल ने एक GUI संस्करण भी विकसित किया है, जो अन्य ऑपरेटिंग सिस्टम पर भी उपलब्ध है।
ऑनलाइन सेवाएं
Tidy का उपयोग सीधे ऑनलाइन भी किया जा सकता है, किसी इंस्टॉलेशन की आवश्यकता नहीं। कई वेबसाइट्स यह सेवा प्रदान करती हैं, जिसमें W3C अंतर्राष्ट्रीय WWW मानक संगठन स्वयं शामिल है। आपको बस अपने HTML फाइलों के URL से लिंक करना है और उन्हें Tidy के माध्यम से चलाना है।
फायरफॉक्स एक्सटेंशन
एक फायरफॉक्स एक्सटेंशन भी उपलब्ध है, हालांकि केवल विंडोज के लिए। एक्सटेंशन काफी भारी है, 2.6MB डाउनलोड का, लेकिन यह आपके ब्राउज़र के अंदर विस्तारित सत्यापन क्षमताएं प्रदान करता है। आपको अधिक विवरण के लिए आधिकारिक साइट पर भी जाना चाहिए।
फिर, जावा, पायथन, PHP, और Tidy का रूबी संस्करण भी है। सूची लगभग अंतहीन है।
CSSTidy
CSSTidy एक ओपन-सोर्स CSS पार्सर और ऑप्टिमाइज़र है। HTML Tidy की तरह, इसका उपयोग CSS फाइलों के कोड को साफ करने, प्रॉपर्टी स्ट्रिंग्स को जहां उपलब्ध हो हेक्स कोड में बदलने, व्हाइटस्पेस वर्णों को हटाने, डुप्लिकेट प्रॉपर्टीज़ को हटाने और मर्ज करने, और बहुत कुछ के लिए किया जाता है। इस तरह, CSSTidy CSS फाइलों के कुल आकार को दसियों प्रतिशत तक कम कर सकता है।
CSSTidy एक क्रॉस-प्लेटफॉर्म समाधान है, जो लिनक्स, विंडोज और मैक पर उपलब्ध है। C++ और PHP संस्करण भी उपलब्ध हैं। एक ऑनलाइन फॉर्मेटर और ऑप्टिमाइज़र भी है, पांच भाषाओं में उपलब्ध, HTML Tidy के साथ हमने जो देखा उसके समान।
HTML Tidy की तरह, CSSTidy एक कमांड लाइन उपयोगिता है और उपयोग करने में अत्यंत सरल है।
यहां एक CSS फाइल को ऑप्टिमाइज़ करते हुए CSSTidy का एक उदाहरण है:
Weblint
यह एक और HTML ऑप्टिमाइज़ेशन उपयोगिता है जिस पर आप विचार करना चाह सकते हैं, हालांकि यह HTML Tidy की तुलना में कम शक्तिशाली और कम पोर्टेबल है, क्योंकि यह केवल HTML 4.0 दस्तावेज़ों के साथ काम करता है। यह Bluefish के साथ शामिल आता है। सामान्य तौर पर, Weblint केवल लिनक्स के लिए उपलब्ध है (रिपॉजिटरी में)।
निष्कर्ष
HTML और CSS टिडिंग उपयोगिताएं बहुत उपयोगी हैं, चाहे आप शौकिया हों या पेशेवर डेवलपर। यदि आप उच्च-गुणवत्ता वाली सामग्री बनाने का प्रयास करते हैं जो अनुपालन के सख्त अंतरराष्ट्रीय मानकों को पूरा करती है, तो आपको उनका उपयोग करने पर विचार करना चाहिए।
न केवल वे बेहतर लेआउट आउटपुट बनाने और फाइलों को अधिक कॉम्पैक्ट बनाने में मदद करेंगे, वे आपको अपने सोचने और काम करने के तरीके को बदलने के लिए मजबूर करेंगे, वेब मानकों का पालन करके। आप अपने वेब दस्तावेज़ों की समग्र गुणवत्ता और स्थिरता में सुधार करेंगे। और आपके पाठक प्रथम श्रेणी की सामग्री का आनंद ले सकेंगे, बिना इस चिंता के कि आउटपुट इस या उस ब्राउज़र में, इस या उस रिज़ॉल्यूशन पर कैसा दिख सकता है।
यदि आप वेब विकास की दुनिया में प्रवेश करना चाहते हैं या इसमें अपने पहले कदम उठा रहे हैं, तो HTML Tidy और CSSTidy का उपयोग करने पर विचार करने का यह सबसे अच्छा समय है। न केवल आप अपने काम को अधिक सुखद बना देंगे, आप कोड की बड़ी दुनिया को एक छोटा सा बेहतर बनाने में मदद करेंगे। अरे, हर विनम्र योगदान मायने रखता है।
चीयर्स।
