लेआउट स्वचालन

यह ps को html स्वचालन को लागू करने के दृष्टिकोण पर एक नोट है।

मुख्य कार्य जिसे psd से html तंत्र को हल करना चाहिए, वह डिज़ाइनर के काम को प्रभावित किए बिना लेआउट पर खर्च किए गए समय को कम करना है (उदाहरण के लिए, लेआउट परतों के नाम में विशेष वाक्यविन्यास को प्रस्तुत करना, जैसा कि psd2htmlconverter, आदि पर किया जाता है)।

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

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

और महत्वपूर्ण कार्यों में से तीसरा है हाथ से कोड लिखने की प्रक्रिया को कम करना, यदि संभव हो तो, मैनुअल कोड लेखन की पूर्ण अनुपस्थिति।

शुरुआत के लिए, संक्षेप में psd के बारे में

यह समझने के लिए कि स्वचालित क्या हो सकता है और क्या नहीं, आपको यह समझने की आवश्यकता है कि PSD फ़ाइल से क्या जानकारी प्राप्त की जा सकती है।

PSD फ़ाइल में परतों के बारे में जानकारी होती है: परतों और फ़ोल्डरों की एक सूची, प्रत्येक परत और फ़ोल्डर का घोंसला बनाना, परत प्रभाव, परत का प्रकार (नियमित, पाठ इत्यादि) और यदि यह एक छवि परत है, तो छवि स्वयं समाहित है।

Psd फ़ाइल से पढ़े जाने वाले लेयर इफेक्ट्स को Layer Style मेनू (नीचे दी गई छवि देखें) का उपयोग करके देखा जा सकता है; पाठ परतों के लिए, पाठ जोड़ा जाता है जिसमें परत होती है, और छवियों के साथ परतों के लिए, इस परत से जुड़ी psd फ़ाइल में संग्रहीत छवि का लिंक जोड़ा जाता है।

योजना

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



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

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

इंटरफ़ेस

इंटरफ़ेस को हल करने का मुख्य कार्य लेआउट प्रक्रिया का दृश्य है। लेआउट प्रक्रिया को 3 प्रकारों में विभाजित किया जा सकता है:

1. स्वचालित। लेआउट को लोड करने के समय, सिस्टम स्वचालित रूप से जितना संभव हो उतना HTML में psd को रूपांतरित करता है।
2. ड्रैग एन ड्रॉप विधि। Psd-Layout की चयनित परतों और फ़ोल्डरों को DOM ट्री के क्षेत्र में खींचकर, उन्हें html / css में परिवर्तित किया जा सकता है।
3. हाथ से बना हुआ लेआउट। हमेशा स्वचालन और अर्ध-स्वचालन 100% कुशल नहीं हो सकता है, इसलिए आपको DOM ट्री में तत्वों को मैन्युअल रूप से जोड़ने / संपादित करने या css जोड़ने की क्षमता की आवश्यकता होती है।

इस समस्या को हल करने का प्रयास ऊपर की छवि में दिखाया गया है।

स्क्रीन को 4 भागों में विभाजित किया गया है: लेआउट का प्रदर्शन क्षेत्र, लेआउट परतों का प्रदर्शन क्षेत्र, दस्तावेज़ का DOM ट्री और तत्व की CSS शैलियाँ।

लेआउट प्रदर्शन क्षेत्र

स्क्रीन के बाईं ओर बड़ा क्षेत्र। इस क्षेत्र में, एक PSD लेआउट प्रदर्शित किया जाता है, जिसकी परतें PNG छवियों में बदल जाती हैं। यदि आवश्यक हो, तो लेआउट के परिणाम को देखें, पीएसडी-लेआउट के प्रदर्शन को उत्पन्न परिणाम पर स्विच करें।

खींचें n ड्रॉप : डोम ट्री क्षेत्र में एक परत (या चयनित परतों का एक समूह) को स्थानांतरित करते समय, ट्री हाउस और सीएसएस शैलियों में तत्व बनाए जाते हैं, जिसके आधार पर चयनित परतों के प्रभाव होते हैं।

माउसओवर : लेआउट लेयर्स, psd लेआउट लेयर्स की लिस्ट में तत्व और DOM ट्री एरिया में शब्द चलते समय DOM ट्री में बनाए गए टैग हाइलाइट किए जाते हैं।

स्क्रीन के दाईं ओर लेआउट लेयर्स के साथ काम करने के लिए 3 सेल हैं, पेज का DOM ट्री और जेनरेट किया गया css स्टाइल:

Psd लेआउट परतों की सूची वाला क्षेत्र

स्क्रीन के दाईं ओर 2 कॉलम का लेफ्ट। घोंसले के शिकार के लिए फ़ोल्डरों / परतों की एक सूची इंडेंट के साथ दिखाई जाती है और एक परत या फ़ोल्डर को छिपाने / दिखाने की क्षमता होती है (लेयर्स लेआउट लेआउट क्षेत्र में छिपे / प्रदर्शित होते हैं)।

खींचें n ड्रॉप : डोम ट्री क्षेत्र में एक परत (या चयनित परतों का एक समूह) को स्थानांतरित करते समय, ट्री हाउस और सीएसएस शैलियों में तत्व बनाए जाते हैं, जिसके आधार पर चयनित परतों के प्रभाव होते हैं।

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

डोम ट्री क्षेत्र

स्क्रीन के दाईं ओर 2 कॉलम का अधिकार। DOM ट्री तत्वों और घोंसले के शिकार की एक सूची दिखाई गई है।

ड्रैग एन ड्रॉप : जब एक लेयर चलती है, तो DOM ट्री में चयनित तत्व की नेस्टिंग और स्थिति बदल जाती है।

माउसओवर : psd लेआउट क्षेत्र में परतें और psd लेआउट परत सूची में तत्वों को हाइलाइट किया गया है, यदि तत्व लेआउट क्षेत्रों से एन ड्रॉप द्वारा ड्रैग द्वारा बनाया गया था।

ओनक्लिक : सीएसएस शैलियों को दिखाता है जो एक तत्व को सौंपा गया है।

आप सूची में तत्वों की संख्या को बदल सकते हैं (मौजूदा वाले को हटा सकते हैं या नए जोड़ सकते हैं), तत्वों की स्थिति और घोंसले को बदल सकते हैं।

सीएसएस शैलियाँ क्षेत्र

निचला सेल स्क्रीन के निचले दाएं हिस्से में है। FF, या Google Chrome के लिए डेवलपर पैनल के लिए ला फायरबग प्रदर्शित करें और कार्यक्षमता करें: नई शैली जोड़ें या मौजूदा लोगों को संपादित करें / हटाएं।

अतिरिक्त कार्यक्षमता

प्रत्येक प्रोजेक्ट के लिए, जेनरेट किए गए html / css को स्टोर करने के लिए एक github पर एक रिपॉजिटरी बनाने की योजना है।

कोड में स्वचालित रूप से ओपन जस-स्क्रिप्ट्स को एम्बेड करने के लिए मॉड्यूल बनाना, जैसे कि गैलरी (लाइटबॉक्स, फैंसीबॉक्स), स्लाइडर, टैब्लेट, आदि।