18 نكته از JQuery:
در این مقاله 18 نكته یا ترفند زیبا از JQuery گفته شده است كه بسیار پركاربرد هستند.
لینك مقاله:
http://www.prideparrot.com/blog/archive/2011/9/interesting_things_from_jquery
#JQuery #FrontEnd
@WebDevelopmentReferences
در این مقاله 18 نكته یا ترفند زیبا از JQuery گفته شده است كه بسیار پركاربرد هستند.
لینك مقاله:
http://www.prideparrot.com/blog/archive/2011/9/interesting_things_from_jquery
#JQuery #FrontEnd
@WebDevelopmentReferences
Prideparrot
Interesting things from jQuery
This post describes about some of the interesting features from jquery.
تبدیل كد خطا در درگاه پرداخت بانك ملت به متن خطا.
زمانی كه از درگاه پرداخت بانك ملت استفاده میكنید اگر نتیجه هر متد خطا باشد كدی برای شما بازگردانده می شود كه بر اساس راهنمای استفاده از وب سرویس باید متن مربوط به آن كد به كاربر نمایش داده شود كه زحمت این كار را باید برنامه نویس بكشد، برای راحتی كار تابع مورد نظر را در یك گیست گیت هاب قرار دادم تا دوستان استفاده كنند.
تنها كاری كه باید انجام دهید ساخت یك كلاس كمكی است و كپی كردن كدهای بنده بعد از انجام این كار هرجای برنامه می توانید این تابع را صدا زده و عدد خطا را به عنوان ورودی به تابع پاس بدهید و نتیجه متن خطا خواهد بود.
آدرس گیست تابع:
https://gist.github.com/A-Programmer/365a3cf716a2d0eb6ca55cc1047b8586
#BankMellat #DotNet #Helper
@WebDevelopmentReferences
زمانی كه از درگاه پرداخت بانك ملت استفاده میكنید اگر نتیجه هر متد خطا باشد كدی برای شما بازگردانده می شود كه بر اساس راهنمای استفاده از وب سرویس باید متن مربوط به آن كد به كاربر نمایش داده شود كه زحمت این كار را باید برنامه نویس بكشد، برای راحتی كار تابع مورد نظر را در یك گیست گیت هاب قرار دادم تا دوستان استفاده كنند.
تنها كاری كه باید انجام دهید ساخت یك كلاس كمكی است و كپی كردن كدهای بنده بعد از انجام این كار هرجای برنامه می توانید این تابع را صدا زده و عدد خطا را به عنوان ورودی به تابع پاس بدهید و نتیجه متن خطا خواهد بود.
آدرس گیست تابع:
https://gist.github.com/A-Programmer/365a3cf716a2d0eb6ca55cc1047b8586
#BankMellat #DotNet #Helper
@WebDevelopmentReferences
Gist
Bank Mellat Error Convertor
شروع كار با VueJs:
https://www.sitepoint.com/getting-started-with-vue-js/
#Vue_Js #Getting_Started
@WebDevelopmentReferences
https://www.sitepoint.com/getting-started-with-vue-js/
#Vue_Js #Getting_Started
@WebDevelopmentReferences
Sitepoint
Getting Started With Vue.js — SitePoint
Ashraff Hathibelagal introduces you to the basic concepts of Vue.js, explaining how to use one-way and two-way bindings, directives, filters, and events.
ارسال فرم به كنترلر اكشن در دات نت كور توسط Vue:
برای ارسال اطلاعات فرم به اكشن متد در دات نت كور توسط Vue باید از كتابخانه Axios استفاده كنیم.
اگر با جی كوئری كار كرده باشید احتمالا از ایجكس استفاده كرده اید.
یك نكته را به خاطر داشته باشید (در استفاده از axios) در پارامتر ورودی اكشن متد باید حتما از خاصیت FormBody استفاده كنید یعنی:
public IActionResult GetData([FormBody] User user)
{
return View();
}
اگر خاصیت فرم بادی قرار داره نشود اطلاعات دریافت نمی شوند!
در مطلب بعدی یك مثال ساده برای ارسال نام و نام خانوادگی به اكشن متد را توضیح خواهم داد.
#axios #DotNetCore #Vue_Js
@WebDevelopmentReferences
برای ارسال اطلاعات فرم به اكشن متد در دات نت كور توسط Vue باید از كتابخانه Axios استفاده كنیم.
اگر با جی كوئری كار كرده باشید احتمالا از ایجكس استفاده كرده اید.
یك نكته را به خاطر داشته باشید (در استفاده از axios) در پارامتر ورودی اكشن متد باید حتما از خاصیت FormBody استفاده كنید یعنی:
public IActionResult GetData([FormBody] User user)
{
return View();
}
اگر خاصیت فرم بادی قرار داره نشود اطلاعات دریافت نمی شوند!
در مطلب بعدی یك مثال ساده برای ارسال نام و نام خانوادگی به اكشن متد را توضیح خواهم داد.
#axios #DotNetCore #Vue_Js
@WebDevelopmentReferences
مثالی از ارسال اطلاعات به اكشن متد در دات نت كور توسط Vue و Axios:
در این مثال می خواهیم نام و نام خانوادگی را از كاربر دریافت كرده و به اكشن متد خاصی ارسال كنیم.
ابتدا كتابخانه های Vue و Axios را به صفحه اضافه میكنیم، همینطور فایل جی اس خودمان:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="/app/app.js"></script>
فرم مورد نظر هم به صورت زیر خواهد بود:
<div id="app">
<input name="firstName" v-model="firstName" placeholder="First Name"/>
<br/>
<input name="lastName" v-model="lastName" placeholder="Last Name"/>
<br/>
<button v-on:click="sendToServer">Submit</button>
</div>
فایل app.js كه كدهای مورد نیاز است را به صورت زیر می نویسیم:
new Vue({
el: "#app",
data: {
firstName: "",
lastName: ""
},
methods: {
sendToServer: function () {
axios({
method: 'post',
url: '/home/index',
data: {
"firstName": this.firstName,
"lastName": this.lastName
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
}
});
دقت كنید، یك متد داریم با نام sendToServer كه وظیفه ارسال اطلاعات به سرور و دریافت پاسخ را به عهده دارد.
حالا یك ویو مدل نیاز داریم كه به صورت زیر تعریف میكنیم:
namespace VueJsToNetCore.ViewModel
{
public class User
{
public string LastName { get; set; }
public string FirstName { get; set; }
}
}
و در آخر اكشن متد مورد نظر كه وظیفه دریافت اطلاعات ارسالی و اعمال عملیات خاص روی آن را دارد به صورت زیر می باشد:
[HttpPost]
public IActionResult Index([FromBody]User user)
{
return View();
}
این اكشن در مثال ما در كنترلری با نام Home قرار دارد.
#Vue_Js #ASP_Net_Core #axios
@WebDevelopmentReferences
در این مثال می خواهیم نام و نام خانوادگی را از كاربر دریافت كرده و به اكشن متد خاصی ارسال كنیم.
ابتدا كتابخانه های Vue و Axios را به صفحه اضافه میكنیم، همینطور فایل جی اس خودمان:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="/app/app.js"></script>
فرم مورد نظر هم به صورت زیر خواهد بود:
<div id="app">
<input name="firstName" v-model="firstName" placeholder="First Name"/>
<br/>
<input name="lastName" v-model="lastName" placeholder="Last Name"/>
<br/>
<button v-on:click="sendToServer">Submit</button>
</div>
فایل app.js كه كدهای مورد نیاز است را به صورت زیر می نویسیم:
new Vue({
el: "#app",
data: {
firstName: "",
lastName: ""
},
methods: {
sendToServer: function () {
axios({
method: 'post',
url: '/home/index',
data: {
"firstName": this.firstName,
"lastName": this.lastName
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
}
});
دقت كنید، یك متد داریم با نام sendToServer كه وظیفه ارسال اطلاعات به سرور و دریافت پاسخ را به عهده دارد.
حالا یك ویو مدل نیاز داریم كه به صورت زیر تعریف میكنیم:
namespace VueJsToNetCore.ViewModel
{
public class User
{
public string LastName { get; set; }
public string FirstName { get; set; }
}
}
و در آخر اكشن متد مورد نظر كه وظیفه دریافت اطلاعات ارسالی و اعمال عملیات خاص روی آن را دارد به صورت زیر می باشد:
[HttpPost]
public IActionResult Index([FromBody]User user)
{
return View();
}
این اكشن در مثال ما در كنترلری با نام Home قرار دارد.
#Vue_Js #ASP_Net_Core #axios
@WebDevelopmentReferences
تبدیل آدرس لوكال (localhost) به آدرس http و https به صورتی كه در اینترنت در دسترس باشد:
زمانی كه یك پروژه وب را میخواهید در اینترنت نمایش دهید(به دوستان و یا حتی تست) و یا پروژه نیاز به اجرا شدن در آدرس https دارد باید یك هاست و دامنه و گواهی نامه ssl تهیه كنید و هربار وب سایت را آپلود كنید.
با استفاده از این آموزش به راحتی می توانیم آدرس localhost:port را در حالت http و https در بستر اینترنت به صورتی كه تمام كاربران به آن دسترسی داشته باشند اجرا كنیم.
برای این كار وارد سایت www.ngrok.com می شوید
ثبت نام می كنید
از قسمت دانلود نرم افزار مربوط به سیستم عامل خودتان را دانلود میكنید
بعد از دانلود نرم افزار آن را از حالت فشرده خارج كرده و در پوشه ای(هر جای سیستم مهم نیست) ذخیره میكنید.
پروژه خود را اجرا كنید (مثلا عزیزانی كه دات نت كار میكنند در Visual Studio با فشردن کلید F5 اجرا میکنند)
با توجه به نرم افزار شما و زبان برنامه نویسی شما آدرس شما شبیه localhost:port خواهد بود که port عدد می باشد.
حالا با Command Prompt وارد آدرس پوشه ای كه ساختیم می شوید و دستور زیر را اجرا میكنید:
ngrok http [port] -host-header="localhost:[port]"
اگر مراحل را درست انجام داده باشد باید آدرس هایی شبیه به http://xxxxxx.ngrok.io و httpS://xxxxxxxx.ngrok.io را ببینید و یك سری توضیحات درباره وضعیت اپلیكیشن شما و اتصالات و...
حالا به راحتی با وارد كردن این دو آدرس می توانید
#Server #Https
@WebDevelopmentReferences
زمانی كه یك پروژه وب را میخواهید در اینترنت نمایش دهید(به دوستان و یا حتی تست) و یا پروژه نیاز به اجرا شدن در آدرس https دارد باید یك هاست و دامنه و گواهی نامه ssl تهیه كنید و هربار وب سایت را آپلود كنید.
با استفاده از این آموزش به راحتی می توانیم آدرس localhost:port را در حالت http و https در بستر اینترنت به صورتی كه تمام كاربران به آن دسترسی داشته باشند اجرا كنیم.
برای این كار وارد سایت www.ngrok.com می شوید
ثبت نام می كنید
از قسمت دانلود نرم افزار مربوط به سیستم عامل خودتان را دانلود میكنید
بعد از دانلود نرم افزار آن را از حالت فشرده خارج كرده و در پوشه ای(هر جای سیستم مهم نیست) ذخیره میكنید.
پروژه خود را اجرا كنید (مثلا عزیزانی كه دات نت كار میكنند در Visual Studio با فشردن کلید F5 اجرا میکنند)
با توجه به نرم افزار شما و زبان برنامه نویسی شما آدرس شما شبیه localhost:port خواهد بود که port عدد می باشد.
حالا با Command Prompt وارد آدرس پوشه ای كه ساختیم می شوید و دستور زیر را اجرا میكنید:
ngrok http [port] -host-header="localhost:[port]"
اگر مراحل را درست انجام داده باشد باید آدرس هایی شبیه به http://xxxxxx.ngrok.io و httpS://xxxxxxxx.ngrok.io را ببینید و یك سری توضیحات درباره وضعیت اپلیكیشن شما و اتصالات و...
حالا به راحتی با وارد كردن این دو آدرس می توانید
#Server #Https
@WebDevelopmentReferences
در استفاده از Lazy Loadig مراقب باشید!
Lazy Loading یك امكان در Entity Framework است كه به شما امكان میدهد بدون نگرانی روابط جداول اطلاعات را لود كنید.
به عنوان مثال در پروژه ای به این صورت مدلها پیاده سازی شده اند كه هر دسته بندی تعدادی مطلب دارد، هر مطلب تعدادی نظر و همینطور تعدادی برچسب دارد.
در واكشی به صورت Lazy Loadig شما نگران واكشی مطالب،نظرات و برچسبها بعد از واكشی دسته نیستید و تنها دسته را لود میكنید و به تمام روباط دسترسی دارید:
var category = db.Categories.FirstOrDefault();
var posts = category.Posts.ToList();
foreach(var post in posts)
{
var comments = post.Comments.ToList();
}
همانطور كه دیدید تنها با لود كردن یك دسته به تمام جداول زیرمجموعه آن نیز دسترسی داریم.
در نگاه اول امكان بسیار خوبی به نظر میرسد، بله در مواردی كه اطلاعات كم باشد مشكلی ایجاد نمیكند ولی تصور كنید تعداد بالایی از اطلاعات را در یك درخواست لود كنید در حالی كه تمام اطلاعات موجود در جداول یرمجموعه آن نیز قرار است لود شود در صورتی كه نیازی به آنها ندارید، مثلا هدف تنها نمایش عناوین مطالب یك دسته باشد، در این مثال نیازی به نظرات و برچسب ها نداریم!
در مقابل Lazy Loading امكان Eager Loading را داریم كه در هر كوئری تنها اطلاعات مورد نیاز را لود میكند، یعنی در مثال بالا اگر Lazy Loadig غیرفعال باشد با نوشتن كوئری زیر تنها به دسته دسترسی داریم و جداول مربوط به آن لود نمیشوند:
var category = db.Categories.FirstOrDefault();
كه اگر كد زیر را بنویسیم با خطا روبرو خواهیم شد:
var posts = category.Posts.ToList();
در اصل حالت استاندار نیز به همین صورت می باشد كه تنها اطلاعاتی كه مورد نیاز است را لود كنیم.
حال در مثال بالا وقتی Lazy Loading غیر فعال باشد اگر به مطالب هم نیاز داشته باشیم باید كوئری را به صورت زیر تغییر دهیم:
var categoriy = db.Categories.Include("Posts").FirstOrDefault();
به خاطر داشته باشید كه به صورت پیش فرض حالت Lazy Loading فعال می باشد و برای غیر فعال كردن به دو صورت زیر می توانیم عمل كنیم:
1. تنها در كوئری فعلی:
context.Configuration.LazyLoadingEnabled = false;
2. غیر فعال كردن به صورت عمومی در كلاس DbContext
Configuration.LazyLoadingEnabled = false;
بعد از انجام این عمل برای واكشی اطلاعات مرتبط باید از متد Include استفاده شود.
*** نكته : اگر از EF Core استفاده میكنید نیازی به غیرفعال كردن Lazy Loading ندارید به این دلیل كه این امكان در EF Core وجود ندارد و باید برای واكشی اطلاعات مرتبط از Eager Loading استفاده كنید.
#Lazy_Loadig #Eager_Loading #EntityFramework
@WebDevelopmentReferences
Lazy Loading یك امكان در Entity Framework است كه به شما امكان میدهد بدون نگرانی روابط جداول اطلاعات را لود كنید.
به عنوان مثال در پروژه ای به این صورت مدلها پیاده سازی شده اند كه هر دسته بندی تعدادی مطلب دارد، هر مطلب تعدادی نظر و همینطور تعدادی برچسب دارد.
در واكشی به صورت Lazy Loadig شما نگران واكشی مطالب،نظرات و برچسبها بعد از واكشی دسته نیستید و تنها دسته را لود میكنید و به تمام روباط دسترسی دارید:
var category = db.Categories.FirstOrDefault();
var posts = category.Posts.ToList();
foreach(var post in posts)
{
var comments = post.Comments.ToList();
}
همانطور كه دیدید تنها با لود كردن یك دسته به تمام جداول زیرمجموعه آن نیز دسترسی داریم.
در نگاه اول امكان بسیار خوبی به نظر میرسد، بله در مواردی كه اطلاعات كم باشد مشكلی ایجاد نمیكند ولی تصور كنید تعداد بالایی از اطلاعات را در یك درخواست لود كنید در حالی كه تمام اطلاعات موجود در جداول یرمجموعه آن نیز قرار است لود شود در صورتی كه نیازی به آنها ندارید، مثلا هدف تنها نمایش عناوین مطالب یك دسته باشد، در این مثال نیازی به نظرات و برچسب ها نداریم!
در مقابل Lazy Loading امكان Eager Loading را داریم كه در هر كوئری تنها اطلاعات مورد نیاز را لود میكند، یعنی در مثال بالا اگر Lazy Loadig غیرفعال باشد با نوشتن كوئری زیر تنها به دسته دسترسی داریم و جداول مربوط به آن لود نمیشوند:
var category = db.Categories.FirstOrDefault();
كه اگر كد زیر را بنویسیم با خطا روبرو خواهیم شد:
var posts = category.Posts.ToList();
در اصل حالت استاندار نیز به همین صورت می باشد كه تنها اطلاعاتی كه مورد نیاز است را لود كنیم.
حال در مثال بالا وقتی Lazy Loading غیر فعال باشد اگر به مطالب هم نیاز داشته باشیم باید كوئری را به صورت زیر تغییر دهیم:
var categoriy = db.Categories.Include("Posts").FirstOrDefault();
به خاطر داشته باشید كه به صورت پیش فرض حالت Lazy Loading فعال می باشد و برای غیر فعال كردن به دو صورت زیر می توانیم عمل كنیم:
1. تنها در كوئری فعلی:
context.Configuration.LazyLoadingEnabled = false;
2. غیر فعال كردن به صورت عمومی در كلاس DbContext
Configuration.LazyLoadingEnabled = false;
بعد از انجام این عمل برای واكشی اطلاعات مرتبط باید از متد Include استفاده شود.
*** نكته : اگر از EF Core استفاده میكنید نیازی به غیرفعال كردن Lazy Loading ندارید به این دلیل كه این امكان در EF Core وجود ندارد و باید برای واكشی اطلاعات مرتبط از Eager Loading استفاده كنید.
#Lazy_Loadig #Eager_Loading #EntityFramework
@WebDevelopmentReferences
✍️ فریم ورك ASP.NET Core سریع است؟
🖋 همانطور که می دانید NodeJS نزدیک ترین رقیب ASP.NET بوده که اگر منصفانه نتایج بررسی ها را ببینیم NodeJS همیشه جلوتر بوده و همین امر باعث مهاجرت خیلی ها به سمت Node شده بود.
اما با معرفی ASP.NET Core این رتبه بندی تغییر کرده به طوری که ASP.NET Core با فاصله بسیار زادی از رقیب خود یعنی NodeJs جلو زده است.
برای اطمینان می توانید نتیجه مقایس ها را جست و جو کنید.
برای مقایسه ابتدا باید شراط برای شرکت کننده ها یک سان باشد، می دانیم که سرعت وب سایت به شرایط مختلفی مثل سرور، سخت افزار سرور، سیستم عامل، تعداد درخواست ها، نوع درخواست ها و حتی سرعت اینترنت کاربر بازدید کننده بستگی دارد، برای منصفانه بودن مقایسه باید شایط عمومی یکسان درنظر گرفته شود.
متغیرهای ما در این مقایسه NodeJs و ASP.NET Core هستند.
در زمینه مقایسه، سایت Techempower نتایج قابل قبولی را ارئه میدهد که از نظر برنامه نویسیان مورد تایید است البته هنوز گستره کامل مقایسه را انجام نمیدهد اما تا همینجای کار هم کفایت می کند.
ساده ترین حالت مقایسه حالت نمایش یک نوشته معمولی Hello World است، می دانیم که اگر یک سیستم در نمایش نوشته ساده کند باشد قطعا در حالت های سخت تر هم کند خواهد بود.
عداد درخواست های پاسخ داده شده از 50 هزار در ثانیه
(در ASP MVC قدیم) به 1.15 میلیون (در ASP Core ) رسید. یعنی عملکرد ASP Core در مقایسه با ASP 4.6 حدود 23 برابر بهتر شده بود.
🎖🎖 آخرین آمار رسمی Techempower در روز ولنتاین منتشر شد و برای ASP Core 2 رکورد 2.216 میلیون را ثبت کرده است.
برای اثبات ادعا می توانید نتیجه مقایسات را در وب سایت Techempower مشاهده کنید.
راه بهتر و تست شده در محیط واقعی را هم می توانید داشته باشید :
📃 سال گذشته شرکت Raygun اعلام کرد با مهاجرت از Nodejs به ASP Core بازدهی سایتهایش بدون هیچ تغییر سخت افزاری به میزارن 2000 درصد بهبود پیدا کرده است. این یعنی 20 برابر شدن ظرفیت سرورها بدون هزینه اضافی!
متن کامل این ادعا را در بلگ خود ریگان مطالعه برمایید :
https://raygun.com/blog/increased-throughput-net-core/
#Benchmark #ASP_NET_Core #NodeJS
http://t.me/WebDevelopmentReferences
🖋 همانطور که می دانید NodeJS نزدیک ترین رقیب ASP.NET بوده که اگر منصفانه نتایج بررسی ها را ببینیم NodeJS همیشه جلوتر بوده و همین امر باعث مهاجرت خیلی ها به سمت Node شده بود.
اما با معرفی ASP.NET Core این رتبه بندی تغییر کرده به طوری که ASP.NET Core با فاصله بسیار زادی از رقیب خود یعنی NodeJs جلو زده است.
برای اطمینان می توانید نتیجه مقایس ها را جست و جو کنید.
برای مقایسه ابتدا باید شراط برای شرکت کننده ها یک سان باشد، می دانیم که سرعت وب سایت به شرایط مختلفی مثل سرور، سخت افزار سرور، سیستم عامل، تعداد درخواست ها، نوع درخواست ها و حتی سرعت اینترنت کاربر بازدید کننده بستگی دارد، برای منصفانه بودن مقایسه باید شایط عمومی یکسان درنظر گرفته شود.
متغیرهای ما در این مقایسه NodeJs و ASP.NET Core هستند.
در زمینه مقایسه، سایت Techempower نتایج قابل قبولی را ارئه میدهد که از نظر برنامه نویسیان مورد تایید است البته هنوز گستره کامل مقایسه را انجام نمیدهد اما تا همینجای کار هم کفایت می کند.
ساده ترین حالت مقایسه حالت نمایش یک نوشته معمولی Hello World است، می دانیم که اگر یک سیستم در نمایش نوشته ساده کند باشد قطعا در حالت های سخت تر هم کند خواهد بود.
عداد درخواست های پاسخ داده شده از 50 هزار در ثانیه
(در ASP MVC قدیم) به 1.15 میلیون (در ASP Core ) رسید. یعنی عملکرد ASP Core در مقایسه با ASP 4.6 حدود 23 برابر بهتر شده بود.
🎖🎖 آخرین آمار رسمی Techempower در روز ولنتاین منتشر شد و برای ASP Core 2 رکورد 2.216 میلیون را ثبت کرده است.
برای اثبات ادعا می توانید نتیجه مقایسات را در وب سایت Techempower مشاهده کنید.
راه بهتر و تست شده در محیط واقعی را هم می توانید داشته باشید :
📃 سال گذشته شرکت Raygun اعلام کرد با مهاجرت از Nodejs به ASP Core بازدهی سایتهایش بدون هیچ تغییر سخت افزاری به میزارن 2000 درصد بهبود پیدا کرده است. این یعنی 20 برابر شدن ظرفیت سرورها بدون هزینه اضافی!
متن کامل این ادعا را در بلگ خود ریگان مطالعه برمایید :
https://raygun.com/blog/increased-throughput-net-core/
#Benchmark #ASP_NET_Core #NodeJS
http://t.me/WebDevelopmentReferences
Raygun Blog
.Net core or node js? [We increased throughput by 2,000%]
We'll walk you through how by changing node.js to .Net Core we went from 1,000 requests per second per node to 20,000 requests per second. Check it out now
آنالیز رفتار كاربر در وب سایت:
حتما با ابزارهایی مانند گوگل آنالیز، وبگذر و دیگر سیستم های آماری آشنا هستید.
این ابزارها معمولا آماری مربوط به تعداد بازدید، كشور و شهر بازدیدكننده، دستگاه بازدیدكننده، لینك منبع و... را در اختیار مدیران وب سایتها قرار میدهند.
و حتما میدانید كه در دنیای امروز اطلاعات بیشترین ارزش را برای مدیر یك وب سایت دارد، چرا كه با داشتن اطلاعات علایق و رفتار كاربران میتوانیم كاربران را به مشتری تبدیل كنیم.
در این مطلب قرار است در رابطه با آنالیز رفتار یك كاربر در وب سایت از زمان ورود تا خروج صحبت كنیم.
ابزارهایی برای این كار وجود دارند كه پیشنهاد بنده hotjar و mouseflow است.
این ابزار چه خدماتی ارائه میدهند؟
در كل كاری كه انجام میشود ثبت رفتار كاربر در وب سایت می باشد:
1. نقشه گرمایشی یا heatmap
با استفاده از این امكان می توانیم بفهمیم روی كدام نقاط از صفحه(دكمه، منو، متن یا هر جای صفحه) بیشتر كلیك می شود.
2. ثبت حركت كاربر در صفحه:
با این امكان می توانیم حركت موس و جابجایی كاربر در صفحه را ثبت و ارزیابی كنیم، یعنی كاربر حركت كاربر در صفحه را ثبت میكند.
3. نظرسنجی و پرسش نامه:
Hotjar به ما این امكان را میدهد كه از كاربران نرسنجی در رابطه با هر مساله ای داشته باشیم.
نظرسنجی یكی از مهم ترین ابزارهای ارزیابی رضایت كاربران و تشخیص كمبودهای وب سایت است.
با این ابزار می توانید حتی مشخص كنید در حالت دسكتاپ چه سوالی پرسیده شود و در حالت موبایل چه سوالی!
4.بررسی نرخ تبدیل:
هیچ سایتی نرخ تبدیلش به 100% نمیرسد یعنی امکان ندارد که تمام کاربران سایت شما تبدیل به مشتری شوند ولی باید تلاش کنید که این نرخ را بالا ببرید. از طریق آپشن conversion funnel در ابزار Hotjar میتوانید نرخ تبدیل خود را بررسی کرده و ببینید که کجا و به چه دلیل کاربران خود را از دست میدهید. نوع محتوای خود را آنالیز کنید و ببینید که کدام فرم ها بیش از حد طولانی هستند، کدام دکمه ها بیش از حد کوچک هستند و ... ، سپس محتوای خود را با توجه به این داده ها اصلاح کنید تا یک قدم به سمت نرخ تبدیل بالاتر و مشتری بیشتر جلو بروید.
5.دریافت بازخورد یا فیدبك
با این ابزار به صورت مستقیم به كاربران اجازه می دهید تا مشكلات و ایرادات و حتی نقات قوت سایت را با شما درمیان بگذارند، با این كار می توانید نقاط قوت خود را بشناسید و مانور بیشتری بدهید و یا نقاط ضعف خود را دانسته و سعی در حل مشكلات داشته باشید.
#Hotjar #mouseflow #UX
http://t.me/WebDevelopmentReferences
حتما با ابزارهایی مانند گوگل آنالیز، وبگذر و دیگر سیستم های آماری آشنا هستید.
این ابزارها معمولا آماری مربوط به تعداد بازدید، كشور و شهر بازدیدكننده، دستگاه بازدیدكننده، لینك منبع و... را در اختیار مدیران وب سایتها قرار میدهند.
و حتما میدانید كه در دنیای امروز اطلاعات بیشترین ارزش را برای مدیر یك وب سایت دارد، چرا كه با داشتن اطلاعات علایق و رفتار كاربران میتوانیم كاربران را به مشتری تبدیل كنیم.
در این مطلب قرار است در رابطه با آنالیز رفتار یك كاربر در وب سایت از زمان ورود تا خروج صحبت كنیم.
ابزارهایی برای این كار وجود دارند كه پیشنهاد بنده hotjar و mouseflow است.
این ابزار چه خدماتی ارائه میدهند؟
در كل كاری كه انجام میشود ثبت رفتار كاربر در وب سایت می باشد:
1. نقشه گرمایشی یا heatmap
با استفاده از این امكان می توانیم بفهمیم روی كدام نقاط از صفحه(دكمه، منو، متن یا هر جای صفحه) بیشتر كلیك می شود.
2. ثبت حركت كاربر در صفحه:
با این امكان می توانیم حركت موس و جابجایی كاربر در صفحه را ثبت و ارزیابی كنیم، یعنی كاربر حركت كاربر در صفحه را ثبت میكند.
3. نظرسنجی و پرسش نامه:
Hotjar به ما این امكان را میدهد كه از كاربران نرسنجی در رابطه با هر مساله ای داشته باشیم.
نظرسنجی یكی از مهم ترین ابزارهای ارزیابی رضایت كاربران و تشخیص كمبودهای وب سایت است.
با این ابزار می توانید حتی مشخص كنید در حالت دسكتاپ چه سوالی پرسیده شود و در حالت موبایل چه سوالی!
4.بررسی نرخ تبدیل:
هیچ سایتی نرخ تبدیلش به 100% نمیرسد یعنی امکان ندارد که تمام کاربران سایت شما تبدیل به مشتری شوند ولی باید تلاش کنید که این نرخ را بالا ببرید. از طریق آپشن conversion funnel در ابزار Hotjar میتوانید نرخ تبدیل خود را بررسی کرده و ببینید که کجا و به چه دلیل کاربران خود را از دست میدهید. نوع محتوای خود را آنالیز کنید و ببینید که کدام فرم ها بیش از حد طولانی هستند، کدام دکمه ها بیش از حد کوچک هستند و ... ، سپس محتوای خود را با توجه به این داده ها اصلاح کنید تا یک قدم به سمت نرخ تبدیل بالاتر و مشتری بیشتر جلو بروید.
5.دریافت بازخورد یا فیدبك
با این ابزار به صورت مستقیم به كاربران اجازه می دهید تا مشكلات و ایرادات و حتی نقات قوت سایت را با شما درمیان بگذارند، با این كار می توانید نقاط قوت خود را بشناسید و مانور بیشتری بدهید و یا نقاط ضعف خود را دانسته و سعی در حل مشكلات داشته باشید.
#Hotjar #mouseflow #UX
http://t.me/WebDevelopmentReferences
Telegram
برنامه نویسی و طراحی
در این كانال نكات و كدهای برنامه نویسی و همینطور تجربه كاربری و طراحی به اشتراك گذاشته می شود.
✍ كد تمیز كدی است كه نسبت 10 به 1 در آن رعایت شده باشد!
در كدنویسی حتما با اصطلاح تمیز كد نوشتن آشنا هستید اما آیا واقعا میدانیم كد تمیز چه كدی است؟
حتما جملاتی مثل :
كامنت گذاری
دقت در انتخاب اسم توابع
و... به ذهنتان می رسد.
بله كاملا درست است ولی در مرحله اول یك قانون را رعایت كنید باقی موارد به خودی خود رعایت خواهند شد:
نسبت 10 به 1 را رعایت كنید.
یعنی كدی كه 10 دقیقه نوشتن آن طول می كشد باید در عرض 1 دقیقه قابل فهم و درك باشد.
اگر به این نكته دقت كنید قطعا در میابید كه كدهای شما باید كامنت گذاری شوند، توابع تا حد امكان ساده باشند و از پیچیدگی جلوگیری كنید، كوتاه نویسی رعایت شود و....
البته باید حتما نكته ای را هم در نظر داشت كه این تمیز بودن كد نباید سرعت انجام عملیات و نتیجه عملیات را بدتر كند، یعنی تمیزی را با تنبلی اشتباه نگریم.
#Clean_Code #Programming
http://t.me/WebDevelopmentReferences
در كدنویسی حتما با اصطلاح تمیز كد نوشتن آشنا هستید اما آیا واقعا میدانیم كد تمیز چه كدی است؟
حتما جملاتی مثل :
كامنت گذاری
دقت در انتخاب اسم توابع
و... به ذهنتان می رسد.
بله كاملا درست است ولی در مرحله اول یك قانون را رعایت كنید باقی موارد به خودی خود رعایت خواهند شد:
نسبت 10 به 1 را رعایت كنید.
یعنی كدی كه 10 دقیقه نوشتن آن طول می كشد باید در عرض 1 دقیقه قابل فهم و درك باشد.
اگر به این نكته دقت كنید قطعا در میابید كه كدهای شما باید كامنت گذاری شوند، توابع تا حد امكان ساده باشند و از پیچیدگی جلوگیری كنید، كوتاه نویسی رعایت شود و....
البته باید حتما نكته ای را هم در نظر داشت كه این تمیز بودن كد نباید سرعت انجام عملیات و نتیجه عملیات را بدتر كند، یعنی تمیزی را با تنبلی اشتباه نگریم.
#Clean_Code #Programming
http://t.me/WebDevelopmentReferences
Telegram
برنامه نویسی و طراحی
در این كانال نكات و كدهای برنامه نویسی و همینطور تجربه كاربری و طراحی به اشتراك گذاشته می شود.
روز برنامه نویس.
روز ۲۵۶ام هر سال (معادل عدد ۱۰۰در مبنای شانزده) به عنوان روز برنامه نویس نام گرفته است. عدد ۲۵۶بالاترین عدد دودویی در بین ۳۶۵ روز سال است که ارزش ویژه ای بین برنامه نویسان دارد.
برای اولین بار در سال ۲۰۰۲، کارمندان یک شرکت کامپیوتری در روسیه بودند که امضاهایی را جهت به رسمیت شناختن روزی با عنوان روز برنامه‌نویس جمع‌آوری کردند. در سال ۲۰۰۹ رئیس جمهور وقت روسیه، این روز را به عنوان روز برنامه‌نویس نام‌گذاری کرد و پس از آن کشورهای دیگر از جمله بریتانیا و ایالات متحده آمریکا این روز را به عنوان روز برنامه‌نویس پاس میدارند.
ممکن است ما عضو تیم یا شرکتی باشیم که به توسعه نرم‌افزار می پردازد، یک آزادکار و یا یک دانشجو باشیم، اینروز متعلق به همه ماست. ما به کمک هم ۱۰ آذرماه -یعنی ۲۵۶امین روز سال شمسی- را به عنوان روز برنامه نویس جشن میگیریم و آن را در تقویم ملی کشورمان ثبت می‌کنیم.
متنی بود از سایت pday.ir كه یك نظر سنجی عمومی برای ثبت این روز در تاریخ ملی كشورمان ایران راه انداخته است، شما هم می توانید با رای دادن به این نظرسنجی در این حركت سهیم باشید:
www.pday.ir
#Programmers_Day #Survey
http://t.me/WebDevelopmentReferences
روز ۲۵۶ام هر سال (معادل عدد ۱۰۰در مبنای شانزده) به عنوان روز برنامه نویس نام گرفته است. عدد ۲۵۶بالاترین عدد دودویی در بین ۳۶۵ روز سال است که ارزش ویژه ای بین برنامه نویسان دارد.
برای اولین بار در سال ۲۰۰۲، کارمندان یک شرکت کامپیوتری در روسیه بودند که امضاهایی را جهت به رسمیت شناختن روزی با عنوان روز برنامه‌نویس جمع‌آوری کردند. در سال ۲۰۰۹ رئیس جمهور وقت روسیه، این روز را به عنوان روز برنامه‌نویس نام‌گذاری کرد و پس از آن کشورهای دیگر از جمله بریتانیا و ایالات متحده آمریکا این روز را به عنوان روز برنامه‌نویس پاس میدارند.
ممکن است ما عضو تیم یا شرکتی باشیم که به توسعه نرم‌افزار می پردازد، یک آزادکار و یا یک دانشجو باشیم، اینروز متعلق به همه ماست. ما به کمک هم ۱۰ آذرماه -یعنی ۲۵۶امین روز سال شمسی- را به عنوان روز برنامه نویس جشن میگیریم و آن را در تقویم ملی کشورمان ثبت می‌کنیم.
متنی بود از سایت pday.ir كه یك نظر سنجی عمومی برای ثبت این روز در تاریخ ملی كشورمان ایران راه انداخته است، شما هم می توانید با رای دادن به این نظرسنجی در این حركت سهیم باشید:
www.pday.ir
#Programmers_Day #Survey
http://t.me/WebDevelopmentReferences
Telegram
برنامه نویسی و طراحی
در این كانال نكات و كدهای برنامه نویسی و همینطور تجربه كاربری و طراحی به اشتراك گذاشته می شود.
توضیح تصویر بالا 👆👆
در طراحی های خود سعی كنید white space را رعایت كنید.
این اصل به زبان ساده فضای آزاد برای استراحت چشم می باشد.
اصطلاح فضای سفید لزوما یك فضای سفیدرنگ نیست!
در طراحی فضای سفید یا "negative scapce" یك فضای خالی بین پاراگراف و متون، عكس ها، دكمه ها و به طور كلی المنت ها می باشد كه باعث می شود چشم كاربر استراحت كند.
همانطور كه عرض شد فصای سفید لزوما یك فضای سفیدرنگ نیست و می تواند هر رنگ یا شكلی داشته باشد حتی یك عكس!
متاسفانه دید مشتری با دید طراح یكی نیست در این زمینه و بیشتر مشتریان فضای سفید را یك فضای بلااستفاده و بی مصرف می بینند.
این "وظیفه ی" طراح است تا مشتری را قانع كند برای استفاده از فضای سفید.
#UX #UI #Design #Whitw_Space #Sadin
http://t.me/WebDevelopmentReferences
در طراحی های خود سعی كنید white space را رعایت كنید.
این اصل به زبان ساده فضای آزاد برای استراحت چشم می باشد.
اصطلاح فضای سفید لزوما یك فضای سفیدرنگ نیست!
در طراحی فضای سفید یا "negative scapce" یك فضای خالی بین پاراگراف و متون، عكس ها، دكمه ها و به طور كلی المنت ها می باشد كه باعث می شود چشم كاربر استراحت كند.
همانطور كه عرض شد فصای سفید لزوما یك فضای سفیدرنگ نیست و می تواند هر رنگ یا شكلی داشته باشد حتی یك عكس!
متاسفانه دید مشتری با دید طراح یكی نیست در این زمینه و بیشتر مشتریان فضای سفید را یك فضای بلااستفاده و بی مصرف می بینند.
این "وظیفه ی" طراح است تا مشتری را قانع كند برای استفاده از فضای سفید.
#UX #UI #Design #Whitw_Space #Sadin
http://t.me/WebDevelopmentReferences
Telegram
برنامه نویسی و طراحی
در این كانال نكات و كدهای برنامه نویسی و همینطور تجربه كاربری و طراحی به اشتراك گذاشته می شود.
شما نمی توانید طراحی را درك كنید تا زمانی كه مردم را نشناسید.
معنی ارائه شده بیشتر معنی كلمه به كلمه بود ولی در واقع موضوعی كه این جمله به ما می گوید به شرح زیر است:
زمانی كه طرحی می زنید (در این بحث تمركز روی طراحی وب سایت است) قرار نیست حتما (و تنها) شما عاشق طرح باشید، در اصل كاربران باید از طرح راضی باشند!
در نهایت این كاربران هستند كه تصمیم می گیرند آیا طرح شما زیبا و كاربردی است یا خیر.
با توجه به دو توضیح داده شده می توانیم نتیجه بگیریم كه ابتدا باید روان شناسی بلد باشید، باید بدانید كاربران از چه رنگ هایی لذت می برند، چطور كاربر خسته نشود و... اگر كاربر ملاك خوب بودن طرح باشد قطعا كار شما خوب خواهد بود، چرا كه این كاربران هستند كه باید طرح شما را بپسندند.
#UX #Design
http://t.me/WebDevelopmentReferences
معنی ارائه شده بیشتر معنی كلمه به كلمه بود ولی در واقع موضوعی كه این جمله به ما می گوید به شرح زیر است:
زمانی كه طرحی می زنید (در این بحث تمركز روی طراحی وب سایت است) قرار نیست حتما (و تنها) شما عاشق طرح باشید، در اصل كاربران باید از طرح راضی باشند!
در نهایت این كاربران هستند كه تصمیم می گیرند آیا طرح شما زیبا و كاربردی است یا خیر.
با توجه به دو توضیح داده شده می توانیم نتیجه بگیریم كه ابتدا باید روان شناسی بلد باشید، باید بدانید كاربران از چه رنگ هایی لذت می برند، چطور كاربر خسته نشود و... اگر كاربر ملاك خوب بودن طرح باشد قطعا كار شما خوب خواهد بود، چرا كه این كاربران هستند كه باید طرح شما را بپسندند.
#UX #Design
http://t.me/WebDevelopmentReferences
Telegram
برنامه نویسی و طراحی
در این كانال نكات و كدهای برنامه نویسی و همینطور تجربه كاربری و طراحی به اشتراك گذاشته می شود.
فوتر یا پانوشت در بعضی مواقع به خودی خود شلوغ است، میتوانید با قراردادن چند خط جدا كننده قسمت های مرتبط را در یك بخش قرار داده تا تمیزتر دیده شود.
در تصویر بالا دقت كنید:
در مود اول آیكون های شبكه اجتماعی به نظر خارج از تعادل می باشند.
در تصویر دوم نظم و تعادل به وضوح مشخص است.
#UX #UI #Design #Web_Design
http://t.me/WebDevelopmentReferences
در تصویر بالا دقت كنید:
در مود اول آیكون های شبكه اجتماعی به نظر خارج از تعادل می باشند.
در تصویر دوم نظم و تعادل به وضوح مشخص است.
#UX #UI #Design #Web_Design
http://t.me/WebDevelopmentReferences
Telegram
برنامه نویسی و طراحی
در این كانال نكات و كدهای برنامه نویسی و همینطور تجربه كاربری و طراحی به اشتراك گذاشته می شود.
اولویت در رندر و بارگزاری فایل های سی اس اس:
با قرار دادن مقدار preload در خاصیت rel می توانید برای بارگزاری آن فایل اولویت قائل شوید.
http://t.me/WebDevelopmentReferences
با قرار دادن مقدار preload در خاصیت rel می توانید برای بارگزاری آن فایل اولویت قائل شوید.
http://t.me/WebDevelopmentReferences
اولویت در رندر و بارگزاری فایل های سی اس اس:
با قرار دادن مقدار preload در خاصیت rel می توانید برای بارگزاری آن فایل اولویت قائل شوید.
ساده تر بگوییم، وب سایتی كه طراحی كرده ایم به هر دلیلی فایل های سی اس اس زیادی دارد و بارگزاری آن ها كمی زمان بر است، در این حالت كاربر باید منتظر بماند تا تمام سی اس اس ها بارگزاری شوند ولی با استفاده از این تكنیك می توانیم یك فایل سی اس اس اصلی كه حاوی ستون بندی های اصلی است ا ابتدا بارگزاری كنیم تا حداقل كاربر چهارچوب اصلی سایت را درست ببیند، سپس مابقی سی اس اس ها بارگزاری می شوند و شمایل اصلی وب سایت دیده خواهد شد.
#UI #Css #Preload #Web_Design
http://t.me/WebDevelopmentReferences
با قرار دادن مقدار preload در خاصیت rel می توانید برای بارگزاری آن فایل اولویت قائل شوید.
ساده تر بگوییم، وب سایتی كه طراحی كرده ایم به هر دلیلی فایل های سی اس اس زیادی دارد و بارگزاری آن ها كمی زمان بر است، در این حالت كاربر باید منتظر بماند تا تمام سی اس اس ها بارگزاری شوند ولی با استفاده از این تكنیك می توانیم یك فایل سی اس اس اصلی كه حاوی ستون بندی های اصلی است ا ابتدا بارگزاری كنیم تا حداقل كاربر چهارچوب اصلی سایت را درست ببیند، سپس مابقی سی اس اس ها بارگزاری می شوند و شمایل اصلی وب سایت دیده خواهد شد.
#UI #Css #Preload #Web_Design
http://t.me/WebDevelopmentReferences
Telegram
برنامه نویسی و طراحی
در این كانال نكات و كدهای برنامه نویسی و همینطور تجربه كاربری و طراحی به اشتراك گذاشته می شود.