👃🏽 📬 👩🏻‍🤝‍👨🏾 वेब साइट / लैंडिंग (अनुभव) बनाने के लिए एक संपादक का विकास 🛀🏼 👩🏼‍🔧 🤳🏾

( Http://www.simonstalenhag.se/ द्वारा कला)

पृष्ठभूमि / अस्वीकरण

सभी को नमस्कार, यह लेख कीव में मैराथन में सोमवार को मेरे भाषण के लिए वास्तव में सामग्री है। लेकिन यह मत सोचिए कि आप ऐसे श्रोता हैं, जिसमें मैं टेक्स्ट वर्क करता हूं, बस इतना ही कि मेरे लिए तैयारी करना आसान है।

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

हम आम तौर पर बिजनेस कार्ड साइट्स, लैंडिंग पेज और अधिक या कम कार्यात्मक साइटों के बारे में बात कर रहे हैं, लेकिन निश्चित रूप से बैक ऑफिस या व्यवस्थापक क्षेत्रों के बारे में नहीं।

आपके लिए UTIEditor विशेष <3

हमें ऐसे संपादकों की आवश्यकता क्यों है?

इस सवाल के बहुत सारे जवाब हैं, आप में से कई, मुझे यकीन है कि यह अनुमान लगा रहा हूं।
मैं इस प्रश्न का उत्तर यूटीआई के दृष्टिकोण से दूंगा, जो एक कंपनी है जो वेबसाइट विकास सेवाएं प्रदान करती है।

यूटीआई मूल रूप से एक उपभोक्ता सामान कंपनी है। मुझे यकीन है कि एक समय में, प्रत्येक व्यक्ति, एक दर्जन बिजनेस कार्ड साइट प्रति व्यक्ति, एक दर्जन ऑनलाइन स्टोर और एक ब्रांडेड चेरी ने अपनी तरह से काम किया है - उनका अपना सीएमएस।

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

यहाँ शायद इस कार्यक्षमता पर चर्चा करने लायक है, क्योंकि यह बहुत अलग है।
मैं यह जोड़ना चाहूंगा कि मैं इस बातचीत में व्रोडैप, ड्रुपल जैसे सीएमएस को शामिल नहीं करूंगा, हम संपादकों के बाजार पर ध्यान केंद्रित करेंगे।

डेब्यू यूटीआई

पहली बात जो मन में आती है वह एक ऐसा रूप बनाना है जहां उपयोगकर्ता वह बदल सकता है जो वह चाहता है:

वास्तविक जीवन से थोड़ा बाहर, खेतों का नाम, लेकिन सार आपने पकड़ा।

कंपनी के दृष्टिकोण से, उसने अपना कर्तव्य पूरा किया और यहां तक कि "अनुकूलन" का भी ध्यान रखा। लेकिन इस दृष्टिकोण की अभी भी कई सीमाएँ हैं।

इस दृष्टिकोण के लाभ:

लागू करने में आसान
उपयोग में आसान
समस्या हल करता है

इस दृष्टिकोण के विपक्ष:

डिज़ाइन को बदलने का कोई तरीका नहीं है
व्यवहार को बदलने का कोई तरीका नहीं है
कोई स्थिति नहीं
आप केवल उस चीज़ को संपादित कर सकते हैं जो फ़ॉर्म में रखी गई थी

क्या आपने अभी तक CKEeditor के बारे में सोचा है ? हर समय का सितारा। कृपया, साइट पर संपादन योग्य सामग्री को बेहतर बनाने के लिए यह अगला कदम उठाएँ।

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

लेकिन फिलहाल, 2018, इसलिए बोलने के लिए, सीकेडीटर ने इस दिशा में कुछ प्रगति की है, जो काफी, अभी तक हास्यास्पद है। एक पूर्ण पृष्ठ क्या नहीं है?

लेकिन यह सब विकास और उपयोग में सुविधाजनक नहीं था। और केवल रीढ़ और jquery को जानते हुए, मैंने साहसपूर्वक खुद को एक फ्रंट-एंड डेवलपर कहा और उन्हें Wix, Squarespace, Tilda, LPGenerator जैसे पूर्ण-विकसित संपादक को विकसित करने की पेशकश करने का फैसला किया ... तब वे वास्तव में मेरे प्रतिस्पर्धी थे। लेकिन चूंकि यूटीआई एक बिना नाम वाली कंपनी है, उन्हें इसके बारे में पता नहीं था। और वे न पहचानते थे और न पहचानेंगे। हालांकि मैराथन का प्रायोजक Wix है। ओह, यह महज एक संयोग है।

वे पहचान नहीं पाए, क्योंकि सब कुछ क्लासिक्स के अनुसार था - कंपनी ने परियोजना की परवाह नहीं की।

ये दो स्क्रैनास्ट हैं, वे जाम के साथ बिल्कुल सही नहीं हैं, लेकिन मुझे यकीन है कि वे संपादक का एक सामान्य विचार प्रदान करेंगे।

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

और उन्होंने एक बग दर्ज किया, वे कहते हैं कि साइट नीचे है। आदमी ने सिस्टम से सिर्फ इंटरनेट कॉर्ड गिराया :)

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

किसी को भी किसी भी विचार है जो मैं इस्तेमाल किया ढेर है? आवेदन बहुत अच्छा लग रहा है, बोलने के लिए ठोस है। यह छोटी गाड़ी नहीं है क्योंकि यह 5 साल पहले छोटी गाड़ी नहीं थी।

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

स्टैक के बारे में क्या?

बैकबोन + jquery + 0 परीक्षण।

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

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

ग्राहक, यदि आप उन्हें सही संपादन उपकरण देते हैं, तब भी वे इसका उपयोग नहीं कर पाएंगे। उनके शिल्प कुछ इस तरह दिखेंगे:

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

लेकिन कभी-कभी यह असंभव है और एक मध्य मैदान की तलाश करनी होगी।

HTML विजुअल एडिटर

प्रारंभिक कार्य यह था: CKEditor के समान ही करें, ताकि आप तत्वों (पाठ, चित्र) को स्थानांतरित कर सकें और किसी तरह उन्हें संपादित / प्रारूपित कर सकें।

मुख्य आवश्यकताओं में से एक आगे के काम के लिए कस्टम HTML लोड करने की क्षमता थी।

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

Grapesjs आपको अपना HTML लोड करने की अनुमति देता है। वह स्पष्ट शब्दों में लिपटे हुए पाठ को देखता है, और वह पाठ जो सिर्फ body , वह महसूस नहीं करता है:

प्रतिबंध

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

मुझे यकीन है कि सभी कार्यान्वयन विकल्प भी नहीं हैं। तथ्य यह है कि शब्दार्थ के संदर्भ में समान चीजों को पूरी तरह से अलग-अलग तरीकों से लागू किया जा सकता है। और कल्पना करें, पृष्ठ पर, नीले वर्ग की तुलना में अधिक जटिल कुछ है। पृष्ठ पर <img /> टैग का उपयोग करके या पृष्ठभूमि का उपयोग करके उसी छवि को जोड़ा जा सकता है। एक बटन एक <बटन> हो सकता है, या यह एक <div> या एक ही छवि हो सकता है। और कैसे समझें कि किस संपादन उपकरण को दिखाना है?

कोई रास्ता नहीं।

सीमा ०

अगली पसंद इस या उस लेआउट को प्रतिबंधित करना है, एक स्टाइल गाइड बनाना है या लोडिंग कस्टम एचटीएमएल को प्रतिबंधित करना है। बेशक, हमने दूसरे को चुना :)

मर्यादा ०१

चूंकि हमने कस्टम HTML लोड करने से मना किया है, इसलिए हमें अपने घटकों / तत्वों की आवश्यकता है, और यह एक वास्तविक संपादक का पहला कदम है।

प्रतिबंध 02

चूंकि उपयोगकर्ता हमारे तत्वों की एक संख्या के साथ काम करेगा, इसलिए हमें संपादक को गैर-"हमारे तत्वों" के साथ काम करने से रोकना चाहिए और हमें यह सिखाना चाहिए कि उनके साथ कैसे काम करना है।

काम का माहौल

सबसे दिलचस्प विषय नहीं है, लेकिन महत्वपूर्ण है। मुझे वास्तव में फ़ोटोशॉप इंटरफ़ेस पसंद है। कई पैनल और कार्यक्षेत्र हैं। आप कार्यक्षेत्र में हेरफेर कर सकते हैं जैसा आप चाहते हैं, यह केंद्रित है और आकार के आधार पर, आप क्षैतिज और ऊर्ध्वाधर दोनों को स्क्रॉल कर सकते हैं।

इसके अलावा, बहुत सारे ने मेरे डिज़ाइन को Google वेब डिज़ाइनर को छुआ:

वैसे, यह Google का एक प्रकार का संपादक है, किसी ने इसका उपयोग किया है?

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

फ़ोटोशॉप

LPGenerator

मेरी रचना

Grapesjs

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

इतना ओवरलोडेड कि आपको सब कुछ छिपाना पड़े

Wix

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

जब आप किसी तत्व पर क्लिक करते हैं, तो अतिरिक्त कार्यक्षमता इसके ऊपर दिखाई देती है जो तत्व से संबंधित है।

इस तरह की चीज़ को महसूस करने के लिए अभी भी रक्तस्रावी है, हम थोड़ी देर बाद इस बारे में बात करेंगे।

minimalist

Squarespace

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

यहां बटन टेक्स्ट द्वारा दर्शाया गया है।

अपने आप में, संपादन मोड पूर्वावलोकन के समान है, और केवल जब आप कुछ स्क्रीन पर डबल-क्लिक करते हैं, तो यह संपादन मोड पर स्विच करने के लिए निकलता है।

उसी समय, संपादक हमें एप्लिकेशन के दूसरे भाग में ले जाता है।

मैं ग्रूट हूं

टिल्डा

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

कुछ जोड़ने के लिए, आपको + पर क्लिक करना होगा। बटन को अपने लिए सुविधाजनक किसी भी स्थान पर ले जाएं, यह सिर्फ काम नहीं करता है। सब कुछ सीमित है।

इसका परिणाम एक ही तत्व के लिए विभिन्न विकल्पों के एक समूह के साथ ऐसी गैलरी हैं।

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

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

यह एक सीएसएस ग्रिड ट्यूटोरियल नहीं है, इसलिए मैं रास्ते में संक्षेप में समझाता हूं, लेकिन मेगा विवरण के बिना।

और इसलिए हमारा कार्य बाएं और दाएं पैनल बनाना है, और बीच में कार्य क्षेत्र जहां वेबसाइट की सामग्री प्रदर्शित की जाएगी।

फायरफॉक्स में ग्रिड के साथ काम करना थोड़ा आसान है, यह अजीब है, लेकिन क्रोम इस मामले में पीछे है। पिछले लेखों में से एक में , मैंने पहले ही इस बारे में बात की थी।

क्रोम में ग्रिड निरीक्षण क्या दिखता है:

उसी समय मफ में:

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

चलो सरल मार्कअप से शुरू करते हैं।

 <div class="main"> <div class="left"></div> <div class="content"> <div class="site"></div> </div> <div class="right"></div> </div>

.left - बाएं पैनल
.content - वह मध्य जहाँ साइट प्रदर्शित की जाएगी
। सही - सही पैनल

अब तक, यह जो दिखता है, उसके लिए यह पर्याप्त नहीं है। हम चाहते हैं कि हमारा इंटरफ़ेस व्यूपोर्ट के बराबर हो। यह height: 100% का उपयोग करके किया जा सकता है height: 100% , लेकिन व्यूपोर्ट इकाइयां vh और vw । हम उनका उपयोग करेंगे।

 .main { height: 100vw; }

डिफ़ॉल्ट रूप से, बच्चों को तार में बदल दिया जाता है। यह एक तरह का फ्लेक्सबॉक्स बॉक्स है। हमें कॉलम सेट करने की आवश्यकता है, हम इसे निम्नलिखित तरीके से कर सकते हैं:

 .main { display: grid; /* grid-template-columns: 1fr 2fr 1fr; */ grid-template-columns: minmax(200px, .4fr) minmax(560px, 2fr) minmax(200px, .4fr); }

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

थोड़ा टिंट और body पर margin को हटा दें, यह हमें थोड़ा परेशान करता है:

  body { margin: 0px; } .left, .content, .right { box-sizing: border-box; border: solid 1px; }

सुपर। लेकिन वह सबसे आसान हिस्सा था। अब हमें एक कार्यक्षेत्र बनाने की आवश्यकता है।
.site हमारी काल्पनिक साइट है। चलो इसे मानक 960px में बनाते हैं और हाइलाइट करते हैं।

 .site { height: 2000px; width: 960px; background: rebeccapurple; }

यदि आप इस चीज़ को निचोड़ते हैं, तो यह अभी भी अधिक मजेदार है:

लेकिन

 .content { overflow: scroll; }

समस्या हल करता है। केवल सौन्दर्यपूर्ण हिस्सा ही शेष है। इंडेंट।

यह margin का उपयोग करके किया जा सकता है:

  margin: auto; margin-top: 20px; margin-bottom: 20px;

20px बहुत या बहुत कुछ आपके ऊपर है। लेकिन एक और समस्या है। यदि स्क्रीन बहुत छोटी है, तो बाईं और दाईं ओर कोई इंडेंटेशन नहीं होगा। maring: auto बाद से maring: auto हो जाएगा। पहली बात जो दिमाग में आती है वह margin-left और margin-right सेट करना है, लेकिन यहां एक और मजाक है। इंडेंटेशन केवल बाईं ओर होगा। यदि आप दाईं ओर स्क्रॉल करते हैं, तो यह वहां नहीं होगा। यह एक ऐसी सुविधा है।

विवरण में जाने के बिना, आप इसे display: inline-block का उपयोग करके ठीक कर सकते display: inline-block । हाँ। लेकिन एक ही समय में, margin: auto जो बड़े स्क्रीन आकारों के साथ बहुत अच्छा व्यवहार करता है। मीडिया क्वेरी का उपयोग करने के लिए अगला सबसे स्पष्ट समाधान है। बड़े स्क्रीन display: block + margin: auto , छोटे स्क्रीन display: block + margin: auto display: inline-block; margin-left/right: 20px display: inline-block; margin-left/right: 20px ।

  .site{ height: 2000px; width: 960px; margin: auto; margin-top: 20px; margin-bottom: 20px; background: rebeccapurple; } @media(max-width: 1350px) { .site { display: inline-block; margin: 20px; } }

कुछ इस तरह। यदि किसी के पास कोई बेहतर विचार है, तो टिप्पणी में आपका स्वागत है।

साइट मानचित्रण

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

एक ही दस्तावेज

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

जिन उपयोगकर्ताओं को समझाया नहीं गया है कि मग का उपयोग कैसे करें:

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

उदाहरण के लिए इस संपादक का पहला UI जो हाथ आया था। पाठ प्रारूपण बटन:

क्या आप इन शैलियों को देखते हैं? रंग पर !important है? इन शैलियों की बिल्कुल भी आवश्यकता नहीं है, यदि आप उन्हें बंद कर देते हैं तो कुछ भी नहीं बदलेगा। किसी भी स्थिति में, साइट पृष्ठ में कस्टम HTML सम्मिलित करके उन्हें पुनः परिभाषित करना बहुत सरल है:

मैं मानता हूं, मैंने यह कोड मैन्युअल रूप से डाला है। लेकिन मुझे कस्टम HTML और सीएसएस डालने की क्षमता के साथ एक 2 सप्ताह की अवधि मिली, और बिल्कुल उसी प्रभाव को प्राप्त किया।

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

उपयोगकर्ताओं को अपने कोड को एम्बेड करने से रोकना इस समस्या का समाधान होगा। लेकिन वास्तविक दुनिया में यह लगभग असंभव है। आप प्रत्येक उपयोगकर्ता के लिए कस्टम एकीकरण नहीं करेंगे। मोटे ग्राहकों के साथ यह संभव है। लेकिन तब नहीं जब आपके पास कार्यक्षमता का 90% लागत 5-10 रुपये हो।

iframe

पृष्ठ को लगभग पूरी तरह से एन्क्रिप्ट करें, iframe हमारी मदद करेगा। यह शायद एकमात्र ऐसी जगह है जिसका मैंने इतने लंबे समय तक iframe उपयोग किया है। अगर वे एक ही डोमेन पर हैं, तो हम iframe कंटेंट तक पहुँच सकते हैं और इसके विपरीत भी। इसलिए हमारे पास सब कुछ नियंत्रण में है। लेकिन ये सभी एनकैप्सुलेशन हमारे लिए थोड़े हैरान करने वाले हैं। उदाहरण के लिए, तत्वों का चयन, जिसके बारे में हम थोड़ी देर बाद चर्चा करेंगे। iframe ऊपर की स्थिति या iframe ही इंटरफेस स्तर पर इसे अलग करें?

बेशक, iframe ही ऐसा करना आसान होगा। तथ्य यह है कि सामग्री स्क्रॉल करते समय, आपको चयन की स्थिति को अपडेट करने की ज़रूरत नहीं है / एक चालाक लेआउट के बारे में सोचें (हालांकि यह बेहतर है), और एक अतिरिक्त इंटरफ़ेस। लेकिन यह गणना करना कि क्या आपका इंटरफ़ेस ओवरलैप करता है, संपादक का इंटरफ़ेस आसान होगा यदि आप एक document में एक iframe पर ऐसी चीजें प्रस्तुत document । इसलिए, उदाहरण के लिए, Grapesjs इन दो दृष्टिकोणों को जोड़ती है:

चयन iframe में तत्वों के साथ होता है, और ओवरलैप के प्रति संवेदनशील अतिरिक्त कार्यक्षमता को iframe शीर्ष पर प्रदान किया जाता है।

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

विक्स <head>

इसलिए, आपको यह समझना चाहिए कि संपादन करते समय यह केवल आवश्यक है। और उपयोगकर्ता शैली के बारे में मत भूलो या आपको फिर से समस्याएं होंगी।

Grapesjs वर्ग जिसे मैंने "गलती से" एक सीमा के साथ अद्यतन किया:

Grapesjs हाइलाइट करते समय gjs-comp-selected वर्ग को जोड़ता है, जो निरीक्षण के दौरान स्पष्ट रूप से दिखाई देता है, और मेरा विश्वास है, यह पहली चीज होगी जो उपयोगकर्ता अनुकूलन के लिए कॉपी करेगा।

तत्वों का चयन करें

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

मेरे संपादक

टिल्डा

Grapesjs

Google वेब डिज़ाइनर

Wix

और जब संपादन

पाठ का हिस्सा बिल्कुल भी दिखाई नहीं देता है। ओह ठीक है। फ्रंट-एंड डेवलपर के दृष्टिकोण से, यह एक विशेषता है।

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

उपयोगकर्ता क्या देखता है (नीला, समस्या की स्पष्टता के लिए, पाठ को पारदर्शी बनाया गया है), जिसे संपादकों, ब्राउज़रों (लाल) द्वारा हाइलाइट किया गया है:

क्रोम

फ़ायर्फ़ॉक्स

FF में पाठ का चयन करते समय, क्रोम नहीं करता है।

तो सभी संपादकों में ऐसा जांबाज क्यों? अपने अनुभव में, मैं कहूंगा कि यह उत्पाद प्रबंधकों और / या परीक्षकों के कान पर नूडल्स है। हर कोई जो संपादक पर काम करता है, एक नियम के रूप में, line-height: 1px निर्धारित करने की संभावना नहीं है, या पाठ की विभिन्न शैलियों और आकारों के साथ खेलने की कोशिश करता है। उनके पास धुंधली आंखें हैं और पहली नज़र में ऐसे शोले अंधे क्षेत्र में बने हुए हैं। और मेरा विश्वास करो, ग्राहकों को पहले मिनट के दौरान उनका सामना करना पड़ता है।

UI / UX के दृष्टिकोण से, यह तकनीकी रूप से स्पष्ट नहीं हो सकता है, और ऐसे कार्यान्वयन विवरण आमतौर पर डेवलपर के विवेक पर छोड़ दिए जाते हैं।

तो क्या उपयोगकर्ता का चयन करना संभव है? किसी भी विचार कैसे एक तत्व को उजागर करने के लिए?
चयन में ऐसी चीजों को शामिल करना चाहिए ~~हाशिया~~ , पैडिंग, बॉर्डर। आकार मॉडल सरल नहीं है:

मेरे सैंडबॉक्स से:

शायद सबसे उपयोगी जानकारी जो मैंने msdn से निकाली थी:

लेकिन हमारे सवाल का कोई जवाब नहीं है।

आइए कोशिश करें कि DOM हमें पहले स्थान पर क्या प्रदान करता है। हमारे पास ऐसा एक लेआउट है:

  font-size: 54px; line-height: 0px; /*   ,     */ border: 10px solid; padding: 10px;

दृश्यमान सामग्री का आकार 62px है, ब्राउज़र हमें 40px दिखाता है। 62px कैसे प्राप्त करें?

getBoundingClientRect हमें लौटाता है - 40px
क्लाइंटहाइट - 20 पीएक्स
स्क्रॉलहाइट - 41 पीएक्स

आप बहुत लंबे समय तक गणित के साथ खेल सकते हैं, लेकिन मुझे इस दृष्टिकोण का उपयोग करके समाधान नहीं मिला।
लेकिन ~ 5 साल पहले की तरह, मुझे पता था कि टेक्स्ट को हाइलाइट करने की कुंजी है। ठीक है, देखो, यदि आप पाठ का चयन करते हैं, तो चयन ठीक वैसा ही है जैसा हमें चाहिए:

एक अच्छा उदाहरण नहीं है, लेकिन जिस ऊंचाई के साथ हमें मुख्य समस्या है - सब कुछ शांत है। लेकिन कुछ सिस्टम जादू के रूप में कैसे भेद करते हैं?

इतने सालों के बाद मैंने गुगली (सीखी!), दुर्भाग्य से मैं गुगली कैसे हुई और लिंक खो गया, लेकिन यहाँ समाधान है:

  const range = document.createRange(); let rangeRect; range.selectNode(elm); rangeRect = range.getBoundingClientRect();

एक range बनाएँ, एक नोड का चयन करें, और इसे range ClientRect से ले लें। देखा! इसके अलावा, चयन सब कुछ के लिए काम करता है। आप पृष्ठ के पूरे टुकड़े ( https://developer.mozilla.org/en-US/docs/Web/API/Range ) का चयन कर सकते हैं।

ऊंचाई और चौड़ाई दोनों में, एकदम सही हाइलाइट।

(संपादक में हाइलाइट एक नीले रंग की सीमा होगी, कोई पृष्ठभूमि नहीं। सिस्टम चयन को दिखाने के लिए चयनित पाठ।)

हाइलाइटिंग का एक और कम महत्वपूर्ण हिस्सा यह कैसे दिखाना है? कोई विचार? तरीकों का एक गुच्छा। सीमा से शुरू होकर, एक अतिरिक्त अस्थायी तत्व के साथ समाप्त होता है।

सबसे पहले, एक iframe या एक iframe पर ऐसा करने का निर्णय लें, हमने ऊपर पेशेवरों और विपक्षों के बारे में बात की।

सीमा फिट नहीं होती है, क्योंकि यह तत्व में आकार जोड़ता है और, क्या होगा यदि उपयोगकर्ता तत्व को अपनी सीमा निर्धारित करता है? इसकी outline साथ, Grapesjs इसके माध्यम से चयन करके पाप करता है।

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

वह सब नहीं है

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

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

संपादन

चूंकि हमने एक उदाहरण पाठ के साथ हाइलाइटिंग के बारे में बात करना शुरू कर दिया है, आइए इसे जल्दी से संपादित करें।

वास्तव में, पाठ चित्र और हाइलाइटिंग के बाद संपादक का दूसरा महत्वपूर्ण हिस्सा है :)

खैर, यहां बताया गया है कि इसे कैसे बनाया जाए ताकि जब मैं पाठ का हिस्सा चुनूं और कुछ स्वरूपण कार्यक्षमता पर क्लिक करूं, तो मैं चयनित पाठ को बिल्कुल प्रारूपित करूंगा?

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

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

 contentEditable

( https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEitable )

यह ब्राउज़र में एक पैनकेक एडिटर है। यह न केवल हमें पाठ लिखने का अवसर देता है, बल्कि इसका प्रारूप भी तैयार करता है।

, VC++, MVC

, , Visual C++, C#, Delphi . - , Backbone , , //.

, - , , , . :

, , .

, CSS, .

Backbone, (View), (Model) (Collection). (Router). View. MV*, MVV, .

, Backbone, . View . CSS . , View .

, , View . View Model . , . , View . , . , .parent .

View , View Model, data- . , Model , . , Backbone, React, DOM, . , . 50-100 - .

, , HTML. , , . virtual dom, JS. — . !, . Wix, :

, :

, . . React.

CSS , . , HTML, . , .

, <style> . , . .

data- , html . !== . html . , ID, , .

//

. , . . , , .

. . .

React? Polymer? Vue ( )? Angular (!)?

3 , React Polymer, React Web Components.

, (Polymer), . . . Shady DOM , , . , .

प्रतिक्रिया

:) . React :

 const rootElement = document.getElementById("root").contentDocument.body; ReactDOM.render(<App />, rootElement);

HTML, ReactDOM.hydrate(element, container[, callback]) , - DOM React. . यह कमाल है। , , Virtual DOM . .

, . Redux, Flux, Mobx . Redux, .

Marrionett . Backbone. . .

, . ? React, . DOM? ? ReactDOM.hydrate HTML? , .

Responsive and Adaptive

. , , . 960px. , , - . .

, , . , .

, relative . , . . . .

( )

, . , , , . .

03

, . . .

960px, . .

, , . Wix, . , .

. हाँ, हाँ। , , , — .

. :)

12 , , .

12 , ? https://grapesjs.com/ , .

, , . , . . .

, /,

. . , . . , UI/UX.

- , , , — .

, , , . . , , .

. C . UI/UX. , undo/redo , . , HTML localStorage… , .

. , , — . , , .

PS . , . , :)

वेब साइट / लैंडिंग (अनुभव) बनाने के लिए एक संपादक का विकास