क्रिएटिव कोडिंग के साथ शुरुआत कैसे करें

विषय

• आंतरिक कामकाज
• समस्या बयान
• उपकरण निर्माण
• निष्कर्ष

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

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

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

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

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

आंतरिक कामकाज

लोगो यह है कि यह केवल एक HTML कैनवास नहीं है, बल्कि वास्तव में कई कैनवास हैं जो प्रत्येक विशिष्ट कार्य कर रहे हैं:

• पाद लेख, जिसने पृष्ठ के नीचे त्रिकोण/रंग पागलपन को आकर्षित किया।
• लोगो, जिसने पाद लेख को लोगो के मुखौटे के अंदर खींचा है।
• फ़ेविकॉन, जिसने लोगो को 16x16.

मूल चिह्न को जिस तरह से मुझे चाहिए था, उसे प्राप्त करने के लिए, मैंने वेक्टर संस्करण के साथ शुरुआत की और इसे ड्रा स्क्रिप्ट नामक टूल के माध्यम से चलाया, जिसने वेक्टर आकार को कैनवास> टैग में उपयोग के लिए जावास्क्रिप्ट में परिवर्तित कर दिया।

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

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

समस्या बयान

यह सब पढ़ना आपको कठिन लग सकता है - बस इसे फिर से पढ़ना मुझे थोड़ा डराता है! मेरे लिए क्रिएटिव कोड, जानकारी से कहीं अधिक प्रक्रिया है। मैं इस प्रक्रिया में नहीं गया था, यह जानते हुए कि मैं उन पुस्तकालयों या तकनीकों में से किसी का उपयोग करने जा रहा था - मुझे इस बात का अंदाजा भी नहीं था कि मैं क्या चाहता हूँ!

मैं बहुत से प्रतिभाशाली लोगों के सहयोग से काम करता हूं, और इस मामले में मेरे मित्र जारोड रिडल ने ब्रांडिंग में सहायता की। जारोड ने मुझे एक ऐसे विचार के एनिमेटेड GIF के साथ एक टेक्स्ट संदेश भेजा जिसके बारे में वह सोच रहा था - मूल रूप से रंगीन आकृतियाँ जो चारों ओर तैर रही थीं और एक दूसरे से टकरा रही थीं।

वहां से, मैंने इसे एक बार में एक कदम उठाया। मैंने इसे अपने सिर में इस तरह तोड़ दिया:

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

दूसरे शब्दों में जब मैंने शुरू किया तो मेरे पास तीन समस्या वक्तव्य थे, और तीसरा बहुत दूर था, बहुत दूर था। पहले दो बहुत अधिक प्राप्त करने योग्य थे, इसलिए मैंने एक गाइड के रूप में Google का उपयोग करके छोटे प्रोटोटाइप शुरू किए। मैंने CreateJS और KineticJS जैसे पुस्तकालयों की कोशिश की, एक घूर्णन हरे वर्ग को 'हैलो वर्ल्ड' के रूप में चित्रित किया। मैंने तुलना करने के लिए बिना किसी पुस्तकालय के कैनवास में चित्र बनाने की भी कोशिश की।

इनमें से प्रत्येक प्रोटोटाइप को एक बड़ी चीज़ की ओर काम करने के बजाय एक छोटे, पृथक डेमो के रूप में बनाया गया था। मेरे प्रोटोटाइप केवल एक समस्या कथन का उत्तर देने के लिए थे; और कुछ नहीं।

एक बार जब मैंने पहली दो समस्याओं को पार कर लिया (Google से बहुत मदद के साथ!), तीसरी समस्या का विवरण और टूट गया:

• मुझे यह पता लगाने की जरूरत है कि एक दूसरे पर प्रतिक्रिया करने वाले बहुत सारे आकार कैसे हों।
• मुझे आकृतियों के रंग बदलने में सक्षम होना चाहिए।

और फिर जैसे-जैसे मैं एक पूर्ण प्रभाव के करीब पहुंचने लगा:

• क्या फ़ेविकॉन अपडेट देखना अच्छा नहीं होगा? मैं आश्चर्यचकित हूं...

यदि आप मेरे द्वारा किए गए कुछ प्रोटोटाइप देखना चाहते हैं, तो मैंने Arbitrary Blog पर अधिक विस्तृत तकनीकी राइटअप लिखा है।

उपकरण निर्माण

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

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

निष्कर्ष

मैंने बहुत सारे कोडर्स और डिजाइनरों को पर्याप्त अच्छा नहीं महसूस करने पर निराशा देखी है - इसका कारण यह है कि वे ऐसा कभी नहीं करेंगे जो कोई अन्य व्यक्ति करता है क्योंकि वे किसी भी तरह "बेहतर" या कौशल में अधिक जानकार हैं। गहराई में हम जानते हैं कि यह सच नहीं है... या कम से कम, यह इसका केवल एक हिस्सा है।

सिंटैक्स एक महान डेवलपर नहीं बनाता है - प्रक्रिया करता है। एक तरकीब यह याद रखना है कि वेब के बारे में सबसे पहले क्या अच्छा है - डिजाइन और अन्तरक्रियाशीलता का प्रतिच्छेदन।

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

शब्दों: जेमी कोसोय

जेमी कोसोय @ArbitraryCo के संस्थापक और बिग स्पेसशिप में पूर्व प्रौद्योगिकी निदेशक हैं.