ब्राउज़र में डिज़ाइन

विषय

• कोड के साथ डिजाइन करने के लाभ
• डेटा पहले
• मोबाइल अच्छाई मुफ्त में
• एक आम भाषा ढूँढना
• तेजी से सीखें
• तीव्र पुनरावृत्ति it
• लॉन्च करने का तेज़ समय
• एचटीएमएल 5 क्यों?
• जादुई डेटा- विशेषता
• CSS3 - यह नया फोटोशॉप है
• Sass+Compass: जादुई रूप से स्वादिष्ट
• jQuery: ओह, हाँ आप कर सकते हैं
• फ़्रेमवर्क
• अंतिम विचार

यह लेख पहली बार .net पत्रिका के अंक 235 में प्रकाशित हुआ - वेब डिज़ाइनरों और डेवलपर्स के लिए दुनिया की सबसे अधिक बिकने वाली पत्रिका।

मैं कभी भी जरूरत से ज्यादा काम करने का बड़ा प्रशंसक नहीं रहा। मुझे या मेरी टीम को अधिक प्रभावी बनाने की उनकी क्षमता के आधार पर मैं विधियों और उपकरणों का मूल्यांकन करता हूं। वे हमें कितनी जल्दी एक कार्यशील उत्पाद तक पहुँचाते हैं? वे संवाद करने में कितने प्रभावी हैं? क्या वे हमारे रास्ते से दूर रहते हैं?

इन वर्षों में, मैंने अपनी डिज़ाइन प्रक्रिया और उपकरणों को समायोजित किया है। मुझे लगता है कि मैं ऐसा करना जारी रखूंगा। यही तकनीक और वेब के लिए डिजाइनिंग की प्रकृति है। यह उद्योग लगातार विकसित हो रहा है; हमारी प्रक्रिया और उपकरणों को भी विकसित करने की जरूरत है।

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

कोड के साथ डिजाइन करने के लाभ

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

डेटा पहले

एचटीएमएल के साथ डिजाइनिंग के बारे में मुझे जो चीज हमेशा पसंद आई है वह यह है कि यह डेटा-फर्स्ट परिप्रेक्ष्य से सोचने को प्रोत्साहित करती है। इसके विपरीत, Illustrator, OmniGraffle, या Balsamiq जैसे ड्राइंग प्रोग्राम का उपयोग करके, आप एक बॉक्स से शुरू करते हैं और इसे डेटा से भरते हैं।

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

मोबाइल अच्छाई मुफ्त में

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

इनपुट प्रकार = "ईमेल"> इनपुट प्रकार = "दूरभाष"> इनपुट प्रकार = "यूआरएल"> इनपुट प्रकार = "दिनांक"> इनपुट प्रकार = "दिनांक-समय">

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

एक आम भाषा ढूँढना

"यह बहुत बढ़िया है कि हमारे डिजाइनर और डेवलपर्स एक ही भाषा में कैसे काम कर सकते हैं" - जॉन ड्रैगो, इन्फ्लेक्शन में एप्लिकेशन डेवलपर।

देखें कि क्या यह परिचित लगता है। मैं आधा दर्जन सर्वर-साइड एप्लिकेशन देवों के साथ एक सम्मेलन कक्ष में हूं जो रूबी, पायथन, जावा या .NET में मेरे चारों ओर मंडलियों को कोड कर सकता है। मैं अकेला डिजाइनर हूं। मेरे कुछ सुझावों को लागू करने के लिए बहुत जटिल होने के कारण शुरू में खारिज कर दिया गया। मैं व्हाइटबोर्ड तक जाता हूं और बोर्ड पर कुछ HTML और CSS लिखना शुरू करता हूं कि डिजाइन को कैसे लागू किया जा सकता है। अचानक बातचीत का स्वर बदल जाता है और डेवलपर्स में से एक अनिच्छा से कहता है, "ठीक है, हाँ - अगर हम इसे इस तरह से करते हैं, तो यह काम कर सकता है।"

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

तेजी से सीखें

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

तीव्र पुनरावृत्ति it

पिछली बार कब एक अंतिम डिज़ाइन जिसे उत्पादन के लिए भेज दिया गया था, आपके फ़ोटोशॉप कंप से बिल्कुल मेल खाता था? लगभग नहीं। डिजिटल उत्पाद डिजाइन के साथ, परिवर्तन लगातार होता रहता है। इसके अलावा, कुछ दर्जन स्क्रीन पर आपके शीर्षकों के आकार को 22pt से 24pt तक बढ़ाने जैसे परिवर्तनों में फ़ोटोशॉप में घंटों लग सकते हैं। फ़ोटोशॉप में स्मार्ट ऑब्जेक्ट आपको कुछ स्तर की ऑब्जेक्ट-ओरिएंटेड डिज़ाइन देते हैं। दुर्भाग्य से, मुझे पता है कि अधिकांश विज़ुअल डिज़ाइनर स्मार्ट ऑब्जेक्ट्स का पर्याप्त उपयोग नहीं करते हैं। सीएसएस के साथ, क्योंकि यह डिजाइन के लिए एक अधिक व्यवस्थित दृष्टिकोण को प्रोत्साहित करता है, टाइपोग्राफिक परिवर्तनों में घंटों के बजाय मिनट लगते हैं।

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

लॉन्च करने का तेज़ समय

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

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

एचटीएमएल 5 क्यों?

HTML5 HTML के पिछले संस्करणों की तुलना में आसान है। उदाहरण के लिए दस्तावेज़ प्रकार की घोषणा लें। HTML के पिछले संस्करणों में, डॉक्टरेट कुछ इस तरह देखा:

!DOCTYPE html सार्वजनिक "-//W3C//DTD XHTML 1.1 //EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">

और छह अलग-अलग संस्करण थे। सौभाग्य से HTML5 डॉक्टरेट इस तरह दिखता है:

!DOCTYPE HTML>

गंभीरता से। इतना ही। चौंकाने वाला सरल।

एक मानक HTML पृष्ठ बनाते समय, कई सामान्य तत्व होते हैं, जैसे हेडर, मुख्य सामग्री क्षेत्र, साइडबार और पाद लेख। मुझे यकीन है कि आपने पहले ऐसा कुछ देखा है:

div id="हेडर>div id="nav">/div>/div>div id="main">div id="sidebar">/div>/div>div id="footer">/div>

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

हेडर>एनएवी>/एनएवी>/हेडर>आलेख>एक तरफ>/एक तरफ>/लेख>पाद>/पाद लेख>

उस ओर देखो। कुछ ऐसा जो समझ में आता है।

जादुई डेटा- विशेषता

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

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

दर्ज डेटा-. इसके साथ आप असाइन कर सकते हैं, पास कर सकते हैं, और एक 'अपने खुद के परिभाषित' अर्थ मॉडल में हुक कर सकते हैं। तो, उदाहरण के लिए, आप यह कर सकते हैं:

इनपुट प्रकार = "बटन" डेटा-आईडी = "फेसबुक" डेटारेगियन = "मुख्य" डेटा-घटना = "रजिस्टर"> इनपुट प्रकार = "बटन" डेटा-आईडी = "ट्विटर" डेटारेगियन = "मुख्य" डेटा-इवेंट = "रजिस्टर" ">इनपुट प्रकार = "बटन" डेटा-आईडी = "लिंक्डिन" डेटारेगियन = "मुख्य" डेटा-घटना = "रजिस्टर">

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

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

CSS3 - यह नया फोटोशॉप है

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

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

सबसे पहले, आइए डिफ़ॉल्ट में कुछ समायोजन करें बटन> तथा इनपुट प्रकार = "सबमिट करें"> तत्व मान लें कि आप मानक CSS रीसेट में से किसी एक का उपयोग करते हैं, तो हम बस थोड़ा सा आकार और सांस लेने का कमरा जोड़ देंगे।

/* बटन बटन, जिनके बटन मिल गए।=============================================================================================================================================================================================================================================================================================== **/बटन, इनपुट [टाइप = "सबमिट"] {ऊंचाई: 2.7em; पैडिंग: .4em .7em; लाइन-ऊंचाई: 1.9; }

प्रो टिप: सबमिट किए गए बटन और इनपुट को फिर से स्टाइल करना मुश्किल हो सकता है। मैंने लाइन-ऊंचाई को 1.6 या उससे अधिक समायोजित करके पाया है, आप अतिरिक्त div या अवधि के अंदर की आवश्यकता के हैक से बच सकते हैं बटन> टैग।

अब हमने अपनी बटन समस्या को 'ठीक' कर लिया है, हम a . बना सकते हैं .बीटीएन वर्ग हमें गोल कोनों के साथ एक अच्छा साफ बटन देने के लिए, एक रैखिक ढाल, रूपरेखा, और वह लेटरप्रेस लुक।

.बीटीएन {प्रदर्शन: इनलाइन-ब्लॉक; सीमा: 1px ठोस #d4d4cc; -मोज़-बॉर्डर-त्रिज्या: 4px; -वेबकिट-सीमा-त्रिज्या: 4px; सीमा-त्रिज्या: 4px; पैडिंग: .4em .7em; पृष्ठभूमि: #edeff2; पृष्ठभूमि: -वेबकिट-ग्रेडिएंट (रैखिक, 0% 0%, 0% 100%, से (#fefefe), रंग-रोक (0.55, #edeff2), से (#e4e6e9)); बैकग्राउंड: -मोज़-लीनियर-ग्रेडिएंट (सेंटर टॉप, #fefefe, #edeff2 55%, #e4e6e9); -मोज़-बॉक्स-छाया: आरजीबीए (160,172,187,.7) 0 0 .2em 0; -वेबकिट-बॉक्स-छाया: आरजीबीए (160,172,187,.7) 0 0 .2em 0; बॉक्स-छाया: आरजीबीए (160,172,187,.7) 0 0 .2em 0; रंग: #6c7786; फ़ॉन्ट-आकार: 1.1em; टेक्स्ट-शैडो: #fefefe 1px 0 1px; लाइन-ऊंचाई: 1.375em; कर्सर: सूचक; }

और फिर एक सूक्ष्म चमक के साथ एक अच्छा होवर प्रभाव डब्बे की छाया तरीका:

.btn: होवर, .btn: फोकस {-मोज़-बॉक्स-छाया: #129ceb 0px 0px 2px; -वेबकिट-बॉक्स-छाया: #129ceb 0 0 2px; बॉक्स-छाया: #129ceb 0 0 2px; पृष्ठभूमि: #e6e9eb; बैकग्राउंड: -वेबकिट-ग्रेडिएंट (रैखिक, 0% 0%, 0% 100%, from(#f7f7f7), कलर-स्टॉप(0.55, #f6f6f7), to(#e6e9eb)); बैकग्राउंड: -मोज़-लीनियरग्रेडिएंट (सेंटर टॉप, #f7f7f7, #f6f6f7 55%, #e6e9eb); रंग: #45484b; पाठ-छाया: आरजीबी (255,255,255) 1px 1px 0; सीमा-रंग: #c9c9c0; }

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

दो अन्य विकल्प हैं। एक CSS3 जनरेटर है; कलरज़िला सहित वेब पर कई उपलब्ध हैं। लेकिन अगर आप अपने खेल को थोड़ा आगे बढ़ाना चाहते हैं, तो Sass में गोता लगाने पर विचार करें: Compass के साथ मिलकर, यह एक गॉडसेंड है।

Sass+Compass: जादुई रूप से स्वादिष्ट

आप CSS4 यूनिकॉर्न संस्करण की उम्मीद करना बंद कर सकते हैं। यह यहाँ है और इसे Sass+Compass कहा जाता है। Sass का अर्थ है सिंटेक्टिकली विस्मयकारी स्टाइलशीट: आप CSS3 के सभी पारंपरिक लाभों को वेरिएबल, मिक्सिन, एक्सटेंडर और अन्य अच्छाइयों के अतिरिक्त आनंद के साथ प्राप्त करते हैं।

मैंने हाल ही में ५,०००-लाइन वाली सीएसएस फ़ाइल को फिर से तैयार किया जिसमें नीले रंग की एक ही छाया पर ३० से अधिक विविधताएँ थीं। Sass के साथ, मैंने इस कोड के साथ हर बदलाव को बदल दिया:

रंग: $ नीला;

परिभाषित करके $नीला मेरे में _variables.scss फ़ाइल, मैं एक डिफ़ॉल्ट रंग बना सकता हूं जिसे प्रत्येक सीएसएस या एससीएसएस फ़ाइल संदर्भित कर सकती है। CSS लिखने वाला कोई भी व्यक्ति उपयोग कर सकता है $नीला और आईड्रॉपर का उपयोग करने, हेक्स कोड, या आरजीबी, आरजीबीए या एचएसएल रंग खोजने के बारे में चिंता करने की ज़रूरत नहीं है।

याद रखें कि रैखिक ढाल कोड? कोड की कई पंक्तियाँ लिखने के बजाय, इसके बारे में कैसे:

@ पृष्ठभूमि शामिल करें (रैखिक-ढाल (#b1cfdc, #7a9cac));

Sass और Compass को हैवी लिफ्टिंग करने दें और आपके लिए सही सिंटैक्स तैयार करें: किया। मान लीजिए कि आप किसी रंग का गहरा या हल्का संस्करण चाहते हैं। आप फ़ोटोशॉप में आईड्रॉपर को इधर-उधर कर सकते हैं, या बस Sass में लाइटन/डार्क कमांड का उपयोग कर सकते हैं:

@ पृष्ठभूमि शामिल करें (रैखिक-ढाल (गहरा ($ लिटग्रे, 2%), गहरा ($ ऑफ-व्हाइट, 5%)));

यह 2% डार्क के साथ एक लीनियर ग्रेडिएंट बनाएगा $लाइट-ग्रे और 5% अंधेरा धूमिल सफ़ेद. आवाज! आपको हेक्स या आरजीबी कोड की भी आवश्यकता नहीं है।

jQuery: ओह, हाँ आप कर सकते हैं

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

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

//-- प्रोग्रेसिव रिवील ---//$('.new-number').click(function() {$('.alt-number').fadeIn('fast');});

कुछ और उन्नत खोज रहे हैं? इसके लिए शायद एक प्लग-इन है। बुनियादी व्यवहार आसान हैं और जटिल व्यवहार jQuery के साथ सुलभ हैं।

फ़्रेमवर्क

आज के दो सबसे मजबूत ढांचे फाउंडेशन और बूटस्ट्रैप हैं। अब, इससे पहले कि आप CSS फ्रेमवर्क को खारिज करें, मैं आपसे कुछ पूछना चाहता हूँ। क्या आप jQuery का उपयोग करते हैं? रूबी ऑन रेल्स? Django? सभी ढांचे।

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

दोनों के बीच एक महत्वपूर्ण अंतर: बूटस्ट्रैप CSS प्रीप्रोसेसिंग के लिए LESS सिस्टम पर आधारित है, जबकि फाउंडेशन Sass पर आधारित है। मैं अपनी अतिरिक्त क्षमताओं के कारण Sass to LESS को पसंद करता हूं, लेकिन Sass और LESS दोनों पारंपरिक CSS को टुकड़ों में तोड़ देते हैं।

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

अंतिम विचार

इस पर अधिक नियंत्रण चाहते हैं कि आपका डिज़ाइन आखिरकार कैसा होगा? अधिक प्रक्रियाओं को अपस्ट्रीम कोड में ले जाएं। एचटीएमएल 5 अंत में डीओएम के लिए कुछ समझ लाता है। बकवास करने के लिए अच्छा छुटकारा डॉक्टरेटएस और डिवाइटिस। CSS3 नया फोटोशॉप है: लीनियर ग्रेडिएंट्स, बॉर्डररेडियस और बॉक्स-शैडो FTW! और बूटस्ट्रैप, फाउंडेशन, सैस और jQuery जैसे टूल के साथ, डिज़ाइन को अपस्ट्रीम कोड में ले जाना कभी आसान नहीं रहा।

Creative Bloq पर HTML5 ओवर के 55 अद्भुत उदाहरण खोजें।