دسته: بلاگ

انواع فیلد HTML5 در طراحی فرم برای موبایل

انواع فیلد HTML5 در طراحی فرم برای موبایل

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

انواع فیلد ورودی در HTML5

فیلدهای ورودی متفاوتی در زبان HTML5 تعریف شده اند که در صورتی که Type یا نوع هر فیلد به درستی انتخاب شود، به علت باز شدن کیبوردهای مجازی مختلف با توجه به نوع فیلد، کاربران موبایل راحت تر می توانند اقدام به ورود اطلاعات و تکمیل فرم در سایت کنند و با افزایش رضایت مندی کاربران از سایت، میزان ماندگاری آنها در سایت بیشتر می شود و به همین دلیل یکی از اصولی که در سئوی حرفه ای به آن دقت می شود، مشخص کردن نوع هر input است که در ادامه به تفکیک در مورد برخی از انواع پرکاربرد input و کاربرد آنها برای کاربران موبایل توضیح داده شده و برای هر نوع input، تصویری از موبایل با سیستم عامل های Android یا iOS نمایش داده شده است.

فیلد url

در صورتیکه فیلد ورودی از نوع url باشد، با توجه به تصویر زیر، کیبورد مناسب جهت نوشتن آدرس URL برای کاربران موبایل باز خواهد شد. ضمنا کاربران فقط می توانند آدرس را به صورت http:// و https:// و ftp:// و mailto: وارد نمایند.
<input type="url">

آدرس URL را وارد نمایید:

 

URL input ios
کیبورد نوشتن URL در iOS

فیلد tel

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

<input type="tel">

شماره تلفن را وارد نمایید:

 

کیپد ورود شماره تلفن در اندروید
کیپد ورود شماره تلفن در اندروید

فیلد number

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

<input type="number">

فیلد وارد کردن اعداد:

 

کیپد ورود اعداد در اندروید
کیپد ورود اعداد در اندروید

فیلد email

اگر برای فیلد ورود آدرس ایمیل، نوع input را به صورت email تعریف کنید، کیبوردی که بر روی موبایل باز می شود دارای دکمه @ در دسترس خواهد بود که کاربر موبایل بتواند به راحتی اقدام به وارد کردن آدرس ایمل نماید.

<input type="email">

آدرس ایمیل را وارد نمایید:

 

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

فیلد date

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

<input type="date">

تاریخ را انتخاب نمایید:

 

انتخاب تاریخ از تقویم iOS
انتخاب تاریخ از تقویم iOS

فیلد time

اگر از input با نوع time استفاده کنید، مشابه تصویر زیر، امکان انتخاب ساعت و دقیقه و AM و PM وجود خواهد داشت.

<input type="time">

زمان را وارد نمایید:

 

انتخاب زمان در iOS
انتخاب زمان در iOS

فیلد datetime-local

اگر از input با نوع datetime-local استفاده کنید، مشابه تصویر زیر، امکان انتخاب زمان و تاریخ با هم وجود دارد.

<input type="datetime-local">

زمان و تاربخ را وارد نمایید:

 

انتخاب زمان و تاریخ در iOS
انتخاب زمان و تاریخ در iOS

فیلد week

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

<input type="week">

هفته مورد نظرتان را انتخاب نمایید:

 

انتخاب هفته در اندروید
انتخاب هفته در اندروید

فیلد month

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

<input type="month">

ماه مورد نظرتان را انتخاب نمایید:

 

انتخاب ماه در iOS
انتخاب ماه در iOS

فیلد range

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

<input type="range">

محدوده مورد نظرتان را انتخاب نمایید:

 

انتخاب رنج در iOS
انتخاب رنج در iOS

فیلد color

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

<input type="color">

رنگ مورد نظرتان را انتخاب نمایید:

 

انتخاب رنگ در اندروید
انتخاب رنگ در اندروید
انتخاب رنگ با گوگل کروم در اندروید
انتخاب رنگ با گوگل کروم در اندروید

به این نکته توجه داشته باشید که استفاده از نوع صحیح input الزاما به معنی اعتبارسنجی یا validation دیتای ورودی نیست. جهت اعتبارسنجی از تکنیک های مختلف مانند استفاده از Ajax و یا استفاده از pattern در HTML می توانید استفاده نمایید.

Rich result چیست

Rich result چیست؟

گوگل تغییراتی را در نحوه نمایش نتایج جستجو تحت عنوان rich result از اوایل سال 2016 در آمریکا و از اوایل سال 2017 در بیشتر کشورها انجام داد. نتایجی که به صورت rich result هستند، در واقع نتایجی هستند که حاوی اطلاعاتی مانند تعداد رای بازدیدکنندگان، مقدار کالری غذا، تاریخ شروع رویداد، فیلم ها، کتاب ها، شبکه های اجتماعی، اطلاعات شرکت و موارد مشابه دیگری هستند و گوگل این اطلاعات را معمولا از طریق structured data کسب می کند.

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

انواع rich result

گوگل نتایج جستجو را هم در موبایل و هم در دسکتاپ می تواند به صورت rich result نمایش دهد که در ادامه به توضیح شیوه های متفاوت نمایش آن پرداخته شده است.

Rich snippet

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

Rich snippets

Rich Card

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

rich result برای کتاب و فیلم و دستور طبخ غذا
نحوه نمایش rich result برای کتاب و فیلم و دستور طبخ غذا

Knowledge Graph

Knowledge Graph یا Knowledge Panel باکس اطلاعاتی است که در کنار نتایج جستجو نمایش داده می شود و به عنوان مثال حاوی اطلاعات افراد و شخصیت های شناخته شده، اطلاعات کشورها، شرکت ها و موارد گوناگون دیگر می باشد. همان طور که در قسمت الگوریتم ها توضیح داده شد، یکی از وظایف الگوریتم مرغ مگس خوار گوگل استخراج اطلاعات از سایت ها جهت نمایش آنها در Knowledge Graph است.

Tehran knowledge graph

Featured snippet

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

Featured snippet

تاثیر Rich result بر رنکینگ و کاربرد آن در سئو

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

میانگین ارزیابی
آنالیز عملکرد کاربران گوگل ریکپچا

آنالیز عملکرد کاربران گوگل ریکپچا

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

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

گزارش درخواستهای ارسالی به گوگل ریکپچا

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

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

مقایسه sessionها رد شده و یا عبور کرده از ریکپچا

در این گزارش sessionهای عبور کرده از سد ریکپچا و sessionهای موفق نشده با یکدیگر مقایسه شده اند.

google recaptcha session completed
نسبت رد شدن به عبور از در گوگل ریکپچا

مقایسه نرخ اسپم سایت با اسپم جهانی

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

نسبت ا

میانگین زمان پاسخ به گوگل ریکپچا

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

زمان میانگین پاسخ به گوگل ریکپچا
زمان میانگین پاسخ به گوگل ریکپچا
آموزش گوگل ریکپچا

آموزش گوگل ریکپچا

جهت استفاده از سرویس گوگل ریکپچا ابتدا باید یک اکانت گوگل (جیمیل) داشته باشید و سپس می توانید با در اختیار داشتن کلید خصوصی و کلید عمومی که به آنها site key و secret key نیز گفته می شود، از سرویس ریکپچای گوگل استفاده نمایید. از site key جهت نمایش ویجت ریکپچا و از secret key به عنوان مجوز ارتباط سرور سایت با گوگل ریکپچا استفاده می شود. در ادامه، نحوه ثبت نام سایت در وبسایت گوگل ریکپچا جهت دریافت کلید خصوصی و عمومی به همراه تنظیمات آن توضیح داده شده است:

ثبت سایت در گوگل ریکپچا

1. ابتدا توسط اکانت گوگل خود وارد سایت گوگل ریکپچا شوید.

2. سپس در قسمت Register a new site تصویر زیر را مشاهده خواهید کرد.

انتخاب ورژن ریکپچا

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

3. پس از انتخاب reCAPTCHA V2 یا Invisible reCAPTCHA باید با توجه به تصویر زیر، نام دامین یا دامین های مورد نظرتان را به صورت example.com وارد نمایید و در نهایت پس از تایید موافقت با قوانین استفاده از سرویس گوگل روی دکمه Register کلیک کنید.

تنظیمات گوگل ریکپچا
تنظیمات گوگل ریکپچا

یک: یک نام را به عنوان لیبل وارد نمایید.

دو: نام دامین یا دامین های مورد نظرتان را با توجه به توضیحاتی که در ادامه متن آمده است، وارد نمایید.

سه: آدرس یا آدرس های ایمیلی که به عنوان ادمین در نظر گرفته خواهند شد را وارد نمایید.

چهار: میزان سختی و آسانی عبور از سد ریکپچا را مشخص نمایید.

4. سپس یک site key و یک secret key در اختیار شما قرار داده می شود که می توانید با استفاده از آنها از سرویس گوگل ریکپچا استفاده نمایید. کلید ها شبیه موارد زیر هستند:

Site key: 6LeIxAcTAATTTAJcZVRqyHh71UMIEKNQ_MXjiZKDr

Secret key: 6LeIxAcTAATTTAGG-vFI1TnRWxMZNFuojJ4WifJYd

5. اگر از CMS مانند جوملا، دروپال، وردپرس و امثال آن استفاده می کنید، می توانید با استفاده از پلاگین های آماده و فقط با کپی و پیست کردن Key ها در فیلدهای مربوطه، از Google reCAPTCHA استفاده نمایید.

پلاگین گوگل ریکپچا برای وردپرس

گوگل رکپچا در جوملا

گوگل ریکپچا برای دروپال

6. اگر خودتان توسعه دهنده هستید می توانید از با استفاده از راهنماهای گوگل برای توسعه دهنده ها استفاده نمایید (با آی پی آدرس غیر از ایران می توانید به راهنماها دسترسی داشته باشید):

راهنمای توسعه دهنده ها برای استفاده از reCAPTCHA V2

راهنمای توسعه دهنده ها برای استفاده از Invisible reCAPTCHA

نکات نوشتن دامین در هنگام ثبت نام در reCAPTCHA

  • در صورتیکه هنگام ثبت دامین در گوگل ریکپچا، نام دامین را به صورت example.com وارد نمایید، API key که در اختیار شما قرار می گیرد علاوه بر example.com برای www.example.com و subdomain.example.com و example.com:8080 نیز یکسان خواهد بود.
  • می توانید بیشتر از یک نام دامنه را در هنگام ثبت نام وارد نمایید و بنابراین می توانید از یک API key برای همه دامنه ها استفاده نمایید.
  • می توانید دامنه های متفاوت را به صورت جداگانه ثبت کنید و بنابراین برای هر دامنه از یک API key بخصوص استفاده کنید.
  • می توانید با وارد کردن localhost به جای نام دامین، از گوگل ریکپچا بر روی localhost استفاده نمایید.

انتخاب ظاهر reCAPTCHA V2

گوگل ریکپچا ورژن 2 از نظر رنگ با دو ظاهر light و dark در دسترس است که تصاویر آنها در زیر قابل مشاهده است:

Google ecaptcha v2 light theme
Light theme
Google ecaptcha v2 dark theme
Dark theme

همچنین از نظر ابعاد نیز با دو اندازه normal و compact در دسترس هستند. جهت آشنایی با نحوه تغییر پارامترهای رندر Google reCAPTCHA Widget می توانید به راهنمای زیر مراجه نمایید.

راهنمای تغییر ظاهر گوگل ریکپچا (دسترسی فقط با آی پی غیر از ایران)

آنالیز ترافیک گوگل ریکپچا

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

میانگین ارزیابی
انواع گوگل ریکپچا

انواع گوگل ریکپچا

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

گوگل ریکپچا نسخه یک | reCAPTCHA V1

ریکپچای نسخه یک در سال 2007 منتشر شد و کاربران برای عبور از سد آن باید حروف و اعداد به هم ریخته مانند تصویر زیر را تشخیص می دادند. گوگل از ماه می سال 2016 دیگر از ریکپچای نسخه 1 پشتیبانی نمی کند ولی همچنان به سایت هایی که از قبل از این تاریخ از ریکپچای نسخه 1 استفاده می کردند سرویس دهی میکند و توصیه میکند که سایت ها به ریکپچای ورژن 2 و یا ورژن نامرئی سوییچ کنند.

گوگل ریکپچا نسخه 1

گوگل ریکپچا نسخه دو | reCAPTCHA V2

ریکپچای نسخه دو در دسامبر 2014 منتشر شد. در این نسخه دیگر تصاویر به هم ریخته به کاربران نمایش داده نمی شد و کاربران برای عبور از این ورژن که به no CAPTCHA reCAPTCH نیز معروف است همانند تصویر زیر باید تیک چکباکس را بزنند تا گوگل با الگوریتم خاص خودش بتواند ربات بودن و یا نبودن کاربر را بررسی کند!

گوگل ریکپچا

ریکپچای نامرئی گوگل | Invisible reCAPTCHA

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

ریکپچای نامرئی گوگل

شما می توانید نمونه عملی استفاده از ریکپچای نامرئی را در ادامه همین مقاله در قسمت کامنت ها مشاهده کنید.

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