अपनी खुद की वेबसाइट बनाने के लिए 8 कदम

वेबसाइट निर्माण में शुरुआती लोगों के लिए मुझे अच्छे चरण-दर-चरण टेम्पलेट नहीं मिले, इसलिए मैं अपनी वेबसाइट बनाने से लेकर लॉन्च तक के अनुभव साझा करना चाहता हूं।
न्यूनतम आवश्यकताएं: वेब प्रोग्रामिंग भाषाओं (PHP / Python / Perl / Ruby) में से किसी में HTML पेज लेआउट कौशल और बुनियादी ज्ञान।
अनुशंसित: ग्राफिक संपादकों में मूल बातें (फ़ोटोशॉप / एडोब इलस्ट्रेटर), कौशल divnoy एचटीएमएल लेआउट, वेब प्रोग्रामिंग के लिए भाषाओं (PHP / पायथन / पर्ल / रूबी के कम से कम एक का ज्ञान ...)।
समय की लागत: सीधे कौशल और इच्छा पर निर्भर करती है। परियोजना की मैं 1 (वस्तुओं में से प्रत्येक के कार्यान्वयन के विस्तार के आधार पर) एक सप्ताह के लिए कुछ घंटों लग गए।

विचार

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

उपयोगी लेख:

• एक विचार या डोमेन से अधिक महत्वपूर्ण क्या है?
• डोमेन कैसे पंजीकृत करें - युक्तियां और मिथक

सामग्री

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

उपयोगी लेख:

• सामग्री के साथ आगंतुक वफादारी बढ़ाने के 3 तरीके
• सामग्री बदलने से खोज इंजन पदों में सुधार होता है

इंटरफ़ेस

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

उपयोगी लेख:

• IT2Days के लिए सफल वेबसाइट बनाने के सुनहरे नियम
• शब्द बात: इंटरफ़ेस डिजाइन में भाषा के मुद्दे

डिज़ाइन

एक आदर्श विकल्प होगा यदि आपके पास एक परिचित डिजाइनर है, जिसके साथ आप एक छोटे शुल्क के लिए अपनी इच्छा के आधार पर एक लेआउट की व्यवस्था करने के लिए सहमत हैं।
यदि आपके पास डिजाइनरों के मित्र नहीं हैं, लेकिन आपकी खुद की डिज़ाइन बनाने की इच्छा और समय है, तो मैं लेख "पेज लेआउट बनाने के लिए एडोब इलस्ट्रेटर का उपयोग करें" की सिफारिश करता हूं
लेआउट को भरते समय, मैं कभी भी लोरम इम्प्सम जैसे खाली पाठों का उपयोग नहीं करता हूं ... वास्तविक जानकारी और प्रासंगिक चित्रों से भरा एक डिजाइन अवैयक्तिक टेम्पलेट की तुलना में बहुत अधिक सुखद और जीवंत है।
आदर्श रूप में, आप स्क्रीन के लिए आवश्यक विस्तार, तत्वों से प्रत्येक के लिए परतों के साथ के लिए टेम्पलेट मिलता है। यदि आप एक सुंदर टेम्पलेट नहीं बना सकते हैं और वित्त आपको कस्टम डिज़ाइन बनाने की अनुमति नहीं देता है, तो आप templatesterster.com पर सुंदर टेम्पलेट्स में झाँक सकते हैं

ख़ाका

आप आदर्श लेआउट के बारे में अंतहीन बात कर सकते हैं, मैं उस बारे में लिखूंगा जो मैं अक्सर सामना करता हूं:
क्रॉस-ब्राउज़र संगतता
आमतौर पर मैं जांचता हूं कि हमारी साइट फ़ायरफ़ॉक्स, ओपेरा, IE, क्रोम के नवीनतम बिल्ड में कैसे प्रदर्शित होती है (यदि आप केवल रूसी दर्शकों पर ध्यान केंद्रित करते हैं - रनवे के लिए वर्तमान ब्राउज़र आँकड़े )। फिर मल्टी IE का उपयोग करते हुए, मैं जांचता हूं कि साइट 6 और सहित संस्करणों में कैसे दिखती है (संस्करण 6 में, मैं केवल उन समस्याओं को ठीक करता हूं जो साइट को पढ़ने के लिए अवास्तविक बनाते हैं)। परियोजना शुरू करने के बाद, http://browsershots.org/ सेवा का उपयोग करना सुविधाजनक है
मैं एक अद्भुत लेआउट का उपयोग करने की सलाह देता हूं, हम सभी शैलियों को एक अलग सीएसएस फ़ाइल में निकालते हैं। इस मामले में, साइट की मुख्य सामग्री यथासंभव निकट पृष्ठ के स्रोत कोड के शीर्ष के रूप में स्थित होना चाहिए। पृष्ठ की मुख्य सामग्री (दाईं ओर), और अन्य - - उदाहरण के लिए, अगर आपके पास एक पेज दो कॉलम, जिनमें से एक के होते हैं अक्सर पढ़ा लेख (बाईं ओर), उपयोग हलका या नकारात्मक हाशिए की एक सूची के माध्यम से।
नतीजतन, आपको एक स्थिर html पृष्ठ + css + jpg / png छवि मिलनी चाहिए - आपकी साइट के वास्तविक पृष्ठ का एक नमूना।

उपयोगी लेख:

• स्तंभ लेआउट
• अपने डिजाइन में टाइपोग्राफी को बेहतर बनाने के 8 आसान तरीके
• कैसे सभी उपकरणों के लिए एक साइट बनाने के लिए

पहला संस्करण

बंद विकास का माहौल
एक स्थानीय मशीन पर एक साइट विकसित करते समय, सबसे पहले, मुझे चिंता है कि स्रोत समय से पहले नेटवर्क में लीक नहीं होंगे। यहां तक ​​कि अगर आपकी साइट केवल स्थानीय नेटवर्क पर उपलब्ध है (उदाहरण के लिए, 192.168.1.100 पर ), बाहर से ब्लॉक को एक्सेस करें। इसके अलावा, साइट शुरू करने से पहले, मैं काउंटरों को सेट नहीं करता और ब्राउज़र में "ट्रैकिंग" मोड को बंद कर देता हूं, उदाहरण के लिए, Google Chrome में ।
एक लेआउट और सामग्री जो हम साइट पर रखने जा रहे हैं, यह आपकी पसंदीदा भाषा में वेब-प्रोग्रामिंग में हमारी प्रतिभा दिखाने का समय है।
इस बिंदु पर, आपको यह तय करना चाहिए कि आप किस डेटाबेस का उपयोग करेंगे या फ़ाइलों में सब कुछ संग्रहीत करेंगे।
मेरी साइटों के लिए, मैं हमेशा MySQL का उपयोग करता हूं, जो कि पहले से ही सस्ते होस्टिंग पर स्थापित होने की अधिक संभावना है, यह सलाह दी जाती है कि आप पहले से ही कल्पना करें कि डेटाबेस में आपके पास क्या टेबल हैं।
यदि आपके पास पहले से ही चयनित सीएमएस या फ्रेमवर्क है, तो html टेम्पलेट को अनुकूलित करना और आवश्यक मॉड्यूल लिखना शुरू करना कोई समस्या नहीं होगी। आप स्क्रैच से एक वेबसाइट बनाने के लिए, और एक ही समय में आप अतीत परियोजनाओं के घटनाक्रम नहीं है, तो - एक विकल्प बनाने, हम सीएमएस / फ्रेमवर्क अध्ययन या अपनी बाइक लिखते हैं, अपनी गलतियों से सीखने होंगे।
यह समय से पहले कोड का अनुकूलन करने के लिए योग्य नहीं है (बेशक, यदि आपके पास पहले से ही पेज कोड 5+ सेकंड के लिए उत्पन्न हुआ है, तो यह विचार करने योग्य है) छवि अनुकूलन करना बेहतर है।
गौरतलब है कि UTF-8 वर्तमान क्षण में इनकोडिंग निर्धारित एक वास्तविक मानक बन जाता है , इससे पहले कि आप विंडोज़ -1251, जो तब संक्रमण के साथ समस्या नहीं हैं, उसका चयन ऐसा लगता है।

उपयोगी लेख:

• DB डिजाइन विकल्प
• UTF-8 संक्रमण धोखा शीट

लांच

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

उपयोगी लेख:

• साइट लॉन्च चेकलिस्ट
• साइट को लॉन्च करने से पहले अंतिम जांच करें

समर्थन

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

• सर्वर स्क्रिप्ट (मेरे मामले में PHP)
• स्टैटिक्स (जावास्क्रिप्ट, सीएसएस, चित्र)
• डेटाबेस में टेबल (मेरे मामले में MySQL)।

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

उपयोगी लेख:

• सर्वर पर मरम्मत कार्य की रिपोर्ट करें
• किसी साइट पर ट्रैकिंग पृष्ठ लोड करने की गति
• चरण-दर-चरण प्रयोज्य परीक्षण या एचसीडी डिजाइन मूल्यांकन
• व्यवहार में ए / बी परीक्षण

युपीडी: मुझे यकीन है कि सबसे अनुभवी habrayuzerov कुछ भी नया सीखने नहीं कर रहा हूँ, लेकिन Habr पढ़ सकते हैं और नौसिखिए वेबमास्टर्स।

UPD (2): सामग्रियों के लिए कुछ पुराने लिंक अपडेट किए गए।