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

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

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

طراحی سایت – FrontEnd

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

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

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

زبان های HTML,CSS,Javascript,Jquery,Bootstrap زبان های سمت کلاینت هستند که برای طراحی ظاهر وب سایت مورد استفاده قرار میگیرند. به زبان های سمت کلاینت Frontend نیز می گویند. دستورات و کد های زبان های سمت کلاینت بر روی سیستم مشتری و توسط مرورگر ترجمه و اجرا می گردد.

زبان های PHP,ASP,JAVA,Python,.. را زبان های سمت سرور می گویند و برای کد نویسی پویاسازی وب سایت و ارتباط با بانک اطلاعاتی مورد استفاده قرار میگیرند. به زبان های سمت سرور backend نیز می گویند. دستورات و کد های زبان های سمت سرور بر روی سرور ترجمه و خروجی آن تبدیل به HTML,CSS می گردد و سپس برای اجرا به سیستم مشتری منتقل می گردد.

 

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

برای شروع کد نویسی پیشنهاد می کنم از Notepad , Notepad++ استفاده شود اما در ادامه میتوانید از IDE های حرفه ای تری مانند PHPStorm , Dreamviwer , Visual Studio استفاده کنید.

گام اول : الگوریتم، فلوچارت و سلام به دنیای برنامه نویسی

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

دوره کاربردی پایه برنامه نویسی ، الگوریتم و فلوچارت مدرس جلیلی – 6 ساعت مشاهده دوره

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

گام دوم : یادگیری HTML و CSS

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

برای یاد گیری این 2 زبان پیشنهاد می کنم آموزش های زیر را به ترتبیب ببینید.

1 آموزش کامل مهندسی وب مدرس موسوی مشاهده دوره
2 آموزش طراحی قالب با طعم دلخواه مدرس اکبری منش مشاهده دوره
3 آموزش تبدیل فایل PSD قالب به HTML مدرس ویسی مشاهده دوره

با دیدن این چند آموزش با اصول طراحی وب سایت(طراحی ظاهر وب سایت) آشنا می شوید اما یک طراح حرفه ای علاوه بر تسلط بر HTML,CSS باید اصول طراحی حرفه ای را نیز بداند.

اما قبل از ادامه برای تثبیت دانش خودچند تمرین را انجام دهید.

۱-سعی کنید ظاهر وب سایتی مشابه دانشجویار را به صورت ساده طراحی کنید

۲-ظاهر وب سایتی مشابه W3schools.com را طراحی کنید

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

گام سوم : اصول UI,UX

۲ مفهوم بسیار مهم تحت عنوان UIو UX مفاهیمی هستند که هر طراح حرفه ای باید شناخت کامل از آن داشته باشد UI یعنی اینکه چطور یک وب سایت زیبا طراحی کنیم. نکاتی مانند شناخت رنگ ها, ترکیب رنگ ها و از این دست موضوعات به UI مرتبط می شود و UX به معنی انتقال تجربه کاری خوب یا انتقال احساس رضایت به مشتری می باشد . چگونه وب سایتی طراحی کنیم که کاربر پس از مراجعه به سایت حس خوبی داشته باشد. خیلی زود چیز هایی که به دنبال آن بوده را بتواند پیدا کند و …

1 فصل اول آموزش جامع UI,UX – آنچه که باید بدانید مدرس اصلانی مشاهده دوره
2 فصل دوم آموزش جامع UI,UX – مقدمه مدرس اصلانی مشاهده دوره
3 فصل سوم آموزش جامع UI,UX – شناخت کاربر یا کاربرپژوهی مدرس اصلانی مشاهده دوره
4 فصل چهارم آموزش جامع UI,UX – روانشناسی تخصصی در طراحی مدرس اصلانی مشاهده دوره
5 فصل پنجم آموزش جامع UI,UX – دانش علم و طراحی مدرس اصلانی مشاهده دوره

گام چهارم : یادگیری JavaScript

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

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

نکته: یک front end کار حرفه ای حتما باید مسلط به جاوا اسکریپت باشد.

برای یادگیری جاوا اسکریپت بیش از 20 آموزش در دانشجویار وجود دارد که با جستجوی عبارت جاوا اسکریپت یا javascript می توانید به همه آنها دسترسی پیدا کنید.

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

1 دوره آموزش مقدماتی جاوا اسکریپت و Jsbom و Jsdom مدرس اکبری منش مشاهده دوره
2 دوره جامع آموزش کامل جاوا اسکریپت مدرس رامین ابراهیمی مشاهده دوره

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

گام پنجم : یادگیری Jquery

Jquery  یکی از محبوب ترین کتابخانه های جاوا اسکریپتی می باشد هدف jquery این است که شما کد نویسی جاوا اسکریپت را بسیار ساده تر و سریعتر انجام دهید.Jquery با این هدف ارائه شد که شما به جای نوشتن 100 خط کد جاوا اسکریپت با 5 خط کد همان کار را انجام دهید

برای یادگیری  jquery پیشنهاد می کنم این آموزش را ببینید

1 دوره آموزش کامل جی کوئری مدرس جلیلی مشاهده دوره

لیسن کامل های جی کوئری را از اینجا می توانید مشاهده کنید.

گام ششم : یادگیری AngularJs

یکی دیگر از فریمورک هاای جاوااسکریپت angular نام دارد که برای طراحی وب سایت های single page  استفاده می شود. وب سایتی مشابه gmail که همه خدمات را در قالب یک صفحه به کاربر ارائه می کند.

برای یادگیری این فریمورک می توانید این آموزش را دنبال کنید:

1 آموزش کامل و پروژه محور AngularJs مدرس کلانتر مشاهده دوره

 

گام هفتم : طراحی قالب Responsive یا واکنش گرا

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

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

برای طراحی وب سایت رسپانسیو هم میتوانید با خود css این کار را انجام دهید و هم به کمک bootstrap می توانید سایت خود را رسپامسیو کنید.

برای این منظور این آموزش ها را پیشنهاد می کنم مشاهده کنید.

1 آموزش پروژه محور فریم ورک بوت استرپ بخش اول مدرس داودفر مشاهده دوره
2 آموزش پروژه محور فریم ورک بوت استرپ بخش دوم مدرس داودفر مشاهده دوره
3 آموزش مقدماتی فریم ورک بوت استرپ مدرس احمدی مشاهده دوره

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

تمرین: این بار ظاهر وب سایت دانشجویار را به صورت رسپانسیو طراحی کنید.

ظاهر وب سایتی مشابه دیجیکالا را به صورت رسپانسیو طراحی کنید.

 
در کل شما به عنوان یک front end کار حرفه ای باید تسلط کافی به این مباحث داشته باشید

HTML 2- CSS 3- Javascript 4- Jquery 5- angularJS 6- Bootstrap

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