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

نقل قول:

---

نوشته شده توسط raghb_1

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

---

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

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

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

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

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

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

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

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

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


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

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

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

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

نقل قول:

---

نوشته شده توسط raghb_1

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

---

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

نقل قول:

---

نوشته شده توسط davood59

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

---

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

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

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

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


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

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

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

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


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


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

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

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


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

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

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

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

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

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

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

نقل قول:

---

نوشته شده توسط raghb_1

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

---

اینم دم دست
ضمیمه 128818

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

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

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

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

ضمیمه 128866

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

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

• Unit Testing
• Integration Testing
• Behavior Testing

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

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

http://www.noesissolutions.com/Noesi..._Framework.png


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


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

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

• http://railscasts.com/static/episode...th-jasmine.pngJasmine یک فریممورک تست کردن رفتار سایت برای جاوا اسکریپت است. این فریموورک متن باز هم هست.

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

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

ضمیمه 128869

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

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

نقل قول:

---

نوشته شده توسط hiwaaa

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

ضمیمه 128866

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

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

• Unit Testing
• Integration Testing
• Behavior Testing

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

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

http://www.noesissolutions.com/Noesi..._Framework.png


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


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

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

• http://railscasts.com/static/episode...th-jasmine.pngJasmine یک فریممورک تست کردن رفتار سایت برای جاوا اسکریپت است. این فریموورک متن باز هم هست.

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

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

ضمیمه 128869

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

---

سلام

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

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

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

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

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

نقل قول:

---

نوشته شده توسط behnamy01

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

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

---

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

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

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

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

ضمیمه 128960

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

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

ضمیمه 128961

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

ضمیمه 128962

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

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

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

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

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

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

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

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

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

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

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

نقل قول:

---

نوشته شده توسط davood59

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

---

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

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

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

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

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

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

http://www.davidtan.org/wp-content/u...tion-tools.jpg

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

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

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

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

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

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

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

https://camo.githubusercontent.com/3...61726b2e737667

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

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

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

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

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


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

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

نقل قول:

---

نوشته شده توسط raghb_1

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

---

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

:)

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

http://www.careersingovernment.com/t...oft-skills.jpg

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

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

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

ضمیمه 129005

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

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

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

ضمیمه 129007

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

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

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

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


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



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

ضمیمه 129008

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

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

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


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

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

نقل قول:

---

نوشته شده توسط gigidagostino

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

---

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

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

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

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

نقل قول:

---

نوشته شده توسط mmdsharifi

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

---

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

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

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

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

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

نقل قول:

---

نوشته شده توسط babak2014

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

---

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

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

نقل قول:

---

نوشته شده توسط elham1611

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

---

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

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

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

نقل قول:

---

نوشته شده توسط behnamy01

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

---

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

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

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

نقل قول:

---

نوشته شده توسط elham1611

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

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

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

---

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

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

نقل قول:

---

نوشته شده توسط elham1611

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

---

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

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

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

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

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

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

نقل قول:

---

نوشته شده توسط hiwaaa

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


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

ضمیمه 128433

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

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

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



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

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


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

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

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

---

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

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

نقل قول:

---

نوشته شده توسط csharpprogramer88

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

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

---

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

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

نقل قول:

---

نوشته شده توسط hiwaaa

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

ضمیمه 128960

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

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

ضمیمه 128961

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

ضمیمه 128962

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

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

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

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

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

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

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

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

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

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

---

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

نقل قول:

---

نوشته شده توسط hiwaaa

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

ضمیمه 128960

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

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

ضمیمه 128961

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

ضمیمه 128962

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

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

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

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

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

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

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

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

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

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

---

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

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

نقل قول:

---

نوشته شده توسط sahel_safari

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

---

مناسبه عزیز ، ادامه بده...