آموزش نصب و راه اندازی گالپ (Gulp.js)

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

گالپ چیست؟

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

برای شروع باید مراحل زیر را قدم به قدم انجام دهید:

1-نصب Node.js:

به دلیل اینکه Gulp بر پایه NodeJs ساخته شده است، اولین قدم نصب NodeJs می باشد. مراحل نصب را تا انتها پیش بروید تا نود جی اس بر روی سیستم شما نصب شود.

2-نصب گالپ

در این مرحله نوبت به نصب گالپ می رسد. صفحه CMD را باز کنید و دستور زیر را در آن بنویسید:

npm install --global gulp

به وسیله این دستور، گالپ بر روی سیستم شما نصب می شود.

برای استفاده از گالپ در هر پروژه باید از طریقcmd به مکان پروژه دسترسی پیدا کنیم و دستور مورد نظر را اجرا نماییم.   برای دسترسی به مکان پروژه مورد نظر cd را می نویسیم و سپس آدرس دقیق محل پروژه را وارد می کنیم و اینتر می زنیم:

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

npm install --save-dev gulp

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

برای این منظور یک فایل جاواسکریپت با نام gulpfile.js  در Root پروژه ایجاد کنید و کد زیر را در آن بنویسید:

var gulp =require('gulp');

gulp.task('default',function(){

//Tasks that we want to run

}

این کدها اسکلت بندی اصلی فایل gulpfile.js را نشان می دهد. مسلما این خطوط دراین مرحله کار خاصی را انجام نمی دهند. برای ایجاد دستور رفرش خودکار صفحات یا browser-sync ابتدا بسته مورد نظر را به وسیله کد زیر در ترمینال نصب کنید:

npm install browser-sync

سپس کد  زیر را در gulpfile.js بنویسید:

var gulp = require('gulp');

 var browserSync = require('browser-sync').create();

 // Static server

 gulp.task('default', function() {

     browserSync.init({

         server: {

             baseDir: "./"

         }

     });

    

     gulp.watch("*.html").on('change', browserSync.reload);

     gulp.watch("styles/*.css").on('change', browserSync.reload);

});

به دو خط انتهای دستور توجه کنید. خط اول همه فایل های html موجود در root پروژه شما را رصد می کند و به محض هر تغییر مرورگر را به روز می نماید.

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

"به فکر محتوای سایت خود باشید!"

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

سایتی که به روزرسانی نمی شود هیچ ارزشی ندارد.

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

- بازدید کنندگان را تحریک می کند که برای مطالب جدید دوباره به سایت بیایند.

- به شما فرصت معرفی مشخصه های جدید شرکت، محصولات،سرویس ها یا جلسات را می دهد.

- فرصت جذب مشتری و فروش بطور مستقیم و بدون نیاز به تبلیغات گسترده را می دهد.

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

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

با سایتتان همانند یک باغ رفتار کنید.

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

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

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

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

- برای بلاگ برنامه ریزی داشته باشید و بصورت مرتب و طبق تقویم زمانی شروع به تولید محتوا کنید.

- دسته بندی هایی که در سایت ایجاد می کنید می بایست مطابق زمینه کاری سایتتان باشد

- باید مخاطبان خود را بشناسید و بدانید به دنبال چه هستند و محتواهای مناسب مخاطبان تولید کنید.

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

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

برای نوشتن محتوا به نکات زیر توجه کنید:

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

محتوای با کیفیت: محتوای قابل اعتماد،جدید و علمی تولید کنید

اگر خودتان فرصت تولید محتوا ندارید نویسنده استخدام کنید: نویسنده می تواند بصورت مداوم و منظم سایت شما را به روزرسانی کند

پست مهمان: نمی خواهید نویسنده استخدام کنید می توانید از پست مهمان استفاده کنید.اضافه کردن امکان پست مهمان باعث افزایش جذابیت وب سایت می شود.

تبلیغات زیاد ممنوع

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

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

آموزش Woorank ابزار بررسی سئو سایت (قسمت دوم)

در مقاله قبلی در خصوص طراحی سایت حرفه ای آموزش woorank که یکی از ابزارهای نیمه رایگان بررسی سئو سایت است منوهای اولیه این ابزار را باهم مرور کردیم و با ویژگی و اطلاعاتی که این منوها از وضعیت سایت به ما می دهند آشنا شدیم، در قسمت دوم مقاله بخش های دیگر این ابزار را بررسی می کنیم.

Optimize-Usability

قسمت بعدی Usability یا قدرت کاربردی بودن سایت نشان داده می شود در این قسمت URL سایت و تعداد کاراکترهای آن بررسی می شود بهتر است نام url نامی مختصر و به یادماندنی بدون حروف پیچیده یا دوگانه باشد منظور از حروف دوگانه کلماتی است که به دو یا چند صورت قابل نوشت هستند اینگونه url ها باعث می شود کاربر به راحتی نام سایت را به خاطر نسپارد.

Favicon:نماد سایت است که در قسمت تب در مرورگر نمایش داده می شود.

صفحات با ارورو 404: ارور 404 که ناشی از نبودن یک صفحه است.

Page size:حجم تمام صفحات سایت را نشان می دهد

Load time: میزان زمانی که طول می کشد سایت بارگذاری شود.بارگذاری صفحات یکی دیگر از نکات مهم برای سئو است .

Language: نشان دهنده قدرت پشتیبانی سایت از زبانهای مختلف است که برای افزودن زبان باید در کدهای html فایل  کدهای مربوط به زبان را اضافه کنید.

Usability: نام دامنه شما با پسوندهای دیگر و وضعیت رزرو یا خالی بودن آنها را نمایش می دهد.

در قسمت Typo availability مدلهای مختلفی که می شود دامنه موردن نظر را نوشت با وضعیت رزور بودن نشان داده می شود.

 Optimize-Technologies

Technologies: مشخصات آی پی و تکنولوژی های مورد استفاده برای طراحی سایت بکار گرفته شده است را نشان می دهد.

Crawl Errors: بک لینک ها و کیفیت و تعداد آنها در این قسمت بررسی می شود .

Promote-Social

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

Measure-visitors

یکی دیگر از مشخصه های مهم سئو بازدید کننده از سایت است که هرچه این تعداد بیشتر باشد برای سایت و رتبه آن بهتر است

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

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

آموزش Woorank ابزار بررسی سئو سایت

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

در این مقاله بهینه سازی سایت تصمیم داریم یکی از ابزارهای بررسی سئو که Woorank نام دارد را آموزش دهیم.با آموزش قدم به قدم woorank همراه باشید.

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

ابتدا در قسمت آدرس بار مرورگر آدرس  Woorankرا وارد کنید.

پس از باز شدن سایت با توجه به تصویر زیر، آدرس سایت موردنظر را در فیلد خالی وارد کنید. ما در اینجا آدرس سایت سینامد که یک سایت فروش و تجهیزات دندانپزشکی است را وارد کردیم: پس از وارد کردن آدرس سایت اطلاعات فنی سئو سایت نمایش داده می شود وورنک دوقسمت دارد که در سمت چپ صفحه، منوهای آن نمایش داده می شود که با اسکرول کردن موس منو جابجا می شود منو شامل سه قسمت SEO,Promote,Measure می باشد.که هریک را به ترتیب با زیر شاخه های آنها توضیح می دهیم.

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

دروسط و بالای صفحه نمای کلی نشان داده می شود که شامل سه نمودار passed، To Improve، Errors است.

Passed: به معنای عدم وجود مشکل

ToImprove: مشکلات رو به بهبودی

Errors: مشکلات موجود

از قسمت Optimize شروع می کنیم. این قسمت شامل 5 قسمت است:

SEO,Mobile Usability,Technologoes,Crawl Errors

SEO

Title Tags (عنوان سایت): عنوان سایت ومیزان بهینه بودن آن در این قسمت بررسی می شود تعداد کاراکترهای عنوان سایت می بایست حداکثر 50 تا 60 کاراکتر و شامل کلمات کلیدی مناسب باشد.

 Meta Description (توضیحات متا): توضیحات متا می بایست بین 70 تا 160 کاراکتر باشد .

Google Previw (نحوه نمایش در موتورها جستجو): این قسمت نشان می دهد که سایت در موتورهای جستجو به چه طریقی نمایش داده می شود و خیلی مهم است که شامل کلمات کلیدی مناسب باشد و با جملاتی مناسب و مختصر نشان دهد موضوع سایت چیست.

Heading (تگ های (H: همانطور که می دانید تگهای h1 تا  h6 در کدهای سایت مهم هستند تگها برای نشان دادن اهمیت یک تیتر و صفحه است که تیترها را با آنها نشان گذاری می کنیم و میزان اهمیت یک مطلب را از طریق آن به موتور جستجو معرفی می کنند اما استفاده بیش از حد از این کلمات بر سئو تاثیر منفی دارد .

- میزان اهمیت تگها از H1 اتا H6 به ترتیب کاهش می یابد که تگ H1 پراهمیت ترین و تگ H6 کم اهمیت ترین آنها می باشد.

- حین استفاده از این تگها در صفحه به ترتیب از H1 اتا H6 استفاده کنید و حداکثر یک تگ H1 در هر صفحه داشته باشید. و از استفاده از کلمات تکراری در تگها پرهیز کنید.

Kyword cloud ,Keyword Consistency: کلمات کلیدی و میزان تکرارشان که را نمایش می دهد برای انتخاب کلمات کلیدی مناسب ابزارهای مختلفی مثل گوگل اد وجود دارد که با استفاده از انها می توانید کلمات کلیدی مناسب با سایت خود را بیابید.

Alt Atrribute( نام عکسها): یکی از نکاتی که در بهینه سازی موتورهای جستجو اهمیت دارد، انتخاب نام مناسب برای تصاویر است ( با نام گذاری تصاویر شانس پیدا شدن سایت در موتورهای جستجو افزایش می یابد) این قسمت تصاویر مورد استفاده با آدرس آنها را نمایش می دهد.از اینجا می توانید تصاویر و نام آنها را بررسی کنید

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

Google+ Publisher (اتصالات گوگل پلاس): برای بهینه سازی موثر سایت، خوب است که به اکانت گوگل پلاس متصل باشد.این قسمت اتصالات گوگل پلاس را نمایش می دهد.

In-Page Links (لینکهای سایت): لینک های درونی و بیرونی سایت را نمایش می دهد .

لینکهای شکسته: لینکهای شکسته و آسیب دیده سایت با آدرس آنها نمایش داده می شود.

URL Rewrite:میزان راحت بودن آی پی بررسی می شود

Domain Registration : دامین و تاریخ ثبت و انقضای آن را از این قسمت می توانید بدست آورید.

Robot.txt,XML Sitemap : نشان داده می شود که نقشه سایت و ربات سایت به درستی برای خزنده های و کرول ها معرفی شده یا خیر

Blog(بلاگ سایت): همانطور که همراه برای سئو بیان می شود محتوا پادشاه است بلاگ نیز در هر سایت یکی از مهمترین قسمتهای محتوایی است که وجود آن برای هر سایتی ضروری است این قسمت وجود یا عدم وجود بلاگ را نشان می دهد.

Mobile Visit: میزان بازیدی از طریق موبایل که برای استفاده از ان باید عضو سایت شوید.

Mobile-friendliness: بهینه بودن سایت برای نمایش در صفحات موبایل و کاربر پسند بودن آن

Mobile Rendering: نحوه نمایش در موبایل و دیگر دستگاهها

Touchscreen Readiness: مناسب بودن دکمه ها و محل های کلیک خور سایت برای لمس در صفحات لمسی و کوچک

Font Size Legibility و Font Size Legibility  و Mobile Viewport : سازگاری سایت و نحوه نمایش فونتها در تلفن همراه

Mobile Speed: سرعت بارگذاری سایت در برای کاربران تلفن همراه

آموزش Woorank در اینجا تمام نمی شود قسمتهای دیگر SEO و دو منو Promote و Measure باقی مانده است که در مقاله بعدی آن ها را توضیح می دهیم.

اعتبار سنجی فرم ها و ضرورت آن در طراحی سایت (قسمت دوم)

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

 1. اعتبار سنجی با بازخورد

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

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

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

تغییر رنگ پس زمینه یا رنگ حاشیه کادری که در آن خطا رخ داده

2.اعتبار سنجی با تغییر رنگ لیبل به گزینه صحیح

با درج نوشته هایی بصورت راهنما در کنار هر فیلد که با پر شدن هر فیلد درست یا اشتباه بودن فیلد را اطلاع دهد.

3. اعتبار سنجی پس از ثبت

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

4.اعتبار سنجی از طریق برد زمانی

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

5.اعتبار سنجی کلی

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

6.اعتبار سنجی با ابزار راهنما

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

7. اعتبار سنجی داینامیک

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

8.اعتبار سنجی با کد امنیتی

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

اعتبار سنجی فرم ها و ضرورت آن در طراحی سایت (قسمت اول)

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

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

هدف از اعتبار سنجی

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

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

در این مقاله و مقاله بعدی نه تنها در مورد اعتبار سنجی فرم ها بلکه در مورد انواع و مدلهای مختلف خطاهای رایج حین پر کردن فرم ها صحبت می کنیم:

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

1.اعتبار سنجی سمت سرور

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

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

2.اعتبار سنجی سمت کاربر

اعتبار سنجی سمت سرور به اندازه کافی قوی و امن است اما برای ایاد تجربه کاربری موثر می توان از اعتبار سنجی سمت کاربر استفاده کنید.متدهای جاوا اسکریپیتی که تعریف می کنید در این روش باعث اعتبار سنجی فرم می شود.

3.اعتبار سنجی برای دریافت اطلاعات ضروری

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

4.اعتبار سنجی فرمت اطلاعات وارد شده

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

5.اعتبار سنجی حین ویرایش اطلاعات

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