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

[hivva]

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

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

[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

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

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

[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

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

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

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

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

______________________________
اول این تاپیک رو در جای دیگری ایجاد کردم ولی الان فکر میکنم اینجا خیلی مناسبتره.

[hivva]

روز اول:

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]

روز دوم: HTML

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

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

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

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

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

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

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

جلسه بعدی در مورد CSS صحبت خواهیم کرد.

[hivva]

احساس میکنم این مطلب اینجا طرفدار نداره، به همین دلیل لینک جای دیگری که این بحث رو اونجا کامل کردم رو میگذارم، اگه دوست داشتید سر بزنید:
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]