HTML / CSS लिखने में सीधे डाइविंग-अप बनाम डाइविंग करने का एक फायदा है?


29

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

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

एक बार जब डिजाइन को मंजूरी दे दी गई (इन छवि फ़ाइलों की समीक्षा करके) चरण दो को शुरू किया गया - एचटीएमएल / सीएसएस को जीने के लिए छवि फ़ाइल (एस) को संक्रमित करना।

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

  • कुछ कॉर्पोरेट वातावरण में, ये मॉकअप वेब डिजाइनर के लिए एक स्तरित छवि फ़ाइल (.psd, .png [फायरवर्क्स के लिए]) के रूप में बने रहेंगे और डिजाइनर कभी भी किसी मार्कअप या कोड को लागू करने के बारे में चिंता नहीं करेंगे । "डिज़ाइनर" को कभी भी इस बात की चिंता नहीं करनी चाहिए कि उनके द्वारा बनाए गए इस इमेज मॉकअप को लागू करने के लिए HTML या CSS का निर्माण कैसे किया जाए। छवि फ़ाइलों को "डेवलपर" को सौंप दिया जाता है जो तब HTML / CSS के निर्माण के लिए जिम्मेदार होता है जो छवि फ़ाइल से मेल खाता है।

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

वर्तमान मार्क अप के साथ HTML / CSS के माध्यम से कई वेब डिज़ाइन की जरूरतों को सीधे लागू करना बहुत आसान है और छवि एप्लिकेशन का उपयोग छोटी छवि संपत्ति या तस्वीरों को उत्पन्न करने तक सीमित है जिनकी आवश्यकता हो सकती है। (लाइब्रेरी और / या बूटस्ट्रैप जैसे टेम्पलेट्स ने इस धारणा को और आगे बढ़ाया है।)

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

क्या डिज़ाइन निर्माण के लिए HTML / CSS में सही डाइविंग करने से पहले छवि संपादन एप्लिकेशन में पूर्ण पृष्ठ मॉकअप का निर्माण करने का कोई वास्तविक लाभ है?


मुझे समझ नहीं आता कि यह कैसे "आसान" होगा। सीएसएस ग्रेडिएंट बदलना बहुत आसान है, ग्रेडिएंट के साथ 5+ इमेज फाइल को बदलना आसान से बहुत दूर है। (... और अब यह टिप्पणी एंडी की टिप्पणी को हटाने के कारण जगह से बाहर हो गई है)।
स्कॉट

सॉरी यार मैं इसे reword करने जा रहा था! haha। बस व्यक्तिगत पसंद, मैं वास्तव में कोड के साथ डिजाइन करने के लिए संघर्ष करता हूं। मैं फ़ोटोशॉप में डिज़ाइन करना पसंद करता हूं, और फिर कोडिंग करता हूं। यह सब अलग रखते हुए। मुझे पता है कि कोड में इसे बदलना कितना आसान है, लेकिन PS में समान रूप से लिंक की गई परतें 2 क्लिक और बदली हुई हैं
एंडी होम्स

जवाबों:


17

पूर्ण पृष्ठ मॉकअप के निर्माण का लाभ श्रम विभाजन है।

बड़ी कंपनियों में जिनके पास एक डिजाइनर और एक (फ्रंट एंड) डेवलपर दोनों हैं, डिजाइनर का काम कोड डिजाइन करना है और डेवलपर का काम कोड लिखना है

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

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


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

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


श्रम विभाजन बिल्कुल समझ में आता है और मैंने उस पर विचार किया था। मैं इमेज एडिटिंग के साथ सीधे हाथ में एचटीएमएल हाथ नहीं बनाने के तकनीकी कारणों के बारे में सोच रहा था (बशर्ते कि कोई इमेज एडिटिंग और बेसिक फ्रंट एंड कंस्ट्रक्शन के साथ सहज हो)।
स्कॉट

फ़ोटोशॉप जैसी किसी चीज़ का उपयोग करने के कोई तकनीकी कारण नहीं हैं। यह एक काम / दक्षता का मुद्दा है, न कि तकनीकी एक
Zach Saucier

मुझे अच्छा लगता है कि आपने इसे गैर-व्यक्तिपरक रखा। यह डिजाइनर / डेवलपर को कैसे प्रभावित करता है इसका एक अच्छा ब्रेकडाउन! +1
मोज़ सिप

1
यह भी एक नुकसान है, हालांकि। बस एक वास्तुकार जिसके पास वास्तविक विश्व निर्माण ज्ञान का अभाव है, अक्सर समाधानों को डिजाइन कर सकता है जो निषेधात्मक रूप से महंगा या अव्यवहारिक हैं, इसलिए वे डिजाइनर जो वेब साइटों को डिजाइन कर सकते हैं 'और यह कैसे बनाया जाता है, इसके बारे में कुछ भी नहीं जानते।' इसलिए, मेरा तर्क है कि अक्सर तर्क से लाभ होता है, लेकिन वास्तव में, यह लगभग उतना लाभ नहीं है जितना कि यह है।
DA01

7

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

  1. यदि समय और HTML और CSS में अलग-अलग चीजों को करने की कोशिश कर रहा है, तो डिज़ाइन प्रक्रिया का रचनात्मक हिस्सा ग्रस्त है।

यह सच है अगर कोई समान रूप से कोड को रचनात्मक नहीं मानता है। फ़ोटोशॉप और एचटीएमएल / सीएसएस / जेएस एक कलाकार के लिए काम करने के लिए दोनों माध्यम हैं। बस के रूप में एक रंग लकड़ी का कोयला के रूप में रचनात्मक है, इसलिए फ़ोटोशॉप HTML / सीएसएस / जेएस के रूप में एक माध्यम के रूप में रचनात्मक हो सकता है।

और सीधे HTML / CSS / JS में काम करने का बड़ा लाभ इसकी बहु-आयामीता है। फ़ोटोशॉप, दिन के अंत में, एक सपाट कैनवास है। HTML / CSS / JS तरलता, अंतःक्रिया, एनीमेशन इत्यादि के साथ एक गतिशील कैनवास है।

निचला रेखा, मेरा तर्क है कि कोड इस मामले में अधिक रचनात्मक माध्यम है।

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

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

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

  1. यदि आप कोड को लिखना शुरू करते हैं इससे पहले कि आपके पास यह स्पष्ट दृष्टिकोण हो कि डिज़ाइन कैसा दिखना चाहिए, तो आप कोड का निर्माण करने के तरीके के बारे में जानकारी नहीं देते हैं। जोखिम यह है कि यह कोड को बदतर बना देगा, और डिजाइन के लिए संभावनाओं को सीमित कर देगा।

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

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

काउंटर तर्क यह है कि डिजाइनर केवल उन परिवर्तनों को सीमित कर रहा है जो फ़ोटोशॉप में बनाना आसान है। यह बहुत अच्छा तर्क नहीं है।


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

5

फ़ोटोशॉप मॉकअप न करने का एकमात्र कारण यह है कि डिजाइनर कोड की सीमाओं को नहीं समझता है। आप कभी भी ग्राहक को कुछ एस / एस का मूल्य नहीं देना चाहते हैं।

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


2
और यह न केवल सीमाओं को समझ रहा है, बल्कि क्षमताओं को भी समझ रहा है। कोड बस एक अलग माध्यम है।
DA01

1

डिज़ाइन तत्व को कोड जनरेशन तत्व से अलग रखने के कई कारण हैं, उदाहरण के लिए:

  • यदि समय और HTML और CSS में अलग-अलग चीजों को करने की कोशिश कर रहा है, तो डिज़ाइन प्रक्रिया का रचनात्मक हिस्सा ग्रस्त है।

  • जब डिजाइनर और कोडर अलग-अलग लोग होते हैं, भले ही डिजाइनर HTML और सीएसएस में बहुत अच्छे होते हैं, वे कोडिंग में वास्तव में बहुत अच्छे होते हैं । परिणाम (अलग-अलग डिग्री में) अक्षम कोड होगा जो कि फूला हुआ है और बनाए रखना मुश्किल है।

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

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

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.