نقشه راه برای طراحی و توسعه وب

سلام به همه دوستان??? ایشالا که حالتون خوب باشه

شمایی که آرزوتونه یه سایت بزنید! شمایی که یه چیزایی بلدید ولی نمیدونید دیگه چی یاد بگیرید! شمایی که وسطای راهی ولی گم شدی و نمیدونی چکار کنی! و شمایی که به طراحی وب علاقه دارید ولی اطلاعات ندارید! اگه شما جز این دسته ها هستید 1. پستو لایک کنید 2. تا آخر بخونید 3. کامنت بذارید 4. مارو دنبال کنید?

مقدمه

هر سایتی متشکل از دو بخشه: 1. فرانت-اند(front-end) 2. بک-اند(back-end) که فرانت اند به بخش مرتبط با client سایت و درواقع ظاهر سایت گفته میشه و بک اند هم شامل دیتابیس و رفتار سایت میشه که هرکدوم بدون اون یکی تقریبا هیچیه! فرانت اند بدون بک اند تبدیل به یکی سایت static میشه که فقط یه ظاهری داره و بک اند بدون فرانت اند که اصلا هیچی ظاهری نداره یه جورایی مثل بدن میمونه که فرنت اند میشه بدن و استخوان ها و بک اند میشه هوش

یه نکته ای اینجا وجود داره که طراحی وب با توسعه وب تفاوت داره! به متخصص فرانت اند سایت طراح وب میگن ولی به متخصص توسعه وب هم توسعه گر وب! به هردو هم full stack web developer میگن

گام اول

Html Css

پیشنهاد من و اکثر برنامه نویسا اینه که از فرانت شروع کنید (اگر میخواید وب کار کنید). حالا این فرانت یک سری اصول اولیه داره که میشه: Html و Css! خب حالا این Html Css چی هستن؟ جناب Html زبان برنامه نویسی نیست! یک زبان نشانه گذاریه! و Css زبان استایل دهی! قطعا گیج شدید? بذارید با همون مثال بدن پیش بریم: در واقع اگر یک سایتو بدن فرض کنید html استخوان های بدنه و بدن بدون استخون هیچیه که حالا با Css میتونیم به اونها استایل بدیم که اینجا میتونیم css رو به پوست و یا ماهیچه تشبیه کنید که اگر میخواید متخصص بک اند هم بشید باید تاحدی این دو عزیزو بلد باشید

Js(JavaScript)

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

گام دوم

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

FlexBox

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

Bootstrap

امروزه نیاز صفحات وب شما واکنشگرا(responsve) بسازید تا سایت شما هم در لپتاپ هم در تلویزیون هم موبایل و... به طور کامل نشون داده بشه که بوت استرپ این امر رو امکان پذیر میکنه

Sass یا Less

اول بگم که تو این مرحله میتونید sass یا less رو یاد بگیرید: پیشنهاد من sass هست. واقعیتش من از less خیلی اطلاعات ندارم?

جناب Sass یک زبان Stylesheet است که به CSS کامپایل شده و به شما اجازه میده از variable ها ، nested rule ها ، mixin ها و function ها در استایل دهی خود استفاده کنید و ایشون به شما کمک میکنه تا Style های بسیار بزرگ و سنگین را به راحتی مدیریت کرده و به راحتی بتوانید از کدهای نوشته شده خود ، بارها و بارها در پروژه های مختلف استفاده کنید

گام سوم

و اینجاس که قراره با عذابی به نام باگ و دیباگ آشنا بشید? اینجا شما باید وارد بک اند بشید و یک زبان برنامه نویسی انتخاب کنید. از نمونه زبان های معروف برای بک اند میشه به: پایتون، php، سی شارپ و ... اشاره کرد ولی کار به اینجا ختم نمیشه! وقتی شما یکی از زبان هارو انتخاب کنید ولی بجز php نمیتونید تو سایت ازشون بهره ببرید. که اینجاس که باید فریمورک انتخاب کنید:

اگر پایتون انتخاب کردید: جنگو هست - سی شارپ: asp.net - جاوا: spring - جاوا اسکریپت: node.js و برای php، فریمورک laravel هست. که فکر کنم همشون از معماری mvc پیروی میکنن و بهتره mvc شونم یاد بگیرید مثلا php mvc. چندتا نکته:

جاوا با جاوا اسکریپت کلا فرق داره و هیج ربطی به هم ندارن
یادتونه گفتم جاوا اسکریپت هم تو بک اند استفاده میشه هم فرانت؟ فرانت که تقریبا گفتم - بک اند هم میتونه اینجا باشه - شما میتونید بک اند سایتتونو با node.js بزنید
پیشنهاد من asp.net core هست ولی من خودم جنگو رو انتخاب کردم
به زودی مقایسه این زبان های بک اند رو میذارم تا اطلاعات دقیق تری داشته باشید

گام چهارم

برای اینکه سایتتون نهایت پویایی رو داشته باشه میتونید از یکی از فریمورک های js استفاده کنید. که بهترینشون react و vue.js و angular هستن

شاید یه زمانی مقایسه دقیق دقیق اینا رو گذاشتم ولی خیلی تفاوتی کلا ندارن. ما بهترین فریمورک یا بهترین زبان برنامه نویسی نداریم ولی بعضیا خیلی به این مورد علاقه دارن

React.js

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

Vue.js

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

Angular

یه نکته ای الان بگم (ما یه angular داریم یه angular.js)، angular.js قدیمی تره و یه سری مشکلاتی داره که باعث شده از رقبا عقب بمونه. به همین دلیل گوگل اومد و angular رو ساخت که البته برپایه زبان تایپ اسکریپت هست و بهتر از angular.js هست

فریمورک های بیشتری هم مثل amber.js یاNuxt.js یا Mithril یا gatby و... هم هستن که اون سه تا بالایی ها معروف ترن و من هم اطلاعاتی ازشون ندارم

پیشنهاد من: React.js

گام پنجم

این بخش مربوط به بک اند سایت هست که شاید تا به حال با شنیدن نام دیتابیس چیزی تحت عنوان SQL هم به گوش تان خورده باشد. در واقع این اصطلاح مخفف واژگان STRUCTURED QUERY LANGUAGE به معنی «زبان ساخت یافته ی جستجو» می باشد که به عنوان یکی از زبان هایی است که به طور اختصاصی در دیتابیس های مختلف مورد استفاده قرار می گیرد.

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

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

پس از آشنایی با انواع دیتابیس ها حال نوبت به معرفی چند مورد از معروف ترین دیتابیس های جهان می رسد. در واقع دیتابیس های Oracle، MySQL، DB2، SQL Server، SQLite، Sybase را می توان به عنوان شماری از معروف ترین دیتابیس ها قلمداد کرد.

در واقع دیتابیس های قدرتمند اما در عین حال پیچیده شرکت اوراکل را می توان به عنوان برگ برنده این شرکت در میان رقبایش قلمداد نمود. دیتابیس SQL Server شرکت مایکروسافت با سهولت در استفاده، سازگاری با سیستم عامل ویندوز و قابلیت های کابردیش آن را به عنوان یکی از گزینه های محبوب برای برنامه نویسانی که از محصولات شرکت بزرگ مایکروسافت استفاده می کنند مبدل ساخته است. شرکت بزرگ IBM هم از غافله عقب نمانده و دیتابیسی تحت عنوان DB2 را به بازار عرضه کرده است. این دیتابیس روی سیستم عامل های ویندوز، لینوکس و یونیکس اجرا می شود و از سازگاری خوبی با دیتابیس شرکت اوراکل برخوردار می باشد. دیتابیس Sybase هنوز هم پس از 25 سال حضور مستمر در بازار یکی از نقش های اصلی را در دنیا بازی می کند. دیتابیس MySQL در سال 2008 توسط شرکت سان مایکروسیستمز خریداری شد و پس از خریداری شدن خود شرکت سان مایکروسیستمز توسط امپراطوری اوراکل، دیتابیس MySQL تحت پرچمداری این شرکت به عنوان یکی از محبوب ترین دیتابیس های رایگان در دنیا قلمداد می شود که میلیون ها وب سایت شخصی و تجاری از این دیتابیس استفاده می کنند. دیتابیس SQLite در سال 2000 توسط آقای ریچارد هیپ طراحی شد. این دیتابیس بر خلاف دیگر دیتابیس ها به عنوان دیتابیسی قلمداد می شود که در نرم افزار یا اپلیکیشن اصطلاحاً Embed می شود. از جمله کاربردهای این دیتابیس می توان به کاربرد آن در سیستم عامل های موبایل، مرورگرهای وب و ... اشاره کرد.

پیشنهاد من: MySql

خب دیگه رسیدیم به پایان این نقشه راه

امیدوارم که مفید بوده باشه. اگه مفید بوده یا بنظرتون جالب بود حتما لایک کنید و کامنت بذارید و دنبال کنید

مارو در آپارات هم دنبال کنید که فعالیت مون رو قراره شروع کنیم

خیلی ممنونم از همراهیتون