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

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

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

زمان تخمینی من برای مطالعه منابع گفته شده چیزی بین 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)، مهندسی نرم افزار و رویکرد چابک، کاربردپذیری و آزادکاری خواهم پرداخت. همچنین در سری دوم این مقاله، آموزش های ویدئویی مکمل منابع فوق به همراه منابع اینترنتی معرفی خواهند شد. منتظر انتشار سری دوم این مطلب باشید.

مطلب مرتبط:

چطور در زمینه طراحی اینترفیس وب همیشه به روز باشیم

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

  1. ممنون. پست قشنگی بود. در مورد توسعه وب با 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

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

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

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

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

    با سپاس

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

  6. بازتاب: برای یادگیری طراحی و توسعه وب از کجا شروع کنم؟ | وبلاگ شخصی علیرضا علی پور

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

    1. حامد تکمیل

      براي بخش بعدي دست به كار شدم مدتي پيش اما متاسفانه نتونستم تمومش كنم. سعي مي كنم بتونم تمومش كنم.

  8. با سلام و تشکر بخاطر این مطلب
    الف. با توجه به اینکه کتاب معرفی شده “خودآموز PHP در 24 ساعت” به معرفی PHP4 می پردازد و قاعدتا با نسخه جدیدتر آن یعنی PHP5 تفاوت‎هایی از لحاظ دستورات دارد، آیا شما باز هم همین کتاب را پیشنهاد می‎کنید؟ یعنی معتقد هستید که این تفاوت ها در حد بسیار کمی هستند و هسته اصلی PHP را می توان از طریق همین کتاب قدیمی که مربوط به اوایل دهه هشتاد شمسی می‎باشد، آموخت؟

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

    1. حامد تکمیل

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

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

  9. نیما معینیان

    ما بی صبرانه منتظر به ثمر نشستن تلاش های شما برای تکمیل بخش دوم هستیم ،
    با آرزوی موفقیت

  10. سلام آقای تکمیل

    غلط املایی رو اصلاح کنید – شاید از روی عادت در اس ام اس این کلمه رو اینطوری نوشته باشید ولی در کل به نظر من این کار صحیح نیست

    میخاین اشتباه هست “میخواین”

  11. فکر میکنم وقتشه که یه بار دیگه این پست رو آپدیت کنید و چیزهای جدید تری بهش اضافه کنید

    1. حامد تکمیل

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

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

    1. سلام،

      لطفا از بخش تماس با من در ارتباط باشید. بررسی این مورد نیازمند یک فرایند گفتگو است.

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

    1. این مورد خیلی بستگی به این داره که خدمت سربازی شما به چه شکلی باشه، دسترسی به سیستم و اینترنتی چطور باشه و چقدر تایم داشته باشید.

      در هر صورتی توصیه اکیدم این هست که زبان انگلیسی رو در اولویت بذارید. در حوزه وب هم HTML/CSS رو تقویت کنید و تمرکز بسیار زیادی روی JavaScript بذارید. آینده از آن JS هست.

  14. سلام خسته نباشين ،مطلبتون عالى بود ، ميخواستم بدونم براى شروع (و احيانا ادامه يادگيرى) لپ تاپ با چه كانفيگى رو پيشنهاد ميكنيد ( تا سقف هشت تا نه ميليون ..)، چون بنده دائم السفر هستم امكان استفاده از سيستم شخصى ندارم ، مرسى

    1. سلام،

      با توجه به افزایش نرخ ارز و دلار در برابر ریال، قیمت سیستم ها خیلی بالا رفته. برای شروع شما می تونید با یک لپ تاپ بهره مند از CPU اینتل Core i3 و مقدار رم 4 گیگابایت شروع کنید و دست کم تا دو سال ادامه بدید. این سطح از لپ تاپ ها حدود 5 میلیون قیمت دارند. اما اگر بتونید یک سیستم با CPU اینتل Core i5 و رم 8 گیگابایت تهیه کنید تا چند سال نیازی به ارتقا ندارید. این سطح از لپ تاپ ها در حدود 8 الی 9 میلیون قیمت دارند و بعضاً با مقدار RAM بیشتری هم عرضه میشن.

    1. حامد تکمیل

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

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

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *