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

[hiwaaa]

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

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

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

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

html5-css3-js_juntos-300x300.png

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

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

w.png

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

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

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

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

perfect.jpg

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

[hiwaaa]

روز اول:

Here we go

با سلام دوباره به شما دوست عزیز

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

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

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

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

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

web.PNG

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

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

2.jpg

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

• HTML
  

• CSS
  

• Javascript
  

• Responsive Web Design

• HTML5, CSS3
  

• CSS frameworks
  

• Javascript Frameworks
  

• Git, GitHub
  

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

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

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

• تست
  

• مهارتهای نرم
  

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

Web-Developer.jpg

فردا به صورت خلاصه در مورد HTML و علت اهمیت آشنایی با آن صحبت خواهم کرد.

[hiwaaa]

روز دوم: HTML

HTMLLOGO.PNG

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

HTML3.PNG

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

html-,etaphore.PNG

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

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

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

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

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

html.PNG

:

[hiwaaa]

روز سوم: CSS

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

css.PNG

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

csss.PNG

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

htmlcss.jpg

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

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

[hiwaaa]

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

javascript_logo.png

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

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

we.jpg

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


dynamic-website.jpg

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

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

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

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

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

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

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

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



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

javaScript_1.jpg

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


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

ninja1.jpg

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

[davood59]

سلام هیوا جان، واقعا ممنون و سپاسگزارم از مطالبی که تهیه کرده و زحمت ترجمه و نوشتنش رو متحمل میشی! مطمئنا تهیه هر کدوم از این پستها بالغ بر 2 ساعت وقت شما رو میگیره که فقط میتونم ازت صمیمانه قدردانی کنم و خدا خیرت بده.
هیوا جان چند تا سوال برام پیش اومده:
1- الان من دارم css و html و همچنین تبدیل قالب psd to html رو کار می کنم. یعنی با یادگیری همین موارد باز هم نیاز به آموختن جاوااسکریپت هست؟ امکانش هست بگید چرا بهتره که این زبان را یاد بگیریم؟
2- آیا با یادگیری جاوا اسکریپت ، آموختن Ajax و Jquery هم راحت تر میشه؟؟ یا ارتباطی به همدیگه ندارن؟؟؟!!!
3- خیلی دوست دارم منبع و سند این گفته تون رو بدونم؛ " زبان دنیای آینده، جاوا اسکریپت" آیا واقعاً همینطوره؟؟؟ حیطه تسلط شما به این زبان چقدره؟؟
و سوال آخرم اینکه این زبان چه تفاوتی با جاوا داره؟!
خیلی عذر میخوام و ببخشید که سوالاتم زیاد شدند.
بازم ازتون بابت تهیه این آموزشهای خوب ممنونم.

[hiwaaa]

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

1. همونطور که در بخش آخر گفتم، بدون جاوا اسکریپت فقط میتوان یک سایت ایستا و بدون هیچ رفتاری رو ساخت. برای اینکه سایت ما رفتار مشخصی داشته باشه، با کاربر تعامل داشته باشه، ورودی بگیره، نتایجی برگردونه و خیلی از کارهای یگه، باید جاوا اسکریپت اینکارارو بکنه.
فرض کنید به یه رستورانی رفتید و میخاید سرویس بگیرید. رستوران اونجا هست، ساخته شده، طراحی داخلیش انجام شده(HTML,CSS) اما کسی نیست هیچ آدمی اونجا نیست که سفارش بگیره ازتون، یا هیچ کاری براتون انجام بده.
سایت بدون جاوا اسکریپت هم مثل رستوران بدون آدم و گارسون هست ;)
به علاوه رویکرد غالب برنامه های تحت وب اینه که، سمت سرور(مثلاً php) لاغر تر و کوچکتر میشه، سمت کلاینت(یعنی مرورگر) چاقتر و بزرگتر میشه. سایتهایی مثل فیسبوک و بیشتر سایتهای آینده این ویژگی رو دارند. در چنین شرایطی جاوا اسکریپت که قویترین زبان سمت کلاینت هست، اهمیت ویزه ای پیدا میکنه.
به علاوه با توجه به سادگی و قدرت آن بوِیژه با وجود این همه کتابخانه قدرتمند مثل جی کویری و Node.js و آنگولار و backbone.js و ده ها مورد دیگه که در مطلب قبلی لینکش رو گذاشتم.

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

3. منبع من برای این حرفها Alex Blackstone و Spike Grimm دو توسعه دهنده سایت فوق العاده موفق Airbnb و Balaji Srinivasan استاد کامیپوتر استنفورد(که کسب و کار چندصد میلیون دلاری داره) و همینطور یکی از برنامه نویسان ارشد گوگل که اسمش رو فراموش کردم، هست. بین آدمهای صاحبنظر توافق غالب اینه که زبان دنیای آنده js هست. البته همیشه هم مخالفتهایی هست.
من خودم از سال 86-87 کار با این زبان رو شروع کردم و کارهای زیادی باهاش انجام دادم.

4. راستش تنها شباهت این دو زبان اینه که هردو کلمه جاوا دارند! هیچ شباهت دیگه ای با هم ندارند.

[بیتا حکمت]

من یه پیشنهادی دارم ، اینکه تاپیک مجزایی برای سوال و جواب هم وجود داشته باشه. اینکه تو یه تایپیک هم آموزش بدین هم جواب سوالات رو بدین ، نظم اینجا رو به هم می ریزه .

[hiwaaa]

من یه پیشنهادی دارم ، اینکه تاپیک مجزایی برای سوال و جواب هم وجود داشته باشه. اینکه تو یه تایپیک هم آموزش بدین هم جواب سوالات رو بدین ، نظم اینجا رو به هم می ریزه .

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

[yasharhi]

مهندس جان شما می خواهید html و css رو در این تاپیک اموزش بدید ؟!

[hiwaaa]

مهندس جان شما می خواهید html و css رو در این تاپیک اموزش بدید ؟!

سلام دوست عزیز، آقای یاشاری
اگر مطلب اول رو خونده باشی توضیح مختصری در این زمینه دادم که برنامه م چی هست.
راستش فکر میکنم این انجمن جای اموزش دادن نیست. اینجا بیشتر جای سوال پرسیدن و رفع اشکال هست.
بنابریان یاد دادن html یا هرچیز دیگر خارج از حوصله مخاطبان این انجمن و یا هر رسانه مشابه دیگری هست.
راستش الان گاهی فکر میکنم همین تاپیک یعنی مروری بر مهارتهایی که یک طراح وب برای بازار کار باید بلد باشه، هم خارج از حوصله و ظرفیت مخاطبان اینجاست.
نمیدونم شاید اشتباه کنم.
به هرحال فعلا ادامه میدم همین روند رو.
یعنی مروری بر توانایی های یک طراح وب front end developer، بر اساس منابع دست اول(سایتهای مطرح وب در دنیا و یا سایت دانشگاه های بزرگ مثل اسنفورد و شرکت گوگل) و به صورت خلاصه.

اگه نظر خاصی دارید، خوشحال میشم بشنوم

[yasharhi]

سلام دوست عزیز، آقای یاشاری
اگر مطلب اول رو خونده باشی توضیح مختصری در این زمینه دادم که برنامه م چی هست.
راستش فکر میکنم این انجمن جای اموزش دادن نیست. اینجا بیشتر جای سوال پرسیدن و رفع اشکال هست.
بنابریان یاد دادن html یا هرچیز دیگر خارج از حوصله مخاطبان این انجمن و یا هر رسانه مشابه دیگری هست.
راستش الان گاهی فکر میکنم همین تاپیک یعنی مروری بر مهارتهایی که یک طراح وب برای بازار کار باید بلد باشه، هم خارج از حوصله و ظرفیت مخاطبان اینجاست.
نمیدونم شاید اشتباه کنم.
به هرحال فعلا ادامه میدم همین روند رو.
یعنی مروری بر توانایی های یک طراح وب front end developer، بر اساس منابع دست اول(سایتهای مطرح وب در دنیا و یا سایت دانشگاه های بزرگ مثل اسنفورد و شرکت گوگل) و به صورت خلاصه.

اگه نظر خاصی دارید، خوشحال میشم بشنوم

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

[raha-23]

ممنون خوب بود ولي كاش زياد و به طور كامل توضيح مي دادين.

[hiwaaa]

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

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

[hiwaaa]

ممنون خوب بود ولي كاش زياد و به طور كامل توضيح مي دادين.

راستش فکر کنم چنین توضیح کاملی از حوصله چنین محیط و رسانه ای خارجه

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

البته میتوان منابع آموزشی رو معرفی کرد و یا مروری داشت بر مباحث ضروری.

سایتهای زیادی برای آموزش وجود داره هرچند 90%شون یا در محتوا یا در نحوه آموزش ایراد اساسی دارند. اون 10% هم به زبان انگلیسیه.
اگر به طور مشخص در مورد مشکل، نیاز یا خواسته تون توضیح بدید، من بهتر میتونم کمک کنم

مرسی که نظر دادید.

[hiwaaa]

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


روز پنجم: طراحی واکنشگرا یا Responsive

res.PNG

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

در پنج ثانیه می‌توان فهمید آیا سایتی ریسپانسیو یا واکشنگرا هست یا نه! همین الان (اگر بر روی کامپیوتر یا لپتاپ هستید)، اندازه پنجره مروگرتان را کوچک کنید. آیا چیدمان و ترکیب بخشهای سایت برای جا شدن در این پنجره کوچکتر تغییر می‌کند؟ اگر جواب مثبت است، پس این سایت responsive هست. اگر این کار را با سایت انجمن برنامه نویس انجام دهید، متوجه خواهید شد که این سایت Responsive طراحی نشده است.

علت آن این است که با افزایش تعداد وسیله‌هایی که صفحه نمایش آنها کوچکتر از کامپیوتر هست، یعنی تبلت و موبایل، درست دیده شدن سایت و به هم نریختن چیدمان آن اهمیت ویژه پیدا کرده است. امروزه درصد زیادی از مردم از تبلت یا موبایل برای گشت و گدار در وب استفاده می‌کنند. بنابراین صاحبان سایتها می‌خواهند سایتشان را طوری طراحی کنند که تمام مخاطبان آنها، مستقل از اندازه صفحه نمایش شان، بتوانند سایت را به درستی مشاهده کنند. امروزه هر سایت مدرنی حتماً باید واکنشگرا باشد.
سایت time.ir یا http://www.w3schools.com را ببنید. چند ثانیه اندازه پنجره را به دلخواه تغییر بدهید. مشاهده می‌کنید که ساختار سایت در لحظه تغییر می‌کند تا نیازی به اسکرول افقی نباشد و مخاطب سایت را به خوبی ببیند.



خبر خوب این است که طراحی واکنشگرا به همان اندازه که مهم است، به همان اندازه هم آسان است. Capture.PNG

مطالعه بیشتر: +، + ، +


پ.ن: در حین نوشتن این مطلب یادم اومد که امروز قرار بود HTM5 و CSS3 رو بگم. و فردا واکنشگرایی رو. ولی بر عکس شد! مهم نیست. کسی حواسش نیست ;)

فردا در مورد یکی از بزرگترین اتفاقات دنیای وب یعنی پیدایش و گسترش استفاده از HTM5 و CSS3 خواهم گفت.

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

[بیتا حکمت]

ایا این درسته که Responsive بودن همیشه هم مزیت نیست ، چون خیلی از تبلیغ دهندگان ترجیح می دن که تبلیغشون تو لپ تاپ و کامپیوتر دیده بشه تا موبایل

[hiwaaa]

ایا این درسته که Responsive بودن همیشه هم مزیت نیست ، چون خیلی از تبلیغ دهندگان ترجیح می دن که تبلیغشون تو لپ تاپ و کامپیوتر دیده بشه تا موبایل

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

برای همین فکر میکنم اینکه بخواهیم مطلبی برای بعضی ها(مثلاً برای سک مرورگر خاص، یا وسیله‌ی خاص و...) نمایش داده شود یا نشود یا متفاوت نشان داده شود، باید با کدنویسی (مثلاً php) انجام شود .

[بیتا حکمت]

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

برای همین فکر میکنم اینکه بخواهیم مطلبی برای بعضی ها(مثلاً برای سک مرورگر خاص، یا وسیله‌ی خاص و...) نمایش داده شود یا نشود یا متفاوت نشان داده شود، باید با کدنویسی (مثلاً php) انجام شود .

نه منظورم این نبود که نمایش داده نمیشه ، منظورم این بود که مثلا" شما یه تبلغی دارید برای فروش کتابی که نوشتین ، مسلما" ترجیح می دین این تبلیغ در کامپیوتر یا لپ تاب دیده با ابعاد بزرگتری دیده میشه تا گوشی موبایل (منظور اندازه تبلیغات بود )

[hiwaaa]

نه منظورم این نبود که نمایش داده نمیشه ، منظورم این بود که مثلا" شما یه تبلغی دارید برای فروش کتابی که نوشتین ، مسلما" ترجیح می دین این تبلیغ در کامپیوتر یا لپ تاب دیده با ابعاد بزرگتری دیده میشه تا گوشی موبایل (منظور اندازه تبلیغات بود )

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

[tik_12]

روز اول:

Here we go

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

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

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

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

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

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

web.PNG

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

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

2.jpg

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

• HTML
  

• CSS
  

• Javascript
  

• Responsive Web Design

• HTML5, CSS3
  

• CSS frameworks
  

• Javascript Frameworks
  

• Git, GitHub
  

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

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

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

• تست
  

• مهارتهای نرم
  

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

Web-Developer.jpg

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

ثبیببیسبسیبسی

[tik_12]

این متن کی نوشته شده است؟

[hiwaaa]

روز ششم: HTML5، CSS3

ضمیمه 128499

سلام دوستان، به سختی ضمیمه 128500 خودمو راضی کردم که این تاپیک رو ادامه بدم، so here we are ;)ضمیمه 128501

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

به عنوان مثال یکی از ویژگی های جالب آن این است که در HTML5 از دست تگ آزار دهنده div خلاص شدیم!

ضمیمه 128503

به جای تگ بی معنی div می‌توانیم از یک سری تگ معنادار مثل هدر، فوتر استفاده کنیم. اگر شکل‌ بالا و شکل‌های زیر را نگاه کنید، متوجه خواهید شد که چرا زندگی با وجود html5 راحت تر هست ;)

ضمیمه 128506ضمیمه 128502

البته کار با html5 مزایای متعدد بسیاری دارد . می‌توانید با یک جستجوی ساده مطالب خوبی(+،+) در این زمینه پیدا کنید و مطالب آموزشی خوبی پیدا کنید.

فردا در مورد فریموورک و چهارچوب‌های CSS و سپس JS صحبت خواهم کرد.

پ.ن: راستی بچه ها لطفاً از گوشه چپ-بالای این صفحه، نمره‌ای بین 1 تا 5 به این تاپیک بدید تا دوستان بیشتری این مطالب را ببینند.
نوشتن این مطالب برای من بیشتر از 12ساعت طول کشیده. رای دادن بهش 5ثانیه طول میکشه ;) مرسی دوست عزیز

[davood59]

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

[hiwaaa]

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

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

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

فکر میکنم روش دوم درست تره ولی من دارم کار نادرست تر رو اینجا انجام میدم.
نمیدونم

به هرحال امروز حتماً مطلب بعدی رو در مورد فریموورکهای جاوا اسکریپت یا CSS جمع&zwnj;آوری و ترجمه میکنم و میگذارم اینجا :)

[hiwaaa]

روز هفتم: CSS Framework یا فریموورک CSS

فریموورک را در زبان فارسی، "چهارچوب" ترجمه کرده‌اند. ولی من از همان کلمه فریموورک استفاده می‌کنم.

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

سالار کابلی sallar.PNGیکی از بهترین طراحان وب ایران هست و سابقه درخشانی در این حوزه دارد. احتمالاً شما که در حال خواندن این متن هستید، در برنامه‌تان یا رویاهایتان باشد که روزی در جایگاه کسانی مانند ایشان قرار بگیرید و توانایی و مهارتهای ویژه‌ای در حوزه وب کسب کنید. بنابراین لازم است که شناخت خوبی از روش و ابزارهای مورد استفاده چنین آمهایی داشته باشید. ایشون در در جایی در سایت خودش می‌گوید: "یکی از مهم‌ترین اتفاقات چند سال گذشته، پیدایش فریم‌ورک‌های مختلف برای طراحی مثل Bootstrap و Foundation بود." شما هم احتمالاً در سایتهای مختلفی اسم فریموورک های مختلفی را شنیده اید. اما این مفهوم فریموورک که انقدر مهم هست، دقیقاً چیست و چرا لازم است با آن آشنایی داشته باشیم؟؟

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

bootstrap-.png

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

علاوه بر این Bootstrap، فریموورک قدرتمند دیگری به نام Foundation داریم که توسط Zurb توسعه یافته است.

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

البته همانطور که سالار کابلی می‌گوید حتماً باید توجه داشت که "ابزارهایی مثل Twitter Bootstrap خوب هستن به شرطی که طراحی که ازون‌ها استفاده می‌کنه، اصول پایه‌ای طراحی و رابط کاربری نرم‌افزار رو به خوبی درک کرده باشه و با هوشیاری در جهت پیشرفت کارش ازشون استفاده بکنه، نه اینکه دقیقا همین‌ها رو بدون تغییر در طرحش قرار بده."

به عنوان نمونه های فارسی که از این فریموورک استفاده کرده‌اند، دو سایت کاربردپذیری و یادبود استیو جابز را معرفی می‌کنم.

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

[hiwaaa]

روز هشتم: کتابخانه و فریموورک‌های جاوا اسکریپت

کسی میدونی چرا این تاپیک به صفحه 2 نمیره؟؟ صفحه اول خیلی طولانی شده.

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

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

راستی فریموورک = کتابخانه

محبوب ترین کتابخانه در اینترنت jQuery است و کار با آن نیز آسان است. تقریباً تمام شرکتهای بزرگ دنیا در توسعه سایتهای خودشان از این کتابخانه استفاده می‌کنند.
از کتابخانه‌های معروف و مفید دیگر می‌توان به AngularJS، EmberJS، KnockoutJS، Prototype و MooTools اشاره کرد. هر کدام از اینها کاربردهای ویژه‌ای دارند و شما بر حسب نیاز از یک یا چندتا از اینها استفاده می‌کنید. برای دیدن لیست کامل این این کتابخانه‌ها این صفحه ویکی‌پدیا رو نگاه کنید.

شما به عنوان توسعه‌دهنده وب، ضروری است که با تعدادی از این کتابخانه‌ها، بویژه jQuery آشنایی داشته باشید. این کار هم توانایی شما را بیشتر می‌کند و هم کارتان را آسان‌تر می‌کند.

در جلسه بعدی به اهمیت ویژه version control و Git و GitHub می‌پردازم. بحث فوق العاده جالب و جذابی است.

[kurd_programming]

هیوا جان ایول داری به خدا یکی یدونه ایی ممنونم از این اطلاعات مفید و حرفه ای که داری به ما آموزش می دی
ایول همین طوری ادامه بده قربونت برم <3

[hiwaaa]

ممنونم از حمایت و لطفت

زور سپاس

هیوا جان ایول داری به خدا یکی یدونه ایی ممنونم از این اطلاعات مفید و حرفه ای که داری به ما آموزش می دی
ایول همین طوری ادامه بده قربونت برم <3

[raghb_1]

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

[hiwaaa]

raghb_1 عزیز، ممنونم از توجه و دلگرمی ات
امیدوارم مفید باشن این مطالب

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

[بیتا حکمت]

چرا شرکت ها دنبال افرادی هستن که به جاوا اسکریپت مسلط هستند ؟ خودتون هم اشاره کردین که با جی کوئری کارها رو خیلی راحتر میشه انجام داد.

[hiwaaa]

چرا شرکت ها دنبال افرادی هستن که به جاوا اسکریپت مسلط هستند ؟ خودتون هم اشاره کردین که با جی کوئری کارها رو خیلی راحتر میشه انجام داد.

بیتا خانم، سوال خوبیه. خیلی ها این سوال رو میپرسن.

در تاپیک دیگرم، بحث مشابهی مطرح شده بود و اونجا کمی توضیح دادم اما توضیح حتی برای خودم قانع کننده نبود!

الان من یه سرچ کردم ببینم آیا کسی دنبال متخصص جاوا اسکریپت هست یا نه. در 10 ثانیه اینهارو پیدا کردم:

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

"استخدام برنامه نویس در تهران استخدام تهران... برنامه نویس جاوا اسکریپت"
"استخدام برنامه نویس جاوا اسکرپت به صورت پروژه ای جهت..."
"یک شرکت نرم افزاری جهت تکمیل کادر فنی خود در زمینه تولید نرم افزار و Game موبایل از افراد خلاق ... استخدام برنامه نویس ... جاوا اسکریپت"

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

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

کتابخانه‌ها مثل خانه‌های پیش‌ساخته(توابع آماده) هستند. ممکن است در بسیاری موارد نیاز ما رو رفع کنند. اما ممکن است ما بخواهیم خانه متفاوت و خاص خودمون رو بسازیم، بر اساس نیاز و خواسته مون. ممکنه بخواهیم خانه کاراتر و بهتری بسازیم و بعدا ازشون استفاده کنیم.

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

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



ویرایش: با تشکر از davood59 عزیز، که اشتباه تایپی من رو تذکر دادند.

[mmdsharifi]

روز هشتم: کتابخانه و فریموورک‌های جاوا اسکریپت

...

راستی فریموورک = کتابخانه

ممنون از مطلبون .
راستی کتابخانه و فریمورک یکی نیستن!
اینجا رو ببیند:http://stackoverflow.com/questions/1...-and-a-library
واین منبع هم خیلی خفنه برای یادگیری جی کوری
http://learn.jquery.com/

[hiwaaa]

.

ممنون از مطلبون .
راستی کتابخانه و فریمورک یکی نیستن!
اینجا رو ببیند:http://stackoverflow.com/questions/1...-and-a-library
واین منبع هم خیلی خفنه برای یادگیری جی کوری
http://learn.jquery.com/

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

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

[behnamy01]

کسی میدونی چرا این تاپیک به صفحه 2 نمیره؟؟ صفحه اول خیلی طولانی شده.

اینجا برای هر صفحه 30 پست تنظیم شده که متاسفانه با استاندارد 10 یا 20 پست در هر صفحه تفاوت داره.

[raghb_1]

سلام خسته نباشی هیوا جان
1-من در سطح عمومی html را یاد گرفتم میخوام کمی عمیق تر باید بگیرم _ سوالم اینکه html5 مکمل html های قدیمی هستش یا متفاوت _ من html 5 را بصورت عمیق وقت صرف کنم یا اینکه اگر مکمله اول قدیمی ها بعد بیام سر وقتش
2-من دارم دریم ویوور رایاد میگیرم _ واینطوری برای خودم فرض کردم که دریم مرکز کار وساماندهی کارم باشه_ نظر شما چیه ؟_ در مورد دریم ویوور چی؟
3-من اینطور از نوشته هایتان فهمیدم : فرموورک های هر برنامه با خود همان برنامه می نویسند_؟ درسته آیا؟
4_ تا حدودی من روند کد ها را این طوری درک کردم که < html > css < css framework > java script >java script famework

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



**مرسی امیدوارم درست مفهوم سوالاتم را رسانده باشم** تشکر **

[hiwaaa]

سلام خسته نباشی هیوا جان
1-من در سطح عمومی html را یاد گرفتم میخوام کمی عمیق تر باید بگیرم _ سوالم اینکه html5 مکمل html های قدیمی هستش یا متفاوت _ من html 5 را بصورت عمیق وقت صرف کنم یا اینکه اگر مکمله اول قدیمی ها بعد بیام سر وقتش
2-من دارم دریم ویوور رایاد میگیرم _ واینطوری برای خودم فرض کردم که دریم مرکز کار وساماندهی کارم باشه_ نظر شما چیه ؟_ در مورد دریم ویوور چی؟
3-من اینطور از نوشته هایتان فهمیدم : فرموورک های هر برنامه با خود همان برنامه می نویسند_؟ درسته آیا؟
4_ تا حدودی من روند کد ها را این طوری درک کردم که < html > css < css framework > java script >java script famework

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



**مرسی امیدوارم درست مفهوم سوالاتم را رسانده باشم** تشکر **

مرسی دوست عزیز،
1- هرکدام رو که خواستی میتونی ادامه بدی، فرق نمیکنه، html5 ادامه و مکمل html هست(در واقع عدد نشان دهنده ورژن هست، html قبلی 4 بود الان شده 5، مثل ویندوز 10، 9 اما بعضی ها html5 رو به تگ های جدیدش میناسن).
2- همانطور که مایکروسافت ورد محیطیه برای تسهیل تاپیپ و نگارش، دریمویور هم محیطیه برای تسهیل کدنویسی که زبانهای زیادی رو ساپورت میکنه. برنامه خیلی خوبیه. از آموزش ویدئویی زیر که مال دانشگاه شریف هست، میتونی استفاده کنی:
http://maktabkhooneh.org/course?course=dream838
3-درسته
4-اره تریتب قابل قبول و منطقی هست. html، css، js پایه هستند، بعد فریموورکهای css و js، و ادامه ...

[hiwaaa]

اینجا برای هر صفحه 30 پست تنظیم شده که متاسفانه با استاندارد 10 یا 20 پست در هر صفحه تفاوت داره.

الان همین پستی که دارم مینوسیم پست 39 م هست. something is wrong!

[raghb_1]

منتظر Git هستیم