کدهای سمت کاربر - فرونت اند

سلام و خداقوت به همه رفقای عزیز. جلسه قبل مفاهیم پایه مربوط به طراحی صفحات وب رو بررسی کردیم و گفتیم که سایت ها برای اینکه کار کنن چی لازم دارن. در ادامه میخوایم با هم وارد جزئیات این موارد بشیم پس با ویکی تیچ همراه باشید :). خب، اولین مورد هاست یا سرور و مورد دوم دامنه بود. دوستان، به طور کلی تهیه هاست و دامنه و برقراری ارتباطشون با همدیگه کار بسیار بسیار راحتیه و در واقع نیازی به توضیح دادنش نیست، اما دوستانی که میخوان اطلاعاتی توی این زمینه بدست بیارن میتونن خیلی راحت با یه سرچ ساده به هدفشون برسن. بعد از هاست و دامین ، کدهای سمت کاربر ( یا کدهای سمت کلاینت ) یکی از مواردی بود که سایت ها برای این که بوجود بیان بهش نیاز دارن. همونطوری که اشاره کردیم این دسته از کدها ظاهر سایت ها رو میسازن و به اصطلاح به اونها فرونت اِند (front-end) هم گفته میشه.

کدهای سمت کاربر یا فرونت اند چیست؟

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

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

زبان نشانه گذاری html

Hypertext markup language یا html یک زبان نشانه گذاریه. حتما براتون سوال شده که زبان نشانه گذاری یعنی چی؟

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

زبان برنامه نویسی css

Cascading Style Sheets یا css همونطور که از اسمش پیداست، یک زبان برنامه نویسی از مجموعه کدهای سمت کاربر هست که برای استایل صفحات وب استفاده میشه. وقتی که ما اجزاء و یا اِلِمان های یک صفحه رو با زبان html مشخص کردیم، حالا نوبت به css میرسه که ظاهر این اجزاء رو مرتب و منظم کنه و در نهایت طوری دیده بشن که مورد نظر برنامه نویس باشه. برای مثال فرض کنید توی بخشی از صفحه، از یک متن استفاده کردیم. حالا با استفاده از css میتونیم مشخص کنیم که رنگ فونت ، اندازه فونت ، فاصله بین خط ها و خیلی از ویژگی های دیگه برای این متن به چه شکل باشن. زبان برنامه نویسی css هم جزء ساده ترین زبان های برنامه نویسی تو حوزه ی طراحی سایته و اگر درست و اصولی با اون آشنا بشین، خیلی زود میتونید تمام آنچه تو ذهنتونه، با استفاده از css پیاده سازی کنید.

چطور میتونیم با کدهای سمت کاربر ، استایل صفحات را طراحی کنیم؟

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

فریم ورک – framework

یکی از این ابزارها فریم ورک ها (framework) هستند. در یک تعریف مختصر برای فریم ورک میتونم بگم مجموعه ای از توابع کاربردی که توی چند کتابخانه جمع شده و برنامه نویس میتونه ازشون استفاده کنه. برای مثال فرض کنید تابعی تعریف شده که توی اون برای متن ها اندازه فونت ۱۶ پیکسل، رنگ فونت قرمز، ضخامت فونت در حالت bold، پس زمینه متن خاکستری و تراز متن در حالت وسط چین باشه. حالا هر وقت از این تابع برای یک متن استفاده کنیم تمام دستورهای بالا یک جا اجرا میشه و نیازی به نوشتن دوباره اونها نیست. پس کافیه که ما اسم اون تابع رو صدا کنیم تا مجموعه دستوراتش اجرا بشن. البته قطعا ممکنه که این مطلب با یک مثال برای شما جا نیفتاده باشه و هنوز نامفهوم باشه. اصلا نگران نباشید. در جلسات بعدی حتما مفصل بر روی تک تک این موارد کار میکنیم. صرفا میخوام که با کلیات این مباحث آشنا بشین و کم کم وارد فضای داستان بشید. خب اگه بخوایم چند تا از معروف ترین فریم ورک ها برای css رو نام ببریم، باید به بوت استرپ (bootstrap) و UIKit اشاره کنیم.

5 فریمورک برتر css

5 فریمورک برتر css

ابزارهای کمکی دیگری که برای تولید کدهای css  با قدرت بیشتر و ساده تر وجود دارن، پیش پردازنده ها یا preprocessor ها هستند. از پرکاربرد ترین پیش پردازنده های css میتونیم به Sass و LESS  اشاره کنیم که در آینده بیشتر با اونها آشنا خواهیم شد.

زبان برنامه نویسی جاوا اسکریپت

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

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

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

فریمورک های جاوااسکریپت

فریمورک های جاوااسکریپت

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

2 پاسخ
  1. سعید
    سعید گفته:

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

    پاسخ
    • امیر طاهر
      امیر طاهر گفته:

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

      پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *