وبلاگ داتیس دیزاین

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

از کجا باید شروع کرد ؟

خیلیها ممکنه ندونن از کجا برای طراحی وب سایت باید شروع کرد، من خودم یادم میاد اولین وب سایتی که درست کردم با برنامه هایی بود که کمتر کسی تو ایران باهاش کار میکرد، یکیش Adobe GoLive بود، یکی دیگه Adobe LiveMotion بود که قرار بود رقیب اون موقع Macromedia Flash باشه ولی شکست خورد، خب Photoshop هم که رفیق همیشگیم بوده و هست و خواهد بود. من خودم هیچوقت سعی نمیکردم کد بنویسم چون به طراحی گرافیک بیشتر علاقه داشتم برای همین تا مدت زیادی کدهای وب سایت من ماشینی بود. منظورم از کد ماشینی اینه که مثلا من یه آیتم رو از Toolbar مینداختم روی صفحه و نرم افزار مربوطه کد رو زحمت میکشیدن مینوشتن ! همیشه هم مخالف کسایی بودم که میگفتن نوشتن دستی کد خیلی بهتره، فکر میکردم ماشین همه کار رو بلده !

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

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

خب، امیدوارم قانع شده باشید که دستی کد بنویسید، میدونم سخته ولی باور کنید وقتی برای مدتی این کار رو بکنید و از نرم افزار استفاده نکنید، به خودتون افتخار می کنید، باور کنید شوخی نمیکنم، امتحان کنید.

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

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

بعد از اینکه HTML رو یاد گرفتید، میتونید برید سراغ XHTML، خیلی فرق نداره یه سری قوانین داره که باید در کدنویسی اونهارو رعایت کنید : آموزش XHTML.

خوشبختانه یا بدبختانه تو ایران میتونید راحت آموزشهای ویدیویی رو خریداری کنید، البته به زبان انگلیسی، من یه سایت معرفی میکنم که شما میتونید از اون خریداری کنید : خرید آموزشهای تصویری. این آموزشها خیلی مفید میتونن باشن، مخصوصا Lynda و Total Training.

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

اگه به حرف من گوش دادیدو دارید دستی کد مینویسید من دو تا نرم افزار رایگان بهتون معرفی میکنم که بتونید راحت توشون کد نویسی کنید، بعدا هم برای کد نویسی داینامیک کمکتون میکنه : Komodo Edit و Aptana Studio. البته Aptana محیط کاملتری هست ولی پیچیده تره اگر هم نمیخواین دستی بنویسین خب DreamWeaver انتخاب خوبیه.

خب حالا که به دنیای زیبای وب پا گذاشتید و کد نویسی رو هم شروع کردید نویت میرسه به کمی رنگ و لعاب دادن. بعد از اینکه HTML رو یاد گرفتید میرید سراغ CSS باز هم از این سایت میتونید یاد بگیرید : آموزش CSS.

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

Designer بشوم یا Developer ?

این سوالی بوده که من همیشه داشتم ولی هیچوقت جواب دقیقی نگرفتم، چون تو ایران متاسفانه همه کار رو از شما میخوان و هم اینکه تو دنیای گسترده وب در حال حاضر باید با هر دو جنبه آشنایی داشته باشید، ولی سعی کنید تمرکزتون رو روی مبحثی بذارید که بیشتر به آن علاقه دارید. من خودم Design رو خیلی بیشتر دوست دارم ولی مجبورم کدنویسی هم بکنم. البته باید بگم منظورم از کد نویسی، کد نویسی داینامیک و Server Side هست، مثل ASP، PHP و یا زبانهای دیگه. اگه میخواین طراح بشین باید بتونین یه قالب رو که مثلا در Photoshop آماده میکنین به کد HTML و CSS تبدیل کنید و این کد نویسی با کد نویسی داینامیک فرق داره.

Designer چه چیزایی را باید بداند ؟

• آشنایی کامل با HTML و CSS.
• ساخت قالب یک وب سایت با برنامه گرافیکی و تبدیل آن قالب به HTML و CSS.
• آشنایی با نرم افزارهایی مثل Photoshop – Flash – Illustrator
• دارای خلاقیت و ذوق برای ساخت قالب
• آشنا بودن با گرافیک در وب سایت ها و ساخت انیمیشن
• آشنایی با اصول طراحی در وب و به روز بودن طرح
• آشنایی با انواع CMS ها و نرم افزارهای مدیریت محتوا و وبلاگها برای ساخت Skin
• آشنایی داشتن با XML – Javascript- AJAX

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

برای ایجاد جلوه های متحرک هم میتونید از نرم افزار Flash استفاده کنید.

Developer چه چیزهایی رو باید بداند ؟

• آشنایی کامل با HTML و CSS
• آشنایی کامل با حداقل یک زبان Server Side
• آشنایی با مفاهیم وب و تکنولوژیهای جدید در وب
• آشنایی با CMS ها و نرم افزارهای مدیریت محتوا و وبلاگها
• آشنایی با Javascript، HTML DOM، AJAX، XML
• آشنایی کامل با Database ها
• آشنایی با Server ها

برای اطلاعات بیشتر به این سایت هم میتونید سر بزنید : ساخت وب سایت

برای یاد گیری نرم افزارهای گرافیکی من ویدیوهای آموزشی رو که قبلا گفتم پیشنهاد میکنم، و هم آموزشهایی که در وب هست برای مثال این سایت مطالب خوبی داره : Web Design Library.

برای یاد گیری مفاهیم اولیه برنامه نویسی هم این سایت خوبیه : آموزش وب.

مرحله بعد !

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

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

همچنین به کد نویسی معنایی هم توجه کنید، این مطلب رو بخونید.

حال که کد قالبتان آماده شده اگر بخواهید به آن کد داینامیک اضافه کنید باید با یک برنامه نویس مشورت کنید یا اینکه خودتون دست به کار بشید، برای شروع میتونید از این مطالب استفاده کنید :

• برنامه نویسی ASP
• برنامه نویسی PHP
• برنامه نویسی Database

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

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

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

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