أدوات المطورين · محرر HTML WYSIWYG
لماذا "ما تراه" ليس "ما تحصل عليه" تمامًا في HTML
· خلفية
أتش تي أم أل المغلق contenteditable
يشرح السبب الهيكلي WYSIWYG لا يمكنه سوى تقريب النتيجة النهائية على الويب، نظرًا لأن HTML يصف البنية بينما CSS، تحدد الأجهزة والعملاء المظهر، وفكرة WYSIWYM التي انبثقت عنها.
مثالي في المحرر، وخطأ في الصفحة - يفتح مع عدم التطابق المألوف
يمكن أن يبدو الإشعار متوازنًا داخل ToolAcre ومزدحمًا بعد دخول الموقع لأن نفس العناصر تتوافق مع ورقة أنماط مختلفة. إطار iframe المحلي عبارة عن مستند يحتوي على خط خاص به وارتفاع الخط والمساحة المتروكة ونظام الألوان الفاتحة. إنها طريقة عرض فحص، وليست لقطة شاشة لكل وجهة.
WYSIWYG لذلك له معنى محدود على الويب. يمكن للمحرر إظهار سياق العرض الحالي الخاص به بدقة، ولكن "ما تحصل عليه" يتضمن لاحقًا المضيف CSS وعرض الحاوية وإعدادات المتصفح وتحويلات المحتوى غير الموجودة أثناء الصياغة.
HTML يصف البنية، وليس المظهر - ويوضح أن نفس الترميز يتم عرضه بشكل مختلف ضمن أوراق أنماط مختلفة
HTML يسجل بشكل أساسي البنية والعلاقات: العناوين، والفقرات، والقوائم، والاقتباسات، والتأكيد، والتعليمات البرمجية، والروابط. يظهر المظهر عندما تفسر الإعدادات الافتراضية لوكيل المستخدم وأنماط المؤلف تلك العناصر. ToolAcre يزيل النمط المضمن وسمات الفئة، مما يعزز هذا الفصل في الجزء المنسوخ.
يمكن أن يكون نفس h2 كبيرًا في الصفحة الافتراضية، ومضغوطًا في بطاقة التطبيق، ويمكن إعادة تصميمه في الطباعة. ويبقى دورها عنوانا حتى عندما تتغير الأبعاد. يجب على المؤلفين الحكم على ما إذا كانت البنية صحيحة قبل أن يقرروا ما إذا كانت إحدى المعاينة تحتوي على الطباعة المطلوبة.
أوراق أنماط وكيل المستخدم والتسلسل - تغطي أنماط المتصفح الافتراضية وكيف يتجاوز الموقع CSS ما أظهرته معاينة المحرر
تبدأ المتصفحات بقواعد وكيل المستخدم للعناصر، ثم تطبق أنماط الصفحة وتفضيلات المستخدم من خلال التتالي. يضيف مستند معاينة ToolAcre ورقة الأنماط الصغيرة الخاصة به. ولا يقوم باستيراد الرموز المميزة لتصميم الموقع المضيف أو سمة CMS المستقبلية.
عندما تدخل العلامات المنسوخة إلى صفحة أخرى، يمكن أن تتغير هوامشها والمسافات البادئة للقائمة ولون الرابط ومقياس العنوان. لا يتمثل الحل في دمج أنماط المعاينة المؤقتة في الجزء، لأن هذا المحرر يزيلها على أي حال. قم بتطبيق العرض التقديمي الذي تمت مراجعته في الوجهة واختبره هناك.
الأجهزة والوضع المظلم وعملاء البريد الإلكتروني - تصف سياقات العرض العديدة التي سيلبيها المقتطف
تقوم الأجهزة بتغيير العرض المتاح ومقاييس الخط وتكبير المستخدم. يمكن لموضوعات الوضع الداكن تغيير الألوان، بينما يقوم ToolAcre بتثبيت معاينته على مستند فاتح اللون عمدًا. يفرض عملاء البريد الإلكتروني مجموعة أخرى من القيود HTML وCSS التي لا تحاكيها هذه الصفحة أو تتحقق من صحتها.
لا يوجد مصدر مستودع يوفر متصفحًا أو مصفوفة توافق عميل البريد، لذلك تحدد هذه المقالة الأبعاد من الناحية النوعية بدلاً من السلوك العالمي الواعد. تتطلب المطالبات المستجيبة ومطالبات البريد الإلكتروني إجراء اختبارات في بيئات الدعم الفعلية. لا يمكن لإطار iframe في وضع الحماية أن يحل محل هذا الدليل.
WYSIWYM: ما تراه هو ما تعنيه - يقدم فلسفة التحرير الهيكلي التي شاعتها أدوات مثل LyX
تتساءل عقلية التحرير الهيكلي عما يعنيه المحتوى بدلاً من ما إذا كان سطح الصياغة يشبه تمامًا نقطة النهاية. تعبر مستويات العناوين عن التسلسل الهرمي، والقوائم تعبر عن التجميع، والقوة تعبر عن الأهمية، والروابط تعبر عن الوجهات. CSS ينقل هذه المعاني بشكل مرئي للسياق.
يُطلق المصنف على هذا اسم WYSIWYM ويسميه LyX، ولكن لا يتوفر أي مصدر تاريخي هنا. يمكن شرح المفهوم دون تعيين أصول أو سلوك المنتج: قم بتأليف النية الدلالية أولاً، ثم قم بمعاينة العرض التقديمي وضبطه حيث سيتواجد المحتوى فعليًا.
مثال عملي: مقتطف واحد في ثلاثة سياقات - يعرض نفس العلامات ضمن ورقة أنماط افتراضية وموضوع موقع ومعاينة بريد إلكتروني
أنشئ جزءًا واحدًا باستخدام h2 وp وstrong وul ورابط عام. افتح المستند الذي تم تنزيله لرؤية الغلاف الخفيف لـ ToolAcre، والصق الجزء المنسوخ في صفحة اختبار ذات طابع خاص، ثم ضع نسخة معدلة في معاينة بريد إلكتروني معتمدة. حافظ على الصياغة متطابقة.
من المحتمل أن تختلف وجهات النظر الثلاثة بسبب اختلاف أسلوبها وقواعد العميل، بينما يمكن أن تظل بنية المصدر قابلة للمقارنة. إذا كان البريد الإلكتروني يتطلب جداول أو عرضًا تقديميًا مضمنًا، فهذه ترجمة منفصلة؛ ToolAcre يزيل كلاً من الجدول والنمط بدلاً من التظاهر بأن معاينة المتصفح قد تحققت من صحة البريد الوارد.
ما لا يغطيه هذا — CSS تصحيح الأخطاء أو تكوين برامج التحرير لتحميل أنماط الموقع
لا تصحح هذه المقالة أخطاء خصوصية CSS، ولا تقوم بتكوين المحرر باستخدام أنماط الموقع أو التصديق على ترميز البريد الإلكتروني. كما أنها لا تدعي أن المخرجات المنسوخة آمنة للنشر التعسفي غير الموثوق به. المطهر عبارة عن قائمة مسموح بها للمحررين مع مخاطر موثقة للتفاضل المحلل.
تعمل آلية تحديد الوصول للمعاينة على إيقاف البرامج النصية والنماذج والوصول من نفس المصدر داخل ToolAcre. تم نسخ HTML ويترك وضع الحماية هذا. استخدم الصرف الصحي على جانب الوجهة، CSP عند الاقتضاء، واختبارات الاستجابة وفحوصات إمكانية الوصول. يعد عدم التطابق المرئي والأمان مشكلتين منفصلتين حتى عندما يصبح كلاهما مرئيًا بعد النشر.
الخلاصة: قم بتحرير المعنى، والتحقق من العلامة - يلخص النهج وكيف يتيح لك محرر ToolAcre HTML WYSIWYG التركيز على العلامة التي سلمتها بالفعل
قم بتحرير المعنى والتحقق من العلامات قبل مطاردة التكافؤ البصري. ToolAcre يجعل الجزء الدلالي والعرض المحلي متاحين جنبًا إلى جنب، مما يساعد في تحديد ما إذا كان عدم التطابق يأتي من البنية أو من العرض التقديمي الوجهة.
ثم انقل الجزء الذي تمت مراجعته إلى سياقات تمثيلية وقم بقياس النتيجة هناك. يتوقع سير العمل الجيد وجود اختلافات، ويسجل التعديلات المتعمدة ويتجنب الادعاء بأن طريقة عرض محرر واحدة تتنبأ بكل متصفح أو جهاز أو سمة أو صندوق بريد.