چگونه طراحی وب سایت را از اول شروع کنیم؟

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

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

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

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

تاریخچه‌ی نخستین وبسایت جهان
تکنولوژی اینترنت و وبسایت‌های اینترنتی عمر چندانی ندارند، نخستین صفحه‌ی وب دانشمند در سنه ۱۹۹۱ بدست تیم برنرز لی (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 دسترسی داشته و آن‌ها را در وبسایت خویش کاربرد کنید.

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

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

تفاوت سایت‌های استاتیک و داینامیک
اصولا به وبسایت‌هایی که احتیاجی به دگرگونی ها زیادی ندارند و معمولا تمام المان‌های سازنده‌ی آن‌ها ثابت بوده و مدام به‌روزرسانی نمی‌شود یک وبسایت استاتیک (Static) یا ایستا می‌گوییم.

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

اما سایر وبسایت‌ها، به عنوان مثال سایت‌های محتوا محور، شبکه‌های اجتماعی، انجمن‌ها و… که مدام در حال به روزرسانی و ویرایش هستند را سایت‌های داینامیک (Dynamic) می‌نامند، در راستی اگر بخواهیم دلیل این جستار را بررسی نماییم به این نتیجه خواهیم قبض که به روزرسانی چنین وبسایت‌هایی به شیوه وبسایت‌های استاتیک کاری طاقت‌فرسا و  نزدیک  غیر شدنی است.

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

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

مرحله‌ی ۴
انتخاب زبان برنامه‌نویسی

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

برای این منظور انتخاب‌های فراوانی پیش روی شماست، گرد از محبوب‌ترین زبان‌های برنامه‌نویسی تحت وب PHP اسم دارد، تا به امروز بیش از ۸۰ درصد وبسایت‌های دانشمند با به کارگیری زبان برنامه‌نویسی پی‌اچ‌پی برپایی شده‌اند، از معروف‌ترین آن‌ها می‌توان به فیس‌بوک و ویکی‌پدیا اشاره کرد.

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

البته زبان‌های زیاد زیادی برای برنامه‌نویسی سرنوشت بک‌اند یک وبسایت هستی دارد، به عنوان نمونه ASP , Python , Node JS , Java و… که در چهره گرایش می‌توانید از آن‌ها نیز بهره‌گیری کنید.

ذکر این نکته حائز اهمیت است که برای آغاز برنامه‌نویسی لازم است در آغاز لغایت حدودی با نحوه‌ی نگارش الگوریتم‌ آشنا بوده الی به‌راحتی از پس تحلیل برنامه‌تان برآیید.

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

مرحله‌ی ۵
انتخاب دیتابیس

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

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

سئو (SEO) چیست؟
کلمه‌ی SEO مخفف عبارت Search Engine Optimization به معنای بهینه‌سازی سایت برای موتورهای جستجو است، همه‌ی ما برای یافتن عبارات باره نظر خویش از موتورهای جستجویی مانند گوگل یا بینگ بهره‌گیری می‌کنیم، حقیقت ماجرا این‌است که موتورهای جستجو تنها یک ربات هستند نه یک انسان، بنابراین باید با استفاده از اصول خاصی محتوای وبسایتمان را برای آن‌ها قابل درک نماییم و کوشش کنیم با به کارگیری تکنیک‌های مختلف در صدر نتایج جستجو قرار بگیریم.

مراحل یادگیری طراحی وب سایت شما به عنوان طراح و برنامه‌نویس یک وبسایت باید به گونه‌ای از تگ‌های HTML و سایر موارد بهره‌گیری کنید که محتوای سایت برای موتورهای جستجو قابل درک باشد، در چهره رغبت می‌توانید با یک جستجوی ساده اطلاعات بیشتری در این باره به‌دست آورید (عبارت On-Page SEO را جستجو کنید)

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

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

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