🥐 😌 📩 क्राउडसोर्सिंग डिज़ाइन: हम हैबे पर चित्रों के त्वरित प्रकाशन के लिए एक ब्राउज़र एक्सटेंशन बनाते हैं 👨🏿‍✈️ 🗜️ 🤤

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

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

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

घटनाक्रम के विचारों

के लिए प्रस्तावित है? कहानी के साथ काम करने के लिए मानक तंत्र के अलावा, 2 और तंत्र।
प्रकाशन के मानक तरीके के लिए ब्राउज़र में एक फ्लैश की आवश्यकता होती है, बटन पर क्लिक करना, लिंक कॉपी करना, उन्हें "पेपर के एक टुकड़े पर" सहेजना या खोए हुए लिंक को प्राप्त करने के लिए छवियों को फिर से लोड करना।

पहला अतिरिक्त तरीका:

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

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

दूसरा अतिरिक्त तरीका:

जैसा कि उल्लेख किया गया है, साइडबार में एक छोटा नोट है जिसे आप फाइलें अपलोड कर सकते हैं। उदाहरण के लिए
HabrAjax से : टिप्पणी और लेख इनपुट फ़ील्ड में छवि फ़ाइलों को उन्हें habrastorage.org पर प्रकाशित करने के लिए छोड़ें (पते के साथ छवि टैग कर्सर के नीचे दिखाई देगा)।
इसलिए, आप न केवल इनपुट फ़ील्ड में, बल्कि देरी से प्रकाशन के लिए इस ब्लॉक में फेंक सकते हैं। यदि कोई इनपुट फ़ील्ड है, तो लिंक प्रकाशित किया जाएगा; यदि नहीं, तो वह बाद में प्रकाशन के लिए तैयार हो जाएगा;
उपयोगकर्ता फ़ाइल को साइडबार में ब्लॉक में फेंकता है;
साइडबार में, "हाल ही में" की सूची में एक पूर्वावलोकन दिखाई देता है;
जब आप एक पूर्वावलोकन छवि (92 द्वारा 92) पर होवर करते हैं, तो पूर्वावलोकन और प्रकाशन के लिए फ़ाइल और बटन के बारे में जानकारी खुलती है।
उपयोगकर्ता ने टैग प्रकाशन सेटिंग्स निर्धारित की हैं - चाहे इसे केंद्र में या दाईं ओर रखा जाए, पूर्वावलोकन और लिंक या पूरी तस्वीर दिखाएं या चित्र के नीचे अपना लिंक डालें। क्लिक करें - और टैग वांछित इनपुट फ़ील्ड (टिप्पणी, लेख, प्रश्न, पत्र) में दिखाई दिया।

(एक स्क्रिप्ट का एक उदाहरण जहां तस्वीरों को एक स्टैक में खींच लिया गया है (यह फ़ायरफ़ॉक्स में काम करता है; अब शायद यह भी काम करता है।) - " एचटीएमएल 5 इन हैब्रास्टेज "।)

अतिरिक्त सुविधा:

हाल ही में और चयनित फ़ाइलों की सूची संग्रहीत करने के अलावा, सेवा में चित्रों का आकार नहीं होता है। कोई समस्या नहीं है, क्योंकि www.photosize.com जैसी अन्य ऑनलाइन सेवाएं हैं। वैकल्पिक रूप से, पूर्वावलोकन से पहले हम चित्र का आकार बदल सकते हैं।

जो रुचि रखते हैं

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

साइडबार में और इनपुट फ़ील्ड के ऊपर फ़ील्ड की संरचना के बारे में अधिक; मसौदा

साइडबार में नमूना पाठ:

HabrAjax से: आप साइट पर लेखों और टिप्पणियों के लिए बहुत सी तस्वीरों (habrastorage.org पर) को सहेज सकते हैं। स्थगित किए गए प्रकाशन के लिए या सीधे टिप्पणी, लेख, प्रश्न, उत्तर के लिए इनपुट फ़ील्ड पर उन्हें इस ब्लॉक में खींचें - पूर्वावलोकन और आपकी पुष्टि के बाद, लिंक कर्सर स्थान पर दिखाई देगा। यह ब्लॉक पुन: उपयोग के लिए चित्र दिखाता है (जरूरी नहीं कि आपका अपना):
अंतिम (NN)
पसंदीदा (N)
हटाया गया (NN)
यदि वे 1920x1080 से अधिक नहीं हैं, तो चित्रों का आकार नहीं बदलता है।

जब तस्वीर फेंक दी:

प्रकाशन विकल्प चुनें।
1. बस एक तस्वीर के साथ एक टैग डालें (आकार **** है, लेकिन पृष्ठ चौड़ाई में सिकुड़ जाएगा);
2-3। कहानी से पूर्वावलोकन के साथ एक तस्वीर (2 विकल्प, जो हैं);
4-6। लिंक पर चित्र या पूर्वावलोकन (2 विकल्प), और लिंक पर - एक तृतीय-पक्ष पृष्ठ या छवि (सौ नहीं, अपना खुद का जोड़ें);
7. सेवा पुनर्विक्रेता पर एक पूर्वावलोकन तैयार करें, और फिर - स्टोर से 1-6 विकल्प।
(पूर्वावलोकन) (ओके) (रद्द करें)

चित्रों (विकल्पों) के साथ काम करने की प्रक्रिया।

1. इनपुट फ़ील्ड में या साइडबार में ब्लॉक पर अपने कंप्यूटर से एक चित्र छोड़ें। अगला हमें मिलता है:
1.1 हम इनपुट फ़ील्ड की पृष्ठभूमि पर चित्र का पूर्वावलोकन देखते हैं (पत्र हस्तक्षेप करते हैं, और यह फ़ील्ड में फिट नहीं हो सकता है)।
1.2 यदि आप इसे साइडबार में फेंक देते हैं, तो ब्लॉक के तहत हम प्रश्न देखते हैं ("habrastorage.org पर चित्र (फ़ाइल नाम, आकार, वजन) प्रकाशित करें") और 3 ध्यान देने योग्य बटन: (पूर्वावलोकन) (प्रकाशित करें) (चौड़ाई का आकार बदलें: [___], ऊँचाई : [___]) (रद्द करें)
1.3 यदि आपने इसे इनपुट फ़ील्ड में छोड़ दिया है, तो सवाल यह है: "habrastorage.org पर एक चित्र (फ़ाइल नाम, आकार, वजन) प्रकाशित करें और एक टैग डालें?" और अधिक बटन हैं: (पूर्वावलोकन) (पूर्ण आकार) (पूर्वावलोकन के रूप में 92x92 बिना स्केलिंग के? लिंक के साथ) (पूर्वावलोकन XXXXXX स्केलिंग और लिंक के साथ) (अपने लिंक के साथ: [_____]) (चौड़ाई का आकार बदलें: [___], ऊंचाई: [___]) (रद्द करें)
1.3 इनपुट फ़ील्ड में पूर्वावलोकन को बेहतर तरीके से देखने के लिए इनपुट फ़ील्ड की ऊँचाई बदलें या अंतर्निहित स्क्रिप्ट का उपयोग करके पूर्वावलोकन देखने के लिए "पूर्वावलोकन" पर क्लिक करें (आकार और पैमाने के ड्रैग और ड्रॉप, आकार और टूलटिप्स के साथ)।
1.4 "प्रकाशित करें" या "पूर्वावलोकन" का विकल्प कार्रवाई को बढ़ावा देगा। यदि "आकार" का चयन नहीं किया गया है, तो चित्र प्रकाशित किया जाएगा, और इसका पूर्वावलोकन अंतिम डाउनलोड किए गए लोगों की सूची में दिखाई देगा (शीर्ष से अंतिम वाले); यदि चयनित है, तो आकार तृतीय-पक्ष सेवा पर होगा, और परिणाम इसके नीचे बटन के साथ पूर्वावलोकन के रूप में दिखाया जाएगा: (habrastorage.org पर प्रकाशित करें) (रद्द करें)। आप इष्टतम गुणवत्ता और विवरण का चयन करके आकार बदलने वाले मापदंडों (आकार) को बदल सकते हैं।
1.5 यदि लिंक फ़ील्ड भर गया है, तो छवि प्रकाशित हो जाएगी और इसे नेस्टेड टैग - ए और आईएमजी की एक जोड़ी के रूप में प्रस्तुत किया जाएगा।
2. साइडबार में पूर्वावलोकन में से एक पर अपने माउस को घुमाएं। हम चित्र के नीचे के विकल्प और तस्वीर के बारे में जानकारी देखेंगे:
* (पूर्वावलोकन)
* XXXXXXXX (पिक्सेल)
* XXXXXX (बाइट)
* [सूची से निकालें]
* [पसंदीदा]
* (IMG टैग पूर्ण आकार में डालें)
* (एक लिंक के साथ स्केलिंग के बिना एक टैग पूर्वावलोकन 92x92 डालें)
* (स्केलिंग और लिंक के साथ पूर्वावलोकन डालें)
* [बायां / केंद्र / दायां] - लेख / प्रश्नों के लिए, प्रविष्टि के समय Shift / Ctrl + Shift / Ctrl का चयन करें
* (इसके लिंक के साथ: [_____])
* (चौड़ाई का आकार बदलें: [___], ऊंचाई: [___]) - हाँ, हम छवि पर प्रकाशित छवि को फिर से आकार दे सकते हैं, और परिणाम फिर से प्रकाशित होने की पेशकश की जाएगी।
क्रियाओं की सूची, पिछले एक को छोड़कर, सर्वर पर अतिरिक्त बाहरी क्रियाओं के बिना, कर्सर के स्थान पर एक टैग या इनपुट फ़ील्ड में टैग की एक जोड़ी डालने की ओर ले जाएगा। यदि कोई इनपुट फ़ील्ड नहीं है, तो परिणाम को प्रतिलिपि के लिए इनपुट फ़ील्ड में दिखाया जाएगा (ब्लॉक (?) के तहत)।
3. अंत में, लेखों में प्रकाशन क्षैतिज स्वरूपण के साथ किया जा सकता है, जिसके लिए 3 रेडियो बटन प्रदान किए जाते हैं।

अब डिजाइनरों या प्रयोज्यवादियों के लिए यह वास्तव में दिलचस्पी बनने के लिए आवश्यक है। यह देखते हुए कि हजारों लोग Habré पर चित्र प्रकाशित करते हैं, इसके लिए संभावनाएं हैं।

यूपीडी : (08/14/13, 4:00 बजे) सर्वेक्षण के अंतरिम परिणाम ("70 लोगों ने मतदान किया")

सर्वेक्षण से पता चला कि लेख के प्रति मामूली 2000 विचारों (प्रति दिन) के साथ, 70 मतदाताओं + 60 संयमों ने सर्वेक्षण को देखा।
18% (13 लोग) एक डिजाइन आकर्षित कर सकते हैं;
26 पैक्स चर्चा में भाग लेने के लिए तैयार;
19 लोगों को एक स्क्रिप्ट (26%) की आवश्यकता है;
16 लोग - जरूरत नहीं।
यदि आप परिकल्पित करने के लिए अतिरिक्त हैं, तो कम से कम 50 लोग स्क्रिप्ट का उपयोग करेंगे।
सफारी के अनुसार - मुख्य संस्करण बनाने के बाद, मैं सफारी (+ निंजाटिट) के लिए स्क्रिप्ट को अनुकूलित करने का प्रयास करूंगा।

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

PS मैं आपसे उस संदेश के LAN में एक संदेश को डुप्लिकेट करने के लिए कहता हूं, जिसने डिज़ाइन के बारे में लिखा था - "डिलीट" बटन पर क्लिक करके गलती से किसी एक डायलॉग को मिटा दिया।

UPD2: (08/14/13, 6:00 बजे) साइडबार में ब्लॉक लेआउट (न्यूनतम अतिरिक्त पाठ, मुखबिर शीर्षक, टूलटिप (पाठ के साथ पाठ के लिए बनाया गया, लेकिन आप एक चित्र का उपयोग कर सकते हैं)

3 स्क्रीनशॉट

संकीर्ण विंडो:

चौड़ी खिड़की:

जब आप प्रश्न चिह्न पर माउस ले जाते हैं:

UPD3: (08/14/13, 8:00 बजे) साइडबार में अंतिम ब्लॉक विकल्प

जब एक सवाल पर मँडरा:

UPD4: (08/14/13, 9:00 बजे) अन्य संवाद

उन्होंने अपना स्वयं का संस्करण तैयार करना शुरू कर दिया, जबकि उन्हें अभी तक एक भी डिज़ाइन प्राप्त नहीं हुआ था।
साइडबार में दिखाए गए ब्लॉक के अलावा, आपको उनमें कई ब्लॉक और इंटरफेस चाहिए:
* साइडबार में 2 पंक्तियों में पूर्वावलोकन फ़ाइलों की सूची; होवर पर - फ़ाइलों की जानकारी, देखने की क्षमता, टैग और उनके विकल्प डालने;
* फ़ाइल को खींचने के बाद संवाद; यह वांछनीय है कि यह ऊंचाई में तय हो और प्रारंभिक खींचें खिड़की के आकार का हो; वहाँ - फ़ाइल का नाम, आयाम, वजन, पूर्वावलोकन बटन, प्रकाशन, रद्द करना, क्षेत्रों का आकार बदलना;
* किसी भी इनपुट क्षेत्र पर संवाद (रबर); उसके लिए अंतरिक्ष की 5 रेखाएँ हमेशा ऊपर होती हैं; मौजूदा फ़ील्ड में एक कस्टम URL फ़ील्ड जोड़ा गया है, एक पूर्वावलोकन चित्र (2 विकल्प) के साथ टैग बनाने के लिए बटन।

वे कागज पर खींचे जाते हैं, इसलिए अब वेब पर कॉपी करना मुश्किल है। संक्षेप में - इनपुट क्षेत्र के ऊपर, संवाद 3 लाइनें लेता है।

UPD5: (08/15/13, 01:00) साइडबार में एक फ़ाइल को खींचने के बाद संवाद जब आप एक प्रश्न पर मंडराते हैं - एक संकेत है कि किस तरह की कार्रवाई हो रही है। आकार के साथ रंगीन क्षेत्र - प्लेसहोल्डर। किसी अन्य नंबर को दर्ज करने के बाद, आप तृतीय-पक्ष सेवा के माध्यम से आकार बदल सकते हैं, और नंबर एक सफेद पृष्ठभूमि पर स्पष्ट रूप से दिखाई देते हैं।

(एक छोटा पूर्वावलोकन तुरंत, दाईं ओर या नीचे दिखाया जा सकता है, यह गणना करने के लिए कि इसे कहां रखना अधिक सुविधाजनक है (ताकि ब्लॉक की ऊंचाई में बदलाव न हो)।)

UPD6: (08/15/13) इनपुट क्षेत्र में खींचने के बाद डायलॉग । अतिरिक्त फ़ील्ड प्रदर्शित किए जाते हैं: छवि के नीचे अपना स्वयं का URL लिंक, छोटे चित्रों के पूर्वावलोकन के साथ वर्ग फ़ील्ड (वे अपलोड करने से पहले मॉडल किए जा सकते हैं), रेडियो बटन को केंद्रित करना, यदि लेख में इनपुट (नहीं दिखाया गया है)। शेष तत्वों को साइडबार में तत्वों के समान बनाया जाता है, एक ही व्यवस्था के साथ। इनपुट क्षेत्र में खींची गई छवि का पूर्वावलोकन दिखाई देता है।

संकीर्ण विंडो केस:

चूंकि सभी पूर्वावलोकन मॉडल किए गए हैं, इसलिए चित्रों के आलसी प्रकाशन के बारे में difiso का विचार फिर से याद किया जाता है। इसके लिए सब कुछ है, स्टोरेज मेमोरी को छोड़कर (5 एमबी तक कोई समस्या नहीं होगी)।

क्राउडसोर्सिंग डिज़ाइन: हम हैबे पर चित्रों के त्वरित प्रकाशन के लिए एक ब्राउज़र एक्सटेंशन बनाते हैं

घटनाक्रम के विचारों

जो रुचि रखते हैं

More articles: