طراحی سایت زیبا

طراحی سایت

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

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

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

در کل برای پیاده سازی یک وب سایت شما باید دو دسته زبان برنامه نویسی را یاد بگیرید، در ابتدا زبان های برنامه نویسی فرانت اند که همان زبان های برنامه نویسی HTML و CSS و جاوا اسکریپت و همینطور فریمورک ها و پلاگین های مربوط به این زبان ها میباشند که بخش UI یک وب سایت یا همان رابط کاربری یک وب سایت را تشکیل میدهند و از اهمیت بالایی نیز برخوردار هستند و بخش دوم زبان های سمت سرور هستند همچون زبان های برنامه نویسی PHP و #C و جاوا و... که کار عملیات پشت پرده را بر عهده دارند.

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

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

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

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

بعد از یادگیری زبان برنامه نویسی HTML و CSS حال نوبت به یادگیری جاوا‌ اسکریپت میشود که یک زبان برنامه نویسی بسیار قوی و سطح بالا است( زبان های سطح بالا به زبان هایی گفته میشوند که امکان پیاده سازی بیشتر اپلیکیشن ها را دارند و محدودیتی در پیاده سازی یک برنامه ندارند ). یادگیری زبان برنامه نویسی جاوا اسکریپت شاید کمی زمان ببرد اما بعد از فراگیری این زبان قادر خواهید بود خود را یک طراح فرانت اند بدانید و میتوانید تمامی طرح های گرافیکی و رابط های کاربری زیبا و خلاقانه را با ترکیب این سه زبان پیاده سازی کنید.

خب حال که کار را تا جای بسیار خوبی پیش بردیم نوبت به این میرسد که کار با فریمورک ها و کتابخانه های این سه زبان را نیز یاد بگیریم، در اصل این فریمورک ها و کتابخانه ها بیشتر برای زبان های CSS و javascript ساخته شده است. کتابخانه ها و فریمورک های این دو زبان در اصل با این هدف توسعه داده شده اند که برنامه نویسان کار پیاده سازی طرح ها و قالب ها را بهتر و با سرعت بالا تری انجام دهد. کتابخانه ها و فریمورک هایی از جمله بوت استرپ ( Bootstrap ) که یکی از معروف ترین فریمورک های CSS میباشد و همچنین فریمورک ها و کتابخانه هایی مثل Vuejs , Reactjs , Angularjs که مربوط به زبان جاوا اسکریپت میباشند. که برنامه نویس با یادگیری این فریمورک ها مهارت و تخصص خود را در فرانت اند بالاتر میبرد و منطقا با بالارفتن تخصص یک برنامه نویس حقوق و مزایای آن هم افزایش پیدا میکند.

مراحل طراحی سایت ؟

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

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

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

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

بک اند یا فرانت اند؟

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

زبان های فرانت اند

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

زبان HTML

HTML مخفف Hyper Text Markup Language بوده و در فارسی به آن زبان نشانه‌ گذاری ابرمتن گفته میشود. دقت کنید که HTML یک زبان برنامه نویسی نیست، بلکه یک زبان نشان‌گذاری یا Markup language است. کدنویسی با این زبان بسیار لذت بخش است و یادگیری این زبان یعنی HTML اولین قدم برای شروع ساخت سایت‌های گرافیکی است.

زبان CSS

در ابتدا باید بدانید Css مخفف چه کلماتی است؟  سی اس اس در اصل مخفف Cascading Style Sheet (CSS) است. زبان CSS یک زبان نشانه گذاری شده برای طراحی صفحات و ساخت مشخصات ظاهری اسناد و اطلاعات وب سایت می باشد. CSS یکی از رایج ترین و محبوب ترین ابزارهای طراحی صفحات وب سایت نوشته شده توسط  زبان HTML و یا XHTML می باشد. و همچنین بسیاری از فریمورک های قدرتمند با این زبان نوشته شده اند.

مهارت Emmet

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

Flexbox و Css grid

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

SASS

SASS مخفف کلمات Syntactically Awesome Stylesheets است. SASS یک افزونه برای CSS است که کار با استایل ها در CSS را برای ما بسیار آسان تر می کند. مخصوصا در پروژه های سازمانی و پیچیده ای که فایل های CSS بسیار بزرگ و پیچیده باشند میتوان با استفاده از SASS کدهای خود را با نظم بالاتری نوشت. به طور خلاصه SASS مدیریت و نگهداری استایل های CSS را ساده‌تر و آسان تر میکند.

Bootstrap

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

jQuery

جی کوئری ( jQuery ) یک کتابخانه کوچک جاوا اسکریپت است که موجب می‌شود کار با HTML آسان‌تر شود. این کتابخانه کارکردهای زیادی برای دست‌کاری عناصر صفحه‌های وب ارائه می‌کند که موجب می‌شود برای ایجاد محتوای دینامیک مفید باشد. 

Vue js

ویو جی اس یک فریم‌ورک متن باز زبان javascript است که از آن برای توسعه رابط کاربری استفاده می­‌شود. Vue.js برای اولین بار در دسامبر سال 2013 توسط Evan You، یکی از کارمندان سابق گوگل، به دنیا معرفی شد. ایوان که در شغل پیشین خود از فریم­ورک Angular js در توسعه برنامه‌­ها استفاده می‌کرد، تصمیم گرفت تا فریم‌ورکی برای استفاده در پروژه‌­های خود خلق کند که به اندازه Angular قدرتمند و در عین حال سبک‌وزن و انعطاف‌پذیر باشد.

React js

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

Angular js 

“AngularJS یک فریم‌ورک ساخت‌‌یافته برای وب‌‌اپلیکیشن‌های پویا می‌باشد. انگولار علاوه بر اینکه این امکان را به شما می‌دهد که از HTML برای طراحی قالب استفاده کنید باعث می‌شود بتوانید سینتکس‌های HTML را طوری گسترش دهید تا جزئیات وب‌اپلیکیشن‌ها را نیز به وضوح بیان نمایید.”

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

بک اند

بک اند بخشی از یک وبسایت یا نرم افزار است که کاربران قادر به مشاهده آن نیستند. به عبارت بهتر؛ بک اند، مغز یک سایت است که وظیفه کنترل منطق را بر عهده دارد. کدهایی که در بخش بک اند نوشته می‌شوند، به طور مستقیم با سیستم در ارتباط نیستند، بلکه از طریق سرور به مرورگر کاربرها ارسال می‌شوند؛ به همین دلیل است که به بک اند، برنامه نویسی سمت سرور یا Server Side نیز گفته می‌شود.

درباره موضوع بک اند در یک مقاله جدا به صورت کامل آن را مورد بررسی قرار میدهیم.

نحوه کسب درآمد از فرانت اند

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

حقوق فرانت اند کار

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

نتیجه گیری

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

منبع : وب سایت آرتور