آنالیز رفتار كاربر در وب سایت:

حتما با ابزارهایی مانند گوگل آنالیز، وبگذر و دیگر سیستم های آماری آشنا هستید.
این ابزارها معمولا آماری مربوط به تعداد بازدید، كشور و شهر بازدیدكننده، دستگاه بازدیدكننده، لینك منبع و... را در اختیار مدیران وب سایتها قرار میدهند.
و حتما میدانید كه در دنیای امروز اطلاعات بیشترین ارزش را برای مدیر یك وب سایت دارد، چرا كه با داشتن اطلاعات علایق و رفتار كاربران میتوانیم كاربران را به مشتری تبدیل كنیم.
در این مطلب قرار است در رابطه با آنالیز رفتار یك كاربر در وب سایت از زمان ورود تا خروج صحبت كنیم.
ابزارهایی برای این كار وجود دارند كه پیشنهاد بنده hotjar و mouseflow است.
این ابزار چه خدماتی ارائه میدهند؟
در كل كاری كه انجام میشود ثبت رفتار كاربر در وب سایت می باشد:
1. نقشه گرمایشی یا heatmap
با استفاده از این امكان می توانیم بفهمیم روی كدام نقاط از صفحه(دكمه، منو، متن یا هر جای صفحه) بیشتر كلیك می شود.

2. ثبت حركت كاربر در صفحه:
با این امكان می توانیم حركت موس و جابجایی كاربر در صفحه را ثبت و ارزیابی كنیم، یعنی كاربر حركت كاربر در صفحه را ثبت میكند.

3. نظرسنجی و پرسش نامه:
Hotjar به ما این امكان را میدهد كه از كاربران نرسنجی در رابطه با هر مساله ای داشته باشیم.
نظرسنجی یكی از مهم ترین ابزارهای ارزیابی رضایت كاربران و تشخیص كمبودهای وب سایت است.
با این ابزار می توانید حتی مشخص كنید در حالت دسكتاپ چه سوالی پرسیده شود و در حالت موبایل چه سوالی!

4.بررسی نرخ تبدیل:
هیچ سایتی نرخ تبدیلش به 100% نمیرسد یعنی امکان ندارد که تمام کاربران سایت شما تبدیل به مشتری شوند ولی باید تلاش کنید که این نرخ را بالا ببرید. از طریق آپشن conversion funnel در ابزار Hotjar میتوانید نرخ تبدیل خود را بررسی کرده و ببینید که کجا و به چه دلیل کاربران خود را از دست میدهید. نوع محتوای خود را آنالیز کنید و ببینید که کدام فرم ها بیش از حد طولانی هستند، کدام دکمه ها بیش از حد کوچک هستند و ... ، سپس محتوای خود را با توجه به این داده ها اصلاح کنید تا یک قدم به سمت نرخ تبدیل بالاتر و مشتری بیشتر جلو بروید.

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

#Hotjar #mouseflow #UX

http://t.me/WebDevelopmentReferences

✍ كد تمیز كدی است كه نسبت 10 به 1 در آن رعایت شده باشد!

در كدنویسی حتما با اصطلاح تمیز كد نوشتن آشنا هستید اما آیا واقعا میدانیم كد تمیز چه كدی است؟
حتما جملاتی مثل :
كامنت گذاری
دقت در انتخاب اسم توابع
و... به ذهنتان می رسد.
بله كاملا درست است ولی در مرحله اول یك قانون را رعایت كنید باقی موارد به خودی خود رعایت خواهند شد:
نسبت 10 به 1 را رعایت كنید.
یعنی كدی كه 10 دقیقه نوشتن آن طول می كشد باید در عرض 1 دقیقه قابل فهم و درك باشد.
اگر به این نكته دقت كنید قطعا در میابید كه كدهای شما باید كامنت گذاری شوند، توابع تا حد امكان ساده باشند و از پیچیدگی جلوگیری كنید، كوتاه نویسی رعایت شود و....

البته باید حتما نكته ای را هم در نظر داشت كه این تمیز بودن كد نباید سرعت انجام عملیات و نتیجه عملیات را بدتر كند، یعنی تمیزی را با تنبلی اشتباه نگریم.

#Clean_Code #Programming

http://t.me/WebDevelopmentReferences

روز برنامه نویس.

روز ۲۵۶ام هر سال (معادل عدد ۱۰۰در مبنای شانزده) به عنوان روز برنامه نویس نام گرفته است. عدد ۲۵۶بالاترین عدد دودویی در بین ۳۶۵ روز سال است که ارزش ویژه ای بین برنامه نویسان دارد.
برای اولین بار در سال ۲۰۰۲، کارمندان یک شرکت کامپیوتری در روسیه بودند که امضاهایی را جهت به رسمیت شناختن روزی با عنوان روز برنامه‌نویس جمع‌آوری کردند. در سال ۲۰۰۹ رئیس جمهور وقت روسیه، این روز را به عنوان روز برنامه‌نویس نام‌گذاری کرد و پس از آن کشورهای دیگر از جمله بریتانیا و ایالات متحده آمریکا این روز را به عنوان روز برنامه‌نویس پاس میدارند.
ممکن است ما عضو تیم یا شرکتی باشیم که به توسعه نرم‌افزار می پردازد، یک آزادکار و یا یک دانشجو باشیم، اینروز متعلق به همه ماست. ما به کمک هم ۱۰ آذرماه -یعنی ۲۵۶امین روز سال شمسی- را به عنوان روز برنامه نویس جشن میگیریم و آن را در تقویم ملی کشورمان ثبت می‌کنیم.
متنی بود از سایت pday.ir كه یك نظر سنجی عمومی برای ثبت این روز در تاریخ ملی كشورمان ایران راه انداخته است، شما هم می توانید با رای دادن به این نظرسنجی در این حركت سهیم باشید:
www.pday.ir

#Programmers_Day #Survey

http://t.me/WebDevelopmentReferences

توضیح تصویر بالا 👆👆
در طراحی های خود سعی كنید white space را رعایت كنید.

این اصل به زبان ساده فضای آزاد برای استراحت چشم می باشد.
اصطلاح فضای سفید لزوما یك فضای سفیدرنگ نیست!
در طراحی فضای سفید یا "negative scapce" یك فضای خالی بین پاراگراف و متون، عكس ها، دكمه ها و به طور كلی المنت ها می باشد كه باعث می شود چشم كاربر استراحت كند.
همانطور كه عرض شد فصای سفید لزوما یك فضای سفیدرنگ نیست و می تواند هر رنگ یا شكلی داشته باشد حتی یك عكس!
متاسفانه دید مشتری با دید طراح یكی نیست در این زمینه و بیشتر مشتریان فضای سفید را یك فضای بلااستفاده و بی مصرف می بینند.
این "وظیفه ی" طراح است تا مشتری را قانع كند برای استفاده از فضای سفید.

#UX #UI #Design #Whitw_Space #Sadin

http://t.me/WebDevelopmentReferences

شما نمی توانید طراحی را درك كنید تا زمانی كه مردم را نشناسید.

معنی ارائه شده بیشتر معنی كلمه به كلمه بود ولی در واقع موضوعی كه این جمله به ما می گوید به شرح زیر است:
زمانی كه طرحی می زنید (در این بحث تمركز روی طراحی وب سایت است) قرار نیست حتما (و تنها) شما عاشق طرح باشید، در اصل كاربران باید از طرح راضی باشند!
در نهایت این كاربران هستند كه تصمیم می گیرند آیا طرح شما زیبا و كاربردی است یا خیر.
با توجه به دو توضیح داده شده می توانیم نتیجه بگیریم كه ابتدا باید روان شناسی بلد باشید، باید بدانید كاربران از چه رنگ هایی لذت می برند، چطور كاربر خسته نشود و... اگر كاربر ملاك خوب بودن طرح باشد قطعا كار شما خوب خواهد بود، چرا كه این كاربران هستند كه باید طرح شما را بپسندند.
#UX #Design

http://t.me/WebDevelopmentReferences

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

#UX #UI #Design #Web_Design

http://t.me/WebDevelopmentReferences

اولویت در رندر و بارگزاری فایل های سی اس اس:

با قرار دادن مقدار preload در خاصیت rel می توانید برای بارگزاری آن فایل اولویت قائل شوید.
http://t.me/WebDevelopmentReferences

اولویت در رندر و بارگزاری فایل های سی اس اس:

با قرار دادن مقدار preload در خاصیت rel می توانید برای بارگزاری آن فایل اولویت قائل شوید.
ساده تر بگوییم، وب سایتی كه طراحی كرده ایم به هر دلیلی فایل های سی اس اس زیادی دارد و بارگزاری آن ها كمی زمان بر است، در این حالت كاربر باید منتظر بماند تا تمام سی اس اس ها بارگزاری شوند ولی با استفاده از این تكنیك می توانیم یك فایل سی اس اس اصلی كه حاوی ستون بندی های اصلی است ا ابتدا بارگزاری كنیم تا حداقل كاربر چهارچوب اصلی سایت را درست ببیند، سپس مابقی سی اس اس ها بارگزاری می شوند و شمایل اصلی وب سایت دیده خواهد شد.

#UI #Css #Preload #Web_Design

http://t.me/WebDevelopmentReferences

تغییر استایل پیش فرض اسكرول بار مرورگرها.

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

#UI #Browswe_Scrollbar #CSS #Web_Design

http://t.me/WebDevelopentReferences

چند دلیل برای یاد گیری Vue:
1. مستندات این فریم ورك بسیار عالی ارائه شده است.
2. برای شروع نیازی نیست نرم افزار خاصی نصب كنید.
3. برای استفاده نیازی نیست از پكیج منیجرها استفاده كنید و مانند جی كوئری تنها یك فایل به پروزه اضافه میكنید.
4. نیاز نیست حتما از سبك خاصی استفاده كنید حتی می توانید از جاوا اسكریپت خالص هم استفاده كنید.
5. هم مانند ری اكت و انگولار است و هم مانند ناك اوت شما را سریع به هدف می رساند.
6. یك فریم ورك پیش رونده است و بر اساس نیاز شما امكانات بیشتری را در اختیار شما می گذارد.
#Vue

http://t.me/WebDevelopmentReferences

👆👆👆👆👆👆
بهترین فریم ورك سی اس اس كدام است؟

اگر طراح سایت باشید حتما با این سوال دست و پنجه نرم كرده اید كه بهترین فریم ورك سی اس اس برای شما كدام است!؟
در همین ابتدا باید عرض كنم تمام فریم ورك ها عالی هستند و نه شخص بنده و نه هیچ كس دیگری نمی تواند به شما بگوید كدام فریم ورك برای شما خوب است.
اصلا بهت بگویم، صورت مسئله اشتباه است! یعنی سوال اشتباهی می پرسید و بهتر است بگوییم "با توجه به پروژه و خواسته های من كدام فریم ورك در این پروژه بهتر است؟"
حالا باید شرایط پروژه را برای خود بنویسید و با توجه به آنها تصمیم بگیرید.
مثلا طرحی كه قرار است زده شود بیشتر از كامپوننت های آماده استفاده می كند و تم طرح قرار است متریال باشد (با توجه به خواسته مشتری یا طرح) خوب در این مورد دیگر استفاده از بوت استرپ اشتباه است (مگر فریم ورك متریال برای بوت استرپ).

یا طرحی كه تصور كرده ایم بیشتر امكاناتش شبیه به كامپوننت های فریم ورك های مجود نیست و حتی تغییر و ویرایش كامپوننت ها هم كار را بیشتر می كند، در این مورد بهتر است یك فریم ورك بایه كه تنها امكان گرید بندی و ریسپانسیو را می دهد استفاده كنیم و باقی امكانات را طراحی كنیم.

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

نتیجه گیری:
زمان تصمیم گیری برای انتخاب فریم ورك سی اس اس بهتر است شرایط پروژه و امكانات مورد نیاز را لیست كنیم و بر اساس آنها تصمیم بگیریم.

#Css_Frameworl #Design #Material #Bootstrap

http://t.me/WebDevelopmentReferences

معرفی شش افزونه ویژوال استادیو كد.

اگر شما از ویرایشگر ویژوال استادیو كد استفاده می كنید حتما می دانید كه این ویرایشگر ابزارهای كمكی در اختیار شما قرار می دهد كه می تواند روند كار را برای شما آسان و سریع تر كند.
در این مقاله به معرفی بعضی از ابزارهای مفید می پردازیم.
1. Docker Support (https://marketplace.visualstudio.com/items?itemName=PeterJausovec.vscode-docker)
امروزه داكر یكی از داغ ترین ترندها بین برنامه نویسان می باشد و شما هم به عنوان برنامه نویس نمی خواهید این امكان پر استفاده را از دست بدهید.
این افزونه رسمی داكر برای ویژوال استادیو كد می باشد.
ویژگی های كلیدی:
-ساده سازی عمل ساخت و اجرای كانتینرها
-ساخت فایل های داكر و كامپوز به صورت خودكار
-دستورات فایل های داكر و داكر كامپوز به صورت توكار در كامند اضافه می شوند.
-دارا بودن قابلیت سینتكس هایلایتینگ
2. Visual Studio Keymap(https://marketplace.visualstudio.com/items?itemName=ms-vscode.vs-keybindings)
استفاده از كلیدهای میانبر در برنامه نویسی صرفه جویی بسیار زیادی در كدنویسی است.پر كاربرد ترین كلیدهای میانبر كپی و پیست هستند كه تمام كاربران كامپیوتر با آن ها آشنایی دارند.
با این افزونه به راحتی می توانید كلیدهای میانبر شخصی خود را معرفی كنید و به سلیقه خودتان از میان برها استفاده كنید.
ویژگی های كلیدی:
-تمام كلیدهای میانبر ویژوال استادیو را در اختیار شما میگذارد.
-به راحتی می توانید كلیدهای میانبر خود را تعریف كنید.
-میانبر های ویندوز، لینوكس و مك را برای شما آماده می كند.
-كلیدهای میانبر دیگر افزونه ها را نیز برای شما نمایش می دهد و می توانید آنها را تغییر دهید.
3. React Redux ES6 Snippets(https://marketplace.visualstudio.com/items?itemName=sledsworth.react-redux-es6-snippets)
این افزونه حاوی قطعا كدهای پر استفاده ری اكت و ریداكس با ES6 برای جاوا اسكریپت می باشد كه روند كدنویسی را سریع تر می كند.
با استفاده از این افزونه تنها با نوشتن كلمات كلیدی سه حرفی و فشردن كلید تب قطعه كد مربوطه را خواهید داشت و نیازی به تایپ كردن كل قطعه كد نیست.
همینطور با استفاده از كلیدهای كنترل+اسپیس(فاصله) به تمام كلمات كلیدی دسترسی خواهید داشت.
4. Debugger for Chrome(https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
امروزه مرورگر كروم یكی از پر طرفدار ترین مرورگرها هم برای برنامه نویسان و هم برای كاربران عادی می باشد و این معروفیت در بین برنامه نویسان را مدیون قابلیت ها و افزونه های بسیار مفید برای برنامه نویسان می باشد.
افزونه ای كه نام برده شد برای دیباگ یا خطایابی كدهای جاوا اسكریپت در مرورگر كروم می باشد.
5. C#(https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp)
اگر شما از زبان سی شارپ استفاده می كنید و پروژه شما دات نت كور می باشد باید از این افزونه استفاده كنید كه توسط OmniSharp ارائه شده است.
ویژگی های كلیدی:
-خطایابی كدهای سی شارپ شما
-قابلیت های syntax highlighting, IntelliSense, Go to Definition, Find All References و بسیاری قابلیت دیگر
6. JQuery Code Snippets(https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets)
اگر هنووز هم شما از كتابخانه جی كوئری در پروژه های خود استفاده می كنید، این افزونه می تواند كدنویسی را برای شما سریع تر كند.
با نصب این افزونه به قطعه كدهای جی كوئری دسترسی پیدا میكنید كه با نوشتن كلمات كلیدی و فشردن كلید تب تمام آن قطعه كد برای شما نوشته می شود، همینطور با نوشتن jq می توانید لیست تمام كلمات كلیدی را ببینید.

#Visual_Studio_Code_Extension #Extension #Docker_Support #Visual_Studio_Keymap #React_Redux_ES6 #Debugger_For_Chrome #C_Sharp
#JQuery_Code_Sippets

http://t.me/WebDevelopmentReferences

✏️ VueJS and Data Binding:

📄 As you know we can show data in page with {{}}, but what about binding data to an element attribute like href?

For example we have a websiteTag data like this:
websiteTag: 'http://sadin.ir'
and we want to bind this data to an anchor tag.

If you try to use like this, you will see in href attribute 'websiteTag', but we want to see value of websiteTag (http://sadin.ir).

We should use v-bind for binding data to attributes:
<a v-bind:href="websiteTag">My Site</a>
Also we can use shortcut :href :
<a :href="websiteTag">My Site</a>
If you run index.html you can see http://sadin.ir is binding to href attribute of link.

Same way you can bind data to any other attributes, for example I want to show value of name in textbox:

In app.js:
name: 'Kamran',
websiteTag: 'http://sadin.ir'

In index.html:
<input type="text" v-bind:value="name'/>
<a href="websiteTag">MySite<a/>

Codes are available here:
https://codepen.io/A-Programmer/pen/oqryVx
https://gist.github.com/A-Programmer/6ff00e510a46475b0e719686c49cd495

🗓 in the next tip i'm going to show you how to bind html element to page.

#Vue #Data_Binding #Vue_Data_Binding

http://t.me/WebDevelopmentReferences

How HTML element can be bind to page by vue?

In last tip, I wrote about data binding to attributes, what about binding a html element to page? For example I want to get my site link from data called websiteHtmlTag.

I have a data called websiteHtmlTag and I want to render its value on my page:

websiteHtmlTag: '<a href="http://sadin.ir">My Site</a>

So lets try the latest way:

{{websiteHtmlTag}}

This will show output exactly same as its value, but what I want is showing rendered result! A hyper link with My Site text that links to http://sadin.ir .

First we create a p tag and then we should bind websiteHtmlTag to this element:

<p v-html="websiteHtmlTag"></p>

Now vue know in this p tag we want that html.
So if we run the page, we will see the right result.

Codes are available on Codepen and Github gist:

🌐 CodePen: https://codepen.io/A-Programmer/pen/EEBGvo

🌐 Github gist: https://gist.github.com/A-Programmer/3d717eec54199a780c1620746b6a1f6a

#Vue #Data_Binding #Vue_Data_Binding #Vue_Html_Binding

http://t.me/WebDevelopmentReferences