फेसबुक पर नया फोटो व्यूअर कैसे डिजाइन किया गया था

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

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

किए गए कार्यों के लिए धन्यवाद, उपयोगकर्ताओं ने 5% अधिक फ़ोटो देखना शुरू कर दिया, जो मात्रात्मक शब्दों में दैनिक लगभग एक बिलियन अतिरिक्त विचार करता है।

हमने कैसे किया
हमने वर्तमान मुद्दों की सूची संकलित करके शुरू किया है:

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

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

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


फोटो व्यूअर की प्रारंभिक अवधारणा

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


प्रारंभिक प्रोटोटाइप फोटो दर्शक

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


फोटो दर्शक का पूर्ण स्क्रीन संस्करण

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

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

अंतिम समाधान: अधिक सीएसएस, बहुत कम जावास्क्रिप्ट
अंतिम समाधान जावास्क्रिप्ट की आवश्यकता के बिना पॉपअप के साथ काम करने के लिए सीएसएस क्षमताओं का उपयोग करने पर आधारित था। आइए HTML को देखें और उपयोग किए गए लाइन-बाय-लाइन कोड को देखें।

1. पहले हमें एक लाइटबॉक्स बनाने की आवश्यकता है। एक निश्चित स्थिति रूट टैग, fbPhotoTheater का उपयोग करके, हम सामग्री को body से अलग करने में सक्षम थे। रूट टैग की width और height 100% सेट करके और overflow पैरामीटर को body में hidden सेट करने के लिए, हम पृष्ठ में पृष्ठभूमि को बदले बिना सामग्री के माध्यम से स्क्रॉल कर सकते हैं।
2. container तत्व प्रकाश 960px की क्षैतिज सामग्री सीमा 960px और स्क्रीन के केंद्र में प्रकाश 960px की स्थिति निर्धारित करता है। लाइटबॉक्स की संरचना को समायोजित करने के बाद, शेष तत्वों का उपयोग इसकी सामग्री को सही ढंग से करने के लिए किया जाता है।
3. max-height 820px तत्व की height 100% और max-height 820px । इनमें से, 720 पिक्सल को फोटो के लिए आवंटित किया जाता है, और शेष 100 पिक्सल को लाइटबॉक्स के नीचे हस्ताक्षर और टिप्पणियों के लिए उपयोग किया जाता है। यह photoInfoWrapper के निचले बॉर्डर से 100 पिक्सल की ऊंचाई पर photoInfoWrapper को पोजिशन करके हासिल किया जाता है। इस प्रकार, यह हमेशा stageWrapper के नीचे से stageWrapper ।
4. तत्व stageBackdrop , stageWrapper और stageActions में सीएसएस के भीतर समान स्थिति होनी चाहिए। यह उनके पारस्परिक ओवरलैप को सुनिश्चित करता है। हम उन्हें max-height 720 px , top 0 और bottom 100px । इस bottom मूल्य के लिए धन्यवाद, हम हस्ताक्षर के लिए स्क्रीन के निचले भाग में 100 पिक्सल रखने की गारंटी देते हैं, और max-height उन तस्वीरों के लिए भी स्वीकार्य सीमा के भीतर लाइटबॉक्स सामग्री रखता है जो ऊंचाई में भी लम्बी हैं। stageWrapper लिए stageWrapper हम text-align:center stageWrapper text-align:center वैल्यू सेट करते text-align:center ताकि फोटो एक केंद्रीय क्षैतिज स्थिति में हो।
5. stage तत्व का उपयोग फोटो को केंद्र में लंबवत स्थिति में करने के लिए किया जाता है। यह स्थिति में JavaScript का एकमात्र उपयोग है। stage हमें इसकी height बराबर line-height मान सेट करने की आवश्यकता है, इस वजह से, img बच्चे को vertical-align: middle स्थिति मिलती है। यह इस समाधान की योग्यता को ध्यान देने योग्य है, जिसमें इस तथ्य में शामिल है कि गणना केवल एक बार करने की आवश्यकता है, और हर बार जब उपयोगकर्ता कई तस्वीरों के माध्यम से स्क्रॉल नहीं करता है।
6. छवि के लिए, max-height 100% निर्धारित की जाती है ताकि यह हमेशा पैनल की सीमाओं में फिट हो।
7. अंत में, photoInfoWrapper तत्व के लिए, जो कि photoInfoWrapper तत्व से नीचे होना चाहिए, सापेक्ष पोजिशनिंग top: – 100px । इसके कारण एक खाली अंतराल भर जाता है।

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

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

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

हम आशा करते हैं कि फ़ेसबुक के कार्यक्षमता के नए संस्करण का उपयोग करके आपको फ़ोटो देखने में उतना ही मज़ा आएगा, जितना हमें इसके विकास से प्राप्त हुआ है।


फ़ोटो देखने के लिए फ़ंक्शनल का अंतिम संस्करण।