قدم شماره صفر طراحی صفحات وب

مقدمه

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

صفحات وب چی هستن؟ کلا سایت چیه؟

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

سایت ها کجا هستن؟

شاید برای شما سوال بشه که اطلاعات توی سایت ها کجا هستن؟ بالاخره باید یه جایی ذخیره شده باشن که ما بتونیم اونها رو ببینیم دیگه… دقیقا همینطوره. برای این که این موضوع رو درست درک کنیم بهتره اول با ساختار اینترنت کمی آشنا بشیم. همونطور که توی کامپیوتر شخصی یا لب تاپ و یا حتی گوشی موبایلتون فضایی وجود داره که اطلاعات اونجا دخیره میشن، توی دنیای اینترنت هم باید اطلاعات روی کامپیوترها ذخیره و موقع استفاده پردازش بشن. اما این کامپیوتر ها از کامپیوترهایی که ما توی خونه هامون داریم خیلی خفن ترن. اسم این کامپیوتر ها سرور (server) هست. سرور ها تو یه مکان به اسم دیتا سنتر (data center) نگهداری میشن. توی هر دیتا سنتر کلی از این سرورها وجود داره که روی هر کدوم کلی اطلاعات هست. حالا اگه گفتی اطلاعات روی این سرور ها چیه؟؟ احسنت !!! همون سایت هایی هستن که ما صفحات وب اونها رو تو اینترنت میتونیم ببینیم.

دیتا سنتر

دیتا سنتر

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

صفحات وب برای این که کار کنن چی لازم دارن؟

خب توی قسمت قبلی فهمیدیم که اولین چیزی که لازمه هاست اشتراکی یا سرور اختصاصیه که اطلاعات روی اون ذخیره بشه.

حالا وقتی اطلاعات صفحات وب توی فضای مربوطه ذخیره شدن برای دیده شدن به چی نیاز دارن؟ یه راهنمایی میکنم شما یک فایل رو توی کامپیوتر خودتون ذخیره کردین. حالا برای این که بخواین اونو ببینین چی کار باید بکنین؟ باید برید تو آدرسی که اون رو ذخیره کردید و اونو باز کنید. پس ما به یه آدرس نیاز داریم. توی اینترنت هم صفحات وب به آدرس نیاز دارن که بتونیم بریم سراغشون. به این آدرس دامنه یا دامین(domain) میگیم. هر سایتی دامنه اختصاصی خودش رو داره و مخاطب با نوشتن آدرس میتونه اون سایت رو ببینه.

حالا اطلاعات ذخیره شدن روی هاست ، دامین یا آدرس اختصاصی مربوط به خودشون رو هم دارن. دقیقا چی قراره به نمایش دربیاد؟ چیزی که توی صفحات وب دیده میشه، نتیجه مجموعه ای از دستوراته که به زبان های مختلف نوشته شدن. این دستورات و یا کد ها به دو گروه تقسیم میشن. کدهای سمت کاربر (client side code) و کدهای سمت سرور (server side code)

کدهای تشکیل دهنده صفحات وب

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

فرق این دو دسته چیه ؟

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

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

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

جمع بندی

"طراحی

توی این جلسه یاد گرفتیم که :

  • سایت ها و صفحات وب چی هستن
  • سایت کجا نگهداری میشه و این که کلا فضای اینترنت چه شکلیه
  • سایت برای این که کار کنه چی لازم داره
    1. هاست یا سرور
    2. دامنه یا دامین
    3. کدهای سمت کلاینت
    4. کدهای سمت سرور
    5. دیتابیس یا پایگاه داده

انشاا… توی جلسات بعدی در مورد جزئیات این موارد بیشتر صحبت میکنیم و کم کم وارد فضای طراحی میشیم.

حرف آخر این جلسه

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

موفق و پر انرژی باشید.

4 پاسخ
  1. کینگ آرتور
    کینگ آرتور گفته:

    سلام . ممننون بابت مطلب خوبتون
    یه سوال داشتم. مطالبی که روی هاست سایت میریزیم مثل عکس و فیلم و فایل های دیگه همشون تو دیتابیس میرن؟
    یعنی کلا همه چیز توی دیتابیس ذخیره میشه؟

    پاسخ
    • امیر طاهر
      امیر طاهر گفته:

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

      پاسخ
  2. نگین معتضد
    نگین معتضد گفته:

    سلام . من میخوام یه سایت آرایشی با وردپرس درست کنم. میخواستم اگه بشه خودم این کارو بکنم
    نیازه که همه چیزهایی که گفتین رو یاد بگیرم؟
    آخه خیلی از دوستام با وردپرس کار میکنن ولی چیزهایی که شما گفتی رو اصلا بلد نیستن

    پاسخ
    • امیر طاهر
      امیر طاهر گفته:

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

      پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *