۷ روش جالب برای نمایش محتوا در یک وب سایت

گزیده ای از مقالات موجود در سایت می تواند نقش مهمی در تجربه کاربری سایت شما داشته باشد. آنها طعم و مزه محتوایی که در مقاله شما وجود دارد را به کاربران نشان میدهند و آنها را تشویق به کلیک بر روی مقاله و مشاهده ی کامل آن میکنند.

بسیاری از سیستم های مدیریت محتوا، مانند وردپرس ، توانایی ایجاد گزیده های دلخواه (یا نمایش تعدادی از کلمات اول یک مقاله) را به درستی در هسته خود تثبیت کرده اند.

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

تب های گزیده های مطالب

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

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

اسکرول تا زمان رسیدن به محتوای کامل مقاله

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

استفاده از گزیده های مطالب در کارت ها

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

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

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

نمایش محتوای گزیده از طریق CSS(روش سنتی)

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

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

استفاده از افکت ها برای نمایش گزیده ای از مطالب

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

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

 

منبع: لرن سورس

استفاده از افکت های مکان نمای موس در طراحی سایت

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

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

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

Yukie Nail New York

در مورد سایت Yukie Nail New York ، مکان نما نه تنها به شکل یک حلقه توخالی است، بلکه به فرصتی برای تعامل با بوم در صفحه تبدیل شده است. با جابجایی مکان نما باعث می شود موج های زیبایی در  در صفحه پدیدار میشود که به طور قابل توجهی باعث میشود آب، واقعی به نظر برسد. پس چرا منتظر هستید به سایت Yukie Nail New York کنید و خودتان امتحان کنید.

Flixxo

Flixxo یک وب سایت اختصاصی برای پخش ویدئو است. در اینجا، مکان نمای موس شامل دایره ای زرد رنگ است که شامل مثلثی با لبه های صاف است  و به ما دکمه "Play" را یاد آوری میکند. از این اشکال برای زیبا کردن مکان نما و مرتبط کردن آن با سایت پخش ویدئو استفاده مناسبی شده است.

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

BLKOUT

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

Niccolo Miranda / Sarto Bikes

در اولین مثال یعنی Niccolo Miranda ، نشانگر ماوس بازدید کننده ها را در سراسر رابط تاریک هدایت می کند و مانند رقص نور خورشید به نظر می رسد. مکان نمای این سایت نیز خلاقانه طراحی شده است.

تیم پشت Sarto Bikes از دو نوع نما برای مکان نمای سایت خود استفاده میکنند. وقتی صفحه میشود به همراه مکان نمای موس یک لوزی کوچک حرکت میکند که زمانی که بر روی لینک و یا دکمه ای در سایت قرار میگیرد تبدیل به یک دایره بزرگ سفید رنگ میشود. زمانی که الماس سفید رنگ بر روی متون سفید قرار میگرید آنها را به رنگ مشکی نشان میدهد.

مکان نما به عنوان یک دکور برای زیبایی

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

Ambitious Zevenbergen / Denton Design / Icone

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

در وب سایت Denton Design، مکان نما دارای شکل تخم مرغ است که به خوبی با تصویر بزرگ پرنده ای که در جلوی آن قرار دارد، سازگاری پیدا کرده است. همچنین، رنگ آمیزی با طرح کلی همخوانی دارد.

تیم پشت Icone از این یک حلقه زرد رنگ برای حرکت به دنبال مکان نمای موس استفاده میکند. طراحی توخالی حلقه مکان نما همراه با گرافیک کلی سایت و تایپوگرافی همگی نشان دهنده یک هماهنگی خوب در طراحی است.

منبع: لرن سورس

۵ اصل کلیدی برای یک وب سایت کاربر پسند

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

عملکرد ها و قابلیت های وب سایت شما باید سریع و راحت باشد. در این مقاله به پنج اصل اساسی قابلیت استفاده (usability) در یک وب‌سایت اشاره خواهیم کرد. این اصول به شما کمک می کند وبسایتی کاربرپسند تر طراحی کنید و زمان ماندن کاربران در وبسایت تان را افزایش دهید. یکی از فاکتورهای مهم برای هر وب سایتی مقدار bounce rate است که با استفاده از این اصول می‌توانید آن را تقویت کنید.

قابلیت استفاده و یا usability در یک وب سایت به چه معناست؟

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

جاکوب نیلسن یک پیشکسوت و مشاور در امور رایانه، بنیانگذار شرکت Nielsen Norman@ و دارای مدرک دکترا در مورد ارتباط بین انسان و کامپیوتر ، عبارت قابلیت استفاده را به شکل زیر بیان می کند :

"قابلیت استفاده یک مشخصه کیفی است که آسانی استفاده از رابط کاربری را ارزیابی می کند. واژه ای usability همچنین به روش هایی برای بهبود استفاده آسان در طول فرآیند طراحی اشاره دارد."

به منظور دستیابی به وب سایتی که کاربر پسند باشد، وب سایت شما باید با اهداف کاربرانتان مرتبط باشد، همیشه در ذهن خودتان مرور کنید که کاربران شما چه کسانی هستند و چه اهدافی دارند؟ آیا بعد از بازدید از وبسایت شما به همه چیزی که نیاز داشته اند، رسیده اند؟ شناخت مخاطبین هدف و الگوهای رفتاری آنها از اهمیت بالایی برخوردار است.

چرا قابلیت استفاده تا این حد اهمیت دارد؟

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

چطور می توان یک وب سایت کاربر پسند طراحی کرد؟

1.ناوبری آسان

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

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

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

2.استایلی یکپارچه برای اپلیکیشن و یا وبسایت خود داشته باشید

غیر ممکن است که کاربران ساختار وب سایت شما را به ذهن خود بسپارند، برای همین توصیه می شود که همه چیز را تا حد ممکن مرتب سازی کنید تا کاربر بیشترین راحتی را داشته باشد. برای انجام این کار می توانید یک guideline برای انطباق ساختار وب سایت و یا اپلیکیشن خود ایجاد کنید. رنگ ها و استایل ها باید قابل تشخیص باشند و جریان وب سایت شما برای استفاده باید آسان باشد.

3.از استانداردهای صنعت طراحی پیروی کنید

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

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

4.از تصاویر در وب سایت خود استفاده کنید

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

علاوه بر  اینکه تصاویر می‌توانند در جلب توجه کاربران مفید باشند، آنها در نشان دادن تم وب سایت و موضوع آن نیز از اهمیت ویژه ای برخوردارند.

5. نسخه موبایل

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

طبق آمار تعداد کاربران تلفن همراه در سراسر جهان از سال ۲۰۱۰ تا سال ۲۰۲۰ تقریبا به دو برابر میرسد. میزان استفاده از تلفن همراه در سال ۲۰۲۰ به 9,038 میلیون خواهد رسید. با این حال در تهیه نسخه موبایل برای وب سایت خود نکاتی وجود دارد که بهتر است آنها را رعایت کنید.

برای شروع بهتر است از قرار دادن متون زیاد در یک صفحه اجتناب کنید. بهتر است متون را به قسمت های کوچکی که با کلمه "ادامه مطلب..." مشخص شده است تقسیم کنید اندازه فونت در نسخه موبایل نیز اهمیت ویژه ای دارد این مقدار باید حدود ۱۶ پیکسل باشد. این مقدار برای تیتر ها باید بیشتر باشد. برای خوانایی بهتر مقالات بهتر است بین خطوط از فضای بیشتری استفاده کنید.

در انتها همه چیز را تست کنید

در صورتی که دوستان و همکاران شما بدون هیچ مشکلی از وب سایت شما استفاده می کنند این بدان معنا نیست که کاربران شما هم در کار کردن با وب سایت تان به هیچ مشکلی برخورد نکنند. ما وب سایت ها را برای مشتریان ایجاد می کنیم نه برای خودمان پس باید همه چیز را از نظر کاربران تست کنیم.

نتیجه

در این مقاله به پنج اصل اساسی برای تقویت قابلیت استفاده در وب سایت اشاره کردیم. این اصول به شما کمک می کنند وب سایت کاربر 

منبع: لرن سورس

چطور وب سایت خود را آنالیز کرده و سرعت آن را افزایش دهیم؟

اشتن وب سایتی که دارای سرعت بالاتری در بارگذاری صفحات باشد از اهمیت ویژه ای برخوردار است. این قابلیت نه تنها باعث می شود وب سایت شما در نتایج جستجو بالاتر از دیگران قرار بگیرد بلکه از نقطه نظر تجربه کاربری نیز حائز اهمیت است. بر اساس آماری که وب سایت آمازون در سال ۲۰۰۶ منتشر کرده است مشخص می شود که به ازای هر ۱۰۰ میلی ثانیه ای که وب سایت شما سریعتر بارگذاری شود درآمد شما یک درصد افزایش می یابد.

داده های اخیر گوگل نیز نشان می‌دهد که کاربران ۷۰ درصد زمان بیشتری را در وب سایت هایی که از سرعت بارگذاری بالاتری برخوردار هستند صرف می کنند. در این مقاله به شما نشان خواهم داد که چگونه وب سایت خود را تجزیه و تحلیل کنید با انجام تغییرات ساده و البته کوچک در بیشتر موارد سرعت وب سایت خود را میتوانید به طرز چشمگیری افزایش دهید.

در نهایت این کار باعث می شود در چشم موتورهای جستجو در رتبه های بالاتری قرار بگیرید.

ابزارهایی برای تجزیه و تحلیل سرعت صفحات وب سایت

ابزار های رایگان زیادی وجود دارد که می‌توانند صفحات وب سایت شما را بررسی کنند و مشخص کنند چه چیزی باعث کندی وب سایت شما شده است. در اینجا سه ابزار برتر و محبوب را به شما معرفی می کنیم :

• Pingdom Website Speed Test
• GT Metrix Page Speed Aanalyzer
• Google Page Speed Insights

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

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

Google Page Speed ، بعد از دو ابزار بالایی که به شما معرفی کردم نیاز به ابزار دیگری برای بهبود سرعت صفحات خود ندارید، با این حال Google Page Speed نیز ابزاری است که استفاده از آن خالی از لطف نیست.

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

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

تجزیه و تحلیل صفحات وب با استفاده از Pingdom

برای شروع به سادگی به وب سایت Pingdom بروید و آدرس صفحه خود را وارد کنید. سپس سروری را که نزدیکترین موقعیت به مکان شما را دارد، انتخاب کرده و بر روی دکمه “Start test” کلیک کنید. زمانی که آنالیز کردن صفحه شما به پایان برسد، اطلاعاتی مانند امتیاز صفحه، زمان بارگذاری صفحه و جزئیات دیگری در اختیار شما قرار می گیرد که برای افزایش سرعت صفحه می توانید آنها را اصلاح کنید.

چطور سرعت بارگذاری صفحات را افزایش دهم؟

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

استفاده از قابلیت کش در مرورگر

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

برای انجام این کار به سادگی میتوانید چندین خط کد را به فایل htaccess. خود اضافه کنید. فایل htaccess. را در پوشه ی روت وب سایت خود می توانید پیدا کنید.

ادغام کوچک سازی و انتقال منابع

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

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

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

از CDN برای منابع وب سایت خود استفاده کنید

بارگیری منابع استاتیک از CDN می تواند مسئله سرعت را بهبود ببخشد. این قابلیت اجازه می‌دهد صفحه شما در حالی که منابع را از سرور ثالثی دریافت می کندT بارگذاری شود برای دسترسی به این منابع می توانیم از سرورهای فراهم کننده CDN استفاده کنیم.

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

تصاویر خود را فشرده کنید

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

اگر می خواهید فشرده‌سازی را به صورت دستی انجام دهید ابزار رایگانی به نام  Tinypng وجود دارد که این کار را برای شما به سادگی انجام می دهد. فشرده سازی تصاویر به طرز چشمگیری سرعت بارگذاری را افزایش می دهد.  Tinypng قادر است تصویری با حجم ۵۷ کیلو بایت را به ۱۵ کیلوبایت تقلیل دهد بدون اینکه افت قابل توجهی رخ دهد. اگر وب سایت شما پر از تصاویر بزرگ است از این ابزار استفاده کنید.

منبع:لرن سورس

بررسی منوهای همبرگری در طراحی وبسایت

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

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

بسیاری از مردم در مورد منوهای همبرگری بحث می کنند و برخی مدعی هستند به دلیل اینکه این آنها اطلاعات را مخفی می‌کنند باعث کاهش نرخ مشارکت در وب سایت میشوند. ایده استفاده از این منوها به منظور صرفه جویی در فضا در وب سایت ها مثل آتشی در یک جنگل کل فضای اینترنت را به سرعت در نوردیده است. اگر چه ممکن است اکنون برای تغییر کمی دیر باشد اما هنوز بیان معایب منوهای همبرگری می تواند برای کاربرانی که می خواهند به تازگی از آنها استفاده کنند، مفید باشد.

منوهای همبرگری کارآیی را کاهش می دهند

یکی از اساسی ترین معایب منو های همبرگری موقعیت مکانی آنها در گوشه سمت چپ اپلیکیشن های موبایل است. دسترسی به این منوها برای کاربرانی که راست دست هستند سخت تر است و آنها را تشویق به استفاده از وب سایت شما نمی کند.

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

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

برخی طراحان به جای استفاده از منوهای همبرگری از جایگزین های بهتری استفاده میکنند

در حالی که طراحان وب به منوهای همبرگری به عنوان ابزاری برای مینیمایز کردن محتوای سایت در فضای کوچک همچون موبایل فکر می‌کنند و از آن به عنوان روشی مفید نام می برند، اما در این مورد نیاز های کاربران به طور کلی نادیده گرفته می‌شود. بعضی از کاربران حتی نمی دانند منوهای همبرگری چه چیزی را ارائه می دهند و حتی بر روی آنها کلیک هم نمی‌کنند.

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

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

منبع: لرن سورس

۱۰ فریمورک برتر برای توسعه برنامه های اندروید در سال ۲۰۱۹ (قسمت ۱)

هترین فریمورک های توسعه برنامه های اندروید ، مجموعه ای از توابع و قابلیت ها را برای برنامه نویسان فراهم می کنند. فریمورک ها مجموعه ای از قابلیت های از پیش ساخته شده هستند که برای برنامه نویسان از اهمیت ویژه ای برخوردار هستند. در زمان کد نویسی استفاده از انواع مختلف توابع اهمیت زیادی دارد. این توابع برنامه نویسی را ساده تر کرده و بسیاری از کدهای مورد نیاز ما را پیاده سازی میکنند. در مقاله زیر مجموعه ای از فریمورک هایی را بررسی میکنیم که برای توسعه برنامه های اندروید استفاده میشوند.

همه فریمورک ها خدمات یکسانی را ارائه میدهند. همه ی آنها ابزارهای ضروری را برای برنامه نویسان فراهم می کنند. در این صورت برنامه نویس لازم نیست در مورد مسائلی که ممکن است در طول فرآیند توسعه پیش می آید نگران باشد. همچنین میتوان فریمورک ها را مجموعه ای از کتاب خانه ها در نظر گرفت که کدنویسی را ساده تر میکنند.

بهترین فریمورک های توسعه برنامه های اندروید در سال 2019

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

Corona Labs

این فریمورک یک چارچوب cross platform است و این یعنی وقتی برنامه ای را با استفاده از این فریمورک ایجاد میکنیم، می توانیم از آن برنامه در هر دستگاهی مانند تلفن های اندروید، آیفون ها و آیپد های اپل، ویندوز و غیره استفاده کنیم. از corona labs برای ساخت بازی ها و برنامه های کاربردی برای دستگاه های مختلف استفاده میشود.

این فریمورک بسیار سریع بوده و استفاده از آن آسان است. بهترین بخش استفاده از این فریمورک زمانی است که می توانیم پیشرفت برنامه ها یا بازی ها را هم کنترل کنیم. این فریمورک ابزاری را برای ما فراهم می آورد که با استفاده از آن میتوانیم میزان پیشرفت در ساخت بازی و یا برنامه خود را مشاهده کنیم.

از آنجایی که این فریمورک cross platform است،  برای اینکه برنامه و یا بازی خود را بر روی دستگاه های مختلف اجرا کنیم نیاز به هیچ پروژه مجزایی نداریم. Corona یک فریمورک بهینه سازی شده است. و این یعنی در زمان ساخت یک برنامه سرعت بالایی را تجربه میکنیم. کدهای نوشته شده در این فریمورک به صورت خودکار کامپایل می شوند.

راه اندازی اولیه این فریمورک برای ساخت برنامه ها هم بسیار آسان است. هیچ مشکلی در نصب اولیه آن در سیستم خود ندارید. با استفاده از این فریمورک حتی یک فرد تازه کار هم میتواند یک برنامه را توسعه دهد.

Adobe Phone Gap

Phone Gap نوع دیگری از این فریمورک هاست. این فریمورک محصول شرکت Adobe بوده و یکی از محبوب ترین فریمورک ها برای توسعه برنامه های اندروید است. تیمی که پشت این فریمورک همان تیمی است که Apache Cordova را تولید کرده است.

Apache Cordova یک فریمورک مشهور رایگان برای توسعه برنامه های موبایل است که از HTML و CSS برای توسعه یک برنامه کاربردی استفاده میکند. فقط کافی است Phone Gap را در سیستم خود نصب کنید. بعد از آن به سادگی میتوانید برنامه ای را با استفاده از این فریمورک توسعه دهید. یکی از دلایلی که ما را به استفاده از این فریمورک تشویق میکند سرویس ابری این فریمورک است. همه ما با سرویس های ابری آشنا هستیم.

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

این فریمورک برای برنامه نویسان سرویس های سریع را برای توسعه برنامه ها فراهم می آورد. با استفاده از این سرویس ها میتوان Phone Gap را یک فریمورک قدرتمند در زمینه توسعه برنامه های اندروید دانست . Phone Gap یک فریمورک رایگان است و برای توسعه ی برنامه ها در آن هیچ مبلغی را نمیپردازید.

Native Script

توسعه یک برنامه در این فریمورک ساده تر از آن چیزی است که فکر می کنید و این آسان بودن به خاطر این است که می توانیم یک برنامه را با استفاده از زبان هایی که قبلا از آن استفاده می کردیم مانند آنگولار، تایپ اسکریپت و جاوا اسکریپت، توسعه دهیم . این فریمورک یک چارچوب cross platform است (یعنی مستقل از پلت فرمی که بر روی آن توسعه یافته است میتواند برای پلتفرم های دیگر نیز استفاده شود).

از آنجا که این فریمورک از جاواسکریپت استفاده میکند، توسعه برنامه ها در آن ساده تر است. ویژگی های کلی اسکریپت های بومی در این فریمورک در دسترس هستند، حتی برای زمانی که دانشی از دیگر زبان ها به استثنای جاوا اسکریپت نداشته باشیم. با استفاده از این فریمورک همچنین میتوان رابط های کاربری را ایجاد کرد. این کار در هر صفحه به صورت جداگانه انجام میشود و تغییرات رابط کاربری برای هر صفحه به روشی متفاوت انجام میپذیرد. میتوانیم این رابط های کاربری را در فایل های XML نیز ذخیره کنیم.

Ionic

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

میتوان در زمینه توسعه برنامه با استفاده از فریمورک یونیک آموزش های زیادی را در اینترنت پیدا کرد. هزینه استفاده از این فریمورک بسته به ویژگی هایی که برای شما فراهم می آورد متفاوت است. بسته های مختلفی با قیمت ها جداگانه برای این فریمورک وجود دارد که با توجه به امکانات مورد نیازتان میتوانید یکی از آنها را انتخاب کنید.

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

پایان قسمت اول (این مقاله ادامه دارد)

منبع: لرن سورس

۱۵ دلیل برای ایجاد وب سایتی با استفاده از HTML

آیا می خواهید یک وب سایت ایجاد کنید؟ امروزه وب سایت ها یکی از مهمترین ابزارهای بازاریابی دنیای دیجیتال هستند. بسیاری از شرکت ها یا موسسات برای خود وب سایتی را راه اندازی کرده اند. وب سایت ها وسیله ای عالی برای تبلیغ کسب و کار شما هستند و با آنها میتوانید به راحتی با مردم ارتباط برقرار کنید.

امروزه در مقایسه با گذشته ساخت و راه اندازی یک وب سایت بسیار ساده تر شده است . در اینترنت ابزارهای فراوانی را برای ساخت وب سایت مورد نظرتان را میتوانید پیدا کنید. با این حال باید همچنان نگران فاکتورهایی همچون امنیت ، سرعت و کاربر پسند بودن وب سایت خود باشید.

وب سایت ها را می توان به روش های مختلف ساخت. میتوان وب سایتی را با استفاده از ابزارهای موجود و یا نوشتن کد های HTML ایجاد کرد. در این مقاله به 15 دلیل ارجحیت استفاده از کد های HTML در مقابل استفاده از ابزار های موجود خواهیم پرداخت.

کنترل کامل بر روی سایت

وقتی وب سایتی را  با کد های HTML پیاده سازی میکنید کنترل بیشتری بر روی وب سایت خود دارید، درحالی که وقتی از ابزار های مختلف برای این کار استفاده میکنید از چنین انعطافی برخوردار نیستید. از طرفی دیگر با استفاده از کدهای HTML کنترل کاملی بر طراحی و همچنین قابلیت های وب سایت خود خواهید داشت. اگر یک توسعه دهنده حرفه ای هستید، با استفاده از کدهای HTML میتوانید وب سایت خود را به هر روش ممکن کنترل کنید.

HTML ساده و آسان است

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

HTML تقریبا  توسط تمام مرورگرها پشتیبانی می شود

وقتی وبسایتی را با استفاده از زبان HTML ایجاد میکنید، تقریبا تمام مرورگرهای محبوب مانند Chrome، Firefox، Safari و Opera  از آن پشتیبانی میکنند. تمام عناصر و تگ هایی که برای ساخت یک وب سایت توسط این زبان نوشته میشود در این مرورگر ها شناخته شده هستند.

پشتیبانی از چند رسانه ای

وب سایت های که با HTML ساخته میشوند ، از انواع مختلف چند رسانه ای مانند تصویر، موسیقی، صدا، انیمیشن و .. پشتیبانی میکنند. می توانید محتوای چند رسانه ای را که به صورت استاتیک با استفاده از عناصر مشخصی در زبان HTML به صفحه خود اضافه کنید.

نیاز به عملیات نگهداری ندارید

زمانی که وب سایت خود را با استفاده از HTML ایجاد کردید، لازم نیست نگران نگهداری وب سایت خود باشید. زیرا وب سایت ساخته شده با این زبان استاتیک است. بنابراین نیازی به نصب هر گونه به روز رسانی و یا نگه داشتن نسخه پشتیبان از آن نیست.

زبان HTML بهترین گزینه برای ساخت وب سایت های کوچک و استاتیک است

اگر شما در حال ایجاد وب سایتی کوچک و استاتیک هستید که  قصد ندارید به طور منظم مطالب آن را تغییر دهید،استفاده از زبان HTML بهترین انتخاب برای شما است. وب سایت HTML استاتیک هستند و زمانی که ایجاد شوند نیاز به تغییر مکرر ندارند.

بارگذاری وب سایت شما سریعتر است

وب سایت هایی که با زبان  HTML ایجاد شده اند نسبتا سرعت بارگذاری آنها در مرورگر کاربر بیشتر است. دلیل بارگیری سریع سایت این است که وب سایت HTML دارای محتوای استاتیک است و نیازی به دانلود محتوی پویا برای نمایش در صفحه وب نیست.

به هر طریقی که میخواهید میتوانید وب سایتتان را سفارشی کنید

یکی دیگر از دلایل انتخاب HTML برای ساخت وب سایت این است که می توانید وب سایت خود را به هر طریقی که می خواهید به طور کامل سفارشی سازی کنید. تنها چیزی که لازم دارید این است که باید تسلط کاملی بر روی زبان HTML داشته باشید. در زمان ساخت یک وب سایت با استفاده از کد های HTML محدودیتی نخواهید داشت.

هیچ بروز رسانی لازم نیست

به غیر از وب سایت های پویا، وب سایت هایی که با HTML ایجاد میشوند نیازی به بروز رسانی ندارند، زیرا هیچ پلاگینی در وب سایت وجود ندارد که نیاز به بروز رسانی داشته باشد. تمام محتوا در وب سایت های HTML استاتیک بوده و می تواند به صورت دستی در صورت لزوم تغییر یابد. بنابراین با ساخت وب سایت HTML  می توانید از بروز رسانی های خسته کننده دوری کنید.

امنیت

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

میزبانی ارزان

میزبانی وب سایت های استاتیک HTML در مقایسه با وب سایت های دینامیک ارزانتر است. شما نیازی به هزینه اضافی برای پلاگین ها و پشتیبان گیری برای وب سایت های استاتیک ندارید، اما اگر وب سایتی داینامیک دارید، باید هزینه های اضافی را برای میزبانی پرداخت کنید.

وب سایت شما با کمترین امکانات کار میکند

اجرای وب سایت هایی که با استفاده از HTML کدنویسی شده اند به امکانات کمتری نیازمند هستند. در واقع به سروری که در آن  MySQL و یا PHP نصب شده باشد نیازی ندارید. بنابراین هزینه هاستینگ این گونه وب سایت ها بسیار مقرون به صرفه تر است.

ساخت وب سایت های سازگارتر

با استفاده از زبان HTML میتوان وب سایت هایی ایجاد کرد که با اکثر دستگاه ها با اندازه صفحه نمایش متفاوت سازگار باشد. اگر شما در کدنویسی این زبان حرفه ای هستید پس این زبان انتخابی ایده آل در این مورد است.

انعطاف پذیری

یکی دیگر از دلایل ایجاد وب سایت با استفاده از HTML انعطاف پذیری است.  این زبان به شما این امکان را می دهد که هر صفحه را در وب سایت خود متفاوت طراحی کنید.می توانید به صورت جداگانه هر صفحه را طراحی کنید.

نتیجه

در نتیجه، ساخت وب سایتی با استفاده از HTML دارای مزیتی برابر با ساخت صفحات وب با ابزارهای دیگر است. البته باید توجه داشت در همه جا نمیتوان از وب سایت های استاتیک استفاده کرد، مخصوصا اگر وب سایتی داشته باشید که بخواهید روزانه محتوای آن را تغییر دهید. با این حال استفاده از این زبان به شدت تو

منبع: لرن سورس

فرم های ورود و ثبت نام زیبای طراحی شده با HTML و CSS

با تحول در مفهوم طراحی و نگهداری وب سایت، ایجاد ارتباطی نزدیک با کاربرانی که از وب سایت شما دیدن میکنند به یک امر بسیار مهم تبدیل شده است. ممکن است محصولاتی را در وب سایت خود داشته باشید که لازم باشد بدانید چه کاربرانی از آن استفاده میکنند. در اینجا مفهوم ورود و ثبت نام در یک فرم میتواند به کمک شما بیاید. در ابتدا نگاهی به اهمیت صفحه های ورود و ثبت نام خواهیم داشت وسپس خواهیم دید چطور میتوان با استفاده از HTML و CSS فرمی زیبا را ایجاد کرد.

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

فرم های ورود و ثبت نام زیبای طراحی شده با HTML و CSS

در میان بسیاری از فرم هایی که با HTML و CSS طراحی شده اند ، برخی از بهترین آنها را از لحاظ سازگاری و انعطاف پذیری انتخاب کرده و در این مقاله در اختیار شما قرار داده ایم. امیدواریم در استفاده از آنها لذت ببرید.

فرم ثبت نام و ورود شماره 1

شکلی که در بالا مشاهد میکنید فرم هایی هستند که توسط  Dany Santos ایجاد شده اند. فرم های ورود فقط حاوی ایمیل و رمز عبور هستند در حالی که فرم ثبت نام حاوی ایمیل، نام کاربری و رمز عبور است. علاوه بر این، همه این اجزاء تنها زمانی ظاهر می شوند که شما بخواهید ثبت نام کرده و یا وارد سایت شوید. جابه جایی بین فرم های ثبت نام و ورود به زیبا ترین شکل با انیمیشن انجام میشود. در لینک زیر میتوانید این فرم ها را مشاهده کنید.

مشاهده فرم 

فرم ثبت نام و ورود شماره 2

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

مشاهده فرم 

فرم ثبت نام و ورود شماره 3 (فرم های ساده و واکنش گرا)

این یکی فرم ثبت نام ساده ای است که شامل نمونه های مختلفی است. این فرم ها به سادگی با اندورید و ویندوز سازگار هستند. این فرم نمونه ای تعاملی و کاربر پسند است که توسط tutorialzine توصیه شده است. در لینک زیر میتوانید این فرم را مشاهده کنید.

مشاهده فرم 

فرم ثبت نام و ورود شماره 4

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

مشاهده فرم 

فرم ثبت نام و ورود شماره 5

این فرم ثبت نام و ورود که بسیار کاربر پسندانه است توسط  Josh Sorosky طراحی شده است. این فرم ظاهر ساده ای داشته و به وسیله کدهای HTML، CSS و جاوا اسکریپت ایجاد شده است. این فرم تنها شامل موارد اساسی مانند نام کاربری ، رمز عبور و ایمیل است. در لینک زیر میتوانید این فرم را مشاهده کنید.

مشاهده فرم 

فرم ثبت نام و ورود شماره 6

این فرم جذاب و زیبای ورود و ثبت نام توسط مارین گراندوینکومتس ایجاد شده است. این فرم از تصویر زیبایی برای پس زمینه خود استفاده کرده و تنها شامل عناصر پایه ای است. جابه جایی بین فرم های ثبت نام و ورود به شکل زیبایی با انیمیشن انجام میشود. در لینک زیر میتوانید این فرم را مشاهده کنید.

مشاهده فرم 

فرم ثبت نام و ورود شماره 7 (فرم های چند مرحله ای)

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

مشاهده فرم 

فرم ثبت نام و ورود شماره 8

فرم ثبت نام و ورود Material design یکی دیگر از فرم های بسیار سبک بوده که توسط Brawada طراحی شده است. این فرم با استفاده از کد های CSS ، HTML و جاوا اسکریپت ایجاد شده و به نظر ساده و زیبا است. این فرم فقط شامل عناصر اساسی است و فضای کمی از سایت شما را اشغال میکند. در لینک زیر میتوانید این فرم را مشاهده کنید.

مشاهده فرم 

فرم ثبت نام و ورود شماره 9

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

مشاهده فرم 

فرم ثبت نام و ورود شماره 10

Martin Machycek توسعه دهنده ای محبوب در سایت CodePen است. او این فرم بسیار ساده و زیبا را از طریق HTML، CSS و جاوا اسکریپت طراحی کرده است. این فرم از سازگاری بالایی برخوردار بوده و سبک وزن است. در لینک زیر میتوانید این فرم را مشاهده کنید.

مشاهده فرم 

منبع: لرن سورس

۱۰ کتابخانه جالب JavaScript و CSS در فوریه سال ۲۰۱۹

ماموریت ما در لرن سورس این است که شما را با آخرین و جالب ترین روند ها در توسعه وب آشنا کنیم. اگر از مطالب ما لذت میبرید در وب سایت ما ثبت نام کنید و از آموزش های رایگان آن لذت ببرید. کتابخانه ها و ابزار های زیادی در دنیای جاوا اسکریپت و CSS به وجود آمده اند که کار طراحان را ساده تر کرده اند. در این مقاله به برخی از آنها خواهیم پرداخت.

کتاب خانه instant.page

این کتابخانه جالب سرعت زمان بارگذاری را با استفاده از لینک های پیشفرض (زمانیکه کاربری بر روی آنها قرار می گیرد) افزایش میدهد. این کار باعث میشود وقتی کاربری با کلیک بر روی لینک ها از صفحه ای به صفحه ای دیگر میرود از سرعت بارگذاری بالاتری برخوردار باشد. تنها کاری که برای استفاده از این کتابخانه باید انجام بدهید نصب و راه اندازی آن در پروژه مورد نظرتان است. به سادگی با یک تگ اسکریپت این کتابخانه را به پروژه خود اضافه کرده و به آسانی با آن کار کنید. هیچ پیکر بندی دیگری نیاز نیست.

قالب Stisla

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

کتابخانه FlexSearch

FlexSearch کتابخانه مستقلی است که یک راهکار مدرن برای جستجو در متن را فراهم می کند. FlexSearch در پیدا کردن چیزی که به آن نیاز دارید بسیار سریع عمل میکند و همراه با ویژگی های قدرتمندی از قبیل جستجوی چند فیلدی انعطاف پذیر و جستجوی بخشی از عبارت ارائه میشود.

پلاگین Leon

لئون یک دستیار شخصی AI همچون دستیارهای الکسا و گوگل است و بر اساس Node.js ساخته شده است. لئون به آسانی می تواند روی سرور شما تنظیم شود و از این طریق شما را قادر میکند از طریق متن با آن ارتباط برقرار کنید. اگر شما یک میکروفون و اسپیکر را به سیستم خود اضافه کنید، Leon قادر به شنیدن و سخن گفتن است.

مجموعه عناصر رابط کاربری Matter

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

Mercury Parser

Mercury Parser یک تحلیل گر وب متن باز بوده که بیت های حیاتی ترین اطلاعات را از یک URL استخراج می کند و داده ها را منظم در JSON سازماندهی می کند. این تحلیل گر همراه با یک ابزار خط فرمان و یک افزونه کروم ارائه میشود.

Destyle

Destyle کتابخانه ای از جنس CSS است که به شما اجازه می دهد کد های CSS را سریعتر نوشته و از دست استایل های پیشفرض های مرورگر خلاص شوید. این کتابخانه کمک می کند با ریست کردن فاصله و اندازه فونت ها استایل های پیش فرض را از اکثر عناصر HTML حذف می کند.

Windows 95 in Electron

کل سیستم عامل ویندوز 95 در جاوا اسکریپت بازسازی شده و در برنامه Electron راه اندازی شده است. این برنامه یک پروژه سرگرم کننده برای بازی است و تمام کد های منبع آن در GitHub در دسترس است. اگر بخواهید میتوانید ببینید که چطور همه چیز ساخته شده است.

NES.css

NES.css فریمورکی از جنس CSS بوده  که باعث میشود وب سایت شما شبیه بازی های 8 بیتی به نظر برسد. این فریمورک انتخاب مناسبی برای کامپوننت های بوت استرپ مانند، کانتینر ها و فیلد های ورودی است.

Split.js

Split.js کتابخانه ای عالی از جنس جاوا اسکریپت است که برای ایجاد پانل هایی با اندازه های قابل تغییر ساخته شده است.اندازه این کتابخانه فقط 2 کیلوبایت است و عمدتا مبتنی بر CSS است،از این کتابخانه برای ساخت فریم های قابل انعطاف استفاده میشود.

دوره های آموزشی

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

بحث و گفتگو

سوالات خود در زمینه برنامه نویسی و طراحی سایت را در این بخش مطرح کنید

مقالات آموزشی لرن سورس

• طراحی وب
• تجربه کاربری
• جی کوئری
•  رسپانسیو
• کتابخانه
• ابزار طراحی
• گرافیک
•  css
• html
• فریلنسر
• انگولار
• برنامه نویسی
•  سئو
• جاوا اسکریپت
• اندروید
• پی اچ پی
• پایتون
• نود جی اس
• vuejs
• react
• ios
• تکنولوژی
• رابط کاربری
• امنیت
• کسب و کار
• لینوکس
• موبایل
• پایگاه داده

منبع: لرن سورس

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

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

بررسی اجمالی پروژه

برای نشان دادن روند ایجاد قوانین اعتبارسنجی، یک فرم ثبت نام ساده HTML را با استفاده از Bootstrap 4 آماده کرده ایم. برای مشاهده نسخه آنلاین فرم زیر میتوانید بر روی تصویر زیر کلیک کنید.

چیدمان

طراحی ما شامل یک فرم بوت استرپ با چند فیلد ورودی و یک دکمه ارسال است. برای این مثال ما از 3 نوع مختلف فیلدهای ورودی استفاده کردیم - یک ورودی متن، ورودی رمز و یک ورودی ایمیل.

<div class="registration-form">
    <form>
        <h3 class="text-center">Create your account</h3>
        <div class="form-group">
            <input class="form-control item" type="text" name="username" maxlength="15" minlength="4" pattern="^[a-zA-Z0-9_.-]*$" id="username" placeholder="Username" required>
        </div>
        <div class="form-group">
            <input class="form-control item" type="password" name="password" minlength="6" id="password" placeholder="Password" required>
        </div>
        <div class="form-group">
            <input class="form-control item" type="email" name="email" id="email" placeholder="Email" required>
        </div>
        <div class="form-group">
            <button class="btn btn-primary btn-block create-account" type="submit">Create Account</button>
        </div>
    </form>
</div>

همچنین به فرم خود برخی از استایل های CSS را اضافه کرده ایم. در این صورت فرم ما از ظاهر بهتری برخوردار است.
 

html {
  background-color:#214c84;
  background-blend-mode:overlay;
  display:flex;
  align-items:center;
  justify-content:center;
  background-image:url(../../assets/img/image4.jpg);
  background-repeat:no-repeat;
  background-size:cover;
  height:100%;
}

body {
  background-color:transparent;
}

.registration-form {
  padding:50px 0;
}

.registration-form form {
  max-width:800px;
  padding:50px 70px;
  border-radius:10px;
  box-shadow:4px 4px 15px rgba(0, 0, 0, 0.2);
  background-color:#fff;
}

.registration-form form h3 {
  font-weight:bold;
  margin-bottom:30px;
}

.registration-form .item {
  border-radius:10px;
  margin-bottom:25px;
  padding:10px 20px;
}

.registration-form .create-account {
  border-radius:30px;
  padding:10px 20px;
  font-size:18px;
  font-weight:bold;
  background-color:#3f93ff;
  border:none;
  color:white;
  margin-top:20px;
}

@media (max-width: 576px) {
  .registration-form form {
    padding:50px 20px;
  }
}

انواع اعتبارسنجی

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

required

این مشخصه تعیین می کند که فیلد ورودی نمی تواند خالی باشد. این مشخصه کاربران را قبل از ارسال فرم ملزم میکند اطلاعاتی را در فیلد مربوطه وارد کنند.

<input class="form-control item" type="email" name="email" id="email" placeholder="Email" required>

maxlength و minlength

مشخصه های maxlength و minlength حداکثر و حداقل تعداد کاراکتر هایی که کاربر می تواند در فیلد ورودی وارد کند را تعیین می کنند. این مشخصه ها به خصوص در زمینه فیلد رمز عبور مناسب هستند زیرا ورود تعداد کارکتر بیشتر برای رمز عبور میتواند حساب کاربری مشتری شما را امن تر کند.

<input class="form-control item" type="password" name="password" minlength="6" id="password" placeholder="Password" required>

pattern

pattern عبارتی منظم را برای اعتبارسنجی داده ها فراهم می آورد. این عبارت منظم را می توان برای انواع ورودی های متن، جستجو، آدرس، ایمیل و رمز عبور استفاده کرد.

<input class="form-control item" type="text" name="username" maxlength="15" minlength="4" pattern="^[a-zA-Z0-9_.-]*$" id="username" placeholder="Username" required>

اعتبارسنجی فرم در Bootstrap Studio

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

منبع: لرن سورس