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

[hiwaaa]

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

همونطور که میدونید سردرگمی و سوالات زیادی در زمینه توسعه و طراحی وب در ایران وجود داره؛ از بحث در مورد ابزارها، روشها و زبانهای جدید گرفته تا وضعیت بازار کار و نیازمندی‌های آن. همین الان اگر در مورد دغدغه اصلی ذهنی‌تون در زمینه وب، اشتغال و یا هر موضوع مرتبط دیگری در گوگل جستجو کنید و کیفیت نتایج رو ارزیابی کنید، مطمئنم هستم زیاد راضی نخواهید بود
.
http://forum.majidonline.com/attachment.php?attachmentid=107856&d=1423126499&thumb=1 (http://forum.majidonline.com/attachment.php?attachmentid=107856&d=1423159564)


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

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



128211
(http://forum.majidonline.com/attachment.php?attachmentid=107852&d=1423159564)


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

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


128212



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

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

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

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


128213
(http://forum.majidonline.com/attachment.php?attachmentid=107853&d=1423159564)



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

[hiwaaa]

روز اول:


Here we go

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

در قسمت قبلی (http://barnamenevis.org/showthread.php?485100-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%AA%D9%85%D8%A7%D9%85-%D9%85%D9%87%D8%A7%D8%B1%D8%AA%D9%87%D8%A7%DB%8C-%D9%85%D9%88%D8%B1%D8%AF-%D9%86%DB%8C%D8%A7%D8%B2-%DB%8C%DA%A9-%D8%B7%D8%B1%D8%A7%D8%AD-%D9%88%D8%A8-%D8%AD%D8%B1%D9%81%D9%87%E2%80%8C%D8%A7%DB%8C&p=2170689#post2170689)(روز صفرم!) توضیح دادم که جریان چیه و اینکه قصد دارم چکار کنم . لطفاً اگر مطلب قبلی رو نخوندید یه نگاه اجمالی بهش بندازید، فکر کنم حدود 2-3 دقیقه وقتتون بگیره.

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

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

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

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



128218



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

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


128216


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




HTML





CSS





Javascript





Responsive Web Design




HTML5, CSS3





CSS frameworks





Javascript Frameworks





Git, GitHub





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





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





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





تست





مهارتهای نرم





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



128217



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

[hiwaaa]

روز دوم: HTML




128267






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



128268




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




128269





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





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





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





انواع ورودی (http://www.w3schools.com/html/html_form_input_types.asp): یک المان ورودی برای ساختن کنترلهای تعاملی در فرم‌های سایتها به منظور گرفتن داده از کاربر مورد استفاده قرار می‌گیرد: دکمه، textbox






فرم‌ها (http://www.w3schools.com/html/html_form_elements.asp): فرم بخش مستقلی از فایل html است که شامل یک سری کنترل تعاملی از نوع ورودی هست.به کمک فرم می‌توان اطلاعاتی را از کاربر دریافت کرد و جهت پردازش یا ذخیره‌سازی به وب سرور ارسال کرد.




128270

:

[hiwaaa]

روز سوم: CSS

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




128302



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




128303





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



128304




برای کسانی که با مطالعه منابع انگلیسی راحت هستند، بهترین روش آموزش و تسلط بر HTML و CSS (و بسیاری از موضوعات دیگر)، سایت w3schools هست:
آموزش CSS (http://www.w3schools.com/css/default.asp)
آموزش HTML (http://www.w3schools.com/html/default.asp)

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

[hiwaaa]

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



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

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



128352



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


128351

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

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

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

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

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

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

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

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



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




128350


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


قدرت جادویی جاوا اسکریپت مربوط به چهار مورد اخیر لیست بالا و همینطور ده‌ها کتابخانه قدرتمند دیگری مانند Node.js هست که در اینجا می‌توانید مروری بر آنها داشته باشید (http://en.wikipedia.org/wiki/List_of_JavaScript_libraries).



128349


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

[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

128433




یکی از کلمات پرکاربرد که از زبان طراحان وب و حتی کاربران مختلف به کرات شنیده می‌شود، واکنشگرایی سایت یا Responsive بودن یا پاسخگو بودن سایت است. حالا این Responsive بودن چیست، چرا انقدر مهم هست که همه در باره‌ش صحبت می‌کنند، همایش تخصصی (http://conf.wsschool.org/) در مورد آن برگزار می‌کنند و روی ریسپانسیو بودن سایت تاکید دارند ؟

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

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



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

مطالعه بیشتر: + (http://www.w3schools.com/html/html_responsive.asp)، + (http://en.wikipedia.org/wiki/Responsive_web_design) ، + (http://fa.wikipedia.org/wiki/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D9%88%D8%A8_%D9%88 %D8%A7%DA%A9%D9%86%D8%B4%E2%80%8C%DA%AF%D8%B1%D8%A 7)


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

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

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

[بیتا حکمت]

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

[hiwaaa]

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

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

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

[بیتا حکمت]

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

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

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

[hiwaaa]

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

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

[tik_12]

روز اول:


Here we go

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

در قسمت قبلی (http://barnamenevis.org/showthread.php?485100-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%AA%D9%85%D8%A7%D9%85-%D9%85%D9%87%D8%A7%D8%B1%D8%AA%D9%87%D8%A7%DB%8C-%D9%85%D9%88%D8%B1%D8%AF-%D9%86%DB%8C%D8%A7%D8%B2-%DB%8C%DA%A9-%D8%B7%D8%B1%D8%A7%D8%AD-%D9%88%D8%A8-%D8%AD%D8%B1%D9%81%D9%87%E2%80%8C%D8%A7%DB%8C&p=2170689#post2170689)(روز صفرم!) توضیح دادم که جریان چیه و اینکه قصد دارم چکار کنم . لطفاً اگر مطلب قبلی رو نخوندید یه نگاه اجمالی بهش بندازید، فکر کنم حدود 2-3 دقیقه وقتتون بگیره.

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

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

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

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



128218



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

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


128216


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




HTML





CSS






Javascript






Responsive Web Design






HTML5, CSS3






CSS frameworks






Javascript Frameworks






Git, GitHub






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






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






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






تست






مهارتهای نرم





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



128217



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

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

[tik_12]

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

[hiwaaa]

روز ششم: HTML5، CSS3

128499



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

بر هر برنامه نویس وب واجب است که هرچه سریعتر html4 را رها کرده و به html5 به قول معروف مهاجرت (http://www.w3schools.com/html/html5_migration.asp)کند. چرا؟ چون هم قدرتمند تر است، هم کار با آن ساده‌تر است و هم اینکه توسط همه مرورگرها پشتیبانی می‌شود. پس تنها دلیلی که برای مهارجت نکردن باقی می‌ماند، تنبلی و علاقه به چیزهای قدیمی به دردنخور است!

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

128503


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


128506128502


البته کار با html5 مزایای متعدد بسیاری دارد . می‌توانید با یک جستجوی ساده مطالب خوبی(+ (http://www.business2community.com/mobile-apps/5-reasons-html5-making-waves-app-development-0815858)،+ (http://tympanus.net/codrops/2011/11/24/top-10-reasons-to-use-html5-right-now/)) در این زمینه پیدا کنید و مطالب آموزشی (http://www.w3schools.com/html/html5_intro.asp)خوبی پیدا کنید.

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

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

[davood59]

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

[hiwaaa]

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

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

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

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

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

[hiwaaa]

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

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

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

سالار کابلی 128577یکی از بهترین طراحان وب ایران هست و سابقه درخشانی در این حوزه دارد. احتمالاً شما که در حال خواندن این متن هستید، در برنامه‌تان یا رویاهایتان باشد که روزی در جایگاه کسانی مانند ایشان قرار بگیرید و توانایی و مهارتهای ویژه‌ای در حوزه وب کسب کنید. بنابراین لازم است که شناخت خوبی از روش و ابزارهای مورد استفاده چنین آمهایی داشته باشید. ایشون در در جایی در سایت خودش (http://sallar.me/1393/02/13/web-design-trends/) می‌گوید: "یکی از مهم‌ترین اتفاقات چند سال گذشته، پیدایش فریم‌ورک‌های مختلف برای طراحی مثل Bootstrap (http://getbootstrap.com/) و Foundation (http://foundation.zurb.com/) بود." شما هم احتمالاً در سایتهای مختلفی اسم فریموورک های مختلفی را شنیده اید. اما این مفهوم فریموورک که انقدر مهم هست، دقیقاً چیست و چرا لازم است با آن آشنایی داشته باشیم؟؟

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


128578


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

http://foundation.zurb.com/assets/img/homepage/hero-image.svg


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

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

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

به عنوان نمونه های فارسی که از این فریموورک استفاده کرده‌اند، دو سایت کاربردپذیری (http://www.usabilityday.ir/2011/) و یادبود استیو جابز (http://steve.p5x.org/) را معرفی می‌کنم.

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

[hiwaaa]

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

http://cdn.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/topjsgoogle/newtitle.jpg


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

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

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


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

http://ejohn.org/apps/workshop/adv-talk/jquery_logo.png


محبوب ترین کتابخانه در اینترنت jQuery است و کار با آن نیز آسان است. تقریباً تمام شرکتهای بزرگ دنیا در توسعه سایتهای خودشان از این کتابخانه استفاده می‌کنند.
از کتابخانه‌های معروف و مفید دیگر می‌توان به AngularJS، EmberJS، KnockoutJS، Prototype و MooTools اشاره کرد. هر کدام از اینها کاربردهای ویژه‌ای دارند و شما بر حسب نیاز از یک یا چندتا از اینها استفاده می‌کنید. برای دیدن لیست کامل این این کتابخانه‌ها این صفحه ویکی‌پدیا (http://en.wikipedia.org/wiki/List_of_JavaScript_libraries) رو نگاه کنید.

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

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

[kurd_programming]

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

[hiwaaa]

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

زور سپاس
:چشمک:

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

[raghb_1]

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

[hiwaaa]

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



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

[بیتا حکمت]

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

[hiwaaa]

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

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

در تاپیک دیگرم (http://barnamenevis.org/showthread.php?486569-%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8-%DA%A9%D9%86%DB%8C%D8%AF-%DA%A9%D8%AF%D8%A7%D9%85-%D8%AF%D9%88%D8%B1%D9%87-%D9%88%DB%8C%D8%AF%D8%A6%D9%88%DB%8C%DB%8C-%D8%B1%D8%A7-%D8%A8%D9%87-%D8%B1%D8%A7%DB%8C%DA%AF%D8%A7%D9%86-%D8%A8%D8%B1%D8%A7%D8%AA-%D8%AA%D9%87%DB%8C%D9%87-%DA%A9%D9%86%D9%85%D8%9F&p=2176971&viewfull=1#post2176971)، بحث مشابهی مطرح شده بود و اونجا (http://barnamenevis.org/showthread.php?486569-%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8-%DA%A9%D9%86%DB%8C%D8%AF-%DA%A9%D8%AF%D8%A7%D9%85-%D8%AF%D9%88%D8%B1%D9%87-%D9%88%DB%8C%D8%AF%D8%A6%D9%88%DB%8C%DB%8C-%D8%B1%D8%A7-%D8%A8%D9%87-%D8%B1%D8%A7%DB%8C%DA%AF%D8%A7%D9%86-%D8%A8%D8%B1%D8%A7%D8%AA-%D8%AA%D9%87%DB%8C%D9%87-%DA%A9%D9%86%D9%85%D8%9F&p=2176971&viewfull=1#post2176971)کمی توضیح دادم اما توضیح حتی برای خودم قانع کننده نبود!

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

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

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

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

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

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

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

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

:لبخند:

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

[mmdsharifi]

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

http://cdn.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/topjsgoogle/newtitle.jpg

...

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

http://ejohn.org/apps/workshop/adv-talk/jquery_logo.png

:تشویق:
ممنون از مطلبون .
راستی کتابخانه و فریمورک یکی نیستن!
اینجا رو ببیند:http://stackoverflow.com/questions/148747/what-is-the-difference-between-a-framework-and-a-library
واین منبع هم خیلی خفنه برای یادگیری جی کوری
http://learn.jquery.com/

[hiwaaa]

.


ممنون از مطلبون .
راستی کتابخانه و فریمورک یکی نیستن!
اینجا رو ببیند:http://stackoverflow.com/questions/148747/what-is-the-difference-between-a-framework-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 هستیم

[hiwaaa]

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


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

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

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

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

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

128723



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

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


http://www.molecularecologist.com/wp-content/uploads/2013/11/github-logo.jpg




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

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

128721



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

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

[raghb_1]

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


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

[hiwaaa]

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

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

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

شاید بهترین آموزش دنیا برای گیت، آموزش فوق العاده جالب خود سایت گیت (http://try.github.io/) باشه. واقعاً این نحوه آموزش تعاملی میتونه یک الگوی کامل برای مدرسان کامپیوتر باشه. بر اساس عملکرد مغز و نحوه یادگیری انسان، این روش بهترین روش یادگیریست.

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


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


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

[aaaghooo]

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


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

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

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

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

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

128723



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

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


http://www.molecularecologist.com/wp-content/uploads/2013/11/github-logo.jpg




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

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

128721



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

اما شما دوست عزیز که داری این کلمات رو میخونی، قصد دارید 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 (https://github.com/Teamwork)، 2 (https://zapier.com/zapbook/github/teamworkpm)، 3 (http://www.youtube.com/watch?v=61WbzS9XMwk)

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

[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 را برای فایرفاکس (https://addons.mozilla.org/en-US/firefox/addon/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]

اینم دم دست
128818

[hiwaaa]

دوست عزیز،@raghb_1 (http://barnamenevis.org/member.php?353227-raghb_1)
شما دوبار از من خواستی درباره گیت و امکانات توسعه مرورگرها مطلب تهیه کنم. به خاطر درخواست شما هردوبار سریع اینکارو کردم و پیغام دادم بهت و خبر دادم که مطلب آماده ست.
اما الان مشکلی رو مطرح کردی که ارتباطی به موضوع این تاپیک نداره. در واقع باید براش تاپیک جدید ایجاد کنی.
به علاوه مشکلی که مطرح کردی فوق العاده مطلب راحتی هست.
ترجیح میدم به جای بررسی کد ساده و خالص html مطلب بعدی رو در مورد Testing وب سایت آماده کنم برای امروز.

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

[raghb_1]

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

[hiwaaa]

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

128866



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

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



Unit Testing
Integration Testing
Behavior Testing


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

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

http://www.noesissolutions.com/Noesis/sites/default/files/Plugin_Framework.png


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


http://dailyjs.com/images/posts/mocha-tests.png




Mocha (http://mochajs.org)یک فریموورک تست کردن است که به زبان جاوا اسکریپت نوشته شده و مورد استفاده قرار می‌گیرد. این فریموورک در Node.js و مرورگر اجرا می‌شود. به کمک آن می‌توان به آسانی تست‌های اسنکرون انجام داد.





http://railscasts.com/static/episodes/stills/261-testing-javascript-with-jasmine.pngJasmine (http://jasmine.github.io)یک فریممورک تست کردن رفتار سایت برای جاوا اسکریپت است. این فریموورک متن باز هم هست.




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

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


128869


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

[raghb_1]

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

[niknam_mh]

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

128866



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

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



Unit Testing
Integration Testing
Behavior Testing


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

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

http://www.noesissolutions.com/Noesis/sites/default/files/Plugin_Framework.png


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


http://dailyjs.com/images/posts/mocha-tests.png




Mocha (http://mochajs.org)یک فریموورک تست کردن است که به زبان جاوا اسکریپت نوشته شده و مورد استفاده قرار می‌گیرد. این فریموورک در Node.js و مرورگر اجرا می‌شود. به کمک آن می‌توان به آسانی تست‌های اسنکرون انجام داد.





http://railscasts.com/static/episodes/stills/261-testing-javascript-with-jasmine.pngJasmine (http://jasmine.github.io)یک فریممورک تست کردن رفتار سایت برای جاوا اسکریپت است. این فریموورک متن باز هم هست.




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

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


128869


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


سلام

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

[aaaghooo]

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

[aaaghooo]

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

[behnamy01]

من امروز یک سورس کد دیدم که بحای html با زبان ham (http://haml.info/)l نوشته شده بود، آیا یادگیری این زبان ضروریه؟ میشه معرفی کنیدش؟

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

[hiwaaa]

من امروز یک سورس کد دیدم که بحای html با زبان ham (http://haml.info/)l نوشته شده بود، آیا یادگیری این زبان ضروریه؟ میشه معرفی کنیدش؟

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

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

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

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

[hiwaaa]

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


128960



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

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


128961


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


128962


تفسیر این اعداد و نمودارها دید خوبی به برنامه نویس در مورد ساختار سایت و سرعت آن می‌دهد. ابزارهای مشابه دیگری (http://www.webperformance.com/) هم داریم که کار با آنها و دیدن نتایج تحلیل آنها در مورد سایتمان دید خوبی در مورد وضعیت سایت به ما می دهد.

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

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

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

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

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

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

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

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

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

[davood59]

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

[hiwaaa]

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

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

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

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

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

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

[hiwaaa]

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

http://www.davidtan.org/wp-content/uploads/2010/03/web-automation-tools.jpg



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

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

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

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



Npm (https://www.npmjs.com)که مدیر بسته یا package manager پیش فرض در node.js است و در واقع یک فریموورک است حاوی ابزارهای ساخت و اتوماتیک‌سازی نوشته شده برای آن.





http://dontkry.com/images/npm.png





Grunt (http://gruntjs.com/)یک ابزار ساخت مبتنی بر خط فرمان و بر اساس task است برای تعامل با فایلهای روی هارد دیسک.


https://camo.githubusercontent.com/39242419c60a53e1f3cecdeecb2460acce47366f/687474703a2f2f6772756e746a732e636f6d2f696d672f6772 756e742d6c6f676f2d6e6f2d776f72646d61726b2e737667




Gulp (http://gulpjs.com)یک ابزار ساخت مبتنی بر خط فرمان و بر اساس برنامه است برای خواندن فایلهای روی هارد دیسک و تعامل با آن فایلها به صورت stream



http://eamodeorubio.github.io/gulpifyme/img/gulp-2x.png




Bower (http://bower.io)یک مدیر بسته یا package manager است برای کتابخانه‌های html، css و جاوا اسکریپت. این ابزار این امکان را فراهم می کند تا وابستگی‌ها را تعریف و بازیابی کنیم.




Yeoman (http://yeoman.io)این برنامه به صورت اتوماتیک کد استانداردی را برای برنامه های مختلف بر اساس فریموورک ها و کتابخانه‌هایی که تعریف می کنید، تولید می‌کند. در واقع این برنامه یک برنامه scaffolding یا داربست‌سازی است.


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


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

[raghb_1]

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

[hiwaaa]

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

:)

[hiwaaa]

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



http://www.careersingovernment.com/tools/wp-content/uploads/2014/11/soft-skills.jpg


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

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

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



129005


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

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

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


129007


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

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

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

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


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



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

129008

[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 کامپایل کردو

[hiwaaa]

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

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

[tamdata]

برای طراحی یک سایت responsive به نظر من بهترین گزینه bootstrap هست. همه چیز توش آماده است و کافیه که کپی بشه. ضمنا میتونید یک فایل custom برای خودتون ایجاد کنید و تغییراتی که نیاز هستش رو به اون اضافه کنید.
از سایت getbootstrap.com میتونید دانلودش کنید.

[babak2014]

ریسپانسیو رو با تکنولوژی bootstrap هم میشه آورد ؟

[tamdata]

دوست عزیز فریم ورک bootstrap به صورت mobile first طراحی شده و یکی از اهدافش براورده کردن نیاز امروزی responsive بوده است. سایت bootswatch.com رو یه نگاهی بندازید. نمونه هایی از این تکنولوژی رو میتونید ببینید. به نظر من بعد از اینکه کمی html رو کار کردید حتما در سایت getbootstrap.com بروید و این فریم ورک رو دانلود کنید. استفاده اش بسیار ساده است. اگر سوالی داشتید من در خدمت هستم. موفق باشید :چشمک:

[babak2014]

سلام
من دوره وردپرس رو تموم کردم اونجا از استایل jquery آماده استفاده میشود و بعد از آوردن تو سایت تغییرات لحاظ میشد همانند فایل قالب!!
امیدوارم در اینجا بعد از اتمام دوره خودم استایل jquery یا برنانه نویسی java script بنویسم
ضمنا هیوا جان شما میتونی فیلم آموزشی هم درست کنی اینجوری خیلی راحتر میشه،
با تشکر از زحمات شما ..

[hiwaaa]

سلام
من دوره وردپرس رو تموم کردم اونجا از استایل jquery آماده استفاده میشود و بعد از آوردن تو سایت تغییرات لحاظ میشد همانند فایل قالب!!
امیدوارم در اینجا بعد از اتمام دوره خودم استایل jquery یا برنانه نویسی java script بنویسم
ضمنا هیوا جان شما میتونی فیلم آموزشی هم درست کنی اینجوری خیلی راحتر میشه،
با تشکر از زحمات شما ..

بابک عزیز از ویدئو هم استفاده میکنم اما خودم تهیه شون نمیکنم. اما بهترین ویدئوهارو انتخاب میکنم. جزوه هم براش تهیه میکنم.

[elham1611]

مثل این میمونه بگید تمام مارتهای لازم برای ساخت یک درشکه اونم در قرن 21وب سایت و کامپیوتر از مد افتاده الان عصر موبایل و اپلیکیشن هستبیخود وقتتون رو دیگه صرف ساختن سایت نکنید منقرض شد

[ghasem110deh]

مثل این میمونه بگید تمام مارتهای لازم برای ساخت یک درشکه اونم در قرن 21وب سایت و کامپیوتر از مد افتاده الان عصر موبایل و اپلیکیشن هستبیخود وقتتون رو دیگه صرف ساختن سایت نکنید منقرض شد

سریع رفتین سر اصل مطلب ها !
نه سلامی ، نه علیکی !
--------------------------
واسه این که یاد بگیری 2*8 میشه چند ... اول باس جواب 2+8 رو بدونی :)
.
.
.
ما از توصیه شما استفاده میکنیم ... اما بزارین اول درشکه و گاری رو بسازیم ... بنز و بی ام و ؛ پیشکشمون :)

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

[behnamy01]

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

[elham1611]

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

کاشکی اینطوری بود و زحمات ما هم به باد نمیرفت.
اما شما نگاه کنید دیگه خود شما هم دارید از موبایل به جای کامپیوتر استفاده میکنید.
حتی روی بازدید گوگل هم تاثیر گذاشته و مردم برا خرید دیگه در گوگل سرچ نمیکنن بلکه مستقیم به اپلیکیشن ها رجوع میکنن.
به گفته مسولی دولتی حجم تبادل اطلاعات کافه بازار نزدیک به 10% کل حجم تبادل در ایران هستش.

سایتهای نیازمندی همه مغلوب یک اپلیکیشن نیازمندی به اسم دیوار شدند.
یاهو مسنجر به اون فراگیریش به دلیل کوچ کاربران تمام اتاقهای گفتکوش رو بست.
درصد استفاده از کامپیوتر برای اتصال به نت 10 درصد کاهش پیدا کرده در صورتی که استفاده از موبایل 40 درصد افزایش داشته.

به جرات میگم ده سال دیگه سایتهای اینترنتی نقشی در فناوری ندارن

[2undercover]

کاشکی اینطوری بود و زحمات ما هم به باد نمیرفت.
اما شما نگاه کنید دیگه خود شما هم دارید از موبایل به جای کامپیوتر استفاده میکنید.
حتی روی بازدید گوگل هم تاثیر گذاشته و مردم برا خرید دیگه در گوگل سرچ نمیکنن بلکه مستقیم به اپلیکیشن ها رجوع میکنن.
به گفته مسولی دولتی حجم تبادل اطلاعات کافه بازار نزدیک به 10% کل حجم تبادل در ایران هستش.

سایتهای نیازمندی همه مغلوب یک اپلیکیشن نیازمندی به اسم دیوار شدند.
یاهو مسنجر به اون فراگیریش به دلیل کوچ کاربران تمام اتاقهای گفتکوش رو بست.
درصد استفاده از کامپیوتر برای اتصال به نت 10 درصد کاهش پیدا کرده در صورتی که استفاده از موبایل 40 درصد افزایش داشته.

به جرات میگم ده سال دیگه سایتهای اینترنتی نقشی در فناوری ندارن

اتفاقا من بر عکس فکر می کنم.
تا 10 سال دیگه همه چیز به سرویس ها و پایگاه های اینترنتی وابسته خواهد بود.

کم کم نرم افزار های آفلاین دارند به سمت وب پیش میروند. مثلا همین سرویس های ذخیره سازی ابری یا مثلا Google Docs که در بیشتر موارد می تونه جای Microsoft Word بگیره، یعنی شما به عنوان کاربر در ازای سرویسی که می گیرید هزینه می کنید و دیگه نیازی نیست که کل مجموعه Office رو بخرید. یا یک مثال دیگه سیستم عامل کروم و کروم بوک ها هستند که میشه گفت کلا با وب سر و کار داره.
نرم افزار های موبایل هم همگی وابسته به وب هستند. فقط رابط کاربری از مرورگر منتقل شده به یک نرم افزار موبایل. که البته باز هم به نظر من همون تحت وب راحت تر هست. چون برای موبایل الان سه سیستم عامل معروف هستند (iOS، اندروید و ویندوزفون) که باز خود این سیستم عامل هم چندین نسخه و زیرشاخه دارند که به این معنی هست که برای ساختن یک نرم افزار به عنوان یک ارائه دهنده خدمات شما باید با تمام اون موارد نرم افزار رو سازگار بکنید. حالا به نظر من این خیلی راحت تر هست که از وب به عنوان بستر استفاده بشه؛ چون هیچ وابستگی ای به Platform مورد استفاده کاربر نداره.

[hiwaaa]

مثل این میمونه بگید تمام مارتهای لازم برای ساخت یک درشکه اونم در قرن 21وب سایت و کامپیوتر از مد افتاده الان عصر موبایل و اپلیکیشن هستبیخود وقتتون رو دیگه صرف ساختن سایت نکنید منقرض شد

الان صدها میلیون سایت داریم که پیجیده ترین ساختار شبکه کل تاریخ بشر رو ساختن.
در مورد سایت هم اینطوریه؟ به همین راحتی فکر میکنید این تار عنکبوتی عظیم وب از بین میره؟ مخصوصا با این پارادایم های جدیدی که اومده مثل وب 3 و محتوا و غیره.

بر روی موبایل شما 90% زمانت صرف فوقش با 7-8تا برنامه میشه. رقابت بر سر صفحه اصلی اسکرین کاربران و رسیدن به 7-8تا برنامه اول اونقدر سنگینه که فضا برای نفس کشیدن برای بقیه(بیش از نیم میلیون برنامه) خیلی سخته. 99.99% برنامه های موبایل در این رقابت میبازند. پس وارد شدن به عرصه موبایل به نظر من ریسک زیادی داره.

بعدشم با همین تکنولوژی های وب میشه app موبایل خیلی خوب نوشت که روی همه پلتفرم ها از جمله اندروید وIOS اجرا بشه.

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

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

[MMSHFE]

نکته مکمل در توضیحات جناب هیوای عزیز هم اینه که تمام این اپلیکیشنهایی که گفتین، یک سایت هم دارن که خوراکشون رو از اونجا میگیرین یا حتی میشه گفت اول سایت بودن، بعد اپلیکیشن هم براشون ساخته شده برای دسترسی بهتر. وب هیچوقت از بین نمیره. فقط ممکنه این وسط رابطهایی برای دسترسی بیشتر و ساده تر بصورت همراه و Portable و... فراهم بشه که موبایل هم یکی از همین موجهاست. اگه بخوایم اینطوری قیاس کنیم هم باید بگیم با وجود Wearable Devices (مثل عینک گوگل و ساعت Android و iWatch و...) بهتره دیگه برای موبایل هم برنامه ننویسیم. هر چیزی به جای خودش استفاده داره. آیا تبلت تونست جای لپ تاپ رو بگیره؟ آیا لپ تاپ تونست جای ‍Desktop PC رو بگیره؟ ممکنه این وسط Mediaهای جدید بیاد ولی چیزی که مسلمه اینه که بستر انتقال تکنولوژی، همچنان وب خواهد بود.

[csharpprogramer88]

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


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

128433




یکی از کلمات پرکاربرد که از زبان طراحان وب و حتی کاربران مختلف به کرات شنیده می‌شود، واکنشگرایی سایت یا Responsive بودن یا پاسخگو بودن سایت است. حالا این Responsive بودن چیست، چرا انقدر مهم هست که همه در باره‌ش صحبت می‌کنند، همایش تخصصی (http://conf.wsschool.org/) در مورد آن برگزار می‌کنند و روی ریسپانسیو بودن سایت تاکید دارند ؟

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

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



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

مطالعه بیشتر: + (http://www.w3schools.com/html/html_responsive.asp)، + (http://en.wikipedia.org/wiki/Responsive_web_design) ، + (http://fa.wikipedia.org/wiki/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D9%88%D8%A8_%D9%88 %D8%A7%DA%A9%D9%86%D8%B4%E2%80%8C%DA%AF%D8%B1%D8%A 7)


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

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

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

ی سوال : اگر یک سایت اسکرول بخوره ریسپانسیو نیست ؟ یا اسکرول خوردن مهم نیست و فقط کافیه مطالب و محتوا بدرستی نشون داده بشه ؟

[behnamy01]

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

ی سوال : اگر یک سایت اسکرول بخوره ریسپانسیو نیست ؟ یا اسکرول خوردن مهم نیست و فقط کافیه مطالب و محتوا بدرستی نشون داده بشه ؟
اسکرول ربطی به رسپانسیو نداره. رسپانسو یعنی در سایزهای مختلف مرورگر کاربرها، سایت به درستی نمایش داده بشه. یعنی اگر مثلا در نمایشگر کامپیوتر شما یک دکمه هستش با یک سایز خاصی، اگر رسپانسیو نباشه طراحیتون، اون دکمه برای کاربرهای موبایلتون خیلی کوچیک میشه و دیگه به راحتی نمیتونن روش کلیک کنن! ولی وقتی رسپانسیو کار میکنید اون دکمه بسته به اندازه سایز مانیتور کاربر، بزرگ و کوچیک میشه، حتی میتونید کلا layout رو برای هر کاربری بسته به اندازه مانیتورش تغییر بدید تا بهتر بتونه از سایت استفاده کنه.

[amir.m9821]

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

[csharpprogramer88]

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


128960



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

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


128961


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


128962


تفسیر این اعداد و نمودارها دید خوبی به برنامه نویس در مورد ساختار سایت و سرعت آن می‌دهد. ابزارهای مشابه دیگری (http://www.webperformance.com/) هم داریم که کار با آنها و دیدن نتایج تحلیل آنها در مورد سایتمان دید خوبی در مورد وضعیت سایت به ما می دهد.

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

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

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

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

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

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

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

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

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

[csharpprogramer88]

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


128960



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

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


128961


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


128962


تفسیر این اعداد و نمودارها دید خوبی به برنامه نویس در مورد ساختار سایت و سرعت آن می‌دهد. ابزارهای مشابه دیگری (http://www.webperformance.com/) هم داریم که کار با آنها و دیدن نتایج تحلیل آنها در مورد سایتمان دید خوبی در مورد وضعیت سایت به ما می دهد.

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

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

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

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

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

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

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

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

با ما همراه باشید.
این رنگ ها . خطوطی که اینجا هست ، بیانگر چه چیزایی هست ؟

[sahel_safari]

سلاو کاکه گیان . باشی؟ نمیدونم شما سورانی ای یا هورامی ولی کوردی نزدیک به شما رو در همین حد بلدم :لبخند:
عذر میخام من یه سوال درام فقط شما تو یه پست نوشته بودی که سایتای ایرانی منبع خوبی برای یادگیری طراحی وب نیست منم چون از قبل شنیده بودم همینو برای یادگیری رفتم سراغ سایت w3schools به نظر شما همین سایت کفایت میکنه؟ اینم بگم که من html و css رو تموم کردم الان دارم js می خونم آیا این سایت برای یادگیری html5 و css3 هم مناسبه؟

[پیام حیاتی]

سلاو کاکه گیان . باشی؟ نمیدونم شما سورانی ای یا هورامی ولی کوردی نزدیک به شما رو در همین حد بلدم :لبخند:
عذر میخام من یه سوال درام فقط شما تو یه پست نوشته بودی که سایتای ایرانی منبع خوبی برای یادگیری طراحی وب نیست منم چون از قبل شنیده بودم همینو برای یادگیری رفتم سراغ سایت w3schools به نظر شما همین سایت کفایت میکنه؟ اینم بگم که من html و css رو تموم کردم الان دارم js می خونم آیا این سایت برای یادگیری html5 و css3 هم مناسبه؟
مناسبه عزیز ، ادامه بده...