طراحی وب به توانایی ایجاد صفحات وب توسط زبان‌های برنامه‌نویسی مربوطه گفته میشه. در واقع یک وب سایت مجموعه صفحات بهم پیوسته‌ای هست که شامل تعداد زیادی فایل با فرمت‌های متفاوته و در تعدادی پرونده، قرار گرفته. تفاوتی که بین طراح وب و برنامه‌نویس وب وجود داره اینه که طراح وب کسیه که قالب و ظاهر یک سایت رو طراحی می‌کنه و کاربر اون رو مشاهده می‌کنه؛ به این بخش (Client Side)می‌گن. اما برنامه‌نویس وب، شخصیه که کد مربوط به یک سایت رو می‌نویسه(Server Side).
انواع وب سایت‌ها
به طور کلی، وب سایت‌ها به دو گروه وب سایت های‌استاتیک یا ثابت و وب سایت‌های داینامیک یا پویا تقسیم می‌شن.
وب سایت‌های استاتیک یا ثابت (Static Website)
وب سایت‌های ثابت، استاتیک یا ایستا، به وب سایت‌هایی گفته میشه که محتوای ثابتی دارن و تغییر چندانی نمی‌کنن. این وب سایت‌ها یکبار طراحی می‌شن و اطلاعات مربوطه در اونها قرار می‌گیره؛ پس از اون برای تغییر محتوای وب سایت نیاز به یه طراح سایت هست. زبان برنامه‌نویسی سایت‌های استاتیک بیشتر HTML و Java Script و CSS هست. وب سایت‌های استاتیک امکان به‌روزرسانی توسط صاحب وب سایت رو ندارن. همچنین وب سایت‌های ایستا، هزینه کمتری نسبت به سایت های داینامیک دارن.
وب سایت‌های پویا (Dynamic Website)
وب سایت‌های داینامیک، در مقابل وب سایت‌های استاتیک قرار دارن. در وب سایت‌های داینامیک، یک بار عمل کدنویسی انجام میشه و به آسونی میشه محتوا رو منتشر کرد. محتوای سایت‌های داینامیک بعد از طراحی، توسط افراد عادی که دسترسی به پنل داشته باشن، قابل تغییره. به طور کلی برای وب سایت‌های داینامیک از زبان‌های ASP.Net و PHP استفاده میشه .
از مزیت‌های سایت‌های داینامیک میشه به نداشتن هیچ محدودیتی برای ایجاد، تغییر و حذف محتوا اشاره کرد. با توجه به اینکه در سایت‌های داینامیک از زبان‌های برنامه‌نویسی پیشرفته استفاده میشه امکانات زیادی در اونها وجود داره که میشه به ایجاد پیج‌های هوشمند، فرم‌ها، جستجوهای پیچیده و… اشاره کرد.
زبان‌های کاربردی
HTML:
HTML اولین، پرکاربردترین، ساده‌ترین و مهم ترین زبان برای طراحی صفحات وب هست. به طور مثال شما می‌تونید با کلیک راست بر روی صفحه و انتخاب گزینه view page source تمام کدهای HTML همین صفحه رو ببینید.
HTML یکی از معدود زبان‌هایی هست که مرورگرها قابلیت خوندن و معنی کردن اون رو به صورت مستقیم دارن. اگر به طراحی وب علاقه دارید، اولین زبانی که قراره یاد بگیرید، این زبان خواهد بود. HTML زبان برنامه‌نویسی نیست، بلکه زبانی برای نشونه‌گذاری ابرمتنه. از طرفی،HTML رو نباید به عنوان زبانی برای صفحه آرایی به کار برد. بهتره این کار رو به CSS سپرد. به‌طور کلی از HTML برای ساختار کلی صفحه وب، و ازCSS برای زیباسازی و دیزاین CSS استفاده میشه.
CSS:
CSS مخفف جمله Cascading Style Sheets هست که در کنار HTML به ایجاد وب سایت کمک می‌کنه.
به‌طور کلی CSS روشی برای نمایش چیدمان و ظاهر صفحات وبه. سه روش برای نوشتن کدهای CSS وجود داره:
: In Lineدر این روش ویژگی‌ها، در تگ مربوطه در همان صفحه HTML نوشته میشه.
Internal:در این روش ویژگی‌ها در قسمت <head> سایت با نوشتن تگ <style> مشخص میشه
External: در این روش یک صفحه با پسوند .css ساخته میشه و از صفحه HTML در قسمت head لینکی برای اون در نظر گرفته میشه و این دو صفحه رو به هم مرتبط می‌کنه. این روش، بهترین روش نوشتن CSS هست.
این رو در نظر بگیرید که به HTML و CSS نمی‌شه زبان برنامه‌نویسی گفت. چون ویژگی‌های زبان‌های برنامه‌نویسی رو ندارن. بهتره اونها رو زبان‌های تگ گذاری در نظر بگیریم.
Bootstrap:
فریم ورک Bootstrap مجموعه ای از ابزارهای رایگان برای ایجاد صفحات وب و نرم افزارهای تحت وبه که شامل دستورات HTML ، CSS و توابع JAVA SCRIPT جهت تولید و نمایش فرم‌ها، دکمه‌ها، تب‌ها، ستون ها و سایر المان های مورد نیاز طراحی وب هست.
Less & Sass:
Less و Sass هر دو به بهینه‌سازی کدهای زبان CSS کمک می‌کنن. مهم‌ترین کاری که Less و Sass انجام می‌دن، جلوگیری از تکرار کدهای CSS هست.
JavaScript:
جاوا اسکریپت یک زبان اسکریپت نویسیه که بیشتر با کد های HTML در ارتباطه و مثل کدهای HTML روی پلت فرم‌های مختلف اجرا میشه. جاوا اسکریپت به یکی از محبوب‌ترین زبان‌های برنامه‌نویسی در وب تبدیل شده و متأسفانه اشتباهی که بیشتر افراد می‌کنن، اینه که این زبان‌برنامه نویسی رو با جاوا اشتباه می‌گیرن و این برداشت رو دارن که این زبان، از مشتقات زبان جاوا هست. در صورتی که اینطور نیست! به کمک زبان جاوا اسکریپت شما می‌تونید عملکرد بخش‌های مختلف وب سایت رو کنترل کنید و حالات و شرایط خاصی رو پیاده‌سازی کنید.
jQuery:
jQuery یکی از فریمورکهای JavaScript هست که امکان استفاده ازقابلیت های از پیش آماده شده رو فراهم می‌کنه، در واقع jQuery کتابخانه جاوا اسکریپته که به کمک اون می‌تونیم نرم‌افزارهای مبتنی بر Ajaxو حتی حرکات انیمیشنی با افکت‌های پیشرفته رو ایجاد کنیم. به کمک jQuery می‌تونیم صفحات وب قدرتمند و داینامیکی(پویا) رو طراحی کنیم.
Ajax:
کلمه Ajax مخفف (Asynchronous JavaScript & XML) به معنی جاوااسکریپت و XML غیرهمزمانه. شاید نشه Ajax رو به سادگی توصیف کرد ولی می‌تونیم در یک جمله بگیم که Ajax به ما این امکان رو می‌ده که بخش‌هایی از صفحه رو بدون بارگذاری کل صفحه به روزرسانی کنیم. مسلماً این قابلیتیه که خیلی‌ها به دنبالش هستند چون بارگذاری مجدد صفحات وب زمان‌بر و خسته کننده‌ست و باعث میشه پهنای باند هم بیش از حد مصرف شه. Ajax تکنیکی برای ایجاد صفحات وب سریع و داینامیک هست و به صفحات وب این امکان رو می‌ده که به صورت غیر همزمان و تنها با تبادل اطلاعات کم با سرور، بخشی از صفحه رو به‌روزرسانی کنن. یعنی میشه تنها بخش‌هایی از صفحه رو بدون آپلود کل صفحه به‌روزرسانی کرد.
on طراحی وب چیه؟