कैसे सुविधाजनक अजाक्स साइटों को बनाने के लिए

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

मुझे तुरंत यह कहना होगा कि ऐसे वेब अनुप्रयोग हैं जो निम्नलिखित नुकसान से रहित हैं (उदाहरण के लिए, जीमेल, हब्रह्रब)। लेकिन ये अपवाद हैं, केवल नियमों की पुष्टि करते हुए।

1. नेविगेशन की कठिनाई

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


संतुष्ट गैजेट को आखिरकार एक सामान्य अजाक्स साइट मिल गई!

हालांकि, यह तथ्य एक विशिष्ट प्रोग्रामर को बिल्कुल परेशान नहीं करता है। क्योंकि एक प्रोग्रामर का मस्तिष्क इतना शक्तिशाली होता है कि वह अपने सिर की सभी स्थितियों का अनुकरण कर सकता है। इससे क्या होता है?

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

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

लेकिन यह केवल हिमशैल का सिरा है। आइए अधिक विशिष्ट बग और कमियों पर विचार करें।

2. बंद होने पर स्थिति रीसेट करें

यह उन सामान्य प्रकार की समस्याओं में से एक है जिनके बारे में कोई नहीं सोचता। निम्नलिखित विकल्प आम हैं।

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

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

इसका समाधान URL को कुछ टोकन से जोड़ना है जो आवेदन को वांछित स्थिति में लौटाता है , उदाहरण के लिए, ajaxsite.ru/#myStateInfoGoesHere

3. निष्क्रिय नेविगेशन बटन

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

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

4. ब्रेक

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

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

5. पृष्ठ पर क्या हो रहा है की गैर-स्पष्टता

ब्राउज़र की निचली रेखा, जिसमें हमने एक बार window.status जोड़तोड़ का उपयोग करते हुए एक रेंगने वाली रेखा लिखी थी, अतीत की बात है। ओह, 2000 के दशक में एक समय था, जब इसे DHTML कहा जाता था, न कि अजाक्स, और इसका उपयोग मॉडरेशन में किया जाता था, और हर दूसरा javascript.internet.com और डायनामिकड्राइव डॉट कॉम ट्यूटोरियल के साथ जानता था, और उन्होंने JS के बारे में लिखा, समझ, ब्रेक पर डंपिंग नहीं। शुरुआती ढांचे के बारे में जानने के बिना, शुरुआती स्वामी के रूप में जो जावास्क्रिप्ट में महारत हासिल करते हैं।

लेकिन मैं पचाता हूं :)

Google डॉक्स जैसी साइटों की केवल आधी रिपोर्ट, कि वे शिलालेखों की मदद से या शिलालेख धारियों वाली एक उबाऊ छोटी तस्वीर की मदद से वहां कुछ बचाती हैं या लोड करती हैं। अब स्थिति पहले से बेहतर है, और इससे पहले कि आप साइट के साथ काम करते हैं, और अचानक वर्तमान विंडो गायब हो गई और आईटी निकल गया, जिसे आपने एक मिनट पहले (हेलो सर्वर-साइड ब्रेक) दबाया था।

लोडिंग प्रक्रिया के उपयोगकर्ता को सूचित करें ताकि वह पृष्ठ पर परिवर्तनों के लिए तैयार हो।

6. AJAX का गलत उपयोग

बहुत बार एक फैशन प्रभाव लागू किया जाता है। उदाहरण के लिए, लोडिंग के रूप में आप पारंपरिक पेजिंग के बजाय सामग्री को स्क्रॉल करते हैं। पेजिंग के एक अरब फायदे हैं - और एक लिंक दिया जा सकता है, और यह स्पष्ट है कि आप कहां हैं। और जब आपने VKontakte चित्रों को स्क्रॉल किया, तो गलती से इसे बंद कर दिया और शिफ्ट + ctrl + T खोला - कृपया एक नए तरीके से स्क्रॉल करें।

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

प्रभाव लागू करते समय, अपने आप को और उपयोगकर्ता को जवाब देने के लिए तैयार रहें, कि आपने इसे क्यों लागू किया, फैशन या सौंदर्य को छोड़कर।

7. कीबोर्ड सपोर्ट का अभाव

साथ ही बहुत गुस्सा आता है। सबसे पहले, एंटर (जिसे डेस्कटॉप इंटरफ़ेस सिखाता है) को दबाकर फॉर्म जमा नहीं किए जाते हैं। दूसरे, सामान्य शॉर्टकट, जैसे कि Ctrl + बाएं / दाएं पृष्ठ संक्रमणों के लिए, काम नहीं करते (हैलो Google, यैंडेक्स हैंडसम पुरुष)। मोडल पॉपअप जो अचानक पॉप अप होता है जब आप एस्केप दबाते हैं तो गायब नहीं होता है।

यदि आपके उपयोगकर्ता ग्रिफिन की नायिका नहीं हैं, जो बिना रुके चलते हैं और अपने मोबाइल डिवाइस को देखते हैं, तो उपयोगकर्ता की आदतों के बारे में न भूलें और कीबोर्ड समर्थन जोड़ें।

अजाक्स एप्लिकेशन को डिजाइन करने का सामान्य विचार

मुझे लगता है कि आप स्वयं एक दर्जन से अधिक उदाहरण आसानी से पा सकते हैं। और यदि नहीं, और आप, मेरे जैसे, एक प्रोग्रामर हैं और आपके लिए अपने एप्लिकेशन के साथ काम करना आसान है, तो अपने वास्तविक उपयोगकर्ताओं को याद रखें। उनकी आंखों से अनुप्रयोगों को देखने की कोशिश करें।

विज्ञान आपकी मदद करता है। मस्तिष्क, जैसा कि आप जानते हैं, अधिकतम भार के समय शरीर के 1/50 वजन के साथ, शरीर की सभी ऊर्जा का 25% तक उपभोग करता है। इसलिए, वह अपने काम को कम से कम करने के लिए हर संभव प्रयास करता है। यही कारण है, और जीवविज्ञान को नहीं जानने वाले मनोवैज्ञानिकों के लिए समझ से बाहर होने के कारण शिथिलता है। इसलिए, हम आलसी हैं और इसलिए हम सब कुछ सरल पसंद करते हैं और उन सभी चीजों को पसंद नहीं करते हैं जिनके लिए अतिरिक्त ऊर्जा लागत की आवश्यकता होती है।

इसलिए, अपनी साइट पर मुख्य उपयोगकर्ता कहानियों को प्रदर्शन करने के लिए क्लिक की संख्या, माउस आंदोलनों की संख्या, कीस्ट्रोक्स की संख्या और हर तरह से इन नंबरों को कम से कम करें। मूर्खतापूर्ण और विधिपूर्वक। यहां आप Google की प्रशंसा कर सकते हैं - इसकी जांच करें, आप पाठ दर्ज करते हैं, और वह पहले से ही खोज और परिणाम दिखाना शुरू कर रहा है। कूल किया।

टिप्पणियों में अजाक्स अनुप्रयोगों और साइटों, और अनुकरणीय साइटों में कष्टप्रद क्षणों के अपने उदाहरण लिखें।

युपीडी। टिप्पणियों से:

lesha_penguin 8. एक अलग विंडो / टैब में लिंक खोलने में असमर्थता ।

उदाहरण के लिए, ऑनलाइन स्टोर में, दो टैब में तुलना / चयन के लिए एक साथ दो उत्पादों को खोलने में असमर्थता। इसके लिए आप हत्या करना चाहते हैं।

एलिनेटर सप्लीमेंट 5: रिपोर्ट न केवल जारी प्रक्रिया, बल्कि इसके पूर्ण होने की भी।

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

mj यहां तक ​​कि जब अजाक्स साइट को विकसित करते हैं, तो इंडेक्सिंग के बारे में मत भूलना: यदि मुख्य सामग्री (साइट मेनू को नेविगेट करते समय जो बदलती है) को अजाक्स के साथ लोड किया गया है - खोज इंजन सबसे अधिक संभावना है कि यह सामग्री को अनुक्रमित नहीं करेगा।

मैं इस समाधान का उपयोग करता हूं: प्रत्येक मेनू आइटम शुरू में एक वास्तविक पृष्ठ का लिंक है, अर्थात / के बारे में / घर / सेटिंग्स / समाचार / 5 आदि

और जब जावास्क्रिप्ट लोड करते हैं - इन लिंक पर क्लिक इंटरसेप्ट होते हैं, और सर्वर से केवल अजाक्स सामग्री ली जाती है, न कि पूरे पृष्ठ पर।