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

ساخت وبسایت چگونه است

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

اجزای تشکیل دهنده سایت

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

هاست یا سرور

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

هاست یک فضای میزبانی میباشد که دارای یک سیستم عامل ( لینوکس یا ویندوز ) و همینطور دارای یک پنل مدیریت ( capnel  or direct admin ) است  که به شما دسترسی اپلود فایل های وبسایتتان را میدهد

اما تفاوت هاست و سرور چیست ؟

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

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

دامنه

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

Com : این پسوند به معنای Commerical یا تجاری میباشد که یکی از معروف ترین ها وجهانی ترین دامنه هاست. این دامنه بیشتر برای وبسایت هایی که خدمات ارائه میدهند یا محصولی میفروشند مورد استفاده قرار میگیرد.

Net  : یکی دیگر از معروف ترین دامنه ها میباشد و به معنای  Network  یا شبکه جهانی اینترنت است. بسیاری از شرکت ها که خدمات اینترنت میدهند از این دامنه استفاده میکنند.

Org  : این دامنه به معنای Organization  یا سازمان میباشد. این دامنه بیشتر در سازمان ها کاربرد دارند.

فایل های رسانه ای و چند رسانه ای ( مالتی مدیا )

به هریک از اشیای متن ,  تصویر ,  صدا و … عناصر رسانه ای میگوییم. عناصر رسانه ای از مهم ترین بخش های یک وبسایت در قالب یک محتوا ارائه میشوند.
مالتی مدیا یا چند رسانه ای بدین معنی میباشد که برای شکل گیری یک رسانه از عناصر مختلفی مانند صدا ,  تصویر ,   و  متن میباشد به عنوان مثال یک فیلم اموزشی که در وبسایت قرار میگیرد فایل چند رسانه ای محسوب میشود.
فایل های رسانه ای و چند رسانه ای یک وبسایت میتوانند شامل تصاویر گرافیکی ( مانند لوگو ) متن ( مقالات ) و صدا ( پادکست هایی که میسازیم ) و یا به صورت کلی مالتی مدیا مانند یک فیلم اموزشی که از چند رسانه در ان استفاده شده است.

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

کد های سمت کلاینت یا سمت مشتری

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

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

Html : اچ تی ام ال یک زبان کد نویسی ابر متن هست. و این کد ها در سرور ذخیره میشوند اما در سمت کاربر و با مرورگر کاربر پردازش میشوند. html یک زبان نشانه گذاری هست بدین معنی که وبسایت را به اجزایی تقسیم میکند و هر جزء را با یک تگ مشخص میکند.

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

نمونه کد html به صورت زیر میباشد/

Css : دومین زبان پایه ای در طراحی صفحات وب است. css در واقع تکمیل کننده زبان html میباشد که با class هایی که تعریف میکند به html یا به اسکلت صفحات وب به اصطلاح روح یا استایل میدهد.
تمام رنگ ها فونت ها و تمام ویژگی های ظاهری در وب با css ایجاد میشوند. اخرین نسخه css 3 میباشد که امکانات فوق العاده ای مانند انیمیشن به ان اضافه شده است. در زیر نمونه کد css را میبینید.

 

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

boot strap : با استفاده از این فریمورک میتوانید صفحات را برای بقیه  اسکرین ها  واکنش گرا کنید.
ulkit : یک فریمورک کم حجم و پر امکانات و بادرک اسان برای توسعه دهندگان است.

css علاوه بر فریمورک ها preprocessors هایی هم دارد. preprocessors امکانات جدیدی به css اضافه میکنند. در زیر به چند preprocessors اشاره میکنیم.

lass : از قوانین css پیروی میکند و با استفاده از روش هایی css را پویا ساخته است.

sass : یک روشی برای مدیریت کد های CSS است  و یک زبان پیش پردازنده برای کدهای CSS است.

javascript : جاوا اسکریپت بر خلاف css , html  یک زبان برنامه نویسی است که اجرا ان در مرورگر کاربر است و به هیچ عنوان از سرور یا هاست سایت منابع مصرف نمیکند.
جاوا اسکریپت در درون کد های html قرار میگیرد و با اضافه کردن امکانات و تغییر المان ها , وبسایت را تبدیل به یک وبسایت داینامیک میکند و همینطور به کاربر امکان تعامل با وبسایت را میدهد.

نمونه کد جاوا اسکریپت :

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

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

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

Backbone.js  : همانند انگولار برای ایجاد اپ های تحت وب توسعه داده شده است و با استفاده از این فریمورک میتوانید سایت های مدرن و زیبا طراحی کنید.

کد های سمت سرور

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

زبان های برنامه نویسی بسیاری در دنیا نظیر ++c   و #C  و … وجود دارند. اما زبان های برنامه نویسی مخصوص وب و سمت سرور هستند که در زیر به انها اشاره میکنیم.

php : یک زبان برنامه نویسی سمت سرور و سمت وب است که میتوانید با ان الگوریتمی را پیاده سازی کنید و سرویسی ارائه دهید و همینطور میتوانید وبسایت های پویا بسازید .

نمونه کد php :

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

در زیر لیست کردیم.

فریمورک های زبان php 

• laravel : یک فریمورک پر طرفدار است که برای طراحی اسانتر اپ های سمت وب استفاده میشود.
• cake php :یک فریمورک است که از کد های عمومی استفاده میکند و همینطور باعث قدرتمندی نرم افزار میشود.
• zend : یکی از فریمورک های قدرتمند و امن است که از این فریمورک برای پروژه های تجاری بسیار استفاده میشود.

cms های زبان php 

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

wordpress : وردپرس یک سیستم راه انداز وبسایت یا وبلاگ و همینطور از زبان های زنده دنیا پشتیبانی میکند که با ان میتوانید وبسایت خودرا مدیریت کنید. وردپرس محبوب ترین سیستم مدیریت محتوا در حال حاضر میباشد که اپن سورس بوده و پلاگین های زیادی در هر زمینه ای در مخزنش وجود دارد.
وردپرس اولین سیستم مدیریت محتوایی میباشد که رویای راه اندازی سایت در ۵ دقیقه را محقق کرده است. وردپرس از نظر کارایی , سرعت , امنیت  و.. در رده اول قرار دارد.

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

joomla : جوملا از امن ترین سیستم های مدیریت محتوا  میباشد. جوملا اپن سورس و رایگان بوده از اجازه نامه GNU/GPL پشتیبانی میکند. جوملا برای وبسایت های  پر قدرمتند بسیار عالی است اما از معایب ان میتوان به کم سرعت بودن ان اشاره کرد.

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

نمونه کد پایتون :

 asp.net : یک زبان برنامه نویسی است که توسط شرکت مایکروسافت ارائه شده است تا برنامه نویسان بتوانند از ان برای طراحی صفحات وب پویا از ان استفاده کنند.
asp مبتنی بر زبان های مشترک در حال اجراست که برنامه نویس میتواند کد های api را با استفاده از هر زبان Framework.NET بنویسد.

نمونه کد asp.net 

پایگاه داده یا دیتابیس

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

mysql : یک پایگاه داده کامل  که امکان ذخیره سازی , مرتب سازی , جستجو , و بازیابی اطلاعات را در اختیار شما قرار میدهد. یکی دیگر از ویژگی های mysql اجازه دادن استفاده همزمان کاربران از پایگاه داده است. امنیت بالا و اپن سورس بودن این پایگاه داده سبب اعتماد کاربران شده است.

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

موفق باشید