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

مقدمه

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

جمع بندی

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

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

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

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

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