آموزش: تمام مهارتهای مورد نیاز یک طراح وب حرفه‌ای

hivva · Feb 5, 2015

سلام دوستان عزیزم ،

همونطور که میدونید سردرگمی و سوالات زیادی در زمینه توسعه و طراحی وب در ایران وجود داره؛ از بحث در مورد ابزارها، روشها و زبانهای جدید گرفته تا وضعیت بازار کار و نیازمندی‌های آن. همین الان اگر در مورد دغدغه اصلی ذهنی‌تون در زمینه وب، اشتغال و یا هر موضوع مرتبط دیگری در گوگل جستجو کنید و کیفیت نتایج رو ارزیابی کنید، مطمئنم هستم زیاد راضی نخواهید بود
.

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

به این صورت که ابتدا از سنگ بنای وب یعنی HTML، CSS و Java Script شروع می‌کنیم و با کتابخانه‌‌ها و فریموورک های CSS و جاوا سکریپت ادامه می‌دهیم. بعد با همدیگه نگاهی به Ajax و jQuery خواهیم انداخت. در این مرحله لازمه در مورد شی گرایی در جاوا اسکریپت صحبت کنیم. اگر لازم شد نگاهی هم به الگوهای استاندارد طراحی یا Design Pattern در جاوا اسکریپت می اندازیم. همچنین به طراحی وب پاسخگرا یا Responsive نیز خواهیم پرداخت.

مشاهده پیوست 107852

بعد لازمه که از کدنویسی فراتر برویم و ابزارهای پیشرفته توسعه وب در مرورگرها و ابزارهای ساخت و اتوماتیک سازی رو بررسی کنیم. بعد در مورد version control و Git و GitHub و ضرورت دانستن آن صحبت می‌کنیم و بلاخره در مورد تست(Test) و بهینه سازی کارایی ( (performance بیشتر یاد خواهیم گرفت.

همونطور که متوجه شدید "الان" تاکید من بیشتر روی طراح و توسعه front-end یعنی لایه بالایی برنامه های وب هست تا back-end.

مشاهده پیوست 107854

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

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

پ.ن1: پس قولی که من میدم اینه که از امروز هر روز صبح یکی مطلب مستقل رو در مورد موضوعاتی که گفتم در همینجا منتشر می‌کنم. امیدوارم در انتهای این مسیر احتمالاً 2-3هفته ای نه من شرمنده باشم و نه شما ناراضی.

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

مشاهده پیوست 107853

پ.ن3: راستی من هیوا هستم، کارشناسی ارشد کامپیوتر از دانشگاه تهران( که به نظرم هیچی بهم اضافه نکرد!). برنامه نوسی وب رو دوست دارم، اما بیشتر از اون عاشق یادگیری و به اشتراک گذاشتن آموخته هام هستم. پروفایلهای کسانی که در این مسیر ما رو همراهی کنند رو هم نگاه می‌کنم که شناخت بیشتری از دوستان پیدا کنم.
اعتراف میکنم که یکی از دلایل اینکار وقت اضافه ای است که این روزها دارم. روزی 22 ساعت بیدارم! و هر روز حدود پنج تا ده ساعت در زمینه‌های مختلف مطالعه می‌کنم.

پ.ن آخر!: شاید هر روز اینجا نیاید و بدتون نیاد مطالب رو به ایمیلتون بفرستم. در این صورت ایمیلتون رو برام بفرستید تا مطالب جدید رو براتون ایمیل کنم یا فقط لینک اینجارو بدم(بسته به نظر خودتون). فکر کنم ایمیل من هم در پروفایلم در دسترس هست.

hivva · Feb 6, 2015

روز اول:

Here we go

با سلام دوباره به شما دوست عزیز، صبحتون بخیر(الان ساعت 6!)

در قسمت قبلی(روز صفرم!) توضیح دادم که جریان چیه و اینکه قصد دارم چکار کنم . لطفاً اگر مطلب قبلی رو نخوندید یه نگاه اجمالی بهش بندازید، فکر کنم حدود 2-3 دقیقه وقتتون بگیره.

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

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

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

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

لیست مهارتهایی که در زیر خواهم آورد بر اساس تحقیقات گسترده بر روی طراحان وب انتخاب شده است. همانطور که متوجه شدید، غالب این مهارتها مرتبط به Front-end web developer یا توسعه لایه بالایی سایتها و برنامه های وب هستند. هدف فعلی ما نیز حداقل در این مرحله همین است.

در ضمن تمرکز ما روی مهارتهای مورد نیاز بازار کار است و هیچ اشاره‌ای به نظام دانشگاهی که ناکارآمد ترین سیستم آموزشی (حداقل برای بازار کار است)، نخواهیم داشت!

لیست مهارتهای در نظر گرفته شده برای یک طراح وب حرفه‌ای :

HTML

CSS

Javascript

Responsive Web Design

HTML5, CSS3

CSS frameworks

Javascript Frameworks

Git, GitHub

ابزارهای توسعه موجود در مرورگرهای فایرفاکس و کروم

بهینه سازی کارایی وب یا web performance optimization

ابزارهای خودکارسازی و ساخت

تست

مهارتهای نرم

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

فردا صبح به صورت خلاصه در مورد HTML و علت اهمیت آشنایی با آن صحبت خواهم کرد. من هم مثل شما دوست دارم زودتر چند روز اول سپری بشه و به بحثهای لذت بخش تر بپردازیم

hivva · Feb 8, 2015

روز دوم: HTML

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

بهترین استعاره و تشبیه برای فایل HTML، نقشه ساخت خانه است. یک نقشه اندازه اتاق‌ها، محل قرارگیری اتاق‌ها و آنچه در اتاقهاست را نشان می‌دهد اما چیزی را در مورد ظاهر خانه بیان نمی‌کند.

المانهای معنایی یا Semantic : المان‌های معنایی، معنای یک عنصر یا المان را برای مرورگر یا طراح وب توصیف می‌کنند. المانهایی مانند بخش، مقاله و عکس به جای <div> و <span>

المانهای سطح بلاک : تمام فضای المان والدشان را اشغال می‌کنند. مانند جدول(<table>)، پاراگراف و عنوان <h1>. همیشه در ابتدا و انتهای این المان‌ها یک خط جدید درج خواهد شد.

المانهای html یا المانهای سطح بلاک هستند و یا inline مانند عکس <b>, <td>, <a>, <img>

انواع ورودی: یک المان ورودی برای ساختن کنترلهای تعاملی در فرم‌های سایتها به منظور گرفتن داده از کاربر مورد استفاده قرار می‌گیرد: دکمه، textbox

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

:

hivva · Feb 9, 2015

روز سوم: CSS

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

در بخش قبلی HTML را به نقشه ساختمان تشبیه کردیم و گفتیم HTML ساختار و چیدمان اتاقها و بخشهای مختلف خانه را توصیف می‌کند. در این صورت CSS ظاهر این خانه را توصیف می‌کند. در تصویر سمت چپ مشاهده می کنید که برای ساختمان سمت راست(HTML) سه نما و ظاهر متفاوت(سه CSS) ساخته شده است.

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

برای کسانی که با مطالعه منابع انگلیسی راحت هستند، بهترین روش آموزش و تسلط بر HTML و CSS (و بسیاری از موضوعات دیگر)، سایت w3schools هست:
آموزش CSS
آموزش HTML

فردا در مورد Javascript صحبت خواهم کرد که موضوع مورد علاقه خودم هست. پس فردا به HTML5 و CSS3 خواهم پرداخت. پس از آن بحثمون جدی تر خواهد شد و موضوعات جدی تر و جالبتری رو شروع می کنم.

hivva · Feb 10, 2015

روز چهارم: جاوا اسکریپت Javascript

با سلام به دوستان ساکت و عزیز

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

خوب، جاوا اسکریپت همانند کارگری هست که در صورت لزوم دیوارهای این ساختمان را خراب می‌کند، اتاقهای جدید می‌سازد و دکور و ظاهر ساختمان را عوض می‌کند.

همانطور که دقت کردید، HTML و CSS به صورت ایستا و ثابت، سایت را توصیف می‌کنند، بنابراین صرفاً زبانی برای توصیف یک صفحه ایستا هستند نه یک زبان برنامه نویسی واقعی. اما جاوا اسکریپت، عامل هر پویایی، تغییر و رفتاری در سایت هست. پس سایتی که در آن جاوا اسکریپت استفاده نشده باشد، یک سایت مرده به نظر می‌رسد!

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

با هم نگاهی به مفاهیم و کلمات کلیدی این زبان قدرتمند و زیبا خواهیم انداخت:

- syntax یا نحو عبارت است از قوانینی در مورد نحوه نوشتن دستورات و جملات اسکریپت. سینتکس یا نحو همانند دستور زبان و نگارش یک فارسی و یا گرامر زیان انگلیسی است.

- انواع داده : نوع داده ای هسند که هر متغیر می‌تواند در خود ذخیره کند. عدد یک نوع داده ای است. رشته یا string نوع دیگری از داده در جاوا اسکریپت است.

- تابع : چند خط (یک تکه کد) از جاوا اسکریپت است که کار معناداری را انجام می‌دهد. همانند دخیره اطلاعات کاربر جدید.

- شی یا object : هر چیزی در جاوا اسکریپت یک ابجکت است، همانند یک رشته(نام کاربر) اما شما به عنوان برنامه نویس جاوا اسکریپت برای آسان کردن کارتان ابجکتهای دلخواه و معنادار خود را ایجاد می‌کنید. مثلاً آبجکت کاربر.

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

- الگوهای طراحی یا Design Patterns : هر الگوی طراحی یک روش حل برای یک مشکل مشترک، رایج و شناخته شده در زمینه برنامه نویسی است. آشنایی با این الگوها کار برنامه نویس را بسیار راحت می‌کند، سرعت توسعه آن را افزایش می‌دهد و کیفیت سایت را بهتر می‌کند.

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

- Ajax یا اِی.جکس(بعضی از دوستان آژاکس هم میگن! ) : به کمک ajax می‌توان بدون رفرش کردن صفحه، درخواستی را به سروس ارسال کرد و حاصل را در بخشی از صفحه نشان داد. به کمک ajax سایتها بسیار کاربرپسندتر و کاراتر شده‌اند.

قدرت جادویی جاوا اسکریپت مربوط به چهار مورد اخیر لیست بالا و همینطور ده‌ها کتابخانه قدرتمند دیگری مانند Node.js هست که در اینجا می‌توانید مروری بر آنها داشته باشید.

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

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