سلام دوست خوبم، خوش اومدی

اگه تازه واردی و کلی سوال تو ذهنت داری و نمیدونی باید چکار کنی!؟ در ادامه با من همراه باش

یه نفس عمیق بکش و بروی دکمه زیر کلیک کن

بزن بریم

معرفی طراحی وب

اول از هرچیزی میخوایم ببینیم طراحی وب یا Web Design یعنی چی؟

کلا به هرچیزی که در حوزه وب و اینترنت ایجاد میشه بهش میگن طراحی وب ، یعنی به مجموعه ای از مهارت ها در این حوزه میگیم طراحی وب.

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

یا مثلا کسی که سایت رو مدیریت میکنه ، یا کسی که محتوا داخل سایت قرار میده یا مثلا کسی که سئوی سایت رو انجام میده ، اینها همشون در کنار هم میشن طراحی وب.

سئو ، یعنی کارهایی که باید انجام بدیم تا سایتمون برای موتورهای جستجوگر مثه گوگل ، بهینه باشه، منظور از بهینه بودن یعنی مثلا جوری باشه که سایت ما بیاد تو نتایج گوگل و کاربر بتونه از طریق اون وارد سایت ما بشه.
یادتون باشه، هر برنامه نویسی رشتش کامپیوتر نیست و هرکسی هم که رشتش کامپیوتر باشه الزاما برنامه نویس نیست.

انواع وبسایت

ما همیشه 2 نوع کلی سایت میتونیم داشته باشیم

البته اینو دیگه همه میدونن! یعنی همه میدونن حا

سایت استاتیک

( یا به انگلیسی Static )

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

سایت داینامیک

( یا به انگلیسی Dynamic )

یه سایتی که پنل مدیریت داره و قابل بروزرسانی می باشد، و از طریق اون میشه محتوای جدید اضافه کرد یا حذف کرد یا ویرایش و...

سایت استاتیک یا ثابت


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

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

حالا اگه چنتا صفحه باشه اشکالی نداره میشه یجوری باهاش راه اومد ولی شما فکرشو کنید چند100 صفحه باشه ، اونوقت دیگه مدیریت این صفحات کمرشکن میشه و واقعا دیگه نمیشه به اینصورت ادامه داد.

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

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

سایت داینامیک یا پویا


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

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

خب گفتم در سایت استاتیک اگه بخوایم اطلاعات 100 کاربر رو نمایش بدیم خب باید 100تا صفحه بصورت مجزا درست کنیم و اطلاعات هرکاربر درش قرار بگیره، حال در سایت داینامیک دیگه نیاز نیست بریم 100تا صفحه مجزا درست کنیم، بلکه فقط 1 دونه صفحه درست میکنیم و در این 1دونه صفحه اطلاعات اون 100تا کاربر رو نشون میدیم، باحاله مگه نه!؟

حالا نه فقط 100تا، بلکه میلیون ها کاربر، بازم فرقی نمیکنه در هرصورت اطلاعاتشون رو درون همون 1 دونه صفحه نمایش میدیم، به این میگن سایت داینامیک که هم مدیریت رو و هم کارارو راحتتر میکنه.

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

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

تقسیم بندی زبان های طراحی وب

زبان های طراحی وب رو به 2 دسته کلی تقسیم کردن

فرانت اند یا FrontEnd

( بخش جلویی سایت )

به هرچیزی که در ظاهر برای کاربر قابل مشاهده باشه بهش میگیم فرانت اند، مثلا ظاهر و استایل سایت

بک اند یا BackEnd

( بخش پشتی سایت )

به هرچیزی که در ظاهر برای کاربر قابل مشاهده نباشه بهش میگیم بک اند، مثلا پنل مدیریت سایت

فرانت اند یا Front End


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

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

HTML
CSS
JavaScript

بک اند یا Back End


حالا هرچیزی که در ظاهر قابل مشاهده نباشه ( مثلا پنل مدیریت سایت و کلا هرچی که در پشت سایت قرار داره ) بهش میگیم بک اند یا Back End ( دست های پشت پرده که میگن همینه حا )

حال ما چندین زبان داریم که در دسته ی بک اند ( یا هم بهش میگیم سمت سرور ) هستند، که این زبان ها موارد زیر می باشند :

JavaScript
Java
Python
PHP
Ruby
C# .NET
Perl
Swift

فول استک یا Full-Stack


این فول استک یا Full-Stack یه اصطلاح هستش برای اونایی که هم فرانت اند رو بلدن و هم بک اند، یعنی کسی که هم زبان های فرانت اند و هم بک اند رو بلد باشه بهش میگیم فول استک یا خودمونی همه کاره.

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



سمت کاربر و سمت سرور

یا در مجموع همون FrontEnd و BackEnd

سمت کاربر یا همون FrontEnd


سمت کاربر یا به انگلیسی Client Side یا در کل همون FrontEnd همونطور که گفتم به بخش جلویی و ظاهر و قابل مشاهده یک سایت میگیم سمت کاربر.

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

یعنی شما خیلی راحت میتونی کدهای زبان های HTML ,CSS و JavaScript رو از داخل مرورگر ببینی و برداری و عملا هر کاری میتونی باهاش کنی.

ولی خب دیگه کدهای سمت سرور رو نمیشه برداشت چون اصلا در مرورگر قابل مشاهده نیست که بخوایم برداریم.

سمت سرور یا همون BackEnd


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

یعنی در واقع اینجوریه که ما کدهای سمت سرور ( مثلا با زبان PHP ) رو مینویسیم و بعد بروی سرور قرار میدیم و در نهایت سرور اونارو اجرا میکنه، و در آخر تنها چیزی که در مرورگر نمایش داده میشه خروجی همون کدهاست نکه خوده کدها.

بفرض مثال من اومدم و دستور زیر که به زبان PHP می باشد رو نوشتم :

echo "<p> Free-Learn.IR </p>";

خب وقتی این کدهارو بروی سرور قرار بدیم ، سرور اینارو اجرا میکنه و چیزی که در خروجی به کاربر نشون میده ، یه تگ پاراگراف هست با مقدار Free-Learn.IR ، دیگه اون echo که مال زبان PHP هست رو نشون نمیده.

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

پایگاه داده

محلی برای ذخیره دائمی داده ها

تعریف پایگاه داده :

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

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

انواع پایگاه داده :

پایگاه داده ها انواع مختلفی دارند و هرکدوم برای خودشون نقاط مثبت و منفی دارند ( اینجا کاری به نقاط مثبت و منفی شون نداریم ) که از معروف ترین این پایگاه داده ها موارد زیر می باشد :

Microsoft SQL Server
Oracle
MySQL
MongoDB
MariaDB

مثال از پایگاه داده ها :

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

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

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

حالا اینکه چجوری مثلا داده ها ریخته میشه به پایگاه داده ها یا مثلا چجوری داده هارو میگیره و مقایسه میکنه یا حذف میکنه یا ویرایش میکنه و... خیلی راحت با استفاده از همون زبان های سمت سرور که کمی بالاتر باهاشون آشنا شدید ( مثلا PHP با پایگاه داده Mysql ) انجام میشه.

فریم ورک

چیزی که از قبل کدهاشو نوشتن و آماده کردن

فریم ورک یا Frame Work


بطور کلی به یسری کدها که از قبل نوشته شدن و آماده هستن برای استفاده منو و شما برای ایجاد یه سایت بهش میگیم فریم ورک یا به انگلیسی FrameWork

بفرض مثال من اومدم و از قبل یسری کلاس در CSS تعریف کردم و کدهای سی اس اس شو نوشتم، حال دیگه شما لازم نیست بیاید و از 0 کد بنویسید خیلی راحت دیگه از همون کلاسی که من ایجاد کردم استفاده میکنید، تموم شد رفت به این میگن فریم ورک.

فریم ورک های FrontEnd

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

برترین فریم ورک های FrontEnd :

BootStrap
React
Angular
Vue.js
Jquery


فریم ورک های BackEnd

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

برترین فریم ورک های BackEnd :

Laravel
CodeIgniter
Express.js
Next.js
Node.js
Django
Flask
Ruby on Rails
Spring

سوالات متداول

  • خب سادس، باید با توجه به تمامی چیزایی که در این صفحه در موردش صحبت کردیم شما تصمیم تون رو بگیرید، یعنی باید تصمیم بگیرید که میخواید کدوم مهارت از طراحی وب رو یاد بگیرید!

    بفرض مثال اگه میخواید یک توسعه دهنده فرانت اند یا FrontEnd Developer باشید خب باید زبان های HTML , CSS و JavaScript رو یاد بگیرید، و در کنارشون یکی دوتا از فریم ورک های بخش فرانت اند رو هم بلد باشید.

    یا مثلا اگه میخواید یک توسعه دهنده بک اند یا BackEnd Developer باشید خب باید برید بسمت زبان های سمت سرور مثه PHP و... و اونارو یاد بگیرید. یا هم اگه خواستید یک فول استک باشید خب باید هم FrontEnd و هم BackEnd رو یاد بگیرید.

    یا اگه علاقه به پایگاه داده ها دارید خب باید برید سمت پایگاه داده ها و زبان های مخصوص بخودشون رو یاد بگیرید

    و در نهایت شما میتونید تو همون بخشی که علاقه دارید متخصص شوید، یعنی ممکنه شما در FrontEnd حرفی برای گفتن نداشته باشید ولی خب ممکنه در BackEnd یک استعداد خاصی داشته باشید و یا برعکس.

  • نه ربطی نداره، اگه رشته تون کامپیوتر باشه خب در دوران دبیرستان / هنرستان یسری مفاهیم پایه در مورد برنامه نویسی آموزش میدن ( البته اگه آموزش بدن ) و اگه رشته تون هم کامپیوتر نباشه بازم مهم نیست چون همون مفاهیم پایه رو هم میشه هرلحظه یاد گرفت.

  • چرا نشه یا چرا نتونی ! تنها تفاوت بین انجام دادن یه کاری با انجام ندادنش، در انجام دادن و ندادنش هست. ( یکم جمله سنگین بود خداکنه زلزله نیاد )

  • شرایط خیلی خاص خب نه، چون ممکنه یکی در بهترین شرایط ممکن ( از نظر مالی ، امکاناتی و ... ) باشه ولی خب برنامه نویس نمیشه یا ممکنه کسی در بدترین شرایط باشه ولی برنامه نویس بشه. ولی در مجموع بله خب شرایط تاثیر گذار هستش، چون اول امکانات بعدش علاقه شخص و در نهایت تلاش هستش که مهمه

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

    برای یادگیری برنامه نویسی 3 تا چیز مهم نیاز داریم :
    1 : یه لپ تاپ یا کامپیوتر یا موبایل ( که بشه باهاش هم یاد گرفت و هم تمرین کرد )
    2 : یه منبع خوب آموزشی ( این منبع میتونه یه سایت باشه یا یه شخص و ... )
    3 : فقط و فقط تمرین و تمرین و تمرین

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

    پس بهتره اول روش یادگیری خودتون رو بشناسید ، مثلا اگه شما بیشتر با یادگیری بصورت مجازی حال میکنید خب میتونید آموزش های موجود در سایت های مختلف رو دنبال کنید، یا اگه با کلاس حضوری حال میکنید میتونید کلاس حضوری برید ولی خیلی مهمه که آیا در کلاس حضوری به شما چیزی یاد میدن یا نه؟

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

  • اینم نمیشه قطعی گفت، چون رابطه مستقیمی با شرایط شما و نحوه یادگیری شما و میزان تمرین و تلاش شما داره.

    بفرض مثال زبان HTML خب یه 130 تا تگ داره، یعنی کلا زبان HTML به همین تگ هاست، حال ممکنه یه نفر این 130تا تگ رو تو یه هفته یادبگیره و ممکنه یه نفر دیگه 1ماه طول بکشه تا یادشون بگیره ، پس به شرایط و نحوه یادگیری و تلاش بستگی داره.

  • خب دلایل مختلفی میتونه داشته باشه ، مثلا ممکنه روش یادگیری تون اشتباه باشه یا ممکنه مشکل از منبع یادگیری تون باشه یا ممکنه خیلی خوب دل بکار نمیدید! پس باید خودتون روش یادگیری تون رو کشف کنید، ( مثلا با یادداشت برداری بیشتر حال میکنید یا دیگر حالت هایی که ممکنه داشته باشید )

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

    من اعتقادم بر اینه که درس یا کتاب سخت وجود نداره، فقط نحوه گفتن اون درس یا نحوه درس دادنشه که سخته ( احساس میکنم این جمله هم کمی سنگین بود )

    مثلا من خودم از ریاضی خوشم نمیاد ولی پس چرا همه اونایی که ریاضی بلدن میگن درس شیرینی هست، خب آره هست ولی متاسفانه اونایی که این درس رو به من و امثال من آموزش دادن ، با تلخی و پیچیدگی آموزش دادن و همین باعث شد یکی مث من همیشه از ریاضی به تلخی یاد کنم.

  • خب UI مخفف User Interface یا خودمونی میشه رابط کاربری ، این رابط کاربری میشه کلا هرچیزی که در ظاهر قابل مشاهده باشه، یعنی همون ظاهر سایت، یعنی همون رنگ بندی سایت و هرچیزی که در ظاهر قابل مشاهده یا قابل لمس یا قابل درک باشه بهش میگیم UI.

    حالا UX چیه؟ خب اینم مخفف User Experience هستش، اینم یعنی تجربه ی کاربری از اون سایت یا محصول یا حالا هرچیزی که میخواد باشه، تفاوت UI با UX اینه که ، UI قابل مشاهده یا قابل لمس هست ولی UX قابل مشاهده یا لمس نیست ، کلا UX چیزی هست که در ذهن یک فرد شکل میگیره.

    مثال از UI / UX :

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

    در نهایت خریدمو انجام دادم و دارم میرم خونه، حالا بین راه یا هم رفتم خونه و در حال خوردن نسکافه هستم که به خرید امروزم فکر میکنم ، و همینجور تو فکرم میگم عجب فروشگاه تمیز و مرتبی بود، برخورد صندوق دارها هم خیلی خوب بود و در مجموع راضیم ازشون. ( تموم شد رفت ، این میشه UX )

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

تماس با من

شما دوستان عزیز میتونید از روش های زیر با من در ارتباط باشید.

تلگرام

@supfreelearn

حمایت مالی

کلیک کنید