आप क्या सीखेंगे
- “साइट बना दो” की जगह यूज़र का एक काम कैसे बताएँ
- पेज हिस्सों में कैसे बनाएँ: ढाँचा, स्टाइल, व्यवहार
- पेज को फ़ोन और कीबोर्ड से कैसे जाँचें
- पेज के कोड में क्या नहीं रखना चाहिए
मुख्य शब्द
- HTML
- पेज का ढाँचा: शीर्षक, टेक्स्ट, बटन, फ़ॉर्म।
- CSS
- सजावट: रंग, फ़ॉन्ट, खाली जगह, स्क्रीन के अनुसार ढलना।
- JavaScript
- व्यवहार: क्लिक पर क्या होता है, फ़ॉर्म भेजना, एनिमेशन।
- अनुकूलनशीलता (responsive)
- पेज फ़ोन, टैबलेट और कंप्यूटर पर एक जैसा सुविधाजनक है।
01एक परिदृश्य बताएँ
एक यूज़र और एक काम चुनें: सामग्री खोजना, अनुरोध छोड़ना, कैटलॉग खोलना। लिखें कि काम से पहले व्यक्ति क्या देखता है और बाद में क्या पाता है। यही पहले वर्शन का काम है।
उदाहरण। “स्ट्रीमर पेज पर आता है, 10 सेकंड में समझ जाता है कि डोनेशन तुरंत उसके वॉलेट में आते हैं, और ‘लिंक बनाएँ’ दबाता है।”
02हिस्सों में बनाएँ
AI से पहले सिर्फ़ HTML का ढाँचा माँगें: शीर्षक, विवरण, तीन फ़ायदे और एक बटन। फिर स्टाइल, फिर व्यवहार। अगले हिस्से पर जाने से पहले हर हिस्सा ब्राउज़र में जाँचें: इस तरह गलती ढूँढना आसान रहता है।
सुझाव। कोड में छोटे कमेंट माँगें: इससे उसे सँभालना आसान होता है।
03फ़ोन और कीबोर्ड से जाँचें
पेज को संकरी स्क्रीन पर खोलें: कुछ भी किनारे से बाहर नहीं निकलना चाहिए, और बटन उँगली से दबने चाहिए। पेज को Tab कुंजी से पूरा घूमें: हर लिंक और बटन पर साफ़ दिखने वाला फ़ोकस आना चाहिए।
- 360 पिक्सल चौड़ाई पर बिना क्षैतिज स्क्रॉल के
- मुख्य फ़ॉन्ट 16 पिक्सल से छोटा नहीं
- फ़ॉर्म के फ़ील्ड पर लेबल हैं
- सभी लिंक चलते हैं
04सुरक्षा
पेज के कोड में जो कुछ है, वह हर विज़िटर को दिखता है। API कुंजियाँ, पासवर्ड और टोकन पेज के कोड में कभी नहीं रखे जाते: उन्हें सर्वर पर रखा जाता है।
- HTML और JavaScript में कुंजियाँ और पासवर्ड न डालें
- अनजान साइटों की स्क्रिप्ट न जोड़ें
05प्रकाशन की तैयारी करें
पेज का साफ़ शीर्षक (title) और विवरण (description) जोड़ें: खोज इंजन इन्हें दिखाते हैं। जाँचें कि तस्वीरों के विवरण (alt) हैं और पेज मोबाइल इंटरनेट पर तेज़ी से खुलता है।
प्रकाशन से पहले
- पेज एक साफ़ परिदृश्य हल करता है
- फ़ोन पर क्षैतिज स्क्रॉल नहीं है
- सभी बटन और लिंक चलते हैं और कीबोर्ड से पहुँचने योग्य हैं
- कोड में कुंजियाँ, पासवर्ड और टोकन नहीं हैं
- title, description और तस्वीरों के विवरण हैं
आम गलतियाँ और सही तरीका
AI से सीधे “पूरी साइट बना दो” कहना
एक परिदृश्य से शुरू करें और हिस्सों में बनाएँ।
सिर्फ़ कंप्यूटर पर जाँचना
ज़्यादातर विज़िटर फ़ोन से आते हैं।
API कुंजी सीधे पेज के कोड में
गोपनीय बातें सिर्फ़ सर्वर पर रखी जाती हैं।
title और description के बिना प्रकाशित करना
इनके बिना पेज खोज में कम मिलता है।
खुद आज़माएँ
अपने प्रोजेक्ट का पेज बनाएँ: शीर्षक, विवरण, तीन खूबियाँ और एक चालू काम।
- यूज़र का परिदृश्य एक वाक्य में बताएँ
- AI से HTML का ढाँचा लें और उसे ब्राउज़र में जाँचें
- स्टाइल जोड़ें और 360 पिक्सल चौड़ाई पर जाँचें
- पेज को Tab कुंजी से घूमें और जो मिले उसे लिखें
नतीजा। चालू पेज और जाँचों की सूची जिनसे वह गुज़रा।
खुद को परखें
पहले मन में जवाब सोचें, फिर उत्तर खोलें।
1पेज को हिस्सों में बनाना बेहतर क्यों है?उत्तर
हर हिस्सा तुरंत जाँचा जाता है, और गलती ढूँढना आसान होता है। बड़ा कोड एक साथ डिबग करना कठिन है।
2क्या API कुंजी पेज के JavaScript में रख सकते हैं?उत्तर
नहीं। पेज का कोड हर विज़िटर देख सकता है, कुंजियाँ सर्वर पर रखी जाती हैं।
3पेज की सुलभता जल्दी कैसे जाँचें?उत्तर
उसे Tab कुंजी से घूमें: सभी बटन और लिंक पर दिखने वाला फ़ोकस आना चाहिए।
संक्षेप में
एक परिदृश्य, ब्राउज़र में जाँच के साथ हिस्सों में निर्माण, फ़ोन और कीबोर्ड, कोड में कोई गोपनीय बात नहीं, साफ़ title और description। इस तरह पहला पेज सिर्फ़ सुंदर नहीं, चालू बनता है।