يمكن أن يكون عارض المستندات وظيفيًا من الناحية التقنية ولا يزال يبدو غير قابل للاستخدام على شاشة ضيقة. أشرطة الأدوات الكثيفة، التحكمات الصغيرة، اللوحات الجانبية الضخمة، والحاويات ذات الأبعاد الثابتة تحول معاينة بسيطة إلى تجربة محبطة بسرعة.
بالنسبة لتطبيقات ASP.NET و .NET المستندة إلى Windows، يوفر Doconut مجموعة تطوير برمجيات (SDK) مدمجة لعرض المستندات التجارية، ملفات PDF، رسومات CAD، ملفات البريد الإلكتروني، والصور. لا يزال تطبيقك يتحكم في التخطيط المحيط، المصادقة، التفويض، التخزين، وسير عمل المستند.
يركز هذا الدليل على تلك التجربة المحيطة: كيفية إعطاء العارض المدمج مساحة كافية، جعل عناصر التحكم في التطبيق مريحة للاستخدام، التعامل مع تغييرات الاتجاه، واختبار المستندات الواقعية دون الاعتماد على شفرة SDK غير الموثقة.
يبدأ التصميم الاستجابي خارج العارض
لا يمكن للعارض استخدام سوى المساحة التي يوفرها تخطيط العنصر الأب. إذا وضع التطبيق العارض داخل بطاقة ضيقة، أو أعطاه عرضًا ثابتًا لسطح المكتب، أو أحاطه بعدة ألواح دائمة، سيظل مساحة المستند محصورة.
ابدأ بثلاث أسئلة:
- ما هي المهمة الأساسية في هذه الصفحة؟
- أي عناصر تحكم في التطبيق يجب أن تظل مرئية أثناء القراءة؟
- أي ألواح ثانوية يمكن طيها أو إخفاؤها خلف زر؟
في صفحة مستند مخصصة، يجب أن يكون العارض عادة العنصر السائد. يمكن أن تظل البيانات الوصفية، التعليقات، الموافقات، وإجراءات سير العمل متاحة دون أخذ مساحة دائمة من المستند.
خطط التخطيط وفقًا للمساحة المتاحة
يجب أن يتبع السلوك الاستجابي المساحة المتاحة للمكوّن، وليس الافتراضات حول اسم جهاز معين.
تخطيط واسع
على مساحة عرض واسعة، قد تظهر الصفحة:
- لوحة مصغرات المستند أو لوحة تنقل
- لوحة الرسم الرئيسية للمستند
- لوحة سير عمل ثانوية للتعليقات أو البيانات الوصفية
- مجموعة كاملة من إجراءات التطبيق
عندما تتحول لوحة ثانوية إلى درج، أضف سلوك الحوار، إدارة التركيز، والوسم القابل للوصول المطلوبين من نظام التصميم الخاص بك.
اجعل عناصر تحكم التطبيق ملائمة للمس
يجب أن تكون عناصر التحكم حول العارض مريحة للتفعيل دون الحاجة إلى حركة مؤشر دقيقة.
تشمل الإرشادات العملية:
- امنح عناصر التحكم التفاعلية مساحة هدف تقارب 44 × 44 بكسل CSS.
- اترك مساحة كافية بين الإجراءات المدمرة وتلك المستخدمة بشكل متكرر.
- لا تعتمد على التحويم (hover) لإظهار معلومات أساسية.
- حافظ على وضوح مؤشرات التركيز لمستخدمي لوحة المفاتيح.
- قدم أسماء قابلة للوصول للأزرار التي تحتوي على أيقونات فقط.
- تجنب وضع عناصر التحكم الحرجة بالقرب من مناطق إيماءات المتصفح أو النظام.
لا تقم بتجاوز الأنماط الداخلية لـ Doconut باستخدام محددات تخمين أو متغيرات CSS غير موثقة. استخدم الموارد الرسمية لإصدار SDK المثبت، وطبق قواعدك الاستجابية على الحاويات والعناصر التي يملكها التطبيق.
اعتبار اللوحات الجانبية مساحة عمل اختيارية
المصغرات، نتائج البحث، التعليقات التوضيحية، البيانات الوصفية، وتاريخ سير العمل قيم، لكن لا ينبغي أن تتنافس جميعها مع المستند في آن واحد.
في التخطيطات المدمجة:
- افتح لوحة جانبية فقط عندما يطلبها المستخدم.
- أعد التركيز إلى الزر الذي فتحها بعد الإغلاق.
- احجز التركيز داخل اللوحات النمطية حيثما كان ذلك مناسبًا.
- أعطِ اللوحة عنوانًا واضحًا وإجراء إغلاق.
- حافظ على موقع المستند الحالي عندما تُفتح أو تُغلق اللوحة.
إذا كان العارض يوفر لوحات خاصة به، اختبر سلوكها الاستجابي الموثق قبل إضافة نظام تنقل على مستوى التطبيق حولها.
حافظ على سرعة مساحة عمل المستند
التصميم الاستجابي ليس بصريًا فقط. يمكن للمستندات الكبيرة أن تكشف عن قيود الذاكرة، عرض النطاق الترددي، والرسوميات، خاصةً عندما تحتوي الصفحة أيضًا على لوحات معلومات أو رسوم متحركة معقدة.
تقليل العمل المتنافس
أوقف الرسوم المتحركة الزخرفية أثناء قراءة المستخدم، تجنب المؤثرات المكلفة حول العارض، وأزل المراقبين أو مستمعي الأحداث غير الضروريين.
حجز مساحة التخطيط
امنح مضيف العارض ارتفاعًا ثابتًا قبل التحميل. يمنع هذا التحولات الكبيرة في التخطيط ويقلل من احتمال نقر المستخدم للعنصر الخطأ.
تحميل الميزات الثانوية عمدًا
التعليقات، سجل التدقيق، ولوحات البيانات الوصفية الكبيرة لا تحتاج دائمًا إلى التحميل مع الصفحة الأولى للمستند. أخرِجها حتى يفتح المستخدم اللوحة ذات الصلة عندما يتوافق ذلك مع سير عملك.
اختبار ملفات تمثيلية
استخدم ملفات PDF طويلة، جداول بيانات عريضة، رسومات CAD مفصلة، صور كبيرة، ومستندات بخطوط غير عادية. لا يمكن لملف عينة صغير أن يكشف حدود تجربة الإنتاج.
حافظ على التحكم في الوصول على الخادم
العرض الاستجابي لا يغيّر من مسؤوليات أمان التطبيق. يجب أن يمر كل طلب مستند عبر المصادقة وتفويض المستند المحدد.
في تطبيقات ASP.NET Core، يمكن للآليات القياسية مثل middleware المصادقة، السياسات، المطالبات، السمة [Authorize]، والتفويض القائم على الموارد حماية مسار الخادم الذي يحل المستند.
يجب على التطبيق:
- استخدام معرفات مستندات مُولدة من الخادم.
- التحقق من أن المستخدم الحالي يمكنه الوصول إلى المستند المطلوب.
- إبقاء بيانات اعتماد التخزين والمسارات غير المقيدة بعيدًا عن العميل.
- تنقية الأخطاء المعروضة في صفحة العارض.
- تطبيق قواعد احتفاظ صريحة للملفات الأصلية والمؤقتة.
- تجنب تسجيل محتوى المستند، الأسرار، أو عناوين URL الحساسة.
إخفاء إجراءات التحميل أو الطباعة أو قائمة السياق قد يدعم سير العمل المقصود، لكنه لا يحل محل التفويض على الخادم ولا يمكنه منع كل أشكال الالتقاط بعد ظهور المحتوى.
دمج Doconut في التجربة الاستجابية
يوفر Doconut طبقة عرض المستندات المدمجة، بينما يوفر التطبيق القشرة الاستجابية وسير العمل التجاري.
تسلسل تنفيذ منطقي هو:
- تأكيد الصيغ المطلوبة وميزات العارض.
- دمج حزمة Doconut المدعومة لتطبيق .NET الخاص بك.
- حماية دقة المستند بتفويض على مستوى الخادم.
- وضع العارض في حاوية مضيفة سائلة مملوكة للتطبيق.
- تصميم حالات مدمجة لأشرطة أدوات التطبيق واللوحات الثانوية.
- اختبار تغيير الحجم، الاتجاه، التركيز، التحميل، وسلوك الأخطاء.
- التحقق من النتيجة باستخدام مستندات شبيهة بالإنتاج وجلسات متزامنة.
راجع صفحة منتج Doconut Viewer للحصول على معلومات المنتج الحالية. استخدم صفحة التحميل والوثائق الرسمية لتثبيت وإرشادات دمج محددة بالإصدار بدلاً من نسخ أمثلة SDK غير موثقة من مشاركات الطرف الثالث.
قائمة مراجعة عارض استجابي
التخطيط
- يحصل العارض على أكبر حصة مفيدة من الصفحة.
- لا تفرض العرضات الثابتة تمريرًا أفقيًا.
- تنكمش اللوحات الثانوية بشكل نظيف.
- يبقى التخطيط قابلًا للاستخدام عندما يكون ارتفاع مساحة العرض محدودًا.
- تحتفظ حالات التحميل والخطأ بمساحة مناسبة.
التفاعل
- تمتلك عناصر تحكم التطبيق أحجام هدف مريحة.
- لا تعتمد الإجراءات الأساسية على التحويم.
- تحتوي عناصر التحكم التي لا تحمل سوى أيقونات على أسماء قابلة للوصول.
- يبقى التركيز مرئيًا ويتبع ترتيبًا منطقيًا.
- تعيد الأدراج والحوار التركيز بشكل صحيح.
المستندات
- تظل ملفات PDF الكبيرة قابلة للتنقل.
- يمكن فحص جداول البيانات العريضة دون كسر تخطيط الصفحة.
- تحتفظ الرسومات المفصلة بتكبير وتدوير قابل للاستخدام.
- لا تتجاوز أسماء الملفات الطويلة ورسائل الأخطاء حدود العرض.
- لا يؤدي تغيير حجم التخطيط إلى إعادة تحميل المستند دون ضرورة.
الأمان والعمليات
- يصرح الخادم بكل طلب مستند.
- تبقى تفاصيل التخزين خاصة.
- يتم توثيق احتفاظ الملفات والبيانات المؤقتة.
- تستبعد الأخطاء والسجلات المعلومات الحساسة.
- يتم اختبار حدود الموارد وسلوك الجلسات المتزامنة.
أسئلة شائعة
هل يجب على التطبيق الحفاظ على صفحات عارض منفصلة للهواتف وأجهزة الكمبيوتر؟
عادةً لا. صفحة استجابية واحدة أسهل في الصيانة. غير التخطيط وفقًا للمساحة المتاحة وكشف العناصر الثانوية تدريجيًا.
هل يمكن للتطبيق تجاوز CSS الداخلي للعارض؟
تجنب المحددات والمتغيرات غير الموثقة. صمّم حاوية المضيف وعناصر تحكم تطبيقك. استخدم نقاط التخصيص الموثقة فقط لإصدار Doconut الذي تنشره.
هل يجب إخفاء أزرار التحميل والطباعة في التخطيطات المدمجة؟
هذا قرار منتج وليس حدًا أمنيًا. إذا كان الإجراء مسموحًا لكنه لا يتناسب مع المساحة، ضعه في قائمة فائضة قابلة للوصول. إذا لم يكن مسموحًا، فطبق تلك السياسة على الخادم.
كيف يجب اختبار المستندات الكبيرة؟
أنشئ مجموعة اختبار منقاة تعكس عدد الصفحات الفعلي، أحجام الملفات، الخطوط، الرسومات، وجداول البيانات. كرر الاختبارات بعد تغييرات SDK أو .NET أو خادم Windows أو التخطيط.
الخلاصة
تبدأ تجربة المستندات المتنقلة القوية بحاوية سائلة، تخطيط يضع المستند في المقام الأول، عناصر تحكم مريحة، ألواح جانبية اختيارية، سلوك تغيير حجم متوقع، وتفويض على مستوى الخادم.
يمكن لـ Doconut توفير قدرة العرض داخل تطبيق .NET المستند إلى Windows الخاص بك. ثم يمكن لفريقك التركيز على القشرة الاستجابية للتطبيق، قواعد الأمان، وسير العمل الذي يجعل العارض يبدو جزءًا طبيعيًا من المنتج.