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

تعریف وب سایت

وب سایت مکانی از اینترنت است که صفحه یا تعدادی از صفحات را در خود برای هدفی خاص)تجاری و غیر تجاری) نگهداری می کند.

تعریف طراحی وب سایت

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

برای طرحی وب از کجا باید شروع کنیم؟(مجتمع فنی تهران)

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

وب سایت‌های ایستا (Static Website)

سایت های ثابت یا ایستا، به وب سایت هایی گفته می شود که محتوای ثابت دارند. این سایت‌ها یکبار طراحی می‌شوند و اطلاعات مورد نیاز در داخل آن‌ها قرار می‌گیرد و پس از آن برای تغییر در آن‌ها نیاز به یک طراح حرفه‌ای یا نیمه حرفه‌ای سایت است. در واقع در این مرحله شما سایت را طراحی و پوسته آنرا آماده سازی می نمائید. زبان برنامه نویسی اینگونه از سایتها غالباً HTML و Java Script هستند که در نوع توسعه یافته تر ازCSS ، نیز بهره گرفته می‌شود.

وب سایت های پویا (Dynamic Website)

وب سایت های پویا، در مقابل وب سایت های ایستا قرار دارند. در وب سایت های پویا، شما یکبار کدنویسی هسته را انجام می دهید و سپس به آسانی می توانید مطالب را منتشر کنید. محتوای سایتهای داینامیک بعد از طراحی، توسط افراد عادی که دسترسی به سیستم مدیریت محتوای سایت را داشته باشند قابل تغییر است. زبان برنامه‌نویسی وب سایتهای پویا می‌تواند براساس نیاز متفاوت باشد اما عمدتاً از زبانهای ASP.Net و PHP استفاده می‌شود . در اینگونه از سایتها ابتدا اسکلت سایت توسط طراح ایجاد می‌شود و سپس محتوا توسط مدیران سایت‌ها تغییر می‌کند.

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

HTML

زبان HTML اولین ، ساده ترین ، پرکاربردترین و مهم ترین زبان برای طراحی صفحات وب می باشد. همین صفحه ای که شما در حال حاضر مشغول مطالعه آن هستید، هم با این زبان نوشته شده است. شما می توانید با کلیک راست بر روی صفحه و انتخاب گزینه view page source تمام کدهای HTML صفحه را مشاهده کنید. HTML یکی از معدود زبان هایی می باشد که مرورگرها قابلیت خواندن و معنی کردن آن رو به صورت مستقیم دارند. و کاربرد بیشتر زبان های مانند PHP و … هم در واقع برای مدیریت بهتر بر روی HTML است. به صورت ساده تر اگر شما علاقه مند به طراحی وب هستید اولین زبانی که باید فرا بگیرید این زبان خواهد بود. اچ‌تی‌ام‌ال زبان برنامه‌ نویسی نیست، بلکه زبانی برای نشانه‌گذاری ابرمتن است و اساساً برای ساخت‌ مند کردن اطلاعات و جدایش اجزای منطقی یک نوشتار نظیر عناوین، تصاویر، فهرست‌ ها، بندها و جداول به کار می‌رود. از سوی دیگر، HTML را نباید به عنوان زبانی برای صفحه‌ آرایی یا نقاشی صفحات وب به کاربرد، این وظیفه اکنون بر دوش فناوری‌های دیگری همچون CSS است. در واقع امروزه از HTML برای ساختار کلی صفحه وب استفاده می شود و وظیفه زیباسازی و صفحه آرایی بر عهده CSS است.

CSS

زبان CSS یا Cascade Style Sheets زبان برنامه نویسی می باشد که برای غلبه بر مشکلاتی که در طی زمان با استفاده از HTML بوجود آمده است. عملا این زبان برنامه نویسی، مکملی بر زبان باستانی HTML است و سعی در پر کردن نقاط ضعف و خلاء های آن دارد. هدف از تولید CSS در واقع جداسازی اطلاعات محتوا (که توسط زبانی مانند HTML نوشته شده اند) از اطلاعات ظاهری مانند صفحه بندی، رنگ و سایز و نوع فونت می باشد. این جداسازی موجب افزایش سرعت در دسترسی به سایت، انعطاف پذیری بیشتر برای کنترل ویژگی های ظاهری، قابلیت طراحی چندین صفحه با یک فرمت یکسان و جلوگیری از پیچیدگی و انجام کارهای تکراری در طراحی وب سایت می گردد.

Bootstrap

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

Less & Sass

Less و Sass هر دو به بهینه سازی کدهای زبان CSS کمک می‌کنند. مهمترین کاری که Less و Sass انجام می‌دهند، جلوگیری از تکرار کدهای CSS است.

Less یکی از فریم‎ ورک‎ های CSS است که از قوانین CSS استفاده می‎کند؛ Less توسط روش ‎هایی مانند متغیرها، حسابگرها، mixin ها و توابع، قابلیت‎ های CSS را توسعه داده و آن را پویا ساخته است. به گونه ای که می‎ توان کدهای لِس را در یک فایل CSS نوشت. کامپایلر اصلی Less با استفاده از جاوا اسکریپت نوشته شده است و کد های نگارش یافته را به فرمت استاندارد CSS تبدیل می‎کند و خاصیت‎ های پویایی را به CSS اضافه کرده است.

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

JavaScript

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

jQuery

jQuery یکی از فریم‎ورک‎های JavaScript است که امکان استفاده ازقابلیت های از پیش آماده شده ای را فراهم می‎آورد، در واقع jQuery کتابخانه جاوا اسکریپت است که به کمک آن می‎توان نرم‌افزارهای مبتنی بر Ajax، برنامه‌های سطح پایین مبادله ای (ارتباط مرورگر با کاربر) و حتی حرکات انیمیشنی با افکت‌های پیشرفته را ایجاد نمود. به کمک jQuery می‎توان صفحات وب قدرتمند و داینامیک(پویا) طراحی نمود. با توجه به اینکه جی کوئری برخی از میانبرهای نوشتاری را ارائه می‌کند اما نمی‌توان آن را جایگزین جاوا اسکریپت دانست. چرا که زبان اصلی نگارش کدها همان جاوا اسکریپت می‌ باشد. جی کوئری هیچ دخالتی در کدهای HTML نمی‌کند. از دیگر نوآوری‌های jQuery می‌توان به انتخاب تگ‌ها بر اساس قواعد CSS اشاره نمود که باعث سهولت در اجرای پروژه می‌شود.

Ajax

کلمه Ajax مخفف (Asynchronous JavaScript & XML) به معنی جاوااسکریپت و XML غیرهمزمان است. شاید نتوان Ajax را به سادگی توصیف کرد ولی میتوان در یک جمله گفت Ajax ما را قادر میسازد بخشهایی از صفحه را بدون بارگذاری کل صفحه (refresh) به روز رسانی کنیم. مسلماً این قابلیتی است که خیلی ها به دنبال آن هستند زیرا بارگذاری مجدد صفحات وب همواره زمانبر و خسته کننده است ضمن اینکه باعث میشود پهنای باند کاربر نیز بیش از حد مصرف شود. در واقع Ajax تکنیکی برای ایجاد صفحات وب سریع و پویا میباشد و به صفحات وب این امکان را میدهد که به صورت غیر همزمان و تنها با تبادل اطلاعات اندکی با سرور، بخشی از صفحه را به روز رسانی کنند یعنی میتوان تنها بخش هایی از صفحه را بدون بارگذاری کل صفحه به روز رسانی کرد. در صورتی که صفحات معمولی باید کل صفحه را به منظور تغییر محتوا به روز رسانی کنند.

سخن آخر

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