डेवलपर टूल · HTML WYSIWYG एडिटर
HTML में 'आप जो देखते हैं' वह कभी भी 'जैसा आप पाते हैं' वैसा क्यों नहीं होता?
· पेजभूमि
HTML CAसएस संतोषप्रद
संरचनात्मक कारण बताता है WYSIWYG केवल वेब पर अंतिम परिणाम का अनुमान लगा सकता है, क्योंकि HTML संरचना का वर्णन करता है जबकि CSS, डिवाइस और क्लाइंट उपस्थिति तय करते हैं, और WYSIWYM विचार जो इससे विकसित हुआ है।
एडिटर में बिल्कुल सही, पेज पर गलत - परिचित बेमेल के साथ खुलता है
एक नोटिस ToolAcre के अंदर संतुलित और साइट में प्रवेश करने के बाद भीड़भाड़ वाला दिख सकता है क्योंकि समान तत्व एक अलग स्टाइलशीट से मिलते हैं। स्थानीय आईफ्रेम अपने स्वयं के फ़ॉन्ट, लाइन ऊंचाई, पैडिंग और हल्के रंग योजना के साथ एक दस्तावेज़ है। यह एक निरीक्षण दृश्य है, प्रत्येक गंतव्य का स्क्रीनशॉट नहीं।
इसलिए WYSIWYG का वेब पर एक सीमित अर्थ है। एडिटर अपने वर्तमान प्रतिपादन संदर्भ को सटीक रूप से दिखा सकता है, लेकिन बाद में "आपको जो मिलता है" में होस्ट CSS, कंटेनर चौड़ाई, ब्राउज़र सेटिंग्स और सामग्री परिवर्तन शामिल होते हैं जो ड्राफ्टिंग के दौरान मौजूद नहीं होते हैं।
HTML संरचना का वर्णन करता है, उपस्थिति का नहीं - बताता है कि एक ही मार्कअप अलग-अलग स्टाइलशीट के तहत अलग-अलग प्रस्तुत करता है
HTML मुख्य रूप से संरचना और संबंधों को रिकॉर्ड करता है: शीर्षक, पैराग्राफ, सूचियां, उद्धरण, जोर, कोड और लिंक। उपस्थिति तब उभरती है जब उपयोगकर्ता-एजेंट डिफ़ॉल्ट और लेखक शैलियाँ उन तत्वों की व्याख्या करती हैं। ToolAcre इनलाइन शैली और वर्ग विशेषताओं को हटा देता है, इसके कॉपी किए गए टुकड़े में अलगाव को मजबूत करता है।
वही h2 डिफॉल्ट पेज में बड़ा हो सकता है, एप्लिकेशन कार्ड में कॉम्पैक्ट हो सकता है और प्रिंट में रीस्टाइल किया जा सकता है। आयाम बदलने पर भी इसकी भूमिका एक शीर्षक बनी रहती है। किसी पूर्वावलोकन में वांछित टाइपोग्राफी है या नहीं, यह तय करने से पहले लेखकों को यह निर्णय लेना चाहिए कि संरचना सही है या नहीं।
उपयोगकर्ता एजेंट स्टाइलशीट और कैस्केड - डिफ़ॉल्ट ब्राउज़र शैलियों को कवर करता है और कैसे साइट CSS एक एडिटर पूर्वावलोकन द्वारा दिखाए गए को ओवरराइड करती है
ब्राउज़र तत्वों के लिए उपयोगकर्ता-एजेंट नियमों से शुरू करते हैं, फिर कैस्केड के माध्यम से पेज शैलियों और उपयोगकर्ता प्राथमिकताओं को लागू करते हैं। ToolAcre का पूर्वावलोकन दस्तावेज़ अपनी छोटी स्टाइलशीट जोड़ता है। यह होस्ट साइट के डिज़ाइन टोकन या भविष्य की CMS थीम को आयात नहीं करता है।
जब कॉपी किया गया मार्कअप दूसरे पेज में प्रवेश करता है, तो उसका पी मार्जिन, सूची इंडेंटेशन, लिंक रंग और हेडिंग स्केल सभी बदल सकते हैं। इसका समाधान अस्थायी पूर्वावलोकन शैलियों को खंड में शामिल करना नहीं है, क्योंकि यह एडिटर उन्हें वैसे भी हटा देता है। समीक्षा की गई प्रस्तुति को गंतव्य पर लागू करें और वहां परीक्षण करें।
डिवाइस, डार्क मोड और ईमेल क्लाइंट - एक स्निपेट को मिलने वाले कई रेंडरिंग संदर्भों का वर्णन करता है
डिवाइस उपलब्ध चौड़ाई, फ़ॉन्ट मेट्रिक्स और उपयोगकर्ता ज़ूम को बदलते हैं। डार्क-मोड थीम रंग बदल सकती हैं, जबकि ToolAcre जानबूझकर अपने पूर्वावलोकन को हल्के दस्तावेज़ में पिन करता है। ईमेल क्लाइंट HTML और CSS बाधाओं का एक और सेट लगाते हैं जिनका यह पेज न तो अनुकरण करता है और न ही सत्यापन करता है।
कोई भी रिपॉजिटरी स्रोत ब्राउज़र या मेल-क्लाइंट संगतता मैट्रिक्स की आपूर्ति नहीं करता है, इसलिए यह आलेख सार्वभौमिक व्यवहार का वादा करने के बजाय गुणात्मक रूप से आयामों का नाम देता है। प्रतिक्रियाशील और ईमेल दावों के लिए वास्तविक समर्थन परिवेश में परीक्षण की आवश्यकता होती है। एक सैंडबॉक्स वाला आईफ्रेम उस साक्ष्य के लिए खड़ा नहीं हो सकता।
WYSIWYM: आप जो देखते हैं वही आपका मतलब है - LyX जैसे टूल द्वारा लोकप्रिय संरचनात्मक-संपादन दर्शन का परिचय देता है
एक संरचनात्मक-संपादन मानसिकता यह पूछती है कि सामग्री का क्या अर्थ है, न कि यह कि क्या प्रारूपण सतह वास्तव में समापन बिंदु से मिलती जुलती है। शीर्षक स्तर पदानुक्रम को व्यक्त करते हैं, सूचियाँ समूहीकरण को व्यक्त करती हैं, मजबूत महत्व को व्यक्त करती हैं और लिंक गंतव्यों को व्यक्त करती हैं। CSS फिर संदर्भ के लिए उन अर्थों को दृश्य रूप से संप्रेषित करता है।
कार्यपुस्तिका इसे WYSIWYM कहती है और LyX नाम देती है, लेकिन यहां कोई ऐतिहासिक स्रोत उपलब्ध नहीं है। अवधारणा को मूल या उत्पाद व्यवहार बताए बिना समझाया जा सकता है: पहले लेखक का अर्थपूर्ण इरादा, फिर प्रस्तुति का पूर्वावलोकन और समायोजन करें जहां सामग्री वास्तव में रहेगी।
व्यावहारिक उदाहरण: तीन संदर्भों में एक स्निपेट - एक डिफ़ॉल्ट स्टाइलशीट, एक साइट थीम और एक ईमेल पूर्वावलोकन के तहत समान मार्कअप दिखाता है
h2, p, मजबूत, ul और एक सार्वजनिक लिंक के साथ एक टुकड़ा बनाएं। ToolAcre के हल्के आवरण को देखने के लिए डाउनलोड किए गए दस्तावेज़ को खोलें, कॉपी किए गए टुकड़े को थीम वाले परीक्षण पेज में चिपकाएँ, और एक स्वीकृत ईमेल पूर्वावलोकन में एक अनुकूलित प्रति रखें। शब्दांकन एक समान रखें.
तीनों दृष्टिकोण संभवतः भिन्न होंगे क्योंकि उनकी शैली और ग्राहक नियम भिन्न हैं, जबकि स्रोत संरचना तुलनीय रह सकती है। यदि ईमेल के लिए तालिकाओं या इनलाइन प्रस्तुति की आवश्यकता होती है, तो वह एक अलग अनुवाद है; ToolAcre यह दिखावा करने के बजाय तालिका और शैली दोनों को हटा देता है कि उसके ब्राउज़र पूर्वावलोकन ने एक इनबॉक्स को मान्य कर दिया है।
इसमें क्या शामिल नहीं है - CSS साइट शैलियों को लोड करने के लिए एडिटर को डीबग करना या कॉन्फ़िगर करना
यह आलेख CSS विशिष्टता को डीबग नहीं करता है, साइट शैलियों के साथ एडिटर को कॉन्फ़िगर नहीं करता है या ईमेल मार्कअप को प्रमाणित नहीं करता है। यह यह भी दावा नहीं करता है कि कॉपी किया गया आउटपुट मनमाने ढंग से अविश्वसनीय प्रकाशन के लिए सुरक्षित है। सैनिटाइज़र एक दस्तावेजी पार्सर-विभेदक जोखिम के साथ एक संकीर्ण एडिटर अनुमति सूची है।
पूर्वावलोकन सैंडबॉक्स ToolAcre के अंदर स्क्रिप्ट, फॉर्म और समान-मूल पहुंच को रोकता है। कॉपी किया गया HTML उस सैंडबॉक्स को छोड़ देता है। जहां उपयुक्त हो, गंतव्य-साइड स्वच्छता, CSP का उपयोग करें, प्रतिक्रियाशील परीक्षण और पहुंच जांच करें। दृश्य बेमेल और सुरक्षा अलग-अलग समस्याएँ हैं, भले ही प्रकाशन के बाद दोनों दृश्यमान हो जाएँ।
टेकअवे: अर्थ संपादित करें, मार्कअप सत्यापित करें - दृष्टिकोण का सारांश देता है और कैसे ToolAcre का HTML WYSIWYG एडिटर आपको उस मार्कअप पर ध्यान केंद्रित करने देता है जिसे आप वास्तव में सौंपते हैं
दृश्य समानता का पीछा करने से पहले अर्थ संपादित करें और मार्कअप सत्यापित करें। ToolAcre सिमेंटिक खंड और स्थानीय प्रतिपादन को एक साथ उपलब्ध कराता है, जो यह पहचानने में मदद करता है कि कोई बेमेल संरचना से आता है या गंतव्य प्रस्तुति से।
फिर समीक्षा किए गए अंश को प्रतिनिधि संदर्भों में ले जाएं और वहां परिणाम को मापें। एक अच्छा वर्कफ़्लो मतभेदों की अपेक्षा करता है, जानबूझकर अनुकूलन रिकॉर्ड करता है और यह दावा करने से बचता है कि एक एडिटर दृश्य प्रत्येक ब्राउज़र, डिवाइस, थीम या इनबॉक्स की भविष्यवाणी करता है।