arshia
arshia
خواندن ۳ دقیقه·۳ سال پیش

فرانت اند چیست ؟

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

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

خب حالا سوال پیش میاد که منظور از کد های فرانت اند چیه ؟؟

باید بگم که فرانت اند دولوپر ها برای ساخت یک وبسایت به سه زبان احتیاج دارند ، HTML ،CSS و JavaScript

زبان های اصلی و مورد نیاز هر فرانت اند دلوپر
زبان های اصلی و مورد نیاز هر فرانت اند دلوپر


اگر بخواهیم ظاهر وب سایت را با یک انسان مقایسه کنیم باید بگویم که زبان html اسکلت انسان رو میسازد و زبان css پوست و لباس انسان را میسازد و JavaScript به انسان جان میببخشد و باعث حرکته انسان میشود لازم به ذکر هست که بگویم زبان های html , css زبان ها نشانه گذاری اند و نه زبان برنامه نویسی ، ولی با java script میتوان برنامه نویسی هم کرد پس زبان برنامه نویسی است

حالا سوال بعدی ای که پیش میاد اینه که کاره برنامه نویس فرانت اند فقط کد زدن html ,css ,jsهست یا باید طراحی وبسایت را نیز انجام دهد؟


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

و در آخر برای شما وظایف اصلی یه فرانت اند دولوپر را شرح میدهم :

-یادگیری زبان‌های برنامه نویسی HTML ،CSS و جاوا اسکریپت

-آشنایی با کتابخانه‌ها و فریمورک‌های فرانت اند Javascript

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

-آشنایی با اصول طراحی واکنش‌گرا

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

مثالی از وبسایت واکنشگرا (responsive)
مثالی از وبسایت واکنشگرا (responsive)


-مبانی طراحی وبسایت

شما باید اصول طراحی را که شامل طراحی UI :(User interface) { طراحی زیبا و چشم نواز ظاهر سایت }و طراحی UX :(User experience) { توانایی برقراری ارتباط خوبه مشتری با سایت } که یعنی کاربر مطالبی که میخواهد را به راحتی میتواند پیدا کند و نیاز ندارد دنبال مطالب مورد نظر خود در سایت بگردد

-یادگیری نرم افزارهای گرافیکی مانند فیگما

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


ارشیا مخلص 25 شهریور 1400

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