همانطور Ú©Ù‡ می‌دانید هزینه‌ی طراØÛŒ یک سایت خوب بسیار بالاست ولی اگر خودتان مراØÙ„ ایجاد یک وبسایت را بدانید می‌توانید به دلخواه خود سایت مورد نظرتان را راه‌اندازی کرده Ùˆ شروع به کسب درآمد از آن کنید.
امروزه در کشور ما نیز تجارت الکترونیک به صورت جدی‌تر دنبال می‌شود Ùˆ اÙراد زیادی علاقه‌مندند کسب‌و‌کار خود را به صورت آنلاین راه‌اندازی کنند، به جرئت می‌توان Ú¯Ùت اولین قدم برای شروع تجارت الکترونیک واقعی، داشتن یک وبسایت است.
در این آموزش از همیار آی‌تی قصد نداریم روش‌های برنامه‌نویسی را بیاموزیم Ùˆ وارد مباØØ« تخصصی یا ÙÙ†ÛŒ شویم، بلکه می‌خواهیم راه Ùˆ روش طراØÛŒ یک وبسایت را از دید Ú©Ù„ÛŒ باهم بررسی کرده Ùˆ یک الگوی ذهنی از این کار به شما ارائه دهیم، پس از مطالعه‌ی این آموزش می‌توانید مسیر خود را یاÙته Ùˆ به دنبال یادگیری تخصص‌های مورد نیاز برای راه‌اندازی یک وبسایت بروید.
چگونه خودمان طراØÛŒ وب‌سایت را شروع کنیم؟ (آموزش کامل)
قبل از اینکه به سراغ بØØ« اصلی‌مان برویم، بیایید در ابتدا Ú©Ù…ÛŒ با تاریخچه‌ی نخستین وبسایت‌ها آشنا شویم Ùˆ ببینیم اجداد وبسایت‌های امروزی به Ú†Ù‡ Ø´Ú©Ù„ÛŒ بوده‌اند.
تاریخچه‌ی اولین وبسایت جهان
تکنولوژی اینترنت Ùˆ وبسایت‌های اینترنتی عمر چندانی ندارند، نخستین صÙØه‌ی وب جهان در سال Û±Û¹Û¹Û± توسط تیم برنرز Ù„ÛŒ (Tim Berners-Lee) ایجاد Ùˆ در دسترس عموم قرار گرÙت، این وبسایت بسیار ساده بود Ùˆ تنها از چند متن Ùˆ چندین لینک ساخته شده بود، جالب است بدانید این صÙØÙ‡ هنوز هم در این آدرس در دسترس است!
تیم برنرز لی، خالق وب
تصویری از تیم برنرز لی خالق شبکه‌ی جهانی وب!
Øال Ú©Ù‡ Ú©Ù…ÛŒ با تاریخچه‌ی وب Ùˆ Ù†Øوه‌ی شکل‌گیری نخستین وبسایت‌ها آشنا شدیم وقت آن است Ú©Ù‡ وارد جزئیات اصلی شده Ùˆ ببینیم چگونه می‌توان یک وبسایت ایجاد کرد.
مهم‌ترین پیش‌نیاز ورود به دنیای طراØÛŒ سایت Ùˆ برنامه‌نویسی آشنایی نسبتا خوب با زبان انگلیسی است، چرا Ú©Ù‡ بسیاری از منابع عالی به خصوص در زمینه‌ی آی‌تی Ùˆ تکنولوژی به زبان انگلیسی در دسترس بوده Ùˆ شما با دانستن زبان انگلیسی می‌توانید قبل از هرکس دیگری از این منابع با Ú©ÛŒÙیت بهره‌مند شوید، پس در اولین قدم سعی کنید زبان انگلیسی خود را تقویت کنید!
طراØÛŒ وبسایت را از کجا شروع کنیم؟
هرچند در گذشته با سایت‌های کاملا ساده Ùˆ یکنواختی مواجه بودیم، اما امروزه به لط٠تکنولوژی‌های طراØÛŒ وب (Ú©Ù‡ در ادامه با آن‌ها آشنا می‌شویم) صÙØات وب زیبایی خیره‌کننده‌ای داشته Ùˆ کاربر می‌تواند به راØتی با آن‌ها به تعامل بپردازد.
سایت‌های امروزی از دو قسمت Ùرانت‌اند (Front end) Ùˆ بک‌اند (Back end) تشکیل شده‌اند، بخشی از وبسایت Ú©Ù‡ توسط کاربر قابل مشاهده بوده Ùˆ در مرورگر او نمایش داده می‌شود Ùرانت‌اند نام داشته Ùˆ بخشی Ú©Ù‡ مربوط به پردازش‌های سمت سرور می‌شود را بک‌اند می‌نامند.
مرØله‌ی Û±
یادگیری HTML
قسمت ظاهری یک وبسایت یا همان Ùرانت‌اند، با استÙاده از زبان نشانه‌گذاری HTML ایجاد می‌شود، در Øقیقت اچ تی ام ال مانند اسکلت Ùˆ چهارچوب‌های یک وبسایت عمل می‌کند، Ùرقی نمی‌کند برنامه‌نویسی سمت سرور را با Ú†Ù‡ زبانی انجام دهید، شما در هر صورت باید آشنایی نسبتا کاملی با زبان HTML داشته باشید، بدون وجود اچ تی ام ال هیچ وبسایتی وجود نخواهد داشت!
در خصوص یادگیری این زبان نگرانی نداشته باشید، چراکه اگر واقعا تلاش کنید چیزی در Øدود Û± Ù‡Ùته زمان می‌برد تا با اصول Ú©Ù„ÛŒ این زبان آشنا شده Ùˆ بتوانید نخستین صÙØه‌ی وب خود را ایجاد کنید، ما قبلا در همیار آی‌تی مبانی شروع کار با این زبان را آموزش داده‌ایم، می‌توانید برای شروع یادگیری این زبان به آموزش مبانی HTML مراجعه نمایید.
مرØله‌ی Û²
یادگیری CSS
هرچند HTML بسیار مهم است اما به تنهایی نمی‌تواند ظاهر زیبایی به وبسایت بدهد Ùˆ در نهایت تنها امکان ایجاد سایتی مانند نخستین صÙØه‌ی وب تاریخ را خواهد داشت، برای زیباسازی صÙØات وب از تکنولوژی CSS استÙاده می‌کنیم، اگر دوست دارید با این زبان آشنا شوید، می‌توانید به آموزش مقدماتی زبان CSS مراجعه کنید.
زبان سی‌اس‌اس Ú©Ù…ÛŒ پیچیده‌تر است ولی یادگیری آن‌هم نسبتا ساده خواهد بود، چرا Ú©Ù‡ وقتی اولین کدهای خود را بنویسید Ùˆ ببینید چگونه می‌تواند به زیبا شدن ظاهر وبسایتتان Ú©Ù…Ú© کند مطمئنا با علاقه Ùˆ انگیزه‌ی بیشتری آن را دنبال خواهید کرد،‌ یادگیری این قسمت نیز چیزی Øدود Û± تا Û² Ù‡Ùته زمان خواهد برد.
مرØله‌ی Û³
یادگیری JavaScript
تا به اینجای کار شما با بخش مهمی از عناصر تشکیل‌دهنده‌ی صÙØات وب آشنا شده‌اید Ùˆ می‌توانید با استÙاده از دانش خود صÙØات نسبتا خوبی طراØÛŒ کنید یا صÙØات وبلاگتان را به دلخواه خود ویرایش Ùˆ شخصی‌سازی کنید، اما اگر می‌خواهید امکانات بیشتری مانند انیمیشن‌‌های مختلÙØŒ تاریخ Ùˆ ساعت، اسلایدر و… به سایت خود اضاÙÙ‡ کنید لازم است تا به سراغ یادگیری زبانی به نام JavaScript بروید، در صورت علاقه به این زبان می‌توانید آموزش Ù…Ùاهیم جاوا اسکریپت را مطالعه نمایید.
برخلا٠HTML و CSS که زبان‌های نشانه‌گذاری بودند، جاوا اسکریپت یک زبان برنامه‌نویسی (اسکریپت‌نویسی) است و یادگیری آن اندکی زمان‌بر خواهد بود.
HTML , CSS, JS
هم‌اکنون شما با Ù†Øوه‌ی ایجاد ساختار ظاهری سایت (Ùرانت‌اند) آشنا شدید، Øال می‌توانید یک Ø·Ø±Ø Ú©Ù„ÛŒ از ایده‌ای Ú©Ù‡ در سر دارید را پیاده‌سازی Ùˆ اجرا کنید، اما بیایید در ادامه Ú©Ù…ÛŒ بیشتر با ابزارها Ùˆ تکنولوژی‌های https://u.to/q4wbGw مورد استÙاده در طراØÛŒ Ùرانت‌اند سایت آشنا شده Ùˆ ببینیم طراØان ØرÙه‌ای چگونه ظاهر سایت را آماده می‌کنند، پیش از آن لازم است با چند Ø§ØµØ·Ù„Ø§Ø Ø¢Ø´Ù†Ø§ شویم.
Ùریم‌ورک (Framework) چیست؟
Ùریم‌ورک (Framework) یا “چهارچوب†در Ø§ØµØ·Ù„Ø§Ø Ù…Ø¬Ù…ÙˆØ¹Ù‡â€ŒØ§ÛŒ آماده از کلاس‌ها، کدها Ùˆ توابع برنامه‌نویسی است Ú©Ù‡ در قالب یک پکیج ارائه می‌شود Ùˆ در طراØÛŒ پروژه‌های نرم‌اÙزاری به Ú©Ù…Ú© برنامه‌نویسان می‌آید.
در Øقیقت هنگامی Ú©Ù‡ شما از Ùریم‌ورک‌ها استÙاده می‌کنید کدها از قبل نوشته‌شده Ùˆ آماده هستند Ùˆ تنها کاÙیست طبق قوانین خاصی (دایکیومنت‌های آن Ùریم‌ورک) کدها را در کنار هم قرار داده Ùˆ از آن‌ها استÙاده کنید.
معمولا در روند طراØÛŒ پروژه‌هایی در Ø³Ø·Ø Ø§Ø³ØªØ§Ù†Ø¯Ø§Ø±Ø¯ برای اÙزایش سرعت Ùˆ بهبود عملکرد کار از Ùریم‌ورک‌ها استÙاده می‌کنیم، از معروÙ‌ترین Ùریم‌ورک‌های مربوط به HTML Ùˆ CSS می‌توان به بوت‌استرپ (Bootstrap) اشاره کرد.
Ùریم‌ورک بوت‌استرپ
با استÙاه از Ùریم‌ورک‌های آماده می‌توانید به سرعت کدهای خود را توسعه داده Ùˆ یک صÙØه‌ی وب را ایجاد کنید، جالب است بدانید اÙراد ØرÙه‌ای تنها در چند ساعت ظاهر Ú©Ù„ÛŒ یک سایت را با استÙاده از Ùریم‌ورک‌های موجود طراØÛŒ Ùˆ پیاده‌سازی می‌کنند!
اکیدا به شما توصیه می‌کنیم اگر تازه‌کار هستید به هیچ‌وجه سمت استÙاده از Ùریم‌ورک‌های آماده نروید، چراکه برای استÙاده از آن‌ها نیز باید در ابتدا با اصول Ú©Ù„ÛŒ کار آشنا باشید، استÙاده از Ùریم‌ورک‌ها در ابتدای امر نه‌تنها باعث سردرگمی بیشتر شما خواهد شد بلکه مانع از یادگیری صØÛŒØ‌تان نیز می‌شود، پس از اینکه اصول Ú©Ù„ÛŒ کار با HTML Ùˆ CSS را Ùرا گرÙتید می‌توانید به سراغ یادگیری یک Ùریم‌ورک رÙته Ùˆ در آن مهارت پیدا کنید.
البته اگر قصد ایجاد یک سایت منØصربه‌Ùرد را دارید استÙاده از Ùریم‌ورک‌ها چندان توصیه نمی‌شود، چراکه اÙراد زیادی از آن‌ها استÙاده می‌کنند Ùˆ همین موضوع باعث ایجاد سایت‌هایی با ظاهر یکنواخت Ùˆ تکراری در Ùضای وب شده است.
کتابخانه (Library) چیست؟
به زبان ساده Ù…Ùهوم کتابخانه نیز تا Øدودی شبیه به Ùریم‌ورک است. (چندین کتابخانه در کنار هم می‌توانند یک Ùریم‌ورک را ایجاد کنند)
در Øقیقت کتابخانه‌های برنامه‌نویسی مجموعه‌ای از کلاس‌ها Ùˆ توابع آماده هستند Ú©Ù‡ به صورت یکجا جمع شده Ùˆ برنامه‌نویسان آن‌ها را مورد استÙاده قرار می‌دهند، معروÙ‌ترین کتابخانه‌ی موجود برای جاوا اسکریپت jQuery نام دارد، شما می‌توانید با استÙاده از آن به توابع متنوع Ùˆ زیادی از JavaScript دسترسی داشته Ùˆ آن‌ها را در وبسایت خود استÙاده کنید.
به طور Ú©Ù„ÛŒ Ùریم‌ورک‌ها Ùˆ کتابخانه‌های مختل٠به وجود آمدند تا Ùرایند طراØÛŒ Ùˆ برنامه‌نویسی را بهبود بخشیده Ùˆ سرعت کار را اÙزایش دهند، هرچند همانطور Ú©Ù‡ پیش‌تر Ú¯Ùتیم شما باید سعی کنید در ابتدا تا Øدودی با Ù…Ùاهیم Ú©Ù„ÛŒ طراØÛŒ وب آشنا شده Ùˆ سپس به استÙاده از این موارد بپردازید.
تا به اینجای کار تقریبا با تمام اصول Ú©Ù„ÛŒ طراØÛŒ Ùرانت‌اند یک وبسایت آشنا شدیم، با دانستن موارد Ú¯Ùته شده در بالا شما تقریبا قادر به طراØÛŒ هر نوع وبسایت استاتیکی خواهید بود، اگر دقت کرده باشید از کلمه‌ی استاتیک استÙاده کردیم، دسته‌بندی دیگری Ú©Ù‡ می‌توان برای یک وبسایت در نظر گرÙت استاتیک Ùˆ داینامیک بودن آن است.
تÙاوت سایت‌های استاتیک Ùˆ داینامیک
اصولا به وبسایت‌هایی Ú©Ù‡ اØتیاجی به تغییرات زیادی ندارند Ùˆ معمولا تمام المان‌های سازنده‌ی آن‌ها ثابت بوده Ùˆ مدام به‌روزرسانی نمی‌شود یک وبسایت استاتیک (Static) یا ایستا می‌گوییم.
به عنوان مثال وبسایت‌های تک صÙØه‌ای، برخی از لندینگ‌پیج‌ها، صÙØات ساده‌ی معرÙÛŒ Ùˆ در Ú©Ù„ تمام سایت‌هایی Ú©Ù‡ Øاوی Ù…Øتوای ثابتی بوده Ùˆ اØتیاج چندانی به ویرایش ندارند می‌توانند به صورت استاتیک ایجاد شوند، پیاده‌سازی این‌گونه وبسایت‌ها پیچیدگی چندانی نداشته Ùˆ تنها با استÙاده از مواردی Ú©Ù‡ تا به اینجا یاد گرÙتیم قابل اجرا Ùˆ پیاده‌سازی هستند.
اما سایر وبسایت‌ها، به عنوان مثال سایت‌های Ù…Øتوا Ù…Øور، شبکه‌های اجتماعی، انجمن‌ها و… Ú©Ù‡ مدام در Øال به روزرسانی Ùˆ ویرایش هستند را سایت‌های داینامیک (Dynamic) می‌نامند، در Øقیقت اگر بخواهیم علت این موضوع را بررسی کنیم به این نتیجه خواهیم رسید Ú©Ù‡ به روزرسانی چنین وبسایت‌هایی به روش وبسایت‌های استاتیک کاری طاقت‌Ùرسا Ùˆ تقریبا غیر ممکن است.
به همین دلیل سیستم‌هایی طراØÛŒ شد Ú©Ù‡ کار ویرایش Ùˆ به‌روزرسانی را از طریق یک پنل مدیریت در اختیار صاØب سایت قرار دهد، تقریبا اکثر وبسایت‌های امروزی Ú©Ù‡ با آن ها سرو کار داریم جزو سایت‌های داینامیک به Øساب می‌آیند.
تÙاوت سایت استاتیک Ùˆ داینامیک
طراØÛŒ Ùˆ ایجاد این قسمت از سایت (بک‌اند) نیازمند به کارگیری ابزارها Ùˆ زبان‌های برنامه‌نویسی خاصی است Ú©Ù‡ در ادامه بیشتر با آن‌ها آشنا می‌شویم، در اصل این موارد ادامه‌ی مراØÙ„ قبلی هستند Ú©Ù‡ قبل‌تر در مورد آن‌ها بØØ« کردیم.
مرØله‌ی Û´
انتخاب زبان برنامه‌نویسی
همانطور Ú©Ù‡ در بالا اشاره کردیم، برای ایجاد بک‌اند وبسایت باید به سراغ انتخاب یک زبان برنامه‌نویسی سمت سرور برویم،‌ یعنی زبانی Ú©Ù‡ با استÙاده از آن صÙØات سایت خود را داینامیک کنیم.
برای این منظور انتخاب‌های Ùراوانی پیش روی شماست، یکی از Ù…Øبوب‌ترین زبان‌های برنامه‌نویسی تØت وب PHP نام دارد، تا به امروز بیش از Û¸Û° درصد وبسایت‌های جهان با استÙاده از زبان برنامه‌نویسی پی‌اچ‌پی ایجاد شده‌اند، از معروÙ‌ترین آن‌ها می‌توان به Ùیس‌بوک Ùˆ ویکی‌پدیا اشاره کرد.
در کشور ما نیز در اکثر شرکت‌های خصوصی می‌توان رد پای این زبان را دید، بنابراین اگر به خوبی آن را Ùرا بگیرید موقعیت‌های شغلی بسیار زیادی پیش‌روی شما خواهد بود، برای آشنایی مقدماتی با این زبان به آموزش معرÙÛŒ PHP Ú©Ù‡ قبلا در همیار آی‌تی منتشر کرده بودیم مراجعه نمایید.
البته زبان‌های بسیار زیادی برای برنامه‌نویسی قسمت بک‌اند یک وبسایت وجود دارد، به عنوان مثال ASP , Python , Node JS , Java و… Ú©Ù‡ در صورت تمایل می‌توانید از آن‌ها نیز استÙاده کنید.
ذکر این نکته Øائز اهمیت است Ú©Ù‡ برای شروع برنامه‌نویسی لازم است در ابتدا تا Øدودی با Ù†Øوه‌ی نوشتن الگوریتم‌ آشنا بوده تا به‌راØتی از پس تØلیل برنامه‌تان برآیید.
همانطور Ú©Ù‡ Ú¯Ùتیم با استÙاده از زبان‌های برنامه‌نویسی بخش‌های داینامیک سایت را ایجاد می‌کنیم، Øال اØتیاج داریم تا اطلاعات وارد شده در وبسایت را به گونه‌ای ذخیره کنیم Ú©Ù‡ در آینده به آن‌ها دسترسی داشته باشیم، برای این امر علاوه بر زبان برنامه‌نویسی باید یک پایگاه‌داده (Database) نیز برای سایت خود ایجاد کنیم.
مرØله‌ی Ûµ
انتخاب دیتابیس
در توضیØات مورد قبلی اشاره کردیم Ú©Ù‡ برای ذخیره‌سازی اطلاعات به یک دیتابیس اØتیاج داریم، یکی از Ù…Øبوب‌ترین دیتابیس‌های مورد استÙاده در دنیا Ú©Ù‡ به خوبی نیز با زبان PHP سازگار است MySQL نام دارد، از آنجایی Ú©Ù‡ این دیتابیس به صورت رایگان عرضه‌شده Ùˆ به شدت Ù…Øبوب است توصیه می‌کنیم در پروژه‌ی خود از آن استÙاده کنید.
تا به اینجا تقریبا با تمام اجزای تشکیل‌دهنده‌ی یک وبسایت آشنا شده‌ایم، با یادگیری این موارد شما می‌توانید یک وبسایت کامل را طراØÛŒ Ùˆ پیاده‌سازی نمایید، بنابراین اگر Ùقط قصد داشتید با چگونگی ساخت یک وبسایت آشنا شوید می‌توانید از خواندن ادامه‌ی این آموزش صرÙ‌نظر کنید، اما لازم است بدانید موارد دیگری نیز در ایجاد Ùˆ نگهداری وبسایت‌ها دخیل هستند Ú©Ù‡ در ادامه به آن‌ها می‌پردازیم، پس اگر می‌خواهید به طور کامل با Ù†Øوه‌ی ایجاد Ùˆ نگهداری یک وبسایت آشنا شوید در ادامه با همیار آی‌تی همراه باشید.