برای یادگیری طراحی و توسعه وب از کجا شروع کنم؟

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

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

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

تفاوت طراحی وب با توسعه وب

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

برای مشاهده اینفوگرافیک در سایز اصلی کلیک کنید

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

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

بخش اول – طراحی وب

گام اول – فراگیری HTML/CSS با کتاب Build Your Own Website The Right Way

با مطالعه این کتاب شما به خوبی با اصول HTML آشنا خواهید شد و در ادامه مباحث CSS به روند آموزشی با مثال های عملی اضاف خواهد شد. این کتاب کاملا مناسب افراد مبتدی است و مسائل رو با بیانی شیوا و روان برای مخاطب خودش بیان می کنه. در خاتمه کتاب شما تا سطح متوسط بالا خواهید اومد و توانمندی انجام کارهای خوبی رو خواهید داشت.

کتاب Build Your Own Website The Right Way

برای مشاهده سایت منتشر کننده این کتاب کلیک کنید

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

گام دوم – تثبیت مهارت های مرحله قبل با کتاب The CSS Anthology: 101 Essential Tips, Tricks & Hacks

در این کتاب بسیار خوب 101 نکته کاربردی مرتبط با بخش HTML/CSS به صورت پرسش و پاسخ و کاملا عملی مطرح می شود. در خاتمه مطالعه کتاب شخص دانشی قابل توجه و کاملا عملی پیرامون مباحث مطرح شده خواهد داشت.

کتاب The CSS Anthology: 101 Essential Tips, Tricks & Hacks

برای مشاهده سایت منتشر کننده این کتاب کلیک کنید

همچنین این کتاب با قلم توانای امیرعباس عبدالعلیتحت عنوان 101 نکته و ترفند برای استفاده از CSS در طراحی وب به فارسی ترجمه شده و در کتابفروشی هاموجود است.

گام سوم – کتاب آموزش HTML5 و CSS3 در قالب پروژه

این کتاب مناسب افرادی است که از مهارت های یاد شده در گام های قبل بهره مند هستند. در این کتاب یک پروژه کامل از آغاز تا پایان با استفاده از HTML5و CSS3پیاده سازی می شود. درصورت تمایل می توانید با مراجعه به آدرس www.html5herald.comنمونه ی کامل شده طرح را ببینید.

کتاب آموزش HTML5 و CSS3 در قالب پروژه

برای مشاهده سایت منتشر کننده این کتاب کلیک کنید

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

گام چهارم – کتاب رایگان خودآموز طراحی وب به صورت عملی به زبان فارسی

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

کتاب رایگان خودآموز طراحی وب به صورت عملی به زبان فارسی

برای مشاهده سایت منتشر کننده این کتاب کلیک کنید

گام پنجم – فراگیری JavaScript و به دنبال آن jQuery

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

برای مشاهده سایت منتشر کننده این کتاب کلیک کنید

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

کتاب مرجع آموزش jQuery

برای مشاهده سایت منتشر کننده این کتاب کلیک کنید

در نهایت برای این بخش کتاب معروف دیگری که البته به زبان انگلیسی است توصیه می کنم. کتابی تحت عنوان jQuery: Novice to Ninja که جز پر فروش ترین ها است.

کتاب jQuery: Novice to Ninja

برای مشاهده سایت منتشر کننده این کتاب کلیک کنید

گام ششم – مطالعه مجلات و وبلاگ های برتر این حوزه

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

وبلاگ سالار کابلی ( http://sallar.me/blog)
وبلاگ داتیس دیزاین (http://blog.datisdesign.com)
وبلاگ وب تارگت (http://www.webtarget.ir)
سایت شبکه آموزشی آی آر تونز (http://web.irtuts.com)
مجله اسمشینگ (http://www.smashingmagazine.com)
سایت آموزشی توتس پلاس (http://net.tutsplus.com)
سایت سی اس اس تریکس (http://css-tricks.com)
وبلاگ کدراپز (http://tympanus.net/codrops)

بخش دوم – توسعه وب ( با PHP و MySQL)

گام اول – مطالعه کتاب فارسی خودآموز PHP در 24 ساعت

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

کتاب فارسی خودآموز PHP در 24 ساعت

برای مشاهده سایت منتشر کننده این کتاب کلیک کنید

گام دوم – تثبیت مهارت ها با مطالعه کتاب The PHP Anthology: 101 Essential Tips, Tricks & Hacks

در این کتاب مشابه بخش طراحی وب با 101 پرسش و پاسخ کاربردی مواجه خواهیم شد که در صورت انجام عملی آن توسط خواننده مهارت های برنامه نویسی شخص دو چندان خواهد شد.

کتاب The PHP Anthology: 101 Essential Tips, Tricks & Hacks

برای مشاهده سایت منتشر کننده این کتاب کلیک کنید

همچنین در این گام مطالعه کلی و مرور یک منبع مناسب در مورد سیستم بانک اطلاعاتی MySQL توصیه می شود. کتاب پیشنهادی بنده آموزش MySQL در 21 روزاز انتشارات نص هست.

گام سوم – مطالعه کتاب Beginning PHP and MySQL E-Commerce

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

کتاب Beginning PHP and MySQL E-Commerce

برای مشاهده سایت منتشر کننده این کتاب کلیک کنید

مطالعه مجموعه مقالات PHP The Right Wayنیز در این مرحله برای شما اکیدا توصیه می شود. در این مقالات سعی شده تا روش های درست و اصولی کد نویسی بازگویی شود تا یک برنامه نویس PHP با رعایت اون ها به صورت استاندارد کد نویسی کنه.

با توجه به بلوغ نسبی شخصی که مراحل بالا را طی کرده، مطالعه مقالات و کتاب های امنیتی در این بخش توصیه میشه. کتاب هایی همچون PHP Security Guideو آموزش روش های نفوذ در PHPبسیار مفید هستند.

خاتمه سری اول

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

در سری دوم از معرفی منابع آموزشی به معرفی کتاب ها و منابعی در زمینه های بهینه سازی برای موتورهای جستجو (SEO)، مهندسی نرم افزار و رویکرد چابک، کاربردپذیری و آزادکاری خواهم پرداخت. همچنین در سری دوم این مقاله، آموزش های ویدئویی مکمل منابع فوق به همراه منابع اینترنتی معرفی خواهند شد. منتظر انتشار سری دوم این مطلب باشید.