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

منتشرشده: دسامبر 3, 2012 در برنامه نویسی و توسعه وب, زبان PHP
برچسب‌ها:, , , , , , , ,

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

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

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

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

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

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

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

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

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

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

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

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

کتاب Build Your Own Website The Right Way

کتاب 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

کتاب jQuery: Novice to Ninja

کتاب jQuery: Novice to Ninja

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

همچنین از این آدرس می تونید در مورد یک کتاب فارسی دیگه در رابطه با jQuery اطلاعاتی کسب کنید.

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

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

وبلاگ سالار کابلی ( 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 ساعت

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

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

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

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

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

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

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

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

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

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

کتاب Beginning PHP and MySQL E-Commerce

کتاب Beginning PHP and MySQL E-Commerce

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

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

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

خاتمه سری اول

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

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

دیدگاه‌ها
  1. الهام می‌گوید:

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

  2. میلاد قدرتی می‌گوید:

    سلام میشه بگید که سایتتون روی کدوم سیستم مدیریت محتوا فعالیت میکنه؟

  3. سینا می‌گوید:

    سلام آقای حامد، از نوشته های خوبتون ممنونم.
    من قصد داشتم جدی شروع به یادگیری طراحی وب کنم و قصدم یادگیری کل این مطالبی که گفتید از طریق سایت http://www.w3schools.com/ بود، الان که این مطلب شما رو خوندم نمی دونم از راه شما برم یا این سایت، البته میدونم اصل کار مهمه و از مسیرهای مختلفی میشه به هدف رسید اما می خواستم نظر شما رو در این مورد جویا بشم. ممنون

  4. sattar می‌گوید:

    بسیـــــــــــــار ممنون از مطالب کاملتون
    خسته هم نباشید
    بی صبرانه منتظر سری دوم هستم

    لطفا کتب و مراجع فارسی هم یادتون نره

    با سپاس

  5. ali می‌گوید:

    خداوکیلی هرجنوقت یه بار نظراتوچک میکنید

  6. ali می‌گوید:

    سلام من تازه شرو کردم و میخوام یه وبلاک برا رشته دانشگاهیم طراحی کنم . میشه راهنماییم کنید.مرسی منتظر جوابتون هستم

  7. mamalbikhial می‌گوید:

    سلام استاد
    حامد جان تنها چیزی که دارم در باره سایتت اینه که هر بار میام توش دلم نمیاد برم بیرون
    واقعا خودت و کارات حس قشنگی بهم میده
    واسه این حس ممنون

  8. seeker می‌گوید:

    سلام
    شاهکارید .. ممنون

  9. داریوش می‌گوید:

    ممنون. پست قشنگی بود. در مورد توسعه وب با ASP.net به نظر من این منابع خوب هستند:
    * برای MVC:
    Apress Pro ASP.NET MVC 3 Framework 3rd Edition
    * برای Web Fomrs:
    Apress Beggining ASP.NET 4 in C# 4th Edition
    Apress Pro ASP.NET 4 in C# 4th Edition
    * برای Entity Framework 4.x:
    O’Reilly Programming Entity Framework Code First
    O’Reilly Programming Entity Framework DbContext
    * برای Entity Framework 4:
    O’Reilly Programming Entity Framework 2nd Edition
    * برای معماری سیستم:
    Microsoft Press Microsoft.NET: Architecting Applications for the Enterprise
    (مرجع برای تمام پلتفرمها) Addison-Wesley Patterns of Enterprise Application Architecture

  10. nadim می‌گوید:

    ممنونم.خیلی کاربردی و رسا بود. منتظر قسمت دوم هستم.

  11. فرن می‌گوید:

    جالب بود و مفید ،
    کاش در مورد توسعه وب با استفاده از ASP.net و SQL server هم میگفتید

  12. hossein می‌گوید:

    خیلی ممنونم

پاسخی بگذارید

در پایین مشخصات خود را پر کنید یا برای ورود روی شمایل‌ها کلیک نمایید:

نشان‌وارهٔ وردپرس.کام

شما در حال بیان دیدگاه با حساب کاربری WordPress.com خود هستید. بیرون رفتن / تغییر دادن )

تصویر توییتر

شما در حال بیان دیدگاه با حساب کاربری Twitter خود هستید. بیرون رفتن / تغییر دادن )

عکس فیسبوک

شما در حال بیان دیدگاه با حساب کاربری Facebook خود هستید. بیرون رفتن / تغییر دادن )

عکس گوگل+

شما در حال بیان دیدگاه با حساب کاربری Google+ خود هستید. بیرون رفتن / تغییر دادن )

درحال اتصال به %s