مقدمه طراحی سایت

مقدمه ای بر آموزش طراحی سایت

مقدمه طراحی سایت

دو دسته بندی کلی برای وبسایت ها وجود دارد :

  • سایت های استاتیک
  • سایت های داینامیک

 

سایت های استاتیک

در سایت ایستا یا Static طراحی سایت یک بار و بیشتر با استفاده از HTML ، CSS  ، JAVA SCRIPT  و PHP  یا  ASP انجام میشود. در این نوع سایت ها معمولا تعداد تغییرات کم بوده و ویرایش محتوا باید توسط طراح حرفه ای سایت انجام شود. با توجه به حجم نسبتا کم کد نویسی در سایت های استاتیک سرعت بارگذاری آن بالا بوده و همین امر تاثیر بسزایی در بهبود تجربه کاربری آن دارد. لذا از نظر موتورهای جستجو مانند گوگل نیز سریعتر موفق به کسب تاییدیه میشوند و در نتایج جستجو ظاهر میگردند.

  •  سایت های داینامیک

در سایت های پویا یا Dynamic همانطور که از اسم آن مشخص است به راحتی می توانید تغییرات مورد نظر خود را اعمال کنید . این نوع وب سایت ها دارای یک سیستم مدیریت محتوا هستند که مدیر سایت می تواند تغییرات را از طریق این سیستم مدیریت محتوا یا CMS (Content Management System)  اعمال کند.

با استفاده از CMS ها  شما میتواند اقدام به درج، حذف یا ویرایش محتوای سایت خود کنید و محدودیتی در این امر ندارید. شما می توانید سایت داینامیک یا پویا و سیستم مدیریت محتوای خود را با استفاده از HTML , CSS , JAVASCRIPT  و PHP  یا  ASP طراحی کنید یا از  CMSهای آماده مانند WORDPRESS , JOOMLA , DRUPAL  و … استفاده کنید.

پس از آشنایی با انواع وبسایت حالا نوبت به طراحی سایت میرسه ، در ادامه جاناRFJANA  به شرح مراحل طراحی وب سایت می پردازد.

یک سایت از 2 قسمت اصلی تشکیل شده:

  • ظاهر سایت یا FRONTEND

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

  • HTML
  • CSS
  • JAVASCRIPT
  •  JQUERY
  • و …
  • برنامه نویسی سمت سرور یا BACKEND

 برنامه نویسی سمت سرور یا BACKEND انجام کارها و نوشتن کدهایی است که در پشت صحنه اجرا میشوند. به همین دلیل  آن را back end  یا پشت صحنه می نامند. این کدها می توانند به پایگاه داده وصل شوند، اطلاعات را وارد پایگاه داده کرده یا اطلاعات پایگاه داده را بخوانند ، به کاربران نمایش دهند و…

 مهم ترین زبان های برنامه نویسی سمت سرور نیز زبان های زیر می باشند:

  • PHP
  • ASP.NET
  • PYTHON
  • و …

برنامه نویسی که هم به BACKEND  و FRONTEND  مسلط باشد نیز برنامه نویس FullStack نام دارد.

معرفی زبان های برنامه نویسی سایت

  1. در ابتدا باید HTML را بیاموزید که مخفف Hyper Text Markup Language ( زبان نشانه گذاری ابر متنی ) می باشد ، HTML یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاری است که چهارچوب تمام صفحات وب سایت است . به اين معنی که بخش های مختلف توسط اجزايی به نام تگ از هم جدا شده، که هر کدام دارای کاربرد و خواص مربوط خود هستند ، شما با استفاده از HTML به مرورگر می فهمانید کدام قسمت از برنامه شما یک پاراگراف است ، کجا عکس است ، کجا جدول است و به همین ترتیب در مورد سایر عناصر موجود در صفحات وب .
  2. پس از یادگیری HTML و آشنایی کامل با تگ ها باید به سراغ CSS برویم . در CSS شما به روش های مختلف به همان تگ هایی که در HTML نوشته اید دسترسی پیدا کرده و استایل  مورد نظر خود را که شامل رنگ ، اندازه ، فونت و به طورکلی نحوه نمایش تگ مورد نظر است به آن ها می دهید . در واقع  html  اسکلت سایت و CSS ظاهر و رنگ و لعاب سایت است.
  3. با استفاده ازHTML  اسکلت ساختمان ما درست شد ، سپس با استفاده از CSS میلگرد ها را به اندازه های دلخواه در آوردیم و تمامی عناصر را کنار هم چیدیم و بالا رفتیم ، دیوارها را رنگ زدیم و نمای ساختمان را زیبا کردیم . ساختمان ما زیباست ولی درب و پنجره آن تکمیل نیست حالا نوبت آن است که از JAVASCRIPT  استفاده کنیم و با کمک آن حالتی بوجود بیاوریم که وقتی دستگیره در را می چرخانیم در باز شود ، به طور کلی JAVASCRIPT  کلیه تعاملات بین سایت و بازدید کنندگان را مدیریت می کند . بطور مثال ، وقتی در یک وبسایت روی یک دکمه کلیک می کنیم این دستوارت JAVASCRIPT هستند که تعیین می کنند چه اتفاقی بیوفتد. اگر توجه کرده باشید در اسلاید ها وقتی روی کلید اسلاید بعدی کلیک می کنید عکس بعدی نمایش داده می شود که این کار با استفاده از جاوا اسکریپت پیاده سازی شده است یعنی برنامه نویسی به این صورت انجام شده که وقتی روی فلش بعدی کلیک شد، عکس فعلی پنهان شده و عکس بعدی نمایش داده شود .
  4. پس از جاوا اسکریپت نوبت به JQuery ( جی کوئری ) می رسد که کتابخانه ای است که به زبان  Javascript  نوشته شده و با استفاده از آن می توانید راحت تر کد نویسی کنید با استفاده از آن سرعت برنامه نویسی شما افزایش می یابد و استفاده از افکت ها و انیمیشن های پیشفرض موجود در آن طراحی های شما را جذاب تر و زیباتر می کند.

ابزار مورد نیاز طراحی سایت

برای نوشتن کدها بهتره از ادیتور هایی که قابلیت های پیشرفته ای مثل پیشبینی کد ، کامل کردن خودکار کد (auto completion) ، رنگ گذاری کلمات کلیدی ، تشخیص خطاها ، فرمت بندی کدها و … رو دارند استفاده کنید تا سریعتر کد بزنید ، درصد خطاتون پایین بیاد و کارتون راحتتر و استانداردتر باشه .

برنامه های زیادی در این زمینه وجود داره که می تونید از اونها استفاده کنید. من اسم بعضی از معروف ترین هاشو در زیر میارم که میتونید سرچ و دانلود کنید :

  • PhpStorm (html,css,javascript,php)
  • Microsoft Visual Studio (asp.net)
  • Microsoft Expression Web
  • Notepad++
  • Adobe Dreamweaver
  • Komodo Edit
  • Aptana Studio
  • NetBeans

مقالات مرتبط جانا RFJana

آخرین پروژهای جانا


سوالات و دیدگاه های خود را با ما در میان بگذارید.

نظرات