8 مقتطفات من CSS و JS لإنشاء صفحات 403 مذهلة

اعتاد مصممو الويب على تحويل الأخطاء إلى فرص. لا يخفى على أحد أن رمز حالة HTTP 404 الأكثر شيوعًا (والذي يمكن التعرف عليه بشكل مدهش) ، والمعروف أيضًا باسم "لم يتم العثور عليه" ، قد أجبره المطورون على تحقيق فوائد للمشروع. في الماضي أخافت المستخدمين ودمرت الانطباع العام وكانت كابوسًا للمطورين. أراد الجميع أن يختفي مرة واحدة وإلى الأبد.

اليوم ، هو أحد التفاصيل الأساسية لموقع الويب. يحتوي WordPress حتى على قالب مخصص لذلك. تعد "صفحة 404" عنصرًا لا يتجزأ من تجربة المستخدم. في معظم الحالات ، لا يقتصر الأمر على التصميم الجميل فحسب ، بل يشمل أيضًا موضوعًا يهدف إلى المساهمة في جمالية موقع الويب بالكامل.

إلى جانب التصميم المدروس جيدًا والتفاعلات وحتى الرسوم المتحركة ، فإنه يتضمن روابط وملاذ مفيدة تساعد المستخدمين المفقودين على العودة إلى المسار الصحيح. ومع ذلك ، فإن الخطأ "404" في تصميم الويب يشبه محبو موسيقى الجاز في العالم الحقيقي: فهم لا يزالون يلفتون نظرنا بنظاراتهم الفخمة والقمصان واللحى "القديمة" ولكنهم ليسوا شيئًا جديدًا بالنسبة لنا. أما بالنسبة للخطأ "403" ، فهذه قصة مختلفة. إنه ليس شائعًا مثل أقرب أقربائه ، لكنه لا يزال يحدث وليس مرة واحدة في القمر الأزرق.

للخلفية فقط ، رمز حالة HTTP 403 ، المعروف أيضًا باسم "403 محظور" ، يعني أنه ليس لديك إذن للوصول إلى الصفحة. يمكن أن تختلف الأسباب ، بدءًا من أذونات المجلد غير المناسبة وتنتهي بمتطلبات عادية تتعلق ببيانات اعتماد تسجيل الدخول. ومع ذلك ، فإن القاعدة العامة تنص على أن أي خطأ هو فرصة لإحداث تحسينات. فلماذا لا نحول "صفحة 403" الدمية إلى مكان يخدم نفس واجب "صفحة 404"؟

لنفكر في أن العشرات من الشخصيات الرائعة تتعامل مع هذا النوع من الأخطاء. فهي لا تخدم فقط كمصدر للإلهام ولكنها أيضًا مصدر للحلول الجاهزة للاستخدام.

لا يحق لك المرور

"لن تمر" - قالها مرة واحدة من أقوى السحرة ذوي اللحية البيضاء في العالم الخيالي (آمل أن يغفر لي كل محبي دمبلدور على هذا). تتلاءم الجملة الأخيرة من Gandalf the Gray (ملاحظة Gray ، وليس White) تمامًا مع السياق هنا. ويظهر نوح رودنبيك ، وفان هاغن ، وجيهي هذا في الممارسة العملية. مقتطفاتهم من الشفرات مشبعة بروح وسحر رواية "الهوبيت". بينما أعاد الفنانان الأولان إنشاء قاندالف مع موظفيه ، ألمح الأخير للتو إلى المشهد ، ولكن بنجاح كبير.

هودور 403

إذا لم تكن الزخارف من الروايات الخيالية الموضحة أعلاه كافية لك ، فعليك أن تضع عينيك على مقتطف الشفرة هذا من Yasio. مفاجأة مفاجئة ، لقد استوحى إلهامه من سلسلة روايات الخيال لجورج آر آر مارتن. لقد توصل إلى عمل يسمى HODOR 403. أعتقد أن هذا الحل بالنسبة للأغلبية لا يحتاج إلى شرح. بالنسبة للباقي ، أوصي بالتبديل إلى HBO ومعرفة سبب انسجام هذه الشخصية الخيالية بشكل جيد مع هذا النوع من الأخطاء.

استخدام الرسوم التوضيحية والرسوم المتحركة

استرشدت الحلول الأخرى في قائمتنا بفكرة أن "403" يرمز إلى منطقة محظورة بحيث تم إعادة إنشاء الرسوم التوضيحية المتحركة والثابتة CSS مع وضع هذه الفكرة في الاعتبار.

الخطأ 403 - ممنوع بواسطة Aimie يصور مشهدًا كلاسيكيًا من الحكاية الخيالية. من المؤكد أن الخفافيش المتحركة ومنزل الساحرة والأشجار العارية والطباعة المخيفة التي ظهرت في ساعات الظلام تفعل الحيلة هنا.

403 محظور بواسطة Dylan و 403 Forbidden بواسطة Visual Composer لهما بعض الجاذبية الفريدة من العصور الوسطى. "أغلقوا البوابات": المشاريع تستدعي هذه الجمعيات. الأول يتميز بباب بوابة الحرس الخشبي الكلاسيكي الذي يغلق أمام عينيك ؛ يذهب الثاني أيضًا إلى موضوع بوابة الحراسة ويصور آلية مع التروس والسلاسل التي تكشف عن العلامة المحظورة.

يتم تقديم رؤية أرتورو ويباوا للمنطقة المحرمة من خلال رسم CSS رائع ومفصل للغاية وحتى متحرك جزئيًا للصينيين الشهير "المدينة الأرجوانية المحرمة" ، المعروف أيضًا باسم متحف القصر في الوقت الحاضر.

إنه يراقبك

تتميز 403 Forbidden Page by Mariana بشخصية غريبة الأطوار تشبه الوحوش والتي ، بفضل تأثير إدراك الاتجاه ، تتبع مؤشر الماوس في كل مكان. إنه يعيد خلق الشعور بالمراقبة طوال الوقت. كما أنه يقلد حارسًا خرافيًا خياليًا لا يسمح للمضي قدمًا. يبدو المشروع ممتعًا على الرغم من المظهر "الخطير" للتميمة.

كن مثابرا

يقدم Gabriele Corti أيضًا رؤية لصفحة الخطأ "403". يصور مشروعه "المثابرة مفتاح" عملية كاملة لرفض الوصول في البداية ومنحه بعد إجراء المستخدم الصحيح. تتضمن الإجراءات الصحيحة إدخال مفتاح في ثقب المفتاح ومع ذلك ، يمكنك دائمًا استخدام هذا المفهوم كقاعدة لبعض الإجراءات المتقدمة مثل إدخال تسجيل الدخول وكلمة المرور.

ابقائها بسيطة

403 بواسطة lsgrrd هو عرض مفرط في التبسيط على "403 صفحة" التي لها بالتأكيد الحق في الوجود. إنه ضئيل ولكنه مباشر في صلب الموضوع. تتمتع بجودة رقمية معينة تنضح بالحيوية التقنية المتأصلة في مجال الكمبيوتر. ينتج عن المؤشر الوامض في النهاية جنبًا إلى جنب مع الطباعة الرقمية تأثير رائع. الحل نظيف وأنيق ومباشر.

هل أنت على القائمة؟

سننهي مجموعتنا بالمشروع الذي صممه كاسيدي ويليامز. على عكس الغالبية الموضحة هنا ، فإن هذا الحل هو استعارة من العالم الحقيقي توضح الموقف النموذجي في أي ملهى ليلي شهير. الحارس هو قلب وروح مقتطف الشفرة هذا. تم تحريك الشخصية جزئيًا لجعل كل شيء يبدو نابضًا بالحياة.

فرصة أخرى لجذب المستخدمين

والحق يقال ، إن "خطأ 403" ليس منتشرًا مثل "خطأ 404" ، كما أنه ليس شائعًا ويمكن التعرف عليه. ومع ذلك ، فإنه لا يزال موجودًا ويحدث مرة بعد مرة. يؤدي ذلك إلى إحداث فجوة في موقع الويب يمكنها كسر تجربة المستخدم بالكامل. لذا اغتنم الفرصة وحوّلها إلى جزء صالح من المشروع. سوف تكسب بلا شك بعض الزوار الجدد وستمنعك من فقدان الزوار القدامى.