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

[hiwaaa]

روز نهم: version control، گیت Git و گیت هاب GitHub


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

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

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

اما امروزه می‌توان بدون ترس از بروز خطا، هر سعی و خطایی کرد و هر تغییراتی را بدون ترس از خراب شدن برنامه اعمال کرد. می‌ترسید برنامه خراب شود؟ خوب دکمه Undo را فشار می‌دهید! (دارم دکمه Undo را به عنوان استعاره استفاده میکنم.)

منظور از دکمه Undo همان مفهوم Version Control است. یعنی اینکه به طریقی بتوانیم ورژن‌های مختلف برنامه را کنترل کنیم و امکان بازگشت به مراحل قبلی را داشته باشیم(و خیلی امکانات دیگر).

how-to-install-and-set-up-git-on-ubuntu-14-04-lts-vps.jpg

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

گیت یک سیستم کنترل ورژن توزیع‌شده است. یعنی به کمک آن افراد مختلف از جاهای مختلف دنیا می‌توانند همزمان روی یک پروژه کار کنند، بدون اینکه نگران باشند مشکلی پیش بیاید. برای اینکار یک واسط گرافیکی مبتنی بر وب وجود دارد به نام GitHub که یکی از ارزشمندترین سایتهای وب محسوب می‌شود . به گفته پروفسور Srinivasan استاد کامیپوتر دانشگاه استنفورد، GitHub یکی از مهمترین پیشرفتهای 5سال اخیر اینترنت بوده است.

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

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

arash.jpg

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

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

[raghb_1]

سلام ودرود
-پس خود کلمه Git یک پروتکل هست وGitHub وب سایتی که ازاین پروتکل استفاده می شه
- چطوری میشه با این سایت در تامل بود


ممنون زحمات شما

[hiwaaa]

گیت رو میتونید روی سیستم خودتون نصب کنید و ازش استفاده کنید.
در سایت gitHub هم میتونید اکاونت بسازید و باهاش کار کنید.

مثل تایپ ده انگشتی اولش کمی سخته ولی بعداً سرعت کار رو بالا میبره.

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

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

ممنونم از پیگیریت.

سلام ودرود
-پس خود کلمه Git یک پروتکل هست وGitHub وب سایتی که ازاین پروتکل استفاده می شه
- چطوری میشه با این سایت در تامل بود


ممنون زحمات شما

[aaaghooo]

روز نهم: version control، گیت Git و گیت هاب GitHub


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

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

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

اما امروزه می‌توان بدون ترس از بروز خطا، هر سعی و خطایی کرد و هر تغییراتی را بدون ترس از خراب شدن برنامه اعمال کرد. می‌ترسید برنامه خراب شود؟ خوب دکمه Undo را فشار می‌دهید! (دارم دکمه Undo را به عنوان استعاره استفاده میکنم.)

منظور از دکمه Undo همان مفهوم Version Control است. یعنی اینکه به طریقی بتوانیم ورژن‌های مختلف برنامه را کنترل کنیم و امکان بازگشت به مراحل قبلی را داشته باشیم(و خیلی امکانات دیگر).

how-to-install-and-set-up-git-on-ubuntu-14-04-lts-vps.jpg

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

گیت یک سیستم کنترل ورژن توزیع‌شده است. یعنی به کمک آن افراد مختلف از جاهای مختلف دنیا می‌توانند همزمان روی یک پروژه کار کنند، بدون اینکه نگران باشند مشکلی پیش بیاید. برای اینکار یک واسط گرافیکی مبتنی بر وب وجود دارد به نام GitHub که یکی از ارزشمندترین سایتهای وب محسوب می‌شود . به گفته پروفسور Srinivasan استاد کامیپوتر دانشگاه استنفورد، GitHub یکی از مهمترین پیشرفتهای 5سال اخیر اینترنت بوده است.

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

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

arash.jpg

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

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

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

[hiwaaa]

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

سلام aaaghooo عزیز(آقو؟ شیراز؟ همساده؟)
چقدر وقت گذاشتی پس، دمت گرم.
من یک عادت اعتیاد آورد دارم و اونم بررسی ده ها دوره کامپیوتری و سایت برنامه نویسان بزرگ است. مثلا اساتید استنفورد، کسایی که سایتهایی مثل reddit رو توسعه دادن. برای سرگرمی یا یادگیری . تاکید اینها روی جاوا اسکریپت و کتابخونه هاش، روی گیت و گیت هاب ، روی HTML5 بسیار زیاده. متاسفانه ما ها یک سری ابزار رو یاد میگیریم و سالها باهاشون کار میکنیم و خیلی علاقه ای به تغییر وضعیت موجود نداریم. غافل از اینکه در کامپیوتر و وی تغییر وضعیت موجود یعنی قدرت بیشتر و زندگی راحت تر. دنیای شگفت انگیزیه.

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

گذشته از شوخی، هدف من از این تاپیک فقط مرور و معرفی بود. واقعا آموزش دادن اینها کار سختیه مخصوصا برای آموزش دهنده، مخصوصا اگه مثل من دغدغه ش آموزش موثر باشه نه آموزش سنتی که کارایی بسیار کمی داره.
اگر زبانت خوبه دز پست های قبلی منابع خوبی گذاشته شده. w3schools هم عالیه.
برای فارسی منابع کمی داریم. باید سرچ کنی. http://beyamooz.com/ سایت خوبیه.
شاید در آینده سعی کنم تمرکز کنم روی آموزش دادن اینها.
مشکل این است که جمع اوری تعداد کافی متقاضی که از نیت و برنامه من خبر داشته باشند، وقت زیادی میخاد.
اگر کسی ایده خاصی داشته باشه، استقبال میکنم

[aaaghooo]

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

[hiwaaa]

چشم عزیز، حتماً
راستی فکر کنم کبوتر سفید میشه هاا
ممنونم از توجه و لطفت، ساغول

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

[mmdsharifi]

لطف کنید در مورد چگونگی کار تیمی در گیت توضیح بدید.
مثلا چگونه یک تیم طراح طرح خود را بزند و آن را برای تیم کد نویس آماده کند؟
چگونگی تقسیم وظایف؟ چگونگی طراحی اولیه طرح؟

[hiwaaa]

لطف کنید در مورد چگونگی کار تیمی در گیت توضیح بدید.
مثلا چگونه یک تیم طراح طرح خود را بزند و آن را برای تیم کد نویس آماده کند؟
چگونگی تقسیم وظایف؟ چگونگی طراحی اولیه طرح؟

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

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

فکر کنم این منابع برای شروع خوب باشن: 1، 2، 3

مخلصم کا حمه بریز

[raghb_1]

لطف کنید در مورد چگونگی کار تیمی در گیت توضیح بدید.
مثلا چگونه یک تیم طراح طرح خود را بزند و آن را برای تیم کد نویس آماده کند؟
چگونگی تقسیم وظایف؟ چگونگی طراحی اولیه طرح؟

هیوا جان اگه ممکنه این قسمت رو بصورت فقط کلامی توضیح بدید که اصلا صورت کارکرد این سایتهای git به چه صورت هست؟

[hiwaaa]

هیوا جان اگه ممکنه این قسمت رو بصورت فقط کلامی توضیح بدید که اصلا صورت کارکرد این سایتهای git به چه صورت هست؟

چشم دوست عزیز
خیلی خلاصه و سریع بگم

اول در سایت گیت هاب عضو می شید. GitHub.com
بعد یک repository می سازید که محزن کدهای شما میشه. میتونه عمومی(همه ببینن) باشه یا خصوصی .
یه فایل ReadMe معروف هم داره که توضیحات لازم رو توش مینویسید

بعد issue جدید می سازید اونجا. issue یعنی کاری که باید انجام بشه یا مشکلی که قراره حل بشه. میتونید فایل ایجاد کنید و کدتون رو بگذارید. تغییرات ایجاد کنید و...

بعد میتونید Branch بسیازید. یعنی یک نسخه جدید از پروژه تون که قراره تغییرات ر این Branch جدید باشه.
بعد تغییرات اعمال میکنید در پروژه. لازم نیست نگران باشید که پروژه اصلی تغییر میکنه.

بعد لازمه تغییرات رو commit کنید.

بعد از بررسی اگر مطمئن شدید که همه چی ok هست.
تغییرات رو میتونید در در این مرحله ببینید.
بعد درخواست pull میدید.

درنهایت اگر مشکلی در نتیجه تغییرات پیش نیامد، دو branch جدید رو با اصل پروژه که خودش یه branch پیش فرض هست، ادغام میکنید.

حالا آدمهای مختلف میتونن همزمان تغییرات ایجاد کنن روی پروژه.

میتونید نسخه های مختلفی از پروزه داشته باشید و به آسانی بین اونها سویچ کنید.


چقدر بد توضیح دادم!
چون لازمه معنای کلمات و اصطلاحات و مفاهیم و حتی فرایندهای منطقی کار رو بدونید، توضیحش سخته.
ادبیات خاص خودشو داره(issue, branch, repository, commit, merge, checkout,init,...)

کمی سرچ کنید مقالات خوبی پیدا می کنید.
امیدوارم توضیحاتم مفید بوده باشه.

[raghb_1]

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

[davood59]

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

[hiwaaa]

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

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

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

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

[hiwaaa]

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

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

برای اینکه بدونیم چند نفر تا اینجا مارو راهنمایی کردند، لطفاً دکمه تشکر رو بزنید. علاقه‌ای به تشکر ندارم ولی این تنها روشیه که به کمک آن میشه آمار دوستان علاقمند رو بدست آورد. کاش اسم این دکمه، "خواندم"، یا "مفید است" بود!.__________________________________________ _____________________________________


روز دهم: ابزارهای توسعه وب در مرورگر(فایرفاکس، گوگل کروم)

احتمالاً موقع ساختن سایت، به باگ و اشکالاتی در کد سایت برخواهید خورد. ممکن است با کارایی , performance سایت به مشکل بر بخورید و یا با تغییرات ناگهانی در نحوه نمایش و رندر شدن سایت مواجه شوید.
در چنین مواقعی تنها یک کار می‌توان کرد. قبل از گفتن راه چاره یادآوری می‌کنم که در نهایت سایت ما توسط مرورگر نمایش داده می‌شود. پس تنها راه چاره این است که بدونیم مرورگر چطوری کد سایت ما را تفسیر و اجرا می‌کند.
اگر وسط جاده ماشین‌مان خراب شود، کاپوت را بالا می‌زنیمريال نگاهی به موتور می‌اندازیم و سعی می‌کنیم اشکال را پیدا و رفع کنیم.
در مورد سایت و خرابی آن هم همینکار رو میکنیم. دکمه Ctrl+Shift+C را در فایرفاکس و یا کروم می‌زنیم. یا روی صفحه در محل دلخواه کلیک راست کرده و Inspect Element را انتخاب می‌کنیم. به این روش دسترسی پیدا می‌کنیم به یک ابزار پیشرفته توسعه سایت که تمام اتفاقاتی را که در لایه زیرین سایت داخل مرورگر کاربر سایت می‌افتد، در اختیار ما قرار می‌دهد.
به کمک این ابزار می‌توانیم تست‌های مختلف و جالبی را انجام بدهیم. اندازه‌گیری‌های مفیدی را روی سایت اجرا کنیم و تغییرات لحظه‌ای روی سایت را مشاهده کنیم.

در زیر به صورت خلاصه به بعضی از قسمتها و کابردهای این ابزار اشاره می‌کنم:

Element inspecting:
توسط این ابزار می‌توانید کد html سایت را به صورت ساختار درختی DOM ببینید و آن را تغییر دهید و به صورت لحظه‌ای تغییرات را ببینید. این کار را امتحان کنید. سرگرم‌کننده هم هست:
مثلاً به سایت استیوجابز یا بروسلی! برید، عکس و مشخصاتش رو عوض کنید و اسم و عکس خودتون رو بنویسید و به بعدش پنجرهElement inspect رو ببندید. حالاً بغل دستیتون رو صدا بزنید. آدرس بار، عکس ومشخصات سایت رو نشونش بدهید. آدرس بار میگه این سایت استیو جابزه اما عکس و مشخصات شما در سایت قرار داده شده :)) ;)


Network:
این پنل یا پنجره اتفاقاتی را که در بخش شبکه می‌افتد، نشان می‌دهد. در هر لحظه به صورت Real Time می‌توانید دانلود‌ها و آپلودها را ببینید.


Timeline:
در اینجا لیست کامل فعالیت‌ها را می‌توانید مشاهده، ثبت و تحلیل کنید.

Application profiling:
در این قسمت مصرف حافظه یا رم را می‌تونید ببینید. هرچه مصرف حافظه سایت شما کمتر باشد، بازدید‌کننده راضی‌تر خواهد بود و سایت شما بهینه‌تر محسوب می‌شود.

Resources:
در این قسمت می‌توانید به منابع اختصاص یافته به سایت مانند کشcache ، پایگاه‌داده، کوکی و بسیار از موارد دیگر رسیدگی کنید.


نکته 1 : اسم این ابزار Browser Developer Tools است اما به دلیل آنکه در کلیک راست یا منوی مرورگر Inspect Element آمده(که قسمت کوچکی از این ابزار است)، خیلی‌ها به آن Inspector یا Inspect Element می‌گویند.

نکته2 : اگر یک Inspector حرفه‌ای تر می‌خواهید، افزونه Firebug را برای فایرفاکس نصب کنید.

نکته3: این ابزار در گوگل کروم بسیار کاملتر است. بعضی از گزینه‌های بالا فقط در کروم وجود دارد.

http://getfirebug.com/video/Intro2FB.ogv

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

[raghb_1]

ببخشید سوال؟
سلام
_وقتی تگ <div> را در دریم بصورت تو در تو مینویسم وخصوصیات ان را
position:relatvie ; top left
رامی نویسم آنچه که مکان عنصر در دریم ویو در دیزاین خود نشان میدهد با آنچه که با IE firefox
نشان میدهد متفاوت هست از نظر مکان عنصر div؟
_کلا برای جلوگیری از این اشکالات چکار کنیم ؟
ممنون

[hiwaaa]

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

ببخشید سوال؟
سلام
_وقتی تگ <div> را در دریم بصورت تو در تو مینویسم وخصوصیات ان را
position:relatvie ; top left
رامی نویسم آنچه که مکان عنصر در دریم ویو در دیزاین خود نشان میدهد با آنچه که با IE firefox
نشان میدهد متفاوت هست از نظر مکان عنصر div؟
_کلا برای جلوگیری از این اشکالات چکار کنیم ؟
ممنون

[raghb_1]

اینم دم دست
raghb_1.jpg

[hiwaaa]

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

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

[raghb_1]

چشم _ ممنون میشم فکر کنم مطلب testing خیلی باید بدرد بخور باشه

[hiwaaa]

جلسه یازدهم: تست کردن و آزمودن

mark-testing-300.gif

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

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

• Unit Testing
• Integration Testing
• Behavior Testing

همانطور که می‌دانید در بسیاری از پروژه های بزرگ افرادی هستند که تخصص و وظیفه آنها انجام تست است.

در دنیای کامپیوتر در طی سالها برای مشکلات رایج در یک حوزه ، راه حل های عمومی و خوبی نوشته می‌شود و در اختیار عموم قرار می‌گیرند. این راه‌حل ها می‌توانند ابزارهای واقعی مثل jQuery باشند یا صرفاً مفاهیم انتزاعی و مدل باشند مانند بعضی از الگوهای طراحی و Design Pattern ها. این راه حل‌ها را می توانیم فریموورک بنامیم.




در جلسات قبل در مورد فریموورک های CSS مانند Bootstrap و یا فریموورک های جاوا اسکریپت مانند jQuery صحبت کردیم. برای تست کردن نیز فریموورک های متعددی در طی سالیان اخیر توسعه پیدا کرده و دردسترس ما است. به عنوان مثال به موارد زیر اشاره می‌کنم:

• Mocha یک فریموورک تست کردن است که به زبان جاوا اسکریپت نوشته شده و مورد استفاده قرار می‌گیرد. این فریموورک در Node.js و مرورگر اجرا می‌شود. به کمک آن می‌توان به آسانی تست‌های اسنکرون انجام داد.

• Jasmine یک فریممورک تست کردن رفتار سایت برای جاوا اسکریپت است. این فریموورک متن باز هم هست.

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

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

286d2d5.jpg

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

[raghb_1]

بسیار جالب ومفید بود هیوا جان تصاویر مرتبط کمک زیادی به حفظ مطلب در حافظه میشود
- دوستان بازدن تشکر از آقا هیوا باعث دگرمی این عزیز شوند چون ایشان روزانه در حال گرد آوری مطالب هستند و روزانه دو دقیقه برای هرپست وقت بذارند چون این تجارب گرانی بهایی هستند
ممنون از همگی

[niknam_mh]

جلسه یازدهم: تست کردن و آزمودن

mark-testing-300.gif

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

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

• Unit Testing
• Integration Testing
• Behavior Testing

همانطور که می‌دانید در بسیاری از پروژه های بزرگ افرادی هستند که تخصص و وظیفه آنها انجام تست است.

در دنیای کامپیوتر در طی سالها برای مشکلات رایج در یک حوزه ، راه حل های عمومی و خوبی نوشته می‌شود و در اختیار عموم قرار می‌گیرند. این راه‌حل ها می‌توانند ابزارهای واقعی مثل jQuery باشند یا صرفاً مفاهیم انتزاعی و مدل باشند مانند بعضی از الگوهای طراحی و Design Pattern ها. این راه حل‌ها را می توانیم فریموورک بنامیم.




در جلسات قبل در مورد فریموورک های CSS مانند Bootstrap و یا فریموورک های جاوا اسکریپت مانند jQuery صحبت کردیم. برای تست کردن نیز فریموورک های متعددی در طی سالیان اخیر توسعه پیدا کرده و دردسترس ما است. به عنوان مثال به موارد زیر اشاره می‌کنم:

• Mocha یک فریموورک تست کردن است که به زبان جاوا اسکریپت نوشته شده و مورد استفاده قرار می‌گیرد. این فریموورک در Node.js و مرورگر اجرا می‌شود. به کمک آن می‌توان به آسانی تست‌های اسنکرون انجام داد.

• Jasmine یک فریممورک تست کردن رفتار سایت برای جاوا اسکریپت است. این فریموورک متن باز هم هست.

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

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

286d2d5.jpg

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

سلام

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

[aaaghooo]

ممنونم از محبتت.

[aaaghooo]

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

[behnamy01]

من امروز یک سورس کد دیدم که بحای html با زبان haml نوشته شده بود، آیا یادگیری این زبان ضروریه؟ میشه معرفی کنیدش؟

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

[hiwaaa]

من امروز یک سورس کد دیدم که بحای html با زبان haml نوشته شده بود، آیا یادگیری این زبان ضروریه؟ میشه معرفی کنیدش؟

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

بهنام عزیز، ممنونم از سوالت
بحثهای زیادی در این زمینه وجود داره.
ولی برای ما با هدفی که در ابتدای تاپیک سرچ کردیم، پرداختن به این مباحث حاشیه ای یکی از آخرین اولویت هاست. راستش ما بایدمسیر طولانی رو طی کنیم تا چنین سوالی برامون دغدغه بشه. به دلایل زیاد فعلاً با html و css مناسب تر هست مثلاً به دلیل:
- مرورگرهادر نهایت کد html و css رو میگیرند، رندر و تفسیر می کنند و نمایش می دهند.
- خیلی ها با آن آشنا هستند و این آشنایی کارشون رو راه میندازه تا با ابزارهای اصلیشون کار کنند و پروژه هاشون رو ببرن جلو.
- html و Sass در کانتکست Ruby خیلی اهمیت پیدا می کنند(به دلیل تشابه). در حالیکه ما اصلاً در مورد Ruby تا حالا حرف نزدیم.

ولی خوب ظاهراً کار کردن با اینها مزایایی هم دارد مثل
- کد خلاصه تر
- کاهش خطایهای تایپی
- یادگیری ساده و کد خوانا
- ...

خوب به بحث خودمون برگردیم.
در پست بعدی مطلبی در مورد Web Performance خواهم نوشتم. هر طراحی می‌خواهد سایتش سریع load شود. اما چطوری؟ در این مورد صحبت می‌کنیم.

[hiwaaa]

جلسه دوازدهم: Web Performance یا کارآیی وب سایت

shutterstock_76441294-580.jpg

فرض کنید ساخت وب سایت تان به پایان رسیده. آیا مطمئن هستید که سرعت آن قابل قبول است؟

شاید کنجکاو باشید، وضعیت انجمن برنامه نویس را بررسی کنید. برای این منظور روی این لینک کلیک کنید یا خودتان به سایتی مانند www.webpagetest.org بروید و سایت مورد نظرتان را وارد بکنید. در تصویری مشابه شکل زیر آمارها و شاخص‌هایی در مورد سرعت سایت برنامه‌نویس خواهید دید:

barnamenevis.PNG

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

barnamenevis2.PNG

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

برای داشتن اطمینان در مورد سرعت سایت، لازم است چند اصل ساده را در مورد نحوه رندر کردن مرورگر بدانید. فقط در این صورت است که مطمئن خواهید شد که سایت شما با سرعت و به شکلی کارا در دسترس کاربران‌تان قرار خواهد گرفت.
رندر کردن(render): نماش دادن کد و محتوای سایت به کاربر یا به زبان ساده تبدیل کد سایت به ظاهر تصویری سایت تان

در زمینه بهینه سازی وب سایت چند مفهوم کلیدی داریم که آشنایی با آنها صروریست:

- مسیر بحرانی رندر کردن: یعنی فرآیند تبدیل کد HTML، CSS و Javascript به پیکسلهای واقعی که در صفحه مرورگز به کاربرد نشان داده می‌شود.

- بهینه‌سازی عکسها: فرآیند استفاده از عکس با نوع مناسب و همچنین حذف متادیتای(metadata) اضافی فایل عکس

- کمینه کردن(minification) جاوا اسکریپت : فرآیند حذف کاراکترهای اضافی فایلهای جاوا اسکریپت برای کاهش حجم این فایلها

برای بهینه کردن سایت هم روشهایی وجود دارد که طراح و برنامه‌ویس وب می تواند آنها را خود انجام دهد. هم ابزارهایی بدین منظور توسعه یافته است. برای مسلط شدن بر این حوزه کتابهای خوبی نوشته شده و دوره های ویدئویی تهیه شده است.

آشنایی در همین حد می تواند انگیزه شما را برای وارد شدن به این حوزه بیشتر کند.

کارهای جالب و مفید زیادی به غیر از کد زدن وجود دارد که طراح وب باید انجام دهد. در جلسه بعد(جلسه ماقبل آخر) در مورد ابزارهای اتوماسیون و ساخت صحبت خواهیم کرد.

با ما همراه باشید.

[davood59]

ممنونم هیوا جان؛
الان در همین خصوص و افزایش سرعت load سایت میشه مثلا از تکنیک Css sprites هم اسم ببریم؟؟!!
اگه پاسختون مثبت هستش دیگه چه تکنیکهای مشابه دیگه ای در همین زمینه ها داریم؟؟؟؟

[hiwaaa]

ممنونم هیوا جان؛
الان در همین خصوص و افزایش سرعت load سایت میشه مثلا از تکنیک Css sprites هم اسم ببریم؟؟!!
اگه پاسختون مثبت هستش دیگه چه تکنیکهای مشابه دیگه ای در همین زمینه ها داریم؟؟؟؟

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

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

عدم تکرار یک attribute خاص مربوط به استایل هم یه تکنیک ساده ست(مثلا اگر هم برای body و هم پاراگراف فونت رو تعیین کنیم سرعت رندر رو کاهش میده).

البته باید بین سرعت و مثلاً خوانایی کد یا نگهداری آن توازن و trade off برقرار بشه. به عنوان مثال کاراترین روش از نظر سرعت برای CSS اینه که هر تک المنت استایل خودش رو داشته باشه. اما این نگهداری رو مشکل میکنه. باید حد وسطی را به دلخواه در نظر بگیریم.

عدم استفاده از Selectors یه روش دیگه ست. بهتر است از ID استفاده کنیم.

[hiwaaa]

جلسه دوازدهم: ابزارهای ساخت و اتوماتیک‌سازی

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

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

بنابراین کارهای زیادی هست که باید مکرراً انجام دهید. ابزارهایی مانند Grunt و Gulp که به ابزراهای ساخت و اتوماتیک‌سازی شناخته شده اند می‌توانند این کارها را در پس‌زمینه انجام دهند. در این صورت ما می‌توانیم روی کارهای اصلی ساخت یک وب‌سایت عالی تمرکز داشته باشیم.

در ادامه اسم تعدادی از این ابزارها را به همراه توضیحاتی مختصر می‌آورم:

• Npm که مدیر بسته یا package manager پیش فرض در node.js است و در واقع یک فریموورک است حاوی ابزارهای ساخت و اتوماتیک‌سازی نوشته شده برای آن.

• Grunt یک ابزار ساخت مبتنی بر خط فرمان و بر اساس task است برای تعامل با فایلهای روی هارد دیسک.

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

• Bower یک مدیر بسته یا package manager است برای کتابخانه‌های html، css و جاوا اسکریپت. این ابزار این امکان را فراهم می کند تا وابستگی‌ها را تعریف و بازیابی کنیم.

• Yeoman این برنامه به صورت اتوماتیک کد استانداردی را برای برنامه های مختلف بر اساس فریموورک ها و کتابخانه‌هایی که تعریف می کنید، تولید می‌کند. در واقع این برنامه یک برنامه scaffolding یا داربست‌سازی است.

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


پ.ن: گاهی ترجمه چقدر سخت میشه. آخه scaffolding رو به چی ترجمه کنم؟؟ :))

[raghb_1]

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

[hiwaaa]

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

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

:)

[hiwaaa]

جلسه آخر(سیزدهم): مهارتهای نرم یا مکمل

سلام دوستان عزیز،
امروز آخرین بحث از این سری رو با همدیگه بررسی می‌کنیم و پرونده اش رو میبندیم. حدود سه هفته است(17 بهمن 93 تا الان 11 اسفند) که این مطالب رو تهیه و منتشر میکنم . بعداً برای دوستانی که به نحوی درگیر این مطالب بودند(پاسخ، تشکر، پیغام خصوصی) پیغام میفرستم و نظرشون رو در مورد این سری میپرسم. کنجکاوم بدونم که وقتی که صرف این موضوع کردم بازدهی داشته یا نه. امیدارم بتونید جواب بدهید. به دلیل اینکه نوشتن در جاهای عمومی در اینترنت مثل صحبت کردن رو به دیوار و پشت به جمعیت میمونه، این جوابها خیلی کمک کننده است.

دغدغه بسیاری از دوستان اینه که آیا طراحی وب شغل درآمدزایی هست یا نه، برای کار پیدا کردن باید چه زبانها و مهارتهایی بلد باشیم و سوالات مشابه زیادی که دغدغه مشترک همه آنها کسب مهارتهای کافی برای رسیدن به هدفشان است.

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

1312894934_spices-stock.jpg

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

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

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

Eric-Emerson-Schmidt-biographya-com-3.jpg

در زیر به تعدادی از این مهارتهای نرم پرداخته می‌شود:
داشتن مهارت ارتباط موثر با دیگران: برای انتقال دادن مشکلات، اهداف، منظور و مقصود به مدیر، همکاران و مشتریان.

حل مسئله(به صورت Agile و چابک): فهم مسئله، شکستن آن به مسائل کوچکتر و قابل حل و به طور کلی داشتن مهارت حل مسئله و همچنین راه‌حل گرا بودن نه مشکل گرا.

اشتیاق:برای دنیال کردن پیشرفتهای تکنولوژیکی مختلف در زمینه کاری‌اش. افراد زیادی هستند که به دلیل نداشتن اشتیاق هنوز با دلفی و ابزارهای قدیمی کار می‌کنند!

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


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



پایان،
هیوا
ظهر روز دوشنبه 11 اسفند 93

667581_JdzLtw6Z.jpg

[aaaghooo]

سلام
ممنون هیوا جان
فکر می کنم مهارت های نرم کدنویسی های ظریف و ریز باشه. یعنی همون فوت کوزه گری کدنویسی.
ممنون

[gigidagostino]

سلام.خسته نباشید.عالی بود.یک سوال .من نقش زبان های برنامه نویسی رو در نوشته های شما پیدا نکردم.فقط از جاوا نام بردید(و ۲ بار PHP) و یکی از نیازهای اصلی رو جاوا عنوان کردید.من هم به عنوان یک کاربر مبتدی در کنار اکثر وب سایتها جاوا رو دیدم.آیا جاوا مثل CSS الزامی و غیر قابل حذفه(برای یک سایت نرمال)؟یا برنامه نویس میتونه نیازش رو با زبان برنامه نویسی دیگه ای مثل ASP || PHP و ... رفع کنه؟
ضمنا برای SEO آیا از پایه باید نکاتی در نظر گرفته بشن یا بعد قابل اجراست (به راحتی)؟آیا استفاده از Framework ها تغییری تو این موضوع ایجاد میکنه؟

[raghb_1]

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


تشکر از زحمات شما دوست عزیز

[hiwaaa]

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

[hiwaaa]

سلام.خسته نباشید.عالی بود.یک سوال .من نقش زبان های برنامه نویسی رو در نوشته های شما پیدا نکردم.فقط از جاوا نام بردید(و ۲ بار PHP) و یکی از نیازهای اصلی رو جاوا عنوان کردید.من هم به عنوان یک کاربر مبتدی در کنار اکثر وب سایتها جاوا رو دیدم.آیا جاوا مثل CSS الزامی و غیر قابل حذفه(برای یک سایت نرمال)؟یا برنامه نویس میتونه نیازش رو با زبان برنامه نویسی دیگه ای مثل ASP || PHP و ... رفع کنه؟
ضمنا برای SEO آیا از پایه باید نکاتی در نظر گرفته بشن یا بعد قابل اجراست (به راحتی)؟آیا استفاده از Framework ها تغییری تو این موضوع ایجاد میکنه؟

به خاطر تاخیر در پاسخ دادن به سوالتون عذرخواهی می کنم.
اگه دقت کرده باشی بارها اشاره کردم که تاکید من روی طراحی وب هست یعنی قسمت مربوط به کاربر، قسمتی که در مرورگر اجرا می شود. یعنی html، Css و جاوا اسکریپت و کتابخانه های مرتبط.
و سعی کردم سمت برنامه نویسی سمت سرور یعنی php یا ASP.net نرم. اگر هم برم سمت Node.js برم که برای کسانی که ما را همراهی کنند مناسب تره. چون مبتنی بر جاوا اسکریپتی هست که ما روش تمرکز کردیم.

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

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

[mmdsharifi]

سلام هیوا جان
اشاره ای هم به پیش پردازش های سی اس اس مثل SASS,LESS,stylus و برای جاوا اسکریپت Coffeescript می کردید خوب بود که با گرانت میشه راحت اون ها رو به CSS,javascript کامپایل کردو