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

طراحی اولیه

کار خوب و مهمی که حتماً قبل از شروع کردن به ساختن چیزی باید انجام بدیم، اینه که همه ی ایده هایی که درباره ی اون توی سرمونه روی کاغذ بیاریم و شکل اولیه اون رو بکشیم. این کار تمرین خوبیه برای اینکه از تلف شدن وقتمون موقع کدنویسی، جلوگیری کنیم.
ممکنه ایده ای که تو سرمونه با اون چیزی که روی کاغذ می کشیم، فرق هایی داشته باشه، یا ممکنه موقع طراحی اولیه برامون سوالایی پیش بیاد یا مشکلاتی به وجود بیان، شاید طرحمون خیلی شلوغ و درهم و برهم باشه، همه ی این مشکلات زمانی معلوم میشن که ما طرحمون رو بکشیم. ممکنه اصلاً از طرح اولیه مون، خوشمون نیاد، این اصلاً اشکالی نداره، ما می خوایم قبل از اینکه شروع به کار کنیم و بیخودی زحمت بکشیم، اشکالات کارمون رو بفهمیم.
طراحی اولیه ی وب سایت شهر Tuts+

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

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

Bluefish برای کامپیوتر هایی که سیستم عاملش ویندوزه، مناسبه و Atom هم برای کامپیوتر هایی که از سیستم عامل Mac استفاده می کنند. شاید براتون سوال شده که سیستم عامل چیه؟ سیستم عامل همون نرم افزار اصلی کامپیوتر شماست که با استفاده از اون شما می تونید برنامه های دیگه مثل Word رو اجرا کنید.

فایل های لازم برای درست کردن وب سایت

همون طور که قبلاً هم درباره اش صحبت کردیم، هر سایت از مجموعه ای از فایل ها تشکیل شده که همه با هم توی یک پوشه نگه داری میشن تا مرورگر بتونه به اونا دسترسی داشته باشه. وب سایت شهر +Tuts هم یک فایل HTML داره که با پسوند html. ذخیره میشه، یک فایل CSS داره که با پسوند css. ذخیره میشه و چهار تا عکس هم داره که توی پوشه ی تصاویر یا همون images نگه داری میشه. این پوشه ی تصاویر توی یک پوشه ی اصلی قرار داره که توی اون پوشه ی فایل های اچ تی ام ال و سی اس اس هم نگه داری میشن. حتماً دارین به این فکر می کنید که پسوند چیه؟ پسوند ها مجموعه ای از چند حروف الفبا هستن که بعد از یک نقطه و بعد از اسم فایل قرار می گیرن، کار این پسوند ها اینه که نشون میده اون فایل از چه نوعیه، مثلاً عکسه، متنه یا هر فایل دیگه.
همون طور که گفتیم، عکس ها توی پوشه ی مخصوص خودشون به اسم «images» قرار می گیرن که این پوشه هم در یک پوشه ی اصلی دیگه قرار می گیره، مثل عکس زیر:
توی تصویر بالا، ما یه عکس داریم که به اسم town.svg ذخیره شده، (svg. هم پسوند یه نوع از انواع مختلف عکسهاست) این عکس رو توی پوشه ای به اسم «images» نگه داشتیم، این کار باعث میشه که فایل ها مرتب و منظم باشن و بعداً راحت بتونیم پیداشون کنیم.
هر دو روشی که در بالا می بینیم درست هستند، اما ما سعی می کنیم همچون عکس سمت راست، از فولدرهای بیشتری استفاده کنیم تا کارمون تمیز تر بشه!

مرورگرها

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

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

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

منتظرقسمت سوم باشید