بارها توسط افراد علاقه مند به بخش طراحی وب مخاطب این سوال بودم که “من می خوام طراحی وب یاد بگیرم، از کجا شروع کنم” قرار گرفتم و هر بار پیش از پاسخ دادن به این سوال متوجه شدم که شخص دچار ابهام خاصی هست و در مواجهه با انبوهی از منابع و پیشنهادات دچار سردرگمی شده و واقعا نمی دونه قدم اول چی هست. به همین دلیل من تصمیم گرفتم در این نوشتار بر اساس تجربیات خودم یک روال عملی رو برای چنین افرادی پیشنهاد بدم تا پاسخ خوبی به ابهام اون ها داده باشم. فراموش نکنید که روال من تنها و بهترین روال موجود نیست، اما دست کم برای من و یکی دو نفر از دوستانم جوابگو بوده، پس شاید بد نباشه شما هم اون رو بررسی کنید. ضمن اینکه بنده هیچ تعصبی نسبت به بسترهای آزاد یا مایکروسافتی ندارم. اگر شما هم منبع خوبی رو می شناسید لطفا توی بخش نظرات مطرح کنید.
در این نوشته من ابتدا به صورت مختصر در مورد تفاوت طراحی وب با توسعه وب می نویسم. در ادامه منابعی رو معرفی می کنم که شخص بتونه گام به گام با مطالعه اون ها به سطح به سطح پیشرفت کنه. ضمنا اگر فکر کردین همه چیز باید فارسی باشه اشتباه فکر کردین. جالبه بدونید که بعضی کتاب های انگلیسی از ترجمه هاشون روان تر و قابل فهم تر هستن. لیست من ترکیبی از منابع فارسی و انگلیسی است. توجه کنید که گام های گفته شده می تونن با هم همپوشانی هم داشته باشند. یعنی میشه در میانه فراگیری یکی، آموزش دیگری رو هم شروع کرد.
زمان تخمینی من برای مطالعه منابع گفته شده چیزی بین 15 تا 24 ماه هست. زمانی در حد گرفتن مدرک کاردانی! هزینه ریالی هم که باید برای تهیه این منابع بپردازید با هزینه های بی فایده رفتن به خیلی از دانشگاه های کشور مقایسه کنید.
تفاوت طراحی وب با توسعه وب
عرض کنم خدمت شما که طراحی وب با توسعه وب فرق هایی داره. طراحی وب عمدتا به مباحث زیبایی شناختی، طراحی گرافیکی و سازماندهی عناصر سایت اشاره داره و توسعه وب به مباحث برنامه نویسی، ساختمان اطلاعاتی و امور فنی مربوط به پیاده سازی پروژه می پردازه. اما این طور عرف شده که توی محاورات، لفظ طراحی و توسعه رو به جای هم به کار می برند که خب از نظر من صحیح نیست. مثلا وقتی کار یه نفر برنامه نویسی وب هست و بهش میگن کارت چیه، میگه من طراح وب هستم که از نظر من اشتباس. البته تفکیک این دو همیشه از هم میسر نیست، ولی دونستن تفاوت ها کمک شایانی به شما خواهد کرد. حالا برای اینکه یه نفر طراحی خوب یا توسعه دهنده خوبی باشه مسلما نیاز داره تا اشتراکات این دو حوزه رو خوب بشناسه.
یه طراح وب دانش گرافیک کامپیوتری داره، می دونه که کاربردپذیری و قابلیت استفاده چی هست، سواد هنری داره، دید هنری و زیبایی شناختی داره، رنگ ها رو درک می کنه، با ساختار وب آشناس، تایپوگرافی رو آموخته و الگوهای طراحی رو میشناسه. از در طرف دیگه توسعه دهنده وب با کدنویسی سر و کار داره (دونستن و تسلط بر زبان های مبتنی بر وب)، سواد کامپیوتری خوبی داره، ساختار وب رو بهتر و بیشتر می شناسه، الگوهای پذیرفته شده برنامه نویسی رو بلده و یک کلام اینکه مهندسی نرم افزار می دونه.
با توضیحات بالا تا حدود زیادی مشخص می شه که برای نیاز های مختلف باید چه کسی رو مخاطب قرار بدین و یا چه هزینه ای رو بپردازین و در نهایت انتظار چه محصولاتی رو داشته باشید. اگر میخاین طراحی رو انتخاب کنید، بر اساس موارد ذکر شده باید بر همون اساس بر سوابق و توانمندی های طراح متمرکز بشید و همین کار رو هم برای توسعه دهنده انجام بدین.
بخش اول – طراحی وب
گام اول – فراگیری HTML/CSS با کتاب Build Your Own Website The Right Way
با مطالعه این کتاب شما به خوبی با اصول HTML آشنا خواهید شد و در ادامه مباحث CSS به روند آموزشی با مثال های عملی اضاف خواهد شد. این کتاب کاملا مناسب افراد مبتدی است و مسائل رو با بیانی شیوا و روان برای مخاطب خودش بیان می کنه. در خاتمه کتاب شما تا سطح متوسط بالا خواهید اومد و توانمندی انجام کارهای خوبی رو خواهید داشت.
برای مشاهده سایت منتشر کننده این کتاب کلیک کنید
همچنین بخشی از این کتاب توسط وبلاگ عصر نوشتن به زبان فارسی ترجمه و منتشر شده است.
گام دوم – تثبیت مهارت های مرحله قبل با کتاب The CSS Anthology: 101 Essential Tips, Tricks & Hacks
در این کتاب بسیار خوب 101 نکته کاربردی مرتبط با بخش HTML/CSS به صورت پرسش و پاسخ و کاملا عملی مطرح می شود. در خاتمه مطالعه کتاب شخص دانشی قابل توجه و کاملا عملی پیرامون مباحث مطرح شده خواهد داشت.
برای مشاهده سایت منتشر کننده این کتاب کلیک کنید
همچنین این کتاب با قلم توانای امیرعباس عبدالعلی تحت عنوان 101 نکته و ترفند برای استفاده از CSS در طراحی وب به فارسی ترجمه شده و در کتابفروشی ها موجود است.
گام سوم – کتاب آموزش HTML5 و CSS3 در قالب پروژه
این کتاب مناسب افرادی است که از مهارت های یاد شده در گام های قبل بهره مند هستند. در این کتاب یک پروژه کامل از آغاز تا پایان با استفاده از HTML5 و CSS3 پیاده سازی می شود. درصورت تمایل می توانید با مراجعه به آدرس www.html5herald.com نمونه ی کامل شده طرح را ببینید.
برای مشاهده سایت منتشر کننده این کتاب کلیک کنید
این کتاب نیز توسط امیرعباس عبدالعلی به فارسی ترجمه شده و با استقبال خوبی از طرف مخاطبان مواجه شده است.
گام چهارم – کتاب رایگان خودآموز طراحی وب به صورت عملی به زبان فارسی
در این کتاب کلیه مهارت های فرا گرفته شده توسط شما در قالب چند خودآموز مرحله به مرحله به کار گرفته خواهد شد. در این کتاب، برگردان فارسی چند خودآموز مفید طراحی قالب وب سایت در نرم افزار فوتوشاپ و همچنین تبدیل طرح های کشیده شده به کد HTML/CSS به صورت مرحله به مرحله و مصور برای شما علاقه مندان قرار داده شده است.
برای مشاهده سایت منتشر کننده این کتاب کلیک کنید
گام پنجم – فراگیری JavaScript و به دنبال آن jQuery
برای شروع کار با JavaScript من کتاب فارسی خودآموز جاوا اسکریپت در 24 ساعت رو پیشنهاد می کنم. با مطالعه این کتاب دوست داشتنی شما با مقدمات JavaScript آشنا خواهید شد و زمینه برای مراحل پیشرفته تر مهیا میشه. البته ویرایش چهارم این کتاب به زبان انگلیسی حاوی مباحث پیشرفته تر و به روز تری مثل AJAX هم هست.
برای مشاهده سایت منتشر کننده این کتاب کلیک کنید
در ادامه توصیه من فراگیری کتابخانه ی جاوا اسکریپتی معروف و محبوب طراحان یعنی jQuery هست. اخیرا یک کتاب رایگان فارسی با عنوان مرجع آموزش jQuery به زبان فارسی منتشر شده که مطالب خوبی رو پوشش می ده.
برای مشاهده سایت منتشر کننده این کتاب کلیک کنید
در نهایت برای این بخش کتاب معروف دیگری که البته به زبان انگلیسی است توصیه می کنم. کتابی تحت عنوان 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 آشنا می کنه و تا سطح متوسط شما رو بالا میاره.
برای مشاهده سایت منتشر کننده این کتاب کلیک کنید
گام دوم – تثبیت مهارت ها با مطالعه کتاب The PHP Anthology: 101 Essential Tips, Tricks & Hacks
در این کتاب مشابه بخش طراحی وب با 101 پرسش و پاسخ کاربردی مواجه خواهیم شد که در صورت انجام عملی آن توسط خواننده مهارت های برنامه نویسی شخص دو چندان خواهد شد.
برای مشاهده سایت منتشر کننده این کتاب کلیک کنید
همچنین در این گام مطالعه کلی و مرور یک منبع مناسب در مورد سیستم بانک اطلاعاتی MySQL توصیه می شود. کتاب پیشنهادی بنده آموزش MySQL در 21 روز از انتشارات نص هست.
گام سوم – مطالعه کتاب Beginning PHP and MySQL E-Commerce
کسب تجربه و فراگیری الگوهای پذیرفته شده در کنار به کارگیری تمام مهارت های پیشین همه و همه ارمغان مطالعه این کتاب خواهد بود. در این کتاب از ابتدا طرح ساخت یک سایت تجارت الکترونیکی بیان شده و تا پایان و ساخت بخش های مختلف آن شما را هدایت خواهد کرد.
برای مشاهده سایت منتشر کننده این کتاب کلیک کنید
مطالعه مجموعه مقالات PHP The Right Way نیز در این مرحله برای شما اکیدا توصیه می شود. در این مقالات سعی شده تا روش های درست و اصولی کد نویسی بازگویی شود تا یک برنامه نویس PHP با رعایت اون ها به صورت استاندارد کد نویسی کنه.
با توجه به بلوغ نسبی شخصی که مراحل بالا را طی کرده، مطالعه مقالات و کتاب های امنیتی در این بخش توصیه میشه. کتاب هایی همچون PHP Security Guide و آموزش روش های نفوذ در PHP بسیار مفید هستند.
خاتمه سری اول
هیچ چیزی جای کسب تجربه و تمرین عملی رو نمی گیره. اگر تصور می کنید که با خوندن سطحی منابع فوق طراح و توسعه دهنده خوبی خواهید شد، سخت در اشتباه هستید. در کنار خوندن منابع آموزشی باید روحیه جستجو و کشف پاسخ سوالات احتمالی با استفاده از اینترنت در شما وجود داشته باشه. در انجمن های تخصص پرسه بزنید و سر زدن به وبلاگ های تخصصی از عادات روزانه شما باشه.
در سری دوم از معرفی منابع آموزشی به معرفی کتاب ها و منابعی در زمینه های بهینه سازی برای موتورهای جستجو (SEO)، مهندسی نرم افزار و رویکرد چابک، کاربردپذیری و آزادکاری خواهم پرداخت. همچنین در سری دوم این مقاله، آموزش های ویدئویی مکمل منابع فوق به همراه منابع اینترنتی معرفی خواهند شد. منتظر انتشار سری دوم این مطلب باشید.
خیلی ممنونم
جالب بود و مفید ،
کاش در مورد توسعه وب با استفاده از ASP.net و SQL server هم میگفتید
توی بخش دوم در این مورد هم خواهم گفت.
ممنونم.خیلی کاربردی و رسا بود. منتظر قسمت دوم هستم.
ممنون. پست قشنگی بود. در مورد توسعه وب با 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
خیلی ممنون.
سلام
شاهکارید .. ممنون
سلام استاد
حامد جان تنها چیزی که دارم در باره سایتت اینه که هر بار میام توش دلم نمیاد برم بیرون
واقعا خودت و کارات حس قشنگی بهم میده
واسه این حس ممنون
شما به من لطف داری.
سلام من تازه شرو کردم و میخوام یه وبلاک برا رشته دانشگاهیم طراحی کنم . میشه راهنماییم کنید.مرسی منتظر جوابتون هستم
خب بهترین انتخاب سیستم وردپرس هست. آیا به سایت وردپرس فارسی سر زدین؟
خداوکیلی هرجنوقت یه بار نظراتوچک میکنید
بنده در سفر بودم و متاسفانه دسترسی نداشتم.
بسیـــــــــــــار ممنون از مطالب کاملتون
خسته هم نباشید
بی صبرانه منتظر سری دوم هستم
لطفا کتب و مراجع فارسی هم یادتون نره
با سپاس
سلام آقای حامد، از نوشته های خوبتون ممنونم.
من قصد داشتم جدی شروع به یادگیری طراحی وب کنم و قصدم یادگیری کل این مطالبی که گفتید از طریق سایت http://www.w3schools.com/ بود، الان که این مطلب شما رو خوندم نمی دونم از راه شما برم یا این سایت، البته میدونم اصل کار مهمه و از مسیرهای مختلفی میشه به هدف رسید اما می خواستم نظر شما رو در این مورد جویا بشم. ممنون
به نظر من طی کردن روالی که توی این مطلب نوشتم مفید تر هست.
بازتاب: برای یادگیری طراحی و توسعه وب از کجا شروع کنم؟ | وبلاگ شخصی علیرضا علی پور
سلام میشه بگید که سایتتون روی کدوم سیستم مدیریت محتوا فعالیت میکنه؟
با وردپرس
سلام ممنون از اطلاعات خوبتان
برای طراحی و توسعه وب راه میانبری ندارید این کتاب ها خیلی زیاد هستند
متاسفانه هیچ راه میانبری نیست.
چرا نداره؟
سایت w3schools.com مختصر و گفید همه اینها رو توضیح داده
بله این سایت هم بسیار مفید هست. منتها من صرفا به یک روش یادگیری اشاره کردم.
با سلام
آقا قسمت بعدی اموزش ها را هم اگر میشه بگذارین .
منتظریم.ما.
براي بخش بعدي دست به كار شدم مدتي پيش اما متاسفانه نتونستم تمومش كنم. سعي مي كنم بتونم تمومش كنم.
با سلام و تشکر بخاطر این مطلب
الف. با توجه به اینکه کتاب معرفی شده “خودآموز PHP در 24 ساعت” به معرفی PHP4 می پردازد و قاعدتا با نسخه جدیدتر آن یعنی PHP5 تفاوتهایی از لحاظ دستورات دارد، آیا شما باز هم همین کتاب را پیشنهاد میکنید؟ یعنی معتقد هستید که این تفاوت ها در حد بسیار کمی هستند و هسته اصلی PHP را می توان از طریق همین کتاب قدیمی که مربوط به اوایل دهه هشتاد شمسی میباشد، آموخت؟
ب. بیشتر از هشت ماه از تاریخ ارسال این مطلب گذشته و بخش دوم هنوز منتشر نشده است، لطفا قبل از گذشت یک سال، بخش دوم را هم ارسال کنید، چون با اینکه راه های زیادی برای دنبال کردن زمینه طراحی وب وجود دارد اما رهیافت مورد اشاره شما مفید و قابل اتکا به نظر می رسد.. با تشکر
من کماکان معتقدم که این کتاب کاملا برای شروع خوب هست.
در تلاش بودم که بخش دوم منتشر بشه اما کماکان موفق نشدم مطلبش رو تکمیل کنم.
ما بی صبرانه منتظر به ثمر نشستن تلاش های شما برای تکمیل بخش دوم هستیم ،
با آرزوی موفقیت
سلام آقای تکمیل
غلط املایی رو اصلاح کنید – شاید از روی عادت در اس ام اس این کلمه رو اینطوری نوشته باشید ولی در کل به نظر من این کار صحیح نیست
میخاین اشتباه هست “میخواین”
خب به خاطر استفاده از شیوه گفتاری در نوشتار این مورد رخ داده. ممنون.
فکر میکنم وقتشه که یه بار دیگه این پست رو آپدیت کنید و چیزهای جدید تری بهش اضافه کنید
بله خیلی دوست دارم این کار رو بکنم. اما هنوز مطالب جدید رو نتونستم جمع و جور کنم.
آقای مدیر خواهش میکنم اولویت بزار برای این پست.
من میخوام شروع به یاد گیری کنم و دو ماه هست که فقط دارم تحقیق و بررسی میکنم و به مطالب سایت شما هم نیاز دارم
مرسی
سلام,ببخشید منظور از کد نویسی زبانهای تحت وب مانند: html است.
الان گفته شما سوال بود یا…؟ چون آخرش نقطه گذاشتید.
حامد عاقا آخر برنامه یادگیری پذیرایی هم داره؟
جان؟
lotfan rahnemaii konid man daneshjoi motarjemi hastm mikham tarahi web yad begirm aya kare khobin mikonm? aya mitonm shoghli be das awarm? mamnon
سلام،
لطفا از بخش تماس با من در ارتباط باشید. بررسی این مورد نیازمند یک فرایند گفتگو است.
شما جدا معرکه اید امیدوارم همیشه موفق باشید
ممنون از راهنمایی هاتون بسیار رسا و شاف بود
سلام روزتون بخیر…مطالب خوبی بود
من دانشجوی ای تی هستم..ولی از اونجایی که خودتون هم میدونین ،دانشگاه های ما زیاد خوب به ما یاد نمیدن…یع کمک میخواستم…من ترم اخرم و فوق دیپلوم رو میگیرم…برنامه ریزیم اینه که برم سربازی و توی خدمت توسعه وب رو یاد بگیزم…از طرفی زبانم خوب نیس و برنامه نویسی هم زیاد یاد نگرفتم?حالا میخوام طی ۲ سال کاااامل بشین درباره توسعه دهندگی وب ر یاد بگیرن…همه چیشو…تو سطح حرفه ای…ولی باید از ۰ سروع کنم…حالا طبق چیزایی که گفتم ،برنامه ریزیمو چطور بچینم
یعنی اول چیو یاد بگیرم،کدوم کتاب
خداییش باید کل زندگیمو عوض کنم…خیلی ممنون میشم یه راهنمایی کامل و جامع کنین..با تشکر
این مورد خیلی بستگی به این داره که خدمت سربازی شما به چه شکلی باشه، دسترسی به سیستم و اینترنتی چطور باشه و چقدر تایم داشته باشید.
در هر صورتی توصیه اکیدم این هست که زبان انگلیسی رو در اولویت بذارید. در حوزه وب هم HTML/CSS رو تقویت کنید و تمرکز بسیار زیادی روی JavaScript بذارید. آینده از آن JS هست.
سپاسگذارم
سلام خسته نباشين ،مطلبتون عالى بود ، ميخواستم بدونم براى شروع (و احيانا ادامه يادگيرى) لپ تاپ با چه كانفيگى رو پيشنهاد ميكنيد ( تا سقف هشت تا نه ميليون ..)، چون بنده دائم السفر هستم امكان استفاده از سيستم شخصى ندارم ، مرسى
سلام،
با توجه به افزایش نرخ ارز و دلار در برابر ریال، قیمت سیستم ها خیلی بالا رفته. برای شروع شما می تونید با یک لپ تاپ بهره مند از CPU اینتل Core i3 و مقدار رم 4 گیگابایت شروع کنید و دست کم تا دو سال ادامه بدید. این سطح از لپ تاپ ها حدود 5 میلیون قیمت دارند. اما اگر بتونید یک سیستم با CPU اینتل Core i5 و رم 8 گیگابایت تهیه کنید تا چند سال نیازی به ارتقا ندارید. این سطح از لپ تاپ ها در حدود 8 الی 9 میلیون قیمت دارند و بعضاً با مقدار RAM بیشتری هم عرضه میشن.
مرسی توضیحاتتون عالی بود
ممنون ، به نظرتون بهتره با مک شروع کنیم یا ویندوز؟
هزینه تامین مک بوک خیلی بالا رفته و خریدش سخت شده. اگر هزینه براتون مشکل ساز نیست گزینه خوبی هست.
البته با توجه به نقاط قوت ویندوز 10 و اینکه بسیاری از ویژگی های خوب هم بهش اضاف شده خریدن یک لپ تاپ قوی ویندوزی هم اکی هست. این لپ تاپ یه مزیت دیگه هم داره و اون اینه که بعداً به اختیار خودتون می تونید روش لینوکس نصب کنید. می دونید که لینوکس سیستم عامل محبوب برنامه نویسان هست.
ممنون
ببخشید بین کسی که طراحی و توسعه وب و کلا مهندسی نرم افزار و برنامه نویسی رو بصورت دانشگاهی یادگرفته و دارای مدرکه با کسی که خودش به صورت خوداموز ولی حرفه ای همه چیو یاد گرفته چقدر تفاوته؟ از نظر داشتن مدرک و اینا کلا مشتریاشون بعدا چه ذهنیتی خواهند داشت؟ شخص دوم میتونه به اندازه ی شخص اول (یا بیشتر)موفق باشه؟