لطفا صبر کنید ...

کدهای HTML و CSS برای ساخت صفحات 404

الهام غایب

توسط الهام غایب

دیدگاه ها: 0
بازدید ها : 358
رایگان
هدف ما این است که شما، در بالاترین سطح طراحی و توسعه وب باشید.

ثبت نام کنید

چند بار به صفحات 404 برخورد کرده‌اید؟ صد بار، هزار بار، یک میلیون بار؟ می‌خواهید یک صفحه 404 زیبا در وب سایت خود داشته باشید؟ با لیداوب همراه باشید.


همه ما انسان‌ها باهوش‌تر از یک دهه پیش هستیم و می‌دانیم چگونه بدون دردسر و مشکل در وب گردش کنیم با این حال هنوز هم اشتباه کرده و گاهی این اشتباهات بسیار احمقانه هستند. البته نه وب سایت و نه مروگر، ماشین‌های قدرتمند مطلق نیستند که بتوانید اشتباهات ما را بلافاصله رفع کنند. بنابراین، گاهی مجبور هستیم خودمان با صفحات خطا دست و پنجه نرم کنیم. از میان تمام خطاهایی که می‌تواند در وب رخ دهد، بیشتر از ۳۰ درصد آن‌ها به خطای 404 تعلق دارد.

اگر 404 برای شما معنایی ندارد باید بگوییم که هر کسی که از وسعت دنیای مجازی لذت می‌برد حداقل یک یا دو بار با آن برخورد کرده است و شما هم از این قاعده مستثنی نیستید. صفحه 404 را با عنوان "Nothing Found" یا «صفحه مورد نظر یافت نشد» هم می‌شناسند.

صفحه 404 جزء لاینفک وب سایت

صفحات ۴۰۴ به قدری رایج هستند که گاهی به نظر می‌رسد جزء لاینفک یک وب سایت باشند. این روزها واقعا هم همینطور است. امروزه صفحات ۴۰۴ را به عنوان عامل اصلی هر پروژه وبی می‌دانند. با در نظر گرفتن این واقعیت که این صفحه در میان کاربران بسیار شناخته شده است، برنامه نویسان راهی یافته‌اند تا این صفحه را به نوعی بازی تبدیل کنند تا باعث مخدوش شدن تجربه کاربری نشود.

در نتیجه، این روزها صفحات خطا دیگر مانند گذشته فقط یک صفحه سفید خالی با عنوان «خطا» نیستند. بلکه به صفحات کاربردی، بازی‌گونه و مشارکت‌پذیر تبدیل شده‌اند. اگر شما یکی از آن دسته صاحبان وب سایت هستید که با پتانسیل چنین صفحاتی آشنایی دارید، در این صورت این مقاله به شما کمک خواهد کرد. ما در این پست چندین تکه کد عالی جمع آوری کرده‌ایم که صفحات ۴۰۴ را به زیبایی تصویرگری می‌کنند. این کدها با کمی تغییر می‌توانند به راحتی در پروژه شما به کار رفته و از نا امید شدن کاربران شما جلوگیری کنند. ما انتخاب‌های خود را به دو بخش تقسیم کرده‌ایم. بخش اول شامل کد‌های HTML و CSS است و بخش دوم روش‌هایی را معرفی می‌کند که از جاوا اسکریپت استفاده کرده‌اند.

کدهای HTML و CSS برای ساخت صفحات 404 

اگر شما از آن دسته از افرادی هستید که هنوز هم فکر می‌کنند که HTML و CSS بدون هیچ تخصصی می‌توانند جادو کنند، آماده باشید تا شگفت زده شوید چون نمونه‌های فوق‌العاده‌ای در این بخش گردآوری کرده‌ایم. بیایید ابتدا با صفحه Yeti 404 شروع کنیم که واقعا حیرت انگیز است.

این ایده نه تنها با تصویرگری فوق‌العاده خود از دیگر رقبا متمایز می‌شود بلکه رفتاری داینامیک دارد که باعث می‌شود Yeti چراغ قوه‌ای را روشن و خاموش کند تا بر علامت ۴۰۴ تاکید شود. آیا این روش به قدر کافی موثر نیست که کاربر در این صفحه بماند و نخواهد آن را ترک کند؟

کدهای HTML/CSS برای صفحات ۴۰۴

 

لینک کدها: https://codepen.io/dsenneff/pen/mjZgmN

مثال دیگری که از یک صفحه ۴۰۴ جالب وجود دارد و بدون کمک جاوا اسکریپت ایجاد شده است یک صفحه ۴۰۴ انیمیشنی است، کتاب گمشده توسط والریا. کار والریا واقعا فوق‌العاده است. دیدگاه او از صفحه خطا بسیار هوشمندانه است. این صفحه ترکیبی از روش تصویرگری و پراگماتیسم است که کاربران را با یک سورپرایز عالی رو به رو می‌کند:

کدهای HTML/CSS برای صفحات ۴۰۴

لینک کدها: https://codepen.io/wwwebneko/pen/KrkyLz

طرح دیگر متعلق با پائولو دوزیونی است که ایده مینیمال خود را با مخاطب به اشتراک می‌گذارد. ایده او در مورد «پیاده روی طولانی» بسیار تمیز، شفاف و سرگرم کننده است. در این صفحه به کاربر گفته می‌شود که آن‌ها گم شده‌اند و یک مرد کوچک در پایین صفحه که در حال راه رفتن می‌باشد، کاربر را از نا امیدی نجات می‌دهد:

کدهای HTML/CSS برای صفحات ۴۰۴

لینک کدها: https://codepen.io/Paolo-Duzioni/pen/zPrqQ

اگر این شفافیت، روشنایی و مینیمالیسم با تصور شما از صفحه ۴۰۴ منطبق است، در این صورت نمونه‌های دیگری هم برای شما داریم. صفحه ۴۰۴ که توسط نیکو وان زیل طراحی شده است از لحاظ زیبایی مشابه با صفحه طراحی شده توسط پائولو می‌باشد. البته، این بار آرتیست از امکان ۳ بعدی استفاده می‌کند تا علامت ۴۰۴ را برجسته‌تر کند:

کدهای HTML/CSS برای صفحات ۴۰۴

لینک کدها: https://codepen.io/nicovanzyl/pen/quBJx

اگر نمونه‌های قبلی به نظر شما بی رنگ و بی روح بود در این صورت می‌توانید از نمونه‌های دیگری مثل صفحه ۴۰۴ که توسط سوزی کاساسولا طراحی شده است لذت ببرید. ایده او واقعا هیجان انگیز است، پس زمینه گرادینت و حلقه‌های درخشان، توجه مخاطب را به راحتی جلب می‌کند و علامت ۴۰۴ هم به زیبایی در صفحه تعبیه شده است:

کدهای HTML/CSS برای صفحات ۴۰۴

لینک کدها: https://codepen.io/sus-casasola9210/pen/mLREV

حالا می‌خواهیم کمی جادوی جاوا اسکریپت به نمونه‌ها اضافه کنیم.

کدهای HTML و CSS به همراه جاوا اسکریپت

صفحه ۴۰۴ ستاره شناس که توسط فیلیپ ویتاس طراحی شده است و صفحه ۴۰۴ که توسط کریس ساموئلز ایجاد شده از لحاظ هنری مشابه با پروژه سوزی کاساسولا هستند. گرچه در کد نمونه اول، تمرکز بر تم کهکشانی است، نمونه دوم زیبایی خود را از تم دریایی وام گرفته است. هر دو تصویرگری عالی هستند و هر دو با مهارت به صورت متحرک درآمده‌اند. گرچه این متحرک بودن به سختی مورد توجه قرار می‌گیرد، اما همین کافی است تا این تصویرگری را به سطح بالاتری ببرد:

صفحه ۴۰۴ فضانورد

کدهای HTML/CSS برای صفحات ۴۰۴

لینک کدها: https://codepen.io/FilipVitas/pen/KRRRoY

صفحه ۴۰۴ با تم دریایی

کدهای HTML/CSS برای صفحات ۴۰۴

لینک کدها: https://codepen.io/anycircle/pen/wWKzYQ

صفحه ۴۰۴ متحرک طراحی شده توسط سوزان لی به اندازه دو نمونه قبلی خوش منظره و فانتزی نیست. با این وجود، هنرمندانه طراحی شده است. در این صفحه از اشکال هندسی فوق‌العاده و افکت‌های جالب و کوچک استفاده شده است که باعث می‌شود این ایده بسیار چشم نواز باشد:

کدهای HTML/CSS برای صفحات ۴۰۴

لینک کدها: https://codepen.io/susan8098/pen/xXwjoE

حالا سری به قدیمی‌ها بزنیم، صفحه خطای Retro که توسط استیکس طراحی شده و صفحه ۴۰۴ که توسط میلز پیبلز طراحی شده است. مطمئن هستم بچه‌های دهه ۸۰ و ۹۰ میلادی هر دوی این صحنه‌ها را با نگاه اول می‌شناسند چون بازی‌های محبوب آن دوران بودند که هرگز قدیمی نمی‌شوند.

صفحه خطای Retro صحنه ماجراجویی حماسی به نام Zelda 2 است و ایده پیبلز هیچ توصیفی نیاز ندارد چون اگر شما سوپر ماریو را نمی‌شناسید، اینجا چکار می‌کنید؟

صفحه خطای Retro

کدهای HTML/CSS برای صفحات ۴۰۴

لینک کدها: https://codepen.io/stix/pen/azwdrL

صفحه خطای سوپر ماریو

کدهای HTML/CSS برای صفحات ۴۰۴

لینک کدها: https://codepen.io/milespeebles/pen/rVqGjv

صفحه خطای ۴۰۴ طراحی شده توسط جینو هم در سال ۲۰۱۶ ایجاد شد اما هنوز هم جالب، کاربردی و معنادار است. این طراحی ماهرانه دارای منوی همبرگر و حتی پیغام استفاده از کوکی می‌باشد:

کدهای HTML/CSS برای صفحات ۴۰۴

لینک کدها: https://codepen.io/jinukurian7/pen/ONVNNv

آخرین مورد هم صفحه خطای طراحی شده توسط چیس آلبی است. من معتقد هستم همه می‌توانند در این صفحه تیره و کانسپت مبهم، یک اینترو برای شاهکار برادران دافر پیدا کنند. این صفحه مانند سریال‌های تلویزیونی دارای جهانی وارونه است که هیولایی دیوانه می‌شود و صفحه درخواستی کاربر را می‌بلعد:

کدهای HTML/CSS برای صفحات ۴۰۴

لینک کدها: https://codepen.io/ChaseAllbee/pen/oLaBPV

نتیجه گیری

وضعیت فعلی HTML و CSS به برنامه نویسان کمک می‌کند تا با این کدها جادو کنند. اگر به این جفت جادویی کمی جاوا اسکریپت هم اضافه کنیم، در این صورت نتیجه به دست آمده بسیار هیجان‌انگیزتر خواهد بود. صفحات ۴۰۴ جایی است که می‌توان بیشترین استفاده را از ترکیب HTML ،CSS و جاوا اسکریپت داشت.

مطالعه مقالات بیشتر در لیداوب:

 با سایر مقالات تخصصی و آموزشی ما در زمینه طراحی سایت و سئو در کتابخانه آنلاین لیداوب همراه باشید و با استفاده از آن‌ها بهترین وب سایت‌ها را طراحی کنید و رتبه آن را در  نتایج گوگل ارتقا دهید.

منبع :

0 از 0 رای

 مطالب مرتبط  

در قسمت زیر مطالبی وجود دارند که با مقاله فعلی مرتبط هستند



متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین مطالب

آموزش در لیداوب

از مقالات و ویدیو های آموزشی خودتان کسب درآمد کنید!

جدیدترین سرویس ما برای دوستان متخصص و خوش بیان در زمینه طراحی وب ارائه شد. این سرویس به شما این امکان را می دهد که به آسانی مقالات و یا ویدیو های آموزشی خود را در لیداوب منتشر کنید. فرصت مناسبی است که بدون داشتن وب سایت و یا وبلاگ و مهم تر از همه بدون هزینه، مطالب خود را در لیداوب منتشر کنید و مهم تر از همه با فروش آنها کسب درآمد کنید. همین حالا شروع کنید و این فرصت استثنایی را از دست ندهید.