طراحی سایت ، از صفر تا صد

راهنمای ساخت سایت؛ همه آنچه که درباره طراحی وب‌سایت باید بدانید

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

وب با وب سایت چه تفاوتی دارد؟

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

چرا اشخاص و کسب و کارها به سایت نیاز دارند؟

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

برای ساخت سایت به چه چیزهای نیاز است؟

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

دامنه: دامنه سایت ها، گستردگی فراوانی دارد و افراد می توانند، هر کدام از آنها را برای خود یا کسب و کارشان انتخاب کنند. معروف ترین دامنه های جهانی سه دامنه: Com, net ,org هستند که Com از کلمه Commerical که به معنای تجاری است، گرفته شده. Net از کلمه Network به معنی شبکه و org از کلمه organization به معنی سازمان گرفته شده است. بهتر است از هر دامنه در زمینه مخصوص به خودش استفاده شود.
امروزه با گسترش وب، دامنه های بسیاری معرفی و در دسترس قرار گرفته اند. برخی از آنها عبارتند از: Biz٬ Info٬ Pro٬ Aero٬ Coop٬ GOV٬ EDU٬ WS٬ TV٬ BZ٬ ir و …

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

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

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

سیستم مدیریت محتوا: CMS که مخفف Content Management System می باشد. همان نرم افزاری است، که به کمک آن محتوای سایت مدیریت می شود. به CMS ها نرم افزار سایت ساز نیز گفته می شود. چرا که به کمک آنها چهار چوب اصلی سایت آماده می شود و به راحتی افراد قادر به مدیریت بخش های مختلف سایت هسند. وردپرس یکی از محبوب ترین و ساده ترین سیستم های مدیریت محتوا است. با کمک وردپرس در مدت زمان کوتاهی، بدون هیچ کد نویسی می توان یک سایت دینامیک طراحی کرد.

مراحل راه اندازی یک سایت

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

پهنای باند هاست چیست؟

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

آشنایی با سیستم مدیریت محتوا و انواع آن

سیستم مدیریت محتوا، یا همان CMS، کوتاه شده عبارت “Content management system” می باشد. CMS یک برنامه رایانه ای است، که امکان انتشار محتوا، ویرایش، مدیریت، حذف و … را برای یک وب سایت فراهم می سازد.
مدیریت وب سایت به کمک ابزار موجود در CMS بسیار ساده است. به طوری که نویسنده یا مدیر سایت می تواند، بدون هیچ کدنویسی یا دانش برنامه نویسی، محتوا به سایت بیافزاید یا اینکه آنرا تغییر داده و حذف کنند.
سیستم مدیریت محتوا را بر روی فضای هاست یا همان وب سرور نصب می کنند و پس از آن تغییر شکل ظاهری سایت، مدیریت محتوا، ارتباط با کاربران و هر عملی که در سایت صورت می گیرد، از طریق همین CMS اجرا می شود. زمان ساخت سایت می توان از هر یک از انواع CMS استفاده کرد.
همانطور که می دانید انواع مختلف از CMS های رایگان، پولی، عمومی و اختصاصی وجود دارد، که هر کدام کارایی و مزایا و معایبی دارند. برای مثال می توان به CMS های متن باز وردپرس، جوملا، دروپال و پرستاشاپ اشاره کرد.
هیچ محدودیتی وجود ندارد که، برای ساخت سایت از CMS متن باز استفاده کنید یا آنکه CMS اختصاصی خودتان را طراحی و اجرا کنید. در حال حاظر سیستم مدیریت محتوای WordPress محبوب ترین در بین CMS های متن باز و رایگان است.
معمولا همه سایت های پویا (داینامیک) از سیستم مدیریت محتوا استفاده می کنند. در غیر این صورت برای کوچکترین تغییرات در محتوا یا قالب سایت، نیاز به برنامه نویسی خواهد بود.

معرفی چند سیستم مدیریت محتوای متن باز و رایگان

WordPress

بی شک وردپرس یکی از قوی ترین و انعطاف پذیرترین CMS ها است. کاربران ایرانی می توانند از نسخه فارسی وردپرس استفاده کنند و از تمام مزایای آن بهرمند شوند.
نصب و راه اندازی وردپرس فرایندی آنقدر سریع و ساده است، که به نصب پنج دقیقه ای اش مشهور است. با استفاده از وردپرس و بدون داشتن هیچ دانش برنامه نویسی، می توانید با کمک آموزش نصب وردپرس، اقدام به ساخت سایت خود کنید. البته باید به اندازه کافی دانش استفاده از کامپیوتر را داشته باشید، چرا که مدیریت پنل وب سرور کمی پیچیده است.
به طور کلی برای نصب و راه اندازی وردپرس باید آخرین نسخه فارسی آنرا از آدرس www.wp-persian.com دریافت کنید. سپس فایلی که دانلود کردید را برروی هاست مربوط به سایت خود آپلود کنید. سپس اقدام به نصب و پیکربندی آن کنید.
با کمک وردپرس می توانید انواع سایت های وبلاگی، خبری، آموزشی، گردشگری، دانلود فایل، و … را راه اندازی کنید. این CMS افزونه های بسیاری در مخزن خود دارد که بیشتر آنها رایگان هستند و جهت افزودن قابلیت های بیشتر به سایت کاربرد دارند. برای مثال می توان به افزونه ووکامرث اشاره کرد که، برای بخش خرید سایت های فروشگاهی کاربرد دارد.
از مزایای وردپرس می توان به بروزرسانی های مستمر و رایگان، انعطاف پذیری، نصب سریع و آسان، ابزار پیشرفته و کامل مدیریت محتوا، پشتیبانی از قالب های متنوع و پشتیبانی از هزاران افزونه اشاره کرد.

Joomla

همانند وردپرس، جوملا نیز رایگان است و از زبان فارسی پشتیبانی می کند. برای دریافت فایل فارسی آن می توانید به آدرس www.joomlafarsi.com مراجعه کنید.
جوملا یکی از قدیمی ترین نرم افزار های سایت ساز است. به کمک این CMS، به مدیریت محتوا در سایت بپردازید. جوملا را می توان بدون هیچ دانش برنامه نویسی پیاده و مدیریت کرد. شاید گرافیکی بودن، محیط کاربری زیبا و قدرتمند جوملا بیش از هر چیزی مورد توجه کاربران این پلتفرم باشد.
اپن سورس بودن جوملا این امکان را به کاربران می دهد، تا به کمک برنامه نویسان، تغییرات دلخواه را در سیستم مدیریت محتوا، ایجاد کنند و آنرا به هر صورت که می خواهند شخصی سازی کنند.
به طور کلی اگر بخواهیم مزیت های جوملا را بیان کنیم، باید به این موارد اشاره کرد: ایجاد صفحات گرافیکی، انعطاف پذیری، نصب ساده و سریع، قابلیت نصب قالب، ارتقاء رایگان، ابزار پیشرفته مدیریتی، پشتیبانی از افزونه ها و …

Drupal

دروپال نیز همه ویژگی های دو CMS قبلی را دارد. رایگان بودن، پشتیبانی از زبان فارسی و اوپن سورس بودن تنها بخشی از مزایای سیستم مدیریت محتوای دروپال است. با مراجعه به آدرس www.drupalcms.ir می توانید نسخه فارسی دروپال را دانلود و با کمک آن اقدام به ساخت سایت خود کنید.
دروپال سادگی را در کنار امکانات نامحدود فراهم آورده، تا کاربران بدون نیاز به صرف وقت و برنامه نویسی خاص، به همه امکانات مورد انتظارشان دست یابند.
مدیریت سریع و کامل محتوا، بروزرسانی های رایگان، کاربری ساده از جمله مزایایی هستند که دروپال به همراه دارد.

قالب سایت چیست و چگونه طراحی می شود؟

پیشتر توضیح دادیم که قالب سایت (Template)، همه آنچه که کاربران سایت مشاهده می کنند را، شامل می شود. در واقع وقتی صحبت از طراحی سایت می شود، بخش بزرگی از آن مربوط به همین طراحی قالب سایت و پیاده سازی آن می شود.
قالب سایت از رنگ بندی بخش های مختلف تا نحوه نمایش محتوا را، در بر می گیرد. تعداد ستون ها، لوگوی سایت، اندازه و نوع فونت نوشته ها، ریسپانسیو بودن، مکان قرار گیری هر المان و صدها مورد دیگر، توسط قالب سایت مشخص می شوند.
هر سیستم مدیریت محتوا در کنار قالب سایت کامل می شود و هر کدام از این دو بدون دیگری کامل نیستند. اگر می خواهید سایتی زیبا و کاربر پسند داشته باشید می بایست قالبی بهینه و حرفه ای برای سایت طراحی کنید.
به صورت پیشفرض زمانی که از CMS های رایگان برای مثال وردپرس استفاده می کنید، یک قالب رایگان بر روی سایت شما اعمال می شود. پس از آن با مراجعه به بخش مدیریت سایت می توانید هر نوع قالبی که می خواهید را، آپلود و اعمال کنید. اگر از آن دسته از افرادی هستید که به خاص بودن قالب سایت تاکید دارید، باید گفت که ناچار به استخدام برنامه نویس و طراح سایت هستید. اما در صورتی که تنها کاربردی بودن سایت برایتان مهم است، می توانید از انواع قالب های آماده رایگان و پولی استفاده کنید.
برای طراحی قالب سایت نیاز به دانش برنامه نویسی به زبان های html ،java ،css، Php و … است که، با توجه به امکانات مورد نیاز هر کدام از زبان های برنامه نویسی به کار می روند.
با جستجویی در وب هزاران قالب متناسب با سایت خود را خواهید یافت. هر کدام از این قالب ها را می توان به صورت دلخواه، شخصی سازی کرد و از امکانات آن بهره برد.
به این نکته توجه داشته باشید که، قالب سایت برای CMS های مختلف، متفاوت است و باید متناسب با همان سیستم مدیریت محتوا، طراحی شده باشد. برای مثال نمی توان قالب سایت وردپرسی را برای سایتی که با جوملا راه اندازی شده استفاده کرد.

نکات مهم در انتخاب قالب سایت

کاربردی بودن سایت یک طرف ماجراست اما زیبایی و بهینه بودن طرف دیگر ماجرا! یکی از موارد مهم در انتخاب قالب سایت، توجه به موضوع آن است. برای مثال قالب سایت های خبری، فناوری، گردشگری و … با هم متفاوت است.
ــ سازگاری با افزونه ها از موارد بسیار مهم در انتخاب قالب سایت است. اگرچه گفته شد که CMS ها همه نوع امکاناتی دارند، اما لازم است تا قالب سایت نیز با آنها سازگاری داشته باشد. فرض کنید می خواهید افزونه ای برای ارتباط با مشتریان را در یک سایت وردپرسی نصب کنید. اگر قالب سایت طوری طراحی شده باشد که با آن سازگاری نداشته باشد، نمی توانید از این امکانات استفاده کنید.
ــ قابلیت صفحه ساز گرافیکی به کاربر این امکان را می دهد که، بدون برنامه نویسی صفحات مختلف گرافیکی و زیبا برای سایت بسازد. سعی کنید قالبی که انتخاب می کنید این ویژگی را داشته باشد.
ــ قالب هایی که انتخاب می کنید نیاز به بروزرسانی دارند، تا امکانات و امنیت آنها همواره ارتقاء یابند. سعی کنید قالبی را انتخاب کنید که توسط سازنده اش بروزرسانی شود.
ــ پشتیانی در صورت بروز مشکلات، از دیگر مواردی است که، شرکت سازنده قالب، باید به آن رسیدگی کند. معمولا قالب هایی که گارانتی ندارند، از چنین مزایایی محرومند.
ــ بهینه سازی قالب که مربوط به سئوی سایت است، نیز از موارد بسیار مهم است. یک قالب بهینه و سئو شده می تواند به افزایش رتبه سایت کمک شایانی بکند.
ــ کم حجم بودن و کاربری ساده از دیگر نکاتی است که، در زمان انتخاب قالب سایت باید به آن توجه شود.
آخرین و مورد مهمی که به آن اشاره می کنیم این است که، قالب سایت با مرورگرهای مختلف سازگاری داشته باشد. کاربران از انواع مرورگرها برای وبگردی استفاده می کنند لازم است تا با همه آنها سازگاری داشته باشد. به این قابلیت browser compatibility می گویند.