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

آموزش طراحی سایت و برنامه نویسی

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

آموزش طراحی سایت و برنامه نویسی

۱۲۰ مطلب در تیر ۱۳۹۸ ثبت شده است

۲۵تیر

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

open-source

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

شروع آسان و ارزان

در مورد هر صنعتی که وابسته به خدمات باشد، هزینه های مشخصی برای شروع کار بر روی پروژه وجود دارد - ممکن است موادی اولیه ای را نیاز داشته باشد. رستوران نمی تواند غذا را بدون تهیه مواد اولیه آن در آشپزخانه خود به فروش برساند. یک نجار نمی تواند یک قفسه را بدون نیاز به چوب به شما عرضه کند.

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

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

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

web-designers-open-source-01

فرصتی برای رشد

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

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

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

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

web-designers-open-source-02

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

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

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

web-designers-open-source-03

متن باز درب ها را میگشاید

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

منبع: لرن سورس
شهربانو دوستی
۲۵تیر

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

kotlinvsjava

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

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

چرا جاوا محبوبیت کمتری دارد؟

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

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

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


اطلاعاتی مفید در مورد کاتلین

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

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

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

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

 

در حال حاضر، با استفاده از Kotlin شما از دست مشکلات زیر خلاص میشوید :


دیگر خبری از NullPointerException نیست

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

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

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


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

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

به منظور مقابله با تمام اشکالات کلاس های کاربردی، کاتلین تصمیم به استفاده از توابع extension گرفت و صادقانه بگویم، اینجا جایی است که ما می توانیم بگوییم کاتلین واقعا از جاوا بهتراست و می توانید 100٪ مطمئن باشید که  قادر به استفاده از Kotlin برای یک پروژه تجاری اندرویدی هستید.

تابع FindViewById دیگر وجود ندارد

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

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


 

منبع: لرن سورس
شهربانو دوستی
۲۵تیر

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


photo-1488590528505-98d2b5aba04b


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


در این مقاله به برخی از syntax highlighting های رایگان را بررسی میکنیم.


1.باکس های کد در آنگولار

در اینجا یک قطعه کد بسیار زیبا داریم که برای Angular.js توسط Andrew Archibald ساخته شده است. همه این باکس های کد  دارای زبانه های (تب) بسیار زیبا هستند که میتوانید از آنها در وب سایت خود استفاده کنید. این کد ها را بدون هیچ جاگذاری میتوانید به صفحه خود اضافه کنید، استایل دهی آنها همگی از طریق کد های CSS مدیریت میشود.


این ویژگی باعث میشود درخواست های HTTP شما کاهش پیدا کند و به شما کنترل بیشتری بر نوع قاعده نوشتاری مورد نظر خواهد داد.



2. تگ استایل <pre>

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


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



3.Textarea Tabs

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


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



4.CSS-Only Line Numbers

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


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



5.Syntax Highlighting بوت استرپ

آیا به دنبال اضافه کردن ویژگی Syntax Highlighting به پروژه ای که در آن از بوت استرپ استفاده کرده اید، هستید ؟ پس جای درستی را انتخاب کردید. Kijan Maharjan این قابلیت را برای شما توسعه داده است. این قابلیت به شما اجازه میدهد ویدجت های تبی را به صفحه خود اضافه کنید که دارای سبک های مختلف برای برجسته سازی کد هاست. رنگها را با استفاده از کتابخانه code-prettify  انتخاب می کنید و کل طراحی را با ویرایشهای کوچک در CSS راه اندازی میکنید.



6.Syntax Highlighting Demo

در اینجا نسخه ی نمایشی از قابلیت برجسته سازی کد ها (Syntax Highlighting Demo) را مشاهده میکنید که به وسیله گستره بزرگی از زبان ها پشتیبانی میشود. هر زبان دارای سبک طراحی و طرح رنگی خاص خود است، اما همچنین می توانید با کمی تغییر در کد CSS رنگ بندی را تغییر دهید.



7.Prism.js Demo

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



8.Pure CSS Code Editor

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



9.Syntax Coloring

فوق العاده ساده. این توصیفی است که برای قابلیت ساخته شده توسط  Michaël Germini استفاده میشود. اگر نمیخواهید  قابلیت برجسته سازی را از ابتدا طراحی کنید Syntax Coloring انتخاب مناسبی برای شما خواهد بود. این قابلیت دارای یک پس زمینه سفید با متن روشن است و کد ها در آن به خوبی نمایش داده میشود. البته به یاد داشته باشید که این قابلیت بسیار ساده است بنابراین برای اینکه با سایت شما مطابقت پیدا کند، ممکن است به کمی زمان برای ویرایش استایل ها نیاز داشته باشید.



10.Code Guide

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


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

شهربانو دوستی
۲۵تیر

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


flexbox-css.png


خوشبختانه، ظهور Flexbox در CSS این فرایند دشوار را تا حد زیادی ساده تر کرده است. از آنجا که Flexbox با چندین container (ستون یا ردیف) ایجاد شده است، به ما یادآوری میکند که شگرد های قدیمی را به فراموشی بسپاریم


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


قوانین واکنش گرا

یکی از بهترین ویژگی های Flexbox قابلیت تطابق پذیری آن با فضای موجود در یک  container است. فلکس باکس به خودی خود واکنش گراست. اما با افزودن برخی media query های موجود در CSS میتوان این قابلیت را برای هر صفحه نمایشی تقویت کرد. طرح نمونه زیر را در اندازه های مختلف نمایشگر مشاهده کنید تا ببینید که چطور همه چیز در هر حالت به بهترین شکل تنظیم می شود.



 


ناوبری تمام صفحه

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



 


Timeline

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



 


دکمه های صفحه بندی

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



 


ویژگی محصولات

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



 


ساخت Masonry

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



 


محتوای وسط چین شده به صورت عمودی

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



 


فرم های انعطاف پذیر

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



 


نتیجه

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


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

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


بحث و گفتگو

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


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


طراحی وب

تجربه کاربری

جی کوئری

 رسپانسیو

کتابخانه

ابزار طراحی

گرافیک

 css

html

فریلنسر

انگولار

برنامه نویسی

 سئو

جاوا اسکریپت

اندروید

پی اچ پی

پایتون

نود جی اس

vuejs

react

ios

تکنولوژی

رابط کاربری

امنیت

کسب و کار

لینوکس

موبایل

پایگاه داده

شهربانو دوستی
۲۵تیر

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

atomic-design-book-cover-thumb

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

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

فرآیند پایین به بالا، طراحی اتمی نامیده می شود زیرا از مسائل شیمی الهام گرفته است. موارد زیر را در نظر بگیرید:

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

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

atomic-design

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

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

مزایای طراحی اتمی

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

ساخت مجموعه ای از کامپوننت ها

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

linear-atomic-design

چیدمان بصری بهتر

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

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

جستجوی آسان تر در طراحی تان

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

نمونه سازی و  بروز رسانی سریعتر 

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

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

چرا طراحی اتمی را باید مورد توجه قرار دهیم؟

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

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

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

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

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

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

یک ایده رادیکال برای ساخت وب سایت

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

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

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

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

شهربانو دوستی
۲۵تیر

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

responsiveweb

طراحی واکنش گرا را بفهمید

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

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

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

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

محتوای خود را رها و یا مخفی نکنید

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

hamburger-menu-icon

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

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

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

تصاویر را سازگار ارائه دهید

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

2016-mobile-trends

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

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

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

صفحات لمسی را در طراحی خود در نظر بگیرید

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

mobile-resolution-chart

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

تمام کارهایی که با موبایل میشود انجام داد را در نظر بگیرید

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

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

شهربانو دوستی
۲۵تیر

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

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


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

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

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

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


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

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



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

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

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



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



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

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



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



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

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


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

 

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

شهربانو دوستی
۲۵تیر

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

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

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

Yukie Nail New York

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

mouse-cursor-effects1

Flixxo

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

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

mouse-cursor-effects2

BLKOUT

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

mouse-cursor-effects3

Niccolo Miranda / Sarto Bikes

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

mouse-cursor-effects4

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

mouse-cursor-effects

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

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

Ambitious Zevenbergen / Denton Design / Icone

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

mouse-cursor-effects

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

mouse-cursor-effects7

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

mouse-cursor-effects

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

شهربانو دوستی
۲۵تیر

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

bg-article

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

mobile_users_stats

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

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

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

نتیجه

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

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

شهربانو دوستی
۲۵تیر

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

vector-illustration-concept-rocket-launch

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

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

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

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

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

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

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

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

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

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

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

pingdom-results

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

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

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

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

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

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

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

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

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

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

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

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

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

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

tinypanda

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

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

شهربانو دوستی