چگونه خودمان طراحی وب‌سایت را آغاز کنیم؟ (آموزش کامل)
توسط: فرشاد گوهریدر: ۰۲ مهر ۱۳۹۷در: اینترنت و وب184 دیدگاه
شاید شما که در حال مطالعه‌ی این مقاله هستید از دسته افرادی باشید که به طراحی وبسایت علاقه‌مند بوده و همنشین دارید بدانید یک وبسایت چگونه برپایی می‌شود، همانطور که می‌دانید هزینه‌ی طراحی یک سایت خوب بسیار بالاست اما اگر خودتان مراحل ایجاد یک وبسایت را بدانید می‌توانید به دلخواه خویش سایت مورد نظرتان را راه‌اندازی کرده و آغاز به کسب درآمد از آن کنید.

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

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

قبل از اینکه به سراغ بحث اصلی‌مان برویم، بیایید در نخست کمی با تاریخچه‌ی اولین وبسایت‌ها آشنا شویم و ببینیم اجداد وبسایت‌های امروزین به چه شکلی بوده‌اند.

تاریخچه‌ی نخستین وبسایت جهان
تکنولوژی اینترنت و وبسایت‌های اینترنتی عمر چندانی ندارند، نخستین صفحه‌ی وب عالم در سال ۱۹۹۱ توسط تیم برنرز لی (Tim Berners-Lee) برپایی و در دسترس عموم پیمان گرفت، این وبسایت بسیار ساده بود و فقط از چند متن و چندین لینک ساخته شده بود، جالب است بدانید این صفحه هنوز هم در این آدرس در دسترس است!

تیم برنرز لی، خالق وب
تصویری از تیم برنرز لی خالق شبکه‌ی جهانی وب!
حال که کمی با تاریخچه‌ی وب و نحوه‌ی شکل‌گیری نخستین وبسایت‌ها آشنا شدیم وقت آن است که وارد جزئیات اصلی شده و ببینیم چگونه می‌توان یک وبسایت برپایی کرد.

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

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

سایت‌های امروزین از دو سرنوشت فرانت‌اند (Front end) و بک‌اند (Back end) ساختن شده‌اند، بخشی از وبسایت که بدست کاربر قابل مشاهده بوده و در مرورگر او نمایش داده می‌شود فرانت‌اند اسم داشته و بخشی که مربوط به پردازش‌های سمت سرور می‌شود را بک‌اند می‌نامند.

مرحله‌ی ۱
یادگیری HTML

قسمت ظاهری یک وبسایت یا همان فرانت‌اند، با استفاده از زبان نشانه‌گذاری HTML ایجاد می‌شود، در درستی اچ تی ام ال همانند اسکلت و چهارچوب‌های یک وبسایت عمل می‌کند، فرقی نمی‌کند برنامه‌نویسی سمت سرور را با چه زبانی انجام دهید، شما در هر چهره باید آشنایی نسبتا کاملی با زبان HTML داشته باشید، بدون هستی اچ تی ام ال هیچ وبسایتی وجود نخواهد داشت!

در خصوص یادگیری این زبان نگرانی نداشته باشید، چراکه اگر به راستی کوشش کنید چیزی در نزدیک ۱ هفته زمان می‌برد الی با اصول کلی این زبان آشنا شده و بتوانید اولین صفحه‌ی وب خود را ایجاد کنید، ما قبلا در همیار آی‌تی مبانی شروع پیشه با این زبان را آموزش داده‌ایم، می‌توانید برای شروع یادگیری این زبان به تعلیم مبانی HTML مراجعه نمایید.

مرحله‌ی ۲
یادگیری CSS

هرچند HTML زیاد مهم است اما به تنهایی نمی‌تواند ظاهر زیبایی به وبسایت بدهد و در پایان تنها امکان ایجاد سایتی مانند نخستین صفحه‌ی وب تاریخ را خواهد داشت، برای زیباسازی صفحات وب از تکنولوژی CSS بهره‌گیری می‌کنیم، اگر همنشین دارید با این زبان آشنا شوید، می‌توانید به آموزش مقدماتی زبان CSS مراجعه کنید.

زبان سی‌اس‌اس کمی پیچیده‌تر است ولی یادگیری آن‌هم نسبتا ساده خواهد بود، چرا که وقتی اولین کدهای خویش را بنویسید و ببینید چگونه می‌تواند به زیبا شدن ظاهر وبسایتتان کمک کند مطمئنا با علاقه و انگیزه‌ی بیشتری آن را تعقیب خواهید کرد،‌ یادگیری این قسمت نیز چیزی نزدیک ۱ الی ۲ هفته سررسید خواهد برد.

مرحله‌ی ۳
یادگیری JavaScript

تا به اینجای پیشه شما با تقسیم مهمی از عناصر تشکیل‌دهنده‌ی صفحات وب آشنا شده‌اید و می‌توانید با استفاده از فرهنگ خود صفحات نسبتا نکویی طراحی کنید یا صفحات وبلاگتان را به مد نظر خود ویرایش و شخصی‌سازی کنید، ولی اگر می‌خواهید امکانات بیشتری مثل انیمیشن‌‌های مختلف، تاریخ و ساعت، اسلایدر و… به سایت خویش اضافه کنید لازم است لغایت به سراغ یادگیری زبانی به نام JavaScript بروید، در صورت علاقه به این زبان می‌توانید آموزش مفاهیم جاوا اسکریپت را مطالعه نمایید.

برخلاف HTML و CSS که زبان‌های نشانه‌گذاری بودند، جاوا اسکریپت یک زبان برنامه‌نویسی (اسکریپت‌نویسی) است و یادگیری آن مقداری زمان‌بر خواهد بود.

HTML , CSS, JS
هم‌اکنون شما با نحوه‌ی ایجاد ساختار ظاهری سایت (فرانت‌اند) آشنا شدید، حال می‌توانید یک طرح کلی از ایده‌ای که در سر دارید را پیاده‌سازی و اجرا کنید، ولی بیایید در پیوسته کمی بیشتر با ادوات و تکنولوژی‌های مورد بهره‌گیری در طراحی فرانت‌اند سایت آشنا شده و ببینیم طراحان حرفه‌ای چگونه نما سایت را آماده می‌کنند، پیش متعلق به لازم است با چند اصطلاح آشنا شویم.

فریم‌ورک (Framework) چیست؟
فریم‌ورک (Framework) یا “چهارچوب” در اصطلاح مجموعه‌ای آماده از کلاس‌ها، کدها و توابع برنامه‌نویسی است که در قالب یک پکیج ارائه می‌شود و در طراحی پروژه‌های نرم‌افزاری به کمک برنامه‌نویسان می‌آید.

در حقیقت هنگامی که شما از فریم‌ورک‌ها بهره‌گیری می‌کنید کدها از پیش نوشته‌شده و حاضر هستند و تنها کافیست طبق قوانین خاصی (دایکیومنت‌های آن فریم‌ورک) کدها را در کنار هم پیمان داده و از آن‌ها کاربرد کنید.

معمولا در روند طراحی پروژه‌هایی در سطح استاندارد برای افزایش سرعت و بهبود عملکرد شغل از فریم‌ورک‌ها بهره‌گیری می‌کنیم، از معروف‌ترین فریم‌ورک‌های مربوط به HTML و CSS می‌توان به بوت‌استرپ (Bootstrap) اشاره کرد.

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

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

البته اگر قصد برپایی یک سایت منحصربه‌فرد را دارید به کارگیری فریم‌ورک‌ها چندان توصیه نمی‌شود، چراکه کسان زیادی از آن‌ها استفاده می‌کنند و همین سوژه مایه برپایی سایت‌هایی با ظاهر یکنواخت و تکراری در فضای وب شده است.

کتابخانه (Library) چیست؟
به زبان ساده مفهوم کتابخانه نیز تا حدودی همانند به فریم‌ورک است. (چندین کتابخانه در ساحل هم می‌توانند یک فریم‌ورک را برپایی کنند)

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

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

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