برای اطلاع از آپدیت دوره ها و تخفیف ها عضو کانال اطلاع رسانی ما بشید ما شوید !
02128428905
0

درچیه ورود به دنیای برنامه نویسی وب + مفاهیمی که باید بدانید

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

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

وقتی وارد اقیانوس برنامه نویسی و کد نویسی میشید، باید زود یه کشتی انتخاب کنید.

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

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

که به سکان برسید و سریع مسیر خودتون رو پیدا می کنید. این کشتی دو قسمت جدا از هم

و مکمل هم داره : یک بخش سمت کاربر یا Frontend دو بخش سمت سرور یا  Backend هستش.

البته اینم بگم که Back-end و Front-end کاملا متفاوت اند. اینجا من می خوام شمارو به قسمت

فرانت اند یا همون سمت کاربر کشتی . بعد برای شما تک تک بخش ها رو معرفی می کنم.

تا شما رو بیشتر با این قسمت جذاب و شگت انگیز آشنا کنم. با من همراه باشید و عناوین زیر را دنبال کنید:

 

طراحی وب و آشنایی بیشتر با Front-end :

خوب اول بریم تا یه ذره بیشتر با Frontend آشنا بشیم. این چوب هایی که ما روش ایستادیم،

اون پله ها، اون پنجره، نرده های دور و … همشون قسمت  Front-end این کشتی حساب میشن.

front  یعنی جلو، هر چیزی که شما تو صفحه ی مانیتورتون از یه سایتی می بینید ، Front-end اون سایت محسوب میشه.

یه مثال دیگه : ماشین دو تا قسمت اصلی داره یکی بدنه و دیگری موتور . بدنه ی ماشین همون Front-end ماشین میشه .

موتور بخش قسمت مهم دیگه ای از ماشین هستش که تو طراحی سایت بهش می گند back-end که جلو تر باهاش آشنا میشیم .

فرانت تند و بک اند در طراحی وب

 

Back-End چیست ! چرا و چگونه؟

بد نیست که به شما برادر front-end یعنی هم Back-end رو معرفی کنم. بزارین اینجوری سر صحبت رو باز کنم :

یه سایت اگه فقط قسمت Front-end داشته باشه، ارزشی نداره و فقط یه قالب هنوز تبدیل به یه سایت

نشده. یعنی یه کشتی با چند تخته چوب و تعدادی الوار رو سر هم کنید. آیا این چیزی که شما

ساختید تبدیل به قایق میشه ؟ و اگر داخل آب قرارش بدید شروع به حرکت میکنه ؟

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

قرار ندید. قسمت محرک سایت بخش  Backend  یا سمت سرور هستش.اون باعث میشه

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

HTML و CSS رو رایگان یاد بگیر ?

 

سمت کاربر و سمت سرور چیست؟

در طراحی وب سرور چیه ؟ و کلاینت چیه ؟ 

قسمت سمت کاربر کلاینت سایت نامیده میشه و قسمت سرور مغز و مرکز فرماندهی

سایت ما هستش یعنی همون Back-end . این سرور رو چند تا چیز تشکیل میده :

یکی پایگاه داده دومی کد ها و اطلاعات سایت ما از جمله عکس های سایت و …

پایگاه داده جایی هست که اطلاعات ما در اون ذخیره میشه، مانند: لیست کاربران

لیست محصولات ، لیست مطالب و غیره. حالا به جایی رسیدیم که باید فکر این

باشیم که محرک و چهارچوب کشتیمون رو بسازیم ( یعنی همون فرانت اند و بک اند).

در طراحی وب زبان برنامه نویسی و نشانه گذاری و پیش پردازنده چی هست؟

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

و بنویسی ای کامپیوتر عزیز ! یه مستطیل درست کن اسمش رو بزار قسمت جستوجو

و هر کاربری توش کلمه ای سرچ کرد، برو داخل پایگاه داده ی من بگرد،  اگه مطلبی بود

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

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

شاید این سوال واستون پیش بیاد که چرا کامپیوتر زبان برنامه نویسی رو میفهمه، ولی

زبان من رو که همون انگلیسی تایپ میکنم متوجه نمیشه ؟؟ زبان های برنامه نویسی

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

که این بحث رو پیاده سازی کرده ! به  دو زبان مسلطه، یکی زبان خود کامپیوتر و دومی زبان برنامه

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

های خودمون ! اول یه فایلی درست میکنه، و تمام معادل دستورات زبان برنامه نویسی و خود

کامپیوتر رو واسش مینویسه. مثال : فرض رو بر این بزارید که اصغر داستان ما

همین اقاهه هست ! اون میاد تو زبان برنامه نویسیش تعریف میکنه که ! اگه کسی اومد و نوشت

 

chap_kon(“slam Ali”)

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

و در آخر علی رو براش چاپ کنه ! درکل این بحث یکم پیچیدس ! بخوام خیلی ساده تر

براتون صحبت کنم ! زبان های برنامه نویسی مثل یک رابط بین شما و کامپیوترتون هستند !

مثل یه طوطی می مونه که بهش کلمه دوست دارم رو یاد بدم و بگم برو به فلان خانم اینو بگو (((:

حالا این وسط پای زبان هایی زبان نشانه گذاری و زبان پیش پردازنده وسط میاد :/ اینا چی می گن ؟

آیا زبان برنامه نویسی هستند ؟ اگه زبان برنامه نویسی نیستند پس چرا اسمشون زبان برنامه نویسی نیست ؟

در طراحی وب زبان نشانه گذاری چیست؟

زبان نشانه گذاری یا Markup Language ، زبانی قابل درک واسه مرورگر هستش،  زبانی که

مرورگر مرورگر دیکشنری شو داره و می تونه واسه شما خروجی داشته باشه، اگه کدی نوشته باشید

. زبان های نشانه گذاری  یه سری از ویژگی های زبان های برنامه نویسی رو ندارند، مثل متغیر ها و

تابع ها . زبان های نشانه گذاری مانند HTML ، X HTML ، XML و غیره. یه چیزم بگم

بد نیست بدونید : پیش‌پردازنده برنامه ای رو میگند که داده های ورودی رو می خونه و بعدش

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

را اصطلاحاً فرم پیش‌پردازش‌شده داده ورودی، که غالباً به وسیله یک برنامه دومی مانند همگردان

مورد استفاده قرار می‌گیرد، می‌گویند. یه چیزی که اون وسط داشتم زبان برنامه نویسی رو توضیح میدادم یادم رفت بگم.

ادیتور های برنامه نویسی

ما چجوری می تونیم فایل دیکشنری رو دانلود کنیم و بگیم برو دستورات برنامه نویسی ما رو بر حسب اون

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

پیدا کردن یک محیط کد نویسی برای طراحی وب

ادیتور های برنامه نویسی

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

میکنید و نصبش میکنید. بعد می رید تو این برنامه یه پروژه ی جدید ایجاد می کنید و شروع می کنید به

کد زدن. هر وقت کد زدنتون تموم شد، اگه زبان کد زدنتون نیاز به کامپایل داشت که کامپایل میشه و

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

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

شروع طراحی وب

برای  ساده شدن و آسان تر شدن برنامه نویسی آیا راهی وجود داره ؟

یا باید فقط از کد های طولانی و تکراری استفاده کنیم ؟ شما میتونید از کتابخانه ها و

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

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

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

 

ui و ux در برنامه نویسی

واژه های UI و UX در طراحی وب

یه قسمت هست که معمولا تو اکثر این کشتی هامشترک هستش که از اهمیت

بالایی برخورداره. واژه‌های UI و UX توی حوزه ی فناوری و IT زیاد به گوشتون میخوره .

واژه‌ی UI همون  عبارت  User Interface هستش که معادل فارسیش میشه رابط

، واسط یا نمای کاربری. اگه بخوام خودمونی بگم اون چیزایی که کاربر میبینه و ازشون

استفاده میکنه و باهاشون تعامل داره . UX یا User experience یعنی تجربه ی کاربری

. حالا تجربه ی کاربری یعنی چی ؟ راحتی کار با سایت ، عملکرد خوب و مناسب ،

دردسترس بودن المان ها. شاید باورتون نشه ولی UI زیر مجموعه ی  UX هستش

چون UX پخش گسترده ای رو به خودش اختصاص داده . به نظرتون آیا UI و UX با هم متفاوت اند

با این که یکی زیر مجموعه ی دیگری است ؟ بله این دو متفاوت اند الان دلیل هاشو میگم تا متوجه بشید .

ui و ux در برنامه نویسی

مکمل بودن UI و UX در طراحی وب

اول UI و UX مکمل هم هستند، پس نمی تونند یکی باشند. اگه یه سایت فقط

UI داشته باشه طراحی زیبایی داره ولی عملکرد خوبی نداره. دو طراحی UI به

طراح سایت بستگی داره ولی تو UX باید به خواسته های کاربرا و نیاز هاشون

دقت کنه . سه، طراح UX باید به مفاهیم روانشناسی دقت داشته باشه

 

تفسیر معروف‌ترین عکس UI/UX در طراحی وب

ui و ux در برنامه نویسی

تو این عکس UI کار اول طراحی اولیه رو داده و اون سنگ فرشی رو قرار داده

و کنارش از یه چمن استفاده کرده. ولی UX کار این راه رو میفهمه و میگه

شما این راه خاکی رو باید سنگ فرش میکردی، چون استفاده میشه . امیدوارم

کامل مفهوم UI و UX رو درک کرده باشد و به تفاوت هاشون هم پی برده باشید.

ساخت هر سایتی یه قوانین داره که مهمه از جمله ریسپانسیو بودن سایت

و پوشش دادن نکات سئو . این دو تا که گفتم اصلا میدونید یعنی چی ؟

Responsive یعنی واکنش گرا ، وب سایتی  واکنشگرا هستش که ساختارش

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

سئو در طراحی وب:

Seo یا (Search engine optimization)  در طراحی وب هستش. فارسیش میشه بهینه سازی برای

موتور های جست و جو . هر سایتی یه رتبه ای داره و هر چقدر رتبه  سایت شما کم تر  باشه،

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

، نکات سئو رو تو سایتتون رعایت کنید، نکاتی که که خیلی مهم هستند  و بسیار ریز و درشت

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

from

(وسایت) خودتون انجام دادید. یه اسم باید واسش انتخاب کنید که با وسیله ی اون اسم بقیه میتونن

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

World Wide Web سایت شما دیده شه، باید فایلای کد ها و فایلای جانبی دیگه رو توی هاست بزارید .

 

در طراحی وب هاست چیه ؟

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

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

های دائما روشن کجا هستند ؟ دیتاسنتر یا Data Center ، مرکز داده هستش.

در واقع به جایی می گن که تعداد زیادی از سرورهای کامپیوتری و تجهیزات شبکه‌

با استفاده از امکانات زیرساختی و ارتباطی، برای رایانش و میزبانی مجموعه‌ بزرگی

از داده‌ها، توی یه اتاق جمع شده . سرور چی بود ؟ یه دون کامپیوتری  که دیگر کامپیوترها

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

 dns در طراحیه وب چیه ؟

بعدش باید دامنه مورد نظرتون رو خریداری کنید. بعد dns دامنه خودتون رو روی هاستون ثبت کنید.

dns یا  Domain Name System هستش که به معنای سیستم نام دامنه هستش. یعنی هنگامی

که Domain شما توی اینترنت جست و جو شد، خود موتور جست و جو گر بررسی میکنه که dns سایت

شما رو کدوم هاست ذخیره شده. هاست رو از رو dns دامینتون پیدا میکنه و به هاست درخواست میفرسته.

که یه کاربر سایت شما رو درخواست کرده. اونجاست که کد های شما به اجرا در میاد و به کاربر سایت شما نمایش داده میشه.

طراحی وب

اگه تا اینجا از این مقاله خوشتون اومده باشه و بفهمیده باشید که داستان از چه قراره ومیخواین شروع بکنین (:

ما یک دوره رایگان به نام سکوی پرتاب ورود به دنیای طراحی وب داریم که قطعا میتونه خیلی خیلی بهتونن

کمک بکنه ((: برای ورود به این دوره آموزشی روی این لینک کلیک کنید ((: و حتما هم نظراتتون رو برای ما ارسال کنید

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *