وبلاگ

بعضی اوقات مفاهیم و ایده ها به آرامی در یک جامعه برنامه نویسی رشد می کنند ، گاهی اوقات به نظر می رسد که در یک زمان کوتاه ظاهر می شوند. از آنجا که React در 2 سال گذشته به صحنه آمد ، به نظر می رسد  مقالاتی که داده های قابل تغییر و تغییرناپذیر را ذکر می کنند ، چند برابر شده ، همچنین کتابخانه هایی مانند Immutable.js به کاربران امکان می دهد از "داده های غیرقابل تغییر" استفاده کنند. من نمی خواهم به آن کتابخانه ها بپردازم ، اما فکر می کنم مفید است که یک راهنمایی سریع راجع به اینکه داده های غیرقابل تغییر در واقع چیست ، چه تفاوتی با داده های قابل تغییر دارد و چرا با اهمیت است

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

چند مثال رو با هم میبینیم .

let a = {
    foo: 'bar'
};

let b = a;

a.foo = 'test';

console.log(b.foo); // test
console.log(a === b) // true

let a = 'test';
let b = a;
a = a.substring(2);

console.log(a) //st
console.log(b) //test
console.log(a === b) //false

let a = ['foo', 'bar'];
let b = a;

a.push('baz')

console.log(b); // ['foo', 'bar', 'baz']
console.log(a === b) // true

let a = 1;
let b = a;
a++;

console.log(a) //2
console.log(b) //1
console.log(a === b) //false

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

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

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

۱. تعاملات را در هرمکان که توانستید قرار دهید

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

۲. استفاده از carousel را فراموش کنید

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

۳. ساختن در یک محدوده برای توسعه در آینده

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

۴. یادتان باشد که بعضی چیزها را کم کنید

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

۵. طراحی برای ساده بودن

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

۶. از یک ویژگی تاجایی که می توانید استفاده کنید

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

۷. به بهترین ها گوش دهید

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

۸. روی توانایی کاربران تمرکز کنید

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

۹. ترازبندی متون را به صورت خوانا قرار دهید

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

۱۰. ابزارها و المان های مورد نیاز را به خاطر بسپارید

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

افزایش رزولوشن دستگاه ها،افزایش سرعت اینترنت و دسترسی طراحان به ابزارهایی برای تایپ در وب مانند Google Fonts و  Adobe Typekitو … ، باعث شده تا این عصر به عصر طلایی تایپوگرافی تبدیل شود.تایپوگرافی هنری است که در آن طراح می کوشد با تغییر عناصر متن ، مثل اندازه ، فاصله حروف ، شکل حروف ، فاصله خطوط ، پاراگراف بندی و مواردی از این دست زبان بصری برای تایپ به وجود آورد.

تایپوگرافی در طراحی سایت

فواید تایپوگرافی:

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

1 . مهمترین عامل؛ خوانایی

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

2 . ساده اما تاثیرگذار

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

نکات زیر را هنگام طراحی و استفاده از تایپوگرافی در طراحی سایت در نظر داشته باشید:

• افزایش اندازه فونت
• استفاده از رنگ های متضاد با محیط در تایپوگرافی برای ایجاد contrast
• استفاده از حالت bold فونت ها

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

3 . Serif vs. Sans Serif

سریف (Serif) به خطوط کوچک یا زائده‌هایی گفته می‌شود که در نقاط پایانی یک حرف، رقم یا نماد افزوده می‌شود. فونت‌هایی که دارای این خطوط کوچک هستند را فونت‌های سریف می‌نامند.فونت‌های سنزسریف (Sans-serif) نیز به فونت‌هایی گفته می‌شود که دارای این زوائد نیستند. (sans به معنای “بدونِ …” می‌باشد و کلمه ای فرانسوی است)

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

چند نمونه از فونت های سریف محبوب:

• Caslon
• Garamond
• Freight Text
• Minion
• FF Meta Serif

چند نمونه از فونت های سنزسریف محبوب:

• Proxima Nova
• Futura
• Avenir
• Open Sans
• Helvetica Neue

4 . سبک دست نوشته بر روی لایه عکس

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

5 . عدم استفاده از چندین خانواده فونت

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

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

1 . چشم نواز شدن بک گراند صفحه

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

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

2 . گرادیان شانس خوانده شدن متن را افزایش میدهد

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

برای این کار کنتراست رنگ ها را زیاد کنید تا متن ها خوانا شوند. 

3 . عکس های معمولی را جذاب می کند

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

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

4 . گرادیان مسیر حرکت چشم کاربر را مشخص میکند

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

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

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

5 . بر برندینگ شما تاکید بیشتری می شود

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

6 . استفاده از گرادیان در طراحی سایت راحت است

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

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

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

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

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

اگر قصد دارید جلوه هایی طبیعی و منطبق با دنیای واقعی خلق کنید، اولین انتخاب گرادیان خواهد بود.

8 . استفاده از گرادیان در طراحی سایت ترند شده است

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

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

تو این مطلب میخواهیم  5 فونت Sans-Serif رایگان و بسیار زیبا برای طراحی وب رو خدمت شما دوستان معرفی کنیم که با استفاده از اونها وبسایت های خیلی زیباتری داشته باشید.

1 . فونت Inter UI

دارای 7 استایل مختلف

2 . فونت Gillroy

دارای 2 استایل مختلف در نسخه رایگان

3 . فونت Josefin Sans

دارای 10 استایل مختلف

4 . فونت Metropolis

دارای 18 استایل مختلف

5 . فونت Glacial Indifference

دارای 3 استایل مختلف

سلام به بررسی 10 زبان برتر برنامه نویسی در سال 2019 میپردازیم که تو این بررسی متوسط درآمد و همچنین میزان سختی در یادگیری اونها رو هم بررسی میکنیم.

در ادامه همراه ما باشید.

1 . JavaScript

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

جاوااسکریپت بسیار پرطرفدار هم هست.

• یادگیری : آسان
• میانگین درآمدسالانه : 110,000 دلار

2 . Paython

زبان پایتون امروزه در بیشتر نظر سنجی ها در رتبه پنجم قرار میگیره اما تو این بررسی اونو تو رتبه دوم قرار میدیم .

پایتون زبان برنامه نویسی واضحی هستش از نظر سینتکسی و بسیار شبیه زبان انگلیسی و مبتنی بر شئ می باشد. 

• یادگیری : آسان
• میانگین درآمدسالانه : 114,000 دلار

3 . Java

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

جاوا یک زبان شئ گرا و قوی است.

• یادگیری : آسان
• میانگین درآمدسالانه : 101,000 دلار

4 . ++C / C

قدیمی و طلا. C این نقل قول را به خوبی ثابت کرده و یک ارتباط قوی در دنیای برنامه نویسی ایجاد کرده.

زبان ++C هم در سال 1983 توسعه پیدا کرد.

• یادگیری : سخت
• میانگین درآمدسالانه : 113,000 دلار

5 . Php

Php در سال 1994 ایجاد شد. امروزه 83 درصد سایت های دنیا از Phpاستفاده می کنند.

• یادگیری : آسان
• میانگین درآمدسالانه : 84,000 دلار

6 . Switf

زبان بعدی در لیست ما، زبان Swift است. اگر شما میخواهید توسعه دهنده برای سیستم عامل Ios یا سیستم عامل Mac باشید، Swiftزبان مورد نیاز شماست.

• یادگیری : آسان
• میانگین درآمدسالانه : 130,000 دلار

7 . #C

#C یه زبان پرقدرت و شئ گرا هستش که توسط مایکروسافت تو سال 2000 عرضه شد و معمولا برای توسعه برنامه های تحت دسکتاپ استفاده میشه.

• یادگیری : سخت
• میانگین درآمدسالانه : 66,000 دلار

8 . Ruby

• یادگیری : آسان
• میانگین درآمدسالانه : 130,000 دلار

9 . Objective-c

• یادگیری : متوسط
• میانگین درآمدسالانه : 101,000 دلار

10 . Sql

• یادگیری : سخت
• میانگین درآمدسالانه : 86,000 دلار